2. Introduction To HTML
What Is HTML?
• Markup language for describing web pages
• HTML stands for Hyper Text Markup Language, a language with set of markup tags
• Documents are described by HTML tags
• Each HTML tag describes different document content
•A markup language is a set of markup tags
•A markup language is a set of markup tags
https://www.ifourtechnolab.com/
3. Creating HTML Pages
An HTML file must have an .htm or .html file extension
HTML files can be created with text editors:
• NotePad, NotePad ++, PSPad
Or HTML editors (WYSIWYG Editors):
• Microsoft FrontPage
• Macromedia Dreamweaver
• Netscape Composer
• Microsoft Word
• Visual Studio
3
https://www.ifourtechnolab.com/
4. HTML Structure
HTML is comprised of “elements” and “tags”
• Begins with <html> and ends with </html>
Elements (tags) are nested one inside another:
Tags have attributes:
HTML describes structure using two main sections: <head> and <body>
4
<html> <head></head> <body></body> </html>
<img src="logo.jpg" alt="logo" />
https://www.ifourtechnolab.com/
5. HTML Code Formatting
The HTML source code should be formatted to increase readability and facilitate
debugging
• Every block element should start on a new line
• Every nested (block) element should be indented
• Browsers ignore multiple whitespaces in the page source, so formatting is harmless
For performance reasons, formatting can be sacrificed
5
https://www.ifourtechnolab.com/
6. First HTML Page
6
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
Test.html
https://www.ifourtechnolab.com/
7. First HTML Page: Tags
7
Opening tag
Closing tag
An HTML element consists of an opening tag, a closing tag and the content
inside.
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
https://www.ifourtechnolab.com/
8. <!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
First HTML Page: Header
8
HTML header
https://www.ifourtechnolab.com/
9. <!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
First HTML Page: Body
9
HTML body
https://www.ifourtechnolab.com/
10. Some Simple Tags
Hyperlink tags
Image tags
Text formatting tags
10
<a href="http://www.telerik.com/"
title="Telerik">Link to Telerik Web site</a>
<img src="logo.gif" alt="logo" />
This text is <em>emphasized.</em>
<br />new line<br />
This one is <strong>more emphasized.</strong>
https://www.ifourtechnolab.com/
11. Tags Attributes
Tags can have attributes
• Attributes specify properties and behavior
• Example:
Few attributes can apply to every element:
• Id, style, class, title
• The id is unique in the document
• Content of title attribute is displayed as hint when the element is hovered with the
mouse
• Some elements have obligatory attributes
11
<img src="logo.gif" alt="logo" />
Attribute alt with value "logo"
https://www.ifourtechnolab.com/
12. Interesting, right?
This is just a sneak preview of the full presentation. We hope you like it! To see the
rest of it, just click here to view it in full on PowerShow.com. Then, if you’d like, you
can also log in to PowerShow.com to download the entire presentation for free.
Editor's Notes
Software Outsourcing Company India - http://www.ifourtechnolab.com/
Software Outsourcing Company India - http://www.ifourtechnolab.com/
07/16/96
07/16/96
07/16/96
07/16/96
07/16/96
07/16/96
07/16/96
07/16/96
Software Outsourcing Company India - http://www.ifourtechnolab.com/