28/3/59

แท็ก HTML Header ที่สำคัญที่ควรรู้จัก

แท็ก HTML Header ที่สำคัญที่ควรรู้จัก


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

The HTML <title> Tag

HTML <title> แท็กเอาไว้สำหรับกำหนด title ให้กับ HTML document

ตัวอย่างการใช้งานแท็ก <title>
<title>HTML Title Tag Example</title>

The HTML <meta> Tag

HTML <meta> แท็กจะใช้ในการกำหนด metadata ของ HTML document ซึ่งรวมไปถึงการเพิ่มข้อมูลเกี่ยวกับเพจ keywords description และอื่น ๆ อีกมาก เรามาดูตัวอย่างที่สำคัญกันครับ

<!-- เป็นการกำหนด keywords ให้กับเว็บเพจ ว่ามี keywords อะไรบ้างโดยกั้นด้วยเครื่องหมายจุลภาค หรือลูกน้ำ -->
<meta name="keywords" content="Java, PHP, HTML, Javascript, CSS">

<!-- เป็นการกำหนด description ให้กับเว็บเพจ -->
<meta name="description" content="เพราะทุกวันคือการเรียนรู้ เรียนรู้ไปพร้อมกันกับ คนดีที่แสนเลว">

<!-- เป็นการกำหนดข้อมูล Author ให้กับเว็บเพจ -->
<meta name="author" content="Doesystem">

<!-- เป็นการกำหนด content type ให้กับเว็บเพจนั้น ๆ -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- กำนหนดการ refreshing delay ให้กับ Page -->
<meta http-equiv="refresh" content="30">

<!-- เป็นการกำหนดค่า expiry -->
<meta http-equiv="expires" content="Wed, 21 June 2016 15:55:55 GMT">

<!-- เป็นแท็กที่บอกว่าไม่ให้ robots index ข้อมูลในเพจนี้ -->
<meta name="robots" content="noindex, nofollow">

The HTML <base> Tag

HTML <base> แท็กนี้ก็มีความสำคัญไม่น้อย ซึ่งจะเป็นแท็กที่ใช้สำหรับกำหนด base URL สำหรับ relative URLs ตัวอย่างง่าย ๆ ถ้าเราไม่ได้กำหนด base URL ถ้าเราอยู่ใน directory เช่น http://www.doesystem.info/html/index.html ถ้าเราต้องการไปที่ http://www.doesystem.info/index.html เราก็ต้องสร้างลิ้งซึ่งเป็นดังนี้ ../index.html เพื่อบอกว่าให้ย้อน URL ไปหนึ่งอัน แต่ถ้าเรามี base URL ที่ชี้ไปหา http://www.doesystem.info/ แล้วเราสามารถสร้างลิ้งเป็น index.html ได้เลย

The HTML <link> Tag

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

<base href="http://www.doesystem.info/" />
<link rel="stylesheet" type="text/css" href="/css/style.css">

จากโค้ดเป็นการที่เรา ลิ้งไปยังเอกสารข้างนอกที่ชื่อ style.css ใน subdirectory css เราไม่จำเป็นต้องระบุ http://www.doesystem.info/css/style.css เพราะว่าเรามีแท็ก base ไว้อยู่แล้ว

The HTML <style> Tag

HTML <style> แท็กเป็นการกำหนด style ที่ใช้ในหน้าเพจนั้น ๆ ตัวอย่างโค้ดตามด้านล่าง

<style type="text/css">
.myclass{
   background-color: #aaa;
   padding: 10px;
}
</style>

The HTML <script> Tag

HTML <script> เป็นการกำหนด script ให้กับหน้าเพจนั้น ๆ ตัวอย่างโค้ดตามด้านล่าง

<script type="text/javascript">
function Hello(){
   alert("Hello, World");
}
</script>

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

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