บทที่ 3 [HTML] การตกแต่งข้อความ

[Admin]

จากคราวที่แล้ว ที่เราได้ฝีกใช้คำสั่ง <br> และ <hr> กันไปแล้ว คราวนี้เราจะมาศึกษาการตกแต่งตัวอักษร เนื่องจากเว็บไซต์คงไม่น่าสนใจ หากขาดสีสัน ซึ่งคำสั่งเกี่ยวกับการจัดตกแต่งตัวอักษรก็มีหลายคำสั่ง ในครั้งนี้ ขอยกตัวอย่างมาเล็กน้อย ซึ่งเป็นแท็กที่ใช้งานบ่อน


เรามาเริ่มจากแท็ก <font> กันเลยดีกว่า

<font> เป็นแท็กคู่ ซึ่งแท็กประเภทแท็กคู่นี้ จะต้องพิมพ์คร่อมข้อความที่ต้องการแสดง (ตัวอย่างด้านล่าง) คำสั่ง <font> ก็เช่นกัน เรามาดูคำสั่งเพิ่มเติม (Attribute) ของคำสั่งนี้กันเลยดีกว่า
size="n" โดย n เป็นขนาดของตัวอักษร มีตั้งแต่ -7 ซึ่งเล็กที่สุด ถึง 7 ซึ่งมีขนาดใหญ่ที่สุด
color ="0000ff" กำหนดสีของตัวอักษร ซึ่งต้องกำหนดเป็นรหัสเลขฐานสิบหก อย่างในตัวอย่าง กำหนดรหัส 0000ff
align = "center" กำหนดให้ตัวอักษรจัดกึ่งกลาง หากต้องการจัดชิดซ้าย ให้พิมพ์คำว่า left แทน แต่หากต้องการจัดชิดขวา ให้พิมพ์คำว่า right แทน
face = "Angsana New" กำหนด font ของตัวอักษร อย่างในตัวอย่าง กำหนดให้เป็น Angsana New


การใส่คำสั่งเพิ่มเติม (Attribute) ต้องใส่ในแท็กเปิด และสามารถใส่พร้อมกันได้มากกว่า 1 คำสั่ง เท่านั้น

คำสั่ง <i>...</i> จะเป็นคำสั่งตัวเอียง
คำสั่ง <u>...</u> จะเป็นคำสั่งขีดเส้นใต้
คำสั่ง <b>..</b> จะเป็นคำสั่งตัวหนา
คำสั่ง ^.. จะเป็นคำสั่งที่ทำให้เป็นตัวยก
คำสั่ง _.. จะเป็นคำสั่งที่ทำให้เป็นตัวห้อย

คำสั่ง <p align="center"> เป็นคำสั่งที่ใช้จัดตัวอักษร ภาพ หรืออื่นๆ ดังตัวอย่าง จะเป็นการจัดกึ่งกลาง ซึ่ง คำสั่งนี้ ให้ผลเหมือนกัน <font align="center"> จึงสามารถเลือกใช้ได้ทั้งสองคำสั่ง แล้วต่อความสะดวก

นอกจากนี้ ยังมีคำสั่งที่ใช้เปลี่ยนขนาดตัวอักษร อีกคำสั่งหนึ่ง คือ คำสั่ง <Hn>...</Hn> โดย n แทนตัวเลข โดย <h1> จะให้ตัวอักษรมีขนาดใหญ่สุด ส่วน <h7> จะทำให้ตัวอักษรมีขนาดเล็กสุด

ตัวอย่าง เช่น เราต้องการอักษรคำว่า "ยินดีต้อนรับเข้าสู่เว็บไซต์" ขนาด h2 สี 66aa66 จัดกึ่งกลาง ฟอนต์ Angsana New ทำให้เป็นตัวหนา และขีดเส้นใต้ คำสั่งที่ได้ก็จะเป็น
<h2><font color="66aa66" face="Angsana New"><p align="center"><b><u>ยินดีต้อนรับเข้าสู่เว็บไซต์</u></b></p></font></h2>




หมายเหตุ หากแท็กอยู่ติดๆกัน เราสามารถเรียงลำดับอย่างไรก็ได้ เช่น (Attribute) จะให้ผลเหมือนกับ <b><i>สวัสดีครับ</i></b>
แต่ เราต้องเรียงลำดับการปิดแท็กก่อนหลังให้ถูกต้อง เช่น <b><i>สวัสดีครับ</i></b> แต่หากพิมพ์ <b><i>สวัสดีครับ</b></i> จะถือว่าปิดแท็กผิดครับ เพราะแท็ก <b> และแท็ก <i> คร่อมกันอยู่