วันเสาร์ที่ 1 กันยายน พ.ศ. 2555

โครงสร้างและคำสั่ง HTML (2)


การเรียงรายการแบบใช้รูปภาพกำกับ
          จากวิธีการเรียงรายการย่อยแบบใช้สัญลักษณ์กำกับที่ได้กล่าวในหัวข้อที่ผ่านมา จะเห็นว่าสัญลักษณ์ที่มีให้ใช้นั้นค่อนข้างจะจำกัด ทำให้เว็บเพจที่ได้ดูไม่สวยงามและน่าสนใจ เท่าใดนัก ซึ่งถ้านักเขียนเว็บเพจมีรูปหรือสัญลักษณ์ที่แปลกไปและมีขนาดเล็ก ๆ ก็สามารถจะนำมาใช้ทำเป็นสัญลักษณ์กำกับได้ โดยทั้งนี้ต้องนำแท็ก 
< IMG > มาใช้ผสมกับแท็ก < UL >< ul >< IMG SRC= "ชื่อไฟล์รูปนามสกุล .jpg หรือ .gif" >< /ul >

แท็ก < MENU > และ < DIR >แท็ก < MEUN > และ < DIR >
          เป็นแท็กที่ใช้ทำรายการที่ใช้สัญลักษณ์กำกับหน้ารายการย่อย วิธีการใช้งานและผลที่ได้รับไม่ต่างอะไรไปจากแท็ก < UL > มากนัก ซึ่งบางบราวเซอร์ก็มองแท็ก 2 ตัวนี้เหมือนกับแท็ก 
< UL >< MENU >< LH >ข้อความ< LI >< A HREF="ชื่อไฟล์ .html" >ข้อความ< /A >< /MENU >ใน HTML 4.0 ได้มีการประกาศว่าแท็ก < MENU > และ < DIR > เป็นแท็กที่ถูกยกเลิก เพราะให้ผลไม่แตกต่างไปจากการใช้แท็ก < UL > เลยแต่การเปลี่ยนแปลงที่สำคัญใน HTML 4.0 คือมีการเพิ่มแอตทริบิวต์ STYLE ให้ใช้ในแท็กที่เกี่ยวข้องกับรายการย่อยได้ และยังคงสามารถใช้แอตทริบิวต์ STYLE นี้เพื่อกำหนดรูปแบบเลขที่กำกับแทนการ แอตทริบิวต์ TYPE ได้อีกด้วย< OL STYLE="list-style-type:1 ; lis-style-position:7 >

การสร้างตารางแท็ก < TABLE > 
     ใช้สร้างตาราง ซึ่งในเว็บเพจส่วนใหญ่หรือเกือบทุกเว็บเพจมักใช้แท็กนี้กันทั้งนั้น ด้วยเหตุผลที่ว่าตารางสามารถประยุกต์ใช้งานได้หลาย แบบตั้งแต่ใช้เป็นตารางธรรมดาเพื่อแสดงค่าตัวเลขทางสถิติหรือตัวเลขที่มีความสัมพันธ์กัน ซึ่งการใช้ตารางนำเสนอข้อมูลแบบนี้ทำให้เห็นการเปรียบเทียบ ที่ชัดเจน ต่อมามีการประยุกต์ใช้ตารางกับข้อมูลประเภทอื่นๆ เช่น ข้อความ หรือรูปภาพเพื่อช่วยออกแบบโฮมเพจ (คือเว็บเพจแรกที่จะแสดงให้เห็นเมื่อเข้าสู่ เซิร์ฟเวอร์นั้น) หรือเว็บเพจทั่วๆ ไปด้วย จนบางครั้งดูไม่ออกว่าเป็นตาราง ในบทนี้จะค่อยๆ อธิบายจากการทำตารางง่ายๆ ไปจนถึงการใช้ตารางช่วยออกแบบเว็บเพจ

โครงสร้างของตารางโครงสร้างตารางโดยทั่วไปจะประกอบไปด้วยแถวและคอลัมน์ โดยช่องข้อมูลที่อยู่ในแนวนอนเดียวกันก็คือแถว และช่องข้อมูลที่อยู่ตรงกันในแนวตั้งก็คือ คอลัมน์นั่นเอง< TABLE >< CAPTION >.........< /CAPTION >< TR >< TH >.........< /TH >< TH >.........< /TH >< /TR >< TR >< TD >.........< /TD >< TD >.........< /TD >< /TR >< TR >< TD >.........< /TD >< TD >.........< /TD >< /TR >< TABLE >

  • < TABLE > กำหนดการสร้างตาราง และมีคำสั่งปิดคือ < /TABLE >

  • < CAPTION > เป็นการกำหนดคำ หรือข้อความอธิบายตาราง และมีคำสั่งปิดคือ < /CAPTION >

  • < TR > (Table Row) เป็นการกำหนดแถวของตาราง และมีคำสั่งปิดคือ < /TR >

  • < TH > (Table Head) เป็นการกำหนดหัวเรื่องในคอลัมน์ และมีคำสั่งปิดคือ < /TH >

  • < TD > (Table Data) เป็นการกำหนดข้อมูลในตาราง และมีคำสั่งปิดคือ < /TD >


  • การกำหนดเส้นของตาราง
         โดยทั่วไปแล้วข้อมูลในตารางจะถูกแบ่งออกเป็นส่วน ๆ อย่างชัดเจนโดยมีเส้นกรอบล้อมรอบแต่ละช่องข้อมูล แต่บางครั้งเพื่อความสวยงามแล้ว นักออกแบบเว็บเพจอาจเลือกที่จะไม่แสดงเส้นกรอบที่ทำให้รกหูรกตานั้นได้ โดยเฉพาะในกรณีที่นักออกแบบให้แท็ก < TABLE > ในการตกแต่งเว็บเพจ การกำหนดว่าจะแสดงหรือไม่แสดงกรอบทำได้โดยใช้แอตทริบิวต์ BORDER และ BORDERCOLOR
    < TABLE BORDER= "ค่าตัวเลข" BORDERCOLOR="#RGB หรือชื่อสี " >
    < CAPTION >.........< /CAPTION >
    < TR >
    < TH >.........< /TH >
    < TH >.........< /TH >
    < /TR >
    < TR >
    < TD >.........< /TD >
    < TD >.........< /TD >
    < /TR >< TR >
    < TD >.........< /TD >
     < TD >.........< /TD >
    < /TR >< TABLE >

    กำหนดความกว้างและความสูงของตาราง
         การใช้แอตทริบิวต์ HEIGHT และ WIDTH เพื่อกำหนดขนาดของช่องข้อมูลและตำแหน่งของข้อมูลในแต่ละช่อง
    < TABLE WIDTH="ความกว้างของตาราง (เป็นพิกเซลหรือเปอร์เซ็น)" HEIGHT="ความสูงของตาราง (เป็นพิกเซลหรือเปอร์เซ็น)">
    < CAPTION >.........< /CAPTION >
    < TR >
    < TH>.........< /TH >
    < TH>.........< /TH >
    < /TR >< TR >
    < TD>.........< /TD >
    < TD>.........< /TD >
    < /TR >< TR >
    < TD>.........< /TD >
    < TD>.........< /TD >
    < /TR >
    < TABLE >

    การกำหนดระยะเว้นขอบภายในเซลล์ข้อมูลในตาราง
         ในการกำหนดระยะเว้นขอบภายใน (padding) ของเซลข้อมูลในตาราง จะมีผลต่อการแสดงผลในโปรแกรมเว็บบราวเซอร์ คือพื้นที่ว่างที่แสดงผลข้อมูลในแต่ละเซลแต่ละ คอลัมน์นั้นมีพื้นที่เท่ากันตามที่ค่าตัวเลขที่กำหนดไว้ (ค่าที่กำหนดสามารถกำหนดเป็นพิกเซลและเปอร์เซ็น) และข้อมูลที่เราต้องการแสดงผลในตารางแสดงตรงกึ่งกลาง ของเซลหรือของตาราง
    < TABLE CELLPADDING="ระยะขอบภายในเซลข้อมูลในตาราง (พิกเซลหรือเปอร์เซ็น)">
    < CAPTION >.........< /CAPTION >
    < TR >
    < TH >.........< /TH >
    < TH >.........< /TH >
    < /TR >
    < TR >
    < TD >.........< /TD >
    < TD >.........< /TD >
    < /TR >
    < TR >
    < TD >.........< /TD >
    < TD >.........< /TD >
    < /TR >
    < TABLE >

    การสร้างฟอร์ม
         โดยทั่วไปบนอินเทอร์เน็ต เรามักจะพบแบบฟอร์มสอบถามแบบต่างๆ ไม่ว่าจะเป็นแบบฟอร์มสั่งซื้อของ แบบฟอร์มการจ่ายเงิน เมื่อซื้อสินค้า หรือแบบฟอร์มการสอบถามความคิดเห็น การลงทะเบียนเข้าเว็บเพจ เพื่อค้นหาข้อมูลในเว็บเพจนั้น รวมถึงแบบฟอร์มสมุดผู้เข้าเยี่ยมชมเว็บเพจต่างๆ โดยทั้วไปแบบฟอร์ม จะมีการเติมข้อความลงในช่องที่กำหนดไว้ หรือการเลือกตัวเลือกในหัวข้อต่างๆ สิ่งเหล่านี้เราจะเรียกว่า ฟอร์ม (FORM) รูปแบบฟอร์มสอบถามนั้น จะมีลักษณะการจัดเรียงข้อมูลอย่างเป็นระเบียบประเภทของคำสั่งในการสร้างขอบเขตของแบบฟอร์มสอบถามแบ่งออกเป็น 3 ปรเภท

  • < TEXTAREA > เป็นคำสั่งที่ใช้สำหรับกรอบป้อนข้อมูล สามารถป้อนข้อมูลได้หลายบรรทัด

  • < SELECT > เป็นคำสั่งที่ใช้สำหรับสร้างตัวเลือกที่อยู่ในกรอบตัวเลือก

  • < INPUT > เป็นคำสั่งที่ใช้ในการสร้างกรอบป้อนข้อความบรรทัดเดียว ปุ่มแบบวิทยุ (Radio button) ช่องทำเครื่องหมาย (Check box) ปุ่มยืนยันข้อมูลที่ป้อน (Submit button) ปุ่มยกเลิกข้อมูลที่ป้อน (Reset button)


  • คำสั่งในการสร้างแบบฟอร์ม
        < FORM METHOD="POST/GET" ACTION="URL" >..........< /FORM >

  • METHOD เป็นรูปแบบของวิธีในการส่งข้อมูล ซึ่งจะประกอบไปด้วย

    • GET เป็นตัวรับ - ส่ง ข้อมูลขนาดจำกัดจาก Server ไม่เกิน 256 ตัวอักษร
    • POST เป็นตัวรับ - ส่ง ข้อมูลไม่จำกัดจาก Server
  • ACTION คือตำแหน่งหรือ URL ของ CGI Script ที่วางไว้ที่ Server ที่กำหนดใน Domain ต่างๆ หรือใช้ค่า mailto: ก็ได้

  • การสร้างกรอบป้อนข้อความแบบหลายบรรทัด
    < FORM >
    < TEXTAREA NAME="ชื่อของข้อมูล TEXTAREA" ROWS="ค่าตัวเลข" COLS="ค่าตัวเลข" >
    ....ข้อมูลที่ต้องการแสดงผลในกรอบป้อนข้อมูล......
     < /TEXTAREA >
    < /FORM >

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

  • COLS เป็นการกำหนดจำนวนคอลัมน์สูงสุดในการป้อนข้อมูลในแต่ละแถว ซึ่งจำนวนคอลัมน์ที่เหมาะสมที่สุดจะมีค่าตัวเลขเท่ากับ 80 Characters



  • ข้อสังเกต 
         ค่าตัวเลขของ ROWS นั้นจะเป็นการกำหนดความสูงของกรอบป้อนข้อมูล และค่าตัวเลขของ COLS นั้นและเป็นการกำหนดความกว้างของกรอบป้อนข้อมูลการสร้างตัวเลือก< FORM >< SELECT NAME="ชื่อของข้อมูลที่ต้องการสร้างตัวเลือก " SIZE="ค่าตัวเลข / MULTIPLE" >< OPTION SELCETED VALUE=ชื่อย่อของตัวเลือก" >ตัวเลือกที่ต้องการแสดง< OPTION VALUE=ชื่อย่อของตัวเลือก" >ตัวเลือกที่ต้องการแสดง< OPTION VALUE=ชื่อย่อของตัวเลือก" >ตัวเลือกที่ต้องการแสดง< /SELECT >< /FORM >ในคำสั่งการสร้างตัวเลือกนั้น การแสดงผลตัวเลือกนั้นจะมีการกำหนดคุณสมบัติ โดยใช้คุณสมบัติ SIZE เป็นตัวกำหนดซึ่งสามารถกำหนดได้ 2 แบบคือ

  • SIZE="ค่าตัวเลข" เป็นการกำหนดการแสดงผลตัวเลือกตามค่าตัวเลขที่ได้ระบุไป

  • SIZE="MULTIPLE" เป็นการกำหนดการแสดงผลตัวเลือกทั้งหมดที่มีอยู่ โดยจะแสดงเรียงต่อกันตามบรรทัดในแต่ละตัวเลือก < OPTION > การกำหนดกรอบป้อนข้อมูลแบบ TEXT BOX

  • < FORM >
    < INPUT TYPE="TEXT" NAME="ชื่อย่อของข้อความ" SIZE="ค่าตัวเลข" MAXLENGTH="ค่าตัวเลข" >< /FORM >

  • SIZE เป็นการกำหนดความกว้างของ Textbox


  • MAXLENGTH เป็นการกำหนดค่าที่จะแสดงผล Textbox


  • การแสดงผลแบบ PASSWORD
        คำสั่งการแสดงผลแบบ PASSWORD จะเป็นคำสั่งที่ใช้ในการรักษาความปลอดภัยของข้อมูล โดยการแสดงผลจะเหมือนกับการแสดงผลแบบ TEXTBOX คือจะเป็นคำสั่งที่มีลักษณะการแสดงผลแบบบรรทัดเดียว แต่จะแตกต่างตรงที่การป้อนข้อมูล ถ้าเป็นการแสดงผลแบบ Textbox นั้นจะเป็นตัวอักษร แต่ถ้าเป็นการแสดงผลแบบ PASSWORD จะเป็นดอกจัน (*)
    < FORM >
         < INPUT TYPE="PASSWORD" NAME="ชื่อย่อของข้อความ" SIZE="ค่าตัวเลข" MAXLENGTH="ค่าตัวเลข" >
    < /FORM >

  • SIZE เป็นการกำหนดความกว้างของ Textbox

  • MAXLENGTH เป็นการกำหนดค่าที่จะแสดงผล Textbox

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


  • การแสดงผลแบบ CHECKBOX
        ในการกำหนดการแสดงผลแบบ CHECKBOX จะแสดงผลตัวเลือกทั้งหมดที่เรากำหนดไว้ โดยจะแสดงช่องทำเครื่องหมายรูปสี่เหลี่ยมอยู่หน้าตัวเลือก เพื่อให้คลิกตัวเลือกที่ต้องการในการแสดงผลแบบ CHECKBOX จะมีคุณสมบัติอยู่ตัวหนึ่งที่ชื่อว่า CHECKED จะเป็นตัวกำหนดค่ามาตรฐานในการแสดงผลที่มีลักษณะการแสดงผลเป็นเครื่องหมายถูกในช่องสี่เหลี่ยมที่เป็นตัวเลือก ถ้าเราต้องการยกเลิกก็ทำการคลิกที่ช่องตัวเลือกนั้นเครื่องหมายถูกก็จะหายไป< FORM >< INPUT TYPE="CHECKBOX" NAME="ชื่อย่อของข้อความ" VALUE="ชื่อย่อของข้อมูลที่แสดงผล" CHECKED >< /FORM >

    การแสดงผลแบบ RADIO
         ในการกำหนดการแสดงผลแบบ RADIO จะแสดงผลตัวเลือกทั้งหมดที่เรากำหนดไว้ โดยจะแสดงช่องทำเครื่องหมายเป็นรูปวงกลม ในการแสดงผลแบบ RADIO จะมีคุณสมบัติอยู่ตัวหนึ่งที่ชื่อว่า CHECKED จะเป็นตัวกำหนดค่ามาตรฐานในการแสดงผล ที่มีลักษณะการแสดงผลเป็นเครื่องหมายถูก ในช่องสี่เหลี่ยมที่เป็นตัวเลือก ถ้าเราต้องการยกเลิกก็ทำการคลิกที่ช่องตัวเลือกนั้นเครื่องหมายถูกก็จะหายไป< FORM >< INPUT TYPE="RADIO" NAME="ชื่อย่อของข้อความ" VALUE="ชื่อย่อของข้อมูลที่แสดงผล" CHECKED> < /FORM >

    ข้อสังเกต
         การกำหนดค่า VALUE และ NAME ในการแสดงตัวเลือกแบบ CHECKBOX และการแสดงตัวเลือกแบบ RADIO นั้นมีข้อสังเกตได้ว่า ถ้าเป็นการตัวเลือกแบบ CHECKBOX นั้น VALUE จะกำหนดค่าเท่ากัน แต่ NAME จะกำหนดค่าต่างกัน ในทางกับกันการแสดงตัวเลือกแบบ RADIO นั้นจะกำหนดค่า VALUE ให้มีค่าต่างกันส่วนค่าของ NAME นั้นจะกำหนดค่าให้เท่ากันการส่งแบบฟอร์มแบบ SUBMITคำสั่งนี้จะทำหน้าที่ส่งข้อมูลแบบฟอร์มสอบถาม ไปยังเซอร์ฟเวอร์ของเราเพื่อทำการประมวลผลข้อมูล การแสดงผลในคำสั่งนี้จะแสดงผลเป็นลักษณะปุ่ม โดยมีการกำหนดค่าที่จะแสดงบนปุ่มที่ VALUE< FORM >< INPUT TYPE="SUBMIT" NAME="ชื่อย่อของข้อความ" VALUE="ค่าที่จะแสดงบนปุ่ม" >< /FORM >

    การส่งแบบฟอร์มแบบ RESET
         คำสั่งจะทำหน้าที่ในการยกเลิกข้อมูลต่าว ๆ ที่ทำการป้อนลงในแบบฟอร์ม คือ เป็นคำสั่งที่ใช้ในการลบข้อมูลในแบบฟอร์มทั้งหมด เพื่อทำการป้อนข้อมูลลงในแบบฟอร์มใหม่ การแสดงผลในคำสั่งนี้จะแสดงผลเป็นลักษณะปุ่ม โดยมีการกำหนดค่าที่จะแสดงบนปุ่มที่ VALUE < FORM >< INPUT TYPE="RESET" NAME="ชื่อย่อของข้อความ" VALUE="ค่าที่จะแสดงบนปุ่ม">< /FORM >

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

  • < FIELDSET > เป็นการกำหนดการจัดกลุ่มฟิลด์ป้อนข้อมูลในแบบฟอร์ม

  • < LEGEND > เป็นการแสดงคำอธิบายกลุ่มฟิลด์ป้อนข้อมูลในแบบฟอร์ม



  • การแบ่งพื้นที่ของจอภาพ
         ในระยะแรกที่มีในการใช้งานเว็บเพจ เราจะพบว่าการทำงานทุกอย่างจะอยู่บนจอภาพเพียงจอเดียวเท่านั้น แต่มาตอนนี้เมื่อเราเข้าไปค้นหาข้อมูลในเว็บเพจต่างๆ ในปัจจุบัน เราก็จะเห็นได้ว่าหลายเว็บเพจๆ จะปรากฎมีการแบ่งส่วนบนจอภาพออกเป็นส่วนๆ โดยที่แต่ละส่วนต่างก็มีข้อมูลแยกแตกต่างกันไป ซึ่งเราจะเรียกการแบ่งหน้าจอภาพออกเป็นส่วนๆ ว่า เฟรม (FRAME) เฟรมนับได้ว่าเป็นรูปแบบการจัดพื้นที่การใช้งานบนหน้าจอใหม่ โดยพื้นที่ในแต่ละส่วนนั้นจะมีข้อมูลแยกเป็นของตัวเอง โดยที่จะมีเนื้อหาที่เกี่ยวข้องกันหรือไม่เกี่ยวข้องกันก็ได้ ขึ้นอยู่กับการออกแบบเพื่อให้ใช้งานแตกต่างกันไป การแบ่งจอภาพออกเป็นส่วนๆ สามารถนำพื้นที่ทั้งหมดของจอภาพให้ถูกใช้งานอย่างเต็มที่ ทั้งนี้เพราะในการใช้เฟรมจะมีการเรียกไฟล์ HTML ขึ้นมาพร้อมๆ กันหลายไฟล์ ทำให้ประหยัดเวลาในการค้นหาข้อมูล

    คำสั่งในการแบ่งจอภาพ
    < HTML >
    < HEAD >
    < TITLE >.........< /TITLE >
    < /HEAD >
    < FRAMESET >< /FRAMESET >
    < /HTML >

    ข้อสังเกตจะเห็นได้ว่าในการกำหนดการแบ่งหน้าจอภาพนั้นจะกำหนดคำสั่ง 
    < FRAMESET >.........< /FRAMESET >
     แทนที่คำสั่ง 
    < BODY >.........< /BODY > 
    เพื่อเป็นตัวกำหนดการแสดงผลในโปรแกรมเว็บบราวเซอร์การ

    แบ่งพื้นที่ของจอภาพตามแนวนอน
    < FRAMESET ROWS="พิกเซล/เปอร์เซ็นต์/*" >
    < FRAME SRC="ไฟล์ที่เราต้องการให้แสดงผลในเฟรม หรือ URL" >
    < FRAME SRC="ไฟล์ที่เราต้องการให้แสดงผลในเฟรม หรือ URL" >
    < /FRAMESET >

        คำสั่งนี้จะเป็นการกำหนดหน้าจอภาพตามแนวนอน โดยมีคำสั่ง เป็นตัวกำหนดให้แสดงผลไฟล์ HTML หรือรูปภาพ การกำหนดเส้นแบ่งเฟรมและการกำหนดสีของเส้นแบ่งเฟรมโดยปกติแล้วการแบ่งหน้าจอภาพเป็นส่วน ๆ นั้นจะมีเส้นแบ่งเฟรมเกิดขึ้น เราจึงสามารถกำหนดสีเส้น ความหนาของเส้น รวมถึงการกำหนดไม่ให้มีเส้นคั่น ซึ่งปัจจุบันนี้เว็บเพจจะนิยมไม่มีเส้นกรอบเพื่อให้เกิดความสวยงามกับเว็บเพจ ในการกำหนดเส้นแบ่งเฟรมนั้นถ้าเรากำหนด FRAMEBORDER="yes" แล้ว จะปรากฎเส้นแบ่งเฟรม แต่ถ้าเราไม่กำหนด FRAMEBORDER="yes" การแสดงผลก็ยังสามารถแสดงเส้นแบ่งเฟรม 
    < FRAMESET FRAMEBORDER="NO/YES" >BORDER="ค่าตัวเลข" BORDERCOLOR="RGB หรือ ระบุชื่อสี" >
    < /FRAMESET >

  • FRAMEBORDER เป็นการกำหนดเส้นแบ่งเฟรม

  • BORDER เป็นการกำหนดขนาดของเส้นแบ่งเฟรม

  • BORDERCOLOR เป็นการกำหนดสีของเส้นแบ่งเฟรม



  •     เมื่อเรากำหนดเส้นแบ่งเฟรมเส้นเราก็สามารถกำหนดขนาดของเส้นแบ่งเฟรมได้ โดยเราใช้ BORDER="ค่าตัวเลข" เป็นตัวกำหนดขนาดของเส้นแบ่งเฟรม และกำหนดสีให้กับเส้นแบ่งเฟรม โดยเราใช้ BORDERCOLOR="#RGB หรือ ระบุชื่อสี" เป็นการกำหนดสีของเส้นแบ่งเฟรม แต่ถ้าเรากำหนดไม่ให้มีเส้นแบ่งเฟรม โดยใช้ FRAMEBORDER="no" จะไม่มีเส้นแบ่งเฟรมเกิดขึ้น
    เมื่อเรากำหนดไม่ให้เส้นแบ่งเฟรมปรากฎบนหน้าจอภาพแล้ว แต่จะสังเกตได้ว่ายังมีเส้นสีขาวยังปรากฎอยู่ ซึ่งยังทำให้การแสดงผลยังเหมือนมีเส้นแบ่งเฟรมเกิดขึ้นอยู่ เราจึงกำหนดค่าให้ BORDER="0" จะทำให้เส้นที่กล่าวมาข้างต้นหายไปและก็จะทำให้เว็บเพจของเรามีความน่าสนใจมากยิ่งขึ้น 

    การกำหนดการแสดงผลแถบสกอลบาร์
       คำสั่งนี้จะเป็นการกำหนดแถบสกอรบาร์ โดยปกติแล้วค่ามาตรฐานของการแสดงผลแบบสกอรบาร์จะมีค่าเท่ากับ AUTO คือ ถ้าข้อมูลไฟล์ใดมีขนาดใหญ่เกิน หน้าของจอภาพแถบสกอรบาร์ก็จะเกิดขึ้นทันที เพื่อที่จะได้ศึกษาเว็บเพจได้ยอ่างครบถ้วน แต่ถ้าไฟล์มีขนาดเล็กกว่าหน้าจอภาพ แถบสกอรบาร์ก็จะไม่เกิดขึ้น
    < FRAMESET >
    < FRAME SRC="URL" SCROLLING="YES/NO" >
    < FRAME SRC="ไฟล์ที่เราต้องการให้แสดงผลในเฟรม หรือ URL" >
    < FRAME SRC="ไฟล์ที่เราต้องการให้แสดงผลในเฟรม หรือ URL" >
    < /FRAMESET >
    ในการกำหนดว่า SCROLLING="yes" จะมีผลต่อการแสดงผลแถบสกอรบาร์ในโปรแกรมเว็บบราวเซอร์ ถือจะแสดงทุกเฟรมที่กำหนดค่า "yes" โดยไม่สนว่าขนาดของไฟล์จะมีขนาดใหญ่หรือเล็กกว่าเฟรม แต่ถ้าเรากำหนด SCROLLING="no" จะมีผลต่อการแสดงผลแถบสกอรบาร์ในโปรแกรมเว็บบราวเซอร์คือ จะไม่แสดงแถบสกอรบาร์ไม่ว่าขนาดของไฟล์จะมีขนาดใหญ่หรือเล็กกว่าเฟรม

    การกำหนดการปรับขนาดของเฟรมเป็นคำสั่งที่กำหนดขนาดของเฟรม ซึ่งจะทำให้เราไม่สามารถทำการปรับขนาดของเฟรมได้ โดยปกติแล้วเมื่อเราทำการลากเมาส์มาที่เส้นแบ่งเฟรมจะมีเครื่องหมาย ซึ่งจะสามารถทำการปรับขนาดของเฟรมได้ แต่ถ้าเรากำหนดค่า NORESIZE เข้าไปเมื่อลากเมาส์มาที่เส้นแบ่งเฟรมจะไม่ปรากฎ เครื่องหมายซึ่งจะไม่สามารถปรับขนาด ของเฟรมได้
    < FRAMESET >< FRAME SRC ="URL" NORESIZE >
    < FRAME SRC ="ไฟล์ที่เราต้องการให้แสดงผลในเฟรม หรือ URL" >
    < FRAME SRC ="ไฟล์ที่เราต้องการให้แสดงผลในเฟรม หรือ URL" >
    < /FRAMESET >

    การแสดงเฟรมแบบ INLINEโดยปกติแล้วกำหนดเฟรมนั้นเราจะกำหนดอยู่ในส่วนของ ...... แต่เราสามารถนำเฟรมมาแสดงในเว็บเพจโดยไม่ต้องทำการแบ่งพื้นที่หน้าจอ ออกเป็นส่วน ๆ ทั้งนี้เฟรมจะแสดงผลร่วมกับข้อความต่าง ๆ ในเว็บเพจ (INLINE หรือ INFLOW) เสมือนเป็นภาพการฟิกภาพหนึ่ว แต่สามารถใช้งานได้เช่นเดียว กับเว็บเพจทั่วไป
    < BODY >
    < IFRAME SRC="ชื่อไฟล์เอกสาร HTML หรือ URL" WIDTH="พิกเซลหรือเปอร์เซ็นต์" HEIGHT="พิกเซลหรือเปอร์เซ็นต์" ALING="LEFT/CENTER/RIGHT" >
    < /BODY >

    การกำหนดระบุวินโดว์หรือเฟรมที่ต้องการให้แสดงเว็บเพจปลายทางการลิงค์TARGET="window name"ใช้ระบุชื่อวินโดว์หรือเฟรม (กำหนดด้วยค่า NAME) ที่ต้องการให้ทำหน้าที่แสดงเว็บเพจปลายทางจากการลิงค์ หากไม่พบวินโดว์หรือเฟรมชื่อดังกล่าว (เพราะไม่ได้ สร้างเตรียมไว้) เว็บบราวเซอร์จะสร้างวินโดว์ขึ้นมาใหม่เอง โดยมีชื่อตามที่ระบุ เพื่อให้วินโดว์ใหม่นั้นทำหน้าที่แสดงเว็บเพจปลายทางที่ได้จากการลิงค์แทนชื่อต่อไปนี้เป็นชื่อสงวนสำหรับเฟรมทำให้เกิดการทำงานพิเศษเฉพาะอย่างซึ่งจะต้องใช้งานร่วมกับ TARGET

  • Target="_blank" เมื่อพบกับชื่อนี้ จะมีการเปิดหน้าต่างบราวเซอร์ขึ้นมาใหม่





  • Target="_self" จะทำให้ไฮเปอร์ลิงค์นำข้อมูลมาแสดงบนเฟรมซึ่งมีไฟล์ไฮเปอร์ลิงค์นี้อยู่ 
  • Target="_parent" จะทำให้บราวเซอร์ปัจจุบันนั้นถูกรีเซ็ตใหม่ และนำข้อมูลมาแสดงบนบราวเซอร์นี้





  • Target="_Top" จะทำให้ไฮเปอร์ลิงค์นำข้อมูลพิมพ์ลงบนเฟรมบนสุด
  • 1 ความคิดเห็น: