Web Site Design and Development Lecture 10 CS 0134 Fall 2018 Tues - - PowerPoint PPT Presentation

Web Site Design and Development Lecture 10

CS 0134 Fall 2018 Tues and Thurs 1:00 – 2:15PM

2

Lists

• You can create unordered lists with ul and
• rdered lists with ol.

– An unordered list uses bullet points for each

item by default.

– An ordered list uses numbers for each item

by default.

• You can add items to ul or ol by using the li
• element. The li element can contain text or
• ther html elements.

3

The start attribute

• The ol element has an attribute named start
• start can be used to start the ol at a position
• ther than 1. For example, <ol start=”3”> will

create an ordered list that starts with 3 rather than 1.

• If the ordered list is using letters rather than

numbers, start=”3” will start the list with C rather than A.

4

Nested lists

• You can place a list inside an li to create a nested list.

Code Browser

<ul> <li>List item 1</li> <li>List item 2 <ul> <li>List item 2 detail 1</li> <li>List item 2 detail 2</li> </ul> </li> </ul>

5

Description lists

• Another type of list that can be used is a description
• list. A description list is made up of three elements

– dl: the dl element is used to create a description list – dt: the dt element is used to create a term to be described. The dt

element can only contain text and inline elements

– dd: the dd element is used to create a description for the

previously listed term. The dd element can contain block elements in addition to text and inline elements

• You may see the word defjnition used instead of
• description. This is because in HTML4, dl was called a

defjnition list.

6

Description lists continued

• You create a dl by grouping dt and dd

elements together as adjacent siblings.

• You can have multiple dt for one dd and

you can have multiple dd for one dt.

7

Description list example

Code <dl> <dt>p</dt> <dd>The paragraph element</dd> <dt>a</dt> <dd>The anchor element</dd> <dt>dl</dt> <dd>1. In HTML4, dl means defjnition list</dd> <dd>2. In HTML5, dl means description list</dd> </dl>

Browser

8

Questions?

9

Formatting lists

• You can format lists with the list-style-type

and list-style-image as well as with margin and padding

10

list-style-type

• The list-style-type property defjnes the style used by the

list

• For an unordered list, list-style-type will accept the

keywords disc, circle, square and none. Disc is the default

• For an ordered list, list-style-type will accept the

keywords decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman and upper-roman. Decimal is the default

• You can set the list-style-type on either the ul, ol or li

elements.

11

list-style-type examples

• list-style-type: circle;
• list-style-type: none;
• list-style-type: upper-roman;
• list-style-type: decimal-leading-zero;

12

list-style-image

• The list-style-image property specifjes a

custom image to be used as a bullet point

• list-style-image will accept a url() value
• Example

– list-style-image: url(“smile-emoji.png”); – list-style-image: url(“frown-emoji.png”);

13

Aligning list items

• You can adjust how indented a list item is by setting

the padding-left property on ul or ol.

• You can adjust the space between the bullet (or

number) and the text of a list item by setting the padding-left property on the li element.

• You can adjust the vertical spacing for list items by

setting the padding-bottom property on the li element.

• You can adjust how indented a description is in a

description list by setting the margin-left property on the dd element.

14

Alignment examples

• ul {

padding-left: 2em; }

• li {

padding-left: 0.5em; padding-bottom: 0.5em; }

• dd {

margin-left: 0; }

15

Questions?