โครงสร้าง ภาษา HTML
description
Transcript of โครงสร้าง ภาษา HTML
![Page 1: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/1.jpg)
โครงสร�าง ภาษา HTML
![Page 2: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/2.jpg)
ภาษา HTML สามารถสร�างขึ้��นได้� จากโปรแกรมสร�างไฟล์�ขึ้�อความ (Text Editor) ทั่��วๆไป เช่"น “Notepad” สามารถเร#ยนร%�ได้�ง"าย แล์ะย�งม#ขึ้นาด้เล์'กอ#ก ด้�วย ประเภทั่ขึ้องไฟล์� HTML จะเป(นประเภทั่ .html
โครงสร�างภาษาHTML
![Page 3: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/3.jpg)
ค)าส��งในภาษา HTML
หร,อทั่#� เร#ยก ว"า “Tag” จะเขึ้#ยนอย%"ในเคร,�อง < แล์ะ > Tag จะ แบ่"งได้�อย%" 2 กล์."ม หล์�กๆค,อ1.Tag เด้#�ยว เป(นแทั่'กทั่#�ไมต้�องใช่� เคร,�องหมาย / (Slash) เช่"น <br> , <img>2.Tag ค%" เป(นแทั่'กทั่#�ต้�องใช่�เคร,�องหมาย / (Slash) เช่"น <html>….</html>
![Page 4: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/4.jpg)
![Page 5: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/5.jpg)
โครงสร�างหล์�ก
เป(นร%ปแบ่บ่ มาต้รฐานในการสร�างเว'บ่เพจ ประกอบ่ด้�วยค)าส��งหล์�กอย%" 4 ค)าส��งด้�งน#�
<html>…..</html><head>…..</head><title>…..</title><body>….</body>
![Page 6: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/6.jpg)
<HTML>…..</HTML> เป(นค)าส��งทั่#�บ่อกจ.ด้เร2�มต้�นแล์ะจ.ด้ส2�นส.ด้ขึ้องเว'บ่เพจ
<HEAD>…..</HEAD> เป(นค)าส��งในส"วนห�วเร,�องขึ้องเว'บ่เพจ
<TITLE>…..</TITLE> อย%"ภายใต้�ค)าส��งขึ้อง HEAD ทั่)าหน�าทั่#�ก)าหนด้ขึ้�อความแสด้งบ่น Titlebar สามารถก)าหนด้ ความยาว ได้� 64 ต้�วอ�กษร
![Page 7: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/7.jpg)
ร%ปแบ่บ่การเขึ้#ยนม#ด้�งน#�<HTML><HEAD><TITLE> titlebar </TITLE></HEAD><BODY>
เน,�อหา รายล์ะเอ#ยด้
</BODY></HTML>
![Page 8: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/8.jpg)
ต้�วอย"าง
![Page 9: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/9.jpg)
การประมวล์ผล์จากต้�วอย"างทั่#�1
ค)าส��ง<Title>
ค)าส��ง<body>
![Page 10: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/10.jpg)
ค)าส��งในการก)าหนด้ห�วเร,�อง (Heading)
เป(นการก)าหนด้ห�วเร,�อง จะใช่�ค)าส��ง <H> เพ,�อ ให�ต้�วอ�กษรขึ้นาด้ใหญ่"กว"า ปกต้2เช่"น ช่,�อ บ่ทั่ ช่,�ห�วขึ้�อ เป(นต้�น ซึ่��งค)าส��ง <H> ม# 6 ระด้�บ่โด้ย ระด้�บ่ ทั่#� 1 จะ ม# ขึ้นาด้ต้�วอ�กษร ใหญ่"ทั่#�ส.ด้ส"วน ระด้�บ่ทั่#� 6 จะม# ขึ้นาด้ต้�วอ�กษรเล์'กทั่#�ส.ด้
![Page 11: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/11.jpg)
ร%ปแบ่บ่ขึ้องค)าส��ง <H>
<H1> …... </H><H2> ….. </H><H3> ….. </H><H4> ….. </H><H5> ….. </H><H6> ….. </H>
![Page 12: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/12.jpg)
ต้�วอย"าง<HTML><HEAD><Title>Heading</Title></HEAD><H1> Heading </H><H2> Heading </H><H3> Heading </H><H4> Heading </H><H5> Heading </H><H6> Heading </H></HTML>
![Page 13: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/13.jpg)
การประมวล์ผล์จากต้�วอย"างทั่#� 2
ผล์ขึ้องค)าส��ง <H1>
ผล์ขึ้องค)าส��ง <H6>
![Page 14: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/14.jpg)
ค)าส��งขึ้��นบ่รรทั่�ด้ใหม" (Line Break)
ในเอกสารทั่��วไป เราจะขึ้��นบ่รรทั่�ด้ใหม" โด้ยการกด้ Enter แต้"ในการสร�างเอกสร�าง HTML เว'บ่บ่ราวเซึ่อร�จะถ,อว"า เป(นการเว�นวรรค 1 ช่"องแล์ะใช่�เป(นจ.ด้ต้�ด้ค)าขึ้��นบ่รรทั่�ด้ใหม"ถ�ายาวเก2นขึ้นาด้บ่รรทั่�ด้ แต้"ถ�าต้�องการให� เอกสารHTML ต้�ด้ขึ้�อความ ณ ต้)าแหน"งทั่#� เราก)าหนด้ จะใช่�ค)าส��ง <BR> โด้ย ม#ร%ปแบ่บ่ด้�งน#�
![Page 15: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/15.jpg)
ค)าส��งย"อหน�าบ่รรทั่�ด้ใหม" <BR>ใช่�ค)าส��งโด้ย<HTML><HEAD><TITLE> Break Line </TITLE></HEAD><BODY>มหาว2ทั่ยาล์�ยเทั่คโนโล์ย#ราช่มงคล์พระนคร <BR> ว2ทั่ยาเขึ้ต้เทั่เวศ</BODY></HTML>
![Page 16: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/16.jpg)
การประมวล์ผล์ต้�วอย"างทั่#� 3
![Page 17: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/17.jpg)
ย2�ง เพ2�ม ค)าส��ง <BR> บ่รรทั่�ด้ย2�งเว�นมากขึ้��น เช่"นHTML>
<HEAD><TITLE> Break Line </TITLE></HEAD><BODY>มหาว2ทั่ยาล์�ยเทั่คโนโล์ย#ราช่มงคล์พระนคร <BR><BR><BR> ว2ทั่ยาเขึ้ต้เทั่เวศ</BODY></HTML>
![Page 18: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/18.jpg)
ผล์ทั่#�ได้�
ผล์ขึ้องค)าส��ง <BR><BR><BR>
![Page 19: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/19.jpg)
ค)าส��ง <P> เป(นค)าส��งจ�ด้วางย"อหน�าขึ้�อความการใช่� ค)าส��ง <P> <body>ขึ้�อความ<P>ขึ้�อความ </body>
ค)าส��ง <P>
![Page 20: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/20.jpg)
HTML><HEAD><TITLE> Break Line </TITLE></HEAD><BODY>มหาว2ทั่ยาล์�ยเทั่คโนโล์ย#ราช่มงคล์พระนคร <P> ว2ทั่ยาเขึ้ต้เทั่เวศ</BODY></HTML>
ต้�วอย"างการใช่� ค)าส��ง <P>
![Page 21: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/21.jpg)
ผล์ทั่#�ได้�จาก ค)าส��ง <P>
ผลคำ��สั่��ง ของ <P>
![Page 22: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/22.jpg)
ค)าส��งเสร2มช่"วยขึ้อง <P>
ค)าส��งเสร2มทั่#�ช่"วยในการจ�ด้ต้)าแหน"งขึ้องย"อหน�า ค,อ Alignment โด้ยม#ร%ปแบ่บ่ด้�งน#�
<P Align=ต้)าแหน"ง>….ขึ้�อความ….</p> ต้)าแหน"งทั่#�ใช่�ในการจ�ด้ย"อหน�าม#ด้�วยก�นสามล์�กษณะ ค,อ
Left จ�ด้ขึ้�อความช่2ด้ซึ่�ายบ่รรทั่�ด้Center จ�ด้ขึ้�อความก��งกล์างบ่รรทั่�ด้Right จ�ด้ขึ้�อความช่2ด้ขึ้วาบ่รรทั่�ด้
![Page 23: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/23.jpg)
ก"อนใช่�ค)าส��ง <P Align=Center>
<HTML><HEAD><TITLE> :: ย2นด้#ต้�อนร�บ่ ::</TITLE></HEAD><BODY>มหาว2ทั่ยาล์�ยเทั่คโนโล์ย#ราช่มงคล์พระนคร ว2ทั่ยาเขึ้ต้เทั่เวศ</BODY></HTML>
![Page 24: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/24.jpg)
ก"อนใช่�ค)าส��ง <P Align=Center>
![Page 25: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/25.jpg)
ต้�วอย"าง การใช่�ค)าส��งHTML><HEAD><TITLE> :: ย2นด้#ต้�อนร�บ่ ::</TITLE></HEAD><BODY><P Align=Center>มหาว2ทั่ยาล์�ยเทั่คโนโล์ย#ราช่มงคล์พระนคร ว2ทั่ยาเขึ้ต้เทั่เวศ</P></BODY></HTML>
![Page 26: โครงสร้าง ภาษา HTML](https://reader035.fdocument.pub/reader035/viewer/2022062401/56815a61550346895dc79cb3/html5/thumbnails/26.jpg)
ผล์ทั่#�ได้�จากค)าส��ง <P Align=Center>