ลำดับตอนที่ #2
คืนค่าการตั้งค่าทั้งหมด
คุณแน่ใจว่าต้องการคืนค่าการตั้งค่าทั้งหมด ?
ลำดับตอนที่ #2 : เรียนรู้ คำสั่งภาษา Html 2
| แบ่งพื้นที่จอภาพ | |||||||||
| <FRAMESET COLS or ROWS = "80%,*" > <FRAME SRC = "URL" หรือ ไฟล์รูปภาพ > <FRAME SRC = "URL" หรือ ไฟล์รูปภาพ > </FRAMESET> แบ่งจอภาพในแนวตั้ง <FRAMESET COLS = "80%,*" > <FRAME SRC = "main.html" > <FRAME SRC = "menu.gif" > </FRAMESET> คำอธิบาย แบ่งหน้าจอเป็น 2 ส่วน ในแนวตั้ง ส่วนทางซ้ายมีพื้นที่ 80% ของหน้าจอทั้งหมด ส่วนทางขวาคือพื้นที่ที่เหลือ (20%) จอทางขวาจะมีรูปภาพชื่อ menu.gif แบ่งจอภาพในแนวนอน <FRAMESET ROWS = "80%,*" > <FRAME SRC = "main.html" > <FRAME SRC = "menu.gif" > </FRAMESET> คำอธิบาย แบ่งหน้าจอเป็น 2 ส่วน ในแนวนอน ด้านบนพื้นที่ 20% ส่วนด้านล่างมีพื้นที่ 80% แบ่งจอภาพในแนวตั้งและแนวนอน <FRAMESET ROWS = "15%,*" > <FRAME SRC = "top.html" > <FRAMESET COLS = "20%,80%" > <FRAME SRC = "left.html" > <FRAME SRC = "right.html" > </FRAMESET> </FRAMESET> คำอธิบาย แบ่งหน้าจอทั้งหมดเป็น 3 ส่วน ด้านบนพื้นที่ 15% ส่วนด้านล่างมีพื้นที่ 85% ในพื้นที่ด้านล่างแบ่งออกเป็น 2 ส่วนด้านซ้าย 20% ด้านขวา 80% (เหมือนกับเวปเพจที่ท่านเห็นอยู่นี้) | การแบ่งพื้นที่จอภาพ สามารถแบ่งได้ทั้งแถวตั้ง และแนวนอน สามารถจะแบ่งเท่าไหร่ก็ได้ ขึ้นกับผู้เขียน แต่อย่างไรก็ตาม ควรมีการกำหนดสัดส่วนให้ตรงกับข้อมูล หรือรูปภาพที่นำมาลงในเวปด้วย... <FRAMESET> เป็นคำสั่งเริ่มต้นการแบ่งหน้าจอ และปิดท้ายด้วย </FRAMESET> คำสั่งนี้ จะมาแทนที่คำสั่ง <BODY> <FRAME SRC > เป็นคำสั่งย่อยของ FRAMESET เพื่อกำหนดการแสดงผลข้อมูลว่า จะแสดงเป็น HTML อีกไฟล์ หรือจะให้แสดงเป็นรูปภาพก็ได้ จากตัวอย่างด้านซ้าย เรากำหนดขนาดของจอภาพเป็นเปอร์เซ็นต์ 80%,* (เครื่องหมาย * หมายถึง ขนาดขอจอภาพที่เหลือ) นอกจากนี้เรายังสามารถกำหนดเป็น pixel ได้ด้วย เช่น 500,100 เป็นต้น คำสั่งเสริมเพิ่มเติม กำหนดตำแหน่งข้อความตามแนวนอน align = "left" align = "center" align = "right" กำหนดตำแหน่งข้อความตามแนวตั้ง valign=top valign = "middle" valign = "bottom" รูปแบบคำสั่ง <TR ALIGN= "CENTER" > หรือ <TR VALIGN= "TOP" > ตั้งชื่อพื้นที่ หลังจากมีการแบ่งพื้นที่จอภาพแล้ว อาจจำเป็นที่เราต้อง ตั้งชื่อพื้นที่ เนื่องจากการสร้างจุดลิงค์เพื่อให้แสดง ในพื้นที่ที่ต้องการ ดังตัวอย่างนี้ <FRAME SRC = "right.html" name = "show" > สร้างลิงค์ให้แสดงในพื้นที่ที่มีชื่อว่า show <a href = "page2.html" target = "show"> | ||||||||
| สีกับตาราง | |||||||||
| สีฉากหลังของตาราง <TABLE width="50%" bgcolor = "red" > <CAPTION> สีฉากหลังของตาราง </CAPTION> <TR> <TH> หัวเรื่อง 1 </TH> <TH> หัวเรื่อง 2 </TH> </TR> <TR> <TD> ข้อมูล 1 </TD> <TD> ข้อมูล 2 </TD> </TR> </TABLE> ผลลัพธ์ที่ได้
กำหนดสีแต่ละช่องในตาราง <TABLE width="50%"> <TR> <TH bgcolor = "brown" > หัวเรื่อง 1 </TH> <TH bgcolor = "white"> หัวเรื่อง 2 </TH> </TR> <TR> <TD bgcolor = "green" > ข้อมูล 1 </TD> <TD bgcolor = "blue" > ข้อมูล 2 </TD> </TR> </TABLE> ผลลัพธ์ที่ได้
คำอธิบาย ถ้าต้องการใส่สีกรอบของตาราง สามารถเพิ่มคำ ดังนี้ <TABLE bgcolor = "red"> | เราสามารถกำหนดสีของ background ของตารางได้ โดยสามารถกำหนดได้ทั้งตาราง หรือ กำหนดเป็นแต่ละช่องได้ คำสั่งเสริมเพิ่มเติม - bgcolor เป็นคำสั่งในการกำหนดสีในตาราง เป็นคำสั่งเสริมของคำสั่ง <Table> และสามารถใช้งานร่วมกับคำสั่ง <TH> หรือ <TD> ได้ด้วย (ดูตัวอย่างประกอบ) การกำหนดสีสามารถกำหนดเป็นรหัสสีได้ ซึ่งสามารถตรวจสอบได้จาก ตารางสีตัวอย่างเช่น <TD bgcolor = " #3232CD" > หมายถึงสี Medium Bule เป็นต้น | ||||||||
การสร้างแบบฟอร์ม<FORM METHOD = "post/get"
ACTION = "URL">
...ข้อมูลของฟอร์ม...
</FORM>
ข้อมูลของฟอร์ม คือส่วนที่สามารถเพิ่มคำสั่งได้หลายรูปแบบ ดูหัวข้อต่อไปการสร้างแบบฟอร์ม สามารถนำไปประยุกต์ใช้ได้หลายๆอย่าง เช่น การสร้างแบบสอบถาม แบบฟอร์มแสดงความคิดเห็น เป็นต้น ซึ่งการสร้างฟอร์มมักจะต้องใช้คำสั่งที่เรียกว่า "CGI" หรือ javascript ช่วยในการรับและส่งข้อมูล ในที่นี้ขอละไว้ก่อน แต่จะแนะนำ การส่งฟอร์ม ที่ใช้คำสั่งให้ลิงค์กลับมายังอีเมล์ของเรา ผลลัพธ์ที่ได้อาจไม่สวยงามนัก.. แต่ก็พอใช้ได้ (ดูข้อถัดไป)
<FORM> คือคำสังเริ่มการใช้ฟอร์ม และปิดท้ายด้วย </FORM> ส่วนคำสั่ง "METHOD" เป็นคำสั่งที่บอกว่าจะรับ "GET" หรือส่งข้อมูล "POST: ไปที่ไหน โดยมีคำสั่ง "ACTION" เป็นตัวกำหนด
| รูปแบบของฟอร์มประเภทต่างๆ | |
| ประเภทกรอบป้อนข้อมูล <FORM> <TEXTAREA NAME = "comment" ROWS="5" COLS="60"> </TEXTAREA> </FORM> ผลลัพธ์ที่ได้ ประเภทกรอบแบบสอบถาม <FORM> Name : <INPUT TYPE='TEXT' NAME = "YOURNAME" size="15" > PHONE : <INPUT TYPE='TEXT' NAME = "PHONE" size="15" > </FORM> ผลลัพธ์ที่ได้ ประเภทกรอบ PASSWORD <FORM> YOUR Password : <INPUT TYPE='PASSWORD' NAME = "CODE" size="15" > </FORM> ผลลัพธ์ที่ได้ ลองกรอกข้อมูลในกรอบดู! ประเภท Check Box <FORM> <INPUT TYPE='CHECKBOX' NAME = "ONE" VALUE ="value1" > Answer 1 <INPUT TYPE='CHECKBOX' NAME = "TWO" value="value2" > Answer 2 </FORM> ผลลัพธ์ที่ได้ ประเภท Radio <FORM> <INPUT TYPE='RADIO' NAME = "ONE" VALUE ="value1" > Answer 1 <INPUT TYPE='RADIO' NAME = "TWO" value="value2" > Answer 2 </FORM> ผลลัพธ์ที่ได้ ประเภทตัวเลือก <FORM> <SELECT name= "ICECREAM"> <OPTION SELECTED value="VANI"> Vanilla <OPTION value="CHOC" > Chocolate <OPTION value="COFF" > Coffee <OPTION value="STRA" > Strawberry </SELECT> </FORM> ผลลัพธ์ที่ได้ ประเภท Submit & Reset <FORM> ยืนยันการส่งข้อมูล <INPUT TYPE='SUBMIT' VALUE ="Send"> <INPUT TYPE='RESET' VALUE ="Reset"> </FORM> ผลลัพธ์ที่ได้ Sumbit เป็นคำสั่งในการส่งข้อมูล Reset เป็นคำสั่งในการเคลียร์ข้อมูล | รูปแบบการสร้างฟอร์ม มีหลายรูปแบบ เราสามารถนำแต่ละรูปแบบผสมผสานกันได้ เช่น การผสมระหว่าง รูปแบบกรอบป้อนข้อมูล กับ กรอบแบบสอบถาม เป็นต้น อย่างที่กล่าวข้างต้น การนำฟอร์มมาใช้ใน เวปเพจจะต้องมีการนำโปรแกรมช่วยในการส่งข้อมูล ซึ่งอาจเป็น ปัญหายุ่งยากสำหรับมือใหม่ ดังนั้นขอยกตัวอย่างการสร้างฟอร์ม แล้วให้ส่งกลับมายังอีเมลของเรา ดังนี้ ตัวอย่างการสร้างฟอร์มกลับมาอีเมลของเรา <FORM METHOD = "post" ACTION = "mailto:sskulrat@yahoo.com"> Name : <INPUT TYPE='TEXT' NAME = "YOURNAME" size="15"> PHONE : <INPUT TYPE='TEXT' NAME = "PHONE" size="15"> <INPUT TYPE='SUBMIT' VALUE ="Send"> <INPUT TYPE='RESET' VALUE ="Reset"> </FORM> ผลลัพธ์ที่ได้ ขอเชิญลองกรอกข้อมูล แล้วกดปุ่ม Reset ดู |
เก็บเข้าคอลเล็กชัน
ความคิดเห็น