[CIMIC] [MUSIC]

Introduction to WWW page Authoring

Introduction to WWW Page Authoring
What You'll Be Learning About Week 2

What is HTML?



A Simple Example

   <HTML>

        <HEAD>
             <TITLE> Title of Page </TITLE>
            </HEAD>
        
        <BODY>
                The Main body of the document
        </BODY>

   </HTML>


HTML Markup Tags



Physical Markup Tags

Physical tags change the physical appearance of the text directly. The WWW browser has no influence over the typeface used.

Section titles/headers use H1 through H6 tags:

HTML CodeResult
<H1>Big and Bold Header</H1>

Big and Bold Header

<H2>Slightly Smaller Header</H2>

Slightly Smaller Header

<h3>Smaller Header</h3>

Smaller Header

Also H4, H5 and H6

Other physical tages
HTML CodeResult
This word is <B> Bold </B> This word is Bold
This word is <I> Italics </I> This word is Italics
This word is <U> Underlined </U> This word is Underlined
These words <TT> are in Typewriter font </TT> These words are in Typewriter font


Logical Markup Tags

Logical markup tags give a specific reason for changing the appearance of text. It is up to the browser to decide in what fashion to change the appearance.

HTML CodeResult
This word is <EM> Emphasized </EM> This word is Emphasized
This word is <STRONG> Strong </STRONG> This word is Strong
These words are <CODE> some code </CODE> These words are some code
<CITE> This is a citation </CITE> This is a citation


Text Layout & Document Structure

Text Layout

There are several tags that deal with the layout of the text.

HTML CodeResult
<P> This starts a new paragraph.

This starts a new paragraph.

This line will break <BR> in the middle. This line will break
in the middle.
<CENTER> This text will be Centered </CENTER>
This text will be Centered


Document Structure

Web pages have a common document structure that includes the following tags:

Comments in HTML Code

As with programming, it is nice to put in comments that will be helpful to others (and yourself after some time) to understand what you are doing in the HTML file. Typical comments include who wrote the HTML page, the date it was last modified, a reminder to work on a section, etc.

HTML CodeResult
This line will show up. <!-- This is a comment --> This line will also show up. This line will show up. This line will also show up.


General rules

All WWW pages should have the following:
  1. A brief but descriptive TITLE
  2. The last date (and time) the page was modified.
  3. The author/maintainer of the page including his or her e-mail address.
  4. Purpose of the page: Why anyone would want to read it ?
  5. Links back to the "Home Page"


HTML Lists

 The HTML language provides a number of ways to create lists of items. These include a bullet list, numbered list and definition lists. Lists can also be nested.
HTML CodeResult 
Unordered List (UL) Example
<UL>
  <LI> This will be the first item
  <LI> This will be the second item
  <LI> This will be the last item
</UL>
Unordered List (UL) Example
  • This will be the first item
  • This will be the second item
  • This will be the last item 
Ordered List (OL) Example
<OL>
  <LI> This will be item 1
  <LI> This will be item 2
  <LI> This will be item 3
</OL>
Ordered List (OL) Example
  1. This will be item 1
  2. This will be item 2
  3. This will be item 3 
Definition List (DL) Example. 
DT=Definition Term. 
DD=Definition Definition.

<DL>
  <DT> Free throw
  <DD> A free shot taken after 
       a penalty...
  <DT> Free throw Line
  <DD> The line at which a 
       free throw...
</DL>
Definition List (DL) Example. DT=Definition Term. DD=Definition Definition.
Free throw
A free shot taken after a penalty...
Free throw Line
The line at which a free throw... 
Nested List (UL/OL) Example
<UL>
  <LI> Get in the Car
  <OL> 
    <LI> Put key in door lock. 
         Turn to unlock
    <LI> Pull on door handle
    <LI> Sit down in driver's 
         seat
  </OL> 

  <LI> Start the car
  <OL> 
    <LI> Put key in ignition
    <LI> Turn key to Start 
         position
    <LI> Hold until car starts
    <LI> Let go of key when car 
         has started
  </OL> 
</UL>
Nested List (UL/OL) Example
  • Get in the Car
    1. Put key in door lock. Turn to unlock
    2. Pull on door handle
    3. Sit down in driver's seat
  • Start the car
    1. Put key in ignition
    2. Turn key to Start position
    3. Hold until car starts
    4. Let go of key when car has started


HTML Editors - HotDog

Creating an HTML document

  1. Start HotDog. You will be faced with the welcome screen. You need to create a normal document. To do this:
  2. You will see the default editing template, which looks like this: 
    <HTML>

<HEAD>

<TITLE> type_Document_Title_here </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>
  3. The first step we recommend is saving your work. This will put the file name on the documents bar at the end of the screen, and make it easier for HotDog's autosave feature to recover files.
  4. All HTML documents should have a title.To give your document a title you can
  5. The content of your document must come after the tag. Everything before the is information that describes your document to Web Browser and Server software.
  6. It often pays to give your document a heading that will be visible to the user. In most cases, this will be the same as or similar to the document title. To create a heading for your document, just type the text you want for the heading. Then highlight the text you just typed in for your Heading and H1 is the largest size heading, which you would normally use at the start of a document. H6 is very small.
  7. To control your blocks of text, use the

    tag. It allows you to position your paragraphs in a document. This time, instead of inserting the Tag from the Tag menu, click the

    tag on the toolbar near the top of your screen.

  8. At this stage, you should have a document containing two headings (the main heading and the subheading) and a paragraph of text. Now is probably a good time to take a look at how this will actually be displayed on the World Wide Web. To preview your work, Click on the Rover Tab, this Tab is located just above your document.
  9. Follow steps 7-8 again to create another paragraph for your Hobbies and Interests.
  10. By now, you should have a document containing two paragraphs of text, each with its own heading. Lets provide a visual clue to the user to separate these two paragraphs further. Position the cursor before the <H2> tag that starts the heading for the second paragraph. Choose Horizontal Line from, The menubar Insert HorizontalLine This will insert an <HR> tag at the cursor position. Preview your document again. There should be a recessed horizontal line dividing the two paragraphs.
  11. Save your work again. You have created a basic HTML document!

Background Reality Checking

The Background Reality Checking can work on the following colors:

Example

  1. Go to the Background Reality Checker, which is located in the CLOT ROVER, the 'Format Document Background & Colors' button.
  2. Change the Background color by, Using the fine color control method,
  3. Select the Text or Link & modify the Text/Link colors. Place your mouse on the text. For our first go, place your mouse on the "Document Text". Change the color of the text Repeat this process for the other text values ( in bold ) with the data below, 
    TEXT		Hex		Decimal		Color
Document Text	#FFFFFF	        255,255,255	White
Standard Link	#FFFF00		255,255,000	Yellow
Visited Link	#FF0000		255,000,000	Red
Active Link	#00FF00		000,255,000	Green
  4. Check if text/colors or OK by Playing with the various buttons & sliders . Once you have set up the colors for the text, background & link text the real power of the Background Reality Checker is evident. You can check to see if the,
  5. Load a background graphic To select a background tile or graphic, You can now apply the same visual checks you used above with the graphic.
  6. Press OK and following code inserted into your document! <<BODY BGCOLOR="#0000FF" TEXT="#FFFFFF" LINK="#FFFF00" VLINK="#FF0000" ALINK="#00FFFF">

Creating Tables

What can I use the table function for? There are two ways to utilise the table features in HotDog.
  1. For simple tables, containing only data, the entire table can be created from within the Create Table dialogue. The HTML code that the table function generates can easily be modified, by highlighting the code, and going to Insert Table. This brings up the Create Table screen, with the data already inserted into the 'Sample Table'. See example 1.
  2. For more complex effects, such as having links in tables, it is easiest to generate the frame for the table (i.e., the number of rows, columns, border thickness etc.) and then modify the HTML table code accordingly. See example 2.
  3. Tables from Excel can be transfered into HotDog. Just paste the table data into HotDog, highlight it, then hit the table button. The table data will be converted into an HTML table.

Example 1: Constructing a simple time-table.

In this example, a time table will be constructed showing the reader, when an individual can be contacted. The table consists of days of the week, hours of each day and when Peter is on duty. To create a table:
  1. From inside HotDog, click the table icon.
  2. First, the caption: "My class schedule". Click on the top button to make the caption centered at the top of the table.
  3. Enter the following data: 
    Rows:			9
Columns:		6

Heading Rows:		1  (for the days of the week)
Heading Columns:	1 (for the hours of each day)

Width: 		600 (minimum width of the entire table)
Height:		15  (minimum height of the entire table)

Cell Padding:		2
Cell Spacing:		1

Border:		4
  4. Now enter some more data 
    Along row 1:		Add the days of the week, Monday to Friday, starting from column 2.
Along column 1	Add the working hours, from 9 to 4, starting from row 2.
  5. In the other cells, decide when you are on duty.
  6. When finished, click on OK A copy of the code is already presented for you.
  7. Note, that the heading rows or columns, have changed the <TD> tag to <TH>
  8. Preview the table, and see how it looks. Note how the empty cells appear. If you do not like this effect, you can add <BR> tags to each of the empty cells. This makes the empty cells, 'appear' empty. e.g. This is one row: <TR><TH>12</TH><TD></TD><TD>on duty </TD><TD>onduty</TD><TD></TD><TD></TD></TR>
  9. To make all the cells appear, including the empty ones, add <BR> between the <TD></TD> tags. For example; <TR><TH>12</TH><TD> <BR> </TD><TD>on duty</TD><TD>on duty</TD><TD> <BR> </TD><TD> <BR> </TD></TR>
  10. Experiment with all the parameters, to create the effects you desire.

Example 2: Inserting different fonts, alignments and links within a table.

The objective is to create a table with 4 rows and 4 columns with various alignments and font sizes. And the following table parameters; 
TABLE BORDER=5 
WIDTH=400 
HEIGHT=20
CELLPADDING=5
CELLSPACING=5
  1. Do not add any data into the sample table window. Look at the HTML code that is pasted into HotDog.
  2. Between each <TD> .. </TD> tag is where the data is usually inserted. This is where font changes, alignments etc. can be added.
  3. Paste the following code into HotDog, and see some of the features of tables. 
    <TABLE BORDER=5 WIDTH=400 HEIGHT=20 CELLPADDING=5 CELLSPACING=5>
<CAPTION ALIGN=top>Test Table</CAPTION>
<TR><TD ALIGN=CENTER>Center</TD><TD>Data</TD><TD>Data</TD><TD>Data</TD></TR>
<TR><TD ALIGN=LEFT>Left</TD><TD><FONT  SIZE=+1>+1 point
</FONT></TD><TD>Data</TD><TD>Data</TD></TR>
<TR><TD ALIGN=RIGHT>Right</TD><TD><FONT  SIZE=-1>-1 point
</FONT></TD><TD>Data</TD><TD>Data</TD></TR>

<TR><TD>Default</TD><TD>Default</TD><TD><A 
HREF="http://www.sausage.com">Link</A></TD><TD>Data</TD></TR>
</TABLE>
  4. Note how the column width is defined by the longest data cell in that column.

Creating Animation

For your animation to run, you must not alter the imagelist parameter & the "doganim" class must be in the same directory as your HTML file. The Animator is a fully functional Java animation tool. Using a series of animated .gifs, .jpgs some .au sound files and the "Animator" you can create some Java animation. The hardest part is obtaining some decent animation in either (.gif or jpg format) and sound (.au format).

Animation Tool: Tools SnagletAnimator

  1. System commands: New: Create a new Animation Options: Select color for the Standard/Selected HotSpot options HTML Done: Compiles the Animation & inserts into HotDog.
  2. The Picture & Options Tabs: The two tabs beneath the "Top shelf", the Picture tab and the Option Tab are where most of the work in the animator goes on. Picture Tab: Where you add & preview your animation Options Tab: You can modify different options The options tab includes: Give me an example: An Animation to construct for a homepage!: Creating animation requires you to do several things even before you use the animator.
  3. Select the Picture Tab: Press the ôAddö button found on the Top shelf. You will be presented with a file selection window.
  4. Load your graphics: Loading your individual graphics to create an animation helps if you load them in sequence.
  5. Change the order of the animation: Once you have loaded the individual frames you can view them in the ôPicture Tabö. Look at the ôGraphics boxö in the middle of the Picture tab. To do this, place your mouse on the frame you want to move. Hold your right button mouse down. Move the frame to where you want it to appear in the animation sequence.
  6. Preview the animation If you want to preview the animation then use the small animation preview function found in the ôPicture Tabö. The reason for this is itÆs simple. If you want to view the animation with your browser you will have to go through steps 8 - 12, then use the HotDog File PreviewDocument when you are in HotDog again. To use the preview tool is easy. Try the following, The Previewer has three buttons, >>, > & [ ].
  7. Delete frames in the animation: To delete a frame do the following, place you mouse on the frame in the Picture Tab "graphics box": As described in step 6. Select the image you want to delete & place your mouse over that image. With your finger on the left mouse button, drag the image to the guillotine.
  8. Play with the options: There are many options. Here's some sample options and the effects that you can get with them explained. 
    Option:			
Parameters:					Units:
Time between frames:	1			1000			ms
Delay before restarting:10			1000			ms
Width:			100			100			pel
Height:			100			100			pel
Background Color:	#000000			#FFFFFF			Hex
Soundtrack:		---------			-----------			.au
Behaviour at Edge:	Bounce Off Edge		Disappear Off Edge		----
Horizontal Direction:	DonÆt move Sideways	Left to Right		----

Vertical Speed:		10			100			
Savlet
  9. Re-load your graphics: If for some reason your not happy with the graphics you have loaded and you wish to re-load some new graphics. Press the ôNewö button. This clears anything previously loaded and lets you start again from fresh: ie No previous images or options.
  10. Compile the animation: Once your happy with the result you will want to insert your animation into HotDog. To do this, Your animation code has now been inserted into HotDog. Remember that once youÆve compiled your animation thatÆs it. You donÆt have any way to save or re-load the information you have worked on for the last 10 steps!!!!
  11. Some sobering thoughts: If you want your animation to work, then you have to watch the following, you must not alter the imagelist parameter.
  12. The "doganim" class must be in the same directory as your HTML file(s). You need the Java class file with a relative file reference as opposed to using an absolute reference. If you do not the applet will not be able to find the graphics assigned to it & cause an error.

Creating Dynamic Images

The Dynamic Image builder is a great tool for adding text to images. The purpose of this tool is to create buttons by applying meaningful text to pictures ( .gif or .jpg ). But donÆt let this stop you experimenting with different applications using the Dynamic images tool. The process to label images using the Dynamic Image builder is simple, The Dynamic Image builder is located in HotDog, Insert Dynamic Image.

an example:

Here is the effects we want to achieve: Several different text messages each with,
  1. Open a previously created image: You must have a clean graphic image before you start work with the button builder. For this example try to find an image with the following dimensions, You can open an image in the Dynamic button builder using one of two methods,
  2. Select the combinations of text attributes you want: The table below represents several repetitions of the tutorial. The purpose of this is to show how to "build up layers" of text on a image. The "No" (Number) refers to the sequence in which to execute the tutorial. The information after the sequence number is the text attribute information for you to try. 
    No     Text	Type Face        color	 Size	Filename      Alignment
1      message1	Arial	         Red	 20	Image1        V Bottom & H Left
2      message2	Times New Roman	 Yellow	 72	Image2        V Top & H Left
3      message3	Brush ScriptMT	 Blue	 48 	Image3        V Centre & H Centre
4      message4	Playbill         White	 24	Image4        V Bottom & H Right
    To make any sense of the above table, consider all the information for each successive step can be found in each row. Here's the sequence of events you can follow,
  3. Save the results: As explained above make it habit to resave you images with different file names. For example,
  4. Reload an image for multiple text overlays: As explained in step 2, currently the only way to create an image overlaid with different combinations of text is to,



Linking WWW Pages

HTML CodeResult
<A NAME="chapter1"> <H2>Chapter 1</H2> </A> In this chapter, we investigate....

Chapter 1

 In this chapter, we investigate....
HTML CodeResult
Here is some really interesting stuff written on page 1. <A HREF="assignhtml.html"> Click me for page 2 </A> Or don't go to page 2 and keep on reading... Here is some really interesting stuff written on page 1. Click me for page 2 Or don't go to page 2 and keep on reading...


HTML Tables, Colors, Fonts and Frames

 <TABLE BORDER> <TR> <TH>Name</TH> <TH>Major</TH> <TR> <TD>Joe </TD> <TD>Marketing </TD> <TR> <TD>Sally </TD> <TD>Marketing </TD> <TR> <TD>Bill </TD> <TD>Marketing </TD> <TR> <TD>Ed </TD> <TD>Finance </TD> <TR> <TD>Sue </TD> <TD>Finance </TD> <TR> <TD>Sylvia</TD> <TD>Accounting</TD> </TABLE>
Name Major
Joe Marketing
Sally Marketing
Bill Marketing
Ed Finance
Sue Finance
Sylvia Accounting
<TABLE BORDER> <TR> <TH>Picture</TH> <TH>Description</TH> <TR> <TD><IMG SRC="earth.gif"></TD> <TD>A Picture of Earth</TD> </TABLE>
Picture Description
A Picture of Earth
<CENTER> <TABLE BORDER> <TR> <TH>Picture</TH> <TH>Description</TH> <TR> <TD><IMG SRC="earth.gif"></TD> <TD>A Picture of Earth</TD> </TABLE> </CENTER>
Picture Description
A Picture of Earth
<TABLE BORDER CELLPADDING=15> <TR> <TH>Name</TH> <TH>Major</TH> <TR> <TD>Joe </TD> <TD>Marketing </TD> <TR> <TD>Sally </TD> <TD>Marketing </TD> </TABLE>
Name Major
Joe Marketing
Sally Marketing
<TABLE BORDER CELLSPACING=10> <TR> <TH>Name</TH> <TH>Major</TH> <TR> <TD>Joe </TD> <TD>Marketing </TD> <TR> <TD>Sally </TD> <TD>Marketing </TD> </TABLE>
Name Major
Joe Marketing
Sally Marketing

Horizontal Line or Rule

Background Colors

HTML BODY Tag Resulting Color
<BODY BGCOLOR="#FFFFFF">White
<BODY BGCOLOR="#FF0000">Bright Red
<BODY BGCOLOR="#880000">Dark Red
<BODY BGCOLOR="#00FF00">Bright Green
<BODY BGCOLOR="#008800">Dark Green
<BODY BGCOLOR="#0000FF">Blue
<BODY BGCOLOR="#000088">Dark Blue
<BODY BGCOLOR="#000000">Black
<BODY BGCOLOR="#888888">Dark Gray
<BODY BGCOLOR="#00FFFF">Cyan
<BODY BGCOLOR="#FF00FF">Magenta
<BODY BGCOLOR="#FFFF00">Yellow

The HTML FONT Tag

This text should be black. <FONT COLOR="#FFFFFF"> This text should come out White. </FONT> <FONT COLOR="#00FF00"> This text should come out Green </FONT> This should be Black again. This text should be black. This text should come out White. This text should come out Green This should be Black again.
This text should be normal size. <FONT SIZE=7> This text should come out very lage (size 7). </FONT> <FONT SIZE=1> This text should come out very small. </FONT> <FONT SIZE=5 COLOR="#0000FF"> This text should be larger (size 5) and also Blue. </FONT> This should be back to normal size again. This text should be normal size. This text should come out very lage (size 7). This text should come out very small. This text should be larger (size 5) and also Blue. This should be back to normal size again.

[Previous Class] [MUSIC Home] [Next Class]

Last update: July 15, 1997
Source provided by Sidan Lin and Rich Holowczak
Edited by Wei-Kuang Huang