Up to now, we've been working with a fairly simple HTML template with few items in the document <head>:
To the <head> of that simple template, we've added CSS style tags:
There are several other things that go in the <head> of the document.
<head>
<title>This is the Title</title>
<!-- INTERNAL JAVASCRIPT -->
<script type="text/javascript">
function displayDate()
{ document.getElementById("demo").innerHTML=Date(); }
</script>
<!-- EXTERNAL JAVASCRIPT -->
<script src="fade-in-script.js"></script />
</head>
(Much more coming on JavaScripts later.)
<head>
<title>This is the Title</title>
<meta name="keywords" content="Webwork, HTML, CSS, JavaScript, Web Tutorial" />
<meta name="description" content="A Small Collection of HTML/CSS Tutorials and Examples" />
<meta name="author" content="Jay Boersma" />
</head>The meta tags for the Webwork site as used in Google search results:
Meta tags used with the http-equiv attribute can be used to give the browser instructions about how to display content.
One of these instructions is already part of our simple template and it tells the browser which character set (utf-8
Here are a couple of other meta tags with http-equiv attributes that provide different functions:
<head>
<title>This is the Title</title>
<meta charset="utf-8">
<!-- THIS WILL REDIRECT TO ANOTHER WEB PAGE: -->
<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.colum.edu" />
(Finally, a fun one.) Favicons are little 16x16px icons that appear in the browser's address bar, tabs, and favorites menus. Favicons used to require a special app that could save in Windows ICO format but that is no longer necessary and they can be GIFs, JPEGs or PNGs.
Place the favicon in your site using this code:
<head>
<title>This is the Title</title>
<meta charset="utf-8">
<link rel="icon" href="yourfavicon.png" type="image/png" />
</head>Usually, a single favicon is created for an entire site to "brand" it but, using the above code, you can place a separate favicon on every individual page of your site if you want.
To make all of this a little less tedious, here are a couple of templates to use when beginning new Web pages that include many of the above items: