Download - ความรู้เกี่ยวกับ Html
![Page 1: ความรู้เกี่ยวกับ Html](https://reader033.vdocuments.pub/reader033/viewer/2022052905/558656c2d8b42abd3e8b4593/html5/thumbnails/1.jpg)
ความรูพ้ ืน้ฐานเกีย่วกบั ภาษา HTML
![Page 2: ความรู้เกี่ยวกับ Html](https://reader033.vdocuments.pub/reader033/viewer/2022052905/558656c2d8b42abd3e8b4593/html5/thumbnails/2.jpg)
โครงสรา้งของเวบ็ไซต์เวบ็ไซต ์ (Web Site) คอืเครือ่งคอมพวิเตอรท์ีท่ าหน้าทีเ่ป็นเวบ็เซริฟ์เวอร ์ ซึง่เวบ็ไซตแ์ต่ละเวบ็ไซต ์จะประกอบไปดว้ย ไฟลเ์วบ็เพจมากมายหลาย ๆ ไฟล ์จะมกีารเชือ่มโยงกนัและกนั แต่จะมเีพยีงหนึ่งไฟล์เท่านัน้ทีเ่ป็นเวบ็เพจไฟลแ์รกทีจ่ะแสดงก่อนทุกครัง้เมือ่มผีูเ้ขา้มาสเูวบ็ไซต์
![Page 3: ความรู้เกี่ยวกับ Html](https://reader033.vdocuments.pub/reader033/viewer/2022052905/558656c2d8b42abd3e8b4593/html5/thumbnails/3.jpg)
โครงสรา้งของเวบ็ไซต ์(ต่อ)
เรยีกไฟลเ์วบ็เพจทีเ่ป็นไฟลแ์รกของการแสดงผล วา่ โฮมเพจ ( Home page )โดยทัว่ไปนิยมก าหนดชือ่ไฟล ์ทีเ่ป็นโฮมเพจวา่ index.html หรอื default.html
![Page 4: ความรู้เกี่ยวกับ Html](https://reader033.vdocuments.pub/reader033/viewer/2022052905/558656c2d8b42abd3e8b4593/html5/thumbnails/4.jpg)
โครงสรา้งของเวบ็ไซต ์แบ่งได ้2 มมุมอง
1. โครงสรา้งของเวบ็ไซตใ์นมุมมองของการจดัการไฟลเ์วบ็เพจเป็นโครงสรา้งของเวบ็ไซตท์ีเ่น้นมุมมองในดา้นของการจดัเกบ็ไฟลเ์วบ็เพจ แบ่งเป็นโฟลเดอร ์แต่ละโฟลเดอรก์จ็ะมีโฟลเดอรย์อ่ย และไฟลต์่าง ๆ
![Page 5: ความรู้เกี่ยวกับ Html](https://reader033.vdocuments.pub/reader033/viewer/2022052905/558656c2d8b42abd3e8b4593/html5/thumbnails/5.jpg)
ตวัอยา่งโครงสรา้งเวบ็ไซต ์มมุมองการจดัการไฟลเ์วบ็เพจ
Index.html (โฮมเพจ)
![Page 6: ความรู้เกี่ยวกับ Html](https://reader033.vdocuments.pub/reader033/viewer/2022052905/558656c2d8b42abd3e8b4593/html5/thumbnails/6.jpg)
2.โครงสรา้งเวบ็ไซตใ์นมมุมองการเชือ่มโยงไฟล์เวบ็เพจเป็นโครงสรา้งของเวบ็ไซตท์ีเ่น้นการเชือ่มโยงของไฟลเ์วบ็เพจต่าง ๆ ภายในเวบ็ไซตเ์พือ่แสดงให้เหน็วา่ไฟลเ์วบ็เพจแต่ละไฟลเ์ชือ่มโยงกนัอยา่งไร อาจเรยีกโครงสรา้งในมุมมองนี้ วา่ แผนผงัไซต ์หรอื Site Map
![Page 7: ความรู้เกี่ยวกับ Html](https://reader033.vdocuments.pub/reader033/viewer/2022052905/558656c2d8b42abd3e8b4593/html5/thumbnails/7.jpg)
ตวัอยา่งโครงสรา้งเวบ็ไซต ์มมุมองการเชือ่มโยงเวบ็เพจ
index.html
p1.html p2.html p3.html p4.html
p11.html p12.html p21.html p31.html p32.html p41.html
![Page 8: ความรู้เกี่ยวกับ Html](https://reader033.vdocuments.pub/reader033/viewer/2022052905/558656c2d8b42abd3e8b4593/html5/thumbnails/8.jpg)
ภาษา HTML คอือะไร
HTML ยอ่มากจากค าวา่ HyperText Markup Language เป็นภาษาส าหรบัก าหนดรปูแบบการแสดงผลขอ้ความ รปูแบบไฟล์ของภาษา HTML ทีเ่รยีกโดยทัว่ไปวา่ ไฟลเ์วบ็เพจ จะมนีามสกุลหรอืสว่นขยาย .html หรอื .htm เชน่ index.html เป็นตน้
![Page 9: ความรู้เกี่ยวกับ Html](https://reader033.vdocuments.pub/reader033/viewer/2022052905/558656c2d8b42abd3e8b4593/html5/thumbnails/9.jpg)
ภาษา HTML คอือะไร (ต่อ)
โดยไฟล ์HTML จะเป็นไฟลแ์บบเทก็ซไ์ฟล ์(Text File ) คอื เป็นไฟลท์ีส่ามารถเปิดอ่านไดด้ว้ยโปรแกรมเทก็อดิเิตอร ์(Text Editor)ทัว่ไป เชน่ Notepad,Edit Plus เป็นตน้
![Page 10: ความรู้เกี่ยวกับ Html](https://reader033.vdocuments.pub/reader033/viewer/2022052905/558656c2d8b42abd3e8b4593/html5/thumbnails/10.jpg)
รปูแบบภาษา HTML
ภาษา HTML ประกอบดว้ยค าสัง่เพือ่การแสดงผลขอ้ความต่าง ๆ มากมาก ค าสัง่ของภาษา HTML เรยีกวา่ ค าสัง่ แทก็ (Tag) โดยชือ่ค าสัง่ จะตอ้งอยูภ่ายในเครือ่งหมาย “< >”
![Page 11: ความรู้เกี่ยวกับ Html](https://reader033.vdocuments.pub/reader033/viewer/2022052905/558656c2d8b42abd3e8b4593/html5/thumbnails/11.jpg)
ขอ้ก าหนดการเขยีนค าสัง่ภาษา HTML
1. ค าสัง่แทก็ทัว่ไปจะประกอบดว้ยแทก็เปิดและแทก็ปิด แทก็เปิดจะมชีือ่ค าสัง่อยูร่ะหวา่ง เครือ่งหมาย < > แทก็ปิดจะมเีครือ่งหมาย / อยูห่น้าชือ่ค าสัง่ และอยูร่ะหวา่งเครือ่งหมาย < > เชน่กนั
![Page 12: ความรู้เกี่ยวกับ Html](https://reader033.vdocuments.pub/reader033/viewer/2022052905/558656c2d8b42abd3e8b4593/html5/thumbnails/12.jpg)
2. ระหวา่ง แทก็เปิดและแทก็ปิด คอื ขอ้ความที่ตอ้งการแสดงผลดว้ยค าสัง่ แทก็นัน้ ๆ
<ชือ่ค าสัง่> ขอ้ความทีต่อ้งการแสดงผล </ชือ่ค าสัง่>หรอื
<ชือ่ค าสัง่>ขอ้ความทีต่อ้งการแสดงผล
</ชือ่ค าสัง่>
![Page 13: ความรู้เกี่ยวกับ Html](https://reader033.vdocuments.pub/reader033/viewer/2022052905/558656c2d8b42abd3e8b4593/html5/thumbnails/13.jpg)
3. บางค าสัง่อาจมเีพยีงแทก็เปิด แต่ไม่มแีทก็ปิด เชน่ ค าสัง่ ขึน้บรรทดัใหม ่ <br>
4. ค าสัง่แทก็แต่ละค าสัง่ อาจมคีุณสมบตัเิพิม่เตมิดว้ยหรอื ไมก่ไ็ด ้เรยีกวา่ แอททรบิวิต ์(Attribute)
ตวัอยา่งที ่1 <font color=“red”>
ภาษา Html</font>
![Page 14: ความรู้เกี่ยวกับ Html](https://reader033.vdocuments.pub/reader033/viewer/2022052905/558656c2d8b42abd3e8b4593/html5/thumbnails/14.jpg)
5. ชือ่ค าสัง่ของภาษา html จะเป็นตวัอกัษรพมิพ์ใหญ่หรอืเลก็กม็คีวามหมายเหมอืนกนั เชน่ <HR> <hr> เป็นตน้
![Page 15: ความรู้เกี่ยวกับ Html](https://reader033.vdocuments.pub/reader033/viewer/2022052905/558656c2d8b42abd3e8b4593/html5/thumbnails/15.jpg)
โครงสรา้งไฟล ์HTML (ไฟลเ์วบ็เพจ)
โครงสรา้งไฟล ์HTML ทีเ่ป็นมาตรฐานจะเริม่ตน้ไฟลด์ว้ยค าสัง่ < HTML > และจบดว้ยไฟล ์</ HTML >
![Page 16: ความรู้เกี่ยวกับ Html](https://reader033.vdocuments.pub/reader033/viewer/2022052905/558656c2d8b42abd3e8b4593/html5/thumbnails/16.jpg)
โครงสรา้งไฟล ์HTML มดีงันี้
<html><head> <title> ขอ้ความแสดงบนหวัเวบ็เพจ </title>
</head> <body>ขอ้ความทีต่อ้งการแสดงผลบนหน้าจอ</body></html>
![Page 17: ความรู้เกี่ยวกับ Html](https://reader033.vdocuments.pub/reader033/viewer/2022052905/558656c2d8b42abd3e8b4593/html5/thumbnails/17.jpg)
โครงสรา้งไฟล ์html แบ่งออกเป็น 2 สว่นดงัน้ี
สว่นที ่1 สว่นของ head เป็นสว่นทีใ่ชก้ าหนดรายละเอยีดทัว่ไปของ
ไฟล ์html โดยรายละเอยีดต่าง ๆ ทีก่ าหนดจะไมถ่กูแสดงในโปรแกรมบราวเซอร ์และใชก้ าหนดขอ้ความทีใ่ชแ้สดงบนแถบหวัเรือ่ง โดยใชค้ าสัง่<title>…………..</title>
![Page 18: ความรู้เกี่ยวกับ Html](https://reader033.vdocuments.pub/reader033/viewer/2022052905/558656c2d8b42abd3e8b4593/html5/thumbnails/18.jpg)
สว่นที ่2 สว่นของ body เป็นสว่นใสข่อ้ความ รปูภาพ ก าหนด
รายละเอยีดการแสดงผล รวมถงึค าสัง่อื่น ๆ ของภาษา HTML เชน่ การก าหนดสกีารแสดงผล การสรา้งตาราง เป็นตน้ เพือ่แสดงผลในโปรแกรมเวบ็บราวเซอร์
![Page 19: ความรู้เกี่ยวกับ Html](https://reader033.vdocuments.pub/reader033/viewer/2022052905/558656c2d8b42abd3e8b4593/html5/thumbnails/19.jpg)
โปรแกรมทีใ่ชส้รา้งเวบ็เพจตามมาตรฐาน HTML
แบ่งได ้2 ประเภท
1. โปรแกรมอดิเิตอรท์ัว่ไปเป็นโปรแกรมทีใ่ชส้ าหรบัพมิพไ์ฟลท์ัว่ไป
บนัทกึไฟลเ์ป็นแบบ เทก็ซไ์ฟล ์เชน่ Notepad,EditPlus เป็นตน้
![Page 20: ความรู้เกี่ยวกับ Html](https://reader033.vdocuments.pub/reader033/viewer/2022052905/558656c2d8b42abd3e8b4593/html5/thumbnails/20.jpg)
โปรแกรมทีใ่ชส้รา้งเวบ็เพจตามมาตรฐาน HTML
2. โปรแกรมส าเรจ็รปูส าหรบัสรา้งเวบ็เพจเป็นโปรแกรมส าเรจ็รปูทีพ่ฒันามาเพือ่ใช้
เป็นเครือ่งมอืส าหรบัการสรา้งเวบ็เพจโดยเฉพาะ เชน่ Macromedia Dreamweaver ,Micorsoft Frontpage เป็นตน้