جستجو برای:
  • دوره‌های آموزشی
    • کسب و کار اینترنتی پولساز
    • تبدیل ایده به محصول
    • خلق استراتژی کسب و کار
    • ایجاد مزیت رقابتی در کسب و کار
  • آموزش رایگان
    • دوره رایگان کسب و کار اینترنتی
    • ویدیوهای آموزشی
    • پادکست‌های آموزشی
  • وبلاگ
    • کسب و کار اینترنتی
      • کارآفرینی اینترنتی
      • کار در منزل
      • ایده های پولساز
      • مدیریت کسب و کار اینترنتی
    • بازاریابی اینترنتی
      • سئو
      • ایمیل مارکتینگ
      • سوشیال مارکتینگ
      • اینستاگرام مارکتینگ
      • همکاری در فروش
    • کارآفرینی
      • ایده های کارآفرینی
      • کسب درآمد
      • استارت آپ
      • برندسازی
      • موفقیت فردی
      • معرفی کارآفرینان برتر
  • کسب درآمد
  • حساب کاربری
تلفن تماس: ۲۳۴۵۶ ۲۸۴ ۰۲۱
بهترین ایده
  • دوره‌های آموزشی
    • کسب و کار اینترنتی پولساز
    • تبدیل ایده به محصول
    • خلق استراتژی کسب و کار
    • ایجاد مزیت رقابتی در کسب و کار
  • آموزش رایگان
    • دوره رایگان کسب و کار اینترنتی
    • ویدیوهای آموزشی
    • پادکست‌های آموزشی
  • وبلاگ
    • کسب و کار اینترنتی
      • کارآفرینی اینترنتی
      • کار در منزل
      • ایده های پولساز
      • مدیریت کسب و کار اینترنتی
    • بازاریابی اینترنتی
      • سئو
      • ایمیل مارکتینگ
      • سوشیال مارکتینگ
      • اینستاگرام مارکتینگ
      • همکاری در فروش
    • کارآفرینی
      • ایده های کارآفرینی
      • کسب درآمد
      • استارت آپ
      • برندسازی
      • موفقیت فردی
      • معرفی کارآفرینان برتر
  • کسب درآمد
  • حساب کاربری
0

ورود و ثبت نام

بلاگ

بهترین ایده / طراحی سایت / مهاجرت به html5

مهاجرت به html5

مهاجرت به html5  را چطور انجام دهیم؟

آموزش  html5  درس پنجم

مهاجرت از HTML4 به HTML5

مهاجرت به html5 : این درس به طور کامل در مورد چگونگی مهاجرت از HTML4 به HTML5 است.

این درس نشان می دهد که چگونه یک صفحه HTML4 را به یک صفحه HTML5 تبدیل کنید،(مهاجرت به html5) بدون اینکه هیچ چیزی را از محتوا یا ساختار اولیه حذف کنید.

مهاجرت به html5
مهاجرت به html5

شما می توانید با استفاده از دستور العمل مشابه از XHTML مهاجرت به html5 داشته باشید:

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

مهاجرت به html5 : یک صفحه  html4  معمولی

مثال:

[php]
<!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>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0Abody%20%7B%0A%20%20%20%20font-family%3A%20Verdana%2Csans-serif%3B%0A%20%20%20%20font-size%3A%200.9em%3B%0A%7D%0A%0Adiv%23header%2C%20div%23footer%20%7B%0A%20%20%20%20padding%3A%2010px%3B%0A%20%20%20%20color%3A%20white%3B%0A%20%20%20%20background-color%3A%20black%3B%0A%7D%0A%0Adiv%23content%20%7B%0A%20%20%20%20margin%3A%205px%3B%0A%20%20%20%20padding%3A%2010px%3B%0A%20%20%20%20background-color%3A%20lightgrey%3B%0A%7D%0A%0Adiv.article%20%7B%0A%20%20%20%20margin%3A%205px%3B%0A%20%20%20%20padding%3A%2010px%3B%0A%20%20%20%20background-color%3A%20white%3B%0A%7D%0A%0Adiv%23menu%20ul%20%7B%0A%20%20%20%20padding%3A%200%3B%0A%7D%0A%0Adiv%23menu%20ul%20li%20%7B%0A%20%20%20%20display%3A%20inline%3B%0A%20%20%20%20margin%3A%205px%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

</head>
<body>

<div id="header">

<h1>Monday Times</h1>

</div>

<div id="menu">

<ul>

<li>News</li>

<li>Sports</li>

<li>Weather</li>

</ul>

</div>

<div id="content">

<h2>News Section</h2>

<div class="article">

<h2>News Article</h2>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.

</div>

<div class="article">

<h2>News Article</h2>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.

</div>

</div>

<div id="footer">

&amp;copy; 2016 Monday Times. All rights reserved.

</div>

</body>
</html>
[/php]

 

Change to HTML5 Doctype

تغییر از doctype

[php]

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

[/php]

به HTML5 doctype

[php]
<!DOCTYPE html>
[/php]

Change to HTML5 Encoding

Change the encoding information:

[php]

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

[/php]

to HTML5 encoding:

[php]
<meta charset="utf-8">
[/php]

مهاجرت به html5 : افزودن HTML5Shiv

عناصر HTML5 جدید معنایی در تمام مرورگرهای مدرن پشتیبانی می شوند. علاوه بر این، شما می توانید “آموزش” مرورگر های قدیمی تر  را به عنوان “عناصر ناشناخته” بیاموزید.

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

افزودن HTML5Shiv:

[php]
<!–[if lt IE 9]>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Foss.maxcdn.com%2Flibs%2Fhtml5shiv%2F3.7.0%2Fhtml5shiv.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<![endif]–>
[/php]

Change to HTML5 Semantic Elements

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

[php]
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;
}
[/php]

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

[php]
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;
}
[/php]

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

[php]
<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>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.

</article>

<article>

<h2>News Article</h2>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in porta lorem. Morbi condimentum est nibh, et consectetur tortor feugiat at.

</article>

</section>

<footer>

&copy; 2014 Monday Times. All rights reserved.

</footer>

</body>
[/php]

درس بعدی : راهنمای  style

مهاجرت به html5 : تفاوت بین <article> <section> و <div>

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

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

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

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

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

در مثال بالا، ما <section> را به عنوان یک مکان برای <articles> مرتبط استفاده کردیم.

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

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

<article> in <article>:

[php]

<article>

<h2>Famous Cities</h2>

<article>

<h2>London</h2>

London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.

</article>

<article>

<h2>Paris</h2>

Paris is the capital and most populous city of France.

</article>

<article>

<h2>Tokyo</h2>

Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.

</article>

</article>

[/php]

<div> in <article>:

[php]

<article>

<h2>Famous Cities</h2>

<div class="city">

<h2>London</h2>

London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.

</div>

<div class="city">

<h2>Paris</h2>

Paris is the capital and most populous city of France.

</div>

<div class="city">

<h2>Tokyo</h2>

Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.

</div>

</article>

[/php]

<div> in <section> in <article>:

[php]

<article>

<section>

<h2>Famous Cities</h2>

<div class="city">

<h2>London</h2>

London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.

</div>

<div class="city">

<h2>Paris</h2>

Paris is the capital and most populous city of France.

</div>

<div class="city">

<h2>Tokyo</h2>

Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.

</div>

</section>

<section>

<h2>Famous Countries</h2>

<div class="country">

<h2>England</h2>

London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.

</div>

<div class="country">

<h2>France</h2>

Paris is the capital and most populous city of France.

</div>

<div class="country">

<h2>Japan</h2>

Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.

</div>

</section>

</article>

[/php]

 

۱
۲
۳
۴
۵
میانگین امتیازات ۵ از ۵
از مجموع ۱ رای
اشتراک گذاری:
برچسب ها: HTML
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!
چرا انقدر شروع بی‌پایان داریم تو زندگی‌مون؟
چرا هی شروع کردیم و وسط راه ولش کردیم؟

تو این پادکست توضیح دادم…

توی کامنت از تجربه شروع بی پایان خودت برام بنویس

#شروع #تصمیم #تصمیم_گیری #احساسی #احساس #اطلاعات #فقر #ثروت #ایران #گرانی #تورم #ایمان_قاصدیان #تحول #تحول_بزرگ
❤️بخش دوم لایو شماره ۱ سفر ❤️بخش دوم لایو شماره ۱ سفر تحول بزرگ

_______________

دوره 👇رایگان تحول بزرگ
@iman.ghasedian 
_______________

توی این ویدیو می تونی کل مطالب آموزشی ۲۳ روز اول تحول بزرگ + یکسری محتوای مکمل در لایو ارائه شد که به دلیل دایرکت‌ها و درخوا‌ست شما که موفق به حضور در لایو نشدید تصمیم گرفتم بلافاصله بعد از لایو این ‌ویدیو رو که حتی از لایو اصلی هم کامل‌تره 

ویدیو بدلیل تایم بالا به دو بخش قسمت شد که بخش اولش رو دیشب گذاشتم 

#سفر #تحول #تحول_درون #خودشناسی #آرامش #ایمان_قاصدیان #تغییر #زندگی #اکسپلور #اینستاگرام
❤️بخش اول لایو شماره ۱ سفر ❤️بخش اول لایو شماره ۱ سفر تحول بزرگ

_______________

دوره 👇رایگان تحول بزرگ
@iman.ghasedian 
_______________

توی این ویدیو می تونی کل مطالب آموزشی ۲۳ روز اول تحول بزرگ + یکسری محتوای مکمل در لایو ارائه شد که به دلیل دایرکت‌ها و درخوا‌ست شما که موفق به حضور در لایو نشدید تصمیم گرفتم بلافاصله بعد از لایو این ‌ویدیو رو که حتی از لایو اصلی هم کامل‌تره 

ویدیو بدلیل تایم بالا به دو بخش قسمت شد که فردا بخش دو گذاشته میشه در پیج

#سفر #تحول #تحول_درون #خودشناسی #آرامش #ایمان_قاصدیان #تغییر #زندگی #اکسپلور #اینستاگرام
روز بیست‌وسوم سفر تحول بزرگ❤️
قرار بود از روز سوم سفر تحول هر روز این سوالات بنیادی رو از خودت بپرسی و نوی دفتر تحولت بنویسی:

من کی‌ام؟
الان کجای زندگیم هستم؟
قراره به کجا برسم؟
دقیقا چی می‌خوام از زندگیم؟
چی منو عمیقا خوشحال می‌کنه؟

خب دوستان زیادی پرسیدن که من چی جواب بدم؟! اینم پاسخ سوال شما

_______________

برای دوره رایگان تحول بزرگ 
حتما پیج رو فالو کن 👇
@iman.ghasedian 
_______________

اگه‌جواب سوالت رو گرفتی توی کامنت برام بنویس و اگه هم سوال دیگه ای درباره دوره داری بپرس✋🌹

#سفر #تحول #زندگی #دوره #آموزشی #رایگان #اینستاگرام #ایمان_قاصدیان #اکسپلور #خودشناسی #خودآگاهی #آگاهی
روز ۱۸ تحول بزرگ ❤️
💢 ازت می‌خوام کپشن رو تا آخر بخونی چون حرفای عمیقی توش هست که توی ویدیو نیست❗️
_______________

دوره تحول بزرگ رو از اینجا دنبال کن 👇
@iman.ghasedian 
_______________

ما همه برنامه‌هامون رو اشتباهی پیش می‌بریم.

شاید با ده‌ها مدل برنامه‌ریزی آشنا باشی ولی چیزی که هیچکس بهت یاد نمیده اینه که “تو نباید ذهنیت خودت رو در آینده منتظر بذاری”

۱۰۰ ها کتاب و روش برای برنامه‌ریزی و هدفگذاری نوشته شده که من اکثرش رو زیر سوال می‌برم

چون تو دائم درگیره یک مدل زندگی در آینده هستی که اون مدل زندگی خیلی خوبه

اون کتاب‌ها و مدرس‌ها و مشاورها همشون دارن بهت میگن: “هدف‌هات رو تصور کن! باهاشون زندگی کن! تجسم‌شون! “ 
❌ غلطه ❌

با صداقت توی کامنت بنویس: چقدر تصورشون کردی و نرسیدی؟ چقدر تلاش کردی و نرسیدی؟ اینکه اون چیزهایی که آرزوش رو داشتی و نرسیدی ولی هر روز تجسمش کردی، باهاش زندگی کردی، چه حسی بهت میده؟ 🙏🌹 خواهش می‌کنم بنویس! بنویس کدوم درسته اون کتابا؟ مدرسا؟ مشاورا؟؟!!

✅ من میگم: “ تو باید یاد بگیری تلاشت رو بکنی اما اینجوری نباشی که فقط با داشتن اون چیزا در آینده، احساس خوشبختی و خوشحالی کنی❗️”.

تو همش داری به اونا فکر می‌کنی داری خودت رو‌ یک انسان دچار ضعف و کمبود می‌بینی، چون می‌دونی اونا رو نداری. 

👈 چون‌ اتفاقاً تو روی «نداشته‌هات» متمرکز شدی «نه روی داشته‌هات »❗️

و چون روی نداشته‌هات توجه داری همش احساس کمبود و ضعف می‌کنی ! 😐

عمیق شو رفیق❗️

ببین کدوم درسته؟ همیشه دنبال آینده باشی با همه خوبی‌هاش و در لحظه حال همش حسرت بخوری ؟ یا اینکه حس و حال تو در لحظه حال خوب باشه، خوب بتونی تصمیم بگیری، خوب بتونی با آرامش و تمرکز روی هدف‌ها و ارزش‌های واقعی خودت کار کنی و به دستشون بیاری؟ حتی بیشتر از چیزی که فکر کنی به دست میاری ❗️ امتحانش کن 🙏🌹

_______________

برای دوره رایگان تحول بزرگ 
حتما پیج رو فالو کن 👇
@iman.ghasedian 
_______________

#زمان #حال #لحظه #موفقیت #آینده #برنامه_ریزی #هدف_گذاری #کمبود #ضعف #رفیق #داشته_ها #نداشته_ها #انتخاب #ایمان_قاصدیان #تحول_بزرگ
دوره رایگان تحول بزرگ در اینستاگرام
مطالب زیر را حتما بخوانید
  • طراحی واکنش گرا
    چرا طراحی سایت واکنش گرا مهم است؟

    981 بازدید

  • طراحی سایت
    طراحی سایت و رازهای فروش بیشتر

    1.56k بازدید

  • پوسته فرزند
    پوسته فرزند چیست و چگونه پوسته فرزند ایجاد کنیم؟

    891 بازدید

  • شروع کار css
    شروع کار css

    989 بازدید

  • سینتکس و انتخابگرهای css
    سینتکس و انتخابگرهای css

    921 بازدید

  • معرفی css
    معرفی css

    958 بازدید

دیدگاهتان را بنویسید لغو پاسخ

آکادمی
  • کسب و کار اینترنتی
  • بازاریابی اینترنتی
  • ایده های پولساز
  • ایمیل مارکتینگ
  • مهارت های پولساز
  • افزایش فالوور اینستاگرام
  • کسب درآمد از اینستاگرام
  • افزایش ترافیک سایت
پربازدید
  • دوره رایگان
  • درباره ما
  • همکاری در فروش
  • تماس با ما
جستجو برای:
بهترین ایده
با آموزش کسب و کار اینترنتی از ایده‌های پولساز تا یادگیری مهارت‌های پولساز در کنار شما هستیم. کمک می‌کنیم یک کسب و کار خانگی در منزل راه‌اندازی کنید. ما به شما آموزش می‌دهیم با کار در منزل و فقط با موبایل و بدون سرمایه پولسازی از اینترنت را شروع کنید.
بهترین ایده : کسب و کار اینترنتی برای همه | © Copyright 2021 behtarinideh

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت