My First Web Page - Step 2

Can you see your first page?

If you are not successful on your first page, you need to redo it until you get it right.

What follows will be a continuation of the first page.

On the first page, we learned the open close tags and the <p> paragraph.

Now we're going to learn the headings H1 - H6 and the list.

Heading Elements h1 to h6

Insert this line before your previous code - "This is my first page."

<h1>This is Header 1 </h1>
<p>This is my first page. </p>

Repeat the same till H6 after the <p> line:

<h1>This is Header 1 </h1>
<p>This is my first page. </p>
<h2>This is Header 2 </h2>
<h3>This is Header 3 </h3>
<h4>This is Header 4 </h4>
<h5>This is Header 5 </h5>
<h6>This is Header 6 </h6>

Save the file (Ctrl-S) the view it with your browser.

Again, do not proceed unless you got it right.

This is what you should see on your screen.

Use Headings in a logical order...

Make sure you could view all the 5 headings including the first line we code previously.

On your screen, this is what you should see:

This is Header 1

This is my first page.

This is Header 2

This is Header 3

This is Header 4

This is Header 5
This is Header 6

Of course the sizes of the fonts on your screen are not the same as those you saw here.

That is because as we didn't assign a size to each tag, so the browser produces its default sizes.

The usage and importance of Headings

HTML provides 6 different tags for marking up headlines: h1, h2, h3, h4, h5, and h6.

Most pages use only 3 headlines. I usually use up to 4 and at times use h5 for my Wordpress navigation at the sidebar.

Search Engines Optimization specialists recommend using the h1 only once per page.

We just need to follow this for the time being...

Later on, when we move to HTML5, things will be different.

In case you want to know, though it is not important at this stage.

We will be coding in XHTML. When you are ready, we shall upgrade to HTML 5.

11 Dec 2010 - I no longer code in xHTML. Just HTML, and gradually into HTML5 if we need not apply the IE hack. If you do not understand at this stage, ignore it. Everything works fine.

If you are ready, we shall move on to step 3 of my first web page.

CODING
HTML and CSS
How To Make A HTML Web Page?
My first web page
step 1 the first sentence
myfirstpage1. html
 
step 2 the headings
myfirstpage2. html
 
step 3 the bullet lists
myfirstpage3.html
 
step 4 Emphasis - bold and italics
myfirstpage4.html
 
step 5 Lorem Ipsum
myfirstpage5.html
 
step 6 Definition List
myfirstpage6.html

The Easiest Way to Create a Website. Weebly.com


eskay ng

by eskay ng