كورس شامل لتعلم لغة HTML: من الأساسيات إلى الاحتراف

كورس شامل لتعلم لغة HTML: من الأساسيات إلى الاحتراف

Profil
Icons
معلومات، الموسوعة الشاملة
كاتب محتوى في معلومات
منذ: 2022-04-01
آخر تحديث: 2024-07-04

محتويات


كورس شامل لتعلم لغة HTML: من الأساسيات إلى الاحتراف

مقدمة إلى لغة HTML

ما هي HTML؟

HTML (HyperText Markup Language) هي لغة ترميز تُستخدم لبناء صفحات الويب. تُعتبر HTML هي الهيكل الأساسي لأي موقع ويب، حيث تُستخدم لتحديد البنية العامة للمحتوى على الإنترنت.

أهداف الدورة

الفصل الأول: الأساسيات

الدرس الأول: الهيكل الأساسي لصفحة HTML

كل صفحة HTML تحتاج إلى هيكل أساسي معين ليتم عرضها بشكل صحيح. هذا الهيكل يتكون من العناصر التالية:

<!DOCTYPE html>
<html>
<head>
   <title>عنوان الصفحة</title>
</head>
<body>
   محتوى الصفحة هنا
</body>
</html>

الشرح:

الدرس الثاني: النصوص والفقرات

تُستخدم العناصر <p> لإنشاء فقرات، والعناصر <h1> إلى <h6> لإنشاء عناوين بترتيب هرمي.

مثال:

<h1>هذا عنوان رئيسي</h1>
<h2>هذا عنوان فرعي</h2>
<p>هذه فقرة نصية تحتوي على معلومات.</p>

الدرس الثالث: النصوص الخاصة

يمكنك تنسيق النص باستخدام علامات HTML الخاصة، مثل:

مثال:

<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>

الدرس العاشر: أنواع المدخلات

هناك العديد من أنواع المدخلات التي يمكن استخدامها داخل النماذج مثل:

مثال:

<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>

الدرس الثاني عشر: التعريفات والاختصارات

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

مثال:

<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>
   <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 بعدة طرق:

مثال على تنسيق داخلي:

<!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 بعدة طرق:

مثال على 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

قد يهمك: إنشاء آلة حاسبة باستخدامHTML وCSS وJavaScript

الوسوم

شارك المقالة


إقرأ أيضا


مقالات منوعة

صلاة الوتر

كيفيّة أداء صلاة الوتر

الكرة الطائرة

الكرة الطائرة

فهم الفرق بين التداول الآلي واليدوي

الفرق بين المدير والقائد

الفرق بين المدير والقائد

أفضل الطرق في علاج جفاف البشرة الدهني

علاج جفاف البشرة الدهني

ما هي قوانين كرة السلة

ما هي قوانين كرة السلة

فهم الـ NFTs

حكم قراءة الأبراج بين متعة التسلية وضرورة التفكير العقلاني

حكم قراءة الأبراج

 كيفية تنمية المهارات الإدارية؟

تأسيس شركة ناجحة

كيفية تقصير بنطلون الجينز

كيفية تقصير بنطلون الجينز

شكرًا لكم على زيارتكم لمعلومات، ونتطلع لرؤية تقدمكم ونجاحكم في رحلة التعلم.