HTML

HTML

Web documents are written in HTML, Hyper Text Mark up Language. Hyper text is a computer based documentation system that allows the reader to "jump" to related documents by "activating" special parts of a document. HTML is one particular implementation of hyper text, there many others; for instance, the Microsoft Word (and Excel) help systems.

A mark up language is a method of describing a document's final appearance when printed (or viewed on a screen). HTML is simple (ASCII) text, with tags which describe the formatting.

Formatting Tags

An HTML tag is a "less than" symbol (<) followed by the name of the tag and closed by a "greater than" (>) symbol. Tags are usually in pairs, with the ending tag starting with a slash ("/") after the '<'; for example: <TITLE> ... </TITLE>.

The first <TITLE> tells the browser that the text following the tag is the title for the document which appears in the title bar at the top of the document window. (By the way, this makes the <TITLE> tag somewhat unusual in that it affects something other than in the HTML document.) The </TITLE> tells the browser that the text for the title is finished.

To start and end (first and last lines) an HTML document, you should always use <HTML> and </HTML> tags. You could probably omit the <HTML> tags and still have a document that displays, but it is good form to include them as "brackets" for your document--it is an easy way to check that neither the beginning or end of your document is missing.

A notable exception to the "pair of tags" rule is the <BR> (line break) which causes the text following it to start on the next line. There is no </BR>. Also, the "horizontal rule" (a horizontal line): <HR> does not have a close </HR>.

Another tag, <P> (start of paragraph) tag can often be used without the closing </P>. The </P> is unnecessary because the next <P> signals the HTML viewer (browser, like Netscape) that the previous paragraph is finished, and to start a new paragraph. <P>is like <BR> in that the text following it starts on a new line, but, unlike <BR>, there will be some vertical white space between the new line and the previous one. The blank vertical space after this paragraph is caused by a <P> in the HTML for this page.

When you look at the source of an HTML document with an application like , then you can see all the HTML command tags, in addition to the normal text. When you look at the same document with a HTML browser like Netscape, you don't see the tags themselves, only the formatting effect they cause (like bold or italic text).

In general, the appearance of the document in or SimpleText and what you see viewing it in a browser like Netscape or Internet Explorer will be very different. The HTML browser ignores so called white space, i.e., your spaces at the beginning of lines, multiple spaces between words, and where the lines end are all ignored. Instead the browser moves the words around until they fit into the current width of the current window. All the text will appear as one single "paragraph" unless you employ tags (e.g., <P> or <BR>) to tell the browser where the formatting should change.

The Format of the Tags Themselves

HTML tags are case insensitive. That is, <TITLE> is the same as <title> is the same as <tITLe>. We use all upper case tag names as it helps the tags to stand out from the document text.

For the assignments, we ask that you use UPPERCASE for all tag names and tag attributes.

HTML is also context free. Which is a fancy way of saying that: 

	<TITLE> Little Red Riding </TITLE>
is the same as 
	<TITLE>
	Little Red Riding
	</TITLE>
is the same as 
	<TITLE>
	Little Red Riding </TITLE>
is the same as 
	<TITLE> Little Red Riding
	</TITLE>
I hope you would agree that the last 2 aren't very aesthetically pleasing, and probably shouldn't be used for that reason alone.

We recommend that you develop your own style of entering your tags. You might wish to always put each tag on a separate line so it will stand out, or indent related materials, like rows in a table, or items in a list.

In fact, we encourage you to create your HTML with as much visual structure as possible to make it as easy for humans to read as possible. So use indenting and blank lines to break things up and show how the elements on your page relate to each other. Remember, the browser completely ignores your indenting and blank lines! That's why you can (and should) structure your HTML--it doesn't change the way the browser displays the page at all!

The table below contains some of the basic tags you will need to know in order to create your web pages for the assignments. There is a more exhaustive list of tags at: http://werbach.com/barebones/barebone.html.

Basic HTML Tags

Tags Meaning
<HTML> ... </HTML> Begin and end an HTML document
<TITLE> ... </TITLE> Document title; the title that shows up in the title bar of the browser window, not on the web page itself. For a "title" on your web page, use one of the <Hx> tags.
<BODY>
...
</BODY> 		Body of a document; this is where your "message" goes. There should be only one <BODY> ... </BODY> pair on your web page!
<BODY BGCOLOR="#XXXXXX">
...
</BODY> 		This is another example of a BODY tag, this time with a background color defined via the BGCOLOR tag attribute and using the RGB Hex notation. Note that even though the opening <BODY> tag has an attribute, you don't use any attributes in the </BODY> closing tag.
<BODY BGCOLOR="#XXXXXX" TEXT="#YYYYYY">
...
</BODY> 		This is another example of a BODY tag, this time with both a background color attribute and different text color attribute. This will change the color of all of the text (including <Hx> headings) on your page. Again the colors use the RGB Hex notation.
 
Bold, Italic, and Spacing
<B> ... </B> Bold text
<I> ... </I> Italic text
<U> ... </U> underline some text (You won't use this in any of the assignments).
<CENTER> ... </CENTER> Center text and images
<BR> Break. End the current line; the next line of text starts beneath this one. There is no </BR>
<P> Paragraph separator; like <BR> but adds a blank line; </P> is not usually needed.
<HR> Horizontal rule (line); put a horizontal line across the page; there is no </HR>


Section Headings

Tags Meaning
<H1> ... </H1>

Largest heading (<H1>)

Headings come in different sizes, but are always bold. There is some vertical space (ala <P>) following the closing </Hn> tag. Use the <CENTER> tag if you want your heading centered.
<H2> ... </H2>
<H3> ... </H3>
<H4> ... </H4>
<H5> ... </H5>
<H6> ... </H6>

Next largest heading (<H2>)

through
Smallest heading (<H6>)

Font Color and Size Changes

Tags Meaning
<FONT SIZE=N COLOR="#HHHHHH" > Text to be changed </FONT>
Change the size of the font, and/or the color. The size is an absolute size between 1 and 7, with 7 the largest. You can also specify a relative size like SIZE=+2 or SIZE=-1, which adds or subtracts appropriately from the current font size. (If the computed size is less than 1, SIZE=1 is used; similarly, if the computed size is greater than 7, SIZE=7 is used.)

The color is represented in the "#HHHHHH" via the RGB Hex notation, as in the <BODY> tag.

Use <BODY TEXT=> to change all of the text color on your page. Use <FONT COLOR=> to change the color of a paragraph, a word, or even a single letter!

Nesting or Embedding Tags

Tags can be nested. That is, suppose you want a word that is both bold and italic: like this. The proper way to do this is: 
  <B><I>like this</I></B>
or
  <I><B>like this</B></I>
Note the order of the </closing> tags </I> and </B>. They should appear in the opposite order as the <starting> tags <I> and <B>. Think of the first set of tags as being a container holding the "like this", and then you put that inside yet another container.

Do not do this: 

  <B><I>Not like this</B></I>
It may work, but is not good form. And it will get you into trouble with some nestings of tags!

Here is another example 

  <CENTER><H2>Chapter 3</H2></CENTER>
or
  <H2><CENTER>Chapter 3</CENTER></H2>
But definitely not: 
  <CENTER><H2>Chapter 3</CENTER></H2>

Stacking Tags

As well as having one set of tags nested inside another set, you can also have sets of tags back to back, or "stacked". Be careful in doing so because stacking like (similar tags) may introduce vertical white space that you didn't intend! For instance, 
  <H4>Chapter 3</H4>
  <H4>The Rat</H4>
looks like:

Chapter 3

The Rat

while 
  <H4>Chapter 3 <BR> The Rat</H4>
looks like:

Chapter 3
The Rat

Tags for Creating Lists and Tables

Lists

Tags Meaning Looks like
Not in the list
<UL>
<LI> Item 1
<LI> Item 2
</UL>
Not in the list 		Create an unordered list; each list item is marked with a <LI>; each list item will appear on a new line marked with a bullet (solid circle character). Note: it's <Li> El-eye, note El-one! Not in the list
  • Item 1
  • Item 2
Not in the list
Not in the List
<OL>
<LI> Item 1
<LI> Item 2
</OL>
Not in the list 		Create an ordered list; each list item is marked with a <LI>; each list item will appear on a new line marked with a number

The <OL> tag can take a TYPE attribute which will change the list from numbered to: a, A, I, i; E.g., <OL TYPE=a>.

Not in the list
  1. Item 1
  2. Item 2
Not in the list
<DL>
<DT> Word 1
<DD> Definition 1
<DT> Word 2
<DD> Definition 2
</DL> 		Create a definition list; each list item is marked with a <DT>, followed by a <DD> which preceeds the definition for the word or phrase marked with the <DT> tag. The text of the <DD> definition is indented to the right slightly
Word 1
Definition 1
Word 2
Definition 2

Tables

Tables are more complex HTML objects as they require additional tags to show where the rows and columns start and end. In addition to their obvious uses, tables (with or without borders) can be a useful way to organize your page, for instance, a multicolumn format. Here are some notes about tables: Here is a sample table. Note that we have not bothered to use </TD> or </TR> because this is a pretty simple table. 
	<TABLE BORDER>
	<TR> <TH COLSPAN=3> Made Up Stats
	<TR> <TH> Animal <TH> Fleas <TH> Pounds
	<TR> <TD> Rat <TD> 3.5 <TD> .25
	<TR> <TD> Elephant <TD> 1.5 <TD> 3,500
	</TABLE>

which would produce the following table:

We've spoken about providing a visual structure to your HTML, to help you see where "objects" are within the HTML (and to help us grade your work. smile) A table is a great place to use some structure, perhaps like: 
	<TABLE BORDER>
	<TR>
           <TH COLSPAN=3> Made Up Stats
	<TR>
           <TH> Animal
           <TH> Fleas
           <TH> Pounds
	<TR>
           <TD> Rat
           <TD> 3.5
           <TD> .25
	<TR>
           <TD> Elephant
           <TD> 1.5
           <TD> 3,500
	</TABLE>

Tables without borders are very handy for organizing multicolumn documents and side-by-side displays. This is true for document preparations other than HTML as well. In HTML, you can embed a table within a table; i.e., you can have a cell in a table be a whole table. In the example below, we have left the border on the outer table to show you the embedding. To get a 2 column look, you would leave out the border.

Creating Hyperlinks

The power of the Web and HTML documents is the ability to easily create links to other documents. The format for a simple link to another document is: 
	<A HREF="URL"> Some Text </A>
This creates a hyperlink to the URL. The quote marks (") are required. The words "Some Text" normally underlined and are what the document reader sees and clicks on to open the new document referenced by the URL.

The URL might be an absolute one, like: 

http://icogsci1.ucsd.edu/~cg3x/schedule.html
For example: 
	<A HREF="http://icogsci1.ucsd.edu/~cg3x/schedule.html">
	     Cogsci 3 Schedule</A>
The URL for the link is in quotes ("), and we show it here in red to help make it clear. The text after > and before the closing </A> is what appears as the underlined text in the document; that is, the text that the person reading the document can click on. You don't have to use <U> tags to get the underlining; the HREF attribute of the <A> tag puts it in for you. Remember that HTML is context free, so we can split the hyper link across lines (which we did here for clarity).

This example is an absolute link because it contains the server name (http://icogsci1.ucsd.edu) as well as the document name (schedule.html).

It is also possible to use relative links with just the document name (schedule.html), if the document is on the same server and in the directory as the referring document. E.g., 

	<A HREF="schedule.html">Cogsci 3 Schedule</A>
This is an example of a relative reference to the same document (if located on the same server and in the same directory as the referring document). Relative references are preferred because it makes it much easier to move documents around.

You can also refer to documents in a sub-folder of the current folder; e.g., images/face.gif. Or even use the UNIX-like ".." notation to refer to the folder holding the current folder; for example, ../images/face.gif.

Linking Within Documents

You can use the NAME attribute of the <A> tag to create a hyperlink target or a document fragment. 
	<A NAME="SomeName"> Text </A>
This creates an "anchor" called SomeName within your document that can be referred to by: 
	<A HREF="#SomeName">Some Text</A>.
The hash mark '#' is used to specify the fragment name.

A URL can be used in the reference to refer to a fragment in an another document. 

	<A HREF="URL#SomeName">Some Text</A>.

By using HREF links to fragments in your document, you could create a table of contents (perhaps with <UL> ... </UL>) that link down to the corresponding <A NAME="..."> tags that mark the start of each particular fragment.

Some Advanced Ideas

Quoting

You should be wondering how it is possible to have HTML tags like: <H1> show up in the text of the document. Why aren't those tags being interpreted as formatting commands?

The reason is that we have typed in those tags in a different way; instead of <, we used "&lt;", which is a special way of encoding (representing) ASCII characters. Similarly, > is written as "&gt;". These are called character entities. By using the character entity "&lt;" instead of the literal character < the browser does not think that a HTML tag is starting.

A character entity is introduced by the ampersand ("&") and terminated with a semicolon (";"). If you use the entity name, e.g., "lt", it must be in lower case. You can also use a numeric code following a '#'. For instance, "&#60;" also prints as "<", and "&#62;" prints as ">".

This is the notion of quoting. Sometimes when dealing with computer input (or output), we want the special meaning of a character (like < -- start a tag), and sometimes we just want the printed representation of it (&lt;).

You may have guessed that & introduces (starts) a character entity. The question then arises (again), how is it that a & can appear in our text and not be interpretted as the start of a character entity? It's because we are using the entity for &, "&amp;".smile

Indenting

At some point you will probably want to indent some of your document (to the right). The <p> tag provides for block style paragraphs, where the first line is not indented. The standard kludge (messy or poor trick) is to use one of the list formats, but without list elements.

For example: <UL>Please indent this</UL> should display like:

A different look can be achieved with the definition list; the <DD> items are indented with respect to the <DT> ones. For instance:

yields
This line will not be indented

You can embed these "lists" inside of each other to achieve a higher level of indentation. Another kludge is to use the nonbreaking space character entity: "&nbsp;". Normally, the browser is free to break a line (start a new line) where ever there is a space character. However, there are occasions when you want two (or more words) to appear as a single unit and not be split across lines; this is where you would use &nbsp; instead of a simple space " " between the words. For instance: The&nbsp;cat&nbsp;in&nbsp;the&nbsp;hat

It should be obvious that you could also use one or more nonbreaking spaces to imitate indentation. For example:

&nbsp;&nbsp;&nbsp;&nbsp;This should be indented a bit

displays as:

    This should be indented a bit

Probably it's better to use one of the list approaches.

Finally, if you have text that is already formatted using TABS and a fixed width font like Courier, you can use the <pre> ... </pre> tags. All the spacing and alignment will be preserved, however, it will be displayed in an ugly fixed width font.

Errors and Debugging

If you have missing or broken tags, your document will look strange. When you are trying to debug (correct) your HTML, the error probably occurs just before portion of your document that looks wrong.

Some errors (see below) can make some or "the rest" of your document disappear (when viewed with Netscape). Different browsers (e.g., Netscape vs Internet Explorer) behave differently when they encounter incorrect HTML. Even different versions of the same browser (Netscape) may display your document differently if there are HTML errors in it.

First, consider how the Web browser software "paints" the document on the screen. If you've ever viewed a long text document (like the class assignments smile), then you probably realize that the browser starts with the top of the document and proceeds down to the end/bottom of the document. In other words, the lines in the beginning of your HTML file will appear near the top of the window; lines near the bottom of your file will appear near the bottom of the window. This means that errors in your HTML code will affect the document below the error, but not above the error.

Images

Begin As well as HTML tags and straight text, web documents can include images. There are literally dozens of formats for computerized images! That is, the internal structure of an image is very different depending on the image format, including how many bits per pixel, the kind of compression, etc.

Browsers can deal directly with a limited number of image formats. That is, only the 3 formats below can show up right in your document.

For other formats a helper application may be employed, if available. That is, a separate application program will be launched to deal with the special image format. For instance, Adobe Acrobat Reader will start up when you view a .pdf (Portable Document Format) document.

There is image conversion software available (e.g., GraphicConverter on the Macintosh (shareware), HiJack on the PC (commercial product), imconv (image convert) under UNIX. These software programs will convert other graphic formats (tiff, pict, bmp) to gif, png, or jpeg that you can include in your own document. End

To include a GIF or JPEG, use the following IMG tag. 

	<IMG SRC="wipeout.small.jpg">
to include the image wipeout.gif directly into your document. The text in quotes (and red) is, of course, a URL to the image. Here we have used a relative URL, but it could as easily be an absolute one. The IMG tag above will icorporate the image below right into your document, at the point you insert the <IMG SRC"..">.

Oops!

If you make a mistake with an <IMG SRC=""> specification, you may see a broken image icon like the one below instead of what you intended.

Unfortunately, this is more than a bit ambiguous as it might mean:

Image Previews (Thumbnails)

You can also point to the image with a Hyperlink. 
	<A HREF="wipeout.jpg">A wipeout!</A>
The reader clicks on the link as usual, but gets an image rather than an HTML document. This may be useful when the image is large and would take a relatively long time to load.

You can even make an image the clickable part of a hyperlink! The reader clicks on that image instead of text to bring up another document or image. The image that you click on will have a blue (by default) border to remind the reader that it is a hyperlink. For instance, 

	<A HREF="wipeout.jpg"><IMG SRC="wipeout.small.jpg"></A>
gives you the smaller picture below that you can click on to get the full screen one, like the example below.

Begin If you do use the an image as the URL target of an HREF, be aware that when your reader clicks on the associated hyper text (or image), a new page, with only the image will appear. No text, no title (the title in the browser window will be the name of the image), no links to go back to the original document. So instead of using the image, you might want to create a new short page something like the following:

End

WIDTH and HEIGHT attributes

In the example above, two different sized images were used: wipeout.jpg and the smaller wipeout.small.jpg. The small one was created using image handling software (GraphicConverter on the Macintosh, in this case) by scaling (changing its size) the original and then saving it. Another way of accomplishing this is to use the WIDTH and HEIGHT attributes with the IMG tag. For instance, using a modified version of the preceeding example: 
	<A HREF="wipeout.jpg"><IMG SRC="wipeout.jpg" WIDTH=100 HEIGHT=200></A>
gives the following image, where the browser has scaled the image for us.

What are those numbers: 100, 200? They are pixels (picture elements); the little dots on your screen! WIDTH=100 means the image will be 100 of those little dots wide. Notice several things:

  1. Not all monitors have the same display resolution, which means there are not the same number of pixels per inch on different monitors.
  2. The new image above is not the same proportion as the original. Probably, this is wrong. Normally, it should have the same aspect ratio (proportions) unless you were trying for some (weird) visual affect. You want to select the about the same reduction (or enlargement!) for both horizontal and vertical dimensions.
  3. The browser will still have to load the whole image, even if you have specified a smaller size to display, so it won't load any faster. If your goal is a quicker loading image, use your image processing software to create a second, smaller copy, as in the previous example.
How do you know how many pixels to specify? You could open the image in your image processing software which should tell you the width and height in pixels; then use the software to scale the image as you wish, and note the new height and width values.

Or maybe your browser will tell you, Netscape does when you look at the View->PageInfo and then click on an image. (How you you tell which are images? They have the .jgp or .gif extension)

Or you can specify a percentage of the page width for the image with the following attribute: WIDTH="pp%", where the pp% is something like 50% or 75% to mean 1/2 or 3/4 the page width. If you then omit the HEIGHT= attribute, the browser will scale the image proportionately keeping the correct aspect ratio.

Image Maps

Now you know how to make an image into a hyperlink that your readers can click on. You can also create an image map, which can have several, different hyperlinks within it. The image itself would contain pictures of buttons, or words, or some other visual cue that they should be clicked on.

The image map consists of 2 parts, the image itself (as usual) and then the map which is a description of the clickable regions within the image. There are 2 ways of creating the maps, the server-side map and client-side map. We are going to describe the client-side map, since most browsers now support them, and you, as an HTML author, often do not have access to the (web) server.

Start with your IMG tag as usual, but add the USEMAP attribute, which includes the URL for the name. This is very similar to the way the HREF attribute of the <A> tag can link to a document fragment defined with the NAME attribute. Most of the time, the map will be in the same document as the IMG tag, so you can just refer to the fragment URL: USEMAP="#MapName". For instance: 

	<IMG SRC="wipeout.jpg" USEMAP="#SurferMap">

The Map

The map itself consists of a <MAP NAME="..."> and </MAP> pair of tags. They enclose a number of <AREA> tags, which describe a shape (CIRCLE, RECTANGLE, or POLYGON), the coordinates (COORDS) for the shape, and action (HREF) for each spot you want "active" in your image.

The format for the COORDS is dependent on the shape. The values in the COORDS are given in pixels, of course. Again, these values can probably be derived with the help of your image processing software. The coordinate 0,0 is the upper left corner of the image.

If the regions described by AREA tags should overlap, the first one defined takes precedence.

This is probably best explained by way of finishing our example: 

	<MAP NAME="SurferMap">
		<AREA SHAPE=RECT COORDS="160,118,199,167"
			HREF="ouch.html">
		<AREA SHAPE=POLYGON COORDS="197,164,188,211,187,164"
			HREF="ouch.html">
		<AREA SHAPE=POLYGON COORDS="100,95,103,160,127,118"
			HREF="myBoard.html">
		<AREA SHAPE=RECT COORDS="0,0,291,326"
			HREF="water.html">
	</MAP>
(Note, we used the abbreviation "RECT" because the version of Netscape that we tested with did not work with the full word "RECTANGLE".) The first AREA describes the surfer's body as a rough rectangle, while the second AREA is a triangle (POLYGON) for his downward stretched arm. The third AREA is a triangle overlaying his surfboard. The final one is a rectangle describing the whole image surface-- remember, the regions can overlay each other--in case the reader clicks outside the regions we intend.

Move the mouse over the image map below and watch the status bar at the bottom of your browser window. As the mouse moves over the surfer's body or his board you should see the status bar change. If you have Javascript enabled, you will see a message from the surfer, otherwise you will see the URL associated with the HREFs ("ouch.html" or "myBoard.html") from the example above.

Copy an Image from the Net

To copy an image from a Netscape page,
  1. Click on the image and hold the mouse button down. (In Windows 95, you use the right mouse button.)
  2. A menu will appear.
  3. You can selectively either Save As (save a copy of the image to your hard disk or Appleshare server disk) or Copy which will copy the image to the clipboard so you can paste it (presumably to a graphics program).
  4. Then move or copy the image to your public_html directory. Or perhaps FTP it (be sure to specify a binary mode transfer).
  5. Once the image is in your public_html directory, set the correct access permissions for it.
  6. Finally, use <IMG SRC="imageFileName.gif"> to reference it in one of your HTML documents.

What's in a Name?

You may have noticed that in our <IMG SRC=""> tags and <A HREF=""> Hyper Text links we have always referenced files called image.gif (or image.jpg) or file.html. Netscape and other browsers depend on the file name extension to help them determine what sort of object they are loading. And thus, how to display it. (The extension is the 3 or 4 character part of the file name following the "." (dot).)

To get the results you want, you need to make sure your file names follow the conventions. Using the correct file name extension is important.

In addition to the .gif, .jpg, and .html we have mentioned Netscape has a large table of the extension names and how to deal with each type, perhaps launching a helper application. Look in the Options menu under Preferences or General Preferences and Helpers.

Background Color

By default, the background of an HTML document on a Macintosh browswer is (a drab) gray, while PC's seem to have a white. You can add color to your document by adding a background wall paper like image, or a solid background color. Colors are probably preferred because they cause the page to load rapidly because nothing has to to be downloaded as with a background image.

The color each person actually sees will depend somewhat on the abilities of the monitor and graphics card each person has .

People also may be limited by their own ability to perceive color-- sometimes called color blindness. Strategies to deal with sight-impaired or color blind people are given at: http://www.lighthouse.org/color_contrast.htm, while other issues revolving around the use of colors are discussed at http://www.iarchitect.com/color.htm

The color is specified via a modified <BODY> tag: 

	<BODY BGCOLOR="HEX NUMBER">
The HEX NUMBER is a binary representation of the 3 bytes of RGB (red, green, blue) information that make up the color you see printed to the screen.

Font Color

The <BODY> tag can also specify the font color as well as the background. 
	<BODY BGCOLOR="HEX NUMBER" TEXT="HEX NUMBER 2">
Like the background color, the font color is specified in a hexadecimal RGB value; the hexadecimal value should be proceeded by a '#' (hash or number) sign. We provide a Javascript form (http://icogsci1.ucsd.edu/~cg3x/cg3.font.color.html) that will let you experiment with changing both the background and font (text) colors. You will need to enable Javascript in your browser in order to use the Javascript page.

What is Hex?

Instead of being based on the decimal system (base 10), where each digit is a number from 0 through 9 (i.e. 10 values), hexadecimal is base 16. Each digit can have 16 values; the first 10, 0 through 9, are as you expect. The next digit would correspond to the value 10, after that 11, and so on through 15. (0 through 15 is really 16 values). Hexadecimal notation uses letters to refer to the digit values greater than 9.

Decimal Hexadecimal
1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8
9 9
10 a
11 b
12 c
13 d
14 e
15 f
16 10
17 11
255 ff
256 100
1023 3ff
1024 400
1025 401
4096 1000

Also note that 16 (in decimal ) is 2 raised to the 4th power; 

	2 * 2 * 2 * 2 == 16
That is, 16 is a nice even power of 2 (just like 100 or 1000 are powers of 10). 2 raised to the 4th power is the number held in a 4 bit binary number.

A hex digit can hold the same range of values as 4 bits. Two hex digits are 8 bits. So 2 hex digits fit nicely (exactly) into a byte.

So each pair of hex digits in the color representation is a byte. There is a byte of red color information, green color information, and blue color information. The larger the value, the greater the intensity that color component will be. The resulting color is the mix of the amounts of Red, Green, and Blue light intensities that reach the retina in your eye.

There are 3 bytes; each byte is 8 bits. 3 times 8 is 24 bits of color information.

Visit http://icogsci1.ucsd.edu/~cg3x/cg3.binary.html to learn more about binary and hexadecimal.

A Quick Note About Color

The RGB color scheme may seem a little strange to you, when compared to the red, yellow, blue color scheme that you use with paints and pigments. For instance, to create color green paint, you mix yellow and blue paints. With light (on the monitor screen), to get yellow you mix red and green light!

What you see, of course, is the light that goes into your eyes. On the computer, the monitor is producing the light that you see. With paint, the light that gets to your eyes is what is reflected off the painted surface. So if you see something that looks red, that means every color but red has been absorbed by the painted surface. Only red light is reflected into your eyes.

Another example is with black and white. White like is a mixture of all colors of light (RGB on a monitor). With white paint is the absence of color. Black is the opposite; the absence of light but the mixture of all colors of paint.

Backgrounds

Backgrounds are small GIF or JPEG images. The image is tiled repeatedly across the screen until the document width is filled. Backgrounds are added with a modified <BODY> TAG: 
	<BODY BACKGROUND="background.gif">
You can find backgrounds on the net. Use Net Search and look for "background". There is also a small number of backgrounds in http://cogsci.ucsd.edu/~wallen/background/. You can just click on an image to have it display on your computer. Then click and hold the mouse button and do "Save As" as you would with any other image.

If you find a back ground you like, use View Source and look for the <BODY> HTML command. 

	<BODY BACKGROUND="background.gif">
If the URL in the BACKGROUND= attribute is an absolute one, you are all set. Either point to that same URL in your own BACKGROUND= specification, or paste the URL into your browser Location: box, and then SaveAs in the pop up menu (like you did with a standard image).

If the URL is a relative one, you should be able to manually construct the URL for the image that is the background. That is, the URL in the <BODY> tag may be a relative one, and not directly usable in your HTML. Copy the relative URL name from the HTML page, and then paste it at the end of the URL for the page that uses the background. That should give you an absolute URL for the image that is the background you want.

You can then use that URL with the <BODY> tag to point to the background image on the remote system, or

  1. type the URL into Open location in Netscape
  2. view the single small gif,
  3. copy the gif to your Macintosh using the Mouse button pop up menu like any other web image
  4. and finally installing the gif on your server and pointing to it in your <BODY> tag.

Backgrounds have several considerations:

Here is a JPEG that we have used as a background in a sample document. The JPEG is called: sky.jpg. So the <BODY> for the document looks like: 

	<BODY BACKGROUND="sky.jpg">
Click on the image to see it used as a background.

Designing for the Web

DESIGNING FOR THE WORLD WIDE WEB
Because most Web users tend to be North American, many Web designers are oblivious to the subtle cultural connotations that language, colors and design can take on in a foreign setting. Companies wishing to internationalize their sites should be particularly sensitive to language (no colloquialisms, such as using "wicked" to mean "good"), colors (white denotes purity in Western countries, but death in many Asian nations), and the gestures made by models (showing the palms, as in a wave, is considered an insult in some Mediterranean countries). "Color takes on enormously different overtones from one country to the next," says one corporate globalization consultant. "That doesn't mean you can't use those colors. It just means you want to rethink what the visuals look like on your pages and on your links." (CIO Web Business 1 Dec 97)

How do you do ???

If you see something you like on a Web page and want to figure out how to do it, use the View Source (in the Netscape View menu) and then look at the underlying HTML.

Some things will be just new uses of HTML tags you know, some will be new tags. Some will be some programming feature like the Javascript that RGB color page uses, or that Infopath uses. Or programs that run on the server, like the counter that we used in one of the assignments.

Some fancier things require a program be run on the server. Generally, you can't use that feature in your own HTML (unless you own the server. )

Terms to Know

.pdf Embedding mark up language source
absolute link file name extension Nesting Stacking
aspect ratio GIF nonbreaking space structure
byte HTML pixels tag attribute
case insensitive Hyper text PNG tags
case sensitive image map quoting Thumbnails
character entities indent relative links true color
compress JPEG resolution white space
context free lossless Run Length Encoding
debug lossy scaling
WML
©opyright 1995-2004 Mark R. Wallen
Last updated: Sun Sep 19 12:20:19 2004