แนะนำการเขียน HTML [2] (Hyper Text Markup Language)

1

แนะนำ�ก�รเขยน HTML [2](Hyper Text Markup Language)

สญญ� เครอหงษภ�ควช�วทย�ก�รคอมพวเตอรและเทคโนโลยส�รสนเทศคณะวทย�ศ�สตร มห�วทย�ลยนเรศวร

บทท2

2

วตถประสงคก�รเรยนรประจำ�บท• เพอใหทร�บถงทม�และหลกก�รทำ�ง�นของ World Wide Web

• เพอใหทร�บถงประโยชนของก�รทำ�ง�นแบบ Client-Server

• เพอใหทร�บถงโพรโทคอลทเกยวของกบก�รโปรแกรมบนอนเทอรเนต

• เพอใหทร�บประเภทก�รเขยนโปรแกรมแบบ Static Programming และ Dynamic Programming

3

กจกรรมก�รเรยนก�รสอน• บรรย�ยโดยผสอนและใชเอกส�รประกอบก�รสอนของผสอน

•สอนโดยใชสอคอมพวเตอรผ�นเครองฉ�ย•อภปร�ยในชนเรยนรวมกน• ใหนสตคนคว�เพมเตมจ�กตำ�ร�และเอกส�รทเกยวของ

•ทำ�แบบฝกหดท�ยบท

4

ก�รประเมนผล•ประเมนผลจ�กก�รตอบคำ�ถ�มและอภปร�ยในชนเรยน

•ทำ�แบบฝกหดท�ยบท•ทำ�ร�ยง�นสง

5

แทกก�รจดก�รรปภ�พ <img>

• รปแบบแทกก�รใสรปภ�พ <IMG SRC = "(Path/)ชอไฟลภ�พ" >• ตวอย�ง Attribute ทน�สนใจ คอ

• Width = "ตวเลขระบคว�มกว�ง"• Height = "ตวเลขระบคว�มสง" • Border = "ตวเลขระบคว�มหน�ของเสนขอบ"• Alt (Alternative Text) =”ขอคว�ม”

6

แทกก�รจดก�รรปภ�พ <img> (ตอ)

• ตวอย�ง ex11.html<HTML><HEAD><TITLE>แสดงรปภาพ</TITLE></HEAD><BODY> <IMG SRC= "images/NewLOGO.jpg" Width="200" Height="200" Border="1" Alt="ไอแอมสญญา"></BODY></HTML>

ไฟลรปhttp://www.iamsanya.com/images/NewLOGO2010.jpg

ex11.html

7

ก�รใสรปทพนหลง• รปม�เปนพนหลงของเอกส�ร HTML นน จะตองกำ�หนดไวใน <BODY> โดยใช Attribute ชอ BACKGROUND หรออ�จจะมเพมเตมเชน BGPROPERTIES ดงตวอย�งดงตอไปน

8

ก�รใสรปทพนหลง (ตอ)

• ตวอย�ง ex12.html<HTML><HEAD><TITLE>แสดงรปพนหลง แบบ Fixed อยกบท</TITLE></HEAD><BODY BACKGROUND= "images/bgPic.jpg" BGPROPERTIES="FIXED"> <BR> ทำาใหพนหลงแสดงอยกบทไมเลอนตาม <BR><BR> ขอความ 1<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> ขอความ 2<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><IMG SRC= "images/NewLOGO.jpg" Width="200" Height="200" Border="1" Alt="ไอแอมสญญา"><BR> ขอความ 3 <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR></BODY> </HTML>

9

แทกก�รสร�งต�ร�ง <Table>

•แทกทใชควบคมมหล�ยคำ�สงดงน <TABLE>……….</TABLE> กำ�หนดจดเรมตนและสนสดของก�รสร�งต�ร�ง<CAPTION>……</ CAPTION> กำ�หนดชอเรองของต�ร�ง <TR>……………</TR> กำ�หนดก�รสร�งแถว (ROW) ใหกบต�ร�ง<TD>…………….</TD> กำ�หนดก�รสร�งคอลมน ( COLUMN )ใหกบต�ร�ง

รปแบบในการเขยนคำาสงดงน <TABLE> <TR> <TD> คอลมน 1</TD> <TD> คอลมน 2</TD> <TD> คอลมน N</TD> </TR></TABLE>

10

แทกก�รสร�งต�ร�ง <Table> (ตอ)

• ตวอย�ง ex13.html<HTML> <BODY> <TABLE BORDER="2"> <TR bgColor="Yellow"> <TD>ลำาดบท</TD> <TD>คะแนน</TD> <TD>แบบฝกหด</TD> </TR> <TR> <TD ALIGN ="CENTER">1</TD> <TD ALIGN ="CENTER">18</TD> <TD ALIGN ="CENTER" bgColor="#FFCCCC">35</TD> </TR>

<!..ตอ..> <TR> <TD ALIGN ="CENTER">2</TD> <TD ALIGN ="CENTER" bgColor="#00FFFF">12</TD> <TD ALIGN ="CENTER">24</TD> </TR> </TABLE> </BODY></HTML>

11

แทกก�รสร�งต�ร�ง <Table> (ตอ)

• ตวอย�ง ex14.html<HTML> <BODY> <TABLE BORDER="2" BORDERCOLOR="BLUE" FRAME="HSIDES" CELLSPACING="0" CELLPADDING="0" > <CAPTION><B>การผสานเซลล</B></ CAPTION> <TR> <TD COLSPAN="5" ALIGN="CENTER" > <B>ผลการเรยนของนกเรยน</B> </TD> </TR> <TR> <TD ALIGN="CENTER" ROWSPAN="2">ลำาดบท</TD> <TD ALIGN="CENTER" COLSPAN="4">คะแนน</TD> </TR><! ตอ >

<TR> <TD>แบบฝกหด</TD> <TD>ทดสอบ</TD>

<TD>ปลายภาค</TD> <TD>รวม</TD>

</TR>

<TR>

<TD ALIGN ="CENTER">1</TD>





</TR>

<TR>






</TR>

</TABLE>

</BODY>

</HTML>

12

แทกก�รเชอมโยงหน�เวบเพจ<a>

•HTML ส�ม�รถเชอมโยง (LINK) ไปยงตำ�แหนงต�งๆได เพออำ�นวยคว�มสะดวกในก�รใชง�นทำ�ใหคนห�ขอมลไดง�ย

• รปแบบดงนคอ<A HREF = ตำ�แหนงทตองก�รเชอมตอ> ขอคว�มทตองก�รใหเชอมโยง</A>

13

แทกก�รเชอมโยงหน�เวบเพจ<a> (ตอ)

• ตวอย�ง ex15.html<HTML><HEAD><TITLE>การเชอมโยงโดยใชขอความ</TITLE></HEAD><BODY> <A HREF=“http://www.google.com”>www.google.com</A><BR>

<A HREF=“http://www.iamsanya.com”>www.iamsanya.com</A><BR><A HREF=“http://www.hotmail.com”>www.hotmail.com</A><BR>

<BODY><HTML>

14


• ตวอย�ง ex16.html<HTML> <HEAD><TITLE> การเชอมโยงโดยใชรปภาพ </TITLE ></HEAD><BODY><A HREF=”http://www.nu.ac.th”> <IMG SRC =”nulogo.JPG” ALT =”ม.นเรศวร”></A> BR><A HREF=”http://www.matichon.co.th”><IMG SRC=”MATICHON.JPG” .ALT=”หนงสอพมพมตชน”></A> <BR>< A HREF=”http://www.dailnews.co.th”><IMG SRC=”DAILYNEWS.JPG” ALT=”หนงสอพมพเดลนวส”></A> <BR ></ BODY ></HTML >

15


•ก�รเชอมโยงไปยงเวบเพจอน• ตวอย�ง ex17.html

<HTML><HEAD><TITLE> การเชอมโยงไปยงเวบเพจอน< /TITLE></HEAD><BODY>

<A HREF=”test1.html”>เชอมโยง Test1</A><BR><A HREF=”test2.html”> เชอมโยงไป Test2</A><BR><A HREF=”test3.html”> เชอมโยงไป Test3</A><BR>

</BODY></HTML>

16


• ก�รเชอมโยงภ�ยในเวบเพจเดยวกน• ในกรณทเร�สร�งเวบเพจภ�ยในหน�เดยวกนมขอมลม�กกว�หนงหน�จอ ควรจะมก�รกำ�หนดจดเชอมโยง (Link) โดยใชสญลกษณ # นำ�หน�ชอจดปล�ยท�ง <A HREF = “ # ชอจดปล�ยท�งทตองก�รเชอมโยง ’’ > ขอคว�ม </A>กำ�หนดจดปล�ยท�งทตองก�รเชอมโยง <A NAME = “ ชอจดปล�ยท�งทตองก�รเชอมโยง ” > ขอคว�ม </A>

• ก�รเชอมโยงไปยง E- mail<A HREF=”mailto:[email protected]?subject=homework”> สงเมลอาจารย</A>

17


•กำ�หนดสของก�รเชอมโยง เพอใหเปนจดทน�สนใจและสะดดต�ม�กยงขน รปแบบของคำ�สงกำ�หนดไดดงน <BODY TEXT = สขอคว�มปกต LINK = สทเปนจดเชอมโยง VLINK = สทเปนจดเชอมโยงทเคยถกคลกใชง�นแลว ALINK = สทเปนจดเชอมโยงทกำ�ลงถกเรยกใชง�น>

18


• ตวอย�ง ex18.html<HTML><HEAD><TITLE> การกำาหนดสของการเชอมโยง</TITLE> </HEAD><BODY TEXT="BLUE" LINK="RED" VLINK="CYAN"><H4> คลกเลอกไปยงเวบไซตทตองการ </H4><A HREF="htt://www.google.com"> www.google.com</A> </BODY></HTML>

19

แทกก�รสร�งแบบฟอรม <Form>

• ก�รสร�งแบบฟอรม (Form) เพอใชในก�รรบขอมลเปนวธก�รหนงทนยมทำ�กนในเวบไซตทวไป เชน ก�รกรอกขอมลในก�รสมครสม�ชกต�งๆ ก�รแสดงคว�มคดเหน ก�รกรอกแบบสอบถ�ม เปนตน

20

แทกก�รสร�งแบบฟอรม <Form> (ตอ)

• โครงสร�ง Element สำ�หรบสร�งแบบฟอรม<Form name="form_name" method="get | post" action="url" target="window name"> <แทกเครองมอสำ�หรบฟอรมต�งๆ></Form>

- Name="ชอของ Form"- Method="get | post" เปนรปแบบของวธในก�รสงขอมล ม 2 รปแบบ Get เปนตวรบ - สง ขอมลขน�ดจำ�กดจ�ก Server ไมเกน 256 ตวอกษร Post เปนตวรบ - สง ขอมลไมจำ�กดจ�ก Server -Action="URL" คอตำ�แหนงหรอ URL ของ Script ทว�งไวท Server -Target="_blank | _self | _parent" หน�ต�งทจะใหผลของ Script แสดงผล

21


ภ�ยใน Element <form>...</form> จะประกอบดวยชอง element 3 ประเภท คอ1) <Input>...</Input>2) <Select>...</Select>3) <Textarea>…</Textarea>

22


•สร�งฟอรมชองปอนรบขอมลบรรทดเดยว (Textbox)

มรปแบบดงน <input type=“text” Name=’ชอของเทกซบอกซ ’ value=”ค�เรมตน Size=ขน�ดของเทกซบอกซ Maxlength=จำ�นวนตวอกษรทส�ม�รถบนทกได>

23


• ตวอย�ง ex19.html<html><head><title>.การสรางฟอรมดวย Textbox</title></head><body><H4>กรณาปอนขอมลสวนตวของทาน<H4><FORM NAME="Form1">

ชอ<input type="text"name="firstname"size="20" maxlength="15"> <br>นามสกล <input type="text"name="lastname"size="20" maxlength="15"> <br>โทรศพท <input type="text"name="tel"size=“10" maxlength=“10"> <br>

</Form></body> </html>

24


•ก�รสร�งฟอรมรบขอมลรหสผ�น (Password)

<input type=password name=”ชอของเทกซบอกซ ”value=”ค�เรมตน ” Size=’’ขน�ดของเทกซบอกซ ” Maxlength =”จำ�นวนตวอกษรทส�ม�รถบนทกได”>

25


• ตวอย�ง ex20.html<Form NAME="Form1">

User name <input type="text" name="user" size="10" maxlength="10"> <br>Password <input type="password" name="pwd" size="8" maxlength="8"> <br>

</Form>

26


•ก�รสร�งฟอรมรบขอมลหล�ยบรรทด (Text Area)

•ก�รสร�งฟอรมรบขอมลแสดงคว�มคดเหนจะใชคำ�สง Text Area ในก�รรบขอมลทมคว�มย�วม�กกว�หนงบรรทด โดยมรปแบบคำ�สงดงน

<textarea name=”comment” Cols=”จำ�นวนตวตวอกษรในแตละแถว ”Rows=”จำ�นวนแถว”> ขอคว�ม </textarea>

27


• ตวอย�ง ex20.html<Form name="form1">รายละเอยด<br><textarea name="comment" Cols="25" Rows="5"> ขอความแสดงใน textarea </textarea></Form>

28


•ก�รสร�งเชคบอกซ (Checkbox)•ก�รสร�งเชคบอกซ (Checkbox) เปนก�รรบขอมลทใหผใชเลอกร�ยก�ร โดยก�รคลกเม�สทชองร�ยก�รทตองก�รและส�ม�รถเลอกไดม�กกว�หนงร�ยก�ร มรปแบบดงน

<input type=”checkbox” Name=”ชอของ checkbox’’ Value=”ค�เรมตน ” >

29


• ตวอย�ง ex21.html<h4>ชอบสอะไรเลอกไดมากกวาหนงส<h4><form name="form1"> <input type="checkbox" name="color“ value="1">สเขยว<br> <input type="checkbox" name="color“ value="2" checked>สชมพ<br> <input type="checkbox" name="color“ value="3">สแดง<br> <input type="checkbox" name="color“ value="6">สขาว<br></form>

หม�ยเหต ถากำาหนดChecked แลว รายการนนจะถกทำาเครองหมายไวเมอ

ฟอรมแสดง

30


•ก�รสร�งปมเลอกร�ยก�รเดยว (Radio button)• เปนก�รรบขอมลจ�กหวขอทผเขยนโปรแกรมกำ�หนดม�ให เชน ศ�สน�ใด เพศใด อยจงหวดใด เปนตน ผเขย

• โปรแกรมกำ�หนดปมใหคลกตวเลอก โดยส�ม�รถเลอกไดร�ยก�รเดยว มรปแบบคำ�สงดงน

<input type=”radio” Name=”ชอของradio” Value=”ค�ของ radio”> ขอคว�ม

31


• ตวอย�ง ex22.html<h4>ทานเปนเพศใด<h4><form name="form1"> <input type="radio" name="sex" value="1">ชาย<br> <input type="radio" name="sex" value="2" checked>หญง<br> <input type="radio" name="sex" value="3">ไมระบ<br></form>

หม�ยเหต ถากำาหนดChecked แลว รายการนนจะถกทำาเครองหมายไวเมอ

ฟอรมแสดง

หมายเหต ตองตงชอเหมอนกนเพอใหอยในกลมตวเลอกเดยวกน เชน ในนนตงชอวา Sex

32


• ก�รสร�งร�ยก�รเลอก (Drop Down List)เปนก�รรบขมลจ�กก�รคลกเม�สเลอกร�ยก�รทกำ�หนดไว โดยจะเลอกไดเพยงหนงร�ยก�ร โดยมรปแบบก�รใชคำ�สงดงน

<select name=”ชอของครอปด�วนลสต ’’ Size=”จำ�นวนร�ยก�ร” <option value=”ค�ของครอปด�วนลสต”>ขอคว�ม </select>

33


• ตวอย�งท ex22.html<head><title>การสรางปมเลอกรายการเดยว</title></head><body><h4>ทานชอบเทยวทไหน<h4><form name="form1">

<select name="list" size="1"><option value="1">ทะเล<br><option value="2" Selected>นำาตก<br><option value="3">ภเขา<br><option value="4">ปาชายเลน<br>

</select></form></body> </html>

หม�ยเหต ถากำาหนด Selected แลว รายการนนจะถกเลอกไวกอน

เมอฟอรมแสดง หมายเหต ถากำาหนด size ใน select มากกวา 1

จำาทหใหแสดงรายการเปนแบบ Listbox

ลองปรบให Size เปน 3

34


• ก�รสร�งปมบนทกและยกเลกขอมล (Submit และ Reset)• ก�รสร�งปมบนทกและยกเลกก�รบนทกขอมลจะใชกรณทมก�รสมครสม�ชก หรอแสดงคว�มคดเหนบ�งอย�งเมอกรอกขอมลจนครบถวนสมบรณแลว จะใหผใชทำ�ก�รคลกทปมตกลงหรอเพอทำ�ก�รบนทกขอมลทปอนเข�ไปทงหมด มรปแบบก�รดงน

<INPUT TYPE=”SUBMIT”NAME=”ชอของปม ”VALUE=”ขอคว�มบนปม”><INPUT TYPE=”RESET”NAME=”ชอของปม ”VALUE=”ขอคว�มบนปม”>

35


• ตวอย�ง ex23.html<HTML>

<HEAD><TITLE>การสรางฟอรม</TITLE></HEAD>

<BODY>

<H4>กรณาปอนขอมลสวนตวของทาน</H4>

<FORM NAME="Form1">

ชอ <INPUT TYPE="TEXT" NAME="F_NAME"SIZE="17" MAXLENGTH="17"><BR>

สกล <INPUT TYPE="TEXT"NAME="L_NAME"SIZE="15" MAXLENGTH="15"><BR>

ทอย<INPUT TYPE="TEXT" NAME="ADDRESS" SIZE="40" MAXLENGTH="40"> <BR>

โทรศพท <INPUT TYPE="TEXT"NAME="TEL"SIZE="9" MAXLENGTH="9"><P>

<INPUT TYPE="SUBMIT"NAME="OK" VALUE="ยอมรบ">

<INPUT TYPE="RESET"NAME="ไมยอมรบ">

</FORM>

</BODY>

</HTML>

36


•ก�รสร�งปมคนห�ไฟลทตองก�ร (Browse Button)

ก�รสร�งก�รคนห�ไฟล (Browse) เปนก�รกดปมเพอเลอกไฟลทตองก�ร โดยมรปแบบก�รใชคำ�สงดงน <INPUT TYPE=”File” NAME=”ชอของปม ” Value="ค�ขอมล" size="number" MaxLength="number">

37


• ตวอย�ง ex23.html<H4>กรณาเลอกไฟล</H4><FORM NAME="INPUT"> ไฟล <input type="File" name="filename" size="30"> </FORM>

38


•ก�รซอนค� (Hidden Textbox)•บ�งครงเร�ตองก�รซอนค�บ�งอย�งบนฟอรมไว ซงส�ม�รถกำ�หนดค�เหมอน Textbox ทกอย�งแตไมปร�กฏใหเหนบนฟอรม โดยมรปแบบก�รใชคำ�สงดงน

<input type="hidden" name="ชอ input hidden" value="ค�ขอมล">

39


• ตวอย�ง ex24.html<H4>ซอนคา</H4><FORM NAME="Form"> <input type="hidden" name="salary" value="12500" > </FORM>

40

แทกก�รสร�งเฟรม Frame

•ก�รสร�งเฟรม (Frame) คอก�รแบงห�จอของเวบออกเปนสวนต�งๆ ท�งด�นแนวตงและแนวนอนต�มทเร�ตองก�ร ซงในแตละสวนส�ม�รถแสดงผลไดอย�งอสระและส�ม�รถแสดงผลไดม�กกว� 1ไฟล

41

แทกก�รสร�งเฟรม 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"

42

แทกก�รสร�งเฟรม Frame• ก�รแบงเฟรมต�มตง (Vertical frameset)แบงหน�จอออกเปนหล�ยๆ Frame ในแนวตง• รปแบบ

<frameset cols="ขน�ดframe1, ขน�ดframe2,..">

<frame name="ชอframe" src="url"><frame name="ชอframe" src="url">...</frameset>

43

แทกก�รสร�งเฟรม Frame (ตอ)

<html>

<body bgcolor="Red">

Hello Hello Hello Hello

</body>

</html>

<html>

<body bgcolor="Yellow">

Welcome Welcome Welcome

</body>

</html>

<html> <frameset cols="200,*" > <frame src=“A2.html" name=“topFrame" > <frame src=“A1.html" name="mainFrame"> </frameset> </html>

A1.html A2.html

F1.html

Welcome Hello

44


• ก�รแบงเฟรมต�มแนวนอน (Horizontal Frameset)

แบงหน�จอออกเปนหล�ยๆ Frame ในแนวนอน• รปแบบ

<frameset rows="ขน�ดframe1, ขน�ดframe2,.."><frame name="ชอframe" src="url"><frame name="ชอframe" src="url">...</frameset>

45


<html> <frameset rows="200,*” > <frame src=“A2.html" name=“topFrame" > <frame src=“A1.html" name="mainFrame"> </frameset> </html>

F2.html

Welcome

Hello

<html>

<body bgcolor="Red">

Hello Hello Hello Hello

</body>

</html>

<html>

<body bgcolor="Yellow">

Welcome Welcome Welcome

</body>

</html>

A1.html A2.html

46


• ตวอย�ง<html><body bgcolor="Green">ThailandThailand<a href = "http://www.nu.ac.th" target="mainFrame"> มอนอ</a></body></html>

<html><frameset rows="110,*" ><frame src="A3.html" name="topFrame" scrolling="NO" noresize> <frameset cols="216,*" frameborder="NO" border="0"> <frame src="A2.html" name="leftFrame" scrolling="NO" noresize> <frame src="A1.html" name="mainFrame"> </frameset></frameset></html>

A3.html

F3.html

A3.Html [TopFrame]

A1.Html [MainFrame]

A2.Html

Leftframe]

47

แทกก�รสร�งเฟรม Frame

Inline Frame (IFrame)ส�ม�รถแสดงหน�เวบเพจอนๆ ลงในหน�เวบเพจได โดยก�รใช IFrame

<IFRAME name=ชอ FRAME Src=ชอ URL Width=ขน�ดคว�มกว�ง height=ขน�ดคว�มสง Frameborder=ขน�ดเสนขอบ Scrolling=ตว SCROLLBAR></IFRAME>

<Html><Body><a href=“http://www.iamsanya.com” target=“mainShow” >Home</a> <a href=“http://www.iamsanya.com/webboard” target=“mainShow” >Webboard</a> <BR> <IFrame src="http://www.iamsanya.com" width=“400" name="mainShow" height=“500" marginwidth="0" marginheight="0" vspace="0" hspace="0" frameborder="0" scrolling="no"></IFrame ></Body></Html>

48

แทกก�รใสไฟลมลตมเดย เชนไฟลเสยงเพลง, Video, Flash

• ก�รใสไฟลเพลง ไฟล Video หรอไฟล Flash ลงไปในหน�เวบเพจได ดวย Element <embed> หรอ <object>

• 1.แทก <Embed> ใชแสดงก�รทำ�ง�นของโปรแกรม plug-in โดยนำ�ไปผนวกกบเอกส�ร HTML และอ�จใส tag <noembed> ควบคไปดวย เผอเวบเบร�เซอรรนเก�ทยงไมรองรบแทก <embed> น

<embed src="url ไฟล" width="number | %" height="number | %" > <noembed><img src="url ไฟลรปภ�พทใหแสดงเมอใช embed ไมด" ></noembed> </embed>

49


• Attributes สำ�หรบ <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)

50


• ตวอย�ง ไฟลเสยง<embed src="media/test.mid" width="100%" height="60"> <noembed><img src="nosupport.gif" ></noembed></embed>

• ตวอย�ง ไฟลแฟลช<embed src="media/test.swf" width="100%" height="250"><noembed><img src="nosupport.gif" ></noembed></embed>

51


•2.แทก <Object> มคว�มส�ม�รถหล�กหล�ย ใชกำ�หนดเพอเรยกใชและแสดงผลก�รทำ�ง�นของ object ชนดต�งๆ เชน ภ�พกร�ฟฟก, ไฟลเอกส�ร, ActiveX ได โดย object แตละชนดจะมวธเรยกใชทแตกต�งกน

52


• ตวอย�ง <object data="test.wmv" width="100%" height="280"><param name="src" value="media/test.wmv"><param name="autoplay" value="false"><param name="autostart" value="0"></object>

53


• ตวอย�ง แสดง VDO จ�ก Youtube <object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/rXHvXMNSVsY?version=3&hl=th_TH&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/rXHvXMNSVsY?version=3&hl=th_TH&rel=0" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

<iframe width="425" height=“344" src="http://www.youtube.com/embed/rXHvXMNSVsY" frameborder="0" allowfullscreen></iframe>

54

Thank You

Documents

แนะนำการเขียน HTML [2] (Hyper Text Markup Language)