Lesson 2: Creating Your
First HTML Page: The HTML
Structure
omputer Programming 2
As previously discussed , HTML is a way to
structure your Web pages. It foes so by
using elements and tags. In this section,
you will become familiar with the structure
of an HTML document and how elements
and their tags fall within these structures.
HTML Tags
The structure of your Web page is
composed of tags. Tags are markers that
tell your Web browsers how to present
your HTML contents. For example, placing
text between <bold> and </bold>tags
renders the text in boldface.
<html>
The <html> tag is the first tag used in
every HTML page. It indicates that the
content of the file are in HTML. All the
necessary HTML commands are included
within the <html>and </html>tags.
<head>
The <head> or the header tag usually
serves as a placeholder for general
information about your HTML page. The
page title and author are most often
placed within the <head>and </head>
tags. You must never put any text of your
page in the header.
<body>
The contents of your HTML page are
enclosed within your <body> and
</body> tags. These include text,
graphics, links, and so on.
In its simplest form, your HTML structure looks like
this:
Type the following in Notepad and name it HTML
[Link]
<html>
<head> Header</head>
<body>
All contents of your HTML page are placed here.
</body>
</html
Well-Formed Tags
In the example above, you will notice
that all contents are placed between
opening and closing tags. Tags are
place in the order that they appear on
the structure.
Example
this is the correct placement of tags
within tags.
<tag1><tag2></tag2></tag1>
this is the wrong placement of tags
within tags.
<tag1><tag2></tag1></tag2>
In earlier version of HTML, all elements
must have opening and closing tags. In
later versions of HTML such as HTML 4.0,
elements do not have
HTML Element
HTML Element -is where you can put all
the HTML tags except the !DOCTYPE.
HTML element indicates the start of your
HTML code.
Syntax:
<html>……..</html>
HTML Element
Head Tag -contains information such as
title, css etc., and these information are
not viewable within the browser.
Syntax:
<head>…….</head>
HTML Element
Title Tag -is where you put the title of the
web page. Title can be found at the top
left of the web browser window.
Syntax:
<title> …….. </title>
HTML Element
Here are some examples using the tags
we discussed. Using Notepad, type the
following code and check the output using
a browser.
Reminder: As discussed in our previous lesson, it
is best to put our file in a folder. Also, please be
reminded on how to create or edit HTML using
Example 1: Filename:
[Link]
<!DOCTYPE Output::
HTML>
<html>
<head>
<title> My First
Website </title>
</head>
</html>
Example 2: Filename:
[Link]
<!DOCTYPE Output::
HTML>
<html>
<head>
<title> My
HTML</title>
</head>
</html>
Example 2: Filename:
[Link]
<!DOCTYPE Output::
HTML>
<html>
<head>
<title> My
HTML</title>
</head>
</html>
Performance Task #1
Using the title tag, create webpages with the
following titles:
1. Your <Fullname>, save it as: [Link]
2. Your <section>, save it as: [Link]
3. Your <grade level>, save it as: [Link]
4. Discuss the tags you used in order to
accomplish the above exercises on the space
provided.
Body Tag is the main area where
you put the commands or content
of your webpage.
Syntax:
<body> ……… </body>
Example 3: filename:
[Link]
<html> Output:
<head>
<title> My First
Website </title>
</head>
<body>
This is a
sample webpage
</body>
</html>
Example 4:
[Link]
<html> Output:
<head>
<title> My First
Website </title>
</head>
<body>
My first web Page!
</body>
</html
Performance task #2
Using the 3 previous exercises, [Link],
[Link], [Link], edit the html file
and in the <body> tag type the following:
1. My name is <Fullname>
2. May section is <section>
4. I’m a grade 8 pupil
5. Discuss the tags you used in order to
accomplish the above
exercises.
Background Color -is used to set
background color of an HTML
element.
Syntax:
<body bgcolor="color name">
Example 5:
[Link]
<html> Output:
<head>
<title> My First
Website </title>
</head>
<body
bgcolor="lightgreen">
<p>
This is an example of
background color in
HTML
</p>
Note: What do you notice in our output? We are now starting to
</body>
design our webpage by putting color in the background.
Performance task #3
You will notice that the background color or the
color of the screen turn to whatever color you
type in the background color tag. Let us do
some exercises. Do you remember the
webpages you have created? Edit the HTML file
to change the background color of each
webpages in to red, orange and yellow
respectively.
1. Filename: [Link]
2. Filename: [Link]
3. Filename: [Link]
4. Discuss the tags you used in order to
accomplish the above exercises.
Horizontal Rule- if you want to put
horizontal line in your webpages,
you may use the <hr> tag.
Syntax:
<hr> or <hr/>
Example 6:
[Link]
<html> Output:
<head>
<title> My First
Website </title>
</head>
<body>
<p> Example Planets:
<hr> Jupiter, Mars,
and Earth</p>
</body>
</html>
Note: What do you notice in our output? We are now starting to
design our webpage by putting color in the background.
Example 7:
[Link]
<html> Output
<head> :
<title> My First Website
</title>
</head>
<body>
<p>Solar System:
<hr>Mercury,
<hr>Mars,<hr>Venus,<hr>Ear
th<hr>
</p>
</body>
</html>
Note: What do you notice in our output? We are now starting to
design our webpage by putting color in the background.
Hands on Exercise 4: Let us do some
exercises:
Take a look to the horizontal lines displayed in each
example. These were made using <hr> tag. Check
carefully how <hr> tag is being used in each HTML
file. Let us do some exercises. Edit the HTML files
with the following specifications:
1. [Link], list down at least five (5) family
members or relatives. Place a horizontal line
between each name.
2. [Link], list down at least five (5)
classmates or friends. Place a horizontal line
between each name.
3. [Link], list down at least five (5) teachers.
Place a horizontal line between each name.
4. Discuss below the tags you used in order to
accomplish the above exercise.
quiz
Identify the following
1. These are the commands used in HTML
2. It is the correct sequence or format of command.
3. It is an information to the web browser about the version
of HTML
4. It is where you can put all the HTML tag except the !
DOCTYPE.
5. It contains information such as title, css etc. and these
information are not viewable within the browser.
6. It is where you put the title of the web page.
Identify the following
1. These are the commands used in HTML TAGS
2. It is the correct sequence or format of command. SYNTAXT
3. It is an information to the web browser about the version
of HTML. !DOCTYPE
4. It is where you can put all the HTML tag except the !
DOCTYPE. HTML
5. It contains information such as title, css etc. and these
information are not viewable within the browser. HEAD
6. It is where you put the title of the web page. TITLE
Give the syntax of the
following
1. DOCTYPE Element <! DOCTYPE >
2. HTML Element <HTML>…….. </HTML>
3. TITLE Tag <TITLE>……..</TITLE>
4. BODY Tag <BODY>….. </BODY>
Hands on quiz 1
Create an HTML file OUTPUT
that will display the
following output:
◦ The background
color is Cyan.
Hands on quiz 2
Create an HTML file OUTPUT
that will display the
following output:
◦ Background color is
Blue.
