Chapter 4

การกำหนดรายละเอียดในส่วน Head

เนื่องจากหัวข้อนี้ มีความต่อเนื่องจากบทก่อนหน้านี้ จึงวางเนื้อหาไว้ต่อกัน แต่สำหรับผู้ที่พึ่งเริ่มต้นเรียน HTML จะข้ามบทนี้ไปก่อนก็ได้ค่ะ เนื่องจากเกี่ยวพันกับเนื้อหาที่ยังไม่ได้เรียน เกรงว่าจะงง เมื่อศึกษาเรื่อง HTML, CSS, JavaScript จบแล้ว ค่อยย้อนกลับมาอ่านบทนี้ หรือถ้าอยากจะอ่าน ก็ให้อ่านเรื่อง meta tag ส่วนเรื่องอื่นๆ อ่านผ่านๆ เพื่อให้พอทราบก็พอค่ะ บทนี้เป็นบทที่สำคัญมากบทหนึ่ง ไม่ควรพลาด !

รายละเอียดในส่วน Head ได้แก่ ข้อความ title, meta, การกำหนด style sheet และ คำสั่ง script

ตัวอย่าง

1. ex_chapter04.html
2. style.css
3. js_function.js

download ไฟล์ตัวอย่าง คลิกที่นี่

ex_chapter04.html   แสดงให้เห็นว่าส่วน head สามารถใส่สิ่งใดลงไปได้บ้าง

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>enjoyday.net แนะนำการสร้างเว็บไซต์ คุณก็ทำได้</title>

<meta name="Keywords" content="สอนทำเว็บไซต์์, สอนเขียนเว็บเพจ, HTML, CSS, XHTML, JavaScript">

<meta name="Description" content="แนะนำการสร้างเว็บไซต์ บทเรียนการสอนเขียนเว็บเพจด้วย HTML, CSS, XHTML, JavaScript และข้อมูลข่าวสารในแวดวงคอมพิวเตอร์และอินเตอร์เน็ตที่น่าสนใจ">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- กำหนด style sheet ที่จะใช้ในหน้าเว็บเพจนี้ -->
<style type="text/css" media="screen">
p { color:blue; }
</style>

<!-- ใช้ style sheet จากภายนอก-->
<link rel="stylesheet" type="text/css" href="css/style.css">


<!-- กำหนด function javascript ที่จะใช้ในหน้าเว็บเพจนี้-->
<script type="text/javascript">
function Sayhello()
{
alert("Welcome to enjoyday.net");
}
</script>


<!-- ใช้ javascript function Saygoodbye() จากภายนอก-->
<script type="text/javascript" language="javascript" src="script/js_function.js" ></script>

</head>

<body onLoad="Sayhello();" onUnload="Saygoodbye();">
<p>ส่วนของเนื้อหา อยู่ตรงนี้</p>
</body>
</html>


style.css เป็น style sheet ที่ถูกเรียกใช้ในไฟล์ ex_chapter04.html
p { font-weight:bold}

js_function.jsเป็น function javascript ที่ถูกเรียกใช้ในไฟล์ ex_chapter04.html
function Saygoodbye()
{
alert("Goodbye see you next time");
}
คลิกที่นี่ เพื่อดูผลลัพธ์

1. Title
ใช้สําหรับให้แสดงข้อความที่อยู่ใน title bar ของ web browser ตัวอย่างเช่น <title>enjoyday.net แนะนำการสร้างเว็บไซต์ คุณก็ทำได้</title>

2. Meta
ใช้กําหนดคุณสมบัติให้เว็บเพจ เช่น กําหนดคําสําคัญ (keyword) สําหรับ Search Engine, กําหนดชุดตัวอักษร เป็นต้น

Meta Element มี 2 รูปแบบ คือ

2.1 Meta Name ใช้สําหรับกําหนดคําค้นหา, รายละเอียดเกี่ยวกับเว็บไซต์ สําหรับให้ Search Engine เช่น google, yahoo, msn นำข้อมูลที่เราระบุไว้ใน meta name ไปใช้ในการประมวลผลจัดเก็บเว็บไซต์

รูปแบบคําสั่งและ attribute value ของ name ที่ใช้หลักๆ มีแค่ 3 value

1) บรรยายเว็บไซต์ด้วยคำสำคัญ

<meta name="Keywords" content="สอนทำเว็บไซต์์, สอนเขียนเว็บเพจ, HTML, CSS, XHTML, JavaScript">
คือพวก คำ,วลี,กลุ่มคำที่สื่อความหมายเกี่ยวกับเว็บไซต์ ที่คนนิยมใช้ในการค้นหาข้อมูล

2) บรรยายเว็บไซต์ด้วยประโยคสรุป
<meta name="Description" content="แนะนำการสร้างเว็บไซต์ บทเรียนการสอนเขียนเว็บเพจด้วย HTML, CSS, XHTML, JavaScript และข้อมูลข่าวสารในแวดวงคอมพิวเตอร์และอินเตอร์เน็ตที่น่าสนใจ">
เมื่อมีการค้นหา Search Engine จะนำข้อความใน Description  ไปแสดงในผลการค้นหา ถ้าเราไม่ได้ระบุไว้ Search Engine อาจจะนำข้อความ หรือเนื้อหาที่ปรากฏอยู่ในหน้าเว็บเพจนั้นไปแสดงแทน ซึ่งอาจไม่ใช่ใจความสำคัญที่เราต้องการ


3) คําสั่งสําหรับบอกให้ Robot ของ Search Engine ทําอะไรกับหน้าเว็บเพจได้บ้าง
โดยปกติเมื่อ Robot ของ Search Engine มาเจอเว็บของเรา ก็จะเข้ามาเก็บข้อมูล หรือ index ข้อมูลในหน้าเว็บกลับไปฐานข้อมูลของ Search Engine เพื่อนำไปประมวลผลต่อไป แต่ถ้าเราไม่ต้องการให้ Search Engine เก็บข้อมูลในเว็บเพจหน้าใด เราสามารถกำหนดได้

- noindex ไม่ให้ index เนื้อหาในหน้านี้ (แต่ถ้าเจอลิงค์ในหน้า ก็ให้ตามไปทำ index หน้าเว็บเพจต่างๆ ด้วยตามปกติ)
- nofollow ไม่ให้วิ่งตาม link ทั้งหมดที่เจอในหน้านี้
- noarchive ไม่ให้ทำการ cached เก็บหน้าเว็บเพจของเราไว้ใน Search Engine

มาดูตัวอย่างการใช้งานกันค่ะ

ใช้สำหรับบอก Robot ของ Search Engine ไม่ให้ทําการ index หน้าปัจจุบัน และทุกหน้าที่หน้าปัจจุบัน link ไป รวมถึงไม่ให้เก็บข้อมูลใน cache ของ Search Engine ด้วย

<meta name="Robots" content="noindex,nofollow,noarchive">
<meta name="Robots" content="none">

ใช้สำหรับบอก Robot ของ Search Engine ทําการ index หน้าปัจจุบัน และทุกหน้าที่หน้าปัจจุบัน link ไป (การใส่ meta index, follow กับการไม่ใส่ ผลไม่แตกต่างกัน)
<meta name="Robots" content="index,follow">

ใช้สำหรับบอก Robot ของ Search Engine ทําการ index หน้าปัจจุบัน และทุกหน้าที่หน้าปัจจุบัน link ไป รวมถึงให้เก็บข้อมูลใน cache ของ Search Engine ด้วย
<meta name="Robots" content="all">

meta name อื่นๆ เช่น
ใช้สำหรับบอกกับ Robot ของ Search Engine ว่า ให้มาเก็บข้อมูลอีกครั้งเมื่อไหร่ เช่น 7วันข้างหน้า, 2 เดือนข้างหน้า
<meta name="revisit-after" content="7 days">
<meta name="revisit-after" content="2 months">

ใช้สำหรับบอก โปรแกรมที่ใช้สร้างเว็บเพจนี้, ผู้เขียนหน้านี้, ผู้เป็นเจ้าของลิขสิทธิ์ เป็นต้น
<meta name="Generator" content="EditPlus 1.2">
<meta name="Author" content="enjoyday.net">
<meta name="Copyright" content="&copy; 2009 enjoyday.net">


2.2 Meta HTTP-EQUIV ใช้สําหรับกําหนดชุดของตัวอักษรที่ใช้ หรือสําหรับสั่ง refresh หน้าเว็บเพจหรือ ให้ไปที่เว็บไซต์ หรือไฟล์อื่นๆ ตามเวลาที่กําหนด (delay เป็นวินาที)

คำสั่งสำหรับกำหนดชุดตัวอักษรที่ใช้ในหน้าเว็บเพจ ปัจจุบันนิยมกำหนดเป็น utf-8
สําหรับการแสดงผลในภาษาไทย ใช้ windows-874 หรือ tis-620
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<meta http-equiv="Content-Type" content="text/html; charset=tis-620">

คำสั่งสำหรับสั่งให้ Re-direct หน้าเว็บเพจอื่นๆ หรือเพื่อ Refresh หน้าเว็บเพจปัจจุบัน
<meta http-equiv="Refresh" content="10; URL=http://www.enjoyday.net">
ให้้เปลี่ยนหน้าเ็ว็บเพจที่แสดงผลอยู่ ไปแสดงผลหน้า www.enjoyday.net เมื่อผ่านไป 10 วินาที


สำหรับ Meta tag ที่สำคัญควรจะใส่ไว้ในเว็บเพจทุกหน้า้ มีแค่ 3 ตัว คือ
<meta name="Keywords" content="การสร้างเว็บไซต์, สอนเขียนเว็บเพจ, HTML, CSS, XHTML, JavaScript">

<meta name="Description" content="แนะนำการสร้างเว็บไซต์ สอนเขียนว็บเพจด้วย HTML และ CSS และข่าวสารในแวดวงคอมพิวเตอร์และอินเตอร์เน็ต">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">



3. Style (จะได้เรียนในเรื่อง CSS ค่ะ)
style sheet ใช้กําหนดคุณลักษณะ เช่น สี ขนาด font ตำแหน่งการจัดวาง ให้กับ HTML element ต่างๆ โดยจะกำหนดในหน้าเว็บเพจนั้นๆ หรือสร้างเป็นไฟล์ style sheet แยกเป็นอีกไฟล์ แล้วเรียกใช้อีกที

คําสั่งสําหรับสร้าง style sheet ที่ใช้ในเอกสาร กําหนดดังนี้

<style type= "MIME Type" media= "Media Type">...</style>
MIME Type (Multipurpose Internet Mail Extension) เป็นการกําหนดชนิดข้อมูลมาตรฐานสําหรับอินเทอร์เนตในแบบ Content-type เป็นตัวบ่งชี้ว่าชนิดข้อมูลนั้นๆคืออะไร เว็บเบราเซอร์จะนำข้อมูลนั้นมาโดยวิธีใด และจะจัดการกับข้อมูลเหล่านั้นต่อไปอย่างไร อาจแสดงเป็นชนิดข้อมูลหลัก type เปล่าๆ หรือแสดงชนิดข้อมูลรองด้วย type/subtype เช่น Text, Text/html

1. text เป็นข้อมูลชนิดข้อความ ชนิดข้อมูลรองที่ใช้บ่อยๆ ได้แก่ text/plain(ข้อความล้วนๆ ไม่มีคำสั่งจัดรูปแบบใดๆ)text/html text/css text/JavaScript
2. image ชนิดข้อมูลรองที่ใช้บ่อยๆ ได้แก่ image/jpeg image/gif
3. audio เป็นข้อมูลชนิดไฟล์เสียง ชนิดข้อมูลรองที่ใช้บ่อยๆ ได้แก่ audio/basic audio/mid audio/wav audio/mpeg
4. video เป็นข้อมูลสำหรับวีดีโอ และภาพเคลื่อนไหว ที่ใช้บ่อยๆ ได้แก่ video/mpeg video/x-msvideo (avi) video/quicktime
5. application เป็นชนิดข้อมูลแบบเจาะจงให้ใช้กับโปรแกรมชนิดต่างๆ ชนิดข้อมูลรองที่ใช้บ่อยๆ ได้แก่ application/postscript application/pdf application/msword


Media Type
ชนิดอุปกรณ์ที่เจาะจงนำ Style sheet ไปใช้แสดงผล มีลักษณะการใช้งาน ดังนี้
1. screen แสดงผลออกทางจอภาพของเครื่องคอมพิวเตอร์
2. tty แสดงผลออกทางเทอร์มินัลชนิดตัวอักษรเท่านั้น เช่น โปรแกรม Lynx, เครื่องโทรพิมพ์
3. tv แสดงผลออกทางจอภาพของเครื่องรับโทรทัศน์
4. projection แสดงผลออกทางจอภาพที่มีความต่างสี (contrast) และความสว่าง (brightness) ต่ำ เช่น จอภาพ LCD, การแสดงผลผ่านเครื่อง projector
5. handheld แสดงผลออกทางจอภาพของเครื่องคอมพิวเตอร์ชนิดพกพา (handheld) ซึ่งมีขนาดเล็ก ไม่สามารถแสดงสีได้ (monochrome) และมีประสิทธิภาพในการรับส่งข้อมูลต่ำ
6. print แสดงผลออกทางเครื่องพิมพ์เท่านั้น
7. braille แสดงผลออกทางเครื่องช่วยอ่านสำหรับคนตาบอด
8. aural แสดงผลโดยระบบช่วยอ่านออกเสียง
9. all ใช้ในอุปกรณ์ทุกชนิด
หากมีมากกว่า 1 media ใช้ comma คั่น

ตัวอย่าง style sheet ที่กำหนดในเว็บเพจหน้าที่จะใช้งานเลย (ex_chapter04.html)

<style type="text/css" media="screen">
p { color:blue; }
</style>


4. Link
ใช้กำหนดความสัมพันธ์ระหว่างเว็บเพจกับข้อมูลภายนอกเพื่อนำมาใช้งานในเว็บเพจ นอกจากการสร้าง style sheet ในส่วน head เพื่อเรียกใช้ในเว็บเพจหน้านั้นๆแล้ว ยังสามารถเรียกใช้ ไฟล์ style sheet จากภายนอกมาใช้ โดยใช้คําสั่ง link

<link rel= "..." type="MIME Type" href="url" src="url">
rel = "stylesheet" | "next" |"previous" | "section" | "subsection" | "contents"
type = "MIME Type"
href = "ไฟล์ที่ต้องการ link ไป"
src = "ไฟล์ที่ต้องการแทรก"

ตัวอย่าง style sheet ที่เขียนแยกเป็นอีกไฟล์ (style.css)
p { color:blue}

ตัวอย่าง ในไฟล์ ex_chapter04.html เรียกใช้ style sheet จากไฟล์ style.css ดังนี้
<link rel="stylesheet" type="text/css" href="css/style.css">
ศึกษาเพิ่มเติมเกี่ยวกับ tag <link>
"http://www.htmlcodetutorial.com/document/_LINK.html


5. Script
สามารถเขียน script เช่น javascript, vbscript เป็น function เพื่อใช้งาน หรือจะเขียนฟังก์ชั่นเก็บเป็นไฟล์ .js ก่อนแล้วค่อยเรียกใช้งานก็ได้

ตัวอย่าง javascript ที่กำหนดในเว็บเพจหน้าที่จะใช้งานเลย (ex_chapter04.html)
<script type="text/javascript">
function Sayhello()
{
alert("Welcome to enjoyday.net");
}
</script>

ตัวอย่าง javascript ที่เขียนไว้เป็นอีกไฟล์ (js_function.js)
function Saygoodbye()
{
alert("Goodbye see you next time");
}

ตัวอย่าง ในไฟล์ ex_chapter04.html เรียกใช้ javascript จากไฟล์ js_functions.js ดังนี้
<script type="text/javascript" language="javascript" src="script/js_function.js" ></script>


เหล่านี้คือสิ่งที่ปกติจะใส่ไว้ใน <head>...</head> ค่ะ



« Chapter 3
Chapter 5 »