Recommended
More Related Content
What's hot
Viewers also liked
Viewers also liked (17)
Similar to ภาษาในการพัฒนาเว็บไซต์
Similar to ภาษาในการพัฒนาเว็บไซต์ (20)
ภาษาในการพัฒนาเว็บไซต์
- 1. ใบความรูที่ 1 ้ ภาษาในการพัฒนาเว็บไซต์ ภาษาในการพัฒนาเว็บไซต์ ภาษาที่ใช้ในการพัฒนาเว็บไซต์มีด้วยกันหลากหลายภาษา ได้แก่ HTML, PHP, ASP, JavaScript, CSS, AJAX เป็นต้น ซึ่งไม่ว่าเราจะพัฒนาเว็บไซต์ด้วยภาษาอะไร สุดท้ายแล้ว web browser ก็จะแปลงเป็นภาษา HTML ดังนั้น ก่อนที่จะเรียนรู้ภาษาอื่น ๆ จึงจาเป็นอย่างยิ่งที่จะต้องมีความรู้ความเข้าใจในภาษา HTML ภาษา Script ที่ใช้ในการพัฒนาเว็บไซต์ ภาษาสคริปต์เป็นตัวที่ช่วยเสริมความสามารถในการทางานและลูกเล่นให้แก่เว็บไซต์มากยิ่งขึ้น ซึ่งแบ่งได้เป็น 2 กลุ่มหลัก ๆ ดังนี้ Server-Side Script เป็นสคริปต์ที่ประมวลผลคาสั่งการทางานที่ฝั่งของ server แล้วส่งผลลัพธ์ ออกมาเป็น HTML มายัง Clientผ่านโปรแกรม we browser o ได้แก่ ภาษา PHP, ASP, JSP เป็นต้น o เช่น เว็บไซต์ Facebook ใช้ภาษา PHP ในการเก็บข้อมูลการอัพโหลดรูปภาพ แล้วแสดงผล ออกมาทางหน้า wall ของผู้ใช้แต่ละราย Client-Side Script เป็นภาษาที่ประมวลผลคาสั่งการทางานฝั่ง Client (เครื่องคอมพิวเตอร์ของ ผู้ใช้งาน) o ได้แก่ ภาษา JavaScript, VBScript เป็นต้น o เช่น การที่ user กดที่รูปภาพ จากนั้นโปรแกรมภาษา Javascript จะ pop up รูปภาพนั้น ออกมา
- 2. ภาษา HTML HTML เป็นภาษาที่ใช้ในการจัดหน้าเว็บเพจ ซึ่งเป็นที่มาของนามสกุล .htm หรือ .html แต่ในปัจจุบันผู้สร้าง เว็บไซต์มักไม่ได้สร้างเว็บเพจจากภาษา html โดยตรง แต่จะใช้โปรแกรมสร้างและออกแบบเว็บไซต์ช่วย เช่น Dreamweaver, Microsoft Expression และ ColdFusion เป็นต้น ซึ่งจะช่วยให้การจัดวางข้อความ รูปภาพ หรือกราฟิกอื่น ๆ ง่ายมากยิ่งขึ้น HTML Element (ส่วนประกอบของภาษา HTML) ประกอบไปด้วย Tag (แท็ก) และ Attribute (แอททริบิว) ประกอบด้วย < และ > ครอบชื่อคาสั่งเอาไว้ เช่น <html> Tag ประกอบไปด้วย tag เปิด และ tag ปิด โดยที่ tag ปิดจะมีชื่อเดียวกันแต่มีเครื่องหมาย / วาง ข้างหน้าชื่อ tag เช่น <html>………………….</html> แต่บาง tag ก็ไม่มี tag ปิด เช่น <br/> และ <hr/> เป็นส่วนขยายใน tag ใช้สาหรับจัดรูปแบบเพิ่มเติม เช่น ขนาด สี ระยะห่าง เป็นต้น เช่น <p align="center">ข้อความในพารากราฟนี้จัดวางอยู่กึ่งกลางหน้าจอ</p> <hr width="200" color="red" noshade> ใช้สร้างเส้นคั่นยาว 200 pixel สีแดงทึบ HTML Element ประกอบด้วย tag เริ่ม (attribute) + content + tag ปิด เช่น <p align="center">ข้ อความในพารากราฟนี ้จัดวางอยูกึ่งกลางหน้ าจอ</p> ่
- 3. HTML web page Structure (โครงสร้างของภาษา HTML) <HTML> <HEAD> <TITLE> ชื่อเว็บไซต์(เป็ นภาษาอังกฤษ)</TITLE> </HEAD> <BODY> รายละเอียดต่างๆ ทีตองการให้แสดงบนเว็บไซต์ของเรา ่ ้ ซึงประกอบด้วย ข้อความ รูปภาพ เสียง ตาราง วีดโี อ ฯลฯ ่ </BODY> </HTML> ส่วนหัว ส่วนเนื ้อหา ประกอบไปด้วย o ส่วนประกาศ Document <!DOCTYPE> ควรจะใส่ในเอกสารทุกๆ หน้า โดยวางไว้บรรทัดแรกเสมอ เพื่อบอกให้เว็บเบราเซอร์ ทราบว่า เราใช้คาสั่ง HTML รุ่นใด และบอกชนิดของเอกสาร (Document Type Definition : DTD) ที่ใช้ ซึ่งจะช่วยให้เว็บเบราเซอร์แปลเอกสารได้อย่างถูกต้อง <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> o <html>...</html> ในการใช้งาน HTML เราจะต้องเริ่มด้วย <html> และปิดด้วย </html> เสมอ ส่วนภายใน Element <html> ประกอบด้วยส่วนของ <head>...</head> และ <body>...</body> o <head>...</head> ใช้กาหนดรายละเอียดต่างๆ เกี่ยวกับเว็บเพจ ซึ่งคาสั่งที่อยู่ในส่วนนี้จะไมได้แสดงผลให้เห็นในหน้ บ ่เว็ เพจ เช่น กาหนดหัวข้อเรื่องของเว็บเพจ ที่จะแสดงให้เห็นใน title bar ด้านบนของเว็บเบราเซอร์ โดย
- 4. ใช้ Element <title>...</title> กาหนด keyword สาหรับการใช้งานของ Search Engine, กาหนดสไตล์ CSS และ Script ต่างๆ o comment <!-- ... --> Comment หรือข้อความหมายเหตุ มีประโยชน์หลายอย่าง เช่น ใช้เพื่อเตือนความจา กากับ code แต่ละส่วนที่เราเขียนว่าเพื่อทาอะไร ทาให้อ่านและแก้ไข code ภายหลังได้ง่าย ข้อความใน tag comment จะไม่ถูกเว็บเบราเซอร์ ่แสดงออกมาให้ผู้ใช้งานได้เห็น จะเห็นเมื่อมีการ view source code เท่านั้น <!-- ตรงนี้คือเมนู --> Chapter1<br /> Chapter2<br /> Chapter3<br /> การกาหนดรูปแบบตัวอักษร เป็นการกาหนดให้ตัวอักษรให้มีลักษณะเป็นตัวหนา (Bold text), ตัวเอียง (Italic text) และ ตัวขีดเส้นใต้ (Underlined text) ซึ่งมีรูปแบบคาสั่งดังนี้ การกาหนดตัวอักษรให้เป็นตัวหนา รูปแบบคาสั่ง <B> …</B> การกาหนดตัวอักษรให้เป็นตัวเอียง รูปแบบคาสั่ง <I> …</I> การกาหนดตัวอักษรรูปแบบคาสั่ง <U> …</U>ให้เป็นตัวขีดเส้นใต้
- 5. ชื่อ ………………………………………………………….. ชัน …………………เลขที………………วันที่….…………………………………. ้ ่ แบบฝึกทักษะ 1.1 1. ให้นักเรียนสร้าง folder ขึ้นที่ D: โดยตั้งชื่อ folder ดังนี้ ชื่อห้องเลขที่ เช่น 60101 เป็นต้น 2. เปิดโปรแกรม Notepad ขึ้นมาพิมพ์ข้อความดังต่อไปนี้ 3. ให้บันทึกไฟล์ index.html 4. จากนั้นทดลองเปิดไฟล์ด้วยโปรแกรม web browser เช่น IE หรือ FireFox ผลลัพธ์ …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………
- 6. 5. ทดลองพิมพ์ภาษาไทยที่ส่วนของ body แล้วสังเกตผลลัพธ์ พร้อมบันทึกผลที่ได้แล้วให้นักเรียนบอกถึง สาเหตุที่นักเรียนคิดว่าทามัยถึงเกิดผลเช่นนั้น …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… 6. ให้เปิดไฟล์ index.html เดิมขึ้นมาจากนั้นเพิ่ม code ลงในส่วนของ header ดังนี้ รันไฟล์เดิมพร้อม บันทึกผลการเปลี่ยนแปลง …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… 7. ในส่วนของ body ให้เพิ่ม code ดังต่อไปนี้ …………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………… …………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ………………………………………………………………………………………