HTML, hypertext markup language, is very simple. It has big advantages over word processors because the file is made of simple text characters. This means that it should last many years, unlike word processor formats.
HTML is also easy to learn, and you can use it for many documents. Because browsers are free, it gives you a world-wide publishing method. It is not necessary to buy a program that creates web pages for you, that will only trap you into using the program.
If you work your way through this page and TRY EACH STEP you will be able to create quite good web pages in less than an hour.
How to Start The first thing to do is to get a browser running on your machine. Create a file named htmldemo1.html (or any name, just so long as it ends in ".html"). Do NOT write this file out as "html". The people who build word processors have designed some of them to prevent you from doing this. You may need to write your file out as txt and then change the name to html. One way to avoid this problem is to use vim.
Inside the htmldemo1.html file put a simple sentence, you can write anything you want. Direct your browser to the file like this:
file:/htmldemo1.htmlFor example, I used htmldemo1.html.
(Note: the exact URL you need will depend on your computer. On unix the 'path' may be found by typing 'pwd' in the directory you launched your browser from. Suppose that it was "/home/blueberry/toms/public_html" on one of my computers. Then the path to give my browser is: "file:///home/blueberry/toms/public_html/htmldemo1.html". On a Mac you can do it that way with the Terminal, but there is an even easier way. First, download the htmldemo1.html file and put the file whereever you want. Then open your browser (Safari and SeaMonkey worked for me) and drag it and drop the file icon into your browser window. The correct path will be created on the window and you will be looking at your local copy of the file.)
That's it! If you can get that simple file to show on your computer, you are home free!
Now make a file like this:
<html> <head><title> zzzFIXthisTITLE </title></head> <body bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#00ff00" vlink="#888888" > <center> <h1> zzzFIXthisHEADING </h1> </center> <p> zzzPUTsomethingHERE: first paragraph </p> <p> zzzPUTsomethingHERE: second paragraph </p> <body></html>I have put a copy in htmldemo2.html. Make the file on your computer and direct your browser to it. Modify it a little bit from my version so that you know that it is your version.
Ok. Here are what the parts mean:
Here's a trick: On Netscape there is a 'View' button. Click on that and select 'Page Source' (all browsers have a way to do this, look on yours for it). This will show you the html for the page. So if someone does something interesting, you can find out how they did it and copy it!
Note that unlike a word processor, you the browser does the page layout. You just supply the text and IT wraps. I would suggest that you keep your lines short though (less than 78 characters is a good rule) and break your sentences at logical places. This way you can see the structure of your language and let the browser worry about how to show it. This separation of tasks is quite powerful.
Here are some more useful text controls:
text that is set off by itself and indented
Images You need to download an image. Use either gif or jpg for starters. Then you point to the image like this:
<img src = "myimage.gif">You have to define the URL (universal record locator) for the file that contains the image.
This is great fun!
<a href = "https://alum.mit.edu/www/toms/" >Tom's Home Page</a>
https://alum.mit.edu/www/toms/The second part is the material that one wants to be linked, in this case
Tom's Home PageWith this you can organize your own miniweb on your own computer. You do not need to be connected to the internet to traverse between the files with your browser! You will, however, have to be careful to get the right file names for the URLs. For example, you can just say "myfile.html" if the file is in the same directory (folder) as the page citing it. Otherwise you will have to specify which directory it is. An easy way to find out the proper syntax on your machine is to drag a file and drop it into a Netscape window.
If you make an image reference inside a hypertext link like this:
<a href = "https://alum.mit.edu/www/toms/"> <img src = "myimage.gif"></a>Then you will see that there is a border around the image. To remove it you can set the width of the border to 0:
<a href = "https://alum.mit.edu/www/toms/"> <img src = "myimage.gif" border = 0></a>
You can also control the position of the image if you put it in the middle of some text:
<img src = "myimage.gif" border = 0 align = right></a>That makes it situate on the right side of the page. Other options are 'mid' and 'left'.
Sometimes an image near the bottom of a paragraph will overlap into the next paragraph and you want to break after it. To do this force a complete line break with
<br clear = all>
<ul> <li>item 1 <li>item 2 </ul>makes an unordered list:
You can nest lists! I recommend indenting to do it:
<ul> <li> item 1 <ul> <li> part a <li> part b </ul> <li> item 2 <ul> <li> part a <li> part b </ul> </ul>gives:
You can also make an ordered list:
<ol> <li> part a <li> part b <li> part c </ol>gives
Tables! Basic tables are pretty simple:
<table border = 3 bgcolor = yellow> <tr> <td scope="col"> first table row, first data item </td> <td scope="col"> first table row, second table data item </td> </tr> <tr> <td> second table row, first data item </td> <td> second table row, second table data item </td> </tr> </table>gives:
|first table row, first data item||first table row, second table data item|
|second table row, first data item||second table row, second table data item|
So you want to see the results of your HTML editing immediately like a WYSIWYG? You hate having to do all that mousing around? Well! Try atchange!
Some useful pointers:
If you liked this lesson, please
<a href = "mailto:email@example.com" ?subject=htmllesson.html>email me</a>i.e. email me! Please tell me how long it took you to go through the page.
2008 Sep 04 - Greg Knap reported "2 hrs, I am slow!" Being the first to report (after 8 years!), he is both the worlds record holder for slowness and speed! He now holds records at both ends of the spectrum.
origin: 2000 Dec 6
updated: 2017 Nov 12