Presentation on HTML

HTML (Hypertext Markup HTML (Hypertext Markup Language)Language)

Language of Web PageLanguage of Web Page

Presented By: Macrosys, Moga

Hypertext & HyperlinkHypertext & HyperlinkEnglish -> Written -> Books HTML -> Written -> Web page Hyper Text Markup

LanguageWeb pages are text files.The key to hypertext is the use

of hyperlinks, which allow you to jump from one topic to another topic.

Definition of HTMLDefinition of HTMLHTML describes the contentcontent and

formatformat of web pages using tags. Ex. Title Tag: <title>A title </title>

It’s the job of the web browser to interpret tags and display the content accordingly.

HTML Syntax HTML Syntax An HTML file contains both

formattingformatting tagstags and contentcontentDocument content is what we

see on the webpage. Tags are the HTML codes that

control the appearance of the document content.

HTML SyntaxHTML SyntaxHTML syntax: two-sided tag:<tag attributes>document content</tag>

Starting tag

of the tags

tag. Optional!

Actual content appears in webpage. It could be empty

Closing tag

Examples: This is a paragraph

<body bgcolor = “yellow”> Color Text </body>

HTML SyntaxHTML SyntaxHTML syntax:

one-sided tag:<tag />

e.g. Breaking line tag: Horizontal line tag: <hr/>

Structure of the Web PageStructure of the Web PageStarting with the tag

<html>...</html>

<html> .......

</html>

Everything about the web page should be enclosed here

Structure of the Web PageStructure of the Web PageInside the <html></html> tag

◦ Each web page has a headhead part described in <head></head> tag:

<html> <head>

<title> Testing Page</title> </head> </html>

The title of the web page should be put here

Structure of the web pageStructure of the web page Inside the <html></html> tag

◦ Each web page has a bodybody part described in <body></body> tag:

<html> <head> <title> Testing Page</title> </head> <body>

This is a sample HTML file. </body>

</html>

The content of the whole web page should be put here

Title

Body

Create a basic HTML fileCreate a basic HTML fileOpen your text editor (notepadnotepad).Type the following lines of code into the

document:<html><head><title> Testing Page</title></head><body>This is a sample HTML file.</body></html>

sample.html

Introduction to some common Introduction to some common tagstagsParagraph tagList tagHyperlink tags

Paragraph tags Paragraph tags ......<html><head><title> Testing Web Page</title></head>

<body> Here is the first paragraph. Here is the second paragraph.

</body>

</html>

Space between paragraphs

First paragraph

Second paragraph

List tagsList tagsOrdered list: used to display information in a

numeric order. The syntax for creating an ordered list is: <ol > e.g. <ol ><li>item1 </li> <li> Name: Satvir Sandhu</li><li>item2 </li> <li> Software Dept.</li>… <li> Instructor: Satvir </li></ol> </ol>

Result:

List tagsList tagsUnordered list: list items are not listed in a particular order. The syntax is:<ul > e.g. <ul><li>item1 </li> <li> Name: Satvir Sandhu</li><li>item2 </li> <li> Software Dept. </li>… <li> Instructor: Satvir </li></ul> </ul>

Result

Include a PictureInclude a Picture<img src=“FILENAME” /><img src=“FILENAME” alt=“text”

/>E.g.<img src=“logo.gif” alt=“Google

logo” /><img src=“logo.gif” />

Presentation on HTML

Education

Transcript of Presentation on HTML