ภาษา HTML ภาษา HTML (Hyper Text Markup Language) เป็นภาษาทใี่ ช้ในการเขยี นโปรแกรม ข้อมลู ท่ีใช้แสดงผลบนเครอื ขา่ ยอินเตอรเ์ น็ตในลกั ษณะของข้อความ รปู ภาพ เสยี ง และ ภาพเคลอื่ นไหวต่างๆ ภาษา HTML เปน็ ภาษาทง่ี ่ายตอ่ การเรยี นรู้ สามารถกาหนด รูปแบบและโครงสรา้ งไดง้ า่ ยทาใหไ้ ดร้ ับความนยิ ม และมกี ารพัฒนาอยา่ งต่อเนอ่ื งเพอื่ ให้ ใชง้ านง่ายขนึ้ และตอบสนองต่องานดา้ นกราฟกิ มากย่ิงขึ้น และสนบั สนุนการแสดงผลใน เว็บบราวเซอรม์ ากมาย และบนั ทกึ ในรูของไฟลน์ ามสกลุ htm หรอื htmlในการพฒั นา เว็บเพจในปจั จบุ ันมีเครือ่ งมือชว่ ยอานวความสะดวกมากมายแตผ่ สู้ ร้างสามารถใช้ เครอื่ งมือพื้นฐานทมี่ อี ยแู่ ลว้ ให้เป็นประโยชน์มากทส่ี ุด โดยไม่ตอ้ งลงทุนอะไรมากมายเม่ือ ทาความเขา้ ใจและเขยี นโค๊ดได้ถูกต้องแมน่ ยาคอ่ ยหาเครือ่ งมอื มาช่วยอานวยความ สะดวกอกี ที • เครื่องมอื เขยี นคาสั่งเราจะใช้ Notepad เป็นหลักเพราะมเี ปน็ มาตรฐานอยู่แลว้ ใน วนิ โดว์ทกุ เวอร์ชนั่ • เครือ่ งมอื แสดงผล หรือบราวเซอร์นี่นกี่ ม็ พี รอ้ มแลว้ ในวินโดว์กเ็ ป็น Internet Explorer หรอื Firefox
โครงสร้างหลกั ของภาษา HTML (Hyper Text Markup Language) ในการเขียนภาษา HTML น้ัน จะมรี ปู แบบโครงสร้างการเขียนแบ่งออกเป็น 3 สว่ น โด จะแสดงในรูปแบบของสดี งั น้ี <html> ((1) ส่วนประกาศ<head> <title> ขอ้ ความนี้จะแสดงบนไตเติล้ บารข์ องบราวเซอร์ </title> </head> (2) สว่ นหวั <body> ส่วนเนอื้ หาของเวบ็ เพจ ประกอบดว้ ย - ข้อความ - รปู ภาพ
- ส่อื มลั ตมิ ีเดีย ------------- ------------- ------------- </body> (3) ส่วนเนอ้ื หา </html> (1) ปดิ สว่ นประกาศ 1. สว่ นประกาศ เป็นส่วนท่ีกาหนดให้บราวเซอรท์ ราบวา่ นคี่ อื ภาษา HTML และจะต้อ ทาการแปรผลอยา่ งไรมคี าสง่ั คเู่ ดียวคอื <html> และ </html> ปรากฏทหี่ ัวและท้าย ไฟล์ 2. ส่วนหัวเร่ือง (head) เปน็ ส่วนท่ีแสดงผลขอ้ ความบนไตเตลิ้ บารข์ องบราวเซอร์ และ อาจมคี าสง่ั สาหรบั กาหนดรายละเอียดด้านเทคนิคอน่ื ๆอกี แทรกอยู่ระหว่างคาสัง่ <head> และ</head> 3. ส่วนเนอื้ หา (body) เป็นส่วนทีม่ คี วามซับซอ้ นมากที่สดุ และสามารถใส่เทคนคิ ลกู เลน่ เพอ่ื ดงึ ดดู ความสนใจจากผู้ชมไดม้ าก ความแตกต่างระหวา่ งเว็บไซต์ตา่ งๆ แสดงความมี ฝมี อื ของผจู้ ัดทาศลิ ปะในการออกแบบจะอย่ใู นส่วนนีท้ ้งั หมด ซึ่งจะแทรกอยู่ระหว่าง คาสง่ั <body>และ </body>กม็ ีพรอ้ มแล้วในวิน
HEAD : รายละเอยี ดคาส่งั ในส่วนหวั คาส่ังท่ีอยใู่ นสว่ นหวั นจ้ี ะอยรู่ ะหวา่ งคาสง่ั <head> ... </head> เราสามารถมองเหผ็ ่า นบราวเซอรไ์ ด้เฉพาะขอ้ ความบนไตเตล้ิ บารค์ าสง่ั อ่นื ๆ น้ันจะทางานในสว่ นเบื้องหลงั แต่ กม็ ีส่วนสาคัญเปน็ อยา่ งยิ่งท่ไี มค่ วรละเลย ประกอบดว้ ยคาสง่ั ตา่ งๆ ดังนี้ 1. หวั เร่ืองบนไตเตล้ิ บาร์เปน็ ส่วนสาคญั ท่จี ะบอกรายละเอยี ดของหนา้ เว็บเพจนัน้ ๆ อยู่ ภายในคาสั่ง <title> ... </title> จะตอ้ งกาหนดเสมอและควรใช้ภาษาองั กฤษนา สามารถใช้ภาษาไทยเปน็ คาตามได้ แต่ต้องไมย่ าวเกนิ 64 ตวั อักษร เชน่ Make a home with HTML : สร้างเวบ็ สวยดว้ ยภาษา HTML (การนบั ตวั อักษรในคาภาษาไทยตอ้ งนัส ระบน/ลา่ ง/วรรณยุกตด์ ว้ ย) ชื่อเรยี กเวบ็ ไซตท์ ี่ปรากฏบนไตเต้ลิ บาร์ นอกจากจะนามาใชแ้ สดงชื่อเรอื่ งของเว็บไซต นน้ั ๆแลว้ ยงั เปน็ ข้อความที่จะถกู นามาใชเ้ ปน็ คาสาคญั (Keyword) ในการสืบคน้ ข้อมลู จากSearch Engine เสมอ
2. การระบอุ กั ขระภาษา เปน็ สว่ นสาคญั และจาเปน็ สาหรบั เว็บเพจภาษาไทย ทาให้ผชู้ ม สามารถอา่ นขอ้ ความบนเวบ็ เพจเปน็ ภาษาไทยไดท้ ันทีโดยเฉพาะการสร้างเวบ็ จาก เครอ่ื งมอื สาเร็จรปู หลายๆ โปรแกรมทม่ี กั จะทาการกาหนดให้เว็บเปน็ ภาษาของ ผู้พฒั นาโปรแกรม(อาจเปน็ ภาษาในยุโรป/อเมรกิ า/หรือภาษาอนื่ ๆ) ทาให้ผู้ชมไม่สามารถ อ่านภาษาไทยได้ดงั นัน้ ผสู้ รา้ งเว็บจะตอ้ งทาการกาหนดคา่ การถอดรหสั ภาษาไทยไว้เลย ในทกุ ๆ ไฟลโ์ ดยใชค้ าสงั่ Meta ระบุไวท้ ส่ี ว่ น Head เชน่ เดยี วกนั กับไตเต้ิล ดงั นี้ <meta http-equiv=\"Content-Type\" content=\"text/html; charset=TIS-620\"> หรือ<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Windows874\"> ให้เลอื กใช้อย่างใดอยา่ งหนึง่ เว็บเพจท่สี รา้ งขน้ึ กจ็ ะสามารถแสดงผลภาษาไทยไดอ้ ยา่ ถูกต้อง 3. ประกาศให้โลกรถู้ ึงแม้ว่าระบบการคน้ หาของ Search Engine จะนาชื่อเรอ่ื งขอ เว็บไซตไ์ ปเปน็ คาหลกั โดยอัตโนมตั ิแล้วก็ยงั ไม่เพยี งพอ เพราะด้วยขอ้ จากัดของจานวน ตวั อักษรและคาที่ใส่ลงไป ดงั น้ันจงึ ตอ้ งมีการกาหนดคาหลกั ให้กับหน้าเวบ็ เพจนนั้ ๆ โดย ใชค้ าสงั่ ท่มี รี ปู แบบเฉพาะไวใ้ นสว่ น Head ถัดจาก Title เรียกวา่ การใช้คาสั่ง Meta (ซึ่ง จะไม่แสดงผลในหน้าตา่ งบราวเซอร)์ ดังน้ี โดว์กเ็ ป็น Internet Explorer หรอื Firefox มากกว่า 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.\">
• ถ้า X แทนค่าด้วยคาวา่ Author ในส่วน Y จะแทนค่าด้วยชอ่ื ของเจา้ ของเวบ็ ไซต์ หรอื หน่วยงาน อาจระบชุ ื่ออีเมล์ไวเ้ พอ่ื ให้สะดวกในการตดิ ต่อกับผรู้ ับผดิ ชอบ โดยตรง เช่น<Meta name=\"Author\" content=\"[email protected]\"> 4. เทคนิคพิเศษ เราสามารถใส่เทคนคิ พิเศษต่างๆ เพ่ิมเตมิ ในส่วนนไี้ ดเ้ ชน่ สครปิ ตพ์ ิเศษ แสดงวนั เวลาการแสดงผลพเิ ศษ (เราจะไดศ้ กึ ษาเพ่มิ เตมิ ในบทต่อๆ ไป) น่ีคือตัวอยา่ งของการแทรกคาสง่ั ตา่ งๆ ในสว่ น head สามารถเอาไปประยกุ ต์แก้ไขให้ เหมาะสมกบั เวบ็ เพจของไดเ้ ลย<head> <title> Make a home with HTML : สรา้ งเวบ็ ด้วยภาษา HTML</title> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=TIS-620\"> <meta name=\"keyword\" content=\"html, web, page, website, home.\"> <meta name=\"description\" content=\"HTML is a easy language for make website.\"> <meta name=\"author\" content=\"[email protected]\"> <link href=\"htmlstyle.css\" rel=\"stylesheet\" type=\"text/css\"> </head> BODY : การนาเสนอในส่วนเนอ้ื หา โดยปกตเิ มือ่ ไมม่ กี ารกาหนดอะไรเป็นพิเศษในค าส่ัง body บราวเซอรจ์ ะแสดงผลหน้ เว็บเพจเปน็ พื้นหลงั สขี าว ตัวอกั ษรสดี าเสมอในคาส่งั body เราสามารถระบคุ า่ สขี องพน้ื หลงั ตัวอกั ษรและจดุ เชื่อมโยงได้ตามตอ้ งการ ดงั น้ี <body bgcolor=\"#000099\" text=\"#FFFFFF\" link=\"#00FFFF\" alink=\"#00FF00\" vlink=\"#FF99FF\"> bgcolor = การกาหนดสีพน้ื หลัง
<html> ((1) ส่วนประกาศ<head><title>= การกาหนดสีพ้ืนหลัง link = การกาหนดสขี องจดุ เช่ือมโยง (link) background = การกาหนดรปู ภาพพืน้ หลัง (ใช้ภาพสกุล .jpg, .gif) alink = การกาหนดสีของจดุ เชื่อมโยงขณะนาเมาทไ์ ปช้ี(active link) text = การกาหนดสีตวั อกั ษรในหน้าเว็บเพจทงั้ หมด (ยกเว้นส่วนท่ีก าหนดพิเศษ) vlink = การกาหนดสีของจุดเช่อื มโยงเมอ่ื คลิกไปเยีย่ มชมมาแลว้ (visited link) การกาหนดค่าสีนน้ั สามารถกาหนดโดยระบชุ ่ือสีโดยตรง เชน่ black, white, blue,green,... เป็นต้น แต่การกาหนดแบบนี้จะไมส่ ามารถระบคุ วามเขม้ แบบไล่เฉดสไี ด้ จึงไดใ้ ช้คา่ สีเป็นตวั เลขฐานสบิ หก (hexadecimal format) โดยกาหนดเป็นค่าสีของแสง RGB แตล่ ะสปี ระกอบดว้ ยเลข 2 หลกั ในแตล่ ะสีจะมีคา่ ของสจี ากมืดไปสวา่ งดงั นี้0 1 2 3 4 5 6 7 8 9 A B C D E F เลข 2 หลักของแต่ละสีจึงมคี า่ ไดต้ ั้งแต่ 00 – FF หรือแปลงคา่ เปน็ ตวั เลขไดต้ ง้ั แต่ 0 – 255 ดังนั้นเมอื่ เรา กาหนดคา่ สเี ป็น 00FF00 (red=0, green=255, blue=0) ดงั นน้ั ผลลพั ธท์ ่ี ไดค้ ือ สเี ขียวสด แสดงการกาหนดสีพน้ื หลงั ตัวอักษร และการเชอ่ื มโยงในหนา้ เวบ็ เพจ ในตวั อย่างนีไ้ ด้เพิม่ เตมิ การใช้ ภาพเปน็ พ้นื หลังดว้ ยคาสัง่ Background และระบุช่ือรปู ภาพที่ใช้นั้นชอ่ื bgimage.gif
สรุปคาสั่ง TAGS รายละเอียด <html> ... </html> กาหนดชนดิ ของไฟลใ์ ห้ html <head> ... </head> กาหนดส่วนหวั ของไฟล์ เพอื่ จดั เกบ็ รายละเอียดและชือ่ ไฟล์ <title> ... </title> การกาหนดชือ่ ไฟลเ์ พอื่ แสดงผลบนไตเติ้ลบารข์ องบราวเซอร์ <meta> การกาหนดรายละเอียดของเวบ็ ไซตเ์ กยี่ วกบั การแสดงผลภาษา และคาอธบิ ายรายละเอยี ด คาค้นหาของเวบ็ ไซต์ <body>...</body> คาสง่ั กาหนดการแสดงผลในสว่ นเนอื้ หาของเว็บเพจ
Search
Read the Text Version
- 1 - 8
Pages:
