|
HTML code should be written with a simple-minded text editor like Notepad.
HTML documents begin with: <html> and end with </html>
Like so:
<html>
The "body" of your HTML stuff goes in here.
</html>
|
To identify the start and end of the "body", insert <body> and end with </body>, like so:
<html>
<body>
Your HTML stuff goes in here.
</body>
</html>
|
Note that starting and ending look the same ... except that the ending includes that "/".
Now comes the neat stuff. What to put into the "body"?
Try a <table>, but be sure to terminate the table with </table>, like so:
<html>
<body>
<table><td>
The "table" stuff goes in here.
</td></table>
</body>
</html>
|
Note: The <td> and </td> start and end your "table data".
So far, the above HTML file, when read by your browser, will look like this:
| The "table" stuff goes in here. |
Not too exciting, eh? Let's make it sexy by adding a "border" to our table and changing its colour to "cyan", like so:
<html>
<body>
<table border=5 bgcolor=cyan><td>
The "table" stuff goes in here.
</td></table>
</body>
</html>
|
Note: The bgcolor means background color.
The HTML file will now look like this (when read by a browser):
| The "table" stuff goes in here. |
Now we can include images (that's an img) by referring to a graphic that's somewhere on the Internet.
We'll use the graphic located here: http://www.gummy-stuff.org/smile.gif
Our modified HTML is like so:
<html>
<body>
<table border=5 bgcolor=cyan><td>
I'm happy!
<img src="http://www.gummy-stuff.org/smile.gif">
</td></table>
</body>
</html>
|
The HTML file will now look like this (when read by a browser):
I'm happy! |
Note that the smiling face is on the same line as "I'm happy!"
If you'd like the smiling face on another line, include a line break (that's a <br>), like so:
<html>
<body>
<table border=5 bgcolor=cyan><td>
I'm happy!
<br>
<img src="http://www.gummy-stuff.org/smile.gif">
</td></table>
</body>
</html>
|
The HTML file will now look like this (when read by a browser):
I'm happy!
|
When you're finished (or just plain tired), save your text file with all your HTML code, giving it a name like test1.html
It's that ending .html that allows your browser to recognize it as HTML.
If you save it on your desktop (for example), it will appear with an icon identifying it as an HTML file.
If your browser were Firefox, the icon might look like this: 
If your browser were explorer, the icon might look like this: 
Click on it and your web browser will display it ... as we have above.
For more stuff on HTML, check out HTML Overview
As a template for your HTML file, you can Copy and Paste this text into Notepad:
<html>
<body>
<table border=5 bgcolor=cyan><td>
Your message goes in here
<br>
<img src="http://URL for a picture goes in here">
</td></table>
</body>
</html>
|
By using tables, you can place text and pictures in various locations.
For example:
<html><body>
<table><td>
We went on a <font color=blue><b>cruise</b> </font>, on the good ship <b>JEWEL</b>.
<br>It was to the <i>Western Caribbean</i> and we visited various islands.
<br>It was great fun, but we ate <u>too much</u> and I gained 7 pounds. <img src="http://www.gummy-stuff.org/smile3.gif">
</td></td><img src="http://www.gummy-stuff.org/cruise-jewel.jpg">
</td></table>
</body></html>
|
When you save it then look at it with a browser, it'll appear like this:
We went on a cruise, on the good ship JEWEL.
It was to the Western Caribbean and we visited various islands.
It was great fun, but we ate too much and I gained 7 pounds. 
| 
|
|
If you use <font color=blue> in front of some text then end the text with </font>, you can colour the text enclosed.
Try green, red, orange,
gray etc. etc.
Note that <b> and </b> enclose text that you want in bold.
Note, too, that <i> and </i> are for italics and <u> and </u> for underlined text.
You can also change the size of the text. For example:
| This is <font size=-2>small text</font> and this is "normal", again. |
will appear like so:
| This is small text and this is "normal", again. |
|