Upload File

introduction to html lists why use lists? lists are one way to organize information for easy access....

  • Home
  • Documents
  • Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize
25
Introduction to HTML Lists

Upload: arlene-greer

Post on 22-Dec-2015

225 views

Category:

Documents


1 download

Report

TRANSCRIPT

Page 1: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

Introduction to HTML

Lists

Page 2: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

Why Use Lists?

Lists are one way to organize information for easy access.

People are familiar with using lists to organize information in their day-to-day lives.

Page 3: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

Type of Lists

Plain-Text Lists Ordered Lists Unordered Lists Lists of Lists (Nesting) Definition Lists Menu List (Considered Obsolete)

Directory Lists (Considered Obsolete)

Page 4: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

Plain-Text Lists

The <BR> tag can be used to “force” lists.

<HTML><HEAD><TITLE>Lists 1 </TITLE></HEAD><BODY>The following shows a forced way to build a Christmas list: <BR>1. Partridge in a pear tree<BR>2. French Hens<BR>3. Calling Birds <BR></BODY></HTML>

Page 5: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

Ordered Lists - <OL>

Two HTML tags are involved with the ordered list:

Order-list container <OL>. . .</OL> List-item container <LI> (Browser will

automatically close it when it finds another <LI>.

By default the lists will use Arabic numerals starting with 1.

Page 6: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

Ordered List

Example:<HTML><HEAD><TITLE>Lists 2 </TITLE></HEAD><BODY>The following shows a efficient way to build a Christmas list: <OL><LI>Partridge in a pear tree<LI>French Hens<LI>Calling Birds</OL></BODY></HTML>

Page 7: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

Ordered List - Attributes

<OL START=n> - Used to have a list start at some number other than one.

<HTML><HEAD><TITLE>Lists 3 </TITLE></HEAD><BODY>The following shows a efficient way to build a Christmas list: <OL><LI>Partridge in a pear tree<LI>French Hens<LI>Calling Birds</OL>I forgot the next three items.<OL START=7><LI>Rings</OL></BODY></HTML>

Page 8: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

TYPE Attribute

<OL TYPE=x> Changes the style of the numbers or letters of the list elements.

Type Generated Style Examples

A Uppercase letters A, B, C, D

a Lowercase letters a, b, c, d,

I Uppercase Roman numerals I. II. III. IV.

i Lowercase Roman numerals i. ii. Iii. iv.

1 Arabic numerals (default) 1, 2, 3, 4

Page 9: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

<OL> TYPE Attribute

Example<HTML><HEAD><TITLE>Lists 4 </TITLE></HEAD><BODY>The following shows a efficient way to build a Christmas list: <OL TYPE=I><LI>Partridge in a pear tree<LI>French Hens<LI>Calling Birds</OL>I forgot the next three items.<OL TYPE=i START=7><LI>Rings</OL></BODY></HTML>

Page 10: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

List-Item Tag - <LI>

Can contain almost anything if it defines an element of an ordered or unordered list.

Universal container - used for all of the different types of lists except definition lists.

Page 11: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

List-Item Tag (Continued)

What it generates depends on the type of list. Ordered list - list element is preceded by a

number or letter.

Unordered list - list element is preceded by one of the different bullet types.

Page 12: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

List-Item - TYPE Attribute

Much like the TYPE attribute of the <OL> container.

TYPE attribute used with . . . <OL> - specifies style of the number for

the whole list. <LI> specifies style for a single list

item.

Page 13: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

<LI> - TYPE Attribute

Example<HTML><HEAD><TITLE>List 5</TITLE></HEAD><BODY>The following list shows each type of list item, and describes what it is.<OL><LI TYPE=A>This element is of type A<LI TYPE=a>This element is of type a<LI TYPE=I>This element is of type I<LI TYPE=i>And element is of type i</OL></BODY></HTML>

Page 14: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

List-Item - VALUE Attribute

Example: VALUE=1 Specifies a starting value (also

style) that will serve as the new base number for the rest of the item in the list.

Used only within a list only. (Use START at the start of a list).

Page 15: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

Unordered List - <UL>

Also called a bulleted list.

Similar to the ordered list - except bullets are used rather than numbers.

Possible to change the shape of the bullets by using the TYPE option. (Netscape only)

COMPACT compresses line spacing between the list items. (Most browsers ignore)

Page 16: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

Unordered List - <UL>

Example<HTML><HEAD><TITLE>Unordered Lists</TITLE></HEAD><BODY>The following books usually appear on the bookshelf of Web Weavers:<UL><LI>How to Explain Obtuse Ideas to Anyone<LI>Excellent Paper Airplanes Vol.4<LI>Excellent HTML</UL>In addition, the heard core will also have a book about knots available.</BODY></HTML>

Page 17: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

Nesting (List of Lists)

Builds structures that convey complex relationships.

Netscape will indent the list within a list to increase readability.

Three types of nesting: Combined Ordered and Unordered Lists Nested Unordered Lists Nested Ordered Lists

Page 18: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

Nesting (Combined Lists)

<HTML><HEAD><TITLE>Nesting</TITLE></HEAD><BODY>When packing a briefcase, be sure to:<OL><LI>Pack the Lap Top. <UL> <LI>Get the power cord. <LI>Find the box of disks. </UL><LI>Check the Day Timer. <UL> <LI>Check for the right month. <LI>Check for the right year. </UL></OL></BODY></HTML>

Example

Page 19: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

Nesting (Unordered Lists)

<HTML><HEAD><TITLE>Nesting Unordered</TITLE></HEAD><BODY>When packing a briefcase, be sure to:<UL><LI>Pack the Lap Top. <UL> <LI>Get the power cord. <LI>Find the box of disks. <UL> <LI>Get homework disk. <LI>Get sample disk. </UL> <LI>Check the PCMCIA cards </UL><LI>Check the Day Timer. <UL> <LI>Check for the right month. <LI>Check for the right year. </UL></UL></BODY></HTML>

Page 20: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

Nesting (Ordered Lists)

<HTML><HEAD><TITLE>Nesting Ordered</TITLE></HEAD><BODY>When packing a briefcase, be sure to:<OL><LI>Pack the Lap Top. <OL> <LI>Get the power cord. <LI>Find the box of disks. <OL> <LI>Get homework disk. <LI>Get sample disk. </OL> <LI>Check the PCMCIA cards </OL><LI>Check the Day Timer. <OL> <LI>Check for the right month. <LI>Check for the right year. </OL></OL></BODY></HTML>

Page 21: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

Nesting (Ordered Lists)

<HTML><HEAD><TITLE>Nesting Ordered 2</TITLE></HEAD><BODY>When packing a briefcase, be sure to:<OL TYPE="I"><LI>Pack the Lap Top. <OL TYPE="A"> <LI>Get the power cord. <LI>Find the box of disks. <OL TYPE="1"> <LI>Get homework disk. <LI>Get sample disk. </OL> <LI>Check the PCMCIA cards </OL><LI>Check the Day Timer. <OL TYPE="A"> <LI>Check for the right month. <LI>Check for the right year. </OL></OL></BODY></HTML>

Page 22: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

Readability Long files of HTML code are hard to

read. Ways to make the file easier to read:

A couple of blank line around structural parts (lists, etc.)

A tab or two in front of subordinate items to show relationships.

Place logical part of HTML code on separate lines.

Page 23: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

Readability<HTML><HEAD><TITLE>Nesting Ordered 2</TITLE></HEAD><BODY>When packing a briefcase, be sure to:<OL TYPE="I"><LI>Pack the Lap Top. <OL TYPE="A"> <LI>Get the power cord. <LI>Find the box of disks. <OL TYPE="1"> <LI>Get homework disk. <LI>Get sample disk. </OL> <LI>Check the PCMCIA cards </OL><LI>Check the Day Timer. <OL TYPE="A"> <LI>Check for the right month. <LI>Check for the right year. </OL></OL></BODY></HTML>

<HTML><HEAD><TITLE>Nesting Ordered 2</TITLE></HEAD><BODY>When packing a briefcase, be sure to:<OL TYPE="I"><LI>Pack the Lap Top. <OL TYPE="A"> <LI>Get the power cord.<LI>Find the box of disks. <OL TYPE="1"> <LI>Get homework disk. <LI>Get sample disk. </OL> <LI>Check the PCMCIA cards </OL><LI>Check the Day Timer. <OL TYPE="A"> <LI>Check for the right month. <LI>Check for the right year. </OL></OL></BODY></HTML>

Both will produce the same nested lists.

Page 24: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

Definition Lists

Presents data formatted like a glossary or dictionary.

Ideal format to present lists of words or concepts and their meaning.

Common tags <DL>. . .</DL> Definition list <DT> Define term <DD> Define definition

Page 25: Introduction to HTML Lists Why Use Lists? Lists are one way to organize information for easy access. People are familiar with using lists to organize

The End


ASAP 2420 - Particle Characterization Analysis / … Software The ASAP 2420 Windows interface provides a familiar environment for the user. It is easy to collect, organize, archive,

Fireworks & Reuniting Lost Dogs with Their Families · 2020-05-07 · water, familiar scented articles, and the dog’s bed or favorite ... Organize! Have a good plan. Assign one

LNCS 7295 - Characterising Emergent Semantics in Twitter Listsa novel analysis of the semantics of emergent relations obtained from Twitter lists, which are created by users to organize

Course Syllabus - University of Jordandentistry.ju.edu.jo/Lists/Courses/Attachments/34/Prosthodontics the… · how to manage gag reflex. 6. Be familiar with the preprosthetic surgical

Microsoft Dynamics AX 2012...Microsoft Dynamics AX 2012 Manufacturing Highlights Familiar User Experience • Deliver RoleTailored access to unified work lists, visual task queues,

Dell Premier · 2020-06-12 · page. Alternatively, select “Shop” in the masthead and then click “Standard Configurations” in the secondary navigation. 4. Lists Organize and

Sales.ppt - Compatibility Mode · The Science of Sales Steps in Time Management Organize Make ‘to-do’ lists Have lists for daily, weekly, monthly, and yearly goals Prioritize

PACKAGE SALES! … · A Builders FirstSource Garage Package is an easy, well thought out, space saving solution to help organize your equipment. With material lists complete, product

ANGULARJS TO ANGULAR 2 - files.meetup.com · Architecture with AngularJS 1.x Get familiar with component anti-patterns common to AngularJS code Use directives to organize code into

INSTALLATION INSTRUCTIONS · Check shop drawings, installation instructions, architectural drawings and shipping lists to become thoroughly familiar with the project. The shop drawings

Track information. Organize work. Get things done. · 2020. 7. 19. · Microsoft 365 Lists, a new Microsoft 365 app, provides a simple, smart, and flexible way to organize work and

Chapter 17: Linked Lists. Objectives In this chapter, you will: – Learn about linked lists – Become familiar with the basic properties of linked lists

Lists Lists Lists Lists Lists Lists Lists 7 Ways Your Lists Are Looking & Acting Old

Getting Started With Automated Build Studio 4 · familiar with programming, you will find creating macros very easy with the visual macro ... Automated Build Studio lets you organize

Symmetry -  · Geometry Labs Section 5 Symmetry 71 5. Organize the capital letters in two lists below:those with rotation symmetry and those without. …

Holiday Marketing 101 - Constant Contact...2018/10/18  · Organize your database before the holiday season arrives. Put your loyal, new, and potential customers into different lists

61324996 His Last Words From Kwame Ture Fka Stokely Carmichael Organize Organize Organize

mailchimp - IT Learning Pods · MailChimp Why use MailChimp? MailChimp is an online application that can help you organize your mail lists, create online mailings and newsletters

IX. HPSA and MUA/MUP Lists IX-1. HPSA and MUA/MUP Lists Objective: Participants will: 1) Become familiar with the HPSA and MUA/MUP lists 2) Understand

Contents Resou… · Kickstarter campaigns Bucket lists Ways to encourage others Adventures Friendships. 30 CA vs. CO Community Online posts Jokes Ways to show love Ways to organize

The Parental Involvement Connection - ESC16.NET · 2017-03-31 · Take your organizing online. Several websites exist to help you organize information (contacts, lists, tasks) in

Notes - Plant Grow Lights, Indoor Hydroponic Systems ... · STEP 2- Organize the Parts Become familiar with your Tsunami™ Systems components by removing and organizing your parts

Microsoft Dynamics AX 2012 - Encore Business … Dynamics AX 2012 Highlights for Services Organizations Familiar user experience • Deliver RoleTailored access to unified work lists,

Tab Feed Maintenance Kit Stolle EOE Conversion Systems ...€¦ · organize and catalogue the essential elements necessary for repairs. Stolle manual drawings, parts lists and procedure

Change Management with Contract Manager · Many Primavera Contract Management users are familiar with how Contract Management provide/allows users to organize documents and processes

Adobe Photoshop CS3 Scripting Guide ·  · 2018-04-19app.activeDocument.layerSets[0].layers[0] Finally, tables are sometimes used to organize lists of values specific to each scripting

THE FERNFORESTER October 2013schools.peelschools.org/1414/Lists/SchoolNewsLetters/THE... · Web viewThe OSR contains familiar documents that parents can view at any given time. OSR

Chapter 7 Arrays and Array Lists · HTo become familiar with using arrays and array lists HTo learn about wrapper classes, auto-boxing and the generalized for loop HTo study common

Empower Business through Customer Relationship Excellence · Enhance Marketing Organize client information and create campaign lists Send automated emails Manage relationships with

Chapter 13 ARRAY LISTS AND ARRAYS CHAPTER GOALS –To become familiar with using array lists to collect objects –To learn about common array algorithms –To

Organize Yourself, Organize your Office - Lab Quality Confab · 2017-04-02 · Organize Yourself, Organize your Office Laboratory Quality Confab on Quality Management in Diagnostic

Lesson 7. Tables Table Tags and Attributes Tables HTML tables are used in two main ways: 1.To organize tabular data in a familiar spreadsheet-like way

Suggested Time: 2 Weeks - ed.gov.nl.ca · In Grade 3, students will use tally marks, lists, charts, line plots, and bar graphs to organize data and interpret information relevant

Chapter 7: Arrays and Array Lists. To become familiar with using arrays and array lists To learn about wrapper classes, auto-boxing and the generalized

Class 3 – Creating Lists In this lesson, you will learn to use HTML to organize your text into lists