รูปภาพ(Image) และจุดเชื่อมโยง(Link)


	รูปภาพ(Image) และจุดเชื่อมโยง(Link)

เว็บเพจสำรอง (Backup Webpages) : thaiall.com
ปรับปรุง : 2548-02-25 ()

ยินดีรับ ผู้สนับสนุน เว็บไซต์ด้านการศึกษา
กลุ่มเว็บไซต์นี้ เริ่มพัฒนา พ.ศ.2542
โดยบุคลากรทางการศึกษาด้านคอมพิวเตอร์
โทร. 081-9927223 (ผมเป็นคนลำปางหนา)
ปล. ขอไม่รับ work at home / อาหารเสริม

[ รูปภาพ(Image) และจุดเชื่อมโยง(Link) ]

รูปภาพ(Image) ด้วย <img src=_____.___>
จุดเชื่อมโยง ด้วย <a href=___.htm> ___ </a>
แบบฝึกหัด

รูปภาพ(Image) ด้วย <img src=_____.___>

IMG (Image)

The <IMG> tag is used to incorporate in-line graphics (typically icons or small graphics) into an HTML document. This element is NOT intended for embedding other HTML text. For large figures with captions and text flow see FIG element.

By Dave Raggett, the HTML working group : Internet Engineering Task Force (IETF) - html3.0

ตัวอย่างคำสั่ง	ตัวอย่างผลลัพท์
<img src=/me/nee.jpg> (ภาพอยู่ใน directory /me) หรือ <img src=nee.jpg> (ภาพอยู่ directory เดียวกับแฟ้ม htm) หรือ <img src="nee.jpg">(เหมือนบรรทัดที่สอง ไม่ใส่ " ก็ได้) <img src=http://www.thaiall.com/me/nee.jpg> (การเรียกภาพจาก internet ถึงไม่ใช่ของเราก็เรียกมาแสดงในเว็บเราได้)
<img src=nee.jpg width=50 height=80> (กำหนดความสูง และความกว้างได้) (แต่ขนาดและเวลาที่ใช้ load ภาพยังเหมือนเดิม)
<img src=mypic00.jpg width=50 height=80> <img src=mypic00.jpg width=60 height=70> <img src=mypic00.jpg width=40 height=90> (แสดงหลาย ๆ ภาพต่อกันไป แต่ไม่ชิดกัน)
<img src=nee.jpg width=50><img src=nee.jpg width=60> (ภาพติดกันเพราะไม่มีช่องไฟ หรือ enter)

จุดเชื่อมโยง ด้วย <a href=___.htm> ___ </a>

A (Hypertext Links)

The anchor <A> element is used to define the start and/or destination of a hypertext link. In previous versions of HTML it provided the only means for defining destination anchors within documents, but you can now use any ID attribute as a destination anchor so that links can now be made to divisions, paragraphs and most other elements.

By Dave Raggett, the HTML working group : Internet Engineering Task Force (IETF) - html3.0

ตัวอย่างคำสั่ง	ตัวอย่างผลลัพท์
<a href=htmchr.htm> ตัวอักษรแบบ html </a> (link ไป homepage ใน directory เดียวกับแฟ้ม htm นี้)	ตัวอักษรแบบ html
<a href=http://www.yahoo.com>yahoo</a> (link ไป homepage ใน internet ที่ใดก็ได้ นี่เป็นตัวอย่าง yahoo)	yahoo
<a href=/me/><img src=/me/nee.jpg></a> (link ภาพไปยัง directory /me หากใน directory มีแฟ้ม index.html) (ก็จะเปิดเว็บ index.html ใน /me อัตโนมัติ ถ้าไม่มีก็จะแสดงชื่อแฟ้มทั้งหมดใน /me)
<a href=/me/ target=_new><img src=/me/nee.jpg border=0></a> (border=0 ทำให้สีรอบภาพหายไป) (target=_new หรือ target=xxyyzz จะเปิดเว็บที่กำหนด ในหน้าต่างใหม่)
<a href=/me/ target=_top><img src=http://www.thaiall.com/indexpic/logota.gif></a> (target=_top ทำให้เปิดในจอเดิม และถ้าอยู่ใน frame ก็จะออกมาแทนที่ frame) (เรื่องของ frame จะอยู่ในบทท้าย ๆ ครับ)

แบบฝึกหัด

ให้เขียน homepage โดยทำตามคำสั่งแต่ละข้อต่อไปนี้
ข้อ 1 : ทำการ link yahoo และทดสอบว่า click บนคำว่า yahoo แล้วเปิดหน้าต่างใหม่หรือไม่
ข้อ 2 : ทำหลาย link คนละบรรทัด และต่อกัน สัก 10 link แล้วทดสอบว่าใช้ได้หรือไม่
ข้อ 3 : link logo ของ thaiall(http://www.thaiall.com/indexpic/logota.gif) เมื่อ click logo ให้เปิด thaiall หน้าแรก
ข้อ 4 : ไปหา logo ที่เว็บใดสักแห่ง และมาทำเหมือนที่ทำกับข้อ 3
ข้อ 5 : ไปหา logo ที่เว็บใดสักแห่ง แล้ว copy logo มา แล้วให้ทำ link จาก logo ที่ copy มา

[ Editor on web for HTML ]