Advanced HTML (KB 500 lab)

Applications for generating HTML

1. Netscape
2. Hot Dog
3. Web Edit
4. Office '97.
5. HTML Converters

6. HTML Editors at Yahoo

The Basics

• How to make HTML Documents. A brief introduction to HTML codes.

• Common HTML tags. A listing of the most common HTML tags to show how they look in HTML and in a browser.

• Making a trial page. A simple page that demonstrates how to make an HTML document.

Other Resources for learning HTML

• Beginners Guide to HTML This is a great place to start. Highly recommended reading for anyone starting to write HTML.

• Composing Good HTMLThis is a more advanced and detailed discussion about writing HTML documents. This is highly recommended for anyone who has started writing HTML and they are ready for some more detail and to find out what they are doing that is not so good.

• Hypertext Style guide from WWW3 This guide has many useful suggestions about writing "good" HTML.

• HTML Terrorist's Handbook This is both funny and a nice listing of things to avoid doing.

• Frames Tutorial If you are really getting into this, learn about one of the latest HTML features and make really fancy pages. Note this is a Netscape extension that is not supported by all browsers. It has some significant advantages, but it is not easy and there are many pitfalls.

  ---

  Tables

  1. Basic Tags
  1. Table Tag. This tag marks the beginning and the end of the table. This table is 60% the width of the browser window each cell will have a border (these specifications are optional).
  <TABLE WIDTH=60% BORDER></TABLE>
  2. Caption. This tag marks the beginning and end of a caption at the top of the table.
  <CAPTION ALIGN=top>Table Caption</CAPTION>
  3. Row. This tag marks the beginning and end of each row in the table.
  <TR></TR>
  4. Header. This tag is used for column or row headers. Text in the header is centered in the cell and displayed in a bold font.
  <TH></TH>
  5. Data. The data tag is used to mark the start and stop of each cell in the table. The data may be anything that can be displayed in a browser. Including text, images, and links.
  <TD></TD>

  2. Example. See how this looks by copying and pasting into an HTML editor. Then send to a browser.

  <TABLE WIDTH=60% ALIGN=center BORDER> <CAPTION ALIGN=top> Table Caption</CAPTION> <TR> <TH>Top Col 1</TH> <TH>Top Col 2</TH> <TH>Top Col 3</TH> </TR> <TR> <TD>data 1a</TD> <TD>data 2a</TD> <TD>data 3a</TD> </TR> <TR> <TD>data 1b</TD> <TD>data 2b</TD> <TD>data 3b</TD> </TR> <TR> <TD>data 1c</TD> <TD>data 2c</TD> <TD>data 3c</TD> </TR> </TABLE>

  3. Useful Features for the Data Tag. Add these elements to a data tag as needed.

  ALIGN= setting .

  setting specifies how information is aligned within the cell. Options include left, right, center, justify. Default is left.

  VALIGN=setting.

  setting specifies the vertical alignment of information within a cell. Options include top, middle, bottom or baseline.

  COLSPAN=#.

  # specifies how many columns the data cell spans. A datacell with COLSPAN=2 would be two columns wide.

  ROWSPAN=#.

  # specifies how many rows the data cell spans. A data cell with ROWSPAN=2 would be two rows high..

  WIDTH=20.

  Specifies the width of the cell. This may be in pixles or in percentages.

  BGCOLOR=setting

  setting may be the name of a color or a hexadecimal number in the format rrggbb. Where rr specifies the amount of red, gg specifies the amount of green, and bb specifies the amount of blue. Selecting colors is a bit difficult and it is easiest to do with a program that generates the color codes.

  4. Generating and editing tables
  1. Netscape Gold will generate tables. You specify the number of columns and rows. Then the outline of the table is generated and you can enter the data for each cell. You may add rows or columns easily and have good control over format and style.
  2. WebEdit includes a table generator. You specify format features and enter data in a set of cells. Then the program generates all the table codes. Additional editing is done by hand. This may be a bit tedious, but it provides complete control.
  3. Word processors that export HTML (like Wordperfect or Internet Assistant for Word) are capable of generating tables. However, they do not provide much control of the layout. If you like the format they produce, they are very easy to use.

  ---

  Frames

  Frames are very useful for producing web pages that are easy to navigate. However, they are a bit complex to develop. With a set of templates, this is much easier. The basic layout is that you use a set of individual HTML documents to generate the frame set. The first HTML document specifies how the window will be divided (horizontal or vertical) and the number and size of each frame. This first document then specifies the name of the document to place in each frame. Frames may be nested and linked in a variety of ways to provide very useful navigation features. The best way to learn how this can be useful is to look at some frame sites. This is also a good way to learn how frames can cause problems.
1. Basic Tags.
1. Base Target. This tag provides a default link to place new documents in the "top" window. Without this, you may accidently create nested frames. This tag should be included in any HTML page used with frames.
<base target=_top>
2. The following HTML generates a page with two horizontal frames. Top frame is 30% of area and displays file "header.html". Bottom frame is 70% and displays file "about.html".

<FRAMESET ROWS=30,70> <FRAME SRC="top.html" NAME=_top> <FRAME SRC="bottom.html" NAME=Bottom> </FRAMESET>

3. The following HTML generate a page with two vertical frames. Left frame is 100 points wide, right frame fills remaining space.

<FRAMESET COLS=100,*> <FRAME SRC="left.html" NAME=left> <FRAME SRC="right.html" NAME=right> </FRAMESET>

4. No Frames. These tags are for browsers that do not support frames. Any information between these tags is ignored by a frames capable browser. Use these to provide access to users without new browsers.
<NOFRAMES> </NOFRAMES>

2. Frames Templates. These HTML documents may be used as a templates to develop a set of frames. Copy and paste the HTML code into an editor for use.
1. Horizontal Frame Set
1. Main. This file sets up the frames.

<title>Template for a set of horizontal frames</title> <!-- Sets default target for any link to the "_top" window. Any link without a specified target will load into the full window. This prevents accidental nesting of frames --> <base target=_top> <FRAMESET ROWS=30,70> <!-- Define the frameset. As rows dividing the available space 30:70. Changing these numbers will change the relative size of the frame. You may specify more than two rows. --> <!-- Defining the document to place in each of the frames. The NAME, defiens the name of the frame for future reference. --> <FRAME SRC="top.html" NAME=_top> <FRAME SRC="bottom_1.html" NAME="Bottom"> </FRAMESET> <!-- The NOFRAMES part of the document is ignored by frames capable browsers. Browsers that can not view frames will see any information in this tag. Use this to provide access to users with old browsers. --> <NOFRAMES> This document is designed to view with a frames capable browser. If you see this, you should seriously consider upgrading your web browser. You may view the individual frames using the links below. <ul> <li><A HREF="top.html">Link to top frame</A> <li><A HREF="bottom.html">Link to bottom frame</A> </ul> </NOFRAMES>

2. Top. This file is placed in the top frame.

<title>Contents of Top Frame</title> <base target=_top> <H2 ALIGN=center>Contents of Top Frame</H2> This HTML document may be designed like any other HTML document. It is displayed in the top frame. It is possible to update other frames using links to new documents or to specific locations in the current document. Like Bottom Document 1, spot <A HREF="bottom_1.html#A" TARGET="Bottom">A</A> or <A HREF="bottom_1.html#B" TARGET="Bottom">B</A>. Or you can load a different document in the bottom Like Document <A HREF="bottom_2.html" TARGET="Bottom">Bottom 2</A>

3. Bottom 1. This file is placed in the bottom frame.

<title>This is the HTML document for the bottom frame</title> <base target=_top> <H3>This is the HTML document for the bottom frame</H3> This document may contain any HTML code. It is displayed in the bottom frame.<P> You may specify names for different locations in the document.<P> For example this is spot <A NAME="A">A</A> <BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR> This is part <A NAME="B">B</A> (it is located further down the page)

4. Bottom 2. This file may be placed in the bottom frame with the appropriate link from the top.

<title>This is the HTML document for the bottom frame</title> <base target=_top> <H3>This is a different HTML document that is loaded in the bottom frame</H3>

2. Vertical
1. Main

<title>bottom frame</title> <base target=_top> <FRAMESET COLS=400,*> <FRAME SRC="left.html" NAME=Left> <FRAME SRC="right.html" NAME=Right> </FRAMESET>

2. Left

<title>Contents</title> <base target=_top> This HTML document may be designed like any other HTML document. It is displayed in the left frame. It is possible to update other frames using links to new documents or to specific locations in the current document. Like Right document, spot <A HREF="right.html#A" TARGET="Right">A</A> or <A HREF="right.html#B" TARGET="Right">B</A>.

3. Right

<HTML> <HEAD> <TITLE>1</TITLE> </HEAD> <BODY> This document is displayed in the right frame. <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> This is location <A NAME="A">A</A> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> This is location <A NAME="B">B</A> </BODY> </HTML>

3. Frames Tutorial. This is a set of tutorials that walks you through the development of a set of frames pages and demonstrates many of the features. After working through this you will be ready to go.
4. Generating Frames. The easiest way to generate frames is by using a set of templates. WebEdit includes lots of frames tags and good information in the Help menus to design frames.

---

Image Maps

1. Example

<MAP NAME="test_map"> <!--Picture view2.gif--> <!--Comment wind speed --> <AREA SHAPE="RECT" COORDS="497,29,541,85" HREF="wind.html"> <!--Comment howard johnson--> <AREA SHAPE="RECT" COORDS="293,113,466,191" HREF="hojo.html"> <!--Comment commadore barry--> <AREA SHAPE="RECT" COORDS="6,59,499,121" HREF="bridge.html"> </MAP> <IMG SRC="view2.gif" WIDTH=594 HEIGHT=202 USEMAP="#test_map">

2. Tags

Define map

<MAP NAME="test_map"></MAP>

Comment

<!--Picture D:\bridgeweek\image map\view2.gif-->

define coordinates and action

<AREA SHAPE="RECT" COORDS="497,29,541,85" HREF="wind.html">

Image (specifies file, image size, and map)

<IMG SRC="view2.gif" WIDTH=594 HEIGHT=202 USEMAP="#test_map">

3. Creating With Web Edit

---

Javascript

The easiest way to write javascript is to find a similar example and use it as a template. The structure is basicly like a programing language. I have not yet located any good overviews, but have designed some useful documents using samples. Check in Yahoo for libraries of javascript samples.

---

This page is maintained by
Scott Van Bramer
Department of Chemistry
Widener University
Chester, PA 19013

Please send any comments, corrections, or suggestions to svanbram@science.widener.edu.

This page has been accessed times since 5/12/97.
Last Updated 5/12/98