การจัดวางเนื้อหาบนเว็บ

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

1. การตัดคำขึ้นบรรทัดใหม่ 

แท็ก เป็นคำสั่งที่กำหนดจุดสิ้นสุดของบรรทัด (break rule) แล้วทำการขึ้นบรรทัดใหม่เพื่อแสดงข้อความส่วนที่เหลือในบรรทัดถัดไป คำสั่งนี้จึงให้ผลเสมือนการกดคีย์ ENTER บนคีย์บอร์ดนั่นเอง

ข้อสังเกต

แท็ก ส่วนใหญ่มักนิยมจะวางไว้ในตำแหน่งสุดท้ายของประโยค โดยต้องการให้แสดงผลประโยคใหม่ในบรรทัดต่อมา

ตัวอย่างการใช้แท็ก 

<!DOCTYPE HTML>

<html>

<head>

<title>การตัดคำขึ้นบรรทัดใหม่</title>

</head>

<body>

การใช้งานคำสั่ง br ซึ่งเป็นคำสั่งที่ทำให้ข้อความขึ้นบรรทัดใหม่

</body>

</html>

ผลลัพธ์ที่ได้

2. การตัดคำขึ้นย่อหน้าใหม่ 

แท็ก เป็นแท็กที่สั่งให้โปรแกรมเว็บบราวเซอร์ขึ้นย่อหน้าใหม่ (paragraph) โดยจะมีการเว้นบรรทัดว่างไว้ 1 บรรทัด

รูปแบบแท็ก

ข้อความที่ต้องการขึ้นย่อหน้าใหม่

ตัวอย่างการใช้งานแท็ก 

<!DOCTYPE HTML>

<html>

<head>

<title>การตัดคำขึ้นย่อหน้าใหม่</title>

</head>

<body>

การใช้งานคำสั่ง p ซึ่งเป็นคำสั่งที่ทำให้ข้อความขึ้นย่อหน้าใหม่

</body>

</html>

ผลลัพธ์ที่ได้

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

3. การจัดวางตำแหน่งข้อความในย่อหน้า

เราสามารถจัดเรียงข้อความในแต่ละย่อหน้าของเว็บเพจได้ โดยการกำหนดตำแหน่งในแอตทริบิวต์ align (Alignment) ของแท็ก p ดังนี้

รูปแบบของแท็ก ข้อความ
ค่าที่กำหนด ตำแหน่งของการจัดวางข้อความได้แก่ left (ซ้าย), center (ตรงกลาง), right (ขวา) และ justify (จัดเต็มพื้นที่)

ตัวอย่างการใช้งานแท็ก

<!DOCTYPE HTML>

<html>

<head>

<title>การจัดตำแหน่งการตัดคำขึ้นย่อหน้าใหม่</title>

</head>

<body>

การจัดวางตำแหน่งข้อความในย่อหน้าด้านซ้าย

การจัดวางตำแหน่งข้อความในย่อหน้าตรงกลาง

การจัดวางตำแหน่งข้อความในย่อหน้าด้านขวา

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

</body>

</html>

ผลลัพธ์ที่ได้

4. การจัดวางตำแหน่งข้อความให้อยู่กึ่งกลาง <center>

รูปแบบของแท็ก <center>ข้อความ</center>

5. การจัดรูปแบบเอกสารตามที่กำหนด <pre>

เป็นการกำหนดให้แสดงข้อความที่อยู่ในย่อหน้าที่อยู่ในชุดคำสั่งดังกล่าว เหมือนกับที่พิมพ์ไม่ว่าจะเป็นการเว้นวรรค หรือขึ้นบรรทัดใหม่ แต่จะบังคับใช้ fixed width fonts

รูปแบบแท็ก <pre>ข้อความ</pre>

ตัวอย่างการใช้แท็ก pre (Preformatted)

<!DOCTYPE HTML>

<html>

<head>

<title>การใช้แท็ก pre (Preformatted)</title>

</head>

<body>

<pre>ข้อดีของ HTML คือ

สามารถใช้ได้กับเครื่องคอมพิวเตอร์ และระบบปฏิบัติการได้หลากหลายชนิด

</pre>

</body>

</html>

ผลลัพธ์ที่ได้

6. การสร้างเส้นคั่น<hr>

แท็ก <hr> เป็นแท็กที่แสดงเส้นขีดคั่นทางแนวนอน (horizontal rule) โดยอาจใช้เป็นเส้นแบ่งเนื้อหาระหว่างบท หรือเป็นเส้นขีดคั่นเพื่อความสวยงามและเป็นระเบียบของเนื้อหา เป็นการกำหนดเส้นคั่นซึ่งเป็นคำสั่งที่ไม่ต้องมีคำสั่งปิด (Single Tag)

รูปแบบแท็ก

<hr /> (เป็นแท็กว่างต้องปิดแท็กด้วย / หลังจากแท็กคำสั่ง)

แอตทริบิวต์ (Attribute)	คำอธิบาย	รูปแบบการใช้งาน
width	กำหนดความยาวของเส้นคั่น มีหน่วยเป็นพิกเซล หรือ %	<hr width=“50” /> หรือ <hr width=“50%” />
size	กำหนดความหนาของเส้นคั่น มีหน่วยเป็นพิกเซล หรือ %	<hr size=“50”> หรือ <hr size=“50%”>
noshade	กำหนดให้เส้นคั่นเป็นเส้นทึบ	<hr noshade=“noshade”>
align	กำหนดตำแหน่งของเส้นคั่นให้ตำแหน่งของการจัดวางข้อความได้แก่ left (ซ้าย), center (ตรงกลาง) right (ขวา)	<hr align=“left” /> <hr align=“right” /> <hr align=“center” />
color	การระบุสีเส้นคั่น แสดงผลเฉพาะ IE โดยสามารถใส่ชื่อสีหรือ #รหัสสีอย่างใดอย่างหนึ่ง	<hr color=“red” /> หรือ <hr color=“#f0f8ff” />