Available for freelance work

October 14th, 2011 .

(X)HTML for Beginners – Lesson 4: Links

Categorized under: Web Development

Hello everyone. Here we are, today we’ll discuss about the most important element websites have: Links.
We see them and click on them everytime we visit a website. What whould have been the internet without links?
First, let’s see thet basic structure of a link:

<a href="value" title="value">Text to click on</a>

So we see that the tag used for creating a link is a (from anchor).
Text to display on site (clickable text) will be between opening and closing tags.

Link attributes:
1. href: mandatory attribute, here it goes the path of the link. The path can be:

<a href="about.php" title="About Me">About</a>

- relative to directory: If the current page is at http://alexandru.pandele.eu/new/contact.php and the href is set to about.php, clicking on the link takes you to http://alexandru.pandele.eu/new/about.php (same directory)

<a href="/about.php" title="About Me">About</a>

- relative to domain: (Mind the opening slash) If the current page is at http://alexandru.pandele.eu/new/contact.php and the href is set to /about.php, clicking on the link takes you to http://alexandru.pandele.eu/about.php

<a href="http://facebook.com/alexandru.pandele" title="About Me">About</a>

- absolute: This contains the full URL of the page.

<a href="#top" title="Go to top">Go to top</a>

- anchor: If is there any element with attribute id=”top” in the current page, the browser will focus on that area.

2. title: optional, but recomended. It is the title that appears when hover the mouse over the link. Get used to use it, because is an important SEO factor. In order to use it correctly, read this: http://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly/7687/

3. target: optional. Default behaviour is opening the new page in the same window. Setting target=”_blank” will open the page into a new tab/window (depends on browser). Other options are _parent and _top (used especially with frames).

Let’s see a complete example:

<html>
	<head>
		<title>My first HTML tutorial</title>
		<meta name="description" content="Here is the best place to learn HTML" />
		<meta name="keywords" content="html,tutorial,beginners" />
		<meta name="robots" content="INDEX,FOLLOW" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</head>
	<body>
		<div id="header">
			<div id="logo">Logo here</div>
			<div id="menu">
				<a href="index.html" title="First page">Home</a> |
				<a href="about.html" title="About Alecs">About</a> |
				<a href="contact.html" title="Contact Alecs">Contact</a>
			</div>
		</div>
		<div id="content">
			Beautifull content with images and videos and comments goes here.
			<a href="https://twitter.com/#!/hyperionXS" title="Follow Alecs on Twitter" target="_blank">Click here for more beautifull content</a>
		</div>
		<div id="footer">
			<div id="footer_links">
				<a href="index.html" title="First page">Home</a> |
				<a href="faq.html" title="Frequently Asked Questions">FAQ</a> |
				<a href="#header">Go to top</a>
			</div>
			<div id="copyright">Copyright &copy; 2011 Alexandru Pandele</div>
		</div>
	</body>
</html>

Questions?

You can follow any responses to this entry through the RSS 2.0 feed.

Comments

  1. Thanks a ton, alex. You made my day!


    Mark
    January 30th, 2012