Starting HTML Navigation
- Starting Html -Intro
- Lesson1-An Introduction to HTML-Your first Web Page
- Lesson2-HTML TAGS Explained
- Lesson3-Formatting Text - Fonts
- Lesson4-Lists and Tables and Images
- Lesson5-Anchors and Linking
Lists Images and Tables
Lists
If you have a number of items to place in a list then you can use either plain, numbered, or bulleted lists as well as lists of definitions. The lists are formed by a code to specify the list type -ordered or unordered and a secondary code to specify the lists items.
Primary code tags are:
- <OL></OL>-- ordered list
- <UL></UL>--unordered list i.e. bulleted
- <DL></DL>---definition lists
Secondary Tags
- <LI></LI>
- <LI></LI>
- <DD></DD>
- <DT></DT>
Unordered list Example:
- This is an unordered list-item 1
- This is an unordered list-item 2
- This is an unordered list-item 3
This is the HTML to produce the list above. My notes are in red
| <UL> <---------- Primary Tag open Secondary Tag open Secondary tag close
</UL><---------- Primary Tag close |
Definition lists deserve a special mention as they are very useful for a list that links words or phrases with a much longer definition e.g. in a dictionary.
Tables
Tables like lists are used for structuring data. A Table is formed using 3 tags:
- <<TABLE></TABLE>
- Indicates start and end of table
- <TR></TR>dd
- Indicates start and end of row
- <TD></TD>dd
- Indicates start and end of a cell
A table with one row and three columns would look like this (with the text cell1, cell2, Cell3 in the cells) :
<TABLE>
<TR>
<TD>cell1</TD><TD>cell2</TD><TD>cell3</TD>
</TR>
</TABLE>
Tables on Web sites are used to present information in a particular way and are by far the most popular way of organising a web page.
Tables help designers layout text and graphics in the page so that they remain in specific places and relationships to other information on the page.
Tables also help determine what happens to the content of a web page when the browser window is re-sized. See laying out a web page using tables for more information.
I would also recommend you consult an HTML book for more information about tables.
Web page editors like FrontPage or Trellian make making tables very easy.
I wouldn't recommend you to try manually coding all but the most basic table.
Inserting Images
To inset an image on a page use the <IMG> tag as follows
<IMG SRC="my picture"> where my picture is the name and location of the image.
It is usual to offer alternative text for people who use non graphical browsers nut more importantly today for the search engines. the format is:
<IMG SRC="my picture" ALT= " if can't see my picture">
You can also specify the image size using
width= and height= attributes and even give the image a border using the border= attribute.
Here is an example of inserting an image called flowers.jpg with a size of 200*300 and a border 1 pixel thick.
| <IMG SRC="flowers.gif" ALT= " picture of a flower" width=200 height=300 border=1> |

Exercise 4
1. Copy the above image (right click and save as-see below) into the courses/images/ folder (you will need to create the images folder).
2. Open Notepad with a blank file and copy and paste the following text.
| <HTML> <HEAD> <TITLE>My First Web Page</TITLE> </HEAD> <BODY> <h1>Lists and Images</h1> <p>Here is a picture of some flowers</p> <IMG SRC="images/flower.jpg" ALT= " picture of a flower" width=200 height=300 border=1> </BODY>
|
3. Save the file as page2.html and view in a browser.
4. Change the image width to 400 save and view again in the browser. You should notice the distortion of the picture. This is because the original image is 200*300. The height and width attributes can only be used to roughly resize an image, to do it properly you need to use image editing software. (windows office picture manager on windows XP).
Continue to next---->Lesson5
Lesson3<------Previous
