HTML - ملخص شامل لأهم التاجات

- مارس 16, 2025

ملخص شامل لأهم ما في HTML

HTML (HyperText Markup Language) هي اللغة الأساسية المستخدمة لإنشاء صفحات الويب، حيث تحدد هيكل المحتوى الذي يتم عرضه على المتصفح. HTML ليست لغة برمجة، بل هي لغة ترميز تعتمد على العناصر (Elements) والوسوم (Tags) لتنظيم المحتوى.

1. أساسيات HTML

أ. الهيكل الأساسي لصفحة HTML

كل مستند HTML يحتوي على هيكل أساسي يبدأ بالوسم <html> وينقسم إلى قسمين رئيسيين:

<head>: يحتوي على معلومات الصفحة مثل العنوان (<title>) والروابط الخارجية (مثل ملفات CSS).
<body>: يحتوي على المحتوى المرئي للمستخدم مثل النصوص، الصور، الأزرار، الجداول، إلخ.

مثال على صفحة HTML أساسية

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>أول صفحة HTML</title>
</head>
<body>
    <h1>مرحبًا بك في HTML</h1>
    <p>هذه صفحة HTML بسيطة.</p>
</body>
</html>

2. أهم الوسوم في HTML

أ. وسوم النصوص

<h1> إلى <h6>: تستخدم للعناوين، حيث <h1> هو الأكبر و <h6> هو الأصغر.
<p>: لإنشاء فقرة نصية.
<strong>: يجعل النص عريضًا (Bold).
<em>: يجعل النص مائلًا (Italic).
<br>: لإنشاء سطر جديد.
<hr>: لإضافة خط أفقي فاصل.

ب. الروابط والصور

<a href="https://example.com">: لإنشاء رابط.
<img src="image.jpg" alt="وصف الصورة">: لإضافة صورة.

ج. القوائم

<ul>: قائمة غير مرتبة (نقاط).
<ol>: قائمة مرتبة (أرقام).
<li>: عنصر في القائمة.

د. الجداول

<table>: لإنشاء جدول.
<tr>: صف في الجدول.
<td>: خلية بيانات.
<th>: خلية عنوان.

هـ. النماذج (Forms)

<form>: يحتوي على مدخلات البيانات.
<input>: حقل إدخال (نص، رقم، بريد إلكتروني، كلمة مرور...).
<textarea>: مربع نصي كبير.
<select>: قائمة منسدلة.
<button>: زر إرسال أو تشغيل إجراء معين.

مثال على نموذج بسيط:

<form action="submit.php" method="post">
    <label for="name">الاسم:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">البريد الإلكتروني:</label>
    <input type="email" id="email" name="email" required>
    
    <button type="submit">إرسال</button>
</form>

3. العناصر الحديثة في HTML5

أ. عناصر الوسائط المتعددة

<audio>: لإضافة ملفات صوتية.
<video>: لإضافة ملفات فيديو.
<source>: لتحديد مصدر الفيديو أو الصوت.

مثال على إدراج فيديو:

<video controls width="400">
    <source src="video.mp4" type="video/mp4">
    المتصفح لا يدعم تشغيل الفيديو.
</video>

ب. عناصر تخطيط الصفحة الحديثة

HTML5 قدمت عناصر دلالية جديدة مثل:

<header>: رأس الصفحة أو القسم.
<nav>: قائمة التنقل.
<section>: قسم من المحتوى.
<article>: مقال أو محتوى مستقل.
<footer>: تذييل الصفحة.
<aside>: محتوى جانبي.

مثال على استخدام هذه العناصر:

<header>
    <h1>موقعي الشخصي</h1>
</header>
<nav>
    <ul>
        <li><a href="#">الرئيسية</a></li>
        <li><a href="#">من نحن</a></li>
    </ul>
</nav>
<section>
    <h2>عن الموقع</h2>
    <p>هذا هو موقعي الشخصي حيث أنشر مقالاتي.</p>
</section>
<footer>
    <p>جميع الحقوق محفوظة © 2025</p>
</footer>

4. سمات العناصر في HTML

السمات (Attributes) تعطي معلومات إضافية للعناصر.

id: معرف فريد للعنصر.
class: تصنيف العنصر (للاستخدام مع CSS).
src: مصدر الصورة أو الفيديو.
alt: نص بديل للصورة.
href: رابط الوجهة في <a>.
style: لتطبيق تنسيق داخلي.
disabled: لجعل زر أو حقل إدخال غير قابل للاستخدام.

5. العلاقة بين HTML و CSS و JavaScript

HTML تحدد الهيكل الأساسي للموقع.
CSS تضيف التصميم والجماليات.
JavaScript تضيف التفاعلية والوظائف الديناميكية.

مثال على دمج CSS و JavaScript في HTML:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على التفاعل</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; }
        .hidden { display: none; }
    </style>
</head>
<body>
    <h1>اضغط على الزر لرؤية النص</h1>
    <button onclick="showText()">إظهار النص</button>
    <p id="message" class="hidden">هذا هو النص المخفي!</p>
    <script>
        function showText() {
            document.getElementById("message").classList.remove("hidden");
        }
    </script>
</body>
</html>

بحث هذه المدونة الإلكترونية

Sokkary | Code3arabi