HTML و CSS: أساسيات تصميم صفحات الويب — الإعلام الآلي — الأولى ثانوي

HTML و CSS: أساسيات تصميم صفحات الويب

HTML لغة ترميز النصوص الفائقة لبناء هيكل صفحات الويب. CSS لغة تصميم لتنسيق وتجميل الصفحات.

1. هيكل صفحة HTML

<!DOCTYPE html> – <html> – <head> (معلومات الصفحة) – <body> (محتويات الصفحة). الوسوم الأساسية: h1-h6 (عناوين)، p (فقرة)، img (صورة)، a (رابط)، ul/ol (قوائم).

2. الوسوم الدلالية (Semantic HTML)

header, nav, main, section, article, aside, footer. الوسوم الدلالية تحسن تحسين محركات البحث (SEO) وتجعل الكود أكثر قابلية للقراءة.

3. أساسيات CSS

ثلاث طرق لإضافة CSS: داخلي (<style>)، خارجي (<link>)، مباشر (style attribute). المحددات: عنصر (.element)، class (.class)، id (#id).

4. خصائص CSS أساسية

color (لون النص)، background-color (لون الخلفية)، font-size (حجم الخط)، margin (هوامش خارجية)، padding (حشوة داخلية)، border (حدود). Flexbox: display:flex – مرن وسهل لمحاذاة العناصر.

مثال

<h1 style="color:blue; text-align:center;">مرحبا بالعالم</h1> – يظهر عنوانا أزرق في المنتصف.

تمارين

أنشئ صفحة HTML تحتوي على عنوان رئيسي وفقرة ورابط.
استخدم CSS لتلوين الخلفية وتغيير حجم الخط.

HTML و CSS: أساسيات تصميم صفحات الويب — الإعلام الآلي — الأولى ثانوي