توثيق HTML

دليل شامل للغة ترميز النص التشعبي بالعربية

مقدمة الأساسيات العناصر النماذج

مقدمة إلى HTML

HTML (Hypertext Markup Language) هي لغة الترميز القياسية لإنشاء صفحات الويب. إنها تصف بنية صفحة الويب وتشكل العمود الفقري لجميع مواقع الويب.

ملاحظة هامة:

HTML ليست لغة برمجة، بل هي لغة ترميز تستخدم "الوسوم" لتحديد كيفية عرض المحتوى في متصفح الويب.

مع HTML، يمكنك إنشاء صفحات ويب منظمة تحتوي على:

  • نصوص وعناوين وفقرات
  • روابط لصفحات أخرى
  • صور ورسومات
  • جداول وقوائم
  • نماذج للمدخلات
  • عناصر الوسائط المتعددة (فيديو، صوت)

إصدارات HTML

مرت HTML بالعديد من الإصدارات منذ إنشائها. الإصدار الحالي هو HTML5، والذي أضاف العديد من الميزات الجديدة والتحسينات مقارنة بالإصدارات السابقة.

الإصدار سنة الإصدار المميزات الرئيسية
HTML 1991 الإصدار الأول
HTML 2.0 1995 أول معيار رسمي لـ HTML
HTML 3.2 1997 دعم الجداول والنصوص المنسقة
HTML 4.01 1999 دعم CSS والجافا سكريبت
XHTML 2000 HTML بقواعد XML الصارمة
HTML5 2014 عناصر دلالية جديدة، دعم الوسائط المتعددة بشكل أصلي، واجهات برمجة جديدة

أساسيات HTML

تتكون HTML من سلسلة من العناصر Elements، وكل عنصر يستخدم وسوم Tags لتحديد بداية ونهاية المحتوى.

بنية العنصر في HTML

يتكون عنصر HTML النموذجي من:

  • وسم البداية (Opening tag): يتكون من اسم العنصر محاط بـ < و >
  • المحتوى (Content): النص أو العناصر الأخرى داخل العنصر
  • وسم النهاية (Closing tag): يشبه وسم البداية ولكن يحتوي على / قبل اسم العنصر

هذه فقرة نصية.

<p>هذه فقرة نصية.</p>

العناصر الفارغة (Empty Elements)

بعض عناصر HTML لا تحتوي على محتوى وليس لها وسم نهاية، وتسمى العناصر الفارغة.

<hr>

سمات العناصر (Attributes)

سمات HTML تقدم معلومات إضافية عن العناصر وتكون دائمًا في وسم البداية.

زيارة مثال 
<a href="https://www.example.com" target="_blank">زيارة مثال</a>

في المثال أعلاه، href و target هما سمات لعنصر الرابط.

هيكل مستند HTML

يتكون مستند HTML الأساسي من العناصر التالية:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عنوان الصفحة</title>
</head>
<body>
    <h1>هذا عنوان رئيسي</h1>
    <p>هذه فقرة في مستند HTML.</p>
</body>
</html>

!DOCTYPE

إعلان نوع المستند، ويخبر المتصفح عن إصدار HTML المستخدم. في HTML5، يكون بسيطًا كالتالي:

<!DOCTYPE html>

يحتوي على معلومات وصفية (metadata) عن الصفحة، ولا يتم عرض محتوياته في المتصفح:

  • <title>: عنوان الصفحة الذي يظهر في شريط العنوان بالمتصفح
  • <meta>: معلومات وصفية مثل الترميز والوصف والكلمات المفتاحية
  • <link>: لربط الصفحة بملفات خارجية مثل CSS
  • <script>: لإضافة كود JavaScript
  • <style>: لإضافة أنماط CSS داخلية

عنصر body

يحتوي على جميع المحتويات المرئية للصفحة مثل النصوص والصور والروابط والجداول وغيرها.

العناوين (Headings)

HTML توفر ستة مستويات من العناوين: من <h1> (الأكثر أهمية) إلى <h6> (الأقل أهمية).

عنوان من المستوى الأول

عنوان من المستوى الثاني

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

عنوان من المستوى الرابع

عنوان من المستوى الخامس
عنوان من المستوى السادس
<h1>عنوان من المستوى الأول</h1>
<h2>عنوان من المستوى الثاني</h2>
<h3>عنوان من المستوى الثالث</h3>
<h4>عنوان من المستوى الرابع</h4>
<h5>عنوان من المستوى الخامس</h5>
<h6>عنوان من المستوى السادس</h6>
نصيحة:

استخدم العناوين بشكل هرمي وصحيح، حيث يفضل أن يكون هناك عنوان واحد من المستوى الأول <h1> في الصفحة، ويليه العناوين الأخرى بشكل متسلسل. هذا يساعد في تحسين إمكانية الوصول وتحسين محركات البحث (SEO).

الفقرات (Paragraphs)

تُستخدم عناصر الفقرة <p> لإنشاء مقاطع نصية منفصلة في صفحة الويب. المتصفحات تُضيف تلقائيًا مسافة بيضاء (هامش) قبل وبعد كل فقرة.

هذه هي الفقرة الأولى. تحتوي على بعض النص الذي سيتم عرضه في متصفح الويب.

هذه هي الفقرة الثانية. لاحظ المسافة البيضاء بين الفقرات.

<p>هذه هي الفقرة الأولى. تحتوي على بعض النص الذي سيتم عرضه في متصفح الويب.</p>
<p>هذه هي الفقرة الثانية. لاحظ المسافة البيضاء بين الفقرات.</p>

تنسيق النص

يمكنك استخدام عناصر HTML التالية لتنسيق النص داخل الفقرات:

هذا نص غامق، وهذا نص مائل.

هذا نص مميز، وهذا نص صغير.

هذا نص مرتفع وهذا نص منخفض.

<p>هذا نص <strong>غامق</strong>، وهذا نص <em>مائل</em>.</p>
<p>هذا نص <mark>مميز</mark>، وهذا نص <small>صغير</small>.</p>
<p>هذا نص <sup>مرتفع</sup> وهذا نص <sub>منخفض</sub>.</p>

فواصل الأسطر

لإدراج فاصل سطر داخل نفس الفقرة، استخدم عنصر <br>:

هذا هو السطر الأول.
وهذا هو السطر الثاني داخل نفس الفقرة.

<p>هذا هو السطر الأول.<br>وهذا هو السطر الثاني داخل نفس الفقرة.</p>

الصور (Images)

تُضاف الصور إلى صفحات HTML باستخدام عنصر <img>. هذا عنصر فارغ (بدون وسم إغلاق) ويتطلب سمتين أساسيتين: src و alt.

صورة توضيحية 
<img src="https://via.placeholder.com/300x150" alt="صورة توضيحية" width="300" height="150">

سمات الصورة المهمة

السمة الوصف
src مسار الصورة (URL أو مسار نسبي)
alt نص بديل يظهر إذا لم تتمكن الصورة من العرض أو لأغراض إمكانية الوصول
width عرض الصورة بالبكسل
height ارتفاع الصورة بالبكسل
loading يمكن تعيينها إلى lazy لتحميل الصورة عند الحاجة

صور مع روابط

يمكنك تحويل الصورة إلى رابط قابل للنقر بوضعها داخل عنصر <a>:

صورة قابلة للنقر 
<a href="https://example.com">
    <img src="https://via.placeholder.com/200x100" alt="صورة قابلة للنقر" width="200" height="100">
</a>
افضل الممارسات:

دائماً قم بتوفير سمة alt لوصف الصورة. هذا مهم للمستخدمين ذوي الإعاقة البصرية الذين يستخدمون قارئات الشاشة، وأيضًا في حالة فشل تحميل الصورة.

القوائم (Lists)

HTML توفر ثلاثة أنواع من القوائم: القوائم غير المرتبة، القوائم المرتبة، وقوائم التعريف.

القوائم غير المرتبة (Unordered Lists)

تستخدم لقوائم البنود التي لا يهم ترتيبها. كل بند يبدأ بعلامة نقطية (bullet).

  • عنصر أول
  • عنصر ثاني
  • عنصر ثالث
<ul>
    <li>عنصر أول</li>
    <li>عنصر ثاني</li>
    <li>عنصر ثالث</li>
</ul>

القوائم المرتبة (Ordered Lists)

تستخدم للقوائم التي يكون لترتيبها أهمية. تظهر البنود مرقمة تلقائيًا.

  1. الخطوة الأولى
  2. الخطوة الثانية
  3. الخطوة الثالثة
<ol>
    <li>الخطوة الأولى</li>
    <li>الخطوة الثانية</li>
    <li>الخطوة الثالثة</li>
</ol>

قوائم التعريف (Definition Lists)

تستخدم لعرض مصطلحات وتعريفاتها.

HTML
لغة ترميز النص التشعبي.
CSS
أوراق الأنماط المتتالية.
<dl>
    <dt>HTML</dt>
    <dd>لغة ترميز النص التشعبي.</dd>
    <dt>CSS</dt>
    <dd>أوراق الأنماط المتتالية.</dd>
</dl>

القوائم المتداخلة

يمكنك تداخل القوائم داخل بعضها البعض:

  • العنصر الأول
  • العنصر الثاني
    • عنصر فرعي 1
    • عنصر فرعي 2
  • العنصر الثالث
<ul>
    <li>العنصر الأول</li>
    <li>العنصر الثاني
        <ul>
            <li>عنصر فرعي 1</li>
            <li>عنصر فرعي 2</li>
        </ul>
    </li>
    <li>العنصر الثالث</li>
</ul>

الجداول (Tables)

تستخدم الجداول في HTML لعرض البيانات بشكل منظم في صفوف وأعمدة.

الاسم العمر البلد
أحمد 30 مصر
فاطمة 25 السعودية 
<table>
    <thead>
        <tr>
            <th>الاسم</th>
            <th>العمر</th>
            <th>البلد</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>أحمد</td>
            <td>30</td>
            <td>مصر</td>
        </tr>
        <tr>
            <td>فاطمة</td>
            <td>25</td>
            <td>السعودية</td>
        </tr>
    </tbody>
</table>

عناصر الجدول

  • <table>: يحدد الجدول
  • <thead>: يحتوي على صفوف رأس الجدول
  • <tbody>: يحتوي على الصفوف الرئيسية للجدول
  • <tfoot>: يحتوي على صفوف تذييل الجدول
  • <tr>: يمثل صف في الجدول
  • <th>: خلية عنوان في الجدول
  • <td>: خلية بيانات في الجدول
  • <caption>: عنوان للجدول

دمج الخلايا

يمكن دمج الخلايا رأسيًا باستخدام rowspan وأفقيًا باستخدام colspan:

الاسم الاتصال
محمد البريد الإلكتروني [email protected]
الهاتف 123456789 
<table>
    <tr>
        <th>الاسم</th>
        <th colspan="2">الاتصال</th>
    </tr>
    <tr>
        <td rowspan="2">محمد</td>
        <td>البريد الإلكتروني</td>
        <td>[email protected]</td>
    </tr>
    <tr>
        <td>الهاتف</td>
        <td>123456789</td>
    </tr>
</table>

النماذج (Forms)

تستخدم النماذج في HTML لجمع بيانات المستخدم. يتم إنشاء النموذج باستخدام عنصر <form> ويمكن أن يحتوي على أنواع مختلفة من عناصر الإدخال.

<form>
    <div>
        <label for="name">الاسم:</label>
        <input type="text" id="name" name="name">
    </div>
    <div>
        <label for="email">البريد الإلكتروني:</label>
        <input type="email" id="email" name="email">
    </div>
    <div>
        <label for="message">الرسالة:</label>
        <textarea id="message" name="message" rows="4"></textarea>
    </div>
    <div>
        <button type="submit">إرسال</button>
    </div>
</form>

أنواع حقول الإدخال المختلفة

يوفر HTML مجموعة متنوعة من أنواع حقول الإدخال لتناسب مختلف أنواع البيانات:

النوع الاستخدام مثال
text نص قصير على سطر واحد <input type="text">
password حقل كلمة مرور (يخفي النص) <input type="password">
email عنوان بريد إلكتروني <input type="email">
number قيمة رقمية <input type="number">
tel رقم هاتف <input type="tel">
date تاريخ <input type="date">
time وقت <input type="time">
color منتقي لون <input type="color">
radio اختيار واحد من عدة خيارات <input type="radio">
checkbox تحديد عدة خيارات <input type="checkbox">
file تحميل ملف <input type="file">
range شريط تمرير لاختيار قيمة ضمن نطاق <input type="range">
submit زر إرسال النموذج <input type="submit" value="إرسال">
reset زر إعادة تعيين النموذج <input type="reset" value="مسح">

قوائم الاختيار (Select)

تُستخدم قوائم الاختيار لإنشاء قائمة منسدلة مع خيارات متعددة:

<select name="country">
    <option value="" disabled selected>اختر البلد</option>
    <option value="eg">مصر</option>
    <option value="sa">السعودية</option>
    <option value="ae">الإمارات</option>
    <option value="jo">الأردن</option>
</select>

أزرار الاختيار (Radio Buttons)

تسمح للمستخدم باختيار خيار واحد فقط من مجموعة:

<div>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">ذكر</label>
</div>
<div>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">أنثى</label>
</div>

خانات الاختيار (Checkboxes)

تسمح للمستخدم باختيار عدة خيارات:

<div>
    <input type="checkbox" id="hobby1" name="hobbies[]" value="reading">
    <label for="hobby1">القراءة</label>
</div>
<div>
    <input type="checkbox" id="hobby2" name="hobbies[]" value="sports">
    <label for="hobby2">الرياضة</label>
</div>
<div>
    <input type="checkbox" id="hobby3" name="hobbies[]" value="music">
    <label for="hobby3">الموسيقى</label>
</div>

سمات النموذج المهمة

هناك بعض السمات المهمة التي تحدد كيفية عمل النموذج:

السمة الوصف مثال
action العنوان URL الذي سيتم إرسال بيانات النموذج إليه <form action="process.php">
method طريقة إرسال البيانات (GET أو POST) <form method="post">
enctype نوع ترميز البيانات عند الإرسال، ضروري مع تحميل الملفات <form enctype="multipart/form-data">
target أين يتم عرض الاستجابة <form target="_blank">

التحقق من صحة المدخلات

يوفر HTML5 سمات مدمجة للتحقق من صحة المدخلات:

<form>
    <div>
        <label for="username">اسم المستخدم (مطلوب):</label>
        <input type="text" id="username" name="username" required>
    </div>
    <div>
        <label for="user-email">البريد الإلكتروني (بصيغة صحيحة):</label>
        <input type="email" id="user-email" name="email">
    </div>
    <div>
        <label for="user-age">العمر (بين 18 و 65):</label>
        <input type="number" id="user-age" name="age" min="18" max="65">
    </div>
    <div>
        <button type="submit">إرسال</button>
    </div>
</form>
ملاحظة:

رغم أهمية التحقق من صحة المدخلات على جانب العميل (client-side) باستخدام HTML5، يجب دائمًا تنفيذ التحقق من البيانات على جانب الخادم (server-side) أيضًا للأمان.

HTML الدلالي (Semantic HTML)

HTML الدلالي يعني استخدام عناصر HTML التي تصف بوضوح معنى المحتوى الذي تحتويه، بدلاً من استخدام عناصر عامة مثل <div> لكل شيء.

لماذا HTML الدلالي مهم؟

استخدام HTML الدلالي يحسن إمكانية الوصول، ومحركات البحث، وقابلية الصيانة، وقابلية القراءة للكود.

عناصر HTML5 الدلالية

<header>

يمثل رأس الصفحة أو القسم، يحتوي عادة على الشعار والعنوان والتنقل.

<nav>

يحتوي على روابط التنقل الرئيسية في الصفحة.

<main>

يحتوي على المحتوى الرئيسي للصفحة. يجب أن يكون فريدًا في الصفحة.

<article>

يمثل محتوى مستقل بذاته مثل مقالة أو منشور مدونة.

<section>

يمثل قسمًا عامًا من المحتوى، عادة مع عنوان.

<aside>

يمثل محتوى ثانوي مرتبط بالمحتوى المحيط، مثل الشريط الجانبي.

<footer>

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

<figure> و <figcaption>

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

مثال لهيكل صفحة دلالي

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>مثال لصفحة HTML دلالية</title>
</head>
<body>
    <header>
        <h1>اسم الموقع</h1>
        <nav>
            <ul>
                <li><a href="#">الرئيسية</a></li>
                <li><a href="#">من نحن</a></li>
                <li><a href="#">الخدمات</a></li>
                <li><a href="#">اتصل بنا</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section>
            <h2>عن الموقع</h2>
            <p>هذا وصف للموقع وخدماته.</p>
        </section>
        
        <article>
            <header>
                <h2>عنوان المقالة</h2>
                <p>نُشرت في <time datetime="2023-06-10">10 يونيو 2023</time> بواسطة <a href="#">اسم الكاتب</a></p>
            </header>
            <p>محتوى المقالة...</p>
            <footer>
                <p>التعليقات: 5</p>
            </footer>
        </article>
        
        <aside>
            <h3>مقالات ذات صلة</h3>
            <ul>
                <li><a href="#">مقالة ذات صلة 1</a></li>
                <li><a href="#">مقالة ذات صلة 2</a></li>
            </ul>
        </aside>
    </main>
    
    <footer>
        <p>حقوق النشر © 2023. جميع الحقوق محفوظة.</p>
    </footer>
</body>
</html>

الوسائط المتعددة (Multimedia)

يوفر HTML5 دعمًا مدمجًا للوسائط المتعددة مثل الفيديو والصوت، دون الحاجة لبرامج إضافية مثل Flash.

عنصر الفيديو

يستخدم عنصر <video> لتضمين مقاطع الفيديو في صفحة الويب:

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    متصفحك لا يدعم عرض الفيديو.
</video>

أهم سمات عنصر <video>:

  • controls: تعرض أزرار التحكم (تشغيل، إيقاف، مستوى الصوت)
  • autoplay: تبدأ تشغيل الفيديو تلقائيًا عند تحميل الصفحة
  • loop: تكرار الفيديو بعد الانتهاء
  • muted: كتم الصوت افتراضيًا
  • poster: صورة تظهر قبل بدء تشغيل الفيديو

عنصر الصوت

يستخدم عنصر <audio> لتضمين الصوت في صفحة الويب:

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    متصفحك لا يدعم تشغيل الملفات الصوتية.
</audio>

أهم سمات عنصر <audio> مشابهة لعنصر <video> وتشمل controls، autoplay، loop، و muted.

نصيحة:

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

السمات العامة (Global Attributes)

السمات العامة هي سمات يمكن استخدامها مع أي عنصر HTML. إليك أهمها:

السمة الوصف مثال
id معرّف فريد للعنصر <div id="header">
class فئة أو مجموعة من الفئات للعنصر <p class="intro highlight">
style أنماط CSS مضمنة <p style="color: blue;">
title معلومات إضافية عن العنصر (تظهر كتلميح) <abbr title="Hypertext Markup Language">HTML</abbr>
lang لغة محتوى العنصر <p lang="ar">نص عربي</p>
dir اتجاه النص (rtl، ltr) <p dir="rtl">نص من اليمين لليسار</p>
hidden يخفي العنصر <p hidden>هذا النص مخفي</p>
tabindex ترتيب التنقل بين العناصر باستخدام مفتاح Tab <input tabindex="1">
data-* سمات بيانات مخصصة <div data-user-id="123">

بيانات Meta

عناصر <meta> توفر معلومات حول المستند HTML. هذه العناصر لا تظهر في الصفحة ولكنها مهمة لمحركات البحث والمتصفحات.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="وصف للصفحة يظهر في نتائج البحث">
    <meta name="keywords" content="HTML, CSS, توثيق, برمجة">
    <meta name="author" content="اسم المؤلف">
    <meta name="robots" content="index, follow">
    <meta property="og:title" content="عنوان الصفحة للمشاركة الاجتماعية">
    <meta property="og:description" content="وصف الصفحة للمشاركة الاجتماعية">
    <meta property="og:image" content="https://example.com/image.jpg">
    <title>عنوان الصفحة</title>
</head>

أهم عناصر ميتا

  • <meta charset="UTF-8">: ترميز الأحرف المستخدم في الصفحة
  • <meta name="viewport" ...>: تحكم في كيفية ظهور الصفحة على الأجهزة المحمولة
  • <meta name="description" ...>: وصف الصفحة الذي قد يظهر في نتائج البحث
  • <meta name="keywords" ...>: الكلمات المفتاحية المتعلقة بمحتوى الصفحة
  • <meta name="author" ...>: مؤلف المحتوى
  • <meta name="robots" ...>: توجيهات لروبوتات محركات البحث

بيانات Open Graph

بيانات Open Graph (og:) هي ميتا تاغات تحدد كيف تظهر الصفحة عند مشاركتها على منصات التواصل الاجتماعي:

  • <meta property="og:title" ...>: عنوان الصفحة عند المشاركة
  • <meta property="og:description" ...>: وصف الصفحة عند المشاركة
  • <meta property="og:image" ...>: صورة معاينة الصفحة عند المشاركة
  • <meta property="og:url" ...>: رابط URL الكامل للصفحة
  • <meta property="og:type" ...>: نوع المحتوى (مثل website, article, video)
نصيحة:

بيانات Meta مهمة لتحسين محركات البحث (SEO) وتجربة المستخدم عند مشاركة موقعك. احرص على تضمين وصف دقيق وجذاب للصفحة، وصورة مناسبة عند استخدام Open Graph.

واجهات برمجة HTML5

HTML5 لا يقتصر على عناصر جديدة فقط، بل يتضمن أيضًا العديد من واجهات البرمجة (APIs) التي تسمح بإنشاء تطبيقات ويب أكثر تفاعلية وتطورًا.

Storage API

تخزين البيانات محليًا في متصفح المستخدم، باستخدام localStorage و sessionStorage.

Geolocation API

الحصول على الموقع الجغرافي للمستخدم، بعد الحصول على إذنه.

Drag and Drop API

تمكين وظائف السحب والإفلات في تطبيقات الويب.

Canvas API

رسم الرسومات والصور ديناميكيًا باستخدام JavaScript.

History API

التحكم في سجل التنقل في المتصفح وتحديث URL دون إعادة تحميل الصفحة.

Web Workers API

تشغيل البرامج النصية في الخلفية دون التأثير على واجهة المستخدم.

مثال على استخدام localStorage

// تخزين بيانات
localStorage.setItem('username', 'أحمد');

// استرجاع بيانات
const username = localStorage.getItem('username');
console.log(username); // سيطبع "أحمد"

// حذف بيانات
localStorage.removeItem('username');

// حذف جميع البيانات
localStorage.clear();
ملاحظة:

واجهات برمجة HTML5 غالبًا ما تتطلب مزيدًا من التفاصيل لاستخدامها، لذا من الأفضل الرجوع إلى توثيق متخصص لكل واجهة برمجة.

خلاصة

في هذا الدليل، تعرفنا على أساسيات HTML وأهم عناصرها وكيفية استخدامها. HTML هي الأساس لبناء أي موقع ويب، وفهمها جيدًا يضع أساسًا قويًا لمهارات تطوير الويب الخاصة بك.

تذكر دائمًا:

  • استخدم HTML الدلالي لتحسين إمكانية الوصول وSEO
  • تحقق من صحة الكود باستخدام أدوات التحقق
  • اختبر موقعك على متصفحات مختلفة للتأكد من التوافق
  • تعلم CSS لتنسيق العناصر ولجعل موقعك جذابًا
  • تعلم JavaScript لإضافة تفاعلية للموقع

موارد إضافية للتعلم

إلى الأمام!

أنت الآن جاهز للانتقال إلى الخطوة التالية في رحلة تطوير الويب الخاصة بك. تابع تعلم CSS لإضافة أساليب وتنسيقات جميلة لصفحات HTML الخاصة بك!

انتقل إلى توثيق CSS