HTML
H Y P E RT E X T M A R K U P L A N G U A G E
HYPERTEXT defines the
W H AT D O E S
link between the web
“ H Y P E RT E X T ”
A N D “ M A R KU P pages.
LANGUAGE”
MARKUP LANGUAGE is
MEAN?
used to explain what
different parts of a
document are and how
they should be formatted
on the page.
W H AT I S H T M L ?
1 2 3
HTML is a HTML is the standard HTML consists of a
markup language for series of elements.
markup language. creating Web pages.
H I S TO RY
OF HTML
W H AT I S A N H T M L E L E M E N T ?
• An ELEMENT is used to enclose, wrap, or markup
different parts of content to make it appear or act in
a certain way.
• An HTML ELEMENT is defined by a start tag, some
content, and an end tag.
<opening tag> CONTENT </closing tag>
HTML ELEMENT
A N ATO M Y
H T M L A N AT O M Y This tag is a declaration that
<!DOCTYPE html> defines the document is an
<html> HTML5 document.
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
H T M L A N AT O M Y
<!DOCTYPE html>
This is an element that is the
<html>
“root” element of the page.
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
H T M L A N AT O M Y
<!DOCTYPE html>
<html>
This is an element that
<head> contains the meta information
<title>Page Title</title>
about the page
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
H T M L A N AT O M Y
<!DOCTYPE html>
<html>
<head>
This element specifies a title
<title>Page Title</title> for the HTML page, shown in
</head> the browser’s title bar or a
page’s tab
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
H T M L A N AT O M Y
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
This element defines the document’s
<body> body, is a container to all visible
contents of a page
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
H T M L A N AT O M Y
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1> This element defines a large heading
<p>My first paragraph.</p>
</body>
</html>
H T M L A N AT O M Y
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p> This element defines a paragraph
</body>
</html>
W H AT A R E T H E E L E M E N T S I N
THE EXAMPLE BEFORE?
• HTML
• <html>…</html>
• HEAD
• <head>…</head>
• TITLE
• <title>…</title>
W H AT A R E T H E E L E M E N T S I N
THE EXAMPLE BEFORE?
• BODY
• <body>…</body>
• HEADING
• <h1>…</h1>
• PARAGRAPH
• <p>…</p>
NESTING ELEMENTS
• Elements can be placed within other elements.
<p>My cat is <strong>very</strong> grumpy.</p>
My cat is very grumpy.
T W O C AT E G O R I E S O F H T M L
ELEMENTS
• BLOCK – LEVEL ELEMENTS
• Block-level elements are usually structural elements on the page.
• It appears on a new line following the content that precedes it. Any content that follows a
block-level element also appears on a new line.
• INLINE ELEMENTS
• Inline elements are contained within block-level elements and surround only small parts of
the document’s content.
• An inline element will not cause a new line to appear in the document.
EMPTY ELEMENTS
• Empty elements do not have an end tag!
<br> - inserts a single line break; useful for writing addresses or poems.
LEARN HTML USING
N OT E PA D
STEP 1 Open Notepad on PC
H OW TO STEP 2 Write some HTML
MAKE HTML
USING
N OT E PA D ? Save the HTML page
STEP 3 •Select File > Save as in the Notepad menu.
•Name the file with the extension .htm or .html and set the encoding to UTF-8 (which is the
preferred encoding for HTML files).
STEP 4 View the HTML page in your browser
T RY T H I S !
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1> My First Heading </h1>
<p> My first paragraph. </p>
</body>
</html>