รู้จักคำสั่งในการกำหนดโครงสร้างหลักในภาษา HTML

<html doctype>, <html>, <head>, <title>, <body>



(HTML DOCTYPE)

        คือการประกาศชนิดของเอกสาร ในบรรทัดแรกสุดของเอกสาร Html จะเป็นการประกาศชนิดของเอกสาร หรือ Document Type Declaretion (DTD) หรือเรียกสั้น ๆ ว่าการประกาศ DOCTYPE นั้นเอง

        ตัวอย่าง การประกาศชนิดของเอกสารใน HTML5

<!DOCTYPE html>
500x500

Start tag html

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

<!DOCTYPE html>

<html>

</html>

500x500

แท็ก <head>

        ในโครงสร้างของเอกสาร HTML นั้นจะเรียงตามลำดับชั้น ซึ่งเอกสารส่วนใหญ่จะต้องมีส่วนหัวของเอกสาร ดังนั้นเราจึงกำหนดส่วนหัวของเอกสารต่อจากแท็กคำสั่ง <html> ทันทีโดยใช้แท็ก <head> ซึ่งเป็นคำสั่งแบบแท็กคู่

        ตัวอย่าง การกำหนดส่วนหัวของเอกสารใน HTML5

<!DOCTYPE html>

<html>

   <head>

   </head>

</html>

500x500


องค์ประกอบหลักในส่วนหัวของเอกสาร HTML จะประกอบด้วยข้อมูลพื้นฐาน เช่น

<title> และ <meta>



แท็ก <title>

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

<title> Web application </title>

แท็ก <meta>

        คำสั่งแท็ก <meta> คือ ข้อมูลที่อธิบายให้ทราบเกี่ยวกับรายละเอียดของข้อมูลที่ต้องการ เช่น ชุดอักขระ(character encoding), ข้อมูลผู้เขียนเว็บ และคำอธิบายต่าง ๆ

        ตัวอย่าง การกำหนดชุดอักขระที่จะใช้ในหน้าเว็บในเอกสาร HTML5

<meta charset="UTF-8">

        UTF-8 เป็นชุดอักขระสากล (Universal charecer set) ที่ใช้ได้กับทุกภาษา

500x500


การสร้างและใส่เนื้อหาใน Tag คำสั่ง <body>



แท็ก <body>

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

<body> ............... </body>

การกำหนดภาษาใน HTML5

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

<html lang="en">

        "en" คือการกำหนดว่าเอกสารนี้ถูกเขียนในภาษาอังกฤษ และจะไม่มีปัญหาใด ๆ หากในเอกสารนั้นมีภาษาอื่นด้วย

500x500

การเขียน Comment

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

        วิธีการเขียน จะขึ้นต้นด้วยเครื่องหมาย <!-- ตามด้วยข้อความหมายเหตุที่เราต้องการแต่ยกเว้นขีดคั่นคู่ (--) เนื่องจากเป็นเครื่องหมายบอกจุดสิ้นสุดของ Comment (-->)

<title> Web application </title> <!-- แสดงคำว่า Web application บนแถบชื่อเรื่อง -->
500x500


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



Code ตัวอย่าง


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Web appication</title>
  <meta charset="utf-8">
</head>
<body>

  <h1>HTML5 Language</h1>
  <p>
    Main structure html5
  </p>

</body>
</html>            
              
Download code

500x500

เอกสารอ้างอิง

        สิทธิชัย ประสานวงศ์. (2559). การสร้างเว็บไซต์(ด้วยภาษา Html5). กรุงเทพฯ:ซอฟท์เพรส


Back Next