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

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


چگونه کد HTML را به درستی بنویسیم؟ قرارداد برنامه نویسی

توسعه دهندگان وب اغلب در مورد سبک کدگذاری و نحو استفاده شده در HTML اطمینان ندارند..

بین سالهای 2000 و 2010 ، بسیاری از توسعه دهندگان وب از HTML به XHTML تغییر وضعیت داده اند.

از زمان XHTML ، توسعه دهندگان مجبور به نوشتن کد معتبر و "خوش فرم" شده اند.

HTML5 هنگام اعتبار سنجی کد ، شلختگی بیشتری دارد.


منطقی باشید و آینده آن را ثابت خواهد کرد

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

در آینده ، برنامه هایی مانند خوانندگان XML ممکن است بخواهند HTML شما را بخوانند.

استفاده از نحو "نزدیک به XHTML" به خوبی شکل گرفته یک انتخاب هوشمندانه است.

کد خود را مرتب ، تمیز و خوش فرم نگه دارید.


از Doctype صحیح استفاده کنید

همیشه Doctype (نوع سند) را در سطر اول سند خود اعلام کنید:

<!DOCTYPE html>

اگر به برچسب های کوچک نیاز دارید ، می توانید از موارد زیر استفاده کنید:

<!doctype html>

از حروف کوچک استفاده کنید

HTML5 به شما امکان می دهد حروف بزرگ و کوچک را در نام المان های مخلوط کنید.

توصیه می کنیم فقط از حروف کوچک برای نام المان های استفاده کنید زیرا:

  • مخلوط کردن نام با حروف بزرگ و کوچک برای ادراک بد است
  • توسعه دهندگان معمولاً از حروف کوچک استفاده می کنند (مانند XHTML)
  • کوچک تر تمیزتر به نظر می رسد
  • نوشتن حروف کوچک آسان تر و سریعتر است

مثال بد

<SECTION>
  <p>این یک پاراگراف است.</p>
</SECTION>

مثال بد

<Section>
  <p>این یک پاراگراف است.</p>
</SECTION>

مثال خوب

<section>
  <p>این یک پاراگراف است.</p>
</section>

همه المان های HTML را ببندید

در HTML5 نیازی به پوشاندن همه المان های نیست (مانند المان <p>).

W3C توصیه می کند تمام المان های HTML را ببندید.

مثال بد

<section>
  <p>این یک پاراگراف است.
  <p>این یک پاراگراف است.
</section>

مثال خوب

<section>
  <p>این یک پاراگراف است.</p>
  <p>This is a paragraph.</p>
</section>

المان های خالی HTML را پوشش دهید

در HTML5 ، پوشاندن المان های خالی ضروری نیست.

مثال بد

<meta charset="utf-8">

مثال درست

<meta charset="utf-8" />

با این حال ، اسلش بسته (/) در XHTML و XML مورد نیاز است.

اگر انتظار دارید که نرم افزار XML بتواند به صفحه شما دسترسی پیدا کند ، ارزش آن را دارد داشتن اسلش بسته (اسلش)!


از نام ویژگی های کوچک استفاده کنید

HTML5 به شما امکان می دهد حروف بزرگ و کوچک را در نام ویژگی ها مخلوط کنید.

W3C توصیه می کند از نام ویژگی های کوچک استفاده کنید زیرا:

  • مخلوط کردن حروف بزرگ و کوچک در نام ها به خوبی درک نمی شود
  • توسعه دهندگان معمولاً از نام های کوچک (مانند XHTML) استفاده می کنند
  • کوچک تر تمیزتر به نظر می رسد
  • نوشتن حروف کوچک آسان تر و سریعتر است

مثال بد

<div CLASS="menu">

مثال خوب

<div class="menu">

مقادیر ویژگی نقل شده

HTML5 به شما امکان می دهد مقدار ویژگی ها را بدون نقل قول بنویسید.

W3C توصیه می کند مقدار ویژگی ها را به صورت نقل قول بنویسید زیرا:

  • توسعه دهندگان معمولاً مقادیر ویژگی را در علامت های نقل قول می نویسند (مانند XHTML)
  • خواندن مقدار نقل شده آسان تر است
  • اگر این مقدار حاوی فاصله است ، باید از نقل قول استفاده کنید

مثال بد

این کار نمی کند زیرا مقدار حاوی فضای خالی است:

<table class=table striped>

مثال بد

<table class=striped>

مثال خوب

<table class="striped">

ویژگی های تصویر

همیشه ویژگی alt را به تصاویر اضافه کنید. این ویژگی وقتی مهم است که به دلایلی تصویر نمایش داده نشود. همچنین همیشه عرض و ارتفاع تصویر را تعریف کنید. این میزان سوسو زدن را کاهش می دهد زیرا مرورگر می تواند قبل از بارگیری فضا را برای تصویر ذخیره کند.

مثال بد

<img src="html5.gif">

مثال خوب

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

فضاها و علائم برابر

HTML5 به شما امکان می دهد فضاها را در اطراف علائم برابر قرار دهید. اما خواندن هنگام اشیا راحت تر است گروه بندی شده با یکدیگر.

مثال بد

<link rel = "stylesheet" href = "styles.css">

مثال خوب

<link rel="stylesheet" href="styles.css">

از خطوط طولانی کد خودداری کنید

با استفاده از ویرایشگر HTML ، پیمایش به چپ و راست برای خواندن کد HTML بسیار ناجور است.

سعی کنید از خطوط کد طولانی تر از 80 نویسه جلوگیری کنید.


خطوط خالی و تورفتگی

خطوط خالی اضافه نکنید مگر اینکه کاملاً ضروری باشد.

برای خوانایی ، خطوط خالی را اضافه کنید تا بلوک های بزرگ یا منطقی را از هم جدا کنید

برای خوانایی ، دو فضای دندانه دار اضافه کنید. از کلید tab استفاده نکنید.

از خطوط خالی و تورفتگی غیرضروری استفاده نکنید. نیازی به تورفتگی هر المان نیست:

مطلوب نیست:

<body>

  <h1>شهرهای معروف</h1>

  <h2>تهران</h2>

  <p>
    تهران پایتخت ایران است
    و بسیار شلوغ و پر جمعیت است
    It is the یکی از مراکز مهم ایران است
    و زیباترین مکان های تهران شامل ...
  </p>

</body>

بهتر:

<body>

<h1> شهر های معروف</h1>

<h2>تهران</h2>
<p>T تهران پایتخت ایران است
و بسیار شلوغ و پر جمعیت است
the یکی از مراکز مهم ایران است </p>

</body>

جدول :

<table>
  <tr>
    <th>نام</th>
    <th>توضیح</th>
  </tr>
  <tr>
    <td>احمد </td>
    <td>توضیح نام </td>
  </tr>
  <tr>
    <td>علی</td>
    <td>توضیح نام</td>
  </tr>
</table>

مثال لیست:

<ul>
  <li>لندن</li>
  <li>پاریس</li>
  <li>تهران</li>
</ul>

آیا باید از <html> و <body> حذف شود؟

در HTML5 ، برچسب <html> و برچسب <body> را می توان حذف کرد (حذف می شود).

کد زیر ، بدون مشخص کردن body متن ، طبق مشخصات HTML5 معتبر در نظر گرفته خواهد شد:

مثال

<!DOCTYPE html>
<head>
  <title>عنوان صفحه</title>
</head>

<h1>سربرگ است</h1>
<p>این یک پاراگراف است.</p>
Попробуйте сами »

با این حال ، ما توصیه نمی کنیم که برچسب <html> و <body> را حذف کنید.

المان <html> بارگذاری یک سند HTML را نشان می دهد. این مکان همچنین مکان پیشنهادی برای تعریف زبان صفحه است:

<!DOCTYPE html>
<html lang="en-US">

اعلام زبان صفحه برای برنامه های دستیابی (خوانندگان صفحه) و موتورهای جستجو ضروری است.

حذف <html> یا <body> می تواند نرم افزار DOM و XML را خراب کند.

حذف <body> می تواند باعث خطا در مرورگرهای قدیمی شود (به عنوان مثال IE9).


آیا باید <head> حذف شود؟

در HTML5 نیز می توان برچسب <head> را حذف کرد.

به طور پیش فرض ، مرورگرها همه المان هایی را که قبل از <body> قبل از المان <head> قرار دارند اضافه می کنند.

با حذف برچسب <head> می توانید HTML خود را ساده کنید:

مثال

<!DOCTYPE html>
<html>
<title>عنوان صفحه</title>

<body>
  <h1>این یک عنوان است</h1>
  <p>این یک پاراگراف است</p>
</body>

</html>
Попробуйте сами »

با این حال ، حذف برچسب <head> را توصیه نمی کنیم.

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


فراداده Metadata

المان <title> در HTML5 لازم است. لازم است عنوان صفحه تا حد امکان دقیق و معنی دار (مطابق با محتوای صفحه) ذکر شود. این به ربات های جستجو کمک می کند تا اطلاعات مورد نیاز خود را در سایت پیدا کنند:

<title>نحو و کدگذاری HTML5</title>

برای اطمینان از تفسیر مناسب و نمایه سازی صحیح توسط موتورهای جستجو ، هر دو زبان صفحه و کدگذاری کاراکتر باید در اسرع وقت در سند تعریف شوند:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

سفارشی کردن نمای نمایش - Viewport

HTML5 روشی را ارائه داد که به طراحان وب اجازه می داد با استفاده از برچسب <meta> کنترل نمای نمایش را به دست بگیرند.

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

شما باید المان <meta> زیر را در صفحات وب خود بگنجانید:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

المان viewport در <meta> دستورالعمل هایی را در مورد نحوه کنترل اندازه و مقیاس صفحه به مرورگر ارائه می دهد.

عرض = قسمت عرض دستگاه ، عرض صفحه را متناسب با عرض صفحه دستگاه تنظیم می کند (که به دستگاه وابسته است).

قسمت مقیاس اولیه = 1.0 سطح بزرگنمایی اولیه را هنگام بارگذاری صفحه توسط مرورگر تنظیم می کند. یکی به معنای مقیاس 100٪ است.

در اینجا مثالی از یک صفحه وب بدون متا برچسب viewport و همان صفحه وب از متا برچسب viewport وجود دارد:

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



نظرات HTML

نظرات کوتاه باید در یک خط نوشته شود:

<!-- این یک نظر است -->

نظراتی که شامل بیش از یک خط هستند باید به این صورت نوشته شوند:

<!--
  این نمونه ای از نظرات طولانی است. این نمونه ای از نظرات طولانی است.
  این نمونه ای از نظرات طولانی است. این نمونه ای از نظرات طولانی است..
-->

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


ورق سبک

برای ارجاع به شیوه نامه ها از نحو ساده استفاده کنید (ویژگی type اینگونه لازم نیست ):

<link rel="stylesheet" href="styles.css">

قوانین سبک کوتاه را می توان به طور خلاصه نوشت:

p.intro {font-family: Verdana; font-size: 16em;}

قوانین سبک طولانی بهتر است روی چندین خط نوشته شود:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • پرانتز باز را در همان خط انتخاب کننده قرار دهید
  • قبل از پرانتز باز از یک فضای خالی استفاده کنید
  • برای ایجاد تورفتگی از دو فاصله استفاده کنید
  • بعد از هر جفت مقدار-ویژگی از جمله نقطه آخر استفاده کنید
  • اگر مقدار حاوی فاصله است ، همیشه از نقل قول ها در اطراف مقادیر استفاده کنید
  • پرانتز بسته شدن را روی یک خط جدید و بدون فاصله همراه قرار دهید
  • از خطوط بیش از 80 نویسه خودداری کنید

اتصال جاوا اسکریپت به HTML

برای اتصال اسکریپت های خارجی از یک نحو ساده استفاده کنید (ویژگی type نیازی نیست):

<script src="myscript.js">

دسترسی به المان های HTML با JavaScript

استفاده از سبک های "ناخالص" HTML می تواند منجر به خطای JavaScript شود.

این دو عبارت JavaScript نتایج متفاوتی را ارائه می دهند:

مثال

var obj = getElementById("Demo")

var obj = getElementById("demo")
خودتان آزمایش کنید »

از راهنمای سبک JavaScript دیدن کنید..


از نام پرونده های کوچک استفاده کنید

بعضی از سرورهای وب (Apache ، Unix) برای نام پرونده ها به حروف کوچک و بزرگ حساس هستند: "london.jpg" اینگونه نیست موجود به عنوان "London.jpg".

سایر وب سرورها (مایکروسافت ، IIS) به حروف کوچک و بزرگ حساس نیستند: "london.jpg" به صورت "London.jpg" و به عنوان "london.jpg" در دسترس است.

اگر از مخلوطی از حروف بزرگ و کوچک استفاده می کنید ، باید بسیار سازگار باشید.

اگر از یک سرور حساس به پرونده به یک سرور حساس به Case بروید ، حتی اشتباهات کوچک باعث خرابی شبکه شما می شود!

برای جلوگیری از این مشکلات ، همیشه از نام پرونده های کوچک استفاده کنید.


فرمت فایل

پرونده های HTML همیشه باید پسوند html. یا htm.داشته باشند.

پرونده های CSS باید پسوند css. داشته باشند .

پرونده های جاوا اسکریپت باید پسوند js. داشته باشند.


تفاوت بین htm. و html.

هیچ تفاوتی بین پسوندهای htm. و html. وجود ندارد. مرورگرهای وب یا سرورهای وب با هر دو پسوند به صورت HTML رفتار می کنند.

تفاوت ها:

htm. در اوایل سیستم های DOS "احساس" می کردند که سیستم محدود به 3 کاراکتر است.

html. توسط سیستم عامل های Unix که این محدودیت را ندارند احساس می شود.


اختلافات فنی

اگر URL یک نام پرونده را مشخص نکنید (به عنوان مثالhttps://www.farsiw3.ir/css/) ، سرور نام پرونده پیش فرض را برمی گرداند. نام پرونده های پیش فرض رایج index.html ، index.htm ، default.html و default.htm است.

اگر سرور شما فقط برای کار با "index.html" به عنوان نام پرونده معمولی (پیش فرض) پیکربندی شده باشد ، نام فایل شما باید "index.html" باشد نه "index.htm".

با این حال ، سرورها می توانند با بیش از یک نام فایل پیش فرض پیکربندی شوند ، و معمولاً می توانید به اندازه مورد نیاز نام پرونده های پیش فرض را تنظیم کنید.






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

Farsiw3.ir