Workshop 1: Manipulating Elements
of Web Pages
In this opening workshop, we explore the basic elements of a web page
and learn how to manipulate these elements with a basic web page editor.
We will also briefly examine the HTML scripting language, and we will learn
how browsers process the HTML script into a screen display.
Elements of a Web Page, Web
Page Editors, Backgrounds, Manipulating
Text, HTML,
Text Structuring Formats, Links
to Remote Sites, Links to the Same Page, Manipulating Graphics
Elements of
a Web Page
| page |
text |
graphics |
| background |
color |
buttons |
| tables |
formats |
animated gifs |
| frames |
links |
web maps |
back to top
Web Page Editors
Web page editors are a combination of word processors and layout software
for the computer screen. They allow you to work directly with text and
graphics without scripting the HTML markup tags. The most popular editors
provide a WYSIWYG (what you see is what you get) interface, so that the
html code is hidden from you at all times. Web editors simplify the process
of formatting text, adding tables, connecting to graphics and all other
web page design tasks. Some of the editors, such as Pagemill, work through
"drop and drag" technology, simply dropping graphic files, bits
of text and links onto the page as desired.
The greatest problem with web editors is that they often "manage"
the location of files you are connecting in ways that do not work on the
web. Therefore, you do need to know how to do some clean up of files and
hypertext links in order for your site to work smoothly on the web.
Web editors essentially start with a generic template html file, which
you customize through a selection of menu items or other commands. This
"template" approach is an excellent way to develop a variety
of pages which will ultimately be linked together into a single web site.
By copying certain starting elements, you will create consistency in appearance
and function throughout your web site.
It is essential to text your web page on a variety of web browsers to
ensure the final display on a variety of computers. Most of the browsers
provide sample displays or allow you to switch to a variety of browsers
for such testing. While Netscape and Microsoft Explorer are
the two most dominant browsers in use, it is best to design for a variety
of display systems.
Page Editor Sites:
back to top
Backgrounds
Web page editors will let you quickly choose a background color or insert
a graphic to be tiled into the background pattern. Backgrounds make be
designated as a color or may display a graphic (in repetitive patterning)
on the screen. The goal of the background is to help identify the site
pages as being related to one another, but the background needs to fade
from attention after the first screen or two. High contrast between the
background and text is necessary for easy readability.
back to top
Manipulating Text
Web page editors allow you to easily manipulate text in a fashion similar
to a word processor (with limited styles and font choices). You will also
be able to easily add color coding for various functions. However, the
web browsers still assume that users choose their own viewing fonts (which
must reside on the viewer's computer).
Web editors will automatically single space and add space between paragraphs,
so you may need to learn new commands such as Shift-Return for hard line
breaks.
How many colors can you
use on the web? Millions.
Check out the color pickers
some time.
Most titles and ornate fonts are done as graphics, which allows the
user to set the font and size of viewing text on their own computer. New
versions of browsers support more font choices, but these choices still
depend on the fonts residing on the viewer's computer. In other words,
all but the most common fonts will not show up on the viewer's computer
screen and will be replaced with Times Roman or whatever they have chosen
as the default font.
back to top
HTML
What is HTML? HTML is a markup language which provides a simple, universal
language for all web browsers to use in order to format information on
the computer screen. It allows the user to control display preferences
on his or her own computer screen (font choice, font size, window size,
monitor resolution), without altering the content of the html file itself.
In other words, the browser software "interprets" the html script
and displays text, graphics and tables according to universal markup tags.
The tags remain constant, but the browsers display the information according
to the user's settings.
Do you really need to know it? With a good web page editor, you may
not need to know html in depth. However, when it comes to tweaking display
problems or quickly editing links to graphics or other files, you may need
to know enough html to de-bug a file. The most important reason for knowing
some html is simply to understand how browsers will process your files,
so that when a display goes haywire, you will know how to fix it.
Basically, browsers process html, one line at a time, looking for an
opening markup tag such as <Title> and a closing markup tag </Title>
so that it knows that a certain display command is complete. All html files
are essentially text only files with links to graphics and other files,
so they may be created in any word processor. As text only files, they
download quickly across the internet (it is the graphics that slow down
the process). So for a fast loading strategy, provide some text before
graphics and the reader will have something to read while waiting for graphics
to catch up. Or use no graphics (not very interesting) and your site will
zip out to users.
HTML Guides and Tutorials:
back to top
Text Structuring
Formats (tables)
We page editors will allow you to create tables for organizing information
or as a web page design feature. Tables may have different background colors
in cells and other properties we will look at in the web editor. They also
include text structuring devices such as the horizontal rule and borders
around tables.
back to top
Links to Remote
Sites
Links to remote sites can be added by the web editors, so that any text
may become hot-linked to a remote location on the web. Most editors allow
you to add links by selecting the text you wish to link, then attaching
the URL address to that link.
Here is an example of the HTML script to an external link to Millikin
University's web site:
<A HREF="http://www.millikin.edu/">
Links to other HTML documents within the same directory or folder can
be linked to by typing the name of the other file in place of the URL.
Step-by-step guide to adding an external web page link:
- Find the remote page you want to link to and ADD it to your bookmarks
or write down the URL.
(You might want to simply select and copy the URL
while looking at the page.)
- Go to your web page in the editor you are using, and type in the descriptor
words (and a forecast annotation of what will happen when the viewer goes
to your link).
- Select the text you wish to turn into a hyperlink.
- Find the link command or "Link To:" data entry line and type
in the URL exactly.
(If you copied the URL, you can simply paste it into
your "Link To:" line.)
- Save the page, then test the link in your browser.
back to top
Links to the
Same Page
For longer web pages, you may want to create an index to locations within
that same page. These spots are marked by invisible "anchors"
or "targets" which are linked to the marked text. For example,
this page has links to the top of the page as indicated by the right-aligned
"back to top" text. Your same page links usually go to sections
of text (which means the anchors are placed next to subheadings).
Here is an example of the HTML script to an same page link to the top
of this page:
<A HREF="#top">
Step-by-step guide to adding a same page link:
- Chunk your page into appropriate sections with clearly labeled headings
and dividers.
- Place the cursor where you want to add a hidden anchor or target by
clicking the mouse on that spot.
- Do the insert anchor or place target command (may be an icon or menu
choice).
- Then name the anchor or target. (In Pagemill,
open SHOW INSPECTOR under WINDOW menu).
- Usually your text that will jump to the same page links is a table
of contents at the top of the page. Create a table of contents, then select
one item.
- Find the link command or "Link To:" data entry line and type
in # and the anchor name.
(For example, if your anchor was called "bingo"
then the hyperlink would be "#bingo".)
- Save the page, then test the link in your browser.
back to top
Manipulating Graphics
Graphics always get more attention than text, and in fact, display
text is not really available on the web, so you will have to use text graphics
if you wish to use words to draw attention to your site. Graphics are directly
related to the entertainment value of a site, and yet they need to coordinate
with the information so that neither is the dominant design element of
a page. The goal is for graphics to lead the reader into text, not keep
them from engaging in the information. It's not that text is more important;
it's that graphics and text need to work together.
A characteristic of all graphics is that they have implied motion. They
appear to freeze things in action, and in our minds, we carry out the movement
of the graphic. For example, in photographs of people, we tend to follow
the body movement or direction of the eyes. Therefore, let the eyes lead
the viewers' eyes to an appropriate part of the web page. Animals are almost
always heading in some direction. Again, let the animals lead us onto part
of the screen instead of off the screen. Consider the "movement"
of the graphics you are using, and it will be easy to coordinate how they
work with text.
- Web graphics serve five design functions:
- (1) attention getting or attraction (usually connected to overall purpose
or context of the page),
- (2) iconic representation of content or navigational choices (icons
represent ideas or actions),
- (3) overall atmosphere or mood of the site (background context),
- (4) information represented graphically (maps, illustrations or diagrams),
and
- (5) technically, fancy display typefaces used as titles or headings
are graphics.
Two basic graphic formats are used on the web--gif and jpeg. Gif graphics
are simple high contrast graphics that contain few colors, which makes
them quick loading. Jpeg graphics contain a larger variety of colors and
contrast which makes them ideal for photographs and artwork with variations
or shades of colors. Both graphic formats include information about all
colors contained in the graphic, which is why graphics are so much slower
loading than text. For quick loads, try to keep all graphics below 25k.
Some Graphic Sites:
A tip for speed--once you have loaded a graphic on a home page, it will
be available for all subsequent pages in a site during the user's current
session on the web. Graphics are loaded into a catch file by the browser,
and if it is already in the cache then it will pop onto the screen for
subsequent pages. This is why you can "go back" to pages which
quickly reload on the screen.
Go to Over the Rainbow
for more graphics and backgrounds.
Or how about animated gifs? 
Try Roger's Animated Gif
Collection.
back to top
This site is maintained by Dr. Randy Brooks, Director
of the Writing Major, English, Millikin University.
Last modified July 3, 1998. Contact: rbrooks@mail.millikin.edu