1. Link
<a href="path"> content </a>
<a> element to create a hypertext link to another web page. The content of the <a> element becomes clickable in the web page. The href attributes tells the browser the destination of the link
step1: First, as the browser renders the page, if it encounters an <a> element, it takes the content of the element and displays it
as a clickable link.
<a href="elixir.html">elixirs</a>
step2: Next, when a user clicks on a link, the browser uses the “href” attribute to determine the page the link points to.
<a href="directions.html">detailed directions</a>
When “detailed directions” is clicked, the browser grabs the value of the href attribute, in this case “directions.html"
2. Attributes
1)
<style type="text/css"> //type attributes tells which style language we are using
<a href="irule.html"> //href attributes tells the destination of the link
<img src="sweetphoto.gif"> //src tells the file path of the picture
an interesting example to illustrate attributes ;But with attributes, we can customize the element with
all kinds of information
<car make="Mini" model="Cooper" convertible="no">My Red Mini</car>
2) browser only knows attributes predefined. You should only use attributes that you know are supported .
3) Getting Organized
Organizing the lounge
Relative Path
step1: Linking from “lounge.html” to “elixir.html”
step2: Identify the source and the destination.
step3: Trace a path from the source to the destination.
step4: Create an href to represent the path we traced.
Going the other way; linking up into a “parent” folder\
step1: Linking from "directions.html" to "lounge.html"
<a href="lounge.html">Back to the Lounge</a>
step2: Identify the source and the destination
step3: Trace a path from the source to the destination
To get from the“directions.html” file to“lounge.html”, we need togo up one folder into the“lounge” folder, and thenwe’ll find “lounge.html”
in that folder.
step4: Create an href to represent the path we traced
Improving accessibility by adding a title to your links
the <a> element has an attribute called title just for providing more information about the link(a tooltip)
title attribute can be applied to any element
Link to the specified position to a page:
it turns out that <a> element can team up with id attribute to take you straight to a specific point in a page
step1: find the location in the page you'd like to create a landing spot.
step2: figure out the id of the spot
step3: link to elements with ids inserting to <a>
Link to the a specified location in the same page
<a href="#top">Back to top </a>
Opening a new window using target
<a target = "_blank" href="........