Up to now, we've been working with a fairly simple HTML template with few items in the document <head>:
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is HTML</title>
</head>
<body>
<p>This is HTML.</p>
</body>
</html>
To the <head> of that simple template, we've added CSS style tags:
<meta charset="utf-8">
<title>This is HTML</title>
<style type="text/css" media="screen">
p { padding: 5px; }
</style>
</head>
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.)
Always written in pairs such as name+content, description+content, etc. and always placed in the <head> of the document, meta tags are frequently used to provide search engines with information about the page. Meta tags are called that because they contain meta data. Meta data is data about data).
<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" />
<meta http-equiv="refresh" content="30" /> </head>
(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: