معلومه ببلاش
قناة مخصصة للمعلومات والكورسات المجانية لتطوير مهاراتك وتنمية معرفتك بلا حدود.
ابدأ المتابعة الآنتعلم HTML من الصفر
🟢 الجزء الأول: فهم HTML
✅ إيه هو HTML؟
HTML = HyperText Markup Language هي لغة هيكل صفحات الويب (مش لغة برمجة).
✅ ليه لازم أتعلم HTML؟
- الأساس لبناء مواقع الويب
- بتتعامل مع CSS و JavaScript
- مطلوبة في سوق العمل
✅ إزاي HTML بيشتغل؟
بيتكتب بعناصر (Elements)، كل عنصر بيبقى وسم فتح <>
ووسم غلق </>
. المتصفح بيقرا الكود ويعرض الصفحة.
🟢 الجزء الثاني: الإعداد لبدء تعلم HTML
✅ إيه اللي هتحتاجه؟
- جهاز كمبيوتر
- متصفح ويب
- محرر نصوص (أنصح بـ VS Code): تحميل VS Code
✅ إزاي تبدأ تكتب HTML؟
تفتح VS Code، تنشئ ملف index.html
وتفتحه في المتصفح.
🟢 الجزء الثالث: أساسيات HTML
✅ هيكل صفحة HTML الأساسي
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>صفحتي الأولى</title>
</head>
<body>
<h1>مرحبًا بالعالم!</h1>
<p>هذه أول صفحة ويب ليا!</p>
</body>
</html>
✅ الوسوم الأساسية
✅ عناوين (Headings)
<h1>عنوان رئيسي</h1>
<h2>عنوان فرعي</h2>
✅ فقرات (Paragraphs)
<p>هذا نص طويل يشرح شيئًا ما.</p>
✅ روابط (Links)
<a href="https://www.google.com">اضغط هنا لزيارة جوجل</a>
✅ صور (Images)
<img src="image.jpg" alt="وصف الصورة">
✅ قوائم (Lists)
<ul>
<li>تفاح</li>
<li>موز</li>
</ul>
<ol>
<li>عنصر 1</li>
<li>عنصر 2</li>
</ol>
✅ تنسيق النصوص
<p>هذا نص <strong>مهم</strong> وهذا <em>مائل</em>.</p>
✅ السمات (Attributes)
<a href="https://example.com" target="_blank">رابط</a>
<p class="intro" id="first">نص تمهيدي</p>
🟢 الجزء الرابع: مفاهيم متوسطة في HTML
✅ الهيكلية (Semantic HTML)
<header>
<h1>موقعي</h1>
<nav>
<ul>
<li><a href="#home">الرئيسية</a></li>
<li><a href="#about">من نحن</a></li>
</ul>
</nav>
</header>
✅ الجداول (Tables)
<table border="1">
<thead>
<tr>
<th>الاسم</th>
<th>العمر</th>
</tr>
</thead>
<tbody>
<tr>
<td>علي</td>
<td>25</td>
</tr>
<tr>
<td>سارة</td>
<td>30</td>
</tr>
</tbody>
</table>
✅ النماذج (Forms)
النماذج بتُستخدم لجمع البيانات من المستخدمين (زي تسجيل الدخول، تسجيل عضوية، إرسال تعليقات،... إلخ).
العناصر الأساسية في النموذج:
<form>
: العنصر الرئيسي للنموذج<input>
: حقول الإدخال (نص، بريد إلكتروني، رقم، كلمة مرور... إلخ)<label>
: تسمية توضيحية لكل حقل<button>
: زر الإرسال أو الأزرار الأخرى
مثال على نموذج بسيط:
<form action="/submit" method="POST"> <label for="name">الاسم:</label> <input type="text" id="name" name="name" required> <br> <label for="email">الإيميل:</label> <input type="email" id="email" name="email" required> <br> <label for="password">كلمة المرور:</label> <input type="password" id="password" name="password" required> <br> <button type="submit">إرسال</button> </form>
شرح العناصر:
action="/submit"
: المكان اللي هيتبعتله البيانات (URL أو مسار سيرفر).method="POST"
: طريقة الإرسال (POST يعني إرسال آمن للبيانات).<label for="...">
: بيربط بين النص وحقل الإدخال (لتحسين الوصولية).<input type="...">
: أنواع مختلفة لحقل الإدخال (نص، بريد إلكتروني، كلمة مرور... إلخ).required
: يجعل الحقل إجباري.<button type="submit">
: زر الإرسال.
🟢 الجزء الخامس: التقدم للاحتراف
✅ ربط HTML بـ CSS و JavaScript
✅ CSS
<style>
داخل الصفحة
<link rel="stylesheet" href="styles.css">
👉 MDN - CSS
✅ JavaScript
<script>
داخل الصفحة
<script src="script.js"></script>
👉 MDN - JavaScript
✅ تحسين الوصولية (Accessibility)
- استخدام
alt
في الصور - استخدام
aria-label
✅ SEO (تحسين محركات البحث)
<meta name="description" content="...">
👉 MDN - SEO basics
✅ إدارة المشاريع
Git / GitHub
👉 GitHub Docs
✅ تعلم أطر عمل (Frameworks)
Bootstrap
👉 Bootstrap
🟢 الجزء السادس: مصادر للتعلم المستمر
✅ مواقع مجانية
✅ قنوات يوتيوب
- Traversy Media
- The Net Ninja
- Elzero Web School
✅ كتب
HTML and CSS: Design and Build Websites by Jon Duckett
👉 رابط الكتاب في أمازون
✅ نصائح أخيرة
- جرب بنفسك
- ابدأ صغير
- اسأل وتعلم
- أكمل CSS وJavaScript