Embed Size (px)
Citation preview
Web Site Design & Management
Class Two
Agenda
• Attendance• Questionnaire• Setup/task• Homework Review• Screenshots• Lists/Nested Lists
• Home Page• Links• Images• Assign Next Week’s
Homework
Setup
• Setup your computer– Notepad, ftp
• Log in to FTP• Make a folder in your homework/class01 folder
named fixed• Make another folder in your “root” directory
named inclass, put a folder in that named class02• Let me know when you are done and I’ll check it
off.
Homework tips
• naming conventions– firstpage.html or first-page.html
• Missing tags don't always make it "render" wrong. Why and why should you care?
Homework tips
• Stuff outside of <body> tag. – All things visible on the "canvas area" of the
browser should be encased in the body element
• To rename a file or folder– Select, rename (F2 or right-click)
Homework Tips
• Remember to close your preview your file. This will help you find your errors
• Open and close tags properly. – Start and close at the same time
• What did I do?Forbidden listing
Home Page
• No home page, and you’ll see either– Forbidden or– A directory listing.
• Home page is named – index.html
• (most of the time)
– default.htm• (Microsoft server. We’re not using this)
FIX Stuff:
• See your assignment
• Fix the file(s) folders and upload it with the proper name to the “fixed” folder in homework/class01
Lists
• Unordered Lists
• Ordered Lists
• Nested Lists
Unordered Lists
• Unordered Lists resemble bullet lists.
• The <ul> … </ul> tags encase list items.
• The <li>...</li> tag creates items with a default bullet type of disc.
Unordered Lists
<ul><li> Kick Off </li> …</ul>
The <ul> … </ul> tagsencase list items.
Unordered Lists
<li> Kick Off </li> <li> Field Goal </li> <li> Extra Point </li> <li> Punt </li>
The <li> tag createslist items.
Ordered Lists
• Ordered Lists use a ranking principle.
• The <ol> … </ol> tags encase list items.
• The <li>... </li> tag creates items with a default decimal ordering.
Ordered Lists
<ol><li> Arsenic and Old Lace </li>
</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.
Nested Lists
Unordered lists can be placed inside ordered lists.
Nested Lists
Unordered lists can be placed inside definition lists.
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.
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.
The http Protocol
• http:// stands for HyperText Transfer Protocol.
• This protocol is commonly used for web pages.
Links
<a href = http://www.prenhall.com/”>Prentice Hall</a>
The <a href>…</a> tags are used to encase a link.
Absolute Links
• An absolute link contains the full URL of the page:
• For example,
• <a href = “http://www.ebay.com/”> Ebay, an auction site </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>
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>
Don’t get lazy
• 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
