Quick study computer HTML guide 600dpi
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (12.97 MB, 6 trang )
PAGE OPTIONS
Getting Started with HTML documents
HTML documents are plain-text files that are created
using a text editor; word processing software can be used
if the document is saved as "text only with line breaks"
This Guide Assumes That You
I . Have a general understanding o f how Web servers
and browsers work
2. Have access to a Web server (unless the documents
are produced for personal use on a local system)
Helpful Terms
WWW: World Wide Web
HTML: Hypertext Markup Language
ASCII: American Standard Code for Information
Interchange
Hypertext (hyperlink, link): Text or image within
HTML linking to another document
Text Editor: SimpleText on a Macintosh operating
system, Notepad on Microsoft Windows
Image Map: One imagc with hyperlinked quadrants
(hot spots)
Element: Fundamental component of the structure of
a text document
Tags: Used to denote various elements in the HTML
document
URL: Uniform Resource Locator; the address to
any Internet site that is part of the WWW (such as
www.quickstudy.com)
Attribute: Additional information included inside the
start tag
Every HTML docum ent should contain the basic
HTML tags; the head contains the title and the
body contains the text that is made up of para
graphs, Iists, images and other elements; not every
browser supports all tags; however, th e browser
ignores the tag if it is not supported
Note: HTML is not case-sensitivc; <body > is
equal to <BODY> or <BoDy >
Page options are included as attributes of
the <BODY > tag
Background Image
The BACKGROUND attribute allows an image
to be used as a background for your document
Example: To include an image of stone for
the background, enter
<BODY BACKGROUND="stone.gif" >
Required elements shown in thi s bare-bones
example:
Background, Text & Hyperlink
Colors
By default, browsers display text in black and
hyperlinks in blue with a gray or white back
ground; HTML allows you to change thesc
elements
BGCOLOR = Background
TEXT = Text displayed in the browser
LINK = Hyperlink, ALINK = Active
Hyperlink, VL INK = Visited Hyperlink
Example: For a black background, silver text,
and white hyperlinks
Code Example
1 <HTML>
2 <H EAD >
3 <TI TLE>A b are· bones HTML example</TITLE>
< / HEAD >
<BOD Y>
4 <fll>It is eas y to lea r n fITML< / Hl>
5 <P >Thi s i s t he f i rst paragraph . It is
short , bu t it i s st i l l a paragraph ! </P>
6 <P>Th i s i s th e second paragraph . </P>
< / BODY>
</ HTML>
Browser Output
Note: The six-digit number and letter combina
tions represent the amount of RGB (red, green,
blue) color as hexadecimal values from 00 to FF;
00000o is black (no color), FFFFFF is white (fully
saturated); finding a specific color using these
number and letter combinations can be cryptic
Forms allow you to structure input from the uscr, such as cus
tomer response
Constructing a form is a two-part process
I. The form must be created within your J-l TML document
2. A program (usually C, Unix or Perl) must be created; this
program is called CGI (Common Gateway Interface); CGI
receives the data from your form and implements the action
specified within the program
Get a trial version of Sendit™ from
ll/sellditinj().htm
The syntax for creating forms consists of 3 di stinct elements
between the <FORM> tags
I. I NPUT elements are the basis for various button types and
text inputs
• Text: Single-line text window
• Radio: A group of buttons in which only one may be chosen
• Checkbox: A box that can be checked or unchecked
• Reset: A button set to clear form values
• Submit: A button to send the form data to the CGl on the server
2. SELECT elements create a pull-down menu
• OPTION elements define the mcnu choiccs
• The SELECT ED attribute in the OPTI ON element speci
fics the default menu item to be displayed
3. TEXTAREA elements specify a multi-line text field
• The COLUMNS and ROWS attribute s between the
<TEXT AREA> tags specify thc default value ofthc field
FORMS
Tm il: lhe lintp....,..m. It il fbort, but •• d . p"""lJ'llPh'
1bi.. it the "toad plf¥lPh.
=
~
m
Z
11
HOW use f ul was th is website ?
c h ecked n a me = " Rl " >Very useful
t y p e = " radio " na me= " Rl "
Code Example
1 <html >
2
3
It is easy to learn HTML
<head>
<t i t le>Forrn < /ti t l e>
</ head>
<body>
4
yourdoma in . com / cgi -b i n/ send . e x e "
me thod= " POST " >
name =" RC?'I' ''
v alue= " y o u r domain .com ">< input
t ype= " h i dden " name= " SMTP "
va l ue ="you r ma i l" >
typ e=" hidden" n a me =" Subj ect"
va l ue= " s ubject " >
type = " hidden" name =~' r e f er "
va l ue:::: t.hanks . htm" >
a iign= " center " >
Fil l o u t t h e f o rm belo w t o
5
v al u e;:;:::: " V2 " >Mode ratel y use fu l
typ e= " radio " name= " Rl " val ue= " V3 " >Not useful
< / b l ockq uote>
12
13 <inpu t t :ype= " r ese L" value;; " Click here to reset " >
< / p>
</E orm>
< / body>
</ h tml >
Browser Output
ll
receive a free catalog .
</ center>< / di v><blockquote>
name~ " Add
Me t o Your Mai l ing List "
v a l ue :::::" ON " >Add M.e t o Yo u r
r.lailinq
Li s t
type== " chec k box" name;o:: " Send
['lie lnfo r ma t ion " valu e ::::" ON " > Send Me
6
Informat i o n </ p>
More
7
Name
8
9
name=" Con t a ct_FullName " > </ p >
E - rna i l < input type ::::" t e xt "
si z e = " 25 " n ame = "Contact_ Email " >< / P>
comme nts < textarea r ows = " 2 II
j
~It1- - - - -
f .outlbefonnbdow lO ceCetft ll fi'ee clltMo&.
Vi---
A I ------= rAddlletoYourWaliac lilt
~ r SeM Me MortWormMiol!.
~I
_
~ N"""
it- '_I
E-mlli r-I- -- -
:
~
.J3
......'"
it-'Howcidyou&d\lf1 1~~3
:::
L
I
HowvsetUlwudDwebta?
va:y\lldJl r WodenRIyuse6.11 r NotUMfbl
~
til
1
m
nameC=::: " Co tnments " cols:::: " 3 4"> < /
Wj jJJcl.... .... "-1cw. .....
How a Form Works
t extarea>< / p >
10
did
you
fi
n
d
u
s?
<
sel
ect
When the "submit" button is pressed, the data from the
n a me"" " Re ferra l" si z e::::: "l" >
form field is sent to a program (CGl) of the URL specified by
va l ue :::::" Newspaper " >Ne wspaper the ACTION attribute in the <FORM> tag; the NAME attribute option >
For more information about creating forms and other
is matched to the corresponding VALUE attribute anel the pro
<op tion va lu e= " Refer ral"> Re ferral< /
gram takes its action (such as sending the data to you as email)
advanced HTML coeling, visit II'lI'w.deve/oper.col1l
opti o n > < /s ele c t >
1
CHARACTER FORMATTING
Preformatted Text <PRE></PRE>
This tag makes spaces, line breaks and tabs
appear in the same location as the source file ;
this is useful for displaying program listings
Note: The <PRE> tag can be used with the
WIDTH attribute; this specifies the maximum
number of characters for a line
HTML tags consist of a left angle bracket «), a tag
name, followed by a right angle bracket (» ; tags are
usually paired to start and end the tag, instruction; the
end tag is identical to the start tag, with a slash (/) pre
ceding the text within the brackets; some elements may
include additional instructions, called attributes, in the
start tag to specify the position of the content
Basic HTML Tags
<HTML></HTML >
This element tells the browser that the file contains
HTML-coded information, also indicated by the
.html or .htm file extension
Extended Quotations
<BLOCKQUOTE >< / BLOCKQUOTE>
Use the <BLOCKQUOTE ></BLOCKQUOTE >
tags to include long quotations in a separate
block in your browser
<HEAD></ HEAD >
The head element identifies the first part of your Horizontal Rules <HR>
HTML-coded document that contains the title
This tag produces a horizontal line the width of
the browser window, useful for separating sec
<'rITLE> < / TITLE>
The title element contains your document title and tions of your document; the SIZE attribute
identifies the content in a global context; the title is specifies the line thickness in pixels; the WIDTH
not displayed within the text of the browser, but at attribute specifies the line width as a percentage
of screen width
the top of the browser window
Note: The title is what is displayed on someone's book Forced Line Breaks/Postal Addresses
mark list, so make your title description relatively short <BR>
Using the <P > tag for displaying short lines of
<BODY>< / BODY>
text results in additional space between lines;
The body contains the content of your document that using the <BR> tag causes a line to break with
is to be displayed in the text of your browser
no extra space; this is useful for displaying postal
addresses
Headings <H1><lH1> through <H6><lH6>
Note:
No end tag is used with the <BR> tag
HTML has six levels of heading, from I to 6, with I
being the most prominent level
Code Example
Note: The tags explained below are used within the
<HTML >
body of your document
2 <HEAD>
3 <TITLE>Pr ef o rrna tt ed Text , Extended
Paragraphs <P>
Quo tat i ons, Horizon tal Ru l es & Fo r ced Line
Unlike documents in word processors, carriage returns
Brea k s < /T I TLE>
< /H EAD>
in HTML documents are not important; word wrapping
<BODY>
can occur at any point in your source file and multiple
4 <PR E> on Mou seUp chang e end on c h a n g e set t h e
spaces are reduced to a single space by your browser;
for e eo lor of sprite 1 t o random ( 2 5 6) - 1 end
generally, word wrapping will occur after 72 characters
</ PRE >
Note: Paragraphs must be indicated with the <P>
5 <P>Int e rnet g rowt h < /P>
<BLOCKQUOTE>
tag; a browser ignores any indentations or blank lines
6 < P>The onli n e eorrununity ha s de v e l oped i nt o
in the source text; without the <P > tag, the document
an i nc r e dibl e mixtu re of c ul tu r e, commerce ,
becomes one large paragraph
and ente r t ai n me nt. Whe the r s h opp i n g ,
Code Example
plann i ng an e ve nin g o n t h e t own , o r
explo ring the many att ract ions , th e I nt e r ne t
puts th e world at your f inge r tips . </P >
7 <P>- Al1 Me dia Sol u tions , 1997</ P>
< /BLOCKQUOTE >
<BR>
<BR>
<BR>
8 <H R si z e = " 3 " width= " 90% " >
9 Qui c k Study Ch arts Inc . < BR >
1 1 81 So ut h Ro gers Circ le , Suit e 17<BR>
Boca Ra ton , FL 3 3487<BR>
, <HT ML>
2 <H EAD >
3 <TI TL E>Hea d ing & Paragraph e xampl e s</T I TLE >
</ HEAD>
< BODY>
4
5
6
7
8
9
'O
<Hl> He ad i ng leve l l < /H l>
<H2 >Head ing l evel 2 </ H2 >
<H3 >Heading level 3 </H3 >
<H 4> Heading leve l 4 < / H4 >
<H5 >Head i n g leve l 5 </ H5>
<H6 >Hea d ing l eve l 6</ H6>
<P>Th i s is the fi r st paragraph. I t is sho rt ,
but i t is still a pa ra graph ! < /p>
</BODY>
< /HTML>
</BODY >
</ HTML>
<B>bold text</ B>
< I >italic text </ I>
<TT>fixed width font </ TT>
<u >underline tcxt </U>
<SUB >subscript < / SUB >
<SuP>superscript< / SUP >
The <FONT>< /FONT> tags are used
SIZE and COLOR
with the FACE,
attributes to determine the face (such as
"arial"), the size (in points. PT), and color
of text to be displayed in the browser
Character Entities
Escape Sequences: Used in escaping
special characters and displaying other
characters not available in the plain
ASCII character set
Three ASCII characters, «), (» , and
(&) , have special meaning in HTML and
cannot be used "as is" in text
An escape sequence must be used
instead
&1 t; the escape sequence for <
> the escape sequence for >
& the escape sequence for &
&oum1; the escape sequence for 6
&nti1de; the escape sequence for Ii
È thc escape sequence for E
Code Example
1 <HTML>
2 <HEAD >
1 <T I T LE >S t y le s & Mo r C</ T I TLE>
< / Head>
<BODY >
4 <UL>P hy si c al s t yles
~
<LI>< B>bold t ex l </B>
<L I ><U> u n d erli n e d lex t</U>
<LI>< I > i ta lic text~/I>
<LI>< TT >f ix e d ~ w idth te x t</TT>
q <LI>< FONT CO LOR= l gree n "
FACE = " ari al " s i ze= " 7 PT " >g ree n
a ri a l 7pt </FONT >
() <LI>< SUP>s up erscr ipL </ SUP>
11 <LI> <SUB >s u b scrip t </ SUB>
< /UL>
12 <U L> Esca p e Sequ ences <b r>
<LI> &l t ; <LI> ~ g l ; <LI> & ;
< / UL>
, ~ <UL> Mo re ASCII c ha racter s <b r >
<LI>l owercase 0 wi t h an uml a u t
&o u ml ;
<LI >l c werca se n wi t h a ti lde ,
&ntil d e ;
<LI >up p ercase E with a grav e
a ccent , &Egl ·av e ;
</ UL>
</ BOD Y>
< / HTML >
6
7
8
Browser Output
Browser Output
Browser Output
Physical Type Styles
Heading level 1
HeadiDlllevel 2
_
_
_
The caine cOflllD&ly hM devdoped "
... il'lcredible miKtwe of "*'n,
c~ce
.
.ad ~ 'WbeCher sMWoc. P..... 111 everWw QO the loWD , 01" ~
the mIIIIY !tbc~ . tbe I1ltemet pwslhe 'NortdatyoUr fin&enip,
H...... J..tl3
-_.
_
_
I 4
H
. .....
lne!
green arial 7pt
..........
--
A1 }.(edlt. ~.I 997
l-_a
I ~:::=~, SUte 17
.J
loowIR..,
•
~
w6 IID. ....... d
~.u n wilh . tide. !'
• _E,.;o, ...... - . E
.,
2
HTML supports unnumbered, numbered and def
inition lists
Unnumbered Lists
• Start with the opening list <UL> tag
• Enter the <LI > (list item) tag, followed by
the item to be listed
• End the completed list with the </UL> tag
• The TYPE = "shape" attribute in the <UL>
tag can be used to specify a SQUARE- or
CIRCLE-shaped bullet; the default solid disk
shape is displayed ifno shape is specified
Note: No closing tag < / LI > is required
Numbered Lists/Ordered Lists look identi
cal to an unnumbered list, with the exception of
the <OL>< /OL > tags
Note: The list items are tagged using the <LI > tag
Definition Lists <DL></DL>
A definition list consists of alternating definition
terms <DT > and definitions <DD>
Note: The <DT> and <DD> tags can contain
multiple paragraphs <P>, lists or other definition
information
Nested Lists
Lists can contain sub-lists called nested lists;
you can also have several paragraphs, each con
taining a nested list, in a single list item; elabo
rate nested lists are difficult to follow and should
be avoided
Code Example
< HTML> '
<HEAD >
Hypertext Links: The areas (graphics or
words) in an HTML document that cause
another document to be loaded when a
user clicks them
Table Elements
The <TABLE >< /TABLE> tag defines a table in
HTML (use the BORDER= attribute to specify
border thickness)
<CAPTION> defines a caption for the title of the
table; the default position is top-center, but the
attribute AL I GN=BOTTOM will position the cap
tion below the table l
<TR> specifies a table row within a table; you may
specify the default attributes for the entire row (see
Table Attributes)
<TH> defines a table header cell; the text in this
cell is bold and centered by default; table header
cells can contain other attributes (see Table
Attributes for more information)
<TD> defines a table data cell; the text in this cell
is aligned left and centered vertically by default;
table data cells can contain other attributes (see
Table Attributes for more information)
The ability to link text and images to
another document is a major capability
ofHTML
Table Attributes
ALIGN (L EFT, RIGHT, CENTER) the hori
zontal alignment of a cell
VALIGN (TOP, MIDDLE, BOTTOM ) the ver
tical alignment of a cell
COLSPAN=n specifies the number (n) of columns
a cell spans
ROW SPAN=n specifies the number (n) of rows a
cell spans
NOWRAP turns off word wrapping within a cell
Tables with Images
Use a table with no borders to create the appearance
of one image with multiple images; interesting dis
plays can also be created by using table borders
<TITLE>List e x ample <!T I TL E>
1 </HEAD >
2 <BODY >
3 <UL>
<LI >M i crosoft Internet Expl ore r
<LI>Ne t scape NavigaLo r
· <!UL>
Code Example
<OL >
2
3 <TITLE> t ab l e example</TIT LE>
</HEAD>
<BODY>
of
Defense" s Advanced Research Proj e ct Agency,
now c al l ed the I nternet .
<DT>ln t ernet
<DD>Extensi ve globa l networ k of computers
provi ding services and inforrration on alrrost
8 any subj ect .
<!DL>
<UL>
<LI> Common WWW browsers
9 < UL >
4 <TAB LE border=2>
5 <CAPTION>caption contents a r e inser t ed here CAPTION >
<TR>
LINK~ " #0 08 0 FF " >
Linking to a Web page
de f ault . as p ? p ag e=c h ar t s &pg=qui c k
study" >Survive i n Co l leg e wi t h
Sty l e< /A>
Links between specific sections
of different documents
Bookmarks are used to set a link from
document A (documentA .html) to a spe
cific section in another document B
(documentB.html)
I. Insert the HTML for the link to the
specified anchor in document A:
<A HRE F=" Cha rLs . h tm l#Cha r t s " > l i n k
within documen t A</a>
2. lnsert the HTML for the specified
anchor in document B:
<A NAME = " Cha rt s " >Ancho r
d ocument B< / a>
text within
<A HREP= " # Char Ls " >link within cur
rent do c um ent< / a>
<A NAME:::. " #cha r ts " > Anchor text for
Note: Be sure to insert the
<A NAME="anchor" >a11chor t ext </A>
tag in the HTML document where the
link is placed
<TR>
8 <TO>cell contents</TD>
9 <TD>cell contents</TD>
</TR>
Links to Email
By including the Mail to attribute in a
hyperlink, you can make it easy for view
ers to send email to a specific person
To include a Mailto, enter:
10 <TD>cell contents</TD>
11 <TD>cell contents</TD>
<!TR>
</TABLE>
<!BODY>
</HTML>
Browser Output
Browser Output
current doc umen L< / a>
6 <TH>Header cell con t ents</TH>
7 <TH >Header cell con t en t s</TH>
</TR>
< T R>
10 <LI>Mic r osoft Intern et Explorer
<L I >Ne t scape Nav i gator
</ OL>
</UL>
</BODY >
<!HTML>
When an HTML editor specifies text as
a hyperlink, the color of the text will be
changed to a bright blue; bright blue is
the default hypertext color; to change the
default color, this line must be added to
the HTML document after < HEAD>:
Links between specific sections
within the current document
This technique is the same as above, with
the exclusion of the filename
1 <HTML>
< HEAD>
<LI >Microsof t Inte r net Explo r er
<LI >Netscape Navigator
< /OL>
<DL>
<DT>ARPA Ne t
<DD>Ne t work cre ated by the Departmen t
Tables are ve ry useful for presenting tabular infor
mation and organizing complex Web pages ; a
table consists of heads to explain what is included
in columns/rows, rows for information and cells
for each item
Na me</ A>
Exampl e :
s t u dy ai d@b arc h arts . com" >
c onL a c t< / A>
" lo6a_ _ UpIo
Links to Images
To let the viewer choose which images to
load, rather than waiting for many full
size images to load, small representa
tions of images, called "thumbnails,'" are
linked to the full-size original
Example source code:
" N ......,.N........
I. lo6a_ _ _ UpIo
AlU'ANet
--
N_
...-.d".._
Project~. now ale4"~
n. ~ ~ adWofk. ofcomputcn providiDa..-u. Md ~
011
aboet.." . .,.u.
i mage " >
..;I
Frames pages are a way to include multi
ple pages together within a single brows
er; each frames page, orframeset, acts as
a template that loads pre-existing pages
into their specified positions, or frames;
by keeping the pages in a frameset, each
new page loads independently of the oth
ers; this allows you to keep the site's nav
igation separate from the main content or
any other features you may wish to
include on each page
The use of frames pages in a Web site is
also a convenient way to manage and edit
the site '5 contents; for instance, if the
navigation buttons were on the same page
as the main content, you would have to
change the navigation on every page
whenever it needed an update; however,
by using a single page as the main navi
gation , you only have to make changes on
that page
Main Frame
This will be the main page, where the bulk of
your content will go; all links from the con
tents frame will open in the main frame,
including links to other sites, if you choose
Code Example
<HTML>
<HEAD>
<TITLE >Ma i n Frame</TITLE>
<base t arg e t = "_self " >
</ HEAD>
<BODY>
<£ont £ace= "Ari a l " ><b>This is th e main
f rame.
< /b></font>
</BODY>
</HTML>
You can even create frames inside the main
frame; floating frames or in-line frames
appear inside the page; simply place the fol
lowing tag inside the body of the document,
specifying the page to be loaded:
s rc =" main_frame . htm "
sc ro lling= " auto " >
<no f rames>
<BODY>
This pag e uses frames , but
your brows er d oesn ' t support
them .
</BODY >
</noframes>
</fra meset>
< / HTML>
~ ot-
,ots,
Iga
When building framesets, it is important to make
sure they look the same in different browsers;
just because a page looks good in Internet
Explorer doesn't mean it will work in Netscape
Navigator
By default, there will be borders on the frames ;
to eliminate the borders, you must specify the
following inside the initial <frameset> tag:
col s = " 20%,80% "
framespacin g = " O" border= " O"
fram ebord er= " O" >
<IFRAME SRC= " iframel. htm " ></IFRAME>
Contents Frame
This will serve as the site's global naviga
tion, which is the page containing all the
main buttons, as well as other links and
email addresses, for navigating through
the site; contact information is usually
placed somewhere on this page as well;
this is convenient because it offers the
user easy access to the navigation, rather
than having to scrol1 back and forth to
find links;, the contents frame can also be
used for displaying banners, which are
graphic links to other sites; each link you
click on will open a page in the main
frame ; this is a way to open any external
links (links to other Web sites) inside
your site; in a normal non-frames page,
linking to another Web site will cause the
user to leave your site; by keeping the
external site within a frameset, the user
won 't leave your site
Code Example
The <noframes > tag prompts an error message
to any user whose browser doesn't support frames;
however, only the older browser versions will not
support frames; free, updated versions of Internet
Explorer and Netscape Navigator can be down
loaded from the following Web sites, respectively:
_
..
.......
-
,..
roso/t.com/windows/ie/
/>
It is important to keep the users from com
pletely leaving your site when you offer links
to other sites; normally, without frames , this
is done by opening a new browser window,
which may leave your site open but obscures
it with the new window; frames pages allow
you to open a page from another site within
your own site; to do this, simply link the
external pages to open in the main frame
<HTML>
<HEAD>
<TITLE>Left Frame</TITLE>
<base target= "rnain ">
</HEAD>
<BODY bgcolor= " #BFCAE1 " >
<b><font £ace= "Arial " >This is the
font></b> <b><font face=lIAr i al ">Left Frame
for navigation . < /font >< /b>
<font £ac e = " Arja l " ><b>
href= "main_ frame . htm " target= lImain " >home
a></b></font>
<£ont £ a ce= " Arial " ><b>
hreE: " second--page . htm" target= "main ">Pa ge
2</a></b></font>
</BODY>
</HTML>
1. Browser Output
Frameset
Now that you have the individual pages
already built, you need to create the frameset,
which will load both pages into one, as sepa
rate frames; there are many ways to layout a
frame set: with a header or a footer, with a
banner and contents, and even with in-line
frames; in this instance, where the frames are
divided vertically between the contents frame
and the main frame, they are treated as
columns; you can set the size of the frame set
columns in the first tag, based on a percent
age of the entire page:
<frameset cols= " 20% , 80% " >
The <frameset > tag will replace the
<body> tag found in normal HTML docu
ments; the entire page should look like this:
<HTML>
<HEAD>
<TI T LE>frameset</TITLE>
</HEAD>
<frame set cols= " 20% , 80% " >
target= " main "
src= " leftfra me. htm " >
4
Floating frames (windowless, inline frames) are
great when you have a lot of text but don't want
the design of the page to scroll
To create an inline floating frame, use the
IFRAME
tag
NA~lE= " Framel "
SRC:::::: ll frame . htm " :::..
</ I FRAME>
The IFRAME tag creates a tloating frame at its
location in the HTML file; Internet Explorer
renders the frame inline; the SRC attribute spec
ifies the content to be displayed within the
frame
You can also place content into the previous
IFRAME tag by using a frame destination as
follows:
TARGET= " Framel " >
See Microsoft ' s Web Site</A>
hat
the
PT
Page Transition
Refresh
Meta tags can be used for more than just page effects; they also have more
practical uses, such as forwarding the user to another page or allowing search
engines to read keywords; below are examples of each
The refresh tag automatically forwards the user to a new page; this is common
ly used in intro pages- also referred to as splash pages- to let the user see an
introduction to the site before being guided to the real home page; another com
mon use ofthe refresh meta tag is to forward users from out-of-date links; this
is important for keeping pages that are already registercd on search engines,
even though the domain may have transferred; the search engines often contain
many dead links that place higher than functional ones; it is important to keep
all the pages that you've registered with the search engines because the links will
show up on the search engines anyway; it is better to have them forward to the
correct domain; this way, you can be sure that your site is getting more visitors,
and it is much easier than having to re-register a new set of pages; the r l!ji-esh
meta tag goes inside the <head> of the document, like this:
Internet Explorer allows you to create effects for entering
or exiting a page, such as fade in, fade out, circle in, circle
out, vertical blinds and many more
<HTML>
<HEAD>
<T ITL E>Forward </TITLE>
<META ht tp - e q uiv= l' REF RE SH 11 content = I' 6 ; URL =ht t p : / /qui c k -st u dy . com '' >
*The above example is a page that opens with a circle clos
ing in; the new page, in blue, gradually replaces the old
page within a few seconds; other effects take place when the
user exits the page
</HEAD>
<BODY tex t = "# OOOOOO " bgco l or = "# ff f fff " >
; </ p>
<b >
face = " Aria l " 5 iz e = " 2 " col or = " # OOOOOO " >This page
automa tically f o rwards yo u to our home page . < /fon t >< /b >< / p>
<HTML >
<HEAD >
<TIT LE>Page Trans it ion</TITLE>
con t ent :::: " reveal Tr ans(Duration=4.0 , Tra nsit i on=2) " >
</HEAD >
<b ody tex t = "# OO OOOO " bgco l or :::: II# OOOOFF ">
</ BODY >
</HTM L>
The amount of time the page takes to refresh is specified in the content value,
after "REFRESH" ; in this case, the page refreshes after six seconds
< font face = " Arial " si z e= " 2 "
c olor= I, # F F FFFF II ><b> This page opens
with a ,ci r cle cl os i ng in. </b></fon t >
</BODY >
< / HTML >
*Thesl' (~fkcrs H'C/'£:' crea/ed Jill' Micmso/i Intern et Explorer and do not work in
Nelscllpe Nu vigator
Here are more examples of common meta tags:
<META name = " aut h or ll conte n t = " author n a me " >
• a way to identify yourself as the author of the document
Fade-In Transition
con te n t = " t e x t/c ss " >
ht tp ·equiv =II C on ten t ~ S ty l e - Type ll
• specifies the default style sheet language
Il
• specifies the document character set in use on the page
<META name::::; " date " c ontent = "date " >
• tells when the page was created
<META ht tp -equi v::::; " Co n te nt - Script -Typ& " con tent"" " t y pe " >
• specifies the scripting language used
Keywords
To place high on the search engines for specific keywords, you must first Cre
ate keyword meta tags; in this example, the keywords concern HTML and Web
design; you can place as many keywords as you wish, though they should be
related to the contents of the page; using copyrighted names and other tradc
marks is prohibited
The above example is thefade-in transition; the new page,
in blue, replaces the old page by gradually fading in; the
transition only takes a few seconds before the page is fully
loaded ; to apply this effect to the page, simply place the
meta tag inside the <head> of the document:
<TIT LE>Keywo rds< / TI TLE >
b u i ld i ng,
HTML L'Utoria ls ,
~"' eb
tutorials , web
Web d es i gn " >
It is also common to include a separate tag for a description of the page:
< HTML>
<HEJl..D >
<TITLE >Des cription < /T I TL E>
< t it le>Pag e T r a nsit i on</title>
content =" blendT r ans(du r at l o n=l . O) U>
</HEAD >
<body t ext- " #OOOOO O" b g color= " #O OO OFF " >
< f o n t fa c e= " Aria l "
8ize = " 2 " c olor= " # FF FFF F " > <b>Thi s p a ge fades
i n . </b>
</ fon t >< /p >
</ BODY >
< / HTML >
p age des ign _ ,, >
Meta Robots Tag
There may be certain pages, in the same folder as the ones registered with
search engines, that you do not want indexed by the search cngine spiders; to
prevent these pages from being indexed, use the meta robots tag :
<META NAME::::; ll robots " conten t::::; " noindex , no [o l low" >
<META NAME = " descrip tion " conten t::::: "Th is pag e .... " >
--------
Including Images <IMG SRC>
Most Web browsers can display images in the GIF and JPEG format
To include an image, enter:
<I MG SRC="ima g ename.fo r ma t " >
Example: To include a company logo image, enter:
< IMG SRC= " l ogo. g i f " >
Size Attributes
To allow the browser to allocate the appropriate space for the
image as it downloads the file, two other attributes in <IMG> tags
should be included: WIDTH and HEIGHT
Example: To include a company logo image along with the image's
dimensions, enter
< IMG
SRC~" lo g o
. gif "
HEI G HT~ "
120"
W IDT H ~ "
115 ">
Note: You can obtain the pixel size from image-editing software
(such as Adobe Photoshop)
Alternate Text for Images
Because some browsers cannot display images, and some viewers choose to
turn off image loading, HTML provides a means to inform readers ofwhat
graphic files are missing on the page; the ALT tag allows speciJYjng text that
is to be displayed instead ofthe image; MSIE displays ALT tags as popups;
Example: To include a company logo image along with the image's
dimensions and alternate text, enter:
SRC ~ " l o go.g i f "
HE I G HT ~"120"
W I D TH ~" 1 15" AL T~"lo g o">
Aligning Images with Text
Client-Side Image Maps <MAP></MAP>
Image maps create mouseable regions in an image called " hotspots" or " hot
zones," defined in HTML by coordinates; by associating URLs with hotspots,
one image can contain hyperlinks to URLs; this is useful for graphical navi ga
tionalmenus and toolbars
Note: By associating URLs with hotspots, one image can contain
multiple hyperlinks to URLs
In the HTML source, the client-side image map consists of three parts:
I. The <MAP></MAP> element has one attribute NAME which is used to asso
ciate a name with a map; this name is then used by the USEMAP attribute on
the <IMG> element to reference the map via a URL
Note: The value of the NAME attribute is case-sensitive
2. The <AREA> element, which can take the following attributes: SHAPE ,
COORDS, HREF, NOHREF and ALT
Note: The SHAPE and COORDS attributes define a region on the image; if no
shape is specified, the default shape RECTANGLE is used
Possible Shape Attributes
sha pe=rec t
c o ords ="l e f tx ,
t op y ,
ri ghtx , botlomy "
s hap e= ci rcl e c o ords=" centerx , cenLer y , radius "
shape =p o l y coords= "x l , y l , x2 , y 2 , x3 , y 3 , ... "
X
and y are measured in pixelsji-om the /eli/top of th e associated image
3. The <IMG> element to include the image in the page with an I SMAP attrib
ute or the USEMAP attribute set to the name of the image map
Default the bott om ofthl: im age is aligned with the text
Thi s text is centered on the image: <IMG SRC=" l o g o. g i£" }'I,.L I GN=CENTER>
The image used in the illustration is a single graphics file; in the image, each
colored shape in the gray background is associated to a different action ; the
circle is linked to my web. com.; the square is linked to the page of that Web
called "about me"; the polygon is linked to the page called "digital"
This text is ali g ned with the top o1'tl1 (' image: <JMG SRC= " lo g o. 9 i f " AL IGN= TOP >
•E
U
L
__
~
.~
Images without Text
To display an image with no associated text, make it a separate para
graph <P> and add the ALIGN attribute to position the image (LEFT,
RIGHT, or CENTER)
Example:
Programs such as Mapedit allow loading the GI F image into a window; poly
gons, circles, and rectangles can be drawn on the image and URLs designated
for each shape, forming a hotspot; it also allows you to add, edit or del ete hot
spots; Mapedit will create the map file and comes with an on-line help manu
al; get a copy of Mapedit from II
Example HTML Code for Hotspot
1
2
< P AL I GN= CENT ER>
SRC~ "lo g o. g i f " >
3
<MAP Name=" rnyrmp">
Hre f= " ht:tp :/ / www . myweb . c om.. >
HR EF~ .. http ://www.myweb . com/about
. . . . .<-/ p>
me. hbnl ">
IMAGES, SOUND & ANIMATION
4
Shape~ " po 1y"
Coord s ~ "
15 3, 10 6, 1 86,2 25 , 340 , 193 , 315 , 8 1 , 3 04 , 1 67 "
Href~ '' http :// ,,ww . myweb . com/gallery /
External Images
You may choose to have an image open as a separate document
from a text link or link from a smaller "thumbnail" image; this pre
vents the slow loading of your document from many large images:
Example: To include a reference to an external image, enter
<A HREF=" l o g O. gj f " > li nk to i rna g e< /A >
5
digi t al . html ">
Href~ .. http ://www . myweb . com/help . html .. >
6
Shape~ " re ct "
Coords~ " 421 , 18 , 470 , 27 6 "
Nohre f>
</ iyll\P>
1
Src~ "
.. /image s / imagemap . gif "
Width~" 550 "
Height~ " 260 "
Alt=" Clien t Side Ima.ge r-'lap "
Example: To use a smaller image as a link to a larger image, enter
Usemap ~ "#myrrap ">
<A HREF =" l o g o.gif" > <I MG SRC= " sml ogo . gif " >< / A>
Sounds
The syntax for linking to external images, movies and sounds is the
same; the only difference is the file extension of the linked file
Example:
<A HREF ="hell o. wav " >l ink </ A>
<A HRE F ="i n t r o. mo v " > l ink < /A >
Common File Types
Plain text
. txt
HTML
.htm
GIF image
.gif
TIFF image
. tif
JPEG image
. j pg
PostScript file
. ps
MIDI sound file
.midi AU sound file
. au
WAY sound file
. wav
Quicktime movie .mov
MPEG movie
.mpg
AYI movie
. avi
Note: Keep the capabilities and limitations of your intended viewers in
mind; not all formats are supported by every system and/or browser
Background Sounds
Background sounds can be inserted by adding the BGSOUND
SRC= attribute within the <HEAD> of your document; the LOOP
attribute and the associated number value specify how many times
the sound file will repeat (I and greater, -I is continuous)
<HEAD>
NOSCRIPT
The NOSCRIPT element provides alternate content for a client-side script that
was not executed; a script will fail to execute if the browser does not support the
scripting language or if the user has disabled client-side scripting; NOSCRIPT
should follow the SCRIPT element for which it provides alternate content
<NOSCRIPT>Alternative script goes here</NOSCRIPT>
PRICE
U.S. $5.95
Customer Hotline #
CAN $8.95
This guide is based on the software versi on that was Shipping at the time
of publication and is accurate to that version. For specific changes to a
software application, see the Read-Me file provided with the software
application
1.800.230.9522
free dfwn~ad$ &
hun re
0dLtltles at
qUlc 5 U y.com
ISBN-13 : 978-142320174-8
ISBN-10: 142320174-4
911~11111~ nllill~11lll!llllllrll l r IIiiIII
6
o
