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

دروس 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


قابلیت دسترسی به HTML

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


معنایی HTML

HTML معنایی به معنای استفاده هر چه بیشتر عناصر صحیح HTML برای هدف صحیح آنهاست. عناصر معنایی عناصری با معنا هستند. اگر به یک دکمه نیاز دارید ، از عنصر <button> (و نه عنصر <div>) استفاده کنید. .

معنایی

<button>کلیک کنید</button>
خودتان آزمایش کنید »

معنایی نیست

<div>کلیک کنید</div>
خودتان آزمایش کنید »

HTML معنایی زمینه را به خوانندگان صفحه می دهد ، که مطالب یک صفحه را با صدای بلند می خوانند.

با در نظر گرفتن مثال دکمه:

  • دکمه ها به طور پیش فرض از یک سبک مناسب تری برخوردار هستند
  • صفحه خوان آن را به عنوان یک دکمه مشخص می کند
  • متمرکز
  • قابل کلیک

همچنین یک دکمه برای افرادی که به پیمایش فقط با صفحه کلید تکیه می کنند قابل دسترسی است. هم با ماوس و هم با کلید قابل کلیک است و می توان بین آن زبانه بندی کرد (با استفاده از دکمه تب روی صفحه کلید).

نمونه هایی از عناصر غیر معنایی: <div> و <span> - در مورد محتوای آن چیزی نمی گوید.

نمونه هایی از عناصر معنایی: <form>، <table> و <article> - محتوای آن را به وضوح تعریف می کند.


عناوین مهم هستند

عنوان ها با برچسب <h1> تا <h6> تعریف می شوند: :

مثال

<h1>عنوان 1</h1>
<h2>عنوان 2</h2>
<h3>عنوان 3</h3>
<h4>عنوان 4</h4>
<h5>عنوان 5</h5>
<h6>عنوان 6</h6>
خودتان آزمایش کنید »

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

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

از عناوین <h1> باید برای عناوین اصلی استفاده شود و به دنبال آن عناوین <h2> و سپس از <h3> با اهمیت کمتری و غیره استفاده شود.

توجه :: از عناوین HTML فقط برای عنوان استفاده کنید. از عنوان برای بزرگ یا بزرگ نوشتن متن استفاده نکنید. .


متن جایگزین

alt زمانی که عکس نمایش داده نشود نمایش داده می شود. اگر alt به دلایلی کاربر نتواند آن را مشاهده کند ، ویژگی alt یک متن جایگزین ارائه می دهد (به دلیل اتصال کند ، خطایی در ویژگی src یا اگر کاربر از صفحه خواننده استفاده می کند).

مقدار ویژگی alt باید تصویر را توصیف کند:

مثال

<img src="img_chania.jpg" alt="گلی در چین">
خودتان آزمایش کنید »

اگر یک مرورگر نتواند تصویری پیدا کند ، مقدار ویژگی alt را نمایش می دهد:

مثال

<img src="wrongname.gif" alt="گلی در چین ">
خودتان آزمایش کنید »

زبان را اعلام کنید

برای اعلام زبان صفحه وب ، باید همیشه ویژگی lang را درون برچسب <html> قرار دهید. این به منظور کمک به موتورهای جستجو و مرورگرها است.

<!DOCTYPE html>
<html lang="fa">
<body>

...

</body>
</html>

از بیان شفاف و روان استفاده کنید

همیشه از زبانی شفاف استفاده کنید که درک آن آسان باشد. همچنین سعی کنید از شخصیت هایی که خواننده صفحه آنها را به وضوح نمی خواند ، خودداری کنید. مثلا:

  • جملات را تا حد ممکن کوتاه نگه دارید
  • از خط تیره خودداری کنید. به جای نوشتن 1-3 ، 1 تا 3 را بنویسید
  • از اختصارات خودداری کنید. به جای نوشتن ق ، قاشق بنویسید
  • از کلمات عامیانه بپرهیزید

متن پیوند خوب ایجاد کنید

متن پیوند باید به روشنی توضیح دهد که خواننده با کلیک بر روی آن پیوند چه اطلاعاتی را بدست می آورد.

نمونه هایی از پیوندهای خوب و بد:


عنوان ویژگی ها

ویژگی عنوان title اطلاعات اضافی در مورد یک عنصر را مشخص می کند.

وقتی ماوس بر روی عنصر حرکت می کند ، اطلاعات اغلب به عنوان متن راهنما نشان داده می شوند.

ویژگی عنوان title را می توان در هر عنصر HTML استفاده کرد (این اعتبار در مورد هر عنصر HTML معتبر خواهد بود. با این وجود لزوماً مفید نیست).

مثال

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





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

Farsiw3.ir