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 >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.


FWIW:
Biography

©
Jay Boersma