Home
Course
Service
Contact
About Us

 

 

 

 

 

 

 

 

 


การสร้าง link

คือ การเชื่อมโยงเวบเพจ ไปยังจุดหมายอื่นๆ ในเวบเพจเดียวกัน ไปยังเวบเพจ อื่น หรือโฮมเพจใหม่ ซึ่งต้องมีการเขียนคำสั่ง กำหนด เส้นทางที่ ต้องการจะไป และจุดที่จะนำไป Links เชื่อมโยงไปภายนอก โฮมเพจ
รูปแบบแท็ก

<a href = "URL">ข้อความที่เป็นตัว link </a>
URL คือ address ของ website ที่ต้องการจะ link ไป
<A href = "http://www.energythai.net" > โฮมเพจ ศูนย์ฝึกอบรมบางปะกง </A>

Link เชื่อมโยงไปหน้าเอกสารอื่นในโฮมเพจ
รูปแบบแท็ก

<A HREF= "plant.html" >ไปที่เอกสาร plant</A>
Link เชื่อมโยงภายใน เวบเพจ หรือภายใน ไฟล์ .html เดียวกัน
รูปแบบแท็ก จะต้องมีคำสั่ง 2 คำสั่ง คือ

<a name = "กำหนดชื่อตำแหน่งอ้างอิง">ข้อความที่เราต้องการจะ link ไปหา</a>
<a href ="#ชื่อตำแหน่งอ้างอิงนั้น"> ข้อความแสดงเป็น Link </a>

<A href= "#B" >ไปที่ตำแหน่ง B</A> ตำแหน่งนี้คือตำแหน่ง A <BR>
test (ข้อความให้มีมากกว่า 1 หน้า จึงจะเห็นผลชัดเจน)<BR>
test<BR>
test<BR>
test<BR>
<A NAME= "B" >ตำแหน่ง B </A>
test<BR>

Link ไปยังไฟล์อื่นๆ ที่ไม่ใช่เอกสาร HTML เช่น ไฟล์รูปภาพ ไฟล์.exe ,ไฟล์.zip , ไฟล์.doc ฯลฯ
รูปแบบแท็ก

<a href="r9.zip">Download file r9.zip</a>

Link เพื่อ ส่งจดหมายอีเล็ดโทรนิค หรือ EMAIL
รูปแบบแท็ก

<A href ="mailto:Email address" >ข้อความแสดงเป็น Link </A>
<A href ="mailto:sala@energythai.net">mail to webmaster </A>

Links เปิด เบราเซอร์ เป็นอีก windows หนึ่ง หรือเปิดทับ windows เดิมก็ได้ โดยจะต้องใช้ Attribute Target="_blank" หรือ Target="_self" ตามลำดับ
<A HREF="music2.html" TARGET="_blank"> ข้อความแสดงเป็น Link </A>
<A HREF="music2.html" TARGET="_self"> ข้อความแสดงเป็น Link </A>

การใช้รูปภาพเป็นตัว link
โดยการใช้รูปแบบการ link ( <A href= "">….</A> )ครอบ tag <img>
รูปแบบแท็ก

<A href = "URL"> <img scr = "ชื่อ file รูปภาพ" border="0"> </A>
<A href = "music2.html" target="_blank" > <img src="tn_17.gif" border="0"></A>
border=0 รูปภาพที่เป็นตัว link จะไม่มีกรอบล้อมรอบ
border=1,2… รอบรูปภาพที่เป็นตัว link จะมีกรอบสี่เหลี่ยมสีเดียวกับตัวอักษร link ล้อมรอบ
สีของ Link
ข้อความที่เป็นตัว link จะมีสีที่แตกต่างไปจากสีของข้อความอื่นๆ และมีขีดเส้นใต้ด้วย เราสามารถกำหนดสี ของข้อความที่เป็น link โดยแทรกไว้ใน แท็ก <body> ดังนี้
<body bgcolor=" สี " text=" สี " link=" สี " vlink=" สี " alink=" สี " >
<BODY BGCOLOR="#000000" TEXT="#FFFF99" Link="pink" alink="orange" vlink="blue" >
link = "สี" สีนี้คือสีของตัวอักษรที่เป็น linkที่ยังไม่เคย link เข้าไป (Default = สีน้ำเงิน)
alink = "สี" สีนี้คือสีของตัวอักษรที่เป็น link ในขณะที่กำลัง link หรือ click (Default = สีเเดง )
vlink = "สี" สีนี้คือสีของตัวอักษรที่เป็น link แต่ได้เคยถูก link ไปแล้ว (Default = สีม่วง)

การใช้ Stylesheet กำหนด สีของLink
โดยกำหนดแท็ก<STYLE> และแท็กอื่นๆด้านล่างนี้ไว้ภายในแท็ก <HEAD>

<STYLE type="text/css">
<!--
A:link { color:white }
A:visited { color:yellow }
A:hover { color:RED }
A:active { color:green }
-->
</STYLE>

กรณีไม่ต้องการให้ link นั้นมีเส้นขีดใต้ข้อความ ให้กำหนดProperty text-decoration : none ไว้ภายใน {……} โดยเเต่ละ Property ต้องคั่นด้วยเครื่องหมาย ;
A:link { color:white ; text-decoration : none }
A:visited { color:yellow ; text-decoration : none }
นอกจากนี้ยังกำหนดให้ พื้นหลังของ link มีสีได้ด้วย โดยกำหนดProperty background : สี
A:hover {color:RED;background:violet}

การสร้าง TABLE
การสร้างตารางจะถูกกำหนดโดย tag <table>และภายใน tag <table> จะมี tag <tr> เป็นตัวกำหนดจำนวน row ของตาราง และภายใน tag <tr>นั้นจะมี tag <td> เป็นตัวกำหนดจำนวน column ใน row นั้นๆ เช่น ตารางขนาด 2row 2 column

<TABLE>
<TR>
<TD>... ส่วนนี้คือ row ที่ 1 column ที่1...</TD>
<TD>... ส่วนนี้คือ row ที่ 1 column ที่2...</TD>
</TR>
<TR>
<TD>... ส่วนนี้คือ row ที่ 2 column ที่1...</TD>
<TD>... ส่วนนี้คือ row ที่ 2 column ที่2...</TD>
</TR>
<CAPTION> table 1</caption>
</TABLE>

<TABLE>...</TABLE> เป็นการกำหนดขอบเขต ของ table ที่จะสร้าง
<TR>...</TR> เป็นการกำหนด ROW ของ TABLE
<TD>...</TD> เป็นการกำหนด COLUMN ของ TABLE
<CAPTION>...</CAPTION> เป็นการกำหนดชื่อของ TABLE
<TH> ใช้แทน tag <TD> ข้อความจะเป็นตัวหนา และอยู่กึ่งกลาง คอลัมน์ (นิยมใช้ทำส่วนหัวของ TABLE)

Attribute ของ Tag <TABLE>
BGCOLOR=" สี " สีพื้นของตาราง
BACKGROUND=" ไดเรกเทอรี่ที่ไว้รูปภาพ " พื้นของตารางเป็นรูปภาพ
WIDTH="ตัวเลข " ;% or pixel ขนาดความกว้างของตาราง
HEIGHT="ตัวเลข " ;% or pixel ขนาดความกว้างของตาราง
BORDER="ตัวเลข" ;pixel ความหนาของเส้นขอบตาราง
BORDERCOLOR=" สี " สีของเส้นขอบตาราง
CELLPADDING=" ตัวเลข" ;pixel เป็นระยะห่างระหว่าง ขอบของตารางกับข้อความ หรือรูปภาพที่อยู่ในตาราง
CELLSPACING=" ตัวเลข" ; pixel เป็นขนาด cell ของตาราง ( cellspacing="0" เส้นของตารางจะเป็นเส้นทึบ )
Attribute ของ Tag <TR>
BGCOLOR="สี"
ALIGN="LEFT, CENTER, RIGHT" (default = left)
VALIGN="TOP, CENTER , BOTTOM" (default = center)
HEIGHT="ตัวเลข" ;% or pixel

Attribute ของ Tag <TD>
BGCOLOR=" สี "
BACKGROUND=" ไดเรกเทอรี่ที่ไว้รูปภาพ "
ALIGN="LEFT, CENTER, RIGHT" (default = left)
VALIGN="TOP, CENTER , BOTTOM" (default = center)
WIDTH="ตัวเลข" ;% or pixel
ROWSPAN="ตัวเลข" เป็นการรวม row ตามจำนวนต้องการใช้
COLSPAN="ตัวเลข" เป็นการรวม column ตามจำนวนต้องการใช้

    Example 1ทดลองทำตาราง ขนาด2X2 และใช้ attribute ต่างๆ

    <TABLE bordercolor="#ff33ff" cellSpacing="2" cellPadding="0" border="3" width="250" height="300">
      <TR bgColor="#3300ff" VALIGN="TOP" ALIGN="right" >
        <TD width="270" bgcolor="#ff8080" >
        <FONT color="#400040" face="MS Sans Serif" size="2">ส่วนนี้คือ row ที่ 1 column ที่1 </FONT>
        </TD>
        <TD width="270" bgColor="#f0008">
        <FONT color="#400040" face="MS Sans Serif" size="2">ส่วนนี้คือ row ที่ 1 column ที่ 2 </FONT>
        </TD>
      </TR>
      <TR VALIGN="bottom" ALIGN="center" >
        <TD width="270" bgColor="#ff8080">
        <FONT color="#400040" face="MS Sans Serif" size="2">ส่วนนี้คือ row ที่ 2 column ที่1</FONT>
        </TD>
        <TD width="270" bgColor="#ffa6ff" VALIGN="center">
        <FONT color="#400040" face="MS Sans Serif" size="2">ส่วนนี้คือ row ที่ 2 column ที่2 </FONT>
        </TD>
      </TR>
    </TABLE>

    Attribute ของ Tag <CAPTION>

    ALIGN="LEFT, CENTER, RIGHT" (default = center)
    VALIGN="TOP, BOTTOM" (default = top)
    Example 2 ทดลองทำตารางที่มีจำนวน row แต่ละ row และจำนวน column แต่ละ column ไม่เท่ากัน โดยใช้ attribute rowspan และ colspan

    <TABLE border="2" bordercolor="#33FF33" bgcolor="#FFFFCC" cellspacing="1" width="400">
      <TR>
        <TD rowspan="3">1</TD>
        <TD>2</TD>
        <TD>3</TD>
        <TD>4</TD>
      </TR>
      <TR>
        <TD>5</TD>
        <TD colspan="2">6</TD>
      </TR>
      <TR>
        <TD>9</TD>
        <TD>10</TD>
        <TD>11</TD>
      </TR>
      <TR>
        <TD>13</TD>
        <TD>14</TD>
        <TD>15</TD>
        <TD>16</TD>
      </TR>
    </TABLE>

    การสร้าง FORM
    การเขียนแบบฟอร์มรับ-ส่งข้อมูล ต้องเขียนไว้ระหว่าง tag <form> ซึ่งมีโครงสร้างดังนี้

      <form method="วิธีการส่งข้อมูล " action="ที่อยู่ของไฟล์ script " >
        ..รูปแบบฟอร์มรับ-ส่งข้อมูล (ซึ่งจะอธิบายต่อไป)..
      </form>

    method= วิธีการส่งข้อมูล (post หรือ get)
    action= ตำแหน่งที่อยู่ของไฟล์ script ที่server ที่จะส่งข้อมูลจาก form นี้ไปให้เช่น default.php
    รูปแบบฟอร์มรับ-ส่งข้อมูล ยังแบ่งเป็นหลายประเภท ดังนี้

    Text Box
    เป็นการสร้าง box สำหรับกรอกตัวอักษร ขนาดกว้าง 1 ตัวอักษร

    NAME: <INPUT TYPE="text" name="name" size="30" maxlength="25" value ="fill your name">
    name = ชื่อตัวแปร ที่ต้องการนำข้อมูลที่กรอก ไปเก็บไว้
    size = ขนาดความยาวของ box
    maxlength = จำนวนตัวอักษรที่กรอกได้
    value = ข้อมูลที่ให้ปรากฏใน box ( มีหรือไม่มีก็ได้ )

    Password Box
    เป็นการสร้าง box สำหรับกรอกตัวอักษร ขนาดกว้าง 1 ตัวอักษร ซึ่งเมื่อกรอกแล้วจะเห็นเป็นเครื่องหมายดอกจัน (*)

    PASSWORD: <input type ="password" name="password" size ="8" maxlength ="5">
    name = ชื่อตัวแปร ที่ต้องการนำข้อมูลที่กรอก ไปเก็บไว้
    size = ขนาดความยาวของ box
    maxlength = จำนวนตัวอักษรที่กรอกได้

    Text Area Box
    เป็นการสร้าง box สำหรับกรอกตัวอักษร ขนาดกว้าง X ยาว ตามความต้องการ

      <TEXTAREA NAME ="comment" ROWS="3" COLS="40">
        .. ( ข้อมูลที่ให้ปรากฏใน box มีหรือไม่มีก็ได้ )..
      </TEXTAREA>

    NAME = ชื่อตัวแปร ที่ต้องการนำข้อมูลที่กรอก ไปเก็บไว้
    ROWS = จำนวนแถว ที่ให้กรอกข้อมูล
    COLS = จำนวนอักษร ที่กรอกได้ในแต่ละแถว

    Radio Button
    สามารถเลือกหัวข้อได้เพียงหัวข้อเดียวเท่านั้น จากการกำหนดให้เลือกหลายๆหัวข้อ

    SEX: <INPUT type="radio" name="one" value="female">Female
    <INPUT type="radio" name="one" value="male" checked>Male
    name = ชื่อตัวแปร ( ตัวแปร ต้องเป็นชื่อเดียวกันทุกตัวเลือก )
    value = ค่าของตัวแปร
    checked = เป็น Attribute ที่กำหนดให้เลือกรายการนั้นเป็นค่า Default

    Checkbox
    สามารถเลือกหัวข้อได้มากกว่า 1หัวข้อ จากการกำหนดให้เลือกหลายๆหัวข้อ

      <input type="checkbox" name="r" value="red">RED
      <input type="checkbox" name="b" value="black">BLACK
      <input type="checkbox" name="g" value="green" checked>GREEN
      <input type="checkbox" name="y" value="yellow">YELLOW

    name = ชื่อตัวแปร ( ตัวแปร ต้องไม่ใช้ชื่อเดียวกันในแต่ละตัวเลือก )
    value = ค่าของตัวแปร
    checked = เป็น Attribute ที่กำหนดให้ เลือกcheck รายการนั้นเป็นค่า Default

    Pop-Up Box or Select
    เป็นการใช้ Drop Down list ในการเลือกรายการ

    COUNTRY: <select name="country" size="1">
        <option value="h">HONGKONG
        <option value="t" selected>THAILAND
        <option value="l">LAO
        <option value="m">MALAYSIA
        <option value="c">CHAINA
      </select>

    name = ชื่อตัวแปร ที่ต้องการนำข้อมูลที่เลือกไปเก็บไว้
    size = เป็นจำนวนรายการที่จะให้แสดงใน box
    value = ค่าของตัวแปรของแต่ละรายการ

    HIDDEN
    เป็นค่าที่ต้องการส่ง แต่ไม่ต้องการให้แสดงบนหน้าจอ

    <input type="hidden" name="a" value="5">
    name = ชื่อตัวแปร ที่ต้องการนำข้อมูลที่เลือกไปเก็บไว้
    value = ค่าของตัวแปร

    SUBMIT
    ปุ่มที่ทำหน้าที่ส่งข้อมูลไปยัง server ซึ่งจำเป็นต้องมี เพราะเมื่อกรอกข้อมูลในแบบฟอร์มต่างๆแล้ว ต้องส่งข้อมูลนั้นไปยัง script ที่ server

    <input type="submit" value="Send">
    value = ข้อความที่ต้องการให้ปรากฎบนปุ่ม submit

    RESET
    ปุ่มที่ทำหน้าที่ลบข้อมูลที่กรอกไว้บนหน้า webpage

    <input type="reset" value="Clear">
    value = ข้อความที่ต้องการให้ปรากฎบนปุ่ม reset

    Finally!
    Make sure you end your page with this:
    </FORM>


:: ศูนย์ฝึกอบรมบางปะกง การไฟฟ้าฝ่ายผลิตแห่งประเทศไทย 8/4 หมู่ 8 ตำบลท่าข้าม อำเภอบางปะกง จังหวัดฉะเชิงเทรา 24130 ::