1. Links

2. Links Need to define two things: The destination
Something to click on to get there
Tag is <a href=…>click here</a>
Can be text, special character or image (next week)
Can change the text format

3. Linking to another page
If it is another page in the same folder:
<a href=“page.html”>
If it is in a subfolder
<a href=“folder/page.html”>
If it is in a containing folder
<a href=“../page.html”>

4. Linking to external pages
Use full url
<a href=“ text</a>
To force open in a new tab (window)
<a href=“ target="_blank">Link text</a>
GOOD PRACTICE
REQUIRED IN THIS CLASS

5. The destination: within a page
Always link to an anchor point
Implicit anchor point at top of page
Anchor referenced as null (id=“” or id=“#”)
Adding other anchor points
Insert named anchor point
id=“anchor” on any tag

6. Referencing the destination
To point to an anchor point on SAME page
<a href=“#anchor”>link text</a>
<a href=“#”>top of page</a>
In order to access anchor point on another page
<a href=“Page.html#AnchorPoint”>Link text</a>

7. href formats summary To reference Use Another file in the same folder
file.ext
A file in a subfolder
subfolder/file.ext
index.html in a subfolder
subfolder
A file in a containing folder
../file.ext
Anchor point on this page (need an id)
#anchor
The top of this page #
Anchor point other page same folder
file.ext#anchor
An external page (target=“_blank”)

8. Formatting the Links Can use any formatting that you want
Links have states (visited or not, hovering)
Can change attributes for all states with
a {
Property: value; }

9. Pseudo-classes
Characteristics of tags that can have their own attributes
Not reflected in HTML
In CSS:
tag:pseudo-classes

10. Link Pseudo-classes Link states a:link -- a normal, unvisited link
a:visited -- a link the user has visited
a:hover -- a link when the user mouses over it
a:active -- a link the moment it is clicked
Note: CSS order important
hover must come after link & visited
active must come after hover
LoVe HAte
a:link {
color: green; }
a:visited {
color: black;

11. On Page Navigation Long pages Avoid too much scrolling
Links to subsections
Link to top
Lots of topics
Use a “table of contents” of links

12. Basic page design Header, includes h1 title Nav(igation)
main for main body
Footer
Layout
What do you want your website to look like?
What are you putting on the site, and will you have enough space to do so?
Simple
Don’t overdue or overthink.
Don’t add too many extraneous features.
AKA. Don’t get carried away
Header
Contain title
Navigation bars
Search elements
Important tidbits; not full on data or information – think of it like a thesis statement
Next/back elements
Body
The meat of the webpage
All the information and content
Make it look nice and understandable
Some next/back elements if necessary
Footer
Copyright information
Location and address
Contact information