|
|
Anatomy of a Web Page
|
|
|
|
Introduction
 his page demonstrates many of the common
elements found on web pages. Switch to the
labeled version of this page
to see each of the page elements indentified in red.
Also, look at the Source Code
for this page and notice the tags for the various
elements.
This page does not discuss form elements or frames.
|
|
|
|
Format
- The title appears in the titlebar of the
browser's window.
- The header at the top of the page is typically
an image which provides site and page identification.
- The footer at the bottom of the page usually
contains copyright, contact and last update information.
- Tables are used to lay out information in
columns and rows. This page uses a
borderless table to create left and right margins and a
center column of text.
- Paragraphs are blocks of text separated by a
line of space.
- Line Breaks force text to break at the end of
a line, but do not create space between lines.
- Alignment comes in three flavors - left,
center and right. Text and images can be aligned on the
whole page or within cells of tables.
- Lists can be either numbered or bulleted. The
number style can be numbers, letters, or roman numerals.
Listed items are indented and you can create outlines
with nested lists.
- A blockquote is a block of text which is
indented on both the left and right.
- A definition is a block of text which is only
indented on the left.
|
|
|
|
Space
- An offset is the distance between the edge of
the browser window and the page elements. Different
versions of browsers have different offsets.
- Margins are plain space on the left and right
of the page. This page's margins were created with a
borderless table.
- A gutter is the space between columns. Gutters
are created using cellspacing or
cellpadding or by using a narrow column.
- To indent the first word of a paragraph, use a
small transparent GIF image in front of the word. Also,
lists, blockquotes, and definitions all indent blocks of
text.
- Kerning is the space between characters.
- Leading is the space between lines of text.
|
|
|
|
Text
- A headline is a word or phrase at the top of
the page. Usually headlines are large and bold to attract
attention.
- A subhead is used to set off subsections of
text on a page. Web pages use standard heading sizes of 1
(largest) to 6 (smallest).
- Body Text is the main text on the page. The
latest versions of browsers allow you to specify the text
font (Arial, Helvetica, Times), size
(either relative -1,+2, +3 or absolute 10 pt, 12 pt,
14 pt), and style (bold, italics, underlined).
- A caption is text under an image. Sometimes
it's part of the image itself.
- Initial Caps are larger
first letters which extend above the word line. Try FONT
SIZE= +2 on the first letter. Drop Caps extend
below the word line. Both initial caps and drop caps are
used to draw attention to the paragraph.
- A superscript raises a character above normal
height of the line such as the 2 in X2.
- A subscript lowers a character below the line
such as the 2 in H2O.
- Special characters such as the ©
copyright symbol require special
HTML
code.
|
|
|
"Thumbnail for
larger image"
|
Images
- Backgrounds can be either a solid color or an
image which repeats (tiles). This page uses a small image
called grid.gif.
- Images such as charts, graphs, art, or photos
are actually separate files which are displayed by the
page. GIF and JPEG are the two most widely used file
formats on the Web.
- Picture text is text created in an image
editing program such as Photoshop. It is generally used
to get around the style and formatting limitations of
today's browsers.
- Transparent GIFs are images which have one
color (usually white) that shows through to the
background color or image.
- Animated GIFs are images which move because
they have multiple frames. They work like a flipbook.
- Thumbnails are small versions of larger
images. People click on the thumbnail to see the larger
version.
- Custom bullets are images which are used in
place of the standard list bullets.
- Custom rules are images which are used to
create horizontal or vertical lines or divisions.
|
|
|
 
back |
next
Top of Page
|
Links
- Text Links take you to other parts of the same
page (anchors) or to other web pages or files. They can
also provide FTP or mailto links. You can specify the
text link colors of a page or use the browser's default
colors.
- Buttons are images which are links. Typically
they are arrows or small beveled edged rectangles.
- Navigation links are text links or buttons
which provide movement within a website.
- An image map is an image with hot spots. Each
spot can be a separate link. This page's header is an
image map.
|
|
|
|
Web Design |
Page Elements |
Resources |
Gallery
|
|
