Codehead: There is one more popular HTML element called LISTS.
Here is the genral form of a list:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
"ul" stands for UNORDERED LIST and "li" stands for LIST ITEM. Unordered lists are the most common types of lists.
To see how this works, open a new Notepad file and copy and paste ALL of the following code into it:
------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Lists</title>
</head>
<body>
Our services:
<ul>
<li>Custom programming</li>
<li>Website design</li>
<li>Search engine optimization</li>
</ul>
</body>
</html>
------------------------
Save it as ul_lists.html on your desktop and double click on the new file icon. My own example online:
http://www.virtualassistantforums.co..._ul_lists.html
Please take a moment to do this now and let me know if you have any questions.
How does your own page look?
Notice how each item is displayed; there is a circle next to each item.
We also have another type of list which is ORDERED LIST or "ol". In an "ol", items have numbers next to them.
To test this, open a new Notepad file and copy and paste ALL of the following code into it:
------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Lists</title>
</head>
<body>
Our services:
<ol>
<li>Custom programming</li>
<li>Website design</li>
<li>Search engine optimization</li>
</ol>
</body>
</html>
------------------------
Save it as ol_lists.html on your desktop and double click on the new file icon. Note the difference. My own example online:
http://www.virtualassistantforums.co..._ol_lists.html
How does your own page look?
So you can see that
starting your list with <ul> creates a list with the 'circle' bullet point. Starting your list with <ol> starts your list with the number 1.
ALWAYS remember to close both your <li> tags (with </li>) and your <ul> and <ol> tags (with </ul> and </ol>)! Just like with all of the tags we've discussed so far, keep track of your tags.
As always, you can have HTML elements within HTML elements, so you can have links or even images inside your LIST.
To test this, open a new Notepad file and copy and paste ALL of the following code into it:
------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Lists</title>
</head>
<body>
Virtual Assistant Forums:
<ul>
<li><a href="http://www.virtualassistantforums.com/forumdisplay.php?f=19">Coding Forums</a>: You can ask questions about website coding here.</li>
<li>Ask questions about search engine optimization <a href="http://www.virtualassistantforums.com/forumdisplay.php?f=20">here</a></li>
</ul>
</body>
</html>
------------------------
Save it as a_ul_lists.html on your desktop and double click on the new file icon. My own example online:
http://www.virtualassistantforums.co..._ul_lists.html
Please take a moment to do this now and let me know if you have any questions. What do you see?
Since you can have HTML elements inside HTML elements, you can also have lists inside lists!
This is a nice tool for when you have very long lists with subcategories or sublists that need to display properly.
To test this, open a new Notepad file and copy and paste ALL of the following code into it:
------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>Nested Lists</title>
</head>
<body>
<ul>
<li>
Parent list item 1
<ul>
<li>Child list item 1</li>
<li>Child list item 2</li>
</ul>
</li>
<li>Parent list item 2</li>
</ul>
</body>
</html>
------------------------
Save it as ul_ul_lists.html on your desktop and double click on the new file icon. My own example online:
http://www.virtualassistantforums.co..._ul_lists.html
Please take a moment to do this now and let me know if you have any questions. How does your own page look? Any problems?
There is no limit on how many child lists you can have!
You can see that I've opened the MAIN LIST <ul>, the parent list - and then opened ANOTHER list inside that list <ul>.
When the child list is finished, I close it properly </ul>, continue on with my parent list, if I want...and then I close the parent list when I'm finished </ul>. You can continue to add as many child lists as you like - just make sure you close each one AND the main parent list so that the whole thing displays properly.
The next topic today is TABLES.
Tables are used for showing table-like structures of data. Here is what the code for a simple table looks like:
<table>
<tr>
<td>Some info goes here</td>
</tr>
</table>
The elements of this table code are:
1) <table></table>: Defines the begining and the end of the table and like all the other HTML elements it starts with a starting tag <table> and ends with </table>
<tr></tr>: 2) "TR" stands for "Table Row" and it defines a HORIZONTAL ROW.
<td></td>: 3) "TD" stands for "Table Data" and defines a CELL in the table.
Here is a picture to help illustrate:
http://www.virtualassistantforums.co..._structure.gif
As you can see, you can have unlimited table rows and table cells, here is an example.
Consider you want to create an online sales listing for three computers:
1 - A Dell laptop that's $800
2 - A Toshiba laptop that's $700
3 - An HP laptop that's $750
Open a new Notepad file and copy and paste ALL of the following code into it:
------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tables</title>
</head>
<body>
<table>
<tr>
<td>Type</td>
<td>Manufacturer</td>
<td>Price</td>
</tr>
<tr>
<td>Laptop</td>
<td>Dell</td>
<td>$800</td>
</tr>
<tr>
<td>Laptop</td>
<td>Toshiba</td>
<td>$700</td>
</tr>
<tr>
<td>Laptop</td>
<td>HP</td>
<td>$750</td>
</tr>
</table>
</body>
</html>
------------------------
Save it as table.html on your desktop and double click on the new file icon. My own example online:
http://www.virtualassistantforums.co...tml_table.html
Please take a moment to do this now and let me know if you have any questions.
Do you see how this could be useful on your own website?
As you can see, the columns of this table are very close to each other, to make it easier to read and look nicer, we use an
attribute called "WIDTH".
To test this, open a new Notepad file and copy and paste ALL of the following code into it:
------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tables</title>
</head>
<body>
<table>
<tr>
<td width="100">Type</td>
<td width="100">Manufacturer</td>
<td width="100">Price</td>
</tr>
<tr>
<td>Laptop</td>
<td>Dell</td>
<td>$800</td>
</tr>
<tr>
<td>Laptop</td>
<td>Toshiba</td>
<td>$700</td>
</tr>
<tr>
<td>Laptop</td>
<td>HP</td>
<td>$750</td>
</tr>
</table>
</body>
</html>
------------------------
Save it as table_width.html on your desktop and double click on the new file icon. My own example online:
http://www.virtualassistantforums.co...ble_width.html
Please take a moment to do this now and let me know if you have any questions.
Member: You only changed the first lot of "td" (Table data) but all follow
Codehead: Yes, that's enough to tell the browser the size of the column!
Does it look better now?
This way, it's also easier to change the size of the column, that is, you only change the width on the first row, rather than changing the width on every single table cell.
Please note that, you don't need to have the exact same width for each column, that is you can have different widths depending on your data. If a column needs more room, simply give it more width
'width="100"' means that you want this cell to be 100 pixels wide.
Note that I only set the width on the cells of the first row and the browser *automatically* changes the width of all of the following cells. As you can see, it does look much nicer!
(Content cont'd in next post, scroll down to continue reading)
HTML - THE BASICS Session THREE with Codehead - archive
Stuck in startup? Stop dreaming. Start DOING! 
Linear Mode
