html: การแต่งตัวอักษร

การแต่งตัวอักษร

การกำหนดแบบอักษร

เมื่อคุณใส่ tag ลงไปข้อความเหล่านั้นก็จะเปลี่ยนเป็นแบบมี่คุณเลือก

<body>
สวัสดีจ้า ทุกคน
สวัสดีจ้า ทุกคน
สวัสดีจ้า ทุกคน
</body>

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



<S>




ตัวอักษรแบบตัวหนา (bold)
ตัวอักษรแบบตัวเอียง (italic)
ตัวอักษรแบบตัวขีดฆ่า (strike)
ตัวอักษรแบบตัวห้อย (subscripted)
ตัวอักษรแบบตัวยก (superscripted)
ตัวอักษรแบบขีดเส้นใต้ (underline)

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


<Stong>
<Ins>
<Del>
<Code>
<Address>

ใช้เน้นข้อความ คำพูดหรือวลี (emphasized)
ใช้เน้นข้อความที่สำคัญมากๆ (strong)
ใช้เน้นข้อความที่แก้ไขเพิ่มเติม (inserted)
ใช้บอกว่าข้อความนี้ถูกลบไปแล้ว (deleted)
ใช้บอกว่าข้อความที่เป็นโปรแกรม (computer code)
ใช้บอกว่าข้อความที่เป็นที่อยู่ (computer code)

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

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

รูปแบบของ Pre tag

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

ขนาดตัวอักษร

สามารถกำหนดขนาดของตัวอักษรได้ 2 วิธี

1. ในกรณีที่เป็นหัวข้อ (Heading) สามารถใช้คำสั่งต่อไปนี้

<H1>ขนาดใหญ่สุด</H1>
<H2>ขนาดใหญ่</H2>
<H3>ขนาดกลาง</H3>
<H4>ขนาดปกติ</H4>
<H5>ขนาดเล็ก</H5>
<H6>ขนาดเล็กสุด<H6>

2. ในกรณีทั่วไป จะใช้คำสั่ง เช่น

ตัวอักษรขนาด 3 หรือ
ตัวอักษรขนาด 5

ตัวอย่างโค้ด

<html>
<head><title>webthaidd</title></head>
<body>
แสดงข้อความที่มีขนาด n=1 
แสดงข้อความที่มีขนาด n=2 
แสดงข้อความที่มีขนาด n=3 
แสดงข้อความที่มีขนาด n=4 
แสดงข้อความที่มีขนาด n=5 
แสดงข้อความที่มีขนาด n=6 
แสดงข้อความที่มีขนาด n=7 
</body>
</html>

ผลที่ได้

สีตัวอักษร

การใส่สีอักษร

รูปแบบคำสั่ง : .....ข้อความ...... . [ตารางค่ารหัสสี]

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

ตัวอย่าง : การตกแต่งสีอักษร

รูปแบบคำสั่ง

การแสดงผล

<HTML>
<HEAD>
<TITLE> การใส่สีอักษร</TITLE>
</HEAD>
<BODY bgcolor=white>

อักษรสีแดง 
 อักษรสีน้ำเงิน 
 อักษรสีฟ้า

</BODY>
</HTML>

อักษรสีแดง
อักษรสีน้ำเงิน
อักษรสีฟ้า

ตัวเอียง ตัวหนา ขีดเสีนใต้

รูปแบบคำสั่ง :...ข้อความ..... :คำสั่งตัวหนา
...ข้อความ..... :คำสั่งตัวเอียง...ข้อความ..... :คำสั่งขีดเส้นใต้

: คำอธิบาย : เมื่อเราต้องการทำให้ตัวอักษรหนา เอียง หรือขีดเส้นให้ ให้นำคำสั่งข้างต้นไปคร่อม ข้อความนั้นไว้ อย่างเช่น ต้องการแต่งคำว่า "สุระ วรรณแสง" ให้เอียงและหนา ให้ทำดังนี้ : การเขียนเว็บเพจด้วยภาษา HTML ผลลัพธ์ที่ได้คือ การเขียนเว็บเพจด้วยภาษา HTML

ตัวอย่าง : ทดสอบการทำตัวอักษรหนา,เอียง,ขีดเส้นใต้

รูปแบบคำสั่ง

การแสดงผล

<HTML>
<HEAD>
<TITLE> การใส่สีอักษร</TITLE>
</HEAD>
<BODY bgcolor=white>

ข้อความหนา ข้อความเอียง ข้อความขีดเส้นใต้ 
ข้อความหนา+เอียง 
ข้อความหนา+เอียง+ขีดเส้นใต้ 
ข้อความเอียง+ขีดเส้นใต้ 
ข้อความขีดเส้นใต้+หนา

</BODY>
</HTML>

ข้อความหนา
ข้อความเอียง
ข้อความขีดเส้นใต้
ข้อความหนา+เอียง
ข้อความหนา+เอียง+ขีดเส้นใต้
ข้อความเอียง+ขีดเส้นใต้
ข้อความขีดเส้นใต้+หนา

ตัวอักษรวิ่ง ตัวอักษรกระพริบ

ตัวอักษรกระพริบ

เป็นคำสั่งที่ใช้กำหนดตัวอักษรที่อยู่ใน Tag เกิดการกระพริบ ซึ่งคำสั่งนี้จะใช้ได้กับ Browser ของ Netscape เท่านั้น
รูปแบบคำสั่ง
<BLINK>......</BLINK>

ตัวอย่างการใช้คำสั่ง

<HTML>
<HEAD>
<TITLE>ตัวอักษรกระพริบ</TITLE>
</HEAD>
<BODY> <BLINK>welcome</BLINK>
</BODY>
</HTML>

การแสดงผล

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

รูปแบบคำสั่ง HTML ที่ใช้ในการทำตัวอักษรวิ่ง
<MARQUEE direction="ทิศทางการวิ่ง" width="ความกว้าง" height="ความสูง"
scrollamount=ความเร็วในการวิ่ง scrolldelay="เวลาหน่วง">ข้อความ</MARQUEE>

ทิศทางการวิ่ง

ทิศทาง	คำอธิบาย
UP	วิ่งจากด้านล่างขึ้นด้านบน
DOWN	วิ่งจากด้านบนลงด้านล่าง
LEFT	วิ่งจากด้านขวาไปด้านซ้าย
RIGHT	วิ่งจากด้านซ้ายไปด้านขวา

ตัวอย่างโปรแกรม

<HTML>
<HEAD>
<TITLE>การทำตัวอักษรวิ่ง</TITLE>
</HEAD>
<BODY>
<marquee>ราชธานีเก่า เมืองอู่ข้าว อู่น้ำ เลิศล้ำกานต์์กวี คนดีศรีอยุธยา </marquee>
</BODY>
</HTML>

ผลลัพธ์ที่ได้
ราชธานีเก่า เมืองอู่ข้าว อู่น้ำ เลิศล้ำกานต์กวี คนดีศรีอยุธยา

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

ในการกำหนดตำแหน่งในภาษา HTML สามารถกำหนดได้หลายรูปแบบค่ะ ทั้งแบบกำหนดเป็นแท็ก และการกำหนดเป็น Attribute ของแท็กค่ะ โดยมีรูปแบบดังนี้ค่ะ

1. การกำหนดให้อยู่ตำแหน่งกึ่งกลางด้วยแท็ก Center <center> ...ข้อความ...</center>
 2. การกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก โดยใช้ Attribute align รูปแบบดังนี้
 ...ข้อความ...
 ตำแหน่งที่สามารถระบุได้ คือ left center หรือ right

รูปแบบการจัดตำแหน่งข้อความ

<html>
 <head><title> ....การจัดตำแหน่งข้อความ....</title></head>
 <body>
 <center> ข้อความนี้อยู่กึ่งกลาง</center> 
  ข้อความชิดซ้าย  
 <p align = "center"> ข้อความนี้อยู่กึ่งกลาง  
 <p align = "right"> ข้อความนี้ชิดขวา  
 </body>
 </html>

นอกจาก คำสั่ง align ทั้งสามแบบแล้ว ยังมีการจัดตำแหน่งอีกแบบหนึ่งค่ะ นั้นก็คือ

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

อ้างอิง

http://www.hellomyweb.com/index.php/main/content/14

http://www.webthaidd.com/html/webthaidd_article_387_.html

http://www.bkk2.in.th/Topic.aspx?TopicID=7177

http://www.bkk2.in.th/Topic.aspx?TopicID=7179