CSci 105

Introduction to Computers

Lecture 21

© Morris Firebaugh


I. Introduction

Themes:



HTML - The Language of the Web

Some Web Terms and Jargon


Emergence of W3C

 


The Logical Structure/Physical Layout Struggle


The HTML Language


HTML Tag Syntax

<TAG Attribute1=value1 Attribute2=value2 ...> ... </TAG> 
<!--   This is the comment    -->



HTML Editor


Major Button Tools

= Converts selected text to heading--><H1>...</H1>

= Converts selected text to bulleted or numbered lists --> <UL> <LI>...</UL>

= Carriage return + linefeed --> <BR>

= New Paragraph --> <P>

= Converts selected text to BOLD --> <B>...</B>

= Converts selected text to ITALICS --> <I>...</I>

= Converts selected text to underline [be careful not to confuse with links]

= Create a link to a target within this document <A HREF=...> </A>

= Create a link to a target outside this document <A HREF=...> </A>

= Set selected text as a target for linking

= Insert a Graphic here

= Click this button to define a Form

= Click this button to define a Table

= Go to Browser [e.g., NetScape]

= Restyle current document [takes some time]

= This pretty much says it all.


Example of HTML Editor's view of this document


Conclusions:

Advantages of HTML Editor

Disadvantages of HTML Editor



Microsoft WORD


Automatically generated Table of Contents:

MS-Word

NetScape


Chapter Heading page and first figure:

MS-Word

NetScape


Beginning text:

MS-Word

NetScape


Processing images and image headings:

MS-Word

NetScape


Processing bulleted lists:

MS-Word

NetScape


Another Figure with good results:

MS-Word

NetScape


A figure with alignment problems:

MS-Word

NetScape


Problem with aligning images:

MS-Word

NetScape

Conclusions

Advantages of MS-Word as authoring tool:

Disadvantages of MS-Word as authoring tool:



NetScape Composer

Many of these functions and attributes are duplicated in the menus which include an interesting function called "Rainbow Colorize", giving:

NetScape Composer also allows the viewing and editing of HTML code:

Conclusions:

Advantages of NetScape Composer

Disadvantages of NetScape Composer



Adobe GoLive 4.0

History


Main Features

1. Six Powerful Editing/Previewing Options


2. Precision Page Layout Mode

Produces:

Grand-daughter Madeleine

is One Year Old!

Note:


3. Object-Oriented Palette Window
with Context-Sensitive Inspector

Note: Palette has Nine Index Tabs (Layers) on HTML Objects

The Attributes of all HTML Objects are directly addressable by Context-Sensitive Inspector


4. Powerful Color Control


5. Intuitive Linking Options

Internal Links: [e.g., Go To Top]

  1. Drop Anchor
  2. Select Link Name and Click Links Button
  3. Drag [with <Apple>] from Name to Anchor

External Links: [e.g., Go to my HomePage]

  1. Select Link Name and Click Links Button
  2. Type, Copy, or Browse URL


6. Site Management Tools


7. Cascading Style Sheets


Other Great Features

  1. QuickTime Movie Authoring

  2. XML Support

  3. Intuitive Frame Authoring

  4. Support for HTML Forms

  5. Ready-to-Use JavaScript Actions


Problems

  1. Has trouble with some tags [e.g., <PRE>...</PRE>]

  2. Trouble controlling "white space"

  3. WYSI NOT ALWAYS WYG

  4. One solution GoLive recommends is <NOEDIT> tag



Graphics Tools for the Web

Three great Graphics Tools are:


SNAP, an Extension

<Apple> + <Shift> + 4


Nikon CoolPix 950

Examples:


Graphics Converter

Look at the vast range of graphics file types it can convert:

In addition, Graphics Converter supports a wide range of image processing tools, including crop, size, color manipulation, and labeling.



Where Do We Go From Here?

Consider the Light on the Web Project in Japan:


VI. Laboratory Assignment #11

Click here

 



   


Updated April 3, 2001