URL stands for Uniform Resource Locator and is a way to locate pages, video, audio, documents, folders and e-mail accounts on the Internet. A URL can be typed into a Web browser to access content from a website, or it can retrieve materials on a computer or server. Commonly used URLs include: “http,” “ftp,” “file,” “mailto,” and “telnet.”
Any HTML page is likely to contain URLs (links) to other resources on that back-end server or elsewhere. URL expressions can appear in the following formats:
- absolute
- relative
There are three types of paths, the first is the absolute path, this is usually used when linking to resources placed on other websites, outside of your domain (Global Link).
There are two types of relative paths, both of which are used to link to internal resources on your Website. The first is called the root-relative, and the final type is the document-relative.
Root Relative Paths(Local Link)
These are Relative to the Root of your server, I.E. Linking from SubDir/Page2.html to Page.htmlin the same directory by the Root Relative Path:
/SubDir/Page.html
Is the equilivant of the Document Relative Path:
Page.html
The root of the server may refer to htdocs, or the directory where you usually place the index.html
I.E. http://www.vinodsrivastava.com.com/ThisIsTheRoot
Document Relative Paths
Note. These paths are known to break when you change the site structure, such
If you want to link to SubDir/Page.html from index.html in the root by using the Document Relative way, you would do like below:
SubDir/Page.html
Linking from SubDir/Page.html to a page in the root would require the following path:
../PageInRoot.html
The “../” in front of the page name, basicly says go up one. If you need to go up more then one time, IE. When having more SubDirectories, simply add more dots as needed. The below will go up 3 times, I.E. From SubDir/SubDir/SubDir/Page.html
../../../PageInRoot.html
Absolute Paths
Absolute Paths are entered as follows:
http://www.vinodsrivastava.com.com/SubDir/Page.html
Absolute vs Relative URLs
Using Root Relative Paths for internal resources (images, css files, etc), will fix most broken URLs introduced by server “friendly URL” systems. They are also a good choice if your aim is to lower the file-sizes of your pages, and decrease load times.
Generally you would want to use root-relative URLs. But if you are using subdomains, then you don’t have much choice, other then to use the absolute URLs.
Examples
To understand this, you may use the below as your reference. The below Examples shows how to enter the URL for an image located in the same directory as the .html file.
Document Relative Example
<p><img src=”MyImage.jpg” alt=”An Image”></p>
Root Relative Example
<p><img src=”/SubDir/MyImage.jpg” alt=”An Image”></p>
Absolute Example
<p><img src=”http://vinodsrivastava.com.com/SubDir/MyImage.jpg” alt=”An Image”></p>
HTML Hyperlinks (Links)
The HTML <A> tag defines a hyperlink.
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
The most important attribute of the <A> element is the href attribute, which indicates the link’s destination.
By default, links will appear as follows in all browsers:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
TEXT LINK
<A href=“http://Internet URL ”>Title the visitor sees.</A>
Example:
<A href=”https://vinodsrivastava.wordpress.com/html-list”>HTML-LIST</A>
Hyperlink visitor sees: HTML-LIST
Link Location( href attribute )
The letters “href” stand for Hypertext Reference and serve as an HTML attribute which contains a custom value; in this case the custom value is the link location. In this example our value is “https://vinodsrivastava.wordpress.com/html-list”
Target attribute
The target attribute specifies where to open the linked document.
The example below will open the linked document in a new browser window or a new tab:
<A href=”https://vinodsrivastava.wordpress.com/html-list” target=”_blank”>HTML-LIST</A>
|
Target= |
Description |
| _blank | Opens new page in a new browser window |
| _self | Loads the new page in the current window |
| _parent | Loads new page into a parent frame |
| _top | Loads new page into the current browser window, cancelling all frames |
Links are of Three Types
Global link – On other website /pages outside your website- Interlinking
Local Link -On the same website’s Pages- Interlinking
Internal Link (Bookmark)– On the Same page -Intralinking
Suppose Your Website is vinodsrivastava.wordpress.com
Example of Global Link
Your are creating a hyperlink in one of your webpage for example this page to mail.yahoo.com
<A href=”http://mail.yahoo.com” target=”_blank”>Yahoo Mail</A>
Example of Local Link
Your are creating a hyperlink in one of your webpage for example this page to some other page on same website
<A href=”../html-list” target=”_blank”> HTML LIST</A>
Example of Local Link
Your are creating a hyperlink which moves your cursor from one part of same page to other part of page
<A href=”../html-list” target=”_blank”> HTML LIST</A>
The Anchors (Internal Link or Book Mark)
To link to a specific spot on a web page, you need to use a pair of anchors. One where you are linking from, and one where you would like to link to. The first one, is where you are linking from. It is very similar to the normal link tag. The starting tag looks like <A HREF=”#name”> and the closing tag looks like </A>. The text between the two tags is what is the link. The text “name” identifies the anchor, giving it a name.The second anchor identifies where you are linking to. This tag must be placed in your HTML in the location where you would like to link to. The starting tag is <A NAME=”name”> and the closing tag is </A>. It is not necessary that any text goes between these two tags as it is just identifying an area. The text “name”, must match that in the first anchor, for the link to work. Here is an example of an internal link.
Graphics as Hyperlinks
<a href="valid web address">
<img src=”graphic file name“>
</a>
Now that you know how to insert graphics on your web page and how to create hyperlinks, let’s put the two together to display graphics that act ashyperlinks. Some common uses for this are:
- Linking to the website’s home page via a graphical heading or logo appearing at the top of each web page.
- Linking to the next page, previous page or the top of the current page via ‘buttonized’ navigational links at the bottom of each page.
- Linking to all the pages in a website via buttons in an index or menu.
- Linking to large full-sized graphics via thumbnail or miniaturized versions.
How To Make an Image Hyperlink
To make an image into a click-able hyperlink, simply replace the hyperlink text with some HTML image code. Images can have a relative path (/images/sample-image.gif), or they can have an absolute path (http:// hyperlinkcode .com / images /sample-image.gif)
HTML Image Hyperlink Code
Code
<a href=”http://vinodsrivastava.com” target=”_blank”> <img src=”home.jpg”></a>
in the above example code name of the image given is home.jpg and it is present in the same folder where webpage contain the picture is stored. When user click the image it will open the link page in new window
if your image is present in some other folder of your website in that case you can use either the absoulte path or relative path as explained in the beginning of this tutorial.
HTML Email Address Hyperlink
To make a hyperlink that will launch the users mail client ready to send email to your email address, simply add mailto: into the regular hyperlink code followed by your email address.
Code
<a href=”mailto:your_email_address”>E-mail Me!</a>
Example
<a href=”mailto:vinsri76@yahoo.com”>E-mail Me!</a>
when your users click on the link, the browser should open the default email client with the “to” and “subject” fields already populated.
Previous |
Solved Examples |
Unsolved Questions for Practice |
Next |
VKS-LEARNING HUB 
