آموزش HTML - بخش ششم: ترکیب لینک و عکس

منوها و بسیاری از المان‌های اچ تی ام ال که هر روزه با آن‌ها مواجه می‌شویم، حاصل ترکیب عکس‌ها و لینک‌ها هستند. در این قسمت ما هم قصد داریم شما را با نحوه لینک کردن یک عکس آشنا کنیم. با ما همراه باشید.

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

اضافه کردن لینک به تصاویر:

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

مرحله اول: برای اضافه کردن لینک به تصاویر, ابتدا یک تگ لینک <a> را باز می‌کنیم و آن را برای مثال به زومیت لینک می‌کنیم: 

<"href="www.zoomit.ir>

مرحله دوم:‌ این بار به جای نوشتن متن در بین تگ‌های شروع و پایان <a> تگ تصویر یعنی <img> را استفاده می‌نماییم. 

  </ "a href="www.zoomit.ir">   <img src="http://zoomit.ir/images/94/05/html/logo4.png>

مرحله سوم : حالا تگ <a/> را می‌بندیم و تمام!‌ تصویر قرار گرفته در بین دو تگ <a> </a> حاوی لینک مورد نظر است.

 </a href="www.zoomit.ir"><img src="http://zoomit.ir/images/94/05/html/logo4.png"> <a>

نمونه

 a href="www.zoomit.ir"> 

<imgsrc= "http://zoomit.ir/images/94/05/html/logo4.png "  / > 

<a/>

نتیجه‌ای که مرورگر نمایش خواهد داد

logo4

 خلاصه قسمت ششم:

در این قسمت چیزهایی که یادگرفته‌ایم را به صورت کاملا خلاصه مرور می‌کنیم.

  • در ششمین قسمت از سری آموزش HTML و سی‌اس‌اس با نحوه لینک دادن به تصاویر آشنا شدیم. برای این کار تنها کافیست تا ابتدا تگ <"آدرس URL لینک " = a href> را باز کنیم.  سپس تصویر را با استفاده از تگ </ "img src="image url> بین تگ ابتدایی و انتهایی <a> وارد کرده و در نهایت آن  را ببنیدیم. مثل: <a href="http://www.zoomit.ir"><img src="zoomit.jpg"> </a>

 نوبت شما

خب نوبتی هم که باشد، دیگر نوبت شماست. پس همین حالا دست به کار شوید و به ما نشان دهید که همه چیزهایی که گفته‌ایم را آموخته‌اید. این شما و ادیتور آنلاین. برای تمرین یک لینک به آدرس زومیت را با تصویر لوگو به آدرس( )بنویسید.

امیدواریم که این بخش از آموزش اچ‌تی‌ام‌ال به سبک زومیت هم موفق به جلب رضایت شما زومیتی‌های عزیز شده باشد. تجربیات، پیشنهادات و نظرات شما بدون شک در ادامه این مقالات آموزشی تاثیر بسزایی خواهد داشت و قدردانی ما را هم به همراه خواهد داشت. پس لطفا با ما در ارتباط باشید.

از سراسر وب

  دیدگاه
کاراکتر باقی مانده

بیشتر بخوانید