การใส่ไฟล์มัลติมีเดีย เช่น ไฟล์เสียงเพลง, Video, Flash

เราสามารถใส่ไฟล์เพลง, ไฟล์ video หรือไฟล์ flash ลงไปในหน้าเว็บเพจได้ ด้วย element <embed> หรือ <object>

1. <embed> ใช้แสดงการทำงานของโปรแกรม plug-in โดยนำไปผนวกกับเอกสาร HTML และอาจใส่ tag <noembed> ควบคู่ไปด้วย เผื่อเว็บเบราเซอร์์รุ่นเก่าที่ยังไม่ support tag <embed> นี้ 

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

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)

Exampleเล่นไฟล์เสียง

<embed src="ex_chapter17/jingleble.mid" width="100%" height="60">
<noembed><img src="nosupport.gif" ></noembed>
</embed>

Exampleเล่นไฟล์ Flash ตัวอย่างนี้เป็นเกมส์ระบายสี คลิกเลือกรูป และสีเพื่อระบายเล่นได้ค่ะ

<embed src="ex_chapter17/paint.swf" width="100%" height="250">
<noembed><img src="nosupport.gif" ></noembed>
</embed>

2. <object> มีความสามารถหลากหลาย ใช้กำหนดเพื่อเรียกใช้และแสดงผลการทำงานของ object ชนิดต่างๆ เช่น ภาพกราฟฟิก, ไฟล์เอกสาร, ActiveX ได้ โดย object แต่ละชนิดจะมีวิธีเรียกใช้ที่แตกต่างกัน

Example

<object data="travelingr_83q3cvch.wmv" width="100%" height="280">
<param name="src" value="ex_chapter17/travelingr_83q3cvch.wmv">
<param name="autoplay" value="false">
<param name="autostart" value="0">
</object>

Outputลองกดปุ่ม play ดูค่ะ

Example ตัวอย่างการนำไฟล์ video จากเว็บไซต์ของ youtube.com มาแสดงในเว็บไซต์เรา copy code จาก youtube มาใช้ได้เลยค่ะ

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/7pUM2J1JR7w&#038;hl=en&#038;fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/7pUM2J1JR7w&#038;hl=en&#038;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>

หมายเหตุ : tag <embed> นี้เป็น tag ที่ล้าสมัย ที่ไม่สามารถนำมาใช้กับเอกสาร HTML/XHTML ที่ใช้ DTD แบบ Strict ได้ เราสามารถใช้ tag <object> แทนได้ 

More..

Frame โดยปกติเราจะแสดงเอกสาร HTML แบบทีละหน้า แต่การใช้ Frame จะทำให้เราสามารถแสดงเอกสาร HTML

Frame

โดยปกติเราจะแสดงเอกสาร HTML แบบทีละหน้า แต่การใช้ Frame จะทำให้เราสามารถแสดงเอกสาร HTML ได้หลายหน้า(หลายไฟล์)พร้อมกัน ในหน้าต่างเบราเซอร์์เดียวกัน  

เอกสาร HTML แต่ละหน้าก็คือ Frame ซึ่งแต่ละ Frame จะเป็นอิสระจาก Frame อื่นๆ  

เราสามารถนำ Frame มาแบ่งเป็นส่วนเมนู กับส่วนเนื้อหา โดยที่ส่วนเมนูจะไม่มีการเปลี่ยนแปลง แต่เมื่อผู้ใช้งานคลิกที่เมนูเรื่องใดๆ แล้ว ให้ส่วนเนื่อหาเปลี่ยนไปตามเมนูที่ถูกเลือก 

แต่การใช้ Frame ก็ีมีข้อเสีย คือ ยุ่งยากเวลาจะสั่งพิมพ์หน้าเว็บเพจทั้งหมด 

การสร้างชุดของ 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"


Vertical frameset
แบ่งหน้าจอออกเป็นหลายๆ Frame ในแนวตั้ง

<frameset cols="ขนาดframe1,ขนาดframe2,..">
<frame name="ชื่อframe" src="url">
<frame name="ชื่อframe" src="url">
...
</frameset>

Horizontal frameset
แบ่งหน้าจอออกเป็นหลายๆ Frame ในแนวนอน

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

เราสามารถกำหนดขนาด frame เป็น pixel หรือ % ก็ได้ และบาง Frame ที่จะกำหนดขนาดให้เป็นที่ว่างที่เหลือ ให้ใส่เป็น * 

เบราเซอร์์รุ่นเก่า จะี่ไม่สนับสนุกการทำงานของ Frame ทำให้การแสดงผลผิดพลาด เราอาจใส่ tag <noframe> ไว้ต่อจาก tag <frameset> เพื่อแสดงข้อความแจ้งผู้ใช้งานให้ทราบ


Example Vertical frameset 
frame_vertical.html
ตัวอย่างการใช้งานที่ให้ Frame ด้านขวาเป็นเมนู และด้านซ้ายเป็นเนื้อหา ที่เปลี่ยนไปตามหัวข้อของเมนูที่ผู้ใช้เลือก

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>บทเรียน HTML</title>
</head>
<frameset cols="20%,80%">
<frame name="menu" src="menu.html">
<frame name="chapter" src="../html_chapter01.html">
</frameset>
<noframes>เบราเซอร์์ของคุณไม่ support frame</noframes>
</html>

menu.html 
เราต้องกำหนดที่ลิงค์เป็น target="chapter" ด้วย เพื่อที่เมื่อผู้ใช้คลิกที่เมนู chapter ต่างๆ แล้ว ให้แสดงบทเรียนใน Frame ด้านขวา (ชื่อ frame chapter) ถ้าเราไม่กำหนด target บทเรียนจะแสดงอยู่ที่ frame ด้านซ้าย ทับเมนูบทเรียนไป

<html>
<body>
บทเรียน HTML<br>
<a href="../html_chapter01.html" target="chapter">chapter1</a><br>
<a href="../html_chapter02.html" target="chapter">chapter2</a><br>
<a href="../html_chapter03.html" target="chapter">chapter3</a><br>
<a href="../html_chapter04.html" target="chapter">chapter4</a><br>
<a href="../html_chapter05.html" target="chapter">chapter5</a><br>
</body>
</html>

 

OutpuT สามารถใช้ mouse ลากปรับขนาดของ frame ได้

เมื่อสร้าง Frame แล้ว จะสามารถ resize ขนาด Frame ได้ แต่ถ้าไม่ต้องการใ้ห้ resize ได้ ให้ใส่ attribute noresize ที่ tag <frame>

เปลี่ยนมาดูการแบ่ง Frame แนวนอนกันบ้าง

Example Horizontal frameset
frame_horizontal

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>บทเรียน HTML</title>
</head>
<frameset rows="20%,*">
<frame name="menu" src="menu_h.html" noresize>
<frame name="chapter" src="../html_chapter01.html">
</frameset>
<noframes></noframes>
</html>

menu_h.html 

<html>
<body>
บทเรียน HTML<br>
<a href="../html_chapter01.html" target="chapter">chapter1</a> |
<a href="../html_chapter02.html" target="chapter">chapter2</a> |
<a href="../html_chapter03.html" target="chapter">chapter3</a> |
<a href="../html_chapter04.html" target="chapter">chapter4</a> |
<a href="../html_chapter05.html" target="chapter">chapter5</a>
</body>
</html>

OutpuT ตัวอย่างนี้ไม่สามารถใช้ mouse ลากปรับขนาดของ Frame ได้ เพราะใส่ attribute noresize

เมื่อสร้าง Frame แล้ว จะมีขอบ Frame อยู่ ถ้าไม่ต้องการให้มี ให้ใส่ attribute frameborder="no" ที่ tag <frame>

Example Horizontal frameset 
frame_horizontal2.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>บทเรียน HTML</title>
</head>
<frameset rows="20%,*">
<frame name="menu" src="menu_h.html" frameborder="no" noresize>
<frame name="chapter" src="../html_chapter01.html" frameborder="no" noresize>
</frameset>
<noframes></noframes>
</html>

Output ตัวอย่างนี้จะไม่แสดงขอบของ Frame

เราสามารถทำ Frame ซ้อน Frame และปรับระยะห่างจากขอบหน้าต่าง (margin) ในแนวตั้งด้วย attribute marginheight และแนวนอน ด้วย marginwidth ลองดูตัวอย่างกันค่ะ

ExampleMixed frameset
frame_mix.html 

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>บทเรียน HTML</title>
</head>
<frameset rows="20%,80%">
  <frame name="header" src="header.html" noresize>
  <frameset cols="25%,75%">
    <frame name="menu" src="menu.html" marginheight="50" marginwidth="20" 
                    noresize>
    <frame name="chapter" src="../html_chapter01.html">
  </frameset>
</frameset>
<noframes></noframes>
</html> 

Output

Inline Frame (IFrame) 
นอกจากการใช้ Frame ที่ได้กล่าวไปข้างต้นแล้ว ยังมีการใช้ frame อีกรูปแบบหนึ่ง ที่สามารถแสดงหน้าเว็บเพจอื่นๆ ลงในหน้าเว็บเพจของเราได้ โดยการใช้ IFrame 

IFrame มักใช้ในส่วนที่เป็นโฆษณา เราอาจจะนำโฆษณามาจากเว็บไซต์อื่น ซึ่งทางผู้โฆษณาจะให้ code มาติดไว้ที่เว็บไซต์ของเรา โดยมีลักษณะเป็น IFrame   เมื่อผู้โฆษณาแก้ไข code ก็จะไม่กระทบอะไรกับหน้าเว็บเพจของเรา

Exampleการใช้งาน iframe โฆษณา

<html>
<body>
<iframe src="http://e-partner.elife.co.th/partner.php?id=enjoyday.net" width="125" height="125" marginwidth="0" marginheight="0" vspace="0" hspace="0" frameborder="0" scrolling="no"></iframe>
</body>
</html>

Output

More..

สร้างแบบฟอร์ม (Form) HTML แบบฟอร์มที่พบเห็นตามเว็บไซต์ต่างๆ เช่น แบบสอบถาม,

แบบฟอร์ม (Form)

แบบฟอร์มที่พบเห็นตามเว็บไซต์ต่างๆ เช่น แบบสอบถาม, ใบสั่งซื้อของ, การลงทะเบียนเป็นสมาชิก, สมุดเยี่ยม (Guestbook), แสดงความคิดเห็น (Comment) เป็นต้น

โดยปกติแล้วการบันทึกค่าข้อมูลในแบบฟอร์มจะใช้ Server Script เช่น PHP, ASP เข้ามาช่วยจัดการ ซึ่งถึงแม้เราจะไม่ได้ศึกษาถึงขั้นนั้น แต่เมื่อเรานำเอา Script สำเร็จรูปต่างๆ ที่มีแบบฟอร์มมาใช้งาน ถ้าเราเห็น code Element ของแบบฟอร์มเราก็จะไม่งง ว่ามันคืออะไร และเมื่อเราเรียนรู้เรื่อง CSS แล้ว เราสามารถที่จะตกแต่งแบบฟอร์มให้สวยงามมากขึ้นได้

โครงสร้าง 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 แสดงผล

ภายใน Element <form>...</form> จะประกอบด้วยช่อง element 3 ประเภท คือ
1. <input>...</input>
2. <select>...</select>
3. <textarea>

1. Input

input มีหลายประเภท ได้แก่

1) Text Fields

<form>
<input type="text" name="ชื่อช่องกรอกข้อมูล" value="ข้อมูล" size="number" maxlength="number" disabled readonly />
</form>

หรือ เพื่อให้เป็นไปตามมาตรฐานของ (X)HTML รุ่นใหม่ จะเขียนแบบนี้

<form>
<input type="text" name="ชื่อช่องกรอกข้อมูล" value="ข้อมูล" size="number" maxlength="number" disabled="disabled" readonly="readonly" />
</form>

- size="number" ความกว้างของช่องกรอกข้อมูล
- maxlengt="number" จำนวนตัวอักษรสูงสุดที่กรอกได้
- disabled lock ไม่ให้ช่องกรอกข้อมูลใช้งานได้
- readonly ให้ช่องกรอกข้อมูลอ่านได้อย่างเดียว กรอกข้อมูลไม่ได้

Example

<input type="text" name="txt_user" value="default value" size="20" maxlength="30"/>
<input type="text" name="txt_user" value="default value" size="40" maxlength="30" disabled="disabled" />
<input type="text" name="txt_user" value="readonly" size="20" maxlength="30" readonly="readonly" />

Output

  

2) Checkbox

<form>
<input type="checkbox" name="ชื่อ checkbox" value="ค่าข้อมูล" checked>
</form>

หรือ เพื่อให้เป็นไปตามมาตรฐานของ (X)HTML รุ่นใหม่ จะเขียนแบบนี้

<form>
<input type="checkbox" name="ชื่อ checkbox" value="ค่าข้อมูล" checked="checked" />
</form>

- checked = ให้ checkbox นั้นถูกเลือก (tick / ที่ checkbox) 

Example

<input type="checkbox" name="selection1" value="Yes" checked="checked" /> Selection 1
<input type="checkbox" name="selection2" value="Yes" /> Selection 2
<input type="checkbox" name="selection3" value="Yes" /> Selection 3 

Output

 Selection 1  Selection 2  Selection 3

3) Radio

<form>
<input type="radio" name="ชื่อ radio" value="ค่าข้อมูล"checked="checked" />
</form>

- checked = ให้ option นั้นถูกเลือก

Example

<input type="radio" name="sex" value="M" checked="checked" />
<input type="radio" name="sex" value="F" /> Female

Output

  Female

4) Password

<form>
<input type="password" name="ชื่อ input password" value="ค่าข้อมูล" size="number" maxlength="number" />
</form>

Example

<input type="password" name="txt_passw" value="1234" size="10" maxlength="30" />

Output

5) File upload

<form>
   <input type="file" name="ชื่อ input file" value="ค่าข้อมูล" size="number" maxlength="number" />
</form>

Example

<input type="file" name="filename" size="30" /> 

Output

6) Hidden

<form>
   <input type="hidden" name="ชื่อ input hidden" value="ค่าข้อมูล" />
</form>

Example

<input type="hidden" name="id" value="1234" /> 

Output

7) Button

<form>
   <input type="button" name="ชื่อ button" value="ค่าข้อมูล" />
</form>

Example

<input type="button" name="cancel" value="Cancel" /> 

Output

8) Submit

<form>
   <input type="button" name="ชื่อ button" value="ค่าข้อมูล" />
</form>

Example

<input type="button" name="save" value="Save" /> 

Output

9) Reset

<form>
   <input type="button" name="ชื่อ button" />
</form>

Example

<input type="reset" name="Clear" /> 

Output

2. Select

<form>
<select name="ชื่อ select" size="5" multiple>
<option value="1" selected="selected">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
</select>
</form>

- size = จำนวนตัวเลือกที่ให้มองเห็น
- multiple = ให้ผู้ใช้งานเลือกหลายตัวเลือกได้ โดยกดปุ่ม Ctrl

Example

<select name="list">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3"selected="selected">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
</select>

Output

 option 1 option 2 option 3 option 4 option 5 

Example

<select name="list" size="3">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3" selected="selected">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
</select>

Output

 option 1 option 2 option 3 option 4 option 5 

Example

<select name="list" size="5" multiple>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3" selected="selected">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
</select>

Output

 option 1 option 2 option 3 option 4 option 5 

3. Textarea

<form>
<textarea name="ชื่อ textarea" rows="number" cols="number" wrap="off">
ข้อความใน textareas
</textarea>
</form>

- wrap การกำหนดการตัดคำหรือขึ้นบรรทัดใหม่ให้ข้อความที่ยาวต่อเนื่องกันมากๆ ใน textarea 
มีค่าได้ 3 แบบ คือ
1. off (เป็นค่า default) ไม่มีการตัดคำหรือขึ้นบรรทัดใหม่ ข้อความจะถูกพิมพ์ไปเรื่อย ๆ และขึ้นบรรทัดใหม่เมื่อผู้กรอกเคาะ Enter เท่านั้น
2. physical หรือ soft ข้อความจะถูกพิมพ์ไปเรื่อย ๆ และ้ตัดคำหรือขึ้นบรรทัดใหม่ เมื่อข้อความยาวกว่าขนาดของ textarea และจุดใดที่ผู้ใช้เคาะ Enter ก็จะขึ้นบรรทัดใหม่ให้ตามที่พิมพ์
3. virtual หรือ hard ข้อความจะถูกพิมพ์ไปเรื่อย ๆ และ้ตัดคำหรือขึ้นบรรทัดใหม่ เมื่อข้อความยาวกว่าขนาดของ textarea แต่เป็นการปัดหลอกๆ ในหน้ากรอกข้อความ เวลารับค่าจะเป็นบรรทัดเดียว

Example

<textarea name="comment" rows="8" cols="60">
                              \\|// 
                            (@ @)   
 ----------------------oOO---(_)---OOo-------------------
 
 เมื่อเราพิมพ์ข้อความใน TEXT AREAR มันจะแสดงผล 
 เหมือนกับที่เราพิมพ์มันจริงๆ                    ไม่ว่า
 เราจะเว้นวรรคอย่างไร          1   2     3         4 

                      HELLO WORLD 
 --------------------------------------------------------
                           |__|__|  
                            || ||
                           ooO Ooo

</textarea>

Output

wrap="off" (เป็นค่า default) ไม่มีการตัดคำหรือขึ้นบรรทัดใหม่ ข้อความจะถูกพิมพ์ไปเรื่อย ๆ และขึ้นบรรทัดใหม่เมื่อผู้กรอกเคาะ Enter เท่านั้น

Example : wrap=offที่ข้อความมีการเคาะ Enter 2 ครั้ง ที่ก่อนข้อความ ปัจจุบันมีการพัฒนา...

<textarea name="text" rows="8" cols="30" wrap="off">
HTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language)
ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
</textarea>

Output

warp="physical" หรือ soft ข้อความจะถูกพิมพ์ไปเรื่อย ๆ และ้ตัดคำหรือขึ้นบรรทัดใหม่ เมื่อข้อความยาวกว่าขนาดของ textarea และจุดใดที่ผู้ใช้เคาะ Enter ก็จะขึ้นบรรทัดใหม่ให้ตามที่พิมพ์

Example : wrap=physicalที่ข้อความมีการเคาะ Enter 2 ครั้ง ที่ก่อนข้อความ ปัจจุบันมีการพัฒนา...

<textarea name="text" rows="8" cols="30" wrap="physical">
HTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language)
ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
</textarea>

Output

warp="virtual" หรือ hard ข้อความจะถูกพิมพ์ไปเรื่อย ๆ และ้ตัดคำหรือขึ้นบรรทัดใหม่ เมื่อข้อความยาวกว่าขนาดของ textarea แต่เป็นการปัดหลอกๆ ในหน้ากรอกข้อความ เวลารับค่าจะเป็นบรรทัดเดียว

Example : wrap=virtualที่ข้อความมีการเคาะ Enter 2 ครั้ง ที่ก่อนข้อความ ปัจจุบันมีการพัฒนา...

<textarea name="text" rows="8" cols="30" wrap="virtual">
HTML (Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language)
ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)
</textarea>

Output

Fieldset

การจัดกลุ่มฟิลด์ป้อนข้อมูลใน Form ที่มีความสัมพันธ์กัน จะทำให้ Form มีความเป็นระเบียบสวยงาม และผู้ใช้งานสามารถเข้าใจและป้อนข้อมูลได้สะดวกมากขึ้น

<form>
<fieldset>
<legend>ชื่อกลุ่มข้อมูล</legend>
element form ต่างๆ
</fieldset>

<fieldset>
<legend>ชื่อกลุ่มข้อมูล</legend>
element form ต่างๆ
</fieldset>
</form>

หลังจากที่เีรียนรู้ element ของแบบฟอร์ม แบบต่างๆ ไปแล้ว เราลองนำมาประกอบกันเป็น แบบสอบถามเกี่ยวกับเว็บไซต์ดูค่ะ

Example

<form action="savedata.php" method="post" name="F1">
<fieldset>
<legend>Personal data</legend>
Name :
<input type="text" name="txt_name" size="20" maxlength="30" /> <br />
Sex :
<input type="radio" name="sex" value="M" /> Male
<input type="radio" name="sex" value="F" /> Female <br />
Age :
<select name="lst_age">
<option value="" >-</option>
<option value="1" >1-10</option>
<option value="2">11-20</option>
<option value="3">21-30</option>
<option value="4">31-40</option>
<option value="5">>40</option>
</select>
</fieldset>
<fieldset>
<legend>Your interesting</legend>
Section :
<input type="checkbox" name="chk1" value="Yes" /> HTML
<input type="checkbox" name="chk2" value="Yes" /> CSS
<input type="checkbox" name="chk3" value="Yes" /> JAVASCRIPT
<br />
Score for this website :
<input type="text" name="txt_score" size="20" maxlength="30" /><br />
Comment : <br />
<textarea wrap="virtual" name="txt_comment" rows="6" cols="20">
</textarea>
</fieldset>
<p align="center">
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</p>
</form>

Output

Personal data

Name : 
Sex :  Male  Female
Age :  - 1-10 11-20 21-30 31-40 >40 

Your interesting

Section :  HTML  CSS  JAVASCRIPT
Score for this website : 
Comment :

More..

.ใส่รูปภาพ (Image) ประเภทของไฟล์รูปภาพ HTML

รูปภาพ (Image)

ประเภทของไฟล์รูปภาพ

1) GIF (Compuserve Graphic Interchange Format) มีนามสกุล .gif สามารถแสดงสีได้สูงสุดเพียง 256 สี จึงไม่สามารถไล่ระดับสีได้มากนัก นิยมสร้างเป็นภาพการ์ตูน ตัวอักษร ภาพเคลื่อนไหว สามารถทำพื้นโปร่งใสได้ (transparent)

2) JPEG (Joint Photographic Experts Group) มีนามสกุลเป็น .jpg สามารถแสดงสีได้สูงสุด ถึง 16.7 ล้านสี จึงเหมาะกับภาพถ่าย หรือภาพที่ใช้สีจำนวนมาก ไม่สามารถทำภาพโปร่งใส หรือภาพเคลื่อนไหวได้ 

การแสดงรูปภาพ

มีรูปแบบการใช้งานดังนี้

<img src="ไฟล์รูปภาพ" alt="คำอธิบายรูปภาพ" width="number" height="number">

หรือ เพื่อให้เป็นไปตามมาตรฐานของ (X)HTML รุ่นใหม่ จะเขียนแบบนี้

<img src="ไฟล์รูปภาพ" alt="คำอธิบายรูปภาพ" width="number" height="number" />

attribute ของรูปภาพ ได้แก่
- src="ไฟล์รูปภาพ" 
- alt="คำอธิบายรูปภาพ" 
- width="number" ความกว้างของรูป 
- height="number" ความสูงของรูป 
ค่าของ attribute width และ height เป็นตัวเลข หน่วยเป็น px หรือ %ของหน้าจอหรือ containner ที่บรรจุรูปภาพอยู่ 
- align = "top" | "middle" | "bottom" จัดวางตำแหน่งรูปภาพกับข้อความ
- border="number" ขนาดกรอบของรูป
- vspace="number" ระยะห่างระหว่างรูปกับข้อความ ในแนวตั้ง
- hspace="number" ระยะห่างระหว่างรูปกับข้อความ ในแนวนอน

Example แสดงรูปภาพ และคำอธิบาย

<img src="../images/flower.jpg" alt="ภาพดอกไม้ทิวลิป" />

Outputลองเอาเมาส์วางบนรูป จะมีคำอธิบายแสดงขึ้นมาค่ะ

Example แสดงรูปภาพ และขอบ

<img src="../images/flower.jpg" border="3"/>

OutpuT

Example ปรับขนาดรูปภาพ ด้วย attribute width และ height

<img src="../images/flower.jpg" width="200px" height="200px" />
<img src="../images/flower.jpg" width="200px" height="240px" />
<img src="../images/flower.jpg" width="50%" />

Output

 

การจัดวางตำแหน่งรูปภาพกับข้อความ

Example ข้อความอยู่ด้านบน

ข้อความหน้ารูปภาพ<img src="images/ryoma.jpg" />

<img src="../images/ryoma.jpg" />ข้อความหลังรูปภาพ

รูปภาพ<img src="../images/ryoma.jpg" />ระหว่างข้อความ

รูปภาพ<img src="../images/ryoma.jpg" align="top" />ระหว่างข้อความ จัดให้วางด้านบน align top

รูปภาพ<img src="../images/ryoma.jpg" align="middle" />ระหว่างข้อความ จัดให้วางตรงกลาง align middle

รูปภาพ<img src="../images/ryoma.jpg" align="bottom" />ระหว่างข้อความ จัดให้วางด้านล่าง align bottom

Output

ข้อความหน้ารูปภาพ 

ข้อความหลังรูปภาพ 

รูปภาพระหว่างข้อความ 


รูปภาพระหว่างข้อความ จัดให้วางด้านบน align top 

รูปภาพระหว่างข้อความ จัดให้วางตรงกลาง align middle 

รูปภาพระหว่างข้อความ จัดให้วางด้านล่าง align bottom

กำหนดระยะห่างระหว่างรูปกับข้อความ

Example

ให้ข้อความ<img src="../images/ryoma.jpg" vspace="20" />วางห่างออกมาจากรูป ในแนวตั้ง

ให้ข้อความ<img src="../images/ryoma.jpg" hspace="20" />วางห่างออกมาจากรูป ในแนวนอน 

Output

ให้ข้อความวางห่างออกมาจากรูป ในแนวตั้ง 


ให้ข้อความวางห่างออกมาจากรูป ในแนวนอน

More..

การกำหนด Link และตำแหน่ง Anchor การเชื่อมโยงไปจุดต่างๆ ในหน้าเว็บเพจปัจจุบัน

การกำหนด Link และตำแหน่ง Anchor

1. การเชื่อมโยงไปจุดต่างๆ ในหน้าเว็บเพจปัจจุบัน

ในหน้าเว็บเพจที่ข้อมูลยาวมาก เราอาจทำหัวข้อกำหนดไว้ให้เลือกอ่านได้ง่ายๆ เมื่อผู้ชมเลือกหัวข้อแล้ว เราก็เลื่อน scrollbar ไปยังตำแหน่งเนื้อหาของหัวข้อนั้นๆ ให้ค่ะ

กำหนดจุดเชื่อมโยงในเนื้อหา

<a name="ชื่อ anchor">...</a>

กำหนดลิงค์เชื่อมโยง ไปตำแหน่ง anchor

<a href="#anchor name" title="คำิอธิบายลิงค์">ลิงค์</a>

tag <a>

การแสดงผล

<a name="top">ลองคลิกที่ลิงค์ด้านล่างดูค่ะ และคำว่า Top</a> <br /> <a href="#html1" title="ไปยังเนื้อหา HTML คืออะไร?">HTML คืออะไร?</a> <br /> <a href="#html2" title="ไปยังเนื้อหา การสร้างเว็บเพจทำอย่างไร?">การสร้างเว็บเพจทำอย่างไร?</a> <br> <br> <br> <a name="html1">HTML คืออะไร?</a><br /> HTML(Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language)ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C) <br> <br> <br> <a name="html2">การสร้างเว็บเพจทำอย่างไร?</a><br /> การสร้างเว็บเพจ โดยใช้ภาษา HTML สามารถทำโดยใช้โปรแกรม Text Editor ต่างๆ เช่น Notepad, EditPlus หรือจะอาศัยโปรแกรมที่เป็นเครื่องมือช่วยสร้างเว็บเพจ เช่น Microsoft FrontPage, Dream Weaver ซึ่งอํานวยความสะดวกในการสร้างหน้า HTML ในลักษณะ WYSIWYG (What You See Is What You Get) <br> <br> <br> <a href="#top" title="กลับไปด้านบน">Top</a><br />

ลองคลิกที่ลิงค์ด้านล่างดูค่ะ และคำว่า Top HTML คืออะไร? การสร้างเว็บเพจทำอย่างไร? HTML คืออะไร? HTML(Hyper Text Markup Language) เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ เป็นภาษาที่ง่ายต่อการเรียนรู้ (ไม่ใช่ภาษาประเภท Programming Language)ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C) การสร้างเว็บเพจทำอย่างไร? การสร้างเว็บเพจ โดยใช้ภาษา HTML สามารถทำโดยใช้โปรแกรม Text Editor ต่างๆ เช่น Notepad, EditPlus หรือจะอาศัยโปรแกรมที่เป็นเครื่องมือช่วยสร้างเว็บเพจ เช่น Microsoft FrontPage, Dream Weaver ซึ่งอํานวยความสะดวกในการสร้างหน้า HTML ในลักษณะ WYSIWYG (What You See Is What You Get) Top

2. การเชื่อมโยงไปยังหน้าเว็บเพจอื่นๆ หรือเว็บไซต์ อื่นๆ

<a href="url" target="window name" title="คำิอธิบายลิงค์">

ค่าที่ใช้ใน target 
"_blank" เปิดหน้าเว็บเพจในหน้าต่าง Browser ใหม่ 
"_self" เปิดหน้าเว็บเพจในหน้าต่าง Browser เดิม และ Frame เดิม 
"_parent" เปิดหน้าเว็บเพจในหน้าต่าง Browser เดิม 
"_top" เปิดหน้าเว็บเพจในหน้าต่าง Browser เดิมแบบเต็มหน้า และยกเลิก frame ทั้งหมด 
หรือ จะใส่เป็นชื่อหน้าต่างที่เรากำหนดก็ได้ค่ะ 

อาจจะยังไม่เข้าใจวิธีการใช้งาน target เพราะยังไม่ได้ศึกษาเรื่อง Frame ไม่เป็นไรนะคะ ปกติที่ใช้บ่อยๆ มีแค่ _blank เท่านั้นเอง

tag <a>	การแสดงผล
<a href="html_chapter08.html" title="บทที่8">chapter8 หน้าต่างเดิม</a> <a href="html_chapter08.html" title="บทที่8" target="_blank">chapter8 หน้าต่างใหม่</a> <a href="http://www.google.com" title="Google" target="_blank">google.com</a>	ลองคลิกดูค่ะ chapter8 หน้าต่างเดิม chapter8 หน้าต่างใหม่ google.com

การเขียน url อ้างลิงค์ไปเว็บเพจ หรือไฟล์ ต่างๆ ของเว็บไซต์เดียวกัน ทำอย่างไร

สมมติไฟล์ที่ใช้ มีการจัดเก็บอยู่ใน folder ต่างๆ ดังนี้

folder webtutorial
    index.html

    folder html_tutorial
        html_chapter1.html
        html_chapter2.html
        folder images
            img1.jpg
            img2.jpg
            folder images_sub
            img_sub.jpg

    folder css_tutorial
        css_chapter1.html
        css_chapter2.html
        folder images
            pic1.jpg
            pic2.jpg
        folder css
            style.css

ตอนนี้เราทำงานอยู่ที่ไฟล์ html_chapter2.html

1. ต้องการทำลิงค์ไป html_chapter1.html ที่อยู่ใน folder html_tutorial (อยู่ใน folder เดียวกัน) เขียนได้ดังนี้
<a href="html_chapter1.html">Chapter1</a> 

2. ต้องการทำลิงค์ไป img1.jpg และ img2 ที่อยู่ใน folder html_tutorial >images เขียนได้ดังนี้
<a href="images/img1.jpg">รูปภาพที่ 1</jpg> 
<a href="images/img2.jpg">รูปภาพที่ 2</jpg> 

3. ต้องการทำลิงค์ไป img_sub ที่อยู่ใน folder html_tutorial>images>images_sub เขียนได้ดังนี้
<a href="images/images_sub/img_sub.jpg">รูปภาพ</jpg> 

4. ต้องการทำลิงค์ไป css_chapter1.html ที่อยู่ใน folder cssl_tutorial เขียนได้ดังนี้
<a href="../css_tutorial/css_chapter1.html">CSS Chpater1</a>

5. ต้องการทำลิงค์ไป pic1.jpg และ pic2.jpg ที่อยู่ใน folder cssl_tutorial>images เขียนได้ดังนี้
<a href="../css_tutorial/images/pic1.jpg">รูปภาพที่ CSS 1</a>
<a href="../css_tutorial/images/pic2.jpg">รูปภาพที่ CSS 2</a>

6. ต้องการทำลิงค์ไป index.html ที่อยู่ใน folder webtutorial เขียนได้ดังนี้
<a href="../index.html">index</a>

การเชื่อมโยงไปยัง email

tag <a>	การแสดงผล
<a href="mailto:mail@hotmail.com">contact webmaster</a>	ลองคลิกดูค่ะ contact webmaster

การกำหนดสีให้ลิงค์

กำหนดสีให้ลิงค์ใน tag <body>โดยใช้ attribute link(สีของลิงค์ที่ยังไม่เคยคลิก), alink(สีของลิงค์ขณะคลิก) และ vlink(สีของลิงค์ที่เคยคลิกแล้ว) 

Example

<html>
<head>
<title>การกำหนดสีให้ลิงค์</title>
</head>

<body link="red" alink="blue" vlink="orange">

Link ที่ยังไม่คลิกให้เป็นสีแดง , ขณะคลิกเป็นสีน้ำเงิน, เมื่อคลิกแล้วเป็นสีส้ม<br>
<a href="http://www.google.com" target="_blank">google.com</a>
<a href="http://www.pantip.com" target="_blank">pantip.com</a>

</body>
</html>

 

หมายเหตุ : การกำหนด style ให้กลับลิงค์ควรใช้ CSS ซึ่งทำให้เราใส่ลูกเล่นได้มากกว่า ทั้งพื้นหลัง และการขีดเส้นใต้

More..