Html5

شروع موضوع توسط pouya saadeghi ‏17 جولای 2010 در انجمن زبان HTML

کلمات کلیدی:
وضعیت موضوع:
موضوع بسته شده است.
  1. pouya saadeghi

    pouya saadeghi Active Member

    ارسال‌ها:
    1,412
    تشکر شده:
    2,235
    امتیاز دستاورد:
    36
    [​IMG]


    تو این تاپیک به مقدمات "نسخه پنجم زبان نشانه گذاری ابرمتن" یا همون HTML5 می پردازیم
    [​IMG]

    حتما اسم HTML5 به گوشتون خورده که قراره تغییرات زیادی تو وب ایجاد کنه و کلی ابزار و امکانات جالب و خفن داره!

    تعریف HTML5 به نقل از ویکی پدیا : HTML5 به عنوان نسخه جدید زبان نشانه گذاری ابرمتن برای ایجاد صفحات وب گسترش داده شده است. اولین بار در ژوئن 2004 بحث برای ایجاد نسخه جدیدی از زبان نشانه گذاری HTML آغاز شد و در فوریه 2010 نسخه های تقریبا نهایی ، از این استانداردها ایجاد شدند.


    خوب! حالا این نسخه جدید چه چیز هایی داره؟ :idea:
    برای آشنایی با قدرت HTML5 می تونید به سایت html5rocks یه نگاهی بندازید.
    اگه مرورگر سافاری 5 یا گوگل کروم 6 روی سیستمتون دارین، به صفحه HTML5 در سایت اپل برید تا قابلیت های HTML5 که در موتور Webkit پشتیبانی میشن رو ببینید.

    + میتونید نمونه های استفاده از HTML5 رو در سایت html5demos ببینید

    HTML5 قرارنیست جای HTML4 رو بگیره، همونطورکه XHTML1 به طور کامل جای HTML4 رو نگرفت.
    در واقع یه طراح وب این اختیاررو داره که از نسخه HTML دلخواهش استفاده کنه
    :wink:

    Doctype

    در نسخه های قبلی این تگ Doctype یکم طولانی بود که در نسخه جدید کوتاه شد:
    HTML 4.1 Strict:
    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
     
    HTML 5:
    HTML:
    <!DOCTYPE HTML>
    Syntax
    در strict XHTML حتما باید از حروف کوچک برای تگ ها استفاده کنیم، از کوتیشن استفاده کنیم و حتما تگ هایی مثل meta, input, img رو با اسلش ببندیم:

    HTML:
    <div id="imgwrapper"><img src="image.jpg" alt="my picture" /></div>
    ولی تو HTML5 می تونیم موارد بالا رو رعایت نکنیم :oops: :

    HTML:
    <DIV>I AM A CAPITAL DIV!! ha ha!</DIV>
    <p id=abstract>We are All HTML5 Valid!</p>
    <input type=text>
    <input type="text">
    <input type="text" />
    منبع
    لطفا برای تشکر فقط از دکمه [​IMG] استفاده کنید و فقط اگه سوال یا آموزش دارید پست بدید :rose: با تشکر
     
    آخرین ویرایش: ‏19 جولای 2010
    نوشته شده توسط pouya saadeghi در ‏17 جولای 2010
    DL110، andria، ya3amin و 39 نفر دیگر از این ارسال تشکر کرده اند.
  2. pouya saadeghi

    pouya saadeghi Active Member

    ارسال‌ها:
    1,412
    تشکر شده:
    2,235
    امتیاز دستاورد:
    36
    HTML5 Sections

    Sections

    برای بخش بندی صفحه تگ های جدیدی معرفی شده که قراره هم کار کدنویس رو راحت کنه و هم کار موتور های جستجو رو!

    چرا که با این تگ ها ، بخش های مختلف صفحه، مثل هدر ، ستون ، محتوا و… کاملا مشخص میشه [​IMG]

    • <nav> – منوی سایت
    • <aside> – ستون
    • <section> – بخش مربوط به محتوا
    • <header> – هدر
    • <footer> – فوتر
    • <article> – محتوای اصلی / مقاله

    قالب بندی صفحه در نسخه های قبلی HTML:

    [​IMG]

    قالب بندی صفحه در HTML5:

    [​IMG]


    نمونه یک صفحه HTML5

    HTML:

    <!DOCTYPE HTML>
    <html>
    <body>
    <header><h1>My Header</h1></header>
    <nav><a href="#">HOME</a><a href="#">Articles</a><a href="#">Tutorials</a></nav>

    <aside>My Left Column
    <section>any content</section>
    </aside>

    <article>

    <section>
    HTML5 is currently under development as the next major revision of the HTML standard.
     Like its immediate predecessors, HTML 4.01 and XHTML 1.1, HTML5 is a standard for
     structuring and presenting content on the World Wide Web.
    </section>

    <section>
    The new standard incorporates features like video playback and drag-and-drop that
     have been previously dependent on third-party browser plug-ins such as Adobe Flash,
     Microsoft Silverlight, and Google Gears.
    </section>

    </article>

    <aside>My Right Column
    <section>any content</section>
    </aside>

    <footer>©2010 - All rights reserved by pouya saadeghi  |  www.pasargad-graphic.com</footer>

    </body>
    </html>
     
     
    نوشته شده توسط pouya saadeghi در ‏17 جولای 2010
    ya3amin، hobgm، pclordweb و 13 نفر دیگر از این ارسال تشکر کرده اند.
  3. pouya saadeghi

    pouya saadeghi Active Member

    ارسال‌ها:
    1,412
    تشکر شده:
    2,235
    امتیاز دستاورد:
    36
    فرم ها در html5

    [​IMG]


    فرم ها در HTML5

    برای تگ Input مقادیر Type جدیدی معرفی شده:

    HTML:
    <form>
         <input type=date>
         <input type=url>
         <input type=email>
         <input type=range min=1 max=20>
         <input type=number>
         <input type=text>
         <input type=submit>
         <input type=file>
    </form>
    • <input type=date> – یک تقویم برای انتخاب تاریخ
    • <input type=url> – یک فیلد برای آدرس وب
    • <input type=email> – یک فیلد برای آدرس ایمیل
    • <input type=range min=1 max=20> – یک نوار اسلاید ایجاد میکند
    • <input type=number> – یک فیلد برای وارد کردن عدد به همراه 2 فلش کوچک برای کاهش و افزایش
    • <input type=text> – یک فیلد برایمتن معمولی
    • <input type=submit> – یک دکمه ثبت معمولی
    • <input type=file> – یک فیلد برای انتخاب فایل

    مثلا نوع date این تقویم رو برای انتخاب تاریخ نمایش میده:

    [​IMG]

    خاصیت required برای فیلد ها:
    با این خاصیت مشخص می کنیم که فیلد مورد حتما باید تکمیل بشه تا فرم کار کنه:

    HTML:
    <input type=text required>
    datalist:
    برای ایجاد لیست کشویی:

    HTML:
    <input type=text list=options>
    <datalist id=options>
    <option label="HTML 5 Rocks" value="HTML 5 Rocks">
    <option label="I love HTML 5" value="I love HTML 5">
    </datalist>
    multiple:
    انتخاب چند فایل برای آپلود:

    HTML:
    <input type=file multiple>
    pattern:
    برای تعیین محتوای وارد شده ؛ مثلا اگه بخوایم فقط اعداد از یک تا نه وارد بشن:

    HTML:
    <input type=text pattern="[1-9]">
    تصویر نمونه از فیلدهای فرم در HTML5:

    [​IMG]
     
    نوشته شده توسط pouya saadeghi در ‏17 جولای 2010
    hobgm، newrayaneh، arabicedu و 11 نفر دیگر از این ارسال تشکر کرده اند.
  4. sharktech

    sharktech کاربر فعال

    ارسال‌ها:
    1,545
    تشکر شده:
    1,324
    امتیاز دستاورد:
    36
    ممنون از پویا جان به خاطر آموزشش :rose:

    اینم کتاب آموزش HTML5 به زبان اصلی : http://gognoos.com/621
     
    نوشته شده توسط sharktech در ‏17 جولای 2010
    Morteza1371، newrayaneh، MAH203 و 10 نفر دیگر از این ارسال تشکر کرده اند.
  5. pouya saadeghi

    pouya saadeghi Active Member

    ارسال‌ها:
    1,412
    تشکر شده:
    2,235
    امتیاز دستاورد:
    36
    Canvas Element

    [​IMG]

    Canvas Element

    ایشون (Canvas) یکی از امکانات فوق العاده HTML5 ه که میتونه به طورمستقیم گرافیک رو درصفحه ایجاد کنه.

    تگ canvas:

    HTML:
    نمونه های استفاده از Canvas :

    پاشیدن نور +
    بازی سه بعدی + + +
    بازی 2 بعدی + +
    سیاره زمین سه بعدی +
    ماشین حساب +
    نقاشی و ایجاد گرافیک + + + + +
    ساعت +
    نمونه های بیشتر از استفاده Canvas در HTML5


    canvas ها توسط جاوا اسکریپت ایجاد میشن.
    ( + نمونه ها )

    HTML:
    <!DOCTYPE HTML>
    <html>
    <body>

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
    </canvas>

    <script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    var grd=cxt.createLinearGradient(0,0,175,50);
    grd.addColorStop(0,"#FF0000");
    grd.addColorStop(1,"#00FF00");
    cxt.fillStyle=grd;
    cxt.fillRect(0,0,175,50);
    </script>

    </body>
    </html>
     
    نوشته شده توسط pouya saadeghi در ‏17 جولای 2010
    geeksesi، hobgm، newrayaneh و 9 نفر دیگر از این ارسال تشکر کرده اند.
  6. main

    main Well-Known Member

    ارسال‌ها:
    1,899
    تشکر شده:
    2,328
    امتیاز دستاورد:
    113
    بسیار وری گود بود ، ما که لذت بردم پویا جان... :rose:
     
    نوشته شده توسط main در ‏17 جولای 2010
    hobgm و pouya saadeghi از این پست تشکر کرده اند.
  7. iliadmoosavi

    iliadmoosavi Member

    ارسال‌ها:
    219
    تشکر شده:
    267
    امتیاز دستاورد:
    16
    حالا سوالی که پیش میاد اینه که اگه به طور مثال ما برای طراحی قالبمون از این حالت استفاده کنیم :
    کد (Text):
    [COLOR=#000080]<aside>[/COLOR]My Left Column
    [COLOR=#000080]<section>[/COLOR]any content[COLOR=#000080]</section>[/COLOR]
    [COLOR=#000080]</aside>[/COLOR]

    [COLOR=#000080]<article>[/COLOR]

    [COLOR=#000080]<section>[/COLOR]
    HTML5 is currently under development as the next major revision of the HTML standard.
     Like its immediate predecessors, HTML 4.01 and XHTML 1.1, HTML5 is a standard for
     structuring and presenting content on the World Wide Web.
    [COLOR=#000080]</section>[/COLOR]

    [COLOR=#000080]<section>[/COLOR]
    The new standard incorporates features like video playback and drag-and-drop that
     have been previously dependent on third-party browser plug-ins such as Adobe Flash,
     Microsoft Silverlight, and Google Gears.
    [COLOR=#000080]</section>[/COLOR]
     
    کسی که به عنوان مثال مرورگرش ie6 هست این صفحه رو چطور میبینه ؟ آیا تگها تبدیل میشن ؟
     
    نوشته شده توسط iliadmoosavi در ‏17 جولای 2010
    hobgm، Morteza1371، arabicedu و 3 نفر دیگر از این ارسال تشکر کرده اند.
  8. pouya saadeghi

    pouya saadeghi Active Member

    ارسال‌ها:
    1,412
    تشکر شده:
    2,235
    امتیاز دستاورد:
    36
    نه IE6 و 7 و حتی 8 از این تگ ها پشتیبانی نمیکنن...
    البته میتونیم هم از section ها و هم از div ها استفاده کنیم که مشکلی پیش نیاد :wink:
     
    نوشته شده توسط pouya saadeghi در ‏18 جولای 2010
    hobgm، newrayaneh، ark6069 و 3 نفر دیگر از این ارسال تشکر کرده اند.
  9. pouya saadeghi

    pouya saadeghi Active Member

    ارسال‌ها:
    1,412
    تشکر شده:
    2,235
    امتیاز دستاورد:
    36
    Web Storage

    ایده Web Storage که در HTML5 معرفی شد ، این امکان رو میده که نرم افزار های آنلاین برای ذخیره موقت داده های شما، دیتابیس های محلی بر روی کامپیوتر شما ایجاد کنند :idea: یعنی شما میتونید از نرم افزار های تحت وب ، آفلاین استفاده کنید!

    نمونه استفاده از Web Storage:

    روش localStorage:

    HTML:
    <!DOCTYPE HTML>
    <html>
    <body>

    <script type="text/javascript">

    <!-- I can save myname in your local database: -->

    localStorage.myname="PouyaSaadeghi";
    document.write(" HI! My Name Is : " + localStorage.myname);

    </script>

    </body>
    </html>
    کد زیر تعداد بازدید های کاربر ( که در کامپیوترخودکاربر ذخیره شده ) رو نشون میده [​IMG] :

    HTML:
    <!DOCTYPE HTML>
    <html>
    <body>

    <script type="text/javascript">

    if (localStorage.pagecount)
        {
        localStorage.pagecount=Number(localStorage.pagecount) +1;
        }
    else
        {
        localStorage.pagecount=1;
        }
    document.write("Visits: " + localStorage.pagecount + " time(s).");

    </script>

    <p>Refresh the page to see the counter increase.</p>

    <p>Close the browser window, and try again, and the counter will continue.</p>
    </body>
    </html>

    روش sessionStorage :

    با این روش اطلاعات در یک جلسه (session) ذخیره میشه و تفاوتش با روش قبلی اینه که وقتی کاربر مروگرشو ببنده همه session ها (و در نتیجه اطلاعات ذخیره شده) پاک میشه.

    مثال زیر تعداد بازدید های کاربر رو نشون میده، با این تفاوت که با بسته شدن صفحه مرورگر ، شمارنده صفر میشه:

    HTML:
    <!DOCTYPE HTML>
    <html>
    <body>

    <script type="text/javascript">

    if (sessionStorage.pagecount)
        {
        sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
        }
    else
        {
        sessionStorage.pagecount=1;
        }
    document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");

    </script>

    <p>Refresh the page to see the counter increase.</p>

    <p>Close the browser window, and try again, and the counter has been reset.</p>
    </body>
    </html>
     
    نوشته شده توسط pouya saadeghi در ‏18 جولای 2010
    hobgm، amirsport، L-B و 4 نفر دیگر از این ارسال تشکر کرده اند.
  10. pouya saadeghi

    pouya saadeghi Active Member

    ارسال‌ها:
    1,412
    تشکر شده:
    2,235
    امتیاز دستاورد:
    36
    صدا

    فعلا فقط 3 فرمت Ogg ، MP3 و Wav رو میشه استفاده کرد:

    [​IMG]
    مثال:
    HTML:
    <audio src="song.ogg"></audio>


    خاصیت ها:

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

    controls دکمه play/pause و تایم و volume رو به شکل زیر نمایش میده:
    [​IMG]

    loop برای تکرار شدن آهنگ

    preload اگه خاصیت autoplay رو فعال نکرده باشیم، preload بعد از لودصفحه ، فایل صوتی رو به طور کامل لود میکنه که آماده پخش بشه.

    src که همون آدرس فایله (*ضروری)



    تگ audio میتونه مثل تگ های noframe و noscript عمل کنه. یعنی هرچیزی که بین تگ <audio> و </audio> باشه ، وقتی نشون داده میشه که مرورگر از این تگ پشتیبانی نمیکنه [​IMG]

    HTML:
    <audio src="song.ogg" controls="controls" loop="loop">

    Your browser does not support the audio element  : (
    <a href="download-link.ogg">but you can download this audio</a>

    </audio>
     
    آخرین ویرایش: ‏18 جولای 2010
    نوشته شده توسط pouya saadeghi در ‏18 جولای 2010
    hobgm، newrayaneh، L-B و 7 نفر دیگر از این ارسال تشکر کرده اند.
  11. pouya saadeghi

    pouya saadeghi Active Member

    ارسال‌ها:
    1,412
    تشکر شده:
    2,235
    امتیاز دستاورد:
    36
    ویدیو

    [​IMG] با این ویژگی ، فایل های ویدیویی به طور مستقیم درصفحه قرار میگیرن و برای نمایش به Flash Player و Silverlight و Quicktime نیازی نیست!

    ویدیو ها با یه تگ ساده <video> قابل نمایش میشن:

    HTML:
    <video src="movie.ogg" controls="controls">
    </video>
    فقط 2 فرمت MP4 و OGG فعلا پشتیبنی میشن:

    [​IMG]

    [​IMG] طبق تحقیقات اخیر من:
    فایرفاکس 3.5 به بعد از تگ ویدیو پشتیبانی میکنه.
    اینترنت اکسپلورر 6 و 7 و 8 ... :sad: (بهتره چیزی نگم!) فقط ورژن 9 (منتشر نشده هنوز) از فرمت mp4 قراره پشتیبانی کنه
    اینترنت اکسپلورر9 و سافاری 5 از فرمت هایOgg/Theora/Vorbis پشتیبانی نمیکنن.
    اپرا 10،6 و فایرفاکس 3،6 از فرمت های MPEG-4/H-264/AAC پشتیبانی نمیکنن.
    نسخه بعدی مرورگر های chrome و firefox یعنی کروم 7 و فایرفاکس 4 از فرمت جدید WebM/VP8 هم پشتیبانی میکنن.


    مثال:

    HTML:
    <video src="movie.ogg" width="320" height="240" controls="controls">
    Your browser does not support the video tag.
    </video>
    خاصیت ها هم مثل همون تگ <audio> فقط width و height هم قابل تنظیمه :wink:
     
    نوشته شده توسط pouya saadeghi در ‏18 جولای 2010
    arabicedu، L-B، ArefGod و یک نفر دیگر از این ارسال تشکر کرده اند.
  12. iliadmoosavi

    iliadmoosavi Member

    ارسال‌ها:
    219
    تشکر شده:
    267
    امتیاز دستاورد:
    16
    من فکر میکنم باید یه فکر اساسی برای این مشکل بکنن . حالا گیرم ما از هر دوی اون تگها استفاده کردیم ، برای تگ :
    کد (Text):
    <video src="movie.ogg" controls="controls">
    </video>
    و تگهای مشابه دیگر چکار کنیم ؟ :rose:
     
    نوشته شده توسط iliadmoosavi در ‏18 جولای 2010
    arabicedu، ArefGod و pouya saadeghi از این ارسال تشکر کرده اند.
  13. pouya saadeghi

    pouya saadeghi Active Member

    ارسال‌ها:
    1,412
    تشکر شده:
    2,235
    امتیاز دستاورد:
    36
    برای هر مشکلی یه راهی میشه پیدا کرد!
    در مورد تگهای Audio و Video تو پست های قبل توضیح دادم:

    HTML:
    <video src="movie.ogg" width="320" height="240" controls="controls">

    We can place a flash embedded video here!
    this will display when browser doesnt support "video" tag

    </video>
     
    آخرین ویرایش: ‏19 جولای 2010
    نوشته شده توسط pouya saadeghi در ‏18 جولای 2010
    arabicedu، haniman، ArefGod و یک نفر دیگر از این ارسال تشکر کرده اند.
  14. iliadmoosavi

    iliadmoosavi Member

    ارسال‌ها:
    219
    تشکر شده:
    267
    امتیاز دستاورد:
    16
    آها ، این فکر جالبیه ممنون :rose:
     
    نوشته شده توسط iliadmoosavi در ‏18 جولای 2010
    arabicedu، haniman، samvision و 2 نفر دیگر از این ارسال تشکر کرده اند.
  15. MAH203

    MAH203 Member

    ارسال‌ها:
    30
    تشکر شده:
    12
    امتیاز دستاورد:
    8
    مرسی دوستان واسه توضیحاتتون
    حالا کتاب آموزش فارسی داره یا نه؟
     
    نوشته شده توسط MAH203 در ‏6 مارس 2013
    arabicedu از این پست تشکر کرده است.
  16. restles20

    restles20 Active Member

    ارسال‌ها:
    241
    تشکر شده:
    95
    امتیاز دستاورد:
    28
    نوشته شده توسط restles20 در ‏6 مارس 2013
    arabicedu و MAH203 از این پست تشکر کرده اند.
  17. MAH203

    MAH203 Member

    ارسال‌ها:
    30
    تشکر شده:
    12
    امتیاز دستاورد:
    8
    ------------------------
    خیلی اقایی
    فقط یه چیز دیگه
    من از html خیلی کم بلدم
    می تونم مستقیمن با html5 شروع کنم؟
     
    نوشته شده توسط MAH203 در ‏6 مارس 2013
    arabicedu از این پست تشکر کرده است.
  18. restles20

    restles20 Active Member

    ارسال‌ها:
    241
    تشکر شده:
    95
    امتیاز دستاورد:
    28
    بله می تونید ولی بنده بهتون پیشنهاد می کنم که ابتدا یه آموزش کوچولو در رابطه با html4 فرا بگیرید چون در اکثر کتب مثل کتابی که براتون معرفی کردن بیشتر به قابلیت های جدید html5 می پردازه بنابراین در هنگام آموزش امکان داره یه خورده گیج بشین
     
    نوشته شده توسط restles20 در ‏7 مارس 2013
    Narges-lucy، arabicedu و MAH203 از این ارسال تشکر کرده اند.
  19. arabicedu

    arabicedu New Member

    ارسال‌ها:
    15
    تشکر شده:
    4
    امتیاز دستاورد:
    1
    با سلام
    کاش آموزش خوبتان را کامل میکردید و آن را با فرمت پی دی اف هم می گذاشتید
     
    نوشته شده توسط arabicedu در ‏26 آوریل 2013
    newrayaneh از این پست تشکر کرده است.
  20. Narges-lucy

    Narges-lucy New Member

    ارسال‌ها:
    2
    تشکر شده:
    1
    امتیاز دستاورد:
    1
    با سلام،
    ببخشید من اگه بخوام برای طراحی قالب وبلاگ کدنویسی یادبگیرم هم باید با html شروع کنم؟ بعدش هم css?
    ممنونم
     
    نوشته شده توسط Narges-lucy در ‏4 جولای 2013
    newrayaneh از این پست تشکر کرده است.
وضعیت موضوع:
موضوع بسته شده است.

به اشتراک بگذارید