Wow, there already? Congratulations, you are making quick progresses!
There are some things left you still have to learn about xHTML and CSS like (and this is important) how to make a design.
With this third part, we will learn new things about
both xHTML and CSS. Here is the plan of the tutorial:
- xHTML.
- CSS.
- xHTML & CSS, the combined power of those two languages.
By the way, did you notice what I made above? It is a bullet list, exactly what we are going to deal with this chapter! (Now that would be a sweet transition.
)
It is not that tough and a good warm up before what comes next since things are about to become a tad more complex.
Yes, for those who may wonder, the third part is the "hardest" one, but still, if you stay focused, you will be just fine.
This chapter is clearly build: we are going to learn how to create lists with xHTML then, how to make them look good thanks to new CSS properties. First of all, we need to know there are three sorts of lists:
- Unordered lists
- Ordered lists
- Definition lists (less common)
We will see how to make each one of these. This is easy, but stay focused because you will need this in the following chapters. Actually, lists are pretty important, they are part of your website main menu!
Unordered list
Here is what an unordered list looks like:
- Strawberries
- Raspberries
- Cherries
An unordered list displays a list of items, with no specific order (there is no first or last item). This is really simple to do. You just have to use the <ul> tag, wich you will close at the end of your list with </ul>.
First, type this basic code:
Code: HTML
And now, we will write every item of the list within these two tags: <li></li>. All these tags must be within the <ul></ul> tag. You will understand easily with this example:
Code: HTML1
2
3
4
5 | <ul>
<li>Strawberries</li>
<li>Raspberries</li>
<li>Cherries</li>
</ul>
|
<ul></ul> are used to build the list.
<li></li> are used to add an item to the list.
You can set as many items as you want in the list, it is not limited to three as in our example.
Here you go, you know how to make an unordered list!
Was it that hard?
Ordered lists
Given how unordered lists were hard to make, now, you will realise that designing a website is reaaalllyyy tough!
To make an ordered list, we are going to take it easy. We only change the <ul></ul> tag to
<ol></ol>.
Inside, nothing changes: we still use the <li></li> tags.
The way you sort things in your list is important. The first <li></li> item will actually be #1, second will be #2 etc.
Since this is really very intuitive, I will give you some time to look at this example's simplicity:
Code: HTML1
2
3
4
5 | <ol>
<li>I wake up.</li>
<li>I eat and drink.</li>
<li>I go back to bed.</li>
</ol>
|
Compared to the previous example, all we had to change was the <ol> tag.
Definition lists
On an other hand, definition lists are slightly different from above examples. It is "a little bit" harder (really, a little bit!
).
The way it works is pretty much the same. We set the beggining and ending of the list using a tag. Here we will not use <ul>, or <ol> but...
<dl> (initials for "Definition List").
Let's start with this:
Code: HTML
Good, now, the difference is we do not use the <li> tag anymore to display items in the list.
Actually, with definition lists,
there are two sorts of items:
- Words
- And their definitions.
Words are set within
<dt></dt>, and definitions within
<dd></dd>.
What you need to understand is you have to first set the word (<dt>), then its definition (<dd>). If you want to set a second definition, then you have to start over again with: a
dt and a
dd.
Look into this example:
Code: HTML1
2
3
4
5
6
7
8 | <dl>
<dt>Cat</dt>
<dd>Four legs animal which goes "Meow!"</dd>
<dt>Dog</dt>
<dd>Four legs animal which goes "Bark bark!"</dd>
<dt>Maths teacher</dt>
<dd>Alien coming from another planet to teach things nobody understands.</dd>
</dl>
|
As you can check by yourself, definitions are slightly shifted from words. This is not very nice for now, but everybody knows with a touch of CSS we can make it so words can be bold, blue, and definitions can blink on a red background. If you do not figure out how to achieve this alone, you have been too fast over this tutorial's part II!
Items from this list go by pairs. Once you know you have to first enter the word then its definition, you rule this kind of list!
We are already done with the "xHTML" part about lists!
What would you think if we would spice this up some with CSS, hmm? It should be even more tasty!
No, I am not going to teach you how to set a red background for your definitions.
You already know how it works:
Code: CSS1
2
3
4
5 | dd
{
background-color:red;
/* ... */
}
|
We have already seen this a lot of times, so we will not talk about it anymore.
Now, we will see some special CSS properties you can use on lists. Actually, there are three.
Lists indentation
The first property is really easy to use. It toggles whether our list is indented.
It is called
list-style-position and can have two values:
- inside: Marker is placed inside the text, and any wrapping text is aligned under the marker.
- outside: Marker is placed outside the text, and any wrapping text is not aligned under the marker (default).
This picture shows the difference between inside and outside:
Here is some CSS code to test indentation:
Code: CSS1
2
3
4
5
6
7
8
9 | .not_indented
{
list-style-position: inside;
}
.indented
{
list-style-position: outside;
}
|
And some classic xHTML code with lists:
Code: HTML 1
2
3
4
5
6
7
8
9
10
11
12
13 | <p>Here is an indented list (default):</p>
<ul class="indented">
<li>Bulleted<br />list</li>
<li>Line 1<br />Line 2</li>
<li>You can see<br />that the text is moved on the right</li>
</ul>
<ul class="not_indented">
<li>Bulleted<br />list</li>
<li>Line 1<br />Line 2</li>
<li>You can see<br />that the text is not moved on the right</li>
</ul>
|
If you want to see the difference, your list must be at least two lines (this is why I put a <br /> tag). Usually, indentation is not disabled for bulleted lists unless used in the website main menu, as we will see later.
Bullet style
Far more interesting, the
list-style-type property changes bullets' appearance. In fact, yoUsually, indentation is not disabled for bullet lists except when we use them to make a ur bullets do not have to be a black disc and you do not have to number them either. (You can use letters: a, b, c, d...).
The
list-style-type property can take many values. Some are dedicated to ordered lists and some to unordered ones:
- For unordered lists only (<ul>):
- disc: a black disc (default value).
- circle: a circle.
- square: a square.
- none: no bullet at all.
- For ordered lists only (<ol>), many values:
- decimal: numbers 1, 2, 3, 4, 5... (default value)
- decimal-leading-zero: numbers starting with a zero (01, 02, 03, 04, 05...). Does not work with Internet Explorer
- upper-roman: Uppercase Roman numerals (I, II, III, IV, V...)
- lower-roman: Lppercase Roman numerals (i, ii, iii, iv, v...)
- upper-alpha: alphabetical numbering with uppercase letters (A, B, C, D, E...)
- lower-alpha: alphabetical numbering with lowercase letters (a, b, c, d, e...)
- lower-greek: Greek alphabetical numbering Does not work with Internet Explorer
Actually, there are other possibilities for ordered lists, like Georgian, Hebrew, Armenian or Japanese numbering but we will not talk about those (and I guess you will not mind much!), the above mentioned list should be enough!
Now, what if we do some tests with custom bullets? Here is the xHTML we will use (ok, it is long enough, but do not freak out, it is only due to repetitive sections
).
Code: HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71 | <h2>Some unordered lists</h2>
<p>Here is a normal unordered list (= <em>disc</em>):</p>
<ul>
<li>I am a</li>
<li>bulleted</li>
<li>list</li>
</ul>
<p>With <em>circle</em>:</p>
<ul class="circle">
<li>I am a</li>
<li>bulleted</li>
<li>list</li>
</ul>
<p> With <em>square</em>:</p>
<ul class="square">
<li>I am a</li>
<li>bulleted</li>
<li>list</li>
</ul>
<p>With <em>none</em> (without bullets):</p>
<ul class="none">
<li>I am a</li>
<li>bulleted</li>
<li>list</li>
</ul>
<h2>Some ordered lists</h2>
<p>Normal ordered list (= <em>decimal</em>)</p>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
<p>With <em>decimal-leading-zero</em> (<strong>Ne fonctionne pas sous IE)</strong>):</p>
<ol class="from_zero">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
<p>With <em>lower-alpha</em>:</p>
<ol class="lowercase_letters">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
<p> With <em>upper-roman</em>:</p>
<ol class="roman_numbers">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
<p>With <em>lower-greek</em> (<strong>Does not work with IE</strong>):</p>
<ol class="greek_letters">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
|
...And here is the CSS code:
Code: CSS 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49 | /* Non-ordered bulleted lists */
.circle
{
list-style-type: circle;
}
.square
{
list-style-type: square;
}
.none
{
list-style-type: none;
}
/* Ordered bulleted lists */
.from_zero
{
list-style-type: decimal-leading-zero;
}
.lowercase_letters
{
list-style-type: lower-alpha;
}
.roman_numbers
{
list-style-type: upper-roman;
}
.greek_letters
{
list-style-type: lower-greek;
}
/* Other styles for the page to look better; it is a reminder for you ;o) */
h2
{
text-indent: 20px;
font-family: Arial, Verdana, "Times New Roman", serif;
}
em
{
background-color: yellow;
}
strong
{
color: red;
}
|
I did not use all the styles because the source code was big enough, but you can test them by yourself, can't you?
Changing the bullet image
If you don't like the usual bullets, why don't you make your own ones? You can do that with the
list-style-image property, which allows you to set an image for your bullets.
Its value must be "url" followed by the path of your picture. It works just like
background (which allows you to set a background picture in case you do not remember).
For instance, we will use a small directory picture for our bullets, you will see it looks pretty nice!
Code: CSS 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | ul /* My lists bullets will look like small directories */
{
list-style-image: url("directory.png");
}
/* Only to make it look good */
a
{
color: blue;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
|
Pretty nice, don't you think?
The bullet image can be of any type (JPEG, PNG or GIF).
However, make sure your image is not too big, because otherwise it might get cut. You should better use a 15x15 pixels size.</information>
With all of this, we have been through everything possible with bulleted lists!
Even though tag names can be weird (ul, ol, li, dl, dd, dt), they are short and just a handful! Again, practice is the key to remember everything.
Hey, it is not sleep time now!
The following chapters are very very important. If you want to design a nice, good looking website, you should be fully focused from now on.
In fact, you are about to discover many new things, especially CSS related.
How-to
Community
User Menu
Search
Guestbook
Advertising
8 Newbies Connected |
10 Requests |
0.3029s (0.2917s)
