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

Download Report

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

1
่ ทราบถึงทีมาและหลั
่
• เพือให้
กการทางาน
ของ World Wide Web
่ ทราบถึงประโยชน์ของการทางาน
• เพือให้
แบบ Client-Server
่ ทราบถึงโพรโทคอลทีเกี
่ ยวข้
่
• เพือให้
องกับ
การโปรแกรมบนอินเทอร ์เน็ ต
่ ทราบประเภทการเขียนโปรแกรม
• เพือให้
แบบ Static Programming และ
2
Dynamic Programming
บรรยายโดยผู ส
้ อนและใช้เอกสาร
ประกอบการสอนของผู ส
้ อน
่
• สอนโดยใช้สอคอมพิ
ื่
วเตอร ์ผ่านเครืองฉาย
• อภิปรายในชนเรี
ั ้ ยนร่วมกัน
่ มจากตาราและ
• ให้นิสต
ิ ค้นคว้าเพิมเติ
่ ยวข้
่
เอกสารทีเกี
อง
• ทาแบบฝึ กหัดท้ายบท
•
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> โดยใช้
่ BACKGROUND หรือ
Attribute ชือ
่
อาจจะมีเพิมเติ
มเช่น 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"
8
่ ควบคุมมีหลายคาสังดังนี
่
้
• แท็กทีใช้
่ นและสินสุ
้ ด
<TABLE>……….</TABLE> กาหนดจุดเริมต้
ของการสร ้างตาราง
่ องของ
่
<CAPTION>……</ CAPTION> กาหนดชือเรื
ตาราง
<TR>……………</TR>
่ งนี ้ กาหนดการสร ้างแถว (ROW)
รูปแบบในการเขียนคาสังดั
ให้ก ับตาราง
<TABLE>
<TR>
<TD>…………….</TD>
กาหนดการสร ้างคอลัมน์ (
<TD> คอลัมน์ 1</TD> <TD> คอลัมน์ 2</TD>
COLUMN
)ให้ก ับตาราง
<TD> คอลัมน์ N</TD>
</TR>
</TABLE>
9
•<HTML>
ตัวอย่าง ex13.html
<BODY>
<TABLE BORDER="2">
<TR bgColor="Yellow">
<TD>ลาดับที<
่ /TD>
<TD>คะแนน</TD>
<TD>แบบฝึ กหัด</TD>
<!..ต่อ..>
<TR>
<TD ALIGN
="CENTER">2</TD>
<TD ALIGN ="CENTER"
bgColor="#00FFFF">12</TD>
<TD ALIGN
="CENTER">24</TD>
</TR>
</TR>
<TR>
</TABLE>
<TD ALIGN ="CENTER">1</TD>
<TD ALIGN ="CENTER">18</TD>
<TD ALIGN ="CENTER"
bgColor="#FFCCCC">35</TD>
</BODY>
</HTML>
10
<TR> <TD>แบบฝึ กหัด</TD> <TD>ทดสอบ</TD>
<TD>ปลายภาค</TD> <TD>รวม</TD>
</TR>
<TR>
• ตัวอย่าง ex14.html
<TD ALIGN ="CENTER">1</TD>
<TD ALIGN ="CENTER">18</TD>
<HTML>
<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>
</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.iams
anya.com</A><BR>
<A
HREF=“http://www.hotmail.com”>www.hotmail.
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=”MATIC
HON.JPG” .ALT=”หนังสือพิมพ ์มติชน”></A> <BR>
< A HREF=”http://www.dailnews.co.th”><IMG
SRC=”DAILYNEWS.JPG” ALT=”หนังสือพิมพ ์เดลินิวส”></A>
์
<BR
>
</ BODY >
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>
่
เชือมโยงไป
15
่
• การเชือมโยงภายในเว็
บเพจเดียวกัน
• ในกรณี ทเราสร
ี่
้างเว็บเพจภายในหน้าเดียวก ันมี
ข้อมู ลมากกว่าหนึ่ งหน้าจอ ควรจะมีการกาหนด
่
จุดเชือมโยง
(Link) โดยใช่สญ
ั ลักษณ์ # นาหน้า
่ ดปลายทาง
ชือจุ
่ ดปลายทางทีต้
่ องการเชือมโยง’’
่
<A HREF = “ # ชือจุ
> ข้อความ </A>
่ องการเชือมโยง
่
กาหนดจุดปลายทางทีต้
่ ดปลายทางทีต้
่ องการเชือมโยง”
่
<A NAME = “ ชือจุ
>
ข้อความ </A>
<A
16
HREF=”mailto:[email protected]?subject=homework”>
่
• การเชือมโยงไปยัง
E- mail
่
• กาหนดสีของการเชือมโยง
่
่ าสนใจและสะดุดตามาก
เพือให้
เป็ นจุดทีน่
่ น
้ รู ปแบบของคาสังก
่ าหนดได้ด ังนี ้
ยิงขึ
<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>
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
่
20ท ี่
-Action="URL" คือตาแหน่ งหรือ URL ของ Script ทีวางไว้
ภายใน Element <form>...</form> จะ
ประกอบด้วยช่อง element 3 ประเภท คือ
1) <Input>...</Input>
2) <Select>...</Select>
3) <Textarea>…</Textarea>
21
• สร ้างฟอร ์มช่องป้ อนร ับข้อมู ลบรรทัดเดียว
(Textbox)
มีรูปแบบด ังนี ้
่
<input type=“text” Name=’ชือของ
่ น Size=
เท็กซ ์บอกซ ์’ value=”ค่าเริมต้
ขนาดของเท็กซ ์บอกซ ์ 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>
นามสกุล
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"
size="8" maxlength="8"> <br>
name="pwd"
</Form>
25
• การสร ้างฟอร ์มร ับข้อมู ลหลายบรรทัด
(Text Area)
• การสร ้างฟอร ์มร ับข้อมู ลแสดงความ
คิดเห็นจะใช้คาสัง่ Text Area ในการร ับ
่ ความยาวมากกว่าหนึ่ งบรรทัด
ข้อมู ลทีมี
่
้
โดยมีรูปแบบคาสังดังนี
<textarea name=”comment” Cols=”
26
จานวนตัวตัวอ ักษรในแต่ละแถว” Rows=”
• ตัวอย่าง ex20.html
<Form name="form1">
รายละเอียด<br>
<textarea name="comment"
Cols="25" Rows="5">
ข ้อความแสดงใน textarea
</textarea>
</Form>
27
• การสร ้างเช็คบอกซ ์ (Checkbox)
• การสร ้างเช็คบอกซ ์ (Checkbox) เป็ นการ
่ ผูใ้ ช้เลือกรายการ โดยการ
ร ับข้อมู ลทีให้
่ องรายการทีต้
่ องการและ
คลิกเมาส ์ทีช่
สามารถเลือกได้มากกว่าหนึ่ งรายการ มี
รู ปแบบดังนี ้
่
<input type=”checkbox” Name=”ชือ
28
่
ของ checkbox’’ Value=”ค่าเริมต้น” >
• ตัวอย่าง 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 แล ้ว รายการนั น
้
จะถูกทาเครือ
่ งหมายไว ้
เมือ
่ ฟอร์มแสดง
29
• การสร ้างปุ่ มเลือกรายการเดียว (Radio
button)
่ เ้ ขียน
• เป็ นการร ับข้อมู ลจากหัวข้อทีผู
โปรแกรมกาหนดมาให้ เช่น ศาสนาใด
เพศใด อยู ่จงั หวัดใด เป็ นต้น ผู เ้ ขีย
• โปรแกรมกาหนดปุ่ มให้คลิกตัวเลือก โดย
สามารถเลือกได้รายการเดียว มีรูปแบบ
่ งนี ้
คาสังดั
30
่
<input type=”radio” Name=”ชือของ
• ตัวอย่าง 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>
หมายเหตุ ถ ้ากาหนด
Checked แล ้ว รายการนั น
้
จะถูกทาเครือ
่ งหมายไว ้
เมือ
่ ฟอร์มแสดง
ื่ เหมือนกันเพือ
่ ในนีน
ื่ ว่31
หมายเหตุ ต ้องตัง้ ชอ
่ ให ้อยูใ่ นกลุม
่ ตัวเลือกเดียวกัน เชน
้ ต
ี้ งั ้ ชอ
า Sex
</form>
• การสร ้างรายการเลือก (Drop Down List)
เป็ นการร ับข้มูลจากการคลิกเมาส ์เลือกรายการ
่ าหนดไว้ โดยจะเลือกได้เพียงหนึ่ งรายการ
ทีก
่ งนี ้
โดยมีรูปแบบการใช้คาสังดั
่
<select name=”ชือของครอปดาวน์
ลส
ิ ต ์’’
Size=”จานวนรายการ”
<option value=”ค่าของครอปดาวน์ 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 มาก
จาทหให ้แสดงรายการเป็ นแบบ Listbox
33
• การสร ้างปุ่ มบันทึกและยกเลิกข้อมู ล (Submit
และ Reset)
• การสร ้างปุ่ มบันทึกและยกเลิกการบันทึก
ข้อมู ลจะใช้กรณี ทมี
ี่ การสมัครสมาชิก หรือ
่
แสดงความคิดเห็นบางอย่างเมือกรอกข้
อมู ล
จนครบถ้วนสมบรู ณแ
์ ล้ว จะให้ผูใ้ ช้ทาการ
่ าการบันทึกข้อมู ลที่
คลิกทีปุ่่ มตกลงหรือเพือท
้
ป้ อนเข้าไปทังหมด
มีรูปแบบการดังนี ้
่
<INPUT TYPE=”SUBMIT”NAME=”ชือของ
ปุ่ ม” VALUE=”ข้อความบนปุ่ ม”>
34
่
<INPUT TYPE=”RESET”NAME=”ชือของ
• ตัวอย่าง 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"
36
MaxLength="number">
• ตัวอย่าง 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
จากขอบหน้าต่างแนวนอน
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">
...
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"
scrolling="NO" noresize>
<body bgcolor="Green">
ThailandThailand
<a
href
=
"http://www.nu.ac.th"
target="mainFrame"> มอนอ</a>
</body>
A3.Html
</html>
[TopFrame]
A2.Html
A1.Html
Leftframe]
[MainFrame]
name="topFrame"
<frameset cols="216,*" frameborder="NO"
border="0">
<frame src="A2.html" name="leftFrame"
scrolling="NO" noresize>
<frame
name="mainFrame">
src="A1.html"
</frameset>
</frameset>
</html>
46
Inline Frame (IFrame)
่ ลงในหน้าเว็บเพจได้ โดยการใช้
สามารถแสดงหน้าเว็บเพจอืนๆ
IFrame
่ FRAME Src=ชือ
่ URL Width=ขนาด
<IFRAME name=ชือ
ความกว้าง height=ขนาดความสู
ง Frameborder=ขนาดเส้น
<Html>
ขอบ Scrolling=ตัว
SCROLLBAR></IFRAME>
<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 ไฟล ์รู ปภาพทีให้
48
่
แสดงเมือใช้ embed ไม่ด"้ ></noembed>
•
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 เมือต้
้
่
่ องการให้เล่น
เล่นซาไปเรื
อยๆ
หรือกาหนดเป็ นตัวเลข จานวนรอบทีต้
ซา้
่ เล่น (ใช้ได้เฉพาะ IE)
- playcount="no" จานวนรอบทีให้
- hidden="true | false" ให้ซอ
่ น หรือแสดงตัว player
49
- volume="0 ถึง 100" กาหนด volume ของเสียง (ใช้ได้เฉพาะ
• ตัวอย่าง ไฟล ์เสียง
<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"
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