พื้นฐาน HTML

คำสั่งในการจัดหน้า

จัดหน้ากระดาษด้วยคำส้่ง HTML

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

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

รูปแบบ p tag

<p> ย่อหน้าที่ 1 </p>
<p> ย่อหน้าที่ 2 </p>
<p> ย่อหน้าที่ 3 </p>

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


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

รูปแบบ br tag

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

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


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

รูปแบบ h tag

<h1>head 1</h1>
<h2>head 2</h2>
<h3>head 3</h3>
<h4>head 4</h4>
<h5>head 5</h5>
<h6>head 6</h6>

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


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

รูปแบบ hr

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

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


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

รูปแบบ align

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

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


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

รูปแบบ bgcolor

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

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


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

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

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

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


เลื่อนขึ้นด้านบน