HyperText Markup Language New Lesson
HyperText Markup Language New Lesson
HyperText Markup Language New Lesson
Prepared by:
Grace Zell Gallego
WHAT IS HTML?
• HTML is the standard markup language for creating Web
pages.
• HTML stands for Hyper Text Markup Language
• 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 are represented by tags
• HTML tags label pieces of content such as "heading",
"paragraph", "table", and so on
• Browsers do not display the HTML tags, but use them to
render the content of the page
A SIMPLE HTML DOCUMENT
• <!DOCTYPE html>
• <html>
• <head>
• <title>Page Title</title>
• </head>
• <body> My First Heading
• <h1>My First Heading</h1> My first paragraph.
• <p>My first paragraph.</p>
• </body>
• </html>
EXAMPLE EXPLAINED
• The <!DOCTYPE html> declaration defines this document to
be HTML5
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the
document
• The <title> element specifies a title for the document
• The <body> element contains the visible page content
• The <h1> element defines a large heading
• The <p> element defines a paragraph
HTML TAGS
• HTML tags are element names surrounded by
angle brackets:
<tagname>content goes here...</tagname>
•HTML tags normally come in
pairs like <p> and </p>
•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, but with a forward
slash inserted before the tag name
WEB BROWSERS
• The purpose of a web
browser (Chrome, Edge,
Firefox, Safari) is to read
HTML documents and
display them.
• The browser does not
display the HTML tags,
but uses them to
determine how to
display the document:
HTML PAGE STRUCTURE
• Below is a visualization of an HTML page structure:
Note: Only the content inside the <body> section (the white area above) is displayed in a
browser.
THE <!DOCTYPE> DECLARATION
• The <!DOCTYPE> declaration represents the
document type, and helps browsers to display
web pages correctly.
• It must only appear once, at the top of the
page (before any HTML tags).
• The <!DOCTYPE> declaration is not case
sensitive.
• The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
SAVE THE HTML PAGE
• Save the file on your
computer. Select File >
Save as in the Notepad
menu.
• Name the
file "index.htm" and set
the encoding to UTF-
8 (which is the preferred
encoding for HTML files).
VIEW THE HTML PAGE IN YOUR
BROWSER
• Open the saved HTML
file in your favorite
browser (double click
on the file, or right-
click - and choose
"Open with").
• The result will look
much like this:
HTML DOCUMENTS
• All HTML documents must start with a
document type declaration: <!DOCTYPE
html>.
• The HTML document itself begins with <html>
and ends with </html>.
• The visible part of the HTML document is
between <body> and </body>.
EXAMPLE
HTML HEADINGS
•HTML headings are defined with
the <h1> to <h6> tags.
•<h1> defines the most important
heading.
•<h6> defines the least important
heading:
• <!DOCTYPE html>
• <html>
• <body>
EXAMPLE
• <h1>This is heading 1</h1>
• This is heading 1
• <h2>This is heading 2</h2>
• <h3>This is heading 3</h3>
• This is heading 2
• <h4>This is heading 4</h4> • This is heading 3
• <h5>This is heading 5</h5> • This is heading 4
• <h6>This is heading 6</h6> • This is heading 5
• </body> • This is heading 6
• </html>
HTML Paragraphs
Example:
HTML paragraphs • This is a paragraph.
are defined • This is another
with the <p> tag: paragraph.
B___T___ ___ ____ S
BUTTONS
___ ___ N ___ S
LINKS
___ ___A ___ E ___
IMAGES
___ I ___ T ___
LISTS
HTML Links
• HTML links are defined with the <a> tag:
• The link's destination is specified in
the href attribute.
• Attributes are used to provide additional
information about HTML elements.
Example:
• <a href="https://www.w3schools.com">This is a
link</a>
EXAMPLE:
•HTML Links
•HTML links are defined with the a tag:
•This is a link
HTML IMAGES
• HTML images are defined with the <img> tag.
• The source file (src), alternative text
(alt), width, and height are provided as
attributes:
•Example
• <img src="w3schools.jpg" alt="W3Schools.
com" width="104" height="142">
EXAMPLE:
• HTML Images
• HTML images are defined with the img
tag:
HTML Buttons
• HTML buttons are defined with
the <button> tag:
•Example
•<button>Click me</button>
EXAMPLE:
• HTML Buttons
• HTML buttons are defined with the button tag:
Click Me
HTML Lists
•HTML lists are defined with
the <ul> (unordered/bullet list) or
the <ol> (ordered/numbered list)
tag, followed by <li> tags
•(list items):
EXAMPLE:
• An Unordered HTML List
• Coffee
• Tea
• Milk
• An Ordered HTML List
• Coffee
• Tea
• Milk
HTML ELEMENTS
• An HTML element usually consists of a start tag
and an end tag, with the content inserted in
between:
• <tagname>Content goes here...</tagname>
• The HTML element is everything from the start
tag to the end tag:
• <p>My first paragraph.</p>
EXAMPLE:
Start tag Element End tag
content
<h1> My First </h1>
Heading
<p> My first </p>
paragraph.
<br>
NESTED HTML ELEMENTS
• HTML elements can be <!DOCTYPE html>
nested (elements can <html>
contain elements). <body>
• All HTML documents <h1>My First Heading</h1>
consist of nested HTML <p>My first paragraph.</p>
elements.
• This example contains four </body>
HTML elements: </html>
1 ST ELEMENTS
• <html>
<body>
</body>
</html>
2 ND ELEMENTS
•<body>
</body>
3RD ELEMENTS
•<h1>My First Heading</h1>
4TH ELEMENTS
•<p>My first paragraph.</p>
EMPTY HTML ELEMENTS
• HTML elements with no content are
called empty elements.
• <br> is an empty element without a
closing tag (the <br> tag defines a line
break):
Example
• <p>This is a <br> paragraph with a line
break.</p>
HTML IS NOT CASE SENSITIVE
• HTML tags are not case sensitive: <P>
means the same as <p>.
• The HTML5 standard does not require
lowercase tags, but
W3C recommends lowercase in HTML,
and demands lowercase for stricter
document types like XHTML.
HTML ATTRIBUTES
• All HTML elements can have attributes
• Attributes provide additional
information about an element
• Attributes are always specified in the start
tag
• Attributes usually come in name/value
pairs like: name="value"
THE HREF ATTRIBUTE
• HTML links are defined with the <a> tag. The
link address is specified in the href attribute:
Example
• <a href="https://www.w3schools.com">This is a
link</a>
EXAMPLE:
•The href Attribute
•HTML links are defined with the a tag.
The link address is specified in the href
attribute:
•This is a link
THE SRC ATTRIBUTE
• HTML images are defined with the <img> tag.
• The filename of the image source is specified
in the src attribute:
Example
• <img src="img_girl.jpg">
EXAMPLE:
• The src Attribute
• HTML images are defined
with the img tag, and the
filename of the image source
is specified in the src
attribute:
THE WIDTH AND HEIGHT ATTRIBUTES
• HTML images also have width and height
attributes, which specifies the width and height
of the image:
Example
• <img src="img_girl.jpg" width="500" height="600">
EXAMPLE:
• Size Attributes
• Images in HTML have
a set of size attributes,
which specifies the
width and height of
the image:
THE ALT ATTRIBUTE
• The alt attribute specifies an alternative text to be
used, if an image cannot be displayed.
• The value of the alt attribute can be read by screen
readers. This way, someone "listening" to the
webpage, e.g. a vision impaired person, can "hear"
the element.
Example
• <img src="img_girl.jpg" alt="Girl with a jacket">
EXAMPLE:
Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.
BIGGER HEADINGS
• Each HTML heading has a default size.
However, you can specify the size for any
heading with the style attribute, using the
CSS font-size property:
Example:
<h1 style="font-size:60px;">Heading 1</h1>
EXAMPLE:
•Heading 1
• You can change the size of a heading with the style attribute, using the font-
size property.
HTML HORIZONTAL RULES
• The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.
• The <hr> element is used to separate content (or define a change) in an
HTML page:
Example:
<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>
THE HTML <HEAD> ELEMENT
• The HTML <head> element is a container for metadata. HTML metadata is
data about HTML document. Metadata is not displayed.
• The <head> element is placed between the <html> and the <body> tag.
• Example
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
Note: Metadata typically define the document title, character set, styles, scripts, and other
meta information.
EXAMPLE:
• The HTML head element contains meta
data.
• Meta data is data about the HTML
document.
HOW TO VIEW HTML SOURCE?
VIEW HTML SOURCE CODE:
• Right-click in an HTML page and select
"View Page Source" (in Chrome) or "View
Source" (in Edge), or similar in other
browsers. This will open a window
containing the HTML source code of the
page.
INSPECT AN HTML ELEMENT:
• Right-click on an element (or a blank
area), and choose "Inspect" or "Inspect
Element" to see what elements are made
up of (you will see both the HTML and the
CSS). You can also edit the HTML or CSS
on-the-fly in the Elements or Styles panel
that opens.
QUIZ:
1. Use the correct HTML tag to add a heading
with the text "London".
</body>
</html>
4. Mark up the text with appropriate tags:
"Universal Studios Presents" is the most important
heading.
"Jurassic Park" is the next most important
heading.
"About" is the third most important heading.
• The last sentence is just a paragraph.
• Start with the most important heading (the
largest) and end with the least important
heading (the smallest).
• _____ Universal Studios Presents _____
_____
______ Jurassic Park _____
______
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
TEXT COLOR
• The CSS color property defines the text
color for an HTML element:
Example:
• <h1 style="color:blue;">This is a
heading</h1>
<p style="color:red;">This is a
paragraph.</p>
FONTS
• The CSS font-family property defines the
font to be used for an HTML element:
• Example:
• <h1 style="font-family:verdana;">This is a
heading</h1>
<p style="font-family:courier;">This is a
paragraph.</p>
TEXT SIZE
• The CSS font-size property defines the text
size for an HTML element:
• Example
• <h1 style="font-size:300%;">This is a
heading</h1>
<p style="font-size:160%;">This is a
paragraph.</p>
TEXT ALIGNMENT
• The CSS text-alignment property defines the
horizontal text alignment for an HTML element:
• Example
• <h1 style="text-align:center;">Centered
Heading</h1>
<p style="text-align:center;">Centered
paragraph.</p>
Chapter Summary
•Use the style attribute for styling HTML elements
•Use background-color for background color
•Use color for text colors
•Use font-family for text fonts
•Use font-size for text sizes
•Use text-align for text alignment
QUIZ
1.Use the correct HTML attribute, and CSS,
to set the color of the paragraph to
"blue".
<p style=“____:center;">This is a
paragraph.</p>
4. Use CSS to set the text size
to 50 pixels.
<p style=“____:50px;">This is
a paragraph.</p>
5. Use CSS to set the background-color of
the document to yellow.
• <html>
<body style=“_____:yellow;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
6. Use CSS to center align the document.
• <html>
<body _______=“______;______">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML TEXT FORMATTING
•Text Formatting
•This text is bold
•This text is italic
•This is subscript and superscript
HTML FORMATTING ELEMENTS
• In the previous chapter, you learned about the
HTML style attribute.
• HTML also defines special elements for defining text
with a special meaning.
• HTML uses elements like <b> and <i> for formatting
output, like bold or italic text.
• Formatting elements were designed to display
special types of text:
• <b> - Bold text
•<strong> - Important text
•<i> - Italic text
•<em> - Emphasized text
•<mark> - Marked text
•<small> - Small text
•<del> - Deleted text
•<ins> - Inserted text
•<sub> - Subscript text
•<sup> - Superscript text
HTML <B> AND <STRONG>
ELEMENTS
•The HTML <b> element defines
bold text, without any extra
importance.
•Example
•<b>This text is bold</b>
HTML STRONG
•The HTML <strong> element
defines strong text, with added
semantic "strong" importance.
•Example
•<strong>This text is strong</strong>