CS110 HTML Coding

Let's start with some review. The following are HTML tags that you know. You might jot some notes here to help you remember these and how they work. Also, in the CS110 documentation page you will find a pointer to a reference on HTML.

Nesting

In Computer Science, syntactic phrases always nest: one fits inside the other like measuring cups or Russian dolls. So, if I have two tags, FRED and BARNEY, they always go like this:

The FRED tag applies to all three regions, region A, region B and region C, while BARNEY applies only to region B region it surrounds. The regions A and C only have the FRED tag apply to them.

Your browser may not enforce this; it may be forgiving of errors, but you can't be sure that every browser will be so forgiving, so always follow this syntactic rule.

Comments

From the very first computer program, programmers have needed to leave “notes” in the code to help themselves and others understand what's going on or what the code's purpose is. These notes are called comments. Comments are a part of the program text (they're not written separately, because then, well, they'd get separated), but they are ignored by the computer.

Comments aren't about what someone can discover by reading the code, but they should cover the background context of the code, or its goal, or something like that.

Because it's important to get in the habit of putting comments in your HTML code, we will require comments in this course. At this point, you won't have a lot to say, and that's fine. You will start by labeling each file with its name, your name, and the date. Think of it as signing your work. Later, when you're designing a web site with many coordinated pages, you can use comments on a page to talk about how it fits into the overall plan.

HTML Comment Syntax

The HTML comment syntax is a little odd-looking because it doesn't have any letters in it. Here's an example:

The syntax starts with a left angle bracket < then an exclamation point and two hyphens, then the comment (anything you want) and ends with two hyphens and a right angle bracket >

Do you remember seeing any comments in the web page of the previous lecture? If not, remind yourself by going back and reading it (use View Source). You can see another example by doing View Source on this web page.

Tag Syntax

Last time, we learned that tags always begin with a left angle bracket < and close with a right angle bracket >. (Remember that the browser doesn't care whether the tag's name is upper or lower case.) That's still true, but it's also true that you can add additional information within the tag to further specify what it does. These are called attributes.

The best example of this that we've seen is the anchor tag, A or a. To use it as a hyperlink, you have to specify where the link takes us. For example, to have a link that says “Yahoo!” and takes us to www.yahoo.com, we say:

The href part is the attribute. For this tag, since the attribute is almost always required, we can almost think of it as an A HREF tag, but that way of thinking will confuse us later, so it's best to think of it as two separate ideas. Later, we'll see other attributes for the A tag.

Exercise 1

Click here to see the little.html file for this exercise, then follow the directions in it to save it on your desktop as little.html.

<html>
  <head>
    <title>My Little Page</title>     
  </head>
  <body>
  
  <p>This is the text on my little page

  </body>
</html>

First, add a header to the page, using one of the H1–H6 header tags.

Now put in a link to your favorite web site. Here are some of ours. (You can use View Source to see the URL where they go.)

Exercise 2

Using the web page you made for the previous exercise, create a hyperlink that instead of having blue text has text that is large and green. Hint: use the H1 (or H2) tag and include the LINK tag referring to the CS110 style sheet. We'll learn about LINK later; for now, know that copy/pasting that LINK into your document will make H1 and H2 produce large green text.

The LINK tag

Like the anchor tag, the LINK tag also has an HREF attribute, and it also links one web page with another. However, it has a different purpose. Instead of producing a clickable link, the LINK tag tells the browser that there is some additional information about this page located in a different file. The HREF attribute of the LINK tag tells the browser where to find the other file. The HREF attribute contains a URL, which we'll learn about shortly.

The LINK tag contains other attributes depending on the purpose of the connection. In our case, it contains:

The LINK tag can be used for a variety of purposes, but most current browsers only use it for stylesheets.

At this point, the LINK tag is still a mystery. We've told you what it's for, and something about its syntax, but not what goes in the other file. We'll save that for an upcoming lecture.

Tag and Attribute Syntax

We can now generalize our notion of tag syntax to include any number of attributes, as follows:

Browsers differ on how nit-picky they are about attributes. Many will let you get away with omitting the quotation marks when the value is a single solid word. Others will complain if you have line-breaks in your attributes. In general, it's best to comply with the strictest syntax rules, so that your site will work on the most browsers.

Using Images

One thing that we all want to do with our web pages is add pictures. Because the picture file is a separate file, we have to link to it, just like the HREF attribute of the anchor (A) tag.

Once you have an image file, say "small_weasel.jpg" you can use it on your web page thus:

Of course, that only works if the server can find the image file. The SRC attribute must be the URL of the image file. It can be an absolute URL or a relative URL. What did we use here?

When the browser asks for this page, the server sends it back and it also finds and sends back any image files that the page reference. If the server doesn't find the file (or the file is corrupted in some way), the browser will show this:

Depending on your browser, you may see a broken-image icon above, the ALT text, or possibly nothing at all.

The ALT Attribute

You noticed that we added an ALT attribute to the IMG tag that is a brief textual description of the image. The ALT attribute is part of the HTML standard, and it has an important purpose, namely in accessibility. Unfortunately, not everyone has good enough vision to see the images that we use in our web sites, but that doesn't mean they can't and don't use the web. Instead, they (typically) have software that reads a web page to them, including links and such. When the software gets to an IMG tag, it reads the ALT text. If there is no ALT text, it may read the SRC attribute, hoping there's a hint there, but all too often the SRC attribute is "../images/DCN87372.jpg" and the visually impaired web user is left to guess.

Therefore, you should always include a brief, useful description as the value of the ALT attribute. The sole exception is for images that are just used for formatting, such as blank pictures that fill areas or colorful bullets for bullet lists. In those cases, in fact, it's better to include an ALT attribute that is empty, so that the user doesn't have to listen to the SRC attribute being read. In both cases, the text should be useful for someone who wants to use your site but isn't sighted. It helps to turn off images and view your site.

Furthermore, you should avoid having critical information of your web site conveyed only in images. There may be times when it is unavoidable, but to the extent that it is possible, we want our web sites to be easily usable by all people, including the blind and visually impaired.

Accessibility is important in modern society. We build ramps as well as stairs, we put cutouts in curbs, and we allocate parking spaces for the handicapped. Indeed, most federal and state government web sites are legally required to be accessible, and ALT attributes are just one part of that.

For that reason, in this class, we will expect you to always use the ALT attribute. If you find an image or an example where we've forgotten to use one, please bring it to our attention.

Resizing and Aspect Ratio

If you want to display a bunch of pictures, the web page appears neater if the pictures align well. You can align them vertically if they all have the same width, or horizontally if they all have the same height. For example, the following three pictures are all 150 pixels high.

Regardless of the actual dimensions of an image, the browser will squeeze it into a set size if requested. You can do this with two new attributes, namely HEIGHT and WIDTH:

Replace the "height-goes-here" and "width-goes-here" with integers specified in pixels, which we'll discuss later. If both width and height are specified, both will be obeyed, but you have to be careful with that. Suppose the original image is 160x240: taller than it is wide. Technically, the ratio of the width to the height is called the aspect ratio. The Eiffel Tower picture has an aspect ratio of 160:240 or 2:3. If you set the height and width so that they don't have the same aspect ratio, the picture will look distorted. Here is the Eiffel Tower with the wrong aspect ratio:

If you use either the HEIGHT or the WIDTH attributes, but not both, the browser will usually calculate the other attribute so that the aspect ratio is preserved. Thus, the picture will have either the width or height you want, but will not be distorted. That's how we did that row of pictures above.

Deprecated Tags and Attributes

Take a minute to look at the online reference for the CENTER tag. We would give a link directly to it, but we want you to learn how to navigate to find the reference material on any tag:

In this context, deprecated means that browsers will still support the CENTER tag for the foreseeable future because of the zillions of old web pages that already use it, but that CENTER should not be used in new web pages.

Centering is about presentation of the content, and the modern approach is to reserve presentation issues for CSS (stylesheets), which we will be covering next week in this class.

You should avoid using deprecated tags in this course. We are teaching you the modern, more powerful approach, and we would like you to adopt that style. If you don't know whether a tag is deprecated, check this reference.

Solutions to Exercises

© Computer Science 110 Staff
This work is licensed under a Creative Commons License
Date Modified: Thursday, 24-Jan-2008 12:11:58 EST

HTML Coding

Basic Tags