University of South Carolina Arnold School of Public Health Dept. of Health Service Policy and Management Courses and Curricula HSPM J716

Learning objectives for this session:

1. You will be able to explain:
• what a markup language is,
• the basic design principles of HTML, and
• what HTML is used for, now and potentially.
2. You will demonstrate your understanding of these principles and uses by composing a web page with HTML.

Markup language

The ML in HTML stands for markup language. A markup language is plain text with tags, where the tags themselves are in plain text. The first part of this document explains what this definition means.

Markup languages are based on plain ASCII text, so we discuss that first.

Plain ASCII text

For computers, plain text means ASCII text. ASCII stands for the American Standard Code for Information Interchange.

ASCII is a way of assigning letters, numerals, and punctuation marks to numbers that computers can store and transmit. You can think of ASCII as the modern successor to Morse code, evolving from when teletype machines replaced the telegraph.

Teletype machines, computers, and all other digital electonic devices, transmit data through a wire by having the voltage switch between two values. One voltage represents 0. The other voltage represents 1. A number that can take on the value 0 or 1 is a binary digit, or "bit" for short.

The designers of ASCII's predecessors wanted to represent with binary digits all the characters of the English alphabet, in upper case and lower case, plus the numerals 0 through 9, plus punctuation marks. The designers decided that every character should have the same number of bits. That way, the receiving machine could read the incoming data in fixed-sized bites, called "bytes." This is in constrast to Morse telegraph code, which has different numbers of dots and dashes for different letters. ASCII messages have more electronic pulses than the same messages in Morse code would have, but transmitting and receiving fixed-length bytes is more reliable, which allows a more rapid information flow.

Given that you want a fixed-size group (byte) of binary digits (bits) to represent every possible character, how big should the group be? One bit can take on two values (0 or 1), and so represent two characters. Two bits can take on four values (00, 01, 10, 11), and so represent four characters. Three bits give you eight possible values (000, 001, 010, 011, 100, 101, 110, 111), and so represent eight characters. In general, n bits can represent 2-to-the-nth-power characters. For example, 6 bits can represent up to 64 characters, because 64 is 2-to-the-6th-power.

Twenty-six upper case letters, 26 lower case letters, 10 numerals, plus assorted punctuation marks and symbols, adds up to more than 64 characters, so ASCII's predecessors' designers decided to use 7 bits. Seven bits gave them room for 128 possible characters.

The designers added an 8th bit for error checking during data transmission. The 8th bit, called the parity bit, was set equal to 1 if there were an odd number of 1's in the other 7 bits, and was set equal to 0 if there were an even number of 1's. For example, 0011000 would have a 0 added to the front, because it has an even number of 1's. It would be transmitted as 00011000. If noise in the transmission line changes the voltages, the receiving machine will notice that some parity bits are wrong and request a retransmission. Thus was born the 8-bit byte, which has become standard in the computer industry.

Printable ASCII Character List

 Binary Decimal Character
 0100000 32 
 0100001 33 !
 0100010 34 "
 0100011 35 #
 0100100 36 $
 0100101 37 %
 0100110 38 &
 0100111 39 '
 0101000 40 (
 0101001 41 )
 0101010 42 *
 0101011 43 +
 0101100 44 ,
 0101101 45 -
 0101110 46 .
 0101111 47 /
 0110000 48 0
 0110001 49 1
 0110010 50 2
 0110011 51 3
 0110100 52 4
 0110101 53 5
 0110110 54 6
 0110111 55 7
 0111000 56 8
 0111001 57 9
 0111010 58 :
 0111011 59 ;
 0111100 60 <
 0111101 61 =
 0111110 62 >
 0111111 63 ?
 1000000 64 @
 1000001 65 A
 1000010 66 B
 1000011 67 C
 1000100 68 D
 1000101 69 E
 1000110 70 F
 1000111 71 G
 1001000 72 H
 1001001 73 I
 1001010 74 J
 1001011 75 K
 1001100 76 L
 1001101 77 M
 1001110 78 N
 1001111 79 O
 1010000 80 P
 1010001 81 Q
 1010010 82 R
 1010011 83 S
 1010100 84 T
 1010101 85 U
 1010110 86 V
 1010111 87 W
 1011000 88 X
 1011001 89 Y
 1011010 90 Z
 1011011 91 [
 1011100 92 \
 1011101 93 ]
 1011110 94 ^
 1011111 95 _
 1100000 96 `
 1100001 97 a
 1100010 98 b
 1100011 99 c
 1100100 100 d
 1100101 101 e
 1100110 102 f
 1100111 103 g
 1101000 104 h
 1101001 105 i
 1101010 106 j
 1101011 107 k
 1101100 108 l
 1101101 109 m
 1101110 110 n
 1101111 111 o
 1110000 112 p
 1110001 113 q
 1110010 114 r
 1110011 115 s
 1110100 116 t
 1110101 117 u
 1110110 118 v
 1110111 119 w
 1111000 120 x
 1111001 121 y
 1111010 122 z
 1111011 123 {
 1111100 124 |
 1111101 125 }
 1111110 126 ~
 1111111 127 (special)

To the right is a list showing how ASCII assigns a seven-digit binary number to each printable character.

The list to the right starts with number 32. What happened to numbers 0 through 31? Those numbers, 0000000 through 0011111 in bits, are reserved for special purposes. Teletype machines use these low numbers to do things like tell the print head to move down one line or over to the beginning of the line, or to signify that the message is finished. On computers with television-type displays, these low numbers similarly move the cursor (the position where the next character is supposed to appear) around the screen or start special effects, like bold or underline. Text files, which typically have a name ending in .txt, use some of the low numbers similarly. For example, the character combination 13 and 10 causes a paragraph break, when the text file is viewed or printed using a text editor like Notepad, which comes with Microsoft Windows.

The printable characters start with number 32, which is a blank space. 33 to 47 are punctuation marks and math symbols. 48 to 57 are numerals. More symbols come next, at 58 to 64, so that the capital letters can start at 65, binary number 1000001, for A.

After the capital letters, more symbols pad the list from 91 through 96. Lower case letters start at 97, binary 1100001, for a. Having the upper case and corresponding lower case letters differ by only the 6th bit (counting from the right) makes it easy to program a machine to convert from upper to lower case.

After the lower case letters, at 97 to 122, there are more symbols. The last ASCII number, 127 (binary 1111111), is reserved and not printable.

Today's computers use the 8th bit in the 8-bit byte as part of the information, rather than for parity checking. This opens another 128 possible characters, numbers 128 through 255. These are used for symbols like £, ¥, ©, É, and ç.

For a full ASCII table, including those special symbols, search for ASCII on the internet.

Countries that don't use the Roman alphabet adapt ASCII by mapping numbers to their own alphabets, in ways standardized through the International Standards Organization (ISO). This allows, for example, web pages in Chinese characters.

If a message is sent in one language's mapping and received on a machine with a different mapping, the result is unintelligible. You can see this by visiting Chinese or Japanese web sites. In China or Japan, those web pages appear in locally understandable characters, but in the U.S. you see them as a jumble of Roman characters and symbols (unless you installed the capability to read those languages).

Unicode extends ASCII to all the world's major languages. Unicode uses 16 bits for each character, giving it room for 65536 characters. The first 256 of these are the same as ASCII. The rest are characters for other languages. Search the internet for "Unicode" for a list.

Encoding e-mail attachments

While I am on the subject of ASCII, I can explain "encoding" of files attached to e-mails. Graphics, spreadsheet, and word processing programs create files that typically include all of the possible byte numbers. For example, a graphics file may use a byte of 0 to indicate a black pixel (screen dot). Internet mail, however, uses only printable ASCII characters, in the 32 to 126 range. Thus, picture files files have to be encoded -- translated, character-by-character -- so that they use only the printable ASCII characters. The encoded file is generally longer than the original, because numbers outside the 32-126 range may need two bytes to represent them.

When you attach a graphics file or an executable file to an e-mail, your mail program encodes it. When the recipient downloads the attachment, his or her e-mail program decodes it. Usually, you don't see this process. Sometimes, mail programs mess up. If, in an e-mail, you see many lines of nonsense characters, you are seeing the coded characters for what the sender meant to be an attached file.

What's Good About Basing a Markup Language on ASCII

Actually, ASCII documents on an MS-DOS or Windows machine are slightly different from ASCII documents on a machine with the Mac operating system. Both systems use the same printable characters, but they differ on how they use the non-printing characters that show where lines of text end. MS-DOS text files end each line with a carriage return byte (13) and a line feed byte (10). Mac text files end each line with just a line feed byte. As you'll learn, browsers don't care about this -- they treat end-of-line bytes as if they were spaces -- but text editors on one platform may not display text files created on the other platform properly. They may show all the text on one long line, for example.

Markup Using Tags

The limitation of plain text is that it is just plain text. Plain text has no boldface or font sizes or other effects that regular word processor programs can create. Markup language's answer to that is to embed directives in the text in the form of "tags."

Tags start with the less-than symbol < and end with the greater-than symbol >. When used this way, < and > are called "angle brackets." In between the angle brackets, in the body of the tag, is text that tells what the tag does. Because tags themselves are text, any text editor or word processor that can create ASCII text and read and create tags for a web page.

Now you can understand the definition: A markup language is plain text with tags, where the tags themselves are in plain text.

Hypertext Markup Language (HTML)

For example, the tag <B> turns on boldface. The browser shows all characters after the <B> in boldface. The tag </B> turns boldface off, restoring whatever typeface was before the <B>. For example, this text

I'm so <B>happy</B> to be here!

I'm so happy to be here!

Exactly how your text looks depends on how your browser translates your tags. Firefox, Netscape, Mozilla, Internet Explorer, and Safari show boldface as thicker, darker-looking, letters. There are browsers, Lynx and Charlotte being two, that use text mode and can't show thicker letters. Instead, they use a different text color to highlight the text between the <B> and the </B>. For that reason, web purists prefer to use <strong> and </strong>. It means the same as <b> and </b>, but makes it clearer that the implementation is up to the user's browser.

Other tags for formatting text include:
 

<i>italic</i>	italic
<em>emphasized -- usually displays as italic</em>	emphasized -- usually displays as italic
<h1>Largest heading</h1>	Largest heading
<h2>Second largest heading</h2>	Second largest heading
<h3>Third largest heading<h3>	Third largest heading
<h4>Fourth largest heading<h4>	Fourth largest heading
<h5>Second smallest heading<h5>	Second smallest heading
<h6>Smallest heading<h6>	Smallest heading
<pre>Preformatted text, preserving all spaces  and carriage returns,  and using a monospace type face  in which all characters have the same  width</pre>	preformatted text, preserving all spaces and carriage returns, and using a monospace type face in which all characters have the same width
<p>	(Starts a new paragraph, leaving a blank line between.)
<br>	(A "line break." Starts a new line of text.)

Wrap and Fill

This paragraph, the one you're reading now, has a couple of sentences in it. The paragraph is long enough to take up more than one line (unless you have your browser's print set very small).

Now I've started a second paragraph. Let's look at how this paragraph and the one above might be typed in the source file:

<P>This paragraph, the one you're reading now,
has a couple of sentences in it.         The paragraph is
long enough to take
up more than one line
(unless you have your browser's print set very small).<P>Now I've started
a second paragraph. Let's look at how this paragraph and the
one above might be 
typed in the source file:

The example above shows that <P> tag does not have to be at the beginning of a line in the source.  However. putting that tag at the beginning of a line in the source is a good idea, because it makes the source text easier to read.  The above example is not good style.  It is just to illustrate how your browser follows its own rules for displaying text.

What if you want an extra space? Standard English typing has two spaces after a period and before the capital letter starting the next sentence. However, if you type two spaces in your source document, HTML will collapse them into one. To get two spaces, you need to add this special sequence of characters: &nbsp; . This stands for non-breaking space, which means that it adds a space without creating a line break. For example, this source text:

Only one space shows following this period.  I typed two in the source, but it did no good.

Only one space shows following this period. I typed two in the source, but it did no good.

Compare this source ...

Two spaces do show after this period.  I added the special character sequence.

Two spaces do show after this period.  I added the special character sequence.

Other such special character sequences let you add characters that are not in the ASCII set, like © (&copy;) and ½ (&frac12) , or represent characters that HTML interprets as parts of tags or special character sequences, like & and < (which are &amp; and &lt; in this page's source).

Hypertext

This document is full of links. Here's a link to the University of South Carolina. Here's what this paragraph's source looks like:

<P>This document is full of links. Here's a link to the
<A HREF="http://www.sc.edu">University of South Carolina</A>.
Here's what this paragraph's source looks like:

To get data from a specific page within a site, include the entire URL (uniform resource locator) as it appears in the browser's location box. This document, for example, can be referenced like this:

<A HREF="http://hspm.sph.sc.edu/Courses/J716/Assign14.html">This document</A>,
for example, can be referenced like this:

Graphics

Graphics are referenced with <IMG> tags. For example, here is an image used in the linear programming section of the booklet.
The tag to make this graphic show is:

<IMG SRC="Clickonit.gif" HEIGHT=160 WIDTH=564>

Clickonit.gif is the name of the file that is the picture. This file must be in the same folder as the html file. (You can specify a folder name in the IMG tag. If you do, then the picture file must be in the specified folder on the web server's disk drive.)

You place this tag in your html file, at the place where you want the picture to appear. If you want the picture to appear on a line by itself, put the IMG tag between two <br> tags or between a <p> tag and a <p> tag.

There are two file formats, GIF and JPEG, for graphics files. GIF (Graphics Interchange Format) files, which use the .gif extension, are best for diagrams with text and areas of uniform color. JPEG (Joint Photographic Experts Group) files, which use the .jpg or .jpeg extension, are best for photographs.

The HEIGHT and WIDTH parameters are optional. If you leave them out, the picture will show at its actual size. The HEIGHT and WIDTH parameters, which are in pixels (picture elements, which are individual colored dots on your screen) are useful if you want the picture to show smaller or larger than its actual size. Make sure that the HEIGHT and WIDTH numbers are proportional to the actual height and width of the picture. Otherwise, the picture will look stretched or squashed.

Here are some examples (with an off-white background so you can see the graphics' sizes):

• <IMG SRC="Clickont.gif">

  This is the original size, which is 160 by 564 pixels.
  

• <IMG SRC="Clickonit.gif" HEIGHT=80 WIDTH=282>

  Half height, half width.
  

• <IMG SRC="Clickonit.gif" HEIGHT=160 WIDTH=400> 

  Distorted, because the height and width are not in the original proportion.
  

1. Working with Excel, I got to where this Solver Results dialog box was on the screen.
2. Pressing the Alt+PrintScreen keys copied an image of the dialog box to the Windows clipboard.
3. I opened Paint. It comes with Microsoft Windows. Click Start, then All Programs, then Accessories. When Paint opens, it shows a new blank image.
4. I set the image size to 640 by 480, which gave me some room to add stuff next to the image of the dialog box.
5. Edit | Paste pasted in the picture of the dialog box.
6. Paint's drawing and text tools let me draw the arrow and add the text to the right of the image.
7. I cropped the image. To do this in Paint, click Help and search on the word "Crop." After cropping, I wrote down the width and height in pixels so I could use that information in the IMG tag.
8. I saved the file as a GIF file, with the name Clickont.gif. (Older versions of Paint only save in the .BMP format. For those, you'll need a program that can convert .bmp files to .gif files. Download.com may have some freeware you can use.)
9. I copied Clickonit.gif to the same directory on the server as this file, so the above IMG tag would work.

If you have a huge picture (digital cameras give pictures with sizes like 1536 by 2048) that you want to display at a fraction of its original size, it is best to use Paint or a similar program to save the picture in the smaller size. That reduces the time required for the user's browser to load the picture.

Pictures on the Web

1. Copy the picture. Go to the web page with the picture. Right-click or Control-click on the picture. Choose Save Image on the popup menu. Save, and move the image to the folder that has your html file. Insert an IMG tag into your html file like the one discussed above.
2. Refer to the picture. Right-click or Control-click on the picture. Choose View Image. You should see just the image and not any surrounding text. Copy the internet address from the address bar near the top of the screen window. Paste that internet address into an IMG tag. For example, http://www.sph.sc.edu/news/images/Weis_M.jpg is the internet address of a picture of a student in our class! The tag to show it looks like this:

   <img src="http://www.sph.sc.edu/news/images/Weis_M.jpg" alt="Megan Weis">

   If I insert that tag here, you see this: A drawback to this method is that if the source web page takes the picture away, the picture will not show anymore on your web page either. (The Alt text is what screen readers for the sight-impaired will say about the picture. With some browsers, moving your mouse over the picture or right-clicking displays the Alt text.)

Overall structure of an HTML document

Here is a small HTML document that shows some basic features: You can see how it displays by clicking here.

<html>
<head>
<title>Wow! A Title!</title>
</head>
<body>
<h1>Big heading for my HTML file</h1>
Text in my HTML file.
</body>
</html>

Let's take this document one line at a time.

<html>

<head>

<title>Wow! A Title!</title>

</head>

<body>

<h1>Big heading for my HTML file</h1>

Text in my HTML file.

</body>

</html>

Adding style to an HTML document

Color

You can set the colors for your web page by creating a style for the <body> tag that includes color information. To create the style, go to the <head> section of your web page source. Just before the </head> tag is a good place to put your style section. Type in something like this:

<style>
body { 
     background : #ffffff ;
     color : #000000 ;
}
</style>

This specifies a style for the body of the HTML file. Everything that the viewer sees is between the <body> and </body> tags, so this style will apply to everything that the viewer sees.

In this style,

• "color" is the text color
• "background" is the background color.

How the color numbers work:

Color numbers are six-digit hexidecimal numbers.  (The # in front signifies that these are hexidecimal numbers.)  The first two digits set the red level.  The middle two set the  green level.  The last two set the blue level. 

Hexidecimal numbers are base-16. They go like this:

In hexidecimal numbers, the letters A through F represent the numbers 10 through 15.

Two-digit hexidecimal numbers run from 00 to FF, which is 0 to 255 in decimal numbers. Here are some two-digit base-16 numbers and their base-10 equivalents:

Each two-digit hexidecimal number specifies a color amount. 00 means none of that color.  FF means that the color is fully on.  Thus, #000000 means no red, no green, and no blue.  It displays as black.  #FFFFFF has all the colors fully on, which displays as white.

In-between numbers give you various colors.  A color of #990066 would set the red level to 99, the green level to 00, and the blue level to 66. This would give you a medium red with some dark blue in it, like Gamecock Garnet.

You can set individual words in different colors using a style tag. The last sentence of the above paragraph looks like this in the source:

#990066 gives a dark red with some blue in it, 
like <span style="color : #990066>Gamecock Garnet.</span>

To make sense of the color numbers, keep in mind that we are mixing light here, not pigment, so the higher the number, the lighter it gets. #FF0000 is bright red, for example, because it has the most possible red and no green or blue. #660000 is brownish red, because the red number is lower.

Some full tilt color numbers
The text is shown in the color designated in the right column. The background color designation is across the top.

#FFFFFF	#999999	#000000
White	White	White	#FFFFFF
Red	Red	Red	#FF0000
Yellow	Yellow	Yellow	#FFFF00
Green	Green	Green	#00FF00
Light Blue-Green	Light Blue-Green	Light Blue-Green	#00FFFF
Blue	Blue	Blue	#0000FF
Purple	Purple	Purple	#FF00FF
Black	Black	Black	#000000

Notice that yellow is #FFFF00. When you mix light, Yellow = Red + Green.

Choosing Colors

It's best to have a lot of contrast between your TEXT and your BGCOLOR. You can see in the table above that text disappears if its color is the same as the background.

Browser-safe colors. How colors are rendered depends on the user's browser. Some browsers may ignore your color choices completely. Others may show them differently from how you see them. One reason is called color depth.  HTML's way of coding colors with numbers like FFFFFF means that it can represent 256 shades of red, 256 shades of green, and 256 shades of blue.  Multiply those numbers and you get 16,777,216 as the number of possible different colors.  If the user's computer display is set up for this many colors (also called 24-bit color) then the user will see what you intended, though there will still be variation depending on how the monitor is adjusted.  If the user's video display is set up for only 256 colors, which it is for older computers, it will only display colors properly if their numbers are made up entirely of these pairs: 00, 33, 66, 99, CC, FF. Other colors will be dithered, meaning that they will be simulated by mixing dots of different colors, like old newspaper photos. This can make your text hard to read. For the greatest compatibility, especially if your intended users aren't affluent enough to afford new computers, stick to colors like #00FF00, or #9933CC, etc., and avoid colors like #126344.

More Styles for Color

You can change the colors of specific types of elements in your web page by using styles. For example, you can make all the headings a certain color, by putting something like this in your style section:

h1, h2, h3, h4 {
		color : #000066
}

This style, which is used in this document, makes all the headings of sizes 1, 2, 3, and 4 appear dark blue. Headings of sizes 5 and 6 are not mentioned in the style, so they show in the text color, which is set to black in the body style.

h1, h2, h3, h4 {
	color : #000066
	background : #ccccff
}

By the way, the indenting and having the last curly bracket on its own line is just a preference of mine. I think it's easier to read, but the browser doesn't care if you put the whole thing on one line going across.

If that style is in the style section, then you will see this if you put this in the body section:

<h4>Here is what that style gives you in a size 4 heading.</h4>

Here is what that style gives you in a size 4 heading.

p {
	color : #000066 ;
	background : #ccccFF
}

The above style would make all paragraphs look like this. If you use this kind of style, be sure to end all your paragraphs with a </p> tag. That way, the body background color will show between paragraphs.

.blueonblue {
	color : #000066 ;
	background : #ccccFF
}

To use this in the body of your text, do something like this:

<p class="blueonblue">The above style would make all paragraphs look like this.  
If you use this kind of style, be sure to end all your paragraphs with a &lt;/p&gt; tag.  
That way, the body background color will show between paragraphs.</p>

If you want to color just one paragraph, you can do it this way:

<p style color : #000066; background : #ccccff>This paragraph has dark blue text and a light blue background.
The style is inside the paragraph tag, so it applies up to the &lt;/p&gt; tag.</p>

This paragraph has dark blue text and a light blue background. The style is inside the paragraph tag, so it applies up to the </p> tag.

Defining a blueonblue style at the top and then using it below is better if you want to use the effect on more than one paragraph. If you later decide to use different colors, you can change all of the blue-on-blue paragraphs' colors at once by changing the blueonblue style.

Link Colors

:link { color: #0000cc }  /* for unvisited links */
:visited { color: #660099 } /* for visited links */
:active { color: #ff0066 } /* when link is clicked */
:hover { color: #0066ff } /* when mouse is over link */

If your web page has a light-colored background and dark-colored text, as this one does, you're probably best off not messing with link colors. Users expect that links they have not clicked on will be blue and that links that they have clicked on before will be purple. If you change those colors, users can get confused. On the other hand, the hover effect is cool. You could set just that and leave the others out of your style section.

If your web page has a dark background, the standard link colors might not be visible. You then will want to set the link colors. Make the unvisited link color more prominent that the visited link color.

Fonts

If you look at the source for this document, you'll see near the top, in the <head> section, the <style> section starts like this:

<style>
body { 
	background : #ffffff ;
	color : #000000 ;
	font-family : Georgia, serif 
}

As mentioned, the body style says that all the characteristics (separated by semi-colons) between the curly brackets apply to everything <body> and the </body> tags, which means the whole document. In addition to setting the background color to white and the text color to black, this also sets the "font-family," which is the typeface.

Two font-families are listed. The first is "Georgia," a modern-looking type face with serifs. (Serifs are little lines at the ends of the letters, intended to improve the readability of small print.) The second font-family listed is "serif." This is generic backup. It is needed because the named choice will only display if the user's computer has that font installed. The Georgia is a Microsoft font. It comes free with Microsoft software, so most users do have it. I put "serif" in there so that users who do not have Georgia will see their computer's basic serif font.

Floating Columns

#rightcontent {
	float:right;
	width:25%;
	background:#ffffcc;
}

The style section of this document includes the code above that creates a style that I called #rightcontent. I used this style towards the beginning of this document get that list of ASCII characters to appear on the right side of the screen, with the rest of the text floating to the left of it. I am using it again here. Just before this paragraph in the source of this page, I have this:

<div id="rightcontent"><h4>With Styles You Can Make a Floating Box!</h4>
... the rest of the text goes here ...
</div>

Let me repeat a caution about styles: Older browsers may not show them properly. Your users will need Internet Explorer 5 or later, or Netscape 5 or later, or Firefox, Mozilla, Safari, or Opera, to see most styles. (Old browsers will ignore styles they do not understand, so your page will still be intelligible.)

For more HTML information

You can also find HTML tutorials on the web. Two very good HTML tutorials are at the w3.org web site:

• Dave Raggett's Basic HTML
• Dave Raggett's Advanced HTML

• http://www.mcli.dist.maricopa.edu/tut/
• http://www.webcom.com/html/tutor/

To learn more about styles, do an internet search on "HTML CSS" (without the quotation marks) or "cascading style sheets." They're called "cascading," by the way, because you can override general characteristics with particular ones. For example, in this document, the body style sets the text color to black, but the h1, h2, h3, h4 style overrides that and sets the text color in those headers to blue. h5 and h6 don't have a style, so they stay black.

One good way to learn is to copy and imitate web pages that you like. Your browser can save the text source of any HTML file, which you can then examine and modify. For example, you can view the source of this file to see how I used styles and font tags. I've mixed the two methods, as you'll see if you look through the file.

For instance, if you want to try a floating box like that above, copy the style information from the top of this file to the top of your file. To place the box, copy everything from the <div id="goldenrightcontent"> tag to the corresponding </div> tag. Once that's in place, change my words to the words you want. Play around with the other specifications, if you like. Try changing the percentage width, to make the box wider or narrower. Changing float:right; to float:left; moves the box to the other side. You can change the colors and the font, too.

XML

Assignment 14

Prepare a web page. Submit it to me for posting on our web site for all the world to see!

For full credit, the page should include:

• A title -- goes in the <TITLE> tag
• Code -- in the <STYLE> section -- that sets how something looks, such as the text color, the background, the text font, or the headings
• An image
• A link
• A mandatory section at the end, which is described below

Software to Use

For this assignment, I would like you to use a plain text word processor, so you can construct your own HTML.

In Windows, Notepad and WordPad are good. Please do not use Front Page. Please do not use Word. The idea is for you to learn how to do HTML. This will help you design better web pages later, even if you do use HTML generators in your future work.

There are some free or inexpensive HTML editors available for download from download.com. Search for "HTML editor". Or just Google "free html editor". Look for editors that let you work with the HTML code and then preview what it looks like. Avoid "WYSIWYG" editors.

If you use Notepad, or any similarly basic text editor, you can create a setup for yourself much like an HTML editor with page preview:

1. Start a file using Notepad. Type something and save the file. Save it with a name like a.html rather than a.txt. Remember what folder you saved it in. You'll need that for step 3.
2. Minimize Notepad. Don't close it.
3. Find the file's icon using My Computer. Its icon should indicate that it's a web page, thanks to the .html file extension.
4. Double-click that icon to open the file in your web browser. You should see the text you typed.
   
5. Press Alt+Tab to go back to Notepad. Make changes to the file. Save.
6. Press Alt+Tab to go back to your web browser. Click Reload or Refresh, and you'll see the effects of your changes.

Starting your web page.

The head section comes first. Type these tags:

<HTML>
<HEAD>
     <TITLE>

     </TITLE>

That ends the title sub-section.

If you want to set page colors and properties, put a style section here. A minimal style section would be

<style>
body { 
		background : #ffffff ;
		color : #000000 ;
}
</style>

Regarding colors, feel free to be creative. Just be sure that your color and background have enough contrast so that your page can be read. Add styles for the link colors if you want to change them from the standard. This is a good idea if you chose a dark background and light text color.

That's all you need in the HEAD section, so close it off.

</HEAD>

<BODY>

<h1> or <h2>

</h1> or </h2>

Then put in the paragraph

<P>

To get full credit for this assignment:

Include a link to another page on the web, and

include an image.

As for your content, the two big no-nos are:

1. No commercial pages. Don't sell anything. The exception is that you can sell yourself, by posting your resume.
2. No gratuitous bad taste. In public health, we often deal with subjects that some people consider offensive. That's OK, as long as our material has a clear educational purpose. The University does not want to spend legal resources and political capital to defend something that lacks demonstrable public benefit.

Other than that, the content of your web page is up to you. Here's some advice about web page design from a cute cartoon character. Put on the headphones, if you're in the lab. This site may load slowly. Mash Reload if it times out before showing you anything.

Interactive Content

Here's something really cool you can add to your web page: Interactive content! Just like the economics tutorials and the answer checkers, you can ask your users a question and make fun of constructively comment on their answers! For details, see Assign14java.html.

Finishing Your Web Page

Put the following at the end of your page. You can set it off with a horizontal line, using the tag shown:

<HR WIDTH="100%">

Put in your name and your e-mail address. A tag for putting in a clickable e-mail address would be something like this:

<A HREF="mailto:myname@myprovider.com">mynames@myprovider.com</A>

or even something like this if you want to suggest a subject for the e-mail.

<A HREF="mailto:myname@myprovider.com?subject=I Love Your Page">mynames@my provider.com</A>

When the user clicks this, his or her browser would pop up a form for sending mail.

Lately, we've been plagued by web "spiders" that crawl through our web pages and harvest e-mail addresses. We get deluged with junk e-mails from that. To fool the spiders, don't use the method shown above. Instead, encode your e-mail address this way:

<script language="JavaScript" type="text/javascript">
<!--
var name="myname"+"&#x0040;"+"myprovider"+"&#x002E;"+"com";
document.writeln('<a href="mai'+'lto:'+name+'?subject=I Love Your Page">'+name+'</a>');
//-->
</script>

This uses Javascript, a programming language. Be careful to be accurate. Every punctuation mark has to be exactly right. Every single- and double-quote has to be just as you see above. The combination &#x0040; will display as the "at" symbol. &#x002E; displays as a dot.

To avoid errors, copy the above script and paste it into your web page source. Then change myname, myprovider, and the subject, being careful not to change any of the punctuation. If you're using a USC student address, put mailbox.sc for myprovider and change com to edu.

What you get is something that looks and works just like the mailto: tag, but hopefully won't expose you to getting on a spam e-mail list.

On the next line, put the date you wrote or last changed your file, like this:

<br>
April 29, 2008<br>

The views and opinions expressed in this page
are strictly those of the page author.<br>
The contents of this page have not been reviewed or
approved by the University of South Carolina.

How to Save Your File

Web pages have to be plain ASCII text. They have to have the file extension .html or .htm. The .html or .htm file extension tells your operating system that the file should be opened with a web browser to be viewed. When you put the file on a web server (actually, I will be doing that for you when you send the file to me), the .htm or .html file extension the web server to send the file out over the internet with introductory information that tells browsers that it is an HTML file. This helps the users' browsers display your file properly.

In Wordpad (or Word, if you ignored my advice at the beginning not to use it), select File | Save As from the menu. Then change the file type to Text Document MS-DOS Format, which means Microsoft's version of ASCII.

When you do this, Wordpad supplies the extension .txt to your file. Go ahead and save it like that.

As you save, another dialog box may appear, asking you to confirm that you want to save as text and lose all formatting. This is correct, so click the Text Document button. 

After the file is saved, exit from your editor and rename the file to replace ".txt" with ".html."

If you need to edit your file later, right-click on its icon. Choose Open with ... and pick the text editor you used. If it refuses to open as plain text with the tags showing, quit the editor. Rename the file to change the extention back to .txt. Do your edits, save, and change the extention back to .html or .htm.

Submitting Your Files for Posting to the Web

Send your files to me. You can submit them these ways:

• Use the assignment section in Blackboard. Attach all the files.
• Send me the files as e-mail attachments.
• Save the files on a storage device and bring the device to to me.

If you incorporate Java interactive elements, send those files, but don't send a copy of MultChoice.class. I have that already.

I'll copy your files to a folder on our web server. Then I'll let you know how you and your friends can see your web page!

1. Last night [in class] you were switching between the HTML text and the way the text looked on the web. How did you do that?
   -- Internet Explorer and Firefox/Mozilla have similar ways to let you view the source of whatever web page you are looking at.
   In Firefox or Mozilla, click View on the top menu bar and then Page Source. Safari has a similar command.
   In IE, click View and then Source.
   IE opens the source in Notepad, which allows editing. Firefox/Mozilla's and Safari's view window doesn't allow editing. You can, however, save the source to your computer and then edit it using any simple text editor.


2. How do .com, .net, and .org work?
   -- An organization called ICANN (http://www.icann.org) supervises the giving out of internet domain names. Internet addresses are actually numbers, but numbers are hard to remember, so we have domain names, like hadm.sph.sc.edu. Servers around the world maintain lists that match names with numbers. For instance, our HSPM web server is at 129.252.74.85. Servers around the world know that domain names that end in sc.edu all match with address numbers that start with 129.252. They also know that those addresses are at USC. Once a message gets to USC, our servers know that sph.sc.edu names go to address numbers that start with 129.252.74 or 129.252.114, and that hspm.sph.sc.edu goes to 129.252.74.85. ICANN rules are that educational institutions only get names that end in .edu. Commerical entities get names that end in .com. Rules for .net and .org are more flexible. .mil is exclusively for the US military. Only government agencies get .gov. Other countries have their own "top level" domains, as the last part of the domain name is called. For instance, Japanese sites end in .jp. To get a domain name of your own, if you're not an educational or government entity, you have to pay an internet registration company. Fees vary. Expect to pay $25 to $60 per year per name. The biggest internet registrar for .com or .net names is Network Solutions (www.networksolutions.com), which used to have a legal monopoly but no longer does. Be warned, though, that there have been complaints about how Network Solutions operates. Internet names are first-come first-served, with some provision for respecting established brand names.


3. Did Al Gore invent the internet? If not, why did he say he did?
   -- Al Gore, as a U.S. Senator back in 1988, led the effort to get Federal funding for the internet. The term "internet" was not even in use then. Instead, Gore called it the "Information Superhighway," justifying Federal funding by making an analogy to the Federally-funded Interstate Highway System for motor vehicles. In 1999, Gore said, during an interview on CNN, "During my service in the United States Congress, I took the initiative in creating the Internet." That is a justifiable statement. Without the funding that Gore promoted, the internet would not have developed beyond the Defense Department and a few universities nearly as quickly as it did. Gore did not claim to have invented anything. The notion that Gore claimed to have "invented" the internet first appeared in a Wired magazine story, which the Republican National Committee then picked up. Wired later corrected their error, but the Republicans kept using it anyway through the 2000 Presidential election campaign.

   I was about to take this out, because it seemed old hat, but the GOP continued to lie about this in 2007, after Gore's Inconvenient Truth movie won an Oscar. See Terry Holt, a Republican strategist, explain why they promoted this lie. Then he tells the lie again!