Formatting Web Page 1

Web Page

Mr. Seddrico Ferguson

Lesson
Objectives:

By the end of this
lesson students will
be able to:
●

Identify

and

state

the

purpose of number of
newly introduced tags.

●

Understand how to use
tags to format a web page.

●

Apply basic formatting to
a web page

What’s your favorite
TikTok dance or song ?

Ice Breaker

Recap

Formatting a Web Page 1

Basic Formatting

When writing codes, you must remember that a web browser display the
content base on your specific instructions. When writing your code in a
program like Notepad, adding spaces or skipping lines while writing code,
does not mean that the webpage will be displayed in the same manner in

the web browser.
For instance, you must instruct the web browser to when to create a line
break, go to new paragraph and add a line to split a section.
Otherwise, the web browser will ignore those spaces and display the text as
compact as possible for the viewer to read i the next section, we will learn
how to use headline, line break, paragraph and horizontal rule tags

Multiple Choice

You use notepad to write codes

• True

• False

Multiple Choice

When writing codes, you must remember that a web browser display the content base on your specific instructions.

• True

• False

Headline tags

Have you ever seen a webpage with a tile or subtitle that is darker than and stands out
from the rest of the text? This text is referred to as a Headline. These heading are used
to emphasize text on a page and make text stand out. It usually darker and sometimes
bigger than the rest of the text.

Notice How the title” Sarah Favorite Animal”
Stands out. As well, do you see the darker text.
headline tags can be use in the code to ensure
the browser displays the text in this manner.
Finally, notice that the main title text is larger
than the subtitle.This because there are a different level
of headlines.
There are six levels of headline tas ranging from
<h1>text</h1> to <h6>text</h6> (text is not a part of the tag

Multiple Choice

<h1> standing for horizonal rules

• True

• False

Headline tags

The <h1>text</h1> heading tag is used for the main title and
immediately allows the reader to see what your website is about
and helps them to determine whether they would like to view your
web page or not.
NOTE: when you use the headline tag, it automatically adds a blank
like (space) before and after the heading. The <h1>text</h1>
heading tag creates the largest text of all the other headline tags.
The <h2>text,/h2> to <h6>text</h6>. the text becomes smaller and
smaller.

Multiple Choice

Headlines text is used for subtitles.

• True

• False

Line Break and Paragraph Tags

A line break is used to create a break in a sentence. If you would like for your text to go to a new
line, without beginning a new paragraph, and without adding a blank like of space before and
after the line of text. you would use a line break tag. The line break tags is <br>. This is an
empty tag and does not require a closing tag, nor does it have to be wrapped around any text; it
can stand alone. you simply key in the tag where you want the break to occur.Take a look at the
paragraph below.

Here is a list of reason why I like tic tok
Entertaining

Expressing yourself

Singing and dancing

Multiple Choice

Line break is <br>

• True

• False

Multiple Choice

The line break tags is <br>. This is an empty tag and does not require a closing tag, nor does it have to be wrapped around any text; it can stand alone.

• True

• False

Line Break and Paragraph Tags

Note how each item is listed on its own line. Even though listed like this in your code, the text
will not display like this in the web browser. You must instruct the browser to do so. In orde to
do this, we must use the <br> tag.

Here is a list of reasons why I like tik tok

Entertainment

Expressing yourself

Singing and Dancing

Write the tags in the code above. where you
think the should go.

If you wrote the tags like this, you are correct!

Do a woah

Here is a list of reasons why I like tik tok <br>
entertaining<br>
express themselves <br>
singing and dancing<br>

Space Adventure Practice

1. Go back to text document.
2. Key in a introductory sentences for your

first holiday as shown in the example on the
previous page. Add a line break tag at the
end.

3. List three reason what do you use tik tok

for. Add the necessary line breaks

4. Save and display on the web, (Remember

you must resave the text document and
reopen the html document.

Paragraph Tag

A paragraph tag is used to move text to a new paragraph, adding a
line of space before and after the paragraph. A paragraph tag is a
container tag and requires an opening and closing. it is wrapped
around text and is written like this:

<p>text</p>

Multiple Choice

<pr> represents Paragraph

• True

• False

Horizontal Rules Tag

This tag is used to generate a horizontal line on your page.
The horizontal rule tag is an empty tag and is written like
this:

<hr>

Match

Match the following

• <html>

• <head>

• <title>

• <h1>

• <br>

Defines the document as Html

Contains general information about the web page

Display the title of the web page in the title bar of the web browser

Show the title and subtitle in the body

Moves text to a new paragraph adding new blank line of space and after

• Defines the document as Html

• Contains general information about the web page

• Display the title of the web page in the title bar of the web browser

• Show the title and subtitle in the body

• Moves text to a new paragraph adding new blank line of space and after

Adventure Practice

<html>
<head>
<title> My favorite Holidays</title>
</head>
<body><h1>My Holidays</h1>

These are my three favorite holidays:
<h3>Easter</h3>
Here is a list of reasons why Easter is one of my favorite holidays,br>
Easter basket<br>
Candy<br>
Church service<br>

<h3>Christmas</h3>
Here is a list of reasons why Easter is one of my favorite holidays<br>
Celebration of the birth of Jesus Christ<br>
Santa Claus <br>
Gift <br>

<h3>New Year’s Day</h3>
Here is a list of reasons why I enjoy New Year’s Day<br>
Spending time with family <br>
Food<br>
Firework<br>