-: یکی از اجزای اصلی و اساسی اینترنت
«هایپرلینک‌ها» یا به‌اختصار
«لینک‌ها» هستند.
لینک‌ها در واقع چیزی هستند که اینترنت رو
به یک شبکه جهانی تبدیل می‌کنن.
بدون لینک بین صفحه‌ها، هیچ شبکه‌ای وجود نمی‌داشت.
خب، حالا بیایم یاد بگیریم که چطور لینک‌ها رو
تو صفحه‌های وب خودمون قرار بدیم.
لینک‌ها رو می‌تونیم به دو دسته کلی تقسیم کنیم.
دسته اول، لینک‌هایی هستن که به صفحه‌های
دیگه تو وب‌سایت خودمون اشاره می‌کنن.
مثلاً فرض کن تو وب‌سایتمون، «مجله کدنویسی»،
یه پست وبلاگی دیگه داشته باشیم، می‌تونیم یه لینک
از این صفحه به اون صفحه درست کنیم.
درسته؟
از طرف دیگه،
دسته دوم، لینک‌هایی هستن که به
خارج از وب‌سایت خودمون اشاره می‌کنن.
مثلاً اگه من یه لینک به «Udemy.com» اینجا
تو این صفحه بذارم،
این یه لینک به خارج از وب‌سایتمون میشه.
درسته؟
حالا، این دو نوع لینک رو
دقیقاً به یه روش تو «HTML» درست می‌کنیم،
ولی یه سری نکات خاص وجود داره
که باید بهشون توجه کنیم.
خب، حالا بیایم از
دومین نوع لینک که گفتم شروع کنیم،
یعنی لینک‌هایی که به خارج از وب‌سایتمون اشاره می‌کنن.
تو این دمو، من اینجا آخر این بخش،
یعنی بخش «HTML چیست»،
یه لینک به «MDN Web Docs» دارم.
این در واقع یه وب‌سایته که می‌تونید توش همه‌چیز
درباره «HTML»، «CSS» و «JavaScript» یاد بگیرید.
و تو بخش بعدی، این سایت رو یه کم بهتر بهتون نشون می‌دم،
چون برای یه توسعه‌دهنده وب مهمه که بدونه
چطور از این صفحه مستندات وب استفاده کنه
و اطلاعات مورد نیازش رو پیدا کنه.
خب، حالا می‌خوایم لینک این سایت رو برداریم.
برای این کار، کافیه «MDN» که مخفف
«Mozilla Developer Network» هست رو با «HTML» گوگل کنیم.
«URL» دقیقی که اینجا استفاده می‌کنیم
خیلی مهم نیست.
فقط می‌خوایم یه «URL» داشته باشیم که به خارج
از صفحه خودمون اشاره کنه.
درسته؟
خب، بیایم این لینک رو که اولین نتیجه گوگل بود
کپی کنیم.
دوباره یادآوری می‌کنم که به این می‌گن «URL».
همون‌طور که می‌دونید، هر وب‌سایتی تو اینترنت
یه «URL» مخصوص به خودش داره.
و این چیزیه که برای ایجاد لینک به اون صفحه نیاز داریم.
خب؟
حالا بیایم این لینک رو اینجا قرار بدیم.
خوبه؟
خب،
ببینیم،
آره.
می‌خوایم این رو
دقیقاً اینجا، بعد از این لیست بدون ترتیب بذاریم.
درسته؟
بیایم تو دمو ببینیم،
آره.
دقیقاً اینجا، بعد از لیست مرتب.
خب، اینجا.
برای ایجاد لینک تو «HTML»،
از المنت «A» استفاده می‌کنیم که مخفف «anchor» هست.
از نظر فنی، یه «هایپرلینک»
یا لینک تو «HTML» بهش می‌گن «anchor».
پس این یه المنت anchor هست.
می‌تونیم ببندیمش، بعد می‌تونیم یه محتوا مشخص کنیم
و حتماً باید این رو ببندیم.
خب، بیایم این کار رو شروع کنیم.
برای محتوای لینک،
اون چیزی که اینجا مشخص می‌کنیم، در واقع
متنیه که می‌خوایم تو صفحه نمایش داده بشه.
یعنی متن لینک.
تو این مورد، این متن «MDN Web Docs» هست.
خب،
پس «MDN
Web
Docs»،
ولی حالا
برای «URL» که می‌خوایم این لینک بهش اشاره کنه چی؟
خب، برای این کار بازم باید از یه attribute استفاده کنیم.
تو این مورد، attribute «href» هست.
بعد =""، و حالا می‌تونیم اون «URL» رو
که کپی کردیم اینجا paste کنیم.
و همین کافیه!
حالا اگه ذخیره کنم و صفحه رو ریلود کنم،
اینجا لینکمون رو می‌بینید!
و می‌بینید که پایین صفحه،
اینجا تو این گوشه، وقتی روش هاور می‌کنم
«URL» رو نشون می‌ده
و وقتی کلیک می‌کنم،
صفحه به اونجا می‌ره.
عالیه!
و این در واقع پایه‌های ساخت یه لینک بود.
خیلی ساده‌ست.
درسته؟
حالا می‌خوایم این لینک اینجا توی متن باشه،
یعنی داخل یه پاراگراف دیگه،
درسته؟
خب، بیایم اون پاراگراف رو درست کنیم.
می‌تونید
بیشتر
یاد
بگیرید
در.
و این لینک اینجا در واقع ادامه متن اینجاست.
یعنی داخل این پاراگراف.
خب، می‌تونیم جمله‌مون رو اینجا تموم کنیم
و بعد پاراگراف رو مثل همیشه ببندیم.
و حالا این دقیقاً مثل نمونه اصلی شده.
و حالا مثل نمونه اصلی به نظر می‌رسه.
درسته؟
حالا بازم ببینید چی می‌شه وقتی روش کلیک می‌کنم.
می‌بینید که مستقیم رفتیم به این صفحه
و صفحه خودمون غیبش زده!
البته می‌تونیم برگردیم، ولی گاهی
دوست داریم لینک تو یه تب جدید باز بشه.
بیایم این رو هم بهتون نشون بدم.
البته همیشه اینو نمی‌خوایم.
خیلی وقت‌ها واقعاً می‌خوایم صفحه به «URL»
که مشخص کردیم بره.
ولی گاهی هم مفیده که صفحه خودمون باز بمونه
و «URL» تو یه تب جدید باز بشه.
برای این کار می‌تونیم از attribute «target» استفاده کنیم
بعد مثل همیشه "" (نقل‌قول).
و این یه کم عجیبه،
یعنی _ (آندرلاین)
و بعد
blank.
خب، ذخیره می‌کنیم و وقتی ریلود کنیم،
ظاهرش همونه، ولی رفتارش باید عوض شده باشه.
و همون‌طور که می‌بینید، یه تب جدید باز شد
و صفحه اصلی‌مون هنوز بازه.
عالیه! پس این کار کرد.
حالا یه لینک داریم که به یه «URL»
خارج از وب‌سایتمون اشاره می‌کنه.
ولی حالا بریم سراغ سناریوی اول، یعنی لینکی
که به یه صفحه داخلی اشاره می‌کنه. بیایم اینو انجام بدیم.
برگردیم به دمو، اینجا این مثال رو داریم.
تو همون ابتدای صفحه، بعد از تیتر اصلی،
این لینک‌ها رو داریم.
اینا باید لینک‌هایی باشن که به صفحه‌های
داخل این وبلاگ اشاره می‌کنن.
خب، بیایم اولین لینک رو درست کنیم.
یعنی «وبلاگ»
و یه صفحه جدید هم درست کنیم که بتونیم بهش لینک بدیم.
خب؟ درست کردن یه صفحه جدید به سادگی
ساخت یه سند «HTML» جدیده.
بیایم دوباره نوار کناری رو با کلیک اینجا باز کنیم.
اینجا explorer رو می‌بینیم که همه فایل‌ها رو نشون می‌ده.
با همه فایل‌ها.
و دوباره، اینجا با این آیکون یه فایل جدید درست می‌کنیم
و اسمش رو می‌ذاریم «blog.html».
این دفعه.
حالا می‌تونیم از یه میانبر برای
ساخت ساختار «HTML» استفاده کنیم،
ولی بیایم یه کم تمرین کنیم.
اگه دوست دارید، می‌تونید ویدیو رو متوقف کنید
و خودتون اینو تایپ کنید.
ولی من اینجا سریع انجامش می‌دم.
پس «HTML»، و البته باید ببندیمش.
حالا داخل «HTML»، یادمون باشه که head داریم،
و داخل head، معمولاً یه title داریم،
و اینو می‌ذاریم مثلاً «WEBLOG» با حروف بزرگ.
فقط با حروف بزرگ که کاملاً مشخص باشه.
می‌بینید که این یه ساختار خیلی ساده‌ست،
فقط یه head با یه title.
و همین‌طور برای body،
که یادتون باشه بخشی که تو مرورگر دیده می‌شه.
هست.
اینجا من فقط یه المنت «H2» می‌ذارم
و اینجا هم می‌بندمش.
و اینو هم می‌گیم «WEBLOG».
خب؟ اوه.
هنوز باید body رو ببندیم،
و تموم شد!
ذخیره می‌کنیم.
و حالا یه سند «HTML» خیلی ساده
و خیلی ابتدایی برای وبلاگ داریم.
حالا که اینو درست کردیم، می‌تونیم یه «هایپرلینک»
یا لینک تو index.html درست کنیم
که به blog.html اشاره کنه.
و مرورگر بعد به اون صفحه می‌ره.
خب، بیایم اینو اینجا بعد از «H1» درست کنیم.
پس المنت «anchor»، و نیاز به «href» داریم.
حالا اینجا به‌جای اینکه یه «URL» مشخص کنیم،
اسم فایل «HTML» که می‌خوایم بهش بریم رو می‌نویسیم.
که تو این مورد، همون blog.html هست که ساختیم.
هست.
البته همون blog.html که تازه ساختیم.
بعد اینجا برای محتوای المنت،
بیایم فقط بنویسیم WEBLOG و بعد ببندیمش.
مثل همیشه ذخیره می‌کنیم.
اینجا لینک زیبامون رو داریم.
حالا ببینید چی می‌شه وقتی روش کلیک می‌کنم، بوم، حالا
تو WEBLOG هستیم، و می‌تونید تو نوار آدرس هم ببینید.
که حالا این کل این فایل رو نشون می‌ده.
و کل این مسیر، و بعد
آخرش blog.html.
درسته؟
حالا برای برگشتن،
البته می‌تونیم اینجا روی دکمه بازگشت کلیک کنیم،
ولی یه کار دیگه هم می‌تونیم بکنیم، یه لینک اینجا بذاریم
که فقط به index.html برگرده،
درسته؟
این ایده خوبی به نظر می‌رسه، نه؟
خب، بیایم برگردیم به blog.html،
و به‌عنوان یه چالش دیگه.
حالا ازتون می‌خوام خودتون این لینک رو درست کنید.
ویدیو رو اینجا متوقف کنید
و یه لینک درست کنید که به index.html برگرده.
خب، تونستید این کار رو بکنید؟
یا حداقل امتحان کردید؟
امیدوارم که بله.
به‌هرحال، البته که باز از المنت «A» استفاده می‌کنیم
بعد «href» رو مشخص می‌کنیم، و برای برگشتن
فقط می‌گیم index.html.
و اینجا می‌تونیم هر متنی بنویسیم
که بهتون نگفتم چی باشه
چون واقعاً مهم نیست.
بیایم مثلاً بگیم «بازگشت به خانه» یا یه همچین چیزی.
ذخیره می‌کنیم.
حالا وقتی ریلود کنیم،
لینکمون رو داریم، می‌تونیم روش کلیک کنیم.
و حالا می‌تونیم بین این دو صفحه
بريم و برگردیم.
چون حالا این دو صفحه از طریق لینک‌ها به هم وصل شدن.
می‌تونیم بریم به وبلاگ،
برگردیم و دوباره بریم و همین‌طور ادامه بدیم.
خب.
بیایم اینو ببندیم.
دیگه بهش نیاز نداریم.
و برای پایان، می‌تونیم یه لینک هم بذاریم
که به هیچ‌جا اشاره نکنه.
بیایم اینو هم بهتون نشون بدم.
خب، بیایم اول محتوا رو بنویسیم.
اینجا فکر کنم «چالش‌ها» رو دارم،
تو دمو.
پس «چالش‌ها»، «Flexbox»
و «CSS Grid».
پس این «چالش‌ها»ست،
ولی حالا ببینید چی می‌شه
وقتی صفحه رو این‌جوری ریلود می‌کنم.
می‌بینید که فقط نوشته «چالش‌ها»
ولی دقت کنید که فقط یه متن معمولیه.
آبی نیست و زیرش خط نداره.
پس مشخصاً لینک نیست، درسته؟
حتی اگه المنت «anchor» باشه،
ولی چیزی که یه المنت «anchor» رو واقعاً لینک می‌کنه
ویژگی «href» هست.
و باید حتماً اینو مشخص کنیم،
وگرنه اصلاً لینک نیست.
فقط یه «anchor»ه که خیلی به‌درد نمی‌خوره.
حالا اگه نخوایم این به جایی اشاره کنه،
همون‌طور که گفتم.
راه‌حلش اینه که از علامت # (هش) استفاده کنیم،
درست اینجا، درسته؟
حالا اگه ذخیره کنم و ریلود کنم،
می‌بینیم که دوباره لینک شده.
ولی فقط به جایی اشاره نمی‌کنه.
چی می‌شه اگه روی این لینک کلیک کنیم؟
در واقع برمی‌گرده
به بالای همین صفحه فعلی.
خب؟
و یه کم بعد تو این دوره،
از این رفتار استفاده می‌کنیم.
ولی فعلاً فقط می‌خوام بدونید
که این‌جوری می‌تونیم لینک‌هایی بذاریم وقتی
هنوز «URL» یا صفحه‌ای براشون نداریم.
در واقع این یه جور لینک placeholderه.
خب؟ حالا بیایم اینو دو بار کپی کنیم.
نیازی نیست دوباره بنویسیمش، ولی اگه دوست دارید
می‌تونید دوباره تایپش کنید.
فقط برای «Flexbox» و «CSS Grid».
تا این navigation یه کم کامل‌تر به نظر بیاد،
کامل‌تر،
ولی همه این لینک‌ها
نباید به جایی اشاره کنن.
خب!
و این‌جوری می‌تونید «لینک‌ها» یا «هایپرلینک‌ها»
یا همون «anchor»ها رو تو «HTML» مشخص کنید.
این یه بخش خیلی مهم از وب هست
همون‌طور که اول گفتم.
پس مطمئن بشید که فهمیدید چطور کار می‌کنن
و چطور می‌تونیم اونا رو تو صفحه‌های وب خودمون قرار بدیم.