Home » , , , , , , , , » การกำหนดลักษณะีข้อความในเอกสาร HTML
วันอังคารที่ 22 กรกฎาคม พ.ศ. 2557
undefined

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

:: การกำหนดลักษณะีข้อความในเอกสาร HTML
จากในบทที่ 2 เรื่องโครงสร้างภาษา HTML เราได้ทำการใส่ข้อความลงในโฮมเพจแล้ว ในส่วนระหว่างแท็ก <body> ....</body> ซึ่งจะสังเกตได้ว่าข้อความที่เราได้เขียนไปเมื่อทดสอบผ่านเว็บบราวเซอร์ จะเป็นข้อความสีดำ และจากบทที่ 3 หากเราเิ่พิ่มเติมโค้ด เพิ่ม Attribute ของแท็ก <body> เข้าไปโดยระบุให้ืพื้นหลังของโฮมเพจเป็นสีแดง จะทำให้สีข้อความดูไม่เข้ากันกับสีพื้นหลัง และทำให้ข้อความอ่านยาก นอกจากนี้ข้อความก็ดูไม่เป็นมาตรฐาน เหมือนเว็บทั่ว ๆ ไป อันนี้เพราะว่าเรายังไม่ได้ทการกำหนดลักษณะของข้ิอความ
สำหรับการกำหนดลักษณะข้อความนั้น จะใส่เิิ่พิ่มในส่วนของแท็กเปิด ของแท็ก <font> เพราะคำสั่งนี้เป็นส่วนขยายที่เรียกว่า Attribute ของแท็ก <font> นั้นเอง โดยจะมี Attribute ต่าง ๆ ดังนี้
           1. การกำหนดชื่อฟอนต์   face = "ชื่อฟอนต์"           2. การกำหนดขนาดของข้อความ size = "ขนาดของข้อความ"           3. การกำหนดสีของข้อความ   color= "ชื่อสี" หรือ color = "#รหัสสี"

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

  <html>
  <head><title> ....การหนดรูปแบบฟอนต์ของข้อความ....</title></head>
       <body>
               <font face = "MS Sans Serif"> ข้อความนี้กำหนดฟอนต์แบบ MS Sans Serif </font> <br>
               <font face = "Tahoma"> ข้อความนี้กำหนดฟอนต์แบบ Tahoma </font> <br>
       </body>
  </html>
เหตุผลที่เรามักใช้ฟอนต์แบบ MS Sans Serif หรือ Tahoma เนื่องจากฟอนต์สองตัวนี้เป็นฟอนต์ มาตรฐานของวินโดวน์ ไม่ว่าเครื่องไหน ๆ ก็มีฟอนต์สองแบบนี้ อีกทั้งฟอนต์ทั้งสองแบบนี้ สามารถแสดงผลเป็นภาษาไทยได้ด้วย ด้วยลักษณะเฉพาะนี้นั้นเอง ดังนั้นเมื่อมีผู้เข้าเยี่ยมชมเว็บที่ใช้ฟอนต์ 2 แบบนี้ การแสดงผลของข้อความก็จะยังสามารถแสดงผลได้เหมือนปกติ หากเรากหนดการแสดงผลด้วยฟอนต์ที่ไม่เป็นมาตรฐาน เมื่อถูกแสดงผลที่เครื่องบางเครื่อง ซึ่งเครื่องนั้น ๆ ไม่มีฟอนต์ที่เราเลือกใช้ จะทำให้ผู้ดูเว็บอ่านข้อความของเว็บเราไม่ได้ ซึ่งจะส่งผลเสียกับการเข้าเยี่ยมชมเว็บไซต์ของเราได้
 รูปแบบการกำหนดขนาดข้อความ
การกำหนดขนาดของข้อความสามารถกำหนดได้โดยใช้ตัวเลขเป็นตัวกำหนด ซึ่งสามารถกำหนดได้ 7 ระดับ รูปแบบการใส่มีด้วยกัน 3 แบบ คือ แบบแรกการกำหนดโดยใช้ตัวเลข 1-7 สองการกำหนดตัวเลขโดยใส่เครื่องหมาย + คือตั้งแต่ +1 - +7 และ การใส่แบบใส่เป็นค่าแบบ - ตั้งแต่ -1 - -7 ซึ่งรูปแบบการใส่มีดังนี้

  <html>
  <head><title> ....การหนดรูปแบบขนาดข้อความ....</title></head>
       <body>
               <font size = "2"> ข้อความนี้กำหนดขนาดเท่ากับ 2</font> <br>
               <font size = "+2"> ข้อความนี้กำหนดขนาดเท่ากับ +2</font> <br>
               <font size = "-2"> ข้อความนี้กำหนดขนาดเท่ากับ -2</font> <br>       </body>
  </html>
การใส่ขนาดข้อความที่นิยมคือแบบแรก และปกติแล้วข้อความของเนื้อหาโดยทั่ว ๆ ไปจะอยู่ที่ขนาด 2 หรือ 3 ซึ่งต้องขึ้นอยู่กับชนิดของฟอนต์ที่ใช้ด้วย เพราะขนาดของฟอนต์แต่ละชนิดจะไม่เท่ากัน
 รูปแบบการกำหนดสีข้อความ
การกำหนดสีสันของข้อความเป็นเรื่องสำคัญอยู่ในลำดับต้น ๆ ของการทำเว็บเลยทีเดียว เพราะสีสันข้อความสามารถดึงดูดสายตาของผู้เยี่ยมชม หากข้อความของเว็บใช้สีที่อ่านยาก เพราะว่าสีกลืนกันไปหมดกับพื้นหลัง ความสำคัญของการสื่อความหมายของข้อความนั้น ๆ อาจอ่อนด้อยลง ดังนั้นการพิจารณาเลือกใช้สีควรเลือกให้เหมาะกับโทนสีทั้งหมดของเว็บ ไม่ควรอ่อนด้อยเกินไป หรือโดดเด่นเิกินไป (สำหรับข้อความเล็ก ๆ ต้องการเน้นอาจทำได้) ซึ่งรูปแบบการใส่สีให้ข้อความในเว็บมีดังนี้

  <html>
  <head><title> ....การหนดรูปแบบสีข้อความ....</title></head>
       <body>
               <font color = "red"> ข้อความนี้กำหนดให้เป็นสีแดง</font> <br>
               <font color = "#0000ff"> ข้อความนี้กำหนดให้เป็นสีน้ำเงิน </font> <br>
       </body>
  </html>
 Tip HTML
การกำหนดลักษณะข้อความในแท็กเดียวในการกำหนดลักษณะข้อความสามารถกำหนดได้ในแท็กเดียว โดยการเิ่พิ่ม Attribute ของแท็ก <font> โดยใช้ Space หรือช่องว่างเป็นตัวแบ่งระหว่างแต่ละ Attribute โดยเขียนโค้ดตามตัวอย่างดังนี้
<font face = "ชื่อฟอนต์" size = "ขนาดข้อความ" color = "สี"> .... </font>
แท็ก <br> 
คงสังเกตเห็นแล้วนะค่ะ ว่ามีแท็กเพิ่มมาอีกแท็ก ในบทความนี้ คือ <br> แท็ก <br> เป็นแท็กสำหรับขึ้นบรรทัดใหม่ค่ะ
** หมายเหตุ นอกจากแท็ก <br> แล้ว ยังมีแท็กสำหรับขึ้นบรรทัดใหม่อีกหนึ่งแท็กคือ <p> หรือ <p>....</p> แต่แตกต่างกันที่ <br> เป็นการขึ้นบรรทัดใหม่ของย่อหน้าเดียวกัน แต่ <p> จะเป็นการขึ้นบรรทัดย่อหน้า ดังนั้น ช่องว่างของการขึ้นบรรทัดใหม่ของ <p> จะมีความสูงมากกว่า <br>

0 ความคิดเห็น:

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

Popular Posts

  • รวมโค้ดสี
  • HTML Basic : โค้ดง่ายๆ
    Hypertext Markup Language โครงสร้าง <html> <head> <title>.........</title> </head> <body> </body> ...
  • ทำความรู้จัก Search Engine
    ทำความรู้จัก Search Engine บทที่แล้วได้เกริ่นไปกี่ยวกับ SEO และเมื่อพูดถึง SEO หากจะไม่พูดถึงเรื่องของ Search Engine ก็คงกะไรอยู่ เพราะว่ามี...
  • เริ่มต้น SEO ด้วยการใส่ Meta Tag
    เริ่มต้น SEO ด้วยการใส่ Meta Tag การใส่แท็ก Meta วิธีเริ่มต้นสำหรับการทำ SEO ให้กับเว็บไซต์ ทำได้ง่าย ๆ แค่ใส่แท็ก Meta ให้เว็บไซต์ เว็บไซต์...
  • การใส่คำอธิบายให้รูปภาพ
    การใส่คำอธิบายให้รูปภาพ โดยใช้โปรแกรม Dreamweaver การใส่คำอธิบายให้รูปภาพ ก็คือการใส่คำสั่ง ALT Tag ในภาษา HTLM นั่นเอง และเราสามารถใช้โปรแ...
  • การจัดรูปแบบข้อความ
    ::  การจัดรูปแบบข้อความ สำหรับบทความนี้ก็ยังคงเกี่ยวข้องกับข้อความ เป็นบทความที่ต่อเนื่องมาจากบทความที่แล้ว ในบทความนี้เราจะมาจัดรูปแบบขอ...
  • Banner มาตรฐาน
    รู้เรื่อง Banner มาตรฐาน ตามเว็บไซต์ต่าง ๆ สิ่งที่เราจะเห็นบ่อย ๆ และเกือบทุก ๆ เว็บต้องมีก็คือ Banner หรือป้าย ซึ่งมีอยู่มากมาย จนบางเว็บอา...
  • การสร้างตาราง
    ::  การสร้างตาราง จากบทความในบทที่ผ่าน ๆ มา ในเรื่องของการจัดตำแหน่งของข้อความ จะเห็นได้ว่าถึงแม้เราจะสามารถจัดตำแหน่งได้แล้ว แต่การจัดตำ...
  • ลงโปรแกรมโปรแกรม Appserv
    ::  โปรแกรม Appserv โปรแกรมสำหรับจำลองเครื่องเป็น Server ในบทความนี้เราจะมาทำการติดตั้งโปรแกรม Appserv กันค่ะ ขั้นตอนแรกให้เราไปทำการหาโป...
  • Operator สำหรับการดำเนินการในภาษา PHP
    Operator สำหรับการดำเนินการในภาษา PHP ในบทความก่อนหน้านี้เราได้เรียนรู้เกี่ยวกับโอเปอเรเตอร์ที่ใช้ในการเปรียบเทียบ และในบทความเรื่องการใช้ W...
 
Copyright © 2015 สอนทำเว็บไซต์ ง่ายนิดเดี่ยว