WGU D276 Web Dev Chp 7 Study Guide with
Complete Solutions
How to code lists
• ul
• ol o Creates unordered list
• li o Creates ordered list
o Creates a list item for the list
How to create a nested list
HTML for ordered lists nested within an unordered list
<h1> How to use the WiZip Self Extractor program</h1>
<ul>
<li>Before you start the WinZip Self Extractor
<ol>
<li>Create a text file that contains the message you want to be displayed when
the executable starts.</li>
How to code description lists
Elements that create description lists
Element Description
dl Creates a description list that contains pairs of dt
and dd elements
dt Creates a term in a description list
dd Creates a description in a description list
How to format lists
How to change the bullets for an unordered list
• By default, a list displays a solid round bullet
o But the value of “circle” can be specified to display a circle bullet
o Can also specify the value of “square” to display a square bullet or “none” if you
don’t want to display any bullets
Properties for formatting unordered lists
, Property Description
List-style-type The type of bullet that’s used for the items in the
list. The default is disc
List-style-image The URL for an image that’s used as the bullet
Values for the list-style-type property of an unordered list
Value Description
disc Solid circle
circle Hollow circle
square solid square
none No bullet
How to change the numbering system for an ordered list
Value Example
decimal 1, 2, 3, 4, 5 …
Decimal-leading-zero 01, 02, 03, 04, 05 …
Lower-alpha A, b, c, d, e …
Upper-alpha A, B, C, D, E....
Lower-roman I, ii, iii, iv, v....
Upper-roman I, II, III, IV, V....
How to code links
How to link another page
•First code the href attribute so it identifies the page you want the link to display
o Then, you code the content that you want to be displayed for the link
▪ Content can be text, image, or both
• Tab order
o The sequence in which the links and controls are coded in the HTML
▪ Use the tabindex attribute of a link to change the order
• To set an access key for a link, you can code the accesskey attribute
o Then the user presses that key in combo with one or more other keys to activate it
• If the text for a link has to be short, code the title attribute to clarify where the link is going.
• You should also code the title attribute if a link includes an image with no text.
Four attributes of the <a> element
Attribute Description
href The URL that identifies the page that the link will
go to
title The description that is displayed as a tooltip
tabindex The tab order for the link starting with 0. To take
a link out if the tab order, code a negative value
Complete Solutions
How to code lists
• ul
• ol o Creates unordered list
• li o Creates ordered list
o Creates a list item for the list
How to create a nested list
HTML for ordered lists nested within an unordered list
<h1> How to use the WiZip Self Extractor program</h1>
<ul>
<li>Before you start the WinZip Self Extractor
<ol>
<li>Create a text file that contains the message you want to be displayed when
the executable starts.</li>
How to code description lists
Elements that create description lists
Element Description
dl Creates a description list that contains pairs of dt
and dd elements
dt Creates a term in a description list
dd Creates a description in a description list
How to format lists
How to change the bullets for an unordered list
• By default, a list displays a solid round bullet
o But the value of “circle” can be specified to display a circle bullet
o Can also specify the value of “square” to display a square bullet or “none” if you
don’t want to display any bullets
Properties for formatting unordered lists
, Property Description
List-style-type The type of bullet that’s used for the items in the
list. The default is disc
List-style-image The URL for an image that’s used as the bullet
Values for the list-style-type property of an unordered list
Value Description
disc Solid circle
circle Hollow circle
square solid square
none No bullet
How to change the numbering system for an ordered list
Value Example
decimal 1, 2, 3, 4, 5 …
Decimal-leading-zero 01, 02, 03, 04, 05 …
Lower-alpha A, b, c, d, e …
Upper-alpha A, B, C, D, E....
Lower-roman I, ii, iii, iv, v....
Upper-roman I, II, III, IV, V....
How to code links
How to link another page
•First code the href attribute so it identifies the page you want the link to display
o Then, you code the content that you want to be displayed for the link
▪ Content can be text, image, or both
• Tab order
o The sequence in which the links and controls are coded in the HTML
▪ Use the tabindex attribute of a link to change the order
• To set an access key for a link, you can code the accesskey attribute
o Then the user presses that key in combo with one or more other keys to activate it
• If the text for a link has to be short, code the title attribute to clarify where the link is going.
• You should also code the title attribute if a link includes an image with no text.
Four attributes of the <a> element
Attribute Description
href The URL that identifies the page that the link will
go to
title The description that is displayed as a tooltip
tabindex The tab order for the link starting with 0. To take
a link out if the tab order, code a negative value
