Scribd
Upload
24 views

HTML Basics

The document provides an overview of HTML basics including what HTML is, common HTML elements and tags, attributes, and how to structure an HTML document. It explains elements like headings, paragraphs, line breaks, horizontal rules, images and links. It also covers empty elements, nested elements and attributes.

Uploaded by

Sameer Sohail
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
24 views

HTML Basics

The document provides an overview of HTML basics including what HTML is, common HTML elements and tags, attributes, and how to structure an HTML document. It explains elements like headings, paragraphs, line breaks, horizontal rules, images and links. It also covers empty elements, nested elements and attributes.

Uploaded by

Sameer Sohail
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 19

HTML Basics

1
HTML Basics

• 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 is Not Case Sensitive
2
Example of HTML Code

<!DOCTYPE html>
<html>
<head>
<title>Title of Page</title>
</head>
<body>

<p> Life begins at the end <br> of your comfort zone </p>

</body>
</html>
3
Explanation of the Example

• 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).
4
Explanation of the Example

• 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 <p> element defines a paragraph.

5
HTML Basics

• Every HTML document begins with an HTML document


tag. Although this is not mandatory, it is a good
convention to start the document with this below-
mentioned tag.
– <!DOCTYPE html>
• Every HTML code must be enclosed between basic HTML
tags. It begins with <html> and ends with </html> tag.

6
HTML Basics

• The head tag comes next which contains all the header
information of the web page or documents like the title
of the page and other miscellaneous information. This
information is enclosed within the head tag which opens
with <head> and ends with </head>.
• We can mention the title of a web page using
the <title> tag. This is header information and hence is
mentioned within the header tags. The tag begins
with <title> and ends with </title>.

7
HTML Basics

• The body tag contains the actual body of the page


which will be visible to all the users. This opens
with <body> and ends with </body>. All content
is enclosed within this tag.

8
HTML Elements

• The HTML element is everything from the start


tag to the end tag:
<tagname> Content goes here... </tagname>
For Example
– <p> is starting tag of a paragraph and </p> is closing
tag of the same paragraph but <p>This is
paragraph</p> is a paragraph element.

9
HTML Elements

• Empty Elements
– Some HTML elements have no content (like the <br>
element). These elements are called empty elements.
Empty elements do not have an end tag.
• Nested HTML Elements
– An element within an element is called nested
element.

10
Example of Nested Element

<!DOCTYPE html>
<html>
<head>
<title> My first Program </title>
</head>
<body>

<p>My first paragraph</p>

</body>
</html>
11
The href attribute specifies the URL of the page the link goes to

HTML Attributes
• Attributes provide additional information about
elements. They are always specified in the start
tag.
• Examples
• <img> Element
– <img src=“img_girl.jpg” alt=“alternative text”
width="500" height="600“ >
– src, alt, width and height are attributes of <img>

12
HTML Attributes

• <a> element
– <a href="https://www.google.com"> click here</a>
– Href is an attribute of <a>
• <p> element
– <p align=“left”> This is left aligned </p>
– Align is an attribute of <p>

13
HTML Basics

• HTML Headings
– These tags help us to give headings to the content of a
webpage. These tags are mainly written inside the body
tag. HTML provides us with six heading tags
from <h1> to <h6>. <h1> defines the most important
heading. Every tag displays the heading in a different style
and font size.
• HTML Paragraph
– These tags help us to write paragraph statements on a
webpage. They start with the <p> tag and ends with </p>.

14
HTML Basics

• HTML Break
– These tags are used for inserting a single line type break.
It does not have any closing tag. In HTML the break tag
is written as <br>. Example:
<!DOCTYPE html>
<html>
<head>
<title> My first Program </title>
</head>
<body>
<p> Life begins at the end <br> of your comfort zone </p>
</body>
</html>
15
HTML Basics

• HTML Horizontal Line


• The <hr> tag is used to break the page into various
parts, creating horizontal margins with help of a
horizontal line running from the left to right-hand side
of the page. This is also an empty tag and doesn’t take
any additional statements.
• HTML Images
• The image tag is used to insert an image into our web page.
<img src=”source_of_image alt=“alternative text“>

16
HTML Basics

• Anchor Tag
• The <a> tag defines a hyperlink, which is used to link
from one page to another.
• <a href="https://www.google.com"> click here</a>
• <b> Tag
• This is used to bold the text.
• <p>This is normal text<b>and this is bold text</b></p>

17
• <i> Tag
– It is used to italicize the text in HTML
– <p><i>This is Italicized text</i>This is simple text</p>
• <u> Tag
– It is used to underline the text in HTML.
– <p>This is some <u>underlined</u> text.</p>

18
19

You might also like