آموزش قواعد نوشتاری (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>

 

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

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

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

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

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

تلفن: 02122616859

دورنگار: 02189775650

ایمیل: info @ WebStudent.ir

تارنما: webstudent.ir

انجمن: forum.webstudent.ir

 

JoomShaper