آموزش تگ های a و img در زبان html + آموزش رایگان html

سلام به قسمت ششم آموزش HTMl خوش اومدید، امیدوارم که حسابي تمرين کرده باشيد و از قسمت هاي قبلی لذت برده باشید.

دراين جلسه قراره که یکی از مباحث مهم و جذاب HTML رو بررسی کنیم پس حتما تا انتهای این جلسه با من همراه باشید.

تگ `a` در زبان `html`:

این تگ یکی از تگ‌های مهم در HTML و از نوع double tag هست، که با استفاده از اون می‌تونید یک لینک رو در صفحه قرار بدیم، این تگ دو صفت مهم و اصلی داره، صفت اول href (مخفف hyper reference) است که در اون url صفحه‌ای که کاربر با کلیک کردن بر روی لینک به اون صفحه میره، قرار می‌گیره.

به مثال زیر توجه کنید:

<body>
    <a href="https://codento.ir/">click here to link</a>
</body>

همانطور که در مثال بالا می‌بینید در href آدرس یا url سایت کدنتو قرار داده شده و کاربر با کلیک کردن بر روی این لینک به سایت کدنتو وارد میشه.

صفت یا Attribute مهم بعدی تگ a، صفت target هست، که مقادیری مثل self_ و blank_ رو می‌گیره،در ادامه به بررسی تاثیر هر یک از این مقادیر بر روی لینک قرار داده شده می‌پردازیم.

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

به مثال زیر توجه کنید:

<body>
    <a href="https://codento.ir" target="_self">click here to link</a>
</body>

همانطور که در مثال بالا می‌بینیم با کلیک کردن روی لینک، صفحه‌ی جدیدی در مرورگر کاربر باز نمیشه.

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

به مثال زیر توجه کنید:

<body>
    <a href="https://codento.ir" target="_blank">click here to link</a>
</body>

تگ `img`:

این تگ جز تگ‌های مهم و کاربردی هست با کمک اون می‌تونیم عکس یا تصویری رو به صفحه وب سایتمون اضافه کنیم.

تگ img از نوع single tag هست، این تگ دارای چند صفت مهم است اولین صفت src ( مخفف source) هست آدرس تصویر مورد نظرمون رو در این صفت قرار میدیم و همچنین میشه با کمک صفت width اندازه تصویر قرار داده شده رو به دلخواه تنظیم کرد (بحث تنظیم کردن اندازه‌ها خیلی مفصله که در CSS باید به اون پرداخته بشه).

به مثال زیر توجه کنید:

<body>
    <img src="https://www.talab.org/wp-content/uploads/2018/11/1279485741-talab-org.jpg" width="400px"> 
</body>

صفت مهم بعدی برای تگ img، صفت alt (مخفف Alternative) هست، در این صفت در واقع موضوع مرتبط با عکسی که قرار دادیم رو می‌نویسیم این صفت برای موتورهای جستجو مثل گوگل بسیار مهم است پس بهتره که حتما برای تصاویر از این صفت استفاده کنیم، همچنین این صفت جایگزینی هست برای تصویر قرار داده شده و در صورت بروز هر مشکلی در لودینگ تصویر این محتوای درون صفت alt به جای تصویر به نمایش در میاد، به مثال زیر توجه کنید:

<body>
    <img src="" width="400px" alt="flower"> 
</body>

همانطور که در مثال بالا می‌بینید به دلیل لود نشدن عکس، متن درون صفت alt جایگزین اون شد.

تبدیل عکس‌ها به لینک:

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

به مثال زیر توجه کنید:

<body>
    <a href="https://codento.ir" target="_blank">
        <img src="https://www.talab.org/wp-content/uploads/2018/11/1279485741-talab-org.jpg" width="400px" alt="flower">
    </a>
</body>

باتوجه به مثال بالا کاربر با کلیک کردن بر روی تصویر قرار داد شده وارد سایت کدنتو که url اون در صفت href تگ a قرار داده شده، میشه.

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