You are now being logged in using your Facebook credentials

Font Size

Profile

Layout

Direction

Menu Style

Cpanel

บทที่ 3 : ใส่ภาพและลิงค์

..:: การใส่รูปภาพ

การทำเว็บเพจในหนึ่งหน้า นอกจากจะมีข้อความแล้วยังต้องประกอบด้วยรูปภาพเพื่อเพิ่มความน่าสนใจให้กับเว็บเพจ นอกจากนี้แล้วรูปภาพยังสามารถสื่อความหมายได้ชัดเจนกว่าข้อความ ดังคำกล่าวที่ว่า "หนึ่งภาพแทนพันตัวอักษร" การใส่รูปภาพในเอกสาร HTML นั้นคุณจะต้องเตรียมรูปภาพไว้ก่อนค่ะ โดยใช้แท็กสำหรับแสดงผลรูปภาพดังนี้ค่ะ

           รูปแบบแท็กการใส่รูปภาพ      <img src = "ชื่อภาพ">

 รูปแบบการใส่รูปภาพ

  <html>
  <head><title>
....การใส่รูปภาพ....</title></head>
       <body>
               <img src = "lilies.jpg">        
       </body>
  </html>

 

สำหรับแท็กการใส่รูปภาพ สามารถมี Attribute กำกับเพิ่มเติมได้้ ไม่ว่าจะเป็นขนาดความกว้าง ความสูงของรูปภาพว่าเราต้องการให้แสดงขนาดกว้างและสูง เท่าไหร่ ซึ่งหากเราไม่ได้ระบุภาพจะมีขนาดเท่าขนาดของภาพต้นฉบับ นอกจากนี้เรายังสามารถใส่ขอบของภาพได้ด้วย ซึ่ง Attribute มีดังนี้

                ความกว้าง    width="ตัวเลขระบุความกว้าง"
                ความสูง       height="ตัวเลขระบุความสูง"
                เส้นขอบ      border="ตัวเลขระบุความหนาของเส้นขอบ"

ตัวอย่าง    <img src = "lilies.jpg" width="200" height="150" border="1">

จากตัวอย่าง จะแสดงภาพขนาด 200x150 px. (หน่วยการแสดงผลภาพ แสดงเป็น Pixels) และ่มีขอบ หากไม่ต้องการให้แสดงเส้นขอบให้กำหนด border="0" (หากต้องการใ้ห้ขอบมีความหนามาก ระบุตัวเลขให้มาก) 


 

:: การเชื่อมโยง (ลิงค์)

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

การเชื่อมโยงนี้ สามารถแบ่งได้ทั้ง 4 ประเภท คือ
           1. การเชื่อมโยงระหว่างเว็บเพจ         <a href="ไฟล์เว็บเพจ">...สิ่งที่จะลิงค์...</a>
           2. การเชื่อมโยงนอกเว็บไซต์           <a href="URL">...สิ่งที่จะลิงค์...</a>
           3. การเชื่อมโยงภายในหน้าเว็บเพจ   <a name="กำหนดชื่อปลายทาง"></a>
                                                       และ    <a href="#ชื่อปลายทาง">..สิ่งที่จะลิงค์...</a>
           4.


  <html>
  <head><title>
....การเชื่อมโยงระหว่างเว็บเพจ....</title></head>
       <body>
               <a href="index.html">
คลิ๊กที่นี้เพื่อกลับไปหน้าแรก</a><p> <!--ลิงค์โดยใช้ข้อความ ->       
               <a href="index.html">
<img src="home.gif"></a> <!--ลิงค์โดยใช้รูปภาพ ->       
       </body>
  </html>

 

 รูปแบบการเชื่อมโยงนอกเว็บไซต์


  <html>
  <head><title>
....การเชื่อมโยงนอกเว็บไซต์....</title></head>
       <body>
                <!
--ลิงค์โดยใช้ข้อความ ->
               <a href="http://www.krukikz.com">
ลิงค์มาที่เว็บไซต์ krukikz.com</a><p>
                <!
--ลิงค์โดยใช้รูปภาพ ->
               <a href="http://www.krukikz.com">
<img src="krukikz.gif"></a>        
       </body>
  </html>

 
 การเชื่อมโยงภายในหน้าเว็บเพจ

สำหรับเว็บบ้างเว็บที่มีข้อมูลในแต่ละหน้าเยอะ ๆ ต้องเลื่อนลงไปด้านล่างมาก ๆ ซึ่ง วิธีการแก้ไขปัญหาเหล่านี้ ก็คือการเพิ่มลิงค์เพื่อลิงค์เอกสารในหน้านั้น โดยเราอาจแบ่งตามหัวข้อย่อย ๆ ก็ได้ค่ะ (เหมือนการลิงค์ในหน้านี้ค่ะ) ซึ่งอาจจะมองว่าเป็นในลักษณะของเมนูย่อยก็ได้ค่ะ นอกจากนี้ ก็สามารถใช้ในกรณีที่ลงไปดูข้อมูลด้านล่างแล้วอยากจะเลื่อนมาที่ด้านบนของเว็บ ในส่วนท้ายเพจ เราก็อาจทำลิงค์ ให้คลิ๊กเพื่อ go to top ได้อย่างรวดเร็วค่ะ คงเคยจะเห็นกันมาบ้างแล้วนะค่ะ (ก็เหมือนการลิงค์ในหน้านี้อีกน่ะแหละค่ะ)
 


  <html>
  <head>
  <title>
....การเชื่อมโยงภายในหน้าเว็บเพจ โดยคลิ๊กที่ด้านล่าง แล้วเลื่อนขึ้นมาด้านบน....</title>
  </head>
       <body>
                <!
--กำหนดชื่อปลายทาง เขียนโค้ดส่วนนี้ไว้บริเวณด้านบนของเพจ->
               <a name="top"></a>

                <!--ช่วงระหว่างนี้ต้องมีข้อมูลเยอะ ๆ เกินหนึ่งหน้าเพจสกรีนจึงจะเห็นผลการทำงาน->          

               <!--ลิงค์โดยใช้ข้อความ เขียนโค้ดส่วนนี้ไว้บริเวณด้านล่างของเพจ ->
               <a href="#top">
Go to Top</a><p>
               <!
--ลิงค์โดยใช้รูปภาพ เขียนโค้ดส่วนนี้ไว้บริเวณด้านล่างของเพจ ->
               <a href="#top">
<img src="top.gif"></a>        
       </body>
  </html>

 
 การเชื่อมโยงแบบอีเมล์

สำหรับการเชื่อมโยงแบบนี้ มักจะเห็นบ่อยในเว็บเพจซึ่งเป็นส่วนลิงค์สำหรับให้ผู้เยี่ยมชมส่งเมล์มายังผู้ดูแลเว็บไซต์ โดยใช้ E-mail ตามที่ผู้เขียนเว็บได้ระบุไว้ในแท็กสำหรับลิงค์  การลิงค์แบบนี้นั้นเมื่อผู้ใช้งานคลิ๊กที่ลิงค์ จะมีการเชื่อมโยงไปยังโปรแกรม Microsofe outlook ซึ่งเป็นโปรแกรมสำหรับส่งเมล์ตัวหนึ่ง โดยที่ช่อง address To (ปลายทาง) จะปรากฏ E-mail Address ที่ระบุไว้ที่แท็กลิงค์ปรากฏอยู่
 

  
<html>
  <head><title>
....การเชื่อมโยงแบบอีเมล์....</title></head>
       <body>
                <!
--ลิงค์โดยใช้ข้อความ ->
               <a href="mailto: อีเมลนี้จะถูกป้องกันจากสแปมบอท แต่คุณต้องเปิดการใช้งานจาวาสคริปก่อน ">
ลิงค์เมล์ส่งเมล์ไปที่ อีเมลนี้จะถูกป้องกันจากสแปมบอท แต่คุณต้องเปิดการใช้งานจาวาสคริปก่อน </a><p>
                <!
--ลิงค์โดยใช้รูปภาพ ->
               <a href="mailto: อีเมลนี้จะถูกป้องกันจากสแปมบอท แต่คุณต้องเปิดการใช้งานจาวาสคริปก่อน ">
<img src="contact.gif"></a>        
       </body>
  </html>

 

 

 

 Tip HTML

แท็ก Comment หรือ หมายเหตุ

จะเห็นว่าในโค้ดของบทความนี้ มีแท็ก <!--........-> อยู่ แท็กนี้เป็นแท็ก Comment ในภาษา html โดยข้อความที่ปรากฏอยู่ในแท็กนี้ จะไม่แสดงผลออกทางเว็บบราวเซอร์ค่ะ

 

 

Follow us on

  • Grab our RSS feed
  • Joomla Fan Club

About US

สื่อการสอน joomla จัดทำโดย นางสาวกฤติยา พลหาญ นักศึกษาประกาศนียบัตรบัณฑิต สาขาวิชาชีพครู สควค.คอมพิวเตอร์ มหาวิทยาลัยขอนแก่น

You are here