First time visitor? The tutorials start here.

Inside the Head of a Web Page

In the previous post of these tutorials, we got into the anatomy of a web page. There, we covered the <!DOCTYPE>, <html>, <head>, and <body> tags.

Now we’ll delve into the <head> section, starting with the <title> tag.

<title>

The <title> tag is very simple. All it does is put the title of your page into the bar at the very top of the web browser, in addition to creating the link text on a search results page.

<link>

This tag can be used for including style sheets like we’ve done with the practice files you’ve been using. It can also be used to include a favicon, which is the little icon that appears next to a page title when you add it to your browser’s favorites; or in some browsers, the icon automatically appears next to the page’s url in the browser’s address bar.

Style sheets (CSS)

For style sheets, you could have something like this:

<link rel="stylesheet" type="text/css" media="screen" href="/styles/style.css" />
<link rel="stylesheet" type="text/css" media="print,handheld" href="/styles/minimalist.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="/styles/handheld.css" />
<link rel="stylesheet" type="text/css" media="print" href="/styles/print.css" />

You can name a stylesheet anything you want, as long as it ends with a .css extension. However, it can help to give them names which help you remember what devices you are targeting with each one.

The media attribute specifies which types of devices you want that CSS to work with. With media=”screen”, it targets only desktops and laptops. With media=”handheld”, it targets only mobile devices. With media=”print”, you can control the way a page is printed. Try a File > Print Preview of this page and you will see how it makes a difference.

Other media you can specify are:

  • all — will target everything including PCs, handheld devices, printers, etc.
  • aural — will target speech synthesizers
  • braille — for paged braille printers
  • projection — for projectors or printing to transparencies
  • tty — teletype
  • tv — television-type devices

Out of all these choices, I typically stick with screen, handheld, and print.

Favicons

For favicons, the code would look like this:

<link rel="icon" type="image/ico" href="/favicon.ico" />

If you create an icon named “favicon.ico” and upload it to the root of the same website where you want it to show up, you actually won’t need to use that one. However, let’s say you don’t have a way to make an image with an “ico” extension and need to use a “png” instead:

<link rel="icon" type="image/png" href="favicon.png" />

You can also use type="image/jpg" for a jpg or type="image/gif" for a gif. I have actually seen people use animated gifs for their favicons, which can be quite cute at times.

<style>

This is used when you want to embed a style sheet directly into a page, or if you want to use @import to link to a remotely hosted style sheet.

An example of the first method might look something like this:

<style type="text/css" media="all">
     table, td { border: 1px solid #555; }
     th { background: #f9f9f9; }
</style>

Personally, I would only embed a style sheet into a page if I don’t plan on having the same type of element on other pages. Since I would rarely put a table anywhere (they should only be used for tabular data and nothing else), that might be a good one to embed into a page.

The 2nd use for <style> would look something like this:

<style type="text/css" media="screen">
     @import('/styles/style.css');
</style>
<style type="text/css" media="print">
     @import('/styles/print.css');
</style>

On a side note: Now might be a good time to remind you of that blank little file in your practice files that you’ve probably been wondering about. If you look in the <head> section of practice1.htm, you’ll see that I’ve already included it into the page.

For font sizes, use pt measurements (points), such as 11pt or 12pt. To see how it will look in print, you can go to File > Print Preview in your browser’s toolbar to preview it onscreen.

Now, back to the topic at hand:

<script>

The <script> tag is used to insert javascript, whether from a separate file like we’ve been doing with the CSS, or whether it’s insert directly into the page itself.

To point to a remote file:

<script type="text/javascript" src="/scripts/javascript.js"></script>

This is assuming you decided to create a directory for all your scripts and name it “scripts”, and are pointing to some file named “javascript.js”.

As with CSS, you can name a file anything you want, but with javascript, the extension needs to be .js

Because some browsers still don’t recognize the self-closing <script /> tag (ending with a space and a slash), this is one exception where you need to use </script> to close a tag which has no content between the opening and closing tags.

To embed javascript directly into the page, the code would look like this:

<script type="text/javascript">

         Your javascript code here

</script>

<meta>

Now all that’s left to cover for the <head> section are meta tags. But, since there are so many uses for them, I will give that one its own page: xHTML Meta Tags

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.