HYPER TEXT MARKUP LANGUAGE
PRESENTED BY:
S.UTHAYASHANGAR/AP/IT
HTML
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describes document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
HTML Tags
HTML markup tags are usually called HTML tags
HTML tags are keywords (tag names) surrounded by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, with a forward slash before the tag name
Start and end tags are also called opening tags and closing tags <tagname>
content</tagname>
HTML Elements
"HTML tags" and "HTML elements" are often used to describe the same thing.
But strictly speaking, an HTML element is everything between the start tag and the
end tag, including the tags:
HTML Element:
<p>This is a paragraph.</p>
Web Browsers
The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox,
Safari) is to read HTML documents and display them as web pages. The browser does
not display the HTML tags, but uses the tags to interpret the content of the page:
HTML Page Structure
Below is a visualization of an HTML page structure:
<html>
<head>
<title>Sample Website</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML Paragraphs
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Element Syntax
An HTML element starts with a start tag / opening tag
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
Empty elements are closed in the start tag
Most HTML elements can have attributes
Start tag * Element content End tag *
<p> This is a paragraph </p>
<a This is a link </a>
href="default.htm">
<br>
HTML Attributes
Attributes provide additional information about HTML elements.
HTML Attributes
HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
Attribute Example
HTML links are defined with the <a> tag. The link address is specified
in the href attribute:
<a href="http://www.w3schools.com">This is a link</a>
Below is a list of some attributes that can be used on any HTML
element.
HTML Comments
Comments can be inserted into the HTML code to make it more
readable and understandable. Comments are ignored by the browser
and are not displayed.
Comments are written like this:
Example
<!-- This is a comment -->
HTML Line Breaks
Use the <br> tag if you want a line break (a new line) without starting
a new paragraph:
Example
<p>This is<br>a para<br>graph with line breaks</p>
HTML Formatting Tags
HTML uses tags like <b> and <i> for formatting output,
like bold or italic text.
These HTML tags are called formatting tags.
HTML Links
Links are found in nearly all Web pages. Links allow users to click their way from page to page.
• Hyperlink
– References other sources such as XHTML documents and images
– Both text and images can act as hyperlinks
– Created using the a (anchor) element
• Attribute href
– Specifies the location of a linked resource
• Link to e-mail addresses using mailto: URL
<html >
<head>
<title>Internet and WWW How to Program - Links</title>
</head>
<body>
<h1>Here are my favorite sites</h1>
<p><strong>Click a name to go to that page.</strong></p>
<!-- Create four text hyperlinks -->
<p><a href = "http://www.deitel.com">Deitel</a></p>
<p><a href = "http://www.prenhall.com">Prentice Hall</a></p>
<p><a href = "http://www.yahoo.com">Yahoo!</a></p>
<p><a href = "http://www.usatoday.com">USA Today</a></p>
</body>
</html>
Images
• Three most popular formats
– Graphics Interchange Format (GIF)
– Joint Photographic Experts Group (JPEG)
– Portable Network Graphics (PNG)
– img element
• src and alt attribute
src - Specifies the location of the image file.
alt - Display when it is not possible to display the image
width and height
Example:
<img src = "jhtp.jpg" height = "238" width = "183" alt = "Java How to
Program book cover" />
<html>
<head>
<title>Internet and WWW How to Program - Welcome</title>
</head>
<body>
<p>
<img src = "xmlhtp.jpg" height = "238" width = "183"
alt = "XML How to Program book cover" />
<img src = "jhtp.jpg" height = "238" width = "183"
alt = "Java How to Program book cover" />
</p>
</body>
</html>
THANK YOU
