Scribd
Upload
6 views

HTML

HTML, or Hyper Text Markup Language, is a markup language used to describe web pages through a set of tags that define the content structure. It includes elements such as headings, paragraphs, links, and images, which are interpreted by web browsers to display content correctly. HTML also allows for attributes that provide additional information about elements and supports comments for code readability.

Uploaded by

uthaya shangar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views

HTML

HTML, or Hyper Text Markup Language, is a markup language used to describe web pages through a set of tags that define the content structure. It includes elements such as headings, paragraphs, links, and images, which are interpreted by web browsers to display content correctly. HTML also allows for attributes that provide additional information about elements and supports comments for code readability.

Uploaded by

uthaya shangar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 27

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

You might also like