ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml

ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บเพจด้วย HTML ในการสร้างเว็บเพจ สามารถสรุปขั้นตอนได้ ดังนี้ 1. สร้าง Folder เพื่อเป็นที่เก็บข้อมูลต่างๆ ของเว็บ 2. สร้างเว็บเพจด้วยโปรแกรม Notepad และทาการจัดเก็บในโฟล์เดอร์ที่สร้างขึ้นในข้อ 1 3. ดูผลลัพธ์จากการสร้างเว็บเพจ ด้วยโปรแกรมเว็บบราวเซอร์ เช่น Internet Explorer1. สร้าง Folder เพื่อใช้สาหรับเก็บข้อมูล การทางานในระบบคอมพิวเตอร์ ข้อมูลต่างๆ ไม่ว่าจะเป็นเอกสาร รูปภาพ เสียงเพลง จะถูกเก็บลงระบบคอมพิวเตอร์ในรูปแบบของ แฟ้มข้อมูลหรือที่เรียกกันว่า ไฟล์ (File) โดยไฟล์แต่ละประเภทจะมีนามสกุล (Extension) ที่แตกต่างกันไป ตามลักษณะของข้อมูลและโปรแกรมที่สร้างข้อมูลนั้น เช่น ไฟล์เอกสารที่พิมพ์ด้วยโปรแกรม Microsoft Word จะมีนามสกุลคือ .doc ไฟล์รูปภาพอาจมีได้หลายนามสกุล แต่ประเภทของรูปภาพที่นิยมใช้ในการสร้างเว็บเพจคือ.jpg และ .gif ไฟล์เสียงเพลง จะมีนามสกุลดังนี้ เช่น .mid , .wav หรือ .mp3 เป็นต้น ไฟล์ข้อมูลเว็บเพจ จะมีได้หลายนามสกุล เช่น .htm .html .php .asp การเก็บข้อมูลต่างๆ ในระบบคอมพิวเตอร์นั้นเพื่อความเป็นระเบียบ ความสะดวกในการทางานและการค้นหาข้อมูล ควรสร้างโฟลเดอร์ (Folder) ขึ้นใหม่ นิยมสร้างที่ไดร์ฟ D: โดยตั้งชื่อ folderงานเป็นชื่อของนักเรียน-ชั้น เช่น samorn5-1 เป็นต้น2. เริ่มต้นสร้างเว็บเพจด้วยโปรแกรม Notepad โปรแกรม Notepad เป็นโปรแกรมที่มีอยู่ในเครื่องคอมพิวเตอร์ทุกเครื่องเป็นโปรแกรมพื้นฐานการเรียกใช้งานทาดังนี้

1. เปิดโปรแกรม Notepad2. เริ่มต้นกันด้วยการพิมพ์ข้อความตามดังนี้3. พิมพ์ แท็ก head เพื่อกาหนดรายละเอียดในส่วนหัวของเอกสาร

4. รายละเอียดแรกที่เราจะใส่ไว้ในส่วนหัวของเอกสาร (อยู่ระหว่างแท็ก head) ก็คือ แท็กไตเติ้ลtitle ซึ่งก็คือชื่อเรื่องนั่นเอง5. พิมพ์แท็ก body ซึ่งเป็นแท็กที่สาคัญอย่างยิ่ง เพราะต่อไปรายละเอียดต่างๆ ใน เอกสารของเราจะถูกใส่ไว้ภายในแท็กนี้ทั้งหมด

6. แล้วใส่ชื่อให้เอกสารได้เลยค่ะ ตรงแท็ก title จ้า 2.6 บันทึกข้อมูลที่พิมพ์มาทั้งหมดโดยเลือก File / Save as .. 2.6.1 เข้าไปใน folder ที่นักเรียนสร้างไว้เป็นชื่อของนักเรียน- ชั้น เช่น samorn5-1 2.6.2 ตั้งชื่อไฟล์เป็น index.html (อย่าลืม ! ใส่นามสกุลให้เอกสารทุกครั้ง) หมายเหตุ : 1. ชื่อไฟล์แรกของเว็บเพจควรตั้งเป็นชื่อ index.html โดยให้พิมพ์นามสกุลของไฟล์ลงไปด้วย .html หรือ .htm ต่อท้ายชื่อไฟล์ทุกครั้ง 2. การใส่ Comment  Comment หรือข้อความหมายเหตุ มีประโยชน์หลายอย่างเช่น ใช้เพื่อเตือนความจา กากับ code แต่ละส่วนที่เราเขียนว่าเพื่อทาอะไร ทาให้อ่านและแก้ไข codeภายหลังได้ง่าย ข้อความใน tag comment จะไม่ถูกแสดงออกมาให้ผู้ใช้งานได้เห็น จะเห็นเมื่อมีการview source code เท่านั้น

2.7 จากนั้นเปิด folder ที่เก็บเว็บเพจไว้เมื่อสักครู่ แล้วจะเห็นไฟล์ที่มีหน้าตามแบบนี้ หรือ หรือ (ถ้าเห็นไอคอนแตกต่างไปจากนี้ก็ไม่ต้องตกใจ! ขึ้นอยู่เว็บบราวเซอร์หลักที่เราใช้อยู่) 2.8 ทดสอบผลการทางานด้วยโปรแกรม Web Browser เมื่อทาการสร้างเว็บเพจด้วยภาษา HTML และทาการจัดเก็บไฟล์ดังกล่าวแล้ว ให้ทดสอบผลการทางานได้โดยการใช้โปรแกรม Web Browser แสดงผลการทางานดังกล่าว ในที่นี้เราจะใช้โปรแกรม Internet Explorer โดยการคลิกขวา หรือ ดับเบิ้ลคลิกไอคอน เพื่อดูผลงานได้เลยค่ะ ฉะนั้นจะเห็นว่า โปรแกรมทั้งสองคือ Notepad และ Internet Explorer จะทางานคู่กันเสมอคือ Notepad ใช้สร้ างเว็บ เพจและแก้ไข ส่ว นโปรแกรม Internet Explorer ใช้ส าหรับดูผ ลการทางานนั่นเอง (ซึ่งสามารถกดปุ่ม F5 เพื่อรีเฟรชข้อมูลเว็บได้ทันที) ========++++++++++++++++++==============

http://krusmo.wordpress.com	663
http://27.254.33.185	54
http://www.krusamorn.com	14
http://krusamorn.com	2
http://webcache.googleusercontent.com	1

ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml

by Smo Tara on Jun 04, 2012

Accessibility

Upload Details

Usage Rights

5 Embeds 734

Statistics

ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml Document Transcript