Presentation is loading. Please wait.

Presentation is loading. Please wait.

<html> <head> <title> Lists in HTML PowerPoint </title> </head> <body> How to create lists in HTML </body> </html>

Published byNorah Wilkins Modified over 5 years ago

Similar presentations

Presentation on theme: "<html> <head> <title> Lists in HTML PowerPoint </title> </head> <body> How to create lists in HTML </body> </html>"— Presentation transcript:

1 <html> <head> <title> Lists in HTML PowerPoint </title> </head> <body> How to create lists in HTML </body> </html>

2 Creating Lists in HTML 3 types of lists Unordered list Ordered list
Bulleted items Ordered list Numbered items Definition List a list of items, with a description of each item

3 Unordered Lists in HTML
The tag for a bulleted list is <ul> & </ul> Each item is surrounded with the open and close <li> tag (li = list item) Bullets can be changed to squares or circles with the optional code type=“square” or type=”circle” in the <ul> tag. Code View <ul> <li>Milk</li> <li>Eggs</li> </ul> -- Browser View Milk Eggs

4 Ordered Lists in HTML The tag for a numbered list is <ol> & </ol> Each item is surrounded with the open and close <li> tag (li = list item) List items will be numbered Numbers can be changed to a, A, i, or I with the optional code type=“a”, type=“A”, etc in the <ol> tag. Code View <ol> <li>George Washington</li> <li>John Adams</li> </ol> -- Browser View 1. George Washington 2. Johns Adam

5 Definition Lists in HTML
The tag for this list is <dl> & </dl> Each term is surrounded with the <dt> tag and each description is surrounded with the <dd> tag Code View <dl> <dt>Electron</dt> <dd>- carries a negative electric charge</dd> <dt>Neutron</dt> <dd>- carries no electric charge</dd> </dl> -- Browser View Electron - carries a negative electric charge Neutron - carries no electric charge

6 Lists in HTML – REVIEW Ordered lists <ol> produce numbered lists
Unordered lists <ul> produce bulleted lists Each item in an ordered list & unordered list is surrounded with the <li> tag Definition lists <dl> produce terms with definitions Each term in a definition list is surrounded with the <dt> tag and each description is surrounded with the <dd> tag.

7 Activity Practice Get a textbook for this course.
On page 203 – Read through the information to clarify your knowledge of the three types of lists. Complete the “action” lessons for Unordered Lists (pg. 204), Ordered Lists (pg. 205), Definition Lists (pg. 206) & Line Break (pg. 207).

Download ppt "<html> <head> <title> Lists in HTML PowerPoint </title> </head> <body> How to create lists in HTML </body> </html>"

Similar presentations

Lists in HTML PowerPoint How to create lists in HTML

Lists in HTML PowerPoint How to create lists in HTML
Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 2: More HTML.

Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 2: More HTML.
SSome HTML tags allow you to specify a variety of options, or attributes, along with the basic tag itself. For example, when you begin a paragraph with.

SSome HTML tags allow you to specify a variety of options, or attributes, along with the basic tag itself. For example, when you begin a paragraph with.
Session: 3. © Aptech Ltd. 2Formatting Text using Tags / Session 3  Explain the Heading tag  Explain the different tags related to formatting  Explain.

Session: 3. © Aptech Ltd. 2Formatting Text using Tags / Session 3  Explain the Heading tag  Explain the different tags related to formatting  Explain.
Creating List. Lesson Proper Pre-Test Post-Test References Credits.

Creating List. Lesson Proper Pre-Test Post-Test References Credits.
Unit 1 Changing the Appearance of Text. TITLE CORNELL NOTES TOPIC: NOTES: Summary: HTML Hypertext Markup Language 1 st and last tag on a page Tags Tags.

Unit 1 Changing the Appearance of Text. TITLE CORNELL NOTES TOPIC: NOTES: Summary: HTML Hypertext Markup Language 1 st and last tag on a page Tags Tags.
HTML | DOM. Objectives  HTML – Hypertext Markup Language  Sematic markup  Common tags/elements  Document Object Model (DOM)  Work on page | HTML.

HTML | DOM. Objectives  HTML – Hypertext Markup Language  Sematic markup  Common tags/elements  Document Object Model (DOM)  Work on page | HTML.
Basic HTML PowerPoint How Hyper Text Markup Language Works.

Basic HTML PowerPoint How Hyper Text Markup Language Works.
Chapter 7 Web Design.. HTML  Hypertext Markup Language  Using HTML, text is formatted by wrapping it in a tag.  The tags provide instructions to the.

Chapter 7 Web Design.. HTML  Hypertext Markup Language  Using HTML, text is formatted by wrapping it in a tag.  The tags provide instructions to the.
Lesson 3: Organizing your material  Create a numbered or unordered (bulleted) list  Unordered list tag is to begin and to indicate the beginning and.

Lesson 3: Organizing your material  Create a numbered or unordered (bulleted) list  Unordered list tag is to begin and to indicate the beginning and.
HTML.

HTML.
HTML Tags Lesson 2. What are HTML Tags?  Markup tags  Coded instructions that accompany the plain text of an HTML document  Syntax –Left wicket< –Tag.

HTML Tags Lesson 2. What are HTML Tags?  Markup tags  Coded instructions that accompany the plain text of an HTML document  Syntax –Left wicket< –Tag.
This shows CIS17 and the first day introduction..

This shows CIS17 and the first day introduction..
Unordered Lists Need to make a list of items that aren't numbered? You need.

Unordered Lists Need to make a list of items that aren't numbered? You need.
Chapter 4 HTML Tags. HTML is written in something called tags. Tags come in pairs, an opening one and a closing one. The first pair of tags we'll write.

Chapter 4 HTML Tags. HTML is written in something called tags. Tags come in pairs, an opening one and a closing one. The first pair of tags we'll write.
Web Page Design XHTML Lesson 4. Adding Structure 4 A div tag –Used to divide up a web page and to add structural meaning to the page. –Will not change.

Web Page Design XHTML Lesson 4. Adding Structure 4 A div tag –Used to divide up a web page and to add structural meaning to the page. –Will not change.
HTML 17 HTML 17. HTML 17 HTML is the language for making webpages Hypertext Markup Language You need to know the basics Questions about HTML are common.

HTML 17 HTML 17. HTML 17 HTML is the language for making webpages Hypertext Markup Language You need to know the basics Questions about HTML are common.
Basic Webpage Design Formatting output using Unordered List and Ordered List tag.

Basic Webpage Design Formatting output using Unordered List and Ordered List tag.
Introduction to Programming

Introduction to Programming
Tutorial 1 – Creating Web Pages With HTML

Tutorial 1 – Creating Web Pages With HTML

Similar presentations

Ads by Google