To Create a Simple Web Page using an HTML Editor
To complete this exercise as specified, you need the NetScape Composer HTML Editor that comes with Netscape Communicator (either version 4.7 or 6.2 or higher) plus the UMDNJ logo previously created and saved. Where they exist, differences between Composer 4.7 vs. 6.2+ commands and functions are highlighted.
This exercise is 'self-contained.' However, for those wanting to know more about the ins and outs of HTML, we recommend the following online tutorial:
Follow the steps outlined below:
1. Open the NetScape Composer editor window – (If no blank document appears with a blinking cursor, click the File Menu and select New Document, then Blank)
2. View the Source HTML Code -
Netscape 4.7: Click the View Menu and select View Document Source.
Netscape 6.2+: Click the <HTML Source> Tab at the bottom of the document window
The window will show the HyperText Markup Language (HTML) code or tags generated when you created the blank new document. It should look something like the following::
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en"> <HTML> <HEAD>
</HEAD> <BODY> </BODY> </HTML> |
The first line is a comment. Following the first line is the <HTML>tag, indicating the beginning of an HTML file. The last line of the file </HTML> indicates the end of the HTML markup code. Most HTML tags have a beginning <TAG> and an ending </TAG>.
The <HEAD>-</HEAD> section is the document header, which contains information about the document, including its author, its content (keywords go here) and the tool used to create it. Header information does not display on the viewed or printed page.
Your document content will goes between the <BODY>-</BODY> tags. Thankfully, since we are using a WYSIWYG editor, this is our last look at HTML until we finish.
3. Close the document source window.
Netscape 4.7: Click the X box at the top right corner of the document source window.
Netscape 6.2+: Click the Normal Tab at the bottom of the document window.
4. Save your new HTML file to your hard drive - Click the File Menu and select Save to open the Save As dialog. Name your file with your last name (one word all lower case) and place it in a chosen folder or directory of your choosing. Click the Save button. If a dialog ask for the page title, accept the default page name.
5. Add a table (as a holder for your banner) to your document - Click the Insert Menu and select Table, then Table again to bring up the New Table Properties Dialog. Make sure the number of rows equals 1 and the number of columns equals 2. Deselect the Border line width checkbox (by clicking over the check) or set its value to 0. Also deselect the Equal column widths checkbox (Netscape 4.7 only). Then Click OK. A 1x2 table appears on your page.
6. Add a graphic element to your document - First, let's get a GIF image that we all know and love - the UMDNJ logo. Click on the following link to open the UMDNJ Logo Web site in a new page.
http://www.umdnj.edu/logoweb/university_logo/index.htm
Now right click on the official logo at the top left of the page. From the pop-up menu choose Save Picture As... (Explorer) or Save Image As... (Netscape). In the Save Picture dialog box, give the picture a recognizable name like umdnjlogo and save it in the same folder where you just saved your HTML file. Close the UMDNJ Logo Web site.
Return to your Web page. Click inside the left-hand table cell. Then click the Insert Menu and select Image. Click the Choose File button to open the Select/Choose Image File Dialog, then user the drop-down selection box to set Look in to the directory where you saved your HTMLL file and the UMDNJ Logo. Highlight the logo image file, click Open in the Select/Choose Image File Dialog, then click OK in the Image Properties box. (note: Netscape 6.2+ may prompt you to add alternate text for the image; if so click OK at the prompt, type "UMDNJ Logo" in the alternate text box, then click OK in the Image Properties dialog). The UMDNJ logo should now appears inside your table. Note that the UMDNJ logo graphic file is never actually "pasted" into your Web page. It remains as a file in a directory on your computer. The HTML code on the page simply includes instructions on (a) where to find the graphic file and (b) where to position it on the page..
7. Add some text to your banner - Hit the Tab key to move over to the right column of your table. Type in “IDST5330 Practice HTML Page,” hit the ENTER key, then type in your full name
8. Add a horizontal divider line - Click the mouse cursor below the table, hit the ENTER key once then click the H. Line button on the Menu Bar (or Insert -> Horizontal line from the Menu). This will add a horizontal divider line on your page.
9. Add some text to body of the page - Hit the ENTER key again and type in the following text: “The following links to government Web sites provide excellent resources.” Hit the ENTER key again and type in each of the three full agency, following each with the ENTER key.
Centers for Disease Control and Prevention
National Library of Medicine (includes FREE Medline access)
Food and Drug Administration
10. Add a horizontal divider line - Insert another horizontal dividing line as, in Step #8.
11. Add an E-mail prompt – After adding the second horizontal line, hit the ENTER key once then enter the text “E-mail for further information” below the divider line.
12. Format the table to enhance look of banner – Click your mouse inside the top right table cell containing the text “IDST5330 Practice HTML Page.”
Netscape 4.7: Click the Format Menu and select Table Properties. Click the Cell Tab and then check the Cell width box making sure it is set to 100% of the table. Click OK.
Netscape 6.2+: Click the Format Menu and select Table Cell Properties. Under sixe, check the Cell width box, enter 100 into the text box and use the drop down button to select 100% of the table. Click OK.
13. Format some text using the Heading 1 style – Select both lines of text inside the top right table cell (IDST5330 Practice HTML Page + Your Name). Click the drop-down box at the upper left of the document window that says 'Normal' (Netscape 4.7) or 'Body Text' (Netscape 6.2+). Select Heading 1 from the drop-down box. The banner text is now formatted in the Heading 1 style.
14. Format some text the Heading 3 style – Repeat the procedure in Step 13 to format the text “The following links to government Web sites provide excellent resources.” but this time use the Heading 3 style.
15. Center the key elements
Netscape 4.7: Click the RIGHT mouse button anywhere inside the “The following links to government Web sites provide excellent resources” text. Select Paragraph Properties on the pop-up menu and Center in its dialog. Click OK. The text is now centered.
Netscape 6.2+: Select the “The following links to government Web sites provide excellent resources” text. Click the Align Center button on the Format Toolbar (or Format -> Align -> Center from the top menu). The text is now centered.
16. Create a bulleted list - Select all three government agencies you previously typed in. Then indent these item twice using the Increase Indent (Netscape 4.7) or Indent Text (Netscape 6.2+) button on the Format Toolbar. Last turn them into a bulleted list using the Bullet List (Netscape 4.7) or Apply/Remove Bullets (Netscape 6.2+) button, also on the Format Toolbar.
17. Change the background color - Click the Format Menu and select Page Colors and Properties/Background.
Netscape 4.7: Select the Colors and Background Tab and click the Background button to bring up a palette of color choices. Select a color then click Apply to see the effect. When you have previewed and selected the background color you want, click OK. The page now has your selected background color.
Netscape 6.2+: Click the Use Custom Colors button. Then click the Background button to bring up a palette of color choices. Click on the color you want for your background, then click OK. The dialog box will show you the color scheme for you page, including the text and selected background colors. Click OK to confimr your selected background color.
18. Add WWW Links - One at a time use your mouse to select and highlight the full name of each government agency that appears in the bulleted list you created above. With the name of the agency highlighted, click the Link button on the Toolbar and add the applicable Web address/URL listed below to the 'Link to' (Netscape 4.7) or 'Link Location' (Netscape 6.2+) box in the dialog (to ensure a correct Web address/URL, copy and paste it from here). Click OK, then repeat these steps until all three agency names appear as active WWW links (usually blue, underlined text).
|
Agency |
Web Address/URL |
|
CDC |
http://www.cdc.gov/ |
|
NLM |
http://www.nlm.nih.gov/ |
|
FDA |
http://www.fda.gov/ |
19. Add Communication - Select the “E-mail for more information” text, click the Link button and add the following to the 'Link to/Link Location box in the dialog. Click OK
mailto:your_full_e-mail_address
20. Save and test your file - Click the File Menu and select Save to save your Web page. If prompted for a Page Title (Netscape 6.2+), enter something like 'Unit 9 Web Page'. To view your page in your browser, select File -> Browse Document (4.7) or Browse Page (6.2+). Inspect your work, View the source HTML code you created, check out the links and send yourself an e-mail congratulations!:
When done with the above exercises, send me your Web page as an attachment via external (Internet) e-mail to the following address:
Note: although the UMDNJ logo graphic file remains separate and is never actually "pasted" into your page, you DO NOT have to send this file to me. I have a copy on my system, so that your page will look just fine to me (assuming you follow the above instructions to the letter).