56
ชุดคําส่ังหลักสาํ หรับสรางเว็บเพจ
ตามปกตเิ ว็บเพจจะสรางข้ึนดวยภาษา HTML (Hyper Text Markup
Language ) ซง่ึ มีคําสง่ั พ้ืนฐาน ดังตอไปนี้
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
และสิง่ ที่ตองการใหแสดงผลเมอ่ื ผานโปรแกรมเบราเซอร2 ท้ังขอความ(Text)
ภาพ(Image) การแสดงรายการ(List) และการเชื่อมโยง(Link) จะเพ่ิมคําส่งั อ่ืน
ๆ ไวภายใตคาํ สงั่ <BODY> เกอื บท้ังสิน้ ซงึ่ จะไดศึกษาในโอกาสตอไป
ขนาด ลกั ษณะ และสีของตัวอกั ษร
ขนาดของตัวอกั ษร
เราสามารถกาํ หนดขนาดของตัวอักษรได 2 วธิ ี
1. ในกรณที ่ีเปนหัวขอ (Heading) สามารถใชคําสง่ั ตอไปน้ี
<H1>ขนาดใหญสดุ </H1>
<H2>ขนาดใหญ</H2>
<H3>ขนาดกลาง</H3>
<H4>ขนาดปกติ</H4>
<H5>ขนาดเล็ก</H5>
<H6>ขนาดเล็กสุด<H6>
2. ในกรณที วั่ ไป จะใชคําสั่ง <FONT SIZE=คาตวั เลข> เชน
<FONT SIZE=3>ตัวอกั ษรขนาด 3</FONT> หรอื
<FONT SIZE=5>ตวั อักษรขนาด 5</FONT>
57
ลกั ษณะของตัวอกั ษร
ลกั ษณะของตวั อักษร สามารถกําหนดได 3 แบบคือ
<B>ตัวหนา</B>
<I>ตวั เอยี ง</I>
<U>ขดี เสนใตตัวอกั ษร</U>
ชนิด(Font) ของตัวอกั ษร
การเลอื ก Font ของตวั อักษร สามารถทําไดโดยใชคาํ สง่ั ดังนี้
<FONT FACE="ชื่อFONT"> เชน
<FONT FACE="Ms Sans Serif">
สีของตัวอกั ษร
สีของตัวอักษร สามารถกําหนดได 2 แนวทางคือ
1. ใชคาํ สง่ั <FONT COLOR=ชื่อสี> เชน
<FONT COLOR=red>ตวั อกั ษรสแี ดง</FONT> หรอื
<FONT COLOR=green>ตวั อักษรสีเขยี ว</FONT>
2. ใชคําสัง่ <FONT COLOR=รหสั สี> เชน
<FONT COLOR=#FF00FF>ตัวอักษรสีชมพู</FONT> หรือ
<FONT COLOR=#0000FF>ตวั อกั ษรสีนํ้าเงิน</FONT>
ช่ือสที ใี่ ชแทนรหสั สีได
การกาํ หนดสีของตัวอักษร (เพิ่มเติม)
ตามปกติสีของตวั อักษรสามารถกําหนดโดยใชคําสง่ั <FONT COLOR="ชอ่ื สี"> ได
อยแู ลว แตยังมวี ธิ กี ําหนดสีของตัวอกั ษรในกรณีอื่น ๆ อีก ดังน้ี
กรณีท่ี 1 กาํ หนดสีของตัวอักษรใหเปน= สีเดียวกันทัง้ หนา
ทาํ ไดโดยการเพ่มิ เตมิ คําสงั่ TEXT ใน <BODY> ดงั น้ี
<BODY TEXT="ช่อื สี">
เชน
<BODY TEXT=green>
เปนการกําหนดใหตวั อกั ษรมีสเี ขียวทั้งเอกสาร
กรณีที่ 2 กาํ หนดสใี หกับตัวอักษรที่ใชในการเชื่อมโยง (Link)
ตามปกตสิ ขี องตัวอกั ษรท่ถี ูกกําหนดใหเปนจดุ เช่อื มโยงจะมีสีดังน้ี
กอนคล๊ิกจดุ เช่อื มโยง (เรยี กวา link) ตวั อกั ษรจะมีสีน้าํ เงิน (blue)
ขณะคลก๊ิ ท่จี ุดเชอ่ื มโยง (เรยี กวา active link หรอื alink) ตวั อักษรจะมีสีแดง
(red)
เมื่อคล๊ิกท่ีจดุ เชอื่ มโยงไปแลว (เรยี กวา visisted link หรอื vlink) ตัวอกั ษรจะมีสี
มวง (purple)
58
อยางไรก็ตามเราสามารถเปลีย่ นสขี องกรณตี าง ๆ ขางตนได โดยใชคาํ ส่งั LINK, ALINK และ
VLINK เพ่มิ เตมิ ไวท่ี <BODY> ดงั น้ี
<BODY LINK="ชอื่ สี" ALINK="ชือ่ สี" VLINK="ชือ่ ส"ี >
เชน
<BODY LINK=green ALINK=blue VLINK=brown>
เปนการกําหนดสีของตวั อกั ษรกอนคล๊ิกมีสีเขียว ขณะคลกิ๊ มสี ีนาํ้ เงิน และเม่ือคลิ๊ก
แลวจะเปลยี่ นเปนสนี ํา้ ตาล
ชุดคําสง่ั ในการกาํ หนดพ้ืนหลงั (Background)
พื้นหลัง หรอื Background ของเวบ็ เพจแตละหนา สามารถกําหนดในคาํ ส่ัง <BODY>
หรอื ในตารางสามารถกาํ หนดในคําสั่ง <TABLE> หรือ <TR> หรือ <TD> มวี ธิ กี าร
กาํ หนดได 2 แบบดงั นี้
แบบท่ี 1 การกําหนดพืน้ หลังเป=นสี ใชชดุ คําสง่ั ตอไปน้ี
bgcolor="ช่ือสี" หรอื bgcolor="รหสั ส"ี เชน
<BODY bgcolor=red> หรอื
<TABLE bgcolor=FF00FF> เปนตน
แบบที่ 2 การกําหนดพื้นหลังเป=นรปู ภาพ ใชชดุ คําสง่ั ตอไปน้ี
background="ชอื่ ไฟล"2 เชน
<BODY background="tree.gif"> หรือ
<TABLE background="marble.jpg"> เปนตน
การแทรกภาพ (Image)
การแทรกภาพ
ตามปกติภาพทจี่ ะใชแสดงในเวบ็ เพจ นิยมใชภาพที่มชี อ่ื สกุลของภาพเปน .JPG
หรอื .GIF เพราะเปนไฟลภ2 าพทม่ี ขี นาดเล็ก สามารถแสดงผลไดรวดเร็ว จงึ ไม
ตองเสยี เวลาในการรอใหภาพปรากฏนานเกินไป
การแทรกภาพใชคาํ สัง่ ดงั น้ี
<IMG SRC="ชื่อภาพ" WIDTH=ขนาดความกวาง HEIGHT=ขนาดความสูง>
เชนภาพชอื่ girl.jpg มขี นาดความกวาง 80 และความสงู 100 จะใชคําสั่งแสดง
ภาพเปน
<IMG SRC="girl.jpg" WIDTH=80 HEIGHT=100>
หรือในกรณที ต่ี องการแสดงภาพท่ีมีขนาดเทากบั ตนฉบับ ก็จะใชคาํ สัง่ เพียงสั้น
ๆ ดงั น้ี
59
<IMG SRC="ชอ่ื ภาพ"> เชน
<IMG SRC="girl.jpg">
คาํ สั่งทใ่ี ชประกอบกับคําส่งั แสดงภาพ
1. กาํ หนดใหภาพอยูทางซายและขอความ(ท่ตี ามมา) อยูทางขวา เพม่ิ คําส่งั
ALIGN=LEFT ไวในคาํ สัง่ แสดงภาพ เชน
<IMG SRC="boy.jpg" ALIGN=LEFT>
2. กําหนดใหภาพอยทู างขวาและขอความ(ท่ตี ามมา) อยทู างซาย เพ่ิม
คาํ สัง่ ALIGN=RIGHT ไวในคําสั่งแสดงภาพ เชน
<IMG SRC="boy.jpg" ALIGN=RIGHT>
3. กําหนดขนาดของชองวางระหวางภาพกับขอความ(ที่ลอมรอบ) ในแนวนอน
ใชคาํ สัง่ HSPACE=คาตวั เลข(pixel) เชน
<IMG SRC="boy.jpg" HSPACE=20>
4. กําหนดขนาดของชองวางระหวางภาพกับขอความ(ทีล่ อมรอบ) ในแนวดงิ่
ใชคาํ ส่งั VSPACE=คาตัวเลข(pixel) เชน
<IMG SRC="boy.jpg" VSPACE=20>
5. สามารถเขียนคําส่ังในขอ 1-4 ประกอบกันได เชน
<IMG SRC="boy.jpg" ALIGN=RIGHT VSPACE=20>
ชุดคาํ สงั่ พน้ื ฐานในการสรางตาราง
ตวั อย8างท่ี 1
คําส่ังสําหรบั การสรางตารางท่ีมี 1 แถว 1 คอลัมน2ประกอบดวยคําส่ังดังตอไปน้ี
<TABLE BORDER=1> คําส่งั เปดg สําหรับการสรางตาราง
<TR> คําสงั่ เปgดสาํ หรบั การสรางแถว
<TD>ขอมูลในคอลัมน2 1</TD>
</TR> คาํ สง่ั สรางคอลมั นท2 ี่ 1
</TABLE> คําส่ังปgดสําหรับการสรางแถว
คําสง่ั ปgดสําหรับการสรางตาราง
จะไดตารางลกั ษณะนี้
ขอมูลในคอลัมน2 1
ตวั อยา8 งท่ี 2
คาํ สัง่ สําหรบั การสรางตารางท่ีมี 1 แถว 2 คอลัมนป2 ระกอบดวยคาํ สง่ั ดงั ตอไปน้ี
<TABLE BORDER=1> คาํ ส่งั เปดg สําหรับการสรางตาราง
<TR> คําสง่ั เปgดสาํ หรับการสรางแถว
<TD>ขอมูลในคอลัมน2 1</TD>
<TD>ขอมลู ในคอลมั น2 2</TD> คาํ ส่ังสรางคอลมั น2ที่ 1
คําสง่ั สรางคอลมั น2ที่ 2
60
</TR> คาํ สั่งปgดสําหรบั การสรางแถว
</TABLE> คําสั่งปดg สําหรบั การสรางตาราง
จะไดตารางลักษณะน้ี
ขอมลู ในคอลัมน2 1 ขอมูลในคอลัมน2 2
ตวั อยา8 งท่ี 3
คาํ สั่งสาํ หรบั การสรางตารางที่มี 2 แถว 2 คอลัมนป2 ระกอบดวยคําสั่งดงั ตอไปนี้
<TABLE BORDER=1> คาํ สัง่ เปดg สําหรับการสรางตาราง
<TR> คําสั่งเปดg สาํ หรับการสรางแถวที่ 1
<TD>ขอมูลในแถว 1 คอลัมน2 1</TD> คาํ สัง่ สรางคอลมั น2ท่ี 1
<TD>ขอมูลในแถว 1 คอลมั น2 2</TD> คําส่ังสรางคอลมั น2ที่ 2
</TR> คาํ สัง่ ปดg สําหรับการสรางแถวท่ี 1
<TR> คาํ สัง่ เปgดสาํ หรบั การสรางแถวท่ี 2
<TD>ขอมลู ในแถว 2 คอลัมน2 1</TD> คําส่ังสรางคอลัมน2ที่ 1
<TD>ขอมลู ในแถว 2 คอลัมน2 2</TD> คําสง่ั สรางคอลมั นท2 ่ี 2
</TR> คาํ สั่งปgดสําหรบั การสรางแถวท่ี 2
</TABLE> คําสง่ั ปgดสาํ หรับการสรางตาราง
จะไดตารางลักษณะน้ี
ขอมูลในแถว 1 คอลัมน2 1 ขอมลู ในแถว 1 คอลมั น2 2
ขอมลู ในแถว 2 คอลัมน2 1 ขอมลู ในแถว 2 คอลัมน2 2
การใชตารางชว8 ยนาํ เสนองาน
นอกจากตารางจะใชในการนําเสนอขอมูลแลว เรายังสามารถใชชุดคําส่งั ของ
ตารางชวยนาํ เสนองานในรปู แบบอน่ื ๆ ไดอีก เชน
ตัวอย8างท่ี 1 ช8วยสรางหัวขอเรื่อง
ใชหลกั การสรางตารางที่มี 1 แถว และ 1 คอลัมน2 ประกอบดวยชดุ คําส่ังดังตอไปน้ี
<TABLE width=50% border=5>
<TR bgcolor=brown>
<TD align=center><font color=white>ของฝากจากเชียงใหม</font></TD>
</TR>
</TABLE>
61
จะไดงานลกั ษณะน้ี
ของฝากจากเชียงใหม8
ตวั อย8างท่ี 2 การนําเสนองานทีม่ ีลกั ษณะเปน= คอลัมน>
เชน 2 คอลมั น2 ก็ใชหลักการสรางตารางท่มี ี 1 แถว และ 2 คอลมั น2 ไมตองมีเสนตาราง
แลวนําขอมลู ไปบรรจไุ วในแตละสวนก็จะไดงานตามตองการ ชดุ คําส่งั มดี งั ตอไปนี้
<TABLE BORDER=0>
<TR>
<TD>ขอมูลในคอลัมน2 1</TD>
<TD>ขอมลู ในคอลมั น2 2</TD>
</TR>
</TABLE>
จะไดผลงานลักษณะนี้
คณะกรรมการนักเรียนจัดกิจกรรม
แ ข ง ขั น ก รี ฑ า สี ร ะ ห ว า ง ค ณ ะ
ป ร ะ จํ า ปl ก า ร ศึ ก ษ า 2547
ประกอบดวยคณะเทอดจรรยา
คณะสามัคคี คณะศรีวัฒนา คณะ
การุณรักษ2 และคณะภักดิ์พิรีย2 เมื่อ
วันศุกร2ท่ี 5 พฤศจิกายน 2547
ณ สนามโรงเรียนยุพราชวิทยาลัย
โดยมีผูอํานวยการประดิษฐ2 จันทร2
แสนตอ เปนประธานในพิธเี ปดg และ
พิธปี ดg การแขงขัน
62
ชุดคําส่งั ในการเชื่อมโยง (Link)
มีอยู 3 แบบ ดังนี้คือ
แบบที่ 1 การเช่อื มโยงไปยังขอมูลส8วนอ่นื ๆ ในไฟลเ> ดียวกัน
ประกอบดวยชดุ คําสัง่ ดังตอไปน้ี
<A HREF="ชื่อไฟลเ2 ดิม#ชื่อสวนทเ่ี ช่ือมโยง">ขอความ</A>
เชน
<A HREF="resume.html#education">แนะนําตวั เอง</A>
หมายเหตุ จะตองมีการกาํ หนดชือ่ education ไวตนบรรทัดที่ตองการ
เช่ือมโยงไป (ในไฟล2 resume.html) ดวยคําส่ัง
<A NAME="education">
แบบที่ 2 การเช่ือมโยงไปยังไฟล>อืน่ ที่อยูใ8 นเคร่อื งเดยี วกนั
ประกอบดวยชดุ คําสงั่ ดังตอไปน้ี
<A HREF="ช่อื ไฟล"2 >ขอความ</A>
เชน
<A HREF="name.html">แนะนําตวั เอง</A>
แบบที่ 3 การเชอ่ื มโยงไปยังไฟล>อนื่ ท่ีอย8ูคนละเครือ่ ง
ประกอบดวยชดุ คําสั่งดงั ตอไปนี้
<A HREF="ช่ือ URL และไฟล2">ขอความ</A>
เชน
<A HREF="http://www.hotmail.com">www.hotmail.com</A>
ชุดคาํ ส่ังในการแสดงรายการ
1. การแสดงรายการแบบมีลําดบั (Order List)
ใชแสดงรายการส่งิ ของทต่ี องแสดงไปตามลาํ ดับ ประกอบดวยชุดคําสง่ั ดงั ตอไปน้ี
<OL>
<LI>คณะเทอดจรรยา
<LI>คณะสามคั คี
<LI>คณะศรีวัฒนา
<LI>คณะการุณรักษ2
63
<LI>คณะภกั ดิ์พิรีย2
</OL>
ผลลพั ธท2 ่ไี ดมลี กั ษณะดงั น้ี
1. คณะเทอดจรรยา
2. คณะสามคั คี
3. คณะศรวี ฒั นา
4. คณะการุณรักษ2
5. คณะภักดพิ์ ริ ีย2
2. การแสดงรายการแบบไม8มีลาํ ดับ (Unorder List)
ใชกับรายการส่ิงของท่ีไมตองมีลําดับ หรอื ลาํ ดบั ไมสําคัญ ประกอบดวยชดุ คาํ ส่ัง
ดงั ตอไปน้ี
<UL>
<LI>เชยี งใหม
<LI>ขอนแกน
<LI>อยุธยา
<LI>เพชรบุรี
<LI>ภูเกต็
</UL>
ผลลัพธท2 ไ่ี ดมลี ักษณะดังน้ี
เชยี งใหม
ขอนแกน
อยุธยา
เพชรบรุ ี
ภูเก็ต
64
แนวทางในการสรางเมนู
1. ดาวน2โหลดภาพแบค็ กราวนด2 bg17.gif และภาพตึกยุพราช yupparaj.jpg ไวใน My
Documents
2. สรางเมนู ต้ังชอ่ื วา menu.html โดยใชคําส่งั สรางตาราง ดงั นี้
สรางตารางที่ 1 (กาํ หนดความกวาง 100%) ประกอบดวยบรรทดั จํานวน 2
บรรทัด และ 1 คอลมั น2 ดงั น้ี
<table width=100% border=1>
<tr>
<td>ขอมลู ในบรรทัดที่ 1</td>
</tr>
<tr>
<td>ขอมลู ในบรรทดั ที่ 2</td>
</tr>
</table>
ในบรรทดั แรกหรือบรรทัดบน ใหบรรจุภาพแบค็ กราวนด2และขอความตามที่
โจทยก2 าํ หนด ในบรรทดั ที่ 2 ใหบรรจุคําส่งั สรางตารางอกี 1 ตาราง (เรยี กวา
ตารางที่ 2)
ตารางที่ 2 มี 1 บรรทดั แตมี 2 คอลมั น2 กําหนดความกวางคอลมั น2แรกเปน
30% ดงั ชุดคาํ สัง่ คือ
<table width=100% border=1>
<tr>
<td width=30%>ขอมูลในบรรทัดที่ 1 คอลมั น2ที่
1</td>
<td>ขอมูลในบรรทัดท่ี 1 คอลมั นท2 ่ี 2</td>
</tr>
</table>
ขอมลู ในคอลัมนท2 ี่ 1 ซึง่ อยูซายมอื บรรจุคําสั่งสรางตาราง (เรยี กวาตารางที่ 3)
สวนคอลัมนท2 ี่ 2 ท่ีอยูขวามือ บรรจุภาพอาคารตกึ ยุพราช
ตารางที่ 3 มี 9 บรรทัดและ 1 คอลัมน2 กาํ หนดความกวางเปน 100% ดัง
ชุดคําสง่ั คือ
65
<table width=100% border=1>
<tr>
<td>ขอมลู ในบรรทดั ที่ 1</td>
</tr>
<tr>
<td>ขอมลู ในบรรทัดท่ี 2</td>
</tr>
<tr>
<td>ขอมลู ในบรรทดั ที่ 3</td>
</tr>
<tr>
<td>ขอมูลในบรรทดั ท่ี 4</td>
</tr>
<tr>
<td>ขอมลู ในบรรทดั ที่ 5</td>
</tr>
<tr>
<td>ขอมลู ในบรรทดั ที่ 6</td>
</tr>
<tr>
<td>ขอมูลในบรรทัดที่ 7</td>
</tr>
<tr>
<td>ขอมลู ในบรรทัดท่ี 8</td>
</tr>
<tr>
<td>ขอมูลในบรรทัดท่ี 9</td>
</tr>
</table>
ในแตละบรรทัดกําหนดสีพืน้ และขอความตามที่กําหนดในใบงาน
ภาษา html คือภาษาคอมพิวเตอรท2 ี่ใชในการสรางโฮมเพจเนอ่ื งจากสามารถ Run คําส่ังตางๆ ไดบน
โปรแกรม Web Browser ทัว่ ไป โรงเรยี นพระกมุ ารรอยเอ็ดไดกาํ หนดหลักสูตรภาษา html ใหกบั นักเรียน
ชั้น ม.4 ซ่งึ ในปlการศึกษา 2559 นี้ นกั เรยี นจะสามารถใชคําส่ังตางๆ ไดเพื่อเปนพืน้ ฐานในการสราง โฮมเพจ
ทัว่ ไป และพัฒนาถึงขัน้ Dynamic Page
66
ความหมายของ HTML โครงสรางของภาษา HTML คําสงั่ พื้นฐานท่ัวไปของภาษา html
ตัวอยา8 ง code html
แสดงความคดิ เหน็ เก่ียวกบั การใชภาษา HTML
ความหมายของ HTML
HTML หรือ HyperText Markup Language เปนภาษาคอมพิวเตอรร2 ูปแบบหน่ึง ท่มี โี ครงสรางการเขยี น
โดยอาศยั ตัวกาํ กับ (Tag) ควบคุมการแสดงผลขอความ, รปู ภาพ หรือวัตถุอ่ืนๆ ผานโปรแกรมเบราเซอร2 แต
ละ Tag อาจจะมสี วนขยายที่เรียกวา Attribute สําหรับระบุ หรือควบคุมการแสดงผล ของเวบ็ ไดดวยHTML
เปนภาษาท่ถี ูกพัฒนาโดย World Wide Web Consortium (W3C) จากแมแบบของภาษา SGML
(Standard Generalized Markup Language) โดยตัดความสามารถบางสวนออกไป เพื่อใหสามารถทํา
ความเขาใจและเรียนรูไดงาย และดวยประเดน็ ดังกลาว ทําใหบริการ WWW เติบโตขยายตวั อยางกวางขวาง
ตามไปดวย Tag
Tag เปนลกั ษณะเฉพาะของภาษา HTML ใชในการระบรุ ูปแบบคําสั่ง หรอื การลงรหัสคําสง่ั HTML ภายใน
เครือ่ งหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบงได 2
ลักษณะ คือTag เดี่ยวเปน Tag ทีไ่ มตองมีการปgดรหัส เชน <HR>, <BR> เปนตน
Tag เปgด/ปgด
เปน Tag ท่ีประกอบดวย Tag เปgด และ Tag ปดg โดย Tag ปดg จะมีเคร่ืองหมาย slash
( / ) นาํ หนาคาํ สง่ั ใน Tag นั้นๆ เชน <B>…</B>, <BLINK>…</BLINK> เปนตน
กลบั ขางบน
โครงสรางของภาษา HTML
ไฟลเ2 อกสาร HTML ประกอบดวยสวนประกอบสองสวนคอื Head กับ Body โดยสามารถเปรียบเทียบได
งายๆ ก็คือ สวน Head จะคลายกบั สวนทเี่ ปน Header ของหนาเอกสารท่วั ไป หรือบรรทัด Title ของ
หนาตางการทํางานในระบบ Windows สําหรบั สวน Body จะเปนสวนเน้ือหาของเอกสารนน้ั ๆ โดยทง้ั สอง
สวนจะอยูภายใน Tag <HTML>…</HTML>
<html>
<head>
<tag คําสั่ง>
</head>
<body>
<tag คําสัง>
</body>
</html>
กลับขางบน
67
คาํ ส่งั พื้นฐานทั่วไปของภาษา html
คําสัง่ ความหมาย รูปแบบ
<title> กําหนดขอความบนไต <head>
เติลบา เปนคาํ ส่ังในใน <title>ขอความ</title>
สวน <head> </head>
<background> ใชรวมกับ <body> <body background="ชือ่ .นามสกุลรปู ภาพ">
หรือ <table> เพ่ือ
กําหนดพ้ืนหลังเปน
รูปภาพ
<bgcolor> ใชรวมกบั <body>
หรือ <table> เพือ่ <body bgcolor=ช่ือสี>
กาํ หนดสีของพื้นหลัง
แสดงขอความ
<font กาํ หนดสขี องขอความ <font color=ชือ่ สี size="ขนาดกาํ หนดไดตงั้ แต 1 ถงึ
color กาํ หนดขนาดของ 7" face="ชนดิ ของตัวอักษรเชน Angsana new เปน
size ขอความ ตน">ขอความ</font>
face> กําหนดชนดิ ของ
ขอความ
<b> ขอความหนา <b>ขอความ</b>
<i> ขอความเอียง <i>ขอความ</i>
<u> ขอความขีดเสนใต <u>ขอความ</u>
<marquee> ทําใหขอความเล่ือน <marquee>ขอความ</marquee>
<marquee จากซายไปขวา <marquee behavior=alternate>ขอความ</
behavior=alternate> ทาํ ใหขอความเล่ือน marquee>
จากซายไปขวาแลว
ยอนกลบั
<br> ขึ้นบรรทดั ใหม <br>
<hr> ขีดเสน <hr>
แสดงรูปภาพ
<img กาํ หนดรูปภาพ
src
alt กาํ หนดขอความเมื่อ <img src="ชอื่ .นามสกลุ ของภาพ" width="ความกวาง"
width
height> เอาเมาส2วางบนภาพ height="ความยาว" alt="ขอความ"> เชน <img src=
กาํ หนดความกวาง "pic1.jpg width="80" height="250" alt="ภาพหมูอร
ของภาพ เอยหมูอวน">
กําหนดความยาวของ
ภาพ
68
<a กาํ หนดการเช่ือมโยง <a href="จดุ เชอื่ มโยง" target="ลกั ษณะการเปgด
href
target> กําหนดจุดเช่อื มโยง หนาตาง">ขอความ</a> เชน
กาํ หนดการเปดg <a href="http://www.holy.ac.th" target=
หนาตางใหม "_blank">โฮมเพจโรงเรยี นพระกมุ ารรอยเอ็ด</a>
สรางตาราง
<table กาํ หนดความกวาง เชน <table width="80%" bgcolor=blue border=
width ของตาราง "2" bordercolor=red>
bgcolor กําหนดสพี ื้นของ <tr>
border ตาราง <td>ฟุตบอล</td>
bordercolor> กาํ หนดความหนาของ <td>วอลเลบอล</td>
<tr> เสนขอบ <tr>
<td> กาํ หนดสขี องเสนขอบ จะได ตาราง 1 แถว 2 สดมน2 ความยาว 80% ของ
กําหนดจํานวนแถว หนาจอ สีนา้ํ เงิน และขอบ 2 pixel สีแดง สดมน2ท่ี 1 มี
(แนวนอน) ขอความ ฟุตบอล สดมนท2 ี่ 2 มีขอความวา วอลเลบอล
กาํ หนดจํานวนสดมน2
(แนวตั้ง)
rowspan รวมแถว <td rowspan="จาํ นวน cell ที่จะรวม">
colspan รวมสดมน2 <td colspan="จาํ นวน cell ท่ีจะรวม">
กลบั ขางบน
ตวั อยา8 ง code html
<html>
<head>
<title>ทดสอบการสรางตาราง</title>
</head>
<body background="Picforweb/04_2.jpg">
<center><table width="80%" border="1" bordercolor=blue>
<tr>
<td colspan="4" bgcolor=black><font size="5" color=yellow><b><marquee behavior=
"alternate">โรงเรียนพระกุมารรอยเอ็ด</marquee></b></font></td>
</tr>
<tr>
<td rowspan="3" bgcolor=blue border="1" bordercolor=black width="33%"><center><img
src="Picforweb/b_1.jpg" widht="80" height="100" alt="อาคารมีคาแอล"></center></td>
<td bgcolor=pink ><center><font size="5" color=red face="AngsanaUPC"><b><a href=
"history.htm" target="_blank">ประวัติโรงเรยี น</a></b></font></center></td>
<td bgcolor=gold><center><font size="5" color=red face="AngsanaUPC"><b><a href=
"menager.htm" target="_blank">ผูบรหิ าร</a></b></font></center></td>
69
</tr>
<tr>
<td bgcolor=pink><center><font size="5" color=red face="AngsanaUPC"><b><a href=
"menager2.htm" target="_blank">แผนผงั การบริหารงาน</a></b></font></center></td>
<td bgcolor=gold><center><font size="5" color=red face="AngsanaUPC"><b><a href=
"map.htm" target="_blank">แผนผงั โรงเรียน</a></b></font></center></td>
</tr>
<tr>
<td bgcolor=pink><center><font size="5" color=red face="AngsanaUPC"><b><a href=
"vision.htm" target="_blank">ปรัชญา-คําขวญั </a></b></font></center></td>
<td bgcolor=gold><center><font size="5" color=red face="AngsanaUPC"><b><a href=
"taecher.htm" target="_blank">บุคลกร</a></b></font></center></td>
</tr>
</table></center>
<br>
<hr>
<center><a href="http://www.holy.ac.th" target="_blank"><b>โฮมเพจโรงเรยี นพระกมุ ารรอยเอ็ด
</b></a></center>
<hr>
</body>
</html>
ผลลพั ธ>
ประวัติโรงเรยี น ผบู ริหาร
แผนผังการบริหารงาน แผนผงั โรงเรยี น
ปรชั ญา-คาํ ขวัญ บคุ ลกร
โฮมเพจโรงเรยี นพระกุมารรอยเอ็ด
แสดงความคิดเหน็ เก่ยี วกับการใชภาษา HTML
กลบั ขางบน
70
บทที่ 8
การสราง Server จาํ ลอง
Server จําลองเปนการนําคอมพิวเตอร2สวนบุคคลมาทําใหมีคุณสมบัติในการใหบริการ
โปรแกรม Server เรยี กโปรแกรมเหลานีว้ า WAMP (Windows, Apache, MySQL และ PHP)
โปรแกรมทีส่ ราง Server จําลอง
สรางประจําเคร่ือง นําไปใชที่อ่ืนตองยกตัวเครื่องคอมพิวเตอร2ไปดวย โปรแกรมเหลาน้ีไดแก
AppServ, XAMPP, WMServer หากตองการจํานําขอมูลไปใชกับเคร่ืองอ่ืน ๆ จะตองติดตั้ง
โปรแกรมใหม
คัดลอกนําไปใชกบั คอมพิวเตอร2เคร่ืองใด ๆ ก็ได ไมตองตดิ ตงั้ โปรแกรมใหม โปรแกรมเหลาน้ี
ไดแก Server2Go, USB WEBServer สามารถเขยี นลงบน CD-ROM หรอื ไดรฟ2 พกพา
โปรแกรมทีใ่ ชทาํ งานรวม
Text Editor ในท่ีน้ีแนะนาํ ใหติดตัง้ Edit Plus เพื่อแกไขคา Config
การติดตั้ง Server2Go
1. ดาวน2โหลดโปรแกรมจาก http://www.server2go-web.de/download/download.html
Download
2. แตกไฟล2ดวย Winrar หรอื Winzip จะไดโฟลเดอร2
71
3. ไฟลท2 ั้งหมดนเ้ี มอ่ื นาํ ไปเขยี นบน CD-ROM แลวนําไปใชงาน จะสามารถทํางาน autorun ได
หลังจาก Download มาแลวแตก zip คุณจะเห็นโครงสราง File ท้ังหมดออกมา File หลักๆท่ีใชงาน
ท่ตี องรจู กั มีดังนี้
autorun.inf เปน file autorun เรียก Server2Go.exe อีกทีใชสําหรับเวลา Write ท้ังหมด
ลง CD-ROM เมอื่ เสียบแผนแลวก็จะเรยี ก Server2Go.exe ทํางานทนั ที
logo.ico เปน icon ที่ใชรวมกับ autorun.inf
pms_config.ini เปน config file ท่ีใช set คาตางๆของ Server2Go เด๋ยี วจะอธบิ ายตอไป
Server2Go.exe เปน file หลักที่จะไปเปgดการทํางานของ Apache , MySQL และคาตางๆ
ของ PHP อีกที
splash.png เปนรูปภาพที่จะ Load ข้นึ เม่ือกดเรียก Server2Go ใหทาํ งานสามารถเปล่ียนให
เปนรปู ตามความตองการไดโดยกาํ หนดขนาด 600 x 250 pixels
ปรบั แต8ง pms_config.ini ใหเขาใจแลว Server2Go จะอยูใ8 นมอื คุณ
เปgดไฟล2 pms_config.ini ดวย text editor (แนะนําใหใช EditPlus) ข้ึนมาแลวลองดูโครงสราง File
ใน pms_config.ini นแี้ บงการปรบั แตงออกเปน 5 สวนคือ
[general] เปนขอมูลพนื้ ฐานของ Web Server น้ี มกี าร config ดังน้ี
ServerName คอื ช่ือของ Web Server นี้
UseSplash คอื รูปทีจ่ ะ Load ข้ึนตอนเปgด Server2Go ขนึ้ มาระบุเปนรูปอ่ืนๆก็ไดสนับสนุน
bmp, jpg, png, tif, ico, tga, pcx, psd
ShowStartupProgress คอื แสดงการ Load ขึ้นตอนเปดg Server2Go
SplashTransparencyColor ระบบเปนตัวเลข RGB เพื่อให ภาพที่ Load ขน้ึ มาโปรงใส
KeepRunningAfterBrowserClose คอื ตองการใหเปดg Server2Go ทง้ิ ไวแมจะปgด Browser
ไปแลว 0 คอื เม่อื ปดg browser จะปดg server2go ดวย 1 คอื ปดg browser แต server2go ยงั
เปgดคงไวอยู
ShowTrayIcon แสดง icon ท่ี System Tray หรอื ไม 0 คือไมโชว2 1 คือ โชว2
StartLocal ถาตองการใชงานบน harddisk กก็ ําหนดดังนี้
72
เลือก 0 เพ่ือเปนกําหนดการทํางานใหมีการเขียนขอมูลระบบลงฮาร2ดดิสก2 ไดแก จัดเก็บ
ฐานขอมูลไวท่ี MyS2GApp/Data (ขอนี้สําคญั จําไวใหดี หากยังไมไดเขียนขอมูลลงแผน ใหกําหนดเปน 0 หรอื
สามารถเขียนใส CD-ROM ได แตตองนําไปเขียนลงบนฮาร2ดดิสก2เคร่ืองอ่ืน โดยจะเห็นเพียง 2 โฟลเดอร2คือ
Server2Go และ MyS2GApp)
เลือก 1 เม่ือจัดทําขอมูลเสร็จแลวตองการเผยแพร หรือใส CD-ROM ไปใชงานในท่ีอื่น หรือ
การนําไปสาธิต นําเสนองาน สามารถแสดงผลไดแตจะบันทึกขอมูลไมไดเพราะ CD-ROM ไมสามารถบันทึกได
ตามปกติ (ขอน้ีก็สําคัญ จําไวใหดี หากตองการใหทํางานจาก CD-ROM ใหเปลี่ยนจาก 0 เปน 1 แลวจึงใช
โปรแกรม Write CD-ROM เชน Nero Burning Rom เปนตัวจัดการและใหสามารถเห็นแฟWม autorun.ini
อยนู อกสดุ หามเก็บซอนเขาไปในโฟลเดอร2 มฉิ ะน้นั จะเปgดตวั เองไมได)
AllowOnlySingleInstance ในกรณที ่มี กี ารใชระบบ Login
กําหนดค8า 1 จะ Login ไดคนเดียว เชน ใน MOODLE เขาระบบในฐานครูหรือ
ผูดูแลระบบ ตองการอยากรูการแสดงผลวาถาเปนนักเรียนเขาระบบจะเห็นอยางไร
ครหู รือผดู ูแลระบบตองออกจากระบบกอน จึงจะเขาสรู ะบบในฐานะนกั เรียนได
กําหนดมากกว8า 1 เชน 2 สามารถเขาสูระบบไดท้ัง 2 คนโดยเปgดหนาตางใหมสั่ง
File > New Window เม่ือไดหนาตางที่ 2 จะยังคงเปนชื่อผูเขาสูระบบท่ีมาจาก
หนาตางที่ 1 ท่ีหนาตางใดหนาตางหนึ่งใหคลิกออกจากระบบ แลวคนท่ีสองสามารถ
เขาสูระบบได (คลายกบั การทํางานแบบเครือขายที่มผี ู Login เขาระบบไดหลายคน)
ShowShutdownMessage เปนขอความทแ่ี สดงเวลา Shutdown ตัว Server2Go
[http] เปนการกําหนดขอมูลในสวนของ Webserver มีการ config ดงั นี้
HostName ระบุเปน ip ของเครื่องท่ีคุณใชงาน ถาใชงานสวนตัวไมยุงกับ IP Address ให
กาํ หนดเปน local IP นน้ั คือ 127.0.0.1
Port ระบุ port ของ Web Server เพื่อหลีกเลี่ยงจาก Port 80 ซ่ึงใชงานกับอินเทอร2เน็ตที่
เช่ือมตอมาจากภายนอก จึงกําหนดเปน Port ภายใน Server2Go เปน 4001 หากแกไขเปน
80 หรือไมระบุ Server2Go จะใชคา Port 81 ใหแทนโดยอัตโิ นมตั ิ
DefaultFile คืออินเด็กซ2ของโฮมเพจท่ีจะเปgด ถาไมระบุจะเปนโฮมเพจของ Server2Go
ไฟล2 index.php
DefaultRoot=htdocs เปน folder หรือ Document root ของ Website ท่ีจะตองนํา
แฟมW ขอมลู มาวางท่ี htdocs
DeleteHttpTemp กําหนด เปน 0, 1
เลอื ก 0 คือคงเกบ็ temp ทกุ อยางเอาไว
เลอื ก 1 คอื จะลบ File temp ทกุ อยางท้ิงเมื่อปดg Server2Go
HideTempFolder กาํ หนดเปน 0, 1
เลือก 0 ไมซอน Temp
เลอื ก 1 จะซอน Temp ตางๆ ไว
73
[database] เปนการกําหนดขอมูลในสวน MySQL มกี าร config ดังน้ี
UseMySQL กาํ หนดเปน 0, 1
เลอื ก 0 เพ่ือให Service MySQL Stop
เลอื ก 1 เพือ่ ให Service MySQL Start
LocalMirror ใชการทาํ สาํ รองฐานขอมลู ในเครอ่ื งท่ีใช กําหนดเปน 0, 1
เลือก 0 จะเขยี นฐานขอมูลลงตามทรี่ ะบุใน MirrorFolder
เลอื ก 1 เพือ่ ใหใช Mirror คาท่ีกาํ หนดไวจะหายไปเมื่อปดg โปรแกรม (คลายกับการทํา
Recover File คือเขียนและจัดการอะไรได แตปgดเคร่ืองแลวเปgดใหม คาดังกลาวจะ
หายไป)
OverwriteLocalMirror กําหนดเปน 0, 1
เลอื ก 0 เพอ่ื ใหเขยี นทับใน Mirror Folder แลวเก็บคาไวในฮาร2ดิสก2
เลอื ก 1 จะเขียนขอมูลใหมในแตละครงั้ ที่เปดg ขน้ึ มา
MirrorFolder กําหนดเปน path วาตองการ path ไหน ช่ืออะไร โปรแกรมจะ
แนะนาํ ไวท่ี =c:\MyS2GApp\ Data\ สามารถกาํ หนดเปนช่อื อืน่ ได
DeleteDatabaseFiles กําหนดเปน 0, 1
เลือก 0 ใหคงไฟล2ฐานขอมลู ไวบนฮารด2 ดิสก2
เลอื ก 1 ใหลบไฟลฐ2 านขอมูลท้งิ เมอ่ื ปดg Server2Go
MySQLPort กาํ หนด port ของ MySQL กําหนดเปน 7188
MySQLCmd กําหนด command เร่ิมแรกเมื่อ Start MySQL ในท่ีน้ีกําหนด --
skip-innodb โดย InnoDB ใชทํา Foreign Key ซึ่งจะทําการ Reference Index
แตละ Table ก็จะสามารถทําการ Cascade Delete, Update ถาไม Enable ก็จะ
ไดเปน MyISAM เราจะใช Foreign Key ไมไดครบั
HideMirrorFolder กําหนดเปน 0,1
เลือก 0 จะแสดง MirrorFolder เชน c:\MyS2GApp\ Data\
เลอื ก 1 จะซอน Folder น้ี
MirrorFolder มีไวทําไม กรณีน้ีถาเราเอา Server2Go ไปรันบน CD-ROM เชน การสงมอบงานให
ลกู คา พวกงาน PHP ตางๆ เราวางไวบน Server2Go เมื่อเรียกใชงาน แลวถาจาํ เปนตองมกี ารเขยี น Database
ระบบจะเอาไปเขียนลง MirrorFolder แทนที่จะเขียนใน Folder MySQL หลัก (เพราะเขียนลง CD-ROM
ไมไดน้ันเอง)
MySQLMode=LOCAL
กําหนดใหใชฟงก2ชัน MySQL จากตวั มนั เอง
กาํ หนด Network
[AdditionalParsing] เปนการกําหนด File เพิ่มเติมท่ีตองการใหเรียกใชเมื่อเปgดใช Server2Go [Path]
โดยปกติในตัว Server2Go จะกําหนด Path เรียก Server ตางๆไวเปนมาตรฐานแลว หากตองการแกไข
เพม่ิ เติม ใน Apache , MySQL , PHP ปกติจะถูก comment เอาไว
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
เอกสารประกอบการเรียนของโรงเรียนวิทยาศาสตร์จุฬาภรณราชวิทยาลัย นครศรีธรรมราช
Discover the best professional documents and content resources in AnyFlip Document Base.
Search