1. CS 200 – Web Tech I Web Site Organization Links

2. Recall the Web Page Layout sidebar footer content masthead

3. Where do you see links? sidebar footer content masthead

4. Links are everywhere http:// hilo.hawaii.edu

5. Create links with "Anchor" tag: 1. Code to link to a page on the internet UH Hilo Athletics

6. Aside: Hover to check phishing messages Notice the real address if you hover over the link

7. Making an image into a link Just enclose the between and

8. Link to another page on your site 2. Code to link to a file on the same computer Kona Coffee Assumes original and linked page are in the same folder.

9. Link within a web page 3. Example of links within a web page Result: That section moves to the top

10. How links within a page are done: First -- Create places to "jump to" "Named anchors" or "bookmarks" Kompozer can write it for you.

11. Linking to Named Anchors Within the current web page History History of Kona Coffee On a different web page – add # at end of address

12. target attribute <a href="http://vulcans.uhh.hawaii.edu" target="_blank"> UH Hilo Athletics

13. But … Opening a new window is often discouraged Pop-up blockers may stop it from opening Accessibility issues Let the reader decide. A right-click provides options:

14. Kompozer can help write links Link icon

15. Where are links in the lab? Lots of links!

16. CSS Styles for Links "Good-looking links"

17. Helpful Styles for Links – Part #1 Style to turn off underlining: #sidebar a {text-decoration: none; } #footer a {text-decoration: none; } Other Styles for Links: (page 47 – pseudo-classes) #sidebar a:link { color: red; } #sidebar a:visited {color: maroon; } #sidebar a:hover {background: yellow; } #sidebar a:active { color: black; }

18. Helpful Styles for Links – Part #2 HTML Code for Both Sidebar and Footer (General Format): Akaka Falls NELHA Kalua Pig Kona Coffee Useful CSS Styles for the list elements: #sidebar ul { list-style-type: none; } turn off bullets #footer ul { list-style-type: none; } turn off bullets #footer ul li { display: inline; padding-right: 20px; } make list horizontal Some links are in lists

19. You may be feeling confused... Review between classes. One hour outside class is expected for each hour in class for the "average" student. This is a language. It has many parts & pieces. Don't be surprised that you need to learn where things belong. Doing it once is rarely enough.

20. HTML + CSS is a system Your goal: Master the system If the details are overwhelming, it's because you don't have a place to "file" the details. Study the system, not just the details!

21. Tips  Re-read the CSS chapter, review slides  Write a little code every day until you know what goes where  Look at your finished code. Print it if that helps you and highlight it.  So many students just hand in the lab (after trial-and-error) and stop. Handing it in is not the last step. Study what worked! HTMLCSS