CSCI 102T
The Socio-Techno Web
Home | Calendar | Labs | CS@Williams
Lab 1: Intro to HTML
For this week's lab assignment, you are to create a small web site. In subsequent weeks, you will post your
weekly papers and responses to this page. The goal this week is to gain familiarity with HTML and web page design.
If you create more than one page, be sure to link them together with reasonable anchor text in a way that makes it easy for the viewer
to navigate through your site.
As you build your web pages, make sure to include as many of the HTML tags that we learned about in lab
as you can. At a minimum, you should include one or two images, two absolute links to sites outside your little site,
a list, and two paragraphs. Later we will add relative links as your web site expands to include more pages.
Ideas for things to include on your webpage: basic information about yourself, your family, what courses you are taking this semester,
what you like to do in your spare time, etc. Add a recent picture of yourself, or a picture or something you like. You get the idea.
HTML Elements and Tags
An HTML document is composed out of elements that begin and end with tags. For example:
<title> |
CSCI 102T:: The Socio-Techno Web |
</title> |
|---|---|---|
| start tag | contents | end tag |
The following are some HTML tags that we will work with today:
HTML document structure
Here is a simple html document.
<!doctype html>
<html>
<head>
<title>My Little Page</title>
</head>
<body>
<!-- this is a comment, I can write whatever I want here -->
<p>This is the text on my little page.
</p>
</body>
</html>
Pay attention to the html elements, and how they are properly nested.
Adding images
Here is the HTML code to add the above image, stored in the file "Williams-Logo.jpg",
on the web page:
<img src="Williams-Logo.jpg" alt="purple cow">
Note: This will only work when the image file and the html document are saved in the same directory/folder.
src and alt are called attributes.
The img element can take more attributes, like height and width.
Adding Links
The <a> element is used to create HyperText, i.e. to link
web pages together. Consider the following html code that will display a
"main page"
label, that, when clicked, will take us to the "index.html" web
page for the course (relative link). The href attribute specifies the destination of the link.
Also notice the open (<a ... >) and close (</a>) tags for the link.
<a href="index.html"> main page</a>
Click to see it at work: main page.
Note: This will only work when the destination file and the document that contains the link are saved in the same directory/folder. That's why this is called a relative link.
Now, consider the following code, that links to a web page in any server (absolute link):
<a href="http://www.cs.williams.edu/~jeannie/cs102t/labs/lab1.html"> CSCI 102 Lab 1</a>
and here it is at work: CSCI 102 Lab 1.
Summary: Absolute and Relative Addresses (URLs)
Absolute URLs consist of the following parts:
http://
|
www.cs.williams.edu/ |
~jeannie/cs102t/ |
lab1.html |
| protocol | server.domain | path | filename |
To understand relative URLs, you have to know a bit more about your directory structure. As you probably know, operating systems (like Mac OS and Windows), organize the contents of a computer's hard drive into folders, also called directories. Folders and files form a tree structure, because of the ability of directories to contain other directories.
We can use these relationships to form a shorthand way of specifying a URL. This is called a relative URL, because we specify the location of a file relative to a known file. Relative URLs are only for files on the same server. Therefore, we can leave off the protocol and server name. Here are the basic rules:
Tasks for lab