Suche senden
Hochladen
ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml
•
1 gefällt mir
•
2,716 views
Smo Tara
Folgen
Melden
Teilen
Melden
Teilen
1 von 5
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
Samorn Tara
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
Samorn Tara
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
Samorn Tara
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
Samorn Tara
ออกแบบ
ออกแบบ
JiJee Pj
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
jompon
หน่วยที่ 2
หน่วยที่ 2
pom_2555
คู่มือการทำเว็บ Word
คู่มือการทำเว็บ Word
narueporn
Empfohlen
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
Samorn Tara
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
Samorn Tara
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
ใบความรู้ที่ 2.1 เวิล์ดไวด์เว็บ-www
Samorn Tara
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
Samorn Tara
ออกแบบ
ออกแบบ
JiJee Pj
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
jompon
หน่วยที่ 2
หน่วยที่ 2
pom_2555
คู่มือการทำเว็บ Word
คู่มือการทำเว็บ Word
narueporn
คู่มือประกอบการสร้างเว็บไซต์Pdf
คู่มือประกอบการสร้างเว็บไซต์Pdf
jompon
การออกแบบเว็บไซต์
การออกแบบเว็บไซต์
Ta'May Pimkanok
คู่มือ Power point
คู่มือ Power point
NooCake Prommali
Course Syllabus การเขียนโปรแกรมบนเว็บ
Course Syllabus การเขียนโปรแกรมบนเว็บ
Khon Kaen University
Course Syllabus การสร้าง Home page
Course Syllabus การสร้าง Home page
Khon Kaen University
E book2
E book2
sisiopp
การเขียนโปรแกรมบนเว็บ
การเขียนโปรแกรมบนเว็บ
Khon Kaen University
กระบวนการพัฒนาเว็บ
กระบวนการพัฒนาเว็บ
เขมิกา กุลาศรี
โครงสร้างเว็บไซต์
โครงสร้างเว็บไซต์
Pongpitak Toey
โครงงาน ฮาร์ดดิสก์
โครงงาน ฮาร์ดดิสก์
teerarat55
คู่มือ Dreamwever 8
คู่มือ Dreamwever 8
duangnapa27
Website
Website
ตัวอย่างที่ดี มีค่ากว่าคำสอน
Yuu
Yuu
sirinet
Ten
Ten
sirinet
New
New
sirinet
คู่มือ Word
คู่มือ Word
keeree samerpark
ดรีม
ดรีม
sirinet
โบ
โบ
sirinet
หวิว
หวิว
ViewMik
Best
Best
sirinet
หน่วยการเรียนรู้ที่ 4 อินเทอร์เน็ต(แก้ไข)
หน่วยการเรียนรู้ที่ 4 อินเทอร์เน็ต(แก้ไข)
Prapatsorn Keawnoun
การสร้างเว็บด้วย Macromedia dreamweaver8
การสร้างเว็บด้วย Macromedia dreamweaver8
doraemonbookie
Weitere ähnliche Inhalte
Was ist angesagt?
คู่มือประกอบการสร้างเว็บไซต์Pdf
คู่มือประกอบการสร้างเว็บไซต์Pdf
jompon
การออกแบบเว็บไซต์
การออกแบบเว็บไซต์
Ta'May Pimkanok
คู่มือ Power point
คู่มือ Power point
NooCake Prommali
Course Syllabus การเขียนโปรแกรมบนเว็บ
Course Syllabus การเขียนโปรแกรมบนเว็บ
Khon Kaen University
Course Syllabus การสร้าง Home page
Course Syllabus การสร้าง Home page
Khon Kaen University
E book2
E book2
sisiopp
การเขียนโปรแกรมบนเว็บ
การเขียนโปรแกรมบนเว็บ
Khon Kaen University
กระบวนการพัฒนาเว็บ
กระบวนการพัฒนาเว็บ
เขมิกา กุลาศรี
โครงสร้างเว็บไซต์
โครงสร้างเว็บไซต์
Pongpitak Toey
โครงงาน ฮาร์ดดิสก์
โครงงาน ฮาร์ดดิสก์
teerarat55
คู่มือ Dreamwever 8
คู่มือ Dreamwever 8
duangnapa27
Website
Website
ตัวอย่างที่ดี มีค่ากว่าคำสอน
Yuu
Yuu
sirinet
Ten
Ten
sirinet
New
New
sirinet
คู่มือ Word
คู่มือ Word
keeree samerpark
ดรีม
ดรีม
sirinet
โบ
โบ
sirinet
หวิว
หวิว
ViewMik
Best
Best
sirinet
Was ist angesagt?
(20)
คู่มือประกอบการสร้างเว็บไซต์Pdf
คู่มือประกอบการสร้างเว็บไซต์Pdf
การออกแบบเว็บไซต์
การออกแบบเว็บไซต์
คู่มือ Power point
คู่มือ Power point
Course Syllabus การเขียนโปรแกรมบนเว็บ
Course Syllabus การเขียนโปรแกรมบนเว็บ
Course Syllabus การสร้าง Home page
Course Syllabus การสร้าง Home page
E book2
E book2
การเขียนโปรแกรมบนเว็บ
การเขียนโปรแกรมบนเว็บ
กระบวนการพัฒนาเว็บ
กระบวนการพัฒนาเว็บ
โครงสร้างเว็บไซต์
โครงสร้างเว็บไซต์
โครงงาน ฮาร์ดดิสก์
โครงงาน ฮาร์ดดิสก์
คู่มือ Dreamwever 8
คู่มือ Dreamwever 8
Website
Website
Yuu
Yuu
Ten
Ten
New
New
คู่มือ Word
คู่มือ Word
ดรีม
ดรีม
โบ
โบ
หวิว
หวิว
Best
Best
Ähnlich wie ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml
หน่วยการเรียนรู้ที่ 4 อินเทอร์เน็ต(แก้ไข)
หน่วยการเรียนรู้ที่ 4 อินเทอร์เน็ต(แก้ไข)
Prapatsorn Keawnoun
การสร้างเว็บด้วย Macromedia dreamweaver8
การสร้างเว็บด้วย Macromedia dreamweaver8
doraemonbookie
Endnote
Endnote
Best Stick
Endnote
Endnote
Best Stick
โครงงาน ฮาร์ดดิสก์
โครงงาน ฮาร์ดดิสก์
teerarat55
07 ใบเนื้อหา หน่วยที่ 2
07 ใบเนื้อหา หน่วยที่ 2
Natchanon Srinuan
หน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 html
devilp Nnop
หน่วยที่ 2 โปรแกรม Microsoft office Access 2007
หน่วยที่ 2 โปรแกรม Microsoft office Access 2007
kruthanyaporn
ความรู้เกี่ยวกับระบบปฏิบัติการ
ความรู้เกี่ยวกับระบบปฏิบัติการ
okbeer
ความรู้เกี่ยวกับระบบปฏิบัติการ
ความรู้เกี่ยวกับระบบปฏิบัติการ
okbeer
ความรู้เกี่ยวกับระบบปฏิบัติการ
ความรู้เกี่ยวกับระบบปฏิบัติการ
okbeer
ความรู้เกี่ยวกับระบบปฏิบัติการ
ความรู้เกี่ยวกับระบบปฏิบัติการ
okbeer
โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5
suparada
โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5
suparada
โครงงานพ ฒนาเคร _องม_อ 5
โครงงานพ ฒนาเคร _องม_อ 5
Yokyok' Nnp
หน่วยการเรียนรู้ที่ 4 อินเทอร์เน็ต(แก้ไขแล้ว)
หน่วยการเรียนรู้ที่ 4 อินเทอร์เน็ต(แก้ไขแล้ว)
Prapatsorn Keawnoun
E book4
E book4
sisiopp
ความรู้เกี่ยวกับระบบปฏิบัติการ
ความรู้เกี่ยวกับระบบปฏิบัติการ
okbeer
ความรู้เกี่ยวกับระบบปฏิบัติการ
ความรู้เกี่ยวกับระบบปฏิบัติการ
vgame_emagv
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
jompon
Ähnlich wie ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml
(20)
หน่วยการเรียนรู้ที่ 4 อินเทอร์เน็ต(แก้ไข)
หน่วยการเรียนรู้ที่ 4 อินเทอร์เน็ต(แก้ไข)
การสร้างเว็บด้วย Macromedia dreamweaver8
การสร้างเว็บด้วย Macromedia dreamweaver8
Endnote
Endnote
Endnote
Endnote
โครงงาน ฮาร์ดดิสก์
โครงงาน ฮาร์ดดิสก์
07 ใบเนื้อหา หน่วยที่ 2
07 ใบเนื้อหา หน่วยที่ 2
หน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 html
หน่วยที่ 2 โปรแกรม Microsoft office Access 2007
หน่วยที่ 2 โปรแกรม Microsoft office Access 2007
ความรู้เกี่ยวกับระบบปฏิบัติการ
ความรู้เกี่ยวกับระบบปฏิบัติการ
ความรู้เกี่ยวกับระบบปฏิบัติการ
ความรู้เกี่ยวกับระบบปฏิบัติการ
ความรู้เกี่ยวกับระบบปฏิบัติการ
ความรู้เกี่ยวกับระบบปฏิบัติการ
ความรู้เกี่ยวกับระบบปฏิบัติการ
ความรู้เกี่ยวกับระบบปฏิบัติการ
โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5
โครงงานพัฒนาเครื่องมือ 5
โครงงานพ ฒนาเคร _องม_อ 5
โครงงานพ ฒนาเคร _องม_อ 5
หน่วยการเรียนรู้ที่ 4 อินเทอร์เน็ต(แก้ไขแล้ว)
หน่วยการเรียนรู้ที่ 4 อินเทอร์เน็ต(แก้ไขแล้ว)
E book4
E book4
ความรู้เกี่ยวกับระบบปฏิบัติการ
ความรู้เกี่ยวกับระบบปฏิบัติการ
ความรู้เกี่ยวกับระบบปฏิบัติการ
ความรู้เกี่ยวกับระบบปฏิบัติการ
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
Mehr von Smo Tara
03 ใบความรู้ที่1.3-social media-การจัดการเรียนรู้
03 ใบความรู้ที่1.3-social media-การจัดการเรียนรู้
Smo Tara
04 ใบงานที่ 1.2-infograp-web
04 ใบงานที่ 1.2-infograp-web
Smo Tara
02 ใบความรู้ที่1.2-เว็บ
02 ใบความรู้ที่1.2-เว็บ
Smo Tara
01 ใบความรู้ที่1.1-เน็ต
01 ใบความรู้ที่1.1-เน็ต
Smo Tara
03 ใบงานที่ 1.1-infograp-net
03 ใบงานที่ 1.1-infograp-net
Smo Tara
ใบความรู้ ปฐมนิเทศ
ใบความรู้ ปฐมนิเทศ
Smo Tara
ตาราง 66 โครงสร้างรายวิชา
ตาราง 66 โครงสร้างรายวิชา
Smo Tara
ใบความรู้ที่ 2.5 body section
ใบความรู้ที่ 2.5 body section
Smo Tara
Mehr von Smo Tara
(8)
03 ใบความรู้ที่1.3-social media-การจัดการเรียนรู้
03 ใบความรู้ที่1.3-social media-การจัดการเรียนรู้
04 ใบงานที่ 1.2-infograp-web
04 ใบงานที่ 1.2-infograp-web
02 ใบความรู้ที่1.2-เว็บ
02 ใบความรู้ที่1.2-เว็บ
01 ใบความรู้ที่1.1-เน็ต
01 ใบความรู้ที่1.1-เน็ต
03 ใบงานที่ 1.1-infograp-net
03 ใบงานที่ 1.1-infograp-net
ใบความรู้ ปฐมนิเทศ
ใบความรู้ ปฐมนิเทศ
ตาราง 66 โครงสร้างรายวิชา
ตาราง 66 โครงสร้างรายวิชา
ใบความรู้ที่ 2.5 body section
ใบความรู้ที่ 2.5 body section
ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml
1.
ใบความรู้ที่ 2.4
ขั้นตอนการสร้างเว็บเพจด้วย HTML ในการสร้างเว็บเพจ สามารถสรุปขั้นตอนได้ ดังนี้ 1. สร้าง Folder เพื่อเป็นที่เก็บข้อมูลต่างๆ ของเว็บ 2. สร้างเว็บเพจด้วยโปรแกรม Notepad และทาการจัดเก็บในโฟล์เดอร์ที่สร้างขึ้นในข้อ 1 3. ดูผลลัพธ์จากการสร้างเว็บเพจ ด้วยโปรแกรมเว็บบราวเซอร์ เช่น Internet Explorer 1. สร้าง Folder เพื่อใช้สาหรับเก็บข้อมูล การทางานในระบบคอมพิวเตอร์ ข้อมูลต่างๆ ไม่ว่าจะเป็นเอกสาร รูปภาพ เสียงเพลง จะถูก เก็บลงระบบคอมพิวเตอร์ในรูปแบบของ แฟ้มข้อมูลหรือที่เรียกกันว่า ไฟล์ (File) โดยไฟล์แต่ละประเภท จะมีนามสกุล (Extension) ที่แตกต่างกันไป ตามลักษณะของข้อมูลและโปรแกรมที่สร้างข้อมูลนั้น เช่น ไฟล์เอกสารที่พิมพ์ด้วยโปรแกรม Microsoft Word จะมีนามสกุลคือ .doc ไฟล์รูปภาพอาจมีได้หลายนามสกุล แต่ประเภทของรูปภาพที่นิยมใช้ในการสร้างเว็บเพจคือ .jpg และ .gif ไฟล์เสียงเพลง จะมีนามสกุลดังนี้ เช่น .mid , .wav หรือ .mp3 เป็นต้น ไฟล์ข้อมูลเว็บเพจ จะมีได้หลายนามสกุล เช่น .htm .html .php .asp การเก็บข้อมูลต่างๆ ในระบบคอมพิวเตอร์นั้นเพื่อความเป็นระเบียบ ความสะดวกในการทางาน และการค้นหาข้อมูล ควรสร้างโฟลเดอร์ (Folder) ขึ้นใหม่ นิยมสร้างที่ไดร์ฟ D: โดยตั้งชื่อ folder งานเป็นชื่อของนักเรียน-ชั้น เช่น samorn5-1 เป็นต้น 2. เริ่มต้นสร้างเว็บเพจด้วยโปรแกรม Notepad โปรแกรม Notepad เป็นโปรแกรมที่มีอยู่ในเครื่องคอมพิวเตอร์ทุกเครื่องเป็นโปรแกรมพื้นฐาน การเรียกใช้งานทาดังนี้
2.
1. เปิดโปรแกรม Notepad 2.
เริ่มต้นกันด้วยการพิมพ์ข้อความตามดังนี้ 3. พิมพ์ แท็ก head เพื่อกาหนดรายละเอียดในส่วนหัวของเอกสาร
3.
4. รายละเอียดแรกที่เราจะใส่ไว้ในส่วนหัวของเอกสาร (อยู่ระหว่างแท็ก
head) ก็คือ แท็กไตเติ้ล title ซึ่งก็คือชื่อเรื่องนั่นเอง 5. พิมพ์แท็ก body ซึ่งเป็นแท็กที่สาคัญอย่างยิ่ง เพราะต่อไปรายละเอียดต่างๆ ใน เอกสารของเราจะ ถูกใส่ไว้ภายในแท็กนี้ทั้งหมด
4.
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 เท่านั้น
5.
2.7 จากนั้นเปิด folder
ที่เก็บเว็บเพจไว้เมื่อสักครู่ แล้วจะเห็นไฟล์ที่มีหน้าตามแบบนี้ หรือ หรือ (ถ้าเห็นไอคอนแตกต่างไปจากนี้ก็ไม่ต้องตกใจ! ขึ้นอยู่เว็บบราวเซอร์หลักที่เราใช้อยู่) 2.8 ทดสอบผลการทางานด้วยโปรแกรม Web Browser เมื่อทาการสร้างเว็บเพจด้วยภาษา HTML และทาการจัดเก็บไฟล์ดังกล่าวแล้ว ให้ทดสอบผล การทางานได้โดยการใช้โปรแกรม Web Browser แสดงผลการทางานดังกล่าว ในที่นี้เราจะใช้ โปรแกรม Internet Explorer โดยการคลิกขวา หรือ ดับเบิ้ลคลิกไอคอน เพื่อดูผลงานได้เลยค่ะ ฉะนั้นจะเห็นว่า โปรแกรมทั้งสองคือ Notepad และ Internet Explorer จะทางานคู่กันเสมอ คือ Notepad ใช้สร้ างเว็บ เพจและแก้ไข ส่ว นโปรแกรม Internet Explorer ใช้ส าหรับดูผ ล การทางานนั่นเอง (ซึ่งสามารถกดปุ่ม F5 เพื่อรีเฟรชข้อมูลเว็บได้ทันที) ========++++++++++++++++++==============
Jetzt herunterladen