HTML Lesson 3

Goto Lesson:

Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
Lesson 10
Lesson 11

In Lesson 1 all the sections of a page and what they are used for is described, now we will begin making some serious pages. At this point I would like to mention most of the following lessons will consist of examples with explanations following the examples. Lets start by declaring our file an HTML file and putting in our title.

<html>
<head>
<title>My first Webpage</title>
</head>
<body>

Line one tells the browser that this is an HTML page, line two starts the heading, line three gives a title to my page, line four ends the heading, and line five starts our body section. Now we are going to create our body section. The body section consists of what you want to be displayed on your web page.

<html>
<head>
<title>My first Webpage</title>
</head>
<body>
This is the first webpage I have ever made.
</body>
</html>

My conent is contained between the starting and ending body tags and will be displayed on the page. Try typing the above code into notepad and save the page as "firstpage.html" (without the quotes of course), you have to add the .html it will not do it automatically. Now open up your favorite browser and hit file-->open file and open the file. You should notice your title in the bar at the top of the browser and whatever you typed in between the body tags is displayed in the page. Now open the page in your text editor again and add more to the body section, try hitting return a couple of times and typing more, then save it. Reload the page and you'll notice the only time it goes to the next line is when you hit the edge of the page whether you hit return or not. Returns are not recognized by a browser which allows you to spread out your code for readability without messing up the structure of your page. The command used to return one line is the break command ( ) this is one of the several commands that requires no conclusion. Try typing in the example below and view the results.

<html>
<head>
<title>My first webpage</title>
</head>
<body>
This is the fist webpage I have ever made,
<br>
But soon I will have made many,
<br>
<br>
<br>
And my webpage will be the coolest!
</body>
</html>

When you load the page you'll see that each causes the page to return one line. Another Popular Command Often used to return a couple lines is the command. It is a command that tells the browser to start a new paragraph and will cause a couple returns to occur. This command does have an end tag that can follow the end of that paragraph but it is not necessary to the functioning of your page and should be used at your own discretion.

Example of :

<html>
<head>
<title>My first webpage</title>
</head>
<body>
The difference between this line
<br>
and this line is a <br>, AND the difference between this line and this line
<p>
is a <p>.
</body>
</html>

Now that you know how a page goes together and some basics of formatting text we will move on to some serious page formatting in the next lesson.