การจัดการข้อความ

คำสั่งที่ใช้ในส่วนของ body section ทั้งหมดโดยจะเป็นคำสั่งในส่วนของการจัดหน้า

1. คำสั่งที่ใช้ในการจัดย่อหน้า

คำสั่ง P นี้จะเพิ่มบรรทัดว่างก่อนและหลังตัวอักษรที่เราพิมพ์ไปโดยอัตโนมัติ ตามที่แสดงในตัวอย่าง

รูปแบบ p tag

Source Code

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

2. คำสั่งที่ใช้ในการขึ้นบรรทัดใหม่

การตัดบรรทัดใหม่นั้นปรกติ web browser จะทำการตัดให้อยู่แล้ว แต่การตัดคำของ web browser จะตัดเมื่อแสดงผลไม่ได้ แต่ถ้าเราใส่คำสั้ง <br> เข้าไป web browser จะตัดให้ทันที ซึ่งคุณอาจจำเป็นที่จะต้องตัดคำเป็นบรรทัดสั้นๆเช่น การเขียนกลอนดังตัวอย่าง

รูปแบบ br tag

Source Code

บรรทัดที่ 1 <br> บรรทัดที่ 2 <br> บรรทัดที่ 3 <br>

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

3. คำสั่งที่ใช้กับข้อความที่เป็นหัวเรื่อง

คำสั่ง h จะมีทั้งหมด 6 ลำดับด้วยกัน ไล่ตั้งแต่ h1, h2, h3 ,h4, h5, h6 ซึ่งขนาดของ h1 จะใหญ่ที่สุดดังตัวอย่างที่แสดง โดยเราจะใช้กับตัวอักษรที่ต้องการให้เป็นหัวเรื่องเพื่อให้อักษรนั้นโดดเด่นขึ้นมา จะสังเกตุได้ว่าเมื่อใช้ h tag จะตัดตัวอักษรที่ต่อจาก h tag เป็นบรรทัดใหม่อัตโนมัติ

รูปแบบ h tag

Source Code

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

4. คำสั่งที่ใช้ในการขึดเส้นคั่น

คำสั่งที่ใช้ในการขีดเส้นคั่น

รูปแบบ hr

Source Code

<p>เนื้อหาบทที่ 1</p> <hr> <p>เนื้อหาบทที่ 2</p> <hr>

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

5. คำสั่งที่ใช้ในการจัดตัวอักษรชิดซ้าย ชิดขวา หรือกึ่งกลาง

การจัดให้ตัวอักษรให้ชิดซ้าย ขวา หรือกึ่งกลาง เราจะใช้ Attributes ให้รายละเอียดของ tag โดยเราจะใช้ aling เพื่อบอกว่าให้ชิดซ้าย (align = 'left') ชิดขวา (align = 'right') และ จัดกึ่งกลาง (align = 'center')

รูปแบบ align

Source Code

<h3 align = 'left'>ชิดซ้าย</h3> <h3 align = 'right'>ชิดขวา</h3> <h3 align = 'center'>จัดเข้ากลาง</h3>

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

6. คำสั่งที่ใช้ในการเปลี่ยนสีพื้นหลัง

bgcolor เป็น Attributes อย่างหนึงเหมือนกันที่ใช้กำหนดสี คุณอาจเปลี่ยนจาก สีเขียว(green) เป็น เหลือง(yellow) หรือสีอื่นๆก็ได้

รูปแบบ bgcolor

Source Code

<body bgcolor ='green'> <h1> ดูสีพื้นหลัง </h1> </body>

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

7. การเขียนคำบรรยาย soure code

ในส่วนของคำบรรยาย soure code นั้นจะไม่แสดงที่ web browser เราเขียนเพื่อบรรยายว่า sorce code ส่วนนี้ใช้ทำอะไร เพื่อความสะดวกเมื่อกลับมาแก้ไข sorce code ในภายหลังเพราะเราอาจจำไม่ได้ว่าเราเขียนส่วนนี้ไว้เพื่ออะไร เพราะว่าจริงๆแล้ว soure code ที่เราใช้งานจริงนั้นจะมีมากมายหลายร้อยบรรทัด ถ้าเราไม่เขียนบรรยายไว้ก็ทำให้เสียเวลาในการหาส่วนที่เราต้องการจะแก้ไข

รูปแบบการเขียนคำบรรยาย source code

Source Code

<!-- คำบรรยาย source code --!>

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

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

1. คำสั่งที่ใช้ในการจัดลักษณะตัวอักษร

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

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

HTML

<B>

<I>

<S>

<Sub>

<Sup>

<U>

รูปแบบที่แสดง

ตัวอักษรแบบตัวหนา (bold)

ตัวอักษรแบบตัวเอน (italic)

ตัวอักษรแบบตัวขีดฆ่า (strike)

ตัวอักษรแบบตัวห้อย (subscripted)

ตัวอักษรแบบตัวยก (superscripted)

ตัวอักษรแบบขีดเส้นใต้ (underline)

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

HTML

<Em>

<Stong>

<Ins>

<Del>

<Code>

รูปแบบที่แสดง

ใช้เน้นข้อความ คำพูดหรือวลี (emphasized)

ใช้เน้นข้อความที่สำคัญมากๆ (strong)

ใช้เน้นข้อความที่แก้ไขเพิ่มเติม (inserted)

ใช้บอกว่าข้อความนี้ถูกลบไปแล้ว (deleted)

ใช้บอกว่าข้อความที่เป็นโปรแกรม (computer code)

ใช้บอกว่าข้อความที่เป็นที่อยู่ (computer code)

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

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

2. คำสั่งที่ทำให้รูปแบบตัวอักษรใน soure code เหมือนกับที่แสดงผล

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

รูปแบบของ Pre tag

Source Code

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

3. คำสั่งแสดงสัญลักษณ์พิเศษต่างๆ

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