Webwork
/
It's All in Your Head

Up to now, we've been working with a fairly simple HTML template with few items in the document <head>:

<!DOCTYPE html>
<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:

<head>
<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.

JavaScripts - both internal and external:

<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.)


Meta Tags
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:

google_webwork
Meta Tags + http-equiv Attribute

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-8UTF-8 (U from Universal Character Set + Transformation Format 8-bit[1]) is a character encoding capable of encoding all possible characters with backward compatibility with ASCII.) is being used:

<meta charset="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" />

<!-- THIS WILL RELOAD THE CURRENT PAGE IN 30 SECONDS: -->
<meta http-equiv="refresh" content="30" />

</head>

Two-page refresh loop »

Favicon

(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.

Favicon Examples

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:

Page Template - White Background:
Page Template - Black Background:
Previous | Webwork Table of Contents | Next >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma