فیلم آموزشی لینک ها در HTML

حتماً تا به حال در سایت های اینترنتی با نوشته هایی برخورد کرده اید که با کلیک بر روی آن ها به صفحات دیگر همان وب سایت یا به سایت های دیگر ارجاع داده شده اید؛ این نوشته ها همان لینک ها در html هستند که برای پیوند به یک صفحه دیگر در هر جای وب و یا پیوند به مکانی در داخل همان صفحه وب سایت و … استفاده می شوند.

لینک ها در طراحی صفحات وب، کاربردهای مختلفی از جمله ساخت منو ها، صفحه بندی سایت ها (pagination)، ارتباط بین صفحات وب و … را دارند.

شما در این فیلم آموزشی علاوه بر آشـنایی با تگ a، با صفت ها(attribute) در html  آشنا خواهید شد. با استفاده از صـفت ها شما می توانید کنترل بیشتری بر روی تگ ها داشته باشید. درواقع attributeها ویژگی های هر تگ را مشخص می کنند. برخی صفات عبارتند از : id, class, dir, style, title, href,  target, …

آنچه در این فیلم آموزشی خواهید آموخت :

• نحوه ایجاد لینک در html به صفحات خاص یا فایل های خاص جهت دانلود فایل مربوطه و …
• معرفی برخی صفات تگ a در اچ تی ام ال، مانند href, title, target, rel
• بیان روش آدرس دهی لینک ها
• آموزش تعیین عنوان برای تگ a بصورتی که با بردن موس روی لینک، عنوان نمایش داده شود.(tooltip)
• نحوه کنترل پنجره لینک ها
• آموزش ساخت یک منوی ساده با استفاده از لینک ها
• معرفی صفات(attribute) در html
• آموزش نحوه استفاده از صفات در تگ های html

[hdplay id=9]

برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :

[free_vip]
[video_download cat=’html’ url=’http://www.dl.onliner.ir/html-videos/linkha-va-attributeha.mp4′]دانلود فیلم آموزشی لینک ها در HTML[/video_download]
[/free_vip]

دسترسی سریع :

• آموزش قبلی : فیلم آموزشی ایجاد لیست تو در تو برای ساخت منوهای کشویی و …
• آموزش بعدی : فیلم آموزشی ساخت منوی یک سایت شرکتی با HTML
• لیست فیلم ها : فیلم های آموزش جامع HTML

 

متن فیلم آموزشی لینک ها در HTML

اگر بخواهیم تعریف مختصری از link ها داشته باشیم می توانیم بگوییم link ها ارتباط بین صفحات وب برقرار می کنند و در صفحات وب کاربرد بسیار فراوانی دارد مانند : ساخت منو، لینک کردن سایت ها با یکدیگر، ایجاد ارتباط بین صفحات وب سایت، ایجاد صفحه بندی (pagination) برای سایت و …

ما با تگ a می توانیم لینک هایی را در صفحه وب خود قرار بدهیم به عنوان  مثال:

[html]

<a>welcome to onliner.ir</a>

[/html]

 

 

نتیجه :

 

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

برای آدرس دادن به تگ a باید از attribute href استفاده کنیم ساختار نوشتن attribute در تگ a به صورت زیر است :

[html]
<a attribute_name="value" attribute_name2="value"></a>
<a href="http://sitemordnazar.ir">متن نمایش دهنده</a>
<a href="https://onliner.co">آنلاینر</a>
[/html]

نتیجه :

تگ a  شامل صفت های فراوانی است که ما به چند attribute مهم آن اشاره می کنیم :

href=”آدرس موردنظر”

title=”توضیح کوچک”

target=” نحوه باز شدن لینک(newtab)”

rel=”برای رباط های جستجو”   =>   بحث جداگانه ای دارد که می توانید درباره ی آن تحقیق کنید

مثال :

[html]

<a href="http://site.ir" title="title mord nazar" target="_blank" rel="follow">name see on the webpage</a>

[/html]

_blank   باعث باز شدن صفحه در tab دیگر در مرورگر می شود.

Title در زمانی که موس روی لینک قرار گرفت بصورت tooltip نمایش داده می شود.

نتیجه :

[html]</pre>
<a href="https://onliner.co" title="click here to go to onliner.ir"         target="_blank" rel="follow">آنلاینر</a>
<pre>[/html]

نتیجه:

حال ما می توانیم با لیست ها منوی ساده ای ایجاد کنیم:

[html]

<ul>

<li>

<a href="https://onliner.co" title="click here to go to onliner.ir"

target="_blank" rel="follow">home</a>

</li>

<li>

<a href="https://onliner.co/contact" title="click here to go to

onliner.ir" target="_blank" rel="follow">contact</a>

</li>

<li>

<a href="https://storina.com/" title="click here to go to onliner.ir" target="_blank" rel="follow">shop</a>

</li>

</ul>

[/html]

نتیجه :

خب ما در این آموزش درباره تگ a اطلاعات کافی بدست آورده ایم که می توانیم در صفحات html خود به کار ببریم.

دسترسی سریع :

• آموزش قبلی : فیلم آموزشی ایجاد لیست تو در تو برای ساخت منوهای کشویی و …
• آموزش بعدی : فیلم آموزشی ساخت منوی یک سایت شرکتی با HTML
• لیست فیلم ها : فیلم های آموزش جامع HTML