How To Create HTML Links
So far you've been making a stand-alone web page, which is all very well and nice, but what makes the internet so special is that it
all links together.
The 'H' and 'T' in 'HTML' stand for 'hypertext', which basically means
a system of linked text.
An anchor tag (a) is used to define a link, but you also need to add something to the anchor tag - the destination of the link.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>How To Create a Website - Free Tutorial Site - Learn How To Make a Website</title>
<meta name="description" content="How To Create a Website isn't that difficult, once you know how! How to create a website
is a free tutorial site, learn how to make a website using easy to understand, website builders, design tips, website design tutorials
and lots more." />
<meta name="keywords" content="how to create a website, how to create a website, to create a website, create a website,
create website, create, website, make a website, make a free website, free website, Yola, affordable website design, website design,
design, free tutorial site, learn how to make a website, web, free, tutorial, site, how to create a website free,
website builders, HTML, webmaster tools" />
</head>
<body>
<h1>How To Create a Website</h1>
<p><b>How To Create a Website</b>
isn't that difficult - once you know how! But where do you start? How To Create a Website is a free tutorial
site on making a website, learn how to make a website.</p>
<h2>How To Create a Website - Free Tutorials</h2>
<p>The preparation phase of your website is very important. Not only will good site
planning make the building process much more effective, it will also increase the likelihood that your site will include all the
essential pieces.</p>
<h3>Webmaster Tools</h3>
<ul>
<li>Image Optimizer</li>
<li>Image Resizer</li>
<li>Browsershots</li>
</ul>
<p><a href="http://www.2createawebsites.com">Create a Website</a></p>
</body>
</html>
The destination of the link is defined in the href attribute of the tag. The link can be
absolute, such as "http://www.2createawebsites.com", or it can be relative to the current page.
A link does not have to link to another HTML file, it can link to any file anywhere on the web.
A link can also send a user to a new page halfway down the page, for example
<a name="open-page-here"></a>
place the above code on your page say half way down your page, so you can see how it works.
Copy the below code in another page. Replace "placepageurlhere" with the url
of the page you put the code half way down.
<a href="placepageurlhere#open-page-here">Link</a>
When the link is clicked you will be taken to the new page and to the postion you placed the code.
You can now move the code up or down the page to where you want your vistor to go.
DEMO LINK: Website Speed Test
You can also have it on the same page, for example
<a name="top-of-page"></a>
place the above code at the top of your page.
Copy the below code on the same page. Replace "placepageurlhere" with the url
of the page.
<a href="placepageurlhere#top-of-page">Top</a>
When the link is clicked you will be taken to the top of the page.
Example: See how I have replaced "placepageurlhere" with "links-html.php"
so that it works on this page.
<a href="links-html.php#top-of-page">Top</a>
DEMO LINK: Top
The (a) tag allows you to open the link in a newly spawned
window, rather than replacing the web page the user is on, which at first thought may sound like a good idea as it doesn't
take the user away from your site.
There are a number of reasons why you shouldn't do this however.
From a usability point of view, this method breaks navigation. The most commonly used navigation
tool on a browser is the "back" button. Opening a new window disables this function.
On a wider, more general usability point, users do not want new windows to be popping up all over the place. If they want to open a
link in a new window then they can choose to do so themselves.
If you would like your link to open a new page copy the code below, Replace "http://www.2createawebsites.com" with the link
you want and replace "create a website" with the name of your link.
<a href="http://www.2createawebsites.com" target=" blank">create a website</a>
Related Pages
|
