THE HEAD SECTION!
|
THE HEAD SECTION! | |
 HOME RESOURCES LESSONS DIRECTORY ARTICLES FORUMS |
 Sponsor Links Free Image Hosting Your source for free image hosting - upload your images! Poker Strategies and Tips Poker, online poker, poker terms, poker accessories, poker tips and tricks. Photoshop Tutorials Over 3,000 tutorials for Photoshop, Flash and 3DS Max! 6,000 Free Fonts Download over 6,000 Free Fonts for Mac and PC @ FontVillage.com Buy Website Visitors 1,000 Targeted U.S. Visitors for $3.50 - 30 day guaranteed. Reading Tarot Cards Videochat with certified tarot readers & psychics - unlimited tarot cards readings! Affiliate Software Start an affiliate program and design to maximize affiliates' productivity PPC Search Engine Low cost advertising for your website! Technical Service Provider Your number one source for computer repairs and network solutions | | LESSON 1-11: The Head Section of an HTML Document
Web Design Lessons > Lesson 1-11: The Head Section
We have learned in Lesson 1-02 that an HTML document is composed of two parts - the "body" part (where the visible content is stored) and the "head" part (where information about the document or the objects inside the document are defined). The only exception to this rule is the <title> tag, which is stored inside the "head" part, although it sets a visible item of your document (your page title). In this lesson of our web design course, we're going to have a look at the tags that may appear inside the "head" part of your HTML documents. Setting The Title Of Your PagesWe set the title of an HTML document by using the <title> and </title> tags. Note that the title of your document is very important for search engine rankings - the first few words of your title HAVE to be the keywords you are targetting in order to get a good ranking. For example if you have a company called "Kitchfur" that sells kitchen furniture, your title is better off as "Kitchen Furniture - Find Kitchen Furniture @ Kitchfur.com" rather than "Kitchfur - A Kitchen Furniture Company". In order to add a title to your HTML documents, you need HTML code like the one below:
This will modify the title bar of your web browser, so that it will display whatever is stored inside the <title> tag. Setting Page DescriptionDid you notice that whenever you conduct a search on a major search engine, the engine displays a short snippet of description for each site. That description is set by the webmaster of each website by using a <meta> tag with the name="description" and content="[Description of your web page]" attributes. There is an example HTML code below:
Sidenote: It is not a good idea to use the same description for all of the web pages in a website. Using the same description throughout your website will cause search engines to ignore the tag altogether. Therefore, it is advisable to use a unique description for each of your web pages. The <meta> tag is a multi-purpose tag used to keep important information about the web page it is used in, such as description, keywords, character set, language, etc. The information is generally stored in the "name" and "content" attributes, as well as "http-equiv", "lang" and "scheme". Defining KeywordsDefining page keywords in the meta tag was popular practice until almost all of the major search engines decided to ignore these keywords because of abuse by search engine spammers. Therefore, defining keywords in the meta tag is redundant most of the time; but in case the search engines change their minds, we're going to learn how to do it. Below is some sample code:
As you see, keywords (or keyphrases) need to be separated by a comma. Sometimes only leaving spaces between the words is enough, though. Google ignores keywords in meta tags, but defining them do you no harm - other than taking up a small bit of bandwidth. Defining Document LanguageIt is possible to define the language of your web pages in the "head" part in order to help search engines index them under the appropriate language category. You can use the http-equiv="content-language" and content="[Language Code]" attributes inside the <meta> tag to define your web page language. Below is an example code:
You can define the language fo your HTML documents with the "lang" attribute of the <html> tag as well:
They both do the same job. However the "lang" attribute of the <html> tag overrides the meta language attribute in case of a conflict, so we can say that the former is more important than the latter. Sidenote: If you do not know the language code of the language you have used to create your web page, there is a comprehensive list found at this location. Setting The Character SetA "character set" is a group of characters such as "A,a,B,b,1,5,7,@,$,~" and so on. Different languages require different character sets, so if you design a web page in Chinese, you have to set the "Chinese character set" as the character set of your web page. If you fail to define a character set for your website, the content of your website is going to be rendered by the default character set of the web browsers of your visitors, which might be a different character set than what is required by the language you have used on your web page. For instance, Online-web-design-course.com is entirely in English, right? That's why I have defined a character set that covers all the characters required by the English language. If I hadn't specified a character set, a person living in Japan would not be able to view my website as it is supposed to be viewed, because their web browser would try and interpret Online-web-design-course.com with the Japanese character set by default, which does not contain English language characters. I know all of this is confusing, but suffice to say that it is VERY IMPORTANT that you define an appropriate character set for every web page you create. In order to set the character set of your web pages, you are required to use the http-equiv="Content-Type" and content="text/html; charset=[Character set id]" attributes inside a <meta> tag. Like the example below:
In the above example, the character set used is "iso-8859-1". This is the character set that contains all of the characters required by Western European languages - such as English. Below is a list of character sets based on language:
(The above list has been retrieved on October 27, 2004 from http://www.w3.org/International/O-charset-lang.html) Sidenote: The above list is almost obsolete, because there's a character set that includes every single character in every language and it is called "UTF-8". I advise you to use the UTF-8 character set instead of any of the character sets above, whenever possible. Embedding Copyright InformationYou can also embed copyright information into any web page by using the <meta> tag. All you have to do is assign name="copyright" and content="[Your Name]" attributes, and your copyright info will be set. Below is an example:
Keeping The Bots AwayIf you wish to prevent your site from being indexed by search engine spiders (and not be included in the search results) for whatever reason, you can do it with the name="robots" content="noindex, nofollow" attributes of the <meta> tag. Let's apply it:
If you use the bolded line in the above example, your web page will not be indexed by most search engines. Sidenote #1: Check out my web design resources page to download a superb eBook! Sidenote #2: If you enjoyed this lesson, please link to it :) The 11th lesson of the first stage of your free web design course is over. Let us proceed to the next lesson of our free online web design course for some useful website layout tips!
Nearby Lessons: • Lesson 1-09 Aligning Your Content• Lesson 1-10 HTML Forms • Lesson 1-11 The Head Part • Lesson 2-00 Website Layout Tips Back To Top  Home | Resources | Articles | Lessons | Directory | Forums Copyright© 2004 Onur Özcan. All Rights Reserved. | | Partner Links |