Creating Your First Web Page

This Quick-Start HTML Tutorial can help you build a simple Web page with any word processor or ASCII text editor. Many people use Notepad, WordPad, Microsoft Word or Works instead of buying an HTML editor.

For this page I created a text file using Notepad, then added HTML tags to tell the browser how to display the page. Afterwards I inserted more HTML codes for other source files. When finished I saved the document as a text file with the .htm extension.

What is HTML?

HTML stands for HyperText Markup Language. HTML tags will display enhanced text, photos, artwork, and even external video clips. Tags are also used as hyperlinks to other pages, Word and Excel type documents, and your audio and video files. Tags are surrounded by angle brackets < and >.

Example: The <b> opening tag before a word tells an Internet Explorer, Netscape or AOL browser to show the word in bold. The </b> closing tag after the word sets the text back to normal.

Page Link: Start with <a href="your-page.htm">, then type the page name, and end with </a>. I will explain more later.

Audio/Video Link: Same as above, except the tag's attribute will be href="your-audio.mp3" or href="your-video.wmv". Again I will explain more later.

Starting Your First Web Page Now!

First, right-click on the picture of this cat and save it to a folder on your computer so you can use it as an image on your web page. Then create a document in Notepad using the example in the source document below. Minimum tag requirements are highlighted in bold, and further details are listed after the exercise.

When finished, save your source document with the .htm file extension. Use quotes around the file name ("mypage.htm") to avoid saving it with the .txt extension. The document and the cat's picture must be in the same folder.

Source Document

Web Page

<html>

<head>
<title> The Title </title>
</head>

<body>
<h1>Welcome!</h1>
<img src="cat.jpg" />
<p>
I will <b>link</b> to <a href=
"http://www.yahoo.com">Yahoo</a>
</p>
</body>

</html>

Welcome!

I will link to Yahoo

Required Tags in the Example

The source document's text and codes go between the <html> opening tag and the </html> closing tag. An HTML source document contains two sections: Head and Body.

The Head section (with the <head> and </head> tags) contains your title for the top of the browser. Type your title's name between the <title> and </title> tags.

The contents of the Body section go between the <body> and </body> tags.

Other Tags in the Example

Header text between <h1> and </h1> is set to 1. Largest to smallest levels are <h1> to <h6>.

The image tag needs source, width, height and alt (description) attributes:
<img src="cat.jpg" width="50" height="50" alt="cat">. The image element and a few others do not have closing tags.

<p> starts a paragraph, and </p> ends it.

Text between <b> and </b> appears in bold type.

<a href="http://www.yahoo.com">Yahoo</a> links this page to the external site Yahoo.com. To link to a second page on your own site, use the attribute href="page2.htm". The word Yahoo between the anchor tag and its closing is set as a hyperlink.

Audio and Video Files: To link this brief audio greeting, I typed <a href="pcbill.mp3">Greeting</a>. Video works the same way for wmv files. Please respect copyright laws.

Further Study: Visit the tutorials at the right sidebar to learn more about creating good web pages, podcasts and blogs.

Displaying a YouTube Video

Uploading a video to YouTube will allow their system to display the file on your web page. This is a good alternative to the slower process of initiating the video from your site. Many bloggers use services like YouTube and Google Video to embed videos on their blogs.

To display a chosen video from YouTube, copy their code from the Embed text box next to their video, and paste it in your HTML document. The video will work after you upload your page to your host's site.

Example: I copied and pasted the following code to display the video:

Cats at The Animal Haven - NHTV

CreatingYourFirstWebPage.com
Created 1996. Updated May, 2008.
e-mail Bill Dillane