Do It Yourself | A New Order Fan: Computer World

DO IT YOURSELF
Something about HTML

Path: A New Order Fan (home page) > Computer World > Do It Yourself
Other main pages: the NewOrders (with Movement) - Diary - MFTM (my reviews) - Da Qui (Italia) - Links - Site Maps
Also on this page: Site search

Intro

Don't be fooled by those telling you making an HTML page is difficult.

The W3C (the authority making the rules of HTML) has decided new rules (I'll talk about them later) which are making it uselessly complicated, but the basic, classic tags still work, and they're so easy everyone can use them and make their own site.

There are many HTML tags, for an essential guide I recommend Web Host Directory's Basic Guide, for a comprehensive reference you should have the Web Design Group Reference.

But here I'm going to list you the truly basic tags (only seven). Once you know these, you can do your own page (in four easy steps) in true punk DIY spirit.
As for the editor, never trust the so called What You See Is What You Get editors, where you design the page without writing code (like on a word processor), they can be good at the start, but soon you'll notice they often don't display correctly, they mess too much with the code (sometimes making changes beyond your will) and you can't do many things with them if you can't write code. Once you get used to the code, writing it is also faster than going through the wizards of the editors. You can write even on Notepad, but I recommend Stone's Webwriter, because it's free, small, fast to load, easy and features instant preview, colour tags, a Multi Document Interface and a side toolbar where you can customize your most used tags which can be inserted with a double click, and you can set the most used to be inserted with keyboard shortcuts. You can read the complete review here.

The tags are always included in "less than" ( < ) and "more than" ( > ) brackets.
The most of the commands require a start tag and an end tag which contains a slash ( / ) before the command.
But some of them are made of a single tag.
You have to remember commands can be associated, but the start and end tags must be "nested", the first to start is the last to end, and the others come in the middle in the same order, close always the most recent command. For example we'll see the tags for Bold (B) and Italic (I). You can associate them by nesting them this way: text
but never do like this: text

The SEVEN essential tags

<HTML> </HTML>
This means the page is in HTML, everything must be placed inside these two tags.
<HEAD> </HEAD>
These tags contain useful informations which aren't featured on the page shown on the browser window.
<TITLE> </TITLE>
This is the only truly essential information (written between the two Title tags) included inside the Head, and actually the only shown on the browser, in fact on the blue upper bar where the title of the page is displayed, and often in the system tray as well. For example: Do It Yourself
<BODY> </BODY>
These two tags must be placed under the Head end tag (it's exceptionally not nested inside it, Head and Body are the two sections of the HTML) and include everything which is shown on the browser window (the Body of the page). All the text written inside them is displayed.
 
This is one of the few single tag commands, it doesn't need an end because it doesn't contain other information other than the command itself, which means a simple line break. Start writing your text inside the Body just like in a plain text page. One of the main differences is that the text break is not recognized by the browser. If you want to break you must give the command. Example: I want to write something like this:
This is the first line
This is the second line
I must place the Break between the two lines, otherwise it won't break at all.
<A> </A>
This "Anchor" means there's a link to something. The most common link is the HTTP Reference for the Internet pages, to do it you must place the HREF attribute after the the A in the start tag (attributes never repeat in the end tag) and then tell the browser the address in quotes (" ") after an equal sign ( = ). Between the two tags you write the text that will show the link underlined. It probably seems more difficult to read than to do, just try linking to Yahoo! by doing this:
<A HREF="http://www.yahoo.com">Yahoo!</A>
You'll have this:
Yahoo!
Another very useful attribute can be the E Mail address, which works the same, only you have to write mailto: before the address inside the quotes.
<IMG>
Another single tag command, to place an image on your page. You must always state the source by adding the SRC attribute with the name of the file of the image. You must remember to upload the picture and the HTML page to the same folder on your server.
The WIDTH and HEIGHT attributes tell the size of the image in pixels. To know the default size of your picture you can read it in the properties on your browser. You can change it but you may want to care about proportions...
The ALT attribute contains Alternate text which is displayed on a yellow label when you place the mouse over it, but most importantly tells the description of the picture to text browsers, mostly used by blind people through voice readers.
So for example you have the picture of your mate Jack on a file named jack.jpg , the picture is 300 pixels high and 200 pixels wide, and you want text browsers to read "This is my mate Jack". You'll write this code:
<IMG SRC="jack.jpg" HEIGHT="300" WIDTH"200" ALT="This is my mate Jack">

FOUR easy steps to make your page

Let's try a simple example:

Right click the picture below and save it as geo.gif
Start your editor. Save a new document as test.html
Remember to keep the picture and the HTML page in the same folder on your directory, otherwise you must write the path of the file.
Write the code. To make sure you don't forget it, it's always better to write the end tag (if your editor doesn't do it itself) right after the start tag and then put the content in the middle. For example, write the HTML end tag and then write the Head between the two HTML tags. Try writing the code below:

<HTML> <HEAD> <TITLE>Test</TITLE> </HEAD> <BODY> This is the first line This is the second line <A HREF="http://www.yahoo.com">Yahoo!</A> <IMG SRC="geo.gif" HEIGHT="36" WIDTH="305" ALT="This is the Geocities logo"> This is a webpage. </BODY> </HTML>
Save the page and open it on your browser

Once you can do a page like this you can do anything else. See? Easy, I told you... :-)

When you have your site ready you just have to upload it to a server. The most popular is Geocities, you can have your free account, upload your pages and pictures, and everyone will be able to visit your site.

Five other useful tags

You can already do your own site when you know these basic tags, but you may want to know some tags useful for the layout, like these:

<H1> </H1>
This is the
Heading
, it's the title of a section on your page. It's three sizes bigger than the default and the text is bold. It creates space around itself.
There are five other smaller sizes, H2, 3, 4, 5 and 6. H4 is the same as default size bold. H6 is very small and better be avoided to keep the text viewable from everyone.
<BIG> </BIG>
All the text inside these tags has its size increased. It's not a heading, so it can be used also inside lines of normal text in phrases.
<CENTER> </CENTER>
Text and images inside these tags are Centered.
 
All the text placed inside these tags is Bold.
 
All the text inside these tags is Italic.

There are many, many other useful tags, and I recommend you discover them all, but if you want to make a site, you can already start, and I think everyone should have their voice to say whatever they want on the Internet, it's the highest form of freedom and democracy.

Which HTML?

There have been various versions of HTML. Up to HTML 3.2 ("Wilbur", 1996) it was very basic (the first proper HTML was defined only in 1993 when the World Wide Web started)... HTML 3.2 brought a lot of great stuff, the best of what you see today, also the controversial "Font" tag (very useful to change the look of the text), with some minor display problems (see reference, I'm not going to explain everything on Font here...).

The solution to the problems, however, was far worse than the problem itself. Briefly, HTML 4.0 in 1997 tried to replace Font with Style Sheets (CSS), which haven't had a decent support on browsers up to 2001! They're not a bad idea, but if you want to use them you must remember many people won't see what you want, because they haven't upgraded their browsers... Also, CSS syntax is a bit more complex, works only on structure (even with classes) and not on text, and must be written in the Head or in a separate file (it can be nested in the Body as well, butn then there's no difference with the other tags...), while with the Font command you could work inside the text in the Body. I have myself tried style sheets and the good side is they save you a lot of time, the bad side is there are still rendering problems, even in Internet Explorer 6 as for font sizes...
The choice is up to you, mine was to stick to HTML 3.2 and the Font tag, which must be used with some ratio though...

Use only the most common fonts and state alternatives.
The most common serif font is Times New Roman, Times is the alternative for systems other than Windows, but is better to write also the family (serif) in case the viewer has set another default font. You better remember serif fonts (if not large) are better for print than screen, they can be harder to read on smaller screens and higher resolutions, especially italic...
The most common sans-serif font is Arial, which in a size 2 is optimal for smaller phrases. The alternative is Helvetica. The most readable font is Verdana (the one I'm using right now), which is a bit larger, so a size 2 will be the best, much more readable than a Times New Roman 3...
The most common monospace font is Courier New, the alternative is Courier
Keep using Headings when needed, better use the Big and Small tags rather than sizes. Don't use extreme sizes like 1 and 7, which could cause troubles to readers with small or big renderings in their screens. The only excpetion is Verdana size 1, which is still fairly readable...
Stick to the most common colours. An excellent resource is the Web Colors Homepage. Always keep a decent contrast between fonts and backgrounds (for example orange on yellow is not OK), remember there are colourblind people and anyway a light background makes your writings more readable.

Using fonts this way should avoid almost every problem, and anyway many of the accessibility matters are still present with style sheets. In both cases the viewer can still increase or decrease sizes with every browser, or view the page with Opera, a browser which allows the user to view the page in their personal mode (set in the options, with their own fonts and colours) overriding the format made by the author, simply by clicking the third button from left in the section at the left of the address field, on the address bar.

Another stupid feature introduced earlier in HTML was frames, with the result of dividing the page into sub-pages, it's hell for text browsers, search engines and source viewers, and they look just awful anyway. You can use tables to nicely divide content on your unique page, there's no need of frames.

Another bunch of hip design tools were introduced in these years: DHTML, Java, Flash etc. Of course there are a lot of display problems, even more than with style sheets, also because often these more complex codes are written with no precision. There's been a lot of abuse: I can understand a Java chat, but why do you have to insert Java applets on your page rather than simple image buttons or simpler links, it makes no sense. This smart stuff slows a lot the browsers too, because of the time the system takes to load it rather than the download time. Do without it as long as you can.

Finally the year 2000 brought the final farce of the degeneration of HTML: The W3C geezers had too much time on their hands and created XHTML, a new version of HTML filled with useless rules. Just say three of them: you should use lower case tags, you should always write an end tag even where there's no need of it and, last but not least, use style sheets for everything, even to center text! You just wonder how do they reach such levels of genius! ;-)
In two years this new version has been largely ignored from webmasters (true XHTML pages are rarer than Gopher), and rightly so! Can't wait to laugh with XHTML 2.0, the chaps are putting the final touch to this new opus, who knows what'll come next... write tags backwards? ;-p
Actually it seems they're deciding wether to keep the horizontal rule or not... oh, please... you need a vacation, you do...
Don't believe the hype and stick to traditional HTML as long as you can. It's unlikely browsers will ever end support for billions of old web pages (except W3C's own Amaya, which already does not support the Font tag anymore), and we must remember all the current versions of E Mail clients and WYSIWYG editors work on HTML 3.2 (with Font tags and all), the most popular of them use the Internet Explorer engine.
Should it ever happen support ceases (but it won't), you can always convert to the new stupid rules after learning them on excellent orthodox tutorials like the one at W3Schools. You can do it now already, it's more fun to break rules you know.
;-p

Computer World

Search this whole site

or browse the Site Maps.

Site started: 26 Jun 2000 - This page last modified: 26 May 2003

The Geocities logo was taken from, yes you guess, Geocities.

Intro

The SEVEN essential tags

FOUR easy steps to make your page

Five other useful tags

Heading

Which HTML?