You are on page 1of 5

Web Engineering Lab

3610149

Experiment No. :- 1
Aim:-Introduction to Html.
THEORY: HTML is a language for describing web page. HTML stands for Hyper Text Markup Language. HTML is not a programming language , it is a markup language. A markup language is a set o markup tags. HTML uses markup tags to describe web pages. HT!" Tags: HTML markup tags are usually called HTML tags. HTML tags are keywords surrounded by angle brackets like <html>. HTML tags normally come in pairs like <b> and < b>. The first tag in a pair is the start tag , the scond tag is the end tag. !tart and end tags are also called opening tags and closing tags. HT!" #ocuments $ %e& 'ages : HTML documents describe web pages. HTML documents contain HTML tags and plain text. HTML documents are also called web pages. ()ntax O HT!" 'age : <html> <body> <h">My #irst Heading < h"> <p>My #irst $aragraph< p> < body> < html> The <html> element defines the whole HTML document. The element has a start tag <html> and an end tag < html>. The element has a start tag <body> and an end tag < body>. HTML headings are defined with the <h"> to <h%> tags. The <p> element defines a paragraph in the HTML document. The element has a start tag <p> and an end tag < p>.
1

Web Engineering Lab

3610149

HT!" *ormatting Tags : HTML uses tags like <b> and <i> for formatting output , like bold or italic text.These HTML tags are called formatting tags. HTML Text #ormatting Tags& Tag <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del>

'escription 'efines bold text. 'efines big text. 'efine emphasi(ed text. 'efines italic text 'efines small text 'efines strong text 'efines subscribed text 'efines superscripted text 'efines inserted text 'efines deleted text

T+e HT!" (t)le Attri&ute : The purpose of the style attribute is to pro)ide a common way to style all HTML document. HT!" H)perlinks,"inks- : * hyperlink +or link, is a word , group of words , or image that you can click on to -ump to a new document or a new section with in the current document. .hen you mo)e the cursor o)er a link in a .eb page , the arrow will turn into a little hand. Links are specified in HTML using the <a> tag.The <a> tag can be used in two ways &/ ". To create a link to another document , by using the href attribute. 0. To create a bookmark inside a document , by using the name attribute. ()ntax or creating a link : < a href 1 2url2 > Link Text < a> HTML The <img> Tag and the !rc *ttribute 3n HTML , images are defined with the <img> tag. The <img> tag is empty , which means that it contains attributes only and has no closing tag. To display an image on a page , you need to use the src attribute.!rc stands for 2source2.The )alue of the source attribute is the url of the image you want to display.

()ntax or de ining an image : < img src 1 2url2 alt 1 2some4text2 >
2

Web Engineering Lab

3610149

HT!" Ta&les : Tables are defined with the <table> tag. ()ntax or creating ta&le : < table border 1 2"2> <tr> <td>5ow " , 6ell "< td> <td>5ow " , 6ell 0< td> < tr> <tr> <td>5ow 0 , 6ell "< td> <td>5ow 0 , 6ell 0< td> < tr> < table> HTML Table Tags & Tag 'escription <table> 'efines a table <th> 'efines a table head <tr> 'efines a table row <td> 'efines a table cell To display a table with borders , specify the border attribute. HT!" "ists : The most common HTML lists are ordered and unordered lists & *n unordered list starts with the <ul> tag.7ach list item starts with the <li> tag. *n ordered list starts with the <ol> tag.7ach list item starts with the <li> tag. HT!" *orms : HTML forms are used to pass data to a ser)er . * form can contain input elements like text fields, checkboxes , radio buttons , submit buttons and more. * form can also contain select lists,textares ,fieldset , legend , and label elements. The <form> tag is used to create an HTML form.

()ntax o *orm : <form>


3

Web Engineering Lab

3610149

3nput 7lements. . < form> Text *ields : <input type 1 2text2 > defines a one /line input field that a user can enter text into. ()ntax & <form> #irst name & <input type 12text2 name 1 2firstname2 ><br> Last name & <input type 12text2 name 1 2lastname2 > < form> 'ass.ord *ield : <input type 1 2password2 > defines a password field. ()ntax : <form> $asword & <input type 1 2password2 name 1 2pwd2 > < form> Radio /uttons : <input type 1 2radio2 > defines a radio button.5adio buttons let a user select 89L: 897 one of a limited number of choices. ()ntax : <form> <input type 1 2radio2 name 12sex2 )alue 12male2> Male<br> <input type 1 2radio2 name 12sex2 )alue 12female2> #emale < form> 0+eck&oxes : <input type 1 2checkbox2 > defines a checkbox.6heckboxes let a user select 897 or M857 options of a limited number of choices.

()ntax : <form> <input type 12checkbox2name 12)ehicle2 )alue 12!cooty2 >3 ha)e a scooty<br> <input type 12checkbox2name 12)ehicle2 )alue 126ar2 >3 ha)e a 6ar
4

Web Engineering Lab

3610149

< form> (u&mit /utton : <input type 12submit2 > defines a submit button. ()ntax : <form name 12input2 action 1 2html4form4action.asp2 method 12get2> ;sername &<input type 12text2 name 12user2 > <input type 1 2submit2 )alue 12!ubmit2 > < form> HT!" *rames : .ith frames , you can displaymore than one HTML document in the same browser window. 7ach HTML document is called a frame , and each frame is independent of the others. The disad)antage of using frames are & The web de)eloper must keep track of more HTML documents. 3t is difficult to print the entire page. ()ntax o rame : <frameset cols 1 20<= , >< =2> <frame src 1 2frame4a.html2 > <frame src 1 2frame4b.html2 > < frameset>

You might also like