link


 
1.1   การสร้างลิงค์
ชื่อแท็ก                          a
ชื่อแอททริบิวท์               href
ตำแหน่งแท็ก                  อยู่ภายในแท็ก <body>...</body>
 รูปแบบแท็ก                   <a href = “ส่วนเชื่อมโยง”> ข้อความที่ปรารกฏบนหน้าเว็บ </a>
ค่าที่กำหนดให้ใช้            ชื่อไฟล์หรือตำแหน่งของเว็บเพจที่ต้องการเชื่อมโยง
ลิงค์สามารถเชื่อมโยงข้อมูลได้ 3 วิธี คือ
            1. การเชื่อมโยงข้อมูลภายในเว็บหน้าเดียวกัน
            2. การเชื่อมโยงข้อมูลในเว็บเพจหน้าอื่น
            3. การเชื่อมโยงข้อมูลในเว็บไซต์ที่อื่น
Ø การเชื่อมโยงข้อมูลภายในเว็บหน้าเดียวกัน
            หากเรามีข้อมูลภายในเว็บเพจเดียวกันที่ต้องการที่ต้องการเชื่อมโยง โดยเมื่อมีการคลิกที่ลิงค์ให้เลื่อนขึ้นบนหรือลงล่างไปที่ตำแหน่งข้อมูลนั้นอยู่ ให้เราใช้คำสั่งดังนี้
ชื่อแอตทริบิวต์                name
   ตำแหน่งแอตทริบิวต์        อยู่ในแท็กเปิด <a...>
   รูปแบบ                          <a name = “jump”> Jump target </a> สร้างจุดจั๊มป์ชื่อ jump
                                       <a href = “#jump”> Local jump within document </a>
                                       ลิงค์ไปที่จุดจั๊มป์ชื่อ jump
   ค่าที่กำหนด                    ชื่อจุดหมายปลายทาง ชื่ออะไรก็ได้ที่ไม่ซ้ำชื่ออื่นที่อยู่ในเว็บหน้า
                                       เดียวกัน

Ø การเชื่อมโยงข้อมูลในเว็บเพจหน้าอื่น
ชื่อแท็ก                       a
ชื่อแอททริบิวท์             href
ตำแหน่งแท็ก               อยู่ภายในแท็ก <body>...</body>
 รูปแบบแท็ก                <a href = “ส่วนเชื่อมโยง”> ข้อความที่ปรารกฏบนหน้าเว็บ </a>
ค่าที่กำหนดให้ใช้          ชื่อไฟล์หรือตำแหน่งของเว็บเพจที่ต้องการเชื่อมโยง
Ø การเชื่อมโยงข้อมูลในเว็บไซต์ที่อื่น
ชื่อแท็ก                       a
ชื่อแอททริบิวท์             href
ตำแหน่งแท็ก               อยู่ภายในแท็ก <body>...</body>
 รูปแบบแท็ก                <a href = “URL ของเว็บไซต์ที่ต้องการเชื่อมโยง”>
                                  ข้อความที่ปรารกฏบนหน้าเว็บ </a>
ค่าที่กำหนดให้ใช้          ชื่อไฟล์หรือตำแหน่งของเว็บเพจที่ต้องการเชื่อมโยง




-           
1.2   การใช้ภาพเป็นลิงค์
            เพื่อทำให้เว็บเพจดูน่าสนใจ เราอาจใช้ภาพ (Image) เป็นลิงค์เชื่อมกับเว็บเพจอื่นแทนการใช้ข้อความธรรมดา การใช้ภาพเป็นลิงค์เชื่อมโยงไปยังเว็บเพจอื่นนั้นทำได้โดยการใช้คำสั่ง
ชื่อแท็ก                       img
ชื่อแอททริบิวท์             src
ตำแหน่งของแท็ก          อยู่ภายในแท็ก <a>...</a>
รูปแบบแท็ก                 <img src = “รูปภาพที่ใช้เป็นสัญลักษณ์” />
ค่าที่กำหนดให้ใช้          ชื่อรูปภาพที่ใช้เป็นสัญลักษณ์ในการเชื่อมโยง

1.3   การลิงค์ไปยังไฟล์
            ไฟล์ประเภทนี้ได้แก่ ไฟล์รูปภาพ, ไฟล์โปรแกรม, ไฟล์ซิป (zip), ไฟล์เสียง หรือไฟล์มัลติมีเดีย ซึ่งมีลักษณะการใช้งานคล้ายกับการลิงค์แบบอื่นๆ เพียงระบุจุดหมายปลายทางไปยังไฟล์นั้น หากเป็นไฟล์รูปภาพบราวเซอร์ก็จะเปิดให้ดูโดยอัตโนมัติ แต่ถ้าเป็นไฟล์อื่นๆ เราจะพบกับหน้าจอให้ทำการดาวน์โหลด
ชื่อแท็ก                       a
ชื่อแอททริบิวท์             href
ตำแหน่งแท็ก               อยู่ภายในแท็ก <body>...</body>
 รูปแบบแท็ก                <a href = “ชื่อไฟล์อื่นๆ”>
                                  ข้อความที่ปรารกฏบนหน้าเว็บ </a>
1.4   การสร้างลิงค์เพื่อส่ง Email
            ถ้าเราต้องการให้ผู้ที่มาเยี่ยมชนเว็บเพจของเราสามารถติดต่อเราได้ ให้เราสร้างลิงค์ที่ชี้ไปยัง อีเมล์แอดเดรส (Email Address) ของเรา โดยเมื่อผู้ใช้คลิกที่ลิงค์ เขาก็จะสามารถส่งอีเมล์มาถึงเราได้
ชื่อแท็ก                       a
ชื่อแอททริบิวท์             href
ตำแหน่งแท็ก               อยู่ภายในแท็ก <body>...</body>
 รูปแบบแท็ก                <a href = “mailto: ชื่อ email address”>ข้อความที่ลิงค์ </a>



1.5   การกำหนดสีของลิงค์
            โดยปกติลิงค์ที่แสดงในเว็บเพจจะใช้ข้อความขีดเส้นใต้ที่มีสีแตกต่างจากข้อความธรรมดา เพื่อให้ผู้ใช้สังเกตไดง่าย สีของลิงค์จะมีความแตกต่างไปตามสถานะ ดังนี้
            1. link = สีของลิงค์ที่ยังไม่เคยถูกคลิก (Hyperlink)
            2. vlink = สีของลิงค์ที่เคยถูกคลิกไปแล้ว (Visited Hyperlink)
            3. alink = สีของลิงค์ตอนถูกคลิก (Active Link)
ชื่อแท็ก                                   body
ชื่อแอททริบิวท์                         link, vlink และ alink
ตำแหน่งของแท็ก                      อยู่ภายในแท็ก <body...>
 รูปแบบ                                  <body link = “สี” vlink = “สี” alink = “สี”>
1.6   การทำ Image Map
Ø ขั้นที่ 1 กำหนดพื้นที่บนรูปเพื่อใช้ทำลิงค์
ชื่อแท็ก                                area
ชื่อแอททริบิวท์                     shape, coords และ href
ตำแหน่งของแท็ก                  อยู่ภายในแท็ก <map>...</map>
 รูปแบบ                               <area shape = “รูปทรง” cords = “จุดโคออร์ดิเนต”
                                          href = “URL” />
*** shape = รูปทรงของพื้นที่ มีรูปทรงต่างๆ ดังนี้

รูปทรง
ความหมาย
rect
รูปทรงสี่เหลี่ยม ใช้พิกัดโคออร์ดิเนต 4 ค่า คือ จุดมุมบนซ้าย (x1,y1) และจุดมุมล่างขวา (x2,y2) เช่น 5, 5, 40, 20
circle
รูปทรงวงกลม ใช้พิกัดโคออร์ดิเนต 3 ค่า คือ จุดศูนย์กลาง (x,y) และรัศมี (r) เช่น 30, 30, 10
poly
รูปทรงหลายเหลี่ยม ใช้พิกัดโคออร์ดิเนต 2 เท่าของจำนวนจุด เช่น รูปสามเหลี่ยม ใช้พิกัดโคออร์ดิเนต 6 ค่า คือ จุดที่ 1 (x1,y1) จุดที่ 2 (x2,y2) จุดที่ 3 (x3,y3) รูปที่สร้างต้องไม่เกิน 100 จุด
default
เป็นการใช้พื้นที่ส่วนที่เหลือทั้งหมด
*** coords = จุดโคออร์ดิเนต เป็นจุดกำหนดพิกัดของรูปทรง
*** href = เป็นจุดปลายทางที่เราต้องการลิงค์ไป

Ø ขั้นที่ 2 กำหนด map
            การกำหนด map ก็คือการกำหนดพื้นที่หลายๆ พื้นที่ไว้ภายใน map เดียวกัน เพื่อจะนำไปใช้กับรูปภาพได้สะดวก โดยรูปภาพจะติดต่อกับ map เพียง map เดียว ก็จะได้กำหนดพื้นที่ทั้งหมดที่อยู่ภายใน map นั้น
ชื่อแท็ก                                map
ชื่อแอททริบิวท์                     name
ตำแหน่งของแท็ก                  อยู่ภายในแท็ก <body>...</body>
 รูปแบบ                               <map name = “ชื่อ Image Map” >
                                                      <area…>
                                                      <area…>
                                          </map>
Ø ขั้นที่ 3 นำแท็ก <map> มาใช้งานกับรูป
            เมื่อเรากำหนดพื้นที่ที่จะนำมาทำเป็นลิงค์เรียบร้อยแล้ว จากนั้นสร้างแท็ก <map> ของพื้นที่ทั้งหมด สุดท้ายนำ map ที่สร้างไว้ใส่ลงในรูป

ชื่อแอททริบิวท์                     src และ usermap
ตำแหน่งของแท็ก                  อยู่ภายในแท็ก <img…>
รูปแบบ                                <img src = “ชื่อภาพ” usermap = “#ชื่อ image map” />
ค่าที่กำหนดให้ใช้                  ชื่อรูปและชื่อ map โดยชื่อ map ต้องนำหน้าด้วย
                                          เครื่องหมาย

1.7   การสร้างลิงค์แบบ Rollover
      ชื่อแอททริบิวท์                       onmouseover และ onmouseout
      ตำแหน่งของแท็ก                   อยู่ภายในแท็ก <a…>
      รูปแบบ                                onmouseover = “คำสั่งที่ทำงานเมื่อวางเมาส์เหนือวัตถุ”
                                                onmouseout =  “คำสั่งที่ทำงานเมื่อวางเมาส์ออกจากวัตถุ”

                    ชื่อแอททริบิวท์                       id (unique alphanumeric identifier)
                   ตำแหน่งของแท็ก                      อยู่ภายในแท็ก <img…>
                   รูปแบบ                               id = “ระบุชื่อ id เพื่อใช้ในการเรียกออบเบ็กนั้น”

โพสต์ยอดนิยมจากบล็อกนี้

การสร้างเว็บไซต์โดยใช้ HTML

รูปภาพ
การสร้างเว็บไซต์ 1. คำศัพท์ที่ควรรู้            เพื่อให้เกิดความเข้าใจมากขึ้น ก่อนการสร้างเว็บเพจผู้ใช้จำเป็นต้องเข้าใจคำศัพท์ต่อไปนี้ 1.         เว็บเพจ ( Web Page)  เอกสารที่ประกอบไปด้วยข้อมูลที่เป็นอักษร เสียง และภาพต่างๆ ที่บรรจุในแฟ้มเอกสารแต่ละหน้า ที่เปิดอ่านจากโปรแกรม  Web Browser 2.         โฮมเพจ ( Home page)  เว็บเพจหน้าแรกของเว็บไซต์ ข้อกำหนดที่เป็นมาตรฐานต้องมีชื่อไฟล์ว่า  index.html  หรือ  index.htm 3.         เว็บไซต์ ( Web site)  เว็บที่ประกอบด้วยหน้าโฮมเพจและเว็บเพจหลาย ๆ หน้ามาประกอบกัน ตัวอย่าง เช่น  www.dek-d.com  เป็นต้น 4.         เว็บเบราว์เซอร์ ( Web Browser)  โปรแกรมสำเร็จรูปที่ใช้สำหรับเปิดดูเว็บเพจ เว็บเบราว์เซอร์ปัจจุบันเป็นที่นิยม ได้แก่  Microsoft Internet Explorer (IE)  และ  Moszilla FireFox โปรแกรมที่ใช้ เขียนภาษา HTML เช่น D reamweaver Notepat Editplus เป็นต้น 2. การสร้างเว็บเพจด้วยภาษา  HTML (Hypertext Markup Language) 2.1 โครงสร้างของภาษา  HTML   แบ่งเป็น 2 ส่วน ได้แก่  2.2 คำสั่งเบื้องต้นของภาษา  html เ
อ่านเพิ่มเติม

Dreamweaver cs6

รูปภาพ
  การใช้โปรแกรม Dreamweaver CS6 เบื้องต้น การสร้างและการบันทึกหน้าเว็บเพจ   หลักจากที่สร้างเว็บเพจได้ตามต้องการแล้ว   ให้ทำการเซฟไฟล์   โดยมีคำสั่งที่เลือกใช้ได้ ดังนี้ ·        File > New            ใช้สร้างหน้าเว็บเพจใหม่ ·        File > Open       ใช้เปิดหน้าเว็บเพจเก่า ·        File > Save          ใช้บันทึกงานที่กำลังทำอยู่ ·        File > Save As    ใช้บันทึกงานสำหร้บเปลี่ยนชื่อใหม่หรือเปลี่ยนที่จัดเก็บ ·        File > Save All    ใช้บันทึกงานทั้งหมดที่ถูกเปิดแก้ไข ·        กด ปุ่ม F12          ใช้ทดสอบดูผลหน้าเว็บเพจที่สร้างด้วยโปรแกรมเว็บบราวด์เซอร์ ( บันทึกงานก่อนทดสอบ ) 1. หน้าต่างการทำงานของ Dreamweaver สามารถเลือกหน้าต่างการทำงานได้ 3 รูปแบบ โดยการคลิกไอคอนที่อยู่ในแถบเครื่องมือ Toolbar ดังนี้                                    1 ) Code (Show Code View) ให้แสดงหน้าการทำงานแบบเขียนโค้สภาษา HTML 2 ) Split (Show Code and Design) View ให้แสดงหน้าการทำงานแบบเขียนโค้ส และแบบออกแบบ ( Design ) 3 ) Design (Show Design View) ให้แสดงหน้
อ่านเพิ่มเติม

table

1.1    ทดลองสร้างตาราง ชื่อแท็ก                           table, tr และ td ตำแหน่งแท็ก                   table อยู่ภายในแท็ก <body>...</body>                                      tr อยู่ภายในแท็ก <table>...</table>                                      td อยู่ภายในแท็ก <tr>...</tr> รูปแบบแท็ก                    <table>                                                  <tr><td> ข้อความ </td><td> ข้อความ </td></tr>                                                  <tr><td> ข้อความ </td><td> ข้อความ </td></tr>                                      </table> 1.2    การใส่หัวข้อและตีเส้นตาราง              เราสามารถตกแต่งตารางให้ดูง่ายขึ้น โดยการใส่หัวคอลัมน์หรือหัวแถว เพื่ออธิบายความหมายองข้อมูลภายในคอลัมน์หรือภายในแถว โดยใช้แท็ก <th>…</th> ซึ่งจะมีลักษณะการใช้งานเหมือนแท็ก td แต่ข้อความภายในแท็กจะเป็นตัวหนา เป็นการเน้นข้อความ ชื่อแท็ก       
อ่านเพิ่มเติม