Presentation on HTML

HTML (Hypertext MarkupHTML (Hypertext Markup
Language)Language)
Language of Web PageLanguage of Web Page
Presented By: Macrosys, Moga

Hypertext & HyperlinkHypertext & Hyperlink
English -> Written -> Books
HTML -> Written -> Web page
Hyper Text Markup Language
Web 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 HTML
HTML 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 SyntaxHTML Syntax
An HTML file contains both formattingformatting
tagstags and contentcontent
Document content is what we see on
the webpage.
Tags are the HTML codes that control
the appearance of the document content.

HTML 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 syntax:
one-sided tag:
<tag />
e.g. Breaking line tag: 
Horizontal line tag: <hr/>

Structure of the Web PageStructure of the Web Page
Starting with the tag <html>...</html>
<html>
.......
</html>
Everything about
the web page
should be
enclosed here

Structure of the Web PageStructure of the Web Page
Inside 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>
</head>
<body>
This is a sample HTML file.
</body>
</html>
The content of
the whole web
page should be
put here

Create a basic HTML fileCreate a basic HTML file
 Open your text editor (notepadnotepad).
 Type the following lines of code into the document:
<html>
<head>
</head>
<body>
This is a sample HTML file.
</body>
</html>

Introduction to some common tagsIntroduction to some common tags
Paragraph tag
List tag
Hyperlink 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 tags
Ordered 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 tags
Unordered 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

Presentation on HTML

Recomendados

Más contenido relacionado

Was ist angesagt?

Was ist angesagt?(20)

Similar a Presentation on HTML

Similar a Presentation on HTML(20)

Más de satvirsandhu9

Más de satvirsandhu9(7)

Último

Último(20)

Presentation on HTML