วันอาทิตย์ที่ 10 กุมภาพันธ์ พ.ศ. 2556

การเชื่อมโยงข้อมูล (Link)



การเชื่อมโยงข้อมูล (Link)


เป็นที่ ทราบดี อยู่ แล้วว่า การที่ อินเตอร์เนต ได้รับความนิยม อย่างกว้างขวางอยู่ทั่วโลกนั้นเป็ ผลมาจากความ สามารถในการ
เชื่อมโยงข้อมูล จากฐานข้อมูล หนึ่ง ไปยังอีก ฐานข้อ มูลหนึ่ง ได้อย่างรวดเร็ว โดยสามารถ เชื่อมโยงข้อความ ได้ทั้ง จากภายใน แฟ้มเอกสาร ข้อมูลของตัวเอง และแฟ้มเอกสารข้อมูลภายนอกที่ต่างเว็บไซต์กัน

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

ประเภทการเชื่อมโยง - การเชื่อมโยงภายในเว็บไซต์
- การเชื่อมโยงข้อมูลนอกเว็บไซต์
- การเชื่อมโยงข้อมูล FTP
- การเชื่อมโยงข้อมูล E-Mail


การเชื่อมโยงภายในเว็บไซต์
รูปแบบ <A HREF="ที่อยู่ไฟล์">ข้อความ</A>
ตัวอย่าง <A HREF="tipcomputer.asp">ทิปคอมพิวเตอร์</A>*** หมายเหตุ ถ้าลิงค์อยุ่คนละโฟลเดอร์ <A HREF="../tipcomputer.asp">ทิปคอมพิวเตอร์</A>

การเชื่อมโยงข้อมูลนอกเว็บไซต์ รูปแบบ <A HREF="้http://www..........">ข้อความ</A>
ตัวอย่าง <A HREF="้http://www.bcoms.net">บีคอม</A>*** หมายเหตุ คุณสามารถสั่งให้เบราเซอร์เปิดหน้าใหม่ได้โดยกำหนด target="_blank"
ตัวอย่าง <a href="http://www.driverzone.com" target="_blank"> Driver Zone </a>

การเชื่อมโยงข้อมูล FTP
รูปแบบ <FTP://HOSTNAME/FOLDER>ข้อความ</A>HOSTNAME คือ ชื่อของศูนย์บริการ FTP Server
FOLDER คือ ชื่อไฟล์และไดเรกทอรี่ที่ผู้เข้ารับบริการสามารถเข้าไปใช้งานได้
ตัวอย่าง <A HREF=FTP://bcoms.net/download> Download </a>


การเชื่อมโยงข้อมูล E-Mail
รูปแบบ <A HREF="MAILTO:USERNAME@DOMAINNAME">ข้อความ</A>
ตัวอย่าง <a href="mailto: bcoms_net@hotmail.com">bcoms_net@hotmail.com</a>






การสร้างตาราง


การสร้างตาราง ลงใน เว็บเพจมีประโยชน์มหาศาล เราสามารถ ประยุกต์ นำไปใช้ได้หลายอย่าง เพื่อเป็นการเพิ่มสีสันความสวยงามของเว็บเพจ การสร้างตาราง ในเว็บเพจก็ไม่แตกต่างจากการสร้างตารางบนแผ่นกระดาษทั่ว ๆ ไป เราเคยทำตารางอย่างไร ก็สามารถสั่งให้เว็บเพจของเรา ทำอย่างนั้นได้ เช่นกัน ต่างกันที่ว่าในเว็บเพจเราไม่สามารถที่จะ นำเอาปากกา ดินสอ ไม้บรรทัด หรืออุปกรณ์ สำหรับเขียนตารางเข้าไปเขียนบนจอภาพได้ เราใช้ นิ้วมือของเรา เป็นผู้พิมพ์คำสั่ง สำหรับสร้างตารางขึ้นมา
โครงสร้างตาราง
<TABLE>
<TR>
<TH>หัวข้อตาราง
<TD>รายละเอียดย่อย
<TR>
<TH>หัวข้อตาราง
<TD>รายละเอียดย่อย
</TABLE>



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


คุณสมบัติของตาราง
<TABLE>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDER=n
CELLPADDING=n
CELLSPACING=n
WIDTH=n
HEIGHT=n

โดย

ALIGN กำหนด ตำแหน่งตาราง โดย
LEFT=กำหนดตารางให้อยู่ทางซ้าย
RIGHT=กำหนดตารางให้อยู่ทางขวา
BACKGROUND ใส่ภาพกรฟิก เป็นพื้นหลังตาราง url เป็น ตำแหน่ง ภาพ
BGCOLOR กำหนดสีให้ตาราง
BORDER เส้นขอบ ตาราง n เป็นค่า ความหนาของ ขอบตาราง
BORDERCOLOR กำหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER
CELLPADDING กำหนดระยะ ห่างระหว่าง ตัวหนังสือและเส้นแบ่งตาราง
CELLSPACING กำหนดขนาดของเส้นตาราง
WIDTH กำหนดความกว้างของตาราง เป็นตัวเลขและเป็น %
HEIGHT กำหนดความสูงของตารางเป็นตัวเลขและเป็น %

<TR>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
VALIGN=align-type

โดย

ALIGN กำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย
LEFT=อยู่ทางซ้าย
CENTER=อยู่ตรงกลาง
RIGHT=อยู่ทางขวา
BACKGROUND ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ
BGCOLOR กำหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLOR กำหนดสีให้ขอบตาราง
VALIGN จัดตำแหน่งข้อมูลในแนวตั้ง โดย
TOP = จัดอยู่ข้างบน
MIDDLE = จัดอยู่ตรงกลาง
BPTTOM = จัดอยู่ข้างล่าง

<TH>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
COLSPAN=n
ROWSPAN=n
VALIGN=align-typeโดย

ALIGN กำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย
LEFT=อยู่ทางซ้าย
CENTER=อยู่ตรงกลาง
RIGHT=อยู่ทางขวา
BACKGROUND ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ
BGCOLOR กำหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLOR กำหนดสีให้ขอบตาราง
COLSPAN ปรับขนาดของคอร์ลัมให้มีขนาดเป็น เท่า ของความกว้างปกติ สูงสุดเท่ากับจำนวนคอร์ลัมที่มี
ROWSPAN ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี
VALIGN จัดตำแหน่งข้อมูลในแนวตั้ง โดย
TOP = จัดอยู่ข้างบน
MIDDLE = จัดอยู่ตรงกลาง
BPTTOM = จัดอยู่ข้างล่าง

<TD>
ALIGN=align-type
BACKGROUND=url
BGCOLOR=color
BORDERCOLOR=color
COLSPAN=n
ROWSPAN=n
VALIGN=align-typeโดย

ALIGN กำหนด ตำแหน่งข้อความในแถวตามแนวนอน โดย
LEFT = อยู่ทางซ้าย
CENTER = อยู่ตรงกลาง
RIGHT = อยู่ทางขวา
BACKGROUND ใส่ภาพกราฟิก เป็นพื้นหลังแถว url เป็น ตำแหน่ง ภาพ
BGCOLOR กำหนดสีที่เป็นฉากหลังให้แถว
BORDERCOLOR กำหนดสีให้ขอบตาราง
COLSPAN ปรับขนาดของคอร์ลัมให้มีขนาดเป็น เท่า ของความกว้างปกติ สูงสุดเท่ากับจำนวนคอร์ลัมที่มี
ROWSPAN ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี
VALIGN จัดตำแหน่งข้อมูลในแนวตั้ง โดย
TOP = จัดอยู่ข้างบน
MIDDLE = จัดอยู่ตรงกลาง
BPTTOM = จัดอยู่ข้างล่าง

ตารางซ้อนตาราง
มีอยู่ บ่อยครั้งที่เราจำเป็นที่จะต้องสร้างตารางให้มีลักษณะของตารางทับซ้อนกันได้ เพื่อผลทางการแสดงผลข้อมูล
ข้อมูลให้แบบละเอียดของข้อมูลได้มากที่สุด รูปแบบ การเขียน ก็เหมือน กับเมื่อ สร้าง list ซ้อน list นั่นคือ ในส่วน ของ บรรทัด
<TR> จะมี การสร้าง ตาราง ใหม่ <TABLE>.....</TABLE> ก่อนที่ จะมี ตัวเปิด </TR> ในบรรทัด นั้น ๆ เช่น
A B

C D
E

ซึ่งมีโคดดังนี้
<HTML>
<HEAD><TITLE>Table with and Neted tables</HEAD></TITLE>
<BODY>
<H1>Table with and Neted tables</H1>
<TABLE BORDER WIDTH=50%>
<TR><TD>A</TD><TD>B</TR></TR>
<TR><TD><TABLE BORDER WIDTH=100%>
<TR><TD>C</TD><TD>D</TR></TR>
</TABLE><TD>
<TD>E</TD></TR>
</TABLE >
</BODY>
</HTML>

การใส่รูปภาพลงในตาราง เรา สามารถ นำรูปภาพ ที่มี อยู่บรรจุ ลงใน ตาราง ที่สร้าง ขึ้นได้ โดย การ บรรจุคำสั่ง สำหรับการ แสดงรูปภาพ <IMG SRC=รูปภาพ>เข้าไป ในส่วน หนึ่งของ ตาราง เช่น
<TABLE BORDER="2" CELLPADDING="5" CELLSPACING="5" WIDTH="60%">
<TR>
<TD VALIGN="bottom" WIDTH="30%"><IMG SRC="Aq.gif" WIDTH="108" HEIGHT="108"></TD>
<TD WIDTH="30%"><IMG SRC="34.gif" WIDTH="20" HEIGHT="20"></TD>
<TR>
<TR>
<TD VALIGN="bottom" WIDTH="30%"><IMG SRC="direc.gif" WIDTH="200" HEIGHT="44"></TD>
<TD WIDTH="30%"><IMG SRC="pencil.gif" WIDTH="50" HEIGHT="50"></TD>
<TR>
</TABLE>




การปรับขนาดรูปภาพให้พอดีกับตาราง
เราเคยเรียน มาแล้ว ว่า เรานั้น สามารถ ปรับขนาด รูปภาพได้ ในการนำ รูปภาพ ใส่เข้า ไปในตาราง เราก็ กำหนด ขนาดของ รูปภาพ กว้าง ยาว ให้เท่ากัน ทุกด้าน จะทำให้ภาพ ที่แสดง ออกมา มีขนาด เท่ากัน เช่น
<TABLE BORDER="2" CELLPADDING="5" CELLSPACING="5" WIDTH="60%">
<TR>
<TD VALIGN="bottom" WIDTH="30%"><IMG SRC="Aq.gif" WIDTH="80" HEIGHT="80"></TD>
<TD WIDTH="30%"><IMG SRC="34.gif" WIDTH="80" HEIGHT="80"></TD>
<TR>
<TR>
<TD VALIGN="bottom" WIDTH="30%"><IMG SRC="direc.gif" WIDTH="80" HEIGHT="80"></TD>
<TD WIDTH="30%"><IMG SRC="pencil.gif" WIDTH="80" HEIGHT="80"></TD>
<TR>
</TABLE>




การเชื่อมโยงข้อมูลในตาราง
เหมือนกับ ข้อมูลที่อยู่ นอกตาราง ข้อมูลที่อยู่ในตาราง ก็สามารถ ไปเชื่อม โยงกับข้อ มูล จากแหล่ง ข้อมูล อื่นได้ เช่น เดียวกัน เมื่อเรานำ ส่วนเชื่อม โยงข้อมูล ทั้งตัว อักษร รูปภาพ หรือผสมกัน ก็ได้ มาบรรจุในตารางเท่านั้น เช่น<table border=2 cellpadding=5 cellspacing=5 width="50%">
<tbody>
<tr>
<td width="50%"><a href="../index.asp"><img height=20 src="34.gif" width=20 border=0></a></td>
<td width="50%"><a href="../index.asp">กลับไปหน้าแรก</a></td>
</tr>
</tbody>
</table>

ไม่มีความคิดเห็น:

แสดงความคิดเห็น