Transcript Feb 23
CS 200 – Web Tech I
Web Site Organization
Links
Recall the Web Page Layout
masthead
sidebar
content
footer
Where do you see links?
masthead
sidebar
content
footer
Links are everywhere
http:// hilo.hawaii.edu
Create links with "Anchor" tag: <a>
1. Code to link to a page on the internet
<a href="http://hiloathletics.com">
UH Hilo Athletics
</a>
Aside: Hover to check phishing messages
Notice the real address if you hover over the link
Making an image into a link
Just enclose the <img> between <a> and </a>
<a href="http://hilo.hawaii.edu">
<img src="uhhlogo.jpg" />
</a>
Link to another page on your site
2. Code to link to a file on the same computer
<a href="coffeeNNN.html">
Kona Coffee
</a>
Assumes original and linked page are in the same folder.
Link within a web page
3. Example of links within a web page
Result: That section
moves to the top
How links within a page are done:
First -- Create places to "jump to"
"Named anchors" or "bookmarks"
<a name="minutes"></a>
Kompozer can write it for you.
Linking to Named Anchors
Within the current web page
<a href="#history">History </a>
<a name="history"></a><h2>History
of Kona Coffee </h2>
On a different web page – add # at end of address
<a href="http://nvudev.com/guide/html/ugs04.htm#s41" >
target attribute
<a href="http://vulcans.uhh.hawaii.edu"
target="_blank">
UH Hilo Athletics
</a>
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:
Kompozer can help write links
Link icon
Where are links in the lab?
• Lots of links!
CSS Styles for Links
"Good-looking links"
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; }
Helpful Styles for Links – Part #2
Some links are in
<ul> lists
HTML Code for Both Sidebar and Footer (General Format):
<ul> <li> <a href="_______"> Akaka Falls </a> </li>
<li> <a href="_______"> NELHA
</a> </li>
<li> <a href="_______"> Kalua Pig
</a> </li>
<li> <a href="_______"> Kona Coffee </a> </li>
</ul>
Useful CSS Styles for the list elements:
#sidebar ul { list-style-type: none; }
turn off bullets
#footer ul { list-style-type: none; }
#footer ul li { display: inline; padding-right: 20px; }
turn off bullets
make list horizontal
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.
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!
Tips
Re-read the CSS chapter, review slides
Write a little code every day until you know what goes where
HTML
CSS
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!