คำสั่ง HEAD html

บทเรียนการเขียนเว็บด้วยภาษา html

คำสั่ง HEAD

สำหรับใครที่รู้จักคำสั่งนี้แล้ว ให้ลองถามเพื่อนๆที่ทำเว็บดูสิครับ ว่าคำสั่ง <HEAD> มีไว้ใช้ทำอะไรใน HTML ซึ่งผมมั่นใจเลยว่าคุณจะได้คำตอบที่หลายหลายไม่เหมือนกัน ผมได้รับ e-mail ซึ่งต่อว่าผม ว่าทำไมผมไม่ทำบทเรียนคำสั่ง HEAD รวมไว้ในบทเรียนพื้นฐาน ผมก็อธิบายเธอไป แล้วเธอก็ตอบกลับมาว่า ต้องใช้คำสั่งนี้ในการเขียน HTML ทุกครั้งเสมอ ไม่งั้นจะได้หน้าเว็บที่ทำงานได้ไม่ถูกต้อง ผมตอบเธอกลับไปว่า “ไม่ครับ ไม่จำเป็น” เธอก็ตอบกลับว่า “ใช่ มันต้องใช้สิ” ผมก็ตอบกลับไปอีกว่า “ไม่ครับ ไม่จำเป็น” เธอก็ตอบกลับมาอีกว่า “ต้องใช้สิ” แล้วการโต้เถียงของเราก็เริ่มเลวร้ายขึ้นเรื่อยๆ…

ซึ่งจริงๆแล้วเราคิดถูกทั้งคู่ครับ และนี่เป็นรูปแบบพื้นฐานของเอกสาร HTML ซึ่งหลายคนคงเห็นรูปแบบนี้มานับร้อยครั้งแล้ว :

<HTML>

<HEAD>

<TITLE></TITLE>

<HEAD>

<BODY>

ส่วนที่แสดงในหน้าต่างของ Browser

</BODY>

</HTML>

ตอนที่ผมเริ่มเรียน HTML ครั้งแรก ผมเห็นรูปแบบนี้หลายต่อหลายครั้ง ผมคิดว่าคำสั่ง HEAD มันทำให้เกิดตัวหนังสือในแถบน้ำเงินด้านบนสุดของหน้าต่าง เพราะว่ามีตัวหนังสือที่เหมือนกับในคำสั่ง HEAD (ซึ่งจริงๆแล้วเป็นเพราะคำสั่ง TITLE) ตอนนั้นผมเรียนแบบไม่มีความฉลาดเฉลียว ผมก็เลยคิดว่าคำสั่ง HEAD นี้มันไม่จำเป็น ผมก็เลยเขียนแบบไม่ใช้คำสั่งนี้เป็นเวลานานมากทีเดียว ซึ่งไม่มีหน้าไหนที่ทำงานผิดปกติเลยสักนิด ผมเลยรู้สึกว่าไม่จำเป็นต้องใช้มัน

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

ผมคิดว่าที่ผมเล่ามาเริ่มทิ่มแทงความยึดมั่นถือมั่นของใครบางคน ผมอยากจะบอกว่า… คุณควรจะสอนอะไรบ้างให้กับผู้เรียนที่เพิ่งจะรู้จักคำสั่งต่างๆ เพิ่งจะรู้จัก HTML ? ผมรู้แล้วครับว่า คำสั่ง HEAD นั้นเป็นส่วนที่ดีมากของ HTML แต่ผมคิดว่าแยกหัวข้อนี้ไว้สอนภายหลัง เพื่อที่จะให้ผู้เรียนทราบว่าจะเอามาใช้ได้อย่างไร ไม่ใช่ว่าเรียนแล้ว ไม่รู้ว่าจะเอามาใช้กับสิ่งใด

ผมไม่ทราบเหมือนกันว่า ทำไมต้องบอกคุณไปอย่างนั้น …คงเป็นเพราะผมชอบแสดงความคิดเห็นกับผู้อื่น… เอาล่ะครับ มาเริ่มกันเลย

หน้าที่จริงๆของคำสั่ง HEAD

คำสั่ง HEAD มีไว้ทำ 3 สิ่งต่อไปนี้ :

1 บรรจุข้อมูลที่เกี่ยวข้องกับเนื้อหาของเอกสาร

ซึ่งข้อมูลเหล่านี้ จะไม่ถูกแสดงในหน้าต่างของ Browser แต่ส่วนใหญ่จะใช้ช่วยเหลือ search engines(เว็บที่ใช้ค้นหาทั้งหลาย รวมถึง google) ให้ค้นหาหน้าเว็บได้ง่ายขึ้น(ได้ผลครับ เว็บผมก็ค้นหาจาก google ได้ หลังจากเปิดเว็บมาประมาณเดือนกว่า) ด้วยการบอกคำค้น(keyword)และบรรยายลักษณะของหน้าเว็บนั้น หรือช่วยเหลือ Browser ด้วยการระบุที่อยู่พื้นฐานของหน้านั้น(ดูตัวอย่างด้านล่างจะเข้าใจ) หรืออื่นๆ

2 ใช้แยกหน้าเว็บออกเป็นสองส่วน

คุณเคยพบหน้าที่ไม่โหลดขึ้นมา มีแต่หัวข้อ(title)โผล่ออกมา …ซึ่งส่วนนั้นอยู่ในคำสั่ง HEAD

3 ทุกอย่างในคำสั่ง HEAD จะถูกโหลดและแสดงผลโดย Browser ก่อนโหลดสิ่งต่างๆในคำสั่ง BODY

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

คำสั่ง TITLE

นี่เป็นคำสั่งที่นิยมใช้กันมากที่สุดภายในคำสั่ง HEAD ซึ่งทำหน้าที่วางตัวหนังสือลงบนแถบน้ำเงินด้านบนสุดของหน้าต่าง ผมชอบคำสั่งนี้สมัยที่ใช้ Browser รุ่นเก่า ในตอนที่ทำหัวข้อได้โดยไม่ต้องวางตัวหนังสือไว้หลัง <TITLE> คุณสามารถใช้คำสั่ง TITLE หลายๆคำสั่งได้ เมื่อเวลาเปิดขึ้นมา ทุกๆคำสั่งก็จะให้ตัวหนังสือเรียงติดตามกันมาหมด และคุณสามารถทำภาพเคลื่อนไหวบนแถบน้ำเงินนั้นได้ด้วย เดี๋ยวนี้ Browser รุ่นใหม่ๆรับคำสั่ง TITLE ได้เพียงคำสั่งเดียว

โอ้ววว.. ผมรู้สึกว่าตัวเองเป็นตาแก่ขี้บ่นซะแล้ว ก็เมื่อก่อนเราใช้คำสั่ง TITLE ได้ตั้งมากมาย ผมชอบแบบนั้นนี่นา… ต้องขออภัยด้วย…

ตัวอย่างของการใช้ก็จะเป็นเหมือนด้านล่างครับ(ผลของการใช้ก็เป็นอย่างที่เห็นในหน้านี้ครับ) ซึ่งต่อไป ผมจะอธิบายคำสั่งอื่นๆใน HEAD…

<HEAD>

<TITLE>คำสั่ง HEAD</TITLE>

</HEAD>

คำสั่ง META

ด้านล่างเป็นหลายคำสั่งของ META ที่นิยมใช้กัน :

<META http-equiv=Content-Language content=th>

บอกว่าหน้านี้เป็นภาษาไทย และเป็นเนื้อหา HTML ที่ใช้แบบอักษร… windows-874(ผมก็ไม่รู้ครับ ลอกเขามา คงเป็นแบบของอักษรไทย)

<META NAME=”keywords” CONTENT=”เขียนเว็บ,html,javascript,จาวาสคริป”>

ใช้บอกคำ ที่ search engines จะใช้ในการค้นหาคำเหล่านี้

<META NAME=”description” CONTENT=”หน้านี้สุดยอด เข้ามาเลย!”>

description แปลว่า คำบรรยาย(ของหน้านั้นๆ) ซึ่งมีไว้ให้ search engines ใช้

<META NAME=”generator” CONTENT=”Notepad”>

generator แปลว่า ผู้ให้กำเนิด ซึ่งในที่นี้หมายถึงโปรแกรมที่ใช้เขียน HTML มีไว้ให้ search engines ใช้

<META NAME=”author” CONTENT=”Some Body”>

ใช้บอกคำ search engines ว่าใครเขียนหน้านั้นๆ

<META NAME=”copyright” CONTENT=”Copyright 1997 Me”>

บอก search engines ว่าเป็นลิขสิทธิ์ของใคร

<META NAME=”expires” CONTENT=”15 September 2000″>

บอก search engines ว่าจะให้ลบข้อมูลหน้านี้ออกจากฐานข้อมูลของ search engines เมื่อใด

ด้วยการเพิ่มคำสั่งเหล่านี้เข้าไป ในคำสั่ง HEAD จะได้…

<HEAD>

<TITLE>คำสั่ง HEAD</TITLE>

</HEAD>

คำสั่ง Base HREF

คำสั่ง Base HREF ใช้บอก Browser ถึงที่อยู่พื้นฐานสำหรับทุก link และทุกรูปภาพในหน้านั้น …นี่คือรูปแบบพื้นฐาน :

<BASE HREF=”http://www.pjohnpong.webs.com/”>

สมมติว่าผมสร้างคำสั่งนี้ แล้วจะสร้าง link ไปยังบทเรียนที่ 1 ซึ่งอยู่ที่ http://www.pjohnpong.webs.com/1html.html ผมสามารถเขียนได้ว่า :

<A HREF=”1html.html”> ซึ่งให้ผลเท่ากับ <A HREF=”http://www.pjohnpong.webs.com/1html.html”>

หรือหากผมจะนำรูปที่ผมเก็บไว้ที่ http://www.pjohnpong.webs.com/t2010.jpg มาวางในหน้านี้ ผมสามารถเขียนได้ว่า :

<IMG SRC=”t2010.jpg”> ซึ่งให้ผลเท่ากับ

คำสั่งนี้ช่วยไม่ให้คุณไม่ต้องพิมพ์ที่อยู่เต็มในทุกๆ link และรูปภาพ เพราะเราระบุที่อยู่พื้นฐานไปแต่ต้นแล้ว แต่ให้ระวังครับว่าเมื่อใช้คำสั่ง BASE HREF แล้ว link หรือรูปภาพต้องอยู่ในที่อยู่หลักเดียวกัน ยกตัวอย่างการนำไปใช้ที่ผิด เช่น…

<IMG SRC=”http://www.abc.com/pic1.jpg”> จะให้ผล(เจ๊ง)เท่ากับ…

สรุปว่าควรใช้คำสั่ง Base HREF หากคุณมี link หรือรูปภาพอยู่ภายในเว็บของตัวเอง ในที่อยู่เดียวกัน (อาจจะงงหน่อยนะครับ แต่เอาไปเมื่อนำไปใช้ก็จะเข้าใจท่องแท้เอง) อ้อแล้วแถมให้กับผู้เขียนจาวาสคริปหน่อยครับ ต้องระวังตรงนี้ด้วยเวลาเขียน link ปิดหน้าต่าง…

<A HREF=””> ให้ผลเท่ากับ <A HREF=”http://www.pjohnpong.webs.com/”>

และเมื่อเราเพิ่มคำสั่ง BASE HREF เข้าไปในคำสั่ง HEAD ข้างต้น ..ก็จะกลายเป็น…

<HEAD>

<TITLE>คำสั่ง HEAD</TITLE>

<BASE HREF=”http://www.freewebs.com/maneemana/”>

</HEAD>

ขอแก้ไขข้อมูลหน่อยครับ : คำสั่ง base href จริงๆแล้วไม่จำเป็นต้องใช้ครับ เพราะในการเขียน link ปกติจะให้ผลเหมือนใช้คำสั่งนี้โดยอัตโนมัติอยู่แล้ว เช่นใช้ <a href=”1html.html”>การสร้างตาราง</a> โดยไม่มี base href ในหน้านี้ ก็จะให้ link เดียวกันกับเมื่อมี base href

หน้าที่ ที่สองและสาม

เหมือนอย่างที่ผมบอกไปแล้วว่า คำสั่ง HEAD จะแยกหน้าเว็บออกเป็นสองส่วน และส่วนของ HEAD จะโหลดและทำงานก่อนที่ส่วนอื่นๆของหน้าจะแสดงขึ้นมา ซึ่งคุณควรจะใส่สิ่งที่คุณต้องการให้ทำงานก่อน เช่น จาวาสคริป เพื่อให้จาวาสคริปทำงานได้รวดเร็ว ยกตัวอย่างเช่นใน บทเรียนจาวาสคริป สคริปควรทำงานก่อนเพื่อโหลดภาพต่างๆรอไว้

บางครั้งการแยกเนื้อหาออกเป็นสองส่วน เพื่อให้ทั้งสองส่วนนั้นทำงานร่วมกันได้ ยกตัวอย่างเช่น แยกจาวาสคริปอันหนึ่งไว้ใน HEAD และอีกอันหนึ่งไว้ใน BODY อาจจะช่วยให้จาวาสคริปทั้งสองทำงานร่วมกันได้ดีขึ้น

และเมื่อเราเพิ่มจาวาสคริปเข้าไปในคำสั่ง HEAD ข้างต้น ก็จะได้…

<HEAD>

<TITLE>คำสั่ง HEAD</TITLE>

<SCRIPT LANGUAGE=”javascript”>

คำสั่งจาวาสคริปทั้งหลาย

</SCRIPT>

</HEAD>

กลับ_บทที่ 6 การปรับขนาดภาพ กำลังอ่านคำสั่ง head ไป_การสร้างตาราง

Tags: บริษัทรับทำเว็บไซต์ กุ้งแช่แข็ง, บริษัทรับทำเว็บไซต์ ของเล่นและเกมส์ทำจากไม้, บริษัทรับทำเว็บไซต์ ข้าวและผลิตภัณฑ์จากข้าว, บริษัทรับทำเว็บไซต์ จานดาวเทียม, บริษัทรับทำเว็บไซต์ เทียนแฟนซี

หน้าแรก » ข่าวสาร » คำสั่ง HEAD html

เรามีทีมงานผู้เชี่ยวชาญที่มีประสบการณ์ด้านเว็บไซต์

Call

E-mail

Location