Page 1 of 1

Guide to the Web and Design part VII Lists Rate Topic: -----

#1 capty99  Icon User is offline

  • i am colt mccoy
  • member icon

Reputation: 98
  • View blog
  • Posts: 10,081
  • Joined: 26-April 01

Posted 03 October 2006 - 10:09 PM

HTML Basics – Lists

Lists are just a way to display information and html has some built in mechanisms to work with them. You have unordered and ordered lists. The first just using bullets and the latter using numbers.

The tags are <ul> for an unordered list and <ol> for an ordered list. With the container <li> to show information that will go after each bullet or number. Example :
	<ol>
		<li> information </li>
		<li> information </li>
			<ul>
				<li>more info </li>
				<li>more info </li>
			</ul>
		<li> information </li>
	</ol>


Notice I nested some lists in there just to see how you could possibly use them.


Now , if you have read through all the Guides to the Web that I have posted, go ahead and combine all of this information together and you can build yourself a couple pages that link between each other and display both graphics and text. Think of an idea , just something simple that would require a few pages to build a website for. Make up a company and have an about page, news page etc.... and just type out some html. The best way to learn this stuff is by playing with it and getting everything down pat.

This post has been edited by capty99: 04 October 2006 - 07:12 AM


Is This A Good Question/Topic? 1
  • +

Replies To: Guide to the Web and Design part VII

#2 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Posted 04 March 2007 - 05:42 PM

Actually, that list is invalid. The inner lists should be inside a list item (li) element:

<ol>
  <li>information</li>
  <li>information
	<ul>
	  <li>more info</li>
	  <li>more info</li>
	</ul>
  </li>
  <li>information</li>
</ol>


Just to add to the information:
  • Ordered lists (ol) list content that is inherently ordered (changing the order would change or harm the meaning). Such cases include basic a table of contents (yes, I know not using a table for a table of contents may sound strange) or a simple list of instructions, like how to make a peanut butter and jelly sandwich.
  • Unordered lists (ul), like this one, list content where the order doesn’t matter such as a list of your favorite things or all of your cats’ names.
  • Definition lists (dl) list a term and one or more associated definitions. They’re good for defining terms (like a dictionary) or associating groups under an umbrella term. Here’s an example:
    • <dl>
        <dt>“bright” synonyms</dt>
        <dd>shining</dd>
        <dd>sparkling</dd>
        <dd>gleaming</dd>
        <dt>“bright” antonyms</dt>
        <dd>cloudy</dd>
        <dd>murky</dd>
        <dd>dusty</dd>
      </dl>
      
      

Was This Post Helpful? 0
  • +
  • -

#3 hiphop_13  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 37
  • Joined: 04-June 07

Posted 01 August 2007 - 11:49 AM

Hello, its nice from you to share this information, i was starting to forget about html bcause i ddnt use since i took it in university as a course
well im waiting for the next tutorial to see CSS and i will wait your javascript posts..
Thanks for these tutorials they really help. :)
Was This Post Helpful? 0
  • +
  • -

#4 FiendKing04  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 10-August 08

Posted 24 December 2009 - 05:08 AM

Thanks very much... it was/is a very interesting "refresher". I'll be sure to link to it when referring people to a simple HTML guide.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1