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

Lists ● You can create unordered lists with ul and ordered 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 other html elements. 2

The start attribute ● The ol element has an attribute named start ● start can be used to start the ol at a position other 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. 3

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> 4

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. 5

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. 6

Description list example Code Browser <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> 7

Questions? 8

Formatting lists ● You can format lists with the list-style-type and list-style-image as well as with margin and padding 9

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. 10

list-style-type examples ● list-style-type: circle; ● list-style-type: none; ● list-style-type: upper-roman; ● list-style-type: decimal-leading-zero; 11

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”); 12

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. 13

Alignment examples ● ul { padding-left: 2em; } ● li { padding-left: 0.5em; padding-bottom: 0.5em; } ● dd { margin-left: 0; } 14

Questions? 15