Enviar búsqueda
Cargar
คู่มือภาษา HTML และการจัดข้อความ
•
7 recomendaciones
•
13,645 vistas
Pakornkrits
Seguir
คู่มือภาษา HTML และการจัดข้อความ
Leer menos
Leer más
Educación
Denunciar
Compartir
Denunciar
Compartir
1 de 44
Descargar ahora
Descargar para leer sin conexión
Recomendados
แผนการสอนการสร้างเว็บเพจ
แผนการสอนการสร้างเว็บเพจ
เทวัญ ภูพานทอง
ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจ
ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจ
Krunicky Rattanapachai
แผนการสอนวิชาการเขียนโปรแกรมภาษาซี
แผนการสอนวิชาการเขียนโปรแกรมภาษาซี
เทวัญ ภูพานทอง
แผนการสอนรายวิชาคอมพิวเตอร์กราฟิค
แผนการสอนรายวิชาคอมพิวเตอร์กราฟิค
เทวัญ ภูพานทอง
หน่วยที่ 1 (5 แผน)
หน่วยที่ 1 (5 แผน)
ฤทธิรงค์ แดงหล้า
แผนการสอน Illurtrator CS4 เรื่อง เครื่องมือ Blend Tool
แผนการสอน Illurtrator CS4 เรื่อง เครื่องมือ Blend Tool
Orasa Deethung
แผนการสอนAccess 57
แผนการสอนAccess 57
บำเพ็ญ แช่มสูงเนิน
แผนการจัดการเรียนรู้ ส่วนประกอบคอมพิวเตอร์ ม.2
แผนการจัดการเรียนรู้ ส่วนประกอบคอมพิวเตอร์ ม.2
พงศธร ภักดี
Recomendados
แผนการสอนการสร้างเว็บเพจ
แผนการสอนการสร้างเว็บเพจ
เทวัญ ภูพานทอง
ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจ
ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจ
Krunicky Rattanapachai
แผนการสอนวิชาการเขียนโปรแกรมภาษาซี
แผนการสอนวิชาการเขียนโปรแกรมภาษาซี
เทวัญ ภูพานทอง
แผนการสอนรายวิชาคอมพิวเตอร์กราฟิค
แผนการสอนรายวิชาคอมพิวเตอร์กราฟิค
เทวัญ ภูพานทอง
หน่วยที่ 1 (5 แผน)
หน่วยที่ 1 (5 แผน)
ฤทธิรงค์ แดงหล้า
แผนการสอน Illurtrator CS4 เรื่อง เครื่องมือ Blend Tool
แผนการสอน Illurtrator CS4 เรื่อง เครื่องมือ Blend Tool
Orasa Deethung
แผนการสอนAccess 57
แผนการสอนAccess 57
บำเพ็ญ แช่มสูงเนิน
แผนการจัดการเรียนรู้ ส่วนประกอบคอมพิวเตอร์ ม.2
แผนการจัดการเรียนรู้ ส่วนประกอบคอมพิวเตอร์ ม.2
พงศธร ภักดี
แผนการสอนคอม ป. 6 การใช้คอมสร้างชิ้นงาน
แผนการสอนคอม ป. 6 การใช้คอมสร้างชิ้นงาน
Sumalee Klom
โครงงานคอมพิวเตอร์
โครงงานคอมพิวเตอร์
Sitanan Norapong
แผนการสอน เว็บไซต์ ม.5
แผนการสอน เว็บไซต์ ม.5
พงศธร ภักดี
รายงานโครงการคอมพิวเตอร์ กลุ่ม Blog 5 สถานที่ท่องเที่ยวยอดนิยมในแต่ละประเทศสม...
รายงานโครงการคอมพิวเตอร์ กลุ่ม Blog 5 สถานที่ท่องเที่ยวยอดนิยมในแต่ละประเทศสม...
BlogAseanTraveler
โครงงานคอมพิวเตอร์
โครงงานคอมพิวเตอร์
Kiattipong Sriwichai
การพัฒนาเว็บบล็อก
การพัฒนาเว็บบล็อก
wadsana123
แผนการสอนคอมพิวเตอร์ ป.5
แผนการสอนคอมพิวเตอร์ ป.5
พิพัฒน์ ตะภา
แบบเสนอหัวข้อโครงงาน
แบบเสนอหัวข้อโครงงาน
KrooIndy Csaru
แผนการจัดการเรียนรู้วิชาคอมพิวเตอร์ป2
แผนการจัดการเรียนรู้วิชาคอมพิวเตอร์ป2
wifi5822
แผนคอมฯ ม.3 ใหม่
แผนคอมฯ ม.3 ใหม่
Surapong Jakang
แบบโครงงานคอมพิวเตอร์
แบบโครงงานคอมพิวเตอร์
Teeraphat Jitihiwan
แผนการสอน โปรแกรมคอมพิวเตอร์กราฟิก ม.4
แผนการสอน โปรแกรมคอมพิวเตอร์กราฟิก ม.4
พงศธร ภักดี
แบบเสนอโครงร่างโครงงาน
แบบเสนอโครงร่างโครงงาน
Champ Wachwittayakhang
การเขียนรายงานโครงงานคอมพิวเตอร์ N
การเขียนรายงานโครงงานคอมพิวเตอร์ N
feirockjock
ทฤษฎีการออกแบบเว็บไซต์
ทฤษฎีการออกแบบเว็บไซต์
Bank Sangsudta
รายงาน Power point
รายงาน Power point
Thank Chiro
แบบเสนอโครงร่าง โครงงานคอมพิวเตอร์
แบบเสนอโครงร่าง โครงงานคอมพิวเตอร์
Sky Aloha'
ส่วนนำ ทวีชัย
ส่วนนำ ทวีชัย
คิดถึง คิดถึง
รายงานโครงงานคอมพิวเตอร์
รายงานโครงงานคอมพิวเตอร์
นิชนิภา อรรถพร
แผนการสอน ระบบเครือข่าย ม.3
แผนการสอน ระบบเครือข่าย ม.3
พงศธร ภักดี
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
Withoon Wangsa-Nguankit
การสร้างเว็บด้วยภาษา Html อย่างง่าย
การสร้างเว็บด้วยภาษา Html อย่างง่าย
รัชนีพร ภูแสงสี
Más contenido relacionado
La actualidad más candente
แผนการสอนคอม ป. 6 การใช้คอมสร้างชิ้นงาน
แผนการสอนคอม ป. 6 การใช้คอมสร้างชิ้นงาน
Sumalee Klom
โครงงานคอมพิวเตอร์
โครงงานคอมพิวเตอร์
Sitanan Norapong
แผนการสอน เว็บไซต์ ม.5
แผนการสอน เว็บไซต์ ม.5
พงศธร ภักดี
รายงานโครงการคอมพิวเตอร์ กลุ่ม Blog 5 สถานที่ท่องเที่ยวยอดนิยมในแต่ละประเทศสม...
รายงานโครงการคอมพิวเตอร์ กลุ่ม Blog 5 สถานที่ท่องเที่ยวยอดนิยมในแต่ละประเทศสม...
BlogAseanTraveler
โครงงานคอมพิวเตอร์
โครงงานคอมพิวเตอร์
Kiattipong Sriwichai
การพัฒนาเว็บบล็อก
การพัฒนาเว็บบล็อก
wadsana123
แผนการสอนคอมพิวเตอร์ ป.5
แผนการสอนคอมพิวเตอร์ ป.5
พิพัฒน์ ตะภา
แบบเสนอหัวข้อโครงงาน
แบบเสนอหัวข้อโครงงาน
KrooIndy Csaru
แผนการจัดการเรียนรู้วิชาคอมพิวเตอร์ป2
แผนการจัดการเรียนรู้วิชาคอมพิวเตอร์ป2
wifi5822
แผนคอมฯ ม.3 ใหม่
แผนคอมฯ ม.3 ใหม่
Surapong Jakang
แบบโครงงานคอมพิวเตอร์
แบบโครงงานคอมพิวเตอร์
Teeraphat Jitihiwan
แผนการสอน โปรแกรมคอมพิวเตอร์กราฟิก ม.4
แผนการสอน โปรแกรมคอมพิวเตอร์กราฟิก ม.4
พงศธร ภักดี
แบบเสนอโครงร่างโครงงาน
แบบเสนอโครงร่างโครงงาน
Champ Wachwittayakhang
การเขียนรายงานโครงงานคอมพิวเตอร์ N
การเขียนรายงานโครงงานคอมพิวเตอร์ N
feirockjock
ทฤษฎีการออกแบบเว็บไซต์
ทฤษฎีการออกแบบเว็บไซต์
Bank Sangsudta
รายงาน Power point
รายงาน Power point
Thank Chiro
แบบเสนอโครงร่าง โครงงานคอมพิวเตอร์
แบบเสนอโครงร่าง โครงงานคอมพิวเตอร์
Sky Aloha'
ส่วนนำ ทวีชัย
ส่วนนำ ทวีชัย
คิดถึง คิดถึง
รายงานโครงงานคอมพิวเตอร์
รายงานโครงงานคอมพิวเตอร์
นิชนิภา อรรถพร
แผนการสอน ระบบเครือข่าย ม.3
แผนการสอน ระบบเครือข่าย ม.3
พงศธร ภักดี
La actualidad más candente
(20)
แผนการสอนคอม ป. 6 การใช้คอมสร้างชิ้นงาน
แผนการสอนคอม ป. 6 การใช้คอมสร้างชิ้นงาน
โครงงานคอมพิวเตอร์
โครงงานคอมพิวเตอร์
แผนการสอน เว็บไซต์ ม.5
แผนการสอน เว็บไซต์ ม.5
รายงานโครงการคอมพิวเตอร์ กลุ่ม Blog 5 สถานที่ท่องเที่ยวยอดนิยมในแต่ละประเทศสม...
รายงานโครงการคอมพิวเตอร์ กลุ่ม Blog 5 สถานที่ท่องเที่ยวยอดนิยมในแต่ละประเทศสม...
โครงงานคอมพิวเตอร์
โครงงานคอมพิวเตอร์
การพัฒนาเว็บบล็อก
การพัฒนาเว็บบล็อก
แผนการสอนคอมพิวเตอร์ ป.5
แผนการสอนคอมพิวเตอร์ ป.5
แบบเสนอหัวข้อโครงงาน
แบบเสนอหัวข้อโครงงาน
แผนการจัดการเรียนรู้วิชาคอมพิวเตอร์ป2
แผนการจัดการเรียนรู้วิชาคอมพิวเตอร์ป2
แผนคอมฯ ม.3 ใหม่
แผนคอมฯ ม.3 ใหม่
แบบโครงงานคอมพิวเตอร์
แบบโครงงานคอมพิวเตอร์
แผนการสอน โปรแกรมคอมพิวเตอร์กราฟิก ม.4
แผนการสอน โปรแกรมคอมพิวเตอร์กราฟิก ม.4
แบบเสนอโครงร่างโครงงาน
แบบเสนอโครงร่างโครงงาน
การเขียนรายงานโครงงานคอมพิวเตอร์ N
การเขียนรายงานโครงงานคอมพิวเตอร์ N
ทฤษฎีการออกแบบเว็บไซต์
ทฤษฎีการออกแบบเว็บไซต์
รายงาน Power point
รายงาน Power point
แบบเสนอโครงร่าง โครงงานคอมพิวเตอร์
แบบเสนอโครงร่าง โครงงานคอมพิวเตอร์
ส่วนนำ ทวีชัย
ส่วนนำ ทวีชัย
รายงานโครงงานคอมพิวเตอร์
รายงานโครงงานคอมพิวเตอร์
แผนการสอน ระบบเครือข่าย ม.3
แผนการสอน ระบบเครือข่าย ม.3
Destacado
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
Withoon Wangsa-Nguankit
การสร้างเว็บด้วยภาษา Html อย่างง่าย
การสร้างเว็บด้วยภาษา Html อย่างง่าย
รัชนีพร ภูแสงสี
เอกสารประกอบการเรียน ภาษา HTML เบื้องต้น
เอกสารประกอบการเรียน ภาษา HTML เบื้องต้น
Kon Bannok
การเขียนเว็บเพจด้วยภาษา HTML
การเขียนเว็บเพจด้วยภาษา HTML
Mjjeje Mint
Score m.5
Score m.5
Wilailuck Honghannarong
เฉลยการเขียนเว็บเพจ บทที่ 1
เฉลยการเขียนเว็บเพจ บทที่ 1
Beerza Kub
HTML
HTML
Napoleon Napoleonp
การสร้างเว็บเพจด้วยภาษา Html
การสร้างเว็บเพจด้วยภาษา Html
Fair Kung Nattaput
เขียนเว็บไซต์ด้วย Html 5
เขียนเว็บไซต์ด้วย Html 5
Samart Phetdee
Bootstrap 3 สำหรับมือใหม่ | CloudCourse.io
Bootstrap 3 สำหรับมือใหม่ | CloudCourse.io
Thapwaris Chinsirirathkul
การสร้างเว็บด้วย Bootstrap framework
การสร้างเว็บด้วย Bootstrap framework
สอนทำโปรเจคจบ วิทคอมไอทีคอมธุรกิจ
บทที่ 3 การจัดการกับข้อความ
บทที่ 3 การจัดการกับข้อความ
Amnuay
ใบงานคอม
ใบงานคอม
nongmhi
php lesson 1
php lesson 1
Kamar Blbel
การเชื่อมต่อ Internet
การเชื่อมต่อ Internet
Channrong Sompronpailin
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
Sahil Gandhi
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
Samorn Tara
ผลงาน 4.2
ผลงาน 4.2
Pakornkrits
อินเทอร์เน็ตเบื้องต้น
อินเทอร์เน็ตเบื้องต้น
Chantana Papattha
นโยบาายและแผน
นโยบาายและแผน
สอบครูดอทคอม เว็บเตรียมสอบ
Destacado
(20)
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
การสร้างเว็บด้วยภาษา Html อย่างง่าย
การสร้างเว็บด้วยภาษา Html อย่างง่าย
เอกสารประกอบการเรียน ภาษา HTML เบื้องต้น
เอกสารประกอบการเรียน ภาษา HTML เบื้องต้น
การเขียนเว็บเพจด้วยภาษา HTML
การเขียนเว็บเพจด้วยภาษา HTML
Score m.5
Score m.5
เฉลยการเขียนเว็บเพจ บทที่ 1
เฉลยการเขียนเว็บเพจ บทที่ 1
HTML
HTML
การสร้างเว็บเพจด้วยภาษา Html
การสร้างเว็บเพจด้วยภาษา Html
เขียนเว็บไซต์ด้วย Html 5
เขียนเว็บไซต์ด้วย Html 5
Bootstrap 3 สำหรับมือใหม่ | CloudCourse.io
Bootstrap 3 สำหรับมือใหม่ | CloudCourse.io
การสร้างเว็บด้วย Bootstrap framework
การสร้างเว็บด้วย Bootstrap framework
บทที่ 3 การจัดการกับข้อความ
บทที่ 3 การจัดการกับข้อความ
ใบงานคอม
ใบงานคอม
php lesson 1
php lesson 1
การเชื่อมต่อ Internet
การเชื่อมต่อ Internet
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
ผลงาน 4.2
ผลงาน 4.2
อินเทอร์เน็ตเบื้องต้น
อินเทอร์เน็ตเบื้องต้น
นโยบาายและแผน
นโยบาายและแผน
Similar a คู่มือภาษา HTML และการจัดข้อความ
ใบความรู้ 2.1วิธีการดำเนินการทำโครงงานคอมพิวเตอร์
ใบความรู้ 2.1วิธีการดำเนินการทำโครงงานคอมพิวเตอร์
sa_jaimun
Computer Project(2020)
Computer Project(2020)
Thanapohn
ใบงานที่2 3
ใบงานที่2 3
Arisara Yawichai
ใบความรู้ที่ 2
ใบความรู้ที่ 2
Rattana Wongphu-nga
ความหมายและต วอย างห_วข_อโครงงานประเภทการพ_ฒนาส__อเพ__อการศ_กษา
ความหมายและต วอย างห_วข_อโครงงานประเภทการพ_ฒนาส__อเพ__อการศ_กษา
สุชาติ องค์มิ้น
ใยงาน2 8edit
ใยงาน2 8edit
นฤดล เตชา
โครงงานคอม
โครงงานคอม
Jid Supharada
โครงงานคอม
โครงงานคอม
Chorpaka Sarawat
โครงงานคอม
โครงงานคอม
Chorpaka Sarawat
โครงงานคอม
โครงงานคอม
Aratchaporn Julla
ใบงานที่ 4 คอม ออย
ใบงานที่ 4 คอม ออย
ValenKung
Yrc 606
Yrc 606
Dogdrew Pingmuang
แบบเสนอโครงร่างโครงงานคอมพิวเตอร1
แบบเสนอโครงร่างโครงงานคอมพิวเตอร1
Moo Mild
แบบเสนอโครงร่างโครงงานคอมพิวเตอร1
แบบเสนอโครงร่างโครงงานคอมพิวเตอร1
Moo Mild
ใบงานท 4
ใบงานท 4
kanatakenta
ใบงานท 4
ใบงานท 4
Visarut Keatnima
แบบโครงร่างโครงงานคอมพิวเตอร์
แบบโครงร่างโครงงานคอมพิวเตอร์
Natsima Chaisuttipat
ใบงานที่ 7 เรื่อง โครงงานประเภทการประยุกต์ใช้งาน
ใบงานที่ 7 เรื่อง โครงงานประเภทการประยุกต์ใช้งาน
Soldic Kalayanee
ใบงานที่ 7 เรื่อง โครงงานประเภทการประยุกต์ใช้งาน
ใบงานที่ 7 เรื่อง โครงงานประเภทการประยุกต์ใช้งาน
Mintra Pudprom
ใบงานที่ 7 เรื่อง โครงงานประเภทการประยุกต์ใช้งาน
ใบงานที่ 7 เรื่อง โครงงานประเภทการประยุกต์ใช้งาน
KaRn Tik Tok
Similar a คู่มือภาษา HTML และการจัดข้อความ
(20)
ใบความรู้ 2.1วิธีการดำเนินการทำโครงงานคอมพิวเตอร์
ใบความรู้ 2.1วิธีการดำเนินการทำโครงงานคอมพิวเตอร์
Computer Project(2020)
Computer Project(2020)
ใบงานที่2 3
ใบงานที่2 3
ใบความรู้ที่ 2
ใบความรู้ที่ 2
ความหมายและต วอย างห_วข_อโครงงานประเภทการพ_ฒนาส__อเพ__อการศ_กษา
ความหมายและต วอย างห_วข_อโครงงานประเภทการพ_ฒนาส__อเพ__อการศ_กษา
ใยงาน2 8edit
ใยงาน2 8edit
โครงงานคอม
โครงงานคอม
โครงงานคอม
โครงงานคอม
โครงงานคอม
โครงงานคอม
โครงงานคอม
โครงงานคอม
ใบงานที่ 4 คอม ออย
ใบงานที่ 4 คอม ออย
Yrc 606
Yrc 606
แบบเสนอโครงร่างโครงงานคอมพิวเตอร1
แบบเสนอโครงร่างโครงงานคอมพิวเตอร1
แบบเสนอโครงร่างโครงงานคอมพิวเตอร1
แบบเสนอโครงร่างโครงงานคอมพิวเตอร1
ใบงานท 4
ใบงานท 4
ใบงานท 4
ใบงานท 4
แบบโครงร่างโครงงานคอมพิวเตอร์
แบบโครงร่างโครงงานคอมพิวเตอร์
ใบงานที่ 7 เรื่อง โครงงานประเภทการประยุกต์ใช้งาน
ใบงานที่ 7 เรื่อง โครงงานประเภทการประยุกต์ใช้งาน
ใบงานที่ 7 เรื่อง โครงงานประเภทการประยุกต์ใช้งาน
ใบงานที่ 7 เรื่อง โครงงานประเภทการประยุกต์ใช้งาน
ใบงานที่ 7 เรื่อง โครงงานประเภทการประยุกต์ใช้งาน
ใบงานที่ 7 เรื่อง โครงงานประเภทการประยุกต์ใช้งาน
Más de Pakornkrits
การประดับแพรแถบย่อของเครื่องราชอิสริยาภรณ์
การประดับแพรแถบย่อของเครื่องราชอิสริยาภรณ์
Pakornkrits
เทคนิคการอ่านหนังสือ บำรุงสมอง
เทคนิคการอ่านหนังสือ บำรุงสมอง
Pakornkrits
วิชาการผลิตมัลติมีเดีย 1 [Multimedia I]
วิชาการผลิตมัลติมีเดีย 1 [Multimedia I]
Pakornkrits
คู่มือตั้งค่าการเชื่อมต่อระบบอินเทอร์เน็ต
คู่มือตั้งค่าการเชื่อมต่อระบบอินเทอร์เน็ต
Pakornkrits
การผูกผ้าพันคอสไตล์ใหม่
การผูกผ้าพันคอสไตล์ใหม่
Pakornkrits
15 วิธีผูกเชือกรองเท้าอย่างเทพฯ
15 วิธีผูกเชือกรองเท้าอย่างเทพฯ
Pakornkrits
รายชื่อเขตที่สอบครูผู้ช่วย 2556
รายชื่อเขตที่สอบครูผู้ช่วย 2556
Pakornkrits
หลักสูตรสอบปี 56
หลักสูตรสอบปี 56
Pakornkrits
ติวสอบครูผู้ช่วย 2556
ติวสอบครูผู้ช่วย 2556
Pakornkrits
ติวสอบครูผู้ช่วย 2556
ติวสอบครูผู้ช่วย 2556
Pakornkrits
แนวปฏิบัต ว 30 ล่าสุด
แนวปฏิบัต ว 30 ล่าสุด
Pakornkrits
ติวสอบครูผู้ช่วย 2556
ติวสอบครูผู้ช่วย 2556
Pakornkrits
รู้จักวิทยากร ติวครูผู้ช่วย กูรูครูติวเตอร์
รู้จักวิทยากร ติวครูผู้ช่วย กูรูครูติวเตอร์
Pakornkrits
สมัคร และการใช้งาน Google drive
สมัคร และการใช้งาน Google drive
Pakornkrits
หนังสือราชการ ว.๑๑ ครู คศ.1
หนังสือราชการ ว.๑๑ ครู คศ.1
Pakornkrits
การแทรกเลขหน้า MS-Word 2007 มืออาชีพขั้นสูงระดับเทพฯ
การแทรกเลขหน้า MS-Word 2007 มืออาชีพขั้นสูงระดับเทพฯ
Pakornkrits
สมุดประเมินผลกิจกรรมชุมนุม กูรูไอที
สมุดประเมินผลกิจกรรมชุมนุม กูรูไอที
Pakornkrits
คู่มือ Twitter V2
คู่มือ Twitter V2
Pakornkrits
คู่มือ Facebook ฉบับ 2
คู่มือ Facebook ฉบับ 2
Pakornkrits
คู่มือ Facebook
คู่มือ Facebook
Pakornkrits
Más de Pakornkrits
(20)
การประดับแพรแถบย่อของเครื่องราชอิสริยาภรณ์
การประดับแพรแถบย่อของเครื่องราชอิสริยาภรณ์
เทคนิคการอ่านหนังสือ บำรุงสมอง
เทคนิคการอ่านหนังสือ บำรุงสมอง
วิชาการผลิตมัลติมีเดีย 1 [Multimedia I]
วิชาการผลิตมัลติมีเดีย 1 [Multimedia I]
คู่มือตั้งค่าการเชื่อมต่อระบบอินเทอร์เน็ต
คู่มือตั้งค่าการเชื่อมต่อระบบอินเทอร์เน็ต
การผูกผ้าพันคอสไตล์ใหม่
การผูกผ้าพันคอสไตล์ใหม่
15 วิธีผูกเชือกรองเท้าอย่างเทพฯ
15 วิธีผูกเชือกรองเท้าอย่างเทพฯ
รายชื่อเขตที่สอบครูผู้ช่วย 2556
รายชื่อเขตที่สอบครูผู้ช่วย 2556
หลักสูตรสอบปี 56
หลักสูตรสอบปี 56
ติวสอบครูผู้ช่วย 2556
ติวสอบครูผู้ช่วย 2556
ติวสอบครูผู้ช่วย 2556
ติวสอบครูผู้ช่วย 2556
แนวปฏิบัต ว 30 ล่าสุด
แนวปฏิบัต ว 30 ล่าสุด
ติวสอบครูผู้ช่วย 2556
ติวสอบครูผู้ช่วย 2556
รู้จักวิทยากร ติวครูผู้ช่วย กูรูครูติวเตอร์
รู้จักวิทยากร ติวครูผู้ช่วย กูรูครูติวเตอร์
สมัคร และการใช้งาน Google drive
สมัคร และการใช้งาน Google drive
หนังสือราชการ ว.๑๑ ครู คศ.1
หนังสือราชการ ว.๑๑ ครู คศ.1
การแทรกเลขหน้า MS-Word 2007 มืออาชีพขั้นสูงระดับเทพฯ
การแทรกเลขหน้า MS-Word 2007 มืออาชีพขั้นสูงระดับเทพฯ
สมุดประเมินผลกิจกรรมชุมนุม กูรูไอที
สมุดประเมินผลกิจกรรมชุมนุม กูรูไอที
คู่มือ Twitter V2
คู่มือ Twitter V2
คู่มือ Facebook ฉบับ 2
คู่มือ Facebook ฉบับ 2
คู่มือ Facebook
คู่มือ Facebook
คู่มือภาษา HTML และการจัดข้อความ
1.
2013 วิชาการออกแบบและพัฒนาเว็บ เพจ ง 31242 วิชา
การออกแบบและพัฒนาเว็บเพจ และการจัดข้อความ เรื่อง โครงสร้าง HTML Chitnoy Website: 12/3/2013
2.
วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242 ครูปกรณ์กฤช
กันทะเลิศ >> ก คำนำ เอกสารประกอบการเรียน วิชาการออกแบบและพัฒนาเว็บเพจ ประกอบการจัดกิจกรรม การเรียนรู้ที่เน้นกระบวนการ กลุ่มสาระการเรียนรู้การงานอาชีพเทคโนโลยี ชั้นมัธยมศึกษาปีที่ 4 เล่มที่ 2 เรื่อง โครงสร้างภาษา HTML และการจัดข้อความ จัดทาขึ้นตามสาระการเรียนรู้และ มาตรฐานการเรีย นรู้ พุ ทธศัก ราช 2551 ในการจัดท าเอกสารประกอบเรียนรู้เ ล่มนี้ ได้รับความ ร่ ว มมื อ อย่ า งดี ยิ่ ง จากผู้ เ ชี่ ย วชาญที่ ไ ด้ รั บ ความอนุ เ คราะห์ ใ นการตรวจสอบ ความถู ก ต้ อ งและ เหมาะสม เอกสารปะกอบการเรียนเล่มนี้ หวังว่ าจะเป็นประโยชน์ต่อการจัดการเรียนรู้และเป็นส่วน สาคัญในการพัฒนาการเรียนรู้ด้านต่างๆ พัฒนาและแก้ปัญหานักเรียน ชั้นมัธยมศึกษาปีที่ 4 ของ กลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยี ให้มีความรู้ ทักษะ ความเข้าใจ และผ่านเกณฑ์ ประเมิน ปกรณ์กฤช กันทะเลิศ Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] |
3.
ข << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 สำรบัญ เรื่อง หน้ำ คำนำ ก สำรบัญ ข คาแนะนาในการใช้เอกสารประกอบการเรียนสาหรับครู ........................................................................... 1 คาแนะนาในการใช้เอกสารประกอบการเรียนสาหรับนักเรียน................................................................... 2 มาตรฐานการเรียนรู้................................................................................................................................ 3 สาระสาคัญ ............................................................................................................................................ 3 ผลการเรียนรู้ .......................................................................................................................................... 3 สาระการเรียนรู้....................................................................................................................................... 3 แบบทดสอบก่อนเรียน ............................................................................................................................. 4 โครงสร้างภาษา HTML และการจัดข้อความ ............................................................................................ 8 โครงสร้างภาษา HTML ........................................................................................................... 8 คาสั่งจัดตาแหน่งข้อความ ...................................................................................................... 14 คาสั่งจัดรูปแบบตัวอักษร ....................................................................................................... 19 คาสั่งกาหนดหัวข้อรายการ .................................................................................................... 27 สรุปท้ายหน่วยสาระสาคัญ ..................................................................................................... 31 แบบฝึกหัด .............................................................................................................................................. 32 แบบทดสอบหลังเรียน ............................................................................................................................. 39 บรรณานุกรม .......................................................................................................................................... 42 ************** Website: [ http://www.pakornkrit.com ]
4.
คำแนะนำกำรใช้เอกสำรประกอบกำรเรียนสำหรับครู การใช้เอกสารประกอบการเรียน การสร้างเว็บเพจ ภาษา
HTML วิชา การออกแบบและ พัฒนาเว็บเพจ รหัสวิชา ง31242 สาหรับนักเรียนชั้นมัธยมศึกษาปีที่ 4 ครูสอนเป็นผู้ที่มบทบาทสาคัญ ี ที่จะช่วยให้ดาเนินการเรียนรู้ของนักเรียนบรรลุตามวัตถุประสงค์ ครูผู้สอนจึงควรศึกษารายละเอียด เกี่ยวกับการปฏิบัติตนก่อนที่จะใช้เอกสารประกอบเรียน ดังนี้ 1. ครูต้องศึกษาเอกสารประกอบการเรียน และอ่านเนื้อหาสาระอย่างละเอียดรอบคอบพร้อม ทั้งเข้าใจกับเนือหาทุกชุดก่อนการใช้งาน ้ 2. ครูเตรียมเอกสารประกอบการเรียนให้ครบถ้วนเพียงพอกับจานวนนักเรียน 3. ครูเตรียมเครื่องมือวัดผลประเมินผลเพื่อทราบความก้าวหน้าของนักเรียน 4. ครูช้ีแจงให้นักเรียนทราบลาดับขั้นตอนและวิธีการสอนโดยใช้เอกสารประกอบการเรียน อย่างชัดเจน และประโยชน์ที่ได้รับจากการสอนโดยใช้เอกสารประกอบการเรียน 5. ครูช้แจงให้นักเรียนทราบเกี่ยวกับบทบาทของนักเรียนในการเรียน โดยใช้เอกสาร ี ประกอบการเรียน ต้องมีความซื่อสัตย์ไม่ลอกเพื่อน ไม่ให้เพื่อนทาให้ หรือไม่ดูเฉลยก่อนลงมือทาแบบ ฝึกทักษะ 6. ครูแจ้งผลการเรียนรู้ให้นักเรียนทราบ 7. ครูดาเนินการสอนตามกิจกรรมการเรียนรูที่กาหนดไว้ในแผนการจัดการเรียนรู้ ้ 8. ให้นักเรียน ทาแบบทดสอบก่อนเรียน และศึกษา เนื้อหาเอกสารประกอบการเรียน และทา แบบฝึกหัด ใบงาน เล่ม 2 แล้วเปลี่ยนกันตรวจตามเฉลยที่ครูให้ 9. ครูสังเกตความตังใจของนักเรียน ความสนใจการเรียน ความรับผิดชอบในการทางานของ ้ นักเรียนอย่างใกล้ชิด ถ้านักเรียนคนใดมีปัญหาครูจะได้ทาการช่วยเหลือทันที 10. เวลาในการจัดกิจกรรมการเรียนโดยใช้เอกสารประกอบการเรียนของนักเรียนแต่ละคน อาจไม่เท่ากัน ครูควรยืดหยุ่นตามความเหมาะสมและสถานการณ์ 11. เมื่อนักเรียนทาแบบฝึกหัด ใบงาน เสร็จแล้ว ให้นักเรียนทาแบบทดสอบหลังเรียน เพื่อ ประเมินความก้าวหน้าของนักเรียน
5.
2 << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 คำแนะนำกำรใช้เอกสำรประกอบกำรเรียนสำหรับนักเรียน การใช้เ อกสารประกอบการเรีย น การสร้างเว็บ เพจ ภาษา HTML วิชา การออกแบบและ พัฒนาเว็บเพจ รหัสวิชา ง31242 สาหรับนักเรี ยนชั้นมัธยมศึกษาปีที่ 4 นักเรียนควรปฏิบัติตาม คาแนะนา ดังนี้ 1. อ่ า นค าชี้ แ จงเกี่ ย วกั บ เอกสารประกอบการเรี ย นรู้ และค าแนะน าในการใช้ เ อกสาร ประกอบการเรียน สาหรับนักเรียนให้เข้าใจก่อนก่อนลงมือทางานหรือทาการศึกษาทุกครั้ง 2. ทาแบบทดสอบก่อนเรียนเพื่อประเมินความรู้เดิมของนักเรียน 3. ศึกษาเนื้อหาและทาแบบฝึก หัด ใบงาน เล่ม ที่ 2 โครงสร้างภาษา HTML และการจัด ข้อความ ถ้าทาแบบฝึกหัด ใบงาน หรือศึกษาเนื้อหาไม่ได้ให้ศึกษาเนื้อหาใหม่อีกครั้ง หรือปรึกษา ครูผสอน ู้ 4. เปลี่ ย นกั บ เพื่อนตรวจแบบฝึ ก ทัก ษะตามเฉลยที่ครูใ ห้ และบั นทึก คะแนนที่ไ ด้ จากนั้ น ร่วมกันสรุปองค์ความรู้ โดยครูคอยชีแนะแนวทางและอธิบายเพิ่มเติม ้ 5. ในการทาแบบฝึกทักษะ แบบทดสอบก่อนเรียน-หลังเรียน ให้นักเรียนพยายามทาด้วย ความตังใจและมีความซื่อสัตย์ต่อตนเองมากที่สุด ้ Website: [ http://www.pakornkrit.com ]
6.
วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242 ครูปกรณ์กฤช
กันทะเลิศ >> สำระที่ 3 เทคโนโลยีสำระสนเทศและกำรสื่อสำร มำตรฐำน ง 3.1 เข้าใจ เห็นคุณค่า และใช้กระบวนการเทคโนโลยีสารสนเทศในการสืบค้นข้อมูล การเรียนรู้ การสื่อสาร การแก้ปัญหา การทางาน และอาชีพอย่างมีประสิทธิภาพ ประสิทธิผล และมีคุณธรรม ตัวชี้วัด ม.4-6/8 ใช้ฮาร์ดแวร์และซอฟต์แวร์ให้เหมะสมกับงาน ม.4-6/10 ใช้คอมพิวเตอร์ในการประมวลผลข้อมูลให้เป็นสารสนเทศเพื่อประกอบการตัดสินใจ ม.4-6/11 ใช้เทคโนโลยีสารสนเทศนาเสนองานในรูปแบบที่เหมาะสม ตรงตามวัตถุประสงค์ของงาน ม.4-6/12 ใช้คอมพิวเตอร์ช่วยสร้างชินงานหรือโครงงานอย่างมีจิตสานึกและรับผิดชอบ ้ สำระกำรเรียนรู้ 1. 2. 3. 4. 5. โครงสร้างภาษา HTML แท็กคาสั่งการจัดตาแหน่งข้อความ แท็กคาสั่งการจัดรูปแบบข้อความ แท็กคาสั่งการกาหนดหัวข้อรายการ แท็กคาสั่งกาหนดสีตัวอักษร และพื้นหลัง และเส้นคั่น ผลกำรเรียนรู้ 1. เข้าใจโครงสร้างและไวยากรณ์ของโปรแกรมและภาษา หรือ กระบวนการการใช้เครื่องมือ การสร้างเว็บเพจ 2. เข้าใจและประยุกต์ใช้แท็กคาสั่งต่างๆ เกี่ยวกับการจัดตาแหน่งข้อความ การจัดรูปแบบข้อความ การกาหนดหัวข้อรายการ 3. สามารถใช้แท็กคาสั่งกาหนดสีตัวอักษร สีพืนหลังและการการขีดเส้นคั่นหน้าเว็บเพจได้ ้ Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] | 3
7.
4 << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 หน่วยที่ 2 เรื่อง โครงสร้ำงภำษำ HTML และกำรรูปแบบข้อควำม จำนวน 20 ข้อ จงทำเครื่องหมำย บนตัวเลือกที่ถูกต้องเพียงข้อเดียว 1. ข้อใดกล่าวถูกต้องเกี่ยวกับตั้งชื่อไฟล์ เว็บเพจ ไม่ถูกต้อง ก. ใช้ตัวอักษรภาษาอังกฤษ ข. ใช้สัญลักษณ์พิเศษ ได้ เช่น - _ $ ค. ใช้ตัวเลข ง. ควรตั้งชื่อเป็นภาษา และมีช่องว่าง 2. HTML ย่อมาจากอะไร ก. Height Technology maker location ข. Hypertext Markup language ค. Hexagram Thai mark Language ง. Hypertext Marker uniform Language 3. คาสั่งหรือแท็กใดต่อไปนีใช้สาหรับกาหนดข้อความแสดงบนหัวเว็บเบราเซอร์ ้ ก. <html>......</html> ข. <title>......</title> ค. <body>......</body> ง. <head>......</head> 4. คาสั่งใดต่อไปนีเป็นแท็กเดี่ยว หรือไม่จาเป็นต้องมีแท็กปิด ้ ก. <pre> ข. <b> ค. <br> ง. <hr> 5. แท็กใด คือส่วนที่ทาให้ เนื้อหา ข้อความ ภาพ ข้อมูลแสดงต้องเขียนในคาสั่งใด ก. <html>......</html> ข. <body>......</body> Website: [ http://www.pakornkrit.com ]
8.
วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242 ค.
<title>......</title> ครูปกรณ์กฤช กันทะเลิศ >> ง. <head>......</head> 6. คาสั่ง <BR> ใช้สาหรับ ก. ขึนย่อหน้าใหม่ ้ ข. ขีดเส้นคั่น ค. ขึนบรรทัดใหม่ ้ ง. เว้นวรรค 7. กาหนดหัวเรื่อง ข้อใดต่อไปนี้ เป็นหัวข้อเรื่องที่ เล็กที่สุด ก. <h1> ข. <h5> ค. <h3> ง. <h6> 8. คาสั่งใด ใช้สาหรับ เพิ่มช่องว่าง ก. ข. ␣ ค. &psnb; ง. &space; 9. Tag ใช้สาหรับตีเส้นคั่นคือแท็กใด ก. <div>…</div> ข. <a lign=””>…</p> ค. <hr> ง. <pre>…</pre> 10. <p align=”justify”>โปรดเถิดรัก เหนื่อยเกินไปไหม </p> แสดงผลลัพธ์อย่างไร ก. ข้อความขึนย่อหน้าใหม่ ชิดขวา ้ ข. ข้อความขึนย่อหน้าใหม่ กึ่งกลาง ้ ค. ข้อความขึนย่อหน้าใหม่ กระจาย ้ ง. ข้อความขึนย่อหน้าใหม่ จัดชิดขอบด้านหน้า-หลัง ้ Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] | 5
9.
6 << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 11. การจัดรูปแบบลักษณะข้อความให้เป็นไปตามที่กาหนด มีการเคาะ เว้นวรรค หรือ เป็นลักษณะ Tab ตามที่รูปแบบควรใช้แท็กใด ก. <pre> ข. <li> ค. <ol> ง. <p> 12. การระบุแท็กหมายเหตุ ในเอกสารเว็บเพจ ใช้แท็กใดต่อไปนี้ ก. <-- ข้อความ - -?> ข. <?-- ข้อความ - -> ค. <!-- ข้อความ - -> ง. <-- ข้อความ - -!> 13. แท็กใด ใช้สาหรับกาหนดรายการ ให้พิมพ์เลข 1 2 3 อัตโนมัติ ก. <il> ข. <ol> ค. <ul> ง. <dl> 14. แท็กใด ใช้สาหรับกาหนดรายการ ให้แสดงหัวข้อย่อยเป็น สัญลักษณ์ วงกลมใส สี่เหลี่ยม วงกลมทึบ ก. <ul> ข. <ol> ค. <dt> ง. <dl> 15. กรณีต้องการให้ แสดงหัวข้อย่อย แสดงสัญลักษณ์ แท็ก กาหนด type=”” รูปแบบใด ก. square ข. circle ค. disc ง. triangle Website: [ http://www.pakornkrit.com ]
10.
วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242 ครูปกรณ์กฤช
กันทะเลิศ >> 16. การให้คานิยาม สาหรับอธิบายศัพท์ ควรใช้แท็กใด ก. <ol> ข. <dt> ค. <dl> ง. <li> 17. <b><i>คนอ่านน่ารัก</b></i> จากแท็กดังกล่าวแสดงผลลัพธ์ที่ถูกต้องอย่างไร ก. คนน่ำรัก ข. คนน่ารัก ค. คนน่ารัก ง. คนน่ารัก 18. ข้อใดต่อไปนีให้ความหมายของแท็กได้ถูกต้อง ้ ก. <u> ตัวขีดเส้นใต้ <sub> ตัวยก ข. <b> ตัวหนา <i> ขีดเส้นใต้ ค. <sup> ตัวยก <del> ตัวขีดฆ่า ง. <u> ตัวเอียง <b> ตัวหนา 19. ฉัน<sub>รัก<sub/>เธอ<sub>มาก</sub> จากแท็กดังกล่าวแสดงผลลัพธ์ที่ถูกต้องอย่างไร ก. ฉันรักเธอมาก ข. ฉันรักเธอมาก ค. ฉันรักเธอมาก ง. ฉันรักเธอมาก 20. <font face=”” color=”” size=””>…..</font> จากแท็กนีข้อใดกล่าว ผิด ้ ก. face ใช้สาหรับใช้แบบตัวอักษร ข. size ใช้สาหรับกาหนดขนาดตัวอักษร ค. color ใช้สาหรับใส่สีตัวอักษรเป็นรหัสสีเท่านั้น ง. font แท็กใช้กาหนดรูปตัวอักษรให้มลักษณะต่างๆ ี Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] | 7
11.
8 << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 หน่วยกำรเรียนรูที่ 2 ้ เรื่อง โครงสร้ำงภำษำ HTML และกำรจัดกำรกับข้อควำม โครงสร้ำงเอกสำร HTML เอชทีเอ็มแอล (HTML, Hyper Text Markup Language) เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้าง การเขียนโดยอาศัยป้ายระบุ หรือเรียกว่า (Tag) แท็ก หรือคาสั่งสาหรับควบคุมการแสดงผลข้อความรูป หรือวัตถุ ต่างๆ อ่านโปรแกรมเว็บเบราเซอร์ ซึ่งแท็กหรือคาสั่งและคาสั่งนั้น อาจจะมีส่วนเพิ่มหรือส่วนขยายที่ใช้สาหรับบอก คุณลักษณะพิเศษ (Attribute) แอททริบิวต์ สาหรับระบุหรือควบคุมการแสดงผลเพิ่มเติม โดยแต่คาสั่งจะมีลักษณะ แตกต่างกันออไป ป้ำยระบุ (Tag) หรือ แท็ก หรือ คำสั่ง เป็นลักษณะเฉพาะตัวของภาษา HTML โดยลักษณะคาสั่งส่วนใหญ่ จะอยู่ภายใต้เครื่องหมายน้อยกว่า และ เครื่องหมายมากกว่า < และ > โดยอาจแบ่งเป็น 3 ประเภทดังนี้ - แท็กเดี่ยว เป็นคาสั่งที่มีแต่แท็กเปิดโดยไม่มีแท็กเปิด เช่น <br> คือ ขึ้นบรรทัดใหม่ไม่ต้องปิดด้วย แท็ก </br> ก็ได้ - แท็กคู่หรือ แท็กเปิด ต้องมีการระบุ เป็นคู่เปิดปิดเสมอ เช่น <htrml>…</html>, <b>…</b> ตัวหนา คือ แท็กเปิดอยู่ในเครื่อง <> และแท็กปิด </> มีเครื่องหมายทับเพิ่มขึ้นมาหรือเรียกว่า Slash:สแลช กรณีที่ ไม่ปิดอาจทาผลให้คาสั่งทางานไม่หยุดหรือทางานไม่ถูกต้อง - แท็กพิเศษ ไม่ต้องมีแท็กเปิดหรือปิด <> เช่น แท็กคาสั่งเว้นวรรค ใช้ ลักษณะพิเศษ (Attributes) เป็นส่วนที่ทาหน้าที่ขยายคาสั่งหรือแท็กหลัก ซึ่งระบุในภายในเครื่อง <> โดยการกาหนดลักษณะ พิเศษสามารถกาหนดได้มากว่า 1 ลักษณะพิเศษ ต่างแตกกันออกไปตามคุณลักษณะของคาสั่งแท็กนั้นๆ ตัวอย่างเช่น คาสั่ง <p> …</p> คือใช้สาหรับขึ้นย่อหน้าใหม่ ในคาสั่ง <p> ยังสามารถเพิ่มคุณลักษณะพิเศษ เข้าไปในได้ เช่น คาสั่ง <p> สามารถใส่ลักษณะพิเศษได้ Left/Right/center/justify อย่างใดอย่างหนึ่ง ตัวอย่าง <p align=”Left/Right/Center/Justify”> ข้อความ </p> ตัวอักษรสีแดง สีม่วง align=”Left/Right/Center/Justify” นีเราเรียกว่าส่วนขยายลักษณะพิเศษ ้ นั้นเอง อธิบายคือ คาสั่งขยายนี้ ขึนย่อใหม่ แล้วส่วนลักษณะพิเศษ เช่น ทาให้ตัวหนังสือ ชิดซ้าย ชิดขวา ้ กึ่งกลาง และจัดหน้าและหลังชิดขอบ เป็นต้น Website: [ http://www.pakornkrit.com ]
12.
วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242 ครูปกรณ์กฤช
กันทะเลิศ >> โปรแกรม Editor ที่สำมำรถใช้ในกำรเขียนเว็บเพจภำษำ HTML ประเภท Text Editor 1. Programmer’s Notepad ภาพที่ 2.1 รูปจอโปรแกรม Programmer’s Notepad 2. Notepad (ซึ่งถูกติดตังในระบบปฏิบัติการ Windows ไม่ต้องติดตังเพิ่ม) ้ ้ ภาพที่ 2.2 รูปจอโปรแกรม Notepad 3. Notepad++ ภาพที่ 2.3 รูปจอโปรแกรม Notepad++ Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] | 9
13.
10 << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 4. Gedit ภาพที่ 2.4 รูปจอโปรแกรม Gedit 5. Edit plus ภาพที่ 2.5 รูปจอโปรแกรม Edit plus สำหรับเอกสำรประกอบกำรเรียนเล่มนี้จะใช้ Notepad++ สำหรับเขียนเว็บภำษำ HTML กรณีขอข้ามขั้นตอนการติดตั้งโปรแกรมสามารถหาดาวน์โหลดได้ฟรีจากอินเทอร์เน็ต เนื่องจากเป็น โปรแกรมประเภทฟรีแวร์ 1. การเข้าสู่โปรแกรมเข้าที่ Start-->เลือก All Program -->Notepad++ [ระบบปฏิบัติการ Windows 7] ภาพที่ 2.6 หน้าจอโปรแกรม Notepad++ Website: [ http://www.pakornkrit.com ]
14.
วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242 ครูปกรณ์กฤช
กันทะเลิศ >> 2. ขั้นตอนการกาหนดภาษาที่ใช้เขียนเว็บเพจ เมนู Language ภาษา -->H--> HTML ภาพที่ 2.7 หน้าจอแสดงการกาหนดภาษา HTML 3. กาหนดการเข้ารหัสสาหรับเว็บเพจ เมนู Encoding-->Unicode UTF-8 Without Bom ,BOM (Byte Order Mark) เป็นตัวช่วยในการบอกว่า character นั้นเป็น Big หรือ Small Endian หรือจะเลือก UTF-8 ธรรมดา ก็ได้ ยู นิ โ ค้ ด (อั ง กฤษ: Unicode) คือมาตรฐานอุตสาหกรรมที่ ช่วยให้คอมพิวเตอร์แสดงผล และจัดการข้อความธรรมดา ที่ ใ ช้ ใ นระบบการเขี ย นของ ภาษาส่ ว นใหญ่ ใ นโลกได้ อย่างสอดคล้องกัน ภาพที่ 2.8 หน้าจอการเข้ารหัสข้อมูล 4. การบันทึกเอกสาร HTML เมนู File แฟ้ม-->Save as บันทึกเป็น ภาพที่ 2.9 แสดงการบันทึกข้อมูล Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] | 11
15.
12 << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 ข้อกำหนดของกำรตั้งชื่อไฟล์สำหรับเอกสำร HTML - การตั้งชื่อควรใช้ตัวอักษร a - z หรือตัวเลข 0 - 9 ผสมกันก็ได้ - ไม่ควรตั้งชื่อไฟล์เป็นภาษาไทย เพราะไม่เป็นมาตรฐาน เพราะอาจมีสนับสนุนกับระบบปฏิบัติของ Web Server บางระบบ - ตั้งชื่อไฟล์ไม่ควรมีเว้นวรรค เนื่องจากบางระบบปฏิบัติการไม่สนับสนุน - สามารถใช้สัญลักษณ์พิเศษ ได้ เช่น _ ขีดล่าง, - เครื่องหมายขีดกลางม, $ แต่ไม่แนะนาให้ใช้ - หน้าแรกของเว็บไซต์ ควรตั้งชื่อ index หรือ default ก็ได้ - ควรตั้งชื่อไฟล์ที่ไม่ควรยาวเกินไป และควรมีความหมายเพื่อง่ายในการจัดจาไม่สับสน - ตัวอย่างการตั้งไฟล์ เช่น index.html, love.html, download.html, home.html contact.html เป็นต้น ชื่อที่ตง ั้ แล้วอาจให้สับสนหรือลืมง่าย เช่น 01.html, aaa.html, C009.html โครงสร้ำงภำษำ HTML <html> <head> ..... <คาสั่งที่อยู่ในส่วนหัวของเอกสาร> </head> <body> ..... <คาสั่งที่อยู่ในส่วนของเนื้อหา> </body> </html> ตำรำง 2.1 โครงสร้ำงภำษำ HTML จำกตำรำงสำมำรถอธิบำยได้ดังนี้ บรรทัดที่ 1 <html> บรรทัดที่ 2 <head> บรรทัดที่ 3 ..... <คาสั่งที่อยู่ในส่วนหัวของเอกสาร> บรรทัดที่ 4 </head> บรรทัดที่ 5 <body> บรรทัดที่ 6 ..... <คาสั่งที่อยู่ในส่วนของเนื้อหา> บรรทัดที่ 7 </body> บรรทัดที่ 8 </html> ตำรำงที่ 2.2 แสดงคำอธิบำยโครงสร้ำง HTML Website: [ http://www.pakornkrit.com ]
16.
วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242 ครูปกรณ์กฤช
กันทะเลิศ >> บรรทัดที่ 1 <html> เป็นการระบุว่า เริ่มเขียนภาษา HTML บรรทัดที่ 2 <head> เป็นส่วนที่ใช้สาหรับอธิบายข้อมูลเฉพาะที่เกี่ยวกับเอกสารเว็บ บรรทัดที่ 3 คาสั่งที่สามารถใส่ในส่วน head เช่น <title>ข้อความ</title> หรือ <meta>…..</meta> บรรทัดที่ 4 </head> ปิดส่วนหัว บรรทัดที่ 5 <body> ส่วนของเนื้อหาเอกสารหลักของเอกสารหน้าเว็บ โดยส่วนนี้จะนาไปแสดงผลที่โปรแกรมเว็บ เบราเซอร์ เช่น ข้อความ รูปภาพ เสียง วีดีโอ ตาราง ฯลฯ บรรทัดที่ 7 <body> ปิดคาสั่งส่วนเนือหาทั้งหมด ้ บรรทัดที่ 8 ปิดคาสั่งภาษา HTML เข้ำโปรแกรม Notepad++ พิมพ์คำสั่งดังนี้ บันทึกชื่อไฟล์ ex1.html บรรทัดที่ 1 <html> บรรทัดที่ 2 <head> บรรทัดที่ 3 <title> ยินดีตอนรับ </title> ้ บรรทัดที่ 4 </head> บรรทัดที่ 5 <body> บรรทัดที่ 6 สวัสดี บรรทัดที่ 7 </body> บรรทัดที่ 8 </html> ตำรำงที่ 2.3 แสดงส่วนประกอบของภำษำ HTML จากตางรางที่ 2.3 สามารถแสดงผลเว็บเบราเซอร์ได้ดังนี้ (ในเอกสารเล่มจะใช้ Internet Explorer 9.0 เป็นตัว แสดงผลเป็นหลัก * บรรทัดที่ 3 แสดงบนหัวของเว็เบราเซอร์ หมายเหตุ* กรณีที่เว็บเพจไม่ สามารถแสดงผลเป็นภาษาไทยหรือ อ่านไม่ออกเป็นคาภาษาไทยให้คลิก ขวาพื้นที่ว่างของ โปรแกรม IE แล้ว บรรทัดที่ 6 แสดงในส่วนของ Body เลือก Encoding-->More-->Unicode UTF-8 เพื่อแสดงผลเป็นภาษาตาม รูปแบบที่เราได้เข้ารหัสไว้ สาหรับ เว็บ ภาพที่ 2.10 แสดงผลจาก IE เบอร์เซอร์ก็สามารถเปลี่ยนตามเมนู ของโปรแกรมนั้นๆ Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] | 13
17.
14 << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 การจัดการกับข้อความ 1. กำรขึ้นบรรทัดใหม่ (Break) : br แท็ก : <br> แท็กสำสั่งนี้เป็นแท็กเดี่ยวไม่มีแท็กปิดไม่ต้องใส่ </b> ตำแหน่ง: <body>………..</body> อธิบำย: ใช้สาหรับขึ้นบรรทัดใหม่ ้ ตัวอย่ำง: <br>คนที่ถูกแฟนทิง<br>ไม่ใช่คนอกหัก<br>เค้าแค่กาลังเรียนรู้<br>ความรักในหลายๆด้าน ภาพที่ 2.11 แสดงการใช้คาสั่งขึนบรรทัดใหม่ ้ 2. กำรขึ้นประโยคย่อหน้ำใหม่ (Paragraph) : P แท็ก : <p>ข้อควำม</p> ตำแหน่ง: <body>………..</body> อธิบำย: ใช้สาหรับจัดย่อหน้าให้สาหรับข้อความ และเว้น 1 บรรทัดหลังสิ้นสุดข้อความ ีิ ตัวอย่ำง: <p>สุขภาพเป็นเรื่องสาคัญอันหนึ่ง โปรดถนอม ตัวเองให้มาก เมื่อยังเป็นวัยรุ่น อย่าใช้ชวตให้หนักเกินไปลอง ลักษณะพิเศษ หาเวลาอยู่ว่างๆ ไม่ตองทาอะไรเลยดูบ้าง อย่าแบก โลกทังใบไว้คนเดียว และอีกอย่างงานก็ไม่ใช่ทุกอย่างของ ้ ้ ชีวต</p> ิ <p>เมื่อมีโอกาสใดก็ตามเข้ามาจงอย่าปฏิเสธ ถึงจะล้มเหลว แต่มันก็คอ ประสบการณ์ ื สร้างเนื้อ สร้างตัวให้ได้เร็วที่สุด ในขณะที่คณยังมีกาลัง ยังเป็นหนุ่ม-สาว เพราะการฝ่าฟันอุปสรรคในช่วง ุ อายุมาก ไม่ใช่เรื่องสนุก</p> <p align=”left/right/center/justify”>ข้อควำม</p> ภาพที่ 2.12 แสดงการใช้คาสั่งขึนย่อหน้าใหม่ ้ Website: [ http://www.pakornkrit.com ]
18.
วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242 ครูปกรณ์กฤช
กันทะเลิศ >> 3. กำรขึ้นประโยคย่อหน้ำใหม่ <p align=””> แท็ก : <p align=”n”>ข้อควำม</p> Left: จัดชิดซ้าย Right:จัดชิดขวา Center: จัดกี่งกลาง Justify: จัดชิดขอบซ้าย-ขวา ค่ำ:n อธิบำย: ใช้สาหรับจัดย่อหน้าให้สาหรับข้อความ และเว้น 1 บรรทัดหลังสิ้นสุดข้อความ ิ ตัวอย่ำง: <p align=”left”>ฝรั่งมีวตามินมากกว่าส้มเขียวหวานถึง 9 เท่า ซึ่งเพียงพอต่อความต้องการของร่างกายใน แต่ละวัน (30 - 40 มิลลิกรัม) และนอกจากผลแล้วใบฝรั่งเองก็มประโยชน์ มีคุณค่าเป็นยาสมุนไพรด้วย นั่น ี คือ ใช้แก้อาการท้องเสียหรือนามาเคียวดับกลิ่นปาก</p> ้ <p align=”right”> กีวสีเขียวที่เราคุ้นเคยยังมีกีวโกลด์หรือกีวสีทองให้เลือกบริโภค กีวีทั้งสองชนิดมีปริมาณ ี ี ี วิตามินซีสูงสุดหากเทียบกับผลไม้ขึนชื่อเรื่องวิตามินซี อาทิ ส้ม หรือมะละกอ จากการวิจัยพบว่ากีวีหนึ่งผล มี ้ วิตามินซีมากกว่าส้มหนึ่งลูกถึง 74% </p> <p align=”center”>การวิจัยทางการแพทย์ของสหรัฐอเมริกาพบว่า ในน้าทับทิมมีสารต้านอนุมูลอิสระ หลายชนิดและมีประสิทธิภาพสูงมาก สามารถลดภาวะการสะสมไขมันในผนังเส้นเลือด ป้องกันเส้นเลือดอุด ตันและแข็งตัว ซึ่งจะก่อให้เกิดโรคหัวใจขาดเลือด</p> <p align=”justify”>ตามมา รวมทั้งทาให้เส้นเลือดที่หนาตัวและมีไขมันสะสมซึ่งเป็นเส้นเลือดที่ไม่ดมความ ี ี หนาตัวลดลงและลดไขมันที่สะสมลงอีกด้วย ช่วยบารุงหัวใจในผู้ป่วยที่เป็นโรคหัวใจขาดเลือดโดยเพิ่มการ ไหลเวียนที่ดขนและลดภาวะหัวใจขาดเลือดในผู้ป่วยโรคหัวใจ </p> ี ึ้ “left” “right” “center” “justify” ภาพที่ 2.13 แสดงการใช้คาสั่งขึนย่อหน้าใหม่ <p align=””> ้ Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] | 15
19.
16 << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 4. กำรเว้นวรรค หรือกำรแทรกช่องว่ำง (Nonbreaking space) : แท็ก : เป็นแท็กเดี่ยวไม่มีกำรเปิดและปิด เครื่องหมำย <>…</> ตำแหน่ง: <body>………..</body> อธิบำย: ใช้สาหรับเว้นวรรค (โดยปกติ html การเคาะจะไม่มีผลในการแสดงผล) จึงต้องใช้แท็กนี้มาช่วย ในการทาให้เกิดช่องว่างหรือเคาะสามารถพิมพ์ติดกันได้ หรืออาจใส่ช่องว่างระหว่างแท็ก ตัวอย่ำง: Hotmail Gmail Yahoo Youtube Facebook Google ไม่มีคาสั่ง แม้จะเคาะ กี่ครั้งก็เว้นเพียง 1 เคาะ 0t เว้นวรรค 3 เคาะ ภาพที่ 2.14 แสดงผลการใช้คาสังเว้นวรรค ่ 5. กำรจัดรูปแบบข้อควำมให้ตรงกับเอกสำร (Preformatted Text) : pre แท็ก : <pre> ข้อควำม </pre> ตำแหน่ง: <body>………..</body> อธิบำย: จัดข้อความให้ตรงกับเอกสารที่เขียนไว้ พิมพ์อย่างไรออกมาแบบนั้น รายการ บาท ตัวอย่ำง: ที่ 1. 2. <pre> เลขที่ 1 9 </pre> แมว นก ชื่อ-สกุล แก้ว เสาร์ 120 90 ค่าอาหาร 40 100 Website: [ http://www.pakornkrit.com ]
20.
วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242 ครูปกรณ์กฤช
กันทะเลิศ >> ไม่มีคาสั่ง <pre> ข้อความจะเว้น 1 เคาะ และไม่ขนบรรทัดใหม่ ึ้ ใช้คาสั่ง <pre> แสดงผล ตามที่เขียนคาสั่ง ภาพที่ 2.15 แสดงผลการใช้คาสั่งเว้นวรรค 6. กำรจัดตำแหน่งข้อควำม/วัตถุกึ่งกลำง (Center Text) : center แท็ก : <center> ข้อควำม/วัตถุ/ภำพ/ตำรำง/อื่นๆ</center> ตำแหน่ง: <body>………..</body> ึ่ อธิบำย: จัดตาแหน่งข้อความ/วัตถุกงกลางหน้าจอ ตามแนวนอน ตัวอย่ำง: <center> LOVE YOU </center> ภาพที่ 2.16 แสดงผลการใส่หมายเหตุ 7. กำรจัดตำแหน่งข้อควำม/วัตถุกึ่งกลำง (Division Alignment) : <div align=”n”> แท็ก : <div align=””> ข้อควำม/วัตถุ/ภำพ/ตำรำง/อื่นๆ</div> ตำแหน่ง: <body>………..</body> Left, Right, Center ค่ำ n: ึ่ อธิบำย: จัดตาแหน่งข้อความ/วัตถุกงกลางหน้าจอ ตามแนวนอน พร้อมขึ้นบรรทัดใหม่ ตัวอย่าง: <div align=”left”> LOVE YOU </div> <div align=”right”> LOVE BEAT </div> <div align=”center”> LOVE SICK </div> Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] | 17
21.
18 << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 ภาพที่ 2.17 แสดงผลการใช้แท็ก DIV 8. กำรกำหนดหัวเรื่อง/หัวข้อหลัก/หัวข้อรอง (Heading): <hn> <hn> ข้อควำม </hn> ตำแหน่ง: <body>………..</body> ตัวเลขตั้งแต่ 1-6 ค่ำ n : อธิบำย: กาหนดหัวข้อเรื่องหรือหัวข้อหลัก หัวข้อรอง ตามขนาดที่ระบุไว้ ตัวอย่ำง: <h1>หัวเรื่อง 1</h1> <h2>หัวเรื่อง 2</h2> <h3>หัวเรื่อง 3</h3> <h4>หัวเรื่อง 4</h4> <h5>หัวเรื่อง 5</h5> <h6>หัวเรื่อง 6</h6> <h1>วิชาการออกแบบและพัฒนาเว็บเพจ</h1> <h2>หน่วยการเรียนรู้ที่ 1 ความรูเบืองเบืองต้น HTML</h2> ้ ้ ้ <h3>- ความหมาย</h3> <h3>- โครงสร้าง</h3> <h3>- เริ่มต้นการเขียนเว็บเพจ </h3> <h3>- คาสั่งย่อหน้าใหม่ </h3> <h3>- คาสั่งเว้นวรรค </h3> แท็ก : Website: [ http://www.pakornkrit.com ]
22.
วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242 ครูปกรณ์กฤช
กันทะเลิศ >> ภาพที่ 2.18 แสดงผลการใช้คาสั่งหัวเรื่อง ใช้คาสั่ง <pre> แสดงผล ตามที่เขียนคาสั่ง ตัวอย่างการใช้คาสั่งหัวข้อ เรื่องขนาดต่างๆ 9. กำรแทรกหมำยเหตุ (Comment) แท็ก : <!-- ข้อควำม -- > ตำแหน่ง: สามารถใส่ได้ทุกส่วนภายในโครงสร้างของ <html> แท็ก อธิบำย: ใช้สาหรับใช้หมายเหตุ หรือความบันทึกโน้ตจดจา แต่ไม่ให้แสดงผลบนเว็บเบราเซอร์ ตัวอย่ำง: ความรักคืออะไร <!--สำมำรถเปลี่ยนได้ทุกวินำที ขึ้นอยู่กับ ณ เวลำนั้นเป็นอย่ำงไร--> ข้อความจะแสดงดังนี้ สาหรับข้อความที่อยู่ในแท็ก <!-- ข้อความ -- > จะไม่แสดงออกมา ภาพที่ 2.19 แสดงผลการใส่หมายเหตุ กำรจัดรูปแบบตัวอักษร และกำรกำหนดรำยกำร การจัดรูปแบบตัวอักษรลักษณะคล้ายกับ Microsoft Word เช่น การทาตัวหนา ตัวเอียง ขีดเส้นใต้ ตัวยก ตัวห้อย การแทรกอักขระหรือสัญลักษณ์พิเศษต่างๆ ซึ่งมีรูปแบบแท็กหรือคาสั่งต่างๆ ดังนี้ Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] | 19
23.
20 << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 1. ตัวหนำ ตัวเอียง ตัวขีดเส้นใต้ Bold: B, italic: I, Underline: U แท็ก : <b> ข้อควำม </b> <i> ข้อควำม </i> <u> ข้อควำม </u> ตำแหน่ง: <body>…</body> อธิบำย: <b> คือ ตัวหนา <i> คือ ตัวเอียง <u> คือ ตัวขีดเส้นใต้ ตัวอย่ำง: <b> ภาษาเกาหลี</b> <i> คิดถึงนะ </i> <u> คือ โพโกชีพอ</u> <b><i><u> ชัล ชาโย ฝันดี</b> </i> </u> หนา เอียง ขีดเส้นใต้ หนา เอียง ขีดเส้นใต้ ภาพที่ 2.20 แสดงผลตัวอักษรหนาเอียงขีดเส้นใต้ 2. ตัวยก ตัวห้อย ตัวขีดฆ่ำ ตัวแทรก SuperScript: sup, SubScript: sub, Delete: del, Insert: ins แท็ก : <sup>ข้อควำม </sup><sub> ข้อควำม </sub> <del> ข้อควำม </del> <ins>..…</ins> ตำแหน่ง: <body>…</body> อธิบำย: <sup> คือ ตัวยกกาลัง <sub> คือ ตัวห้อย <del> ตัวขีดกลาง <ins> ตัวแทรกเหมือนแท็ก <u> ตัวอย่ำง: 3<sub> 9</sub> 50<sub> 7</sub> ราคาเต็ม <del> 499 </del> <ins>เหลือ 199</ins> ตัว ตัวห้อย ตัวขีดฆ่า ตัวแทรก ภาพที่ 2.21 แสดงผลตัวยกตัวห้อย ตัวขีดฆ่า ตัวแทรก Website: [ http://www.pakornkrit.com ]
24.
วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242 ครูปกรณ์กฤช
กันทะเลิศ >> 3. กำรแทรกอักขระหรือสัญลักษณ์พิเศษ (Special Characters) สุวทย์. คาสั่งแสดงสัญลักษณ์พเศษต่างๆ.[ออนไลน์].http://htmlcode-itguide.blogspot.com/2011/08/blog-post_2696.html ิ ิ สืบค้น เมื่อวันที่ 25 พฤศจิกายน 2556. Character Entity Number Tag/Code Description ∀ ∀ ∀ for all ∂ ∂ ∂ part ∃ ∃ ∃ exists ∅ ∅ ∅ empty ∇ ∇ ∇ nabla ∈ ∈ ∈ isin ∉ ∉ ∉ notin ∋ ∋ ∋ ni ∏ ∏ ∏ prod ∑ ∑ ∑ sum − − − minus ∗ ∗ ∗ lowast √ √ √ square root ∝ ∝ ∝ proportional to ∞ ∞ ∞ infinity ∧ ∧ ∧ and ∨ ∨ ∨ or ∩ ∩ ∩ cap ∪ ∪ ∪ cup ∫ ∫ ∫ integral ∴ ∴ ∴ therefore ∼ ∼ ∼ similar to ≅ ≅ ≅ congruent to ≈ ≈ ≈ almost equal ≠ ≠ ≠ not equal ≡ ≡ ≡ equivalent ≤ ≤ ≤ less or equal ≥ ≥ ≥ greater or equal ⊂ ⊂ ⊂ subset of ⊃ ⊃ ⊃ superset of ⊄ ⊄ ⊄ not subset of ⊆ ⊆ ⊆ subset or equal ⊇ ⊇ ⊇ superset or equal ⊕ ⊕ ⊕ circled plus ⊗ ⊗ ⊗ cirled times ⊥ ⊥ ⊥ perpendicular Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] | 21
25.
22 << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 Character Entity Number Tag/Code Description Œ Œ Œ capital ligature OE œ œ œ small ligature oe Š Š Š capital S with caron š š š small S with caron Ÿ Ÿ Ÿ capital Y with diaeres ƒ ƒ ƒ f with hook ˆ ˆ ˆ modifier letter circumflex accent ˜ ˜ ˜ small tilde – – – en dash — — — em dash © - © Copy r ight ® - ® R t ed egis er ‚ ‚ ‚ single low-9 quotation mark † † † dagger ‡ ‡ ‡ double dagger • • • bullet … … … horizontal ellipsis ‰ ‰ ‰ per mille ′ ′ ′ minutes ″ ″ ″ seconds ‹ ‹ ‹ single left angle quotation › › › single right angle quotation ‾ ‾ ‾ overline € € € euro ™ ™ ™ trademark ← ← ← left arrow ↑ ↑ ↑ up arrow → → → right arrow ↓ ↓ ↓ down arrow ↔ ↔ ↔ left right arrow ↵ ↵ ↵ carriage return arrow ⌈ ⌈ ⌈ left ceiling ⌉ ⌉ ⌉ right ceiling ⌊ ⌊ ⌊ left floor ⌋ ⌋ ⌋ right floor ◊ ◊ ◊ lozenge ♠ ♠ ♠ spade ♣ ♣ ♣ club ♥ ♥ ♥ heart ♦ ♦ ♦ diamond Website: [ http://www.pakornkrit.com ]
26.
วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242 ครูปกรณ์กฤช
กันทะเลิศ >> แท็ก : ยกตัวอย่ำง 4 แท็กนี้จำกตำรำงด้ำนบน € © ® &trade ตำแหน่ง: <body>…</body> อธิบำย: € คือ € © คือ © ® คือ ® &trade คือ ™ ตัวอย่ำง: เงิน 50 € สงวนลิขสิทธิ์ © เครื่องหมายการค้าจดทะเบียน ® เครื่องหมายการค้า™ € © ® ™ ภาพที่ 2.22 แสดงผลตัวยกตัวห้อย ตัวขีดฆ่า ตัวแทรก 4. กำหนดแบบอักษร (Font) :font แท็ก : <font size=”n” face=”?” color=”ชื่อสี/รหัสสี”>ข้อควำม</font> ตำแหน่ง: <body>…</body> ค่ำ อธิบำย: size= ตัวเลข, + เป็นการเพิ่มขนาดเมื่อเทียบกับขนาดเดิม, - เป็นการลดขนาดเมื่อเทียบกับขนาดเดิม, Face=ชื่อ font /ชื่อแบบอักษร color=ชื่อสี, #รหัสค่าสี size= ใช้กาหนดขนาดให้กับข้อความ โดยสามารถกาหนดค่าได้ตงแต่ เลข 1-7 ั้ Face= ใช้กาหนด font ให้กับข้อความ color= ใช้กาหนดสีให้กับข้อความ ตัวอย่ำง: ประเทศ <font size=”4”>ไทย</font> <font size=”+4”>ลำว</font> <font size=”-4”>กัมพูชำ</font> <font face=”Tahoma”>มำเลเซีย<font> <font color=”red”>พม่ำ</font> <font color=”#00FF00”>ฟิลิปปินส์</font> <font size=”3” face=”TH Niramit AS” color=”Blue”>เวียดนำม</font> Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] | 23
27.
24 << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 ภาพที่ 2.23 แสดงผลตัวยกตัวห้อย ตัวขีดฆ่า ตัวแทรก Size 1 2 3 4 5 6 Font Size 7 points 10 points 12 points 14 points 18 points 7 36 points 24 points ตำรำงชื่อสี และรหัสสี อ้ำงอิง: โรงเรียนยุพราชวิทยาลัย เชียงใหม่.[ออนไลน์] http://www.computerhope.com/htmcolor.htm สืบค้นเมื่อวันที่ 26 พฤศจิกายน 2556. อ้ำงอิง: Code สี โค้ดสี [ออนไลน์] http://xn--code-3jovd.plus.in.th สืบค้นเมื่อวันที่ 28 พฤศจิกำยน 2556. Website: [ http://www.pakornkrit.com ]
28.
วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242 ครูปกรณ์กฤช
กันทะเลิศ >> ตำรำงรหัสสี แบบเลขฐำน 16 อ้างอิง: HTML color codes and names. [ออนไลน์] . http://www.computerhope.com/htmcolor.htm สืบค้นเมื่อวันที่ 26 พฤศจิกายน 2556. 5. กำรกำหนดสีให้กับพื้นหลัง (Background Color): bgcolor แท็ก : <bgcolor=”สี/รหัสสี”> ตำแหน่ง: <body>…</body> อธิบำย: สาหรับใส่สีพ้ืนหลังให้กับหน้าเว็บเพจ ตัวอย่ำง: <body bgcolor=”yellow”>…</body> <body bgcolor=”#00FF00”>…</body> ภาพที่ 2.24 แสดงผลการใส่สีให้กับพืนหลัง ้ Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] | 25
29.
26 << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 6. กำรตีเส้นคั่น (Horizontal Line): hr แท็ก : <hr width=”” size=”” color=””> ตำแหน่ง: <body>…</body> ี อธิบำย: ใช้สาหรับตีเส้นคั่นเป็นแท็กเดี่ยวไม่มแท็กปิด Width คือ ความยาวของเส้น ใส่เป็น ตัวเลข หรือ เปอร์เซ็นต์ เช่น 100 หรือ 70% Size คือ ความหนาของเส้นคั่น ใส่เป็น ตัวเลข หรือ เปอร์เซ็นต์ เช่น 90 หรือ 50% Color คือ ใส่สของเส้นคั่น ได้ทั้งชื่อสี และรหัสสี ี ตัวอย่ำง: 1<hr> 2<hr size="15"> 3<hr size="25%"> 4<hr width="30"> 5<hr width="40%"> 6<hr color="blue"> 7<hr width="250" size="10" color="pink"> ภาพที่ 2.25 แสดงผลการใส่เส้นคั่น Website: [ http://www.pakornkrit.com ]
30.
วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242 ครูปกรณ์กฤช
กันทะเลิศ >> 7. กำรกำหนดรำยกำรแบบเรียงลำดับ (Ordered Lists): ol , List: li แท็ก : <ol type=””> <li> ข้อควำม </li> </ol> ตำแหน่ง: <body>…</body> Type: ค่าที่สามารถระบุ มีดังนี้ ค่ำ A: คือ เรียงลาดับเป็น A, B, C a: คือ เรียงลาดับเป็น a, b, c I: คือ เรียงลาดับเป็น I, II, III i: คือ เรียงลาดับเป็น i, ii, iii 1: คือ เรียงลาดับเป็น 1, 2, 3 เป็นค่าเริ่มต้น ถ้าไม่กาหนดค่าผลผลจะได้แบบนี้ อธิบำย: ใช้สาหรับกาหนดรายการแบบเรียงลาดับ ตัวอย่ำง: อำหำรมีดังนี้ <ol> <li> ข้าวผัด <li> ผัดซายองเต้ </ol> เว็บไซต์ท่นิยมใช้ ี <ol type=”A”> <li> facebook <li> youtube </ol> อยำกมีแฟนแบบไหน <ol type=”i”> <li> สวย/หล่อ <li> นิสัยดี/ซื่อสัตย์ </ol> อยำกมีฐำนะแบบใด <ol type=”1”> <li> รวย ไม่มีความสุข <li> ยากจน มีความสุข </ol> Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] | 27
31.
28 << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 ไม่ใส่ type ภาพที่ 2.26 แสดงผลแบบเรียงลาดับ ใส่ type=”1” 8. กำรกำหนดรำยกำรแบบไม่เรียงลำดับ (Unordered Lists): ol , List: li แท็ก : <ul type=””> <li> ข้อควำม </li> </ul> ตำแหน่ง: <body>…</body> disc: คือ วงกลมใส circle: คือ วงกลมทึบ square: คือ สีเหลี่ยม ค่ำ อธิบำย: ใช้สาหรับกาหนดรายการแบบไม่เรียงลาดับ สัญลักษณ์แสดงหัวข้อย่อย ตัวอย่ำง: <b>ภำษำที่ชอบ</b> <ul type=”disc”> <li> เกาหลี <li> ไทย </ul> <b>อย่ำงไปเที่ยวที่ไหน</b> <ul type=”circle”> <li> ญี่ปุ่น <li> อังกฤษ </ul> <b>สัตว์เลี้ยงที่ชอบ</b> <ul type=”square”> <li> หนูแฮมเตอร์ <li> สุนัข </ul> Website: [ http://www.pakornkrit.com ]
32.
วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242 ครูปกรณ์กฤช
กันทะเลิศ >> ไม่ใส่ type ภาพที่ 2.27 แสดงผลแบบไม่เรียงลาดับ 9. กำรกำหนดรำยกำรแบบนิยำมควำมหมำย (Definition Lists): ol , List: li แท็ก : <dl type=””> <dt> ข้อความ </dt><dd>ข้อควำมเนื้อหำ</dd> </dl> ตำแหน่ง: <body>…</body> ค่ำ อธิบำย: ใช้สาหรับกาหนดนิยายาม คล้ายกับการย่อหน้ากด TAB ตัวอย่ำง: <b>คำศัพท์ควำมรัก</b> <dl> <dt> ความรัก</dt> <dd>การร่วมฝัน ร่วมปันใจเเละก้าวไปในชีวต การอยู่เคียงข้างกันเสมอไม่วาอีกฝ่าย จะตกต่าเพียงใด ใจถึงกัน</dd> ิ ่ <dt> อกหัก</dt> <dd> การที่เราได้รู้วาต่อไปจากนี้ ทุกสิงดูเหมือนไม่มค่าเลยสาหรับเรา </dd> ่ ่ ี <dt>ความหลง</dt> <dd> เป็นภาวะที่ถกดึงดูดด้วยความรัก ใคร่จากของรักอย่างรุนแรง รักเพ้อ ไม่คงรูปไม่แน่นอน</dd> ู <dt>แอบรัก</dt> <dd> แอบมองเข้าอยู่ข้างเดียว นึกถึงเมื่อไรก็ต้องยิ้ม รักชอบแบบไร้เหตุผลไม่ว่าเขามีแฟนหรือไม่</dd> <dt>ความหึง</dt> <dd> การที่ที่จิตระลึกถึง ความรู้สึกคับแคบและเห็นแก่ตัวจุดเริ่มต้นที่จะทาให้ความรักไม่ราบรื่นสวยงาม </dd> </dl> Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] | 29
33.
30 << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 ภาพที่ 2.28 แสดงผลแบบนิยาม Website: [ http://www.pakornkrit.com ]
34.
วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242 ครูปกรณ์กฤช
กันทะเลิศ >> <p align=””>…</p> กาหนดย่อหน้าให้กับข้อความ และจัดตาแหน่ง แบบชิด ชิดขวา กึ่งกลาง ชิดขอบ <br> ใช้สาหรับขึ้นบรรทัดใหม่ แท็กเป็นแท็กเดี่ยวไม่มแท็กปิด ี การเว้นวรรค หรือ ช่องว่าง <center>…</center> จัดตาแหน่งกึ่งกลางหน้าเว็บเพจ <pre>….</pre> ใช้สาหรับแบบให้เอกสารแสดงผลตามที่พิมพ์ <hn> </hn> ใช้หรับกาหนดหัวข้อเรื่อง หัวข้อรายการหลัก กาหนดได้ 1-6 <div align>…</div> จัดตาแหน่งของข้อความ วัตถุต่างๆ ให้ กิ่งกลาง ซ้าย ขวา <!--หมำยเหตุ --> สาหรับใส่หมายเหตุหรือบันทึกเพื่อจดจา โดยไม่แสดงผลบนเบราเซอร์ <b>…</b> กาหนดข้อความให้เป็นตัวหนา <i>…</i> กาหนดข้อความให้เป็นตัวเอียง <u>…</u> กาหนดข้อความให้เป็นตัวขีดเส้นใต้ <sup>…</sup> กาหนดข้อความให้เป็นตัวยก <sub>…</sub> กาหนดข้อความให้เป็นตัวห้อย <del>…</del> กาหนดข้อความให้เป็นตัวขีดฆ่าตรงกลาง <ins>…</ins> กาหนดข้อความให้เป็นตัวแทรกขีดเส้นคล้ายเหมือนแท็ก <u>..</u> ใช้คกับ <del> ู่ <font face=”” color=”” size=””>….</font> กาหนดรูปแบบของตัวอักษร face คือ กาหนดชื่อแบบ อักษร color คือ กาหนดสีตัวอักษร size คือ กาหนดขนาดตัวอักษรได้ตั้งแต่ 1-7 <body bgcolor=””>…</body> ใช้สาหรับกาหนดสีพืนหลังให้กับเว็บเพจ ้ <hr witdh=”” size=”” color=””> กาหนดเส้นคั่นแนวนอน โดยกาหนดความยาว ความหนา และสีได้ สัญลักษณลักษณ์พิเศษ เช่น คาสั่งที่ใช้ © © ™™ ®® ดูได้จากตารางในเอกสาร List ลิสต์ รายการต่างๆ ที่ใช้สาหรับกาหนดราย ของข้อความ เช่น ให้เรียง 1 2 3 หรือ ใส่สัญลักษณ์ หน้าข้อความเป็นรายข้อ เหมือนกับ Microsoft word List แบบเรียงลำดับ <ol><li>....</li></ol> กาหนดรายการให้ พิมพ์ 1 2 3 หรือ i ii iii อัตโนมัติ List แบบไม่เรียงลำดับ <ul><li>....</li></ul> กาหนดรายการเป็นสัญลักษณ์พิเศษหัวข้อย่อย List แบบนิยำมควำมหมำย <dl><dt>....</dt><dd>…</dd></dl> กาหนดแบบนิยามคล้ายอธิบายคาศัพท์ Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] | 31
35.
32 << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 จงเขียนเว็บเพจด้วยภำษำ HTML เพื่อแสดงผลลัพธ์ตำมโจทย์ท่กำหนดให้ ี 1. บันทึกไฟล์ชื่อ EX21-เลขที่-ชื่อ.html (ภำษำอังกฤษ) กำหนดหัวเว็บให้เป็น เลขที่ ชื่อ-สกุล ห้อง ของนักเรียน (ภำษำไทย) Website: [ http://www.pakornkrit.com ]
36.
วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242 ครูปกรณ์กฤช
กันทะเลิศ >> 2. บันทึกไฟล์ชื่อ EX22-เลขที่-ชื่อ.html (ภำษำอังกฤษ) กำหนดหัวเว็บให้เป็น เลขที่ ชื่อ-สกุล ห้อง ของนักเรียน (ภำษำไทย) ฉันรักประเทศไทย font =3 ตัวเอง +3 ครอบครัว -3 ทาไมเราฯ font – Tahoma ขนาด 4 ไก่ยาง font - MS Sans Serif ่ Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] | 33
37.
34 << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 3. บันทึกไฟล์ชื่อ EX23-เลขที่-ชื่อ.html (ภำษำอังกฤษ) กำหนดหัวเว็บให้เป็น เลขที่ ชื่อ-สกุล ห้อง ของนักเรียน (ภำษำไทย) Youtube Gmail Website: [ http://www.pakornkrit.com ]
38.
วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242 ครูปกรณ์กฤช
กันทะเลิศ >> หน่วยที่ 2 เรื่อง โครงสร้ำงภำษำ HTML และกำรรูปแบบข้อควำม จำนวน 20 ข้อ จงทำเครื่องหมำย บนตัวเลือกที่ถูกต้องเพียงข้อเดียว 1. HTML ย่อมาจากอะไร ก. Height Technology maker location ข. Hexagram Thai mark Language ค. Hypertext Markup language ง. Hypertext Marker uniform Language 2. ข้อใดกล่าวถูกต้องเกี่ยวกับตั้งชื่อไฟล์ เว็บเพจ ไม่ถูกต้อง ก. ใช้ตัวอักษรภาษาอังกฤษ ข. ใช้ตัวเลข ค. ใช้สัญลักษณ์พิเศษ ได้ เช่น - _ $ ง. ควรตั้งชื่อเป็นภาษา และมีช่องว่าง 3. คาสั่งหรือแท็กใดต่อไปนีใช้สาหรับกาหนดข้อความแสดงบนหัวเว็บเบราเซอร์ ้ ก. <html>......</html> ข. <body>......</body> ค. <title>......</title> ง. <head>......</head> 4. คาสั่งใดต่อไปนีเป็นแท็กเดี่ยว หรือไม่จาเป็นต้องมีแท็กปิด ้ ก. <pre> ข. <b> ค. <br> ง. <hr> 5. แท็กใด คือส่วนที่ทาให้ เนื้อหา ข้อความ ภาพ ข้อมูลแสดงต้องเขียนในคาสั่งใด ก. <html>…</html> ข. <body>......</body> ค. <title>......</title> ง. <head>......</head> Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] | 35
39.
36 << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 6. คาสั่ง <BR> ใช้สาหรับ ก. ขึนย่อหน้าใหม่ ้ ข. ขึนบรรทัดใหม่ ้ ค. ขีดเส้นคั่น ง. เว้นวรรค 7. คาสั่งใด ใช้สาหรับ เพิ่มช่องว่าง ก. ␣ ข. ค. &psnb; ง. &space; 8. Tag ใช้สาหรับตีเส้นคั่นคือแท็กใด ก. <a lign=””>…</p> ข. <div>…</div> ค. <hr> ง. <pre>…</pre> 9. <p align=”justify”>โปรดเถิดรัก เหนื่อยเกินไปไหม </p> แสดงผลลัพธ์อย่างไร ก. ข้อความขึนย่อหน้าใหม่ ชิดขวา ้ ข. ข้อความขึนย่อหน้าใหม่ กึ่งกลาง ้ ค. ข้อความขึนย่อหน้าใหม่ จัดชิดขอบด้านหน้า-หลัง ้ ง. ข้อความขึนย่อหน้าใหม่ กระจาย ้ 10. กาหนดหัวเรื่อง ข้อใดต่อไปนี้ เป็นหัวข้อเรื่องที่ เล็กที่สุด ก. <h1> ข. <h3> ค. <h5> ง. <h6> Website: [ http://www.pakornkrit.com ]
40.
วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242 ครูปกรณ์กฤช
กันทะเลิศ >> 11. การจัดรูปแบบลักษณะข้อความให้เป็นไปตามที่กาหนด มีการเคาะ เว้นวรรค หรือ เป็นลักษณะ Tab ตามที่รูปแบบควรใช้แท็กใด ก. <li> ข. <pre> ค. <ol> ง. <p> 12. การระบุแท็กหมายเหตุ ในเอกสารเว็บเพจ ใช้แท็กใดต่อไปนี้ ก. <-- ข้อความ - -?> ข. <!-- ข้อความ - -> ค. <?-- ข้อความ - -> ง. <-- ข้อความ - -!> 13. แท็กใด ใช้สาหรับกาหนดรายการ ให้พิมพ์เลข 1 2 3 อัตโนมัติ ก. <il> ข. <ul> ค. <ol> ง. <dl> 14. แท็กใด ใช้สาหรับกาหนดรายการ ให้แสดงหัวข้อย่อยเป็น สัญลักษณ์ วงกลมใส สี่เหลี่ยม วงกลมทึบ ก. <ul> ข. <dt> ค. <ol> ง. <dl> 15. กรณีต้องการให้ แสดงหัวข้อย่อย แสดงสัญลักษณ์ แท็ก กาหนด type=”” รูปแบบใด ก. square ข. disc ค. circle ง. triangle Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] | 37
41.
38 << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 16. การให้คานิยาม สาหรับอธิบายศัพท์ ควรใช้แท็กใด ก. <ol> ข. <dl> ค. <dt> ง. <li> 17. ข้อใดต่อไปนีให้ความหมายของแท็กได้ถูกต้อง ้ ก. <b> ตัวหนา <i> ขีดเส้นใต้ ข. <u> ตัวขีดเส้นใต้ <sub> ตัวยก ค. <sup> ตัวยก <del> ตัวขีดฆ่า ง. <u> ตัวเอียง <b> ตัวหนา 18. <b><i>คนอ่านน่ารัก</b></i> จากแท็กดังกล่าวแสดงผลลัพธ์ที่ถูกต้องอย่างไร ก. คนน่ำรัก ข. คนน่ารัก ค. คนน่ารัก ง. คนน่ารัก 19. ฉัน<sub>รัก<sub/>เธอ<sub>มาก</sub> จากแท็กดังกล่าวแสดงผลลัพธ์ที่ถูกต้องอย่างไร ก. ฉันรักเธอมาก ข. ฉันรักเธอมาก ค. ฉันรักเธอมาก ง. ฉันรักเธอมาก 20. <font face=”” color=”” size=””>…..</font> จากแท็กนีข้อใดกล่าว ผิด ้ ก. face ใช้สาหรับใช้แบบตัวอักษร ข. size ใช้สาหรับกาหนดขนาดตัวอักษร ค. color ใช้สาหรับใส่สีตัวอักษรเป็นรหัสสีเท่านั้น ง. font แท็กใช้กาหนดรูปตัวอักษรให้มลักษณะต่างๆ ี Website: [ http://www.pakornkrit.com ]
42.
วิชาการออกแบบและพัฒนาเว็บเพจ ง 31242 ครูปกรณ์กฤช
กันทะเลิศ >> บรรณำนุกรม โรงเรียนยุพราชวิทยาลัย เชียงใหม่.[ออนไลน์] http://www.computerhope.com/htmcolor.htm ณัชติพงศ์ อูทอง. การสร้างเว็บเพจ (ภาษา HTML). กรุงทพฯ : บริษัท สานักพิมพ์เอมพันธ์ จากัด, 2548. ฝ่ายตาราวิชาการคอมพิวเตอร์. การสร้างเว็บเพจ (HTML). กรุงเทพฯ : ซีเอ็ดยูเคชั่น, 2555. สืบค้นเมื่อวันที่ 26 พฤศจิกายน 2556. Code สี โค้ดสี [ออนไลน์] http://xn--code-3jovd.plus.in.th สืบค้นเมื่อวันที่ 28 พฤศจิกายน 2556. HTML color codes and names. [ออนไลน์] . http://www.computerhope.com/htmcolor.htm สืบค้นเมื่อวันที่ 26 พฤศจิกายน 2556. HTML. [ออนไลน์] . http://code.function.in.th/html สืบค้นเมื่อวันที่ 26 พฤศจิกายน 2556. ********************* Website: [โครงสร้างภาษา HTML และการจัดการกับข้อความ] | 39
43.
40 << วิชำกำรออกแบบและพัฒนำเว็บเพจ ง
31242 ชื่อ - สกุล วัน เดือน ปีเกิด เลขที่ตำแหน่ง สถำนที่อยู่ปัจจุบัน ตำแหน่ง สถำนทีทำงำน ่ นายปกรณ์กฤช กันทะเลิศ 6 กันยายน 2523 3186 816/9 หมู่ 17 ต.เมืองพาน อ.พาน จ.เชียงราย ครู วิทยฐานะ ชานาญการ โรงเรียนพานพิทยาคม อ.พาน จ.เชียงราย สังกัดสานักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 36 ประวัตกำรศึกษำ ิ 2544 E-mail: Website: บธ.บ. (เทคโนโลยีสารสนสนเทศธุรกิจ) มหาวิทยาลัยธุรกิจบัณฑิตย์ 2548 ป.บัณฑิต ประกาศนียบัตรบัณฑิต (วิชาชีพครู) มหาวิทยาลัยราชภัฏเชียงราย 2553 วท.ม. (เทคโนโลยีอินเทอร์เน็ต และสารสนเทศ) มหาวิทยาลัยนเรศวร pakornkrit@live.com http://www.pakornkrit.com Website: [ http://www.pakornkrit.com ]
Descargar ahora