web site design & management class three february 12, 2003 pam scanlon
TRANSCRIPT
Web Site Design & Management
Class Three
February 12, 2003
Pam Scanlon
Agenda
• Homework Review and more…….
• Review Lists & Images
• Break
• In class assignment
• Break
• Discuss Readings & Links etc!
• Assign Next Week’s Homework
Homework Review
• There are issues with copied assignments. This is not acceptable. (can be a cause for academic dismissal)
• Most of you did extremely well
• Please do not go ahead unless you ask.
• Review FTP for those who need it.
Homework Tips
• Remember to close your preview your file. This will help you find your errors
• Open and close tags properly.
• Nesting– <b><i>wrong</b></i>– <b><i>correct</i></b>
Lists
• Unordered Lists
• Ordered Lists
• Definition Lists
• Combined Lists
Unordered Lists
• Unordered Lists resemble bullet lists.
• The <UL> … </UL> tags encase list items.
• The <LI> tag creates items with a default bullet type of DISC.
Unordered Lists
<UL><LI> Kick Off…</UL>
The <UL> … </UL> tagsencase list items.
Unordered Lists
<LI> Kick Off<LI> Field Goal<LI> Extra Point<LI> Punt
The <LI> tag createslist items.
Unordered List TYPE Attribute
• The TYPE attributes changes the bullet type.
• Available types are: DISC (default) CIRCLE SQUARE
• TYPE can be used with the <UL> or <LI> tags.
Unordered List: TYPE Attribute
<LI TYPE = “CIRCLE”>
Unordered List : TYPE Attribute
<LI TYPE = “DISC”>
Unordered List : TYPE Attribute
<LI TYPE = “SQUARE”>
Ordered Lists
• Ordered Lists use a ranking principle.
• The <OL> … </OL> tags encase list items.
• The <LI> tag creates items with a default decimal ordering.
Ordered Lists
<OL><LI> Arsenic and Old Lace…</OL>
Ordered List: TYPE Attribute
• The TYPE attributes changes the ordering.• Available types are:
1 (Decimal: default) A (Uppercase) a (Lowercase) I (Uppercase Roman) i (Lowercase Roman)
• TYPE can be used with the <OL> or <LI> tags.
Ordered Lists : TYPE Attribute
<OL TYPE = “a”><LI> is for aardvark…</OL>
Ordered List: START Attribute
• The START attribute changes the beginning value.
• The value must be decimal.
• START works with all types.
Ordered Lists: START Attribute
<OL TYPE = “a” START = “4”><LI> DINOSAUR…</OL>
The list begins with “d” although the starting value is 4.
Ordered Lists: VALUE Attribute
<OL><LI VALUE = “3”> Shut the door…</OL>
Nested Ordered Lists
<OL><LI><H1> Tie Your Shoes.<H1><OL><LI> Make a bow.…</OL>…</OL>
The default type for all nested ordered lists is Decimal.
Definition Lists
• The <DL>…</DL> encase a definition list.
• The <DT>…</DT> define a term.
• The <DD>…</DD> encase a definition.
Definition Lists
<DL>
…
</DL>
The <DL> … </DL> tags encase a definition list.
Definition Lists
<DT> Ice Bowl</DT>
The <DT> … </DT> tags define a term.
Definition Lists
<DD> The championship...</DD>
The <DD> … </DD> tags contain the definition.
Nested Lists
Unordered lists can be placed inside ordered lists.
Nested Lists
Unordered lists can be placed inside definition lists.
Images: Introduction• Image Formats: .gif, .jpg only (do not
use .bmp)
• The <img> Tag
• Images as Backgrounds
• Protocols
• The LINK, ALINK, VLINK Attributes.
• The <A> Tag
GIFS vs. JPEG Images
• Use a Gif when it’s mostly solid colors• Use a JPEG for photos and images with
lots of gradations. • Experiment with both so you know the
difference.• Make sure you optimize your images’ file
size. I will delete large images from the server!
GIF Images
• This wood duck carving is stored in the GIF format.
• It requires 8K bits for storage.
JPEG Images
• This picture of Glacier Park uses the JPEG format.
• It requires 92K bits of storage.
Images
• The background is a grayscale GIF file.
• The title and Green Teal buttons are GIF files.
Images As Backgrounds
<BODY BACKGROUND =“woody2Back.gif”>
The BACKGROUND attribute uses an image for the backgound.
The <IMG> Tag: Attributes
• SRC : The source file• ALT : Alternate text for non-graphic
browsers• WIDTH : Width in pixels of image• HEIGHT : Height in pixels of image• BORDER : Link images have a default
blue border of 1 pixel. If you want to have your image be a link with no border, you must specify border=“0”
The <IMG> Tag: Final
REMEMBER!!!!
Changing the width and height attributes of an image tag does not change the file size of the image.
Break/In Class Assignment
• You will do either Case 1 on page 1.39 or Case 2 on page 1.40 I will tell you which one you will do.
• If you do not finish this in class you should finish it for homework.
LINKS
• Puts the “link” in hyperlink
• Gets you from one place to another!!
• Make a simple link from the class index page to your home page.
The http Protocol
• http:// stands for HyperText Transfer Protocol.
• This protocol is commonly used for web pages.
The mailto Link
• < a href=“mailto://[email protected]”>email joe </a>
• You can also specify the subject line by writing <a href=“mailto://[email protected]?subject=your subject here&body=body of message”>email joe </a>
Links
• By default, all links are underlined.• IE uses blue for unvisited links, green
for visited.• Netscape uses blue for unvisited links,
purple for visited.
Links
<A HREF = “http://www.prenhall.com/”>Prentice Hall</A>
The <A HREF>…</A> tags are used to encase a link.
Links Colors
<BODY BGCOLOR = “white” LINK = “#FF0000”VLINK = #996666”ALINK = “#FF9966”>
The link colors can be changed in the <BODY> tag.
LINK, ALINK,and VLINK
• LINK changes the color of unvisited links.
• VLINK changes the color of visited links.
• ALINK changes the color of active links.
Absolute Links
• An absolute link contains the full URL of the page:
• For example, <A HREF = “http://www.prenhall.com/”> Prentice Hall </A>
Relative Links
• A relative link can be used if the page is in the user’s directory.
• For example, <A HREF = “recipes/trout.html”> Trout Recipes</A>
• NOTE: If you have a properly designed site structure, you should be able to use relative links for everything except external pages. DO NOT GET LAZY and use absolute links when you don’t need to.
Anchor Links
• A fragment is a link within a page.• The <A NAME> tag creates a anchor
link: <A NAME = “Q1”> Question 1 </A>
• The <A HREF> tag accesses a fragment: <A HREF = “Test1.html#Q1”> Question 1 </A>
• Our class website uses Anchor Links