به آموزشگاه بیاموز خوش آمدید!

عیدانه بیاموز، فرصت یادگیری با 35٪ تخفیف (کد تخفیف: noruz96)

سبد خرید (0)

مقدمه آموزش HTML5

آموزش HTML5 (اچ تی ام ال 5) - معرفی

HTML5 (اچ تی ام ال 5) یک استاندارد جدید برای HTML است.

نسخه قبلی HTML یعنی HTML 4.01 در سال 1999 آمده است و از آن سال تا کنون، وب تغییرات زیادی کرده است.

HTML5 (اچ تی ام ال 5) هنوز در حال پیشرفت است. با این حال مرورگرهای اصلی، بیشتر عناصر و APIهای جدید در HTML5 (اچ تی ام ال 5) را پشتیبانی می کنند.


آموزش HTML5 (اچ تی ام ال 5) با استفاده از مثال ها در هر فصل

در این خودآموز، برای آموزش HTML از صدها مثال استفاده شده است.

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

مثال (مقدمه آموزش HTML5)

<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls>
<source src="/movie.mp4" type="video/mp4">
<source src="/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

</body>
</html>
خودتان امتحان کنید »

برای مشاهده نتیجه کد بالا روی دکمه "خودتان امتحان کنید" کلیک کنید.


HTML5 (اچ تی ام ال 5) چگونه شروع شد؟

HTML5 (اچ تی ام ال 5) یک همکاری بین W3C و WHATWG است و در سال 2006 تصمیم گرفتند که یک نسخه جدید از HTML را ایجاد کنند.

  • W3C مخفف World Wide Web Consortium است و روی XHTML 2.0 مشغول کار بوده است.
  • WHATWG مخفف Web Hypertext Application Technology Working Group است و روی وب فرم ها و Applicationها مشغول کار بوده است.

بعضی از قوانین که در HTML5 (اچ تی ام ال 5) بنا نهاده شد:

  • ویژگی های جدید باید براساس DOM, CSS, HTML و JavaScript باشد.
  • کاهش نیاز به Pluginهای خارجی (مانند Flash)
  • بهبود مدیریت خطا
  • افزایش نشانه گذاری(markup) برای کاهش اسکریپت نویسی در صفحات وب
  • HTML5 (اچ تی ام ال 5) باید مستقل از دستگاه باشد.
  • پروسه های پیشرفت باید برای عموم قابل رویت باشد.

اعلان <DOCTYPE!>

<DOCTYPE!> یک تگ HTML نیست بلکه یک اعلان است و به مرورگر می گوید چه نسخه HTMLی در صفحه استفاده شده است.

در HTML5 (اچ تی ام ال 5) تنها یک اعلان <DOCTYPE!> وجود دارد و بسیار ساده است:

<!DOCTYPE html>

آموزش یک مثال ساده

در مثال زیر، یک صفحه HTML5 (اچ تی ام ال 5) با حداقل تگ های مورد نیاز آورده شده است:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

آموزش ویژگیهای جدید در HTML5 (اچ تی ام ال 5)

بعضی از ویژگیهای خیلی جالب که در HTML5 (اچ تی ام ال 5) آموزش خواهید دید:

  • آموزش عنصر <canvas> برای نقاشی دو بعدی
  • آموزش عنصر <video> و <audio> برای پخش صدا و تصویر
  • آموزش ذخیره سازی محلی (Local)
  • آموزش عناصر <article>, <footer>, <header>, <nav>, <section> برای مشخص کردن محتوی
  • آموزش ابزارهای جدید برای ساخت فرم، مانند: تقویم، تاریخ، زمان، ایمیل، آدرس وب و جستجو

پشتیبانی از HTML5 (اچ تی ام ال 5) در مرورگرها

HTML5 (اچ تی ام ال 5) هنوز یک استاندارد رسمی نیست، و مرورگرها بصورت کامل آنرا پشتیبانی نمی کنند.

اما مرورگرهای اصلی (Safari, Chrome, Firefox, Opera, Internet Explorer) ویژگی های جدید HTML5 (اچ تی ام ال 5) را در نسخه های جدیدشان اضافه کرده اند.

دیدگاه‌ها  

+5 # farshid 1394-09-06 21:40
html5 ro ham motalee kardam....mofid bod...moteshake ram
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهمان 1394-09-07 15:20
سلام خدمت مدیرسایت لطفا آموزش ساخت سایت به صورت قدم به قدم و تصویری توسط dream weaver رو در سایت قرار بدید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1394-09-07 15:35
سلام، در حال حاضر متأسفانه فرصت انجام این کار وجود ندارد، اما پیشنهادی که برای شما جهت پیاده سازی سایت دارم مراجعه به یکی از لینک های زیر است:
آموزش طراحی سایت با استفاده از Joomla:
www.beyamooz.com/product/amoozesh-joomla/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%AC%D9%88%D9%85%D9%84%D8%A7-3
آموزش طراحی سایت با استفاده از WordPress:
www.beyamooz.com/product/site-wordpress/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%AF%D8%B1-%D9%88%D8%B1%D8%AF%D9%BE%D8%B1%D8%B3
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # علی نیکنام 1394-01-16 17:14
با سلام چرا تگ های vedio , audoi که تگهای جدید html5 هستند رو در مرروگر فایرفاکس نشان نمیده فیلم پخش نمی شود در همین قسمت مقدمه html5 من کد
Your browser does not support the video tag.
در مرورگر فایل فاکس با نوت پد با پسوند .htm ذخیره می کنم چرا فیلم را نمایش نمیدهد؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+7 # احسان عباسی 1394-01-16 19:00
سلام . مرورگر خود را به روز کنید، مشکل حل خواهد شد.
تگ video و audio ، از نسخه ی 3.5 به بالا در فایرفاکس پشتیبانی می شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # Reza Bahrami 1393-12-02 20:00
سلام من html رو کامل یاد گرفتم و در آینده میخوام php کار کنم ولی میخواستم بدونم چقدر یادگیری html 5 مهمه یعنی اینکه باید اول html 5 رو یاد بگیرم و بعد برم سراغ css برم یا اینکه با وجود css یاد گیری html 5 لازم نیست ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+7 # امیر پهلوان صادق 1393-12-03 07:56
سلام، برای شما که تازه کارید، فعلاً نیاز به مرور مطالب HTML5 نیست. اما بعد از آموزش CSS و PHP حتماً این قسمت را مطالعه فرمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+11 # سجاد 1393-11-12 03:38
سلام
خسته نباشید
خیلی از مثال؟ مسال؟مصال؟ های اچ ای ام ال 5 مربوط به JavaScript هستن !
خب من الان اج تی ام ال رو تموم کردم ولی برای یاد گیری اچ تی ام ال 5 نیاز به یاد گیری JavaScript دارم !
پس یعنی فعلا برم سی اس اس و جاوا رو یاد بگیرم ؟!
راستی برای یاد گیری جاوا اسکریپ باید ریاضیاتت قوی باشه ؟
یه بنده خدایی از سختی های این زبان گفت که ترسیدم نتونم یاد بگیرم :(( !
ولی من تو یه شب مقدماتی جاوا رو تا عملگراها اگه اشتباه نکنم
خوندم و دیدم ک خیلی هم سخت نیست :|
چند روز پیش بود که به سایت w3schools برخوردم !
کمرم شکست ^_^
گفتم خدایا چه حالی میکنن یه سایت با همه آموزش ها :((
بعدش سایت شمارو دیدم :|
این بار از خوشحالی ؟ خوشهالی ؟ کمرم شکست :))
آقا در کل
خیلی دوستون داریم
متن بالای سایت هم Like داره



I LOVE Prophet Mohammad
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیرکیان 1393-11-03 11:02
با سلام
اگر ترتیب عناصر htmlبهم بخورد چه می شود؟
مثلاً doctypr را بعد از تگ هد بیاوریم؟!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+8 # امیر پهلوان صادق 1393-11-04 07:56
توجه داشته باشید که شاید صفحه HTML توسط مرورگر درست نمایش داده شود ولی چون از استاندارهای HTML پیروی نکرده اید، در google رنک بالایی نخواهد داشت ...!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+7 # محمد امین 1393-10-07 01:04
سلام یه سوال داشتم.
گفتید که در xhtml باید همه تگ ها بسته شوند مثل تگ br یا img سوال من اینجاست که در html5 اصول چیه ؟ تگ اونجا هم باید بسته بشه یا اصول اینه که درست هست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1393-10-07 10:53
سلام
قواعد تگ نویسی در HTML5 در حال حاضر تقریباً مانند HTML4.1 است، یعنی مثلاً برای تگ های br و hr فرقی نمی کند که آنرا ببندید یا نه ...! (البته برای تگ img حتماً باید بسته شود) و همچنین HTML5 به حروف بزرگ و کوچک حساس نیست، یعنی br با Br یا bR یکسان است.
توجه: بالاخره زمانی می رسد که HTML5 نیز مانند XHTML از استانداردها پیروی کند، بنابراین سعی کنید، همه تگ ها و خصوصیت هایشان را کوچک تایپ کنید و همچنین تمام تگ ها را ببندید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # komail ansari 1393-09-16 01:09
ممنون از مطالب خوبتون.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # sara 1393-03-19 20:06
kheili aali hast in website!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن