SlideShare a Scribd company logo
1 of 18
HTML
NARISSARA THONG.
HTML(Hypertext Markup Language) คืออะไร
 HTML คือภาษาที่ใช้สร้างเอกสารข้อมูล
ในลักษณะมัลติมีเดีย เพื่อแสดงบนระบบ
เครือข่ายอินเตอร์เน็ต
HTML(Hypertext Markup Language) คืออะไร
HTML Editor เช่น Edit plus ,Dreamweaver ,Cute
HTML เป็นต้น
Text Editor เขียนได้เช่น Node Pad , Word Pad ฯลฯ
แต่จะต้องบันทึกให้อยู่ในรูปแบบนามสกุล .html เสมอ
Web Browser หรือ Browser เช่น Internet
Explorer , google Chrome ,Mozilla firefox เป็นต้น
ข้อกาหนดของภาษา HTML
 คาสั่ง เรียกว่า Tag อยู่ในเครื่องหมาย < >
 Tag จะใช้ตัวอักษรพิมพ์ใหญ่ เล็ก มีความหมายเดียวกัน
เช่น <IMG SRC> หรือ <img src> เป็นต้น
 Tag เกือบทุก Tag จะมีทั้ง Tag เปิด และ ปิด โดยTag ปิดจะมี
เครื่องหมาย / เสมอ
เช่น Tag เริ่มต้น ของ HTML คือ <HTML> และสิ้นสุดการ
เขียนภาษาHTML ด้วย</HTML>
จาแนกโครงสร้างของคาสั่งออกเป็น 3 ส่วน
 Tags คือ คำสั่งในภำษำ HTML โดยจะมีประสิทธิภำพสูงสุด เมื่อ
กำหนดส่วนขยำยให้กับ tags
 Attributes เป็นส่วนประกอบหนึ่งของส่วนขยำย ทำหน้ำที่กำหนด
ทิศทำงของ tags
 Values เป็นส่วนประกอบสุดท้ำยของส่วนขยำย ทำหน้ำที่กำหนด
ขนำด หรือ ลักษณะ ให้กับ attributes
จาแนกโครงสร้างของคาสั่งออกเป็น 3 ส่วน
<Font Face=“Ms Sans Serif” Color=“Blue”>
Tag=Font
Attributes = Face , Color
Value= “Ms Sans Serif”, “ Blue”
โครงสร้างพื้นฐาน HTML
โครงสร้างพื้นฐาน HTML
Title(ชื่อหัวเรื่อง)
จะถูกกำหนด อยู่ภำยใน Tag คำสั่ง
<HEAD>..</HEAD>
<HEAD> <TITLE> ชื่อหัวเรื่อง </TITLE>
</HEAD>
 ข้อมูลที่ถูก เขียนอยู่ภำยใน Tag จะแสดงผล
ออกมำให้เห็น ที่บนบำร์ของ Web Browser
ข้อมูลที่ต้องการแสดงผล
จะอยู่ ระหว่าง tag BODY ทั้งหมด
คาสั่งComment Tag
เป็นคำสั่งที่ใช้ ในกำรอธิบำย อยู่ภำยใน
HTML จะไม่มีกำรแสดงผล ออกมำที่ Browser
จะมีประโยชน์สำหรับ ผู้ที่จะทำกำรแก้ไข
โปรแกรม ในภำยหลัง
<!--ใส่ข้อความใดๆก็ได้ เพื่อใช้ในการ
อธิบาย-->
คาสั่งขึ้นบรรทัดใหม่ <BR>
เป็นคาสั่ง ที่ใช้กาหนดให้ ข้อความที่
เราพิมพ์ ลงไปในเอกสาร ขึ้นบรรทัด
ใหม่ ได้ตามที่เราต้องการ เพราะ ถ้า
เราไม่ใช้ คาสั่งสั่งให้เอกสาร
คาสั่งการย่อหน้าใหม่รูปแบบคาสั่ง
<P>........... </P> หรือ <P>
มีลักษณะคล้ำยกับคำสั่ง < BR > แต่คำสั่ง
นี้จะมีกำรเว้น บรรทัดว่ำง ให้หนึ่งบรรทัด
เพรำะบำงครั้ง เรำต้องกำร เว้นบรรทัดว่ำง
หนึ่งบรรทัด แต่โปรแกรม Web Browser จะ
ไม่เข้ำใจกำรพิมพ์บรรทัดเปล่ำ
การกาหนดสีของพื้นฉากหลัง
เป็นคำสั่งที่ใช้กำหนดสีของ Background
จอภำพให้มีสีต่ำงๆตำมต้องกำรโดยกำรกำหนด
เลขฐำน16
รูปแบบคาสั่ง <BODY BGCOLOR="#เลขฐาน
16 จานวน 6 ตัว">......</BODY>
การกาหนดสีของพื้นฉากหลัง
เป็นคำสั่งที่ใช้กำหนดสีของ Background จอภำพให้มีสี
ต่ำงๆตำมต้องกำรโดยกำรกำหนดเลขฐำน16
รูปแบบคาสั่ง <BODY BGCOLOR="#เลขฐาน16
จานวน 6 ตัว">......</BODY>
ตัวอย่าง
 <HTML> <HEAD> <TITLE>กำรกำหนดสีของพื้นฉำกหลัง</TITLE> </HEAD> <BODY
BGCOLOR="#0000FF" TEXT="#FFFFFF"> กำหนดBACKGROUNDเป็นสีน้ำเงิน </BODY> </HTML>
รูปแบบตัวอักษร (Font) / สี (Color)
 การกาหนดหัวเรื่อง
 คาสั่ง <FONT SIZE>
 การกาหนดสีของตัวอักษร
 การกาหนดสีของตัวอักษรเฉพาะส่วน
 การกาหนดชนิดของตัวอักษร FONT FACE
 การกาหนดรูปแบบตัวอักษร
 การจัดวางตาแหน่งข้อความโดยใช้ ALIGN
 คาสั่งรายการ [ Lists ]
การกาหนดหัวเรื่อง
<Hx> จะมีขนำดของ ตัวอักษร อยู่ 6 ขนำด คือ ขนำดใหญ่
สุด คือ
<H1> ( ใช้มำก ) และเล็กที่สุดคือ <H6> (ใช้น้อย )
รูปแบบคาสั่ง <Hx>........<Hx>
โดยที่ x คือค่ำตัวเลขตั่งแต่ 1 ถึง 6
การกาหนดหัวเรื่อง
<HTML> <HEAD>
<TITLE> กำรกำหนดหัวเรื่อง</TITLE> </HEAD>
<BODY>
<H1> กำรกำหนดหัวเรื่องH1 </H1>
<H2> กำรกำหนดหัวเรื่องH2</H2 >
<H3> กำรกำหนดหัวเรื่องH3</H3>
<H4> กำรกำหนดหัวเรื่องH4</H4>
<H5> กำรกำหนดหัวเรื่องH5</H5>
<H6> กำรกำหนดหัวเรื่องH6</H6>
<BR>นี่คือ ตัวอักษรปกติ
</BODY> </HTML>

More Related Content

What's hot

ข้อสอบกลางภาค
ข้อสอบกลางภาคข้อสอบกลางภาค
ข้อสอบกลางภาคSilver Bullet
 
การสอนเขียนHtml
การสอนเขียนHtmlการสอนเขียนHtml
การสอนเขียนHtmlchukiat008
 
ข้อสอบกลางภาค
ข้อสอบกลางภาคข้อสอบกลางภาค
ข้อสอบกลางภาคNon Thanawat
 
3.คำสั่งในการจัดหน้า
3.คำสั่งในการจัดหน้า3.คำสั่งในการจัดหน้า
3.คำสั่งในการจัดหน้าbimteach
 
ความรู้เบื้องต้นอินเตอร์เน็ต
ความรู้เบื้องต้นอินเตอร์เน็ตความรู้เบื้องต้นอินเตอร์เน็ต
ความรู้เบื้องต้นอินเตอร์เน็ตเขมิกา กุลาศรี
 
บทที่ 5 การจัดการข้อความ
บทที่ 5 การจัดการข้อความบทที่ 5 การจัดการข้อความ
บทที่ 5 การจัดการข้อความNattipong Siangyen
 
ใบงานที่ 1 ความหมาย การเขียน และโครงสร้างภาษา HTML
ใบงานที่  1 ความหมาย การเขียน และโครงสร้างภาษา HTMLใบงานที่  1 ความหมาย การเขียน และโครงสร้างภาษา HTML
ใบงานที่ 1 ความหมาย การเขียน และโครงสร้างภาษา HTMLผ่องนภา มณีธร
 
ตอบคำถาม
ตอบคำถาม ตอบคำถาม
ตอบคำถาม Vee Pimonmart
 
หน่วยที่ 2
หน่วยที่ 2หน่วยที่ 2
หน่วยที่ 2Ton TC Tmsb
 
Introduce Javascript
Introduce JavascriptIntroduce Javascript
Introduce JavascriptBoo' Noypeng
 
บทที่ 3 html editors
บทที่ 3 html editorsบทที่ 3 html editors
บทที่ 3 html editorsNattipong Siangyen
 
บทที่ 3 html editors
บทที่ 3 html editorsบทที่ 3 html editors
บทที่ 3 html editorsNattipong Siangyen
 
สอบกลางภาค
สอบกลางภาคสอบกลางภาค
สอบกลางภาคNon Thanawat
 
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละแนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละWithoon Wangsa-Nguankit
 
(Php basic 1 [โหมดความเข้ากันได้])
(Php basic 1 [โหมดความเข้ากันได้])(Php basic 1 [โหมดความเข้ากันได้])
(Php basic 1 [โหมดความเข้ากันได้])krunoommr
 
บริการ (2)
บริการ (2)บริการ (2)
บริการ (2)narachai15
 

What's hot (20)

ข้อสอบกลางภาค
ข้อสอบกลางภาคข้อสอบกลางภาค
ข้อสอบกลางภาค
 
HTML5 Startup
HTML5 StartupHTML5 Startup
HTML5 Startup
 
การสอนเขียนHtml
การสอนเขียนHtmlการสอนเขียนHtml
การสอนเขียนHtml
 
ข้อสอบกลางภาค
ข้อสอบกลางภาคข้อสอบกลางภาค
ข้อสอบกลางภาค
 
3.คำสั่งในการจัดหน้า
3.คำสั่งในการจัดหน้า3.คำสั่งในการจัดหน้า
3.คำสั่งในการจัดหน้า
 
ความรู้เบื้องต้นอินเตอร์เน็ต
ความรู้เบื้องต้นอินเตอร์เน็ตความรู้เบื้องต้นอินเตอร์เน็ต
ความรู้เบื้องต้นอินเตอร์เน็ต
 
บทที่ 5 การจัดการข้อความ
บทที่ 5 การจัดการข้อความบทที่ 5 การจัดการข้อความ
บทที่ 5 การจัดการข้อความ
 
ใบงานที่ 1 ความหมาย การเขียน และโครงสร้างภาษา HTML
ใบงานที่  1 ความหมาย การเขียน และโครงสร้างภาษา HTMLใบงานที่  1 ความหมาย การเขียน และโครงสร้างภาษา HTML
ใบงานที่ 1 ความหมาย การเขียน และโครงสร้างภาษา HTML
 
ตอบคำถาม
ตอบคำถาม ตอบคำถาม
ตอบคำถาม
 
หน่วยที่ 2
หน่วยที่ 2หน่วยที่ 2
หน่วยที่ 2
 
Introduce Javascript
Introduce JavascriptIntroduce Javascript
Introduce Javascript
 
บทที่ 3 html editors
บทที่ 3 html editorsบทที่ 3 html editors
บทที่ 3 html editors
 
บทที่ 3 html editors
บทที่ 3 html editorsบทที่ 3 html editors
บทที่ 3 html editors
 
สอบกลางภาค
สอบกลางภาคสอบกลางภาค
สอบกลางภาค
 
Web Accessibility Coding
Web Accessibility CodingWeb Accessibility Coding
Web Accessibility Coding
 
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละแนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
 
(Php basic 1 [โหมดความเข้ากันได้])
(Php basic 1 [โหมดความเข้ากันได้])(Php basic 1 [โหมดความเข้ากันได้])
(Php basic 1 [โหมดความเข้ากันได้])
 
narachai
narachainarachai
narachai
 
บริการ (2)
บริการ (2)บริการ (2)
บริการ (2)
 
Touch Screen Content & CMS
Touch Screen Content & CMSTouch Screen Content & CMS
Touch Screen Content & CMS
 

Viewers also liked

HTML Training in Ambala ! BATRA COMPUTER CENTRE
HTML Training in Ambala ! BATRA COMPUTER CENTREHTML Training in Ambala ! BATRA COMPUTER CENTRE
HTML Training in Ambala ! BATRA COMPUTER CENTREjatin batra
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to htmlvikasgaur31
 
Aula01 Desenvolvimento em Ambiente Web - HTML
Aula01 Desenvolvimento em Ambiente Web - HTMLAula01 Desenvolvimento em Ambiente Web - HTML
Aula01 Desenvolvimento em Ambiente Web - HTMLMessias Batista
 
Berpikir kritis sebuah pengantar (syahruddin)
Berpikir kritis  sebuah pengantar (syahruddin)Berpikir kritis  sebuah pengantar (syahruddin)
Berpikir kritis sebuah pengantar (syahruddin)Muhsyahrudin
 
บทที่3เทคนิคการส่งข้อมูลดิจิตอล
บทที่3เทคนิคการส่งข้อมูลดิจิตอลบทที่3เทคนิคการส่งข้อมูลดิจิตอล
บทที่3เทคนิคการส่งข้อมูลดิจิตอลkamolphan_sri
 
Pembangunan mapan dalam islam
Pembangunan mapan dalam islamPembangunan mapan dalam islam
Pembangunan mapan dalam islamzahidahzuhud
 
Narrative techniques
Narrative techniquesNarrative techniques
Narrative techniquesKaty Arundell
 
презентація
презентаціяпрезентація
презентаціяcit-cit
 
Beard growing mistakes or faux pas you must know!
Beard growing mistakes or faux pas you must know!Beard growing mistakes or faux pas you must know!
Beard growing mistakes or faux pas you must know!Beard.org.in
 

Viewers also liked (13)

Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
 
Html
HtmlHtml
Html
 
HTML Training in Ambala ! BATRA COMPUTER CENTRE
HTML Training in Ambala ! BATRA COMPUTER CENTREHTML Training in Ambala ! BATRA COMPUTER CENTRE
HTML Training in Ambala ! BATRA COMPUTER CENTRE
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Aula01 Desenvolvimento em Ambiente Web - HTML
Aula01 Desenvolvimento em Ambiente Web - HTMLAula01 Desenvolvimento em Ambiente Web - HTML
Aula01 Desenvolvimento em Ambiente Web - HTML
 
Berpikir kritis sebuah pengantar (syahruddin)
Berpikir kritis  sebuah pengantar (syahruddin)Berpikir kritis  sebuah pengantar (syahruddin)
Berpikir kritis sebuah pengantar (syahruddin)
 
บทที่3เทคนิคการส่งข้อมูลดิจิตอล
บทที่3เทคนิคการส่งข้อมูลดิจิตอลบทที่3เทคนิคการส่งข้อมูลดิจิตอล
บทที่3เทคนิคการส่งข้อมูลดิจิตอล
 
บทที่ 3 พลังงานทดแทน
บทที่  3 พลังงานทดแทนบทที่  3 พลังงานทดแทน
บทที่ 3 พลังงานทดแทน
 
Pembangunan mapan dalam islam
Pembangunan mapan dalam islamPembangunan mapan dalam islam
Pembangunan mapan dalam islam
 
NFQ Agency
NFQ AgencyNFQ Agency
NFQ Agency
 
Narrative techniques
Narrative techniquesNarrative techniques
Narrative techniques
 
презентація
презентаціяпрезентація
презентація
 
Beard growing mistakes or faux pas you must know!
Beard growing mistakes or faux pas you must know!Beard growing mistakes or faux pas you must know!
Beard growing mistakes or faux pas you must know!
 

Similar to Html 2

หน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmlหน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmldevilp Nnop
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlSamorn Tara
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlSamorn Tara
 
Session1 part2
Session1 part2Session1 part2
Session1 part2maovkh
 
เนื้อหา Html
เนื้อหา Htmlเนื้อหา Html
เนื้อหา HtmlRungnapha Naka
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1Poppy Love
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1Poppy Love
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1Poppy Love
 
2.เริ่มต้นกับ xhtml และ xhtml
2.เริ่มต้นกับ xhtml และ xhtml2.เริ่มต้นกับ xhtml และ xhtml
2.เริ่มต้นกับ xhtml และ xhtmlBeerza Kub
 
การเขียน Web site ด้วยภาษา html
การเขียน Web site ด้วยภาษา htmlการเขียน Web site ด้วยภาษา html
การเขียน Web site ด้วยภาษา htmlPalasut
 
รู้จักกับ Html(แก้ไข)
รู้จักกับ Html(แก้ไข)รู้จักกับ Html(แก้ไข)
รู้จักกับ Html(แก้ไข)Beerza Kub
 
Hyper text markup language
Hyper  text  markup  languageHyper  text  markup  language
Hyper text markup languageungpao
 
ข้อสอบกลางภาค
ข้อสอบกลางภาคข้อสอบกลางภาค
ข้อสอบกลางภาคPimlapas Kimkur
 
ใบงานคอม
ใบงานคอมใบงานคอม
ใบงานคอมpim1122
 
ใบงานคอม
ใบงานคอมใบงานคอม
ใบงานคอมkongdang
 
ประวัต Html
ประวัต Htmlประวัต Html
ประวัต Htmlkrurit9
 
ใบงานคอม
ใบงานคอมใบงานคอม
ใบงานคอมnongmhi
 

Similar to Html 2 (20)

หน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 htmlหน่วยการเรียนรู้ที่ 3 html
หน่วยการเรียนรู้ที่ 3 html
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
Session1 part2
Session1 part2Session1 part2
Session1 part2
 
Lernning 13
Lernning 13Lernning 13
Lernning 13
 
เนื้อหา Html
เนื้อหา Htmlเนื้อหา Html
เนื้อหา Html
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1
 
ใบงานที่ 1
ใบงานที่ 1ใบงานที่ 1
ใบงานที่ 1
 
2.เริ่มต้นกับ xhtml และ xhtml
2.เริ่มต้นกับ xhtml และ xhtml2.เริ่มต้นกับ xhtml และ xhtml
2.เริ่มต้นกับ xhtml และ xhtml
 
การเขียน Web site ด้วยภาษา html
การเขียน Web site ด้วยภาษา htmlการเขียน Web site ด้วยภาษา html
การเขียน Web site ด้วยภาษา html
 
รู้จักกับ Html(แก้ไข)
รู้จักกับ Html(แก้ไข)รู้จักกับ Html(แก้ไข)
รู้จักกับ Html(แก้ไข)
 
Work
WorkWork
Work
 
Hyper text markup language
Hyper  text  markup  languageHyper  text  markup  language
Hyper text markup language
 
ข้อสอบกลางภาค
ข้อสอบกลางภาคข้อสอบกลางภาค
ข้อสอบกลางภาค
 
ใบงานคอม
ใบงานคอมใบงานคอม
ใบงานคอม
 
ใบงานคอม
ใบงานคอมใบงานคอม
ใบงานคอม
 
ประวัต Html
ประวัต Htmlประวัต Html
ประวัต Html
 
ใบงานคอม
ใบงานคอมใบงานคอม
ใบงานคอม
 
คอม
คอมคอม
คอม
 

Html 2