เฟรม (Frame)

เฟรม เป็นความสามารถของ HTML ในการพัฒนาให้

แบ่งจอภาพออกเป็นส่วน ๆ แต่ละส่วนสามารถเปิดแฟ้มข้อมูล
ของตนเอง (HTML) ได้ โดยที่ทกุ เฟรมจะเป็นอิสระ และสามารถ
อ้างอิงถึงกันและกันได้ คำาสั่งในการสร้างเฟรมจะเป็นกลุ่มของ
TAG (Composite Tag) แบบเดียวกับ Table
เฟรม ประกอบด้วย โครงสร้าง หรือ Set ของเฟรม
<FrameSet>
เซ็ทของเฟรมตามเฟรมเซ็ทที่กำาหนดขึ้น
</FrameSet>
<FrameSet
Rows = "Value list” Cols = "Value list"
[Frameborder = Yes | No] [Border = pixel]
[BorderColor = "colorspec"]>
<Frame
Src = "Url"
Name = "Frame Name"
[Border = pixel]
[BorderColor = "colorspec"]>
...
</FrameSet>
 ในเฟรมเซ็ท จะมีการแบ่งออกเป็นแนวทั้ง Row และ Column โดยใช้
เครื่องหมาย , แบ่งออกเป็นส่วน ๆ ตัวอย่างเช่น
<FrameSet Rows = "100, 150, 200">
<Frame src = "1.html">
<Frame src = "2.html">
<Frame src = "3.html"> Frame 1 ขนาด 100 แสดง 1.html
</FrameSet>
Frame 2 ขนาด 150 แสดง 2.html

Frame 3 ขนาด 200 แสดง 3.html

<FrameSet Cols = "100, 150, 200">
<Frame src = "1.html">
<Frame src = "2.html">
<Frame src = "3.html">
</FrameSet>

1.html 2.html 3.html

100 150 200
<FrameSet Rows = "100, *"> 1
<Frame src = "1.html">
<FrameSet Cols = "100, *"> 2
<Frame src = "2.html">
<Frame src = "3.html">
</FrameSet>
</FrameSet> 1.html
100 แสดง 1.html

100 แสดง
2.html
*
3.html
แสดง Frame 3
Frame 2
*
 การกำาหนด Scroll bar ของ Frame
ไม่ต้องการใช้มี Scroll Bar เกิดขึ้นในเฟรม
<FrameSet Rows = "100, *">
<Frame src = "1.html” SCROLLING = NO>
<FrameSet Cols = "100, *">
<Frame src = "2.html” SCROLLING = NO >
<Frame src = "3.html">
</FrameSet>
</FrameSet>
 การกำาหนดค่าของเฟรมให้มีขนาดคงที่
<FrameSet Rows = "100, *">
<Frame src = "1.html” SCROLLING = NO NORESIZE>
<FrameSet Cols = "100, *">
<Frame src = "2.html” SCROLLING = NO
NORESIZE >
<Frame src = "3.html">
</FrameSet>
</FrameSet>
 BORDER ของ FRAME
<FrameSet Rows = "100, *” BORDER = 0>
<Frame src = "1.html” SCROLLING = NO NORESIZE>
<FrameSet Cols = "100, *">
<Frame src = "2.html” SCROLLING = NO
NORESIZE >
<Frame src = "3.html">
</FrameSet>
</FrameSet>
 การ LINK หรือการเชื่อมโยงข้อมูลใน FRAME
<FrameSet Rows = "100, *">
<Frame src = "F11.html" SCROLLING = NO NORESIZE
NAME = “HEAD” >
<FrameSet Cols = "100, *">
<Frame src = "F2.html" SCROLLING = NO NORESIZE
NAME = LEFT>
<Frame src = "F3.html” NAME =BODY>
</FrameSet>
</FrameSet>
 ดังนั้นที่ File F11.html จะต้อง
มีการกำาหนดเป้าหมายในการเชื่อมโยงดังนี้
<A HREF = "F4.html" TARGET = BODY>LINK TO FRAME 4</A>
 IMAGE MAP
วิธีการ MAP รูป
1. <MAP>…</MAP> เป็นคำาสั่งสำาหรับการกำาหรดจุดเริ่มต้นและสิ้นสุด
การแมปรูปภาพมีแอตทริบิวต์ NAME สำาหรับการกำาหนดชื่อชองการแมป

2. <AREA SHAPE = รูปทรง COORDS = x,y HREF = เป้าหมาย>

ประกอบด้วย 3 คำาสั่งที่สำาคัญดังนี้
* SHAPE = รูปทรง เป็นการกำาหนดรูปทรงของพื้นที่ที่ใช้กำาหนดให้เชื่อมโยง
มี 3 รูปแบบคือ RECT , CIRCLE , POLYGON
* COORDS = x,y กำาหนดจุโคออดิเนตสำาหรับรูปทรงแต่ละแบบ
* HREF = เป้าหมาย กำาหนดเป้าหมายในการเชื่อมโยงข้อมูล
 รูปแบบของการ IMAGE MAP
<MAP NAME = “NAME”>
<AREA SHAPE = METHOD COORDS = “POSITIONDATA”
HREF = “LINK” ALT = “COMMENT”>
…….. MORE OF SAME ………
</MAP>
จะเริ่มต้นด้วยเครือ่ งหมายเปิด <MAP...> และ </MAP> มีการตั้งขื่อ NAME
ไว้เพื่อการอ้างอิง สำาหรับการชี้เป้าหมายการเชื่อมโยงข้อมูลเมื่อตัวชี้เป้าหมาย
กระโดดไปยังจุดที่กำาหนดจามหลังเครื่องหมาย # ก็จะเริ่มทำางานตามคำาสั่งทันที
 รูปทรงจุดโคออดิเนต
* RECT รูปทรงสี่เหลี่ยม --------------> x1,y1,x2,y2
X1,Y1
เมื่อ x1,y1 เป็นจุดโคออดิเนตของมุมซ้ายบน และ
x2,y2 เป็นจุดโคออดิเนตของมุมขวาล่าง X2,Y2
* CIRCLE ---------------- > x,y,r
เมื่อ x,y เป็นจุดโคออดิเนตของจุดศูนย์กลางของวงกลม R
และ r เป็นรัศมีของวงกลม X1,Y1
* POLYGON รูปทรงสามเหลี่ยม x1,y1,x2,y2,x3,y3,… X1,Y1
เมื่อ x,y เป็นจุดโคออดิเนตของแต่ละจุด X2,Y2
X3,Y3
3. <IMG SRC = รูปภาพ USEMAP = #MAPNAME>
เป็นส่วนกำาหนดรูปภาพและชื่อการแมป

สำาหรับพื้นที่ที่ไม่ได้ถูกเลือก ให้กำาหนด
<AREA SHAPE = default HREF = NOHREF>
<IMG SRC=IMAGE.JPG USEMAP=#EXAMPLE BORDER=0>
<MAP NAME="EXAMPLE">
<AREA SHAPE="rect" ALT="F1.HTML" COORDS="0,0,81,60"
HREF="F1.HTML">
<AREA SHAPE="circle" ALT="F2.HTML" COORDS="65,87,26"
HREF="F2.HTML">
<AREA SHAPE="poly" ALT="F3.HTML"
COORDS="81,49,117,4,153,72,97,72,79,51"
HREF="F3.HTML">
<AREA SHAPE = defualt HREF = NOHREF>
</MAP>
 FORM
เป็นการสร้างการสื่อสารระหว่างผู้อ่าน Web Page กับ Server โดยเชื่อม
โยงระหว่าง Web Page กับ Server โดย โปรโตคอล HTTP เชื่อมกับ Server
โดย CGI (Common Gateway Interface)

Web Page CGI

SERVER

แสดงการเรียกใช้ CGI Script จาก CGI Server โดย Web Page

 รูปแบบของฟอร์ม
รูปแบบของ FORM มีดังนี้ (ในเครื่องหมาย [ ] เป็น Optional คือ ไม่มีก็ได้)
<FORM
[NAME = "FormName"]
[Target = "Windows Name"]
[Method= GET/POST]
[action = ""] >
<component…name = ...>
<component…name =…>
<component… name =…>
</Form>
Method คือ รูปแบบของวิธีการในการส่งข้อมูล โดย
* GET คือ การรับ/ส่ง ข้อมูลขนาดจำากัดจาก Server
ไม่เกิน 256 อักษร
* POST คือ การรับ/ส่ง ข้อมูลไม่จำากัดจาก Server

Action คือ ตำาแหน่ง หรือ URL ของ CGI Script ที่วางไว้ ที่ Server
ที่
กำาหนดใน Domain ต่าง ๆ

Target เป็น ชื่อของหน้าต่างที่จะส่งผลของ Action ไป

Component ของ Form มี Input, Select และ TextArea โดยที่ Input
มีองค์ประกอบ หรือ Type ดังนี้
* <Input type = text> เป็นการรับข้อมูลเข้าเป็น Text
* <Input type = Password> รับรหัสผ่าน ซึ่งเป็น Text เหมือนกัน
แต่ซ่อนไม่ให้มองเห็นด้วย เครือ่ งหมาย **** แทน
* <Input type = Radio> เป็นตัวเลือก 1 ข้อเท่านั้น โดยเครือ่ งหมายเป็น
รูปวงกลม
* <Input type = Checkbox> เป็นตัวเลือกตามต้องการโดยเครือ่ งหมาย
เป็นรูปสีเ่ หลีย่ มให้กา
* <Input type = Reset> เป็นการลบข้อมูลทั้งหมดใน Form
* <Input type = Submit> เป็นการส่งข้อมูลทั้งหมดใน Form ไปยัง Action
ที่เกี่ยวข้อง
รูปแบบของการกำาหนดกล่อง Input
*** Text and Password ***
<Input
Type = Text/Password
Name = "FieldName"
[Value = "Content"]
[Size = "Char"]
[Maxlength = "Max Char"]>
TEXT / PASSWORD เป็นข้อมูลชนิดตัวอักษรหรือข้อความ / แบบรหัสผ่าน
สามารถบรรจุข้อความได้เพียงบรรทัดเดียวเท่านั้น

NAME เป็นชื่อข้อมูลเข้า จะตั้งชื่ออย่างไรก็ได้ ขอให้เข้าใจง่าย

VALUE เป็นค่าเริ่มต้นทีก่ ำาหนดให้กับข้อมูลแต่ละตัว

SIZE = “ความกว้างของรายการข้อมูลนั้น ๆ ”

MAXLENGTH = “จำานวนตัวอักษรสูงสุดเท่าที่รายการข้อมูลนั้นจะรับได้”
 ตัวอย่าง
<H1>Example1</H1>
<FORM METHOD = POST>
NAME : <INPUT TYPE = TEXT NAME = TXTNAME SIZE=25>
<BR>
PASSWORD : <INPUT TYPE = PASSWORD NAME = PASSED
SIZE=5 MAXLENGTH = 5>
<BR>
E-MAIL : <INPUT TYPE = TEXT NAME = TXTMAIL SIZE=15>
</FORM>
*** CHECKBOX ***
<Input
type = "Checkbox"
name = "Box name"
[value = "Box Value"]
[Checked] >
Checked = การกำาหนด default ของการเลือก
 ตัวอย่าง
<FORM METHOD = POST>
Fruit: <BR>
Banana <Input Type= Checkbox name = f1 checked>
Papaya <Input Type= Checkbox name = f2 >
Orange <Input Type= Checkbox name = f3 >
</FORM>
 *** Radio ***
<Input
type = "Radio"
name = "Radio group name"
[value = "Radio Value"]
[Checked] >
Name ของ แต่ละ Radio button ต้องมีชื่อที่เหมือนกัน
 ตัวอย่าง
<H1>Example3</H1>
<FORM METHOD = POST>
SEX: <BR>
Male <Input Type= Radio name = sex checked>
Female <Input Type= Radio name = sex >
</FORM>
<FORM METHOD = POST>
NAME : <INPUT TYPE = TEXT NAME = TXTNAME SIZE=25><BR>
PASSWORD : <INPUT TYPE = PASSWORD NAME = PASSED SIZE=5
MAXLENGTH = 5><BR>
E-MAIL : <INPUT TYPE = TEXT NAME = TXTMAIL SIZE=15><BR>
Fruit: <BR>
Banana <Input Type= Checkbox name = f1 checked>
Papaya <Input Type= Checkbox name = f2 >
Orange <Input Type= Checkbox name = f3 >
<BR>SEX: <BR>
Male <Input Type= Radio name = sex checked>
Female <Input Type= Radio name = sex ><BR>
<INPUT TYPE = SUBMIT VALUE = SEND>
<INPUT TYPE = RESET VALUE = CANCEL>
</FORM>
กล่องเลือกข้อความ SELECT / OPTION Box
<FORM>
<SELECT
NAME = "myOption"
[SIZE = "number"]
[Multiple]>
<Option [SELECTED] [VALUE="string"]>Item1…
[<Option [SELECTED] [VALUE="string"]>Item N]
</SELECT>
</FORM>
* Option เป็นตัวเลือกที่ต้องการให้อยู่ในรายการ
* Size เป็นขนาดของข้อมูลที่จะอยู่ในหน้าต่าง ถ้าไม่กำาหนดจะเป็น
การแสดงข้อมูลทัง้ หมด
* <SELECT Multiple> เป็นความสามารถเลือกได้หลายคำาตอบ
โดยจะสร้างเป็น Array โดยอัตโนมัติ ผูใ้ ช้สามารถเลือกโดยการใช้
ปุ่ม Ctrl ค้างไว้หรือ กด Shift ก็ได้
* <Option SELECT> xxx เป็น ข้อมูลในกล่องเลือกทีถ่ ูกเลือกไว้ล่วงหน้า
(High light)
 ตัวอย่าง
<FORM METHOD = POST>
My favorite fruit
<SELECT NAME = My Fruit Multiple SIZE = 5>
<Option SELECTED>Papaya
<Option>Pine apple
<Option>Apple
<Option>Mango
<Option>Orange
<Option>Durian
<Option>Grape
</SELECT>
</FORM>
 *** TEXTAREA ***
<TEXTAREA
Name = "fieldName"
Rows = "RowsCount"
Cols = "Columns Count"
</TEXT AREA>
 ตัวอย่าง
<FORM METHOD = POST>
Your Address <br>
<TEXTAREA
Name = "my address"
Rows = "4"
Cols = "20">
</TEXTAREA>
</FORM>
เนื้อหาเพิ่มเติม

HTML
 แสดงเฟรมแบบ INLINE
<IFRAME SRC = TEST28.HTML NAME = "ABOUT"></IFRAME>
<P>
<A HREF = TEST26.HTML TARGET = ABOUT>การสร้างตาราง</A>
<A HREF = TEST27.HTML TARGET = ABOUT>การตีเส้นกรอบ</A>
<A HREF = TEST28.HTML TARGET = ABOUT>การขยายเส้นกรอบ</A>
 จัดกลุ่มฟิลด์ข้อมูลในแบบฟอร์ม
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD><FIELDSET>
<LEGEND>Choose a colour</LEGEND>
Male <Input Type= Radio name = sex checked>
Female <Input Type= Radio name = sex >
</FIELDSET>
</TR>
</TABLE>
 การแสดงข้อความ
1. <SUB> …. </SUB> แสดงข้อความแบบตัวพ่วงท้าย
เช่น H<SUB>2</SUB>O -------> H2O
2. <SUP> … </SUP> แสดงข้อความแบบตัวยก
เช่น X<SUP>2</SUB> ---------> X 2
 การตรึงพื้นหลังให้อยู่กับที่
ใช้กบั Internet Explorer
ใช้รว่ มกับคำาสั่ง <BODY>

<BODY Background = bg_res.jpg BGPROPERTIES = FIXED>