Return to:.......
Alignments
<CENTER></CENTER>
<H1 ALIGN=CENTER>
Left justified paragraph alignment <P align=left>
Right justified paragraph alignment <P align=right
>
Center justified paragraph alignment <P
align=center >
Full justified paragraph alignment <P align=justify
>
to top
Background color
<BODY BGCOLOR=red>
<BODY BGCOLOR=FF9473>
<BODY BGCOLOR=GREYBACK.JPG>
to top
Background Pattern
<BODY BACKGROUND=_________.jpg>
to top
Block Indent
<BLOCKQUOTE> </BLOCKQUOTE> -- indents text
from left and right margins
to top
Bold
<B> </B>
to top
Bullet
or
Unordered
List
<UL>
<LI>
</UL>
Bullet to a Square
<UL type=”square”>
<LI>
</UL>
Bullet to a Circle
<UL type=”circle”>
<LI>
</UL>
Bullets with a GIF Image
<IMG SRC=bullet.gif>
to top
To obtain free clipart, visit
www.clipart.com
or
www.iconbazaar.com
to top
Enumeration or Ordered List
<OL>
<LI>
</OL>
Ordered List Interrupted
<OL>
<LI>
<LI>
</OL>
<OL START=3>
<LI>
<LI>
</OL>
to top
E-Mail Link
<A HREF=”MAILTO:webres@isp.COM”>webres@isp.COM</A>
to top
Font Color
<FONT COLOR=BLUE>
<FONT COLOR=FF9473>
<BODY text=red>
<BODY text=FF9473>
to top
Font Change
<FONT FACE="COMIC SANS MS"</FONT>
to top
Horizontal Line
<HR>
to top
Horizontal Line Widths
<HR SIZE=10 AND NOSHADE> you get a wide dark line
<HR SIZE=1>
<HR SIZE=5>
<HR SIZE=10> when you add noshade, line gets darker
Horizontal Line Colored
<HR COLOR="BLUE">
to top
Italics
<I> </I>
to top
Images
The two classes of images for Web pages are inline and external.
Inline images are those that display on the Web page directly,
together with the text. External
images are stored separately from the Web page and are displayed only when
the visitor clicks a link to display them.
To download an image from the Internet. Right mouse click, select save
picture, and save with any one of the following extensions:
JPEG pronounced as jay-PEG
GIF pronounced as JIF
PNG pronounced as PING
To insert an image on your Web page just to improve its appearance.
Go on Internet
Right click on image
Save on your hard drive with a jpg, gif, or png extension
In Notepad, your tag to insert the image would be:
<img src="______.jpg">
To insert an image on your Web page and link it to another Web page
Go on Internet
Right click on image
Save on your hard drive with a jpg, gif, or png extension
In Notepad, your tag to insert the image linked to a Web page
would be:
<A HREF=http://www._________.com><IMG SRC="__________.jpg"
</a>
Image Alignment:
Left
<IMG SRC=__________.jpg Align=LEFT>
Right
<IMG SRC=__________.jpg Align=RIGHT>
Center
<Center><IMG SRC=__________.jpg</Center>
To display text with the image
<IMG SRC=__________.jpg ALT=”[insert text]”
To add a border to the image
<IMG SRC=”
.gif” BORDER=3>
Change Image Size:
To change the width of image
<IMG SRC=”_____.gif” WIDTH=____
To change the height of image
<IMG SRC=”_____.gif” HEIGHT=____
To move text below an image
<BR CLEAR=ALL>
Change Image Spacing:
To add space to both the left and right sides of image
<IMG SRC=”_____.gif” HSPACE=___
To add space to the top and bottom of image
<IMG SRC=”_____.gif” VSPACE=___
Thumbnail Images
<A HREF=”largeimage.gif”><IMG SRC=”thumbnail.gif”></A>
.
The largeimage.gif is the name of the full-sized image, and
thumbnail,
gif is the name of the smaller version of the image.
to top
Image Mapping
<MapName=” “> </MAP>
Creates a client
side image map – it defines the map’s name
<AREA>
defines clickable areas within a <MAP> element
defines links and anchors in the <area> tag, you insert
the image shape
[rectangular, point, circular, or polygonal]
Code to define:
Shape of the clickable area
The alternate text
The x and y coordinates
The URL for the link
<AREA SHAPE=” “ ALT=” “ Coords=”
,” HREF=” “>
to top
JPEG vs. GIF Formats
Users viewing Web pages are completely unaware of the format of the images
they are seeing. However, it is
important for you, as a Web publisher, to be very familiar with the
characteristics of both image formats and to know the circumstances under which
one format is more appropriate than the other.
Knowing the differences between the GIF and JPEG formats is important when
deciding which format you should use for the image on your Web page.
You should base your format choice on the type of image you wish to use.
JPEG format has at least one distinct advantage over GIF – it can handle a
maximum color depth of 16.7 million (24 bit).
The JPEG image format, like GIF, is an inherently compressed file format.
JPEG images, however, offer greater compression ratios than GIF.
Therefore, an image in JPEG format is smaller (requires less storage
volume) than the same image in GIF format.
The JPEG format was created for full-color or grayscale photo-realistic images.
Scanned photos should be saved in JPEG format.
The GIF image format is best for storing images with large areas of solid colors
such as clipart, cartoon-like images, and logos.
Non-photographic images should generally be left in GIF format
Never convert black and white images (grayscale) from GIF to JPEG
to top
Linking
Changing Link Colors
Link=”#
“ Normal Link
ALINK=”#
“Active Link
VLINK=”#
“ Visited Link
E-Mail Link
<A HREF=”MAILTO:webres@isp.COM”>webres@isp.COM</A>
When linking to another web site, the code is:
<A HREF=http://www.Rutgers.edu>Rutgers</A>
When linking between two pages you created, the code
is:
<A HREF="Favorite Web Sites.htm">Favorite</A>
When linking within the same page, NAME
anchors called
REFERRING and TARGET anchors are used.
The referring anchor features a pound sign (#)
preceding a text label.
A target anchor features the code (A
NAME=text label). This code that
marks the spot to which the Web page should be scrolled when
the
referring anchor is clicked by the user.
<A
NAME=”top”></A> [target anchor]
<A HREF=#top>To
Top</A> [referring anchor]
To Create an IMAGE Anchor
<A HREF=_____.jpg><IMG SRC=_____.jpg></A>
to top
Paragraph
<P>
to top
Point
Size
<H1> largest
<H6> smallest
<FONT SIZE=5> [3 default, 7 largest, 1 smallest]
<BIG> </BIG> increases the font size in
comparison to the surrounding text
<SMALL> </SMALL> decreases the font size in
comparison to the
surrounding text
to top
Return
<BR>
to top
Space
To insert white space enter several
to top
Special
Characters
Copyright symbol
©<BR>
=
©
Registered symbol
®<BR> =
®
Ampersand
&<BR> =
&
Degree symbol
°<BR> =
°
Quotation mark
"<P> =
“ “
to top
Subscript
<SUB> </SUB>
to top
Superscript
<SUP> </SUP>
to top
Strikethrough
Text
<STRIKE> </STRIKE> strikes through text – used
to indicate sale or
slashed prices on a company’s Web page
to top
Tables
<Table>
</Table> Beginning and end of the table
<TR> </TR>
Beginning and end of a Table Row
<TH> </TH>
Beginning and end of a Table Heading
default: bold, horizontally
centered
<TD> </TD>
Beginning and end of a Table Data cell
default:
left alignment, normal text, vertically centered in the cell
COLSPAN=” “ sets
number of columns spanned by a cell
ROWSPAN=” “sets
number of rows spanned by a cell
VALIGN= vertically
aligns cell top, middle, bottom
CELLSPACING= Spacing
between cells
CELLPADDING= Spacing
within cells
BORDER=0 No border
<CAPTION ALIGN=></Caption>
to top
Typeface
<Font Face=Impact>
to top
Underline
<U> </U> helps to emphasize text – use caution
on non-link text
to top