Easy HTML Lesson

Easy HTML Lesson
by Tom Schneider

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.html
```
For 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>


zzzPUTsomethingHERE: first paragraph



zzzPUTsomethingHERE: second paragraph


<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:
- <html> start the html - at the top
- </html> end the html - at the bottom
- <body> start the body of the document - at the top
- </body> end the body - at the bottom
- <title> start the title - shows up at the top of the browser
- </title> end the title
- bgcolor sets the background color. I like white because it is easy to read. There are 6 f's. They come in three pairs, the first two are for red, then green, and then blue. Each is a number in hexadecimal. That's like the decimal system (base 10) but it is for base 16. Just as in decimal we have 0 to 9, hexadecimal counts from 0 to 15. "10" is represented by the letter "a", "11" by "b" and so on. So ff means 15*16 + 15 = 255, the highest possible brightness. Having all three color components fully bright makes pure white. ff000 is red and so on.
- text is the color of the text
- link is the color of links
- alink is the color of links when you have the mouse down (half of a click)
- vlink is the color of links that you have followed
- <center> and </center> make the text inbetween centered!
- <h1> and </h1> makes a heading level 1
- and begin and end a paragraph
That's it!
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:
- and begin and end italics
- and begin and end bold face
- and begin and end strong text
- and begin and end underlined text (Note: I would discourage you from using this most of the time because it can be confused with hyperlinks, which are generally underlined.)
- <blockquote> and </blockquote> begin and end
 text that is set off by itself and indented
- <pre> and </pre> begin and end
```
preformatted text
```
- <hr> horizontal rule
 (there is no ending part)
- break the line right HERE
 (there is no ending part)
- RED makes RED
- tiny lettering makes tiny lettering
- big purple lettering makes big purple lettering
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.
Hyper Links
This is great fun!
```
<a href = "https://alum.mit.edu/www/toms/"
>Tom's Home Page</a>
```
looks like this: Tom's Home Page. As in many html tags, there are two parts. The first part has the 'hypertext reference', in this case my home page URL:
```
https://alum.mit.edu/www/toms/
```
The second part is the material that one wants to be linked, in this case
```
Tom's Home Page
```
With 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
```
 
```

Lists

   <ul>
   <li>item 1
   <li>item 2
   </ul>

makes an unordered list:

item 1
item 2

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:
- item 1
 - part a
 - part b
- item 2
 - part a
 - part b
Of course the indentation won't affect the result on the browser, but it will make it much easier for you to construct the list (and avoid going crazy).
You can also make an ordered list:
```
 <ol>
 <li> part a
 <li> part b
 <li> part c
 </ol>
```
gives
1. part a
2. part b
3. part c
Isn't it nice that it does the counting for you?

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

Note that the 'scope="col"' tells a disabled person using a screen reader how the columns are organized. This makes the table 508 compliant

a brown mouse drawn as an outline with a red circle
around it and a red back slash behind it meaning that one
does not need to use a mouse if one uses the atchange
program.

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:
1. W3C: World Wide Web Consortium the official source for definitions
2. HTML Writers Guild
3. Tips on writing web pages
4. Web accessibility evaluation tool
5. Creating an Accessible Website
6. Links about web design at Purdue
7. Color example pages:
  - http://catless.ncl.ac.uk/Lindsay/swatch0.html
  - http://www.telecompricer.com/article/The-Web-Safe-Color-Dilemma.html The websafe idea doesn't matter much anymore but this page does give a set of nice links.
8. Funky chickens devoted to helping you with html and to make you giggle.
9. The HTML Hell Page tells very explicitly what you should not do!
10. Demoronizer: explains what Bill has done to you
11. W3Schools - Full Web Building Tutorials - All Free
12. 508 compliance makes sure that your web pages can be read with a reader by blind people.
13. How to Make Websites User Friendly and Accessible for Everybody
14. Top 100 Web Design Resources & Tools
If you liked this lesson, please
```
<a href = "mailto:toms@alum.mit.edu"
?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.

color bar Small icon for Theory of Molecular Machines: physics,
chemistry, biology, molecular biology, evolutionary theory,
genetic engineering, sequence logos, information theory,
electrical engineering, thermodynamics, statistical
mechanics, hypersphere packing, gumball machines, Maxwell's
Daemon, limits of computers

Schneider Lab
origin: 2000 Dec 6
updated: 2017 Nov 12
color bar