no-img

اِمیلا آموزش html – قسمت سوم – لینک ها
اِمیلا
ترفند وب آموزش html – قسمت سوم – لینک ها
فرم گزارش را به دقت تکمیل نمایید
از همکاری شما سپاسگذاریم

ادامه مطلب

بروزسانی شده در 22 خرداد 1398
آموزش html – قسمت سوم – لینک ها
رمز : emila.ir
حمایت از emila.ir
درخواست کاربران

emila.ir QR-codeآموزش html – قسمت سوم – لینک ها

بروزسانی شده در 22 خرداد 1398
71
milipinkman

لینک ها بنیادی ترین قسمت از شبکه ارتباط جهانی (www) هستند. بنابرین توصیه می شود که هزینه زمانی بیشتری برای این قسمت صرف کنید. ما هم سعی می کنیم با آوردن مثال های متنوع به  شما برای یاد گیری این بخش کمک کنیم. باید توجه داشت که هم متون و هم عکس ها می توانند به عنوان لینک مورد استفاده قرار بگیرند.

انواع لینک (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 را باز کنید، صفحه مورد نظر برای شما نمایش داده میشود!

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

با فشردن کلمه 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.emila.ir"> <font color="red">here</font> </a> to go to emila.

روش دوم:استفاده از خاصیت style  در دستور <a>

Click <a href="http://www.emila.ir" style="color: green">here</a> to go to emila.

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

بعضی رنگ های معروف:

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.emila.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.emila.ir"  tabindex="2">emila</a>

با یک بار فشردن کلید Tabمکان نما بر روی پیوند yahoo با دو بار فشردن مکان نما بر روی پیوند emila و با سه بار فشردن کلید Tab مکان نما بر روی پیوند google قرار می گیرد.
حال اگر ازاین صفت استفاده نکنیم ,با هر بار فشردن کلید Tab ,مکان نما به ترتیبی که پیوندها در صفحه آورده شده اند ,حرکت می کنند.مثلا اگر در مثال بالا از صفت tabindex استفاده نشود,با یک بار فشردن  Tab  مکان نما بر روی پیوند yahoo با دو بار فشردن بر روی پیوند google و با سه بار فشردن برروی پیوند emila قرار می گیرد.

صفت Target : به صورت پیش فرض, لینک ها در همان پنجره یا فریم ای که در آن هستید باز خواهند شد.با استفاده از صفت Target مثلا می توانید تعیین کنید که پیوند مورد نظر در یک پنجره جدید باز شود. با این صفت در بخش فریم ها بیشتر آشنا خواهیم شد.

موضوع : وب/ برچسب : / لینک کوتاه : https://emila.ir/?p=12655
designer
نظرات ارسال شده توسط شما، پس از تایید، توسط مدیران سایت منتشر خواهد شد.
نظراتی که به غیر از زبان فارسی، غیر مرتبط با مطلب یا فینگلیش باشد، منتشر نخواهد شد.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

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

Here is a some short information about me: I'm a natural born, writer, designer, forecaster, Interested in PHP programming and activities in the field of digital currency, basically I'm a pretty simple person. I work for Emila.ir for more than 1 years. I am passionate about creating posts and content for emila.ir which I think is Among the best viral persian Websites. I am available at Nearby

ارسال پیامک به ما  -  ارسال ایمیل به ما
IP شما: 54.174.43.27