آموزش HTML5
آموزش HTML5 (اچ تی ام ال 5) - معرفی
HTML5 (اچ تی ام ال 5) یک استاندارد جدید برای HTML است.
نسخه قبلی HTML یعنی HTML 4.01 در سال 1999 آمده است و از آن سال تا کنون، وب تغییرات زیادی کرده است.
HTML5 (اچ تی ام ال 5) هنوز در حال پیشرفت است. با این حال مرورگرهای اصلی، بیشتر عناصر و APIهای جدید در HTML5 (اچ تی ام ال 5) را پشتیبانی می کنند.
آموزش HTML5 (اچ تی ام ال 5) با استفاده از مثال ها در هر فصل
در این خودآموز، برای آموزش HTML از صدها مثال استفاده شده است.
به کمک ویرایشگری که در اختیارتان است، می توانید سند HTML را ویرایش کنید و با کلیک روی یک دکمه، نتیجه را مشاهده کنید.
مثال (مقدمه آموزش HTML5)
<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!> وجود دارد و بسیار ساده است:
آموزش یک مثال ساده
در مثال زیر، یک صفحه HTML5 (اچ تی ام ال 5) با حداقل تگ های مورد نیاز آورده شده است:
<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) را در نسخه های جدیدشان اضافه کرده اند.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 89224
دیدگاه‌ها
سلام، وقت بخیر
من کاملا مبتدی هستم و قصد دارم طراحی سایت رو یادبگیریم. از کدام یک از آموزش هاتون شروع کنم؟
سلام و عرض ادب
برای ورود به حرفه ی طراحی سایت باید آموزش های زیر رو بترتیب طی نمایید:
فیلم آموزش HTML:
beyamooz.com/product/web-design/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-html
منوی ببین و بیاموز -> برنامه نویسی وب -> آموزش اچ تی ام ال و سی اس اس -> فیلم آموزش اچ تی ام ال
قیمت = 17000 تومان
--------------------------------------
فیلم آموزش HTML5:
beyamooz.com/product/web-design/%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-html5
منوی ببین و بیاموز -> برنامه نویسی وب -> آموزش اچ تی ام ال و سی اس اس -> فیلم آموزش اچ تی ام ال 5
قیمت = 14000 تومان
--------------------------------------
فیلم آموزش css:
beyamooz.com/product/web-design/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-css
منوی ببین و بیاموز -> برنامه نویسی وب -> آموزش اچ تی ام ال و سی اس اس -> فیلم آموزش سی اس اس
قیمت = 21000 تومان
--------------------------------------
فیلم آموزش JavaScript:
beyamooz.com/product/javascript/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-javascript
منوی ببین و بیاموز -> برنامه نویسی وب -> آموزش جاوااسکریپت -> فیلم آموزش جاوااسکریپت
قیمت = 17000 تومان
--------------------------------------
فیلم آموزش JQuery:
beyamooz.com/product/jquery-film/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%AC%DB%8C-%DA%A9%D9%88%D8%A6%D8%B1%DB%8C
منوی ببین و بیاموز -> برنامه نویسی وب -> آموزش جی کوئری -> فیلم آموزش جی کوئری
قیمت = 17500 تومان
--------------------------------------
فیلم آموزش Bootstrap:
beyamooz.com/product/project-bootstrap/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D9%85%D8%AD%D9%88%D8%B1-%D8%A8%D9%88%D8%AA-%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE
منوی ببین و بیاموز -> برنامه نویسی وب -> آموزش بوت استرپ -> فیلم آموزش بوت استرپ
قیمت = 19000 تومان
--------------------------------------
فیلم پروژه محور PHP:
beyamooz.com/product/eshop
منوی ببین و بیاموز -> برنامه نویسی وب -> آموزش پی اچ پی -> آموزش ساخت فروشگاه اینترنتی در پی اچ پی
با احتساب 45 درصد تخفیف بجای 152000 تومان 83600 پرداخت خواهید کرد
---------------------------------------
فیلم پروژه محور ASP.NET MVC:
beyamooz.com/product/asp-net-mvc/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-asp-net-mvc
منوی ببین و بیاموز -> برنامه نویسی وب -> آموزش ای اس پی دات نت -> آموزش پروژه محور
قیمت = 37000 تومان
---------------------------------------
آموزش مقدماتی کوئری نویسی در SQL:
beyamooz.com/product/query-level-1
منوی ببین و بیاموز -> آموزش پایگاه داده -> آموزش اس کیو ال سرور -> آموزش مقدماتی کوئری نویسی
قیمت = 19000 تومان
آموزش پیشرفته کوئری نویسی در SQL:
beyamooz.com/product/query-level-2
منوی ببین و بیاموز -> آموزش پایگاه داده -> آموزش اس کیو ال سرور -> آموزش پیشرفته کوئری نویسی
قیمت = 25000 تومان
----------------------------------------
اگر قصد دارید در زمان کمتری یک سایت رو طراحی کنید و نمی خواهید که برنامه نویسی کنید و یا کار با دیتابیس رو یاد بگیرید، استفاده از جوملا پیشنهاد می شه که در زیر فیلم های آموزشی مربوطه آورده شده است:
فیلم آموزش پروژه محور جوملا:
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
قیمت = 28000 تومان
فیلم آموزش راه اندازی و مدیریت فروشگاه در جوملا:
beyamooz.com/product/joomshopping/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B1%D8%A7%D9%87-%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C-%D9%81%D8%B1%D9%88%D8%B4%DA%AF%D8%A7%D9%87-%D8%AF%D8%B1-%D8%AC%D9%88%D9%85%D9%84%D8%A7
قیمت = 37000 تومان
سلام ، خسته نباشید برای اینکه یک سایت در گوگل به شکل زیر نمایش داده بشه باید چه کاری انجام داد؟
سلام، خود گوگل بر اساس تعداد بازدیدها و میزان محبوبیت یک سایت این کار رو انجام می ده و کاری از دست شما بر نمی یاد.
سلام .خسته نباشید.
1- بصورت کلی چه تفاوتی بین آموزش اچ تی ام ال با اچ تی ام 5 وجود داره؟
2- آیا با زبان اچ تی ام ال می شه برنامه ساخت؟
سلام
1- همان طور که می دانید چندین نسخه از HTML ارائه شده است و هر بار که نسخه جدیدی ارائه می شود، ضعف های نسخه قبلی پوشش داده شده و قابلیت ها زبان گسترش می یابد. اما در آموزش HTML که در منوهای بالا مشاهده می کنید، ما به آموزش نسخه 4 پرداخته ایم و در آموزش HTML5، تنها به معرفی قابلیت های جدیدی که در نسخه 5 اضافه گردیده است پرداخته ایم. (مثل آموزش تگ های Video و Audio که در نسخه قبلی وجود نداشت.)
2- از زبان HTML تنها برای ساخت ظاهر صفحات برنامه های تحت وب استفاده می شود.
با تشکر
html5 ro ham motalee kardam....mofid bod...moteshake ram
سلام خدمت مدیرسایت لطفا آموزش ساخت سایت به صورت قدم به قدم و تصویری توسط dream weaver رو در سایت قرار بدید
سلام، در حال حاضر متأسفانه فرصت انجام این کار وجود ندارد.
با سلام چرا تگ های vedio , audoi که تگهای جدید html5 هستند رو در مرروگر فایرفاکس نشان نمیده فیلم پخش نمی شود در همین قسمت مقدمه html5 من کد
Your browser does not support the video tag.
در مرورگر فایل فاکس با نوت پد با پسوند .htm ذخیره می کنم چرا فیلم را نمایش نمیدهد؟
سلام . مرورگر خود را به روز کنید، مشکل حل خواهد شد.
تگ video و audio ، از نسخه ی 3.5 به بالا در فایرفاکس پشتیبانی می شود.
سلام من html رو کامل یاد گرفتم و در آینده میخوام php کار کنم ولی میخواستم بدونم چقدر یادگیری html 5 مهمه یعنی اینکه باید اول html 5 رو یاد بگیرم و بعد برم سراغ css برم یا اینکه با وجود css یاد گیری html 5 لازم نیست ؟
سلام، برای شما که تازه کارید، فعلاً نیاز به مرور مطالب HTML5 نیست. اما بعد از آموزش CSS و PHP حتماً این قسمت را مطالعه فرمایید.
سلام
خسته نباشید
خیلی از مثال؟ مسال؟مصال؟ های اچ ای ام ال 5 مربوط به JavaScript هستن !
خب من الان اج تی ام ال رو تموم کردم ولی برای یاد گیری اچ تی ام ال 5 نیاز به یاد گیری JavaScript دارم !
پس یعنی فعلا برم سی اس اس و جاوا رو یاد بگیرم ؟!
راستی برای یاد گیری جاوا اسکریپ باید ریاضیاتت قوی باشه ؟
یه بنده خدایی از سختی های این زبان گفت که ترسیدم نتونم یاد بگیرم :(( !
ولی من تو یه شب مقدماتی جاوا رو تا عملگراها اگه اشتباه نکنم
خوندم و دیدم ک خیلی هم سخت نیست :|
چند روز پیش بود که به سایت w3schools برخوردم !
کمرم شکست ^_^
گفتم خدایا چه حالی میکنن یه سایت با همه آموزش ها :((
بعدش سایت شمارو دیدم :|
این بار از خوشحالی ؟ خوشهالی ؟ کمرم شکست :))
آقا در کل
خیلی دوستون داریم
متن بالای سایت هم Like داره
I LOVE Prophet Mohammad
با سلام
اگر ترتیب عناصر htmlبهم بخورد چه می شود؟
مثلاً doctypr را بعد از تگ هد بیاوریم؟!
توجه داشته باشید که شاید صفحه HTML توسط مرورگر درست نمایش داده شود ولی چون از استاندارهای HTML پیروی نکرده اید، در google رنک بالایی نخواهد داشت ...!
سلام یه سوال داشتم.
گفتید که در xhtml باید همه تگ ها بسته شوند مثل تگ br یا img سوال من اینجاست که در html5 اصول چیه ؟ تگ اونجا هم باید بسته بشه یا اصول اینه که درست هست.
سلام
قواعد تگ نویسی در HTML5 در حال حاضر تقریباً مانند HTML4.1 است، یعنی مثلاً برای تگ های br و hr فرقی نمی کند که آنرا ببندید یا نه ...! (البته برای تگ img حتماً باید بسته شود) و همچنین HTML5 به حروف بزرگ و کوچک حساس نیست، یعنی br با Br یا bR یکسان است.
توجه: بالاخره زمانی می رسد که HTML5 نیز مانند XHTML از استانداردها پیروی کند، بنابراین سعی کنید، همه تگ ها و خصوصیت هایشان را کوچک تایپ کنید و همچنین تمام تگ ها را ببندید.
ممنون از مطالب خوبتون.
kheili aali hast in website!