base element in the head

The base element is used to specify the URL to prefix all relative URLs. The prefix is given in the href tag. The following sets the base to http://www.cs.mun.ca/~yzchen/. The last slash in the URL is required.

<base href="http://www.cs.mun.ca/" >

In XHTML, it is specified with:

<base href="http://www.cs.mun.ca/" />

A relative URL starts with a pathname.

An element with no content is given by <tag/>. In a XML document, all start tags must have an end tag.

style element in the head

The CSS style description is specified in the style element (i.e., between style tags). The type attribute should be set to text/css. The media attribute is not required, but it can be set to screen.

style-head.html

<html>
    <head>
        <title>Style Element</title>
	<style type="text/css">
	    p { font-style : italic }
	    #p1 { color : red ; text-align: center; }
	    #p2 { background : #CDA; width : 50%;}
	    #p3 { font-size: 200%; border : black solid;}
	</style>
    </head>
    <body>
        <p id="p1"> Hello World </p>
        <p id="p2"> Hello World </p>
        <p id="p3"> Hello World </p>
    </body>
</html>

link element

The link element defines a relationship with another page. Links to external style sheets are one of the most common uses for this element. Attributes for this element are:

href: URL of the linked document.
rel: defines the forward relationship, types are: stylesheet, start, next, prev, contents, glossary, chapter, section, subsection, appendix, help, bookmark, and alternate.
rev: defines the reverse relationship.
type: defines the media type of the link (e.g., text/css for a style sheet).

link style sheet

An example of linking to a style sheet is:

style-link.html

<html>
    <head>
        <title>Style Link</title>
	 <base href="http://www.cs.mun.ca/~yzchen/teaching/cs3715/notes/html-head/examples/" />
	<link rel="stylesheet" type="text/css" 
	      href="p-style.css" />
    </head>
    <body>
        <p id="p1"> Hello World </p>
        <p id="p2"> Hello World </p>
        <p id="p3"> Hello World </p>
    </body>
</html>

Using an external style sheets allow a style to be applied to a set of pages.

style element in the head

The p-style.css style sheet is:

p-style.css

p {
    font-style : italic;
}

#p1 {
    color : red ;
    text-align: center;
}

#p2 {
    background : #CDA;
    width : 50%;
}

#p3 {
    font-size: 200%;
    border : black solid;
}

meta element

The meta element describes meta data and is used to control some browser behaviour and describe the page to other tools. Two examples are:

<meta http-equiv="Expires" content="...time...">

<meta name="keywords" content="html element document">

The meta tag can be used to automatically reload a page:

<meta http-equiv="refresh" content="5; url=page">

script element

The script element contains code that the browser will execute. Unlike the other elements that appear in the head element, the script element can also appear in the body element.

The type attribute specifies the scripting language. The value for Javascript is text/javascript.

The script can come from an external document if the src attribute is used. The value should be a URL to the scripting code. The contents of the element contains the script if the src attribute is missing.

script-intro.html

<html>
    <head>
        <title>script element</title>
	<script type="text/javascript">
	    // define functions and variables
	    var count = 1
	    function hello() {
		var d = new Date()
	        document.writeln("<h1> Hi " + 
		    count + " " + d + 
		    " there </h1>" )
		count++
	    }
	</script>
    </head>
    <body>
	<script> hello() </script>
        <p> The first sentence.  </p>
	<script> hello() </script>
        <p> The second sentence.  </p>
    </body>
</html>

Creating documents with document.writeln belongs to DOM-0 and should not be used.

external script element

A script common to a set of web pages is usually placed in an external file. This also avoids the difficult of escaping the HTML character entities (i.e., < instead of <).

Consider the script:

colours.js

var colours = [ "red", "green", "blue",
    "cyan", "magenta", "yellow"  ]

var index = -1 

function genPara( id ) {
    index = (index+1) % colours.length
    var o = "<p style='color:"
    o += colours[ index ]
    o += ";'> "
    o += colours[ index ]
    o += "</p>"
    var e = document.getElementById( id );
    e.innerHTML = e.innerHTML + o
}

And now, the page

script-external.html

<html>
    <head>
	<base href="http://www.cs.mun.ca/~yzchen/teaching/cs3715/notes/html-head/examples/" />
        <title>External Javascript</title>
	<script type="text/javascript"
	    src="colours.js">
	</script>
	<script type="text/javascript">
	    function doit() {
		for ( var i = 0 ; i < 10 ; i++ ) 
		    genPara( "holder" )
	    }
	</script>
    </head>
    <body onload="doit()">
    <div id="holder">
    </div>
    </body>
</html>