تگ لینک و تگ تصویر + معرفی اتریبیوت های مهم و ضروری

( یکشنبه ، 6 خرداد سال 1403 )

حق کپی ویدئو

مجاز نمی باشد.

شما اینجا هستید :

جلسه چهارم

آموزگار :

آرزو محرابی

لینک ها و تصاویر، از مهم ترین قسمت‌های هر سایتی محسوب می‌شوند که باید توجه ویژه ای نسبت به آن‌ها داشته باشید. لینک‌ها مانند پل عمل می‌کنند و ما را از جایی به جای دیگری می‌برند. تصاویر هم جز رسانه‌های کاربردی در سایت هستند که در تمامی سایت ها وجود دارد. ( ادامه مطلب … )

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

آنچه توانسته ایم لطف خدا بوده است ، ابزار وردپرس بعنوان یکی از مراجع بزرگ طراحی وب و وردپرس در حال فعالیت می باشد 🙂

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

آنچه توانسته ایم لطف خدا بوده است ، ابزار وردپرس بعنوان یکی از مراجع بزرگ طراحی وب و وردپرس در حال فعالیت می باشد 🙂

اورجینال

کیفیت

پشتیبانی

آپدیت

آرزو محرابی

مدرس دوره های آموزش طراحی سایت و برنامه نویسی

آرزو محرابی

مدرس دوره های آموزش طراحی سایت و برنامه نویسی

تگ لینک و تگ تصویر + معرفی اتریبیوت های مهم و ضروری

( یکشنبه ، 6 خرداد سال 1403 )

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

تگ لینک (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

  • حسین راشدی
    آگوست 4, 2023 5:13 ب.ظ

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

  • حامد علیخانی
    می 30, 2023 11:50 ق.ظ

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

    • علی حیدری
      می 30, 2023 12:01 ب.ظ

      باسلام خدمت شما

      از حضور شما ممنونیم. دقت نمایید که دقیقاً مانند آموزش انجام دهید و حتماً بعد از انجام سایت را با کلید های کنترل F5 بروز رسانی نمایید ، ممکن است برای شما کش شده باشد که باید کش را خالی نمایید.

      از حضور شما ممنونیم.

  • علی انصاری
    آوریل 30, 2023 9:07 ب.ظ

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

فهرست