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 editors like Notepad for basic web pages. You will someday probably want to use a sophisticated package like Dreamweaver for heavy duty web projects. The HTML codes you will learn here will be used under the hood when you later use Dreamweaver or an online service like Homestead.
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. I finally 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 external video clips. Tags are also used as hyperlinks to other web pages, Word documents, PDF files, and multimedia clips. Tags are surrounded by angle brackets < and >.
Example: The <b> opening tag before a word tells an Internet Explorer, Firefox 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-other-page.htm">, then type the name of the other page, 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 below 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 goes between the <h1> and </h1> tags. 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 Yahoo.com. To link to a second page on your own site, use the attribute href="page2.htm". The a tag stands for anchor. 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.
Displaying a YouTube Video
Uploading a video to YouTube will allow their service 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 Blip.tv to embed videos on their blogs.
To display a video from YouTube, copy the Embed code next to the YouTube video, and paste it in your HTML source document. The video will work after you upload your page to your host's site.
| 
