فیلم آموزشی لینک ها در 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

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

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

[html]

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

[/html]

 

 

نتیجه :

 

1می بینیم که لینک ما ساخته شد اما قابل کلیک کردن و رفتن به لینک مورد نظر را نداریم دلیل این است که ما آدرسی را که می خواهیم به آن لینک شویم را به صفحه 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]

نتیجه :
2

تگ 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 نمایش داده می شود.

نتیجه :

3

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

نتیجه:
4

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

[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]

نتیجه :

5

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

دسترسی سریع :

5/5 - (1 امتیاز)

4 دیدگاه دربارهٔ «فیلم آموزشی لینک ها در HTML»

  1. با سلام خدمت جناب آقای آبسالان
    بعضی ها تگ رو به صورت های زیر می نویسند

    ممنون میشم بگید هر کدوم مربوط به چه نسخه ای از html می باشند و یا دلیل اینگونه نوشتن ها چیست؟
    با تشکر

    1. آواتار گروه آموزش طراحی سایت
      گروه آموزش طراحی سایت

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

  2. با عرض سلام خدمت برادر عزیز جناب آقای آبسالان بی زحمت اگر امکانش هست در مورد attribute به نام rel توضیح دهید که کلا چه به دردی می خورد چون شما گفته اید برای سئو ی موتور جست و جو گر گوگل مفید است و تفاوت follow , no follow آن چیست

    با تشکر از شما

    1. آواتار گروه آموزش طراحی سایت
      گروه آموزش طراحی سایت

      با عرض سلام و احترام خدمت شما
      کار این attribute این هست که ارتباط بین صفحه ی فعلی و صفحه ای که به آن لینک داده شده است را تعریف می کند.
      در مورد لینک ها چند مقدار برای attribute با نام rel هست.
      مقدار nofollow به ربات های گوگل اعلام می کند که نباید صفحه ای که به آن لینک داده شده است را دنبال کنند؛ به نوعی این لینک ها را لینک هایی که بابت آن پول پرداخت شده است اعلام می کند و طبعا تاثیراتش برای سئو کمتر هست. اما اگر مقداری ندهید یا مقدار bookmark بدهید، تاثیر بالایی را در سئو به آن لینک خواهید بخشید. همچنین اگر مقدار tag بدهید، اعلام می کنید که آن لینک صرفا یک کلمه ی کلیدی برای محتوای آن صفحه است.

دیدگاه‌ خود را بنویسید

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

مشاوره رایگان
Scroll to Top