عرض سلام و خسته نباشید خدمت شما علاقه مندان به آموزش طراحی وب.علیرضا حاتمی نیا هستم با آموزش قسمت ششم طراحی وب HTML , CSS در خدمت شما هستم.
در جلسه قبل نحوه نمایش تصویر در وب را آموختید. در این جلسه با نحوه ایجاد پیوند(لینک) در صفحه وب آشنا خواهید شد. قبل از اینکه برچسب ایجاد پیوند در صفحه وب را معرفی کنیم، لازمه است تا کمی با مفهوم پیوند آشنا می شوید.
پیوند یا لینک Link
منظور از پیوند یا HyperLink متن یا تصویری ست که امکان کلیک کردن را برای کاربر ایجاد می کند. در حالت معمولی هنگامی که کاربر موس خود را به روی لینک میبرد، نشانه گر موس به صورت دست تغییر شکل می دهد و کاربر پس از کلیک به روی لینک به نشانی دیگری هدایت می شود. مثلا کاربر هنگام کلیک به روی لینک "تماس با ما" به صفحه تماس با ما هدایت و منتقل میشود.
برچسب <a>
واژه a از عبارت anchor به معنی لنگر گرفته شده است. برچسب <a> دارای تگ پایانی </a> می باشد و متنی که بین دو تگ باز و بسته <a></a> قرار می گیرد به صورت لینک نمایش داده می شود.
<a> this is link </a>
مشخصه href
تگ <a> دارای یک مشخصه اجباری با نام href است که مقدار آن برابر با آدرسی ست که کاربر پس از کلیک به روی لینک به آن منتقل میشود. href مخفف عبارت hypertext reference می باشد. بدون تعریف این مشخصه لینک ایجاد نخواهد شد.
<a href=”web.html”> this is link </a>
مشخصه target
همچنین تگ <a> دارای یک خصیصه اختیاری ولی کاربردی به نام target است که مقادیر آن تعیین می کنند که کاربر چگونه به آدرس مورد نظر هدایت شود. مقادیر target عبارتند از:
- _blank
- _parent
- _self
- _top
در مورد _top و _parent در جلسات آینده بیشتر آشنا خواهید شد. مقدار _self که به صورت پیشفرض فعال است و باعث می شود تا کاربر پس از کلیک در همان صفحه به صفحه جدید هدایت شود و مقدار _blank باعث می شود تا کاربر در برگه ای جدید از مرورگر به صفحه جدید منتقل شود.
نکته : برای اینکه یک عکس را به صورت لینک تبدیل کنیم کافیست تا تگ نمایش عکس را بین تگ <a></a> قرار دهیم:
<a href=”about.html”> <img src=”logo.jpg”> </a>
نکته:
برای اینکه کاربر را به سایتی خارجی لینک دهیم کافیست آدرس اینترنتی صفجه مورد نظر را به href اختصاص دهیم. توجه داشته باشید که حتما عبارت http:// قبل از آدرس مورد نظر نوشته شود.
مثلا فرض کنید می خواهیم توسط لینکی کاربر را به به سایت گوگل هدایت کنیم.
<a href=http://google.com > google </a>
