คํา สั่ง p และ   มี หน้าที่ อะไร

3.1 การขึ้นบรรทัดใหม่ (Break)

คำสั่งแรกในการจัดรูปแบบเอกสาร ในภาษา HTML คือ การขึ้นบรรทัดใหม่ จะใช้คำสั่ง <br> จะให้ผลเสมือนการกด Enter บนคีย์บอร์ด 

คำสั่ง <br> ส่วนใหญ่มักนิยมจะวางไว้ในตำแหน่งสุดท้ายของประโยค โดยต้องการให้แสดงผลประโยคใหม่ในบรรทัดต่อมา คำสั่ง <br> จะเป็นคำสั่งที่ไม่ต้องมีคำสั่งปิด (Single Tag)

3.2 การจัดย่อหน้า

การจัดย่อหน้าในเอกสาร HTML จะใช้คำสั่ง <p> เป็นคำสั่งที่สั่งให้โปรแกรมเว็บเบราเซอร์ขึ้นย่อหน้าใหม่ (paragraph)

คำสั่ง <p> จะเป็นการจัดเอกสารขึ้นบรรทัดใหม่เช่นเดียวกับการใช้คำสั่ง <br> แต่จะแตกต่างที่ช่องว่างระหว่างบรรทัดมากกว่าคำสั่ง <br>

และสามารถกำหนดหารเยื้องของข้อความในบรรทัดโดยใช้คำสั่ง <dd> วางหน้าข้อความที่ต้องการให้เยื้องหน้า หรือใช้ร่วมกับและมีการจัดย่อหน้า คำสั่ง <br>  หรือคำสั่ง <p> ได้

3 การจัดตำแหน่งในหน้าเอกสาร

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

การจัดตำแหน่งของเอกสารเพื่อการแสดงผลทางจอภาพ จะใช้คำสั่ง <p> และตามด้วยคุณสมบัติ (attribute) align ดังนี้

<p align=”left/right/center“> ข้อความ/รูปภาพ </p>

       การที่จะให้ข้อความหรือรูปภาพอยู่ชิดซ้าย กึ่งกลางและชิดขวานั้น จะต้องมีคุณสมบัติ (attribute) การจัดตำแหน่งของการแสดงผล ดังนี้

align = “left“      การกำหนดค่าของการจัดตำแหน่งการแสดงผลอยู่ทางซ้าย
align = “right“    การกำหนดค่าของการจัดตำแหน่งการแสดงผลอยู่ทางขวา
align = “center“ การกำหนดค่าของการจัดตำแหน่งการแสดงผลอยู่ตรงกลาง

 ในการจัดตำแหน่งการแสดงผลข้อความหรือรูปภาพให้อยู่กึ่งกลางของจอภาพ สามารถกำหนดด้วยคำสั่ง center ได้ จะแสดงผลเช่นเดียวกับคำสั่ง <p align=”center”> เขียนคำสั่งดังนี้

<center>..ข้อความ/รูปภาพ..</center>

4 การเว้นวรรค

เป็นคำสั่งช่วยให้เว้นวรรคระหว่างข้อความ เพราะปกติเบราเซอร์จะแสดงช่องว่างจากการเคาะ Space Bar เพียงช่องเดียวแม้ว่าจะเคาะหลายครั้ง ก็ตาม คำสั่งที่ใช้ในการเว้นวรรค คือ  

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

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

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

1.2. แบ่งตามการใช้งาน เช่น ใช้กับคำพูดหรือวลี ใช้กับข้อความที่สำคัญมาก

บรรทัดที่ 1 

บรรทัดที่ 2 

บรรทัดที่ 3 

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

คลิกเพื่อทดลองเขียนด้วยตัวเอง

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

รูปแบบของ Pre tag

 ..... 
คลิกเพื่อทดลองเขียนด้วยตัวเอง
3. คำสั่งแสดงสัญลักษณ์พิเศษต่างๆ
สัญลักษณ์พิเศษบางตัวเช่น เครื่องหมายมากว่า (>) หรือ เครื่องหมายน้อยกว่า (<) ซึ่งเครื่องหมายเหล่านี้ใช้ในภาษา HTML ด้วยทำให้ตัวอักษรที่อยู่ในเครื่องหมายเหล่านี้กลายเป็น Tag หมด หรือเครื่องหมายที่ไม่มีบนคีบอร์ด แต่ถ้าเราต้องการแสดงเครื่องหมายเหล่านี้เราต้องใช้ Entity Name แทน ตามแบบด้านล่าง



CharacterEntityName©©COPYRIGHT SIGN®®REGISTERED SIGN™™TRADE MARK SIGN>>GREATER-THAN SIGN<<LESS-THAN SIGN;;SEMICOLON&&AMPERSAND""QUOTATION MARK##NUMBER SIGN★★BLACK STAR☆☆WHITE STAR✓✓CHECK MARK✗✗BALLOT X SPACE←←LEFTWARDS ARROW↑↑UPWARDS ARROW→→RIGHTWARDS ARROW↓↓DOWNWARDS ARROW€€EURO SIGN▽▽WHITE DOWN-POINTING TRIANGLE∑∑N-ARY SUMMATION№№NUMERO SIGN℗℗SOUND RECORDING COPYRIGHT

list tag ใช้ในการจัดข้อมูลเป็นชุดๆ หรือเป็นหัวข้อ 
ซึ่งจะทำให้ข้อมูลอ่านได้ง่ายขึ้น ซึ่ง list แบ่งได้เป็น 2 แบบด้วยกัน
1. list แบบไม่มีลำดับ
เป็น list แบบง่ายดีสุดเหมาะสำหรับการนำเสนอข้อมูลที่ไม่มีลำดับเกี่ยวข้อง โดยมีรูปแบบดังนี้
รูปแบบ list แบบไม่มีลำดับ

     หัวข้อ
    
 ข้อมูล 1
    
 ข้อมูล 2

คลิกเพื่อทดลองเขียนด้วยตัวเอง
2. list แบบมีลำดับ
เป็น list แบบง่ายดีสุดเหมาะสำหรับการนำเสนอข้อมูลที่ไม่มีลำดับเกี่ยวข้อง โดยมีรูปแบบดังนี้
รูปแบบ list แบบมีลำดับ




     หัวข้อ
    
 ข้อมูล 1
    
 ข้อมูล 2

คลิกเพื่อทดลองเขียนด้วยตัวเอง
3. การใส่สัญลักษณ์ให้กับ list
การใส่สัญลักษณ์ให้กับ list เราจะเห็นสัญลักษณ์หน้า list อยู่แล้วซึ่งสัญลักษณ์ตัวนั้นสามารถเปลี่ยนแปลงได้โดยใช้ Attibuet คำสั่ง type มีรายละเอียดดังนี้

สัญลักษณ์ที่ใช้กับแบบไม่มีลำดับ
TYPEสัญลักษณ์discวงกลมทึบcircleวงกลมโปร่งใสsquareสี่เหลี่ยมทึบ
สัญลักษณ์ที่ใช้กับแบบมีลำดับ
TYPEสัญลักษณ์Aเรียงแบบ A,B,Caเรียงแบบ a,b,cIเรียงแบบเลขโรมัน I,II,IIIiเรียงแบบเลขโรมัน i,ii,iii
คลิกเพื่อทดลองเขียนด้วยตัวเอง
4. การใช้ list ซ้อน list
ในตัวอย่างจะเป็นการทำ list ซ้อน list ซึ่ง html จะเปลี่ยนสัญลักษณ์ให้อัตโนมัติ
คลิกเพื่อทดลองเขียนด้วยตัวเอง
5. list แบบให้คำจำกัดความ
Definition list เป็น list ที่ใช้กับการให้คำจำกัดความ ดังตัวอย่าง
คลิกเพื่อทดลองเขียนด้วยตัวเอง
list เป็นคำสั่งที่ใช้สำหรับการแสดงข้อมูลเป็นชุดๆ ซึ่งจะสะดวกและ อ่านข้อมูลได้ง่าย เป็นทางเลือกทางหนึ่งที่ดีในการใช้แสดงบทความ