Uncategorised
- التفاصيل
- كتب بواسطة: administrator
- المجموعة: Uncategorised
- الزيارات: 3
- التفاصيل
- كتب بواسطة: administrator
- المجموعة: Uncategorised
- الزيارات: 2
بعد تعلم HTML الذي يُستخدم لبناء هيكل صفحات الويب، يأتي دور CSS التي تُستخدم في تنسيق الشكل العام للموقع وجعله أكثر جمالًا وتنظيمًا.
CSS هي المسؤولة عن الألوان، الخطوط، ترتيب العناصر، وتحسين تجربة المستخدم داخل الصفحة.
ما هي CSS؟
CSS هي اختصار لـ Cascading Style Sheets، وهي لغة تُستخدم لتنسيق صفحات الويب المكتوبة بلغة HTML.
ببساطة:
HTML = بناء الصفحة
CSS = تصميم وتنسيق الصفحة
أهمية CSS
CSS تعتبر عنصر أساسي في أي موقع لأنها تساعد على:
تحسين شكل الموقع وجعله احترافي
تنظيم المحتوى داخل الصفحة
التحكم في الألوان والخطوط
جعل الموقع متجاوب مع جميع الأجهزة (موبايل – كمبيوتر)
طريقة كتابة CSS
تُكتب CSS بطريقة بسيطة تعتمد على اختيار العنصر ثم تطبيق التنسيق عليه:
CSS
selector {
property: value;
}
📌 مثال:
CSS
h1 {
color: blue;
font-size: 30px;
}
هذا المثال يجعل العنوان لونه أزرق وحجمه 30 بيكسل.
أساسيات CSS المهمة
1. الألوان (Colors)
تستخدم لتغيير لون النص أو الخلفية:
CSS
color: red;
background-color: yellow;
2. الخطوط (Fonts)
للتحكم في شكل وحجم النص:
CSS
font-size: 20px;
font-family: Arial;
3. الهوامش (Margin & Padding)
margin: المسافة خارج العنصر
padding: المسافة داخل العنصر
CSS
margin: 10px;
padding: 15px;
4. تنسيق الترتيب (Layout)
تُستخدم لترتيب العناصر داخل الصفحة مثل:
Flexbox
Grid
نصائح مهمة لتعلم CSS
لا تكتفي بالمشاهدة فقط، قم بالتطبيق العملي
جرّب تغيير الأكواد وشاهد النتائج
ابدأ بمشاريع بسيطة مثل صفحة شخصية
كرر التدريب يوميًا لتثبيت المعلومة
الخلاصة
CSS هي خطوة أساسية بعد HTML، وبدونها يكون الموقع غير منسق وبسيط جدًا.
كلما تدربت أكثر على CSS، ستتمكن من تصميم مواقع احترافية بشكل أسهل وأسرع.
- التفاصيل
- كتب بواسطة: administrator
- المجموعة: Uncategorised
- الزيارات: 3
- التفاصيل
- كتب بواسطة: administrator
- المجموعة: Uncategorised
- الزيارات: 5
في عالم تطوير الويب، كل موقع بتشوفيه قدامك بيتبني على أساس واحد ثابت: HTML. هي مش مجرد لغة… دي الهيكل الأساسي لأي صفحة على الإنترنت، زي الهيكل العظمي لجسم الإنسان. من غيرها، مفيش صفحة تشتغل أو تظهر بشكل صحيح.
لو انتي لسه بتبدأي، ففهم HTML خطوة مهمة جدًا لأنها الأساس اللي هتبني عليه كل حاجة بعد كده زي CSS و JavaScript.
🧠 الفكرة الأساسية
HTML هي اختصار لـ HyperText Markup Language، وهي لغة بتستخدم علشان تحددي عناصر الصفحة زي:
العناوين
الفقرات
الصور
الروابط
الجداول
الفورمات
كل حاجة بتظهر قدامك في الموقع بتتكتب باستخدام Tags (وسوم). �
philopaterhany.github.io
🏗️ تركيب صفحة HTML
أي صفحة HTML ليها شكل أساسي ثابت تقريبًا:
HTML
<!DOCTYPE html>
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>
<h1>مرحبا بيكي</h1>
<p>دي أول صفحة HTML</p>
</body>
</html>
شرح بسيط:
<!DOCTYPE html> → بيحدد نوع الصفحة
<html> → بداية الصفحة
<head> → معلومات مش بتظهر للمستخدم
<body> → كل المحتوى اللي بيظهر فعليًا
🧩 أهم عناصر HTML
1. العناوين (Headings)
HTML
<h1>عنوان رئيسي</h1>
<h2>عنوان فرعي</h2>
2. الفقرات (Paragraphs)
HTML
<p>دي فقرة نصية</p>
3. الروابط (Links)
HTML
<a href="https://google.com">افتح جوجل</a>
4. الصور (Images)
HTML
<img src="/image.jpg" alt="صورة">
5. القوائم (Lists)
HTML
<ul>
<li>عنصر 1</li>
<li>عنصر 2</li>
</ul>
🏷️ الـ Attributes (الخصائص)
أي عنصر ممكن يكون ليه خصائص بتزود تحكمك فيه، زي:
HTML
<a href="https://google.com" target="_blank">لينك</a>
href → الرابط
target="_blank" → يفتح في صفحة جديدة
📐 تنظيم الصفحة
في الفيديو تم توضيح أهمية تنظيم الصفحة باستخدام عناصر زي:
HTML
<div>...</div>
<span>...</span>
وكمان استخدام عناصر Semantic زي:
HTML
<header></header>
<nav></nav>
<section></section>
<footer></footer>
دي بتخلي الصفحة منظمة وأسهل للفهم لمحركات البحث والمطورين. �
philopaterhany.github.io
📝 الفورمات (Forms)
من أهم الحاجات في HTML هي الفورمات لجمع البيانات:
HTML
<form>
<input type="text" placeholder="اكتب اسمك">
<input type="submit" value="إرسال">
</form>
🎯 خلاصة الفهم
HTML هي الأساس لأي موقع
كل حاجة عبارة عن عناصر (Tags)
لازم تتعلمي التنظيم الصح للصفحة
هي خطوة البداية قبل CSS و JavaScript