بازدید: ٣۴١

استفاده از تصاویر گرافیکی بعنوان پیوند(لینک) (آموزش HTML & CSS)

بازگشت به صفحه اصلی آموزش تصویری HTML & CSS

 

1- فایل index.html را در نت پد باز کنید.

2- در زیر فهرست بولت دار لینک ها، تصاویر گرافیکی Chesapeake Bay Retriever، German Shepherd و Yorkshire Terrier را درج کنید:

 

تصویر گرافیکی بعنوان پیوند

فهرست بولتدار نام سگها

 

3- اولین تگ تصویر را در درون تگ های anchor قرار دهید و آن را به صفحه Chesapeake Bay Retriever لینک دهید:

 

تگ تصویر درون تگ anchor

تصویر پیوند دار

 

4- صفحه خانگی (Home) را ذخیره کرده و آن را در مرورگر نمایش دهید.

5- بر روی تصویر گرافیکی Chesapeake Bay Retriever کلیک کنید. باید به صفحه Chesapeake Bay Retriever منتقل شوید.

6- خصوصیت attribute=”0” را به تگ اولین تصویر اضافه کنید:

 

خصوصیت attribute=0

 

7- صفحه خانگی (Home) را ذخیره کرده و مجددا آن را در مرورگر خود نمایش دهید. اکنون دیگر حاشیه آبی رنگ اطراف تصویر وجود ندارد.

 

صفحه خانگی

 

8- فایل german.html را در نت پد باز کنید.

9- در زیر لینک Home، خط زیر را تایپ کنید:

 

 لینک Home

 

10- کلمات German Sherpherd را bold (پررنگ) کنید.

11- حال عبارات Chesapeake Bay Retriever و Yorkshire Terrier را به تصاویر نظیر آنها لینک دهید.

12- صفحه را ذخیره کنید.

13- به همان طریق لینکهای پیمایشی برای صفحه Yorkshire Terrier ایجاد کنید و آن صفحه را ذخیره کنید.

14- در صفحه خانگی (Home)، تصویر گرافیکی German Shepherd را به صفحه German Shepherd لینک دهید.

15- تصویر گرافیکی Yorkshire Terrier را به صفحه Yorkshire Terrier لینک دهید.

16- حاشیه اطراف تمامی تصاویر گرافیکی را حذف کنید.

17- سایت را در مرورگر مشاهده کنید تا متوجه تغییرات آن شوید. 

 

بازگشت به صفحه اصلی آموزش تصویری HTML & CSS

طراحی سایت و سئو توسط ضابط