การตกแต่งตัวอักษร
รูปแบบแท็ก Code และการแสดงผล
1.การกำหนดแบบอักษร
<FONT FACE = "......."> … </FONT> การกำหนดรูปแบบของตัวอักษรในเว็บเพจที่เราต้องการให้แสดงออกบนเว็บ ตัวอย่างการใช้คำสั่ง
<html>
<head>
<title>การกำหนดขนาดตัวอักษร</title>
</head>
<body>
<font face="Cordiaupc">HTML</font><br>
<font face="Ms sans serif">HTML</font><br>
<font face="AngsanaUPC">HTML</font><br>
<font face="arial">HTML</font><br>
</body>
</html>
|
| ผลลัพธ์ HTML HTML HTML HTML |
2.ขนาดตัวอักษร
เราสามารถกำหนดขนาดของตัวอักษรได้ 2 วิธี
<H1>ขนาดใหญ่สุด</H1>
<H2>ขนาดใหญ่</H2>
<H3>ขนาดกลาง</H3>
<H4>ขนาดปกติ</H4>
<H5>ขนาดเล็ก</H5>
<H6>ขนาดเล็กสุด<H6>
2. ในกรณีทั่วไป จะใช้คำสั่ง <FONT SIZE=ค่าตัวเลข> เช่น
<FONT SIZE=3>ตัวอักษรขนาด 3</FONT> หรือ
<FONT SIZE=5>ตัวอักษรขนาด 5</FONT>
ตัวอย่างการใช้คำสั่ง
<HTML> <HEAD> <TITLE>FONT SIZE </TITLE> </HEAD> <BODY > <FONT SIZE="1">Computer</Font> <FONT SIZE="2">Computer</Font> <FONT SIZE="3">Computer</Font> <FONT SIZE="4">Computer</Font> <FONT SIZE="5">Computer</Font> <FONT SIZE="6">Computer</Font> <FONT SIZE="7">Computer</Font> </BODY> </HTML> |
| ผลลัพธ์ Computer Computer Computer Computer Computer ComputerComputer |
3.สีตัวอักษร
สีของตัวอักษร
สีของตัวอักษร สามารถกำหนดได้ 2 แนวทางคือ
<FONT COLOR=red>ตัวอักษรสีแดง</FONT> หรือ
<FONT COLOR=green>ตัวอักษรสีเขียว</FONT>
<FONT COLOR=#FF00FF>ตัวอักษรสีชมพู</FONT> หรือ
<FONT COLOR=#0000FF>ตัวอักษรสีน้ำเงิน</FONT>
ตัวอย่างการใช้คำสั่ง
<html>
<head><title> ....การหนดรูปแบบสีข้อความ....</title></head>
<body><font color = "red"> ข้อความนี้กำหนดให้เป็นสีแดง</font> <br>
<head><title> ....การหนดรูปแบบสีข้อความ....</title></head>
<body><font color = "red"> ข้อความนี้กำหนดให้เป็นสีแดง</font> <br>
<font color = "#0000ff"> ข้อความนี้กำหนดให้เป็นสีน้ำเงิน </font> <br>
</body>
</html>
</html>
4.ตัวเอียง ตัวหนา ตัวขีดเส้นใต้
คำสั่งจะแบ่งได้เป็น 2 พวกดังนี้
1.แบ่งตามลักษณะที่ปรากฏ เช่น ตัวเอียง ตัวหนา
<B> ตัวอักษรแบบตัวหนา (bold)
<I> ตัวอักษรแบบตัวเอน (italic)
<U> ตัวอักษรแบบขีดเส้นใต้ (underline)
2.แบ่งตามการใช้งาน เช่น ใช้กับคำพูดหรือวลี ใช้กับข้อความที่สำคัญมาก
<Em> <Stong> <Ins> <Del> <Code> <Address> ใช้เน้นข้อความ คำพูดหรือวลี (emphasized) ใช้เน้นข้อความที่สำคัญมากๆ (strong) ใช้เน้นข้อความที่แก้ไขเพิ่มเติม (inserted) ใช้บอกว่าข้อความนี้ถูกลบไปแล้ว (deleted) ใช้บอกว่าข้อความที่เป็นโปรแกรม (computer code) ใช้บอกว่าข้อความที่เป็นที่อยู่ (computer code)
5.ตัวขีดฆ่า ตัวยก ตัวห้อย
1. <s>...</s> ใช้แสดงข้อความแบบขีดฆ่าตัวอักษร ทั้งนี้เพื่อเน้นข้อความเปรียบเทียบหรือต้องการในประโยคนั้น
ตัวอย่างการใช้คำสั่ง
| <HTML> <HEAD> <TITLE> การกำหนดอักษรขีดเส้นใต้ </TITLE> </HEAD> <BODY> กำหนดอักษรขีดเส้นใต้ <BR>
<S>Microsoft Windows 7</S>
</BODY></HTML> |
| ผลลัพธ์ กำหนดอักษรขีดเส้นใต้ |
2. <SUP> … </SUP> และ <SUB> …</SUB> การกำหนดแบบอักษรตัวห้อยและแบบอักษรตัวยกในเว็บเพจนั้น เราสามารถกำหนดขนาดของตัวอักษรได้ดังนี้
ตัวอย่างการใช้คำสั่ง
<HTML> <HEAD> <TITLE>แบบอักษรตัวห้อยและแบบอักษรตัวยก </TITLE> </HEAD> <BODY >
Computer<SUP>2</SUP> <P>
H<SUB>2</SUB>O<P>
</BODY></HTML> |
| ผลลัพธ์ Computer2 H2O |
6.ตัวอักษณวิ่ง ตัวอักษรกระพริบ
1. <MARQUEE> .......... </MARQUEE>ใช้สำหรับแสดงข้อความแบบเคลื่อนที่ไปยังทิศทางที่เราต้องการ มีรูปแบบการใช้ดังน <marquee scrolldelay="ความเร็ว"
direction="ทิศทางวิ่ง">ข้อความ</marquee> - scrolldelay ให้แทนค่าด้วยความเร็วเป็น ตัวเลข ส่วน direction ใส่ได้เฉพาะ Up,Down,Left และ Right
ตัวอย่างการใช้คำสั่ง
<html>
<head> <title>marque</title> </head> <body> <center> <marquee scrolldelay="100" direction="Right">WEBTHAIDD</marquee> <marquee scrolldelay="100" direction="Left">WEBTHAIDD</marquee> <marquee scrolldelay="100" direction="Up">WEBTHAIDD</marquee> <marquee scrolldelay="100" direction="Down">WEBTHAIDD</marquee> </body> </html> |
2.<blink>...</blink> ใช้กำหนดแสดงข้อความแบบกระพริบ จะมีลักษณะการแสดงผลเป็นแบบติด - ดับ สลับกันไป
ตัวอย่างการใช้คำสั่ง
<HTML> <HEAD> <TITLE>กำหนดอักษรตัวกระพริบ </TITLE> </HEAD> <BODY> การกำหนดอักษรตัวกระพริบ <BR>
<Blink>COMPUTER</Blink>
</BODY></HTML> |
7.การจัดตำแหน่งข้อความ
1. การกำหนดให้อยู่ตำแหน่งกึ่งกลางด้วยแท็ก Center <center> ...ข้อความ...</center>
2. การกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก <p> โดยใช้ Attribute align รูปแบบดังนี้ <p align = "ตำแหน่ง"> ...ข้อความ...</p>
ตำแหน่งที่สามารถระบุได้ คือ left center หรือ right
2. การกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก <p> โดยใช้ Attribute align รูปแบบดังนี้ <p align = "ตำแหน่ง"> ...ข้อความ...</p>
ตำแหน่งที่สามารถระบุได้ คือ left center หรือ right
ไม่มีความคิดเห็น:
แสดงความคิดเห็น