تعلم HTML من الصفر: دليلك الشامل لدخول عالم تطوير الويب
HTML • تطوير الويب • مبتدئين
📌 مقدمة
فالعالم الرقمي لي كنعيشو فيه دابا، مواقع الويب ولات جزء مهم من حياتنا اليومية. أي معلومة كنبغيو نبحثو عليها كنمشيو للإنترنت، وأي مشروع ولا خدمة ولات محتاجة موقع إلكتروني باش توصل للناس. هنا كيجينا سؤال مهم: شكون اللغات لي كتستعمل باش نصايبو المواقع؟
واحدة من أولى وأساسيات هاد اللغات هي HTML. إذا كنت باغي تبدا فمجال البرمجة وتطوير الويب، HTML هي أحسن نقطة انطلاق لأنها سهلة، مفهومة، وما محتاجاش خبرة كبيرة. فهاد الصفحة غادي نعرفو HTML من الصفر، ونتعلمو أهم العناصر ديالها بتطبيقات عملية وبالدارجة باش تكون سهلة ومفهومة مزيان.
⭐ شنو هي HTML؟
HTML هي اختصار لـ: HyperText Markup Language يعني: "لغة ترميز النصوص الفائقة".
هي لغة كتستعمل باش ننظمو المحتوى ديال صفحات الويب: العناوين، النصوص، الصور، الروابط، الجداول، الفيديوهات…
HTML ماشي لغة برمجة، ولكن لغة هيكلية كتعطي للموقع شكل وترتيب المعلومات.
مثال بسيط:
<h1>السلام عليكم</h1>
<p>مرحبا بكم في أول درس HTML</p>💡 كيفاش كيخدم HTML؟
أي موقع في العالم كيبدا من ملف HTML. المتصفح بحال Chrome ولا Firefox كيقرا الكود ويعرض ليك المحتوى فالشاشة.
HTML فيها وسوم (Tags)، والوسوم كتكون هكا:
<tagname>المحتوى</tagname>مثلاً:
<p>هذا فقرة نصية</p>🔹 مكونات صفحة HTML الأساسية
باش نصايبو أي صفحة ويب، خاصنا نعرفو البنية الأساسية ديال HTML. هادي هي الهيكلة لي كيبدا بها أي موقع:
<!DOCTYPE html>
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>
محتوى الصفحة
</body>
</html>شرح هاد العناصر:
- <!DOCTYPE html> → كيعلم المتصفح بأن هادي صفحة HTML5
- <html> → الجذر ديال الصفحة، كيجمع كلشي
- <head> → فيه المعلومات ديال الصفحة (ماكيتبانوش للزائر)
- <title> → عنوان الصفحة لي كيبان فاللسان ديال المتصفح
- <body> → كلشي لي كيبان للناس (نصوص، صور، ...)
🔹 العناوين في HTML
العناوين مهمة باش نقسمو المحتوى. كاينين 6 مستويات:
<h1>أكبر عنوان</h1>
<h2>عنوان مهم</h2>
<h3>عنوان فرعي</h3>حاول دائما تستعمل <h1> غير مرة وحدة فالصفحة باش SEO يكون مزيان.
📝 الفقرات والنصوص
<p>هاد الفقرة فيها نص مهم للقارئ</p>تنسيق النص:
<strong>نص غليظ</strong>
<em>نص مائل</em>🖼️ إدراج الصور
الصورة كتزاد بهاد الوسم:
<img src="image.jpg" alt="وصف للصورة">alt مهم بزاف لذوي الاحتياجات الخاصة ولجوجل.
🔗 الروابط
<a href="https://example.com">زر الانتقال</a>ممكن نفتحو الرابط فنافذة جديدة:
<a href="https://example.com" target="_blank">فتح الرابط</a>📋 لائحة العناصر
<ul>
<li>عنصر</li>
</ul>
ملاحظــة :
- ملاحظاتك مهمة بالنسبة لنا.
- لا تنشر تعليقات غير مرغوب فيها ، ستتم إزالتها فور المراجعة.
- تجنب تضمين عناوين URL الخاصة بموقع الويب في تعليقاتك.