آموزش قواعد نوشتاری (Syntax) در HTML5

نوشته شده توسط 
منتشرشده در آموزش HTML5
یکشنبه, 07 دی 1393 ساعت 22:17

قواعد نوشتاری یا سینتکس ها در HTML5 :

قواعد نوشتاری یا HTML5 Syntax  با  HTML 4 و اسناد XHTML1  که بر روی وب منتشر شده است،سازگار می باشد اما با ویژگی های باطنی تر SGML از HTML 4  سازگار نیست.
HTML5  از موارد زیر پشتیبانی می کند و بسیار انعطاف پذیر می باشد:

•    تگ های دارای حروف بزرگ.
•    نقل قول برای صفات.
•    مقادیر برای صفات اختیاری است.
•    بستن عناصر خالی اختیاری است.

DOCTYPE :

مشخص می کند که از چه نوع تگ هایی استفاده می شود.
DOCTYPEs  در نسخه های قدیمی تر HTML  طولانی تر بودند زیرا  زبانHTML برپایه SGML  استوار بود و به همین دلیل نیازمند ارجاع به یک DTD بود.
نویسندگان HTML 5 می توانند از کد ساده زیر برای مشخص کردن  DOCTYPE استفاده کنند:

<!DOCTYPE html>

کد بالا به طور کامل به حروف کوچک و بزرگ حساس است.

کدگذاری در HTML5 :

نویسندگان HTML 5 می توانند از کد ساده زیر برای مشخص کردن نوع  Encoding استفاده کنند:

<"meta charset="UTF-8>

 کد بالا به طور کامل به حروف کوچک و بزرگ حساس است.

 کد بالا به طور کامل به حروف کوچک و بزرگ حساس است.

تگ <script> :

روشی معمول برای اضافه کردن یک ویژگی با محتوای " متن / جاوا اسکریپت "  به صورت زیر است :

<script type="text/javascript" src="/scriptfile.js"></script>

 HTML 5 اطلاعات اضافی اما مورد نیاز را حذف می کند و شما می توانید به سادگی زیر از استفاده کنید:

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

 تگ <link> :

تا کنون تگ <link> را شکل زیر نوشته می شد:

<link rel="stylesheet" type="text/css" href="/stylefile.css">

 HTML 5 اطلاعات اضافی اما مورد نیاز را حذف می کند و شما می توانید به سادگی زیر استفاده کنید:

<link rel="stylesheet" href="/stylefile.css">

 عناصر درHTML5  :

عناصر HTML5 با یک تگ شروع و یک تگ پایان مشخص می شوند. تگ ها ،با نام تگ در بین دو براکت زاویه مشخص می شود.
تفاوت بین این دو تگ وجود یک علامت اسلش "/" قبل از نام تگ پایان است.
نمونه ای از یک عنصر HTML5 :

<p>...</p>

 نام تگ ها در  HTML5 به حروف کوچک و بزرگ حساس نیست و ممکن است تماما با حروف بزرگ و یا  ترکیبی از حروف بزرگ و کوچک نوشته شود، اگر چه معمولا با حروف کوچک نوشته می شود.

بسیاری از تگ ها درHTML5  مطالبی را در برمی گیرند مانند تگ <p>...</p> که شامل یک پاراگراف می شود.
برخی از تگ ها در HTML5 محتوایی را در بر نمی گیرند که آنها را تگ خالی می نامیم مانند br ،  hr، link ، meta و ...
در قسمت عناصر HTML5 می توانید لیست کاملی از عناصر HTML5 را مشاهده کنید.

صفت ها (Attributes ) در HTML5 :

عناصر ممکن است دارای خواص مختلفی باشد که شما می توانید با صفت ها در HTML5 این خواص را تنظیم کنید.
برخی از صفت ها در سطح عمومی تعریف شده و می توانید بر روی تمام عناصراستفاده کنید.
 سایر صفت ها که به صورت ویژه تعریف شده ، تنها برای یک عنصر استفاده می شود.
صفت ها در HTML5 از یک نام و یک مقدار تشکیل می شود، که در مثال زیر نمونه آن را مشاهده می کنید.
در زیر نمونه ای از صفت ها در HTML5 قرار دارد ، که در آن عنصر div با صفت class و مقدار صفت example را مشاهده می کنید .

<div class="example">...</div>

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

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

صفحات در HTML5 :

برای درک بهتر شما برخی از تگ ها در زیر معرفی می شوند:
section : ازتگ section برای بخش بندی صفحه استفاده می شود، به این صورت که قسمت هایی را که با هم ارتباط معنایی دارند به عنوان یک بخش در نظر گرفته وبه عنوان نماینده آن بخش عمل می کند. همچنین می توان از H1-H6 در کنارش برای مشخص کردن ساختار سند استفاده کرد.
article : از تگ  article برای ایجاد یک قسمت مستقل از محتوای یک صفحه، مانند وبلاگ یا مقاله روزنامه استفاده می شود. این تگ نسبت به تگ section مستقل تر و دقیقتر می باشد، نکته دیگر در تفاوت این دو تگ در این است که تگ article را به صورت تو در تو نمی توان استفاده کرد اما همانند تگ section میتوان در داخل تگ article از تگ های section, nav, aside به همراه تگ  header و footer استفاده کرد.
aside : این تگ نشان دهنده یک قطعه از محتوا است که تنها کمی به بقیه صفحه مربوط است. همچنین برای استفاده در ستونهای کناری کاربرد دارد، در صورتی که ازتگ aside در تگ دیگری استفاده می کنیم (برای مثال تگ article )باید قسمت هایی که در این تگ قرار می گیردبا محتوای تگ article ارتباط معنایی داشته باشد.
header : از تگ header برای قرار دادن سرصفحه یا سربرگ در یک بخش استفاده ه می شود.
footer : از تگ footer برای قرار دادن پانویس در یک بخش استفاده ه می شود می توانند اطلاعاتی از قبیل نویسنده، اطلاعات کپی رایت، و ...را در برگیرد.
Nav : با استفاده از تگ nav می توان بخشی را به لینک ها اختصاص داد.
Dialog : از تگ dialog برای ایجاد یک کادر محاورهای یا باکس استفاده می شود.
figure :  از تگ figure برای همراه کردن محتوای متنی با تصاویر یا ویدیو استفاده می شود.

در زیر نمونه ای ازیک  سند HTML5 را مشاهده می کنید:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>...</title>
</head>
<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

 

با تشکر از همراهی شما، از سایر آموزش های ما در وب استیودنت دیدن فرمایید.

خواندن 1494 دفعه آخرین ویرایش در چهارشنبه, 01 بهمن 1393 ساعت 13:38
س. صفری

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

موارد مرتبط

  • فرمول نویسی در HTML5

    فرمول نویسی در HTML5

    در HTML5 عنصر جدیدی به نام MathML معرفی شده است، که امکان قرار دادن فرمول های ریاضی در صفحات را با استفاده از تگ های <math>...</math> فراهم می کند.

    بسیاری از مرورگرهای وب می توانند تگ های فرمول نویسی HTML5 را نمایش دهند. اگر مرور گر شما از MathML پشتیبانی نمی کند، ما پیشنهاد می کنیم از آخرین نسخه مرورگر Firefox استفاده کنید.

    نمونه ای از فرمول نویسی در صفحات HTML:

    در پایین نمونه ای از کدهای فرمول نویسی در یک سند HTML5 را مشاهده می کنید.

    <!doctype html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Pythagorean theorem</title>
      </head>
      <body>
        <math xmlns="http://www.w3.org/1998/Math/MathML">
          <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>=</mo>
            <msup><mi>c</mi><mn>2</mn></msup>
          </mrow>
        </math>
      </body>
    </html> 
    

    نتیجه کد بالا به این شکل است:

    MathML in HTML5

    توجه داشته باشید که از فایرفاکس3.5 (Firefox) یا نسخه های بالاتراستفاه کنید، و از فعال بودن HTML5 در آن مطمئن شوید.

    استفاده از کاراکترهای فرمول نویسی در صفحات HTML:

    در پایین نمونه ای قواعد نوشتاری مربوط به استفاده از کاراکترها و InvisibleTimes در فرمول نویسی MathML را مشاهده می کنید.

    <!doctype html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>MathML Examples</title>
      </head>
      <body>
        <math xmlns="http://www.w3.org/1998/Math/MathML">
           <mrow>
              <mrow>
                 <msup>
                    <mi>x</mi>
                    <mn>2</mn>
                 </msup>
                 <mo>+</mo>
                 <mrow>
                    <mn>4</mn>
                    <mo>⁢</mo>
                    <mi>x</mi>
                 </mrow>
                 <mo>+</mo>
                 <mn>4</mn>
              </mrow>
                 <mo>=</mo>
                 <mn>0</mn>
            </mrow>
       </math>
    </body>
    </html>
    

    نتیجه کد بالا به این شکل است:

    MathML in HTML5

    توجه داشته باشید که اگر قادر به مشاهده نتیجه به صورت بالا نمی باشید، از فایرفاکس3.5 (Firefox) یا نسخه های بالاتراستفاه کنید.

    نمونه ای از ایجااد ماتریس در صفحات HTML:

    در پایین نمونه ای از یک سند HTML5 را مشاهده می کنید که یک ماتریس ساده 2x2 راایجاد می کند.

    <!doctype html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>MathML Examples</title>
      </head>
      <body>
        <math xmlns="http://www.w3.org/1998/Math/MathML">
           <mrow>
              <mi>A</mi>
              <mo>=</mo>
              <mfenced open="[" close="]">
                 <mtable>
                    <mtr>
                       <mtd><mi>x</mi></mtd>
                       <mtd><mi>y</mi></mtd>
                    </mtr>
                    <mtr>
                       <mtd><mi>z</mi></mtd>
                       <mtd><mi>w</mi></mtd>
                    </mtr>
                 </mtable>
             </mfenced>
          </mrow>
       </math>
    </body>
    </html> 
    

    نتیجه کد بالا به این شکل است:

    Matrix in Html5
    توجه داشته باشید که اگر قادر به مشاهده نتیجه به صورت بالا نمی باشید، از فایرفاکس3.5 (Firefox) یا نسخه های بالاتراستفاه کنید.

     

    با تشکر از همراهی شما، از سایر آموزش های ما در وب استیودنت دیدن فرمایید.

  • آموزش SVG در HTML5

    آموزش کد درون خطی SVG در HTML5   

    SVG مخفف Scalable Vector Graphics  زبانی برای توصیف گرافیک های دوبعدی (2D-graphics) و تعریف تصاویر گرافیکی در فرمت XML ،برای ایجاد بردار و تصاویر گرافیکی مبتنی بر بردار و نمودار در وب از SVG استفاده می شود.

    SVG در تاریخ 14. January 2003 توسط W3C توصیه شد.

     مزایای  SVG   

    تصاویر SVG نسبت به سایر تصاویر از قبیل GIF,JPG و PNG دارای مزیت هایی به شرح زیر است:

    - تصاویر SVG  را با هر ویرایشگر متنی می توان ایجاد کرد.
    - تصاویر SVG می توانند مورد جستجو قرار می گیرند ( در موتور های جستجوایندکس شوند) ، فشرده می شوند و به راحتی در اسکریپت نویسی به کار می روند.
    - تصاویر SVG  قابلیت مقیاس پذیری دارند.
    - تصاویر SVG  قابلیت زوم دارند و می توانند بدون افت کیفیت بزرگ شوند.
    - تصاویر SVG  در هر رزولوشنی (دقت تصویری) می توانند با کیفیت بالا چاپ شوند.

    مشاهده فایل های SVG

    بسیاری از مرورگرهای وب می توانند تصاویر SVG را نمایش دهند مانند تصاویر  PNG، GIF، JPG .
    البته کاربران اینترنت اکسپلورر (InternetExplorer) ناچار هستند برنامه Adobe SVG Viewer  را نصب کنند تا بتوانند فایل های SVG را در مرورگر مشاهده کنند.

     بکار بردن مستقیم SVG در HTML5

    HTML5 امکان بکاربردن فایل های SVG را به صورت مستقیم در دل کد های HTML فراهم می کند.که استفاده آن به سادگی زیر است:

    <svg xmlns="http://www.w3.org/2000/svg">
    ...    
    </svg>
    

     همچنین در مرورگر موزیلا فایر فاکس 3.7 (3.7 Firefox ) تنظیمات پیکربندی ("about:config") وجود دارد، که به کمک آن می توانید کدهای html5 را فعال کنید. برای این کار مراحل زیر را دنبال کنید:

    1-    در نوار آدرس مرورگر خود about:config را تایپ کنید.

    2-    در پیام هشدار که ظاهر می شود برر روی گزینه "I'll be careful, I promise!" کلیک کنید. (و البته به آن پایبند باشید.)

    3-    در نوار فیلتر بالای صفحه html5.enable را تایپ کنید.

    4-    ممکن است این گزینه غیرفعال باشد، بنابراین با کلیک بر روی مقدار فیلد value آن را برابر true قرار دهید.

    حالا قابلیت تجزیه کننده HTML5 مرورگر شما فعال است و شما می توانید نمونه کدهای دستوری زیر را آزمایش کنید:

    رسم دایره با استفاده از SVG در HTML5 :

    در زیر مثالی از کد درون خطی SVG در HTML5 را مشاهده می کنید که در آن با استفاه از تگ <circle> یک دایره رسم شده است:

    <!DOCTYPE html>
    <head>
    <title>SVG</title>
    <meta charset="utf-8" />
    </head>
    <body>
    <h2>HTML5 SVG Circle</h2>
    <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
        <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
    </svg>
    </body>
    </html>
    

     نتیجه کد بالا به این شکل است:

     HTML5-SVG

    برای درک  کد SVG بالا، بهتر است خودتان امتحان کنید.
    توجه داشته باشید که از فایرفاکس3.7 (Firefox) یا نسخه های بالاتراستفاه کنید، و از فعال بودن HTML5 در آن مطمئن شوید.  

     رسم مربع مستطیل با استفاده از SVG در HTML5 :

    در زیر مثالی از کد درون خطی SVG در HTML5 را مشاهده می کنید که در آن با استفاه از تگ <rect> یک مستطیل رسم شده است:

    <!DOCTYPE html>
    <head>
    <title>SVG</title>
    <meta charset="utf-8" />
    </head>
    <body>
    <h2>HTML5 SVG Rectangle</h2>
    <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
        <rect id="redrect" width="300" height="100" fill="red" />
    </svg>
    </body>
    </html>
    

     نتیجه کد بالا به این شکل است:

     HTML5-SVG

    برای درک  کد SVG بالا، بهتر است خودتان امتحان کنید.
    توجه داشته باشید که از فایرفاکس3.7 (Firefox) یا نسخه های بالاتراستفاه کنید، و از فعال بودن HTML5 در آن مطمئن شوید.  

    رسم خط با استفاده از SVG در HTML5 :

    در زیر مثالی از کد درون خطی SVG در HTML5 را مشاهده می کنید که در آن با استفاه از تگ <line> یک خط رسم شده است:

    <!DOCTYPE html>
    <head>
    <title>SVG</title>
    <meta charset="utf-8" />
    </head>
    <body>
    <h2>HTML5 SVG Line</h2>
    <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
        <line x1="0" y1="0" x2="200" y2="100"
              style="stroke:red;stroke-width:2"/>
    </svg>
    </body>
    </html>
    

     شما می توانید با استفاده از صفت Style مجموعه ای از خاصیت ها از قبیل رنگ، ضخامت و... را اعمال کنید.

    نتیجه کد بالا به این شکل است:

     HTML5-SVG

    برای درک  کد SVG بالا، بهتر است خودتان امتحان کنید.
    توجه داشته باشید که از فایرفاکس3.7 (Firefox) یا نسخه های بالاتراستفاه کنید، و از فعال بودن HTML5 در آن مطمئن شوید.  

    رسم بیضی با استفاده از SVG در HTML5 :

    در زیر مثالی از کد درون خطی SVG در HTML5 را مشاهده می کنید که در آن با استفاه از تگ <ellipse> یک بیضی رسم شده است:

    <!DOCTYPE html>
    <head>
    <title>SVG</title>
    <meta charset="utf-8" />
    </head>
    <body>
    <h2>HTML5 SVG Ellipse</h2>
    <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
        <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
    </svg>
    </body>
    </html>
    

    نتیجه کد بالا به این شکل است:

     HTML5-SVG

    برای درک  کد SVG بالا، بهتر است خودتان امتحان کنید.
    توجه داشته باشید که از فایرفاکس3.7 (Firefox) یا نسخه های بالاتراستفاه کنید، و از فعال بودن HTML5 در آن مطمئن شوید.  

     رسم چند ضلعی با استفاده از SVG در HTML5 :

    در زیر مثالی از کد درون خطی SVG در HTML5 را مشاهده می کنید که در آن با استفاه از تگ <polygon> یک چند گوشه (چندضلعی) رسم شده است:

    <!DOCTYPE html>
    <head>
    <title>SVG</title>
    <meta charset="utf-8" />
    </head>
    <body>
    <h2>HTML5 SVG Polygon</h2>
    <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
        <polygon  points="20,10 300,20, 170,50" fill="red" />
    </svg>
    </body>
    </html>
    

    نتیجه کد بالا به این شکل است:

     HTML5-SVG

    برای درک  کد SVG بالا، بهتر است خودتان امتحان کنید.
    توجه داشته باشید که از فایرفاکس3.7 (Firefox) یا نسخه های بالاتراستفاه کنید، و از فعال بودن HTML5 در آن مطمئن شوید.  

    رسم چند خطی با استفاده از SVG در HTML5 :

    در زیر مثالی از کد درون خطی SVG در HTML5 را مشاهده می کنید که در آن با استفاه از تگ <polyline> یک چند خطی رسم شده است:

    <!DOCTYPE html>
    <head>
    <title>SVG</title>
    <meta charset="utf-8" />
    </head>
    <body>
    <h2>HTML5 SVG Polyline</h2>
    <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
     <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />
    </svg>
    </body>
    </html>
    

     نتیجه کد بالا به این شکل است:

     HTML5-SVG

    برای درک  کد SVG بالا، بهتر است خودتان امتحان کنید.
    توجه داشته باشید که از فایرفاکس3.7 (Firefox) یا نسخه های بالاتراستفاه کنید، و از فعال بودن HTML5 در آن مطمئن شوید.  

    رسم گرادیان با استفاده از SVG در HTML5 :

    در زیر مثالی از کد درون خطی SVG در HTML5 را مشاهده می کنید که در آن با استفاه از تگ < ellipse> یک بیضی رسم شده و از تگ <radialGradient> برای ایجاد گرادیان (شیب رنگی) در بیضی استفاده شده است:

    مشابه این کد شما می توانید از تگ <linearGradient> برای ایجاد گرادیان خطی (شیب خطی) در SVG استفاده کنید.

    <!DOCTYPE html>
    <head>
    <title>SVG</title>
    <meta charset="utf-8" />
    </head>
    <body>
    <h2>HTML5 SVG Gradient Ellipse</h2>
    <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
       <defs>
          <radialGradient id="gradient" cx="50%" cy="50%" r="50%"
          fx="50%" fy="50%">
          <stop offset="0%" style="stop-color:rgb(200,200,200);
          stop-opacity:0"/>
          <stop offset="100%" style="stop-color:rgb(0,0,255);
          stop-opacity:1"/>
          </radialGradient>
       </defs>
       <ellipse cx="100" cy="50" rx="100" ry="50" 
          style="fill:url(#gradient)" />
    </svg>
    </body>
    </html>
    

     نتیجه کد بالا به این شکل است:

     HTML5-SVG

    در صورت استفاده از تگ <linearGradient> نتیجه به این شکل است :

     HTML5-SVG

    برای درک  کد SVG بالا، بهتر است خودتان امتحان کنید.
    توجه داشته باشید که از فایرفاکس3.7 (Firefox) یا نسخه های بالاتراستفاه کنید، و از فعال بودن HTML5 در آن مطمئن شوید.

     

    با تشکر از همراهی شما، از سایر آموزش های ما در وب استیودنت دیدن فرمایید.

  • وب فرم در Web Form 2.0) HTML5)

    وب فرم در Web Forms 2.0) HTML5)

     Web Form 2.0 در واقع نسخه گسترش یافته ویژگی های فرم در HTML4 است. عناصر و ویژگی های فرم که در HTML5ارائه شده ازلحاظ  نشانه گذاری یک درجه بالاتر از HTML4 . کارها در HTML4 نیازمند طراحی و برنامه نویسی زیاد و خسته کننده بود.

    عنصر  <input>در HTML4 :

    عنصر  <input>در HTML4  از صفت type برای مشخص کردن نوع داده استفاده می کند.
    در زیر لیستی از مقادیر صفت type را مشاهده می کنید:

    محتوای Type شرح عملکرد
    text یک فیلد ورودی متن معمولی ایجاد می کند.
    password یک فیلد ورودی متن برای اطلاعات حساس ایجاد می کند.
    checkbox در فرم یک چک باکس ایجاد می کند.
    radio در فرم دکمه های رادیویی ایجاد می کند.(برای زمانی که بخواهید کاربر فقط یک گزینه را انتخاب کند.)
    submit یک دکه submit برای ثبت و ارسال داده های فرم ایجاد می کند.
    file یک فایل دلخواه از نوع موردنظر(صفت accept) و با نام اختیاری ایجاد می کند.
    image برای قرار دادن یک عکس خاص به عنوان دکمه submit استفاده می شود.
    hidden زمانی کاربرد دارد که طراح بخواهد نگهداری، ارسال و یا انتقال اطلاعات را بدون اینکه کاربران محتوای آن را مشاهده کنند انجام دهد.
    select مقداری را تعیین می‌کند که در زمان بارگذاری صفحه، در فهرست انتخاب شده است.
    textarea برای ایجاد نواحی متنی چند خطی استفاده می شود
    button برای ایجاد یک دکمه که آغازگر یک رویداد باشد، کاربرد دارد.

     

    در پایین یک مثال ساده را مشاهده میکنید، که در آن از برچسب ها، دکمه های رادیویی و دکمه ارسال استفاده شده است:

    <form action="http://example.com/cgiscript.pl" method="post">
        <p>
        <label for="firstname">first name: </label>
                  <input type="text" id="firstname"><br />
        <label for="lastname">last name: </label>
                  <input type="text" id="lastname"><br />
        <label for="email">email: </label>
                  <input type="text" id="email"><br>
        <input type="radio" name="sex" value="male"> Male<br>
        <input type="radio" name="sex" value="female"> Female<br>
        <input type="submit" value="send"> <input type="reset">
        </p>
     </form>
    

     عنصر <input> در HTML5 :

    به غیر از موارد ذکر شده در بالا ،مقادیر جدیدی برای  صفت type در HTML5 معرفی شده، که در پایین لیست شده اند:

     

    محتوای Type شرح عملکرد
    datetime برای دریافت تاریخ و زمان از کاربر، بدون اطلاعات منطقه زمانی محلی کاربرد دارد.
    datetime-local برای دریافت تاریخ و زمان از کاربر، با اطلاعات منطقه زمانی محلی کاربرد دارد.
    date برای دریافت تاریخ از کاربر کاربرد دارد.
    month برای دریافت یک ماه از سال کاربرد دارد.
    week برای دریافت یک هفته خاص از سال کاربرد دارد.
    time برای دریافت زمان از کاربر کاربرد دارد.
    number برای دریافت اعداد از کاربر کاربرد دارد. برای مثال سن کاربر
    range همانند گزینه number می باشد اما خروجی از نظر ظاهری متفاوت است.
    email برای دریافت پست الکترونیکی از کاربر کاربرد دارد. در صورتی که کاربر در ورودی چیزی غیر از فرمت پست الکترونیکی وارد کند،آن را نپذیرفته و پیغام خطا می دهد.
    url برای دریافت آدرس اینترنتی url از کاربر کاربرد دارد. در صورتی که کاربر در ورودی چیزی غیر از فرمت آدرس اینترنتی وارد کند،آن را نپذیرفته و پیغام خطا می دهد.

     عنصر  <output>در HTML5 :

    در HTML5 عنصر جدیدی به نام  معرفی شده که برای  نمایش خروجی های مختلف حاصل از یک محاسبه کاربرد دارد، مانند خروجی حاصل از یک کد اسکریپت.
    شما می توانید از خاصیت for در عنصر <output> برای ایجاد ارتباط با سایر عناصربرای محاسبه استفاده کنید. ویژگی برای مشخص کردن یک رابطه بین عنصر خروجی و عناصر دیگر در سند که تحت تاثیر محاسبه .
    خاصیت for با لیستی از شناسه های عناصر دیگر که با فاصله از هم جدا می شوند مقدار دهی می شود.


    در زیر نمونه ای از عنصر  <output>در HTML5 را مشاهده می کنید: 

    <form action="action_page.asp"
    oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    0
    <input type="range"  id="a" name="a" value="50">
    100 +
    <input type="number" id="b" name="b" value="50">
    =
    <output name="x" for="a b"></output>
    <br><br>
    <input type="submit">
    </form>
    

     صفت placeholder در HTML5 :

    این صفت در داخل فیلد مورد نظر یک عبارت را به صورت کم رنگ ایجاد می کند که با فوکوس بر روی آن از بین رفته و فیلد خالی می شود. صفت  placeholderدر عناصر <input>  و <textarea>  کاربرد دارد.

    در زیر نمونه ای از صفت placeholder در HTML5  را مشاهده می کنید:

    <input type="text" name="search" placeholder="search the web"/>

     این صفت تنها توسط آخرین نسخه موزیلا (Mozila)، سافاری (Safari)  و گوگل کروم  (Google Chrome) پشتیبانی می شود.


    صفت  autofocus  در HTML5 :

    صفت  autofocus  یک ویژگی جدید درHTML5  است که با عث می شود بعد از لود شدن صفحه بر روی فرم موردنظر تمرکز (فوکوس) شود.
    در زیر نمونه ای از صفت  autofocus  در HTML5 را مشاهده می کنید:

    <input type="text" name="search" autofocus/>

     این صفت تنها توسط آخرین نسخه موزیلا (Mozila)، سافاری (Safari)  و گوگل کروم  (Google Chrome) پشتیبانی می شود.

     

    صفت  required  در HTML5 :

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

    <input type="text" name="search" required/>

     این صفت تنها توسط آخرین نسخه موزیلا (Mozila)، سافاری (Safari)  و گوگل کروم  (Google Chrome) پشتیبانی می شود.

     

    با تشکر از همراهی شما، از سایر آموزش های ما در وب استیودنت دیدن فرمایید.

  • رویدادها در HTML5 Events) HTML5)

    رویداد ها (Events) در HTML5

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

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

    در زیر لیستی از صفات رویداد جهانی در HTML را مشاهده می نمایید:

    (موارد ستاره دار"*" خواص رویداد جدید در HTML5 می باشند.)

    خواص رویداد درپنجره مرورگر (Window Events):

    صفات یا خواص زیر داخل تگ <body> اعمال میشوند:

    صفت ها مقادیر شرح عملکرد
    onafterprint* script اسکریپت پس از چاپ یک سند اجرا می شود.
    onbeforeprint* script اسکریپت قبل از چاپ یک سند اجرا می شود.
    onbeforeunload* script اسکریپت در صورت لود نشدن سند اجرا می شود.
    onerror* script اسکریپت در صورتی که خطایی رخ دهد اجرا می شود.
    onhashchange* script اسکریپت در صورتی که تغییری در url سند اتفاق بیافتد، اجرا می شود.
    onload script اسکریپت پس از اتمام لود صفحه اجرا می شود.
    onmessage* script اسکریپت هنگامی که پیام دریافت شده است،اجرا می شود.
    onoffline* script اسکریپت زمانی اجرا می شود که مرورگر کار خود را به صورت آفلاین آغاز می کند.
    ononline* script اسکریپت زمانی اجرا می شود که مرورگر کار خود را به صورت آنلاین آغاز می کند.
    onpagehide* script اسکریپت زمانی اجرا می شود، که پنجره سند مخفی شود.
    onpageshow* script اسکریپت زمانی اجرا می شود، که پنجره سند نمایان شود.
    onpopstate* script اسکریپت زمانی که تغییراتی در history پنجره مرورگر رخ دهد، اجرا می شود.
    onresize* script اسکریپت زمانی که اندازه پنجره مرورگرتغییر کند، اجرا می شود.
    onstorage* script اسکریپت زمانی اجرا می شود که صفحه وب لود و بروز شده است.
    onunload script اسکریپت در صورت لود نشدن صفحه یا زمانی که پنجره مرورگر توسط کاربر بسته شود اجرا می شود.

    خواص رویداد درفرم (Form Events):

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

    صفت ها مقادیر شرح عملکرد
    onblur script اسکریپت زمانی که تمرکز بر عنصر از دست برود، اجرا می شود.
    onchange script اسکریپت زمانی که مقدار عنصر تغییر کند، اجرا می شود.
    oncontextmenu* script اسکریپت زمانی اجرا می شود که یک منوی context menu اجرا شود.
    onfocus script اسکریپت زمانی اجرا می شود که بر روی یک عنصر تمرکز شود.
    oninput* script اسکریپت زمانی اجرا می شود که عنصر یک مقدار ورودی از کاربر بگیرد.
    oninvalid* script اسکریپت زمانی اجرا می شود که یک عنصر نا معتبر باشد.
    onreset* script اسکریپت زمانی اجرا می شود که بر روی دکمه ریست فرم کلیک شود.
    onsearch script اسکریپت زمانی اجرا می شود که کاربر در فیلد جستجو چیزی بنویسد.
    onselect script اسکریپت زمانی اجرا می شود که یک عنصر انتخاب شده است.
    onsubmit script اسکریپت زمانی اجرا می شود که یک فرم ثبت شود.

    خواص رویداد در صفحه کلید (KeyBoard Events) :

    صفت ها مقادیر شرح عملکرد
    onkeydown script اسکریپت زمانی اجرا می شود که کاربر یک دکمه را فشار دهد.
    onkeypress script اسکریپت زمانی اجرا می شود که کاربر یک دکمه را فشار داده و رها کند.
    onkeyup script اسکریپت زمانی اجرا می شود که کاربر یک دکمه را رها کند.

    خواص رویداد در ماوس (Mouse Events) :

    صفت ها مقادیر شرح عملکرد
    onclick script اسکریپت زمانی ماوس کلیک شود، اجرا می شود.
    ondblclick script اسکریپت زمانی ماوس دابل کلیک شود، اجرا می شود.
    ondrag* script اسکریپت زمانی که عنصری درگ شود، اجرا می شود.
    ondragend* script اسکریپت زمانی که درگ کردن عنصری پایان یابد، اجرا می شود.
    ondragenter* script اسکریپت زمانی که عنصر به یک مقصد معتبر درگ شود، اجرا می شود.
    ondragleave* script اسکریپت زمانی که عنصر یک مقصد معتبر را ترک کند، اجرا می شود.
    ondragover* script اسکریپت زمانی که یک عنصر روی یک مقصد معتبر درگ شود، اجرا می شود.
    ondragstart* script اسکریپت زمانی که درگ کردن عنصری آغاز شود، اجرا می شود.
    ondrop* script اسکریپت زمانی که عنصر درگ شده رها شود، اجرا می شود.
    onmousedown script اسکریپت زمانی که دکمه ماوس به پایین فشار داده شود، اجرا می شود.
    onmousemove script اسکریپت زمانی که نشانگرماوس حرکت کند، اجرا می شود.
    onmouseout script اسکریپت زمانی که نشانگرماوس خارج از محیط یک عنصر حرکت کند، اجرا می شود.
    onmouseover script اسکریپت زمانی که نشانگرماوس در محیط یک عنصر حرکت کند، اجرا می شود.
    onmouseup script اسکریپت زمانی که دکمه ماوس رها شود، اجرا می شود.
    onmousewheel script اسکریپت زمانی که چرخ ماوس حرکت کند، اجرا می شود.
    onscroll* script اسکریپت زمانی که اسکرول بار صفحه پیمایش شود، اجرا می شود.
    onwheel* script اسکریپت زمانی که چرخ ماوس در محیط یک عنصر به بالا و پایین حرکت کند، اجرا می شود.

    خواص رویداد در کلیپ برد (Clipboard Events) :

    صفت ها مقادیر شرح عملکرد
    oncopy script اسکریپت زمانی که کاربر محتوای یک عنصر را کپی کند، اجرا می شود.
    oncut script اسکریپت زمانی که کاربر محتوای یک عنصر را برش یا cut دهد، اجرا می شود.
    onpaste script اسکریپت زمانی که کاربر محتوایی را دریک عنصر paste کند، اجرا می شود.

    خواص رویداد رسانه ای (Media Events) :

    صفت ها مقادیر شرح عملکرد
    onabort script اسکریپت زمانی که رویداد abort (لغو) رخ دهد، اجرا می شود.
    oncanplay* script اسکریپت زمانی اجرا می شود ،که یک رسانه آماده اجرا باشد، (هنگامی که بافر به اندازه شروع انجام شده باشد).
    oncanplaythrough* script اسکریپت زمانی اجرا می شود که یک رسانه بدون اینکه برای بافر مکث کند، می تواند تا انتها اجرا شود.
    oncuechange* script اسکریپت زمانی تغییرات نشانه در یک عنصر رخ دهد ، اجرا می شود.
    ondurationchange* script اسکریپت زمانی که طول رسانه تغییر کند، اجرا می شود.
    onemptied* script اسکریپت زمانی اجرا می شود که اتفاق بدی بیافتد و فایل در دسترس نباشد.(مانند قطع اتصال غیر منتظره)
    onended* script اسکریپت زمانی که اجرای یک رسانه به پایان برسد، اجرا می شود.( یک رویداد مفید برای زمانی که میخواهیم پیامی مانند "با تشکر از شما برای گوش فرا دادن به این رسانه" را نمایش دهیم.)
    onerror* script اسکریپت زمانی که خطایی در هنگام بارگزاری فایل رخ دهد، اجرا می شود.
    onloadeddata* script اسکریپت زمانی که اطلاعات رسانه بارگزاری شده باشد، اجرا می شود.
    onloadedmetadata* script اسکریپت زمانی که اطلاعات مربوط به مدت زمان و دیگر اطلاعات رسانه (metadata) بارگزاری شده باشد، اجرا می شود.
    onloadstart* script اسکریپت زمانی که مرورگر بارگزاری اطلاعات رسانه را آغاز کرده باشد، اجرا می شود.(قبل از بارگذاری هرچیز دیگر)
    onpause* script اسکریپت زمانی اجرا می شود که یک رسانه pause شود.( چه بوسیله کاربر و چه از طریق برنامه نویسی)
    onplay* script اسکریپت زمانی اجرا می شود که یک رسانه آماده شروع می باشد.
    onplaying* script اسکریپت زمانی اجرا می شود که یک رسانه در حال اجرا می باشد.
    onprogress* script اسکریپت زمانی اجرا می شود مرورگر در روند دریافت رسانه می باشد.
    onratechange* script اسکریپت زمانی که اندازه زمان اجرا ی یک رسانه تغییر کرده باشد، اجرا می شود. (مانند زمانی که کاربر حرکت آهسته یا دور تند را انتخاب می کند.)
    onseeked* script اسکریپت زمانی که خاصیت seeking عنصر media مقدار false دارد و پیمایش تمام شده است اجرا می شود.
    onseeking* script اسکریپت زمانی که خاصیت seeking عنصر media مقدار true دارد و پیمایش آغاز شده است اجرا می شود.
    onstalled* script اسکریپت زمانی اجرا می شود، که مرورگر به هردلیلی قادر به گرفت یک رسانه از منبع نباشد.
    onsuspend* script اسکریپت زمانی اجرا می شود، که گرفتن رسانه توسط مرورگر به هردلیلی قبل از کامل شدن متوقف شود.
    ontimeupdate* script اسکریپت زمانی اجرا می شود، که موقعیت اجرایی رسانه تغییر کند. (مانند زمانی که کاربر رسانه را جلو بزند به موقعیتی دیگر)
    onvolumechange* script اسکریپت زمانی اجرا می شود، که صدای رسانه تغییر کند یا قطع شود.
    onwaiting* script اسکریپت زمانی اجرا می شود، که رسانه متوقف شود اما امکان resume وجود داشته باشد.

    خواص سایر رویداد ها (Misc Events) :

    صفت ها مقادیر شرح عملکرد
    onerror* script اسکریپت زمانی اجرا می شود، که که یک خطا رخ دهد.
    onshow* script اسکریپت زمانی اجرا می شود، که یک عنصر menu به عنوان یک منوی زمینه (context menu) نشان داده شود.
    ontoggle* script اسکریپت زمانی اجرا می شود، که کاربر عنصر
    را باز و بسته کند.

     

    با تشکر از همراهی شما، از سایر آموزش های ما در وب استیودنت دیدن فرمایید.

  • آموزش صفت ها (Attributes) در HTML5

    صفت ها (Attributes ) در HTML5 :

    عناصر ممکن است دارای خواص مختلفی باشد که شما می توانید با صفت ها در HTML5 این خواص را تنظیم کنید.

    برخی از صفت ها در سطح عمومی تعریف شده و می توانید بر روی تمام عناصراستفاده کنید.

     سایر صفت ها که به صورت ویژه تعریف شده ، تنها برای یک عنصر استفاده می شود.

    صفت ها یا همان خاصیت ها در HTML5 از یک نام و یک مقدار تشکیل می شود، که در مثال زیر نمونه آن را مشاهده می کنید.

    در زیر نمونه ای از صفت ها در HTML5 قرار دارد ، که در آن عنصر div با صفت class و مقدار صفت example را مشاهده می کنید .

    <div class=\"example\">...</div>

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

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

    صفات اصلی  HTML5 :


    این صفت ها توسط تمام عناصر (تگ ها) درHTML5 پشتیبانی می شوند.به غیر از عناصر <head>  ،<html>  ،<meta> ،   <param>  ،<script>  ،<style>  ، <base> و  <title> .

    صفت ها مقادیر شرح عملکرد
    class توسط کاربر برای طبقه بندی یک عنصر و مشخص کردن یک یا چند classname برای عنصر استفاده می شود.
    id توسط کاربر برای نسبت دادن یک شناسه یکتا به عنصر استفاده می شود.
    style شیوه نامه css مشخص کردن شیوه درون خطی برای یک عنصر یا نسبت دادن ویژگی های css به طور مستقیم استفتده می شود.
    title توسط کاربر برای افزودن اطلاعات بیشتر و عنوان ”Pop-up” استفاده می شود.

     

    صفات زبانی در HTML5 :

    این صفت ها توسط تمام عناصر (تگ ها) درHTML5 پشتیبانی می شوند.به غیر از عناصر <param>  ،<iframe>  ،<hr> ،<frameset>  ،<frame>  ،<br>  ،<base>  و <script> .

    صفت ها شرح عملکرد
    dir برای طبقه بندی یک عنصر و مشخص کردن یک یا چند classname برای عنصر استفاده می شود.
    lang برای نسبت دادن یک شناسه یکتا به عنصر استفاده می شود.

     

    صفات مربوط به صفحه کلید در HTML5 :

    صفت ها مقادیر شرح عملکرد
    accesskey توسط کاربر برای فعالسازی و دسترسی به عنصر یک کلید میانبر به آن اختصاص می دهد.
    tabindex تعداد پرش برای تعیین یک شماره پرش برای عنصر استفاده می شود.


    سایر صفات استاندارد در HTML5 :

    صفت ها مقادیر شرح عملکرد
    align right, left, center موقعیت عنصر را تعیین می کند.
    background آدرس تصویر یک تصویر در پس زمینه عنصر ایجاد می کند.
    bgcolor نام رنگ RGB، مقدار هگزادیسمال یک رنگ در پس زمینه عنصر ایجاد می کند.
    contenteditable true, false مشخص میکند که آیا کاربر اجازه ویرایش عنصر را دارد یا نه.
    contextmenu ID منو یک منو را برای عنصر تعیین می کند.
    data-XXXX توسط کاربر صفات سفارشی – نویسنده سند می توند صفات را خودش تعریف کند و باید با “data-” شروع شود.
    draggable true,false, auto مشخص میکند که آیا کاربر اجازه کشیدن عنصر را دارد یا نه.
    height مقدار عددی ارتفاع جداول ، تصاویر ، یا سلول های جدول را مشخص می کند.
    hidden hidden مشخص میکند که آیا عنصر قابل مشاهده باشد یا خیر.
    item لیست عناصر برای ایجاد گروهی از عناصر استفاده می شود.
    itemprop لیست آیتم ها برای ایجاد گروهی از آیتم ها استفاده می شود.
    spellcheck true, false مشخص می کند که آیا عمل بررسی واژه ها در عنصر مجاز است یا خیر.
    subject Id توسط کاربر آیتم مربوط به آن عنصر را مشخص می کند.
    valign top, middle, bottom موقعیت عمودی عنصر را تعیین می کند.
    width مقدارعددی عرض جداول ، تصاویر ، یا سلول های جدول را مشخص می کند.


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


    صفات سفارشی :

    یکی از ویژگی های جدید معرفی شده در HTML5 ایجاد عناصر داده سفارشی می باشد.
    یک عنصر داده سفارشی با data- شروع شده و به همراه نام موردنظر شما قرار میگیرد.
    در زیر نمونه ای ازیک  صفت سفارشی در HTML5 را مشاهده می کنید:

    <div class="example" data-subject="physics" data-level="complex">
    ...
    </div>
    

    در بالا دو صفت سفارشی معتبر در HTML5 با نام های  data-subject و data-level استفاده شده است.
    شما میتوانید مقادیر این صفت هارا همانند صفت های استاندارد توسط برنامه های کاربردی جاوا اسکریپت یا css دریافت کنید.

     

    با تشکر از همراهی شما، از سایر آموزش های ما در وب استیودنت دیدن فرمایید.

عضویت در وب استیودنت

در شبکه های اجتماعی همراه ما باشید

با ما در ارتباط باشید

سامانه پیامک: 50004657100

تلفن: 02122616859

دورنگار: 02189775650

ایمیل: info @ WebStudent.ir

تارنما: webstudent.ir

انجمن: forum.webstudent.ir

 

JoomShaper