วันอาทิตย์ที่ 12 สิงหาคม พ.ศ. 2555

HTML - ลิงก์และรูปภาพ


กำหนดรูปแบบการลิงค์ใน BODY


<BODY LINK=#rrggbb VLINK=#rrggbb ALINK=#rrggbb>


         LINK = สีของตัวอักษรที่ยังไม่ได้เข้าไปที่ลิงค์นั้น
         VLINK = สีของตัวอักษรที่เข้าไปในลิงค์นั้นแล้ว
         ALINK = สีของตัวอักษรที่กำลังอยู่ในลิงค์นั้น


รูปแบบลิงค์ต่างๆ


<a href = “ไฟล์ html”> ข้อความ </a> ลิงค์ต่างไฟล์

<a href = “#ชื่อตามต้องการ”> ข้อความ </a> และ <a name = “ชื่อที่ตั้งไว้ที่ลิงค์”> ข้อความ </a> ลิงค์ภายในไฟล์

<a href = “http://URL ที่ต้องการ”> ข้อความ </a> ลิงค์ไปเว็บไซต์

<a href = “ไฟล์.นามสกุล”> ข้อความ </a> ลิงค์ไป Download

<a href = “ไฟล์ html”><img sre= “ชื่อไฟล์รูปภาพ” alt = “คำอธิบาย”> </a> ลิงค์ไฟล์ด้วยรูปภาพ


ระบุวินโดว์ที่ต้องการให้แสดงเว็บเพจปลายทางการลิงค์


          TARGET = “window name” เป็นแอททริบิวต์ใส่ไว้ในแท็ก A

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

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


Tooltips (แสดงผลได้เฉพาะบน IE 4 ขึ้นไป)


<a href = “ลิงก์” title = “คำอธิบายลิงก์”> ข้อความ </a> สำหรับลิงค์แบบข้อความ

<input type = “text” title = “คำอธิบาย”> สำหรับ Text box ในฟอร์ม

<b title = “คำอธิบาย”> ข้อความ </b> ใช้กับข้อความ


ใส่รูปภาพในเว็บเพจ


<img src = “ชื่อรูปภาพนามสกุล .gif หรือ .jpg”> หรือ <img src = .ชื่อรูปภาพ .gif หรือ .jpg” alt = “ข้อความอธิบาย”>

          align = “top/middle/bottom/left/right” จัดตำแหน่งของภาพ
          width = “ค่าตัวเลข” ความกว้างของรูปภาพ
          height = “ค่าตัวเลข” ความสูงของรูปภาพ
          hspace = “ค่าตัวเลข” ช่องว่างแนวนอนระหว่างรูปและข้อความ
          vspace = “ค่าตัวเลข” ช่องว่างแนวตั้งระหว่างรูปและข้อความ
          border = “ค่าตัวเลข” กรอบของรูปภาพให้สีเดียวกับสีตัวอักษร ถ้าใช้กับ IE จะแสดงกรอบเมื่อรูปภาพมีการสร้างลิงค์

<IMG SRC = “ภาพความละเอียดปกติ” LOWSRC = “ภาพความละเอียดต่ำ” ALT = “ข้อความอธิบาย”> ค่อยๆ แสดงภาพ

การทำ Image Map คือการทำให้รูปภาพ 1 รูป สามารถเชื่อมโยงไปยังจุดต่าง ๆ ได้หลายแห่ง

   <MAP NAME=mapname>
     <AREA SHAPE=shape COORDS="x1, y1, x2, y2" HREF=URL>
     <AREA SHAPE=shape COORDS="x1, y1, x2, y2" HREF=URL>
   </MAP>
   <IMG SRC=filename USEMAP=#mapname>

โดย
          mapname = ชื่อของ Image Map
          shape = ชื่อรูปทรงของพื้นที่ มีอยู่ 4 ชนิด คือ
             Circle วงกลม
             Point จุด
             Polygon รูปหลายเหลี่ยม
             Rectangle สี่เหลี่ยม
COORDS = กำหนดพิกัดของพื้นที่ ดังนี้
             Circle       มี x1, y1, r1
             Point        มี x1, y1
             Polygon   มี x1, y1, x2, y2, ... xn, yn
             Rectangle มี x1, y1, x2, y2
filename = ชื่อไฟล์รูปภาพที่ต้องการนำมาสร้าง Image Map
mapname = ชื่อ Image Map ที่กำหนดไว้ใน MAP NAME และต้องมี # นำหน้าด้วย


ตอนต่อไป -> ฟอร์ม




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