Web Page Design - Class 1
I. Terminology
-
Web Editor: Software used to create on-line documents.
-
Web browser: Software used to access and view WWW documents. Another
name for a web browser is web client.
-
Web Server: Software that provides the services to web clients. Everytime
you open a page on the WWW, you access a web server.
-
URL (Uniform Resource Locator): How you tell the web browser/client
which web server you want to locate.
II. Other uses of on-line web information
- Hobbies
- Example Syllabus
-
Hypermedia textbooks
Physics Book
-
On-line class readings and handouts
Online homework example
III. Using HTML: Hyper Text Markup Language
-
What is HTML?
-
HTML is the formatting language used to create World Wide Web pages
-
HTML is used to mark the structural parts of a document, such as paragraphs,
lists, headings, etc. so the Web Browser knows how to display the page.
-
HTML is plain text (a.k.a. ASCII)
-
HTML files can be created by most word processors, and many editors.
-
A Simple HTML Document
<HTML>
<HEAD>
<TITLE>Title Here:</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
Document text goes here.
</BODY>
</HTML>
-
Resources needed to design HTML documents
-
Use one of the user-friendly HTML editors: PageSpinner, HomePage, Web
Weaver, Netscape Composer (with Communicator), MS Internet Assistant. There's also
Cyberstudio and related high-end programs
-
A browser to see your work
-
A simple word processor
-
Basic Knowledge of HTML
-
Connection to the Internet (needed for final upload only)
IV. Creating a Page
-
Word 6 (and 7) as an HTML Editor
-
Establishing HTML site Structure-Five Suggestions for Web Site Design
-
Before you begin
-
Adding Text
-
Tips for Entering and Formatting Text
-
Formatting Headings
-
Formatting Lists Word 6 (and 7) as an HTML Editor
-
Inserting Graphic Files (GIFs and JPGs)
-
Formatting Background Colors
-
Converting Documents to HTML
-
Understanding What Converts Well
-
Knowing What Doesn't Convert Well
-
Using Navigational Techniques
-
HyperLinks (<A HREF=>)
-
Internal Hyperlinks
-
HyperLinks to URLS/HTML Documents
-
Special <A HREF=>s for "Mail to"
-
Using Tables for Layout Control
Word does not supply any help for editing the native HTML code. Unless you
know exactly the HTML codes/tags you want to add, it is easier to use an
HTML editor (PageSpinner, etc.). That aside, Word is a very nice editor. MS
Word is however not an automatic road to the web, it is a different road.
There are a few limitations...
1.Tables are created with "width=623". This makes the table a fixed width,
and if the browser is set smaller than 623 pixles wide, the end of the table
is cut off. You can use an PageSpinner or Frontpage to edit the file.
Remove the "width=623" in the TABLE tag, leave everthing else, and with table
will size itself to the size of the browser window. You can edit out the
"width=623" in the edit HTML file screen of Word. However, if you then go
back to the WYSIWYG screen and save, it will insert the "width=623" again.
2.When you link a graphic from a different folder than where the HTML file
is stored, Word will name the graphic "image1.gif" (or imagenumber.extension)
and create a local copy. This defeats the utility of having a common "graphics"
folder.
3.Word allows the use of many fonts and it will create a tag for any special
font (FONT="FancyFont"). The limitation is if the user of your web page does
not have that particular font installed on their computer they will only
see a default font. You cannot plan on users having any fonts other than
default serif and sans serif fonts. We suggest using Arial and Times New
Roman.
4.Talk with me for specifics to loading the Word Internet Assistant onto your machine.
V. Basic HTML
-
A Simple HTML Document
<HTML>
<HEAD>
<TITLE>Title Here:</TITLE>
</HEAD>
<BODY>
Document text goes here.
</BODY>
</HTML>
-
HTML Tags
-
Headings
-
There are six heading levels
<H1>Heading1</H1>
Heading 1
<H2>Heading 2</H2>
Heading 2
<H3>Heading 3</H3>
Heading 3
<H4>Heading 4</H4>
Heading 4
<H5>Heading 5</H5>
Heading 5
<H6>Heading 6</H6>
Heading 6
-
Basic Attribute Tags
-
<B>Bold</B>
Bold
-
<I>Italic</I>
Italic
-
<U>Underline</U>
Underline
-
Format Tags
-
Unlike documents in most word processors, carriage returns in HTML files
are not significant.
-
<BR> - Line Break
-
<P> - Paragraph Break
-
<CENTER>Center</CENTER>
Center
-
<HR> - Hard Rule tag
-
Lists
-
Unordered Lists
-
<UL> and </UL> designate an unordered list.
-
Each element of the list is indicated by the <LI>
-
So the structure looks like this:
<UL> Opens the list
<LI> First list element
<LI> Second
...
<LI> Last
</UL> Close the list
-
Ordered Lists
-
Ordered Lists number each element in the list.
-
Each element of an ordered list is indicated by the <OL> tag.
-
The structure is the same as for an ordered list substituting <OL>
for <UL>
-
Links
-
Link to an external document
-
<A HREF="http://www.tigr.org/~eaarnold">Links to external
document</A>
-
Anchors - Linking within a document
-
This is the link, the place that you are linking from:
-
<A HREF="#Forms">document</A>
-
And this is the anchor, the place that you are linking to:
-
Example Links within a
document
-
Text Element
-
Graphics Element
-
Mail to Links
-
<A HREF="mailto:eaarnold@tigr.org">Mail to Links</A>
-
Colors
-
Background colors
-
Text and link colors
-
<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#000000" VLINK="#800080"
ALINK="#0000FF">
-
<FONT COLOR="#AF0000">
-
Images
-
Tables
HTML Table Tags
|
|
|
Starting
Tag
|
Ending
Tag
|
Tag Description
|
<TABLE>
|
</TABLE>
|
Containers for borderless table.
|
<TABLE BORDER=Something>
|
</TABLE>
|
Tag pair for table with borders.
|
<TR>
|
</TR>
|
Establishes a row within a table.
|
<TD>
|
</TD>
|
Defines a cell within a table.
|
<TH>
|
</TH>
|
Centers a heading at a table's top or side.
|
<CAPTION>
|
</CAPTION>
|
Places a title at the top of the table.
|
<TD BGCOLOR="#9900FF">
|
</TD>
|
Puts a background color inside a table cell.
|
-
Forms (Email returns)
- Frames
- Symbols