ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

ایجاد هایپرلینک و انکر در HTML 5 مطلب ویژه

توسط 03 تیر, 1393 4508 0

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

html5-hyperlinkوب مبتنی بر هایپرلینک ها است . هر صفحه وب حاوی لینک های فعالی به صفحات دیگر است که آن صفحه نیز می تواند حاوی لینک های دیگری به صفحات وب دیگر باشد و حتی ممکن است همه صفحات به یکدیگر وصل باشند. در حقیقت , نام وب (Web : تار عنکبوت)  از همین جا آمده است. هایپرلینک ها می توانند به مکان های دیگری روی یک صفحه وب , یا صفحات وب دیگر درون سایت شما یا صفحات خارج از سایت و هر نوع از محتویات وب و غیر وب وصل شده باشند .

 برای فعال کردن یک هایپرلینک (Hyperlink) روی یک متن یا گرافیک از پیش تعریف شده برای لینک کلیک می کنید و به مکان متفاوتی روی همان صفحه می روید یا صفحه وب دیگری را باز کرده , یک پیغام ایمیل را شروع می کنید , یا یک فایل را دانلود می کنید یا یک فیلم را دیده یا به یک کلیپ صوتی گوش می دهید, یا یک برنامه مبتنی بر وب را شروع می کنید و کارهایی مانند این موارد. ممکن است تا به حال روی هزاران لینک کلیک کرده باشید بدون این که درباره کد پشت سر آن ها فکر کرده باشید . بعد از این فصل چگونگی عملکرد لینک ها را درک کرده و می توانید خودتان لینک هایی را ایجاد کنید .

 در این فصل , درباره تگ <a> یاد می گیرید که برای ایجاد انواع مختلفی از هایپرلینک ها استفاده می شود . چگونگی ایجاد هایپرلینک ها به صفحات و به آدرس های ایمیل, چگونگی ایجاد نقطه های انکر درون یک سند و چگونگی ایجاد هایپرلینک مستقیم به یک نقطه انکر را خواهید دید. همچنین به شما نشان خواهم داد که چگونه یک هایپرلینک به محتویات غیر وب مانند یک سند مایکروسافت یا صفحه گسترده ایجاد کنید.


ایجاد هایپرلینک به یک صفحه وب

مهم نیست که چه نوع هایپرلینکی را می خواهید ایجاد کنید , روش اصلی کار همیشه مشابه است. این کار با تگ <a> شروع می شود و سپس از یک خاصیت href= استفاده می کنید که URL یا مسیر به مقصد را مشخص می کند. به عنوان مثال یک تگ باز برای هایپرلینک می تواند دارای چنین ظاهری باشد :



<a href='http://www.microsoft.com'>

 

بعد از این تگ باز, متنی می آید که هایپرلینک را نمایش می دهد و می توانید روی آن کلیک کنید ; یا یک ارجاع به تصویری ظاهر می شود که به عنوان هایپرلینک عمل می کند و کلیک روی آن مقصد را باز می کند . بعد از متن , تگ بسته </a> ظاهر می شود. در این جا یک مثال کامل را می بینید :

 

Visit <a href='http://www.microsoft.com'>Microsoft.com</a>for the latest information.

 

وقتی این کد در مرورگر دیده می شود, تولید هایپرلینک متنی مشابه با این شکل می کند که کلیک روی آن آدرس www.microsoft.com را باز می کند :



Visit Microsoft.com for the latest information

 

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

 

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

اگر به یک صفحه خاص لینک نداده باشید و تنها خود سایت ادرس داده باشید , سرور میزبان وب سایت با نمایش صفحه پیش فرض سایت (اگر موجود باشد) به شما پاسخ می دهد. اگر مرورگر هنگام دسترسی یک سرور درخواست صفحه خاصی را نداده باشد , اغلب سرور ها صفحه پیش فرض را بر می گردانند که معمولاً دارای نام Index یا default است .
در یک مرورگر , ادرس (یاURL) زیر را در نوار آدرس وارد کنید :



http://www.microsoft.com/en/us

 

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



http://www.microsoft.com/en/us/default.aspx

 

باز هم همان صفحه باز می شود . اولین بار وقتی نام فایل را وارد نمی کنید , سرور وب با ارسال فایل پیش فرض که دارای نام default.aspx است به شما پاسخ می دهد.

اگر بخواهید تا به یک صفحه خاص لینک بدهید , باید نام فایل کامل را وارد کنید . برای مثال اگر بخواهید یک لینک مستفیم به صفحه ایجاد کنید که کاربر بتواند ویندوز مدیاپلیر را دانلود کند , از این تگ استفاده خواهید کرد :



<a href='http://www.microsoft.com/windows/windowsmedia/player/download/download.aspx'>Download windows media player</a>

 

استفاده از مسیر های مطلق با نسبی :

مسیرهای که حاوی آدرس کاملی هستند که هر کسی می تواند از آن بای رسیدن به صفحه وب آن استفاده کند, مسرهای مطلق نامیده می شوند. مسیرهای مطلق بسیار مطمئن هستند اما طولانی بوده و تایپ کردن آن ها سخت است . به عنوان مثال :



<a href='http://www.contoso.com/gardener/images/foliage.htm'> diagnosing foliage problem</a>

 

در مسیرهای مطلق آدرس کامل صفحه وب یا شی را وارد می کنید و در آن آدرس سایت میزبان صفحه به همراه پوشه های حاوی فایل وارد می شوند.
اما وقتی به فایل هایی لینک می دهید که روی همان وب سایت صفحه وب حاوی لینک قرار دارند . لازم نیست که مسیر کامل به فایل را وارد نمایید ; می توانید به سادگی نام آن را وارد نمایید . وقتی فایل در همان پوشه صفحه وب حاوی لینک باشد, تنها نام فایل را وارد می کنید. به عنوان مثال اگر صفحات وب index.htm و foliage.htm در وب سایت شرکت garden company در یک پوشه قرار داشته باشند . می توانید در صفحه index.htm یک لینک ایجاد کرده و تنها با وارد کردن نام فایل foliage.htm به این فایل مراجعه کنید:

<a href='foliage.htm'>diagonosing foliage problem</a>

 

دراین حالت از مسیر نسبی (relative path) استفاده می کنید زیرا مکان فایل مقصد نسبت به مکان فایل کنونی تعیین می شود. مسیرهای نسبی کار ایجاد و آزمایش صفحات وب را آسان تر می کنند زیرا می توان ساختار سایت را روی کامپیوتر شبیه سازی کرد.
وقتی یک لینک به یک فایل ایجاد می کنید که در یک زیر پوشه از پوشه فایل کنونی قرار دارد  می توانید به آن زیر پوشه اشاره کنید. به عنوان مثال فرض کنید که index.htm در یک پوشه با نام c:main قرار دارد و foliage.htm در پوشه c:mainarticles قرار گرفته است که زیر پوشه از پوشه c:main است . برای دادن ارجاع به Foliage.htm از درون index.htm می توانید از یک تگ مانند این استفاده کنید :

<a href='articles/foliage.html'> diagonosing foliage problems</a>

 در این ارجاع, ابتدا نام زیرپوشه و سپس نام فایل نمایش داده شده است .

به علاوه می توانید به فایلی ارجاع بدهید که یک سطح بالاتر قرار دارد, به عنوان مثال می خواهید از foliage.htm  به index.htm ارجاع بدهید :



<a href='../index.htm'>htmoe</a>

 

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

برای هدایت یک هایپرلینک برای باز کردن یک صفحه در یک پنجره جدید , خاصیت target='_blank' را به تگ <a> اضافه می کنید . به عنوان مثال, برای باز کردن فایل foliage.htm در یک پنجره جدید, تگ را می توانید به این صورت ایجاد کنید :



<a href='foliage.htm' target='_blank'>diagonosing foliage problems</a>

 

ایجاد هایپرلینک برای یک آدرس ایمیل :
هایپرلینک ها می توانند به هر چیزی مراجعه کنند و مجبور نیستید تا تنها از صفحات وب استفاده نمایید. به عنوان مثال می و fتوانید هایپرلینکی را به آدرس ایمیل ایجاد کنید که وقتی کاربر روی آن کلیک می کند برنامه پیش فرض ایمیل اجر شده و یک پیغام جدید ایجاد شده و آدرس دریافت کنند در کادر TO: آن قرار می گیرد .(همچنین می توانید در صورت نیاز موضوع پیغام را نیز وارد کنید )

هایپرلینک های ایمیل وقتی مفید هستند که بخواهید کاربر بتوان یک پیغام را به شخص خاصی بفرستد . به عنوان مثال معمول است که یک لینک به آدرس ایمیل مدیر سایت ایجاد شود. برای ایجاد یک هایپرلینک به یک آدرس ایمیل , از خاصیت href= همانند قبل استفاده کرد اما این بار به جای یک ادرس وب , عبارت mailto: را تایپ کرده و سپس ادرس ایمیل مورد نظر را وارد می کنید مانند این :



<a href='mailto:این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید'>contact us</a>

 

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



Contact <a href='mailto:این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید'>این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید<;;/a>

 

 

برای اضافه کردن خط موضوع ( subjec به ایمیل , یک خاصیت ?subject= بعد از آدرس ایمیل اضافه کنید :



<a href=mailto:این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید?subject=comment'>contact us</a>

 

شخصی که از هایپرلینک استفاده می کند, در صورت نیاز می تواند خط موضوع را عوض کند و سپس ایمیل را ارسال نماید.

یک گزینه دیگر نیز وجود دارد, title= , که یک اسکرین تیپ (یک کادر کوچک که وقتی موس را روی هایپرلینک قرار می دهید, ظاهر می شود) برای هایپرلینک نمایش می دهد. وقتی کاربر ماوس را روی هایپرلینک قرار می دهد, این خاصیت یک پیغام را نمایش می دهد. به صورت پیش فرض , اسکرین تیپ برای یک هایپرلینک آدرس لینک را نشان می دهد اما می توانید آن را به هر چیزی که می خواهید تغییر دهید.

در مثال بعدی , به دلیل این که متن مشابه با هایپرلینک است, استفاده از اسکرین تیپ برای نمایش هایپرلینک کار مناسبی نیست:



Contact <a href=mailto:این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید'>این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید<;;/a>

 

برای نمایش پیغام please contact us with questions or comments در اسکرین تیپ , خاصیت title  را به کد اضافه کنید :



<a href=mailto:این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید' title='please contact us with questions or comments'>این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید<;;/a>

 

ایجاد انکرها و وصل کردن هایپرلینک ها به آن ها

یک انکر (Anchor) یک علامت درون سند HTML است که تقریباً معادل با نشان یک کتاب یا بوک مارک درون یک سند مایکروسافت ورد است . شما یک مکان خاص در سند را با یک نام انکر مشخص کرده و سپس یک هایپرلینک را به صورت مستقیم به آن وصل می کنید .

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

برای تعریف یک انکر, یک تک <a> یه دور متن مقصد ایجاد کرده و یک خاصیت name= در آن قرار می دهید . به عنوان مثال فرض کنید یک عنوان با عبارت Conclusion دارید و می خواهید یک انکر با نام مشابه ایجاد کنید.



<a name='conclusion'>Conclusion</a>

 

برای مراجعه کردن به یک نقطه انکر, نام آن را در خاصیت href= قرار می دهید. قبل از نام انکر یک علامت پوند # قرار می دهید . اگر نقطه انکر در همان سند هایپرلینک باشد, می توانید از یک ارجاع نسبی مانند این استفاده کنید :



<a href='#conclusion'>view the conclusion</a>

 

وگرنه باید نام فایلی که انکر در آن قرار دارد را نیز مشخص کنید . به عنوان مثال اگر انکر در یک فایل با نام report.htm قرار داشته باشد , دارای چنین ظاهری خواهد بود :

 

<a href='report.htm#conclusion'>view the conclusion</a>

 

قانون وارد کردن نام فایل , همانند هایپرلینک های عادی هستند . اگر سند در همان پوشه نباشد . باید به صورت نسبی یا مطلق به آن پوشه ارجاع بدهید.


ایجاد هایپرلینک به دیگر محتویات

یک هایپرلینک می تواند به هر فایلی وصل شود و مجبور نیستید از آن تنها برای صفحات وب استفاده کنید. می توانید از این مزیت برای ایجاد لینک به محتویاتی مانند اسناد مایکروسافت آفیس, فایلهای آرشیو فشرده شده و حتی فایل های اجرایی و نصب برنامه ها استفاده کنید . روش ایجاد لینک به این محتویات مشابه با ایجاد لینک به یک صفحه وب است; تنها تفاوت در نام فایلی است که در لینک وارد می کنید .
مانند :

 

<a href='www.asarayan.com/zipfile/program.zip'>download program.zip</a>

 

این مورد را ارزیابی کنید
(0 رای‌ها)
آخرین ویرایش در سه شنبه, 03 شهریور 1394 ساعت 15:49
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا