การแต่งตัวอักษร
การกำหนดแบบอักษร
ในเอกสาร HTML ถ้าเราไม่ได้กำหนดแบบตัวอักษร เมื่อแสดงบนบราวเซอร์ จะแสดงตัวอักษรที่เป็น ค่าพื้นฐาน (Default) หากเราต้องการกำหนดแบบตัวอักษรเอกสามารถทำได้โดยใช้ Tag<font>
ตัวอย่างแท็ก
<HTML>
<HEAD>
<TITLE> การกำหนด Font ที่จะใช้ในเว็บเพจ </TITLE>
</HEAD>
<BODY>
<FONT FACE="AngsanaUPC">
นี่คือ Font แบบ AngsanaUPC <BR> </FONT>
<FONT FACE="JasmineUPC">
นี่คือ Font แบบ JasmineUPC<BR>
</FONT>
<FONT FACE="IrisUPC">
นี่คือ Font แบบ IrisUPC <BR>
</FONT>
</BODY>
การแสดงผล
นี่คือ Font แบบ AngsanaUPC
นี่คือ Font แบบ JasmineUPC
นี่คือ Font แบบ IrisUPC
ขนาดตัวอักษร
เป็นส่วนของคำสั่งTagที่เป็นตัวกำหนดตัวอักษรให้มีความหนาและขนาดตัวอักษรให้มีความแตกต่าง
จากอักษรปกติกล่าวคือเป็นส่วนที่จะทำให้หัวเรื่องมีความแตกต่างจากอักษรปกติเพราะหัวเรื่องจะต้องเป็นส่วนที่มีจุดเด่นมากที่สุดซึ่งคำสั่ง<Hx>จะมีขนาดของตัวอักษร อยู่ 6 ขนาด ตือ ขนาดใหญ่สุด
คือ <H1>( ใช้มาก )และเล็กที่สุดคือ<H6> (ใช้น้อย )
รูปแบบคำสั่ง
<Hx>........<Hx> โดยที่ x คือค่าตัวเลขตั่งแต่ 1 ถึง 6
ตัวอย่างแท็ก
<HTML>
<HEAD>
<TITLE> การกำหนดหัวเรื่อง</TITLE>
</HEAD>
<BODY> <H1> การกำหนดหัวเรื่องH1 < /H1>
<H2> การกำหนดหัวเรื่องH2< /H2 >
<H3> การกำหนดหัวเรื่องH3</H3>
<H4> การกำหนดหัวเรื่องH4</H4>
<H5> การกำหนดหัวเรื่องH5</H5>
<H6> การกำหนดหัวเรื่องH6</H6> นี่คือตัวอักษรปกติ
</BODY>
</HTML>
<TITLE> การกำหนดหัวเรื่อง</TITLE>
</HEAD>
<BODY> <H1> การกำหนดหัวเรื่องH1 < /H1>
<H2> การกำหนดหัวเรื่องH2< /H2 >
<H3> การกำหนดหัวเรื่องH3</H3>
<H4> การกำหนดหัวเรื่องH4</H4>
<H5> การกำหนดหัวเรื่องH5</H5>
<H6> การกำหนดหัวเรื่องH6</H6> นี่คือตัวอักษรปกติ
</BODY>
</HTML>
การแสดงผล
การกำหนดหัวเรื่องH1การกำหนดหัวเรื่องH2การกำหนดหัวเรื่องH3การกำหนดหัวเรื่องH4การกำหนดหัวเรื่องH5การกำหนดหัวเรื่องH6นี่คือตัวอักษรปกติ |
สีตัวอักษรทั้ง2แบบ
สีของตัวอักษร สามารถกำหนดได้ 2 แนวทางคือ
1.การกำหนดสีของตัวอักษร
เป็นคำสั่งที่ใช้กำหนดสีของตัวอักษรให้มีสีต่างๆตามต้องการโดยการกำหนดเลขฐาน16
รูปแบบคำสั่ง
<BODY TEXT="#เลขฐาน16 จำนวน 6 ตัว">......</BODY>
2.การกำหนดสีของตัวอักษรเฉพาะส่วน
เป็นคำสั่งที่ใช้กำหนดสีของตัวอักษรให้มีสีต่างๆเฉพาะส่วนตามต้องการโดยการกำหนดเลขฐาน16
รูปแบบคำสั่ง
< FONT COLOR="#เลขฐาน16 จำนวน 6 ตัว">......</FONT>
ตัวอย่างแท็ก
1.การกำหนดสีของตัวอักษร
<HTML>
<HEAD>
<TITLE>การกำหนดสีของตัวอักษร</TITLE>
</HEAD>
<BODY TEXT="#00ff00">
กำหนดตัวอักษร เป็นสีเขียว
</BODY>
</HTML>
<HEAD>
<TITLE>การกำหนดสีของตัวอักษร</TITLE>
</HEAD>
<BODY TEXT="#00ff00">
กำหนดตัวอักษร เป็นสีเขียว
</BODY>
</HTML>
การแสดงผล
| กำหนดตัวอักษร เป็นสีเขียว |
2.การกำหนดสีของตัวอักษรเฉพาะส่วน
<HTML>
<HEAD>
<TITLE>การกำหนดสีของตัวอักษรเฉพาะส่วน </TITLE >
</HEAD>
<BODY>
ทดสอบ < FONT COLOR="#FF0000"> กำหนดตัวอักษรเฉพาะส่วน เป็นสีแดง</FONT>โดยคำสั่ง FONTCOLOR
< /BODY >
< /HTML >
<HEAD>
<TITLE>การกำหนดสีของตัวอักษรเฉพาะส่วน </TITLE >
</HEAD>
<BODY>
ทดสอบ < FONT COLOR="#FF0000"> กำหนดตัวอักษรเฉพาะส่วน เป็นสีแดง</FONT>โดยคำสั่ง FONTCOLOR
< /BODY >
< /HTML >
การแสดงผล
| ทดสอบกำหนดตัวอักษรเฉพาะส่วน เป็นสีแดง โดยคำสั่ง FONTCOLOR |
ตัวเอียง ตัวหนา ขีดเส้นใต้
การกำหนดรูปแบบตัวอักษรให้เป็น ตัวอักษรเอียง<I>,ตัวอักษรหนา<B>,และตัวอักษรมีเส้น<U>
รูปแบบคำสั่ง
<B>......</B>
<I>......</I>
<U>......</U>
ตัวอย่างแท็ก
<HTML>
<HEAD>
<TITLE>การกำหนดรูปแบบตัวอักษร</TITLE>
</HEAD >
<BODY >
<B>ตัวอักษรหนา</B><Br>
<I>ตัวอักษรเอียง</I><Br>
<U>ตัวอักษรมีเส้น</U><Br>
<B><I><U>การใช้คำสั่งทั้ง 3 แบบพร้อมกัน</U></I></B><Br>
</BODY>
</HTML>
<TITLE>การกำหนดรูปแบบตัวอักษร</TITLE>
</HEAD >
<BODY >
<B>ตัวอักษรหนา</B><Br>
<I>ตัวอักษรเอียง</I><Br>
<U>ตัวอักษรมีเส้น</U><Br>
<B><I><U>การใช้คำสั่งทั้ง 3 แบบพร้อมกัน</U></I></B><Br>
</BODY>
</HTML>
การแสดงผล
| ตัวอักษรหนา ตัวอักษรเอียง ตัวอักษรมีเส้น การใช้คำสั่งทั้ง 3 แบบพร้อมกัน |
ตัวขีดฆ่า ตัวยก ตัวห้อย
1.<S> ตัวขีดฆ่า</S>
2.<SUP> ตัวอักษรยกขึ้น</SUP>3.<SUB> ตัวอักษรห้อยลง</SUB>
ตัวอย่างแท็ก
<HTML>
<HEAD>
<TITLE>การกำหนดรูปแบบตัวอักษร</TITLE>
</HEAD >
<BODY >
<TITLE>การกำหนดรูปแบบตัวอักษร</TITLE>
</HEAD >
<BODY >
<S> ตัวขีดฆ่า</S>
<SUP> ตัวอักษรยกขึ้น</SUP>
<SUB> ตัวอักษรห้อยลง</SUB>
<SUB> ตัวอักษรห้อยลง</SUB>
</BODY>
</HTML>
</HTML>
การแสดงผล
ตัวอักษรยกขึ้น
ตัวอักษรห้อยลง
ตัวอักษรวิ่ง
<MARQUEE direction="ทิศทางการวิ่ง" width="ความกว้าง" height="ความสูง"
scrollamount=ความเร็วในการวิ่ง scrolldelay="เวลาหน่วง">ข้อความ</MARQUEE>
ทิศทางการวิ่ง
UP วิ่งจากด้านล่างขึ้นด้านบน
DOWN วิ่งจากด้านบนลงด้านล่าง
LEFT วิ่งจากด้านขวาไปด้านซ้าย
RIGHT วิ่งจากด้านซ้ายไปด้านขวา
ตัวอย่างแท็ก
<HTML>
<HEAD>
<TITLE>การทำตัวอักษรวิ่ง</TITLE>
</HEAD>
<BODY>
<marquee><font size=4 color="red">ราชธานีเก่า เมืองอู่ข้าว อู่น้ำ เลิศล้ำกานต์์กวี คนดีศรีอยุธยา </marquee>
</BODY>
</HTML>
<TITLE>การทำตัวอักษรวิ่ง</TITLE>
</HEAD>
<BODY>
<marquee><font size=4 color="red">ราชธานีเก่า เมืองอู่ข้าว อู่น้ำ เลิศล้ำกานต์์กวี คนดีศรีอยุธยา </marquee>
</BODY>
</HTML>
การแสดงผล
ตัวอักษรกระพริบ
<BLINK></BLINK>
ตัวอย่างแท็ก
<HTML>
<HEAD>
<TITLE>การกำหนดตัวอักษรกระพริบ</TITLE>
</HEAD>
<BODY> <BLINK>welcome</BLINK>
</BODY>
</HTML>
<HEAD>
<TITLE>การกำหนดตัวอักษรกระพริบ</TITLE>
</HEAD>
<BODY> <BLINK>welcome</BLINK>
</BODY>
</HTML>
การแสดงผล
การจัดตำแหน่งข้อความ
1. การกำหนดให้อยู่ตำแหน่งกึ่งกลางด้วยแท็ก Center <center> ...ข้อความ...</center>
2. การกำหนดตำแหน่งโดยใช้ Attribute ของแท็ก <p> โดยใช้ Attribute align รูปแบบดังนี้
<p align = "ตำแหน่ง"> ...ข้อความ...</p> ตำแหน่งที่สามารถระบุได้ คือ left center หรือ right
ตัวอย่างแท็ก
html>
<head>
<title>เว็บไทยดีดี :: webthaidd</title>
</head>
<body>
<p align=left>ข้อความอยู่ทางซ้าย</p>
<p align=center>ข้อความอยู่ตรงกลาง</p>
<p align=right>ข้อความอยู่ทางขวา</p>
</body>
</html>
<head>
<title>เว็บไทยดีดี :: webthaidd</title>
</head>
<body>
<p align=left>ข้อความอยู่ทางซ้าย</p>
<p align=center>ข้อความอยู่ตรงกลาง</p>
<p align=right>ข้อความอยู่ทางขวา</p>
</body>
</html>
| การแสดงผล |
แหล่งอ้างอิง
- http://www.bkk1.in.th/Topic.aspx?TopicID=7177
-http://montaip.blogspot.com/2012/07/blog-post_25.html
- http://www.thainextstep.com/html/html_05.php
8/9/56
ไม่มีความคิดเห็น:
แสดงความคิดเห็น