تگ a در html

توی این جلسه از دوره آموزش رایگان html در 3 ساعت، به مبحث لینک در html میپردازیم و یاد میگیریم که چجوری از تگ a در html استفاده کنیم و به یه متن لینک بدیم. تگ a کاربرد های دیگه‌ای هم غیر از لینک دادن به صفحات داره که توی این قسمت اون هارو رو بررسی میکنیم.

لینک ها در html

لینک ها بخش مهمی از سایت ها و صفحات وب رو تشکیل میدن. حتما توی سایت ها بخش هایی رو دیدین که با استفاده از لینک صفحات مختلف سایت رو به کاربر نشون میدن، معمولا این اتفاق توی منو یا بخش پایانی سایت ( footer ) میافته ( بالای همین صفحه میتونید منو و لینک های مگا جی اس رو ببینید). حتی توی بعضی از صفحات لینک هایی به سایت‌های دیگه داده میشه. ما توی این جلسه یاد میگیریم که انواع لینک ها رو هرجایی از سایتمون که بخوایم قرار بدیم.

گفتیم که با تگ a میتونیم تو سایتمون لینک ایجاد کنیم. برای این کار ما باید به تگمون دوتا مقدار بدیم که اینجا هر دو رو با هم بررسی میکنیم و یاد میگیریم.

اتریبیوت href: این تگ یه اتریبیوت به نام href داره که با استفاده از اون مشخص میکنیم کاربر با کلیک روی لینکمون به چه صفحه ای بره یا چه عملی براش انجام بشه.

محتوای لینک: بین تگ های باز و بسته a باید یه متنی رو قرار بدیم که با کلیک شدن روی اون عمل مورد نظر انجام بشه. البته در ادامه توضیح میدیم که میشه بجای متن از چیزهای دیگه ای مثل عکس هم میشه اینجا استفاده کرد.

توی مثال زیر وقتی که روی کلمه text کلیک کنیم مارو به آدرس https://www.google.com میبره.

<a href="https://www.google.com/">text</a>

لینک دادن به انواع مختلف محتوا

علاوه بر این که میتونید داخل این تگ یه متن بنویسید، میتونید تگ های مختلفی رو هم داخلش قرار بدید. مثلا میتونید از یه تگ h1 به عنوان فرزند یا child تگ a استفاده کنید. یا حتی در آینده با یادگرفتن عکس ها در html، میتونید تگ a رو به عنوان parent یا والد یک عکس قرار بدید. اگه مفهوم تگ های والد و فرزند رو نمی‌دونید، میتونید جلسه ساختار اولیه html رو ببینید. یا اگه نحوه نوشتن تگ های دیگه در تگ a رو متوجه نشدید میتونید از ویدیوی بالا صفحه استفاده کنید.

انواع آدرس دهی در html

لینک در html میتونه به دو حالت مختلف نوشته بشه. در اینجا هردو حالت رو یاد میگیرید

آدرس دهی مطلق

تو این حالت ما لینک کامل یه صفحه وب یا یه عکس یا هر لینک دیگه ای رو کپی میکنیم و لینک رو به صورت کامل توی href میزاریم. برای مثال من اگه بخوام به صفحه آپارات مگا جی اس لینک بدم باید همچین کدی بنویسم:

<a href="https://www.aparat.com/megajs">آپارات ما</a>

آدرس دهی نسبی

این نوع آدرس دهی برای فایل هایی استفاده میشه که توی پوشه پروژه خودمونن. ما با نوشتن /. میتونیم پوشه ها یا فایل هایی که نیاز داریم و داخل پوشه پروژه مون هستن رو انتخاب کنیم. توی مثال زیر با کلیک روی متن “تست” به صفحه ای میریم که توش عکس image.jpg نمایش داده میشه. این عکس داخل همون پوشه ای قرار داره که فایل html مون هم توشه.

<a href="./image.jpg">تست</a>

برای انتخاب فایل از پوشه های بالاتر هم میتونید از /.. استفاده کنید. برای دسترسی به فایل هایی که داخل پوشه های فرزند و داخلی هستن میتونید بعد از /. اسم پوشه رو بنویسید. اگه توی برنامه vs code کدهاتون رو مینویسید، خود برنامه این فولدر ها و فایل هارو بهتون پیشنهاد میده. برای آشنایی کامل با نرم افزار vs code میتونید از مقاله آموزش نصب vs code استفاده کنید.

اگه هرجایی از مبحث آدرس دهی هارو متوجه نشدید میتونید از ویدیوی بالای صفحه استفاده کنید.

دانلود فایل در html

گفتیم که با تگ a میتونیم کارهایی غیر از لینک دادن به صفحات انجام بدیم. یکی از این کارها دانلود فایله. نحوه استفاده از تگ a برای دانلود کردن مثل قبله. اول لینک فایل رو به اتریبیوت href میدیم و بعد بین تگ های باز و بسته متنمون رو مینویسیم. تنها تفاوتش اینه که یه اتریبیوت به نام download به تگ‌مون اضافه میکنیم. این اتریبیوت به صورت زیر نوشته میشه

<a href="./image.jpg" download>برای دانلود عکس اینجا کلیک کنید</a>

باز کردن برنامه تماس با تگ a

یکی از کار های دیگه ای که با تگ a میتونید انجام بدید برقراری تماسه. مطمئنا توی سایت ها دیدید که یه دکمه “تماس با ما” یا “مشاوره تلفنی” دارن. برای ساخت همچین دکمه هایی شما باید کلمه :tel رو داخل اتریبیوت href بنویسید و بعد شماره مورد نظرتون رو جلوش بنویسید. یه نمونه کد از این کارو اینجا مشاهده میکنید.

<a href="tel:09123456789">تماس با ما</a>

ارسال ایمیل با تگ a

علاوه بر این که با تگ a میتونید تماس برقرار کنید میتونید ایمیل هم ارسال کنید. نحوه انجام این کار مثل برقراری تماسه با کمی تغییرات که توی اتریبیوت href انجام میشه. برای این کار بجای :tel باید از کلمه :mailto استفاده کنید

<a href = "mailto: test@example.com">ارسال ایمیل</a>

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

گذاشتن عکس در html