คำสั่งในการกำหนดโครงสร้างหลัก


         

3.  คำสั่งในการกำหนดโครงสร้างหลัก

      โครงสร้างหลักของเอกสาร HTML จะประกอบด้วยแท็กคำสั่งหลักๆซึ่งมีรายละเอียดดังนี้

       3.1  ประกาศชนิดของเอกสาร (HTML DOCTYPE)
               บรรทัดแรกสุดของเอกสาร HTML จะเป็นการประกาศชนิดของเอกสาร หรือ Document TypeDeclaration
(DTD) , หรือเรียกสั้นๆว่า การประกาศ DOCTYPE ซึ่งจะเป็นการบอกถึงรุ่นของ HTML หรือ XHTML ที่เราใช้และ
ยังบอกถึงเบราว์เซอร์รู้ด้วยว่าจะต้องแปลคำสั่งต่างๆในส่วนถัดๆ มาอย่างไร
               ใน HTML รุ่นก่อนการประกาศชนิดของเอกสารจะใช้คำสั่งที่ยุ่งยาก ตัวอย่างเช่น ใน HTML4 จะประกาศดังนี้

               <!DOCTYPE HTMLPUDLIC”-//W3C//DTD HTML 4.01//EN”
                  “http://www.w3.org/TR/html4/loose.dtd”>

                แต่ใน HTML5 จะใช้การประกาศชนิดของเอกสารที่ง่ายขึ้นกว่าเดิมมาก โดยเขียนดังนี้

<!DOCTYPE html>

        3.2  เริ่มต้นเอกสารด้วยแท็กคำสั่ง <html>

                หลังจากที่เราประกาศ DOCTYPE แล้วเราจะใส่แท็กคำสั่ง <html> ซึ่งเป็นคำสั่งแบบแท็กคู่เพื่อใช้บอก
จุดเริ่มต้นและจุดจบของเอกสารโดยแท็กคำสั่งนี้จะคลุมเนื้อหาทั้งหมดในหน้าเว็บเพจนั้นไว้

     <!DOCTYPE html>
     <html>

     </html>

        3.3  กำหนดส่วนหัวของเอกสารด้วยแท็ก <head>

                โครงสร้างของเอกสาร HTML จะรียงตามลำดับชั้น ซึ่งเอกสารส่วนใหญ่จะต้องมีสวนหัวของเอกสาร
ดังนั้นเราจะกำหนดส่วนหัวของเอกสารต่อจากแท็กคำสั่ง <html> ทันทีโดยใช้แท็ก <head> ในการกำหนด
จุดเริ่มต้นของส่วนหัว และปิดท้ายด้วยแท็ก </head>
     <!DOCTYPE html>
     <html>
          <head>
          </head>
      </html>
                ส่วนหัวของเอกสารถือเป็นองค์ประกอบหลักของเอกสาร HTML โดยจะประกอบด้วยข้อมูลพื้นฐาน
เช่น ชื่อเรื่อง (Title) และข้อมูลของข้อมูล (Metadata คือข้อมูลที่อธิบายให้ทราบรายละเอียดของข้อมูลที่ต้องการ)
เช่น คำหลัก (keyword),ชุดอักขระ (character encoding),ข้อมูลผู้เขียนเว็บ,และคำอธิบาย

                การใส่ชื่อเรื่องด้วยแท็กคำสั่ง <title>


                แท็กคำสั่ง <title>  …… </title>  เป็นคำสั่งที่ใช้กำหนดข้อความที่ต้องการนำมาแสดงผล
บนแถบชื่อเรื่อง (Title bar) โดยกำหนดความยาวของข้อความได้ไม่เกิน 64 ตัวอักษร

                การใส่ข้อมูล metadata ด้วยแท็ก <meta>

                ตัวอย่างเช่น การกำหนดชุดอักขรที่จะใช้ในหน้าเว็บใน HTML5 จะเขียนได้ง่ายๆ ดังนี้
        <meta charset=”UTF-8”>
                    อันที่จริงเราไม่จำเป็นต้องรู้ลึกถึงการเข้ารหัสอักขระ ซึ่งโดยพื้นฐานก็คือ การกำหนดชุดของอักขระ
ในภาษาที่มนุษย์เข้าใจที่จะนำมาใช้ในเอกสารของเรา มันจะเป็นการดีที่จะกำหนดให้เป็น UTF-8 ซึ่งเป็นชุดอักขระสากล
(Universal Character set) ที่ใช้ได้กับทุกภาษานอกจากเรายังอาจใส่ข้อมูลอื่นๆได้อีก เช่น 
    <meta name=“author”content=“ittiwiti”>


        3.4  ใส่เนื้อหาในแท็กคำสั่ง <body>

                หลังจากที่เรากำหนดส่วนหัวของเอกสารได้แก่ กำหนดชื่อเรื่องใน<title>,และกำหนดข้อมูลใน <mata>แล้ว
เราก็พร้อมจะที่จะสร้างส่วนของเนื้อหาของเราที่ต้องการให้แสดงผลในเว็บเบราว์เซอร์ได้ ซึ่งส่วนของเนื้อหานี้จะถูก
เขียนไว้้ในแท็กคำสั่ง <body>……</body>

สรุปโครงสร้างหลักของเอกสาร HTML

        3.5  การกำหนดภาษาใน HTML5
               การกำหนดภาษาพื้นฐานที่จะใช้ในหน้าเอกสาร เป็นสิ่งสำคัญสำหรับโปรแกรมต่างๆ ที่เข้าถึงหน้าเอกสารนั้น
รวมทั้งโปรแกรมค้นหาอย่าง Search engines ทางที่ง่ายที่สุดในการกำหนดภาษาในเอกสาร HTML ก็คือการใส่คำสั่ง lang ในแท็กคำสั่งหลัก <html> ตัวอย่างเช่น 
<html lang=“en”>
                จากตัวอย่างนี้ค่าที่กำหนดคือ en ซึ่งเป็นการกำหนดว่าเอกสารนี้ถูกเขียนในภาษาอังกฤษแต่ก็จะไม่ม
ีปัญหาใด ๆ ถ้าในเอกสารนั้นมีภาษาอื่นอยู่ด้วย

         3.6  การใส่หมายเหตุ (Comment)

                 HTML ก็เหมือนกับการเขียนโปรแกรมภาษาส่วนใหญ่ที่สามารถเขียนหมายเหตุลงไปได้ ซึ่งหมายเหตุนี้อาจเป็นข้อความเพื่อเตือนความจำของผู้เขียน หรือบอกให้ผู้ศึกษาโปรแกรมของเราได้ทราบ
โดยเว็บเบราว์เซอร์จะไม่ประมวลในส่วนนี้ ส่วนของหมายเหตุจะขึ้นต้นด้วย <!— ตามด้วยข้อความหมายเหตุ
ที่ต้องการ ซึ่งเป็นอะไรก็ได้ยกเว้นขีดคั่นคู่ (--) เนื่องจากเป็นเครื่องหมายบอกจุดสิ้นสุดของส่วนนี้  (-->) เช่น 

<meta name=“author” content= “ittiwiti”> <!—บอกชื่อผู้เขียน -- >

         3.7 ตัวอย่างเว็บเพจที่เขียนด้วย HTML5


<!DOCTYPE html>
<html lang ="en">
     <head>
     <!--basic.html -->
              <title> basic.html </title>
              <meta charset="UTF-8">
     </head>
     <body>

                <h1> Level One Headline </h1>
                <p>
                        This is a paragraph.
                         Note that the text is automatically wrapped.
                </p>

     </body>
</html>

ไม่มีความคิดเห็น:

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