Header, more than header

This article is all about what you can do with the HMTL5 element <head> . What it is and what you can add it to make it more than it normal is.

Better than you know

Basically header, well it it’s head of the page. Some parts of it can be made visible, some parts just aren’t visible at all and they can be see in page sources only. This is the part where my interest went another level “some parts can’t be see normally” . Well some says that it’s not big deal to have much in the header I think that some parts should always be there, or if they shouldn’t be you can add them there easily without anyones notice until they finally looks pages sources.
Thinks you can add there are comments, meta-data about which version are you now running, sites description what you can find here and some keywords for search-engines (One way to go Google faster), you can make site automatically refresh, add some special fonts(okay, there is another way to do this also) and for all Scandinavian people our languages finest marks “ö”, “ä” and “å” can be made to see as they normally look like.

Example of customized header

<!doctype html>
<html>
        <head>
		<title>Test Page</title>                 <!-- COMMENT:title of your site -->  
                <meta charset="utf-8">                   <!-- COMMENT:need only one charset -->
                <meta charset="ISO-8859-15">             <!-- COMMENT:need only one charset -->

                <meta name="author" content="Tuomas Törmä">
                <meta name="description" content="Test page for html exercise">
                <meta name="keywords" content="html, exersice, test, page">

                <meta http-equiv="refresh" content="120" <!-- COMMENT:site refresh every 120 seconds -->
                <link href"style.css" rel="stylesheet" type="txt/css">  <!-- COMMENT: link to the styles -->
                <link href='http://fonts.googleapis.com/css?family=Pirata+One' rel='stylesheet' type='text/css'>  <!-- COMMENT:link to custom google font -->
	</head>
</html>

This is what you need to type for style.css file if you want to use custom Google font. You need to make this kind of new file. Because you have linked href=”style.css” you need only to save this to your public_html dictionary in that specific file name, in this case style.css or else browser shows only the site in default form. Remember to save this in all file format, NOT IN .TXT!

style.css

h1  {font-family: 'Pirata One', cursive;  /*COMMENT:Your heading one (h1) custom google font*/
    }

To see more about style.css read my article about it. What it does, you can actually customize easier bigger objects. Usually it’s used to make body-element look nicer.

**Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. GNU License 3 (link)**

– Tuomas Törmä

Sources

  • Google web fonts (link)
  • Introduction to Web Site Development lectures At Haaga-Helia spring 2013 teacher Mirja Jaakkola.

2 thoughts on “Header, more than header”

  1. Greate pieces. Keep writing such kind of info on your page.

    Im really impressed by your site.
    Hi there, You’ve done an incredible job. I’ll definitely
    digg it and personally recommend to my friends.
    I’m confident they’ll be benefited from this web
    site.

    Reply ↓

Leave a comment