HTML Head

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

  • ข้อมูลเมตา คือข้อมูลที่ไม่แสดงผล แต่เป็นข้อมูลที่ใช้กำหนดรูปแบบการแสดงผลของเว็บไซต์ เช่น การเข้ารหัสอัขระ การแสดงหัวข้อของเว็บไซต์ การกำหนดรูปแบบ style หรือการใช้งานสคริปต์ของ javaScript เป็นต้น

เกี่ยวข้องกับข้อมูลเมต้า

  • <title> กำหนดชื่อของแท็บเว็บไซต์
  • <style> ใช้งาน CSS เพื่อจัดรูปแบบเอกสาร HTML 
  • <link> เชื่อมโยงไฟล์ปัจจุบันกับไฟล์ภายนอก
  • <meta>โดยปกติจะใช้เพื่อระบุชุดอักขระ คำอธิบายหน้าคำสำคัญผู้เขียนเอกสารและการตั้งค่ารูปแบบการแสดงผล 

1.<title>

<html>
 <head>
  <title>ชื่อแท็บด้านบน</title>
 </head>
</html>

ไฟล์ที่ 1 test_title.html

 

2.<style>

<html>
 <head>
  <style>
   body{
    background-color:lightblue;
   }
   h1{
   	color : white;
    text-shadow : 2px 3px 3px grey;
   }
  </style>
 </head>
 
 <body>
  <h1>ทดลองใช้ Style</h1>
 </body>
</html>

ไฟล์ที่ 2 test_style.html

 

3.<link>

<html>
 <head>
  <!-- ไฟล์ภายนอก -->
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <!-- หรือลิงค์ภายในเว็บไซต์ของเรา -->
  <link rel="stylesheet" href="style.css">
 </head> 
</html>

ไฟล์ที่ 3 test_link.html

 

4.<meta>

<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
</html>

ไฟล์ที่ 4 test_meta.html

อธิบายไฟล์ที่ 4

  • บรรทัดที่ 3 กำหนดการเข้ารหัสชุดอักขระเป็น UTF-8
  • บรรทัดที่ 4 กำหนดค่าให้เว็บไซต์สามารถยืดได้ หดได้ ตามความเหมาะสมของอุปกรณ์ที่แตกต่างกัน (ซึ่งปัจจุบันมีการพัฒนาเว็บไซต์เป็น Responsive Website คือสามารถแสดงมุมมองที่เหมาะสมสวยงามเหามะสมกับอุปกรณ์ที่ใชในการแสดงผล) 

 

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: