Introduction
to HTML
BASIC
Objectives
Define HTML
Identify the different tags in
HTML
Discussthe uses of the
different tags
Essential Question
How do HTML documents
differ from documents
created with a word
processor such as Word?
HTML
HTML
HyperText Markup Language
TheLanguage of Web Pages on
the World Wide Web
HTML is a text formatting
language.
HTML elements are
represented by tags
HTML Tags
building blocks of HTML pages
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
!DOCTYPE TAG
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>
HTML Tag
The <html> element is
the root element of an
HTML page
</html> ending tag
Head Tag
The <head> element
contains meta
information about the
document
</head> ending tag
Title Tag
The <title> element
specifies a title for the
document
</title> ending tag
Body Tag
The <body> element
contains the visible page
content
</body> ending tag
Notepad++
isa text editor and source
code editor for use with
Microsoft Windows.
Hello World!
<hr> Tag
represents a
horizontal rule
<center> tag
Alignsthe text and
images to the center
<br> tag
produces a line break in
text
Use <br> if you want a
line break (a new line)
without starting a new
paragraph:
Activity
Practicum 1
Format Tags
LIFE 1. Type the content in
Notepad++
Life is an opportunity;
2. Center aligns all content.
Life is beauty;
3. Put horizontal line
Life is a dream;
after the title.
Life is a challenge;
4. Use heading 1 for the title
Life is a duty; and first two lines of the
Life is a game; poem.
Life is a promise; 5. Apply heading 2 for lines 3
and 4.
Life is sorrow;
6. Use heading 3 for lines 5
Life is a song; and 6.
Life is a struggle; 7. Apply heading 4 for lines 7
Life is a tragedy; to 9.
Life is an adventure; 8. Use heading 5 for lines 10
to 12.
Life is luck;
9. Apply heading 6 for lines
Life is too precious; 13 to 15.
Life is life, fight for it.
HTML
Formatting
Tags
Objectives
Define STYLE attributes
Discuss the difference
between TAG and Attribute
Identify the formatting syntax
for STYLE attribute
Enumerate the different
formatting attributes
Essential Question
How do HTML documents
differ from documents
created with a word
processor such as Word?
Background Color
Style Attribute
Style Attribute
AnHTML attribute is a modifier of an
HTML element type.
In HTML syntax, an attribute is added
to an HTML start tag.
The HTML style attribute has the
following syntax:
<tagname style="property:value;">
Differences of TAGS and
ATTRIBUTES
Tags are used to mark up the
start and end of an HTML
element.
Anattribute defines a property
for an element, consists of an
attribute/value pair, and
appears within the element's
start tag
Font Attribute
The font-family property defines
the font to be used for an HTML
element:
HTML Text Size
The font-size property defines the
text size for an HTML element:
HTML Text Alignment
The text-align property defines the
horizontal text alignment for an
HTML element:
HTML Background Color
The background-color property
defines the background color for an
HTML element.
This example sets the background
color for a page to powderblue:
HTML Text Color
the color property defines the text
color for an HTML element:
PRACTICUM 2
