لینک های HTML
یادگیری HTMLلینک های html در همه صفحات وب وجود دارند و برای كاربر امكان حركت از صفحه ای به صفحه دیگر را فراهم می كنند.
لینک های html - هایپر لینك (hyperlink)
در HTML لینك ها ، هایپر لینك هستند. می توان روی یك لینك كلیك كرده و به سند دیگری دسترسی داشت. وقتی ماوس را روی یك لینك می بریم ، فلش ماوس تبدیل به یك دست كوچك می شود.
نكته ! لینك ها لزومی ندارد یك متن یا كلمه باشند ،می توانند یك تصویر یا هر عنصر HTML دیگری باشند.
تركیب لینك ها در HTML
لینك ها با تگ <a> مشخص می شوند :
<a href="url">متن لینك</a>
مثال :
<a href="http://tuts.webmehraz.com/">از آموزش های برنامه نویسی ما دیدن کنید</a>
مشاهده مثالصفت href آدرس مقصد لینك را مشخص می كند. (در مثال : /http://tuts.webmehraz.com)
متن لینك ، قسمت قابل رؤیت لینك می باشد. ( در مثال : مجموعه دروس آموزش برنامه نویسی)
كلیك بر روی متن لینك شما را به آدرس مشخص شده هدایت خواهد كرد.
نكته ! بدون اضافه كردن اسلش ( / ) به انتهای آدرس، در اصل شما دو درخواست برای سرور ایجاد می كنید. بسیاری از سرورها خود بصورت اتوماتیك این اسلش را اضافه كرده و سپس یك درخواست جدید مبنی بر هدایت به آدرس مورد نظر ، ایجاد می كنند.
لینك های محلی ( local links )
در مثال بالا از یك آدرس كامل استفاده كردیم. اما یك لینك محلی ( لینك به صفحه ای در همان وب سایت ) با استفاده از یك URL مرتبط (بدون http://www. ) مشخص می شود.
مثال :
<a href="Tutorials/1/یادگیری-HTML.aspx">یادگیری HTML</a>
مشاهده مثال
رنگ لینك در HTML
بصورت پیش فرض ،یك لینك در همه مرورگر ها به شرح زیر نمایش داده می شود :
لینك مشاهده نشده ، با زیرخط _ و به رنگ آبی
لینك مشاهده شده ، با زیرخط _ و به رنگ بنفش
لینك فعال ( وقتی ماوس روی لینك برود )، با زیرخط _ و به رنگ قرمز
هرچند ، می توان این رنگ ها را با استفاده از استایل ، تغییر داد.
مثال :
<style>
a:link { color: green; background-color: transparent; text-decoration: none;}
a:visited { color: pink; background-color: transparent; text-decoration: none;}
a:hover { color: red; background-color: transparent; text-decoration: underline;}
a:active { color: yellow; background-color: transparent; text-decoration: underline;}
</style>
مشاهده مثال
صفت target برای لینك ها در HTML
صفت target مشخص می كند كه سند لینك شده كجا باز شود. صفت target می تواند یكی از مقادیر زیر را داشته باشد :
_blank لینك را در یك پنجره یا تب مرورگر جدید باز می كند.
_self لینك را در همان پنجره یا تب مرورگر باز می كند.
_parent لینك را در پنجره اصلی در حال نمایش ،باز خواهد كرد.
_top لینك را در یك پنجره كامل نمایش خواهد داد.
_framename لینك را در یك فریم نام گذاری شده نمایش خواهد داد.
این مثال ، لینك را در یك پنجره یا تب مرورگر جدید باز خواهد كرد.
مثال :
<a href="http://tuts.webmehraz.com/" target="_blank" >از آموزش های طراحی وب ما دیدن کنید!</a>
مشاهده مثالنكته ! اگر صفحه وب مقصد داخل یك فریم قفل شده باشد ، می توانید با استفاده از target="_top" فریم را لغو كنید.
مثال :
<a href="http://www.webmehraz.com/" target="_top">اینجا کلیک کنید!</a>
مشاهده مثال
تصاویر به عنوان لینك در HTML
استفاده از تصاویر به عنوان لینك امری متداول است.
مثال :
<a href="http://tuts.webmehraz.com">
<img src="smiley.gif" alt="آموزش های وب نویسی" style="width:42px;height:42px;border:0">
</a>
مشاهده مثالنكته ! اینترنت اكسپلورر 9 و قبل از آن وقتی یك تصویر لینك باشد ، به دور تصویر خط حاشیه نمایش می دهد ،برای جلوگیری از این عمل ،به تصویر صفت border:0 را اضافه می كنیم.
علامت گذاری در صفحه HTML
استفاده از این ویژگی به كاربران اجازه می دهد تا سریعاً به قسمت مشخص شده در همان صفحه مراجعه كنند. این ویژگی زمانی كه محتوای صفحه طولانی باشد بسیار مفید واقع می شود. برای علامت گذاری ، ابتدا باید ابتدا علامت را ایجاد كنید ،سپس به آن لینك دهید. زمانی كه لینك كلیك می شود صفحه به قسمت علامت گذاری شده اسكرول می شود.
- ابتدا یك علامت یا صفت id ایجاد می كنیم :
</h2>نكات مهم <"h2 id="tips>
سپس یك لینك به علامت ،ایجاد می كنیم در همان صفحه :
</a>بخش نكات مهم <"a href="#tips>
یا یك لینك به علامت ایجاد شده می دهیم از صفحه ای دیگر :
</a>مشاهده بخش نكات مهم<"a href="html_tips.html#tips>
مثال :
<a href="html_tips.html#tips">"پرش به قسمت "نکات مهم</a>
مشاهده مثالخلاصه درس :
عنصر <a> برای تعیین یك لینك
صفت href برای تعیین آدرس لینك
صفت target برای تعیین محل باز شدن لینك
عنصر <img> در داخل عنصر <a> برای تعیین یك تصویر به عنوان لینك
صفت id ( id="value" ) علامت گذاری در صفحه
صفت href (href="#value") برای لینك به علامت
نظر شما
>