ใบความรทู้ ี่ 1
บทนํา HTML
HTML
ตน้ กําเนดิ ของภาษา HTML เกดิ จาก เมอื่ ปี 1989 นักฟิสกิ สช์ อ่ื Tim Berners-Lee แหง่ สถาบนั วจิ ยั CERN
เสนองานวจิ ยั เรอื่ ง prototyped ENQUIRE และ Hypertext system ใชส้ าํ หรับนักวจิ ัยของสถาบนั เพอ่ื แบง่
ขอ้ มลู กนั และถกู พฒั นามาเรอื่ ยๆจนถงึ ปัจจบุ นั
HTML ยอ่ มาจากคําวา่ "Hyper Text Markup Language" เป็ นภาษาทใี่ ชใ้ นการเขยี นโปรแกรม
ภาษาหนง่ึ ของคอมพวิ เตอร์ ทแ่ี สดงผลในลักษณะของเว็บเพจ ซงึ่ สามารถแสดงผลไดใ้ นรปู แบบตา่ ง ๆ
ไมว่ า่ เป็ นภาพกราฟิก ภาพนงิ่ ภาพเคลอ่ื นไหว เสยี ง หรอื การเชอ่ื มโยงไปยังเว็บไซตอ์ นื่ ๆ
ภาษา HTML เป็ นภาษาทมี่ ลี ักษณะของโคด้ กลา่ วคอื จะเป็ นไฟลท์ เี่ ก็บขอ้ มลู ทเ่ี ป็ นตัวอกั ษรใน
มาตรฐานของรหัสแอสกี (ASCII Code) โดยเขยี นอยใู่ นรปู แบบของเอกสารขอ้ ความ จงึ สามารถกําหนด
รปู แบบและโครงสรา้ งไดง้ า่ ย
ภาษา HTML จะแบง่ ออกเป็ น 2 สว่ น คอื
1. สว่ นของคาํ สง่ั (tag) เป็ นสว่ นทใ่ี ชใ้ นการระบรุ ปู แบบคําสงั่ ซงึ่ จะอยภู่ ายในเครอื่ งหมาย (<) และ
(>) มที ัง้ Tag เดย่ี วและ Tag เปิด/ปิด ซง่ึ เราเรยี กวา่ Tag โดยจะอยใู่ นเครอื่ งหมาย < ... >
2. สว่ นของบทความทว่ั ๆไป เป็ นสว่ นของขอ้ ความทเ่ี ราตอ้ งการแสดงผล
โครงสรา้ งของ HTML
ไฟลเ์ อกสาร HTML ประกอบดว้ ยสองสว่ นคอื Head กบั Body สว่ นทเ่ี ป็ น Head เปรยี บเสมอื น
กบั เป็ นสว่ นหัวของเอกสาร สาํ หรับสว่ นทเี่ ป็ น Body จะเป็ นสว่ นของเนอื้ หา โดยทัง้ สองสว่ นจะอยภู่ ายใน
Tag
<HTML>
<HEAD>
<TITLE> หวั เร่ืองของหน้านี ้</TITLE>
</HEAD>
<BODY>
เนือ้ หา
</BODY>
</HTML>
การสรา้ งเว็บเพจ
เราสามารถสรา้ งเว็บเพจได ้ 2 ทาง คอื
1. Text Editor โดยเราตอ้ งรคู ้ ําสงั่ ของภาษา HTML แลว้ พมิ พโ์ ปรแกรมเขา้ ไปทางText Editor เชน่
Notepad เป็ นตน้
เรมิ่ ตน้ การสรา้ งเว็บเพจดว้ ยโปรแกรม Notepad
การเขา้ โปรแกรม Notepad สามารถเขา้ ไดต้ ามขนั้ ตอนตอ่ ไปนี้
1. คลกิ ป่ มุ Start
2. เลอื่ นเมาสไ์ ปท่ี All Programs
3. เลอ่ื นเมาสไ์ ปท่ี Accessories
4. คลกิ ทโี่ ปรแกรม Notepad
จะไดโ้ ปรแกรม Notepad เป็ นกระดาษขาวๆวา่ งๆ เพอื่ ใหใ้ สโ่ คด้ ลงไป
2. ตัวชว่ ยสรา้ ง โดยใชโ้ ปรแกรมทมี่ คี วามสามารถในการสรา้ งเว็บเพจ โดยเราไมจ่ ําเป็ นตอ้ งรภู ้ าษา
HTML เพราะโปรแกรมเหลา่ นจ้ี ะทําการแปลงใหเ้ ราอตั โนมัติ
การบนั ทกึ ไฟล์ HTML
เมอื่ เขยี นคําสงั่ เรยี บรอ้ ยแลว้ และตอ้ งการบนั ทกึ ไฟลใ์ หท้ ําตามขนั้ ตอนตอ่ ไปน้ี
1. คลกิ ทเี่ มนู File เลอื กคําสง่ั Save As
2. เลอื กโฟลเดอรท์ ตี่ อ้ งการเก็บไฟล์ (ปกตเิ ว็บไซต์ 1 เว็บ ตอ้ งเก็บไฟลข์ อ้ มลู ไวท้ ี่
เดยี วกนั )
3. ตงั้ ชอ่ื ไฟลเ์ ป็ นภาษาองั กฤษตวั พมิ พเ์ ล็ก และกาํ หนดนามสกลุ ไฟลเ์ ป็ น .html
หรอื .htm ตอ่ ทา้ ยชอ่ื ไฟลท์ เี่ ซฟดว้ ย
4. คลกิ ทปี่ ่ มุ Save
ขอ้ แนะนํา : ปกตแิ ลว้ หนา้ แรกของเว็บเพจควรตงั้ ชอ่ื วา่ index.html
ตวั อยา่ งการใชง้ านภาษา HTML
คณุ อาจลองพมิ พต์ ามตวั อกั ษรดา้ นลา่ งน้ี ใน Text editer ของคณุ เชน่ Notepad
<html>
<head>
<title> หวั ขอ้ เรอ่ื ง ของหนา้ นี้ </title>
</head>
<body>
เนอื้ หาทจี่ ะแสดงใน web browser
</body>
</html>
เมอ่ื พมิ พเ์ สร็จกใ็ ห ้ save ในชอ่ื mypage.html และลองใช ้ web browser อยา่ ง internet explorer
หรอื fire fox เปิดดกู ็จะเห็นผลตามรปู ดา้ นลา่ ง
ผลลพั ธท์ แ่ี สดงออกมา
การทํางานของ code ดา้ นบน
1. <html> ...... </html> ในการใชง้ าน HTML เราจะตอ้ งเรม่ิ ดว้ ย <html> และปิดดว้ ย </html>
เสมอ
2. <head> ...... </head> เป็ นสว่ นทใ่ี ชใ้ หร้ ายละเอยี ดเกย่ี วกบั เว็บเพจหนา้ น้ี ซง่ึ จะไมแ่ สดงใหเ้ ห็นใน
สว่ นของการแสดงผลของ web browser แตจ่ ะมผี ลกบั สว่ นอน่ื ๆ เชน่ การหาของ search engine
(google,yahoo) การใชง้ านก็จะมคี ําสง่ั ยอ่ ยเพอ่ื บรรยายรายละเอยี ด เชน่ <title> .... </title> , <meta>
และอนื่ อกี มากมาย
3. <title> .......... </title> ในสว่ นตวั อกั ษรทอี่ ยใู่ นคําสงั่ นจี้ ะอยใู่ น title bar ของ web page
4. <body> .......... </body> ตวั อกั ษรทอ่ี ยใู่ นคําสงั่ นจี้ ะแสดงสว่ นแสดงผลของ web browser
โครงสรา้ งคาํ สง่ั ของ HTML
การใชง้ าน
ในบททแี่ ลว้ เราไดล้ องเขยี น HTML กนั ดบู า้ งแลว้ ในบทนเ้ี ราจะลงรายละเอยี ดคําสง่ั ของ HTML โดยการ
ใชง้ านหลกั จะมดี งั น้ี
1. คาํ สง่ั หรอื Tag
Tag เป็ นลกั ษณะเฉพาะของภาษา HTML ใชใ้ นการระบรุ ปู แบบคําสง่ั หรอื การลงรหสั คําสง่ั HTML
ภายในเครอ่ื งหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบง่ ได ้
2 ลกั ษณะ คอื
Tag เดยี่ ว เป็ น Tag ทไี่ มต่ อ้ งมกี ารปิดรหสั เชน่ <HR>, <BR> เป็ นตน้
Tag เปิ ด/ปิ ด รปู แบบของ tag นจี้ ะเป็ นแบบ <tag> .... </tag> โดยท่ี
<tag> เราเรยี กวา่ tag เปิด
</tag> เราเรยี กวา่ tag ปิด
2. not case sensitive
หมายถงึ คณุ จะพมิ พ์ <BR> หรอื <br> ก็ได ้ ผลลพั ธอ์ อกมาไมต่ า่ งกนั
2. คาํ สง่ั ในหวั ขอ้ ของ 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 คําไดโ้ ดยใชเ้ ครอ่ื งหมาย
(,) ในการคนั่ ระหวา่ งคํา
การพมิ พช์ ดุ คําสง่ั HTML สามารถพมิ พไ์ ดท้ งั้ ตวั พมิ พเ์ ล็ก ตวั พมิ พใ์ หญ่ หรอื ผสม การยอ่ หนา้ เวน้ บรรทดั
หรอื ชอ่ งวา่ ง สามารถกระทําไดอ้ สิ ระ โปรแกรมเบราเซอรจ์ ะไมส่ นใจเกยี่ วกบั ระยะเวน้ บรรทดั หรอื ยอ่ หนา้ หรอื
ชอ่ งวา่ ง
3. คาํ สง่ั ในสว่ นของ (Body Section)
Body Section เป็ นสว่ นเนอ้ื หาหลกั ของหนา้ เว็บ ซง่ึ การแสดงผลจะตอ้ งใช ้ Tag จํานวนมาก ขนึ้ อยกู่ บั
ลกั ษณะของขอ้ มลู เชน่ ขอ้ ความ, รปู ภาพ, เสยี ง, วดี โิ อ หรอื ไฟลต์ า่ งๆ
สว่ นเนอื้ หาเอกสารเว็บ เป็ นสว่ นการทํางานหลกั ของหนา้ เว็บ ประกอบดว้ ย Tag มากมายตามลกั ษณะ
ของขอ้ มลู ทตี่ อ้ งการนําเสนอ การป้อนคําสงั่ ในสว่ นน้ี ไมม่ ขี อ้ จํากดั สามารถป้อนตดิ กนั หรอื 1 บรรทดั ตอ่ 1
คําสง่ั ก็ได ้ แตม่ กั จะยดึ รปู แบบทอ่ี า่ นงา่ ย คอื การทํายอ่ หนา้ ในชดุ คําสงั่ ทเ่ี กย่ี วขอ้ งกนั ทงั้ นใ้ี หป้ ้อนคําสง่ั
ทงั้ หมดภายใต ้ Tag <BODY> </BODY> และแบง่ กลมุ่ คําสง่ั ไดด้ งั น้ี
- กลมุ่ คําสงั่ เกย่ี วกบั การจดั รปู แบบเอกสาร
- กลมุ่ คําสงั่ จัดแตง่ /ควบคมุ รปู แบบตวั อกั ษร
- กลมุ่ คําสง่ั การทําเอกสารแบบรายการ (List)
- กลมุ่ คําสง่ั เกยี่ วกบั การทําลงิ ค์
- กลมุ่ คําสงั่ จัดการรปู ภาพ
- กลมุ่ คําสง่ั จัดการตาราง (Table)
- กลมุ่ คําสง่ั ควบคมุ เฟรม
- กลมุ่ คําสงั่ อน่ื ๆ
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
ใบความรู้ที่ 1 ความหมาย+โครงสร้าง
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
การเขียนโปรแกรมเบื้องต้นด้วยHTML
- 1 - 5
Pages: