Working With Hyper Links in HTML

By: Daniel Imbellino
Updated: Feb 28, 2013

You can create "Hyper Links" in HTML to point to another web page, file, image, document, etc.

The syntax for creating a hyper link:
<a href="index.html" target="_self">This is a link to our home page!<a>
EX: This is a link to our home page!This is what we just did with the code above.
The "a" stands for "anchor", and the "href" stands for "hyper text reference".

We can also link to another web page across the internet:
<a href="http://cnet.com" target="_self">Cnet.com</a>
You can use "self", "parent", blank, etc. This refers to what window will open to display the content you are linking too.
EX: By clicking this link you will open Cnet.com in the current window you are viewing.Cnet.com
If you set the the target attribute to "blank" then the page or linked content would open in a new tab in your browser.

You should always use the "http://" prefix when linking to external content on the internet from your web pages.

To link to an image in your websites directory use this code:
<a href="pacman.png">Click here to view this file</a>
Although this would nearly open the image in your browser window.

Or to link to and embed an image from an external URL:

<img src="http://example-url/image.png" alt="description" />

To create a download link for a given file or image just create a compressed zipped folder and link to the .zip file as shown below.
<a href="pacman.zip">Click here to download this file</a>
EX: Click To Download Pacman Image

What if I wanted to link to an image in HTML from another website and embed that image in my web page as a background, can I do this?

You can! Just use this code:
<body style="background: url(http://www.example.com/name-of-image-file.jpg);">

To link to and embed an image as a web page background in HTML, that is stored on your computer or web server directory use this code:
<body style="background: url(name-of-your-directory-where-the-file-resides/name-of-file.jpg);"> Notice the forward slash after the name of the directory. this is where you point to your image file.
For instance:
<body style="background: url(my-image-files/pacman.png);">

The last few examples we showed used "inline" styles to embed a background image in a web page, however, its best practice to create your web page styles and formatting in the head section using css as shown below.

To link to and embed an internal or external background image in your web page using CSS:
body {background-image: url("http://example.com/example-image.jpg"); background-repeat: no-repeat: background-attachment: fixed; } (This code links to an external image file across the internet)

body {background-image: url("name-of-image.jpg"); background-repeat: no-repeat: background-attachment: fixed; } (This code links to an image that is stored directly in your current directory as our web pages background image. If you wanted to link to the image in a separate directory, say on your web server, you would just point to that directory like so: url("name-of-directory/my-image-file.jpg"); Remember, a directory is just a folder. We included hyphens here for good coding practice. Hypens are seen by search engines, such as Google, as a word separator. Although search engines are more concearned with your HTML and the content that resides within it than they are with CSS.

Can I link to and embed a web page in my web page?

To link to an external sites web page and embed that page in your web site, just use the code below:

<iframe name="The name you choose to assign here" src="http://example-site.com/example-web-page" width="970px" height"650px" frameborder="5px"></iframe>
EX:

By clicking on the example link you can see we embedded the cnet main page into another web page. Notice we only inidicated the size in width and height parameters, but we didn't specify the location of the iframes content. To specify the coordinates of the iframe on the page, use CSS with the ID or DIV elements as shown below:

In your pages CSS Enter: #embed {width: 970px; height: 650px; position: absolute; left: 235px; top: 125px; }
Now you must create a div element in your HTML after the opening body tag like so:
<div id="embed">
<iframe name="newsframe" src="http://cnet.com" width="970px" height"650px" frameborder="5px"></iframe>
</div>
The iframe you created needs to be put inside the div element you created (your embed elements division).

Really, you could enter any name you wanted for your "name" of the iframe element. The same applies to your div element. You could give it any name you want, as long as you reference that name when creating your div container inside your HTML content. Also, you can specify whatever height and width you choose for your web page. Also, notice we used "absolute" positioning to position our "embed" element within our web page. You should always use absolute positioning when setting elements in CSS. You could use "relative" positioning to determine your layout, but every element would be positioned relative to another element, this gets confusing very quickly, so just stick with absolute and your code will work fine. You could also set your width and height attributes using percentages instead of pixels "px". If you use percentages, then you are effectively asking the code to check the size of the browser screen and implement the div element within that particular percentage such as:
#embed {width: 970px; height: 650px; position: absolute; left: 20%; top: 15%px; }.

You can also use the "@media" or "@import" elements of the CSS3 specification to render the same web page in different sizes depending on the size of the browser window with @media screen and (max-width: 768px) { then place your css code here } The "@media" function literally is used to measure the size of the screen or the browser window and display a particular set of CSS code for that given size screen or window. This makes implementing content on multiple size screens much easier. If you want to learn more about the @media and @import functions then check out our tutorials on "CSS3 implementing content for multiple screen sizes".

To Link To an Image file and embed that image on your web page:
<img src="http://example.com/example-image.jpg" width="165px" height="200px" />
You can set the image size using the "width" and "height" attributes. You can also link to an image file within your own dirctory. Just make sure to use a forward slash to point to your image file if it is in a separate directory from your HTML file itself.

Continue to Part 2 of working with hyper links in HTML..