این سایت تابع قوانین جمهوری اسلامی ایران است

آموزش گام به گام و تصویری HTML قسمت بیستم و هفتم (ایران گستر)

HTML

ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های

HTML مارا دنبال کنید.

 

 

[caption id="attachment_3063" align="aligncenter" width="255"]HTML HTML[/caption]

 

HTML5 چیست؟

برای درک HTML5 بهتر است تاریخچه ای کوتاه از زبان HTML را بدانیم. ما از سال 1991 تا سال 1999 شاهد عرضه ی نسخه های 1 تا 4 از HTML بوده ایم. سپس در سال 2000 کنسرسیوم جهانی وب (W3C) پیشنهاد استفاده از XHTML 1.0 را داد که توسعه دهندگان را مجبور به نوشتن کد های تمیز و دقیق می کرد. این مسئله تا جایی پیش رفت که در سال 2004 کنسرسیوم جهانی وب تصمیم گرفت که دیگر HTML را توسعه ندهد بلکه فقط به

XHTML بپردازد.(

ایران گستر)

سپس در سال 2004 نهاد و گروهی به نام WHATWG (مخفف Web Hypertext Application Technology Working Group) ایجاد شد که هدفشان توسعه ی HTML به صورت مرتب بود، به نحوی که با نسخه های قدیمی هم سازگاری داشته باشد. این گروه طی سال های 2004 تا 2006 توانست پشتیبانی اکثر شرکت های سازنده ی مرورگرهای اینترنتی مطرح را به دست آورد. سپس در سال 2006 کنسرسیوم جهانی وب اعلام کرد که از WHATWG پشتیبانی می کند.(

ایران گستر)

در نهایت در سال 2008 اولین نسخه ی آزمایشی HTML5 منتشر شد. سپس در سال 2012 گروه WHATWG و کنسرسیوم جهانی وب تصمیم گرفتند که از هم جدا شوند چرا که WHATWG میخواست زبان HTML را به صورتی توسعه دهد که مرتبا بروزرسانی و ویرایش شود، و در عین

بروزرسانی با قابلیت های قدیمی نیز سازگار باشد. به همین دلیل اولین نسخه ی ارائه شده توسط گروه WHATWG در سال 2012 ارائه شد. از طرفی کنسرسیوم جهانی وب قصد داشت استانداردی مشخص و قطعی برای HTML5 و XHTML بنویسد. بنابراین اولین نسخه ی پیشنهادی HTML5 طبق اعلام کنسرسیوم جهانی وب در 28 اکتبر سال 2014 ارائه شد. متعاقبا HTML5.1 و HTML5.2 نیز به ترتیب در 3 اکتبر 2017 و 14 دسامبر 2017 ارائه شدند.(

ایران گستر)

بنابراین همانطور که میدانید HTML5 نسخه ی جدیدتر HTML بوده و در صدد ارتقاء تجربه ی کاربری و کدنویسی افراد در دنیای وب تلاش هایی را انجام داده است. در این مقاله میخواهیم بیشتر با این نسخه از HTML آشنا شویم.(

ایران گستر)

 

DOCTYPE مورد نیاز برای تعریف HTML5 بسیار ساده است:

 

1

<!DOCTYPE html>

همچنین تعیین encoding مناسب نیز بسیار راحت شده است:(

ایران گستر)

 

1

<meta charset="UTF-8">

البته باید بدانید که

encoding پیش فرض در HTML5 همان UTF-8 است.(

ایران گستر)

بنابراین یک سند عادی به این شکل خواهد بود:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Page Title</title>

</head>

<body>

 

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

 

</body>

</html>

در HTML5 عناصر جدیدی نیز معرفی شده اند:(

ایران گستر)

  • عناصر معنایی جدید مانند: <header> و <footer> و <article> و <section> و …
  • attribute های جدید برای فرم ها مانند: number و date و time و calendar و range و …
  • عناصر گرافیکی مانند: <svg> و <canvas>
  • عناصر چند رسانه ای جدید: <audio> و <video>

همچنین API جدیدی نیز معرفی شده است که عبارت اند از:(

ایران گستر)

  • HTML Geolocation
  • HTML Drag and Drop
  • HTML Local Storage
  • HTML Application Cache
  • HTML Web Workers
  • HTML SSE

بعدا با این موارد آشنا خواهیم شد.

از طرفی عناصر مختلفی نیز منسوخ شدند و شما دیگر نباید از آن ها استفاده کنید:(

ایران گستر)

عنصر منسوخ نسخه ی جدید آن
<acronym> <abbr>
<applet> <object>
<basefont> قوانین CSS
<big> قوانین CSS
<center> قوانین CSS
<dir> <ul>
<font> قوانین CSS
<frame> –
<frameset> –
<noframes> –
<strike> قوانین CSS یا <s> یا <del>
<tt> قوانین CSS

 

ناسازگاری مرورگرهای قدیمی

وقتی صحبت از HTML5 میکنیم بسیاری از توسعه دهندگان نگران موضوع عدم سازگاری با تکنولوژی های قدیمی هستند اما شما می توانید به مرورگرهای قدیمی تر بگویید که در مواجهه با HTML5 چکار کنند. همانطور که حدس می زنید، HTML5 در تمام مرورگرهای امروزی پشتیبانی می شود اما در مورد

مرورگر های قدیمی تر نکته ی جالبی وجود دارد؛ تمام مرورگرها، چه جدید و چه قدیمی، در برخورد با عنصری که آن را نشناسند، آن را یک عنصر inline در نظر می گیرند. به همین دلیل شما می توانید به مرورگرهای قدیمی یاد بدهید که چطور با عناصر HTML5 که برایشان ناشناخته است کنار بیایند. شما حتی می توانید به IE6 که متعلق به Windows XP 2001 است نیز یاد بدهید که چطور با HTML5 کار کند.(

ایران گستر)

HTML5 هشت عنصر معنایی (semantic) جدید را معرفی کرده است که همگی از نوع block هستند. بنابراین برای حل مشکل عدم سازگاری می توانیم دوباره آن ها را در CSS به صورت block تعریف کنیم:(

ایران گستر)

 

1

2

3

header, section, footer, aside, nav, main, article, figure {

  display: block;

}

شما همچنین می توانید عناصر جدیدی را در HTML ایجاد کنید. به طور مثال در کد زیر یک عنصر جدید به نام <myHero> را به دلخواه خود ساخته ایم و سپس آن را استایل دهی کرده ایم:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

<head>

<script>document.createElement("myHero")</script>

<style>

myHero {

  display: block;

  background-color: #dddddd;

  padding: 50px;

  font-size: 30px;

}  

</style>

</head>

<body>

 

<h1>A Heading</h1>

<myHero>My Hero Element</myHero>

 

</body>

</html>

مشاهده ی خروجی در JSBin

کد کوتاه جاوا اسکریپت در مثال بالا (("document.createElement("myHero) برای ایجاد عناصر در مرورگرهای IE 9 و قدیمی تر لازم است.(

ایران گستر)

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

ایران گستر)

برای استفاده از HTML5Shiv باید آن را در قسمت <head> و درون تگ <script>  قرار دهید. شما می توانید آن را در صفحه ی گیت هاب HTML5Shiv دانلود کنید و یا کد زیر را به مرورگر خود اضافه کنید:(

ایران گستر)

 

1

2

3

4

5

<head>

  <!--[if lt IE 9]>

    <script src="/js/html5shiv.js"></script>

  <![endif]-->

</head>

بنابراین یک مثال کامل از HTML5Shiv به این شکل خواهد بود:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<!--[if lt IE 9]>

  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

<![endif]-->

</head>

<body>

 

<section>

 

<h1>Famous Cities</h1>

 

<article>

<h2>London</h2>

<p>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.</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, the center of the Greater Tokyo Area,

and the most populous metropolitan area in the world.</p>

</article>

 

</section>

 

</body>

</html>

مشاهده ی خروجی در JSBin

نکته: تمام این موارد فقط و فقط جهت اطلاع شما گفته شده است. در دنیای واقعی نیازی به این کار نیست؛ توجه کنید که ما (در زمان نگارش این مقاله) در سال 2019 هستیم و به هیچ عنوان نباید نگران سازگاری با مرورگرهای IE8 و غیره باشیم. این مرورگرهای قدیمی خیلی وقت است که از رده خارج شده اند و به توصیه ی تمام محققین و متخصصین باید پشتیبانی از آن ها را رها کرد.(

ایران گستر)


مشخصات

آخرین مطالب این وبلاگ

آخرین ارسال ها

آخرین وبلاگ ها

آخرین جستجو ها

گروه دخترونه و پسرونه وب سایت شخصی پوریا شمس صندوق قرض الحسنه شهیدان اله پرست رضا نورائی نمایندگی ایران رادیاتور کرمان 09229766368 نیاز غنی عیب یابی و رفع ایراد وردپرس donyayesazha تایپ سریع شهر سخن

درباره این سایت

  • این وبسایت تابع قوانین جمهوری مقدس اسلامی ایران بوده و در ستاد ساماندهی پایگاه های اینترنتی ثبت شده است.
  • تمامی محتوای موجود تماما خودکار از وبلاگ های فارسی دریافت میشود ؛ در صورت مشاهده هرگونه محتوای خلاف قوانین جمهوری اسلامی ایران ؛ گزارش دهید تا به قید فوریت حذف گردد.
©   تمامی حقوق مادی و معنوی این سایت متعلق به بیگ بلاگ بوده و محفوظ میباشد ، با هرگونه کپی بردای از طرح یا پوسته برخورد خواهد شد.