|
เกาเหลาเทคนิคการใช้ HTML
การใส่ตารางลงไปในเว็บเพจมาต่อกันกับรูปแบบคำสั่ง
<TABLE> ซึ่งจะเป็นการใส่ตารางลงไปในเอกสาร HTML หากผู้ใช้งานต้องการจะควบคุมการแสดงของตารางบนเว็บเพจนั้น
จะมีแอตทริบิวต์ให้เลือกใช้งานดังนี้
แอตทริบิวต์ ALIGN เป็นส่วนที่จะมาช่วยจัดตำแหน่งการแสดงของตารางไม่ว่าจะเป็น
LEFT (ทางด้านซ้าย), RIGHT (ทางด้านขวา), และ CENTER (ตรงกลาง)
โดยค่าดีฟอลต์นั้นจะถูกเลือกเป็น left
แอตทริบิวต์ WIDTH คำสั่งที่เข้ามาช่วยให้ผู้สร้างเว็บเพจสามารถระบุจำนวนความกว้างของตาราง
ซึ่งจะมีหน่วยเป็นพิกเซล ตัวอย่างเช่น <TABLE WIDTH=50">)
หรืออาจใช้การกำหนดขนาดของตารางเป็นจำนวนเปอร์เซ็นต์ความกว้างของหน้าต่างบราวเซอร์ก็ได้
ซึ่งหากกำหนดเป็นค่าเปอร์เซ็นต์จะเขียนคำสั่งเป็น <TABLE
WIDTH=90%>
 |
| รูปที่ 1 ผลลัพธ์การกำหนดค่าตารางเป็นเปอร์เซ็นต์
|
ทดลองสร้างตาราง โดยการใช้ความกว้างของบราวเซอร์ที่
50 เปอร์เซ็นต์ และให้ตารางชิดทางด้านขวา (ดังรูปที่ 1)
<html<head>
<title>Table Percent </title>
</head>
<body bgcolor=#FFFFFF text=#000000">
<table width=50% border=1" align=right>
<tr>
<td><img src=baby1.jpg width=300" height=204"></td>
</tr>
</table>
</body></html>
โค้ดถัดมาลองกำหนดค่าความกว้างของตารางเป็น
150 พิกเซล
<html><head>
<title>Table Pixel</title>
</head>
<body bgcolor=#FFFFFF text=#000000">
<table width=150" border=1" align=center>
<tr>
<td><img src=baby1.jpg width=300" height=204"></td>
</tr>
</table>
</body></html>
 |
| รูปที่ 2 ผลลัพธ์การกำหนดค่าตารางเป็นพิกเซล
|
การกำหนดค่าให้เฟรม
คำสั่งเฟรมนั้นอาจมีผลให้เว็บบราวเซอร์ทำงานช้าลงบ้าง
โดยเว็บบราวเซอร์ที่สนับสนุนคำสั่งนี้ต้องใช้ เน็ตสเคป 2.0 ขึ้นไป
หรือหากใช้ไออีก็ต้องตั้งแต่เวอร์ชัน 3.0 ขึ้นไป การสร้างเฟรมบนเว็บเพจนั้นจะใช้แท็กคำสั่ง
<FRAMESET>....</FRAMESET>
เพื่อใช้ในการกำหนดค่า และจะมีแท็ก <FRAME> อยู่ภายในคำสั่ง
<FRAMESET> ซึ่งแท็ก <FRAME> จะไม่ต้องกำหนดแท็กจบหรือแท็กปิดใดๆ
ทั้งสิ้น (ดังรูปที่ 2)
การกำหนดขนาดเฟรมใน frameset
นั้นจะใช้แอตทริบิวต์ ROWS หรือ COLS กำหนดลงไปในแท็ก <FRAMESET>
ซึ่งค่าแอตทริบิวต์จะถูกกำหนดเป็นหน่วยของพิกเซล หรือเปอร์เซ็นต์ของหน้าจอ
ตัวอย่าง
<FRAMESET COLS=20%,80%>
เป็นการกำหนดค่าขนาดของเฟรมสองเฟรม จากตัวอย่างหมายความว่า ให้เฟรมทางด้านซ้ายมีขนาด
20 เปอร์เซ็นต์ของหน้าจอ และเฟรมทางด้านขวาจะมีขนาดประมาณ 80
เปอร์เซ็นต์ของหน้าจอ ข้อด้อยคือเวลาย่อหน้าจอ เฟรมบางเฟรมอาจแสดงผลไม่ได้สัดส่วนหากมีการปรับย่อขนาดหน้าจอเว็บบราวเซอร์
ถัดมาเป็นการเขียนโค้ดอีกแบบเป็นการกำหนดค่าในแบบพิกเซล
โดยกำหนดให้เฟรมบนจะค่าเป็น 90 พิกเซลและเฟรมด้านล่างจะใช้เครื่องหมาย
* (asterisk) ซึ่งจะขึ้นอยู่กับพื้นที่ในเว็บบราวเซอร์ โดยจะเขียนเป็น
<FRAMESET ROWS=90,*> การใช้งานคำสั่งในรูปแบบนี้จะใช้ในกรณีที่เราไม่สามารถจะไประบุได้ว่าผู้ใช้งานเปิดหน้าจอเพื่อวิวเว็บบราวเซอร์ด้วยขนาดเท่าใด
ทั้งนี้ก็ขึ้นอยู่กับข้อมูลในเฟรมด้วย แต่ส่วนใหญ่จะนิยมกำหนดค่าเป็นเปอร์เซ็นต์ของหน้าจอ
การกำหนดค่าบนหน้าจอจะกำหนดในคำสั่ง
Frames ที่ทำงานภายใต้คำสั่ง frameset โดยในแต่ละเฟรมจะใช้แท็ก
<FRAME> และใช้แท็กนี้ระบุตำแหน่งเอกสาร HTML ปลายทางที่ต้องการในแสดงในแอตทริบิวต์
SRC ตัวอย่างเช่น :
 |
รูปที่ 3 แสดงการแบ่งเฟรมโดยใช้คำสั่ง
เป็น
<FRAMESET ROWS=90,*> |
<FRAMESET COLS=10%,90%>
<FRAME SRC=menu.html>
<FRAME SRC=index.html>
</FRAMESET>
ใช้ชื่อในการอ้างเว็บเพจปลายทาง
การกำหนดค่าเฟรม การเชื่อมต่อหรือลิงก์จากเฟรมหนึ่งไปยังอีกเฟรมหนึ่งนั้น
ผู้ใช้งานสามารถใช้แอตทริบิวต์ NAME ของแท็ก <FRAME> ได้และแอตทริบิวต์
TARGET ของแท็กคำสั่ง <A> ได้เช่นกัน โดยแอตทริบิวต์ NAME
ของแต่ละเฟรมจะมีชื่อที่แตกต่างกันออกไป โดยถ้ามีสองเฟรมก็จะใช้ชื่อเป็นสองชื่อ
เช่น หน้าเมนูและหน้าข้อมูล: (ดังรูปที่ 3)
<FRAMESET COLS=10%,90%>
<FRAME NAME=Menu SRC=menu.html>
<FRAME NAME=Content SRC=index.html>
</FRAMESET>
นอกจากนี้ภายในเอกสาร
menu.htm ก็ยังสามารถใส่คำสั่งอื่นๆ ได้อีกเช่นเดียวกัน
<A HREF=index.html
TARGET=Content>Home</A>
<A HREF=product.html TARGET=Content>Product</A>
<A HREF=about.html TARGET=Content>About Us</A>
<A HREF=feedback.html TARGET=Content>Feedback</A>
หากภายในเฟรมมีการเชื่อมต่อลิงก์ไปยังเว็บไซต์ภายนอกก็สามารถกำหนดค่าได้โดย
<A HREF=http://www.arip.co.th/
TARGET=_top>ค้นหาข้อมูลเพิ่มเติมคลิ้กที่นี่เพื่อ ไปยังเว็บไซต์
http://www. arip.co.th</A>
การควบคุมเส้นขอบ
 |
| รูปที่ 4 คำสั่งที่ให้แสดงเส้นขอบเฉพาะบางเฟรมเท่านั้น
|
การแสดงผลของเฟรมนั้นเราสามารถจะไปกำหนดค่าการแสดงของเส้นขอบหรือ
Border ได้การเรียกใช้ คำสั่ง FRAMEBORDER=1" ระบุลงไปในแท็ก
<FRAMESET> แต่ถ้าหากไม่ต้องการให้แสดงหรือยกเลิกการแสดงเส้นขอบก็ให้ทำการค่าแอตทริบิวต์
FRAMEBORDER ให้มีค่าเป็น 0 (หรือค่าดีฟอลต์)
ถ้าหากเราต้องการให้บางเฟรมมีการแสดงขอบก็สามารถระบุลงไปเฉพาะบางเฟรมก็ได้
โดยลองมาดูตัวอย่างการใส่โค้ดลงไปในเฟรม โดยจะให้เฟรมทางด้านซ้ายมีเส้นขอบประมาณ
1 พิกเซลแต่เฟรมตรงกลางและเฟรมทางด้านขวาไม่ต้องแสดงเส้นขอบ
(ดังรูปที่ 4)
<FRAMESET COLS=20%,60%,20%>
<FRAME SRC=menu.html FRAMEBORDER=1">
<FRAME SRC=index.html FRAMEBORDER=0">
<FRAME SRC=other.html FRAMEBORDER=0">
</FRAMESET>
|