Page 1 of 1

Lists - A Beginner's Guide Rate Topic: -----

#1 RandomlyKnighted  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 117
  • View blog
  • Posts: 1,370
  • Joined: 14-January 10

Posted 10 September 2010 - 01:25 PM

We use lists everyday in everything from reading recipes in a cookbook to typing them into the computer when we're coding. Today, I'm going to show you tell you about the 3 basic lists in HTML.

In HTML, you have 3 basic types of lists. You have an ordered list, an unordered list, and a definition list. An ordered list is basically a numbered list. Do you remember when you were little and your teacher told you to number your paper from one to ten? Well everytime you did that you were making an ordered list. In HTML, when we make an ordered list we open it with the <ol> tag and close it with the </ol> tag. The numbers and line breaks will automatically show up where you put the <li> tag.

Here's an example:

<ol>
<li>We love Dream-In-Code!</li>
<li>At Dream-In-Code, we have tutorials for most modern programming languages</li>
<li>Go Dream-In-Code!</li>
<ol>



The next type of list is an unordered list. We all remember those high school days where we had to give that 5 page research paper and we had to give reasons for why we chose that particular side of the situation. Usually when we typed those reasons we did it in a bulleted list. Well guess what, you were making an unordered list! An unordered list begins with the <ul> tag and closes with the </ul> tag. Each item in the list still uses the <li> and </li> tags.

Here's an example:

<ul>
<li>We love Dream-In-Code!</li>
<li>At Dream-In-Code, we have tutorials for most modern programming languages</li>
<li>Go Dream-In-Code!</li>
</ul>



One of the great things about the unordered list is you can even make it so that there are no bullets. When coding, there will be some situations where you might need this so why not learn it now. Look at the code below and you'll see where and how to do it.

<ul style="list-style: none; ">
<li>We love Dream-In-Code!</li>
<li>At Dream-In-Code, we have tutorials for most modern programming languages</li>
<li>Go Dream-In-Code!</li>
</ul>




That's all you have to do to make an unordered list without bullets.

Finally, we have the definition list. The example I want to give for the definition list is simply a dictionary. Grab a dictionary and usually they will be set up using this same kind of list. For a definition list, you open it with the <dl> tag and end it with the </dl> tag. Then in front of the word to be defined you will use the <dt> tag and then in front of the definition you will use the <dd> tag.

Here's my example for the definition list:

<dl>
<dt>Simple</dt>
<dd>Easy to understand</dd>
<dd>plain</dd>
<dd>not complicated</dd>
</dl>



I hope that my tutorial has helped someone understand lists a little bit better.

Is This A Good Question/Topic? 4
  • +

Replies To: Lists - A Beginner's Guide

#2 Felix_Violo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 08-September 10

Posted 12 September 2010 - 07:39 AM

Very helpful tutorial.

One question that's been on my mind about bullets though, can you insert your own image for the bullets?
-I know, kind of silly question, but say you wanted to keep your web theme consistent, this would be good
to know.

Thank you,
-FV
Was This Post Helpful? 0
  • +
  • -

#3 Chemlight  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 6
  • Joined: 28-September 07

Posted 13 September 2010 - 09:27 AM

View PostFelix_Violo, on 12 September 2010 - 06:39 AM, said:

Very helpful tutorial.

One question that's been on my mind about bullets though, can you insert your own image for the bullets?
-I know, kind of silly question, but say you wanted to keep your web theme consistent, this would be good
to know.

Thank you,
-FV


Yes. I don't know how it works with straight HTML, but using CSS you could do this:

ul
{
list-style-image: url('example.jpg');
}


Was This Post Helpful? 1
  • +
  • -

#4 RandomlyKnighted  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 117
  • View blog
  • Posts: 1,370
  • Joined: 14-January 10

Posted 13 September 2010 - 07:21 PM

To use your own image instead of a bullet in a list you would have to use a definition list. The reason you use a definition list is because it doesn't use bullets so you will have to insert the image before the actual list item.

Here's an example:

<dl> 
<dd><img src="logo.gif" width="23" height="17">List item text</dd>
<dd><img src="logo2.gif" width="23" height="17">List item text</dd>
</dl> 



I hope that helps!
Was This Post Helpful? 1
  • +
  • -

#5 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Posted 14 September 2010 - 12:56 AM

You can add an image to any list.

You can apply it as the list style or as a background image on the li.

Personally I normally do it as a background image and give the li some padding to move the text away from the image. You do not have to use a definition list. You should always use the type of list most relevant to the task.

This post has been edited by PhunkRabbit: 14 September 2010 - 12:57 AM

Was This Post Helpful? 1
  • +
  • -

#6 RandomlyKnighted  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 117
  • View blog
  • Posts: 1,370
  • Joined: 14-January 10

Posted 14 September 2010 - 01:56 PM

View PostPhunkRabbit, on 14 September 2010 - 12:56 AM, said:

You can add an image to any list.

You can apply it as the list style or as a background image on the li.

Personally I normally do it as a background image and give the li some padding to move the text away from the image. You do not have to use a definition list. You should always use the type of list most relevant to the task.


I agree, you do not have to use a definition list and you should use the type of list most relevant to the task. I was just more familiar with the method that I gave in the example above.
Was This Post Helpful? 2
  • +
  • -

#7 Joe Klemmer  Icon User is offline

  • New D.I.C Head

Reputation: 7
  • View blog
  • Posts: 15
  • Joined: 02-April 10

Posted 24 September 2010 - 10:28 AM

View PostRandomlyKnighted, on 10 September 2010 - 02:25 PM, said:

<ul style="list-style: none; ">
<li>We love Dream-In-Code!</li>
<li>At Dream-In-Code, we have tutorials for most modern programming languages</li>
<li>Go Dream-In-Code!</li>
</ul>



I've been wanting to do this for a while but never seemed to get around to looking it up. Thank you.
Was This Post Helpful? 0
  • +
  • -

#8 RandomlyKnighted  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 117
  • View blog
  • Posts: 1,370
  • Joined: 14-January 10

Posted 24 September 2010 - 07:38 PM

View PostJoe Klemmer, on 24 September 2010 - 10:28 AM, said:

I've been wanting to do this for a while but never seemed to get around to looking it up. Thank you.


You're welcome. Glad I could help!
Was This Post Helpful? 0
  • +
  • -

#9 RandomlyKnighted  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 117
  • View blog
  • Posts: 1,370
  • Joined: 14-January 10

Posted 30 September 2010 - 09:00 AM

You're looking for a beginner's guide to HTML. This was designed to be an easy to understand guide for people who want to make a list like a bulleted list that you might use in an outline of an essay or something.

I'm sorry that this was not what you needed. I'm sure there are other tutorials on DIC that are exactly what you are looking for.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1