HTML - ส่วนหัว

เราได้เรียนรู้ว่าเอกสาร HTML ทั่วไปจะมีโครงสร้างดังนี้ -

Document declaration tag 
<html>
   
   <head>
      Document header related tags
   </head>

   <body>
      Document body related tags
   </body>
   
</html>

บทนี้จะให้รายละเอียดเพิ่มเติมเล็กน้อยเกี่ยวกับส่วนหัวซึ่งแสดงด้วยแท็ก HTML <head> แท็ก <head> เป็นที่เก็บแท็กที่สำคัญต่างๆเช่นแท็ก <title>, <meta>, <link>, <base>, <style>, <script> และ <noscript>

แท็ก HTML <title>

แท็ก HTML <title> ใช้สำหรับระบุหัวเรื่องของเอกสาร HTML ต่อไปนี้เป็นตัวอย่างในการตั้งชื่อให้กับเอกสาร HTML -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Title Tag Example</title>
   </head>

   <body>
      <p>Hello, World!</p>
   </body>

</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

แท็ก HTML <meta>

แท็ก HTML <meta> ใช้เพื่อให้ข้อมูลเมตาเกี่ยวกับเอกสาร HTML ซึ่งรวมถึงข้อมูลเกี่ยวกับการหมดอายุของเพจผู้เขียนเพจรายการคีย์เวิร์ดคำอธิบายเพจเป็นต้น

ต่อไปนี้เป็นลักษณะการใช้งานที่สำคัญบางประการของแท็ก <meta> ในเอกสาร HTML -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Meta Tag Example</title>

      <!-- Provide list of keywords -->
      <meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">

      <!-- Provide description of the page -->
      <meta name = "description" content = "Simply Easy Learning by Tutorials Point">

      <!-- Author information -->
      <meta name = "author" content = "Tutorials Point">

      <!-- Page content type -->
      <meta http-equiv = "content-type" content = "text/html; charset = UTF-8">

      <!-- Page refreshing delay -->
      <meta http-equiv = "refresh" content = "30">

      <!-- Page expiry -->
      <meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">

      <!-- Tag to tell robots not to index the content of a page -->
      <meta name = "robots" content = "noindex, nofollow">

   </head>

   <body>
      <p>Hello, World!</p>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

แท็ก HTML <base>

แท็ก HTML <base> ใช้สำหรับระบุ URL พื้นฐานสำหรับ URL สัมพัทธ์ทั้งหมดในเพจซึ่งหมายความว่า URL อื่น ๆ ทั้งหมดจะถูกต่อเข้ากับ URL พื้นฐานในขณะที่ค้นหารายการที่กำหนด

ตัวอย่างเช่นหน้าและรูปภาพที่กำหนดทั้งหมดจะถูกค้นหาหลังจากนำหน้า URL ที่กำหนดด้วย URL พื้นฐาน http://www.tutorialspoint.com/ ไดเรกทอรี -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Base Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
   </head>

   <body>
      <img src = "/images/logo.png" alt = "Logo Image"/>
      <a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a> 
   </body>

</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

แต่ถ้าคุณเปลี่ยน URL พื้นฐานเป็นอย่างอื่นเช่นหาก URL พื้นฐานเป็น http://www.tutorialspoint.com/home รูปภาพและลิงก์อื่น ๆ จะกลายเป็นเหมือน http://www.tutorialspoint.com/home/images /logo.png และ http://www.tutorialspoint.com/html/index.htm

แท็ก HTML <link>

แท็ก HTML <link> ใช้เพื่อระบุความสัมพันธ์ระหว่างเอกสารปัจจุบันและทรัพยากรภายนอก ต่อไปนี้เป็นตัวอย่างการเชื่อมโยงไฟล์สไตล์ชีตภายนอกที่มีอยู่ในcss ไดเรกทอรีย่อยภายในเว็บรูท -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML link Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      <link rel = "stylesheet" type = "text/css" href = "/css/style.css">
   </head>
	
   <body>
      <p>Hello, World!</p>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

แท็ก <style> HTML

แท็ก HTML <style> ใช้เพื่อระบุสไตล์ชีตสำหรับเอกสาร HTML ปัจจุบัน ต่อไปนี้เป็นตัวอย่างในการกำหนดกฎสไตล์ชีตสองสามข้อในแท็ก <style> -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML style Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <style type = "text/css">
         .myclass {
            background-color: #aaa;
            padding: 10px;
         }
      </style>
   </head>
	
   <body>
      <p class = "myclass">Hello, World!</p>
   </body>

</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

Note- หากต้องการเรียนรู้เกี่ยวกับวิธีการทำงานของ Cascading Style Sheet โปรดตรวจสอบบทช่วยสอนแยกต่างหากที่css

แท็ก <script> HTML

แท็ก HTML <script> ใช้เพื่อรวมไฟล์สคริปต์ภายนอกหรือเพื่อกำหนดสคริปต์ภายในสำหรับเอกสาร HTML ต่อไปนี้เป็นตัวอย่างที่เราใช้ JavaScript เพื่อกำหนดฟังก์ชัน JavaScript อย่างง่าย -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML script Tag Example</title>
      <base href = "http://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "OK"  />
   </body>

</html>

สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้ซึ่งคุณสามารถลองคลิกที่ปุ่มที่กำหนด -

Note- หากต้องการเรียนรู้เกี่ยวกับการทำงานของ JavaScript โปรดตรวจสอบบทช่วยสอนแยกต่างหากที่มีอยู่ที่javascript