HTML Links

HTML Language

Concept of Links

We are going to learn about links in this lesson. A link on an HTML page can take you to another page after clicking on the link. The destination can be a page on the Internet, or a page that you created.


Format

The basic format of a link in HTML is:
<a href="URL of destination">Link text that will appear</a>

For example:

<!DOCTYPE html>
<html>
 <body>
  <a href="http://www.abacles.com/">Abacles</a>
 </body>
</html>

The result will be:



Link to a Page of Your Own

To link to one of your own pages, you can copy the URL and paste, but a simpler way and a safer way is to use the destination's file name. For example, if you were to link to a page in my folder named answer.html, you can simply put:
<a href="answer.html">Answer</a>
This would create a link that will take you to the file answer.html.


href Attribute

As you can see in its formatting, the href="URL" is an attribute of the link, as you can remember, attributes always formats like name="value", with the equal sign and quotations. In further lessons, you will learn more attributes.


Formatting Text

We will briefly talk about formatting text, such as bolding, italics, and underline here.

To bold, use the <b> tags, to italicize, use <i>, to hightlight, use <mark>, <sub> and <sup> for subscripts and superscripts.

The <p> tag removes any excessive spaces in your text, therefore if you want to include special indentation or spacing, use the <pre> (preformatted) tags. Note that it does not auto-wrap like <p> does. (All the programs shown in our tutorials are formatted with <pre>)

Use the style="text-decoration:underline" attribute to underline text, this can be useful if you don't want your links to be underlined, simply set style="text-decoration:none".

You can also use the style attribute to format text fonts, colors, and sizes. style="font-family:serif" sets the font to the Serif family; style="font-size:20px" to set the font size; style="color:red" sets the font color to red. Note that the colors can be a standard color name, a hexadecimal code for HTML colors, such as #FF0000 for red, or a mix of red, green, and blue such as rgb(255,0,0). The rgb() format gives you the most flexibility, but you need to play around with it to get the right color.

Use the <br /> tag to start a newline (since there is only one tag instead of a pair, put <br /> instead of <br></br>). Use <hr /> to draw a horizontal line on your page.

<!DOCTYPE html>
<html>
 <body>
  <p><b><i>Bolded and italicized</b><i><br /><mark>Highlighted</mark></p>
  <hr />
  <pre>
Preformatted text               does not remove excessive spacing
Keep newlines</pre>
  <hr />
  <a style="text-decoration:none" href="http://www.abacles.com/">Abacles</a>
  <hr />
  <p style="color:red">Red text</p>
  <p style="color:#FF0000">More red text</p>
  <p style="color:rgb(255,0,0)">And more red text</p>
 </body>
</html>


Practice

Create two HTML programs, create a link in each of them linking to the other.

Create a paragraph in your favorite font, with line breaks in it, and one horizontal line before and after the paragraph. (Like this:)


This is the paragraph
With linebreaks
My favorite font is Arial!


Create a link that is italicized, with no underline, linking to a website on the Internet.


Tags

Tag Meaning
<a> Defines a link
<b> Bold
<i> Italicize
<mark> Highlight
<sup> Superscript
<sub> Subscript
<pre> Preformatted text
<br /> Newline
<hr /> Horizontal line



<< Previous TOC Next >>