Your First Web Page

Ok so lets get down to the real business of making web pages. Go ahead and start up your HTML editing software and type in this bunch of code that you see below. If you are using HTML-Kit, then you might notice that instead of giving you a blank XHTML template, it gives you regular HTML. What you can do is to go to edit>preference>startup and then copy and paste this code into the box. So now whenever you make a blank page, all of this code is already provided.

<!DOCTYPE html Public "-W3C//DTD// XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

</head>
<body>

</body>
</html>


This basic web page will consist of two section, a head section and a body section. The head section is where you'll give the title for your web page and the body section is where you'll define what your web page will look like. Also as a note, we call the things with brackets tags. So in our code we have the head tag and the body tag. The ones with the slash are referred to as closing tags.


Give Your Page A Title


To give your web page a title, you type in <title> in the head section. Then after that you type in the title that you want to give your web page. When you're done giving it a title, you then type in </title>. This title will appear in the title bar of an internet browser.

<head>

<title> My Very First Web Page Title </title>

</head>


Making Headers


What we'll do next is create what is known as section headers and what they do is to separate the contents on your web page into smaller parts. There are up six headers in which you can make and each header will be smaller in size than the previous one made. If you like you can think of headers as the title for each section of content on your web page.


To make headers in your web page, you type in the
<h1> tag into the body section of your code. Then type in a name for the section that you want to create. When you're done giving it a name type in </h1>. You can make up to six of these headers, but be sure to give them the appropriate number (eg. the 4th header will be h4, the 5th will be h5, etc.);


<body>

<h1> The First Header </h1>

</body>


Making A New Paragraph

To write a paragraph about something, you use the <p> tag in the body section of your code. When your done with your paragraph, you use the closing tag, </p>

<body>

<p>

A random paragraph about something

</p>

</body>


Line Break

Line break just simply allows you to go down to the next line on the page instead of wrapping. To use a line break use the tag <br />. All the stuff that comes after this tag will start on the next line of the page.


Putting It All Together

Now when you put everything together that you've learned so far, you got yourself your very first web page.

To view your newly created page, you have to save it to a file as either .htm or .html and then simply click on it to open it in your web browser.

Here's an example of a simple page:

<!DOCTYPE html Public "-W3C//DTD// XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> My Very First Web Page</title>

<head>
<body>

<h1> The Very First Header On My Page</h1>

<p>
My first paragraph to go along with my first web page
<br />
This second paragraph started on the next line of the page because I used the break line
tag
</p>


<body>
<html>

Next: Basic Formating









Template Design | Elque 2007