บทที่ 3 การจัดและตกแต่งข้อความ

ใบความรู้

เรื่อง  การจัดและตกแต่งข้อความ

1. การขึ้นบรรทัดใหม่

         การแสดงข้อความในบราวเซอร์จะถูกตัดคำขึ้นบรรทัดใหม่เมื่อข้อความนั้นเลยขอบขวา และบางครั้งคำสั่งที่บราวเซอร์ตัดขึ้นบรรทัดใหม่นั้นอาจดูแล้วไม่ต่อเนื่อง ดังนั้นจึงให้ แท็ก <br>

 ตัวอย่างการใช้งาน

2. การตัดคำขึ้นย่อหน้าใหม่

            เมื่อต้องการจัดข้อความขึ้นบรรทัดใหม่ และเว้นบรรทัดให้อีกหนึ่งบรรทัด  แท็กที่ใช้ควบคุมการทำงานในลักษณะนี้คือ แท็ก <p>                      รูปแบบ   <p> ข้อความที่ต้องการขึ้นย่อหน้าใหม่             ตัวอย่างการใช้งาน ดังนี้

3. การวางตำแหน่งข้อความในย่อหน้า

                   สามารถจัดเรียงข้อความในแต่ละย่อหน้าของเพจได้  โดยการกำหนดตำแหน่งในแอตทริบิวต์ align  <Alignment> ของแท็ก<p>                    รูปแบบ  <p  align="ตำแหน่ง"> ข้อความ </p>

                  ตัวอย่างการใช้งาน

4. การจัดให้ข้อมูลอยู่กึ่งกลางหน้ากระดาษ

          การจัดให้ข้อมูลที่เป็นข้อความ หรือ รูปภาพ ให้อยู่ตำแหน่งตรงกลางจอภาพ โดยใช้แท็ก<center>
          รูปแบบ  <center> ข้อความ </center>
5. การสร้างเส้นคั่น
          ต้องการแบ่งข้อความบนจอภาพ โดยใช้เส้นคั่นทางแนวนอน สามารถกำหนดตำแหน่ง สี ขนาดความหนา ความยาว หรือกำหนดเป็นเส้นทึบได้โดยใช้แท็ก <hr >
            รูปแบบ  <hr >

ตัวอย่างการใช้งาน   ดังนี้

6. การกำหนดรูปแบบอักษร            
            การกำหนดอักษรตัวหนา            คือ แท็ก <b>              รูปแบบ <b>  ข้อความ  </b>              
            การกำหนดอักษรตัวเอียง            คือ แท็ก <i>               รูปแบบ <i>  ข้อความ   </i>                   
            การกำหนดอักษรตัวขีดเส้นใต้       คือ แท็ก <u>              รูปแบบ <u>  ข้อความ  </u> 
            การกำหนดอักษรตัวพิมพ์ดีด        คือ แท็ก <tt>              รูปแบบ <tt>  ข้อความ  </tt> 
            การกำหนดอักษรตัวขีดฆ่า           คือ แท็ก <s>                    รูปแบบ <s>  ข้อความ   </s> 

            การกำหนดอักษรตัวยกขึ้น          คือ แท็ก <sup>                 รูปแบบ ^{ข้อความ} 

            การกำหนดอักษรห้อยลง            คือ แท็ก <sub>                 รูปแบบ _{ข้อความ} 

         ตัวอย่างการใช้งาน ดังนี้

7. การกำหนดตัวอักษรเคลื่อนที่
            แท็ก <marquee> เป็นคำสั่งการแสดงข้อความให้มีการเคลื่อนที่ของตัวอักษรโดยปกติทิศทางการเคลื่อนที่จะเคลื่อนจากขวาไปซ้าย 
            รูปแบบ  <marquee>ข้อความ</marquee>
  - กำหนดความเร็วในการเคลื่อนที่ ด้วยการกำหนดแอตทริบิวต์ scolldelay
            รูปแบบ  <marquee  scolldelay ="เวลา">ข้อความ / รูปภาพ</marquee>
  - กำหนดทิศทางการเคลื่อนที่ ด้วยการกำหนดแอตทริบิวต์ direction
            รูปแบบ  <marquee  direction ="ทิศทาง">ข้อความ / รูปภาพ</marquee>
           ทิศทางที่สามารถกำหนดให้กับข้อความ / รูปภาพ คือ           up   ข้อความ เลื่อนขึ้น                      down  ข้อความ เลื่อนลง

           left  ข้อความ เลื่อนจากขวามาซ้าย         right    ข้อความ เลื่อนจากซ้ายมาขวา

  - กำหนดรูปแบบการเคลื่อนที่ คำสั่งแอตทริบิวต์การเคลื่อนที่ คือ behavior
            รูปแบบ  <marquee  behavior ="รูปแบบการเคลื่อนที่">ข้อความ</marquee>       

           การกำหนดรูปแบบการเคลื่อนที่ของข้อความ กำหนดได้ 3 รูปแบบคือ

            scroll  หมายถึง การเคลื่อนที่หายไปจากขอบ แล้วไปปรากฏที่ขอบอีกด้านแล้วทำซ้ำเรื่อยๆ    

           slide   หมายถึง การเคลื่อนที่ไปแล้วหยุดที่ขอบ
           alternate  หมายถึง การเคลื่อนที่ไปกระทบขอบแล้วดึงไปอีกทางกลับไปกลับมา     

  ตัวอย่างการใช้งาน ดังนี้

8. การกำหนดลักษณะของตัวอักษร
            การกำหนดลักษณะของตัวอักษรที่แสดงผลบนเว็บบราวเซอร์ เช่น สีของตัวอักษร รูปแบบของตัวอักษร ขนาดตัวอักษร สามารถกำหนดด้วยคำสั่งแอตทริบิวต์ต่างๆ ที่แท็กเปิดของแท็ก<font>

            - การกำหนดฟอนต์ของตัวอักษร คำสั่งแอตทริบิวต์ คือ face การระบุชื่อของฟอนต์ที่ต้องการเช่น "Ms Sans Serif" , "AngsanaUPC"

                   รูปแบบ  <font face="ชื่อของฟอนต์"  >ข้อความ</font>

              ตัวอย่างการใช้งานดังนี้

- การกำหนดสีของตัวอักษร  การกำหนดสีตัวอักษรเพื่อทำให้เอกสารเว็บเพจสวยงาม น่าสนใจมากยิ่งขึ้นโดยใช้คำสั่งแอตทริบิวต์ คือ color

            รูปแบบ  <font color="ชื่อสี หรือ รหัสสี">ข้อความ</font>           ตัวอย่างชื่อสี

       ตัวอย่างการใช้งาน  ดังนี้  

- การกำหนดขนาดของตัวอักษร การกำหนดขนาดตัวอักษรภายในเอกสารเว็บเพจด้วยการกำหนดแอตทริบิวต์ size

                        รูปแบบ  <font size="ตัวเลข(1ถึง7)"  >ข้อความ</font>
                        การกำหนดขนาดของตัวเลขในเว็บเพจนั้น กำหนดขนาดของตัวอักษรได้2 รูปแบบคือ

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

ตัวอย่างการใช้งาน การระบุตัวเลข

 ตัวอย่างการใช้งาน การระบุเครื่องหมายบวกและเครื่องหมายลบ

 9. การเว้นช่องว่างในเอกสารเว็บเพจ(การเว้นวรรค)

           การพิมพ์ข้อมูลในเอกสาร HTML การเว้นช่องว่างไว้มากขนาดไหนก็ตามเมื่อทดสอบผลลัพธ์บนเว็บบราวเซอร์ ได้เป็นช่องว่า 1 อักขระ ถ้าต้องการเว้นช่องว่างความต้องการใช้แท็ก &nbsp

           รูปแบบ ข้อความ &nbsp ข้อความ (แทนการเว้นช่องว่าง1 อักขระ)