CSCI 102T

The Socio-Techno Web

Home | Schedule | Labs | CS@Williams

Lab 2: 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, your webpage should include:
  • one or two images
  • two absolute links to sites outside your personal 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 and your family, the courses you are taking this semester, what you like to do in your spare time, etc. As far as images, you may want to include a recent picture of yourself or a picture of something you like. You get the idea.

Getting Started

Last lab we set up our CS Department accounts, joined gitub.com and the Williams CS GitHub organization, and got some practice using the GitHub web interface. We also used the Atom text editor to modify a text file.
This week we will use those same skills to create webpages inside our own personal github repositories. At the start of lab, we will all clone our repositories, and then we will proceed to web development.

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

logo

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 "Lab 1" label, that, when clicked, will take us to the "lab01.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="lab01.html">Lab 1</a>

Click to see it at work: Lab 1.

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/~cs102/index.html"> CSCI 102 Home Page</a>

and here it is at work: CSCI 102 Home Page.

Summary: Absolute and Relative Addresses (URLs)

Absolute URLs consist of the following parts:

http:// www.cs.williams.edu/ ~cs102/ index.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

  1. Log into the Mac with username name and password given to you last week.
  2. Download your new private github repository
  3. Using Atom, create a simple web page in HTML. Feel free to start with the simple page given above. But in any case, keep it simple!
    Note: Never use Microsoft Word or any "fancy" editors for HTML. Don't even cut and paste from them. This can introduce strange items into your HTML.
  4. Save the file to your github repository's main folder under the name index.html.
  5. View the web page in a browser by opening the file using the browser's File menu. Even though your webpage is not "published on the web", your browser still loads the webpage and formats the file according to your HTML code. At some point in the future, you may wish to publish your webpage, at which point it will behave exactly as it does when opened locally in the lab.
  6. As you make changes, be sure to save your file frequently, and reload in the browser to see the results (refresh is the CMD-r button on OSX).
  7. Continue to modify your web page, in your text editor, by adding more text and tags, saving it, and viewing it locally in a browser.



You can use an HTML Validator to verify that your web page contains valid HTML!