منظور از تاثیر گذار چیست؟
ببینید، در واقع وقتی در تمامی سایت ها، صفحات را پیمایش می‌کنید و برای خود جست و جو می‌کنید، همیشه دو چیز هستند که باعث می‌شوند مهم شما به مطالب جذب شده و به مطلب بعدی بروید. اولی عکس ها و دومی لینک ها. اگر این دو نباشند، پس اصلا دیگر سایت به چه درد می‌خورد؟ اگر این دو نباشند، نه سایت شما را جذب می‌کند نه اصلا شما می‌توانید پیمایش کنید. سفر شما در اون سایت شبیه سفر با کشتی کروز توی یک مرداب می‌شود! اصلا به درد شما نمی‌خورد. پس دو تگ مهم همیشه توی این پیمایش به کد نویس ها این اجازه را می‌دهند تا این مرداب را به یک اقیانوس تبدیل کنند. حال این تگ ها اصلا چی هستند؟ الان بهتون می‌گویم!
اگر دنبال لینک هستنید، تگ <a> تنها راهتون هست!
خب به لینک گذاری می‌رسیم. من از همین الان اعلام کنم که توی هر جا که می‌خوام منبعی قرار بدم، از “https://example.com” استفاده می‌کنم! پس یادتون بماند! خب، تگ <a> از نظر بصری، خیلی گزینه جلو دستتون گذاشته، اما سعی می‌کنم الان زیاد واردش نشوم و در مبحث های آموزشی CSS که اگر اون ها رو نخوانید، اصلا HTML قرار نیست از گلوتون پایین برود! (کلا این دو همجا همدیگر را تکمیل می‌کنند) بیشتر وارد این جنبه های بصری می‌شوم. حال برگردیم سر اصل ماجرا! <a> به صورت کلی بخوام بگم از خودش و یکی از اجزای داخلش یعنی “href” تشکیل شده است! این اولین باری هست که شما با همچین چیزی مواجه می‌شوید و شاید یک ذره گیج شوید، هر چند اگر بتونید خوب متوجه بشید، دیگه HTML اون قدر کاری نداره! خب اول به کد زیر یک نگاه بی‌اندازیم :
<!DOCTYPE html>
<html>
<a href="https://example.com">Just Some a Tags!</a>
</html>
و اما نتیجه این کد (یادتون نرود حتما خودتون هم یک تست بکنید!) :
توضیحات کامل تگ مهم <a>
خب، در صورت اجرا، با همچین صفحه‌ای مواجه خواهید شد. اگر تا حالا به متنی لینک داده باشید یا متن هایی که به آنها لینک داده شده است را دیده باشید، در همان لحظه اول می‌فهمید چه خواهد شد. شما اگر موس خود را بر روی متن برده و روی آن کلیک کنید، به صفحه‌ای با آدرس “https://example.com” خواهید رفت. همان لینکی که در “href” قرار دادیم! پس با یک نگاه ساده، می‌‍توان هدف تگ <a> را فهمید. این تگ مانند تگ <p> ظاهر شده و متنی را در خود جای می‌دهد (تگ <p> چیست؟ کلیک کنید!) ولی در خودش (بخش اول تگ که همیشه ثابت است یعنی <a>) متن “href” را مساوی لینکی قرار می‌دهد. اگر سابقه کد نویسی در زبان هایی مانند جاوا یا پایتون را داشته باشید، می‌فهمید که این مکانیزم مساوی قرار دادن چطور کار می‌کند. اما اگر نمی‌دانید (و حتی می‌دانید!): مساوی قرار دادن در واقع اینجوریست که شما متغییری (حتما آموزش پایتون را هم ببینید به شما کمک خواهد کرد!) را برابر با یک مقدار یا یک چیزی قرار می‌دهید. در واقع متغییر مانند یک ظرف هست و ما می‌توانیم با مساوی قرار دادن بگوییم چی در آن ظرف است. در اینجا هم ما متغییر “href” را با متنی به نام “https://example.com” قرار داده‌ایم. چرا از ” استفاده کردیم؟ به دلیل اینکه این لینک یک متن است، شما می‌توانید هر چیزی در آن بذارید، حتما نباید یک لینک باشد! اما خب اگر لینک نباشد کار نمی‌کند. پس ما وقتی در تگی، متغییری را مساوی قرار می‌دهیم، آن متغییر در واقع ویژگی مخصوص آن تگ و چیزی که متغییر مساوی آن قرار می‌گیرد توضیح اون ویژگی است. انگار بگوییم حالت مساوی است با جامد!(حالت = “جامد”) به هر حال شما بدون تمرین کردن نمی‌توانید موضوع را بفهمید، هم حتما چند لینک و متن دیگر با این تگ بسازید و بعد به سراغ آموزش ها بعدی بروید.
نیاز به گذاشتن عکس دارید؟ مشکلی نیست! img> اینجاست!
درست حدس زدید! این تگ مانند تگ های دیگر در پایان <img/> ندارد و تمامی آن در یک <img> خلاصه می‌شود! می‌روم سراغ اجزای این تگ، این تگ شامل خودش و اجزای داخلی آن شامل “src” و “alt” است! در اینجا مانند تگ <a> رفتار می‌کنیم. ابتدا کد را می‌نویسیم، نتیجه را می‌بینیم و بعد تحلیل می‌کنیم، هر چند ممکن است این تگ سوپرایزتان کند و بفهمید بعضی چیز ها فقط در پشت پرده تاثیر گذارند! بریم سراغ کد :
<!DOCTYPE html>
<html>
<img src="https://arminia7070.ir/wp-content/uploads/2022/12/image-1-1024x640.png" alt="It's Correct!">
</html>
و نتیجه (اگر آنلاین باشید!) قطعا عکس شماره دو و اگر آفلاین باشید یا “src” را مساوی با لینکی اشتباه که عکس نباشد قرار دهید عکس شماره سه اتفاق خواهد افتاد :
<img> قراره حسابی گیجتون کند!
چی شد؟ دو تا متغییر را مساوی قرار دادیم! یعنی این تگ دو ویژگی دارد؟ جواب بله است! هر چند در یک تگ به اندازه ویژگی های خواصی که می‌تواند داشته باشد می‌توانیم یک متغییر را مساوی به یک مقدار یا متن قرار دهیم، اما در اینجا دو متغییر یا ویژگی “src” و “alt” را مساوی قرار دادیم. “src” مخفف سورس (source) یا منبع است. سورس باید مساوی با لینک عکس به صورت مستقیم قرار بگیرد. همان طور که در مرحله قبلی دیدید، سورس مساوی لینک یک عکس بود و این تگ با آن لینک توانست که عکس را بالا بیاورد. اما اگر سورس به مشکل بخورد چی؟ اینجاست که اگر “alt” را مساوی با متنی دلخواه قرار بدهیم، در صورت وقوع مشکل، آن متن جایگزین خواهد شد. همانطور که مشاهده می‌کنید، متن داخل “alt” یعنی “It’s Correct” در عکس شماره سه جایگزین شده است. هر چند “alt” یک تگ اختیاری است و اگر آن را مساوی قرار ندهیم (کلا آن را نداشته باشیم) در صورت وقوع مشکل، فقط همان علامت کنار “It’s Correct” بالا می‌آید.
پایان قسمت اول!
با اینکه این رشته سر دراز دارد، اما شما توانستید 1/1000 این رشته را پیش بروید! لطفا اگر درخواست دارید از HTML ویدیو بگیرم تا بتوانید سریع تر یاد بگیرید، حتما در بخش نظرات برام بنویسید! ممنون که تا آخر خواندید و حتما مقاله بعدی هم بخوانید! (یک ذره اسکرول کنید، می‌بینید از کجا می‌توانید این کار را انجام دهید!)
