Embed Size (px)
DESCRIPTION
ให้นักเรียนดาวน์โหลดเอกสารไปแจกเพื่อนๆ เป้นเรื่องราวเกี่ยวกับภาษา HTML ซึ่งเป็นภาษาที่แสดงในบราวเซอร์
Citation preview
ใบความรท 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. ใชโปรแกรมประเภทเวบเอดเตอร (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 ปด
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> ก ากบอยทจดเรมตนและจดสนสดของแฟมขอมล
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 ส าคญ คอ
<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 ค าสงกได แตมกจะยดรปแบบทอานงาย คอ การท ายอหนาในชดค าสงทเกยวของกน
++++++++++++++++++++++++++++++++++++++
