Web Design Made Simple Web Design Made Simple

debbie T Designs - Web Design Made Simple

Creating Your First Page

Reusing the Template File

Let’s personalize a web page using the template, then view it in a web browser.

It is easy to use a template file as a starter page for all future pages. That way, the bare-bones code of every xhtml page can be utilized every time and you don’t have to keep re-typing.

To review, this is the bare-bones code that your template.html file should include:

<!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" xml:lang="en" lang="en">
<head>
<title>Title of Page goes here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

</body>
</html

Launch your favorite text editor, and open the template.html file. choose File>Save As and save it with a brand new name.

hello.html

If you are using Notepad, type a new file name "hello.html" (no quotes, all lowercase, and no spaces/special characters.) Make sure that Save as type is Text Documents and Encoding is ANSI.

save as new file name

Now the hello.html file is ready to personalize, and the original template is still intact for future pages.

With the newly saved file on your workspace, delete the text in between the opening <title> and closing </title> tags; type something more specific.

How about <title>My First Web Page</title>

Or you can type in your own name to personalize it even more.

<title>Debbie's First Web Page</title>.

<!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” xml:lang=”en” lang=”en”>
<head>
<title>Debbie’s First Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

</body>
</html>

After the opening <body> tag, type in some random text like "Hello World" (no quotes) and then save your file. We aren’t going to be working with any new tags as of yet.

<!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” xml:lang=”en” lang=”en”>
<head>
<title>Debbie’s First Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
Hello World
</body>
</html>

Save the file.

In the next tutorial, the file can be viewed in your web browser.

What do you want to learn next? « Must Have xhtml TagsViewing Web Page »

2 Comments

  1. Comment by Angela on October 9th, 2007

    Hello,

    This has been so helpful for me. I would like to suggest creating steps using the , , , , , and details if you have links. There is much more to this has you know using used elements such as formatting, Document structure, color coding, and adding thumbnails. I hope to hear back from you.

    Thanks,

    Angela

  2. Comment by debbie T on October 9th, 2007

    Hey Angela,

    Thanks for your comment, but it was sort of jumbled with a lot of ,,,,commas.

    Try typing your examples, w/out html, or you can email me if you’d like! Just use the contact link!

Leave a Comment

If you would like to make an observation or suggestion, please take the time to write a comment. If you prefer to contact me privately, there is a contact form.