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

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

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 อักขระ)

เรื่อง การเริ่มต้นกับ HTML

  การเริ่มต้นกับ HTML

1. ความรู้เบื้องต้นภาษา HTML

          การสร้างเว็บเพจโดยใช้ภาษา HTML สามารถทำได้โดยการใช้โปรแกรม Text Editor   ต่าง ๆ ที่มีอยู่แล้วในระบบปฏิบัติการ Windows เช่น Notepad, WordPad นอกจากนี้ยังสามารถที่จะใช้งานโปรแกรมประเภท Word หรือโปรแกรมที่ใช้ในการจัดสิ่งพิมพ์ในการเขียนไฟล์ HTML ได้อีกด้วย เมื่อเขียนคำสั่งเสร็จแล้วให้ทำการบันทึกไฟล์ให้มีนามสกุล .html (ชื่อไฟล์.html)

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

          ภาษา HTML เป็นภาษาที่มีลักษณะของโค้ด คือ จะเป็นไฟล์ที่เก็บข้อมูลที่เป็นตัวอักษรในมาตรฐานของรหัสแอสกี้(ASCII Code) โดยเขียนอยู่ในรูปแบบของเอกสารข้อความ  จึงสามารถกำหนดรูปแบบโครงสร้างได้ง่าย

          Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket (<) และ greater-than bracket (>) โดยที่ Tag HTML คือ
          1. Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <hr>(Tag กำหนดเส้นคั่น),<br>(Tagกำหนดขึ้นบันทัดใหม่)
          2. Tag เปิด/ปิด เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash (/) นำหน้าคำสั่งใน Tag

 2.  โครงสร้างของภาษา HTML
          การเขียนโฮมเพจด้วยภาษา HTML  นั้น เอกสาร HTML จะประกอบด้วยส่วนประกอบ2 ส่วน ดังนี้
       1. ส่วน Head คือส่วนที่จะเป็นหัว (Header) ของหน้าเอกสารทั่วไป หรือส่วนชื่อเรื่อง(Title) ของหน้าต่างการทำงานในระบบ Windows
       2. ส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้น ๆ ซึ่งจะประกอบด้วย Tag คำสั่งในการจัดรูปแบบ หรือตกแต่งเอกสาร HTML            ในทั้งสองส่วนนี้จะอยู่ภายใน Tag <HTML>…</HTML> ดังนี้

คำสั่งเริ่มต้นของเอกสาร HTML

          1.  <HTML>..........</HTML>
                         <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรมและคำสั่ง

                   </HTML> เป็นการสิ้นสุดโปรแกรม HTML คำสั่งนี้จะไม่แสดงผลในโปรแกรมเว็บเบราเซอร์ แต่ต้องเขียนเพื่อให้เกิดความเป็นระบบของงาน และเพื่อจะให้รู้ว่าเอกสารนี้เป็นเอกสารของภาษา HTML ส่วนหัวเรื่องเอกสารเว็บ

          2.  <HEAD>..........</HEAD>
                   เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้น ๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ(Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญ คือ   

3.  <BODY>..........</BODY>
          Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่ส่วนใหญ่จะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> … </BODY>
3.  เริ่มต้นกับภาษา HTML ด้วย Notepad
          คลิกที่ Start --> เลือก Programs -->เลือก Accessories --> เลือก Notepad

ทดสอบการใช้โปรแกรม Notepad โดยพิมพ์คำสั่งพื้นฐานของภาษา HTML  ดังนี้

การบันทึกไฟล์โปรแกรม Notepad ให้เป็นไฟล์ HTML

      หลังจากใส่คำสั่งพื้นฐานของภาษา HTML ลงใน Notepad ให้ Save เป็น file นามสกุล ดอท.html ดังนี้

      คลิก File --> เลือก save ในช่อง File name ให้พิมพ์ชื่อ File ที่ต้องการลงไป

      เช่น test.html  (test.html อ่านว่า เทส ดอท เอช ที เอ็ม แอล)

จะได้ File 1 File ที่เขียนด้วยภาษา HTML ชื่อ test.html  จะเปิดโปรแกรม Internet Explorer (IE)

หมายเหตุ   เมื่อทำการ save file เป็น file HTML แล้ว ถ้าต้องการแก้ไขเอกสาร HTMLที่เปิดดูด้วยโปรแกรม Internet Explorer เลือก view ที่ menu bar >> เลือก source จะปรากฏข้อมูลที่เขียนด้วยภาษา HTML ในโปรแกรม notepad

การสร้างตาราง

 ในการสร้าตารางนั้นจะมีคำสั่งหรือป้ายระบุ(Tag) ต่างๆ ที่ใช้สำหรับสร้างตารางในภาษาHTML ดังนี้

Tag	คำอธิบาย
<table> ... </table>	คำสั่งในการสร้างตาราง
<caption> ... </caption>	คำสั่งในการกำหนดข้อความกำกับตาราง
<tr> ... </tr>	คำสั่งในการกำหนดแถวของตาราง 1 แถว (แนวนอน)
<th> ... </th>	คำสั่งในการกำหนดส่วนหัวของตารางแถวแรก
<td> ... </td>	คำสั่งในการกำหนดส่วนของคอลัมน์ (แนวตั้ง)

รูปแบบโครงสร้างของตาราง

โครงสร้างของตาราง	การแสดงผล
<table> <caption> ชื่อตาราง </ caption > <tr>                <th> ข้อมูลส่วนหัว </th><th> ข้อมูลส่วนหัว </th></tr> <tr>                <td> ข้อมูล1 </td><td> ข้อมูล2 </td></tr><tr>                <td> ข้อมูล3 </td><td> ข้อมูล4 </td></tr></table>	ชื่อตาราง ข้อมูลส่วนหัว      ข้อมูลส่วนหัว  ข้อมูล1                ข้อมูล2   ข้อมูล3                ข้อมูล4

การกำหนดเส้นขอบของตาราง      

                การสร้างตารางสามารถกำหนดเส้นของและสีเส้นของให้กับตาราง โดยใช้คำสั่ง border และ  bordercolor
               รูปแบบการใช้งาน  <table border="n"  bordercolor="ชื่อสี หรือ รหัสสี"> ...</table>
                      n หมายถึง ค่าตัวเลขที่ใช้กำหนดขนาดของเส้นขอบของตาราง ค่าตัวเลขยิ่งมากส้นขอบตารางจะมีขนาดใหญ่เพิ่มขึ้น

      ตัวอย่างการใช้งาน    <table  width="60%"  height="20%">
                            หรือ    <table  width="60"     height="20">

การกำหนดสีของตาราง   
             การกำหนดสีพื้นหลังของตาราง เป็นการตกแต่งตารางให้มีสีตามความต้องการของผู้สร้างเว็บเพจ โดยใช้คำสั่ง bgcolor
                   รูปแบบ : <table bgcolor="ชื่อสี หรือ รหัสสี">….</table>
                   ตัวอย่างการใช้งาน : <table bgcolor="yellow">….</table>

                                           หรือ   <table bgcolor="#ffffcc">….</table>

การกำหนดระยะเว้นขอบภายในเซลข้อมูล
             การกำหนดระยะเว้นขอบภายใน(padding) ของซลล์ข้อมูลในตารางนั้น จะมีผลต่อการแสดงผลทำให้เกิดเพื้นที่ว่างในระยะเซลล์ในแต่ละสดมภ์(Column) โดยใช้คำสั่ง cellpadding
             รูปแบบ : <table cellpadding="ระยะห่างจากขอบภายในเซลล์">….</table>
           ตัวอย่างการใช้งาน :  <table cellpadding="10">….</table>

การกำหนดตำแหน่งของตาราง
                การกำหนดตำแหน่งของตาราง ให้อยู่ในตำแหน่งที่ต้องการสามารถทำได้โดยใช้คำสั่งแอตทริบิวต์ align
                รูปแบบ : <table align="ตำแหน่งของตาราง">….</table>
                                 ในส่วนของการกำหนดตำแหน่งของตารางนั้นสามารถกำหนดได้ดังนี้
                                  align="left"    คือ แสดงผลตารางให้ชิดด้านซ้ายของหน้าจอเว็บบราวเซอร์
                                  align="right"   คือ แสดงผลตารางให้ชิดด้านขวาของหน้าจอเว็บบราวเซอร์
                                  align="center" คือ แสดงผลตารางให้กึ่งกลางของหน้าจอเว็บบราวเซอร์

               ตัวอย่างการใช้งาน : <table align="center">….</table>

การกำหนดคุณลักษณะพิเศษภายในแถว
       1. การกำหนดตำแหน่งข้อความภายในเซลล์   ใช้คำสั่งแอตทริบิวต์ align ในการกำหนดตำแหน่งภายในแท็ก<tr> หรือ<td> ให้ข้อความอยู่ในตำแหน่งที่ต้องการ

         รูปแบบ : <tr align="ตำแหน่งของตาราง">…</tr>
         รูปแบบ : <td align="ตำแหน่งของตาราง">…</td>

            สามารถกำหนดให้ข้อมูลอยู่ในตำแหน่งต่างๆ ดังนี้
                        align="left"        คือ การจัดตำแหน่งให้ข้อความชิดทางด้านซ้ายของแถวหรือเซลล์
                        align="right"       คือ การจัดตำแหน่งให้ข้อความชิดทางด้านขวาของแถวหรือเซลล์
                       align="center"   คือ การจัดตำแหน่งให้อยู่กึ่งกลางของแถวหรือเซลล์
        ตัวอย่างการใช้งาน : <tr align="ตำแหน่งของตาราง">…</tr> หรือ <td align="ตำแหน่งของตาราง">…</td>

2. การกำหนดสีพื้นให้กับแถวและในเซลล์  โดยใช้คำสั่ง bgcolor
           รูปแบบ : <tr bgcolor="ชื่อสี หรือ รหัสสี">…</tr>
                         <td bgcolor="ชื่อสี หรือ รหัสสี">…</td>
        ตัวอย่างการใช้งาน : <tr bgcolor="pink">…</tr>      
                                         <td bgcolor=" pink">…</td>

3. การกำหนดตำแหน่งของข้อมูลในแนวตั้งของตาราง โดยใช้คำสั่งแอตทริบิวต์ valign ในการกำหนดตำแหน่งต่างๆ ดังนี้ valign="top"         คือ จัดข้อมูลให้อยู่ในตำแหน่งชิดขอบบนของช่องตาราง

                     valign="middle"    คือ จัดข้อมูลให้อยู่ในตำแหน่งกึ่งกลางของช่องตาราง

                     valign="bottom"   คือ จัดข้อมูลให้อยู่ในตำแหน่งชิดขอบล่างของช่องตาราง

                   รูปแบบ : <td valign =" ตำแหน่งของข้อมูล">…</td>

                   ตัวอย่างการใช้งาน : <td valign ="middle">…</td>

     

การผนวกแถวและคอลัมน์ในตาราง

    การรวมพื้นที่ของช่องภายในตารางเข้าด้วยกันสามารถทำได้เป็น 2 ลักษณะคือ
    1. การรวมแถว คือ การกำหนดลักษณะพิเศษด้วยคำสั่งแอตทริบิวต์ rowspan ในการรวมแถวเข้าด้วยกัน
       รูปแบบ: <td  rowspan =" จำนวนแถวที่รวมเซลล์">…</td>
       ตัวอย่างการใช้งาน 

    2. การรวมคอลัมน์ คือ กำหนดลักษณะพิเศษด้วยคำสั่งแอตทริบิวต์ colspan ในการรวมคอลัมน์เข้าด้วยกัน
         รูปแบบ : <td  colspan =" จำนวนแถวที่รวมเซลล์">…</td>
        ตัวอย่างการใช้งาน 

การใส่รูปภาพลงในตาราง

         การแทรกรูปภาพภายในช่องของตารางโดยใช้คำสั่ง <img  src>ในการแทรกรูปให้อยู่ระหว่างแท็ก <td>…</td>
        รูปแบบ : <td  <img src="ชื่อแฟ้มรูปภาพ /ชื่อไฟล์รูปภาพ">…</td>
       ตัวอย่างการใช้งาน : <td  <img src="images/flower.gif"></td>

 

การเปลี่ยนสีพื้นหลังของตารางเป็นรูปภาพ
     ในกรณีที่ต้องการให้ตารางมีพื้นหลังเป็นรูปภาพ สามารถใช้คำสั่งแอตทริบิวต์ background ในแท็กเปิดของคำสั่งสร้างตารางคือ <table> เพื่อเปลี่ยนพื้นหลังให้เป็นรูปภาพ
        รูปแบบ : <table background="ชื่อไฟล์รูปภาพ">…</ table >
      ตัวอย่างการใช้งาน : <table  background="bgo181.gif">…</table>