B05 - HTML Attributes: List Attributes
- B05a: - (0:41)
- Start
- Create a new file as yourlastname_B05.html
- Include page structure tags.
- Add a title of:
- B05b: - (2:54)
- Attribute basics:
- Attributes add characteristics to a tag.
- An attribute consists of:
- The name of the attribute
- An equal sign
- A value
- Quotes around the value are optional in html5 unless
there is a space in the value.
- You must have quotes
around the entire value if there is a space in the
value. For example:
- We will use lists as an example of attributes in the following.
- A few attributes have no value.
- Some attributes can be used in many different tags, some
in only a few. For example, these attributes will work in most elements:
- B05c: - (1:53)
- The start attribute ( start= )
- The start attribute is used for starting a sequential list
with a number other than one, or its Roman numeral or alphabetical
equivalent.
- It can be used for any type of list numbering.
- If the numbering type is “A”, then:
- start=4
- ...would result in “D”
- Example of the start attribute. The following list is coded
<ol start=4>
- This is an example of restarting numbering.
- Excepteur sint occaecat sunt in culpa eu fugiat nulla pariatur.
- Qui officia deserunt in reprehenderit in voluptate.
- Ut labore et dolore magna aliqua.
- Eu fugiat nulla pariatur.
- B05d: - (2:18)
- The type attribute and its values for ordered lists.
- The type attribute is used to designate numbering styles or bullet appearance using html.
- Ordered list type values:
- Arabic numbering is the default.
- Roman numerals
- upper case: I, II, III
- lower case: i. ii. iii
- Alphabetical order
- upper case: A,
B, C
- lower case a, b, c
- B05e: - (3:29)
- The type attribute values for unordered lists.
- Bullet style options:
- You can override the defaults. In the examples below I am applying different types to the individual list items:
- style=
- Note that CSS has properties (the CSS equivalent of
attributes) that will do all of the above and additionally
allow for using images instead of bullets.
- B05f: - (6:13)
- Assignment:
- Part I:
- Create an h2 header:
Famous Cities of the World
- Create four h3 headers:
- Asia
- Africa
- Europe
- North America
- Put an ordered list after each of the four h3 headers with the names of three well known cities in that continent.
- Make each city's name italicized using the <em> tag.
- Continue the numerical sequence of the preceding section.
- In your assignment, your list of African cities should start with the number 4.
- Part II:
- At the end of the lists above, add an h2 header:
Bulleted Lists of Famous Cities of the World
- Copy the lists you just made of the four continents’ cities.
- Remove the start= attributes.
- Make the lists unordered (bullets)
- Make each city's name bold using the <strong> tag.
- In the first and third groups of three cities, make the bullet a hollow circle.
- In the second and fourth groups of three cities, make the bullet a black square.
- Save your file.