مساحة العمل

HTML CSS

بناء هيكل الصفحة وشكلها

العربية

التعريف أولا

ما هي HTML CSS

HTML CSS لغة لكتابة تعليمات دقيقة، وتستخدم غالبا في بناء هيكل الصفحة وشكلها. لا تبدأ بحفظ المصطلحات. ابدأ بفكرة واحدة: مدخلات تمر بخطوات ثم تصبح مخرجات.

أقل معلومات للتشغيلالملف index.htmlالتشغيل open index.htmlالعادة تعلم جزءا صغيرا من HTML CSS ثم اكتب مثالا صغيرا وشغله
البرنامج

مجموعة مرتبة من التعليمات. يقرأ المدخلات ويتبع القواعد وينتج المخرجات.

القيمة والمتغير

القيمة هي البيانات. المتغير هو اسم تستخدمه لحفظ البيانات وإعادة استخدامها.

الدالة

عمل صغير له اسم. يأخذ مدخلات وينفذ مهمة ويمكن أن يرجع نتيجة.

بيئة التشغيل

المتصفح هي البيئة التي تشغل كود index.html.

أول كود قابل للقراءة

HTML دلالي

header main section button input
<main>
  <h1>Tools</h1>
  <button>Run</button>
</main>
الناتج heading and button rendered

نسب اللغة

شجرة HTML CSS

اعرف من أين جاءت HTML CSS وما اللغات القريبة وما الخطوة التالية.

الجذور
SGMLHTMLCSS cascade
الحاليةHTML CSSعائلة لغات الويب والواجهات
العائلةعائلة لغات الويب والواجهات
أفضل استخدام

يستخدم في بناء هيكل الصفحة وشكلها

من الصفر

1اقرأ قاعدة واحدة2توقع الناتج3اكتب من الذاكرة4شغل الفحص5كرر مع تغيير واحد

بنك الأسئلة

ابحث ثم تدرب

اختر مرحلة أو ابحث داخل بنك التدريب الحالي ثم افتح السؤال مباشرة.

18 سؤال مطابق
س 1اختيارالمرحلة 1 التعريفات

HTML CSS السؤال 1

HTML CSS السؤال 1. اختر الوصف الأقرب إلى بنية العناوين

س 2اختيارالمرحلة 1 التعريفات

HTML CSS السؤال 2

HTML CSS السؤال 2. اختر الوصف الأقرب إلى زر الإجراء

س 3اختيارالمرحلة 1 التعريفات

HTML CSS السؤال 3

HTML CSS السؤال 3. اختر الوصف الأقرب إلى تخطيط grid

س 4اختيارالمرحلة 1 التعريفات

HTML CSS السؤال 4

HTML CSS السؤال 4. اختر الوصف الأقرب إلى استعلام media

س 5اختيارالمرحلة 1 التعريفات

HTML CSS السؤال 5

HTML CSS السؤال 5. اختر الوصف الأقرب إلى بنية العناوين

س 6اختيارالمرحلة 1 التعريفات

HTML CSS السؤال 6

HTML CSS السؤال 6. اختر الوصف الأقرب إلى زر الإجراء

س 7اختيارالمرحلة 1 التعريفات

HTML CSS السؤال 7

HTML CSS السؤال 7. اختر الوصف الأقرب إلى تخطيط grid

س 8اختيارالمرحلة 1 التعريفات

HTML CSS السؤال 8

HTML CSS السؤال 8. اختر الوصف الأقرب إلى استعلام media

س 9اختيارالمرحلة 1 التعريفات

HTML CSS السؤال 9

HTML CSS السؤال 9. اختر الوصف الأقرب إلى بنية العناوين

س 10اختيارالمرحلة 1 التعريفات

HTML CSS السؤال 10

HTML CSS السؤال 10. اختر الوصف الأقرب إلى زر الإجراء

س 11اختيارالمرحلة 1 التعريفات

HTML CSS السؤال 11

HTML CSS السؤال 11. اختر الوصف الأقرب إلى تخطيط grid

س 12اختيارالمرحلة 1 التعريفات

HTML CSS السؤال 12

HTML CSS السؤال 12. اختر الوصف الأقرب إلى استعلام media

س 13اختيارالمرحلة 1 التعريفات

HTML CSS السؤال 13

HTML CSS السؤال 13. اختر الوصف الأقرب إلى بنية العناوين

س 14اختيارالمرحلة 1 التعريفات

HTML CSS السؤال 14

HTML CSS السؤال 14. اختر الوصف الأقرب إلى زر الإجراء

س 15اختيارالمرحلة 1 التعريفات

HTML CSS السؤال 15

HTML CSS السؤال 15. اختر الوصف الأقرب إلى تخطيط grid

س 16اختيارالمرحلة 1 التعريفات

HTML CSS السؤال 16

HTML CSS السؤال 16. اختر الوصف الأقرب إلى استعلام media

س 17اختيارالمرحلة 1 التعريفات

HTML CSS السؤال 17

HTML CSS السؤال 17. اختر الوصف الأقرب إلى بنية العناوين

س 18اختيارالمرحلة 1 التعريفات

HTML CSS السؤال 18

HTML CSS السؤال 18. اختر الوصف الأقرب إلى زر الإجراء

اختيار من متعدد

HTML CSS السؤال 1

س 1اختيارجديد

HTML CSS السؤال 1. اختر الوصف الأقرب إلى بنية العناوين

<h1>Dashboard</h1>

مرجع

أنماط index.html

المتصفحopen index.html
استدعاء من الذاكرةاقرأ فكرة صغيرة ثم أغلقها واكتبها من الذاكرة
تتبع الكودقبل التشغيل اكتب كيف تتغير المتغيرات سطرا بسطر
اكتبه بنفسكقلل النسخ وأصلح خطأ صغيرا كل مرة

header main section button input

HTML دلالي

<main>
  <h1>Tools</h1>
  <button>Run</button>
</main>
  • استخدم وسوما دلالية
  • اربط labels بالمدخلات
  • الأزرار للإجراءات

flex grid gap alignment

التخطيط

.panel {
  display: grid;
  gap: 12px;
}
  • استخدم gap للمسافات
  • حدد عروضا ثابتة
  • تجنب قفز التخطيط

media query clamp minmax

التجاوب

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
}
  • اختبر الشاشات الصغيرة
  • تجنب خطوطا تكبر مع عرض الشاشة
  • اجعل الأزرار قابلة للوصول