DEX  WAT  LEARN

LEARN  FOR  WEB  DESIGN  WITH  DEX  WAT  DEV

Lists

HTML Lists

           HTML Lists คือ การสร้างรายการใน html รายการใน html มี 3 แบบด้วยกัน คือ
แบบไม่มีลำดับ , แบบมีลำดับ , แบบคำนิยาม

- รายการแบบไม่มีลำดับ
- รายการแบบมีลำดับ
- รายการแบบคำนิยาม
- ในการจัดการหน้าเว็บไซต์
- แบบทดสอบ




unordered list

รายการแบบไม่มีลำดับ

<ul>
           <li> รายการ </li>
</ul>

           รายการแบบไม่มีลำดับ จะใช้แท็ก <ul> (ย่อมาจาก unordered list) และแต่ละรายการภายในจะอยู่ในแท็ก <li> (ย่อมาจาก list item) โดยแต่ละรายการจะแสดงเครื่องหมายด้วยจุดวงกลมสีดำ (โดยค่าเริ่มต้น)

ตัวอย่าง รายการแบบไม่มีลำดับ

<ul>
           <li> เหนือ </li>
           <li> อีสาน </li>
           <li> กลาง </li>
           <li> ใต้ </li>
</ul>



ตัวอย่าง รายการแบบมีลำดับ

<ol>
           <li> เรือ </li>
           <li> รถ </li>
           <li> เครื่องบิน </li>
           <li> ยาน </li>
</ol>
ordered list

รายการแบบมีลำดับ

<ol>
           <li> รายการ </li>
</ol>
           รายการแบบมีลำดับ จะใช้แท็ก <ol> (ย่อมาจาก ordered list) และแต่ละรายการภายในจะอยู่ในแท็ก <li> (ย่อมาจาก list item) เหมือนกับแท็ก <ul>




definition list

รายการแบบคำนิยาม

<dl>
           <dt> รายการ </dt>
                      <dd> อธิบาย </dd>
</dl>
           รายการแบบคำนิยาม คือ รายการของแต่ละข้อมูล และมีคำอธิบายของแต่ละรายการ รายการแบบคำนิยามจะใช้แท็ก <dl> (ย่อมาจาก definition list ) และแต่ละรายการภายในจะอยู่ในแท็ก <dt> และ คำอธิบายของแต่ละแท็ก <dt> จะอยู่ในแท็ก <dd>

รายการแบบคำนิยาม


<dl>
           <dt> ภาษาในการพัฒนาเว็บไซต์ </dt>
                      <dd> HTML </dd>
                      <dd> CSS </dd>
                      <dd> PHP </dd>
                      <dd> My SQL </dd>
</dl>



ตัวอย่าง tag ในการจัดการหน้าเว็บไซต์

<center>
           DEX WAT DEV
           <br>
           ชัยธวัช
           <hr>
</center>

TAG

tag ในการจัดการหน้าเว็บไซต์

<br> : การขึ้นบันทัดใหม้
<hr> : การขีดเส้นใต้
<center> : การจัดวัตถุให้อยู่ตรงกลาง




แบบทดสอบ


1
- สร้างหน้าเว็บ link แสดงแบบทดสอบ โดยสลับใช้ html list ในแต่ละคาบ

ตัวอย่าง

week 1

week 2
    HTML Lists
  1. HTML Lists
  2. แบบทดสอบ

week 3
test
test
test