สรุป คำสั่งแสดงผลแบบรายการบนหน้าเว็บเพจ

รายการแบบใช้สัญลักษณ์กำกับ <UL>..</UL>

      รายการแบบใช้สัญลักษณ์กำกับ (Unnumber Lists หรือ Unorder Lists) <UL>..</UL> เป็นคำสั่งให้แสดงผลข้อมูล แบบรายการโดยไม่ใช้ ตัวเลขเป็นตัวแสดงลำดับของรายการ เพราะในการแสดงผล จะใช้เครื่องหมาย แทนตัวเลข โปรแกรมเว็บเบราเซอร์แต่ละตัวจะกำหนดรูปภาพที่แสดงออกเป็นหัวข้อในแต่ละรายการ แตกต่างกันไป บางโปรแกรมเป็นจุดกลม สี่เหลี่ยม รูปหัวใจ หรือรูปอื่นๆ ตามที่เลือก
      ภายใน <UL>...</UL> จะมีคำสั่ง <LI> เป็นส่วน ประกอบสำคัญของการแสดงรายการของข้อมูล
สมาชิกของรายกาย(List) <LI>

      เป็นส่วนที่ข้อความที่ถูกนำมาแสดงเป็นรายย่อย มักเป็นข้อความที่ไม่ยาวมากนัก ส่วนใหญ่จะเป็นหัวข้อ List Item (LI) จะมีจำนวนเท่าใดก็ได้ และคำสั่งนี้ไม่มีตัวปิด

ตัวอย่าง

ตัวอย่าง ผลลัพธ์
<html>
<head><title> </title></head>
<body>
<ul>
<center>Welcome to Web Design</center>
<li>Web Builder
<li>Webpage  Design
<li>Cools site
</ul>
</body>
</html>

    Welcome to Web Design

  • Web Builder
  • Webpage Design
  • Cools site

การกำหนดสัญลักษณ์ (TYPE=n)

      ปกติรูปแบบของสัญลักษณ์ที่ปรากฏอยู่ในบราเซอร์ มักจะเป็นแบบจุดกลม แต่สำหรับ Netscape เราสามารถเปลี่ยนแปลงสัญลักษณ์นี้ได้โดยการกำหนดรูปบบบ ของสัญลักษณ์ลงไปในส่วนของ <UL> หรือ <LI> ด้วยการเพิ่มแอตทริบิวต์ TYPE=n ซึ่ง n มีค่าเป็น Disc, Circle, Square

ตัวอย่าง

ตัวอย่าง ผลลัพธ์
<ul type=disc>
      <li>This is type disc
      <li>How do i live
</ul>
<ul type=circle>
      <li>This is type circle
      <li>It's cool.
</ul>
<ul type=square>
      <li>This is type circle
      <li>Titanic
</ul>
<ul>
      <li type=disc>Radio vote
      <li type=circle>Hot wave
      <li type=square>Green wave
</ul>
  • This is type disc
  • How do i live
  • This is type circle
  • It's cool.
  • This is type circle
  • Titanic
  • Radio vote
  • Hot wave
  • Green wave

หมายเหตุ
  • การกำหนดรูปแบบของรายการ ทำได้กับ Netscape เท่านั้น Internet Explorer ไม่สนับสนุนแอตทริบิวต์นี้
  • ในการใช้ li=disc จะมีปัญหากับ Netscape 3 ซึ่งจะแสดงผลเป็นตัว ท เนื่องจากรหัสของคำสั่ง <LI> ไปตรงกับรหัสภาษาไทยพอดี ซึ่งในที่นี้คือ ตัว ท
  • หากเราต้องการให้แต่ละรายการ(List) มีรูปแบบของสัญลักษณ์ที่แตกต่างกัน เราสามารถ กำหนด type=n ลงไปในคำสั่ง <li> ได้ เช่น <li type=circle> โดย n มีค่าเป็น Disc, circle ,square

รายการแบบใช้ตัวเลขและตัวอักษรกำกับ <OL>..</OL>

รายการแบบใช้ตัวเลขกำกับ

      รายการแบบใช้ตัวเลขกำกับ (Numbered Lists หรือ Order Lists) เช่นเดียวกับ <UL>..</UL> ภายใน <OL>..</OL> ก็จะประกอบด้วย แอตทริบิวต์ <LI> เหมือนกัน

ตัวอย่าง

ตัวอย่าง ผลลัพธ์
<html>
<head><title> </title></head>
<body>
<OL>
<center>Welcome to Web Design</center>
      <li>Web Builder
      <li>Webpage  Design
      <li>Cools site
</OL>
</body>
</html>

    Welcome to Web Design

  1. Web Builder
  2. Webpage Design
  3. Cools site

การกำหนดรูปแบบตัวอักษรอื่นๆ

      ทำได้โดยการเพิ่มแอตทริบิวต์ Type=n โดยที่ n มีค่าเป็น A หรือ a และ I หรือ i ซึ่งแต่ละตัวก็จะถือว่า เป็นชุดแรกของตัวอักษร เช่น กำหนด n เป็น A ตัวอักษรถัดไปก็จะเป็น B,C,D ตามลำดับ หรือกำหนดให้ n มีต่าเป็น I ตัวอักษรถัดไปก็จะเป็น II,III,IV เป็นต้น นอกจากนี้เรายังสามารถกำหนดค่าเริ่มต้นได้โดยใช้ แอตทริบิวต์ Start=n โดย n มีค่าเป็นเลขเริ่มต้น เช่น กำหนดให้ n เป็น 20 ตัวต่อไปก็จะเป็น 21, 22, 23 เป็นต้น

ตัวอย่าง

ตัวอย่าง ผลลัพธ์
<html>
<head><title> </title></head>
<body>
<ol  type=A>
      <li>This is type A . eg. A,B,C ...
      <li>How do i live
</ol>
<ol type=a>
      <li>This is type a. eg. a,b,c ...
      <li>It's cool.
</ol>
<ol type=I>
      <li>This is type I. eg I,II,III ...
      <li>Titanic
</ol>
<ol  type=I start=5>
      <li >This is type I but It start=5.
      <li>Hot wave
      <li>Green wave
</ol>
<ol  start=20>
      <li >This is type number but It start=20.
      <li>Hot wave
      <li>Green wave
</ol>
</body>
</html>
  1. This is type A . eg. A,B,C ...
  2. How do i live
  1. This is type a. eg. a,b,c ...
  2. It's cool.
  1. This is type I. eg I,II,III ...
  2. Titanic
  1. This is type I but It start=5.
  2. Hot wave
  3. Green wave
  1. This is type number but It start=20.
  2. Tata Remix
  3. Briohny  

รายการแบบเมนู <MENU>..</MENU>

      เป็นรูปแบบการแสดงรายการที่พบเห็นได้ทั่วไป ซึ่งการแสดงผลเหมือนกับ คำสั่ง <UL> ... </UL>

ตัวอย่าง

ตัวอย่าง ผลลัพธ์
<html>
<head><title> </title></head>
<body>
<menu>การทำเมนู
      <li>ข้อมูลที่นำมาแสดง
      <li>ข้อมูลที่นำมาแสดง
</menu>
</body>
</html>

การทำเมนู

  • ข้อมูลที่นำมาแสดง
  • ข้อมูลที่นำมาแสดง

    • รายการแบบไดเรกทอรี <DIR>..</DIR>

          เป็นรูปแบบการแสดงรายการอีกรูปแบบหนึ่ง มีลักษณืะเหมือนกับ <UL> ... </UL> แต่ สามารถใช้ตัวอักษรได้สูงสุด 24 ตัวอักษร

    ตัวอย่าง
    ตัวอย่าง ผลลัพธ์
    <html>
    <head><title></title></head>
    <body>
    <menu>การทำรายการแบบไดเรกทอรี
          <li>SUPER MAN
          <li>SUPER GIRL
    </menu>
    </body>
    </html>

    การทำรายการแบบไดเรกทอรี

  • SUPER MAN
  • SUPER GIRL

    • รายการแบบคำจัดกัดความ <DL>..</DL>

          เป็นคำสั่งที่อยู่ในรูปแบบของคำจัดกัดความ คำศัพท์ หัวข้อ สำหรับการนำเอามาใช้งานนั้น ไม่สามารถนำมาใช้ร่วมกับคำสั่ง <LI> ได้ แต่จะใช้กับคำสั่ง <DT> และ <DT> แทน

    <DT> หรือ คำจัดกัดความ
    เป็นชื่อของคำจัดกัดความ คำศัพท์ หรือหังข้อที่ต้องการให้มีคำอธิบาย
    <DT> หรือ คำอธิบาย
    เป็นส่วนประกอบย่อยของ <DT> อีกทีหนึ่ง ใช้เป็นข้อความบรรยายแสดงรายละเอียดของคำจัดกัดความ คำศัพท์หรือหัวข้อที่กำหนดนั้น

    ตัวอย่าง
    ตัวอย่าง ผลลัพธ์
    <html>
    <head><title></title></head>
    <body>
    <DL>รายการแบบคำจำกัดความ
          <DT>คำจำกัดความ 1
                <DD>คำอธิบาย 1
          <DT>คำจำกัดความ 2
                <DD>คำอธิบาย 2
          <DT>คำจำกัดความ 3
                <DD>คำอธิบาย 3
    </DL>
    </body>
    </html>

    รายการแบบคำจำกัดความ

    คำจำกัดความ 1
    คำอธิบาย 1
    คำจำกัดความ 2
    คำอธิบาย 2
    คำจำกัดความ 3
    คำอธิบาย 3

    รายการแบบคำจัดกัดความแบบกระชับ <DL COMPACT>

          ในกรณีที่ต้องการแสดงผลข้อมูลให้ <DT> และ <DT> ให้อยู่ในบรรทัดเดียวกันให้เพิ่มแอตทริบิวต์ Compact ในคำสั่ง <dl> เป็น <DL COMPACT> หากข้อความที่อยู่ใน <DT> ไม่ยาวมากนัก เวบบราว์เซอร์จะนำเอา คำอธิบายที่อยู่ใน <DD>มารวมอยู่ในบรรทัดเดียวกัน

    ตัวอย่าง
    ตัวอย่าง ผลลัพธ์
    <html>
    <head><title></title></head>
    <body>
    <DL COMPACT>รายการแบบคำจำกัดความ
          <DT>PAT
                <DD>This my nickname!
          <DT>Ronaldo
                <DD>This my friend!
          <DT>Alicia
                <DD>This my sister!
    </DL>
    </body>
    </html>

    รายการแบบคำจำกัดความ

    PAT
    My nickname!
    Ronaldo
    This my friend!
    Alicia
    This my sister!