HTML ?? ? HyperText Markup Language by 6AR88a0

VIEWS: 48 PAGES: 33

									                                                                                                           1


                                การสร้างเว็บเพ็จด้วยภาษา HTML

HTML คือ อะไร ?

                                                                    ู
         HTML หรือ HyperText Markup Language เป็นภาษาคอมพิวเตอร์รปแบบหนึ่ง HTML
   ่
เริมพัฒนาโดย ทิม เบอร์เ นอรส์ ลี (Tim Berners Lee) จากแม่แบบของภาษา SGML
(Standard Generalized Markup Language)โดยตัดความสามารถบางส่ ว นออกไป
                                              ั ั             ั
เพื่อให้สามารถทาความเข้าใจและเรียนรู้ได้ง่าย ปจจุบนเป็ นเวอร์ชน 4.01 ซึ่งถูกเสนอโดย
                                                           ้
World Wide Web Consortium (W3C) HTML ถูกสร้างขึนมาเพื่อจุดประสงค์หลัก คือ
การนาเสนอข้อมูลบนระบบเครือข่ายอินเทอร์เน็ต เอกสาร HTML จะมีนามสกุล *.html หรือ
*.htm

เราจะสร้างเว็บเพจได้อย่างไร?

     ั
   ป จ จุ บ ั น มี โ ปรแกรมส าเร็ จ รู ป ที่ ช่ ว ยในการสร้ า งเว็ บ เพจเกิ ด ขึ้ น อย่ า งมากมาย
       ู้                ่ ู้
ทาให้ผใช้ธรรมดาๆ ทีไม่รเรื่องของการเขียนโปรแกรมก็สามารถสร้างเว็บเพจของตัวเองได้แล้ว
                        ั ั
การสร้างเว็บเพจในปจจุบนสามารถทาได้ 2 วิธคอ         ี ื
                      ้                          ่
   1. สร้างขึนด้วยตนเอง โดยการใช้คาสังต่างๆ ของภาษา HTML
                    ่
          แล้วสังงานผ่านทางโปรแกรม Text Editor เช่น Notepad และ Wordpad
                                                         ่
   2. สร้างจากโปรแกรมสาเร็จรูป (Application) ทัวไป โดยใช้โปรแกรมต่างๆ
             ่ ี                                     ่ ั ั
          ทีมความสามารถในการสร้างเว็บเพจ ซึงปจจุบนมีให้เลือกใช้อย่างมากมาย เช่น
          Microsoft Frontpage, Macromedia Dreamweaver หรือแม้แต่โปรแกรม Microsoft
          Office ก็สามารถสร้างเว็บเพจได้
            ้ ่ี                                           ้ ่
          ผูทใช้โปรแกรมสาเร็จรูปพวกนี้ไม่จาเป็นต้องรูคาสังต่างๆ ของภาษา HTML
                 ุ่                                            ่               ่
          ให้ยงยากเลย เพราะโปรแกรมเหล่านี้จะทาการเปลียนข้อมูลต่างๆ ทีทาไว้ให้เป็นภาษา
          HTML โดยอัตโนมัติ

หลักการสร้างเว็บเพจด้วยตนเองโดยการใช้ภาษา HTML
       ก า ร จ ะ ส ร้ า ง เ ว็ บ เ พ จ ด้ ว ย ต น เ อ ง โ ด ย ใ ช้ ภ า ษ า HTML                   ไ ด้ นั ้ น
           ่       ่
จะต้องมีเครืองมือทีใช้ในการสร้างเว็บเพจอยู่ 2 ประเภท คือ Text Editor และ Web Browser
                                                           ่
       1. Text Editor คือ โปรแกรมต่างๆ ทีใช้ในการกาหนดข้อความ และรูปแบบคาสังต่างๆ                  ่
ของภาษา HTML                          ั
                              ซึ่ ง ป จ จุ บ ัน ผู้ เ ขีย นโปรแกรมส่ ว นใหญ่ จ ะใช้ โ ปรแกรม Notepad
ในการเขียนโปรแกรม HTML เป็นหลัก
       2. Web Browser คือ ส่วนที่ใช้สาหรับแสดงผลลัพธ์ของเอกสารทีเขียนด้วยภาษา            ่
HTML                 เ ห มื อ น กั บ ก า ร ค อ ม ไ พ ล์ ( Compiled)                    ห รื อ รั น ( Run)
                                                                                                 2


                                     ่
โปรแกรมในภาษาทางคอมพิว เตอร์ท ัว ๆ ไป ตัว อย่า งของเว็บ บราวเซอร์ท่ีนิ ย มใช้ ได้แ ก่
Internet Explorer , Netscape Navigator, Mozilla Firefox , Google Chrome

โครงสร้างของภาษา HTML
                                                                 ่
           การเขียนโปรแกรมด้วยภาษา HTML มีส่วนประกอบทีสาคัญอยู่ 2 ส่วน คือ
                          ่                 ่
           1. ส่ ว นที เ ป็ นข้ อ ความที จ ะพิ ม พ์           คือ ข้อ มูล ข้อ ความ เนื้ อ หาต่ า งๆ
   ่ ้
ทีตองการนาเสนอออกมาในเว็บเพจ
           2.                                                   ส่ ว น ที ่ เ ป็ น ค า สั ่ ง
ส่ ว นนี้ จ ะใช้ ใ นการจัด การรู ป ร่ า งและรู ป แบบของตัว อัก ษรหรือ เอกสาร จะเรีย กว่ า tag
              ่
และส่วนทีเป็ นคาสัง่ tag นี้ จะถูกเขียนอยู่ในเครื่องหมาย < > ทุกคาสัง่ เช่น <br>, <body>,
<head> เป็นต้น

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

        ก า ร ใ ช้ ง า น จ ะ ใ ช้ ด้ ว ย กั น เ ป็ น คู่ <B>…..</B>
                        ่                                         ่
เพื่อบอกขอบเขตของคาสังข้อความที่อยู่ภายใน Tag จะถูกควบคุมโดย Tag ทีครอบอยู่ บาง
Tag ไม่จาเป็นต้องมี Tag ปิด เช่น <BR>

       Attributes
       Attributes เป็ นส่วนขยายความสามารถของ Tag จะต้องใส่ภายในเครื่องหมาย < >
                        ้            ่                    ่
ในส่วน Tag เปิ ดเท่านัน Tag คาสัง HTML แต่ละคาสัง จะมี Attribute แตกต่างกันไป
                                                                                  ่
และมีจานวนไม่เท่ากัน การระบุ Attribute มากกว่า 1 Attribute ให้ใช้ช่องว่างเป็นตัวคัน
                                  ่
       เช่น Attributes ของ Tag เกียวกับการจัดพารากราฟ คือ <P> ประกอบด้วย
       ALIGN="Left/Right/Center/Justify"
         ่                 ั
       ซึงสามารถเขียนได้ดงนี้          <P ALIGN="Left">...</P>

โครงสร้างของภาษา HTML
                                                                                          3


       ไฟล์เอกสาร HTML ประกอบด้วยส่วนประกอบสองส่วนคือ Head กับ Body โดย ส่วน
                                                                               ้
Head จะเป็ น Header ของหน้าเอกสาร สาหรับส่วน Body จะเป็ นส่วนเนื้อหาของเอกสารนันๆ
     ้            ่
โดยทังสองส่วนจะอยูภายใน Tag <HTML>…</HTML>




         <HTML>
             <HEAD>
                  <TITLE>…..</TITLE>
             </HEAD>                                                Head Section
              <BODY>
                   <B> Content …. </B>                               Body Section
              </BODY>
         </HTML>




         1. ส่ ว น หั ว เ รื ่ อ ง เ อ ก ส า ร เ ว็ บ Head                         Section
                                                      ้
เป็ นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนันๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title),
      ้ั                      ์ ์
ชื่อผูจดทาเว็บ (Author), คียเวิรดสาหรับการค้นหา (Keyword)

<HEAD>
                        ่ ่
   <TITLE>ข้อความอธิบายชือเรืองของเว็บ</TITLE>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=TIS-620">
                                       ่ ้ ั
   <META NAME="Author" CONTENT="ชือผูพฒนาเว็บ">
   <META NAME="KeyWords" CONTENT="ข้อความ 1, ข้อความ 2, …">
</HEAD>

                      ่                                                       ั
         1.1. ข้อความทีใช้เป็ น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลกษณะพิเศษ
เ ช่ น ตั ว ห น า ,                                                 เ อี ย ง ห รื อ สี
และควรใช้ เ ฉพาะภาษาอั ง กฤษที่ ม ีค วามหมายครอบคลุ ม ถึ ง เนื้ อ หาของเอกสารเว็ บ
       ั
หรือมีลกษณะเป็นคาสาคัญในการค้นหา (Keyword)
         1.2. การแสดงผลจาก Tag TITLE บนเบราเซอร์จะปรากฏข้อความที่กากับด้วย Tag
TITLE ในส่วนบนสุดของกรอบหน้าต่าง (ใน Title Bar ของ Window นันเอง) ่
                                                                                            4


         1.3. Tag       META           จะไม่ ป รากฏผลบนเบราเซอร์ แต่ จ ะเป็ น ส่ ว นส าคัญ
ในการทาคลัง บัญ ชีเ ว็บ ส าหรับ ผู้ใ ห้บ ริการสืบค้นเว็บ (Search Engine) และค่ า อื่น ๆ
ของการแปลความหมาย
                                                          ั้
         1.4. การพิมพ์ชุดคาสัง่ HTML สามารถพิมพ์ได้ทงตัวพิมพ์เล็ก ตัวพิมพ์ใหญ่ หรือผสม
ก า ร ย่ อ ห น้ า เ ว้ น บ ร ร ทั ด ห รื อ ช่ อ ง ว่ า ง ส า ม า ร ถ ก ร ะ ท า ไ ด้ อิ ส ร ะ
                                 ่
โปรแกรมเบราเซอร์จะไม่สนใจเกียวกับระยะเว้นบรรทัดหรือย่อหน้า หรือช่องว่าง

                                                            ่
           2. ส่วนเนื้อหาเอกสารเว็บ (Body Section) ข้อมูลทีต้องการให้แสดงออกทางเอกสาร
HTML จะอยู่ภายใต้ tag <body>….</body>                 เป็ นส่วนการทางานหลักของหน้ าเว็บ
                                                               ่
เป็ นส่วนของข้อมูลที่ต้องการนาเสนอและการจัดรูปแบบข้อมูลซึง ประกอบด้วย Tag มากมาย
 ้       ั                                                         ิ
ขึนอยู่กบลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดโอ หรือไฟล์ต่างๆ Tag
   ้
ทังหมดภายใต้ Tag <BODY> … </BODY> และ แบ่งกลุ่มคาสังได้ดงนี้  ่ ั

                               ่ ่
                       กลุ่มคาสังเกียวกับการจัดการพารากราฟ
                                ่
                       กลุ่มคาสังจัดแต่ง/ควบคุมรูปแบบตัวอักษร
                                  ่
                       กลุ่มคาสังการทาเอกสารแบบรายการ (List)
                                    ่ ่
                       กลุ่มคาสังเกียวกับการทาลิงค์
                                     ่
                       กลุ่มคาสังจัดการรูปภาพ
                                       ่
                       กลุ่มคาสังจัดการตาราง (Table)
                                         ่
                       กลุ่มคาสังควบคุมเฟรม
                      กลุ่มคาสังอื่นๆ      ่

หมายเหตุ (Comment Tag)

        <!... >

          ่                      ่              ้
        ซึงข้อมูลในส่วนนี้สามารถทีจะระบุหรือใส่ขอมูลต่างๆ ได้
  ่          ั้
ซึงในส่วนนี้นนเราจะไม่สามารถดูได้ในเว็บเพจที่แสดง สามารถเปิดดูได้จากการเปิด Source
Code

คาศัพท์ที่ควรรู้

        อิ นเทอร์ เ น็ ต         (Internet)      หมายถึ ง ระบบเครือ ข่ า ย        (Network)
                                                                           ่
ขนาดใหญ่ ท่ีเ ชื่อ มต่ อ ด้ ว ยเครื่อ งคอมพิว เตอร์จ ากหลายๆ เครือ ข่ า ยทัว โลกเข้า ด้ ว ยกัน
      ้
ทาให้ขอมูลต่าง ๆ เชื่อมโยงกันจนเกิดเป็นอินเทอร์เน็ต
                                                                                                     5


             TCP/IP            (Transmision      Control         Protocol/Internet            Protocol)
เ ค รื่ อ ง ค อ ม พิ ว เ ต อ ร์ ต่ า ง                                                                ๆ
      ่                                       ้
ทีเชื่อมโยงกันอยู่บนระบบอินเทอร์เน็ตนันจะสามารถติดต่อสื่อสารกันได ้้จาเป็ นต้องมีวธการใ          ิี
                                                      ื
นสื่อสารกันบนมาตรฐานเดียวกัน ระบบที่ใช้ส่อสารบนอินเทอร์เน็ตเราเรียกว่า โปรโตคอล
                                           ่ ั ่ ั ั
(Protocol) สาหรับระบบมาตรฐานทีใช้กนอยูในปจจุบนคือ TCP/IP
             โดเมนเนม (Domain Name) คือ ชื่อ ที่ใ ช้ใ นการอ้างถึง IP Adress
                                                 ึ
เนื่อ งจากระบบอินเทอร์เ น็ ต มีข นาดใหญ่ ข้น ก็เ ป็ นการยากที่จ ะต้อ งจดจา IP Adress
                           ้ ้
จึงทาให้เกิดการตังชื่อขึนมาแทนเพื่อสะดวกในการเรียกใช้
             Uniform              Resource         Locator            (URL)                         URL
เป็ นการระบุ ต าแหน่ งของไฟล์ ท่ี เ ข้ า ถึ ง ได้ บ นอิ น เตอร์ เ น็ ต            ตั ว อย่ า งของ URL
http://www.bot.or.th/table
             เวิ ล ด์ ไ วด์เ ว็บ (World Wide Web) หรือ                        www หรือ               w3
เ ป็ น บ ริ ก า ร อ ย่ า ง ห นึ่ ง บ น ร ะ บ บ อิ น เ ท อ ร์ เ น็ ต
                            ้                                  ี
เป็ นการบริการให้ขอมูลข่าวสารในแบบสื่อผสมหรือมัลติมเดีย (Mulitimedia) อธิบายง่าย ๆ
ก็ ค ื อ มี ท ั ้ง ข้ อ ความ ภาพ และเสี ย ง รวมอยู่ ด้ ว ยกั น เดิ ม ที นั ้ น ระบบ               www
มี เ พี ย ง ข้ อ มู ล ที่ เ ป็ น เ พี ย ง ตั ว อั ก ษ ร เ ท่ า นั ้ น
แ ต่ เ นื่ อ ง จ า ก เ ท ค โ น โ ล ยี่ ใ น ป ั จ จุ บั น ไ ด้ พั ฒ น า ไ ป เ ป็ น อ ย่ า ง ม า ก
ท า ใ ห้ เ กิ ด มี ก า ร สื่ อ ส า ร แ บ บ ใ ห ม่ ใ น ลั ก ษ ณ ะ นี้ ขึ้ น
                                    ั ั ี                              ้
ภาพที่เคยนิ่ง ในสมัยก่ อนปจจุบนก็มการเคลื่อนไหวได้ อีกทังยังตอบโต้กบผู้ใช้ได้อีกด้ว ย  ั
                  ั ั
จนทาให้ปจจุบนระบบ www ทางานในลักษณะ interactive ไปแล้ว โดยเนื้อหาหลักของ www
        ้
นัน เป็ น เนื้ อ หาที่ส ร้า งขึ้น จากภาษา HTML (HyperText Markup Language)
  ่
ซึงถูกพัฒนาและกาหนดมาตรฐานโดย W3C(World Wide Web Consortium)
             เว็บไซด์ (Web Site) คือ หน้าเว็บเพจหลาย ๆ หน้า ซึ่งเชื่อมโยงกัน หรือเรียกว่า
hyperlink
             เว็บเพจ (Web Page) คือ เอกสารข้อมูลในแต่ละหน้าซึงถูกเขียนขึนด้วยภาษา HTML
                                                                    ่           ้
             โฮมเพจ (Home Page) คือ เว็บเพจหน้าแรกสุดของเว็บไซด์เราจะเรียกกว่า โฮมเพจ
             เว็บ บราวเซอร์ (Web Browser)                     คือ โปรแกรมส าหรับ เปิ ด เวบเพจ
                                                                         ั ั
หรือ ใช้ใ นการติด ต่ อ กับ บริก าร www เว็บบราวเซอร์ใ นปจ จุบน มีด้ว ยกันอยู่ห ลายตัว
แต่ ล ะตั ว จะมี คุ ณ ลั ก ษณ์ ก ารใช้ ง านมาตรฐานเหมื อ นกั น จะแตกต่ า งกั น บ้ า งเล็ ก น้ อ ย
                         ี
เว็บบราวเซอร์ท่เป็ นที่นิยมได้แก่ Internet Explorer, Netscape Navigator เป็ นต้น
                                         ่
ซึ่ง เว็บ บราวเซอร์น้ี แ ต่ ล ะเวอร์ช ัน ก็จ ะมีก ารรองรับ ความสารมารถของภาษา                    HTML
และรวมถึงความสามารถใหม่ ๆ ได้แตกต่างกันออกไป
             Downloading เป็ นการส่งผ่านไฟล์จากระบบคอมพิวเตอร์หนึ่งไปยังอีกเครื่องหนึ่ง
    ่                                                         ้ ิ
ซึงมักจะเป็นระบบคอมพิวเตอร์ขนาดเล็ก จากมุมมองของผูใช้อนเตอร์เน็ต การดาวน์โหลดไฟล์
                                                                                                   6


เป็ นการขอจากคอมพิว เตอร์เครื่องหนึ่ง (หรือ จากเว็บเพจบนเครื่องคอมพิว เตอร์อีกเครื่อ ง)
และรับไฟล์นนั้
        Uploading        เป็ นการส่ ง ผ่ า นในอี ก ทิ ศ ทางจากคอมพิ ว เตอร์ เ ครื่ อ งหนึ่ ง
โดยปกติ จ ากคอมพิ ว เตอร์ เ ครื่ อ งเล็ ก ไปอี ก เครื่อ งหนึ่ ง จากมุ ม ของผู้ ใ ช้ อิ น เตอร์ เ น็ ต
                             ่               ่ี ั ้
การอัพโหลดเป็นการส่งไฟล์ไปทีคอมพิวเตอร์ทตงค่าให้รบ       ั
                                                                                                    7


 Style
          ใช้สําหรับการสร้าง style sheet เช่น กําหนดสี ขนาด font หรือ scroll bar เป็ นต้น
เ ป็ น ก า ร กํ า ห น ด คุ ณ ลั ก ษ ณ ะ ข อ ง t           ag        ที่ กํ า ห น ด ใ น ห น้ า นั ้ น ๆ
หรือสร้างไว้สําหรับเรียกใช้ในเอกสารได้อก เพื่อความรวดเร็วในการ เขียน code และการ load
                                             ี
หน้า html คําสัง่ style สําหรับสร้าง style sheet สําหรับใช้ในเอกสาร

                                        สรุปคำสัง HTML
                                                ่
คำสังโครงสร้ำงภำษำ HTML
    ่
 <HTML>…</HTML>
        เป็นคําสังเริมต้นและสินสุดเอกสาร HTML
                  ่ ่         ้
<HEAD>…</HEAD>
        ใช้กําหนดข้อความในส่วนทีเป็นชื่อเรืองภายในคําสังนี้ จะมีคาสัง่ ย่อย <TITLE>
                                   ่      ่            ่         ํ
อีกหนึ่งคําสัง่
<TITLE> … </TITLE>
                                            ่                                       ่   ้
        เป็นส่วนแสดงชื่ออกสารโดยจะแสดงทีไตเติล บาร์ของ วินโดว์ท่ี เปิดเอกสารนี้อยูเท่านัน
<BODY>…</BODY>
        ส่วนเนื้อหาของโปรแกรมจะเริมต้นด้วยคําสัง่ <BODY> และสินสุดที่ คําสัง่ </BODY>
                                     ่                             ้
                ่ ้
ในระหว่างคําสังทังสองนี้จะมีส่วนแท็กต่างๆมากมาย
                                                                                               8



                        คำสัง
                            ่                                                   ผลลัพธ์
<title>....Welcome.. </title>                       ชื่อหัวเรื่ อง
<br>                                                เว้นบรรทัด
                  ่
<center>ข้อควำมอยูตรงกลำง</center>                                                   ่
                                                                           ข้อควำมอยูตรงกลำง
<p>………</p>                                          ย่อหน้ำ
<hr>                                                ขีดเส้น
<H1> กำรกำหนดหัวเรื่ องH1 </H1>
<H2> กำรกำหนดหัวเรื่ องH2</H2 >
                                                                   ่
                                                    การกาหนดห ัวเรืองH1
<H3> กำรกำหนดหัวเรื่ องH3</H3>
<H4> กำรกำหนดหัวเรื่ องH4</H4>
                                                                   ่
                                                    การกาหนดห ัวเรืองH2
<H5> กำรกำหนดหัวเรื่ องH5</H5>                                     ่
                                                    การกาหนดห ัวเรืองH3
<H6> กำรกำหนดหัวเรื่ องH6</H6> นี่คือตัวอักษรปกติ
                                                                   ่
                                                    การกาหนดห ัวเรืองH4

                                                                   ่
                                                    การกาหนดห ัวเรืองH5

                                                                   ่
                                                    การกาหนดห ัวเรืองH6


                                                      ่ ื
                                                    นีคอตัวอักษรปกติ
<B>ตัวอักษรหนำ</B><Br>                              ตัวอักษรหนา
<I>ตัวอักษรเอียง</I><Br>                            ตัวอักษรเอียง
<U>ตัวอักษรมีเส้น</U><Br>                           ตัวอักษรมีเส้น
<B><I><U>กำรใช้คำสังทั้ง 3
                      ่                                            ้
                                                    การใช้ คาสั่งทัง 3 แบบพร้ อมกัน
แบบพร้อมกัน</U></I></B>
<FONT                                               ข้อควำมสี น้ ำเงิน
COLOR="#FF00FF">ข้อควำมสี น้ ำเงิน</FONT>
<OL TYPE="A">                                             A. รำยกำรที่1
<LI>รำยกำรที่1                                            B. รำยกำรที่2
<LI>รำยกำรที่2                                            C. รำยกำรที่3
<LI>รำยกำรที่3
</OL>
<UL type="disc">                                               รำยกำร 1
<LI>รำยกำร 1                                                   รำยกำร 2
<LI>รำยกำร 2
</UL>
<UL type="circle">                                        o     รายการ
<LI>รำยกำร
                                                          ……
</UL>
                                                                                            9


<br> ……                                                            รายการ
<UL type="square">
<LI>รำยกำร
</UL>
< A HREF="http://www.velocall.com/" target="_blank" >ไปสู่   <A HREF="url"
www.velocall.com</A>                                         NAME="กำหนดชื่อเป้ ำหมำยของ Link ภำยในไฟล์"
                                                             TARGET="ใช้กำหนดว่ำ จะให้มีกำรเปิ ดเป้ ำหมำยของ
                                                             Link ไว้ที่ตำแหน่งใด">
                                                             คาสั่ง TARGET จะมีอยู่ด้วยกัน 4 ลักษณะคือ
                                                             1. TARGET="_blank" หมำยถึง จะมีกำร เปิ ด
                                                             Windows ใหม่ให้เมื่อ มีกำร Click ที่ลิงค์
                                                             2. TARGET="_top" หมำยถึง จะไม่มีกำร เปิ ด
                                                             Windows ใหม่ แต่ Link ที่สร้ำงจะทำกำรแสดงผลทับ
                                                             Windows เดิม
                                                             3. TARGET="_parent" หมำยถึง จะไม่มีกำร เปิ ด
                                                             Windows ใหม่ แต่จะมีกำรแสดงผลของ Link ทับไฟล์
                                                             ที่สร้ำง Link เดิมนันเอง
                                                                                 ่
                                                             4.TARGET="ชื่อเป้ ำหมำย" หมำยถึง จะมีกำรแสดงผล
                                                             ของ Link ไปยังเป้ ำหมำย NAME ที่กำหนด ที่ Frame
                                                             (Name ของ Frame) ที่สร้ำงขึ้น
<a href="mailto:jub_sit@hotmail.com">supasit</a>                          ่    ่ ื่                ่ ่
                                                             supasit <<เมือกดทีชอจะlinkไปยังหน ้าทีสงE-
                                                             mail ได ้
<table border="1" broder=1>                                  R1 R2 R3
<tr>                                                         c1 c2 c3
<td>R1</td>
<td>R2</td>
<td>R3</td>
</tr>
<tr>
<td>c1</td>
<td>c2</td>
<td>c3</td>
</tr>
</table>
                                                                                              10


การแสดงข้อความบนเว็บเพจเป็ นภาษาไทย

การจัดรูปแบบการแสดงผลใน Notepad
                      ้
        ในหลายๆ ครัง เราจะพบว่าเวลาพิมพ์ต ัว อักษรภาษาไทยลงในโปรแกรม Notepad
ก า ร แ ส ด ง ผ ล จ ะ ไ ม่ แ ส ด ง อ อ ก ม า เ ป็ น ภ า ษ า ไ ท ย อ ย่ า ง ที่ เ ร า ต้ อ ง ก า ร
                                     ่
หรือแสดงออกมาในรูปแบบตัวอักษรทีไม่สวยงาม อ่านยาก ฯลฯ
             ้              ่                  ้          ่
        ดังนัน ก่อนเราจะเริมทางานใดๆ รวมทังพิมพ์คาสังภาษา HTML ใดๆ ลงในโปรแกรม
                  ่ ้         ่                             ้
Notepad เราควรทีจะตังค่าเริมต้นของตัวอักษรโดยทาตามขันตอน ดังนี้

                   ่
            1. ไปทีเมนู Format - - > Font...




2. จากข้อ 1. จะเกิดผลลัพธ์ ดังภาพ
                                                                                                           11


             ั้
3. จากภาพให้ตงค่าตามภาพ




การกาหนดขนาดให้ข้อความ
               การจัดหน้ ากระดาษบนเว็บเพจให้ตรงตามความต้องการของผู้ท่ต้องการนาเสนอ        ี
อาจจะเป็ น เรื่อ งที่ ยุ่ ง ยากสัก หน่ อ ย เนื่ อ งจากว่ า เวลาที่ พิม พ์ ข้ อ มู ล ต่ า งๆ ใน Notepad
แ ล้ ว ไ ด้ จั ด ใ ห้ ข้ อ ค ว า ม อ ยู่ ต ร ง ก ล า ง ห รื อ ชิ ด ซ้ า ย ห รื อ พิ ม พ์ ข้ อ ค ว า ม ใ ห ม่
แ ต่ พ อ แ ส ด ง ผ ล บ น เ ว็ บ บ ร า ว น์ เ ซ อ ร์ จ ริ ง ๆ ก ลั บ ไ ม่ เ ป็ น เ ห มื อ น กั บ ที่ ตั ้ ง ไ ว้
เนื่ อ งจ าก ว่ า กา รจ ะให้ ข้ อ คว าม ที่ เ ขี ย นด้ ว ย HTML                   นั ้ น แส ดง ผล แบ บใ ด
                ่ ่ ั                                                      ่
จะต้องมีคาสังทีใช้กบข้อความไว้เสมอในภาษา HTML จะเรียกคาสังต่างๆ เหล่านี้ว่าแท็ก (TAG)

          ่
การใช้คาสัง <Hn>
                      ่
       ความหมายของคาสัง ใช้สาหรับกาหนดหัวเรือง (Heading Tag)
                                           ่
                                                      ั         ่ ี   ้                ่
                                ใช้สาหรับกาหนดขนาดให้กบข้อความทีมการตังไว้เป็ นหัวข้อเรือง

       ประเภทของ tag            tag คู่

                       ่
       รูปแบบการใช้คาสัง           <Hn>.....................ข้อความทีตองการ.......................</Hn>
                                                                     ่ ้

                                * n คือ ค่าของตัวเลขทีใช้สาหรับกาหนดขนาดของหัวเรือง
                                                       ่                        ่
                                   ่ ้
                                มีคาตังแต่ 1 ถึง 6
                                                     ่ ่       ่ี ุ        ุ่
                                โดยเลข 1 จะเป็ นหัวเรืองทีใหญ่ทสดและสาคัญทีสด

          ่
การใช้คาสัง <font size>
                                                                                                                 12




ความหมายของคาสัง่                ใช้สาหรับกาหนดขนาดของตัวอักษร (Font Size)

ประเภทของ tag                    tag คู่

รูปแบบการใช้คาสัง่                                              <font size
                                   =n>.....................ข้อความทีตองการ.......................</font>
                                                                    ่ ้

                                                       ่
                                 * n คือ ค่าของตัวเลขทีใช้สาหรับกาหนดขนาดของหัวเรื่อง
                                        ้
                                 มีค่าตังแต่ 1ถึง 7
                                   โดยขนาดของตัวอักษรปกติ จะมีค่าเท่ากับ 3

          ่
การใช้คาสัง <basefont size>

ความหมายของคาสัง่                                                          ้
                                     ใช้สาหรับกาหนดขนาดมาตรฐานของตัวอักษรทังหมดของเ
                                     อกสาร ( basefont size)

ประเภทของ tag                               ่
                                     tag เดียว

                ่
รูปแบบการใช้คาสัง                                                 <basefont size
                                           =n>.....................ข้อความทีตองการ.......................
                                                                            ่ ้
รูปแบบการเพิมขนาดตัวอักษรบา
            ่                                               <font
งจุด                        size=+n>........................ข้อความ...........................</font
                                                               >
รูปแบบการลดขนาดตัวอักษรบาง                                            <font size=-
จุด                                        n>........................ข้อความ...........................</font>




การขึ้นบรรทัดใหม่ และการจัดวางย่อหน้ าข้อความ
                                                                                                            13




                      ่
       ความหมายของคาสัง ใช้สาหรับกาหนดให้มการขึนบรรทัดใหม่ (Line
                                          ี ้
                        Break)

       ประเภทของ tag                   ่
                                tag เดียว

                       ่
       รูปแบบการใช้คาสัง                        ข้อความ.......................<br>
       หมายเหตุ                          ่ ่
                                ข้อความทีอยูหลังคาสัง่ <br>
                                           ้
                                จะถูกนาไปขึนบรรทัดใหม่

          ่
การใช้คาสัง <p>

ความหมายของคาสัง่          ใช้สาหรับจัดวางย่อหน้าข้อความ (Paragraph Break หรือ
                           Alignment)

ประเภทของ tag              tag คู่

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

                                           ่
                           รูปแบบการใช้คาสัง

                           <p align=n>...........................ข้อความ.............................</p>

                           * n คือ ตาแหน่งการจัดวางข้อความ คือ
                           LEFT        = จัดว่าข้อความชิดซ้าย (ค่าปกติ)
                                                       ่
                           CENTER = จัดข้อความกึงกลางบรรทัด
                           RIGHT       = จัดข้อความชิดขวาของบรรทัด
                                                                                    14


          ่
การใช้คาสัง <hr>
               ่
ความหมายของคาสัง ใช้สาหรับตีเส้นคัน (Horizontal Line) เพื่อแยกเอกสารออกเป็นส่วนๆ
                                  ่

  ประเภทของ tag              ่
                      tag เดียว

                 ่
 รูปแบบการใช้คาสัง                                  <hr>
   คาสังเพิ่ มเติ ม
       ่                            ่                           ั
                      size เป็ นคาสังที่ใช้ในการกาหนดความหนาให้กบเส้น
                      รูปแบบการใช้คาสัง   ่

                                                 <hr size=n>

                      * n คือ ความหนาของเส้น โดยการใส่ค่าตัวเลข (หน่วยเป็นพิกเซล)

                                     ่                           ั
                      width เป็ นคาสังที่ใช้ในการกาหนดความยาวให้กบเส้น
                      รูปแบบการใช้คาสัง   ่

                                                <hr width=n>

                      * n คือ ความยาวของเส้น โดยการใส่ค่าตัวเลข (หน่วยเป็นพิกเซล)
                        หรือ ระบุเป็นตัวเลข% ก็ได้
                        หากไม่ระบุจะเป็นการตีเต็มหน้าจอภาพ

                                     ่
                      align เป็ นคาสังที่ใช้ ในการกาหนดตาแหน่ งการของเส้น
                      รูปแบบการใช้คาสัง   ่

                                                <hr align=n>

                                                               ่
                      *n คือ ตาแหน่งการวางเส้น ว่าต้องการให้อยูตรงจุดใดของจอภาพ
                                  ่
                      โดยพิมพ์คาสังต่อไปนี้แทนตัว n
                                            ่ ิ
                      left = กาหนดให้เส้นอยูชดซ้าย
                                              ่ ิ
                      right = กาหนดให้เส้นอยูชดขวา
                                                  ่ึ
                      center = กาหนดให้เส้นอยู่กงกลางจอภาพ

                                       ่
                      noshade เป็ นคาสังที่ใช้ ในการกาหนดเส้นทึบไม่มีการแรเงาของเส้น
                                                                                                  15


                                    ่
                    รูปแบบการใช้คาสัง

                                                     <hr noshade>
   หมายเหตุ         การใช้คาสัง่ <hr> เพียงอย่างเดียวจะเป็นการตีเส้นแบบเต็มจอภาพ
                                                                      ้
                    หากต้องการเส้นขนาดอื่นๆ เช่น หน้าเท่านี้ ยาวเท่านัน
                                  ่      ่
                    จะต้องใช้คาสังอื่นเพิมเติมด้วย ดังนี้

                   ั
การกาหนด Style ให้กบตัวอักษร
การใช้คาสัง่ <b>
               ่
ความหมายของคาสัง                            ั
                           ใช้ในการกาหนดให้ตวอักษรมีความหนา (Bold)

ประเภทของ tag              tag คู่

                ่
รูปแบบการใช้คาสัง                    <b>.....................ข้อความ.......................</b>

                     ั                                       ่
ตัวอย่าง การกาหนดให้ตวอักษรมีความหนาใช้คาสัง่ <b>การพิมพ์คาสังภาษา HTML ใน Text
Editor
                                                                                                16


          ่
การใช้คาสัง <i>
ความหมายของคาสัง่                     ั
                     ใช้ในการกาหนดให้ตวอักษรมีความเอียง (Italic)

ประเภทของ tag        tag คู่

รูปแบบการใช้คาสัง่                 <i>.....................ข้อความ.......................</i>


          ่
การใช้คาสัง <u>
ความหมายของคาสัง่                               ั
                     ใช้ในการกาหนดขีดเส้นใต้ให้กบตัวอักษร (Underline)

ประเภทของ tag        tag คู่

รูปแบบการใช้คาสัง่                <u>.....................ข้อความ.......................</u>


          ่
การใช้คาสัง <s>
ความหมายของคาสัง่    ใช้ในการขีดเส้นทับตัวอักษร (Strikethrough)

ประเภทของ tag        tag คู่

รูปแบบการใช้คาสัง่                <s>.....................ข้อความ.......................</s>




          ่
การใช้คาสัง <sub>
ความหมายของคาสัง่             ่ ่                  ั
                     เป็ นคาสังทีใช้สาหรับกาหนดให้ตวอักษรห้อยลง (Subscript)

ประเภทของ tag        tag คู่

รูปแบบการใช้คาสัง่             <sub>.....................ข้อความ.......................</sub>
                                                                                                        17


                                             ่
                                   การใช้คาสัง <sup>
ความหมายของคาสัง่                     ่ ่                  ั         ้
                             เป็ นคาสังทีใช้สาหรับกาหนดให้ตวอักษรยกขึน (Superscript)

ประเภทของ tag                tag คู่

รูปแบบการใช้คาสัง่                     <sup>.....................ข้อความ.......................</sup>




                        ั
การกาหนดรูปแบบและสีให้กบตัวอักษร
          ่
การใช้คาสัง <font face>
ความหมายของคาสัง่               ่ ่
                       เป็ นคาสังทีใช้กาหนดการแสดงรูปแบบตัวอักษร (Font)

ประเภทของ tag          tag คู่

รูปแบบการใช้คาสัง่                                   <font
                       face="ชื่อแบบตัวอักษรที่ ต้องการ">.............ข้อความ............</font>

          ่
การใช้คาสัง <font color>
ความหมายของคาสัง่                     ่ ่
                             เป็ นคาสังทีใช้สาหรับกาหนดสีของตัวอักษร

ประเภทของ tag                tag คู่

รูปแบบการใช้คาสัง่             <font color="n" >....................ข้อความ.......................</font>
                                     ่
                             *n คือชือสีมาตรฐานต่างๆ เช่น red, green, blue ฯลฯ
                             หรือ
                             *n คือ รหัสสี (รหัสเลขฐาน 16) เช่น #000000, #FFFFFF ฯลฯ

หมายเหตุ                               ่
                             ตัวอย่าง ชือสีมาตรฐานต่างๆ ตัวอย่าง รหัสสี (รหัสเลขฐาน 16)
                                                                                                                          18


                            ั             ั
การกาหนดสีพื้นหลัง และสีตวอักษรพื้นฐานให้กบเว็บเพจ
การใช้คาสัง่ <body bgcolor>
ความหมายของคาสัง่                  ่ ่                 ้ื   ั
                          เป็ นคาสังทีใช้สาหรับกาหนดสีพนให้กบเอกสาร

ประเภทของ tag             tag คู่

รูปแบบการใช้คาสัง่
                          <body bgcolor="n" >
                          ข้อความ.......................................................................................
                          ....................................................................................................
                          ....................................................................................................
                          </body>

                                  ่
                          *n คือชือสีมาตรฐานต่างๆ เช่น red, green, blue ฯลฯ
                             หรือ
                          *n คือ รหัสสี (รหัสเลขฐาน 16) เช่น #000000, #FFFFFF ฯลฯ

          ่
การใช้คาสัง <body text>
ความหมายของคาสัง่                  ่ ่                                         ้
                          เป็ นคาสังทีใช้สาหรับกาหนดสีของตัวอักษรให้เหมือนกันทังเอกสาร

ประเภทของ tag             tag คู่

รูปแบบการใช้คาสัง่
                          <body text="n" >
                          ข้อความ.......................................................................................
                          ....................................................................................................
                          ....................................................................................................
                          </body>

                                  ่
                          *n คือชือสีมาตรฐานต่างๆ เช่น red, green, blue ฯลฯ
                          หรือ
                          *n คือ รหัสสี (รหัสเลขฐาน 16) เช่น #000000, #FFFFFF ฯลฯ
                                                                                                       19


                   ั
การจัดตาแหน่ งให้ กบข้อความ
          ่
การใช้คาสัง <center>
ความหมายของคาสัง่                   ่ ่ ั               ่
                           เป็ นคาสังทีใช้จดวางข้อความกึงกลางบรรทัด

ประเภทของ tag              tag คู่

รูปแบบการใช้คาสัง่                <center>....................ข้อความ.......................<center>


          ่
การใช้คาสัง <div align>
ความหมายของคาสัง่          ใช้สาหรับจัดวางตาแหน่งข้อความ

ประเภทของ tag              tag คู่

รูปแบบการใช้คาสัง่            <div align=n >........................ข้อความ.........................</div>

                           * n คือ ตาแหน่งการจัดวางข้อความ คือ
                           left     = จัดว่าข้อความชิดซ้าย (ค่าปกติ)
                                                   ่
                           center = จัดข้อความกึงกลางบรรทัด
                           right = จัดข้อความชิดขวาของบรรทัด

          ่
การใช้คาสัง <pre>
ความหมายของคาสัง่                   ่ ่ ั                    ่
                           เป็ นคาสังทีใช้จดรูปแบบเอกสารตามทีกาหนดไว้ใน Notepad
                           (Preformatted)


ประเภทของ tag              tag คู่

รูปแบบการใช้คาสัง่                   <pre>....................ข้อความ.......................</pre>


การกาหนดให้ตวอักษรวิ่ ง
              ั
          ่
การใช้คาสัง <marquee>
ความหมายของคาสัง่              ่ ่                  ั       ่
                      เป็ นคาสังทีใช้สาหรับกาหนดให้ตวอักษรวิง
                             ั                         ่ ้
                      ทาให้ตวอักษรมีความน่าสนใจมากยิงขึน
                                                                                            20


ประเภทของ tag        tag คู่

รูปแบบการใช้คาสัง่             <marquee>.................ข้อความ...............</marquee>
    ่ ่
คาสังเพิมเติม        behavior เป็ นคาสังที่ ใช้ในการกาหนดแนวทางการวิ่ งของข้อความ
                                        ่
                     รูปแบบการใช้คาสัง่

                       <marquee behavior=n>.................ข้อความ...............</marquee>

                     n คือ รูปแบบแนวทางการวิงของข้อความ มี 3 แบบ ดังนี้
                                            ่

                     - alternate คือ ให้ขอความวิงจากขอบซ้ายมาขอบขวา
                                                ้     ่
                        ่                    ิ่            ่
                     เมือถึงขอบขวาก็ให้วงกลับไปทางซ้าย วิงกลับไปกลับมา
                     - scroll คือ ให้ขอความวิงจากขวามาซ้าย เมือถึงขอบซ้าย
                                         ้          ่          ่
                            ้        ่
                     ก็ให้ขอความวิงออกมาจากขวาใหม่
                                   ้       ี
                     (เป็ นค่าปกติถาไม่มการกาหนดอะไรจะได้แบบนี้)
                     - slide คือ ให้ขอความวิงจากขวามาซ้าย
                                       ้          ่
                          ่                             ิ่
                     เมือถึงขอบซ้ายแล้วจะหยุดนิ่งไม่วงไปไหนอีก

                     direction เป็ นคาสังที่ ใช้ในการกาหนดทิ ศทางการวิ่ งของข้อความ
                                         ่
                     รูปแบบการใช้คาสัง ่

                       <marquee direction=n>.................ข้อความ...............</marquee>

                     n คือ ทิศทางการวิงของข้อความ มี 2 แบบ ดังนี้
                                      ่

                     - right คือ ให้ขอความวิงจากทางซ้ายมาทางขวา
                                      ้      ่
                     - left คือ ให้ขอความวิงจากทางขวามาทางซ้าย
                                    ้      ่

                     bgcolor เป็ นคาสังที่ ใช้ในการกาหนดสีพื้นให้กบข้อความที่ วิ่ง
                                      ่                           ั
                     รูปแบบการใช้คาสัง  ่

                      <marquee bgcolor="n">.................ข้อความ...............</marquee>
                     n คือ ชือของรหัสสีทตองการ ซึงมีได้ 2 แบบ คือ
                             ่          ่ี ้     ่
                     * ชื่อสีมาตรฐานต่างๆ เช่น red, green, blue ฯลฯ
                     หรือ
                     * รหัสสี (รหัสเลขฐาน 16) เช่น #000000, #FFFFFF ฯลฯ
                                                                                         21


หมายเหตุ                   ่            ั                         ้
                     ุ้คาสังนี้จะใช้ได้กบ Internet Explorer เท่านัน


การแสดงลาดับรายการ
          ่
การใช้คาสัง <ul>
ความหมายของคาสัง่                  ่ ่
                          เป็ นคาสังทีใช้แสดงรายการแบบไม่มเี ลขลาดับ (Unorder List หรือ
                          Bullet List)

ประเภทของ tag             tag คู่

รูปแบบการใช้คาสัง่                       <ul>.................หัวเรื่อง...............
                                                <li> ข้อความ..................
                                                <li> ข้อความ..................
                                                <li> ข้อความ..................
                                                <li> ข้อความ..................
                                                <li> ข้อความ..................
                                         </ul>
    ่ ่
คาสังเพิมเติม                           ่ ่            ่                      ่
                          type เป็ นคาสังทีใช้ในการเปลียนรูปแบบหัวข้อเป็ นแบบอืนๆ
                          รูปแบบการใช้คาสัง่

                                     <ul
                                     type=n>.................หัวเรื่อง...............
                                             <li> ข้อความ..................
                                             <li> ข้อความ..................
                                             <li> ข้อความ..................
                                     </ul>
                                           ่
                          n คือ ชนิดของเครืองหมาย มี 3 แบบ ดังนี้

                          - disc คือ วงกลมทึบ (ค่าปกติ) ตัวอย่าง
                          - circle คือ วงกลมโปร่ง ตัวอย่าง
                                               ่
                          - square คือ สีเ่ หลียมทึบ ตัวอย่าง
                                                                                               22


          ่
การใช้คาสัง <ol>
ความหมายของคาสัง่             ่ ่                    ั
                     เป็ นคาสังทีใช้แสดงรายการโดยใช้ตวเลขเรียงลาดับ (Order List
                     หรือ Number List)

ประเภทของ tag        tag คู่

รูปแบบการใช้คาสัง่             <ol type=n start=n2>.................หัวเรื่อง...............
                                     <li> ข้อความ..................
                                     <li> ข้อความ..................
                                     <li> ข้อความ..................
                                     <li> ข้อความ..................
                                     <li> ข้อความ..................
                               </ol>
หมายเหตุ                                        ่ ้       ั
                     n คือ รูปแบบชนิดของตัวเลขทีตองการ มีตวอย่าง ดังนี้

                     -   1 หมายถึง ตัวเลขอารบิค (ค่าปกติ)
                     -   A หมายถึง ตัวพิมพ์ใหญ่
                     -   a หมายถึง ตัวพิมพ์เล็ก
                     -   I หมายถึง ตัวเลขโรมันพิมพ์ใหญ่
                     -   i หมายถึง ตัวเลขโรมันพิมพ์เล็ก

                     n2 คือ

          ่
การใช้คาสัง <dl>
ความหมายของคาสัง่              ่ ่
                     เป็ นคาสังทีใช้แสดงรายการโดยกาหนดหัวข้อหรือข้อความ
                     (Definition List)

ประเภทของ tag        tag คู่

รูปแบบการใช้คาสัง่                <dl>.................หัวข้อเรื่อง...............
                                         <dt> หัวข้อ....... <dd> คาอธิ บาย.....
                                         <dt> หัวข้อ....... <dd> คาอธิ บาย.....
                                         <dt> หัวข้อ....... <dd> คาอธิ บาย.....
                                  </dl>
                                                                                         23


          ่
การใช้คาสัง <dir>
ความหมายของคาสัง่                ่ ่
                        เป็ นคาสังทีใช้แสดงรายการแบบไดเรกทอรี (Directory List)
                                              ้   ่ ี
                        ใช้สาหรับแสดงหัวข้อสันๆ ทีมความยาวไม่เกิน 20 ตัวอักษร
                             ี                         ี ั
                        ไม่มการเรียงลาดับรายการ และไม่มตวเลขลาดับนาหน้าข้อความ

ประเภทของ tag           tag คู่

รูปแบบการใช้คาสัง่                  <dir>.................หัวข้อเรื่อง...............
                                           <li> ข้อความ..................
                                           <li> ข้อความ..................
                                           <li> ข้อความ..................
                                    </dir>

          ่
การใช้คาสัง <menu>
ความหมายของคาสัง่                ่ ่                     ิ
                        เป็ นคาสังทีใช้แสดงรายการแบบเมนูลสต์ (Menu List)
                                                                ่
                        รูปแบบการใช้งานให้ผลเหมือนกับการใช้คาสัง dir
ประเภทของ tag           tag คู่

รูปแบบการใช้คาสัง่                  <menu>.................หัวข้อเรื่อง...............
                                         <li> ข้อความ..................
                                         <li> ข้อความ..................
                                         <li> ข้อความ..................
                                    </menu>




การจัดการกับรูปภาพ
          ่
การใช้คาสัง <img src>
ความหมายของคาสัง่                ่ ่             ู
                        เป็ นคาสังทีใช้สาหรับใส่รปภาพลงในเอกสาร HTML

ประเภทของ tag                  ่
                        tag เดียว
                                                                            24


รูปแบบการใช้คาสัง่                            <img src="n">
                     *n หมายถึง
                      ่                      ่ ้
                     ชือและนามสกุลของรูปภาพทีตองการนามาใส่ในเอกสาร
    ่ ่
คาสังเพิมเติม                       ่ ่
                     align เป็ นคาสังทีใช้ในกาหนดตาแหน่งในการจัดวางรูปภาพ
                     รูปแบบการใช้คาสัง่

                                          <img src="n" align=n1>

                             ่
                     n คือ ชือไฟล์และนามสกุลของรูปภาพ
                     n1 คือ ตาแหน่งการวางภาพ มีรายละเอียด ดังนี้
                     - top วางข้อความระดับบนรูปภาพ
                     - middle วางข้อความระดับกลางรูปภาพ
                     - bottom วางข้อความระดับล่างรูปภาพ (ค่ามาตรฐาน)
                     - left วางรูปภาพทางซ้ายของข้อความ (ค่ามาตรฐาน)
                     - right วางรูปภาพทางขวาของข้อความ
                                    ่ ่
                     width เป็ นคาสังทีใช้กาหนดความกว้างของรูปภาพ
                     รูปแบบการใช้คาสัง่

                                          <img src="n" width=n1>

                             ่
                     n คือ ชือไฟล์และนามสกุลของรูปภาพ
                     n1 คือ ความกว้างของรูปภาพ มีหน่วยเป็ น Pixels

                                     ่ ่
                     height เป็ นคาสังทีใช้กาหนดความสูงของรูปภาพ

                     รูปแบบการใช้คาสัง่

                                      <img src="n" height=n1>
                             ่
                     n คือ ชือไฟล์และนามสกุลของรูปภาพ
                     n1 คือ ความสูงของรูปภาพ มีหน่วยเป็ น Pixels

                                     ่ ่                ั
                     border เป็ นคาสังทีใช้สร้างกรอบให้กบรูปภาพ
                     (สีของกรอบรูปภาพจะมีสเี ดียวกับตัวอักษร)
                     รูปแบบการใช้คาสัง่

                                          <img src="n" boder=n1>
                                                                                       25


                                   ่
                           n คือ ชือไฟล์และนามสกุลของรูปภาพ
                           n1 คือ ความหนาของกรอบรูปภาพ มีหน่วยเป็ น Pixels
                                           ่ ่
                           hspace เป็ นคาสังทีใช้กาหนดช่องว่างแนวนอน ซ้าย-ขวา
                           ระหว่างรูปภาพกับข้อความ
                           รูปแบบการใช้คาสัง่

                                             <img src="n" hspace=n1>
                                   ่
                           n คือ ชือไฟล์และนามสกุลของรูปภาพ
                           n1 คือ ตัวเลขช่องว่างแนวนอนซ้าย-ขวา
                           ระหว่างรูปภาพกับข้อความ มีหน่วยเป็ น Pixel
                                           ่ ่                     ้
                           vspace เป็ นคาสังทีใช้กาหนดช่องว่างแนวตังด้าน บน-ล่าง
                           ระหว่างรูปภาพกับข้อความ
                           รูปแบบการใช้คาสัง่

                                             <img src="n" vspace=n1>
                                   ่
                           n คือ ชือไฟล์และนามสกุลของรูปภาพ
                                                     ้
                           n1 คือ ตัวเลขช่องว่างแนวตังด้านบน-ล่าง
                           ระหว่างรูปภาพกับข้อความ มีหน่วยเป็ น Pixel
หมายเหตุ                        ู             ่
                           ไฟล์รปภาพต่างๆ ทีจะนามาใส่ในเอกสาร HTML
                                           ่                                      ้
                           จะต้องถูกเก็บอยูในโฟลเดอร์เดียวกันกับเอกสาร HTML เท่านัน
                                ่
                           ภาพทีนามาใส่ในเอกสาร ควรมีขนาดของไฟล์ภาพไม่เกิน 40 Kb
                                   ่
                           รูปภาพทีนิยมนามาลงในหน้าเว็บเพจ มีอยู่ 2 ชนิด คือ
                           1. รูปภาพชนิด Graphics Interchange Format (GIF)
                           2. รูปภาพชนิด Joint Photographic Experts Group (JPEG หรือ
                           JPG)
          ่
การใช้คาสัง <background>
ความหมายของคาสัง่                   ่ ่                               ้
                           เป็ นคาสังทีใช้ในการนารูปภาพต่างๆ มาเป็ นพืนหลังของเอกสาร
                           หรือ Background

ประเภทของ tag                     ่
                           tag เดียว

รูปแบบการใช้คาสัง่                           <body background="n">
                           *n หมายถึง
                            ่                      ่ ้
                           ชือและนามสกุลของรูปภาพทีตองการนามาใส่ในเอกสาร
                                                                                                      26


        การสร้างตาราง
            ่
        คาสังหลักที่ใช้ในการสร้างตาราง
                                  ่                                          ั
                              คาสังหลักที่ ใช้ในการสร้างตารางของภาษา HTML มีดงนี้
   <table>...........</table>                                 ่ ่
                                                     เป็ นคาสังทีกาหนดให้โปรแกรมเบราว์เซอร์สร้างตาราง
   <caption>............</caption>                            ่ ่ ั้ ่               ่      ั
                                                     เป็ นคาสังทีใช้ตงชือหรือหัวข้อเรืองให้กบตาราง
   <tr>............</tr>                                       ่ ่
                                                     เป็ นคาสังทีใช้กาหนดแถว (row)
   <th>...........</th>                                       ่ ่
                                                     เป็ นคาสังทีใช้ในการกาหนดข้อมูลส่วนหัวของตาราง
   <td>...........</td>                                        ่ ่
                                                     เป็ นคาสังทีใช้ในการกาหนดข้อมูลในแต่ละแถว

            ่
        คาสังต่างๆ ที่ ใช้ในการตกแต่งตารางของภาษา HTML
                           ในคาสัง <table> สามารถใช้คาสังตกแต่งตารางเพิ่ มเดิ มได้ดงนี้
                                 ่                      ่                          ั
1. คาสัง border
       ่                                                                   ั
                                                 ใช้กาหนดความหนาให้กบเส้นของของตาราง มีหน่วยเป็ น Pixel
                                                              ่       ้              ่
                                                 ถ้าไม่ใส่คาสังนี้ไว้ดวย border จะมีคาเท่ากับ 1
                                                 (คือจะไม่เห็นเส้นขอบของตาราง)
2. คาสัง align
       ่                                          ใช้กาหนดตาแหน่งการจัดวางตาราง มี 3 รูปแบบ คือ
                                                  left คือ จัดตารางชิดซ้าย (ค่าปกติ) ของจอภาพ
                                                  right คือ จัดตารางชิดขวาของจอภาพ
                                                  center คือ จัดตารางไว้กลางหน้าจอภาพ
3. คาสัง width
       ่                                                                    ้
                                                 ใช้กาหนดความกว้างของตารางทังหมด มีหน่วยเป็ น Pixel
                                                                 ็
                                                 หรือเปอร์เซ็นต์กได้
4. คาสัง height
       ่                                                                  ้
                                                 ใช้กาหนดความสูงของตารางทังหมด มีหน่วยเป็ น Pixel
                                                                 ็
                                                 หรือเปอร์เซ็นต์กได้
5. คาสัง cellspacing
       ่                                         ใช้กาหนดระยะห่างระหว่างช่องแต่ละช่องในตาราง
                                                          ่
                                                 โดยการเพิมขนาด หรือลดขนาดความหนาของเส้นขอบตาราง
6. คาสัง cellpadding
       ่                                         ใช้กาหนดระยะห่างระหว่างบรรทัดของตาราง
                                                          ่
                                                 โดยการเพิมขนาดหรือลดขนาดความสูงของเส้นขอบตาราง
7. คาสัง background
       ่                                                                     ้                     ั
                                                 ใช้ในการนารูปภาพมาใส่เป็ นพืนหลังของตาราง (ใช้ได้กบ I.E.
                                                       ้
                                                 เท่านัน)
8. คาสัง bgcolor
       ่                                                         ้ื                    ั            ้
                                                 ใช้ในการกาหนดสีพนหลังของตาราง (ใช้ได้กบ I.E. เท่านัน)
9. คาสัง bordercolor
       ่                                         ใช้ในการกาหนดสีของเส้นขอบ
                                                                                         27



                   ในคาสัง <CAPION> สามารถใช้คาสังเพิ่ มเดิ มได้ดงนี้
                         ่                       ่               ั
1. คาสัง align
       ่                                                        ่   ั
                                      ใช้กาหนดตาแหน่งการวางชือให้กบข้อความ มี 3 รูปแบบ คือ
                                                       ่
                                      left คือ จัดวางชือด้านซ้ายของตาราง
                                                         ่
                                      right คือ จัดวางชือด้านขวาของตาราง
                                                           ่
                                      center คือ จัดวางกึงกลางของตาราง
2. คาสัง valign
       ่                                                       ่    ั
                                      ใช้กาหนดตาแหน่งการวางชือให้กบข้อความ มี 2 รูปแบบ คือ
                                                     ่
                                      top คือ จัดวางชือด้านบนของตาราง
                                                          ่
                                      bottom คือ จัดวางชือด้านล่างของตาราง

                      ในคาสัง <TH> สามารถใช้คาสังเพิ่ มเดิ มได้ดงนี้
                            ่                   ่               ั
1. คาสัง align
       ่                       ใช้กาหนดตาแหน่งการวางข้อมูลในแนวนอน ของทุกช่องในตาราง มี 3
                               ตาแหน่ง คือ
                               left คือ จัดวางข้อมูลชิดซ้ายของช่องตาราง
                               right คือ จัดวางข้อมูลชิดขวาของช่องตาราง
                               center คือ จัดวางข้อมูลกึงกลางของช่องตาราง
                                                        ่
2. คาสัง valign
       ่                                                           ้
                               ใช้กาหนดตาแหน่งการวางข้อมูลในแนวตัง ของทุกช่องในตาราง มี 3
                               ตาแหน่ง คือ
                               top คือ จัดวางข้อมูลไว้ชดขอบบนของช่องตาราง
                                                       ิ
                               middle คือ จัดวางข้อมูลไว้กงกลางของช่องตาราง
                                                          ่ึ
                               bottom คือ จัดวางข้อมูลไว้ขอบล่างของช่องตาราง
       ่
5. คาสัง width                 .ใช้สาหรับกาหนดความกว้างของช่องในตาราง มีหน่วยเป็ น Pixel
       ่
2. คาสัง height                .ใช้สาหรับกาหนดความสูงของช่องในตาราง มีหน่วยเป็ น Pixel
2. คาสัง rowspan
       ่                                    ่
                               .ใช้กาหนดให้ชองในตารางมีความสูงเป็ นกีเ่ ท่าของของช่องเดิม เช่น
                                                              ่     ี
                               ROWSPAN=5 แสดงว่ากาหนดให้ชองนี้มความสูงเป็ น 5
                               เท่าของความสูงเดิม
2. คาสัง colspan
       ่                                    ่
                               .ใช้กาหนดให้ชองในตารางมีความกว้างเป็ นกีเ่ ท่าของของช่องเดิม เช่น
                                                            ่     ี
                               COLSPAN=5 แสดงว่ากาหนดให้ชองนี้มความกว้างเป็ น 5
                               เท่าของความกว้างเดิม
2. คาสัง bgcolor
       ่                                ้ื
                             ใช้กาหนดสีพนภายในช่องตารางแต่ละช่อง
                                                                                                 28



                             ในคาสัง <TD> สามารถใช้คาสังเพิ่ มเดิ มได้ดงนี้
                                   ่                   ่               ั
1. คาสัง align
       ่                              ใช้กาหนดตาแหน่งการวางข้อมูลในแนวนอน ของทุกช่องในตาราง มี 3
                                      ตาแหน่ง คือ
                                      left คือ จัดวางข้อมูลชิดซ้ายของช่องตาราง
                                      right คือ จัดวางข้อมูลชิดขวาของช่องตาราง
                                                               ่
                                      center คือ จัดวางข้อมูลกึงกลางของช่องตาราง
2. คาสัง valign
       ่                              ใช้กาหนดตาแหน่งการวางข้อมูลในแนวนอน ของทุกช่องในตาราง มี 3
                                      ตาแหน่ง คือ
                                                              ิ
                                      top คือ จัดวางข้อมูลไว้ชดขอบบนของช่องตาราง
                                                                 ่ึ
                                      middle คือ จัดวางข้อมูลไว้กงกลางของช่องตาราง
                                      bottom คือ จัดวางข้อมูลไว้ขอบล่างของช่องตาราง
       ่
5. คาสัง width                        .ใช้สาหรับกาหนดความกว้างของช่องในตาราง มีหน่วยเป็ น Pixel
       ่
2. คาสัง height                       .ใช้สาหรับกาหนดความสูงของช่องในตาราง มีหน่วยเป็ น Pixel
2. คาสัง rowspan
       ่                                           ่
                                      .ใช้กาหนดให้ชองในตารางมีความสูงเป็ นกีเ่ ท่าของของช่องเดิม เช่น
                                                                     ่     ี
                                      ROWSPAN=5 แสดงว่ากาหนดให้ชองนี้มความสูงเป็ น 5
                                      เท่าของความสูงเดิม
2. คาสัง colspan
       ่                                           ่
                                      .ใช้กาหนดให้ชองในตารางมีความกว้างเป็ นกีเ่ ท่าของของช่องเดิม เช่น
                                                                   ่     ี
                                      COLSPAN=5 แสดงว่ากาหนดให้ชองนี้มความกว้างเป็ น 5
                                      เท่าของความกว้างเดิม
2. คาสัง bgcolor
       ่                                       ้ื
                                    ใช้กาหนดสีพนภายในช่องตารางแต่ละช่อง

        การนารูปภาพมาใส่ในตาราง
                   <TD><IMG SRC="ชื่อภำพ.นำมสกุล"> </TD>


        การเชื่อมโยงหน้ าเว็บเพจ
            ่                             ้
        คาสังในการสร้างจุดเชื่อมโยงโดยใช้ขอความ
                                                                                              29


การเชื่อมโยงภายในหน้ าเว็บเพจเดียวกัน

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

                ่
รูปแบบการใช้คาสัง    กาหนดจุดเชื่อมโยง โดยใช้คาสัง่

                                                         <a
                        href=#ชื่อจุดเชื่อมโยง>......ข้อความที่ ใช้เป็ นจุดเชื่อมโยง......</a>

                         ่     ่
                     #=ชือจุดเชือมโยง (Link) คือ
                      ่                         ่        ่                      ่
                     ชือของตาแหน่งในเอกสารทีใช้เป็ นจุดเชือมโยงไปยังเนื้อหาส่วนอืนๆ

                     กาหนดเป้ าหมาย (Target) โดยใช้คาสัง่

                                  <a name=ชื่อเป้ าหมาย> </a>......ข้อความ......

                     ชือเป้าหมาย (Target) คือ
                        ่
                      ่                       ่ ้        ่
                     ชือของตาแหน่งปลายทางทีตองการให้จุดเชือมโยงมาถึง

การเชื่อมโยงไปยังหน้ าเว็บเพจอื่นๆ
ความหมาย                           ่               ่       ่
                          คือ การเชือมโยงไปยังจุดเชือมโยงทีอยู่คนละหน้าเว็บเพจกัน
                ่
รูปแบบการใช้คาสัง
                                                         <a
                          href=ชื่อไฟล์.นามสกุล>......ข้อความที่ ใช้เป็ นจุดเชื่อมโยง......</a>

การเชื่อมโยงไปยังเว็บไซต์อื่นๆ

ความหมาย                            ่                                ่
                           คือ การเชือมโยงไปยังโปรโตคอล (Protocol) ทีกาหนด
                ่
รูปแบบการใช้คาสัง
                              <a href="URL">......ข้อความที่ ใช้เป็ นจุดเชื่อมโยง......</a>
                                                                                                  30


                     ั
       การกาหนดสีให้กบจุดเชื่อมโยง

                ่
รูปแบบการใช้คาสัง                                        <body n=ชื่อสีมาตรฐาน>
หมายเหตุ                                      ่ ่                 ่ ้
                              * n คือ แท็กคาสังทีใช้กาหนดส่วนทีตองการให้เป็ นสี โดย
                              text คือ การกาหนดสีให้กบตัวอักษรทังเอกสาร
                                                            ั         ้
                              link คือ การกาหนดสีตวอักษรทีเ่ ป็ นจุดเชือมโยง
                                                      ั                 ่
                              vlink คือ การกาหนดสีตวอักษรทีเ่ ป็ นจุดเชือมโยง แต่เคยมีการคลิกใช้งานไปแล้ว
                                                        ั                 ่
                              alink คือ การกาหนดสีตวอักษรทีเ่ ป็ นจุดเชือมโยง และกาลังไปยังเป้าหมาย (Target)
                                                          ั                 ่
                                       ้
                              ในขณะนัน (Active Link)
                              bgcolor คือ การกาหนดสีให้กบพืนหลังของเอกสา
                                                              ั ้


       การสร้างจุดเชื่อมโยงโดยรูปภาพ


                ่
รูปแบบการใช้คาสัง                          <a href="URL"><img src=ชื่อรูปภาพ.นามสกุล></a>
หมายเหตุ                                      ่ ่                  ่ ้
                              * n คือ แท็กคาสังทีใช้กาหนดส่วนทีตองการให้เป็ นสี โดย
                                                           ั
                              text คือ การกาหนดสีให้กบตัวอักษรทังเอกสาร้
                                                     ั                   ่
                              link คือ การกาหนดสีตวอักษรทีเ่ ป็ นจุดเชือมโยง
                                                       ั                   ่
                              vlink คือ การกาหนดสีตวอักษรทีเ่ ป็ นจุดเชือมโยง แต่เคยมีการคลิกใช้งานไปแล้ว
                              alink คือ การกาหนดสีตวอักษรทีเป็ นจุดเชือมโยง และกาลังไปยังเป้าหมาย (Target)
                                                         ั       ่           ่
                                       ้
                              ในขณะนัน (Active Link)
                                                             ั ้
                              bgcolor คือ การกาหนดสีให้กบพืนหลังของเอกสาร

       การจัดสร้างเฟรม
           ่
       คาสังหลักที่ใช้ในการจัดสร้างเฟรม
           <frameset>........</frameset>            ่ ่
                                           เป็ นคาสังทีใช้แสดงบนเฟรม

              <frame>                               ่ ่
                                           เป็ นคาสังทีใช้กาหนดการ แสดงผลในแต่ละเฟรม

                                                    ่ ่                ่                      ้
              <noframe>.........</noframe> เป็ นคาสังซึงจะแสดงผลก็ต่อเมือโปรแกรมบราวเซอร์ของผูใช้
                                           ไม่สนับสนุนการแสดงผลแบบเฟรม
                                                                                        31


     ตัวอย่างโครงสร้างการสร้างเฟรม
     <frameset>
             <frame>
             <frame>
             <noframe> ข้อความ</noframe>
        </frameset>

               ่
        1. คาสัง FRAMESET
ความหมาย                           ่ ่
                          เป็ นคาสังทีระบุให้โปรแกรมบราวเซอร์แบ่งหน้าจอออกเป็ นเฟรม มี 2 ประเภท
                ่
รูปแบบการใช้คาสัง                        ้
                          1. แบ่งตามแนวตัง

                                             <frameset cols="value1, value2">

                          2. แบ่งตามแนวนอน

                                             <frameset rows="value1, value2">
หมายเหตุ                                 ั
                          การกาหนดค่าให้กบ value มีอยู่ 3 แบบ คือ
                          1. กาหนดค่าให้มีหน่ วยเป็ นพิ กเซล (Pixel) เช่น
                                               <frameset cols="200, 600">

                          2. กาหนดค่าให้มีหน่ วยเป็ นเปอร์เซ็นต์ (%) เช่น
                                           <frameset cols="25%, 25%, 50%">

                          3. กาหนดค่าตามความสัมพันธ์ของแต่ละเฟรม จะแทนโดยเครืองหมาย (* )
                                                                            ่
                          เช่น

                                                <frameset cols=" 240, * ">

                                                <frameset cols=" *, * , * ">
               ่
        2. คาสัง FRAME
ความหมาย                           ่ ่                                ่ื
                          เป็ นคาสังทีใช้ในการแสดงผลแต่ละเฟรม โดยระบุชอไฟล์เอกสาร HTML
                                    ู       ่ ้
                          หรือไฟล์รปภาพทีตองการ
                ่
รูปแบบการใช้คาสัง           <frameset src="file_name"
                            name=frame_name
                                                                        32


            marginwidth=value
            marginheight=value
            scrolling=option1
            frameborder=option2
            noresize>
หมายเหตุ   src                    ่ื    ่ี ้                   ้
                          ใช้ระบุชอไฟล์ทตองการให้แสดงผลในเฟรมนันๆ

           file_name       ่                      ู
                          ชือไฟล์เอกสาร HTML ไฟล์รปภาพ เป็ นต้น

           name               ั้ ่    ั      ่
                          ใช้ตงชือให้กบเฟรมเพือใช้ในการเรียก

           frame_name      ่       ่ ั้ ้
                          ชือเฟรมทีตงขึน

           marginwidth ใช้กาหนดความกว้างของช่องว่างด้านซ้ายและขวา (Margin)
                        ระหว่างขอบของเฟรมกับข้อมูลในเฟรม
           marginheight ใช้กาหนดความกว้างของช่องว่างด้านบนและล่าง (Margin)
                        ระหว่างขอบของเฟรมกับข้อมูลในเฟรม
           value             ่
                        ค่าทีกาหนดเป็ นความกว้างของช่องว่างระหว่งเฟรมกับข้อมูล
                        โดยมีหน่วยเป็ นพิกเซล
           scrolling    ใช้กาหนดให้โปรแกรมบราวเซอร์แสดง/ซ่อนแถบเลื่อน
                                          ่ ้
                        (Scrolling bar) ทีดานข้างและด้านล่างของเฟรม
                           ่
                        เมือข้อมุลมีความยาวมากกว่า 1 หน้าจอ
           option1                 ่
                        ตัวเลือกเพือแสดง/ซ่อนแถบเลื่อน มี 3 ตัวเลือก
                        YES หมายถึง แสดงแถบเลื่อน
                        NO หมายถึง ซ่อนแถบเลื่อน
                        AUTO หมายถึง
                                              ่
                        แสดงแถบเลื่อนก็ต่อเมือข้อมูลมีความยาวมากกว่า 1 หน้าจอ
                        (ค่า default)
           frameborder ใช้กาหนดให้โปรแกรมบราวเซอร์แสดง/ซ่อนเส้นแบ่งเฟรม

           option2                  ่
                          ตัวเลือกเพือแสดง/ซ่อนเส้นแบ่งเฟรม มี 2 ตัวเลือก
                          0 หมายถึง ซ่อนเส้นแบ่งเฟรม
                          1 หมายถึง แสดงเส้นแบ่งเฟรม
           noresize                    ู้                  ่
                          ใช้กาหนดให้ผใช้ไม่สามารถปรับเปลียนขนาดของเฟรมได้
                          โดยปกติจะสามารถปรับได้ โดยคลิกเมาส์ทเ่ี ส้นแบ่งเฟรม
                                                                  33


http://school.obec.go.th/shanikarn/e_learning/HTML/learning.htm
http://school.obec.go.th/krurenu/html/p6-2.html

								
To top