In previous blog posts, I have introduced some of the basic HTML tags that format a web page: paragraphs, headers, the tags that make up the page <head>, links, and images: HTML Basics 1*** HTML Basics 2: The Head Tag *** HTML Basics 3: Links *** HTML Basics 4: Images
The next most important tag is the List tag - which comes in three different flavours: Unordered lists, Ordered lists, and Definition lists.
An unordered list is a list of items in no particular order. Unordered lists can have bullet points or various other symbols that mark each new list item, or no particular list symbol at all. The default formatting for lists is to have them indented from the main text, and list items separated by a line break - this is called a block list. But with a Style Sheet (CSS), a list can be formatted whichever way you want! Lists offer a lot of flexibility in that respect. This is because for each type of list, there are at least two different tags. All the more opportunity to define a variety of styles.
One of the main uses for unordered lists are navigation menu. In this blog, all three main navigation menus are unordered lists - the navigation at the top which says "Home - Shop - Look - Listen - Read - Interact - Join", the one on the right side linking to the various subdomains and main sections of the site, and the subnavigation menu on the left, which allows you to navigate to the other parts of the "webdesign.asni.net" subdomain. (Remind me that I should write a blog about domains and subdomains sometime soon!) As you can see, they all look completely different, even though they are built using exactly the same tags.
The tags for an unordered list are <ul></ul> which encloses the entire list and marks it as an unordered list, and <li> </li>, which encloses each separate list item. So the code for the navigation bar at the top looks more or less like this:
- <ul>
- <li>Home</li>
- <li>Shop</li>
- <li>Look</li>
- <li>Listen</li>
- <li>Read</li>
- <li>Interact</li>
- <li>Join</li>
- </ul>
As you can see, even though the code is written as a block list, with line breaks between each list item, the navigation menu is displayed as an inline list. This has been defined in the style sheet - if you view the page without the style sheet (if you're browsing with Firefox, go to "View" "Page Style", then choose "No Style" - or equivalent in other browsers) you can see thebare bones of the page navigation, without all the fancy formatting.
Ordered lists are lists where items are listed in a particular order - they are typically preceded by numbers, or letters of the alphabet. A list of the days of the week might look like this:
- Monday
- Tuesday
- Wednesday
- Thursday
- Friday
- Saturday
- Sunday
(unless you prefer to count Sunday as 1)
The tags for an ordered list are very similar to the unordered list - the main list tag is <ol> </ol> (instead of <ul> </ul>), and the individual list items are enclosed by the same <li> </li> tags as the unordered list - this makes it easy to convert an ordered list into an unordered one, or vice versa, if you change your mind - it is only the main list tag that needs to be changed, not every individual list item. The list tag automatically inserts a bullet point or the correct number for the item, and if you need to insert a new item in the middle of a numbered list, the numbers of the following items will automatically increase by one. Handy, eh?
The third kind of list, the Definition list, is a little bit different in that it consists of three parts. A definition list is a list such as can be found in a dictionary, consisting of a word or expression, and a definition of the meaning of that word or expression. For instance:
- Monday:
- The first day of the week
- Tuesday:
- the second day of the week
- Wednesday:
- the third day of the week
etc, would be a definition list.
By default, the word or expression to be explained (the "definition topic") is formatted differently from the explanaition, for instance it could be bold, or a different colour. The tags for the definition list are <dl></dl> as the main list tag, <dt></dt> for the definition topic, and <dd></dd> for the definition. In code, the list above would read as follows:
- <dl>
- <dt>Monday:</dt>
- <dd>The first day of the week</dd>
- <dt>Tuesday:</dt>
- <dd>the second day of the week</dd>
- <dt>Wednesday</dt>
- <dd>the third day of the week</dd>
- </dl>
Asni: Multimedia Art & Design:: http://webdesign.asni.net :: http://www.asni.net
Posts
No comments:
Post a Comment