This lab will introduce you to the basics of hypertext markup language, or HTML. You will be working in Dreamweaver. Create a new basic page in HTML format (choose File | New...) and set the display on split view so that you can see both the HTML source and the WYSIWYG output at the same time.
A First Page
Using either the Dreamweaver tools or by adding tags to the HTML source, put content in your page so that it looks like the following (you may have more than just the menu bar in your window):
If you are editing the HTML source, note that you will need to use the <h1> and <p> tags. Don't forget to close them with </h1> and </p>! You will also need to edit the title of the page to make the title bar of the window match. To do this without touching the HTML source, right-click the document window and select Page Properties. (This may not be available in some versions of Dreamweaver.)
Optional: When you are finished, start a new document and recreate the same page using whichever technique you didn't try first (WYSIWYG editing using Dreamweaver tools or directly editing the HTML source.) Which method did you prefer? Do the results look exactly the same in the preview window? Do they have exactly the same HTML source? They should both look something like this.
Going Farther
You now have two more or less identical HTML documents. We will try out a few more new things. Again, you should try creating the document both using Dreamweaver tools and by editing the HTML source. See if you can make a page that looks like this:
For the HTML source editing, you will need to use either <strong> or <b> to get the bold text, and <em> or <i> to get the italic text. The line comes from an <hr> tag. When you are done, compare your two versions again and note any differences. They should both look something like this.
Optional: If you finish that and are looking for a challenge, see if you can use the style property to make the title appear in some color of your choice (most, but not necessarily all, standard color names will do), and make the "Last edited..." line text very small (i.e., style="font-size:x-small"). Compare your result with this.
Adding Links
Add a link to your page, using Dreamweaver tools or the <a> tag. Here's an example of the HTML source for a link to the CSC 102 home page.
<a href="http://maven.smith.edu/~nhowe/102">CSC 102 Home Page</a>
Paste it into your page, replacing the previous two paragraphs. Now paste a new copy below it, and edit it so that it points to the Smith College home page. Preview your work in a real browser (click on the globe icon in the toolbar), and verify that the links actually work.
Next try adding an image. First copy the tag below, which will insert the Smith College wordmark. (You may not be able to see it in the Dreamweaver preview, because it is on a remote computer. Preview it in a real browser to be sure it is really there.)
<img src="http://www.smith.edu/vid/images/logolarge.gif" alt="Smith College" />
Now make a new copy of the tag, and alter it so that the src points to the black-background version: http://www.smith.edu/vid/images/reversesm.gif.
At this point, both of your tags point to images stored on a remote computer. It is much more common to link to images stored in the same folder as your HTML file, using a relative link. Try converting your two images to work in this manner. Here are the steps:
- First save local copies of these images in the same folder as your HTML file. You can do this by entering the image URL in the browser address bar, right-clicking on the image and selecting Save image as from the popup menu.
- Change the href to refer to the newly saved files.
- Remember to observe copyright laws! Most images on the web cannot be used freely.
- When you post your web page to the beowulf account, you need to check that the permissions of both the HTML and the image files are correct. (See here for more details.)
Optional: Experiment with how you can modify the size of an image by adding height or width attributes to the <img> tag. But be careful about changing both at once!
<img src="http://www.smith.edu/vid/images/logolarge.gif" alt="Smith College" height="42"/>