Session3 part1

Orjix

www.RongRean.com

หลั�กสู�ตร สูรางเว็�บด้ว็ย HTML: Session ที่�� 3 ตอนที่�� 1

www.rongrean.com Orjix

Contents

การสูรางลั�งค์� <a>1

ใช้ภาพเป็ นลั�งค์� <img>2

การลั�งค์�ไป็ไฟลั�อ#�นๆที่��ไม่&ใช้&เอกสูาร HTML

3

การสูรางลั�งค์�เพ#�อสู&งอ�เม่ลัลั�4

ก'าหนด้สู�ของลั�งค์�5

การสูรางลั�งค์�แบบ rollover6

การสูรางลั�งค์� <a>

ร�ป็แบบของค์'าสู��งแที่�ก <a> ม่�ด้�งน�* <body>

<a href=“ชื่��อไฟล์�หรื�อตำ� แหน่�งของหน่� เว็�บเพจ">ข�อคว็ มอะไรืก็�ได้�</a>

</body>


ส่�ว็น่เชื่��อมโยงหรื�อค� ของ href=“…” น่#$น่ ส่ ม รืถเชื่��อมโยงข�อม&ล์ได้� 3 ว็'ธี)ด้�ว็ยก็#น่

• ก็ รืเชื่��อมโยงข�อม&ล์ภ ยใน่หน่� เว็�บเพจเด้)ยว็ก็#น่• ก็ รืเชื่��อมโยงข�อม&ล์ใน่หน่� เว็�บเพจอ��น่• ก็ รืเชื่��อมโยงข�อม&ล์ใน่เว็�บไซตำ�อ��น่

ส่�ว็น่เชื่��อมโยงหรื�อค� ของ href=“…” น่#$น่ ส่ ม รืถเชื่��อมโยงข�อม&ล์ได้� 3 ว็'ธี)ด้�ว็ยก็#น่

• ก็ รืเชื่��อมโยงข�อม&ล์ภ ยใน่หน่� เว็�บเพจเด้)ยว็ก็#น่• ก็ รืเชื่��อมโยงข�อม&ล์ใน่หน่� เว็�บเพจอ��น่• ก็ รืเชื่��อมโยงข�อม&ล์ใน่เว็�บไซตำ�อ��น่

ตำ#ว็อย� ง<body> <a href=“ http://www.google.com"> google </a></body>

การเช้#�อม่โยงขอม่�ลัภายในเว็�บเพจเด้�ยว็ก�น


<body> <a href="#entertain">entertain</a>

<a href="#family">Family</a><a href="#computer">Computer</a> <hr>

<a name="entertain">This is entertain</a> 

<a name="family">This is family</a> 

<a name="computer">This is computer</a> </body>

<body> <a href="#entertain">entertain</a>

<a href="#family">Family</a><a href="#computer">Computer</a> <hr>

<a name="entertain">This is entertain</a> 

<a name="family">This is family</a> 

<a name="computer">This is computer</a> </body>

ก็ รืคล์'ก็ที่)� ล์'งค� ซ.�งได้�ตำ#$งค� ของ href ไว็�เป็0น่ “#ชื่��อของแที่�ก็” <a> ที่)�เป็0น่ เป็1 หม ย จะก็รืะโด้ด้ไป็ย#งจ2ด้เชื่��อมโยงที่)�ม)ชื่��อตำรืงก็#บค� ชื่��อของแที่�ก็

การเช้#�อม่โยงขอม่�ลัภายในเว็�บเพจเด้�ยว็ก�น


ข�อม&ล์ที่#$งหมด้ที่)�ม)ใน่หน่� เว็�บเพจข�อม&ล์ที่#$งหมด้ที่)�ม)ใน่หน่� เว็�บเพจ

ก็ด้ตำรืงน่)$ ก็ด้ตำรืงน่)$

การเช้#�อม่โยงขอม่�ลัไป็หนาเว็�บเพจอ#�น แต&อย�&ในเว็�บไซต�เด้�ยว็ก�น

เราสูาม่ารถเช้#�อม่โยงขอม่�ลัไป็ย�งเว็�บเพจอ#�นใด้ด้�งน�*


เรื'�มจ ก็ส่รื� งหน่� เว็�บเพจไว็�ใน่ directory เด้)ยว็ก็#น่ใน่ตำ#ว็อย� งน่)$ เรื ได้�ส่รื� งไฟล์� html ข.$น่ม ส่ มไฟล์�ค�อ first_html, page2 แล์ะ page3โด้ยว็ งไว็�ใน่ desktop เหม�อน่ก็#น่

เรื'�มจ ก็ส่รื� งหน่� เว็�บเพจไว็�ใน่ directory เด้)ยว็ก็#น่ใน่ตำ#ว็อย� งน่)$ เรื ได้�ส่รื� งไฟล์� html ข.$น่ม ส่ มไฟล์�ค�อ first_html, page2 แล์ะ page3โด้ยว็ งไว็�ใน่ desktop เหม�อน่ก็#น่

หล์#งจ ก็น่#$น่เข)ยน่โค�ด้เชื่��อมโยงด้#งน่)$<body>

<a href="page2.html">go to page2

</a><hr><a href="page3.html">

go to page3</a>

</body>

หล์#งจ ก็น่#$น่เข)ยน่โค�ด้เชื่��อมโยงด้#งน่)$<body>

<a href="page2.html">go to page2

</a><hr><a href="page3.html">

go to page3</a>

</body>

ผล์ที่)�ได้�ค�อผล์ที่)�ได้�ค�อ

First_html.html

ก็ด้ล์'งค�น่)$

ใน่ตำ#ว็อย� ง เรื ก็ด้ล์'งค�ที่)�ชื่��อว็� go to page2 ซ.�งเชื่��อมโยงไป็ที่)� page2.html เชื่�น่เด้)ยว็ก็#น่ก็#บล์'งค� go to page3 ซ.�งเชื่��อมโยงไป็ที่)� page3.html

การเช้#�อม่โยงขอม่�ลัไป็หนาเว็�บเพจอ#�น แต&อย�&ในเว็�บไซต�เด้�ยว็ก�น

ในกรณี�ที่��ไฟลั� html ของเราอย�&ค์นลัะ directory เราจะใช้ว็�ธี�เช้#�อม่โยงค์ลัายก�บว็�ธี�เด้�ม่ เพ�ยงแต&เป็ลั��ยนการอางถ2งไฟลั�ป็ลัายที่างใหม่& เช้&น


เรื น่� ไฟล์� page2 ก็#บ page3 ไป็ไว็�ใน่ Folder ‘next page’ เรื น่� ไฟล์� page2 ก็#บ page3 ไป็ไว็�ใน่ Folder ‘next page’

ส่'�งที่)�เรื ตำ�องที่� เพ'�มก็�ค�อเป็ล์)�ยน่ก็ รือ� งถ.งไฟล์�ป็ล์ ยที่ งใหม�

<body><a href=“next

page/page2.html">go to page2 </a><hr><a href=“next

page/page3.html">go to page3</a>

</body>

ส่'�งที่)�เรื ตำ�องที่� เพ'�มก็�ค�อเป็ล์)�ยน่ก็ รือ� งถ.งไฟล์�ป็ล์ ยที่ งใหม�

<body><a href=“next

page/page2.html">go to page2 </a><hr><a href=“next

page/page3.html">go to page3</a>

</body>

ที่'าค์ว็าม่เขาใจก�บ relative path names

การอางถ2ง directory แบบ hierachy


A

B C D

E F จ ก็ B → E เชื่��อมโยงโด้ยใชื่� E/page.htmlจ ก็ B → A เชื่��อมโยงโด้ยใชื่� ../page.htmlจ ก็ B → C เชื่��อมโยงโด้ยใชื่� ../C/page.htmlจ ก็ D → F เชื่��อมโยงโด้ยใชื่� ../B/F/page.html

จ ก็ B → E เชื่��อมโยงโด้ยใชื่� E/page.htmlจ ก็ B → A เชื่��อมโยงโด้ยใชื่� ../page.htmlจ ก็ B → C เชื่��อมโยงโด้ยใชื่� ../C/page.htmlจ ก็ D → F เชื่��อมโยงโด้ยใชื่� ../B/F/page.html

อ� งถ.ง directory ส่&งก็ว็� ด้�ว็ย “../ชื่��อไฟล์�”อ� งถ.ง directory ตำ�� ก็ว็� ด้�ว็ย “ชื่��อ folder/ชื่��อไฟล์�”

อ� งถ.ง directory ส่&งก็ว็� ด้�ว็ย “../ชื่��อไฟล์�”อ� งถ.ง directory ตำ�� ก็ว็� ด้�ว็ย “ชื่��อ folder/ชื่��อไฟล์�”

การเช้#�อม่โยงขอม่�ลัไป็เว็�บไซต�อ#�นเราสูาม่ารถเช้#�อม่โยงขอม่�ลัไป็ที่��เว็�บไซต�อ#�นได้โด้ยการ

ระบ3 url ของเว็�บเพจที่��ตองการไว็ภายในแที่�ก <a href=“…”> ด้�งน�*


<body><a

href=“http://www.google.com">google</a><a

href=“http://www.yahoo.com">yahoo</a>

</body>

<body><a

href=“http://www.google.com">google</a><a

href=“http://www.yahoo.com">yahoo</a>

</body>

ก็ด้ล์'งค�น่)$

*โด้ยป็รืก็ตำ'จะเป็4ด้เว็�บเพจใหม�ใน่ browser เด้'ม แตำ�เรื ส่ ม รืถก็� หน่ด้ให�เป็4ด้ใน่หน่� browser ใหม�ได้�ด้#งน่)$

<a href=“…” target=“_blank”>……….</a>

*โด้ยป็รืก็ตำ'จะเป็4ด้เว็�บเพจใหม�ใน่ browser เด้'ม แตำ�เรื ส่ ม รืถก็� หน่ด้ให�เป็4ด้ใน่หน่� browser ใหม�ได้�ด้#งน่)$

<a href=“…” target=“_blank”>……….</a>

ใช้ภาพเป็ นลั�งค์�เพ#�อที่'าใหเว็�เพจด้�น&าสูนใจ เราอาจใช้ภาพเป็ นลั�งค์�แที่น

การใช้ขอค์ว็าม่แบบเก&าได้โด้ย


<img src=“ชื่��อแล์ะตำ� แหน่�งของรื&ป็"/> เชื่�น่ <img src="spring09.gif"/>โด้ยที่)�แที่�ก็ <img> จะตำ�องอย&�ภ ยใตำ�แที่�ก็ <body>

<img src=“ชื่��อแล์ะตำ� แหน่�งของรื&ป็"/> เชื่�น่ <img src="spring09.gif"/>โด้ยที่)�แที่�ก็ <img> จะตำ�องอย&�ภ ยใตำ�แที่�ก็ <body>

ก็ รืเชื่��อมโยงก็#บไฟล์�รื&ป็ก็ รืเชื่��อมโยงก็#บไฟล์�รื&ป็

จ ก็น่#$น่เรื จะเชื่��อมโยงไป็ย#งเว็�บเพจอ��น่โด้ยใส่�แที่�ก็ <img> ไว็�ภ ยใตำ�แที่�ก็ <a href=“…”> ด้#งเชื่�น่ตำ#ว็อย� งน่)$

<body><a href="http://www.google.com"><img src="spring09.gif"/></a>

</body>

เรื จะเชื่��อมโยงไป็ย#งเว็�บ google.com โด้ยใชื่�รื&ป็ภ พ spring09.gif แที่น่ข�อคว็ ม ด้#งน่#$น่เม��อเรื คล์'ก็ที่)�รื&ป็ภ พจะเป็0น่ก็ รืเชื่��อมโยงไป็ที่)�เว็�บเพจ http://www.google.com

จ ก็น่#$น่เรื จะเชื่��อมโยงไป็ย#งเว็�บเพจอ��น่โด้ยใส่�แที่�ก็ <img> ไว็�ภ ยใตำ�แที่�ก็ <a href=“…”> ด้#งเชื่�น่ตำ#ว็อย� งน่)$

<body><a href="http://www.google.com"><img src="spring09.gif"/></a>

</body>

เรื จะเชื่��อมโยงไป็ย#งเว็�บ google.com โด้ยใชื่�รื&ป็ภ พ spring09.gif แที่น่ข�อคว็ ม ด้#งน่#$น่เม��อเรื คล์'ก็ที่)�รื&ป็ภ พจะเป็0น่ก็ รืเชื่��อมโยงไป็ที่)�เว็�บเพจ http://www.google.com

ก็ด้ที่)�รื&ป็ภ พน่)$

การลั�งค์�ไป็ย�งไฟลั�อ#�นๆ ที่��ไม่&ใช้&เอกสูาร HTML

ไฟลั�ร�ป็ภาพ ไฟลั�โป็รแกรม่ ไฟลั�ซ�ป็(zip ) ไฟลั�เสู�ยง หร#อไฟลั�ม่�ลัต�ม่�เด้�ย ม่�ลั�กษณีะการใช้งานค์ลัายก�บลั�งค์�อ#�นๆ หากเป็ นร�ป็ browser ก�จะเป็5ด้ใหโด้ยอ�ตโนม่�ต� สู&ว็นไฟลั�อ#�นๆเราจะพบก�บหนาจอสู'าหร�บด้าว็น�โหลัด้


<a href=“ชื่��อไฟล์�อ��น่ๆ”> เชื่�น่

<body><a href="2547097.jpg">image</a><hr><a href="Retro Avatars.zip">zip file</a><hr><a href=“[Soulciety_sub]PERSONA -Trinity Soul -01[Th][1280x720 XviD][7269C185].avi">video</a></body>

<a href=“ชื่��อไฟล์�อ��น่ๆ”> เชื่�น่

<body><a href="2547097.jpg">image</a><hr><a href="Retro Avatars.zip">zip file</a><hr><a href=“[Soulciety_sub]PERSONA -Trinity Soul -01[Th][1280x720 XviD][7269C185].avi">video</a></body>

ว็'ธี)ก็ รืเรื)ยก็ใชื่�ว็'ธี)ก็ รืเรื)ยก็ใชื่�

การลั�งค์�ไป็ย�งไฟลั�อ#�นๆ ที่��ไม่&ใช้&เอกสูาร HTML

ต�ว็อย&างการเช้#�อม่โยงไป็ย�งไฟลั�อ#�นๆ


จะได้�หน่� เว็�บเพจแบบน่)$จะได้�หน่� เว็�บเพจแบบน่)$

การสูรางลั�งค์�เพ#�อสู&ง Email

ถาเราตองการใหผู้�เย��ยม่ช้ม่เว็�บเพจของเราสูาม่ารถต�ด้ต&อก�บเราได้ ใหเราสูรางลั�งค์�ที่��ช้�*ไป็ย�งอ�เม่ลัลั�แอด้เด้รสู ด้�งน�*


<a href=“mailto: [email protected]”>ข�อคว็ ม</a> เชื่�น่

<body><a href=“mailto: [email protected]">To. P' bank</a></body>

<a href=“mailto: [email protected]”>ข�อคว็ ม</a> เชื่�น่

<body><a href=“mailto: [email protected]">To. P' bank</a></body>

การสูรางลั�งค์�เพ#�อสู&ง Email


คล์'ก็ที่)�ล์'งค�น่)$ คล์'ก็ที่)�ล์'งค�น่)$

จะเป็0น่ก็ รืเป็4ด้หน่� ตำ� งของ microsoft outlook ซ.�งเป็0น่โป็รืแก็รืมที่)�ใชื่�ใน่ก็ รืส่�งอ)เมล์ล์�ข.$น่ม

ก'าหนด้สู�ของลั�งค์�โด้ยป็รกต�ลั�งค์�ในเว็�บเพจจะใช้ขอค์ว็าม่ข�ด้เสูนใตที่��ม่�สู�

ต&างไป็จากขอค์ว็าม่ธีรม่ด้า เพ#�อใหผู้�ใช้สู�งเกตง&าย สู�ของลั�งค์�จะต&างก�นไป็ตาม่สูถานะด้�งน�*


• ส่)ของล์'งค�ที่)�ย#งไม�เคยถ&ก็คล์'ก็ (Hyperlink ) : link• ส่)ของล์'งค�ที่)�เคยถ&ก็คล์'ก็ไป็แล์�ว็ (Visited link ) : vlink• ส่)ของล์'งค�ที่)�ก็� ล์#งถ&ก็คล์'ก็ (Active link ) : alink

• ส่)ของล์'งค�ที่)�ย#งไม�เคยถ&ก็คล์'ก็ (Hyperlink ) : link• ส่)ของล์'งค�ที่)�เคยถ&ก็คล์'ก็ไป็แล์�ว็ (Visited link ) : vlink• ส่)ของล์'งค�ที่)�ก็� ล์#งถ&ก็คล์'ก็ (Active link ) : alink

โด้ย attribute เหล์� น่)$เรื จะใส่�ไว็�ภ ยใตำ�แที่�ก็ <body>

<body link="green" vlink="blue" alink="red">

<a href="#">normal link</a> 

<a href="#">visited link</a> 

<a href="#">active link</a></body>

<body link="green" vlink="blue" alink="red">

<a href="#">normal link</a> 

<a href="#">visited link</a> 

<a href="#">active link</a></body>

ล์'งค�ที่)�ย#งไม�ถ&ก็คล์'ก็ล์'งค�ที่)�ถ&ก็คล์'ก็แล์�ว็ล์'งค�ที่)�ก็� ล์#งถ&ก็คล์'ก็

การสูรางลั�งค์�แบบ rollover

ในสู&ว็นน�*จะเป็ นการเพ��ม่ลั�กเลั&นใหก�บร�ป็ภาพ โด้ยเม่#�อเราน'าเม่าสู�ไป็ว็างไว็บนร�ป็ภาพ ร�ป็ก�จะเป็ลั��ยนไป็เป็ นอ�กร�ป็หน2�ง แลัะเม่#�อน'าเม่าสู�ออกก�จะกลั�บม่าเป็ นร�ป็เด้�ม่

การที่'างานในสู&ว็นน�*เราตองเข�ยนค์'าสู��งของ script เพ��ม่เต�ม่ในสู&ว็นที่��เร�ยกว็&า Event handler หร#อค์'าสู��งตอบสูนองเหต3การณี�


Attribute ที่)�ใชื่�ค�อ onmouseover แล์ะ onmouseout โด้ยป็รืะก็ ศไว็�ภ ยใตำ�แที่�ก็ <a>

Onmouseover : ค� ส่#�งที่� ง น่เม��อว็ น่เม� ส่�เหน่�อว็#ตำถ2Onmouseout : ค� ส่#�งที่� ง น่เม��อเล์��อน่เม� ส่�ออก็น่อก็ว็#ตำถ2

Attribute ที่)�ใชื่�ค�อ onmouseover แล์ะ onmouseout โด้ยป็รืะก็ ศไว็�ภ ยใตำ�แที่�ก็ <a>

Onmouseover : ค� ส่#�งที่� ง น่เม��อว็ น่เม� ส่�เหน่�อว็#ตำถ2Onmouseout : ค� ส่#�งที่� ง น่เม��อเล์��อน่เม� ส่�ออก็น่อก็ว็#ตำถ2

<body><a href="#" onmouseover="pic.src='after.jpg'" onmouseout="pic.src='before.jpg'">

<img id="pic" src="before.jpg"/></a> 

</body>

<body><a href="#" onmouseover="pic.src='after.jpg'" onmouseout="pic.src='before.jpg'">

<img id="pic" src="before.jpg"/></a> 

</body>

ตำ#ว็อย� งตำ#ว็อย� ง

ก็� หน่ด้ให�เป็ล์)�ยน่รื&ป็ภ พเม��อว็ งเม� เหน่�อรื&ป็เด้'มก็� หน่ด้รื&ป็เป็ล์)�ยน่รื&ป็ภ พเม��อเล์��อน่เม� ส่�ออก็ก็� หน่ด้รื&ป็ภ ยเรื'�มตำ�น่

การสูรางลั�งค์�แบบ rollover


น่� เม� ส่�ไป็ว็ งบน่รื&ป็onmouseover

เล์��อน่เม� ส่�ออก็จ ก็รื&ป็onmouseout

After.jpgbefore.jpg

*ข�อคว็รืรืะว็#ง* ห ก็เรื ไม�ใส่� attribute ‘onmouseout’ เว็ล์ เรื เล์��อน่เม� ส่�ออก็จ ก็รื&ป็ รื&ป็จะไม�เป็ล์)�ยน่ก็ล์#บเป็0น่รื&ป็เด้'ม

Documents

Session3 part1