كورس شامل لتعلم لغة HTML: من الأساسيات إلى الاحتراف
محتويات
مقدمة إلى لغة HTML
ما هي HTML؟
HTML (HyperText Markup Language) هي لغة ترميز تُستخدم لبناء صفحات الويب. تُعتبر HTML هي الهيكل الأساسي لأي موقع ويب، حيث تُستخدم لتحديد البنية العامة للمحتوى على الإنترنت.
أهداف الدورة
- فهم أساسيات HTML.
- تعلم كيفية كتابة وتحرير كود HTML.
- معرفة كيفية إنشاء صفحات ويب بسيطة ومتقدمة.
- تعلم كيفية دمج HTML مع CSS وJavaScript.
الفصل الأول: الأساسيات
الدرس الأول: الهيكل الأساسي لصفحة HTML
كل صفحة HTML تحتاج إلى هيكل أساسي معين ليتم عرضها بشكل صحيح. هذا الهيكل يتكون من العناصر التالية:
<!DOCTYPE html>
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>
محتوى الصفحة هنا
</body>
</html>
الشرح:
- <!DOCTYPE html>: هذا الإعلان يخبر المتصفح بأن الصفحة تستخدم HTML5.
- <html>: هذا العنصر هو الجذر لكل عناصر HTML في الصفحة.
- <head>: يحتوي على بيانات وصفية (metadata) مثل العنوان والروابط إلى ملفات CSS وJavaScript.
- <title>: يحدد عنوان الصفحة الذي يظهر في شريط العنوان للمتصفح.
- <body>: يحتوي على المحتوى المرئي للصفحة.
الدرس الثاني: النصوص والفقرات
تُستخدم العناصر <p> لإنشاء فقرات، والعناصر <h1> إلى <h6> لإنشاء عناوين بترتيب هرمي.
مثال:
<h1>هذا عنوان رئيسي</h1>
<h2>هذا عنوان فرعي</h2>
<p>هذه فقرة نصية تحتوي على معلومات.</p>
الدرس الثالث: النصوص الخاصة
يمكنك تنسيق النص باستخدام علامات HTML الخاصة، مثل:
- <b> أو <strong>: لجعل النص عريضًا.
- <i> أو <em>: لجعل النص مائلًا.
مثال:
<p>هذا نص <strong>عريض</strong> وهذا نص <em>مائل</em>.</p>
الفصل الثاني: الروابط والصور
الدرس الرابع: الروابط التشعبية
تُستخدم العلامة <a> لإنشاء روابط تشعبية. تحتاج إلى استخدام السمة href لتحديد عنوان URL الذي يرتبط به الرابط.
مثال:
<a href="https://www.ma3lomate.net">اذهب إلى مثال</a>
الدرس السادس: النص البديل للصور
النص البديل هو نص يُستخدم لوصف الصورة إذا لم تتمكن المتصفحات من عرضها. يُستخدم النص البديل أيضًا بواسطة محركات البحث لتحسين السيو (SEO) وبواسطة الأدوات المساعدة لضعاف البصر.
مثال:
<img src="path/to/image.jpg" alt="صورة لغروب الشمس">
الفصل الثالث: القوائم والجداول
الدرس السابع: القوائم
يمكنك إنشاء قوائم غير مرتبة باستخدام <ul> وقوائم مرتبة باستخدام <ol>. كل عنصر في القائمة يُوضع داخل علامة <li>.
مثال على قائمة غير مرتبة:
<ul>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
</ul>
مثال على قائمة مرتبة:
<ol>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
</ol>
الدرس الثامن: الجداول
تُستخدم العلامة <table> لإنشاء جداول، مع استخدام <tr> للصفوف و<td> للخلايا. تُستخدم العلامة <th> لتحديد رؤوس الأعمدة.
مثال:
<table>
<tr>
<th>العمود الأول</th>
<th>العمود الثاني</th>
</tr>
<tr>
<td>البيانات 1</td>
<td>البيانات 2</td>
</tr>
<tr>
<td>البيانات 3</td>
<td>البيانات 4</td>
</tr>
</table>
الفصل الرابع: النماذج والتفاعلية
الدرس التاسع: النماذج
النماذج تُستخدم لجمع البيانات من المستخدمين. تتضمن العناصر الأساسية للنماذج <form>, <input>, <textarea>, و<button>.
مثال:
<form action="/submit" method="post">
<label for="name">الاسم:</label>
<input type="text" id="name" name="name">
<label for="email">البريد الإلكتروني:</label>
<input type="email" id="email" name="email">
<button type="submit">إرسال</button>
</form>
الدرس العاشر: أنواع المدخلات
هناك العديد من أنواع المدخلات التي يمكن استخدامها داخل النماذج مثل:
- text: للنصوص العادية.
- email: للبريد الإلكتروني.
- password: لكلمات المرور.
- number: للأرقام.
- date: لتحديد التاريخ.
- radio: لاختيار خيار واحد من بين عدة خيارات.
- checkbox: لاختيار خيارات متعددة.
مثال:
<form>
<label for="age">العمر:</label>
<input type="number" id="age" name="age">
<label for="dob">تاريخ الميلاد:</label>
<input type="date" id="dob" name="dob">
<label for="gender">الجنس:</label>
<input type="radio" id="male" name="gender" value="male"> ذكر
<input type="radio" id="female" name="gender" value="female"> أنثى
<label for="subscribe">الاشتراك:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="newsletter"> النشرة البريدية
<button type="submit">إرسال</button>
</form>
الفصل الخامس: تنسيق وتقديم المحتوى
الدرس الحادي عشر: التعليقات في HTML
التعليقات تُستخدم لتوضيح الكود وتسهيل قراءته، ولا يتم عرضها في المتصفح.
مثال:
<!-- هذا تعليق -->
<p>هذا نص يظهر في المتصفح.</p>
الدرس الثاني عشر: التعريفات والاختصارات
يمكن استخدام العلامات التالية لتعريف الاختصارات والمصطلحات:
- <abbr>: لتعريف الاختصارات.
- <dfn>: لتعريف المصطلحات.
مثال:
<p>كلمة <abbr title="HyperText Markup Language">HTML</abbr> هي لغة ترميز النص الفائق.</p>
<p>الـ <dfn>DOM</dfn> هو نموذج كائن المستند.</p>
الفصل السادس: HTML متقدم
الدرس الثالث عشر: عناصر الوسائط المتعددة
يمكنك إضافة فيديو وصوت إلى صفحات الويب باستخدام العناصر <video> و<audio>.
مثال على فيديو:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
المتصفح لا يدعم تشغيل الفيديو.
</video>
مثال على صوت:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
المتصفح لا يدعم تشغيل الصوت.
</audio>
الدرس الرابع عشر: عناصر جديدة في HTML5
HTML5 جلبت العديد من العناصر الجديدة مثل:
- <header>: لتحديد رأس الصفحة.
- <footer>: لتحديد تذييل الصفحة.
- <article>: لمحتوى مستقل.
- <section>: لقسم في المستند.
- <nav>: للتنقل.
- <aside>: للمحتوى الجانبي.
مثال:
<header>
<h1>عنوان الموقع</h1>
<nav>
<ul>
<li><a href="#">الرئيسية</a></li>
<li><a href="#">من نحن</a></li>
<li><a href="#">اتصل بنا</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h2>عنوان المقال</h2>
<p>محتوى المقال هنا.</p>
</article>
<aside>
<h3>محتوى جانبي</h3>
<p>معلومات إضافية.</p>
</aside>
</section>
<footer>
<p>حقوق الطبع والنشر © 2024</p>
</footer>
الفصل السابع: دمج HTML مع CSS وJavaScript
الدرس الخامس عشر: مقدمة إلى CSS
CSS (Cascading Style Sheets) تُستخدم لتنسيق صفحات الويب. يمكن ربط CSS بملفات HTML بعدة طرق:
- داخلية باستخدام <style> في الرأس.
- خارجية باستخدام <link>.
- مباشرة باستخدام السمة style.
مثال على تنسيق داخلي:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>مرحبا بكم في موقعي</h1>
<p>هذه فقرة نصية.</p>
</body>
</html>
الدرس السادس عشر: مقدمة إلى JavaScript
JavaScript تُستخدم لإضافة التفاعل والوظائف الديناميكية لصفحات الويب. يمكن تضمين JavaScript في ملفات HTML بعدة طرق:
- داخلية باستخدام <script> في الرأس أو الجسم.
- خارجية باستخدام <script src="path/to/file.js"></script>.
مثال على JavaScript داخلي:
<!DOCTYPE html>
<html>
<head>
<script>
function sayHello() {
alert("مرحبا بكم!");
}
</script>
</head>
<body>
<button onclick="sayHello()">اضغط هنا</button>
</body>
</html>
الخاتمة
بإكمال هذا الكورس، يجب أن تكون لديك فكرة جيدة عن كيفية إنشاء صفحات ويب بسيطة ومتقدمة باستخدام HTML، وكيفية دمجها مع CSS لتنسيق الصفحات وجعلها أكثر جاذبية، ومع JavaScript لإضافة التفاعل والوظائف الديناميكية. الآن يمكنك البدء في بناء مواقع ويب أكثر تعقيدًا وتعلم تقنيات الويب المتقدمة.
قد يهمك: كيفية إنشاء شريط جانبي(Sidebar) باستخدام HTML وCSS وJavaScript
؟.jpg)
.png)
