تگ a در HTML

در این آموزش به روش کار با لینک ها ، تگ ایجاد لینک در html یا همان تگ a می پردازیم.

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

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

تگ a در HTML (ایجاد لینک):

تگ a به طور پیش فرض یک لینک دارای سه حالت ظاهری می باشد:

• لینکی که هنوز کلیک نشده ( آبی رنگ است و زیرش خط دارد )
• لینکی که کلیک شده ( زیرش خط کشیده شده و رنگش بنفش می باشد )
• لینکی که فعال است ( قبلاً روی آن کلیک شده و رنگ قرمز دارد )

این ویژگی های ظاهری پیش فرض با استفاده از کد های css و javascript قابل تغییر است.

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

سیار خب ، مثل همیشه آموزش رو با مثال پیش میبریم ، به مثال زیر توجه کنید:

<a href="https://www.bubbleslearn.ir">www.bubbleslearn.ir</a>

تست آنلاین کد

خب همان طور که در مثال بالا مشاهده میکنید تگ a به این شکل اجرا می شود:

<a href="address">your text</a>

address:

address در تگ لینک ، شما به جای address باید مسیری که قراره کاربر خودتون رو بهش هدایت کنید وارد کنید دقت کنید که برای انتقال به یک مسیر از خاصیت

href="address"

استفاده کردیم.

address ما میتونه URL خاصی باشه یا یک هشتگ برای رفتن به یک مکان خاص از صفحه وب و…

Your text:

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

شما می تونید بجای your text هر کدی قرار بدید که در نتیجه اون کد تبدیل به لینک میشه ، یعنی میتونید بجای your text یک متن قرار داده یا یک عکس یا هر چیز دیگر…

و کاربر با کلیک کردن بر روی اون هدایت میشه به مسیری که مشخص کردید…

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

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

اگر قصد دارید که لینک شما در یک صفحه دیگر باز شود و یا به هرشکل دیگر باید از خاصیت target استفاده کنید ، به مثال زیر دقت کنید:

<a href="https://www.bubbleslearn.ir" target="_blank" >Bubbles</a>

این کد را داخل تست آنلاین کد بابلز لرن تست کنید تا خروجی را بهتر درک کنید.

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

target="_blank"

در تگ a استفاده کردیم.

مقدار های target در تگ a:

بسیار خب ، مقدار هایی که خاصیت target در تگ لینک میگیرد به این صورت است:

target="_blank"
target="_parent"
target="_self"
target="_top"

پشتیبانی مرورگر ها