Using the ANCHOR tag The anchor element <a> is used to create links. <a href=“url” title=“text”> description </a>
External Link <a href=“http://www.yahoo.com”> Yahoo! </a>
Anchor element’shrefattribute is used to specify the Hyperlink Reference (that is, a reference to link’s address).
When linking to an external document, it is essential to provide http:// otherwise the link will not work.
TRY IT !
Observe the output
Observe the output Did you notice that there is a space after heading but not after the links?
Types of HTML elements Inline elements: have no line breaks associated with the element and flow horizontally using a soft line break when reaching the edge of its parent element. Block-level elements: place a line break before and after the element. Such elements stack vertically on top of each other.
Understanding paths 9 prepared by: Meer SadafNaeem
There are two types of pathnames: relative & absolute.
Absolute path specifies a file’s precise location within a computer’s entire folder structure. course C:/course/bcit/intro.html se bcit index.html class1 list.html intro.html chem.html math.html eng.html
Absolute path specifies a file’s precise location within a computer’s entire folder structure. course C:/course/bcit/class1/eng.html se bcit index.html class1 list.html intro.html chem.html math.html eng.html
Relative path specifies a file’s location in relation to the location of the current document. course se bcit index.html class1 list.html intro.html chem.html math.html eng.html
If the file is in same folder as the current document, you do not specify the folder name. contact.html course se bcit index.html class1 list.html contact.html intro.html eng.html chem.html math.html
If the file is in a subfolder of the current document, include the name of the subfolder followed by the file name. class1/math.html course se bcit index.html class1 list.html contact.html intro.html eng.html chem.html math.html
To go one level up the folder tree, start the relative path with a double period (..) & then provide the name of the file ../index.html course se bcit index.html class1 list.html contact.html intro.html eng.html chem.html math.html
To specify the same folder on same level (sibling folder), move up the folder tree using double period (..) & then down the tree using the name of the sibling folder. ../se/list.html course se bcit index.html class1 list.html contact.html intro.html eng.html chem.html math.html
Internal Link <a href=“file.html”> Go to next page</a>
In href, specify the relative path of the document to which you want to link.
Labeling to document fragments <a name=“top”> Welcome to NED</a> top Page is scrolled to the location named top <a href=“#directions”> go to top of the page</a> Go to top
Labeling sections with the name attribute <a name=“top”> Welcome to NED</a>
the name attribute allows links to be able to point to a specific section within a document (instead of links always leading to the top of a document).
Once you have named a location in the document, you can go to that location taking a normal link tag & adding a number sign (#) & the name assigned to the URL.
<a href=“#top”> go to top of the page</a>
Creating titles for your links <a href=“http://www.yahoo.com” title=“Yahoo website”> Yahoo! </a>
title attribute allows an advisory title that explains the resource in more detail.
Browsers may choose different methods of showing the advisory title attribute, such as displaying the title in a tool tip or balloon help.
Changing browser windows with target attribute
By default, each new page you open replaces the content of the previous page in the browser window.
To return the previous page, one has to click their browser’s Back button.
target attribute indicates the name of window where you would like the linked page to appear.
Here window is a name assigned to the new browser window.
The browsers that obey target attribute, create a new windows that look as if an extra copy of the browser is running.
The old window is located behind the new window, & the old page that contained the link will still be visible, if the browser does not take up the full screen. If a browser does take up the full screen, then the only way to see the old window is for the user to switch windows & go back to old page.
Linking to email addresses <a href=“mailto: emailaddress”> …….</a>
Anchors can also link to email addresses.
When someone clicks on this type of anchored link, their default email program initiates an email message to the linked address.