You are on page 1of 34

Introduction to HTML

Short History
• In 1980, physicist Tim Berners-Lee, who was an independent contractor at European Organization for Nuclear Research, 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 the last part of 1990.

01 January 2008 .0 December 1999 .0 .Version History of HTML • • • • • • November 1995 .01 May 2000 – ISO HTML 4.HTML 2.HTML 4.HTML 5.0 January 1997 .HTML 3.HTML 4.2 December 1997 .

What is HTML? • Hyper Text Markup Language. . • HTML is a markup language (the ML in HTML) that uses a fixed set of markup tags. • A markup language used to structure text and multimedia documents and to set up hypertext links between documents. is the predominant markup language for web pages. used extensively on the World Wide Web.

. XML and JavaScript or ActionScript / VB Script. but also with related technologies such as CSS. • many HTML editors work not only with HTML.HTML Editor • An HTML editor is a software application for creating web pages.

List of HTML Editors • • • • • • • • • • • Notepad gEdit jEdit TextEdit TextMate UltraEdit CrimsonEditor DOS Edit JCreator FrontPage Mozilla Composer .

as well as text. .HTML Elements • HTML elements are tags. which act as indicators to a web browser as to how the document is to be interpreted by the browser and ultimately presented on the user's computer screen.

other elements).) . in which the element name is prepended with a forward slash: </tag>. • an end tag. which may incorporate: – any number of attributes (including their values). (note: In some forms of HTML the end tag is optional for some container elements. • some amount of content (text.2 Types of Elements • Container elements are constructed with: • a start tag (<tag>) marking the beginning of an element.

with any attributes.) .• Empty elements consist of only a single tag. (The tag may have a slash appended: <tag /> – in XHTML this is required.

• Element (and attribute) names may be written in either upper or lower case in HTML.Attributes • define desired behavior or indicate additional element properties. and is used in HTML standards. but must be in lower case in XHTML. Upper-case is the older usage. but lowercase is more common .

Standardised in HTML 2. still current..The Root Element of an HTML document.0..Documents Structure Elements • <html>. .</html> . The HTML element delimits the beginning and the end of an HTML document. all other elements are contained in this.

</head> .Indicates the beginning and end of a section of the document used for the title and other document header information ..0. .Container for processing information and metadata for an HTML document. Standardized in HTML 2. still current..• <head>.

.• <title>..Provides descriptive information about a document that will be displayed at the title bar.</title> .

• <body>. Standardized in HTML 2.</body> ... .Container for the displayable content of an HTML document. still current.Indicates the beginning and end of the web page body. .0.

or alternate versions. such as previous and next links.Specifies links to other documents. .• <link> .

• <a>…</a> . . the anchor becomes a hyperlink to either another part of the document or another resource using an External URL. With the attribute href (hypertext reference). the element becomes a target.an anchor can be either the origin or the target (destination) end of a hyperlink. with the name or id attributes set. Alternatively (and sometimes concurrently).

Sample HTML Document <!doctype html> <html> <head> <title>Hello HTML</title> </head> <body> <p>Hello World!</p> </body> </html> .

0. still current. The closing tag is required for XHTML. .• <p>…</p> . perhaps the most common block level element. P existed in HTML Tags. and was standardized in HTML 2.Creates a paragraph.

.<h1> delimits the highest-level heading.• <h1>…</h1> <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5> <h6>…</h6> . and so on to <h6>. <h3> for a level below that. <h2> the next level down (sub-section).

• <li>…</li> . .0.A list item in ordered (ol) or unordered (ul) lists. and was standardised in HTML 2. still current. LI existed in HTML Tags.

0. The default is Arabic numbering or lettered points. but stylesheets give more control: {list-style-type: foo}. still current.An ordered (enumerated) list.• <ol>…</ol> . . The type attribute can be used to specify the kind of ordering. was standardized in HTML 2.

An unordered (bulleted) list.0. The default marker is a disc. . was standardised in HTML 2. still current. Stylesheets can be used to specify the list marker: {liststyle-type: foo}.• <ul>…</ul> .

<LI></LI> -Lists is used to structure your text in an outline format and helps to itemized information.Indicates that the item that follows the tag is an item within a list. . .

Unordered List <H3>Unordered Lists</H3> <UL TYPE=“disc”> <LI>First Item – type disc</LI> <LI>Second item – type disc</LI> </UL> <UL TYPE=“square”> <LI>First Item – type square</LI> <LI>Second item – type square</LI> </UL> <UL TYPE=“circle”> <LI>First Item – type circle</LI> <LI>Second item – type circle</LI> </UL> .

Ex1 <html> <body> The content of the body element is displayed in your browser. </body> </html> .

</p> </body> </html> .</p> <p>This is a paragraph.</p> <p>This is a paragraph.Ex2 <html> <body> <p>This is a paragraph.

Communications And business information analysis.Ex3 <html> <head> <title>Microsoft Office 2010</title> </head> <body> Microsoft Office 2010 Microsoft has established a position as the most efficient Suite of application for document creation. </body> </html> .

Ex4 <html> <body> <p> This paragraph contains a lot of lines in the source code. </p> </body> </html> . the number of lines in this paragraph will change. but the browser ignores it. but the browser ignores it. </p> <p> This paragraph contains a lot of spaces in the source code. If you resize the browser window. </p> <p> The number of lines in a paragraph depends on the size of your browser window.

Ex5(Use of Line Break <html> <body> <p>This is<br />a para<br />graph with line breaks</p> </body> </html> .

The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p> </body> </html> .Ex6 (Center Align Heading) <html> <body> <h1 style="text-align:center">This is heading 1</h1> <p>The heading above is aligned to the center of this page.

Ex7 (using comments <html> <body> <!--This comment will not be displayed--> <p>This is a regular paragraph</p> </body> </html> .

Ex8(Using Background color) <html> <body style="background-color:yellow"> <h2>Look: Colored Background!</h2> </body> </html> .

Thank you! .

  .

  .

  .

  .

 .

/3  903090.0.9 .0-049. /029890089 0.943  147.00.0/43 8:- 80.3/844394   .

W  .

889.:77039  .8 .7/80/3% 89.3/.3/. 89902347/070/ 4 47:347/070/ : 898  0890/3%%.

W 4 .

3-0:80/94850.1903/41 47/073 -:989080098.4397489 890 950144< %0/01.3/..:98 7.3:2-07347099070/54398 .4 347/070/ 03:207.02470 .-.889.997-:90.7/0/3% 89 .90/ 89 %0950 .:77039  .

W : .

:92.7078.:77039  .3-0:80/94850.889.3/. /8.  .70789 890 950144< %0/01..190892.: 3:347/070/ -:090/ 89 $9080098 .7/80/ 3% 89.

.

9.9:704:79093.89 .943 3/. 8988:80/94897:.3/058949020/ 31472.9909029..91448909.9089.390293. 8.3 4:9301472.

&347/070/89 &347/070/898.

 789902 950/8. &%! /8..

 $0..43/902 950/8.

 .

& &%! 86:.70  789902 95086:.70.

70. $0.43/902 95086:.

 .

0.7.7.& &%! .0  789902 950.

43/902 950.0. $0.7.

 .

& .

0/34:7-74807 .4390394190-4/0020398 /85. 92 -4/ %0.

-4/ .

92 .

7. 92 -4/ 5%88.7.5.5 .

7.5 5%88.5.7.5 .

7.5 .7.5 5%88.5.

5 .

-4/ .

92 .

/ 990. 92 0.0  .748419 11.

990 .

70.9438 3/-:8308831472.039 $:9041.943 422:3.:2039.0./ -4/ .88 .748419 11.0  .943147/4.55..943.-80/.748419.8089.548943.3.8902489011..

-4/ .

92 .

7.7.439.38.0. 92 -4/ 5 %85.4941308 39084:7.5 .4/0 -:990-74807 347089 .

7.5 5 %85.494185.4/0 -:990-74807 347089 .0.7.439..38.08 39084:7.5 .

7.30 .5.5.7.5 5 %03:2-07413083.5/0503/8439080414:7-748073/4 14:708090-74807 3/4 903:2-07413083985.7.7..

5 .

-4/ .

92 .

 92 -4/ 5%88-7. &80413070.

5.-7..7.

8.5930 -70.7.

5 .

-4/ .

92 .

/3 92 -4/ 890909 . 0390730.03907%880.3./3.

-4.0390741985.0 .30/9490.-4.08./3.-4.039074198 5. 5%00./3.30/9490.08./3.0  %00.08.0  %00.0390741985.30/9490.

5 .

-4/ .

92 .

422039349-0/85.0/  5%88. :83.7.75.7.70:.5.4220398 92 -4/  %8.

5 .

-4/ .

92 .

74:3/.447 92 -4/890-.74:3/ .74:3/....44704 444470/. &83.

 .

-4/ .

92 .

%.34: .