Featured Templates
Home
HTML and CSS
Tutorials
The Basics of HTML
Added: Oct 03, 2005 Rating: Less than 3 votes yet
Level: Beginner Software:
Exercise Three
- Okay, let's return to the page we made about ourselves and try to use some of the text sizes, positioning and style tags that we just learned to spice things up.
- Below is an example of what your code might look like on the web:
- Below is the actual code:
<HTML> <HEAD> <TITLE>Bob Frog</TITLE> </HEAD> <BODY> <BLOCKQUOTE> <BASEFONT = "Arial"> <ADDRESS> <P ALIGN = "RIGHT"> Bob Frog <BR>bob@frog.com <BR>26 Ayer Rajah Cres. 12-01 <BR>Singapore, 12994466556 <BR>(65) 657-4586 </P> </ADDRESS> <P ALIGN = "LEFT"> <FONT SIZE = "4" COLOR = "RED"> <B>About me</B> </FONT><BR> <BLOCKQUOTE> Hello, my name is <B>Bob the Frog</B> and I am 278 years old from the <I>Gamma Quadrant</I>. I have 23 sisters and 1 brother. I am the oldest, though. You can find out more about me by sending me email! </BLOCKQUOTE> <P> <FONT SIZE = "4" COLOR = "RED"> <B>About my work</B> </FONT><BR> <BLOCKQUOTE> I am currently a software engineer working in <FONT SIZE = "5">S</FONT> <FONT SIZE = "4">i</FONT> <FONT SIZE = "3">n</FONT> <FONT SIZE = "2">g</FONT> <FONT SIZE = "2">a</FONT> <FONT SIZE = "3">p</FONT> <FONT SIZE = "4">o</FONT> <FONT SIZE = "5">r</FONT> <FONT SIZE = "6">e</FONT> doing <U>training</U> and <U>development</U>. I enjoy my work and have all sorts of really cool projects. </BLOCKQUOTE> </BASEFONT> </BLOCKQUOTE> </BODY> </HTML> |
Lists
The final section today will focus on using lists within your HTML pages. There are several types of lists that are used commonly. These include:
- Unordered lists like this one
- Ordered lists in which bullets keep track of the hierarchy
- Definition lists that look like glossary entries.
Unordered Lists
- Unordered lists allow you to create lists with various bullet styles. However, those bullets are images, and thus, do not reflect the level of hierarchy except visually.
- The basic unordered list involves three tags
- The <UL> tag is used to open a list. The <LI> tag is used to signify a list element, and the </UL> tag is used to end a list.
- For example, the following code could be used to create a list:
<HTML> <HEAD> <TITLE>Unordered List</TITLE> </HEAD> <BODY> <B>Food</B> <UL> <LI>Vegetables <UL> <LI>Broccoli <LI>Carrot <LI>Pea </UL> <LI>Meat <UL> <LI>Chicken <LI>Beef <LI>Pork </UL> </UL> </BODY> </HTML> |
- The previous code would produce the following HTML list:
Food
- Vegetables
- Broccoli
- Carrot
- Pea
- Meat
- Chicken
- Beef
- Pork
Modifying the Bullet
- You can modify the look of the bullets by using the TYPE attribute in the <UL> tag.
- The TYPE attribute supports the following VALUES: CIRCLE, DISC, or SQUARE
- Below is some code that demonstrates the usage of the TYPE attribute.
<HTML> <HEAD> <TITLE>Unordered List</TITLE> </HEAD> <BODY> <B>Food</B> <UL TYPE = "SQUARE"> <LI>Vegetables <UL TYPE = "DISC"> <LI>Broccoli <LI>Carrot <LI>Pea </UL> <LI>Meat <UL> <LI>Chicken <LI>Beef <LI>Pork </UL> </UL> </BODY> </HTML> |
- The previous code would appear as follows:
Food
- Vegetables
- Broccoli
- Carrot
- Pea
- Meat
- Chicken
- Beef
- Pork
Note that you cannot use the TYPE parameter in IE 4+
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com
10 Random HTML and CSS Tutorials :
10 Random Markuptutorials.com Materials: