Ordered Lists
You can organize content of your site by using ordered and unordered lists.
Here is an example of such lists.
Ordered List
- This is item 1
- This is item 2
- This is item 3
- This is item 4
Unordered List
- This is item 1
- This is item 2
- This is item 3
- This is item 4
To create and ordered list first start with the ordered list tags.
<body><ol> </ol></body>
Then for each item on your list add the list item tags.
<body>
<ol> <li></li></ol>
</body>
Then insert the text of the item in between the opening and closing list tags.
<body>
<ol> <li>This is item1</li></ol>
</body>
To add another list item simply add another set of list item tags and the text to be listed.
<body><ol>
<li>This is item1</li>
<li>This is item2</li>
</ol></body>
And the list will look like this:
- This is item 1
- This is item 2
To make an unordered list without the numbers use the unordered list tags instead of the ordered list tags.
<ul>
<li>This is item1</li> <li>This is item2</li></ul>
</body>
And the list will look like this:
- This is item 1
- This is item 2
The horizontal rule is very useful in helping divide sections of your page.
Below is an example of a horizontal rule.
To create a horizontal rule you’ll need to use the <hr> tag. This tag does not need a closing tag.
<body> <hr> </body>
You can adjust the width of the horizontal rule as follows.
<body> <hr width=”50%”> </body>
or maybe you want it a little bigger
<body> <hr width=”75%”> </body>
Keep in mind that by using a percent value the line will take up a percentage of the browser window. Therefore it may look very different in two different browsers.
To make things more exact you can measure the width of the line by using pixels. To do this, simply leave out the percent sign, like so:
<body> <hr width=”50″> </body>
You can also set the alignment. The default is centered.
<body> <hr align=”right” width=”50%”> </body>
or
<body> <hr align=”left” width=”50%”> </body>
or
<body> <hr align=”center” width=”50%”> </body>
You can also set the thickness of the line.
<body> <hr size=”1″ width=”50%”> </body>
or maybe you want it a little bigger
<body> <hr size=”10″ width=”50%”> </body>
even bigger?
<body> <hr size=”20″ width=”50%”> </body>
You can also make the line solid by inserting NOSHADE.
<body> <hr size=”20″ width=”50%” NOSHADE> </body>
Lesson 13 – Images
A very effective part of enhancing a web page is done through adding images.
Let’s go ahead and save the following picture in the same directory in which you have saved your web page. To do this, follow these easy steps:
- Let your mouse hover over the image below.
- Press the right click on your mouse.
- Click on Save picture as.
- Name the file flower.jpg.(Be sure to save it in the same directory that your mypage.html web page is in.)
To add an image we’ll need to add the img tag.
<body>
<img>
</body>
Then we need to add the source attribute along with the image name. This lets the browser know where it could find the image as well as the image name.
<body>
<img src=”flower.jpg”>
</body>
Image tags do not need closing tags.
You can also adjust the height and width of a image by adding in the height and width attributes.
If you do not add these attributes the default settings will be whatever the actual size of the image is. The actual dimensions of this image is 150 x 200.
<body>
<img src=”flower.jpg” height=”200″ width=”150″>
</body>
You can make an image larger or smaller by changing the values of the height and width. Let’s make the picture we have just inserted smaller.
<body>
<img src=”flower.jpg” height=”100″ width=”75″>
</body>
You can also set the border of an image:
<body>
<img src=”flower.jpg” height=”100″ width=”75″ border=”5″>
</body>
If you change the value of the height without changing the value of the width proportionately the image will be distorted. Look at the following example:
<body>
<img src=”flower.jpg” height=”125″ width=”200″>
</body>
Your probably wondering to yourself, why would I want to do that. Well let me show you how useful that tool can be.
Look at the following picture –>
It’s just a red dot 1×1 pixels. Its so small, you may find it difficult to even see.
Here are some examples of how the image will appear if you adjust the width and height.
| Code | Result |
| <img src=”dot.gif” height=”3″ width=”50″> | |
| <img src=”dot.gif” height=”5″ width=”100″> | |
| <img src=”dot.gif” height=”10″ width=”200″> | |
| <img src=”dot.gif” height=”50″ width=”50″> | |
| <img src=”dot.gif” height=”50″ width=”100″> | |
Lesson 14 – Links
Anchor tags are used to create links. These are anchor tags:
<body><a> </a> </body>
Then we’ll need to insert the href attribute. This tells the browser
what the name of the page we are linking to is.
<body><a href=”pagename.html”> </a></body>
Then we need to put the text that we want to appear as a link in between the opening and closing anchor tags.
<body><a href=”pagename.html”> This text is a link.</font></body>
Let’s test it out.
Copy and paste the following code into a blank notepad file and save this file as page1.html.
<html> <head> </head> <body> This is my first page. <a href="page2.html">Go to Page 2</a> </body> </html>
Next, copy and paste the following code into a new blank notepad file.
<html> <head> </head> <body> This is my second page. <a href="page1.html">Go to Page 1</a> </body> </html>
Now, save this file as page2.html. Make sure that you save it in the same directory (meaning the same folder) as the page1.html file.
Tables on your web pages can be a very useful tool to help organize the structure of your page. The first thing to understand about tables is that every table must have at least one row and at least one cell. A table is made up of
rows and rows are made up of cells.
Here is an example of a table:
| This –> | —–> is a | ———>table | ——>row. |
| This is a cell | |||
| This is a cell | |||
| This is a cell |