SlideShare ist ein Scribd-Unternehmen logo
1 von 6
Downloaden Sie, um offline zu lesen
HTML Introduction
เรียบเรียงโดย ชายดาคอมพิวเตอร์
What is HTML?
 HTML คืออะไร ?
HTML เป็นภาษามาร์กอัปสาหรับการอธิบายเอกสารเว็บ (หน้าเว็บ หรือ เว็บเพจ).
* HTML ย่อมาจาก Hyper Text Markup Language
* ภาษามาร์กอัปเป็นชุดของแท็กมาร์กอัป
* เอกสาร HTML จะมีการอธิบายโดยการใช้แท็ก
* แต่ละแท็กจะอธิบายเนื้อหาของเอกสารที่แตกต่างกัน
HTML Example
<!DOCTYPE html>
<html>
<head>
<title> Page Title </title>
</head>
<body>
<h1> My First Heading </h1>
<p> My first paragraph. </p>
</body>
</html>
Example Explained
 อธิบายตัวอย่างโค้ดด้านบน
* ประกาศ DOCTYPE กาหนดประเภทเอกสารที่จะเป็น HTML
* ข้อความที่อยู่ระหว่าง <html> และ </ html> อธิบายเอกสาร HTML
* ข้อความที่อยู่ระหว่าง <head> และ </ head> ให้ข้อมูลเกี่ยวกับเอกสาร
* ข้อความที่อยู่ระหว่าง <title> และ </ title> ให้ชื่อของเอกสาร
* ข้อความที่อยู่ระหว่าง <body> และ </ body> อธิบายเนื้อหาของหน้าเว็บที่มองเห็นได้
* ข้อความที่อยู่ระหว่าง <h1> และ </ h1> อธิบายหัวข้อ
* ข้อความที่อยู่ระหว่าง <p> และ </ p> อธิบายวรรค
!--- การใช้คาอธิบายนี้ เว็บเบราเซอร์สามารถแสดงข้อความที่มีในส่วน heading และ
paragraph
Web Browsers
 ผลลัพธ์ ในเว็บบราวเซอร์
HTML Page Structure
 โครงสร้าง HTML

Weitere ähnliche Inhalte

Andere mochten auch

ฟรอยด์
ฟรอยด์ฟรอยด์
ฟรอยด์
pattamasatun
 
Duffy, Daniel J. Current Resume
Duffy, Daniel J. Current ResumeDuffy, Daniel J. Current Resume
Duffy, Daniel J. Current Resume
danduffy49
 
Duffy, Daniel J. Resume
Duffy, Daniel J. ResumeDuffy, Daniel J. Resume
Duffy, Daniel J. Resume
danduffy49
 
Program kerja tim citarum 2012 25 juni
Program kerja tim citarum 2012  25 juniProgram kerja tim citarum 2012  25 juni
Program kerja tim citarum 2012 25 juni
Citarum
 
Rodando *qualquer coisa* na nuvem com OpenShift, o PaaS open source da Red Hat
Rodando *qualquer coisa* na nuvem com OpenShift, o PaaS open source da Red HatRodando *qualquer coisa* na nuvem com OpenShift, o PaaS open source da Red Hat
Rodando *qualquer coisa* na nuvem com OpenShift, o PaaS open source da Red Hat
Fabiano Franz
 
PYP_APA draft Final ZAC
PYP_APA draft Final ZACPYP_APA draft Final ZAC
PYP_APA draft Final ZAC
Zachary Lette
 
ใบงานสำรวจตนเองแบร์ M6
ใบงานสำรวจตนเองแบร์ M6ใบงานสำรวจตนเองแบร์ M6
ใบงานสำรวจตนเองแบร์ M6
4095340953
 

Andere mochten auch (20)

(2013-05-03) AudioLazy - Slides
(2013-05-03) AudioLazy - Slides(2013-05-03) AudioLazy - Slides
(2013-05-03) AudioLazy - Slides
 
Love
LoveLove
Love
 
ฟรอยด์
ฟรอยด์ฟรอยด์
ฟรอยด์
 
Meclab 夏遊 美食部2
Meclab 夏遊 美食部2Meclab 夏遊 美食部2
Meclab 夏遊 美食部2
 
Alluvia Specialist Winery
Alluvia Specialist WineryAlluvia Specialist Winery
Alluvia Specialist Winery
 
圖解高頻交易系統的運作狀況
圖解高頻交易系統的運作狀況圖解高頻交易系統的運作狀況
圖解高頻交易系統的運作狀況
 
Duffy, Daniel J. Current Resume
Duffy, Daniel J. Current ResumeDuffy, Daniel J. Current Resume
Duffy, Daniel J. Current Resume
 
Duffy, Daniel J. Resume
Duffy, Daniel J. ResumeDuffy, Daniel J. Resume
Duffy, Daniel J. Resume
 
Program kerja tim citarum 2012 25 juni
Program kerja tim citarum 2012  25 juniProgram kerja tim citarum 2012  25 juni
Program kerja tim citarum 2012 25 juni
 
Kiểm toán Phương Đông ICA
Kiểm toán Phương Đông ICA Kiểm toán Phương Đông ICA
Kiểm toán Phương Đông ICA
 
Build, Test, Deploy, Run, Scale! Sua App na Nuvem com OpenShift, o PaaS da Re...
Build, Test, Deploy, Run, Scale! Sua App na Nuvem com OpenShift, o PaaS da Re...Build, Test, Deploy, Run, Scale! Sua App na Nuvem com OpenShift, o PaaS da Re...
Build, Test, Deploy, Run, Scale! Sua App na Nuvem com OpenShift, o PaaS da Re...
 
Hizb 27
Hizb 27Hizb 27
Hizb 27
 
Hizb 43
Hizb 43Hizb 43
Hizb 43
 
Hizb 48
Hizb 48Hizb 48
Hizb 48
 
Future of shipbuilding - Denis Morais
Future of shipbuilding - Denis MoraisFuture of shipbuilding - Denis Morais
Future of shipbuilding - Denis Morais
 
Boletim 1 macro 14, 15 e 16 iguatu atualizado(1)
Boletim 1 macro 14, 15 e 16   iguatu atualizado(1)Boletim 1 macro 14, 15 e 16   iguatu atualizado(1)
Boletim 1 macro 14, 15 e 16 iguatu atualizado(1)
 
Manejo de seguridad en internet (13)
Manejo de seguridad en internet (13)Manejo de seguridad en internet (13)
Manejo de seguridad en internet (13)
 
Rodando *qualquer coisa* na nuvem com OpenShift, o PaaS open source da Red Hat
Rodando *qualquer coisa* na nuvem com OpenShift, o PaaS open source da Red HatRodando *qualquer coisa* na nuvem com OpenShift, o PaaS open source da Red Hat
Rodando *qualquer coisa* na nuvem com OpenShift, o PaaS open source da Red Hat
 
PYP_APA draft Final ZAC
PYP_APA draft Final ZACPYP_APA draft Final ZAC
PYP_APA draft Final ZAC
 
ใบงานสำรวจตนเองแบร์ M6
ใบงานสำรวจตนเองแบร์ M6ใบงานสำรวจตนเองแบร์ M6
ใบงานสำรวจตนเองแบร์ M6
 

Ähnlich wie บทที่ 2 html introduction

หน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmlหน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 html
devilp Nnop
 
Session1 part2
Session1 part2Session1 part2
Session1 part2
maovkh
 
เนื้อหา Html
เนื้อหา Htmlเนื้อหา Html
เนื้อหา Html
Rungnapha Naka
 
การสอนเขียนHtml
การสอนเขียนHtmlการสอนเขียนHtml
การสอนเขียนHtml
chukiat008
 
หน่วยที่ 2
หน่วยที่ 2หน่วยที่ 2
หน่วยที่ 2
Ton TC Tmsb
 
2.โครงสร้างคำสั่งของ html
2.โครงสร้างคำสั่งของ html2.โครงสร้างคำสั่งของ html
2.โครงสร้างคำสั่งของ html
bimteach
 
รายงาน
รายงานรายงาน
รายงาน
kongdang
 
รายงาน
รายงานรายงาน
รายงาน
pim1122
 
รายงาน
รายงานรายงาน
รายงาน
pim1122
 
รายงาน เรื่อง css
รายงาน เรื่อง cssรายงาน เรื่อง css
รายงาน เรื่อง css
nongnan
 
รายงาน
รายงานรายงาน
รายงาน
noopim
 
รายงาน
รายงานรายงาน
รายงาน
kongdang
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
Samorn Tara
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
Samorn Tara
 
ใบความรู้ที่ 2
ใบความรู้ที่ 2ใบความรู้ที่ 2
ใบความรู้ที่ 2
POmp POmpomp
 

Ähnlich wie บทที่ 2 html introduction (20)

หน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmlหน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 html
 
Html 2
Html 2Html 2
Html 2
 
Session1 part2
Session1 part2Session1 part2
Session1 part2
 
เริ่มต้นสร้างเอกสาร HTML
เริ่มต้นสร้างเอกสาร HTMLเริ่มต้นสร้างเอกสาร HTML
เริ่มต้นสร้างเอกสาร HTML
 
เนื้อหา Html
เนื้อหา Htmlเนื้อหา Html
เนื้อหา Html
 
Html
HtmlHtml
Html
 
การสอนเขียนHtml
การสอนเขียนHtmlการสอนเขียนHtml
การสอนเขียนHtml
 
หน่วยที่ 2
หน่วยที่ 2หน่วยที่ 2
หน่วยที่ 2
 
Lernning 13
Lernning 13Lernning 13
Lernning 13
 
2.โครงสร้างคำสั่งของ html
2.โครงสร้างคำสั่งของ html2.โครงสร้างคำสั่งของ html
2.โครงสร้างคำสั่งของ html
 
รายงาน
รายงานรายงาน
รายงาน
 
รายงาน
รายงานรายงาน
รายงาน
 
รายงาน
รายงานรายงาน
รายงาน
 
รายงาน เรื่อง css
รายงาน เรื่อง cssรายงาน เรื่อง css
รายงาน เรื่อง css
 
รายงาน
รายงานรายงาน
รายงาน
 
รายงาน
รายงานรายงาน
รายงาน
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
ใบความรู้ที่ 2
ใบความรู้ที่ 2ใบความรู้ที่ 2
ใบความรู้ที่ 2
 
HTML
HTMLHTML
HTML
 

Mehr von Nattipong Siangyen

Mehr von Nattipong Siangyen (20)

บทที่ 2 ประเภทของคอมพิวเตอร์ (ตามราคาและความเร็ว)
บทที่ 2 ประเภทของคอมพิวเตอร์ (ตามราคาและความเร็ว)บทที่ 2 ประเภทของคอมพิวเตอร์ (ตามราคาและความเร็ว)
บทที่ 2 ประเภทของคอมพิวเตอร์ (ตามราคาและความเร็ว)
 
บทที่ 1 ความหมายและประเภทของคอมพิวเตอร์
บทที่ 1 ความหมายและประเภทของคอมพิวเตอร์บทที่ 1 ความหมายและประเภทของคอมพิวเตอร์
บทที่ 1 ความหมายและประเภทของคอมพิวเตอร์
 
บทที่ 2 ประเภทของคอมพิวเตอร์ (ตามราคาและความเร็ว)
บทที่ 2 ประเภทของคอมพิวเตอร์ (ตามราคาและความเร็ว)บทที่ 2 ประเภทของคอมพิวเตอร์ (ตามราคาและความเร็ว)
บทที่ 2 ประเภทของคอมพิวเตอร์ (ตามราคาและความเร็ว)
 
บทที่ 1 ความหมายและประเภทของคอมพิวเตอร์
บทที่ 1 ความหมายและประเภทของคอมพิวเตอร์บทที่ 1 ความหมายและประเภทของคอมพิวเตอร์
บทที่ 1 ความหมายและประเภทของคอมพิวเตอร์
 
คำสั่ง Sql เบื้องต้น(delete)
คำสั่ง Sql เบื้องต้น(delete)คำสั่ง Sql เบื้องต้น(delete)
คำสั่ง Sql เบื้องต้น(delete)
 
คำสั่ง Sql เบื้องต้น(update)
คำสั่ง Sql เบื้องต้น(update)คำสั่ง Sql เบื้องต้น(update)
คำสั่ง Sql เบื้องต้น(update)
 
คำสั่ง Sql เบื้องต้น(select)
คำสั่ง Sql เบื้องต้น(select)คำสั่ง Sql เบื้องต้น(select)
คำสั่ง Sql เบื้องต้น(select)
 
คำสั่ง Sql เบื้องต้น(insert into)
คำสั่ง Sql เบื้องต้น(insert into)คำสั่ง Sql เบื้องต้น(insert into)
คำสั่ง Sql เบื้องต้น(insert into)
 
คำสั่ง Sql เบื้องต้น(create table)
คำสั่ง Sql เบื้องต้น(create table)คำสั่ง Sql เบื้องต้น(create table)
คำสั่ง Sql เบื้องต้น(create table)
 
คำสั่ง Sql เบื้องต้น(create db)
คำสั่ง Sql เบื้องต้น(create db)คำสั่ง Sql เบื้องต้น(create db)
คำสั่ง Sql เบื้องต้น(create db)
 
09 ชนิดข้อมูล
09 ชนิดข้อมูล09 ชนิดข้อมูล
09 ชนิดข้อมูล
 
07 e r model
07 e r model07 e r model
07 e r model
 
06 แบบจำลองฐานข้อมูลเชิงสัมพันธ์
06 แบบจำลองฐานข้อมูลเชิงสัมพันธ์06 แบบจำลองฐานข้อมูลเชิงสัมพันธ์
06 แบบจำลองฐานข้อมูลเชิงสัมพันธ์
 
05 ภาษาที่ใช้ในระบบการจัดการฐานข้อมูล
05 ภาษาที่ใช้ในระบบการจัดการฐานข้อมูล05 ภาษาที่ใช้ในระบบการจัดการฐานข้อมูล
05 ภาษาที่ใช้ในระบบการจัดการฐานข้อมูล
 
03 ชนิดของความสัมพันธ์
03 ชนิดของความสัมพันธ์03 ชนิดของความสัมพันธ์
03 ชนิดของความสัมพันธ์
 
02 ความรู้เบื้องต้นฐานข้อมูล
02 ความรู้เบื้องต้นฐานข้อมูล02 ความรู้เบื้องต้นฐานข้อมูล
02 ความรู้เบื้องต้นฐานข้อมูล
 
01 ข้อมูลและสารสนเทศ
01 ข้อมูลและสารสนเทศ01 ข้อมูลและสารสนเทศ
01 ข้อมูลและสารสนเทศ
 
01ข้อมูลและสารสนเทศ
01ข้อมูลและสารสนเทศ01ข้อมูลและสารสนเทศ
01ข้อมูลและสารสนเทศ
 
10 กรณีศึกษา
10 กรณีศึกษา10 กรณีศึกษา
10 กรณีศึกษา
 
อ้างอิง
อ้างอิงอ้างอิง
อ้างอิง
 

บทที่ 2 html introduction

  • 2. What is HTML?  HTML คืออะไร ? HTML เป็นภาษามาร์กอัปสาหรับการอธิบายเอกสารเว็บ (หน้าเว็บ หรือ เว็บเพจ). * HTML ย่อมาจาก Hyper Text Markup Language * ภาษามาร์กอัปเป็นชุดของแท็กมาร์กอัป * เอกสาร HTML จะมีการอธิบายโดยการใช้แท็ก * แต่ละแท็กจะอธิบายเนื้อหาของเอกสารที่แตกต่างกัน
  • 3. HTML Example <!DOCTYPE html> <html> <head> <title> Page Title </title> </head> <body> <h1> My First Heading </h1> <p> My first paragraph. </p> </body> </html>
  • 4. Example Explained  อธิบายตัวอย่างโค้ดด้านบน * ประกาศ DOCTYPE กาหนดประเภทเอกสารที่จะเป็น HTML * ข้อความที่อยู่ระหว่าง <html> และ </ html> อธิบายเอกสาร HTML * ข้อความที่อยู่ระหว่าง <head> และ </ head> ให้ข้อมูลเกี่ยวกับเอกสาร * ข้อความที่อยู่ระหว่าง <title> และ </ title> ให้ชื่อของเอกสาร * ข้อความที่อยู่ระหว่าง <body> และ </ body> อธิบายเนื้อหาของหน้าเว็บที่มองเห็นได้ * ข้อความที่อยู่ระหว่าง <h1> และ </ h1> อธิบายหัวข้อ * ข้อความที่อยู่ระหว่าง <p> และ </ p> อธิบายวรรค !--- การใช้คาอธิบายนี้ เว็บเบราเซอร์สามารถแสดงข้อความที่มีในส่วน heading และ paragraph
  • 5. Web Browsers  ผลลัพธ์ ในเว็บบราวเซอร์
  • 6. HTML Page Structure  โครงสร้าง HTML