แบบเรียน ม.3
อบรมครู KM
สื่อดิจิตอล ( Digital media )
แบบทดสอบ Online
สถิติผู้เข้าชม
![]() | Today | 504 |
![]() | Yesterday | 524 |
![]() | This Week | 2867 |
![]() | This Month | 14377 |
![]() | All Days | 867168 |
ROBOT TEAM
วิทยาการคำนวณ
warayuphat panumphan 'Kru Pu', Powered by Joomla!
01 ภาษา HTML |
![]() |
![]() |
![]() |
Written by Administrator |
Thursday, 03 May 2018 04:58 |
HTML (Hyper Text Markup Language) เป็นภาษาหลักที่ใช้ในการพัฒนา web page โดยใช้ Tag ในการกำหนดการแสดงผล (Hypertext หมายถึง ข้อความที่เชื่อมต่อกันผ่านลิ้ง) เพื่อให้โปรแกรม web browser (Internet Explorer, Netscape, Opera) สามารถแปลงคำสั่ง และแสดงผลในลักษณะของรูปภาพ ตัวอักษร เสียง ภาพเคลื่อนไหว โดยไฟล์ที่สร้างจะมีนามสกุล .html หรือ .htm การสร้าง และแก้ไขสามารถใช้โปรแกรม NotePad, WordPad ในวินโดวส์ หรือ Edit plus ลักษณะของไฟล์จะเป็นไฟล์ Text HTML คือภาษาหลักที่ Web browser ใช้แสดงผลหรือแสดงข้อมูลในหน้า web page ส่วนภาษาอื่นๆ นั้นคือภาษาเสริม ที่ทำให้คนเขียนเว็บจัดการข้อมูลและการแสดงผลต่างๆได้ดี และสะดวกยิ่งขึ้น ซึ่งในการใช้ภาษาเสริมอื่นๆ นั้น ต้องติดตั้งซอฟต์แวร์หรือโปรแกรมเพิ่มด้วย เพื่อทำหน้าที่ประมวลผลแล้วแปลผลที่ได้ให้เป็นภาษาหลัก (HTML) ส่งให้ Web browser นำไปแสดงในหน้า web page ต่อไป ดังนั้น ในการเขียนเว็บไม่ว่าจะใช้ภาษาเสริมอะไรก็ตาม จะต้องใช้ร่วมกับภาษาหลัก (HTML) เสมอ และข้อมูลที่เราเห็นในหน้า web page ของทุกเว็บไซต์ก็จะถูกแสดงผลด้วยภาษาหลัก หรือ HTML เสมอ
Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket (<) และ greater-than bracket (>) ความหมาย Web browser “โปรแกรม ที่ใช้สำหรับท่องอินเทอร์เน็ต (sufring the Internet) คือใช้ในการเปิด web page และอย่างอื่นอีกมาก” ที่มา - http://www.vcharkarn.com/vblog/36733
“โปรแกรมที่ใช้สำหรับเป็นประตูเปิดเข้าสู่โลก WWW (World Wide Web) หรือพูดกันอย่างง่ายก็คือโปรแกรมที่ใช้สำหรับเล่นอินเทอร์เน็ตที่เรานิยมใช้กันอยู่ทุกวันนี้ โดยเว็บเบราว์เซอร ์ (Web Browser) จะเข้าใจในภาษาHTML นี้คือเหตุผลว่าทำไมต้องใช้ภาษา HTML ในการสร้างเว็บเพจ เพราะโปรแกรมเว็บเบราว์เซอร์นั่นสามารถเข้าใจ และสามารถทำงานตามคำสั่งของภาษา HTMLได้” ที่มา – http://school.obec.go.th/pp_school/html/browser.html
“โปรแกรม คอมพิวเตอร์ ที่ผู้ใช้สามารถดูข้อมูลและโต้ตอบกับข้อมูลสารสนเทศที่จัดเก็บในหน้าเว็บที่ สร้างด้วยภาษาเฉพาะ เช่น ภาษาเอชทีเอ็มแอล (html) ที่จัดเก็บไว้ที่ระบบบริการเว็บหรือเว็บเซิร์ฟเวอร์ หรือระบบคลังข้อมูลอื่นๆ โดยโปรแกรมค้นดูเว็บเปรียบเสมือนเครื่องมือในการติดต่อกับเครือข่าย คอมพิวเตอร์ขนาดใหญ่ที่เรียกว่าเวิลด์ไวด์เว็บ” ที่มา - http://www.mindphp.com + http://th.wikipedia.org สรุปได้ว่า Web browser คือ ซอฟต์แวร์หรือโปรแกรมคอมพิวเตอร์ที่ใช้ในการท่องเว็บหรือใช้ดูข้อมูลที่อยู่ในหน้าเว็บเพจ ที่มา - https://sites.google.com/site/chanoksuda12539/useful-links การใช้ “สำหรับเล่นอินเทอร์เน็ต” ก็คือ WWW (World Wide Web) ยังรวมเอาการใช้งานอื่นๆด้วย เช่น อีเมล์ (e-mail) แชท (Chat) IRC และ FTP เป็นต้น
Text Editor (เท็กซ์อิดิเตอร์) คือโปรแกรมที่ใช้สำหรับเขียนคำสั่งภาษา HTML โปรแกรม Text Editor เช่น NotePad, EditPlus หรือโปรแกรม Dreamweaver ซึ่งมีคุณสมบัติเป็นทั้งโปรแกรมสำเร็จรูปในการสร้างเว็บเพจด้วย ในบทเรียนนี้ ใช้โปรแกรม Notepad ในการสร้างเว็บเพจด้วยภาษา HTML
สร้างเว็บเพจด้วย NotePad การสร้างเอกสาร HTML (เว็บเพจ) เริ่มเปิดโปรแกรม NotePad <Start -> Program -> Accessories -> NotePad> แล้วพิมพ์คำสั่ง HTML ลงไป จากนั้นก็ทำการจัดเก็บไฟล์โดยตั้งชื่อเป็นภาษาอังกฤษ ตัวพิมพ์เล็ก และกำหนดนามสกุลเป็น .html (ในตอนพิมพ์ชื่อไฟล์ แนะนำให้พิมพ์ชื่อและนามสกุลของไฟล์ไว้ในเครื่องหมายคำพูด เพื่อป้องกันมิให้โปรแกรม NotePad เติมนามสกุล .txt ต่อท้าย) จากนั้นก็เปิดโปรแกรมเบราเซอร์ เช่น GoogleChrome หรือ Firefox แล้วเปิดไฟล์เอกสารที่สร้างไว้ เพื่อดูผล
โครงสร้างภาษา HTML <HTML> <TITLE> ข้อความแสดงที่ส่วนของ Title bar ของหน้าต่างนั้น ๆ</TITLE> </HEAD> <!—สำหรับใส่ข้อความคำอธิบายคำสั่งนั้น ๆ //--> . . . </BODY>
ภาษา HTML มีโครงสร้างหลัก เป็นมาตรฐานเหมือนกันทั่วโลก โดยจะประกอบด้วยคำสั่งหลัก ๆ อยู่ 4 คำสั่งด้วยกันดังนี้ 1. <HTML>….</HTML> เป็นคำสั่งหลักที่ทำหน้าที่บอกจุดเริ่มต้นและจุดสิ้นสุดของเอกสาร HTML 2. <HEAD>……</HEAD> เป็นคำสั่งที่ทำหน้าที่กำหนดส่วนหัวเรื่อง 3. <TITLE>……</TITLE> เป็นคำสั่งที่ใช้กำหนดข้อความที่ต้องการนำมาแสดงผลบนแถบ Title bar คำสั่งนี้จะอยู่ภายในคำสั่งส่วน <HEAD>…….</HEAD> โดยกำหนดความยาวของตัวอักษรไม่เกิน 64 ตัวอักษร 4. <BODY>…….</BODY>เป็นคำสั่งที่กำหนดข้อความและรูปแบบของคำสั่งต่าง ๆ ที่ใช้สำหรับปรับแต่งเอกสารที่จะนำเสนอออกทางจอภาพ
ตัวอย่างการคอมเมนต์ Code <!-- ใส่คอมเมนต์ไว้ภายในนี้นะคะ --> ตัวอย่าง code <html>
วิธีการ run ดูผลลัพธ์ของ html ที่เราเขียน บนหน้า web browser 1. พิมพ์ code บนโปรแกรม notepad 2. save นามสกุล html 3. กำหนด Unicode เพื่อรองรับภาษาไทย 4. เปิด ie -> file -> open ไฟล์ที่เราบันทึกไว้
วิธีการ เขียนเว็บเพจง่ายๆ ด้วย HTML
ทดลองคำสั่งต่างๆ 1. คำสั่งที่ใช้ในการจัดย่อหน้า Source Code <p> ย่อหน้าที่ 1 </p> <p> ย่อหน้าที่ 2 </p> <p> ย่อหน้าที่ 3 </p>
2. คำสั่งที่ใช้ในการขึ้นบรรทัดใหม่ Source Code บรรทัดที่ 1 <br> บรรทัดที่ 2 <br> บรรทัดที่ 3 <br>
3. คำสั่งที่ใช้กับข้อความที่เป็นหัวเรื่อง Source Code <h1>head 1</h1> <h2>head 2</h2> <h3>head 3</h3> <h4>head 4</h4> <h5>head 5</h5> <h6>head 6</h6>
4. คำสั่งที่ใช้ในการขึดเส้นคั่น รูปแบบ hr Source Code <p>เนื้อหาบทที่ 1</p> <hr> <p>เนื้อหาบทที่ 2</p> <hr>
5. คำสั่งที่ใช้ในการจัดตัวอักษรชิดซ้าย ชิดขวา หรือกึ่งกลาง Source Code <h3 align = 'left'>ชิดซ้าย</h3> <h3 align = 'right'>ชิดขวา</h3> <h3 align = 'center'>จัดเข้ากลาง</h3>
6. คำสั่งที่ใช้ในการเปลี่ยนสีพื้นหลัง Source Code <body bgcolor ='green'> <h1> ดูสีพื้นหลัง </h1> </body>
7. การเขียนคำบรรยาย soure code รูปแบบการเขียนคำบรรยาย source code <! คำบรรยาย source code !>
ขอขอบคุณ ที่มา : https://www.hellomyweb.com/course/html/paragraph_and_heading_in_html/
ใบงานฝึกภาคปฏิบัติ -ให้นักเรียนเขียน code ภาษา HTML รายละเอียด ดังนี้ ชื่อ ชั้น เลขที่ เกิดวัน..สีประจำวันเกิด.. ทดสอบการทำงานภาษา HTML(หัวข้อให้ใช้ตัวใหญ่ และจัดไว้กลางจอภาพ) ขีดเส้นใต้__________________________________________________________ ชื่อ - นามสกุล ชั้น เลขที่ เบอร์โทรศัพท์ ของเพื่อนสนิท 5 คน เช่น 1.นางสาว สมใจ รักดี เลขที่ 3 เบอร์โทร 08512345687 2.นาย วิชัย ดีมาก เลขที่ 15 เบอร์โทร 08535545677 3.นางสาว ใจดี ดีที่สุด เลขที่ 21 เบอร์โทร 08456345687 4.นาย วิชัย ดีมาก เลขที่ 25 เบอร์โทร 09552345677 5.นาย สมรัก ดีมากมาย เลขที่ 27 เบอร์โทร 05672345679
|
Last Updated on Tuesday, 29 September 2020 06:29 |