لینک‌ها یکی از مهم ترین قسمت‌های هر سایتی محسوب می‌شوند. لینک‌ها مانند پل عمل می‌کنند و ما را از جایی به جای دیگری می‌برند. مثلا ما را از یک صفحه از سایت به صفحه ی دیگری می‌برند و یا اینکه ما را از یک سایت به سایت دیگری منتقل می‌کنند. اما برای ایجاد لینک‌ها باید از چه تگی استفاده کنیم؟
تگ لینک (a)
برای به کار بردن لینک‌ها باید از تگ زوج <a></a> استفاده کنیم. متن یا هر چیز دیگری که قرار است لینک داده شود باید بین تگ‌های باز و بسته ی a قرار بگیرد. به عنوان مثال فرض کنید می‌خواهیم به یک متن لینک دهیم:
<html>
<head></head>
<body>
<a>روی این متن کلیک کنید</a>
</body>
</html>
حال ممکن است بخواهیم به یک پاراگراف لینک دهیم، در این صورت هم کافی است تگ پاراگراف را درون تگ لینک قرار دهیم، به صورت زیر:
<a><p>روی این متن کلیک کنید</p></a>
اتریبیوت href برای تگ a
اما یک نکته ی مهم وجود دارد و آن اینکه اگر مثال بالا را انجام داده باشید متوجه می‌شوید که هیچ لینکی برای متن شما ایجاد نشده است. دلیل آن این است که ما ازاتربیوت آدرس دهی استفاده نکرده‌ایم. پس برای لینک دادن، استفاده کردن از تگ لینک به تنهایی کافی نیست بلکه باید از اتربیوت href هم استفاده کنیم.
نحوه ی آدرس دهی به دو صورت مطلق و کامل وجود دارد. وقتی می‌خواهیم از سایت خود به سایت دیگری لینک دهیم از آدرس دهی به صورت کامل استفاده می‌کنیم و هرگاه بخواهیم از صفحه ای از سایت خود به یک صفحه ی دیگر لینک دهیم از آدرس دهی نسبی استفاده می‌کنیم.
آدرس دهی کامل یعنی قبل از نوشتن آدرس سایت مقصد از http:// استفاده کنیم. مثلا اگر بخواهیم از سایت خود به سایت ابزار وردپرس لینک دهیم به صورت زیر عمل می‌کنیم:
<a href=”https://www.abzarwp.com/”>برای رفتن به سایت ابزاروردپرس کلیک کنید</a>
اتریبیوت Target برای تگ a
از اتربیوت Target برای نحوه ی باز شدن لینک‌ها استفاده می‌کنیم. برای باز شدن لینک‌ها حالت‌های مختلفی وجود دارد، مانند اینکه در یک تب جدید باز شود یا اینکه در یک پنجره ی جدید یا در یک آیفریم یا… مقادیر مختلف برای Target این حالت‌ها را به وجود می‌آورد. مثلا اگر می‌خواهیم لینک در یک تب جدید باز شود باید از دستور زیر استفاده کنیم:
<a href=https://www.abzarwp.com/ target=”_blank”> کلیک کنید</a>
تگ تصویر (IMG)
حال به سراغ تگی می‌رویم که قرار است تصویر را برای ما تعیین کند. تگ <img> مشخص کننده ی تصویر است. ما برای قرار دادن تصویر در سایت از این تگ استفاده می‌کنیم. این تگ یک تگ فرد است. اتربیوت مهمی که برای این تگ وجود دارد اتربیوت src است که برای آدرس دهی است. برای نوشتن آدرس تصویر در این اتربیوت باید به نکته ی زیر توجه کنیم.
نکته این است که همواره سعی کنید یک پوشه برای قرار دادن تمامی‌تصاویر سایت ایجاد کنید و یک نام مناسب مانند images برای آن انتخاب کنید. سپس این پوشه را به پوشه‌ای که فایل‌های سایت را درون آن قرار می‌دهید، انتقال دهید. اکنون برای آدرس دهی به راحتی می‌توانیم به صورت زیر عمل کنیم.
<img src=”images/اسم عکس”>
اتربیوت‌های دیگری نیز برای تگ img وجود دارد، مانند alt که این اتربیوت، متنی را به عنوان جایگزین عکس تعیین می‌کند. اگر تصاویری که در سایتتان قرار داه‌اید به هر دلیلی حذف شود، آنگاه به صورت خودکار، متنی که در اتربیوت alt نوشته شده را نمایش می‌دهد.
Width و height نیز برای تعیین عرض و طول به کار می‌روند و می‌توانید به صورت زیر عمل کنید و هر مقداری را که می‌خواهید به عنوان مقدار آن قرار دهید.
Width=”200” height=”300”
نکته ی مهم پایانی اینکه لینک دادن تنها مختص متن و پاراگراف نیست بلکه می‌توان به تصاویر و تگ‌های دیگر نیز لینک داد.
6 دیدگاه. Leave new
سلام وقتتون بخیر به خانم محرابی بگید بعد پاک کردن قسمت های اولیه آموزش و قرار attribute های جدید برام لود نمیشن کنترل f5 میزنم کش مرورگر خالی نمیشه میشه لطف بفرمایید دقیقا مشکل کجاست .
وقت شما بخیر
طبق روال آموزش انجام دهید ، مشکلی ایجاد نمی شود.
ضمن اینکه امکان بررسی مشکل فنی هم در بخش دیدگاه وجود ندارد.
سلام خسته نباشید به خانوم مهندس محرابی لطفا بفرمایید چرا بعد از قرار دادن آدرس تصویر با توجه به اموزش های خوب شما تصویر برای من لود نمیشود ؟ مشکل کجاست؟
باسلام خدمت شما
از حضور شما ممنونیم. دقت نمایید که دقیقاً مانند آموزش انجام دهید و حتماً بعد از انجام سایت را با کلید های کنترل F5 بروز رسانی نمایید ، ممکن است برای شما کش شده باشد که باید کش را خالی نمایید.
از حضور شما ممنونیم.
دم شما گرم واقعا، قطعا بهترین روش تدریس ها در کنار مهندس جبین پور، خانم مهندس محرابی هستن. اگر تدریس پایتون هم مخصوصا با تدریس خانم محرابی قرار بگیره در سایت بسیار عالی و بی نظیر هست. اصلا درس که میدهند این عزیزان، آدم کیف میکنه. با تشکر از تمام بروبچه های درجه یک ابزار وردپرس.
بسیار بسیار خوشحالیم از حضورتون 🙂