آموزش کار با تگ‌ لینک‌ a و تصویر در HTML

آخرین بروزرسانی در تاریخ : 15 تیر 1402

با یکی دیگر از سری جلسات دوره رایگان آموزش HTML و CSS، با آموزش کار با تگ‌های لینک‌ و تصویر در HTML در خدمت شما همراهان گرامــــی آکادمی وبکیما هستیم، تگ های a و img یکی از پرکاربردترین تگ‌ها در زبان نشانه‌گذاری HTML هستند، پس باید حتما نحوه کار با این تگ‌ها را از همین ابتدا به خوبی یاد بگیرید، بنابراین این جلسه از دوره رایگان آموزش html و CSS وبکیما را با دقت و تا انتها دنبال کنید.

راهنمای مطالعه:

آموزش ایجاد لینک در HTML

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

نکته مهم: شما داخل یک صفحه وب هر بخشی را که بخواهید لینک کنید باید آن را داخل یک تگ a قرار دهید، بنابراین فرقی نمی‌کند که شما بخواهید یک تگ دیگر یا یک متن یا حتی تصویر و … را به یک صفحه وب دیگر لینک کنید، در هر صورت باید از تگ a استفاده کنید.

Syntax یا نحوه نوشتن تگ a یا تگ href در html

Syntax یا همان نحوه نوشتن تگ a به صورت زیر است:

<a href="yourlink">text link</a>

به عنوان مثال می‌خواهیم عبارت دوره آموزش جامع Html و Css پیشرفته را به آدرس آن در سایت وبکیما لینک دهیم، در این صورت در صفت href آدرس صفحه مورد نظر را قرار می‌دهیم و در بین دو تگ باز و بسته a هم باید عنوانی که می‌خواهیم را قرار دهیم، به مثال زیر توجه کنید:

<a href="https://webkima.com/academy/html-css-tutorials/">دوره آموزش جامع Html و Css پیشرفته</a>

attribute یا همان صفت target در تگ a

اگر ویدیوی این جلسه را با دقت دنبال کرده باشید، حتما دیدید که با استفاده از صفت target می‌توانید تنظیم کنید که لینک ما آیا در یک تب جدید باز شود یا در همان صفحه باز شود، البته این صفت مقادیر متفاوتی می‌تواند داشته باشد در زیر مقادیری که این صفت می‌تواند داشته باشد را بررسی کردیم:

_blank: لینک مورد نظر را در یک پنجره یا برگه جدید باز می کند
_self: لینک مورد نظر را در همان پنجره باز می کند (این مقدار پیش فرض است)
_parent: لینک مورد نظر را در پنجره اصلی باز می کند
_top: لینک مورد نظر را در بدنه کامل پنجره باز می کند
framename: لینک مورد نظر را در iframe نامگذاری شده باز می کند

صفت title در لینک‌ها

شما می‌توانید با استفاده از صفت title یا همان عنوان، یک سری اطلاعات اضافه‌ای به تگ لینک خودتان اضافه کنید، متنی که داخل این صفت قرار گیرد، در زمان هاور شدن لینک نمایش داده می‌شود (برای اطلاعات بیشتر در این رابطه ویدیو را مشاهده کنید)

کار با تصاویر در HTML | آموزش تگ img

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

Syntax یا نحوه نوشتن تگ img

قبل از اینکه به نحوه نوشتن تگ img بپردازیم، باید خدمت‌تان عرض کنم که تگ img یک تگ تکی یا همان تهی است، و به این معنی است که تگ بسته ندارد. همچنین مهم‌ترین صفات این تگ صفات src و alt هستند که در ادامه با آن‌ها آشنا خواهیم شد، در این بخش Syntax یا نحوه نوشتن تگ img را مشاهده کنید:

<img src="photo link" alt="Image description">

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

صفت alt در تگ img

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

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

صفات width و height در تگ تصویر

اگر می‌خواهید به تصاویر خودتان عرض و ارتفاع بدهید می‌توانید از صفت‌ width (عرض) و صفت height (ارتفاع) استفاده کنید، در زیر می‌توانید مثالی در این رابطه مشاهده کنید:

<img src="name.format" alt="Image description" width="1000" height="500">

جمع بندی

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