In this section of the tutorial you will assemble a simple Web page. Among the tasks you will perform will be placing an image, placing and formatting text, creating a table, and assigning attributes to various objects. You can see what your completed page will look like by clicking here. It will open in a new window
Thinking back to the beginning of this tutorial, you will remember that you should create a root folder for your project. Do that now.
Start NotePad, if you have not already started it, and create a new file. Name it "index.htm" and save it in the root folder.
Now type in the opening and closing HTML tags. They are shown below.
An important component of the opening HTML tag is the doctype (document type) statement. The doctype statement "tells" the browser important details about the Web page and the code that is used to make it. While it looks complicated, it really isn't. Add a doctype statement just before the opening HTML tag so that the code looks like this:
Further information about the doctype statement can be found on the World Wide Web Consortium's Web site at www.w3.org/QA/Tips/Doctype.
One last technical detail will help make sure your Web page is rendered properly by the browsers. All you have to do is add an attribute to the opening HTML tag that refers to "name space." The name space is a complicated concept for novice HTML writers so we will not go into detail here. If you are interested in further information, visit www.w3.org/TR/REC-xml-names. Add the name space attribute to the opening HTML tag so that it looks like this:
Now all the preparations are completed and you can start the "meat and potatoes" of Web page building.
Add your opening and closing head tags. The new code should look like:
Now add the opening and closing body tags:
If this begins to look confusing, add some spaces between the opening and closing tags of the head and body. This will help clarify where you will be adding code.
Save your new Web page. You could view the page in your browser at this point, however because you have not added any viewable data, the page will appear blank. To test this, start your browser, click File, and then select Open File or Open, depending on which browser you use. Browse to your new Web page, then click OK or Open. A blank Web page will appear on your screen.
The next thing that you will do is to add a header image to your page. You must first download and save the image into your images folder. Click here to view the header image named "garageheader.jpg." It will open in a new window. Right click on the image in your browser, then click Save Image or Save Picture As (again, depending on your browser) to save the image in the images folder in your project's root folder.
You will want the header image to appear in the center of your Web page. Add the center tag as shown below:
Now add the img src (image source) tag that will place the header image into your page. Because you have saved that image into your images folder, the code will look like this:
The image is 800 pixels wide and 208 pixels high. Add the dimensions attributes to the img src tag. Don't forget to add an alt tag, too. A suggestion is "Sammy's Garage."The code will now look like this:
To see what your Web page should like like so far, click here. It will open in a new window.
