หน่วยที่ 3(ตอน 1)

การจัดตัวอักษรและข้อความ

ผลการเรียนรู้

เข้าใจและปฏิบัติการเขียนเว็บเพจ การจัดตัวอักษรและตกแต่งข้อความได้

จุดประสงค์

- อธิบายการจัดตัวอักษรและตกแต่งข้อความได้

- ปฏิบัติการเขียนเว็บเพจ การจัดตัวอักษรและตกแต่งข้อความได้

การจัดและตกแต่งข้อความ

หลังจากที่ได้เรียนรู้เกี่ยวกับการกำหนดค่าพื้นฐานให้กับเว็บเพจแล้ว การแสดงตัวอักษรหรือข้อความบนหน้าเว็บเพจ จำเป็นต้องจัดและปรับแต่งรูปแบบของข้อความหรือตัวอักษรให้มี ความโดดเด่นมากขึ้นกว่าการแสดงตัวอักษรปกติ ไม่ว่าจะเป็นความหนา ความเอียง การขีดเส้นใต้ การเลือกรูปแบบตัวอักษร การปรับเปลี่ยนขนาดตัวอักษร การแสดงตัวอักษรสีต่าง ๆ รวมทั้งตัวอักษรลักษณะพิเศษที่ไม่สามารถพิมพ์เข้าไปด้วยแป้นพิมพ์ได้ บทนี้นักเรียนจึงต้องศึกษา วิธีการจัดและตกแต่งข้อความเพื่อการนำเสนอเว็บเพจที่น่าสนใจและสวยงามมากขึ้น

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

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

รูปแบบการใช้งาน

ชื่อแท็ก P

รูปแบบ <p>ข้อความที่ต้องการจัดพารากราฟ</p>

ตัวอย่าง <p>การจัดพารากราฟ คือ การแบ่งประโยคแต่ละประโยคออกจากกันและเริ่มประโยค

ที่บรรทัดใหม่</p>

การนำไปใช้

การกำหนดพารากราฟของข้อความ สามารถทำได้ดังนี้

<body>

ประโยคก่อนกำหนดพารากราฟ

<p>การจัดพารากราฟ คือ การแบ่งประโยคแต่ละประโยคออกจากกันและเริ่มประโยคที่บรรทัดใหม่</p>

ประโยคหลังกำหนดพารากราฟ

</body>

2. การตัดข้อมูลขึ้นบรรทัดใหม่

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

รูปแบบการใช้งาน

ชื่อแท็ก BR

รูปแบบ <br>ข้อความที่ต้องการให้ขึ้นบรรทัดใหม่

ตัวอย่าง <br>การจัดข้อความให้ขึ้นบรรทัดใหม่ด้วยแท็ก br จะไม่มีแท็กปิดถ้าเผลอมีจะเป็นการ

ขึ้นบรรทัดใหม่สองครั้ง

การนำไปใช้

การกำหนดให้ข้อความขึ้นบรรทัดใหม่ สามารถทำได้ดังนี้

<body>

…………เหนื้อหา ............. <br>การจัดข้อความให้ขึ้นบรรทัดใหม่ด้วยแท็ก BR จะไม่มีแท็กปิด

ถ้าเผลอมีจะเป็นการขึ้นบรรทัดใหม่สองครั้ง

</body>

3. การกำหนดหัวเรื่อง

การกำหนดตัวเรื่องเป็นการกำหนดขนาดให้ตัวอักษรให้มีขนาดใหญ่เล็กแตกต่างกันไปตามความต้องการเน้นข้อความนั้นให้เด่นชัดมากขึ้น สามารถกำหนดได้ 6 ระดับ สามารถทำได้ดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก Hx

รูปแบบ <hx>หัวเรื่อง</hx>

ตัวอย่าง <h4> x เป็นตัวเลขที่กำหนดค่าระดับให้กับหัวเรื่อง มีทั้งหมด 6 ระดับ </h4>

การนำไปใช้

การกำหนดขนาดของหัวเรื่อง สามารถทำได้ดังนี้

<body> <h1>ประพฤติดี เรียนเด่น กีฬาดัง สร้างงานได้</h1>

<h2>ประพฤติดี เรียนเด่น กีฬาดัง สร้างงานได้</h2>

<h3>ประพฤติดี เรียนเด่น กีฬาดัง สร้างงานได้</h3>

<h4>ประพฤติดี เรียนเด่น กีฬาดัง สร้างงานได้</h4>

<h5>ประพฤติดี เรียนเด่น กีฬาดัง สร้างงานได้</h5>

<h6>ประพฤติดี เรียนเด่น กีฬาดัง สร้างงานได้</h6>

</body>

นอกจากนี้ยังสามารถเพิ่มและลดขนาดของหัวเรื่อง โดยใช้เครื่องหมาย + หรือ - นำหน้าตัวเลขของการกำหนด หัวเรื่องได้อีก ทำได้ดังนี้

<body>

<h+1>ประพฤติดี เรียนเด่น กีฬาดัง สร้างงานได้</h+1>

<h-3>ประพฤติดี เรียนเด่น กีฬาดัง สร้างงานได้</h-3>

<h+4>ประพฤติดี เรียนเด่น กีฬาดัง สร้างงานได้</h+4>

<h-6>ประพฤติดี เรียนเด่น กีฬาดัง สร้างงานได้</h-6>

</body>

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

ปกติข้อมูลในเว็บเพจจะถูกแสดงชิดซ้ายหรือเริ่มแสดงจากซ้ายมือไปทางด้านขวามือเสมอ แต่ถ้าต้องการจัดให้ข้อมูลแสดงตำแหน่งกึ่งกลางของหน้าเว็บเพจ ถึงแม้จะเปลี่ยนแปลงขนานของบราวเซอร์ ข้อมูลก็ยังถูกแสดงอยู่กึ่งกลางหน้าของเว็บเพจเสมอ ข้อมูลที่ต้องการจัดตำแหน่งให้อยู่กึ่งกลางหน้า อาจจะเป็นตัวอักษรรูปภาพหรืออะไรก็ตามบนหน้าเว็บเพจ ให้แสดงไว้ตรงกลางของ แท็ก <center>…</center> สามารถทำได้ดังนี้

รูปแบบการใช้งาน

ชื่อแท็ก CENTER

รูปแบบ <center>ข้อความที่ต้องการจัดตำแหน่ง</center>

ตัวอย่าง <center> จัดข้อความให้อยู่กึ่งกลาง</center>

การนำไปใช้

การกำหนดให้ข้อมูลจัดกึ่งกลาง สามารถทำได้ดังนี้

<body>

<center>ข้อความ หรือรูปภาพที่ต้องการให้แสดงกึ่งกลางหน้าเว็บเพจ</center>

</body>

นอกจากสามารถจัดกึ่งกลางหน้าเว็บเพจแล้ว ยังสามารถกำหนดให้แสดงชิดขวาของหน้าเว็บได้ด้วย แท็ก <right> หรือจัดให้อยู่ชิดซ้ายด้วยแท็ก <left> การกำหนดให้ข้อมูลชิดซ้ายและขวา สามารถทำได้ดังนี้

การนำไปใช้

<body>

<left>ข้อความหรือรูปภาพที่ต้องการให้แสดงชิดซ้าย </left>

<right>ข้อความหรือรูปภาพที่ต้องการให้แสดงชิดขวา </right>

</body>

5. การจัดตำแหน่งพารากราฟ

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

รูปแบบการใช้งาน

ชื่อแท็ก ALIGN

รูปแบบ <p align รูปแบบที่ต้องการ>ข้อความที่ต้องการจัดชิดขอบ</P>

ตัวอย่าง <p align= center>รูปแบบการจัดมี 3 รูปแบบคือ center

จัดกึ่งกลาง, left จัดชิดซ้าย, right จัดชิดขวา</p>

การนำไปใช้

การจัดตำแหน่งของพารากราฟ สามารถทำได้ดังนี้

<body>

<p align= center>รูปแบบการจัดพารากราฟให้อยู่กึ่งกลางด้วย center</p>

<p align= left>รูปแบบการจัดพารากราฟให้อยู่ชิดซ้ายด้วย left (ไม่กำหนดก็ได้)</p>

<p align= right> รูปแบบการจัดพารากราฟให้อยู่ชิดขวาด้วย right</P>

</body>

6. การจัดเอกสารตามที่กำหนด

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

รูปแบบการใช้งาน

ชื่อแท็ก PRE

รูปแบบ <pre>ข้อความที่ต้องการจัด</pre>

ตัวอย่าง <pre> ประพฤติดี เรียนเด่น

กีฬาดัง สร้างงานได้

</pre>

การนำไปใช้

การจัดตำแหน่งของข้อความหรือเอกสารตามที่กำหนด สามารถทำได้ดังนี้

<body>

<pre> “….. ใครน๊ะที่รักฉัน

ใครกันที่เฝ้าห่วงหา

ใครที่จริงใจตลอดมา

อยากรู้ไหมว่าคือใคร...แม่....” </pre>

</body>

7. รูปแบบตัวอักษรของตัวอย่าง

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

รูปแบบการใช้งาน

ชื่อแท็ก SAMP

รูปแบบ <samp>ข้อความที่ต้องการยกตัวอย่าง</samp>

ตัวอย่าง คำขวัญของเราคือ <samp> ประพฤติดี เรียนเด่น

กีฬาดัง สร้างงานได้

</samp>

การนำไปใช้

การยกตัวอย่างของข้อความ สามารถทำได้ดังนี้

<body> คำขวัญอำเภอนางรอง คือ

<samp>

“เมืองโบราณนานเนา มะพร้าวเผาน้ำตาลหวาน ศาลหลักเมืองศักดิ์สิทธิ์

เศรษฐกิจก้าวหน้า ขาหมูรสดี มีภาษานางรอง” </samp>

</body>

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

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

รูปแบบการใช้งาน

ชื่อแท็ก XMP

รูปแบบ <xmp>แท็กตัวอย่าง</xmp>

ตัวอย่าง <xmp>แท็ก<body>…</body>เป็นแท็กที่ใช้แสดงข้อความ

รูปภาพบนหน้าเว็บเพจตามที่ต้องการ

</xmp>

การนำไปใช้

การยกตัวอย่างแท็กในภาษา HTML บนหน้าเว็บเพจ สามารถทำได้ดังนี้

<body>

<xmp>

แท็ก<body>…</body>เป็นแท็กที่ใช้แสดงข้อความ รูปภาพบนหน้าเว็บเพจตามที่

ต้องการ ซึ่งถูกจัดให้อยู่ระหว่างแท็ก <html>…</html> </xmp>

</body>

9. การกั้นระยะซ้ายขวาหน้าเว็บเพจ

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

รูปแบบการใช้งาน

ชื่อแท็ก BLOCKQUOTE

รูปแบบ <blockquote> ข้อความหรือเนื้อหาทั้งหมด</blockquote>

ตัวอย่าง <blockquote> ประโยคภาษาไทยยาว ๆ </blockquote>

การนำไปใช้

การกั้นหน้าซ้ายและขวาให้กับเอกสาร สามารถทำได้ดังนี้

<body>

<blockquote> ประเทศไทยมีสถานที่ท่องเที่ยวที่มีชื่อเสียงมากมาย ทั้งที่เป็นป่าเขา

ลำเนาไพรและธรรมชาติใต้ท้องทะเลโดยเฉพาะทะเลไทย เป็นที่ยอมรับกันทั่วไป

ว่ามีความงดงามอุดมสมบูรณ์และน่าอัศจรรย์ยิ่งนัก น้ำทะเลสีเขียวใสสะอาดหาดทรายขาว

เป็นแนวยาวลัดเลาะชายฝั่งและแหล่งดำน้ำใต้ท้องทะเลสีครามซึ่งแบ่งออกเป็น 2 ฝั่ง

คือ ฝั่งทะเลอันดามันและฝั่งอ่าวไทย</blockquote>

</body>