آموزش HTML فصل سوم – ساخت لینک با استفاده از عکس

ساخت لینک با استفاده از عکس

در مطالب قبلی نحوه ساختن لینک به دیگر صفحات را توضیح دادیم. حال در این قسمت میخواهیم بدانیم که چگونه میتوان لینک به دیگر صفحات را با استفاده از عکس ایجاد کرد.به این صورت که با کلیک بر روی عکس به صفحه مورد نظر منتقل شویم.همانطور که قبلا اشاره شد برای ساخت لینک از تگ <a> استفاده میشود.اکنون برای اینکه لینک را بوسیله عکس ایجاد کنیم میبایست درون تگ <a>، تگ > <img را قرار دهیم.برای نمونه میخواهیم با استفاده از یک تصویر لینکی به سایت PCTech.ir بسازیم.

ابتدا یک سند html ایجاد کرده و در قسمت body آن یک لینک به صفحه اصلی سایت قرار میدهیم.سپس درون یا تگ یک تگ <img> نوشته و درون آن قرار میدهیم.

<html>

<head>

<title>Learning html</title>

</head>

<body>

<a href =http://rtl-automatic.ir> <img =”src=”http://rtl-automatic.ir/uploads/PCTech.jpg”></a>

</body>

</html>

پس از ذخیره این کد html نتیجه را مشاهده کنید.

همانطور که میبینید با کلیک روی عکس،به صفحه اصلی این سایت منتقل میشویم.اغلب مرورگرها دور تصاویری که دارای لینک هستند یک حاشیه ایجاد میکنند.برای اینکه این خط دیده نشود از شناسه ای به نام border استفاده میشود.مقدار این شناسه را برای دیده نشدن مبپیباست برابر صفر قرار داد.اگر این عدد را بزرگتر از صفر قرار دهیم به ازای بزرگی عدد حاشیه مورد نظر ضخیم تر خواهد شد.

برای مشاهده تاثیر این شناسه به مثال زیر توجه نمایید.

<html>

<head>

<title>Learning html</title>

</head>

<body>

<a href =http://rtl-automatic.ir> <img =”src=”http://rtl-automatic.ir/uploads/PCTech.jpg” border=”۰”></a>

</body>

</html>

حال نتیجه را مشاهده نمایید. ملاحظه میکنید که خط حاشیه ای کنار تصویر از بین رفته است.

در پایان این قسمت میخواهیم نحوه گذاشتن کامنت در عکس ها را مشاهده کنیم.این کامنت ها زمانی که عکس به هر دلیل در صفحه نمایش داده نشود در جای خالی آن نمایش داده میشود و به کاربر میگوید که در آن محل چه تصویری قرار داشته است.

شناسه مورد نظر در این قسمت شناسه Alt میباشد.متن کامنت مورد نظر را به عنوان مقدار به این شناسه میدهیم.سپس به هر دلیلی که تصویر مورد نظر لود نشد، این متن به عنوان تصویر قرار خواهد گرفت.

حال به عنوان مثال یک سند html ایجاد کرده و در آن از تگ <img> استفاده میکنیم.برای این تگ شناسه Alt را با مقدار PCTech logo قرار میدهیم. وبرای اینکه تاثیر این شناسه را مشاهده کنیم ،آدرس لینک تصویر را اشتبه وارد میکنیم.

<html>

<head>

<title>Learning html</title>

</head>

<body>

<img =”src=”http://rtl-automatic.ir/uploads/123321.jpg” Alt=”PCTech Logo”>

</body>

</html>

حال فایل را ذخیره کرده و نتیجه کار را مشاهده میکنیم.

همانطور که ملاحظه میکنید، این کامنت جایگزین به علت نمایش داده نشدن عکس اصلی، به صورت جایگزین آن قرار گرفته است.

توصیه میکنیم تا حد امکان برای عکس های خود از این کامنت استفاده نمایید.در این صورت صفحه شما میتواند برای همه کاربران سایت شما مفید باشد.چون ممکن است برخی از کاربران امکان مشاهده تصاویر صفحه وب را نداشته باشند.یکی از این دلایل عدم دسترسی با سرعت بالا به اینترنت و استفاده از خطوط تلفن برای دسترسی به اینترنت میباشد.

موتورهای جستجو هم وقتی صفحه ای را ایندکس میکنند، نمیتوانند عکس ها را مشاهده کنند و فقط نام تصویر و کامنت جایگزین آنرا مشاهده میکنند.پس برای تصاویری که به موضوع صفحه شما مرتبط هستند و یا بتوانند آنها را در موتور جستجو پیدا کنند، حتما از این کامنت استفاده نمایید.

برای عکس ها نیز مانند لینک ها میتوانید از شناسه title استفاده نمایید. این شناسه باعث میشود که با قرار دادن ماوس روی تصویر، پنجره ای باز ده و یک توضیح در آن نمایش داده شود.از این شناسه برای گذاشتن توضیحات بیشتر در مورد یک عکس نیز میتوان استفاده نمود.به مثال زیر توجه نمایید:

<html>

<head>

<title>Learning html</title>

</head>

<body>

<img =”src=http://rtl-automatic.ir/uploads/PCTech.jpg” title=”Piccture of PCTech Logo” >

</body>

</html>

حال سند را ذخیره کرده و نتیجه را مشاهده کنید.همانطور که میبینید با قرار دادن ماوس روی تصویر ، توضیح عکس نمایش داده میشود.