subscribe to receive this blog per email :: unsubscribe from the mailing list

Thursday, May 20, 2010

HTML Basics 3: Links

In my last blog, I have been looking more closely at the <head> tag which is one half of every valid HTML document. A couple of blogs ago, I already talked about some of the most basic HTML tags that make up the <body> of the page: <p> for Paragraph, and the different levels of headers, <h1>, <h2>, <h3>, <h4> and <h5>. Today I'll introduce the next most important tag you'll find in almost any web page: Hyperlinks.


Hyperlinks - or links, for short - are fundamental to the whole idea of the internet. The very name of the coding language we use, HTML - short for Hypertext Markup Language - includes the idea that there be links. "Hypertext" means an enhanced form of text, where virtually every word or piece of information can lead off in a different direction, by virtue of linking that word or short piece of text to another page with additional information. Remember that originally, the internet was intended for academic and research purposes - and Hypertext is the triumph of the footnote. If you've ever written an academic paper of any sort, you may know how tempting it is to drown your main argument in reams and reams of footnotes providing additional - but sometimes barely related - information. With a Hypertext document, you can have all the footnotes you want, at a mouse click, without burdening down the main argument of your text.


All you need to do is insert a link that leads off to another page. And obviously, without links, there would be no World Wide *Web*, but only a vast collection of individual and separate pages, with no way to navigate from one to the other.


The link tag has a slightly different format than most of the other tags we have encountered so far, which simply open and close - for instance <p> and </p> which are the tags that surround a paragraph of text. The link tag also consists of an opening and closing tag, but the opening tag contains some additional information - most importantly, the url of the page you are linking to!


Say, I would like to insert a link to my own home page, www.asni.net. The correct url for this page actually read: http://www.asni.net - and if you are linking to a different domain on the net, you always need to include the http:// prefix (links from one page to another on the same website are a slightly different matter, but I will cover this some other time when I talk about navigation menus and directory structures).


The format of the link tag is <a href="http://www.asni.net">Link to Asni's home page</a>. The basic tag is <a></a> - this stands for "anchor" - these tags enclose the link text which is displayed on the site. Note that the text of the link does not have to be identical to the url of the page you are linking to! I could have written this link as <a href="http://www.asni.net">www.asni.net</a>, but still, the bit that tells me where the link is pointing to is the part after the 'href=' - the url of the page I am linking to, which is always enclosed in double quotes, and needs to include the http:// prefix.


By default, the new page opens in the same browser window or tab you have just been looking at. It is often a good idea to tell the browser to open a new window or tab intead - for instance if you are linking to an external page but would really like your visitors to come back to your page after they have looked at your link. This is achieved by inserting a target="_blank" into your anchor tag. The tag then reads as follows: <a href="http://www.asni.net" target="_blank">Link to Asni's home page</a>.


Asni: Multimedia Art & Design:: http://webdesign.asni.net :: http://www.asni.net

Thursday, May 6, 2010

HTML Basics: The Head Tag

A couple of blogs ago, I introduced the most basic HTML tags to build your own web page. As I mentioned then, each HTML document consists of two main sections: the <head> </head>, and the <body> </body>. The <body> contains most of the things that are actually displayed on your screen when you view a web page. Today, however, I'd like to take a closer look at the <head>.


Most of the information inside the <head> tag is not directly visible to anyone viewing the web page. That does not mean that the contents of this section of the page are unimportant. Quite on the contrary! The head contains information that is vital for the functionality of the website - such as <style> tags that ensure the page is displayed the way it was set up by the designer, and <script> tags that specify any scripts running on your computer while you are viewing the page - for instance the popular Javascript, which enables a lot of the enhanced functionality you can admire on a professionally designed site. These can either be included in each individual page's <head>, or they can reside in an external file - a CSS style sheet or a script file - in which case the <head> tag would include a link to the external files which are needed to display the page correctly.


The <head> tag also contains information that is very important for search engines - if you are keen on improving your site ranking and get your pages found by more people, don't neglect paying attention to the tags in your <head>.


In my last blog on this topic, I already briefly covered the <title> tag. The line of text inside the <title></title> is what is displayed on top of your browser window. It is not to be confused with the main page headline inside your <body></body> tag, though it may well be the same line of text.


Next to your domain name, the <title> </title> is the single most important part of the site that determines how a search engine ranks your page's relevance for a certain keyword. Say you have a site about biking equipment. If you are lucky, you might have secured the domain "bikingequipment.com" which ensures that if someone enters the search term "biking equipment", your site is likely to be ranked quite high - if your domain name is equal to the search term entered, the search engine will assume that your site will be a good match.


These days, however, really obvious domain names are getting quite rare, and it is likely that if you are starting a new business and building a new website, someone else will have secured the domain "bikingequipment.com" already, and even alternatives like "bikingequipment.biz" or "bikingequipment.net" or "bikingequipment.co.nz" may already be taken (if the first business is smart, they will have registered all those variations themselves, to avoid having a competitor with a very similar domain name in the future).


Even if your domain has to be called something else - like "Petesstylishbikes.com" perhaps - no one can keep you from having the keyword "biking equipment" in your page title. If you are a biking equipment business located in Featherston, it would also be a good idea to include this geographical indicator in your page title - so your page might be called something like "Biking equipment Featherston Wairarapa". But beware of the temptation of making the title too long - keyword stuffing is not something that search engines appreciate. In the case of the title tag, most search engines only consider them up to a certain length - about 35 characters would be good measure.


Another tag that has some relevance for search engines is the <meta> tag. There is some dispute about just how much value search engines place on <meta> tags, and some search engines ignore them completely. Since they are not visible to the viewer, this is a place where much keyword stuffing and attempts at manipulating search engine results have occurred in the past, which has given the tag a somewhat dubious name. However, some search engines - Google included - definitely take them into consideration, so it is worth paying them some attention.


There are several kinds of <meta> tags, and they don't all have to do with content - some of them specify which language or character set is used, and if the content is mainly text, or some other media type. The meta tags relevant for your search engine optimization are the "keywords" and "description" meta tags. As the name implies, "keywords" contains a list of keywords relevant to your page, and "description" contains a short line of text that describes your page. This is often the line of text that appears in your Google search results under the link to your page.


The format of those tags is somewhat different from what we have encountered so far. Say you want to include this short page description: "Pete sells the most stylish biking gear in all of the Wairarapa". The tag would then read as follows: <meta name="description" content="Pete sells the most stylish biking gear in all of the Wairarapa" />. If you wanted to break it up into keywords, write: <meta name="keywords" content="stylish biking gear Wairarapa" />.


Asni: Multimedia Art & Design:: webdesign.asni.net :: www.asni.net