HTML resources page exercise

An HTML resource page is created for later use. The web editor Composer is used to create tables, named anchors, horizontal rules, links, and inline multimediaP.D. & M.S. Krolak ©2005

Create the Table of Contents (TOC)

• Step 1: Set up the Head tags Open the Composer to a New blank page. Click [Format]

• Select [Format]/Page Colors and Background ..• Chose a set of colors for text and background color or

background image. • Select [Format]/Tile and Properties ...• Set the Title and page description -- this is important for

the spiders to correctly classify or categorize your page. • [File]/SaveAs .. -- save the new document as  

resource.html to your computer.

Create the Table of Contents (TOC)

• Step 2: Create the Table of Contents Section

• Use the Alignment button to select Centered and the Style selector -- H1 heading. Entitle the page YOUR_Name's Resource page.

• Table Of Content is a H2 heading, After it is created highlight it and use the Target Operator to Name it TOC.

• Create an Unordered List with four items:– Animated gifs– Backgrounds– Audio and Sound– Video and Movies

• Next use the  [Insert]/Horizontal line to set off the Table of Contents from the four other sections

Next Create the Four sections:

• Each section should have a Heading Level 2, i.e. a description of the section, a table, a return to the Table of Contents (link), and a horizontal line

• Step 1:  Create the First Section Heading• Create the heading first, i.e. Animated Gifs. Use

the Style Operator chose -- heading 2. Create a Named Anchor by highlighting the section heading. Click [Insert]/Named Anchor. Use the name -- Animated

Next Create the Four sections:Step 2: Create the Table of resources for this Section

Next the create the table using the following:

1. 4 rows 3 columns 2. Check caption and select top 3. Set border Border 0 or use 10 for a 3-d picture frame 4. use 80% width and

Now Click [Advanced Edit .. ]

click Arrow on Attribute Window

Select bgcolor and click button chose a light pastel

repeat and select align choose center. Click [OK] twice/ Move mouse to the top row label the cells (Link to Source,

Comments, Sample) While still in top row, Click Format/ table properties/ Row/

select color and choose a compatible color for the headings row

Next Create the Four sections:

• Create 4 tables that contain links to archives that free backgrounds, animations, sounds & audio, movies and video clips.

• Each table will have a links to three archives, comments on the archive, and a sample of the archive.

Next Create the Four sections:

Exercise 2: Next Create the Four sections:

Each section should have a Heading Level 2, i.e. a description of the section, a table, a return to the Table of Contents (link), and a horizontal line

Step 1: Create the First Section Heading

Create the heading first, i.e. Animated Gifs. Use the Style Operator chose -- heading 2. Create a Named Anchor by highlighting the section heading. Click [Insert]/Named Anchor. Use the name -- Animated.

Step 2Step 2:  Create the Table of resources for this Section•Click [Table] use the following: •4 rows 3 columns•Check caption and select top•Border 0 or use 10 for a 3-d picture frame•use 80% width

Click [Advanced Edit…]

•set both cell parameters to 2• set align -- Center •Select bgcolor -- chose a light pastel•Click [OK]•While still in top row, Click Format/ table properties/ Row/ select color and choose a compatible color for the headings row•Move mouse to the top row label the cells (Link to Source, Comments, Sample)

Step 2 (more)The table should now appear in Composer's window

Place the mouse in table's top row. Click [Format]/ table properties. Select the Cell tab.

•Selection  --chose Row •Check Background Color:

–  select color and choose a compatible color for the headings row (place mouse in the color cell)

•Click [Apply] and [OK]

Move mouse to the top row label the cells. Type the following (Link to Source, Comments, Sample)

Step 3 & 4Step 3: Create a Link to the Table of Contents and Set a Horizontal Line

Create a link to the Table Of Contents. Click Link button and select the named link created by the Target operator for the Table Of Contents named anchor.

Create a horizontal line, i.e. [Insert]/Horizontal Line .. to end the section.

Step 4: Copy and Paste 3 copies of section one and make the correction edits

Highlight the first content section. Start at the Header and go past the horizontal line and Copy It (Ctrl C). Now Paste (Ctrl-V) 3 copies of the section.

Correctly name the section headings. After it is created highlight it and use the Target operator to name it similar to the section's heading.

Link the List items in the Table Of Contents (TOC) to the appropriate heading (section).

Find the Archives for each Category and Fill in the Tables

• Step 1:  Find three archives for the category of the section

• Use your search skills to find:– Archives of animated gifs– Archives of background textures– Archives of sounds and audios (mp3s,wav,

au)– Archives of videos (avi, wma, mp4, etc.)

Step 2:  For each archive fill in the row of the section's table• Link in the Resource (archive) site• To Link to the Web site of the Resource the student needs the site's

URL found in the Locator bar of the browser. If the student is editing and searching at the same time the student can copy this URL using the familiar copy and paste approach. Here we must have two windows open:  the browser and the editor. After we have copied the URL in the browser we move to the Table cell in the Editor, click on the link button  in the Composition bar and type the text that will tell the viewer  about the site and then paste in the URL captured in the browser. Click Apply and Close. The text we created should appear in the first of the row as a link.

• Create the Comment about the archive's contents.• The comment cell is to give more information about the site and the

resources that are there. Normally, this will be text although at times it maybe linked to other pages within the site.

Link in a sample of the Archive's materials for this category • Placing an Image, an animated gif, or background If the browser is open, the image

or background may be clicked on using the right button and the Selection of the Save Image Location used. (This is like pasting the image's URL in the Clipboard). The student goes to the editor selects the table cell associated with sample and clicks the Image button  . The image's URL is then pasted in the dialog box (Ctrl-V); click Apply and Close.

• Linking  an audio or video file into the cell (more accurately into the web page) • If the browser is open, the student has two choices:

– The First Choice -- Pl the Right Mouse Button over the Link chose SaveAs to the A:/ drive. Generally this course of action is not recommended as the files may be HUGE.

– The Second Choice -- Again using the Right Mouse Button over the link select Copy Link. This copies the URL to the Clipboard.

• Select the Table cell in editor then click on the  Link Button. Fill in the text field with the appropriate description of the file. To fill in the URL:

• If the file is saved on the computer use the Choose File button to find the file on the disk, open it , Apply and Close.

• If the second choice was taken then paste the URL into the link field.

Create a Link to Your Home Page, a Back Button, and Email

Create a Link to Your Home Page, a Back Button, and Email

Step 1: Create a Link to Your Home Page

Link the current page, resource.html, to the student's home page, i.e. index.html. Here the URL chosen is the absolute URL of the home page. Click on the Link button.

Continuing Ed. & Online Students

The URL is: http://ceweb.uml.edu/StudentID

The StudentID is the User ID issued at registration

The text is: Visit My Home Page

Step 2: Create a Back Button in Javascript to go back to the last page the viewer visited

Using a JavaScript to act in a manner as the browser's Back button (see Composer tutorial). Click on the Link button.

The URL is: javascript:history.back() The text is: BACK

Step 3: Create an Email Link

Create an email link using the Mailto: method (see Mailto: in Composer tutorial). Clink on the Link button.

Continuing Ed. & Online Students

The URL is: Mailto:Your_Email_Address_here The text is: Please send me comments and

suggestions

Modify index.html to link to your resource.html

Link the student's home page, i.e. index.html to the resource.html. Click on the Link button.

Continuing Ed. & Online

Students

The URL is : http://ceweb.uml.edu/Your_User_ID/resource.html

The text is: Visit My Resource Page

Test and move all files to the web site

Test the new resource.html page and the modified index.html. Make sure all links work as advertised. Check all spelling and grammar. Examine all the table cells to make sure everything links. Follow the directions of Exercise 6 and 7 of Lab 3. Use the Dr. HTML program to help you find any errors and bugs. The student has two mechanisms to transfer files from the working directory on the student's computer:

1. Use Ws_ftp, or some similar ftp tool, to transfer your files to your web site:

Ws_ftp is by now somewhat familiar and relatively simple to use. Further it can be used to correct many of the mistakes that can happen in creating a web page. Not all of these mistakes are due to the author's errors. For instance, Window's systems are not case sensitive, while Unix systems are. This can lead to Composer locating files and linking them on WIndow's machines only to find that the links don't work when uploaded to the Unix platform because the linked file's names don't match due to case. Ws_ftp has tools for modifying the file name. FTP also allows the author to see the complete directory structure and the creation dates and the content sizes, etc

Any easier way to upload to the web server

1. Use the Composer [Publish] button:

The [Publish] button is a very effective way to transfer a file or a directory of files to the web site. If one is making changes and edits and then verifying them on the web site the [Publish] button can be very efficient and supplies all sorts of warning and error messages to tell you about potential mistakes. However, it does not allow you to create different versions of the file in the web site and overlays the current system so be very sure that you are ready to replace the current version in the web site. In the above discussion the reader should not assume that it is necessary to use only one of these choices. In fact the authors recommend that the web designer use both methods based on what types of problems are being encountered. [Publish] is useful to make rapid changes while Ws_ftp is useful to deal with annoying missing files and similar problems.

Important Note on how to avoid errors and how to fix them when they occur.

The student is reminded that each and every file used to create the resource.html page must be transferred from the student's computer. (what you saved to your A:/ drive). This list includes:

resource.html index.html ( you added a link to resource so you need to transfer the

new file) all animated gifs (3 plus the email one) all background images (3) all sound files (3)

steps as in

Missing

Finding and fixing errors:

The failure to transfer a file will cause a variety of errors.

Missing or Misspelled Link Errors: The most common is that the page does not link (403 error). Did the file transfer to the web site, if yes then look at the file name. To fix make it make sure the name of the file matches the one in the error message including case.

Use the [Rename] button in the Ws_ftp to change the name if there is a spelling or case error.

If you forgot to move the file from your working directory to the web site, then use Ws_ftp to move the file from one machine to the other.

Missing or Misspelled Images File Errors:

If a little broken mirror appears instead of the image then place the mouse over the mirror icon and press Right Mouse Button. The option [view image] will display the name of the image that the browser is looking for. Repeat the steps as in the broken link.

Missing or Misspelled Audio files:

Audio files will act like missing links and are repaired in the same fashion. The browser may not have the correct plugin to play the file. If you need a plugin the browser normally will assist you in finding one. Follow the directions for download and installation of the necessary plugin