Introduction to linking
-
Upload
shehzad-yaqoob -
Category
Education
-
view
39 -
download
0
Transcript of Introduction to linking
Types of linking
External linking to another website
Internal linking to another webpage of the same website.
Fragment linking linking different sections of the same web page.
Using the ANCHOR tag
Attribute
Description
href Specifies the destination of a link.
title Allows an advisory title that explains the resource in more detail.
name Allows links to be able to point to a specific section within a document (instead of links always taking to the top of a document).
<a href=“url” title=“text”> description </a>
The anchor element <a> is used to create links.
External Link
<a href=“http://www.yahoo.com”> Yahoo! </a> Anchor element’s href attribute 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.
9
Internal Linking: understanding paths
prepared by: Meer Sadaf Naeem
There are two types of pathnames: relative & absolute.
course
htmlMs-office
class1
index.html
list.html intro.html
chem.html math.htmleng.html
Absolute path specifies a file’s precise location within a computer’s entire
folder structure.
C:/course/html/intro.html
course
htmlMsoffice
class1
index.html
list.html intro.html
chem.html math.htmleng.html
Absolute path specifies a file’s precise location within a computer’s entire
folder structure.
C:/course/html/class1/eng.html
course
htmlMs-office
class1
index.html
list.html intro.html
chem.html math.htmleng.html
Relative path specifies a file’s location in relation to the location of the
current document.
If the file is in same folder as the current document, you do not specify the
folder name.
contact.htmlcourse
htmlMs-office
class1
index.html
list.html intro.html contact.html
chem.html math.htmleng.html
class1/math.htmlcourse
htmlMs-office
class1
index.html
list.html intro.html contact.html
chem.html math.htmleng.html
If the file is in a subfolder of the current document, include the name of the subfolder followed by the file name.
To go one level up the folder tree, start the relative path with a double period (..) &
then provide the name of the file
../index.htmlcourse
htmlMs-office
class1
index.html
list.html intro.html contact.html
chem.html math.htmleng.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.
../Ms-office/list.htmlcourse
htmlMs-office
class1
index.html
list.html intro.html contact.html
chem.html math.htmleng.html
Let’s do it
links
List.html
ul.html
Create two html documents named as “list.html” and “ul.html” in the folder “links”
Let’s do it
links
List.html
ul.html
course
ol.html
Create an html document name “ol.html” in subfolder “course”
Let’s do it
links
List.html
ul.html
course
ol.html
Provide a link in “ul.html” and “ol.html” to go back to “list.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.
Linking fragments
<a name=“top”> Welcome to NED</a>
top
<a href=“#top”> go to top of the page</a>
Page is scrolled to the location named top
Go to top
Labeling sections with the name attribute
<a name=“top”> Welcome to NEDUET</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.
target attribute
<a href=“url” target=“window”> content</a> Here window is a name assigned to the
new browser window.
Target Name
Description
“target” Opens the link in a new window named target.
“_blank” Open the link in a new, unnamed, window.
“_self” Opens the link in the current browser window.