پیکسلر | آموزش طراحی سایت - آموزش لینک های متنی

آموزش طراحی سایت - آموزش لینک های متنی

لینک های متن HTML

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

لینک کردن داکیومنت ها

یک لینک با استفاده از برچسب < a> در HTML تعیین می شود. این برچسب anchor tag نامیده می شود و هر چیزی بین برچسب آغازین < a> و پایانی < /a> بخشی از لینک می شود و یک یوزر می تواند آن بخش را کلیک کرده تا به داکیومنت لینک شده برسد. در زیر ترکیب ساده ی استفاده از برچسب < a> را می بینید.

<a href="Document URL" ...="" attributes-list="">Link Text</a

مثال:

اجازه دهید مثال زیر را امتحان کنیم که http://www.tahlildadeh.com را در صفحه ی شما لینک می کند.

نمونه یک

<!DOCTYPE html>
<html>
<head>
    <title>Hyperlink Example</title>
</head>
<body>
    <p>Click following link</p>
    <a href="http://www.tahlildadeh.com" target="_self">Tahlildadeh</a>
</body>
</html>
این مثال نتیجه ی زیر را تولید خواهد کرد که شما می توانید روی لینک تولید شده ی tahlildadeh کلیک کنید تا به صفحه ی اصلی tahlildadeh برسید.
Click following link

tahlildadeh

ویژگی target

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

Option

Description

_blank

داکیومنت لینک شده را در یک پنجره یا تب جدید باز می کند.

_self

داکیومنت لینک شده را در همان چارچوب باز می کند.

_parent

داکیومنت لینک شده را در چارچوب اصلی باز می کند.

_top

داکیومنت لینک شده در کل بدنه ی پنجره باز می شود.

targetframe

داکیومنت لینک شده را در یک targetframe نام گذاری شده باز می کند.

مثال:

برای درک تفاوت اصلی در برخی گزینه های ارائه شده در ویژگی target مثال زیر را امتحان کنید.

نمونه دو

<!DOCTYPE html>
<html>
<head>
    <title>Hyperlink Example</title>
    <base href="http://www.tahlildadeh.com/">
</head>
<body>
    <p>Click any of the following links</p>
    <a href="http://www.tahlildadeh.com" target="_blank">Opens in New</a> |
    <a href="http://www.tahlildadeh.com" target="_self">Opens in Self</a> |
    <a href="http://www.tahlildadeh.com" target="_parent">Opens in Parent</a> |
    <a href="http://www.tahlildadeh.com" target="_top">Opens in Body</a>
</body>
</html>

این مثال نتیجه ی زیر را تولید خواهد کرد که می توانید روی لینک های مختلف کلیک کنید تا تفاوت بین گزینه های مختلف ارائه شده برای ویژگی target را درک کنید.



Click any of the following links
Opens in New | Opens in Self | Opens in Parent | Opens in Body

استفاده از مسیر پایه

وقتی که شما داکیومنت های HTML را متناسب با همان وب سایت لینک می کنید، ارائه ی یک URL کامل برای هر لینک ضروری نیست. اگر از برچسب در تیتر داکیومنت HTML خود استفاده می کنید، می توانید از دست آن خلاص شوید. این برچسب برای ارائه ی یک مسیر پایه برای همه ی لینک ها استفاده می شود. بنابراین مرورگر شما مسیر ارائه شده ی مرتبط را به مسیر پایه پیوند خواهد داد و یک URL کامل ایجاد خواهد کرد.

مثال:

مثال زیر از برچسب < base> برای مشخص کردن URL پایه استفاده می کند و پس از آن ما می توانیم به جای ارائه ی URL کامل برای هر لینک از مسیرهای مرتبط استفاده کنیم.

آموزش طراحی سایت

نمونه سه

<html>
<head>
    <title>Hyperlink Example</title>
    <base href="http://www.tahlildadeh.com/">
</head>
<body>
    <p>Click following link</p>
    <a href="/WebsiteNews/TahlildadeNews.aspx" target="_blank">HTML tahlildadeh</a>
</body>
</html>

این مثال نتیجه ی زیر را تولید خواهد کرد که می توانید روی لینک تولید شده ی HTML tahlildadeh کلیک کنید تا به آموزش HTML برسید.
اکنون URL ارائه شده ی < a href="http:/WebsiteNews/TahlildadeNews.aspx> باعنوان < a href=" http //www.tahlildadeh.com/WebsiteNews /TahlildadeNews.aspx"> در نظر گرفته می شود

لینک شدن به بخشی از صفحه

می توانید برای بخش خاصی از صفحه ی وب ارائه شده، با استفاده از ویژگی name یک لینک ایجاد کنید. این امر یک فرایند دو مرحله ای می باشد.
نخست اینکه در مکانی که می خواهید به داخل صفحه ی وب برسید یک لینک ایجاد کنید و آن را با استفاده از برچسب < a...> نام گذاری کنید

<h1>HTML Text Links <a name="top"></a></h1>

مرحله ی دوم ایجاد یک هایپر لینک می باشد برای لینک کردن داکیومنت و قرار دادن در مکانی که می خواهید برسید.

<a href="/html/html_text_links.htm#top">Go to the Top</a>

و این مثال لینک زیر را تولید خواهد کرد که می توانید در آن روی لینک تولید شده ی Go to the Top کلیک کنید تا به نقطه ی بالای آموزش HTML Text Link برسید.

نمونه پنج

<!DOCTYPE html>
<html>
<head>
    <title>Hyperlink Example</title>
    <base href="http://www.tahlildadeh.com/">
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
    <p>Click following link</p>
    <a href="http://www.tahlildadeh.com" target="_blank">HTML tahlildadeh</a>
</body>
</html>

پیکسلر | شبکه اجتماعی برنامه نویسان

آموزش طراحی سایت - آموزش لینک های متنی

آموزش طراحی سایت - آموزش لینک های متنی

لینک های متن HTML

لینک کردن داکیومنت ها

نمونه یک

tahlildadeh

ویژگی target

نمونه دو

استفاده از مسیر پایه

آموزش طراحی سایت

نمونه سه

لینک شدن به بخشی از صفحه

نمونه پنج

تنظیم رنگ

tahlildadeh

آخرین پست های من