Link in the HTML--Head first into HTML

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="........