อ.ศศริ าภัคญ์ วศิรงศ์
1. ภาษา HTML และ เท็กซ์อิดเิ ตอร์
ความหมายของ HTML
HTML หรอื HyperText Markup Language เปน็ ภาษาคอมพิวเตอรร์ ูปแบบหน่ึง ทม่ี ลี กั ษณะเป็นภาษา
ในเชิง การบรรยายเอกสารไฮเปอรม์ ีเดีย (Hypermedia Document Description Language) เพื่อนาเสนอ
เอกสารนั้น เผยแพรใ่ นระบบเครือขา่ ยอินเตอร์เน็ต มีโครงสร้างการเขียน ท่ีอาศยั ตัวกากับ เรยี กวา่ แทก็ (Tag)
ควบคุมการแสดงผลของข้อความ, รปู ภาพ หรอื วตั ถุอื่นๆ ผ่านโปรแกรมเว็บเบราเซอร์ (Web Browser)
Tag
Tag เป็นลกั ษณะเฉพาะของภาษา HTML ใชใ้ นการระบรุ ปู แบบคาสงั่ หรือการลงรหัสคาสงั่ HTML ภายใน
เครือ่ งหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบง่ ได้ 2
ลกั ษณะ คอื
Tag เด่ยี ว เป็น Tag ทไ่ี ม่ต้องมีการปิดรหัส เชน่ <P>, <BR> เป็นต้น
Tag คู่ เป็น Tag ทปี่ ระกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครือ่ งหมาย slash ( / )
นาหนา้ คาส่งั ใน Tag นน้ั ๆ เชน่ <B>…</B>, <BLINK>…</BLINK> เป็นตน้
โครงสรา้ งเอกสาร HTML
ไฟลเ์ อกสาร HTML ประกอบด้วยส่วนประกอบสองสว่ นคอื Head กับ Body โดยสามารถ
เปรียบเทยี บไดง้ ่ายๆ ก็คือ สว่ น Head จะคลา้ ยกบั ส่วนทีเ่ ป็น Header ของหนา้ เอกสารทั่วไป หรอื
บรรทัด Title ของหน้าตา่ งการทางานในระบบ Windows สาหรับสว่ น Body จะเปน็ สว่ นเน้ือหาของเอกสาร
นน้ั ๆ โดยทั้งสองสว่ นจะอยู่ภายใน Tag <HTML>…</HTML>
การเขียนโปรแกรมด้วยภาษา HTML จะมโี ครงสรา้ งหลกั และการจดั วางคาส่ังหลกั ที่เป็น
มาตรฐานเหมอื นกันทวั่ โลก โดยจะประกอบดว้ ยคาสง่ั หลัก ๆ อยู่ 4 คาสั่งด้วยกันดงั นี้
1. <HTML>……….</HTML> เปน็ คาสงั่ หลกั ทที่ าหน้าท่ีบอกจดุ เร่ิมต้นและจดุ สน้ิ สุดของ
เอกสาร HTML
2. <HEAD>……….</HEAD> เป็นคาสง่ั ทท่ี าหน้าท่ีกาหนดส่วนหัวเร่อื ง
3. <TITLE>……….</TITLE>เปน็ คาสั่งทใี่ ช้กาหนดข้อความที่ตอ้ งการนามาแสดงผลบน
แถบ Title bar คาสง่ั นจ้ี ะอยู่ภายในคาส่ังส่วน <HEAD>……….</HEAD> โดยกาหนดความยาวของตัวอักษร
ไม่เกนิ 64 ตวั อักษร
4. <BODY>……….</BODY>เป็นคาสั่งทก่ี าหนดข้อความและรปู แบบของคาสงั่ ต่าง ๆ ท่ใี ช้
สาหรับปรับแตง่ เอกสารทจ่ี ะนาเสนอออกทางจอภาพ
เท็กซ์อิดเิ ตอร์ (Text Editor)
Text Editor (เท็กซอ์ ิดเิ ตอร์) คือ โปรแกรมท่ีใชส้ าหรับสรา้ งและแก้ไขข้อความในการสรา้ งเวบ็ เพจดว้ ย
ภาษา HTML นัน้ ต้องมีเคร่ืองมอื ท่ีใชใ้ นการเขียน และแกไ้ ขตัวอักษรซ่ึงเปน็ คาสงั่ ต่าง ๆปัจจบุ ันมีโปรแกรม
Text Editor หลายโปรแกรม เชน่ NotePad, EditPlus หรือโปรแกรม Dreamweaver ซ่งึ มีคุณสมบตั เิ ปน็ ทง้ั
โปรแกรมสาเร็จรปู ในการสรา้ งเวบ็ เพจด้วย ในบทเรียนชุดนี้ จะใชโ้ ปรแกรม Notepad ในการสรา้ งเว็บเพจ
ด้วยภาษา HTML
เร่มิ สร้างเวบ็ เพจด้วย NotePad
การสร้างเอกสาร HTML หรอื เว็บเพจ เป็นเร่ืองท่ีงา่ ยและสะดวก เพียงแตเ่ ปดิ โปรแกรม NotePad
<Start, Progra, Accessories, NotePad> แลว้ พมิ พ์คาส่งั HTML ลงไป จากน้ันก็ทาการจัดเกบ็ ไฟล์โดยตง้ั ชอื่
เป็นภาษาอังกฤษ ตัวพมิ พ์เล็ก และกาหนดนามสกลุ เป็น .html (ในตอนพิมพช์ ื่อไฟล์ แนะนาให้พิมพ์ช่ือและ
นามสกลุ ของไฟล์ไวใ้ นเคร่อื งหมายคาพูด เพ่ือปอ้ งกันมิให้โปรแกรม NotePad เติม
นามสกลุ .txt ตอ่ ท้าย) จากนั้นกเ็ ปดิ โปรแกรมเบราเซอร์ เช่น IE หรือ Firefox แลว้ เปิดไฟลเ์ อกสารเว็บที่สรา้ ง
เพอื่ ดผู ล
<HTML>
<HEAD>
<TITLE>...............</TITLE>
</HEAD>
<BODY>
...............
...............
</BODY>
</HTML>
คาส่ังในการเร่ิมตน้ ในการสรา้ งเวบ็ เพจ
คาสัง่ เรมิ่ ต้น
<HTML>..........</HTML>
คาส่ัง <HTML> เปน็ คาสั่งเรม่ิ ต้นในการเขียนโปรแกรมและคาส่งั </HTML> เป็นการสิ้นสดุ
โปรแกรม HTML คาส่งั นี้จะไม่แสดงผลในโปรแกรมเว็บเบราเซอร์ แต่ต้องเขียนเพื่อให้เกิดความเป็นระบบของ
งาน และเพ่ือจะให้รวู้ า่ เอกสารน้ีเป็นเอกสารของภาษา HTML
ส่วนหวั ของโปรแกรม
<HEAD>..........</HEAD>
คาสง่ั <HEAD> เปน็ คาสั่งทใ่ี ชก้ าหนดข้อความในสว่ นที่เปน็ ชือ่ เรื่องของไฟล์ HTML และภายใน
คาสง่ั <HEAD>...</HEAD> จะมีคาสง่ั ย่อยอีกคาส่ังหน่งึ คือ <TITLE>........</TITLE>
กาหนดขอ้ ความในส่วนหัวของโปรแกรมหรือไตเติลบาร์
<TITLE>..........</TITLE >
คาส่ัง <TITLE> เปน็ คาส่ังท่แี สดงชื่อของเอกสาร หรือชอื่ เรือ่ งของไฟล์ HTML ซงึ่ ข้อความภายใน
คาสั่งจะปรากฎหรอื แสดงผลในส่วนของไตเติลบาร์(Title Bar) ของโปรแกรมเวบ็ เบราเซอร์ แต่จะไมแ่ สดงใน
สว่ นของการแสดงผลในโปรแกรมเว็บเบราเซอร์
ส่วนเน้อื หาของเวบ็ เพจ
<BODY>..........</BODY>
คาสงั่ นีเ้ ปน็ ส่วนทีส่ าคัญในการแสดงผลในเว็บเบราเซอร์ ซง่ึ จะประกอบไปดว้ ยตัวอักษร รปู ภาพกราฟิก
ต่างๆ
2. การจดั รปู แบบเอกสาร
การจัดรปู แบบเอกสาร
การจัดรปู แบบของเอกสาร HTML โดยโปรแกรม notepad จะไม่เหมือนกบั การจัดในเอกสารอ่ืนๆ เช่น
เอกสาร Microsoft word คือ เม่ือต้องการขน้ึ บรรทัดใหม่ ในเอกสาร Microsoft word จะใช้ ปมุ่ Enter แต่
ในเอกสาร HTML การใช้โปรแกรม notepad เมื่อใชป้ มุ่ Enter ข้อความในเอกสารก็จะเรยี งต่อกันไปเร่ือย ๆ
ไม่ทาการข้นึ บรรทัดใหม่ให้ เนือ่ งจากภาษา HTML ไมส่ ามารถรบั รู้ได้วา่ จะมกี ารขึ้นบรรทัดใหม่ ดังนนั้ จงึ ต้องมี
คาสั่งสาหรับส่งั การให้ขน้ึ บรรทดั ใหม่ จะให้ผลเสมอื นการกด Enter บนคยี ์บอร์ด ของเอกสาร Microsoft
word ท่ัวไป
ในการจดั ย่อหนา้ และการเวน้ วรรคกต็ ามในภาษา HTML เชน่ เดียวกนั จาเปน็ ตอ้ งมีคาสั่งสาหรบั การ
จดั รูปแบบเอกสาร HTML ดว้ ย เช่น การส่งั ใหม้ กี ารเวน้ วรรคของข้อความ ภาษา HTML จะสามารถรบั รู้การ
เว้นวรรคไดเ้ พยี ง 1 วรรคเท่าน้ัน เพื่อใหก้ ารจดั รูปแบบเอกสาร HTML เรยี บรอ้ ย เป็นระเบียบและสวยงาม
จงึ จาเปน็ ในการเรยี นรู้คาสั่งสาหรับการจัดรูปแบบหนา้ เอกสาร
คาส่ังการจัดรปู แบบเอกสาร
1. คาสง่ั กาหนดลกั ษณะหัวเรือ่ ง (Heading) : <Hn>.....</Hn>
<Hn>....Heading Text ... </Hn>
ข้อความลกั ษณะหัวเรอ่ื ง จะกากับด้วยแท็ก <Hn> โดย
n คอื ตวั เลขแสดงขนาดของตวั อักษร ค่าของ n นั้นจะมีค่าอยู่ที่ 1 - 6
n = 1 จะมีขนาดตัวอกั ษรหัวเร่ืองใหญ่สดุ
n = 6 จะมีขนาดตวั อักษรหัวเรื่องเล็กสดุ
สามารถเพิ่ม/ลดขนาดโดยใช้เคร่ืองหมาย + หรอื - นาหนา้ ตวั เลขได้ เช่น -1 หรือ +5 เปน็ ต้น
ตัวอยา่ งการใชค้ าส่งั
<HTML>
<HEAD>
<TITLE>การกาหนด Heading</TITLE>
</HEAD>
<BODY>
Computer - Default Size
<H1>Computer - H1</H1>
<H2>Computer - H2</H2>
<H3>Computer - H3</H3>
<H4>Computer - H4</H4>
<H5>Computer - H5</H5>
<H6>Computer - H6</H6>
</BODY>
</HTML>
ผลลพั ธ์
Computer - Default Size
Computer - H1
Computer - H2
Computer - H3
Computer - H4
Computer - H5
Computer - H6
2. การขึน้ บรรทัดใหม่ : <BR>
<BR>
โดยปกติแล้ว ภาษา HTML จะไม่สามารถรบั รไู้ ด้วา่ จะมกี ารขึ้นบรรทัดใหม่ ดังน้นั ถา้ เราตอ้ งการ ให้เกดิ
การขึน้ บรรทดั ใหม่ บนเว็บเพจ เราจะต้องคาสงั่ <BR>
คาส่ัง < BR > เปน็ คาสง่ั ทกี่ าหนดจุดสนิ้ สดุ ของบรรทัด (break rule) แลว้ ทาการข้ึนบรรทดั ใหม่เพ่ือ
แสดงข้อความส่วนท่เี หลอื ในบรรทัดถัดไป คาสั่งนี้จงึ ให้ผลเสมอื นการกดคยี ์ ENTER บนคียบ์ อร์ดนนั่ เอง
ตวั อย่างการใชค้ าส่งั
<HTML>
<HEAD>
<TITLE>การการขนึ้ บรรทัดใหม่ : <BR></TITLE>
</HEAD>
<BODY>
Computer Education 01 <BR>
Computer Education 02
</BODY>
</HTML>
ผลลพั ธ์
Computer Education 01
Computer Education 02
ขอ้ สังเกต
คาสง่ั <BR> ส่วนใหญม่ ักนยิ มจะวางไวใ้ นตาแหนง่ สุดท้ายของประโยค โดยต้องการให้แสดงผลประโยค
ใหม่ในบรรทัดต่อมา คาสงั่ <BR> จะเป็นคาสั่งที่ไม่ ต้องมีคาสั่งปิด (Single Tag)
3. กาหนดค่าของการจดั ตาแหนง่ การแสดงผล : <P ALIGN = "LEFT/RIGHT/CENTER">.........</P>
<P ALIGN="LEFT/RIGHT/CENTER">..........</P>
เปน็ คาสั่งที่ทาการจัดตาแหนง่ ของการแสดงผลทางจอภาพ การท่จี ะแสดงตาแหนง่ ตา่ งๆ นั้นจะต้อง
อยู่ระหว่างคาสง่ั <P ALIGN="LEFT/RIGHT/CENTER">และปดิ ด้วย </P> ซงึ่ การทจ่ี ะให้ข้อความหรือรปู ภาพ
อยชู่ ิดซา้ ย กึ่งกลางและชดิ ขวานั้น จะต้องมีคุณสมบตั ิการจัดตาแหนง่ ของการแสดงผลดงั น้ี
align = "left" การกาหนดคา่ ของการจดั ตาแหน่งการแสดงผลอยู่ทางซา้ ย
align = "right" การกาหนดค่าของการจัดตาแหน่งการแสดงผลอยู่ทางขวา
align = "center" การกาหนดคา่ ของการจัดตาแหน่งการแสดงผลอยู่ตรงกลาง
ตัวอยา่ งการใช้คาสั่ง
<HTML>
<HEAD>
<TITLE> การจดั ตาแหน่งการแสดงผล : <P> </TITLE>
</HEAD>
<BODY>
<P ALIGN = "LEFT" > Computer Education </P>
<P ALIGN = "CENTER" > Computer Education </P>
<P ALIGN = "RIGHT" > Computer Education </P>
</BODY>
</HTML>
ผลลพั ธ์
Computer Education
Computer Education
Computer Education
ขอ้ สังเกต
ตาแหน่งการแสดงผลนน้ั จะมกี ารแสดงผลชิดซา้ ยทุกครั้งถ้าเราไมม่ ีการกาหนดค่าของการแสดงผล การ
จัดตาแหนง่ การแสดงผลข้อความหรือรปู ภาพให้อยกู่ ่ึงกลางของจอภาพนั้น เราสามารถกาหนดดว้ ยคา
วา่ CENTER เป็นคาสงั่ ไดเ้ ลยโดยเราจะเขยี นคาสั่งดังน้ี < CENTER >..........< /CENTER >
4. คาสงั่ สาหรบั จดั ขอ้ ความใหอ้ ยู่กึง่ กลางบรรทัด : <Center>.....</Center>
<CENTER>ข้อมูลทีต่ ้องการจัดตาแหนง่ </CENTER>
ปกติข้อมูลในเวบ็ เพจจะปรากฏชิดซ้าย แตด่ ว้ ยการใช้ <Center> จะทาใหข้ อ้ มลู ปรากฏอยู่ทีต่ าแหนง่
กึง่ กลางของหน้าเวบ็ เพจได้ โดยถา้ เราเปล่ียนแปลงขนาดของบราวเซอร์ ข้อมลู ท่ีถูกกาหนดใหอ้ ยกู่ ึ่งกลางหนา้ ก็
จะถกู จดั ตาแหน่งใหม่ให้อยู่ก่ึงกลางหน้าของเวบ็ เพจทีข่ นาดใหม่เชน่ เดิม
การใช้งาน <CENTER> มตี ัวอย่างดังน้ี
<HTML>
<HEAD>
<TITLE> จดั ขอ้ ความให้อยู่กึ่งกลางบรรทดั : <BR></TITLE>
</HEAD>
<BODY>
<CENTER>
การเขยี นเวบ็ เพจดว้ ยภาษา HTML <BR>
ขอให้นักศึกษาทุกคนตง้ั ใจเรียนนะคะ^^
</CENTER>
</BODY>
</HTML>
ผลลัพธ์
การเขยี นเวบ็ เพจดว้ ยภาษา HTML
ขอให้นักศึกษาทุกคนตั้งใจเรียนนะคะ^^
5. คาสง่ั สาหรับจดั แบบเอกสารตามที่กาหนด : <PRE>......</PRE>
<PRE>......................</PRE>
เปน็ การกาหนดตาแหน่งการแสดงผลตามรปู แบบท่ีเราได้ทาการจัดในไฟลต์ น้ ฉบับ โดยในคาส่งั นเ้ี รา
สามารถจัดตาแหน่งท่เี ราต้องการใหแ้ สดงผล โดยเรากาหนดดว้ ยคาส่งั <PRE> แล้วปิด </PRE> จะทาให้เรา
สามารถกาหนดตาแหนง่ การแสดงผลได้ แต่ถา้ เรากาหนดดว้ ย <P ALING="LEFT / RIGHT / CENTER"> การ
แสดงผลก็จะอยแู่ ค่ชิดซา้ ย ก่ึงกลาง และชิดขวาเทา่ นนั้ มกั จะใช้คาสัง่ น้ใี นกรณีทีน่ าข้อมลู จาก NotePad
หรือ Text Editor อ่ืนๆ มาแสดงผล โดยไมต่ ้องการให้เสียรปู แบบเดิม ซ่งึ จะตอ้ งกาหนดให้ใสแ่ ท็ก Pre กากับ
หัวท้ายของข้อมลู นนั้ ๆ แลว้ จึง Copy มา Paste ในเอกสาร HTML
ตวั อยา่ งการใช้คาส่ัง
<HTML>
<HEAD>
<TITLE> คาส่ังสาหรบั จดั แบบเอกสารตามทตี่ ้องการ </TITLE>
</HEAD>
<BODY>
<PRE>
ตัวอยา่ ง ทดสอบการพิมพ์โดยการเวน้ วรรคตามต้องการด้วยแท็ก PRE
รายรบั
ขายของ 2000 บาท
ดอกเบีย้ 3000 บาท
รายจ่าย
คา่ นา้ 5000 บาท
ค่าไฟ 8000 บาท
</PRE>
</BODY>
</HTML>
ผลลพั ธ์
ตวั อยา่ ง ทดสอบการพมิ พโ์ ดยการเวน้ วรรคตามต้องการด้วยแทก็ PRE
รายรบั
ขายของ 2000 บาท
ดอกเบี้ย3000 บาท
รายจา่ ย
คา่ นา้ 5000 บาท
คา่ ไฟ 8000 บาท
6. คาส่ังตเี ส้นบรรทดั หรือเส้นคน่ั แนวนอน : <HR>
<HR>
เปน็ คาส่ังท่ีแสดงเสน้ ขีดคัน่ ทางแนวนอน (horizontal rule) โดยอาจใช้เปน็ เสน้ แบง่ เน้อื หาระหว่างบท
หรือเป็นเสน้ ขดี คัน่ เพื่อความสวยงามและเปน็ ระเบยี บของเน้อื หา เป็นการกาหนดเส้นคั่นซ่งึ เปน็ คาสง่ั ที่ไมต่ ้องมี
คาส่ังปิด (Single Tag) แท็กน้ีจะมี Attriube หลายตัว เช่น
<hr width="ความยาวของเส้น มหี นว่ ยเปน็ Pixel หรอื % ก็ได้">
<hr width="60">
<hr width="20%">
<hr width="60%">
<hr width="n" align="LEFT/RIGHT/CENTER" size="n" noshade color="ส"ี >
ALIGN - การจัดวางตาแหน่งของเส้น
SIZE - การกาหนดขนาดความหนาของเส้น และสามารถกาหนดไดเ้ พยี งแบบเดยี วคือ pixel
NOSHADE - ไมต่ ้องแสดงเป็นแบบ 3 มิติ
COLOR - การระบุสีของเสน้ แสดงผลเฉพาะบน IE
ตวั อย่างการใชค้ าสัง่
<HTML>
<HEAD>
<TITLE> คาส่ังตเี สน้ บรรทดั หรือเสน้ คัน่ แนวนอน : <BR></TITLE>
</HEAD>
<BODY>
<CENTER>
วิทยาลัยเทคนิคบรู พาปราจีน <BR>
วิทยาลัยเกษตรและเทคโนโลยฉี ะเชิงเทรา <BR>
วทิ ยาลัยเทคนคิ นครนายก <BR>
<HR>
<HR Width = "50%" Align ="Center" Size="4" Color="Red">
</CENTER>
</BODY>
</HTML>
ผลลัพธ์ วิทยาลัยเทคนคิ บรู พาปราจีน
วิทยาลยั เกษตรและเทคโนโลยีฉะเชิงเทรา
วทิ ยาลัยเทคนิคนครนายก
คาสัง่ เพิ่มเตมิ ในการจัดรปู แบบเอกสารเว็บ
1. การย่อหนา้ ใหม่ (Paragraph Tag)
<P>
คาสัง่ < P > เปน็ คาสง่ั ท่สี งั่ ให้โปรแกรมเว็บเบราเซอร์ขึน้ ย่อหนา้ ใหม่ (paragraph)
ข้อสงั เกต จะเห็นได้ว่าการขึน้ บรรทัดใหม่ของคาส่ัง < BR > และ < P > นนั้ การเวน้ วา่ งระหว่างบรรทดั ของ
ท้งั สองมีความแตกต่างกนั โดยทค่ี าส่ัง < BR > ชอ่ งว่างระหว่างบรรทดั จะน้อยกวา่ คาส่งั < P >
2. คาสัง่ การเว้นวรรค
(Non Breaking Space) เปน็ คาสัง่ ชว่ ยใหเ้ ว้นวรรคระหวา่ งข้อความ เพราะปกตเิ บราเซอรจ์ ะ
แสดงช่องวา่ งจากการเคาะ Space Bar เพยี งชอ่ งเดยี ว แม้นวา่ ผ้สู ร้างจะเคาะไปหลายคร้ังกต็ าม
3. การจดั การตัวอกั ษร
การกาหนดลกั ษณะและแบบของตัวอักษร
เป็นการกาหนดลกั ษณะตวั อักษรแบบเจาะจงไม่ว่าจะแสดงบนบราวเซอร์ใด กจ็ ะแสดงผลเหมือนกนั เชน่
การกาหนดให้ตวั อักษรเป็นตัวหนา ตวั เอยี ง ตัวขดี ฆ่า ตัวขีดเส้นใต้ แสดงแบบเลขยกกาลังในสูตรทาง
คณติ ศาสตร์ หรือแสดงแบบตัวห้อยในสูตรทางวิทยาศาสตร์ เป็นต้น
1. คาสั่งสาหรับกาหนดอกั ษรตัวหนา (Bold) : <B> … </B>
<B>..........</B>
ใช้กาหนดข้อความที่อย่ภู ายในคาส่งั ให้แสดงผลด้วยตัวอกั ษรแบบตัวหนา (bold) มีจดุ ประสงค์เพ่ือเน้น
ขอ้ ความในประโยคนั้น
ตวั อย่างการใชค้ าสงั่
<HTML>
<HEAD>
<TITLE>การกาหนดตวั หนา</TITLE>
</HEAD>
<BODY>
การกาหนดตัวหนาใหก้ ับตัวอกั ษร<BR>
ตวั อักษรปรกติ COMPUTER <BR>
ตวั อักษรหนา <B>COMPUTER</B>
</BODY>
</HTML>
ผลลพั ธ์
การกาหนดตวั หนาให้กตั ัวอักษร
ตวั อักษรปรกติ COMPUTER
ตัวอกั ษรหนา COMPUTER
2. คาส่งั สาหรบั กาหนดอกั ษรตัวเอน (Italic) : <I> … </I>
<I>..........</I>
ใช้กาหนดขอ้ ความที่อย่ภู ายในคาสัง่ ให้แสดงผลด้วยตวั อกั ษรแบบเอน (Italic) มจี ุดประสงคเ์ พ่อื เน้น
ขอ้ ความในประโยคน้นั
ตัวอยา่ งการใชค้ าสัง่
<HTML>
<HEAD>
<TITLE>กาหนดอักษรตวั เอน </TITLE>
</HEAD>
<BODY>
การกาหนดอกั ษรตัวเอน <BR>
ตัวอกั ษรปรกติ COMPUTER <BR>
ตวั อักษรตวั เอน <I>COMPUTER</I>
</BODY>
</HTML>
ผลลัพธ์
การกาหนดอกั ษรตัวเอน
ตัวอกั ษรปรกติ COMPUTER
ตวั อกั ษรตัวเอน COMPUTER
3. คาสงั่ สาหรบั กาหนดอักษรขีดเส้นใต้ (Underline) : <U> … </U>
<U>..........</U>
ใช้แสดงข้อความแบบขีดเส้นใต้ (underline) ทง้ั น้เี พื่อเนน้ ข้อความในประโยคนน้ั
ตวั อยา่ งการใช้คาสั่ง
<HTML>
<HEAD>
<TITLE>การกาหนดการขดี เสน้ ใต้</TITLE>
</HEAD>
<BODY>
การกาหนดการขีดเส้นใต้ <BR>
ตัวอักษรปกติ COMPUTER<BR>
ตัวอกั ษรขดี เส้นใต้ <U> COMPUTER </U>
</BODY>
</HTML>
ผลลพั ธ์
การกาหนดการขีดเส้นใต้
ตวั อกั ษรปกติ COMPUTER
ตวั อกั ษรขีดเสน้ ใต้ COMPUTER
4. คาส่ังสาหรบั กาหนดตวั อักษรตัวขีดฆา่ : <S>..........</S>
<S>..........</S>
ใชแ้ สดงขอ้ ความแบบขดี ฆา่ ตวั อักษร ท้ังน้ีเพ่ือเน้นข้อความเปรียบเทียบหรอื ไม่ต้องการในประโยคนน้ั
ตวั อย่างการใชค้ าสงั่
<HTML>
<HEAD>
<TITLE> การกาหนดอักษรขีดเสน้ ใต้ </TITLE>
</HEAD>
<BODY>
กาหนดอักษรขีดเส้นใต้ <BR>
<S>Microsoft Windows 7</S>
</BODY>
</HTML>
ผลลพั ธ์
กาหนดอักษรขีดเสน้ ใต้
Microsoft Windows 7
5. คาส่ังสาหรบั กาหนดอักษรตัวกระพริบ (Blink) : <BLINK> … </BLINK>
<BLINK>..........</BLINK>
ใช้กาหนดแสดงข้อความแบบกระพรบิ จะมลี กั ษณะการแสดงผลเปน็ แบบตดิ - ดับ สลับกันไป
ตวั อยา่ งการใชค้ าสั่ง
<HTML>
<HEAD>
<TITLE>กาหนดอักษรตัวกระพรบิ </TITLE>
</HEAD>
<BODY>
การกาหนดอกั ษรตัวกระพริบ <BR>
<Blink>COMPUTER</Blink>
</BODY>
</HTML>
6. คาส่ังสาหรบั กาหนดอักษรให้เคลื่อนที่ (MARQUEE)
<MARQUEE> .......... </MARQUEE>
ใชส้ าหรับแสดงขอ้ ความแบบเคล่ือนที่ไปยงั ทิศทางทเ่ี ราต้องการ มีรปู แบบการใช้ดงั นี้
<marquee scrolldelay="ความเร็ว" direction="ทิศทางว่ิง">ขอ้ ความ</marquee>
- scrolldelay ใหแ้ ทนค่าดว้ ยความเรว็ เป็น ตัวเลข สว่ น direction ใสไ่ ดเ้ ฉพาะ
Up,Down,Left และ Right
ตัวอยา่ งการใชค้ าสงั่
<html>
<head>
<title>marque</title>
</head>
<body>
<center>
<marquee scrolldelay="100" direction="Right">WEBTHAIDD</marquee>
<marquee scrolldelay="100" direction="Left">WEBTHAIDD</marquee>
<marquee scrolldelay="100" direction="Up">WEBTHAIDD</marquee>
<marquee scrolldelay="100" direction="Down">WEBTHAIDD</marquee>
</body>
</html>
7. คาสัง่ สาหรับกาหนดแบบอกั ษรตัวหอ้ ยและแบบอกั ษรตวั ยก : <SUP>… /SUP> และ <SUB> …</SUB>
ขอ้ ความแบบฟังก์ช่ันทางคณิตศาสตร์ <SUP>.....</SUP>
ขอ้ ความแบบสูตรทางวทิ ยาศาสตร์ <SUB>.....</SUB>
การกาหนดแบบอกั ษรตัวหอ้ ยและแบบอักษรตัวยกในเวบ็ เพจนัน้ เราสามารถกาหนดขนาดของตัวอักษร
ไดด้ งั น้ี
ตวั อยา่ งการใชค้ าส่งั
<HTML>
<HEAD>
<TITLE>แบบอักษรตัวหอ้ ยและแบบอักษรตัวยก </TITLE>
</HEAD>
<BODY >
Computer<SUP>2</SUP> <P>
H<SUB>2</SUB>O<P>
</BODY>
</HTML>
ผลลัพธ์
Computer2
H2O
8. คาสงั่ สาหรับกาหนดรูปแบบตวั อักษร : <FONT FACE = "......."> … </FONT>
<FONT FACE="รูปแบบตวั อักษรที่ต้องการ" >..........</FONT>
การกาหนดรปู แบบของตวั อกั ษรในเวบ็ เพจท่เี ราตอ้ งการให้แสดงออกบนเว็บ
ตวั อยา่ งการใชค้ าสั่ง
<html>
<head>
<title>การกาหนดขนาดตวั อักษร</title>
</head>
<body>
<font face="Cordiaupc">HTML</font><br>
<font face="Ms sans serif">HTML</font><br>
<font face="AngsanaUPC">HTML</font><br>
<font face="arial">HTML</font><br>
</body>
</html>
ผลลพั ธ์
HTML
HTML
HTML
HTML
9. คาส่ังสาหรบั กาหนดขนาดตัวอักษร : <FONT SIZE = ขนาด> … </FONT>
<FONT SIZE="ค่ากาหนดขนาดของตวั อกั ษร">..........</FONT>
การกาหนดขนาดของตัวอกั ษรในเว็บเพจน้ัน เราสามารถกาหนดขนาดของตัวอักษรไดด้ ังน้ี คือ
· กาหนดเปน็ ตวั เลขซึง่ จะมีคา่ 1 - 7 โดยค่ามาตรฐานจะมีค่าจะอยู่ที่ 3 คา่ ตวั เลขทเ่ี ป็น 1 และ 2 นัน้ จะ
เป็นการยอ่ ขนาดของตวั อกั ษร และคา่ ตวั เลข 4 ถึง7 นั้นจะเปน็ การขยายขนาดของตัวอักษร
ตัวอย่างการใช้คาส่งั
<HTML>
<HEAD>
<TITLE>FONT SIZE </TITLE>
</HEAD>
<BODY >
<FONT SIZE="1">Computer</Font>
<FONT SIZE="2">Computer</Font>
<FONT SIZE="3">Computer</Font>
<FONT SIZE="4">Computer</Font>
<FONT SIZE="5">Computer</Font>
<FONT SIZE="6">Computer</Font>
<FONT SIZE="7">Computer</Font>
</BODY>
</HTML>
ผลลพั ธ์
Computer Computer Computer Computer Computer Computer
Computer
10. คาส่ังสาหรับกาหนดสีตัวอกั ษร : <FONT COLOR = รหัสสี> … </FONT>
<FONT COLOR="#RGB" หรือ กาหนดชื่อสที ่ีตอ้ งการ">..........</FONT>
ใช้การกาหนดให้ตวั อักษรหรอื ขอ้ ความมีสีอืน่ ต่างจากสีตวั อกั ษรทัว่ ไป หรอื ต้องการเน้นสสี ันเพื่อเพ่ิม
จุดเด่น ทาให้แปลกแตกต่างไป การระบคุ ่าสี สามารถใช้ได้ทง้ั ระบชุ อ่ื สี หรือค่าสีในระบบเลขฐาน 16
ตัวอย่างการใชค้ าสัง่
<HTML>
<HEAD>
<TITLE>FONT COLOR </TITLE>
</HEAD>
<BODY >
<FONT COLOR="Red">Computer</FONT>
<FONT COLOR="Green">Computer</FONT>
<FONT COLOR="Black">Computer</FONT>
</BODY>
</HTML>
ผลลัพธ์
Computer Computer Computer
11. คาสงั่ สาหรับกาหนดสีพื้นหลงั ของเอกสาร : <BODY BGCOLOR = รหสั สี> … </BODY>
การกาหนดสพี น้ื หลงั และการกาหนดสีของตัวอักษรน้นั จะทาการเขยี นในส่วนของคาสงั่ <BODY> โดยเรา
จะใชแ้ อตทรบิ ิวตม์ าเป็นตัวกาหนด
การกาหนดสีของพ้นื หลงั - การกาหนดสพี ื้นหลงั นั้น เราสามารถมรี ปู แบบการกาหนดสพี ้นื หลงั ได้
อยู่ 2 รปู แบบ
· ระบุชอ่ื ของสีทต่ี ้องการ อาทเิ ชน่ red, green, yellow, blue เป็นต้น
· ระบรุ หสั ของสที ต่ี ้องการ อาทิเช่น #FFFF00 , #0000CC , #FF66FF เปน็ ต้น
ตวั อย่างการใชค้ าสั่ง
<HTML>
<HEAD>
<TITLE>การกาหนดสีพน้ื หลังโดยการกาหนดสี</TITLE>
</HEAD>
<BODY BGCOLOR="#00FF00">
การกาหนดสีพนื้ หลงั โดยการกาหนดสี
</BODY>
</HTML>
ผลลพั ธ์
12. คาสัง่ สาหรับกาหนดสีให้กับตวั อักษรท้ังเอกสาร : <BODY TEXT = รหัสสี> … </BODY>
<BODY TEXT="#RGB" หรือ กาหนดชื่อสีท่ตี ้องการ">...........</BODY>
เราสามารถมีรปู แบบการกาหนดสีได้อยู่ 2 รูปแบบ
- ระบชุ ่ือของสีที่ต้องการ อาทิเช่น red, green, yellow, blue เป็นตน้
- ระบรุ หสั ของสีทต่ี ้องการ อาทิเชน่ #FFFF00 , #0000CC , #FF66FF เป็นตน้
<HTML>
<HEAD>
<TITLE> การกาหนดสตี วั อักษรทงั้ หมด </TITLE>
</HEAD>
<BODY text ="blue" >
การกาหนดสีตวั อักษรทงั้ หมดของเวบ็ เพจ
</BODY>
</HTML>
ผลลัพธ์
การกาหนดสตี วั อักษรท้ังหมดของเวบ็ เพจ
4. การจัดการรูปภาพบนเวบ็ เพจ
ความหมายและชนิดของแฟ้มภาพ
การใส่รูปภาพลงในเว็บเพจ เป็นอีกวิธีหน่งึ ทจ่ี ะทาใหเ้ ว็บเพจดูสวยงามข้ึน โดยนารูปภาพมาใส่ในเวบ็ เพจ
รว่ มกับข้อความได้ แต่ขอแนะนาวา่ หากต้องการที่จะใส่รปุ ภาพใดในเว็บเพจใหท้ าการคัดลอกรูปภาพนัน้ มาเกบ็ ไว้
ในโฟล์เดอร์เดยี วกับเว็บเพจเสยี ก่อนเพื่อให้งา่ ยต่อการจัดการและการเคลอื่ นยา้ ยส่วนภาพทนี่ ามาใสใ่ นเอกสาร
ควรมขี นาดของไฟลภ์ าพไม่เกิน 40 kb เพราะถ้าใหญเ่ กินกวา่ น้ีจะทาใหก้ ารโหลดข้อมลู ช้า ทาใหผ้ เู้ ข้ามาดเู วบ็
เพจต้องคอยนาน รปู ภาพทนี่ ิยมนามาลงในหน้าเว็บเพจจะมีอยู่ 2 ชนดิ คือ
1. รปู ภาพชนดิ Graphics Interchange Format (GIF) เป็นไฟล์รูปภาพท่มี ีการบีบขอ้ มลู ทาให้
ประหยัดเน้ือท่ี สามารถแสดงความละเอยี ดของภาพได้สูงสุด 256 สี ส่วนมากจะเปน็ พวกรูปภาพการ์ตนู ตา่ ง ๆ ท่ี
ไม่ต้องการความละเอยี ดของภาพมากนัก
2. รูปภาพชนิด Joint Photographic Experts Group (JPEG หรอื JPG) เปน็ ไฟลร์ ูปภาพท่มี ีการบีบ
ขอ้ มลู เหมือนกนั ทาให้ไฟล์มีขนาดเล็กแต่ไฟล์รปู แบบ JPG จะสามารถแสดงความละเอียดของสีไดส้ ูง
ถงึ 16 ล้านสี ซง่ึ จะทาใหภ้ าพมีความคมชดั มากกว่า ส่วนมากจะใช้กับพวกภาพถ่ายต่าง ๆ
คาสัง่ ทใ่ี ชใ้ นการใส่แฟม้ ภาพลงเว็บเพจ (Web Page)
คาสง่ั <IMG SRC> (Image Source) เปน็ คาสง่ั ทใ่ี ชส้ าหรับใส่รปู ภาพลงในเอกสาร HTML โดยที่
ไฟลร์ ปู ภาพต่าง ๆ ท่ตี ้องการนามาใสใ่ นเอกสาร HTML น้ัน จะต้องถูกเก็บอยใู่ นโฟลเดอร์เดียวกันกับ
เอกสาร HTML เทา่ นั้น แตถ่ ้าอยคู่ นละแห่งก็สามารถนามาใส่ได้ โดยการกาหนดไดร์ฟและโฟลเดอร์ของไฟล์ที่
รูปภาพนั้นอยู่ไว้ดว้ ย มีรูปแบบการใช้คาสงั่ ดงั นี้
< img src="ช่อื รูปภาพที่มีนามสกุลเปน็ .gif หรือ .jpg" >
ตัวอยา่ งการใช้คาสั่ง
ผลลพั ธ์
คาส่งั พิเศษท่ีใชส้ าหรับจัดการกับรปู ภาพ
การใสร่ ปู ภาพลงในเอกสาร HTML ผเู้ ขยี นโปรแกรมสามารถกาหนดตาแหน่งของภาพหรือปรับขนาดของ
รูปภาพได้โดยใชค้ าสงั่ พเิ ศษต่าง ๆ เพ่ิมเข้ามาเพ่ือชว่ ยใหร้ ปู ภาพทอ่ี ยบู่ นเว็บเพจมีความสมบูรณ์มากยง่ิ ข้ึน คาสง่ั
ตา่ ง ๆ มีดงั น้ี
1. คาสั่ง ALIGN เปน็ คาสง่ั ทใ่ี ช้กาหนดตาแหน่งในการจัดวางรูปภาพ มีรปู แบบการใช้งานดังนี้
<IMG SRC = " n " ALIGN = "n1" >
* n คอื ไฟล์ชื่อและนามสกุลของรูปภาพ
*n1 คือตาแหนง่ การวางภาพมรี ายละเอียดดังน้ี
- TOP วางข้อความระดบั บนรปู ภาพ
- MIDDLE วางขอ้ ความระดบั กลางรปู ภาพ
- BOTTOM วางขอ้ ความระดบั ลา่ งรูปภาพ
- LEFT วางรูปภาพทางซ้ายของข้อความ
ตัวอย่างการจดั วางตาแหนง่ ของรูปภาพ ALIGN=RIGHT
ผลลัพธ์
2. คาสง่ั WIDTH เป็นคาสัง่ ที่ใชก้ าหนดความกวา้ งของรปู ภาพ มีรูปแบบการใชง้ านดงั น้ี
<IMG SRC = "n" WIDTH ="n1">
* n คือไฟล์ช่อื และนามสกุลของรูปภาพ
*n1 คือความกวา้ งของรปู ภาพมหี นว่ ยเป็น Pixels
3. คาสง่ั HEIGHT เปน็ คาส่งั ทีใ่ ช้กาหนดความสูงของรปู ภาพ มีรปู แบบการใช้งานดังนี้
<IMG SRC = "n" HEIGHT = "n1">
* n คือไฟล์ชื่อและนามสกุลของรูปภาพ
*n1 คอื ความสูงของรูปภาพมีหน่วยเป็น Pixels
4. คาสัง่ BORDER เปน็ คาส่ังสร้างกรอบให้กบั รปู ภาพ สีของกรอบรูปภาพจะมีสเี ดยี วกบั สตี ัวอกั ษร มรี ปู แบบ
การใชง้ านดงั นี้
<IMG SRC = "n" BORDER ="n1">
* n คอื ไฟลช์ ่อื และนามสกลุ ของรปู ภาพ *n1 คอื ความหนาของกรอบรปู ภาพ
ตัวอย่าง
ผลลพั ธ์
คาส่งั ท่ใี ชใ้ นการนาแฟม้ ภาพมาทาเปน็ ภาพพนื้ หลังของเว็บเพจ (Web Page)
<body background="ช่ือรูปภาพท่มี ีนามสกุลเป็น .gif หรือ .jpg" bgproperties="fixed">
- background = กาหนดรปู ภาพ
- bgproperties = fixed การกาหนดใหร้ ปู ภาพคงที่ จะทาใหร้ ปู ภาพไม่มกี ารเคล่อื นทต่ี ามเมื่อเล่ือน
สกอรบาร์
ตัวอย่าง
ผลลัพธ์
5. การกาหนดรปู แบบเคร่อื งหมายหัวขอ้ และรายการ
การกาหนดรูปแบบเครอื่ งหมายหัวข้อและรายการ
จะชว่ ยให้การแสดงผลของข้อมลู ในหน้าเอกสารดูเข้าใจง่ายยงิ่ ขนึ้ มกี ารแบง่ ข้อมลู ออกเปน็ หมวดหมู่ดู
สะอาดตา โดยการแสดงรายการให้เป็นไปตามลาดับความสาคัญ จะทาให้เอกสารเปน็ ระเบียบสวยงาม อ่าน
ได้งา่ ย การแสดงรูปแบบของหวั ข้อเรือ่ งสามารถทาได้ 5 รูปแบบ คือ
1. การแสดงรายการแบบมีลาดับ (Order List หรือ Number List)
2. การแสดงรายการแบบไม่มลี าดับ (Unorder List หรอื Bullet List)
3. การแสดงรายการแบบหวั ขอ้ ย่อย (Definition List)
4. การแสดงรายการแบบไดเรกทอรี่ (Directory List)
5. การแสดงรายการแบบเมนู (Menu List)
การแสดงรายการแต่ละแบบจะมคี วามแตกต่างกันออกไป ข้ึนอยู่กับความตอ้ งการใช้งานในการจดั
ขอ้ มลู ในเอกสารเป็นหลกั ซง่ึ แต่ละรูปแบบจะมีวธิ ีการใช้คาส่ัง ดงั นี้
1. คาส่ังแสดงผลรายการแบบมลี าดับ (Number/Order List)
การแสดงข้อมูลรายการแบบมหี มายเลขกากับ (Number/Order Lists) จะใช้
แทก็ <OL> และ </OL> ซึ่งยอ่ มาจาก Ordered List คือขอ้ มูลรายการแบบมีหมายเลข เรยี งลาดบั จากน้อย
ไปหามากกากับอยหู่ น้าแต่ละรายการ โดยมีแท็กทเ่ี ป็นสว่ นประกอบภายในอีกทหี นงึ่ คือแท็ก <LI> ทใี่ ชก้ าหนด
หวั เรือ่ งหรือรายละเอียดของรายการยอ่ ย ซึง่ เม่ือรายการย่อยเหลา่ น้ีนาไปแสดงบนเบราเซอร์ ลาดับทข่ี อง
รายการจะถูกใสใ่ ห้กบั แตล่ ะรายการโดยอัตโนมตั ิ
<OL TYPE=n START=n2>.........หวั ขอ้ เรอ่ื ง........
<LI> ข้อความ................
<LI> ขอ้ ความ................
<LI> ขอ้ ความ................
<LI> ขอ้ ความ................
<LI> ข้อความ................
</OL>
type= ชนดิ ของการแสดงผลแบบรายการ
I , i เปน็ การแสดงผลแบบโรมนั
A , a เป็นการแสดงผลแบบภาษาอังกฤษ
1 เป็นการแสดงผลลาดบั รายการปกติ (Default)
start= การเรมิ่ ของค่าของการแสดงรายการ (สามารถกาหนดค่าเรมิ่ ตน้ ได้)
ตวั อยา่ งที่ 1 แสดงวธิ ีการแสดงรายการแบบมลี าดบั (Order List หรือ Number List)
ผลลัพธ์
ตัวอย่างท่ี 2 การใช้คาสง่ั OL รว่ มกบั คาสงั่ START
ผลลพั ธ์
ตัวอยา่ งที่ 3 การใช้คาสง่ั OL แบบเลอื ก Type
ผลลัพธ์
2. คาสง่ั สาหรับแสดงผลรายการแบบไม่มีลาดับ (Bulleted/Unordered List)
คาสง่ั <UL> การแสดงรายการแบบไมม่ ีเลขลาดับ (Unorder หรือ Bullet List) เปน็ คาส่งั ทีใ่ ช้แสดง
รายการโดยใชเ้ ครือ่ งหมายเป็นตวั แสดงนาหน้าขอ้ ความโดยไม่จาเป็นต้องเรยี งตามลาดบั ก่อน-หลัง เพราะเป็น
การเรียงหัวขอ้ แบบไมม่ ตี ัวเลขระบุไว้ มีรปู แบบการใชง้ าน ดงั นี้
<UL>.............หัวข้อเรอ่ื ง................
<LI> ข้อความ................
<LI> ขอ้ ความ................
<LI> ข้อความ................
<LI> ขอ้ ความ................
<LI> ข้อความ................
</UL>
ตวั อยา่ งแสดงวิธกี ารแสดงรายการแบบไม่มีลาดับ
ผลลัพธ์
ถา้ หากต้องการเปล่ยี นรูปแบบของหัวข้อเป็นแบบอนื่ ๆ กส็ ามารถทาไดโ้ ดยใชค้ าส่งั เพิ่มเตมิ ดังนี้
<UL TPYE = n>.............หัวข้อเร่ือง................
<LI> ข้อความ................
<LI> ข้อความ................
<LI> ข้อความ................
<LI> ขอ้ ความ................
<LI> ข้อความ................
</UL>
* n หมายถงึ ชนดิ ของเครือ่ งหมายมีอยู่ 3 แบบ ดงั นี้
DISC จะมีสญั ลกั ษณเ์ ป็นวงกลมทบึ (ค่าปกติ)
CIRCLE จะมีสญั ลักษณเ์ ป็นวงกลมโปรง่
SQUARE จะมีสญั ลกั ษณ์เป็นส่ีเหล่ยี มทึบ
ตัวอยา่ ง
ผลลพั ธ์
ตัวอย่างการใช้คาส่ัง <UL> แบบต่าง ๆ ร่วมกนั
ผลลพั ธ์
3. การแสดงผลรายการแบบหวั ข้อย่อย (Definition List)
รายการยอ่ ยแบบใช้นยิ าม หรือ Definition List นจ้ี ะคลา้ ยกนั กบั รายการย่อยแบบทใ่ี ช้หมายเลขหรอื
สัญลกั ษณ์กากบั ตา่ งกนั ที่ไมส่ ัญลกั ษณ์ใดๆ กากบั หนา้ แต่ละรายการย่อย มีเพยี งแต่รายการย่อยต่างๆ แสดงอยู่
ลักษณะคลา้ ยกับพจนานุกรม โดยมีแท็กที่เกี่ยวข้องอยู่ 3 แท็กดว้ ยกนั คือ <DL> และ </DL> เพอ่ื บอกวา่
รายการย่อยมีลักษณะเป็น แบบใช้นยิ าม สว่ นแทก็ <DT> นั้นใชบ้ อกส่วนทเ่ี ป็นเรื่องของแตล่ ะรายการย่อย
และแท็ก <DD> ใช้บอกสว่ นที่เปน็ รายละเอียดในรายการย่อยน้ัน
<DL>.........หวั ข้อเรอ่ื ง........
<DT> หวั ข้อ...... <DD> คาอธบิ าย.....
<DT> หัวข้อ...... <DD> คาอธบิ าย.....
<DT> หวั ขอ้ ...... <DD> คาอธิบาย.....
......................................................
</DL>
ตวั อยา่ งการใชค้ าสง่ั DL
ผลลพั ธ์
6. การสรา้ งตาราง
หากต้องการนาเสนอข้อมลู ทีม่ ปี ริมาณมากๆ หรือข้อมลู ท่ีต้องมีการเปรียบเทยี บกันการนาเสนอข้อมลู
ในรปู แบบของตารางจะชว่ ยทาใหข้ อ้ มูลประเภทนี้ดูงา่ ยย่ิงขึ้นและเป็นระเบียบเรียบร้อยอ่านไดง้ า่ ยกวา่ ปกติ
การสรา้ งตารางในเอกสาร HTML มอี ยู่หลายรปู แบบแล้วแต่ผู้เขียนโปรแกรมจะกาหนดโดยใช้คาสงั่ ตา่ ง ๆ
ดังต่อไปนี้
1. คาสงั่ หลักท่ีใชใ้ นการสรา้ งตารางของภาษา HTML มดี ังน้ี
<TABLE>...........</TABLE>
เปน็ คาส่งั ทก่ี าหนดให้โปรแกรมเบราวเ์ ซอร์สร้างตาราง
<CAPTION>...........</CAPTION>
เป็นคาสง่ั ทีใ่ ช้ตงั้ ชื่อหรอื หวั ข้อเรอื่ งให้กับตาราง
<TR>...........</TR>
เปน็ คาส่ังทใี่ ชก้ าหนดแถว (ROW)
<TH>...........</TH>
เป็นคาสง่ั ท่ใี ชใ้ นการกาหนดข้อมลู สว่ นหวั ของตาราง
<TD>...........</TD>
เปน็ คาสัง่ ทีใ่ ชใ้ นการกาหนดข้อมลู ในแต่ละแถว
โครงสรา้ งของตาราง
<TABLE>
<CAPTION> ชื่อตาราง </CAPTION>
<TR>
<TH> ข้อมูลส่วนหัว </TH>
</TR>
<TR>
<TD> ขอ้ มูล </TD>
</TR>
<TR>
<TD> ข้อมูล </TD>
</TR>
</TABLE>
ตวั อย่างการสร้างตาราง
ผลลพั ธ์
2. คาสง่ั ต่างๆ ท่ีใชใ้ นการตกแตง่ ตารางของภาษา HTML
2.1 คาสง่ั BORDER ใชก้ าหนดความหนาใหก้ ับเสน้ ขอบของตาราง มีหนว่ ยเปน็ Pixel ถา้ ไมใ่ ส่คาส่ังนี้ไว้
ดว้ ย BORDER กจ็ ะมีคา่ เทา่ กบั 1 ซง่ึ เป็นคา่ ปกตอ คือจะไมเ่ หน็ เสน้ ขอบของตาราง
ตวั อยา่ งการใชค้ าสั่ง BORDER
ผลลัพธ์
2.2 คาส่งั ALIGN ใช้กาหนดตาแหนง่ การจัดวางตาราง มี 3 รูปแบบ คือ
- LEFT คอื จดั ตารางชดิ ซ้าย (คา่ ปกต)ิ ของจอภาพ
- RIGHT คือ จัดตารางชดิ ขวาของจอภาพ
- CENTER คือ จดั ตารางไว้กงึ่ กลางของจอภาพ
ตัวอย่างการสรา้ งตารางอยู่กึ่งกลางจอภาพ
ผลลพั ธ์
2.3 คาสั่ง WIDTH ใช้กาหนดความกว้างของตารางทงั้ หมด มหี น่วยเป็น Pixel หรอื เปอรเ์ ซน็ ตก์ ็ได้
2.4 คาสั่ง HEIGHT ใช้กาหนดความสงู ของตารางทัง้ หมด มหี น่วยเป็น Pixel หรอื เปอรเ์ ซน็ ต์ก็ได้
2.5 คาส่ัง BGCOLOR เปน็ คาสัง่ ทใี่ ชใ้ นการกาหนดสีพื้นหลงั ของตารางใช้ได้กับเวบ็ เบราว์เซอร์ Internet
Explorer เทา่ นนั้
ตัวอยา่ งการใช้คาสง่ั WIDTH , HEIGHT , BGCOLOR
ผลลัพธ์
2.6 คาส่ัง CELLSPACING ใชก้ าหนดระยะห่างระหว่างช่องแต่ละช่องในตาราง โดยการเพิ่มขนาดหรอื ลด
ขนาดตามความหนาของเส้นขอบตาราง
ผลลพั ธ์
2.7 คาสง่ั CELLPADDING ใชก้ าหนดระยะห่างระหว่างบรรทดั ของตาราง โดยการเพิ่มขนาดหรอื ลดขนาดตาม
ความสงู ของเส้นขอบตาราง
ผลลพั ธ์
2.8 คาส่งั Colspan และ Rowspan
คาสง่ั <TD COLSPAN> เป็นคาส่งั ในการรวมคอลัมนเ์ ข้าด้วยกนั ตามคา่ ของจานวนคอลัมน์ท่ีกาหนดไว้
รปู แบบคาส่ัง <TD COLSPAN = "Number">
โดยที่ - COLSPAN คอื แอตทรบิ ิวต์ที่ใช้ในการกาหนดการรวมคอลัมน์
- Numberคอื ค่าตวั เลขที่ใช้ในการรวมคอลมั นเ์ ข้าเปน็ คอลมั น์เดี่ยวกัน
คาสั่ง <TD ROWSPAN> เปน็ คาส่ังในการรวมแถวเข้าดว้ ยกนั ตามค่าของจานวนแถวที่กาหนดไว้
รปู แบบคาสัง่ <TD ROWSPAN = "Number">
โดยที่ - ROWSPAN คือ แอตทริบิวต์ที่ใช้ในการกาหนดการรวมแถว
- Number คอื ค่าตวั เลขท่ีใชใ้ นการรวมแถวเขา้ เป็นแถวเดยี วกนั
ผลลพั ธ์
7. การสร้างจดุ เชอ่ื มโยงให้กับเวบ็ เพจ
การเช่อื มโยงหนา้ เว็บเพจ คือการกาหนดสว่ นของข้อความที่ตอ้ งการ หรอื รูปภาพทไ่ี ด้เลอื กไว้เพื่อ
เป็นจุดเชอ่ื มโยงไปยังเนอื้ หาจุดอน่ื ๆ ซ่ึงเน้ือหาทีเ่ ช่อื มโยงไปนัน้ อาจจะอยู่ภายในหน้าเดียวกนั หรอื อยู่คนละ
หน้ากไ็ ด้ หรอื อาจอยคู่ นละเว็บไซต์ก็ได้ การเช่ือมโยงหนา้ เวบ็ เพจจะประกอบด้วยสว่ นประกอบ สาคญั
2 ส่วน คือ
1. จุดท่ใี ชส้ าหรบั เช่อื มโยง (Link) เป็นสว่ นที่ใชเ้ ปน็ จุดเช่ือมโยงไปยังเป้าหมายปลายทางอาจเปน็
รูปภาพหรอื ข้อความกไ็ ด้
2. เป้าหมาย (Target) เปน็ ส่วนปลายทางหรือจดุ ทีต่ ้องการให้เชื่อมโยงมาถงึ จะอยสู่ ่วนใดของ
เอกสารก็ไดแ้ ล้วแตผ่ เู้ ขียนโปรแกรมกาหนด
การสร้างการเชอื่ มโยงสามารถทาได้หลายวธิ ีดังนี้
1.การเชือ่ มโยงภายในหนา้ เว็บเพจเดียวกัน
2.การเชือ่ มโยงไปยงั หนา้ เว็บเพจอื่น ๆ
3.การเชื่อมโยงไปยังเว็บไซต์อ่ืน ๆ
4.การเชื่อมโยงไปยงั แฟ้มข้อมลู ประเภทต่าง ๆ
5.การเชื่อมโยงเพื่อสง่ จดหมายอเิ ลก็ ทรอนิกส์
1.การเชอื่ มโยงภายในหน้าเวบ็ เพจเดียวกนั ใช้ในกรณีทเ่ี ราต้องการใหม้ จี ุดเชอื่ มโยงในหน้าเดยี วกัน เมื่อ
คลิกเมาสท์ ี่จดุ เช่ือมโยงแล้วมีการเล่ือนตาแหนง่ ขึน้ หรือลงไปจากตาแหนง่ เดิม สามารถสรา้ งการเชื่อมโยงได้
ดงั น้ี
1.1 สร้างการเชอื่ มโยงด้วยแอททรบิ วิ ต์ href ดงั ต่อไปนี้
<a href="#ชอ่ื จุดเช่อื มโยง">....ข้อความทป่ี รากฎบนหนา้ เว็บเพจ....</a>
ขอ้ สงั เกต ในขน้ั ตอนของการสร้างการเชื่อมโยง หนา้ ชือ่ จุดเชอ่ื มโยงต้องมีเคร่ืองหมาย #
1.2 สรา้ งจดุ เช่ือมโยงในหน้าเว็บเพจดว้ ยแอททริบิวต์ name ดังตอ่ ไปน้ี : <a name="ช่อื จดุ เชือ่ ม
โยง">ข้อความทีป่ รากฎบนหน้าเวบ็ เพจในบรรทดั แรกของข้อมลู นนั่ ๆ</a>
<a name="ชอื่ จุดเชื่อมโยง">ขอ้ ความที่ปรากฎบนหนา้ เว็บเพจในบรรทัดแรกของข้อมูลนน่ั ๆ
</a>
ขอ้ สงั เกต ในขั้นตอนของการสร้างจดุ เชือ่ มโยง ชอื่ จุดเช่อื มโยงไมต่ ้องมีเคร่ืองหมาย #
หมายเหตุ ชื่อจดุ เชือ่ มโยงนักเรยี นสามารถตัง้ ขน้ึ มาเองเปน็ อกั ษรภาษาอังกฤษ และหา้ มซา้ กันในหนา้ เวบ็
เพจเดยี วกัน
ตวั อย่างการสร้างการเช่อื มโยงภายในหน้าเวบ็ เพจเดยี วกนั
<html>
<head>
<title>การสร้างการเช่ือมโยง (Link) </title>
</head>
<body>
การสร้างการเชื่อมโยงในหนา้ เวบ็ เพจเดียวกัน <br>
<hr>
<a href="#link1">1.หลกั การสรา้ งเวบ็ เพจ</a><br>
<a href="#link2">2.การจัดรปู แบบตัวอักษร</a><br>
<a href="#link3">3.การใชง้ านรปู ภาพบนเว็บเพจ</a><br>
<hr>
<a name="link1">หลกั การสร้างเว็บเพจ</a>
<br>
...........................<p>
..........................<p>
<a name="link2">การจดั รูปแบบตัวอักษร</a>
<br>
...........................<p>
...........................<p>
<a name="link3">การใชง้ านรปู ภาพบนเว็บเพจ</a>
<br>
...........................<p>
...........................<p>
</body>
</html>
2. การเช่อื มโยงไปยังหน้าเว็บเพจอื่น ๆ คือ การเช่ือมโยงไปยงั จุดเชือ่ มโยงทอี่ ยู่คนละหนา้ เว็บเพจกนั มี
รปู แบบการใชง้ านดังนี้
<a href="ชือ่ ไฟลเ์ ว็บเพจ.นามสกุล">...ขอ้ ความที่ปรากฎบนหนา้ เว็บเพจ...</a>
ตัวอย่างการเขียนโปรแกรมเชื่อมโยงไปหน้าเวบ็ เพจอ่นื (ตอ้ งมีเวบ็ เพจท่ีสรา้ งไวแ้ ล้ว มากกว่า 1 หนา้ และ
ถูกจดั เกบ็ ไว้ทเี่ ด่ียวกัน)
<html>
<head>
<title>การสรา้ งการเช่ือมโยง (Link) </title>
</head>
<body>
การสร้างการเชอ่ื มโยงในหนา้ เวบ็ คนละหน้า <br>
<hr>
<a href="page1.html">1.หลกั การสร้างเวบ็ เพจ (page1.html) </a><br>
<a href="page2.html">2.การจดั รูปแบบตัวอักษร (page2.html) </a><br>
<a href="page3.html">3.การใชง้ านรูปภาพบนเวบ็ เพจ (page3.html)</a><br>
<hr>
</body>
</html>
3. การเชอ่ื มโยงไปยังเว็บไชต์อื่น ๆ เราสามารถสร้างการเชอ่ื มโยงไปยังเวบ็ ไซต์อื่น ๆ ได้ โดยใชแ้ ท็ก
ดังต่อไปน้ี
<a href="URL หรอื ท่ีอยู่ของเว็บไวตท์ ต่ี ้องการ">ขอ้ ความที่ปรากฎบนหน้าเวบ็ เพจ</a>
ดังทเี่ ราจะเห็นในเวบ็ ไซตต์ า่ งๆที่มีการเช่ือมโยงไปยังมหาวทิ ยาลยั ตา่ งๆ เปน็ ต้นนักเรียนมาทดลองทา
ตามตวั อย่างด้านลา่ งดูในตวั อย่างน้นั จะทาการเชอ่ื มโยง ไปยงั มหาวิทยาลยั 4 แห่งด้วยกัน คือ
1. มหาวทิ ยาลัยศิลปากร โดยที่ URL คือ http://www.su.ac.th
2. มหาวิทยาลยั เกษตรศาสตร์ โดยท่ี URL คือ http://www.ku.ac.th
3. มหาวิทยาลยั ราชภัฎหมู่บ้านจอมบึง โดยที่ URL คือ http://www.mcru.ac.th
4. มหาวทิ ยาลัยราชภฏั เพชรบุรี โดยท่ี URL คือ http://www.pbru.ac.th
ตัวอย่างการสร้างการเช่อื มโยงไปยังเว็บไชต์อ่นื ๆ
<html>
<head>
<title>การสรา้ งการเชอื่ มโยง (Link) </title>
</head>
<body>
การสร้างการเชื่อมโยงไปยังเว็บไซตอ์ นื่ ๆ <br>
<hr>
<a href="http://www.su.ac.th">1.มหาวิทยาลัยศลิ ปากร </a><br>
<a href="http://www.ku.ac.th">2.มหาวทิ ยาลัยเกษตรศาสตร์ </a><br>
<a href="http://www.mcru.ac.th">3.มหาวิทยาลัยราชภัฎหมู่บ้านจอมบึง</a><br>
<a href="http://www.pbru.ac.th">4.มหาวทิ ยาลัยราชภัฏเพชรบรุ ี</a><br>
<hr>
</body>
</html>
เพ่มิ เตมิ การนารูปภาพมาเป็นชดุ เชื่อมโยง สามารถนารูปภาพมาเป็นจุดเช่ือมโยงได้ เพียงแคเ่ ปล่ียน
ขอ้ ความที่ปรากฎบนหน้าเวบ็ เพจเป็นแท็กท่ใี ช้แสดงรปู ภาพแทนดังน้ี
<a href="http://www.su.ac.th"><img src="sea.jpg"></a>
ตัวอยา่ งการสร้างการเชือ่ มโยงไปยังเว็บไซต์ตา่ ง ๆ โดยใชร้ ูปภาพ
<html>
<head>
<title>การสรา้ งการเช่อื มโยง (Link) </title>
</head>
<body>
การสร้างการเช่อื มโยงไปยงั เวบ็ ไซตอ์ ่นื ๆ โดยใชร้ ูปภาพ <br>
<hr>
<a href="http://www.su.ac.th"><img src="comp4.gif"></a><br>
เป็นการนารปู ภาพมาเป็นชดุ เชอ่ื มโยงไปยังเวบ็ ไซต์ ม.ศิลปากร <br>
<hr>
</body>
</html>
4.การเชอ่ื มโยงไปยังไฟลอ์ ่ืน ๆ ทไี่ ม่ใช่เอกสาร HTML
นกั เรยี นจะเห็นจากบางเวบ็ ไซตม์ กี ารการลิงค์เพ่ือใหท้ าการ Download ข้อมลู ต่าง ๆ เช่น ไฟล์รูปภาพ,
ไฟลโ์ ปรแกรม , ไฟล์ซิป (.zip) และไฟลเ์ สียง เป็นตน้ การสร้างชุดเชอื่ มโยงหรือลงิ ค์ก็คล้ายกบั วธิ ที ก่ี ลา่ วมา
เพยี งแตว่ า่ ถ้าหาก ไฟล์จดุ หมายปลายทางเปน็ ไฟลป์ ระเภทใดเบราวเ์ ซอร์กจ็ ะทางาน ให้สอดคลอ้ งกับไฟล์
ประเภทนนั้ เชน่ หากไฟลจ์ ุดหมายปลายทางที่สร้างลิงค์ไว้เปน็ รูปภาพ เบราวเ์ ซอร์ก็จะเปิดรปู ภาพน้นั ใหด้ ู
แต่ถา้ เปน็ ไฟล์ ประเภทอ่ืน ันักเรยี นก็จะพบหน้าจอ ของการดาวน์โหลด (Download) รูปแบบคาสงั่ หรือแท็ก
ท่ีใชเ้ ปน็ ดังันี้
<a href="ชอ่ื ไฟล.์ นามสกุล">ขอ้ ความที่ปรากฎบนหน้าเวบ็ เพจ</a>
ตัวอยา่ งการสรา้ งการเชอ่ื มโยงไปยงั ไฟล์อ่ืน ๆ ท่ไี มใ่ ช่ ไฟล์ HTML
<html>
<head>
<title>การสรา้ งการเชื่อมโยง (Link) </title>
</head>
<body>
การสร้างการเชือ่ มโยงไปยังไฟล์รูปภาพชือ่ sea.jpg และเวบ็ ไซต์อ่นื ๆ <br>
<hr>
<a href="sea.jpg">ภาพสวย ๆ</a> เปน็ การเชื่อมโยงไปยังไฟล์รูปภาพชื่อ sea.jpg <br>
<a href="mydoc1.doc">ไฟลเ์ อกสาร</a>เป็นการเชอ่ื มโยงไปยังไฟลเ์ อกสาร mydoc1.doc<br>
<a href="http://www.ku.ac.th">มหาวิทยาลยั เกษตรศาสตร์ </a><br>
<a href="http://www.mcru.ac.th">มหาวิทยาลัยราชภัฎหมบู่ ้านจอมบึง</a><br>
<a href="http://www.pbru.ac.th">มหาวทิ ยาลยั ราชภฏั เพชรบรุ ี</a><br>
<hr>
</body>
</html>
5.การเชอ่ื มโยงเพื่อสง่ จดหมายอเิ ลก็ ทรอนิกส์ (E-mail)
นักเรยี นสามารถใหผ้ ้เู ข้าชมเวบ็ ของเราสามารถตดิ ต่อส่ือสารเราได้ อาจเปน็ การสง่ คาตชิ มการสร้างเวบ็
หรอื การแจง้ ขา่ วสารให้ผสู้ ร้างเว็บเพจทราบ เป็นการสื่อสาร แบบ 2 ทาง (Two-way Communication)
สามารถทาได้ดงั นี้
<a href="mailto:ชื่ออีเมลแ์ อดเดรส"> ข้อความลิงคท์ ่ีปรากฎบนหน้าเว็บเพจ </a>
ตัวอยา่ งการสรา้ งการเช่อื มโยงเพ่ือสง่ E-mail
<html>
<head>
<title>การสร้างการเชอ่ื มโยง (Link) เพ่อื ส่ง E-mail </title>
</head>
<body>
การสร้างการเช่ือมโยงเพือ่ ส่ง E-mail <br>
<hr>
<a href="mailto:[email protected]">สง่ ความเหน็ ไปยังผดู้ แู ลระบบ</a>
<hr>
</body>
</html>
การกาหนดสีของจดุ เช่ือมโยงหรือลิงค์
การสร้างการเชือ่ มโยง โดยปกตเิ มอ่ื นาเมาสไ์ ปช้ีท่ีจุดเชือ่ มโยง นอกจากสัญลักษณข์ องเมาสจ์ ะ
เปลี่ยนเปน็ รูปมือแลว้ ข้อความทเี่ ป็นจุดเช่ือมโยง หรือลิงค์ ยังมขี ดี เส้นใตห้ รือบางคร้งั ก็มีสที ีแ่ ตกตา่ งออกไปจาก
ขอ้ ความปกตแิ ละเม่ือ คลกิ เมาส์เขา้ ไปแล้วข้อความท่ีเป็นลิงคท์ ่เี ราเคยคลิกไปแลว้ ก็อาจเปลี่ยน เปน็ อกี สหี นง่ึ
ไดเ้ พื่อใหเ้ กิดความแตกต่างจากข้อความปกตแิ ละเป็นการบอก ให้ทราบว่าได้เคยคลิกไปที่จดุ เช่อื มโยงใดแล้ว
บ้าง ซึง่ ผู้สรา้ งเว็บเพจสามารถ กาหนดสขี องจดุ เชอ่ื มโยงได้เองดังน้ี
1.สีของชุดเชื่อมโยงหรือลงิ คท์ ยี่ งั ไมเ่ คยถูกคลกิ (Hyperlink) ใชแ้ อททริบิวต์ link
2.สขี องชดุ เช่อื มโยงหรือลิงค์ท่ีเคยถูกคลิกไปแลว้ (Visited Hyperlink) ใชแ้ อททริบวิ ต์ vlink
3.สขี องชุดเช่ือมโยงหรือลงิ คต์ อนที่ถูกคลิก (Active Link) ใชแ้ อททริบวิ ต์ alink
<body link="ค่าส"ี vlink="คา่ สี" alink="ค่าส"ี >
ตวั อยา่ งการกาหนดสชี ุดเชื่อมโยงหรือลิงค์
<html>
<head>
<title>การกาหนดสชี ุดเช่ือมโยง (Link)</title>
</head>
<body link="green" vlink="blue" alink="red">
การกาหนดสชี ุดเช่ือมโยง โดยท่ี <br>
1.ลงิ ค์ที่ยงั ไม่เคยถกู คลกิ จะเป็นสีเขียว (link) <br>
2.ลิงค์ทีเ่ คยถูกคลิกไปแล้วจะเป็นสนี ้าเงนิ (vlink) <br>
3.ลงิ ค์ที่กาลังถูกคลิกจะเปน็ สแี ดง (alink) <br>
<hr>
<a href="sea.jpg">ภาพสวย ๆ</a> เปน็ การเช่ือมโยงไปยังไฟลร์ ูปภาพชื่อ sea.jpg<br>
<a href="mydoc1.doc">ไฟลเ์ อกสาร</a>เป็นการเชอื่ มโยงไปยงั ไฟล์เอกสาร mydoc1.doc<br>
<a href="http://www.ku.ac.th">มหาวิทยาลัยเกษตรศาสตร์ </a><br>
<a href="http://www.mcru.ac.th">มหาวิทยาลัยราชภฎั หมู่บา้ นจอมบึง</a><br>
<a href="http://www.pbru.ac.th">มหาวิทยาลยั ราชภัฏเพชรบุรี</a><br>
<hr>
<a href="mailto:[email protected]">ส่งความเห็นไปยังผู้ดูแลระบบ</a>
<hr>
</body>
</html>
8. เฟรม
การแบง่ จอภาพออกเป็นสว่ น ๆ หรอื ท่เี รยี กว่า เฟรม(frame)
เฟรมถอื วา่ เป็นคาสั่งหน่ึงใน การเขยี น HTML โดยเฟรมจะชว่ ยให้สามารถแสดงผลไฟล์ HTMLหลายๆ
ไฟล์ได้พร้อม ๆ กัน ภายใต้ เว็บเพจ เดียวกัน ตามปกตแิ ลว้ หนง่ึ เว็บเพจเราจะมีไฟล์ HTML อยู่ไฟลเ์ ดียว แต่
ถ้าเราตอ้ งการ แบ่งหน้าจอของเวบ็ เพจ ใหเ้ ปน็ 3 - 4 ส่วน โดยแตล่ ะสว่ น มคี วามเป็นอสิ ระของตัวเอง คาสง่ั
เฟรม จะช่วยในการจัดงานดังกลา่ ว
ในปจั จบุ นั เฟรมเปน็ คาสั่ง ทไ่ี ด้รับความนยิ ม อยา่ งมาก ในการนามาใช้ ตกแต่ง เอกสาร HTML
โฮมเพจ ส่วนใหญ่ จะนาเฟรม มาเพิ่มใสใ่ น HTML เพื่อปรบั แตง่ ใหพ้ อดูดขี ้นึ อยา่ ง เชน่ การนาเฟรมมาใช้
ในการล็อคให้ โฮมเพจ ของเรา มีส่วนหวั และส่วนทา้ ย เหมอื น ๆ กนั ทุก หนา้ จอ คล้าย ๆ กับ การพิมพ์
จดหมาย ทีม่ ีหัว กระดาษ ท้านกระดาษ หรอื การ นาเฟรม มาทา เปน็ เมนู ซึ่งเราสามารถ บังคบั ให้เฟรม ท่ี
บรรจุ เมนู อยโู่ ดย ไม่เปลย่ี นแปลง สว่ นอกี เฟรมหน่ึง ก็แสดง เนื่อหากันไป
การสรา้ งชดุ ของ Frame จะใช้ tag <frameset> และกาหนด Frame แต่ละหนา้ ด้วย tag
<frame> มี attribute สาหรบั ปรบั แตง่ Frame ไดแ้ ก่
- noresize กาหนดไมใ่ หผ้ ูใ้ ช้ปรบั ขนาด Frame ได้
- frameborder="yes | no" ปกตจิ ะมกี รอบของ frame ค่นั ระหวา่ ง frame อยู่ แต่ถา้ ไม่
ตอ้ งการให้เห็น กาหนดค่าเป็น "no"
- marginheight="number" กาหนดระยะห่าง frame จากขอบหนา้ ต่างแนวตงั้
- marginwidth="number" กาหนดระยะห่าง frame จากขอบหนา้ ตา่ งแนวนอน
- scrolling="yes | no | auto" ถา้ หนา้ เว็บเพจยาวจะมีตวั เล่ือนโดยอตั โนมัติ คา่ ปกติ"
auto" ถา้ ไมต่ อ้ ง การให้มีตัวเล่ือน ให้กาหนดเปน็ "no"
- name กาหนดช่ือ ใหก้ ับเฟรมเพ่อื ใช้เป็นเป้าหมายใหก้ บั คาสัง่ Link
โครงสรา้ งของคาส่ังการแบ่งหน้าจอแสดงผล (FRAME)
รูปแบบคาสง่ั
<HTML>
<TITLE>....................</TITLE>
<FRAMESET ROWS[หรือ COLS]="number,number">
<FRAME src="ชื่อไฟล์ทตี่ ้องการแสดงผล หรอื URL">
<FRAME src="ชือ่ ไฟล์ทีต่ ้องการแสดงผล หรือ URL">
</FRAMESET>
โดยท่.ี ..
ROWS = แบง่ แนวนอน
COLS = แบง่ แนวตั้ง
number = ตัวเลข เป็น pixels หรือ ตวั เลขเปน็ % หรอื * (หมายถงึ จานวนทเ่ี หลอื )
การใช้คาส่งั
<HTML>
<TITLE>การแบง่ จอภาพ ( FRAME )</TITLE>
<FRAMESET ROWS="20%,*">
<FRAME src="logo.html" >
<FRAME src="main.html">
</FRAMESET>
</HTML>
การแสดงผล
ตัวอย่างการใชค้ าสง่ั
<HTML>
<TITLE>การแบ่งจอภาพ ( FRAME )</TITLE>
<FRAMESET COLS="20%,*">
<FRAME src="menu.html" >
<FRAME src="main.html">
</FRAMESET>
</HTML>
การแสดงผล
ตัวอยา่ งการใช้คาสัง่
<HTML>
<TITLE>การแบ่งจอภาพ ( FRAME )</TITLE>
<FRAMESET COLS="100,600">
<FRAME src="menu.html" >
<FRAMESET ROWS="20%,*">
<FRAME src="logo.html" >
<FRAME src="main.html">
</FRAMESET>
</HTML>
การแสดงผล
9. การแทรกไฟล์ Multimedia
การใสไ่ ฟล์มลั ติมีเดีย เช่น ไฟลเ์ สยี ง เพลง, Video, Flash
เราสามารถใสไ่ ฟล์เพลง, ไฟล์ video หรอื ไฟล์ flash ลงไปในหน้าเว็บเพจได้ ด้วยคาสง่ั <embed>
<embed> เปน็ คาส่ังแสดงการทางานของโปรแกรม plug-in โดยนาไปผนวกกับเอกสาร HTML และอาจ
ใส่ tag <noembed> ควบคู่ไปดว้ ย เผือ่ เวบ็ เบราเซอัร์รนุ่ เก่าทย่ี งั ไม่ support tag <embed> น.้ี
โครงสร้างของคาส่ังการแทรกไฟล์ Multimedia
<embed src="url ไฟล"์ width="number" height="number" >
<noembed><img src="url ไฟลร์ ูปภาพทใี่ ห้แสดงเม่ือใช้ embed ไมได้" ></noembed>
</embed>
คาสงั่ เสริม สาหรับ <embed>
- src="url" url ของไฟลท์ ี่จะให้เล่น ไดแ้ ก่ ไฟล์เสยี ง (เชน่ .mid, .wav, .mp3) ไฟล์ vedio (เช่น
.avi, wmv, mov, mpeg) และไฟล์ Flash movie ( .swf)
- width="no" กาหนดขนาดความกวา้ งของตัว player
- height="no" กาหนดขนาดความสูงของตัว player
- align="top | middle | bottom | left | right" จดั วางตาแหน่งใหก้ บั วัตถุ ทีอ่ ยู่ขา้ งๆ
ตวั player
- name="ชอ่ื " ช่อื อ้างอิงของวตั ถุ
- autostart="true | false" เม่อื โหลดเว็บเพจแลว้ ให้เล่นอตั โนมัตหิ รอื ไม่
- loop="true | false | number" กาหนดเป็น true เม่อื ตอ้ งการให้เลน่ ซา้ ไปเรอ่ื ยๆ หรือกาหนด
เปน็ ตัวเลข จานวนรอบท่ตี ้องการให้เล่นซัา้
- playcount="no" จานวนรอบทีใ่ หเ้ ลน่ (ใช้ได้เฉพาะ IE)
- hidden="true | false" ให้ซ่อน หรอื แสดงตัว player
- volume="0 ถงึ 100" กาหนด volume ของเสยี ง (ใชไ้ ดเ้ ฉพาะ Netscape)
การแทรกไฟลเ์ สียง
ตัวอย่างการใชค้ าสั่ง เลน่ ไฟลเ์ สยี ง
<embed src="รักแท้ดูแลไม่ได้.mp3" width="100%" height="60">
<noembed><img src="nosupport.gif" ></noembed>
</embed>
แบบกาหนดตัวเช่ือม
<A HREF="ชือ่ ไฟล.์ นามสกุล">คาอธบิ าย</A>
เป็นการใส่เพลงโดยการกาหนดตวั เชื่อม ในชอ่ งว่าง ๆให้ใส่ตาแหนง่ ไฟล์เสียง ลงไป สว่ นตรง
"คาอธิบาย" ใหใ้ ส่ข้อความทส่ี ่ือความหมายใหร้ ูว้ ่า ตวั เชื่อมนี้ เปน็ ไฟลเ์ พลง เชน่ "เพลงแสนสนกุ "
ตวั อยา่ ง
<A HREF="รกั แท้ดูแลไมไ่ ด.้ mp3"> คลิกเพื่อเช่ือมไปยังเพลงนี้ </a>
การแทรกวดี ิโอ
ใส่ไฟลว์ ีดโิ อให้เวบ็ เพจ (สาหรบั Internet Explorer)
<IMG DYNSRC="....." SRC="......" ALT="......" LOOP=n START=FILEOPEN/MOUSEOVER >
เป็นรูปแบบการใสไ่ ฟล์วีดโิ อของ Internet Explorer โดยมีลักษณะคาส่งั ดังน้ี
- DYNSRC="......" ให้ใสช่ ื่อไฟลว์ ดี ิโอลงไป เช่น video.avi
- SRC="......" ใหใ้ สไ่ ฟล์รูปภาพ ไว้ เป็นตวั แทน ไฟลว์ ดี โิ อนนั้ ๆ เมื่อบราวเซอร์ ผู้ใช้ไม่สนนั สนุน
- ALT="......" ใสข่ ้อความใด ๆ ก็ไดล้ งไปเพื่อ ให้ผ้ใู ช้ที่ ไม่สามารถดวู ดี โิ อ สามารถรขู้ ้อมลู ได้
- LOOP=n กาหนดจานวนครั้งทีจ่ ะใหว้ ีดิโอเล่น ใส่เป็นตัวเลขหรอื infinite ก็ได้
- START=FILEOPEN/MOUSEOVER โดย fileopen เปน็ การกาหนด ให้เรม่ิ เล่นทนั ที ทไี่ ล์วดี โี อ
โหลดเสร็จ (ปกตแิ ล้ววดี ิโอจะถกู เลน่ ทันทีที่ดาวนโ์ หลดเสร็จ ดงั น้ัน -STRAT=FILEOPEN จงึ ไม่ต้องใสก่ ็
ได)้ mouseover เปน็ การกาหนด ใหเ้ ลน่ วดี ิโอ เม่อื เอาเมาส์ไปวางบนวดี โี อนน้ั ๆ
ตัวอยา่ ง
<IMG DYNSRC="SPORT.AVI" SRC=PICTURE.GIF ALT="ทดสอบการใช้ไฟลว์ ดี ีโอ(IE)" LOOP="2">
การแทรกไฟล์ Flash
วธิ กี ารแทรกไฟลเ์ ฟลชนั้นจะใชค้ าสงั่ แบบเดยี วกับการแทรกไฟล์เสยี ง โดยการใช้คาส่ัง <Embed> ไฟล์
เฟลชสว่ นใหญ่จะเปน็ ไฟลใ์ นลักษณะของเกมสจ์ ะมีนามสกุลไฟลเ์ ปน็ .SWF
ตัวอยา่ ง
<embed src="paint.swf" width="100%"
height="250">
<noembed><img src="nosupport.gif"
></noembed>
</embed>
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
HTML
- 1 - 46
Pages: