เวบ็ กราฟิก (ง20203) [ภาคเรียนท่ี 1 ปีการศึกษา 2562 ] ใบความรู้ ภาษา HTML การสร้างเว็บเพจในปจั จบุ นั สามารถทาได้ 2 วธิ ี 1. สร้างข้ึนด้วยตนเอง โดยการใช้คาส่ังต่างๆ ของภาษา HTML แล้วสั่งงานผ่านทางโปรแกรม Text Editor เชน่ Notepad 2. สร้างจากโปรแกรมสาเร็จรูปทั่วไป โดยใช้โปรแกรมต่างๆ ที่มีความสามารถในการสร้างเว็บเพจ ซ่ึง ปัจจุบันมีให้เลือกใช้อย่างมากมาย เช่น FrontPage, Dreamweaver หรือแม้แต่โปรแกรม Microsoft Office กส็ ามารถสร้างเว็บเพจได้ ผ้ทู ี่ใช้โปรแกรมสาเร็จรูปพวกนี้ไม่จาเป็นต้องรู้คาส่ังต่างๆ ของภาษา HTML ให้ยุ่งยาก เลย เพราะโปรแกรมเหลา่ น้จี ะทาการเปล่ยี นขอ้ มลู ต่างๆ ที่ทาไว้ใหเ้ ปน็ ภาษา HTML โดยอตั โนมตั ิ HTML คืออะไร ? HTML (Hyper Text Markup Language) เปน็ ภาษาแรกที่ใช้ในการเขียนโปรแกรมเพื่อให้ข้อมลู ทีเ่ ขยี น ไปแสดงผลบนเครือขา่ ยอนิ เทอร์เนต็ ในลกั ษณะของข้อความ รปู ภาพ เสยี ง และภาพเคลือ่ นไหวตา่ งๆ ภาษา HTML เป็นภาษาท่ีง่ายต่อการเรียนรู้ สามารถกาหนดรูปแบบและโครงสร้างได้ง่าย มีการพัฒนา เพอ่ื ให้ใชง้ านง่ายข้ึน และตอบสนองตอ่ งานด้านกราฟกิ มากยิ่งขน้ึ โปรแกรมภาษา HTML รุ่นใหมๆ่ มีข้อดี ต่างๆ เพ่ิมข้ึนมากมาย เช่น สามารถแสดงผลบนเว็บเบราว์เซอร์ทุกตัวท่ีสนับสนุน HTML และใช้งาน รว่ มกบั โปรแกรมสาเร็จรปู ทีใ่ ช้สาหรบั สร้างเว็บเพจทว่ั ไปไดง้ ่าย และไฟล์ทไ่ี ดจ้ ะมีขนาดเลก็ ปัจจุบัน HTML ถูกพัฒนาเวอร์ช่ันล่าสุด คือ HTML 5.0 หรือมักเรียก HTML5 ท่ีรองรับอุปกรณ์ได้ หลากหลายท้ัง Desktop PC, Notebook, Mobile, Tablet, Smart TV, Game Console
เว็บกราฟิก (ง20203) [ภาคเรียนท่ี 1 ปกี ารศึกษา 2562 ] หลกั การสรา้ งเว็บเพจดว้ ยภาษา HTML เคร่อื งมอื ท่ีใชใ้ นการสรา้ งเวบ็ เพจอยู่ 2 อยา่ ง คือ เทก็ ซเ์ อดเิ ตอร์ (Text Editor) และเวบ็ บราวเซอร์ (Web Browser) 1. เท็กซ์เอดเิ ตอร์ (Text Editor) คอื โปรแกรมตา่ งๆ ทใ่ี ชใ้ นการกาหนดข้อความ และรปู แบบคาสัง่ ต่างๆ ของภาษา HTML ซึ่งปัจจุบันผู้เขียนโปรแกรมส่วนใหญ่จะใช้โปรแกรม Notepad ในการเขียนโปรแกรม HTML เป็นหลกั 2. เวบ็ บราวเซอร์ (Web Browser) คือ ส่วนทีใ่ ชส้ าหรบั แสดงผลลพั ธ์ของเอกสารที่เขยี นดว้ ยภาษา HTML เหมอื นกบั การคอมไพล์ (Compiled) หรอื รนั (Run) โปรแกรมภาษาทางคอมพิวเตอรท์ ัว่ ๆ ไป การเขยี นโปรแกรมด้วยภาษา HTML ส่วนประกอบที่สาคญั ของภาษา HTML ได้แก่ Tag และ Attribute คาส่ัง หรอื แท็ก (TAG) เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบรุ ปู แบบคาสัง่ หรอื การลงรหสั คาสงั่ HTML โดยคาสง่ั จะอยู่ในเครื่องหมาย < > ทกุ คาสง่ั เชน่ <BR>, <BODY>, <HEAD> เป็นต้น สัญลกั ษณ์ < อ่านว่า less-than bracket > อ่านวา่ greater-than bracket
เว็บกราฟิก (ง20203) [ภาคเรียนที่ 1 ปกี ารศกึ ษา 2562 ] รปู แบบของแทก็ <TAG> 1. TAG เดย่ี ว (Single Tag) รปู แบบคาสง่ั ที่มีเพียงคาสงั่ เดยี วหรอื มเี พียงแทก็ (TAG) เดียวก็สามารถใชง้ าน ได้ เช่น <BR> , <HR> 2. TAG คู่ (Paired Tag) รูปแบบคาสั่งท่ีเป็นสองส่วน คือ มีส่วนเริ่มต้นและต้องมีส่วนจบของคาส่ัง โปรแกรมถงึ จะทางานได้สมบูรณ์ โดยส่วนจบของแต่ละคาสั่งจะมีเครอ่ื งหมาย Slash (/) ไว้หน้าแทก็ ปิดคาสั่งนั้น เช่น <title> ข้อความ </title> Tag เปิด Tag ปดิ ในกรณีต้องการซ้อนแท็กมากกว่า 1 แท็ก เราต้องทาการเปิด ปิดแท็กให้ถูกต้อง โดยการปิดแท็กในสุด ก่อน แล้วจึงไล่ปิดแท็กอื่นๆ ตามลาดบั <h2><i> ขอ้ ความ </i></h2> แอตทรบิ วิ ต์ (Attributes) เป็นสว่ นขยาย หรอื คุณสมบตั ิใน tag ใช้สาหรบั จัดรูปแบบเพิ่มเตมิ โดยสามารถ กาหนดค่าให้กับ Attribute เช่น ขนาด สี ระยะห่าง เป็นต้น ค่าของ attribute (Value) จะอยู่ใน เคร่ืองหมาย (“….”) ภายในเคร่ืองหมาย < > ในส่วน Tag เปิดเท่านั้นและการระบุ Attribute มากกวา่ 1 Attribute ให้ใช้ช่องวา่ งเป็นตัวคน่ั เช่น Tag Attribute Value <hr width=“600” size=“5”>ใช้สร้างเส้นคน่ั ความยาว 600 <p align=\"center\">ขอ้ ความในพารากราฟนี้จดั วางอยกู่ ึ่งกลางหนา้ จอ</p>
เวบ็ กราฟิก (ง20203) [ภาคเรียนที่ 1 ปีการศึกษา 2562 ] ในการเขียน tag, attribute และค่าของ attribute จะใช้เป็นตัวอักษรพิมพ์เล็กหรือพิมพ์ใหญ่ก็ได้ แต่ เพอื่ ใหเ้ ปน็ ไปตามมาตรฐานของ (X)HTML รุน่ ใหม่ ขอใหใ้ ชเ้ ปน็ ตัวอกั ษรพมิ พ์เล็กทงั้ หมด และสาหรบั tag ทไ่ี มม่ ี tag ปิด ให้ใส่ เปน็ \" / >\" เชน่ <hr />, <br /> 3. การเขยี นโปรแกรมดว้ ยภาษา HTML จะมโี ครงสรา้ งหลกั และการจดั วางคาสง่ั หลกั ทเ่ี ป็นมาตรฐาน เหมอื นกันทวั่ โลก โดยจะประกอบด้วยคาสั่งหลักๆ อยู่ 4 คาสงั่ ดังน้ี 3.1 <HTML>……….</HTML> 3.2 <HEAD>……….</HEAD> 3.3 <TITLE>……….</TITLE> 3.4 <BODY>……….</BODY> โครงสร้างภาษา HTML การเขียนโฮมเพจด้วยภาษา HTML น้ัน เอกสาร HTML จะประกอบดว้ ยสว่ นประกอบ 2 สว่ น ดังนี้ 1. ส่วน Head คือส่วนทจ่ี ะเป็นหวั (Header) ของหนา้ เอกสารทว่ั ไป หรอื ส่วนช่ือเรอ่ื ง (Title) ของ หนา้ ตา่ งการทางานในระบบ Windows 2. ส่วน Body จะเปน็ สว่ นเนอื้ หาของเอกสารนนั้ ๆ ซง่ึ จะประกอบดว้ ย Tag คาส่ังในการจัดรปู แบบ หรอื ตกแต่งเอกสาร HTML ในท้ังสองส่วนนี้จะอยภู่ ายใน Tag <HTML>…</HTML> ดงั น้ี <HTML> <HEAD> <TITLE>ตวั อกั ษรทีอ่ ยใู่ นคาสงั่ นจี้ ะแสดงอยใู่ น title bar ของ web page </TITLE> </HEAD> <BODY> ตัวอักษรท่อี ยใู่ นคาส่ังนจ้ี ะแสดงในสว่ นแสดงผลของ web browser </BODY> </HTML>
เวบ็ กราฟิก (ง20203) [ภาคเรยี นท่ี 1 ปีการศึกษา 2562 ] คาสงั่ เรมิ่ ต้นของเอกสาร HTML 1) <html>...</html> ในการใช้งาน HTML เราจะต้องเรม่ิ ด้วย <html> และปดิ ด้วย </html> เสมอ ส่วนภายใน Element <html> ประกอบด้วยส่วนของ <head>...</head> และ <body>...</body> 2) <head>...</head> ใช้กาหนดรายละเอยี ดตา่ งๆ เกยี่ วกบั เวบ็ เพจ ซงึ่ คาสง่ั ทอี่ ยใู่ นส่วนน้จี ะไมได้แสดงผลให้ เหน็ ในหน้าเวบ็ เพจ เชน่ กาหนดหวั ขอ้ เรอ่ื งของเวบ็ เพจ ทจ่ี ะแสดงใหเ้ หน็ ใน title bar ด้านบนของเว็บบราวเซอ์ร์ โดยใช้ Element <title>...</title> นอกจากนี้ในส่วนของ <head> ยังใชก้ าหนด metaname เพอื่ บอกว่าใน หน้าเว็บเพจนมี้ ีเน้ือหาเกย่ี วกับอะไร สาหรบั การใชง้ านของ Search Engine (เชน่ Google, Yahoo, Bing), กาหนดสไตล์ CSS และ Script ต่างๆ (จะพดู ถงึ อย่างละเอียดในบทต่อไป) 3) <body>...</body> เปน็ สว่ นทีแ่ สดงเนอ้ื หาทจี่ ะแสดงทางหนา้ จอทัง้ หมด มสี ่วนประกอบ ไดแ้ ก่ ขอ้ ความ ตาราง ลสิ ต์ รูป ภาพ ลิงค์ เป็นตน้
Search
Read the Text Version
- 1 - 5
Pages:
