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

دروس 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 درسهایی برای مبتدیان

المان Head در HTML


المان <head>

المان <head> ظرفی برای فراداده (داده های مربوط به داده ها) است و بین برچسب <html> و برچسب <body> قرار می گیرد.

فراداده metadata HTML داده های مربوط به یک سند HTML است. این فراداده در خود صفحه وب نمایش داده نمی شود.

متاداده معمولاً عنوان سند (عنوان) ، مجموعه کاراکترها (utf-8) ، سبک ها (css) ، اسکریپت ها (جاوا اسکریپت) و سایر اطلاعات متا. را تعریف می کنند

عنصر <head> ظرفی برای عناصر زیر است: <title> ، <style> ، <meta>، <link> ، <script>و <base> غیره ...


المان <title> در HTML

المان <title> عنوان سند را تعریف می کند. عنوان باید فقط متن باشد و در نوار عنوان مرورگر یا در برگه صفحه نشان داده می شود.

برچسب <title> در اسناد HTML لازم است!

مطالب عنوان صفحه برای بهینه سازی موتور جستجو (SEO) بسیار مهم است! عنوان صفحه توسط الگوریتم های موتور جستجو برای تصمیم گیری در مورد ترتیب هنگام قرار دادن صفحات در نتایج جستجو استفاده می شود.

المان ها <title>:

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

سند HTML ساده:

مثال

<!DOCTYPE html>
<html>

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

<body>
محتوای سند ...
</body>

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

المان <style>

از المان <style>برای تعریف اطلاعات سبک برای یک صفحه HTML استفاده می شود:

مثال

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>
خودتان آزمایش کنید »

المان <link>

المان <link> رابطه بین سند فعلی و یک منبع خارجی را تعریف می کند.

برچسب <link> اغلب برای پیوند به ورق های سبک خارجی استفاده می شود:

مثال

<link rel="stylesheet" href="mystyle.css">
خودتان آزمایش کنید »

المان <meta>

المان <meta> به طور معمول برای تعیین مجموعه کاراکترها ، توضیحات صفحه ، کلمات کلیدی ، نویسنده سند و تنظیمات دیدگاه استفاده می شود.

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

مجموعه کاراکترهای استفاده شده را تعریف کنید:

<meta charset="UTF-8">

کلمات کلیدی را برای موتورهای جستجو تعریف کنید:

<meta name="description" content="Free Web tutorials">

شرح صفحه وب خود را تعریف کنید:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

نویسنده یک صفحه را تعریف کنید:

<meta name="author" content="احمد فرجی">

هر 30 ثانیه سند را تازه کنید:

<meta http-equiv="refresh" content="30">

نمونه برچسب های <meta>:

مثال

<meta charset="UTF-8">
<meta name="توضیح" content="آموزش رایگان وب ">
<meta name="لغات کلیدی" content="HTML,CSS,XML,JavaScript">
<meta name="نویسنده" content="احمد فرجی">
خودتان آزمایش کنید »

تنظیم ویوپورت Viewport

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

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

این به مرورگر دستورالعمل نحوه کنترل ابعاد و مقیاس بندی صفحه را می دهد.

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

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

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

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

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



المان <script>

از عنصر <script> برای تعریف JavaScript سمت مشتری استفاده می شود.

JavaScript زیر می نویسد: "سلام جاوا اسکریپت!" به یک المان HTML با id = "demo":

مثال

<script>
function myFunction {
  document.getElementById("demo").innerHTML = "سلام جاوا اسکریپت";
}
</script>
خودتان آزمایش کنید »

المان <base>

المان <base> URL اصلی و / یا هدف را برای همه URL های نسبی یک صفحه مشخص می کند.

برچسب <base> باید دارای یک ویژگی href یا یک هدف باشد ، یا هر دو.

فقط یک المان <base> در یک سند وجود دارد!

برای همه پیوندهای یک صفحه یک URL پیش فرض و یک هدف پیش فرض مشخص کنید:

مثال

<base href="https://www.farsiw3.ir/images/" target="_blank">
خودتان آزمایش کنید »

آیا باید از <html> ، <head> و <body> غافل شوید؟

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

کد زیر مطابق مشخصات HTML5 معتبر در نظر گرفته می شود (معتبر در برابر اعتبار سنجی)::

مثال

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

<h1>این یک عنوان است</h1>
<p>این یک پاراگراف است.</p>
خودتان آزمایش کنید »

توجه داشته باشید:

Farsiw3 توصیه نمی کند که از برچسب <html> و <body> خودداری کنید. حذف این برچسب ها می تواند باعث خرابی نرم افزار DOM یا XML شود و باعث بروز خطا در مرورگرهای قدیمی (IE9) شود.

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


المان های Head

Тег توضیحات
<head> المان <head> ظرفی برای فراداده است (داده های مربوط به داده ها)
<title> المان <head> بین برچسب <html> و برچسب <body>قرار گرفته است المان <title> لازم است و عنوان سند را تعریف می کند
<base> عنصر <base> URL اصلی و / یا هدف را برای همه URL های نسبی یک صفحه مشخص می کند
<link> از برچسب <link>اغلب برای پیوند دادن به شیوه نامه های خارجی استفاده می شود
<meta> المان <meta> به طور معمول برای تعیین مجموعه کاراکترها ، توضیحات صفحه ، کلمات کلیدی ، نویسنده سند و تنظیمات نمای نمایش استفاده می شود
<script> از المان<script> برای تعریف JavaScript سمت مشتری استفاده می شود
<style> از عنصر <style> برای تعریف اطلاعات سبک برای یک سند استفاده می شود





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

Farsiw3.ir