สอนภาษา HTML: การแต่งตัวอักษร html

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

<html>
 <head><title> ....การแต่งตัวอักษร....</title></head>
 <body>
 แบบอักษร Tahoma 
 แบบอักษร Cordia new 
 แบบอักษร Angsana New 
 แบบอักษร TH SarabunPSK 
 แบบอักษร

MS Sans Serif 
</body>
</html>

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

หากเราต้องการแสดงข้อความในเว็บของเราให้มีขนาดใหญ่เล็กแตกต่างกัน เราต้องใช้คำสั่ง โดยมี
มีรูปแบบโค้ดดังนี้
... ซึ่ง n มีค่าตั้งแต่ 1 ถึง 7

รูปแบบโค้ด
<HTML>
 <HEAD>
 <TITLE> การกำหนดขนาดตัวอักษร </TITLE>
 </HEAD>
 <BODY>
 www.krusamut.com 
 กำหนดขนาดตัวอักษร SIZE=6 
 กำหนดขนาดตัวอักษร SIZE=5 
 กำหนดขนาดตัวอักษร SIZE=4 
 กำหนดขนาดตัวอักษร SIZE=3 
 กำหนดขนาดตัวอักษร SIZE=2 
 กำหนดขนาดตัวอักษร SIZE=1 
 </BODY>
</HTML>

สีตัวอักษร

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

<html>
 <head><title> ....การแต่งตัวอักษร....</title></head>
 <body>
 CupP'CAKE 
 CupP'CAKE 
 CupP'CAKE 
 CupP'CAKE 
 CupP'CAKE 
 CupP'CAKE 
 </body>
 </html>

สีตัวอักษร

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

ในแท็กภาษา HTML ก็มีคำสั่งเหล่านี้อยู่ด้วยเหมือนกัน โดยรูปแบบของแท็ก มีดังนี้
 1. การกำหนดแบบตัวหนา (Bold) ...ข้อความ... หรือ ...ข้อความ...
 2. การกำหนดแบบตัวเอียง (Italic) ...ข้อความ...
 3. การกำหนดแบบตัวขีดเส้นใต้ (Underline) ...ข้อความ...

<html>
 <head><title> ....ตัวเอียง ตัวหนา ขีดเส้นใต้....</title></head>
 <body>
 ตัวเอียง(Italic) 
 ตัวหนา(Bold) 
 ตัวขีดเส้นใต้(Underline) 
 </body>
 </html>

ตัวขีดฆ่า ตัวยกกำลัง ตัวห้อย

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

<html>
 <head><title> ....ตัวขีดฆ่า ตัวยกกำลัง ตัวห้อย....</title></head>
 <body>
ข้อความนี้เป็น ตัวยก 
ข้อความนี้เป็นห้อยO ข้อความนี้เป็น<S>ตัวขีดฆ่า</S> 
 </body>
 </html>

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

 ตัวอักษรวิ่ง ใช้สำหรับแสดงข้อความแบบเคลื่อนที่ไปยังทิศทางที่เราต้องการ มีรูปแบบการใช้ดังนี้

<marquee scrolldelay="ความเร็ว" direction="ทิศทางวิ่ง">ข้อความ</marquee>
- scrolldelay ให้แทนค่าด้วยความเร็วเป็น ตัวเลข ส่วน direction ใส่ได้เฉพาะ Up,Down,Left และ Right

 ตัวอักษรกระพริบ ใช้กำหนดแสดงข้อความแบบกระพริบ จะมีลักษณะการแสดงผลเป็นแบบติด - ดับ สลับกันไป
<html>
 <head><title> ....ตัวอักษณวิ่ง ตัวอักษรกระพริบ....</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>
 <Blink>COMPUTER</Blink>
 </body>
 </html>

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

ลองเขียนโค้ดมาก็หลายโค้ดแล้วนะค่ะ แต่โค้ดที่ผ่านมาแบบไหน ๆ ก็แสดงข้อความที่ตำแหน่งชิดซ้ายของหน้าจอเสมอ อยากเปลี่ยนตำแหน่งการวางข้อความบ้าง ต้องเขียนโค้ดอย่งไร ในบทความนี้ Webmaster มีคำตอบ (แท็ก) มาฝากค่ะ

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

<html>
 <head><title> ....การจัดตำแหน่งข้อความ....</title></head>
 <body>
  ข้อความอยู่ทางซ้าย 
 ข้อความอยู่ตรงกลาง 
 ข้อความอยู่ทางขวา 
 </body>
 </html>

แหล่งที่มา

http://ben-gan.blogspot.com/2012/07/font-html-default-tag-font.html

http://www.thainextstep.com/html/html_05.php

https://sites.google.com/site/cirayus/sux-kar-reiyn-ru/4-kar-cadkar-taw-xaksr

http://www.thainextstep.com/html/html_04.php

http://www.thainextstep.com/html/html_03.php

16 สิงหาคม 2557

สอนภาษา HTML

วันอาทิตย์ที่ 17 สิงหาคม พ.ศ. 2557

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

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

คลังบทความของบล็อก