در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش HTML گام به گام قسمت 9 : لینک ها

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

<a href="url">link text</a> 

Url تعیین کننده مسیری است که با کلیک روی نوشته link text باز می شود. Href همانطور که قبلا عرض کردن یکی از صفات مهم تگ a می باشد. که مشخص کننده مسیر لینک است.

اهداف در لینک های اچ تی ام ال

در یک سند اچ تی ام ال می توان تعیین کردن که لینک ها به چه صورتی باز شوند، مثلا در تبی جدید یا در همان تب و... . صفت target در تگ a مشخص کننده نوع باز شدن یک لینک می باشد. مقادیری که این صفت می تواند دریافت کند در زیر آمده است:

  • __Blank : باز شدن لینک در یک تب یا پنجره جدید
  • __Self : باز شدن لینک در همان تب / به صورت پیش فرض تگ a دارای این مقدار است.
  • __Parent: (در صورت استفاده از Frame) باز شدن لینک در همان Frame
  • __Top : (در صورت استفاده از Frame) باز شدن لینک در Frame دیگر
  • Framename : (در صورت استفاده از Frame) باز شدن لینک در Frame مشخص

یک مثال کلی

<a href="http://www.tosinso.com/" target="_blank">Visit ITPro!</a> 

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

لینک ها در سی اس اس

لینک ها در سی اس اس دارای چهار حالت مختلف هستند، یعنی می توان یک متن که دارای لینک است در چهار حالت مختلف استایل دهی شوند:

  • Link: رنگ لینک را انتخاب می کند.
  • Visited: رنگ لینکی که قبلا روی آن انتخاب شده است.
  • Hover: رنگ لینک در زمانی که ماوس روی آن می رود.
  • active : رنگ لینک درست در زمان کلیک کردن روی آن.

حال چگونه می توانیم از این امکانات استفاده کنیم!؟

<style>
a:link {color:red;}
a:visited {color:red;}
a:hover {color:red;}
a:active {color:red;}
</style>

ساخت Bookmark در لینک: حتما تا به حال شده است که با کلیک روی یک لینک، در همان صفحه به مکانی منتقل می شوید، مثلا وقتی به پایینترین نقطه یک سایت میروید عموما با نوشته Top مواجهه شده اید، وقتی روی این نوشته کلیک می کنید به بالای صفحه انتقال می یابید. یا در ویکیپدیا، وقتی روی زیر گزینه ها یک موضوع کلیک می کنید در همان صفحه به قسمت مربوطه فرستاده می شوید، به این نوع لینک ها Bookmark می گویند. برای تعیین بوکمارک کافی است که لینک یک نوشته را برابر آی دی یک المنت یا تگ اچ تی ام ال قرار دهید. برای نمونه:

<h1 id="top"></h1>
    <br><br><br><br><br><br><br><br><br><br>
    <a href="#top">TOP</a>

این دستور را امتحان کنید و نتیجه را ببینید! شما همچنین می توانید برای جذاب تر کردن لینک های تان بجز متن، از تصاویر هم استفاده نمایید. یعنی به جای آنکه روی یک متن کلیک کنید، روی یک عکس کلیک کرده و به جای مورد نظر منتقل شوید. برای این کار داخل تگ <a> از تگ <img> بهره ببرید.

<a href="tosinso.com"><img src="p1.png"></a>

نویسنده : ارسطو عباسی

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

#آموزش_گام_به_گام_css #آموزش_html #آموزش_link_در_html #آموزش_گام_به_گام_html #آموزش_تگهای_html #استفاده_از_تگ_های_html #یادگیری_html_به_زبان_ساده #آموزش_مقدماتی_html #آموزش_مقدماتی_css #link_کردن_در_html
عنوان
1 آموزش HTML گام به گام قسمت 1 : معرفی و آشنایی کلی رایگان
2 آموزش HTML گام به گام قسمت 2 : دستورات مقدماتی و معرفی ساختار رایگان
3 آموزش HTML گام به گام قسمت 3 : صفحات یا Attributes و نکات مربوطه رایگان
4 آموزش HTML گام به گام قسمت 4 : عنوان بندی و تگ های جدید رایگان
5 آموزش HTML گام به گام قسمت 5 : استایل و فرمت متن ها رایگان
6 آموزش HTML گام به گام قسمت 6 : نقل قول و درج توضیحات رایگان
7 آموزش HTML گام به گام قسمت 7 : استفاده از رنگ رایگان
8 آموزش HTML گام به گام قسمت 8 : CSS چیست و مقدمات آن رایگان
9 آموزش HTML گام به گام قسمت 9 : لینک ها رایگان
10 آموزش HTML گام به گام قسمت 10 : تصاویر رایگان
11 آموزش HTML گام به گام قسمت 11 : جداول رایگان
12 آموزش HTML گام به گام قسمت 12 : لیست ها رایگان
13 آموزش HTML گام به گام قسمت 13 : بلاک و کلاس ها رایگان
14 آموزش HTML گام به گام قسمت 14 : قاب بندی رایگان
15 آموزش HTML گام به گام قسمت 15 : تگ عنوان یا Head رایگان
16 آموزش HTML گام به گام قسمت 16 : چند قانون ساده رایگان
17 آموزش HTML گام به گام قسمت 18 : فرم ها رایگان
18 آموزش HTML گام به گام قسمت 19 : کنترل ها و اجزای فرم رایگان
19 آموزش HTML گام به گام قسمت 20 : انواع ورودی رایگان
20 آموزش HTML گام به گام قسمت 21 : خاصیت های تگ input رایگان
21 آموزش HTML گام به گام قسمت 22 : چندرسانه/ویدیو و صدا رایگان
22 آموزش HTML گام به گام قسمت 23 : مدیریت بهتر لایه های وب رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....