1. HTML Hypertext Mark-up Language, commonly referred to as HTML, is the standard mark-up language used to create web pages . In 1980, physicist Tim Berners-Lee , who was a contractor at CERN , proposed and prototyped ENQUIRE , a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet -based hypertext system.Berners-Lee specified HTML and wrote the browser and server software in late 1990. That year, Berners-Lee and CERN data systems engineer Robert Caelian collaborated on a joint request for funding, but the project was not formally adopted by CERN. In his personal notes from 1990 he listed “some of the many areas in which hypertext is used" and put an encyclopaedia first. Hypertext: Hypertext is the opposite of liner. In the good old days- when a mouse was something the cat chased- computer programme had executed one action it went to the next line and after that, the Raghav kumar jha M.B.A. (GEN) 1050 Page 1
Transcript
1.HTML
Hypertext Mark-up Language, commonly referred to as HTML, is the standard mark-up language used to create web pages.
In 1980, physicist Tim Berners-Lee, who was a contractor at CERN, proposed and
prototyped ENQUIRE, a system for CERN researchers to use and share
documents. In 1989, Berners-Lee wrote a memo proposing an Internet-
based hypertext system.Berners-Lee specified HTML and wrote the browser and
server software in late 1990. That year, Berners-Lee and CERN data systems
engineer Robert Caelian collaborated on a joint request for funding, but the project
was not formally adopted by CERN. In his personal notes from 1990 he listed
“some of the many areas in which hypertext is used" and put an encyclopaedia
first.
Hypertext: Hypertext is the opposite of liner. In the good old days- when a
mouse was something the cat chased- computer programme had executed
one action it went to the next line and after that, the next line and so on. But
HTML is different- you can go whenever you went and whenever you want.
For example, it is not necessary to visit MSN.com before you visit
HTML.net.
Text: Text is self- explanatory.
Mark-up: Mark-up is what you do with the text. You are marking up the
text the same way do in a text editing programme with headings, bullets and
bold text and so on.
Language: Language is what HTML is. It uses many English words.
VERSIONS OF HTMLRaghav kumar jhaM.B.A. (GEN) 1050 Page 1
HTML 2.0: HTML 2.0 was the first classic version of HTML. The HTML
2.0 was introduced on 24 November, 1995. HTML 2.0 constituted almost all
the elements but lacked the extension for Netscape and Microsoft. In HTML
2.0, tables are poor in aligning attributes.
HTML 3.2: After HTML 2.0, the next major version development was
HTML3which happened in late 1995. But HTML 3 development did not get
completed and it was never implemented. The next major release after
HTML2.o was HTML 3.2.
HTML 4.0: HTML 4.0 was the next major release of HTML. HTML 4.0
was introduced in December, 1997. HTML 4 is an SGML application
HTML 4.0.1: HTML 4.0.1 is the current official version of HTML.
HTML 4.0.1 enhanced most trademarked extensions.
HTML 5 Draft versions: HTML 5 is the latest version of HTML.
HTML 5 came into life on January 2008. HTML 5 included its own HTML
serialization along with XML based XHTML 5 SERIALIZATION. Html 5’s
syntax brings to mind SGML SYNTAX.
1.FEATURES OF HTML
Raghav kumar jhaM.B.A. (GEN) 1050 Page 2
Some features of HTML are as below:(1) Using HTML one can create web pages and web sites that
can be published on the internet or a corporate intranet.(2) One can create on-line forms using HTML which can be used
to collect information about the user, conduct transactions.(3) One can include image, multimedia, JavaScript and bring
pages with dynamic HTML.(4) It allows the creation of hypertext links also known as
hyperlinks and this hypertext can be used to connect document on a different machine on the same networks or on the different network.
(5) It is not case sensitive. It means that words could be typed in upper case, lowercase or in both cases.
Raghav kumar jhaM.B.A. (GEN) 1050 Page 3
2.Basic structure of HTML document
CODING:-
<! DOCTYPE html>
<Html>
<Head>
<Title>PAGE TITLE</title>
</head>
<Body>
<H1> FIRST HEADING</H1>
<P> FULL PARAGRAPH</P>
</body>
</html>
CODING EXPLAINED:-
The DOCTYPE declaration defines the document type to be HTML The text between <html> and </html> describes an HTML document The text between <head> and </head>provides information about the
document The text between <title> and </title>provides a title for the document The text between<body> and </body> describes the visible page content The text between <h1> and </h1> describe a heading The text between <p> and </p>describes a paragraph
RESULT:-
Raghav kumar jhaM.B.A. (GEN) 1050 Page 4
3.TAGS
Raghav kumar jhaM.B.A. (GEN) 1050 Page 5
Tags are instructions that are embedded directly into the text of a HTML document. Each HTML tag describes tag describes that the browser should do something instead of simply displaying the text. In HTML, the tag begins with (<) and ends with (>)
1.Types of tag
HTML tags can be of different types. They are:-
I. Paired tagsII. Unpaired tag
III. Heading tagIV. Paragraph tagV. Formatting tag
1.1 Paired tags
A tag is said to be a paired tag if the text is placed between a tag its companion tag. In paired tags, the first tag is referred to as opening tag and the second tag is referred to as closing tag.
EXAMPLE :-
<I>this text is in italics</I>
1.2 Unpaired tags
An unpaired tag does not have a companion tag. Unpaired tags are also knownas singular or stand-alone tags.
EXAMPLE :-
<Br>, <hr>etc.
This tag does not require any companion tag.
1.3Heading tags
Raghav kumar jhaM.B.A. (GEN) 1050 Page 6
Any document starts with a heading. You can use different size for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading.
H1 Shows Bigger And Bold Heading
Whereas, H6 show the Smallest Heading as Compare to other Heading Tags.
Syntax :-
<h1>Heading</h1>
1.4 Paragraph tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag.
EXAMPLE:-
<h1>Physical layer</h1>
<p> It representation of bits to be transmitted, bits must be encoded into single/electrical or optical. The physical layer define the type of encoding (how 0 and 1 are changed to signals).</p>
EXAMPLE:-
<!DOCTYPE html>
<html>
<Head>
<title> tags</title>
</head>
<body>
<h1><b><u>Chemical layer</u></b></h1>
Raghav kumar jhaM.B.A. (GEN) 1050 Page 7
<p><i>It representation of bits to be transmitted, bits must be encoded into single or Double.</p>
</body>
</html>
1.5 Formatting tag
The character formatting tags are that are applied to any string or character. These are of followings types:
Bold italic and underlines
<B></B> format is used to make the text bold
<I></I> format is used to make the text Italic
<u></U> format is used to make the text Underlines.
Raghav kumar jhaM.B.A. (GEN) 1050 Page 8
HTML provides the some other formatting tags like,
<Blink> Make a text blink
<em> Emphasizes the text
<s> Applied strike through to text
<sub> Subscript
<sup> Superscript
If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underline; these are just three of the options available to indicate how text can appear in HTML and XHTML.
CODING:-
RESULT:-
Raghav kumar jhaM.B.A. (GEN) 1050 Page 9
4.LIST One useful features of HTML is the ability to create lists.
Raghav kumar jhaM.B.A. (GEN) 1050 Page 10
Lists are most ant circumstance where you want to itemize or categories things.
HTML provides simple and effective ways to specify lists in documents. Lists are the best methods of organizing information and presenting it in a structured fashion.
2.Types of list
Ordered list Unordered lists Definition lists
2.1 Ordered List
An ordered list starts with the <OD> tag. Each list item starts with the <Li>tag.
EXAMPLE:-
<Ol>
<Li> Cold</Li>
<Li> Hot</Li>
<Li> Milk</Li>
</Ol>
2.2 UNORDERD LIST
Unordered list streets with the <Ul> tag. Each list item starts with the <Li> tag.
EXAMPLE:-
<Ul>
<Li> Cold</Li>
<Li> Hot</Li>
<Li> Milk</Li>
</Ul>
2.3Definition List
Raghav kumar jhaM.B.A. (GEN) 1050 Page 11
Definition list consist of two parts: a term and a description. To mark up a definition list, you need three HTML elements; a container <Dl>, a definition term <DT>, and a definition description <DD>.
Syntax :-
<! DOCTYPE html>
<Html>
<Title>lists</Title>
<Head><b> cake recipe </b></Head><br>
<Body>
<h1><b> CAKE RECIPE</b></h1>
<ol type="1"=1>
<Li><I>INGREDIENTS</I></Li>
<Li> 3 cup all- purpose flour, spooned and levelled</Li>
<Li> 2 teaspoons baking soda</Li>
<Li> 1 teaspoon salt</Li>
<Li> 1 ½ teaspoons ground cinnamon </Li>
<Li> 1 ¼ teaspoons ground cardamom</Li>
<Li> 2 cups packed light- brown sugar</Li>
<Li> ¼ cup honey</Li>
<Li>s2 large eggs</Li>
<Li> 2 cup basic applesauce, or store- bought chunky applesauce</Li>
<Li> non-stick cooking spare</Li>
<Li>confectioners’ sugar, optional</Li></Ul>
<h2><b> DIRECTIONS</b></h2>
<Ul>
Raghav kumar jhaM.B.A. (GEN) 1050 Page 12
<ul type="disc">
<Li>Preheat oven to 350 degrees. In a large bowl, whisk together flour, baking soda, salt, cinnamon, and cardamom. Set aside. </Li>
<Li>in another bowl, with an electric mixer, beat butter, brown sugar, and honey until light and fluffy. And eggs, one at time, beating until combined. With mixer on low speed, gradually add flour mixture; beat just until combined. Beat in applesauce. </Li>
<Li>Generously coat a nonstick9- inch tube pan with cooking spray. Spoon batter into pan; smooth top. Bake until a tooth pick inserted in the middle comes out clean (but slightly wet), 50 to 60 minutes.
<Li>cool on a wire rack 10 minutes. Turn out of pan onto a cutting board or baking sheet; invert cake onto rack, top side up. Cool completely. Dust with confectioners’ sugar before serving, if desired.</Li></Ul>
<Dl>
<DT><b>GROUND CINNAMON</b></DT>
<DD> Ground cinnamon means jameendaalacheenee. a lot of folks have made a hubbub about whether or not <b>your cinnamon is real.</b> their claim is that Ceylon cinnamon is the only true cinnamon, and that cassia cinnamon is fake.</DD>
<DT><b>GROUND CARDAMON</b></DT>
<DD>cardamom is a spice native to the Middle East, North Africa, and Scandinavia. There are three types of cardamom; green cardamom, black cardamom and Madagascar cardamom</DD>
</Dl>
</body>
</html>
RESULT:-
Raghav kumar jhaM.B.A. (GEN) 1050 Page 13
5.LINKS
Links that connects different hypertext document to another are called HYPERLINKS. <a> </a> tag is used to build link.
Raghav kumar jhaM.B.A. (GEN) 1050 Page 14
Syntax:-
<a href=”url”>text</a>here “url” is the address where we want to take our control and text is the content on which we click
Link can be implemented to move from:-
1).one website to another(using absolute url) <a href=”www.google.com”>google</a>
2). One webpage to another within same website (using relative url) <a href=”../../homepage.html”>home</a>
3).one part of webpage to another (same webpage)For this we use “id” tag for the location where we want to go eg:<h1
id=”top”>heading</h1> We are at bottom of page and we want to go to “top”So we will write:<a href=”#top”>top</a>
4).one page to some part of another page of some website<a href=”www.yahoo.com/xyz.html/#bottom”>to go to bottom of yahoo page</a>
5).to open a link on new window<a href=”www.google.com” target=”_blank”>google</a>
6.IMAGE The image <IMG> tag is used to insert images/graphics in an HTML documents.
The image tag is written as <IMG>. It is used to insert an image in an HTML documents.
It is necessary to close the <IMG> tag in html. It is done so by putting a (/) backslash after the word image. <IMG/>.
Like the anchor tag, the image tag <IMG> cannot function on its own. Various attributes have to be included in it to display the image on the web page.
Syntax:
<IMG ATTRIBUTES/>
SRC
Source attributes which provide the displays a text if the picture is not displayed on the web browser.
ALT
It is an attribute which provide the displays a text if the picture is not displayed on the web browser.
WIDTH
Width determines how wide the display should appear on the web pages
HEIGHT
Height determines that how high the display should appear on the web page.
(This coding we will save the extension with .html )
Raghav kumar jhaM.B.A. (GEN) 1050 Page 27
10 LAYOUT
5.1 Layout Using <div> Elements
Raghav kumar jhaM.B.A. (GEN) 1050 Page 28
• Websites often display content in multiple columns (like a magazine or newspaper)
• HTML Layout Using <div> Elements• The <div> element is often used as a layout tool, because it can easily be
positioned with CSS. This example uses four <div> elements to create a multiple column layout:
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color:black;
color:pink;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
Raghav kumar jhaM.B.A. (GEN) 1050 Page 29
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1>Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo
</div>
Raghav kumar jhaM.B.A. (GEN) 1050 Page 30
<div id="section">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div id="footer">
Raghav jha
</div>
</body>
</html>
RESULT:-
Raghav kumar jhaM.B.A. (GEN) 1050 Page 31
5.2 Layout Using <table> Elements
• The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.Example• For example, the following HTML layout example is achieved using a table with 3 rows and 2 columns but the header and footer column spans both columns using the cols pan attribute:
CODING:-
Raghav kumar jhaM.B.A. (GEN) 1050 Page 32
RESULT:-
11 TABLE CREATION
Raghav kumar jhaM.B.A. (GEN) 1050 Page 33
Table is created using <table> , <tr> ,<td> tag
Syntax:-
<table style=”width:100%”> <tr>
<td> </td>
<td> </td>
</tr>
</table>
Coding:-
<html> <head></head>
<title>caption</title><center>Table Creation </center><table border=2 height=100 width=500><caption>1.This is a table<tr><td>Name</td><td>class</td><td>roll no</td><td>section</td></tr>
Html Forms are required when you want to collect some data from the site visitor. For example during user registration you would like to collect information such as name, email, address, credit card etc.
A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.
• HTML forms are used to collect user input.• The <form> element defines an HTML form:• Syntax:- <form> form elements </form> • HTML forms contain form elements.• Form elements are different types of input elements, checkboxes, radio
buttons, submit buttons, and more.
Attribute Description
Action Backend script ready to process your passed data
Method Method to be used to upload data. The most frequently used are GET and POST methods
HTML Form Controls• Text Input Controls• Checkboxes Controls• Radio Box Controls• Select Box Controls• File Select boxes• Hidden Controls• Clickable Buttons• Submit and Reset Button
Raghav kumar jhaM.B.A. (GEN) 1050 Page 37
6.1 Text Input Controls
There are three types of text input used on forms:• Single-line text input controls - This control is used for items that require
only one line of user input, such as search boxes or names. They are created using HTML <input> tag.
• Password input controls - This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTMl <input> tag.
• Multi-line text input controls - This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.
6.2 Single-line text input controls
<input type="text"> defines a one-line input field for text input:
<form> First name: <input type="text" name="firstname“ /><br> Last name: <input type="text" name="lastname“ /></form> note : default width of a text field is 20 characters.
6.3 Password input controls
<form > User ID : <input type="text" name="user_id" /> <br> Password: <input type="password" name="password" />
</form>
6.4 Checkbox Control
Raghav kumar jhaM.B.A. (GEN) 1050 Page 38
• Checkboxes are used when more than one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to checkbox.
6.5 Radio Button Input
• <input type="radio"> defines a radio button.• Radio buttons let a user select ONE of a limited number of choices
• <input type="submit"> defines a button for submitting a form to a form-handler.The form-handler is typically a server page with a script for
processing input data.
6.7 The Action Attribute
• The action attribute defines the action to be performed when the form is submitted.
• The common way to submit a form to a server, is by using a submit button.• Normally, the form is submitted to a web page on a web server.• In the example above, a server-side script is specified to handle the
submitted form:• <form action="action_page.php">
• If the action attribute is omitted, the action is set to the current page.
6.8 The Method Attribute
• The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms:
Raghav kumar jhaM.B.A. (GEN) 1050 Page 39
• <form action="action_page.php" method="get">or:
• <form action="action_page.php" method="post">
6.9 When to use GET
• You can use GET (the default method):• If the form submission is passive (like a search engine query), and without
sensitive information.• When you use GET, the form data will be visible in the page address:
action_page.php?firstname=Mickey&lastname=Mouse• GET is best suited to short amounts of data. Size limitations are set in your
browser.
6.10 when to use POST
• You should use POST:• If the form is updating data, or includes sensitive information (password).• POST offers better security because the submitted data is not visible in the
page address.
6.11 Grouping Form Data with <field set>
• The <fieldset> element groups related data in a form.
• The <legend> element defines a caption for the <fieldset> element.
13 Multimedia
• To add music or video into your web page. The easiest way to add video or sound to your web site is to include the special HTML tag called <embed>.
Raghav kumar jhaM.B.A. (GEN) 1050 Page 40
This tag causes the browser itself to include controls for the multimedia automatically provided browser supports <embed> tag and given media type. You can also include a <no embed> tag for the browsers which don't recognize the <embed> tag. You could, for example, use <embed> to display a movie of your choice, and <no embed> to display a single JPG image if browser does not support <embed> tag.
<html><head><title> FORM</title></head><img src="5.png" height=100 width=70><body bgcolor=skyblue><font color=blue face="Brush Script MT" size=8>R</font><font color=blue size=7 face=times new roman><u>aw</u>al Institutions</font><sub> where success is the culture</sub><br><pre><b>( Affliated to MD university , Rohtak & Approved by AICTE) </b></pre><font color=brown size=5><b><u>REGISTRATION FORM </u></b></font><br>
