1 / 54

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

บทที่ 2. แนะนำการเขียน HTML [2] (Hyper Text Markup Language) . สัญญา เครือหงษ์ ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ คณะวิทยาศาสตร์ มหาวิทยาลัยนเรศวร. วัตถุประสงค์การเรียนรู้ประจำบท. เพื่อให้ทราบถึงที่มาและหลักการทำงานของ World Wide Web

kaelem
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. บทที่ 2 แนะนำการเขียน HTML [2](Hyper Text Markup Language) สัญญา เครือหงษ์ ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ คณะวิทยาศาสตร์ มหาวิทยาลัยนเรศวร

  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 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

  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 <!..ต่อ..> <TR> <TD ALIGN ="CENTER">2</TD> <TD ALIGN ="CENTER" bgColor="#00FFFF">12</TD> <TD ALIGN ="CENTER">24</TD> </TR> </TABLE> </BODY> </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>

  11. <TR> <TD>แบบฝึกหัด</TD> <TD>ทดสอบ</TD> <TD>ปลายภาค</TD> <TD>รวม</TD> </TR> <TR> <TD ALIGN ="CENTER">1</TD> <TD ALIGN ="CENTER">18</TD> <TD ALIGN ="CENTER">35</TD> <TD ALIGN ="CENTER">34</TD> <TD ALIGN ="CENTER">87</TD> </TR> <TR> <TD ALIGN ="CENTER">2</TD> <TD ALIGN ="CENTER">12</TD> <TD ALIGN ="CENTER">24</TD> <TD ALIGN ="CENTER">26</TD> <TD ALIGN ="CENTER">62</TD> </TR> </TABLE> </BODY> </HTML> แท็กการสร้างตาราง <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> <! ต่อ >

  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. แท็กการเชื่อมโยงหน้าเว็บเพจ <a> (ต่อ) • ตัวอย่าง 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. แท็กการเชื่อมโยงหน้าเว็บเพจ <a> (ต่อ) • การเชื่อมโยงไปยังเว็บเพจอื่น • ตัวอย่าง 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. แท็กการเชื่อมโยงหน้าเว็บเพจ <a> (ต่อ) • การเชื่อมโยงภายในเว็บเพจเดียวกัน • ในกรณีที่เราสร้างเว็บเพจภายในหน้าเดียวกันมีข้อมูลมากกว่าหนึ่งหน้าจอควรจะมีการกำหนดจุดเชื่อมโยง (Link) โดยใช่สัญลักษณ์ # นำหน้าชื่อจุดปลายทาง <A HREF = “ # ชื่อจุดปลายทางที่ต้องการเชื่อมโยง’’ > ข้อความ </A> กำหนดจุดปลายทางที่ต้องการเชื่อมโยง <A  NAME = “ ชื่อจุดปลายทางที่ต้องการเชื่อมโยง” > ข้อความ </A> • การเชื่อมโยงไปยัง E- mail <A HREF=”mailto:sanyak@nu.ac.th?subject=homework”> ส่งเมล์อาจารย์</A>

  17. แท็กการเชื่อมโยงหน้าเว็บเพจ <a> (ต่อ) • กำหนดสีของการเชื่อมโยง เพื่อให้เป็นจุดที่น่าสนใจและสะดุดตามากยิ่งขึ้นรูปแบบของคำสั่งกำหนดได้ดังนี้ <BODY    TEXT = สีข้อความปกติ LINK = สีที่เป็นจุดเชื่อมโยง VLINK = สีที่เป็นจุดเชื่อมโยงที่เคยถูกคลิกใช้งานแล้ว ALINK = สีที่เป็นจุดเชื่อมโยงที่กำลังถูกเรียกใช้งาน>

  18. แท็กการเชื่อมโยงหน้าเว็บเพจ <a> (ต่อ) • ตัวอย่าง 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. แท็กการสร้างแบบฟอร์ม <Form> (ต่อ) ภายใน Element <form>...</form> จะประกอบด้วยช่อง element 3 ประเภท คือ 1) <Input>...</Input> 2) <Select>...</Select> 3) <Textarea>…</Textarea>

  22. แท็กการสร้างแบบฟอร์ม <Form> (ต่อ) • สร้างฟอร์มช่องป้อนรับข้อมูลบรรทัดเดียว (Textbox) มีรูปแบบดังนี้ <input type=“text” Name=’ชื่อของเท็กซ์บอกซ์’ value=”ค่าเริ่มต้นSize=ขนาดของเท็กซ์บอกซ์Maxlength=จำนวนตัวอักษรที่สามารถบันทึกได้>

  23. แท็กการสร้างแบบฟอร์ม <Form> (ต่อ) • ตัวอย่าง 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. แท็กการสร้างแบบฟอร์ม <Form> (ต่อ) • การสร้างฟอร์มรับข้อมูลรหัสผ่าน (Password) <input type=passwordname=”ชื่อของเท็กซ์บอกซ์” value=”ค่าเริ่มต้น” Size=’’ขนาดของเท็กซ์บอกซ์” Maxlength=”จำนวนตัวอักษรที่สามารถบันทึกได้”>

  25. แท็กการสร้างแบบฟอร์ม <Form> (ต่อ) • ตัวอย่าง 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. แท็กการสร้างแบบฟอร์ม<Form> (ต่อ) • การสร้างฟอร์มรับข้อมูลหลายบรรทัด (Text Area) • การสร้างฟอร์มรับข้อมูลแสดงความคิดเห็นจะใช้คำสั่ง Text Area ในการรับข้อมูลที่มีความยาวมากกว่าหนึ่งบรรทัด โดยมีรูปแบบคำสั่งดังนี้ <textarea name=”comment” Cols=”จำนวนตัวตัวอักษรในแต่ละแถว” Rows=”จำนวนแถว”> ข้อความ </textarea>

  27. แท็กการสร้างแบบฟอร์ม <Form> (ต่อ) • ตัวอย่าง ex20.html • <Form name="form1"> • รายละเอียด<br> • <textarea name="comment" Cols="25" Rows="5"> • ข้อความแสดงใน textarea </textarea> • </Form>

  28. แท็กการสร้างแบบฟอร์ม <Form> (ต่อ) • การสร้างเช็คบอกซ์ (Checkbox) • การสร้างเช็คบอกซ์ (Checkbox) เป็นการรับข้อมูลที่ให้ผู้ใช้เลือกรายการ โดยการคลิกเมาส์ที่ช่องรายการที่ต้องการและสามารถเลือกได้มากกว่าหนึ่งรายการ มีรูปแบบดังนี้ <input type=”checkbox” Name=”ชื่อของ checkbox’’ Value=”ค่าเริ่มต้น” >

  29. แท็กการสร้างแบบฟอร์ม <Form> (ต่อ) • ตัวอย่าง 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. แท็กการสร้างแบบฟอร์ม <Form> (ต่อ) • การสร้างปุ่มเลือกรายการเดียว (Radio button) • เป็นการรับข้อมูลจากหัวข้อที่ผู้เขียนโปรแกรมกำหนดมาให้ เช่นศาสนาใด เพศใด อยู่จังหวัดใด เป็นต้น ผู้เขีย • โปรแกรมกำหนดปุ่มให้คลิกตัวเลือก โดยสามารถเลือกได้รายการเดียว มีรูปแบบคำสั่งดังนี้ <input type=”radio” Name=”ชื่อของradio” Value=”ค่าของ radio”> ข้อความ

  31. แท็กการสร้างแบบฟอร์ม <Form> (ต่อ) • ตัวอย่าง 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. แท็กการสร้างแบบฟอร์ม <Form> (ต่อ) • การสร้างรายการเลือก (Drop Down List) เป็นการรับข้มูลจากการคลิกเมาส์เลือกรายการที่กำหนดไว้ โดยจะเลือกได้เพียงหนึ่งรายการ โดยมีรูปแบบการใช้คำสั่งดังนี้ <select name=”ชื่อของครอปดาวน์ลิสต์’’Size=”จำนวนรายการ” <option value=”ค่าของครอปดาวน์ลิสต์”>ข้อความ </select>

  33. แท็กการสร้างแบบฟอร์ม <Form> (ต่อ) • ตัวอย่างที่ 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> ลองปรับให้ Size เป็น 3 หมายเหตุ ถ้ากำหนด Selected แล้ว รายการนั้นจะถูกเลือกไว้ก่อนเมื่อฟอร์มแสดง หมายเหตุ ถ้ากำหนด size ใน select มากกว่า 1 จำทหให้แสดงรายการเป็นแบบ Listbox

  34. แท็กการสร้างแบบฟอร์ม <Form> (ต่อ) • การสร้างปุ่มบันทึกและยกเลิกข้อมูล (Submit และ Reset) • การสร้างปุ่มบันทึกและยกเลิกการบันทึกข้อมูลจะใช้กรณีที่มีการสมัครสมาชิก หรือแสดงความคิดเห็นบางอย่างเมื่อกรอกข้อมูลจนครบถ้วนสมบรูณ์แล้ว จะให้ผู้ใช้ทำการคลิกที่ปุ่มตกลงหรือเพื่อทำการบันทึกข้อมูลที่ป้อนเข้าไปทั้งหมด มีรูปแบบการดังนี้ <INPUT TYPE=”SUBMIT”NAME=”ชื่อของปุ่ม”VALUE=”ข้อความบนปุ่ม”> <INPUT TYPE=”RESET”NAME=”ชื่อของปุ่ม”VALUE=”ข้อความบนปุ่ม”>

  35. แท็กการสร้างแบบฟอร์ม <Form> (ต่อ) • ตัวอย่าง 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. แท็กการสร้างแบบฟอร์ม <Form> (ต่อ) • การสร้างปุ่มค้นหาไฟล์ที่ต้องการ (Browse Button) การสร้างการค้นหาไฟล์ (Browse) เป็นการกดปุ่มเพื่อเลือกไฟล์ที่ต้องการ โดยมีรูปแบบการใช้คำสั่งดังนี้ <INPUT TYPE=”File” NAME=”ชื่อของปุ่ม” Value="ค่าข้อมูล" size="number" MaxLength="number">

  37. แท็กการสร้างแบบฟอร์ม <Form> (ต่อ) • ตัวอย่าง ex23.html <H4>กรุณาเลือกไฟล์</H4> <FORM NAME="INPUT"> ไฟล์ <input type="File" name="filename" size="30"> </FORM>

  38. แท็กการสร้างแบบฟอร์ม <Form> (ต่อ) • การซ่อนค่า (Hidden Textbox) • บางครั้งเราต้องการซ่อนค่าบางอย่างบนฟอร์มไว้ ซึ่งสามารถกำหนดค่าเหมือน Textbox ทุกอย่างแต่ไม่ปรากฏให้เห็นบนฟอร์ม โดยมีรูปแบบการใช้คำสั่งดังนี้ <input type="hidden" name="ชื่อ input hidden" value="ค่าข้อมูล">

  39. แท็กการสร้างแบบฟอร์ม <Form> (ต่อ) • ตัวอย่าง 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 (ต่อ) A2.html A1.html <html> <body bgcolor="Red"> Hello HelloHelloHello </body> </html> <html> <body bgcolor="Yellow"> Welcome WelcomeWelcome </body> </html> Welcome Hello F1.html <html> <frameset cols="200,*" > <frame src=“A2.html" name=“topFrame" > <frame src=“A1.html" name="mainFrame"> </frameset> </html>

  44. แท็กการสร้างเฟรม Frame (ต่อ) • การแบ่งเฟรมตามแนวนอน (Horizontal Frameset) แบ่งหน้าจอออกเป็นหลายๆ Frame ในแนวนอน • รูปแบบ <frameset rows="ขนาดframe1, ขนาดframe2,.."> <frame name="ชื่อframe" src="url"> <frame name="ชื่อframe" src="url"> ... </frameset>

  45. แท็กการสร้างเฟรม Frame (ต่อ) A2.html A1.html <html> <body bgcolor="Red"> Hello HelloHelloHello </body> </html> <html> <body bgcolor="Yellow"> Welcome WelcomeWelcome </body> </html> Welcome Hello <html> <frameset rows="200,*” > <frame src=“A2.html" name=“topFrame" > <frame src=“A1.html" name="mainFrame"> </frameset> </html> F2.html

  46. A3.Html [TopFrame] A2.Html Leftframe] A1.Html [MainFrame] แท็กการสร้างเฟรม Frame (ต่อ) F3.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 <html> <body bgcolor="Green"> ThailandThailand <a href="http://www.nu.ac.th" target="mainFrame"> มอนอ</a> </body> </html>

  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> • <IFramesrc="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><imgsrc="urlไฟล์รูปภาพที่ให้แสดงเมื่อใช้ embed ไม่ด้" ></noembed> </embed>

  49. แท็กการใส่ไฟล์มัลติมีเดีย เช่น ไฟล์เสียงเพลง, Video, Flash • 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. แท็กการใส่ไฟล์มัลติมีเดีย เช่น ไฟล์เสียงเพลง, Video, Flash • ตัวอย่าง ไฟล์เสียง <embed src="media/test.mid" width="100%" height="60"> <noembed><imgsrc="nosupport.gif" ></noembed> </embed> • ตัวอย่าง ไฟล์แฟลช <embed src="media/test.swf" width="100%" height="250"> <noembed><imgsrc="nosupport.gif" ></noembed> </embed>

More Related