ویژگی های جدید HTML5 – قسمت اول

دوشنبه, ۸ام اسفند , ۱۳۹۰ | ۴۰ دیدگاه

بعد از مدت ها با یک پست آموزشی در مورد ویژگی های جدید HTML5 در خدمت شما عزیزان هستیم . برای دیدن آموزش به ادامه مطلب مراجعه کنید

تعیین کردن نوع سند :

در نسخه های قبلی HTML برای مشخص کردن نوع سند برای مرورگر باید از یک سری کدهای مزاحم XHTML استفاده می شد که در نسخه جدید HTML5 این کار خیلی خلاصه شده مثل کد زیر :

<!DOCTYPE html>

ساختن متن های قابل ویرایش :

با استفاده صفت contenteditable در HTML5 می توان محتوایی در پوشش صفحات وب با قابلیت ویرایش ساخت و می توان به کاربران اجازه داد نوشته هایی که در پوشش این المان هستند را ویرایش کنند .

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>untitled</title>
</head>
<body>
    <h2>Editable</h2>
    <ul contenteditable="true">
        <li>Text 1</li>
        <li>Text 2</li>
        <li>Text 3</li>
    </ul>
</body>
</html>

استفاده از HTML5 در Internet Explorer :

در مرورگر Internet Explorer پشتیبانی خوبی از تگ های HTML5 نمی شود و به همین دلیل برای استفاده باید از یک سری تکنیک ها استفاده شود که بهترین روش استفاده از اسکریپت HTML5.js است که باید به صورت زیر در قسمت Head صفحات وب استفاده شود :

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

صفت مورد نیاز برای فیلدها :

برای اجباری کردن فیلد های مورد نظر درفرم های تماس و … در HTML5 می توان از صفت Required به دو روش استفاده کرد :

<input type="text" name="someInput" required>

یا

<input type="text" name="someInput" required="required">

صفت انتخاب اتوماتیک فیلدها :

از این صفت برای انتخاب اتوماتیک فیلد مورد نظر در فرم ها استفاده می شود که همان حالت Focus است که بعد از کلیک کردن روی فیلد اتفاق می افتد . که باید به صورت زیر استفاده شود :

<input type="text" name="someInput" autofocus>

عبارات منظم :

گاهی اوقات ورودی فیلدها و اغلب در فیلدهای ایمیل ، متن ورودی باید از قاعده خاصی پیروی کند که قبل از HTML5 از کدهای جاوا برای این منظور استفاده می شد و در حال حاضر با یک کد خلاصه می شود این کار را به راحتی انجام داد :

<form action="" method="post">
    <label for="username">Create a Username: </label>
    <input type="text"
       name="username"
       id="username"
       placeholder="4 <> 10"
       pattern="[A-Za-z]{4,10}"
       autofocus
       required>
    <button type="submit">Go </button>
</form>
Be Sociable, Share!


۴۰ دیدگاه

  1. […] the original here: ویژگی های جدید HTML5 – قسمت اول Be the first to like. Like […]




  2. وحید
    ۹ اسفند ۱۳۹۰

    سلام. ممنون از مطلب خوب شما. امیدوارم تداوم داشته باشد.




  3. Goback
    ۹ اسفند ۱۳۹۰

    از اینکه میبینم سایت دوباره داره صدا میده خوشحالم 🙂




  4. مجتبی
    ۹ اسفند ۱۳۹۰

    ممنون دوست عزیز
    به زودی سایت به حالت قبلی خودش بر می گرده و به یاری شما دوستان برنامه های خوبی برای سایت در نظر داریم




  5. نسرین
    ۹ اسفند ۱۳۹۰

    سلام خیلی ممنون از مطالب خوبتون …
    امیدوارم ادامه داشته باشه …. خیلی ممنون … برقرار باشید




  6. سحر
    ۱۰ اسفند ۱۳۹۰

    عالی بود . لطفاً ادامه بدید . ممنون 🙂




  7. Arshia
    ۱۱ اسفند ۱۳۹۰

    سلام
    خیلی جالب بود…
    امیدوارم این مطالب ادامه داشته باشه..
    ممنونم




  8. کامران
    ۱۱ اسفند ۱۳۹۰

    مجتبی جان برات آرزوی موفقیت میکنم و امیدوارم که با یاری شما آی تی تی رو دوباره احیا کنیم
    ممنونم




  9. محسن
    ۱۶ اسفند ۱۳۹۰

    بعد از مدت ها شروع خوبی بود




  10. الیاس
    ۲۱ اسفند ۱۳۹۰

    سلام و خسته نباشید.
    چه عجب ؟!!!!
    من خیلی مطالب از وبسایت شما یاد گرفتم.یعنی شروع من به کار وب ازینجا شروع شد.ولی یهو خیلی کم و دیر به دیر مطالب به روز میشد.
    باز هم ممنون که وقت میزارین و این مطالب مفید رو قرار میدین.
    موفق باشید.




  11. مهدی
    ۹ فروردین ۱۳۹۱

    بسیار مطلب خوبی بود، امید وارم تداوم داشته باشد




  12. shahram
    ۱۵ فروردین ۱۳۹۱

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

    با تشکر از طرف شهرام ملاشاهی




  13. مهدی
    ۲۱ فروردین ۱۳۹۱

    استفاده از مطالب این سایت اشکالی دارد؟؟




  14. مجتبی
    ۲۱ فروردین ۱۳۹۱

    نه دوست عزیز ، با رعایت حقوق و منبع مشکلی نیست




  15. مهدی
    ۲۳ فروردین ۱۳۹۱

    خیلی ممنون هستم از این که پاسخ من را داده اید. سوال دیگرم این است که شما AJAX را آموزش نمی دهید؟؟؟؟؟؟؟




  16. مجتبی
    ۲۳ فروردین ۱۳۹۱

    سلام مهدی جان ؛
    خواهش می کنم . بله حتما اگه وقت داشته باشم ، چرا که نه !
    حتما می زارم




  17. armiiiiiiin
    ۳۰ فروردین ۱۳۹۱

    merrrrrrcccccccccccccccccccccccccccccccccccc




  18. پوریا
    ۱۹ اردیبهشت ۱۳۹۱

    مطلب مفیدی بود تشکر




  19. پروین
    ۴ خرداد ۱۳۹۱

    نمی شه ارور قسمت (صفت مورد نیاز برای فیلدها) رو فارسی کرد




  20. کلیک
    ۱۳ خرداد ۱۳۹۱

    مطلب خوبی بود برا طراحی سایت، ممنون.




  21. shahin
    ۲۱ خرداد ۱۳۹۱

    New input types:
    ۱٫email
    ۲٫url
    ۳٫number
    ۴٫range
    ۵٫Date
    ۶٫search
    ۷٫color




  22. سلام
    ۲۴ خرداد ۱۳۹۱

    قسمت «طراحی وب سایت از ابتدا تا انتها – قسمت اول (طراحی قالب)» عکس ها دیده نمی شه




  23. کامران
    ۳۱ تیر ۱۳۹۱

    ممنونم shahin جان




  24. samad
    ۱۳ مرداد ۱۳۹۱

    ممنون عالیه




  25. مهدی
    ۱۴ مرداد ۱۳۹۱

    مطلب خوبی است ولی قسمت های بعدی اش را هم بگذارین.



  26. […] بعد از مدت ها با یک پست آموزشی در مورد ویژگی های جدید HTML5 در خدمت شما عزیزان هستیم . برای دیدن آموزش به ادامه مطلب مراجعه کنید تعیین کردن نوع سند : در نسخه های قبلی HTML برای مشخص کردن نوع سند برای مرورگر باید از یک سری کدهای مزاحم XHTML استفاده می شد که در نسخه جدید HTML5 این کار خیلی خلاصه شده مثل کد زیر : <!DOCTYPEادامه مطلب […]




  27. pouyan
    ۲۶ شهریور ۱۳۹۱

    خیلی عالیه ولی لینک دانلود اموزش درست کردن وب سایت را هم
    بصورت videoبگذارید خیلی بهتر یشه .ممنون



دیدگاه خود را بنویسید