English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل تعلم HTML5 الأساسي

API HTML5

وسائط HTML5

صور HTML5

معايير كتابة الكود في HTML(5)

إليك قائمة بأكثر القواعد شيوعًا وأكثر استخدامًا في html، وتبعات كتابة جيدة تساعد في صيانة وتحديث الكود لاحقًا، وتحسين الكفاءة، ونأمل أن تكون مفيدة للجميع

قواعد كتابة HTML

معظم مطوري الويب يعلمون القليل عن قواعد كتابة HTML.

في الفترة من 2000 إلى 2010، انتقل العديد من مطوري الويب من HTML إلى XHTML.

يتبع المطورون المطورون قواعد كتابة جيدة باستخدام XHTML.

بالنسبة لـ HTML5، يجب أن نكون قد شكلنا قواعد كتابة جيدة، ويقدم هنا بعض التوصيات.

استخدام نوع المستند الصحيح

يتم تعريف إعلان نوع المستند في السطر الأول من مستند HTML:

<!DOCTYPE html>

إذا كنت ترغب في استخدام الحروف الصغيرة مثل العناصر الأخرى، يمكنك استخدام الكود التالي:

<!doctype html>

استخدام أسماء العناصر الصغيرة

يمكن استخدام الحروف الكبيرة والصغيرة في أسماء عناصر HTML5.

نوصي باستخدام الحروف الصغيرة:

  • النمط المختلط بين الحروف الكبيرة والصغيرة سيء للغاية.

  • يستخدم المطورون عادةً الخطوط الصغيرة (مثل XHTML).

  • يبدو النمط الصغير أكثر بروداً.

  • الخطوط الصغيرة سهلة الكتابة.

غير موصى به:

<SECTION>　
　　<p>هذا جملة.</p>
</SECTION>

سيء للغاية:

<Section>　
　　<p>هذا جملة.</p>
</SECTION>

التوصيات:

<section>　
　　<p>هذا جملة.</p>
</section>

إغلاق جميع العناصر HTML

في HTML5، ليس من الضروري إغلاق جميع العناصر (مثل عنصر <p>)، لكننا نوصي بإضافة علامة إغلاق لكل عنصر.

غير موصى به:

<section>
　　<p>هذا هو الجدول.
　　<p>هذا هو الجدول.
</section>

التوصيات:

<section>
　　<p>هذا جملة.</p>
　　<p>هذا جملة.</p>
</section>

إغلاق العناصر HTML الفارغة

في HTML5، لا يلزم إغلاق العناصر HTML الفارغة بالضرورة:

يمكننا كتابتها كما يلي:

<meta charset="utf-8">

يمكن كتابتها أيضًا كما يلي:

<meta charset="utf-8" />

في XHTML و XML، يجب استخدام السلاسل المائلة (/) بشكل إلزامي.

إذا كنت تتوقع استخدام برمجيات XML لموقعك، فإن هذا النمط جيد جدًا.

استخدام اسم الخصائص الصغيرة

سمات HTML5 تسمح باستخدام الحروف الكبيرة والصغيرة.

نوصي باستخدام اسم الخصائص الصغيرة:

  • استخدام الحروف الكبيرة والصغيرة في نفس الوقت ليس عادةً جيداً.

  • يستخدم المطورون عادةً الخطوط الصغيرة (مثل XHTML).

  • يبدو النمط الصغير أكثر بروداً.

  • الخطوط الصغيرة سهلة الكتابة.

غير موصى به:

<div CLASS="Style">

التوصيات:

<div class="style">

قيم الخاصية

يمكن ترك قيم الخاصية في HTML5 بدون أسلحة مزدوجة.

نوصي باستخدام الأسلحة المزدوجة لقيم الخاصية:

  • إذا كانت قيمة الخاصية تحتوي على فاصلة، يجب استخدام الأسلحة المزدوجة.

  • يُنصح بعدم استخدام الأسلوب المختلط، يُنصح بتنسيق متسق.

  • يسهل قراءة قيم الخاصية باستخدام الأسلحة المزدوجة.

تحتوي قيم الخاصية في هذا المثال على فاصلة، وليس هناك استخدام للأسلحة المزدوجة، لذا لا يمكنها العمل:

<table class=table striped>

استخدام الأسلحة المزدوجة هو صحيح:

<table class="table striped">

خصائص الصور

تستخدم عادة الخاصية 'alt' للصور. يمكن أن تحل محل الصورة عند عدم قدرتها على العرض.

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>موقع تعليم الأساسيات(oldtoolbag.com)</title>　
</head>
<body>
<img src="logo.png" alt="موقع تعليم الأساسيات">
</body>
</html>

حدد حجم الصورة بشكل جيد، مما يتيح تخصيص مساحة مسبقًا أثناء التحميل، مما يقلل من اللمعان.

<img src="logo.png" alt="موقع تعليم الأساسيات" style="width:128px;height:40px">

الفضاءات والعلامة '='

يمكن استخدام فاصلة بين العلامة '='.

<link rel="stylesheet" href="styles.css">

لكننا نوصي بعدم استخدام الفواصل العريضة:

<link rel="stylesheet" href="styles.css">

أتفادى طول السطر الواحد للكود.

استخدام محرر HTML يجعل الدوران على الكود غير مريح.

حاول أن تكون كل سطر من الكود أقل من 80 حرفًا.

السطور الفارغة والتباعد

لا تضيف سطورًا فارغة بدون سبب.

أضف سطرًا فارغًا لكل منطقة وظيفية لجعل القراءة أسهل.

استخدم تباعدين للاقتباس، لا ينصح باستخدامTAB.

لا تستخدم السطور العازلة والتباعد غير الضروري بين الكود القصير.

السطور العازلة والتباعد غير الضروري:

　　　　　　　　<body>
　　<h1>موقع تعليم الأساسيات(oldtoolbag.com)</h1>
　　<h2>HTML</h2>
　　<p>
　　　　موقع تعليم الأساسيات، تعلم الأساسيات هو الذي يجعلك تذهب أبعد。
　　　　موقع تعليم الأساسيات، تعلم الأساسيات هو الذي يجعلك تذهب أبعد。
　　　موقع تعليم الأساسيات، تعلم الأساسيات هو الذي يجعلك تذهب أبعد,
　　موقع تعليم الأساسيات، تعلم الأساسيات هو الذي يجعلك تذهب أبعد。
　　</p>
</body>

　 　التوصيات:

<body>
<h1>موقع تعليم الأساسيات(oldtoolbag.com)</h1>
<h2>HTML</h2>
<p>موقع تعليم الأساسيات، تعلم الأساسيات هو الذي يجعلك تذهب أبعد.</p>
موقع تعليم الأساسيات، تعلم الأساسيات هو الذي يجعلك تذهب أبعد。
موقع تعليم الأساسيات، تعلم الأساسيات هو الذي يجعلك تذهب أبعد。
موقع تعليم الأساسيات، تعلم الأساسيات هو الذي يجعلك تذهب أبعد.</p>
</body>

　 　مثال على الجدول:

<table>
　　<tr>
　　　　<th>الاسم</th>
　　　　<th>وصف</th>
　　　　</tr>
　　<tr>
　　　　<td>A</td>
　　　　<td>وصف A</td>
　　　　</tr>
　　<tr>
　　　　<td>B</td>
　　　　<td>وصف B</td>
　　</tr>
</table>

　 　مثال على الجداول:

<ol>
　　<li>PHP</li>
　　<li>JAVA</li>
　　<li>C++</li>
</ol>

هل يمكن تجاهل <html> و<body>؟

في HTML5 القياسية، يمكن تجاهل علامات <html> و<body>.

وثيقة HTML5 التالية صحيحة:

مثال:
<!DOCTYPE html>
<head>
　 <title>عنوان الصفحة</title>
</head>
<h1>هذا عنوان.</h1>
<p>هذا جملة.</p>

ليس من المستحب تجاهل علامات <html> و<body>.

عنصر <html> هو العنصر الجذر للوثيقة، ويُستخدم لوصف لغة الصفحة:

<!DOCTYPE html>
<html lang="zh-CN">

تحديد اللغة يسهل على مُقرئ الشاشة ومحركات البحث.

تجاهل <html> أو <body> في برامج DOM وXML قد يؤدي إلى انهيار.

تجاهل <body> في المتصفحات القديمة (IE9) قد يؤدي إلى خطأ.

هل يمكن تجاهل <head>؟

في HTML5 القياسية، يمكن تجاهل علامة <head>:

بالتأكيد، سيضيف المتصفح محتوى قبل <body> إلى <head> افتراضيًا: .

مثال
<!DOCTYPE html>
<html>
<title>عنوان الصفحة</title>
<body>
　　<h1>هذا عنوان.</h1>
　　<p>هذا جملة.</p>
</body>
</html>
　 ليس من المستحب تجاهل علامة <head> الآن.

بيانات العنوان

في HTML5، العنصر <title> هو مطلوب، واسم العنوان يصف موضوع الصفحة:

<title>موقع التعليم الأساسي</title>

العنوان واللغة يمكن أن يساعدان على فهم موضوع صفحتك من قبل محركات البحث بسرعة:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
　　<meta charset="UTF-8">
　　<title>موقع التعليم الأساسي</title>
</head>

تعليقات HTML

يمكن كتابة التعليقات في <!-- و -->:

<!-- التعليق -->

التعليقات الطويلة يمكن كتابتها على صفوف متعددة بين <!-- و -->:

<!--　
　　هذا هو تعليق طويل، هذا هو تعليق طويل.
　　تعليق طويل، هذا هو تعليق طويل.
　　هذا
　　تعليق طويل، هذا هو تعليق طويل. هذا
　　تعليق طويل.
-->

التعليقات الطويلة تبدأ بتنسيق مرتبط بثلاثة مسافات، مما يجعل القراءة أسهل.

الجداول النمطية

استخدام صيغة بسيطة للجداول النمطية (لا يتطلب خاصية type):

<link rel="stylesheet" href="styles.css">

القواعد القصيرة يمكن كتابتها في سطر واحد:

p.into {font-family: Verdana; font-size: 14px;}

يمكن كتابة القاعدة الطويلة على خطوط متعددة:

body {
　　background-color: yellow;
　　font-family: "Arial Black", Helvetica, sans-serif;
　　font-size: 14px;
　　color: red;
}

  • وضع الكسرة اليمنى والنص في نفس السطر.

  • إضافة فاصلة عديمة الفائدة بين الكسرة اليمنى والنص.

  • استخدام فاصلة عديمة الفائدة لتحديد الفراغ.

  • إضافة فاصلة عديمة الفائدة بين النقطة والقيمة.

  • إضافة فاصلة عديمة الفائدة بعد الكومياء والكومياء.

  • استخدام النقاط السفلية في نهاية كل خاصية وقيمة.

  • استخدام العلامات المزدوجة فقط عندما تحتوي قيمة الخاصية على فاصلة عديمة الفائدة.

  • وضع الكسرة اليمنى في سطر جديد.

  • السطر الواحد يمكن أن يحتوي على 80 حرفًا كحد أقصى.

إضافة فاصلة عديمة الفائدة بعد الفاصلة العبرية والكومياء.

تحميل JavaScript في HTML

استخدام الجملة البسيطة لتحميل ملفات السكربت الخارجية (لا يتطلب نوع الخاصية ):

<script src="myscript.js">

استخدام JavaScript للوصول إلى عناصر HTML

قد يؤدي تنسيق HTML سيء إلى ارتكاب أخطاء في تنفيذ JavaScript.

ستقوم هذه الجملتان JavaScript بتحقيق نتائج مختلفة:

مثال
var obj = getElementById("w3codebox")
var obj = getElementById("w3codebox")

في HTML، استخدم قواعد التسمية نفسها للمجالات JavaScript.

استخدام أسماء الملفات الصغيرة

معظم خوادم الويب (Centos, *Unix) حساسة من الحروف الكبيرة والصغيرة: لا يمكن الوصول إلى loading.jpg عبر Loading.jpg.

معظم خوادم الويب الأخرى (Windows, IIS) لا تتحسس من الحروف الكبيرة والصغيرة: يمكن الوصول إلى loading.jpg عبر Loading.jpg أو loading.jpg.

يجب أن تتحمل أسلوباً موحداً، ونحن نوصي باستخدام أسماء الملفات الصغيرة.

التوقيع الملفات

التوقيع الملفات HTML يمكن أن يكون .html (أو .htm).

التوقيع الملفات CSS هو .css.

التوقيع الملفات JavaScript هو .js.

الفرق بين .htm و .html

ملفات التوقيع .htm و .html لا يوجد بينهما أي فرق الأساسي. المتصفح والخادم الويب سيقومان بمعالجتهما كملفات HTML.

الفرق يكمن في:}

يُطبق .htm في أنظمة DOS القديمة، والأن يمكن أن يكون لديها فقط ثلاثة أحرف.

في نظام Unix لا توجد قيود خاصة على التوقيع، عادة ما يستخدم .html.

الفرق التقني

إذا لم يتم تحديد اسم الملف في URL (مثل https://ar.oldtoolbag.com/html/), سيقوم الخادم بإرجاع الاسم الافتراضي للملف. عادة يكون الاسم الافتراضي هو index.html, index.htm، default.html، و default.htm.

إذا لم يتم تكوين "index.html" كملف افتراضي في الخادم، يجب أن تُسمى الملف "index.html" وليس "index.htm".

لكن، عادة يمكن للخادم تعيين عدة ملفات افتراضية، يمكنك تعيين اسم الملف الافتراضي حسب الحاجة.

على أي حال، الملفات الكاملة من HTML تحمل امتداد ".html".

API تاريخ التصفح في HTML5WebSocket في HTML5