top of page

การพิมพ์ข้อความแบบหัวข้อเรื่องหรือลำดับรายการ//

fa9e27a7534060df383ab54354fcead3_w200.gi

การกำหนดรูปแบบเครื่องหมายหัวข้อและรายการ     

 

                                 จะช่วยให้การแสดงผลของข้อมูลในหน้าเอกสารดูเข้าใจง่ายยิ่งขึ้น  มีการแบ่งข้อมูลออกเป็นหมวดหมู่ดูสะอาดตา  โดยการแสดงรายการให้เป็นไปตามลำดับความสำคัญ จะทำให้เอกสารเป็นระเบียบสวยงาม  อ่านได้ง่าย การแสดงรูปแบบของหัวข้อเรื่องสามารถทำได้ 5 รูปแบบ คือ

                                     1.   การแสดงรายการแบบมีลำดับ (Order List หรือ Number List)

                                     2.   การแสดงรายการแบบไม่มีลำดับ (Unorder List หรือ Bullet List)

                                     3.   การแสดงรายการแบบหัวข้อย่อย (Definition List)

                                     4.   การแสดงรายการแบบไดเรกทอรี่ (Directory List)

                                     5.   การแสดงรายการแบบเมนู (Menu List)

                               การแสดงรายการแต่ละแบบจะมีความแตกต่างกันออกไป  ขึ้นอยู่กับความต้องการใช้งานในการจัดข้อมูลในเอกสารเป็นหลัก  ซึ่งแต่ละรูปแบบจะมีวิธีการใช้คำสั่ง ดังนี้

52.PNG

 1. คำสั่งแสดงผลรายการแบบมีลำดับ (Number/Order List)

 

                การแสดงข้อมูลรายการแบบมีหมายเลขกำกับ (Number/Order Lists) จะใช้แท็ก <OL> และ </OL> ซึ่งย่อมาจาก Ordered List คือข้อมูลรายการแบบมีหมายเลข เรียงลำดับจากน้อยไปหามากกำกับอยู่หน้าแต่ละรายการ โดยมีแท็กที่เป็นส่วนประกอบภายในอีกทีหนึ่ง คือแท็ก <LI> ที่ใช้กำหนดหัวเรื่องหรือรายละเอียดของรายการย่อย ซึ่งเมื่อรายการย่อยเหล่านี้นำไปแสดงบนเบราเซอร์ ลำดับที่ของรายการจะถูกใส่ให้กับแต่ละรายการโดยอัตโนมัติ

·       type= ชนิดของการแสดงผลแบบรายการ

                                            ·       I , i เป็นการแสดงผลแบบโรมัน

                                            ·       A , a เป็นการแสดงผลแบบภาษาอังกฤษ

                                            ·       1 เป็นการแสดงผลลำดับรายการปกติ (Default)

                                                ·       start= การเริ่มของค่าของการแสดงรายการ (สามารถกำหนดค่าเริ่มต้นได้)

 

                                       ตัวอย่างที่ 1 แสดงวิธีการแสดงรายการแบบมีลำดับ (Order List หรือ Number List)

asd.PNG

 ผลลัพธ์

10.gif

 ตัวอย่างที่ 2 การใช้คำสั่ง OL ร่วมกับคำสั่ง START

11.gif

 ผลลัพธ์

13.gif

 2. คำสั่งสำหรับแสดงผลรายการแบบไม่มีลำดับ (Bulleted/Unordered List)

 

                       คำสั่ง <UL> การแสดงรายการแบบไม่มีเลขลำดับ (Unorder หรือ Bullet List)  เป็นคำสั่งที่ใช้แสดงรายการโดยใช้เครื่องหมายเป็นตัวแสดงนำหน้าข้อความโดยไม่จำเป็นต้องเรียงตามลำดับก่อน-หลัง เพราะเป็นการเรียงหัวข้อแบบไม่มีตัวเลขระบุไว้ มีรูปแบบการใช้งาน ดังนี้

85.PNG

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

16.gif

 ผลลัพธ์

17.gif

 3. การแสดงผลรายการแบบหัวข้อย่อย (Definition List)

 

                    รายการย่อยแบบใช้นิยาม หรือ Definition List นี้จะคล้ายกันกับรายการย่อยแบบที่ใช้หมายเลขหรือสัญลักษณ์กำกับ ต่างกันที่ไม่สัญลักษณ์ใดๆ กำกับหน้าแต่ละรายการย่อย มีเพียงแต่รายการย่อยต่างๆ แสดงอยู่ลักษณะคล้ายกับพจนานุกรม โดยมีแท็กที่เกี่ยวข้องอยู่ 3 แท็กด้วยกัน คือ <DL> และ </DL> เพื่อบอกว่ารายการย่อยมีลักษณะเป็น แบบใช้นิยาม ส่วนแท็ก <DT> นั้นใช้บอกส่วนที่เป็นเรื่องของแต่ละรายการย่อย และแท็ก <DD> ใช้บอกส่วนที่เป็นรายละเอียดในรายการย่อยนั้น

96.PNG
                                                ตัวอย่างการใช้คำสั่ง DL
22.gif

 ผลลัพธ์

23.gif

 คำสั่งในการกำหนดลักษณะตัวอักษร และแสดงสัญลักษณ์ต่างๆ

HTML
  ตัวเอียง ตัวหนา หรือแบบอักษรแบบต่างนั้นมีเพื่อให้เราอ่านบทความได้ง่ายขึ้น หรือเป็นการเน้นคำ ซึ่งในบทนี้เราจะมาดูกันว่ามีคำสั่งอะไรบ้าง

ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

1.คำสั่งที่ใช้ในการจัดลักษณะตัวอักษร
  ในหัวข้อนี้จะเป็นคำสั่งที่ใช้ในการจัดรูปแบบทั่วไปเช่นตัวเอียง ตัวหนา

    คำสั่งเราจะแบ่งได้เป็น 2 พวกดังนี้

    1.แบ่งตามลักษณะที่ปรากฏ เช่นตัวเอียง ตัวหนา

           <B>          ตัวอักษรแบบตัวหนา (bold) 
          <I>            ตัวอักษรแบบตัวเอน (italic)
         <S>           ตัวอักษรแบบตัวขีดฆ่า (strike) 
         <Sub>      ตัวอักษรแบบตัวห้อย (subscripted) 
         <Sup>      ตัวอักษรแบบตัวยก (superscripted)
         <U>          ตัวอักษรแบบขีดเส้นใต้ (underline)   
 
   2.แบ่งตามการใช้งาน เช่น ใช้กับคำพูดหรือวลี ใช้กับข้อความที่สำคัญมาก

          <Em>            ใช้เน้นข้อความ คำพูดหรือวลี (emphasized) 
        <Stong>         ใช้เน้นข้อความที่สำคัญมากๆ (strong) 
        <Ins>              ใช้เน้นข้อความที่แก้ไขเพิ่มเติม (inserted) 
        <Del>              ใช้บอกว่าข้อความนี้ถูกลบไปแล้ว (deleted) 
        <Code>          ใช้บอกว่าข้อความที่เป็นโปรแกรม (computer code)
        <Address>     ใช้บอกว่าข้อความที่เป็นที่อยู่ (computer code) 

 
        ซึ่งจริงแล้วนั้น ผลลัพธ์ออกมาก็เหมือนกัน เช่น B ให้ผลลัพธ์เหมือนกับ Strong เราจะเลือกใช้แบบใดก็ได้ แต่เราแยกเพื่อความสะดวกในการใช้งานมากกว่า

 2.คำสั่งที่ทำให้รูปแบบตัวอักษรใน soure code เหมือนกับที่แสดงผล
  Pre tag จะมีประโยชน์มากในการที่เราจะแสดงบทความที่มีเนื้อหามาก หรือ คัดลอกเนื้อหาจากที่อื่นมาทำให้เราไม่ต้องขึ้นบรรทัดใหม่ด้วยคำสั่ง br และใช้ในการแสดง source code ได้ดีอีกด้วย

dbf0d90bd86265ae9fdc2ecf1b0f6125.gif

ที่มาของข้อมูล : https://www.m-culture.go.th/it/ewt_news.php?nid=69&filename=index

bottom of page