دسته : آموزش HTML

آموزش کامل لینک ها در html

در قسمت زیر آموزش کامل لینک ها در html را مشاهده می کنید.

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

شما می توانید بر روی یک لینک کلیک کنید و به سند دیگری بروید.

هنگامی که ماوس را روی یک پیوند حرکت می دهید، فلش ماوس به یک دست کوچک تبدیل می شود.

یک لینک لازم نیست که متن باشد. این می تواند یک تصویر یا هر عنصر HTML دیگر باشد.

قرار دادن لینک در html

در این بخش از آموزش html به بحث لینک ها می رسیم.

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

از تگ a در html برای لینک دادن استفاده می شود.

یک لینک می تواند به هر عنصری باشد متن ، عکس یا هر عنصر دیگر.

تگ a دارای تگ باز و بسته می باشد.

برای باز شدن لینک در تب جدید می توانید از target و مقدار blank استفاده نمایید.

برای نمایش title پس از اینکه موس روی آن ایستاد می توانید از ویژگی title در درون تگ a استفاده نمایید.

در مثال زیر ما خروجی متن topsite98 می باشد که به سایت ، لینک شده است.

<a href="https://topsite98.com/">topsite98</a>

ایجاد لینک داخلی  در html

برای ایجاد لینک داخلی  در html کافی است آدرس صفحه را در تگ a ویژگی href قرار دهید.

صفحات سایت از طریق لینک ها با یکدیگر ارتباط برقرار می کنند.

لینک داخلی باعث می شود براحتی و با یک کلیک به صفحات سایت برویم.

در مثال زیر ما به یک صفحه داخلی سایت لینک داده ایم.

<a href="category.html">category</a>

کد لینک دادن به عکس در html

در این بخش کد لینک دادن به عکس در html را مشاهده می کنید.

در کد زیر ما یک تگ img یا عکس داریم که در میان تگ a قرار دارد.

تصاویر می توانند پسوندهای مختلفی داشته باشند . رایج ترین پسوند png و jpg است.

در تمام سایت ها به تصاویر لینک می شود . مثلا برای قرار دادن تبلیغ ، یا لینک دادن به تصویر و لوگو نماد اعتماد . ما می توانیم به هر صفحه سایت خود یا هر سایتی لینک دهیم.

خروجی نمایش یک تصویر یا عکس است که به تاپ سایت 98 لینک شده است.

<a href="https://topsite98.com/"><img src="top.png"></a>

تغییر رنگ لینک در html

در بخش زیر با تغییر رنگ لینک در html آشنا می شوید.

با استفاده از css می توانید رنگ لینک را تغییر دهید. برای تغییر رنگ لینک می توانید از دستور color استفاده کنید.

لینک ها دارای حالات مختلفی میباشد و یک آموزش اختصاصی با موضوع کار با لینک ها در css برای آن تهیه کرده ایم.

در مثال زیر برای حالت پیش فرض استایل مشخص کرده ایم. در تگ style می توانیم از کدهای css استفاده کنیم.

<a style="color:green;" href="https://topsite98.com/">topsite98</a>

ایجاد لینک دانلود در html

برای ایجاد لینک دانلود در html کافی است آدرس فایل دانلودی را در ویژگی href لینک یا تگ a قرار دهید.

معمولا فایل ها ، زیپ یا فشرده می شوند و در یک سرور قرار داده می شوند و سپس آدرس لینک دانلود در href قرار داده می شود.

کد ایجاد لینک دانلود را در زیر می بینید کافی است آدرس فایل دانلود را در href قرار دهید.

<a href="downloadlink">download</a>

لینک دادن به دکمه در html

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

ابتدا برای تگ a کد دکمه را می نویسیم و سپس در ویژگی href آدرس یا لینک را قرار می دهید.

نتیجه کد html زیر دکمه ای است که به سایت ما لینک داده شده است.

<a style="background-color: orange;color: white;padding: 10px" href="https://topsite98.com/">topsite98</a>

لینک دادن به فونت آیکون

برای لینک دادن به فونت آیکون کافی است که در بین تگ a یک i یا span با کلاس fa و آیکون مناسب قرار دهید.

بجای متن در بعضی موارد استفاده از فونت آیکون مناسب تر است.

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

در زیر بجای متن از فونت آیکون استفاده کرده ایم. خروجی یک آیکون است که به سایت لینک شده است و با کلیک روی ان به تاپ سایت 98 می رود.

<a href="https://topsite98.com/"><i class="fa fa-adjust"></i></a>

امیدواریم این آموزش مورد توجه شما قرار گرفته باشد.

موفق باشید.

منبع : تاپ سایت 98 نویسنده : هدایت عباسی تاریخ : 2019-02-24 10:01:28 تگ :
تاپ سایت 98 تاپ سایت 98 تاپ سایت 98