Unordered lists are similar to numbered lists except that they use bullets instead of numbers or letters before each list item. Bulleted lists are generally used when providing a list of nonsequential items. For example, consider the following list of ice cream flavors:
Unordered lists use the unordered list tag (<ul>) to delimit the entire list and the list item tag (<li>) to delimit each individual list item.
In the preceding example, the list has three elements each preceded with a small,round, filled bullet. This is the default for unordered lists in HTML, as shown in thefollowing code, whose output is shown:
An example of an unordered list.
Unordered lists also support the list-style-type property, but with slightly different values:
The default bullet type is disc, though the client browser can define the default differently. The different bullet types are shown in;
An example of the different bullet types for unordered lists.
As with ordered lists, you can define the list-style-position property, which in the case of unordered lists controls where the bullet appears—outside or inside the left margin of the ite For example, to move the bullet inside the item margins you would use a style with the <ul> tag similar to the following:
Unordered lists support one other type of bullet for each item, an image. The image for use in unordered lists must fit the following criteria:
To specify an image for the list, you use the list-style-image property. This property has the following syntax:
This property can be used to add more dimension to standard bullets (for example, creating spheres to use instead of circles) or to use specialty bullets that match your content. For example, consider the two graphics shown in Figure, created in Jasc’s Paint Shop Pro.
Two graphics that can be used as bullets.
Of course, the graphics must be scaled down to “bullet” size and saved in a Web-friendly format. In this case, the graphics are reduced to 10-20 pixels square and saved on the root of the Web server as sphere.jpg and cone.jpg. The following code uses the images, and the output.
Using graphics in unordered lists.
HTML Related Interview Questions
|XML Interview Questions||HTML 4 Interview Questions|
|HTML Interview Questions||HTML 5 Interview Questions|
|HTML DOM Interview Questions||Java Interview Questions|
|CSS Interview Questions||Java Abstraction Interview Questions|
|Dynamic HTML Interview Questions||XHTML Interview Questions|
Introducing The Web And Html
What Goes Into A Web Page?
Starting Your Web Page
Lines, Line Breaks, And Paragraphs
Page Layout With Tables
Introducing Cascading Style Sheets
Creating Style Rules
Padding, Margins, And Borders
Colors And Backgrounds
Tables Table Styles
Defining Pages For Printing
Dynamic Html With Css
Introduction To Server-side Scripting
Introduction To Database-driven Web Publishing
Creating A Weblog
Introduction To Xml
Xml Processing And Implementations
Testing And Validating Your Documents
Choosing A Service Provider
Uploading Your Site With Ftp
Publicizing Your Site And Building Your Audience
Maintaining Your Site
The Web Development Process
Developing And Structuring Content
Designing For Usability And Accessibility
Designing For An International Audience
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.