|
|
| Home | Old Issues | Examples |
Welcome to Nathsite's weekly 'Around the Web in Eighty Kilobytes', a 20-part free guide to building a website of your own, and using the web well.
To stop getting ATWI80KB's, send an empty email to atwi80kb@homepage.com with 'NO MORE THINGIES' as the subject. To look at examples and previous ATWI80KB's, go to http://atwi80kb.homepage.com
AROUND THE WEB IN EIGHTY KILOBYTES 1.15 - 1.16
ATWI80KB 8
May 26, 2000
1) Lists
2) Cool Stuff
Example
1) LISTS
There are three tags for making lists in HTML:
a. Unordered List <ul>
This is used for making bullet points. Each new bullet is made with the list item tag <li>, which can be used without closing tag, but that isn't clean code.
eg. <ul>
<li>Cats</li>
<li>Dogs</li>
<li>Rats</li>
<li>Bananas</li>
</ul>
b. Ordered List <ol>
This is used for numbered text, and is used the same way as <ul>.
eg. <ol>
<li>Cats</li>
<li>Dogs</li>
<li>Rats</li>
<li>Bananas</li>
</ol>
c. Definition List <dl>
This is the least common type of list, because it's useless. If you need it, here's how it works: It has two different tags: Definition term <dt> and Definition Definition <dd>, neither of which have closing tags.
eg. <dl>
<dt>Cats
<dd>Little furry things that spend the day in garbage cans.
<dt>Dogs
<dd>Not-so-little furry things invented to keep the number of cats under control.
<dt>Rats
<dd>Tiny furry things invented to serve as a cheap form of catfood.
</dl>
2) COOL STUFF
Here are some things you might find useful:
a. Comments
As your pages get more and more complicated, it gets harder and harder to edit them later. To make pages' source code easier to read, you can use the comment tags, between which the browser ignores everything. The opening comment tag is <!-- and the closing tag is -->.
eg. <!--The browser won't show this text-->
The browser also ignores all unrecognised tags (but not things between them)
b. <meta> Tags
You use these in the head of your page after the title. There are many types of <meta>'s, each of which is optional and needs a separate tag. Two common ones are 'keywords' and 'description', used by search engines. Type a short list of keywords in 'keywords' and a brief description of your site in 'description' (less than 200 characters). eg. <meta name="keywords" content="learn html free around the web in eighty kilobytes aniruddh nath">
<meta name="description" content="Around the Web in Eighty Kilobytes is a free guide to building a website.">
Another <meta> used is 'author'. <meta> can also be used to refresh the page every few seconds, or redirect the viewer to another page.
eg. <meta http-equiv=REFRESH content="60; url='page1.htm'">
c. Sounds
There are two tags to attach a sound to your webpage (Neither needs a closing tag).d. Preformatted text and Blockquotes
- <bgsound>
URL of the sound is chosen with the 'src' attribute. Loop chosen by 'loop' attribute.
eg. <bgsound src="song.mid" loop="1">
'loop' can be a number or 'infinite'.
eg. <bgsound src="boom.au" loop="infinite">- <embed>
This works just like the <img> tag. Most attributes are the same. It has width, height etc. and a few other attributes - 'hidden', 'autostart' and 'loop'. The values of these attributes can be only 'true' or 'false'.
<embed> leaves a big control-thingy in your page which lets viewers stop, start, play or pause the sound, unless hidden=true.
Autostart controls whether the 'play' button has to be clicked for the sound to start.
eg. <embed src="music1.mid" hidden=true autostart=true loop=true>
Use as few sounds as possible, 'cos they take ages to load. Formats like .wav are worst.
Anything between the <pre> tag and the </pre> tag is preformatted, i.e. it is fixed width and most tags etc. are ignored. The browser displays all extra spaces and lines, and all special characters. In other words, everything in the <pre> tag is plain text.
Blockquotes (I have no idea why they're called that) indents the text both on the right and on the left.
EXAMPLE
<html>
<head>
<title>Shadows of the Indus</title>
<meta name="keywords" content="html atwi80kb example">
<meta name="description" content="An example of parts 15 and 16 of ATWI80KB">
<meta http-equiv=REFRESH content="20; url='http://atwi80kb.homepage.com'"> </head>
<body bgcolor="#FFFFFF" text="#0000CC" link="CC0000" alink="#FF0000" vlink="#AA0000">
<hr><br>
<blockquote>
Here are some lists:<br>
<ul>Shopping list:
<li>Tomatoes</li>
<li>Bread</li>
<li>Car</li>
</ul>
<ul>Three-A-Side cricket batting order:<br>
<li>Nikhil</li><li>Rohan</li>
<li>Me</li>
</ul>
</blockquote>
<!------------------>
Preformatted text:<pre>
Spaces are seen.
No need <br>.</pre>
<nath>What's the <nath> tag?</nath>
<!--Invisible text? Nah...-->
</body>
</html>
See you in a week!
Aniruddh Nath
Email questions to atwi80kb@homepage.com - I'll reply if I have time. I might write stuff from your email in later ATWI80KB's.
NOTE: I'm not responsible for any damage done to your computer because of this tutorial.