You are on page 1of 16

บทที่ 1

หลักการเขียนภาษา 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

1. รูจักกับภาษา HTML (HTML Introduction)


HTML ยอมาจาก HyperText Markup Language เปนหนึ่งในภาษาคอมพิวเตอร ที่มี
ลักษณะเปนภาษาในเชิงการบรรยายเอกสารไฮเปอรมีเดีย (Hypermedia Document Description
Language) เพื่อเผยแพรเอกสารในระบบเครือขาย WWW (World Wide Web) มีโครงสรางภาษา
โดยใชตวั กํากับ (Markup Tags) เพื่อทําหนาที่ควบคุมการแสดงผลขอมูล รูปภาพ และวัตถุอื่น ๆ
ผานทางโปรแกรมเว็บบราวเซอร ซึ่งในแตละ Tag จะมีสวนขยาย (Attribute) เพื่อควบคุมการ
แสดงผล ซึ่งเปนภาษาที่ถูกพัฒนาขึ้นโดย World Wide Web Consortium (W3C) ซึ่งมีแมแบบคือ
ภาษา SGML (Standard Generalized Markup Language)
การสรางไฟล HTML จะตองอาศัยโปรแกรมที่มีคุณสมบัติเปนเท็กซเอดิเตอร (Text
Editor) โดยใชสําหรับเขียนคําสั่งตาง ๆ ที่ตองการแสดงผลทางจอภาพ และเก็บเปนไฟล โดยมี
นามสกุล .html หรือ .htm
1.1 เริ่มตนเขียนภาษา HTML
การเริ่มตนเขียนภาษา HTML สามารถทําไดโดยงาย ถาใชระบบปฏิบัติการวินโดวส
(Windows) ใหเปดโปรแกรม Notepad
พิมพคําสั่งตามตัวอยางตอไปนี้
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
บันทึกไฟล โดยตั้งชื่อ ”mypage.htm” หรือ ”mypage.html”
เปดโปรแกรมเว็บบราวเซอร เลือก ”Open” ในเมนู File และคนหาไฟลที่ตองการ
โปรแกรมเว็บบราวเซอรจะแสดงผลจากคําสั่งออกทางจอภาพ
หลักการเขียนภาษา HTML 4

Tag แรกในเอกสาร HTML คือ <html> ซึ่งเปน Tag ที่บอกใหเว็บบราวเซอรรูวาเปน


จุดเริ่มตนของเอกสาร HTML และ Tag สุดทายในเอกสาร ก็คือ </html> ซึ่งเปน Tag ที่บอกเว็บ
บราวเซอรวานี่คือจุดสิ้นสุดของเอกสาร HTML
ตัวอักษรระหวาง <head> และ </head> เปน Tag สวนหัวเอกสารทีใ่ ชบอกขอมูล ตาง
ๆ (Header Information) จะไมแสดงขอมูลที่อยูภายใน Tag นี้ออกทางจอภาพ
ตัวอักษรที่อยูร ะหวาง <title> เปน Tag ที่แสดงชื่อของเอกสาร ซึ่ง Tag <title> จะแสดง
ขอมูลในเว็บบราวเซอรตรง Title bar
ตัวอักษรที่อยูร ะหวาง <body> จะเปน Tag ที่ใชแสดงตัวอักษรภายในเว็บบราวเซอร
ตัวอักษรระหวาง <b> และ </b> จะทําใหตัวอักษรที่แสดงเปนตัวหนา
1.2 ควรเลือกระหวาง HTM และ HTML
เมื่อทําการบันทึกเอกสาร HTML สามารถทําการเลือกบันทึกไดทั้ง .htm หรือ .html ใน
ตัวอยางนี้ไดใชการบันทึกแบบ .htm ซึ่งควรที่จะทําการบันทึกเปนนามสกุล .htm ใหติดเปนนิสัย
เนื่องจากในอดีตที่ผานมายังมีบางโปรแกรมที่อนุญาตใหเปดไดเฉพาะสามตัวอักษร หมายความวา
จะทําใหเปดไดเฉพาะเอกสาร .htm เทานั้น แตในซอฟตแวรเวอรชนั ใหม เราก็สามารถที่จะทําการ
บันทึกเอกสารใหเปน .html ไดเชนกัน
1.3 HTML Editors
ปจจุบันนี้สามารถที่จะทําการสรางเอกสาร HTML ไดอยางงายดาย โดยใช WYSIWYG
(what you see is what you get) ซึ่งผลลัพธของโปรแกรมที่เห็นจะเหมือนกับหนาจอที่ไดทําการ
สรางขึ้นมา เชนโปรแกรม FrontPage, Adobe Photoshop, Macromedia Dreamweaver
แตถาตองการที่จะเพิ่มทักษะความสามารถในการพัฒนาเว็บ ก็ควรทีจ่ ะทําการเรียนรูคําสั่ง
และสรางเอกสาร HTML ดวยตัวเอง

2. องคประกอบของ HTML (HTML Elements)


เอกสาร HTML ก็คือไฟลเอกสาร (Text File) ที่สรางขึ้นโดยมีองคประกอบของ HTML ซึ่ง
องคประกอบของ HTML ก็คือ Tag ตาง ๆ นั่นเอง
2.1 HTML Tags
HTML Tags จะประกอบดวยเครื่องหมาย < และ > โดยปกติทวั่ ไปแลว HTML Tag
จะตองมีหนึ่งคูกัน เชน <b> และ </b> โดยจะมี Tag เริ่มตน (Start Tag) และ Tag สิ้นสุด (End
Tag) ซึ่งตัวอักษรที่อยูระหวาง Tag เริ่มตน และ Tag สิ้นสุด จะเรียกวาองคประกอบ โดยทั่วไป
แลว HTML Tag สามารถเขียนได 2 รูปแบบ (Not Case Sensitive) เชน <b> จะมีความหมาย
เหมือนกับ <B>
หลักการเขียนภาษา HTML 5

2.2 HTML Elements


จากตัวอยางตอไปนี้
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
HTML Element ก็คือ
<b> This text is bold </b>
HTML Element เริ่มตนที่ Tag เริ่มตน ก็คือ: <b>
ภายใน HTML Element จะมีสวนประกอบ ก็คือ: This text is bold
HTML Element สิ้นสุดที่ Tag สิ้นสุด ก็คือ: </b>
จุดประสงคของ Tag <b> ก็คือการกําหนดใหแสดงตัวอักษรเปนตัวหนา
2.3 ทําไมถึงตองใช Tag ที่เปนตัวอักษรพิมพเล็ก (Lowercase)
กอนหนานี้ไดกลาวถึง HTML Tag วาสามารถเขียนได 2 รูปแบบ: <B> จะมีความหมาย
เชนเดียวกับ <b> แตจากตัวอยางที่ผา นมาไดใช Tag ที่เปนตัวอักษรพิมพเล็ก เนื่องจากวาใน
อนาคตขางหนาภาษา HTML จะถูกกําหนดใหใช Tag ที่เปนตัวอักษรพิมพเล็ก โดยที่ World
Wide Web Consortium (W3c) ไดมีขอกําหนดใหใช Tag ที่เปนตัวอักษรพิมพเล็กใน HTML 4
และ XHTML
2.4 Tag Attributes
Tag สามารถที่จะกําหนดใหมีคุณสมบัติ (Attribute) เพิ่มเติม ซึ่งคุณสมบัติตาง ๆ เหลานั้น
สามารถเพิ่มเติมไดในสวนของ HTML Element
Tag ที่ใชในการกําหนดองคประกอบของตัวเอกสาร HTML: <body> สามารถที่จะเพิ่มเติม
คุณสมบัติ bgcolor ซึ่งคําสั่ง bgcolor จะทําใหเว็บบราวเซอรเปลีย่ นสีพื้นหลังของเอกสาร HTML
เชน <body bgcolor = ”red”> หมายถึงการกําหนดพื้นหลังของเอกสาร HTML ใหเปนสีแดง
Tag ที่ใชสรางตาราง: <table> สามารถทําการปรับเปลีย่ นคุณสมบัตขิ องเสนขอบ
(Border) ไดโดยใชคําสั่ง <table border = ”0”> หมายถึงกําหนดใหตารางนั้นไมมีเสนขอบ
หลักการเขียนภาษา HTML 6

Attribute จะตองประกอบดวย ชื่อ และคา: name = ”value” โดยทั่วไปแลว Attribute จะ


เพิ่มลงในสวนของ Tag เริ่มตนของ HTML Element

3. พื้นฐาน HTML Tags


วิธีการที่จะเรียนรูภาษา HTML ที่ดีที่สุดก็คือการลงมือปฏิบัติ
3.1 Headings
Heading เปนการกําหนดหัวขอ โดยใช Tag <h1> ถึง <h6> โดยที่ <h1> เปนการกําหนด
หัวขอที่มีขนาดใหญที่สุด <h6> เปนการกําหนดหัวขอที่มีขนาดเล็กที่สุด
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
โดยทั่วไปแลว HTML จะทําการเพิ่มบรรทัดวางกอน และหลัง Heading เสมอ
3.2 Paragraphs
Paragraphs เปนการกําหนดยอหนา โดยใช Tag <p>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
โดยทั่วไปแลว HTML จะทําการเพิ่มบรรทัดวางกอน และหลัง Paragraph เสมอ
3.3 Line Breaks
Tag <br> ใชสําหรับตองการขึ้นบรรทัดใหม แตไมไดเปนการเริ่ม paragraph ใหม
<p>This is a paragraph <br> with line breaks</p>
Tag <br> จะมีไม Tag ปด
3.4 Comments in HTML
Comment ใชสําหรับแทรกคําแนะนําลงในเอกสาร HTML แต comment จะไมถูกนําไป
แสดงในเว็บบราวเซอร สามารถใช comment ในการอธิบาย code ซึ่งจะชวยใหเราสามารถเขาใจ
และสามารถแกไข code ไดภายหลัง
<!-- This is a comment -->
หลักการเขียนภาษา HTML 7

4. HTML Character Entities


บางกรณีตัวอักษรพิเศษเชน © หรือ ® ถาตองการทีจ่ ะแสดงผลในเว็บบราวเซอร จะตอง
ใช Character Entity เพื่อที่จะทําใหตวั อักษรพิเศษเหลานั้นแสดงผลไดทางเว็บบราวเซอร
4.1 Character Entities
จากตัวอยางตัวอักษรพิเศษเชน © หรือ ® ถาตองการที่จะใหแสดงผลในเว็บบราวเซอร
จะตองแทรก Character Entity ลงใน HTML
Character Entity ประกอบดวย 3 สวน: เครื่องหมาย & (ampersand) คือ Entity Name,
เครื่องหมาย # คือ Entity Number และเครื่องหมาย ; (Semicolon)
ถาตองการแสดงเครื่องหมาย © จะตองเขียน HTML ดังนี้: &copy; หรือ &#169;
4.2 Non-breaking Space
โดยทั่วไปแลว HTML จะไมสามารถทําการเพิ่มชองวาง (Space) ระหวางตัวอักษรไดเกิน
กวา 1 ตัวอักษร ดังนั้นถาตองการที่จะเพิ่มชองวางเกินกวา 1 ตัวอักษรใน HTML จะตองใช
Character Entity คือ &nbsp; หรือ Character Number คือ &#160;
4.3 Character Entities ที่ถูกเรียกใชบอย
Result Description Entity Name Entity Number
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" quotation mark &quot; &#34;
' apostrophe &apos; (does not work in IE) &#39;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
§ section &sect; &#167
© copyright &copy; &#169;
® registered trademark &reg; &#174;
× multiplication &times; &#215;
÷ division &divide; &#247;
หลักการเขียนภาษา HTML 8

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

หรือถาตองการเชื่อมโยงไปยังสวน Useful Tips Section จากภายใน


เอกสาร ”html_links.htm” จะตองทําตามตัวอยางตอไปนี้
<a href="#tips">Jump to the Useful Tips Section</a>

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

<frameset rows="20%, 80%" cols="*">


<frame src="frame_top.htm" name="topFrame">
<frameset cols="25%, 75%" >
<frame src="frame_left.htm" name="leftFrame" >
<frame src="frame_main.htm" name="mainFrame">
</frameset>
</frameset>

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

7.1 Tables และ Border Attribute


โดยทั่วไปแลวถา Table ไมมีการกําหนด Border เว็บบราวเซอรจะไมแสดงขอบของ
ตารางออกทางหนาจอ ดังนั้นเพื่อใหเว็บบราวเซอรทําการแสดงขอบของตาราง จะตองเพิ่ม
Border Attribute ลงไป
หลักการเขียนภาษา HTML 11

ถาตองการแสดง Table ที่มขี อบ จะตองใช Border Attribute ดังนี้


<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
7.2 Headings in a Table
หัวของตารางกําหนดโดย Tag <th>
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<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 ดังตัวอยางตอไปนี้
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
หลักการเขียนภาษา HTML 12

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

8.2 Ordered Lists


Ordered List ก็คือรายการ แตจะแสดงดวย โดย Ordered List จะเริ่มตอนดวย Tag <ol>
และในแตละขอจะเริ่มตนดวย Tag <li>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
แสดงผลลัพธของ Table ดังตัวอยางตอไปนี้
1. Coffee
2. 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

โครงสรางของ Tag <img> มีดังนี้


<img src = ”url”>
URL จะเปนตัวที่บอกถึงสถานที่จัดเก็บรูปภาพ เชนถารูปภาพมีชื่อวา "boat.gif" จัดเก็บ
ไวในไดเรกทอรี่ ”image” ซึ่งอยูใน ”www.it.msu.ac.th” จะมี URL ดังนี้
http://www.it.msu.ac.th/image/images/boat.gif
9.2 Alt Attribute
alt attribute ใชแสดงขอความ (alternate text) ในแตละรูปภาพ แสดงดังตัวอยางตอไปนี้
<img src = ”boat.gif” alt = ”Big Boat”>
alt attribute ใชบอกผูอานเมื่อเว็บบราวเซอรไมสามารถทําการแสดงรูปภาพนั้นออกทาง
หนาจอ ดังนั้นจากตัวอยางขางตน ถาไมสามารถทําการแสดงรูปภาพ เว็บบราวเซอรจะทําการ
แสดงขอความ ”Big Boat” แทน

10. HTML Backgrounds


HTML สามารถที่จะแสดงพื้นหลัง (Background) เปนสี และก็สามารถแสดงเปนรูปภาพ
ได Tag <body> จะประกอบดวย 2 Attribute ซึ่งสามารถกําหนดใหเปนสี หรือรูปภาพก็ได
10.1 Bgcolor
bgcolor attribute จะทําการกําหนดพื้นหลังของเว็บเพจใหมีสีสัน โดยคาของ bgcolor จะ
ประกอบดวยเลขฐานหก (Hexadecimal Number), คาสี RGB หรือชื่อของสี
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
จากตัวอยางขางตนหมายถึงการกําหนดใหพื้นหลังมีสีดํา
10.2 Background
Background Attribute สามารถทําการกําหนดพื้นหลังของเว็บเพจใหเปนรูปภาพได โดย
คาของ Background ก็คือ URL นั่นเอง
<body background="clouds.gif"> หรือ
<body background="http://www.it.msu.ac.th/image/clouds.gif">
หลักการเขียนภาษา HTML 14

11. HTML Colors


สีที่แสดงในเว็บบราวเซอรจะมีสวนประกอบของ สีแดง, สีเขียว และสีน้ําเงิน (RGB) ซึ่งสี
ตาง ๆ จะถูกกําหนดโดยเลขฐาน 16 จะมีคาต่ําสุดคือ 0 (hex #00) และมีคาสูงสุดคือ 255 (hex
#FF)
Color Color HEX Color RGB
ดํา #000000 rgb(0,0,0)
แดง #FF0000 rgb(255,0,0)
เขียว #00FF00 rgb(0,255,0)
น้ําเงิน #0000FF rgb(0,0,255)
เหลือง #FFFF00 rgb(255,255,0)
เขียวอมฟา #00FFFF rgb(0,255,255)
ชมพู #FF00FF rgb(255,0,255)
เทา #C0C0C0 rgb(192,192,192)
ขาว #FFFFFF rgb(255,255,255)

12. HTML Fonts


การกําหนดตัวอักษรใน HTML ใช Tag <font> ดังตัวอยางตอไปนี้
<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>
<p>
<font size="3" face="Times">
This is another paragraph.
</font>
</p>
หลักการเขียนภาษา HTML 15

แบบฝกหัดทายบท
1. โครงสรางของภาษา HTML ประกอบดวยอะไรบาง

2. คําสั่ง <!…> เปนคําสั่งที่ใชเพื่ออะไร


………………………………………………………………………………………………………..
3. ถาตองการใหพื้นหลัง (Background) มีสีสันจะตองใชคาํ สั่งอะไร
………………………………………………………………………………………………………..
4. ถาตองการกําหนดตัวอักษรใหมีลักษณะดังตอไปนี้
• ตัวหนา ตองใชคําสั่ง ……………………………………………………………..
• ตัวเอียง ตองใชคําสั่ง …………………………………………………………….
• ตัวขีดเสนใต ตองใชคําสั่ง ……………………………………………………….
5. ถาตองการแสดงสัญลักษณ ® ตองใชคําสัง่ อะไร
………………………………………………………………………………………………………..
6. Attribute หมายถึงอะไร
………………………………………………………………………………………………………..
7. การพิมพ Tag <b> และ <B> มีความเหมือนหรือแตกตางกันหรือไมอยางไร
………………………………………………………………………………………………………..
8. ถาตองการเวนวรรคในภาษา HTML ตองใชคําสั่งอะไร
………………………………………………………………………………………………………..
หลักการเขียนภาษา HTML 16

9. ถาตองการแบง Frame ใหมีสองคอลัมน ตองเขียนคําสัง่ อยางไร

10. ถาตองการเขียน Table ใหมีขนาด 3 คอลัมน และ 2 แถว ตองเขียนคําสั่งอยางไร

You might also like