Outer Court

Tech - HTML4

HTML is a way to describe information in referenced structures like on the internet's WWW.
This tutorial describes how to design HTML4 in its Strict version. With HTML you can create WWW pages like these. If you never wrote HTML before, this isn't the right place to start. Try the web design links to get to tutorials. If you just don't know how you'd use the new HTML, or why to use stylesheets, you may want to follow these questions:

Adding style

The newer versions of HTML, a standard made by the WWW-Consortium, seperate form and content by making it possible to use styles for the layout. The proposed stylesheet language CSS is implemented in major browsers, but not without bugs. Styles means you have an additional structural layer inbetween the content and its form. An additional step may sound like more work, but actually it's easier. Let's see how you'd create a certain layout for a paragraph in HTML3.2.

<p><font face="times">Sample paragraph...</font>

To use styles, you'd write:

<p style="font-family: times">Sample paragraph with Style...</p>

This doesn't look much different besides of the closing tag. Optional or not, this helps the browsers rendering the layout, while it also allows for future XML conversion. This sample used a similar method as above because it was an inline style. Inline styles don't help at all if you have multiple versions of this paragraph. If you wanted to change the font from times to arial on the whole page, you'd have to replace every "times" in the text.

Global style

It would be nice to only define the font and other styles once, and get away with the redundancy.
Now a header style:

<style type="text/css" media="screen"><!--
p { font-family: times }
<p>This is a sample paragraph with font times...</p>

This p style applies to every paragraph in the document (inside the body). Now to get the same effect like in the first samples you'd only write the simple p for paragraph.

To test any of these samples, you gotta have a stylesheet browser, like Netscape Navigator 4, Microsoft Explorer 4, or Opera 3.5. If there's a stylesheet option, it should be turned on, which it may already be by default. With Netscape, make sure JavaScript isn't turned off (see bugs).

To finish with a complete sample, we'll now move the stylesheet even outside of the head, and into it's own document we name sample.css. Just put the p { font-family: times } into it and save. To test the effect create a new document, name it "sample.htm" and put the following in it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html><head><title>Sample</title> <link rel="stylesheet" href="sample.css" type="text/css" media="screen">
<p>Sample paragraph...</p>

Obviously, you need to have the times font to see the effect, and if times is your default font use something like arial to see a difference. The doctype part defines the HTML you used. You have three options: Strict, Transitional or Frameset. Transitional includes HTML3.2, and Frameset includes transitional and allows to define pages with frames.
The title isn't optional, so always give it some meaning. Again, we used media="screen", because styles can be made for different media, like print. If we cover all media we'd write "all", but there's browsers which don't know what to do with it.

Continue with the tutorial: Structure.

Make a donation