Scribd
Upload
40 views

Introduction To HTML

The document provides an introduction to HTML formatting tags. It defines HTML and some common tags such as <p>, <br>, <b>, and <i>. It explains that HTML tags normally come in pairs and provides examples of opening and closing tags. The document also discusses the difference between HTML documents and documents created in a word processor, and how HTML uses tags to define formatting rather than menus and buttons.

Uploaded by

Kiana Carlyn
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
40 views

Introduction To HTML

The document provides an introduction to HTML formatting tags. It defines HTML and some common tags such as <p>, <br>, <b>, and <i>. It explains that HTML tags normally come in pairs and provides examples of opening and closing tags. The document also discusses the difference between HTML documents and documents created in a word processor, and how HTML uses tags to define formatting rather than menus and buttons.

Uploaded by

Kiana Carlyn
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/ 63

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

You might also like