آموزش طراحی وب سایت با html: آشنایی با html Link Color

آموزش طراحی وب سایت با html: آشنایی با html Link Color

جلسه یازدهم : آشنایی با html Link Color

آموزش طراحی وب سایت با Html

 

در این جلسه میخواهیم رنگ های یک لینک را تغییر دهیم. به صورت پیش فرض، لینک های html در ۳ رنگ مختلف نشان داده میشوند که در مرورگر ها نشان داده خواهند شد.

Active Links: زمانی که ما بر روی یک لینک کلیک میکنیم، آن لینک به یک Active Link با رنگ قرمز تبدیل میشود.

Unvisited Links: لینک هایی که از آن ها بازدید نکرده ایم لینک های Unvisited میگویند که به رنگ آبی میباشد.

Visited Links: در مرورگر ها، لینک هایی که از آن بازدید میکنیم، از رنگ آبی به رنگ بنفش تغییر میکنند.

اما ما میتوانیم به صورت زير، رنگ هایی را به صورت سفارشی برای لینک ها در نظر بگیریم، ما در اینجا از css استفاده ميکنيم.

۱- با استفاده از hsl و hsla

۲- با استفاده از کد رنگ HEX

۳- با استفاده از مقادير rgb و rgba

۴- يا اينکه ميتوانيم مستقيما نام رنگ را بنويسيم.

 

مثال: ميخواهيم لينک گوگل را به صورت سبز در يک فايل html نشان دهيم.

۱- همانطور که قبلا توضیح دادیم، ابتدا از تگ a و عبارت href براي ايجاد لينک استفاده ميکنيم.

 

<html>
<body>

<a href=” “> </a>

</body>
</html>

سپس، در عبارت href، بين دو کاراکتر دابل کوتيشن يا ” ” آدرس سايت Google را ايجاد ميکنيم. همانند زير:

<html>
<body>

<a href=” https://www.google.com/ “>  </a>

</body>
</html>

در ادامه، بین دو تگ باز و بسته a، یک متنی را که میخواهیم به صورت لینک ظاهر شود، مینویسیم. برای مثال: Site

<html>
<body>

<a href=” https://www.google.com/ “> Site </a>

</body>
</html>

اکنون پروژه را به صورت فایل html ذخیره کنید، فایل را باز کنید، مشاهده میکنید که لینک Site به به صورت پیش فرض به رنگ آبی ظاهر شده است. اگر بر روی لینک کلیک کنید وارد Google خواهید شد.

مثال: اکنون ميخواهيم رنگ لينک سايتي را که ايجاد ميکنيم، به صورت سفارشي تغيير دهيم. ابتدا لينک سايت فرکيان تک را در قالب متن Welcome to farkiantech Website تعريف ميکنيم. همانند زير:

<html>
<body>

<a href= ” https://farkiantech.com “> Welcome to farkiantech Website </a>

</body>
</html>

در ادامه ميخواهيم رنگ لينک را تغيير دهيم. در کد بالا، بعد از آدرس ” https://farkiantech.com “، عبارت Style را بنويسيد. همانند زير:

<html>
<body>

<a href=” https://farkiantech.com ” style=” “ > Welcome to farkiantech Website </a>

</body>
</html>

من میخواهم لینک سایت فرکیان تک به رنگ قرمز نشان داده شود. درون عبارت Style مینویسیم ;color:green  (به کاراکتر ; توجه کنید)

<html>
<body>

<a href=” https://farkiantech.com ” style = “color : green” > Welcome to farkiantech Website </a>

</body>
</html>

اکنون پروژه را به صورت فایل html ذخیره کنید و آن را باز کنید. مشاهده میکنید که لینک به صورت رنگ سبز نمایش داده شده است. میتوانید از هر رنگی که میخواهید استفاده کنید.

html Color

html color

در اين جلسه (لينک) گفتيم که هر رنگ يک کد دارد. ميتوانيم براي تغيير رنگ لينک ها، به جاي اينکه نام خوده رنگ در کدنويسي بنويسيم. از کد مخصوص به آن رنگ استفاده کنيم. به تصوير زير توجه کنيد تا با کد هر رنگ آشنا شويد.

استفاده از کد رنگ HEX :

 

Color Code
آشنايي با کد هاي هر رنگ، سبب ميشود بتوانيد تنوع بيشتري در انتخاب رنگ ها داشته باشيد.

 

ميخواهيم يک لينک تعريف کينم و از کد (FF000) در آن استفاده کنم. این کد برای رنگ قرمر میباشد که میتوانید آن را در تصویر بالا مشاهده کنید. . قرار نيست چيزي تغيير کند. تنها کد رنگ جايگزين نام رنگ ميشود. توجه کنيد که قبل از کد رنگ، علامت # قرار ميگيرد.

<html>
<body>

<a href=” https://farkiantech.com ” style = “color:#FF0000” > Welcome to farkiantech Website </a>

</body>
</html>

میتواند پروژه را ذخیره و آن را مشاهده کنید. در ادامه، یک لینک دیگر به آن اضافه خواهیم کرد.

<html>
<body>

<a href=” https://farkiantech.com ” style=”color:#FF0000″ > Welcome to farkiantech Website </a>

<a href=”https://farkiantech.online/” style=”color:#00CCFF” > Welcome to farkiantech Website </a>

</body>
</html>

اکنون اگر پروژه را ذخیره کنید، متوجه خواهید شد که هر دو لینک در یک خط، پشت سر هم ایجاد شده اند.

html link
همانظور که مشاهده میکنید. هر دو لینک در یک خط، کنار هم چاپ شده اند.

برای اینکه هر کدام در یک خط نوشته شود، میتوانیم از تگ باز و بسته p استفاده کنیم. همانند زیر:

<html>
<body>

<a href=” https://farkiantech.com ” style=”color:#FF0000″ > Welcome to farkiantech Website </a>
<p>

</p>
<a href=”https://farkiantech.online/” style=”color:#00CCFF” > Welcome to farkiantech Website </a>

</body>
</html>

اکنون، اگر بار دیگر فایل html این پروژه را چک کنید. متوجه خواهید شد که تگ <p> بین دو لینک فاصله ایجاد کرده است.

  در جلسه آینده بیشتر با این موضوع آشنا خواهیم شد. با ما همراه باشید.

محمد امین مکارم

مطالب مرتبط

نقد و بررسی‌ها

نظر: