ความรู้เกี่ยวกับ html
TRANSCRIPT
ความรูพ้ ืน้ฐานเกีย่วกบั ภาษา 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 เป็นตน้