بهترین سایت برای توسعه دهندگان وب

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML عناصر فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 عناصر جدید HTML5 عناصر معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5 درسهایی برای مبتدیان

پیوندهای HTML



پیوندها تقریباً در همه صفحات وب یافت می شوند. پیوندها اجازه می دهد کاربران از صفحه ای به صفحه دیگر بروید.


پیوندهای Links - HTML

پیوندهای HTML پیوندهای پیوسته هستند.

می توانید روی پیوند کلیک کنید و به سند دیگری بروید.

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

توجه: لازم نیست پیوند متنی باشد. این می تواند یک تصویر باشد یا هر المان HTML دیگر.


پیوندهای HTML - نحو

پیوندها با استفاده از برچسب <a> (کلمه anchor - لنگر) تعریف می شوند :

<a href="url">متن پیوند</a>

مثال

<a href="https://www.farsiw3.ir/html/">دروس برای مبتدیان بصورت آنلاین</a>
خودتان آزمایش کنید »

ویژگی href مقصد پیوند را نشان می دهد (https://www.farsiw3.ir/html).

متن پیوند قسمت قابل مشاهده است (دروس برای مبتدیان بصورت آنلاین).

با کلیک بر روی متن پیوند ، خواننده به آدرس URL مشخص شده ارسال می شود.

توجه: بدون اسلش جلو (اسلش) در انتهای آدرسهای زیر پوشه ، دو درخواست از سرور ایجاد میکند بسیاری از سرورها به طور خودکار اسلشی به انتهای آدرس اضافه می کنند و سپس درخواست جدید. را ایجاد می کنند


لینک برای آدرس ایمیل

شما می توانید با ساخت لینکه به ایمیل به فردی ایمیل بفرستید

استفاده از mailto: در داخل ویژگی href برای ایجاد پیوندی که برنامه ایمیل کاربر را باز می کند (برای ارسال ایمیل جدید به آنها)


URL های مطلق در مقابل URL های نسبی

URL های مطلق در مقابل URL های نسبی

پیوند های مطلق یا absolute Url به سایت های خارجی برمی گردد

پیوند های نسبی یا همان relative Url به داخل خود سایت شما پیوند می خورند

پیوندهای محلی

مثال فوق از یک URL مطلق (آدرس وب کامل) استفاده می کند.

یک پیوند محلی (پیوند به همان وب سایت) با یک URL نسبی مشخص شده است (بدون https: // www ....).

مثال

<a href="html_images.html">تصاویر HTML</a>
خودتان آزمایش کنید »

رنگ پیوند HTML

به طور پیش فرض ، پیوند به این شکل خواهد بود (در همه مرورگرها):

  • پیوند بازدید نشده - زیر خط دار و آبی رنگ
  • پیوند بازدید شده - زیرخط دار و بنفش رنگ
  • پیوند فعال- زیرخط دار و قرمز

با استفاده از CSS می توانید رنگ های پیش فرض را تغییر دهید:

مثال

<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>
خودتان آزمایش کنید »

پیوندها اغلب به صورت دکمه با استفاده از CSS مدل می شوند:

این یک پیوند است

مثال

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
خودتان آزمایش کنید »

برای کسب اطلاعات بیشتر در مورد CSS ، به سایت ما مراجعه کنید دروس CSS.


پیوندهای HTML - ویژگی هدف (target)

ویژگی target نشان می دهد که کجا سند پیوند داده شده را باز می کند.

ویژگی target می تواند یکی از مقادیر زیر را داشته باشد:

  • _blank - سند مرتبط شده را در یک پنجره یا برگه جدید باز می کند
  • _self - سند پیوند داده شده را در همان پنجره / برگه ای که در آن قرار دارد باز می کند وقتی روی آن کلیک شد (پیش فرض)
  • _parent - سند پیوند داده شده را در قاب اصلی باز می کند
  • _top - سند پیوند داده شده را در بدنه کامل پنجره باز می کند
  • فریم نام - سند پیوند داده شده را در قاب نامگذاری شده باز می کند

این مثال سند مرتبط شده را در یک پنجره / برگه مرورگر جدید باز می کند:

مثال

<a href="https://www.farsiw3.ir/" target="_blank">از فارسی دبلیو 3 دیدن کنید!</a>
خودتان آزمایش کنید »

توضیح : اگر صفحه وب شما در یک قاب مسدود شده است ، می توانید target="_top" استفاده کنید,برای خارج شدن از قاب:

Пример

<a href="https://www.farsiw3.ir/html/" target="_top">آموزش HTML5!</a>
خودتان آزمایش کنید »

پیوندهای HTML - تصویر به عنوان پیوند

تصاویر اغلب به عنوان پیوند استفاده می شوند:

مثال

<a href="default.html">
  <img src="smiley.gif" alt="آموزشهای HTML برای مبتدی ها" style="width:42px;height:42px;border:0;">
</a>
خودتان آزمایش کنید »

توجه داشته باشید: border:0;به IE9 (و موارد دیگر) اضافه شده است نسخه های اولیه) حاشیه ای در اطراف تصویر نمایش نمی دهند (زمانی که تصویر پیوند است).


عنوان Title - نکته ای برای پیوندها

ویژگی titleاطلاعات اضافی در مورد یک پیوند تعریف می کند. اطلاعات هنگامی که ماوس بر روی یک المان حرکت می کند اغلب به عنوان یک راهنما نمایش داده می شود.

مثال

<a href="https://www.farsiw3.ir/html/" title="به آموزشهای HTML بروید مبتدیان">آموزش HTML برای مبتدیان</a>
خودتان آزمایش کنید »

پیوندهای HTML - ایجاد نشانک

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

اگر صفحه وب شما طولانی باشد ، نشانک ها می توانند مفید باشند.

برای ایجاد نشانک ، ابتدا باید یک نشانک ایجاد کنید و سپس پیوندی به آن اضافه کنید.

وقتی روی پیوند کلیک می کنید ، صفحه با نشانک به سمت مکان پیمایش می شود.

مثال

ابتدا یک نشانک با ویژگی ایجاد کنید id:

<h2 id="C4">فصل 4</h2>

سپس پیوندی را به نشانک اضافه کنید ("به فصل 4 بروید") در همان صفحه:

<a href="#C4">به فصل 4 بروید</a>

یا پیوندی به نشانک اضافه کنید ("به فصل 4 بروید") از صفحه دیگری:

مثال

<a href="html_demo.html#C4">به فصل 4 بروید</a>
خودتان آزمایش کنید »

مسیرهای خارجی

صفحات خارجی را می توان با یک URL کامل یا یک مسیر نسبت به صفحه وب فعلی ارجاع داد.

این مثال از یک URL کامل برای پیوند به یک صفحه وب استفاده می کند:

مثال

<a href="https://www.farsiw3.ir/html/default.html">HTML آموزش</a>

خودتان آزمایش کنید »

این مثال به یک صفحه واقع در پوشه html در وب سایت فعلی پیوند دارد:

مثال

<a href="/html/default.html">آموزش HTML</a>

خودتان آزمایش کنید »

این مثال به صفحه ای پیوند دارد که در همان پوشه صفحه فعلی قرار دارد:

مثال

<a href="default.html">آموزش HTML</a>

خودتان آزمایش کنید »

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


خلاصه بخش

  • از المان <a> برای تعریف پیوند استفاده کنید
  • از المان href برای تعیین آدرس پیوند استفاده کنید
  • از المان target برای تعیین محل باز کردن پیوند داده شده سند استفاده کنید
  • از المان <img> (داخل <a>) برای استفاده تصاویر به عنوان مرجع استفاده کنید
  • از المان id (id="مقدار")برای تعریف بوک نشانک در یک صفحه استفاده کنید
  • از المان href (href="#مقدار") برای پیوندهای نشانک استفاده کنید

تمرینات HTML

خود را امتحان کنید

تمرین:

از HTML صحیح استفاده کنید تا متن زیر را به پیوندی به "default.html" تبدیل کنید.

>از آموزش اچ تی ام ال ما دیدن کنید.

شروع کنید


برچسب پیوند HTML

Тег توضیحات
<a> لینک پیوند را تعریف می کند

برای مشاهده لیست کامل همه برچسب های HTML موجود ، به ما مراجعه کنیدمرجع برچسب HTML.






این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir