Patrice Koehl
Department of Computer Science
Genome Center
Room 4319, Genome Center, GBSF
451 East Health Sciences Drive
University of California
Davis, CA 95616
Phone: (530) 754 5121
koehl@cs.ucdavis.edu




Introduction to Computers: Fall 2013

Lab4: Creating a Web page using HTML


In this lab you will learn how to create a web page using the basic programming language HTML.

The key notion to remember is that in the source code of a web page, its content, i.e. what you see, is mixed with the formatting, which does not appear when the page is displayed but controls its elements such as paragraph, breaks, pictures, links, and so on.


Basic HTML programming

Tags

An HTML document, or "web page" is a succession of elements. Each element can have HTML attributes specified. Elements can also have content, including other elements and text. For example, the title element represents the title of the document.

Most elements are written with a start tag and an end tag, with the content in between. An HTML tag is composed of the name of the element, surrounded by angle brackets. An end tag also has a slash after the opening angle bracket, to distinguish it from the start tag. For example, a paragraph, which is represented by the p element, would be written as:

<p>In HTML, most elements are writtent as ...</p>

There are a few exceptions, that is, tags that do not need an ending tag: <br> (paragraph break) is one of them.

Note that there cannot be spaces between the < and the tag name, or between the < and the / in an ending tag, so the following are not valid tags: < title>, </ title>, < /title>

Tag names are case insensitive, so <TITLE> is valid, as is <TiTLe>.

Tags that are present in every HTML document

Every HTML document begins with a <html> tag, and ends with a </html> tag. What comes between these is the actual web page. Anything that appears outside of these two tags will not show up if you display the page using a browser.

HTML documents usually have two main sections: a header and a body:

  • The header defines the title, and may also refer to a stylesheet for the document (more on that later.) It is enclosed in a <head> </head> tag pair.
  • The body contains what you really see on the web page, and it is enclosed in a <head> </head> tag pair.

Two very useful tags

Two very useful tags are the tags for inserting links in an HTML document, the a tag (for anchor), and the tag for an image, img :

  • The anchor tag a allows you to link another HTML document to your page; this document can be a file that sits on your server or an external web page. Here is how you would link the web page for ECS15 to your own web page:

    <a href="http://www.cs.ucdavis.edu/~koehl/Teaching/ECS15">ECS15 home page<a>

    The text between <a...> and </a> will show as a link on your web page.

  • The img tag allows you to attach an image to your web page. Its format is:

    <img src="Addr" border="N" alt="Info">

    where:
    • Addr is the address of the image. This address can be a path on the computer hosting the web page, or an external URL address
    • N is the size (width) of the line used as a border to the image. Setting N to 0 results in no border
    • Info is the text that is displayed on the web page if the image is not found.
    Here is an example of an image tag:

    <img src="http://identitystandards.ucdavis.edu/local_resources/images/logos/logos_marks/expanded_logo/expanded_logo_1_gold-blue.gif" border="0" alt="Image not found">


For more information on tags, you can look at the Wikipedia page on HTML elements.

An example of an HTML document

Here is a simple HTML document that creates a web page listing my hobbies during the summer:

<html> 
	<head> 
		<title>My summer page</title>
	</head> 
	<body> 
		<h1>My summer hobbies </h1>
		<hr> 
		<p> In the summer, I like to be active. Here is a small list of the activities I like to do:</p>
		<ul> 
			<li>I like running in <a href="http://www.ucdtri.com/">triathlons</a></li>
			<li>I often go rock climbing at <a href="http://www.yosemite.org/">Yosemite</a></li>
		</ul> 
	<body> 
</html>

Some notes about this example:

  • "My summer page" is a header for the document; it will not appear on the web page itself.
  • The visible part of the web page appears between the tags <body> and </body>
  • I have set a heading for the first part of the document, which I named "My summer hobbies"; it is enclosed in the tabs <h1> and </h1> and will appear with a different style on the web page (usually with a larger font, in bold).
  • Under the heading, I added a horizontal line using the tag <hr>.
  • As part of the text, I added an unordered list (i.e. a list that appears with bullets instead of numbers. To do so, I started with the tag <ul> and then added each element in the list between the tags <li> and </li> the unordered list ends with </ul>.
  • Notice that I indented the different parts of the document: this is not required, but it helps reading the HTML code.

Styles

You can change the appearance of a web page (i.e. the fonts it uses, the color of the background, text, ...) using styles. These styles appear in the header section, between the tags <style type="text/css"> and </style>. Here is an example:

<head>
	<style type="test/css">
	body {
		color: navy;
		background-color: #ffff66;
		font-family : sans-serif;
		margin-right: 15%; 
	}
	</style>
</head>

Some notes about this style:

  • The tags "body {" and "}" delimit all style formatting that applies to the whole body of the document.
  • Color refers to the color of the text as it will appear on the web page; here is is set to navy.
  • Background-color refers to the color of the background. Here it is defined in hexadecimal format (this is what the symbol # indicates). A color can be defined in hexadecimal format using a seven digit label, with:
    • Digit 1: #
    • Digits 2-3: the amount of red in the color, between 0 and FF (i.e. 255 in decimal). FF means full red, while 00 means no red.
    • Digits 4-5: the amount of green in the color, between 0 and FF (i.e. 255 in decimal).
    • Digits 6-7: the amount of blue in the color, between 0 and FF (i.e. 255 in decimal).
    The color used is FFFF66, meaning full resd, full green, and some blue; this is in fact yellow.
  • Font-family defines the fond family used for the text (if not specified, the web page will use "serif").
  • Margin-right defines the margin on the right of the document; it is given as percentage of the full length of the page. Similarly, you can also use margin-left.
Feel free to experiment with different styles to find one that you like.

The assignment


For this assignment, you will make your own web page using HTML programming. Name the web page file index.html. It can be on any topic. It must contain:
  1. A title. (2 points)
  2. A style section specifying 10% left and right margins, some font face besides the default serif, and some color besides the default black-on-white (2 points each, 6 points total).
  3. Two different headings, with separate content under each heading (2 points each, 4 points total).
  4. An unnumbered list with at least two different items (2 points each, 4 points total).
  5. At least 4 links to other web pages (1 point each, 4 points total).
  6. At least one picture (2 points).

We recommend that you use notepad to create the web page. However, you are free to use any other software/editor; we only require that your index.html file be clean and readable (5 points), e.g., without unnecessary characters/tags/formats.


Submitting your work


You can create a zip file containing your file index.html and any pictures that you have included in your web page, and name it lab_webpage.zip.

It is very important to turn in your assignment. If you do not turn in, you will not get your credit. USE SMARTSITE to save your assignment. If you are not sure how to do it, ask a TA for help.

Do not forget to logout from the lab computers!


Grading


There is a total of 27 points for this assignment.




  Page last modified 17 December 2015 http://www.cs.ucdavis.edu/~koehl/