HTML BASICS

GROUP 2 - ASSESSMENT 4

November 18, 2011

1

CONTENT OVERVIEW
            HTML – Origin and Versions HTML Introduction HTML Tags HTML Elements HTML Headings, Paragraphs & Links HTML Formatting HTML Lists HTML Images HTML Tables HTML Forms HTML Media Conclusion
November 18, 2011

2

HTML 3.  In the mid 1990s. November 18. HTML 4. proposed and prototyped a system for European Organization for Nuclear Research (CERN) researchers to use and share documents. HTML 5.HTML – ORIGIN & VERSIONS  Physicist Tim Berners-Lee.0 – December 1997. 2011 3 .  Berners-Lee specified HTML and wrote the browser and server software for rendering HTML documents towards the end of 1990.  Popular versions: HTML 2.0 – January 2008. in 1990.0 – November 1995.2 – January 1997. the popularity of HTML soared and standardization of the same was done.

INTRODUCTION  HyperText Markup Language (HTML) is the predominant markup language for web pages. 2011 4 .  The browser uses the tags to interpret the content of the page.HTML . November 18. enclosed in angle brackets. and what props to use. Example: <html>  A series of tags that are integrated into a text document form the content of all HTML codes.  HTML is written in the form of HTML elements consisting of tags.  HTML elements are the basic building-blocks of web pages.  HTML tells the browser what to do.

Many tags have attributes. Example: </b>. <b> and <B> start the same action. <P ALIGN=CENTER> centers the paragraph following it. i.HTML TAGS     They are surrounded with angle brackets. They come in pairs. The first tag turns an associated action on. Tags are not case sensitive. The second tag(off switch) starts with a forward slash.   November 18. 2011 5 .e.. mostly. For example. Example: “ <> ”. Example: “ <p> ” and “ </p> ”. and the second turns it off.

 Empty elements are closed in the start tag.htm" > <br /> Element content New Paragraph New Link Empty End tag </p> </a> (Not Needed) November 18.HTML ELEMENTS  An HTML element is everything from the start tag to the end tag. Start tag <p> <a href="default.  An HTML element ends with an end tag / closing tag.  The element content is everything between the start and the end tag.  Some HTML elements have empty content. 2011 6 .  An HTML element starts with a start tag / opening tag.

 Use the <br /> tag if you need a line break (a new line) without starting a new paragraph. 2011 7 . HTML Links:  The HTML code for a link is <a href="url">Link text</a> .  <h1> defines the most important heading.  Browsers automatically add an empty line before and after a paragraph. HTML Paragraphs:  Paragraphs are defined with the <p> tag. PARAGRAPHS & LINKS HTML Headings:  Headings are defined with the <h1> to <h6> tags. <h6> defines the least important heading. November 18.HTML HEADINGS.

2011 8 .HTML ELEMENTS .EXAMPLE HTML CODE  <h1>Sample heading</h1>  <h2>Sample heading</h2>  <h3>Sample Heading</h3> BROWSER OUTPUT  Sample Heading  Sample Heading  Sample Heading  <h4>Sample Heading</h4>  Sample Heading  <h5>Sample Heading</h5>  Sample Heading November 18.

co.EXAMPLE HTML CODE  <a href="http://google.  This is a para graph with line breaks.</p>  <p>This is<br /> a<p> para</p>graph with line breaks. 2011 9 .HTML ELEMENTS . November 18.in> Search Here</a>  <p>Sample paragraph.</p> BROWSER OUTPUT  Search Here  Sample Paragraph.

HTML FORMATTING HTML CODE  <b>This text is bold</b>  <i>This text is italic</i>  <u>This text is underlined</u>  <code>This is computer output</code>  <b><i>This text is both bold and italic</b></i> BROWSER OUTPUT  This text is bold  This text is italic  This text is underlined  This is computer output  This text is both bold and italic November 18. 2011 10 .

2011 11 .HTML TEXT FORMATTING HTML CODE <strong>This text is strong</strong>   BROWSER OUTPUT This text is strong <big>This text is big</big> This text is big <em>This text is emphasized</em>  This text is emphasized This is<sub> subscript</sub> and <sup>superscript</sup>  This is subscript and superscript November 18.

HTML LISTS  Lists are used to arrange items. November 18. 2011 12 . Each list item starts with the <li> tag.  The list items are marked with numbers. The most common HTML lists are ordered and unordered lists.  The list items are marked with bullets (typically small black circles). HTML Ordered Lists:  An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. HTML Unordered Lists:  An unordered list starts with the <ul> tag.

2011 13 .LISTS EXAMPLE HTML CODE  <ul> <li>Coffee</li> <li>Milk</li> </ul>  <ol> <li>Coffee</li> <li>Milk</li> </ol> BROWSER OUTPUT • Coffee • Milk 1. Milk November 18. Coffee 2.

if the image cannot be displayed.HTML IMAGES  In HTML.  The <img> tag is empty.  To display an image on a page. images are defined with the <img> tag. Src stands for "source". which means that it contains attributes only.The value of the alt attribute is an author-defined text. Syntax for defining an image: <img src="url" alt="some_text"/>  The required alt attribute specifies an alternate text for an image. you need to use the src attribute. 2011 14 . and has no closing tag. Syntax: <img src="boat.gif" alt="Big Boat" /> November 18. The value of the src attribute is the URL of the image you want to display.

HTML TABLES Tables are defined with the <table> tag. A <td> tag can contain text. cell 1</td> <td>row 1. A table is divided into rows (with the <tr> tag). other tables. lists. td stands for "table data. links. 2011 15 . etc." and holds the content of a data cell. forms. images. cell 2</td> </tr> </table> OUTPUT: November 18. and each row is divided into data cells (with the <td> tag). Example: <table border="1"> <tr> <td>row 1.

radio button. radio-buttons. depending on the type attribute. fieldset. An input element can be of type text field. legend.HTML FORMS  HTML forms are used to pass data to a server. checkboxes. and more. A form can also contain select lists. password. submit button. checkbox. 2011 16 .  An input element can vary in many ways. submit buttons and more.  A form can contain input elements like text fields. November 18. and label elements.  The <form> tag is used to create an HTML form: <form> input elements </form>  The most important form element is the input element. textarea.

2011 17 .HTML FORMS  <input type="text" /> defines a one-line input field that a user can enter text into: <form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /> </form> <input type="password" /> defines a password field: <form> Password: <input type="password" name="pwd" /> </form> November 18.

BROWSER OUTPUT – TEXT FIELD November 18. 2011 18 .

2011 19 .BROWSER OUTPUT – PASSWORD FIELD November 18.

HTML FORMS  <input type="radio" /> defines a radio button. <form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car </form> November 18. Checkboxes let a user select ONE or MORE options of a limited number of choices. Radio buttons let a user select ONLY ONE of a limited number of choices: <form> <input type="radio" name=“gender" value="male" /> Male<br /> <input type="radio" name=“gender" value="female" /> Female </form>  <input type="checkbox" /> defines a checkbox. 2011 20 .

2011 21 .BROWSER OUPUT – RADIO BUTTON November 18.

2011 22 .CHECKBOX November 18.BROWSER OUTPUT .

swf.jpg.css extension indicates a style sheet. Picture formats are recognized by extensions like . The . When a browser sees the file extensions . animations.mp4.  Multimedia elements also have their own file formats with different extensions like . pictures. and more. records.htm or . 2011 23 . it will assume that the file is an HTML page.HTML MEDIA  Multimedia comes in many different formats. and .The most common way to discover the media type is to look at the file extension. . music.mp3.html.gif and . . November 18.  Multimedia elements (like sounds or videos) are stored in media files.wmv. It can be almost anything you can hear or see like text. and the . videos.xml extension indicates an XML file. sound. films.

2011 24 . and it is supported by all popular browsers. WMA. Quicktime. The other important formats are AVI.  The commonly used sound formats are MIDI.  The WAVE is the most popular uncompressed sound format on the Internet. you should use the WAVE format. WMV.Realaudio.HTML MEDIA  The MP4 format is the new and upcoming format for internet video. It is supported by YouTube.MP3. MPEG.  The MP3 format is the newest format for compressed recorded music. Flash players and HTML5. The term MP3 has become synonymous with digital music November 18. If you want uncompressed sound (music or speech) to be available to all your visitors. flash. Realvideo.wav.

 Hence.CONCLUSION – LOOKING AHEAD  HTML.  XHTML has stricter rules.  HTML is a very “forgiving” language. November 18. because it oversees many inconsistent and erroneous codes. This may result in different browsers interpreting HTML pages differently. eXtensible Hypertext Markup Language (XHTML) is used as an alternative. though is simple and easy to learn. which causes less variance among browsers and more consistency in results. but has serious inherent flaws in it. 2011 25 .

Thank You .

5 5%88-7 .

5 5...7.

8 .57.5930 -70.

250!.7. 7.5 # $# &%!&% $0.02-07    .7. 5.8 4.7.070 $.5930-70.7.5 %88 .

% #%% %  -%89098-4/.

- %890989...

 :%89098 :3/0730/.

425:907 4:95:9.: .4/0%88.

...3/9.4/0 -%89098-49-4/ .

-.

%89098:3/0730/ %88. # $# &%!&% %89098-4/ %890989. 4.3/ 9..02-07    .425:907 4:95:9 %89098-49-4/..

%%% #%% %  89743%89098 89743.

89743 -%89098-.

- 02%89098 025.80/.

759.02 %888:- 8:-8.

3/ 8:58:5078.759.8:-.

02-07    .80/ %88 8:-8.759 4.3/8:5078.759 .8:5 # $# &%!&% %8909889743 %89098- %89098025.

309028 %02489. .. %0899028.02-07    ..702.42243%898 .702.798 9909.7989 909.70/9-:098 95..3/:347/070/898 %&347/070/898 3:347/070/8989.8990289.82.7047/070/.-. %0899028.08 % 7/070/898 347/070/8989. . .%$%$ 898.70/93:2-078 4.79899049..77.798990:9.8990289.7.70:80/94.

$%$! %  : 41100.

 .

 .

: 4 41100.

 .

 .

02-07    .4 # $# &%!&% W 41100 W   41100   4.

20.5.98420*909. $39.997-:90 $7..147/0133.3/814784:7.0 2 87.99. 89.834.997-:908 43 . .0 %0. %029. %4/85.:0419087.:7.08.389.%$ 3% 2. .70/0130/99029.32.04:.3/.439.32.0 4:300/94:809087..3994/85.043. 80259 .4839.38.997-:90 890&#41902.

997-:90850.9.:947 /0130/909 $39.997-:908.94.3349-0/85. %0706:70/.0/ %0 .9.0 1902.9 .-4..3 2.3.9073.0.108..9 1.3.:04190.2 87.90909147.

02-07    . 4.

./0/394/. 9/89..-0/.9.-0-47/07 97 9/74 .%%$ %.-08 09.-09.9.9.43903941.3/0. .2509.-08/.3.08 9909/9./0/394748 990979.3/8147 9..70/0130/9909..-08.439.08 898 14728 49079.0 9/9.74 8/. 9./.. .3/4/890.0.3909 38 2. .

0.9/ 9/74 .

9/ .

97.

-0 &%!&% 4.9.02-07    .

.3.3/.439. 10/809 003/ .9898 909.% #$ %14728.88/.9.-0 0020398 %014729.439.3%1472 1472 35:90020398 .84 .70.3800.3.94.0.-408  7..07 1472.70.90.70:80/945.807.335:90020398090910/8 .3/2470 1472.8:80/94./4 -:99438 8:-29-:99438.

997-:90 335:9002039./4-:9943 8:-29-:9943 .3/2470 4.3..3-04195090910/  ...732.02-07    .0.-4 5.8 /0503/34390 950.1472 %0248925479.8847/ 7.3.39147200203989035:9002039 335:9002039.

% #$ 35:9950909.

.2035:99509093.9./01308.20.430 3035:9 10/9.303907909394 1472 7893.:807 .2017893.

-7 .

20.893.2035:99509093.893.20. .

 .

8847/.1472 35:99505.

205/.8847/35:99505.8847/3.5.8847/ 10/ 1472 !./01308.

 .

02-07    .1472 4.

# $# &%!&% %% 4.02-07    .

02-07    .# $# &%!&% !$$ # 4.

% #$ 35:99507./4.

4.0../43.290/3:2-0741.:807800.7./4-:9943 #.:02.08 1472 35:99507./4-:9943809 .20 03/07.9  41./01308.

.0-7 .

:0102.0.20 03/07. 35:99507./43..

02.0 .

0.-4.1472 35:9950.

08 1472 35:9950.-43.:00.9 47 #45943841.20.0.0./01308.0.4.-40809 .:807800..-4 0.290/3:2-0741 .0..

.0 ..-0-7 .

0.-43.0.:0.0..7. 35:9950.20.

.0.7 . ...

1472 4.02-07    .

02-07    .# $# &!&% # &%%  4.

# $# &%!&%   4.02-07    .

9:701472.8908009 !..950 89444.108 %0 2489..908.-7480780089010 09038438 92 47 92 9.3/ 5 :920/.990100903843 03.4.32.420832.7478000909 5.0020398 084:3/847.3-0.  25 .47/8 128 .70 70.84.908.02-07    .98.989 /1107039090384380 81  2.9:708 2:8.7089470/3 20/.42243.94/8.310 . 84:3/  .2489 .88 09038433/./048 70..090743101472.430/-090384380 1.0020398.3/ 25 4.3% 5.3/11070391472..30.9438 .3/2470 :920/.88:209.990108./048 .98 9.0 %0 209038433/.% :920/.3934:..3/90 ..079020/.

9147 ..4:7.39:3...3/:5..42570880/84:3/ 2:8..85.:/4 .98. 2:8.% %0!1472.9 43903907309 .   ! %0'8902489545:..47/0/ 2:8.7 :3.42570880/ 84:3/1472.3/988:554790/-. 94-0 .98.8-0.02-07    .9890300891472.478500.8 ! %0.420834324:89/9.7-748078 1 4:.078.42570880/ 70.9 %0!1472.391472.545:. 4.920 #0.-094.70' '  ":.42243:80/84:3/1472.4231472.89478 4:84:/:8090'1472. %09072!.70 #0./04 988:554790/-4:%:-0 .91473907309 ./04 1.3/ % %0490725479.989030.

0780082.8940..3708:98 4.9077:08 .3.3.0 09038-0 507909.88074:8 3070391.3 .3:.07 147.708:93/1107039 -748078390757093%5. &$    % 94:88250.3/2470.3/0.7:5..243 -748078.9073.8.7.0 %.3/0774304:8.3:.43889039.73 -:9.839 %8.9.4/08 %82...08/1107039 03.3 3.0 -0.8897.:808088.:8094.02-07    .4388903.0.0 % 8 :80/..

34: .%.

Sign up to vote on this title
UsefulNot useful