SlideShare ist ein Scribd-Unternehmen logo
1 von 20
Downloaden Sie, um offline zu lesen
ความรู้พื้นฐานเกี่ยวกับ
ภาษา HTML
โครงสร้างของเว็บไซต์
เว็บไซต์ (Web Site) คือเครื่อง
คอมพิวเตอร์ที่ทาหน้าที่เป็นเว็บเซิร์ฟเวอร์
ซึ่งเว็บไซต์แต่ละเว็บไซต์ จะประกอบไปด้วย
ไฟล์เว็บเพจมากมายหลาย ๆ ไฟล์ จะมีการ
เชื่อมโยงกันและกัน แต่จะมีเพียงหนึ่งไฟล์
เท่านั้นที่เป็นเว็บเพจไฟล์แรกที่จะแสดงก่อน
ทุกครั้งเมื่อมีผู้เข้ามาสูเว็บไซต์
โครงสร้างของเว็บไซต์ (ต่อ)
เรียกไฟล์เว็บเพจที่เป็นไฟล์แรกของการ
แสดงผล ว่า โฮมเพจ ( Home page )
โดยทั่วไปนิยมกาหนดชื่อไฟล์ ที่เป็นโฮมเพจ
ว่า index.html หรือ
default.html
โครงสร้างของเว็บไซต์ แบ่งได้ 2 มุมมอง
1. โครงสร้างของเว็บไซต์ในมุมมองของการ
จัดการไฟล์เว็บเพจ
เป็นโครงสร้างของเว็บไซต์ที่เน้นมุมมอง
ในด้านของการจัดเก็บไฟล์เว็บเพจ
แบ่งเป็นโฟลเดอร์ แต่ละโฟลเดอร์ก็จะมี
โฟลเดอร์ย่อย และไฟล์ต่าง ๆ
ตัวอย่างโครงสร้างเว็บไซต์ มุมมองการจัดการไฟล์เว็บเพจ
Index.html (โฮมเพจ)
2.โครงสร้างเว็บไซต์ในมุมมองการเชื่อมโยงไฟล์
เว็บเพจ
เป็นโครงสร้างของเว็บไซต์ที่เน้นการเชื่อมโยงของ
ไฟล์เว็บเพจต่าง ๆ ภายในเว็บไซต์เพื่อแสดงให้
เห็นว่าไฟล์เว็บเพจแต่ละไฟล์เชื่อมโยงกันอย่างไร
อาจเรียกโครงสร้างในมุมมองนี้ ว่า แผนผังไซต์
หรือ Site Map
ตัวอย่างโครงสร้างเว็บไซต์ มุมมองการเชื่อมโยงเว็บเพจ
index.html
p1.html p2.html p3.html p4.html
p11.html p12.html p21.html p31.html p32.html p41.html
ภาษา HTML คืออะไร
HTML ย่อมากจากคาว่า HyperText
Markup Language เป็นภาษาสาหรับ
กาหนดรูปแบบการแสดงผลข้อความ รูปแบบไฟล์
ของภาษา HTML ที่เรียกโดยทั่วไปว่า ไฟล์เว็บ
เพจ จะมีนามสกุลหรือส่วนขยาย .html หรือ
.htm เช่น index.html เป็นต้น
ภาษา HTML คืออะไร (ต่อ)
โดยไฟล์ HTML จะเป็นไฟล์แบบเท็กซ์ไฟล์
(Text File ) คือ เป็นไฟล์ที่สามารถเปิดอ่าน
ได้ด้วยโปรแกรมเท็กอิดิเตอร์ (Text Editor)
ทั่วไป เช่น Notepad,Edit Plus เป็นต้น
รูปแบบภาษา HTML
ภาษา HTML ประกอบด้วยคาสั่งเพื่อการ
แสดงผลข้อความต่าง ๆ มากมาก คาสั่งของภาษา
HTML เรียกว่า คาสั่ง แท็ก (Tag) โดยชื่อ
คาสั่ง จะต้องอยู่ภายในเครื่องหมาย “< >”
ข้อกาหนดการเขียนคาสั่งภาษา HTML
1. คาสั่งแท็กทั่วไปจะประกอบด้วยแท็กเปิดและแท็ก
ปิด แท็กเปิดจะมีชื่อคาสั่งอยู่ระหว่าง เครื่องหมาย
< > แท็กปิดจะมีเครื่องหมาย / อยู่หน้าชื่อคาสั่ง
และอยู่ระหว่างเครื่องหมาย < > เช่นกัน
2. ระหว่าง แท็กเปิดและแท็กปิด คือ ข้อความที่
ต้องการแสดงผลด้วยคาสั่ง แท็กนั้น ๆ
<ชื่อคาสั่ง> ข้อความที่ต้องการแสดงผล </ชื่อ
คาสั่ง>
หรือ
<ชื่อคาสั่ง>
ข้อความที่ต้องการแสดงผล
</ชื่อคาสั่ง>
3. บางคาสั่งอาจมีเพียงแท็กเปิด แต่ไม่มีแท็กปิด
เช่น คาสั่ง ขึ้นบรรทัดใหม่ <br>
4. คาสั่งแท็กแต่ละคาสั่ง อาจมีคุณสมบัติเพิ่มเติม
ด้วยหรือ ไม่ก็ได้ เรียกว่า แอททริบิวต์
(Attribute)
ตัวอย่างที่ 1
<font color=“red”>
ภาษา Html
</font>
5. ชื่อคาสั่งของภาษา html จะเป็นตัวอักษรพิมพ์
ใหญ่หรือเล็กก็มีความหมายเหมือนกัน เช่น
<HR> <hr> เป็นต้น
โครงสร้างไฟล์ HTML (ไฟล์เว็บเพจ)
โครงสร้างไฟล์ HTML ที่เป็นมาตรฐานจะเริ่มต้น
ไฟล์ด้วยคาสั่ง < HTML > และจบด้วยไฟล์
</ HTML >
โครงสร้างไฟล์ HTML มีดังนี้
<html>
<head>
<title> ข้อความแสดงบนหัวเว็บเพจ </title>
</head>
<body>
ข้อความที่ต้องการแสดงผลบนหน้าจอ
</body>
</html>
โครงสร้างไฟล์ html แบ่งออกเป็น 2 ส่วนดังนี้
ส่วนที่ 1 ส่วนของ head
เป็นส่วนที่ใช้กาหนดรายละเอียดทั่วไปของ
ไฟล์ html โดยรายละเอียดต่าง ๆ ที่กาหนดจะ
ไม่ถูกแสดงในโปรแกรมบราวเซอร์ และใช้กาหนด
ข้อความที่ใช้แสดงบนแถบหัวเรื่อง โดยใช้คาสั่ง
<title>…………..</title>
ส่วนที่ 2 ส่วนของ body
เป็นส่วนใส่ข้อความ รูปภาพ กาหนด
รายละเอียดการแสดงผล รวมถึงคาสั่งอื่น ๆ ของ
ภาษา HTML เช่น การกาหนดสีการแสดงผล
การสร้างตาราง เป็นต้น เพื่อแสดงผลในโปรแกรม
เว็บบราวเซอร์
โปรแกรมที่ใช้สร้างเว็บเพจตามมาตรฐาน HTML
แบ่งได้ 2 ประเภท
1. โปรแกรมอิดิเตอร์ทั่วไป
เป็นโปรแกรมที่ใช้สาหรับพิมพ์ไฟล์ทั่วไป
บันทึกไฟล์เป็นแบบ เท็กซ์ไฟล์ เช่น
Notepad,EditPlus เป็นต้น
โปรแกรมที่ใช้สร้างเว็บเพจตามมาตรฐาน HTML
2. โปรแกรมสาเร็จรูปสาหรับสร้างเว็บเพจ
เป็นโปรแกรมสาเร็จรูปที่พัฒนามาเพื่อใช้
เป็นเครื่องมือสาหรับการสร้างเว็บเพจโดยเฉพาะ
เช่น Macromedia Dreamweaver
,Micorsoft Frontpage เป็นต้น

Weitere ähnliche Inhalte

Andere mochten auch

Samson Manufacturing Case Study (032815)
Samson Manufacturing Case Study (032815)Samson Manufacturing Case Study (032815)
Samson Manufacturing Case Study (032815)
Rich St. Rose, MBA, PMP
 
E-commerceG1-Case3 Amazon
E-commerceG1-Case3 AmazonE-commerceG1-Case3 Amazon
E-commerceG1-Case3 Amazon
newnwan
 
Control What You Can Control
Control What You Can ControlControl What You Can Control
Control What You Can Control
Michael Cassidy
 
อังสุมา ภาระจ่า
อังสุมา ภาระจ่าอังสุมา ภาระจ่า
อังสุมา ภาระจ่า
Aungsuma Paraja
 
Search engine
Search engineSearch engine
Search engine
kacherry
 

Andere mochten auch (20)

คู่มือการใช้งาน Google
คู่มือการใช้งาน  Googleคู่มือการใช้งาน  Google
คู่มือการใช้งาน Google
 
Introduction to On-line Documemt Lec02
Introduction to On-line Documemt  Lec02Introduction to On-line Documemt  Lec02
Introduction to On-line Documemt Lec02
 
Presentation seo
Presentation seoPresentation seo
Presentation seo
 
subport
subportsubport
subport
 
Criminal penalties2
Criminal penalties2Criminal penalties2
Criminal penalties2
 
มาตราฐาน+..
มาตราฐาน+..มาตราฐาน+..
มาตราฐาน+..
 
Android programming
Android programmingAndroid programming
Android programming
 
Samson Manufacturing Case Study (032815)
Samson Manufacturing Case Study (032815)Samson Manufacturing Case Study (032815)
Samson Manufacturing Case Study (032815)
 
Exemplars
ExemplarsExemplars
Exemplars
 
E-commerceG1-Case3 Amazon
E-commerceG1-Case3 AmazonE-commerceG1-Case3 Amazon
E-commerceG1-Case3 Amazon
 
Control What You Can Control
Control What You Can ControlControl What You Can Control
Control What You Can Control
 
Blogs and Wikis for Reflection and Collaboration
Blogs and Wikis for Reflection and CollaborationBlogs and Wikis for Reflection and Collaboration
Blogs and Wikis for Reflection and Collaboration
 
Introduction to On-line Documemt Lab 4
Introduction to On-line Documemt Lab 4Introduction to On-line Documemt Lab 4
Introduction to On-line Documemt Lab 4
 
Level One - Unlock Your Career in Manufacturing - Sample
Level One - Unlock Your Career in Manufacturing - SampleLevel One - Unlock Your Career in Manufacturing - Sample
Level One - Unlock Your Career in Manufacturing - Sample
 
อังสุมา ภาระจ่า
อังสุมา ภาระจ่าอังสุมา ภาระจ่า
อังสุมา ภาระจ่า
 
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 05
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 05การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 05
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 05
 
Search engine
Search engineSearch engine
Search engine
 
Web site
Web siteWeb site
Web site
 
Introduction to On-line Documemt Lect03 E Commerce
Introduction to On-line Documemt  Lect03 E CommerceIntroduction to On-line Documemt  Lect03 E Commerce
Introduction to On-line Documemt Lect03 E Commerce
 
Unit 4
Unit 4Unit 4
Unit 4
 

Ähnlich wie ความรู้เกี่ยวกับ Html

หน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmlหน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 html
devilp Nnop
 
อบรม Ict เพื่อการบริหาร 12
อบรม Ict เพื่อการบริหาร   12อบรม Ict เพื่อการบริหาร   12
อบรม Ict เพื่อการบริหาร 12
yaonaja
 
ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจ
ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจ
ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจ
Krunicky Rattanapachai
 
Chapter4
Chapter4Chapter4
Chapter4
aumtall
 
ออกแบบ
ออกแบบออกแบบ
ออกแบบ
JiJee Pj
 
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
Samorn Tara
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
jompon
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
jompon
 

Ähnlich wie ความรู้เกี่ยวกับ Html (17)

61สรุปเว็บไซต์.pptx
61สรุปเว็บไซต์.pptx61สรุปเว็บไซต์.pptx
61สรุปเว็บไซต์.pptx
 
Website
WebsiteWebsite
Website
 
หน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmlหน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 html
 
Pai02
Pai02Pai02
Pai02
 
4 html
4 html4 html
4 html
 
อบรม Ict เพื่อการบริหาร 12
อบรม Ict เพื่อการบริหาร   12อบรม Ict เพื่อการบริหาร   12
อบรม Ict เพื่อการบริหาร 12
 
PHP & Dreamweaver ch04 basic_html
PHP & Dreamweaver  ch04 basic_htmlPHP & Dreamweaver  ch04 basic_html
PHP & Dreamweaver ch04 basic_html
 
Web dreamcs5
Web dreamcs5Web dreamcs5
Web dreamcs5
 
Lernning 13
Lernning 13Lernning 13
Lernning 13
 
E book4
E book4E book4
E book4
 
ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจ
ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจ
ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บเพจ
 
Chapter4
Chapter4Chapter4
Chapter4
 
1 html
1 html1 html
1 html
 
ออกแบบ
ออกแบบออกแบบ
ออกแบบ
 
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
ใบความรู้ที่ 2.2 รูปแบบโครงสร้างและการออกแบบ
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
 

Mehr von ไกรลาศ จิบจันทร์

วิสัยทัศน์ พันธกิจ และเป้าประสงค์
วิสัยทัศน์ พันธกิจ และเป้าประสงค์วิสัยทัศน์ พันธกิจ และเป้าประสงค์
วิสัยทัศน์ พันธกิจ และเป้าประสงค์
ไกรลาศ จิบจันทร์
 
ความรู้เบื้องต้นเกี่ยวกับโปรแกรม Adobe photoshop cs
ความรู้เบื้องต้นเกี่ยวกับโปรแกรม Adobe photoshop csความรู้เบื้องต้นเกี่ยวกับโปรแกรม Adobe photoshop cs
ความรู้เบื้องต้นเกี่ยวกับโปรแกรม Adobe photoshop cs
ไกรลาศ จิบจันทร์
 

Mehr von ไกรลาศ จิบจันทร์ (20)

ใบความรู้ เรื่อง การสร้างเมนูหลัก
ใบความรู้ เรื่อง การสร้างเมนูหลักใบความรู้ เรื่อง การสร้างเมนูหลัก
ใบความรู้ เรื่อง การสร้างเมนูหลัก
 
ซอร์ฟแวร์และการเลือกใช้งาน
ซอร์ฟแวร์และการเลือกใช้งานซอร์ฟแวร์และการเลือกใช้งาน
ซอร์ฟแวร์และการเลือกใช้งาน
 
Banner
BannerBanner
Banner
 
คำศัพท์ ต้องรู้
คำศัพท์ ต้องรู้คำศัพท์ ต้องรู้
คำศัพท์ ต้องรู้
 
สรุปคำศัพท์ทางการบริหาร
สรุปคำศัพท์ทางการบริหารสรุปคำศัพท์ทางการบริหาร
สรุปคำศัพท์ทางการบริหาร
 
งานนำเสนอแรงจูงใจ กลุ่ม 2
งานนำเสนอแรงจูงใจ กลุ่ม 2 งานนำเสนอแรงจูงใจ กลุ่ม 2
งานนำเสนอแรงจูงใจ กลุ่ม 2
 
ระบบคอมพิวเตอร์
ระบบคอมพิวเตอร์ ระบบคอมพิวเตอร์
ระบบคอมพิวเตอร์
 
เอกสารประกอบการสอน Dreamweaver8 ม.6
เอกสารประกอบการสอน  Dreamweaver8 ม.6เอกสารประกอบการสอน  Dreamweaver8 ม.6
เอกสารประกอบการสอน Dreamweaver8 ม.6
 
คำอธิบายรายวิชา
คำอธิบายรายวิชาคำอธิบายรายวิชา
คำอธิบายรายวิชา
 
การเปิดใช้งานโปรแกรม
การเปิดใช้งานโปรแกรมการเปิดใช้งานโปรแกรม
การเปิดใช้งานโปรแกรม
 
ผลการเรียนรู้
ผลการเรียนรู้ผลการเรียนรู้
ผลการเรียนรู้
 
การสร้างไซต์ใหม่
การสร้างไซต์ใหม่การสร้างไซต์ใหม่
การสร้างไซต์ใหม่
 
วิสัยทัศน์ พันธกิจ และเป้าประสงค์
วิสัยทัศน์ พันธกิจ และเป้าประสงค์วิสัยทัศน์ พันธกิจ และเป้าประสงค์
วิสัยทัศน์ พันธกิจ และเป้าประสงค์
 
ข้อมูลบุคลากร1
ข้อมูลบุคลากร1ข้อมูลบุคลากร1
ข้อมูลบุคลากร1
 
Frameset
FramesetFrameset
Frameset
 
การสร้างเฟรมเซต
การสร้างเฟรมเซตการสร้างเฟรมเซต
การสร้างเฟรมเซต
 
ความรู้เบื้องต้นเกี่ยวกับโปรแกรม Adobe photoshop cs
ความรู้เบื้องต้นเกี่ยวกับโปรแกรม Adobe photoshop csความรู้เบื้องต้นเกี่ยวกับโปรแกรม Adobe photoshop cs
ความรู้เบื้องต้นเกี่ยวกับโปรแกรม Adobe photoshop cs
 
การสร้างปกสมุดโรงเรียน
การสร้างปกสมุดโรงเรียนการสร้างปกสมุดโรงเรียน
การสร้างปกสมุดโรงเรียน
 
Photosho cs
Photosho csPhotosho cs
Photosho cs
 
ความรู้เกี่ยวกับ Html
ความรู้เกี่ยวกับ Htmlความรู้เกี่ยวกับ Html
ความรู้เกี่ยวกับ Html
 

ความรู้เกี่ยวกับ Html