3. WHAT IS HTML?
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.
3
4. 4
• The <!DOCTYPE html> declaration defines that this document is an
HTML5 document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML
page
• The <title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a container
for all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph
5. 5
A SIMPLE HTML DOCUMENT:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
6. 6
HTML ELEMENTS:
• The HTML element is everything from the start tag to the end tag:
• <tagname>Content goes here...</tagname>
• Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
7. 7
HTML ATTRIBUTES:
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like:
name="value"
8. 8
• The href Attribute
• The <a> tag defines a hyperlink. The href attribute specifies
the URL of the page the link goes to:
• Example
• <a href="https://www.w3schools.com">Visit W3Schools</a>
9. 9
• The src Attribute
• The <img> tag is used to embed an image in an HTML page.
The src attribute specifies the path to the image to be
displayed:
• Example
• <img src="img_girl.jpg">
10. 10
There are two ways to specify the URL in the src attribute:
• Absolute url:
• All the details required to find a resource are in an absolute URL.
• Example:
• <a href = "http://www.tutorialspoint.com/xyz.html">
• Relative url:
• An absolute URL is the starting point for a relative URL, which locates
a resource.
• A relative URL usually contains the path and, if present, the resource,
• it does not include the scheme or server.
• Example:
• <a href = "/xyz.html">
11. 11
The width and height Attributes:
• The <img> tag should also contain the width and height
attributes, which specify the width and height of the image (in
pixels):
• Example
• <img src="img_girl.jpg" width="500" height="600">
12. 12
The alt Attribute:
• The required alt attribute for the <img> tag specifies an
alternate text for an image, if the image for some reason
cannot be displayed. This can be due to a slow connection, or
an error in the src attribute, or if the user uses a screen
reader.
• Example
• <img src="img_girl.jpg" alt="Girl with a jacket">
13. 13
The style Attribute:
• The style attribute is used to add styles to an element, such as
color, font, size, and more.
• Example
• <p style="color:red;">This is a red paragraph.</p>
14. 14
HTML HEADINGS:
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least
important heading.
• Example:
• <h1>Heading 1</h1>
• <h2>Heading 2</h2>
• <h3>Heading 3</h3>
• <h4>Heading 4</h4>
• <h5>Heading 5</h5>
• <h6>Heading 6</h6>
• <h1 style="font-size:60px;">Heading</h1>
15. 15
HTML Paragraphs:
• The HTML <p> element defines a paragraph.
• A paragraph always starts on a new line, and browsers
automatically add some white space (a margin) before and
after a paragraph.
• Example
• <p>This is a paragraph.</p>
• <p>This is another paragraph.</p>
16. 16
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
</body>
</html>
