More Related Content
Similar to ใบความรู้ที่ 2.3 รู้จักภาษาhtml (20)
More from Samorn Tara (20)
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
- 1. ใบความรู้ที่ 2.3
รู้จักภาษา HTML
ความหมายของภาษา HTML
HTML (ย่อมาจาก Hyper Text Markup Language) หมายถึง ภาษาคอมพิวเตอร์ที่ใช้ใน
การสร้างเว็บเพจทาหน้าที่ควบคุมการแสดงผลของข้อมูลในเว็บเพจ เช่น สี รูปภาพ ตลอดจนตาแหน่ง
ของสิ่งต่างๆ ที่อยู่บนเว็บเพจ เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บ โครงสร้าง
ของภาษา HTML ถูกควบคุมและกาหนดโดย W3C (World Wide Web Consortium) เพื่อให้เป็น
มาตรฐานเดียวกัน ทาให้บราวเซอร์ทุกโปรแกรมอ่านเว็บเพจได้ถูกต้อง
ต้นกาเนิดของภาษา HTML เกิดจาก เมื่อปี 1989 นักฟิสิกส์ชื่อ Tim Berners-Lee แห่ง
สถาบันวิจัย CERN เสนองานวิจัยเรื่อง prototyped ENQUIRE และ Hypertext system ใช้สาหรับ
นักวิจัยของสถาบันเพื่อแบ่งข้อมูลกัน และถูกพัฒนามาเรื่อยๆจนถึงปัจจุบัน
ภาษา HTML ได้ถูกพัฒนาขึ้นอย่างต่อเนื่องตั้งแต่ HTML Level 1, HTML 2.0, HTML 3.0,
HTML 3.2, HTML 4.0 และ HTML 5 ในปัจจุบัน ทาง W3C ได้ผลักดัน รูปแบบของ HTML แบบ
ใหม่ ที่เรียกว่า XHTML ซึ่งเป็นลักษณะของโครงสร้าง XML แบบหนึ่ง ที่มีหลักเกณฑ์ในการกาหนด
โครงสร้างของโปรแกรมที่มีรูปแบบที่มาตรฐานกว่า มาทดแทนใช้ HTML รุ่น 4.01 ที่ใช้กันอยู่ในปัจจุบัน
เอกสารเว็ บเพจนี้จะเป็นเอกสารประเภท ไฮเปอร์เท็ก ซ์ (Hypertext) ซึ่ ง เป็น เอกสารที่ มี
ลักษณะพิเศษกว่าเอกสารทั่วไปตรงที่สามารถสร้างตัวเชื่อมโยงไปยังเอกสารอื่นหรือแม้แต่ในเอกสาร
เดียวกันได้ เอกสารไฮเปอร์เท็กซ์ถูกอ่านและแปลผลด้วยโปรแกรมบราวเซอร์ โปรแกรมบราวเซอร์
ตัวแรกชื่อ โมเซอิค (Mosaic) ซึ่งทางานบนระบบ X-Windows โปรแกรมนี้สร้างปรากฏการณ์ใหม่
ขึ้นมาในระบบการสื่อสารข้อมูลบนอินเทอร์เน็ตและเป็นต้นแบบของ โปรแกรมบราวเซอร์แบบอื่นๆ เช่น
Internet Explorer, Mozilla Fire Fox, Google Chrome, Safari, Opera เป็นต้น
วิธีการสร้างเว็บเพจ
การสร้างเว็บเพจนั้น สามารถเลือกสร้างได้ 2 วิธี ดังนี้
1. ใช้โปรแกรมประเภทเท็กซ์เอดิเตอร์ (text editor) ซึ่งโปรแกรมที่นิยมใช้กันมากคือ
Notepad เพราะเป็นโปรแกรมที่ใช้ง่าย และมีอยู่ในเครื่องคอมพิวเตอร์ที่ใช้ระบบปฏิบัติการวินโดวส์
นอกนั้นยังมีโปรแกรมที่ได้รับความนิยมอื่นๆ อีก เช่น EditPlus, Notepad++เป็นต้น
- 2. 2. ใช้โปรแกรมประเภทเว็บเอดิเตอร์ (web editor) เช่น Microsoft FrontPage,
Macromedia Dreamweaver, Homesite, Namo, Thai HTML เป็นต้น โดยส่วนใหญ่โปรแกรม
สาเร็จเหล่านี้มีวิธีการใช้ที่คล้ายกับโปรแกรมสาเร็จที่ใช้ในสานักงานทั่วไป คือ ผู้ใช้สามารถเห็นสิ่งที่
ตัวเองพิมพ์หรือสร้างได้โดยไม่จาเป็นต้องพิจารณาแท็ก (tag) ที่ใช้ในการกาหนดโครงสร้างของเว็บเพจ
โปรแกรม Macromedia Dreamweaver โปรแกรม Thai – HTML Editor และในปัจจุบันยังมี
โปรแกรมประเภท CMS (Content Management System) ซึ่งเป็นเว็บสาเร็จรูปที่ง่ายต่อการสร้าง
เว็บเพจและใช้ระบบฐานข้อมูลเชื่อมต่อ เช่น Mambo, Joomla, Wordpress, PHP-Nuke, Drupal
เป็นต้น
การเรียกใช้งานหรือทดสอบการทางานของเอกสาร HTML จะใช้โปรแกรมเว็บบราวเซอร์
(Internet Web Browser) เช่น Internet Explorer (IE), Mozilla Firefox, Google Chrome,
Safari, Opera เป็นต้น
รูปแบบภาษา HTML
ภาษา HTML ประกอบด้วยแท็ก (Tag) และ Attribute โดยมีรายละเอียดดังนี้
แท็ก (Tag) คือ คาสั่งที่ให้ในภาษา HTML ทาหน้าที่ควบคุมโครงสร้างและการแสดงผลของ
เว็บเพจ ซึ่งจะถูกแปลผลด้วยโปรแกรมบราวเซอร์ รูปแบบของคาสั่งจะประกอบด้วย ตัวอักษรคาสั่งอยู่
ภายใต้เครื่องหมาย < และ > Tag มี 2 รูปแบบดังนี้
1. แท็กคู่ ประกอบด้วยคู่ของแท็กที่อยู่ภายใต้เครื่องหมาย < > คาสั่งแต่ละคู่จะมีชื่อ
เรียกว่า แท็กเปิด (open tag) และแท็กปิด (close tag) ซึ่งแท็กเปิด เป็นคาสั่งที่อยู่หน้าข้อความเพื่อ
กาหนดจุดเริ่มต้นลักษณะหรือรูปแบบการแสดงผล ส่วนแท็กปิด คล้ายกับแท็กเปิดแต่มีเครื่องหมาย
สแลช ( / ) อยู่ภายใน ทาหน้าที่ปิดท้ายข้อความเพื่อกาหนดจุดสิ้นสุดของลักษณะหรือรูปแบบ
การแสดงผลนั้นๆ มีรูปแบบ Tag เปิด/ปิด รูปแบบของ tag นี้จะเป็นแบบ <tag> .... </tag> โดยที่
<tag> เราเรียกว่า tag เปิด
</tag> เราเรียกว่า tag ปิด
- 3. 2. แท็กเดี่ยว เป็นแท็กที่มีเฉพาะแท็กเปิดเท่านั้น ซึ่งเป็นTag ที่ไม่ทางานเกี่ยวกับ
การแสดงผลอักษรหรือรูปภาพ มีรูปแบบคือ <คาสั่ง> โดยTag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิด
รหัส เช่น <HR>, <BR>
แอทติบิวท์ (Attribute) เป็นส่วนขยายในแท็ก ใช้สาหรับจัดรูปแบบเพิ่มเติม เช่น ขนาด สี
ระยะห่าง เป็นต้น ค่าของ attribute จะอยู่ในเครื่องหมาย "…" เช่น <p align="center"> ข้อความ
ในพารากราฟนี้จัดวางอยู่กึ่งกลางหน้าจอ </p>
การเขียนแท็กจะใช้อักษรตัวเล็ก (lower case) หรือตัวใหญ่ (upper case) หรือผสมกันก็ได้
เช่น< HTML> หรือ <html> หรือ <Html> โปรแกรมบราวเซอร์จะถือว่าเป็นคาสั่งเดียวกัน ยกเว้น
คาเฉพาะหรือคาระบุเส้นทาง ชื่อแฟ้มข้อมูล ชื่อไดเรคทอรี่ ตัวอักษรเล็กหรือใหญ่จะถือว่าเป็นคนละตัว
กัน เช่น <IMGSRC=”picture.gif”> </IMG> และ <IMG SRC=”PICTURE.GIF”> </IMG> เป็นต้น
แต่เพื่อให้เป็นไปตามมาตรฐานของ (X) HTML รุ่นใหม่ ขอให้ใช้เป็นตัวอักษรพิมพ์เล็กทั้งหมด
และสาหรับแท็กที่ไม่มี แท็กปิด ให้ใส่ เป็น " / >" เช่น <hr/>, <br/>
โครงสร้างภาษา HTML
โครงสร้างของเอกสาร HTML ในเว็บเพจหนึ่งๆ ประกอบด้วยส่วนสาคัญอยู่ 3 ส่วน คือ
1. ส่วนที่กาหนดให้บราวเซอร์ทราบ ว่าเป็นแฟ้มข้อมูลชนิด HTML ซึ่งจะมีแท็ก
<html>…</html> กากับอยู่ที่จุดเริ่มต้นและจุดสิ้นสุดของแฟ้มข้อมูล
- 4. 2. ส่วนหัวเรื่อง (HEAD) จะมีแท็ก <head> ...... </head> เป็นส่วนที่กาหนดให้ข้อความ
แสดงชื่อเว็บเพจนั้นๆ ไปปรากฏที่ส่วนแถบชื่อของบราวเซอร์ และเก็บแท็กพิเศษอื่นๆ
- ส่วนชื่อเรื่อง จะอยู่ในส่วนหัวเรื่องอีกที จะมีแท็ก <title> .......... </title>
ในส่วนตัวอักษรที่อยู่ในคาสั่งนี้จะอยู่ใน title bar ของ web page
3. ส่วนเนื้อหา (BODY) จะมีแท็ก <body> .......... </body> เป็นส่วนที่แสดงเนื้อหาของ
เว็บเพจทั้งหมด ซึ่งประกอบด้วยประกอบด้วยแท็กต่างๆ เพื่อให้การแสดงผลมีความสวยงามสะดุดตา
เช่น ข้อความ ตาราง รูปภาพ กราฟิกต่างๆ สีของตัวอักษร สีพื้น
รูปโครงสร้างของภาษา HTML
การกาหนดรายละเอียดในส่วน Head และ Body
1. คาสั่งในหัวข้อของ head (Head Section)
Head Section เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้นๆ เช่น ชื่อเรื่องของ
หน้าเว็บ (Title), ชื่อผู้จัดทาเว็บ (Author), คีย์เวิร์ดสาหรับการค้นหา (Keyword) โดยมี Tag สาคัญ
คือ
- 5. <HEAD>
<TITLE>ข้อความอธิบายชื่อเรื่องของเว็บ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<META NAME="Author" CONTENT="ชื่อผู้พัฒนาเว็บ">
<META NAME="KeyWords" CONTENT="ข้อความ 1, ข้อความ 2 ">
</HEAD>
- TITLE ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะพิเศษ เช่น
ตัวหนา, เอียง หรือสี โดยข้อความในส่วนนี้จะแสดงผลใน title bar ของ web browser
- META Tag META จะไม่ปรากฏผลบนเบราเซอร์ แต่จะเป็นส่วนสาคัญ ในการจัดอันดับ
บัญชีเว็บ สาหรับผู้ให้บริการสืบค้นเว็บ (Search Engine เช่น google , yahoo)
- charset=TIS-620 ใช้บอกว่าใช้ชุดตัวอักษรแบบใดในการแสดงผล ภาษาไทยเราใช้
charset=TIS-620 หรืออาจเป็น charset=windows-874 ก็ได้ ตอนนี้แนะนาให้ใช้เป็น
charset=utf-8
- keyword ดังภาพด้านบนจะเห็นว่าเราสามารถใช่ keywords มากกว่า 1 คาได้โดยใช้
เครื่องหมาย (,) ในการคั่นระหว่างคา
2. คาสั่งในส่วนของ (Body Section)
Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จานวนมาก
ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆ
ส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทางานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตาม
ลักษณะของข้อมูล ที่ต้องการนาเสนอ การป้อนคาสั่งในส่วนนี้ ไม่มีข้อจากัดสามารถป้อนติดกัน หรือ
1 บรรทัดต่อ 1 คาสั่งก็ได้ แต่มักจะยึดรูปแบบที่อ่านง่าย คือ การทาย่อหน้าในชุดคาสั่งที่เกี่ยวข้องกัน
++++++++++++++++++++++++++++++++++++++
