slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
COAP 2000 XHTML PROGRAMMING: INTRODUCTION TO WEB PROGRAMMING Fall I, 2012 PowerPoint Presentation
Download Presentation
COAP 2000 XHTML PROGRAMMING: INTRODUCTION TO WEB PROGRAMMING Fall I, 2012

Loading in 2 Seconds...

play fullscreen
1 / 12

COAP 2000 XHTML PROGRAMMING: INTRODUCTION TO WEB PROGRAMMING Fall I, 2012 - PowerPoint PPT Presentation


  • 215 Views
  • Uploaded on

COAP 2000 XHTML PROGRAMMING: INTRODUCTION TO WEB PROGRAMMING Fall I, 2012. Week 4 – Class 1. dejan.dimitrovski@gmail.com dimitdej@webster.edu. http://coap2000.ddejan.com/. HTML Lists. Lists are used to group related type of information together

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'COAP 2000 XHTML PROGRAMMING: INTRODUCTION TO WEB PROGRAMMING Fall I, 2012' - jam


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

COAP 2000 XHTML PROGRAMMING:

INTRODUCTION TO WEB PROGRAMMING

Fall I, 2012

Week 4 – Class 1

dejan.dimitrovski@gmail.com

dimitdej@webster.edu

http://coap2000.ddejan.com/

html lists
HTML Lists
  • Lists are used to group related type of information together
  • It is much easier for the human brain to scan information that is grouped in a list, instead of having it as text

Cakes: Plain Sponge, Chocolate Cake, Apple Tea Cake. Biscuits: Anzac Biscuits, Jam Drops, Melting Moments

html lists1
HTML Lists
  • In HTML there are 3 ways to create lists
    • Unordered lists <ul>
    • Ordered lists <ol>
    • Description lists<dl>
  • Un/Ordered lists contain list items <li>
  • Description lists contain definition terms <dt> and definition descriptions <dd>
ordered lists
Ordered lists
  • Used to group a collection of items together, in a way that suggests an order of precedence or importance.
  • Attributes
    • Type – Specify what type of ordering to use
      • a (a, b, c, …)
      • A ( A, B, C, …)
      • i (i, ii, iii, …)
      • I ( I, II, III, …)
      • 1(1, 2, 3, …)
    • Start – specify the start position for the first item in the list
ordered lists1
Ordered Lists

<ol type=“a” start=“3”> <li> Item 3 </li> <li> Item 4 </li></ol>

unordered lists
Unordered Lists
  • <ul>
  • Used to group a collection of items together in a list, but in a way that doesn’t suggest an order of precedence or importance.
  • Attributes
    • Type
      • Circle (the default option)
      • Disc
      • Square
list items
List Items
  • Both ordered and unordered lists contain list items
  • <li> </li>
  • Attributes
    • Type = "{ circle|disc|square|a|A|i|I|1 }“
      • Using the type attribute on the list item, we can override the type value from the un/ordered list element
    • Value = "number"
      • Using the value attribute we can override the value defined (explicitly or implicitly) by the un/ordered list
list items1
List Items

<ol> <li>Eggs</li> <li type="a">Cheese</li> <li>Milk</li> <li value="99">Papadums</li> <li>Tickle-me Elmo</li> <li>Dr Who Remote Control Dalek</li></ol>

nested lists
Nested Lists
  • We can create nested ordered or unordered lists (or a combination of the two)

<ul>

<li><a href="/">Home</a></li>

<li><a href="/about/">About Us</a>

<!— note that this list item is not closed here —>

<ul>

<li><a href="/about/history/">Our history</a></li>

<li><a href="/aboout/team/">The team</a></li>

<li><a href="/about/vision/">Our vision</a></li>

</ul>

</li> <!—the parent for the nested list is actually closed here —>

<li><a href="/portfolio/">Portfolio</a></li>

<li><a href="/clients/">Clients</a></li>

</ul>

nested lists1
Nested Lists

<ol>

<li>Introduction</li>

<li>Characters

<!— note that this list item is not closed here —>

<ol type="a">

<li>Legolas</li>

<li>Aragorn</li>

<li>Gimley</li>

</ol>

</li> <!—the parent for the nested list is actually closed here —>

<li>Main Battle</li>

<li>Happy End</li>

</ol>

definition lists
Definition Lists
  • Useful when we have a series of items that are essentially a combination of title and description of some kind
  • Basic structure<dl> <dt> … </dt> <dd> … </dt></dl>
  • Each <dt>, does not have to be followed by a <dd> immediately (and vice versa). See p. 143 D
exercise
Exercise
  • Use CSS to make the lists look better
    • Using custom markers (p.404)
    • Controlling where markers hang (p.406)
    • Styling nested lists (p. 408)