Links

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

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”>

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

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

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>

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”) http://www.complete.url

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; }

Pseudo-classes Characteristics of tags that can have their own attributes Not reflected in HTML In CSS: tag:pseudo-classes Note only one : for a pseudo-class

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;

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

Basic page design header includes h1 title nav(igation) main 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

Google fonts

External CSS: Google fonts! google.com/fonts 2 steps Link to font (second style sheet!) Use name in CSS