How 2 Create A Website | HTML 4 Tutorials - Head Section
Head Section Tag
The head section of a web page consists of a head, title, meta tags.
To make a HTML webpage you must have <html> at the top and at the bottom </html>.
In the head section of your web page you will place your title of the page and meta tags. Check below.
Let's look at an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <title> Your Title Here </title> |
As you can see that the head section consists of the following tags: You will also note that there are an opened tag and also a closed tag for each.
<head> </head>
<title> </title>
<meta> </meta>
What type of tags can be inserted in the Head section?
- Title
- Meta Tags (description, keyword etc.)
- Character encoding
- Scripts
- CSS (Cascading Style Sheets)
- Linking resources
Document Title Tag
Type your page title here <title> Your Title Here </title> e.g. <title> My Company Name </title>
<head> <title> My company name </title> </head> |
Meta Tag Information
The meta tags describes the html document and data.
Type your description and keywords. Basically this describes the info that you're going to put on the page.
Search Engine Mata Tags
Most search engines use some of the following tags
- Description meta tag
- Keyword meta tag
<meta name="description" content="On this page you will find great products and specials"> |
Character encoding
This type of tag can advise web browsers what type of character encoding is used in the document.
This is how the content attribute looks
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> |
The content should first be described as "text/html", which tells the web browser to expect html to follow.
charset = character set - There are lots of different character sets, for different languages. I will mention a couple of character sets.
Name |
Character Set |
| UTF-8 | Multi-lingual Universal Transformation Format |
| US-ASCII | US ASCII characters |
| ISO 8859-1 | Standard ISO Latin-1 characters |
Scripts
Scripts can be added in the head section of a html document. Scripts can provide dynamic effects and content.
Javascripts can be used and added between the following tags:
<script> and </script> tags
</style> <script type="text/javascript"> </style> |
script type = describes the scripting language used
<nonscript> tags can be used for browsers that do not supports scripts.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <script type="text/javascript"> var today= new Date() </script>
<body onload=alert(today)> </body> |
Test javascript in head section example here
Style Sheets (CSS)
Style sheets can be added to HTML documents. Style sheets format contents physical appearance.
An example of a style sheet embedded in the head
<style type="text/css"> h1{ </style> |
The above style sheet will format the h1heading on the web page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <style type="text/css"> h1{ </style> </head> <body> <h1>This is how the css styled text look</h1> </body> |
Test css in head section example here
Link Resources
HTML 4 allows for a way to link to external resources eg. external javascrips, css files etc.
<link> tags have the following 3 attributes:
- Location
- Type
- Relationship
Let's look at an example of an external link:
<head> <title>External Link Example </title> <link rel="stylesheet" href="style.css" type="text/css"> </head> |
next | working with html code tutorials