Hn:

Consider the following statements as part of an HTML document:

<h1>Biography</h1> Charlie Chaplin was born Charles Spencer Chaplin in London, England on 16 April 1889. His parents were music hall entertainers but separated shortly after Charlie was born. Charlie's mother raised her children until Charlie was 7 years old. In 1896 when she was no longer able to care for her children, Charlie and his brother Sydney were admitted to Lambeth Workhouse and later, Hanwell School for Orphans and Destitute Children.

Now let's look to see how this part of the document is displayed in a browser.
 

Biography Charlie Chaplin was born Charles Spencer Chaplin in London, England on 16 April 1889. His parents were music hall entertainers but separated shortly after Charlie was born. Charlie's mother raised her children until Charlie was 7 years old. In 1896 when she was no longer able to care for her children, Charlie and his brother Sydney were admitted to Lambeth Workhouse and later, Hanwell School for Orphans and Destitute Children.

 
Notice that, although, we did not insert a line break or paragraph tag after the </h1> tag, the browser automatically did that because this is a characteristic of heading tags. Now if we decided to center the word "Biography", we can use either a center tag around the H1 tag, or use an optional attribute of the heading tag called ALIGN which also exists in many other tags. Therefore, the following two statements will accomplish the same thing:

<center><h1>Charlie Chaplin's</h1></center>

<h1 align=center>Biography</h1>

As it can be seen in the following example:

 

Charlie Chaplin's Biography Charlie Chaplin was born Charles Spencer Chaplin in London, England on 16 April 1889. His parents were music hall entertainers but separated shortly after Charlie was born. Charlie's mother raised her children until Charlie was 7 years old. In 1896 when she was no longer able to care for her children, Charlie and his brother Sydney were admitted to Lambeth Workhouse and later, Hanwell School for Orphans and Destitute Children.

 
Align attribute can also get the values of LEFT or RIGHT in addition to the CENTER value that was used in the above example.
 
P:

Align attribute is also a useful attribute for the paragraph break tag <p>. However, when any attribute is used for this tag the end attribute must also be inserted in the document. Below are three examples of using the paragraph break tag with the align statement. from left to right the following forms were used respectively:

<p align=left>apple<br>orange<br>grapes</p>
<p align=center>apple<br>orange<br>grapes</p>
<p align=right>apple<br>orange<br>grapes</p>

apple orange grapes

apple orange grapes

apple orange grapes

Some New Tags for Text Formatting:

There are additional tags that deal with text manipulation and formatting. Here are 5 additional tags to help us format a text.

To emphasize a portion of a document, use the em tag:

The word <em>love</em> is emphasized.

actually showing up as:

The word love is emphasized.

Notice that the emphasized word is displayed in italics.

 
Another way to emphasize a portion of a text is to use the Strong tag.:

It is very <strong>important</strong> that you follow the instructions.

actually showing up as:

It is very important that you follow the instructions.

Notice that the word important is displayed in bold letters.

 
To make a portion of a document Big (or Small) use the Big (or Small) tag:

Elephants are <big>huge</big> where ants are <small> tiny</small>.

actually showing up as:

Elephants are huge where ants are tiny.

Notice that the effects of the above tags can simply be be achieved using the font tag.

---

To Display a text exactly as it is typed, including all spacing and line breaks, use the Pre tag:

Recall that we said that HTML ignores the blank spaces and carriage returns (line breaks) in your document. Therefore, the following statement:

Jan        Feb         March       
-----     -----       -------
 29         30          40
 50         48          39

will show up as:

Jan Feb March ----- ----- ------- 29 30 40 50 48 39

Unless you contain them between <pre> and </pre> tags. Here is another nice example of usage of a pre tag.
 

__ __ .' '.' `. _.-| o | o |-._ .~ `.__.'.__.'^ ~. .~ ^ / \ ^ ~. \-._^ ^| | ^_.-/ `\ `-._ \___/ ^_.-' /' `\_ `--...--' /' `-.._______..-' /\ /\ __/ \__ | |/ /_ .'^ ^ `. .' `__\ .' ^ ^ `.__.'^ .\ \ .' ^ . ^ . ^ .' \/ / / ^ \'.__.' | ^ /| ^ | \ \|^ ^ | `\^ | ^ | `~| ^ | | ^ ^ | \^ / `. ^ .' : ^ ; .-~~~~~~ | ^ ~~~~~~-. / ^ ^ | ^ \ \^ ^ / \ ^ ^ / .--------. .---------.

 

---

 
The Address tag is usually used at the bottom of documents for email addresses:

<address>My Email is joe@science.morgan.edu</address>

actually showing up as:

My Email is joe@science.morgan.edu

 

Notice that the statement is in italic form. Again, the effect of this tag can be achieved with previously discussed tags.

---

To create hyperlinks, we use the A tag which stands for anchor. The attributes of A tag create hyperlinks and named references. A simple format of the tag is:

<A HREF=reference>

Where the reference specifies either a destination address or a destination file. A destination address must be in url format. A destination file must name a file and be in the format of the given file system. If no path or domain name is specified, the file is searched for in the same location as the current document. Please note that to create a hyperlink, text or an image must be inserted between the start tag and its end tag. The following examples should clarify the use of the hyperlink tag.

Example One:

<a href=not_yet.html>Not Ready Yet </a>

Will be seen as:

Not Ready Yet

Notice that the text Not Ready Yet is underlined and has a different color than the normal text. This color is the same color which is defined in the body tag as LINK=color (see the body tag specification a little further down in this document). If you click on the "Not Yet Ready" field, you will be sent to another document called not_yet.html which happens to be at the same directory that the current HTML document is residing. Notice that if you used the browser's Back button and returned to this document again, the color of the Not Yet Ready statement has changed to the value defined by VLINK=color (See the body tag specification).

Example Two:

<a href=mailto:someone@nowhere.com><img src=email.gif><br>Send email</a>

Will be seen as:

Send email

Notice that now clicking on either the text "Send email" or the email button can cause the link, which in this case will send an email to the user someone@nowhere.com using your default email client of your computer.

Example Three:

<a href=smiley.html#Emotional_Smileys>Simley Dictionary</a>

Will be seen as:

Smiley Dictionary

Now if one clicks on the Simley Dictionary link, he/she will be sent to another server where the Smiley Dictionary is residing. But when it opens the file, it goes to a specific location in that file that is identified with another anchor tag of the form

<a name=Emotional_Smileys>

Color can be used in several places within an HTML document. The most important ones are the use of color in the font tag and in the bgcolor attribute of the body tag. Each color is represented with three two-digit numbers, representing the various levels of the primary colors, Red, Green, and Blue. However, the numbering system used is based on the hexadecimal system.

In a decimal system, the 10 basic digits are 0, 1, 2, ...,9 and then the next number (i.,e., 10) is constructed using the digits 1, and 0 and so on. Therefore, a two digit number in decimal system can represent at most 100 distinct numbers (from 0-99). In the hexadecimal system there are 16 basic digits, 0, 1, 2, 3, ..., 9, a, b, c, d, e, and f. It is only after the digit f that we start to create new numbers using double digits. For example 10 in hexadecimal is equivalent to 17 in decimal.

Confused? Well, you are not alone. Help is available when you need it in a form of a very useful Java applet in the Resource Center. Just click on the Resource Center in the course main homepage. Then click on Background Color Index link on the left frame and on the right frame and a nifty Java applet will be displayed. As you click on the larger window with different color levels, the selected color value and its color are displayed in the lower window. you can even hold the left mouse button and slide the cursor over the larger window and watch as the color changes in the lower window.

We will now study Two HTML tags that involve setting color in our HTML documents.

Font

The font tag sets the color, font, and size of text and uses the following format:

<FONT COLOR=#color FACE=name SIZE=n>

Where the color can be either a hexadecimal, red-green-blue color value or a predefined color name such as red, blue, green, yellow, pink, and so on. My recommendation is to always use the hexadecimal numbers because earlier browsers may have difficulty with the name color that you are defining. The name sets a specific font to display a text defined with the font tag. You can use several type of fonts at the same time. But because the font availability is dependent upon the computer used to browse the document, from a list of fonts that you specify, the browser will search the first font name in the list that exists on the computer. If none of the fonts are available, it will display the default font. Finally the n value specifies font size between 1 and 7 with 7 being the largest. We can also use a plus (+) or minus (-) sign before the number to indicate a size relative to the current basefont setting.

Below is an example of the use of the font tag.

<font size=+3>R</font>esistance to <font color=#ffdd54>change</font> is a <font face="GaramondBold, Roman, Courier, Helvetica">dominant</font>factor in nearly <font size=-2 color=#0000ff >all </font> information systems implementation.

actually showing up as:

Resistance to change is a dominant factor in nearly all information systems implementations.

 

---

Body

The body tag specifies the beginning and the end of the document body and in its most widely used form uses the following format:

<BODY  BACKGROUND=url  BGCOLOR=color LINK=color  TEXT=color  VLINK=color>

Where the color sets the color of text on the page in TEXT, the color of hyperlinks that have not yet been visited in LINK, the color of an already visited hyperlink in VLINK, and the background color of the page BGCOLOR. The url value in BACKGROUND specifies a background picture which will be tiled behind the text and graphics on the page Usually only one of the two (BACKGROUND or BGCOLOR is used).

In specifying the colors in the BODY tag, you need to use special care. Background pictures are specially a major impediment, if not chosen carefully. They do not let you see the text and the information which is presented on the page. And just because background pictures usually involve many colors, it is extremely hard to define a text color that has a good contrast with the background. I usually do not use background images, but for the few that I use you can check them in the Resource Center.

In identifying the color for BGCOLOR, TEXT, LINK, and VLINK, aside from your own preference, the contrast level between the BGCOLOR value and the others must be high enough to create an easily recognizable text. A good site that you may want to bookmark for your reference is the Hexadecimal Color Index at Infi.net which shows the contrast levels of a specific background that you select with eight different text colors. They are, black (000000), red (ff0000), green (00ff00), blue (0000ff), yellow (ffff00), magenta (ff00ff), cyan (00ffff), and white (ffffff). [Note: This site is no longer available, but search over the Internet and you will find many similar pages.  Here is an example ].

Finally, I want you to take a look at this page and compare the background with its alternative page. As you scroll down the page, do you notice any difference? What do think has caused the difference?

Images for HTML documents may come from different sources. Here are some of the most common ways you can get an image for your HTML page.

1. Save them from other web pages
2. Scan an image using a scanner
3. Take an image with a digital camera and download it to a computer
4. Use the screen capture technique to generate images which are displayed on your monitor
5. Use image editors to create/edit images

One thing is certain in all of the above methods: "The image that is generated will be saved on your PC and needs to be transferred into the computer server where your account resides. Here is where WS-Ftp, or some other File Transfer Protocol (FTP) capability is needed. Now, let's look at the first method.

In your surfing over the Internet, you come across a very nice image or an icon that you would love to have on your homepages. Assuming that the image is not copyrighted (we will discuss the copyright issue later), you can save that image to your own PC or a floppy diskette by simply moving your mouse cursor over the image, right clicking over the image, and from the menu which will be displayed choose the "Save As" option and save it to your PC or a floppy disk. Then use FTP to transfer the file to your account on the server.

If you do not know how to FTP to your account, try to get some help from your system administrator or someone that is familiar with your system. we will cover FTP in the second module, but try to use it this week getting help, if needed, from your system administrator.

You may find a number of icons that I use in my documents in the Resource Center. Visit it and you might find an image that you like. After you find an image, save it, and transfer it to your account, then you can use it in your documents using the image tag.

IMG

The simple image tag has the following format:

<IMG ALIGN=position  SRC=url  BORDER=n  HEIGHT=n  WIDTH=n>

where url  is the location of the file in relation to the HTML document (we will have a  directory structure discussion in module two). The position can take any of the following values: LEFT, RIGHT, CENTER, MIDDLE, TOP, and BOTTOM. The n value specifies the size of the border around the image or the size at which the picture is drawn. Below are two examples of the image tag.

Example One: <img align=right src=uc.gif>

Will be seen as:

 
Example Two: <img align=middle src=uc.gif width=50>

Will be seen as:

1. Study the instructional materials and practice the use the above tags in an HTML document. Verify that your document is valid and correct by saving your document into an html file such as work.html and then try to look at it using your browser. (This can be done off-line)
   
2. Create at least two documents about the course you are designing and use ALL the tags introduced in Units One & Two somewhere in them (Each one does not need to have all the tags, but together they should add up to all).
3. Create an HTML documents called FL_assignment_1.html (where FL should be replaced with your first and last initial) with explanations of where you used the tags in those two documents.
4. Use an HTML reference library and find 10 new tags and explain their use similar to the explanations contained in the Unit One & Two at the bottom of FL_assignment_1.html document.
5. Create links to the three documents in from your class main page.
6. Right click on the multimedia image in your own homepage, and save it to a floppy disk (or to your PC). FTP the file to your images subdirectory inside the IEGR455 directory. Edit the file index.html in your IEGR455 directory to indicate that the b_multimedia.gif image is now residing in your own directory not at

   http://jewel.morgan.edu/~salimian/courses/IEGR455/images/.

7. After the link, "IEGR455 Main Homepage" in your multimedia directory, add an email hyperlink.
8. This assignment is due Friday February 6th at 5:00pm.