Download as PDF, PPTX
Html w6
- 2. บทนำ HTML 55-020418-1002-1 HTML ต้นกำเนิดของภำษำ HTML เกิดจำก เมื่อ ปี 1989 นักฟิสิกส์ชื่อ Tim Berners-Lee แห่งสถำบันวิจัย CERN เสนองำนวิจัยเรื่อง prototyped ENQUIRE และ Hypertext system ใช้สำหรับนักวิจัยของสถำบันเพื่อแบ่ง ข้อมูลกัน และถูกพัฒนำมำเรื่อยๆจนถึง ปัจจุบัน HTML เป็นตัวย่อมำจำก Hypertext Markup Language เป็นภำษำหลักที่ใช้ใน กำรแสดงผลบนเว็บ บรำวเซอร์ในอินเตอร์ โดยสำมำรถนำเสนอข้อมูลตัวอักษร รวมทั้ง เชื่อมต่อเพื่อ แสดงภำพ , เสียง และไฟล์ใน รูปแบบอื่นๆ
- 3. ภำษำ HTML จะแบ่งออกเป็น2 ส่วน คือ 55-020418-1002-1 • 1. ส่วนของคำสั่ง (tag) เป็นส่วนที่กำหนดรูปแบบของข้อควำมที่แสดง ซึ่งเรำเรียกว่ำ Tag โดยจะอยู่ในเครื่องหมำย < ... > 2. ส่วนของบทควำมทั่วๆ ไป เป็นส่วนของข้อควำมที่เรำต้องกำรแสดงผล
- 4. กำรทำงำนของ code 55-020418-1002-1 • 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
- 5. โครงสร้ำงคำสั่งของ HTML 55-020418-1002-1 • 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 ปิด
- 6. 55-020418-1002-1 • 2. Attributes Attributes เป็นตัวบอกรำยละเอียดของ tag นั้นเช่น <span align = 'left'> ... </span> เป็นกำรบอกว่ำให้อักษรที่อยู่ใน tag นี้ชิดซ้ำย 3. not case sensitive หมำยถึง จะพิมพ์ <BR> หรือ <br> ก็ได้ ผลลัพธ์ออกมำไม่ต่ำงกัน
- 7. 55-020418-1002-1 • โครงสร้ำงหลักของHTML ก็จะเริ่มด้วย <html> และจบด้วย </html> เสมอ ซึ่งชุดคำสั่งที่ใช้จะแยกเป็น 2 ส่วนคือ 1. head คำสั่งที่อยู่ในส่วนนี้จะใช้บรรยำยรำยละเอียดเกี่ยวกับ web page ซึ่งจะไม่ แสดงผลที่ web page โดยตรง 2. body คำสั่งที่อยู่ในส่วนนี้จะใช้ในกำรจัดรูปแบบตัวอักษร จัดหน้ำ ใส่รูปภำพ ซึ่ง ตัวอักษรในส่วนนี้จะแสดงที่ web browser โดยตรง
- 8. 1. คำสั่งในหัวข้อของ head(Head Section) 55-020418-1002-1 • Head Section - เป็นส่วนที่ใช้อธิบำยเกี่ยวกับข้อมูลเฉพำะของหน้ำเว็บนั้นๆ เช่น ชื่อเรื่องของหน้ำ เว็บ (Title), ชื่อผู้จัดทำเว็บ (Author), คีย์เวิร์ดสำหรับกำรค้นหำ (Keyword) • TITLE - ข้อควำมที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะพิเศษ เช่น ตัวหนำ, เอียง หรือสี โดยข้อควำมในส่วนนี้จะแสดงผลใน title bar ของ web browser
- 9. 2. คำสั่งในส่วนของ (BodySection) 55-020418-1002-1 • Body Section เป็นส่วนเนื้อหำหลักของหน้ำเว็บ ซึ่งกำรแสดงผลจะต้องใช้ Tag จำนวนมำก ขึ้นอยู่ กับลักษณะของข้อมูล เช่น ข้อควำม, รูปภำพ, เสียง, วีดโอ หรือไฟล์ต่ำงๆ ิ - ส่วนเนื้อหำเอกสำรเว็บ เป็นส่วนกำรทำงำนหลักของหน้ำเว็บ ประกอบด้วย Tag มำกมำย ตำมลักษณะของข้อมูล ที่ต้องกำรนำเสนอ กำรป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสำมำรถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่มักจะยึดรูปแบบที่อำนง่ำย คือ กำรทำย่อหน้ำในชุดคำสั่งที่ ่ เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภำยใต้ Tag <BODY> </BODY> และแบ่งกลุ่มคำสั่งได้ ดังนี้
- 10. กลุ่มคำสั่ง 55-020418-1002-1 • กลุ่มคำสั่งเกี่ยวกับกำรจัดรูปแบบเอกสำร • กลุ่มคำสั่งจัดกำรรูปภำพ • กลุ่มคำสั่งจัดแต่ง/ควบคุมรูปแบบตัวอักษร • กลุ่มคำสั่งจัดกำรตำรำง (Table) • กลุ่มคำสั่งควบคุมเฟรม • กลุ่มคำสั่งกำรทำเอกสำรแบบรำยกำร (List) • กลุ่มคำสั่งอื่นๆ • กลุ่มคำสั่งเกี่ยวกับกำรทำลิงค์
- 11. คำสั่งในกำรจัดหน้ำ HTML 55-020418-1002-1 • ในบทควำมนี้จะเป็นเนื้อหำของคำสั่งที่ใช้ในส่วนของbody section ทั้งหมดโดยจะเป็นคำสั่งในส่วน ของกำรจัดหน้ำ • 1.คำสั่งที่ใช้ในกำรจัดย่อหน้ำ คำสั่ง P นี้จะเพิ่มบรรทัดว่ำงก่อนและหลังตัวอักษรที่เรำพิมพ์ไปโดยอัตโนมัติ ตำมที่แสดงใน ตัวอย่ำง
- 12. 55-020418-1002-1 • 2.คำสั่งที่ใช้ในกำรขึ้นบรรทัดใหม่ กำรตัดบรรทัดใหม่นั้นปรกติ web browser จะทำกำรตัดให้อยู่แล้ว แต่กำรตัดคำของ web browser จะตัดเมื่อแสดงผลไม่ได้ แต่ถ้ำเรำใส่คำสั้ง <br> เข้ำไป web browser จะ ตัดให้ทันที ซึ่งคุณอำจจำเป็นที่จะต้องตัดคำเป็นบรรทัดสั้นๆเช่น กำรเขียนกลอนดังตัวอย่ำง
- 13. 55-020418-1002-1 • 3.คำสั่งที่ใช้กับข้อควำมที่เป็นหัวเรื่อง คำสั่ง h จะมีทั้งหมด 6 ลำดับด้วยกัน ไล่ตั้งแต่ h1,h2,h3,h4,h5,h6 ซึ่งขนำดของ h1 จะ ใหญ่ที่สุดดังตัวอย่ำงที่แสดง โดยเรำจะใช้กับตัวอักษรที่ต้องกำรให้เป็นหัวเรื่องเพื่อให้อักษรนั้นโดด เด่นขึ้นมำ จะสังเกตได้ว่ำเมื่อใช้ h tag จะตัดตัวอักษรที่ต่อจำก h tag เป็นบรรทัดใหม่อัตโนมัติ
- 14. 55-020418-1002-1 • 4. คำสั่งที่ใช้ในกำรขึดเส้นคั่น คำสั่งที่ใช้ในกำรขีดเส้นคั่น
- 15. 55-020418-1002-1 • 5.คำสั่งที่ใช้ในกำรจัดตัวอักษรชิดซ้ำย ชิดขวำ หรือกึ่งกลำง กำรจัดให้ตัวอักษรให้ชิดซ้ำย ขวำ หรือกึ่งกลำง เรำจะใช้ Attributes ให้รำยละเอียดของ tag โดยเรำจะใช้ align เพื่อบอกว่ำให้ชิดซ้ำย (align = 'left') ชิดขวำ (align = 'right') และ จัด กึ่งกลำง (align = 'center')
- 16. 55-020418-1002-1 6. คำสั่งที่ใช้ในกำรเปลี่ยนสีพื้นหลัง bgcolor เป็น Attributes อย่ำงหนึงเหมือนกันที่ใช้กำหนดสี คุณอำจเปลี่ยนจำก สีเขียว ่ (green) เป็น เหลือง(yellow) หรือสีอื่นๆก็ได้
- 17. คำสังในกำรกำหนดลักษณะตัวอักษร และแสดง ่ สัญลักษณ์ตำงๆ ่ 55-020418-1002-1 1.คำสั่งที่ใช้ในกำรจัดลักษณะตัวอักษร ในหัวข้อนี้จะเป็นคำสั่งที่ใช้ในกำรจัดรูปแบบทัวไปเช่นตัวเอียง ตัวหนำ ่ คำสั่งเรำจะแบ่งได้เป็น 2 พวกดังนี้
- 18.
- 19. 55-020418-1002-1 • 2.คำสั่งที่ทำให้รูปแบบตัวอักษรใน source code เหมือนกับที่แสดงผล Pre tag จะมีประโยชน์มำกในกำรที่เรำจะแสดงบทควำมที่มีเนื้อหำมำก หรือ คัดลอกเนื้อหำ จำกที่อื่นมำทำให้เรำไม่ต้องขึ้นบรรทัดใหม่ด้วยคำสั่ง br และใช้ในกำรแสดง source code ได้ดี อีกด้วย
- 20. 55-020418-1002-1 • 3.คำสั่งแสดงสัญลักษณ์พิเศษต่ำงๆ สัญลักษณ์พิเศษบำงตัวเช่น เครื่องหมำยมำกว่ำ (>) หรือ เครื่องหมำยน้อยกว่ำ (<) ซึ่ง เครื่องหมำยเหล่ำนี้ใช้ในภำษำ HTML ด้วยทำให้ตัวอักษรที่อยูในเครื่องหมำยเหล่ำนี้กลำยเป็น ่ Tag หมด หรือเครื่องหมำยที่ไม่มีบนคีบอร์ด แต่ถ้ำเรำต้องกำรแสดงเครื่องหมำยเหล่ำนี้เรำ ต้องใช้ Entity Name แทน ตำมแบบด้ำนล่ำง
- 21. กำรทำอักษรวิ่ง 55-020418-1002-1 • เรำสำมำรถทำให้เว็บเพจมีควำมน่ำสนใจมำกยิ่งขึ้น ด้วยกำรทำให้ข้อควำมเคลื่อนไหวจำกที่หนึ่งไปยัง ที่หนึ่ง โดยใช้แท็ก <marquee> ควบคุม มีรูปแบบดังนี้ • <marquee> ข้อควำมที่ต้องกำรให้เคลื่อนไหว </marquee> • <marquee attribute=value> ข้อควำมที่ต้องกำรให้เคลื่อนไหว </marquee> • marquee = คำสั่งที่ทำให้ข้อควำมเคลื่อนไหว • Attribute = คุณสมบัติกำรเคลื่อนไหว เช่น ทิศทำง ควำมเร็ว จำนวนรอบ • Value = ค่ำที่กำหนดตำมคุณสมบัติของ Attribute <marquee direction = right> <marquee behavior = alternate> - left = ซ้ายมาขวา - alter = ขวาไปซ้ายและกลับ - scroll = ขวาไปซ้ายแล้วเริ่มใหม่ - right = ขวามาซ้าย - slide = ขวาไปซ้ายแล้วหยุด <marquee LOOP = 1> <marquee scrollamount = ความเร็ว> - loop คาสั่งให้วนรอบ
- 22. กำรเรียกใช้โปรแกรม 55-020418-1002-1 • คลิกปุ่ม start • Program • Notepad
- 23. กำรบันทึก 55-020418-1002-1 • File • Save • เลือกตำแหน่งที่เก็บไฟล์งำน • ตั้งชื่อ.html • Save as type = all file
- 24. กำรเรียกดูเว็บเพจ 55-020418-1002-1 • ดูผลลัพธ์ด้วย Web browser
- 25. ใบงำน 55-020418-1002-1 คำสั่ง • 1. เข้ำสู่โปรแกรม Notepad • 2.เขียนโปรแกรมให้มีผลกำรรันดังตัวอย่ำง • 3.บันทึกข้อมูล Desktopmywebex1.html • 4.เรียกดูโปรแกรมด้วย Web browser
- 26. ใบงำนประกอบด้วย 55-020418-1002-1 • 1.คำสั่งที่ใช้ในกำรจัดย่อหน้ำ • 2.คำสั่งที่ใช้ในกำรขึ้นบรรทัดใหม่ • 3.คำสั่งที่ใช้กับข้อควำมที่เป็นหัวเรื่อง • 4.คำสั่งที่ใช้ในกำรขึดเส้นคั่น • 5.คำสั่งที่ใช้ในกำรจัดตัวอักษรชิดซ้ำย ชิดขวำ หรือกึ่งกลำง • 6.คำสั่งที่ใช้ในกำรเปลี่ยนสีพื้นหลัง • 7.คำสั่งที่ใช้ในกำรจัดลักษณะตัวอักษร • 8.คำสั่งที่ใช้ในกำรทำอักษรวิ่ง
- 27. ใบงำน (ต่อ) 55-020418-1002-1 ประวัติควำมเป็นมำของวัดพระแก้ว วัดพระศรีรตนศำสดำรำม หรือที่เรียกกันทั่วไปว่ำ วัดพระแก้ว เป็นวัดที่ พระบำทสมเด็จพระพุทธยอดฟ้ำจุฬำโลกมหำรำช ั โปรดเกล้ำฯ ให้สร้ำงขึ้นใน พ.ศ. 2325 เป็นวัดในพระบรมมหำรำชวัง เช่นเดียวกับ วัดพระศรีสรรเพชญ์ ซึ่งเป็นวัดใน พระรำชวังหลวงในสมัยอยุธยำ และมีพระรำชประสงค์ให้วัดพระศรีรัตนศำสดำรำมเป็นที่ประดิษฐำน พระพุทธมหำมณี รัตนปฏิมำกร หรือพระแก้วมรกต ที่นำมำจำกกรุงเวียงจันทร์ แต่แท้ที่จริงแล้ว พบเจอวัดพระแก้วจังหวัด เชียงรำย และเป็นสถำนที่ทรงบำเพ็ญพระรำชกุศล วัดพระศรีรัตนศำสดำรำมเป็นวัดที่ไม่มีพระสงฆ์จำพรรษำอยู่ เพรำะ มีแต่ส่วนพุทธำวำสไม่มีส่วนสังฆำวำส วัดพระศรีรตนศำสดำรำมได้รับกำรบูรณปฏิสังขรณ์มำโดยตลอด กำรบูรณะครั้งใหญ่ทั้งพระอำรำม มีขึ้นในรัชสมัย ั พระบำทสมเด็จพระนั่งเกล้ำเจ้ำอยู่หัว และในรัชสมัยพระบำทสมเด็จพระจุลจอมเกล้ำเจ้ำอยู่หัว โปรดเกล้ำฯ ให้มีกำร เฉลิมฉลองกรุงรัตนโกสินทร์ครบ 100 ปี ใน พ.ศ. 2425 ต่อมำในรัชสมัยพระบำทสมเด็จพระปกเกล้ำเจ้ำอยู่หัว โปรด เกล้ำฯ ให้มีกำรบูรณปฏิสังขรณ์ทั้งพระอำรำมในโอกำสที่มีพระรำชพิธีฉลองพระนครครบ 150 ปี ในรัชกำลปัจจุบน ั โปรดเกล้ำฯ ให้บูรณปฏิสังขรณ์ทั้งพระอำรำมอีกครั้งใน พ.ศ. 2525 เมื่อมีกำรสมโภชกรุงรัตนโกสินทร์ 200 ปี โดยมี สมเด็จพระเทพรัตนรำชสุดำฯ สยำมบรมรำชกุมำรีทรงเป็นองค์ประธำนในกำรบูรณะวัดพระศรีรัตนศำสดำรำมเป็นวัดที่ สำคัญและเป็นที่เชิดหน้ำชูตำของบ้ำนเมือง ตลอดจนเป็นแหล่งท่องเที่ยวที่สำคัญของประเทศ