|
บทเรียนในการศึกษาภาษา HTML ต่อไปนี้ มีความประสงค์จะให้ผู้เรียนได้ฝึกฝน และทำความเข้าใจในการเขียนโค๊ดคำสั่งด้วยตนเอง จึงมีความจำเป็นจะต้องใช้เครื่องมือพื้นฐานที่มีอยู่แล้ว ให้เป็นประโยชน์มากที่สุด โดยไม่ต้องลงทุนอะไรมากมาย เมื่อทำความเข้าใจและเขียนโค๊ดได้ถูกต้องแม่นยำ ค่อยหาเครื่องมือมาช่วยอำนวยความสะดวกอีกที
- เครื่องมือเขียนคำสั่ง เราจะใช้ Notepad เป็นหลัก เพราะมีเป็นมาตรฐานอยู่แล้วในวินโดว์ทุกเวอร์ชั่น ท่านที่ใช้ลินุกส์ก็ใช้ Text Editor ในเครื่องได้เช่นกันนะครับ มีพร้อมกันแล้วและฟรี
- เครื่องมือแสดงผล หรือบราวเซอร์นี่ก็มีพร้อมแล้วในวินโดว์ก็เป็น Internet Explorer หรือจะหันไปคบกับ Firefox หรือ Google Chrome เหมือนกับที่มีในลินุกส์ก็ย่อมได้ ฟรีอีกเหมือนกัน
 TAGS : คำสั่ง หรือรูปแบบของคำสั่ง |
คำสั่งพื้นฐานของภาษา HTML นั้นเข้าใจได้ง่าย ไม่ซับซ้อน ประกอบด้วยเครื่องหมายน้อยกว่าและมากกว่า ครอบคำสั่งที่ต้องการดังนี้ <คำสั่ง> คำสั่งส่วนใหญ่จะมีเป็นคู่ๆ เช่น <html> ... </html> เรียกว่าคำสั่งเปิดและคำสั่งปิด ต่างกันที่คำสั่งปิดจะมีเครื่องหมายสแลชนำหน้าคำสั่งเสมอ แต่จะมีบางคำสั่งที่เป็นคำสั่งเดี่ยวไม่มีคำสั่งปิด (เราจะได้ศึกษากันต่อไป)
ปัจจุบันนี้มีการใช้มาตรฐาน HTML5 มาแทนที่มาตรฐาน HTML4 เดิม ที่มีคำสั่งที่สั้นและง่ายกว่าเดิม เราจะทราบได้อย่างไรว่า ไฟล์ไหนเขียนขึ้นตามมาตรฐานของ html4 หรือ html5 ไม่ยากครับ ดูที่หัวไฟล์ ก่อนคำสั่งประกาศ <html> ถ้าใช้เครื่องมือสำเร็จรูปใหม่ๆ จะเห็นระบุไว้ดังนี้
HTML4 :
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
HTML5 :
<!doctype html>
<html>
<html>
<head>
<title>
ข้อความที่ต้องการแสดงบนไตเติ้ลบาร์
</title>
</head>
<body>
ข้อความที่แสดงในส่วนเนื้อหา
</body>
</html>
|
|
- ส่วนประกาศ html เป็นส่วนที่กำกับหัวและท้ายไฟล์ ด้วยคำสั่ง <html> ... </html> เพื่อให้บราวเซอร์ทราบ และแปรผลได้ถูกต้อง ส่วนนี้ไม่มีเทคนิคพิเศษอะไรเพิ่มเติมอีก
- ส่วนหัวเรื่อง head เป็นส่วนประกาศรายละเอียดของหน้าเว็บเพจ ที่สำคัญมาก ในการที่จะทำให้เว็บไซต์ของเราเป็นที่รู้จักต่อสาธารณะ และใส่เทคนิคพิเศษ ให้กับเว็บเพจได้ในส่วนนี้ แต่ดูเหมือนเว็บมาสเตอร์มือใหม่จะละเลยกันไปมากที่สุด
- ส่วนเนื้อหา body เป็นส่วนที่มีรายละเอียดมากที่สุด และเป็นส่วนที่จะสร้างความประทับใจ ให้กับผู้ชมได้มาก จะเป็นจุดขาย หรือหน้าตาอันเป็นเอกลักษณ์ ของผู้สร้างเว็บไซต์ จะประกอบด้วย ข้อความ รูปภาพ และสื่อมัลติมีเดียต่างๆ
|
การเขียนไฟล์เว็บเพจตามตัวอย่างนี้ต้องใช้โปรแกรม TextEditor ที่มีภายในเครื่องแล้วคือ Notepad ซึ่งจะมีเทคนิคพิเศษในการใช้งานเพิ่มเติม [ คลิกอ่านที่นี่ ]
| HEAD : รายละเอียดคำสั่งในส่วนหัว |
คำสั่งที่อยู่ในส่วนหัวนี้ จะอยู่ระหว่างคำสั่ง <head> ... </head> เราสามารถมองเห็นผ่านบราวเซอร์ได้ เฉพาะข้อความบนไตเติ้ลบาร์ คำสั่งอื่นๆ นั้นจะทำงานในส่วนเบื้องหลัง แต่ก็มีส่วนสำคัญเป็นอย่างยิ่งที่ไม่ควรละเลย ประกอบด้วยคำสั่งต่างๆ ดังนี้
- หัวเรื่องบนไตเติ้ลบาร์ เป็นส่วนสำคัญที่จะบอกรายละเอียดของหน้าเว็บเพจนั้นๆ อยู่ภายในคำสั่ง <title> ... </title> จะต้องกำหนดเสมอ และควรใช้ภาษาอังกฤษนำ สามารถใช้ภาษาไทยเป็นคำตามได้ แต่ต้องไม่ยาวเกิน 64 ตัวอักษร เช่น Make a home with HTML : สร้างเว็บสวยด้วยภาษา HTML (การนับตัวอักษรในคำภาษาไทยต้องนับสระบน/ล่าง/วรรณยุกต์ด้วย)
ชื่อเรียกเว็บไซต์ที่ปรากฏบนไตเติ้ลบาร์ นอกจากจะนำมาใช้แสดงชื่อเรื่องของเว็บไซต์นั้นๆ แล้ว ยังเป็นข้อความที่จะถูกนำมาใช้เป็นคำสำคัญ (Keyword) ในการสืบค้นข้อมูลจาก Search Engine เสมอ
- การระบุอักขระภาษา เป็นส่วนสำคัญ และจำเป็นสำหรับเว็บเพจภาษาไทย ทำให้ผู้ชมสามารถอ่านข้อความบนเว็บเพจเป็นภาษาไทยได้ทันที โดยเฉพาะการสร้างเว็บจากเครื่องมือสำเร็จรูปหลายๆ โปรแกรม ที่มักจะทำการกำหนดให้เว็บเป็นภาษาของผู้พัฒนาโปรแกรม (อาจเป็นภาษาในยุโรป/อเมริกา/หรือภาษาอื่นๆ) ทำให้ผู้ชมไม่สามารถอ่านภาษาไทยได้ ดังนั้น ผู้สร้างเว็บจะต้องทำการกำหนดค่าการถอดรหัสภาษาไทยไว้เลยในทุกๆ ไฟล์ โดยใช้คำสั่ง Meta ระบุไว้ที่ส่วน Head เช่นเดียวกันกับไตเติ้ล ดังนี้
<meta http-equiv="Content-Type" content="text/html; charset=TIS-620"> หรือ
<meta http-equiv="Content-Type" content="text/html; charset=Windows-874">หรือ
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
ให้เลือกใช้อย่างใดอย่างหนึ่ง เว็บเพจที่สร้างขึ้นก็จะสามารถแสดงผลภาษาไทยได้อย่างถูกต้อง ปัจจุบันนิยมใช้แบบที่ 3 เพื่อสนับสนุนระบบการแสดงผลหลายภาษา Unicode font
 การกำหนดอักขระภาษาไทยไม่ได้มาตรฐาน ก็เลยอ่านไม่ออก
ปัจจุบันเมื่อพัฒนามาตรฐานมาเป็น HTML5 ก็ใช้คำสั่งที่ง่ายและสั้นขึ้น (แต่ต้องเป็นบราวเซอร์รุ่นใหม่ๆ ที่พัฒามารองรับ HTML5 แล้วด้วย
<meta charset="utf-8">
- ประกาศให้โลกรู้ ถึงแม้ว่าระบบการค้นหาของ Search Engine จะนำชื่อเรื่องของเว็บไซต์ไปเป็นคำหลักโดยอัตโนมัติแล้ว ก็ยังไม่เพียงพอ เพราะด้วยข้อจำกัดของจำนวนตัวอักษร และคำที่ใส่ลงไป ดังนั้นจึงต้องมีการกำหนดคำหลักให้กับหน้าเว็บเพจนั้นๆ โดยใช้คำสั่งที่มีรูปแบบเฉพาะไว้ในส่วน Head ถัดจาก Title เรียกว่าการใช้คำสั่ง Meta (ซึ่งจะไม่แสดงผลในหน้าต่างบราวเซอร์) ดังนี้
<Meta name="X" content="Y"> (x และ y จะถูกแทนค่าด้วยข้อความ)
- ถ้า X แทนค่าด้วยคำว่า Keyword ในส่วน Y จะแทนค่าด้วยคำหลักที่เกี่ยวข้องกับเว็บไซต์นั้น คำหลักควรเป็นภาษาอังกฤษ (ใช้ภาษาไทยได้) สามารถกำหนดได้มากกว่า 1 คำ แต่ละคำจะคั่นด้วยเครื่องหมายจุลภาค (,) เราอาจใช้คำที่เกี่ยวข้องกับเว็บไซต์เรา และมีการค้นหาบ่อยๆ ใส่เข้าไปด้วย เช่น ชื่อสถานที่ แหล่งท่องเที่ยว ประเพณีที่สำคัญ เมื่อมีการค้นหาด้วยคำพวกนี้เว็บไซต์ของเราจะไปปรากฏด้วย อีก 1 รายการ (แต่ควรระวังด้วยว่า ในเว็บไซต์เราต้องมีเนื้อหาเกี่ยวข้องกับคำนั้นด้วยจริงๆ) ตัวอย่าง
<Meta name="keyword" content="html, web, page, website, home, เว็บไซต์, โฮมเพจ.">
- ถ้า X แทนค่าด้วยคำว่า Description ในส่วน Y จะแทนค่าด้วยคำอธิบายที่เกี่ยวข้องกับเว็บไซต์นั้น ควรเป็นภาษาอังกฤษ หรือภาษาไทย เขียนในรูปประโยคบอกเล่าสื่อความหมายถึงเนื้อหาในเว็บนั้นๆ เช่น
<Meta name="Description" content="HTML is a wonderful language for internet communication. ภาษา html เป็นภาษาที่ใช้ในการเขียนเว็บไซต์เพื่อการสื่อสารบนเครือข่ายอินเทอร์เน็ต.">
- ถ้า X แทนค่าด้วยคำว่า Author ในส่วน Y จะแทนค่าด้วยชื่อของเจ้าของเว็บไซต์ หรือหน่วยงาน อาจระบุชื่ออีเมล์ไว้เพื่อให้สะดวกในการติดต่อกับผู้รับผิดชอบโดยตรง เช่น
<Meta name="Author" content="Montree Kotkanta - krumontree @ gmail.com">
- เทคนิคพิเศษ เราสามารถใส่เทคนิคพิเศษต่างๆ เพิ่มเติมในส่วนนี้ได้ เช่น สคริปต์พิเศษแสดงวันเวลา การแสดงผลพิเศษ (เราจะได้ศึกษาเพิ่มเติมในบทต่อๆ ไป)
นี่คือตัวอย่างของการแทรกคำสั่งต่างๆ ในส่วน head คุณสามารถเอาไปประยุกต์แก้ไขให้เหมาะสมกับหน้าเว็บของคุณได้เลย
<!doctype html>
<html>
<head>
<title> Make a home with HTML : สร้างเว็บสวยด้วยภาษา HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keyword" content="html, web, page, website, home, เว็บไซต์, โฮมเพจ.">
<meta name="description" content="HTML is a wonderful language for internet
communication. ภาษา html เป็นภาษาที่ใช้ในการเขียนเว็บไซต์เพื่อการสื่อสารบนเครือข่ายอินเทอร์เน็ต.">
<meta name="author" content="Montree Kotkanta - krumontree@gmail.com">
<link href="htmlstyle.css" rel="stylesheet" type="text/css">
</head>
......
|
| END : สรุปคำสั่งที่ใช้ในตอนนี้ |
|
TAGS
|
รายละเอียด
|
|
<html> ... </html>
|
กำหนดชนิดของไฟล์ให้ html
|
|
<head> ... </head>
|
กำหนดส่วนหัวของไฟล์ เพื่อจัดเก็บรายละเอียดและชื่อไฟล์
|
|
<title> ... </title>
|
การกำหนดชื่อไฟล์เพื่อแสดงผลบนไตเติ้ลบาร์ของบราวเซอร์
|
|
<meta>
|
การกำหนดรายละเอียดของเว็บไซต์เกี่ยวกับการแสดงผลภาษาและคำอธิบายรายละเอียด คำค้นหาของเว็บไซต์
|
|
|
