Web Site Design & Management

Web Site Design & Management Class Two

Attendance Questionnaire Setup/task Homework Review Screenshots Lists/Nested Lists Home Page Links Images Assign Next Week’s Homework Agenda

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> tags encase list items.

Unordered Lists <li> Kick Off </li> <li> Field Goal </li> <li> Extra Point </li> <li> Punt </li> The <li> tag creates list 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://joe@joe.com”>email joe </a> • You can also specify the subject line by writing <a href=“mailto://joe@joe.com?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

Web Site Design & Management