Key Words: HTML, HTML element, HTML
tag, start tag, end tag, well-formed, attribute, attribute name, attribute value,
html
, .html
,
.htm
, extension, head
, body
,publish, and validate.
See Wikipedia (http://www.wikipedia.org/) for a detailed
description of the key words.
You are required to have completed the objectives in Lab 1 before doing this lab.
From this lab, you will learn how to create a simple HTML web page using a text editor and post the web page for viewing from your student web site.
You are required to publish all of your completed assignments (homeworks,
labs, and projects) on the web, with certain exceptions. Therefore, you
must know how to upload files to your web directory on
dante
. If you do not know how to upload files to dante
or are uncertain about how to do this, review
Lab 1 before continuing with this lab.
Create an HTML document using notepad or pico.
<HTML> Put all other tags and text in-between the HTML opening and closing tags. </HTML>
<HTML> <HEAD> <TITLE>My First FIT100 Web Page</TITLE> </HEAD> The rest of the tags will go here. </HTML>
<HTML> <HEAD> <TITLE>My First FIT100 Web Page</TITLE> </HEAD> <BODY> <P>This is my first web page for FIT100</P> </BODY> </HTML>
A good way to work: When you are putting together web pages, a good way to work 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 web browser to see if it works. Checking as you go is the first step in learning how to debug.
Checking your work: you should see the title of your web page displayed in the top-left corner of the browser window and a single line of text in the content window.
Each time your make changes to your text file and save them, you will need to press the Refresh or Reload button your browser so that your new changes will appear.
Your code so far will look something like this:
<HTML> <HEAD> <TITLE>My First FIT100 Web Page</TITLE> </HEAD> <BODY> <P>This is my first web page for FIT100</P> </BODY> </HTML>
http://www.washington.edu
http://www.cs.washington.edu/100
http://www.mapquest.com
To grab the full-size photo, not the thumbnail:
*** Use images location at this URL: http://freestockphotos.com Or go out on the Web and find your own. Make sure you have permission to use the image if you just go searching.***
What is public_html?
public_html is the name given to the folder placed in ever student's remote account on Dante once they have enabled web publishing. It is a directory space where you publish your HTML pages and is provided to you by the University. The public_html folder is a shortcut to server space set up for you on another server called Virgil. It is a convenience to be able to move files from your file space directly to your web server space with out having to make another network connection. For convenience, simply think of public_html as your web folder. All files that you wish to see up on your web page at the UW must be placed in this folder. If those files are not in this folder, then they cannot be seen by someone browsing the Internet and looking at your web site. The web documents that you create today are sent to this folder using the SSH file transfer client.
Note: You will need to select "All Files" from the Files of type menu in order to view your HTML file in the window.
When you validate an HTML document, you check if you have written all of your HTML elements properly. Errors in your code sometimes will display the document as your had intended and sometimes not. It depends largely on which web browser and operating system you use. It is always best to use HTML elements properly so that everyone, regardless of the web browser they prefer to use, can see your web page the way you intended it to look.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Also, add the following to the <head> section of your document:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
The W3C MarkUp Validation Service is also useful for debugging your HTML-document.
fit100.html
file in the Address
field and click on the Validate URI... button.
Tip: Common errors include spelllling errors and writing something in UPPERCASE when it should be in lowercase. Remember that HTML is case sensitive!
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 webs site can also have a default pagte. At the UW, the name given to default web pages withing 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_uwnetid/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 created 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://www.washington.edu/home/departmentsis named index.html. You should see the same page if you were to type in the full path name:
http://www.washington.edu/home/departments/index.htmlIt acts as the default web page for the directory departments. If a web directory does not have a default web page, then you will see a listing of all folders and files in that directory. There is no index.html or index.htm page (or some equivalent) in that directory to act as the default.
http://www.w3.org
http://www.webmonkey.com