You are on page 1of 41

การสร้างเว็บเพจด้วยภาษา html 1

หน่วยที่ 2 การสร้างเว็บเพจด้วยภาษา HTML


ภาษา HTML (HyperText Markup Language)
0

รูปที่ 1 การติดต่อสื่อสารผ่าน เวิลด์ไวด์เว็บ

ภาษา HTML (HyperText Markup Language) เป็ นภาษา


หลักที่ใช้ในการสร้างเว็บเพจ (Web Page)เป็ นภาษาประเภท Markup
Language เกิดขึ้นจากการพัฒนาระบบ World Wide Web ในเดือน
มีนาคม 1989โดยนักวิจัยจากสถาบัน CERN (Conseil European Pour
La Recherche Nucleaire) ซึ่งเป็ นห้องทดลองในเมืองเจนี วา ประเทศ
สวิสเซอร์แลนด์ ชื่อ ทิม เบอร์เนอร์ - ลี (Tim Berners - Lee) ซึ่ง ทิม
เบอร์เนอร์ - ลี ได้นำาแนวความคิดในเรื่อง Hypertext ของ Vannevar
Bush และ Ted Nelson มาใช้เพื่อกระจายข้อมูลในองค์ ต่อมามีการพัฒนา
และกำาหนดมาตรฐานโดยองค์กรที่ช่ ือว่า W3C (World Wide Web
Consortium)
ไฮเปอร เท็กซ (Hypertext) เปนเอกสารที่มีลักษณะพิเศษกวาเอกสารทัว่ ไป
ตรงที่สามารถสร้างตัวเชื่อมโยงไปยังเอกสารอื่นหรือแม้แต ในเอกสารเดียวกันได้
เอกสารไฮเปอรเท็ กซ ถูกอานและแปลผลด้วยโปรแกรมบราวเซอร โปรแกรม
บราวเซอรตัวแรกชื่อ โมเซอิค (Mosaic) ซึ่งทํางานบนระบบ X-Windowsโปรแก
รมนี้ สร้างปรากฏการณใหมข้ ึนมาในระบบการสื่ อสารข้อมูลบนอินเทอรเน็ตและ
เปนต้ นแบบของโปรแกรมบราวเซอรแบบอื่นๆ เชน เนสเคป คอมมูนิเคเตอร
(Netscape Communicator) อินเทอรเน็ต เอ็กพลอเรอร (Internet Explorer) โอ
เปรา (Opera) เปนต้น

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 2

การสร้างเว็บเพจนั้ นสามารถเลือกสร้างได้ 2 วิธี ดังนี้


1. ใช้โปรแกรมประเภทเท็กซเอดิเตอร (text editor) ซึ่งโปรแกรมที่นิ
ยมใช้กันมากคือ Notepad เพราะ เปนโปรแกรมที่ใช้งาย และมีอยูในเครื่อง
คอมพิวเตอรท่ีใช้ระบบปฏิบัติการวินโดวส
2. ใช้โปรแกรมประเภทเว็บเอดิเตอร (web editor) เชน Microsoft
FrontPage, Macromedia
Dreamweaver, Homesite, และThai HTML เปนต้น โดยสวน
ใหญโปรแกรมสําเร็จเหลานี้ มีวิธี
การใช้ท่ีคล้ายกับโปรแกรมสําเร็จที่ใช้ในสํานั กงานทัว่ ไป คือ
ผู้ใช้สามารถเห็นสิ่งที่ตัวเองพิมพ
หรือสร้างได้โดยไมจําเปนต้องพิจารณาแท็ก (tag) ที่ใช้ในการกําหนด
โครงสร้างของเว็บเพจ

รูปที่ 2 โปรแกรม Macromedia Dreamweaver


รูปที่ 3 โปรแกรม Thai – HTML Editor
ภาษา HTML เป็ นภาษาที่มีลักษณะของข้อมูลที่เป็ นตัวอักษรใน
มาตรฐานของรหัสแอสกี (ASCII Code)โดยเขียนอยู่ในรูปของเอกสาร
ข้อความ (Text Document) จึงกำาหนดรูปแบบและโครงสร้างได้ง่าย

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 3

ภาษา HTMLได้ถูกพัฒนาขึ้นอย่างต่อเนื่ องตั้งแต่ HTML Level 1 (ร่่นดัง้


เดิม), HTML 2.0, HTML 3.0, HTML 3.2 และ HTML4.0 ซึ่งเป็ นร่่นที่
นิ ยมเขียนกันในปจั จ่บัน (ขณะนี้ W3C ได้พัฒนา HTML 4.01 ออกมาแล้ว
เพื่อลองรับมาตรฐานภาษา XML) จึงทำาให้ภาษา HTML ในปจั จ่บัน
สามารถแสดงภาพทางกราฟฟิ กและระบบเสียงได้ เพื่อตอบสนองในการทำา
งานในปจั จ่บัน
ภาษา HTML สามารถสร้างขึ้นได้จากโปรแกรมสร้างไฟล์ข้อความ
(Text Editor) ทั่ว ๆ ไป เช่น Notepad หรือ Word Processing ได้ อีกทั้ง
ง่ายต่อการเรียนรู้เพราะภาษา HTML ไม่มีโครงสร้างความ
เป็ นProgramming เลยแม้แต่น้อย และไฟล์ท่ีได้จากการสร้างเอกสาร
HTML ยังมีขนาดเล็กอีกด้วย
นามสก่ลของไฟล์ HTML จะเป็ นไฟล์นามสก่ล .htm หรือ .html ซึ่ง
ใช้ในทั้ง ระบบปฏิบัติการยูนิกซ์(UNIX) และระบบปฏิบัติการ Windows
และเรียกใช้งานได้จากเว็บบราวเซอร์ (Web Browser)
โปรแกรมที่ต้องใช้ในการเขียนโฮมเพจ และการดูผลลัพธ์จาก
เว็บบราวเซอร์
โปรแกรมที่ใช้ในการเขียนโฮมเพจมีหลายโปรแกรมมาก บางโปรแกรมชวย
ให้เขียนได้งาย click แคไมเกิน 5 ครั้งก็เสร็จแล้วเชน โปรแกรม Dreamweaver ,
Flash แตผลเสียก็คือทําให้เราไมเข้าใจภาษา Html อยางถองแท้ดังนั้ น จึงขอใช้
โปรแกรม note pad ในการเขียนครับผม
1.การเปิ ดโปรแกรม Notepad ทำาดังต่อไปนี้ Click ที่ Start > Program
> Accessories > Notepad

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 4

รูปที่ 4 การเข้าโปรแกรม
2.หน้าตาโปรแกรม Notepad

รูปที่ 5 หน้าตาโปรแกรม

3. จากนั้นลองพิมพ์ไฟล์ตัวอย่างลงไปดังนี้
<HTML>
<HEAD>
<TITLE> โฮมเพจแรกของ
กระผม</TITLE>
</HEAD>
<BODY>

สวัสดีครับ คนอาน
หน้าตาดีจังเลย
</BODY>
</HTML>

รูปที่ 6 ลักษณะการเขียน

4. การบันทึก(save)
ทําดังตอไปนี้ Click ที่เมนู File > Save

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 5

หรือ

หลังจากนั้ นในชอง File name : ให้


ใชช่ ือไฟลลงไป ในตัวอยางพิมพลง
ไปวา First.html
ในชอง Save as type : ให้เลือกเป็ น

รูปที่ 7 การบันทึกไฟล

5.การดูผลลัพธ์โดยใช้โปรแกรม Internet Explorer


การเปิ ดโปรแกรม Internet Explorer สามารถทําได้หลายวิธี ก็ลองเลือกเอาสักวิธี
นะครับ

1) double click ที่ไอคอน(Icon) ของโปรแกรม Internet Explorer


2) ดับเบิ้ลคลิก(double click) ที่ไฟลของโปรแกรม Internet Explorer
(ไฟลนามสกุล html)
3) เลือกโปรแกรม Internet Explorer จากป ุมสตารท(start)
4) กรณี ท่ีเป็ น Windows 98 สามารถคลิก(click) เลือกโปรแกรม Internet
Explorer ได้จาก ทาสกบาร(taskbar)
เมื่อปรากฏหน้าตางโปรแกรม Internet Explorer จะมีหน้าตา ดังนี้

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 6

จากนั้ นให้ Click ที่ File > open จะได้หน้าตางดังนี้

ให้ Click ที่ Browse เพื่อไปเลือกไฟลท่ีต้องการจะดูผลลัพธ ในตัวอยาง


เลือกไฟลช่ ือ First.html จากนั้ น Click ที่ Open หลังจากนั้ น click ที่ ok จะได้
ผลลัพธดังนี้

จะเห็นได้วาที่ title bar มีคําวา "โฮมเพจแรกของกระผม" และมีข้อความวา


"สวัสดีครับ คนอานหน้าตาดีจังเลย"

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 7

Tip ! จะเห็นได้วาขั้นตอนไมยากเทาไรนะครับ มีข้อเสนอคือ เมื่อเราเปิ ดไฟลน้ ี ดู


แล้วและหากไปแก้ไขข้อมูลใน Note Pad แล้วทําการบันทึก หากต้องการดู
ผลลัพธ หากเราใช้ Internet Explorer เปิ ดไฟลน้ ี อยูแล้ว ให้ Click ที่คําวา
"Refresh" ได้เลย ไมจําเป็ นต้องไป File > Open อีก

โครงสร้างภาษา HTML
คำาสัง่ ในภาษา HTML เรียกว่า แท็ก (Tag) จะเขียนอยู่ใน
เครื่องหมาย < และ > แท็กจะแบ่งได้เป็ นสอง
กล่่ม คือ แท็กแบบเปิ ด และแท็กแบบปิ ด โดยปกติแล้วแท็กของภาษา
HTML จะเปิ ดและปิ ด โดยมีรูปแบบดังนี้
รูปแบบ <TAG> .... </TAG>
เช่น <HTML> .... </HTML>, <B> .... </B>
การปิ ดแท็กจะใช้เครื่องหมาย / (Slash) เป็ นตัวกำาหนดในแท็กที่ปิด
ส่วนแท็กอีกประเภทหนึ่ งจะเป็ นแท็ก
ในลักษณะเปิ ด คือ ไม่ต้องมีแท็กเปิ ดท้าย เช่น <IMG>, <BR>, <WBR>
เป็ นต้น
รูปแบบภาษา HTML
ภาษา HTML ประกอบด้วยแท็ก (tag) ทําหน้าที่ควบคุมโครงสร้างและการ
แสดงผลของเว็บเพจ ซึ่งจะ
ถูกแปลผลด้วยโปรแกรมบราวเซอร รูปแบบของคําสัง่ จะประกอบด้วย ตัวอักษร
คําสัง่ อยูภายใต้เครื่องหมาย
< > แท็กมี 2 รูปแบบดังนี้
 แท็กคู่ ประกอบด้วยคูของแท็กที่อยูภายใต้เครื่องหมาย < > คําสัง่ แตละ
คูจะมีช่ ือเรียกวา แท็กเปด(open tag) และแท็กปด (close tag)
แท็กเปดเปนคําสัง่ ที่อยูหน้าข้อความเพื่อกําหนดจุดเริม
่ ต้นลักษณะหรือรูป
แบบการแสดงผล แท็กปด คล้ายกับแท็กเปดแตมีเครื่องหมายสแลช (/)
อยูภายในทําหน้าที่ปดท้ายข้อความเพื่อกําหนดจุดสิ้นสุดของลักษณะหรือรูป
แบบการแสดงผลนั้ นๆ มีรูปแบบดังนี้

<คำาสัง่ > ข้อความ </คำา


ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 8

<ในรูปที่ 7.1
ตัวอยางของแท็กเปดและแท็กปดแสดงไว้
<HTM
/HTML
L>
>
<HEA
แท็กเปิ ด </HEA แท็กปิ ด
D>
D>
<BOD
</BOD
Y>
Y>
ตัวอย่างแท็กเปดและ
แท็กปด

 แท็กเดี่ยว เปนแท็กที่มีเฉพาะแท็กเปดเทานั้ น มีรูปแบบดังนี้

<คำาสัง่ >
ซึ่งแท็กเหลานี้ เปนแท็กที่ไมทํางานเกี่ยวกับการแสดงผลอักษรหรือรูปภาพ
การเขียนแท็กจะใช้อักษรตัวเล็ก (lower case) หรือตัวใหญ (upper case)
หรือผสมกันก็ได้ เชน
< HTML> หรือ <html> หรือ <Html> โปรแกรมบราวเซอรจะถือวาเปนคําสัง่
เดียวกัน ยกเว้นคําเฉพาะหรือ
คําระบุเส้นทาง ชื่อแฟ มข้อมูล ชื่อไดเรคทอรี่ ตัวอักษรเล็กหรือใหญจะถือวาเปน
คนละตัวกัน เชน<IMG
SRC=”picture.gif”></IMG> และ <IMG SRC=”PICTURE.GIF”></IMG>
เปนต้น
เพื่อความเข้าใจง่ายในการกำาหนดโครสร้างภาษา HTML เราจึงควร
กำาหนดแท็กเปิ ดและเปิ ดให้เหมาะสม

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 9

เพื่อสร้างความสมด่ล เช่น เมื่อเราต้องการใช้กำาหนดให้ตัวอักษรเป็ นตัว


หนาโดยใช้แท็ก <B> และให้มีการขีดเส้น
ใต้โดยใช้แท็ก <U> เราควรที่จะกำาหนดการเปิ ดและปิ ดแท็กโดยเมื่อขึ้นต้น
ด้วยแท็ก <B> และตามด้วยแท็ก <U>
ควรจะปิ ดด้วยแท็ก </U> ก่อน แล้วตามด้วยแท็ก </B> ดังนี้

<B><U> .... </U></B>


โครงสร้างหลัก
รูปแบบมาตรฐานในการสร้างเว็บเพจประกอบด้วยคำาสั่ง หลักอยู่ 4
คำาสั่ง ดังนี้
<HTML> .... </HTML> เป็ นคำาสั่ง ที่ทำาหน้าที่บอกจ่ดเริ่ม ต้นและ
จ่ดสิ้นส่ดของเว็บเพจ
<HEAD> .... </HEAD> เป็ นคำาสั่ง ในส่วนของการกำาหนดส่วนหัว
เรื่องของเว็บเพจ โดยในคำาสั่ง HEAD
จะมีคำาสั่ง <TITLE> .... </TITLE> อยู่ด้วย ซึ่งทำาหน้าที่กำาหนดข้อความที่
แสดงบน Title Bar โดยสามารถกำาหนด
ความยาวของข้อความได้ 64 ตัวอักษร
<BODY> .... </BODY> เป็ นคำาสั่ง ในส่วนเนื้ อหาของเว็บเพจทั้ง
หมด
รูปแบบการเขียนมีดังต่อไป

<HTML>
<HEAD> <TITLE> Title Bar </TITLE>
</HEAD>
<BODY>
ส่วนเนื้ อหาร รูปภาพ
</BODY>
</HTML>
การจัดรูปแบบเอกสาร
คำาสัง่ ในการกำาหนดหัวเรื่อง (Headding)
การกำาหนดหัวเรื่องเราจะใช้คำาสั่ง Headding <H> เพื่อแสดงอัตรา
อักษรขนาดใหญ่กว่าปกติ เช่น ชื่อบท,ชื่อหัวข้อ เป็ นต้น คำาสั่ง heading มี
ด้วยกัน 6 ระดับ โดยที่ระดับ 1 จะมีขนาดใหญ่ส่ด และระดับ 6 จะมีขนาด
เล็กที่ส่ด มีรูปแบบคำาสั่ง ดังนี้

<H1> .... </H1>


<H2> .... </H2>

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 10

<H3> .... </H3>


<H4> .... </H4>
<H5> .... </H5>
<H6> .... </H6>
ตัวอย่างที่1 head.html
<HTML>
<HEAD><TITLE> Heading
</TITLE></HEAD>
<BODY>
<H1> Heading
Levle 1 </H1>
<H2> Heading
Levle 2 </H2>
<H3> Heading
Levle 3 </H3>
<H4> Heading
Levle 4 </H4>
<H5> Heading
Levle 5 </H5>
<H6> Heading
Levle 6 </H6>
</BODY>
</HTML>
คำาสัง่ ขึ้นบรรทัดใหม่ (Line Break)
โดยปกติในการพิมพ์เอกสารทั่ว ๆ ไป เราจะขึ้นบรรทัดใหม่โดยใช้การ
กด Enter แต่ในการสร้างเอกสารHTML เว็บบราวเซอร์จะถือเป็ นการเว้น
วรรค 1 ช่อง และใช้เป็ นจ่ดตัดคำาขึ้นบรรทัดใหม่ถ้ายาวเกินขนาดบรรทัดแต่
ถ้าเราต้องการให้เว็บบราวเซอร์ตัดข้อความ ณ ตำาแหน่ งที่กำาหนดเราจะใช้
คำาสั่ง Line Break <BR> โดยมี
รูปแบบดังนี้
ข้อความ..... <BR>
ตัวอย่างที่ 2 break_rule.htm l
<HTML>
<HEAD><TITLE> Break Rule </TITLE></HEAD>
<BODY>
<P>
Microsoft ถูกตัดสินโดยศาลสหรัฐแล้ว
โดยศาลสั่ง ให้ Microsoft แยกบริษท ั ออกเป็ นบริษท
ั ย่อย ๆ
<I>(ในย่อหน้า้ ข้า้งบนนี้ แม้จะมีการกด Enter ขึ้น บรรทัดใหม่
แต่ HTML จะตีความเป็ นบรรทัดเดียว)</I>

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 11

<P>
Microsoft ถูกตัดสินโดยศาลสหรัฐแล้ว <BR>
โดยศาลสั่ง ให ้ Microsoft แยกบริษท ั ออกเป็ นบริษท
ั ย่อย ๆ <BR>
<I>(ส่วนย่อหน้าใช้คำาสั่ง &lt;BR&gt; จึงขึ้นบรรทัดใหม่)</I>
</BODY>
</HTML>

คำาสัง่ ยกเลิกการขึ้นบรรทัดใหม่ (No Break Rule)


เมื่อเราต้องการยกเลิกค่ณสมบัติการตัดคำาของเว็บบราว์เซอร์ เราสา
มารทำาได้โดยใช้คำาสั่ง <NOBR>
โดยมีรูปแบบดังนี้
<NOBR>.... ข้อความ ....</NOBR>
ตัวอย่างที่ 3 no_break.html
<HTML>
<HEAD><TITLE> Break Rule </TITLE></HEAD>
<BODY>
<NOBR> "The fist step toward success is identifying you own
leadership strengths"<BR> (ก้าวแรกสู่ความสำาเร็จ คือการระบ่ค่ณสมบัติเด่นของ
การเป็ นผู้นำาที่มีอยู่ในตัวค่ณ)
</NOBR>
</BODY>
</HTML>

ถ้าเราเปิ ดตัวอย่างข้างต้น แล้วย่อเว็บบราวเซอร์ดู จะเห็นได้ว่า


บรรทัดแรกจะไม่มีการตัดคำาแม้จะเว้นวรรคไว้ จนเว็บบราว์เซอร์พบคำาสั่ง
<BR> จึงทำาการตัดคำาขึ้นบรรทัดใหม่

คำาสัง่ การจัดตำาแหน่งของข้อความ (Paragraph Break)


เราจะใช้คำาสั่ง <P> ในการจัดย่อหน้าของข้อความในเว็บเพจ ซึ่งคำา
สั่ง <P> นั้น จะมี Attributes เป็ น คำาสั่ง เสริมช่วยในการจัดตำาแหน่ งของ
ย่อหน้าคือ Alignment โดยมีรูปแบบดังนี้
<P Align = "ตำาแหน่ ง" > .... ข้อความ .... </P>
ตำาแหน่ งที่ใช้ในการจัดย่อหน้ามีด้วยกันสามลักษณะคือ
• Left จัดข้อความชิดซ้ายบรรทัด
• Center จัดข้อความกึ่งกลางบรรทัด
• Right จัดข้อความชิดขวาบรรทัด
โดยปกติค่าเริ่ม ต้นของ Alignment จะอยู่ท่ี Left คือจัดข้อความชิดซ้าย
ของบรรทัด
ตัวอย่างที่4 paragraph.html
<HTML>
<HEAD><TITLE> Paragraph </TITLE></HEAD>
<BODY>
<H4>การจัดย่อหน้า้ ในเว็บเพจ</H4><BR>
<P ALIGN="Left">ข้อ ความชิดซ้า้ยบรรทัด </P>

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 12

<P ALIGN="Center">ข้อความกึ่งกลางบรรทัด </P>


<P ALIGN="Right">ข้อความชิดขวาบรรทัด </P>
</BODY>
</HTML>

คำาสัง่ จัดวางข้อความกึง่ กลางบรรทัด (Center)


ในการจัดวางตำาแหน่ งของข้อความด้วยภาษา HTML นอกจากจะใช้
คำาสั่ง <P Align= "ตำาแหน่ ง"> แล้วเรายังสามารถกำาหนดกล่่มข้อความ
หรือรูปภาพให้อยู่กึ่งกลางได้ด้วยคำาสั่ง <CENTER> ที่มีรูปแบบกระชับ
กว่าโดยมีรูปแบบดังนี้
<CENTER> .... ข้อความ .... </CENTER>

ซึ่งข้อความที่ได้จะอยู่กึ่งกลางบรรทัด เหมาะกับการสร้างข้อความที่
เป็ นหัวเรื่อง
ตัวอย่างที่5 center.html
<HTML>
<HEAD><TITLE> Center </TITLE></HEAD>
<BODY>
<H1><CENTER>การฝึ กอบรมเชิงปฏิบัติการ
เรื่อง</CENTER></H1>
<H2><CENTER>การสร้างเว็บเพจเบื้องต้น </CENTER></H2>
<H3><CENTER>วิทยากร อ.ชัยวัฒน์ เทียนนาวา</CENTER></H3>
</BODY>
</HTML>
การตีเส้นแนวนอน (Horizontal Line)
ภาษา HTML มีคำาสั่ง ช่วยในการตีเส้นแนวนอน เพื่อแยกเอกสารออก
เป็ นส่วน ๆ ให้งา
่ ยต่อการดูรูปแบบ
เอกสารมากขึ้น โดยมีรูปแบบดังนี้
<HR>
สำาหรับคำาสั่ง <HR> นี้ จะไม่มีแท็กปิ ด เป็ นคำาสั่ง ในลักษณะที่เรียกว่า
แท็กเปิ ด ซึ่งถ้าเป็ นคำา default จะแสดงเส้นขนาด 2 pixels เต็มจอภาพ
แต่คำาสั่ง <HR> ยังมี Attributes ช่วยในการกำาหนดความหนา,
ความยาว,การจัดตำาแหน่ ง และการกำาหนดความทึบของเส้น โดยมีรูปแบบ
ดังนี้
<HR Size = "ความหนาของเส้น "
Width = "ความยาวของเส้น "
Align = "ตำาแหน่ งการจัดวาง"
Noshade>
Size เป็ นการกำาหนดความหนาให้กับเส้น ขนาดปกติ คือ 2
pixels
Width เป็ นการกำาหนดความยาวให้กับเส้น สามารถกำาหนดเป็ นทั้ง
pixels และ % โดยปกติ
ถ้าไม่กำาหนด เส้นจะยาวเต็มจอภาพ

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 13

Align เป็ นการกำาหนดตำาแหน่ งการจัดวางของเส้น ประกอบด้วย


Left คือ การจัดเส้นชิดซ้ายของบรรทัด
Center คือ การจัดเส้นอยู่กึ่งกลางบรรทัด
Right คือ การจัดเส้นชิดขาวของบรรทัด
Noshade เป็ นการกำาหนดแสดงเส้นทึบไม่มีการแรงเงาของเส้น

ตัวอย่างที่6 horizontal_line.html
<HTML>
<HEAD><TITLE> Horizontal Line </TITLE></HEAD>
<BODY>
เส้น ขนาดปกติ <HR> เส้น ความหนา 5 <HR Size="5">
เส้น ความหนา 20 <HR Size="20"> เส้น ความยาว 200 <HR
Width="200">
เส้น ความยาว 50% ของจอภาพ <HR Width="50%">
เส้น ความหนา 20 ความยาว 20% <HR size="20" Width="20%">
เส้น ความหนา 10 ความยาว 20% และอย่ชู ิดซ้ายของบรรทัด <HR size="10"
Width="20%" Align="Left">
เส้น ความหนา 10 และแสดงเส้น ทึบโดยไม่มีการแรเงาของเส้น <HR Size="10"
Noshade>
</BODY>
</HTML>

การจัดรูปแบบตัวอักษร และการใช้สี
คำาสัง่ ในการกำาหนดแบบตัวอักษร (Font Type)
คำาสั่ง ในการกำาหนดแบบตัวอักษรนั้น เราใช้แท็ก <FONT> ซึ่งแท็
กนี้ สามารถที่จะกำาหนดได้ต้ังแต่ แบบ
ตัวอักษร (Font Face), ขนาดของตัวอักษร (Font Size) และสีของตัว
อักษร (Font Color)
การกำาหนดแบบตัวอักษร หรือที่เรียกว่า ฟอนต์ (Font) โดยปกติค่า
เริ่ม ต้นของเว็บบราวเซอร์จะกำาหนดเป็ นแบบ Time New Roman เพื่อ
ความหลากหลายของรูปแบบตัวอักษรมากกว่า 1 รูปแบบบนจอภาพของ
บราวเซอร์ เราสามารถใช้คำาสั่ง <FONT> ตามด้วย Attributes "FACE"
เพื่อกำาหนดรูปแบบการแสดงผลภาษาไทยให้กับตัวอักษรของเว็บเพจของ
เราได้ ซึ่งการแสดงผลภาษาไทยนั้นมีฟอนต์ให้เลือกหลายแบบตัวอย่างเช่น
AngsanaUPC, CordiaUPC, BrowalliaUPC, MS Sans Serif เป็ นต้น
แต่สำาหรับฟอนต์ท่ีเหมาะสมกับการแสดงผลภาษาไทยในเว็บบราวเซอร์ คือ
MS Sans Serif โดยมีรูปแบบดังนี้
<FONT Face = "ชื่อฟอนต์"> ... ข้อความ ... </FONT>

ถ้าต้องการระบ่มากกว่า 1 ฟอนต์ ให้กำาหนดรูปแบบดังนี้

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 14

<FONT Face = "ชื่อฟอนต์1",ชื่อฟอนต์2",...> ... ข้อความ ... </FONT>

ข้อดีของการกำาหนดฟอนต์ไว้มากกว่า 1 ฟอนต์ ก็คือ เมื่อเว็บ


บราวเซอร์หาฟอนต์ท่ี 1 ไม่เจอก็จะหา
ฟอนต์ท่ี 2 ต่อไปตามลำาดับ
ตัวอย่างที่7 font_face.html
<HTML>
<HEAD><TITLE> Font Face </TITLE></HEAD>
<BODY>
<FONT Face="AngsanaUPC">แบบตัวอักษรแบบ AngsanaUPC</FONT>
<BR>
<FONT Face="Ms Sans Serif">แบบตัวอักษรแบบ Ms Sans
Serif</FONT><BR>
<FONT Face="Comic Sans MS">Font Style Comic Sans MS</FONT>
<BR>
<FONT Face="Bookman Old Style">Font Style Bookman Old
Style</FONT><BR>
</BODY>
</HTML>
เราสามารถกำาหนดขนาดของตัวอักษรในคำาสั่ง <FONT> โดยใช้
Attributes "Size" ในภาษา HTMLกำาหนดขนาดของตัวอักษรได้ 7 ขนาด
โดยใช้ตัวเลข 1-7 เป็ นตัวกำาหนด ค่าเริ่ม ต้นจะมีขนาดเป็ น 3
<FONT Size = "ขนาด"> ... ข้อความ ... </FONT>
ตัวอย่างที่8 font_size.html
<HTML>
<HEAD><TITLE> Font Face </TITLE></HEAD>
<BODY>
<FONT Size="1">Font Size 1</FONT><BR>
<FONT Size="2">Font Size 2</FONT><BR>
<FONT Size="3">Font Size 3</FONT><BR>
<FONT Size="4">Font Size 4</FONT><BR>
<FONT Size="5">Font Size 5</FONT><BR>
<FONT Size="6">Font Size 6</FONT><BR>
<FONT Size="7">Font Size 7</FONT><BR>
</BODY> </HTML>

การกำาหนดสีให้กับตัวอักษรเราใช้ Attributes "Color" ในการ


กำาหนดสีของตัวอักษรทำาได้ 2 วิธี คือ
1.กำาหนดจากชื่อของสีมาตรฐาน เป็ นการกำาหนดจากชื่อสีมาตรฐาน
โดยตรง เช่น Black, Red เป็ นต้น
2.กำาหนดจากรหัสเลขฐาน 16 จะใช้การอ้างอิงเลขฐาน 16 ในระบบ
ของหมายเลขสี RGB (Red,Green, Blue) ซึ่งมีรูปแบบของรหัสสีเป็ น
#RRGGBB โดยใช้แทนรหัสด้วยเลขฐาน 16 ในช่วง 0,
1,2,3,4,5,6,7,8,9,A,B,C,D,E,F ตามลำาดับ
โดยมีรูปแบบดังน ้ี

<FONT Color = "ชื่อสีมาตรฐาน"> ... ข้อความ ... </FONT>


หรือ

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 15

<FONT Color = "#RRGGBB"> ... ข้อความ ... </FONT>

ตัวอย่าง สีมาตราฐานในการแสดงผลบนเว็บบราวเซอร์ (ในที่น้ี ขอใช้


Internet Explorer เป็ นหลัก) ทั้ง ชื่อ
ของสี และรหัสเลขฐาน 16 มีดังนี้

ตัวอย่างที่9 font_color.html
<HTML>
<HEAD><TITLE> Font Color</TITLE></HEAD>
<BODY>
<FONT color="Blue">This is Blue Color</FONT><BR>
<FONT color="Green">This is Green Color</FONT><BR>
<FONT color="#FFA500">This is #FFA500</FONT><BR>
</BODY>
</HTML>

คำาสัง่ ในการกำาหนดลักษณะตัวอักษร (Style)


ในภาษา HTML มีคำาสั่ง ที่ช่วยในการกำาหนดลักษณะตัวอักษรให้มี
ความเด่นชัด เพื่อความเหมาะสมกับงานในลักษณะต่าง ๆ โดยมีรูปแบบต่าง
ๆ ดังนี้
• การกำาหนดตัวอักษรตัวหนา (Bold) ใช้แท็ก <B>
• การกำาหนดตัวอักษรตัวเอียง (Italic) ใช้แท็ก <I>
• การกำาหนดขีดเส้นใต้ตัวอักษร (Underline) ใช้แท็ก <U>
• การกำาหนดตัวอักษรตัวพิมพ์ดีด (Typewriter) ใช้แท็ก <TT>
• การกำาหนดขีดเส้นพาดทับกลางตัวอักษร (Strikethrough) ใช้แท็ก
<S>

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 16

• การกำาหนดตัวอักษรตัวห้อย (Subscript) ใช้แท็ก <SUB>


• การกำาหนดตัวอักษรตัวยก (Superscript) ใช้แท็ก <SUP>
• การกำาหนดตัวอักษรตัวโต (Big) ใช้แท็ก <BIG>
• การกำาหนดตัวอักษรตัวเล็ก (Small) ใช้แท็ก <SMALL>
<B> ... ข้อความ ... </B>
<I> ... ข้อความ ... </I>
<U> ... ข้อความ ... </U>
<TT> ... ข้อความ ... </TT>
<S> ... ข้อความ ... </S>
<SUB> ... ข้อความ ... </SUB>
<SUP> ... ข้อความ ... </SUP>
<BIG> ... ข้อความ ... </BIT>
<SMALL> ... ข้อความ ... </SMALL>

ตัวอย่างที่10 style.html
<HTML>
<HEAD><TITLE> Font Face </TITLE></HEAD>
<BODY>
แบบตัวอักษรปกติ
แบบตัวอักษรหนา <B>Bold</B><BR>
แบบตัวอักษรเอียง <I>Italic</I><BR>
แบบตัวอักษรขีดเสน้ ใต <
้ U>Underline</U><BR>
แบบตัวอักษรตัวพิมพ์ดีด <TT>Typewriter</TT><BR>
แบบตัวอักษรขีดเสน้ พาดทับกลางตัวอักษร <S>Strikethrough</S><BR>
แบบตัวอักษรตัวหอ้ ย <SUB>Subscript</SUB><BR>
แบบตัวอักษรตัวยก <SUP>Superscript</SUP><BR>
แบบตัวอักษรตัวโต <BIG>Big</BIG><BR>
แบบตัวอักษรตัวเล็ก <SMALL>Small</SMALL>
</BODY>
</HTML>

การกำาหนดสีพ้ น
ื หลัง
การกำาหนดสีพ้ ืนหลังของเว็บเพจเราสามารถทำาได้จากแท็ก
<BODY> โดยกำาหนดจาก Attributes "BGColor" โดยมีรูปแบบดังนี้
กำาหนดสีพ้ ืนหลังจากชื่อ สีมาตรฐาน
<BODY BGColor = "สีพ้ ืน หลัง">
....
</BODY>
กำาหนดสีพ้ ืน หลังจากเลขฐาน 16
<BODY BGColor = "#RRGGBB">
....
</BODY>

ตัวอย่างที่11 bgcolor.html
<HTML>
<HEAD><TITLE> BGColor </TITLE></HEAD>
<!-- BODY BGColor="Yellow" -->
<BODY BGColor="#FFFF00"> The Internet is a collection of information
stored in computers physically located throughout the world.<BR>
Much of the information on the Internet is organized onto electronic pages.

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 17

You'll bring one page to your computer screen, discover its contents, and have
the option of bringing more pages of information.
</BODY>
</HTML>

การกำาหนดสีให้กับตัวอักษรทัง ้ เอกสาร
การกำาหนดสีให้กับตัวอักษรทั้ง เว็บเพจเราสามารถทำาได้จากแท็ก
<BODY> โดยกำาหนดจาก Attributes
"Text" โดยมีรูปแบบดังนี้
กำาหนดสีพ้ ืน หลังจากชื่อ สีมาตรฐาน
<BODY Text = "สีพ้ ืน หลัง">
....
</BODY>
กำาหนดสีพ้ ืน หลังจากเลขฐาน 16
<BODY Text = "#RRGGBB">
....
</BODY>

ตัวอย่างที่12 body_text.html
<HTML>
<HEAD><TITLE> Heading </TITLE></HEAD>
<!-- BODY Text="Red" -->
<BODY Text="#FF0000"> The Internet is a collection of information stored
in computers physically located throughout the world.<BR>
Much of the information on the Internet is organized onto electronic pages.
You'll bring one page to your computer screen, discover its contents, and have
the option of bringing more pages of information.
</BODY>
</HTML>

การกำาหนดเครื่องหมายหัวข้อและเลขลำาดับ
คำาสัง่ ในการแสดงรายการแบบไม่มีลำาดับ (Unordered List)
Unordered List หรือ Bullet List นั้น ในภาษา HTML ได้กำาหนดคำา
สั่ง ในการอำานวยความสะดวกในการ
สร้าง Bullet ขึ้นไว้ดว
้ ย เพื่อแสดงเครื่องหมายหน้าหัวข้อเรื่องหรือลำาดับ
ของรายการต่าง ๆ โดยไม่มีการ
เรียงลำาดับ โดยมีรูปแบบดังนี้
<UL>
<LI> ... ข้อความ ...
<LI> ... ข้อความ ...
<LI> ... ข้อความ ...
... ...........
</UL>

ตัวอย่างที่13 bullet1.html

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 18

<HTML>
<HEAD><TITLE> List Item </TITLE></HEAD>
<BODY>
<UL>Viewing the Navigator Window
<LI>Window and frames
<LI>Colors and underlining
<LI>Company logo
<LI>Progress bar
<LI>Status message area
</UL>
</BODY>
</HTML>

เรายังสามารถระบ่ชนิ ดของเครื่องหมายได้ด้วย Attributes "Type" ใน


แท็ก <UL> หรือ <LI> โดยมี
รูปแบบดังนี้
<UL Type = "ชนิ ดของเครื่องหมาย">
<LI Type = "ชนิ ดของเครื่องหมาย">

ชนิ ดของเครื่องหมายมีด้วยกัน 3 แบบ ดังนี้

ตัวอย่างที่14 bullet2.html
<HTML>
<HEAD><TITLE> List Item </TITLE></HEAD>
<BODY>
<UL Type="Circle">วิวัฒนาการคอมพิวเตอร์
<LI>ย่คหลอดสูญญากาศ
<LI>ย่คทรานซิสเตอร์
<LI>ย่ควงจรรวม
<LI>ย่ควีแอลเอสไอ
<LI>ย่คเครือข่าย
</UL>
</BODY>
</HTML>

คำาสัง่ ในการแสดงรายการแบบเป็นลำาดับ (Ordered List)


เราสามารถแสดงรายการแบบเป็ นลำาดับ คือ Ordered List หรือ
Number List ได้ โดยการใช้ตัวเลขหรือ

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 19

ตัวอักษร
รเป็ นตัวกำาหนดแสดงลำาดับ โดยมีรูปแบบดังนี้
<OL Type = "ชนิ ดของตัวเลข" Start = "ตัวเลขเริ่มต้น ">
<LI> ... ข้อความ ...
<LI> ... ข้อความ ...
<LI> ... ข้อความ ...
... ...........
</OL>

ชนิ ดของ Type กำาหนดเลขลำาดับได้ดังนี้

ตัวอย่างที่15 order_list.html
<HTML>
<HEAD><TITLE> Order List </TITLE></HEAD>
<BODY>
<OL Type="I">My computer in my dream
<LI>Inter Pentium 4 processor 2.0 GHz
<LI>RDRAM 256 MB
<LI>Harddisk 50 GB ATA-100
<LI>52X CD-Rom Drive
<LI>Speakers (Labtec) 160 Watt
<LI>Asus GeForce3 64 MB
<LI>Creative Sound Baster
</OL>
</BODY>
</HTML>

การสร้างตาราง
คำาสัง่ ในการสร้างตาราง (Table)
การสร้างเว็บเพจในปัจจ่บันมีการนำาตารางเข้ามาเกี่ยวข้องกับหลาย
ๆ ส่วน ตั้ง แต่การสร้างตารางเพื่อแสดงความสัมพันธ์ในลักษณะแถว
(Row) และคอลัมน์ (Column) รวมถึงการแบ่งขอบเขตให้กับข้อความเพื่อ
การจำากัดและควบค่มข้อความให้อยู่ในส่วนที่เราต้องการคำาสั่ง สำาหรับ
สร้างตารางประกอบด้วยคำาสั่ง ดังนี้

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 20

สำาหรับโครงสร้างของคำาสั่ง ในการสร้างตารางมีดังนี้
<TABLE>
<CAPTION> ข้อความกำากับตาราง </CAPTION>
<TR>
<TH> ข้อความส่วนหัว </TH>
....................
</TR>
<TR>
<TD> ข้อความส่วนของข้อมูล </TD>
........................
</TR>
<TR>
<TD> ข้อความส่วนของข้อมูล </TD>
........................
</TR>
........................
</TABLE>

ตัวอย่างที่16 table1.html
<HTML>
<HEAD><TITLE> Table Tag </TITLE></HEAD>
<BODY>
<CENTER> Example Data
<H2>Report Sale 2001</H2>
<TABLE>
<TR>
<TH>Month</TH> <TH>Sale A</TH> <TH>Sale
B</TH>
</TR>
<TR>
<TD>January</TD> <TD>500</TD>
<TD>800</TD>
</TR>
<TR>
<TD>February</TD> <TD>1200</TD>
<TD>1000</TD>
</TR>
<TR>
<TD>Mar</TD> <TD>900</TD> <TD>400</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 21

เรายังสามารถใช้ Attributes เพื่อให้เว็บบราวเซอร์แสดงตารางให้ชัดเจน


ยิ่ง ขึ้น Attributes ต่าง ๆ มีดังนี้

การกำาหนดค่าต่าง ๆ ของ Attributes ที่กล่าวมาแล้ว ความ


แตกต่างของการกำาหนดค่าเป็ น pixel และเป็ น percent นั้นมีu3588
ความแตกต่างกันดังนี้
• พิกเซล (Pixel) การกำาหนดค่าเป็ นแบบพิกเซล เมื่อการลดขนาด
ของเว็บบราวเซอร์ตารางจะไม่ลดขนาดตามความกว้าง หรือยาวของ
เว็บบราวเซอร์
• เปอร์เซ็นต์ (Percent หรือ %) ถ้ากำาหนดค่าในลักษณะของ
Percent เมื่อบราวเซอร์มีการลดขนาดลง ขนาดของตารางจะลด
สัดส่วนตามขนาดของตัวเว็บบราวเซอร์ด้วย
ตัวอย่างที่17 table2.html
<HTML>
<HEAD><TITLE> Table Tag </TITLE></HEAD>
<BODY>
<CENTER> Example Data
<H2>Report Sale 2001</H2>
<TABLE Border="3" CellSpacting="5" CellPadding="3">
<TR>
<TH>Month</TH> <TH>Sale A</TH> <TH>Sale
B</TH>
</TR>
<TR>
<TD>January</TD> <TD>500</TD> <TD>800</TD>
</TR>
<TR>
<TD>February</TD> <TD>1200</TD>
<TD>1000</TD>
</TR>
<TR>
<TD>Mar</TD> <TD>900</TD> <TD>400</TD>
</TR>
</TABLE>

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 22

</CENTER>
</BODY>
</HTML>

คำาสัง่ ในการกำาหนดสี และการจัดตำาแหน่งของข้อมูลในตาราง


ในการสร้างตารางในภาษา HTML มี Attributes ที่ช่วยเพมิ่ สีสันและ
ความเหมาะสมให้กับตาราง คือ
• Align ใช้กำาหนดการจัดตำาแหน่ งของข้อมูลในตางราง ไม่วา
่ จะเป็ น
ข้อความหรือภาพ กำาหนดได้ 3 ลักษณะ
Left กำาหนดการจัดวางแบบชิดขอบซ้ายของตาราง
Right กำาหนดการจัดวางแบบชิดขอบขาวของตาราง
Center กำาหนดการจัดวางแบบกึ่งกลางของตาราง
• BGColor เป็ นการกำาหนดพื้นสีภายในตารางที่อยู่ในแถวนั้น
ตัวอย่างที่18 table3.html
<HTML>
<HEAD><TITLE> Table Tag </TITLE></HEAD>
<BODY>
<CENTER>
<H2>Report Sale 2001</H2>
<TABLE Border="3" CellSpacting="5" CellPadding="3">
<CAPTION Aling="Bottom"> Summation Sale Report
</CAPTION>
<TR Aling="Center" BGColor="Whitegreen">
<TH>Month</TH> <TH>Sale A</TH> <TH>Sale
B</TH>
</TR>
<TR Align="Center" BGColor="Yellow">
<TD>January</TD> <TD>500</TD>
<TD>800</TD>
</TR>
<TR Align="Center" BGColor="Skyblue">
<TD>February</TD> <TD>1200</TD>
<TD>1000</TD>
</TR>
<TR Align="Center" BGColor="Pink">
<TD>Mar</TD> <TD>900</TD> <TD>400</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

การนำารูปภาพมาใช้กับเว็บเพจ
ชนิ ดของรูปภาพ
การนำารูปภาพมาใส่ในเว็บเพจเป็ นส่วนหนึ่ งที่สร้างความน่าสนใจให้
กับเว็บเพจเป็ นอย่างมาก โดยเฉพาะ

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 23

การสร้างเว็บเพจในปจั จ่บันก้าวไปถึงขัน้ มีการตอบโต้กับผู้ท่ีเข้าชมเว็บเพจ


หรือที่เรียกกว่า อินเตอร์แอ็คทีฟ
(Interactive) การนำารูปภาพในใช่ในเว็บเพจยงิ่ มีความจำาเป็ นมากยงิ่ ขึ้น
ในการแสดงผลในเว็บเพจนั้น ภาพในแบบที่เหมาะสมคือภาพในแบบ GIF
หรือ JPEG เนื่ องจากภาพที่
ได้จะมีขนาดเล็ก ทำาให้แสดงผลได้อย่างรวดเร็ว
1. Graphics Interchange Format (GIF) เป็ นภาพที่มีการบีบอัด
ข้อมูล ภาพจึงมีขนาดเล็ก แต่สีท่ี
รูปภาพในแบบ GIF นั้นสามารถแสดงผลได้เพียง 256 สี จึงเหมาะกับภาพ
ในลักษณะภาพวาด ไฟล์ภาพแบบ
GIF มีอยู่ด้วยกัน 2 ชนิ ด คือ
- GIF87a เป็ นไฟล์ GIF ทั่ว ไป
- GIF89a เป็ นไฟล์ GIF ที่สามารถเคลื่อนไหวได้ หรือที่เรียกว่า
GIF Animation
ไฟล์ภาพแบบ GIF ทั้ง สองชนิ ดสามารถปรับการแสดงผลได้ 3 แบบ
ได้แก่
- แบบ Interlaced จะทำาการแสดงภาพออกเป็ นช่วง ๆ แทนที่
จะแสดงไล่ลงมาจากบนลงล่างตามปกติ
- แบบ Progressive จะทำาการแสดงภาพแบบหยาบ ๆ ก่อน
แล้วค่อย ๆ ชัดขึ้น
- แบบ Transparent Background จะแสดงภาพโดยไม่มีพ้ ืน
ฉากหลัง
2. Joint Photographic Experts Group (JPEG หรือ JPG) เป็ น
รูปภาพที่ถูกบีบอัดข้อมูลไว้ โดยใช้เทคนิ ค Lossy ซึ่งค่ณภาพของภาพที่ได้
จะมีค่ณภาพลดลงตามขนาดที่บีบอัดข้อมูล แต่ไม่จำากัดจำานวนสี ไฟล์ภาพ
แบบ JPEG เหมาะสำาหรับภาพในลักษณะภาพถ่าย
คำาสัง่ ในการใส่รูปภาพในเว็บเพจ (Image)
เราจะใช้แท็ก <IMG> ในการนำาภาพเข้ามาแสดงผลในเว็บเพจ โดยมี
รูปแบบดังนี้
<IMG SRC = "ไฟล์ภาพ">

สำาหรับ Attributes ที่ใช้ระบ่ตำาแหน่ งของรูปภาพคือ SRC หรือ


Source เราสามารถที่จะชี้ตำาแหน่ งที่เก็บ
ภาพได้ เช่น <IMG SRC="http://www.bpts.org/image/logo.gif">
เป็ นต้น
ตัวอย่างที่19 image1.html
<HTML>

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 24

<HEAD><TITLE> Image </TITLE></HEAD>


<BODY>
<CENTER> <IMG SRC="mypic.jpg"> </CENTER>
</BODY>
</HTML>

ถ้าเราต้องการใส่คำาอธิบายภาพ ภาษา HTML มี Attributes ที่ช่วย


ทำาในส่วนนี้ คือ ALT (Alternative Text) ประโยชน์สำาหรับ Attributes นี้
คือ เมื่อผู้ใช้เว็บบราวเซอร์ท่ีไม่รองรับการแสดงผลในแบบกราฟฟิ ค ในส่วน
ของภาพจะมีข้อความขึ้นมาอธิบายในส่วนนั้น โดยมีรูปแบบดังนี้
<IMG SRC = "ไฟล์ภาพ" ALT = "คำาอธิบาย">

ตัวอย่างที่20 image2.html
<HTML>
<HEAD><TITLE> Image </TITLE></HEAD>
<BODY>
<CENTER> <IMG SRC=" mypic.jpg" ALT="รูปใครเอ่ย"></CENTER>
</BODY>
</HTML>

การนำารูปภาพทำาเป็นพื้นหลัง
เราสามารถนำารูปภาพไปประกอบเป็ นพื้นหลังหรือที่เรียกว่าวอลล์
เปเปอร์ (Wall Paper) ของเว็บเพจได้ โดยกำาหนดในส่วนของแท็ก Body
ซึ่งใช้ Attributes Background โดยมีรูปแบบดังนี้
<BODY Background = "ไฟล์ภาพ">

ตัวอย่างที่21 image_background.html
<HTML>
<HEAD><TITLE> Wall Paper </TITLE></HEAD>
<BODY Background="logo_bg.gif">
<CENTER> We are students</CENTER>
</BODY>
</HTML>

การเชื่อมโยงเว็บเพจ (Link)
การเชื่อมโยงเว็บเพจ หรือที่เรียกว่าลิงค์ (Link) ถือว่าเป็ นค่ณสมบัติท่ี
สำาคัญของภาษา HTML ดังจะเห็นได้จากเว็บเพจทั่ว ๆ ไป จ่ดเชื่อมโยง
เว็บเพจอาจจะเป็ นข้อความหรือรูปภาพก็ได้
การสร้างจุดเชื่อมโยงข้อความ (Text Link)
ในการเชื่อมโยงเว็บเพจเราจะใช้แท็ก <A> โดยการกำาหนดข้อความ
ในเอกสาร HTML เป็ นจ่ดเชื่อมโยง

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 25

โดยมีรูปแบบดังนี้
<A HREF = "URL"> ข้อ ความ </A>

A HREF หมายถึง Hypertext Reference ส่วน URL (Uniform


Resource Location) คือ รูปแบบมาตรฐานที่เป็ นแหล่งที่ขอใช้บริการ
อินเทอร์เน็ต โดยเขียนอยู่ในรูปแบบดังนี้
โปรโตคอล://ชื่อ โฮส.โดเมน/ชื่อ ไฟล์
ตัวอย่างเช่น
http://www.microsoft.com/ ftp://ftp.nectec.or.th/
http://www.north.rit.ac.th/index.html

ตัวอย่างที่22 link1.html
<HTML>
<HEAD><TITLE>Link</TITLE></HEAD>
<BODY>
<CENTER><H2>สภาบันการศึกษา</H2></CENTER><BR>
<A HREF="http://www.north.rit.ac.th/">สถาบันเทคโนโลยีราชมงคล
วิทยาเขตภาคพายัพ</A><BR>
<A HREF="http://www.ru.ac.th/">มหาวิทยาลัยรามคำาแหง</A><BR>
<A HREF="http://www.cu.ac.th/">จ่ฬาลงกรณ์มหาวิทยาลัย</A><BR>
<A HREF="http://www.tu.ac.th/">มหาวิทยาลัยธรรมศาสตร์</A><BR>
</BODY>
</HTML>

การสร้างจุดเชื่อมโยงกับรูปภาพ (Graphic Link)


เป็ นการกำาหนดให้รูปภาพเป็ นจ่ดเชื่อมโยง โดยมีรูปแบบดังนี้
<A HREF = "URL"><IMG SRC = "ชื่อ ไฟล"์ ></A>

ตัวอย่างที่23 link2.html
<HTML>
<HEAD><TITLE>Link</TITLE></HEAD>
<BODY>
<CENTER> <H2>หนังสือพิมพ์ไทย</H2>
<P>
<A HREF="http://www.komchadluek.com/">
<IMG SRC="komchadluek.gif" BORDER="0">
</A>
<P>
<A HREF="http://www.thairath.com/">
<IMG SRC="thairath.gif" BORDER="0">
</A>
</CENTER>
</BODY>
</HTML>

การกำาหนดสีให้กับจุดเชื่อมโยงเว็บเพจ

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 26

การสร้างเว็บเพจด้วยภาษา HTML นั้น จ่ดเชื่อมโยงข้อความที่เรา


สร้างขึ้นจะมีสีท่ีแตกต่างจากปกติพร้อมทั้ง มีเส้นใต้บ่งบอกจ่ดเชื่อมโยงด้วย
เราจะกำาหนดสีของ Link ในเว็บเพจจากแท็ก Body โดยมีรูปแบบดังนี้
<BODY Attributes = "ชื่อ สีมาตราฐาน">
หรือ
<BODY Attributes = "#RRGGBB">

Attributes ที่ใช้ในการกำาหนดสีมีด้วยกันดังนี้
BGCOLOR กำาหนดสีพ้ ืนหลังให้กับเว็บเพจ
TEXT กำาหนดสีตัวอักษรปกติ
LINK กำาหนดสีตัวอักษรที่เป็ นจ่ดเชื่อมโยง
VLINK (Visited Link) กำาหนดสีตัวอักษรที่ทำาการคลิกเพื่อไปยัง
เป้ าหมายแล้ว
ALINK (Active Link)กำาหนดสีตัวอักษรที่กำาลังคลิกไปยังเป้ าหมาย
ตัวอย่างที่24 link3.html
<HTML>
<HEAD><TITLE>Link</TITLE></HEAD>
<BODY TEXT="RED" LINK="BLUE" VLINK="GREEN" ALINK="ORANGE">
<CENTER><H2>สภาบันการศึกษา</H2></CENTER><BR>
<A HREF="http://www.north.rit.ac.th/">สถาบันเทคโนโลยีราชมงคล
วิทยาเขตภาคพายัพ </A><BR>
<A HREF="http://www.ru.ac.th/">มหาวิทยาลัยรามคำาแหง</A><BR>
<A HREF="http://www.cu.ac.th/">จ่ฬาลงกรณ์มหาวิทยาลัย</A><BR>
<A HREF="http://www.tu.ac.th/">มหาวิทยาลัยธรรมศาสตร์</A><BR>
</BODY>
</HTML>

การเชื่อมโยงระหว่างเว็บเพจ
ในการระบ่ตำาแหน่ งที่อยู่สำาหรับลิงค์น้ัน ถ้าอยู่ต่างเว็บไซต์กันจะต้อง
ระบ่ไว้ให้ครบถ้วน ตามตัวอย่างที่ 22-24 ที่ผ่านมา แต่ถ้าเป็ นไฟล์ HTML
ในเว็บไซต์เดียวกันเราสามารถละชื่อเว็บไซต์ได้ เหลือเพียงชื่อไฟล์ก็พอ
ตัวอย่างที่25 link3.html
<HTML>
<HEAD><TITLE>Link</TITLE></HEAD>
<BODY>
<CENTER><H2>สภาบันการศึกษา</H2></CENTER><BR>
<A HREF="head.html">ตัวอย่างท ่ี 1</A><BR>
<A HREF="paragraph.html">ตัวอย่างท ่ี 4</A><BR>
<A HREF=" font_size.html">ตัวอย่างท ่ี 8</A><BR>
<A HREF=" order_list.html">ตัวอย่างท ่ี 15</A><BR>
<A HREF=" table3.html">ตัวอย่างท ่ี 18</A><BR>
</BODY>
</HTML>

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 27

การสร้างเฟรม (Frame) คือการแบงหน้าจอของเว็บเพ็จออกเป็ นสวนตาง


ๆ ทางด้านแนวตั้งและแนวนอนตามที่เราต้องการ ซึ่งในแตละสวนสามารถแสดง
ผลได้อยางอิสระ และสามารถแสดงผลได้มากกวา 1 ไฟล เราสามารถใช้แถบ
เลื่อน(Scroll Bar) เลื่อนดูข้อมูลในแตละเฟรมได้ การสร้างเฟรมเป็ นการแบงสวน
ของพื้ นที่แสดงผลหน้าจออยางมีประสิทธิภาพ นอกจากนี้ ยังสามารถเชื่อมโยงไป
ยัง ไฟลและเว็บไซดอ่ ืน ๆ ได้อีกด้วย

1. รูปแบบคำาสัง่ การสร้าง Frame

การสร้างเฟรม (Frame) คือการแบงหน้าจอของเว็บเพ็จออกเป็ นสวนตาง


ๆ ทางด้านแนวตั้งและแนวนอนตามที่เราต้องการ ซึ่งในแตละสวนสามารถแสดง
ผลได้อยางอิสระ และสามารถแสดงผลได้มากกวา 1 ไฟล เราสามารถใช้แถบ
เลื่อน(Scroll Bar) เลื่อนดูข้อมูลในแตละเฟรมได้ โดยทัว่ ไปคําสัง่ ที่ใช้ในการสร้าง
เฟรมมีดังตอไปนี้ คือ
<FRAMESET>........</FRAMESET> ใช้ในการแบงสวนของเฟรม
เป็ นลักษณะแนวนอนและ
แนวตั้ง(ROWS AND COLS) มีรูปแบบคําสัง่ ดังนี้

<FRAMESET COLS ="VALUE 1,VALUE 2,......VALUE n"> แบง


หน้าจอตามแนวตั้ง
<FRAMESET ROWS ="VALUE 1,VALUE 2,......VALUE n"> แบง
หน้าจอตามแนวนอน

<FRAME > ใช้ในการกําหนดการแสดงผลในแตละเฟรม มีรูปแบบดังนี้


<FRAME NAME="ชื่อเฟรม" SRC="ชื่อไฟล.html"> เป็ นสวนที่ใช้แสดง

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 28

ไฟล html ในกรณี ท่ีต้อง


การแสดงไฟลใดก็ให้กําหนดเรียกไฟลน้ ั น ๆ ตามต้องการ

2. ประเภทการสร้างเฟรมแบบต่าง ๆ

2.1 การแบ่งหน้าจอโดยกำาหนดหน่วยตามความละเอียด
การแบงหน้าจอโดยกําหนดหนวยตามความละเอียดจอภาพ จะมีหนวยเป็ น
พิกเซล ( Pixel )เชน 640 X 480 , 800 X 600 และ 1,024 X 768 เป็ นต้น
การแบงหน้าจอจะต้องคํานึ งถึงผู้ใช้ทัว่ ไปวา สวนใหญกําหนดความละเอียด
มาตรฐานกี่พิกเซล ควรออกแบบหน้าเว็บเพ็จให้เหมาะสมและมีความ สวยงาม
โดยมีรูปแบบการใช้งานคําสัง่ ดังนี้ คือ
<FRAMESET COLS/ROWS = “VALUE 1,VALUE 2,......VALUE
n”>
ตัวอยางการใช้งาน
<FRAMESET COLS = “400,150,150”> แบงหน้าจอตามแนวตั้งเป็ น 3
สวน คือ 400,150,150
<FRAMESET COLS = “400,400”> แบงหน้าจอตามแนวตั้งเป็ น 2 สวน
คือ 400,400
<FRAMESET ROWS = “200,200,200”> แบงหน้าจอตามแนวนอนเป็ น
3 สวน คือ 200,200,200
<FRAMESET ROWS = “350,350”> แบงหน้าจอตามแนวนอนเป็ น 2
สวน คือ 350,350

ตัวอย่าง

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 29

Code ของตัวอยางการแบงเฟรมแบบกําหนดขนาด

ผลลัพทจากการแบงเฟรม

2.2 การแบ่งหน้าจอโดยกำาหนดหน่วยตามเปอร์เซนต์
การแบงหน้าจอโดยกําหนดหนวยเป็ นเปอรเซ็นต (%) หน้าจอจะถูกแบง
สวนตามเปอรเซ็นตท่ีกําหนด สามารถกําหนดตามแนวนอนหรือแนวตั้งก็ได้ โดย
มีรูปแบบการใช้คําสัง่ ดังนี้
<FRAMESET COLS/ROWS = “VALUE 1,VALUE
2,......VALUE n”>

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 30

ตัวอยางการใช้งาน
<FRAMESET COLS = "50%,25%,25%"> แบงหน้าจอตามแนวตั้งเป็ น
3 สวน คือ 50%,25%,25%
<FRAMESET COLS = "50%,50%"> แบงหน้าจอตามแนวตั้งเป็ น 2
สวน คือ 50%,50%
<FRAMESET ROWS = "50%,25%,25%"> แบงหน้าจอตามแนวนอน
เป็ น 3 สวน คือ 50%,25%,25%
<FRAMESET ROWS = "50%,50%"> แบงหน้าจอตามแนวนอนเป็ น 2
สวน คือ 50%,50%
ตัวอย่าง

Code ของตัวอยางการแบงเฟรมแบบ
กําหนดเป็ นเปอรเซ็นต

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 31

ผลลัพทจากการแบงเฟรม

2.3 การแบ่งหน้าจอโดยกำาหนดดอกจันทร์ร่วม
การแบงหน้าจอโดยใช้เครื่องหมายดอกจันทรวม เป็ นการแบงหน้าจอโดย
กําหนดตามความสัมพันธของแตละเฟรม ซึ่งดอกจันท (*) หมายถึงกว้าง
ยาวตามความสัมพันธของเฟรม ตัวอยางเชน

<FRAMESET COLS = “ 50% , * ” > แบงหน้าจอตามแนวตั้งเป็ น 2


สวน คือ 50%,50%
<FRAMESET COLS = “200 , * ,”> แบงหน้าจอตามแนวตั้งเป็ น 2
สวน คือ 200 พิกเซลและสวนที่เหลือทั้งหมดของหน้าจอ
<FRAMESET COLS = “ * , * , * ”> แบงหน้าจอตามแนวตั้งเป็ น 3
สวน สวนละเทา ๆ กัน
<FRAMESET ROWS = “ 50% , * ” > แบงหน้าจอตามแนวนอนเป็ น

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 32

2 สวน คือ 50%,50%


<FRAMESET ROWS = “200 , * ,”> แบงหน้าจอตามแนวนอนเป็ น 2
สวน คือ 200 พิกเซลและสวนที่เหลือทั้งหมดของหน้าจอ
<FRAMESET ROWS = “ * , * , * ”> แบงหน้าจอตามแนวนอนเป็ น 3
สวน สวนละเทา ๆ กัน

ตัวอย่าง

Code ของตัวอยางการแบงเฟรมแบบกําหนดเป็ นดอกจันทร

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 33

ผลลัพทจากการแบงเฟรม

2.4 การกำาหนดไม่ให้มีการปรับขนาดของเฟรม
จากการสร้างเฟรมที่ผานมา เมื่อรันโปรแกรมแล้วเราสามารถปรับขนาดของ
เฟรมเพื่อเลื่อนดูข้อมูลในเฟรมใดเฟรมหนึ่ ง โดยการใช้เมาสคลิกแล้วลากบริเวณ
เส้นแบงเฟรมได้ ถ้ารันโปรแกรมใหมจะได้หน้าจอการแบงเฟรมเหมือนเดิม แต
ถ้าไมต้องการให้ปรับขนาดของเฟรม ให้กําหนดรูปแบบของ คําสัง่ ดังตอไปนี้
<FRAME NAME="ชื่อเฟรม" SRC="ชื่อไฟล.html” NORESIZE> NORESIZE
แท็กที่ใช้กําหนดไมให้มีการปรับขนาดของเฟรม

3. การสร้างเฟรมย่อย

การสร้างเฟรมยอย คือการสร้างเฟรมเพิ่มขึ้นภายในเฟรมปกติมากกวาหนึ่ ง
เฟรม เพื่อทําให้สามารถใช้งานได้สะดวกและจัดหน้าจอได้เหมาะสมมากยิ่งขึ้น
เป็ นการสร้างแท็ก <FRAMESET>ซ้อนไว้ในแท็ก <FRAMESET> อีกทีหนึ่ ง

ตัวอย่าง

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 34

เฟรมใหญแบงตามแนวตั้ง โดยแบงพื้ นที่เป็ นสองสวนคือ 20% และ 80%


ในสวนของ 20%จะเรียกไฟลต้นฉบับที่ช่ ือ frame_a.html มาใสไว้ สวนพื้ นที่ท่ี
เหลือจะแบงออกเป็ นสองสวนคือ 20%และ 80% พื้ นที่ 20% จะเรียกไฟล
ต้นฉบับที่ช่ ือ frame_b.html มาใสไว้ สวนอีก 80% จะเรียกไฟลต้นฉบับที่ช่ ือ
frame_c.html มาใสไว้

ผลลัพท

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 35

4. การเชื่อมโยงภายในเฟรม

การเชื่อมโยงภายในเฟรมเป็ นการเชื่อมโยงไฟลเมื่อทําการคลิกเมาสท่ี
รายการที่ต้องการแล้วจะปรากฏผลลัพธของไฟลหรือหรือเว็บไซด ที่ทําการเชื่อม
โยงไป โดยทําการสร้างไฟลเป็ น 2 สวนคือ สวนที่หนึ่ งสร้างไฟลเพื่อทําการแบง
เฟรมสําหรับแสดงการเชื่อมโยง สวนที่สองเพื่อทําการกําหนดการเชื่อมโยงใน
เฟรมโดยการอ้างอิงชื่อเฟรม

ตัวอย่าง

5. การแสดงผลปลายทาง

การแสดงผลปลายทาง เป็ นการแสดงผลโดยไมคํานึ งถึงชื่อเฟรมตาง ๆ


เหมือนตัวอยางที่ผานมาแตจะใช้วิธีอ้างถึงแบบพิเศษซึ่งมีดังตอไปนี้ คือ
<A HREF = "ชื่อไฟลหรือชื่อเว็บไซด " TARGET="รูปแบบการ
แสดงผล">ข้อความ</A> ซึ่งรูปแบบการแสดงผลมีดังตอไปนี้

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 36

สร้างเสียงดนตรีบนเว็บเพจ
แบบ Background Sound

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 37

รูปแบบ <BGSOUND SRC="......." LOOP=n>

เป็ นการใสเสียงเพลง ทําเป็ น Background ให้กับโฮมเพจ เมื่อผู้เยี่ยมชม


เปิ ดเข้ามา มันจะทําการ โหลดเพลง ให้โดย อัตโนมัติ โดย
BGSOUND เป็ นรูปแบบการใสเสียงเพลงของ Microsoft Internet
Explorer
SRC ใส ตําแหนง ที่อยู ของไฟลเสียง เพลงที่ต้องการ
LOOP จํานวนรอบที่ต้องการให้เลน ถ้าต้องการให้เลนไปเรื่อย
ๆ ให้ใส Infinite
ตัวอย่าง <BGSOUND SRC="sound.mid" LOOP=5>

แบบ EMBED

รูปแบบ <EMBED SRC="......" HIDDEN=TRUE HIGHT=n


WIDTH=n CONTROLS=COLSOLE/SMALLCONSOLE
AUTOSTART=TRUE LOOP=TRUE/n>

เป็ นการใสเสียงเพลง ทําเป็ น background ให้กับโฮมเพจของ Netscape


Navigator โดย
• EMBED เป็ นรูปแบบการใสเสียงเพลงของ Netscape Navigator
• SRC ใส ตําแหนง ที่อยู ของไฟลเสียง เพลงที่ต้องการ
• HIDDEN เป็ นการซ้อนป ุมควบคุมการเลนเพลง ถ้าไมต้องการก็ไม
ต้องใสเข้าไปเลย เมื่อใสคําสัง่ นี้ แล้ว คําสัง่ อื่นคือ hight,width,controls ก็ไม
ต้องใสเข้าไป
• HIGHT เป็ นการกําหนดความสูงให้กับแผงควบคุม

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 38

• WIDTH เป็ นการกําหนดความกว้างให้แผงควบคุม


• CONTROLS กําหนดรูปแบบแผงควบคุม โดย smallconsole
เป็ นแบบอยางยอ สวน console เป็ นเต็มรูปแบบ
• - AUTOSTART กําหนดการเลนเพลงโดยอัตโนมัติ (TRUE) ถ้า
ไมต้องการให้ ลบทิ้งไปได้เลย
• LOOP จํานวนรอบที่ต้องการให้เลน ถ้าต้องการให้เลนไปเรื่อย
ๆ ให้ใส TRUE แตถ้าต้องการ กําหนดจํานวนรอบก็ใสเป็ นตัวเลขเข้าไป
เมื่อไมต้องการไมให้วนให้ใส FALSE (ไมจําเป็ นต้องใสก็ได้ เพราะคาปกติ
เป็ น FALSE อยูแล้ว)

ตัวอย่าง
<EMBED SRC="sound.mid" HIGHT=60 WIDTH=144
CONTROLS=COLSOLE AUTOSTART=TRUE LOOP=TRUE>

แบบกำาหนดตัวเชื่อม
รูปแบบ < A HREF="......">คำาอธิบาย</A>
เป็ นการใสเพลงโดยการกําหนดตัวเชื่อม ในชองวาง ๆให้ใสตําแหนงไฟล
เสียง ลงไป สวนตรง "คําอธิบาย" ให้ใสข้อความที่ส่ ือความหมายให้รู้วา ตัวเชื่อม
นี้ เป็ นไฟลเพลง เชน "เพลงแสนสนุ ก"
ตัวอย่าง < A HREF="sound.mid"> ฟั งเพลงกดตรงนี้ จ้า</A>

แบบ META

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 39

รูปแบบ < META HTTP-EQUIV="Refresh"


CONTENT="1;URL=........">
ใช้คําสัง่ meta เพื่อเป็ นการโหลดไฟลออดิโอและ เลนเพลงนั้ น ๆ โดย
อัตโนมัติ ทันทีเมื่อเว็บเพจถูกโหลดขึ้นมา ใช้ได้ท้ ัง IE และ NS โดย
• คําสัง่ <META> ใสอยูระหวาง คําสัง่ <HEAD>......</HEAD>
• HTTP-EQUIV="Refresh" กําหนดการโหลดไฟลเพลงโดยอัตโนมัติ
• CONTENT="1;URL=...." เป็ นการกําหนดเวลาที่จะโหลดเพลงเมื่อ
เว็บเพจถูกโหลดขึ้นมา โดย URL เป็ นชื่อเพลงที่ต้องการให้โหลด เชน
<HEAD>
<META HTTP-EQUIV="Refresh"
CONTENT="1;URL=sound.mid">
</HEAD>

ใส่ไฟล์วีดิโอให้เว็บเพจ(IE)

รูปแบบ <IMG DYNSRC="....." SRC="......" ALT="......"


LOOP=n START=FILEOPEN/MOUSEOVER
CONTROLS>

เป็ นรูปแบบการใสไฟลวีดิโอของ Internet Explorer โดยมีลักษณะคําสัง่ ดังนี้

• DYNSRC="......" ให้ใสช่ ือไฟลวีดิโอลงไป เชน video.avi


• SRC="......" ให้ใสไฟลรูปภาพ ไว้ เป็ นตัวแทน ไฟลวีดิโอนั้ น ๆ เมื่อ
บราวเซอร ผู้ใช้ไมสนั นสนุ น

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 40

• ALT="......" ใสข้อความใด ๆ ก็ได้ลงไปเพื่อ ให้ผู้ใช้ท่ี ไมสามารถดูวีดิโอ


สามารถรู้ข้อมูลได้
• LOOP=n กําหนดจํานวนครั้งที่จะให้วีดิโอเลน ใสเป็ นตัวเลขหรือ infinite
ก็ได้
• START=FILEOPEN/MOUSEOVER โดย fileopen เป็ นการกําหนด ให้
เริม
่ เลนทันที ที่ไลวีดีโอโหลดเสร็จ (ปกติแล้ววีดิโอจะถูกเลน ทันทีท่ีดาวนโหลด
เสร็จ ดังนั้ น -STRAT=FILEOPEN จึงไมต้องใสก็ได้) mouseover เป็ นการ
กําหนด ให้เลนวีดิโอ เมื่อเอาเมาสไปวางบนวีดีโอนั้ น ๆ
ตัวอย่าง
< IMG DYNSRC="SPORT.AVI" SRC=PICTURE.GIF ALT="ทดสอบการใช้
ไฟลวีดีโอ(IE)" LOOP="2" >

ใส่ไฟล์วีดิโอให้เว็บเพจ(NS)
รูปแบบ
< EMBED SRC="....." LOOP="TRUE/FALSE WIDTH=pixels
HEIGHT=pixels ALIGN="....." >

เป็ นรูปแบบการใสไฟลวีดิโอของ Netscape Navigator จะยุงยากตรงที่วา


เราต้องรู้ขนาดของไฟลวีดิโอ วามีขนาดยาวกี่พิกเซล ตามขนาดมาตรฐานแล้ว
(height x width) จะมีอัตราสวนเป็ น 3:4 ขนาดมาตรฐานได้แก 90 x 120 120
x 160,180 x 240 และ 240 x 320 โดยมีลักษณะคําสัง่ ดังนี้
• SRC="......" ให้ใสช่ ือไฟลวีดิโอลงไป เชน 02sticks.avi
• LOOP ถ้ากําหนดเป็ น true จะทําให้วีดิโอเลนไปเรื่อย ๆ ถ้าต้องการ ให้
เลนครั้งเดียวไมต้องใสก็ได้

ครูชัยวัฒน เทียนนาวา
การสร้างเว็บเพจด้วยภาษา html 41

• WIDTH กําหนดขนาดความกว้างของวีดิโอ ตามมาตรฐาน


• HEIGHT กําหนดความสูงของวีดิโอ ตามมาตรฐาน
• ALIGN="...." เป็ นการกําหนดตําแหนง ดังนี้
top,bottom,center,baseline,left,right,

ตัวอย่าง <EMBED SRC=sport.avi WIDTH=240 HEIGHT=180>

ครูชัยวัฒน เทียนนาวา

You might also like