| How to Submit Solutions for this Homework/Computer Lab | |
|---|---|
| Due Date: | Friday 9-15-06 |
| E-mail To: |  |
| Subject Line: | HWCL 02 |
| 1'st Line: | Your name and student number |
This computer lab is written for Windows 9x/2000/NT/XT based PCs, with a Mozilla/Firefox Browser or an Internet Explorer. Those portions of the lab that are not platform-specific can also be run on a Mac.
The goals of this computer lab are:
A home page on the World-Wide Web (WWW) is a document, typically written in HTML (hyper-text markup language), that is stored as a file on a computer which runs an HTTP (hyper-text transfer protocol) server program or daemon such as HTTPd or Apache and is permanently connected to the Internet and maintained around the clock by some IT (information technology) personnel. The default name of the file that contains the home page is usually index.html, but any other "legal" filename with a htm or html extension can be used. Often the home page is only the initial starting point for a whole collection of documents at a Web site. For instance, the home page of this course has URL http://ece.colorado.edu/~mathys/ecen1200/index.html and, as you know by now, this only displays a first menu from which you can choose to continue with course description, computer labs, etc.
A markup language is designed to specify the logical
organization and formatting of text documents, with extensions to
include other objects, such as in-line images (like this one:
),
hypertext links to other documents and Internet resources (e.g.,
Don't click me!), and embedded objects and
programs. The goal is to have a language that:
This approach takes into account that the viewers of a document may use different browsers (e.g., Mozilla/Firefox or Internet Explorer) and set different preferences (e.g., use the Courier or Helvetica fonts). In some cases a viewer may even convert the document to a different medium, e.g., a blind person may use a browser that reads text aloud instead of dispalying it on a screen.
HTML (hyper-text markup language) is one specific markup language and is currently the one most extensively used for WWW documents. One of the major driving forces behind the creation of HTML was to come up with a standardized way of creating documents, so that as many authors and readers as possible can communicate with each other. The organization which is responsible for developing and maintaining the standards for HTML is W3C (World Wide Web Consortium). The first version(s), now informally called HTML 1.0, appeared in 1990. HTML 2.0 was released in 1995 as IETF RFC 1866 (Internet engineering task force, request for comment 1866). The next major upgrade was HTML 3.2, published in January 1997 as a W3C (WWW Consortium) recommendation. The current version is HTML 4.01, and it was published in December 1999 as a W3C recommendation.
The basic skeleton of a HTML document consists of a head and body section as follows:
<html> <head> <title>Title of Document for Indexing</title> </head> <body> <h2>Heading Inside the Body of the Document</h2> <p>The first paragraph of text in the document. It is up to the browser to decide where to break lines so that they fit in the browser window.</p> <p>The second paragraph of text with a <a href="index.html"> link</a> to the file <tt>index.html</tt>.</p> <hr /> </body> </html>
The head section describes the document to programs such as browsers, search engines and to other HTML documents, and its contents are NOT displayed in the main browser window. Only the body section is rendered in the main browser window. The above HTML skeleton looks as follows in a Mozilla browser:
To make a HTML coded document easier to read and maintain, comments (or "mark-ups") can be included using the following syntax: <-- This is a comment -->. Comments are not shown in the browser window and can contain any characters except for ">" and two or more hyphens ("-") in a row. Here is the basic skeleton of a HTML document with comments added:
<html> <!-- This is a comment --> <head> <title>Title of Document for Indexing</title> <!-- Title is used for indexing. It does NOT show in your actual webpage --> </head> <body> <!-- Only what is inside the body container shows in your browser window --> <h2>Heading Inside the Body of the Document</h2> <p>The first paragraph of text in the document. It is up to the browser to decide where to break lines so that they fit in the browser window.</p> <p>The second paragraph of text with a <a href="index.html"> link</a> to the file <tt>index.html</tt>.</p> <hr /> <!-- Makes horizontal line --> </body> </html>
In essence, a HTML document is a text document interspersed with HTML commands of the form <command>, which are called HTML tags. The characters < ("less than") and > ("greater than") are used to denote the beginning and the end of a tag, respectively. Most HTML statements are of the form
<command>marked-up text string</command> <!-- "command" marks beginning of element --> <!-- "/command" marks end of element -->
This whole string (including the tags at the beginning and at the end) is called a HTML element or container. The <command> tag marks the beginning of the element and the </command> tag marks the end of the element. The "marked-up text string" is said to be contained in the command element. Note that, even though lower-case letters (as recommended for future compatibility with XML and XHTML) are used here in the HTML examples, either capital or lower-case letters, or even a combination of the two, can be used equivalently in HTML and
<CoMmAnD>marked-up text string</CommAND>
is interpreted in the same way as the command element given previously.
Most HTML elements can be nested, i.e., a marked-up text string contained in command1 may have a command2 element as substring, as shown in the following example:
<command1>marked-up <command2>text</command2> string</command1> | | | | | +---------------+ | +-----------------------------------------------------+ <!-- Innermost beginning and end tags must match --> <!-- Second innermost beginning and end tags must match --> <!-- etc -->
Here command1 is applied to the whole "marked-up text string" and, in addition, command2 is applied to "text". But note that the nesting of containers must be done in the correct order, i.e., the innermost beginning and end tags must match, the second innermost beginning and end tags must match, etc. Here is an example where the nesting order is wrong:
<command1>marked-up <command2>text</command1> string</command2> | | | | | +---------------|-----------------+ +-----------------------------------+
In the HTML skeleton given above, the main container is a html element (starting with <html> and ending with </html>), indicating that the whole document is an HTML document. The html element is then further subdivided into a head and a body element. The head element
<head> <title>Title of Document for Indexing</title> </head>
consists only of the title element whose text string is "Title of Document for Indexing". This string is used for indexing documents, e.g., by search engines. It also appears as a label in the top bar of the browser window (see the figure above), but it does not appear as part of the main document body itself.
The body element
<body> <h2>Heading Inside the Body of the Document</h2> <p>The first paragraph of text in the document. It is up to the browser to decide where to break lines so that they fit in the browser window.</p> <p>The second paragraph of text with a <a href="index.html"> link</a> to the file <tt>index.html</tt>.</p> <hr /> </body>
contains the part of the document that is actually displayed inside the browser window. It starts with an h2 (heading of size 2) element, then has a first p (paragraph) element, and a second p element, which itself contains a a (anchor: hyperlink to another document) element and a tt (teletype font: monospaced font) element. Note that the a element has an attribute, namely href="index.html", which appears in the beginning a tag and specifies the URL (which in this example is just a file name) to which the hyperlink refers. Finally, there is a hr (horizontal rule) element. But note that there is no </hr> tag, because there is no need to contain a string in the hr element (or to apply the hr command to a string). Such elements, which consist only of the beginning tag and have no end tag, are called empty elements.
Comment: You may wonder why a <hr /> tag was used in the above HTML skeleton instead of simply <hr> . This was was done for future compatibility with XML (extensible markup language) and XHTML (extensible HTML) which use a more strict syntax interpretation and require that there is a beginning and end tag for all elements, including empty elements.
It is not necessary in HTML to start a new element on a new line, or to use indentation for nested elements, as was donde in the above examples for clarity. In principle, a whole HTML document could be written on a single line or, at the other extreme, each word or tag could use its own line, without affecting the browser display.
Heading, Paragraph, and Horizontal Rule Tags. These tags serve to structure the document by including headings, subheadings and dividing it up into paragraphs and draw horizontal rules where necessary. The following table shows how to use these tags.
| HTML Element(s) | Resulting Display |
|---|---|
| <h2>Heading Size 2</h2> | Heading Size 2 |
|
<hn>Heading
Size n</hn> (n = 1..6) |
Heading Size n(n = 1..6, where 1 is biggest) |
| <p>This is the first paragraph that we write for this document. </p> <p>And now we write a second paragraph to make the document easier to read. </p> |
This is the first paragraph that we write for this document. And now we write a second paragraph to make the document easier to read. |
|
Text above line<hr />and text below line |
Text above line and text below line |
Presentation Markup Tags. These are tags which allow direct control over some text renderings, such as bold face, italics, monospaced (teletype) font, font color, font size, and preformatted text.
Note: Many of the presentation markup tags have been declared deprecated in HTML 4. Wherever possible, HTML should only be used to specify the structure of a document and its visual presentation should be controlled by CSS (cascading style sheets).
The following table shows examples of presentation tags that are not deprecated.
| HTML Element(s) | Resulting Display |
|---|---|
| This is <b>bold</b> face. | This is bold face. |
| Here we have <i>italics</i>. | Here we have italics. |
| How about
<b>bold and <i>italic</i></b>? |
How about bold and italic? |
|
<tt>TeleType</tt> is used to display text with a <tt>monospaced</tt> font. |
TeleType is used to display text with a monospaced font. |
| We can also write <big>big</big>, or <small>small</small>. |
We can also write big or small. |
ASCII Art using preformatted text <pre> ___ ('v') (( )) --"---"-- </pre> Note that the pre element implies monospaced font. |
ASCII Art using preformatted text
___
('v')
(( ))
--"---"--
Note that the pre element
implies monospaced font.
|
The following table shows examples of presentation tags that are deprecated.
| Deprecated HTML Examples (Use CSS Instead) | |
|---|---|
| HTML Element(s) | Resulting Display |
|
Fonts can be colored, e.g., in <font color="red">red</font>, <font color="green">green</font>, or <font color="blue">blue</font>. |
Fonts can be colored, e.g., in red, green, or blue. |
| We can also write <font size="+2">big</font>, or <font size="-2">small</font>. |
We can also write big or small. |
| Here comes <font size="+2" color="fuchsia"> big fuchsia</font>. |
Here comes big fuchsia. |
Here's a Basic Color Table if you would like to look up some of the color names that can be used.
Anchor Tag. Anchors for hypertext links to other electronic documents that are accessible through the Internet can be inserted (almost) anywhere in an HTML document. The following table shows how to use the anchor element.
| HTML Element(s) | Resulting Display |
|---|---|
|
<a href="address">linktext</a>, where address can be a file name or a fully qualified URL. |
linktext, where address can be a filename or a fully qualified URL. |
| Search the Web using <a href="http://www.google.com">Google</a>. |
Search the Web using Google. |
List Tags. Bulleted lists are very useful to display results, task lists, choices, summaries, etc. in a concise and clear format. The following table shows how the ul (unordered list) and li (list item) elements are used to make such lists.
| HTML Element(s) | Resulting Display |
|---|---|
| <ul> <li>Art</li> <li>Entertainment</li> <li>News</li> </ul> |
|
Numbered lists are just as easy to make, simply replace ul with ol (ordered list), as shown below.
| HTML Element(s) | Resulting Display |
|---|---|
| <ol> <li>Enter PIN</li> <li>Enter amount</li> <li>Take cash</li> </ol> |
|
If you are curious about other HTML elements that are not yet covered here, then check for example "The Bare Bones Guide to HTML" at http://werbach.com/barebones/barebone.html, or "NCSA's Beginner's Guide to HTML" at http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html.
Tim Berners-Lee created the original HTML in 1990 as a collection of tools for the communication and dissemination of research results among high energy physics scientists in different locations and at different institutions. By 1994 the WWW had attracted considerable interest outside the community of scientists and with it came the desire to control the appearance of WWW pages. Presentation elements, such as changing font size, style, and color were soon added to HTML, mostly driven by browser developers to distinguish and promote their products. To improve the capabilities of webpage design while maintaining the original idea of marking up the logical structure of documents, cascading style sheets (CSS) were introduced. The main idea is that anything that has to do with the logical document structure (e.g., having sections, subsections, quotes, links, etc) is specified by HTML elements and anything that has to do with presentation and appearance (e.g., the font used, colors, backgrounds, placement of text and images, two-column formatting, etc.) is specified by CSS. Under CSS the style of a document can be influenced by multiple style sheets. One style sheet can inherit or "cascade" basic styles from another style sheet which explains the "C" in CSS.
Style sheets are used to describe how documents are presented on screens, printers, and other media. Using style declarations, authors and readers can influence the presentation of structured documents (like HTML pages) without compromising device-independence and logical document structure desciption. Cascading style sheets (CSS) and, in particular, the CSS1 Recommendation that was issued by the W3C in 1996 have been specifically developed to meet the needs of Web designers and users.
The basic mechanism to specify styles is quite straightforward. To set the color of all headings of size 1 to green, for instance, the following simple CSS rule can be used:
h1 { color: green } /* General CSS format is */ /* selector { property: value } */
In general a CSS rule consists of two main parts: a selector ("h1" in the above example), and a declaration ("color: green" in the above example). Note the use of wavy brackets ("{" and "}") to enclose the declaration. Declarations have two parts: property ("color" in the above example) and value ("green" in the above example).
Selectors can be grouped in comma-separated lists, for example:
h1, h2, h3 { color: blue }
sets the color of all headings of size 1, 2, and 3 to blue. Similarly, declarations can be grouped, using semicolons as separators. Here is an example that makes emphasized text ("em" HTML tag) red and bold and adds a yellow background with a padding of 3pt on each side:
em { color: red; font-weight: bold; background-color: yellow; font-style: normal; padding: 3pt; }
Selectors are not restricted to be existing HTML tag names. All elements inside the "BODY" of an HTML document can be classed using the "CLASS" attribute, and style sheets can define as many classes as needed. Here is an example that defines a class redtext to change the font color of selected text to red:
.redtext { color: red }
Note the dot that comes right before the class. This tells the browser that this is a class definition and not a tag definition. Note also that class names are case sensitive (whereas the HTML tags are not).
Containment in HTML. In order for the style definitions to influence the presentation of an HTML document, the browser must be made aware of them. The simplest way to include a style declaration is by using the "STYLE" attribute of a tag inside the BODY of an HTML document, e.g.,
<h1 style="color: green;">A Green Heading of Size 1</h1>
This works fine if only a few headings of size 1 need to be made green. To make a document-wide declaration, it is better to include the style definitions in the header as shown in the following example that will change the font color and the font-style of all headings of size 1, 2, and 3 to blue and italic:
<html> <head> <title>Title for Indexing</title> <style type="text/css"> h1,h2,h3 { color: blue; font-style: italic; } </style> </head> <body> <h1>Blue, Italic Heading, Size 1</h1> <h2>Blue, Italic Heading, Size 2</h2> <h3>Blue, Italic Heading, Size 3</h3> </body> </html>
If a website has many documents and it is desired to achieve a uniform presentation style across all documents, then the best way to define styles is in the form of external style sheets, i.e., in the form of separate files (with filename extension css) which contain the styles. This also makes it easy to change the appearance of all webpages in a single location. Here is an example, called mystyle.css that defines the font-family, text color, background color, and anchor colors of the whole document body and also defines the redtext and hiLite classes:
/* This is a comment */ body { font-family: sans-serif; color: yellow; background: black; } a:link { color: aqua; } /* unvisited links */ a:visited { color: lime; } /* visited links */ a:active { color: green; } /* active links */ .redtext { color: red; } .hiLite { font-weight: bold; background-color: white; }
The example below shows how to include mystyle.css in an HTML document and how to use the style classes.
<html> <head> <title>Title for Indexing</title> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <p>Using <tt>mystyle.css</tt> this text appears yellow over a black background.</p> <p class="redtext">Using class <tt>redtext</tt> this whole paragraph is written in red.</p> <p>Using class <tt>hiLite</tt> in a SPAN container highlights <span class="hiLite">this part</span>.</p> </p> </body> </html>
(To be completed/revised.) See also W3C CSS1 Recommendation.
Font Properties
| Property | Examples |
|---|---|
| font-family | font-family: sans-serif font-family: monospace |
| font-style | font-style: italic font-style: normal |
| font-weight | font-weight: bold font-weight: normal |
| font-size | font-size: 12pt font-size: 150% |
Color and Background Properties
| Property | Examples |
|---|---|
| color | color: red color: #FF0000 |
| background-color | background-color: black background-color: #000 |
Formatting Model
CSS1 uses a simple box-oriented formatting model. Boxes have a core content area with optional surrounding padding, border, and margin areas as shown below.
margin around red box
border
(red
box)
padding around content
content of red box
<------- element width ------->
<------------- red box total width ------------->
The sizes of the margin and padding areas are set with the margin and padding properties. The size, color and style of the border are set with the border properties.
Box Properties
| Property | Examples |
|---|---|
| margin | margin: 5px 2px 3px 1px margin: 2em margin-right: 20px margin-bottom: 2.5em |
| border | border: 1px solid green border: solid border-color: black border-width: 1px 3px border-style: dotted |
| padding | padding: 3px padding: 0.5em 1em padding-top: 1ex padding-left: 5pt |
Definition: Deprecated. A deprecated HTML element or attribute is one that has been outdated by newer constructs. Browsers will generally still support deprecated HTML for backward compatibility, but new HTML documents should avoid the use of tags and/or attributes that have been marked as deprecated.
| Deprecated HTML Examples | |
|---|---|
| HTML Element(s) | Resulting Display |
|
Fonts can be colored, e.g., in <font color="red">red</font>, <font color="green">green</font>, or <font color="blue">blue</font>. |
Fonts can be colored, e.g., in red, green, or blue. |
| We can also write <font size="+2">big</font>, or <font size="-2">small</font>. |
We can also write big or small. |
| Here comes <font size="+2" color="fuchsia"> big fuchsia</font>. |
Here comes big fuchsia. |
| CSS1 Replacements for Deprecated HTML Examples | |
|---|---|
| HTML Element(s) with CSS1 | Resulting Display |
|
Fonts can be colored, e.g., in <span style="color:red;">red</span>, <span style="color:green;">green</span>, or <span style="color:blue;">blue</span>. |
Fonts can be colored, e.g., in red, green, or blue. |
| We can also write <span style="font-size:150%;">big</span>, or <span style="font-size:60%;">small</span>. |
We can also write big or small. |
| Here comes <span style="font-size:150%; color:fuchsia;"> big fuchsia</span>. |
Here comes big fuchsia. |
A simple home page to get started from might look like this:
Here is the HTML file, called index.html that was used for this home page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Simple HTML Home Page</title> </head> <body> <h1>Home Page for Peter Mathys</h1> <p>This page is currently under <b>construction</b>.</p> <hr /> <p>Take a look at the <i><a href="http://www.colorado.edu">University of Colorado</a></i> website.</p> </body> </html>
The first two lines identify the version of HTML in which this document is written. It is not mandatory to include these two lines, but it is recommended as an aid for the browser so that it can render the document correctly.
Starting from Fall 2005, CU Boulder uses a WebFile server from Xythos to provide students with a WWW server for their web pages. The mission of Xythos is provide businesses with a comprehensive content management platform for all their unstructured information needs. Thus, the capabilities of the WebFile server cover a much wider range than just publishing web pages, but the description here will be restricted to using the WebFile server for WWW publishing.
The URL of the WebFile server at CU is http://webfiles.colorado.edu and you should be able to use your CU Login Name and IdentiKey Password when the following login screen appears:
After logging into your WebFiles account you will see a screen similar to this (instead of wfs001 your login name should appear):
Important: Before you upload any web pages, change to the www directory.
As mentioned previously, the WebFiles server is part of a comprehensive document management system for businesses. As such it allows you to have private files, group files which are shared among workgroups, and public files which are accessible to everybody. The www directory has been set up for the purpose of storing web pages, which must be files that can be read by everybody, that are accessible through the WWW.
When you enter the www directory for the first time, it will be empty as shown below.
To upload your home page, upload the file index.html, e.g., the default home page mentioned earlier. Click on the "Upload" icon in the WebFiles screen and follow the prompts as shown next.
The next figure shows what you should see after uploading index.html In particular, look at the "Share" icon of the file.
After uploading a file to your www directory, you have to make sure that file has the right permissions set so that it can be accessed over the WWW. Click on "Share" to review the permissions. You should see a screen similar to the following:
ONLY YOU can access a file with permissions set as shown above!
In order to make your index.html accessible on the WWW, the read (and only the read>) permissions must set for both "Users with Accounts" and "Public".
After changing the permissions, look at the file info (click on the "Info" icon). This will also show you the URL where your home page can be accessed on the WWW. Use another computer to make sure that it can indeed be accessed.
To get started with a index.html file, go to the default home page section.
To edit the file index.html, any plain text editor, such as "Notepad" (click "Start", then "Programs", "Accessories" and "Notepad") can be used (make sure to select "All Files" under "Files of type" when you open an html file). Some browsers, e.g., Mozilla/Firefox, also have HTML editors (make sure you use HTML source so that you see the HTML tags). If you want to edit your existing index.html file on the WebFiles server you need to download it from your WebFiles account (click the "Edit" icon of the file and choose "Save As") first.
After getting started with a default home page, it is up to you to use your fantasy to eperiment and add a personal touch to your home page, using the HTML commands that were introduced in this computer lab. Here is an example:
An this is how it looks in a browser:
Here is another example:
You will later learn how to include images in HTML documents. But even if you use only text files, it is possible to make simple graphics using text symbols together with pre (preformatted) elements in HTML. The next figure shows index5.html as an example of using this technique (called "ASCII art"):
To obtain credit for this homework/computer lab you need to answer the
questions stated below. Send your solution to
.
Rules for the Submission of Homework/Computerlab Solutions
Format: E-mail your solution as a plain text (ASCII) file. Do not use word processor files like Microsoft Word or "rich-text" HTML files.
Corrections: If you need to make corrections after you submitted your solution, resubmit all your answers (not only the ones that changed) since only your last submission of each homework/computer lab will be graded.
Teamwork: Teamwork is fine for the homework/computer labs, but the solutions must be turned in individually. In particular, copy and paste of entire solutions from other students is not acceptable.
Questions:
©1996-2006, P. Mathys. Last revised: 9-12-06, PM.
