Download - Creating Lists
![Page 1: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/1.jpg)
Creating Lists
![Page 2: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/2.jpg)
Creating Lists
• Lists are a part of everyday life. To-do lists determine what to get done. Navigational routes provide turn-by-turn lists of directions. Recipes provide lists of ingredients and lists of instructions. With a list for nearly everything, it’s easy to understand why they are also popular online.
• When we want to use a list on a website, HTML provides three different types to choose from: unordered, ordered, and description lists. Choosing which type of list to use—or whether to use a list at all—comes down to the content and the most semantically appropriate option for displaying that content
![Page 3: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/3.jpg)
Unordered Lists
• An unordered list is simply a list of related items whose order does not matter. Creating an unordered list in HTML is accomplished using the unordered list block-level element, <ul>. Each item within an unordered list is individually marked up using the list item element, <li>.
![Page 4: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/4.jpg)
example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
![Page 5: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/5.jpg)
Ordered HTML Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers.
<h2>Unordered List with Default Bullets</h2><ol> <li>Coffee</li> <li>Milk</li></ol>
![Page 6: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/6.jpg)
Ordered HTML Lists
The Type AttributeA type attribute can be added to an ordered list, to define the type of the marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
![Page 7: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/7.jpg)
Ordered HTML Lists (Numbers)
<h2>Unordered List with Default Bullets</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
![Page 8: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/8.jpg)
Upper Case:
<h2>Unordered List with Default Bullets</h2><ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>
![Page 9: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/9.jpg)
Lower Case:
<h2>Unordered List with Default Bullets</h2>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
![Page 10: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/10.jpg)
Roman Upper Case:
<h2>Unordered List with Default Bullets</h2>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
![Page 11: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/11.jpg)
Roman Lower Case:
• <h2>Unordered List with Default Bullets</h2><ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
![Page 12: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/12.jpg)
HTML Description Lists
• A description list, is a list of terms, with a description of each term.
• The <dl> tag defines a description list.
• The <dt> tag defines the term (name), and the <dd> tag defines the data (description).
![Page 13: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/13.jpg)
Description Lists
Description List:<h2>Unordered List with Default Bullets</h2><dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
![Page 14: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/14.jpg)
Nested HTML ListsList can be nested (lists inside lists).<ol>
<li>Walk the dog</li>
<li>Fold laundry</li>
<li>
Go to the grocery and buy:
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ul>
</li>
<li>Mow the lawn</li>
<li>Make dinner</li>
</ol>
![Page 15: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/15.jpg)
Horizontal Lists
HTML lists can be styled in many different ways with CSS.
One popular way, is to style a list to display horizontally:
![Page 16: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/16.jpg)
• <h2>Horizontal List</h2>
• <ul id="menu">• <li>Apples</li>• <li>Bananas</li>• <li>Lemons</li>• <li>Oranges</li>• </ul>
![Page 17: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/17.jpg)
Chapter Summary1. Use the HTML <ul> element to define an unordered list2. Use the HTML style attribute to define the bullet style3. Use the HTML <ol> element to define an ordered list4. Use the HTML type attribute to define the numbering type5. Use the HTML <li> element to define a list item6. Use the HTML <dl> element to define a description list7. Use the HTML <dt> element to define the description term8. Use the HTML <dd> element to define the description data9. Lists can be nested inside lists10. List items can contain other HTML elements11. Use the CSS property display:inline to display a list horizontally
![Page 18: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/18.jpg)
html - font
• The <font> tag provides no real functionality by itself, but with the help of a few attributes, this tag is used to change the style, size, and color of HTML text elements. The size, color, and face attributes can be used all at once or individually, providing users with the ability to create dynamic font styles for any HTML element.
![Page 19: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/19.jpg)
html - font size
Set the size of your font with size. The range of accepted values goes from 1 -- the smallest, to 7 -- the largest. The default size of a font is 3.
• HTML Font Size Code:<p>
<font size="5">Here is a size 5 font</font>
</p>
![Page 20: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/20.jpg)
html - font color
HTML Font Color Code:<font color="#990000">This text is hex color #990000</font>
<br />
<font color="red">This text is red</font>
![Page 21: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/21.jpg)
html - font face
Choose a different font face by specifying any font you have installed. Font face is synonymous with font type. As a web designer, be aware that if you specify a custom font type and users viewing the page don't have the exact same font installed, they will not be able to see it. Instead the chosen font will default to Times New Roman. To reduce the risk of running into this situation, you may provide a list of several fonts with the face attribute, such as outlined below.
HTML Font Face Code:<p>
<font face="Georgia, Arial, Garamond">This paragraph
has had its font...</font>
</p>
![Page 22: Creating Lists](https://reader035.vdocuments.site/reader035/viewer/2022062406/55b87b6ebb61eb02248b46f7/html5/thumbnails/22.jpg)
beautiful first letter style
Customize your fonts to achieve any desired look.
HTML Code:<p><font size="7" face="Georgia, Arial" color="maroon">W</font>elcome To South Africa The Rainbow Nation.</p>