الكورس

Advertisements

HTML5 Syntax


تحتوي لغة HTML 5 على بنية HTML مخصصة متوافقة مع مستندات HTML 4 و XHTML1 المنشورة على الويب ، ولكنها غير متوافقة مع ميزات SGML الأكثر سرية في HTML 4.

لا يحتوي HTML5 على نفس قواعد بناء الجملة مثل XHTML،  يأتي HTML5 بمرونة كبيرة وهو يدعم الميزات التالية:

  • إغلاق العناصر الفارغة اختياري.
  • أسماء العلامات أو الوسوم بالأحرف الـ Capital.
  • الاقتباسات اختيارية للسمات.
  • قيم السمات اختيارية.

 


 

عناصر HTML5

 

يتم ترميز عناصر HTML5 باستخدام علامات البداية وعلامات النهاية، يتم تحديد العلامات باستخدام أقواس زاوية مع وجود اسم العلامة بينهما (<إسم العنصر>).

 

صورة توضيحية:
html element
أسماء عناصر HTML5 غير حساسة لحالة الأحرف ويمكن كتابتها كلها بأحرف كبيرة أو مختلطة ، على الرغم من أن الاصطلاح الأكثر شيوعًا هو الالتزام بالأحرف الصغيرة.

 

السمات فى HTML5

 

قد تحتوي العناصر على سمات تُستخدم لتعيين خصائص مختلفة للعنصر.

يتم تحديد بعض السمات بشكل عام ويمكن استخدامها على أي عنصر ، بينما يتم تحديد سمات أخرى لعناصر محددة فقط.

جميع السمات لها اسم وقيمة، كالتالى:

<div class="example"></div>
<div id="example"></div>
سمات HTML5 غير حساسة لحالة الأحرف ويمكن كتابتها بأحرف capital أو small أو مختلطة، لكن من الأفضل الالتزام بالأحرف الصغيرة.
لا يجوز تحديد السمات إلا ضمن علامات البداية ويجب عدم استخدامها مطلقًا في علامات النهاية.

 

مثال على السمات

 

من الشائع إضافة سمة نوع بقيمة “text/javascript” إلى عناصر الـ script و “text/css” إلى عناصر الـ link كالتالى:

<!-- <script> tag -->
<script src="bootstrap.js" type="text/javascript"></script> 
<!-- <link> tag -->
<link rel="stylesheet" type="text/css" href="bootstrap.css">

فى هذا الإصدار يمكنك حذف هذه السمة، كالتالى:

<!-- <script> tag -->
<script src="bootstrap.js"></script> 
<!-- <link> tag -->
<link rel="stylesheet" href="bootstrap.css">

 

ملاحظات

 

1. فى اصدار HTML5 يمكنك كتابة الكود كالتالى:

<!-- Example 1 -->
<div class="example" 
     id="exm" 
     data-name="Hamed">Hello World!</div>

<!-- Example 1 -->
<input type="text"
       name="username"
       value="username"
       id="username"
       class="input-control"
       placeholder="Your username">

2. يمكنك إضافة أو حذف علامة (/) من الوسوم التى لا تتكون من فتحة وقفلة وسم، كالتالى:

<meta charset="utf-8">

أو :

<meta charset="utf-8"/>

 

DOCTYPE

 

DOCTYPE عبارة عن تعليمات لمتصفح الويب حول إصدار لغة الترميز التي تتم كتابة صفحة الويب بها.

كانت DOCTYPEs في الإصدارات الأقدم من HTML أطول لأن لغة HTML كانت مبنية على SGML وبالتالي تتطلب مرجعًا إلى DTD.

 

يستخدم مطوري HTML5 بناء جملة بسيطًا لتحديد DOCTYPE، كالتالى:

<!DOCTYPE html>
يجب إضافة بيان نوع المستند عند إنشاء مستند HTML.

 

يمكنك التعرف على الـ DOCTYPEs بالتفصيل فى هذا الفصل HTML DOCTYPE.


 

ترميز الأحرف Character Encoding

 

يمكن لمطورى HTML5 استخدام بناء جملة بسيط لتحديد تشفير الأحرف، كالتالى:

<meta charset="UTF-8">

💡 UTF-8 هو ترميز أحرف متغير العرض يغطي تقريبًا جميع الأحرف والرموز في العالم.

 

يمكنك التعرف على الـ Character Encoding بالتفصيل فى هذا الفصلHTML  Character Encoding.

 



الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!

Advertisements