IUPUI integrated images

Web by Design logo
Home Tutorials Resources Kudos CV

 

 

Beyond HTML Basics

Table of Contents

Background Information

Setting up a basic home page is a relatively easy task. It's even fairly easy to get some simple graphics in place on your pages. Sooner or later, however, you will want to go beyond the basics.

The three predominant web browsers are Internet Explorer, Firefox, and Netscape Navigator. While each recognize the standard HTML tags, each browser has developed extensions to HTML that are recognized only when using that particular browser. The information contained in this handout is generally recognized by each of the browsers.

NOTE: If you decide to try some of these HTML techniques, you do NOT have to place line breaks as may be indicated in these examples of HTML coding; examples in this handout may show line breaks only because of formatting in the handout itself.

Back to Top

Color Effects

All computer-displayed colors are made up of red-green-blue (rgb) combinations. This allows colored backgrounds for those pages where you want a simple, solid color on your home page. These same rgb values also specify the color of text, links, and "followed" links (links that you've clicked then returned to).

When you set colors, they are set for the entire home page file. Generally, you can't "mix-and-match."

See samples of colors that are useable by all Web browsers.

Warm colors (reds, yellows, oranges) appear to "approach" the reader while cool colors (blues and greens) appear to "recede from" the reader. Generally you will want to choose cool colors for backgrounds so that the background does not compete with the foreground and make it more difficult to read.

"Browser-safe" colors are those that remain true across computing platforms and whether viewed in 256 colors, 16- or 24-bit color settings. Other colors may pixelate (appear dotty) or band (ribbons of, rather than blended, color). Browser-safe colors always are combinations of 00, 33, 66, 99, cc, ff. All of the colors identified in the hue and value charts above are browser-safe colors.

Rather than using the <body> tag alone, you may add any combination of the options for background, text, links, and visited (followed) links color.

NOTE: These options may be placed in any sequence after "body" within the tag.

The tag, with options, would follow this format: <body bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx"> where "xxxxxx" is the rgb value.

Back to Top

Wallpaper

Any image that can be viewed in a home page can also be used as "wallpaper." This is another option which may be used with the body tag. The tag with this option would read: <body background="name.gif"> where "name.gif" is the name of your image file. You should choose a subtle background with few colors that does not interfere with the presentation of your information.

Many web designers choose to use both a wallpaper as well as a background color that matches a dominant color in the wallpaper. This causes the browser to immediately set the color while loading the wallpaper "on top" of the color. In this way, your reader will see a color that links visually to your page without having to wait on the image to load.

Wallpaper appearance can be enhanced by increasing the brightness and lowering the contrast to soften the image. Keep in mind that many people may have difficulties viewing a home page with a busy or bright background due to physical impairments or hardware incompatibilities.

The background image will automatically tile across the width AND height of your home page. For example, this image will fill the space behind your home page. The tiling allows you to use a much smaller graphic than you would need to actually fill the page; thus, your page loads faster. Most wallpaper images are about 100x100 pixels; a minimum size for most efficient processing is 64 x 32 (w x h).

SECRET TIP: Access my treasure troves and feel free to keep those you like: wallpaper, photos, graphics, or animated graphics.

If you create a wallpaper with an image or design on the background (as opposed to a pattern or texture only), you will need to experiment with placement of the design in a graphics package. Generally, you will find that the overlying design will need to be offset toward the lower right of the background, rather than centered, in order to achieve the effect of a centered design behind the page's text. Also, when creating wallpapers, make sure that you do not unintentionally leave a "seam" that will give a checkerboard appearance on your home page.

Back to Top

Special Text Effects

You can affect both the color and the size of text by using the <font> tag. The two options you can use with font are color and size. As with any option, you can use these individually or together depending on the effect desired.

Text Colors

To change the color of a word or phrase, you can use the font option "color." For example,

<font color="xxx">HOT! HOT! HOT!</font>

where "xxx" is replaced by one of the recognized colors. (Remember, you can refer to the section on browser-safe colors to determine which of the named colors will most likely be displayed correctly.)

While there are many colors that can now be referred to by name and generally recognized by both Internet Explorer and Netscape, there are only sixteen colors that are standard HTML and recognized by the W3C (displayed in the following paragraph).

The colors as recognized by HTML standard are: Black (#000000), Green (#008000), Silver (#C0C0C0), Lime (#00FF00), Gray (#808080), Olive (#808000), White (#FFFFFF), Yellow (#FFFF00), Maroon (#800000), Navy (#000080), Red (#FF0000), Blue (#0000FF), Purple (#800080), Teal (#008080), Fuchsia (#FF00FF), and Aqua (#00FFFF).

NOTE: Be somewhat cautious in using the blue color since many readers from the earlier days of Netscape assume that the blue color indicates a link that they may click on.

Super / Subscript Text

To superscript characters: <sup>1</sup>. A "superscript" example:

See Dante2

To subscript characters: <sub>2</sub>. A "subscript" example:

H2O

Pre-formatted / Spacing

As you know, HTML does not recognize word processing features such as multiple spaces, tabs, and carriage returns. Text contained within the <pre> … </pre> tag retains its spacing. Thus, this tag is good to use when you have simple tabbed columns or unique spacing. The downside to using this tag for spacing is that it will change the font to a courier style.

For example to create the following effect, you would place the appropriate spaces preceding each line in your HTML document, but enclose the entire poem within the "pre" container:

Mary had a little lamb
   Its fleece was white as snow
     And everywhere that Mary went
        The lamb was sure to go.

Monospaced / Typewriter Text

Text contained in the <tt> … </tt> tags will be monospaced. For example:

Type this text.

Text Alignment

To center align text:

<center>Indiana University School of Nursing</center>

For example:

Indiana University School of Nursing

You can also right align paragraphs of text, such as I've done with this one: <p align="right">

Underlining Text

Be careful when electing to use underlined text since some readers associate it with hypertext links. However, when you do decide you must use underlining, the HTML code is:

<u>important!</u>

For example: This is important!

List Item Styles

You can change the number style of the list item in a numbered list, as well as the symbol style of the list item in an unordered list. You can also specify the value of the starting number of an ordered list. Number styles used with the ordered list are A (upper alpha), a (lower alpha), I (upper roman), i (lower roman), and 1 (arabic numbers). Choices used with the unordered list are disc, circle, and square. Notice in the examples that you place the type style or value in the <UL> or <OL> tag rather than in each list item.

"Number" types:

<ol type="A">
<li>Apples
<li>Pears
<li>Kiwis
</ol>

Would result in:
  1. Apples
  2. Pears
  3. Kiwis
"Number" types:

<ol start="13">
<li>Apples
<li>Pears
<li>Kiwis
</ol>

Would result in:
  1. Apples
  2. Pears
  3. Kiwis
Bullet types:

<ul type="square">
<li>Bananas
<li>Oranges
<li>Grapefruit
</ul>

Would result in:
  • Bananas
  • Oranges
  • Grapefruit

Block Quotes

Block quotes indent from both the left and right margins and are used when citing long pieces of information. For example:

<blockquote><p>Four score and seven years ago, our fathers brought forth to this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal.</p>
<p><em>from The Gettysburg Address<br>
A. Lincoln</em></p></blockquote>

Would result in:

Four score and seven years ago, our fathers brought forth to this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal.

from The Gettysburg Address
A. Lincoln

Back to Top

The Anchor Tag

You've already learned to create a link by using the anchor tag, e.g., <A HREF="http://www.iupui.edu">IUPUI Home Page</A>. And you know that what appears inside the anchor tag is "click-able." One type of graphic commonly referred to as a "click-able" image is simply two graphics, one small and one large, used in combination with the anchor tag. When you click on the smaller image, it "appears to grow" into a larger image.

For example, this line of code:

For a full-sized view, click on the image: <A HREF="alps.jpg"><IMG SRC="alps_small.jpg" BORDER="0" WIDTH="181" HEIGHT="121" ALT="Photo of the Alps"></a>

Would result (assuming you have the two files in your directory) in the following:

For a full-sized view, click on the image:
The Alps

Notice that the code includes the option "BORDER=0." You can use the border option within any <IMG> tag to control the width (or presence) of a border. It is particularly effective to set the border equal to zero when creating a "click-able" image so that the border does not detract from your image (otherwise your "click-able" image will have a colored border around it).

A reader-friendly home page directs readers back to the starting point (and in the case of home pages on our university systems, also back to the main IUPUI home page). For example, to create a link back to the IUPUI home page where both the IUPUI logo and the words "Back to IUPUI Home Page" are click-able, this (Notice we are calling the image from its location at the web address):

<P><A HREF="http://www.iupui.edu/"><IMG SRC="http://www.iupui.edu/it/images/iupui3.gif" HEIGHT="108" WIDTH="73" ALT="IUPUI Logo"> Back to IUPUI Home Page</A></P>

Would result in the image below. Notice the border around the image; if we had set BORDER="0", there would have been no border showing:

IUPUI Logo Back to IUPUI Home Page

To use a graphic of your own called "back.gif," your HTML code would read:

<p><A HREF="../home.html"><IMG SRC="back.gif" HEIGHT="20" WIDTH="22" BORDER="0" ALT="Back Button">Back</A></P>

Would display:

Back ButtonBack

NOTE: The one thing to watch out for is consistent spacing between your image and the following text; it is often challenging to separate the coding structure from the actual display in the browser. In the previous example, for instance, the image "back.gif" and the word "Back" are flush against one another.

Yet another example of this same HTML structure is to create a link that will allow your reader to easily e-mail a message to you. NOTE: Being able to e-mail from a link of this type is dependent upon the reader having set the browser e-mail preferences.

This anchored hypertext reference invokes the mail:

<P><A HREF="mailto:cholling@iupui.edu">Send me an E-mail!</A></P>

and results in:

Send me an E-mail!

By creating an anchor pointing to a sound file, your readers can listen to an audio clip—assuming they have the appropriate sound card and speakers:

<A HREF="jazz.mid">Play some jazz!</A>

Now you can try it!:

Play some jazz!

Back to Top

Ismaps

Waterfall pictureISMAPS are images that make hypertext links to different destinations depending upon the location of the mouse pointer when clicked. An ISMAP is a single image with defined areas (you can see this effect by moving the mouse pointer over the image at the left and looking at the status bar at the bottom of the browser window). The locations of those areas are recorded in a map so that the system can identify both the location within the graphic as well as the destination.

A client-side ismap, places the "work" of getting the directions in the ismap on the client workstation (that one making the request—the reader). Since the server is not involved, the action happens more smoothly and faster, cutting down the waiting time for the reader. Rather than having a separate map file as in a server-side ismap, the map information resides within the HTML document.

At the location in the HTML document where you wish the image displayed, type the image tag statement as you normally would for an image. Make sure you include a zero-width border so that you don't have the blue line around the image—like the one we have on this image! Note that there is an additional component: the reference to the map.

<IMG SRC="fortissimo.gif" USEMAP="#map" ALT="Map Image" BORDER="0" WIDTH="196" HEIGHT="303">

The map defines the shape of the area to be clicked, the coordinates of the upper left and the lower right corners of each area, and the destination to which the reader should be taken when that area is clicked. The map definition can be located anywhere in your HTML document. Many of you may want to place it at the end of the file so that it is "out of the way." Below is the sample map definition for the ismap above.

<map NAME="map">
<area shape=rect coords="5, 5,64, 141" HREF="http://www.iupui.edu/~webtrain/tutorials/beyond_rocks.html">
<area shape=rect coords="91, 5,127, 196" HREF="http://www.iupui.edu/~webtrain/tutorials/beyond_waterfall.html">
<area shape=rect coords="125, 5,189, 169" HREF="http://www.iupui.edu/~webtrain/tutorials/beyond_tree.html">
<area shape=rect coords="47, 248,131, 255" HREF="http://www.iupui.edu/~webtrain/tutorials/beyond_rainbow.html">
<area shape=rect coords="6, 258,40, 293" HREF="http://www.iupui.edu/~webtrain/tutorials/beyond_rocks.html">
<area shape=rect coords="13, 197,148, 224" HREF="http://www.iupui.edu/~webtrain/tutorials/beyond_water.html">
<area shape=rect coords="88, 274,126, 297" HREF="http://www.iupui.edu/~webtrain/tutorials/beyond_grass.html">
<area shape=rect coords="123, 265,192, 300" HREF="http://www.iupui.edu/~webtrain/tutorials/beyond_grass.html">
<area shape=rect coords="151, 239,188, 249" HREF="http://www.iupui.edu/~webtrain/tutorials/beyond_rocks.html">
</map>

Server-side ismaps rely on the configuration of the web server to create the ismap definition and directions. For additional information on creating a server-side ismap, see the ISMAP Tutorial.

Back to Top

Definition Lists

Definition lists create an indented, single spaced definition beneath the word or phrase being defined. This type of list is also very useful when creating lists of names and information. Note that you can also use standard HTML codes within a definition list for extra emphasis and formatting. For example:

<DL>
<DT><B>Farmer Brown</B>
<DD>Address: 123 Outpost Lane, Farmtown, U.S.A. 12345
<DT><EM>Susie Candle</EM>
<DD>Address: 897 Pickwick Street, Smalltown, U.S.A. 98765
</DL>

Would result in:

Farmer Brown
Address: 123 Outpost Lane, Farmtown, U.S.A. 12345
Susie Candle
Address: 897 Pickwick Street, Smalltown, U.S.A. 98765

Back to Top

Special Symbols

Several entities (including punctuation, special symbols, and mathematical notation) require character codes in order to properly display in a home page. Here are some of the more commonly requested codes. The first row in each cell shows the character code that should be typed in your HTML document and second line in each cell contains the entity.

For a complete listing of character codes, see the Entity Table. Codes exist as both named entities and decimal entities.

&lt;
<
&gt;
>
&amp;
&
&#8482;
&copy;
©
&frac14;
¼
&frac12;
½
&#150;
– (en dash)
&acirc; *
â
&auml;*
ä
&atilde;*
ã
&#174;
®
&aacute;*
á
&quot;
"

— (em dash)
&#133;
… (ellipses)
*Replace the "a" with the letter to receive the circumflex
*Replace the "a" with the letter to receive the umlaut
*Replace the "a" with the letter to receive the tilde
*Replace the "a" with the letter to receive the acute

Back to Top

Graphics Tips and Hints

Back to Top

Using Sound

Back to Top

Creating Tables

Tables can be used for a variety of things. Be creative in your use of tables on home pages: calendars, charts, "tabbed" lists, and "button bars." Tables must contain these three primary tags:

<TABLE> … </TABLE>
<TR> … </TR>
<TD> … </TD>

These basic tags (table <TABLE>, table row <TR>, and table cell <TD>) can be augmented with options. Options for use with the <TABLE> tag include the following where "x" is a numeric variable (the larger the number, the greater the distance):

To place a centered table caption above the table:

<CAPTION>Text Here</CAPTION>

or alternately, placed centered below the table:

<CAPTION ALIGN="bottom">Text Here</CAPTION>

Options for use with the table cell and header tags (<TD> and <TH>) specify how many rows or columns a given cell should span. Within the cell itself, contents may be formatted using standard HTML tags such as <EM>, <B>, or <BR>.

Example table code might look like:

<CENTER>
<TABLE BORDER="1" CELLPADDING="5" CELLSPACING="2">
<CAPTION><EM>Things Left on the Moon</EM></CAPTION>
<TR>
<TH COLSPAN="2">Trivia</TH>
</TR>
<TR>
<TD>Moon Rover</TD>
<TD>U.S. Flag</TD>
</TR>
<TR>
<TD>Footprint</TD>
<TD>Dreams</TD>
</TR>
<TR>
<TD>Fears</TD>
<TD>&nbsp;</TD>
</TR>
</TABLE>
</CENTER>

The sample code above would result in the following table:

Things Left on the Moon
Trivia
Moon Rover U.S. Flag
Footprint Dreams
Fears  

See Additional Table Samples

Back to Top

Opening a Second Browser Window

Often you may wish to "force" a second browser window to open so that your reader will not lose his/her place in the original document. This can be accomplished by inserting a target into your anchor. For example, if you are looking at my page (http://www.iupui.edu/~webtrain) and want to create a link so that your reader is taken to the home page of the IUPUI Office for Professional Development's in a second window, your anchor code will look like:

<A HREF="http://www.profdev.iupui.edu" TARGET="Resource Window">Office for Professional Development</A>

Back to Top

Horizontal Rules

Horizontal rules are useful for showing "section" breaks. Care should be used when working with horizontal rules, however, because in effect they say to the reader: "stop reading here!" and the remainder of your page may not be seen.

The simplest way to use a horizontal rule is without any attributes: <HR>. This places a simple rule line across the width of your browser window. Attributes that may be used with the horizontal rule tag include: align, noshade, size, and width.

For example,

<HR NOSHADE>

Will create a solid rule rather than the traditional two colored "groove":


Typing:

<HR SIZE="10">

Will create a rule that is 10 pixels wide (tall):


Back to Top

Relative vs. Absolute Addressing

You may hear the terms "relative" or "absolute" addressing. Here are two sample addresses, each referencing the same image file:

<IMG SRC=http://server.iupui.edu/staff0/jsmith/graphics/bl_ball.gif">
<IMG SRC="./graphics/bl_ball.gif">

The first example is an absolute address; it identifies the complete path on the server to get to the file: bl_ball.gif. This type of addressing is generally not the best since it makes the assumption that the "bl_ball.gif" file will always reside in the same directory in the same location on a machine named server.iupui.edu, with the same names to the directory, the image, and server, not to mention the path to get to that specific location.

The second example calls the same "bl_ball.gif" image, but its location is relative to the file that is referring to it. In this example, the home page file is in a personal home directory (~jsmith); the ".gif" file is in the graphics subdirectory. The relative path is telling the browser that it should start in the current directory (.), then move to the graphics subdirectory where it will find the "bl_ball.gif" file. If, for some reason, the userID changes to jdoe, it would still begin the search for "bl_ball.gif" in the directory calling the file and would find it if left in a subdirectory named graphics.

Back to Top

Metadata

Metadata is descriptive information about a resource. This might include title, description, keywords, and author. Metadata helps readers make an informed decision about the resource.

Within HTML documents, metadata is commonly found within the <HEAD> … </HEAD> tags. Examples are:

Author and author's e-mail address
<META NAME="Author" CONTENT="Cynthia D. Hollingsworth, cholling@iupui.edu">
Information for search engines that consider descriptive data
<META NAME="description" CONTENT="A comprehensive web design and development resource">
Content keywords for the benefit of search engines
<META NAME="keywords" CONTENT="HTML, web, design, development, images, color">
Redirect web page to a different URL (where "x" equals the amount of time in seconds before the redirect occurs)
<META HTTP-EQUIV="refresh" CONTENT="5; URL=http://www.iupui.edu/~profdev">
NOTE: There is no closing quotes after the refresh time, nor at the beginning of the redirected URL; the time and URL are a single phrase.

Back to Top

Web Counters at IUPUI

IUPUI faculty, staff & students can place a counter on your home page. For more information, see the IU Webmaster's page for creating counters.

Back to Top

Miscellaneous

Fruit
Kiwis Apples
 
Pears Bananas
Oranges
link to sample page link to sample page link to sample page link to sample page link to sample page link to sample page link to sample page link to sample page link to sample page

 

HomeReturn Home

alid HTML 4.01 Transitional Valid CSS