วชิ าการสร้างเว็บเพจ ดว้ ย HTML รหสั วิชา 2201-2414 อาจารย์กรรณกิ า สิงห์หนู คณะวิชาคอมพวิ เตอรแ์ ละปฏิบัติสานกั งาน
HTML ต้นกาเนิดของภาษา HTML เกิดจาก เมื่อปี 1989 นักฟิสิกส์ชื่อ Tim Berners-Lee แห่งสถาบันวิจัย CERN เสนองานวิจัยเรอื่ ง prototyped ENQUIRE และ Hypertextsystem ใช้สาหรบั นักวิจัยของสถาบันเพ่ือแบ่งข้อมูลกัน และถูกพัฒนามาเร่ือยๆจนถึงปจั จบุ ัน
HTMLHTML เป็นตัวย่อมาจาก Hypertext MarkupLanguage เป็นภาษาหลักท่ีใช้ในการแสดงผลบนเว็บ บราวเซอร์ในอินเตอร์ โดยสามารถนาเสนอข้อมูลตวั อักษร รวมทั้งเชื่อมตอ่ เพ่ือ แสดงภาพ , เสียง และไฟล์ในรปู แบบอนื่ ๆ อ.กรรณกิ า สงิ หห์ นู คณะวิชาคอมพิวเตอรแ์ ละปฏิบัตสิ านกั งาน
โครงสรา้ งของภาษา HTMLจะแบง่ ออกเปน็ 2 สว่ น คือ 1. ส่วนของคาสงั่ (tag) เปน็ ส่วนท่ีกาหนดรูปแบบของขอ้ ความท่ี แสดง ซ่งึ เราเรยี กวา่ Tag โดยกาหนดเปน็ แทก็ เปิดและแท็กปิด จะเขียนอยใู่ นเครอ่ื งหมาย < ... > และ </......> 2.สว่ นทีเ่ ป็นขอ้ มลู ทีต่ ้องการแสดง เช่น ข้อความ ภาพ เสยี ง ภาพเคลื่อนไหว อ.กรรณกิ า สงิ หห์ นู คณะวิชาคอมพวิ เตอรแ์ ละปฏบิ ตั สิ านกั งาน
แสดงโครงสร้างของภาษา HTML<html> แท็กเปิด <head><title> ข้อความท่ีตอ้ งการแสดงในแถบชื่อ title bar</title> แทก็ ปิด</head><body>เน้ือหาท่จี ะแสดงใน web browser</body> แทก็ ปดิ</html> อ.กรรณกิ า สงิ หห์ นู คณะวชิ าคอมพิวเตอรแ์ ละปฏิบัตสิ านักงาน
• <HTML> คาส่งั• <HEAD>• <TITLE> เป็นคาสงั่ กาหนดจดุ เรม่ิ ต้นของไฟล์ HTML• </TITLE> เป็นคาสัง่ กาหนดจดุ เรมิ่ ตน้ สว่ นหวั ของไฟล์• </HEAD> เปน็ คาสั่งกาหนดจุดเร่มิ ต้นของช่ือเรอื่ ง• <BODY> เป็นคาสงั่ กาหนดจดุ ส้ินสุดของชอ่ื เรือ่ ง• </BODY> เป็นคาส่ังกาหนดจุดส้ินสุดส่วนหวั ของไฟล์• </HTML> เป็นคาสงั่ กาหนดจุดเริ่มตน้ สว่ นเนื้อหาของไฟล์ เป็นคาสง่ั กาหนดจดุ สิ้นสดุ ส่วนเนื้อหาของไฟล์ เปน็ คาส่งั กาหนดจุดสิ้นสดุ ของไฟล์ HTML อ.กรรณกิ า สงิ หห์ นู คณะวิชาคอมพิวเตอร์และปฏิบตั สิ านกั งาน
สว่ นหวั (HEAD)• ประกอบด้วยการกาหนดช่ือของเว็บเพจท่ีเรยี กว่า Title บอก ใหท้ ราบว่าเอกสารนนั้ เกี่ยวกบั อะไร โดยคาสง่ั <HEAD> เป็น การเริ่มต้นชื่อเรื่องเอกสาร ภายในคาสั่งประกอบด้วยคาสั่ง <Title> อีกทีเพอื่ แสดงชือ่ ของเอกสารนน้ั อ.กรรณิกา สงิ หห์ นู คณะวิชาคอมพิวเตอร์และปฏบิ ัตสิ านักงาน
สว่ นเน้ือหาของเอกสาร (BODY)• ประกอบด้วยส่วนท่ีเป็นเนื้อหาของเว็บเพจ เช่น ข้อความ ตาราง รูปภาพ พ้ืนหลัง สีตัวอักษร และ แบบฟอร์มต่างๆ โดยใช้คาส่ัง <BODY> อ.กรรณกิ า สิงหห์ นู คณะวชิ าคอมพิวเตอรแ์ ละปฏิบตั สิ านกั งาน
อ.กรรณิกา สงิ หห์ นู คณะวชิ าคอมพวิ เตอรแ์ ละปฏิบตั สิ านกั งาน
กาหนดสีพน้ื หลังเปน็ สีรปู แบบ<BODY BGCOLOR = “ช่อื ของส”ี >หรือ <BODY BGCOLOR = “#คา่ ของสรี ูปแบบเลขฐาน16”>ตัวอยา่ ง<BODY BGCOLOR = “red”> หรือ<BODY BGCOLOR = “#00FFFF”> อ.กรรณกิ า สงิ หห์ นู คณะวชิ าคอมพวิ เตอร์และปฏิบัตสิ านักงาน
อ.กรรณิกา สงิ หห์ นู คณะวชิ าคอมพวิ เตอรแ์ ละปฏิบตั สิ านกั งาน
กาหนดสพี ้นื หลงั เปน็ รปู ภาพรูปแบบ<BODY BACKGROUND = “ชอื่ รูปภาพ”>ตัวอย่าง• <BODY BACKGROUND = “bg.jpg”>• <BODY BACKGROUND = “image.gif”> อ.กรรณกิ า สงิ หห์ นู คณะวิชาคอมพิวเตอร์และปฏิบัตสิ านกั งาน
อ.กรรณิกา สงิ หห์ นู คณะวชิ าคอมพวิ เตอรแ์ ละปฏิบตั สิ านกั งาน
ข้อความหัวเรอื่ งการกาหนดหัวเรื่อง สามารถกาหนดได้ โดยใชค้ าสง่ั ดงั น้ี <h1>หวั เรือ่ งขนาดใหญ่ 1</h1> <h2>หวั เรอื่ งขนาดใหญ่ 2</h2> <h3>หวั เรื่องขนาดใหญ่ 3</h3> <h4>หัวเรื่องขนาดใหญ่ 4</h4> <h5>หัวเรื่องขนาดใหญ่ 5</h5> <h6>หวั เรื่องขนาดใหญ่ 6</h6>โดยที่ <h1> นน้ั จะมขี นาดใหญ่ที่สดุ สว่ น <h6> จะมขี นาดเลก็ ทสี่ ุด อ.กรรณกิ า สิงหห์ นู คณะวชิ าคอมพวิ เตอรแ์ ละปฏิบัตสิ านักงาน
ตวั อยา่ ง<html> <head> <title> การกาหนดหวั เรอ่ื ง</title> </head> <body> <h1>หัวเรื่องขนาดใหญ่ 1</h1> <h2>หัวเรอ่ื งขนาดใหญ่ 2</h2> <h3>หัวเร่อื งขนาดใหญ่ 3</h3> <h4>หัวเรอ่ื งขนาดใหญ่ 4</h4> <h5>หวั เรอื่ งขนาดใหญ่ 5</h5> <h6>หวั เรอื่ งขนาดใหญ่ 6</h6> </body></html> อ.กรรณิกา สงิ หห์ นู คณะวิชาคอมพิวเตอรแ์ ละปฏบิ ตั สิ านกั งาน
อ.กรรณิกา สงิ หห์ นู คณะวชิ าคอมพวิ เตอรแ์ ละปฏิบตั สิ านกั งาน
การจดั วางตาแหน่งข้อความ1.การจัดขอ้ ความกึง่ กลางหนา้จะใช้คาสัง่ <CENTER>…………</CENTER> รูปแบบ <BODY> <CENTER>ข้อความกึ่งกลางหน้า</CENTER> </BODY> อ.กรรณกิ า สิงหห์ นู คณะวิชาคอมพิวเตอรแ์ ละปฏิบัตสิ านักงาน
อ.กรรณิกา สงิ หห์ นู คณะวชิ าคอมพวิ เตอรแ์ ละปฏิบตั สิ านกั งาน
การจดั วางตาแหน่งขอ้ ความ (ตอ่ )2.ขน้ึ บรรทดั ใหม่จะใชค้ าสั่ง <BR> , <P> , <P> </P><BR> เปน็ คาสั่งให้ขอ้ ความขึน้ บรรทัดใหม่<P> เปน็ คาสัง่ ใหข้ ้อความขึน้ บรรทัดใหม่ และเวน้ อีก 1 บรรทัด<P> </P> เป็นคาสั่งให้ขอ้ ความขนึ้ บรรทัดใหม่ และเว้นอีกหลายบรรทดั อ.กรรณิกา สิงหห์ นู คณะวิชาคอมพวิ เตอรแ์ ละปฏิบตั สิ านักงาน
รปู แบบ <BODY> ขอ้ ความ1 <BR> ข้อความ2 <BR> </BODY> อ.กรรณิกา สงิ หห์ นู คณะวชิ าคอมพวิ เตอรแ์ ละปฏบิ ตั สิ านกั งาน
ตัวอย่าง<html> <head> <title> การข้นึ บรรทดั ใหม่</title> </head> <body> BR เป็นคาสัง่ ให้ข้อความขนึ้ บรรทดั ใหม่ <BR> p เป็นคาสัง่ ใหข้ ้อความขึ้นบรรทดั ใหม่ และเวน้ อกี 1 บรรทดั <p> เป็นคาสั่งใหข้ อ้ ความขน้ึ บรรทดั ใหมแ่ ละเว้นอีกหลายบรรทัด<P> </P>บรรทัดนี้อยูห่ า่ งจากบรรทัดอ่นื เพราะวา่ คาสงั่ </body></html> อ.กรรณกิ า สงิ หห์ นู คณะวิชาคอมพิวเตอร์และปฏิบัตสิ านักงาน
อ.กรรณิกา สงิ หห์ นู คณะวชิ าคอมพวิ เตอรแ์ ละปฏิบตั สิ านกั งาน
การจัดวางตาแหนง่ ขอ้ ความ (ตอ่ )3. การจดั ขอ้ ความชดิ ขอบ ตาแหนง่ ของการจดั วางมี 3 แบบคือ 1. left เป็นการจดั ขอ้ ความชดิ ซ้าย 2. right เป็นการจดั ขอ้ ความชิดขวา 3. center เปน็ การจัดพารากราฟกึ่งกลางจอภาพ รปู แบบ <p align = “ตาแหน่ง” > ข้อความ</p> อ.กรรณกิ า สิงหห์ นู คณะวชิ าคอมพวิ เตอรแ์ ละปฏิบัตสิ านกั งาน
ตัวอยา่ ง<html> <head> <title> จดั ตาแหนง่ </title> </head> <body><p align = \"center\" > จดั ตาแหน่งขอ้ ความกง่ึ กลาง</p><p align = \"right\" > จัดตาแหนง่ ข้อความชิดขวา</p><p align = \"left\" > จัดตาแหนง่ ข้อความชดิ ซ้าย</p> </body> อ.กรรณกิ า สิงหห์ นู คณะวิชาคอมพิวเตอรแ์ ละปฏิบัตสิ านกั งาน</html>
อ.กรรณิกา สงิ หห์ นู คณะวชิ าคอมพวิ เตอรแ์ ละปฏิบตั สิ านกั งาน
การจดั วางตาแหน่งข้อความ (ตอ่ )4. การเยอ้ื งขอ้ ความ รปู แบบ <blockquote> ข้อความ.................................................................. </ blockquote> อ.กรรณกิ า สิงหห์ นู คณะวชิ าคอมพิวเตอร์และปฏิบัตสิ านกั งาน
<html> <head> <title> การเยอื้ งขอ้ ความ</title> </head> <body>หน่วยรับข้อมลู และคาสัง่ ( InputDevice) หมายถงึ หน่วยทท่ี าหนา้ ทร่ี บั โปรแกรม คาส่ัง และข้อมูล เข้าสู่ระบบคอมพิวเตอร์เพือ่ นาไปดาเนนิ การ อุปกรณ์ท่สี าคัญได้แก่<blockquote>- แปน้ พิมพ์ ( Keyboard) เปน็ อุปกรณ์คล้ายแปน้ พมิ พด์ ีด สาหรบั ใช้พมิ พ์คาส่งั และข้อมูลเขา้สู่เครือ่ งคอมพิวเตอร์</ blockquote> </body></html> อ.กรรณกิ า สงิ หห์ นู คณะวชิ าคอมพวิ เตอรแ์ ละปฏบิ ตั สิ านักงาน
อ.กรรณิกา สงิ หห์ นู คณะวชิ าคอมพวิ เตอรแ์ ละปฏิบตั สิ านกั งาน
การจัดวางตาแหนง่ ข้อความ (ตอ่ )4. การยอ่ หนา้ ข้อความ รูปแบบ <dd> ขอ้ ความ.................................................................. </dd> อ.กรรณิกา สิงหห์ นู คณะวิชาคอมพวิ เตอร์และปฏิบัตสิ านกั งาน
<html><head> <title> การเย้อื งข้อความ</title></head> <body><dd>หน่วยรบั ข้อมลู และคาส่ัง ( InputDevice) หมายถึง หนว่ ยท่ีทาหนา้ ทร่ี บั โปรแกรม คาส่ัง และข้อมลู เข้าสรู่ ะบบคอมพิวเตอรเ์ พ่อื นาไปดาเนนิ การ อุปกรณ์ทส่ี าคัญได้แก่</dd><blockquote>- แปน้ พมิ พ์ ( Keyboard) เปน็ อุปกรณ์คล้ายแป้นพมิ พ์ดดี สาหรบั ใช้พมิ พ์คาส่งั และข้อมูลเขา้สู่เครื่องคอมพิวเตอร์</ blockquote> </body> อ.กรรณกิ า สิงหห์ นู คณะวิชาคอมพิวเตอรแ์ ละปฏบิ ัตสิ านกั งาน</html>
อ.กรรณิกา สงิ หห์ นู คณะวชิ าคอมพวิ เตอรแ์ ละปฏิบตั สิ านกั งาน
การจดั วางตาแหน่งขอ้ ความ (ตอ่ )4. การตเี สน้ แนวนอน จะใชค้ าส่ัง <HR> รูปแบบ <HR width = ความยาวของเส้น size = ความหนาของเส้น align = ตาแหนง่ การวางของเสน้ color = สีเส้น noshade > อ.กรรณิกา สงิ หห์ นู คณะวิชาคอมพวิ เตอร์และปฏิบัตสิ านักงาน
การจัดวางตาแหน่งขอ้ ความ (ตอ่ )4. การตีเส้นแนวนอน (ต่อ)width - กาหนดเปน็ พิกเซล เช่น widh=400 หรอื เปน็ เปอรเ์ ซน็ เช่น widh=40%size - กาหนดความหนาของเสน้ เป็นพิกเซล เชน่ size = 5align - ตาแหน่งการวางของเสน้ เช่น align = right หรือ align = leftcolor - สเี สน้ เชน่ red , bluenoshade - การแสดงเงาของเส้นอ.กรรณิกา สงิ หห์ นู คณะวิชาคอมพิวเตอรแ์ ละปฏบิ ัตสิ านกั งาน
<html> ตัวอยา่ ง <head> <title> การตเี ส้น</title> </head> <body> <h1><center>การตีเสน้ แนวนอน </center></h1> <hr width = 80% > <hr width = 75% color = red > <hr width = 50% size= 5 > <hr width = 75% color = green align = right > <hr width = 75% color = blue size = 15 align = left noshade > </body> </html> อ.กรรณิกา สงิ หห์ นู คณะวิชาคอมพิวเตอร์และปฏบิ ตั สิ านักงาน
อ.กรรณิกา สงิ หห์ นู คณะวชิ าคอมพวิ เตอรแ์ ละปฏิบตั สิ านกั งาน
1.การกาหนดสีใหต้ วั อักษรทง้ั หมดบนเวบ็ เพจรปู แบบทใ่ี ช้<BODY TEXT = “BLUE” > กาหนดสีตวั อกั ษรโดยใช้ช่ือสี<BODY TEXT = “#255CAA” > กาหนดสตี ัวอกั ษรโดยใช้รหสั เลขฐาน16 อ.กรรณกิ า สิงหห์ นู คณะวชิ าคอมพวิ เตอรแ์ ละปฏิบัตสิ านักงาน
อ.กรรณิกา สงิ หห์ นู คณะวชิ าคอมพวิ เตอรแ์ ละปฏิบตั สิ านกั งาน
2. กาหนดแบบตวั อักษรบางกล่มุรูปแบบ <FONT FACE =“ช่อื อักษรที่ 1”> ขอ้ ความ.........................................</Font> อ.กรรณกิ า สงิ หห์ นู คณะวชิ าคอมพิวเตอร์และปฏบิ ัตสิ านกั งาน
<html> ตวั อยา่ ง <head> <title> การกาหนด font</title> </head> <body > กาหนด Font ใน HTML<font face =\"AngsanaUPC\"> การกาหนดตวั อกั ษรแบบ AngsanaUPC </font> <br><font face =\"MS Sana Serif\"> การกาหนดตวั อักษรแบบ MS Sana Serif </font> <br><font face =\"Cordia New\"> การกาหนดตัวอกั ษรแบบ Cordia New </font> <br> </body></html> อ.กรรณิกา สิงหห์ นู คณะวิชาคอมพวิ เตอร์และปฏิบัตสิ านักงาน
อ.กรรณิกา สงิ หห์ นู คณะวชิ าคอมพวิ เตอรแ์ ละปฏิบตั สิ านกั งาน
2. กาหนดแบบตัวอักษรทัง้ เอกสารรูปแบบ <BASEFONT FACE =“ชอ่ื อกั ษรท่ี 1”> ขอ้ ความ......................................... อ.กรรณกิ า สงิ หห์ นู คณะวิชาคอมพวิ เตอร์และปฏิบัตสิ านกั งาน
ตวั อย่าง<html><head> <title> การกาหนด font</title></head> <body > <basefont face =\"AngsanaUPC\">การกาหนดตวั อักษรแบบ AngsanaUPC ทัง้ เอกสาร</body> อ.กรรณกิ า สิงหห์ นู คณะวชิ าคอมพิวเตอร์และปฏบิ ตั สิ านักงาน</html>
อ.กรรณิกา สงิ หห์ นู คณะวชิ าคอมพวิ เตอรแ์ ละปฏิบตั สิ านกั งาน
3. การกาหนดสีตวั อกั ษรและขนาดรูปแบบ <FONT COLOR =“สี” SIZE=“ตวั เลข”> ขอ้ ความ................................................</FONT> อ.กรรณิกา สงิ หห์ นู คณะวิชาคอมพิวเตอรแ์ ละปฏิบตั สิ านกั งาน
<html> ตวั อย่าง <head> <title> การกาหนด font</title> </head> <body > <font color=red size = 5> กาหนดสขี องข้อความและขนาดขอ้ ความ </font></body></html> อ.กรรณกิ า สงิ หห์ นู คณะวชิ าคอมพวิ เตอร์และปฏบิ ตั สิ านักงาน
ตารางกาหนดสีตวั อกั ษร อ.กรรณิกา สิงหห์ นู คณะวิชาคอมพวิ เตอร์และปฏบิ ตั สิ านกั งาน
Search
