Videos · الفيديوهات
Web Basics — HTML & CSS · أساسيات الويب — HTML و CSS
Pick a topic to watch. · اختر موضوعًا للمشاهدة.
21 video lessons · دروس فيديو 21
2:20
صفحتك الأولى على الويب
كل صفحة فتحتها من قبل هي ملف كتبه شخص ما. لم يرسمه، ولم يصممه في تطبيق - بل كتبه، ويمكنك كتابة واحد في ا…
2:28
العناوين
صفحة من الفقرات بنفس الحجم هي جدار من النص، ويتراجع القارئ عنها. العناوين هي الطريقة التي يجد بها القارئ…
2:07
Bold, italic, break
حتى الآن، كان الوسم يحيط بكتلة كاملة: هذا السطر فقرة، وهذا السطر عنوان. هنا شيء جديد — وسم يحيط بكلمة وا…
2:17
القوائم
اكتب ثلاثة عناصر كثلاثة فقرات ولا يعرف المتصفح أنهم ينتمون معاً. قل قائمة، وتقوم بذلك. القائمة تأخذ وسمي…
2:31
الروابط
كل ما كتبته حتى الآن يجلس في صفحة واحدة ويبقى هناك. وسم واحد يحوله إلى جزء من الويب. وسم الرابط هو a، اخ…
2:25
الصور
أخبر وسم المتصفح بما هو عليه الشيء. هذا يجب أن يخبره أين يذهب ليحصل عليه، وهذا يتطلب نوعاً جديداً من الم…
2:18
صفحة ويب حقيقية
حتى الآن كتبت أجزاء من الصفحة. الصفحة الحقيقية تضعها في إطار، وهو نفس الإطار بشكل أساسي في كل موقع ويب ف…
2:29
التعليقات والتداخل
حتى الآن كان كل وسم جارياً للآخر. الصفحات الحقيقية تضع الوسم داخل وسم آخر، ولحظة حدوث ذلك يبدأ الترتيب ف…
2:17
الجداول
هذا هو الوسم الذي يخطئ به الطلاب أكثر من غيره، دائماً لنفس السبب: هم يخمنون الترتيب بدلاً من قراءته. الج…
2:08
تشكيلات
كل ما صنعته حتى الآن هو شيء للقراءة. النموذج مختلف: إنه شيء يستخدمه الزائر. اكتب حقل إدخال بنوع نصي لتحص…
2:19
الأقسام والفئات
الصفحات الصغيرة مقبولة كطبقة واحدة من الوسوم. الأكبر ليست كذلك — يرى الزائر عنواناً، ثم المحتوى، ثم ملاح…
2:21
CSS الأول الخاص بك
في منتصف المسار، يصل لغة ثانية. HTML يقول ما هي عليه كلthing — هذه فقرة، ذلك عنوان. CSS يقول كيف يبدو — هذا…
2:18
المحددات
في الدرس الماضي كان محددك هو اسم وسم، مما يغير كل فقرة في الصفحة. هذا غالباً كثير جداً. لذلك يوجد اثنان …
2:19
الألوان
اللون هو النقطة التي تتوقف فيها الصفحة عن看起来像作业. كما هو النقطة التي يختار فيها المبتدئ اثني عشر منها وتن…
2:16
تنسيق النص
في الدرس الثاني اختار المتصفح أحجام عناوينك لك. الآن يمكنك اختيارها بنفسك، مع font-size، مقاسة بالبكسل. …
2:27
نموذج الصندوق
عناصران يرفضان الجلوس حيث تريد منهما، ولا يصحح ما تكتبه ذلك. في معظم الأحيان، هذا هو السبب. يعامل CSS كل…
2:17
الهامش الخارجي (Margin)
الهامش هو المسافة خارج الصندوق، وإليك الأمر بخصوصه: في صندوق لا يوجد حوله شيء، فإن الهامش لا يغير أي شيء…
2:16
عرض
كنت تشاهد هذا منذ الدرس الثالث دون اسم له. بعض العناصر تأخذ سطرًا كاملًا لنفسها وتمتد عبر الصفحة: div، و…
2:09
العرض والتوسيط
إليك شيء قد لا تكون لاحظته: صندوق الكتلة عريض بالفعل بقدر الصفحة. كان كذلك طوال الوقت — لم تكن تستطيع فق…
1:58
Flexbox
كل ما قمت ببنائه حتى الآن يتراكم لأسفل، لأن هذا هو ما تفعله صناديق الكتل. لكن شريط التنقل، وصفحة من البط…
2:19
بطاقة الملف الشخصي الخاصة بك
الدرس الأخير، وهو مشروع بدلاً من فكرة جديدة. أنت تبني بطاقة ملف شخصي: صورة في الأعلى، اسم بلون تختاره، و…