linklist

1 การสร้างลิสต์แบบไม่มีลำดับ

ลิสต์แบบไม่มีลำดับ (Unordered List) เป็นลิสต์ที่เหมาะสมสำหรับการนำเสนอข้อมูลที่เป็นหัวข้อประเด็นสั้นๆ ไม่ต้องการลำดับของตัวเลข หรือตัวอักษรให้ยุ่งยาก ดังนี้

      ชื่อแท็ก                          ul และ li
      ตำแหน่งแท็ก                  ul (Unordered List) อยู่ภายในแท็ก <body>...</body>
                                          li (List Item) อยู่ภายในแท็ก <ul>...</ul>
      รูปแบบแท็ก                   <ul>
                                                      </li>ข้อมูลในลิสต์</li>
                                                      </li>ข้อมูลในลิสต์</li>
                                          </ul>

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

      <body>
                              <ul>
                                รายการสินค้าที่มีขายในเว็บไซต์ของเรา
                              <li>นิตยสาร</li>
                              <li>หนังสือ How to </li>
                              <li>หนังสือคอมพิวเตอร์และเทคโนโลยี</li>
                              <li>หนังสือนวนิยาย</li>
                              <li>หนังสือแบบเรียนวิชาการ</li>
                              </ul>
      </body>

ผลลัพธ์การสร้างลิสต์แบบไม่มีลำดับ

Ø การกำหนดเครื่องหมายนำหน้าหัวข้อ

            ชื่อแอตทริบิวต์                type
            ตำแหน่งแอตทริบิวต์        อยู่ในแท็กเปิด <ul...> หรือ <li...>
            รูปแบบ                          <ul type="ชนิดของเครื่องหมาย">
                                                <li type="ชนิดของเครื่องหมาย">
            ค่าที่กำหนด                    ชนิดของเครื่องหมายหน้าลำดับ ได้แก่ disc, circle และ square

รูปแบบและสัญลักษณ์ของเครื่องหมายแต่ละชนิด

ชนิดของเครื่องหมาย	รูปแบบ	สัญลักษณ์
disc	วงกลมทึบ
circle	วงกลมโปร่งใส
square	สี่เหลี่ยมทึบ

ตัวอย่างการกำหนดเครื่องหมายให้กับลิสต์แบบไม่มีลำดับ

<body>
                              <ul type="circle" >
                                          รายการสินค้าที่มีขายในเว็บไซต์ของเรา
                                          <li>นิตยสาร</li>
                                          <li type="square" >หนังสือ How to </li>
                                          <li>หนังสือคอมพิวเตอร์และเทคโนโลยี</li>
                                          <li type="disc" >หนังสือนวนิยาย</li>
                                          <li>หนังสือแบบเรียนวิชาการ</li>
                              </ul>
      </body>

ผลลัพธ์การกำหนดเครื่องหมายให้กับลิสต์แบบไม่มีลำดับ

2.การสร้างลิสต์แบบมีลำดับ

ในบางครั้งเราต้องใช้ลิสต์ที่มีการจัดลำดับ (Ordered List) เพื่อนำเสนอข้อมูล เช่น ขั้นตอนการทำงาน หรืออันดับหนังสือขายดี การใช้ลิสต์แบบนี้คล้ายกับการใช้ลิสต์แบบไม่มีลำดับ แต่จะมีตัวเลขกำกับแต่ละสมาชิกที่อยู่ในลิสต์ให้โดยอัตโนมัติ มีรูปแบบแท็กดังนี้

ชื่อแท็ก              ol แล li
ตำแหน่งแท็ก      ol (Onordered List) อยู่ภายในแท็ก <body>...</body>
                        li (List Item) อยู่ภายในแท็ก <ol>...</ol>
รูปแบบแท็ก       <ol>
                                    </li>ข้อมูลในลิสต์</li>
                                    </li>ข้อมูลในลิสต์</li>
                        </ol>

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

            <body>
                        <ol>
                                    หนังสือที่ติดอันดับขายดีในปีนี้
                                    <li>หนังสือสร้างเว็บด้วย Dreamweaver CS5 </li>
                                    <li>หนังสือสร้างภาพกราฟิกด้วย Photoshop CS5 </li>
                                    <li>หนังสือสร้างแอนิเมชันด้วย Flash CS5 </li>
                                    <li>หนังสือสร้างแอพลิเคลชันด้วย Visual Basic.net </li>
                        </ol>
            </body>

ผลลัพธ์การสร้างลิสต์แบบมีลำดับ

Ø การกำหนดชนิดของตัวจัดลำดับ

            ชื่อแอตทริบิวต์                type
            ตำแหน่งแอตทริบิวต์        อยู่ในแท็กเปิด <ol...>
            รูปแบบ                        <ol type="ชนิดของเครื่องหมาย">
            ค่าที่กำหนด                    ชนิดของลำดับนำหน้าหัวข้อ ได้แก่ A, a, I (ไอตัวใหญ่), i และ 1

ลำดับแต่ละชนิดมีลักษณะดังนี้

ชนิด	คำอธิบาย
type="A"	แสดงเป็นตัวอักษรตัวพิมพ์ใหญ่ คือ A, B, C, ...
type='a"	แสดงเป็นตัวอักษรพิมพ์เล็ก คือ a, b, c, ...
type="I" (ไอใหญ่)	แสดงตัวเลขโรมันตัวพิมพ์ใหญ่ คือ I, II, III, ...
type="i"	แสดงตัวเลขโรมันตัวพิมพ์เล็ก คือ i, ii, iii, ...
type="1"	แสดงเป็นตัวเลข คือ 1, 2, 3, ... (ค่าปกติ)

ตัวอย่างการกำหนดชนิดของตัวจัดลำดับ

            <body>
                        <ol type="i" >
                                    หนังสือที่ติดอันดับขายดีในปีนี้
                                    <li>หนังสือสร้างเว็บด้วย Dreamweaver CS5 </li>
                                    <li>หนังสือสร้างภาพกราฟิกด้วย Photoshop CS5 </li>
                                    <li>หนังสือสร้างแอนิเมชันด้วย Flash CS5 </li>
                                    <li>หนังสือสร้างแอพลิเคลชันด้วย Visual Basic.net </li>
                        </ol>
            </body>

ผลลัพธ์การกำหนดชนิดของตัวจัดลำดับ

Ø กำหนดลำดับเริ่มต้นให้กับข้อมูล

           หากเราต้องการกำหนดตัวเลขเริ่มต้น หรือต้องการข้ามลำดับบางรายการไป เป็นการแสดงลำดับที่ไม่ต่อเนื่อง สามารถทำได้โดยใช้รูปแบบดังต่อไปนี้
                        ชื่อแอตทริบิวต์                start และ value
                        ตำแหน่งแอตทริบิวต์        อยู่ในแท็กเปิด <ol...> และ <li...>
                        รูปแบบ                          <ol start="ตัวเลข"> และ <li value="ตัวเลข">
                        ค่าที่กำหนด                    เป็นการกำหนดเลขเริ่มต้นของลำดับ

ตัวอย่างการกำหนดเลขลำดับเริ่มต้น

            <body>
                                    <ol>
                                    หมวดคอมพิวเตอร์
                                    <li>Dreamweaver CS5 </li>
                                    <li>Photoshop CS5 </li>
                                    <li>Flash CS5 </li>
                                    <li>Visual Basic.net </li>
                                    <li>Premiere Pro </li>
                        </ol>

                                   <ol start="6" >
                                    หนังสือ How to
                                    <li>การคิดเชิงวิพากษ์</li>
                                    <li>การคิดเชิงสร้างสรรค์</li>
                                    <li>การคิดเชิงกลยุทธ์</li>
                                    <li>การคิดเชิงบูรณาการ</li>
                                    <li value="12" >การคิดเชิงสังเคราะห์</li>
                        </ol>
            </body>

ผลลัพธ์การกำหนดเลขลำดับเริ่มต้น

3.การสร้างลิสต์แบบเมนู

ลิสต์แบบเมนู (Menu List) จะมีลักษณะเหมือนลิงค์แบบไม่มีลำดับ (Unordered List) แต่ลิสต์แบบเมนูนี้ได้ถูกยกเลิกไปแล้ว

            ชื่อแท็ก                         menu และ li
            ตำแหน่งของแท็ก            menu (Menu List) อยู่ภายในแท็ก <body> .. </body>
                                                li (List Item) อยู่ภายในแท็ก <menu> .. </menu>
            รูปแบบ                          <menu>
                                                            <li> ข้อมูลในลิสต์
                                                            <li> ข้อมูลในลิสต์
                                                </menu>

ตัวอย่างการสร้างลิสต์แบบเมนู

<body>

<menu>

เว็บไซต์สถาบันการศึกษา

<li> www.mut.ac.th : มหาวิทยาลัยมหานคร</li>

<li> www.mst : มหาวิทยาลัยมหาสารคาม</li>

<li> www.psu.ac.th : มหาวิทยาลัยสงขลานครินทร์</li>

<li> www.rsu.ac.th : มหาวิทยาลัยรังสิต</li>

</menu>

</body>

ผลลัพธ์การสร้างลิสต์แบบเมนู

Note : เราสามารถกำหนดเครื่องหมายหน้ารายการได้โดยใช้แอททริบิวท์ Type เหมือนในลิสต์แบบไม่มีลำดับ

4. การสร้างลิสต์แบบไดเร็กทอรี่ลิสต์

ลิสต์แบบไดเร็กทอรี่ (Directory List) จะมีลักษณะเหมือนลิสต์แบบไม่มีลำดับ (Unordered List) แต่ลิสต์แบบไดเร็กทอรี่นี้ได้ถูกยกเลิกไปแล้ว

            ชื่อแท็ก                         dir และ li
            ตำแหน่งของแท็ก            dir (Directory List) อยู่ภายในแท็ก <body> .. </body>
                                                li (List Item) อยู่ภายในแท็ก <menu> .. </menu>
            รูปแบบ                          <dir>
                                                            <li> ข้อมูลในลิสต์
                                                            <li> ข้อมูลในลิสต์
                                                </dir>

ตัวอย่างการสร้างไดเร็กทอรี่ลิสต์

<body>

<dir>

เวลาเปิดทำการของคลินิก

<li>จันทร์ 16.00-21.00 </li>

<li>อังคาร 17.00-21.00 </li>

<li>พฤหัสบดี 15.00-21.00 </li>

</dir>

</body>

ผลลัพธ์การสร้างไดเร็กทอรี่ลิสต์

5.การสร้างลิสต์จำกัดความ

ลิสต์จำกัดความ (Definition List) มักถูกนำมาใช้กับการจำกัดความ เช่น ในพจนานุกรมรูปแบบของลิสต์จัดความแบ่งออกได้เป็น 2 ส่วน ส่วนแรกคือคำศัพท์ (Term) และส่วนที่สองคือคำจัดความ (Definition) ซึ่งจะถูกพิมพ์เยื้องเข้าไปหลังคำศัพท์

            ชื่อแท็ก                         dl dt และ dd
            ตำแหน่งของแท็ก            dl (Definition List) อยู่ภายในแท็ก <body> .. </body>
                                                dt (Term in a Definition List)
                                                และ dd (Definition in a Definition List)
                                                อยู่ภายในแท็ก <dl> .. </dl>
            รูปแบบ                          <dl>
                                                            <dt> คำศัพท์</dt>
                                                            <dd> ความหมาย</dd>
                                                            <dt> คำศัพท์</dt>
                                                            <dd> ความหมาย</dd>
                                                </dl>

ตัวอย่างการสร้างลิสต์จำกัดความ

<body>

<dl>

อธิบายศัพท์อินเทอร์เน็ต

<dt> Address </dt>

<dd> ตำแหน่งที่เก็บไฟล์ข้อมูลในอินเทอร์เน็ต </dd>

<dt> Bandwidth </dt>

<dd> การวัดความเร็วการส่งข้อมูลของสายสัญญาณ </dd>

</dl>

</body>

ผลลัพธ์การสร้างลิสต์จำกัดความ

6. การสร้างลิสต์ซ้อนกัน

การสร้างลีสต์ซ้อนกันมีประโยชน์สำหรับนำเสนอข้อมูลที่มีหัวข้อย่อย หรือมีขั้นตอนมาก เช่น คู่มืออธิบายขั้นตอนการปรุงอาหารหรือโจทย์คำถามที่มีคำตอบย่อย

ตัวอย่างการสร้างลิสต์ซ้อนกัน

<body>

<ol>

<li>จังหวัดใดคือแหล่งท่องเที่ยวที่อยู่ในภาคใต้ ?</li>

<li>เชียงใหม่</li>

<li>นครราชสีมา</li>

<li>อุบลราชธานี</li>

</ol>

<li>จังหวัดใดที่ไม่ติดกับทะเล ? </li>

<li>ระยอง</li>

<li>พังงา</li>

</ol>

</body>

ผลลัพธ์การสร้างลิสต์ซ้อนกัน

Note : เราสามารถซ้อนลิสต์กี่ชั้นก็ได้ แต่ไม่แนะนำให้ซ้อนมากกว่า 3 ชั้น เพราะจะทำให้เราสับสน และข้อมูลที่ปรากฏในลิสต์อาจออกนอกจอภาพของบราวเซอร์ทำให้อ่านยาก

การพัฒนาเว็บด้วยภาษาเอชทีเอ็มแอล

การพัฒนาเว็บด้วยภาษาเอชทีเอ็มแอล

linklist

โพสต์ยอดนิยมจากบล็อกนี้

Dreamweaver cs6

การสร้างเว็บไซต์โดยใช้ HTML

table