First of all, I shall tell you what HTML is all about: HTML is a formatting (markup) language, which means that it tells how the texts on a page are written or where the images are (just like Word or PDF documents). HTML can be written by hand and read (interpreted) using any web browser software, such as Internet Explorer, Mozilla Firefox, Opera or Safari. All the web pages on the internet are written in HTML.

SIMPLE HTML

As I said, HTML is a language that one can easily write by hand. Give a try: open notepad (or your favorite simple text editor), write hello world and save it as test.html. Now, if you double click on that file, you'll see that your web browser opens up and displays a hello world message in its window! For people that want to do more complicated tests, just a small note: if you want to change lines, you have to write <br> (web browsers will always ignore the "normal" line changes). Congratulations, you've written your first HTML; so now can go on a short tea - coffee - smoke - loo break...

MORE COMPLICATED HTML

I've given you about 3 minutes of work followed by a loooong break, which implies that now I have the right of torturing you a bit more (oh, yes): now that we've written a text in HTML, how do we change the shape and color of it? How do we put pictures? Can we put multiple things one on the other or do some special layout?

Words in HTML that are commands are put in < and > characters, and people often call those HTML tags. For example, if we now write <font color=#ff0000>thou shalt be red</font> and save it at test.html, we'll see a red text when we open it... Something like thou shalt be red! The img tag can be used to put images, for example <img src="image.jpg"> or like <img src="image.jpg" align="right"> if you want to have images on the right side of the page like on my web site's Who am I? section. Last but not least, the a tag can be used to link to other pages, like <a href="test2.htm">go to the test2.html page</a>. By the end of this text, I'll tell you how to get a list of all those tags.

One interesting HTML tag is the table tag: for example, if you type <table> <tr> <td>one</td> <td>two</td> </tr><tr> <td>three</td> <td>four</td> </tr> </table> the result will be something like:

one two
three four

In other words, the table tag creates a table, the tr tag defines a line of the table and the td defines a column. One interesting point to note is that each cell of that table may have a different background (bgcolor for a color or background for a background image), writing style (style), border (border) or dimensions (width and height). You can use tables to arrange elements (images or texts or both) the way you like on your page...

ADVANCED HTML

I've just mentioned the style sub-tag (people prefer to call that a property). That property can also be used with the div tag: that tag creates an HTML layer. Layers are just like HTML pages (so they contain texts, images or both or even more) but they can be put anywere you want on the page. They can also be superposed, have different dimensions and even be semi-transparent! For example, my web page uses layers in order to work: each window of my page is on a separate layer, and as you click on different items the order and transparencies of those layers are modified...

In addition, some tags apply to an entire HTML page: for example, in Ali's FTP Interface, the <style>BODY{background:#FEFEFE; font-family:tahoma,arial,helvetica;color:#000000; cursor:default}TD{font-size:13}H1{font-size:20}A{text-decoration:none; color:#2B5796}A:hover{color:#FF6262; text-decoration:underline}</style> command will define the style of all the pages of that application. You may even put that definition in another file (called a CSS definition file) and link it to each page (so changing that simple file once will change the style of your whole web site!)

WRITING HTML COMFORTABLY

Of course, most humans don't want to spend their time writing HTML by hand, and want to let a software do all the "boring" work. Those software are called WYSIWYG (What You See Is What You Get) editors, and there are plenty of them on the market: Microsoft has (FrontPage and Visual Web Developper - both having Express, therefore free, versions), Mozilla has, there even is an online editor (it's called wysiwygpro, and is a web site that creates web sites!). Those editors will generate some HTML files that'll look the exact way you want, thought those files will be larger than hand-coded ones. Still, they will be very useful while learning, to know about all tags and properties.

NEXT

Next, I'll tell you about one of the most important elements of HTML, JavaScript. Later, I'll also explain what DHTML can be used for... For now, perhaps the best for you is to do some exercices to test what you've learnt :)