กำหนดลักษณะีข้อความให้ HTML

Written on February 18, 2010 – 3:51 pm | by ikapeng |

สำหรับการกำหนดลักษณะข้อความนั้น จะใส่เิิ่พิ่มในส่วนของแท็กเปิด ของแท็ก <font> เพราะคำสั่งนี้เป็นส่วนขยายที่เรียกว่า Attribute ของแท็ก <font> นั้นเอง โดยจะมี Attribute ต่าง ๆ ดังนี้

  1. การกำหนดชื่อฟอนต์ Attribute ที่ใช้ คือ face = “ชื่อฟอนต์
  2. การกำหนดขนาดของข้อความ Attribute ที่ใช้ คือ size = “ขนาดของข้อความ
  3. การกำหนดสีของข้อความ Attribute ที่ใช้ คือ color= “ชื่อสีหรือ color = “#รหัสสี

1. การกำหนดชื่อฟอนต์

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

<html>
<head><title> ....การหนดรูปแบบฟอนต์ของข้อความ....</title></head>
<body>
<font face = "MS Sans Serif"> ข้อความนี้กำหนดฟอนต์แบบ MS Sans Serif<br /> </font>
<font face = "Arial"> ข้อความนี้กำหนดฟอนต์แบบ Arial<br /> </font>
<font face = "Tahoma"> ข้อความนี้กำหนดฟอนต์แบบ Tahoma </font>
</body>
</html>

ผลลัพธ์ที่ได้ 

2.การกำหนดขนาดของข้อความ

การกำหนดขนาดของข้อความสามารถกำหนดได้โดยใช้ตัวเลขเป็นตัวกำหนด ซึ่งสามารถกำหนดได้ 7 ระดับ รูปแบบการใส่มีด้วยกัน 3 แบบ คือ แบบแรกการกำหนดโดยใช้ตัวเลข 1-7 สองการกำหนดตัวเลขโดยใส่เครื่องหมาย + คือตั้งแต่ +1 – +7 และ การใส่แบบใส่เป็นค่าแบบ – ตั้งแต่ -1 – -7 ซึ่งรูปแบบการใส่มีดังนี้คับ

<html>
<head><title> ....การหนดรูปแบบขนาดข้อความ....</title></head>
<body>
<font size = "-1"> ข้อความนี้กำหนดขนาดเท่ากับ -1</font> <br />
<font size = "-2"> ข้อความนี้กำหนดขนาดเท่ากับ -2</font> <br />
<font size = "-3"> ข้อความนี้กำหนดขนาดเท่ากับ -3</font> <br />
<font size = "-4"> ข้อความนี้กำหนดขนาดเท่ากับ -4</font> <br />
<font size = "-5"> ข้อความนี้กำหนดขนาดเท่ากับ -5</font> <br />
<font size = "-6"> ข้อความนี้กำหนดขนาดเท่ากับ -6</font> <br />
<font size = "-7"> ข้อความนี้กำหนดขนาดเท่ากับ -7 </font> <br />
<font size = "1"> ข้อความนี้กำหนดขนาดเท่ากับ 1</font> <br />
<font size = "2"> ข้อความนี้กำหนดขนาดเท่ากับ 2</font> <br />
<font size = "3"> ข้อความนี้กำหนดขนาดเท่ากับ 3</font> <br />
<font size = "4"> ข้อความนี้กำหนดขนาดเท่ากับ 4</font> <br />
<font size = "5"> ข้อความนี้กำหนดขนาดเท่ากับ 5</font> <br />
<font size = "6"> ข้อความนี้กำหนดขนาดเท่ากับ 6</font> <br />
<font size = "7"> ข้อความนี้กำหนดขนาดเท่ากับ 7</font> <br />
</body>
</html>

ผลลัพธ์ที่ได้

3. การกำหนดสีของข้อความ

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

<html>
<head><title> ....การหนดรูปแบบสีข้อความ....</title></head>
<body>
<font color = "red"> ข้อความนี้กำหนดให้เป็นสีแดง</font> <br />
<font color = "#0000ff"> ข้อความนี้กำหนดให้เป็นสีน้ำเงิน </font> <br />
<font color = "green"> ข้อความนี้กำหนดให้เป็นสีเขียว </font> <br />
<font color = "#000000"> ข้อความนี้กำหนดให้เป็นสีดำ </font> <br />
</body>
</html>

ผลลัพธ์ที่ได้

*** การกำหนดลักษณะข้อความในแท็กเดียว
ในการกำหนดลักษณะข้อความสามารถกำหนดได้ในแท็กเดียว โดยการเิ่พิ่ม Attribute ของแท็ก <font> โดยใช้ Space หรือช่องว่างเป็นตัวแบ่งระหว่างแต่ละ Attribute โดยเขียนโค้ดตามตัวอย่างดังนี้
<font face = “ชื่อฟอนต์” size = “ขนาดข้อความ” color = “สี”> …. </font>
เช่น

<html>
<head><title> ....การกำหนดลักษณะข้อความในแท็กเดียว....</title></head>
<body>
<font color = "red" size="5" face="Tahoma"> ข้อความนี้กำหนดให้เป็นสีแดง ขนาดเท่ากับ 5 ฟอนต์ชื่อ "Tahoma"</font> <br />
</body>
</html>

ผลลัพธ์ที่ได้

**** มีแท็กอื่นเพิ่มเติมสำหรับบทความนี้นะคับ นั่นคือ แท็ก <br /> หรือ <br> แท็กนี้เป็นแท็กสำหรับการขึ้นบรรทัดใหม่ นอกจากแท็ก <br /> แล้ว ยังมีแท็กสำหรับขึ้นบรรทัดใหม่อีกหนึ่งแท็กคือ <p> หรือ <p>….</p> แต่แตกต่างกันที่ <br /> เป็นการขึ้นบรรทัดใหม่ของย่อหน้าเดียวกัน แต่ <p> จะเป็นการขึ้นบรรทัดย่อหน้า ดังนั้น ช่องว่างของการขึ้นบรรทัดใหม่ของ <p> จะมีความสูงมากกว่า <br />

Tags: , , ,

Post a Comment

Spam protection by WP Captcha-Free

Find entries :

About Me

สวัสดีครับ ยินดีต้อนรับทุกท่านที่แวะผ่านเข้ามาเยี่ยมชม บล็อก...เว็บ...หรือว่าเว็บบล็อกมั้ง ที่ที่นี้ทำไว้ทำไมก็ไม่รู้นะ แต่ที่แน่ๆก็น่าจะทำไว้เฉยๆ อ่าาา เอาเป็นว่าเว็บบล็อกนี้ทำไว้เก็บข้อมูลที่น่าสนใจ น่าอ่านทั้งที่เป็นประโยชน์ หรือไร้สาระบ้างผมก็จะเอามาโพสต์เก็บไว้อ่านเองบ้าง หรือใครจะมาอ่านด้วยก็ตามสบายเลยนะครับ เผื่อว่ามันจะมีประโยชน์บ้าง เชิญอ่านให้สนุกเลยละกันครับ..:). More

Want to subscribe?

 Subscribe in a reader Or, subscribe via email:

Enter your email address:
Delivered by FeedBurner