Pin Me

Saving Links in HTML Files

written by: •edited by: Michele McDonough•updated: 2/16/2010

If you’ve been wondering how to save an HTML file with links, then check out this article for a simple step by step explanation.

  • slide 1 of 5

    Learning HTML

    You can do all sorts of things with HTML (Hyper Text Markup Language). It allows you to define exactly how you want web pages to appear in a web browser. For beginners, it can be a steep learning curve. If you’ve just started working with HTML and you want to know how to save an HTML file with links, then read on for simple step by step instructions.

    This tutorial assumes you have already created a web page. If you haven’t yet done this then check out the How to Create a Web Page Using HTML tutorial first.

  • slide 2 of 5

    Importance of Links

    Links are very important on the web. They allow people to refer readers to useful resources and to recommend web pages. They also go some way toward determining the usefulness and popularity of web pages for many of the major search engines, most notably Google.

  • slide 3 of 5

    How to Save an HTML File with Links

    Creating a link and saving an HTML file with links in it is simple. To add a link to an existing HTML web page you need to do the following:

    Right Click on the HTML file and Open with notepad or wordpad.

    Once you have the page open find the place in the text that you want to place the link. In order to make text into a link we need to place tags around it which specify a web address. For example let’s say we wanted to add a link to Bright Hub. You would insert it by writing the following:

    <a href=”http://www.brighthub.com”>Bright Hub</a>

    Now save and close the HTML file and double click to open it in your browser. You would see the link appear like this:

    Bright Hub

    You can make any text into a link simply by placing the link tags around it:

    <a href=”http://www.anywebsite.com”>this text becomes a link</a>

  • slide 4 of 5

    Links Within a Website

    If you are linking to another web page on the same website then you don’t need to include the full address. For example if your website address was http://www.mywebsite.com and you uploaded a new page called newpage.html, then in order to link to it from another page on your website all you would need to write would be:

    <a href=”newpage.html”>link my new page</a>

  • slide 5 of 5

    Customizing Links

    Links can be placed within paragraphs or headers. By default links will appear in blue and be underlined. Since this is a web standard, it is not advisable to change it although you can tweak the color to suit your own website if you feel the need. This is easiest to do for a whole website if you use CSS (Cascading Style Sheets). You would do it in the same way you Use CSS to Set Up Header and Paragraph Styles but using the following code in your CSS file:

    a:link { font-family: Arial, Verdana, sans-serif; font-size: 14px; color: #FFFFFF; text-decoration: none; font-style: italic;}

    a:visited {color: #CC0000; text-decoration: none;}

    Using the attributes above you can define the size, color and style of text links before they are clicked and modify the appearance after they have been clicked. This code makes unclicked links appear in white italics and once they have been clicked they appear as normal text in red.

    You’ll find more handy tutorials in our sections on HTML and CSS.