FIT 100
LAB 3: Constructing An HTML Document
Spring 2001
Reading to be done prior to
Lab 3:
·
Chapters 1, 2 and 3 of the Web Page Workbook
o
Go through skills check
at end of each chapter
·
Use Appendix A
for reference
Introduction:
The first two labs familiarized you with your Dante account and navigating file structures. Today you’ll be introduced to HTML and spend time learning how to create HTML documents that can be posted on your web site.
Objectives:
What you need:
What is public_html?
public_html is the name given to the folder placed in every student’s remote account once they have enabled web publishing. It is a space provided to you by the University. All documents that you wish to see up on your web page at the UW must be placed inside of this folder. If they are not in this folder then they cannot be seen by someone browsing the Internet and looking at your site. The web documents that you create today and in the future are sent to this folder, either by FTP, or by creating them directly in the Unix Shell with the Pico text editor and saving them in the folder.
To Do:
Have you ever used Notepad before? It is a simple text editor that comes with Windows. To open it, click on the Start button, then go to Programs, Accessories, (Start>Programs>Accessories) and click on the Notepad entry. You will be presented with a blank window and a flashing cursor in the top left corner.
·
Open and close tags to indicate HTML as the markup
language. (p. 32-33) Remember, all tags in HTML are identified with this symbol
<tag>. So to start your
HTML document, the first tags you will enter will be ones that tell the browser
that this page is to be interpreted using Hyper Text Markup Language:
<html>
Put all other tags and text in-between the HTML beginning and ending tag.
</html>
· Head tags that also include a title tag (with a title for your page. ex. Web page for Lab 3!). Make sure to close the head and title tags.
A good way to
work:
When you are putting together web pages, or writing code for a program, a good way to keep track of what you do is to make one change and then check to see if it is working.
Save what you have done up to this point and then open the file in a browser to see if it works. Checking as you go is the first step in learning how to debug.
Saving your HTML document:
Adding
more to your page:
o A welcome sentence using an H1 or H2 tag (Heading 1 and Heading 2 are tags that will display your text in a certain size). (p.34)
o A line (horizontal rule) following the tag to separate the header information from the following paragraph. (p.22)
o A paragraph tag that includes a short description of yourself and why you are in this class. (p. 51-52, 154)
§ Make part of the paragraph bold
§ Make another part italicized
§ Underline a third part
o Create an ordered list of your favorite colors (p. 42-43)
o Now, use the font tags to make one of the color names the appropriate color. See the example in Appendix A, p. 158.
§ You will need to use either Hexidecimal or RGB color codes. Here are two links to web pages that give you the codes for colors:
http://www.w3schools.com/html/html_colors.asp
http://www.geocities.com/SiliconValley/Network/2397/
o Create an unordered list of your favorite foods. p. 42-43
o Using the anchor tag, add in the following three links, or three of your favorite links: p. 66-67
§ http://cs.washington.edu/100
Give names to the links that will properly identify them on your page.
***Make
sure you put in closing tags in the appropriate place.***
You can use images located at
this URL:
http://students.washington.edu/gbwhit23/100Labs/Lab3/
OR go out on the Web and find
your own .
To grab the full-size photo, not the thumbnail:
NOTE: You will need to select “All Files” from the Files of type menu in order to view your HTML file in the window.
<img src=”image_file_name”> tag
(see Appendix A for an example)
· When you FTP your Web document over to your Dante account, be sure to transfer your image(s) as well, or they won’t be display.
· **Realize that even though there is a .htm or .html extension on the file, it is still just a text file. What mode do you need to select to transfer the file? ASCII
· To transfer your images, you will need to change you transfer mode. Images are not text files. So you will transfer them in binary mode.
·
http://students.washington.edu/your_uw_id/Lab3.html
· URL addresses are case sensitive. If you use capital letters in your file name, they need to be capitalized in the URL.
Default web pages, or home pages, are usually a way to indicate the very top level of your web site. However, every folder within your web site can also have a default page. At the UW, the name given to default web pages within a directory is index.htm or index.html. Other web servers have different names, such as default.html or default.asp, etc. So, if you want a particular page to come up automatically when someone enters the URL to your site:
http://students.washington.edu/your_uw_id/
then you must place an HTML document in your public_html folder called index.html.
When you created your account here at the UW, an index page was created automatically for you. Until you add to that page, or replace it with an index page of your own, it will serve as your default home page.
For every folder(directory) you create inside of your public_html account, you have the option of placing an index document to serve as the default page when that folder is opened. The page that comes up when you enter this address:
http://students.washington.edu/gbwhit23/100Labs/Lab3/
is named index.htm.
You would see the same page if you were to type in the full path name:
http://students.washington.edu/gbwhit23/100Labs/Lab3/index.htm
It acts as the default web page for the directory Lab3.
If you go to this address:
http://students.washington.edu/gbwhit23/100Labs/
you see only a listing of all folders and files in that directory comes up. There is no index.htm or index.html page in this directory to act as the default.
Online Resources:
Some Helpful pages for learning HTML:
W3 Schools:
UW CSE HTMLhelp page:
http://www.cs.washington.edu/education/courses/100/99au/webref.htm
Some helpful pages for color codes: