แท็กการสร้างแบบฟอร์ม (ต่อ)

Report
1
่ าและหลักการทางานของ World Wide
• เพื่อให้ ทราบถึงทีม
Web
• เพื่อให้ ทราบถึงประโยชน์ ของการทางานแบบ Client-Server
• เพื่อให้ ทราบถึงโพรโทคอลทีเ่ กี่ยวข้ องกับการโปรแกรมบน
อินเทอร์ เน็ต
• เพื่อให้ ทราบประเภทการเขียนโปรแกรมแบบ Static
Programming และ Dynamic Programming
2
• บรรยายโดยผู้สอนและใช้ เอกสารประกอบการสอนของ
ผู้สอน
• สอนโดยใช้ ส่ือคอมพิวเตอร์ ผ่านเครื่ องฉาย
• อภิปรายในชั้นเรี ยนร่ วมกัน
่ เติมจากตาราและเอกสารทีเ่ กี่ยวข้ อง
• ให้ นิสิตค้ นคว้ าเพิม
• ทาแบบฝึ กหัดท้ ายบท
3
• ประเมินผลจากการตอบคาถามและอภิปรายในชั้นเรี ยน
• ทาแบบฝึ กหัดท้ ายบท
• ทารายงานส่ ง
4
• รู ปแบบแท็กการใส่ รูปภาพ
<IMG SRC = "(Path/)ชื่อไฟล์ ภาพ" >
• ตัวอย่ าง Attribute ที่น่าสนใจ คือ
• Width = "ตัวเลขระบุความกว้ าง"
• Height = "ตัวเลขระบุความสูง"
• Border = "ตัวเลขระบุความหนาของเส้ นขอบ"
• Alt (Alternative Text) =”ข้ อความ”
5
• ตัวอย่ าง ex11.html
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
6
• รู ปมาเป็ นพืน้ หลังของเอกสาร HTML นัน
้ จะต้ องกาหนดไว้
ใน <BODY> โดยใช้ Attribute ชื่อ BACKGROUND หรือ
อาจจะมีเพิ่มเติมเช่ น BGPROPERTIES ดังตัวอย่ าง
ดังต่ อไปนี ้
7
• ตัวอย่ าง 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>
8
• แท็กที่ใช้ ควบคุมมีหลายคาสั่งดังนี ้
<TABLE>……….</TABLE> กาหนดจุดเริ่มต้ นและสิน้ สุดของการสร้ างตาราง
<CAPTION>……</ CAPTION> กาหนดชื่อเรื่องของตาราง
<TR>……………</TR> กาหนดการสร้ างแถว (ROW) ให้ กับตาราง
<TD>…………….</TD> กาหนดการสร้ างคอลัมน์ ( COLUMN )ให้ กับตาราง
รูปแบบในการเขียนคาสัง่ ดังนี ้
<TABLE>
<TR>
<TD> คอลัมน์ 1</TD> <TD> คอลัมน์ 2</TD> <TD> คอลัมน์ N</TD>
</TR>
</TABLE>
9
• ตัวอย่ าง ex13.html
<HTML>
<BODY>
<!..ต่อ..>
<TR>
<TABLE BORDER="2">
<TD ALIGN ="CENTER">2</TD>
<TR bgColor="Yellow">
<TD ALIGN ="CENTER" bgColor="#00FFFF">12</TD>
<TD ALIGN ="CENTER">24</TD>
<TD>ลาดับที่</TD>
<TD>คะแนน</TD>
<TD>แบบฝึ กหัด</TD>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
<TD ALIGN ="CENTER">1</TD>
<TD ALIGN ="CENTER">18</TD>
<TD ALIGN ="CENTER" bgColor="#FFCCCC">35</TD>
</TR>
10
<TR> <TD>แบบฝึ กหัด</TD> <TD>ทดสอบ</TD>
<TD>ปลายภาค</TD> <TD>รวม</TD>
</TR>
<HTML>
<TR>
• ตัวอย่ าง ex14.html
<TD ALIGN ="CENTER">1</TD>
<TD ALIGN ="CENTER">18</TD>
<TD ALIGN ="CENTER">35</TD>
<BODY>
<TD ALIGN ="CENTER">34</TD>
<TABLE BORDER="2" BORDERCOLOR="BLUE" FRAME="HSIDES" CELLSPACING="0"
CELLPADDING="0" >
<TD ALIGN ="CENTER">87</TD>
<CAPTION><B>การผสานเซลล์</B></ CAPTION>
</TR>
<TR>
<TR>
<TD COLSPAN="5" ALIGN="CENTER" >
<TD ALIGN ="CENTER">2</TD>
<B>ผลการเรียนของนักเรียน</B>
<TD ALIGN ="CENTER">12</TD>
<TD ALIGN ="CENTER">24</TD>
</TD>
<TD ALIGN ="CENTER">26</TD>
</TR>
<TD ALIGN ="CENTER">62</TD>
<TR>
</TR>
<TD ALIGN="CENTER" ROWSPAN="2">ลาดับที่</TD>
<TD ALIGN="CENTER" COLSPAN="4">คะแนน</TD>
</TR>
<! ต่อ >
</TABLE>
</BODY>
</HTML>
11
• HTML สามารถเชื่อมโยง (LINK) ไปยังตาแหน่ งต่ างๆได้
เพื่ออานวยความสะดวกในการใช้ งานทาให้ ค้นหาข้ อมูลได้
ง่ าย
• รู ปแบบดังนีค้ ือ
<A HREF = ตาแหน่ งที่ต้องการเชื่อมต่ อ> ข้ อความที่ต้องการ
ให้ เชื่อมโยง</A>
12
• ตัวอย่ าง 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>
13
• ตัวอย่ าง 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 >
14
• การเชื่อมโยงไปยังเว็บเพจอื่น
• ตัวอย่ าง 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>
15
• การเชื่อมโยงภายในเว็บเพจเดียวกัน
• ในกรณีท่ เี ราสร้ างเว็บเพจภายในหน้ าเดียวกันมีข้อมูลมากกว่ าหนึ่ง
หน้ าจอ ควรจะมีการกาหนดจุดเชื่อมโยง (Link) โดยใช่ สัญลักษณ์ #
นาหน้ าชื่อจุดปลายทาง
<A HREF = “ # ชื่อจุดปลายทางที่ต้องการเชื่อมโยง’’ > ข้ อความ </A>
กาหนดจุดปลายทางที่ต้องการเชื่อมโยง
<A NAME = “ ชื่อจุดปลายทางที่ต้องการเชื่อมโยง” > ข้ อความ </A>
• การเชื่อมโยงไปยัง E- mail
<A HREF=”mailto:[email protected]?subject=homework”> ส่งเมล์อาจารย์</A>
16
• กาหนดสีของการเชื่อมโยง
เพื่อให้ เป็ นจุดที่น่าสนใจและสะดุดตามากยิ่งขึน้ รู ปแบบ
ของคาสั่งกาหนดได้ ดังนี ้
<BODY TEXT
LINK
VLINK
ALINK
= สีข้อความปกติ
= สีท่ เี ป็ นจุดเชื่อมโยง
= สีท่ เี ป็ นจุดเชื่อมโยงที่เคยถูกคลิกใช้ งานแล้ ว
= สีท่ เี ป็ นจุดเชื่อมโยงที่กาลังถูกเรี ยกใช้ งาน>
17
• ตัวอย่ าง 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>
18
• การสร้ างแบบฟอร์ ม (Form) เพื่อใช้ ในการรั บข้ อมูลเป็ นวิธีการหนึ่งที่นิยมทา
กันในเว็บไซต์ ท่ ัวไป เช่ น การกรอกข้ อมูลในการสมัครสมาชิกต่ างๆ การ
แสดงความคิดเห็น การกรอกแบบสอบถาม เป็ นต้ น
19
• โครงสร้ าง 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 แสดงผล
20
ภายใน Element <form>...</form> จะประกอบด้ วยช่ อง
element 3 ประเภท คือ
1) <Input>...</Input>
2) <Select>...</Select>
3) <Textarea>…</Textarea>
21
• สร้ างฟอร์ มช่ องป้อนรั บข้ อมูลบรรทัดเดียว (Textbox)
มีรูปแบบดังนี ้
<input type=“text” Name=’ชื่อของเท็กซ์ บอกซ์ ’ value=”ค่ า
เริ่มต้ น Size=ขนาดของเท็กซ์ บอกซ์ Maxlength=จานวน
ตัวอักษรที่สามารถบันทึกได้ >
22
• ตัวอย่ าง 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>
23
• การสร้ างฟอร์ มรั บข้ อมูลรหัสผ่ าน (Password)
<input type=password name=”ชื่อของเท็กซ์ บอกซ์ ” value=”
ค่ าเริ่มต้ น” Size=’’ขนาดของเท็กซ์ บอกซ์ ” Maxlength =”
จานวนตัวอักษรที่สามารถบันทึกได้ ”>
24
• ตัวอย่ าง 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>
25
• การสร้ างฟอร์ มรั บข้ อมูลหลายบรรทัด (Text Area)
• การสร้ างฟอร์ มรั บข้ อมูลแสดงความคิดเห็นจะใช้ คาสั่ง Text
Area ในการรับข้ อมูลที่มีความยาวมากกว่ าหนึ่งบรรทัด โดย
มีรูปแบบคาสั่งดังนี ้
<textarea name=”comment” Cols=”จานวนตัวตัวอักษรในแต่
ละแถว” Rows=”จานวนแถว”> ข้ อความ </textarea>
26
• ตัวอย่ าง ex20.html
<Form name="form1">
รายละเอียด<br>
<textarea name="comment" Cols="25" Rows="5">
ข้ อความแสดงใน textarea </textarea>
</Form>
27
• การสร้ างเช็คบอกซ์ (Checkbox)
• การสร้ างเช็คบอกซ์ (Checkbox) เป็ นการรั บข้ อมูลที่ให้ ผ้ ูใช้
เลือกรายการ โดยการคลิกเมาส์ ท่ ชี ่ องรายการที่ต้องการ
และสามารถเลือกได้ มากกว่ าหนึ่งรายการ มีรูปแบบดังนี ้
<input type=”checkbox” Name=”ชื่อของ checkbox’’ Value=”
ค่ าเริ่มต้ น” >
28
• ตัวอย่ าง 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>
หมายเหตุ ถ้ ากาหนด Checked
แล้ ว รายการนันจะถู
้ กทาเครื่ องหมายไว้
เมื่อฟอร์ มแสดง
</form>
29
• การสร้ างปุ่ มเลือกรายการเดียว (Radio button)
• เป็ นการรั บข้ อมูลจากหัวข้ อที่ผ้ ูเขียนโปรแกรมกาหนดมาให้
เช่ น ศาสนาใด เพศใด อยู่จังหวัดใด เป็ นต้ น ผู้เขีย
• โปรแกรมกาหนดปุ่ มให้ คลิกตัวเลือก โดยสามารถเลือกได้
รายการเดียว มีรูปแบบคาสั่งดังนี ้
<input type=”radio” Name=”ชื่อของradio” Value=”ค่ าของ
radio”> ข้ อความ
30
• ตัวอย่ าง 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>
หมายเหตุ ต้ องตังชื
้ ่อเหมือนกันเพื่อให้ อยู่ในกลุ่มตัวเลือกเดียวกัน เช่น ในนี ้นี ้ตังชื
้ ่อว่า Sex
หมายเหตุ ถ้ ากาหนด Checked
แล้ ว รายการนันจะถู
้ กทาเครื่ องหมายไว้
เมื่อฟอร์ มแสดง
31
• การสร้ างรายการเลือก (Drop Down List)
เป็ นการรั บข้ มูลจากการคลิกเมาส์ เลือกรายการที่กาหนดไว้ โดยจะ
เลือกได้ เพียงหนึ่งรายการ โดยมีรูปแบบการใช้ คาสั่งดังนี ้
<select name=”ชื่อของครอปดาวน์ ลิสต์ ’’ Size=”จานวนรายการ”
<option value=”ค่ าของครอปดาวน์ ลิสต์ ”>ข้ อความ
</select>
32
• ตัวอย่ างที่ ex22.html
<head><title>การสร้างปุ่ มเลือกรายการเดียว</title></head>
<body>
<h4>ท่านชอบเทีย่ วทีไ่ หน<h4>
ลองปรับให้ Size เป็ น 3
<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
33
• การสร้ างปุ่ มบันทึกและยกเลิกข้ อมูล (Submit และ Reset)
• การสร้ างปุ่ มบันทึกและยกเลิกการบันทึกข้ อมูลจะใช้ กรณีท่ ม
ี ีการ
สมัครสมาชิก หรื อแสดงความคิดเห็นบางอย่ างเมื่อกรอกข้ อมูล
จนครบถ้ วนสมบรู ณ์แล้ ว จะให้ ผ้ ูใช้ ทาการคลิกที่ปุ่มตกลงหรื อ
เพื่อทาการบันทึกข้ อมูลที่ป้อนเข้ าไปทัง้ หมด มีรูปแบบการดังนี ้
<INPUT TYPE=”SUBMIT”NAME=”ชื่อของปุ่ ม” VALUE=”ข้ อความ
บนปุ่ ม”>
<INPUT TYPE=”RESET”NAME=”ชื่อของปุ่ ม” VALUE=”ข้ อความ
บนปุ่ ม”>
34
• ตัวอย่ าง ex23.html
<HTML>
<HEAD><TITLE>การสร้างฟอร์ม</TITLE></HEAD>
<BODY>
<H4>กรุณาป้ อนข้อมูลส่วนตัวของท่าน</H4>
<FORM NAME="Form1">
ชื่อ
<INPUT
MAXLENGTH="17"><BR>
สกุล
<INPUT
MAXLENGTH="15"><BR>
TYPE="TEXT"
NAME="F_NAME"SIZE="17"
TYPE="TEXT"NAME="L_NAME"SIZE="15"
ทีอ
่ ยู<
่ 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>
35
• การสร้ างปุ่ มค้ นหาไฟล์ ท่ ต
ี ้ องการ (Browse Button)
การสร้ างการค้ นหาไฟล์ (Browse) เป็ นการกดปุ่ มเพื่อเลือก
ไฟล์ ท่ ตี ้ องการ โดยมีรูปแบบการใช้ คาสั่งดังนี ้
<INPUT TYPE=”File” NAME=”ชื่อของปุ่ ม” Value="ค่ าข้ อมูล"
size="number" MaxLength="number">
36
• ตัวอย่ าง ex23.html
<H4>กรุณาเลือกไฟล์</H4>
<FORM NAME="INPUT">
ไฟล์ <input type="File" name="filename" size="30">
</FORM>
37
• การซ่ อนค่ า (Hidden Textbox)
• บางครั ง้ เราต้ องการซ่ อนค่ าบางอย่ างบนฟอร์ มไว้ ซึ่ง
สามารถกาหนดค่ าเหมือน Textbox ทุกอย่ างแต่ ไม่ ปรากฏ
ให้ เห็นบนฟอร์ ม โดยมีรูปแบบการใช้ คาสั่งดังนี ้
<input type="hidden" name="ชื่อ input hidden" value="ค่ า
ข้ อมูล">
38
• ตัวอย่ าง ex24.html
<H4>ซ่อนค่า</H4>
<FORM NAME="Form">
<input type="hidden" name="salary" value="12500" >
</FORM>
39
• การสร้ างเฟรม (Frame) คือการแบ่ งห้ าจอของเว็บออกเป็ น
ส่ วนต่ างๆ ทางด้ านแนวตัง้ และแนวนอนตามที่เราต้ องการ
ซึ่งในแต่ ละส่ วนสามารถแสดงผลได้ อย่ างอิสระและสามารถ
แสดงผลได้ มากกว่ า 1ไฟล์
40
• จะใช้ 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"
41
• การแบ่ งเฟรมตามตัง้ (Vertical frameset)
แบ่ งหน้ าจอออกเป็ นหลายๆ Frame ในแนวตัง้
• รู ปแบบ
<frameset cols="ขนาดframe1, ขนาดframe2,..">
<frame name="ชื่อframe" src="url">
<frame name="ชื่อframe" src="url">
...
</frameset>
42
A1.html
A2.html
<html>
<html>
<body bgcolor="Red">
<body bgcolor="Yellow">
Hello Hello Hello Hello
Welcome Welcome Welcome
</body>
</body>
</html>
</html>
F1.html
Welcome
Hello
<html>
<frameset cols="200,*" >
<frame src=“A2.html" name=“topFrame" >
<frame src=“A1.html" name="mainFrame">
</frameset>
</html>
43
• การแบ่ งเฟรมตามแนวนอน (Horizontal Frameset)
แบ่ งหน้ าจอออกเป็ นหลายๆ Frame ในแนวนอน
• รู ปแบบ
<frameset rows="ขนาดframe1, ขนาดframe2,..">
<frame name="ชื่อframe" src="url">
<frame name="ชื่อframe" src="url">
...
</frameset>
44
A1.html
A2.html
<html>
<html>
<body bgcolor="Red">
<body bgcolor="Yellow">
Hello Hello Hello Hello
Welcome Welcome Welcome
</body>
</body>
</html>
</html>
F2.html
Welcome
Hello
<html>
<frameset rows="200,*” >
<frame src=“A2.html" name=“topFrame" >
<frame src=“A1.html" name="mainFrame">
</frameset>
</html>
45
• ตัวอย่ าง
F3.html
<html>
A3.html
<frameset rows="110,*" >
<html>
<frame src="A3.html" name="topFrame" scrolling="NO" noresize>
<body bgcolor="Green">
<frameset cols="216,*" frameborder="NO" border="0">
ThailandThailand
<a href = "http://www.nu.ac.th" target="mainFrame"> มอนอ</a>
</body>
<frame src="A2.html" name="leftFrame" scrolling="NO" noresize>
<frame src="A1.html" name="mainFrame">
</frameset>
</html>
A3.Html
[TopFrame]
</frameset>
</html>
A2.Html
A1.Html
Leftframe]
[MainFrame]
46
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>
47
• การใส่ ไฟล์ เพลง ไฟล์ 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>
48
• 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)
49
• ตัวอย่ าง ไฟล์ เสียง
<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>
50
• 2.แท็ก <Object> มีความสามารถหลากหลาย ใช้ กาหนด
เพื่อเรียกใช้ และแสดงผลการทางานของ object ชนิดต่ างๆ
เช่ น ภาพกราฟฟิ ก, ไฟล์ เอกสาร, ActiveX ได้ โดย object
แต่ ละชนิดจะมีวธิ ีเรียกใช้ ท่ แี ตกต่ างกัน
51
• ตัวอย่ าง
<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>
52
• ตัวอย่ าง แสดง VDO จาก Youtube
<object width="420" height="315"><param name="movie"
value="http://www.youtube.com/v/rXHvXMNSVsY?version=3&amp;hl=t
h_TH&amp;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&amp;hl=th_
TH&amp;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>
53
54

similar documents