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>
<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>
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 with a file name firstpage.html
Step 4 Open up Mozilla Firefox.
Go to File menuGo 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.
Select Open Page
A dialogue box appears.
Select Choose File
Click OpenYour new page should look like in your browser.
Paragraphs & Line Breaks
To add space between paragraphs you use the paragraph tag:
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--vacant and no class!<br>
</p>
</body>
</html>
Your latest revision should look like this in your browser.
Download in PDF Format HERE:
Learning HTML
Posts
No comments:
Post a Comment