Session3 part1

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

Contents www.rongrean.com Orjix การสร้างลิงค์ <a> 1 ใช้ภาพเป็นลิงค์ <img> 2 การลิงค์ไปไฟล์อื่นๆที่ไม่ใช่เอกสาร HTML 3 การสร้างลิงค์เพื่อส่งอีเมลล์ 4 กำหนดสีของลิงค์ 5 การสร้างลิงค์แบบ rollover 6

การสร้างลิงค์ <a> ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],www.rongrean.com Orjix ,[object Object],[object Object],[object Object],[object Object],ตัวอย่าง <body> <a href=“ http://www.google.com "> google </a> </body>

การเชื่อมโยงข้อมูลภายในเว็บเพจเดียวกัน www.rongrean.com Orjix <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 ไว้เป็น “ # ชื่อของแท็ก ” <a> ที่เป็น เป้าหมาย จะกระโดดไปยังจุดเชื่อมโยงที่มีชื่อตรงกับค่า ชื่อของแท็ก

การเชื่อมโยงข้อมูลภายในเว็บเพจเดียวกัน www.rongrean.com Orjix ข้อมูลทั้งหมดที่มีในหน้าเว็บเพจ กดตรงนี้ กดตรงนี้

การเชื่อมโยงข้อมูลไปหน้าเว็บเพจอื่น แต่อยู่ในเว็บไซต์เดียวกัน ,[object Object],www.rongrean.com Orjix เริ่มจากสร้างหน้าเว็บเพจไว้ใน 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> ผลที่ได้คือ First_html.html กดลิงค์นี้ ในตัวอย่าง เรากดลิงค์ที่ชื่อว่า go to page2 ซึ่งเชื่อมโยงไปที่ page2.html เช่นเดียวกันกับลิงค์ go to page3 ซึ่งเชื่อมโยงไปที่ page3.html

การเชื่อมโยงข้อมูลไปหน้าเว็บเพจอื่น แต่อยู่ในเว็บไซต์เดียวกัน ,[object Object],www.rongrean.com Orjix เรานำไฟล์ 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>

ทำความเข้าใจกับ relative path names ,[object Object],www.rongrean.com Orjix 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 อ้างถึง directory สูงกว่าด้วย “ ../ ชื่อไฟล์ ” อ้างถึง directory ต่ำกว่าด้วย “ ชื่อ folder/ ชื่อไฟล์ ”

การเชื่อมโยงข้อมูลไปเว็บไซต์อื่น ,[object Object],www.rongrean.com Orjix <body> <a href=“ http://www.google.com "> google </a> <a href=“ http://www.yahoo.com "> yahoo </a> </body> กดลิงค์นี้ * โดยปรกติจะเปิดเว็บเพจใหม่ใน browser เดิม แต่เราสามารถกำหนดให้เปิดในหน้า browser ใหม่ได้ดังนี้ <a href=“…” target=“_blank” >……….</a>

ใช้ภาพเป็นลิงค์ ,[object Object],www.rongrean.com Orjix <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 แทนข้อความ ดังนั้นเมื่อเราคลิกที่รูปภาพจะเป็นการเชื่อมโยงไปที่เว็บเพจ http://www.google.com กดที่รูปภาพนี้

การลิงค์ไปยังไฟล์อื่นๆ ที่ไม่ใช่เอกสาร HTML ,[object Object],www.rongrean.com Orjix <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 ,[object Object],www.rongrean.com Orjix

การสร้างลิงค์เพื่อส่ง Email ,[object Object],จะได้หน้าเว็บเพจแบบนี้ www.rongrean.com Orjix <a href=“mailto: email@hotamail.com” > ข้อความ </a> เช่น <body> <a href=“ mailto: ra_ta_poom@hotmail.com ">To. P' bank</a> </body>

การสร้างลิงค์เพื่อส่ง Email www.rongrean.com Orjix คลิกที่ลิงค์นี้ จะเป็นการเปิดหน้าต่างของ microsoft outlook ซึ่งเป็นโปรแกรมที่ใช้ในการส่งอีเมลล์ขึ้นมา

กำหนดสีของลิงค์ ,[object Object],www.rongrean.com Orjix ,[object Object],[object Object],[object Object],โดย 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> ลิงค์ที่ยังไม่ถูกคลิก ลิงค์ที่ถูกคลิกแล้ว ลิงค์ที่กำลังถูกคลิก

การสร้างลิงค์แบบ rollover ,[object Object],[object Object],www.rongrean.com Orjix Attribute ที่ใช้คือ onmouseover และ onmouseout โดยประกาศไว้ภายใต้แท็ก <a> Onmouseover : คำสั่งทำงานเมื่อวานเม้าส์เหนือวัตถุ Onmouseout : คำสั่งทำงานเมื่อเลื่อนเม้าส์ออกนอกวัตถุ ,[object Object],[object Object],[object Object],[object Object],[object Object],ตัวอย่าง กำหนดให้เปลี่ยนรูปภาพเมื่อวางเม้าเหนือรูปเดิม กำหนดรูปเปลี่ยนรูปภาพเมื่อเลื่อนเม้าส์ออก กำหนดรูปภายเริ่มต้น

การสร้างลิงค์แบบ rollover www.rongrean.com Orjix นำเม้าส์ไปวางบนรูป onmouseover เลื่อนเม้าส์ออกจากรูป onmouseout After.jpg before.jpg * ข้อควรระวัง * หากเราไม่ใส่ attribute ‘onmouseout’ เวลาเราเลื่อนเม้าส์ออกจากรูป รูปจะไม่เปลี่ยนกลับเป็นรูปเดิม

Session3 part1

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Session3 part1

Semelhante a Session3 part1 (12)

Mais de banputer

Mais de banputer (9)

Session3 part1