آموزش html - قسمت سوم - لینک ها
لینک ها بنیادی ترین قسمت از شبکه ارتباط جهانی (www) هستند. بنابرین توصیه می شود که هزینه زمانی بیشتری برای این قسمت صرف کنید. ما هم سعی می کنیم با آوردن مثال های متنوع به شما برای یاد گیری این بخش کمک کنیم. باید توجه داشت که هم متون و هم عکس ها می توانند به عنوان لینک مورد استفاده قرار بگیرند.
مثال های زیر را با هم بررسی می کنیم.
مثال 1) برای رفتن به سایت www.google.com از سایت www.e3tar.ir کافی است که بر روی www.google.com کلیک کنید.
مثال 2)برای اینکه آموزش HTML قسمت دوم را در همین سایت ببینیم کافی است که بر روی آموزش HTML قسمت دوم کلیک کنید.
مثال 3)برای رفتن به یکی از مثال ها در همین صفحه کافی است که روی برو به مثال کلیک کنید
3 مثالی که در بالا آورده شد تداعی کننده انواع لینک ها هستند که در زیر به آنها اشاره می شود.
انواع لینک (link) در html
1) لینک سراسری(Global Links): لینک هایی که به صفحات یک سایت دیگر اشاره دارند. به مثال 1 توجه کنید.
2) لینک محلی یا موضعی(Local Links): لینک هایی که به صفحات دیگر همان سایت اشاره می کند. یعنی از سایتی که در آن هستید خارج نمی شوند. به مثال 2 توجه کنید.
3) لینک داخلی (Internal Links): لینک هایی هستند که به قسمتی همان صفحه ای که در آن هستید اشاره می کنند. به مثال 3 توجه کنید.
چگونه لینک html بسازیم؟؟؟
برای ساختن لینک کافی است از دستور <a>...</a> مخفف anchor استفاده کنیم. هر آنچه که بین </a>…<a> قرار می گیرد به عنوان لینک شناخته می شود. برای اینکه مقصد لینک نیز مشخص شود از صفت href مخفف "hypertext reference" استفاده می کنیم. توجه کنید بین دستور a هر المانی از جمله متن ، عکس و... می تواند قرار بگیرد و بعد از این کار با کلیک بر روی آن المان به پیوند مورد نظر منتقل خواهیم شد.
پس شکل کلی این دستور در زبان html به صورت زیر است:
<a href="url">متنی که به عنوان لینک شناخته خواهد شد</a>
<a href="url"><img src="" /></a>
<a href="">هر المانی که قرار است به عنوان لینک استفاده شود</a>
Global link - لینک سراسری یا جهانی :
ویراستار Notepad++ خود را باز کنید و کد زیر را تایپ کنید سپس با پسوند htm یا html و با نام GlobalLink آن را ذخیره کنید.
<html>
<head>
<title>My Page</title>
</head>
<body>
Click <a href="http://www.google.com">here</a> to go to google.
</body>
</html>
حال اگر با مرورگر صفحه مورد نظر را باز کنید نتیجه به صورت زیر مشاهده خواهد شد:
Click here to go to google.
با فشردن کلمه here به سایت www.google.com خواهید رفت , به همین سادگی.
Local link - لینک محلی:
قبل از اینکه به این مثال بپردازیم یک صفحه html بنام firstpage را در درایو c خود بسازید.سپس ویراستار NotPad++ را باز کرده و کد زیر را در آن تایپ کنید و آن را با نام local-link و با پسوند htm ذخیره کنید
Click <a href="c:\firstpage.htm">here</a> to go to firstpage.
حال اگر با مرورگر صفحه local-link.htm را باز کنید، صفحه مورد نظر برای شما نمایش داده میشود!
حال اگر با مرورگر صفحه مورد نظر را باز کنید نتیجه به صورت زیر مشاهده خواهد شد:
Click here to go to firstpage.
با فشردن کلمه here به فایل اچ تی ام ال firstpage خواهید رفت , به همین سادگی.
Intrnal Link - پیوند داخلی:
برای اینکه به قسمت خاصی از صفحه وبی که در آن قرار داریم ، پیوند بر قرار کنیم یا به عبارت دیگر به قسمتی از همان صفحه html پرش کنیم، باید از صفت name از دستور<a>…</a> برای نام گذاری آن بخش استفاده کنیم.این نام از حروف تشکیل می شود که باید منحصر به فرد نیز باشد. مثلا قسمتی از صفحه را انتخاب می کنیم و در آن قسمت دستور <a name="mesale1">…</a> را می نویسیم حال برای مراجعه به آن بخش کافی است در پیوند داخلی که ایجاد می کنیم علامت # و بعد نامی که انتخاب کرده بودیم را می نویسیم. در این مثال باید بنویسیم <a href="#mesale1">…</a>. مثال کامل زیر بهتر به تشریح این موضوع خواهد پرداخت.
<html>
<head>
<title>my page</title>
</head>
<body>
<h3><a href="#Chapter 1">Introduction</a></h2>
<h3><a href="#Chapter 2">html text</a></h2>
<h3><a href="#Chapter 3">html links</a></h2>
<a name=" Chapter 1"> Introduction </a></br>
<!-- Introdution متن مربوط به --></br>
<a name=" Chapter 2"> html text</a></br>
<!-- html text متن مربوط به --></br>
<a name=" Chapter 3"> html links</a></br>
<!-- html links متن مربوط به --></br>
</body>
</html>
در مثال بالا فرض کنید صفحه وبی داریم که شامل اطلاعاتی در مورد html است که به 3 فصل html links, html text ,Introduction تقسیم شده است که در بالای صفحه آمده اند. توضیح همه این فصل ها درهمین صفحه قرار دارد.
حال برای دیدن متن مربوط به html text کافی است بر روی لینک html text کلیک کنیم. با یاد داریم که این نوع پیوند ، پیوند داخلی نام دارد. پس 2 مرحله برای ایجاد پیوند داخلی داریم:
1)نام گذاری بخشی که می خواهیم با لینک آن را ببینیم.
<a name="#Chapter 2">html text</a>
2)ایجاد پیوند به بخش نام گذاری شده.
<a href="#Chapter 2">html text</a>
لینک های رنگی بسازید:
برای اینکه لینک ها را در صفحه خود به صورت متمایز نمایش دهیم می توان برای آنها رنگ مشخص کرد.
دو حالت برای تعریف کردن رنگ لینک ها وجود دارد:
1)رنگ تمام لینک ها در صفحه به یک صورت تعریف شود.
2)برای بعضی از لینک ها رنگ متفاوتی تعریف کنیم.
link,vlink,alink ؟!! یعنی چی؟
link: بیان کننده رنگ پیوند هایی است که تا کنون ملاقات نشده اند. استاندارد آن آبی (blue یا #0000FF) است.
vlink مخفف Visited Link :رنگ پیوند را پس از ملاقات شدن نمایش می دهد.استاندارد آن ارغوانی (purple - #800080) است.
alink مخفف Active Link :رنگ لینک را وقتی که ماوس بر روی آن قرار می گیرد ، مشخص می کند.استاندارد آن قرمز (red - #FF0000) است.
یک رنگ برای تمام لینک های موجود در صفحه html
کافی است که در قسمت <body> از صفت های link,vlink,alink استفاده کنیم.
<body link="#C0C0C0" vlink="#808080" alink="#FF0000">
هر لینک یک رنگ
اگر بخواهیم رنگ یک یا چند لینک را در صفحه html ، متفاوت از بقیه نشان دهیم از یکی از دو روش زیر استفاده می کنیم.
روش اول:استفاده از دستور font بین دستور <a href>…</a>باید به این نکته مهم توجه داشت که دستور font حتما باید بین <a href>…</a> قرار بگیرد.
Click <a href="http://www.e3tar.ir"> <font color="red">here</font> </a> to go to e3tar.
روش دوم:استفاده از خاصیت style در دستور <a>
Click <a href="http://www.e3tar.com" style="color: green">here</a> to go to e3tar.
با استفاده از یکی از دو روش فوق می توانید لینک ها یی با رنگ دلخواه تعریف کنید .
بعضی رنگ های معروف:
Black, Aqua , Fushia, Blue, Gray, Green, Lime, Marron, Navy, Olive, Purple, Red,Silver,Teal,White,Yellow .
نکته :به جای نوشتن اسامی رنگ ها, می توان از فرمت RGB استفاده کرد.که b,g,r به ترتیب مخفف blue,green,red هستند.که هر یک می توانند مقداری بین 0 تا 255 بگیرند. رنگ مورد نظر از ترکیب این رنگ ها به دست خواهد آمد. مثلا 187 017 142 رنگی مایل به بنفش خواد بود. البته اکثر طراحان ترجیح می دهند که این رنگ ها را در مبنای شانزده (hex) بیان کنند مثلا رنگ معادل مثال قبل در مبنای شانزده به صورت 8E11BB# نوشته می شود.
صفات مربوط به دستور پیوند (Link Attributes )
در مورد صفت های href وname به طور مفصل صحبت کردیم حال به توضیح صفت های دیگر این دستور می پردازیم.
صفت title : با استفاده از این صفت وقتی ماوس بر روی پیوند مورد نظر قرار می گیرد متنی که در جلوی این صفت نوشته شده ظاهر می شود.
مثال:
<a href ="www.e3tar.ir" title="for more learning html click here">learning html</a>
وقتی ماوس روی پیوندhml learning قرار می گیرد پیام for more learning html click here ظاهر می شود.
صفت tabindex : با استفاده از این صفت و مقدار دادن به آن در مرورگرهایی که ازاین صفت پشتیبانی می کنند ,روند انتخاب کردن پیوند را با استفاده از کلید Tab مشخص می کنیم.
مثال:
<a href =" http://www.yahoo.com" tabindex="1">yahoo</a></br>
<a href =" http://www.google.com" tabindex="3">google</a></br>
<a href =" http://www.e3tar.ir" tabindex="2">e3tar</a>
با یک بار فشردن کلید Tabمکان نما بر روی پیوند yahoo با دو بار فشردن مکان نما بر روی پیوند e3tar و با سه بار فشردن کلید Tab مکان نما بر روی پیوند google قرار می گیرد.
حال اگر ازاین صفت استفاده نکنیم ,با هر بار فشردن کلید Tab ,مکان نما به ترتیبی که پیوندها در صفحه آورده شده اند ,حرکت می کنند.مثلا اگر در مثال بالا از صفت tabindex استفاده نشود,با یک بار فشردن Tab مکان نما بر روی پیوند yahoo با دو بار فشردن بر روی پیوند google و با سه بار فشردن برروی پیوند e3tar قرار می گیرد.
صفت Target : به صورت پیش فرض, لینک ها در همان پنجره یا فریم ای که در آن هستید باز خواهند شد.با استفاده از صفت Target مثلا می توانید تعیین کنید که پیوند مورد نظر در یک پنجره جدید باز شود. با این صفت در بخش فریم ها بیشتر آشنا خواهیم شد.
ادامه » آموزش html - قسمت چهارم - لیست
بازگشت « آموزش html - قسمت دوم - متن ها