Professional Documents
Culture Documents
หลักการเขียนภาษา HTML
หลักการเขียนภาษา HTML
หลักการเขียนภาษา HTML
วัตถุประสงค
1. สามารถอธิบายความหมายของ HTML
2. สามารถอธิบายถึงโครงสรางของภาษา HTML
3. สามารถสรางเอกสาร HTML
4. สามารถเรียกดูเอกสาร HTML ทางโปรแกรมเว็บบราวเซอร
เนื้อหา
1. รูจักกับภาษา HTML (HTML Introduction)
2. องคประกอบของ HTML (HTML Elements)
3. พื้นฐาน HTML Tags
4. HTML Character Entities
5. HTML Links
6. HTML Frames
7. HTML Tables
8. HTML Lists
9. HTML Images
10. HTML Backgrounds
11. HTML Colors
12. HTML Fonts
กิจกรรมการเรียนการสอน
1. อธิบาย พรอมยกตัวอยางประกอบ
2. ศึกษาจากเอกสารประกอบการสอน
3. แนะนําแหลงศึกษาคนควาเพิ่มเติม
4. ทําแบบฝกหัดทายบทเรียน
หลักการเขียนภาษา HTML 2
สื่อการสอน
1. เอกสารประกอบการเรียนการสอน
2. ตัวอยางโปรแกรมภาษา HTML
3. อินเทอรเน็ต
การวัดและประเมินผล
1. จากการตอบคําถามระหวางเรียน
2. ประเมินจากการทํางาน
3. จากการทําแบบฝกหัดทายบท
หลักการเขียนภาษา HTML 3
หลักการเขียนภาษา HTML
5. HTML Links
HTML ใช Hyperlink เพื่อทําการเชื่อมโยงไปยังเอกสารอื่น ๆ ที่อยูในเว็บ
5.1 The Anchor Tag and the Href Attribute
HTML ใช Tag <a> (anchor) เพื่อทําการเชื่อมโยงไปยังเอกสารอื่น ๆ โดยสามารถที่จะ
เชื่อมโยงไปยังเอกสาร HTML, รูปภาพ, เสียง และอื่น ๆ
รูปแบบที่ใชในการสราง anchor
<a href =”url”> Text to de displayed </a>
Tag <a> ใชสาํ หรับสรางการเชื่อมโยง สวน href เปน Attribute ที่บอกถึง url ของเอกสาร
ที่ตองการเชื่อมโยง ดังนั้นคํา (Word) ที่ตอ งการเชื่อมโยง จะอยูระหวาง anchor Tag เทานั้น
ตัวอยาง anchor โดยกําหนดใหเชื่อมโยงไปยัง เว็บไซตของคณะวิทยาการสารสนเทศ
<a href="http://www.it.msu.ac.th">Visit Faculty of Informatics</a>
5.2 The Target Attribute
ในสวนของเปาหมาย (Target Attribute) สามารถกําหนดพื้นที่ในการเปดเอกสาร จาก
ตัวอยางตอไปนี้เปนการกําหนดการเปดเอกสารในหนาตางเว็บบราวเซอรใหม
<a href=http://www.it.msu.ac.th target="_blank"> Visit Faculty of Informatics </a>
5.3 The Anchor Tag and the Name Attribute
Name Attribute ใชสําหรับกําหนดชื่อของ anchor (Name anchor) เมื่อใชชื่อของ anchor
สามารถที่จะทําการกระโดดไปยังจุดที่ตองการในเว็บเพจเดียวกันได
ตัวอยางตอไปนี้เปนโครงสรางของการกําหนดชื่อของ anchor
<a name="label">Text to be displayed</a>
Name Attribute ใชสําหรับกําหนดชื่อของ anchor ตัวอยางตอไปนี้เปนการกําหนดชื่อของ
anchor
<a name="tips">Useful Tips Section</a>
ควรระวังในการใช name anchor ถาตองการที่จะเชื่อมโยงไปยังสวน “Tips” จะตองใช
สัญลักษณ # ดังตัวอยางตอไปนี้
<a href="http://www.it.msu.ac.th/html_links.htm#tips">
Jump to the Useful Tips Section</a>
หลักการเขียนภาษา HTML 9
6. HTML Frames
Frames สามารถทําใหแสดงเว็บเพจไดมากกวา 1 หนาภายในหนึ่งหนาวินโดวส
6.1 The Frameset Tag
Tag <frameset> เปนการแบงหนาวินโดวส โดยสามารถกําหนดไดทั้ง แถว และคอลัมน
คา (values) ของแถว/คอลัมน จะเปนคาที่ใชกําหนดขนาดของจอภาพ
6.2 The Frame Tag
Tag <frame> ใชกําหนดชื่อเอกสาร HTML ที่ตองการแสดงในแตละคอลัมน หรือแถว
จากตัวอยางตอไปนี้เปนการกําหนดใหมี 2 คอลัมน ในคอลัมนแรกกําหนดใหมีขนาด 25%
ของความกวางของหนาจอวินโดวส คอลัมนที่สองกําหนดใหมีขนาด 75% ของความกวางของ
หนาจอวินโดวส เอกสาร HTML ”frame_a.htm” จะถูกแสดงผลที่คอลัมนแรก และเอกสาร
HTML ”frame_b.htm” จะถูกแสดงผลคอลัมนที่สอง
<frameset cols="25%, 75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
จากตัวอยางตอไปนี้ <frameset rows="20%, 80%" cols="*"> เปนการกําหนดใหมี 2
แถว ในแถวแรกกําหนดใหมีขนาด 20% ของความสูงของหนาจอวินโดวส โดยที่เอกสาร HTML
"frame_top.htm” จะถูกแสดงผลในสวนนี้ สวนในแถวที่สองกําหนดใหมีขนาด 80% ของความสูง
ของหนาจอวินโดวส
จากคําสั่ง <frameset cols="25%, 75%" > จะมีการแบงออกเปน 2 คอลัมน ในคอลัมน
แรกกําหนดใหมีขนาด 25% ของความกวางของหนาจอวินโดวส คอลัมนที่สองกําหนดใหมีขนาด
75% ของความกวางของหนาจอวินโดวส เอกสาร HTML ”frame_left.htm” จะถูกแสดงผลที่
คอลัมนแรก และเอกสาร HTML ”frame_main.htm” จะถูกแสดงผลคอลัมนที่สอง
หลักการเขียนภาษา HTML 10
7. HTML Tables
Tables จะถูกกําหนดโดย Tag <table> Table จะถูกแบงออกเปนแถว (Tag <tr>) ในแต
ละแถวจะแบงเปนเซลลขอมูล (Data Cells) (Tag <td>) ซึ่งในเซลลขอ มูลนั้นสามารถที่จะเปนได
ทั้งขอความ รูปภาพ ฟอรม (Form) ตาราง และอื่น ๆ
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
แสดงผลลัพธของ Table ดังตัวอยางตอไปนี้
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
8. HTML Lists
HTML จะประกอบดวย Ordered Lists และ Unordered Lists
8.1 Unordered Lists
Unordered List คือรายการ (items) ซึ่งจะแสดงเปนเครื่องหมาย โดย Unordered List
เริ่มตนดวย Tag <ul> และในแตละรายการจะเริ่มตนดวย Tag <li>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
แสดงผลลัพธของ Table ดังตัวอยางตอไปนี้
• Coffee
• Milk
9. HTML Images
HTML สามารถที่จะแสดงรูปภาพในเอกสาร HTML
9.1 Image Tag และ Src Attribute
ใน HTML ถาตองการที่จะแทรกรูปภาพลงในเอกสารจะใช Tag <img> โดย <img>
ประกอบไปดวย Attribute และจะไมมี Tag ปด โดยทําหนาที่แสดงรูปภาพในเว็บบราวเซอร ใน
Tag <img> จะตองประกอบไปดวย Attribute src ซึ่ง src เปรียบเสมือนแหลงที่เก็บรูปภาพ
(Source) ซึ่งคาที่อยูใน src ก็คือ URL ของรูปภาพที่ตองการแสดงในเว็บบราวเซอรนั่นเอง
หลักการเขียนภาษา HTML 13
แบบฝกหัดทายบท
1. โครงสรางของภาษา HTML ประกอบดวยอะไรบาง