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

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

انتقال HTML5


انتقال از HTML4 به HTML5

این بخش همه چیز درباره نحوه انتقال از HTML4 به HTML5 است.

این بخش به شما نشان می دهد که چگونه یک صفحه HTML4 را به صفحه HTML5 تبدیل کنید بدون اینکه چیزی از محتوای اصلی یا ساختار آن تخریب شود.

با استفاده از همان دستورالعمل می توانید از XHTML به HTML5 مهاجرت کنید.

HTML4 HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div class="article"> <article>
<div id="footer"> <footer>

صفحه HTML4 معمولی

مثال

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
body {
  font-family: Verdana,sans-serif;
  font-size: 0.9em;
}

div#header, div#footer {
  padding: 10px;
  color: white;
  background-color: black;
}

div#content {
  margin: 5px;
  padding: 10px;
  background-color: lightgrey;
}

div.article {
  margin: 5px;
  padding: 10px;
  background-color: white;
}

div#menu ul {
  padding: 0;
}

div#menu ul li {
  display: inline;
  margin: 5px;
}
</style>
</head>
<body>

<div id="header">
  <h1>Monday Times</h1>
</div>

<div id="menu">
  <ul>
    <li>اخبار</li>
    <li>Sports</li>
    <li>آب و هوا</li>
  </ul>
</div>

<div id="مطلب">
  <h2>News Section</h2>
  <div class="article">
    <h2>News Article</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  </div>
  <div class="article">
    <h2>News Article</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.</p>
  </div>
</div>

<div id="footer">
  <p>&amp;copy; 2016 Monday Times. All rights reserved.</p>
</div>

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

تغییر به HTML5 Doctype

ویرایش کنید doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

در نوع HTML5

مثال

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

تغییر به رمزگذاری HTML5

تغییر اطلاعات رمزگذاری:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

به کدگذاری HTML5:

مثال

<meta charset="utf-8">
خودتان آزمایش کنید »

HTML5Shiv را اضافه کنید

عناصر معنایی جدید HTML5 در همه مرورگرهای مدرن پشتیبانی می شوند. همچنین می توانید به مرورگرهای قدیمی تر "آموزش" رسیدگی به "عناصر ناشناخته" را بدهید.

با این حال ، IE8 و نسخه های قبلی اجازه یک ظاهر طراحی شده از عناصر ناشناخته را نمی دهد. بنابراین ، HTML5Shiv یک راه حل جاوا اسکریپت است که می تواند عناصر HTML5 را در نسخه های اینترنت اکسپلورر قبل از نسخه 9 فعال کند.

HTML5Shiv را اضافه کنید:

مثال

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
خودتان آزمایش کنید »

عناصر معنایی را به HTML5 تغییر دهید

CSS موجود شامل شناسه ها و کلاس ها برای عناصر یک ظاهر طراحی شده است:

body {
  font-family: Verdana,sans-serif;
  font-size: 0.9em;
}

div#header, div#footer {
  padding: 10px;
  color: white;
  background-color: black;
}

div#content {
  margin: 5px;
  padding: 10px;
  background-color: lightgrey;
}

div.article {
  margin: 5px;
  padding: 10px;
  background-color: white;
}

div#menu ul {
  padding: 0;
}

div#menu ul li {
  display: inline;
  margin: 5px;
}

با عناصر معنایی HTML5 با سبک های CSS یکسان جایگزین کنید:

body {
  font-family: Verdana,sans-serif;
  font-size: 0.9em;
}

header, footer {
  padding: 10px;
  color: white;
  background-color: black;
}

section {
  margin: 5px;
  padding: 10px;
  background-color: lightgrey;
}

article {
  margin: 5px;
  padding: 10px;
  background-color: white;
}

nav ul {
  padding: 0;
}

nav ul li {
  display: inline;
  margin: 5px;
}

در آخر ، عناصر را به عناصر معنایی HTML5 تغییر دهید:

مثالы

<body>

<header>
  <h1>Monday Times</h1>
</header>

<nav>
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</nav>

<section>
  <h2>News Section</h2>
  <article>
    <h2>News Article</h2>
    <p>Lorem ipsum dolor sit amet..</p>
  </article>
  <article>
    <h2>News Article</h2>
    <p>Lorem ipsum dolor sit amet..</p>
  </article>
</section>

<footer>
  <p>&copy; 2014 Monday Times. All rights reserved.</p>
</footer>

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

تفاوت بین <article> و <section> و <div>

هیچ تفاوتی در استاندارد HTML5 بین <article> <section> و <div> وجود ندارد.

در استاندارد HTML5 ، عنصر <section> به عنوان مجموعه ای از عناصر مرتبط تعریف شده است.

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

عنصر <div> به عنوان یک بلوک از عناصر کودک تعریف می شود.

چگونه این را تفسیر کنیم؟

در مثال فوق ما از <section> به عنوان ظرفی برای <articles> مرتبط (مقالات) استفاده کرده ایم.

اما ما می توانیم از <article> به عنوان ظرف مقالات نیز استفاده کنیم.

در اینجا چندین نمونه مختلف وجود دارد:

<article> و <article>:

<article>

<h2>Famous Cities</h2>

<article>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
</article>

<article>
  <h2>Paris</h2>
  <p>Paris is the capital and most populous city of France.</p>
</article>

<article>
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</article>

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

<div> و <article>:

<article>

<h2>Famous Cities</h2>

<div class="city">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital and most populous city of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

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

<div> و <section> و <article>:

<article>

<section>
  <h2>Famous Cities</h2>

  <div class="city">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
  </div>

  <div class="city">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
  </div>

  <div class="city">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
  </div>
</section>

<section>
  <h2>Famous Countries</h2>

  <div class="country">
    <h2>England</h2>
    <p>London is the capital city of England.</p>
</div>

  <div class="country">
    <h2>France</h2>
    <p>Paris is the capital and most populous city of France.</p>
</div>

  <div class="country">
    <h2>Japan</h2>
    <p>Tokyo is the capital of Japan.</p>
  </div>
</section>

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