การเเต่งตัวอักษร HTML
การกำหนดแบบตัวอักษร (Font)
ในเอกสาร HTML ถ้าเราไม่ได้กำหนดแบบตัวอักษร เมื่อแสดงบนบราวเซอร์ จะแสดงตัวอักษรที่เป็น ค่าพื้นฐาน (Default) หากเราต้องการกำหนดแบบตัวอักษรเอกสามารถทำได้โดยใช้ Tag<font>
เราจะใช้ <FONT FACE> เป็นการกำหนดชนิดของตัวอักษร ชื่อชนิดของตัวอักษรจะใช้ตามชื่อของโปรแกรม Word เมื่อเราพิมพ์ข้อความเสร็จจะจบด้วย </FONT> เสมอ
อธิบายคำสั่ง
<FONT FACE="ชื่อฟ้อนต์ที่ใช้"> เป็นคำสั่งที่ใช้กำหนดฟ้อนต์ที่จะใช้ในเว็บเพจ
</FONT> เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ
รูปแบบการใช้คำสั่ง
<font face="ชื่อแบบตัวอักษรที่ต้องการ">.............ข้อความ............</font>
ตัวอย่าง
การแสดงผล
การกำหนดขนาดตัวอักษร
เราสามารถกำหนดขนาดของมันเองได้ถึง 7 ระดับ โดยกำหนดได้ด้วยตัวเลขเลยหรือแบบที่2 กำหนดโดยใส่ค่า +/- แล้วกำหนดระดับอีกที
รูปแบบการใช้คำสั่ง
<FONT Size="......">......</FONT>
ตัวอย่าง
การแสดงผล
การกำหนดสีตัวอักษร
การกำหนดสีตัวอักษร สามารถกำหนดให้เป็นสีเดียวกันทั้งเวบเพจ หรือกำหนดให้มีสีที่แตกต่างกันในเว็บเพจเดียวกันก็ได้
เราสามารถกำหนดค่าสีได้ 2 แบบ คือ
1. สี="#xxxxxx" ระบุเป็นเลขฐาน 16 (0-9 หรือ A-F โดย 0 มีค่าสีน้อยที่สุด และ F มีค่าสีมากที่สุด) ทั้งหมด 3 ชุด 1 ชุดแทนด้วยตัวอักษร 2 ตัว
แสดงค่าของแม่สี แดง เขียว นํ้าเงิน (RGB)โดยเขียนตามหลังเครื่องหมาย #
เช่น"#FFFFFF" จะให้ สีขาว ,"#000000" จะให้ สีดำ
2. สี=color ระบุสีลงไปเลย เช่น white,black,blue,red
อธิบายคำสั่ง
<FONT COLOR="ชื่อสี"> เป็นคำสั่งที่ใช้กำหนดสีให้กับตัวอักษรที่จะใช้ในเว็บเพจ
</FONT> เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ
รูปแบบการใช้คำสั่ง
<font color="#0000FF">Thanasarun</font>
ตัวอย่าง
การแสดงผล
การกำหนดลักษณะและแบบของตัวอักษร
เป็นการกำหนดลักษณะตัวอักษรแบบเจาะจงไม่ว่าจะแสดงบนบราวเซอร์ใด ก็จะแสดงผลเหมือนกัน เช่น การกำหนดให้ตัวอักษรเป็นตัวหนา ตัวเอียง ตัวขีดฆ่า ตัวขีดเส้นใต้ แสดงแบบเลขยกกำลังในสูตรทางคณิตศาสตร์ หรือแสดงแบบตัวห้อยในสูตรทางวิทยาศาสตร์ เป็นต้น
อธิบายคำสั่ง
<B>...</B>
เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเข้ม
<I>...</I>
เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเอียง
<S>...</S>
เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดฆ่า
<U>...</U>
เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดเส้นใต้
<STRIKE>.....</STRIKE>
เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดฆ่า
<SUP>...</SUP>
เป็นคำสั่งที่ใช้กำหนดรูปแบบ Super Script
<SUB>...</SUB>
เป็นคำสั่งที่ใช้กำหนดรูปแบบ Sub Script
รูปแบบการใช้คำสั่ง
แบบตัวอักษร โค้ท
ตัวอักษรปกติ ไม่ต้องใส่โค้ท
ตัวหนา <B>.....</B>
ตัวเอียง <i>.....</i>
ตัวขีดเส้นใต้ <U>.....</U>
ตัวอักษรขีดฆ่า <STRIKE>.....</STRIKE>
ตัวอักษรยกกำลัง <SUP>.....</SUP>
ตัวอักษรห้อย <SUB>.....</SUB>
ตัวอย่าง แบบ ตัวอักษรปกติ,ตัวหนา,ตัวเอียง, ,ตัวอักษรขีดฆ่า,ตัวอักษรยกกำลัง,ตัวอักษรห้อย
การแสดงผล
การทำตัวอักษรวิ่ง
นอกจากเราจะใช้ตัวอักษรปกติที่กำหนดให้วางไว้ตำแหน่งใด ๆ ของเว็บเพจ ซึ่งก็อยู่ตรงนั้นตลอดเวลา เราสามารถกำหนดให้ตัวอักษรเคลื่อนที่ได้อีกด้วย ทั้งเคลื่อนจากซ้ายไปขวา เคลื่อนที่จากขวาไปซ้าย เคลื่อนที่จากข้างล่างขึ้นข้างบน หรือเคลื่อนที่จากข้างบนลงข้างล่าง ซึ่งเทคนิคนี้มีหลาย ๆ เว็บไซต์นำไปใช้ในการตกแต่งเวบเพจ
รูปแบบคำสั่ง HTML ที่ใช้ในการทำตัวอักษรวิ่ง
<MARQUEE direction="ทิศทางการวิ่ง" width="ความกว้าง" height="ความสูง"
scrollamount=ความเร็วในการวิ่ง scrolldelay="เวลาหน่วง">ข้อความ</MARQUEE>
หมายเหตุ ใช้ได้เฉพาะ Internet Explorer
ตัวอย่าง
การแสดงผล
การทำตัวอักษรกระพริบ
ใช้กำหนดแสดงข้อความแบบกระพริบ จะมีลักษณะการแสดงผลเป็นแบบติด - ดับ สลับกันไป
หมายเหตุ ในการกำหนดตัวอักษรกระพริบนั้น เราไม่สามารถเปิดในโปรแกรมเว็บเบราเซอร์ที่เป็น Internet Explorer ได้ (สามารถใช้ได้กับ Netscape )
รูปแบบคำสั่ง
<BLINK>..........</BLINK>
ตัวอย่าง
การแสดงผล
การขึ้นย่อหน้าใหม่ และกำหนดตำแหน่งข้อความ (Paragraph)
ในการจัด Paragraph ของข้อความ จะใช้ tag <p> สามารถกำหนดการจัดวางตำแหน่งข้อความว่าจะชิดซ้าย / ขวา / กึ่งกลาง ด้วย attribute align และเมื่อแสดงผลแล้วจะขึ้นบรรทัดใหม่ให้อัตโนมัติ
รูปแบบคำอธิบาย
LEFT จัดชิดซ้าย
CENTER จัดกึ่งกลาง
RIGHT จัดชิดขวา
รูปแบบการใช้คำสั่ง
<p align="left | center | right |justify">...</p>
ตัวอย่าง
การแสดงผล
แหล่งที่มา วันที่ 12/07/2012 เวลา 12.22 นาที
-http://www.pyayam.com/html/font_blink.php
-http://html-language.blogspot.com/2009/05/html.html
-http://school.obec.go.th/krurenu/html/p2-4.html
-http://school.obec.go.th/krurenu/html/p2-2.html
ไม่มีความคิดเห็น:
แสดงความคิดเห็น