Learning HTML
For Kids!
Text
formatting tags are:
<h1>…</h6>
<p>…</p>
<br>
<hr>
Tip to Remember
Headline tags create their own
line break. So don’t use <p> after a headline.
5. Basic Text Formatting
After any length of time on the Internet, you’ll notice that a Web page is made up of more than just plain words on a screen. There are headlines, paragraphs, graphics, colors and much more. It’s a lively place to be.
Our next tags--headline, paragraph, line break and horizontal rule--will help us make our current page a lot more exciting. Let’s learn how.
Headline tag
In HTML, bold copy is created by using the headline tag. There are six levels of
headlines, ranging from <h1>…</h1> to <h6>…</h6>.
Here is an example of the code for all the headline sizes:
<h1>Level
1 Headline</h1>
<h2>Level 2 Headline</h2>
<h3>Level 3 Headline</h3>
<h4>Level 4 Headline</h4>
<h5>Level 5 Headline</h5>
<h6>Level 6 Headline</h6>
And here is how each level looks in a browser.
Let’s add a headline to our Web page document.
Step 1 Load your text editor and open your file: firstpage.html This is what you should see:
<html>
<head>
<title>This is my first web page.</title>
</head>
<body>
Hello world. This is my first web page. There's more to come.
</body>
</html>
Step 2 Add the <h1> tag to the words "Hello world." as shown in red.
<html>
<head>
<title>This is my first web page.</title>
</head>
<body>
<h1>Hello world.</h1> This is my first
web page. There's more to come.
</body>
</html>
Step 3 Save the file
Step 4 Open up Netscape Navigator.
Go to File menu
Select Open Page
A dialogue box appears.
Select Choose File
Go to where you saved your file, click on it. This will bring you back to the dialogue box, which should now be showing your file.
Click Open
Your new page should look like in your browser.
Paragraphs
& Line Breaks
To add space between paragraphs you use the paragraph tag:
<p>…</p>
This is a container tag and must have a beginning and an ending.
To add a single line of space, you use break tag:
<br>
This is an empty tag and stands alone. You can use the <br> tag to insert one or more blank lines.
Horizontal
Rule
To create a horizontal line on your page you use the empty tag:
<hr>
Wow, what a lot to take in. Let's apply what we've learned.
Step 1 Load your text editor.
Step 2 Open the file: firstpage.html. Your code should look like this:
<html>
<head>
<title>This is my first web page.</title>
</head>
<body>
<h1>Hello world.</h1>
This is my first web page. There's more to come.
</body>
</html>
Let's add some more text so that we can use the new tags that we have learned. Add tags and text that appear in red.
<html>
<head>
<title>This is my first web page.</title>
</head>
<body>
<h1>Hello world.</h1>
This is my first web page. There's more to come.
<hr>
<p>
I am learning how to use the horizontal rule, headline, paragraph
and line break tags. Writing HTML isn't as hard as it appears.
</p>
<p>Here's a list of items I like about school:<br>
Science<br>
Reading<br>
But most of all--recess!<br>
</p>
</body>
</html>
Your latest revision should look like this in your browser.
|
Privacy
Statement |