D. Nixon: CS 12 > Tutorials > HTML

Home (CS 12) | Assignments | Tutorials | Quizzes & Exam | Other Info

Computer Science 12


Tutorials on HTML




Week 1: HTML tutorials

Here are links to some HTML tutorials:


To all information for Week 1  |  To all tutorials about HTML



Week 3: HTML topic: Links

Here are tutorials on HTML links:

Ses also the general HTML tutorials for week 1.


To all information for Week 3  |  To all tutorials about HTML



Week 5: HTML topic: displaying graphics files

The main HTML topic this week is the use of graphics files.

To display a graphic with the filename  Jane.jpg  which is a photo of your best friend Jane, use the following on your HTML page, assuming that the file  Jane.jpg  is in the same folder/directory as your HTML page:

<img src="Jane.gif"
	alt="Photo of Jane, my best friend" />

The  src  (source) attribute's value is the path name of the graphics file to be displayed.

The purpose of the  alt  attribute is to convey imformation about your graphic to search engines and to devices used by blind people. (See Guidelines on alt texts in img elements by Jukka "Yucca" Korpela.)

Note that the  img  tag is a self-closing tag, which means that a separate closing  </img>  tag is not needed. But the  img  tag itself does need its opening "<" and (after the attributes) its closing ">", just like all other HTML tags. In addition, conformance to the XHTML standard (to be discussed very briefly in lab) requires a "/" before the closing ">".  (XHTML is a form of HTML which is also XML, about which here is a relatively simple XML tutorial. About XHTML itself, see Introduction to XHTML on the W3Schools site, and see also The New York Public Library's style guide for its web pages.)

Another example of a self-closing tag is the  br  tag, whose purpose is to force a line break (besides the usual line breaks between paragraphs). The  br  tag is properly written as:

<br />

and is commonly written as just:

<br>

(without the "/"), in older versions of HTML. Again the "/" before the closing ">" is for conformance to the XHTML standard for self-closing tags.

(The XHTML standard is not quite as important now as it once was, because the more popular cell phone web browsers can now read nonstandard HTML, but it is still something that at least some potential employers will expect you to know, if you decide to become a professional web designer.)

To change the position at which a graphic is displayed, experiment with the following, for now, substituting the filename of your own graphics file for  Jane.gif , and using suitable text with the  alt  attribute:

<p>Some text near the image.</p>

<img src="Jane.gif"
	style="float:right"
	alt="Photo of Jane, my best friend" />

<p>Some text near the image.</p>

<img src="Jane.gif"
	style="text-align:right"
	alt="Photo of Jane, my best friend" />

<p>Some text near the image.</p>

<img src="Jane.gif"
	style="text-align:center"
	alt="Photo of Jane, my best friend" />

<p>Some text near the image.</p>

<img src="Jane.gif"
	style="display:block; margin-left:auto; margin-right:auto"
	alt="Photo of Jane, my best friend" />

<p>Some text near the image.</p>

Alternatively, try enclosing the image in  p  tags, putting the  style  attribute in the opening  p  tag rather than in the  img  tag itself:

<p>Some text near the image.</p>

<p style="float:right">
<img src="Jane.gif"
	alt="Photo of Jane, my best friend" />
</p>

<p>Some text near the image.</p>

<p style="text-align:right">
<img src="Jane.gif"
	alt="Photo of Jane, my best friend" />
</p>

<p>Some text near the image.</p>

<p style="text-align:center">
<img src="Jane.gif"
	alt="Photo of Jane, my best friend" />
</p>

<p>Some text near the image.</p>

<p style="margin-left:auto; margin-right:auto">
<img src="Jane.gif"
	alt="Photo of Jane, my best friend" />
</p>

<p>Some text near the image.</p>

Try all of the above both in Microsoft Internet Explorer and in Mozilla Firefox.

Many online HTML tutorials still teach the following:

<center>
<img src="Jane.gif"
	alt="Photo of Jane, my best friend" />
</center>

<p align="center">
<img src="Jane.gif"
	alt="Photo of Jane, my best friend" />
</p>

<p align="right">
<img src="Jane.gif"
	alt="Photo of Jane, my best friend" />
</p>

However, the  center  tag and the  align  attribute are parts of HTML 3 that were deprecated in HTML 4, meaning that their use is discouraged and may eventually be phased out.

More, in later lab sessions, about positioning things on an HTML page.

See also the HTML tutorials listed for Week 3, and see also Copyright issues and policies of "free" graphics download sites.

P.S. (3/3/2009):  In class, someone asked about setting the size of a graphic. Try variants of the following:

<img src="Jane.gif"
	style="float:right; width:20em"
	alt="Photo of Jane, my best friend" />

<p>Some text near the image.</p>

<img src="Jane.gif"
	style="text-align:right; height:20em"
	alt="Photo of Jane, my best friend" />

<p>Some text near the image.</p>

<img src="Jane.gif"
	style="text-align:center; width:20px"
	alt="Photo of Jane, my best friend" />


To all information for Week 5  |  To all tutorials about HTML



Week 6: HTML topics: colors and a brief intro to CSS

This week we will introduce the topics of colors, CSS, and the differences between HTML 3 and HTML 4.

Download the ZIP file  cssdemo.zip ,  which contains three HTML files,  style-attribute-demo.html ,  style-element-demo.html , and  cssdemo.html ; plus six files with the filename extension  *.css .

Look first at  style-attribute-demo.html , both in a web browser and in Notepad. In Notepad, observe how various aspects of the page's appearance in the browser window, including colors, fonts, margins, and visible borders, are controlled by  style  attributes within various HTML tags. Last week we saw how the position and size of a graphics file can be controlled via the  style  attribute in the  img  tag. As we will see now,  style  attributes can be used to control many other aspects of an HTML document's appearance too, including color.

Observe that the colors are specified using hex values (such as  #000000  or  #ffffff or  #008855).  For more information about the use of hex values to specify colors, see the following tutorials:

Experiment with changing the colors in  style-attribute-demo.html . 

In  style-attribute-demo.html , observe also the use of  div  tags to divide the document up into two distinct sections, which are displayed somewhat differently and are surrounded by their own borders and margins. Observe also the use of  style  attributes with the  p  tag to control the appearance of individual paragraphs. Ditto the header tags (such as  h1  and  h2 ).  Observe also the use of the  span  tag to generate some fancy text within an otherwise normal-looking paragraph.

Once you are fully comfortable with the way the  style  attribute is used with various HTML tags, open  cssdemo.html  both in a web browser and in Notepad, and observe that its  head  element contains the following:

<head>
<title>CSS Demo</title>
<link rel="stylesheet" type="text/css" href="box-demo-1.css" />
</head>

Above, and in Notepad, observe that the  href  attribute of the  link  tag has, as its value, one of the  *.css  files from the ZIP file. Try substituting the name of one of the other  *.css  files. Then reload/refresh your browser window, and see how the appearance of the HTML document changes.

For convenience, you may also view various versions of  cssdemo.html  (as styled by different style sheet files) here.

In your copies of the CSS files, try changing the colors. Again, hex values (such as  #000000  or  #ffffff or  #008855)  are used to specify colors.

As noted last week, there are some HTML 3 tags and attributes (such as the  font  tag, the  center  tag and the the  align  attribute) which were deprecated in HTML 4, meaning that their use is discouraged and may eventually be phased out, although many online HTML tutorials still teach them. (See the HTML tutorial material for Week 5.) In HTML 4, such things as fonts, colors, and layout are all supposed to be specified using CSS (Cascading Style Sheets), rather than via the plethora of tags that were invented by web browser makers during the 1990's.

The term "CSS" refers not only to actual, separate style sheets (in CSS files), but also to  style  attributes within an HTML document itself, such as we saw in  style-attribute-demo.html  and, last week, in our recommended ways of controlling the position and size of a displayed graphic. You will probably find it easiest to learn CSS by studying the  style  attributes in  style-attribute-demo.html  before you try to understand the details of the CSS files.

Experiment with viewing both  style-attribute-demo.html  and  cssdemo.html  in different web browsers. Try both Internet Explorer (Microsoft) and Mozilla Firefox, for example. Also, try viewing them (here) on your cell phone, if you have one. There may be some differences between different browsers, particularly in how the margins and the body border are rendered.

Yet a third way of doing CSS is exemplified by another HTML file from our ZIP file,  style-element-demo.html , in which all the CSS is put in a single  style  element (not a  style  attribute), enclosed by an opening and closing  style  tag within the  head  element of the HTML document itself. This is called an internal style sheet, whereas a separate CSS file is an external style sheet.

(Note:  On your own forthcoming website, it is not recommended that you use visible borders to the extent that they are used in most of the files in  cssdemo.zip).  The visible borders in these files are for demonstration purposes only. Also, of course, your forthcoming website should have more substantial things to say than things like "heading 1" and "this is normal text," which likewise are for demo purposes only.)

Here are some tutorials on CSS:

You will not be expected to learn very many of the details of CSS in this course. But you will be expected to learn how to recognize the difference between HTML 4 (with CSS) and HTML 3 (with its various subsequently deprecated tags and attributes).

Also, on the website you create for this course, you should use HTML 4, with CSS, for whatever formatting you want to do. To the latter end, it is recommended that you simply Google "CSS tutorial ________," filling in the blank with whatever kind of formatting you want to do.


To all information for Week 6  |  To all tutorials about HTML



Week 7: HTML topic: More about CSS

This week we will continue the topics of colors, CSS, and the differences between HTML 3 and HTML 4. Most of what we will cover this week is discussed in last week's tutorials.

The one important new topic not covered in last week's tutorials is the use of CSS validators, which you can use to check the correctness of a CSS file, or to debug your CSS file if it isn't working.

The first of the above two validators checks only whether your CSS is correct. The second one also gives warnings about some things which are not outright errors, but which may look ugly or unreadable in some web browsers, e.g. on cell phones.

Let's now try these validators on the CSS files from the ZIP file  cssdemo.zip.

Observe that the World Wide Web Consortium's validator has no problem with our CSS files. But the Web Design Group's validator has quite a litany of complaints -- not outright errors, but "warnings." What do all these warnings mean, and how can we get rid of them?

  1. The first complaint is about the "background-image" property, which it says is not supported on as many different browsers as is the "background" property.. Since our page does not actually have a background image, we can get rid of it. If you do want to display a background image using the "background" property instead of the "background-image" property, see the examples on this page on the W3 Schools site and this page on the web standards software and learning site. The validator has a similar complaints about the "background-color" property. To fix the latter, simply delete  "-color"  from all instances of the "background-color" property.

  2. Another complaint is: "To help avoid conflicts with user style sheets, background and color properties should be specified together." The potential problem here is that we've specified color for many different elements, but we've background for only for the body. Why is this a potential problem? Because the user can set defaults for how things are displayed. If the user sets a default black background, but if we've set the text color to black without setting the background to some contrasting color such as white, then the user won't be able to read our text. To avoid this, it's a good idea never to specify either color (foreground) or background without also specifying the other.

  3. Another complaint is: "Absolute length units should not generally be used on the Web, since the physical properties of the output medium are almost always unknown." This is about our use of inches to specify margins and padding. The problem is that this could make our page look very ugly in a small web browser window, e.g. on a cell phone. To fix this, let's replace 0.25in with 2.5%, 0.5in with 5%, 0.75in with 7.5%, 1.0in with 10%, and so on, where the percentages mean percentage of the width.

There also exist HTML validators as well as CSS validators. However, before you can use an HTML validator, there are some other topics you'll need to learn about first, which we will discuss later in the semester.


To all information for Week 7  |  To all tutorials about HTML

D. Nixon: CS 12 > Tutorials > HTML