Name__________________________________________________ Date_________
We will be creating a very simple HTML document with some hyperlinks and images. All of the work will be done using a simple text editor (notepad) rather than a specialized application for HTML editing.
Begin by downloading the zip file, html.zip, and expanding it to a suitable location (your desktop, my documents folder, or z-drive). In the folder you will find a few image files and a text file. Open the text file using notepad (this should be the application associated with the file). We will be converting this file to an HTML file.
HTML code consists of elements delimited by tags which have attributes and content. Tags are defined by placing a name inside angle brackets. Many tags come in pairs, an opening tag and a closing tag, with the content of the tag placed between them. For example, every HTML document is the content of the html element delimited by paired html tags. Note that the closing tag has the same name, but is preceeded by a slash /:
<html> content of the html tag representing the document and terminated by the closing part of the html tag </html>
Insert the opening html tag at the top of the document and the closing html tag at the very bottom.
Most valid HTML files have a head and body section; the head section comes first. Here is a basic skeleton of an HTML page:
<html>
<head>
<title> Title of document </title>
</head>
<body>
Content of page
</body>
</html>
Insert a head section immediately after the opening html tag. You will need an open and close tag with name head. Add a title element inside the head section with content indicating the title of this document is Leonard Euler. A title element uses a title tag pair with the title of the document as its content.
After the closing head tag, and before the beginning of the document, add the opening body tag. Insert the closing body tag at the end of the document, just before the closing html tag.
Save the document with the name (Use save as) Euler.html. Notice that we are using a different "extension." Locate the new file using the File Explorer application, and open the file by double-clicking it. This should load the file in a browser and display it. The results should be less than satisfying; we need to add HTML code to allow the browser to display it properly.
In notepad, turn off word wrap (in the Format menu).
How many lines of text can you see in the notepad view of the document? ________
Are the lines separated in the browser version of the document? __________
Turn Word Wrap back on.
In the body section, add a level 1 heading element that includes Euler's name as its content. Level 1 heading elements use the tag named h1. The heading text is the content of the tag pair. Add level 3 heading tags around Euler's lifespan. Save the document, then refresh the browser view of the document. Describe what is different:
Place paragraph element tags <p>...</p> around each of the remaining five lines of the document (remember that some of the lines are wrapped on your screen). Save your work and view the results in the browser. The formula will be displayed in teletype style; use the <tt> tag pair (nested inside the paragraph tags) to enclose the formula. One more format trick is needed. The last part of the formula e (ix) is supposed to be e to the (ix) power. We need the (ix) to be a superscript. Enclose (ix) as the content of a sup tag pair to make it a superscript element. Save your work and view the results in a browser.
There are three more enhancements we want to make. Add a picture, replace "pi" by the symbol for pi, and add a hyperlink to another source of information about Euler.
Images (jpg, gif, and png) may be added to HTML documents using the img tag. The format is:
<img src="url of image" alt="descriptive text" align="right" height="1" width="1"/>
This example shows five attributes: src, alt, align, height, and width. The first two are required, the third is optional, the last two recommended. The align attribute, with value "right", is used to allow the text to flow around the image - the image is aligned on the right of the page. Add this tag to the document just inside the first paragraph element (after <p> and before The). The url should be simply "Euler.jpg" (be sure to capitalize it exactly). The alternate text should be "Leonard Euler reading a book". You will have to determine the actual height and width of the image and insert these numbers in the proper place. Save your work and view the results in a browser. Hover the mouse over the picture; what do you see?
We want to do a similar thing to replace the word pi in the second paragraph, but the image we have is pi.bmp. You will need to convert this to a gif or png or jpg; I would recommend a gif file. Note that some browsers will display the bmp file directly, but bmp files are not supposed to be supported by the img elament. Convert the file now, saving it as pi.gif. Then replace "pi" with an img tag that will display this image. The alternate text should read "Greek letter pi". Omit the align attribute; we want an inline image, not one the text flows around. This image is 12 pixels by 12 pixels.
Save your work and verify that all is well in the document. Can you see the Greek letter? _____________
Finally, we will add a hyperlink to take the user to a website with more information. Hyperlinks are added using the anchor element. The format is:
<a href="url to target document">The text of the link</a>
Add a hyperlink in a new paragraph element at the bottom of the document (just before the ending body tag) that says "For more information, follow this link". The link target is http://www-groups.dcs.st-and.ac.uk/~history/Mathematicians/Euler.html.
Add one more element after the paragraph with the link. This will be an address element with your name as the contents. Something like <address>Tim Margush</address>
Add an HTML comment after the opening html tag with your name and the date. An HTML comment looks like this:
<!-- Tim Margush, July 20, 2005 -->
Save your work, view the results. Get a printed copy of your source code (use the print option in notepad).
The next step is to upload the files to a location where they can be served by a web server. Use WinSCP to ftp to your unix account (unix000 at wirth.cs.uakron.edu - of course, 000 is to be changed to your id number). In your home directory, add a folder named public_html. Open that folder, then copy three files into that folder. The files you need to copy are Euler.html, pi.gif, and Euler.jpg. Be sure the case of the letters is correct; rename any files if there is a discrepancy.
In a browser, enter the url: www.cs.uakron.edu/~unix000/Euler.html (change 000 to your id number)
Voila! Do you see your web page????? _______ (if no, please fix whatever was wrong). Print the web page, circle your name at the bottom.
You can upload the files to any WWW hosting service, such as www.freewebs.com. This site provides free space for a collection of web pages. They also provide a WYSIWYG HTML editor.
(what does that stand for? __________________________________________________________)
You can also pay for web hosting, and get your own domain name assigned to your site, like www.margush.com.
Turn in this sheet along with your other printouts.