Valid XHTML 1.0 Transitional

Valid CSS!

Ysu Programming professional web development

Ysu Programming now operates as SmarterSoft.

Ysu Programming HTML tutorial - Intermediate

Introduction

This part is going to help with how to create a valid HTML page, and discuss a few more html tags. If you're un-familiar with HTML, you're an absolute beginner, please turn to the 1st part of this tutorial instead.

If you find any errors, or would like to add something, and especially if you find some parts hard to understand please contact me.

The document layout

Putting a HTML page together can be good fun, but in some cases may result in somewhat different result you expected. Sometimes it's simply a missing closing tag or a wrong measurement, but it can be the document type as well. So it's important how to format the document, and what goes where.

Reference material can be found on w3.org (w3c) altho you may find it a bit 'steep' if you're a beginner.

A well formatted HTML document contains the following:

A question: Why do you need all this? These things tell the browser agent how to handle your document. Without it you cannot be sure that it'll look and behave the same everywhere.

The body section is the one we should put all the content in. But what's the other two?

The line with the doctype defines which rules apply to the page you're just building - or built - and can modify the behaviour of the elements, or more like the behaviour of the browser handling those elements.

A clear and detailed description of the different DTDs can be found on w3c so I'll not go into that. For our purposes, using one of the more forgiving HTML 4.01 definitions is a good idea:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">

Note: you can of course put it on one line, I break it up so the page looks ok even in 800x resolution.

Then we need to define the other parts mentioned, so after all a valid document model looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
   <HEAD>
      <TITLE>You can type the title of the document here</TITLE>
   </HEAD>
   <BODY>
      <P>This is the document body, first paragraph
   </BODY>
</HTML>

The header

The header deserves a bit more discussion. All the tags discussed here are to be put between the <header> and the </header> tags. The title tag you've seen earlier is mandatory, anything else is optional. What you put in the header section is not directy displayed, but can have great effect on the document, either by including a css or javascript file, defining the language and character table to use or helping search engines with keywords.

Meta tags

Some of the definitions are put into 'meta' tags. These tags don't have a closing tag like the title, they contain the information inside the tag itself. Here's a sample of a few of the more widely used meta tags:

<meta name="author" content="Steve Horvath">
<meta name="description" content="HTML tutorial page">
<meta name="keywords" content="PHP, HTML, web development, tutorial">

As you can see these common meta tags have a 'name' and a 'content' attribute. You could add a 'lang' attribute as well, to describe your page in different languages. Seldom used though.

There's another type of meta tag, containing a 'http-equiv' attribute. It can be used to tell the browser agent about the document. For example about the expiry to caching:

<meta http-equiv="Expires" content="Tue, 28 Apr 2006 10:52:00 gmt">

Or if you strictly want no caching:

<meta http-equiv="cache-control" content="no-cache">

One important tag is the content type definition, which can tell the browser agent what character set to use. If the page does not use the same character set the visitors' browser agent does, this one helps. Of course you need to figure out which character set to use. If you're building an english language document, the iso-8859-1 is a good choice. If you're building a central european page, windows-1250 would be a good choice. If you need to find out more, google is your friend.

A couple of examples:

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Some meta tags are still a good idea to use, but to achieve great search engine ranking via meta tags is not a working method anymore, so don't stress yourself too much with them if you just want that (ranking).

Other things you can often find in the header are 'link' tags. These are not clickable links, they don't need closing either, but are still linking documents together. One example is to define the previous and next documents, which works with the back and forward buttons in Opera browser (my favourite) for example.

<link rel="prev" href="htmltutorial1.php">
<LINK rel="next" href="htmltutorial3.php">

Javascript

Two more elements you might often find in the header are the javascript file and the css file links. It's a good idea to keep these outside of your main html file to reduce clutter, lower maintenance and increase usability, especially re-usability.

Javascript, or ECMA script is not to be confused with Java. Java is a programming language not related to javascript. It was invented for online use, and is a script downloaded and run on the client's computer only, and has restricted access to resources. It can do nice things, but there are many problems with the different browser implementations of it, sadly.

The 'script' tag is valid inside the document body too, but if you're linking files it's nicer to put in the header section. There are some occasions when it have to be in the document somewhere though. It's also possible to put inline javascript into your documnent, in that case the javascript comes between the opening and closing script tags. Here's an example of linking in javascript files:

<script src="js/email-hide.js" language="javascript" 
  type="text/javascript"></script>

As you can see it has a closing tag as well. If you forget to close it, the rest of the file will be interpreted as javascript entry, and will not display what you wanted.

CSS

I'll write more about CSS (Cascading Style Sheets), I'm planning to write a whole tutorial on it in fact. For now, enough to say it makes life easier when it comes to defining properties of elements on the page. Colors, borders, margins, all are much easier to handle via CSS. The only problem - again - is the browser compatibility. You can put CSS definitions into the HTML file directly, by defining a section like this (always have to be closed):

<style type="text/css">p {margin:10px 0;}</style>

Or you can link the css file in via one method or other. There are many options, I don't want to discuss them here. One of the most common is to put the link into the header like this (no closing tag):

<link rel="stylesheet" href="main.css" type="text/css">

Ok, I think we've discussed the headers enough for a semi-beginner, let's see to a few more handy things.

Frames, iframes

Frames are not used too often nowadays, altho the iframe is still something worthwhile to look at. It's not 'internet explorer frame', it's 'inline frame' btw :). It's working in all browsers nicely too.

Frame

To define a page to use frames, you need a different HTML doctype, and the file containing the frames definition should contain almost nothing else. The content is in separate files. All content what should be in the frameset document is a small part between <noframes> tags, that will be displayed if a browser lacking the ability to display frames tries to render the page.

So, what good is it then? Well, for example writing an administration area, where you don't want to refresh the menu part every time.

Without further discussing the whys and hows, see an example here.
We need multiple files, one for the frameset definition, then one for each frame. Set up 3 files, and name them the following:

frameset.html - define the framset
frame1.html - the content for frame 1
frame2.html - the content for frame 2

The frame1.html and frame2.html content is not significant at the moment. We can put simply a line to show which frame is displayed. Normally those have to be well formatted html documents.

In frame1.html :

This is frame 1

In frame2.html :

This is frame 2

The important part is the frameset.html. The doctype have to be set to:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">

And the file does not contain a <body> element, instead there's a <frameset> The whole document looks like the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
  <title>my first frameset document</title>
</head>
<frameset cols="20%, 80%">
  <frame src="frame1.html">
  <frame src="frame2.html">
</frameset>
  <p>this frameset document contains:
  <ul>
     <li><a href="frame1.html">some contents</a>
     <li><a href="frame2.html">some more contents</a>
  </ul>
</noframes>
</frameset>
</html>

You can see the results by clicking here

It's possible to nest framesets too, and instead of cols, you can set up rows as well. With that it's possible to create a whole lot of frames on a page. The width/height can be set either by a number, which means pixels, or by percentage as it was in the example, or you can set it to '*' which is the wildcard - it'll take up all the remaining space. A more in-depth explanation of frames can be found in the w3c resources.

iframes

These are similar to frames in that they refer to other documents, but they can be used in the regular document body. Where can these be used? To create documents with little 'windows' in them, which contain a lot of text or other material which can be scrolled through. This saves screen real estate or keeps other elements on-screen while the text itself is scrolled.

Example:

<p>This is a document which contains an iframe just below.</p>
<iframe src="iframe-content.html" width="400" height="200"
             scrolling="auto" frameborder="1">
  [Your user agent does not support frames or is currently configured
  not to display frames. However, you may visit 
  <a href="iframe-content.html">the related document.</a>]
  </iframe>
<p> After the iframe the page continues ....</p>
	

The iframe-content.html file contains a lot of text to show how the scrolling occurs.See the iframe example in work here.

Without going too deep into the parameters, the 'frameborder' can remove the border, so the frame looks like it was really part of the page, 'width' & 'height' can set the size of the iframe, and the 'scrolling' can be set to 'yes' or 'no' instead of 'auto' to force the scrollbar to be there or not to be there.

All tags

Here's a list to all HTML 4.01 elements (tags). Some we've not discussed yet, none of the form elements specifically. I will not discuss those here, as they don't have much use to anyone unless you can actually work with the data entered - which in turn requires some server side programming knowledge. That's well outside of the scope of the current document.

Spacing and not braking - special characters

These are certain character entities, which you can use to tell the browser how you intend to format your text.

Sometimes we'd like to restrict breaking of a text at certain points, or give the opportunity for the browser to find a better place to break it. These are not tags, but special characters, they are written like this: '&nbsp;' or by their numeric value defined in the character set (iso-8859-1 for English documents) but these shortcuts are easier to remember. For example the amperstand is written like this: '&amp;' or '&#38;'.

The browsers try to break up text at certain points - word boundaries - instead of just somewhere. The '&nbsp;' means non-breaking space, telling the browser not to break up the text, but put a space there. The '&shy;' means this is a preferred place to break the line.

Might as well mention here: to output '<' and '>' to the HTML page is the same way, their code is '&lt;' for the less-than and '&gt;' for the greater-than sign.

Important: don't forget the closing semicolon from the end, without it some browsers will not display the special character you wish them to, as the definition is broken.

Professional Web development at ysu programming logo

Ysu Programming now operates as SmarterSoft.
Integra PowerSuite CMS | Website Development | Online Marketing | Web Hosting | Custom Software (PHP / MySQL) | IT Consulting