Scribd
Upload
21 views24 pages

Introduction To HTML

HTML, or Hypertext Markup Language, is the standard language for creating web pages, utilizing various tags to structure content. It includes elements such as headings, paragraphs, and attributes that define characteristics of HTML elements. The document provides examples of basic HTML structure, common tags, and attributes like id, title, class, and style.

Uploaded by

abdullahwaseem5640
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
21 views24 pages

Introduction To HTML

HTML, or Hypertext Markup Language, is the standard language for creating web pages, utilizing various tags to structure content. It includes elements such as headings, paragraphs, and attributes that define characteristics of HTML elements. The document provides examples of basic HTML structure, common tags, and attributes like id, title, class, and style.

Uploaded by

abdullahwaseem5640
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

INTRODUCTION TO

HTML
Misbah Daud
HTML
• HTML stands for Hypertext Markup Language, and it is the most
widely used language to write Web Pages.
• Hypertext refers to the way in which Web pages (HTML documents)
are linked together. Thus, the link available on a webpage is called
Hypertext.
• As its name suggests, HTML is a Markup Language which means you
use HTML to simply "mark-up" a text document with tags that tell a
Web browser how to structure it to display.
• Originally, HTML was developed with the intent of defining the
structure of documents like headings, paragraphs, lists, and so forth
to facilitate the sharing of scientific information between researchers.
• Now, HTML is being widely used to format web pages with the help
of different tags available in HTML language.
HTML Document
• Basic HTML Document In its simplest form, following is an example of
an HTML document
HTML Tags
• HTML is a markup language and makes use of various tags to format
the content. These tags are enclosed within angle braces <Tag
Name>. Except few tags, most of the tags have their corresponding
closing tags. For example, <html> has its closing tag</html> and
<body> tag has its closing tag </body> tag etc.
The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration tag is used by the web browser to
understand the version of the HTML used in the document. Current
version of HTML is 5 and it makes use of the following declaration:
<!DOCTYPE html>
Heading Tags
• Any document starts with a heading. You can use different sizes for
your headings.
• HTML also has six levels of headings, which use the elements <h1>,
<h2>, <h3>, <h4>, <h5>, and <h6>.
• While displaying any heading, browser adds one line before and one
line after that heading.
Example
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Paragraph Tag
• The <p> tag offers a way to structure your text into different
paragraphs.
• Each paragraph of text should go in between an opening <p> and a
closing </p> tag
Example

<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Line Break Tag
• Whenever you use the <br /> element, anything following it starts
from the next line.
• This tag is an example of an empty element, where you do not need
opening and closing tags, as there is nothing to go in between them.
• The <br /> tag has a space between the characters br and the forward
slash. If you omit this space, older browsers will have trouble
rendering the line break, while if you miss the forward slash character
and just use <br> it is not valid in XHTML.
EXAMPLE
Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.
Example
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
Horizontal lines
• Horizontal lines are used to visually break-up sections of a document.
• The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.
Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
HTML Tag vs. Element
• An HTML element is defined by a starting tag. If the element contains
other content, it ends with a closing tag.
• 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.
Nested HTML Elements
• It is very much allowed to keep one HTML element inside another HTML element:
• Example
• <!DOCTYPE html>
• <html>
• <head>
• <title>Nested Elements Example</title>
• </head>
• <body>
• <h1>This is <i>italic</i> heading</h1>
• <p>This is <u>underlined</u> paragraph</p>
• </body>
• </html>
HTML – ATTRIBUTES

• An attribute is used to define the characteristics of an HTML element


and is placed inside the element's opening tag. All attributes are
made up of two parts: a name and a value:
• The name is the property you want to set. For example, the paragraph
<p> element in the example carries an attribute whose name is align,
which you can use to indicate the alignment of paragraph on the
page.
• The value is what you want the value of the property to be set and
always put within quotations. The below example shows three
possible values of align attribute: left, center and right.
• Attribute names and attribute values are case-insensitive.
• Example
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>
Core Attributes
• The four core attributes that can be used on the majority of HTML
elements (although not all) are:
• Id
• Title
• Class
• Style
The Id Attribute

• The id attribute of an HTML tag can be used to uniquely identify any element within
an HTML page. There are two primary reasons that you might want to use an id
attribute on an element:
• If an element carries an id attribute as a unique identifier, it is possible to identify
just that element and its content.

• If you have two elements of the same name within a Web page (or style sheet), you
can use the id attribute to distinguish between elements that have the same name.
• <p id="html">This para explains what is HTML</p>
• <p id="css">This para explains what is Cascading Style Sheet</p>
The title Attribute
• The title attribute gives a suggested title for the element. They syntax for the title
attribute is similar as explained for id attribute:
• The behavior of this attribute will depend upon the element that carries it, although it is
often displayed as a tooltip when cursor comes over the element or while the element is
loading.
• <head>
• <title>The title Attribute Example</title>
• </head>
• <body>
• <h3 title="Hello HTML!">Titled Heading Tag Example</h3>
• </body>
• </html>
The class Attribute
• The class attribute is used to associate an element with a style sheet,
and specifies the class of element. You will learn more about the use
of the class attribute when you will learn Cascading Style Sheet (CSS).
So for now you can avoid it.
• The value of the attribute may also be a space-separated list of class
names. For example:
• class="className1 className2 className3”
The class Attribute
• <!DOCTYPE html>
• <html>
• <head>
• <title>The style Attribute</title>
• </head>
• <body>
• <p style="font-family:arial; color:#FF0000;">Some text...</p>
• </body>
• </html>

You might also like