مشروع التيراريوم الجزء الأول: مقدمة إلى HTML
HTML، أو لغة ترميز النص التشعبي، هي الأساس لكل موقع ويب قمت بزيارته. فكر في HTML كهيكل عظمي يمنح الصفحات الإلكترونية بنيتها – فهو يحدد مكان المحتوى، وكيف يتم تنظيمه، وما الذي يمثله كل جزء. بينما ستقوم CSS لاحقًا "بتزيين" HTML بالألوان والتصميمات، وستجعل JavaScript الصفحات تفاعلية، فإن HTML يوفر الهيكل الأساسي الذي يجعل كل شيء ممكنًا. في هذا الدرس، ستقوم بإنشاء هيكل HTML لواجهة تيراريوم افتراضية. هذا المشروع العملي سيعلمك مفاهيم HTML الأساسية أثناء بناء شيء جذاب بصريًا. ستتعلم كيفية تنظيم المحتوى باستخدام العناصر الدلالية، والعمل مع الصور، وإنشاء الأساس لتطبيق ويب تفاعلي. بنهاية هذا الدرس، سيكون لديك صفحة HTML تعمل وتعرض صور النباتات في أعمدة منظمة، جاهزة للتصميم في الدرس التالي. لا تقلق إذا بدا الأمر بسيطًا في البداية – هذا بالضبط ما يجب أن يكون عليه HTML قبل أن تضيف CSS اللمسات الجمالية. ## اختبار ما قبل المحاضرة اختبار ما قبل المحاضرة ## إعداد مشروعك قبل أن نبدأ في كتابة كود HTML، دعنا نُعد مساحة عمل مناسبة لمشروع التيراريوم الخاص بك. إنشاء هيكل ملفات منظم منذ البداية هو عادة مهمة ستفيدك طوال رحلتك في تطوير الويب. ### المهمة: إنشاء هيكل مشروعك ستقوم بإنشاء مجلد مخصص لمشروع التيراريوم الخاص بك وإضافة أول ملف HTML. إليك طريقتان يمكنك استخدامهما: الخيار الأول: باستخدام Visual Studio Code 1. افتح Visual Studio Code 2. انقر على "File" → "Open Folder" أو استخدم Ctrl+K, Ctrl+O (Windows/Linux) أو Cmd+K, Cmd+O (Mac) 3. قم بإنشاء مجلد جديد باسم terrarium واختره 4. في لوحة Explorer، انقر على أيقونة "New File" 5. قم بتسمية ملفك index.html الخيار الثاني: باستخدام أوامر الطرفية ما الذي تقوم به هذه الأوامر: - إنشاء مجلد جديد باسم terrarium لمشروعك - التنقل داخل مجلد التيراريوم - إنشاء ملف فارغ باسم index.html - فتح الملف في Visual Studio Code للتعديل ## فهم هيكل مستند HTML يتبع كل مستند HTML هيكلًا محددًا تحتاجه المتصفحات لفهمه وعرضه بشكل صحيح. فكر في هذا الهيكل كرسالة رسمية – تحتوي على عناصر مطلوبة بترتيب معين تساعد المتصفح (المستلم في هذه الحالة) على معالجة المحتوى بشكل صحيح. لنبدأ بإضافة الأساس الضروري الذي يحتاجه كل مستند HTML. ### إعلان DOCTYPE والعنصر الجذر أول سطرين في أي ملف HTML يعملان كـ "مقدمة" للمستند للمتصفح: فهم ما يفعله هذا الكود: - يعلن نوع المستند كـ HTML5 باستخدام <!DOCTYPE html> - ينشئ العنصر الجذر <html> الذي سيحتوي على كل محتوى الصفحة - يحدد معايير الويب الحديثة لعرض المتصفح بشكل صحيح - يضمن عرضًا متسقًا عبر المتصفحات والأجهزة المختلفة ### 🔄 توقف تربوي توقف وتأمل: قبل المتابعة، تأكد من أنك تفهم: - ✅ لماذا يحتاج كل مستند HTML إلى إعلان DOCTYPE - ✅ ما الذي يحتويه العنصر الجذر <html> - ✅ كيف يساعد هذا الهيكل المتصفحات على عرض الصفحات بشكل صحيح اختبار ذاتي سريع: هل يمكنك شرح ما يعنيه "عرض متوافق مع المعايير" بكلماتك الخاصة؟ ## إضافة بيانات وصفية أساسية للمستند قسم <head> في مستند HTML يحتوي على معلومات مهمة تحتاجها المتصفحات ومحركات البحث، ولكن لا يراها الزوار مباشرة على الصفحة. فكر فيه كـ "معلومات خلف الكواليس" التي تساعد صفحتك على العمل بشكل صحيح والظهور بشكل صحيح عبر الأجهزة والمنصات المختلفة. تخبر هذه البيانات الوصفية المتصفحات كيفية عرض صفحتك، وما هي ترميز الأحرف التي يجب استخدامها، وكيفية التعامل مع أحجام الشاشات المختلفة – كل ذلك ضروري لإنشاء صفحات ويب احترافية وسهلة الوصول. ### المهمة: إضافة رأس المستند أضف قسم <head> هذا بين علامات الفتح والإغلاق <html>: تفصيل ما يحققه كل عنصر: - يحدد عنوان الصفحة الذي يظهر في علامات تبويب المتصفح ونتائج البحث - يحدد ترميز الأحرف UTF-8 لعرض النص بشكل صحيح عالميًا - يضمن التوافق مع الإصدارات الحديثة من Internet Explorer - يُعد التصميم المتجاوب من خلال ضبط نافذة العرض لتتناسب مع عرض الجهاز - يتحكم في مستوى التكبير الأولي لعرض المحتوى بالحجم الطبيعي ## بناء جسم المستند عنصر <body> يحتوي على كل المحتوى المرئي لصفحتك – كل ما سيراه المستخدمون ويتفاعلون معه. بينما قدم قسم <head> تعليمات للمتصفح، يحتوي قسم <body> على المحتوى الفعلي: النصوص، الصور، الأزرار، والعناصر الأخرى التي تشكل واجهة المستخدم الخاصة بك. دعنا نضيف هيكل الجسم ونفهم كيف تعمل علامات HTML معًا لإنشاء محتوى ذو معنى. ### فهم هيكل علامات HTML تستخدم HTML علامات مزدوجة لتعريف العناصر. تحتوي معظم العلامات على علامة فتح مثل <p> وعلامة إغلاق مثل </p>، مع محتوى بينهما: <p>مرحبًا، العالم!</p>. هذا ينشئ عنصر فقرة يحتوي على النص "مرحبًا، العالم!". ### المهمة: إضافة عنصر الجسم قم بتحديث ملف HTML الخاص بك ليشمل عنصر <body>: ما الذي يوفره هذا الهيكل الكامل: - يُنشئ إطار عمل مستند HTML5 الأساسي - يتضمن بيانات وصفية أساسية لعرض المتصفح بشكل صحيح - يُنشئ جسمًا فارغًا جاهزًا لمحتواك المرئي - يتبع أفضل الممارسات الحديثة لتطوير الويب الآن أنت جاهز لإضافة العناصر المرئية للتيراريوم الخاص بك. سنستخدم عناصر <div> كحاويات لتنظيم أقسام المحتوى المختلفة، وعناصر <img> لعرض صور النباتات. ### العمل مع الصور وحاويات التخطيط الصور لها خصوصية في HTML لأنها تستخدم علامات "مغلقة ذاتيًا". على عكس العناصر مثل <p></p> التي تحيط بالمحتوى، تحتوي علامة <img> على كل المعلومات التي تحتاجها داخل العلامة نفسها باستخدام سمات مثل src لمسار ملف الصورة وalt لإمكانية الوصول. قبل إضافة الصور إلى HTML الخاص بك، ستحتاج إلى تنظيم ملفات مشروعك بشكل صحيح عن طريق إنشاء مجلد للصور وإضافة الرسومات النباتية. أولاً، قم بإعداد الصور: 1. قم بإنشاء مجلد باسم images داخل مجلد مشروع التيراريوم الخاص بك 2. قم بتنزيل صور النباتات من مجلد الحل (14 صورة نباتية إجمالاً) 3. انسخ جميع صور النباتات إلى مجلد images الجديد الخاص بك ### المهمة: إنشاء تخطيط عرض النباتات الآن أضف صور النباتات منظمة في عمودين بين علامات <body></body>: خطوة بخطوة، ما الذي يحدث في هذا الكود: - يُنشئ حاوية الصفحة الرئيسية بـ id="page" لاحتواء كل المحتوى - يُنشئ حاويتين للعمودين: left-container وright-container - ينظم 7 نباتات في العمود الأيسر و7 نباتات في العمود الأيمن - يُغلف كل صورة نباتية في div باسم plant-holder لتحديد موضعها الفردي - يُطبق أسماء فئات متسقة لتصميم CSS في الدرس التالي - يُعين معرفات فريدة لكل صورة نباتية لتفاعل JavaScript لاحقًا - يتضمن مسارات ملفات صحيحة تشير إلى مجلد الصور ### 🔄 توقف تربوي فهم الهيكل: خذ لحظة لمراجعة هيكل HTML الخاص بك: - ✅ هل يمكنك تحديد الحاويات الرئيسية في تخطيطك؟ - ✅ هل تفهم لماذا تحتوي كل صورة على معرف فريد؟ - ✅ كيف تصف الغرض من divs plant-holder؟ فحص بصري: افتح ملف HTML الخاص بك في المتصفح. يجب أن ترى: - قائمة أساسية لصور النباتات - صور منظمة في عمودين - تخطيط بسيط وغير مصمم تذكر: هذا المظهر البسيط هو بالضبط ما يجب أن يبدو عليه HTML قبل تصميم CSS! مع إضافة هذا الترميز، ستظهر النباتات على الشاشة، على الرغم من أنها لن تبدو مصقولة بعد – هذا ما ستفعله CSS في الدرس التالي! في الوقت الحالي، لديك أساس HTML قوي ينظم المحتوى بشكل صحيح ويتبع أفضل ممارسات إمكانية الوصول. ## استخدام HTML الدلالي لإمكانية الوصول HTML الدلالي يعني اختيار عناصر HTML بناءً على معناها وغرضها، وليس فقط مظهرها. عندما تستخدم الترميز الدلالي، فإنك توصل هيكل ومعنى المحتوى الخاص بك إلى المتصفحات ومحركات البحث والتقنيات المساعدة مثل قارئات الشاشة. هذا النهج يجعل مواقع الويب الخاصة بك أكثر سهولة للمستخدمين ذوي الإعاقات ويساعد محركات البحث على فهم المحتوى الخاص بك بشكل أفضل. إنه مبدأ أساسي لتطوير الويب الحديث الذي يخلق تجارب أفضل للجميع. ### إضافة عنوان صفحة دلالي دعنا نضيف عنوانًا مناسبًا لصفحة التيراريوم الخاصة بك. قم بإدراج هذا السطر مباشرة بعد علامة الفتح <body>: لماذا يهم الترميز الدلالي: - يساعد قارئات الشاشة على التنقل وفهم هيكل الصفحة - يحسن تحسين محركات البحث (SEO) من خلال توضيح تسلسل المحتوى - يعزز إمكانية الوصول للمستخدمين ذوي الإعاقات البصرية أو الاختلافات الإدراكية - يخلق تجارب مستخدم أفضل عبر جميع الأجهزة والمنصات - يتبع معايير الويب وأفضل الممارسات للتطوير الاحترافي أمثلة على الخيارات الدلالية مقابل غير الدلالية: ## إنشاء حاوية التيراريوم الآن دعنا نضيف هيكل HTML للتيراريوم نفسه – الحاوية الزجاجية حيث سيتم وضع النباتات في النهاية. هذا القسم يوضح مفهومًا مهمًا: يوفر HTML الهيكل، ولكن بدون تصميم CSS، لن تكون هذه العناصر مرئية بعد. يستخدم ترميز التيراريوم أسماء فئات وصفية ستجعل تصميم CSS بديهيًا وسهل الصيانة في الدرس التالي. ### المهمة: إضافة هيكل التيراريوم قم بإدراج هذا الترميز فوق علامة </div> الأخيرة (قبل علامة الإغلاق لحاوية الصفحة): فهم هيكل التيراريوم هذا: - يُنشئ حاوية تيراريوم رئيسية بمعرف فريد للتصميم - تعريف عناصر منفصلة لكل مكون بصري (الأعلى، الجدران، التراب، الأسفل) - يتضمن عناصر متداخلة لتأثيرات انعكاس الزجاج (العناصر اللامعة) - يستخدم أسماء فئات وصفية تشير بوضوح إلى وظيفة كل عنصر - يُجهز الهيكل لتنسيق CSS الذي سيُظهر مظهر التيراريوم الزجاجي ### 🔄 مراجعة تعليمية إتقان هيكل HTML: قبل المضي قدمًا، تأكد من أنك تستطيع: - ✅ شرح الفرق بين هيكل HTML والمظهر البصري - ✅ التمييز بين عناصر HTML الدلالية وغير الدلالية - ✅ وصف كيف يمكن أن يفيد الترميز الصحيح إمكانية الوصول - ✅ التعرف على هيكل شجرة المستند بالكامل اختبار فهمك: حاول فتح ملف HTML الخاص بك في متصفح مع تعطيل JavaScript وإزالة CSS. هذا يظهر لك الهيكل الدلالي النقي الذي أنشأته! --- ## تحدي وكيل GitHub Copilot استخدم وضع الوكيل لإكمال التحدي التالي: الوصف: قم بإنشاء هيكل HTML دلالي لقسم دليل العناية بالنباتات يمكن إضافته إلى مشروع التيراريوم. المهمة: قم بإنشاء قسم HTML دلالي يتضمن عنوانًا رئيسيًا "دليل العناية بالنباتات"، وثلاثة أقسام فرعية مع عناوين "الري"، "متطلبات الضوء"، و"العناية بالتربة"، يحتوي كل منها على فقرة من معلومات العناية بالنباتات. استخدم علامات HTML الدلالية المناسبة مثل <section>، <h2>، <h3>، و<p> لتنظيم المحتوى بشكل مناسب. تعرف على المزيد حول وضع الوكيل هنا. ## تحدي استكشاف تاريخ HTML التعرف على تطور الويب لقد تطور HTML بشكل كبير منذ أن أنشأ تيم بيرنرز لي أول متصفح ويب في CERN عام 1990. بعض العلامات القديمة مثل <marquee> أصبحت الآن مهملة لأنها لا تعمل بشكل جيد مع معايير الوصول الحديثة ومبادئ التصميم المتجاوب. جرب هذا التمرين: 1. قم مؤقتًا بتغليف عنوان <h1> الخاص بك داخل علامة <marquee>: <marquee><h1>تيراريومي</h1></marquee> 2. افتح صفحتك في متصفح ولاحظ تأثير التمرير 3. فكر في سبب إهمال هذه العلامة (تلميح: فكر في تجربة المستخدم وإمكانية الوصول) 4. قم بإزالة علامة <marquee> وارجع إلى الترميز الدلالي أسئلة للتفكير: - كيف يمكن أن يؤثر عنوان متحرك على المستخدمين ذوي الإعاقات البصرية أو حساسية الحركة؟ - ما هي تقنيات CSS الحديثة التي يمكن أن تحقق تأثيرات بصرية مشابهة بشكل أكثر سهولة؟ - لماذا من المهم استخدام معايير الويب الحالية بدلاً من العناصر المهملة؟ استكشف المزيد حول عناصر HTML المهملة والقديمة لفهم كيف تتطور معايير الويب لتحسين تجربة المستخدم. ## اختبار ما بعد المحاضرة اختبار ما بعد المحاضرة ## المراجعة والدراسة الذاتية تعميق معرفتك بـ HTML HTML كان أساس الويب لأكثر من 30 عامًا، تطور من لغة ترميز بسيطة للمستندات إلى منصة متطورة لبناء التطبيقات التفاعلية. فهم هذا التطور يساعدك على تقدير معايير الويب الحديثة واتخاذ قرارات تطوير أفضل. مسارات التعلم الموصى بها: 1. تاريخ وتطور HTML - ابحث في الجدول الزمني من HTML 1.0 إلى HTML5 - استكشف سبب إهمال بعض العلامات (إمكانية الوصول، ملاءمة الأجهزة المحمولة، سهولة الصيانة) - تحقق من ميزات HTML الناشئة والمقترحات 2. الغوص العميق في HTML الدلالي - ادرس القائمة الكاملة لعناصر HTML5 الدلالية - تدرب على تحديد متى تستخدم <article>، <section>، <aside>، و<main> - تعلم عن سمات ARIA لتحسين إمكانية الوصول 3. تطوير الويب الحديث - استكشف بناء مواقع ويب متجاوبة على Microsoft Learn - فهم كيفية دمج HTML مع CSS وJavaScript - تعلم عن أفضل ممارسات أداء الويب وتحسين محركات البحث أسئلة للتفكير: - ما هي علامات HTML المهملة التي اكتشفتها، ولماذا تم إزالتها؟ - ما هي ميزات HTML الجديدة التي يتم اقتراحها للإصدارات المستقبلية؟ - كيف يساهم HTML الدلالي في إمكانية الوصول وتحسين محركات البحث؟ ### ⚡ ما يمكنك القيام به في الدقائق الخمس القادمة - [ ] افتح أدوات المطور (F12) وتحقق من هيكل HTML لموقعك المفضل - [ ] أنشئ ملف HTML بسيطًا يحتوي على علامات أساسية: <h1>، <p>، و<img> - [ ] تحقق من صحة HTML الخاص بك باستخدام أداة التحقق من HTML عبر الإنترنت من W3C - [ ] حاول إضافة تعليق إلى HTML الخاص بك باستخدام <!-- تعليق --> ### 🎯 ما يمكنك إنجازه خلال الساعة - [ ] أكمل اختبار ما بعد الدرس وراجع مفاهيم HTML الدلالية - [ ] قم ببناء صفحة ويب بسيطة عن نفسك باستخدام هيكل HTML صحيح - [ ] جرب مستويات العناوين المختلفة وعلامات تنسيق النص - [ ] أضف صور وروابط لممارسة دمج الوسائط المتعددة - [ ] ابحث عن ميزات HTML5 التي لم تجربها بعد ### 📅 رحلتك الأسبوعية مع HTML - [ ] أكمل مهمة مشروع التيراريوم باستخدام الترميز الدلالي - [ ] أنشئ صفحة ويب قابلة للوصول باستخدام تسميات وأدوار ARIA - [ ] تدرب على إنشاء النماذج باستخدام أنواع الإدخال المختلفة - [ ] استكشف واجهات برمجة تطبيقات HTML5 مثل localStorage أو geolocation - [ ] ادرس أنماط HTML المتجاوبة وتصميم الأولوية للجوال - [ ] راجع أكواد HTML الخاصة بالمطورين الآخرين للحصول على أفضل الممارسات ### 🌟 رحلتك الشهرية لإتقان أساسيات الويب - [ ] قم ببناء موقع ويب للملف الشخصي يعرض إتقانك لـ HTML - [ ] تعلم قوالب HTML باستخدام إطار عمل مثل Handlebars - [ ] ساهم في مشاريع مفتوحة المصدر من خلال تحسين وثائق HTML - [ ] أتقن مفاهيم HTML المتقدمة مثل العناصر المخصصة - [ ] دمج HTML مع أطر CSS ومكتبات JavaScript - [ ] قم بتوجيه الآخرين الذين يتعلمون أساسيات HTML ## 🎯 جدول زمني لإتقان HTML ### 🛠️ ملخص أدوات HTML الخاصة بك بعد إكمال هذا الدرس، لديك الآن: - هيكل المستند: أساس HTML5 كامل مع DOCTYPE صحيح - الترميز الدلالي: علامات ذات معنى تعزز إمكانية الوصول وتحسين محركات البحث - دمج الصور: ممارسات تنظيم الملفات والنص البديل بشكل صحيح - حاويات التخطيط: استخدام استراتيجي للعناصر div مع أسماء فئات وصفية - وعي إمكانية الوصول: فهم التنقل باستخدام قارئات الشاشة - المعايير الحديثة: ممارسات HTML5 الحالية ومعرفة العلامات المهملة - أساس المشروع: قاعدة صلبة لتنسيق CSS وتفاعل JavaScript الخطوات التالية: هيكل HTML الخاص بك جاهز لتنسيق CSS! الأساس الدلالي الذي بنيته سيجعل الدرس التالي أسهل بكثير للفهم. ## المهمة تمرن على HTML: قم ببناء نموذج مدونة --- إخلاء المسؤولية: تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسير خاطئ ينشأ عن استخدام هذه الترجمة.
مشروع التيراريوم الجزء الثاني: مقدمة في CSS
هل تتذكر كيف كان شكل التيراريوم الخاص بك بسيطًا جدًا؟ CSS هو المكان الذي نحول فيه هذا الهيكل البسيط إلى شيء جذاب بصريًا. إذا كان HTML يشبه بناء إطار المنزل، فإن CSS هو كل ما يجعل المنزل يبدو وكأنه منزل - ألوان الطلاء، ترتيب الأثاث، الإضاءة، وكيفية تدفق الغرف معًا. فكر في كيف بدأ قصر فرساي ككوخ صيد بسيط، ولكن الاهتمام الدقيق بالديكور والتصميم حوله إلى واحد من أعظم المباني في العالم. اليوم، سنحول التيراريوم الخاص بك من عملي إلى مصقول. ستتعلم كيفية وضع العناصر بدقة، وإنشاء تخطيطات تستجيب لأحجام الشاشات المختلفة، وخلق الجاذبية البصرية التي تجعل المواقع الإلكترونية ممتعة. بحلول نهاية هذا الدرس، سترى كيف يمكن للتنسيق الاستراتيجي باستخدام CSS أن يحسن مشروعك بشكل كبير. دعونا نضيف بعض الأناقة إلى التيراريوم الخاص بك. ## اختبار ما قبل المحاضرة اختبار ما قبل المحاضرة ## البدء مع CSS غالبًا ما يُعتقد أن CSS مجرد "جعل الأشياء جميلة"، لكنها تخدم غرضًا أوسع بكثير. CSS تشبه المخرج في فيلم - تتحكم ليس فقط في كيفية ظهور كل شيء، ولكن أيضًا في كيفية تحركه، استجابته للتفاعل، وتكيفه مع المواقف المختلفة. CSS الحديثة قادرة بشكل ملحوظ. يمكنك كتابة كود يقوم بضبط التخطيطات تلقائيًا للهواتف، الأجهزة اللوحية، وأجهزة الكمبيوتر المكتبية. يمكنك إنشاء رسوم متحركة سلسة توجه انتباه المستخدمين حيثما كان ذلك ضروريًا. يمكن أن تكون النتائج مثيرة للإعجاب عندما تعمل كل هذه العناصر معًا. ما سنحققه في هذا الدرس: - إنشاء تصميم بصري كامل للتيراريوم الخاص بك باستخدام تقنيات CSS الحديثة - استكشاف مفاهيم أساسية مثل التسلسل، الوراثة، ومحددات CSS - تنفيذ استراتيجيات وضع وتخطيط استجابة - بناء حاوية التيراريوم باستخدام أشكال CSS والتنسيق ### المتطلبات الأساسية يجب أن تكون قد أكملت هيكل HTML للتيراريوم الخاص بك من الدرس السابق وأن يكون جاهزًا للتنسيق. ### إعداد ملف CSS الخاص بك قبل أن نبدأ في التنسيق، نحتاج إلى ربط CSS بـ HTML. هذا الاتصال يخبر المتصفح بمكان العثور على تعليمات التنسيق للتيراريوم الخاص بنا. في مجلد التيراريوم الخاص بك، قم بإنشاء ملف جديد يسمى style.css، ثم قم بربطه في قسم <head> من مستند HTML الخاص بك: ما يفعله هذا الكود: - إنشاء اتصال بين ملفات HTML وCSS الخاصة بك - إخبار المتصفح بتحميل وتطبيق التنسيقات من style.css - استخدام السمة rel="stylesheet" لتحديد أن هذا ملف CSS - الإشارة إلى مسار الملف باستخدام href="./style.css" ## فهم تسلسل CSS هل تساءلت يومًا لماذا يُطلق على CSS اسم "أوراق الأنماط المتسلسلة"؟ الأنماط تتسلسل مثل الشلال، وأحيانًا تتعارض مع بعضها البعض. فكر في كيفية عمل هياكل القيادة العسكرية - قد يقول أمر عام "يرتدي جميع الجنود اللون الأخضر"، ولكن قد يقول أمر محدد لوحدتك "ارتدِ الأزرق الرسمي للحفل". التعليمات الأكثر تحديدًا لها الأولوية. CSS تتبع منطقًا مشابهًا، وفهم هذا التسلسل يجعل تصحيح الأخطاء أكثر سهولة. ### تجربة أولوية التسلسل دعونا نرى التسلسل في العمل من خلال إنشاء تعارض في الأنماط. أولاً، أضف نمطًا داخليًا إلى علامة <h1> الخاصة بك: ما يفعله هذا الكود: - تطبيق لون أحمر مباشرة على عنصر <h1> باستخدام التنسيق الداخلي - استخدام السمة style لتضمين CSS مباشرة في HTML - إنشاء قاعدة نمط ذات أولوية عالية لهذا العنصر المحدد بعد ذلك، أضف هذه القاعدة إلى ملف style.css الخاص بك: في ما سبق، قمنا بـ: - تعريف قاعدة CSS تستهدف جميع عناصر <h1> - تعيين لون النص إلى الأزرق باستخدام ورقة أنماط خارجية - إنشاء قاعدة ذات أولوية أقل مقارنة بالأنماط الداخلية ✅ اختبار المعرفة: ما اللون الذي يظهر في تطبيق الويب الخاص بك؟ لماذا يفوز هذا اللون؟ هل يمكنك التفكير في سيناريوهات قد ترغب فيها في تجاوز الأنماط؟ ## وراثة CSS في العمل وراثة CSS تعمل مثل الوراثة الجينية - العناصر ترث خصائص معينة من عناصرها الأم. إذا قمت بتعيين نوع الخط على عنصر body، فإن كل النصوص داخله تستخدم نفس الخط تلقائيًا. يشبه ذلك كيف ظهر فك عائلة هابسبورغ المميز عبر الأجيال دون تحديده لكل فرد. ومع ذلك، ليس كل شيء يتم وراثته. أنماط النصوص مثل الخطوط والألوان يتم وراثتها، ولكن خصائص التخطيط مثل الهوامش والحدود لا يتم وراثتها. تمامًا مثلما قد يرث الأطفال السمات الجسدية ولكن ليس اختيارات الموضة لوالديهم. ### ملاحظة وراثة الخطوط دعونا نرى الوراثة في العمل من خلال تعيين نوع الخط على عنصر <body>: تفصيل ما يحدث هنا: - تعيين نوع الخط للصفحة بأكملها عن طريق استهداف عنصر <body> - استخدام مجموعة خطوط مع خيارات احتياطية لتحسين توافق المتصفح - تطبيق خطوط نظام حديثة تبدو رائعة عبر أنظمة تشغيل مختلفة - ضمان أن جميع العناصر الفرعية ترث هذا الخط ما لم يتم تجاوزه بشكل محدد افتح أدوات المطور في المتصفح (F12)، انتقل إلى علامة التبويب العناصر، وقم بفحص عنصر <h1> الخاص بك. سترى أنه يرث نوع الخط من body: ✅ وقت التجربة: حاول تعيين خصائص أخرى قابلة للوراثة على <body> مثل color، line-height، أو text-align. ماذا يحدث لعناوينك والعناصر الأخرى؟ ### 🔄 تقييم تربوي فهم أساسيات CSS: قبل الانتقال إلى المحددات، تأكد من أنك تستطيع: - ✅ شرح الفرق بين التسلسل والوراثة - ✅ التنبؤ بالنمط الذي سيفوز في تعارض التحديد - ✅ تحديد الخصائص التي ترث من العناصر الأم - ✅ ربط ملفات CSS بـ HTML بشكل صحيح اختبار سريع: إذا كان لديك هذه الأنماط، ما اللون الذي سيكون عليه <h1> داخل <div class="special">؟ الإجابة: أحمر (محدد العنصر يستهدف h1 مباشرة) ## إتقان محددات CSS محددات CSS هي طريقتك لاستهداف عناصر محددة للتنسيق. تعمل مثل إعطاء توجيهات دقيقة - بدلاً من قول "المنزل"، قد تقول "المنزل الأزرق ذو الباب الأحمر في شارع مابل". CSS توفر طرقًا مختلفة لتكون محددًا، واختيار المحدد الصحيح يشبه اختيار الأداة المناسبة للمهمة. أحيانًا تحتاج إلى تنسيق كل الأبواب في الحي، وأحيانًا تحتاج إلى باب واحد فقط. ### محددات العناصر (العلامات) محددات العناصر تستهدف عناصر HTML حسب اسم العلامة. إنها مثالية لتعيين أنماط أساسية تنطبق بشكل واسع عبر صفحتك: فهم هذه الأنماط: - تعيين طباعة متسقة عبر الصفحة بأكملها باستخدام محدد body - إزالة الهوامش والتعبئة الافتراضية للمتصفح لتحكم أفضل - تنسيق جميع عناصر العناوين بالألوان، المحاذاة، والتباعد - استخدام وحدات rem لتحديد حجم الخط القابل للتوسع والوصول بينما تعمل محددات العناصر بشكل جيد للتنسيق العام، ستحتاج إلى محددات أكثر تحديدًا لتنسيق المكونات الفردية مثل النباتات في التيراريوم الخاص بك. ### محددات المعرفات للعناصر الفريدة محددات المعرفات تستخدم رمز # وتستهدف العناصر ذات سمات id المحددة. نظرًا لأن المعرفات يجب أن تكون فريدة في الصفحة، فهي مثالية لتنسيق العناصر الفردية والخاصة مثل حاويات النباتات الجانبية في التيراريوم الخاص بنا. دعونا ننشئ التنسيق لحاويات الجوانب في التيراريوم حيث ستعيش النباتات: ما يحققه هذا الكود: - وضع الحاويات على الحواف اليسرى واليمنى باستخدام وضع absolute - استخدام وحدات vh (ارتفاع نافذة العرض) لتحديد ارتفاع استجابة يتكيف مع حجم الشاشة - تطبيق box-sizing: border-box بحيث يتم تضمين التعبئة في العرض الإجمالي - إزالة وحدات px غير الضرورية من القيم الصفرية للحصول على كود أنظف - تعيين لون خلفية خفيف أسهل على العين من الرمادي القاسي ✅ تحدي جودة الكود: لاحظ كيف ينتهك هذا CSS مبدأ DRY (لا تكرر نفسك). هل يمكنك إعادة صياغته باستخدام كل من المعرف والفئة؟ النهج المحسن: ### محددات الفئات لأنماط قابلة لإعادة الاستخدام محددات الفئات تستخدم الرمز . وهي مثالية عندما تريد تطبيق نفس الأنماط على عناصر متعددة. على عكس المعرفات، يمكن إعادة استخدام الفئات في جميع أنحاء HTML الخاص بك، مما يجعلها مثالية لأنماط التنسيق المتسقة. في التيراريوم الخاص بنا، تحتاج كل نبتة إلى تنسيق مشابه ولكن أيضًا تحتاج إلى وضع فردي. سنستخدم مزيجًا من الفئات لأنماط مشتركة والمعرفات لوضع فردي. إليك هيكل HTML لكل نبتة: العناصر الرئيسية المفسرة: - استخدام class="plant-holder" لتنسيق الحاوية بشكل متسق عبر جميع النباتات - تطبيق class="plant" لتنسيق الصورة المشتركة والسلوك - تضمين id="plant1" الفريد لوضع فردي وتفاعل JavaScript - توفير نص بديل وصفي لإمكانية الوصول لقراء الشاشة الآن أضف هذه الأنماط إلى ملف style.css الخاص بك: تفصيل هذه الأنماط: - إنشاء وضع نسبي لحامل النبات لتأسيس سياق الوضع - تعيين كل حامل نبات إلى ارتفاع 13%، مما يضمن أن جميع النباتات تتناسب عموديًا دون التمرير - تحريك الحوامل قليلاً إلى اليسار لتوسيط النباتات بشكل أفضل داخل حاوياتها - السماح للنباتات بالتوسع بشكل استجابة باستخدام خصائص max-width وmax-height - استخدام z-index لتكديس النباتات فوق العناصر الأخرى في التيراريوم - إضافة تأثير تحويم خفيف مع انتقالات CSS لتحسين التفاعل مع المستخدم ✅ التفكير النقدي: لماذا نحتاج إلى كل من .plant-holder و.plant؟ ماذا سيحدث إذا حاولنا استخدام واحد فقط؟ ## فهم وضع CSS وضع CSS يشبه أن تكون مخرج المسرح - توجه مكان وقوف كل ممثل وكيف يتحركون على المسرح. بعض الممثلين يتبعون التشكيل القياسي، بينما يحتاج الآخرون إلى وضع محدد لتأثير درامي. بمجرد فهم الوضع، تصبح العديد من تحديات التخطيط قابلة للإدارة. هل تحتاج إلى شريط تنقل يبقى في الأعلى أثناء التمرير؟ الوضع يتعامل مع ذلك. هل تريد نافذة منبثقة تظهر في موقع معين؟ هذا أيضًا من خلال الوضع. ### القيم الخمس للوضع ### الوضع في التيراريوم الخاص بنا يستخدم التيراريوم الخاص بنا مزيجًا استراتيجيًا من أنواع الوضع لإنشاء التخطيط المطلوب: فهم استراتيجية الوضع: - الحاويات المطلقة يتم إزالتها من تدفق المستند العادي وتثبيتها على حواف الشاشة - حاملات النباتات النسبية تنشئ سياق وضع بينما تبقى في تدفق المستند - النباتات المطلقة يمكن وضعها بدقة داخل حاوياتها النسبية - هذا المزيج يسمح للنباتات بالتكدس عموديًا بينما تكون قابلة للوضع الفردي ✅ وقت التجربة: حاول تغيير قيم الوضع ولاحظ النتائج: - ماذا يحدث إذا قمت بتغيير .container من absolute إلى relative؟ - كيف يتغير التخطيط إذا استخدمت .plant-holder خاصية absolute بدلاً من relative؟ - ماذا يحدث عند تغيير وضعية .plant إلى relative؟ ### 🔄 مراجعة تعليمية إتقان تحديد المواقع باستخدام CSS: توقف للتحقق من فهمك: - ✅ هل يمكنك شرح سبب حاجة النباتات إلى وضعية مطلقة للسحب والإفلات؟ - ✅ هل تفهم كيف تخلق الحاويات النسبية سياقًا لتحديد المواقع؟ - ✅ لماذا تستخدم الحاويات الجانبية وضعية مطلقة؟ - ✅ ماذا سيحدث إذا أزلت التصريحات الخاصة بالوضعية تمامًا؟ صلة بالعالم الحقيقي: فكر في كيفية تشابه تحديد المواقع باستخدام CSS مع التخطيط في العالم الحقيقي: - Static: الكتب على رف (ترتيب طبيعي) - Relative: تحريك كتاب قليلاً مع بقائه في مكانه - Absolute: وضع إشارة مرجعية على صفحة معينة - Fixed: ملاحظة لاصقة تبقى مرئية أثناء تقليب الصفحات ## بناء التيراريوم باستخدام CSS الآن سنقوم ببناء جرة زجاجية باستخدام CSS فقط - دون الحاجة إلى صور أو برامج تصميم. إن إنشاء زجاج واقعي المظهر، الظلال، وتأثيرات العمق باستخدام تحديد المواقع والشفافية يظهر قدرات CSS البصرية. هذه التقنية تشبه كيف استخدم المعماريون في حركة باوهاوس أشكالًا هندسية بسيطة لإنشاء هياكل معقدة وجميلة. بمجرد فهم هذه المبادئ، ستتعرف على تقنيات CSS وراء العديد من تصميمات الويب. ### إنشاء مكونات الجرة الزجاجية لنقم ببناء جرة التيراريوم قطعةً قطعة. كل جزء يستخدم تحديد المواقع المطلق وأبعادًا تعتمد على النسب المئوية لتصميم متجاوب: فهم بناء التيراريوم: - يستخدم أبعادًا تعتمد على النسب المئوية لتناسب جميع أحجام الشاشات - يحدد العناصر بشكل مطلق لتكديسها ومحاذاتها بدقة - يطبق قيم شفافية مختلفة لإنشاء تأثير شفافية الزجاج - ينفذ طبقات z-index بحيث تظهر النباتات داخل الجرة - يضيف ظلالًا خفيفة وزوايا دائرية محسنة لمظهر أكثر واقعية ### التصميم المتجاوب باستخدام النسب المئوية لاحظ كيف تستخدم جميع الأبعاد النسب المئوية بدلاً من القيم الثابتة بالبكسل: لماذا هذا مهم: - يضمن أن التيراريوم يتناسب بشكل متناسب مع أي حجم شاشة - يحافظ على العلاقات البصرية بين مكونات الجرة - يوفر تجربة متسقة من الهواتف المحمولة إلى شاشات الكمبيوتر الكبيرة - يسمح للتصميم بالتكيف دون كسر التخطيط البصري ### وحدات CSS قيد التنفيذ نستخدم وحدات rem للزوايا الدائرية، والتي تتناسب مع حجم الخط الأساسي. هذا يخلق تصميمات أكثر سهولة تحترم تفضيلات المستخدم للخطوط. تعرف على المزيد حول وحدات CSS النسبية في المواصفات الرسمية. ✅ تجربة بصرية: حاول تعديل هذه القيم وراقب التأثيرات: - قم بتغيير شفافية الجرة من 0.5 إلى 0.8 – كيف يؤثر ذلك على مظهر الزجاج؟ - عدّل لون التراب من #3a241d إلى #8B4513 – ما التأثير البصري لهذا؟ - غيّر z-index للتراب إلى 2 – ماذا يحدث للطبقات؟ ### 🔄 مراجعة تعليمية فهم التصميم البصري باستخدام CSS: تأكد من استيعابك لتصميم CSS البصري: - ✅ كيف تخلق الأبعاد القائمة على النسب المئوية تصميمًا متجاوبًا؟ - ✅ لماذا تخلق الشفافية تأثير شفافية الزجاج؟ - ✅ ما دور z-index في ترتيب الطبقات؟ - ✅ كيف تساهم قيم الزوايا الدائرية في تشكيل الجرة؟ مبدأ التصميم: لاحظ كيف نبني تصاميم معقدة من أشكال بسيطة: 1. مستطيلات → مستطيلات دائرية → مكونات الجرة 2. ألوان مسطحة → شفافية → تأثير الزجاج 3. عناصر فردية → تركيب طبقي → مظهر ثلاثي الأبعاد --- ## تحدي وكيل GitHub Copilot 🚀 استخدم وضع الوكيل لإكمال التحدي التالي: الوصف: قم بإنشاء حركة CSS تجعل نباتات التيراريوم تتأرجح بلطف ذهابًا وإيابًا، مما يحاكي تأثير النسيم الطبيعي. سيساعدك هذا على ممارسة الحركات باستخدام CSS، التحويلات، والإطارات الرئيسية مع تحسين الجاذبية البصرية للتيراريوم. المهمة: أضف حركات CSS باستخدام الإطارات الرئيسية لجعل النباتات في التيراريوم تتأرجح بلطف من جانب إلى آخر. قم بإنشاء حركة تأرجح تدور كل نبات قليلاً (2-3 درجات) يمينًا ويسارًا لمدة 3-4 ثوانٍ، وطبقها على فئة .plant. تأكد من أن الحركة تتكرر بلا نهاية وتحتوي على وظيفة تخفيف للحركة الطبيعية. تعرف على المزيد حول وضع الوكيل هنا. ## 🚀 تحدي: إضافة انعكاسات الزجاج هل أنت مستعد لتعزيز التيراريوم بإضافة انعكاسات زجاجية واقعية؟ ستضيف هذه التقنية عمقًا وواقعية للتصميم. ستقوم بإنشاء لمسات خفيفة تحاكي كيفية انعكاس الضوء على الأسطح الزجاجية. هذه الطريقة مشابهة لكيفية استخدام رسامي عصر النهضة مثل جان فان إيك الضوء والانعكاس لجعل الزجاج المرسوم يبدو ثلاثي الأبعاد. إليك ما تهدف إليه: تحديك: - قم بإنشاء أشكال بيضاوية بيضاء أو فاتحة اللون للانعكاسات الزجاجية - ضعها بشكل استراتيجي على الجانب الأيسر من الجرة - طبق تأثيرات شفافية وضبابية مناسبة لانعكاس الضوء الواقعي - استخدم border-radius لإنشاء أشكال عضوية تشبه الفقاعات - جرب التدرجات أو الظلال لتحسين الواقعية ## اختبار ما بعد المحاضرة اختبار ما بعد المحاضرة ## توسع في معرفتك بـ CSS قد يبدو CSS معقدًا في البداية، لكن فهم هذه المفاهيم الأساسية يوفر أساسًا قويًا لتقنيات أكثر تقدمًا. مجالات التعلم التالية في CSS: - Flexbox - يبسط محاذاة وتوزيع العناصر - CSS Grid - يوفر أدوات قوية لإنشاء تخطيطات معقدة - CSS Variables - يقلل التكرار ويحسن قابلية الصيانة - التصميم المتجاوب - يضمن عمل المواقع بشكل جيد عبر أحجام الشاشات المختلفة ### موارد تعليمية تفاعلية مارس هذه المفاهيم مع هذه الألعاب الممتعة والتفاعلية: - 🐸 Flexbox Froggy - أتقن Flexbox من خلال تحديات ممتعة - 🌱 Grid Garden - تعلم CSS Grid عن طريق زراعة الجزر الافتراضي - 🎯 CSS Battle - اختبر مهاراتك في CSS مع تحديات البرمجة ### تعلم إضافي للحصول على أساسيات CSS شاملة، أكمل هذا الوحدة التعليمية من Microsoft Learn: قم بتنسيق تطبيق HTML الخاص بك باستخدام CSS ### ⚡ ما يمكنك فعله في الدقائق الخمس القادمة - [ ] افتح أدوات المطور وافحص أنماط CSS على أي موقع باستخدام لوحة العناصر - [ ] أنشئ ملف CSS بسيط واربطه بصفحة HTML - [ ] حاول تغيير الألوان باستخدام طرق مختلفة: hex، RGB، وأسماء الألوان - [ ] مارس نموذج الصندوق بإضافة الحشو والهامش إلى div ### 🎯 ما يمكنك إنجازه خلال الساعة - [ ] أكمل اختبار ما بعد الدرس وراجع أساسيات CSS - [ ] قم بتنسيق صفحة HTML الخاصة بك باستخدام الخطوط، الألوان، والمسافات - [ ] أنشئ تخطيطًا بسيطًا باستخدام flexbox أو grid - [ ] جرب انتقالات CSS للحصول على تأثيرات سلسة - [ ] مارس التصميم المتجاوب باستخدام استعلامات الوسائط ### 📅 مغامرتك الأسبوعية مع CSS - [ ] أكمل مهمة تصميم التيراريوم بإبداع - [ ] أتقن CSS Grid من خلال إنشاء تخطيط معرض صور - [ ] تعلم حركات CSS لإضفاء الحياة على تصميماتك - [ ] استكشف معالجات CSS مثل Sass أو Less - [ ] ادرس مبادئ التصميم وطبقها على CSS الخاص بك - [ ] قم بتحليل وإعادة إنشاء تصميمات مثيرة للاهتمام تجدها عبر الإنترنت ### 🌟 إتقان التصميم خلال شهر - [ ] قم ببناء نظام تصميم موقع ويب كامل متجاوب - [ ] تعلم CSS-in-JS أو أطر العمل مثل Tailwind - [ ] ساهم في مشاريع مفتوحة المصدر بتحسينات CSS - [ ] أتقن مفاهيم CSS المتقدمة مثل الخصائص المخصصة والاحتواء - [ ] أنشئ مكتبات مكونات قابلة لإعادة الاستخدام باستخدام CSS المعياري - [ ] قم بتوجيه الآخرين الذين يتعلمون CSS وشارك معرفتك في التصميم ## 🎯 جدول زمني لإتقان CSS ### 🛠️ ملخص أدوات CSS الخاصة بك بعد إكمال هذا الدرس، لديك الآن: - فهم التدرج: كيف ترث الأنماط وتتجاوز بعضها البعض - إتقان التحديد: استهداف دقيق باستخدام العناصر، الفئات، والمعرفات - مهارات تحديد المواقع: وضع العناصر بشكل استراتيجي وترتيبها - تصميم بصري: إنشاء تأثيرات الزجاج، الظلال، والشفافية - تقنيات متجاوبة: تخطيطات تعتمد على النسب المئوية تتكيف مع أي شاشة - تنظيم الكود: هيكل CSS نظيف وقابل للصيانة - ممارسات حديثة: استخدام الوحدات النسبية وأنماط التصميم السهلة الوصول الخطوات التالية: أصبح التيراريوم الخاص بك الآن يحتوي على الهيكل (HTML) والأسلوب (CSS). الدرس الأخير سيضيف التفاعل باستخدام JavaScript! ## المهمة إعادة هيكلة CSS --- إخلاء المسؤولية: تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة.
Terrarium Project Part 1: Въведение в HTML
HTML или HyperText Markup Language е основата на всеки уебсайт, който някога сте посещавали. Помислете за HTML като за скелета, който дава структура на уеб страниците – той определя къде да отиде съдържанието, как е организирано и какво представлява всяка част. Докато CSS по-късно „облича“ вашия HTML с цветове и оформления, а JavaScript го оживява с интерактивност, HTML осигурява съществената структура, която прави всичко останало възможно. В този урок ще създадете HTML структура за виртуален интерфейс на терариум. Този практически проект ще ви научи на основни концепции в HTML, докато изграждате нещо визуално ангажиращо. Ще научите как да организирате съдържание с помощта на семантични елементи, да работите с изображения и да създадете основата за интерактивно уеб приложение. Към края на урока ще имате работеща HTML страница, показваща изображения на растения, организирани в колони, готова за стилове в следващия урок. Не се притеснявайте, ако първоначално изглежда основно – това е точно това, което HTML трябва да прави преди CSS да добави визуален блясък. ## Предварителен тест Pre-lecture quiz ## Настройване на вашия проект Преди да се потопим в HTML кода, нека настроим подходящо работно пространство за вашия терариум проект. Създаването на организирана файловата структура от самото начало е важен навик, който ще ви служи през цялото ви пътешествие в уеб разработката. ### Задача: Създайте структурата на проекта си Ще създадете отделена папка за вашия терариум и ще добавите първия си HTML файл. Ето два подхода, които можете да използвате: Опция 1: Използване на Visual Studio Code 1. Отворете Visual Studio Code 2. Щракнете "File" → "Open Folder" или използвайте Ctrl+K, Ctrl+O (Windows/Linux) или Cmd+K, Cmd+O (Mac) 3. Създайте нова папка на име terrarium и я изберете 4. В панела Explorer кликнете иконата за "New File" 5. Наименувайте файла си index.html Опция 2: Използване на команди в терминала Това, което тези команди правят: - Създават нова директория с име terrarium за вашия проект - Навигират до директорията terrarium - Създават празен файл index.html - Отварят файла за редактиране във Visual Studio Code ## Разбиране на структурата на HTML документ Всеки HTML документ следва специфична структура, която браузърите трябва да разберат и показват правилно. Помислете за тази структура като за формално писмо – тя има задължителни елементи в определен ред, които помагат на получателя (в този случай браузъра) да обработи съдържанието правилно. Нека започнем с добавянето на съществената основа, от която всеки HTML документ се нуждае. ### Декларация DOCTYPE и коренов елемент Първите два реда от всеки HTML файл служат като „въведение“ на документа към браузъра: Разбиране какво прави този код: - Декларира типа на документа като HTML5 чрез <!DOCTYPE html> - Създава кореновия <html> елемент, който ще съдържа цялото съдържание на страницата - Установява съвременни уеб стандарти за правилно изобразяване от браузъра - Осигурява последователно показване в различни браузъри и устройства ### 🔄 Педагогическа проверка Пауза и размисъл: Уверете се, че разбирате: - ✅ Защо всеки HTML документ се нуждае от DOCTYPE декларация - ✅ Какво съдържа кореновият <html> елемент - ✅ Как тази структура помага на браузърите да изобразят страниците правилно Бърз тест: Можете ли да обясните със свои думи какво означава „изобразяване, съобразено със стандартите“? ## Добавяне на съществен метаинформация за документа Секцията <head> в HTML документа съдържа важна информация, от която браузърите и търсачките се нуждаят, но която посетителите не виждат директно на страницата. Помислете за нея като „задкулисна“ информация, която помага на вашата уеб страница да работи правилно и да се показва коректно на различни устройства и платформи. Тази метаинформация казва на браузърите как да показват страницата ви, каква кодировка на символите да използват и как да се справят с различни размери на екрана – всички тези неща са важни за създаването на професионални и достъпни уеб страници. ### Задача: Добавете секцията head Поставете този <head> раздел между отварящия и затварящия <html> тагове: Разбор какво прави всеки елемент: - Настройва заглавието на страницата, което се появява в табовете на браузъра и в резултатите от търсене - Определя UTF-8 кодиране за правилно изобразяване на текста по света - Гарантира съвместимост с модерни версии на Internet Explorer - Конфигурира отзивчив дизайн, като задава viewport със ширина, съответстваща на устройството - Контролира началното ниво на мащабиране за показване на съдържанието в естествен размер ## Изграждане на тялото на документа Елементът <body> съдържа цялото видимо съдържание на вашата уеб страница – всичко, което потребителите ще видят и с което ще взаимодействат. Докато секцията <head> дава инструкции на браузъра, секцията <body> съдържа самото съдържание: текст, изображения, бутони и други елементи, които създават потребителския интерфейс. Нека добавим структурата на тялото и разберем как HTML таговете работят заедно, за да създадат смислено съдържание. ### Разбиране на структурата на HTML таговете HTML използва тагове в двойки, за да дефинира елементи. Повечето тагове имат отварящ таг като <p> и затварящ таг като </p>, като съдържанието се поставя между тях: <p>Hello, world!</p>. Това създава параграфен елемент, съдържащ текста "Hello, world!". ### Задача: Добавете body елемента Обновете HTML файла си, за да включва елемента <body>: Ето какво осигурява цялата тази структура: - Установява основната рамка на HTML5 документа - Включва съществена метаинформация за правилно изобразяване от браузъра - Създава празно тяло, готово за видимото ви съдържание - Следва най-добрите практики в модерната уеб разработка Сега сте готови да добавите видимите елементи на вашия терариум. Ще използваме <div> елементи като контейнери за организиране на различни секции с съдържание и <img> елементи за показване на изображенията на растения. ### Работа с изображения и контейнери за оформление Изображенията са специални в HTML, защото използват „самозатварящи“ тагове. За разлика от елементи като <p></p>, които заобикалят съдържание, тагът <img> съдържа цялата необходима информация в себе си чрез атрибути като src за пътя към изображението и alt за достъпност. Преди да добавите изображения в HTML, ще трябва да организирате файловете на проекта си правилно, като създадете папка за изображения и добавите графиките на растенията. Първо, настройте вашите изображения: 1. Създайте папка на име images в папката на вашия терариум проект 2. Изтеглете изображенията на растенията от папката с решение (общо 14 изображения на растения) 3. Копирайте всички изображения на растения в новата си папка images ### Задача: Създайте оформление за показване на растенията Сега добавете изображенията на растения, организирани в две колони между вашите тагове <body></body>: Стъпка по стъпка, това се случва в този код: - Създава главен контейнер на страницата с id="page", който държи цялото съдържание - Установява два контейнера за колони: left-container и right-container - Организира 7 растения в лявата колона и 7 растения в дясната колона - Обгражда всяко изображение на растение в plant-holder div за индивидуално позициониране - Прилага последователни имена на класове за стилове в следващия урок - Задава уникални ID-та на всяко изображение за по-късна интеракция с JavaScript - Включва правилни пътища към папката с изображения ### 🔄 Педагогическа проверка Разбиране на структурата: Отделете момент, за да прегледате структурите в HTML: - ✅ Можете ли да откриете главните контейнери в оформлението си? - ✅ Разбирате ли защо всяко изображение има уникално ID? - ✅ Как бихте описали предназначението на plant-holder div-овете? Визуална проверка: Отворете своя HTML файл в браузър. Трябва да видите: - Основен списък с изображения на растения - Изображенията организирани в две колони - Просто, нестилизирано оформление Запомнете: Този обикновен вид е точно това, което HTML трябва да изглежда преди стилизиране с CSS! С добавения този маркъп растенията ще се покажат на екрана, макар и все още да не изглеждат полиран – за това е CSS в следващия урок! За момента имате солидна HTML основа, която правилно организира съдържанието и следва най-добрите практики за достъпност. ## Използване на семантичен HTML за достъпност Семантичният HTML означава да избирате HTML елементи според тяхното значение и цел, а не само според въздействието им върху визията. Когато използвате семантичен маркъп, вие комуникирате структурата и значението на съдържанието си към браузъри, търсачки и помощни технологии като екранни четци. Този подход прави вашите уебсайтове по-достъпни за потребители с увреждания и помага на търсачките по-добре да разбират съдържанието ви. Това е фундаментален принцип на модерната уеб разработка, който създава по-добри изживявания за всички. ### Добавяне на семантично заглавие на страницата Нека добавим подходящо заглавие на страницата на вашия терариум. Поставете този ред веднага след отварящия <body> таг: Защо семантичният маркъп е важен: - Помага на екранните четци да навигират и разбират структурата на страницата - Подобрява оптимизацията за търсачки (SEO), като изяснява йерархията на съдържанието - Подсилва достъпността за потребители с нарушения на зрението или когнитивни различия - Създава по-добри потребителски изживявания на всички устройства и платформи - Следва уеб стандартите и добрите практики за професионална разработка Примери за семантични срещу несемантични избори: ## Създаване на контейнер за терариума Сега нека добавим HTML структурата за самия терариум – стъкления контейнер, където растенията в крайна сметка ще бъдат поставени. Тази секция демонстрира важна концепция: HTML осигурява структура, но без CSS стилове тези елементи все още няма да се виждат. Маркъпът за терариума използва описателни имена на класове, които ще направят стиловете с CSS интуитивни и лесни за поддръжка в следващия урок. ### Задача: Добавете структурата на терариума Поставете този маркъп над последния таг </div> (преди затварящия таг на контейнера на страницата): Разбиране на тази структура за терариума: - Създава главен контейнер на терариума с уникално ID за стилизиране - Дефинира отделни елементи за всеки визуален компонент (горна част, стени, пръст, долна част) - Включва вложени елементи за ефекти на отражение на стъкло (лъскави елементи) - Използва описателни имена на класове, които ясно показват целта на всеки елемент - Подготвя структурата за CSS стилизиране, което ще създаде външния вид на стъклен терариум ### 🔄 Педагогическа проверка Владеене на HTML структурата: Преди да продължите, уверете се, че можете: - ✅ Да обясните разликата между HTML структура и визуален вид - ✅ Да различите семантични и несемантични HTML елементи - ✅ Да опишете как правилният маркъп подпомага достъпността - ✅ Да разпознаете пълната дървовидна структура на документа Тествайте разбирането си: Опитайте да отворите вашия HTML файл в браузър с изключен JavaScript и без CSS. Това ще ви покаже чистата семантична структура, която сте създали! --- ## Предизвикателство с GitHub Copilot Agent Използвайте режим Agent, за да изпълните следното предизвикателство: Описание: Създайте семантична HTML структура за секция с указания за грижа за растенията, която може да бъде добавена към проекта за терариум. Подсказка: Създайте семантична HTML секция, която включва главен заглавен елемент "Указания за грижа за растенията", три подтемички с заглавия "Поливане", "Изисквания към светлината" и "Грижа за почвата", всяка съдържаща параграф с информация за грижите. Използвайте подходящи семантични HTML тагове като <section>, <h2>, <h3> и <p>, за да структурирате съдържанието адекватно. Научете повече за режим agent тук. ## Предизвикателство за изследване на историята на HTML Научаване за еволюцията на уеб HTML еволюира значително откакто Тим Бърнърс-Лий създава първия уеб браузър в CERN през 1990 г. Някои по-стари тагове като <marquee> вече са остарели, тъй като не се съчетават добре с модерните стандарти за достъпност и принципите на адаптивен дизайн. Опитайте този експеримент: 1. Временно обгърнете вашето <h1> заглавие с <marquee> тага: <marquee><h1>Моят терариум</h1></marquee> 2. Отворете страницата в браузър и наблюдавайте ефекта на превъртане 3. Помислете защо този тага е остарял (подсказка: за удобство на потребителя и достъпност) 4. Премахнете <marquee> тага и се върнете към семантичен маркъп Въпроси за размисъл: - Как превъртащо се заглавие може да повлияе на потребители с нарушения на зрението или чувствителност към движение? - Какви съвременни CSS техники биха могли да постигнат подобни визуални ефекти по-достъпно? - Защо е важно да се използват актуални уеб стандарти вместо остарели елементи? Разгледайте повече за остарели и отхвърлени HTML елементи, за да разберете как уеб стандартите се развиват, за да подобрят потребителското изживяване. ## Тест след лекцията Тест след лекцията ## Преглед и самообучение Удължете знанията си по HTML HTML е основата на уеб технологиите повече от 30 години, развил се от прост език за маркиране на документи до сложна платформа за създаване на интерактивни приложения. Разбирането на тази еволюция ви помага да оцените съвременните уеб стандарти и да вземате по-добри решения при разработката. Препоръчани учебни пътеки: 1. История и еволюция на HTML - Изследвайте хронологията от HTML 1.0 до HTML5 - Разберете защо някои тагове са отхвърлени (достъпност, удобство за мобилни устройства, поддръжка) - Проучете нови функции и предложения за HTML 2. Дълбоко навлизане в семантичен HTML - Проучете пълния списък със семантични HTML5 елементи - Практикувайте кога да използвате <article>, <section>, <aside> и <main> - Запознайте се с ARIA атрибути за подобрена достъпност 3. Модерен уеб дизайн и разработка - Изследвайте създаването на адаптивни уебсайтове в Microsoft Learn - Разберете как HTML се интегрира с CSS и JavaScript - Научете за уеб оптимизация и SEO най-добри практики Въпроси за размисъл: - Кои остарели HTML тагове открихте и защо са премахнати? - Какви нови HTML функции се предлагат за бъдещи версии? - Как семантичният HTML допринася за уеб достъпност и SEO? ### ⚡ Какво можете да направите през следващите 5 минути - [ ] Отворете DevTools (F12) и инспектирайте HTML структурата на любимия си уебсайт - [ ] Създайте прост HTML файл с основни тагове: <h1>, <p>, и <img> - [ ] Валидирайте HTML кода си с онлайн валидатор на W3C - [ ] Опитайте да добавите коментар към HTML с <!-- comment --> ### 🎯 Какво може да постигнете през този час - [ ] Завършете теста след урока и прегледайте концепциите за семантичен HTML - [ ] Изградете проста уебстраница за себе си с правилна HTML структура - [ ] Експериментирайте с различни нива на заглавия и тагове за форматиране на текст - [ ] Добавете изображения и връзки, за да практикувате интеграция на мултимедия - [ ] Изследвайте HTML5 функции, които още не сте пробвали ### 📅 Вашето седмично HTML пътуване - [ ] Завършете проекта терариум със семантичен маркъп - [ ] Създайте достъпна уебстраница с ARIA етикети и роли - [ ] Практикувайте създаване на форми с различни типове полета - [ ] Разгледайте HTML5 APIs като localStorage или геолокация - [ ] Изучавайте адаптивни HTML шаблони и мобилно ориентиран дизайн - [ ] Преглеждайте HTML код на други разработчици за най-добри практики ### 🌟 Вашата месечна основа за уеб развитие - [ ] Изградете портфолио уебсайт, показващ уменията ви в HTML - [ ] Научете шаблониране в HTML с рамка като Handlebars - [ ] Допринасяйте към open source проекти чрез подобряване на HTML документация - [ ] Владеете напреднали HTML концепции като персонализирани елементи - [ ] Интегрирайте HTML с CSS фреймуъркове и JavaScript библиотеки - [ ] Наставлявайте други в основите на HTML ## 🎯 Вашият времеви план за овладяване на HTML ### 🛠️ Резюме на вашия HTML инструментариум След завършването на този урок вече имате: - Структура на документа: Пълна основа HTML5 с правилен DOCTYPE - Семантичен маркъп: Смислени тагове, които повишават достъпността и SEO - Интеграция на изображения: Добра организация на файловете и практики за alt текст - Контейнери за оформление: Стратегическо използване на div с описателни класове - Осъзнаване за достъпността: Познаване на навигацията с четец на екран - Модерни стандарти: Настоящи практики в HTML5 и познаване на остарели тагове - Основи за проекта: Солидна база за CSS стилизиране и JavaScript интерактивност Следващи стъпки: Вашата HTML структура е готова за CSS стилизиране! Семантичната основа, която сте изградили, ще направи следващия урок много по-лесен за разбиране. ## Задача Практикувайте HTML: Създайте макет на блог --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Отказ от отговорност: Този документ е преведен с помощта на AI преводаческа услуга Co-op Translator. Въпреки че се стремим към точност, моля имайте предвид, че автоматизираните преводи могат да съдържат грешки или неточности. Оригиналният документ на неговия език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за всякакви недоразумения или неправилни тълкувания, произтичащи от използването на този превод. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Project Част 2: Въведение в CSS
Спомняте ли си как вашият HTML терариум изглеждаше доста основен? CSS е мястото, където преобразяваме тази обикновена структура във визуално привлекателна. Ако HTML е като построяването на рамката на къща, тогава CSS е всичко, което я кара да се чувства като дом - цветовете на боята, подредбата на мебелите, осветлението и как стаите се свързват една с друга. Помислете как Дворецът във Версай е започнал като проста ловна хижа, но внимателното внимание към украсата и подредбата го превърна в една от най-величествените сгради в света. Днес ще преобразим вашия терариум от функционален в изискан. Ще научите как точно да позиционирате елементите, да направите оформленията адаптивни към различни размери на екрана и да създадете визуалната привлекателност, която прави уебсайтовете ангажиращи. Към края на този урок ще видите как стратегическото стилизиране с CSS може драматично да подобри вашия проект. Нека добавим стил към вашия терариум. ## Предлекционен тест Предлекционен тест ## Започване с CSS Често CSS се възприема само като „правене на нещата красиви“, но той служи на много по-широка цел. CSS е като режисьор на филм – вие контролирате не само как изглежда всичко, но и как се движи, реагира на взаимодействия и се адаптира към различни ситуации. Модерният CSS е изключително способен. Можете да пишете код, който автоматично адаптира оформленията за телефони, таблети и настолни компютри. Можете да създавате плавни анимации, които насочват вниманието на потребителите там, където е нужно. Резултатите могат да бъдат доста впечатляващи, когато всичко работи заедно. Ето какво ще постигнем в този урок: - Създаване на пълен визуален дизайн за вашия терариум, използвайки модерни CSS техники - Изследване на основни концепции като каскада, наследяване и CSS селектори - Прилагане на адаптивни стратегии за позициониране и оформление - Изграждане на контейнера на терариума чрез CSS форми и стилизиране ### Предварителни изисквания Трябва да сте създали HTML структурата за вашия терариум от предишния урок и да я имате готова за стилизиране. ### Настройване на вашия CSS файл Преди да започнем със стилизирането, трябва да свържем CSS с нашия HTML. Тази връзка казва на браузъра къде да намери инструкциите за стилизиране на нашия терариум. В папката на вашия терариум създайте нов файл на име style.css, след което го свържете в секцията <head> на вашия HTML документ: Какво прави този код: - Създава връзка между вашите HTML и CSS файлове - Казва на браузъра да зареди и приложи стиловете от style.css - Използва атрибута rel="stylesheet", който указва, че това е CSS файл - Реферира файлa път с href="./style.css" ## Разбиране на CSS каскадата Някога чудили ли сте се защо CSS се нарича „Cascading“ Style Sheets (Каскадни стилове)? Стиловете се спускат като водопад и понякога си противоречат. Помислете как работят военните командни структури – генералска заповед може да казва „всички войски да носят зелено“, но конкретна заповед към вашия отряд може да казва „за церемонията носете официален син“. По-конкретната инструкция има предимство. CSS следва подобна логика и разбирането на тази иерархия прави отстраняването на грешки много по-лесно. ### Експериментиране с приоритета на каскадата Нека видим каскадата в действие, като създадем стилов конфликт. Първо, добавете инлайн стил към вашия <h1> таг: Какво прави този код: - Прилага червен цвят директно на елемента <h1> чрез инлайн стил - Използва атрибута style, за да вгради CSS директно в HTML - Създава стилово правило с най-висок приоритет за този конкретен елемент След това добавете това правило във вашия файл style.css: В горния случай сме: - Дефинирали CSS правило, което таргетира всички <h1> елементи - Зададени синия цвят на текста чрез външен стилов файл - Създадено правило с по-нисък приоритет в сравнение с инлайн стиловете ✅ Проверка на знанията: Кой цвят се показва във вашето уеб приложение? Защо този цвят печели? Можете ли да измислите ситуации, когато бихте искали да презапишете стилове? ## CSS наследяване в действие CSS наследяването работи като генетиката – елементите наследяват определени свойства от родителските елементи. Ако зададете шрифт на body, целият текст вътре автоматично използва същия шрифт. Това е подобно на това как отличителната челюст на Хабсбургското семейство се явява в поколения, без да е специфично посочено за всеки отделен. Обаче, не всичко се наследява. Текстови стилове като шрифтове и цветове се наследяват, но свойства на оформление като отстояния (margins) и рамки не се наследяват. Подобно на това, че децата могат да наследят физически черти, но не и модните предпочитания на родителите си. ### Наблюдаване на наследяването на шрифтове Нека видим наследяването в действие, като зададем шрифт на елемента <body>: Обяснение на случващото се тук: - Задава шрифтово семейство за цялата страница чрез таргетиране на <body> елемента - Използва стек от шрифтове с резервни опции за по-добра съвместимост с браузърите - Прилага модерни системни шрифтове, които изглеждат добре на различни операционни системи - Осигурява, че всички вложени елементи наследяват този шрифт, освен ако не е изрично презаписан Отворете инструменти за разработчици на вашия браузър (F12), отидете на раздел Elements и инспектирайте вашия <h1> елемент. Ще видите, че той наследява шрифтa от body: ✅ Време за експеримент: Опитайте да зададете други наследяеми свойства на <body>, като color, line-height или text-align. Какво се случва с вашия заглавен елемент и други елементи? ### 🔄 Педагогическа проверка Разбиране на основите на CSS: Преди да преминете към селектори, уверете се, че можете: - ✅ Да обясните разликата между каскада и наследяване - ✅ Да предскажете кой стил ще победи при конфликт на специфичност - ✅ Да разпознаете кои свойства се наследяват от родителски елементи - ✅ Да свързвате CSS файлове към HTML правилно Бърз тест: Ако имате тези стилове, какъв цвят ще има <h1> в <div class="special">? Отговор: Червен (селектор на елемент директно таргетира h1) ## Овладяване на CSS селекторите CSS селекторите са вашият начин да таргетирате конкретни елементи за стилизиране. Те работят като даване на точни инструкции - вместо да казвате „къщата“, бихте казали „синята къща с червената врата на улица Мейпъл“. CSS предоставя различни начини за избиране на елементи, а изборът на правилния селектор е като избора на правилния инструмент. Понякога трябва да стилизирате всички врати в квартала, а понякога само една конкретна врата. ### Селектори по елемент (таг) Селекторите по елемент таргетират HTML елементи по тяхното име на таг. Те са идеални за задаване на базови стилове, които се прилагат широко из страницата: Разбиране на тези стилове: - Задава последователна типография за цялата страница чрез селектора body - Премахва браузърните отстояния и падащи стойности за по-добър контрол - Стилира всички заглавни елементи с цвят, подравняване и разстояния - Използва единици rem за мащабируем и достъпен размер на шрифта Докато селекторите по елемент работят добре за общо стилизиране, ще ви трябват по-специфични селектори за стилизиране на отделни компоненти като растенията в терариума. ### Селектори по ID за уникални елементи Селекторите по ID използват символа # и таргетират елементи с конкретни атрибути id. Тъй като ID-тата трябва да са уникални в една страница, те са перфектни за стилизиране на отделни, специални елементи като контейнерите за растенията вляво и вдясно. Нека създадем стилизиране за страничните контейнери на терариума, където ще се намират растенията: Какво постига този код: - Позиционира контейнерите в най-лявата и най-дясната част чрез абсолютна позиция - Използва vh (височина на изгледа) единици за адаптивна височина според размера на екрана - Прилага box-sizing: border-box, така че падингът да се включва в общата ширина - Премахва ненужни px единици от стойности с нула за по-чист код - Задава мек фон, който е по-приятен за окото от твърдо сивото ✅ Предизвикателство за качество на кода: Забелязвате ли, че този CSS нарушава принципа DRY (Don't Repeat Yourself)? Можете ли да го рефакторирате, използвайки както ID, така и клас? Подобрен подход: ### Класови селектори за многократно използване на стилове Класовите селектори използват символа . и са идеални, когато искате да приложите същите стилове към множество елементи. За разлика от ID-тата, класовете могат да се използват многократно в целия HTML, което ги прави подходящи за консистентни стилови шаблони. В нашия терариум всяко растение се нуждае от подобно стилизиране, но също така и от индивидуално позициониране. Ще използваме комбинация от класове за споделени стилове и ID-та за уникално позициониране. Ето HTML структурата за всяко растение: Обяснение на ключовите елементи: - Използва class="plant-holder" за последователно стилизиране на контейнера за всички растения - Прилaга class="plant" за споделен стил и поведение на изображенията - Включва уникален id="plant1" за индивидуално позициониране и JavaScript взаимодействие - Осигурява описателен alt текст за достъпност с екранни четци Сега добавете тези стилове към вашия файл style.css: Разбивка на тези стилове: - Създава относително позициониране за контейнера на растението, за да осигури контекст на позициониране - Задава височина на всеки контейнер 13%, така че всички растения да се побират вертикално без скролиране - Изместване на контейнерите леко наляво за по-добро центриране на растенията във вътрешността - Позволява растенията да се мащабират адаптивно чрез свойства max-width и max-height - Използва z-index, за да постави растенията над други елементи в терариума - Добавя мек ефект при задържане с мишката чрез CSS преходи за по-добро взаимодействие с потребителя ✅ Критично мислене: Защо са необходими и двете селектори .plant-holder и .plant? Какво би се случило, ако използваме само един? ## Разбиране на позиционирането в CSS Позиционирането в CSS е като режисьор на театрална постановка – ви казва къде стои всеки актьор и как се движи на сцената. Някои актьори следват стандартното разположение, докато други изискват специфично позициониране за драматичен ефект. След като разберете позиционирането, много предизвикателства при оформлението стават управляеми. Искате ли навигационна лента, която остава на върха, когато потребителите скролват? Позиционирането се грижи за това. Искате ли подсказка, която се показва на конкретно място? Това също е позициониране. ### Петте стойности на позициониране ### Позициониране в нашия терариум Нашият терариум използва стратегическа комбинация от типове позициониране, за да постигне желаното оформление: Разбиране на стратегията за позициониране: - Абсолютните контейнери се изваждат от нормалния поток и се закрепват към краищата на екрана - Относителните "plant-holder" създават контекст за позициониране, като остават в потока на документа - Абсолютните "plant" могат да се позиционират прецизно в рамките на относителните контейнери - Тази комбинация позволява растенията да се нареждат вертикално и да се позиционират индивидуално ✅ Време за експеримент: Опитайте да променяте стойностите на позициониране и наблюдавайте резултатите: - Какво се случва, ако промените .container от absolute на relative? - Как се променя оформлението, ако .plant-holder използва absolute вместо relative? - Какво се случва, когато превключите .plant на relative позициониране? ### 🔄 Педагогическа проверка Майсторство с позициониране в CSS: Направете пауза, за да проверите разбирането си: - ✅ Можете ли да обясните защо растенията се нуждаят от абсолюно позициониране за drag-and-drop? - ✅ Разбирате ли как относителните контейнери създават контекст за позициониране? - ✅ Защо страничните контейнери използват абсолюно позициониране? - ✅ Какво би станало, ако изобщо премахнете декларациите за позициониране? Връзка с реалния свят: Помислете как позиционирането в CSS отразява реалния свят: - Статично: Книги на рафт (естествен ред) - Относително: Преместване на книга леко, но запазване на мястото й - Абсолютно: Поставяне на книгоразделител на точна страница - Фиксирано: Лепяща бележка, която остава видима докато листите страниците ## Създаване на терариум с CSS Сега ще построим стъклен буркан, използвайки само CSS - без нужда от изображения или графичен софтуер. Създаването на реалистично изглеждащо стъкло, сенки и дълбочина с позициониране и прозрачност демонстрира визуалните възможности на CSS. Тази техника отразява как архитектите от движение Баухаус са използвали прости геометрични фигури за създаване на сложни, красиви конструкции. След като разберете тези принципи, ще разпознаете CSS техниките зад много уеб дизайни. ### Създаване на компонентите на стъкления буркан Нека изградим буркана на терариума на части. Всяка част използва абсолюно позициониране и размери, базирани на проценти за отзивчив дизайн: Разбиране на конструкцията на терариума: - Използва размери в проценти за отзивчиво мащабиране на всички размери на екрана - Позиционира елементите абсолютно, за да ги подредим и подравним точно - Прилaга различни стойности на прозрачност за създаване на ефект на стъкленост - Изпълнява слоеве чрез z-index, така че растенията да се появяват вътре в буркана - Добавя леки сенки и фина граница с радиус за по-реалистичен вид ### Отзивчив дизайн с проценти Забележете как всички размери използват проценти вместо фиксирани пиксели: Защо е важно: - Гарантира, че терариумът се мащабира пропорционално на всеки размер екран - Поддържа визуалните връзки между компонентите на буркана - Осигурява последователно изживяване от мобилни телефони до големи десктоп екрани - Позволява дизайнът да се адаптира без да нарушава визуалния изглед ### CSS единици в действие Използваме единици rem за радиуса на границата, които се мащабират спрямо основния размер на шрифта. Това създава по-достъпни дизайни, които уважават настройките на шрифтовете на потребителя. Прочетете повече за относителните CSS единици в официалната спецификация. ✅ Визуален експеримент: Опитайте да промените тези стойности и наблюдавайте ефекта: - Променете прозрачността на буркана от 0.5 на 0.8 – как това влияе на вида на стъклото? - Регулирайте цвета на пръстта от #3a241d на #8B4513 – какъв визуален ефект има това? - Променете z-index на пръстта на 2 – какво става с подреждането на слоевете? ### 🔄 Педагогическа проверка Разбиране на визуален дизайн с CSS: Потвърдете усвояването си на визуалния CSS: - ✅ Как размерите в проценти създават отзивчив дизайн? - ✅ Защо прозрачността създава ефекта на стъклена прозрачност? - ✅ Каква роля играе z-index в слоевете на елементите? - ✅ Как радиусът на границата формира формата на буркана? Принцип на дизайна: Забележете как изграждаме сложни визуални ефекти от прости форми: 1. Правоъгълници → Заоблени правоъгълници → Компоненти на буркана 2. Плоски цветове → Прозрачност → Стъклен ефект 3. Отделни елементи → Слоев състав → 3D вид --- ## Предизвикателство GitHub Copilot Agent 🚀 Използвайте режим Agent, за да завършите следното предизвикателство: Описание: Създайте CSS анимация, която кара растенията в терариума леко да се люлеят напред-назад, симулирайки лек бриз. Това ще ви помогне да практикувате CSS анимации, трансформации и ключови кадри, като същевременно подобрите визуалната привлекателност на терариума. Задача: Добавете CSS ключови кадри, за да накарате растенията в терариума да се люлеят леко отстрани на страна. Създайте анимация на люлеене, която завърта всяко растение леко (2-3 градуса) наляво и надясно с продължителност 3-4 секунди, и я приложете към класа .plant. Уверете се, че анимацията се повтаря безкрайно и има функция за плавност за естествено движение. Научете повече за режим agent тук. ## 🚀 Предизвикателство: Добавяне на отразявания върху стъклото Готови ли сте да подобрите терариума си с реалистични отражения върху стъклото? Тази техника ще добави дълбочина и реализъм на дизайна. Ще създадете нежни отблясъци, които симулират как светлината се отразява от стъклени повърхности. Този подход е подобен на техниката на ренесансови художници като Ян ван Ейк, които използвали светлина и отражения, за да направят изрисуваното стъкло триизмерно. Ето какво трябва да постигнете: Вашата задача: - Създайте нежни бели или светли овални форми за отражения върху стъклото - Позиционирайте ги стратегически в лявата част на буркана - Приложете подходяща прозрачност и размазване за реалистично отражение на светлината - Използвайте border-radius за създаване на органични, мехурчести форми - Експериментирайте с градиенти или сянки (box-shadow) за по-голям реализъм ## Квиз след лекцията Квиз след лекцията ## Разширете CSS знанията си CSS може първоначално да изглежда сложно, но разбирането на тези основни концепции дава стабилна основа за по-напреднали техники. Следващи области за учене в CSS: - Flexbox - опростява подравняването и разпределението на елементите - CSS Grid - предоставя мощни инструменти за създаване на сложни оформления - CSS променливи - намалява повтарянето и подобрява поддръжката - Отзивчив дизайн - гарантира, че сайтовете работят добре на различни размери екрани ### Интерактивни учебни ресурси Практикувайте тези концепции с любопитни, интерактивни игри: - 🐸 Flexbox Froggy - усвоете Flexbox чрез забавни предизвикателства - 🌱 Grid Garden - научете CSS Grid, като отглеждате виртуални моркови - 🎯 CSS Battle - тествайте CSS уменията си с кодови предизвикателства ### Допълнително обучение За изчерпателни CSS основи, завършете този модул на Microsoft Learn: Стил на HTML приложение с CSS ### ⚡ Какво можете да направите следващите 5 минути - [ ] Отворете DevTools и инспектирайте CSS стилове на който и да е сайт чрез панела Elements - [ ] Създайте прост CSS файл и го свържете с HTML страница - [ ] Опитайте да промените цветове чрез различни методи: hex, RGB, именовани цветове - [ ] Практикувайте box model, като добавите padding и margin към div ### 🎯 Какво можете да постигнете този час - [ ] Завършете квиза след урока и прегледайте CSS основите - [ ] Стиловайте HTML страницата с шрифтове, цветове и разстояния - [ ] Създайте прост layout с flexbox или grid - [ ] Експериментирайте с CSS преходи за плавни ефекти - [ ] Практикувайте отзивчив дизайн с медиен заявки ### 📅 Вашето седмично CSS приключение - [ ] Завършете задачата за стилизиране на терариума с творчески подход - [ ] Усъвършенствайте CSS Grid като изградите фото галерия - [ ] Научете CSS анимации, за да вдъхнете живот на дизайните си - [ ] Изследвайте CSS препроцесори като Sass или Less - [ ] Изучавайте принципи на дизайна и ги прилагайте в CSS - [ ] Анализирайте и пресъздавайте интересни дизайни от онлайн ### 🌟 Вашето месечно майсторство в дизайна - [ ] Изградете пълна система за отзивчив уеб дизайн - [ ] Научете CSS-in-JS или utility-first фреймуъркове като Tailwind - [ ] Приносете към open source проекти с подобрения в CSS - [ ] Усъвършенствайте напреднали CSS концепции като персонализирани свойства и containment - [ ] Създайте библиотеки с модулен CSS и преизползваеми компоненти - [ ] Наставлявайте други в изучаването на CSS и споделяйте дизайнерски знания ## 🎯 Вашата времева линия на майсторство в CSS ### 🛠️ Обобщение на CSS арсенала ви След като завършихте този урок, вече притежавате: - Разбиране на каскадата: Как стиловете наследяват и презаписват един друг - Майсторство на селекторите: Точно таргетиране с елементи, класове и ID-та - Умения за позициониране: Стратегическо поставяне и слоеве на елементите - Визуален дизайн: Създаване на стъклени ефекти, сенки и прозрачност - Отзивчиви техники: Оформления на базата на проценти, които се адаптират към всеки екран - Организация на кода: Чист и поддържан CSS - Модерни практики: Използване на относителни единици и достъпни дизайнерски модели Следващи стъпки: Вашият терариум вече има структура (HTML) и стил (CSS). Последният урок ще добави интерактивност с JavaScript! ## Задача CSS Рефакториране --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Отказ от отговорност: Този документ е преведен с помощта на AI преводаческия сервис Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи могат да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Не носим отговорност за никакви недоразумения или погрешни тълкувания, произтичащи от използването на този превод. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
টেরারিয়াম প্রকল্প পর্ব ১: HTML পরিচিতি
HTML, বা HyperText Markup Language, প্রতিটি ওয়েবসাইটের ভিত্তি যা আপনি কখনও পরিদর্শন করেছেন। HTML কে ওয়েব পৃষ্ঠার কাঠামো হিসেবে ভাবুন – এটি নির্ধারণ করে কোথায় বিষয়বস্তু যাবে, কীভাবে এটি সংগঠিত হবে এবং প্রতিটি অংশ কী প্রতিনিধিত্ব করে। CSS পরে আপনার HTML-কে রঙ এবং লেআউট দিয়ে সাজাবে, এবং JavaScript এটিকে ইন্টারঅ্যাক্টিভিটি দিয়ে প্রাণবন্ত করবে, HTML সেই মৌলিক কাঠামো প্রদান করে যা সবকিছু সম্ভব করে তোলে। এই পাঠে, আপনি একটি ভার্চুয়াল টেরারিয়াম ইন্টারফেসের HTML কাঠামো তৈরি করবেন। এই হাতে-কলমে প্রকল্পটি আপনাকে মৌলিক HTML ধারণা শেখাবে এবং একই সাথে কিছু চাক্ষুষভাবে আকর্ষণীয় তৈরি করবে। আপনি শিখবেন কীভাবে বিষয়বস্তুকে সেমান্টিক উপাদান ব্যবহার করে সংগঠিত করতে হয়, ছবি নিয়ে কাজ করতে হয় এবং একটি ইন্টারঅ্যাক্টিভ ওয়েব অ্যাপ্লিকেশনের ভিত্তি তৈরি করতে হয়। পাঠ শেষে, আপনার একটি কার্যকর HTML পৃষ্ঠা থাকবে যা গাছের ছবি সংগঠিত কলামে প্রদর্শন করবে, যা পরবর্তী পাঠে স্টাইলিংয়ের জন্য প্রস্তুত। যদি এটি প্রথমে সাধারণ দেখায়, চিন্তা করবেন না – CSS যোগ করার আগে HTML ঠিক এমনটাই হওয়া উচিত। ## প্রাক-লেকচার কুইজ প্রাক-লেকচার কুইজ ## আপনার প্রকল্প সেট আপ করা HTML কোডে ডুব দেওয়ার আগে, আপনার টেরারিয়াম প্রকল্পের জন্য একটি সঠিক কর্মক্ষেত্র সেট আপ করা যাক। শুরু থেকেই একটি সংগঠিত ফাইল কাঠামো তৈরি করা একটি গুরুত্বপূর্ণ অভ্যাস যা আপনার ওয়েব ডেভেলপমেন্ট যাত্রায় আপনাকে সাহায্য করবে। ### কাজ: আপনার প্রকল্পের কাঠামো তৈরি করুন আপনি আপনার টেরারিয়াম প্রকল্পের জন্য একটি নিবেদিত ফোল্ডার তৈরি করবেন এবং আপনার প্রথম HTML ফাইল যোগ করবেন। এখানে দুটি পদ্ধতি রয়েছে যা আপনি ব্যবহার করতে পারেন: অপশন ১: ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে 1. ভিজ্যুয়াল স্টুডিও কোড খুলুন 2. "File" → "Open Folder" ক্লিক করুন অথবা Ctrl+K, Ctrl+O (Windows/Linux) বা Cmd+K, Cmd+O (Mac) ব্যবহার করুন 3. terrarium নামে একটি নতুন ফোল্ডার তৈরি করুন এবং এটি নির্বাচন করুন 4. Explorer প্যানেলে, "New File" আইকনে ক্লিক করুন 5. আপনার ফাইলের নাম দিন index.html অপশন ২: টার্মিনাল কমান্ড ব্যবহার করে এই কমান্ডগুলো কী করে: - নতুন ডিরেক্টরি তৈরি করে terrarium নামে আপনার প্রকল্পের জন্য - ডিরেক্টরিতে প্রবেশ করে terrarium - একটি খালি index.html ফাইল তৈরি করে - ফাইলটি খুলে ভিজ্যুয়াল স্টুডিও কোডে সম্পাদনার জন্য ## HTML ডকুমেন্টের কাঠামো বোঝা প্রতিটি HTML ডকুমেন্ট একটি নির্দিষ্ট কাঠামো অনুসরণ করে যা ব্রাউজারগুলি সঠিকভাবে বুঝতে এবং প্রদর্শন করতে প্রয়োজন। এই কাঠামোটি একটি আনুষ্ঠানিক চিঠির মতো – এতে একটি নির্দিষ্ট ক্রমে প্রয়োজনীয় উপাদান রয়েছে যা প্রাপক (এই ক্ষেত্রে, ব্রাউজার) বিষয়বস্তু সঠিকভাবে প্রক্রিয়া করতে সাহায্য করে। চলুন শুরু করি সেই মৌলিক ভিত্তি যোগ করে যা প্রতিটি HTML ডকুমেন্টে প্রয়োজন। ### DOCTYPE ঘোষণা এবং মূল উপাদান যেকোনো HTML ফাইলের প্রথম দুটি লাইন ব্রাউজারের কাছে ডকুমেন্টের "পরিচিতি" হিসেবে কাজ করে: এই কোডটি কী করে: - ডকুমেন্ট টাইপ ঘোষণা করে HTML5 হিসেবে <!DOCTYPE html> ব্যবহার করে - মূল <html> উপাদান তৈরি করে যা সমস্ত পৃষ্ঠার বিষয়বস্তু ধারণ করবে - আধুনিক ওয়েব স্ট্যান্ডার্ড প্রতিষ্ঠা করে সঠিক ব্রাউজার রেন্ডারিংয়ের জন্য - বিভিন্ন ব্রাউজার এবং ডিভাইস জুড়ে সামঞ্জস্যপূর্ণ প্রদর্শন নিশ্চিত করে ### 🔄 শিক্ষামূলক চেক-ইন থামুন এবং চিন্তা করুন: চালিয়ে যাওয়ার আগে নিশ্চিত করুন: - ✅ কেন প্রতিটি HTML ডকুমেন্টে DOCTYPE ঘোষণা প্রয়োজন - ✅ <html> মূল উপাদান কী ধারণ করে - ✅ কীভাবে এই কাঠামো ব্রাউজারগুলিকে পৃষ্ঠাগুলি সঠিকভাবে রেন্ডার করতে সাহায্য করে দ্রুত স্ব-পরীক্ষা: আপনি কি আপনার নিজের ভাষায় "স্ট্যান্ডার্ড-কমপ্লায়েন্ট রেন্ডারিং" এর অর্থ ব্যাখ্যা করতে পারেন? ## প্রয়োজনীয় ডকুমেন্ট মেটাডেটা যোগ করা HTML ডকুমেন্টের <head> অংশে গুরুত্বপূর্ণ তথ্য থাকে যা ব্রাউজার এবং সার্চ ইঞ্জিনের প্রয়োজন, কিন্তু দর্শকরা সরাসরি পৃষ্ঠায় দেখতে পান না। এটি "পর্দার পিছনের" তথ্যের মতো যা আপনার ওয়েবপৃষ্ঠাকে সঠিকভাবে কাজ করতে এবং বিভিন্ন ডিভাইস এবং প্ল্যাটফর্ম জুড়ে সঠিকভাবে প্রদর্শিত হতে সাহায্য করে। এই মেটাডেটা ব্রাউজারগুলিকে আপনার পৃষ্ঠা কীভাবে প্রদর্শন করতে হবে, কোন ক্যারেক্টার এনকোডিং ব্যবহার করতে হবে এবং বিভিন্ন স্ক্রিন সাইজ কীভাবে পরিচালনা করতে হবে তা বলে – যা পেশাদার, অ্যাক্সেসযোগ্য ওয়েব পৃষ্ঠা তৈরি করার জন্য অপরিহার্য। ### কাজ: ডকুমেন্ট হেড যোগ করুন আপনার <html> ট্যাগের শুরু এবং শেষের মধ্যে এই <head> অংশটি যোগ করুন: প্রতিটি উপাদান কী অর্জন করে তা বিশ্লেষণ: - পৃষ্ঠার শিরোনাম সেট করে যা ব্রাউজার ট্যাব এবং সার্চ রেজাল্টে প্রদর্শিত হয় - UTF-8 ক্যারেক্টার এনকোডিং নির্দিষ্ট করে সারা বিশ্বে সঠিক টেক্সট প্রদর্শনের জন্য - ইন্টারনেট এক্সপ্লোরারের আধুনিক সংস্করণের সাথে সামঞ্জস্য নিশ্চিত করে - রেসপন্সিভ ডিজাইন কনফিগার করে ডিভাইসের প্রস্থের সাথে ভিউপোর্ট সেট করে - প্রাথমিক জুম লেভেল নিয়ন্ত্রণ করে বিষয়বস্তু প্রাকৃতিক আকারে প্রদর্শনের জন্য ## ডকুমেন্ট বডি তৈরি করা HTML ডকুমেন্টের <body> উপাদানটি আপনার ওয়েবপৃষ্ঠার সমস্ত দৃশ্যমান বিষয়বস্তু ধারণ করে – ব্যবহারকারীরা যা দেখবে এবং যার সাথে ইন্টারঅ্যাক্ট করবে। যেখানে <head> অংশটি ব্রাউজারকে নির্দেশনা প্রদান করেছে, সেখানে <body> অংশটি প্রকৃত বিষয়বস্তু ধারণ করে: টেক্সট, ছবি, বোতাম এবং অন্যান্য উপাদান যা আপনার ব্যবহারকারীর ইন্টারফেস তৈরি করে। চলুন বডি কাঠামো যোগ করি এবং বুঝি কীভাবে HTML ট্যাগগুলি একসাথে কাজ করে অর্থপূর্ণ বিষয়বস্তু তৈরি করতে। ### HTML ট্যাগ কাঠামো বোঝা HTML উপাদান সংজ্ঞায়িত করতে জোড়া ট্যাগ ব্যবহার করে। বেশিরভাগ ট্যাগের একটি ওপেনিং ট্যাগ থাকে যেমন <p> এবং একটি ক্লোজিং ট্যাগ থাকে যেমন </p>, যার মধ্যে বিষয়বস্তু থাকে: <p>Hello, world!</p>। এটি একটি প্যারাগ্রাফ উপাদান তৈরি করে যা "Hello, world!" টেক্সট ধারণ করে। ### কাজ: বডি উপাদান যোগ করুন আপনার HTML ফাইলটি আপডেট করুন এবং <body> উপাদানটি যোগ করুন: এই সম্পূর্ণ কাঠামোটি কী প্রদান করে: - মৌলিক HTML5 ডকুমেন্ট ফ্রেমওয়ার্ক প্রতিষ্ঠা করে - সঠিক ব্রাউজার রেন্ডারিংয়ের জন্য প্রয়োজনীয় মেটাডেটা অন্তর্ভুক্ত করে - দৃশ্যমান বিষয়বস্তু জন্য একটি খালি বডি তৈরি করে - আধুনিক ওয়েব ডেভেলপমেন্টের সেরা অনুশীলন অনুসরণ করে এখন আপনি আপনার টেরারিয়ামের দৃশ্যমান উপাদানগুলি যোগ করতে প্রস্তুত। আমরা <div> উপাদানগুলি ব্যবহার করব বিষয়বস্তু সংগঠিত করতে এবং <img> উপাদানগুলি গাছের ছবি প্রদর্শন করতে। ### ছবি এবং লেআউট কন্টেইনার নিয়ে কাজ করা HTML-এ ছবি বিশেষ কারণ তারা "স্ব-বন্ধ" ট্যাগ ব্যবহার করে। <p></p> এর মতো উপাদানগুলির বিপরীতে যা বিষয়বস্তু ঘিরে থাকে, <img> ট্যাগটি তার সমস্ত তথ্য ট্যাগের মধ্যে ধারণ করে, যেমন src চিত্র ফাইলের পথ এবং alt অ্যাক্সেসিবিলিটির জন্য। ছবি আপনার HTML-এ যোগ করার আগে, আপনার প্রকল্প ফাইলগুলি সঠিকভাবে সংগঠিত করতে হবে একটি ইমেজ ফোল্ডার তৈরি করে এবং গাছের গ্রাফিক্স যোগ করে। প্রথমে, আপনার ছবি সেট আপ করুন: 1. আপনার টেরারিয়াম প্রকল্প ফোল্ডারের ভিতরে images নামে একটি ফোল্ডার তৈরি করুন 2. সমাধান ফোল্ডার থেকে গাছের ছবিগুলি ডাউনলোড করুন (মোট ১৪টি গাছের ছবি) 3. সমস্ত গাছের ছবি আপনার নতুন images ফোল্ডারে কপি করুন ### কাজ: গাছের প্রদর্শন লেআউট তৈরি করুন এখন আপনার <body></body> ট্যাগের মধ্যে গাছের ছবি দুটি কলামে সংগঠিত করে যোগ করুন: ধাপে ধাপে, এই কোডে কী ঘটছে: - প্রধান পৃষ্ঠার কন্টেইনার তৈরি করে id="page" দিয়ে যা সমস্ত বিষয়বস্তু ধারণ করবে - দুটি কলাম কন্টেইনার তৈরি করে: left-container এবং right-container - ৭টি গাছের ছবি বাম কলামে এবং ৭টি ডান কলামে সংগঠিত করে - প্রতিটি গাছের ছবিকে একটি plant-holder div-এ মোড়ানো হয় ব্যক্তিগত অবস্থানের জন্য - সঙ্গতিপূর্ণ ক্লাস নাম প্রয়োগ করে যা পরবর্তী পাঠে CSS স্টাইলিংয়ের জন্য - প্রতিটি গাছের ছবিকে একটি অনন্য ID বরাদ্দ করে পরবর্তী সময়ে JavaScript ইন্টারঅ্যাকশন জন্য - সঠিক ফাইল পথ অন্তর্ভুক্ত করে যা ইমেজ ফোল্ডারের দিকে নির্দেশ করে ### 🔄 শিক্ষামূলক চেক-ইন কাঠামো বোঝা: আপনার HTML কাঠামো পর্যালোচনা করতে একটি মুহূর্ত নিন: - ✅ আপনি কি আপনার লেআউটের প্রধান কন্টেইনারগুলি চিহ্নিত করতে পারেন? - ✅ আপনি কি বুঝতে পারেন কেন প্রতিটি ছবির একটি অনন্য ID রয়েছে? - ✅ আপনি কীভাবে plant-holder div-এর উদ্দেশ্য বর্ণনা করবেন? দৃশ্য পরিদর্শন: আপনার HTML ফাইলটি একটি ব্রাউজারে খুলুন। আপনি দেখতে পাবেন: - গাছের ছবির একটি সাধারণ তালিকা - ছবি দুটি কলামে সংগঠিত - সাধারণ, স্টাইলবিহীন লেআউট মনে রাখবেন: CSS স্টাইলিং যোগ করার আগে HTML ঠিক এমনটাই দেখতে হওয়া উচিত! এই মার্কআপ যোগ করার সাথে সাথে, গাছগুলি স্ক্রিনে প্রদর্শিত হবে, যদিও তারা এখনও সুন্দর দেখাবে না – এটি পরবর্তী পাঠে CSS-এর কাজ! আপাতত, আপনার কাছে একটি শক্ত HTML ভিত্তি রয়েছে যা আপনার বিষয়বস্তু সঠিকভাবে সংগঠিত করে এবং অ্যাক্সেসিবিলিটির সেরা অনুশীলন অনুসরণ করে। ## অ্যাক্সেসিবিলিটির জন্য সেমান্টিক HTML ব্যবহার সেমান্টিক HTML মানে HTML উপাদানগুলি তাদের অর্থ এবং উদ্দেশ্যের উপর ভিত্তি করে নির্বাচন করা, শুধুমাত্র তাদের চেহারার উপর নয়। যখন আপনি সেমান্টিক মার্কআপ ব্যবহার করেন, তখন আপনি আপনার বিষয়বস্তু কাঠামো এবং অর্থ ব্রাউজার, সার্চ ইঞ্জিন এবং স্ক্রিন রিডারের মতো সহায়ক প্রযুক্তিগুলিকে জানাচ্ছেন। এই পদ্ধতি আপনার ওয়েবসাইটগুলিকে প্রতিবন্ধী ব্যবহারকারীদের জন্য আরও অ্যাক্সেসযোগ্য করে তোলে এবং সার্চ ইঞ্জিনগুলিকে আপনার বিষয়বস্তু আরও ভালভাবে বুঝতে সাহায্য করে। এটি আধুনিক ওয়েব ডেভেলপমেন্টের একটি মৌলিক নীতি যা সবার জন্য আরও ভালো অভিজ্ঞতা তৈরি করে। ### একটি সেমান্টিক পৃষ্ঠার শিরোনাম যোগ করা চলুন আপনার টেরারিয়াম পৃষ্ঠায় একটি সঠিক শিরোনাম যোগ করি। আপনার ওপেনিং <body> ট্যাগের ঠিক পরে এই লাইনটি যোগ করুন: কেন সেমান্টিক মার্কআপ গুরুত্বপূর্ণ: - স্ক্রিন রিডারকে সাহায্য করে পৃষ্ঠার কাঠামো নেভিগেট এবং বুঝতে - সার্চ ইঞ্জিন অপ্টিমাইজেশন (SEO) উন্নত করে বিষয়বস্তু হায়ারার্কি স্পষ্ট করে - অ্যাক্সেসিবিলিটি উন্নত করে দৃষ্টিহীন বা জ্ঞানীয় পার্থক্যযুক্ত ব্যবহারকারীদের জন্য - সব ডিভাইস এবং প্ল্যাটফর্ম জুড়ে আরও ভালো ব্যবহারকারীর অভিজ্ঞতা তৈরি করে - ওয়েব স্ট্যান্ডার্ড এবং পেশাদার ডেভেলপমেন্টের সেরা অনুশীলন অনুসরণ করে সেমান্টিক বনাম নন-সেমান্টিক পছন্দের উদাহরণ: - প্রতিটি ভিজ্যুয়াল উপাদানের জন্য আলাদা উপাদান নির্ধারণ করে (উপর, দেয়াল, মাটি, নিচ) - গ্লাস প্রতিফলন প্রভাবের জন্য নেস্টেড উপাদান অন্তর্ভুক্ত করে (চকচকে উপাদান) - বর্ণনামূলক ক্লাস নাম ব্যবহার করে যা প্রতিটি উপাদানের উদ্দেশ্য স্পষ্টভাবে নির্দেশ করে - গ্লাস টেরারিয়ামের চেহারা তৈরি করার জন্য CSS স্টাইলিংয়ের কাঠামো প্রস্তুত করে ### 🔄 শিক্ষামূলক চেক-ইন HTML কাঠামো দক্ষতা: এগিয়ে যাওয়ার আগে নিশ্চিত করুন যে আপনি পারেন: - ✅ HTML কাঠামো এবং ভিজ্যুয়াল চেহারার পার্থক্য ব্যাখ্যা করতে - ✅ সেমান্টিক এবং নন-সেমান্টিক HTML উপাদান চিহ্নিত করতে - ✅ সঠিক মার্কআপ কীভাবে অ্যাক্সেসিবিলিটিতে সহায়তা করে তা বর্ণনা করতে - ✅ সম্পূর্ণ ডকুমেন্ট ট্রি কাঠামো চিনতে আপনার বোঝার পরীক্ষা করুন: আপনার HTML ফাইলটি একটি ব্রাউজারে খুলুন যেখানে JavaScript নিষ্ক্রিয় এবং CSS সরানো হয়েছে। এটি আপনাকে দেখাবে আপনি যে বিশুদ্ধ সেমান্টিক কাঠামো তৈরি করেছেন! --- ## GitHub Copilot Agent Challenge Agent মোড ব্যবহার করে নিম্নলিখিত চ্যালেঞ্জ সম্পন্ন করুন: বর্ণনা: টেরারিয়াম প্রকল্পে যোগ করার জন্য একটি উদ্ভিদ পরিচর্যা গাইড সেকশনের জন্য একটি সেমান্টিক HTML কাঠামো তৈরি করুন। প্রম্পট: একটি সেমান্টিক HTML সেকশন তৈরি করুন যেখানে একটি প্রধান শিরোনাম "Plant Care Guide", তিনটি উপ-শিরোনাম "Watering", "Light Requirements", এবং "Soil Care" থাকবে, প্রতিটিতে উদ্ভিদ পরিচর্যার তথ্য সহ একটি প্যারাগ্রাফ থাকবে। উপযুক্ত সেমান্টিক HTML ট্যাগ যেমন <section>, <h2>, <h3>, এবং <p> ব্যবহার করে বিষয়বস্তু সঠিকভাবে গঠন করুন। Agent মোড সম্পর্কে আরও জানুন এখানে। ## HTML ইতিহাস চ্যালেঞ্জ ওয়েব বিকাশ সম্পর্কে শেখা HTML উল্লেখযোগ্যভাবে বিকশিত হয়েছে যেহেতু টিম বার্নার্স-লি ১৯৯০ সালে CERN-এ প্রথম ওয়েব ব্রাউজার তৈরি করেছিলেন। কিছু পুরানো ট্যাগ যেমন <marquee> এখন ডিপ্রিকেটেড কারণ তারা আধুনিক অ্যাক্সেসিবিলিটি স্ট্যান্ডার্ড এবং রেসপন্সিভ ডিজাইনের নীতির সাথে ভালোভাবে কাজ করে না। এই পরীক্ষা করুন: 1. আপনার <h1> শিরোনামটি সাময়িকভাবে একটি <marquee> ট্যাগে মোড়ান: <marquee><h1>My Terrarium</h1></marquee> 2. আপনার পৃষ্ঠাটি একটি ব্রাউজারে খুলুন এবং স্ক্রলিং প্রভাবটি পর্যবেক্ষণ করুন 3. বিবেচনা করুন কেন এই ট্যাগটি ডিপ্রিকেটেড হয়েছে (ইঙ্গিত: ব্যবহারকারীর অভিজ্ঞতা এবং অ্যাক্সেসিবিলিটি সম্পর্কে চিন্তা করুন) 4. <marquee> ট্যাগটি সরান এবং সেমান্টিক মার্কআপে ফিরে যান প্রতিফলন প্রশ্ন: - একটি স্ক্রলিং শিরোনাম কীভাবে ভিজ্যুয়াল প্রতিবন্ধকতা বা মোশন সেনসিটিভিটি থাকা ব্যবহারকারীদের প্রভাবিত করতে পারে? - কোন আধুনিক CSS কৌশলগুলি আরও অ্যাক্সেসযোগ্যভাবে অনুরূপ ভিজ্যুয়াল প্রভাব অর্জন করতে পারে? - কেন বর্তমান ওয়েব স্ট্যান্ডার্ড ব্যবহার করা গুরুত্বপূর্ণ ডিপ্রিকেটেড উপাদানের পরিবর্তে? অবসোলেট এবং ডিপ্রিকেটেড HTML উপাদান সম্পর্কে আরও জানুন কীভাবে ওয়েব স্ট্যান্ডার্ড ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে বিকশিত হয় তা বুঝতে। ## পোস্ট-লেকচার কুইজ পোস্ট-লেকচার কুইজ ## পর্যালোচনা এবং স্ব-অধ্যয়ন HTML জ্ঞান গভীর করুন HTML ৩০ বছরেরও বেশি সময় ধরে ওয়েবের ভিত্তি হয়ে আছে, একটি সাধারণ ডকুমেন্ট মার্কআপ ভাষা থেকে একটি ইন্টারেক্টিভ অ্যাপ্লিকেশন তৈরির জন্য একটি উন্নত প্ল্যাটফর্মে বিকশিত হয়েছে। এই বিবর্তন বোঝা আপনাকে আধুনিক ওয়েব স্ট্যান্ডার্ডগুলির প্রশংসা করতে এবং উন্নত উন্নয়ন সিদ্ধান্ত নিতে সহায়তা করে। প্রস্তাবিত শেখার পথ: 1. HTML ইতিহাস এবং বিবর্তন - HTML 1.0 থেকে HTML5 পর্যন্ত টাইমলাইন গবেষণা করুন - কেন কিছু ট্যাগ ডিপ্রিকেটেড হয়েছে তা অন্বেষণ করুন (অ্যাক্সেসিবিলিটি, মোবাইল-ফ্রেন্ডলিনেস, রক্ষণাবেক্ষণযোগ্যতা) - উদীয়মান HTML বৈশিষ্ট্য এবং প্রস্তাবগুলি তদন্ত করুন 2. সেমান্টিক HTML গভীরভাবে জানুন - HTML5 সেমান্টিক উপাদানগুলির সম্পূর্ণ তালিকা অধ্যয়ন করুন - কখন <article>, <section>, <aside>, এবং <main> ব্যবহার করবেন তা চিহ্নিত করার অনুশীলন করুন - উন্নত অ্যাক্সেসিবিলিটির জন্য ARIA অ্যাট্রিবিউট সম্পর্কে জানুন 3. আধুনিক ওয়েব ডেভেলপমেন্ট - রেসপন্সিভ ওয়েবসাইট তৈরি Microsoft Learn-এ অন্বেষণ করুন - HTML কীভাবে CSS এবং JavaScript এর সাথে সংহত হয় তা বুঝুন - ওয়েব পারফরম্যান্স এবং SEO সেরা অনুশীলন সম্পর্কে জানুন প্রতিফলন প্রশ্ন: - আপনি কোন ডিপ্রিকেটেড HTML ট্যাগ আবিষ্কার করেছেন এবং কেন সেগুলি সরানো হয়েছে? - ভবিষ্যতের সংস্করণের জন্য কোন নতুন HTML বৈশিষ্ট্য প্রস্তাবিত হচ্ছে? - সেমান্টিক HTML কীভাবে ওয়েব অ্যাক্সেসিবিলিটি এবং SEO-তে অবদান রাখে? ### ⚡ আপনি পরবর্তী ৫ মিনিটে কী করতে পারেন - [ ] DevTools (F12) খুলুন এবং আপনার প্রিয় ওয়েবসাইটের HTML কাঠামো পরীক্ষা করুন - [ ] মৌলিক ট্যাগ সহ একটি সাধারণ HTML ফাইল তৈরি করুন: <h1>, <p>, এবং <img> - [ ] W3C HTML Validator অনলাইনে আপনার HTML যাচাই করুন - [ ] <!-- comment --> ব্যবহার করে আপনার HTML-এ একটি মন্তব্য যোগ করার চেষ্টা করুন ### 🎯 আপনি এই ঘণ্টায় কী অর্জন করতে পারেন - [ ] পোস্ট-লেসন কুইজ সম্পন্ন করুন এবং সেমান্টিক HTML ধারণাগুলি পর্যালোচনা করুন - [ ] সঠিক HTML কাঠামো ব্যবহার করে নিজের সম্পর্কে একটি সাধারণ ওয়েবপেজ তৈরি করুন - [ ] বিভিন্ন শিরোনাম স্তর এবং টেক্সট ফরম্যাটিং ট্যাগ নিয়ে পরীক্ষা করুন - [ ] মাল্টিমিডিয়া ইন্টিগ্রেশন অনুশীলনের জন্য ছবি এবং লিঙ্ক যোগ করুন - [ ] আপনি এখনও চেষ্টা করেননি এমন HTML5 বৈশিষ্ট্যগুলি গবেষণা করুন ### 📅 আপনার সপ্তাহব্যাপী HTML যাত্রা - [ ] সেমান্টিক মার্কআপ সহ টেরারিয়াম প্রকল্পের অ্যাসাইনমেন্ট সম্পন্ন করুন - [ ] ARIA লেবেল এবং রোল ব্যবহার করে একটি অ্যাক্সেসযোগ্য ওয়েবপেজ তৈরি করুন - [ ] বিভিন্ন ইনপুট টাইপ সহ ফর্ম তৈরি করার অনুশীলন করুন - [ ] localStorage বা geolocation এর মতো HTML5 API অন্বেষণ করুন - [ ] রেসপন্সিভ HTML প্যাটার্ন এবং মোবাইল-ফার্স্ট ডিজাইন অধ্যয়ন করুন - [ ] সেরা অনুশীলনের জন্য অন্যান্য ডেভেলপারদের HTML কোড পর্যালোচনা করুন ### 🌟 আপনার মাসব্যাপী ওয়েব ভিত্তি - [ ] আপনার HTML দক্ষতা প্রদর্শন করে একটি পোর্টফোলিও ওয়েবসাইট তৈরি করুন - [ ] Handlebars-এর মতো একটি ফ্রেমওয়ার্ক দিয়ে HTML টেমপ্লেটিং শিখুন - [ ] HTML ডকুমেন্টেশন উন্নত করে ওপেন সোর্স প্রকল্পে অবদান রাখুন - [ ] কাস্টম উপাদানের মতো উন্নত HTML ধারণাগুলি আয়ত্ত করুন - [ ] CSS ফ্রেমওয়ার্ক এবং JavaScript লাইব্রেরির সাথে HTML সংহত করুন - [ ] HTML মৌলিক বিষয় শেখার জন্য অন্যদের পরামর্শ দিন ## 🎯 আপনার HTML দক্ষতার সময়রেখা ### 🛠️ আপনার HTML টুলকিট সারাংশ এই পাঠ সম্পন্ন করার পরে, আপনার কাছে এখন রয়েছে: - ডকুমেন্ট কাঠামো: সঠিক DOCTYPE সহ সম্পূর্ণ HTML5 ভিত্তি - সেমান্টিক মার্কআপ: অর্থপূর্ণ ট্যাগ যা অ্যাক্সেসিবিলিটি এবং SEO উন্নত করে - ছবি সংহতকরণ: সঠিক ফাইল সংগঠন এবং alt টেক্সট অনুশীলন - লেআউট কন্টেইনার: বর্ণনামূলক ক্লাস নাম সহ divs এর কৌশলগত ব্যবহার - অ্যাক্সেসিবিলিটি সচেতনতা: স্ক্রিন রিডার নেভিগেশনের বোঝাপড়া - আধুনিক স্ট্যান্ডার্ড: বর্তমান HTML5 অনুশীলন এবং ডিপ্রিকেটেড ট্যাগ জ্ঞান - প্রকল্প ভিত্তি: CSS স্টাইলিং এবং JavaScript ইন্টারঅ্যাক্টিভিটির জন্য শক্ত ভিত্তি পরবর্তী পদক্ষেপ: আপনার HTML কাঠামো CSS স্টাইলিংয়ের জন্য প্রস্তুত! আপনি যে সেমান্টিক ভিত্তি তৈরি করেছেন তা পরবর্তী পাঠটি বুঝতে আরও সহজ করে তুলবে। ## অ্যাসাইনমেন্ট আপনার HTML অনুশীলন করুন: একটি ব্লগ মকআপ তৈরি করুন --- অস্বীকৃতি: এই নথিটি AI অনুবাদ পরিষেবা Co-op Translator ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যার জন্য আমরা দায়ী থাকব না।
Terrarium Project Part 2: CSS পরিচিতি
আপনার HTML টেরারিয়ামটি কতটা সাধারণ দেখাচ্ছিল তা মনে আছে? CSS এর মাধ্যমে আমরা সেই সাধারণ কাঠামোকে চমৎকার কিছুতে রূপান্তর করি। যদি HTML একটি বাড়ির ফ্রেম তৈরির মতো হয়, তবে CSS হলো সেই সবকিছু যা এটিকে বাড়ির মতো অনুভূতি দেয় - রঙ, আসবাবপত্রের বিন্যাস, আলো এবং কক্ষগুলোর সংযোগ। ভাবুন কীভাবে ভার্সাই প্রাসাদটি একটি সাধারণ শিকার লজ থেকে শুরু করে বিশ্বের অন্যতম চমৎকার ভবনে রূপান্তরিত হয়েছিল। আজ আমরা আপনার টেরারিয়ামকে কার্যকরী থেকে পরিপাটি করে তুলব। আপনি শিখবেন কীভাবে উপাদানগুলোকে সঠিকভাবে অবস্থান করতে হয়, লেআউটগুলোকে বিভিন্ন স্ক্রিন সাইজে প্রতিক্রিয়াশীল করতে হয় এবং এমন ভিজ্যুয়াল আকর্ষণ তৈরি করতে হয় যা ওয়েবসাইটকে আকর্ষণীয় করে তোলে। এই পাঠের শেষে, আপনি দেখতে পাবেন কীভাবে কৌশলগত CSS স্টাইলিং আপনার প্রকল্পকে নাটকীয়ভাবে উন্নত করতে পারে। চলুন আপনার টেরারিয়ামে কিছু স্টাইল যোগ করি। ## প্রি-লেকচার কুইজ প্রি-লেকচার কুইজ ## CSS এর সাথে শুরু করা CSS কে প্রায়ই "জিনিসগুলো সুন্দর করা" হিসেবে ভাবা হয়, কিন্তু এটি আরও বিস্তৃত উদ্দেশ্য পূরণ করে। CSS হলো একটি সিনেমার পরিচালক হওয়ার মতো - আপনি শুধু কীভাবে সবকিছু দেখাবে তা নিয়ন্ত্রণ করেন না, বরং কীভাবে এটি নড়াচড়া করবে, ইন্টারঅ্যাকশনে সাড়া দেবে এবং বিভিন্ন পরিস্থিতিতে মানিয়ে নেবে। আধুনিক CSS অত্যন্ত সক্ষম। আপনি এমন কোড লিখতে পারেন যা স্বয়ংক্রিয়ভাবে ফোন, ট্যাবলেট এবং ডেস্কটপ কম্পিউটারের জন্য লেআউট সামঞ্জস্য করে। আপনি মসৃণ অ্যানিমেশন তৈরি করতে পারেন যা প্রয়োজনীয় স্থানে ব্যবহারকারীর মনোযোগ আকর্ষণ করে। যখন সবকিছু একসাথে কাজ করে, তখন ফলাফল বেশ চিত্তাকর্ষক হতে পারে। এই পাঠে আমরা যা অর্জন করব: - সম্পূর্ণ ভিজ্যুয়াল ডিজাইন তৈরি করা আপনার টেরারিয়ামের জন্য আধুনিক CSS কৌশল ব্যবহার করে - মৌলিক ধারণাগুলো অন্বেষণ করা যেমন ক্যাসকেড, ইনহেরিটেন্স এবং CSS সিলেক্টর - প্রয়োগ করা প্রতিক্রিয়াশীল অবস্থান এবং লেআউট কৌশল - নির্মাণ করা টেরারিয়াম কন্টেইনার CSS শেপ এবং স্টাইলিং ব্যবহার করে ### পূর্বশর্ত আপনার টেরারিয়ামের HTML কাঠামোটি আগের পাঠ থেকে সম্পন্ন করা উচিত এবং এটি স্টাইল করার জন্য প্রস্তুত থাকা উচিত। ### আপনার CSS ফাইল সেট আপ করা স্টাইলিং শুরু করার আগে, আমাদের HTML এর সাথে CSS সংযুক্ত করতে হবে। এই সংযোগটি ব্রাউজারকে বলে কোথায় আমাদের টেরারিয়ামের জন্য স্টাইলিং নির্দেশনা খুঁজে পেতে হবে। আপনার টেরারিয়াম ফোল্ডারে একটি নতুন ফাইল তৈরি করুন style.css নামে, তারপর এটি আপনার HTML ডকুমেন্টের <head> সেকশনে লিঙ্ক করুন: এই কোডটি যা করে: - সংযোগ তৈরি করে আপনার HTML এবং CSS ফাইলের মধ্যে - ব্রাউজারকে বলে style.css থেকে স্টাইল লোড এবং প্রয়োগ করতে - ব্যবহার করে rel="stylesheet" অ্যাট্রিবিউট যা নির্দেশ করে এটি একটি CSS ফাইল - ফাইল পাথ উল্লেখ করে href="./style.css" এর মাধ্যমে ## CSS ক্যাসকেড বোঝা কখনো ভেবেছেন কেন CSS কে "Cascading" Style Sheets বলা হয়? স্টাইলগুলো একটি জলপ্রপাতের মতো নিচে নেমে আসে এবং কখনও কখনও তারা একে অপরের সাথে সংঘর্ষ করে। ভাবুন কিভাবে সামরিক কমান্ড কাঠামো কাজ করে - একটি সাধারণ আদেশ হতে পারে "সব সৈন্য সবুজ পোশাক পরবে," কিন্তু আপনার ইউনিটের জন্য একটি নির্দিষ্ট আদেশ হতে পারে "অনুষ্ঠানের জন্য নীল পোশাক পরবে।" আরও নির্দিষ্ট নির্দেশনা অগ্রাধিকার পায়। CSS একই যুক্তি অনুসরণ করে এবং এই শ্রেণিবিন্যাস বোঝা ডিবাগিংকে অনেক সহজ করে তোলে। ### ক্যাসকেড প্রাধান্য নিয়ে পরীক্ষা-নিরীক্ষা চলুন একটি স্টাইল সংঘর্ষ তৈরি করে ক্যাসকেডের কার্যকারিতা দেখি। প্রথমে, আপনার <h1> ট্যাগে একটি ইনলাইন স্টাইল যোগ করুন: এই কোডটি যা করে: - লাগায় একটি লাল রঙ সরাসরি <h1> উপাদানে ইনলাইন স্টাইলিং ব্যবহার করে - ব্যবহার করে style অ্যাট্রিবিউট HTML এ সরাসরি CSS এম্বেড করতে - তৈরি করে এই নির্দিষ্ট উপাদানের জন্য সর্বোচ্চ প্রাধান্য স্টাইল নিয়ম এরপর, আপনার style.css ফাইলে এই নিয়মটি যোগ করুন: উপরের কোডে আমরা: - সংজ্ঞায়িত করেছি একটি CSS নিয়ম যা সব <h1> উপাদানকে লক্ষ্য করে - সেট করেছি টেক্সটের রঙ নীল একটি এক্সটার্নাল স্টাইলশিট ব্যবহার করে - তৈরি করেছি একটি নিম্ন প্রাধান্য নিয়ম ইনলাইন স্টাইলের তুলনায় ✅ জ্ঞান যাচাই: আপনার ওয়েব অ্যাপে কোন রঙ প্রদর্শিত হয়? কেন সেই রঙটি জয়ী হয়? এমন পরিস্থিতি কি আপনি ভাবতে পারেন যেখানে আপনি স্টাইলগুলোকে ওভাররাইড করতে চাইবেন? ## CSS ইনহেরিটেন্সের কার্যকারিতা CSS ইনহেরিটেন্স জেনেটিক্সের মতো কাজ করে - উপাদানগুলো তাদের প্যারেন্ট উপাদান থেকে নির্দিষ্ট বৈশিষ্ট্যগুলো উত্তরাধিকার সূত্রে পায়। যদি আপনি বডি উপাদানে ফন্ট ফ্যামিলি সেট করেন, তাহলে ভিতরের সমস্ত টেক্সট স্বয়ংক্রিয়ভাবে একই ফন্ট ব্যবহার করবে। এটি অনেকটা যেমন হ্যাবসবার্গ পরিবারের স্বতন্ত্র চোয়াল প্রজন্ম ধরে দেখা গেছে। তবে, সবকিছু উত্তরাধিকার সূত্রে পাওয়া যায় না। ফন্ট এবং রঙের মতো টেক্সট স্টাইলগুলো উত্তরাধিকার সূত্রে পাওয়া যায়, কিন্তু মার্জিন এবং বর্ডারের মতো লেআউট বৈশিষ্ট্যগুলো পাওয়া যায় না। যেমন সন্তানরা শারীরিক বৈশিষ্ট্য উত্তরাধিকার সূত্রে পেতে পারে কিন্তু তাদের পিতামাতার ফ্যাশন পছন্দ নয়। ### ফন্ট ইনহেরিটেন্স পর্যবেক্ষণ করা চলুন <body> উপাদানে একটি ফন্ট ফ্যামিলি সেট করে ইনহেরিটেন্সের কার্যকারিতা দেখি: এখানে যা ঘটে তা বিশ্লেষণ করা: - সেট করে পুরো পৃষ্ঠার জন্য ফন্ট ফ্যামিলি <body> উপাদানকে লক্ষ্য করে - ব্যবহার করে একটি ফন্ট স্ট্যাক যা ভালো ব্রাউজার সামঞ্জস্যের জন্য ফলোব্যাক অপশন দেয় - প্রয়োগ করে আধুনিক সিস্টেম ফন্ট যা বিভিন্ন অপারেটিং সিস্টেমে চমৎকার দেখায় - নিশ্চিত করে সমস্ত চাইল্ড উপাদান এই ফন্ট উত্তরাধিকার সূত্রে পায় যদি বিশেষভাবে ওভাররাইড না করা হয় আপনার ব্রাউজারের ডেভেলপার টুলস (F12) খুলুন, Elements ট্যাবে যান এবং আপনার <h1> উপাদানটি পরীক্ষা করুন। আপনি দেখতে পাবেন এটি বডি থেকে ফন্ট ফ্যামিলি উত্তরাধিকার সূত্রে পেয়েছে: ✅ পরীক্ষার সময়: <body>-তে color, line-height, বা text-align এর মতো অন্যান্য উত্তরাধিকারযোগ্য বৈশিষ্ট্য সেট করার চেষ্টা করুন। আপনার হেডিং এবং অন্যান্য উপাদানগুলোর কী হয়? ### 🔄 শিক্ষাগত চেক-ইন CSS ভিত্তি বোঝা: সিলেক্টরগুলোতে যাওয়ার আগে নিশ্চিত করুন আপনি: - ✅ ক্যাসকেড এবং ইনহেরিটেন্সের পার্থক্য ব্যাখ্যা করতে পারেন - ✅ কোন স্টাইল প্রাধান্য পাবে তা পূর্বাভাস দিতে পারেন - ✅ কোন বৈশিষ্ট্যগুলো প্যারেন্ট উপাদান থেকে উত্তরাধিকার সূত্রে পাওয়া যায় তা চিহ্নিত করতে পারেন - ✅ সঠিকভাবে CSS ফাইলগুলো HTML এর সাথে সংযুক্ত করতে পারেন দ্রুত পরীক্ষা: যদি আপনার এই স্টাইলগুলো থাকে, <div class="special"> এর ভিতরে একটি <h1> এর রঙ কী হবে? উত্তর: লাল (এলিমেন্ট সিলেক্টর সরাসরি h1 লক্ষ্য করে) ## CSS সিলেক্টর আয়ত্ত করা CSS সিলেক্টর হলো নির্দিষ্ট উপাদানগুলোকে স্টাইল করার উপায়। এটি সঠিক নির্দেশনা দেওয়ার মতো কাজ করে - "বাড়ি" বলার পরিবর্তে আপনি বলতে পারেন "নীল বাড়ি যার লাল দরজা ম্যাপল স্ট্রিটে।" CSS বিভিন্নভাবে নির্দিষ্ট হতে পারে এবং সঠিক সিলেক্টর নির্বাচন করা হলো কাজের জন্য সঠিক টুল নির্বাচন করার মতো। কখনও কখনও আপনাকে পুরো পাড়ার প্রতিটি দরজা স্টাইল করতে হয়, আবার কখনও শুধুমাত্র একটি নির্দিষ্ট দরজা। ### এলিমেন্ট সিলেক্টর (ট্যাগ) এলিমেন্ট সিলেক্টর HTML উপাদানগুলোকে তাদের ট্যাগ নাম দ্বারা লক্ষ্য করে। এগুলো পুরো পৃষ্ঠায় প্রয়োগযোগ্য বেস স্টাইল সেট করার জন্য উপযুক্ত: এই স্টাইলগুলো বোঝা: - সেট করে পুরো পৃষ্ঠায় সামঞ্জ - .plant-holder যদি relative এর পরিবর্তে absolute ব্যবহার করে, তাহলে লেআউট পরিবর্তন হবে। absolute পজিশনিং ব্যবহার করলে .plant-holder তার প্যারেন্ট কন্টেইনারের পরিবর্তে পুরো ডকুমেন্টের উপর ভিত্তি করে অবস্থান নির্ধারণ করবে। ফলে এটি নির্ধারিত স্থান থেকে সরে যেতে পারে এবং অন্যান্য উপাদানের সাথে সংঘর্ষ ঘটাতে পারে। - .plant কে relative পজিশনিংয়ে পরিবর্তন করলে, এটি তার বর্তমান অবস্থানকে রেফারেন্স হিসেবে ধরে এবং সেই অবস্থান থেকে নির্দিষ্ট পরিমাণে সরানো সম্ভব হয়। এটি ড্র্যাগ-এন্ড-ড্রপ কার্যক্রমের জন্য একটি নির্ভরযোগ্য কন্টেক্সট তৈরি করে। ### 🔄 শিক্ষামূলক চেক-ইন CSS পজিশনিং দক্ষতা: আপনার বোঝাপড়া যাচাই করুন: - ✅ কেন ড্র্যাগ-এন্ড-ড্রপের জন্য গাছগুলোর absolute পজিশনিং প্রয়োজন? - ✅ আপনি কি বুঝতে পেরেছেন কীভাবে relative কন্টেইনার পজিশনিং কন্টেক্সট তৈরি করে? - ✅ কেন সাইড কন্টেইনারগুলো absolute পজিশনিং ব্যবহার করে? - ✅ যদি পজিশন ডিক্লারেশন সম্পূর্ণভাবে সরিয়ে দেওয়া হয়, তাহলে কী ঘটবে? বাস্তব জীবনের সংযোগ: CSS পজিশনিং বাস্তব জীবনের লেআউটের সাথে কীভাবে মিল রাখে তা ভাবুন: - Static: শেলফে বই (প্রাকৃতিক ক্রম) - Relative: বইটি সামান্য সরানো কিন্তু তার স্থান ধরে রাখা - Absolute: নির্দিষ্ট পৃষ্ঠায় বুকমার্ক রাখা - Fixed: একটি স্টিকি নোট যা পৃষ্ঠাগুলো উল্টানোর সময় দৃশ্যমান থাকে ## CSS দিয়ে টেরারিয়াম তৈরি করা এখন আমরা শুধুমাত্র CSS ব্যবহার করে একটি কাচের জার তৈরি করব - কোনো ছবি বা গ্রাফিক সফটওয়্যার ছাড়াই। পজিশনিং এবং ট্রান্সপারেন্সি ব্যবহার করে বাস্তবসম্মত কাচ, ছায়া এবং গভীরতার প্রভাব তৈরি করা CSS এর ভিজ্যুয়াল সক্ষমতাকে প্রদর্শন করে। এই কৌশলটি বাউহাউস আন্দোলনের স্থপতিরা কীভাবে সাধারণ জ্যামিতিক আকার ব্যবহার করে জটিল, সুন্দর কাঠামো তৈরি করতেন তা প্রতিফলিত করে। একবার আপনি এই নীতিগুলো বুঝতে পারলে, অনেক ওয়েব ডিজাইনের পিছনে থাকা CSS কৌশলগুলো চিনতে পারবেন। ### কাচের জার উপাদান তৈরি করা চলুন টেরারিয়াম জারটি টুকরো টুকরো করে তৈরি করি। প্রতিটি অংশ absolute পজিশনিং এবং শতাংশ-ভিত্তিক সাইজিং ব্যবহার করে রেসপন্সিভ ডিজাইন নিশ্চিত করে: টেরারিয়াম নির্মাণ বোঝা: - ব্যবহার করে শতাংশ-ভিত্তিক ডাইমেনশন রেসপন্সিভ স্কেলিংয়ের জন্য - পজিশন করে উপাদানগুলোকে সঠিকভাবে স্ট্যাক এবং অ্যালাইন করতে - প্রয়োগ করে বিভিন্ন অপাসিটি মান কাচের স্বচ্ছতার প্রভাব তৈরি করতে - ইমপ্লিমেন্ট করে z-index লেয়ারিং যাতে গাছগুলো জারের ভিতরে দেখা যায় - যোগ করে সূক্ষ্ম বক্স-শ্যাডো এবং পরিশীলিত বর্ডার-রেডিয়াস আরও বাস্তবসম্মত চেহারার জন্য ### শতাংশের মাধ্যমে রেসপন্সিভ ডিজাইন দেখুন কীভাবে সমস্ত ডাইমেনশন পিক্সেল মানের পরিবর্তে শতাংশ ব্যবহার করে: কেন এটি গুরুত্বপূর্ণ: - নিশ্চিত করে যে টেরারিয়াম যেকোনো স্ক্রিন সাইজে প্রোপোরশনালি স্কেল করে - রক্ষা করে জারের উপাদানগুলোর মধ্যে ভিজ্যুয়াল সম্পর্ক - প্রদান করে মোবাইল ফোন থেকে বড় ডেস্কটপ মনিটর পর্যন্ত একটি সঙ্গতিপূর্ণ অভিজ্ঞতা - ডিজাইনকে ভিজ্যুয়াল লেআউট ভেঙে না দিয়ে মানিয়ে নিতে সাহায্য করে ### CSS ইউনিটের ব্যবহার আমরা বর্ডার-রেডিয়াসের জন্য rem ইউনিট ব্যবহার করছি, যা রুট ফন্ট সাইজের সাথে স্কেল করে। এটি আরও অ্যাক্সেসযোগ্য ডিজাইন তৈরি করে যা ব্যবহারকারীর ফন্ট পছন্দকে সম্মান করে। CSS relative units সম্পর্কে আরও জানুন অফিসিয়াল স্পেসিফিকেশনে। ✅ ভিজ্যুয়াল পরীক্ষা: এই মানগুলো পরিবর্তন করে প্রভাব পর্যবেক্ষণ করুন: - জারের অপাসিটি 0.5 থেকে 0.8 করুন – এটি কাচের চেহারায় কী প্রভাব ফেলে? - মাটির রঙ #3a241d থেকে #8B4513 করুন – এর ভিজ্যুয়াল প্রভাব কী? - মাটির z-index 2 করুন – লেয়ারিংয়ে কী পরিবর্তন আসে? ### 🔄 শিক্ষামূলক চেক-ইন CSS ভিজ্যুয়াল ডিজাইন বোঝা: আপনার ভিজ্যুয়াল CSS এর ধারণা নিশ্চিত করুন: - ✅ কীভাবে শতাংশ-ভিত্তিক ডাইমেনশন রেসপন্সিভ ডিজাইন তৈরি করে? - ✅ কেন অপাসিটি কাচের স্বচ্ছতার প্রভাব তৈরি করে? - ✅ লেয়ারিং উপাদানগুলোতে z-index কী ভূমিকা পালন করে? - ✅ কীভাবে বর্ডার-রেডিয়াস মান জারের আকৃতি তৈরি করে? ডিজাইন নীতি: লক্ষ্য করুন কীভাবে আমরা সাধারণ আকার থেকে জটিল ভিজ্যুয়াল তৈরি করছি: 1. আয়তক্ষেত্র → গোলাকার আয়তক্ষেত্র → জারের উপাদান 2. সমতল রঙ → অপাসিটি → কাচের প্রভাব 3. স্বতন্ত্র উপাদান → লেয়ারড কম্পোজিশন → থ্রিডি চেহারা --- ## GitHub Copilot Agent Challenge 🚀 Agent মোড ব্যবহার করে নিম্নলিখিত চ্যালেঞ্জটি সম্পন্ন করুন: বর্ণনা: একটি CSS অ্যানিমেশন তৈরি করুন যা টেরারিয়ামের গাছগুলোকে হালকা বাতাসে দুলতে দেখায়। এটি আপনাকে CSS অ্যানিমেশন, ট্রান্সফর্ম এবং কীফ্রেম অনুশীলন করতে সাহায্য করবে এবং আপনার টেরারিয়ামের ভিজ্যুয়াল আকর্ষণ বৃদ্ধি করবে। প্রম্পট: CSS কীফ্রেম অ্যানিমেশন যোগ করুন যাতে টেরারিয়ামের গাছগুলো হালকা বাতাসে একপাশ থেকে অন্যপাশে দুলতে থাকে। একটি দুলানোর অ্যানিমেশন তৈরি করুন যা প্রতিটি গাছকে সামান্য (২-৩ ডিগ্রি) বামে এবং ডানে ঘোরায়, যার সময়কাল হবে ৩-৪ সেকেন্ড। নিশ্চিত করুন যে অ্যানিমেশনটি অনন্তকাল ধরে লুপ করবে এবং প্রাকৃতিক গতির জন্য একটি ইজিং ফাংশন থাকবে। agent mode সম্পর্কে আরও জানুন এখানে। ## 🚀 চ্যালেঞ্জ: কাচের প্রতিফলন যোগ করা আপনার টেরারিয়ামে বাস্তবসম্মত কাচের প্রতিফলন যোগ করতে প্রস্তুত? এই কৌশলটি ডিজাইনে গভীরতা এবং বাস্তবতা যোগ করবে। আপনি সূক্ষ্ম হাইলাইট তৈরি করবেন যা কাচের পৃষ্ঠে আলো প্রতিফলিত করার অনুকরণ করে। এই পদ্ধতি রেনেসাঁ চিত্রশিল্পী যেমন Jan van Eyck কিভাবে আলো এবং প্রতিফলন ব্যবহার করে আঁকা কাচকে থ্রিডি দেখাতেন তার মতো। আপনি যা অর্জন করতে চান তা হলো: আপনার চ্যালেঞ্জ: - তৈরি করুন সূক্ষ্ম সাদা বা হালকা রঙের ডিম্বাকৃতি আকৃতি কাচের প্রতিফলনের জন্য - কৌশলে অবস্থান করুন জারের বাম পাশে - প্রয়োগ করুন যথাযথ অপাসিটি এবং ব্লার প্রভাব বাস্তবসম্মত আলো প্রতিফলনের জন্য - ব্যবহার করুন border-radius অর্গানিক, বুদবুদের মতো আকৃতি তৈরি করতে - পরীক্ষা করুন গ্রেডিয়েন্ট বা বক্স-শ্যাডো আরও বাস্তবতার জন্য ## পোস্ট-লেকচার কুইজ পোস্ট-লেকচার কুইজ ## আপনার CSS জ্ঞান প্রসারিত করুন CSS প্রথমে জটিল মনে হতে পারে, কিন্তু এই মূল ধারণাগুলো বোঝা আরও উন্নত কৌশলের জন্য একটি শক্ত ভিত্তি প্রদান করে। আপনার পরবর্তী CSS শেখার ক্ষেত্রগুলো: - Flexbox - উপাদানগুলোর অ্যালাইনমেন্ট এবং ডিস্ট্রিবিউশন সহজ করে - CSS Grid - জটিল লেআউট তৈরির জন্য শক্তিশালী টুল প্রদান করে - CSS Variables - পুনরাবৃত্তি কমায় এবং রক্ষণাবেক্ষণ উন্নত করে - Responsive design - বিভিন্ন স্ক্রিন সাইজে সাইটগুলো ভালোভাবে কাজ নিশ্চিত করে ### ইন্টারেক্টিভ লার্নিং রিসোর্স এই ধারণাগুলো অনুশীলন করুন এই আকর্ষণীয়, হাতে-কলমে গেমগুলোর মাধ্যমে: - 🐸 Flexbox Froggy - মজার চ্যালেঞ্জের মাধ্যমে Flexbox শিখুন - 🌱 Grid Garden - ভার্চুয়াল গাজর চাষ করে CSS Grid শিখুন - 🎯 CSS Battle - কোডিং চ্যালেঞ্জের মাধ্যমে আপনার CSS দক্ষতা পরীক্ষা করুন ### অতিরিক্ত শেখা CSS এর মৌলিক বিষয়গুলো নিয়ে বিস্তারিত জানতে এই Microsoft Learn মডিউল সম্পূর্ণ করুন: Style your HTML app with CSS ### ⚡ পরবর্তী ৫ মিনিটে আপনি যা করতে পারেন - [ ] DevTools খুলুন এবং Elements প্যানেল ব্যবহার করে যেকোনো ওয়েবসাইটের CSS স্টাইল পরীক্ষা করুন - [ ] একটি সাধারণ CSS ফাইল তৈরি করুন এবং এটি একটি HTML পেজে লিঙ্ক করুন - [ ] বিভিন্ন পদ্ধতি ব্যবহার করে রঙ পরিবর্তন করার চেষ্টা করুন: hex, RGB, এবং নামকৃত রঙ - [ ] একটি div-এ প্যাডিং এবং মার্জিন যোগ করে বক্স মডেল অনুশীলন করুন ### 🎯 এই ঘণ্টায় আপনি যা অর্জন করতে পারেন - [ ] পোস্ট-লেসন কুইজ সম্পূর্ণ করুন এবং CSS এর মৌলিক বিষয়গুলো পুনরায় দেখুন - [ ] আপনার HTML পেজে ফন্ট, রঙ এবং স্পেসিং দিয়ে স্টাইল যোগ করুন - [ ] Flexbox বা Grid ব্যবহার করে একটি সাধারণ লেআউট তৈরি করুন - [ ] CSS ট্রানজিশন ব্যবহার করে মসৃণ প্রভাব তৈরি করুন - [ ] মিডিয়া কোয়েরি দিয়ে রেসপন্সিভ ডিজাইন অনুশীলন করুন ### 📅 আপনার সপ্তাহব্যাপী CSS অ্যাডভেঞ্চার - [ ] সৃজনশীলতার সাথে টেরারিয়াম স্টাইলিং অ্যাসাইনমেন্ট সম্পূর্ণ করুন - [ ] CSS Grid মাস্টার করুন একটি ফটো গ্যালারি লেআউট তৈরি করে - [ ] CSS অ্যানিমেশন শিখুন আপনার ডিজাইনগুলো জীবন্ত করতে - [ ] Sass বা Less এর মতো CSS প্রিপ্রসেসর অন্বেষণ করুন - [ ] ডিজাইন নীতিগুলো অধ্যয়ন করুন এবং সেগুলো আপনার CSS-এ প্রয়োগ করুন - [ ] অনলাইনে পাওয়া আকর্ষণীয় ডিজাইনগুলো বিশ্লেষণ করুন এবং পুনরায় তৈরি করুন ### 🌟 আপনার মাসব্যাপী ডিজাইন দক্ষতা - [ ] একটি সম্পূর্ণ রেসপন্সিভ ওয়েবসাইট ডিজাইন সিস্টেম তৈরি করুন - [ ] CSS-in-JS বা Tailwind এর মতো ইউটিলিটি-ফার্স্ট ফ্রেমওয়ার্ক শিখুন - [ ] CSS উন্নতির মাধ্যমে ওপেন সোর্স প্রোজেক্টে অবদান রাখুন - [ ] CSS এর উন্নত ধারণাগুলো মাস্টার করুন যেমন CSS কাস্টম প্রপার্টি এবং কন্টেইনমেন্ট - [ ] মডুলার CSS দিয়ে পুনরায় ব্যবহারযোগ্য কম্পোনেন্ট লাইব্রেরি তৈরি করুন - [ ] CSS শেখার জন্য অন্যদের মেন্টর করুন এবং ডিজাইন জ্ঞান শেয়ার করুন ## 🎯 আপনার CSS দক্ষতার টাইমলাইন ### 🛠️ আপনার CSS টুলকিট সারাংশ এই পাঠ সম্পূর্ণ করার পর, এখন আপনার কাছে রয়েছে: - ক্যাসকেড বোঝা: কীভাবে স্টাইলগুলো উত্তরাধিকারসূত্রে প্রাপ্ত হয় এবং একে অপরকে ওভাররাইড করে - সিলেক্টর দক্ষতা: উপাদান, ক্লাস এবং ID দিয়ে সুনির্দিষ্ট টার্গেটিং - পজিশনিং দক্ষতা: কৌশলগত উপাদান স্থাপন এবং লেয়ারিং - ভিজ্যুয়াল ডিজাইন: কাচের প্রভাব, ছায়া এবং স্বচ্ছতা তৈরি করা - রেসপন্সিভ কৌশল: শতাংশ-ভিত্তিক লেআউট যা যেকোনো স্ক্রিনে মানিয়ে নেয় - কোড সংগঠন: পরিষ্কার, রক্ষণাবেক্ষণযোগ্য CSS কাঠামো - আধুনিক পদ্ধতি: আপেক্ষিক ইউনিট এবং অ্যাক্সেসযোগ্য ডিজাইন প্যাটার্ন ব্যবহার করা পরবর্তী পদক্ষেপ: আপনার টেরারিয়ামে এখন কাঠামো (HTML) এবং স্টাইল (CSS) রয়েছে। চূড়ান্ত পাঠে আমরা JavaScript দিয়ে ইন্টারঅ্যাক্টিভিটি যোগ করব! ## অ্যাসাইনমেন্ট CSS Refactoring --- অস্বীকৃতি: এই নথিটি AI অনুবাদ পরিষেবা Co-op Translator ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতা নিশ্চিত করার চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যার জন্য আমরা দায়ী থাকব না।
Terrarium Project Část 1: Úvod do HTML
HTML, neboli HyperText Markup Language, je základem každé webové stránky, kterou jste kdy navštívili. Představte si HTML jako kostru, která dodává webovým stránkám strukturu – definuje, kam obsah patří, jak je uspořádán a co který prvek představuje. Zatímco CSS později „oblékne“ váš HTML do barev a rozvržení a JavaScript ho oživí interaktivitou, HTML poskytuje základní strukturu, díky níž je vše ostatní možné. V této lekci vytvoříte HTML strukturu pro rozhraní virtuálního terária. Tento praktický projekt vás naučí základní koncepty HTML při tvorbě něčeho vizuálně zajímavého. Naučíte se organizovat obsah pomocí sémantických prvků, pracovat s obrázky a vytvořit základ pro interaktivní webovou aplikaci. Na konci této lekce budete mít funkční HTML stránku zobrazující obrázky rostlin ve sloupcích, připravenou pro stylování v další lekci. Nebojte se, pokud to na začátku vypadá základně – právě tak by měl HTML vypadat před tím, než k němu CSS přidá vizuální úpravy. ## Přednáškový kvíz Přednáškový kvíz ## Nastavení vašeho projektu Než se pustíme do HTML kódu, nastavme si správné pracovní prostředí pro váš projekt terária. Vytvoření uspořádané struktury souborů hned od začátku je klíčový návyk, který vám bude po celou dobu vývoje webu velmi užitečný. ### Úkol: Vytvořte strukturu projektu Vytvoříte dedikovanou složku pro váš teráriový projekt a přidáte první HTML soubor. Zde jsou dva přístupy, které můžete použít: Možnost 1: Použití Visual Studio Code 1. Otevřete Visual Studio Code 2. Klikněte na "Soubor" → "Otevřít složku" nebo použijte Ctrl+K, Ctrl+O (Windows/Linux) nebo Cmd+K, Cmd+O (Mac) 3. Vytvořte novou složku s názvem terrarium a vyberte ji 4. V panelu Průzkumník klikněte na ikonu „Nový soubor“ 5. Pojmenujte svůj soubor index.html Možnost 2: Použití příkazového řádku Toto tyto příkazy provedou: - Vytvoří novou složku s názvem terrarium pro váš projekt - Přejde do složky terrarium - Vytvoří prázdný soubor index.html - Otevře soubor ve Visual Studio Code k úpravám ## Pochopení struktury HTML dokumentu Každý HTML dokument má specifickou strukturu, kterou prohlížeče potřebují porozumět a správně zobrazit. Strukturu si představte jako formální dopis – má povinné prvky v určitém pořadí, které pomáhají příjemci (v tomto případě prohlížeči) zpracovat obsah správně. Začneme přidáním základních prvků, které každý HTML dokument potřebuje. ### Deklarace DOCTYPE a kořenový prvek První dva řádky jakéhokoli HTML souboru slouží jako „úvod“ dokumentu pro prohlížeč: Co tento kód znamená: - Deklaruje typ dokumentu jako HTML5 pomocí <!DOCTYPE html> - Vytváří kořenový element <html>, který bude obsahovat celý obsah stránky - Nastavuje moderní webové standardy pro správné vykreslení v prohlížečích - Zajišťuje konzistentní zobrazení napříč různými prohlížeči a zařízeními ### 🔄 Pedagogická kontrola Zastavte se a zamyslete se: Než budete pokračovat, ujistěte se, že rozumíte: - ✅ Proč každý HTML dokument potřebuje deklaraci DOCTYPE - ✅ Co obsahuje kořenový element <html> - ✅ Jak tato struktura pomáhá prohlížečům správně vykreslit stránky Rychlý test: Dokážete vlastními slovy vysvětlit, co znamená „standardy vyhovující vykreslení“? ## Přidání základních metadat dokumentu Sekce <head> HTML dokumentu obsahuje důležité informace, které prohlížeče a vyhledávače potřebují, ale návštěvníci je přímo nevidí na stránce. Dá se to přirovnat k „zákulisním“ informacím, které pomáhají vaší webové stránce správně fungovat a zobrazovat se správně na různých zařízeních a platformách. Tato metadata říkají prohlížečům, jak stránku zobrazit, jaké znakovou sadu použít a jak se vypořádat s různými velikostmi obrazovky – vše nezbytné pro vytváření profesionálních, přístupných webových stránek. ### Úkol: Přidejte hlavičku dokumentu Vložte tuto sekci <head> mezi otevírací a zavírací tag <html>: Co každý prvek zajišťuje: - Nastavuje název stránky, který se zobrazuje v záložkách prohlížeče a ve výsledcích vyhledávání - Specifikuje kódování UTF-8 pro správné zobrazení textu po celém světě - Zajišťuje kompatibilitu s moderními verzemi Internet Exploreru - Nakonfiguruje responzivní design nastavením viewportu na šířku zařízení - Řídí počáteční úroveň přiblížení pro zobrazení obsahu v přirozené velikosti ## Vytvoření těla dokumentu Element <body> obsahuje veškerý viditelný obsah vaší webové stránky – vše, co uživatelé uvidí a s čím budou interagovat. Zatímco sekce <head> poskytuje prohlížeči instrukce, sekce <body> obsahuje skutečný obsah: text, obrázky, tlačítka a další prvky, které tvoří uživatelské rozhraní. Přidejme strukturu těla a pochopme, jak HTML tagy spolupracují při tvorbě smysluplného obsahu. ### Porozumění struktuře HTML tagů HTML používá párové tagy pro definici prvků. Většina tagů má otevírací tag jako <p> a uzavírací tag jako </p>, mezi nimiž je obsah: <p>Ahoj, světe!</p>. Tím vznikne odstavec obsahující text „Ahoj, světe!“. ### Úkol: Přidejte prvek body Aktualizujte svůj HTML soubor tak, aby zahrnoval element <body>: Co tato kompletní struktura zajišťuje: - Zajišťuje základní rámec HTML5 dokumentu - Obsahuje důležitá metadata pro správné vykreslení v prohlížečích - Vytváří prázdné tělo připravené na váš viditelný obsah - Následuje nejlepší moderní postupy webového vývoje Nyní jste připraveni přidat viditelné prvky vašeho terária. Použijeme prvky <div> jako kontejnery k organizaci různých částí obsahu a prvky <img> k zobrazení obrázků rostlin. ### Práce s obrázky a kontejnery rozvržení Obrázky jsou v HTML speciální tím, že používají „samo-uzavírací“ tagy. Na rozdíl od prvků jako <p></p>, které obklopují obsah, tag <img> obsahuje veškeré potřebné informace přímo v tagu pomocí atributů jako src pro cestu k obrázku a alt pro přístupnost. Než přidáte obrázky do vašeho HTML, musíte správně zorganizovat své projektové soubory vytvořením složky images a přidáním rastrových obrázků rostlin. Nejprve připravte obrázky: 1. Vytvořte složku images ve vaší složce projektu terrarium 2. Stáhněte obrázky rostlin z adresáře řešení (celkem 14 obrázků) 3. Zkopírujte všechny obrázky rostlin do nové složky images ### Úkol: Vytvořte rozvržení pro zobrazení rostlin Nyní přidejte obrázky rostlin uspořádané ve dvou sloupcích mezi vaše značky <body></body>: Krok za krokem, co se v tomto kódu děje: - Vytváří hlavní kontejner stránky s id="page" pro uchovávání veškerého obsahu - Vytváří dva sloupcové kontejnery: left-container a right-container - Uspořádává 7 rostlin v levém a 7 rostlin v pravém sloupci - Obaluje každý obrázek rostliny do divu s třídou plant-holder pro individuální umístění - Používá konzistentní názvy tříd pro stylování v CSS v další lekci - Přiřazuje jedinečná ID ke každému obrázku rostliny pro pozdější interakci pomocí JavaScriptu - Obsahuje správné cesty k souborům ukazující do složky images ### 🔄 Pedagogická kontrola Porozumění struktuře: Věnujte chvíli kontrole vaší HTML struktury: - ✅ Dokážete identifikovat hlavní kontejnery vašeho rozvržení? - ✅ Rozumíte, proč má každý obrázek jedinečné ID? - ✅ Jak byste popsali účel divů s třídou plant-holder? Vizuální kontrola: Otevřete svůj HTML soubor v prohlížeči. Měli byste vidět: - Základní seznam obrázků rostlin - Obrázky uspořádané ve dvou sloupcích - Jednoduché, nestylované rozvržení Pamatujte: Tento jednoduchý vzhled je přesně to, jak by měl HTML vypadat před stylováním CSS! S tímto markupem se rostliny zobrazí na obrazovce, i když zatím nebudou působit upraveně – to je úkol CSS v další lekci! Prozatím máte pevný HTML základ, který správně organizuje váš obsah a dodržuje nejlepší praktiky přístupnosti. ## Použití sémantického HTML pro přístupnost Sémantické HTML znamená vybírat HTML prvky na základě jejich významu a účelu, nejen vzhledu. Když používáte sémantické značkování, komunikujete strukturu a význam obsahu prohlížečům, vyhledávačům a asistenčním technologiím, jako jsou čtečky obrazovky. Tento přístup činí vaše weby přístupnější pro uživatele se zdravotním postižením a pomáhá vyhledávačům lépe pochopit váš obsah. Je to základní princip moderního webového vývoje, který vytváří lepší zkušenosti pro všechny. ### Přidání sémantického nadpisu stránky Přidejme řádný nadpis na vaši stránku terária. Vložte tento řádek hned za otevírací tag <body>: Proč je sémantické značkování důležité: - Pomáhá čtečkám obrazovky navigovat a chápat strukturu stránky - Zlepšuje optimalizaci pro vyhledávače (SEO) tím, že vyjasňuje hierarchii obsahu - Zvyšuje přístupnost pro uživatele se zrakovým postižením či kognitivními odlišnostmi - Vytváří lepší uživatelské zážitky na všech zařízeních a platformách - Dodržuje webové standardy a nejlepší praktiky profesionálního vývoje Příklady sémantických vs. nesémantických voleb: ## Vytvoření kontejneru pro terárium Nyní přidejme HTML strukturu samotného terária – skleněného kontejneru, kam budou rostliny později umístěny. Tato část ukazuje důležitý koncept: HTML poskytuje strukturu, ale bez CSS stylování tyto prvky zatím nebudou viditelné. Markup terária používá popisné názvy tříd, které usnadní intuitivní a udržovatelný CSS styl v další lekci. ### Úkol: Přidejte strukturu terária Vložte tento markup nad poslední značku </div> (před zavíracím tagem kontejneru stránky): Co tato struktura terária znamená: - Vytváří hlavní kontejner terária s jedinečným ID pro stylování - Definuje samostatné prvky pro každou vizuální součást (horní část, stěny, zemina, spodní část) - Zahrnuje vnořené prvky pro efekty odrazu skla (lesklé prvky) - Používá popisné názvy tříd, které jasně označují účel každého prvku - Připravuje strukturu pro CSS stylování, které vytvoří vzhled skleněného terária ### 🔄 Pedagogická kontrola Mistrovství HTML struktury: Než půjdete dál, ujistěte se, že umíte: - ✅ Vysvětlit rozdíl mezi strukturou HTML a vizuálním vzhledem - ✅ Rozpoznat sémantické a nesémantické HTML prvky - ✅ Popsat, jak správné značkování pomáhá přístupnosti - ✅ Rozpoznat úplnou strukturu stromu dokumentu Otestujte své porozumění: Zkuste otevřít svůj HTML soubor v prohlížeči s vypnutým JavaScriptem a odstraněným CSS. Ukáže vám to čistou sémantickou strukturu, kterou jste vytvořili! --- ## Výzva GitHub Copilot Agenta Použijte režim Agenta k dokončení následující výzvy: Popis: Vytvořte sémantickou HTML strukturu pro sekci průvodce péčí o rostliny, která by mohla být přidána do projektu terária. Výzva: Vytvořte sémantickou HTML sekci, která obsahuje hlavní nadpis „Průvodce péčí o rostliny“, tři podsekce s nadpisy „Zalévání“, „Požadavky na světlo“ a „Péče o půdu“, přičemž každá obsahuje odstavec s informacemi o péči o rostliny. Použijte správné sémantické HTML značky jako <section>, <h2>, <h3>, a <p> k vhodné struktuře obsahu. Více o režimu agenta se dozvíte zde. ## Výzva Prozkoumat Historii HTML Poznávání vývoje webu HTML se od svého vzniku značně vyvinulo od doby, kdy Tim Berners-Lee vytvořil první webový prohlížeč v CERN v roce 1990. Některé starší značky jako <marquee> jsou nyní zastaralé, protože nevyhovují moderním standardům přístupnosti a principům responzivního designu. Vyzkoušejte tento experiment: 1. Dočasně zabalte svůj titul <h1> do značky <marquee>: <marquee><h1>Moje terárium</h1></marquee> 2. Otevřete stránku v prohlížeči a sledujte efekt posouvání 3. Zamyslete se, proč byla tato značka zastaralá (tip: zaměřte se na uživatelský zážitek a přístupnost) 4. Odstraňte značku <marquee> a vraťte se k sémantickému značkování Reflexní otázky: - Jak by mohl titul s posouváním ovlivnit uživatele se zrakovým postižením nebo citlivostí na pohyb? - Jaké moderní CSS techniky by mohly podobné vizuální efekty dosáhnout přístupnějším způsobem? - Proč je důležité používat aktuální webové standardy místo zastaralých prvků? Prozkoumejte více o zastaralých a zastavených HTML prvcích a pochopte, jak se webové standardy vyvíjejí ke zlepšení uživatelského zážitku. ## Kvíz po lekci Kvíz po lekci ## Recenze a Samostudium Prohloubení znalostí HTML HTML je základem webu již více než 30 let, vyvíjelo se z jednoduchého značkovacího jazyka dokumentů do sofistikované platformy pro tvorbu interaktivních aplikací. Porozumění tomuto vývoji vám pomůže ocenit současné webové standardy a dělat lepší rozhodnutí při vývoji. Doporučené učební cesty: 1. Historie a vývoj HTML - Prozkoumejte časovou osu od HTML 1.0 po HTML5 - Zjistěte, proč byly některé značky zastaralé (přístupnost, mobilní přívětivost, udržovatelnost) - Zkoumejte nové funkce HTML a návrhy 2. Hlubší ponor do sémantického HTML - Studujte úplný seznam sémantických prvků HTML5 - Procvičujte rozpoznávání, kdy použít <article>, <section>, <aside> a <main> - Naučte se o atributech ARIA pro lepší přístupnost 3. Moderní webový vývoj - Prozkoumejte tvorbu responzivních webů na Microsoft Learn - Pochopte, jak HTML se integruje s CSS a JavaScriptem - Naučte se o výkonu webu a optimalizaci pro vyhledávače (SEO) Reflexní otázky: - Které zastaralé HTML značky jste objevili a proč byly odstraněny? - Jaké nové HTML funkce se navrhují pro budoucí verze? - Jak sémantické HTML přispívá k přístupnosti webu a SEO? ### ⚡ Co můžete udělat během následujících 5 minut - [ ] Otevřete DevTools (F12) a prozkoumejte HTML strukturu své oblíbené webové stránky - [ ] Vytvořte jednoduchý HTML soubor se základními značkami: <h1>, <p>, a <img> - [ ] Ověřte svůj HTML pomocí online validátoru W3C HTML Validator - [ ] Zkuste přidat komentář do HTML pomocí <!-- komentář --> ### 🎯 Co můžete zvládnout během této hodiny - [ ] Dokončete kvíz po lekci a zopakujte si koncepty sémantického HTML - [ ] Vytvořte jednoduchou webovou stránku o sobě s použitím správné HTML struktury - [ ] Experimentujte s různými úrovněmi nadpisů a značkami formátování textu - [ ] Přidejte obrázky a odkazy pro procvičení integrace multimédií - [ ] Prozkoumejte funkce HTML5, které jste ještě nevyzkoušeli ### 📅 Vaše týdenní cesta HTML - [ ] Dokončete zadání projektu terária se sémantickým značkováním - [ ] Vytvořte přístupnou webovou stránku s označením a rolemi ARIA - [ ] Procvičte tvorbu formulářů s různými typy vstupů - [ ] Prozkoumejte HTML5 API jako localStorage nebo geolokaci - [ ] Studujte vzory responzivního HTML a mobil-first design - [ ] Prohlédněte si kód HTML jiných vývojářů kvůli nejlepším praktikám ### 🌟 Vaše měsíční základy webu - [ ] Vytvořte portfolio web ukazující vaše HTML dovednosti - [ ] Naučte se šablonování HTML pomocí frameworku jako Handlebars - [ ] Přispívejte do open source projektů zlepšením HTML dokumentace - [ ] Ovládněte pokročilé koncepty HTML jako vlastní prvky - [ ] Integrujte HTML s CSS frameworky a JavaScript knihovnami - [ ] Vzdělávejte ostatní, kteří se učí základy HTML ## 🎯 Váš časový plán mistrovství HTML ### 🛠️ Shrnutí vašeho HTML nástroje Po dokončení této lekce nyní máte: - Struktura dokumentu: Kompletní HTML5 základ s správným DOCTYPE - Sémantické značkování: Významné značky, které zlepšují přístupnost a SEO - Integrace obrázků: Správná organizace souborů a praxe použití alt textů - Kontejnery pro layout: Strategické použití divů s popisnými názvy tříd - Povědomí o přístupnosti: Pochopení navigace čteček obrazovky - Moderní standardy: Aktuální praktiky HTML5 a znalost zastaralých značek - Základy projektu: Pevný základ pro CSS stylování a interaktivitu v JavaScriptu Další kroky: Vaše HTML struktura je připravena pro CSS stylování! Sémantický základ, který jste vytvořili, udělá další lekci mnohem snadnější k pochopení. ## Zadání Procvičte si HTML: Vytvořte mockup blogu --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Prohlášení o vyloučení odpovědnosti: Tento dokument byl přeložen pomocí AI překladatelské služby Co-op Translator. Přestože usilujeme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Originální dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Nejsme odpovědní za jakékoli nedorozumění nebo mylné výklady vyplývající z použití tohoto překladu. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrárium Projekt Část 2: Úvod do CSS
Vzpomínáte si, jak vaše HTML terrárium vypadalo docela základně? CSS je místo, kde přeměníme tu obyčejnou strukturu v něco vizuálně přitažlivého. Pokud je HTML jako stavba rámu domu, pak CSS je vše, co z něj dělá domov – barvy na stěnách, rozmístění nábytku, osvětlení a jak místnosti spolu plynule navazují. Zamyslete se, jak se Palác ve Versailles začal jako jednoduchý lovecký zámeček, ale pečlivá pozornost k dekoraci a uspořádání ho proměnila v jednu z nejvýznamnějších budov světa. Dnes proměníme vaše terrárium z funkčního na uhlazené. Naučíte se, jak přesně umisťovat prvky, jak vytvořit rozvržení reagující na různé velikosti obrazovky a vytvořit vizuální přitažlivost, která weby činí poutavými. Na konci této lekce uvidíte, jak strategický CSS styling může dramaticky zlepšit váš projekt. Přidejme vašemu terráriu trochu stylu. ## Přednáškový kvíz Přednáškový kvíz ## Začínáme s CSS CSS je často považováno jen za „dělání věcí hezčími“, ale slouží mnohem širšímu účelu. CSS je jako být režisérem filmu – kontrolujete nejen, jak vše vypadá, ale i jak se pohybuje, reaguje na interakce a přizpůsobuje se různým situacím. Moderní CSS je neuvěřitelně schopné. Můžete psát kód, který automaticky upravuje rozvržení pro telefony, tablety i desktopové počítače. Můžete vytvářet plynulé animace, které vedou pozornost uživatelů tam, kde je potřeba. Výsledky mohou být opravdu působivé, když vše funguje spolu. Toto si v lekci osvojíte: - Vytvoříme kompletní vizuální design vašeho terrária pomocí moderních CSS technik - Prozkoumáme základní koncepty jako kaskáda, dědičnost a CSS selektory - Implementujeme responzivní umístění a strategie rozvržení - Postavíme kontejner terrária pomocí CSS tvarů a stylování ### Požadavky Měli byste mít dokončenou HTML strukturu vašeho terrária z předchozí lekce a připravenou k stylování. ### Nastavení souboru CSS Než začneme se stylováním, musíme propojit CSS s naším HTML. Toto propojení říká prohlížeči, kde najde instrukce pro stylování našeho terrária. Ve složce vašeho terrária vytvořte nový soubor s názvem style.css a propojte ho v <head> sekci vašeho HTML dokumentu: Co tento kód dělá: - Vytváří propojení mezi vaším HTML a CSS soubory - Říká prohlížeči, aby načetl a aplikoval styly ze souboru style.css - Používá atribut rel="stylesheet" pro specifikaci, že se jedná o CSS soubor - Odkazuje na cestu souboru s href="./style.css" ## Pochopení CSS kaskády Už jste se někdy ptali, proč se CSS říká „Cascading“ Style Sheets (kaskádové styly)? Styly kaskádovitě přecházejí dolů jako vodopád a někdy si navzájem odporují. Přemýšlejte, jak fungují vojenské velení – generální rozkaz může říkat „všichni vojáci noste zelenou“, ale specifický rozkaz vaší jednotce říká „na ceremonii noste slavnostní uniformu“. Specifičtější instrukce má přednost. CSS se řídí podobnou logikou a pochopení této hierarchie pomáhá při odstraňování chyb. ### Experiment s prioritou kaskády Pojďme vidět kaskádu v akci vytvořením konfliktu stylů. Nejprve přidejte inline styl do vašeho <h1> tagu: Co tento kód dělá: - Aplikuje červenou barvu přímo na <h1> prvek pomocí inline stylu - Používá atribut style pro vložení CSS přímo do HTML - Vytváří styl s nejvyšší prioritou pro tento konkrétní prvek Dále přidejte toto pravidlo do vašeho souboru style.css: V uvedeném jsme: - Definovali CSS pravidlo, které cílí na všechny <h1> prvky - Nastavili barvu textu na modrou pomocí externího stylopisu - Vytvořili pravidlo s nižší prioritou oproti inline stylům ✅ Ověření znalostí: Jaká barva se zobrazí ve vaší webové aplikaci? Proč tato barva vyhraje? Můžete vymyslet situace, kdy byste chtěli styly přepsat? ## CSS dědičnost v praxi CSS dědičnost funguje jako genetika – prvky dědí určité vlastnosti od svých rodičovských prvků. Pokud nastavíte font family na element <body>, veškerý text uvnitř automaticky používá stejný font. Je to podobné, jako charakteristická čelist habsburské rodiny, která se objevila v několika generacích, aniž by byla definována pro každého jednotlivce. Není však všechno dědičné. Textové styly jako fonty a barvy ano, ale rozvržení jako okraje a rámečky se nedědí. Stejně jako děti mohou zdědit fyzické rysy, ale ne oblečení svých rodičů. ### Pozorování dědičnosti fontu Podívejme se na dědičnost v akci nastavením font family na element <body>: Co se zde děje: - Nastavuje font family pro celou stránku cílením na element <body> - Používá font stack s náhradními možnostmi pro lepší kompatibilitu - Aplikuje moderní systémové fonty, které vypadají skvěle na různých operačních systémech - Zajišťuje, že všechny podřízené prvky dědí tento font, pokud není specificky přepsán Otevřete nástroje pro vývojáře prohlížeče (F12), přejděte na záložku Elements a prohlédněte si váš <h1> element. Uvidíte, že dědí font family od těla: ✅ Zkouška: Vyzkoušejte nastavit další děditelné vlastnosti na element <body>, např. color, line-height nebo text-align. Co se stane s vaším nadpisem a dalšími prvky? ### 🔄 Pedagogická kontrola Pochopení základů CSS: Než přejdeme k selektorům, ujistěte se, že umíte: - ✅ Vysvětlit rozdíl mezi kaskádou a dědičností - ✅ Předpovědět, který styl vyhraje při konfliktu specifičnosti - ✅ Identifikovat vlastnosti děditelné z rodičovských prvků - ✅ Správně propojit CSS soubory s HTML Rychlý test: Pokud máte tyto styly, jakou barvu bude mít <h1> uvnitř <div class="special">? Odpověď: Červená (element selektor přímo cílí na h1) ## Ovládání CSS selektorů CSS selektory jsou způsob, jak cílit na konkrétní prvky pro stylování. Fungují jako přesné instrukce – místo „dům“ řeknete „modrý dům s červenými dveřmi v ulici Maple“. CSS nabízí různé způsoby, jak být specifický, a správný výběr selektoru je jako výběr správného nástroje pro práci. Někdy potřebujete stylovat všechny dveře v okolí, jindy jen jedny konkrétní. ### Element selektory (tagy) Element selektory cílí na HTML prvky podle jejich značky. Jsou ideální pro nastavení základních stylů, které se mají aplikovat široce na stránce: Rozbor těchto stylů: - Nastavuje konzistentní typografii pro celou stránku pomocí selektoru body - Odstraňuje výchozí okraje a padding prohlížeče pro lepší kontrolu - Styluje všechny nadpisové elementy barvou, zarovnáním a odsazením - Používá jednotky rem pro škálovatelné, přístupné velikosti písma Zatímco element selektory fungují dobře pro obecné stylování, budete potřebovat specifičtější selektory pro stylování jednotlivých komponent jako jsou rostliny ve vašem terráriu. ### ID selektory pro unikátní prvky ID selektory používají symbol # a cílí na prvky se specifickým atributem id. Protože ID musí být na stránce unikátní, jsou ideální pro stylování izolovaných, speciálních prvků jako naše levé a pravé kontejnery rostlin. Vytvořme stylování pro postranní kontejnery našeho terrária, kde rostliny budou: Co tento kód umí: - Umísťuje kontejnery k levému a pravému okraji pomocí absolute pozicování - Používá jednotky vh (výška viewportu) pro responzivní výšku přizpůsobující se velikosti obrazovky - Aplikuje box-sizing: border-box tak, aby padding byl zahrnut v celkové šířce - Odstraňuje zbytečné px jednotky u nulových hodnot kvůli čistšímu kódu - Nastavuje jemné pozadí, které je příjemnější pro oči než ostrá šedá ✅ Výzva k optimalizaci kódu: Všimněte si, že tento CSS porušuje zásadu DRY (Don’t Repeat Yourself). Dokážete jej refaktorovat pomocí kombinace ID a třídy? Lepší přístup: ### Třídní selektory pro opakované styly Třídní selektory používají symbol . a jsou perfektní, když chcete aplikovat stejné styly na více prvků. Na rozdíl od ID lze třídy používat opakovaně v celém HTML, což je ideální pro konzistentní stylování vzorů. V našem terráriu každá rostlina potřebuje podobné stylování, ale také individuální umístění. Použijeme kombinaci tříd pro společné styly a ID pro jedinečné pozice. Toto je HTML struktura každé rostliny: Vysvětlení klíčových prvků: - Používá class="plant-holder" pro konzistentní stylování kontejneru u všech rostlin - Aplikuje class="plant" pro společné styly obrázku a chování - Obsahuje unikátní id="plant1" pro individuální pozici a JavaScriptovou interakci - Poskytuje popisný alt text pro přístupnost čteček obrazovky Nyní přidejte tyto styly do vašeho souboru style.css: Co tyto styly dělají: - Vytváří relativní pozicování pro držitele rostliny, aby byl kontext pozicování - Nastavuje výšku každého držitele rostliny na 13 %, aby všechny rostliny vešly vertikálně bez posouvání - Posouvá držitele mírně doleva pro lepší vystředění rostlin v kontejnerech - Umožňuje rostlinám škálovat se responzivně pomocí max-width a max-height - Používá z-index pro vrstvení rostlin nad ostatní prvky v terráriu - Přidává jemný hover efekt s CSS přechody pro lepší interakci uživatele ✅ Kritické myšlení: Proč potřebujeme oba selektory .plant-holder a .plant? Co by se stalo, kdybychom použili jen jeden? ## Pochopení CSS pozicování CSS pozicování je jako být režisérem divadelní hry – určujete, kde každý herec stojí a jak se pohybuje po jevišti. Někteří herci následují základní formaci, zatímco jiní potřebují specifické umístění pro dramatický efekt. Jakmile pochopíte pozicování, mnohé výzvy rozvržení se stanou zvládnutelnými. Potřebujete navigační lištu, která zůstane nahoře, když uživatelé scrollují? O to se postará pozicování. Chcete tooltip, který se objeví na konkrétním místě? To je taky pozicování. ### Pět hodnot pozice ### Pozicování v našem terráriu Naše terrárium používá strategickou kombinaci typů pozicování k vytvoření požadovaného rozvržení: Vysvětlení strategie pozicování: - Absolutní kontejnery jsou odstraněny z normálního toku dokumentu a přilepeny k okrajům obrazovky - Relativní držitelé rostlin vytváří kontext pozicování, ale zůstávají v toku dokumentu - Absolutní rostliny lze přesně umístit v rámci relativních kontejnerů - Tato kombinace umožňuje skládání rostlin vertikálně a zároveň jejich individuální pozicování ✅ Experiment: Vyzkoušejte změnit hodnoty pozicování a pozorujte výsledky: - Co se stane, pokud změníte .container z absolute na relative? - Jak se změní rozvržení, pokud .plant-holder používá absolute místo relative? - Co se stane, když přepnete .plant na relative pozicování? ### 🔄 Pedagogická kontrola Mistrovství v CSS pozicování: Zastavte se a ověřte si své porozumění: - ✅ Dokážete vysvětlit, proč rostliny potřebují absolutní pozicování pro drag-and-drop? - ✅ Rozumíte, jak relativní kontejnery vytvářejí kontext pozicování? - ✅ Proč boční kontejnery používají absolutní pozicování? - ✅ Co by se stalo, kdybyste úplně odstranili deklarace pozicování? Spojení s reálným světem: Zamyslete se, jak CSS pozicování odráží reálné rozvržení: - Static: Knihy na polici (přirozené pořadí) - Relative: Posunutí knihy trochu, ale zachování jejího místa - Absolute: Umístění záložky na přesné číslo stránky - Fixed: Lepicí lístek, který zůstává viditelný při převracení stránek ## Tvorba terária pomocí CSS Nyní vytvoříme skleněnou nádobu pouze pomocí CSS – bez obrázků nebo grafického softwaru. Vytváření realisticky vypadajícího skla, stínů a hloubkových efektů pomocí pozicování a průhlednosti demonstruje vizuální schopnosti CSS. Tato technika odráží způsob, jakým architekti z Bauhausu používali jednoduché geometrické tvary k vytvoření složitých a krásných struktur. Jakmile tato pravidla pochopíte, rozpoznáte CSS techniky za mnoha webovými designy. ### Tvorba komponent skleněné nádoby Pojďme sestavit terárium kousek po kousku. Každá část využívá absolutní pozicování a procentuální rozměry pro responzivní design: Pochopení konstrukce terária: - Používá rozměry v procentech pro responzivní škálování na všech obrazovkách - Pozicuje prvky absolutně, aby se přesně stohovaly a zarovnávaly - Aplikuje různé hodnoty průhlednosti k vytvoření efektu skla - Implementuje vrstvení pomocí z-index, aby rostliny byly uvnitř nádoby - Přidává jemné stíny a upravené zaoblení rohů pro realistický vzhled ### Responzivní design s procenty Všimněte si, že všechny rozměry jsou v procentech místo pevných pixelů: Proč je to důležité: - Zajišťuje, že terárium se proporčně škáluje na jakékoliv obrazovce - Udržuje vizuální vztahy mezi komponenty nádoby - Poskytuje konzistentní zážitek od mobilů po velké monitory - Umožňuje designu adaptovat se bez rozbití vizuálního rozvržení ### Použití CSS jednotek v praxi Používáme jednotky rem pro border-radius, které se škálují relativně ke kořenové velikosti písma. To vytváří přístupnější designy respektující uživatelské preference fontů. Více o relativních jednotkách CSS v oficiální specifikaci. ✅ Vizualní experimenty: Zkuste upravit tyto hodnoty a pozorujte efekty: - Změňte průhlednost nádoby z 0.5 na 0.8 – jak to ovlivní vzhled skla? - Upravte barvu hlíny z #3a241d na #8B4513 – jaký to má vizuální dopad? - Změňte z-index hlíny na 2 – co se stane s vrstvením? ### 🔄 Pedagogická kontrola Porozumění vizuálnímu designu v CSS: Potvrďte své znalosti vizuálního CSS: - ✅ Jak procentuální rozměry vytvářejí responzivní design? - ✅ Proč průhlednost vytváří efekt skleněné průhlednosti? - ✅ Jakou roli hraje z-index při vrstvení prvků? - ✅ Jak zaoblení rohů (border-radius) vytváří tvar nádoby? Princip designu: Všimněte si, jak stavíme složité vizuály z jednoduchých tvarů: 1. Obdélníky → Zaoblené obdélníky → Komponenty nádoby 2. Plné barvy → Průhlednost → Efekt skla 3. Jednotlivé prvky → Vrstvená kompozice → 3D vzhled --- ## Výzva GitHub Copilot Agenta 🚀 Použijte režim Agenta k dokončení následující výzvy: Popis: Vytvořte CSS animaci, která jemně houpá rostliny v teráriu ze strany na stranu, simulujíc přirozený vánek. Pomůže vám procvičit CSS animace, transformace a klíčové snímky a zároveň zlepší vizuální atraktivitu terária. Pokyn: Přidejte CSS animace klíčových snímků, které jemně houpají rostliny v teráriu ze strany na stranu. Vytvořte houpavou animaci, která mírně (2-3 stupně) otáčí každou rostlinu doleva a doprava v délce 3-4 sekund, a aplikujte ji na třídu .plant. Zajistěte, aby animace běžela nekonečně a měla easing pro přirozený pohyb. Více o režimu agenta se dozvíte zde. ## 🚀 Výzva: Přidání skleněných odlesků Připraveni vylepšit vaše terárium o realistické skleněné odlesky? Tato technika přidá designu hloubku a realističnost. Vytvoříte jemné odlesky, které simulují, jak se světlo odráží od skleněných povrchů. Tento přístup je podobný tomu, jak renesanční malíři jako Jan van Eyck používali světlo a odraz k vytvoření trojrozměrného dojmu malovaného skla. Takto to chcete dosáhnout: Vaše výzva: - Vytvořit jemné bílé nebo světlé oválné tvary pro skleněné odlesky - Umístit je strategicky na levé straně nádoby - Aplikovat vhodné průhlednosti a rozostření pro realistický odraz světla - Použít border-radius k vytvoření organických, bublinových tvarů - Experimentovat s přechody nebo stíny pro lepší realističnost ## Kvíz po přednášce Kvíz po přednášce ## Rozšiřte své znalosti CSS CSS může být zpočátku složité, ale pochopení těchto základních pojmů poskytuje pevné základy pro pokročilé techniky. Vaše další oblasti učení CSS: - Flexbox - zjednodušuje zarovnání a distribuci prvků - CSS Grid - nabízí výkonné nástroje pro tvorbu složitých rozvržení - CSS Proměnné - snižují opakování a zlepšují udržovatelnost - Responzivní design - zajišťuje dobrou funkčnost na různých zařízeních ### Interaktivní vzdělávací zdroje Procvičujte tyto koncepty pomocí těchto zábavných a praktických her: - 🐸 Flexbox Froggy - Ovládněte Flexbox pomocí zábavných úkolů - 🌱 Grid Garden - Naučte se CSS Grid pěstováním virtuálních mrkví - 🎯 CSS Battle - Otestujte své CSS dovednosti v kódovacích výzvách ### Další učení Pro komplexní základy CSS dokončete modul Microsoft Learn: Stylujte svou HTML aplikaci pomocí CSS ### ⚡ Co můžete udělat během následujících 5 minut - [ ] Otevřít DevTools a prozkoumat CSS styly na jakékoliv stránce pomocí panelu Elements - [ ] Vytvořit jednoduchý CSS soubor a propojit ho s HTML stránkou - [ ] Zkusit měnit barvy pomocí různých metod: hex, RGB, a pojmenovaných barev - [ ] Procvičit box model přidáním paddingu a marginu k divu ### 🎯 Co můžete zvládnout během této hodiny - [ ] Dokončit kvíz po lekci a zopakovat základy CSS - [ ] Stylovat HTML stránku pomocí fontů, barev a odsazení - [ ] Vytvořit jednoduché rozvržení pomocí flexboxu nebo gridu - [ ] Experimentovat s CSS přechody pro plynulé efekty - [ ] Procvičit responzivní design s media queries ### 📅 Vaše týdenní CSS dobrodružství - [ ] Dokončit zadání pro stylování terária s kreativním přístupem - [ ] Ovládnout CSS Grid tvorbou galerie fotografií - [ ] Naučit se CSS animace pro oživení svých designů - [ ] Prozkoumat CSS preprocesory jako Sass nebo Less - [ ] Studovat principy designu a aplikovat je v CSS - [ ] Analyzovat a znovu vytvořit zajímavé designy online ### 🌟 Vaše měsíční mistrovství v designu - [ ] Vytvořit kompletní systém responsivního webdesignu - [ ] Naučit se CSS-in-JS nebo utility-first frameworky jako Tailwind - [ ] Přispívat do open source projektů se zlepšeními CSS - [ ] Ovládnout pokročilé koncepty CSS jako vlastní vlastnosti a containment - [ ] Vytvořit znovupoužitelné knihovny komponent s modulárním CSS - [ ] Mentorovat další, kdo se učí CSS, a sdílet designové znalosti ## 🎯 Váš časový plán zvládnutí CSS ### 🛠️ Shrnutí vašeho CSS nástroje Po dokončení této lekce máte nyní: - Porozumění kaskádě: Jak se styly dědí a přepisují - Mistrovství selektorů: Precizní cílení na elementy, třídy a ID - Dovednosti pozicování: Strategické umisťování a vrstvení prvků - Vizuální design: Vytváření skleněných efektů, stínů a průhlednosti - Responzivní techniky: Rozvržení založená na procentech, která se přizpůsobí obrazovce - Organizace kódu: Čistá, udržitelná struktura CSS - Moderní přístupy: Používání relativních jednotek a přístupných designových vzorů Další kroky: Vaše terárium má nyní strukturu (HTML) i styl (CSS). Závěrečná lekce přidá interaktivitu pomocí JavaScriptu! ## Zadání CSS Refactoring --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Prohlášení o vyloučení odpovědnosti: Tento dokument byl přeložen pomocí služby automatického překladu AI Co-op Translator. I když usilujeme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Originální dokument v jeho rodném jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Nejsme odpovědni za jakékoli nedorozumění nebo chybné výklady vyplývající z použití tohoto překladu. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Projekt Del 1: Introduktion til HTML
HTML, eller HyperText Markup Language, er fundamentet for enhver hjemmeside, du nogensinde har besøgt. Tænk på HTML som skelettet, der giver struktur til websider – det definerer, hvor indholdet skal være, hvordan det organiseres, og hvad hvert enkelt element repræsenterer. Mens CSS senere "pynter" din HTML med farver og layouts, og JavaScript bringer det til live med interaktivitet, giver HTML den essentielle struktur, som gør alt andet muligt. I denne lektion vil du lave HTML-strukturen til en virtuel terrariumgrænseflade. Dette hands-on projekt vil lære dig grundlæggende HTML-koncepter, samtidig med at du bygger noget visuelt engagerende. Du lærer, hvordan du organiserer indhold ved hjælp af semantiske elementer, arbejder med billeder og laver fundamentet for en interaktiv webapplikation. Ved slutningen af denne lektion vil du have en fungerende HTML-side, der viser plantebilleder i organiserede kolonner, klar til styling i næste lektion. Vær ikke bekymret, hvis det ser grundlæggende ud til at starte med – det er præcis, hvad HTML skal gøre, før CSS tilføjer det visuelle finish. ## Forud-forelæsningstest Forud-forelæsningstest ## Opsætning af dit projekt Før vi dykker ned i HTML-koden, lad os sætte et passende arbejdsområde op til dit terrariumprojekt. At skabe en organiseret filstruktur fra starten er en vigtig vane, der vil gavne dig gennem hele din webudviklingsrejse. ### Opgave: Opret din projektstruktur Du skal oprette en dedikeret mappe til dit terrariumprojekt og tilføje din første HTML-fil. Her er to metoder, du kan bruge: Mulighed 1: Brug af Visual Studio Code 1. Åbn Visual Studio Code 2. Klik på "File" → "Open Folder" eller brug Ctrl+K, Ctrl+O (Windows/Linux) eller Cmd+K, Cmd+O (Mac) 3. Opret en ny mappe kaldet terrarium og vælg den 4. I Explorer-panelet, klik på ikonet "New File" 5. Navngiv din fil index.html Mulighed 2: Brug af terminalkommandoer Det er, hvad disse kommandoer gør: - Opretter en ny mappe kaldet terrarium til dit projekt - Navigerer ind i terrarium-mappen - Opretter en tom fil ved navn index.html - Åbner filen i Visual Studio Code til redigering ## Forståelse af HTML-dokumentstruktur Hvert HTML-dokument følger en specifik struktur, som browsere skal forstå og vise korrekt. Tænk på denne struktur som et formelt brev – det har nødvendige elementer i en bestemt rækkefølge, som hjælper modtageren (i dette tilfælde browseren) med at behandle indholdet korrekt. Lad os starte med at tilføje det essentielle fundament, som hvert HTML-dokument har brug for. ### DOCTYPE-deklarationen og rootelementet De første to linjer i en hvilken som helst HTML-fil fungerer som dokumentets "introduktion" til browseren: Sådan fungerer denne kode: - Deklarerer dokumenttypen som HTML5 ved hjælp af <!DOCTYPE html> - Opretter root-<html> elementet, som skal indeholde alt sideindhold - Etablerer moderne webstandarder for korrekt browsers rendering - Sikrer konsistent visning på tværs af forskellige browsere og enheder ### 🔄 Pædagogisk status Pause og refleksion: Før du fortsætter, skal du sikre dig, at du forstår: - ✅ Hvorfor hvert HTML-dokument har brug for en DOCTYPE-deklaration - ✅ Hvad <html>-root-elementet indeholder - ✅ Hvordan denne struktur hjælper browsere med at vise sider korrekt Hurtig selvtest: Kan du forklare med dine egne ord, hvad "standard-kompatibel rendering" betyder? ## Tilføjelse af essentiel dokumentmetadata <head>-sektionen i et HTML-dokument indeholder vigtig information, som browsere og søgemaskiner har brug for, men som besøgende ikke ser direkte på siden. Tænk på det som "bag kulisserne"-informationen, der hjælper din webside med at fungere korrekt og vises rigtigt på forskellige enheder og platforme. Denne metadata fortæller browserne, hvordan de skal vise din side, hvilken tegnkodning der skal bruges, og hvordan forskellige skærmstørrelser håndteres – alt sammen essentielt for at lave professionelle, tilgængelige websider. ### Opgave: Tilføj sidehovedet Indsæt denne <head>-sektion mellem dine åbnings- og lukningstags <html>: Hvad hvert element gør: - Sætter sidetitlen, som vises i browsertabs og søgeresultater - Specificerer UTF-8 tegnkodning for korrekt visning af tekst verden over - Sikrer kompatibilitet med moderne versioner af Internet Explorer - Konfigurerer responsivt design ved at sætte viewport til at matche enhedens bredde - Styrer startzoom for at vise indhold i naturlig størrelse ## Bygning af dokumentets krop <body>-elementet indeholder alt synligt indhold på din webside – alt brugerne vil se og interagere med. Mens <head>-sektionen giver instruktioner til browseren, indeholder <body>-sektionen det faktiske indhold: tekst, billeder, knapper og andre elementer, der udgør brugerfladen. Lad os tilføje kroppens struktur og forstå, hvordan HTML-tags arbejder sammen for at skabe meningsfuldt indhold. ### Forståelse af HTML-tagstruktur HTML bruger parrede tags til at definere elementer. De fleste tags har en åbnings-tag som <p> og en luknings-tag som </p>, med indhold imellem: <p>Hello, world!</p>. Det skaber et afsnitselement, der indeholder teksten "Hello, world!". ### Opgave: Tilføj body-elementet Opdater din HTML-fil til at inkludere <body>-elementet: Denne komplette struktur giver: - Etablerer det grundlæggende HTML5-dokumentrammeværk - Inkluderer vigtig metadata for korrekt browser-gengivelse - Skaber en tom krop klar til dit synlige indhold - Følger moderne webudviklings bedste praksis Nu er du klar til at tilføje de synlige elementer i dit terrarium. Vi bruger <div>-elementer som containere til at organisere forskellige sektioner af indhold, og <img>-elementer til at vise plantebilleder. ### Arbejde med billeder og layoutcontainere Billeder er specielle i HTML, fordi de bruger "self-closing" tags. I modsætning til elementer som <p></p>, der omslutter indhold, indeholder <img>-taget al den nødvendige information i selve tagget ved hjælp af attributter som src for billedfilens sti og alt for tilgængelighed. Før du tilføjer billeder til din HTML, skal du organisere dine projektfiler korrekt ved at oprette en billedmappe og tilføje plantegrafikkerne. Først, sæt dine billeder op: 1. Opret en mappe kaldet images inde i din terrariumprojektmappe 2. Download plantebillederne fra løsningsmappen (14 plantebilleder i alt) 3. Kopier alle plantebilleder ind i din nye images-mappe ### Opgave: Opret plantevisningslayoutet Tilføj nu plantebillederne organiseret i to kolonner mellem dine <body></body>-tags: Her sker der trin for trin i koden: - Opretter en hovedside-container med id="page" til at holde alt indhold - Etablerer to kolonnecontainere: left-container og right-container - Organiserer 7 planter i venstre kolonne og 7 planter i højre kolonne - Omslutter hvert plantebillede i en plant-holder div til individuel placering - Anvender konsekvente klassenavne til CSS-styling i næste lektion - Tildeler unikke ID’er til hvert plantebillede til JavaScript-interaktion senere - Indeholder korrekte filstier, der peger på billedmappen ### 🔄 Pædagogisk status Strukturforståelse: Tag et øjeblik til at gennemgå din HTML-struktur: - ✅ Kan du identificere hovedcontainerne i dit layout? - ✅ Forstår du, hvorfor hvert billede har en unik ID? - ✅ Hvordan vil du beskrive formålet med plant-holder div’erne? Visuel inspektion: Åbn din HTML-fil i en browser. Du burde se: - En basal liste af plantebilleder - Billeder organiseret i to kolonner - Simpelt, ustylet layout Husk: Dette simple udseende er præcis, hvordan HTML skal se ud, før CSS styling! Med denne markup tilføjet vil planterne vises på skærmen, selvom de endnu ikke ser polerede ud – det er hvad CSS er til i næste lektion! For nu har du et solidt HTML-fundament, der korrekt organiserer dit indhold og følger bedste praksis for tilgængelighed. ## Brug af semantisk HTML til tilgængelighed Semantisk HTML betyder at vælge HTML-elementer baseret på deres betydning og formål, ikke kun deres udseende. Når du bruger semantisk markup, kommunikerer du indholdets struktur og betydning til browsere, søgemaskiner og hjælpemetoder som skærmlæsere. Denne tilgang gør dine hjemmesider mere tilgængelige for brugere med handicap og hjælper søgemaskiner med bedre at forstå dit indhold. Det er et grundlæggende princip i moderne webudvikling, der skaber bedre oplevelser for alle. ### Tilføj en semantisk sidetitel Lad os tilføje en ordentlig overskrift til din terrariumsside. Indsæt denne linje lige efter dit åbnings-tag <body>: Hvorfor semantisk markup betyder noget: - Hjælper skærmlæsere med at navigere og forstå sidestrukturen - Forbedrer søgemaskineoptimering (SEO) ved at tydeliggøre indholdshierarkiet - Forstærker tilgængelighed for brugere med syns- eller kognitive forskelle - Skaber bedre brugeroplevelser på tværs af alle enheder og platforme - Følger webstandarder og bedste praksis til professionel udvikling Eksempler på semantiske vs. ikke-semantiske valg: ## Oprettelse af terrariumcontaineren Lad os nu tilføje HTML-strukturen til selve terrariet – glasbeholderen, hvor planter til sidst skal placeres. Denne sektion demonstrerer et vigtigt koncept: HTML giver struktur, men uden CSS-styling vil disse elementer endnu ikke være synlige. Terrarium-markup’en bruger beskrivende klassenavne, som vil gøre CSS-styling intuitivt og vedligeholdeligt i næste lektion. ### Opgave: Tilføj terrariumstrukturen Indsæt denne markup ovenover det sidste </div> tag (før lukningstagen for sidecontaineren): Forståelse af denne terrariumstruktur: - Opretter en hovedterrarium-container med et unikt ID til styling - Definerer separate elementer for hver visuel komponent (top, vægge, jord, bund) - Indeholder indlejrede elementer til glasrefleksionseffekter (glansfulde elementer) - Bruger beskrivende klassenavne, som tydeligt angiver hvert elements formål - Forbereder strukturen til CSS-styling, der vil skabe glasterrariumets udseende ### 🔄 Pædagogisk Tjek-ind Beherskelse af HTML-struktur: Før du går videre, sørg for at du kan: - ✅ Forklare forskellen mellem HTML-struktur og visuelt udseende - ✅ Identificere semantiske vs. ikke-semantiske HTML-elementer - ✅ Beskrive hvordan korrekt markup gavner tilgængelighed - ✅ Genkende den komplette dokumenttræsstruktur Test din forståelse: Prøv at åbne din HTML-fil i en browser med JavaScript slået fra og CSS fjernet. Dette viser dig den rene semantiske struktur, du har skabt! --- ## GitHub Copilot Agent-udfordring Brug Agent-tilstand til at fuldføre følgende udfordring: Beskrivelse: Opret en semantisk HTML-struktur til en planteplejevejledning, der kan tilføjes til terrariumprojektet. Prompt: Opret en semantisk HTML-sektion, der inkluderer en hovedoverskrift "Plant Care Guide", tre undersektioner med overskrifterne "Watering", "Light Requirements" og "Soil Care", hver med et afsnit om planteplejeinformation. Brug korrekte semantiske HTML-tags som <section>, <h2>, <h3>, og <p> til at strukturere indholdet passende. Lær mere om agent mode her. ## Udforsk HTML-historie-udfordring Lær om webudviklingens evolution HTML har udviklet sig betydeligt siden Tim Berners-Lee skabte den første webbrowser hos CERN i 1990. Nogle ældre tags som <marquee> er nu forældede, fordi de ikke fungerer godt med moderne tilgængelighedsstandarder og responsive designprincipper. Prøv dette eksperiment: 1. Pak midlertidigt din <h1>-titel ind i et <marquee>-tag: <marquee><h1>My Terrarium</h1></marquee> 2. Åbn din side i en browser og observer den rullende effekt 3. Overvej hvorfor dette tag blev forældet (hint: tænk på brugeroplevelse og tilgængelighed) 4. Fjern <marquee>-taget og vend tilbage til semantisk markup Refleksionsspørgsmål: - Hvordan kan en rullende titel påvirke brugere med synshandicap eller følsomhed over for bevægelse? - Hvilke moderne CSS-teknikker kan opnå lignende visuelle effekter mere tilgængeligt? - Hvorfor er det vigtigt at bruge gældende webstandarder frem for forældede elementer? Udforsk mere om forældede og udgåede HTML-elementer for at forstå, hvordan webstandarder udvikler sig for at forbedre brugeroplevelsen. ## Quiz efter lektionen Post-lecture quiz ## Gennemgang og selvstudie Dyk dybere ned i din HTML-viden HTML har dannet fundamentet for nettet i over 30 år, og er gået fra et simpelt dokumentmarkup-sprog til en avanceret platform for at bygge interaktive applikationer. Forståelsen af denne udvikling hjælper dig med at værdsætte moderne webstandarder og træffe bedre udviklingsbeslutninger. Anbefalede læringsveje: 1. HTML-historie og udvikling - Undersøg tidslinjen fra HTML 1.0 til HTML5 - Udforsk hvorfor visse tags blev forældede (tilgængelighed, mobilvenlighed, vedligeholdelse) - Undersøg nye funktioner og forslag til HTML 2. Dybdegående semantisk HTML - Studér den komplette liste over HTML5 semantiske elementer - Øv dig i at identificere hvornår du skal bruge <article>, <section>, <aside> og <main> - Lær om ARIA-attributter til forbedret tilgængelighed 3. Moderne webudvikling - Udforsk at bygge responsive websites på Microsoft Learn - Forstå hvordan HTML integreres med CSS og JavaScript - Lær om webperformance og SEO bedste praksis Refleksionsspørgsmål: - Hvilke forældede HTML-tags opdagede du, og hvorfor blev de fjernet? - Hvilke nye HTML-funktioner foreslås til fremtidige versioner? - Hvordan bidrager semantisk HTML til webtilgængelighed og SEO? ### ⚡ Hvad du kan nå på de næste 5 minutter - [ ] Åbn DevTools (F12) og inspicer HTML-strukturen på dit yndlingswebsite - [ ] Opret en simpel HTML-fil med grundlæggende tags: <h1>, <p>, og <img> - [ ] Valider din HTML med W3C HTML-validator online - [ ] Prøv at tilføje en kommentar til din HTML ved hjælp af <!-- comment --> ### 🎯 Hvad du kan opnå i denne time - [ ] Gennemfør quizzen efter lektionen og gennemgå koncepter om semantisk HTML - [ ] Byg en simpel hjemmeside om dig selv med korrekt HTML-struktur - [ ] Eksperimenter med forskellige overskriftsniveauer og tekstformaterings-tags - [ ] Tilføj billeder og links for at øve multimediaintegration - [ ] Undersøg HTML5-funktioner, du ikke har prøvet endnu ### 📅 Din ugelange HTML-rejse - [ ] Færdiggør terrariumprojekt-øvelsen med semantisk markup - [ ] Opret en tilgængelig hjemmeside med ARIA-labels og roller - [ ] Øv formoprettelse med forskellige input-typer - [ ] Udforsk HTML5 APIs som localStorage eller geolocation - [ ] Studér responsive HTML-mønstre og mobile-first design - [ ] Gennemgå andre udvikleres HTML-kode for bedste praksis ### 🌟 Dit månedlange webgrundlag - [ ] Byg en porteføljeside, der viser dit HTML-mesterskab - [ ] Lær HTML-templating med et framework som Handlebars - [ ] Bidrag til open source-projekter ved at forbedre HTML-dokumentation - [ ] Mestre avancerede HTML-koncepter som custom elements - [ ] Integrer HTML med CSS-frameworks og JavaScript-biblioteker - [ ] Vær mentor for andre, der lærer HTML-grundlaget ## 🎯 Din HTML-mesterskabstidslinje ### 🛠️ Din HTML-værktøjssamling Efter at have gennemført denne lektion har du nu: - Dokumentstruktur: Fuld HTML5-fundament med korrekt DOCTYPE - Semantisk markup: Meningsfulde tags, der forbedrer tilgængelighed og SEO - Billedeintegration: Korrekt filorganisering og brug af alt-tekster - Layoutcontainere: Strategisk brug af divs med beskrivende klassenavne - Tilgængelighedsbevidsthed: Forståelse for skærmlæsere og navigation - Moderne standarder: Aktuelle HTML5-praksisser og viden om forældede tags - Projekts фундамент: Solid base til CSS-styling og JavaScript-interaktivitet Næste skridt: Din HTML-struktur er klar til CSS-styling! Det semantiske fundament, du har bygget, vil gøre næste lektion meget nemmere at forstå. ## Opgave Øv dig i HTML: Byg en blogmodel --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Ansvarsfraskrivelse: Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten Co-op Translator. Selvom vi bestræber os på nøjagtighed, bedes du være opmærksom på, at automatiske oversættelser kan indeholde fejl eller unøjagtigheder. Det oprindelige dokument på dets modersmål bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå ved brug af denne oversættelse. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Projekt Del 2: Introduktion til CSS
Kan du huske, hvordan dit HTML-terrarium så temmelig grundlæggende ud? CSS er stedet, hvor vi forvandler den enkle struktur til noget visuelt tiltalende. Hvis HTML er som at bygge rammen til et hus, så er CSS alt det, der får det til at føles som et hjem – malefarverne, møblernes placering, belysningen og hvordan rummene flyder sammen. Tænk på, hvordan Versailles-paladset startede som en simpel jagtlodge, men med omhyggelig opmærksomhed på dekoration og layout blev det til et af verdens mest fantastiske bygninger. I dag vil vi forvandle dit terrarium fra funktionelt til poleret. Du vil lære at placere elementer præcist, lave layouts der tilpasser sig forskellige skærmstørrelser, og skabe det visuelle udtryk, som gør hjemmesider engagerende. Ved slutningen af denne lektion vil du se, hvordan strategisk CSS-styling dramatisk kan forbedre dit projekt. Lad os tilføre lidt stil til dit terrarium. ## Forud-forelæsning quiz Forud-forelæsningsquiz ## Kom godt i gang med CSS CSS bliver ofte betragtet som blot at "gøre ting pæne," men det tjener et langt bredere formål. CSS er som at være instruktør på en film – du kontrollerer ikke kun, hvordan alt ser ud, men også hvordan det bevæger sig, reagerer på interaktion og tilpasser sig forskellige situationer. Moderne CSS er utroligt kapabelt. Du kan skrive kode, som automatisk justerer layouts til telefoner, tablets og desktopcomputere. Du kan skabe glatte animationer, der guider brugerens opmærksomhed, hvor det er nødvendigt. Resultaterne kan være ret imponerende, når alt spiller sammen. Her er, hvad vi vil opnå i denne lektion: - Skabe et komplet visuelt design til dit terrarium ved hjælp af moderne CSS-teknikker - Udforske grundlæggende koncepter som cascade, arv og CSS-selektorer - Implementere responsive positionerings- og layoutstrategier - Bygge terrarium-beholderen ved hjælp af CSS-former og styling ### Forudsætning Du skal have færdiggjort HTML-strukturen til dit terrarium fra den forrige lektion og have den klar til at blive stylet. ### Opsætning af din CSS-fil Før vi kan begynde at style, skal vi forbinde CSS til vores HTML. Denne forbindelse fortæller browseren, hvor den kan finde stylinginstruktionerne til vores terrarium. I din terrarium-mappe, opret en ny fil kaldet style.css, og link den derefter i din HTML-dokus <head> sektion: Her er, hvad denne kode gør: - Opretter en forbindelse mellem dine HTML- og CSS-filer - Fortæller browseren at hente og anvende stilarterne fra style.css - Bruger rel="stylesheet" attributten for at angive, at det er en CSS-fil - Refererer filstien med href="./style.css" ## Forståelse af CSS Cascade Har du nogensinde undret dig over, hvorfor CSS kaldes "Cascading" Style Sheets? Stilarter strømmer ned som et vandfald, og nogle gange kommer de i konflikt med hinanden. Tænk på, hvordan militær kommando virker – en general ordre kunne sige "alle tropper skal have grøn uniform," men en specifik ordre til din enhed kunne sige "bær ceremoni-blåt til begivenheden." Den mere specifikke instruktion har forrang. CSS følger lignende logik, og at forstå denne hierarki gør fejlfinding meget lettere. ### Eksperiment med kaskadeprioritet Lad os se kaskaden i aktion ved at skabe en stil konflikt. Først tilføj en inline style til din <h1> tag: Hvad denne kode gør: - Anvender en rød farve direkte på <h1> elementet ved brug af inline-styling - Bruger style attributten til at indlejre CSS direkte i HTML - Skaber den højeste prioriterede regler for netop dette element Dernæst tilføj denne regel til din style.css fil: I ovenstående har vi: - Defineret en CSS-regel, der målretter alle <h1> elementer - Sat tekstfarven til blå ved brug af ekstern stylesheet - Skabt en lavere prioriteret regel i forhold til inline styles ✅ Videnstjek: Hvilken farve vises i din webapp? Hvorfor vinder netop den farve? Kan du tænke på situationer, hvor du vil tilsidesætte stilarter? ## CSS Arv i praksis CSS arv fungerer som genetik – elementer arver visse egenskaber fra deres forældrelementer. Hvis du sætter font-familien på <body> elementet, bruger al tekst inden i automatisk den samme font. Det minder om, hvordan Habsburg familiens karakteristiske kæbelinje optrådte gennem generationer uden at skulle specificeres for hver enkelt. Men ikke alt arves. Tekststile som skrifttyper og farver arves, mens layout-egenskaber som margin og rammer ikke gør. Ligesom børn kan arve fysiske træk, men ikke deres forældres tøjstil. ### Observering af font-arv Lad os se arv i praksis ved at sætte en font-familie på <body> elementet: Hvad der sker her: - Sætter font-familien for hele siden ved at målrette <body> elementet - Bruger en font-stak med fallback muligheder for bedre browser-kompatibilitet - Anvender moderne systemfonte, der ser godt ud på forskellige operativsystemer - Sikrer at alle børnelementer arver denne font, medmindre de specifikt overskrives Åbn din browsers udviklerværktøjer (F12), gå til Elements fanen, og undersøg dit <h1> element. Du vil se, at det arver font-familien fra body: ✅ Eksperimenter: Prøv at sætte andre arvelige egenskaber på <body> som color, line-height eller text-align. Hvad sker der med din overskrift og andre elementer? ### 🔄 Pædagogisk Tjek-ind CSS Grundlæggende Forståelse: Før du går videre til selektorer, skal du kunne: - ✅ Forklare forskellen mellem cascade og arv - ✅ Forudsige hvilken stil der vinder i en specifik konflikt - ✅ Identificere hvilke egenskaber der arves fra forældrelementer - ✅ Korrekt forbinde CSS-filer til HTML Hurtig Test: Hvis du har disse stilarter, hvilken farve får et <h1> inde i en <div class="special">? Svar: Rød (element-selektor målretter direkte h1) ## Mestre CSS Selektorer CSS selektorer er din måde at målrette specifikke elementer til styling. De fungerer som at give præcise anvisninger – i stedet for at sige "huset", kan du sige "det blå hus med den røde dør på Maple Street." CSS tilbyder forskellige måder at være specifik på, og at vælge den rigtige selektor er som at vælge det rigtige værktøj til opgaven. Nogle gange skal du style alle døre i nabolaget, og andre gange kun en enkelt bestemt dør. ### Element-selektorer (tags) Element-selektorer målretter HTML-elementer på deres tag-navn. De er perfekte til at sætte basale stilarter, som gælder bredt på din side: Disse stilarter betyder: - Sætter en ensartet typografi på hele siden med body selektoren - Fjerner standard browser-marginer og padding for bedre kontrol - Styler alle overskriftselementer med farve, justering og afstand - Bruger rem enheder til skalerbar og tilgængelig skriftstørrelse Mens element-selektorer fungerer godt til generel styling, har du brug for mere specifikke selektorer for at style individuelle komponenter som planterne i dit terrarium. ### ID-selektorer til unikke elementer ID-selektorer bruger # symbolet og målretter elementer med specifikke id attributter. Da IDs skal være unikke på en side, er de perfekte til at style individuelle, særlige elementer som vores venstre og højre plantebeholdere. Lad os lave stilen til terrariets sidecontainere, hvor planterne skal bo: Hvad denne kode opnår: - Positionerer containere i yderste venstre og højre kant ved brug af absolute positionering - Bruger vh (viewport højde) enheder for responsiv højde, der tilpasser sig skærmstørrelse - Anvender box-sizing: border-box så padding indgår i den totale bredde - Fjerner unødvendige px enheder fra nul-værdier for renere kode - Sætter en diskret baggrundsfarve, der er lettere for øjnene end skarp grå ✅ Kodekvalitet Udfordring: Bemærk hvordan denne CSS overtræder DRY-princippet (Don't Repeat Yourself). Kan du refaktorere den ved at bruge både et ID og en klasse? Forbedret tilgang: ### Klasse-selektorer til genanvendelige stilarter Klasse-selektorer bruger . symbolet og er perfekte, når du vil anvende de samme stilarter på flere elementer. I modsætning til IDs kan klasser genbruges over hele dit HTML, hvilket gør dem ideelle til konsistente stylingmønstre. I vores terrarium har hver plante brug for lignende styling, men også individuel positionering. Vi bruger en kombination af klasser til delte stilarter og IDs til unik placering. Her er HTML-strukturen for hver plante: Vigtige elementer forklaret: - Bruger class="plant-holder" for ensartet container-styling på alle planter - Anvender class="plant" til delt billed-styling og adfærd - Indeholder unik id="plant1" til individuel positionering og JavaScript-interaktion - Giver beskrivende alt-tekst for skærmlæser tilgængelighed Tilføj nu disse stilarter til din style.css fil: Hvad disse stilarter gør: - Opretter relativ positionering for planteholderen for at etablere en positionerings-kontekst - Sætter hver planteholder til 13% højde, så alle planter passer lodret uden scroll - Skubber holdere let mod venstre for bedre centrerede planter i deres containere - Tillader planter at skalere responsivt med max-width og max-height egenskaber - Bruger z-index til at lægge planter ovenpå andre elementer i terrariet - Tilføjer en subtil hover-effekt med CSS transitions for bedre brugerinteraktion ✅ Kritisk Tænkning: Hvorfor har vi brug for både .plant-holder og .plant selektorer? Hvad ville ske, hvis vi kun brugte én? ## Forstå CSS Positionering CSS positionering er som at være sceneinstruktør i et teaterstykke – du bestemmer, hvor hver skuespiller skal stå og hvordan de bevæger sig på scenen. Nogle skuespillere følger standardformationen, mens andre har brug for specifik placering for dramatisk effekt. Når du forstår positionering, bliver mange layoutudfordringer håndterbare. Skal du bruge en navigationslinje, som bliver øverst, når brugerne scroller? Positionering håndterer det. Vil du have et tooltip, der vises et bestemt sted? Det er også positionering. ### De fem positioneringsværdier ### Positionering i vores terrarium Vores terrarium bruger en strategisk kombination af positionerings-typer for at skabe det ønskede layout: Forståelse af positioneringsstrategien: - Absolutte containere fjernes fra normal dokumentflow og fastgøres på skærmkanten - Relative planteholdere skaber positioneringskontekst samtidig med at de forbliver i dokumentflowet - Absolutte planter kan placeres præcist inden for deres relative containere - Denne kombination tillader planter at stables vertikalt, samtidig med individuel positionering ✅ Eksperimenter: Prøv at ændre positioneringsværdierne og observer resultaterne: - Hvad sker der, hvis du ændrer .container fra absolute til relative? - Hvordan ændrer layoutet sig, hvis .plant-holder bruger absolute i stedet for relative? - Hvad sker der, når du skifter .plant til relative positionering? ### 🔄 Pædagogisk status CSS Positioneringsfærdigheder: Stop op og bekræft din forståelse: - ✅ Kan du forklare, hvorfor planter har brug for absolut positionering for drag-and-drop? - ✅ Forstår du, hvordan relative containere skaber et positioneringskontekst? - ✅ Hvorfor bruger sidecontainerne absolut positionering? - ✅ Hvad ville der ske, hvis du fjernede positioneringsdeklarationerne helt? Forbindelse til virkeligheden: Tænk på, hvordan CSS-positionering afspejler layout i den virkelige verden: - Statisk: Bøger på en hylde (naturlig orden) - Relativ: Flytte en bog lidt, men beholde dens plads - Absolut: Placere et bogmærke på et præcist sidetal - Fast: En klæbrig seddel, der bliver synlig, mens du bladrer sider ## Byg terrariet med CSS Nu bygger vi et glasglas kun med CSS – ingen billeder eller grafisk software nødvendig. At skabe realistisk glas, skygger og dybdeeffekter ved hjælp af positionering og gennemsigtighed demonstrerer CSSs visuelle kapabiliteter. Denne teknik spejler, hvordan arkitekter i Bauhaus-bevægelsen brugte simple geometriske former til at skabe komplekse, flotte strukturer. Når du forstår disse principper, vil du genkende CSS-teknikker bag mange webdesigns. ### Oprettelse af glasbeholderens komponenter Lad os bygge terrariumglaset stykke for stykke. Hver del bruger absolut positionering og procentbaserede størrelser for responsivt design: Forstå terrariumkonstruktionen: - Bruger procentbaserede dimensioner for responsiv skalering på alle skærmstørrelser - Positionerer elementer absolut for præcis stabling og justering - Anvender forskellige opacitetsværdier for at skabe glaseffekten - Implementerer z-index lagdeling, så planter vises inde i glasset - Tilføjer diskret box-shadow og finpudset border-radius for mere realistisk udseende ### Responsivt design med procent Bemærk, hvordan alle dimensioner bruger procent i stedet for faste pixelværdier: Hvorfor det er vigtigt: - Sikrer at terrariet skalerer proportionelt på enhver skærmstørrelse - Bevarer de visuelle relationer mellem glaskomponenterne - Giver en ensartet oplevelse fra mobilen til store stationære skærme - Tillader designet at tilpasse sig uden at bryde layoutets udseende ### CSS-enheder i aktion Vi bruger rem enheder til border-radius, som skalerer relativt til roden fontstørrelse. Dette skaber mere tilgængelige designs, der respekterer brugerens fontpræferencer. Læs mere om CSS relative enheder i den officielle specifikation. ✅ Visuel eksperimentering: Prøv at ændre disse værdier og observer effekterne: - Ændr glassets opacitet fra 0.5 til 0.8 – hvordan påvirker det glasudseendet? - Juster jordfarven fra #3a241d til #8B4513 – hvilken visuel effekt får det? - Ændr z-index på jorden til 2 – hvad sker der med lagdelingen? ### 🔄 Pædagogisk status Forståelse af visuel CSS: Bekræft din forståelse af visuelt CSS: - ✅ Hvordan skaber procentbaserede dimensioner responsivt design? - ✅ Hvorfor skaber opacitet glaseffekten? - ✅ Hvilken rolle spiller z-index i lagdeling af elementer? - ✅ Hvordan skaber border-radius værdier glassets form? Designprincip: Bemærk, hvordan vi bygger komplekse visuelle effekter ud fra enkle former: 1. Rektangler → Afrundede rektangler → Glaskomponenter 2. Flade farver → Opacitet → Glaseffekt 3. Individuelle elementer → Lag på lag → 3D-udseende --- ## GitHub Copilot Agent-udfordring 🚀 Brug Agent-tilstand til at fuldføre denne udfordring: Beskrivelse: Opret en CSS-animation, der får terrariets planter til forsigtigt at svaje frem og tilbage, som i en naturlig brise. Dette hjælper dig med at øve CSS-animationer, transforms og keyframes samtidig med at dit terrariums visuelle appel forbedres. Prompt: Tilføj CSS keyframe-animationer for at få planterne i terrariet til blidt at svaje fra side til side. Skab en svajende animation, der roterer hver plante let (2-3 grader) til venstre og højre med en varighed på 3-4 sekunder, og anvend den på .plant klassen. Sørg for, at animationen kører uendeligt i loop og bruger en easing-funktion for naturlig bevægelse. Lær mere om agent-tilstand her. ## 🚀 Udfordring: Tilføjelse af glasreflektioner Klar til at forbedre dit terrarium med realistiske glasreflektioner? Denne teknik tilføjer dybde og realisme til designet. Du vil skabe subtile highlights, der simulerer, hvordan lys reflekteres på glasoverflader. Denne metode svarer til, hvordan renæssancens malere som Jan van Eyck brugte lys og refleksion til at få malet glas til at fremstå tredimensionelt. Sådan skal resultatet se ud: Din udfordring: - Opret subtile hvide eller lyse ovale former til glasreflektionerne - Positioner dem strategisk på venstre side af glasset - Anvend passende opacitet og sløring for realistisk lysrefleksion - Brug border-radius for at skabe organiske, bobleagtige former - Eksperimenter med gradients eller box-shadows for forbedret realisme ## Quiz efter forelæsning Quiz efter forelæsning ## Udvid din CSS-viden CSS kan føles komplekst i starten, men forståelse af disse kernebegreber giver et solidt fundament til mere avancerede teknikker. Dine næste CSS-læringsområder: - Flexbox – forenkler justering og distribution af elementer - CSS Grid – giver kraftfulde værktøjer til at skabe komplekse layouts - CSS-variabler – mindsker gentagelse og forbedrer vedligeholdelse - Responsivt design – sikrer at sider fungerer godt på forskellige skærmstørrelser ### Interaktive læringsressourcer Øv disse koncepter med disse engagerende, praktiske spil: - 🐸 Flexbox Froggy – Mestre Flexbox gennem sjove udfordringer - 🌱 Grid Garden – Lær CSS Grid ved at dyrke virtuelle gulerødder - 🎯 CSS Battle – Test dine CSS-evner med kodningsudfordringer ### Yderligere læring For en grundig indføring i CSS, gennemfør denne Microsoft Learn modul: Style your HTML app with CSS ### ⚡ Hvad du kan nå på de næste 5 minutter - [ ] Åbn DevTools og undersøg CSS-stilarter på en hvilken som helst hjemmeside via Elements-panelet - [ ] Opret en simpel CSS-fil og link den til en HTML-side - [ ] Prøv at ændre farver ved hjælp af forskellige metoder: hex, RGB og navngivne farver - [ ] Øv box-modellen ved at tilføje padding og margin til en div ### 🎯 Hvad du kan opnå denne time - [ ] Fuldfør quizzen efter lektionen og gennemgå CSS-grundlæggende - [ ] Style din HTML-side med fonte, farver og afstande - [ ] Opret et simpelt layout med flexbox eller grid - [ ] Eksperimenter med CSS-transitioner for glidende effekter - [ ] Øv responsivt design med medieforespørgsler ### 📅 Din ugelange CSS-rejse - [ ] Fuldfør terrariumstilingsopgaven med kreativ flair - [ ] Mestre CSS Grid ved at bygge et fotogalleri-layout - [ ] Lær CSS-animationer for at bringe dine designs til live - [ ] Udforsk CSS preprocessorer som Sass eller Less - [ ] Studér designprincipper og anvend dem i dit CSS - [ ] Analyser og genskab interessante designs, du finder online ### 🌟 Din månedslange designdomination - [ ] Byg et komplet responsivt webdesigntema - [ ] Lær CSS-in-JS eller utility-first frameworks som Tailwind - [ ] Bidrag til open source-projekter med CSS-forbedringer - [ ] Mestre avancerede CSS-koncepter som CSS-tilpassede egenskaber og containment - [ ] Skab genanvendelige komponentbiblioteker med modulær CSS - [ ] Vejled andre, der lærer CSS, og del designviden ## 🎯 Din CSS-mesterskabstidslinje ### 🛠️ Dit CSS-værktøjssæt resumé Efter at have gennemført denne lektion har du nu: - Forståelse af kaskade: Hvordan stilarter nedarves og overskrives - Selector-mesterskab: Præcis målretning med elementer, klasser og ID’er - Positioneringskompetencer: Strategisk placering og lagdeling af elementer - Visuelt design: Skabelse af glaseffekter, skygger og gennemsigtighed - Responsivitetsteknikker: Procentbaserede layouts, der tilpasser sig enhver skærm - Kodeorganisation: Ren, vedligeholdelsesvenlig CSS-struktur - Moderne praksis: Brug af relative enheder og tilgængelige designmønstre Næste skridt: Dit terrarium har nu både struktur (HTML) og stil (CSS). Den sidste lektion tilføjer interaktivitet med JavaScript! ## Opgave CSS Refaktorering --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Ansvarsfraskrivelse: Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten Co-op Translator. Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det oprindelige dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium-Projekt Teil 1: Einführung in HTML
HTML, oder HyperText Markup Language, ist die Grundlage jeder Website, die du je besucht hast. Betrachte HTML als das Skelett, das Webseiten Struktur verleiht – es definiert, wo Inhalte platziert werden, wie sie organisiert sind und was jeder Abschnitt repräsentiert. Während CSS später dein HTML mit Farben und Layouts „einkleidet“ und JavaScript es mit Interaktivität zum Leben erweckt, liefert HTML die wesentliche Struktur, die alles andere möglich macht. In dieser Lektion erstellst du die HTML-Struktur für eine virtuelle Terrarien-Oberfläche. Dieses praktische Projekt vermittelt dir grundlegende HTML-Konzepte, während du etwas optisch ansprechendes baust. Du lernst, Inhalte mit semantischen Elementen zu organisieren, mit Bildern zu arbeiten und die Grundlage für eine interaktive Webanwendung zu schaffen. Am Ende dieser Lektion hast du eine funktionierende HTML-Seite, die Pflanzenbilder in organisierten Spalten anzeigt, bereit zum Stylen in der nächsten Lektion. Mach dir keine Sorgen, wenn es am Anfang einfach aussieht – genau so soll HTML sein, bevor CSS das visuelle Finish hinzufügt. ## Pre-Lecture Quiz Pre-Lecture Quiz ## Einrichten deines Projekts Bevor wir in den HTML-Code eintauchen, richten wir einen passenden Arbeitsbereich für dein Terrarium-Projekt ein. Eine gut organisierte Verzeichnisstruktur von Anfang an zu erstellen, ist eine wichtige Gewohnheit, die dir während deiner gesamten Webentwicklungsreise zugutekommt. ### Aufgabe: Erstelle deine Projektstruktur Du legst einen dedizierten Ordner für dein Terrarium-Projekt an und fügst deine erste HTML-Datei hinzu. Hier sind zwei Ansätze, die du nutzen kannst: Option 1: Mit Visual Studio Code 1. Öffne Visual Studio Code 2. Klicke auf „Datei“ → „Ordner öffnen“ oder nutze Strg+K, Strg+O (Windows/Linux) bzw. Cmd+K, Cmd+O (Mac) 3. Erstelle einen neuen Ordner namens terrarium und wähle ihn aus 4. Klicke im Explorer-Bereich auf das Symbol „Neue Datei“ 5. Benenne deine Datei index.html Option 2: Mit Terminal-Befehlen Das bewirken diese Befehle: - Erstellt einen neuen Ordner namens terrarium für dein Projekt - Navigiert in den terrarium-Ordner - Erstellt eine leere Datei index.html - Öffnet die Datei in Visual Studio Code zur Bearbeitung ## Verständnis der HTML-Dokumentstruktur Jedes HTML-Dokument folgt einer bestimmten Struktur, die Browser benötigen, um es richtig darzustellen. Stell dir diese Struktur wie einen formellen Brief vor – sie enthält erforderliche Elemente in einer bestimmten Reihenfolge, die dem Empfänger (hier dem Browser) helfen, den Inhalt korrekt zu verarbeiten. Fangen wir damit an, die essenzielle Grundlage hinzuzufügen, die jeder HTML-Dokument benötigt. ### Die DOCTYPE-Deklaration und das Wurzel-Element Die ersten beiden Zeilen jeder HTML-Datei dienen als „Einleitung“ des Dokuments für den Browser: Was dieser Code bewirkt: - Deklariert den Dokumenttyp als HTML5 mit <!DOCTYPE html> - Erstellt das Wurzel-Element <html>, das den gesamten Seiteninhalt enthält - Legt moderne Web-Standards für korrekte Browserdarstellung fest - Sorgt für eine konsistente Anzeige über unterschiedliche Browser und Geräte hinweg ### 🔄 Pädagogischer Check-in Pause und Nachdenken: Bevor du weitermachst, stelle sicher, dass du verstehst: - ✅ Warum jedes HTML-Dokument eine DOCTYPE-Deklaration benötigt - ✅ Was das <html> Wurzelelement enthält - ✅ Wie diese Struktur Browsern hilft, Seiten korrekt darzustellen Schnell-Selbsttest: Kannst du mit eigenen Worten erklären, was „standards-konforme Darstellung“ bedeutet? ## Hinzufügen essenzieller Metadaten zum Dokument Der <head> Bereich eines HTML-Dokuments enthält wichtige Informationen, die Browser und Suchmaschinen brauchen, die Besucher aber nicht direkt auf der Seite sehen. Denk an ihn als die „Hinter den Kulissen“-Information, die deiner Webseite hilft, richtig zu funktionieren und auf verschiedenen Geräten und Plattformen korrekt zu erscheinen. Diese Metadaten sagen dem Browser, wie er deine Seite anzeigen soll, welche Zeichencodierung zu verwenden ist und wie verschiedene Bildschirmgrößen behandelt werden – alles entscheidend für professionelle, zugängliche Webseiten. ### Aufgabe: Füge den Dokument-Kopf hinzu Füge diesen <head>-Abschnitt zwischen deine öffnenden und schließenden <html>-Tags ein: Was jedes Element bewirkt: - Setzt den Seitentitel, der in Browser-Tabs und Suchergebnissen erscheint - Legt die UTF-8-Zeichencodierung für korrekte Anzeige weltweit fest - Sorgt für Kompatibilität mit modernen Versionen des Internet Explorers - Konfiguriert ein responsives Design, indem die Viewport-Breite an das Gerät angepasst wird - Steuert den Anfangs-Zoom, damit Inhalte in natürlicher Größe angezeigt werden ## Aufbau des Dokument-Inhaltsbereichs Das <body>-Element enthält den gesamten sichtbaren Inhalt deiner Webseite – alles, was Nutzer sehen und womit sie interagieren. Während der <head> Bereich dem Browser Anweisungen gab, enthält der <body> Bereich den eigentlichen Inhalt: Text, Bilder, Schaltflächen und weitere Elemente, die deine Benutzeroberfläche bilden. Fügen wir die Body-Struktur hinzu und verstehen, wie HTML-Tags zusammenwirken, um sinnvollen Inhalt zu erzeugen. ### Verstehen der HTML-Tag-Struktur HTML verwendet gepaarte Tags, um Elemente zu definieren. Die meisten Tags besitzen einen Öffnungs-Tag, z. B. <p>, und einen Schließ-Tag, z. B. </p>, mit dem Inhalt dazwischen: <p>Hallo Welt!</p>. Dadurch wird ein Absatz-Element mit dem Text „Hallo Welt!“ erzeugt. ### Aufgabe: Füge das Body-Element hinzu Aktualisiere deine HTML-Datei, sodass das <body> Element enthalten ist: Das bietet diese komplette Struktur: - Legt die grundlegende HTML5-Dokumentbasis fest - Beinhaltet wichtige Metadaten für korrekte Browserdarstellung - Erstellt einen leeren Body, bereit für sichtbare Inhalte - Folgt modernen Webentwicklungsbest-practices Jetzt bist du bereit, die sichtbaren Elemente deines Terrariums hinzuzufügen. Wir verwenden <div> Elemente als Container, um verschiedene Inhaltsabschnitte zu organisieren, und <img> Tags, um die Pflanzenbilder darzustellen. ### Arbeiten mit Bildern und Layout-Containern Bilder sind in HTML speziell, weil sie „selbstschließende“ Tags verwenden. Im Gegensatz zu Elementen wie <p></p>, die Inhalte umschließen, enthält das <img> Tag alle nötigen Informationen innerhalb des Tags selbst über Attribute wie src für den Pfad zur Bilddatei und alt für die Barrierefreiheit. Bevor du Bilder ins HTML einfügst, musst du deine Projektdateien richtig organisieren, indem du einen Bilderordner anlegst und die Pflanzen-Grafiken hinzufügst. Zuerst deine Bilder einrichten: 1. Lege einen Ordner images im terrarium-Projektordner an 2. Lade die Pflanzenbilder aus dem Lösungsordner herunter (insgesamt 14 Bilder) 3. Kopiere alle Pflanzenbilder in deinen neuen images-Ordner ### Aufgabe: Erstelle das Pflanzen-Anzeige-Layout Füge jetzt die Pflanzenbilder, organisiert in zwei Spalten, zwischen deine <body></body>-Tags ein: Schritt für Schritt, was dieser Code macht: - Erstellt einen Hauptseiten-Container mit id="page", der alle Inhalte hält - Legt zwei Spalten-Container an: left-container und right-container - Organisiert 7 Pflanzen in der linken und 7 Pflanzen in der rechten Spalte - Verpackt jedes Pflanzenbild in einen plant-holder-Div für individuelle Positionierung - Verwendet konsistente Klassennamen für CSS-Styling in der nächsten Lektion - Vergibt einzigartige IDs für jedes Pflanzenbild zur späteren JavaScript-Interaktion - Bezieht sich korrekt auf die Dateien im images-Ordner ### 🔄 Pädagogischer Check-in Struktur-Verständnis: Nimm dir einen Moment, um deine HTML-Struktur zu überprüfen: - ✅ Kannst du die Hauptcontainer deiner Layout-Struktur benennen? - ✅ Verstehst du, warum jedes Bild eine eindeutige ID hat? - ✅ Wie würdest du die Funktion der plant-holder-Divs beschreiben? Visuelle Prüfung: Öffne deine HTML-Datei im Browser. Du solltest folgendes sehen: - Eine einfache Liste von Pflanzenbildern - Bilder organisiert in zwei Spalten - Ein schlichtes, ungestyltes Layout Merke: Dieses einfache Aussehen ist genau das, was HTML vor dem Styling durch CSS ausmachen sollte! Mit diesem Markup erscheinen die Pflanzen auf dem Bildschirm, sehen aber noch nicht poliert aus – dafür ist CSS in der nächsten Lektion verantwortlich! Du hast jetzt eine solide HTML-Basis, die deine Inhalte gut organisiert und Zugänglichkeitsbest-Practices folgt. ## Semantisches HTML für Barrierefreiheit verwenden Semantisches HTML bedeutet, HTML-Elemente aufgrund ihrer Bedeutung und Funktion auszuwählen, nicht nur nach ihrem Aussehen. Wenn du semantische Auszeichnung verwendest, kommunizierst du die Struktur und Bedeutung deiner Inhalte an Browser, Suchmaschinen und unterstützende Technologien wie Screenreader. Dieser Ansatz macht deine Websites zugänglicher für Nutzer mit Beeinträchtigungen und hilft Suchmaschinen, deine Inhalte besser zu verstehen. Es ist ein grundlegendes Prinzip moderner Webentwicklung, das bessere Erlebnisse für alle schafft. ### Einen semantischen Seitentitel hinzufügen Fügen wir deiner Terrarien-Seite eine passende Überschrift hinzu. Setze diese Zeile direkt nach deinem öffnenden <body>-Tag ein: Warum semantische Auszeichnung wichtig ist: - Hilft Screenreadern, sich auf der Seite zurechtzufinden und die Struktur zu verstehen - Verbessert Suchmaschinenoptimierung (SEO) durch klare Inhalts-Hierarchie - Erhöht Barrierefreiheit für Nutzer mit Sehbehinderung oder kognitiven Einschränkungen - Schafft bessere Nutzererfahrungen auf allen Geräten und Plattformen - Folgt Webstandards und Best-Practices für professionelle Entwicklung Beispiele für semantische vs. nicht-semantische Wahl: ## Den Terrarien-Container erstellen Fügen wir jetzt die HTML-Struktur für das Terrarium selbst hinzu – den Glasbehälter, in den die Pflanzen später gesetzt werden. Dieser Abschnitt zeigt ein wichtiges Konzept: HTML liefert Struktur, aber ohne CSS-Styling sind diese Elemente noch nicht sichtbar. Das Terrarium-Markup verwendet beschreibende Klassennamen, die das CSS-Styling in der nächsten Lektion intuitiv und wartbar machen. ### Aufgabe: Füge die Terrarium-Struktur hinzu Füge dieses Markup oberhalb des letzten </div>-Tags (vor dem schließenden Tag des Seitencontainers) ein: Diese Terrarium-Struktur bedeutet: - Erstellt einen Haupt-Terrariencontainer mit einer eindeutigen ID für das Styling - Definiert separate Elemente für jede visuelle Komponente (oben, Wände, Erde, unten) - Beinhaltet verschachtelte Elemente für Glasreflexionseffekte (glänzende Elemente) - Verwendet beschreibende Klassennamen, die klar den Zweck jedes Elements anzeigen - Bereitet die Struktur für CSS-Styling vor, das das Aussehen eines Glasterrariums erzeugt ### 🔄 Pädagogische Überprüfung Beherrschung der HTML-Struktur: Bevor du weitermachst, stelle sicher, dass du: - ✅ Den Unterschied zwischen HTML-Struktur und optischem Erscheinungsbild erklären kannst - ✅ Semantische vs. nicht-sematische HTML-Elemente identifizieren kannst - ✅ Beschreiben kannst, wie korrektes Markup die Barrierefreiheit unterstützt - ✅ Die vollständige Dokumentstruktur erkennen kannst Teste dein Verständnis: Öffne deine HTML-Datei in einem Browser mit deaktiviertem JavaScript und ohne CSS. So siehst du die reine semantische Struktur, die du erstellt hast! --- ## GitHub Copilot Agent Herausforderung Verwende den Agent-Modus, um folgende Herausforderung zu meistern: Beschreibung: Erstelle eine semantische HTML-Struktur für einen Pflanzenpflegeleitfaden-Abschnitt, der zum Terrarium-Projekt hinzugefügt werden kann. Aufgabe: Erstelle einen semantischen HTML-Abschnitt mit einer Hauptüberschrift "Pflanzenpflege-Leitfaden", drei Unterabschnitten mit den Überschriften "Bewässerung", "Lichtanforderungen" und "Bodenpflege", die jeweils einen Absatz mit Informationen zur Pflanzenpflege enthalten. Verwende korrekte semantische HTML-Tags wie <section>, <h2>, <h3> und <p>, um den Inhalt angemessen zu strukturieren. Erfahre mehr über den Agent-Modus hier. ## Erkunde die HTML-Geschichte Herausforderung Lerne über die Entwicklung des Webs HTML hat sich seit der Erfindung des ersten Webbrowsers durch Tim Berners-Lee am CERN im Jahr 1990 stark weiterentwickelt. Einige ältere Tags wie <marquee> sind inzwischen veraltet, da sie nicht gut mit modernen Barrierefreiheitsstandards und Prinzipien des responsiven Designs funktionieren. Führe dieses Experiment durch: 1. Umschließe deinen <h1>-Titel vorübergehend mit einem <marquee>-Tag: <marquee><h1>Mein Terrarium</h1></marquee> 2. Öffne deine Seite im Browser und beobachte den Scroll-Effekt 3. Überlege, warum dieses Tag veraltet ist (Tipp: Denke an Benutzerfreundlichkeit und Barrierefreiheit) 4. Entferne das <marquee>-Tag und kehre zum semantischen Markup zurück Reflexionsfragen: - Wie könnte ein scrollender Titel Nutzer mit Sehbehinderungen oder Bewegungsempfindlichkeit beeinflussen? - Welche modernen CSS-Techniken könnten ähnlich visuelle Effekte zugänglicher erzeugen? - Warum ist es wichtig, aktuelle Webstandards anstelle veralteter Elemente zu verwenden? Erkunde mehr über veraltete und nicht mehr empfohlene HTML-Elemente, um zu verstehen, wie sich Webstandards entwickeln, um die Benutzererfahrung zu verbessern. ## Nachvorlesungs-Quiz Nachvorlesungs-Quiz ## Rückblick & Selbststudium Vertiefe dein HTML-Wissen HTML bildet seit über 30 Jahren die Basis des Webs und hat sich von einer einfachen Dokumentauszeichnungssprache zu einer ausgefeilten Plattform zur Erstellung interaktiver Anwendungen entwickelt. Das Verständnis dieser Entwicklung hilft dir, moderne Webstandards wertzuschätzen und bessere Entwicklungsentscheidungen zu treffen. Empfohlene Lernpfade: 1. HTML-Geschichte und Evolution - Erforsche den Zeitstrahl von HTML 1.0 bis HTML5 - Erkunde, warum bestimmte Tags veraltet sind (Barrierefreiheit, Mobile-Freundlichkeit, Wartbarkeit) - Informiere dich über neue HTML-Features und Vorschläge 2. Tiefgehendes semantisches HTML - Studiere die vollständige Liste der HTML5 semantischen Elemente - Übe, wann <article>, <section>, <aside> und <main> verwendet werden sollten - Lerne über ARIA-Attribute für verbesserte Barrierefreiheit 3. Moderne Webentwicklung - Erkunde responsive Webseiten erstellen bei Microsoft Learn - Verstehe, wie HTML mit CSS und JavaScript zusammenarbeitet - Lerne Best Practices für Web-Performance und SEO kennen Reflexionsfragen: - Welche veralteten HTML-Tags hast du entdeckt und warum wurden sie entfernt? - Welche neuen HTML-Features werden für zukünftige Versionen vorgeschlagen? - Wie trägt semantisches HTML zu Barrierefreiheit und SEO bei? ### ⚡ Was du in den nächsten 5 Minuten tun kannst - [ ] Öffne DevTools (F12) und inspiziere die HTML-Struktur deiner Lieblingswebseite - [ ] Erstelle eine einfache HTML-Datei mit Grundtags: <h1>, <p> und <img> - [ ] Validere dein HTML mit dem W3C HTML Validator online - [ ] Versuche, einen Kommentar in dein HTML mit <!-- Kommentar --> einzufügen ### 🎯 Was du in dieser Stunde erreichen kannst - [ ] Schließe das Nachvorlesungs-Quiz ab und wiederhole semantische HTML-Konzepte - [ ] Baue eine einfache Webseite über dich selbst mit korrekter HTML-Struktur - [ ] Experimentiere mit verschiedenen Überschriftenebenen und Textformatierungstags - [ ] Füge Bilder und Links hinzu, um Multimedia-Integration zu üben - [ ] Recherchiere HTML5-Features, die du noch nicht ausprobiert hast ### 📅 Deine einwöchige HTML-Reise - [ ] Schließe die Terrarium-Projektaufgabe mit semantischem Markup ab - [ ] Erstelle eine barrierefreie Webseite mit ARIA-Labels und Rollen - [ ] Übe die Erstellung von Formularen mit verschiedenen Eingabetypen - [ ] Erforsche HTML5 APIs wie localStorage oder Geolocation - [ ] Studiere responsive HTML-Muster und Mobile-First-Design - [ ] Überprüfe den HTML-Code anderer Entwickler auf Best Practices ### 🌟 Deine einmonatige Web-Grundlage - [ ] Baue eine Portfolio-Webseite, die deine HTML-Kompetenz zeigt - [ ] Lerne HTML-Templating mit einem Framework wie Handlebars - [ ] Trage zur Open-Source-Community bei, indem du HTML-Dokumentationen verbesserst - [ ] Meistere fortgeschrittene HTML-Konzepte wie benutzerdefinierte Elemente - [ ] Integriere HTML mit CSS-Frameworks und JavaScript-Bibliotheken - [ ] Betreue andere beim Erlernen von HTML-Grundlagen ## 🎯 Dein HTML-Mastery-Zeitplan ### 🛠️ Deine HTML-Toolkit-Zusammenfassung Nach Abschluss dieser Lektion hast du jetzt: - Dokumentstruktur: Vollständige HTML5-Grundlage mit korrektem DOCTYPE - Semantisches Markup: Sinnvolle Tags, die Barrierefreiheit und SEO verbessern - Bildintegration: Richtige Dateiorganisation und Alt-Text-Praktiken - Layout-Container: Strategischer Einsatz von div-Elementen mit beschreibenden Klassennamen - Barrierefreiheitsbewusstsein: Verständnis der Navigation mit Screenreadern - Moderne Standards: Aktuelle HTML5-Praktiken und Wissen über veraltete Tags - Projektgrundlage: Solide Basis für CSS-Styling und JavaScript-Interaktivität Nächste Schritte: Deine HTML-Struktur ist bereit für CSS-Styling! Die semantische Basis, die du aufgebaut hast, wird die nächste Lektion deutlich erleichtern. ## Aufgabe Übe dein HTML: Baue ein Blog-Mockup --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Haftungsausschluss: Dieses Dokument wurde mit dem KI-Übersetzungsdienst Co-op Translator übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner Ursprungssprache gilt als maßgebliche Quelle. Für wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium-Projekt Teil 2: Einführung in CSS
Erinnere dich daran, wie dein HTML-Terrarium ziemlich einfach aussah? CSS ist der Bereich, in dem wir diese schlichte Struktur in etwas Visuell Ansprechendes verwandeln. Wenn HTML wie das Bauen des Rahmens eines Hauses ist, dann ist CSS all das, was dafür sorgt, dass es sich wie ein Zuhause anfühlt – die Farben der Wände, die Anordnung der Möbel, die Beleuchtung und wie die Räume zusammenfließen. Denk daran, wie das Schloss von Versailles als einfache Jagdhütte begann, aber durch sorgfältige Beachtung von Dekoration und Layout zu einem der prächtigsten Gebäude der Welt wurde. Heute verwandeln wir dein Terrarium von funktional zu ansprechend. Du wirst lernen, wie man Elemente präzise positioniert, Layouts an verschiedene Bildschirmgrößen anpasst und die visuelle Attraktivität schafft, die Websites spannend macht. Am Ende dieser Lektion wirst du sehen, wie strategisches CSS-Styling dein Projekt drastisch verbessern kann. Lass uns deinem Terrarium etwas Stil hinzufügen. ## Vorlesungsquiz Vorlesungsquiz ## Einstieg in CSS CSS wird oft nur als „Dinge hübsch machen“ betrachtet, dient aber einem viel größeren Zweck. CSS ist wie der Regisseur eines Films – du kontrollierst nicht nur, wie alles aussieht, sondern auch, wie es sich bewegt, auf Interaktionen reagiert und sich an verschiedene Situationen anpasst. Modernes CSS ist erstaunlich leistungsfähig. Du kannst Code schreiben, der Layouts automatisch für Telefone, Tablets und Desktop-Computer anpasst. Du kannst flüssige Animationen erstellen, die die Aufmerksamkeit der Benutzer gezielt lenken. Die Ergebnisse können sehr beeindruckend sein, wenn alles zusammenpasst. Das werden wir in dieser Lektion erreichen: - Erstellen ein komplettes visuelles Design für dein Terrarium mit modernen CSS-Techniken - Erforschen grundlegende Konzepte wie Kaskade, Vererbung und CSS-Selektoren - Implementieren responsive Positionierungs- und Layoutstrategien - Bauen den Terrarium-Container mit CSS-Formen und -Styling ### Voraussetzungen Du solltest die HTML-Struktur deines Terrariums aus der vorherigen Lektion abgeschlossen haben und bereit sein, sie zu stylen. ### Einrichtung deiner CSS-Datei Bevor wir mit dem Styling beginnen können, müssen wir CSS mit unserem HTML verbinden. Diese Verbindung sagt dem Browser, wo er die Style-Anweisungen für unser Terrarium findet. Erstelle in deinem Terrarium-Ordner eine neue Datei namens style.css und verlinke sie dann im <head>-Bereich deines HTML-Dokuments: Das macht dieser Code: - Erstellt eine Verbindung zwischen deiner HTML- und CSS-Datei - Sagt dem Browser, die Styles aus style.css zu laden und anzuwenden - Verwendet das Attribut rel="stylesheet", um anzugeben, dass es sich um eine CSS-Datei handelt - Referenziert den Dateipfad mit href="./style.css" ## Das Verständnis der CSS-Kaskade Hast du dich schon mal gefragt, warum CSS „Cascading Style Sheets“ heißt? Styles fließen wie ein Wasserfall nach unten, und manchmal widersprechen sie sich. Denk an militärische Befehlshierarchien – ein Generalbefehl könnte sagen „alle Truppen tragen grün“, aber ein spezieller Befehl für deine Einheit lautet „tragt für die Zeremonie Blaumäntel“. Die genauere Anweisung hat Vorrang. CSS folgt einer ähnlichen Logik, und das Verständnis dieser Hierarchie erleichtert das Debugging erheblich. ### Experiment mit der Kaskaden-Priorität Lass uns die Kaskade in Aktion sehen, indem wir einen Stilkonflikt erzeugen. Füge zuerst einen Inline-Stil zu deinem <h1>-Tag hinzu: Das macht dieser Code: - Wendet eine rote Farbe direkt auf das <h1>-Element mit Inline-Stil an - Verwendet das style-Attribut, um CSS direkt im HTML einzubetten - Erstellt die höchstmögliche Priorität für diese spezifische Elementregel Füge anschließend diese Regel zu deiner Datei style.css hinzu: Oben haben wir: - Definiert eine CSS-Regel, die alle <h1>-Elemente anspricht - Setzt die Textfarbe mit einem externen Stylesheet auf Blau - Erstellt eine Regel mit niedrigerer Priorität im Vergleich zu Inline-Stilen ✅ Wissenscheck: Welche Farbe wird in deiner Web-App angezeigt? Warum gewinnt diese Farbe? Kannst du dir Situationen vorstellen, in denen du Stile überschreiben möchtest? ## CSS-Vererbung in Aktion CSS-Vererbung funktioniert wie Genetik – Elemente erben bestimmte Eigenschaften von ihren Elternelementen. Wenn du die Schriftfamilie auf dem Body-Element setzt, verwenden alle darin enthaltenen Texte automatisch dieselbe Schriftart. Das ist ähnlich wie beim markanten Kinn der Habsburger, das über Generationen geklärt weitergegeben wurde, ohne für jede einzelne Person explizit definiert zu werden. Aber nicht alles wird vererbt. Textstile wie Schriftarten und Farben werden vererbt, aber Layout-Eigenschaften wie Abstände und Rahmen nicht. So wie Kinder körperliche Merkmale erben können, aber nicht die Modevorlieben ihrer Eltern. ### Beobachtung der Schriftvererbung Lass uns die Vererbung in Aktion sehen, indem wir eine Schriftfamilie auf dem <body>-Element festlegen: Was hier passiert: - Setzt die Schriftfamilie für die gesamte Seite, indem es das <body>-Element auswählt - Verwendet einen Font-Stack mit Fallback-Optionen für bessere Browser-Kompatibilität - Wendet moderne Systemschriften an, die auf verschiedenen Betriebssystemen gut aussehen - Sorgt dafür, dass alle Kindelemente diese Schriftart erben, sofern sie nicht speziell überschrieben werden Öffne die Entwickler-Tools deines Browsers (F12), gehe zum Tab „Elemente“ und inspiziere dein <h1>-Element. Du wirst sehen, dass es die Schriftfamilie vom Body erbt: ✅ Experimentierzeit: Versuche andere vererbbare Eigenschaften auf dem <body> wie color, line-height oder text-align zu setzen. Was passiert mit deiner Überschrift und anderen Elementen? ### 🔄 Pädagogische Kontrolle CSS-Grundlagen verstehen: Bevor wir zu Selektoren wechseln, solltest du in der Lage sein: - ✅ Den Unterschied zwischen Kaskade und Vererbung zu erklären - ✅ Vorherzusagen, welcher Stil bei einem Spezifitätskonflikt gewinnt - ✅ Zu erkennen, welche Eigenschaften von Elternelementen vererbt werden - ✅ CSS-Dateien korrekt mit HTML zu verbinden Kurzer Test: Wenn du diese Stile hast, welche Farbe bekommt ein <h1> innerhalb eines <div class="special">? Antwort: Rot (Elementselektor zielt direkt auf h1 ab) ## CSS-Selektoren meistern CSS-Selektoren sind dein Werkzeug, um bestimmte Elemente gezielt zu stylen. Sie funktionieren wie genaue Wegbeschreibungen – statt „das Haus“ zu sagen, sagst du „das blaue Haus mit der roten Tür in der Ahornstraße“. CSS bietet verschiedene Wege, spezifisch zu sein, und den passenden Selektor auszuwählen ist wie das richtige Werkzeug für die Aufgabe zu wählen. Manchmal willst du jede Tür in der Nachbarschaft stylen, manchmal nur eine ganz bestimmte. ### Element-Selektoren (Tags) Element-Selektoren sprechen HTML-Elemente über ihren Tag-Namen an. Sie sind perfekt, um Basis-Styles zu setzen, die allgemein auf deiner Seite gelten: Was diese Styles bewirken: - Setzt konsistente Typografie auf der gesamten Seite mit dem body-Selektor - Entfernt Standard-Margen und -Padding der Browser für bessere Kontrolle - Stylt alle Überschriften mit Farbe, Ausrichtung und Abstand - Verwendet rem-Einheiten für skalierbare, zugängliche Font-Größen Während Element-Selektoren gut für allgemeines Styling sind, werden spezifischere Selektoren nötig, um einzelne Komponenten wie die Pflanzen in deinem Terrarium zu stylen. ### ID-Selektoren für einzelne Elemente ID-Selektoren benutzen das #-Symbol und zielen auf Elemente mit eindeutigen id-Attributen ab. Da IDs auf einer Seite einzigartig sein müssen, eignen sie sich perfekt, um einzelne, spezielle Elemente wie unsere linke und rechte Pflanzenbox zu stylen. Lass uns das Styling für die Seitencontainer unseres Terrariums erstellen, in denen die Pflanzen leben werden: Das erreicht dieser Code: - Positioniert Container ganz links und rechts am Rand mit absolute Positionierung - Verwendet vh (Viewport-Höhe) Einheiten für eine responsive Höhe, die sich an die Bildschirmgröße anpasst - Setzt box-sizing: border-box, damit Padding in der Gesamtbreite mitgerechnet wird - Entfernt unnötige px-Einheiten bei Nullwerten für saubereren Code - Legt eine dezente Hintergrundfarbe fest, die angenehmer als grelles Grau ist ✅ Code-Qualitäts-Herausforderung: Achte darauf, dass dieses CSS das DRY-Prinzip (Don't Repeat Yourself) verletzt. Kannst du es mit einer Kombination aus ID und Klasse refaktorieren? Verbesserter Ansatz: ### Klassen-Selektoren für wiederverwendbare Styles Klassen-Selektoren benutzen das .-Symbol und sind perfekt, wenn du die gleichen Styles auf mehrere Elemente anwenden willst. Im Gegensatz zu IDs sind Klassen mehrfach verwendbar, was sie ideal für konsistente Styling-Muster macht. In unserem Terrarium braucht jede Pflanze ein ähnliches Styling, aber auch individuelle Positionierung. Wir verwenden eine Kombination aus Klassen für gemeinsame Styles und IDs für die einzigartige Platzierung. Hier ist die HTML-Struktur für jede Pflanze: Wichtige Elemente erklärt: - Verwendet class="plant-holder" für einheitliches Container-Styling aller Pflanzen - Setzt class="plant" für gemeinsames Bild-Styling und Verhalten - Enthält eindeutige id="plant1" für individuelle Positionierung und JavaScript-Interaktion - Bietet beschreibenden Alt-Text für Screenreader-Zugänglichkeit Füge nun diese Styles zu deiner style.css-Datei hinzu: Analyse dieser Styles: - Erstellt relative Positionierung für den Pflanzenhalter, um einen Positionskontext zu etablieren - Setzt jeden Pflanzenhalter auf 13% Höhe, damit alle Pflanzen vertikal ohne Scrollen passen - Verschiebt die Halter leicht nach links, um die Pflanzen besser im Container zu zentrieren - Erlaubt das responsive Skalieren der Pflanzen mit max-width und max-height - Verwendet z-index, um Pflanzen über anderen Elementen im Terrarium zu platzieren - Fügt einen dezenten Hover-Effekt mit CSS-Übergängen für bessere Benutzerinteraktion hinzu ✅ Kritisches Nachdenken: Warum brauchen wir sowohl .plant-holder als auch .plant-Selektoren? Was würde passieren, wenn wir nur einen von beiden verwenden würden? ## CSS-Positionierung verstehen CSS-Positionierung ist wie der Regisseur einer Bühnenaufführung – du bestimmst, wo jeder Schauspieler steht und wie er sich auf der Bühne bewegt. Manche Schauspieler folgen dem Standardaufbau, andere benötigen spezielle Positionierungen für dramatische Effekte. Wenn du Positionierung verstehst, werden viele Layout-Herausforderungen handhabbar. Brauchst du eine Navigationsleiste, die beim Scrollen am oberen Rand bleibt? Positionierung regelt das. Willst du ein Tooltip, das an einer bestimmten Stelle erscheint? Das ist auch Positionierung. ### Die fünf Positionswerte ### Positionierung in unserem Terrarium Unser Terrarium verwendet eine strategische Kombination von Positionierungsarten, um das gewünschte Layout zu schaffen: Die Positionierungsstrategie verstehen: - Absolute Container sind aus dem normalen Dokumentfluss entfernt und an Bildschirmrändern befestigt - Relative Pflanzenhalter schaffen einen Positionskontext, bleiben aber im Dokumentfluss - Absolute Pflanzen können innerhalb ihrer relativen Container präzise positioniert werden - Diese Kombination erlaubt es, Pflanzen vertikal zu stapeln und trotzdem individuell zu positionieren ✅ Experimentierzeit: Ändere die Positionswerte und beobachte die Ergebnisse: - Was passiert, wenn du .container von absolute auf relative änderst? - Wie ändert sich das Layout, wenn .plant-holder statt relative die Position absolute verwendet? - Was passiert, wenn du die .plant-Positionierung auf relative umstellst? ### 🔄 Pädagogischer Check-in CSS-Positionierungsbeherrschung: Halte inne und überprüfe dein Verständnis: - ✅ Kannst du erklären, warum Pflanzen absolute Positionierung für Drag-and-Drop benötigen? - ✅ Verstehst du, wie relative Container einen Positionierungskontext schaffen? - ✅ Warum verwenden die Seitencontainer absolute Positionierung? - ✅ Was würde passieren, wenn du Positionsdeklarationen komplett entfernen würdest? Realwelt-Verbindung: Denke darüber nach, wie CSS-Positionierung die reale Layout-Welt widerspiegelt: - Static: Bücher im Regal (natürliche Reihenfolge) - Relative: Ein Buch leicht verschieben, aber an seinem Platz behalten - Absolute: Ein Lesezeichen auf einer bestimmten Seite platzieren - Fixed: Eine Haftnotiz, die beim Umblättern sichtbar bleibt ## Das Terrarium mit CSS bauen Jetzt bauen wir ein Glasgefäß nur mit CSS – keine Bilder oder Grafiksoftware nötig. Realistisch wirkendes Glas, Schatten und Tiefeneffekte mit Positionierung und Transparenz zu erzeugen, zeigt die visuellen Möglichkeiten von CSS. Diese Technik ähnelt, wie Architekten der Bauhaus-Bewegung einfache geometrische Formen nutzten, um komplexe, schöne Strukturen zu erschaffen. Sobald du diese Prinzipien verstehst, erkennst du die CSS-Techniken hinter vielen Webdesigns. ### Die Bestandteile des Glasgefäßes erstellen Lass uns das Terrariumglas Stück für Stück bauen. Jeder Teil verwendet absolute Positionierung und prozentuale Größen für ein responsives Design: Das Terrarium-Konstrukt verstehen: - Verwendet prozentuale Maße für responsive Skalierung auf allen Bildschirmgrößen - Positioniert Elemente absolut, um sie exakt zu stapeln und auszurichten - Setzt unterschiedliche Opazitätswerte ein, um den Glaseffekt zu erzeugen - Implementiert z-index Schichtung, damit Pflanzen innerhalb des Glases erscheinen - Fügt subtile Box-Schattierungen und elegante border-radius für realistischeres Aussehen hinzu ### Responsives Design mit Prozentangaben Beachte, dass alle Maße in Prozent statt festen Pixelwerten angegeben sind: Warum das wichtig ist: - Sorgt dafür, dass das Terrarium auf jeder Bildschirmgröße proportional skaliert - Erhält die visuellen Beziehungen zwischen den Glasbauteilen - Bietet eine konsistente Darstellung von mobilen Geräten bis zu großen Monitoren - Ermöglicht, dass sich das Design anpasst, ohne das Layout zu zerstören ### CSS-Einheiten in der Praxis Wir verwenden rem-Einheiten für border-radius, die relativ zur Root-Schriftgröße skalieren. Das schafft zugänglichere Designs, die Benutzervorgaben für Schriftgrößen berücksichtigen. Erfahre mehr über CSS-relative Einheiten in der offiziellen Spezifikation. ✅ Visuelles Experimentieren: Probiere aus, diese Werte zu ändern und beobachte die Effekte: - Ändere die Deckkraft des Glases von 0.5 auf 0.8 – wie beeinflusst das das Erscheinungsbild des Glases? - Passe die Schmutzfarbe von #3a241d auf #8B4513 an – welche optische Wirkung hat das? - Verändere den z-index des Schmutzes auf 2 – was passiert mit der Schichtung? ### 🔄 Pädagogischer Check-in CSS-Visuelles Design verstehen: Überprüfe dein Verständnis zum visuellen CSS: - ✅ Wie erzeugen prozentuale Maße ein responsives Design? - ✅ Warum erzeugt Opazität den Glaseffekt der Transparenz? - ✅ Welche Rolle spielt der z-index bei der Schichtung von Elementen? - ✅ Wie formen border-radius-Werte die Glasform? Designprinzipien: Beachte, wie wir komplexe Visuals aus einfachen Formen aufbauen: 1. Rechtecke → Abgerundete Rechtecke → Glasbauteile 2. Flächige Farben → Deckkraft → Glaseffekt 3. Einzelne Elemente → Geschichtete Komposition → 3D-Eindruck --- ## GitHub Copilot Agent Challenge 🚀 Nutze den Agent-Modus, um die folgende Challenge zu erfüllen: Beschreibung: Erstelle eine CSS-Animation, die die Terrarienpflanzen sanft hin und her wiegen lässt und so einen natürlichen Windhauch simuliert. So übst du CSS-Animationen, Transformationen und Keyframes und verbesserst die visuelle Attraktivität deines Terrariums. Vorgabe: Füge CSS-Keyframe-Animationen hinzu, damit die Pflanzen im Terrarium sanft von links nach rechts schwingen. Erstelle eine Schwing-Animation, die jede Pflanze leicht (2-3 Grad) links und rechts dreht, mit einer Dauer von 3-4 Sekunden. Wende sie auf die .plant-Klasse an. Stelle sicher, dass die Animation unendlich wiedergibt und eine Easing-Funktion für natürliche Bewegung hat. Erfahre mehr über den Agent-Modus hier. ## 🚀 Challenge: Glasreflexe hinzufügen Bereit, dein Terrarium mit realistischen Glasreflexen aufzuwerten? Diese Technik verleiht dem Design Tiefe und Realismus. Du erzeugst subtile Highlights, die simulieren, wie Licht auf Glasflächen reflektiert wird. Dieser Ansatz ähnelt Renaissance-Malern wie Jan van Eyck, die Licht und Reflexion nutzten, um gemaltes Glas dreidimensional wirken zu lassen. Hier ist dein Ziel: Deine Aufgabe: - Erstelle dezente weiße oder hellfarbige ovale Formen für die Glasreflexe - Positioniere sie strategisch an der linken Seite des Glases - Wende passende Opazitäts- und Unschärfeeffekte an für realistische Lichtreflexion - Nutze border-radius, um organische, blasenähnliche Formen zu gestalten - Experimentiere mit Farbverläufen oder Box-Shadows für erhöhten Realismus ## Quiz nach der Vorlesung Quiz nach Vorlesung ## Erweitere dein CSS-Wissen CSS kann anfangs komplex wirken, aber das Verständnis dieser Kernkonzepte legt eine solide Basis für fortgeschrittene Techniken. Deine nächsten CSS-Themen: - Flexbox – vereinfacht Ausrichtung und Verteilung von Elementen - CSS Grid – bietet mächtige Werkzeuge für komplexe Layouts - CSS-Variablen – verringern Wiederholungen und erhöhen Wartbarkeit - Responsives Design – sorgt dafür, dass Websites auf allen Bildschirmgrößen funktionieren ### Interaktive Lernressourcen Übe diese Konzepte mit spannenden, interaktiven Spielen: - 🐸 Flexbox Froggy – Meistere Flexbox durch lustige Herausforderungen - 🌱 Grid Garden – Lerne CSS Grid, indem du virtuelle Möhren anbaust - 🎯 CSS Battle – Teste deine CSS-Fähigkeiten mit Coding-Challenges ### Weiterführendes Lernen Für umfassende CSS-Grundlagen absolviere dieses Microsoft Learn Modul: Gestalte deine HTML-App mit CSS ### ⚡ Was du in den nächsten 5 Minuten tun kannst - [ ] Öffne DevTools und inspiziere CSS-Stile auf jeder Website im Elements-Panel - [ ] Erstelle eine einfache CSS-Datei und binde sie in eine HTML-Seite ein - [ ] Probiere Farbänderungen mit verschiedenen Methoden: Hex, RGB und benannte Farben - [ ] Übe das Box-Modell, indem du Padding und Margin zu einem div hinzufügst ### 🎯 Was du in dieser Stunde erreichen kannst - [ ] Absolviere das Post-Lesson-Quiz und wiederhole CSS-Grundlagen - [ ] Style deine HTML-Seite mit Schriftarten, Farben und Abständen - [ ] Erstelle ein einfaches Layout mit Flexbox oder Grid - [ ] Experimentiere mit CSS-Transitions für sanfte Effekte - [ ] Übe responsives Design mit Media Queries ### 📅 Dein einwöchiges CSS-Abenteuer - [ ] Erledige die Terrarium-Styling-Aufgabe mit kreativem Flair - [ ] Meistere CSS Grid durch den Bau eines Fotogalerie-Layouts - [ ] Lerne CSS-Animationen, um deine Designs lebendig zu machen - [ ] Erkunde CSS-Präprozessoren wie Sass oder Less - [ ] Studiere Designprinzipien und wende sie auf CSS an - [ ] Analysiere und rekreiere interessante Designs, die du online findest ### 🌟 Deine einmonatige Design-Meisterschaft - [ ] Baue ein komplettes responsives Website-Designsystem - [ ] Lerne CSS-in-JS oder Utility-First-Frameworks wie Tailwind - [ ] Trage zu Open-Source-Projekten mit CSS-Verbesserungen bei - [ ] Meistere fortgeschrittene CSS-Konzepte wie Custom Properties und Containment - [ ] Erstelle wiederverwendbare Komponentenbibliotheken mit modularen CSS - [ ] Unterstütze andere beim CSS-Lernen und teile Designwissen ## 🎯 Deine CSS-Meisterschafts-Timeline ### 🛠️ Deine CSS-Werkzeug-Zusammenfassung Nach Abschluss dieser Lektion hast du: - Verständnis des Kaskadierungssystems: Wie Stile vererbt und überschrieben werden - Beherrschung von Selektoren: Präzises Ansprechen von Elementen, Klassen und IDs - Positionierungsfähigkeiten: Strategisches Platzieren und Schichten von Elementen - Visuelles Design: Erzeugen von Glaseffekten, Schatten und Transparenz - Responsive Techniken: Prozentbasierte Layouts, die sich an jeden Bildschirm anpassen - Code-Organisation: Saubere, wartbare CSS-Struktur - Moderne Praktiken: Einsatz relativer Einheiten und barrierefreier Designmuster Nächste Schritte: Dein Terrarium hat jetzt Struktur (HTML) und Stil (CSS). Die Abschlusslektion fügt Interaktivität mit JavaScript hinzu! ## Aufgabe CSS Refactoring --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Haftungsausschluss: Dieses Dokument wurde mit dem KI-Übersetzungsdienst Co-op Translator übersetzt. Obwohl wir auf Genauigkeit achten, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in der Ausgangssprache ist als maßgebliche Quelle zu betrachten. Für wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Verwendung dieser Übersetzung entstehen. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Έργο Terrarium Μέρος 1: Εισαγωγή στο HTML
Το HTML, ή HyperText Markup Language, είναι το θεμέλιο κάθε ιστότοπου που έχετε επισκεφθεί ποτέ. Σκεφτείτε το HTML ως το σκελετό που δίνει δομή στις ιστοσελίδες – καθορίζει πού πάει το περιεχόμενο, πώς οργανώνεται και τι αντιπροσωπεύει κάθε κομμάτι. Ενώ το CSS αργότερα θα "ντύσει" το HTML σας με χρώματα και διατάξεις, και η JavaScript θα του δώσει ζωή με διαδραστικότητα, το HTML παρέχει την ουσιαστική δομή που κάνει τα πάντα δυνατά. Σε αυτό το μάθημα, θα δημιουργήσετε τη δομή HTML για μια εικονική διεπαφή terrarium. Αυτό το πρακτικό έργο θα σας διδάξει βασικές έννοιες HTML ενώ χτίζετε κάτι οπτικά ελκυστικό. Θα μάθετε πώς να οργανώνετε το περιεχόμενο χρησιμοποιώντας σημασιολογικά στοιχεία, να δουλεύετε με εικόνες και να δημιουργείτε το θεμέλιο για μια διαδραστική διαδικτυακή εφαρμογή. Στο τέλος αυτού του μαθήματος, θα έχετε μια λειτουργική σελίδα HTML που εμφανίζει εικόνες φυτών σε οργανωμένες στήλες, έτοιμη για στυλιζάρισμα στο επόμενο μάθημα. Μην ανησυχείτε αν φαίνεται απλή στην αρχή – αυτό ακριβώς πρέπει να κάνει το HTML πριν το CSS προσθέσει την οπτική τελειότητα. ## Προ-Διαλέξη Quiz Προ-διάλεξη quiz ## Ρύθμιση του Έργου σου Πριν βουτήξουμε στον κώδικα HTML, ας ρυθμίσουμε έναν κατάλληλο χώρο εργασίας για το έργο terrarium σου. Η δημιουργία μιας οργανωμένης δομής αρχείων από την αρχή είναι μια κρίσιμη συνήθεια που θα σου φανεί χρήσιμη καθ’ όλη τη διάρκεια του ταξιδιού σου στην ανάπτυξη ιστοσελίδων. ### Εργασία: Δημιουργία Δομής Έργου Θα δημιουργήσεις έναν αφιερωμένο φάκελο για το έργο terrarium και θα προσθέσεις το πρώτο σου αρχείο HTML. Εδώ είναι δύο προσεγγίσεις που μπορείς να χρησιμοποιήσεις: Επιλογή 1: Χρήση Visual Studio Code 1. Άνοιξε το Visual Studio Code 2. Κάνε κλικ στο "File" → "Open Folder" ή χρησιμοποιήσε Ctrl+K, Ctrl+O (Windows/Linux) ή Cmd+K, Cmd+O (Mac) 3. Δημιούργησε έναν νέο φάκελο με όνομα terrarium και επίλεξέ τον 4. Στο παράθυρο Explorer, κάνε κλικ στο εικονίδιο "New File" 5. Ονόμασε το αρχείο σου index.html Επιλογή 2: Χρήση Εντολών Τερματικού Τι επιτυγχάνουν αυτές οι εντολές: - Δημιουργεί έναν νέο κατάλογο με όνομα terrarium για το έργο σου - Μεταβαίνει στον κατάλογο terrarium - Δημιουργεί ένα κενό αρχείο index.html - Ανοίγει το αρχείο στο Visual Studio Code για επεξεργασία ## Κατανόηση της Δομής Εγγράφου HTML Κάθε έγγραφο HTML ακολουθεί μια συγκεκριμένη δομή που τα προγράμματα περιήγησης χρειάζεται να καταλάβουν και να εμφανίσουν σωστά. Σκεφτείτε αυτή τη δομή σαν μια επίσημη επιστολή – έχει απαιτούμενα στοιχεία με συγκεκριμένη σειρά που βοηθούν τον παραλήπτη (στην προκειμένη περίπτωση το πρόγραμμα περιήγησης) να επεξεργαστεί σωστά το περιεχόμενο. Ας ξεκινήσουμε προσθέτοντας τα ουσιώδη θεμέλια που χρειάζεται κάθε έγγραφο HTML. ### Η Δήλωση DOCTYPE και το Ριζικό Στοιχείο Οι πρώτες δύο γραμμές οποιουδήποτε αρχείου HTML λειτουργούν ως η "εισαγωγή" του εγγράφου προς το πρόγραμμα περιήγησης: Κατανόηση του τι κάνει αυτός ο κώδικας: - Δηλώνει τον τύπο εγγράφου ως HTML5 με το <!DOCTYPE html> - Δημιουργεί το ριζικό στοιχείο <html> που θα περιέχει όλο το περιεχόμενο της σελίδας - Εδραιώνει σύγχρονα διαδικτυακά πρότυπα για σωστή απόδοση από τα προγράμματα περιήγησης - Εξασφαλίζει συνεπή εμφάνιση σε διαφορετικά προγράμματα περιήγησης και συσκευές ### 🔄 Παιδαγωγικός Έλεγχος Παύση και Σκέψη: Πριν συνεχίσετε, βεβαιωθείτε ότι καταλαβαίνετε: - ✅ Γιατί κάθε έγγραφο HTML χρειάζεται δήλωση DOCTYPE - ✅ Τι περιέχει το ριζικό στοιχείο <html> - ✅ Πώς αυτή η δομή βοηθάει τα προγράμματα περιήγησης να αποδώσουν σωστά τις σελίδες Γρήγορος Αυτοέλεγχος: Μπορείτε να εξηγήσετε με δικά σας λόγια τι σημαίνει "απόδοση σύμφωνα με τα πρότυπα"; ## Προσθήκη Βασικών Μεταδεδομένων Εγγράφου Το τμήμα <head> ενός εγγράφου HTML περιέχει κρίσιμες πληροφορίες που τα προγράμματα περιήγησης και οι μηχανές αναζήτησης χρειάζονται, αλλά που οι επισκέπτες δεν βλέπουν άμεσα στη σελίδα. Σκεφτείτε το σαν την "πλάτη της σκηνής" πληροφορία που βοηθάει την ιστοσελίδα σας να λειτουργεί σωστά και να εμφανίζεται σωστά σε διαφορετικές συσκευές και πλατφόρμες. Αυτά τα μεταδεδομένα λένε στα προγράμματα περιήγησης πώς να εμφανίσουν τη σελίδα σας, ποια κωδικοποίηση χαρακτήρων να χρησιμοποιήσουν και πώς να χειριστούν διαφορετικά μεγέθη οθόνης – όλα ουσιώδη για τη δημιουργία επαγγελματικών, προσβάσιμων ιστοσελίδων. ### Εργασία: Πρόσθεσε το Τμήμα Head του Εγγράφου Εισάγετε αυτό το τμήμα <head> ανάμεσα στις ετικέτες ανοίγματος και κλεισίματος <html>: Ανάλυση του τι επιτυγχάνει κάθε στοιχείο: - Ρυθμίζει τον τίτλο της σελίδας που εμφανίζεται σε καρτέλες προγραμμάτων περιήγησης και αποτελέσματα αναζήτησης - Ορίζει κωδικοποίηση χαρακτήρων UTF-8 για σωστή εμφάνιση κειμένου παγκοσμίως - Εξασφαλίζει συμβατότητα με σύγχρονες εκδόσεις του Internet Explorer - Ρυθμίζει τον ευαίσθητο σχεδιασμό θέτοντας το viewport να ταιριάζει με το πλάτος της συσκευής - Ελέγχει το αρχικό επίπεδο ζουμ για εμφάνιση περιεχομένου στο φυσιολογικό μέγεθος ## Δημιουργία του Σώματος του Εγγράφου Το στοιχείο <body> περιέχει όλο το ορατό περιεχόμενο της ιστοσελίδας σου – όλα όσα οι χρήστες θα δουν και θα αλληλεπιδράσουν. Ενώ το τμήμα <head> έδωσε οδηγίες στο πρόγραμμα περιήγησης, το τμήμα <body> περιλαμβάνει το πραγματικό περιεχόμενο: κείμενο, εικόνες, κουμπιά και άλλα στοιχεία που δημιουργούν τη διεπαφή χρήστη. Ας προσθέσουμε τη δομή του σώματος και ας κατανοήσουμε πώς οι ετικέτες HTML συνεργάζονται για να δημιουργήσουν ουσιαστικό περιεχόμενο. ### Κατανόηση Δομής Ετικετών HTML Το HTML χρησιμοποιεί ζευγάρια ετικετών για τον ορισμό στοιχείων. Οι περισσότερες ετικέτες έχουν μια ανοιχτή ετικέτα όπως <p> και μια κλειστή ετικέτα όπως </p>, με περιεχόμενο ανάμεσά τους: <p>Γειά σου, κόσμε!</p>. Αυτό δημιουργεί ένα στοιχείο παραγράφου που περιέχει το κείμενο "Γειά σου, κόσμε!". ### Εργασία: Πρόσθεσε το Στοιχείο Body Ενημέρωσε το αρχείο HTML σου για να συμπεριλάβει το στοιχείο <body>: Τι παρέχει αυτή η ολοκληρωμένη δομή: - Εδραιώνει το βασικό πλαίσιο εγγράφου HTML5 - Περιλαμβάνει ουσιώδη μεταδεδομένα για σωστή απόδοση από το πρόγραμμα περιήγησης - Δημιουργεί ένα κενό σώμα έτοιμο για το ορατό σου περιεχόμενο - Ακολουθεί σύγχρονες βέλτιστες πρακτικές ανάπτυξης ιστού Τώρα είσαι έτοιμος να προσθέσεις τα ορατά στοιχεία του terrarium σου. Θα χρησιμοποιήσουμε στοιχεία <div> ως δοχεία για να οργανώσουμε διαφορετικά τμήματα περιεχομένου, και στοιχεία <img> για να εμφανίσουμε τις εικόνες των φυτών. ### Εργασία με Εικόνες και Δοχείς Διάταξης Οι εικόνες είναι ειδικές στο HTML γιατί χρησιμοποιούν "αυτοκλειόμενες" ετικέτες. Σε αντίθεση με στοιχεία όπως <p></p> που τυλίγουν περιεχόμενο, η ετικέτα <img> περιέχει όλες τις πληροφορίες μέσα στην ίδια την ετικέτα χρησιμοποιώντας ιδιότητες όπως src για τη διαδρομή του αρχείου της εικόνας και alt για προσβασιμότητα. Πριν προσθέσεις εικόνες στο HTML σου, πρέπει να οργανώσεις σωστά τα αρχεία του έργου δημιουργώντας έναν φάκελο εικόνων και προσθέτοντας τα γραφικά φυτών. Πρώτα, ρύθμισε τις εικόνες σου: 1. Δημιούργησε ένα φάκελο με όνομα images μέσα στο φάκελο του έργου terrarium 2. Κατέβασε τις εικόνες φυτών από το φάκελο λύσης (συνολικά 14 εικόνες φυτών) 3. Αντέγραψε όλες τις εικόνες φυτών στο νέο σου φάκελο images ### Εργασία: Δημιουργία Διάταξης Εμφάνισης Φυτών Τώρα πρόσθεσε τις εικόνες φυτών οργανωμένες σε δύο στήλες ανάμεσα στις ετικέτες <body></body>: Βήμα βήμα, τι συμβαίνει σε αυτόν τον κώδικα: - Δημιουργεί έναν κύριο δοχέα σελίδας με id="page" για να κρατά όλο το περιεχόμενο - Εδραιώνει δύο δοχεία στηλών: left-container και right-container - Οργανώνει 7 φυτά στην αριστερή στήλη και 7 φυτά στη δεξιά στήλη - Τυλίγει κάθε εικόνα φυτού σε ένα plant-holder div για ατομική τοποθέτηση - Εφαρμόζει συνεπή ονόματα κλάσεων για στυλιζάρισμα CSS στο επόμενο μάθημα - Αναθέτει μοναδικά ID σε κάθε εικόνα φυτού για μελλοντική αλληλεπίδραση JavaScript - Περιλαμβάνει σωστές διαδρομές αρχείων προς το φάκελο εικόνων ### 🔄 Παιδαγωγικός Έλεγχος Κατανόηση Δομής: Πάρε μια στιγμή να επανεξετάσεις τη δομή HTML σου: - ✅ Μπορείς να αναγνωρίσεις τα κύρια δοχεία στη διάταξή σου; - ✅ Καταλαβαίνεις γιατί κάθε εικόνα έχει μοναδικό ID; - ✅ Πώς θα περιέγραφες τον σκοπό των στοιχείων plant-holder; Οπτικός Έλεγχος: Άνοιξε το αρχείο HTML σε ένα πρόγραμμα περιήγησης. Θα πρέπει να δεις: - Μια βασική λίστα εικόνων φυτών - Εικόνες οργανωμένες σε δύο στήλες - Απλή, χωρίς στυλιζάρισμα διάταξη Θυμήσου: Αυτή η απλή εμφάνιση είναι ακριβώς το πώς θα πρέπει να φαίνεται το HTML πριν το στυλιζάρισμα με CSS! Με αυτό το markup προστιθέμενο, τα φυτά θα εμφανιστούν στην οθόνη, αν και δεν θα φαίνονται καλοφτιαγμένα ακόμα – γι’ αυτό υπάρχει το CSS στο επόμενο μάθημα! Για τώρα, έχεις ένα σταθερό θεμέλιο HTML που οργανώνει σωστά το περιεχόμενό σου και ακολουθεί τις βέλτιστες πρακτικές προσβασιμότητας. ## Χρήση Σημασιολογικού HTML για Προσβασιμότητα Σημασιολογικό HTML σημαίνει να επιλέγεις τα HTML στοιχεία βάσει της σημασίας και του σκοπού τους, όχι μόνο της εμφάνισής τους. Όταν χρησιμοποιείς σημασιολογικό markup, επικοινωνείς τη δομή και το νόημα του περιεχομένου σου στα προγράμματα περιήγησης, τις μηχανές αναζήτησης και τις βοηθητικές τεχνολογίες όπως οι αναγνώστες οθόνης. Αυτή η προσέγγιση κάνει τους ιστότοπους σου πιο προσβάσιμους για άτομα με αναπηρίες και βοηθά τις μηχανές αναζήτησης να κατανοήσουν καλύτερα το περιεχόμενό σου. Είναι μια θεμελιώδης αρχή της σύγχρονης ανάπτυξης ιστοσελίδων που δημιουργεί καλύτερες εμπειρίες για όλους. ### Προσθήκη Σημασιολογικού Τίτλου Σελίδας Ας προσθέσουμε έναν κατάλληλο τίτλο στη σελίδα terrarium σου. Εισήγαγε αυτή τη γραμμή αμέσως μετά την ετικέτα ανοίγματος <body>: Γιατί έχει σημασία το σημασιολογικό markup: - Βοηθά τους αναγνώστες οθόνης να πλοηγηθούν και να κατανοήσουν τη δομή της σελίδας - Βελτιώνει την βελτιστοποίηση μηχανών αναζήτησης (SEO) διευκρινίζοντας την ιεραρχία περιεχομένου - Ενισχύει την προσβασιμότητα για χρήστες με οπτικές ή γνωστικές διαφορές - Δημιουργεί καλύτερη εμπειρία χρήστη σε όλες τις συσκευές και πλατφόρμες - Ακολουθεί τα πρότυπα του ιστού και τις βέλτιστες πρακτικές για επαγγελματική ανάπτυξη Παραδείγματα σημασιολογικών έναντι μη σημασιολογικών επιλογών: ## Δημιουργία του Δοχείου Terrarium Τώρα ας προσθέσουμε τη δομή HTML για το ίδιο το terrarium – το γυάλινο δοχείο όπου τελικά θα τοποθετηθούν τα φυτά. Αυτό το τμήμα παρουσιάζει μια σημαντική έννοια: το HTML παρέχει δομή, αλλά χωρίς στυλιζάρισμα CSS, αυτά τα στοιχεία δεν θα είναι ορατά ακόμη. Το markup του terrarium χρησιμοποιεί περιγραφικά ονόματα κλάσεων που θα κάνουν το στυλιζάρισμα CSS διαισθητικό και εύκολο στη συντήρηση στο επόμενο μάθημα. ### Εργασία: Πρόσθεσε τη Δομή του Terrarium Εισήγαγε αυτό το markup πάνω από την τελευταία ετικέτα </div> (πριν το κλείσιμο του δοχείου σελίδας): Κατανόηση αυτής της δομής terrarium: - Δημιουργεί ένα κύριο δοχείο terrarium με μοναδικό ID για στυλιζάρισμα - Ορίζει ξεχωριστά στοιχεία για κάθε οπτικό συστατικό (κορυφή, τοίχοι, χώμα, κάτω μέρος) - Περιλαμβάνει εμφωλευμένα στοιχεία για εφέ αντανάκλασης γυαλιού (γυαλιστερά στοιχεία) - Χρησιμοποιεί περιγραφικά ονόματα κλάσεων που δείχνουν με σαφήνεια τον σκοπό κάθε στοιχείου - Ετοιμάζει τη δομή για το στυλ CSS που θα δημιουργήσει την εμφάνιση γυάλινου τεράριουμ ### 🔄 Παιδαγωγικός Έλεγχος Κατανόηση Δομής HTML: Πριν προχωρήσετε, βεβαιωθείτε ότι μπορείτε να: - ✅ Εξηγήσετε τη διαφορά ανάμεσα στη δομή HTML και την οπτική εμφάνιση - ✅ Αναγνωρίσετε τα σημεία διαφοράς μεταξύ σημασιολογικών και μη σημασιολογικών στοιχείων HTML - ✅ Περιγράψετε πώς η σωστή σήμανση ωφελεί την προσβασιμότητα - ✅ Αναγνωρίσετε την ολοκληρωμένη δομή του δέντρου του εγγράφου Δοκιμάστε την Κατανόησή Σας: Προσπαθήστε να ανοίξετε το αρχείο HTML σας σε έναν περιηγητή με απενεργοποιημένη τη JavaScript και αφαιρώντας το CSS. Αυτό σας δείχνει την καθαρή σημασιολογική δομή που έχετε δημιουργήσει! --- ## Πρόκληση GitHub Copilot Agent Χρησιμοποιήστε τη λειτουργία Agent για να ολοκληρώσετε την παρακάτω πρόκληση: Περιγραφή: Δημιουργήστε μια σημασιολογική δομή HTML για μια ενότητα οδηγού φροντίδας φυτών που θα μπορούσε να προστεθεί στο έργο τεράριουμ. Πρόταση: Δημιουργήστε μια σημασιολογική ενότητα HTML που να περιλαμβάνει έναν κύριο τίτλο "Οδηγός Φροντίδας Φυτών", τρεις υποενότητες με τίτλους "Πότισμα", "Απαιτήσεις Φωτισμού" και "Φροντίδα Εδάφους", κάθε μία να περιέχει μια παράγραφο με πληροφορίες φροντίδας φυτών. Χρησιμοποιήστε σωστές σημασιολογικές ετικέτες HTML όπως <section>, <h2>, <h3>, και <p> για να δομήσετε το περιεχόμενο κατάλληλα. Μάθετε περισσότερα για τη λειτουργία agent εδώ. ## Πρόκληση Εξερεύνησης Ιστορίας HTML Μάθετε για την εξέλιξη του Web Το HTML έχει εξελιχθεί σημαντικά από τότε που ο Tim Berners-Lee δημιούργησε τον πρώτο περιηγητή στο CERN το 1990. Ορισμένες παλιότερες ετικέτες όπως το <marquee> είναι πλέον απαξιωμένες επειδή δεν λειτουργούν καλά με τα σύγχρονα πρότυπα προσβασιμότητας και τις αρχές responsive design. Δοκιμάστε αυτό το Πείραμα: 1. Πρόχειρα βάλτε την ετικέτα <marquee> γύρω από τον τίτλο σας <h1>: <marquee><h1>My Terrarium</h1></marquee> 2. Ανοίξτε τη σελίδα σας σε ένα πρόγραμμα περιήγησης και παρατηρήστε το εφέ κύλισης 3. Σκεφτείτε γιατί αυτή η ετικέτα απαξιώθηκε (υπόδειξη: σκεφτείτε την εμπειρία χρήστη και την προσβασιμότητα) 4. Αφαιρέστε την ετικέτα <marquee> και επιστρέψτε σε σημασιολογική σήμανση Ερωτήσεις για Σκέψη: - Πώς μπορεί ένας κύλινος τίτλος να επηρεάσει χρήστες με προβλήματα όρασης ή ευαισθησία στην κίνηση; - Ποιες σύγχρονες τεχνικές CSS θα μπορούσαν να πετύχουν παρόμοια οπτικά εφέ με πιο προσβάσιμο τρόπο; - Γιατί είναι σημαντικό να χρησιμοποιούμε τα τρέχοντα πρότυπα web αντί για απαξιωμένα στοιχεία; Εξερευνήστε περισσότερα για τα παρωχημένα και απαξιωμένα στοιχεία HTML για να κατανοήσετε πώς εξελίσσονται τα πρότυπα web για να βελτιώσουν την εμπειρία χρήστη. ## Κουίζ Μετά το Μάθημα Κουίζ μετά το μάθημα ## Ανασκόπηση & Αυτομελέτη Εμβαθύνετε στη Γνώση σας για το HTML Το HTML αποτελεί τη βάση του web για πάνω από 30 χρόνια, εξελισσόμενο από μια απλή γλώσσα σήμανσης εγγράφων σε μια εξελιγμένη πλατφόρμα για την κατασκευή διαδραστικών εφαρμογών. Η κατανόηση αυτής της εξέλιξης βοηθά να εκτιμήσετε τα σύγχρονα πρότυπα web και να πάρετε καλύτερες αποφάσεις ανάπτυξης. Συνιστώμενες Διαδρομές Μάθησης: 1. Ιστορία και Εξέλιξη του HTML - Ερευνήστε τη χρονογραμμή από το HTML 1.0 μέχρι το HTML5 - Εξερευνήστε γιατί ορισμένες ετικέτες απαξιώθηκαν (προσβασιμότητα, φιλικότητα σε κινητά, ευκολία συντήρησης) - Μελετήστε τις αναδυόμενες λειτουργίες και προτάσεις HTML 2. Εμβάθυνση στο Σημασιολογικό HTML - Μελετήστε την πλήρη λίστα των σημασιολογικών στοιχείων HTML5 - Εξασκηθείτε στο πότε πρέπει να χρησιμοποιείτε <article>, <section>, <aside>, και <main> - Μάθετε για τα χαρακτηριστικά ARIA για βελτιωμένη προσβασιμότητα 3. Σύγχρονη Ανάπτυξη Web - Εξερευνήστε δημιουργία responsive ιστοσελίδων στο Microsoft Learn - Κατανοήστε πώς το HTML συνεργάζεται με CSS και JavaScript - Μάθετε για βέλτιστες πρακτικές απόδοσης και SEO Ερωτήσεις για Σκέψη: - Ποιες απαξιωμένες ετικέτες HTML ανακαλύψατε και γιατί αφαιρέθηκαν; - Ποιες νέες λειτουργίες HTML προτείνονται για μελλοντικές εκδόσεις; - Πώς συμβάλλει το σημασιολογικό HTML στην προσβασιμότητα και στο SEO; ### ⚡ Τι Μπορείτε να Κάνετε στα Επόμενα 5 Λεπτά - [ ] Ανοίξτε τα DevTools (F12) και εξετάστε τη δομή HTML ενός αγαπημένου σας ιστότοπου - [ ] Δημιουργήστε ένα απλό αρχείο HTML με βασικές ετικέτες: <h1>, <p>, και <img> - [ ] Επικυρώστε το HTML σας χρησιμοποιώντας τον W3C HTML Validator online - [ ] Δοκιμάστε να προσθέσετε ένα σχόλιο στο HTML σας με <!-- comment --> ### 🎯 Τι Μπορείτε να Επιτύχετε αυτή την Ώρα - [ ] Ολοκληρώστε το κουίζ μετά το μάθημα και μάθετε τις έννοιες του σημασιολογικού HTML - [ ] Δημιουργήστε μια απλή ιστοσελίδα για εσάς με σωστή δομή HTML - [ ] Πειραματιστείτε με διαφορετικά επίπεδα επικεφαλίδων και μορφοποίηση κειμένου - [ ] Προσθέστε εικόνες και συνδέσμους για να εξασκηθείτε στην ενσωμάτωση multimedia - [ ] Ερευνήστε λειτουργίες HTML5 που δεν έχετε δοκιμάσει ακόμα ### 📅 Η Εβδομαδιαία Διαδρομή HTML σας - [ ] Ολοκληρώστε την εργασία τεράριουμ με σημασιολογική σήμανση - [ ] Δημιουργήστε μια προσβάσιμη ιστοσελίδα με ετικέτες ARIA και ρόλους - [ ] Εξασκηθείτε στη δημιουργία φορμών με διάφορους τύπους εισόδου - [ ] Εξερευνήστε APIs HTML5 όπως το localStorage ή τη γεωεντοπισμό - [ ] Μελετήστε πρότυπα responsive HTML και κινητά πρώτα σχεδίαση - [ ] Ανασκοπήστε κώδικα HTML άλλων προγραμματιστών για βέλτιστες πρακτικές ### 🌟 Η Μηνιαία σας Βάση για το Web - [ ] Δημιουργήστε μια ιστοσελίδα portfolio που δείχνει την κυριαρχία σας στο HTML - [ ] Μάθετε HTML templating με ένα framework όπως το Handlebars - [ ] Συνεισφέρετε σε έργα ανοιχτού κώδικα βελτιώνοντας την HTML τεκμηρίωση - [ ] Εξοικειωθείτε με προχωρημένες έννοιες HTML όπως προσαρμοσμένα στοιχεία - [ ] Ενσωματώστε HTML με CSS frameworks και βιβλιοθήκες JavaScript - [ ] Καθοδηγήστε άλλους που μαθαίνουν τα βασικά του HTML ## 🎯 Ο Χρονοδιάγραμμα Κατάκτησης του HTML σας ### 🛠️ Περίληψη Εργαλειοθήκης HTML Μετά την ολοκλήρωση αυτού του μαθήματος, έχετε τώρα: - Δομή Εγγράφου: Πλήρης βάση HTML5 με σωστό DOCTYPE - Σημασιολογική Σήμανση: Σημαντικές ετικέτες που βελτιώνουν την προσβασιμότητα και το SEO - Ενσωμάτωση Εικόνας: Σωστή οργάνωση αρχείων και πρακτικές alt κειμένου - Δοχεία Διάταξης: Στρατηγική χρήση div με περιγραφικά ονόματα κλάσεων - Επίγνωση Προσβασιμότητας: Κατανόηση πλοήγησης με screen reader - Σύγχρονα Πρότυπα: Τρέχουσες πρακτικές HTML5 και γνώση απαξιωμένων ετικετών - Βάση Έργου: Στερεά βάση για στυλ CSS και διαδραστικότητα JavaScript Επόμενα Βήματα: Η δομή HTML σας είναι έτοιμη για στυλ CSS! Η σημασιολογική βάση που χτίσατε θα κάνει το επόμενο μάθημα πολύ πιο εύκολο να κατανοηθεί. ## Εργασία Πρακτική HTML: Δημιουργία προσομοίωσης blog --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Αποποίηση ευθύνης: Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI Co-op Translator. Παρόλο που προσπαθούμε για ακρίβεια, παρακαλούμε να λάβετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Έργο Terrarium Μέρος 2: Εισαγωγή στο CSS
Θυμάστε πώς φαινόταν το HTML terrarium σας αρκετά βασικό; Το CSS είναι το εργαλείο όπου μετατρέπουμε αυτήν την απλή δομή σε κάτι οπτικά ελκυστικό. Αν το HTML είναι σαν το να χτίζεις τον σκελετό ενός σπιτιού, τότε το CSS είναι όλα όσα το κάνουν να νιώθεις σαν σπίτι - τα χρώματα της βαφής, η διάταξη των επίπλων, ο φωτισμός και πώς ρέουν οι χώροι μαζί. Σκεφτείτε πώς το Ανάκτορο των Βερσαλλιών ξεκίνησε ως μια απλή κατοικία κυνηγιού, αλλά η προσεχτική προσοχή στη διακόσμηση και τη διάταξη το μεταμόρφωσε σε ένα από τα πιο μεγαλοπρεπή κτίρια του κόσμου. Σήμερα, θα μεταμορφώσουμε το terrarium σας από λειτουργικό σε πλήρως διαμορφωμένο. Θα μάθετε πώς να τοποθετείτε στοιχεία με ακρίβεια, να κάνετε τη διάταξη να ανταποκρίνεται σε διαφορετικά μεγέθη οθόνης και να δημιουργήσετε την οπτική γοητεία που καθιστά τους ιστότοπους ελκυστικούς. Στο τέλος αυτού του μαθήματος, θα δείτε πώς η στρατηγική μορφοποίηση CSS μπορεί να βελτιώσει δραστικά το έργο σας. Ας προσθέσουμε λίγο στυλ στο terrarium σας. ## Πρό-Μαθηματικό Quiz Quiz πριν το μάθημα ## Ξεκινώντας με το CSS Το CSS συχνά θεωρείται απλώς ως "το να κάνεις τα πράγματα όμορφα," αλλά εξυπηρετεί πολύ ευρύτερο σκοπό. Το CSS είναι σαν να είσαι ο σκηνοθέτης μιας ταινίας - ελέγχεις όχι μόνο πώς φαίνεται το κάθε τι, αλλά και πώς κινείται, αντιδρά στην αλληλεπίδραση και προσαρμόζεται σε διαφορετικές καταστάσεις. Το σύγχρονο CSS είναι εκπληκτικά ικανό. Μπορείτε να γράψετε κώδικα που ρυθμίζει αυτόματα τις διατάξεις για κινητά, tablet και επιτραπέζιους υπολογιστές. Μπορείτε να δημιουργήσετε ομαλές κινούμενες εικόνες που κατευθύνουν την προσοχή των χρηστών εκεί που χρειάζεται. Τα αποτελέσματα μπορούν να είναι αρκετά εντυπωσιακά όταν όλα λειτουργούν μαζί. Αυτά θα επιτύχουμε σε αυτό το μάθημα: - Δημιουργία πλήρους οπτικού σχεδιασμού για το terrarium σας χρησιμοποιώντας σύγχρονες τεχνικές CSS - Εξερεύνηση βασικών εννοιών όπως η ιεραρχία (cascade), η κληρονομικότητα και οι επιλογείς CSS - Εφαρμογή στρατηγικών τοποθέτησης και διάταξης για απόκριση - Κατασκευή του περιέκτη terrarium χρησιμοποιώντας σχήματα και στυλ CSS ### Προαπαιτούμενα Πρέπει να έχετε ολοκληρώσει τη δομή HTML για το terrarium σας από το προηγούμενο μάθημα και να είναι έτοιμη για μορφοποίηση. ### Εγκατάσταση του Αρχείου CSS σας Πριν ξεκινήσουμε να μορφοποιούμε, πρέπει να συνδέσουμε το CSS με το HTML. Αυτή η σύνδεση λέει στον περιηγητή πού να βρει τις οδηγίες μορφοποίησης για το terrarium μας. Στο φάκελο του terrarium σας, δημιουργήστε ένα νέο αρχείο με όνομα style.css, και μετά συνδέστε το στην ενότητα <head> του εγγράφου HTML σας: Αυτά κάνει ο κώδικας: - Δημιουργεί μια σύνδεση ανάμεσα στο HTML και στα αρχεία CSS σας - Λέει στον περιηγητή να φορτώσει και να εφαρμόσει τα στυλ από το style.css - Χρησιμοποιεί το rel="stylesheet" για να καθορίσει ότι πρόκειται για αρχείο CSS - Αναφέρεται στην διαδρομή αρχείου με το href="./style.css" ## Κατανόηση της Ιεραρχίας CSS Πάντοτε αναρωτιόσασταν γιατί το CSS λέγεται "Cascading" Style Sheets; Τα στυλ τρέχουν καταρρέοντας σαν καταρράκτης, και μερικές φορές συγκρούονται μεταξύ τους. Σκεφτείτε πώς λειτουργούν οι στρατιωτικές δομές εντολής - μια γενική διαταγή μπορεί να λέει "όλοι οι στρατιώτες να φορούν πράσινα," αλλά μια συγκεκριμένη εντολή προς τη μονάδα σας μπορεί να λέει "φορέστε τις στολές για την τελετή". Η πιο συγκεκριμένη οδηγία έχει προτεραιότητα. Το CSS ακολουθεί παρόμοια λογική και η κατανόηση αυτής της ιεραρχίας καθιστά την ανίχνευση σφαλμάτων πολύ πιο διαχειρίσιμη. ### Πειραματισμός με την Προτεραιότητα της Ιεραρχίας Ας δούμε την ιεραρχία σε δράση δημιουργώντας μια σύγκρουση στυλ. Πρώτα, προσθέστε ένα ενσωματωμένο στυλ (inline) στο <h1> σας: Τι κάνει αυτός ο κώδικας: - Εφαρμόζει κόκκινο χρώμα απευθείας στο στοιχείο <h1> χρησιμοποιώντας ενσωματωμένο στυλ - Χρησιμοποιεί το χαρακτηριστικό style για να ενσωματώσει CSS απευθείας στο HTML - Δημιουργεί τον κανόνα στυλ με την υψηλότερη προτεραιότητα γι’ αυτό το συγκεκριμένο στοιχείο Έπειτα, προσθέστε αυτόν τον κανόνα στο αρχείο style.css σας: Σε αυτά, έχουμε: - Ορίσει έναν κανόνα CSS που στοχεύει όλα τα στοιχεία <h1> - Ρυθμίσει το χρώμα του κειμένου σε μπλε χρησιμοποιώντας εξωτερικό φύλλο στυλ - Δημιουργήσει λιγότερο προτεραιότητα σε σχέση με τα ενσωματωμένα στυλ (inline) ✅ Έλεγχος Γνώσης: Ποιο χρώμα εμφανίζεται στην εφαρμογή σας; Γιατί κερδίζει αυτό το χρώμα; Μπορείτε να σκεφτείτε περιπτώσεις όπου μπορεί να θέλετε να παρακάμψετε στυλ; ## Κληρονομικότητα CSS σε Δράση Η κληρονομικότητα στο CSS λειτουργεί όπως η γενετική - τα στοιχεία κληρονομούν ορισμένες ιδιότητες από τους γονικούς τους κόμβους. Αν ορίσετε την οικογένεια γραμματοσειράς στο στοιχείο body, όλο το κείμενο μέσα χρησιμοποιεί αυτόματα αυτή την γραμματοσειρά. Είναι παρόμοιο με το πώς η χαρακτηριστική γνάθος της οικογένειας Χάμπσμπουργκ εμφανιζόταν σε όλες τις γενιές χωρίς να ορίζεται για κάθε άτομο ξεχωριστά. Ωστόσο, δεν κληρονομείται τα πάντα. Τα στυλ κειμένου όπως γραμματοσειρές και χρώματα κληρονομούνται, αλλά ιδιότητες διάταξης όπως περιθώρια και περιγράμματα δεν κληρονομούνται. Όπως τα παιδιά μπορεί να κληρονομήσουν φυσικά χαρακτηριστικά αλλά όχι τις επιλογές μόδας των γονέων τους. ### Παρατήρηση της Κληρονομικότητας της Γραμματοσειράς Ας δούμε την κληρονομικότητα σε δράση ορίζοντας μια οικογένεια γραμματοσειράς στο στοιχείο <body>: Ανάλυση του τι συμβαίνει: - Ορίζει την οικογένεια γραμματοσειράς για όλη τη σελίδα στοχεύοντας το στοιχείο <body> - Χρησιμοποιεί μια στοίβα γραμματοσειρών με εναλλακτικές επιλογές για καλύτερη συμβατότητα μεταξύ προγραμμάτων περιήγησης - Εφαρμόζει σύγχρονες συστημικές γραμματοσειρές που δείχνουν καλά σε διάφορα λειτουργικά συστήματα - Εξασφαλίζει ότι όλα τα παιδιά στοιχεία κληρονομούν αυτή την γραμματοσειρά εκτός αν οριστεί διαφορετικά Ανοίξτε τα εργαλεία ανάπτυξης του περιηγητή σας (F12), πηγαίνετε στην καρτέλα Elements και επιθεωρήστε το στοιχείο <h1>. Θα δείτε ότι κληρονομεί την οικογένεια γραμματοσειράς από το body: ✅ Δοκιμή Πειράματος: Δοκιμάστε να ορίσετε άλλες κληρονομούμενες ιδιότητες στο <body> όπως color, line-height ή text-align. Τι συμβαίνει με τον τίτλο σας και άλλα στοιχεία; ### 🔄 Παιδαγωγικός Έλεγχος Κατανόηση Βάσεων CSS: Πριν προχωρήσετε στους επιλογείς, βεβαιωθείτε ότι μπορείτε να: - ✅ Εξηγήσετε τη διαφορά ανάμεσα στην ιεραρχία (cascade) και την κληρονομικότητα - ✅ Προβλέψετε ποιο στυλ θα υπερισχύσει σε μια σύγκρουση συγκεκριμενοποίησης - ✅ Αναγνωρίσετε ποιες ιδιότητες κληρονομούνται από γονικά στοιχεία - ✅ Συνδέσετε σωστά αρχεία CSS με HTML Γρήγορη Δοκιμή: Αν έχετε αυτά τα στυλ, τι χρώμα θα έχει ένα <h1> μέσα σε ένα <div class="special">; Απάντηση: Κόκκινο (ο επιλογέας στοιχείου στοχεύει απευθείας το h1) ## Εξοικείωση με τους Επιλογείς CSS Οι επιλογείς CSS είναι ο τρόπος με τον οποίο στοχεύετε συγκεκριμένα στοιχεία για μορφοποίηση. Λειτουργούν όπως το να δίνετε ακριβείς οδηγίες - αντί να πείτε "το σπίτι," μπορεί να πείτε "το μπλε σπίτι με την κόκκινη πόρτα στην οδό Μέιπλ." Το CSS παρέχει διαφορετικούς τρόπους για να είστε συγκεκριμένοι, και η επιλογή του σωστού επιλογέα είναι σαν να διαλέγετε το κατάλληλο εργαλείο για τη δουλειά. Μερικές φορές πρέπει να μορφοποιήσετε κάθε πόρτα στη γειτονιά, και μερικές άλλες μόνο μια συγκεκριμένη πόρτα. ### Επιλογείς Στοιχείων (Tags) Οι επιλογείς στοιχείων στοχεύουν τα HTML στοιχεία με βάση το όνομα ετικέτας τους. Είναι τέλειοι για τη ρύθμιση βασικών στυλ που εφαρμόζονται γενικά σε όλη τη σελίδα σας: Κατανόηση αυτών των στυλ: - Ορίζει συνεπή τυπογραφία σε όλη τη σελίδα με τον επιλογέα body - Αφαιρεί τα προεπιλεγμένα περιθώρια και τα padding του προγράμματος περιήγησης για καλύτερο έλεγχο - Μορφοποιεί όλα τα στοιχεία τίτλων με χρώμα, στοίχιση και απόσταση - Χρησιμοποιεί μονάδες rem για κλιμακούμενο, προσβάσιμο μέγεθος γραμματοσειράς Ενώ οι επιλογείς στοιχείων λειτουργούν καλά για γενική μορφοποίηση, θα χρειαστείτε πιο συγκεκριμένους επιλογείς για να μορφοποιήσετε μεμονωμένα συστατικά όπως τα φυτά στο terrarium σας. ### Επιλογείς ID για Μοναδικά Στοιχεία Οι επιλογείς ID χρησιμοποιούν το σύμβολο # και στοχεύουν στοιχεία με συγκεκριμένο χαρακτηριστικό id. Επειδή τα ID πρέπει να είναι μοναδικά σε μια σελίδα, είναι τέλεια για τη μορφοποίηση μοναδικών, ειδικών στοιχείων όπως οι περιέκτες φυτών αριστερά και δεξιά. Ας δημιουργήσουμε τη μορφοποίηση για τους πλευρικούς περιέκτες terrarium όπου θα ζουν τα φυτά: Αυτά επιτυγχάνει ο κώδικας: - Τοποθετεί τους περιέκτες στις ακραίες αριστερές και δεξιές ακμές χρησιμοποιώντας absolute θέση - Χρησιμοποιεί μονάδες vh (ύψος οθόνης) για ανταποκρινόμενο ύψος που προσαρμόζεται στο μέγεθος οθόνης - Εφαρμόζει το box-sizing: border-box ώστε το padding να συμπεριλαμβάνεται στο συνολικό πλάτος - Αφαιρεί τις περιττές μονάδες px από τιμές μηδενικές για καθαρότερο κώδικα - Ορίζει ένα διακριτικό χρώμα φόντου που είναι πιο ευχάριστο στο μάτι από το έντονο γκρι ✅ Πρόκληση Ποιότητας Κώδικα: Παρατηρήστε πώς αυτό το CSS παραβιάζει την αρχή DRY (Don’t Repeat Yourself). Μπορείτε να το αναδιαμορφώσετε χρησιμοποιώντας τόσο ένα ID όσο και μια κλάση; Βελτιωμένη προσέγγιση: ### Επιλογείς Κλάσεων για Επαναχρησιμοποιήσιμα Στυλ Οι επιλογείς κλάσεων χρησιμοποιούν το σύμβολο . και είναι ιδανικοί όταν θέλετε να εφαρμόσετε τα ίδια στυλ σε πολλαπλά στοιχεία. Σε αντίθεση με τα ID, οι κλάσεις μπορούν να επαναχρησιμοποιούνται σε όλο το HTML σας, καθιστώντας τις ιδανικές για συνεπή πρότυπα μορφοποίησης. Στο terrarium μας, κάθε φυτό χρειάζεται παρόμοια μορφοποίηση αλλά και ξεχωριστή τοποθέτηση. Θα χρησιμοποιήσουμε συνδυασμό κλάσεων για κοινά στυλ και ID για μοναδική τοποθέτηση. Αυτή είναι η δομή HTML για κάθε φυτό: Κύρια στοιχεία εξηγούνται: - Χρησιμοποιεί class="plant-holder" για συνεπή μορφοποίηση κοντέινερ σε όλα τα φυτά - Εφαρμόζει class="plant" για κοινή μορφοποίηση εικόνας και συμπεριφορά - Περιλαμβάνει μοναδικό id="plant1" για ατομική τοποθέτηση και αλληλεπίδραση με JavaScript - Παρέχει περιγραφικό alt κείμενο για προσβασιμότητα με οθόνες ανάγνωσης Τώρα προσθέστε αυτά τα στυλ στο αρχείο style.css σας: Ανάλυση των στυλ αυτών: - Δημιουργεί σχετική τοποθέτηση για τον κάτοχο του φυτού ώστε να ορίσει πλαίσιο τοποθέτησης - Ορίζει κάθε φυτο-κάτοχο σε ύψος 13%, διασφαλίζοντας ότι όλα τα φυτά χωράνε σε ύψος χωρίς κύλιση - Μετακινεί ελαφρώς τους κάτοχους προς τα αριστερά για καλύτερο κεντράρισμα των φυτών μέσα στους περιέκτες τους - Επιτρέπει στα φυτά να κλιμακώνονται ανταποκρινόμενα με τις ιδιότητες max-width και max-height - Χρησιμοποιεί z-index για να τοποθετεί τα φυτά πάνω από άλλα στοιχεία στο terrarium - Προσθέτει διακριτικό εφέ hover με μεταβάσεις CSS για καλύτερη αλληλεπίδραση χρήστη ✅ Κριτική Σκέψη: Γιατί χρειαζόμαστε και τους δύο επιλογείς .plant-holder και .plant; Τι θα συνέβαινε αν χρησιμοποιούσαμε μόνο έναν; ## Κατανόηση της Τοποθέτησης CSS Η τοποθέτηση CSS είναι σαν να είσαι ο σκηνοθέτης για μια θεατρική παράσταση - καθοδηγείς πού στέκεται κάθε ηθοποιός και πώς κινούνται στη σκηνή. Κάποιοι ηθοποιοί ακολουθούν την κανονική διάταξη, ενώ άλλοι χρειάζονται συγκεκριμένη τοποθέτηση για δραματικό αποτέλεσμα. Μόλις κατανοήσεις την τοποθέτηση, πολλές προκλήσεις διάταξης γίνονται διαχειρίσιμες. Χρειάζεσαι μια γραμμή πλοήγησης που μένει στην κορυφή ενώ οι χρήστες κάνουν κύλιση; Η τοποθέτηση το διαχειρίζεται αυτό. Θέλεις ένα tooltip που εμφανίζεται σε συγκεκριμένη θέση; Αυτή είναι επίσης τοποθέτηση. ### Οι Πέντε Τιμές Τοποθέτησης ### Τοποθέτηση στο Terrarium μας Το terrarium μας χρησιμοποιεί έναν στρατηγικό συνδυασμό τύπων τοποθέτησης για να δημιουργήσει τη επιθυμητή διάταξη: Κατανόηση της στρατηγικής τοποθέτησης: - Οι απόλυτοι κοντέινερ αφαιρούνται από τον κανονικό ροή εγγράφου και καρφιτσώνονται στις άκρες της οθόνης - Οι σχετικοί κάτοχοι φυτών δημιουργούν πλαίσιο τοποθέτησης ενώ παραμένουν στη ροή εγγράφου - Τα απόλυτα φυτά μπορούν να τοποθετηθούν με ακρίβεια μέσα στους σχετικούς περιέκτες τους - Αυτός ο συνδυασμός επιτρέπει στα φυτά να στοιβάζονται κατακόρυφα ενώ είναι μοναδικά τοποθετήσιμα ✅ Πειραματισμός: Δοκιμάστε να αλλάξετε τις τιμές τοποθέτησης και παρατηρήστε τα αποτελέσματα: - Τι συμβαίνει αν αλλάξετε το .container από absolute σε relative; - Πώς αλλάζει η διάταξη αν το .plant-holder χρησιμοποιεί absolute αντί για relative; - Τι συμβαίνει όταν αλλάζετε τη θέση του .plant σε relative; ### 🔄 Παιδαγωγικός Έλεγχος Κατανόηση Θέσης CSS: Σταματήστε για να ελέγξετε την κατανόησή σας: - ✅ Μπορείτε να εξηγήσετε γιατί τα φυτά χρειάζονται απόλυτη θέση για drag-and-drop; - ✅ Καταλαβαίνετε πώς τα σχετικά containers δημιουργούν πλαίσιο θέσης; - ✅ Γιατί τα πλευρικά containers χρησιμοποιούν απόλυτη θέση; - ✅ Τι θα συνέβαινε αν αφαιρούσατε εντελώς τις δηλώσεις θέσης; Σύνδεση με τον Πραγματικό Κόσμο: Σκεφτείτε πώς η τοποθέτηση CSS αντικατοπτρίζει τη διάταξη στον πραγματικό κόσμο: - Static: Βιβλία στο ράφι (φυσική σειρά) - Relative: Μετακινώντας ελαφρώς ένα βιβλίο κρατώντας τη θέση του - Absolute: Τοποθετώντας σελιδοδείκτη σε ακριβή αριθμό σελίδας - Fixed: Μια αυτοκόλλητη σημείωση που μένει ορατή καθώς γυρίζετε τις σελίδες ## Δημιουργία του Τεραρίου με CSS Τώρα θα δημιουργήσουμε ένα γυάλινο βάζο χρησιμοποιώντας μόνο CSS - χωρίς εικόνες ή λογισμικό γραφικών. Η δημιουργία ρεαλιστικών γυαλιών, σκιών και εφέ βάθους χρησιμοποιώντας θέση και διαφάνεια δείχνει τις οπτικές δυνατότητες του CSS. Αυτή η τεχνική αντικατοπτρίζει πώς οι αρχιτέκτονες του κινήματος Bauhaus χρησιμοποιούσαν απλές γεωμετρικές μορφές για να δημιουργήσουν σύνθετες, όμορφες δομές. Μόλις κατανοήσετε αυτές τις αρχές, θα αναγνωρίζετε τις τεχνικές CSS πίσω από πολλά διαδικτυακά σχέδια. ### Δημιουργία των Συστατικών του Γυάλινου Βάζου Ας κατασκευάσουμε το βάζο του τεραρίου τμηματικά. Κάθε μέρος χρησιμοποιεί απόλυτη θέση και διαστάσεις βάσει ποσοστού για σχεδιασμό προσαρμοστικότητας: Κατανόηση της κατασκευής του τεραρίου: - Χρησιμοποιεί διαστάσεις με ποσοστά για αναλογική κλιμάκωση σε όλα τα μεγέθη οθόνης - Θέτει τα στοιχεία απόλυτα για στοίβαξη και ακριβή ευθυγράμμιση - Εφαρμόζει διαφορετικές τιμές διαφάνειας για να δημιουργήσει το εφέ διαφάνειας γυαλιού - Υλοποιεί στρώση z-index ώστε τα φυτά να εμφανίζονται μέσα στο βάζο - Προσθέτει λεπτό σκίασμα κουτιού και βελτιωμένη ακτίνα περιγράμματος για πιο ρεαλιστική εμφάνιση ### Σχεδιασμός Προσαρμοστικός με Ποσοστά Παρατηρήστε πώς όλες οι διαστάσεις χρησιμοποιούν ποσοστά αντί για σταθερές τιμές σε pixel: Γιατί είναι σημαντικό: - Διασφαλίζει ότι το τεράριο κλιμακώνεται αναλογικά σε κάθε μέγεθος οθόνης - Διατηρεί τις οπτικές αναλογίες μεταξύ των συστατικών του βαζιού - Προσφέρει ομοιόμορφη εμπειρία από κινητά τηλέφωνα έως μεγάλα desktop monitors - Επιτρέπει στο σχέδιο να προσαρμόζεται χωρίς να σπάει η οπτική διάταξη ### Μονάδες CSS σε Δράση Χρησιμοποιούμε μονάδες rem για το border-radius, που κλιμακώνονται σχετικά με το μέγεθος της ρίζας της γραμματοσειράς. Αυτό δημιουργεί πιο προσβάσιμα σχέδια που σέβονται τις προτιμήσεις των χρηστών. Μάθετε περισσότερα για τις σχετικές μονάδες CSS στην επίσημη προδιαγραφή. ✅ Οπτικά Πειράματα: Δοκιμάστε να τροποποιήσετε αυτές τις τιμές και παρατηρήστε τα αποτελέσματα: - Αλλάξτε τη διαφάνεια του βαζιού από 0.5 σε 0.8 – πώς επηρεάζεται η εμφάνιση του γυαλιού; - Προσαρμόστε το χρώμα της βρωμιάς από #3a241d σε #8B4513 – ποιο οπτικό αποτέλεσμα έχει αυτό; - Αλλάξτε το z-index της βρωμιάς σε 2 – τι συμβαίνει με την στοίβαξη; ### 🔄 Παιδαγωγικός Έλεγχος Κατανόηση Οπτικού Σχεδιασμού CSS: Επιβεβαιώστε την κατανόησή σας στο οπτικό CSS: - ✅ Πώς δημιουργούν οι διαστάσεις με ποσοστά το responsive design; - ✅ Γιατί η διαφάνεια δημιουργεί το εφέ γυαλιού; - ✅ Ποιος ρόλος παίζει το z-index στη στοίβαξη στοιχείων; - ✅ Πώς οι τιμές border-radius δημιουργούν το σχήμα του βαζιού; Αρχή Σχεδιασμού: Παρατηρήστε πώς κατασκευάζουμε σύνθετα οπτικά από απλά σχήματα: 1. Ορθογώνια → Στρογγυλεμένα ορθογώνια → Συστατικά του βάζου 2. Επίπεδα χρώματα → Διαφάνεια → Εφέ γυαλιού 3. Ατομικά στοιχεία → Στρωματική σύνθεση → Τρισδιάστατη εμφάνιση --- ## Πρόκληση GitHub Copilot Agent 🚀 Χρησιμοποιήστε τη λειτουργία Agent για να ολοκληρώσετε την παρακάτω πρόκληση: Περιγραφή: Δημιουργήστε μια CSS animation που κάνει τα φυτά του τεραρίου να κινούνται απαλά μπρος και πίσω, προσομοιώνοντας το φαινόμενο φυσικού αέρα. Αυτό θα σας βοηθήσει να εξασκηθείτε σε CSS animations, μετασχηματισμούς και keyframes ενώ ενισχύετε την οπτική εμφάνιση του τεραρίου σας. Προτροπή: Προσθέστε CSS keyframe animations που κάνουν τα φυτά στο τεράριο να κινούνται απαλά από τη μία πλευρά στην άλλη. Δημιουργήστε μια κίνηση κλίσης που περιστρέφει κάθε φυτό ελαφρά (2-3 μοίρες) αριστερά και δεξιά με διάρκεια 3-4 δευτερολέπτων, και εφαρμόστε τη στην κλάση .plant. Βεβαιωθείτε ότι η κίνηση βρόγχου είναι άπειρη και έχει easing για φυσική κίνηση. Μάθετε περισσότερα για τη λειτουργία agent εδώ. ## 🚀 Πρόκληση: Προσθήκη Αντανακλάσεων στο Γυαλί Έτοιμοι να βελτιώσετε το τεράριό σας με ρεαλιστικές αντανακλάσεις γυαλιού; Αυτή η τεχνική θα προσθέσει βάθος και ρεαλισμό στο σχέδιο. Θα δημιουργήσετε διακριτικά φωτεινά σημεία που προσομοιώνουν πώς το φως αντανακλάται στις γυάλινες επιφάνειες. Αυτή η προσέγγιση είναι παρόμοια με το πώς οι ζωγράφοι της Αναγέννησης όπως ο Jan van Eyck χρησιμοποιούσαν το φως και την αντανάκλαση για να κάνουν το ζωγραφισμένο γυαλί να φαίνεται τρισδιάστατο. Αυτό στοχεύετε: Η πρόκλησή σας: - Δημιουργήστε διακριτικούς λευκούς ή ανοιχτόχρωμους οβάλ σχηματισμούς για τις αντανακλάσεις του γυαλιού - Τοποθετήστε τους στρατηγικά στην αριστερή πλευρά του βαζιού - Εφαρμόστε κατάλληλες τιμές διαφάνειας και θολώματος για ρεαλιστική αντανάκλαση φωτός - Χρησιμοποιήστε border-radius για να δημιουργήσετε οργανικά, φυσαλιδωτά σχήματα - Πειραματιστείτε με gradients ή box-shadows για βελτιωμένη ρεαλιστικότητα ## Κουίζ Μετά το Μάθημα Post-lecture quiz ## Επέκταση Γνώσης CSS Το CSS μπορεί να φαίνεται πολύπλοκο αρχικά, αλλά η κατανόηση αυτών των βασικών εννοιών παρέχει ισχυρή βάση για πιο εξελιγμένες τεχνικές. Οι επόμενες περιοχές εκμάθησης CSS: - Flexbox - απλοποιεί την ευθυγράμμιση και διανομή στοιχείων - CSS Grid - παρέχει ισχυρά εργαλεία για τη δημιουργία σύνθετων διατάξεων - Μεταβλητές CSS - μειώνουν την επανάληψη και βελτιώνουν τη συντηρησιμότητα - Responsive design - εξασφαλίζει ότι τα sites λειτουργούν καλά σε διαφορετικά μεγέθη οθόνης ### Διαδραστικοί Πόροι Μάθησης Πρακτική σε αυτές τις έννοιες με διασκεδαστικά, διαδραστικά παιχνίδια: - 🐸 Flexbox Froggy - Μάθετε Flexbox μέσα από διασκεδαστικές προκλήσεις - 🌱 Grid Garden - Μάθετε CSS Grid καλλιεργώντας εικονικά καρότα - 🎯 CSS Battle - Δοκιμάστε τις ικανότητές σας στο CSS με κωδικοπαιχνίδια ### Πρόσθετη Εκμάθηση Για πλήρη βασικά CSS, ολοκληρώστε το Microsoft Learn module: Στυλιζάρετε την εφαρμογή HTML σας με CSS ### ⚡ Τι μπορείτε να κάνετε στα επόμενα 5 λεπτά - [ ] Ανοίξτε τα DevTools και επιθεωρήστε στυλ CSS σε οποιαδήποτε ιστοσελίδα χρησιμοποιώντας το Elements panel - [ ] Δημιουργήστε ένα απλό αρχείο CSS και συνδέστε το σε σελίδα HTML - [ ] Δοκιμάστε να αλλάξετε χρώματα χρησιμοποιώντας διαφορετικές μεθόδους: hex, RGB, και ονομασμένα χρώματα - [ ] Εξασκηθείτε στο box model προσθέτοντας padding και margin σε ένα div ### 🎯 Τι μπορείτε να καταφέρετε αυτή την ώρα - [ ] Ολοκληρώστε το κουίζ μετά το μάθημα και εξετάστε τα βασικά του CSS - [ ] Στυλιζάρετε τη σελίδα HTML με γραμματοσειρές, χρώματα και αποστάσεις - [ ] Δημιουργήστε μια απλή διάταξη χρησιμοποιώντας flexbox ή grid - [ ] Πειραματιστείτε με CSS transitions για ομαλά εφέ - [ ] Εξασκηθείτε σε responsive design με media queries ### 📅 Η περιπέτειά σας με το CSS για μία εβδομάδα - [ ] Ολοκληρώστε την ανάθεση στυλ του τεραρίου με δημιουργική προσέγγιση - [ ] Κατακτήστε το CSS Grid δημιουργώντας διάταξη φωτογραφικής γκαλερί - [ ] Μάθετε CSS animations για να ζωντανέψετε τα σχέδιά σας - [ ] Εξερευνήστε CSS preprocessors όπως Sass ή Less - [ ] Μελετήστε αρχές σχεδιασμού και εφαρμόστε τις στο CSS σας - [ ] Αναλύστε και αναπαράγετε ενδιαφέροντα σχέδια που βρήκατε online ### 🌟 Η καλλιέργεια δεξιοτήτων σχεδιασμού για ένα μήνα - [ ] Δημιουργήστε ένα πλήρες σύστημα σχεδιασμού responsive ιστοσελίδας - [ ] Μάθετε CSS-in-JS ή utility-first frameworks όπως Tailwind - [ ] Συμβάλετε σε ανοιχτά έργα με βελτιώσεις CSS - [ ] Κατακτήστε προηγμένες έννοιες CSS όπως custom properties και containment - [ ] Δημιουργήστε επαναχρησιμοποιήσιμες βιβλιοθήκες components με modular CSS - [ ] Καθοδηγήστε άλλους που μαθαίνουν CSS και μοιραστείτε τη γνώση σχεδιασμού ## 🎯 Χρονοδιάγραμμα Κατάκτησης CSS ### 🛠️ Περίληψη Εργαλείων CSS Μετά την ολοκλήρωση αυτού του μαθήματος, διαθέτετε πλέον: - Κατανόηση Cascade: Πώς τα στυλ κληρονομούνται και υπερισχύουν το ένα του άλλου - Δεξιότητες επιλογέα: Ακριβή στόχευση με στοιχεία, κλάσεις και IDs - Δεξιότητες τοποθέτησης: Στρατηγική τοποθέτηση και στρώσεις στοιχείων - Οπτικός Σχεδιασμός: Δημιουργία εφέ γυαλιού, σκιών και διαφάνειας - Προσαρμοστικές Τεχνικές: Διατάξεις με ποσοστά που προσαρμόζονται σε κάθε οθόνη - Οργάνωση Κώδικα: Καθαρή, συντηρήσιμη δομή CSS - Σύγχρονες Πρακτικές: Χρήση σχετικών μονάδων και προσβάσιμων σχεδίων Επόμενα Βήματα: Το τεράριό σας έχει πλέον δομή (HTML) και στυλ (CSS). Το τελικό μάθημα θα προσθέσει διαδραστικότητα με JavaScript! ## Ανάθεση CSS Refactoring --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Αποποίηση Ευθυνών: Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία μετάφρασης με τεχνητή νοημοσύνη Co-op Translator. Παρόλο που καταβάλλουμε προσπάθεια για ακρίβεια, παρακαλείστε να γνωρίζετε ότι οι αυτοματοποιημένες μεταφράσεις μπορεί να περιέχουν σφάλματα ή ανακρίβειες. Το πρωτότυπο έγγραφο στην μητρική του γλώσσα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες συνιστάται επαγγελματική μετάφραση από ανθρώπινο μεταφραστή. Δεν φέρουμε καμία ευθύνη για τυχόν παρανοήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Project Part 1: Introduction to HTML
HTML, or HyperText Markup Language, is the foundation of every website you've ever visited. Think of HTML as the skeleton that gives structure to web pages – it defines where content goes, how it's organized, and what each piece represents. While CSS will later "dress up" your HTML with colors and layouts, and JavaScript will bring it to life with interactivity, HTML provides the essential structure that makes everything else possible. In this lesson, you'll create the HTML structure for a virtual terrarium interface. This hands-on project will teach you fundamental HTML concepts while building something visually engaging. You'll learn how to organize content using semantic elements, work with images, and create the foundation for an interactive web application. By the end of this lesson, you'll have a working HTML page displaying plant images in organized columns, ready for styling in the next lesson. Don't worry if it looks basic at first – that's exactly what HTML should do before CSS adds the visual polish. ## Pre-Lecture Quiz Pre-lecture quiz ## Setting Up Your Project Before we dive into HTML code, let's set up a proper workspace for your terrarium project. Creating an organized file structure from the beginning is a crucial habit that will serve you well throughout your web development journey. ### Task: Create Your Project Structure You'll create a dedicated folder for your terrarium project and add your first HTML file. Here are two approaches you can use: Option 1: Using Visual Studio Code 1. Open Visual Studio Code 2. Click "File" → "Open Folder" or use Ctrl+K, Ctrl+O (Windows/Linux) or Cmd+K, Cmd+O (Mac) 3. Create a new folder called terrarium and select it 4. In the Explorer pane, click the "New File" icon 5. Name your file index.html Option 2: Using Terminal Commands Here's what these commands accomplish: - Creates a new directory called terrarium for your project - Navigates into the terrarium directory - Creates an empty index.html file - Opens the file in Visual Studio Code for editing ## Understanding HTML Document Structure Every HTML document follows a specific structure that browsers need to understand and display correctly. Think of this structure like a formal letter – it has required elements in a particular order that help the recipient (in this case, the browser) process the content properly. Let's start by adding the essential foundation that every HTML document needs. ### The DOCTYPE Declaration and Root Element The first two lines of any HTML file serve as the document's "introduction" to the browser: Understanding what this code does: - Declares the document type as HTML5 using <!DOCTYPE html> - Creates the root <html> element that will contain all page content - Establishes modern web standards for proper browser rendering - Ensures consistent display across different browsers and devices ### 🔄 Pedagogical Check-in Pause and Reflect: Before continuing, make sure you understand: - ✅ Why every HTML document needs a DOCTYPE declaration - ✅ What the <html> root element contains - ✅ How this structure helps browsers render pages correctly Quick Self-Test: Can you explain in your own words what "standards-compliant rendering" means? ## Adding Essential Document Metadata The <head> section of an HTML document contains crucial information that browsers and search engines need, but that visitors don't see directly on the page. Think of it as the "behind-the-scenes" information that helps your webpage work properly and appear correctly across different devices and platforms. This metadata tells browsers how to display your page, what character encoding to use, and how to handle different screen sizes – all essential for creating professional, accessible web pages. ### Task: Add the Document Head Insert this <head> section between your opening and closing <html> tags: Breaking down what each element accomplishes: - Sets the page title that appears in browser tabs and search results - Specifies UTF-8 character encoding for proper text display worldwide - Ensures compatibility with modern versions of Internet Explorer - Configures responsive design by setting the viewport to match device width - Controls initial zoom level to display content at natural size ## Building the Document Body The <body> element contains all the visible content of your webpage – everything users will see and interact with. While the <head> section provided instructions to the browser, the <body> section contains the actual content: text, images, buttons, and other elements that create your user interface. Let's add the body structure and understand how HTML tags work together to create meaningful content. ### Understanding HTML Tag Structure HTML uses paired tags to define elements. Most tags have an opening tag like <p> and a closing tag like </p>, with content in between: <p>Hello, world!</p>. This creates a paragraph element containing the text "Hello, world!". ### Task: Add the Body Element Update your HTML file to include the <body> element: Here's what this complete structure provides: - Establishes the basic HTML5 document framework - Includes essential metadata for proper browser rendering - Creates an empty body ready for your visible content - Follows modern web development best practices Now you're ready to add the visible elements of your terrarium. We'll use <div> elements as containers to organize different sections of content, and <img> elements to display the plant images. ### Working with Images and Layout Containers Images are special in HTML because they use "self-closing" tags. Unlike elements like <p></p> that wrap around content, the <img> tag contains all the information it needs within the tag itself using attributes like src for the image file path and alt for accessibility. Before adding images to your HTML, you'll need to organize your project files properly by creating an images folder and adding the plant graphics. First, set up your images: 1. Create a folder called images inside your terrarium project folder 2. Download the plant images from the solution folder (14 plant images total) 3. Copy all plant images into your new images folder ### Task: Create the Plant Display Layout Now add the plant images organized in two columns between your <body></body> tags: Step by step, here's what's happening in this code: - Creates a main page container with id="page" to hold all content - Establishes two column containers: left-container and right-container - Organizes 7 plants in the left column and 7 plants in the right column - Wraps each plant image in a plant-holder div for individual positioning - Applies consistent class names for CSS styling in the next lesson - Assigns unique IDs to each plant image for JavaScript interaction later - Includes proper file paths pointing to the images folder ### 🔄 Pedagogical Check-in Structure Understanding: Take a moment to review your HTML structure: - ✅ Can you identify the main containers in your layout? - ✅ Do you understand why each image has a unique ID? - ✅ How would you describe the purpose of the plant-holder divs? Visual Inspection: Open your HTML file in a browser. You should see: - A basic list of plant images - Images organized in two columns - Simple, unstyled layout Remember: This plain appearance is exactly what HTML should look like before CSS styling! With this markup added, the plants will appear on screen, though they won't look polished yet – that's what CSS is for in the next lesson! For now, you have a solid HTML foundation that properly organizes your content and follows accessibility best practices. ## Using Semantic HTML for Accessibility Semantic HTML means choosing HTML elements based on their meaning and purpose, not just their appearance. When you use semantic markup, you're communicating the structure and meaning of your content to browsers, search engines, and assistive technologies like screen readers. This approach makes your websites more accessible to users with disabilities and helps search engines better understand your content. It's a fundamental principle of modern web development that creates better experiences for everyone. ### Adding a Semantic Page Title Let's add a proper heading to your terrarium page. Insert this line right after your opening <body> tag: Why semantic markup matters: - Helps screen readers navigate and understand page structure - Improves search engine optimization (SEO) by clarifying content hierarchy - Enhances accessibility for users with visual impairments or cognitive differences - Creates better user experiences across all devices and platforms - Follows web standards and best practices for professional development Examples of semantic vs. non-semantic choices: ## Creating the Terrarium Container Now let's add the HTML structure for the terrarium itself – the glass container where plants will eventually be placed. This section demonstrates an important concept: HTML provides structure, but without CSS styling, these elements won't be visible yet. The terrarium markup uses descriptive class names that will make CSS styling intuitive and maintainable in the next lesson. ### Task: Add the Terrarium Structure Insert this markup above the last </div> tag (before the closing tag of the page container): Understanding this terrarium structure: - Creates a main terrarium container with a unique ID for styling - Defines separate elements for each visual component (top, walls, dirt, bottom) - Includes nested elements for glass reflection effects (glossy elements) - Uses descriptive class names that clearly indicate each element's purpose - Prepares the structure for CSS styling that will create the glass terrarium appearance ### 🔄 Pedagogical Check-in HTML Structure Mastery: Before moving forward, ensure you can: - ✅ Explain the difference between HTML structure and visual appearance - ✅ Identify semantic vs. non-semantic HTML elements - ✅ Describe how proper markup benefits accessibility - ✅ Recognize the complete document tree structure Testing Your Understanding: Try opening your HTML file in a browser with JavaScript disabled and CSS removed. This shows you the pure semantic structure you've created! --- ## GitHub Copilot Agent Challenge Use the Agent mode to complete the following challenge: Description: Create a semantic HTML structure for a plant care guide section that could be added to the terrarium project. Prompt: Create a semantic HTML section that includes a main heading "Plant Care Guide", three subsections with headings "Watering", "Light Requirements", and "Soil Care", each containing a paragraph of plant care information. Use proper semantic HTML tags like <section>, <h2>, <h3>, and <p> to structure the content appropriately. Learn more about agent mode here. ## Explore HTML History Challenge Learning About Web Evolution HTML has evolved significantly since Tim Berners-Lee created the first web browser at CERN in 1990. Some older tags like <marquee> are now deprecated because they don't work well with modern accessibility standards and responsive design principles. Try This Experiment: 1. Temporarily wrap your <h1> title in a <marquee> tag: <marquee><h1>My Terrarium</h1></marquee> 2. Open your page in a browser and observe the scrolling effect 3. Consider why this tag was deprecated (hint: think about user experience and accessibility) 4. Remove the <marquee> tag and return to semantic markup Reflection Questions: - How might a scrolling title affect users with visual impairments or motion sensitivity? - What modern CSS techniques could achieve similar visual effects more accessibly? - Why is it important to use current web standards instead of deprecated elements? Explore more about obsolete and deprecated HTML elements to understand how web standards evolve to improve user experience. ## Post-Lecture Quiz Post-lecture quiz ## Review & Self Study Deepen Your HTML Knowledge HTML has been the foundation of the web for over 30 years, evolving from a simple document markup language to a sophisticated platform for building interactive applications. Understanding this evolution helps you appreciate modern web standards and make better development decisions. Recommended Learning Paths: 1. HTML History and Evolution - Research the timeline from HTML 1.0 to HTML5 - Explore why certain tags were deprecated (accessibility, mobile-friendliness, maintainability) - Investigate emerging HTML features and proposals 2. Semantic HTML Deep Dive - Study the complete list of HTML5 semantic elements - Practice identifying when to use <article>, <section>, <aside>, and <main> - Learn about ARIA attributes for enhanced accessibility 3. Modern Web Development - Explore building responsive websites on Microsoft Learn - Understand how HTML integrates with CSS and JavaScript - Learn about web performance and SEO best practices Reflection Questions: - Which deprecated HTML tags did you discover, and why were they removed? - What new HTML features are being proposed for future versions? - How does semantic HTML contribute to web accessibility and SEO? ### ⚡ What You Can Do in the Next 5 Minutes - [ ] Open DevTools (F12) and inspect the HTML structure of your favorite website - [ ] Create a simple HTML file with basic tags: <h1>, <p>, and <img> - [ ] Validate your HTML using the W3C HTML Validator online - [ ] Try adding a comment to your HTML using <!-- comment --> ### 🎯 What You Can Accomplish This Hour - [ ] Complete the post-lesson quiz and review semantic HTML concepts - [ ] Build a simple webpage about yourself using proper HTML structure - [ ] Experiment with different heading levels and text formatting tags - [ ] Add images and links to practice multimedia integration - [ ] Research HTML5 features you haven't tried yet ### 📅 Your Week-Long HTML Journey - [ ] Complete the terrarium project assignment with semantic markup - [ ] Create an accessible webpage using ARIA labels and roles - [ ] Practice form creation with various input types - [ ] Explore HTML5 APIs like localStorage or geolocation - [ ] Study responsive HTML patterns and mobile-first design - [ ] Review other developers' HTML code for best practices ### 🌟 Your Month-Long Web Foundation - [ ] Build a portfolio website showcasing your HTML mastery - [ ] Learn HTML templating with a framework like Handlebars - [ ] Contribute to open source projects by improving HTML documentation - [ ] Master advanced HTML concepts like custom elements - [ ] Integrate HTML with CSS frameworks and JavaScript libraries - [ ] Mentor others learning HTML fundamentals ## 🎯 Your HTML Mastery Timeline ### 🛠️ Your HTML Toolkit Summary After completing this lesson, you now have: - Document Structure: Complete HTML5 foundation with proper DOCTYPE - Semantic Markup: Meaningful tags that enhance accessibility and SEO - Image Integration: Proper file organization and alt text practices - Layout Containers: Strategic use of divs with descriptive class names - Accessibility Awareness: Understanding of screen reader navigation - Modern Standards: Current HTML5 practices and deprecated tag knowledge - Project Foundation: Solid base for CSS styling and JavaScript interactivity Next Steps: Your HTML structure is ready for CSS styling! The semantic foundation you've built will make the next lesson much easier to understand. ## Assignment Practice your HTML: Build a blog mockup --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Disclaimer: This document has been translated using the AI translation service Co-op Translator. While we strive for accuracy, please be aware that automated translations may contain errors or inaccuracies. The original document in its native language should be considered the authoritative source. For critical information, professional human translation is recommended. We are not liable for any misunderstandings or misinterpretations arising from the use of this translation. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Project Part 2: Introduction to CSS
Remember how your HTML terrarium looked quite basic? CSS is where we transform that plain structure into something visually appealing. If HTML is like building the frame of a house, then CSS is everything that makes it feel like home - the paint colors, the furniture arrangement, the lighting, and how the rooms flow together. Think of how the Palace of Versailles started as a simple hunting lodge, but careful attention to decoration and layout transformed it into one of the world's most magnificent buildings. Today, we'll transform your terrarium from functional to polished. You'll learn how to position elements precisely, make layouts respond to different screen sizes, and create the visual appeal that makes websites engaging. By the end of this lesson, you'll see how strategic CSS styling can dramatically improve your project. Let's add some style to your terrarium. ## Pre-Lecture Quiz Pre-lecture quiz ## Getting Started with CSS CSS is often thought of as just "making things pretty," but it serves a much broader purpose. CSS is like being the director of a movie - you control not just how everything looks, but how it moves, responds to interaction, and adapts to different situations. Modern CSS is remarkably capable. You can write code that automatically adjusts layouts for phones, tablets, and desktop computers. You can create smooth animations that guide users' attention where needed. The results can be quite impressive when everything works together. Here's what we'll accomplish in this lesson: - Creates a complete visual design for your terrarium using modern CSS techniques - Explores fundamental concepts like the cascade, inheritance, and CSS selectors - Implements responsive positioning and layout strategies - Builds the terrarium container using CSS shapes and styling ### Prerequisite You should have completed the HTML structure for your terrarium from the previous lesson and have it ready to be styled. ### Setting Up Your CSS File Before we can start styling, we need to connect CSS to our HTML. This connection tells the browser where to find the styling instructions for our terrarium. In your terrarium folder, create a new file called style.css, then link it in your HTML document's <head> section: Here's what this code does: - Creates a connection between your HTML and CSS files - Tells the browser to load and apply the styles from style.css - Uses the rel="stylesheet" attribute to specify this is a CSS file - References the file path with href="./style.css" ## Understanding the CSS Cascade Ever wondered why CSS is called "Cascading" Style Sheets? Styles cascade down like a waterfall, and sometimes they conflict with each other. Consider how military command structures work - a general order might say "all troops wear green," but a specific order to your unit might say "wear dress blues for the ceremony." The more specific instruction takes precedence. CSS follows similar logic, and understanding this hierarchy makes debugging much more manageable. ### Experimenting with Cascade Priority Let's see the cascade in action by creating a style conflict. First, add an inline style to your <h1> tag: What this code does: - Applies a red color directly to the <h1> element using inline styling - Uses the style attribute to embed CSS directly in the HTML - Creates the highest priority style rule for this specific element Next, add this rule to your style.css file: In the above, we've: - Defined a CSS rule that targets all <h1> elements - Set the text color to blue using an external stylesheet - Created a lower priority rule compared to inline styles ✅ Knowledge Check: Which color displays in your web app? Why does that color win? Can you think of scenarios where you might want to override styles? ## CSS Inheritance in Action CSS inheritance works like genetics - elements inherit certain properties from their parent elements. If you set the font family on the body element, all text inside automatically uses that same font. It's similar to how the Habsburg family's distinctive jawline appeared across generations without being specified for each individual. However, not everything gets inherited. Text styles like fonts and colors do inherit, but layout properties like margins and borders do not. Just as children might inherit physical traits but not their parents' fashion choices. ### Observing Font Inheritance Let's see inheritance in action by setting a font family on the <body> element: Breaking down what happens here: - Sets the font family for the entire page by targeting the <body> element - Uses a font stack with fallback options for better browser compatibility - Applies modern system fonts that look great across different operating systems - Ensures all child elements inherit this font unless specifically overridden Open your browser's developer tools (F12), navigate to the Elements tab, and inspect your <h1> element. You'll see that it inherits the font family from the body: ✅ Experiment Time: Try setting other inheritable properties on the <body> like color, line-height, or text-align. What happens to your heading and other elements? ### 🔄 Pedagogical Check-in CSS Foundation Understanding: Before moving to selectors, ensure you can: - ✅ Explain the difference between cascade and inheritance - ✅ Predict which style will win in a specificity conflict - ✅ Identify which properties inherit from parent elements - ✅ Connect CSS files to HTML properly Quick Test: If you have these styles, what color will an <h1> inside a <div class="special"> be? Answer: Red (element selector directly targets h1) ## Mastering CSS Selectors CSS selectors are your way of targeting specific elements for styling. They work like giving precise directions - instead of saying "the house," you might say "the blue house with the red door on Maple Street." CSS provides different ways to be specific, and choosing the right selector is like choosing the appropriate tool for the task. Sometimes you need to style every door in the neighborhood, and sometimes just one specific door. ### Element Selectors (Tags) Element selectors target HTML elements by their tag name. They're perfect for setting base styles that apply broadly across your page: Understanding these styles: - Sets consistent typography across the entire page with the body selector - Removes default browser margins and padding for better control - Styles all heading elements with color, alignment, and spacing - Uses rem units for scalable, accessible font sizing While element selectors work well for general styling, you'll need more specific selectors to style individual components like the plants in your terrarium. ### ID Selectors for Unique Elements ID selectors use the # symbol and target elements with specific id attributes. Since IDs must be unique on a page, they're perfect for styling individual, special elements like our left and right plant containers. Let's create the styling for our terrarium's side containers where the plants will live: Here's what this code accomplishes: - Positions containers at the far left and right edges using absolute positioning - Uses vh (viewport height) units for responsive height that adapts to screen size - Applies box-sizing: border-box so padding is included in the total width - Removes unnecessary px units from zero values for cleaner code - Sets a subtle background color that's easier on the eyes than stark gray ✅ Code Quality Challenge: Notice how this CSS violates the DRY (Don't Repeat Yourself) principle. Can you refactor it using both an ID and a class? Improved approach: ### Class Selectors for Reusable Styles Class selectors use the . symbol and are perfect when you want to apply the same styles to multiple elements. Unlike IDs, classes can be reused throughout your HTML, making them ideal for consistent styling patterns. In our terrarium, each plant needs similar styling but also needs individual positioning. We'll use a combination of classes for shared styles and IDs for unique positioning. Here's the HTML structure for each plant: Key elements explained: - Uses class="plant-holder" for consistent container styling across all plants - Applies class="plant" for shared image styling and behavior - Includes unique id="plant1" for individual positioning and JavaScript interaction - Provides descriptive alt text for screen reader accessibility Now add these styles to your style.css file: Breaking down these styles: - Creates relative positioning for the plant holder to establish a positioning context - Sets each plant holder to 13% height, ensuring all plants fit vertically without scrolling - Shifts holders slightly left to better center plants within their containers - Allows plants to scale responsively with max-width and max-height properties - Uses z-index to layer plants above other elements in the terrarium - Adds a subtle hover effect with CSS transitions for better user interaction ✅ Critical Thinking: Why do we need both .plant-holder and .plant selectors? What would happen if we tried to use just one? ## Understanding CSS Positioning CSS positioning is like being the stage director for a play - you direct where every actor stands and how they move around the stage. Some actors follow the standard formation, while others need specific positioning for dramatic effect. Once you understand positioning, many layout challenges become manageable. Need a navigation bar that stays at the top while users scroll? Positioning handles that. Want a tooltip that appears at a specific location? That's positioning too. ### The Five Position Values ### Positioning in Our Terrarium Our terrarium uses a strategic combination of positioning types to create the desired layout: Understanding the positioning strategy: - Absolute containers are removed from normal document flow and pinned to screen edges - Relative plant holders create a positioning context while staying in document flow - Absolute plants can be positioned precisely within their relative containers - This combination allows plants to stack vertically while being individually positionable ✅ Experiment Time: Try changing the positioning values and observe the results: - What happens if you change .container from absolute to relative? - How does the layout change if .plant-holder uses absolute instead of relative? - What occurs when you switch .plant to relative positioning? ### 🔄 Pedagogical Check-in CSS Positioning Mastery: Pause to verify your understanding: - ✅ Can you explain why plants need absolute positioning for drag-and-drop? - ✅ Do you understand how relative containers create positioning context? - ✅ Why do the side containers use absolute positioning? - ✅ What would happen if you removed position declarations entirely? Real-World Connection: Think about how CSS positioning mirrors real-world layout: - Static: Books on a shelf (natural order) - Relative: Moving a book slightly but keeping its spot - Absolute: Placing a bookmark at an exact page number - Fixed: A sticky note that stays visible as you flip pages ## Building the Terrarium with CSS Now we'll build a glass jar using only CSS - no images or graphics software required. Creating realistic-looking glass, shadows, and depth effects using positioning and transparency demonstrates CSS's visual capabilities. This technique mirrors how architects in the Bauhaus movement used simple geometric forms to create complex, beautiful structures. Once you understand these principles, you'll recognize the CSS techniques behind many web designs. ### Creating the Glass Jar Components Let's build the terrarium jar piece by piece. Each part uses absolute positioning and percentage-based sizing for responsive design: Understanding the terrarium construction: - Uses percentage-based dimensions for responsive scaling across all screen sizes - Positions elements absolutely to stack and align them precisely - Applies different opacity values to create the glass transparency effect - Implements z-index layering so plants appear inside the jar - Adds subtle box-shadow and refined border-radius for more realistic appearance ### Responsive Design with Percentages Notice how all dimensions use percentages rather than fixed pixel values: Why this matters: - Ensures the terrarium scales proportionally on any screen size - Maintains the visual relationships between jar components - Provides a consistent experience from mobile phones to large desktop monitors - Allows the design to adapt without breaking the visual layout ### CSS Units in Action We're using rem units for border-radius, which scale relative to the root font size. This creates more accessible designs that respect user font preferences. Learn more about CSS relative units in the official specification. ✅ Visual Experimentation: Try modifying these values and observe the effects: - Change the jar opacity from 0.5 to 0.8 – how does this affect the glass appearance? - Adjust the dirt color from #3a241d to #8B4513 – what visual impact does this have? - Modify the z-index of the dirt to 2 – what happens to the layering? ### 🔄 Pedagogical Check-in CSS Visual Design Understanding: Confirm your grasp of visual CSS: - ✅ How do percentage-based dimensions create responsive design? - ✅ Why does opacity create the glass transparency effect? - ✅ What role does z-index play in layering elements? - ✅ How do border-radius values create the jar shape? Design Principle: Notice how we're building complex visuals from simple shapes: 1. Rectangles → Rounded rectangles → Jar components 2. Flat colors → Opacity → Glass effect 3. Individual elements → Layered composition → 3D appearance --- ## GitHub Copilot Agent Challenge 🚀 Use the Agent mode to complete the following challenge: Description: Create a CSS animation that makes the terrarium plants gently sway back and forth, simulating a natural breeze effect. This will help you practice CSS animations, transforms, and keyframes while enhancing the visual appeal of your terrarium. Prompt: Add CSS keyframe animations to make the plants in the terrarium sway gently from side to side. Create a swaying animation that rotates each plant slightly (2-3 degrees) left and right with a duration of 3-4 seconds, and apply it to the .plant class. Make sure the animation loops infinitely and has an easing function for natural movement. Learn more about agent mode here. ## 🚀 Challenge: Adding Glass Reflections Ready to enhance your terrarium with realistic glass reflections? This technique will add depth and realism to the design. You'll create subtle highlights that simulate how light reflects off glass surfaces. This approach is similar to how Renaissance painters like Jan van Eyck used light and reflection to make painted glass appear three-dimensional. Here's what you're aiming for: Your challenge: - Create subtle white or light-colored oval shapes for the glass reflections - Position them strategically on the left side of the jar - Apply appropriate opacity and blur effects for realistic light reflection - Use border-radius to create organic, bubble-like shapes - Experiment with gradients or box-shadows for enhanced realism ## Post-Lecture Quiz Post-lecture quiz ## Expand Your CSS Knowledge CSS can feel complex initially, but understanding these core concepts provides a solid foundation for more advanced techniques. Your next CSS learning areas: - Flexbox - simplifies alignment and distribution of elements - CSS Grid - provides powerful tools for creating complex layouts - CSS Variables - reduces repetition and improves maintainability - Responsive design - ensures sites work well across different screen sizes ### Interactive Learning Resources Practice these concepts with these engaging, hands-on games: - 🐸 Flexbox Froggy - Master Flexbox through fun challenges - 🌱 Grid Garden - Learn CSS Grid by growing virtual carrots - 🎯 CSS Battle - Test your CSS skills with coding challenges ### Additional Learning For comprehensive CSS fundamentals, complete this Microsoft Learn module: Style your HTML app with CSS ### ⚡ What You Can Do in the Next 5 Minutes - [ ] Open DevTools and inspect CSS styles on any website using the Elements panel - [ ] Create a simple CSS file and link it to an HTML page - [ ] Try changing colors using different methods: hex, RGB, and named colors - [ ] Practice the box model by adding padding and margin to a div ### 🎯 What You Can Accomplish This Hour - [ ] Complete the post-lesson quiz and review CSS fundamentals - [ ] Style your HTML page with fonts, colors, and spacing - [ ] Create a simple layout using flexbox or grid - [ ] Experiment with CSS transitions for smooth effects - [ ] Practice responsive design with media queries ### 📅 Your Week-Long CSS Adventure - [ ] Complete the terrarium styling assignment with creative flair - [ ] Master CSS Grid by building a photo gallery layout - [ ] Learn CSS animations to bring your designs to life - [ ] Explore CSS preprocessors like Sass or Less - [ ] Study design principles and apply them to your CSS - [ ] Analyze and recreate interesting designs you find online ### 🌟 Your Month-Long Design Mastery - [ ] Build a complete responsive website design system - [ ] Learn CSS-in-JS or utility-first frameworks like Tailwind - [ ] Contribute to open source projects with CSS improvements - [ ] Master advanced CSS concepts like CSS custom properties and containment - [ ] Create reusable component libraries with modular CSS - [ ] Mentor others learning CSS and share design knowledge ## 🎯 Your CSS Mastery Timeline ### 🛠️ Your CSS Toolkit Summary After completing this lesson, you now have: - Cascade Understanding: How styles inherit and override each other - Selector Mastery: Precise targeting with elements, classes, and IDs - Positioning Skills: Strategic element placement and layering - Visual Design: Creating glass effects, shadows, and transparency - Responsive Techniques: Percentage-based layouts that adapt to any screen - Code Organization: Clean, maintainable CSS structure - Modern Practices: Using relative units and accessible design patterns Next Steps: Your terrarium now has both structure (HTML) and style (CSS). The final lesson will add interactivity with JavaScript! ## Assignment CSS Refactoring --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Disclaimer: This document has been translated using the AI translation service Co-op Translator. While we strive for accuracy, please note that automated translations may contain errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, a professional human translation is recommended. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Proyecto Terrario Parte 1: Introducción a HTML
HTML, o Lenguaje de Marcado de Hipertexto, es la base de cada sitio web que hayas visitado. Piensa en HTML como el esqueleto que da estructura a las páginas web: define dónde va el contenido, cómo se organiza y qué representa cada pieza. Mientras que CSS más adelante "vestirá" tu HTML con colores y diseños, y JavaScript le dará vida con interactividad, HTML proporciona la estructura esencial que hace posible todo lo demás. En esta lección, crearás la estructura HTML para una interfaz virtual de terrario. Este proyecto práctico te enseñará conceptos fundamentales de HTML mientras construyes algo visualmente atractivo. Aprenderás a organizar contenido usando elementos semánticos, trabajar con imágenes y crear la base para una aplicación web interactiva. Al final de esta lección, tendrás una página HTML funcional que muestra imágenes de plantas organizadas en columnas, lista para ser estilizada en la próxima lección. No te preocupes si se ve básica al principio, eso es exactamente lo que HTML debería hacer antes de que CSS añada el acabado visual. ## Cuestionario Previo a la Clase Cuestionario previo a la clase ## Configurando Tu Proyecto Antes de sumergirnos en el código HTML, vamos a configurar un espacio de trabajo adecuado para tu proyecto de terrario. Crear una estructura de archivos organizada desde el inicio es un hábito crucial que te servirá durante todo tu camino en el desarrollo web. ### Tarea: Crea La Estructura de Tu Proyecto Crearás una carpeta dedicada para tu proyecto terrario y agregarás tu primer archivo HTML. Aquí tienes dos formas de hacerlo: Opción 1: Usando Visual Studio Code 1. Abre Visual Studio Code 2. Haz clic en "Archivo" → "Abrir carpeta" o usa Ctrl+K, Ctrl+O (Windows/Linux) o Cmd+K, Cmd+O (Mac) 3. Crea una nueva carpeta llamada terrarium y selecciónala 4. En el panel Explorador, haz clic en el ícono "Nuevo archivo" 5. Nombra tu archivo index.html Opción 2: Usando comandos en la Terminal Esto es lo que hacen estos comandos: - Crea un nuevo directorio llamado terrarium para tu proyecto - Navega dentro del directorio terrarium - Crea un archivo vacío index.html - Abre el archivo en Visual Studio Code para editarlo ## Entendiendo la Estructura del Documento HTML Cada documento HTML sigue una estructura específica que los navegadores necesitan para entender y mostrar correctamente. Piensa en esta estructura como una carta formal: tiene elementos requeridos en un orden particular que ayudan al destinatario (en este caso, el navegador) a procesar el contenido adecuadamente. Comencemos agregando los fundamentos esenciales que todo documento HTML necesita. ### La Declaración DOCTYPE y el Elemento Raíz Las primeras dos líneas de cualquier archivo HTML sirven como la "introducción" del documento para el navegador: Entendiendo qué hace este código: - Declara el tipo de documento como HTML5 usando <!DOCTYPE html> - Crea el elemento raíz <html> que contendrá todo el contenido de la página - Establece estándares web modernos para un renderizado adecuado en navegadores - Garantiza una visualización consistente en diferentes navegadores y dispositivos ### 🔄 Chequeo Pedagógico Pausa y Reflexiona: Antes de continuar, asegúrate de entender: - ✅ Por qué cada documento HTML necesita una declaración DOCTYPE - ✅ Qué contiene el elemento raíz <html> - ✅ Cómo esta estructura ayuda a los navegadores a renderizar páginas correctamente Autoevaluación Rápida: ¿Puedes explicar con tus propias palabras qué significa "renderizado conforme a estándares"? ## Agregando Metadatos Esenciales al Documento La sección <head> de un documento HTML contiene información crucial que los navegadores y motores de búsqueda necesitan, pero que los visitantes no ven directamente en la página. Piensa en ella como la información "detrás de escena" que ayuda a tu página web a funcionar correctamente y a aparecer bien en diferentes dispositivos y plataformas. Estos metadatos indican a los navegadores cómo mostrar tu página, qué codificación de caracteres usar y cómo manejar distintos tamaños de pantalla; todo esto es esencial para crear páginas web profesionales y accesibles. ### Tarea: Agrega el Head del Documento Inserta esta sección <head> entre tus etiquetas de apertura y cierre <html>: Desglose de lo que logra cada elemento: - Establece el título de la página que aparece en las pestañas del navegador y resultados de búsqueda - Especifica la codificación UTF-8 para mostrar el texto correctamente en todo el mundo - Asegura compatibilidad con versiones modernas de Internet Explorer - Configura el diseño responsivo al definir el viewport para ajustarse al ancho del dispositivo - Controla el nivel inicial de zoom para mostrar contenido en su tamaño natural ## Construyendo el Cuerpo del Documento El elemento <body> contiene todo el contenido visible de tu página web — todo lo que los usuarios verán e interactuarán. Mientras que la sección <head> daba instrucciones al navegador, la sección <body> contiene el contenido real: texto, imágenes, botones y otros elementos que crean tu interfaz de usuario. Agreguemos la estructura del body y entendamos cómo las etiquetas HTML trabajan juntas para crear contenido significativo. ### Entendiendo la Estructura de Etiquetas HTML HTML usa etiquetas pareadas para definir elementos. La mayoría tienen una etiqueta de apertura como <p> y una etiqueta de cierre como </p>, con contenido intermedio: <p>¡Hola, mundo!</p>. Esto crea un elemento párrafo que contiene el texto "¡Hola, mundo!". ### Tarea: Agrega el Elemento Body Actualiza tu archivo HTML para incluir el elemento <body>: Esto es lo que proporciona esta estructura completa: - Establece el marco básico del documento HTML5 - Incluye metadatos esenciales para un renderizado adecuado en navegadores - Crea un cuerpo vacío listo para tu contenido visible - Sigue las mejores prácticas modernas de desarrollo web Ahora estás listo para añadir los elementos visibles de tu terrario. Usaremos elementos <div> como contenedores para organizar diferentes secciones de contenido, y elementos <img> para mostrar las imágenes de las plantas. ### Trabajando con Imágenes y Contenedores de Diseño Las imágenes son especiales en HTML porque usan etiquetas "autocerradas". A diferencia de elementos como <p></p> que envuelven contenido, la etiqueta <img> contiene toda la información necesaria dentro de la propia etiqueta usando atributos como src para la ruta del archivo de imagen y alt para la accesibilidad. Antes de agregar imágenes a tu HTML, necesitarás organizar tus archivos del proyecto correctamente creando una carpeta de imágenes y añadiendo los gráficos de plantas. Primero, configura tus imágenes: 1. Crea una carpeta llamada images dentro de la carpeta de tu proyecto terrario 2. Descarga las imágenes de plantas desde la carpeta solución (14 imágenes de plantas en total) 3. Copia todas las imágenes de plantas en tu nueva carpeta images ### Tarea: Crea el Diseño para Mostrar las Plantas Ahora añade las imágenes de las plantas organizadas en dos columnas entre tus etiquetas <body></body>: Paso a paso, esto es lo que ocurre en este código: - Crea un contenedor principal de la página con id="page" para contener todo el contenido - Establece dos contenedores para columnas: left-container y right-container - Organiza 7 plantas en la columna izquierda y 7 plantas en la columna derecha - Envuelve cada imagen de planta en un div plant-holder para posicionamiento individual - Aplica nombres de clase consistentes para estilos CSS en la próxima lección - Asigna IDs únicas a cada imagen de planta para interacción con JavaScript después - Incluye rutas correctas apuntando a la carpeta de imágenes ### 🔄 Chequeo Pedagógico Entendiendo la Estructura: Tómate un momento para revisar la estructura HTML: - ✅ ¿Puedes identificar los contenedores principales en tu diseño? - ✅ ¿Entiendes por qué cada imagen tiene un ID único? - ✅ ¿Cómo describirías el propósito de los divs plant-holder? Inspección Visual: Abre tu archivo HTML en un navegador. Debes ver: - Una lista básica de imágenes de plantas - Imágenes organizadas en dos columnas - Diseño simple y sin estilos Recuerda: ¡Esta apariencia sencilla es exactamente cómo HTML debe verse antes de aplicar estilos CSS! Con este marcado agregado, las plantas aparecerán en pantalla, aunque no se verán pulidas aún — eso es tarea de CSS en la próxima lección. Por ahora, tienes una sólida base HTML que organiza correctamente tu contenido y sigue las mejores prácticas de accesibilidad. ## Usando HTML Semántico para la Accesibilidad HTML semántico significa elegir elementos HTML según su significado y propósito, no solo su apariencia. Cuando usas marcado semántico, comunicas la estructura y el sentido de tu contenido a navegadores, motores de búsqueda y tecnologías de asistencia como lectores de pantalla. Este enfoque hace tus sitios más accesibles para usuarios con discapacidades y ayuda a los motores de búsqueda a entender mejor tu contenido. Es un principio fundamental del desarrollo web moderno que crea mejores experiencias para todos. ### Agregando un Título Semántico a la Página Vamos a agregar un encabezado apropiado para tu página de terrario. Inserta esta línea justo después de tu etiqueta de apertura <body>: Por qué importa el marcado semántico: - Ayuda a los lectores de pantalla a navegar y entender la estructura de la página - Mejora la optimización para motores de búsqueda (SEO) al clarificar la jerarquía del contenido - Aumenta la accesibilidad para usuarios con discapacidades visuales o cognitivas - Crea mejores experiencias de usuario en todos los dispositivos y plataformas - Sigue estándares web y mejores prácticas para desarrollo profesional Ejemplos de elecciones semánticas vs. no semánticas: ## Creando el Contenedor del Terrario Ahora añadamos la estructura HTML para el terrario mismo — el contenedor de vidrio donde eventualmente se colocarán las plantas. Esta sección demuestra un concepto importante: HTML proporciona estructura, pero sin estilos CSS estos elementos aún no serán visibles. El marcado del terrario usa nombres de clase descriptivos que harán que el estilo CSS sea intuitivo y mantenible en la próxima lección. ### Tarea: Agrega la Estructura del Terrario Inserta este marcado antes de la última etiqueta </div> (antes de la etiqueta de cierre del contenedor de la página): Entendiendo esta estructura del terrario: - Crea un contenedor principal de terrario con un ID único para el estilo - Define elementos separados para cada componente visual (parte superior, paredes, tierra, parte inferior) - Incluye elementos anidados para efectos de reflexión en el vidrio (elementos brillantes) - Usa nombres de clases descriptivos que indiquen claramente la función de cada elemento - Prepara la estructura para el estilo CSS que creará la apariencia del terrario de vidrio ### 🔄 Chequeo Pedagógico Dominio de la Estructura HTML: Antes de avanzar, asegúrate de que puedes: - ✅ Explicar la diferencia entre la estructura HTML y la apariencia visual - ✅ Identificar elementos HTML semánticos y no semánticos - ✅ Describir cómo una marcación adecuada beneficia la accesibilidad - ✅ Reconocer la estructura completa del árbol del documento Pon a prueba tu comprensión: Intenta abrir tu archivo HTML en un navegador con JavaScript deshabilitado y sin CSS. ¡Esto te muestra la pura estructura semántica que has creado! --- ## Desafío del Agente GitHub Copilot Usa el modo Agente para completar el siguiente desafío: Descripción: Crea una estructura HTML semántica para una sección de guía de cuidado de plantas que pueda añadirse al proyecto del terrario. Instrucción: Crea una sección HTML semántica que incluya un encabezado principal "Guía de Cuidado de Plantas", tres subsecciones con los encabezados "Riego", "Requisitos de Luz" y "Cuidado del Suelo", cada una con un párrafo de información sobre el cuidado de plantas. Usa etiquetas HTML semánticas correctas como <section>, <h2>, <h3>, y <p> para estructurar el contenido adecuadamente. Aprende más sobre el modo agente aquí. ## Desafío Explorar Historia de HTML Aprendiendo sobre la evolución web HTML ha evolucionado significativamente desde que Tim Berners-Lee creó el primer navegador web en el CERN en 1990. Algunas etiquetas antiguas como <marquee> ahora están obsoletas porque no funcionan bien con los estándares modernos de accesibilidad ni con los principios de diseño responsivo. Prueba este experimento: 1. Envuelve temporalmente tu título <h1> en una etiqueta <marquee>: <marquee><h1>Mi Terrario</h1></marquee> 2. Abre tu página en un navegador y observa el efecto de desplazamiento 3. Considera por qué esta etiqueta fue desaconsejada (pista: piensa en la experiencia del usuario y accesibilidad) 4. Elimina la etiqueta <marquee> y regresa a una marcación semántica Preguntas para reflexionar: - ¿Cómo podría afectar un título desplazante a usuarios con discapacidades visuales o sensibilidad al movimiento? - ¿Qué técnicas modernas de CSS podrían lograr efectos visuales similares de forma más accesible? - ¿Por qué es importante usar estándares web actuales en lugar de elementos obsoletos? Explora más sobre los elementos HTML obsoletos y desaconsejados para entender cómo los estándares web evolucionan para mejorar la experiencia del usuario. ## Quiz Post-Clase Quiz post-clase ## Repaso y Autoestudio Profundiza tu conocimiento en HTML HTML ha sido la base de la web por más de 30 años, evolucionando de un simple lenguaje de marcado de documentos a una plataforma sofisticada para construir aplicaciones interactivas. Entender esta evolución te ayuda a apreciar los estándares web modernos y tomar mejores decisiones de desarrollo. Rutas de aprendizaje recomendadas: 1. Historia y evolución de HTML - Investiga la línea de tiempo desde HTML 1.0 hasta HTML5 - Explora por qué ciertas etiquetas fueron desaconsejadas (accesibilidad, optimización móvil, mantenibilidad) - Investiga características emergentes y propuestas de HTML 2. Profundización en HTML semántico - Estudia la lista completa de elementos semánticos HTML5 - Practica identificar cuándo usar <article>, <section>, <aside>, y <main> - Aprende sobre atributos ARIA para mejorar la accesibilidad 3. Desarrollo web moderno - Explora cómo construir sitios web responsivos en Microsoft Learn - Entiende cómo HTML se integra con CSS y JavaScript - Aprende sobre mejores prácticas de rendimiento web y SEO Preguntas para reflexionar: - ¿Qué etiquetas HTML desaconsejadas descubriste y por qué fueron eliminadas? - ¿Qué nuevas características HTML se están proponiendo para futuras versiones? - ¿Cómo contribuye el HTML semántico a la accesibilidad web y SEO? ### ⚡ Lo que puedes hacer en los próximos 5 minutos - [ ] Abre las DevTools (F12) e inspecciona la estructura HTML de tu sitio web favorito - [ ] Crea un archivo HTML simple con etiquetas básicas: <h1>, <p>, y <img> - [ ] Valida tu HTML usando el validador HTML del W3C en línea - [ ] Intenta añadir un comentario a tu HTML usando <!-- comentario --> ### 🎯 Lo que puedes lograr esta hora - [ ] Completa el quiz post-lección y repasa conceptos de HTML semántico - [ ] Construye una página web sencilla sobre ti usando una estructura HTML correcta - [ ] Experimenta con diferentes niveles de encabezados y etiquetas de formato de texto - [ ] Añade imágenes y enlaces para practicar la integración multimedia - [ ] Investiga características de HTML5 que aún no hayas probado ### 📅 Tu viaje semanal con HTML - [ ] Completa el proyecto del terrario con marcación semántica - [ ] Crea una página accesible usando etiquetas y roles ARIA - [ ] Practica la creación de formularios con diferentes tipos de entrada - [ ] Explora APIs de HTML5 como localStorage o geolocalización - [ ] Estudia patrones HTML responsivos y diseño mobile-first - [ ] Revisa el código HTML de otros desarrolladores para mejores prácticas ### 🌟 Tu base web mensual - [ ] Construye un portafolio que muestre tu dominio de HTML - [ ] Aprende plantillas HTML con un framework como Handlebars - [ ] Contribuye a proyectos open source mejorando documentación HTML - [ ] Domina conceptos avanzados como elementos personalizados en HTML - [ ] Integra HTML con frameworks CSS y bibliotecas JavaScript - [ ] Mentorea a otros que están aprendiendo fundamentos de HTML ## 🎯 Tu cronograma para dominar HTML ### 🛠️ Resumen de tu kit de herramientas HTML Después de completar esta lección, ahora tienes: - Estructura de Documento: Fundamentos HTML5 completos con el DOCTYPE correcto - Marcado Semántico: Etiquetas significativas que mejoran la accesibilidad y SEO - Integración de Imágenes: Organización adecuada de archivos y prácticas de texto alternativo - Contenedores de Disposición: Uso estratégico de divs con nombres de clases descriptivos - Conciencia de Accesibilidad: Entendimiento de la navegación para lectores de pantalla - Estándares Modernos: Prácticas actuales de HTML5 y conocimiento de etiquetas desaconsejadas - Base de Proyecto: Sólida base para el estilo CSS y la interactividad con JavaScript Próximos pasos: ¡Tu estructura HTML está lista para el estilo CSS! La base semántica que construiste facilitará mucho la próxima lección. ## Tarea Practica tu HTML: Construye un prototipo de blog --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Descargo de responsabilidad: Este documento ha sido traducido utilizando el servicio de traducción automática Co-op Translator. Aunque nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o inexactitudes. El documento original en su idioma nativo debe considerarse la fuente autorizada. Para información crítica, se recomienda la traducción profesional realizada por humanos. No nos hacemos responsables de ningún malentendido o interpretación errónea que surja del uso de esta traducción. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Proyecto Terrario Parte 2: Introducción a CSS
¿Recuerdas cómo se veía tu terrario HTML bastante básico? CSS es donde transformamos esa estructura simple en algo visualmente atractivo. Si HTML es como construir el armazón de una casa, entonces CSS es todo lo que hace que se sienta como un hogar: los colores de pintura, la disposición de los muebles, la iluminación y cómo se conectan las habitaciones. Piensa en cómo el Palacio de Versalles empezó como una simple cabaña de caza, pero la atención cuidadosa a la decoración y la distribución lo transformó en uno de los edificios más magníficos del mundo. Hoy, transformaremos tu terrario de funcional a pulido. Aprenderás cómo posicionar elementos con precisión, hacer que los diseños respondan a diferentes tamaños de pantalla y crear el atractivo visual que hace que los sitios web sean cautivadores. Al final de esta lección, verás cómo un estilo CSS estratégico puede mejorar dramáticamente tu proyecto. Vamos a darle estilo a tu terrario. ## Cuestionario Previo a la Lección Cuestionario previo a la lección ## Primeros Pasos con CSS CSS a menudo se piensa solo como "hacer que las cosas se vean bonitas", pero cumple un propósito mucho más amplio. CSS es como ser el director de una película: controlas no solo cómo se ve todo, sino cómo se mueve, responde a las interacciones y se adapta a diferentes situaciones. El CSS moderno es notablemente capaz. Puedes escribir código que ajusta automáticamente los diseños para teléfonos, tabletas y computadoras de escritorio. Puedes crear animaciones suaves que guían la atención de los usuarios donde se necesita. Los resultados pueden ser bastante impresionantes cuando todo funciona junto. Esto es lo que lograremos en esta lección: - Crea un diseño visual completo para tu terrario usando técnicas modernas de CSS - Explora conceptos fundamentales como la cascada, herencia y selectores CSS - Implementa estrategias responsivas de posicionamiento y diseño - Construye el contenedor del terrario usando formas y estilos CSS ### Requisito previo Debes haber completado la estructura HTML de tu terrario en la lección anterior y tenerla lista para estilizar. ### Configurando tu Archivo CSS Antes de empezar a estilizar, necesitamos conectar CSS a nuestro HTML. Esta conexión le dice al navegador dónde encontrar las instrucciones de estilo para nuestro terrario. En tu carpeta del terrario, crea un nuevo archivo llamado style.css, luego enlázalo en la sección <head> de tu documento HTML: Esto hace el código: - Crea una conexión entre tus archivos HTML y CSS - Indica al navegador que cargue y aplique los estilos de style.css - Usa el atributo rel="stylesheet" para especificar que es un archivo CSS - Referencia la ruta del archivo con href="./style.css" ## Comprendiendo la Cascada CSS ¿Alguna vez te has preguntado por qué CSS se llama Hojas de Estilo en Cascada? Los estilos caen como una cascada y a veces entran en conflicto entre sí. Considera cómo funcionan las estructuras de mando militar: una orden general podría decir "todas las tropas usen verde", pero una orden específica para tu unidad podría decir "usen uniforme azul para la ceremonia". La instrucción más específica tiene precedencia. CSS sigue una lógica similar, y comprender esta jerarquía hace que depurar sea mucho más manejable. ### Experimentando con la Prioridad de la Cascada Veamos la cascada en acción creando un conflicto de estilos. Primero, añade un estilo inline a tu etiqueta <h1>: Esto hace el código: - Aplica un color rojo directamente al elemento <h1> usando estilo inline - Usa el atributo style para incrustar CSS directamente en el HTML - Crea la regla de estilo con la prioridad más alta para este elemento específico Luego, agrega esta regla a tu archivo style.css: En el ejemplo anterior: - Definimos una regla CSS que apunta a todos los elementos <h1> - Establecemos el color del texto a azul usando una hoja de estilos externa - Creamos una regla con prioridad más baja comparada con estilos inline ✅ Chequeo de Conocimiento: ¿Qué color se muestra en tu aplicación web? ¿Por qué gana ese color? ¿Puedes pensar en escenarios donde quisieras sobreescribir estilos? ## Herencia CSS en Acción La herencia CSS funciona como la genética: los elementos heredan ciertas propiedades de sus elementos padres. Si estableces la familia tipográfica en el elemento body, todo el texto dentro usa automáticamente esa misma fuente. Es similar a cómo la mandíbula distintiva de la familia Habsburgo apareció en generaciones sin ser especificada para cada individuo. Sin embargo, no todo se hereda. Los estilos de texto como fuentes y colores sí se heredan, pero propiedades de diseño como márgenes y bordes no. Al igual que los hijos pueden heredar rasgos físicos pero no las elecciones de moda de sus padres. ### Observando la Herencia de la Fuente Veamos la herencia en acción estableciendo una familia tipográfica en el elemento <body>: Desglose de lo que sucede aquí: - Establece la familia tipográfica para toda la página apuntando al elemento <body> - Utiliza una pila de fuentes con opciones de respaldo para mejor compatibilidad de navegadores - Aplica fuentes modernas del sistema que lucen bien en distintos sistemas operativos - Garantiza que todos los elementos hijos hereden esta fuente a menos que se sobrescriba específicamente Abre las herramientas de desarrollo de tu navegador (F12), navega a la pestaña de Elementos, e inspecciona tu <h1>. Verás que hereda la familia tipográfica del body: ✅ Tiempo de Experimento: Prueba establecer otras propiedades heredables en el <body> como color, line-height o text-align. ¿Qué pasa con tu encabezado y otros elementos? ### 🔄 Chequeo Pedagógico Comprensión de la Base de CSS: Antes de pasar a los selectores, asegúrate de que puedes: - ✅ Explicar la diferencia entre cascada y herencia - ✅ Predecir cuál estilo ganará en un conflicto de especificidad - ✅ Identificar qué propiedades se heredan de elementos padres - ✅ Conectar archivos CSS correctamente al HTML Prueba Rápida: Si tienes estos estilos, ¿de qué color será un <h1> dentro de un <div class="special">? Respuesta: Rojo (el selector de elemento apunta directamente a h1) ## Dominando los Selectores CSS Los selectores CSS son tu forma de apuntar a elementos específicos para estilizar. Funcionan como dar direcciones precisas: en lugar de decir "la casa", dirías "la casa azul con la puerta roja en Maple Street". CSS provee diferentes formas de ser específico, y elegir el selector correcto es como elegir la herramienta apropiada para la tarea. A veces necesitas estilizar cada puerta del vecindario, y otras solo una puerta específica. ### Selectores de Elemento (Etiquetas) Los selectores de elemento apuntan a los elementos HTML por su nombre de etiqueta. Son perfectos para establecer estilos base que se aplican ampliamente en tu página: Comprendiendo estos estilos: - Establece tipografía consistente en toda la página con el selector body - Quita márgenes y rellenos predeterminados del navegador para mejor control - Estiliza todos los encabezados con color, alineación y espaciado - Usa unidades rem para tamaños de fuente escalables y accesibles Mientras los selectores de elemento funcionan bien para estilos generales, necesitarás selectores más específicos para estilizar componentes individuales como las plantas de tu terrario. ### Selectores ID para Elementos Únicos Los selectores ID usan el símbolo # y apuntan a elementos con atributos id específicos. Como los IDs deben ser únicos en la página, son perfectos para estilizar elementos individuales y especiales como los contenedores de plantas izquierdo y derecho. Creamos el estilo para los contenedores laterales de nuestro terrario donde vivirán las plantas: Esto logra este código: - Posiciona los contenedores en los extremos izquierdo y derecho usando posicionamiento absolute - Usa unidades vh (altura de ventana) para una altura responsiva que se adapta al tamaño de pantalla - Aplica box-sizing: border-box para incluir el padding en el ancho total - Elimina unidades px innecesarias en valores cero para código más limpio - Define un color de fondo sutil que es menos agresivo que un gris fuerte ✅ Desafío de Calidad de Código: Nota cómo este CSS viola el principio DRY (No te repitas). ¿Puedes refactorizarlo usando tanto un ID como una clase? Enfoque mejorado: ### Selectores de Clase para Estilos Reutilizables Los selectores de clase usan el símbolo . y son perfectos cuando quieres aplicar el mismo estilo a múltiples elementos. A diferencia de los IDs, las clases pueden usarse varias veces en tu HTML, lo que las hace ideales para patrones de estilo consistentes. En nuestro terrario, cada planta necesita un estilo similar pero también necesita posicionamiento individual. Usaremos una combinación de clases para estilos compartidos y IDs para posicionamiento único. Esta es la estructura HTML para cada planta: Elementos clave explicados: - Usa class="plant-holder" para un estilo consistente del contenedor en todas las plantas - Aplica class="plant" para el estilo e interacción compartida de las imágenes - Incluye un único id="plant1" para posicionamiento individual e interacción JavaScript - Proporciona texto alternativo descriptivo para accesibilidad en lectores de pantalla Ahora agrega estos estilos a tu archivo style.css: Desglose de estos estilos: - Crea posicionamiento relativo para el contenedor de planta y establecer el contexto de posicionamiento - Establece la altura de cada contenedor de planta en 13%, asegurando que todas las plantas quepan verticalmente sin scroll - Desplaza ligeramente los contenedores a la izquierda para centrar mejor las plantas dentro - Permite que las plantas se escalen responsivamente con propiedades max-width y max-height - Usa z-index para colocar las plantas encima de otros elementos del terrario - Añade un sutil efecto hover con transiciones CSS para mejor interacción del usuario ✅ Pensamiento Crítico: ¿Por qué necesitamos ambos selectores .plant-holder y .plant? ¿Qué pasaría si intentáramos usar solo uno? ## Entendiendo el Posicionamiento CSS El posicionamiento CSS es como ser el director del escenario en una obra de teatro: decides dónde se para cada actor y cómo se mueve por el escenario. Algunos actores siguen la formación estándar, mientras que otros necesitan posicionamiento específico para un efecto dramático. Una vez que entiendes el posicionamiento, muchos desafíos de diseño se vuelven manejables. ¿Necesitas una barra de navegación que se quede arriba mientras el usuario hace scroll? El posicionamiento lo maneja. ¿Quieres un tooltip que aparezca en un lugar específico? Eso también es manejo de posicionamiento. ### Los Cinco Valores de Posición ### Posicionamiento en Nuestro Terrario Nuestro terrario usa una combinación estratégica de tipos de posicionamiento para crear el diseño deseado: Entendiendo la estrategia de posicionamiento: - Contenedores absolutos están fuera del flujo normal y anclados a los bordes de la pantalla - Contenedores de plantas relativos crean un contexto de posicionamiento manteniéndose en el flujo del documento - Plantas absolutas pueden posicionarse con precisión dentro de sus contenedores relativos - Esta combinación permite que las plantas se apilen verticalmente y sean posicionables individualmente ✅ Tiempo de Experimento: Prueba cambiar los valores de posicionamiento y observa los resultados: - ¿Qué pasa si cambias .container de absolute a relative? - ¿Cómo cambia el diseño si .plant-holder usa absolute en lugar de relative? - ¿Qué ocurre cuando cambias la posición de .plant a relative? ### 🔄 Chequeo Pedagógico Dominio de Posicionamiento CSS: Pausa para verificar tu comprensión: - ✅ ¿Puedes explicar por qué las plantas necesitan posicionamiento absoluto para drag-and-drop? - ✅ ¿Entiendes cómo los contenedores relativos crean contexto de posicionamiento? - ✅ ¿Por qué los contenedores laterales usan posicionamiento absoluto? - ✅ ¿Qué pasaría si eliminaras completamente las declaraciones de posición? Conexión con el Mundo Real: Piensa en cómo el posicionamiento CSS refleja el diseño del mundo real: - Static: Libros en una estantería (orden natural) - Relative: Mover ligeramente un libro pero mantener su lugar - Absolute: Colocar un marcador en una página exacta - Fixed: Una nota adhesiva que permanece visible mientras pasas las páginas ## Construyendo el Terrario con CSS Ahora construiremos un frasco de vidrio usando solo CSS, sin imágenes ni software gráfico. Crear efectos realistas de vidrio, sombras y profundidad usando posicionamiento y transparencia demuestra las capacidades visuales de CSS. Esta técnica es similar a cómo los arquitectos del movimiento Bauhaus usaban formas geométricas simples para crear estructuras complejas y bellas. Una vez que comprendas estos principios, reconocerás las técnicas CSS detrás de muchos diseños web. ### Creando los Componentes del Frasco de Vidrio Construyamos el frasco del terrario pieza por pieza. Cada parte usa posicionamiento absoluto y tamaños basados en porcentajes para diseño responsivo: Entendiendo la construcción del terrario: - Usa dimensiones basadas en porcentajes para un escalado responsivo en todos los tamaños de pantalla - Posiciona los elementos absolutamente para apilarlos y alinearlos con precisión - Aplica distintos valores de opacidad para crear el efecto de transparencia del vidrio - Implementa capas con z-index para que las plantas aparezcan dentro del frasco - Agrega sombras sutiles y bordes redondeados refinados para una apariencia más realista ### Diseño Responsivo con Porcentajes Observa cómo todas las dimensiones usan porcentajes en lugar de valores fijos en píxeles: Por qué esto importa: - Garantiza que el terrario escale proporcionalmente en cualquier tamaño de pantalla - Mantiene las relaciones visuales entre los componentes del frasco - Proporciona una experiencia coherente desde móviles hasta grandes monitores de escritorio - Permite que el diseño se adapte sin romper el layout visual ### Unidades CSS en Acción Estamos usando unidades rem para el border-radius, que escalan en relación al tamaño de fuente raíz. Esto crea diseños más accesibles que respetan las preferencias de fuente del usuario. Aprende más sobre unidades relativas en CSS en la especificación oficial. ✅ Experimentación Visual: Intenta modificar estos valores y observa los efectos: - Cambia la opacidad del frasco de 0.5 a 0.8 – ¿cómo afecta esto la apariencia del vidrio? - Ajusta el color de la tierra de #3a241d a #8B4513 – ¿qué impacto visual tiene? - Modifica el z-index de la tierra a 2 – ¿qué ocurre con el orden de las capas? ### 🔄 Chequeo Pedagógico Comprensión Visual CSS: Confirma tu entendimiento del diseño visual en CSS: - ✅ ¿Cómo las dimensiones basadas en porcentaje crean diseño responsivo? - ✅ ¿Por qué la opacidad crea el efecto de transparencia del vidrio? - ✅ ¿Qué rol juega el z-index en la superposición de elementos? - ✅ ¿Cómo los valores de border-radius crean la forma del frasco? Principio de Diseño: Observa cómo construimos visuales complejos a partir de formas simples: 1. Rectángulos → Rectángulos redondeados → Componentes del frasco 2. Colores planos → Opacidad → Efecto vidrio 3. Elementos individuales → Composición en capas → Apariencia 3D --- ## Reto GitHub Copilot Agent 🚀 Usa el modo Agent para completar el siguiente reto: Descripción: Crea una animación CSS que haga que las plantas del terrario se muevan suavemente de un lado a otro, simulando una brisa natural. Esto te ayudará a practicar animaciones CSS, transformaciones y keyframes mientras mejoras el atractivo visual de tu terrario. Indicaciones: Añade animaciones keyframe en CSS para que las plantas del terrario se balanceen suavemente de lado a lado. Crea una animación de balanceo que rote cada planta ligeramente (2-3 grados) hacia la izquierda y derecha con una duración de 3-4 segundos, y aplícalo a la clase .plant. Asegúrate de que la animación se repita infinitamente y tenga una función de easing para un movimiento natural. Aprende más sobre modo agent aquí. ## 🚀 Reto: Agregar Reflejos al Vidrio ¿Listo para mejorar tu terrario con reflejos realistas en el vidrio? Esta técnica añadirá profundidad y realismo al diseño. Crearás reflejos sutiles que simulan cómo la luz se refleja en las superficies de vidrio. Este enfoque es similar a cómo los pintores renacentistas como Jan van Eyck usaban la luz y reflexión para dar volumen tridimensional a los vidrios pintados. Esto es lo que buscas lograr: Tu desafío: - Crear formas ovaladas sutiles blancas o de colores claros para los reflejos del vidrio - Posicionarlas estratégicamente en el lado izquierdo del frasco - Aplicar opacidad y efectos de desenfoque apropiados para reflejos realistas - Usar border-radius para crear formas orgánicas tipo burbuja - Experimentar con degradados o sombras para mayor realismo ## Quiz Posterior a la Clase Quiz posterior a la clase ## Amplía Tu Conocimiento en CSS CSS puede resultar complejo al principio, pero comprender estos conceptos básicos proporciona una base sólida para técnicas más avanzadas. Tus próximas áreas de aprendizaje CSS: - Flexbox - simplifica la alineación y distribución de elementos - CSS Grid - ofrece herramientas potentes para crear layouts complejos - Variables CSS - reduce la repetición y mejora el mantenimiento - Diseño responsivo - asegura que los sitios funcionen bien en diferentes tamaños de pantalla ### Recursos Interactivos de Aprendizaje Practica estos conceptos con estos juegos atractivos y prácticos: - 🐸 Flexbox Froggy - Domina Flexbox con desafíos divertidos - 🌱 Grid Garden - Aprende CSS Grid cultivando zanahorias virtuales - 🎯 CSS Battle - Pon a prueba tus habilidades CSS con desafíos de código ### Aprendizaje Adicional Para fundamentos completos de CSS, completa este módulo de Microsoft Learn: Estiliza tu app HTML con CSS ### ⚡ Lo que puedes hacer en los próximos 5 minutos - [ ] Abre DevTools e inspecciona estilos CSS en cualquier sitio web usando el panel Elementos - [ ] Crea un archivo CSS simple y enlázalo a una página HTML - [ ] Prueba cambiar colores usando diferentes métodos: hex, RGB y nombres de colores - [ ] Practica el modelo de caja añadiendo padding y margen a un div ### 🎯 Lo que puedes lograr en esta hora - [ ] Completa el quiz post-lección y repasa fundamentos CSS - [ ] Estiliza tu página HTML con fuentes, colores y espacios - [ ] Crea un layout simple usando flexbox o grid - [ ] Experimenta con transiciones CSS para efectos suaves - [ ] Practica diseño responsivo con media queries ### 📅 Tu aventura CSS de una semana - [ ] Completa la tarea de estilizado del terrario con creatividad - [ ] Domina CSS Grid construyendo un layout de galería de fotos - [ ] Aprende animaciones CSS para dar vida a tus diseños - [ ] Explora preprocesadores CSS como Sass o Less - [ ] Estudia principios de diseño y aplícalos a tu CSS - [ ] Analiza y recrea diseños interesantes que encuentres en línea ### 🌟 Tu dominio del diseño en un mes - [ ] Construye un sistema completo de diseño web responsivo - [ ] Aprende CSS-in-JS o frameworks utility-first como Tailwind - [ ] Contribuye a proyectos open source mejorando CSS - [ ] Domina conceptos avanzados como propiedades personalizadas y containment - [ ] Crea bibliotecas de componentes reutilizables con CSS modular - [ ] Mentoriza a otros aprendiendo CSS y comparte conocimientos de diseño ## 🎯 Tu Cronograma para Dominar CSS ### 🛠️ Resumen de tu Caja de Herramientas CSS Después de completar esta lección, ahora tienes: - Comprensión del Cascade: Cómo los estilos heredan y se sobreescriben - Dominio de Selectores: Dirección precisa con elementos, clases e IDs - Habilidades de Posicionamiento: Colocación estratégica y orden de elementos - Diseño Visual: Creación de efectos de vidrio, sombras y transparencia - Técnicas Responsivas: Layouts basados en porcentajes que se adaptan a cualquier pantalla - Organización de Código: CSS limpio y mantenible - Prácticas Modernas: Uso de unidades relativas y patrones de diseño accesibles Próximos Pasos: Tu terrario ahora tiene estructura (HTML) y estilo (CSS). ¡La lección final añadirá interactividad con JavaScript! ## Tarea Refactorización CSS --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Aviso Legal: Este documento ha sido traducido utilizando el servicio de traducción automática Co-op Translator. Aunque nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse la fuente autorizada. Para información crítica, se recomienda la traducción profesional humana. No nos responsabilizamos por malentendidos o interpretaciones erróneas derivadas del uso de esta traducción. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium projekt Osa 1: Sissejuhatus HTML-i
HTML ehk hüperteksti märgistuskeel on iga veebilehe aluseks, mida sa kunagi külastanud oled. Mõtle HTML-ile kui skeletile, mis annab veebilehtedele struktuuri – see määrab, kuhu sisu läheb, kuidas see on organiseeritud ja mida iga osa esindab. Kuigi CSS "riietab" su HTML-i hiljem värvide ja paigutustega ning JavaScript toob selle ellu interaktiivsusega, annab HTML vajaliku põhistruktuuri, mis muudab muu võimalikuks. Selles õppetükis lood HTML-struktuuri virtuaalsele terrariumiliidesele. See praktiline projekt õpetab sulle HTML-i põhimõtteid, samal ajal midagi visuaalselt köitvat ehitades. Õpid, kuidas sisu organiseerida semantiliste elementide abil, kuidas töötada piltidega ja luua alused interaktiivsele veebirakendusele. Selle õppetüki lõpuks on sul töötav HTML-leht, mis kuvab taimede pilte organiseeritud veergudes, valmis järgmiseks õppetükiks stiilimiseks. Ära muretse, kui see alguses lihtne välja näeb – just nii peabki HTML enne CSS-i visuaalset lihvi näitama. ## Ettelugemise eelküsimustik Ettelugemise eelküsimustik ## Projekti seadistamine Enne kui sukeldume HTML-i koodi, seadistame korraliku töökeskkonna sinu terrariumiprojektile. Alustades organiseeritud failistruktuuri loomine on oluline harjumus, mis teenib sind hästi kogu veebiarenduse teekonna jooksul. ### Ülesanne: Loo oma projekti struktuur Sa lood spetsiaalse kausta terrariumiprojekti jaoks ja lisad esimese HTML-faili. Siin on kaks lähenemist, mida saad kasutada: Võimalus 1: Visual Studio Code'i kasutamine 1. Ava Visual Studio Code 2. Klõpsa "Fail" → "Ava kaust" või kasuta Ctrl+K, Ctrl+O (Windows/Linux) või Cmd+K, Cmd+O (Mac) 3. Loo uus kaust nimega terrarium ja vali see 4. Avastusaknas klõpsa "Uus fail" ikoonile 5. Nyimesta oma fail nimega index.html Võimalus 2: Terminalikäskluste kasutamine Need käsud teevad järgneva: - Loovad uue kataloogi nimega terrarium sinu projekti jaoks - Sisenemisel terrariumi kataloogi - Loovad tühja index.html faili - Avavad faili Visual Studio Codes redigeerimiseks ## HTML dokumendi struktuuri mõistmine Iga HTML dokument järgib spetsiifilist struktuuri, mida brauserid vajavad, et mõista ja korrektselt kuvada. Mõtle sellele struktuurile nagu ametlikule kirjale – tal on vajalikud elemendid kindlas järjekorras, mis aitavad sisutöötlejatel (antud juhul brauseril) sisu õieti töödelda. Alustame olulise alusega, mis on vajalik iga HTML dokumendi jaoks. ### DOCTYPE deklaratsioon ja juurelement HTML-faili esimesed kaks rida toimivad dokumendi "sissejuhatusena" brauserile: Mida see kood teeb: - Deklaratsioon dokumendi tüübiks on HTML5, kasutades <!DOCTYPE html> - Luuakse juurelement <html>, mis sisaldab kogu lehe sisu - Kehtestatakse tänapäevased veebistandardid korrektseks brauseri kuvamiseks - Tagatakse ühtlane kuvamine erinevates brauserites ja seadmetes ### 🔄 Pedagoogiline vahekokkuvõte Peatu ja mõtiskle: Enne jätkamist veendu, et saad aru: - ✅ Miks igas HTML dokumendis on vaja DOCTYPE deklaratsiooni - ✅ Mida sisaldab <html> juurelement - ✅ Kuidas see struktuur aitab brauseritel lehti õigesti kuvada Kiire enesehinnang: Kas suudad oma sõnadega seletada, mida tähendab "standarditele vastav kuvamine"? ## Vajalikud dokumendi metaandmete lisamine HTML dokumendi <head> osa sisaldab olulist infot, mida brauserid ja otsingumootorid vajavad, kuid mida külastajad otse lehel ei näe. Mõtle sellele kui "tagatseeni" infole, mis aitab su veebilehel õigesti töötada ja kuvada korrektselt erinevatel seadmetel ja platvormidel. See metaandmestik ütleb brauseritele, kuidas lehte kuvada, millist märgistikku kasutada ja kuidas erinevate ekraanisuurustega toime tulla – kõik see on vajalik professionaalsete ja ligipääsetavate veebilehtede loomiseks. ### Ülesanne: Lisa dokumendi päis Lisa see <head> sektsioon oma <html> elemendi avamise ja sulgemise vahel: Mida iga element teeb: - Määrab lehe tiitli, mis ilmub brauseri vahelehtedel ja otsingutulemustes - Seab UTF-8 märgistikku tekstide korrektsel kuvamisel kogu maailmas - Tagab ühilduvuse Internet Exploreri kaasaegsete versioonidega - Konfigureerib reageeriva disaini, seadistades vaateaken (viewport) seadme laiusele - Juhtcontrolib esialgset suumimistaset, kuvades sisu loomulikus suuruses ## Dokumendi keha ülesehitamine <body> element sisaldab kogu veebilehe nähtavat sisu – kõike, mida kasutajad näevad ja millega suhtlevad. Kui <head> osa andis brauserile juhiseid, siis <body> sisaldab tegelikku sisu: teksti, pilte, nuppe ja muid elemente, mis loovad kasutajaliidese. Lisame keha struktuuri ja mõistame, kuidas HTML-tägid koos töötavad tähendusliku sisu loomiseks. ### HTML-tägi struktuuri mõistmine HTML kasutab paaristähti elementide määratlemiseks. Enamus täge on avamistäht nagu <p> ja sulgemistäht nagu </p>, mille vahele tuleb sisu: <p>Tere, maailm!</p>. See loob lõigu, mis sisaldab teksti "Tere, maailm!". ### Ülesanne: Lisa <body> element Uuenda oma HTML-faili nii, et see sisaldaks <body> elementi: Selle struktuuriga saad: - Määratleda põhilise HTML5 dokumendi raamistiku - Lisada vajalikud metaandmed korrektsel brauseri kuvamisel - Luua tühja keha, mis on valmis nähtavaks sisuks - Järgida kaasaegseid veebiarenduse parimaid tavasid Nüüd oled valmis lisama oma terrariumi nähtavad elemendid. Kasutame <div> elemente konteineritena erinevate sisuosade organiseerimiseks ja <img> elemente taimede piltide kuvamiseks. ### Töötamine piltide ja kujunduskonteineritega Pildid HTML-is on erisugused, kuna nad kasutavad "ise sulguvat" märgistust. Erinevalt elementidest nagu <p></p>, mis katavad sisu, sisaldab <img> märk see info, mida ta vajab, otse tagsis endas, kasutades atribuute nagu src pildifaili asukoha jaoks ja alt ligipääsetavuse tagamiseks. Enne piltide lisamist HTML-i pead korralikult organiseerima oma projekti failid, luues kausta piltide jaoks ja lisades taimede graafika. Kõigepealt seadista oma pildid: 1. Loo kaust nimega images oma terrariumi projekti kausta sees 2. Laadi taimepildid alla lahenduse kaustast (kokku 14 taimepilti) 3. Kopeeri kõik taimepildid uude kausta images ### Ülesanne: Loo taimede kuvamise paigutus Nüüd lisa taimepildid, organiseerituna kahe veeruna, oma <body></body> siltide vahele: Järjekorras, mis koodis toimub: - Luuakse põhikonteiner lehel ID-ga page, mis hoiab kogu sisu - Määratakse kaks veergude konteinerit: left-container ja right-container - Organiseeritakse 7 taime vasakusse ja 7 paremasse veergu - Pakendatakse iga taime pilt konteinerisse plant-holder individuaalse asukoha jaoks - Rakendatakse ühtsed klassinimed CSS stiilimiseks järgmisel õppetunnil - Määratakse iga taime pildile unikaalne ID JavaScripti jaoks hiljem - Sisaldab korrektseid failiteid, mis viitavad kaustale images ### 🔄 Pedagoogiline vahekokkuvõte Struktuuriteadmised: Võta hetk, et üle vaadata oma HTML struktuur: - ✅ Kas suudad tuvastada oma paigutuse põhilised konteinerid? - ✅ Kas mõistad, miks igal pildil on unikaalne ID? - ✅ Kuidas kirjeldaksid plant-holder div-de eesmärki? Visuaalne kontroll: Ava oma HTML fail brauseris. Sa peaksid nägema: - Lihtsat taimede piltide nimekirja - Pildid organiseeritud kaheks veeruks - Lihtsat, stiliseerimata paigutust Pane tähele: See lihtne välimus ongi see, kuidas HTML peaks enne CSS stiilimist välja nägema! Selle märgistuse lisamisega ilmuvad taimed ekraanile, kuigi veel pole need lihvitud – seda teeb järgmisel õppetunnil CSS! Praegu on sul kindel HTML-põhi, mis korrektselt organiseerib su sisu ja järgib ligipääsetavuse parimaid tavasid. ## Semantilise HTML kasutamine ligipääsetavuse jaoks Semantiline HTML tähendab HTML elementide valimist nende tähenduse ja eesmärgi põhjal, mitte ainult välimuse järgi. Semantilise märgistuse kasutamisel annad brauseritele, otsingumootoritele ja abitehnoloogiatele (näiteks ekraanilugeritele) teada oma sisu struktuurist ja tähendusest. See lähenemine teeb su veebilehed paremini ligipääsetavaks kasutajatele, kellel on puuded, ja aitab otsingumootoritel su sisu paremini mõista. See on kaasaegse veebiarenduse põhimõte, mis loob paremaid kogemusi kõigile. ### Semantilise pagunaja lisamine Lisame sinu terrariumile korraliku pealkirja. Lisa see rida kohe pärast avavat <body> märgendit: Miks semantiline märgistus on oluline: - Aitab ekraanilugeritel navigeerida ja mõista lehe struktuuri - Parandab otsingumootori optimeerimist (SEO) sisu hierarhia selgeks tegemisega - Tõstab ligipääsetavust visuaalpuudega või kognitiivsete erinevustega kasutajatele - Loodab paremaid kasutajakogemusi kõikidel seadmetel ja platvormidel - Järgib veebistandardeid ja parimaid professionaalseid praktikaid Näited semantiliste ja mitte-semantiliste valikute kohta: ## Terrariumi konteineri loomine Lisame nüüd terrariumi enda HTML struktuuri – klaaskonteineri, kuhu taimed lõpuks asetatakse. See jaotis demonstreerib olulist mõistet: HTML loob struktuuri, kuid ilma CSS stiilideta need elemendid veel nähtavad ei ole. Terrariumi märgistuses kasutatakse kirjeldavaid klassinimesid, mis muudavad CSS-i stiilimise järgmisel õppetunnil intuitiivseks ja hooldatavaks. ### Ülesanne: Lisa terrariumi struktuur Lisa see märgistus viimase </div> sildi kohale (enne lehekonteineri sulgemismärgendit): Mida see terrariumi struktuur teeb: - Luuakse peamine terrariumi konteiner, millel on unikaalne ID stiilimiseks - Määratleb eraldi elemendid iga visuaalse komponendi jaoks (ülemine, seinad, muld, alumine osa) - Sisaldab pesastatud elemente klaasi peegelduste efektide jaoks (läikivad elemendid) - Kasutab kirjeldavaid klassinimesid, mis selgelt näitavad iga elemendi eesmärki - Valmistab ette struktuuri CSS stiilimiseks, mis loob klaasterraariumi väljanägemise ### 🔄 Pedagoogiline Kontroll HTML struktuuri valdamine: Enne edasi liikumist veendu, et sa oskad: - ✅ Selgitada HTML struktuuri ja visuaalse välimuse vahet - ✅ Tuvastada semantilisi vs mitte-semantilisi HTML elemente - ✅ Kirjeldada, kuidas korrektne märgistus toetab ligipääsetavust - ✅ Tunda püha dokumentide puu struktuuri Testi oma arusaamist: Proovi avada oma HTML fail brauseris, kus on JavaScript välja lülitatud ja CSS eemaldatud. See näitab sulle loodud puhast semantilist struktuuri! --- ## GitHub Copilot Agenti Väljakutse Kasuta Agent režiimi, et täita järgmine väljakutse: Kirjeldus: Loo semantiline HTML struktuur taimehoolduse juhendile, mida saaks lisada terrariumiprojekti. Päring: Loo semantiline HTML sektsioon, mis sisaldab põhipealkirja "Taimehoolduse juhend", kolme alajaotust pealkirjadega "Kastmine", "Valguse nõuded" ja "Mulla hooldus", igaüks sisaldades lõiku taimehoolduse infoga. Kasuta sobivaid semantilisi HTML-silte nagu <section>, <h2>, <h3>, ja <p>, et struktuur oleks asjakohane. Loe rohkem agent režiimist. ## Uuri HTML ajalugu väljakutse Õppimine veebiarengust HTML on oluliselt arenenud alates sellest, kui Tim Berners-Lee lõi esimese veebibrauseri CERNis 1990. aastal. Mõned vanemad sildid nagu <marquee> on nüüd aegunud, sest need ei toeta hästi kaasaegseid ligipääsetavuse standardeid ega responsiivse disaini põhimõtteid. Proovi seda eksperimenti: 1. Määri ajutiselt oma <h1> pealkiri <marquee> sildi sisse: <marquee><h1>Minu terrarium</h1></marquee> 2. Ava oma leht brauseris ja jälgi kerivat efekti 3. Mõtle, miks see silt tühistati (vihje: mõtle kasutajakogemusele ja ligipääsetavusele) 4. Eemalda <marquee> silt ja tagasi semantilisse märgistusse Mõtisklusküsimused: - Kuidas võiks keriv pealkiri mõjutada visuaalpuudega või liikumistundlikke kasutajaid? - Millised moodsad CSS tehnikad võiksid saavutada sarnaseid visuaalseid efekte ligipääsetavamalt? - Miks on oluline kasutada tänapäevaseid veebistandardeid, mitte aegunud elemente? Uuri rohkem aegunud ja tühistatud HTML elementide kohta, et mõista, kuidas veebistandardid arenevad kasutajakogemuse parandamiseks. ## Loengu-järgne viktoriin Loengu-järgne viktoriin ## Ülevaade ja Iseteemastus Sügavda oma HTML teadmisi HTML on olnud veebipõhi üle 30 aasta, arenenud lihtsast dokumentimärgistuskeelest keeruka platvormini interaktiivsete rakenduste loomiseks. Selle evolutsiooni mõistmine aitab paremini hinnata kaasaegseid veebistandardeid ja teha teadlikumaid arendusotsuseid. Soovitatavad õpiteed: 1. HTML ajalugu ja areng - Uuri ajatelge HTML 1.0-st kuni HTML5-ni - Uuri, miks teatud sildid tühistati (ligipääsetavus, mobiilne sõbralikkus, hooldatavus) - Uuri uusimaid HTML funktsioone ja ettepanekuid 2. Semantiline HTML süvitsi - Õpi täielikku HTML5 semantiliste elementide nimekirja - Harjuta, millal kasutada <article>, <section>, <aside>, ja <main> - Uuri ARIA atribuute parandatud ligipääsetavuse jaoks 3. Kaasaegne veebiarendus - Uuri, kuidas ehitada responsiivseid veebilehti Microsoft Learni kaudu - Mõista, kuidas HTML seostub CSS-i ja JavaScriptiga - Õpi veebijõudlust ja SEO parimaid praktikaid Mõtisklusküsimused: - Milliseid tühistatud HTML silte avastasid ja miks need eemaldati? - Milliseid uusi HTML funktsioone pakutakse tulevikus? - Kuidas aitab semantiline HTML veebipõhist ligipääsetavust ja SEO-d? ### ⚡ Mida saad järgmise 5 minutiga teha - [ ] Ava DevTools (F12) ja vaata oma lemmiklehe HTML struktuuri - [ ] Loo lihtne HTML fail põhisiltidega: <h1>, <p>, ja <img> - [ ] Kontrolli oma HTML-i W3C HTML valideerijaga veebis - [ ] Proovi lisada oma HTML-i kommentaar <!-- kommentaar --> abil ### 🎯 Mida saad selle tunni jooksul saavutada - [ ] Täida loengu-järgne viktoriin ja korrasta semantilisi HTML kontseptsioone - [ ] Ehita enda kohta lihtne veebileht korraliku HTML struktuuriga - [ ] Katseta eri pealkirjatasemeid ja teksti vorminduse silte - [ ] Lisa pilte ja linke, et harjutada multimeedia integreerimist - [ ] Uuri HTML5 võimalusi, mida sa veel pole proovinud ### 📅 Sinu nädala pikkune HTML teekond - [ ] Täida terrariumiprojekti ülesanne semantilise märgistusega - [ ] Loo ligipääsetav veebileht kasutades ARIA silte ja rolle - [ ] Harjuta vormide loomist eri sisenditüüpidega - [ ] Uuri HTML5 API-sid nagu localStorage või geolocation - [ ] Õpi responsiivseid HTML mustreid ja mobiil-esimese disaini - [ ] Vaata teisi arendajaid HTML koodi ja õpi parimatest praktikatest ### 🌟 Sinu kuu pikkune veebi alus - [ ] Ehita portfoolio veebileht, mis demonstreerib HTML oskusi - [ ] Õpi HTML mallimist raamistiku nagu Handlebars abil - [ ] Panusta avatud lähtekoodiga projektidesse, parandades HTML dokumentatsiooni - [ ] Oma HTML mõõdukaid keerukamaid kontseptsioone nagu kohandatud elemendid - [ ] Integreeri HTML koos CSS raamistikute ja JavaScripti teekidega - [ ] Ole mentoriks teistele, kes õpivad HTML põhialuseid ## 🎯 Sinu HTML valdamise ajakava ### 🛠️ Sinu HTML tööriistakomplekti kokkuvõte Pärast selle tunni lõpetamist on sul nüüd: - Dokumendi struktuur: Täielik HTML5 alus koos õige DOCTYPE-ga - Semantiline märgistus: Mõtestatud sildid, mis parandavad ligipääsetavust ja SEO-d - Pildi integratsioon: Õige failide korraldus ja alt-teksti kasutamine - Paigutuse konteinerid: Tarkade klassinimedega div-ide strateegiline kasutus - Ligipääsetavuse teadlikkus: Ekraanilugeja navigeerimise mõistmine - Moodsa standardi tundmine: Praegused HTML5 praktikad ja aegunud siltide teadlikkus - Projekti alus: Kindel baas CSS stiilimiseks ja JavaScripti interaktiivsuseks Järgmised sammud: Sinu HTML struktuur on valmis CSS stiilimiseks! Semantiline alus, mida sa ehitasid, teeb järgmise tunni mõistmise palju lihtsamaks. ## Ülesanne Harjuta HTML-i: Ehita blogi makett --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Vastutusest loobumine: See dokument on tõlgitud tehisintellekti tõlketeenuse Co-op Translator abil. Kuigi püüame tagada täpsust, olge teadlik, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algkeeles tuleks pidada autoriteetseks allikaks. Töötlemise või kriitilise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tekkivate arusaamatuste või moonutuste eest. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium projekt Osa 2: Sissejuhatus CSS-i
Kas mäletad, kuidas su HTML-terraarium nägi üsna lihtne välja? CSS on koht, kus me muudame selle tavalise struktuuri millekski visuaalselt atraktiivseks. Kui HTML on nagu maja karkassi ehitamine, siis CSS on kõik, mis teeb sellest koduse tunde – värvid, mööbli paigutus, valgustus ja ruumide omavaheline voog. Mõtle, kuidas Versailles’ loss sai alguse lihtsast jahimajast, kuid hoolikas kaunistus ja paigutus muutsid selle üheks maailma imelisimaks hooneks. Täna muudame su terraariumi funktsionaalsest viimistletuks. Õpid, kuidas elemente täpselt positsioneerida, tekitada reageerivaid paigutusi erinevatele ekraanisuurustele ja luua visuaalset atraktiivsust, mis teeb veebilehtedest kaasahaaravad. Selle õppetunni lõpuks näed, kuidas strateegiline CSS stiil võib oluliselt parandada su projekti. Lisame su terraariumile stiili. ## Eelõppe viktoriin Eelõppe viktoriin ## CSS-iga alustamine CSS-i mõistetakse tihti lihtsalt kui „asjade kauniks tegemist“, kuid sellel on palju laiem eesmärk. CSS on nagu filmi režissöör – sa kontrollid mitte ainult seda, kuidas kõik välja näeb, vaid ka seda, kuidas see liigub, kuidas reageerib interaktsioonile ja kohandub erinevates olukordades. Kaasaegne CSS on erakordselt võimekas. Sa saad kirjutada koodi, mis automaatselt kohandab paigutust telefonidele, tahvelarvutitele ja lauaarvutitele. Võid luua sujuvaid animatsioone, mis juhivad kasutajate tähelepanu õigesse kohta. Kui kõik töötab koos, on tulemused päris muljetavaldavad. Selles õppetunnis saavutatav: - Luuakse täislahendus visuaalseks disainiks su terraariumile, kasutades kaasaegseid CSS tehnikaid - Uuritakse põhikontseptsioone nagu kaskaad, pärandumine ja CSS selektorid - Rakendatakse reageerivaid positsioneerimis- ja paigutusstrateegiaid - Ehitatakse terraariumi konteiner kasutades CSS kujundeid ja stiile ### Eeldus Peaksid olema eelmisel tunnil lõpetanud HTML-struktuuri oma terraariumile ja see valmis stiilimiseks. ### CSS faili seadistamine Enne stiilimist peame ühendama CSS-i meie HTML-iga. See ühendus ütleb brauserile, kust leida meie terraariumi stiilinõudeid. Loo oma terraariumi kausta uus fail nimega style.css, seejärel lisa see oma HTML dokumendi <head> sektsiooni: Mis selle koodi eesmärk on: - Loob ühenduse su HTML- ja CSS-failide vahel - Käsib brauseril laadida ja rakendada selles failis style.css olevad stiilid - Kasutab atribuuti rel="stylesheet", mis näitab, et tegemist on CSS failiga - Viitab failile teekonnaga href="./style.css" ## CSS kaskaadi mõistmine Oled mõelnud, miks CSS-i nimetatakse "Cascading" Style Sheets? Stiilid voolavad nagu juga ning mõnikord võivad need üksteisega konflikti minna. Mõtle sõjaväe käsustruktuurile – kindral korraldab, et „kõik sõdurid kannavad rohelist“, kuid konkreetne käsk sinu üksusele ütleb „kanna tseremooniaks sinist vormi“. Spetsiifilisem juhis on määrav. CSS järgib sama loogikat ja selle hierarhia mõistmine teeb silumise palju lihtsamaks. ### Katsetame kaskaadi prioriteeti Vaatame, kuidas kaskaad toimib, luues stiilide konflikti. Esiteks lisa oma <h1> märgile inline-stiil: Mida see kood teeb: - Rakendab otse punase värvi <h1> elemendile, kasutades inline stiili - Kasutab style atribuuti, et manustada CSS otse HTML-i - Loob selle elemendi jaoks kõrgeima prioriteediga stiilireegli Seejärel lisa see reegel oma style.css faili: Ülaltoodud puhul oleme: - Määratlenud CSS reegli kõigile <h1> elementidele - Seadnud teksti värviks sinise välimise stiililehe kaudu - Loonud madalama prioriteediga reegli võrreldes inline stiilidega ✅ Teadmiste kontroll: Milline värv kuvatakse sinu veebirakenduses? Miks see värv võidab? Tule meelde olukordi, kus võiksid stiile üle kirjutada? ## CSS pärandumine praktikas CSS pärandumine käitub nagu genetikad – elemendid pärivad teatud omadusi vanemate elementidelt. Kui määrad font-familyst body elemendile, kasutavad kõik tekstid selle sama fonti automaatselt. See on nagu Habsburgide perekonna iseloomulik lõualuu, mis ilmus põlvest põlve, ilma et seda eraldi igaühele määratletaks. Kuid mitte kõike ei pärandata. Teksti omadused nagu font ja värvid päranduvad, kuid paigutuse omadused nagu marginaalid ja piirid mitte. Nii nagu lapsed võivad pärida füüsilisi omadusi, kuid mitte vanemate moestiile. ### Vaadeldes fontade pärandumist Vaata pärandumist praktikasse, määrates font-familyst <body> elemendile: Mis siin juhtub: - Seab fondiperekonna kogu lehele, suunates <body> elemendile - Kasutab fontide pinu koos varufontidega parema brauseri ühilduvuse tagamiseks - Rakendab kaasaegseid süsteemifonte, mis näevad hea välja kõigil operatsioonisüsteemidel - Tagab, et kõik alam-elemendid pärivad selle fondi, kui ei ole spetsiifiliselt muudetud Ava brauseri arendajatööriistad (F12), mine Elements vaatesse ja vaata oma <h1> elementi. Näed, et see pärib fondiperekonna body-lt: ✅ Katsetamise aeg: Proovi teisi pärandatavaid omadusi <body> peal nagu color, line-height või text-align. Mis juhtub su pealkirja ja teiste elementidega? ### 🔄 Pedagoogiline kontroll CSS aluste mõistmine: Enne selektorite juurde minekut veendu, et suudad: - ✅ Selgitada kaskaadi ja pärandumise erinevust - ✅ Ennustada, milline stiil spetsiifilisuse konflikti võidab - ✅ Tuvastada, millised omadused päranduvad vanemalt elemendilt - ✅ Õigesti ühendada CSS failid HTML-iga Kiire test: Kui sul on need stiilid, mis värvi on <h1> elemendi tekst sees <div class="special">? Vastus: Punane (elemendi selektor sihib otse h1) ## CSS selektorite valdamine CSS selektorid on viis, kuidas sihtida konkreetseid elemente stiilimiseks. Need töötavad nagu täpsed juhised – selle asemel, et öelda „maja“, ütled „sinine maja punase uksega Maple tänaval“. CSS pakub erinevaid võimalusi olla spetsiifiline ja õige selektori valimine on nagu õige tööriista valik ülesande jaoks. Mõnikord tuleb stiilida kõiki uksi naabruskonnas, mõnikord vaid ühte konkreetselt ust. ### Elemendi selektorid (sildid) Elemendi selektorid sihivad HTML elemente nende sildinime järgi. Need sobivad põhistiilide seadmiseks, mis kehtivad kogu leheküljele: Millised stiilid need on: - Seab ühtse tüpograafia kogu veebilehele body selektoriga - Eemaldab brauseri vaikimisi marginaalid ja täited paremaks kontrolliks - Stiilid kõik päiselemendid värvi, joonduse ja vahedega - Kasutab rem ühikuid skaleeritava ja ligipääsetava font-suuruse jaoks Kuigi elemendi selektorid on head üldiseks stiilimiseks, vajad spetsiifilisemaid selektoreid, et stiilida individuaalseid komponente nagu taimed su terraariumis. ### ID selektorid unikaalsetele elementidele ID selektorid kasutavad # sümbolit ja sihivad elemente konkreetsete id atribuutidega. Kuna ID-d peavad olema lehel unikaalsed, sobivad nad hästi individuaalsete erielementide stiilimiseks, näiteks meie vasak- ja parempoolsete taimede konteinerid. Loome meie terraariumi külgkontainerite stiilid, kuhu taimed elama lähevad: Mida see kood saavutab: - Positsioneerib konteinerid vasakule ja paremale ekraani servadele absolute positsioneerimise abil - Kasutab vh ühikuid (ekraani kõrgus) reageeriva kõrguse jaoks, mis kohandub ekraanisuurusega - Rakendab box-sizing: border-box, et täide oleks arvestatud kogulaiusesse - Eemaldab mittevajalikud px ühikud nullväärtustelt, et kood oleks puhtam - Seab õrna tausta värvi, mis on silmadele sõbralikum kui karm hall ✅ Koodi kvaliteedi väljakutse: Pane tähele, kuidas see CSS rikub DRY (Don't Repeat Yourself) põhimõtet. Kas saad ümber kirjutada, kasutades nii ID-d kui klassi? Parendatud lähenemine: ### Klassi selektorid korduvate stiilide jaoks Klassi selektorid kasutavad . märki ja sobivad ideaalselt, kui tahad sama stiili rakendada mitmele elemendile. Erinevalt ID-dest saab klasse HTML-is korduvalt kasutada, mis teeb need sobivaks järjepidevate stiilide jaoks. Meie terraariumis vajab iga taim sarnast stiili, kuid igaüks peab olema ka individuaalselt positsioneeritud. Kasutame klasside kombinatsiooni ühiste stiilide jaoks ja ID-sid unikaalseks positsioneerimiseks. Näide iga taime HTML struktuurist: Olulised elemendid selgitatuna: - Kasutab class="plant-holder" ühtseks konteineri stiiliks kõigi taimedega - Rakendab class="plant" ühistele piltidele stiili ja käitumist - Sisaldab unikaalset id="plant1" individuaalseks positsioneerimiseks ja JavaScripti interaktsiooniks - Pakub kirjeldavat alt-teksti ekraanilugejate jaoks Lisa need stiilid oma style.css faili: Mis siin toimub: - Luuakse suhteline positsioneerimine taimede hoidjatele, et luua paigutuskontekst - Seadistatakse iga taimede hoidja kõrguseks 13%, tagades, et kõik taimed mahuvad vertikaalselt vaatamata kerimisele - Liigutatakse hoidjaid veidi vasakule, et taimed oleksid konteineris paremini tsentreeritud - Lubatakse taimedele reageeriv suuruse muutmine, kasutades max-width ja max-height omadusi - Kasutatakse z-index taimed paigutamiseks üle teiste elementide terraariumis - Lisatakse õrn hover-efekt CSS üleminekutega, et parandada kasutajakogemust ✅ Kriitiline mõtlemine: Miks vajame nii .plant-holder kui ka .plant selektoreid? Mis juhtuks, kui prooviksime kasutada ainult ühte? ## CSS positsioneerimise mõistmine CSS positsioneerimine on nagu lavastaja roll teatris – sa juhid, kus iga näitleja seisab ja kuidas nad laval liiguvad. Mõned jäävad tavapärasesse režiimi, teised vajavad spetsiifilist asukohta draama loomiseks. Positsioneerimist mõistes muutuvad paljud paigutusprobleemid lahendatavaks. Vajad navigeerimisriba, mis jääb ekraani ülaossa kerides? Positsioneerimine teeb selle võimalikuks. Tahad tööriistaekraani, mis ilmub täpsesse kohta? See on ka positsioneerimine. ### Viis positsioneerimise väärtust ### Positsioneerimine meie terraariumis Meie terraarium kasutab positsioneerimise liikide strateegilist kombinatsiooni, et luua soovitud paigutus: Mõistame positsioneerimise strateegiat: - Absoluutsed konteinerid eemaldatakse dokumendi voost ja kinnitatakse ekraani servadele - Suhtelised taimede hoidjad loovad positsioneerimiskonteksti, jäädes dokumendi voogu - Absoluutsed taimed saab täpselt positsioneerida oma suhteliste konteinerite sees - See kombinatsioon võimaldab taimedel virnastuda vertikaalselt, olles samas individuaalselt positsioneeritavad ✅ Katsetamise aeg: Proovi muuta positsioneerimise väärtusi ja vaata tulemusi: - Mis juhtub, kui muudad .container positsiooni absolute-lt relative-ks? - Kuidas muutub paigutus, kui .plant-holder kasutab absolute asemel relative? - Mis juhtub, kui vahetad .plant positsioneerimise relative vastu? ### 🔄 Õppekontroll CSS positsioneerimise meistriklass: Peatu ja kontrolli oma arusaamist: - ✅ Kas suudad seletada, miks taimedele on drag-and-drop jaoks vaja absoluutset positsioneerimist? - ✅ Kas mõistad, kuidas suhtelised konteinerid loovad positsioneerimiskonteksti? - ✅ Miks kasutavad külgkonteinerid absoluutset positsioneerimist? - ✅ Mis juhtuks, kui eemaldada positsioneerimise määrangud täiesti? Reaalmaailma seos: Mõtle, kuidas CSS positsioneerimine peegeldab reaalse maailma paigutust: - Staatiline: Raamatud riiulis (loomulik järjekord) - Suhteline: Raamatu veidi liigutamine, kuid selle koha säilitamine - Absoluutne: Märkmiku panemine täpselt kindlale leheküljele - Fixeeritud: Kleebis, mis jääb nähtavaks, kui lehti keerad ## Terrariumi ehitamine CSS-iga Nüüd ehitame ainult CSS-iga klaaspurgi – pilte ega graafikaprogrammi pole vaja. Realistliku klaasi, varjude ja sügavuse efekti loomine positsioneerimise ja läbipaistvuse abil demonstreerib CSS visuaalseid võimalusi. See tehnika peegeldab, kuidas Bauhausi arhitektid kasutasid lihtsaid geomeetrilisi vorme keerukate ja ilusate struktuuride loomiseks. Kui neid põhimõtteid mõistad, tunned ära CSS-i tehnikad paljude veebidisainide taga. ### Klaaspurgi komponentide loomine Ehitage terrariumi purk tükkhaaval. Iga osa kasutab absoluutset positsioneerimist ja protsendipõhist suurust, et saavutada reageeriv disain: Terrariumi ehituse mõistmine: - Kasutab protsendipõhiseid mõõtmeid vastavalt ekraanisuurusele kohanemiseks - Paigutab elemendid absoluutse positsioneerimisega täpselt üksteise peale ja joondades - Rakendab erinevaid läbipaistvuse tasemeid klaasi läbipaistvuse efekti loomiseks - Kasutab z-index kihistamist, et taimed paistaksid purgi sees - Lisab peeneid varjutusi ja täpsemaid äärekuju nurki realistlikuma väljanägemise jaoks ### Reageeriv disain protsentides Pane tähele, kuidas kõik mõõtmed on protsentides, mitte fikseeritud pikslites: Miks see oluline on: - Tagab, et terrarium skaleerub proportsionaalselt ükskõik millisel ekraanisuurusel - Hoiab purgi komponentide visuaalsed suhted - Pakub ühtset kogemust nii mobiiltelefonides kui suurtel lauaarvutitel - Võimaldab disainil kohaneda, murtmata paigutust ### CSS ühikud töös Kasutame rem ühikuid äärekuju nurkades (border-radius), mis skaleerub suhtes juurteksti suurusega. See loob kasutajasõbralikumaid disaine, mis austavad kasutaja fontide eelistusi. Loe CSS suhtelistest ühikutest ametlikust spetsifikatsioonist. ✅ Visuaalne katsetamine: Proovi muutes neid väärtusi ja jälgi muutusi: - Muuda purgi läbipaistvust 0.5-lt 0.8-le – kuidas see klaasi välimust mõjutab? - Kohanda mulla värv #3a241d pealt #8B4513 peale – milline visuaalne efekt tekib? - Muuda mulla z-index väärtuseks 2 – mis kihistusega juhtub? ### 🔄 Õppekontroll CSS visuaalse disaini mõistmine: Kinnita oma arusaamist CSS-ist: - ✅ Kuidas protsendipõhised mõõtmed loovad reageeriva disaini? - ✅ Miks läbipaistvus loob klaasi läbipaistvuse efekti? - ✅ Mis roll on z-index kihistamisel? - ✅ Kuidas äärekujude väärtused loovad purgi kuju? Disaini põhimõte: Pane tähele, kuidas ehitame keerukaid visuaale lihtsate kujudega: 1. Ristkülikud → Ümarad ristkülikud → Purgi komponendid 2. Lamedad värvid → Läbipaistvus → Klaasi efekt 3. Individuaalsed elemendid → Kihiline koostis → 3D välimus --- ## GitHub Copiloti agentide väljakutse 🚀 Kasuta Agent režiimi ja täida järgmine väljakutse: Kirjeldus: Loo CSS animatsioon, mis paneb terrariumi taimed õrnalt kõiglema, imiteerides looduse tuuleefekti. See aitab sul harjutada CSS animatsioone, transformatsioone ja võtmeraame, samal ajal suurendades terrariumi visuaalset ilu. Üleskutse: Lisa CSS võtmeraami animatsioonid, mis panevad terrariumi taimed kergelt vasakule-paremale kõiglema. Loo kõikumisanimatsioon, mis pöörab iga taime veidi (2-3 kraadi) vasakule ja paremale 3-4 sekundiga ning rakenda seda .plant klassile. Veendu, et animatsioon korduks lõputult ja kasutaks loomuliku liikumise jaoks kerget tõmmet. Õpi veel agendi režiimist. ## 🚀 Väljakutse: Klaasi peegelduste lisamine Valmis oma terrariumi täiustama realistlike klaasipeegeldustega? See tehnika lisab sügavust ja realismi disainile. Sa lood peened helkivad läikekujud, mis simuleerivad valguse peegeldumist klaasipindadelt. See lähenemine on sarnane Renessansi maalikunstnikele nagu Jan van Eyck, kes kasutasid valgust ja peegeldust klaasi kolme-mõõtmelise mulje loomiseks. Siin on, mida sa saavutada tahad: Sinu ülesanne: - Loo pehmed valged või heledat värvi ovaalsed kujundid klaasipeegeldusteks - Paiguta need purgi vasakule küljele strateegiliselt - Rakenda sobiv läbipaistvus ja udususe efektid valguse peegeldamiseks realistlikult - Kasuta border-radius orgaaniliste mullilaadsete kujundite loomiseks - Katseta gradientide või varjude kasutamist reaalsust suurendamaks ## Loengu-järgne viktoriin Loengu-järgne viktoriin ## Laienda oma CSS teadmisi CSS võib alguses tunduda keeruline, kuid põhikontseptsioonide mõistmine loob tugeva aluse keerukamate tehnikate jaoks. Järgmised CSS valdkonnad: - Flexbox - lihtsustab elementide joondamist ja jaotamist - CSS Grid - pakub võimsad tööriistad keerukate paigutuste loomiseks - CSS muutujad - vähendab kordusi ja parandab hooldatavust - Reageeriv disain - tagab saidi optimaalset töö erinevate ekraanisuurustega ### Interaktiivsed õppematerjalid Harjuta neid mõisteid lõbusate ja praktiliste mängudega: - 🐸 Flexbox Froggy - Õpi Flexboxi põneva väljakutse kaudu - 🌱 Grid Garden - Õpi CSS Gridi virtuaalse porgandi kasvatamisega - 🎯 CSS Battle - Testi oma CSS oskusi kodeerimisvõistlustel ### Täiendav õppimine Täielike CSS alusteadmiste saamiseks lõpeta Microsoft Learn moodul: Stiilita oma HTML rakendust CSS-i abil ### ⚡ Mida saad teha järgmise 5 minutiga - [ ] Ava DevTools ja kontrolli CSS stiile ükskõik millisel veebilehel Elements paneelilt - [ ] Loo lihtne CSS fail ja seo see HTML lehega - [ ] Proovi muuta värve eri meetoditega: heks, RGB ja nimedega - [ ] Harjuta kastimudelit, lisades div-elemendile paddingut ja marginit ### 🎯 Mida suudad selle tunniga saavutada - [ ] Täida järeltunni viktoriin ja korrasta CSS alusteadmisi - [ ] Stiilita oma HTML leht fontide, värvide ja ruumiga - [ ] Loo lihtne paigutus flexboxi või gridiga - [ ] Katseta CSS üleminekuid sujuvate efektide saavutamiseks - [ ] Harjuta reageerivat disaini meedia päringutega ### 📅 Sinu nädalane CSS seiklus - [ ] Täida terrariumi stiilimise ülesanne loovalt - [ ] Saa CSS Grid meister foto galeriide ehitamisega - [ ] Õpi CSS animatsioone, et anda oma disainile elu - [ ] Uuri CSS eeltöötlusi nagu Sass või Less - [ ] Õpi disainipõhimõtteid ja rakenda neid CSS-is - [ ] Analüüsi ja reprodutseeri huvitavaid veebidisainilahendusi ### 🌟 Sinu kuu pikkune disaini meistriklass - [ ] Ehita täielik reageeriv veebidisaini süsteem - [ ] Õpi CSS-in-JS või kasuta utiliite nagu Tailwind - [ ] Panusta avatud lähtekoodiga projektidesse CSS täiustustega - [ ] Saa kogenenuks keerukates CSS nippides, nagu kohandatud omadused ja containment - [ ] Loo korduvkasutatavaid komponentide raamatukogusid modulaarse CSS-iga - [ ] Juhenda teisi CSS õppijaid ja jaga disaini teadmisi ## 🎯 Sinu CSS meistriklassi ajaskaala ### 🛠️ Sinu CSS tööriistakasti kokkuvõte Pärast selle tunni lõpetamist saad: - Kaskaaditeadmised: Kuidas stiilid päranduvad ja üksteist üle kirjutavad - Valijate valdamine: Täpne sihtimine elementide, klasside ja ID-dega - Positsioneerimisoskused: Strateegiline elementide paigutus ja kihistamine - Visuaalne disain: Klaasi efektide, varjude ja läbipaistvuse loomine - Reageerivad tehnikad: Protsendipõhised paigutused, mis kohanevad iga ekraaniga - Koodi organiseerimine: Puhas ja hooldatav CSS struktuur - Moodne praktika: Suhteliste ühikute ja ligipääsetavate disainimustrite kasutamine Järgmised sammud: Sinu terrariumil on nüüd nii struktuur (HTML) kui ka stiil (CSS). Viimane tund lisab interaktiivsuse JavaScriptiga! ## Kodutöö CSS Refaktoreerimine --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Vastutusest loobumine: See dokument on tõlgitud AI tõlketeenuse Co-op Translator abil. Kuigi kasutame täpsuse tagamiseks parimaid vahendeid, võib automaatsetes tõlgetes esineda vigu või ebatäpsusi. Originaaldokument oma algkeeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul on soovitatav kasutada professionaalset inimtõlget. Me ei vastuta käesoleva tõlke kasutamisest tulenevate arusaamatuste või valesti mõistmiste eest. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
بخش اول پروژه تراریوم: مقدمهای بر HTML
HTML یا زبان نشانهگذاری ابرمتن، پایه و اساس هر وبسایتی است که تا به حال بازدید کردهاید. HTML را مانند اسکلت در نظر بگیرید که ساختار صفحات وب را میسازد – مشخص میکند محتوای چیست، چگونه سازماندهی شده و هر بخش چه نمایندگی دارد. در حالی که CSS بعداً «لباس» به HTML شما با رنگها و چیدمان میپوشاند و جاوااسکریپت با تعامل آن را زنده میکند، HTML ساختار اساسی را فراهم میکند که همه چیز را ممکن میسازد. در این درس، شما ساختار HTML یک رابط تراریوم مجازی را ایجاد خواهید کرد. این پروژه عملی مفاهیم پایهای HTML را به شما آموزش میدهد و در عین حال چیزی جذاب از نظر بصری میسازد. شما خواهید آموخت چگونه محتوا را با استفاده از اجزای معنایی سازمان دهید، با تصاویر کار کنید و پایهای برای یک برنامه وب تعاملی بسازید. تا پایان این درس، شما یک صفحه HTML فعال همراه با نمایش تصاویر گیاهان در ستونهای مرتب خواهید داشت که آماده است تا در درس بعدی آن را به صورت استایلدهی شده مشاهده کنید. نگران نباشید اگر در ابتدا ساده به نظر برسد – این دقیقاً کاری است که HTML باید انجام دهد قبل از اینکه CSS جلوه بصری اضافه کند. ## آزمون پیش از درس آزمون پیش از درس ## راهاندازی پروژه شما قبل از اینکه وارد نوشتن کد HTML شویم، اجازه دهید یک فضای کاری مناسب برای پروژه تراریوم شما آماده کنیم. ایجاد ساختار فایل سازمانیافته از همان ابتدا عادت مهمی است که در طول مسیر توسعه وب به شما کمک خواهد کرد. ### وظیفه: ایجاد ساختار پروژه شما شما یک پوشه اختصاصی برای پروژه تراریوم خود خواهید ساخت و اولین فایل HTML خود را اضافه خواهید کرد. در اینجا دو روش وجود دارد که میتوانید استفاده کنید: گزینه ۱: استفاده از Visual Studio Code 1. Visual Studio Code را باز کنید 2. روی "File" کلیک کرده و سپس "Open Folder" را انتخاب کنید یا از Ctrl+K, Ctrl+O (ویندوز/لینوکس) یا Cmd+K, Cmd+O (مک) استفاده کنید 3. یک پوشه جدید به نام terrarium بسازید و آن را انتخاب کنید 4. در پنل اکسپلورر روی آیکون "New File" کلیک کنید 5. فایل خود را به نام index.html نامگذاری کنید گزینه ۲: استفاده از دستورات ترمینال این دستورات چه کاری انجام میدهند: - ساختن یک دایرکتوری جدید به نام terrarium برای پروژه شما - ورود به دایرکتوری terrarium - ساخت یک فایل خالی index.html - باز کردن فایل در Visual Studio Code برای ویرایش ## درک ساختار سند HTML هر سند HTML دارای ساختاری مشخص است که مرورگرها باید آن را بفهمند و به درستی نمایش دهند. ساختار آن را مانند یک نامه رسمی در نظر بگیرید – این نامه دارای اجزای ضروری در ترتیب مشخصی است که به گیرنده (در اینجا مرورگر) کمک میکند محتوا را به درستی پردازش کند. بیایید با افزودن پایههای اساسی که هر سند HTML نیاز دارد شروع کنیم. ### اعلان DOCTYPE و عنصر ریشه دو خط اول هر فایل HTML «معرفی» سند به مرورگر هستند: درک اینکه این کد چه میکند: - اعلان نوع سند به صورت HTML5 با استفاده از <!DOCTYPE html> - ایجاد عنصر ریشه <html> که تمام محتوای صفحه را در بر میگیرد - برقراری استانداردهای وب مدرن برای نمایش صحیح در مرورگر - اطمینان از نمایش یکنواخت در مرورگرها و دستگاههای مختلف ### 🔄 بررسی آموزشی ایستادن و تأمل کردن: قبل از ادامه مطمئن شوید که درک کردهاید: - ✅ چرا هر سند HTML به اعلان DOCTYPE نیاز دارد - ✅ عنصر ریشه <html> چه محتوایی دارد - ✅ چگونه این ساختار به مرورگرها کمک میکند صفحات را به درستی نمایش دهند آزمون سریع خودی: آیا میتوانید به زبان خودتان توضیح دهید «نمایش مطابق استانداردها» یعنی چه؟ ## افزودن متادیتای ضروری سند قسمت <head> در سند HTML شامل اطلاعات حیاتی است که مرورگرها و موتورهای جستجو نیاز دارند ولی بازدیدکنندگان مستقیماً روی صفحه نمیبینند. این قسمت مانند اطلاعات «پشت صحنه» است که به صفحه وب کمک میکند به درستی کار کند و در دستگاهها و پلتفرمهای مختلف به درستی نمایش داده شود. این متادیتا به مرورگرها میگوید چگونه صفحه را نمایش دهند، از چه کدگذاری کاراکتری استفاده کنند، و چگونه با اندازههای مختلف صفحه برخورد کنند – همه اینها برای ایجاد صفحات وب حرفهای و قابل دسترس ضروری است. ### وظیفه: افزودن بخش Head سند این قسمت <head> را بین تگهای باز و بسته <html> قرار دهید: تحلیل آنچه هر عنصر انجام میدهد: - تنظیم عنوان صفحه که در تب مرورگر و نتایج جستجو نمایش مییابد - مشخص کردن کدگذاری UTF-8 برای نمایش صحیح متن در سراسر جهان - اطمینان از سازگاری با نسخههای مدرن Internet Explorer - تنظیم طراحی واکنشگرا با تنظیم ناحیه نما (viewport) برای تطبیق با عرض دستگاه - کنترل سطح بزرگنمایی اولیه برای نمایش محتوا در اندازه طبیعی ## ساختار بخش Body سند عنصر <body> حاوی تمام محتوای قابل مشاهده صفحه وب شماست – همه چیزهایی که کاربران میبینند و با آنها تعامل دارند. در حالی که قسمت <head> به مرورگر دستورالعمل میدهد، قسمت <body> محتوای واقعی را شامل میشود: متنها، تصاویر، دکمهها و سایر عناصری که رابط کاربری شما را میسازند. بیایید ساختار بخش body را اضافه کنیم و بفهمیم چگونه تگهای HTML با هم کار میکنند تا محتوای معنادار بسازند. ### درک ساختار تگهای HTML HTML از تگهای جفتی برای تعریف عناصر استفاده میکند. اکثر تگها یک تگ باز مانند <p> و یک تگ بسته مانند </p> دارند که محتوا بین آنها قرار میگیرد: <p>سلام دنیا!</p>. این یک پاراگراف میسازد که متن "سلام دنیا!" را در بر دارد. ### وظیفه: افزودن عنصر Body فایل HTML خود را بهروزرسانی کنید تا عنصر <body> را شامل شود: این ساختار کامل چه مزایایی دارد: - برقرار کردن چارچوب پایه سند HTML5 - شامل کردن متادیتای ضروری برای نمایش صحیح مرورگر - ایجاد یک بخش body خالی آماده برای محتوای قابل مشاهده - پیروی از بهترین شیوههای توسعه وب مدرن اکنون آمادهاید عناصر قابل دید تراریوم را اضافه کنید. از عناصر <div> به عنوان کانتینر برای سازماندهی بخشهای مختلف محتوا استفاده خواهیم کرد و از عناصر <img> برای نمایش تصاویر گیاهان. ### کار با تصاویر و کانتینرهای چیدمان تصاویر در HTML خاص هستند چون از تگهای خودپایان (self-closing) استفاده میکنند. برخلاف عناصری مثل <p></p> که محتوا را در بر میگیرند، تگ <img> تمام اطلاعات لازم را با استفاده از ویژگیهایی مانند src برای مسیر فایل تصویر و alt برای دسترسپذیری، درون خود تگ دارد. قبل از اینکه تصاویر را به HTML خود اضافه کنید، باید فایلهای پروژه را به درستی سازماندهی کنید و پوشه images را بسازید و گرافیکهای گیاهان را اضافه کنید. ابتدا تصاویر خود را آماده کنید: 1. در پوشه پروژه تراریوم، یک پوشه به نام images بسازید 2. تصاویر گیاهان را از پوشه راهحل دانلود کنید (جمعاً ۱۴ تصویر گیاه) 3. همه تصاویر گیاهان را در پوشه جدید images کپی کنید ### وظیفه: ایجاد چیدمان نمایش گیاهان اکنون تصاویر گیاهان را بین تگهای <body></body> به صورت دو ستون سازماندهی شده اضافه کنید: گامبهگام، این کد چه کاری انجام میدهد: - ساختن یک کانتینر اصلی صفحه با id="page" برای نگهداری همه محتوا - ایجاد دو کانتینر ستونی: left-container و right-container - سازماندهی ۷ گیاه در ستون چپ و ۷ گیاه در ستون راست - محصور کردن هر تصویر گیاه در یک <div> با کلاس plant-holder برای موقعیتدهی جداگانه - استفاده از نام کلاسهای یکنواخت برای استایلدهی CSS در درس بعد - اختصاص شناسههای یکتا به هر تصویر گیاه برای تعامل با جاوااسکریپت بعدی - شامل کردن مسیر فایل صحیح که به پوشه تصاویر اشاره میکند ### 🔄 بررسی آموزشی درک ساختار: کمی زمان بگذارید و ساختار HTML خود را مرور کنید: - ✅ آیا میتوانید کانتینرهای اصلی در چیدمان خود را شناسایی کنید؟ - ✅ آیا میدانید چرا هر تصویر شناسه یکتا دارد؟ - ✅ هدف <div>های plant-holder را چگونه توصیف میکنید؟ بازبینی بصری: فایل HTML خود را در مرورگر باز کنید. باید مشاهده کنید: - فهرست سادهای از تصاویر گیاهان - تصاویر در دو ستون سازماندهی شدهاند - چیدمانی ساده و بدون استایل به یاد داشته باشید: این ظاهر ساده دقیقاً همان چیزی است که HTML باید قبل از استایلدهی CSS باشد! با افزودن این نشانهها، گیاهان روی صفحه نمایش داده میشوند، اگرچه هنوز به زیبایی استایل داده نشدهاند – این کار CSS در درس بعدی است! فعلاً شما یک پایه قوی HTML دارید که محتوای شما را به درستی سازمان میدهد و بهترین روشهای دسترسپذیری را رعایت میکند. ## استفاده از HTML معنایی برای دسترسپذیری HTML معنایی یعنی انتخاب عناصر HTML بر اساس معنی و هدف آنها، نه فقط ظاهرشان. وقتی نشانهگذاری معنایی استفاده میکنید، ساختار و معنی محتوای خود را به مرورگرها، موتورهای جستجو و فناوریهای کمکی مانند صفحهخوانها منتقل میکنید. این رویکرد وبسایتهای شما را برای کاربران دارای ناتوانی بهتر در دسترس قرار میدهد و به موتورهای جستجو کمک میکند محتوای شما را بهتر درک کنند. این یک اصل اساسی در توسعه وب مدرن است که تجربهی بهتری برای همه ایجاد میکند. ### افزودن عنوان معنایی صفحه بیایید یک عنوان مناسب به صفحه تراریوم شما اضافه کنیم. این خط را بلافاصله بعد از تگ باز <body> وارد کنید: چرا نشانهگذاری معنایی مهم است: - کمک به صفحهخوانها برای ناوبری و درک ساختار صفحه - بهبود بهینهسازی موتورهای جستجو (SEO) با آشکارسازی سلسله مراتب محتوا - تقویت دسترسی برای کاربران با مشکلات بینایی یا تفاوتهای شناختی - ایجاد تجربیات بهتر کاربری در همه دستگاهها و پلتفرمها - پیروی از استانداردها و بهترین روشهای توسعه حرفهای مثالهایی از انتخابهای معنایی در مقابل غیر معنایی: ## ایجاد کانتینر تراریوم حالا بیایید ساختار HTML تراریوم را اضافه کنیم – کانتینر شیشهای که گیاهان نهایتاً در آن قرار میگیرند. این بخش یک مفهوم مهم را نشان میدهد: HTML ساختار را فراهم میکند، اما بدون استایلدهی CSS، این عناصر هنوز قابل مشاهده نیستند. نشانهگذاری تراریوم از نام کلاسهای توصیفی استفاده میکند که باعث میشود استایلدهی CSS در درس بعدی آسان و قابل نگهداری باشد. ### وظیفه: افزودن ساختار تراریوم این نشانهگذاری را بالای آخرین تگ </div> (قبل از تگ بسته کانتینر صفحه) درج کنید: درک این ساختار تراریوم: - ساختن یک کانتینر اصلی تراریوم با شناسه یکتا برای استایلدهی - تعریف عناصر جداگانه برای هر بخش بصری (بالا، دیوارها، خاک، پایین) - شامل عناصر تو در تو برای افکتهای بازتاب شیشه (عناصر براق) - استفاده از نامهای کلاس توصیفی که هدف هر عنصر را به وضوح مشخص کنند - آمادهسازی ساختار برای استایلدهی CSS که ظاهر تراریوم شیشهای را ایجاد میکند ### 🔄 بررسی آموزشی تسلط بر ساختار HTML : قبل از پیشروی، اطمینان حاصل کنید که میتوانید: - ✅ تفاوت بین ساختار HTML و ظاهر بصری را توضیح دهید - ✅ عناصر HTML معنایی در مقابل غیرمعنایی را تشخیص دهید - ✅ توصیف کنید چگونه مارکآپ صحیح به بهبود دسترسی کمک میکند - ✅ ساختار کامل درخت سند را بشناسید آزمون فهم خود: سعی کنید فایل HTML خود را در مرورگری باز کنید که جاوااسکریپت غیرفعال و CSS حذف شده باشد. این ساختار معنایی خالصی که ساختهاید را به شما نشان میدهد! --- ## چالش عامل GitHub Copilot از حالت Agent برای تکمیل چالش زیر استفاده کنید: توضیحات: یک ساختار HTML معنایی برای بخش راهنمای نگهداری گیاه ایجاد کنید که میتواند به پروژه تراریوم اضافه شود. دستور: یک بخش معنایی HTML ایجاد کنید که شامل یک عنوان اصلی "راهنمای نگهداری گیاه" و سه زیربخش با عناوین "آبیاری"، "نیازمندیهای نور" و "مراقبت خاک" باشد، که هرکدام شامل یک پاراگراف اطلاعات نگهداری گیاه هستند. از تگهای معنایی مناسب مثل <section>, <h2>, <h3>, و <p> برای ساختاردهی محتوا به صورت مناسب استفاده کنید. درباره حالت agent بیشتر بیاموزید. ## چالش بررسی تاریخچه HTML یادگیری درباره تکامل وب HTML از زمان ایجاد اولین مرورگر وب توسط تیم برنرز-لی در CERN در سال ۱۹۹۰ به شدت تکامل یافته است. برخی تگهای قدیمی مانند <marquee> اکنون منسوخ شدهاند زیرا با استانداردهای دسترسیپذیری مدرن و اصول طراحی واکنشگرا سازگار نیستند. این آزمایش را امتحان کنید: 1. موقتاً عنوان <h1> خود را در تگ <marquee> بگذارید: <marquee><h1>تراریوم من</h1></marquee> 2. صفحه را در مرورگر باز کنید و эффект پیمایش را مشاهده کنید 3. فکر کنید چرا این تگ منسوخ شده است (راهنما: به تجربه کاربری و دسترسی فکر کنید) 4. تگ <marquee> را حذف کنید و به مارکآپ معنایی بازگردید سوالات بازتابی: - چگونه عنوان متحرک میتواند برای کاربران با اختلالات بینایی یا حساسیت به حرکت مشکلساز باشد؟ - چه تکنیکهای CSS مدرنی میتوانند افکتهای بصری مشابه را به صورت دسترسیپذیرتر ایجاد کنند؟ - چرا استفاده از استانداردهای وب مدرن به جای عناصر منسوخ شده اهمیت دارد؟ بیشتر درباره عناصر منسوخ و منسوخ شده HTML برای درک چگونگی پیشرفت استانداردهای وب جهت بهبود تجربه کاربری مطالعه کنید. ## آزمون پس از درس آزمون پس از درس ## مرور و مطالعه خودآموز دانش HTML خود را عمیقتر کنید HTML بیش از ۳۰ سال است که پایه وب بوده و از یک زبان ساده نشانهگذاری سند به یک پلتفرم پیشرفته برای ساخت برنامههای تعاملی تبدیل شده است. درک این تکامل به شما کمک میکند استانداردهای مدرن وب را بهتر بفهمید و تصمیمات توسعه بهتری بگیرید. مسیرهای یادگیری پیشنهادی: 1. تاریخچه و تکامل HTML - مطالعه خط زمان از HTML 1.0 تا HTML5 - بررسی دلیل منسوخ شدن برخی تگها (دسترسیپذیری، موبایلدوستی، قابلیت نگهداری) - تحقیق درباره قابلیتها و پیشنهادات جدید HTML 2. عمق معناشناسی HTML - مطالعه فهرست کامل عناصر معنایی HTML5 - تمرین شناسایی موارد استفاده از <article>, <section>, <aside>, و <main> - یادگیری درباره ویژگیهای ARIA برای افزایش دسترسی 3. توسعه وب مدرن - بررسی ساخت وبسایت واکنشگرا در Microsoft Learn - درک نحوه ادغام HTML با CSS و JavaScript - یادگیری درباره عملکرد وب و بهترین شیوههای SEO سوالات بازتابی: - کدام تگهای منسوخ HTML را کشف کردید و چرا حذف شدند؟ - چه ویژگیهای جدید HTML برای نسخههای آینده پیشنهاد شدهاند؟ - HTML معنایی چگونه به دسترسی وب و SEO کمک میکند؟ ### ⚡ چه کاری میتوانید در ۵ دقیقه بعد انجام دهید - [ ] ابزار توسعهدهنده (DevTools) را باز کرده و ساختار HTML وبسایت محبوب خود را بررسی کنید - [ ] یک فایل HTML ساده بسازید با تگهای پایه: <h1>, <p>, و <img> - [ ] HTML خود را با استفاده از W3C HTML Validator آنلاین اعتبارسنجی کنید - [ ] سعی کنید کامنتی به HTML خود اضافه کنید با <!-- comment --> ### 🎯 چه دستاوردهایی میتوانید در این ساعت داشته باشید - [ ] آزمون پس از درس را کامل کرده و مفاهیم HTML معنایی را مرور کنید - [ ] یک صفحه وب ساده درباره خودتان بسازید با ساختار HTML مناسب - [ ] با سطوح مختلف عنوان و تگهای قالببندی متن آزمایش کنید - [ ] تصاویر و لینکها اضافه کنید تا تمرین ادغام چندرسانهای داشته باشید - [ ] درباره ویژگیهای HTML5 که هنوز امتحان نکردهاید تحقیق کنید ### 📅 سفر یک هفتهای شما با HTML - [ ] تمرین پروژه تراریوم با مارکآپ معنایی را کامل کنید - [ ] یک وبسایت قابل دسترس بسازید با برچسبها و نقشهای ARIA - [ ] تمرین ساخت فرم با انواع ورودیهای مختلف - [ ] کاوش APIهای HTML5 مانند localStorage یا geolocation - [ ] مطالعه الگوهای HTML واکنشگرا و طراحی موبایلاول - [ ] مرور کد HTML دیگر توسعهدهندگان برای بهترین شیوهها ### 🌟 بنیاد وب ماهانه شما - [ ] ساخت وبسایت نمونه کار با نشان دادن مهارتهای HTML خود - [ ] یادگیری قالببندی HTML با یک فریمورک مانند Handlebars - [ ] مشارکت در پروژههای متنباز با بهبود مستندات HTML - [ ] تسلط بر مفاهیم پیشرفته HTML مانند عناصر سفارشی - [ ] ادغام HTML با فریمورکهای CSS و کتابخانههای JavaScript - [ ] راهنمایی دیگران که در حال یادگیری مبانی HTML هستند ## 🎯 جدول زمانی تسلط بر HTML شما ### 🛠️ خلاصه جعبهابزار HTML شما پس از اتمام این درس، اکنون دارید: - ساختار سند: پایه کامل HTML5 با DOCTYPE مناسب - مارکآپ معنایی: تگهای معنادار که دسترسی و SEO را افزایش میدهند - ادغام تصاویر: سازماندهی فایل مناسب و اصول استفاده از متن جایگزین - کانتینرهای طرحبندی: استفاده استراتژیک از div ها با نام کلاسهای توصیفی - آگاهی از دسترسیپذیری: درک ناوبری خواننده صفحه - استانداردهای مدرن: شیوههای فعلی HTML5 و دانش تگهای منسوخ شده - پایه پروژه: پایهای محکم برای استایل دهی CSS و تعامل JavaScript گام بعدی: ساختار HTML شما برای استایلدهی CSS آماده است! پایه معنایی که ساختهاید باعث میشود درس بعدی بسیار آسانتر شود. ## تمرین تمرین HTML خود: ساخت یک شبیهساز وبلاگ --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> سلب مسئولیت: این سند با استفاده از سرویس ترجمه هوش مصنوعی Co-op Translator ترجمه شده است. هرچند ما برای دقت تلاش میکنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است حاوی خطاها یا نادرستیهایی باشند. سند اصلی به زبان بومی خود منبع معتبر محسوب میشود. برای اطلاعات حیاتی، ترجمه حرفهای انسانی توصیه میگردد. ما مسئول هیچ گونه سوء تفاهم یا تفسیر نادرست ناشی از استفاده از این ترجمه نمیباشیم. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
پروژه تراریوم قسمت دوم: معرفی CSS
یادتان هست که تراریوم HTML شما چقدر ساده به نظر میرسید؟ CSS همان جایی است که آن ساختار ساده را به چیزی جذاب و دیدنی تبدیل میکنیم. اگر HTML مانند ساختن چارچوب یک خانه باشد، CSS همه چیزهایی است که آن خانه را مثل یک خانه واقعی حس میکند - رنگهای نقاشی، چیدمان مبلمان، نورپردازی و نحوه جریان یافتن اتاقها. تصور کنید کاخ ورسای چگونه از یک کلبه ساده شکار شروع شد، اما توجه دقیق به تزئینات و چیدمان آن را به یکی از زیباترین ساختمانهای جهان تبدیل کرد. امروز، تراریوم شما را از یک ساختار ساده به یک ساختار صیقلی و جذاب تبدیل خواهیم کرد. یاد خواهید گرفت که چگونه عناصر را به دقت موقعیتدهی کنید، چیدمانها را به اندازههای مختلف صفحه نمایش واکنشگرا بسازید و جذابیت بصریای ایجاد کنید که وبسایتها را گیراتر میکند. تا پایان این درس، خواهید دید که چگونه استایلدهی راهبردی CSS میتواند پروژه شما را به شکل قابلتوجهی بهبود بخشد. بیایید کمی به تراریوم شما سبک بدهیم. ## آزمون پیش از کلاس آزمون پیش از کلاس ## شروع با CSS CSS اغلب فقط به عنوان "زیبا کردن چیزها" شناخته میشود، اما نقش بسیار گستردهتری دارد. CSS مانند کارگردان یک فیلم است - شما کنترل میکنید که همه چیز نه تنها چگونه دیده شود، بلکه چگونه حرکت کند، به تعاملی پاسخ دهد و خودش را با شرایط متفاوت تطبیق دهد. CSS مدرن تواناییهای شگفتآوری دارد. میتوانید کدی بنویسید که به طور خودکار چیدمانها را برای تلفنها، تبلتها و کامپیوترهای رومیزی تنظیم کند. میتوانید حرکات نرمی بسازید که توجه کاربران را به جایی که لازم است هدایت کند. وقتی همه چیز با هم کار کند، نتایج میتواند بسیار چشمگیر باشد. در این درس چه کار خواهیم کرد: - ایجاد طراحی کامل بصری برای تراریوم شما با استفاده از تکنیکهای مدرن CSS - کاوش مفاهیم بنیادی مثل cascade، inheritance، و انتخابگرهای CSS - پیادهسازی موقعیتدهی واکنشگرا و استراتژیهای چیدمان - ساخت کانتینر تراریوم با استفاده از شکلها و استایلهای CSS ### پیشنیاز باید ساختار HTML تراریومتان را از درس قبلی کامل کرده باشید و آماده استایلدهی باشد. ### تنظیم فایل CSS شما قبل از شروع استایلدهی، باید CSS را به HTML متصل کنیم. این اتصال به مرورگر میگوید کجا باید دستورهای استایلدهی تراریوم ما را پیدا کند. در پوشه تراریوم خود، یک فایل جدید به نام style.css بسازید، سپس آن را در بخش <head> سند HTML خود لینک کنید: این کد چه کاری انجام میدهد: - ایجاد ارتباط بین فایلهای HTML و CSS شما - گفتن به مرورگر برای بارگذاری و اعمال استایلها از فایل style.css - استفاده از ویژگی rel="stylesheet" برای مشخص کردن اینکه این یک فایل CSS است - ارجاع مسیر فایل با href="./style.css" ## درک Cascade در CSS تا به حال فکر کردهاید چرا CSS را style sheetsهای cascading یا به عبارتی سلسلهمراتبی مینامند؟ استایلها مانند آبشار پایین میآیند و گاهی با هم تداخل دارند. مثل ساختار فرماندهی نظامی را در نظر بگیرید - یک دستور کلی ممکن است بگوید "همه سربازها سبز بپوشند"، اما یک دستور خاص به یگان شما میتواند بگوید "برای مراسم لباس رسمی آبی بپوشید". دستور خاص تر برنده است. CSS نیز از منطق مشابهی پیروی میکند و فهم این سلسلهمراتب دیباگ کردن را بسیار سادهتر میکند. ### آزمایش اولویت Cascade بیایید ببینیم cascade چگونه عمل میکند با ایجاد یک تضاد استایل. ابتدا یک استایل درون خطی به تگ <h1> اضافه کنید: این کد چه کاری انجام میدهد: - اعمال رنگ قرمز به صورت مستقیم روی عنصر <h1> با استایل درون خطی - استفاده از ویژگی style برای درج CSS مستقیماً در HTML - ایجاد بالاترین اولویت برای این عنصر خاص سپس این قاعده را به فایل style.css اضافه کنید: در بالا ما: - تعریف قاعده CSS برای همه عناصر <h1> - تنظیم رنگ متن به آبی با استفاده از فایل استایل خارجی - ایجاد قاعدهای با اولویت کمتر نسبت به استایل درون خطی ✅ سؤال دانش: کدام رنگ در وباپ شما نمایش داده میشود؟ چرا آن رنگ برنده است؟ میتوانید موقعیتهایی یادآوری کنید که بخواهید استایلها را روی هم بنویسید؟ ## ارثبری CSS در عمل ارثبری CSS شبیه وراثت ژنتیکی است - عناصر برخی خصوصیات را از اجداد خود میگیرند. اگر خانواده فونت را در عنصر body تنظیم کنید، تمام متن داخل به طور خودکار از آن فونت استفاده میکند. این شبیه به این است که چطور فک متمایز خانواده هابسبورگها در نسلهای مختلف بدون تعیین جداگانه برای هر فرد ظاهر میشد. اما همه چیز ارث نمیبرد. سبکهای متنی مثل فونتها و رنگها ارث میبرند، اما ویژگیهای چیدمان مانند حاشیهها و حاشیهنماها (border) اینطور نیستند. همانگونه که کودکان ممکن است ویژگی فیزیکی والدین را به ارث ببرند ولی سبک لباس پوشیدن آنها را نه. ### مشاهده ارثبری فونت بیایید ارثبری را با تنظیم فونت برای عنصر <body> ببینیم: توضیح آنچه رخ میدهد: - تنظیم خانواده فونت برای کل صفحه با هدف قرار دادن عنصر <body> - استفاده از استک فونت با گزینههای پشتیبان برای سازگاری بهتر با مرورگرها - اعمال فونتهای مدرن سیستمی که در سیستمعاملهای مختلف خوب به نظر میرسند - اطمینان از اینکه همه عناصر فرزند این فونت را به ارث میبرند مگر اینکه به طور خاص پوشش داده شود ابزار توسعهدهنده مرورگر خود را باز کنید (F12)، به تب Elements بروید و عنصر <h1> خود را بررسی کنید. خواهید دید که خانواده فونت را از body به ارث میبرد: ✅ زمان آزمایش: سعی کنید ویژگیهای ارثبرنده دیگری مانند color، line-height یا text-align را روی <body> تنظیم کنید. چه اتفاقی برای عنوان و سایر عناصر میافتد؟ ### 🔄 بررسی آموزشی درک پایهای CSS: قبل از رفتن به انتخابگرها، اطمینان حاصل کنید که میتوانید: - ✅ تفاوت بین cascade و inheritance را توضیح دهید - ✅ پیشبینی کنید که در تعارض specificity کدام استایل برنده میشود - ✅ ویژگیهایی که از والد به ارث میرسند را مشخص کنید - ✅ اتصال فایلهای CSS به HTML را به درستی انجام دهید آزمون سریع: اگر این استایلها را داشته باشید، رنگ یک <h1> درون <div class="special"> چه خواهد بود؟ پاسخ: قرمز (انتخابگر عنصر مستقیماً روی h1 اعمال میشود) ## تسلط بر انتخابگرهای CSS انتخابگرهای CSS نحوه هدفگیری عناصر خاص برای استایلدهی هستند. آنها شبیه دادن دستورالعمل دقیقاند - به جای گفتن "خانه"، ممکن است بگویید "خانه آبی با درب قرمز در خیابان میپل". CSS روشهای مختلفی برای تعیین دقت دارد، و انتخاب انتخابگر درست مانند انتخاب ابزار مناسب برای کار است. گاهی شما باید به همه درهای محله استایل دهید و گاهی فقط یک درب خاص. ### انتخابگرهای عنصر (تگها) انتخابگرهای عنصر با نام تگ HTML هدف قرار میدهند. آنها برای تنظیم سبکهای پایه ایدهآلند که به طور گسترده در صفحه اعمال میشوند: درک این استایلها: - تنظیم تایپوگرافی سازگار برای کل صفحه با انتخابگر body - حذف حاشیهها و padding پیشفرض مرورگر برای کنترل بهتر - استایلدهی به تمام عناصر عنوان با رنگ، تراز و فاصلهبندی - استفاده از واحد rem برای اندازه فونت قابل تنظیم و قابل دسترس در حالی که انتخابگرهای عنصر برای استایلدهی عمومی خوب کار میکنند، برای استایل دادن به اجزای خاص مثل گیاهان تراریوم نیاز به انتخابگرهای دقیقتر دارید. ### انتخابگرهای id برای عناصر منحصربهفرد انتخابگرهای id با نماد # استفاده میشوند و عناصر با شناسه (id) خاص را هدف میگیرند. چون idها باید در یک صفحه یکتا باشند، برای استایلدهی به عناصر خاص و منحصربهفرد مثل کانتینرهای گیاه سمت چپ و راست که در تراریوم داریم ایدهآلاند. بیایید استایلدهی کانتینرهای جانبی تراریوم که گیاهان داخل آنها قرار میگیرند را بسازیم: این کد چه کار میکند: - موقعیتدهی کانتینرها در لبههای چپ و راست با موقعیت absolute - استفاده از واحد vh (ارتفاع صفحه نمایش) برای ارتفاع واکنشگرا که به اندازه صفحه نمایش واکنش نشان میدهد - اعمال box-sizing: border-box برای این که padding در عرض کل حساب شود - حذف واحدهای px غیرضروری از مقادیر صفر برای کد تمیزتر - تنظیم رنگ پسزمینه ملایمی که از خاکستری شدید چشم را کمتر خسته میکند ✅ چالش کیفیت کد: توجه کنید چطور این CSS اصل DRY (تکرار نکن خودت) را نقض میکند. میتوانید با ترکیب یک id و یک کلاس آن را بهینه کنید؟ روش بهبود یافته: ### انتخابگرهای کلاس برای سبکهای قابل استفاده مجدد انتخابگرهای کلاس با نماد . استفاده میشوند و وقتی که میخواهید استایلهای یکسان را به تعداد زیادی عنصر اعمال کنید عالیاند. برخلاف idها، کلاسها را میتوانید در سراسر HTML خود مجدداً استفاده کنید، که آنها را برای الگوهای استایلدهی یکنواخت ایدهآل میکند. در تراریوم ما، هر گیاه نیاز به استایل مشابهی دارد ولی همچنین نیاز به موقعیتدهی منحصربهفردی دارد. ما ترکیبی از کلاسها برای استایلهای مشترک و شناسهها برای موقعیتدهی منحصربهفرد استفاده خواهیم کرد. اینجا ساختار HTML برای هر گیاه است: عناصر کلیدی توضیح داده شده: - استفاده از class="plant-holder" برای استایل ثابت کانتینر برای همه گیاهان - اعمال class="plant" برای استایل و رفتار مشترک تصاویر - شامل شناسه منحصر به فرد id="plant1" برای موقعیتیابی فردی و تعامل جاوااسکریپت - ارائه متن جایگزین توصیفی برای دسترسیپذیری نابینایان اکنون این استایلها را به فایل style.css خود اضافه کنید: توضیح این استایلها: - ایجاد موقعیتدهی نسبی برای نگهدارنده گیاه برای ایجاد زمینه موقعیتدهی - تنظیم هر نگهدارنده روی ۱۳٪ ارتفاع، تا همه گیاهان به صورت عمودی بدون اسکرول جا شوند - چرخش نگهدارندهها کمی به سمت چپ برای بهبود تمرکز گیاهان در ظرف خودشان - امکان اندازهگیری واکنشگرای گیاه با خصوصیات max-width و max-height - استفاده از z-index برای قرار دادن گیاهان روی سایر عناصر تراریوم - افزودن افکت هاور ملایم با ترنزیشنهای CSS برای تعامل بهتر کاربر ✅ تفکر نقادانه: چرا به هر دو انتخابگر .plant-holder و .plant نیاز داریم؟ اگر فقط یکی را استفاده کنیم چه اتفاقی میافتد؟ ## درک موقعیتدهی CSS موقعیتدهی CSS مانند کارگردان صحنه نمایش است - شما مشخص میکنید هر بازیگر کجا بایستد و چگونه روی صحنه حرکت کند. برخی بازیگران طبق چینش استاندارد حرکت میکنند، برخی دیگر برای اثر دراماتیک نیاز به موقعیتدهی خاص دارند. وقتی موقعیتدهی را فهمیدید، بسیاری از چالشهای چیدمان قابل مدیریت میشوند. نیاز به نوار ناوبری که هنگام اسکرول کردن صفحه چسبیده بماند دارید؟ موقعیتدهی این را امکانپذیر میکند. میخواهید راهنمای ابزار (tooltip) در نقطه خاصی ظاهر شود؟ این هم موقعیتدهی است. ### پنج مقدار موقعیتدهی ### موقعیتدهی در تراریوم ما تراریوم ما از ترکیب راهبردی انواع موقعیتدهی استفاده میکند تا چیدمان دلخواه ایجاد شود: درک راهبرد موقعیتدهی: - کانتینرهای absolute از جریان معمول سند خارج شده و به لبههای صفحه چسبیدهاند - نگهدارندههای گیاه relative زمینه موقعیتدهی ایجاد کرده در حالی که در جریان سند باقی میمانند - گیاهان absolute میتوانند دقیقاً داخل کانتینرهای نسبی موقعیتدهی شوند - این ترکیب اجازه میدهد گیاهان به صورت عمودی روی هم قرار بگیرند و در عین حال هر کدام موقعیتیابی فردی داشته باشند ✅ زمان آزمایش: سعی کنید مقادیر موقعیتدهی را تغییر دهید و نتایج را مشاهده کنید: - چه اتفاقی میافتد اگر .container را از absolute به relative تغییر دهید؟ - چیدمان چگونه تغییر میکند اگر .plant-holder به جای relative از absolute استفاده کند؟ - وقتی که موقعیت .plant را به relative تغییر میدهید چه اتفاقی میافتد؟ ### 🔄 بازبینی آموزشی تسلط بر موقعیتدهی CSS: مکث کنید تا درک خود را بررسی کنید: - ✅ آیا میتوانید توضیح دهید چرا گیاهان برای کشیدن و رها کردن به موقعیتیابی مطلق نیاز دارند؟ - ✅ آیا میدانید ظرفهای نسبی چگونه زمینه موقعیتیابی ایجاد میکنند؟ - ✅ چرا ظرفهای جانبی از موقعیتیابی مطلق استفاده میکنند؟ - ✅ اگر اعلامیههای موقعیت را کاملاً حذف کنید چه اتفاقی میافتد؟ ارتباط با دنیای واقعی: درباره چگونگی منعکس شدن موقعیتدهی CSS از چیدمان دنیای واقعی فکر کنید: - Static: کتابها روی قفسه (ترتیب طبیعی) - Relative: حرکت دادن کمی کتاب اما نگه داشتن جای آن - Absolute: قرار دادن نشانگر کتاب روی شماره صفحه دقیق - Fixed: یادداشت چسبندهای که هنگام ورق زدن صفحات، قابل مشاهده باقی میماند ## ساخت تراریوم با CSS اکنون یک شیشه تراریوم شیشهای فقط با استفاده از CSS میسازیم — بدون نیاز به تصاویر یا نرمافزار گرافیکی. ایجاد شیشه واقعی، سایهها و عمق با استفاده از موقعیتیابی و شفافیت قابلیتهای بصری CSS را نشان میدهد. این تکنیک شبیه نحوه استفاده معماران مکتب باهاوس از اشکال هندسی ساده برای ساخت سازههای زیبا و پیچیده است. وقتی این اصول را متوجه شوید، تکنیکهای CSS پشت بسیاری از طراحیهای وب را خواهید شناخت. ### ساخت اجزای شیشه تراریوم بیایید شیشه تراریوم را قطعه به قطعه بسازیم. هر قسمت از موقعیتیابی مطلق و اندازهگیری بر اساس درصد برای طراحی واکنشگرا استفاده میکند: درک ساخت تراریوم: - استفاده از ابعاد درصدی برای مقیاسبندی واکنشگرا در همه اندازههای صفحه - مکانیابی عناصر به صورت مطلق برای چیدن و تراز دقیق آنها - اعمال مقادیر مختلف شفافیت برای ایجاد اثر شفافیت شیشه - اجرای لایهبندی z-index برای اینکه گیاهان داخل شیشه نمایش داده شوند - افزودن سایههای ملایم و شعاع مرز ظریف برای ظاهر واقعیتر ### طراحی واکنشگرا با درصدها توجه کنید که همه ابعاد به جای پیکسل ثابت، بر اساس درصد هستند: چرا این مهم است: - تضمین مقیاس متناسب تراریوم در هر اندازه صفحه - حفظ روابط بصری بین اجزای شیشه - ایجاد تجربهی یکنواخت از تلفن همراه تا مانیتورهای بزرگ دسکتاپ - امکان تطبیق طراحی بدون خراب شدن چیدمان بصری ### واحدهای CSS به کار رفته ما از واحد rem برای شعاع مرز استفاده میکنیم که نسبت به اندازه فونت اصلی مقیاس میگیرد. این طراحیهای قابل دسترستر را ایجاد میکند که ترجیحات فونت کاربر را رعایت میکنند. برای اطلاعات بیشتر درباره واحدهای نسبی CSS به مشخصات رسمی مراجعه کنید. ✅ آزمایش بصری: مقادیر را تغییر دهید و اثرات را مشاهده کنید: - شفافیت شیشه را از 0.5 به 0.8 تغییر دهید — این چگونه ظاهر شیشه را تغییر میدهد؟ - رنگ خاک را از #3a241d به #8B4513 تغییر دهید — چه تأثیری در ظاهر دارد؟ - مقدار z-index خاک را به 2 تغییر دهید — چه اتفاقی در لایهبندی میافتد؟ ### 🔄 بازبینی آموزشی درک طراحی بصری CSS: درک خود را از طراحی بصری CSS تأیید کنید: - ✅ چگونه ابعاد بر اساس درصد طراحی واکنشگرا ایجاد میکنند؟ - ✅ چرا شفافیت اثر شفافیت شیشه را ایجاد میکند؟ - ✅ نقش z-index در لایهبندی عناصر چیست؟ - ✅ چگونه مقادیر شعاع مرز شکل شیشه را ایجاد میکنند؟ اصل طراحی: توجه کنید چگونه ما شکلهای پیچیده را از اشکال ساده میسازیم: 1. مستطیلها → مستطیلهای گرد → اجزای شیشه 2. رنگهای تخت → شفافیت → اثر شیشهای 3. عناصر منفرد → ترکیب لایهای → ظاهر سهبعدی --- ## چالش GitHub Copilot Agent 🚀 با حالت Agent چالش زیر را کامل کنید: توضیح: انیمیشن CSS ایجاد کنید که گیاهان تراریوم به آرامی به جلو و عقب تاب بخورند و اثر نسیم طبیعی را شبیهسازی کند. این به شما کمک میکند تمرین انیمیشنها، تبدیلات و فریمهای کلیدی CSS را انجام دهید و جذابیت بصری تراریومتان را افزایش دهید. دستور: انیمیشنهای فریم کلیدی CSS اضافه کنید تا گیاهان داخل تراریوم آرام به دو طرف تاب بخورند. یک انیمیشن تابخوردن ایجاد کنید که هر گیاه را کمی (2-3 درجه) به چپ و راست میچرخاند با مدت 3-4 ثانیه و آن را به کلاس .plant نسبت دهید. اطمینان حاصل کنید که انیمیشن به صورت نامحدود حلقه زده و تابع تسهیل برای حرکت طبیعی دارد. اطلاعات بیشتر درباره حالت agent را اینجا بیابید. ## 🚀 چالش: افزودن بازتابهای شیشهای آمادهاید تراریوم خود را با بازتابهای شیشهای واقعیتر کنید؟ این تکنیک عمق و واقعنمایی به طراحی اضافه میکند. شما نقاط برجسته ملایمی ایجاد خواهید کرد که بازتاب نور از سطوح شیشه را شبیهسازی میکند. این روش مشابه نحوه استفاده نقاشان رنسانس مانند جان فان آیک از نور و بازتاب برای واقعی به نظر رسیدن شیشه نقاشی شده است. هدف شما این است: چالش شما: - ایجاد اشکال بیضی سفید یا رنگ روشن برای بازتاب شیشه - قرار دادن آنها به صورت استراتژیک در سمت چپ شیشه - اعمال شفافیت و اثر محو مناسب برای بازتاب نور واقعی - استفاده از border-radius برای ایجاد اشکال ارگانیک مانند حباب - آزمایش با گرادیانتها یا سایههای باکس برای واقعنمایی بهتر ## آزمون پس از جلسه آزمون پس از جلسه ## گسترش دانش CSS خود CSS ممکن است در ابتدا پیچیده به نظر برسد اما درک این مفاهیم اصلی پایهای محکم برای تکنیکهای پیشرفتهتر فراهم میکند. زمینههای بعدی یادگیری CSS شما: - Flexbox — سادهسازی تراز و توزیع عناصر - CSS Grid — ابزارهای قدرتمند برای ساخت چیدمان پیچیده - متغیرهای CSS — کاهش تکرار و بهبود نگهداری کد - طراحی واکنشگرا — تضمین عملکرد خوب سایتها در اندازههای مختلف صفحه ### منابع یادگیری تعاملی این مفاهیم را با بازیهای جذاب و تعاملی تمرین کنید: - 🐸 Flexbox Froggy — تسلط بر Flexbox با چالشهای سرگرمکننده - 🌱 Grid Garden — یادگیری CSS Grid با کاشت هویج مجازی - 🎯 CSS Battle — تست مهارت CSS با چالشهای برنامهنویسی ### یادگیری بیشتر برای مبانی کامل CSS این ماژول Microsoft Learn را تکمیل کنید: سبک دادن به برنامه HTML خود با CSS ### ⚡ چه کاری میتوانید در ۵ دقیقه بعدی انجام دهید - [ ] باز کردن DevTools و بررسی استایلهای CSS در هر وبسایتی با پنل Elements - [ ] ساخت یک فایل CSS ساده و لینک دادن به صفحه HTML - [ ] تلاش برای تغییر رنگها با روشهای مختلف: هگز، RGB و نام رنگها - [ ] تمرین مدل باکس با افزودن padding و margin به یک div ### 🎯 چه کاری میتوانید در این ساعت انجام دهید - [ ] تکمیل آزمون پس از درس و مرور مبانی CSS - [ ] سبک دادن به صفحه HTML با فونت، رنگ و فاصلهها - [ ] ساخت چیدمان ساده با flexbox یا grid - [ ] آزمایش انتقالهای CSS برای افکتهای نرم - [ ] تمرین طراحی واکنشگرا با media queries ### 📅 ماجراجویی یک هفتهای CSS شما - [ ] تکمیل تمرین استایل دادن تراریوم با خلاقیت - [ ] تسلط بر CSS Grid با ساخت چیدمان گالری عکس - [ ] یادگیری انیمیشنهای CSS برای زنده کردن طراحیها - [ ] بررسی پروسسورهای CSS مانند Sass یا Less - [ ] مطالعه اصول طراحی و اعمال آن در CSS - [ ] تحلیل و بازسازی طراحیهای جالب در اینترنت ### 🌟 تسلط طراحی یک ماهه شما - [ ] ساخت یک سیستم طراحی وبسایت کاملاً واکنشگرا - [ ] یادگیری CSS-in-JS یا فریمورکهای utility-first مانند Tailwind - [ ] همکاری در پروژههای متنباز با بهبودهای CSS - [ ] تسلط بر مفاهیم پیشرفته CSS مانند properties سفارشی و containment - [ ] ایجاد کتابخانههای کامپوننت قابل استفاده مجدد با CSS ماژولار - [ ] آموزش به دیگران در یادگیری CSS و اشتراک دانش طراحی ## 🎯 جدول زمانی تسلط شما بر CSS ### 🛠️ خلاصه جعبهابزار CSS شما پس از این درس، اکنون شما: - درک Cascade: چگونه استایلها به ارث میرسند و بر هم تقدم دارند - تسلط بر Selector ها: هدفگیری دقیق با عناصر، کلاسها و آیدیها - مهارتهای موقعیتیابی: قرار دادن استراتژیک عناصر و لایهبندی - طراحی بصری: ایجاد اثرات شیشه، سایه و شفافیت - تکنیکهای واکنشگرا: چیدمانهای درصدی که با هر صفحهای سازگارند - سازماندهی کد: ساختار CSS تمیز و قابل نگهداری - روشهای مدرن: استفاده از واحدهای نسبی و الگوهای طراحی قابل دسترس قدمهای بعدی: تراریوم شما اکنون هم ساختار (HTML) هم استایل (CSS) دارد. درس نهایی تعاملی بودن با جاوااسکریپت را اضافه خواهد کرد! ## تمرین بازسازی CSS --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> سلب مسئولیت: این سند با استفاده از سرویس ترجمه هوش مصنوعی Co-op Translator ترجمه شده است. در حالی که ما در تلاش برای دقت هستیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است حاوی اشتباهات یا نادرستیهایی باشند. سند اصلی به زبان بومی خود، منبع معتبر در نظر گرفته شود. برای اطلاعات حساس، ترجمه حرفهای انسانی توصیه میشود. ما مسئول هیچگونه سوءتفاهم یا تفسیر نادرستی که ناشی از استفاده از این ترجمه باشد، نمیباشیم. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium-projekti Osa 1: Johdatus HTML:ään
HTML eli HyperText Markup Language on jokaisen verkkosivun perusta, jonka olet koskaan vieraillut. Ajattele HTML:ää verkkosivujen "luurankona" – se määrittää, mihin sisältö sijoitetaan, miten se järjestetään ja mitä kukin osa edustaa. Vaikka CSS myöhemmin "pukee" HTML:n väreillä ja asetteluilla ja JavaScript tuo siihen interaktiivisuutta, HTML tarjoaa olennaisen rakenteen, joka tekee kaiken muun mahdolliseksi. Tässä oppitunnissa luot HTML-rakenteen virtuaaliselle terraario-käyttöliittymälle. Tämä käytännön projekti opettaa sinulle HTML:n peruskäsitteitä samalla, kun rakennat visuaalisesti houkuttelevaa sisältöä. Opit järjestämään sisältöä semanttisten elementtien avulla, työskentelemään kuvien kanssa ja luomaan perustan interaktiiviselle verkkosovellukselle. Oppitunnin lopussa sinulla on toimiva HTML-sivu, joka näyttää kasvikuvia järjestetyissä sarakkeissa ja on valmis tyyliteltäväksi seuraavassa oppitunnissa. Älä huoli, jos se näyttää aluksi yksinkertaiselta – juuri siltä HTML:n kuuluukin näyttää ennen kuin CSS lisää visuaalista viimeistelyä. ## Ennakkokysely Ennakkokysely ## Projektin valmistelu Ennen kuin sukellamme HTML-koodiin, luodaan kunnollinen työtila terraario-projektillesi. Järjestelmällisen tiedostorakenteen luominen alusta alkaen on tärkeä tapa, joka hyödyttää sinua koko verkkokehitysmatkasi ajan. ### Tehtävä: Luo projektirakenne Luo oma kansio terraario-projektillesi ja lisää ensimmäinen HTML-tiedostosi. Tässä on kaksi lähestymistapaa, joita voit käyttää: Vaihtoehto 1: Visual Studio Code -editorin käyttö 1. Avaa Visual Studio Code 2. Klikkaa "File" → "Open Folder" tai käytä Ctrl+K, Ctrl+O (Windows/Linux) tai Cmd+K, Cmd+O (Mac) 3. Luo uusi kansio nimeltä terrarium ja valitse se 4. Explorer-paneelissa klikkaa "New File" -ikonia 5. Nimeä tiedostosi index.html Vaihtoehto 2: Käytä terminaalikomentoja Mitä nämä komennot tekevät: - Luo uuden hakemiston nimeltä terrarium projektillesi - Siirtyy terraariohakemistoon - Luo tyhjän index.html-tiedoston - Avaa tiedoston Visual Studio Codessa muokattavaksi ## HTML-dokumentin rakenteen ymmärtäminen Jokainen HTML-dokumentti noudattaa tiettyä rakennetta, jonka selaimet tarvitsevat ymmärtääkseen ja näyttääkseen sisällön oikein. Ajattele tätä rakennetta kuin virallista kirjettä – siinä on vaadittuja elementtejä tietyssä järjestyksessä, jotka auttavat vastaanottajaa (tässä tapauksessa selainta) käsittelemään sisältöä oikein. Aloitetaan lisäämällä jokaisen HTML-dokumentin tarvitsema perusta. ### DOCTYPE-määrittely ja juurielementti HTML-tiedoston kaksi ensimmäistä riviä toimivat dokumentin "esittelynä" selaimelle: Mitä tämä koodi tekee: - Määrittää dokumenttityypin HTML5:ksi käyttämällä <!DOCTYPE html> - Luo juurielementin <html>, joka sisältää kaiken sivun sisällön - Vakiinnuttaa modernit verkkostandardit oikeaa selaimen renderöintiä varten - Varmistaa yhtenäisen ulkoasun eri selaimissa ja laitteissa ### 🔄 Pedagoginen tarkistus Pysähdy ja pohdi: Ennen kuin jatkat, varmista että ymmärrät: - ✅ Miksi jokainen HTML-dokumentti tarvitsee DOCTYPE-määrittelyn - ✅ Mitä <html>-juurielementti sisältää - ✅ Kuinka tämä rakenne auttaa selaimia renderöimään sivuja oikein Nopea itsearviointi: Voitko selittää omin sanoin, mitä "standardien mukainen renderöinti" tarkoittaa? ## Välttämättömän dokumenttimetadata lisääminen HTML-dokumentin <head>-osio sisältää tärkeää tietoa, jota selaimet ja hakukoneet tarvitsevat, mutta jota vierailijat eivät näe suoraan sivulla. Ajattele sitä "kulissien takana" olevana tietona, joka auttaa verkkosivua toimimaan oikein ja näyttämään oikein eri laitteilla ja alustoilla. Tämä metadata kertoo selaimille, miten sivu näytetään, mitä merkistöä käytetään ja miten eri näyttökokoja käsitellään – kaikki olennaisia asioita ammattimaisen ja saavutettavan verkkosivun luomisessa. ### Tehtävä: Lisää dokumentin pääosa Lisää tämä <head>-osio avaus- ja sulkevien <html>-tagien väliin: Mitä kukin elementti tekee: - Asettaa sivun otsikon, joka näkyy selaimen välilehdissä ja hakutuloksissa - Määrittää UTF-8-merkistökoodauksen tekstin oikeaa näyttämistä varten maailmanlaajuisesti - Varmistaa yhteensopivuuden Internet Explorerin modernien versioiden kanssa - Konfiguroi responsiivisen suunnittelun asettamalla näkymän laitteen leveyden mukaiseksi - Säätää alkuperäisen zoomaustason sisällön luonnollisen koon näyttämiseksi ## Dokumentin rungon rakentaminen <body>-elementti sisältää kaiken verkkosivusi näkyvän sisällön – kaiken, mitä käyttäjät näkevät ja minkä kanssa he ovat vuorovaikutuksessa. Vaikka <head>-osio antoi ohjeita selaimelle, <body>-osio sisältää varsinaisen sisällön: tekstiä, kuvia, painikkeita ja muita elementtejä, jotka luovat käyttöliittymän. Lisätään rungon rakenne ja ymmärretään, miten HTML-tagit toimivat yhdessä merkityksellisen sisällön luomiseksi. ### HTML-tagin rakenteen ymmärtäminen HTML käyttää parillisia tageja elementtien määrittämiseen. Useimmilla tageilla on avaus-tagi, kuten <p>, ja sulkeva tagi, kuten </p>, joiden välissä on sisältö: <p>Hello, world!</p>. Tämä luo kappale-elementin, joka sisältää tekstin "Hello, world!". ### Tehtävä: Lisää rungon elementti Päivitä HTML-tiedostosi sisältämään <body>-elementti: Mitä tämä kokonaisrakenne tarjoaa: - Luo HTML5-dokumentin peruskehikon - Sisältää olennaisen metadatan oikeaa selaimen renderöintiä varten - Luo tyhjän rungon näkyvälle sisällöllesi - Noudattaa modernin verkkokehityksen parhaita käytäntöjä Nyt olet valmis lisäämään terraarion näkyvät elementit. Käytämme <div>-elementtejä säiliöinä eri sisältöosioiden järjestämiseen ja <img>-elementtejä kasvikuvien näyttämiseen. ### Kuvien ja asettelusäiliöiden käyttö Kuvat ovat erityisiä HTML:ssä, koska ne käyttävät "itse sulkeutuvia" tageja. Toisin kuin elementit, kuten <p></p>, jotka ympäröivät sisältöä, <img>-tagi sisältää kaiken tarvittavan tiedon itsessään käyttämällä attribuutteja, kuten src kuvatiedoston polulle ja alt saavutettavuuden parantamiseksi. Ennen kuin lisäät kuvia HTML:ään, sinun on järjestettävä projektitiedostosi oikein luomalla kuvat-kansio ja lisäämällä kasvigrafiikat. Ensin, valmistele kuvasi: 1. Luo kansio nimeltä images terraario-projektikansiosi sisälle 2. Lataa kasvikuvat ratkaisukansiosta (yhteensä 14 kasvikuvan tiedostoa) 3. Kopioi kaikki kasvikuvat uuteen images-kansioosi ### Tehtävä: Luo kasvien näyttöasettelu Lisää kasvikuvat järjestettyinä kahteen sarakkeeseen <body></body>-tagien väliin: Vaihe vaiheelta, mitä tässä koodissa tapahtuu: - Luo pääsivun säiliön id="page", joka sisältää kaiken sisällön - Määrittää kaksi sarakesäiliötä: left-container ja right-container - Järjestää 7 kasvia vasempaan sarakkeeseen ja 7 kasvia oikeaan sarakkeeseen - Käärii jokaisen kasvikuvan plant-holder-diviin yksittäistä sijoittelua varten - Käyttää yhtenäisiä luokkanimiä CSS-tyylittelyä varten seuraavassa oppitunnissa - Määrittää jokaiselle kasvikuville yksilölliset ID:t JavaScript-vuorovaikutusta varten myöhemmin - Sisältää oikeat tiedostopolut, jotka osoittavat kuvat-kansioon ### 🔄 Pedagoginen tarkistus Rakenteen ymmärtäminen: Käy läpi HTML-rakenteesi: - ✅ Voitko tunnistaa pääsäiliöt asettelussasi? - ✅ Ymmärrätkö, miksi jokaisella kuvalla on yksilöllinen ID? - ✅ Kuinka kuvailisit plant-holder-divien tarkoitusta? Visuaalinen tarkistus: Avaa HTML-tiedostosi selaimessa. Sinun pitäisi nähdä: - Yksinkertainen lista kasvikuvista - Kuvat järjestettyinä kahteen sarakkeeseen - Yksinkertainen, tyylittelemätön asettelu Muista: Tämä yksinkertainen ulkoasu on juuri sitä, miltä HTML:n kuuluukin näyttää ennen CSS-tyylittelyä! Kun tämä merkintä on lisätty, kasvit näkyvät näytöllä, vaikka ne eivät vielä näytä viimeistellyiltä – siihen tarvitaan CSS seuraavassa oppitunnissa! Tällä hetkellä sinulla on vankka HTML-perusta, joka järjestää sisältösi oikein ja noudattaa saavutettavuuden parhaita käytäntöjä. ## Semanttisen HTML:n käyttö saavutettavuuden parantamiseksi Semanttinen HTML tarkoittaa HTML-elementtien valitsemista niiden merkityksen ja tarkoituksen, ei vain ulkonäön perusteella. Kun käytät semanttista merkintää, kommunikoit sisältösi rakenteen ja merkityksen selaimille, hakukoneille ja apuvälineille, kuten näytönlukijoille. Tämä lähestymistapa tekee verkkosivustoistasi saavutettavampia vammaisille käyttäjille ja auttaa hakukoneita ymmärtämään sisältöäsi paremmin. Se on modernin verkkokehityksen perusperiaate, joka luo parempia kokemuksia kaikille. ### Semanttisen sivuotsikon lisääminen Lisätään kunnollinen otsikko terraario-sivullesi. Lisää tämä rivi heti avaus-<body>-tagin jälkeen: Miksi semanttinen merkintä on tärkeää: - Auttaa näytönlukijoita navigoimaan ja ymmärtämään sivun rakennetta - Parantaa hakukoneoptimointia (SEO) selkeyttämällä sisällön hierarkiaa - Lisää saavutettavuutta näkövammaisille tai kognitiivisista eroista kärsiville käyttäjille - Luo parempia käyttäjäkokemuksia kaikilla laitteilla ja alustoilla - Noudattaa verkkostandardeja ja parhaita käytäntöjä ammattimaisessa kehityksessä Esimerkkejä semanttisista vs. ei-semattisista valinnoista: ## Terraariosäiliön luominen Lisätään nyt HTML-rakenne itse terraariolle – lasisäiliölle, johon kasvit lopulta sijoitetaan. Tämä osio havainnollistaa tärkeää konseptia: HTML tarjoaa rakenteen, mutta ilman CSS-tyylittelyä nämä elementit eivät vielä näy kunnolla. Terraarion merkintä käyttää kuvaavia luokkanimiä, jotka tekevät CSS-tyylittelystä intuitiivista ja helposti hallittavaa seuraavassa oppitunnissa. ### Tehtävä: Lisää terraarion rakenne Lisää tämä merkintä viimeisen </div>-tagin yläpuolelle (ennen sivusäiliön sulkevaa tagia): Tämän terraarion rakenteen ymmärtäminen: - Luo pääterraariosäiliön, jolla on yksilöllinen ID tyyl - Määrittää erilliset elementit kullekin visuaaliselle komponentille (yläosa, seinät, multa, pohja) - Sisältää sisäkkäisiä elementtejä lasin heijastusefektejä varten (kiiltävät elementit) - Käyttää kuvailevia luokkanimiä, jotka selkeästi kertovat kunkin elementin tarkoituksen - Valmistelee rakenteen CSS-tyylittelyä varten, joka luo lasiterraarion ulkonäön ### 🔄 Pedagoginen tarkistus HTML-rakenteen hallinta: Ennen kuin etenet, varmista että osaat: - ✅ Selittää HTML-rakenteen ja visuaalisen ulkonäön eron - ✅ Tunnistaa semanttiset ja ei-semanttiset HTML-elementit - ✅ Kuvailla, miten oikea merkintä parantaa saavutettavuutta - ✅ Tunnistaa koko dokumenttipuun rakenteen Ymmärryksen testaaminen: Kokeile avata HTML-tiedostosi selaimessa, jossa JavaScript on pois päältä ja CSS poistettu. Näet näin luomasi puhtaan semanttisen rakenteen! --- ## GitHub Copilot Agent -haaste Käytä Agent-tilaa suorittaaksesi seuraavan haasteen: Kuvaus: Luo semanttinen HTML-rakenne kasvien hoito-ohjeiden osioon, joka voidaan lisätä terraarioprojektiin. Ohje: Luo semanttinen HTML-osio, joka sisältää pääotsikon "Kasvien hoito-ohjeet", kolme alaotsikkoa "Kastelu", "Valon tarpeet" ja "Maan hoito", joista jokainen sisältää kappaleen kasvien hoitoon liittyvää tietoa. Käytä asianmukaisia semanttisia HTML-tageja, kuten <section>, <h2>, <h3> ja <p> sisällön rakenteistamiseen. Lisätietoja agent-tilasta löydät täältä. ## HTML:n historian tutkimushaaste Tietoa verkkokehityksen evoluutiosta HTML on kehittynyt merkittävästi sen jälkeen, kun Tim Berners-Lee loi ensimmäisen verkkoselaimen CERNissä vuonna 1990. Jotkut vanhat tagit, kuten <marquee>, ovat nyt vanhentuneita, koska ne eivät toimi hyvin modernien saavutettavuusstandardien ja responsiivisen suunnittelun periaatteiden kanssa. Kokeile tätä: 1. Kääri <h1>-otsikkosi väliaikaisesti <marquee>-tagiin: <marquee><h1>Minun terraarioni</h1></marquee> 2. Avaa sivusi selaimessa ja tarkkaile vieritysefektiä 3. Mieti, miksi tämä tagi on vanhentunut (vihje: ajattele käyttäjäkokemusta ja saavutettavuutta) 4. Poista <marquee>-tagi ja palaa semanttiseen merkintään Pohdintakysymykset: - Miten vierivä otsikko voisi vaikuttaa käyttäjiin, joilla on näkövamma tai liikeherkkyys? - Mitkä modernit CSS-tekniikat voisivat saavuttaa samanlaisia visuaalisia efektejä saavutettavammin? - Miksi on tärkeää käyttää nykyisiä verkkostandardeja vanhentuneiden elementtien sijaan? Tutustu lisää vanhentuneisiin ja poistettuihin HTML-elementteihin ymmärtääksesi, miten verkkostandardit kehittyvät parantaakseen käyttäjäkokemusta. ## Oppitunnin jälkeinen kysely Oppitunnin jälkeinen kysely ## Kertaus ja itseopiskelu Syvennä HTML-tietämystäsi HTML on ollut verkkosivujen perusta yli 30 vuoden ajan, kehittyen yksinkertaisesta dokumenttien merkintäkielestä monimutkaiseksi alustaksi interaktiivisten sovellusten rakentamiseen. Tämän kehityksen ymmärtäminen auttaa arvostamaan moderneja verkkostandardeja ja tekemään parempia kehityspäätöksiä. Suositellut oppimispolut: 1. HTML:n historia ja kehitys - Tutki aikajanaa HTML 1.0:sta HTML5:een - Selvitä, miksi tietyt tagit poistettiin käytöstä (saavutettavuus, mobiiliystävällisyys, ylläpidettävyys) - Tutki uusia HTML-ominaisuuksia ja ehdotuksia 2. Semanttisen HTML:n syväluotaus - Tutustu HTML5:n semanttisten elementtien täydelliseen listaan - Harjoittele tunnistamaan, milloin käyttää <article>, <section>, <aside> ja <main> - Opi ARIA-attribuuteista saavutettavuuden parantamiseksi 3. Moderni verkkokehitys - Tutustu responsiivisten verkkosivujen rakentamiseen Microsoft Learnissa - Ymmärrä, miten HTML integroituu CSS:n ja JavaScriptin kanssa - Opi verkkosuorituskyvyn ja SEO:n parhaista käytännöistä Pohdintakysymykset: - Mitkä vanhentuneet HTML-tagit löysit, ja miksi ne poistettiin käytöstä? - Mitä uusia HTML-ominaisuuksia ehdotetaan tuleviin versioihin? - Miten semanttinen HTML edistää verkkosivujen saavutettavuutta ja SEO:ta? ### ⚡ Mitä voit tehdä seuraavan 5 minuutin aikana - [ ] Avaa DevTools (F12) ja tarkastele suosikkisivustosi HTML-rakennetta - [ ] Luo yksinkertainen HTML-tiedosto peruselementeillä: <h1>, <p> ja <img> - [ ] Vahvista HTML:si W3C HTML Validator -työkalulla verkossa - [ ] Kokeile lisätä kommentti HTML:si sisään käyttämällä <!-- kommentti --> ### 🎯 Mitä voit saavuttaa tämän tunnin aikana - [ ] Suorita oppitunnin jälkeinen kysely ja kertaa semanttisen HTML:n käsitteet - [ ] Rakenna yksinkertainen verkkosivu itsestäsi käyttäen oikeaa HTML-rakennetta - [ ] Kokeile eri otsikkotasoja ja tekstin muotoilutageja - [ ] Lisää kuvia ja linkkejä harjoitellaksesi multimedia-integraatiota - [ ] Tutki HTML5-ominaisuuksia, joita et ole vielä kokeillut ### 📅 Viikon mittainen HTML-matka - [ ] Suorita terraarioprojektin tehtävä semanttisella merkinnällä - [ ] Luo saavutettava verkkosivu käyttäen ARIA-tunnisteita ja rooleja - [ ] Harjoittele lomakkeiden luomista eri syöttötyypeillä - [ ] Tutki HTML5 API:ita, kuten localStorage tai geolocation - [ ] Opiskele responsiivisia HTML-malleja ja mobiiliystävällistä suunnittelua - [ ] Tarkastele muiden kehittäjien HTML-koodia parhaiden käytäntöjen oppimiseksi ### 🌟 Kuukauden mittainen verkkosivujen perusta - [ ] Rakenna portfoliosivusto, joka esittelee HTML-osaamistasi - [ ] Opi HTML-mallinnusta esimerkiksi Handlebars-kehyksellä - [ ] Osallistu avoimen lähdekoodin projekteihin parantamalla HTML-dokumentaatiota - [ ] Hallitse edistyneitä HTML-käsitteitä, kuten mukautettuja elementtejä - [ ] Integroi HTML CSS-kehysten ja JavaScript-kirjastojen kanssa - [ ] Mentoroi muita, jotka opettelevat HTML:n perusteita ## 🎯 HTML-osaamisen aikajana ### 🛠️ HTML-työkalupakin yhteenveto Tämän oppitunnin jälkeen sinulla on: - Dokumenttirakenne: Täydellinen HTML5-perusta oikealla DOCTYPE:lla - Semanttinen merkintä: Merkitykselliset tagit, jotka parantavat saavutettavuutta ja SEO:ta - Kuvien integrointi: Oikea tiedostojen organisointi ja alt-tekstin käyttö - Layout-kontit: Strateginen divien käyttö kuvailevilla luokkanimillä - Saavutettavuustietoisuus: Ymmärrys ruudunlukijan navigoinnista - Modernit standardit: Nykyiset HTML5-käytännöt ja tieto vanhentuneista tageista - Projektin perusta: Vahva pohja CSS-tyylittelylle ja JavaScript-interaktiivisuudelle Seuraavat askeleet: HTML-rakenteesi on valmis CSS-tyylittelyä varten! Rakentamasi semanttinen perusta tekee seuraavasta oppitunnista paljon helpomman ymmärtää. ## Tehtävä Harjoittele HTML:ää: Rakenna blogin mallinnus --- Vastuuvapauslauseke: Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua Co-op Translator. Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
Terrarium-projekti Osa 2: Johdatus CSS:ään
Muistatko, kuinka HTML-terrariumisi näytti melko yksinkertaiselta? CSS:n avulla voimme muuttaa tuon pelkistetyn rakenteen visuaalisesti houkuttelevaksi. Jos HTML on kuin talon runko, CSS on kaikki se, mikä tekee siitä kodikkaan – maalivärit, huonekalujen järjestely, valaistus ja huoneiden yhteensopivuus. Ajattele, kuinka Versailles'n palatsi alkoi yksinkertaisena metsästysmajana, mutta huolellinen koristelu ja suunnittelu muuttivat sen yhdeksi maailman upeimmista rakennuksista. Tänään muutamme terrariumisi toimivasta viimeistellyksi. Opit sijoittamaan elementtejä tarkasti, tekemään ulkoasuista responsiivisia eri näyttökokoihin ja luomaan visuaalista vetovoimaa, joka tekee verkkosivustoista kiinnostavia. Tämän oppitunnin lopussa näet, kuinka strateginen CSS-tyylittely voi parantaa projektiasi merkittävästi. Lisätään tyyliä terrariumiisi. ## Ennakkokysely Ennakkokysely ## CSS:n perusteet CSS:ää pidetään usein vain "asioiden kaunistamisena", mutta sen tarkoitus on paljon laajempi. CSS on kuin elokuvan ohjaaja – hallitset paitsi ulkonäköä, myös liikettä, vuorovaikutusta ja sopeutumista eri tilanteisiin. Moderni CSS on hämmästyttävän monipuolinen. Voit kirjoittaa koodia, joka automaattisesti mukauttaa ulkoasut puhelimille, tableteille ja pöytätietokoneille. Voit luoda sulavia animaatioita, jotka ohjaavat käyttäjän huomion oikeaan paikkaan. Kun kaikki toimii yhdessä, tulokset voivat olla todella vaikuttavia. Tässä oppitunnissa saavutamme seuraavat asiat: - Luomme täydellisen visuaalisen suunnittelun terrariumillesi modernien CSS-tekniikoiden avulla - Tutkimme peruskäsitteitä, kuten kaskadia, periytymistä ja CSS-valitsimia - Toteutamme responsiivisia sijoittelu- ja asettelustrategioita - Rakennamme terrarium-kontin CSS-muotojen ja tyylien avulla ### Esitiedot Sinun tulisi olla suorittanut terrariumisi HTML-rakenteen edellisestä oppitunnista ja valmistellut sen tyylittelyä varten. ### CSS-tiedoston luominen Ennen kuin voimme aloittaa tyylittelyn, meidän täytyy yhdistää CSS HTML:ään. Tämä yhteys kertoo selaimelle, mistä terrariumin tyyliohjeet löytyvät. Luo terrarium-kansioosi uusi tiedosto nimeltä style.css ja linkitä se HTML-dokumenttisi <head>-osioon: Tämä koodi tekee seuraavaa: - Luo yhteyden HTML- ja CSS-tiedostojen välille - Kertoo selaimelle, mistä ladata ja soveltaa tyylit style.css-tiedostosta - Käyttää rel="stylesheet"-attribuuttia ilmoittaakseen, että kyseessä on CSS-tiedosto - Viittaa tiedostopolkuun href="./style.css" ## CSS-kaskadin ymmärtäminen Oletko koskaan miettinyt, miksi CSS:ää kutsutaan "kaskadoiviksi" tyylitiedostoiksi? Tyylit kaskadoivat alas kuin vesiputous, ja joskus ne ovat ristiriidassa keskenään. Ajattele, kuinka sotilaallinen komentorakenne toimii – kenraalin määräys saattaa olla "kaikki joukot pukeutuvat vihreään", mutta yksikkösi erityinen määräys saattaa olla "pukeutukaa juhlapukuihin seremoniaa varten". Tarkempi ohje menee etusijalle. CSS noudattaa samanlaista logiikkaa, ja tämän hierarkian ymmärtäminen tekee virheiden korjaamisesta paljon helpompaa. ### Kokeile kaskadin prioriteettia Katsotaan kaskadia toiminnassa luomalla tyyliristiriita. Lisää ensin inline-tyyli <h1>-tagiisi: Mitä tämä koodi tekee: - Soveltaa punaisen värin suoraan <h1>-elementtiin käyttämällä inline-tyylittelyä - Käyttää style-attribuuttia upottaakseen CSS:n suoraan HTML:ään - Luo korkeimman prioriteetin tyylisäännön tälle elementille Lisää seuraavaksi tämä sääntö style.css-tiedostoosi: Yllä olevassa olemme: - Määrittäneet CSS-säännön, joka kohdistuu kaikkiin <h1>-elementteihin - Asettaneet tekstin väriksi sinisen ulkoisessa tyylitiedostossa - Luoneet alemman prioriteetin säännön verrattuna inline-tyyleihin ✅ Tietotesti: Mikä väri näkyy verkkosovelluksessasi? Miksi juuri tämä väri voittaa? Voitko keksiä tilanteita, joissa haluaisit ohittaa tyylit? ## CSS:n periytyminen käytännössä CSS:n periytyminen toimii kuin genetiikka – elementit perivät tiettyjä ominaisuuksia vanhemmiltaan. Jos asetat fonttiperheen body-elementille, kaikki teksti sisällä käyttää automaattisesti samaa fonttia. Se on kuin Habsburg-suvun tunnusomainen leukalinja, joka siirtyi sukupolvelta toiselle ilman, että sitä erikseen määriteltiin jokaiselle yksilölle. Kaikki ei kuitenkaan periydy. Tekstityylit, kuten fontit ja värit, periytyvät, mutta asettelun ominaisuudet, kuten marginaalit ja reunukset, eivät. Aivan kuten lapset voivat periä fyysisiä piirteitä, mutta eivät vanhempiensa muotivalintoja. ### Fontin periytymisen havainnointi Katsotaan periytymistä asettamalla fonttiperhe <body>-elementille: Mitä tässä tapahtuu: - Asettaa fonttiperheen koko sivulle kohdistamalla <body>-elementtiin - Käyttää fonttipinoa varavaihtoehtoineen paremman selaimen yhteensopivuuden vuoksi - Soveltaa moderneja järjestelmäfontteja, jotka näyttävät hyvältä eri käyttöjärjestelmissä - Varmistaa, että kaikki lapsielementit perivät tämän fontin, ellei niitä erikseen ohiteta Avaa selaimesi kehitystyökalut (F12), siirry Elements-välilehteen ja tarkista <h1>-elementtisi. Näet, että se perii fonttiperheen body-elementiltä: ✅ Kokeilua: Kokeile asettaa muita periytyviä ominaisuuksia <body>-elementille, kuten color, line-height tai text-align. Mitä tapahtuu otsikolle ja muille elementeille? ### 🔄 Pedagoginen tarkistus CSS:n perusymmärrys: Ennen siirtymistä valitsimiin varmista, että osaat: - ✅ Selittää kaskadin ja periytymisen eron - ✅ Ennustaa, mikä tyyli voittaa spesifisyyden ristiriidassa - ✅ Tunnistaa, mitkä ominaisuudet periytyvät vanhemmilta elementeiltä - ✅ Yhdistää CSS-tiedostot HTML:ään oikein Pikatesti: Jos sinulla on nämä tyylit, minkä värinen <h1> <div class="special">-sisällä on? Vastaus: Punainen (elementtivalitsin kohdistaa suoraan h1:een) ## CSS-valitsimien hallinta CSS-valitsimet ovat tapa kohdistaa tiettyjä elementtejä tyylittelyä varten. Ne toimivat kuin tarkat ohjeet – sen sijaan, että sanoisit "talo", voit sanoa "sininen talo, jossa on punainen ovi Maple Streetillä". CSS tarjoaa erilaisia tapoja olla tarkka, ja oikean valitsimen valitseminen on kuin sopivan työkalun valinta tehtävään. Joskus sinun täytyy tyylitellä kaikki naapuruston ovet, ja joskus vain yksi tietty ovi. ### Elementtivalitsimet (tagit) Elementtivalitsimet kohdistavat HTML-elementtejä niiden tagin nimen perusteella. Ne sopivat täydellisesti perusmuotoiluun, joka koskee laajasti koko sivua: Näiden tyylien ymmärtäminen: - Asettaa yhtenäisen typografian koko sivulle body-valitsimella - Poistaa selaimen oletusmarginaalit ja -täytteet paremman hallinnan vuoksi - Tyylittelee kaikki otsikkoelementit värillä, kohdistuksella ja välimatkoilla - Käyttää rem-yksiköitä skaalautuvaan ja saavutettavaan fonttikokoon Vaikka elementtivalitsimet toimivat hyvin yleiseen muotoiluun, tarvitset tarkempia valitsimia yksittäisten komponenttien, kuten terrariumin kasvien, tyylittelyyn. ### ID-valitsimet yksittäisille elementeille ID-valitsimet käyttävät #-symbolia ja kohdistavat elementtejä, joilla on tietty id-attribuutti. Koska ID:t ovat ainutlaatuisia sivulla, ne sopivat täydellisesti yksittäisten, erityisten elementtien, kuten terrariumin vasemman ja oikean kasvikontin, tyylittelyyn. Luodaan tyylit terrariumin sivukontteille, joissa kasvit sijaitsevat: Tämä koodi tekee seuraavaa: - Sijoittaa kontit vasemmalle ja oikealle reunalle absolute-sijoittelulla - Käyttää vh-yksiköitä (näkymäkorkeus) responsiiviseen korkeuteen, joka mukautuu näytön kokoon - Soveltaa box-sizing: border-box, jotta täyte sisältyy kokonaisleveyteen - Poistaa tarpeettomat px-yksiköt nolla-arvoista siistimmän koodin vuoksi - Asettaa hienovaraisen taustavärin, joka on silmille miellyttävämpi kuin kirkas harmaa ✅ Koodin laatuhaaste: Huomaa, kuinka tämä CSS rikkoo DRY-periaatetta (Don't Repeat Yourself). Voitko refaktoroida sen käyttämällä sekä ID:tä että luokkaa? Parannettu lähestymistapa: ### Luokkavalitsimet uudelleenkäytettäville tyyleille Luokkavalitsimet käyttävät .-symbolia ja sopivat, kun haluat soveltaa samoja tyylejä useisiin elementteihin. Toisin kuin ID:t, luokkia voidaan käyttää uudelleen HTML:ssä, mikä tekee niistä ihanteellisia yhtenäisten tyylien luomiseen. Terrariumissamme jokainen kasvi tarvitsee samanlaista tyylittelyä, mutta myös yksilöllistä sijoittelua. Käytämme yhdistelmää luokkia yhteisiin tyyleihin ja ID:itä yksilölliseen sijoitteluun. Tässä on jokaisen kasvin HTML-rakenne: Keskeiset elementit selitettynä: - Käyttää class="plant-holder" yhtenäiseen kontin tyylittelyyn kaikille kasveille - Soveltaa class="plant" yhteiseen kuvatyylittelyyn ja käyttäytymiseen - Sisältää yksilöllisen id="plant1" yksilölliseen sijoitteluun ja JavaScript-vuorovaikutukseen - Tarjoaa kuvailevan alt-tekstin ruudunlukijan saavutettavuuden vuoksi Lisää nämä tyylit style.css-tiedostoosi: Näiden tyylien erittely: - Luo suhteellisen sijoittelun kasvikontille sijoittelukontekstin luomiseksi - Asettaa jokaisen kasvikontin korkeudeksi 13 %, jotta kaikki kasvit mahtuvat pystysuunnassa ilman vieritystä - Siirtää kontteja hieman vasemmalle, jotta kasvit keskittyvät paremmin konttiensa sisällä - Mahdollistaa kasvien responsiivisen skaalautumisen max-width- ja max-height-ominaisuuksilla - Käyttää z-index-arvoa, jotta kasvit sijoittuvat muiden terrariumin elementtien yläpuolelle - Lisää hienovaraisen hover-efektin CSS-siirtymillä paremman käyttäjäkokemuksen saavuttamiseksi ✅ Kriittinen ajattelu: Miksi tarvitsemme sekä .plant-holder että .plant-valitsimet? Mitä tapahtuisi, jos yrittäisimme käyttää vain yhtä? ## CSS-sijoittelun ymmärtäminen CSS-sijoittelu on kuin näytelmän ohjaaja – ohjaat, missä jokainen näyttelijä seisoo ja miten he liikkuvat lavalla. Jotkut näyttelijät noudattavat normaalia muodostelmaa, kun taas toiset tarvitsevat erityistä sijoittelua dramaattisen vaikutuksen vuoksi. Kun ymmärrät sijoittelun, monet asetteluun liittyvät haasteet muuttuvat hallittaviksi. Tarvitsetko navigointipalkin, joka pysyy ylhäällä käyttäjän vierittäessä? Sijoittelu hoitaa sen. Haluatko työkaluvihjeen, joka ilmestyy tiettyyn paikkaan? Se on myös sijoittelua. ### Viisi sijoitteluarvoa ### Sijoittelu terrariumissamme Terrariumissamme käytetään strategista yhdistelmää sijoittelutyyppejä halutun asettelun luomiseksi: Sijoittelustrategian ymmärtäminen: - Absoluuttiset kontit poistetaan normaalista dokumenttivirrasta ja kiinnitetään näytön reunoille - Suhteelliset kasvikontit luovat sijoittelukontekstin pysyen samalla dokumenttiv - Miten asettelu muuttuu, jos .plant-holder käyttää absolute sijasta relative? - Mitä tapahtuu, kun vaihdat .plant suhteelliseen (relative) sijoitteluun? ### 🔄 Pedagoginen tarkistus CSS-sijoittelun hallinta: Pysähdy tarkistamaan ymmärryksesi: - ✅ Osaatko selittää, miksi kasvit tarvitsevat absoluuttista sijoittelua vedä ja pudota -toiminnossa? - ✅ Ymmärrätkö, miten suhteelliset säiliöt luovat sijoittelukontekstin? - ✅ Miksi sivusäiliöt käyttävät absoluuttista sijoittelua? - ✅ Mitä tapahtuisi, jos poistaisit sijoittelumääritykset kokonaan? Yhteys todelliseen maailmaan: Mieti, miten CSS-sijoittelu heijastaa todellista asettelua: - Static: Kirjat hyllyssä (luonnollinen järjestys) - Relative: Kirjan siirtäminen hieman mutta pitäen sen paikan - Absolute: Kirjanmerkin asettaminen tarkalle sivunumerolle - Fixed: Post-it-lappu, joka pysyy näkyvissä sivuja selatessa ## Terrariumin rakentaminen CSS:llä Rakennamme nyt lasipurkin pelkästään CSS:llä – ilman kuvia tai grafiikkaohjelmistoa. Realistisen lasin, varjojen ja syvyysefektien luominen sijoittelun ja läpinäkyvyyden avulla osoittaa CSS:n visuaaliset kyvyt. Tämä tekniikka muistuttaa, miten Bauhaus-liikkeen arkkitehdit käyttivät yksinkertaisia geometrisia muotoja luodakseen monimutkaisia, kauniita rakenteita. Kun ymmärrät nämä periaatteet, tunnistat CSS-tekniikat monien verkkosivustojen taustalla. ### Lasipurkin osien luominen Rakennetaan terrariumpurkki pala kerrallaan. Jokainen osa käyttää absoluuttista sijoittelua ja prosenttipohjaista mitoitusta responsiivisen suunnittelun mahdollistamiseksi: Terrariumin rakenteen ymmärtäminen: - Käyttää prosenttipohjaisia mittoja responsiiviseen skaalaamiseen kaikilla näytön kokoilla - Sijoittaa elementit absoluuttisesti pinotakseen ja kohdistakseen ne tarkasti - Soveltaa erilaisia läpinäkyvyysarvoja lasin läpinäkyvyysefektin luomiseksi - Toteuttaa z-index-kerrostuksen, jotta kasvit näkyvät purkin sisällä - Lisää hienovaraisen varjostuksen ja viimeistellyn pyöristetyn reunan realistisemman ulkonäön saavuttamiseksi ### Responsiivinen suunnittelu prosenttien avulla Huomaa, että kaikki mitat käyttävät prosentteja kiinteiden pikseliarvojen sijaan: Miksi tämä on tärkeää: - Varmistaa, että terrarium skaalautuu suhteellisesti kaikilla näytön kokoilla - Säilyttää visuaaliset suhteet purkin osien välillä - Tarjoaa yhtenäisen kokemuksen mobiilipuhelimista suuriin työpöytänäyttöihin - Mahdollistaa, että suunnittelu mukautuu ilman visuaalisen asettelun rikkoutumista ### CSS-yksiköt käytännössä Käytämme rem-yksiköitä pyöristettyjen reunojen määrittämiseen, jotka skaalautuvat suhteessa juurikoon kokoon. Tämä luo saavutettavampia suunnitelmia, jotka kunnioittavat käyttäjän fonttiasetuksia. Lue lisää CSS:n suhteellisista yksiköistä virallisesta spesifikaatiosta. ✅ Visuaalinen kokeilu: Kokeile muuttaa näitä arvoja ja tarkkaile vaikutuksia: - Muuta purkin läpinäkyvyys 0.5:stä 0.8:aan – miten tämä vaikuttaa lasin ulkonäköön? - Säädä maan väriä #3a241d:stä #8B4513:een – mikä visuaalinen vaikutus tällä on? - Muuta maan z-index arvoksi 2 – mitä tapahtuu kerrostukselle? ### 🔄 Pedagoginen tarkistus CSS:n visuaalisen suunnittelun ymmärtäminen: Vahvista visuaalisen CSS:n hallintaasi: - ✅ Miten prosenttipohjaiset mitat luovat responsiivisen suunnittelun? - ✅ Miksi läpinäkyvyys luo lasin läpinäkyvyysefektin? - ✅ Mikä rooli z-index-arvolla on elementtien kerrostuksessa? - ✅ Miten pyöristettyjen reunojen arvot luovat purkin muodon? Suunnitteluperiaate: Huomaa, miten rakennamme monimutkaisia visuaaleja yksinkertaisista muodoista: 1. Suorakulmiot → Pyöristetyt suorakulmiot → Purkin osat 2. Tasaiset värit → Läpinäkyvyys → Lasiefekti 3. Yksittäiset elementit → Kerrostettu koostumus → 3D-ulkonäkö --- ## GitHub Copilot Agent -haaste 🚀 Käytä Agent-tilaa suorittaaksesi seuraavan haasteen: Kuvaus: Luo CSS-animaatio, joka saa terrariumin kasvit heilumaan kevyesti edestakaisin, simuloiden luonnollista tuulen vaikutusta. Tämä auttaa sinua harjoittelemaan CSS-animaatioita, muunnoksia ja avainkehyksiä samalla kun parannat terrariumin visuaalista vetovoimaa. Ohje: Lisää CSS-avainkehysanimaatiot, jotka saavat terrariumin kasvit heilumaan kevyesti puolelta toiselle. Luo heilumisliike, joka kiertää jokaista kasvia hieman (2-3 astetta) vasemmalle ja oikealle 3-4 sekunnin ajan, ja sovella sitä .plant-luokkaan. Varmista, että animaatio toistuu loputtomasti ja sisältää easing-funktion luonnollista liikettä varten. Lue lisää agent-tilasta täällä. ## 🚀 Haaste: Lasin heijastusten lisääminen Valmis parantamaan terrariumiasi realistisilla lasin heijastuksilla? Tämä tekniikka lisää syvyyttä ja realismia suunnitteluun. Luot hienovaraisia korostuksia, jotka simuloivat, miten valo heijastuu lasipinnoilta. Tämä lähestymistapa on samanlainen kuin miten renessanssimaalari Jan van Eyck käytti valoa ja heijastusta saadakseen maalatun lasin näyttämään kolmiulotteiselta. Tässä on tavoitteenasi: Haasteesi: - Luo hienovaraisia valkoisia tai vaaleanvärisiä soikeita muotoja lasin heijastuksille - Sijoita ne strategisesti purkin vasemmalle puolelle - Sovella sopivia läpinäkyvyys- ja sumeusvaikutuksia realistisen valon heijastuksen saavuttamiseksi - Käytä border-radius-ominaisuutta luodaksesi orgaanisia, kuplamaisia muotoja - Kokeile gradientteja tai varjostuksia lisärealismia varten ## Luentojälkeinen kysely Luentojälkeinen kysely ## Laajenna CSS-tietämystäsi CSS voi aluksi tuntua monimutkaiselta, mutta näiden ydinkonseptien ymmärtäminen tarjoaa vankan perustan edistyneemmille tekniikoille. Seuraavat CSS-opiskelun alueesi: - Flexbox - yksinkertaistaa elementtien kohdistamista ja jakamista - CSS Grid - tarjoaa tehokkaita työkaluja monimutkaisten asettelujen luomiseen - CSS-muuttujat - vähentää toistoa ja parantaa ylläpidettävyyttä - Responsiivinen suunnittelu - varmistaa, että sivustot toimivat hyvin eri näytön kokoilla ### Interaktiiviset oppimisresurssit Harjoittele näitä konsepteja näiden mukaansatempaavien, käytännönläheisten pelien avulla: - 🐸 Flexbox Froggy - Hallitse Flexbox hauskojen haasteiden avulla - 🌱 Grid Garden - Opettele CSS Grid viljelemällä virtuaalisia porkkanoita - 🎯 CSS Battle - Testaa CSS-taitojasi koodaushaasteilla ### Lisäopiskelu CSS:n perusteiden kattavaan oppimiseen suorita tämä Microsoft Learn -moduuli: Muotoile HTML-sovelluksesi CSS:llä ### ⚡ Mitä voit tehdä seuraavan 5 minuutin aikana - [ ] Avaa DevTools ja tarkastele minkä tahansa verkkosivuston CSS-tyylejä Elements-paneelissa - [ ] Luo yksinkertainen CSS-tiedosto ja linkitä se HTML-sivuun - [ ] Kokeile värien muuttamista eri menetelmillä: heksadesimaali, RGB ja nimetty väri - [ ] Harjoittele laatikkomallia lisäämällä paddingia ja marginaalia div-elementtiin ### 🎯 Mitä voit saavuttaa tämän tunnin aikana - [ ] Suorita luennon jälkeinen kysely ja kertaa CSS:n perusteet - [ ] Muotoile HTML-sivusi fonteilla, väreillä ja väleillä - [ ] Luo yksinkertainen asettelu flexboxilla tai gridillä - [ ] Kokeile CSS-siirtymiä sujuvien efektien luomiseksi - [ ] Harjoittele responsiivista suunnittelua media-kyselyiden avulla ### 📅 Viikon mittainen CSS-seikkailusi - [ ] Suorita terrariumin tyylittelytehtävä luovalla otteella - [ ] Hallitse CSS Grid luomalla valokuvagalleria-asettelu - [ ] Opettele CSS-animaatioita elävöittääksesi suunnitelmiasi - [ ] Tutustu CSS-esiprosessoreihin, kuten Sass tai Less - [ ] Tutki suunnitteluperiaatteita ja sovella niitä CSS:ään - [ ] Analysoi ja luo uudelleen mielenkiintoisia suunnitelmia, joita löydät verkosta ### 🌟 Kuukauden mittainen suunnittelun hallinta - [ ] Rakenna täydellinen responsiivinen verkkosivuston suunnittelujärjestelmä - [ ] Opettele CSS-in-JS tai hyötylähtöisiä kehyksiä, kuten Tailwind - [ ] Osallistu avoimen lähdekoodin projekteihin CSS-parannuksilla - [ ] Hallitse edistyneitä CSS-konsepteja, kuten CSS-mukautettuja ominaisuuksia ja sisältöä - [ ] Luo uudelleenkäytettäviä komponenttikirjastoja modulaarisella CSS:llä - [ ] Mentoroida muita CSS:n oppimisessa ja jakaa suunnittelutietämystä ## 🎯 CSS-osaamisen aikajana ### 🛠️ CSS-työkalupakin yhteenveto Tämän oppitunnin jälkeen sinulla on: - Kaskadin ymmärrys: Miten tyylit periytyvät ja ohittavat toisensa - Valitsijoiden hallinta: Tarkka kohdistaminen elementteihin, luokkiin ja ID:ihin - Sijoittelutaidot: Strateginen elementtien sijoittaminen ja kerrostaminen - Visuaalinen suunnittelu: Lasiefektien, varjojen ja läpinäkyvyyden luominen - Responsiiviset tekniikat: Prosenttipohjaiset asettelut, jotka mukautuvat mihin tahansa näyttöön - Koodin organisointi: Siisti, ylläpidettävä CSS-rakenne - Modernit käytännöt: Suhteellisten yksiköiden ja saavutettavien suunnittelumallien käyttö Seuraavat askeleet: Terrariumillasi on nyt sekä rakenne (HTML) että tyyli (CSS). Viimeinen oppitunti lisää interaktiivisuutta JavaScriptillä! ## Tehtävä CSS Refactoring --- Vastuuvapauslauseke: Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua Co-op Translator. Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.
Projet Terrarium Partie 1 : Introduction à HTML
HTML, ou HyperText Markup Language, est le fondement de tous les sites web que vous avez jamais visités. Pensez à HTML comme au squelette qui donne la structure aux pages web – il définit où va le contenu, comment il est organisé et ce que chaque élément représente. Alors que le CSS "habillera" ultérieurement votre HTML avec des couleurs et des mises en page, et que JavaScript lui donnera vie avec de l’interactivité, HTML fournit la structure essentielle qui rend tout le reste possible. Dans cette leçon, vous allez créer la structure HTML pour une interface de terrarium virtuelle. Ce projet pratique vous enseignera les concepts fondamentaux de HTML tout en construisant quelque chose de visuellement engageant. Vous apprendrez comment organiser le contenu avec des éléments sémantiques, travailler avec des images, et créer la base pour une application web interactive. À la fin de cette leçon, vous aurez une page HTML fonctionnelle affichant des images de plantes en colonnes organisées, prête à être stylisée dans la leçon suivante. Ne vous inquiétez pas si elle semble basique au départ – c’est exactement ce que HTML doit faire avant que le CSS ajoute la finition visuelle. ## Quiz Pré-Cours Quiz pré-cours ## Mise en Place de Votre Projet Avant de plonger dans le code HTML, configurons un espace de travail adéquat pour votre projet terrarium. Créer dès le départ une structure de fichiers organisée est une habitude cruciale qui vous servira tout au long de votre parcours en développement web. ### Tâche : Créez Votre Structure de Projet Vous allez créer un dossier dédié pour votre projet terrarium et y ajouter votre premier fichier HTML. Voici deux approches que vous pouvez utiliser : Option 1 : Utiliser Visual Studio Code 1. Ouvrez Visual Studio Code 2. Cliquez sur "Fichier" → "Ouvrir un dossier" ou utilisez Ctrl+K, Ctrl+O (Windows/Linux) ou Cmd+K, Cmd+O (Mac) 3. Créez un nouveau dossier nommé terrarium et sélectionnez-le 4. Dans le panneau Explorateur, cliquez sur l’icône "Nouveau fichier" 5. Nommez votre fichier index.html Option 2 : Utiliser des Commandes Terminal Voici ce que ces commandes accomplissent : - Crée un nouveau répertoire nommé terrarium pour votre projet - Se déplace dans le répertoire terrarium - Crée un fichier vide index.html - Ouvre le fichier dans Visual Studio Code pour l’édition ## Comprendre la Structure d’un Document HTML Chaque document HTML suit une structure spécifique que les navigateurs doivent comprendre pour afficher correctement. Pensez à cette structure comme une lettre formelle – elle contient des éléments requis dans un ordre particulier qui aident le destinataire (ici, le navigateur) à traiter correctement le contenu. Commençons par ajouter la base essentielle dont chaque document HTML a besoin. ### La Déclaration DOCTYPE et l’élément Racine Les deux premières lignes de chaque fichier HTML servent d’"introduction" du document au navigateur : Comprendre ce que fait ce code : - Déclare le type de document comme HTML5 avec <!DOCTYPE html> - Crée l’élément racine <html> qui contiendra tout le contenu de la page - Établit les standards web modernes pour un rendu correct par le navigateur - Assure un affichage cohérent sur différents navigateurs et appareils ### 🔄 Contrôle Pédagogique Pause et réflexion : Avant de continuer, assurez-vous de comprendre : - ✅ Pourquoi chaque document HTML a besoin d’une déclaration DOCTYPE - ✅ Ce que contient l’élément racine <html> - ✅ Comment cette structure aide les navigateurs à rendre les pages correctement Auto-évaluation rapide : Pouvez-vous expliquer avec vos mots ce que signifie un "rendu conforme aux standards" ? ## Ajout des Métadonnées Essentielles du Document La section <head> d’un document HTML contient des informations cruciales que les navigateurs et moteurs de recherche utilisent, mais que les visiteurs ne voient pas directement sur la page. Pensez-y comme aux informations "en coulisses" qui aident votre page web à fonctionner correctement et à s’afficher de manière adéquate sur différents appareils et plateformes. Ces métadonnées indiquent aux navigateurs comment afficher votre page, quelle encodage de caractères utiliser, et comment gérer différentes tailles d’écran – indispensables pour créer des pages web professionnelles et accessibles. ### Tâche : Ajouter l’En-tête du Document Insérez cette section <head> entre vos balises <html> d’ouverture et de fermeture : Décomposer ce que chaque élément accomplit : - Définit le titre de la page qui apparaît dans les onglets du navigateur et résultats de recherche - Spécifie l’encodage de caractères UTF-8 pour un affichage correct du texte dans le monde entier - Assure la compatibilité avec les versions modernes d’Internet Explorer - Configure le design responsive en réglant la fenêtre graphique selon la largeur de l’appareil - Contrôle le niveau de zoom initial pour afficher le contenu à sa taille naturelle ## Construire le Corps du Document L’élément <body> contient tout le contenu visible de votre page web – tout ce que les utilisateurs verront et avec quoi ils interagiront. Alors que la section <head> donne des instructions au navigateur, la section <body> contient le contenu réel : texte, images, boutons et autres éléments créant l’interface utilisateur. Ajoutons la structure du corps et comprenons comment les balises HTML fonctionnent ensemble pour créer un contenu significatif. ### Comprendre la Structure des Balises HTML HTML utilise des balises appariées pour définir les éléments. La plupart des balises ont une balise d’ouverture comme <p> et une balise de fermeture comme </p>, avec du contenu entre les deux : <p>Bonjour, monde !</p>. Cela crée un élément paragraphe contenant le texte "Bonjour, monde !". ### Tâche : Ajouter l’Élément Corps Mettez à jour votre fichier HTML pour inclure l’élément <body> : Voici ce que cette structure complète fournit : - Établit le cadre de base du document HTML5 - Inclut les métadonnées essentielles pour un rendu correct par le navigateur - Crée un corps vide prêt à accueillir votre contenu visible - Suit les meilleures pratiques modernes en développement web Vous êtes maintenant prêt à ajouter les éléments visibles de votre terrarium. Nous utiliserons des éléments <div> comme conteneurs pour organiser différentes sections de contenu, et des éléments <img> pour afficher les images des plantes. ### Travailler avec les Images et les Conteneurs de Mise en Page Les images sont spéciales en HTML car elles utilisent des balises "auto-fermantes". Contrairement aux éléments comme <p></p> qui entourent du contenu, la balise <img> contient toutes les informations dont elle a besoin dans la balise elle-même via des attributs comme src pour le chemin de l’image et alt pour l’accessibilité. Avant d’ajouter les images à votre HTML, vous devrez organiser correctement vos fichiers de projet en créant un dossier images et en ajoutant les graphiques de plantes. Commencez par préparer vos images : 1. Créez un dossier nommé images à l’intérieur de votre dossier projet terrarium 2. Téléchargez les images de plantes depuis le dossier solution (14 images de plantes au total) 3. Copiez toutes les images de plantes dans votre nouveau dossier images ### Tâche : Créer la Mise en Page d’Affichage des Plantes Ajoutez maintenant les images des plantes organisées en deux colonnes entre vos balises <body></body> : Étape par étape, voici ce qui se passe dans ce code : - Crée un conteneur principal de page avec id="page" pour contenir tout le contenu - Établit deux conteneurs de colonnes : left-container et right-container - Organise 7 plantes dans la colonne gauche et 7 plantes dans la colonne droite - Enveloppe chaque image de plante dans un div plant-holder pour un positionnement individuel - Applique des noms de classes cohérents pour le stylage CSS dans la prochaine leçon - Attribue des ID uniques à chaque image de plante pour l’interaction JavaScript plus tard - Inclut des chemins de fichiers corrects pointant vers le dossier images ### 🔄 Contrôle Pédagogique Compréhension de la structure : Prenez un moment pour revoir votre structure HTML : - ✅ Pouvez-vous identifier les conteneurs principaux dans votre mise en page ? - ✅ Comprenez-vous pourquoi chaque image a un ID unique ? - ✅ Comment décririez-vous la fonction des divs plant-holder ? Inspection Visuelle : Ouvrez votre fichier HTML dans un navigateur. Vous devriez voir : - Une liste basique d’images de plantes - Des images organisées en deux colonnes - Une mise en page simple et non stylisée Rappelez-vous : Cet aspect dépouillé est exactement ce à quoi HTML doit ressembler avant la stylisation CSS ! Avec ce balisage ajouté, les plantes apparaîtront à l’écran, même si elles n’auront pas encore l’air fini – c’est là que le CSS intervient dans la prochaine leçon ! Pour l’instant, vous avez une base HTML solide qui organise correctement votre contenu et suit les bonnes pratiques d’accessibilité. ## Utiliser du HTML Sémantique pour l’Accessibilité Le HTML sémantique signifie choisir des éléments HTML basés sur leur signification et leur fonction, pas seulement leur apparence. Lorsque vous utilisez un balisage sémantique, vous communiquez la structure et la signification de votre contenu aux navigateurs, moteurs de recherche et technologies d’assistance comme les lecteurs d’écran. Cette approche rend vos sites web plus accessibles aux utilisateurs en situation de handicap et aide les moteurs de recherche à mieux comprendre votre contenu. C’est un principe fondamental du développement web moderne qui crée de meilleures expériences pour tout le monde. ### Ajouter un Titre de Page Sémantique Ajoutons un titre approprié à votre page terrarium. Insérez cette ligne juste après la balise <body> d’ouverture : Pourquoi le balisage sémantique est important : - Aide les lecteurs d’écran à naviguer et comprendre la structure de la page - Améliore le référencement (SEO) en clarifiant la hiérarchie du contenu - Renforce l’accessibilité pour les utilisateurs malvoyants ou avec des troubles cognitifs - Crée de meilleures expériences utilisateur sur tous les appareils et plateformes - Suit les standards web et les meilleures pratiques pour un développement professionnel Exemples de choix sémantiques vs non-sémantiques : ## Créer le Conteneur du Terrarium Ajoutons maintenant la structure HTML pour le terrarium lui-même – le contenant en verre dans lequel les plantes seront finalement placées. Cette section illustre un concept important : HTML fournit la structure, mais sans stylage CSS, ces éléments ne seront pas encore visibles. Le balisage du terrarium utilise des noms de classes descriptifs qui rendront le stylage CSS intuitif et maintenable dans la leçon suivante. ### Tâche : Ajouter la Structure du Terrarium Insérez ce balisage au-dessus de la dernière balise </div> (avant la balise de fermeture du conteneur de la page) : Comprendre cette structure de terrarium : - Crée un conteneur principal pour le terrarium avec un ID unique pour le stylage - Définit des éléments séparés pour chaque composant visuel (haut, murs, terre, bas) - Comprend des éléments imbriqués pour les effets de réflexion du verre (éléments brillants) - Utilise des noms de classes descriptifs qui indiquent clairement la fonction de chaque élément - Prépare la structure pour un style CSS qui créera l’apparence du terrarium en verre ### 🔄 Contrôle pédagogique Maîtrise de la structure HTML : Avant d’avancer, assurez-vous de pouvoir : - ✅ Expliquer la différence entre la structure HTML et l’apparence visuelle - ✅ Identifier les éléments HTML sémantiques et non sémantiques - ✅ Décrire comment un balisage approprié bénéficie à l’accessibilité - ✅ Reconnaître la structure complète de l’arbre documentaire Testez votre compréhension : Essayez d’ouvrir votre fichier HTML dans un navigateur avec JavaScript désactivé et CSS supprimé. Cela vous montre la structure sémantique pure que vous avez créée ! --- ## Défi GitHub Copilot Agent Utilisez le mode Agent pour relever le défi suivant : Description : Créez une structure HTML sémantique pour une section guide de soins des plantes à ajouter au projet de terrarium. Invite : Créez une section HTML sémantique incluant un titre principal « Guide des soins des plantes », trois sous-sections avec les titres « Arrosage », « Exigences en lumière » et « Entretien du sol », chacune contenant un paragraphe d’informations sur les soins des plantes. Utilisez des balises HTML sémantiques appropriées comme <section>, <h2>, <h3>, et <p> pour structurer le contenu correctement. Pour en savoir plus sur le mode agent, consultez ce lien. ## Explorez le défi historique HTML Apprendre l’évolution du web HTML a beaucoup évolué depuis que Tim Berners-Lee a créé le premier navigateur web au CERN en 1990. Certaines anciennes balises comme <marquee> sont maintenant obsolètes car elles ne sont pas compatibles avec les normes modernes d'accessibilité et de conception responsive. Essayez cette expérience : 1. Enveloppez temporairement votre titre <h1> dans une balise <marquee> : <marquee><h1>Mon Terrarium</h1></marquee> 2. Ouvrez votre page dans un navigateur et observez l’effet de défilement 3. Réfléchissez aux raisons pour lesquelles cette balise a été dépréciée (indice : pensez à l’expérience utilisateur et à l’accessibilité) 4. Retirez la balise <marquee> et revenez à un balisage sémantique Questions de réflexion : - Comment un titre défilant pourrait-il affecter les utilisateurs malvoyants ou sensibles au mouvement ? - Quelles techniques CSS modernes pourraient produire des effets visuels similaires de manière plus accessible ? - Pourquoi est-il important d’utiliser les standards web actuels au lieu d’éléments obsolètes ? Découvrez-en plus sur les éléments HTML obsolètes et dépréciés pour comprendre comment les normes web évoluent pour améliorer l’expérience utilisateur. ## Quiz post-cours Quiz post-cours ## Révision et auto-apprentissage Approfondissez vos connaissances HTML HTML est la base du web depuis plus de 30 ans, passant d’un simple langage de balisage de documents à une plateforme sophistiquée pour créer des applications interactives. Comprendre cette évolution vous aide à mieux appréhender les normes web modernes et à prendre de meilleures décisions de développement. Parcours d’apprentissage recommandés : 1. Histoire et évolution du HTML - Recherchez la chronologie depuis HTML 1.0 jusqu’à HTML5 - Explorez pourquoi certaines balises ont été dépréciées (accessibilité, compatibilité mobile, maintenabilité) - Investiguer les nouvelles fonctionnalités HTML émergentes et propositions 2. Approfondissement HTML sémantique - Étudiez la liste complète des éléments sémantiques HTML5 - Pratiquez l’identification d’utilisation de <article>, <section>, <aside>, et <main> - Apprenez à utiliser les attributs ARIA pour améliorer l’accessibilité 3. Développement web moderne - Explorez la création de sites web responsives sur Microsoft Learn - Comprenez comment HTML s’intègre avec CSS et JavaScript - Apprenez les bonnes pratiques de performance web et SEO Questions de réflexion : - Quelles balises HTML dépréciées avez-vous découvertes et pourquoi ont-elles été supprimées ? - Quelles nouvelles fonctionnalités HTML sont proposées pour les futures versions ? - Comment le HTML sémantique contribue-t-il à l’accessibilité web et au SEO ? ### ⚡ Ce que vous pouvez faire dans les 5 prochaines minutes - [ ] Ouvrir DevTools (F12) et inspecter la structure HTML de votre site web préféré - [ ] Créer un fichier HTML simple avec des balises basiques : <h1>, <p>, et <img> - [ ] Valider votre HTML via le validateur W3C en ligne - [ ] Essayer d’ajouter un commentaire dans votre HTML avec <!-- commentaire --> ### 🎯 Ce que vous pouvez accomplir cette heure - [ ] Compléter le quiz post-leçon et revoir les concepts HTML sémantiques - [ ] Construire une page web simple à propos de vous avec une structure HTML correcte - [ ] Expérimenter avec différents niveaux de titres et balises de mise en forme de texte - [ ] Ajouter des images et des liens pour pratiquer l’intégration multimédia - [ ] Rechercher des fonctionnalités HTML5 que vous n’avez pas encore testées ### 📅 Votre parcours HTML sur une semaine - [ ] Compléter le projet terrarium avec un balisage sémantique - [ ] Créer une page web accessible avec des labels et rôles ARIA - [ ] Pratiquer la création de formulaires avec différents types de champs - [ ] Explorer les API HTML5 comme localStorage ou la géolocalisation - [ ] Étudier les designs HTML responsives et le mobile-first - [ ] Réviser le code HTML d’autres développeurs pour apprendre les bonnes pratiques ### 🌟 Votre fondation web sur un mois - [ ] Construire un site portfolio montrant votre maîtrise du HTML - [ ] Apprendre le templating HTML avec un framework comme Handlebars - [ ] Contribuer à des projets open source en améliorant la documentation HTML - [ ] Maîtriser des concepts HTML avancés comme les éléments personnalisés - [ ] Intégrer HTML à des frameworks CSS et bibliothèques JavaScript - [ ] Devenir mentor pour d’autres apprenant les bases du HTML ## 🎯 Votre timeline de maîtrise HTML ### 🛠️ Résumé de votre boîte à outils HTML Après avoir complété cette leçon, vous avez maintenant : - Structure de document : Fondations complètes HTML5 avec DOCTYPE approprié - Balisage sémantique : Balises significatives qui améliorent l’accessibilité et le SEO - Intégration d’images : Organisation correcte des fichiers et bonnes pratiques pour les textes alternatifs - Conteneurs de mise en page : Utilisation stratégique de divs avec noms de classes descriptifs - Sensibilisation à l’accessibilité : Compréhension de la navigation via lecteurs d’écran - Normes modernes : Pratiques actuelles HTML5 et connaissances des balises dépréciées - Fondations projet : Base solide pour le style CSS et l’interactivité JavaScript Prochaines étapes : Votre structure HTML est prête pour le style CSS ! La fondation sémantique que vous avez construite facilitera grandement la compréhension de la prochaine leçon. ## Devoir Pratiquez votre HTML : Construisez une maquette de blog --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Avertissement : Ce document a été traduit à l'aide du service de traduction automatique Co-op Translator. Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour les informations critiques, il est recommandé de faire appel à une traduction professionnelle humaine. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Projet Terrarium Partie 2 : Introduction au CSS
Vous vous souvenez comment votre terrarium HTML avait l’air assez basique ? Le CSS est ce qui transforme cette structure simple en quelque chose de visuellement attrayant. Si le HTML est comme construire la charpente d’une maison, alors le CSS est tout ce qui fait qu’on s’y sent chez soi - les couleurs de peinture, l’agencement des meubles, l’éclairage et la façon dont les pièces s’enchaînent. Pensez à la façon dont le Palais de Versailles a commencé comme un simple pavillon de chasse, mais une attention minutieuse à la décoration et à l’agencement l’a transformé en l’un des bâtiments les plus magnifiques du monde. Aujourd’hui, nous allons transformer votre terrarium de fonctionnel à raffiné. Vous apprendrez à positionner les éléments précisément, à faire en sorte que les mises en page s’adaptent aux différentes tailles d’écran, et à créer l’attrait visuel qui rend les sites web engageants. À la fin de cette leçon, vous verrez comment une stylisation CSS stratégique peut améliorer considérablement votre projet. Ajoutons un peu de style à votre terrarium. ## Quiz Pré-Cours Quiz pré-cours ## Démarrer avec le CSS Le CSS est souvent perçu comme juste « rendre les choses jolies », mais il sert à bien plus que cela. Le CSS est comme être le réalisateur d’un film - vous contrôlez non seulement l’apparence de tout, mais aussi comment ça bouge, répond aux interactions, et s’adapte aux différentes situations. Le CSS moderne est remarquablement puissant. Vous pouvez écrire du code qui ajuste automatiquement les mises en page pour les téléphones, tablettes et ordinateurs de bureau. Vous pouvez créer des animations fluides qui dirigent l’attention des utilisateurs là où c’est nécessaire. Les résultats peuvent être très impressionnants quand tout fonctionne ensemble. Voici ce que nous allons accomplir dans cette leçon : - Créer un design visuel complet pour votre terrarium en utilisant les techniques CSS modernes - Explorer les concepts fondamentaux comme la cascade, l’héritage et les sélecteurs CSS - Mettre en œuvre des stratégies de positionnement et de mise en page responsives - Construire le conteneur du terrarium avec des formes et du style CSS ### Prérequis Vous devez avoir complété la structure HTML de votre terrarium de la leçon précédente et l’avoir prête à être stylisée. ### Configurer votre fichier CSS Avant de pouvoir commencer à styliser, nous devons relier le CSS à notre HTML. Cette connexion indique au navigateur où trouver les instructions de style pour notre terrarium. Dans votre dossier terrarium, créez un nouveau fichier nommé style.css, puis liez-le dans la section <head> de votre document HTML : Ce que fait ce code : - Crée une connexion entre vos fichiers HTML et CSS - Indique au navigateur de charger et appliquer les styles depuis style.css - Utilise l’attribut rel="stylesheet" pour spécifier qu’il s’agit d’un fichier CSS - Référence le chemin du fichier avec href="./style.css" ## Comprendre la cascade CSS Vous vous êtes déjà demandé pourquoi on appelle ça des « feuilles de style en cascade » ? Les styles coulent comme une cascade, et parfois ils entrent en conflit. Considérez comment fonctionnent les structures de commandement militaire - un ordre général pourrait dire « toutes les troupes portent du vert », mais un ordre spécifique à votre unité peut dire « portez la tenue de cérémonie bleue ». L’instruction la plus spécifique prend le pas. Le CSS suit une logique similaire, et comprendre cette hiérarchie rend le débogage beaucoup plus simple. ### Expérimenter avec la priorité de cascade Voyons la cascade en action en créant un conflit de style. D’abord, ajoutez un style en ligne à votre balise <h1> : Ce que fait ce code : - Applique une couleur rouge directement à l’élément <h1> via un style en ligne - Utilise l’attribut style pour insérer du CSS directement dans le HTML - Crée la règle de style la plus prioritaire pour cet élément spécifique Ensuite, ajoutez cette règle dans votre fichier style.css : Dans ce qui précède, nous avons : - Défini une règle CSS ciblant tous les éléments <h1> - Mis la couleur du texte en bleu à l’aide d’une feuille de style externe - Créé une règle de priorité inférieure comparée au style en ligne ✅ Vérification de connaissances : Quelle couleur s’affiche dans votre application web ? Pourquoi cette couleur gagne-t-elle ? Pouvez-vous penser à des scénarios où vous voudriez outrepasser des styles ? ## Héritage CSS en action L’héritage CSS fonctionne comme la génétique - les éléments héritent certaines propriétés de leurs parents. Si vous définissez la police sur l’élément body, tout le texte à l’intérieur utilise automatiquement cette même police. C’est semblable à la façon dont la mâchoire distinctive de la famille Habsbourg apparaissait à travers les générations sans être spécifiée individuellement. Cependant, tout n’est pas hérité. Les styles de texte comme les polices et les couleurs s’héritent, mais les propriétés de mise en page comme les marges et bordures ne le sont pas. Comme les enfants peuvent hériter des traits physiques mais pas des choix vestimentaires de leurs parents. ### Observer l’héritage de la police Voyons l’héritage en action en définissant une police sur l’élément <body> : Décryptage de ce qui se passe ici : - Définit la famille de polices pour toute la page en ciblant l’élément <body> - Utilise une pile de polices avec des options de secours pour une meilleure compatibilité navigateur - Applique des polices système modernes qui rendent bien sur différents systèmes d’exploitation - Assure que tous les éléments enfants héritent cette police sauf si spécifiquement substituée Ouvrez les outils de développement de votre navigateur (F12), allez dans l’onglet Éléments, et inspectez votre élément <h1>. Vous verrez qu’il hérite de la famille de polices du body : ✅ Temps d’expérimentation : Essayez de définir d’autres propriétés héritables sur le <body> comme color, line-height ou text-align. Que se passe-t-il pour votre titre et les autres éléments ? ### 🔄 Bilan pédagogique Compréhension des fondations CSS : Avant de passer aux sélecteurs, assurez-vous de pouvoir : - ✅ Expliquer la différence entre cascade et héritage - ✅ Prédire quel style l’emportera en cas de conflit de spécificité - ✅ Identifier quelles propriétés sont héritées des éléments parents - ✅ Relier correctement les fichiers CSS au HTML Test rapide : Si vous avez ces styles, de quelle couleur sera un <h1> dans un <div class="special"> ? Réponse : Rouge (le sélecteur d’élément cible directement h1) ## Maîtriser les sélecteurs CSS Les sélecteurs CSS sont votre moyen de cibler des éléments spécifiques pour les styler. Ils fonctionnent comme donner des directions précises - au lieu de dire « la maison », vous pourriez dire « la maison bleue avec la porte rouge dans la rue Maple ». Le CSS offre différentes façons d’être spécifique, et choisir le bon sélecteur, c’est comme choisir le bon outil pour la tâche. Parfois vous devez styliser toutes les portes du quartier, parfois une porte en particulier. ### Sélecteurs d’éléments (balises) Les sélecteurs d’éléments ciblent des éléments HTML par leur nom de balise. Ils sont parfaits pour définir des styles de base qui s’appliquent largement sur votre page : Comprendre ces styles : - Définit une typographie cohérente sur toute la page avec le sélecteur body - Supprime les marges et le padding par défaut du navigateur pour un meilleur contrôle - Style tous les éléments de titre avec couleur, alignement et espacement - Utilise les unités rem pour une taille de police évolutive et accessible Tandis que les sélecteurs d’éléments fonctionnent bien pour les styles généraux, vous aurez besoin de sélecteurs plus spécifiques pour les composants individuels comme les plantes dans votre terrarium. ### Sélecteurs ID pour les éléments uniques Les sélecteurs ID utilisent le symbole # et ciblent les éléments avec un attribut id spécifique. Puisque les IDs doivent être uniques sur une page, ils sont parfaits pour styler des éléments individuels et particuliers comme nos conteneurs latéraux de plantes. Créons le style pour les conteneurs latéraux de notre terrarium où les plantes seront placées : Ce que fait ce code : - Positionne les conteneurs aux extrémités gauche et droite en utilisant une position absolute - Utilise les unités vh (hauteur de la fenêtre) pour une hauteur responsive qui s’adapte à la taille de l’écran - Applique box-sizing: border-box pour inclure le padding dans la largeur totale - Supprime les unités px inutiles quand la valeur est zéro pour un code plus propre - Définit une couleur de fond subtile plus douce que le gris vif ✅ Défi Qualité de Code : Remarquez comment ce CSS viole le principe DRY (Don't Repeat Yourself). Pouvez-vous le refactorer en utilisant à la fois un ID et une classe ? Approche améliorée : ### Sélecteurs de classes pour styles réutilisables Les sélecteurs de classes utilisent le symbole . et sont parfaits lorsque vous voulez appliquer les mêmes styles à plusieurs éléments. Contrairement aux IDs, les classes peuvent être réutilisées partout dans votre HTML, ce qui les rend idéales pour des styles cohérents et répétitifs. Dans notre terrarium, chaque plante nécessite un style similaire mais doit aussi être positionnée individuellement. Nous allons utiliser une combinaison de classes pour les styles partagés et d’IDs pour le positionnement unique. Voici la structure HTML pour chaque plante : Explication des éléments clés : - Utilise class="plant-holder" pour un style de conteneur uniforme sur toutes les plantes - Applique class="plant" pour un style d’image partagé et comportement commun - Inclus un id="plant1" unique pour positionnement individuel et interaction JavaScript - Fournit un texte alternatif descriptif pour l’accessibilité aux lecteurs d’écran Ajoutez maintenant ces styles à votre fichier style.css : Décryptage de ces styles : - Crée un positionnement relatif pour le conteneur de plante afin d’établir un contexte de positionnement - Fixe chaque conteneur de plante à 13% de hauteur pour que toutes les plantes tiennent verticalement sans défilement - Décale légèrement les conteneurs vers la gauche pour mieux centrer les plantes dans leurs conteneurs - Permet aux plantes de s’adapter de façon responsive avec max-width et max-height - Utilise z-index pour superposer les plantes au-dessus d’autres éléments du terrarium - Ajoute un effet subtil au survol avec des transitions CSS pour une meilleure interaction utilisateur ✅ Réflexion critique : Pourquoi avons-nous besoin à la fois des sélecteurs .plant-holder et .plant ? Que se passerait-il si on utilisait un seul seul ? ## Comprendre le positionnement CSS Le positionnement CSS est comme être le metteur en scène d’une pièce de théâtre - vous dirigez où chaque acteur se place et comment il se déplace sur scène. Certains acteurs suivent la formation standard, tandis que d’autres ont besoin d’un positionnement spécifique pour un effet dramatique. Une fois que vous comprenez le positionnement, beaucoup de défis de mise en page deviennent gérables. Besoin d’une barre de navigation qui reste en haut pendant que l’utilisateur défile ? Le positionnement gère cela. Vous voulez une infobulle qui apparaît à un endroit précis ? C’est aussi du positionnement. ### Les cinq valeurs de position ### Positionnement dans notre terrarium Notre terrarium utilise une combinaison stratégique de types de positionnement pour créer la mise en page désirée : Comprendre la stratégie de positionnement : - Les conteneurs absolus sont retirés du flux normal du document et attachés aux bords de l’écran - Les conteneurs de plantes relatifs créent un contexte de positionnement tout en restant dans le flux du document - Les plantes en position absolue peuvent être positionnées précisément à l’intérieur de leurs conteneurs relatifs - Cette combinaison permet aux plantes d’être empilées verticalement tout en pouvant être positionnées individuellement ✅ Temps d’expérimentation : Essayez de changer les valeurs de positionnement et observez les résultats : - Que se passe-t-il si vous changez .container de absolute à relative ? - Comment la mise en page change-t-elle si .plant-holder utilise absolute au lieu de relative ? - Que se passe-t-il lorsque vous passez .plant en positionnement relative ? ### 🔄 Point pédagogique Maîtrise du positionnement CSS : Faites une pause pour vérifier votre compréhension : - ✅ Pouvez-vous expliquer pourquoi les plantes ont besoin d'un positionnement absolu pour le drag-and-drop ? - ✅ Comprenez-vous comment les conteneurs relatifs créent un contexte de positionnement ? - ✅ Pourquoi les conteneurs latéraux utilisent-ils un positionnement absolu ? - ✅ Que se passerait-il si vous supprimiez entièrement les déclarations de position ? Lien avec le monde réel : Pensez à la façon dont le positionnement CSS reflète la disposition dans la vie réelle : - Static : Livres sur une étagère (ordre naturel) - Relative : Déplacer un livre légèrement tout en gardant sa place - Absolute : Placer un marque-page à une page précise - Fixed : Un post-it qui reste visible lorsque vous tournez les pages ## Construire le terrarium avec CSS Nous allons maintenant construire un bocal en verre en utilisant uniquement du CSS - pas besoin d'images ou de logiciels graphiques. Créer l’illusion d’un verre réaliste, des ombres et des effets de profondeur à l’aide du positionnement et de la transparence démontre les capacités visuelles du CSS. Cette technique reflète la manière dont les architectes du mouvement Bauhaus utilisaient des formes géométriques simples pour créer des structures complexes et esthétiques. Une fois ces principes compris, vous reconnaîtrez les techniques CSS derrière beaucoup de designs web. ### Création des composants du bocal en verre Construisons le bocal du terrarium pièce par pièce. Chaque partie utilise un positionnement absolu et des tailles en pourcentages pour un design responsive : Compréhension de la construction du terrarium : - Utilise des dimensions en pourcentage pour un redimensionnement adaptatif sur toutes tailles d'écran - Positionne les éléments en absolu pour les empiler et les aligner précisément - Applique différentes valeurs d’opacité pour créer l’effet de transparence du verre - Implémente un z-index pour que les plantes apparaissent à l’intérieur du bocal - Ajoute des ombres portées subtiles et un rayon de bordure affiné pour un aspect plus réaliste ### Design responsif avec des pourcentages Remarquez que toutes les dimensions utilisent des pourcentages plutôt que des valeurs fixes en pixels : Pourquoi c’est important : - Assure que le terrarium s’adapte proportionnellement à toute taille d’écran - Maintient les relations visuelles entre les composants du bocal - Offre une expérience cohérente des mobiles aux grands écrans de bureau - Permet au design de s’adapter sans casser la mise en page ### Unités CSS en action Nous utilisons les unités rem pour le border-radius, qui s’échelonnent en fonction de la taille de police racine. Cela crée des designs plus accessibles qui respectent les préférences de police de l’utilisateur. En savoir plus sur les unités relatives CSS dans la spécification officielle. ✅ Expérimentation visuelle : Essayez de modifier ces valeurs et observez les effets : - Changez l’opacité du bocal de 0.5 à 0.8 – comment cela affecte-t-il l’apparence du verre ? - Ajustez la couleur de la terre de #3a241d à #8B4513 – quel impact visuel cela a-t-il ? - Modifiez le z-index de la terre à 2 – que se passe-t-il dans la superposition ? ### 🔄 Point pédagogique Compréhension du design visuel CSS : Confirmez votre maîtrise du CSS visuel : - ✅ Comment les dimensions en pourcentage créent-elles du design adaptatif ? - ✅ Pourquoi l’opacité crée-t-elle l’effet de transparence du verre ? - ✅ Quel rôle joue le z-index dans la superposition des éléments ? - ✅ Comment les valeurs de border-radius créent-elles la forme du bocal ? Principe de design : Remarquez comment nous construisons des visuels complexes à partir de formes simples : 1. Rectangles → Rectangles arrondis → Composants du bocal 2. Couleurs plates → Opacité → Effet verre 3. Éléments individuels → Composition en couches → Apparence 3D --- ## Défi GitHub Copilot Agent 🚀 Utilisez le mode Agent pour relever le défi suivant : Description : Créez une animation CSS qui fait doucement osciller les plantes du terrarium, simulant un effet de brise naturelle. Cela vous aidera à pratiquer les animations, transformations et keyframes CSS tout en améliorant l’esthétique de votre terrarium. Consigne : Ajoutez des animations keyframe CSS pour faire balancer doucement les plantes du terrarium de gauche à droite. Créez une animation oscillante qui fait pivoter chaque plante légèrement (2 à 3 degrés) à gauche et à droite avec une durée de 3 à 4 secondes, et appliquez-la à la classe .plant. Assurez-vous que l’animation boucle infiniment avec une fonction d’accélération pour un mouvement naturel. Pour en savoir plus sur le mode agent, cliquez ici. ## 🚀 Défi : Ajouter des reflets de verre Prêt à améliorer votre terrarium avec des reflets de verre réalistes ? Cette technique ajoutera profondeur et réalisme au design. Vous allez créer des reflets subtils qui simulent la façon dont la lumière se reflète sur les surfaces de verre. Cette approche est similaire à celle utilisée par les peintres de la Renaissance comme Jan van Eyck qui utilisaient lumière et réflexion pour donner un aspect tridimensionnel au verre peint. Voici ce que vous devrez viser : Votre défi : - Créer des formes ovales blanches ou claires subtiles pour les reflets du verre - Les positionner stratégiquement sur le côté gauche du bocal - Appliquer l’opacité et l’effet de flou appropriés pour un reflet lumineux réaliste - Utiliser le border-radius pour créer des formes organiques rappelant des bulles - Expérimenter avec des dégradés ou des ombres portées pour plus de réalisme ## Quiz post-conférence Quiz post-conférence ## Approfondissez vos connaissances CSS Le CSS peut sembler complexe au début, mais comprendre ces concepts fondamentaux fournit une base solide pour des techniques plus avancées. Vos prochaines étapes en CSS : - Flexbox – simplifie l’alignement et la distribution des éléments - CSS Grid – offre des outils puissants pour créer des mises en page complexes - Variables CSS – réduit la répétition et améliore la maintenabilité - Design responsive – garantit un bon fonctionnement sur différentes tailles d’écran ### Ressources d’apprentissage interactives Pratiquez ces concepts avec ces jeux ludiques et pratiques : - 🐸 Flexbox Froggy – Maîtrisez Flexbox par des défis amusants - 🌱 Grid Garden – Apprenez CSS Grid en cultivant des carottes virtuelles - 🎯 CSS Battle – Testez vos compétences CSS avec des défis de code ### Apprentissage complémentaire Pour maîtriser les bases du CSS, complétez ce module Microsoft Learn : Styliser votre application HTML avec CSS ### ⚡ Ce que vous pouvez faire dans les 5 prochaines minutes - [ ] Ouvrir DevTools et inspecter les styles CSS de n’importe quel site avec le panneau Éléments - [ ] Créer un fichier CSS simple et le lier à une page HTML - [ ] Essayer de changer les couleurs avec différentes méthodes : hexadécimal, RGB et noms de couleur - [ ] Pratiquer le modèle de boîte en ajoutant padding et margin à une div ### 🎯 Ce que vous pouvez accomplir cette heure - [ ] Compléter le quiz post-leçon et revoir les fondamentaux du CSS - [ ] Styliser votre page HTML avec des polices, couleurs et espacements - [ ] Créer une mise en page simple avec flexbox ou grid - [ ] Expérimenter les transitions CSS pour des effets fluides - [ ] Pratiquer le design responsive avec des media queries ### 📅 Votre aventure CSS sur une semaine - [ ] Réaliser le style du terrarium avec créativité - [ ] Maîtriser CSS Grid en construisant une galerie photo - [ ] Apprendre les animations CSS pour animer vos designs - [ ] Explorer les préprocesseurs CSS comme Sass ou Less - [ ] Étudier les principes de design et les appliquer en CSS - [ ] Analyser et recréer des designs intéressants trouvés en ligne ### 🌟 Votre maîtrise du design en un mois - [ ] Construire un système complet de design de site web responsive - [ ] Apprendre CSS-in-JS ou des frameworks utilitaires comme Tailwind - [ ] Contribuer à des projets open source avec des améliorations CSS - [ ] Maîtriser des concepts avancés CSS comme les propriétés personnalisées et le containment - [ ] Créer des bibliothèques de composants réutilisables avec du CSS modulaire - [ ] Encadrer d’autres apprentis CSS et partager vos connaissances design ## 🎯 Votre chronologie de maîtrise CSS ### 🛠️ Résumé de votre boîte à outils CSS Après cette leçon, vous avez maintenant : - Compréhension de la cascade : Comment les styles héritent et se remplacent - Maîtrise des sélecteurs : Ciblage précis avec éléments, classes et IDs - Compétences en positionnement : Placement stratégique et gestion des couches d’éléments - Design visuel : Création d’effets verre, ombres et transparence - Techniques responsives : Mise en page en pourcentages qui s’adapte à tout écran - Organisation du code : Structure CSS propre et maintenable - Pratiques modernes : Utilisation d’unités relatives et design accessible Prochaines étapes : Votre terrarium possède désormais structure (HTML) et style (CSS). La dernière leçon ajoutera de l’interactivité avec JavaScript ! ## Devoir Refactorisation CSS --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Avertissement : Ce document a été traduit à l’aide du service de traduction automatique Co-op Translator. Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant autorité. Pour des informations critiques, une traduction professionnelle réalisée par un humain est recommandée. Nous déclinons toute responsabilité en cas de malentendus ou d’interprétations erronées résultant de l’utilisation de cette traduction. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
פרויקט טרריום חלק 1: מבוא ל-HTML
HTML, או HyperText Markup Language, הוא הבסיס לכל אתר שביקרת בו אי פעם. חשבו על HTML כשלד שמעניק מבנה לדפי אינטרנט – הוא מגדיר היכן התוכן נמצא, איך הוא מאורגן ומה כל חלק מייצג. בעוד ש-CSS "ילביש" את ה-HTML בצבעים ובפריסות, ו-JavaScript יעניק לו חיים עם אינטראקטיביות, HTML מספק את המבנה הבסיסי שמאפשר את כל השאר. בשיעור הזה, תיצרו את מבנה ה-HTML לממשק טרריום וירטואלי. הפרויקט המעשי הזה ילמד אתכם מושגי HTML בסיסיים תוך כדי בניית משהו חזותי ומעניין. תלמדו איך לארגן תוכן באמצעות אלמנטים סמנטיים, לעבוד עם תמונות וליצור את הבסיס ליישום אינטרנט אינטראקטיבי. בסוף השיעור, יהיה לכם דף HTML עובד שמציג תמונות של צמחים בעמודות מאורגנות, מוכן לעיצוב בשיעור הבא. אל תדאגו אם זה נראה בסיסי בהתחלה – זה בדיוק מה ש-HTML אמור לעשות לפני ש-CSS מוסיף את הליטוש החזותי. ## שאלון לפני השיעור שאלון לפני השיעור ## הכנת הפרויקט שלכם לפני שנצלול לקוד HTML, בואו נכין סביבת עבודה מסודרת לפרויקט הטרריום שלכם. יצירת מבנה קבצים מאורגן מההתחלה היא הרגל חשוב שישרת אתכם לאורך כל מסע פיתוח האינטרנט שלכם. ### משימה: יצירת מבנה הפרויקט שלכם תיצרו תיקייה ייעודית לפרויקט הטרריום שלכם ותוסיפו את קובץ ה-HTML הראשון שלכם. הנה שתי גישות שתוכלו להשתמש בהן: אפשרות 1: שימוש ב-Visual Studio Code 1. פתחו את Visual Studio Code 2. לחצו על "File" → "Open Folder" או השתמשו ב-Ctrl+K, Ctrl+O (Windows/Linux) או Cmd+K, Cmd+O (Mac) 3. צרו תיקייה חדשה בשם terrarium ובחרו אותה 4. בלוח ה-Explorer, לחצו על אייקון "New File" 5. תנו לקובץ את השם index.html אפשרות 2: שימוש בפקודות טרמינל מה הפקודות הללו מבצעות: - יוצרות תיקייה חדשה בשם terrarium לפרויקט שלכם - מנווטות לתוך תיקיית הטרריום - יוצרות קובץ index.html ריק - פותחות את הקובץ ב-Visual Studio Code לעריכה ## הבנת מבנה מסמך HTML כל מסמך HTML עוקב אחר מבנה ספציפי שהדפדפנים צריכים להבין ולהציג בצורה נכונה. חשבו על מבנה זה כמו מכתב רשמי – יש לו אלמנטים נדרשים בסדר מסוים שעוזרים למקבל (במקרה הזה, הדפדפן) לעבד את התוכן בצורה נכונה. בואו נתחיל בהוספת הבסיס החיוני שכל מסמך HTML צריך. ### הצהרת DOCTYPE ואלמנט השורש שני השורות הראשונות של כל קובץ HTML משמשות כ"הקדמה" של המסמך לדפדפן: הבנת מה הקוד הזה עושה: - מצהיר על סוג המסמך כ-HTML5 באמצעות <!DOCTYPE html> - יוצר את אלמנט השורש <html> שיכיל את כל תוכן הדף - מבסס סטנדרטים מודרניים של אינטרנט להצגה נכונה בדפדפנים - מבטיח תצוגה עקבית בין דפדפנים ומכשירים שונים ### 🔄 בדיקה פדגוגית עצירה והרהור: לפני שתמשיכו, ודאו שאתם מבינים: - ✅ למה כל מסמך HTML צריך הצהרת DOCTYPE - ✅ מה מכיל אלמנט השורש <html> - ✅ איך מבנה זה עוזר לדפדפנים להציג דפים בצורה נכונה מבחן עצמי מהיר: האם תוכלו להסביר במילים שלכם מה משמעות "תצוגה תואמת סטנדרטים"? ## הוספת מטא-נתונים חיוניים למסמך החלק <head> של מסמך HTML מכיל מידע חיוני שדפדפנים ומנועי חיפוש צריכים, אך המבקרים לא רואים ישירות בדף. חשבו על זה כמידע "מאחורי הקלעים" שעוזר לדף האינטרנט שלכם לעבוד בצורה נכונה ולהופיע בצורה נכונה במכשירים ופלטפורמות שונות. מטא-נתונים אלו אומרים לדפדפנים איך להציג את הדף שלכם, איזה קידוד תווים להשתמש, ואיך להתמודד עם גדלי מסך שונים – הכל חיוני ליצירת דפי אינטרנט מקצועיים ונגישים. ### משימה: הוסיפו את החלק הראשי של המסמך הכניסו את החלק <head> הזה בין תגי הפתיחה והסגירה של <html>: פירוט מה כל אלמנט מבצע: - מגדיר את כותרת הדף שמופיעה בלשוניות הדפדפן ובתוצאות חיפוש - מציין קידוד תווים UTF-8 להצגת טקסט בצורה נכונה ברחבי העולם - מבטיח תאימות עם גרסאות מודרניות של Internet Explorer - מגדיר עיצוב רספונסיבי על ידי התאמת ה-viewport לרוחב המכשיר - שולט ברמת הזום ההתחלתית להצגת תוכן בגודל טבעי ## בניית גוף המסמך האלמנט <body> מכיל את כל התוכן הנראה של דף האינטרנט שלכם – כל מה שהמשתמשים יראו ויתקשרו איתו. בעוד שהחלק <head> סיפק הוראות לדפדפן, החלק <body> מכיל את התוכן עצמו: טקסט, תמונות, כפתורים ואלמנטים אחרים שיוצרים את ממשק המשתמש שלכם. בואו נוסיף את מבנה הגוף ונבין איך תגי HTML עובדים יחד כדי ליצור תוכן משמעותי. ### הבנת מבנה תגי HTML HTML משתמש בתגים זוגיים כדי להגדיר אלמנטים. לרוב התגים יש תג פתיחה כמו <p> ותג סגירה כמו </p>, עם תוכן ביניהם: <p>Hello, world!</p>. זה יוצר אלמנט פסקה שמכיל את הטקסט "Hello, world!". ### משימה: הוסיפו את אלמנט הגוף עדכנו את קובץ ה-HTML שלכם כדי לכלול את האלמנט <body>: מה המבנה המלא הזה מספק: - מבסס את מסגרת המסמך הבסיסית של HTML5 - כולל מטא-נתונים חיוניים להצגה נכונה בדפדפנים - יוצר גוף ריק מוכן לתוכן הנראה שלכם - עוקב אחרי שיטות עבודה מומלצות בפיתוח אינטרנט מודרני עכשיו אתם מוכנים להוסיף את האלמנטים הנראים של הטרריום שלכם. נשתמש באלמנטים <div> כקונטיינרים לארגון חלקים שונים של תוכן, ובאלמנטים <img> להצגת תמונות הצמחים. ### עבודה עם תמונות וקונטיינרים לפריסה תמונות הן מיוחדות ב-HTML כי הן משתמשות בתגים "סוגרים עצמם". בניגוד לאלמנטים כמו <p></p> שעוטפים תוכן, תג <img> מכיל את כל המידע שהוא צריך בתוך התג עצמו באמצעות מאפיינים כמו src לנתיב קובץ התמונה ו-alt לנגישות. לפני שתוסיפו תמונות ל-HTML שלכם, תצטרכו לארגן את קבצי הפרויקט שלכם בצורה נכונה על ידי יצירת תיקיית תמונות והוספת גרפיקות הצמחים. ראשית, הכינו את התמונות שלכם: 1. צרו תיקייה בשם images בתוך תיקיית פרויקט הטרריום שלכם 2. הורידו את תמונות הצמחים מתיקיית הפתרון (14 תמונות צמחים בסך הכל) 3. העתיקו את כל תמונות הצמחים לתוך תיקיית images החדשה שלכם ### משימה: צרו את פריסת תצוגת הצמחים עכשיו הוסיפו את תמונות הצמחים מאורגנות בשתי עמודות בין תגי <body></body>: שלב אחר שלב, מה קורה בקוד הזה: - יוצר קונטיינר עמוד ראשי עם id="page" שמחזיק את כל התוכן - מבסס שני קונטיינרים לעמודות: left-container ו-right-container - מארגן 7 צמחים בעמודה השמאלית ו-7 צמחים בעמודה הימנית - עוטף כל תמונת צמח ב-div plant-holder למיקום אישי - מיישם שמות מחלקה עקביים לעיצוב CSS בשיעור הבא - מעניק מזהים ייחודיים לכל תמונת צמח לאינטראקציה עם JavaScript בהמשך - כולל נתיבי קבצים נכונים שמצביעים על תיקיית התמונות ### 🔄 בדיקה פדגוגית הבנת מבנה: קחו רגע לסקור את מבנה ה-HTML שלכם: - ✅ האם אתם יכולים לזהות את הקונטיינרים הראשיים בפריסה שלכם? - ✅ האם אתם מבינים למה לכל תמונה יש מזהה ייחודי? - ✅ איך הייתם מתארים את מטרת ה-divs plant-holder? בדיקה חזותית: פתחו את קובץ ה-HTML שלכם בדפדפן. אתם אמורים לראות: - רשימה בסיסית של תמונות צמחים - תמונות מאורגנות בשתי עמודות - פריסה פשוטה ולא מעוצבת זכרו: המראה הפשוט הזה הוא בדיוק איך ש-HTML אמור להיראות לפני עיצוב CSS! עם סימון זה שנוסף, הצמחים יופיעו על המסך, למרות שהם עדיין לא ייראו מלוטשים – זה מה ש-CSS נועד לעשות בשיעור הבא! לעת עתה, יש לכם בסיס HTML מוצק שמארגן את התוכן שלכם בצורה נכונה ועוקב אחרי שיטות עבודה מומלצות לנגישות. ## שימוש ב-HTML סמנטי לנגישות HTML סמנטי פירושו בחירת אלמנטים HTML על בסיס משמעותם ומטרתם, לא רק על בסיס המראה שלהם. כשאתם משתמשים בסימון סמנטי, אתם מתקשרים את המבנה והמשמעות של התוכן שלכם לדפדפנים, מנועי חיפוש וטכנולוגיות מסייעות כמו קוראי מסך. גישה זו הופכת את האתרים שלכם לנגישים יותר למשתמשים עם מוגבלויות ועוזרת למנועי חיפוש להבין טוב יותר את התוכן שלכם. זהו עקרון יסוד של פיתוח אינטרנט מודרני שיוצר חוויות טובות יותר לכולם. ### הוספת כותרת עמוד סמנטית בואו נוסיף כותרת מתאימה לדף הטרריום שלכם. הכניסו את השורה הזו מיד אחרי תג הפתיחה <body>: למה סימון סמנטי חשוב: - עוזר לקוראי מסך לנווט ולהבין את מבנה הדף - משפר אופטימיזציה למנועי חיפוש (SEO) על ידי הבהרת היררכיית התוכן - מגביר נגישות למשתמשים עם לקויות ראייה או הבדלים קוגניטיביים - יוצר חוויות משתמש טובות יותר בכל המכשירים והפלטפורמות - עוקב אחרי סטנדרטים ושיטות עבודה מומלצות לפיתוח מקצועי דוגמאות לבחירות סמנטיות מול לא סמנטיות: ## יצירת קונטיינר הטרריום עכשיו נוסיף את מבנה ה-HTML לטרריום עצמו – הקונטיינר הזכוכיתי שבו הצמחים יונחו בסופו של דבר. החלק הזה מדגים עיקרון חשוב: HTML מספק מבנה, אבל ללא עיצוב CSS, אלמנטים אלו עדיין לא יהיו נראים. סימון הטרריום משתמש בשמות מחלקה תיאוריים שיהפכו את עיצוב ה-CSS לאינטואיטיבי וניתן לתחזוקה בשיעור הבא. ### משימה: הוסיפו את מבנה הטרריום הכניסו את הסימון הזה מעל תג </div> האחרון (לפני תג הסגירה של קונטיינר העמוד): הבנת מבנה הטרריום הזה: - יוצר קונטיינר טרריום ראשי עם מזהה ייחודי לעיצוב - מגדיר אלמנטים נפרדים לכל רכיב חזותי (חלק עליון, קירות, אדמה, תחתית) - כולל אלמנטים מקוננים לאפקטים של השתקפות זכוכית (אלמנטים מבריקים) - משתמש בשמות מחלקות תיאוריים שמבהירים את מטרת כל אלמנט - מכין את המבנה לעיצוב CSS שייצור את מראה הטרריום מזכוכית ### 🔄 בדיקה פדגוגית שליטה במבנה HTML: לפני שממשיכים, ודאו שאתם יכולים: - ✅ להסביר את ההבדל בין מבנה HTML למראה חזותי - ✅ לזהות אלמנטים סמנטיים מול אלמנטים לא סמנטיים ב-HTML - ✅ לתאר איך סימון נכון משפר נגישות - ✅ לזהות את מבנה עץ המסמך המלא בדיקת ההבנה שלכם: נסו לפתוח את קובץ ה-HTML שלכם בדפדפן עם JavaScript מושבת ובלי CSS. זה יראה לכם את המבנה הסמנטי הטהור שיצרתם! --- ## אתגר סוכן GitHub Copilot השתמשו במצב סוכן כדי להשלים את האתגר הבא: תיאור: צרו מבנה HTML סמנטי עבור חלק של מדריך טיפול בצמחים שניתן להוסיף לפרויקט הטרריום. הנחיה: צרו חלק HTML סמנטי שכולל כותרת ראשית "מדריך טיפול בצמחים", שלושה תתי-חלקים עם כותרות "השקיה", "דרישות אור" ו"טיפול באדמה", שכל אחד מהם מכיל פסקה של מידע על טיפול בצמחים. השתמשו בתגי HTML סמנטיים מתאימים כמו <section>, <h2>, <h3>, ו-<p> כדי לבנות את התוכן בצורה נכונה. למדו עוד על מצב סוכן כאן. ## אתגר חקר היסטוריית HTML לימוד על התפתחות הרשת HTML התפתח משמעותית מאז שטים ברנרס-לי יצר את הדפדפן הראשון ב-CERN בשנת 1990. כמה תגיות ישנות כמו <marquee> הוצאו משימוש כי הן לא מתאימות לסטנדרטים מודרניים של נגישות ועיצוב רספונסיבי. נסו את הניסוי הזה: 1. עטפו זמנית את כותרת <h1> שלכם בתג <marquee>: <marquee><h1>הטרריום שלי</h1></marquee> 2. פתחו את הדף שלכם בדפדפן וצפו באפקט הגלילה 3. חשבו מדוע התג הזה הוצא משימוש (רמז: חשבו על חוויית משתמש ונגישות) 4. הסירו את תג <marquee> וחזרו לסימון סמנטי שאלות למחשבה: - איך כותרת מתגלגלת עשויה להשפיע על משתמשים עם לקויות ראייה או רגישות לתנועה? - אילו טכניקות CSS מודרניות יכולות להשיג אפקטים חזותיים דומים בצורה נגישה יותר? - מדוע חשוב להשתמש בסטנדרטים עדכניים של הרשת במקום אלמנטים שהוצאו משימוש? למדו עוד על אלמנטים HTML מיושנים ומוצאים משימוש כדי להבין איך סטנדרטים של הרשת מתפתחים לשיפור חוויית המשתמש. ## מבחן לאחר השיעור מבחן לאחר השיעור ## סקירה ולימוד עצמי העמיקו את הידע שלכם ב-HTML HTML הוא הבסיס של הרשת כבר מעל 30 שנה, והתפתח משפת סימון מסמכים פשוטה לפלטפורמה מתקדמת לבניית יישומים אינטראקטיביים. הבנת ההתפתחות הזו עוזרת לכם להעריך את הסטנדרטים המודרניים של הרשת ולקבל החלטות פיתוח טובות יותר. מסלולי לימוד מומלצים: 1. היסטוריה והתפתחות HTML - חקרו את ציר הזמן מ-HTML 1.0 ועד HTML5 - בדקו מדוע תגיות מסוימות הוצאו משימוש (נגישות, ידידותיות למובייל, תחזוקה) - חקרו תכונות HTML מתקדמות והצעות חדשות 2. העמקה ב-HTML סמנטי - למדו את הרשימה המלאה של אלמנטים סמנטיים ב-HTML5 - תרגלו זיהוי מתי להשתמש ב-<article>, <section>, <aside>, ו-<main> - למדו על תכונות ARIA לשיפור הנגישות 3. פיתוח רשת מודרני - חקרו בניית אתרים רספונסיביים ב-Microsoft Learn - הבינו איך HTML משתלב עם CSS ו-JavaScript - למדו על ביצועי רשת ושיטות עבודה מומלצות ל-SEO שאלות למחשבה: - אילו תגיות HTML מיושנות גיליתם, ומדוע הן הוצאו משימוש? - אילו תכונות HTML חדשות מוצעות לגרסאות עתידיות? - איך HTML סמנטי תורם לנגישות הרשת ול-SEO? ### ⚡ מה תוכלו לעשות ב-5 הדקות הקרובות - [ ] פתחו DevTools (F12) ובדקו את מבנה ה-HTML של האתר האהוב עליכם - [ ] צרו קובץ HTML פשוט עם תגיות בסיסיות: <h1>, <p>, ו-<img> - [ ] בדקו את ה-HTML שלכם באמצעות W3C HTML Validator אונליין - [ ] נסו להוסיף הערה ל-HTML שלכם באמצעות <!-- הערה --> ### 🎯 מה תוכלו להשיג בשעה הקרובה - [ ] השלימו את המבחן לאחר השיעור וסקירה של מושגי HTML סמנטי - [ ] בנו דף אינטרנט פשוט על עצמכם עם מבנה HTML נכון - [ ] נסו רמות כותרות שונות ותגיות עיצוב טקסט - [ ] הוסיפו תמונות וקישורים כדי לתרגל שילוב מולטימדיה - [ ] חקרו תכונות HTML5 שעדיין לא ניסיתם ### 📅 מסע ה-HTML שלכם לשבוע - [ ] השלימו את משימת פרויקט הטרריום עם סימון סמנטי - [ ] צרו דף אינטרנט נגיש באמצעות תוויות ותפקידים של ARIA - [ ] תרגלו יצירת טפסים עם סוגי קלט שונים - [ ] חקרו APIs של HTML5 כמו localStorage או geolocation - [ ] למדו דפוסי HTML רספונסיביים ועיצוב מובייל תחילה - [ ] בדקו את קוד ה-HTML של מפתחים אחרים כדי ללמוד שיטות עבודה מומלצות ### 🌟 הבסיס שלכם לחודש שלם ברשת - [ ] בנו אתר פורטפוליו שמציג את שליטתכם ב-HTML - [ ] למדו תבניות HTML עם מסגרת כמו Handlebars - [ ] תרמו לפרויקטים בקוד פתוח על ידי שיפור תיעוד HTML - [ ] שלטו במושגי HTML מתקדמים כמו אלמנטים מותאמים אישית - [ ] שלבו HTML עם מסגרות CSS וספריות JavaScript - [ ] היו מנטורים לאחרים שלומדים את יסודות ה-HTML ## 🎯 לוח הזמנים שלכם לשליטה ב-HTML ### 🛠️ סיכום ערכת הכלים שלכם ב-HTML לאחר השלמת השיעור הזה, יש לכם עכשיו: - מבנה מסמך: בסיס HTML5 מלא עם DOCTYPE נכון - סימון סמנטי: תגיות משמעותיות שמשפרות נגישות ו-SEO - שילוב תמונות: ארגון קבצים נכון ושיטות עבודה עם טקסט חלופי - מיכלי פריסה: שימוש אסטרטגי ב-divs עם שמות מחלקות תיאוריים - מודעות לנגישות: הבנה של ניווט קוראי מסך - סטנדרטים מודרניים: שיטות עבודה עדכניות ב-HTML5 וידע על תגיות מיושנות - בסיס לפרויקט: בסיס מוצק לעיצוב CSS ואינטראקטיביות עם JavaScript השלבים הבאים: מבנה ה-HTML שלכם מוכן לעיצוב CSS! הבסיס הסמנטי שבניתם יהפוך את השיעור הבא לקל יותר להבנה. ## משימה תרגלו את ה-HTML שלכם: בנו דגם בלוג --- הצהרת אחריות: מסמך זה תורגם באמצעות שירות תרגום AI Co-op Translator. למרות שאנו שואפים לדיוק, יש להיות מודעים לכך שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי אנושי. איננו אחראים לאי הבנות או פרשנויות שגויות הנובעות משימוש בתרגום זה.
פרויקט הטרריום חלק 2: מבוא ל-CSS
זוכרים איך הטרריום שלכם ב-HTML נראה די בסיסי? CSS הוא המקום שבו אנו הופכים את המבנה הפשוט הזה למשהו מושך מבחינה חזותית. אם HTML הוא כמו בניית מסגרת של בית, אז CSS הוא כל מה שגורם לו להרגיש כמו בית - צבעי הקירות, סידור הרהיטים, התאורה ואיך החדרים מתחברים זה לזה. תחשבו איך ארמון ורסאי התחיל כבית ציד פשוט, אבל תשומת לב מדוקדקת לעיצוב ולפריסה הפכה אותו לאחד המבנים המפוארים בעולם. היום, נהפוך את הטרריום שלכם מפונקציונלי למלוטש. תלמדו איך למקם אלמנטים בדיוק, ליצור פריסות שמגיבות לגדלים שונים של מסכים, וליצור את המשיכה החזותית שהופכת אתרים למרתקים. בסוף השיעור הזה, תראו איך עיצוב CSS אסטרטגי יכול לשפר באופן דרמטי את הפרויקט שלכם. בואו נוסיף קצת סטייל לטרריום שלכם. ## שאלון לפני השיעור שאלון לפני השיעור ## התחלת עבודה עם CSS לעיתים קרובות חושבים על CSS כמשהו ש"עושה דברים יפים", אבל הוא משרת מטרה רחבה הרבה יותר. CSS הוא כמו להיות במאי של סרט - אתם שולטים לא רק איך הכל נראה, אלא גם איך זה זז, מגיב לאינטראקציה ומסתגל למצבים שונים. CSS מודרני הוא בעל יכולות מרשימות. אתם יכולים לכתוב קוד שמותאם אוטומטית לפריסות של טלפונים, טאבלטים ומחשבים שולחניים. אתם יכולים ליצור אנימציות חלקות שמכוונות את תשומת הלב של המשתמשים למקום הנכון. התוצאות יכולות להיות מרשימות מאוד כשהכל עובד יחד. הנה מה שנשיג בשיעור הזה: - ניצור עיצוב חזותי מלא לטרריום שלכם באמצעות טכניקות CSS מודרניות - נחקור מושגים בסיסיים כמו הקסקדה, ירושה ובוררי CSS - ניישם אסטרטגיות מיקום ופריסה רספונסיביות - נבנה את מיכל הטרריום באמצעות צורות ועיצוב ב-CSS ### דרישות מקדימות עליכם לסיים את מבנה ה-HTML של הטרריום שלכם מהשיעור הקודם ולהכין אותו לעיצוב. ### הגדרת קובץ ה-CSS שלכם לפני שנוכל להתחיל לעצב, עלינו לחבר את ה-CSS ל-HTML שלנו. החיבור הזה אומר לדפדפן היכן למצוא את הוראות העיצוב לטרריום שלנו. בתיקיית הטרריום שלכם, צרו קובץ חדש בשם style.css, ואז קישרו אותו בסעיף <head> של מסמך ה-HTML שלכם: הנה מה שהקוד הזה עושה: - יוצר חיבור בין קבצי ה-HTML וה-CSS שלכם - אומר לדפדפן לטעון וליישם את העיצובים מ-style.css - משתמש בתכונה rel="stylesheet" כדי לציין שזהו קובץ CSS - מתייחס לנתיב הקובץ עם href="./style.css" ## הבנת הקסקדה של CSS האם תהיתם אי פעם מדוע CSS נקרא "גיליונות סגנון מדורגים"? סגנונות זורמים למטה כמו מפל, ולפעמים הם מתנגשים זה עם זה. תחשבו איך מבנה פיקוד צבאי עובד - פקודה כללית עשויה לומר "כל החיילים לובשים ירוק", אבל פקודה ספציפית ליחידה שלכם עשויה לומר "ללבוש כחול טקסי לטקס". ההוראה הספציפית יותר גוברת. CSS פועל לפי לוגיקה דומה, והבנת ההיררכיה הזו הופכת את פתרון הבעיות להרבה יותר קל. ### ניסוי עם עדיפות הקסקדה בואו נראה את הקסקדה בפעולה על ידי יצירת סתירה בעיצוב. ראשית, הוסיפו סגנון מוטמע לתג <h1> שלכם: מה הקוד הזה עושה: - מיישם צבע אדום ישירות על אלמנט <h1> באמצעות עיצוב מוטמע - משתמש בתכונה style כדי להטמיע CSS ישירות ב-HTML - יוצר כלל סגנון בעדיפות הגבוהה ביותר עבור אלמנט ספציפי זה לאחר מכן, הוסיפו את הכלל הזה לקובץ style.css שלכם: במקרה הזה, עשינו: - הגדרנו כלל CSS שמכוון לכל אלמנטי <h1> - קבענו את צבע הטקסט לכחול באמצעות גיליון סגנון חיצוני - יצרנו כלל בעדיפות נמוכה יותר בהשוואה לסגנונות מוטמעים ✅ בדיקת ידע: איזה צבע מוצג באפליקציית האינטרנט שלכם? מדוע הצבע הזה גובר? האם אתם יכולים לחשוב על תרחישים שבהם תרצו לעקוף סגנונות? ## ירושה ב-CSS בפעולה ירושה ב-CSS עובדת כמו גנטיקה - אלמנטים יורשים תכונות מסוימות מהאלמנטים ההורים שלהם. אם תגדירו את משפחת הגופן על אלמנט ה-body, כל הטקסט שבתוכו ישתמש אוטומטית באותו גופן. זה דומה לאיך שהלסת המיוחדת של משפחת הבסבורג הופיעה לאורך הדורות מבלי שהוגדרה לכל פרט בנפרד. עם זאת, לא הכל יורש. סגנונות טקסט כמו גופנים וצבעים כן יורשים, אבל תכונות פריסה כמו שוליים וגבולות לא. בדיוק כמו שילדים עשויים לרשת תכונות פיזיות אבל לא את בחירות האופנה של הוריהם. ### תצפית על ירושת גופנים בואו נראה את הירושה בפעולה על ידי הגדרת משפחת גופן על אלמנט <body>: פירוט מה קורה כאן: - מגדיר את משפחת הגופן לכל הדף על ידי מיקוד אלמנט <body> - משתמש בערימת גופנים עם אפשרויות חלופיות לשיפור תאימות הדפדפן - מיישם גופנים מודרניים שנראים נהדר במערכות הפעלה שונות - מבטיח שכל האלמנטים הילדיים יורשים את הגופן הזה אלא אם כן הוגדר אחרת פתחו את כלי המפתחים של הדפדפן שלכם (F12), עברו ללשונית Elements ובדקו את אלמנט <h1> שלכם. תראו שהוא יורש את משפחת הגופן מה-body: ✅ זמן ניסוי: נסו להגדיר תכונות אחרות שניתן לרשת על <body> כמו color, line-height או text-align. מה קורה לכותרת ולשאר האלמנטים? ### 🔄 בדיקת פדגוגיה הבנת יסודות CSS: לפני המעבר לבוררים, ודאו שאתם יכולים: - ✅ להסביר את ההבדל בין קסקדה לירושה - ✅ לחזות איזה סגנון ינצח בסכסוך ספציפיות - ✅ לזהות אילו תכונות יורשות מאלמנטים הורים - ✅ לחבר קבצי CSS ל-HTML בצורה נכונה מבחן מהיר: אם יש לכם את הסגנונות האלה, איזה צבע יהיה ל-<h1> בתוך <div class="special">? תשובה: אדום (בורר אלמנט מכוון ישירות ל-h1) ## שליטה בבוררי CSS בוררי CSS הם הדרך שלכם למקד אלמנטים ספציפיים לעיצוב. הם עובדים כמו לתת הוראות מדויקות - במקום לומר "הבית", אתם עשויים לומר "הבית הכחול עם הדלת האדומה ברחוב מייפל". CSS מספק דרכים שונות להיות ספציפיים, ובחירת הבורר הנכון היא כמו בחירת הכלי המתאים למשימה. לפעמים אתם צריכים לעצב כל דלת בשכונה, ולפעמים רק דלת ספציפית אחת. ### בוררי אלמנטים (תגיות) בוררי אלמנטים מכוונים אלמנטים HTML לפי שם התג שלהם. הם מושלמים להגדרת סגנונות בסיסיים שמיושמים באופן רחב על פני הדף שלכם: הבנת הסגנונות האלה: - מגדיר טיפוגרפיה עקבית על פני כל הדף עם בורר body - מסיר שוליים וריפוד ברירת מחדל של הדפדפן לשליטה טובה יותר - מעצב את כל אלמנטי הכותרות עם צבע, יישור וריווח - משתמש ביחידות rem לגודל גופן נגיש וניתן להרחבה בעוד שבוררי אלמנטים עובדים היטב לעיצוב כללי, תצטרכו בוררים ספציפיים יותר כדי לעצב רכיבים בודדים כמו הצמחים בטרריום שלכם. ### בוררי מזהים לאלמנטים ייחודיים בוררי מזהים משתמשים בסמל # ומכוונים אלמנטים עם תכונות id ספציפיות. מכיוון שמזהים חייבים להיות ייחודיים בדף, הם מושלמים לעיצוב אלמנטים בודדים ומיוחדים כמו מיכלי הצמחים השמאלי והימני שלנו. בואו ניצור את העיצוב למיכלי הצד של הטרריום שלנו, שבהם הצמחים יימצאו: הנה מה שהקוד הזה משיג: - ממקם מיכלים בקצוות השמאלי והימני באמצעות מיקום absolute - משתמש ביחידות vh (גובה חלון תצוגה) לגובה רספונסיבי שמסתגל לגודל המסך - מיישם box-sizing: border-box כך שהריפוד ייכלל ברוחב הכולל - מסיר יחידות px מיותרות מערכים אפסיים לקוד נקי יותר - קובע צבע רקע עדין שקל יותר לעין מאפור בוהק ✅ אתגר איכות קוד: שימו לב איך ה-CSS הזה מפר את עקרון DRY (אל תחזור על עצמך). האם תוכלו לשפר אותו באמצעות גם מזהה וגם מחלקה? גישה משופרת: ### בוררי מחלקות לעיצובים חוזרים בוררי מחלקות משתמשים בסמל . והם מושלמים כשאתם רוצים ליישם את אותם סגנונות על אלמנטים מרובים. בניגוד למזהים, מחלקות יכולות להיות בשימוש חוזר לאורך כל ה-HTML שלכם, מה שהופך אותן לאידיאליות לדפוסי עיצוב עקביים. בטרריום שלנו, כל צמח זקוק לעיצוב דומה אך גם למיקום אישי. נשתמש בשילוב של מחלקות לעיצובים משותפים ומזהים למיקום ייחודי. הנה מבנה ה-HTML לכל צמח: הסברים על האלמנטים המרכזיים: - משתמש ב-class="plant-holder" לעיצוב מיכל עקבי לכל הצמחים - מיישם class="plant" לעיצוב ותפקוד משותף של תמונות - כולל מזהה ייחודי id="plant1" למיקום אישי ואינטראקציה עם JavaScript - מספק טקסט חלופי תיאורי לנגישות עבור קוראי מסך עכשיו הוסיפו את הסגנונות האלה לקובץ style.css שלכם: פירוט הסגנונות האלה: - יוצר מיקום יחסי למחזיק הצמח כדי ליצור הקשר מיקום - קובע כל מחזיק צמח לגובה של 13%, ומבטיח שכל הצמחים יתאימו אנכית ללא גלילה - מזיז את המחזיקים מעט שמאלה כדי למרכז טוב יותר את הצמחים בתוך המיכלים שלהם - מאפשר לצמחים להתאים את עצמם באופן רספונסיבי עם תכונות max-width ו-max-height - משתמש ב-z-index כדי למקם את הצמחים מעל אלמנטים אחרים בטרריום - מוסיף אפקט ריחוף עדין עם מעברי CSS לאינטראקציה טובה יותר עם המשתמש ✅ חשיבה ביקורתית: מדוע אנו צריכים גם את .plant-holder וגם את .plant? מה היה קורה אם היינו מנסים להשתמש רק באחד מהם? ## הבנת מיקום ב-CSS מיקום ב-CSS הוא כמו להיות במאי במה - אתם מכוונים היכן כל שחקן עומד ואיך הוא זז על הבמה. חלק מהשחקנים עוקבים אחרי התצורה הסטנדרטית, בעוד שאחרים זקוקים למיקום ספציפי לאפקט דרמטי. ברגע שתבינו מיקום, הרבה אתגרי פריסה יהפכו לניתנים לניהול. צריכים סרגל ניווט שנשאר בראש בזמן שהמשתמשים גוללים? מיקום מטפל בזה. רוצים תיבת טקסט שמופיעה במיקום ספציפי? גם זה מיקום. ### חמשת ערכי המיקום ### מיקום בטרריום שלנו הטרריום שלנו משתמש בשילוב אסטרטגי של סוגי מיקום כדי ליצור את הפריסה הרצויה: הבנת אסטרטגיית המיקום: - מיכלים מוחלטים מוסרים מזרימת המסמך הרגילה ומוצמדים לקצוות המסך - מחזיקי צמחים יחסיים יוצרים הקשר מיקום תוך שהם נשארים בזרימת המסמך - צמחים מוחלטים יכולים להיות ממוקמים בדיוק בתוך המחזיקים היחסיים שלהם - השילוב הזה מאפשר לצמחים להיערם אנכית תוך שהם ניתנים למיקום אישי ✅ זמן ניסוי: נסו לשנות את ערכי המיקום וצפו בתוצאות: - מה קורה אם תשנו .container מ-absolute ל-` - איך משתנה הפריסה אם .plant-holder משתמש ב-absolute במקום ב-relative? - מה קורה כשמשנים את המיקום של .plant ל-relative? ### 🔄 בדיקת הבנה פדגוגית שליטה במיקום CSS: עצרו כדי לוודא שאתם מבינים: - ✅ האם אתם יכולים להסביר מדוע הצמחים צריכים מיקום מוחלט כדי לגרור ולשחרר? - ✅ האם אתם מבינים כיצד מיכלים יחסיים יוצרים הקשר מיקום? - ✅ מדוע המיכלים הצדדיים משתמשים במיקום מוחלט? - ✅ מה יקרה אם תסירו את הצהרות המיקום לחלוטין? חיבור לעולם האמיתי: חשבו כיצד מיקום ב-CSS משקף פריסה בעולם האמיתי: - סטטי: ספרים על מדף (סדר טבעי) - יחסי: הזזת ספר מעט אך שמירה על מיקומו - מוחלט: הנחת סימנייה בעמוד מסוים - קבוע: פתק דביק שנשאר גלוי בזמן שאתם מדפדפים ## בניית הטרריום עם CSS עכשיו נבנה צנצנת זכוכית באמצעות CSS בלבד - ללא תמונות או תוכנות גרפיות. יצירת זכוכית מציאותית, צללים ואפקטים של עומק באמצעות מיקום ושקיפות מדגימה את היכולות הוויזואליות של CSS. טכניקה זו משקפת כיצד אדריכלים בתנועת הבאוהאוס השתמשו בצורות גיאומטריות פשוטות כדי ליצור מבנים מורכבים ויפים. ברגע שתבינו את העקרונות הללו, תזהו את הטכניקות של CSS מאחורי עיצובים רבים באינטרנט. ### יצירת רכיבי צנצנת הזכוכית בואו נבנה את צנצנת הטרריום חלק אחר חלק. כל חלק משתמש במיקום מוחלט ובגדלים מבוססי אחוזים לעיצוב רספונסיבי: הבנת בניית הטרריום: - שימוש במידות מבוססות אחוזים להתאמה רספונסיבית בכל גודל מסך - מיקום אלמנטים באופן מוחלט כדי לערום וליישר אותם בדיוק - יישום ערכי שקיפות שונים ליצירת אפקט שקיפות הזכוכית - שימוש ב-z-index לשכבות כך שהצמחים יופיעו בתוך הצנצנת - הוספת צללים עדינים ורדיוס גבול מעודן למראה מציאותי יותר ### עיצוב רספונסיבי עם אחוזים שימו לב שכל המידות משתמשות באחוזים במקום ערכי פיקסלים קבועים: מדוע זה חשוב: - מבטיח שהטרריום יתאים באופן פרופורציונלי לכל גודל מסך - שומר על היחסים הוויזואליים בין רכיבי הצנצנת - מספק חוויה עקבית מטלפונים ניידים ועד מסכי מחשב גדולים - מאפשר לעיצוב להתאים מבלי לשבור את הפריסה הוויזואלית ### יחידות CSS בפעולה אנחנו משתמשים ביחידות rem עבור רדיוס הגבול, שמותאמות לגודל הגופן הראשי. זה יוצר עיצובים נגישים יותר שמכבדים את העדפות המשתמש. למדו עוד על יחידות יחסיות ב-CSS במפרט הרשמי. ✅ ניסוי ויזואלי: נסו לשנות את הערכים הללו וצפו בהשפעות: - שנו את השקיפות של הצנצנת מ-0.5 ל-0.8 – איך זה משפיע על מראה הזכוכית? - התאימו את צבע האדמה מ-#3a241d ל-#8B4513 – מה ההשפעה הוויזואלית? - שנו את ה-z-index של האדמה ל-2 – מה קורה לשכבות? ### 🔄 בדיקת הבנה פדגוגית הבנת עיצוב ויזואלי ב-CSS: אשרו את הבנתכם בעיצוב ויזואלי ב-CSS: - ✅ כיצד מידות מבוססות אחוזים יוצרות עיצוב רספונסיבי? - ✅ מדוע שקיפות יוצרת אפקט שקיפות הזכוכית? - ✅ מה תפקידו של z-index בשכבות אלמנטים? - ✅ כיצד ערכי רדיוס גבול יוצרים את צורת הצנצנת? עקרון עיצוב: שימו לב כיצד אנחנו בונים ויזואליות מורכבת מצורות פשוטות: 1. מלבנים → מלבנים מעוגלים → רכיבי צנצנת 2. צבעים שטוחים → שקיפות → אפקט זכוכית 3. אלמנטים בודדים → קומפוזיציה שכבתית → מראה תלת-ממדי --- ## אתגר סוכן GitHub Copilot 🚀 השתמשו במצב סוכן כדי להשלים את האתגר הבא: תיאור: צרו אנימציה ב-CSS שגורמת לצמחים בטרריום להתנדנד בעדינות מצד לצד, המדמה אפקט של רוח טבעית. זה יעזור לכם לתרגל אנימציות ב-CSS, טרנספורמציות ו-keyframes תוך שיפור האטרקטיביות הוויזואלית של הטרריום. הנחיה: הוסיפו אנימציות keyframe ב-CSS שיגרמו לצמחים בטרריום להתנדנד בעדינות מצד לצד. צרו אנימציה של התנדנדות שמסובבת כל צמח מעט (2-3 מעלות) שמאלה וימינה עם משך זמן של 3-4 שניות, ויישמו אותה על מחלקת .plant. ודאו שהאנימציה חוזרת על עצמה באופן אינסופי ויש לה פונקציית easing לתנועה טבעית. למדו עוד על מצב סוכן כאן. ## 🚀 אתגר: הוספת השתקפויות זכוכית מוכנים לשדרג את הטרריום עם השתקפויות זכוכית מציאותיות? טכניקה זו תוסיף עומק וריאליזם לעיצוב. תיצרו הדגשות עדינות שמדמות כיצד אור משתקף על פני זכוכית. גישה זו דומה לאופן שבו ציירי הרנסנס כמו יאן ואן אייק השתמשו באור והשתקפות כדי לגרום לזכוכית מצוירת להיראות תלת-ממדית. הנה מה שאתם שואפים להשיג: האתגר שלכם: - צרו צורות אליפטיות עדינות בצבע לבן או בהיר עבור השתקפויות הזכוכית - מקמו אותן באופן אסטרטגי בצד השמאלי של הצנצנת - יישמו אפקטי שקיפות וטשטוש מתאימים להשתקפות אור מציאותית - השתמשו ב-border-radius ליצירת צורות אורגניות דמויות בועות - נסו להשתמש בגרדיאנטים או בצללים לתוספת ריאליזם ## מבחן לאחר השיעור מבחן לאחר השיעור ## הרחיבו את הידע שלכם ב-CSS CSS יכול להרגיש מורכב בהתחלה, אבל הבנת העקרונות הבסיסיים הללו מספקת בסיס מוצק לטכניקות מתקדמות יותר. תחומי הלמידה הבאים שלכם ב-CSS: - Flexbox - מפשט יישור והפצת אלמנטים - CSS Grid - מספק כלים חזקים ליצירת פריסות מורכבות - משתני CSS - מפחית חזרות ומשפר את התחזוקה - עיצוב רספונסיבי - מבטיח שהאתרים יעבדו היטב בכל גודל מסך ### משאבי למידה אינטראקטיביים תרגלו את העקרונות הללו עם משחקים מהנים ומעשיים: - 🐸 Flexbox Froggy - שלטו ב-Flexbox דרך אתגרים מהנים - 🌱 Grid Garden - למדו CSS Grid על ידי גידול גזרים וירטואליים - 🎯 CSS Battle - בדקו את כישורי ה-CSS שלכם עם אתגרי קוד ### למידה נוספת ללמידה מקיפה של יסודות CSS, השלימו את המודול של Microsoft Learn: עצבו את אפליקציית ה-HTML שלכם עם CSS ### ⚡ מה תוכלו לעשות ב-5 הדקות הבאות - [ ] פתחו את DevTools ובדקו סגנונות CSS בכל אתר באמצעות פאנל האלמנטים - [ ] צרו קובץ CSS פשוט וקשרו אותו לדף HTML - [ ] נסו לשנות צבעים באמצעות שיטות שונות: hex, RGB וצבעים בשם - [ ] תרגלו את מודל הקופסה על ידי הוספת padding ו-margin ל-div ### 🎯 מה תוכלו להשיג בשעה הקרובה - [ ] השלימו את המבחן לאחר השיעור וסקרו את יסודות ה-CSS - [ ] עצבו את דף ה-HTML שלכם עם פונטים, צבעים וריווחים - [ ] צרו פריסה פשוטה באמצעות flexbox או grid - [ ] נסו אנימציות CSS למעבר חלק - [ ] תרגלו עיצוב רספונסיבי עם media queries ### 📅 הרפתקת CSS שבועית - [ ] השלימו את משימת עיצוב הטרריום עם יצירתיות - [ ] שלטו ב-CSS Grid על ידי בניית פריסת גלריית תמונות - [ ] למדו אנימציות CSS כדי להחיות את העיצובים שלכם - [ ] חקרו קדם-מעבדי CSS כמו Sass או Less - [ ] למדו עקרונות עיצוב ויישמו אותם ב-CSS שלכם - [ ] נתחו ושחזרו עיצובים מעניינים שתמצאו באינטרנט ### 🌟 שליטה בעיצוב לאורך חודש - [ ] בנו מערכת עיצוב אתר רספונסיבית מלאה - [ ] למדו CSS-in-JS או מסגרות כמו Tailwind - [ ] תרמו לפרויקטים בקוד פתוח עם שיפורי CSS - [ ] שלטו במושגי CSS מתקדמים כמו מאפיינים מותאמים אישית ו-containment - [ ] צרו ספריות רכיבים לשימוש חוזר עם CSS מודולרי - [ ] היו מנטורים לאחרים שלומדים CSS ושתפו ידע עיצובי ## 🎯 לוח זמנים לשליטה ב-CSS ### 🛠️ סיכום ערכת הכלים שלכם ב-CSS לאחר השלמת השיעור הזה, יש לכם עכשיו: - הבנת היררכיה: כיצד סגנונות יורשים ומחליפים זה את זה - שליטה בבחירה: מיקוד מדויק עם אלמנטים, מחלקות ו-IDs - מיומנויות מיקום: מיקום אסטרטגי ושכבות אלמנטים - עיצוב ויזואלי: יצירת אפקטי זכוכית, צללים ושקיפות - טכניקות רספונסיביות: פריסות מבוססות אחוזים שמתאימות לכל מסך - ארגון קוד: מבנה CSS נקי וניתן לתחזוקה - שיטות מודרניות: שימוש ביחידות יחסיות ובתבניות עיצוב נגישות השלבים הבאים: לטרריום שלכם יש עכשיו גם מבנה (HTML) וגם סגנון (CSS). השיעור האחרון יוסיף אינטראקטיביות עם JavaScript! ## משימה שיפור CSS --- כתב ויתור: מסמך זה תורגם באמצעות שירות תרגום AI Co-op Translator. למרות שאנו שואפים לדיוק, יש להיות מודעים לכך שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי אנושי. איננו אחראים לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.
Terrarium Project Part 1: HTML का परिचय
HTML, या हाइपरटेक्स्ट मार्कअप भाषा, हर उस वेबसाइट की नींव है जिसे आपने कभी देखा है। HTML को ऐसे समझें जैसे कंकाल जो वेब पेजों को संरचना देता है – यह निर्धारित करता है कि सामग्री कहाँ जाती है, यह कैसे संगठित है, और प्रत्येक भाग क्या दर्शाता है। जबकि बाद में CSS आपके HTML को रंग और लेआउट से "सजाएगा", और जावास्क्रिप्ट इसे इंटरैक्टिविटी के साथ जीवन में लाएगा, HTML वह मूल संरचना प्रदान करता है जो सब कुछ संभव बनाती है। इस पाठ में, आप एक वर्चुअल टेरारियम इंटरफ़ेस के लिए HTML संरचना बनाएंगे। यह व्यावहारिक प्रोजेक्ट आपको बुनियादी HTML अवधारणाएं सिखाएगा जबकि कुछ दृश्यात्मक रूप से आकर्षक बनाएगा। आप यह सीखेंगे कि कैसे सैमान्टिक एलिमेंट्स का उपयोग करके कंटेंट को व्यवस्थित करें, तस्वीरों के साथ काम करें, और एक इंटरैक्टिव वेब एप्लिकेशन के लिए आधार तैयार करें। इस पाठ के अंत तक, आपके पास एक कार्यशील HTML पेज होगा जो पौधों की तस्वीरें व्यवस्थित स्तंभों में प्रदर्शित करेगा, जो अगले पाठ में स्टाइलिंग के लिए तैयार होगा। यदि यह शुरू में साधारण दिखे तो चिंता न करें – यही HTML को CSS से दृश्य सुंदरीकरण से पहले करना चाहिए। ## पूर्व-व्याख्यान क्विज़ पूर्व-व्याख्यान क्विज़ ## अपने प्रोजेक्ट की सेटअप HTML कोड में जाने से पहले, आइए अपने टेरारियम प्रोजेक्ट के लिए एक उचित कार्यक्षेत्र सेट अप करें। शुरुआत से ही एक व्यवस्थित फ़ाइल संरचना बनाना एक महत्वपूर्ण आदत है जो आपके वेब विकास यात्रा में अच्छी सेवा देगी। ### कार्य: अपना प्रोजेक्ट स्ट्रक्चर बनाएं आप अपने टेरारियम प्रोजेक्ट के लिए एक समर्पित फ़ोल्डर बनाएंगे और अपनी पहली HTML फ़ाइल जोड़ेंगे। आप निम्न दो तरीकों में से किसी एक का उपयोग कर सकते हैं: विकल्प 1: Visual Studio Code का उपयोग करना 1. Visual Studio Code खोलें 2. "File" → "Open Folder" पर क्लिक करें या Ctrl+K, Ctrl+O (Windows/Linux) या Cmd+K, Cmd+O (Mac) का उपयोग करें 3. terrarium नामक नया फ़ोल्डर बनाएं और उसे सेलेक्ट करें 4. एक्सप्लोरर पैन में, "New File" आइकन पर क्लिक करें 5. अपनी फ़ाइल का नाम index.html रखें विकल्प 2: टर्मिनल कमांड का उपयोग करना ये कमांड्स जो कर रहे हैं उसे समझें: - आपके प्रोजेक्ट के लिए एक नया डायरेक्टरी terrarium बनाता है - terrarium डायरेक्टरी में नेविगेट करता है - एक खाली index.html फ़ाइल बनाता है - फ़ाइल को संपादन के लिए Visual Studio Code में खोलता है ## HTML दस्तावेज़ संरचना को समझना हर HTML दस्तावेज़ एक विशिष्ट संरचना का पालन करता है जिसे ब्राउज़र को समझना और ठीक से दिखाना ज़रूरी होता है। इसे आप एक औपचारिक पत्र की तरह सोचें – इसमें आवश्यक तत्व एक विशेष क्रम में होते हैं जो रिसीवर (इस मामले में ब्राउज़र) को सामग्री को सही से संसाधित करने में मदद करता है। आइए हर HTML दस्तावेज़ के लिए आवश्यक नींव जोड़कर शुरू करें। ### DOCTYPE घोषणा और मूल तत्व किसी भी HTML फ़ाइल की पहली दो पंक्तियाँ दस्तावेज़ का ब्राउज़र के लिए "परिचय" होती हैं: यह कोड क्या करता है, समझें: - <!DOCTYPE html> का उपयोग करके दस्तावेज़ प्रकार को HTML5 घोषित करता है - <html> रूट एलिमेंट बनाता है जिसमें पूरा पेज कंटेंट शामिल होगा - आधुनिक वेब मानकों को स्थापित करता है ताकि ब्राउज़र सही तरीके से रेंडर करें - विभिन्न ब्राउज़रों और उपकरणों में स्थिर और संगत प्रदर्शन सुनिश्चित करता है ### 🔄 शैक्षिक जाँच रुकें और सोचें: आगे बढ़ने से पहले सुनिश्चित करें कि आप समझते हैं: - ✅ हर HTML दस्तावेज़ को DOCTYPE घोषणा की आवश्यकता क्यों होती है - ✅ <html> मूल तत्व में क्या होता है - ✅ यह संरचना ब्राउज़र को पेज को सही ढंग से रेंडर करने में कैसे मदद करती है त्वरित स्वयं-परीक्षा: क्या आप अपनी भाषा में समझा सकते हैं कि "मानक-अनुरूप रेंडरिंग" का क्या अर्थ है? ## आवश्यक दस्तावेज़ मेटाडेटा जोड़ना एक HTML दस्तावेज़ का <head> अनुभाग वह महत्वपूर्ण जानकारी रखता है जिसे ब्राउज़र और सर्च इंजन को चाहिए, परंतु विज़िटर सीधे पेज पर नहीं देखते। इसे "परदे के पीछे" की जानकारी समझें जो आपकी वेबपेज को सही काम करने और विभिन्न उपकरणों और प्लेटफॉर्म पर ठीक से दिखने में मदद करती है। यह मेटाडेटा ब्राउज़रों को बताता है कि पेज कैसे दिखाना है, कौन सा कैरेक्टर एनकोडिंग इस्तेमाल करना है, और विभिन्न स्क्रीन आकारों को कैसे संभालना है – ये सभी पेशेवर और सुलभ वेब पेज बनाने के लिए महत्वपूर्ण होते हैं। ### कार्य: दस्तावेज़ हेड जोड़ें अपने <html> टैग के खुले और बंद टैग के बीच यह <head> सेक्शन डालें: प्रत्येक एलिमेंट क्या करता है, तोड़कर देखें: - ब्राउज़र टैब और सर्च परिणामों में दिखने वाला पेज शीर्षक सेट करता है - विश्व स्तर पर सही टेक्स्ट डिस्प्ले के लिए UTF-8 कैरेक्टर एनकोडिंग निर्दिष्ट करता है - Internet Explorer के आधुनिक संस्करणों के साथ अनुकूलता सुनिश्चित करता है - डिवाइस की चौड़ाई से मेल खाने के लिए व्यूपोर्ट निर्धारित करता है जिससे रेस्पॉन्सिव डिजाइन काम करे - सामग्री को प्राकृतिक आकार में दिखाने के लिए प्रारंभिक ज़ूम स्तर नियंत्रित करता है ## दस्तावेज़ बॉडी बनाना <body> तत्व आपके वेबपेज की सारी दृश्य सामग्री रखता है – वे सब कुछ जो उपयोगकर्ता देखेंगे और इंटरैक्ट करेंगे। जबकि <head> सेक्शन ब्राउज़र को निर्देश देता है, <body> में वास्तविक सामग्री होती है: टेक्स्ट, चित्र, बटन, और अन्य तत्व जो आपके यूजर इंटरफेस बनाते हैं। आइए बॉडी संरचना जोड़ें और समझें कि HTML टैग कैसे मिलकर सार्थक सामग्री बनाते हैं। ### HTML टैग संरचना को समझना HTML जोड़ियाँ टैग का उपयोग करता है। अधिकांश टैग के एक उद्घाटन टैग जैसे <p> और एक समापन टैग जैसे </p> होते हैं, दोनों के बीच सामग्री होती है: <p>Hello, world!</p>। यह एक पैराग्राफ एलिमेंट बनाता है जिसमें "Hello, world!" टेक्स्ट होता है। ### कार्य: बॉडी एलिमेंट जोड़ें अपने HTML फ़ाइल को <body> एलिमेंट जोड़ने के लिए अपडेट करें: यह पूरी संरचना क्या प्रदान करती है: - मूल HTML5 दस्तावेज़ फ्रेमवर्क स्थापित करता है - ब्राउज़र द्वारा ठीक से रेंडरिंग के लिए आवश्यक मेटाडेटा शामिल करता है - आपकी दृश्य सामग्री के लिए एक खाली बॉडी बनाता है - आधुनिक वेब विकास के सर्वोत्तम अभ्यासों का पालन करता है अब आप अपने टेरारियम के दृश्य तत्व जोड़ने के लिए तैयार हैं। हम विभिन्न कंटेंट सेक्शन को व्यवस्थित करने के लिए कंटेनर के रूप में <div> एलिमेंट्स और पौधों की तस्वीरें दिखाने के लिए <img> एलिमेंट्स का उपयोग करेंगे। ### चित्रों और लेआउट कंटेनरों के साथ काम करना HTML में चित्र विशेष होते हैं क्योंकि वे "self-closing" टैग का उपयोग करते हैं। <p></p> जैसे तत्वों के विपरीत जो सामग्री के चारों ओर होते हैं, <img> टैग में सारी जानकारी स्वयं टैग के भीतर एट्रिब्यूट्स जैसे src (इमेज फाइल पाथ) और alt (सुलभता के लिए वैकल्पिक पाठ) के साथ होती है। HTML में चित्र जोड़ने से पहले, आपको अपने प्रोजेक्ट फाइलों को सही तरीके से व्यवस्थित करना होगा, एक images फ़ोल्डर बनाकर और पौधों की ग्राफिक्स को उसमें जोड़कर। पहले, अपनी तस्वीरें सेट करें: 1. अपने टेरारियम प्रोजेक्ट फ़ोल्डर के अंदर images नामक एक फ़ोल्डर बनाएं 2. solution folder से पौधों की चित्रे डाउनलोड करें (कुल 14 पौधों की चित्रें) 3. सभी पौधों की तस्वीरें अपने नए images फ़ोल्डर में कॉपी करें ### कार्य: पौधे प्रदर्शन लेआउट बनाएं अब अपने <body></body> टैग्स के बीच पौधों की तस्वीरों को दो स्तंभों में व्यवस्थित करके जोड़ें: कदम दर कदम, इस कोड में क्या हो रहा है: - एक मुख्य पेज कंटेनर id="page" के साथ बनाता है जो सारी सामग्री रखता है - दो कॉलम कंटेनर बनाता है: left-container और right-container - बाएं स्तंभ में 7 पौधे और दाहिने स्तंभ में 7 पौधे व्यवस्थित करता है - प्रत्येक पौधे की छवि को plant-holder डिव में लपेटता है ताकि व्यक्तिगत स्थिति मिल सके - अगले पाठ में CSS स्टाइलिंग के लिए लगातार क्लास नाम लागू करता है - बाद में जावास्क्रिप्ट इंटरैक्शन के लिए प्रत्येक पौधे की छवि को अनोखी आईडी देता है - उचित फाइल पाथस के साथ images फ़ोल्डर की ओर ईशारा करता है ### 🔄 शैक्षिक जाँच संरचना समझना: अपनी HTML संरचना का एक पल के लिए अवलोकन करें: - ✅ क्या आप अपने लेआउट में मुख्य कंटेनर पहचान सकते हैं? - ✅ क्या आप समझते हैं कि प्रत्येक छवि को अनोखी आईडी क्यों मिली है? - ✅ आप plant-holder डिव का उद्देश्य कैसे वर्णित करेंगे? दृश्य निरीक्षण: अपनी HTML फ़ाइल किसी ब्राउज़र में खोलें। आपको दिखना चाहिए: - एक बेसिक पौधों की तस्वीरों की सूची - दो स्तंभों में व्यवस्थित तस्वीरें - सरल, बिना स्टाइल की गई लेआउट याद रखें: यह सादा रूप ठीक उसी प्रकार का होता है जैसा CSS स्टाइलिंग से पहले HTML होना चाहिए! यह मार्कअप जोड़ने के साथ, पौधे स्क्रीन पर दिखाई देंगे, हालांकि वे अभी चमकदार नहीं दिखेंगे – यही काम CSS अगले पाठ में करेगा! फिलहाल, आपके पास एक ठोस HTML आधार है जो आपकी सामग्री को सही ढंग से व्यवस्थित करता है और सुलभता के सर्वोत्तम अभ्यासों का पालन करता है। ## सुलभता के लिए सैमान्टिक HTML का उपयोग सैमान्टिक HTML का मतलब है HTML तत्वों को उनके अर्थ और उद्देश्य के आधार पर चुनना, केवल उनके दृश्यमान रूप से नहीं। जब आप सैमान्टिक मार्कअप का उपयोग करते हैं, तो आप अपनी सामग्री की संरचना और अर्थ को ब्राउज़र, सर्च इंजन, और सहायक तकनीकों जैसे स्क्रीन रीडर को संप्रेषित कर रहे होते हैं। यह तरीका आपकी वेबसाइटों को विकलांग उपयोगकर्ताओं के लिए अधिक सुलभ बनाता है और सर्च इंजन को आपकी सामग्री को बेहतर तरीके से समझने में मदद करता है। यह आधुनिक वेब विकास का एक मौलिक सिद्धांत है जो सभी के लिए बेहतर अनुभव बनाता है। ### एक सैमान्टिक पेज शीर्षक जोड़ना आइए अपने टेरारियम पेज के लिए उचित शीर्षक जोड़ें। इसे अपने खुले <body> टैग के ठीक बाद डालें: सैमान्टिक मार्कअप क्यों महत्वपूर्ण है: - स्क्रीन रीडर को पेज संरचना नेविगेट और समझने में मदद करता है - सामग्री पदानुक्रम को स्पष्ट करके SEO (सर्च इंजन अनुकूलन) में सुधार करता है - दृष्टिहीन या संज्ञानात्मक विविधता वाले उपयोगकर्ताओं के लिए सुलभता बढ़ाता है - सभी उपकरणों और प्लेटफ़ॉर्म पर बेहतर उपयोगकर्ता अनुभव बनाता है - पेशेवर विकास के लिए वेब मानकों और सर्वोत्तम अभ्यासों का पालन करता है सैमान्टिक और गैर-सैमान्टिक विकल्पों के उदाहरण: ## टेरारियम कंटेनर बनाना अब टेरारियम के लिए HTML संरचना जोड़ते हैं – कांच का कंटेनर जहाँ पौधे अंततः रखे जाएंगे। यह सेक्शन एक महत्वपूर्ण अवधारणा दिखाता है: HTML संरचना प्रदान करता है, लेकिन CSS स्टाइलिंग के बिना ये एलिमेंट्स अभी दिखाई नहीं देंगे। टेरारियम मार्कअप वर्णनात्मक क्लास नामों का उपयोग करता है जो अगले पाठ में CSS स्टाइलिंग को सहज और बनाए रखने योग्य बनाएगा। ### कार्य: टेरारियम संरचना जोड़ें इस मार्कअप को अंतिम </div> टैग के ऊपर डालें (पेज कंटेनर के क्लोजिंग टैग से पहले): इस टेरारियम संरचना को समझना: - स्टाइलिंग के लिए अद्वितीय आईडी के साथ एक मुख्य टेरारियम कंटेनर बनाता है - परिभाषित करता है प्रत्येक दृश्य घटक के लिए अलग-अलग तत्व (टॉप, दीवारें, मिट्टी, नीचे) - शामिल करता है कांच की परावर्तन प्रभावों के लिए नेस्टेड तत्व (चमकदार तत्व) - उपयोग करता है वर्णनात्मक क्लास नाम जो प्रत्येक तत्व के उद्देश्य को स्पष्ट रूप से दर्शाते हैं - तैयार करता है सीएसएस स्टाइलिंग के लिए संरचना जो कांच के टेरारियम की उपस्थिति बनाएगी ### 🔄 शैक्षिक चेक-इन HTML संरचना में महारत: आगे बढ़ने से पहले, सुनिश्चित करें कि आप कर सकते हैं: - ✅ HTML संरचना और दृश्य रूप के बीच का अंतर समझाएं - ✅ सेमांटिक बनाम नॉन-सेमांटिक HTML तत्वों की पहचान करें - ✅ सही मार्कअप से पहुंच योग्यता में कैसे लाभ होता है, वर्णन करें - ✅ पूरी दस्तावेज़ पेड़ संरचना को पहचानें अपनी समझ का परीक्षण करें: अपने HTML फ़ाइल को ब्राउज़र में जावास्क्रिप्ट बंद करके और CSS हटाकर खोलने की कोशिश करें। यह आपको दिखाता है कि आपने किस शुद्ध सेमांटिक संरचना बनाई है! --- ## GitHub Copilot एजेंट चैलेंज एजेंट मोड का उपयोग करके निम्नलिखित चुनौती पूरी करें: विवरण: एक पौधे की देखभाल गाइड सेक्शन के लिए सेमांटिक HTML संरचना बनाएं जिसे टेरारियम प्रोजेक्ट में जोड़ा जा सकता है। प्रॉम्प्ट: एक सेमांटिक HTML सेक्शन बनाएं जिसमें मुख्य शीर्षक "Plant Care Guide" हो, तीन उपखंड हों जिनके शीर्षक "Watering", "Light Requirements", और "Soil Care" हों, प्रत्येक में पौधे की देखभाल की जानकारी वाला पैराग्राफ हो। सामग्री को उपयुक्त रूप से संरचित करने के लिए उचित सेमांटिक HTML टैग जैसे <section>, <h2>, <h3>, और <p> का उपयोग करें। एजेंट मोड के बारे में अधिक जानें यहाँ। ## HTML इतिहास चुनौती का अन्वेषण करें वेब विकास के बारे में जानना HTML ने महत्वपूर्ण विकास किया है जब से टिम बर्नर्स-ली ने 1990 में CERN में पहला वेब ब्राउज़र बनाया था। कुछ पुराने टैग जैसे <marquee> अब निष्क्रिय हैं क्योंकि वे आधुनिक पहुंच मानकों और उत्तरदायी डिजाइन सिद्धांतों के साथ अच्छे से काम नहीं करते। यह प्रयोग करें: 1. अस्थायी रूप से अपने <h1> शीर्षक को <marquee> टैग में लपेटें: <marquee><h1>My Terrarium</h1></marquee> 2. पृष्ठ को ब्राउज़र में खोलें और स्क्रॉलिंग प्रभाव का अवलोकन करें 3. सोचें कि यह टैग क्यों निष्क्रिय कर दिया गया था (संकेत: उपयोगकर्ता अनुभव और पहुंच योग्यता के बारे में सोचें) 4. <marquee> टैग को हटा दें और सेमांटिक मार्कअप पर लौटें प्रतिबिंब प्रश्न: - स्क्रॉलिंग शीर्षक दृष्टिहीन उपयोगकर्ताओं या गति संवेदनशीलता वाले उपयोगकर्ताओं को कैसे प्रभावित कर सकता है? - किन आधुनिक CSS तकनीकों से समान दृश्य प्रभाव अधिक सुलभ तरीके से प्राप्त किया जा सकता है? - पुराने तत्वों के बजाय वर्तमान वेब मानकों का उपयोग क्यों महत्वपूर्ण है? वेब मानकों के विकास और उपयोगकर्ता अनुभव सुधारने के लिए पुराने और निष्क्रिय HTML तत्वों के बारे में अधिक जानें। ## पोस्ट-लेक्चर क्विज़ पोस्ट-लेक्चर क्विज़ ## पुनरावलोकन और स्वाध्याय अपने HTML ज्ञान को गहरा करें HTML वेब की नींव रहा है 30 से अधिक वर्षों से, जो एक सरल दस्तावेज़ मार्कअप भाषा से इंटरैक्टिव अनुप्रयोगों के निर्माण के लिए एक परिष्कृत मंच में विकसित हुआ है। इस विकास को समझना आपको आधुनिक वेब मानकों की सराहना करने और बेहतर विकास निर्णय लेने में मदद करता है। अनुशंसित शिक्षा पथ: 1. HTML इतिहास और विकास - HTML 1.0 से HTML5 तक की समयरेखा पर शोध करें - जानें कि किन टैग्स को क्यों निष्क्रिय किया गया (पहुँच योग्यता, मोबाइल अनुकूलता, रखरखाव) - उभरती HTML विशेषताएँ और प्रस्तावों की जांच करें 2. सेमांटिक HTML गहराई से - HTML5 सेमांटिक तत्वों की पूर्ण सूची का अध्ययन करें - जानें कब <article>, <section>, <aside>, और <main> का उपयोग करना है - बेहतर पहुंच योग्यता के लिए ARIA गुणों के बारे में जानें 3. आधुनिक वेब विकास - Microsoft Learn पर उत्तरदायी वेबसाइटों का निर्माण खोजें - समझें कि HTML CSS और JavaScript के साथ कैसे एकीकृत होता है - वेब प्रदर्शन और SEO सर्वोत्तम प्रथाओं के बारे में जानें प्रतिबिंब प्रश्न: - आपने कौन से निष्क्रिय HTML टैग खोजे, और वे क्यों हटाए गए? - भविष्य के संस्करणों के लिए कौन-सी नई HTML विशेषताएं प्रस्तावित की जा रही हैं? - सेमांटिक HTML वेब पहुंच योग्यता और SEO में कैसे योगदान देता है? ### ⚡ अगले 5 मिनट में आप क्या कर सकते हैं - [ ] DevTools (F12) खोलें और अपनी पसंदीदा वेबसाइट की HTML संरचना का निरीक्षण करें - [ ] एक सरल HTML फ़ाइल बनाएं जिसमें मूल टैग हों: <h1>, <p>, और <img> - [ ] अपने HTML को W3C HTML वैलिडेटर ऑनलाइन से मान्य करें - [ ] अपनी HTML में <!-- comment --> का उपयोग करके टिप्पणी जोड़ने का प्रयास करें ### 🎯 इस घंटे में आप क्या पूरा कर सकते हैं - [ ] पोस्ट-पाठ क्विज़ पूरा करें और सेमांटिक HTML अवधारणाओं की समीक्षा करें - [ ] उचित HTML संरचना का उपयोग करके अपने बारे में एक सरल वेबपेज बनाएं - [ ] विभिन्न शीर्षक स्तरों और टेक्स्ट स्वरूपण टैग्स के साथ प्रयोग करें - [ ] मल्टीमीडिया एकीकरण के अभ्यास के लिए इमेज और लिंक जोड़ें - [ ] उन HTML5 विशेषताओं का अन्वेषण करें जिन्हें आपने अभी तक नहीं आजमाया है ### 📅 आपकी सप्ताह भर की HTML यात्रा - [ ] सेमांटिक मार्कअप के साथ टेरारियम प्रोजेक्ट असाइनमेंट पूरा करें - [ ] ARIA लेबल और भूमिकाओं का उपयोग करके एक पहुंच योग्य वेबपेज बनाएं - [ ] विभिन्न इनपुट प्रकारों के साथ फॉर्म निर्माण का अभ्यास करें - [ ] HTML5 API जैसे localStorage या geolocation का अन्वेषण करें - [ ] उत्तरदायी HTML पैटर्न और मोबाइल-फर्स्ट डिज़ाइन का अध्ययन करें - [ ] सर्वोत्तम प्रैक्टिस के लिए अन्य डेवलपर्स के HTML कोड की समीक्षा करें ### 🌟 आपका महीने भर का वेब आधार - [ ] अपने HTML कौशल को दर्शाता हुआ पोर्टफोलियो वेबसाइट बनाएं - [ ] Handlebars जैसे फ्रेमवर्क के साथ HTML टेम्पलेटिंग सीखें - [ ] HTML दस्तावेज़ीकरण सुधार कर ओपन सोर्स प्रोजेक्ट में योगदान दें - [ ] कस्टम तत्व जैसे उन्नत HTML सिद्धांतों में महारत हासिल करें - [ ] HTML को CSS फ्रेमवर्क और JavaScript लाइब्रेरीज़ के साथ एकीकृत करें - [ ] HTML के मूल सिद्धांत सीख रहे अन्य लोगों का मार्गदर्शन करें ## 🎯 आपका HTML महारत समयरेखा ### 🛠️ आपका HTML टूलकिट सारांश इस पाठ को पूरा करने के बाद, अब आपके पास है: - दस्तावेज़ संरचना: उचित DOCTYPE के साथ पूर्ण HTML5 आधार - सेमांटिक मार्कअप: अर्थपूर्ण टैग जो पहुंच योग्यता और SEO को बढ़ाते हैं - छवि एकीकरण: उचित फ़ाइल संगठन और alt टेक्स्ट अभ्यास - लेआउट कंटेनर: वर्णनात्मक क्लास नामों के साथ रणनीतिक div उपयोग - पहुंच योग्यता जागरूकता: स्क्रीन रीडर नेविगेशन की समझ - आधुनिक मानक: वर्तमान HTML5 अभ्यास और निष्क्रिय टैग ज्ञान - परियोजना आधार: CSS स्टाइलिंग और JavaScript इंटरैक्टिविटी के लिए मजबूत आधार अगले कदम: आपका HTML संरचना CSS स्टाइलिंग के लिए तैयार है! आपने जो सेमांटिक आधार बनाया है वह अगले पाठ को समझना बहुत आसान बना देगा। ## असाइनमेंट अपने HTML का अभ्यास करें: एक ब्लॉग मॉकअप बनाएं --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> अस्वीकरण: यह दस्तावेज़ AI अनुवाद सेवा Co-op Translator का उपयोग करके अनुवादित किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटि या गलतियां हो सकती हैं। मूल दस्तावेज़ को उसकी मूल भाषा में आधिकारिक स्रोत माना जाना चाहिए। महत्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सलाह दी जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या गलत व्याख्या के लिए हम जिम्मेदार नहीं हैं। <!-- CO-OP TRANSLATOR DISCLAIMER END -->
टेरारियम प्रोजेक्ट पार्ट 2: CSS का परिचय
याद है आपका HTML टेरारियम कितना साधारण दिखता था? CSS वह जगह है जहाँ हम उस सादे ढांचे को कुछ और आकर्षक रूप में बदलते हैं। अगर HTML एक घर की फ्रेम बनाना है, तो CSS वह सब कुछ है जो उसे घर जैसा महसूस कराता है - पेंट के रंग, फर्नीचर की व्यवस्था, लाइटिंग, और कमरे कैसे आपस में जुड़े होते हैं। सोचिए कि वर्साय पैलेस कैसे एक साधारण शिकारी का लॉज था, लेकिन डेकोरेशन और लेआउट पर ध्यान देने से वह दुनिया की सबसे भव्य इमारतों में से एक बन गया। आज, हम आपके टेरारियम को कार्यात्मक से परिष्कृत बनाने जा रहे हैं। आप सीखेंगे कि तत्वों को सटीक रूप से कैसे स्थित किया जाता है, लेआउट को अलग-अलग स्क्रीन आकारों के हिसाब से कैसे अनुकूलित किया जाता है, और वह दृश्य अपील कैसे बनाई जाती है जो वेबसाइट्स को आकर्षक बनाती है। इस पाठ के अंत तक, आप देखेंगे कि रणनीतिक CSS स्टाइलिंग आपके प्रोजेक्ट को कितना बेहतर बना सकती है। चलिए आपके टेरारियम में कुछ स्टाइल जोड़ते हैं। ## प्री-लेक्चर क्विज़ प्री-लेक्चर क्विज़ ## CSS के साथ शुरुआत अक्सर CSS को केवल "चीजों को सुंदर बनाने" के रूप में देखा जाता है, लेकिन इसका उद्देश्य कहीं अधिक व्यापक है। CSS बिलकुल एक फिल्म के निर्देशक की तरह है - आप केवल यह नियंत्रित नहीं करते कि सब कुछ कैसा दिखे, बल्कि यह भी कि यह कैसे मूव करे, इंटरैक्शन पर कैसे प्रतिक्रिया दे, और विभिन्न परिस्थितियों के अनुसार कैसे अनुकूलित हो। आधुनिक CSS असाधारण रूप से सक्षम है। आप ऐसा कोड लिख सकते हैं जो फोन, टैबलेट, और डेस्कटॉप कंप्यूटर के लिए लेआउट को स्वचालित रूप से समायोजित करता है। आप स्मूद एनीमेशन बना सकते हैं जो उपयोगकर्ताओं का ध्यान सही जगह पर ले जाएं। जब सब कुछ साथ में काम करता है, तो परिणाम बहुत ही प्रभावशाली हो सकते हैं। इस पाठ में हम निम्नलिखित करेंगे: - आपके टेरारियम के लिए आधुनिक CSS तकनीकों का उपयोग करके पूर्ण दृश्य डिज़ाइन बनाएंगे - कैस्केड, इनहेरीटेंस, और CSS सेलेक्टर्स जैसे मौलिक अवधारणाओं का पता लगाएंगे - जवाबदेह पोजीशनिंग और लेआउट रणनीतियों को लागू करेंगे - CSS शेप्स और स्टाइलिंग का उपयोग करके टेरारियम कंटेनर बनाएंगे ### पूर्वापेक्षा आपने पिछले पाठ से अपने टेरारियम की HTML संरचना पूरी कर ली होनी चाहिए और इसे स्टाइल करने के लिए तैयार रखना चाहिए। ### अपनी CSS फाइल सेटअप करना स्टाइलिंग शुरू करने से पहले, हमें CSS को हमारे HTML से जोड़ना होगा। यह कनेक्शन ब्राउज़र को बताता है कि टेरारियम के लिए स्टाइलिंग निर्देश कहाँ से लाने हैं। अपने टेरारियम फ़ोल्डर में, style.css नाम की नई फाइल बनाएं, फिर इसे अपने HTML दस्तावेज़ के <head> सेक्शन में लिंक करें: यह कोड क्या करता है: - आपके HTML और CSS फाइलों के बीच कनेक्शन बनाता है - ब्राउज़र को बताता है कि style.css से स्टाइल लोड और लागू करें - rel="stylesheet" एट्रिब्यूट का उपयोग करता है ताकि यह CSS फाइल हो यह स्पष्ट हो - फ़ाइल पथ को href="./style.css" के साथ संदर्भित करता है ## CSS कैस्केड को समझना क्या आपने कभी सोचा है कि CSS को "Cascading Style Sheets" क्यों कहा जाता है? स्टाइल्स जैसे झरने की तरह नीचे गिरते हैं, और कभी-कभी वे एक-दूसरे के साथ टकराते भी हैं। सोचिए सैन्य कमांड संरचनाओं को - एक जनरल आदेश कह सकता है "सभी सैनिक हरे रंग के कपड़े पहनें," लेकिन आपके यूनिट के लिए एक विशेष आदेश कह सकता है "समारोह के लिए ड्रेस ब्लू पहनें।" अधिक विशिष्ट निर्देश को प्राथमिकता मिलती है। CSS भी इसी तार्किक संरचना का पालन करता है, और इस पदानुक्रम को समझना डिबगिंग को काफी आसान बनाता है। ### कैस्केड प्राथमिकता के साथ प्रयोग आइए कैस्केड को क्रिया में देखें एक स्टाइल संघर्ष बनाकर। पहले, अपने <h1> टैग में एक इनलाइन स्टाइल जोड़ें: यह कोड क्या करता है: - <h1> एलिमेंट पर सीधे लाल रंग लागू करता है, इनलाइन स्टाइलिंग का उपयोग कर - style एट्रिब्यूट का उपयोग करता है ताकि CSS सीधे HTML में एम्बेड हो - इस खास एलिमेंट के लिए उच्चतम प्राथमिकता वाला स्टाइल नियम बनाता है अगले, अपने style.css फाइल में यह नियम जोड़ें: ऊपर क्या किया गया: - एक CSS नियम परिभाषित किया जो सभी <h1> एलिमेंट्स को लक्षित करता है - एक बाहरी स्टाइलशीट द्वारा टेक्स्ट का रंग नीला सेट किया - इनलाइन स्टाइल की तुलना में कम प्राथमिकता वाला नियम बनाया ✅ ज्ञान जांच: आपकी वेब ऐप में कौन सा रंग दिखेगा? वह रंग क्यों विजेता है? क्या आप ऐसे परिदृश्यों के बारे में सोच सकते हैं जहाँ आप स्टाइल्स को ओवरराइड करना चाहेंगे? ## CSS इनहेरीटेंस क्रिया में CSS इनहेरीटेंस बिलकुल जेनेटिक्स की तरह काम करता है - तत्व अपने पैरेंट तत्वों से कुछ गुण प्राप्त करते हैं। यदि आप बॉडी एलिमेंट पर फ़ॉन्ट परिवार सेट करते हैं, तो उसके अंदर की सारी टेक्स्ट अपने आप वही फ़ॉन्ट उपयोग करती हैं। यह कुछ-कुछ हब्सबर्ग परिवार के विशिष्ट जबड़े के आकार की तरह है, जो पीढ़ियों से निर्दिष्ट किए बिना ही दिखाई देता रहा। हालांकि, सब कुछ विरासत में नहीं मिलता। टेक्स्ट स्टाइल्स जैसे फ़ॉन्ट और रंग विरासत में मिलते हैं, लेकिन लेआउट गुण जैसे मार्जिन और बॉर्डर नहीं मिलते। जैसे बच्चे शारीरिक लक्षण तो विरासत में पा सकते हैं लेकिन माता-पिता की फेशन पसंद नहीं। ### फ़ॉन्ट इनहेरीटेंस देखना आइए इनहेरीटेंस को क्रिया में देखें बॉडी एलिमेंट पर फ़ॉन्ट परिवार सेट करके: यहाँ क्या होता है: - पूरे पेज के लिए फ़ॉन्ट परिवार सेट करता है बॉडी को लक्षित करके - फ़ॉन्ट स्टैक का उपयोग करता है जिसमें ब्राउज़र संगतता के लिए फ़ॉलबैक विकल्प हैं - आधुनिक सिस्टम फ़ॉन्ट्स का उपयोग करता है जो विभिन्न ऑपरेटिंग सिस्टम्स पर शानदार दिखते हैं - सुनिश्चित करता है कि सभी चाइल्ड एलिमेंट्स इस फ़ॉन्ट को विरासत में पाए जब तक कि विशेष रूप से ओवरराइड न किया गया हो अपने ब्राउज़र के डेवलपर टूल्स (F12) खोलें, Elements टैब में जाएं, और अपने <h1> एलिमेंट का निरीक्षण करें। आप देखेंगे कि यह बॉडी से फ़ॉन्ट परिवार विरासत में लेता है: ✅ प्रयोग का समय: बॉडी पर color, line-height, या text-align जैसे अन्य विरासत में मिलने वाले गुण सेट करके देखें। आपके हेडिंग और अन्य एलिमेंट्स पर क्या प्रभाव पड़ता है? ### 🔄 शैक्षिक चेक-इन CSS आधार समझ: - ✅ कैस्केड और इनहेरीटेंस के बीच अंतर समझा सकते हैं - ✅ भविष्यवाणी कर सकते हैं कि विशिष्टता संघर्ष में कौन सा स्टाइल विजेता होगा - ✅ पहचान सकते हैं कि कौन से गुण पैरेंट से विरासत में मिलते हैं - ✅ CSS फाइलों को HTML से सही तरीके से कनेक्ट कर सकते हैं त्वरित परीक्षा: यदि आपके पास ये स्टाइल्स हैं, तो <div class="special"> के अंदर <h1> का रंग क्या होगा? उत्तर: लाल (एलिमेंट सेलेक्टर सीधे h1 को लक्षित करता है) ## CSS सेलेक्टर्स में महारत CSS सेलेक्टर्स आपके लिए विशिष्ट तत्वों को स्टाइल करने का तरीका हैं। ये सटीक निर्देशों की तरह काम करते हैं - "घर" कहने के बजाय, आप कह सकते हैं "मेपल स्ट्रीट पर लाल दरवाज़े वाला नीला घर"। CSS आपको विशिष्ट होने के कई तरीके देता है, और सही सेलेक्टर चुनना काम के लिए सही उपकरण चुनने जैसा है। कभी-कभी आपको पूरे मोहल्ले के सभी दरवाज़ों को स्टाइल करना होता है, तो कभी केवल एक विशिष्ट दरवाज़ा। ### एलीमेंट सेलेक्टर्स (टैग्स) एलीमेंट सेलेक्टर्स HTML तत्वों को उनके टैग नाम से लक्षित करते हैं। ये बेस स्टाइल्स सेट करने के लिए आदर्श हैं जो पूरे पेज पर लागू हों: इन स्टाइल्स को समझना: - body सेलेक्टर के साथ पूरे पेज पर सुसंगत टाइपोग्राफी सेट करता है - बेहतर नियंत्रण के लिए ब्राउज़र के डिफॉल्ट मार्जिन और पैडिंग को हटाता है - सभी हेडिंग एलिमेंट्स को रंग, संरेखण, और रिक्ति प्रदान करता है - स्केलेबल और एक्सेसिबल फॉन्ट साइज़िंग के लिए rem यूनिट्स का उपयोग करता है हालांकि एलीमेंट सेलेक्टर्स सामान्य स्टाइलिंग के लिए अच्छे हैं, आपको टेरारियम में पौधों जैसे व्यक्तिगत घटकों को स्टाइल करने के लिए अधिक विशिष्ट सेलेक्टर्स की आवश्यकता होगी। ### अनूठे तत्वों के लिए ID सेलेक्टर्स ID सेलेक्टर्स # सिंबल का उपयोग करते हैं और विशिष्ट id एट्रिब्यूट वाले तत्वों को लक्षित करते हैं। क्योंकि IDs पेज पर अद्वितीय होने चाहिए, वे व्यक्तिगत, विशेष तत्वों जैसे हमारे बाएं और दाएं पौधे कंटेनरों को स्टाइल करने के लिए आदर्श हैं। आइए अपने टेरारियम के साइड कंटेनरों के लिए स्टाइलिंग बनाएं जहाँ पौधे रखे जाएंगे: यह कोड क्या पूरा करता है: - absolute पोजीशनिंग का उपयोग करके कंटेनरों को स्क्रीन के बाएँ और दाएँ किनारों पर स्थित करता है - उत्तरदायी ऊंचाई के लिए vh (व्यूपोर्ट हाइट) यूनिट्स का उपयोग करता है जो स्क्रीन आकार के अनुसार अनुकूलित होती है - box-sizing: border-box लागू करता है ताकि पैडिंग कुल चौड़ाई में शामिल हो - शून्य मानों से अनावश्यक px यूनिट्स हटाता है ताकि कोड साफ़ रहे - एक सौम्य बैकग्राउंड रंग सेट करता है जो तीव्र ग्रे की तुलना में आंखों के लिए आसान है ✅ कोड गुणवत्ता चुनौती: देखें कि यह CSS DRY (Do Not Repeat Yourself) सिद्धांत का उल्लंघन करता है। क्या आप इसे ID और क्लास का उपयोग करके पुनः लिख सकते हैं? बेहतर तरीका: ### पुनः प्रयोज्य स्टाइल्स के लिए क्लास सेलेक्टर्स क्लास सेलेक्टर्स . सिंबल का उपयोग करते हैं और तब आदर्श होते हैं जब आप समान स्टाइल्स को कई तत्वों पर लागू करना चाहते हैं। IDs के विपरीत, क्लासेस को आप अपने HTML में कहीं भी फिर से उपयोग कर सकते हैं, जिससे वे स्थिर स्टाइलिंग पैटर्न के लिए आदर्श होते हैं। अपने टेरारियम में, प्रत्येक पौधे को समान स्टाइलिंग चाहिए लेकिन अलग-अलग पोजीशनिंग भी। हम साझा स्टाइलिंग के लिए क्लासेस और अनूठी पोजीशनिंग के लिए IDs का संयोजन इस्तेमाल करेंगे। यहाँ हर पौधे की HTML संरचना है: मुख्य तत्व समझाया गया: - सभी पौधों के लिए कंटेनर स्टाइलिंग के लिए class="plant-holder" का उपयोग - साझा छवि स्टाइलिंग और व्यवहार के लिए class="plant" लागू करता है - अद्वितीय पोजीशनिंग और जावास्क्रिप्ट इंटरैक्शन के लिए id="plant1" शामिल करता है - स्क्रीन रीडर पहुँच के लिए वर्णनात्मक alt टेक्स्ट प्रदान करता है अब अपनी style.css फाइल में ये स्टाइल्स जोड़ें: इन स्टाइल्स को तोड़कर समझना: - पोजीशनिंग संदर्भ स्थापित करने के लिए पौधे होल्डर के लिए रिलेटिव पोजीशनिंग बनाता है - हर पौधे होल्डर की ऊंचाई 13% सेट करता है, जिससे सभी पौधे लंबवत बिना स्क्रॉल के फिट हों - होल्डर्स को थोड़ा बाएं शिफ्ट करता है ताकि पौधे उनके कंटेनरों के भीतर बेहतर केंद्रित हों - max-width और max-height गुणों के साथ पौधों को उत्तरदायी रूप से स्केल होने देता है - z-index का उपयोग करता है ताकि पौधे अन्य तत्वों के ऊपर दिखाई दें - बेहतर यूजर इंटरैक्शन के लिए CSS ट्रांज़िशन के साथ एक सूक्ष्म होवर प्रभाव जोड़ता है ✅ महत्वपूर्ण सोच: हमें .plant-holder और .plant दोनों सेलेक्टर्स की आवश्यकता क्यों है? यदि हम केवल एक का उपयोग करते तो क्या होता? ## CSS पोजीशनिंग को समझना CSS पोजीशनिंग बिल्कुल एक नाटक के स्टेज डायरेक्टर की तरह है - आप निर्देश देते हैं कि हर अभिनेता कहाँ खड़ा होगा और वह मंच पर कैसे मूव करेगा। कुछ अभिनेता सामान्य व्यवस्था का पालन करते हैं, जबकि कुछ को नाटकीय प्रभाव के लिए विशेष पोजीशनिंग चाहिए। एक बार जब आप पोजीशनिंग समझ जाते हैं, तो कई लेआउट चुनौतियां आसान हो जाती हैं। उदाहरण के लिए, एक नेविगेशन बार जो स्क्रॉल करते समय शीर्ष पर स्थिर रहता है? पोजीशनिंग उस काम को संभालती है। एक टूलटिप जो विशेष स्थान पर प्रकट होती है? वह भी पोजीशनिंग है। ### पाँच पोजीशन मान ### हमारे टेरारियम में पोजीशनिंग हमारे टेरारियम में पोजीशनिंग प्रकारों के सामरिक संयोजन का उपयोग किया जाता है ताकि वांछित लेआउट बनाया जा सके: पोजीशनिंग रणनीति को समझना: - एब्सोल्यूट कंटेनर सामान्य दस्तावेज़ फ्लो से बाहर होते हैं और स्क्रीन किनारों पर पिन होते हैं - रिलेटिव पौधे होल्डर पोजीशनिंग संदर्भ बनाते हैं जब कि दस्तावेज़ फ्लो में रहते हैं - एब्सोल्यूट पौधे अपने रिलेटिव कंटेनरों के भीतर सटीक रूप से स्थित हो सकते हैं - यह संयोजन पौधों को लंबवत स्टैक करने की अनुमति देता है जबकि वे व्यक्तिगत रूप से पोजीशन किए जा सकते हैं ✅ प्रयोग का समय: पोजीशनिंग मान बदलकर परिणामों का अवलोकन करें: - यदि आप .container को absolute से relative में बदल दें तो क्या होता है? - यदि .plant-holder relative के बजाय absolute का उपयोग करता है तो लेआउट कैसे बदलता है? - जब आप .plant को relative पोजीशनिंग में बदलते हैं तो क्या होता है? ### 🔄 शैक्षिक जाँच-पड़ताल CSS पोजीशनिंग मास्टरी: अपनी समझ की पुष्टि करें: - ✅ क्या आप समझा सकते हैं कि ड्रैग-एंड-ड्रॉप के लिए पौधों को absolute पोजीशनिंग क्यों चाहिए? - ✅ क्या आप समझते हैं कि रिलेवेंट कंटेनर पोजीशनिंग संदर्भ कैसे बनाते हैं? - ✅ साइड कंटेनर absolute पोजीशनिंग क्यों उपयोग करते हैं? - ✅ अगर आपने पूरी तरह से पोजीशन घोषणाएं हटा दीं तो क्या होगा? यथार्थ दुनिया से संबंध: सोचें कि CSS पोजीशनिंग वास्तविक दुनिया की लेआउट से कैसे मेल खाती है: - Static: एक शेल्फ पर किताबें (प्राकृतिक क्रम) - Relative: एक किताब को थोड़ा हिलाना लेकिन उसकी जगह बनाए रखना - Absolute: एक बुकमार्क को सटीक पेज नंबर पर रखना - Fixed: एक चिपकने वाला नोट जो पृष्ठ पलटते समय भी दिखता रहता है ## CSS से टेरारियम बनाना अब हम केवल CSS का उपयोग करके एक कांच का जार बनाएंगे - कोई चित्र या ग्राफिक्स सॉफ्टवेयर आवश्यक नहीं। पोजीशनिंग और पारदर्शिता का उपयोग करके यथार्थवादी दिखने वाले कांच, छायाएं, और गहराई प्रभाव बनाना CSS की दृश्य क्षमताओं को प्रदर्शित करता है। यह तकनीक बाउहाउस आंदोलन के वास्तुकारों के सरल ज्यामितीय रूपों से जटिल, सुंदर संरचनाएं बनाने के तरीके जैसा है। एक बार जब आप इन सिद्धांतों को समझ लेते हैं, तो आप कई वेब डिज़ाइनों के पीछे के CSS तकनीकों को पहचानेंगे। ### कांच के जार के घटक बनाना आइए टेरारियम जार को टुकड़ों में बनाएं। प्रत्येक भाग उत्तरदायी डिज़ाइन के लिए absolute पोजीशनिंग और प्रतिशत-आधारित आकार का उपयोग करता है: टेरारियम निर्माण को समझना: - उपयोग करता है स्क्रीन के सभी आकारों पर उत्तरदायी स्केलिंग के लिए प्रतिशत-आधारित माप - तैनात करता है तत्वों को absolute रूप से क्रमबद्ध और ठीक से संरेखित करने के लिए - लागू करता है अलग-अलग अपारदर्शिता मान ताकि कांच के पारदर्शिता प्रभाव बन सकें - निष्पादित करता है z-index परत को ताकि पौधे जार के अंदर दिखें - जोड़ता है सूक्ष्म बॉक्स-शैडो और परिष्कृत बॉर्डर-रेडियस अधिक यथार्थवादी दिखने के लिए ### प्रतिशत के साथ उत्तरदायी डिज़ाइन ध्यान दें कि सभी माप प्रतिशत का उपयोग करते हैं न कि फिक्स्ड पिक्सेल मान: यह महत्वपूर्ण क्यों है: - सुनिश्चित करता है कि टेरारियम किसी भी स्क्रीन साइज पर समानुपातिक रूप से स्केल हो - रखता है जार के घटकों के बीच दृश्य संबंध - प्रदान करता है मोबाइल फ़ोनों से लेकर बड़े डेस्कटॉप मॉनिटर तक एक समान अनुभव - अनुमति देता है डिज़ाइन को बिना दृश्य लेआउट को तोड़े ढालने की ### CSS इकाइयाँ क्रियान्वित हम rem इकाइयों का उपयोग कर रहे हैं बॉर्डर-रेडियस के लिए, जो रूट फ़ॉन्ट आकार के सापेक्ष स्केल होती हैं। यह अधिक सुलभ डिज़ाइन बनाता है जो उपयोगकर्ता के फ़ॉन्ट प्राथमिकताओं का सम्मान करता है। CSS सापेक्ष इकाइयों के बारे में अधिक जानें आधिकारिक विनिर्देश में। ✅ दृश्य प्रयोग: इन मानों को संशोधित करके प्रभाव देखें: - जार अपारदर्शिता को 0.5 से 0.8 में बदलें – यह कांच के दिखावट को कैसे प्रभावित करता है? - मिट्टी का रंग #3a241d से #8B4513 में बदलें – इसका दृश्य प्रभाव क्या है? - मिट्टी का z-index 2 करें – परतों पर क्या प्रभाव पड़ता है? ### 🔄 शैक्षिक जाँच-पड़ताल CSS दृश्य डिज़ाइन की समझ: अपनी दृश्य CSS समझ की पुष्टि करें: - ✅ प्रतिशत-आधारित माप उत्तरदायी डिज़ाइन कैसे बनाते हैं? - ✅ अपारदर्शिता कांच के पारदर्शिता प्रभाव कैसे बनाती है? - ✅ z-index परतों में क्या भूमिका निभाता है? - ✅ बॉर्डर-रेडियस मान जार का आकार कैसे बनाते हैं? डिज़ाइन सिद्धांत: ध्यान दें कि हम सरल आकारों से कैसे जटिल दृश्य बना रहे हैं: 1. आयत → घुमावदार आयत → जार घटक 2. साधारण रंग → अपारदर्शिता → कांच प्रभाव 3. व्यक्तिगत तत्व → परतबद्ध संरचना → 3D उपस्थिति --- ## GitHub Copilot एजेंट चुनौती 🚀 एजेंट मोड का उपयोग करके निम्न चुनौती पूरी करें: विवरण: एक CSS एनिमेशन बनाएं जो टेरारियम पौधों को धीरे-धीरे एक तरफ से दूसरी तरफ हिलाए, प्राकृतिक हवा का प्रभाव अनुकरण करते हुए। इससे आपको CSS एनिमेशन, ट्रांसफॉर्म और कीफ्रेम्स का अभ्यास होगा साथ ही आपके टेरारियम की दृश्य अपील बढ़ेगी। प्रॉम्प्ट: CSS कीफ्रेम एनिमेशन जोड़ें जो टेरारियम में पौधों को धीरे-धीरे बाईं और दाईं ओर झुकाता है। प्रत्येक पौधे को थोड़ा-थोड़ा (2-3 डिग्री) घुमाने वाला स्विंगिंग एनिमेशन बनाएं जिसकी अवधि 3-4 सेकंड हो, और इसे .plant क्लास पर लागू करें। सुनिश्चित करें कि एनिमेशन असीमित रूप से लूप हो और उसमें प्राकृतिक गति के लिए easing फ़ंक्शन हो। एजेंट मोड के बारे में अधिक जानें। ## 🚀 चुनौती: ग्लास पर परावर्तन जोड़ना तैयार हैं अपने टेरारियम में यथार्थवादी ग्लास परावर्तन जोड़ने के लिए? यह तकनीक डिज़ाइन में गहराई और यथार्थवाद जोड़ती है। आप सूक्ष्म हाइलाइट बनाएंगे जो दिखाते हैं कि प्रकाश कैसे कांच की सतहों से परावर्तित होता है। यह तरीका पुनर्जागरण चित्रकार जन वैन ऐक की त्रि-आयामी कांच तस्वीरें बनाने के लिए प्रकाश और परावर्तन के उपयोग जैसा है। यह रहा आपका लक्ष्य: आपकी चुनौती: - बनाएं कांच के परावर्तन के लिए सूक्ष्म सफेद या हल्के रंग के अंडाकार आकार - स्थिति दें उन्हें जार के बाईं ओर रणनीतिक रूप से - लागू करें यथार्थवादी प्रकाश परावर्तन के लिए उपयुक्त अपारदर्शिता और ब्लर प्रभाव - उपयोग करें border-radius जैविक, बुलबुले जैसे आकार बनाने के लिए - प्रयोग करें ग्रेडिएंट या बॉक्स-शैडो अधिक यथार्थवाद के लिए ## पोस्ट-लेक्चर क्विज़ Post-lecture quiz ## अपने CSS ज्ञान का विस्तार करें CSS शुरुआत में जटिल लग सकता है, लेकिन इन मूल अवधारणाओं को समझना अधिक उन्नत तकनीकों के लिए मज़बूत आधार प्रदान करता है। आपके अगले CSS अध्ययन क्षेत्र: - Flexbox - तत्वों के संरेखण और वितरण को आसान बनाता है - CSS Grid - जटिल लेआउट बनाने के लिए शक्तिशाली उपकरण प्रदान करता है - CSS Variables - पुनरावृत्ति को कम करता है और रखरखाव को बेहतर बनाता है - Responsive design - सुनिश्चित करता है कि साइटें विभिन्न स्क्रीन आकारों पर अच्छी कार्य करें ### इंटरैक्टिव लर्निंग संसाधन इन रोचक, व्यावहारिक खेलों के साथ इन अवधारणाओं का अभ्यास करें: - 🐸 Flexbox Froggy - मजेदार चुनौतियों के माध्यम से Flexbox में माहिर बनें - 🌱 Grid Garden - CSS Grid को आभासी गाजर उगाकर सीखें - 🎯 CSS Battle - कोडिंग चुनौतियों के साथ अपनी CSS कौशल जांचें ### अतिरिक्त अध्ययन विस्तृत CSS मूल बातें जानने के लिए यह Microsoft Learn मॉड्यूल पूरा करें: Style your HTML app with CSS ### ⚡ अगले 5 मिनट में आप क्या कर सकते हैं - [ ] DevTools खोलें और Elements पैनल का उपयोग कर किसी भी वेबसाइट पर CSS शैलियों का निरीक्षण करें - [ ] एक साधारण CSS फ़ाइल बनाएं और इसे HTML पेज से लिंक करें - [ ] रंगों को बदलने का प्रयास करें: हेक्स, RGB, और नामांकित रंगों का उपयोग करके - [ ] बॉक्स मॉडल का अभ्यास करें padding और margin जोड़कर एक div में ### 🎯 इस घंटे में आप क्या पूरा कर सकते हैं - [ ] पोस्ट-लेसन क्विज़ पूरा करें और CSS मूल बातें समीक्षा करें - [ ] अपने HTML पेज को फॉन्ट, रंग, और रिक्ति के साथ स्टाइल करें - [ ] Flexbox या Grid का उपयोग करके सरल लेआउट बनाएं - [ ] CSS ट्रांजिशन के साथ स्मूथ इफेक्ट्स का प्रयोग करें - [ ] मीडिया क्वेरी के साथ उत्तरदायी डिज़ाइन का अभ्यास करें ### 📅 आपकी सप्ताह भर की CSS यात्रा - [ ] रचनात्मकता के साथ टेरारियम स्टाइलिंग असाइनमेंट पूरा करें - [ ] फोटो गैलरी लेआउट बना कर CSS Grid में माहिर बनें - [ ] CSS एनिमेशन सीखें जिससे आपके डिज़ाइन जीवंत हों - [ ] Sass या Less जैसे CSS प्रीप्रोसेसर एक्सप्लोर करें - [ ] डिज़ाइन सिद्धांतों का अध्ययन करें और उन्हें अपने CSS में लागू करें - [ ] ऑनलाइन मिलने वाले दिलचस्प डिजाइनों का विश्लेषण और पुनर्रचना करें ### 🌟 आपकी मासिक डिज़ाइन मास्टरी - [ ] पूर्ण उत्तरदायी वेबसाइट डिज़ाइन सिस्टम बनाएं - [ ] Tailwind जैसे CSS-in-JS या यूटिलिटी-फर्स्ट फ्रेमवर्क सीखें - [ ] CSS सुधारों के साथ ओपन सोर्स प्रोजेक्ट्स में योगदान करें - [ ] उन्नत CSS अवधारणाओं में महारत हासिल करें जैसे CSS कस्टम प्रॉपर्टीज़ और containment - [ ] मॉड्यूलर CSS के साथ पुन: प्रयोज्य कंपोनेंट लाइब्रेरी बनाएं - [ ] CSS सीख रहे अन्य लोगों का मेंटरशिप करें और डिज़ाइन ज्ञान साझा करें ## 🎯 आपकी CSS मास्टरी टाइमलाइन ### 🛠️ आपकी CSS टूलकिट सारांश इस पाठ को पूरा करने के बाद, आपके पास अब है: - कैस्केड समझ: कैसे शैलियां एक-दूसरे से विरासत में मिलती हैं और ओवरराइड होती हैं - सेलेक्टर मास्टरी: तत्वों, क्लासों, और IDs के साथ सटीक लक्षित करना - पोजीशनिंग कौशल: रणनीतिक तत्व स्थान और परतबद्धता - दृश्य डिज़ाइन: कांच प्रभाव, छायाएं, और पारदर्शिता बनाना - उत्तरदायी तकनीकें: प्रतिशत-आधारित लेआउट जो किसी भी स्क्रीन के अनुसार ढलते हैं - कोड संगठन: साफ-सुथरा, रखरखाव योग्य CSS संरचना - आधुनिक अभ्यास: सापेक्ष इकाइयों का उपयोग और सुलभ डिज़ाइन पैटर्न अगले कदम: आपका टेरारियम अब दोनों संरचना (HTML) और शैली (CSS) रखता है। अंतिम पाठ में हम JavaScript के साथ इंटरैक्टिविटी जोड़ेंगे! ## असाइनमेंट CSS Refactoring --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> अस्वीकरण: इस दस्तावेज़ का अनुवाद AI अनुवाद सेवा Co-op Translator का उपयोग करके किया गया है। जबकि हम सटीकता के लिए प्रयासरत हैं, कृपया ध्यान दें कि स्वचालित अनुवाद में त्रुटियाँ या अशुद्धियाँ हो सकती हैं। मूल दस्तावेज़ अपनी मूल भाषा में ही अधिकारिक स्रोत माना जाना चाहिए। महत्त्वपूर्ण जानकारी के लिए, पेशेवर मानव अनुवाद की सलाह दी जाती है। इस अनुवाद के उपयोग से उत्पन्न किसी भी गलतफहमी या व्याख्या के लिए हम उत्तरदायी नहीं हैं। <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Projekt Dio 1: Uvod u HTML
HTML, ili HyperText Markup Language, temelj je svake web stranice koju ste ikada posjetili. Zamislite HTML kao kostur koji daje strukturu web stranicama – on definira gdje sadržaj ide, kako je organiziran i što svaki dio predstavlja. Dok će CSS kasnije "ofarbati" vaš HTML bojama i rasporedima, a JavaScript će ga oživjeti interaktivnošću, HTML pruža osnovnu strukturu koja omogućuje sve ostalo. U ovoj lekciji kreirat ćete HTML strukturu za sučelje virtualnog terarija. Ovaj praktični projekt naučit će vas osnovnim HTML pojmovima dok izrađujete nešto vizualno zanimljivo. Naučit ćete kako organizirati sadržaj pomoću semantičkih elemenata, raditi sa slikama i stvoriti osnovu za interaktivnu web aplikaciju. Na kraju ove lekcije imat ćete funkcionalnu HTML stranicu koja prikazuje slike biljaka u organiziranim stupcima, spremnu za stiliziranje u sljedećoj lekciji. Ne brinite ako na početku izgleda jednostavno – upravo tako HTML treba izgledati prije nego što CSS doda vizualne detalje. ## Predpredavanje kviz Predpredavanje kviz ## Postavljanje Vašeg Projekta Prije nego što zaronimo u HTML kod, postavimo ispravno radno okruženje za vaš terarij projekt. Izrada organizirane strukture datoteka od početka ključna je navika koja će vam dobro služiti tijekom cijelog vašeg web razvoja. ### Zadatak: Kreirajte Strukturu Vašeg Projekta Napravit ćete posebnu mapu za vaš terarij projekt i dodati prvu HTML datoteku. Evo dva pristupa koja možete koristiti: Opcija 1: Korištenje Visual Studio Code 1. Otvorite Visual Studio Code 2. Kliknite "File" → "Open Folder" ili koristite Ctrl+K, Ctrl+O (Windows/Linux) ili Cmd+K, Cmd+O (Mac) 3. Kreirajte novu mapu nazvanu terrarium i odaberite je 4. U Explorer panelu kliknite na ikonu "New File" 5. Nazovite svoju datoteku index.html Opcija 2: Korištenje naredbi u Terminalu Ovo su funkcije ovih naredbi: - Kreira novu mapu nazvanu terrarium za vaš projekt - Ulazi u mapu terrarium - Stvara praznu datoteku index.html - Otvara datoteku u Visual Studio Code za uređivanje ## Razumijevanje Strukture HTML Dokumenta Svaki HTML dokument slijedi specifičnu strukturu koju preglednici trebaju razumjeti kako bi ispravno prikazali stranicu. Zamislite ovu strukturu kao formalno pismo – ima obavezne elemente redoslijedom koji pomažu primatelju (u ovom slučaju pregledniku) da pravilno obradi sadržaj. Započnimo dodavanjem osnovnog temelja koji svaki HTML dokument treba. ### DOCTYPE Izjava i Korijenski Element Prve dvije linije bilo kojeg HTML fajla služe kao "uvod" dokumenta prema pregledniku: Što ovaj kod radi: - Deklarira tip dokumenta kao HTML5 koristeći <!DOCTYPE html> - Kreira korijenski <html> element koji će sadržavati sav sadržaj stranice - Uspostavlja moderne web standarde za ispravan prikaz u preglednicima - Osigurava dosljedan prikaz na različitim preglednicima i uređajima ### 🔄 Pedagoški Pregled Pauzirajte i Razmislite: Prije nego što nastavite, provjerite razumijete li: - ✅ Zašto svaki HTML dokument treba DOCTYPE deklaraciju - ✅ Što sadrži korijenski <html> element - ✅ Kako ova struktura pomaže preglednicima da pravilno prikazuju stranice Brzi samoprovjera: Možete li vlastitim riječima objasniti što znači "standardski usklađeni prikaz"? ## Dodavanje Bitnih Metapodataka Dokumenta Sekcija <head> HTML dokumenta sadrži ključne informacije koje preglednici i tražilice trebaju, ali koje posjetitelji ne vide direktno na stranici. Zamislite je kao "iza kulisa" informacije koje pomažu vašoj stranici da ispravno radi i da se pravilno prikazuje na raznim uređajima i platformama. Ovi metapodaci kažu preglednicima kako prikazati stranicu, koju kodnu stranicu koristiti i kako se nositi s različitim veličinama ekrana – sve što je ključno za izradu profesionalnih i pristupačnih web stranica. ### Zadatak: Dodajte Dokument Glavu Umetnite ovaj <head> odjeljak između vaših otvarajućih i zatvarajućih <html> tagova: Razlaganje što svaki element radi: - Postavlja naslov stranice koji se prikazuje u karticama preglednika i rezultatima pretraživanja - Specifikira UTF-8 kodiranje znakova za ispravan prikaz teksta širom svijeta - Osigurava kompatibilnost s modernim verzijama Internet Explorera - Konfigurira responzivni dizajn postavljanjem viewporta da prati širinu uređaja - Kontrolira početni nivo zumiranja kako bi se sadržaj prikazao u prirodnoj veličini ## Izgradnja Tijela Dokumenta Element <body> sadrži sav vidljivi sadržaj vaše web stranice – sve što korisnici vide i s čim mogu komunicirati. Dok je <head> dijelu davao upute pregledniku, sekcija <body> sadrži stvarni sadržaj: tekst, slike, gumbe i druge elemente koji stvaraju vaše korisničko sučelje. Dodajmo tijelo stranice i razumijemo kako HTML tagovi rade zajedno da bi stvorili smisleni sadržaj. ### Razumijevanje Strukture HTML Tagova HTML koristi uparene tagove za definiranje elemenata. Većina tagova ima otvarajući tag poput <p> i zatvarajući tag kao </p>, s sadržajem između: <p>Zdravo, svijete!</p>. Time se stvara paragraf koji sadrži tekst „Zdravo, svijete!“. ### Zadatak: Dodajte Element Body Ažurirajte vašu HTML datoteku da uključite <body> element: Evo što ova potpuna struktura pruža: - Uspostavlja osnovni HTML5 okvir dokumenta - Uključuje bitne metapodatke za ispravan prikaz u preglednicima - Kreira prazno tijelo spremno za vaš vidljivi sadržaj - Prati najbolje prakse modernog web razvoja Sada ste spremni dodati vidljive elemente svog terarija. Koristit ćemo <div> elemente kao kontejnere za organiziranje različitih dijelova sadržaja i <img> elemente za prikaz slika biljaka. ### Rad sa Slikama i Kontejnerima za Raspored Slike su posebne u HTML-u jer koriste "samozatvarajuće" tagove. Za razliku od elemenata poput <p></p> koji obavijaju sadržaj, <img> tag sadrži sve potrebne informacije unutar tag-a pomoću atributa kao što su src za putanju slike i alt za pristupačnost. Prije nego što dodate slike u HTML, trebate organizirati vaše projektne datoteke pravilno stvaranjem mape za slike i dodavanjem grafika biljaka. Prvo, postavite slike: 1. Kreirajte mapu nazvanu images unutar vaše terarij projektne mape 2. Preuzmite slike biljaka iz solution folder (ukupno 14 slika biljaka) 3. Kopirajte sve slike biljaka u vašu novu images mapu ### Zadatak: Kreirajte Raspored Prikaza Biljaka Sada dodajte slikovne prikaze biljaka organiziranih u dva stupca između vaših <body></body> tagova: Korak po korak, evo što se događa u ovom kodu: - Kreira glavni spremnik stranice s id="page" koji drži sav sadržaj - Uspostavlja dva stupčasta spremnika: left-container i right-container - Organizira 7 biljaka u lijevom stupcu i 7 biljaka u desnom stupcu - Obavija svaku sliku biljke u plant-holder <div> za individualno pozicioniranje - Primjenjuje dosljedne nazive klasa za CSS stiliziranje u sljedećoj lekciji - Dodjeljuje jedinstvene ID-e svakoj slici biljke za JavaScript interakciju kasnije - Uključuje ispravne putanje do mape sa slikama ### 🔄 Pedagoški Pregled Razumijevanje Strukture: Odvojite trenutak za pregled vaše HTML strukture: - ✅ Možete li identificirati glavne kontejnere u vašem rasporedu? - ✅ Razumijete li zašto svaka slika ima jedinstveni ID? - ✅ Kako biste opisali svrhu plant-holder divova? Vizualna Inspekcija: Otvorite vašu HTML datoteku u pregledniku. Trebali biste vidjeti: - Osnovnu listu slika biljaka - Slike organizirane u dva stupca - Jednostavan, nestiliziran raspored Zapamtite: Ovaj jednostavan izgled je upravo ono što HTML treba izgledati prije CSS stiliziranja! S ovim dodanim markupom, biljke će se pojaviti na ekranu, iako još ne izgledaju dotjerano – za to služi CSS u sljedećoj lekciji! Za sada imate čvrst HTML temelj koji ispravno organizira vaš sadržaj i prati najbolje prakse pristupačnosti. ## Korištenje Semantičkog HTML-a za Pristupačnost Semantički HTML znači odabir HTML elemenata na temelju njihovog značenja i svrhe, ne samo na temelju njihovog izgleda. Kada koristite semantički markup, komunicirate strukturu i značenje vašeg sadržaja preglednicima, tražilicama i asistivnim tehnologijama poput čitača zaslona. Ovaj pristup čini vaše web stranice pristupačnijima korisnicima s invaliditetom i pomaže tražilicama da bolje razumiju vaš sadržaj. To je temeljno načelo modernog web razvoja koje stvara bolje doživljaje za sve. ### Dodavanje Semantičkog Naslova Stranice Dodajmo ispravan naslov vašoj stranici terarija. Umetnite ovaj red odmah nakon otvarajućeg <body> taga: Zašto je semantički markup važan: - Pomaže čitačima zaslona navigirati i razumjeti strukturu stranice - Poboljšava SEO (optimizaciju za tražilice) jasnoćom hijerarhije sadržaja - Unapređuje pristupačnost korisnicima s oštećenjima vida ili kognitivnim razlikama - Stvara bolje korisničke doživljaje na svim uređajima i platformama - Prati web standarde i najbolje prakse za profesionalni razvoj Primjeri semantičkih vs. ne-semantčkih izbora: ## Kreiranje Kontejnera Terarija Sada dodajmo HTML strukturu za sam terarij – stakleni spremnik u koji će biljke na kraju biti postavljene. Ovaj odsjek pokazuje važan koncept: HTML pruža strukturu, ali bez CSS stiliziranja elementi još uvijek neće biti vidljivi. Markup terarija koristi opisne nazive klasa koje će CSS stiliziranju u sljedećoj lekciji učiniti intuitivnim i održivim. ### Zadatak: Dodajte Strukturu Terarija Umetnite ovaj markup iznad zadnjeg </div> taga (prije zatvarajućeg taga spremnika stranice): Razumijevanje ove terarijske strukture: - Kreira glavni terarijski spremnik s jedinstvenim ID-em za stiliziranje - Definira odvojene elemente za svaki vizualni dio (gornji dio, zidovi, zemlja, donji dio) - Uključuje ugniježđene elemente za efekte odraza na staklu (sjajni elementi) - Koristi opisne nazive klasa koje jasno označavaju svrhu svakog elementa - Priprema strukturu za CSS stiliziranje koje će stvoriti izgled staklenog terarija ### 🔄 Pedagoška provjera Savladavanje HTML strukture: Prije nego krenete dalje, osigurajte da možete: - ✅ Objasniti razliku između HTML strukture i vizualnog izgleda - ✅ Prepoznati semantičke i nesemantičke HTML elemente - ✅ Opišite kako ispravna oznaka koristi pristupačnosti - ✅ Prepoznati kompletnu strukturu stabla dokumenta Testiranje vašeg razumijevanja: Probajte otvoriti vaš HTML fajl u pregledniku s onemogućenim Javaskriptom i uklonjenim CSS-om. Ovo vam pokazuje čistu semantičku strukturu koju ste napravili! --- ## Izazov za GitHub Copilot Agenta Koristite Agent način rada da dovršite sljedeći izazov: Opis: Izradite semantičku HTML strukturu za odjeljak vodiča za njegu biljaka koju biste mogli dodati projektu terarija. Zadatak: Izradite semantički HTML odjeljak koji uključuje glavni naslov "Vodič za njegu biljaka", tri pododjeljka s naslovima "Zalijevanje", "Zahtjevi za svjetlom" i "Njega tla", svaki sa stilom paragrafa koji sadrži informacije o njezi biljaka. Upotrijebite ispravne semantičke HTML oznake poput <section>, <h2>, <h3>, i <p> za odgovarajuću strukturu sadržaja. Više o agent načinu saznajte ovdje. ## Izazov istraživanja povijesti HTML-a Učenje o evoluciji weba HTML se značajno razvio otkad je Tim Berners-Lee 1990. godine na CERN-u stvorio prvi web preglednik. Neki stariji tagovi poput <marquee> sada su zastarjeli jer ne funkcioniraju dobro s modernim standardima pristupačnosti i načelima responzivnog dizajna. Isprobajte ovaj eksperiment: 1. Privremeno omotajte vaš <h1> naslov u <marquee> tag: <marquee><h1>Moj terarij</h1></marquee> 2. Otvorite svoju stranicu u pregledniku i promatrajte efekt pomicanja 3. Razmislite zašto je ovaj tag ukinut (nagovještaj: razmislite o korisničkom iskustvu i pristupačnosti) 4. Uklonite <marquee> tag i vratite se na semantički markup Pitanja za razmišljanje: - Kako bi pomični naslov mogao utjecati na korisnike s oštećenjima vida ili osjetljivošću na pokret? - Koje suvremene CSS tehnike mogu postići slične vizualne efekte na pristupačniji način? - Zašto je važno koristiti trenutne web standarde umjesto zastarjelih elemenata? Istražite više o zastarjelim i ukinutim HTML elementima da razumijete kako se web standardi razvijaju za poboljšanje korisničkog iskustva. ## Kviz nakon predavanja Kviz nakon predavanja ## Pregled i samostalno učenje Produbite svoje HTML znanje HTML je temelj weba više od 30 godina, razvijajući se od jednostavnog jezika označavanja dokumenata do sofisticirane platforme za izgradnju interaktivnih aplikacija. Razumijevanje ove evolucije pomaže vam cijeniti moderne web standarde i donositi bolje razvojne odluke. Preporučeni putovi učenja: 1. Povijest i razvoj HTML-a - Istražite vremenski slijed od HTML 1.0 do HTML5 - Saznajte zašto su određeni tagovi ukinuti (pristupačnost, prilagođenost mobilnim uređajima, održivost) - Istražite nove HTML značajke i prijedloge 2. Dubinsko razumijevanje semantičkog HTML-a - Proučite cjeloviti popis semantičkih elemenata HTML5 - Vježbajte prepoznavanje kada koristiti <article>, <section>, <aside>, i <main> - Naučite o ARIA atributima za poboljšanu pristupačnost 3. Moderni web razvoj - Istražite izgradnju responzivnih web stranica na Microsoft Learn - Razumite kako HTML integrira s CSS-om i Javaskriptom - Naučite o web performansama i najboljim SEO praksama Pitanja za razmišljanje: - Koje ste zastarjele HTML tagove otkrili i zašto su uklonjeni? - Koje se nove HTML značajke predlažu za buduće verzije? - Kako semantički HTML pridonosi pristupačnosti weba i SEO-u? ### ⚡ Što možete učiniti u sljedećih 5 minuta - [ ] Otvorite DevTools (F12) i pregledajte HTML strukturu vaše omiljene web stranice - [ ] Izradite jednostavnu HTML datoteku s osnovnim tagovima: <h1>, <p>, i <img> - [ ] Validirajte svoj HTML koristeći W3C HTML Validator online - [ ] Pokušajte dodati komentar u svoj HTML pomoću <!-- komentar --> ### 🎯 Što možete postići u ovom satu - [ ] Dovršite kviz nakon lekcije i pregledajte koncepte semantičkog HTML-a - [ ] Izradite jednostavnu web stranicu o sebi koristeći ispravnu HTML strukturu - [ ] Eksperimentirajte s različitim razinama naslova i oznakama za oblikovanje teksta - [ ] Dodajte slike i poveznice za vježbanje multimedijske integracije - [ ] Istražite HTML5 značajke koje još niste isprobali ### 📅 Vaše tjedno učenje HTML-a - [ ] Dovršite zadatak projekta terarija sa semantičkim markupom - [ ] Izradite pristupačnu web stranicu koristeći ARIA oznake i uloge - [ ] Vježbajte izradu obrazaca s različitim vrstama unosa - [ ] Istražite HTML5 API-je poput localStorage ili geolocation - [ ] Proučite responzivne HTML obrasce i dizajn usmjeren na mobilne uređaje - [ ] Pregledajte HTML kod drugih developera za najbolje prakse ### 🌟 Vaš mjesečni temelj weba - [ ] Izradite portfelj web stranicu koja prikazuje vaše HTML vještine - [ ] Naučite HTML templating s frameworkom poput Handlebars - [ ] Sudjelujte u open source projektima poboljšavajući HTML dokumentaciju - [ ] Savladajte napredne HTML koncepte poput prilagođenih elemenata - [ ] Integrirajte HTML s CSS frameworkom i Javaskript bibliotekama - [ ] Mentorirajte druge koji uče osnove HTML-a ## 🎯 Vaš vremenski plan za savladavanje HTML-a ### 🛠️ Sažetak vašeg HTML alata Nakon završetka ove lekcije, sada imate: - Strukturu dokumenta: Potpun temelj HTML5 s ispravnim DOCTYPE-om - Semantički markup: Smisleni tagovi koji poboljšavaju pristupačnost i SEO - Integraciju slika: Ispravnu organizaciju datoteka i praksu alt teksta - Kontejnere za izgled: Stratešku upotrebu divova s opisnim nazivima klasa - Svijest o pristupačnosti: Razumijevanje navigacije pomoću čitača zaslona - Moderne standarde: Trenutne HTML5 prakse i znanje o zastarjelim tagovima - Temelj za projekt: Čvrst temelj za CSS stiliziranje i JavaScript interaktivnost Sljedeći koraci: Vaša HTML struktura je spremna za CSS stiliziranje! Semantički temelj koji ste izgradili olakšat će razumijevanje sljedeće lekcije. ## Zadatak Vježbajte HTML: Izradite maketu bloga --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Odricanje od odgovornosti: Ovaj je dokument preveden pomoću AI usluge za prevođenje Co-op Translator. Iako težimo točnosti, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati službenim i autoritativnim izvorom. Za ključne informacije preporučuje se stručni ljudski prijevod. Ne snosimo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarij Projekt Dio 2: Uvod u CSS
Sjećaš li se kako je tvoj HTML terrarij izgledao prilično osnovno? CSS je mjesto gdje tu običnu strukturu pretvaramo u nešto vizualno privlačno. Ako je HTML kao gradnja kostura kuće, onda je CSS sve ono što kući daje osjećaj doma - boje za zidove, raspored namještaja, osvjetljenje i kako se sobe međusobno povezuju. Zamislite kako je Dvorac Versailles započeo kao jednostavna lovačka kuća, ali pažnja prema dekoraciji i rasporedu pretvorila ga je u jednu od najspektakularnijih građevina na svijetu. Danas ćemo tvoj terrarij pretvoriti iz funkcionalnog u dotjeran. Naučit ćeš kako precizno pozicionirati elemente, kako napraviti layout koji se prilagođava različitim veličinama ekrana i stvoriti vizualni dojam koji čini web-stranice zanimljivima. Na kraju ovog sata vidjet ćeš kako strateško stiliziranje s CSS-om može dramatično poboljšati tvoj projekt. Dodajmo stila tvom terrariju. ## Predpredavanje kviz Predpredavanje kviz ## Uvod u CSS CSS se često smatra samo "uljepšavanjem stvari", ali ima puno širu svrhu. CSS je kao režiser filma - kontroliraš ne samo kako sve izgleda, već i kako se kreće, reagira na interakcije i prilagođava različitim situacijama. Moderni CSS je iznimno sposoban. Možeš napisati kod koji automatski prilagođava layout za telefone, tablete i stolna računala. Možeš stvoriti glatke animacije koje usmjeravaju pažnju korisnika kamo je potrebno. Rezultati mogu biti vrlo impresivni kada sve funkcionira zajedno. Ovo ćemo postići u ovom satu: - Stvoriti kompletan vizualni dizajn tvog terrarija koristeći moderne CSS tehnike - Istražiti osnovne koncepte poput kaskade, nasljeđivanja i CSS selektora - Implementirati responzivno pozicioniranje i strategije izrade layouta - Izgraditi terrarij kontejner koristeći CSS oblike i stilizaciju ### Preduvjet Trebalo bi imati gotovu HTML strukturu za svoj terrarij iz prethodnog sata, spremnu za stiliziranje. ### Postavljanje CSS datoteke Prije nego što počnemo stilizirati, moramo povezati CSS s našim HTML-om. Ta veza govori pregledniku gdje pronaći upute za stilizaciju našeg terrarija. U svojoj mapi terrarija, kreiraj novu datoteku pod nazivom style.css, zatim je poveži u dijelu <head> tvog HTML dokumenta: Ovo što kod radi: - Stvara vezu između tvoje HTML i CSS datoteke - Kaže pregledniku da učita i primijeni stilove iz style.css - Koristi atribut rel="stylesheet" koji specificira da je to CSS datoteka - Referencira putanju do datoteke preko href="./style.css" ## Razumijevanje CSS kaskade Jesi li se ikada pitao zašto se CSS zove "Cascading" Style Sheets? Stilovi se slijevaju poput vodopada, a ponekad i međusobno sukobljavaju. Razmotri kako vojna zapovjedna struktura funkcionira - generalov naredba može reći "svi vojnici nose zelenu", ali specifična naredba tvojoj jedinici može reći "nosite svečane plave za ceremoniju". Specifičnija uputa ima prednost. CSS slijedi sličnu logiku i razumijevanje ove hijerarhije čini otklanjanje grešaka mnogo jednostavnijim. ### Eksperimentiranje s prioritetom kaskade Pogledajmo kaskadu u akciji stvaranjem sukoba stilova. Prvo dodaj inline stil na svoj <h1> tag: Što ovaj kod radi: - Primjenjuje crvenu boju direktno na <h1> element koristeći inline stilizaciju - Koristi atribut style za ugrađivanje CSS-a direktno u HTML - Stvara stil s najvišim prioritetom za taj specifični element Zatim dodaj ovo pravilo u svoju datoteku style.css: Ovdje smo: - Definirali CSS pravilo koje cilja sve <h1> elemente - Postavili boju teksta na plavu koristeći vanjsku stilsku datoteku - Stvorili pravilo nižeg prioriteta u odnosu na inline stilove ✅ Provjera znanja: Koja boja se prikazuje u tvojoj web-aplikaciji? Zašto ta boja pobjeđuje? Možeš li smisliti situacije u kojima bi želio nadjačati stilove? ## CSS nasljeđivanje u praksi CSS nasljeđivanje radi poput genetike - elementi nasljeđuju određena svojstva od roditeljskih elemenata. Ako postaviš font-family na elementu body, sav tekst unutar automatski koristi isti font. Slično kao što je prepoznatljiv oblik čeljusti Habsburške obitelji bio prisutan kroz generacije, a nije bio specificiran za svakog pojedinačno. Međutim, nije sve nasljedno. Stilovi teksta poput fontova i boja se nasljeđuju, no svojstva layouta poput margina i obruba se ne nasljeđuju. Kao što djeca mogu naslijediti fizičke osobine, ali ne i modne izbore roditelja. ### Promatranje nasljeđivanja fonta Pogledajmo nasljeđivanje u praksi postavljanjem font-family na <body> element: Što se ovdje događa: - Postavlja font-family za cijelu stranicu ciljajući <body> element - Koristi font stack s rezervnim mogućnostima radi bolje kompatibilnosti s preglednicima - Primjenjuje moderne sistemske fontove koji lijepo izgledaju na različitim operativnim sustavima - Osigurava da svi child elementi nasljede taj font osim ako nije eksplicitno drugačije postavljeno Otvori alate za razvoj preglednika (F12), idi na tab Elements i pregledaj svoj <h1> element. Vidjet ćeš da nasljeđuje font-family od body: ✅ Vrijeme za eksperiment: Pokušaj postaviti druga nasljediva svojstva na <body> kao color, line-height ili text-align. Što se događa s naslovom i ostalim elementima? ### 🔄 Pedagoški pregled Razumijevanje osnova CSS-a: Prije prelaska na selektore, osiguraj da možeš: - ✅ Objasniti razliku između kaskade i nasljeđivanja - ✅ Predvidjeti koji stil će pobijediti u konfliktu specifičnosti - ✅ Prepoznati koja svojstva se nasljeđuju od roditeljskih elemenata - ✅ Ispravno povezati CSS datoteke s HTML-om Brzi test: Ako imaš ove stilove, koje će boje biti <h1> unutar <div class="special">? Odgovor: Crvena (selektor elementa direktno cilja h1) ## Ovladavanje CSS selektorima CSS selektori su tvoj način da ciljano stiliziraš određene elemente. Oni funkcioniraju kao davanje preciznih uputa - umjesto da kažeš "kuća", kažeš "plava kuća s crvenim vratima u Maple Streetu". CSS nudi različite načine da budeš specifičan, a odabir pravog selektora je poput izbora pravog alata za zadatak. Ponekad trebaš stilizirati svaka vrata u susjedstvu, a ponekad samo jedna specifična vrata. ### Selektori elemenata (Tagovi) Selektori elemenata ciljaju HTML elemente po imenu taga. Savršeni su za postavljanje osnovnih stilova koji se primjenjuju široko preko stranice: Što ovi stilovi rade: - Postavlja dosljednu tipografiju preko cijele stranice pomoću body selektora - Uklanja zadane margine i padding preglednika radi bolje kontrole - Stilizira sve naslove bojom, poravnanjem i razmakom - Koristi rem jedinice za skalabilne i pristupačne veličine fonta Iako element selektori dobro funkcioniraju za opće stiliziranje, trebat ćeš specifičnije selektore za stiliziranje pojedinačnih komponenti poput biljaka u tvom terrariju. ### ID selektori za jedinstvene elemente ID selektori koriste simbol # i ciljaju elemente s određenim id atributom. Budući da id-ovi moraju biti jedinstveni na stranici, savršeni su za stiliziranje pojedinačnih, posebnih elemenata poput lijevog i desnog kontejnera s biljkama. Napravimo stilizaciju za bočne kontejnere terrarija gdje će biljke stajati: Što ovaj kod radi: - Pozicionira kontejnere na lijevi i desni rub ekrana koristeći absolute pozicioniranje - Koristi vh (visina viewporta) jedinice za responzivnu visinu koja se prilagođava veličini ekrana - Primjenjuje box-sizing: border-box tako da padding ulazi u ukupnu širinu - Uklanja nepotrebne px jedinice za vrijednosti nula radi čišćeg koda - Postavlja suptilnu boju pozadine koja je lakša za oči od oštre sive ✅ Izazov za kvalitetu koda: Primijeti kako ovaj CSS krši DRY (Don't Repeat Yourself) princip. Možeš li ga refaktorirati koristeći oba, ID i klasu? Poboljšani pristup: ### Klase za ponovnu upotrebu stilova Klase koriste simbol . i idealne su kada želiš primijeniti iste stilove na više elemenata. Za razliku od ID-ova, klase se mogu ponavljati po cijelom HTML-u, što ih čini idealnim za dosljedne stilizacijske obrasce. U našem terrariju, svaka biljka treba sličnu stilizaciju, ali i individualno pozicioniranje. Koristit ćemo kombinaciju klasa za zajedničke stilove i ID za jedinstveno pozicioniranje. Ovo je HTML struktura za svaku biljku: Objašnjenje ključnih elemenata: - Koristi class="plant-holder" za dosljedno stiliziranje kontejnera svih biljaka - Primjenjuje class="plant" za zajedničku stilizaciju slike i ponašanje - Sadrži jedinstveni id="plant1" za individualno pozicioniranje i JavaScript interakciju - Nudi opisni alt tekst radi pristupačnosti čitačima ekrana Sada dodaj ove stilove u svoju datoteku style.css: Što ovi stilovi rade: - Stvara relativno pozicioniranje za plant holder koji uspostavlja kontekst pozicije - Postavlja visinu svakog plant holdera na 13% da bi sve biljke stale vertikalno bez skrolanja - Pomjera holder-e malo ulijevo za bolji centar biljaka u njihovim kontejnerima - Dozvoljava biljkama da se skaliraju responzivno uz svojstva max-width i max-height - Koristi z-index da biljke budu slojene iznad ostalih elemenata u terrariju - Dodaje suptilni efekt prilikom lebdenja pomoću CSS prijelaza za bolje korisničko iskustvo ✅ Kritičko razmišljanje: Zašto nam trebaju oba selektora .plant-holder i .plant? Što bi se dogodilo da koristimo samo jedan? ## Razumijevanje CSS pozicioniranja CSS pozicioniranje je kao režija na sceni - ti upravljaš gdje svaki glumac stoji i kako se kreće po pozornici. Neki glumci slijede standardni raspored, dok drugi trebaju specifično pozicioniranje radi dramatičnog efekta. Kad shvatiš pozicioniranje, mnogi izazovi kod layouta postaju upravljivi. Trebaš li navigacijsku traku koja ostaje na vrhu dok korisnici skrolaju? Pozicioniranje to omogućuje. Želiš li tooltip koji se pojavljuje na određenom mjestu? To je također pozicioniranje. ### Pet vrijednosti pozicije ### Pozicioniranje u našem terrariju Naš terrarij koristi stratešku kombinaciju tipova pozicioniranja da stvori željeni layout: Razumijevanje strategije pozicioniranja: - Apsolutni kontejneri su izuzeti iz uobičajenog tijeka dokumenta i pričvršćeni su na rubove ekrana - Relativni plant holderi stvaraju kontekst pozicioniranja, a pritom ostaju u tijeku dokumenta - Apsolutne biljke mogu biti precizno pozicionirane unutar relativnih kontejnera - Ova kombinacija omogućava biljkama da se slažu vertikalno, a istovremeno se pojedinačno pozicioniraju ✅ Vrijeme za eksperiment: Isprobaj promjenu vrijednosti pozicije i promatraj rezultate: - Što se dogodi ako promijeniš .container iz absolute u relative? - Kako se raspored mijenja ako .plant-holder koristi absolute umjesto relative? - Što se događa kada .plant promijenite u relative pozicioniranje? ### 🔄 Pedagoška provjera Vladanje CSS pozicioniranjem: Pauzirajte i provjerite svoje razumijevanje: - ✅ Možete li objasniti zašto biljke trebaju apsolutno pozicioniranje za povuci-i-pusti funkcionalnost? - ✅ Razumijete li kako relativni spremnici stvaraju kontekst pozicioniranja? - ✅ Zašto bočni spremnici koriste apsolutno pozicioniranje? - ✅ Što bi se dogodilo ako u potpunosti uklonite deklaracije pozicija? Povezanost s realnim svijetom: Razmislite kako CSS pozicioniranje odražava stvarni raspored: - Static: Knjige na polici (prirodni redoslijed) - Relative: Pomicanje knjige malo, ali zadržavanje mjesta - Absolute: Postavljanje knjižne oznake na točan broj stranice - Fixed: Ljepljiva bilješka koja ostaje vidljiva dok okrećete stranice ## Izgradnja terarija s CSS-om Sada ćemo izgraditi staklenku koristeći samo CSS - bez slika ili grafičkog softvera. Stvaranje realističnog izgleda stakla, sjena i dubine pomoću pozicioniranja i prozirnosti demonstrira vizualne sposobnosti CSS-a. Ova tehnika odražava način na koji su arhitekti Bauhaus pokreta koristili jednostavne geometrijske oblike za stvaranje složenih, lijepih struktura. Kad razumijete ove principe, prepoznat ćete CSS tehnike iza mnogih web dizajna. ### Izrada dijelova staklenke Izgradimo terarij korak po korak. Svaki dio koristi apsolutno pozicioniranje i veličine izražene u postocima za responzivan dizajn: Razumijevanje konstrukcije terarija: - Koristi dimenzije izražene u postocima za responzivno skaliranje na svim veličinama ekrana - Pozicionira elemente apsolutno kako bi ih precizno složila i poravnala - Primjenjuje različite vrijednosti prozirnosti za stvaranje efekta staklene prozirnosti - Koristi z-index slojevito kako bi biljke bile unutar staklenke - Dodaje suptilne sjene i fino zaobljene rubove za realističniji izgled ### Responzivni dizajn s postocima Primijetite kako sve dimenzije koriste postotke umjesto fiksnih piksela: Zašto je to važno: - Osigurava proporcionalno skaliranje terarija na bilo kojoj veličini ekrana - Održava vizualne odnose između dijelova staklenke - Pruža dosljedno iskustvo od mobilnih telefona do velikih desktop monitora - Omogućuje dizajnu prilagodbu bez narušavanja vizualnog rasporeda ### CSS jedinice u praksi Koristimo rem jedinice za border-radius koje skaliraju u odnosu na veličinu osnovnog fonta. To stvara dostupnije dizajne koje poštuju korisničke postavke fonta. Saznajte više o relativnim CSS jedinicama u službenoj specifikaciji. ✅ Vizualno eksperimentiranje: Pokušajte mijenjati ove vrijednosti i promatrajte učinke: - Promijenite prozirnost staklenke s 0.5 na 0.8 – kako to utječe na izgled stakla? - Prilagodite boju tla s #3a241d na #8B4513 – koji je vizualni efekt? - Izmijenite z-index tla na 2 – što se događa sa slojevima? ### 🔄 Pedagoška provjera Razumijevanje vizualnog CSS dizajna: Potvrdite svoje razumijevanje vizualnog CSS-a: - ✅ Kako dimenzije u postocima stvaraju responzivni dizajn? - ✅ Zašto prozirnost stvara efekt prozirnog stakla? - ✅ Koju ulogu ima z-index u slojevitosti elemenata? - ✅ Kako vrijednosti border-radius oblikuju staklenku? Dizajnerski princip: Primijetite kako gradimo složene vizuale iz jednostavnih oblika: 1. Pravokutnici → Zaobljeni pravokutnici → Dijelovi staklenke 2. Jednobojne boje → Prozirnost → Efekt stakla 3. Pojedinačni elementi → Slojevita kompozicija → 3D izgled --- ## Izazov GitHub Copilot Agenta 🚀 Iskoristite Agent način za dovršetak sljedećeg izazova: Opis: Kreirajte CSS animaciju koja lagano njihuje biljke u terariju kao da ih povjetarac nježno pomiče. Ovo će vam pomoći da uvježbate CSS animacije, transformacije i ključne okvire dok poboljšavate vizualni dojam svog terarija. Zadatak: Dodajte CSS keyframe animacije koje stvaraju nježno njihanje biljaka lijevo i desno. Kreirajte animaciju njihanja koja svaku biljku zakreće blago (2-3 stupnja) lijevo i desno s trajanjem od 3 do 4 sekunde, i primijenite je na .plant klasu. Pobrinite se da animacija neprestano traje i ima funkciju ublažavanja za prirodan pokret. Saznajte više o agent načinu ovdje. ## 🚀 Izazov: Dodavanje odraza stakla Spremni za povećanje realizma terarija s realističnim odrazima stakla? Ova tehnika će dodati dubinu i vjerodostojnost dizajnu. Kreirat ćete suptilne naglaske koji simuliraju kako se svjetlo reflektira na staklenim površinama. Ovaj pristup sliči načinu na koji su renesansni slikari poput Jana van Eycka koristili svjetlo i odraze da bi naslikano staklo izgledalo trodimenzionalno. Evo što želite postići: Vaš zadatak: - Napravite suptilne bijele ili svijetle ovalne oblike za odraze stakla - Pozicionirajte ih strateški na lijevoj strani staklenke - Primijenite odgovarajuću prozirnost i zamućenje za realistični odraz svjetla - Koristite border-radius za stvaranje organskih, mjehurićastih oblika - Igrajte se s gradijentima ili box-shadow efektima za dodatni realizam ## Kviz nakon predavanja Kviz nakon predavanja ## Proširite svoje CSS znanje CSS može djelovati složeno na početku, ali razumijevanje ovih osnovnih koncepata pruža čvrsti temelj za naprednije tehnike. Vaši sljedeći CSS smjerovi: - Flexbox - pojednostavljuje poravnanje i raspodjelu elemenata - CSS Grid - nudi moćne alate za izradu složenih izgleda - CSS varijable - smanjuju ponavljanje i olakšavaju održavanje koda - Responzivni dizajn - osigurava dobar rad stranica na različitim veličinama ekrana ### Interaktivni resursi za učenje Vježbajte ove koncepte kroz zanimljive, praktične igre: - 🐸 Flexbox Froggy - Ovladavanje Flexboxom kroz zabavne izazove - 🌱 Grid Garden - Učite CSS Grid uz uzgoj virtualne mrkve - 🎯 CSS Battle - Testirajte CSS vještine kroz kodne izazove ### Dodatno učenje Za sveobuhvatne osnove CSS-a, završite ovaj modul na Microsoft Learnu: Style your HTML app with CSS ### ⚡ Što možete učiniti u sljedećih 5 minuta - [ ] Otvorite DevTools i pogledajte CSS stilove na bilo kojoj stranici koristeći Elements panel - [ ] Napravite jednostavnu CSS datoteku i povežite je s HTML stranicom - [ ] Pokušajte mijenjati boje koristeći različite načine: hex, RGB i imenovane boje - [ ] Vježbajte box model dodavanjem paddinga i margine na div ### 🎯 Što možete postići u ovom satu - [ ] Završiti kviz nakon lekcije i obnoviti osnove CSS-a - [ ] Stilizirati HTML stranicu fontovima, bojama i razmakom - [ ] Kreirati jednostavan raspored koristeći flexbox ili grid - [ ] Eksperimentirati s CSS prijelazima za glatke efekte - [ ] Vježbati responzivni dizajn s media queryjima ### 📅 Vaša tjedna CSS avantura - [ ] Završiti zadatak stiliziranja terarija s kreativnim pristupom - [ ] Ovladati CSS Gridom izradom galerije fotografija - [ ] Učiti CSS animacije za oživljavanje dizajna - [ ] Istražiti CSS preprocessore poput Sassa ili Lessa - [ ] Proučiti dizajnerske principe i primijeniti ih u CSS-u - [ ] Analizirati i reproducirati zanimljive dizajne s interneta ### 🌟 Vaše mjesečno usavršavanje dizajna - [ ] Izgraditi kompletan responzivni sustav dizajna web stranice - [ ] Naučiti CSS-in-JS ili utility-first okvire poput Tailwinda - [ ] Doprinijeti open source projektima poboljšanjima CSS-a - [ ] Ovladati naprednim CSS konceptima poput prilagođenih svojstava i containmenta - [ ] Kreirati višekratno upotrebljive biblioteke komponenti s modularnim CSS-om - [ ] Mentorirati druge koji uče CSS i dijeliti dizajnersko znanje ## 🎯 Vaš vremenski plan za savladavanje CSS-a ### 🛠️ Sažetak vašeg CSS alata Nakon završetka ovog poglavlja, sada imate: - Razumijevanje kaskade: Kako se stilovi nasljeđuju i nadjačavaju - Ovladavanje selektorima: Precizno ciljanje elemenata, klasa i ID-eva - Vještine pozicioniranja: Strateško postavljanje i slojevitost elemenata - Vizualni dizajn: Stvaranje staklenih efekata, sjena i prozirnosti - Responzivne tehnike: Rasporedi u postocima koji se prilagođavaju svakom ekranu - Organizacija koda: Čista, održiva CSS struktura - Moderni pristupi: Korištenje relativnih jedinica i dostupnih dizajnerskih obrazaca Sljedeći koraci: Vaš terarij sada ima i strukturu (HTML) i stil (CSS). Završna lekcija će dodati interaktivnost uz JavaScript! ## Zadatak CSS Refactoring --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Odricanje od odgovornosti: Ovaj dokument preveden je korištenjem AI usluge prevođenja Co-op Translator. Iako nastojimo biti točni, imajte na umu da automatizirani prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na njegovom izvornom jeziku treba smatrati autoritativnim izvorom. Za kritične informacije preporučuje se profesionalni ljudski prijevod. Ne snosimo odgovornost za bilo kakva nesporazuma ili pogrešna tumačenja koja proizlaze iz uporabe ovog prijevoda. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrárium Projekt 1. rész: Bevezetés az HTML-be
Az HTML, vagyis a HyperText Markup Language, minden általad valaha látogatott weboldal alapja. Gondolj az HTML-re úgy, mint a weboldalak vázára – ez határozza meg, hogy hová kerül a tartalom, hogyan van szervezve, és mit jelképez minden egyes elem. Míg a CSS később „felöltözteti” az HTML-t színekkel és elrendezéssel, és a JavaScript életre kelti interaktivitással, az HTML biztosítja azt az alapvető szerkezetet, amely minden mást lehetővé tesz. Ebben a leckében elkészíted egy virtuális terrárium felületének HTML szerkezetét. Ez a gyakorlati projekt megtanítja az alapvető HTML fogalmakat, miközben valami vizuálisan vonzó dolgot építesz. Megtanulod, hogyan szervezz tartalmat szemantikus elemek segítségével, hogyan dolgozz képekkel, és hogyan hozd létre az interaktív webalkalmazás alapját. A lecke végére rendelkezel majd egy működő HTML oldallal, amely növényképeket jelenít meg rendezett oszlopokban, készen a következő leckében történő stílusozásra. Ne aggódj, ha elsőre egyszerűnek tűnik – pontosan ilyennek kell lennie az HTML-nek, mielőtt a CSS ráteszi a vizuális fényét. ## Előadás előtti kvíz Előadás előtti kvíz ## A projekt beállítása Mielőtt belevágnánk az HTML kódba, állítsuk be a megfelelő munkakörnyezetet a terrárium projektedhez. Egy rendezett fájlszerkezet létrehozása már az elejétől fogva egy fontos szokás, amely jól fog szolgálni a webfejlesztési utadon. ### Feladat: Készítsd el a projekt szerkezetét Létrehozol egy külön mappát a terrárium projekthez, és hozzáadod az első HTML fájlodat. Két megközelítést használhatsz: 1. lehetőség: Visual Studio Code használata 1. Nyisd meg a Visual Studio Code-ot 2. Kattints a „Fájl” → „Mappa megnyitása” vagy használd a Ctrl+K, Ctrl+O (Windows/Linux) vagy Cmd+K, Cmd+O (Mac) billentyűkombinációt 3. Hozz létre egy új mappát terrarium néven, és válaszd ki 4. Az Explorer panelen kattints az „Új fájl” ikonra 5. Nevezd el a fájlt index.html-nek 2. lehetőség: Parancssoros parancsok használata Ezek a parancsok a következőket végzik el: - Létrehoz egy új könyvtárat terrarium néven a projekthez - Belép a terrarium könyvtárba - Létrehoz egy üres index.html fájlt - Megnyitja a fájlt szerkesztésre a Visual Studio Code-ban ## Az HTML dokumentum szerkezetének megértése Minden HTML dokumentum egy meghatározott szerkezetet követ, amelyet a böngészőknek érteniük kell a helyes megjelenítés érdekében. Gondolj erre a szerkezetre úgy, mint egy hivatalos levélre – vannak előírt elemek meghatározott sorrendben, amelyek segítik a címzettet (jelen esetben a böngészőt) a tartalom helyes feldolgozásában. Kezdjük az alapvető alapokkal, amelyek minden HTML dokumentumnak szükségesek. ### A DOCTYPE deklaráció és a gyökérelem Egy HTML fájl első két sora a dokumentum „bevezetője” a böngésző számára: Mit is csinál ez a kód? - Deklarálja a dokumentum típusát HTML5-ként a <!DOCTYPE html> használatával - Létrehozza a gyökér <html> elemet, amely tartalmazza az összes oldaltartalmat - Megteremti a modern webes sztenderdeket a helyes böngészői megjelenítéshez - Biztosítja a konzisztens megjelenést különböző böngészőkben és eszközökön ### 🔄 Pedagógiai ellenőrzőpont Állj meg és gondold át: Mielőtt folytatnád, győződj meg róla, hogy érted: - ✅ Miért van szükség minden HTML dokumentumban a DOCTYPE deklarációra - ✅ Mit tartalmaz a <html> gyökérelem - ✅ Hogyan segíti ez a szerkezet a böngészők helyes oldaltervezését Gyors önellenőrzés: Tudnád saját szavaiddal elmagyarázni, mit jelent a „szabványkövető megjelenítés”? ## Alapvető dokumentum metaadatok hozzáadása Egy HTML dokumentum <head> része tartalmazza azokat a fontos információkat, amelyekre a böngészőknek és keresőmotoroknak szükségük van, de amelyeket a látogatók nem látnak közvetlenül az oldalon. Gondolj rá úgy, mint a „kulisszák mögötti” információra, amely segíti az oldalad helyes működését és megjelenését különféle eszközökön és platformokon. Ez a metaadat megmondja a böngészőknek, hogyan jelenítsék meg az oldalt, milyen karakterkódolást használjanak, és hogyan kezeljék a különböző képernyőméreteket – ezek mind elengedhetetlenek a professzionális, elérhető weboldalak létrehozásához. ### Feladat: Add hozzá a dokumentum fejlécét Helyezd be ezt a <head> részt az <html> nyitó és záró címkék közé: Mit csinálnak ezek az elemek? - Beállítja az oldal címét, amely a böngészőfülekben és keresési találatokban megjelenik - Megadja az UTF-8 karakterkódolást a szövegek helyes megjelenítéséhez világszerte - Biztosítja a kompatibilitást a modern Internet Explorer verziókkal - Konfigurálja a reszponzív dizájnt úgy, hogy a nézetablak illeszkedjen az eszköz szélességéhez - Szabályozza a kezdeti nagyítási szintet, hogy a tartalom természetes méretben jelenjen meg ## A dokumentum törzsének felépítése A <body> elem tartalmaz minden látható tartalmat az oldalon – mindent, amit a felhasználók meglátnak és amellyel interakcióba lépnek. Míg a <head> rész utasításokat adott a böngészőnek, a <body> rész tartalmazza a tényleges tartalmat: szövegeket, képeket, gombokat és egyéb elemeket, amelyek létrehozzák a felhasználói felületet. Adjunk hozzá a törzs szerkezetét, és értsük meg, hogyan működnek az HTML címkék együtt a jelentésteli tartalmak létrehozásához. ### Az HTML címke szerkezet megértése Az HTML párosított címkéket használ az elemek meghatározásához. A legtöbb címke egy nyitó címkéből áll, pl. <p>, és egy záró címkéből, pl. </p>, közrefogva a tartalmat: <p>Hello, világ!</p>. Ez egy bekezdés elemet hoz létre a "Hello, világ!" szöveggel. ### Feladat: Add hozzá a törzs elemet Frissítsd az HTML fájlodat úgy, hogy tartalmazza a <body> elemet: Ez a teljes szerkezet a következőt biztosítja: - Létrehozza az alapvető HTML5 dokumentum keretet - Tartalmazza a szükséges metaadatokat a helyes böngészői megjelenítéshez - Létrehoz egy üres törzset, készen a látható tartalomhoz - Követi a modern webfejlesztési jó gyakorlatokat Most készen állsz hozzáadni a terrárium látható elemeit. <div> elemeket fogunk konténerekként használni a tartalom különböző részeinek szervezéséhez, és <img> elemeket a növényképek megjelenítéséhez. ### Képek és elrendezési konténerek használata A képek speciálisak az HTML-ben, mert „önzáró” címkéket használnak. Ellentétben például a <p></p>, amelyek körülveszik a tartalmat, az <img> címke az összes szükséges információt magában hordozza a címkében attribútumok segítségével, mint például a src a kép fájlútvonalához és az alt az akadálymentesség miatt. Mielőtt képeket adnál a HTML-hez, megfelelően kell szervezned a projekt fájlokat azáltal, hogy létrehozol egy képek mappát és belehelyezed a növény grafikai fájlokat. Elsőként állítsd be a képeket: 1. Hozz létre egy images nevű mappát a terrárium projekt mappájában 2. Töltsd le a növény képeket a megoldás mappából (összesen 14 növénykép) 3. Másolj át minden növényképet az új images mappádba ### Feladat: Hozd létre a növény megjelenítő elrendezést Most add hozzá a növény képeket, rendszerezve két oszlopba a <body></body> címkék között: Lépésenként ez történik a kódban: - Létrehoz egy fő oldal konténert id="page" az összes tartalom tárolására - Létrehoz két oszlop konténert: left-container és right-container - Szervez 7 növényt a bal oldali oszlopba és 7 növényt a jobb oldali oszlopba - Befoglal minden egyes növény képet egy plant-holder divbe az egyedi pozícionáláshoz - Alkalmaz egységes osztályneveket a CSS stilizáláshoz a következő leckében - Hozzárendel egyedi azonosítókat minden növény képhez a JavaScript interakciókhoz később - Tartalmaz helyes fájlútvonalakat, amelyek a képek mappára mutatnak ### 🔄 Pedagógiai ellenőrzőpont Szerkezet megértése: Szánj egy pillanatot az HTML szerkezet átnézésére: - ✅ Fel tudod ismerni a fő konténereket az elrendezésedben? - ✅ Megérted, miért kap minden kép egyedi azonosítót? - ✅ Hogyan írnád le a plant-holder div-ek szerepét? Vizuális ellenőrzés: Nyisd meg az HTML fájlt egy böngészőben. Látnod kell: - Egy egyszerű listát a növényképekből - A képeket két oszlopba rendezve - Egyszerű, stílus nélküli elrendezést Ne feledd: Ez a letisztult megjelenés pontosan olyan, amilyennek az HTML-nek lennie kell, mielőtt a CSS hozzáteszi a stílust! Ezzel a jelöléssel megjelennek majd a növények, bár még nem lesznek csinosak – erre való a következő leckében a CSS! Egyelőre egy stabil HTML alapot kaptál, amely megfelelően szervezi a tartalmaidat és követi az akadálymentességi jó gyakorlatokat. ## Szemantikus HTML használata az akadálymentességért A szemantikus HTML azt jelenti, hogy az elemeket jelentésük és céljuk szerint választjuk, nem pusztán a megjelenésük alapján. Ha szemantikus jelölést használsz, akkor a weboldalad szerkezetét és jelentését kommunikálod a böngészők, keresőmotorok és segítő technológiák, például képernyőolvasók felé. Ez a megközelítés webhelyeidet hozzáférhetőbbé teszi mozgáskorlátozott felhasználók számára, és segíti a keresőmotorokat a tartalom jobb megértésében. Ez a modern webfejlesztés alapelve, amely jobb élményeket teremt mindenkinek. ### Semantikus oldal cím hozzáadása Adjunk hozzá egy megfelelő címet a terrárium oldaladhoz. Illeszd be ezt a sort közvetlenül a <body> nyitó címke után: Miért fontos a szemantikus jelölés: - Segíti a képernyőolvasókat az oldal szerkezetének navigálásában és megértésében - Javítja a keresőoptimalizálást (SEO) a tartalmi hierarchia tisztázásával - Fokozza az akadálymentességet látássérült vagy kognitív különbségekkel élő felhasználók számára - Jobb felhasználói élményt teremt minden eszközön és platformon - Követi a webes szabványokat és a szakmai fejlesztési legjobb gyakorlatokat Példák szemantikus és nem szemantikus választásokra: ## A terrárium konténer létrehozása Most adjuk hozzá a terrárium HTML szerkezetét – az üvegburát, ahová a növények majd elhelyezésre kerülnek. Ez a szakasz egy fontos fogalmat mutat be: az HTML biztosítja a szerkezetet, de CSS stílus nélkül ezek az elemek még nem lesznek láthatóak. A terrárium jelölés leíró osztályneveket használ, amelyek a következő leckében intuitív és könnyen karbantartható CSS stílusokat tesznek lehetővé. ### Feladat: Add hozzá a terrárium szerkezetét Illeszd be ezt a jelölést az utolsó </div> címke elé (az oldal konténer záró címkéje előtt): A terrárium szerkezetét érthetően: - Létrehoz egy fő terrárium konténert egyedi azonosítóval a stílusozáshoz - Meghatározza a különálló elemeket minden vizuális komponenshez (felső rész, falak, föld, alsó rész) - Tartalmaz beágyazott elemeket az üveg tükröződési hatásaihoz (fényes elemek) - Használ leíró osztályneveket, amelyek egyértelműen jelzik az egyes elemek célját - Előkészíti a szerkezetet a CSS stílushoz, ami megteremti az üveg terrárium megjelenését ### 🔄 Pedagógiai ellenőrzés HTML szerkezet elsajátítása: Mielőtt továbblépnél, bizonyosodj meg, hogy tudod: - ✅ Elmagyarázni a különbséget a HTML szerkezete és a vizuális megjelenés között - ✅ Meghatározni a szemantikus és nem szemantikus HTML elemeket - ✅ Leírni, hogyan segíti a megfelelő jelölés a hozzáférhetőséget - ✅ Felismerni a teljes dokumentumfán alapuló szerkezetet Tudásod tesztelése: Próbáld meg megnyitni az HTML fájlodat egy JavaScript nélküli, CSS nélküli böngészőben. Ez megmutatja a létrehozott tiszta szemantikus szerkezetet! --- ## GitHub Copilot ügynök kihívás Használd az Agent módot a következő kihívás megoldásához: Leírás: Hozz létre egy szemantikus HTML szerkezetet egy növénygondozási útmutató szakaszhoz, amit hozzá lehet adni a terrárium projekthez. Utasítás: Készíts egy szemantikus HTML szakaszt, amely tartalmaz egy főcímet "Növénygondozási útmutató", három alrészt a "Öntözés", "Fényigény" és "Talajápolás" címmel, mindegyikben egy-egy bekezdéssel növénygondozási információkkal. Használj megfelelő szemantikus HTML címkéket, mint a <section>, <h2>, <h3>, és <p>, hogy helyesen strukturáld a tartalmat. További információ az agent mód használatáról. ## HTML történet kihívás Tanulás a web fejlődéséről A HTML jelentősen fejlődött, mióta Tim Berners-Lee 1990-ben elkészítette az első böngészőt a CERN-ben. Néhány régebbi címke, mint a <marquee>, már elavult, mert nem illeszkedik jól a modern hozzáférhetőségi szabványokhoz és reszponzív tervezési elvekhez. Próbáld ki ezt a kísérletet: 1. Ideiglenesen csomagold be a <h1> címed egy <marquee> címkébe: <marquee><h1>My Terrarium</h1></marquee> 2. Nyisd meg az oldaladat egy böngészőben, és figyeld meg a gördülő hatást 3. Gondolkodj el azon, miért vált elavulttá ez a címke (tipp: gondolj a felhasználói élményre és a hozzáférhetőségre) 4. Távolítsd el a <marquee> címkét, és térj vissza a szemantikus jelöléshez Elmélkedő kérdések: - Hogyan befolyásolhat egy gördülő címke látássérült vagy mozgásérzékeny felhasználókat? - Milyen modern CSS technikákkal érhető el hasonló vizuális hatás hozzáférhetőbb módon? - Miért fontos a jelenlegi webes szabványok használata az elavult elemek helyett? Ismerd meg jobban az elavult és elvetett HTML elemeket, hogy megértsd, hogyan fejlődnek a webes szabványok a jobb felhasználói élményért. ## Előadás utáni kvíz Előadás utáni kvíz ## Áttekintés és önálló tanulás Mélységes HTML-ismeretek A HTML több mint 30 éve a web alapja, fejlődve az egyszerű dokumentumjelölő nyelvtől egy fejlett, interaktív alkalmazások építését támogató platformig. Ennek az evolúciónak az ismerete segít megérteni a modern webes szabványokat, és jobb fejlesztési döntéseket hozni. Ajánlott tanulási útvonalak: 1. HTML története és fejlődése - Tanulmányozd az HTML 1.0-tól az HTML5-ig terjedő idővonalat - Fedezd fel, miért váltak elavulttá bizonyos címkék (hozzáférhetőség, mobilbarát tervezés, karbantarthatóság) - Vizsgáld meg a felmerülő HTML funkciókat és javaslatokat 2. Szemantikus HTML mélyebben - Tanulmányozd a HTML5 szemantikus elemek teljes listáját - Gyakorold, mikor használj <article>, <section>, <aside>, és <main> elemeket - Ismerd meg az ARIA attribútumokat a jobb hozzáférhetőségért 3. Modern webfejlesztés - Fedezd fel a reszponzív weboldalak készítését a Microsoft Learn oldalán - Értsd meg a HTML, CSS és JavaScript együttműködését - Tanulj webes teljesítményoptimalizálást és SEO legjobb gyakorlatokat Elmélkedő kérdések: - Mely elavult HTML címkéket fedezted fel, és miért távolították el őket? - Milyen új HTML funkciók vannak javaslat alatt a jövőbeni verziókhoz? - Hogyan segít a szemantikus HTML a web hozzáférhetőségében és SEO-jában? ### ⚡ Mit tehetsz a következő 5 percben - [ ] Nyisd meg a DevTools-t (F12), és vizsgáld meg kedvenc weboldalad HTML szerkezetét - [ ] Hozz létre egy egyszerű HTML fájlt alapvető címkékkel: <h1>, <p>, és <img> - [ ] Ellenőrizd HTML-edet a W3C HTML Validator online eszközével - [ ] Próbálj kommentárt hozzáadni HTML-hez <!-- comment --> szintaxissal ### 🎯 Mit érhetsz el ezalatt az órában - [ ] Teljesítsd az előadás utáni kvízt és ismételd át a szemantikus HTML fogalmakat - [ ] Készíts egy egyszerű személyes weboldalt megfelelő HTML szerkezettel - [ ] Kísérletezz különböző címszintekkel és szövegformázó címkékkel - [ ] Adj hozzá képeket és linkeket a multimédia integráció gyakorlásához - [ ] Kutass HTML5 funkciókat, amelyeket még nem próbáltál ### 📅 HTML heted: egyhetes tanulmányi terv - [ ] Fejezd be a terrárium projektet szemantikus jelöléssel - [ ] Készíts elérhető weboldalt ARIA címkékkel és szerepekkel - [ ] Gyakorold az űrlapok készítését különféle beviteli típusokkal - [ ] Fedezd fel a HTML5 API-kat, például a localStorage-t vagy a geolokációt - [ ] Tanulmányozd a reszponzív HTML mintákat és a mobile-first tervezést - [ ] Tekintsd át más fejlesztők HTML kódját a legjobb gyakorlatokért ### 🌟 HTML hónapod: egyhónapos alapok - [ ] Építs portfólió weboldalt, amely bemutatja HTML tudásodat - [ ] Tanulj meg HTML sablonozást egy keretrendszerrel, mint a Handlebars - [ ] Vegyél részt nyílt forráskódú projektekben HTML dokumentáció fejlesztésével - [ ] Sajátítsd el a haladó HTML fogalmakat, például az egyedi elemeket - [ ] Integráld a HTML-t CSS keretrendszerekkel és JavaScript könyvtárakkal - [ ] Légy mentor mások számára, akik a HTML alapjait tanulják ## 🎯 A HTML-mesteri idővonalad ### 🛠️ HTML eszköztárad összefoglalója A lecke elvégzése után most a kezedben van: - Dokumentum szerkezet: Teljes HTML5 alap megfelelő DOCTYPE használattal - Szemantikus jelölés: Értelmes címkék, amik javítják a hozzáférhetőséget és SEO-t - Képintegráció: Megfelelő fájlszervezés és alt szöveg használat - Elrendezési konténerek: Stratégiai div használat leíró osztálynevekkel - Hozzáférhetőségi tudatosság: Képernyőolvasó navigációjának megértése - Modern szabványok: Jelenlegi HTML5 gyakorlatok és elavult címkék ismerete - Projekt alapja: Szilárd alap a CSS stílushoz és JavaScript interaktivitáshoz Következő lépések: HTML szerkezeted készen áll a CSS stílusozásra! Az általad felépített szemantikus alap megkönnyíti a következő lecke megértését. ## Feladat Gyakorold a HTML-ed: készíts blog-makettet --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Jogi Nyilatkozat: Ezt a dokumentumot az AI alapú fordító szolgáltatás, a Co-op Translator segítségével fordítottuk. Bár a pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum anyanyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy téves értelmezésekért. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Project 2. rész: Bemutatás a CSS-hez
Emlékszel, hogy a HTML terráriumod meglehetősen egyszerűnek tűnt? A CSS az, ahol azt az egyszerű szerkezetet vizuálisan vonzóvá alakítjuk. Ha a HTML olyan, mint egy ház keretének megépítése, akkor a CSS mindaz, ami otthonossá teszi – a festék színei, a bútorok elrendezése, a világítás és a helyiségek közötti áramlás. Gondoljunk arra, hogy a Versailles-i Palota egyszerű vadászházként kezdődött, de a gondos dekoráció és elrendezés a világ egyik leglenyűgözőbb épületévé tette. Ma a terráriumodat a funkcionálistól a kifinomultig alakítjuk át. Megtanulod, hogyan helyezd el az elemeket pontosan, hogyan reagáljanak a különböző képernyőméretekhez az elrendezések, és hogyan teremtsd meg a vizuális vonzerőt, amely leköti a webhelyek látogatóit. A lecke végére meglátod, hogyan javíthatja drámaian a projektedet a stratégiai CSS-stílusadás. Adjunk stílust a terráriumodnak. ## Előzetes kvíz Előzetes kvíz ## Kezdés a CSS-sel A CSS-t gyakran csak „szépítésnek” gondolják, de sokkal szélesebb célt szolgál. A CSS olyan, mintha film rendezője lennél – nem csak azt szabályozod, hogy minden hogyan néz ki, hanem azt is, hogy mozog, hogyan reagál az interakciókra, és hogyan alkalmazkodik különböző helyzetekhez. A modern CSS rendkívül sokoldalú. Írhatsz olyan kódot, ami automatikusan igazítja az elrendezéseket telefonokhoz, tabletekhez és asztali gépekhez. Létrehozhatsz sima animációkat, amelyek irányítják a felhasználók figyelmét, ahol éppen szükséges. Az eredmények lenyűgözőek lehetnek, ha minden együtt működik. Amit ebben a leckében elérünk: - Készítünk egy teljes vizuális tervezést a terráriumodhoz modern CSS technikákkal - Felfedezünk alapfogalmakat, mint a kaskád, öröklődés és CSS szelektorok - Megvalósítunk reszponzív pozicionálást és elrendezési stratégiákat - Megépítjük a terrárium konténert CSS alakzatokkal és stílusokkal ### Előfeltétel El kell készülnöd a terráriumod HTML szerkezetével az előző leckéből, hogy készen álljon a stílusozásra. ### A CSS fájl beállítása Mielőtt megkezdhetnénk a stílusozást, csatlakoztatnunk kell a CSS-t a HTML-hez. Ez a kapcsolat mondja meg a böngészőnek, hol találhatók a terrárium stílusai. A terrárium mappádban hozz létre egy új fájlt style.css néven, majd linkeld be a HTML dokumentumod <head> részében: Ezt a funkciót látja el ez a kód: - Kapcsolatot teremt a HTML és CSS fájlok között - Mondja meg a böngészőnek, hogy töltse be és alkalmazza a style.css stílusokat - Használja a rel="stylesheet" attribútumot, jelezve, hogy CSS fájlról van szó - Hivatkozik a fájl elérési útjára a href="./style.css"-sel ## A CSS kaskád megértése Gondolkodtál már rajta, hogy miért hívják a CSS-t Kaskád Stíluslapoknak? A stílusok olyanok, mint egy vízesés, lefelé folynak, és néha ütköznek egymással. Vegyük például a katonai parancsrendszert – egy tábornoki parancs mondhatja, hogy „minden katona zöldet viseljen,” de az adott egységednek kiadott külön parancs „viseljék az ünnepi kék egyenruhát.” A specifikusabb utasítás élvez elsőbbséget. A CSS hasonló logikát követ, és ennek a hierarchiának megértése sokkal könnyebbé teszi a hibakeresést. ### Kísérlet a kaskád prioritásával Nézzük meg a kaskádot akcióban, egy stílusütközés létrehozásával. Először adj egy inline stílust a <h1> címkéhez: Mit tesz ez a kód: - Közvetlenül alkalmaz piros színt a <h1> elemre inline stílus segítségével - Használja a style attribútumot, hogy CSS-t közvetlenül a HTML-ben ágyazzon be - Létrehoz ezzel a legmagasabb prioritású stílus szabályt erre az adott elemre Ezután add hozzá ezt a szabályt a style.css fájlodhoz: Ebben a részben: - Meghatározunk egy CSS szabályt, amely az összes <h1> elemet célozza - Beállítjuk a szöveg színét kékre egy külső stíluslap segítségével - Alacsonyabb prioritású szabályt hoztunk létre az inline stílusokhoz képest ✅ Tudásellenőrzés: Milyen szín jelenik meg a webalkalmazásodban? Miért ez a szín győz? Tudsz olyan helyzeteket elképzelni, amikor felül szeretnéd írni a stílusokat? ## CSS öröklődés működés közben A CSS öröklődés olyan, mint a genetika – az elemek bizonyos tulajdonságokat örökölnek a szülőelemeiktől. Ha a body elemre beállítod a betűtípust, az összes benne lévő szöveg automatikusan azt a betűtípust használja. Ez hasonló ahhoz, amikor a Habsburg család jellegzetes álla generációkon keresztül jelent meg, anélkül hogy minden egyedinek külön meg kellett volna mondani. Azonban nem minden öröklődik. A betűtípusokhoz és színekhez hasonló szövegstílusok öröklődnek, de az elrendezés tulajdonságai, mint a margók és határok nem. Ahogy a gyerekek örökölhetnek fizikai jegyeket, de nem feltétlenül ruházati ízlést a szüleiktől. ### A betűtípus öröklődésének megfigyelése Nézzük meg az öröklődést azzal, hogy beállítunk egy betűtípust a <body> elemre: Mit történik itt: - Beállítjuk az egész oldal betűtípusát a <body> elem célzásával - Használunk betűhalmazt (font stack) tartalék opciókkal a jobb böngésző-kompatibilitásért - Alkalmazunk modern rendszerbetűket, amelyek jól néznek ki több operációs rendszeren is - Biztosítjuk, hogy minden gyermekelem örökölje ezt a betűtípust, kivéve, ha máshogy van kijelölve Nyisd meg a böngésződ fejlesztői eszközeit (F12), menj az Elements fülre, és nézd meg a <h1> elemedet. Láthatod, hogy a betűtípust a body-tól örökli: ✅ Kísérlet: Próbálj meg más öröklődő tulajdonságokat is beállítani a <body>-n, mint a color, line-height vagy text-align. Mi történik a címmel és más elemekkel? ### 🔄 Pedagógiai ellenőrzőpont CSS alapok megértése: Mielőtt a szelektorokra lépnél, győződj meg, hogy: - ✅ Képes vagy elmagyarázni a kaskád és öröklődés közötti különbséget - ✅ Meg tudod jósolni, melyik stílus nyer túlzott specifikusság esetén - ✅ Ismered, mely tulajdonságok öröklődnek a szülőelemtől - ✅ Helyesen tudod a CSS fájlokat csatolni a HTML-hez Gyors teszt: Ha ezek a stílusok léteznek, milyen színű lesz egy <h1> egy <div class="special">-en belül? Válasz: Piros (elem szelektor közvetlenül célozza a h1-et) ## A CSS szelektorok mestersége A CSS szelektorok segítségével célzottan választhatsz ki konkrét elemeket stílusozásra. Olyanok, mint a pontos instrukciók – ahelyett, hogy azt mondanád „az a ház,” mondhatod azt, hogy „a kék ház, aminek piros ajtaja van a Maple utcában.” A CSS többféle módot kínál a részletességre, és a megfelelő szelekció kiválasztása olyan, mintha a munkához való eszközt választanád ki. Néha minden ajtót meg kell stílusoznod a környéken, máskor csak egy konkrét ajtót. ### Elem szelektorok (címkék) Az elem szelektorok az HTML-elemeket a címkéjük neve alapján célozzák meg. Tökéletesek az alapstílusok beállítására, amelyek széles körben alkalmazhatók az oldalon: Ezeknek a stílusoknak a magyarázata: - Egységes tipográfiát állít be az oldalon a body szelektorral - Eltávolítja az alap böngészői margókat és paddingokat jobb vezérlésért - Stílusozza az összes címsort színnel, igazítással és távolsággal - rem egységeket használ méretezhető, akadálymentes betűméretezéshez Bár az elem szelektorok jól működnek az általános stílusokhoz, szükséged lesz konkrétabb szelektorokra az egyes terráriumi növényekhez. ### ID szelektorok egyedi elemekhez Az ID szelektorok a # jellel kezdődnek, és az id attribútummal rendelkező egyedi elemeket célozzák. Az ID-k egy oldalon egyediek kell legyenek, ezért tökéletesek egyedi, különleges elemek, például a bal és jobb növénytartók stílusozására. Készítsük el a terrárium oldal konténereinek stílusát, ahol a növények laknak: Mit tesz ez a kód: - Az abszolút pozicionálás segítségével a konténereket a bal és jobb szélekre helyezi - A vh (viewport magasság) egységet használja, hogy az elemek magassága reagáljon a képernyő méretére - Alkalmazza a box-sizing: border-box-ot, hogy a padding is beletartozzon a teljes szélességbe - Eltávolítja a szükségtelen px egységeket nullánál a tisztább kódért - Beállít egy finom háttérszínt, amely kevésbé zavaró, mint az élénk szürke ✅ Kódminőség kihívás: Figyeld meg, hogy ez a CSS megsérti a DRY (Don't Repeat Yourself) elvet. Tudod úgy átalakítani, hogy ID és osztály kombinációját használod? Javított megoldás: ### Osztály szelektorok újrafelhasználható stílusokhoz Az osztály szelektorok a . jellel kezdődnek, és akkor használatosak, ha ugyanazt a stílust több elemhez akarod alkalmazni. Az ID-kkel ellentétben az osztályok ismételhetőek a HTML-ben, ezért ideálisak egységes stílusmintákhoz. A terráriumunkban minden növény hasonló stílust igényel, de egyedi elhelyezést is. Osztályokat használunk az általános stílushoz, és ID-ket az egyedi pozicionáláshoz. Az egyes növények HTML szerkezete: Fontos elemek magyarázata: - class="plant-holder": egységes konténer stílus minden növény számára - class="plant": közös kép-stílus és viselkedés - id="plant1": egyedi pozíció és JavaScript interakció - Leíró alternatív szöveg a képernyőolvasók számára Most add hozzá ezt a stílust a style.css fájlodhoz: Stílusok magyarázata: - Relatív pozicionálást állít be a növénytartóra, hogy pozíciós kontextust biztosítson - Minden növénytartót 13% magasságúra állít, hogy a növények függőlegesen elférjenek görgetés nélkül - Kicsit balra tolja el a tartókat, hogy jobban középre kerüljenek a növények - Engedi, hogy a növények arányosan méreteződjenek a max-width és max-height tulajdonságokkal - z-index használatával a növényeket más elemek fölé helyezi a terráriumban - Finom lebegési effektet ad CSS átmenetekkel jobb felhasználói élményért ✅ Kritikus gondolkodás: Miért van szükségünk mind a .plant-holder, mind a .plant szelektorokra? Mi történne, ha csak egyet használnánk? ## A CSS pozicionálás megértése A CSS pozicionálás olyan, mint egy színdarab rendezője – megmondod, hol álljanak a szereplők és hogyan mozogjanak a színpadon. Egyes szereplők követik az alapelrendezést, míg másoknak speciális pozicionálás kell a drámai hatáshoz. Ha megérted a pozicionálást, sok elrendezési kihívás kezelhetővé válik. Szükséged van egy navigációs sávra, amely a tetején marad görgetés közben? Ezt a pozicionálás megoldja. Egy tooltipet szeretnél egy adott helyen megjeleníteni? Ez is pozicionálás. ### Az öt pozíció érték ### Pozicionálás a terráriumunkban A terráriumunk tudatosan használja a pozíciótípusok kombinációját az elrendezés megvalósításához: A pozicionálási stratégiát megértve: - Az abszolút konténerek elkerülnek a normál dokumentum áramlásából és a képernyő szélére kerülnek - A relatív növénytartók pozíciós kontextust biztosítanak, miközben a dokumentum részei maradnak - Az abszolút növények pontosan pozícionálhatóak relatív tartóikon belül - Ez a kombináció lehetővé teszi, hogy a növények egymás fölé kerüljenek és egyénileg is pozícionálhatóak legyenek ✅ Kísérlet: Próbáld meg megváltoztatni a pozíciós értékeket, és figyeld meg az eredményt: - Mi történik, ha a .container pozícióját átállítod absolute-ról relative-re? - Hogyan változik a elrendezés, ha a .plant-holder relative helyett absolute-ot használ? - Mi történik, ha a .plant pozícionálását relative-re állítod? ### 🔄 Pedagógiai állapotfelmérés CSS pozícionálás mesterfokon: Állj meg egy pillanatra és ellenőrizd a megértésedet: - ✅ El tudod magyarázni, miért szükséges a növényeknek az abszolút pozícionálás a drag-and-drop funkcióhoz? - ✅ Érted, hogyan hoznak létre a relatív konténerek pozíciós kontextust? - ✅ Miért használnak oldal konténerek abszolút pozícionálást? - ✅ Mi történne, ha teljesen eltávolítanád a pozíció deklarációkat? Valós kapcsolat: Gondolkodj el rajta, hogyan tükrözi a CSS pozícionálás a valós világ elrendezését: - Statikus: Könyvek a polcon (természetes sorrend) - Relatív: Egy könyv kis elmozgatása, de a helyének megtartása - Abszolút: Könyvjelző elhelyezése pontos oldalszámnál - Fix: Egy ragacsos jegyzet, ami látható marad, miközben lapozol ## Üvegpohár (terrárium) építése CSS-sel Most építsünk fel egy üvegedényt csak CSS segítségével – nem kell képek vagy grafikai szoftver. Az üveg, árnyékok és mélységrealizmus létrehozása pozícionálással és áttetszőséggel demonstrálja a CSS vizuális képességeit. Ez a megközelítés hasonló, mint ahogy a Bauhaus mozgalom építészei egyszerű geometriai formákkal hoztak létre bonyolult, szép szerkezeteket. Ha megérted ezeket az alapelveket, felismered a CSS technikákat számos webdesign mögött. ### Az Üvegpohár Alkatrészeinek Létrehozása Építsük fel a terrárium üveget darabonként. Minden rész abszolút pozícionálást és százalékos méretezést használ a responsív dizájn érdekében: A terrárium építésének megértése: - Százalék alapú méreteket használ a minden képernyőméreten való adaptív méretezéshez - Abszolút pozícionálással helyezi el az elemeket, hogy pontosan egymásra kerüljenek és helyezkedjenek el - Különböző átlátszóságokat alkalmaz az üveghatás létrehozásához - z-index rétegzést valósít meg, hogy a növények a poháron belül jelenjenek meg - Finom dobozárnyékot és lekerekített széleket ad a valószerűbb megjelenésért ### Responsív tervezés százalékszámítással Vedd észre, hogy minden méret százalékos, nem fix pixel érték: Miért fontos ez: - Biztosítja, hogy a terrárium arányosan méreteződik bármilyen képernyőméreten - Megőrzi a vizuális kapcsolatokat az üveg alkatrészei között - Konzisztens élményt nyújt mobiltelefontól a nagy asztali monitorokig - Lehetővé teszi, hogy a dizájn alkalmazkodjon anélkül, hogy összetörné a vizuális elrendezést ### CSS egységek használatban A border-radius-hoz rem mértékegységet használunk, ami a gyökér betűmérethez viszonyítva skálázódik. Ez hozzáférhetőbb tervezéseket eredményez, amelyek tiszteletben tartják a felhasználói betűméret beállítást. Tudj meg többet a CSS relációs egységekről a hivatalos specifikációban. ✅ Vizuális kísérletezés: Próbáld meg módosítani ezeket az értékeket, és figyeld meg a hatásokat: - Módosítsd a pohár átlátszóságát 0.5-ről 0.8-ra – hogyan változik az üveg megjelenése? - Állítsd át a föld színét #3a241d-ről #8B4513-ra – milyen vizuális hatás érvényesül? - Változtasd meg a föld z-index értékét 2-re – mi történik a rétegzéssel? ### 🔄 Pedagógiai állapotfelmérés CSS vizuális tervezés megértése: Ellenőrizd a CSS látványtervezési ismereteidet: - ✅ Hogyan hoznak létre a százalékos méretek responsív dizájnt? - ✅ Miért hoz létre az átlátszóság üveghatást? - ✅ Milyen szerepe van a z-index-nek az elemek rétegzésében? - ✅ Hogyan formálják a border-radius értékek a pohár alakját? Tervezési elv: Vedd észre, hogy bonyolult képi elemeket egyszerű formákból építünk fel: 1. Téglalapok → Lekerekített téglalapok → Pohár alkatrészek 2. Egyszínű felületek → Átlátszóság → Üveghatás 3. Egyedi elemek → Rétegezett kompozíció → 3D megjelenés --- ## GitHub Copilot Agent kihívás 🚀 Használd az Agent módot a következő kihívás teljesítéséhez: Leírás: Készíts egy CSS animációt, amely lágyan ringatja a terrárium növényeit, mintha enyhe szél fújna. Ez segít gyakorolni a CSS animációkat, transzformációkat és kulcskockákat, miközben növeli a terrárium vizuális vonzerejét. Feladat: Adj CSS kulcskocka animációkat, hogy a terrárium növényei enyhén jobbra-balra ringjanak. Készíts egy ringató animációt, amely mindegyik növényt kicsit (2-3 fokkal) jobbra-balra forgat 3-4 másodperces időtartammal, majd alkalmazd a .plant osztályra. Gondoskodj róla, hogy az animáció végtelenül fusson és legyen egy sima, természetes mozgást utánzó easing funkciója. Tudj meg többet az agent módról. ## 🚀 Kihívás: Üveg fényvisszaverődések hozzáadása Készen állsz élethű üveg fényvisszaverődésekkel gazdagítani a terráriumot? Ez a technika mélységet és realizmust ad a tervhez. Finom fénypontokat készítesz, amelyek szimulálják, hogyan tükröződik a fény az üvegfelületen. Ez hasonló ahhoz, ahogy a reneszánsz festők, például Jan van Eyck fénnyel és visszatükröződéssel teszik térhatásúvá az üvegvázlatokat. Itt egy cél, amit meg akarsz valósítani: A kihívásod: - Hozz létre finom, fehér vagy világos ovális alakzatokat az üveg fényvisszaverődéséhez - Helyezd el őket stratégiailag a pohár bal oldalán - Alkalmazz megfelelő áttetszőséget és elmosódást az élethű fénytükröződéshez - Használj border-radius-t az organikus, buborékszerű formák létrehozásához - Kísérletezz átmenetekkel vagy dobozárnyékokkal a nagyobb realizmus érdekében ## Előadás utáni kvíz Előadás utáni kvíz ## Bővítsd CSS tudásod A CSS elsőre bonyolultnak tűnhet, de ezeknek az alapelveknek a megértése szilárd alapot ad fejlettebb technikákhoz. Következő CSS tanulási területek: - Flexbox – leegyszerűsíti az elemek igazítását és elosztását - CSS Grid – hatékony eszközök a komplex elrendezésekhez - CSS változók – csökkenti az ismétlést, javítja a karbantartást - Reszponzív tervezés – biztosítja, hogy az oldalak különböző képernyőkön jól működjenek ### Interaktív tanulási források Gyakorold ezeket a fogalmakat ezekkel az élvezetes, gyakorlati játékokkal: - 🐸 Flexbox Froggy – Tanuld meg a Flexboxot szórakoztató kihívásokon keresztül - 🌱 Grid Garden – Tanulj CSS Gridet virtuális sárgarépa termesztése közben - 🎯 CSS Battle – Teszteld CSS tudásod kódolási kihívásokon ### További tanulás Átfogó CSS alapokért végezd el ezt a Microsoft Learn modult: Stilizáld HTML alkalmazásod CSS-sel ### ⚡ Mit tehetsz az elkövetkező 5 percben - [ ] Nyisd meg az DevTools-t, és vizsgáld meg bármely weboldal CSS stílusait az Elements panelen - [ ] Készíts egy egyszerű CSS fájlt és csatold egy HTML oldalhoz - [ ] Próbálj ki különböző színváltoztatási módokat: hex, RGB és név szerinti színek - [ ] Gyakorold a dobozmodellt padding és margin hozzáadásával egy div-hez ### 🎯 Mit érhetsz el ebben az órában - [ ] Fejezd be az előadás utáni kvízt és ismételd át a CSS alapokat - [ ] Stílusozd HTML oldalad betűtípusokkal, színekkel és távolságokkal - [ ] Készíts egyszerű elrendezést flexbox vagy grid segítségével - [ ] Kísérletezz CSS átmenetekkel a sima hatásokért - [ ] Gyakorold a responsív tervezést médiakérdésekkel ### 📅 Hét napos CSS kalandod - [ ] Fejezd be a terrárium stílusozási feladatot kreatív megoldásokkal - [ ] Sajátítsd el a CSS Gridet képgaléria elrendezésének megépítésével - [ ] Tanuld meg a CSS animációkat, hogy életre keltsd tervezéseidet - [ ] Fedezd fel a CSS preprocessorokat, mint a Sass vagy Less - [ ] Tanulmányozd a tervezési elveket és alkalmazd a CSS-ben - [ ] Elemezd és másold le az érdekes online terveket ### 🌟 Hónapra szóló tervezési mesterkedésed - [ ] Építs teljes reszponzív webdesign rendszert - [ ] Tanuld meg a CSS-in-JS vagy utility-first keretrendszereket, például Tailwind-et - [ ] Vegyél részt nyílt forráskódú projektekben CSS fejlesztésekkel - [ ] Sajátítsd el a haladó CSS koncepciókat, mint az egyéni tulajdonságok és konténment - [ ] Alkoss újrahasznosítható komponenskönyvtárakat moduláris CSS-sel - [ ] Mentoráld CSS-t tanulókat és osszd meg tervezési tudásod ## 🎯 CSS mesteri ütemterved ### 🛠️ CSS szerszámosládád összefoglalója Az óra elvégzése után már rendelkezel: - Kaszkád megértéssel: Hogyan öröklődnek és írhatók felül a stílusok egymást - Szelektorok mesterfogásával: Precíz célzás elemekre, osztályokra és ID-kre - Pozícionálási képességekkel: Stratégiai elem elhelyezés és rétegzés - Vizuális tervezéssel: Üveg effektusok, árnyékok és áttetszőség létrehozása - Reszponzív technikákkal: Százalékos elrendezések, amelyek alkalmazkodnak bármilyen képernyőhöz - Kód szervezéssel: Tiszta, karbantartható CSS struktúra - Modern gyakorlatokkal: Relatív egységek és hozzáférhető tervezési minták használata Következő lépések: A terráriumod most már rendelkezik struktúrával (HTML) és stílussal (CSS). Az utolsó óra interaktivitást ad hozzá JavaScripttel! ## Feladat CSS refaktorálás --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Jogi nyilatkozat: Ezt a dokumentumot az AI fordító szolgáltatás, a Co-op Translator használatával fordítottuk. Bár a pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások tartalmazhatnak hibákat vagy pontatlanságokat. Az eredeti dokumentum az eredeti nyelven tekintendő hivatalos forrásnak. Kritikus információk esetén professzionális emberi fordítást javasolunk. Nem vállalunk felelősséget az ebből a fordításból eredő félreértésekért vagy félreértelmezésekért. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Proyek Terrarium Bagian 1: Pengantar HTML
HTML, atau HyperText Markup Language, adalah dasar dari setiap situs web yang pernah Anda kunjungi. Pikirkan HTML sebagai kerangka yang memberikan struktur pada halaman web – HTML menentukan di mana konten berada, bagaimana konten diatur, dan apa yang diwakili oleh setiap bagian. Sementara CSS nantinya akan "mendandani" HTML Anda dengan warna dan tata letak, dan JavaScript akan menghidupkannya dengan interaktivitas, HTML menyediakan struktur penting yang membuat semuanya menjadi mungkin. Dalam pelajaran ini, Anda akan membuat struktur HTML untuk antarmuka terrarium virtual. Proyek praktis ini akan mengajarkan Anda konsep dasar HTML sambil membangun sesuatu yang menarik secara visual. Anda akan belajar cara mengatur konten menggunakan elemen semantik, bekerja dengan gambar, dan membuat dasar untuk aplikasi web interaktif. Pada akhir pelajaran ini, Anda akan memiliki halaman HTML yang berfungsi, menampilkan gambar tanaman dalam kolom yang terorganisir, siap untuk ditata pada pelajaran berikutnya. Jangan khawatir jika tampilannya sederhana pada awalnya – itulah yang seharusnya dilakukan HTML sebelum CSS menambahkan sentuhan visual. ## Kuis Pra-Pelajaran Kuis pra-pelajaran ## Menyiapkan Proyek Anda Sebelum kita mulai dengan kode HTML, mari kita siapkan ruang kerja yang tepat untuk proyek terrarium Anda. Membuat struktur file yang terorganisir sejak awal adalah kebiasaan penting yang akan sangat membantu Anda sepanjang perjalanan pengembangan web. ### Tugas: Buat Struktur Proyek Anda Anda akan membuat folder khusus untuk proyek terrarium Anda dan menambahkan file HTML pertama Anda. Berikut dua pendekatan yang dapat Anda gunakan: Opsi 1: Menggunakan Visual Studio Code 1. Buka Visual Studio Code 2. Klik "File" → "Open Folder" atau gunakan Ctrl+K, Ctrl+O (Windows/Linux) atau Cmd+K, Cmd+O (Mac) 3. Buat folder baru bernama terrarium dan pilih folder tersebut 4. Di panel Explorer, klik ikon "New File" 5. Beri nama file Anda index.html Opsi 2: Menggunakan Perintah Terminal Berikut yang dilakukan oleh perintah ini: - Membuat direktori baru bernama terrarium untuk proyek Anda - Masuk ke direktori terrarium - Membuat file kosong index.html - Membuka file di Visual Studio Code untuk diedit ## Memahami Struktur Dokumen HTML Setiap dokumen HTML mengikuti struktur tertentu yang diperlukan agar browser dapat memahami dan menampilkan dengan benar. Pikirkan struktur ini seperti surat resmi – memiliki elemen yang diperlukan dalam urutan tertentu yang membantu penerima (dalam hal ini, browser) memproses konten dengan benar. Mari kita mulai dengan menambahkan dasar penting yang dibutuhkan setiap dokumen HTML. ### Deklarasi DOCTYPE dan Elemen Root Dua baris pertama dari file HTML mana pun berfungsi sebagai "pengantar" dokumen ke browser: Memahami apa yang dilakukan kode ini: - Mendeklarasikan jenis dokumen sebagai HTML5 menggunakan <!DOCTYPE html> - Membuat elemen root <html> yang akan berisi semua konten halaman - Menetapkan standar web modern untuk rendering browser yang tepat - Memastikan tampilan konsisten di berbagai browser dan perangkat ### 🔄 Pengecekan Pedagogis Berhenti dan Renungkan: Sebelum melanjutkan, pastikan Anda memahami: - ✅ Mengapa setiap dokumen HTML membutuhkan deklarasi DOCTYPE - ✅ Apa yang terkandung dalam elemen root <html> - ✅ Bagaimana struktur ini membantu browser merender halaman dengan benar Tes Diri Cepat: Bisakah Anda menjelaskan dengan kata-kata Anda sendiri apa arti "rendering yang sesuai standar"? ## Menambahkan Metadata Dokumen Penting Bagian <head> dari dokumen HTML berisi informasi penting yang dibutuhkan browser dan mesin pencari, tetapi tidak langsung terlihat oleh pengunjung di halaman. Pikirkan ini sebagai informasi "di balik layar" yang membantu halaman web Anda berfungsi dengan baik dan tampil dengan benar di berbagai perangkat dan platform. Metadata ini memberi tahu browser cara menampilkan halaman Anda, karakter encoding apa yang digunakan, dan cara menangani berbagai ukuran layar – semua hal penting untuk membuat halaman web yang profesional dan dapat diakses. ### Tugas: Tambahkan Bagian Head Dokumen Masukkan bagian <head> ini di antara tag pembuka dan penutup <html> Anda: Memecah apa yang dilakukan setiap elemen: - Menetapkan judul halaman yang muncul di tab browser dan hasil pencarian - Menentukan encoding karakter UTF-8 untuk tampilan teks yang benar di seluruh dunia - Memastikan kompatibilitas dengan versi modern Internet Explorer - Mengonfigurasi desain responsif dengan mengatur viewport agar sesuai dengan lebar perangkat - Mengontrol tingkat zoom awal untuk menampilkan konten dalam ukuran alami ## Membangun Body Dokumen Elemen <body> berisi semua konten yang terlihat dari halaman web Anda – segala sesuatu yang akan dilihat dan berinteraksi dengan pengguna. Sementara bagian <head> memberikan instruksi kepada browser, bagian <body> berisi konten aktual: teks, gambar, tombol, dan elemen lain yang membentuk antarmuka pengguna Anda. Mari tambahkan struktur body dan pahami bagaimana tag HTML bekerja bersama untuk menciptakan konten yang bermakna. ### Memahami Struktur Tag HTML HTML menggunakan tag berpasangan untuk mendefinisikan elemen. Sebagian besar tag memiliki tag pembuka seperti <p> dan tag penutup seperti </p>, dengan konten di antaranya: <p>Halo, dunia!</p>. Ini menciptakan elemen paragraf yang berisi teks "Halo, dunia!". ### Tugas: Tambahkan Elemen Body Perbarui file HTML Anda untuk menyertakan elemen <body>: Berikut yang disediakan oleh struktur lengkap ini: - Menetapkan kerangka dokumen HTML5 dasar - Menyertakan metadata penting untuk rendering browser yang tepat - Membuat body kosong yang siap untuk konten yang terlihat - Mengikuti praktik terbaik pengembangan web modern Sekarang Anda siap menambahkan elemen yang terlihat dari terrarium Anda. Kita akan menggunakan elemen <div> sebagai wadah untuk mengatur berbagai bagian konten, dan elemen <img> untuk menampilkan gambar tanaman. ### Bekerja dengan Gambar dan Wadah Tata Letak Gambar memiliki keistimewaan dalam HTML karena menggunakan tag "self-closing". Tidak seperti elemen seperti <p></p> yang membungkus konten, tag <img> berisi semua informasi yang dibutuhkan dalam tag itu sendiri menggunakan atribut seperti src untuk jalur file gambar dan alt untuk aksesibilitas. Sebelum menambahkan gambar ke HTML Anda, Anda perlu mengatur file proyek Anda dengan benar dengan membuat folder gambar dan menambahkan grafik tanaman. Pertama, siapkan gambar Anda: 1. Buat folder bernama images di dalam folder proyek terrarium Anda 2. Unduh gambar tanaman dari folder solusi (total 14 gambar tanaman) 3. Salin semua gambar tanaman ke folder images baru Anda ### Tugas: Buat Tata Letak Tampilan Tanaman Sekarang tambahkan gambar tanaman yang diatur dalam dua kolom di antara tag <body></body> Anda: Langkah demi langkah, berikut yang terjadi dalam kode ini: - Membuat wadah halaman utama dengan id="page" untuk menampung semua konten - Menetapkan dua wadah kolom: left-container dan right-container - Mengatur 7 tanaman di kolom kiri dan 7 tanaman di kolom kanan - Membungkus setiap gambar tanaman dalam div plant-holder untuk posisi individu - Menerapkan nama kelas yang konsisten untuk penataan CSS pada pelajaran berikutnya - Menetapkan ID unik untuk setiap gambar tanaman untuk interaksi JavaScript nanti - Menyertakan jalur file yang benar yang menunjuk ke folder gambar ### 🔄 Pengecekan Pedagogis Memahami Struktur: Luangkan waktu untuk meninjau struktur HTML Anda: - ✅ Bisakah Anda mengidentifikasi wadah utama dalam tata letak Anda? - ✅ Apakah Anda memahami mengapa setiap gambar memiliki ID unik? - ✅ Bagaimana Anda akan menjelaskan tujuan dari div plant-holder? Inspeksi Visual: Buka file HTML Anda di browser. Anda seharusnya melihat: - Daftar sederhana gambar tanaman - Gambar yang diatur dalam dua kolom - Tata letak sederhana tanpa gaya Ingat: Tampilan sederhana ini adalah apa yang seharusnya dilakukan HTML sebelum penataan CSS! Dengan markup ini ditambahkan, tanaman akan muncul di layar, meskipun belum terlihat menarik – itulah fungsi CSS pada pelajaran berikutnya! Untuk saat ini, Anda memiliki dasar HTML yang solid yang mengatur konten Anda dengan benar dan mengikuti praktik terbaik aksesibilitas. ## Menggunakan HTML Semantik untuk Aksesibilitas HTML semantik berarti memilih elemen HTML berdasarkan makna dan tujuannya, bukan hanya penampilannya. Ketika Anda menggunakan markup semantik, Anda mengkomunikasikan struktur dan makna konten Anda kepada browser, mesin pencari, dan teknologi bantu seperti pembaca layar. Pendekatan ini membuat situs web Anda lebih mudah diakses oleh pengguna dengan disabilitas dan membantu mesin pencari memahami konten Anda dengan lebih baik. Ini adalah prinsip dasar pengembangan web modern yang menciptakan pengalaman yang lebih baik untuk semua orang. ### Menambahkan Judul Halaman Semantik Mari tambahkan judul yang sesuai untuk halaman terrarium Anda. Masukkan baris ini tepat setelah tag pembuka <body>: Mengapa markup semantik penting: - Membantu pembaca layar menavigasi dan memahami struktur halaman - Meningkatkan optimasi mesin pencari (SEO) dengan memperjelas hierarki konten - Meningkatkan aksesibilitas bagi pengguna dengan gangguan penglihatan atau perbedaan kognitif - Menciptakan pengalaman pengguna yang lebih baik di semua perangkat dan platform - Mengikuti standar web dan praktik terbaik untuk pengembangan profesional Contoh pilihan semantik vs. non-semantik: ## Membuat Wadah Terrarium Sekarang mari tambahkan struktur HTML untuk terrarium itu sendiri – wadah kaca tempat tanaman nantinya akan ditempatkan. Bagian ini menunjukkan konsep penting: HTML menyediakan struktur, tetapi tanpa penataan CSS, elemen-elemen ini belum akan terlihat. Markup terrarium menggunakan nama kelas deskriptif yang akan membuat penataan CSS intuitif dan mudah dikelola pada pelajaran berikutnya. ### Tugas: Tambahkan Struktur Terrarium Masukkan markup ini di atas tag </div> terakhir (sebelum tag penutup dari wadah halaman): Memahami struktur terrarium ini: - Membuat wadah terrarium utama dengan ID unik untuk penataan - Mendefinisikan elemen terpisah untuk setiap komponen visual (atas, dinding, tanah, bawah) - Menyertakan elemen bersarang untuk efek refleksi kaca (elemen mengkilap) - Menggunakan nama kelas deskriptif yang jelas menunjukkan tujuan setiap elemen - Mempersiapkan struktur untuk styling CSS yang akan menciptakan tampilan terrarium kaca ### 🔄 Pengecekan Pedagogis Penguasaan Struktur HTML: Sebelum melanjutkan, pastikan Anda dapat: - ✅ Menjelaskan perbedaan antara struktur HTML dan tampilan visual - ✅ Mengidentifikasi elemen HTML semantik vs. non-semantik - ✅ Menguraikan bagaimana markup yang tepat meningkatkan aksesibilitas - ✅ Mengenali struktur pohon dokumen secara lengkap Menguji Pemahaman Anda: Cobalah membuka file HTML Anda di browser dengan JavaScript dinonaktifkan dan CSS dihapus. Ini menunjukkan struktur semantik murni yang telah Anda buat! --- ## Tantangan Agen GitHub Copilot Gunakan mode Agen untuk menyelesaikan tantangan berikut: Deskripsi: Buat struktur HTML semantik untuk bagian panduan perawatan tanaman yang dapat ditambahkan ke proyek terrarium. Prompt: Buat bagian HTML semantik yang mencakup judul utama "Panduan Perawatan Tanaman", tiga subbagian dengan judul "Penyiraman", "Kebutuhan Cahaya", dan "Perawatan Tanah", masing-masing berisi paragraf informasi perawatan tanaman. Gunakan tag HTML semantik yang sesuai seperti <section>, <h2>, <h3>, dan <p> untuk menyusun konten dengan tepat. Pelajari lebih lanjut tentang mode agen di sini. ## Tantangan Eksplorasi Sejarah HTML Belajar Tentang Evolusi Web HTML telah berkembang pesat sejak Tim Berners-Lee menciptakan browser web pertama di CERN pada tahun 1990. Beberapa tag lama seperti <marquee> sekarang sudah tidak digunakan karena tidak sesuai dengan standar aksesibilitas modern dan prinsip desain responsif. Coba Eksperimen Ini: 1. Sementara, bungkus judul <h1> Anda dalam tag <marquee>: <marquee><h1>Terrarium Saya</h1></marquee> 2. Buka halaman Anda di browser dan amati efek gulir 3. Pertimbangkan mengapa tag ini tidak digunakan lagi (petunjuk: pikirkan tentang pengalaman pengguna dan aksesibilitas) 4. Hapus tag <marquee> dan kembali ke markup semantik Pertanyaan Refleksi: - Bagaimana judul yang bergulir dapat memengaruhi pengguna dengan gangguan penglihatan atau sensitivitas gerakan? - Teknik CSS modern apa yang dapat mencapai efek visual serupa dengan lebih aksesibel? - Mengapa penting menggunakan standar web terkini daripada elemen yang sudah tidak digunakan? Jelajahi lebih lanjut tentang elemen HTML yang usang dan tidak digunakan untuk memahami bagaimana standar web berkembang demi meningkatkan pengalaman pengguna. ## Kuis Pasca-Pelajaran Kuis pasca-pelajaran ## Tinjauan & Belajar Mandiri Perdalam Pengetahuan HTML Anda HTML telah menjadi dasar web selama lebih dari 30 tahun, berkembang dari bahasa markup dokumen sederhana menjadi platform canggih untuk membangun aplikasi interaktif. Memahami evolusi ini membantu Anda menghargai standar web modern dan membuat keputusan pengembangan yang lebih baik. Jalur Pembelajaran yang Direkomendasikan: 1. Sejarah dan Evolusi HTML - Teliti garis waktu dari HTML 1.0 hingga HTML5 - Jelajahi mengapa beberapa tag tidak digunakan lagi (aksesibilitas, ramah seluler, pemeliharaan) - Selidiki fitur HTML yang sedang berkembang dan proposal baru 2. Pendalaman HTML Semantik - Pelajari daftar lengkap elemen semantik HTML5 - Latih mengidentifikasi kapan menggunakan <article>, <section>, <aside>, dan <main> - Pelajari atribut ARIA untuk meningkatkan aksesibilitas 3. Pengembangan Web Modern - Jelajahi membangun situs web responsif di Microsoft Learn - Pahami bagaimana HTML terintegrasi dengan CSS dan JavaScript - Pelajari praktik terbaik kinerja web dan SEO Pertanyaan Refleksi: - Tag HTML mana yang sudah tidak digunakan lagi yang Anda temukan, dan mengapa tag tersebut dihapus? - Fitur HTML baru apa yang sedang diusulkan untuk versi mendatang? - Bagaimana HTML semantik berkontribusi pada aksesibilitas web dan SEO? ### ⚡ Apa yang Bisa Anda Lakukan dalam 5 Menit Berikutnya - [ ] Buka DevTools (F12) dan inspeksi struktur HTML dari situs web favorit Anda - [ ] Buat file HTML sederhana dengan tag dasar: <h1>, <p>, dan <img> - [ ] Validasi HTML Anda menggunakan Validator HTML W3C online - [ ] Coba tambahkan komentar ke HTML Anda menggunakan <!-- komentar --> ### 🎯 Apa yang Bisa Anda Capai dalam Satu Jam - [ ] Selesaikan kuis pasca-pelajaran dan tinjau konsep HTML semantik - [ ] Bangun halaman web sederhana tentang diri Anda menggunakan struktur HTML yang tepat - [ ] Bereksperimen dengan berbagai level heading dan tag format teks - [ ] Tambahkan gambar dan tautan untuk berlatih integrasi multimedia - [ ] Teliti fitur HTML5 yang belum Anda coba ### 📅 Perjalanan HTML Anda Selama Seminggu - [ ] Selesaikan tugas proyek terrarium dengan markup semantik - [ ] Buat halaman web yang aksesibel menggunakan label dan peran ARIA - [ ] Latih pembuatan formulir dengan berbagai jenis input - [ ] Jelajahi API HTML5 seperti localStorage atau geolocation - [ ] Pelajari pola HTML responsif dan desain mobile-first - [ ] Tinjau kode HTML pengembang lain untuk praktik terbaik ### 🌟 Fondasi Web Anda Selama Sebulan - [ ] Bangun situs web portofolio yang menunjukkan penguasaan HTML Anda - [ ] Pelajari templating HTML dengan framework seperti Handlebars - [ ] Berkontribusi pada proyek open source dengan meningkatkan dokumentasi HTML - [ ] Kuasai konsep HTML tingkat lanjut seperti elemen kustom - [ ] Integrasikan HTML dengan framework CSS dan pustaka JavaScript - [ ] Bimbing orang lain yang sedang belajar dasar-dasar HTML ## 🎯 Garis Waktu Penguasaan HTML Anda ### 🛠️ Ringkasan Toolkit HTML Anda Setelah menyelesaikan pelajaran ini, Anda sekarang memiliki: - Struktur Dokumen: Fondasi HTML5 lengkap dengan DOCTYPE yang tepat - Markup Semantik: Tag bermakna yang meningkatkan aksesibilitas dan SEO - Integrasi Gambar: Praktik organisasi file dan teks alt yang tepat - Kontainer Tata Letak: Penggunaan div strategis dengan nama kelas deskriptif - Kesadaran Aksesibilitas: Pemahaman navigasi pembaca layar - Standar Modern: Praktik HTML5 terkini dan pengetahuan tentang tag yang sudah tidak digunakan - Fondasi Proyek: Basis yang solid untuk styling CSS dan interaktivitas JavaScript Langkah Berikutnya: Struktur HTML Anda siap untuk styling CSS! Fondasi semantik yang telah Anda bangun akan membuat pelajaran berikutnya jauh lebih mudah dipahami. ## Tugas Latih HTML Anda: Bangun mockup blog --- Penafian: Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI Co-op Translator. Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang penting, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang timbul dari penggunaan terjemahan ini.
Proyek Terrarium Bagian 2: Pengantar CSS
Ingat bagaimana terrarium HTML Anda terlihat cukup sederhana? CSS adalah tempat kita mengubah struktur polos itu menjadi sesuatu yang menarik secara visual. Jika HTML seperti membangun kerangka rumah, maka CSS adalah segala sesuatu yang membuatnya terasa seperti rumah - warna cat, pengaturan furnitur, pencahayaan, dan bagaimana ruangan saling terhubung. Pikirkan bagaimana Istana Versailles awalnya hanya sebuah pondok berburu sederhana, tetapi perhatian yang cermat terhadap dekorasi dan tata letak mengubahnya menjadi salah satu bangunan paling megah di dunia. Hari ini, kita akan mengubah terrarium Anda dari fungsional menjadi lebih rapi. Anda akan belajar bagaimana memposisikan elemen dengan tepat, membuat tata letak yang responsif terhadap berbagai ukuran layar, dan menciptakan daya tarik visual yang membuat situs web menarik. Pada akhir pelajaran ini, Anda akan melihat bagaimana penataan CSS yang strategis dapat meningkatkan proyek Anda secara dramatis. Mari tambahkan gaya pada terrarium Anda. ## Kuis Pra-Pelajaran Kuis pra-pelajaran ## Memulai dengan CSS CSS sering dianggap hanya sebagai "membuat sesuatu terlihat cantik," tetapi sebenarnya memiliki tujuan yang jauh lebih luas. CSS seperti menjadi sutradara film - Anda mengontrol tidak hanya bagaimana semuanya terlihat, tetapi juga bagaimana semuanya bergerak, merespons interaksi, dan beradaptasi dengan berbagai situasi. CSS modern sangatlah canggih. Anda dapat menulis kode yang secara otomatis menyesuaikan tata letak untuk ponsel, tablet, dan komputer desktop. Anda dapat membuat animasi halus yang mengarahkan perhatian pengguna ke tempat yang diperlukan. Hasilnya bisa sangat mengesankan ketika semuanya bekerja bersama-sama. Inilah yang akan kita capai dalam pelajaran ini: - Membuat desain visual lengkap untuk terrarium Anda menggunakan teknik CSS modern - Mengeksplorasi konsep dasar seperti cascade, inheritance, dan selektor CSS - Mengimplementasikan strategi tata letak dan posisi yang responsif - Membangun wadah terrarium menggunakan bentuk dan gaya CSS ### Prasyarat Anda harus sudah menyelesaikan struktur HTML untuk terrarium Anda dari pelajaran sebelumnya dan siap untuk diberi gaya. ### Menyiapkan File CSS Anda Sebelum kita mulai memberi gaya, kita perlu menghubungkan CSS ke HTML kita. Koneksi ini memberi tahu browser di mana menemukan instruksi gaya untuk terrarium kita. Di folder terrarium Anda, buat file baru bernama style.css, lalu tautkan di bagian <head> dokumen HTML Anda: Inilah yang dilakukan kode ini: - Membuat koneksi antara file HTML dan CSS Anda - Memberitahu browser untuk memuat dan menerapkan gaya dari style.css - Menggunakan atribut rel="stylesheet" untuk menentukan bahwa ini adalah file CSS - Merujuk jalur file dengan href="./style.css" ## Memahami CSS Cascade Pernah bertanya-tanya mengapa CSS disebut "Cascading" Style Sheets? Gaya mengalir turun seperti air terjun, dan terkadang mereka saling bertentangan. Pertimbangkan bagaimana struktur perintah militer bekerja - perintah umum mungkin mengatakan "semua pasukan memakai hijau," tetapi perintah khusus untuk unit Anda mungkin mengatakan "pakai seragam biru untuk upacara." Instruksi yang lebih spesifik memiliki prioritas. CSS mengikuti logika serupa, dan memahami hierarki ini membuat debugging jauh lebih mudah. ### Bereksperimen dengan Prioritas Cascade Mari kita lihat cascade dalam aksi dengan membuat konflik gaya. Pertama, tambahkan gaya inline ke tag <h1> Anda: Apa yang dilakukan kode ini: - Menerapkan warna merah langsung ke elemen <h1> menggunakan gaya inline - Menggunakan atribut style untuk menyematkan CSS langsung di HTML - Membuat aturan gaya prioritas tertinggi untuk elemen spesifik ini Selanjutnya, tambahkan aturan ini ke file style.css Anda: Dalam kode di atas, kita telah: - Mendefinisikan aturan CSS yang menargetkan semua elemen <h1> - Mengatur warna teks menjadi biru menggunakan stylesheet eksternal - Membuat aturan prioritas lebih rendah dibandingkan gaya inline ✅ Cek Pengetahuan: Warna apa yang ditampilkan di aplikasi web Anda? Mengapa warna itu menang? Bisakah Anda memikirkan skenario di mana Anda ingin mengganti gaya? ## CSS Inheritance dalam Praktik Pewarisan CSS bekerja seperti genetika - elemen mewarisi properti tertentu dari elemen induknya. Jika Anda mengatur keluarga font pada elemen body, semua teks di dalamnya secara otomatis menggunakan font yang sama. Ini mirip dengan bagaimana ciri khas rahang keluarga Habsburg muncul di generasi berikutnya tanpa ditentukan untuk setiap individu. Namun, tidak semuanya diwarisi. Gaya teks seperti font dan warna memang diwarisi, tetapi properti tata letak seperti margin dan border tidak. Sama seperti anak-anak mungkin mewarisi ciri fisik tetapi tidak pilihan mode orang tua mereka. ### Mengamati Pewarisan Font Mari kita lihat pewarisan dalam aksi dengan mengatur keluarga font pada elemen <body>: Memecah apa yang terjadi di sini: - Mengatur keluarga font untuk seluruh halaman dengan menargetkan elemen <body> - Menggunakan tumpukan font dengan opsi cadangan untuk kompatibilitas browser yang lebih baik - Menerapkan font sistem modern yang terlihat bagus di berbagai sistem operasi - Memastikan semua elemen anak mewarisi font ini kecuali secara khusus diganti Buka alat pengembang browser Anda (F12), navigasikan ke tab Elemen, dan inspeksi elemen <h1> Anda. Anda akan melihat bahwa elemen tersebut mewarisi keluarga font dari body: ✅ Waktu Eksperimen: Cobalah mengatur properti lain yang dapat diwarisi pada <body> seperti color, line-height, atau text-align. Apa yang terjadi pada heading dan elemen lainnya? ### 🔄 Pengecekan Pedagogis Pemahaman Dasar CSS: Sebelum melanjutkan ke selektor, pastikan Anda dapat: - ✅ Menjelaskan perbedaan antara cascade dan inheritance - ✅ Memprediksi gaya mana yang akan menang dalam konflik spesifisitas - ✅ Mengidentifikasi properti mana yang diwarisi dari elemen induk - ✅ Menghubungkan file CSS ke HTML dengan benar Tes Cepat: Jika Anda memiliki gaya ini, warna apa yang akan dimiliki <h1> di dalam <div class="special">? Jawaban: Merah (selektor elemen langsung menargetkan h1) ## Menguasai Selektor CSS Selektor CSS adalah cara Anda menargetkan elemen tertentu untuk diberi gaya. Mereka bekerja seperti memberikan petunjuk yang tepat - alih-alih mengatakan "rumah," Anda mungkin mengatakan "rumah biru dengan pintu merah di Jalan Maple." CSS menyediakan berbagai cara untuk menjadi spesifik, dan memilih selektor yang tepat seperti memilih alat yang sesuai untuk tugas. Kadang-kadang Anda perlu memberi gaya pada setiap pintu di lingkungan, dan kadang-kadang hanya satu pintu tertentu. ### Selektor Elemen (Tag) Selektor elemen menargetkan elemen HTML berdasarkan nama tag mereka. Mereka sempurna untuk mengatur gaya dasar yang berlaku secara luas di seluruh halaman Anda: Memahami gaya ini: - Mengatur tipografi konsisten di seluruh halaman dengan selektor body - Menghapus margin dan padding default browser untuk kontrol yang lebih baik - Memberi gaya semua elemen heading dengan warna, perataan, dan spasi - Menggunakan unit rem untuk ukuran font yang dapat diskalakan dan aksesibel Meskipun selektor elemen bekerja dengan baik untuk gaya umum, Anda akan membutuhkan selektor yang lebih spesifik untuk memberi gaya pada komponen individual seperti tanaman di terrarium Anda. ### Selektor ID untuk Elemen Unik Selektor ID menggunakan simbol # dan menargetkan elemen dengan atribut id tertentu. Karena ID harus unik di halaman, mereka sempurna untuk memberi gaya pada elemen individual yang spesial seperti wadah tanaman kiri dan kanan kita. Mari kita buat gaya untuk wadah sisi terrarium kita tempat tanaman akan ditempatkan: Inilah yang dicapai kode ini: - Memposisikan wadah di tepi kiri dan kanan menggunakan posisi absolute - Menggunakan unit vh (viewport height) untuk tinggi responsif yang beradaptasi dengan ukuran layar - Menerapkan box-sizing: border-box sehingga padding termasuk dalam total lebar - Menghapus unit px yang tidak perlu dari nilai nol untuk kode yang lebih bersih - Mengatur warna latar belakang yang lembut yang lebih nyaman di mata daripada abu-abu mencolok ✅ Tantangan Kualitas Kode: Perhatikan bagaimana CSS ini melanggar prinsip DRY (Don't Repeat Yourself). Bisakah Anda merombaknya menggunakan ID dan kelas? Pendekatan yang Ditingkatkan: ### Selektor Kelas untuk Gaya yang Dapat Digunakan Kembali Selektor kelas menggunakan simbol . dan sangat cocok ketika Anda ingin menerapkan gaya yang sama ke beberapa elemen. Tidak seperti ID, kelas dapat digunakan kembali di seluruh HTML Anda, menjadikannya ideal untuk pola gaya yang konsisten. Di terrarium kita, setiap tanaman membutuhkan gaya yang serupa tetapi juga membutuhkan posisi individual. Kita akan menggunakan kombinasi kelas untuk gaya bersama dan ID untuk posisi unik. Inilah struktur HTML untuk setiap tanaman: Elemen kunci dijelaskan: - Menggunakan class="plant-holder" untuk gaya wadah yang konsisten di semua tanaman - Menerapkan class="plant" untuk gaya dan perilaku gambar bersama - Menyertakan id="plant1" yang unik untuk posisi individual dan interaksi JavaScript - Memberikan teks alt deskriptif untuk aksesibilitas pembaca layar Sekarang tambahkan gaya ini ke file style.css Anda: Memecah gaya ini: - Membuat posisi relatif untuk wadah tanaman untuk membangun konteks posisi - Mengatur setiap wadah tanaman ke tinggi 13%, memastikan semua tanaman pas secara vertikal tanpa menggulir - Menggeser wadah sedikit ke kiri untuk lebih memusatkan tanaman di dalam wadah mereka - Memungkinkan tanaman untuk berskala responsif dengan properti max-width dan max-height - Menggunakan z-index untuk melapisi tanaman di atas elemen lain di terrarium - Menambahkan efek hover halus dengan transisi CSS untuk interaksi pengguna yang lebih baik ✅ Berpikir Kritis: Mengapa kita membutuhkan selektor .plant-holder dan .plant? Apa yang akan terjadi jika kita mencoba menggunakan hanya satu? ## Memahami Posisi CSS Posisi CSS seperti menjadi sutradara panggung untuk sebuah pertunjukan - Anda mengarahkan di mana setiap aktor berdiri dan bagaimana mereka bergerak di sekitar panggung. Beberapa aktor mengikuti formasi standar, sementara yang lain membutuhkan posisi spesifik untuk efek dramatis. Setelah Anda memahami posisi, banyak tantangan tata letak menjadi dapat dikelola. Membutuhkan bilah navigasi yang tetap di atas saat pengguna menggulir? Posisi menangani itu. Ingin tooltip yang muncul di lokasi tertentu? Itu juga posisi. ### Lima Nilai Posisi ### Posisi di Terrarium Kita Terrarium kita menggunakan kombinasi strategi posisi yang strategis untuk menciptakan tata letak yang diinginkan: Memahami strategi posisi: - Wadah absolut dihapus dari aliran dokumen normal dan dipasang di tepi layar - Wadah tanaman relatif menciptakan konteks posisi sambil tetap dalam aliran dokumen - Tanaman absolut dapat diposisikan dengan presisi di dalam wadah relatif mereka - Kombinasi ini memungkinkan tanaman untuk ditumpuk secara vertikal sambil dapat diposisikan secara individual ✅ Waktu Eksperimen: Cobalah mengubah nilai posisi dan amati hasilnya: - Apa yang terjadi jika Anda mengubah .container dari absolute menjadi relative? - Bagaimana tata letak berubah jika .plant-holder menggunakan absolute daripada relative? - Apa yang terjadi ketika Anda mengubah .plant ke posisi relative? ### 🔄 Pengecekan Pedagogis Penguasaan Posisi CSS: Berhenti sejenak untuk memverifikasi pemahaman Anda: - ✅ Bisakah Anda menjelaskan mengapa tanaman membutuhkan posisi absolut untuk drag-and-drop? - ✅ Apakah Anda memahami bagaimana kontainer relatif menciptakan konteks posisi? - ✅ Mengapa kontainer samping menggunakan posisi absolut? - ✅ Apa yang akan terjadi jika Anda menghapus deklarasi posisi sepenuhnya? Koneksi Dunia Nyata: Pikirkan bagaimana posisi CSS mencerminkan tata letak dunia nyata: - Static: Buku di rak (urutan alami) - Relative: Memindahkan buku sedikit tetapi tetap di tempatnya - Absolute: Meletakkan penanda di halaman tertentu - Fixed: Catatan tempel yang tetap terlihat saat Anda membalik halaman ## Membangun Terrarium dengan CSS Sekarang kita akan membuat toples kaca hanya menggunakan CSS - tanpa gambar atau perangkat lunak grafis. Menciptakan efek kaca, bayangan, dan kedalaman yang realistis menggunakan posisi dan transparansi menunjukkan kemampuan visual CSS. Teknik ini mencerminkan bagaimana arsitek dalam gerakan Bauhaus menggunakan bentuk geometris sederhana untuk menciptakan struktur yang kompleks dan indah. Setelah Anda memahami prinsip-prinsip ini, Anda akan mengenali teknik CSS di balik banyak desain web. ### Membuat Komponen Toples Kaca Mari kita bangun toples terrarium bagian demi bagian. Setiap bagian menggunakan posisi absolut dan ukuran berbasis persentase untuk desain responsif: Memahami konstruksi terrarium: - Menggunakan dimensi berbasis persentase untuk penskalaan responsif di semua ukuran layar - Memposisikan elemen secara absolut untuk menumpuk dan menyelaraskan dengan tepat - Menerapkan nilai opasitas yang berbeda untuk menciptakan efek transparansi kaca - Menggunakan z-index untuk lapisan sehingga tanaman muncul di dalam toples - Menambahkan bayangan kotak halus dan border-radius yang disempurnakan untuk tampilan yang lebih realistis ### Desain Responsif dengan Persentase Perhatikan bagaimana semua dimensi menggunakan persentase daripada nilai piksel tetap: Mengapa ini penting: - Memastikan terrarium dapat menyesuaikan secara proporsional pada ukuran layar apa pun - Mempertahankan hubungan visual antara komponen toples - Memberikan pengalaman yang konsisten dari ponsel hingga monitor desktop besar - Memungkinkan desain beradaptasi tanpa merusak tata letak visual ### Unit CSS dalam Aksi Kami menggunakan unit rem untuk border-radius, yang skalanya relatif terhadap ukuran font root. Ini menciptakan desain yang lebih mudah diakses yang menghormati preferensi font pengguna. Pelajari lebih lanjut tentang unit relatif CSS dalam spesifikasi resmi. ✅ Eksperimen Visual: Coba modifikasi nilai-nilai ini dan amati efeknya: - Ubah opasitas toples dari 0.5 menjadi 0.8 – bagaimana ini memengaruhi tampilan kaca? - Sesuaikan warna tanah dari #3a241d menjadi #8B4513 – apa dampak visualnya? - Modifikasi z-index tanah menjadi 2 – apa yang terjadi pada lapisan? ### 🔄 Pengecekan Pedagogis Pemahaman Desain Visual CSS: Konfirmasi pemahaman Anda tentang visual CSS: - ✅ Bagaimana dimensi berbasis persentase menciptakan desain responsif? - ✅ Mengapa opasitas menciptakan efek transparansi kaca? - ✅ Apa peran z-index dalam melapisi elemen? - ✅ Bagaimana nilai border-radius menciptakan bentuk toples? Prinsip Desain: Perhatikan bagaimana kita membangun visual yang kompleks dari bentuk sederhana: 1. Persegi panjang → Persegi panjang melengkung → Komponen toples 2. Warna datar → Opasitas → Efek kaca 3. Elemen individu → Komposisi berlapis → Tampilan 3D --- ## Tantangan Agen GitHub Copilot 🚀 Gunakan mode Agen untuk menyelesaikan tantangan berikut: Deskripsi: Buat animasi CSS yang membuat tanaman terrarium bergoyang perlahan, mensimulasikan efek angin alami. Ini akan membantu Anda berlatih animasi CSS, transformasi, dan keyframes sambil meningkatkan daya tarik visual terrarium Anda. Prompt: Tambahkan animasi keyframe CSS untuk membuat tanaman di terrarium bergoyang perlahan dari sisi ke sisi. Buat animasi bergoyang yang memutar setiap tanaman sedikit (2-3 derajat) ke kiri dan kanan dengan durasi 3-4 detik, dan terapkan pada kelas .plant. Pastikan animasi berulang tanpa henti dan memiliki fungsi easing untuk gerakan alami. Pelajari lebih lanjut tentang mode agen di sini. ## 🚀 Tantangan: Menambahkan Refleksi Kaca Siap meningkatkan terrarium Anda dengan refleksi kaca yang realistis? Teknik ini akan menambahkan kedalaman dan realisme pada desain. Anda akan membuat sorotan halus yang mensimulasikan bagaimana cahaya memantul dari permukaan kaca. Pendekatan ini mirip dengan bagaimana pelukis Renaisans seperti Jan van Eyck menggunakan cahaya dan refleksi untuk membuat kaca yang dilukis tampak tiga dimensi. Berikut adalah tujuan Anda: Tantangan Anda: - Buat bentuk oval putih atau berwarna terang untuk refleksi kaca - Posisikan mereka secara strategis di sisi kiri toples - Terapkan efek opasitas dan blur yang sesuai untuk refleksi cahaya yang realistis - Gunakan border-radius untuk menciptakan bentuk organik seperti gelembung - Eksperimen dengan gradien atau bayangan kotak untuk realisme yang lebih baik ## Kuis Pasca-Pelajaran Kuis pasca-pelajaran ## Perluas Pengetahuan CSS Anda CSS mungkin terasa rumit pada awalnya, tetapi memahami konsep inti ini memberikan dasar yang kuat untuk teknik yang lebih maju. Area pembelajaran CSS Anda berikutnya: - Flexbox - menyederhanakan penyelarasan dan distribusi elemen - CSS Grid - menyediakan alat yang kuat untuk membuat tata letak yang kompleks - CSS Variables - mengurangi pengulangan dan meningkatkan pemeliharaan - Desain responsif - memastikan situs bekerja dengan baik di berbagai ukuran layar ### Sumber Belajar Interaktif Latih konsep-konsep ini dengan permainan interaktif yang menarik: - 🐸 Flexbox Froggy - Kuasai Flexbox melalui tantangan yang menyenangkan - 🌱 Grid Garden - Pelajari CSS Grid dengan menanam wortel virtual - 🎯 CSS Battle - Uji keterampilan CSS Anda dengan tantangan coding ### Pembelajaran Tambahan Untuk dasar-dasar CSS yang komprehensif, selesaikan modul Microsoft Learn ini: Style your HTML app with CSS ### ⚡ Apa yang Bisa Anda Lakukan dalam 5 Menit Berikutnya - [ ] Buka DevTools dan inspeksi gaya CSS di situs web mana pun menggunakan panel Elemen - [ ] Buat file CSS sederhana dan tautkan ke halaman HTML - [ ] Coba ubah warna menggunakan metode yang berbeda: hex, RGB, dan nama warna - [ ] Latih model kotak dengan menambahkan padding dan margin ke div ### 🎯 Apa yang Bisa Anda Capai dalam Satu Jam - [ ] Selesaikan kuis pasca-pelajaran dan tinjau dasar-dasar CSS - [ ] Gaya halaman HTML Anda dengan font, warna, dan spasi - [ ] Buat tata letak sederhana menggunakan flexbox atau grid - [ ] Eksperimen dengan transisi CSS untuk efek yang halus - [ ] Latih desain responsif dengan media queries ### 📅 Petualangan CSS Anda Selama Seminggu - [ ] Selesaikan tugas styling terrarium dengan kreativitas - [ ] Kuasai CSS Grid dengan membuat tata letak galeri foto - [ ] Pelajari animasi CSS untuk menghidupkan desain Anda - [ ] Jelajahi preprocessor CSS seperti Sass atau Less - [ ] Pelajari prinsip desain dan terapkan pada CSS Anda - [ ] Analisis dan buat ulang desain menarik yang Anda temukan online ### 🌟 Penguasaan Desain Anda Selama Sebulan - [ ] Bangun sistem desain situs web responsif yang lengkap - [ ] Pelajari CSS-in-JS atau framework berbasis utilitas seperti Tailwind - [ ] Berkontribusi pada proyek open source dengan perbaikan CSS - [ ] Kuasai konsep CSS tingkat lanjut seperti properti kustom CSS dan containment - [ ] Buat pustaka komponen yang dapat digunakan kembali dengan CSS modular - [ ] Mentor orang lain yang belajar CSS dan bagikan pengetahuan desain ## 🎯 Garis Waktu Penguasaan CSS Anda ### 🛠️ Ringkasan Toolkit CSS Anda Setelah menyelesaikan pelajaran ini, Anda sekarang memiliki: - Pemahaman Cascade: Bagaimana gaya mewarisi dan menimpa satu sama lain - Penguasaan Selector: Penargetan presisi dengan elemen, kelas, dan ID - Keterampilan Posisi: Penempatan dan pelapisan elemen yang strategis - Desain Visual: Menciptakan efek kaca, bayangan, dan transparansi - Teknik Responsif: Tata letak berbasis persentase yang beradaptasi dengan layar apa pun - Organisasi Kode: Struktur CSS yang bersih dan mudah dipelihara - Praktik Modern: Menggunakan unit relatif dan pola desain yang dapat diakses Langkah Berikutnya: Terrarium Anda sekarang memiliki struktur (HTML) dan gaya (CSS). Pelajaran terakhir akan menambahkan interaktivitas dengan JavaScript! ## Tugas Refactoring CSS --- Penafian: Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI Co-op Translator. Meskipun kami berusaha untuk memberikan hasil yang akurat, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang penting, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau interpretasi yang keliru yang timbul dari penggunaan terjemahan ini.
Progetto Terrario Parte 1: Introduzione a HTML
HTML, o HyperText Markup Language, è la base di ogni sito web che tu abbia mai visitato. Pensa a HTML come allo scheletro che dà struttura alle pagine web – definisce dove va il contenuto, come è organizzato e cosa rappresenta ogni elemento. Mentre CSS "vestirà" il tuo HTML con colori e layout, e JavaScript lo animerà con interattività, HTML fornisce la struttura essenziale che rende tutto il resto possibile. In questa lezione, creerai la struttura HTML per un'interfaccia di terrario virtuale. Questo progetto pratico ti insegnerà i concetti fondamentali di HTML mentre costruisci qualcosa di visivamente accattivante. Imparerai come organizzare il contenuto utilizzando elementi semantici, lavorare con immagini e creare la base per un'applicazione web interattiva. Alla fine di questa lezione, avrai una pagina HTML funzionante che mostra immagini di piante organizzate in colonne, pronta per essere stilizzata nella prossima lezione. Non preoccuparti se all'inizio sembra semplice – è esattamente ciò che HTML dovrebbe fare prima che CSS aggiunga il tocco visivo. ## Quiz Pre-Lezione Quiz pre-lezione ## Configurare il Progetto Prima di immergerci nel codice HTML, configuriamo uno spazio di lavoro adeguato per il tuo progetto terrario. Creare una struttura di file organizzata fin dall'inizio è un'abitudine cruciale che ti servirà durante il tuo percorso di sviluppo web. ### Compito: Crea la Struttura del Progetto Creerai una cartella dedicata per il tuo progetto terrario e aggiungerai il tuo primo file HTML. Ecco due approcci che puoi utilizzare: Opzione 1: Usare Visual Studio Code 1. Apri Visual Studio Code 2. Clicca su "File" → "Apri Cartella" o usa Ctrl+K, Ctrl+O (Windows/Linux) o Cmd+K, Cmd+O (Mac) 3. Crea una nuova cartella chiamata terrarium e selezionala 4. Nel pannello Esplora, clicca sull'icona "Nuovo File" 5. Nomina il file index.html Opzione 2: Usare Comandi del Terminale Ecco cosa fanno questi comandi: - Creano una nuova directory chiamata terrarium per il tuo progetto - Navigano nella directory del terrario - Creano un file vuoto index.html - Aprono il file in Visual Studio Code per la modifica ## Comprendere la Struttura del Documento HTML Ogni documento HTML segue una struttura specifica che i browser devono comprendere e visualizzare correttamente. Pensa a questa struttura come a una lettera formale – ha elementi richiesti in un ordine particolare che aiutano il destinatario (in questo caso, il browser) a elaborare correttamente il contenuto. Iniziamo aggiungendo la base essenziale che ogni documento HTML necessita. ### La Dichiarazione DOCTYPE e l'Elemento Radice Le prime due righe di qualsiasi file HTML servono come "introduzione" del documento al browser: Comprendere cosa fa questo codice: - Dichiara il tipo di documento come HTML5 usando <!DOCTYPE html> - Crea l'elemento radice <html> che conterrà tutto il contenuto della pagina - Stabilisce standard web moderni per un rendering corretto del browser - Garantisce una visualizzazione coerente su diversi browser e dispositivi ### 🔄 Verifica Pedagogica Pausa e Riflettici: Prima di continuare, assicurati di comprendere: - ✅ Perché ogni documento HTML necessita di una dichiarazione DOCTYPE - ✅ Cosa contiene l'elemento radice <html> - ✅ Come questa struttura aiuta i browser a rendere correttamente le pagine Test Rapido: Riesci a spiegare con parole tue cosa significa "rendering conforme agli standard"? ## Aggiungere Metadati Essenziali al Documento La sezione <head> di un documento HTML contiene informazioni cruciali che i browser e i motori di ricerca necessitano, ma che i visitatori non vedono direttamente sulla pagina. Pensa a questa sezione come alle "informazioni dietro le quinte" che aiutano la tua pagina web a funzionare correttamente e ad apparire correttamente su diversi dispositivi e piattaforme. Questi metadati dicono ai browser come visualizzare la tua pagina, quale codifica dei caratteri utilizzare e come gestire diverse dimensioni dello schermo – tutto essenziale per creare pagine web professionali e accessibili. ### Compito: Aggiungi la Sezione Head del Documento Inserisci questa sezione <head> tra i tag di apertura e chiusura <html>: Analisi di ciò che ogni elemento realizza: - Imposta il titolo della pagina che appare nelle schede del browser e nei risultati di ricerca - Specifica la codifica dei caratteri UTF-8 per una corretta visualizzazione del testo in tutto il mondo - Garantisce la compatibilità con le versioni moderne di Internet Explorer - Configura il design responsivo impostando il viewport per adattarsi alla larghezza del dispositivo - Controlla il livello di zoom iniziale per visualizzare il contenuto a dimensioni naturali ## Costruire il Corpo del Documento L'elemento <body> contiene tutto il contenuto visibile della tua pagina web – tutto ciò che gli utenti vedranno e con cui interagiranno. Mentre la sezione <head> forniva istruzioni al browser, la sezione <body> contiene il contenuto effettivo: testo, immagini, pulsanti e altri elementi che creano la tua interfaccia utente. Aggiungiamo la struttura del corpo e comprendiamo come i tag HTML lavorano insieme per creare contenuti significativi. ### Comprendere la Struttura dei Tag HTML HTML utilizza tag accoppiati per definire gli elementi. La maggior parte dei tag ha un tag di apertura come <p> e un tag di chiusura come </p>, con il contenuto nel mezzo: <p>Ciao, mondo!</p>. Questo crea un elemento paragrafo contenente il testo "Ciao, mondo!". ### Compito: Aggiungi l'Elemento Body Aggiorna il tuo file HTML per includere l'elemento <body>: Ecco cosa fornisce questa struttura completa: - Stabilisce il framework di base del documento HTML5 - Include metadati essenziali per un rendering corretto del browser - Crea un corpo vuoto pronto per il tuo contenuto visibile - Segue le migliori pratiche dello sviluppo web moderno Ora sei pronto per aggiungere gli elementi visibili del tuo terrario. Utilizzeremo elementi <div> come contenitori per organizzare diverse sezioni di contenuto e <img> per visualizzare le immagini delle piante. ### Lavorare con Immagini e Contenitori di Layout Le immagini sono speciali in HTML perché utilizzano tag "auto-chiudenti". A differenza di elementi come <p></p> che avvolgono il contenuto, il tag <img> contiene tutte le informazioni necessarie all'interno del tag stesso utilizzando attributi come src per il percorso del file immagine e alt per l'accessibilità. Prima di aggiungere immagini al tuo HTML, dovrai organizzare correttamente i file del progetto creando una cartella immagini e aggiungendo le grafiche delle piante. Prima, configura le tue immagini: 1. Crea una cartella chiamata images all'interno della cartella del progetto terrario 2. Scarica le immagini delle piante dalla cartella delle soluzioni (14 immagini di piante in totale) 3. Copia tutte le immagini delle piante nella tua nuova cartella images ### Compito: Crea il Layout di Visualizzazione delle Piante Ora aggiungi le immagini delle piante organizzate in due colonne tra i tuoi tag <body></body>: Passo dopo passo, ecco cosa accade in questo codice: - Crea un contenitore principale della pagina con id="page" per contenere tutto il contenuto - Stabilisce due contenitori di colonne: left-container e right-container - Organizza 7 piante nella colonna sinistra e 7 piante nella colonna destra - Avvolge ogni immagine di pianta in un div plant-holder per il posizionamento individuale - Applica nomi di classi coerenti per la stilizzazione CSS nella prossima lezione - Assegna ID univoci a ogni immagine di pianta per l'interazione con JavaScript in seguito - Include percorsi di file corretti che puntano alla cartella immagini ### 🔄 Verifica Pedagogica Comprensione della Struttura: Prenditi un momento per rivedere la tua struttura HTML: - ✅ Riesci a identificare i contenitori principali nel tuo layout? - ✅ Capisci perché ogni immagine ha un ID univoco? - ✅ Come descriveresti lo scopo dei div plant-holder? Ispezione Visiva: Apri il tuo file HTML in un browser. Dovresti vedere: - Un elenco di immagini di piante - Immagini organizzate in due colonne - Layout semplice e non stilizzato Ricorda: Questo aspetto semplice è esattamente ciò che HTML dovrebbe avere prima della stilizzazione CSS! Con questo markup aggiunto, le piante appariranno sullo schermo, anche se non sembreranno ancora rifinite – per questo ci sarà il CSS nella prossima lezione! Per ora, hai una solida base HTML che organizza correttamente il tuo contenuto e segue le migliori pratiche di accessibilità. ## Usare HTML Semantico per l'Accessibilità HTML semantico significa scegliere gli elementi HTML in base al loro significato e scopo, non solo al loro aspetto. Quando utilizzi un markup semantico, stai comunicando la struttura e il significato del tuo contenuto ai browser, ai motori di ricerca e alle tecnologie assistive come i lettori di schermo. Questo approccio rende i tuoi siti web più accessibili agli utenti con disabilità e aiuta i motori di ricerca a comprendere meglio il tuo contenuto. È un principio fondamentale dello sviluppo web moderno che crea esperienze migliori per tutti. ### Aggiungere un Titolo Semantico alla Pagina Aggiungiamo un titolo adeguato alla tua pagina terrario. Inserisci questa riga subito dopo il tag di apertura <body>: Perché il markup semantico è importante: - Aiuta i lettori di schermo a navigare e comprendere la struttura della pagina - Migliora l'ottimizzazione per i motori di ricerca (SEO) chiarendo la gerarchia del contenuto - Aumenta l'accessibilità per gli utenti con disabilità visive o differenze cognitive - Crea esperienze utente migliori su tutti i dispositivi e piattaforme - Segue gli standard web e le migliori pratiche per uno sviluppo professionale Esempi di scelte semantiche vs. non semantiche: ## Creare il Contenitore del Terrario Ora aggiungiamo la struttura HTML per il terrario stesso – il contenitore di vetro dove le piante saranno posizionate. Questa sezione dimostra un concetto importante: HTML fornisce la struttura, ma senza la stilizzazione CSS, questi elementi non saranno ancora visibili. Il markup del terrario utilizza nomi di classi descrittivi che renderanno la stilizzazione CSS intuitiva e facile da mantenere nella prossima lezione. ### Compito: Aggiungi la Struttura del Terrario Inserisci questo markup sopra l'ultimo tag </div> (prima del tag di chiusura del contenitore della pagina): Comprendere questa struttura del terrario: - Crea un contenitore principale del terrario con un ID univoco per la stilizzazione - Definisce elementi separati per ogni componente visivo (parte superiore, pareti, terra, fondo) - Include elementi annidati per effetti di riflessione del vetro (elementi lucidi) - Utilizza nomi di classi descrittivi che indicano chiaramente lo scopo di ogni elemento - Prepara la struttura per lo stile CSS che creerà l'aspetto del terrario in vetro ### 🔄 Verifica Pedagogica Padronanza della Struttura HTML: Prima di procedere, assicurati di poter: - ✅ Spiegare la differenza tra struttura HTML e aspetto visivo - ✅ Identificare gli elementi HTML semantici rispetto a quelli non semantici - ✅ Descrivere come un markup corretto migliori l'accessibilità - ✅ Riconoscere la struttura completa dell'albero del documento Testa la tua comprensione: Prova ad aprire il tuo file HTML in un browser con JavaScript disabilitato e CSS rimosso. Questo ti mostrerà la struttura semantica pura che hai creato! --- ## Sfida dell'Agente GitHub Copilot Usa la modalità Agente per completare la seguente sfida: Descrizione: Crea una struttura HTML semantica per una sezione di guida alla cura delle piante che potrebbe essere aggiunta al progetto del terrario. Prompt: Crea una sezione HTML semantica che includa un'intestazione principale "Guida alla Cura delle Piante", tre sottosezioni con intestazioni "Irrigazione", "Requisiti di Luce" e "Cura del Terreno", ciascuna contenente un paragrafo di informazioni sulla cura delle piante. Usa tag HTML semantici appropriati come <section>, <h2>, <h3> e <p> per strutturare il contenuto correttamente. Scopri di più sulla modalità agente qui. ## Sfida sulla Storia dell'HTML Imparare sull'Evoluzione del Web L'HTML si è evoluto significativamente da quando Tim Berners-Lee ha creato il primo browser web al CERN nel 1990. Alcuni tag più vecchi come <marquee> sono ora deprecati perché non funzionano bene con gli standard moderni di accessibilità e design responsivo. Prova Questo Esperimento: 1. Avvolgi temporaneamente il tuo titolo <h1> in un tag <marquee>: <marquee><h1>Il Mio Terrario</h1></marquee> 2. Apri la tua pagina in un browser e osserva l'effetto di scorrimento 3. Considera perché questo tag è stato deprecato (suggerimento: pensa all'esperienza utente e all'accessibilità) 4. Rimuovi il tag <marquee> e torna al markup semantico Domande di Riflessione: - Come potrebbe un titolo scorrevole influenzare gli utenti con disabilità visive o sensibilità al movimento? - Quali tecniche moderne di CSS potrebbero ottenere effetti visivi simili in modo più accessibile? - Perché è importante utilizzare gli standard web attuali invece di elementi deprecati? Scopri di più sugli elementi HTML obsoleti e deprecati per capire come gli standard web si evolvono per migliorare l'esperienza utente. ## Quiz Post-Lezione Quiz post-lezione ## Revisione e Studio Autonomo Approfondisci la tua conoscenza dell'HTML L'HTML è stato il fondamento del web per oltre 30 anni, evolvendosi da un semplice linguaggio di markup per documenti a una piattaforma sofisticata per costruire applicazioni interattive. Comprendere questa evoluzione ti aiuta ad apprezzare gli standard web moderni e a prendere decisioni di sviluppo migliori. Percorsi di Apprendimento Consigliati: 1. Storia ed Evoluzione dell'HTML - Ricerca la timeline da HTML 1.0 a HTML5 - Esplora perché alcuni tag sono stati deprecati (accessibilità, compatibilità mobile, manutenibilità) - Indaga sulle nuove funzionalità HTML emergenti e sulle proposte 2. Approfondimento sull'HTML Semantico - Studia l'elenco completo degli elementi semantici HTML5 - Pratica l'identificazione di quando utilizzare <article>, <section>, <aside> e <main> - Impara gli attributi ARIA per migliorare l'accessibilità 3. Sviluppo Web Moderno - Esplora la creazione di siti web responsivi su Microsoft Learn - Comprendi come l'HTML si integra con CSS e JavaScript - Impara le migliori pratiche per le prestazioni web e la SEO Domande di Riflessione: - Quali tag HTML deprecati hai scoperto e perché sono stati rimossi? - Quali nuove funzionalità HTML sono proposte per le versioni future? - Come contribuisce l'HTML semantico all'accessibilità web e alla SEO? ### ⚡ Cosa Puoi Fare nei Prossimi 5 Minuti - [ ] Apri DevTools (F12) e ispeziona la struttura HTML del tuo sito web preferito - [ ] Crea un semplice file HTML con tag di base: <h1>, <p> e <img> - [ ] Valida il tuo HTML utilizzando il Validatore HTML W3C online - [ ] Prova ad aggiungere un commento al tuo HTML usando <!-- commento --> ### 🎯 Cosa Puoi Realizzare in Quest'ora - [ ] Completa il quiz post-lezione e rivedi i concetti di HTML semantico - [ ] Costruisci una semplice pagina web su di te utilizzando una struttura HTML corretta - [ ] Sperimenta con diversi livelli di intestazione e tag di formattazione del testo - [ ] Aggiungi immagini e link per praticare l'integrazione multimediale - [ ] Ricerca funzionalità HTML5 che non hai ancora provato ### 📅 Il Tuo Viaggio HTML di Una Settimana - [ ] Completa l'assegnazione del progetto terrario con markup semantico - [ ] Crea una pagina web accessibile utilizzando etichette e ruoli ARIA - [ ] Pratica la creazione di moduli con vari tipi di input - [ ] Esplora le API HTML5 come localStorage o geolocalizzazione - [ ] Studia modelli HTML responsivi e design mobile-first - [ ] Rivedi il codice HTML di altri sviluppatori per le migliori pratiche ### 🌟 Il Tuo Mese di Fondamenti Web - [ ] Costruisci un sito web portfolio che mostri la tua padronanza dell'HTML - [ ] Impara il templating HTML con un framework come Handlebars - [ ] Contribuisci a progetti open source migliorando la documentazione HTML - [ ] Padroneggia concetti HTML avanzati come gli elementi personalizzati - [ ] Integra l'HTML con framework CSS e librerie JavaScript - [ ] Mentora altri che stanno imparando i fondamenti dell'HTML ## 🎯 La Tua Timeline di Padronanza HTML ### 🛠️ Riepilogo del Tuo Toolkit HTML Dopo aver completato questa lezione, ora hai: - Struttura del Documento: Fondazione completa HTML5 con DOCTYPE corretto - Markup Semantico: Tag significativi che migliorano l'accessibilità e la SEO - Integrazione Immagini: Pratiche corrette di organizzazione file e testo alternativo - Contenitori di Layout: Uso strategico di div con nomi di classe descrittivi - Consapevolezza dell'Accessibilità: Comprensione della navigazione con screen reader - Standard Moderni: Pratiche HTML5 attuali e conoscenza dei tag deprecati - Fondazione del Progetto: Base solida per lo stile CSS e l'interattività JavaScript Prossimi Passi: La tua struttura HTML è pronta per lo stile CSS! La fondazione semantica che hai costruito renderà la prossima lezione molto più facile da comprendere. ## Compito Pratica il tuo HTML: Crea un mockup di blog --- Disclaimer: Questo documento è stato tradotto utilizzando il servizio di traduzione AI Co-op Translator. Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.
Progetto Terrarium Parte 2: Introduzione al CSS
Ricordi com'era il tuo terrarium HTML, piuttosto semplice? Con il CSS possiamo trasformare quella struttura essenziale in qualcosa di visivamente accattivante. Se l'HTML è come costruire la struttura di una casa, allora il CSS è tutto ciò che la rende accogliente: i colori delle pareti, la disposizione dei mobili, l'illuminazione e il modo in cui le stanze si collegano tra loro. Pensa a come il Palazzo di Versailles è passato da un semplice padiglione di caccia a uno degli edifici più magnifici del mondo grazie alla cura per la decorazione e il layout. Oggi trasformeremo il tuo terrarium da funzionale a raffinato. Imparerai a posizionare gli elementi con precisione, a creare layout che si adattano a diverse dimensioni dello schermo e a creare un'attrattiva visiva che rende i siti web coinvolgenti. Alla fine di questa lezione, vedrai come uno stile CSS strategico può migliorare notevolmente il tuo progetto. Aggiungiamo un po' di stile al tuo terrarium. ## Quiz Pre-Lettura Quiz pre-lettura ## Introduzione al CSS Il CSS viene spesso considerato solo come un modo per "rendere le cose belle", ma ha uno scopo molto più ampio. Il CSS è come essere il regista di un film: controlli non solo l'aspetto di tutto, ma anche il movimento, la risposta all'interazione e l'adattamento a diverse situazioni. Il CSS moderno è incredibilmente potente. Puoi scrivere codice che adatta automaticamente i layout per telefoni, tablet e computer desktop. Puoi creare animazioni fluide che guidano l'attenzione degli utenti dove necessario. I risultati possono essere davvero impressionanti quando tutto funziona insieme. Ecco cosa realizzeremo in questa lezione: - Creare un design visivo completo per il tuo terrarium utilizzando tecniche CSS moderne - Esplorare concetti fondamentali come la cascata, l'ereditarietà e i selettori CSS - Implementare strategie di posizionamento e layout responsive - Costruire il contenitore del terrarium utilizzando forme e stili CSS ### Prerequisiti Dovresti aver completato la struttura HTML del tuo terrarium dalla lezione precedente e averla pronta per essere stilizzata. ### Configurare il File CSS Prima di iniziare a stilizzare, dobbiamo collegare il CSS al nostro HTML. Questo collegamento indica al browser dove trovare le istruzioni di stile per il nostro terrarium. Nella cartella del tuo terrarium, crea un nuovo file chiamato style.css, quindi collegalo nella sezione <head> del tuo documento HTML: Ecco cosa fa questo codice: - Crea un collegamento tra i file HTML e CSS - Indica al browser di caricare e applicare gli stili da style.css - Utilizza l'attributo rel="stylesheet" per specificare che si tratta di un file CSS - Riferisce il percorso del file con href="./style.css" ## Comprendere la Cascata del CSS Ti sei mai chiesto perché il CSS si chiama "Cascading" Style Sheets? Gli stili si propagano come una cascata e a volte entrano in conflitto tra loro. Pensa a come funzionano le strutture di comando militari: un ordine generale potrebbe dire "tutte le truppe indossano il verde", ma un ordine specifico per la tua unità potrebbe dire "indossate l'uniforme blu per la cerimonia". L'istruzione più specifica ha la precedenza. Il CSS segue una logica simile, e comprendere questa gerarchia rende il debug molto più gestibile. ### Sperimentare con la Priorità della Cascata Vediamo la cascata in azione creando un conflitto di stile. Per prima cosa, aggiungi uno stile inline al tuo tag <h1>: Cosa fa questo codice: - Applica un colore rosso direttamente all'elemento <h1> utilizzando lo stile inline - Utilizza l'attributo style per incorporare il CSS direttamente nell'HTML - Crea la regola di stile con la priorità più alta per questo specifico elemento Successivamente, aggiungi questa regola al tuo file style.css: Nel codice sopra, abbiamo: - Definito una regola CSS che prende di mira tutti gli elementi <h1> - Impostato il colore del testo su blu utilizzando un foglio di stile esterno - Creato una regola di priorità inferiore rispetto agli stili inline ✅ Verifica della Conoscenza: Quale colore viene visualizzato nella tua app web? Perché quel colore ha la precedenza? Riesci a pensare a scenari in cui potresti voler sovrascrivere gli stili? ## L'Ereditarietà del CSS in Azione L'ereditarietà del CSS funziona come la genetica: gli elementi ereditano alcune proprietà dai loro elementi genitori. Se imposti la famiglia di font sull'elemento body, tutto il testo all'interno utilizzerà automaticamente lo stesso font. È simile a come la caratteristica distintiva della mascella della famiglia degli Asburgo è apparsa attraverso le generazioni senza essere specificata per ogni individuo. Tuttavia, non tutto viene ereditato. Gli stili di testo come i font e i colori vengono ereditati, ma le proprietà di layout come margini e bordi no. Proprio come i figli possono ereditare tratti fisici ma non le scelte di moda dei genitori. ### Osservare l'Ereditarietà dei Font Vediamo l'ereditarietà in azione impostando una famiglia di font sull'elemento <body>: Analisi di ciò che accade qui: - Imposta la famiglia di font per l'intera pagina prendendo di mira l'elemento <body> - Utilizza uno stack di font con opzioni di fallback per una migliore compatibilità tra browser - Applica font di sistema moderni che appaiono ottimi su diversi sistemi operativi - Garantisce che tutti gli elementi figli ereditino questo font a meno che non venga specificamente sovrascritto Apri gli strumenti per sviluppatori del tuo browser (F12), vai alla scheda Elementi e ispeziona il tuo elemento <h1>. Vedrai che eredita la famiglia di font dal body: ✅ Tempo di Esperimento: Prova a impostare altre proprietà ereditabili sul <body> come color, line-height o text-align. Cosa succede al tuo titolo e agli altri elementi? ### 🔄 Verifica Pedagogica Comprensione delle Basi del CSS: Prima di passare ai selettori, assicurati di poter: - ✅ Spiegare la differenza tra cascata ed ereditarietà - ✅ Prevedere quale stile vincerà in un conflitto di specificità - ✅ Identificare quali proprietà vengono ereditate dagli elementi genitori - ✅ Collegare correttamente i file CSS all'HTML Test Rapido: Se hai questi stili, di che colore sarà un <h1> all'interno di un <div class="special">? Risposta: Rosso (il selettore dell'elemento prende direttamente di mira h1) ## Padroneggiare i Selettori CSS I selettori CSS sono il tuo modo per prendere di mira specifici elementi da stilizzare. Funzionano come dare indicazioni precise: invece di dire "la casa", potresti dire "la casa blu con la porta rossa in via Maple". Il CSS offre diversi modi per essere specifici, e scegliere il selettore giusto è come scegliere lo strumento appropriato per il compito. A volte devi stilizzare ogni porta del quartiere, altre volte solo una porta specifica. ### Selettori di Elementi (Tag) I selettori di elementi prendono di mira gli elementi HTML in base al loro nome di tag. Sono perfetti per impostare stili di base che si applicano ampiamente alla tua pagina: Comprendere questi stili: - Imposta una tipografia coerente su tutta la pagina con il selettore body - Rimuove i margini e i padding predefiniti del browser per un controllo migliore - Stilizza tutti gli elementi di intestazione con colore, allineamento e spaziatura - Utilizza unità rem per dimensioni dei font scalabili e accessibili Mentre i selettori di elementi funzionano bene per lo stile generale, avrai bisogno di selettori più specifici per stilizzare componenti individuali come le piante nel tuo terrarium. ### Selettori ID per Elementi Unici I selettori ID utilizzano il simbolo # e prendono di mira elementi con attributi id specifici. Poiché gli ID devono essere unici in una pagina, sono perfetti per stilizzare elementi individuali e speciali come i contenitori delle piante a sinistra e a destra. Creiamo lo stile per i contenitori laterali del nostro terrarium dove vivranno le piante: Ecco cosa realizza questo codice: - Posiziona i contenitori ai bordi estremi sinistro e destro utilizzando il posizionamento absolute - Utilizza unità vh (altezza della finestra) per un'altezza responsive che si adatta alla dimensione dello schermo - Applica box-sizing: border-box in modo che il padding sia incluso nella larghezza totale - Rimuove unità px inutili dai valori zero per un codice più pulito - Imposta un colore di sfondo sottile più gradevole rispetto al grigio intenso ✅ Sfida di Qualità del Codice: Nota come questo CSS viola il principio DRY (Don't Repeat Yourself). Riesci a rifattorizzarlo utilizzando sia un ID che una classe? Approccio migliorato: ### Selettori di Classi per Stili Riutilizzabili I selettori di classi utilizzano il simbolo . e sono perfetti quando vuoi applicare gli stessi stili a più elementi. A differenza degli ID, le classi possono essere riutilizzate in tutto il tuo HTML, rendendole ideali per modelli di stile coerenti. Nel nostro terrarium, ogni pianta necessita di uno stile simile ma anche di un posizionamento individuale. Utilizzeremo una combinazione di classi per stili condivisi e ID per il posizionamento unico. Ecco la struttura HTML per ogni pianta: Elementi chiave spiegati: - Utilizza class="plant-holder" per uno stile coerente del contenitore tra tutte le piante - Applica class="plant" per lo stile e il comportamento condivisi delle immagini - Include univoco id="plant1" per il posizionamento individuale e l'interazione JavaScript - Fornisce testo alternativo descrittivo per l'accessibilità dei lettori di schermo Ora aggiungi questi stili al tuo file style.css: Analisi di questi stili: - Crea un posizionamento relativo per il contenitore della pianta per stabilire un contesto di posizionamento - Imposta ogni contenitore della pianta al 13% di altezza, garantendo che tutte le piante si adattino verticalmente senza scorrimento - Sposta leggermente i contenitori a sinistra per centrare meglio le piante nei loro contenitori - Permette alle piante di scalare in modo responsive con le proprietà max-width e max-height - Utilizza z-index per stratificare le piante sopra altri elementi nel terrarium - Aggiunge un effetto hover sottile con transizioni CSS per una migliore interazione con l'utente ✅ Pensiero Critico: Perché abbiamo bisogno sia dei selettori .plant-holder che .plant? Cosa accadrebbe se provassimo a usarne solo uno? ## Comprendere il Posizionamento CSS Il posizionamento CSS è come essere il direttore di scena di uno spettacolo: dirigi dove ogni attore si trova e come si muove sul palco. Alcuni attori seguono la formazione standard, mentre altri necessitano di un posizionamento specifico per un effetto drammatico. Una volta compreso il posizionamento, molte sfide di layout diventano gestibili. Hai bisogno di una barra di navigazione che rimanga in alto mentre gli utenti scorrono? Il posizionamento lo gestisce. Vuoi un tooltip che appaia in una posizione specifica? Anche quello è possibile con il posizionamento. ### I Cinque Valori di Posizionamento ### Posizionamento nel Nostro Terrarium Il nostro terrarium utilizza una combinazione strategica di tipi di posizionamento per creare il layout desiderato: Comprendere la strategia di posizionamento: - Contenitori assoluti sono rimossi dal flusso normale del documento e fissati ai bordi dello schermo - Contenitori relativi delle piante creano un contesto di posizionamento rimanendo nel flusso del documento - Piante assolute possono essere posizionate con precisione all'interno dei loro contenitori relativi - Questa combinazione permette alle piante di impilarsi verticalmente pur essendo posizionabili individualmente ✅ Tempo di Esperimento: Prova a cambiare i valori di posizionamento e osserva i risultati: - Cosa succede se cambi .container da absolute a relative? - Come cambia il layout se .plant-holder utilizza absolute invece di relative? - Cosa succede quando si passa .plant a un posizionamento relative? ### 🔄 Verifica Pedagogica Padronanza del posizionamento CSS: Fermati per verificare la tua comprensione: - ✅ Sai spiegare perché le piante necessitano di un posizionamento assoluto per il drag-and-drop? - ✅ Comprendi come i contenitori relativi creano un contesto di posizionamento? - ✅ Perché i contenitori laterali utilizzano il posizionamento assoluto? - ✅ Cosa accadrebbe se rimuovessi completamente le dichiarazioni di posizionamento? Connessione con il mondo reale: Pensa a come il posizionamento CSS rispecchia il layout del mondo reale: - Statico: Libri su uno scaffale (ordine naturale) - Relativo: Spostare leggermente un libro mantenendo la sua posizione - Assoluto: Posizionare un segnalibro su una pagina precisa - Fisso: Un post-it che rimane visibile mentre sfogli le pagine ## Costruire il terrario con CSS Ora costruiremo un barattolo di vetro utilizzando solo CSS - senza immagini o software grafici. Creare un vetro realistico, ombre e effetti di profondità utilizzando posizionamento e trasparenza dimostra le capacità visive del CSS. Questa tecnica rispecchia il modo in cui gli architetti del movimento Bauhaus utilizzavano forme geometriche semplici per creare strutture complesse e belle. Una volta comprese queste basi, riconoscerai le tecniche CSS dietro molti design web. ### Creare i componenti del barattolo di vetro Costruiamo il barattolo del terrario pezzo per pezzo. Ogni parte utilizza il posizionamento assoluto e dimensioni basate su percentuali per un design responsivo: Comprendere la costruzione del terrario: - Utilizza dimensioni basate su percentuali per una scalabilità responsiva su tutti i dispositivi - Posiziona gli elementi in modo assoluto per impilarli e allinearli con precisione - Applica valori di opacità diversi per creare l'effetto di trasparenza del vetro - Implementa il layering con z-index per far apparire le piante all'interno del barattolo - Aggiunge ombre sottili e bordi arrotondati per un aspetto più realistico ### Design responsivo con percentuali Nota come tutte le dimensioni utilizzano percentuali invece di valori fissi in pixel: Perché è importante: - Garantisce che il terrario si ridimensioni proporzionalmente su qualsiasi dimensione dello schermo - Mantiene le relazioni visive tra i componenti del barattolo - Fornisce un'esperienza coerente dai telefoni cellulari ai grandi monitor desktop - Permette al design di adattarsi senza rompere il layout visivo ### Unità CSS in azione Stiamo utilizzando unità rem per il border-radius, che si scalano in base alla dimensione del font radice. Questo crea design più accessibili che rispettano le preferenze di dimensione del font dell'utente. Scopri di più sulle unità relative CSS nella specifica ufficiale. ✅ Esperimenti visivi: Prova a modificare questi valori e osserva gli effetti: - Cambia l'opacità del barattolo da 0.5 a 0.8 – come influisce sull'aspetto del vetro? - Modifica il colore della terra da #3a241d a #8B4513 – quale impatto visivo ha? - Cambia il z-index della terra a 2 – cosa succede al layering? ### 🔄 Verifica Pedagogica Comprensione del design visivo CSS: Conferma la tua comprensione del CSS visivo: - ✅ Come le dimensioni basate su percentuali creano un design responsivo? - ✅ Perché l'opacità crea l'effetto di trasparenza del vetro? - ✅ Qual è il ruolo dello z-index nel layering degli elementi? - ✅ Come i valori di border-radius creano la forma del barattolo? Principio di design: Nota come stiamo costruendo visivi complessi da forme semplici: 1. Rettangoli → Rettangoli arrotondati → Componenti del barattolo 2. Colori piatti → Opacità → Effetto vetro 3. Elementi individuali → Composizione stratificata → Aspetto tridimensionale --- ## Sfida GitHub Copilot Agent 🚀 Usa la modalità Agent per completare la seguente sfida: Descrizione: Crea un'animazione CSS che faccia oscillare delicatamente le piante del terrario, simulando l'effetto di una brezza naturale. Questo ti aiuterà a praticare animazioni CSS, trasformazioni e keyframes, migliorando l'appeal visivo del tuo terrario. Prompt: Aggiungi animazioni keyframe CSS per far oscillare delicatamente le piante del terrario da un lato all'altro. Crea un'animazione oscillante che ruoti ogni pianta leggermente (2-3 gradi) a sinistra e a destra con una durata di 3-4 secondi, e applicala alla classe .plant. Assicurati che l'animazione sia infinita e abbia una funzione di easing per un movimento naturale. Scopri di più sulla modalità agent qui. ## 🚀 Sfida: Aggiungere riflessi sul vetro Pronto a migliorare il tuo terrario con riflessi realistici sul vetro? Questa tecnica aggiungerà profondità e realismo al design. Creerai sottili riflessi che simulano come la luce si riflette sulle superfici di vetro. Questo approccio è simile a come i pittori rinascimentali come Jan van Eyck utilizzavano luce e riflessi per far apparire il vetro dipinto tridimensionale. Ecco cosa stai cercando di ottenere: La tua sfida: - Crea forme ovali sottili bianche o di colore chiaro per i riflessi sul vetro - Posizionale strategicamente sul lato sinistro del barattolo - Applica effetti di opacità e sfocatura appropriati per riflessi realistici - Usa border-radius per creare forme organiche simili a bolle - Sperimenta con gradienti o box-shadow per un realismo migliorato ## Quiz post-lezione Quiz post-lezione ## Amplia le tue conoscenze CSS Il CSS può sembrare complesso inizialmente, ma comprendere questi concetti fondamentali fornisce una solida base per tecniche più avanzate. Le tue prossime aree di apprendimento CSS: - Flexbox - semplifica l'allineamento e la distribuzione degli elementi - CSS Grid - offre strumenti potenti per creare layout complessi - Variabili CSS - riducono la ripetizione e migliorano la manutenibilità - Design responsivo - garantisce che i siti funzionino bene su diverse dimensioni dello schermo ### Risorse di apprendimento interattive Pratica questi concetti con giochi coinvolgenti e pratici: - 🐸 Flexbox Froggy - Impara Flexbox attraverso sfide divertenti - 🌱 Grid Garden - Impara CSS Grid coltivando carote virtuali - 🎯 CSS Battle - Metti alla prova le tue abilità CSS con sfide di codifica ### Apprendimento aggiuntivo Per una comprensione completa dei fondamenti CSS, completa questo modulo Microsoft Learn: Style your HTML app with CSS ### ⚡ Cosa puoi fare nei prossimi 5 minuti - [ ] Apri DevTools e ispeziona gli stili CSS su qualsiasi sito web utilizzando il pannello Elementi - [ ] Crea un semplice file CSS e collegalo a una pagina HTML - [ ] Prova a cambiare i colori utilizzando metodi diversi: hex, RGB e colori nominati - [ ] Pratica il modello box aggiungendo padding e margine a un div ### 🎯 Cosa puoi realizzare in quest'ora - [ ] Completa il quiz post-lezione e rivedi i fondamenti del CSS - [ ] Stila la tua pagina HTML con font, colori e spaziatura - [ ] Crea un layout semplice utilizzando flexbox o grid - [ ] Sperimenta con le transizioni CSS per effetti fluidi - [ ] Pratica il design responsivo con media queries ### 📅 La tua avventura CSS di una settimana - [ ] Completa l'assegnazione di stile del terrario con creatività - [ ] Padroneggia CSS Grid costruendo un layout di galleria fotografica - [ ] Impara le animazioni CSS per dare vita ai tuoi design - [ ] Esplora i preprocessori CSS come Sass o Less - [ ] Studia i principi di design e applicali al tuo CSS - [ ] Analizza e ricrea design interessanti che trovi online ### 🌟 La tua maestria nel design di un mese - [ ] Costruisci un sistema di design completo e responsivo per siti web - [ ] Impara CSS-in-JS o framework utility-first come Tailwind - [ ] Contribuisci a progetti open source con miglioramenti CSS - [ ] Padroneggia concetti avanzati di CSS come proprietà personalizzate e contenimento - [ ] Crea librerie di componenti riutilizzabili con CSS modulare - [ ] Fai da mentore ad altri che stanno imparando il CSS e condividi conoscenze di design ## 🎯 La tua timeline per la padronanza del CSS ### 🛠️ Riepilogo del tuo toolkit CSS Dopo aver completato questa lezione, ora hai: - Comprensione della cascata: Come gli stili si ereditano e si sovrascrivono - Padronanza dei selettori: Targeting preciso con elementi, classi e ID - Competenze di posizionamento: Posizionamento strategico e layering degli elementi - Design visivo: Creazione di effetti di vetro, ombre e trasparenza - Tecniche responsivi: Layout basati su percentuali che si adattano a qualsiasi schermo - Organizzazione del codice: Struttura CSS pulita e manutenibile - Pratiche moderne: Utilizzo di unità relative e modelli di design accessibili Prossimi passi: Il tuo terrario ora ha sia struttura (HTML) che stile (CSS). La lezione finale aggiungerà interattività con JavaScript! ## Assegnazione Refactoring CSS --- Disclaimer: Questo documento è stato tradotto utilizzando il servizio di traduzione AI Co-op Translator. Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si consiglia una traduzione professionale umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.
テラリウムプロジェクト パート1: HTML入門
HTML（HyperText Markup Language）は、これまで訪れたすべてのウェブサイトの基盤です。HTMLはウェブページの骨格のようなもので、コンテンツの配置、構造、各部分の意味を定義します。後でCSSが色やレイアウトでHTMLを「装飾」し、JavaScriptがインタラクティブ性を加えることで「命を吹き込む」役割を果たしますが、HTMLはすべての基礎を提供します。 このレッスンでは、仮想テラリウムインターフェースのHTML構造を作成します。この実践的なプロジェクトを通じて、基本的なHTMLの概念を学びながら、視覚的に魅力的なものを構築します。セマンティック要素を使ってコンテンツを整理し、画像を扱い、インタラクティブなウェブアプリケーションの基盤を作る方法を学びます。 レッスンの終わりには、植物の画像が整理された列に表示されるHTMLページが完成します。次のレッスンでスタイリングを行う準備が整います。最初はシンプルに見えるかもしれませんが、それがCSSで視覚的な仕上げを加える前のHTMLのあるべき姿です。 ## レクチャー前のクイズ レクチャー前のクイズ ## プロジェクトのセットアップ HTMLコードに取り掛かる前に、テラリウムプロジェクトの適切な作業スペースを設定しましょう。最初から整理されたファイル構造を作成することは、ウェブ開発の旅を通じて役立つ重要な習慣です。 ### タスク: プロジェクト構造を作成する テラリウムプロジェクト専用のフォルダーを作成し、最初のHTMLファイルを追加します。以下の2つの方法があります: オプション1: Visual Studio Codeを使用する場合 1. Visual Studio Codeを開く 2. 「ファイル」→「フォルダーを開く」をクリックするか、Ctrl+K, Ctrl+O（Windows/Linux）またはCmd+K, Cmd+O（Mac）を使用 3. terrariumという新しいフォルダーを作成し、それを選択 4. エクスプローラペインで「新しいファイル」アイコンをクリック 5. ファイル名をindex.htmlにする オプション2: ターミナルコマンドを使用する場合 これらのコマンドが達成すること: - プロジェクト用の新しいディレクトリterrariumを作成 - テラリウムディレクトリに移動 - 空のindex.htmlファイルを作成 - 編集のためにVisual Studio Codeでファイルを開く ## HTMLドキュメント構造の理解 すべてのHTMLドキュメントは、ブラウザが正しく理解して表示するために必要な特定の構造に従います。この構造は正式な手紙のようなもので、特定の順序で必要な要素が含まれており、受信者（この場合はブラウザ）がコンテンツを適切に処理するのを助けます。 まず、すべてのHTMLドキュメントに必要な基本的な基盤を追加しましょう。 ### DOCTYPE宣言とルート要素 HTMLファイルの最初の2行は、ブラウザへのドキュメントの「紹介」として機能します: このコードが何をするか: - <!DOCTYPE html>を使用してドキュメントタイプをHTML5として宣言 - ページコンテンツをすべて含むルート<html>要素を作成 - 適切なブラウザレンダリングのための最新のウェブ標準を確立 - 異なるブラウザやデバイス間で一貫した表示を保証 ### 🔄 教育的チェックイン 一時停止して振り返る: 続行する前に、以下を理解していることを確認してください: - ✅ なぜすべてのHTMLドキュメントにDOCTYPE宣言が必要なのか - ✅ <html>ルート要素が何を含むのか - ✅ この構造がブラウザがページを正しくレンダリングするのを助ける方法 簡単な自己テスト: 「標準準拠のレンダリング」とは何を意味するか、自分の言葉で説明できますか？ ## 必要なドキュメントメタデータの追加 HTMLドキュメントの<head>セクションには、ブラウザや検索エンジンが必要とする重要な情報が含まれていますが、訪問者が直接ページ上で見ることはありません。これは、ウェブページが正しく機能し、異なるデバイスやプラットフォームで正しく表示されるのを助ける「舞台裏」の情報です。 このメタデータは、ブラウザにページの表示方法、使用する文字エンコーディング、異なる画面サイズの処理方法を伝えます。これらは、プロフェッショナルでアクセス可能なウェブページを作成するために不可欠です。 ### タスク: ドキュメントヘッドを追加する 開いている<html>タグと閉じている<html>タグの間にこの<head>セクションを挿入してください: 各要素が達成することの内訳: - ブラウザタブや検索結果に表示されるページタイトルを設定 - 世界中で適切なテキスト表示を行うためにUTF-8文字エンコーディングを指定 - 最新バージョンのInternet Explorerとの互換性を確保 - ビューポートをデバイス幅に合わせて設定し、レスポンシブデザインを構成 - 初期ズームレベルを設定してコンテンツを自然なサイズで表示 ## ドキュメントボディの構築 <body>要素にはウェブページのすべての目に見えるコンテンツが含まれています。訪問者が見るものや操作するものすべてがここにあります。<head>セクションがブラウザへの指示を提供したのに対し、<body>セクションには実際のコンテンツ（テキスト、画像、ボタン、その他の要素）が含まれています。 ボディ構造を追加し、HTMLタグがどのように連携して意味のあるコンテンツを作成するかを理解しましょう。 ### HTMLタグ構造の理解 HTMLはペアタグを使用して要素を定義します。ほとんどのタグには<p>のような開始タグと</p>のような終了タグがあり、その間にコンテンツが入ります: <p>Hello, world!</p>。これにより、「Hello, world!」というテキストを含む段落要素が作成されます。 ### タスク: ボディ要素を追加する HTMLファイルを更新して<body>要素を含めてください: この完全な構造が提供するもの: - 基本的なHTML5ドキュメントフレームワークを確立 - 適切なブラウザレンダリングのための重要なメタデータを含む - 目に見えるコンテンツのための空のボディを作成 - 現代のウェブ開発のベストプラクティスに従う これで、テラリウムの目に見える要素を追加する準備が整いました。次のレッスンでCSSスタイリングを行うために、コンテンツの異なるセクションを整理するためのコンテナとして<div>要素を使用し、植物の画像を表示するための<img>要素を使用します。 ### 画像とレイアウトコンテナの操作 画像はHTMLでは特別な存在で、「自己閉じタグ」を使用します。<p></p>のようにコンテンツを囲む要素とは異なり、<img>タグはsrc（画像ファイルパス）やalt（アクセシビリティ）のような属性を使用してタグ内に必要な情報をすべて含みます。 画像をHTMLに追加する前に、プロジェクトファイルを適切に整理し、画像フォルダーを作成して植物のグラフィックを追加する必要があります。 まず、画像をセットアップする: 1. テラリウムプロジェクトフォルダー内にimagesというフォルダーを作成 2. ソリューションフォルダーから植物画像をダウンロード（合計14枚の植物画像） 3. 新しいimagesフォルダーにすべての植物画像をコピー ### タスク: 植物表示レイアウトを作成する 次に、<body></body>タグの間に植物画像を2列に整理して追加してください: このコードで何が行われているかステップごとに説明: - すべてのコンテンツを保持するid="page"を持つメインページコンテナを作成 - 2つの列コンテナleft-containerとright-containerを確立 - 左列に7つの植物、右列に7つの植物を整理 - 各植物画像を個別に配置するためにplant-holderdivで囲む - 次のレッスンでCSSスタイリングを行うために一貫したクラス名を適用 - 後でJavaScriptでの操作のために各植物画像にユニークなIDを割り当てる - 画像フォルダーを指す適切なファイルパスを含む ### 🔄 教育的チェックイン 構造の理解: HTML構造を確認するために少し時間を取ってください: - ✅ レイアウト内の主要なコンテナを識別できますか？ - ✅ 各画像にユニークなIDがある理由を理解していますか？ - ✅ plant-holderdivの目的をどのように説明しますか？ 視覚的検査: HTMLファイルをブラウザで開いてください。以下が表示されるはずです: - 植物画像の基本リスト - 2列に整理された画像 - シンプルでスタイリングされていないレイアウト 覚えておいてください: このシンプルな外観は、CSSスタイリング前のHTMLのあるべき姿です！ このマークアップを追加することで、植物が画面に表示されますが、まだ洗練されていません。それは次のレッスンでCSSが担当します！現時点では、コンテンツを適切に整理し、アクセシビリティのベストプラクティスに従った堅実なHTML基盤が完成しています。 ## アクセシビリティのためのセマンティックHTMLの使用 セマンティックHTMLとは、外観だけでなく意味や目的に基づいてHTML要素を選択することを意味します。セマンティックマークアップを使用すると、ブラウザ、検索エンジン、スクリーンリーダーなどの支援技術にコンテンツの構造と意味を伝えることができます。 このアプローチは、障害を持つユーザーにとってウェブサイトをよりアクセスしやすくし、検索エンジンがコンテンツをよりよく理解するのを助けます。これは、すべての人にとってより良い体験を生み出す現代のウェブ開発の基本原則です。 ### セマンティックなページタイトルの追加 テラリウムページに適切な見出しを追加しましょう。開いている<body>タグのすぐ後にこの行を挿入してください: セマンティックマークアップが重要な理由: - スクリーンリーダーがページ構造をナビゲートし理解するのを助ける - 検索エンジン最適化（SEO）を改善し、コンテンツの階層を明確化 - 視覚障害や認知障害を持つユーザーのアクセシビリティを向上 - すべてのデバイスやプラットフォームでより良いユーザー体験を提供 - ウェブ標準とプロフェッショナルな開発のベストプラクティスに従う セマンティックと非セマンティックの選択例: - 各視覚コンポーネント（上部、壁、土、底部）を個別の要素として定義 - ガラスの反射効果（光沢要素）のためのネストされた要素を含む - 各要素の目的を明確に示す記述的なクラス名を使用 - ガラステラリウムの外観を作るためのCSSスタイリングの準備として構造を整備 ### 🔄 教育的チェックイン HTML構造の習得: 次に進む前に、以下を確認してください： - ✅ HTML構造と視覚的外観の違いを説明できる - ✅ セマンティックHTML要素と非セマンティックHTML要素を識別できる - ✅ 適切なマークアップがアクセシビリティにどのように役立つか説明できる - ✅ 完全なドキュメントツリー構造を認識できる 理解度のテスト: JavaScriptを無効にし、CSSを削除した状態でHTMLファイルをブラウザで開いてみてください。これにより、作成した純粋なセマンティック構造が表示されます！ --- ## GitHub Copilot Agent チャレンジ Agentモードを使用して以下のチャレンジを完了してください： 説明: テラリウムプロジェクトに追加できる植物ケアガイドセクションのセマンティックHTML構造を作成してください。 プロンプト: "Plant Care Guide"というメイン見出し、"Watering"、"Light Requirements"、"Soil Care"という3つのサブセクションを含むセマンティックHTMLセクションを作成してください。それぞれのサブセクションには植物ケア情報の段落を含めます。適切なセマンティックHTMLタグ（<section>、<h2>、<h3>、<p>など）を使用してコンテンツを適切に構造化してください。 Agentモードについて詳しくはこちらをご覧ください。 ## HTMLの歴史チャレンジ ウェブ進化について学ぶ HTMLは、1990年にCERNでTim Berners-Leeが最初のウェブブラウザを作成して以来、大きく進化してきました。古いタグ（例: <marquee>）は、現代のアクセシビリティ基準やレスポンシブデザイン原則に適合しないため、現在では廃止されています。 この実験を試してみてください: 1. <h1>タイトルを一時的に<marquee>タグで囲む: <marquee><h1>My Terrarium</h1></marquee> 2. ブラウザでページを開き、スクロール効果を観察 3. このタグが廃止された理由を考える（ヒント: ユーザー体験とアクセシビリティについて考えてみてください） 4. <marquee>タグを削除し、セマンティックマークアップに戻す 反省の質問: - スクロールするタイトルは視覚障害や動きに敏感なユーザーにどのような影響を与えるでしょうか？ - 同様の視覚効果をよりアクセシブルに実現するための現代的なCSS技術は何でしょうか？ - 廃止された要素ではなく、現在のウェブ標準を使用することがなぜ重要なのでしょうか？ 廃止されたHTML要素についてさらに学び、ウェブ標準がどのように進化してユーザー体験を向上させているかを理解してください。 ## 講義後のクイズ 講義後のクイズ ## 復習と自己学習 HTMLの知識を深める HTMLは30年以上にわたりウェブの基盤となり、単純な文書マークアップ言語からインタラクティブなアプリケーションを構築するための高度なプラットフォームへと進化してきました。この進化を理解することで、現代のウェブ標準をより深く理解し、より良い開発判断を下すことができます。 おすすめの学習パス: 1. HTMLの歴史と進化 - HTML 1.0からHTML5までのタイムラインを調査 - 特定のタグが廃止された理由（アクセシビリティ、モバイル対応性、保守性）を探る - 新しいHTML機能や提案を調査 2. セマンティックHTMLの深掘り - HTML5セマンティック要素の完全なリストを学ぶ - <article>、<section>、<aside>、<main>を使用するタイミングを練習 - アクセシビリティを向上させるARIA属性について学ぶ 3. 現代のウェブ開発 - レスポンシブウェブサイトの構築をMicrosoft Learnで探る - HTMLがCSSやJavaScriptとどのように統合されるかを理解 - ウェブパフォーマンスとSEOのベストプラクティスを学ぶ 反省の質問: - 発見した廃止されたHTMLタグは何ですか？それらが削除された理由は何ですか？ - 将来のバージョンに向けて提案されている新しいHTML機能は何ですか？ - セマンティックHTMLはウェブアクセシビリティとSEOにどのように貢献しますか？ ### ⚡ 次の5分間でできること - [ ] DevTools（F12）を開き、お気に入りのウェブサイトのHTML構造を調査 - [ ] <h1>、<p>、<img>の基本タグを使用して簡単なHTMLファイルを作成 - [ ] W3C HTML ValidatorオンラインでHTMLを検証 - [ ] <!-- コメント -->を使用してHTMLにコメントを追加してみる ### 🎯 この1時間で達成できること - [ ] 講義後のクイズを完了し、セマンティックHTMLの概念を復習 - [ ] 適切なHTML構造を使用して自分についての簡単なウェブページを作成 - [ ] 異なる見出しレベルやテキストフォーマットタグを試す - [ ] 画像やリンクを追加してマルチメディア統合を練習 - [ ] 試したことのないHTML5機能を調査 ### 📅 1週間のHTML学習計画 - [ ] セマンティックマークアップを使用してテラリウムプロジェクト課題を完了 - [ ] ARIAラベルと役割を使用してアクセシブルなウェブページを作成 - [ ] 様々な入力タイプを使用してフォーム作成を練習 - [ ] localStorageやgeolocationなどのHTML5 APIを探る - [ ] レスポンシブHTMLパターンとモバイルファーストデザインを学ぶ - [ ] 他の開発者のHTMLコードをレビューしてベストプラクティスを学ぶ ### 🌟 1か月間のウェブ基礎学習 - [ ] HTMLの習得を示すポートフォリオウェブサイトを作成 - [ ] Handlebarsのようなフレームワークを使用してHTMLテンプレートを学ぶ - [ ] オープンソースプロジェクトに貢献し、HTMLドキュメントを改善 - [ ] カスタム要素などの高度なHTML概念を習得 - [ ] CSSフレームワークやJavaScriptライブラリとHTMLを統合 - [ ] HTMLの基本を学んでいる他の人を指導 ## 🎯 HTML習得のタイムライン ### 🛠️ HTMLツールキットのまとめ このレッスンを完了した後、以下を習得しました： - ドキュメント構造: 適切なDOCTYPEを含む完全なHTML5基盤 - セマンティックマークアップ: アクセシビリティとSEOを向上させる意味のあるタグ - 画像統合: 適切なファイル構成とaltテキストの実践 - レイアウトコンテナ: 説明的なクラス名を使用したdivの戦略的活用 - アクセシビリティ意識: スクリーンリーダーのナビゲーションの理解 - 現代の標準: 現在のHTML5の実践と廃止されたタグの知識 - プロジェクト基盤: CSSスタイリングとJavaScriptのインタラクティビティのための堅実な基盤 次のステップ: HTML構造はCSSスタイリングの準備が整いました！構築したセマンティック基盤は、次のレッスンをより理解しやすくします。 ## 課題 HTMLを練習: ブログモックアップを作成 --- 免責事項: この文書はAI翻訳サービスCo-op Translatorを使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてご参照ください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤認について、当方は一切の責任を負いません。
テラリウムプロジェクト パート2: CSS入門
HTMLで作ったテラリウムが少しシンプルすぎると感じませんでしたか？CSSを使えば、その基本的な構造を視覚的に魅力的なものに変えることができます。 HTMLが家の骨組みを作るようなものだとしたら、CSSはその家を「住み心地の良い家」にするためのすべてです。ペンキの色、家具の配置、照明、部屋の流れなどを整える役割を果たします。ヴェルサイユ宮殿が最初はシンプルな狩猟用ロッジだったのが、装飾やレイアウトに細心の注意を払うことで世界で最も壮麗な建物の一つに変わったことを思い出してください。 今日は、あなたのテラリウムを機能的なものから洗練されたものへと変えていきます。要素を正確に配置し、レイアウトを異なる画面サイズに対応させ、ウェブサイトを魅力的にする視覚的な魅力を作り出す方法を学びます。 このレッスンの終わりには、戦略的なCSSスタイリングがプロジェクトを劇的に改善する方法がわかるでしょう。さあ、テラリウムにスタイルを加えましょう。 ## レクチャー前のクイズ レクチャー前のクイズ ## CSSの基本を学ぶ CSSは「見た目をきれいにする」だけだと思われがちですが、それ以上の役割を果たします。CSSは映画の監督のようなものです。見た目だけでなく、動き、インタラクションへの反応、さまざまな状況への適応をコントロールします。 現代のCSSは非常に高機能です。スマートフォン、タブレット、デスクトップコンピュータに合わせてレイアウトを自動調整するコードを書くことができます。スムーズなアニメーションを作成して、必要な場所にユーザーの注意を引きつけることも可能です。すべてがうまく連携すると、その結果は非常に印象的なものになります。 このレッスンで達成すること: - モダンなCSS技術を使ってテラリウムの完全な視覚デザインを作成 - カスケード、継承、CSSセレクタなどの基本概念を探求 - レスポンシブな位置決めとレイアウト戦略を実装 - CSSの形状とスタイリングを使ってテラリウムコンテナを構築 ### 前提条件 前のレッスンでテラリウムのHTML構造を完成させ、それをスタイリングする準備ができていること。 ### CSSファイルの設定 スタイリングを始める前に、HTMLにCSSを接続する必要があります。この接続により、ブラウザはテラリウムのスタイリング指示がどこにあるかを認識します。 テラリウムフォルダ内に新しいファイルstyle.cssを作成し、それをHTMLドキュメントの<head>セクションにリンクします: このコードが行うこと: - HTMLとCSSファイル間の接続を作成 - ブラウザにstyle.cssからスタイルを読み込んで適用するよう指示 - rel="stylesheet"属性を使用してCSSファイルであることを指定 - href="./style.css"でファイルパスを参照 ## CSSカスケードの理解 CSSが「カスケーディング」スタイルシートと呼ばれる理由を考えたことはありますか？スタイルは滝のように下に流れ落ち、時には互いに衝突することもあります。 軍隊の指揮構造を考えてみてください。例えば、将軍の命令で「全兵士は緑の服を着る」と言われたとしても、特定の部隊には「式典のために青い礼服を着る」という命令が出されるかもしれません。より具体的な指示が優先されます。CSSも同様の論理に従い、この階層を理解することでデバッグがはるかに簡単になります。 ### カスケード優先度の実験 スタイルの衝突を作成してカスケードを確認してみましょう。まず、<h1>タグにインラインスタイルを追加します: このコードが行うこと: - インラインスタイリングを使用して<h1>要素に直接赤色を適用 - style属性を使用してCSSをHTMLに直接埋め込む - この特定の要素に対して最も高い優先度のスタイルルールを作成 次に、style.cssファイルにこのルールを追加します: 上記で行ったこと: - すべての<h1>要素をターゲットにするCSSルールを定義 - 外部スタイルシートを使用してテキストカラーを青に設定 - インラインスタイルよりも低い優先度のルールを作成 ✅ 知識チェック: あなたのウェブアプリではどの色が表示されますか？なぜその色が優先されるのでしょうか？スタイルを上書きしたいシナリオを考えることができますか？ ## CSSの継承を理解する CSSの継承は遺伝学のようなものです。要素は親要素から特定のプロパティを継承します。例えば、body要素にフォントファミリーを設定すると、その中のすべてのテキストが自動的に同じフォントを使用します。それは、ハプスブルク家の特徴的な顎のラインが、各個人に特別に指定されなくても世代を超えて現れるのと似ています。 ただし、すべてが継承されるわけではありません。フォントや色などのテキストスタイルは継承されますが、マージンやボーダーなどのレイアウトプロパティは継承されません。子供が親の身体的特徴を継承する一方で、親のファッションセンスを継承しないのと同じです。 ### フォント継承の観察 <body>要素にフォントファミリーを設定して継承を確認してみましょう: ここで起こることを分解すると: - <body>要素をターゲットにしてページ全体のフォントファミリーを設定 - フォールバックオプションを含むフォントスタックを使用してブラウザ互換性を向上 - 異なるオペレーティングシステムで見栄えの良いモダンなシステムフォントを適用 - 特別に上書きされない限り、すべての子要素がこのフォントを継承 ブラウザの開発者ツール（F12）を開き、Elementsタブに移動して<h1>要素を検査してください。bodyからフォントファミリーを継承していることがわかります: ✅ 実験タイム: <body>にcolor、line-height、text-alignなどの他の継承可能なプロパティを設定してみてください。見出しや他の要素に何が起こるでしょうか？ ### 🔄 教育的チェックイン CSS基礎の理解: セレクタに進む前に以下を確認してください: - ✅ カスケードと継承の違いを説明できる - ✅ 特異性の衝突でどのスタイルが勝つか予測できる - ✅ 親要素から継承されるプロパティを特定できる - ✅ CSSファイルをHTMLに正しく接続できる 簡単なテスト: 以下のスタイルがある場合、<div class="special">内の<h1>の色は何色になりますか？ 答え: 赤（要素セレクタが直接h1をターゲットにしているため） ## CSSセレクタの習得 CSSセレクタは特定の要素をターゲットにしてスタイリングする方法です。それは正確な指示を与えるようなものです。「家」と言う代わりに、「メープルストリートの赤いドアの青い家」と言うようなものです。 CSSはさまざまな方法で特定の要素を指定することができ、適切なセレクタを選ぶことはタスクに適したツールを選ぶことと似ています。時には近所のすべてのドアをスタイリングする必要があり、時には特定のドアだけをスタイリングする必要があります。 ### 要素セレクタ（タグ） 要素セレクタはタグ名でHTML要素をターゲットにします。ページ全体に広く適用される基本スタイルを設定するのに最適です: これらのスタイルの理解: - bodyセレクタでページ全体のタイポグラフィを一貫して設定 - ブラウザのデフォルトのマージンとパディングを削除してコントロールを向上 - すべての見出し要素を色、配置、間隔でスタイリング - スケーラブルでアクセシブルなフォントサイズのためにrem単位を使用 要素セレクタは一般的なスタイリングには適していますが、テラリウム内の植物のような個々のコンポーネントをスタイリングするには、より具体的なセレクタが必要です。 ### ユニークな要素のためのIDセレクタ IDセレクタは#記号を使用し、特定のid属性を持つ要素をターゲットにします。IDはページ内で一意である必要があるため、テラリウムの左右の植物コンテナのような個々の特別な要素をスタイリングするのに最適です。 テラリウムの植物が配置されるサイドコンテナのスタイリングを作成しましょう: このコードが達成すること: - absolute位置決めを使用してコンテナを画面の左端と右端に配置 - 画面サイズに適応するレスポンシブな高さのためにvh（ビューポート高さ）単位を使用 - box-sizing: border-boxを適用してパディングを全幅に含める - ゼロ値から不要なpx単位を削除してコードをクリーンに - 目に優しい微妙な背景色を設定 ✅ コード品質チャレンジ: このCSSがDRY（Don't Repeat Yourself）原則に違反していることに気づきましたか？IDとクラスを組み合わせてリファクタリングできますか？ 改善されたアプローチ: ### 再利用可能なスタイルのためのクラスセレクタ クラスセレクタは.記号を使用し、複数の要素に同じスタイルを適用するのに最適です。IDとは異なり、クラスはHTML全体で再利用可能であり、一貫したスタイリングパターンに理想的です。 テラリウムでは、各植物に似たスタイリングが必要ですが、個々の位置決めも必要です。クラスを共有スタイルに、IDをユニークな位置決めとJavaScriptのインタラクションに使用します。 各植物のHTML構造: 重要な要素の説明: - すべての植物コンテナに一貫したスタイリングを適用するためにclass="plant-holder"を使用 - 共有画像スタイリングと動作のためにclass="plant"を適用 - 個々の位置決めとJavaScriptのインタラクションのためにユニークなid="plant1"を含む - スクリーンリーダーのアクセシビリティのために説明的なaltテキストを提供 次に、これらのスタイルをstyle.cssファイルに追加します: これらのスタイルの分解: - 植物ホルダーに相対位置決めを作成して位置決めコンテキストを確立 - すべての植物ホルダーを高さ13%に設定し、すべての植物が垂直方向に収まるようにする - ホルダーを少し左にシフトして植物をコンテナ内でより中央に配置 - max-widthとmax-heightプロパティを使用して植物がレスポンシブにスケールするようにする - 植物をテラリウム内の他の要素の上にレイヤー化するためにz-indexを使用 - CSSトランジションを使用して微妙なホバー効果を追加し、ユーザーインタラクションを向上 ✅ クリティカルシンキング: なぜ.plant-holderと.plantセレクタの両方が必要なのでしょうか？1つだけを使用しようとした場合、何が起こるでしょうか？ ## CSS位置決めの理解 CSS位置決めは舞台監督のようなものです。すべての役者がどこに立ち、舞台上でどのように動くかを指示します。標準的な配置に従う役者もいれば、劇的な効果のために特定の位置決めが必要な役者もいます。 位置決めを理解すると、多くのレイアウトの課題が管理可能になります。スクロール中に常に上部に留まるナビゲーションバーが必要ですか？位置決めがそれを解決します。特定の場所に表示されるツールチップが必要ですか？それも位置決めで可能です。 ### 5つの位置値 - .plant-holderがrelativeではなくabsoluteを使用すると、レイアウトがどのように変化するか？ - .plantをrelativeポジショニングに切り替えると何が起こるか？ ### 🔄 教育的チェックイン CSSポジショニングの習得: 理解を確認するために一時停止: - ✅ なぜドラッグ＆ドロップのために植物にabsoluteポジショニングが必要なのか説明できますか？ - ✅ 相対コンテナがポジショニングのコンテキストを作る仕組みを理解していますか？ - ✅ なぜサイドコンテナがabsoluteポジショニングを使用しているのか？ - ✅ ポジションの宣言を完全に削除した場合、何が起こるか？ 現実世界との関連性: CSSポジショニングが現実世界のレイアウトをどのように反映しているか考えてみましょう: - Static: 棚の上の本（自然な順序） - Relative: 本を少し動かして元の位置を維持する - Absolute: 特定のページ番号にしおりを置く - Fixed: ページをめくっても見える位置に貼られた付箋 ## CSSでテラリウムを作る ここでは、画像やグラフィックソフトを使わずにCSSだけでガラス瓶を作ります。 ポジショニングや透明度を使ってリアルなガラス、影、奥行き効果を作ることは、CSSの視覚的な能力を示しています。この技術は、バウハウス運動の建築家がシンプルな幾何学的形状を使って複雑で美しい構造を作った方法に似ています。これらの原則を理解すれば、多くのウェブデザインに隠されたCSS技術を認識できるようになります。 ### ガラス瓶の構成要素を作る テラリウム瓶を一つ一つのパーツに分けて作りましょう。各パーツは絶対位置指定とパーセンテージベースのサイズを使用してレスポンシブデザインを実現します: テラリウムの構造を理解する: - 使用 パーセンテージベースの寸法で、すべての画面サイズに対応するレスポンシブスケーリング - 配置 要素を絶対位置指定して正確に積み重ねて整列 - 適用 異なる透明度値でガラスの透明効果を作成 - 実装 z-indexを使って植物が瓶の中に見えるようにレイヤリング - 追加 微妙なボックスシャドウと洗練されたボーダー半径でリアルな外観を実現 ### パーセンテージを使ったレスポンシブデザイン すべての寸法が固定ピクセル値ではなくパーセンテージを使用していることに注目してください: なぜ重要なのか: - 保証 テラリウムがどの画面サイズでも比例してスケールする - 維持 瓶の構成要素間の視覚的関係 - 提供 モバイルから大型デスクトップモニターまで一貫した体験 - 適応 視覚的レイアウトを壊すことなくデザインを調整 ### CSS単位の活用 ボーダー半径にはrem単位を使用しており、これはルートフォントサイズに相対的にスケールします。これにより、ユーザーのフォント設定を尊重したよりアクセシブルなデザインが可能になります。CSS相対単位について公式仕様で詳しく学びましょう。 ✅ 視覚的実験: これらの値を変更して効果を観察してみましょう: - 瓶の透明度を0.5から0.8に変更すると、ガラスの外観にどのような影響がありますか？ - 土の色を#3a241dから#8B4513に変更すると、どのような視覚的影響がありますか？ - 土のz-indexを2に変更すると、レイヤリングに何が起こりますか？ ### 🔄 教育的チェックイン CSS視覚デザインの理解: 視覚的CSSの理解を確認: - ✅ パーセンテージベースの寸法がレスポンシブデザインを作る仕組みを理解していますか？ - ✅ 透明度がガラスの透明効果を作る理由を理解していますか？ - ✅ z-indexが要素のレイヤリングに果たす役割を理解していますか？ - ✅ ボーダー半径の値が瓶の形状を作る仕組みを理解していますか？ デザイン原則: シンプルな形状から複雑なビジュアルを構築する方法に注目してください: 1. 長方形 → 丸みを帯びた長方形 → 瓶の構成要素 2. 平坦な色 → 透明度 → ガラス効果 3. 個々の要素 → レイヤー構成 → 3D外観 --- ## GitHub Copilot Agentチャレンジ 🚀 Agentモードを使用して次のチャレンジを完了してください: 説明: テラリウムの植物が自然な風の効果をシミュレートして優しく揺れるCSSアニメーションを作成します。これにより、CSSアニメーション、変形、キーフレームを練習しながら、テラリウムの視覚的魅力を向上させます。 プロンプト: テラリウム内の植物が左右に優しく揺れるようにするCSSキーフレームアニメーションを追加してください。各植物が少し（2〜3度）左右に回転する揺れアニメーションを作成し、.plantクラスに適用します。アニメーションは無限ループで、自然な動きを実現するためのイージング関数を使用してください。 agent modeについて詳しくはこちら ## 🚀 チャレンジ: ガラスの反射を追加する リアルなガラスの反射を追加してテラリウムをさらに魅力的にします。この技術はデザインに深みとリアリズムを加えます。 ガラス表面に光が反射する様子をシミュレートする微妙なハイライトを作成します。このアプローチは、ルネサンスの画家ヤン・ファン・エイクが光と反射を使って描かれたガラスを三次元的に見せた方法に似ています。目指すべきものは以下の通りです: チャレンジ内容: - 作成 ガラスの反射をシミュレートする微妙な白または明るい色の楕円形 - 配置 瓶の左側に戦略的に配置 - 適用 適切な透明度とぼかし効果でリアルな光の反射を実現 - 使用 border-radiusで有機的な泡のような形状を作成 - 実験 グラデーションやボックスシャドウでリアリズムを向上 ## 講義後のクイズ 講義後のクイズ ## CSS知識を広げる CSSは最初は複雑に感じるかもしれませんが、これらの基本概念を理解することで、より高度な技術のためのしっかりとした基盤を築くことができます。 次に学ぶべきCSSの分野: - Flexbox - 要素の整列と分布を簡素化 - CSS Grid - 複雑なレイアウトを作成するための強力なツール - CSS Variables - 繰り返しを減らし、保守性を向上 - レスポンシブデザイン - 異なる画面サイズでサイトがうまく機能することを保証 ### インタラクティブな学習リソース これらの楽しい、実践的なゲームでこれらの概念を練習してください: - 🐸 Flexbox Froggy - 楽しいチャレンジでFlexboxを習得 - 🌱 Grid Garden - 仮想のニンジンを育てながらCSS Gridを学ぶ - 🎯 CSS Battle - コーディングチャレンジでCSSスキルをテスト ### 追加学習 CSSの基本を包括的に学ぶには、このMicrosoft Learnモジュールを完了してください: HTMLアプリをCSSでスタイルする ### ⚡ 次の5分間でできること - [ ] DevToolsを開いて、Elementsパネルで任意のウェブサイトのCSSスタイルを調査 - [ ] 簡単なCSSファイルを作成し、HTMLページにリンク - [ ] 色を変更する方法を試す: hex、RGB、名前付き色 - [ ] divにパディングとマージンを追加してボックスモデルを練習 ### 🎯 この1時間で達成できること - [ ] 講義後のクイズを完了し、CSSの基本を復習 - [ ] フォント、色、間隔を使ってHTMLページをスタイル - [ ] FlexboxまたはGridを使って簡単なレイアウトを作成 - [ ] スムーズな効果のためにCSSトランジションを実験 - [ ] メディアクエリを使ってレスポンシブデザインを練習 ### 📅 1週間のCSS冒険 - [ ] 創造的な工夫を加えたテラリウムスタイリング課題を完了 - [ ] CSS Gridを習得し、フォトギャラリーレイアウトを作成 - [ ] CSSアニメーションを学び、デザインに命を吹き込む - [ ] SassやLessなどのCSSプリプロセッサを探求 - [ ] デザイン原則を学び、それをCSSに適用 - [ ] オンラインで見つけた興味深いデザインを分析し再現 ### 🌟 1か月間のデザイン習得 - [ ] 完全なレスポンシブウェブサイトデザインシステムを構築 - [ ] CSS-in-JSやTailwindのようなユーティリティファーストフレームワークを学ぶ - [ ] CSS改善でオープンソースプロジェクトに貢献 - [ ] CSSカスタムプロパティやコンテインメントなどの高度なCSS概念を習得 - [ ] モジュール式CSSを使った再利用可能なコンポーネントライブラリを作成 - [ ] CSSを学ぶ他の人を指導し、デザイン知識を共有 ## 🎯 CSS習得のタイムライン ### 🛠️ CSSツールキットのまとめ このレッスンを完了した後、あなたは以下を習得しました: - カスケードの理解: スタイルがどのように継承され、上書きされるか - セレクターの習得: 要素、クラス、IDを正確にターゲット - ポジショニングスキル: 要素の戦略的配置とレイヤリング - 視覚デザイン: ガラス効果、影、透明度の作成 - レスポンシブ技術: どの画面にも適応するパーセンテージベースのレイアウト - コードの整理: クリーンで保守可能なCSS構造 - 最新の実践: 相対単位とアクセシブルなデザインパターンの使用 次のステップ: あなたのテラリウムは構造（HTML）とスタイル（CSS）を備えました。最終レッスンではJavaScriptでインタラクティブ性を追加します！ ## 課題 CSSリファクタリング --- 免責事項: この文書はAI翻訳サービスCo-op Translatorを使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてご参照ください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当社は責任を負いません。
គម្រោង Terrarium ផ្នែក ១៖ ការណែនាំអំពី HTML
HTML ឬ HyperText Markup Language គឺជាគ្រឹះសម្រាប់គេហទំព័រទាំងអស់ដែលអ្នកធ្លាប់បានចូលស្វែងរក។ គិតពួកវា HTML ដូចជាខ្នងឆ្អឹងដែលផ្តល់រចនាសម្ព័ន្ធដល់ទំព័របណ្ដាញ – វាកំណត់កន្លែងដែលមាតិកាដាក់, របៀបដែលវាត្រូវបានរៀបចំ និងអ្វីដែលមួយៗតំណាងឲ្យ។ ខណៈដែល CSS នឹង "ពាក់លើ" HTML របស់អ្នកជាមួយពណ៌និងរៀបចំទាំងអស់ ហើយ JavaScript នឹងធ្វើឲ្យវាមានជីវិតជាមួយអន្តរកម្ម HTML ផ្តល់រចនាសម្ព័ន្ធមូលដ្ឋានដែលធ្វើឲ្យអ្វីគ្រប់យ៉ាងអាចធ្វើទៅបានបាន។ ក្នុងមេរៀននេះ អ្នកនឹងបង្កើតរចនាសម្ព័ន្ធ HTML សម្រាប់ផ្ទាំង terrarium ពិតប្រាកដមួយ។ គម្រោងអប់រំបន្តនេះ នឹងបង្វឹកអ្នកអំពីគំនិត HTML មូលដ្ឋាន ហើយក៏បង្កើតអ្វីមួយមានទិដ្ឋភាពទាក់ទាញផងដែរ។ អ្នកនឹងរៀនរបៀបរៀបចំមាតិកាក្នុងការប្រើធាតុភាសាសញ្ញា ធ្វើការជាមួយរូបថត និងបង្កើតគ្រឹះសម្រាប់កម្មវិធីបណ្ដាញអន្តរកម្ម។ ចុងបញ្ចប់មេរៀននេះ អ្នកនឹងមានទំព័រ HTML ដំណើរការដែលបង្ហាញរូបភាពរុក្ខជាតិក្នុងជួរឈររៀបចំរួចរាល់ សម្រាប់ការតុបតែងក្នុងមេរៀនបន្ទាប់។ សុំកុំបារម្ភបើវាលួចមើលគ្រាន់តែធម្មតា នេះគឺជារបស់ HTML គួរធ្វើមុន CSS បន្ថែមរចនាប័ទ្មរូបភាព។ ## សំនួរពីមុនមេរៀន សំនួរពីមុនមេរៀន ## ការតំឡើងគម្រោងរបស់អ្នក មុនពេលចូលទៅរកកូដ HTML តោះរៀបចំកន្លែងការងារយ៉ាងត្រឹមត្រូវសម្រាប់គម្រោង terrarium របស់អ្នក។ ការបង្កើតរចនាសម្ព័ន្ធឯកសារយ៉ាងមានរបៀបពីដើម គឺជាព្រឹត្តិការណ៍សំខាន់ដែលនឹងជួយអ្នកយ៉ាងល្អពេលបន្តការអភិវឌ្ឍគេហទំព័ររបស់អ្នក។ ### ភារកិច្ច៖ បង្កើតរចនាសម្ព័ន្ធគម្រោងរបស់អ្នក អ្នកនឹងបង្កើតថតឯកសារពិសេសសម្រាប់គម្រោង terrarium របស់អ្នក និងបន្ថែមឯកសារ HTML ដំបូងរបស់អ្នក។ នេះជាវិធីពីរដែលអ្នកអាចប្រើបាន៖ ជម្រើស ១៖ ប្រើ Visual Studio Code 1. បើក Visual Studio Code 2. ចុច "File" → "Open Folder" ឬប្រើ Ctrl+K, Ctrl+O (Windows/Linux) ឬ Cmd+K, Cmd+O (Mac) 3. បង្កើតថតឈ្មោះ terrarium ហើយជ្រើសវា 4. នៅផ្នែក Explorer ចុចរូបតំណាង "New File" 5. ឈ្មោះឯកសាររបស់អ្នក index.html ជម្រើស ២៖ ប្រើពាក្យបញ្ជា Terminal នេះជារឿងដែលពាក្យបញ្ជាខាងលើធ្វើបាន៖ - បង្កើតថតថ្មីឈ្មោះ terrarium សម្រាប់គម្រោងរបស់អ្នក - ចូលទៅក្នុងថត terrarium - បង្កើតឯកសារ index.html ទទេ - បើកឯកសារនេះក្នុង Visual Studio Code សម្រាប់កែសម្រួល ## ការយល់ដឹងស្តីពីរចនាសម្ព័ន្ធឯកសារ HTML ឯកសារ HTML រាល់មួយត្រូវបន្តដោយរចនាសម្ព័ន្ធជាក់លាក់ដែលកម្មវិធីច្រករុករកត្រូវការយល់ដឹង និងបង្ហាញបានត្រឹមត្រូវ។ គិតរចនាសម្ព័ន្ធនេះដូចជាការសរសេរលិខិតផ្លូវការ – វាត្រូវធាតុទាំងបង់ក្នុងលំដាប់ជាក់លាក់ដែលជួយអ្នកទទួល (គឺកម្មវិធីច្រករុករក) ដំណើរការមាតិកាឲ្យបានត្រឹមត្រូវ។ ចាប់ផ្តើមដោយបន្ថែមគ្រឹះមូលដ្ឋានសំខាន់ដែលឯកសារ HTML ទាំងអស់ត្រូវការ។ ### ការស្នើសុំណែនាំ DOCTYPE និងធាតុដើម បន្ទាត់ដំបូងសម្រាប់ឯកសារ HTML ដែលណាមួយ មានតួនាទីជា "ការណែនាំ" ឯកសារនៅកាន់កម្មវិធីច្រករុករក៖ យល់ដឹងអំពីអ្វីដែលកូដនេះធ្វើ: - ស្នើសុំណែនាំប្រភេទឯកសារជា HTML5 ជាមួយនឹង <!DOCTYPE html> - បង្កើតធាតុដើម <html> ដែលនឹងរួមបញ្ចូលមាតិកាទំព័រទាំងអស់ - ស្ថាបនានីតិវិធីវេបសាយទំនើបសម្រាប់ការបង្ហាញត្រឹមត្រូវក្នុងកម្មវិធីច្រករុករក - ធានាការបង្ហាញជាស្ថាពរជាច្រើនកម្មវិធីច្រករុករក និងឧបករណ៏ផ្សេងៗ ### 🔄 ពិនិត្យឥឡូវ ផ្អែកនិងចុះរំលឹក: មុនបន្ត សូមផ្ទៀងផ្ទាត់ថាអ្នកយល់ថា៖ - ✅ ហេតុអាពីព្រោះឯកសារ HTML រាល់មួយត្រូវការស្នើសុំណែនាំ DOCTYPE - ✅ អ្វីដែលធាតុដើម <html> រួមមាន - ✅ រចនាសម្ព័ន្ធនេះជួយកម្មវិធីច្រករុករកបង្ហាញទំព័រយ៉ាងត្រឹមត្រូវដូចម្តេច សាកល្បងរហ័ស៖ តើអ្នកអាចផ្ដល់ការពន្យល់ដោយពាក្យរបស់អ្នកដោយផ្សព្វផ្សាយន័យ "ការបង្ហាញតាមស្តង់ដារ" បានទេ? ## ការបន្ថែមផ្នែក Metadata សំខាន់ឯកសារ ផ្នែក <head> នៃឯកសារ HTML មានព័ត៌មានសំខាន់ៗដែលកម្មវិធីច្រករុករក និងម៉ាស៊ីនស្វែងរកត្រូវការ ប៉ុន្តែអ្នកចូលមើលមិនមើលឃើញផ្នែកនេះដោយផ្ទាល់នៅលើទំព័រ។ គិតថាវាជាព័ត៌មាន "ក្រោយស្វែង" ដែលជួយឲ្យគេហទំព័ររបស់អ្នកដំណើរការត្រឹមត្រូវ និងបង្ហាញបានត្រឹមត្រូវលើឧបករណ៍ និងវេទិកាផ្សេងៗ។ Metadata នេះប្រាប់កម្មវិធីច្រករុករកពីរបៀបបង្ហាញទំព័ររបស់អ្នក តួអក្សរដែលត្រូវកំណត់ និងរបៀបគ្រប់គ្រងទំហំអេក្រង់ផ្សេងៗ – របស់ទាំងនេះមានសារៈសំខាន់សម្រាប់បង្កើតទំព័របណ្ដាញដែលមានគុណភាព និងអាចចូលដំណើរការបាន។ ### ភារកិច្ច៖ បន្ថែមផ្នែក Head នៅក្នុងឯកសារ បញ្ចូលផ្នែក <head> នេះបណ្ដែកជាមួយស្លាកបើក និងបិទ <html> របស់អ្នក: បែងចែកអ្វីដែលធាតុនីមួយៗធ្វើបាន៖ - កំណត់ ចំណងជើងទំព័រដែលបង្ហាញនៅលើបដាខ្មៅកម្មវិធីច្រករុករកនិងលទ្ធផលស្វែងរក - កំណត់ អ្នកអញ្ចេត UTF-8 សម្រាប់បង្ហាញអក្សរត្រឹមត្រូវលើពិភពលោក - ធានា ការចុះឈ្មោះជាមួយប្រភេទកម្មវិធីច្រករុករក Internet Explorer ទំនើប - កំណត់ រចនាប័ទ្មប្រតិបត្តិការឆ្លើយតបដោយកំណត់បង្អួចវីវហ្វតឲ្យសមនឹងទទឹងឧបករណ៍ - គ្រប់គ្រង កម្រិតហ៊ុមដំបូងសម្រាប់បង្ហាញមាតិកាជាប្រវែងធម្មជាតិ ## ការបង្កើតផ្នែក Body នៃឯកសារ ធាតុ <body> រួមបញ្ចូលអត្ថបទដែលអាចមើលឃើញបានទាំងអស់របស់ទំព័រគេហទំព័រ – អ្វីគ្រប់យ៉ាងដែលអ្នកប្រើនឹងមើលឃើញ និងអន្តរកម្មជាមួយវា។ ខណៈដែលផ្នែក <head> ផ្តល់សេចក្តីណែនាំដល់កម្មវិធីច្រករុករក ផ្នែក <body> មានមាតិកាពិតប្រាកដ៖ អត្ថបទ រូបភាព ប៊ូតុង និងធាតុផ្សេងៗដែលបង្កើតផ្ទាំងអ្នកប្រើរបស់អ្នក។ ចូរបន្ថែមរចនាសម្ព័ន្ធ body ហើយយល់ដឹងពីរបៀបដែលស្លាក HTML ប្រើសហការជាមួយគ្នាសម្រាប់បង្កើតមាតិការសំខាន់។ ### យល់ដឹងពីរចនាសម្ព័ន្ធស្លាក HTML HTML ប្រើស្លាកលូតលាស់ដើម្បីកំណត់ធាតុ។ ស្លាកភាគច្រើន មានស្លាកបើកដូចជា <p> ហើយស្លាកបិទដូចជា </p>, ជាមួយមាតិកាក្នងទី: <p>Hello, world!</p>។ នេះបង្កើតធាតុអត្ថបទដែលមានអត្ថបទ "Hello, world!"។ ### ភារកិច្ច៖ បន្ថែមធាតុ Body ធ្វើបច្ចុប្បន្នភាពឯកសារ HTML របស់អ្នក ដើម្បីបញ្ចូលធាតុ <body>៖ នេះជារឿងដែលរចនាសម្ព័ន្ធពេញលេញនេះផ្ដល់សុពលភាព៖ - បង្កើត ស៊ុមឯកសារ HTML5 មូលដ្ឋាន - រួមបញ្ចូល Metadata សំខាន់សម្រាប់ការបង្ហាញត្រឹមត្រូវ - បង្កើត ផ្នែក <body> ទទេ សម្រាប់មាតិកាអ្នកអាចមើលឃើញ - អនុវត្ត វិធីល្អបំផុតនៃការអភិវឌ្ឍវេបសាយទំនើប ឥឡូវនេះអ្នកបានរួចរាល់ក្នុងការបញ្ជូលធាតុអាចមើលឃើញនៃ terrarium ។ យើងនឹងប្រើធាតុ <div> ជាកន្ត្រក ដើម្បីរៀបចំផ្នែកផ្សេងៗនៃមាតិកា និងធាតុ <img> ដើម្បីបង្ហាញរូបភាពរុក្ខជាតិ។ ### ធ្វើការជាមួយរូបភាព និងធាតុផ្ទុករៀបចំរចនាសម្ព័ន្ធ រូបភាពជាផ្នែកពិសេសក្នុង HTML ពីព្រោះវាប្រើស្លាក "បិទខ្លួនឯង"។ មិនដូចធាតុ <p></p> ដែលបង្រួមមាតិកាទេ ស្លាក <img> មានព័ត៌មានទាំងអស់នៅក្នុងស្លាកដោយប្រើលក្ខណៈពិសេសដូចជា src សម្រាប់បញ្ជាក់ទីតាំងឯកសាររូបភាព និង alt សម្រាប់អាចចូលប្រើបាន។ មុនសិនបន្ថែមរូបភាពទៅ HTML របស់អ្នក អ្នកត្រូវរៀបចំឯកសារគម្រោងបានត្រឹមត្រូវ ដោយបង្កើតថត images ហើយបញ្ចូលរូបភាពរុក្ខជាតិ។ ជំហានដំបូង សូមរៀបចំរូបភាពអ្នក៖ 1. បង្កើតថតឈ្មោះ images នៅក្នុងថតគម្រោង terrarium របស់អ្នក 2. ទាញយករូបភាពរុក្ខជាតិពី solution folder (រូបភាពរុក្ខជាតិ ១៤ រូប) 3. ចម្លងរូបភាពរុក្ខជាតិទាំងអស់ទៅក្នុងថត images ថ្មីរបស់អ្នក ### ភារកិច្ច៖ បង្កើតរចនាសម្ព័ន្ធបង្ហាញរុក្ខជាតិ ឥឡូវនេះបន្ថែមរូបភាពរុក្ខជាតិត្រូវបានរៀបចំជា ២ ជួរមេធ្វើនៅចន្លោះស្លាក <body></body> របស់អ្នក៖ ជំហានក្នុងកូដនេះមានអ្វីកើតឡើង៖ - បង្កើត រក្នុងទំព័រមេ container ជាមួយ id="page" ដើម្បីផ្ទុកមាតិកាទាំងអស់ - បង្កើត កន្ត្រកជួរស្ដាំ និងឆ្វេង៖ left-container និង right-container - រៀបចំ រុក្ខជាតិ ៧ មុខនៅជួរឆ្វេង និង ៧ មុខនៅជួរស្ដាំ - បង្រួម រូបភាពរុក្ខជាតិមួយៗនៅក្នុង div plant-holder សម្រាប់តំណត់ទីតាំងផ្ទាល់ខ្លួន - អនុវត្ត ឈ្មោះថ្នាក់សំរាប់ CSS តាមមេរៀនបន្ទាប់ - ផ្ដល់ ID យូរអង្វែងសំរាប់រូបភាពរុក្ខជាតិ សំរាប់អន្តរកម្ម JavaScript បន្តក្រោយ - បញ្ចូល ផ្លូវឯកសារមានភាពត្រឹមត្រូវទៅថត images ### 🔄 ពិនិត្យឥឡូវ យល់ដឹងពីរចនាសម្ព័ន្ធ៖ ចំណាយពេលមួយពិនិត្យរចនាសម្ព័ន្ធ HTML របស់អ្នក៖ - ✅ តើអ្នកអាចកំណត់ container សំខាន់ៗក្នុងរចនាសម្ព័ន្ធទិន្ន័យរបស់អ្នកទេ? - ✅ តើអ្នកយល់ដឹងហេតុអ្វីរូបភាពនីមួយៗមាន ID វិសេស? - ✅ តើអ្នកនិយាយពីគោលបំណងនៃ plant-holder div បានដូចម្តេច? ពិនិត្យមើលទិដ្ឋភាព៖ បើកឯកសារ HTML របស់អ្នកក្នុងកម្មវិធីច្រករុករក។ អ្នកគួរតែឃើញ៖ - បញ្ជីរូបភាពរុក្ខជាតាមូលដ្ឋាន - រូបភាពរៀបចំជា ២ ជួរ - រចនាសម្ព័ន្ធសាមញ្ញ មិនទាន់តុបតែង ចងចាំ៖ ទិដ្ឋភាពសាមញ្ញនេះគឺជារូបរាងដែល HTML គួរតែបង្ហាញ មុនពេល CSS នឹងបន្ថែមការតុបតែង! ដោយមាន markup នេះ, រុក្ខជាតិទាំងអស់នឹងបង្ហាញលើអេក្រង់ ប៉ុន្តែវានឹងមិនស្អាតនៅឡើយ — នេះជាការតុបតែង CSS សម្រាប់មេរៀនបន្ទាប់។ បច្ចុប្បន្ននេះអ្នកមានគ្រឹះ HTML ការពារយ៉ាងច្បាស់ ដើម្បីរៀបចំមាតិកា និងអនុវត្តន៍គន្លឹះ accessibility ល្អបំផុត។ ## ប្រើប្រាស់ Semantic HTML សម្រាប់ការចូលប្រើបាន Semantic HTML មានន័យថាប្រើធាតុ HTML ដោយផ្អែកលើអត្ថន័យ និងគោលបំណងរបស់វា មិនមែនតែមើលលក្ខណៈរូបរាងទេ។ នៅពេលដែលអ្នកប្រើ markup តាមពាក្យសម្រួលនេះ អ្នកកំពុងប្រាប់រចនាសម្ព័ន្ធ និងមាតិការបស់អ្នកទៅកម្មវិធីច្រករុករក ម៉ាស៊ីនស្វែងរក និងបច្ចេកវិទ្យាជំនួយដូចជា screen readers ។ វិធីនេះធ្វើឲ្យគេហទំព័ររបស់អ្នកចូលប្រើបានងាយស្រួលសម្រាប់អ្នកប្រើប្រាស់មានជំនួញ និងជួយម៉ាស៊ីនស្វែងរកយល់ពីមាតិការបស់អ្នកល្អប្រសើរជាងមុន។ វាជាគោលការណ៍មូលដ្ឋាននៃការអភិវឌ្ឍវេបសាយទំនើប ដែលបង្កើតបទពិសោធន៍ល្អបំផុតសម្រាប់គ្រប់គ្នា។ ### បន្ថែមចំណងជើង Semantic ទំព័រ ចូរបន្ថែមចំណងជើងត្រឹមត្រូវសម្រាប់ទំព័រ terrarium របស់អ្នក។ បញ្ចូលបន្ទាត់នេះក្រោមស្លាកបើក <body> របស់អ្នក ៖ ហេតុអ្វី markup semantic សំខាន់ ៖ - ជួយ អ្នកប្រើ screen reader អាចរកមើល និងយល់រចនាសម្ព័ន្ធទំព័រ - ធ្វើឲ្យប្រសើរ SEO ដោយបន្ថែមចំណាត់ថ្នាក់មាតិការ - បង្កើត Accessibility សម្រាប់អ្នកប្រើមានបញ្ហាតាមភ្នែក ឬ ភាពខុសគ្នាក្នុងការស្គាល់ - ផ្ដល់បទពិសោធន៍ប្រើប្រាស់ល្អលើទូរស័ព្ទនិងវេទិកាទាំងអស់ - គោរព តាមស្តង់ដារវេប និងវិធីអភិវឌ្ឍល្អបំផុត ឧទាហរណ៍ជម្រើស semantic vs non-semantic៖ ## បង្កើតកន្ត្រក Terrarium ឥឡូវនេះ តោះបន្ថែមរចនាសម្ព័ន្ធ HTML សម្រាប់ terrarium ផ្ទាល់ – គឺជាកន្ត្រកកញ្ចក់ដែលរុក្ខជាតិនឹងត្រូវបានដាក់នៅពេលក្រោយ។ ផ្នែកនេះបង្ហាញមូលដ្ឋានផ្នែកមួយ ៖ HTML ផ្ដល់រចនាសម្ព័ន្ធ ប៉ុន្តែគ្មានការតុបតែង CSS ធាតុទាំងនេះមិនត្រូវមើលឃើញនៅឡើយទេ។ markup terrarium ប្រើឈ្មោះថ្នាក់ដែលពិពណ៌នាមួយៗ ដែលនឹងធ្វើឲ្យ CSS តុបតែងយកបានយ៉ាងងាយស្រួល និងងាយទៅរកនៅមេរៀនបន្ទាប់។ ### ភារកិច្ច៖ បន្ថែមរចនាសម្ព័ន្ធ Terrarium បញ្ចូលmarkupនេះ ក្រោយស្លាក </div> ចុងក្រោយ (មុនស្លាកបិទ container ទំព័រ)៖ យល់ដឹងអំពីរចនាសម្ព័ន្ធ terrarium នេះ៖ - បង្កើត ធុងធ្យូងទឹកចម្បងជាមួយអត្តសញ្ញាណផ្ទាល់ខ្លួនសម្រាប់ការតុបតែងរចនាទិដ្ឋភាព - កំណត់ ធាតុបំបែកសម្រាប់មុខងារសំខាន់នីមួយៗ (ខាងលើ, ជញ្ជាំង, ដី, ខាងក្រោម) - រួមបញ្ចូល ធាតុរងសម្រាប់ប្រសិទ្ធភាពភាពចំរូងធញ្ញជញ្ជាំង (ធាតុភ្លឺ) - ប្រើប្រាស់ ឈ្មោះថ្នាក់ដែលមានការពិពណ៌នាច្បាស់លាស់ បញ្ជាក់មុខងាររបស់ធាតុគ្រប់យ៉ាង - រៀបចំ រចនាសម្ព័ន្ធសម្រាប់ CSS ដើម្បីបង្កើតរូបរាងធ្យូងធញ្ញជញ្ជាំង ### 🔄 ការត្រួតពិនិត្យផ្នែកផ្នត់គំនិត ជំនាញរចនាសម្ព័ន្ធ HTML៖ មុនពេលបន្តទៅមុខ សូមប្រាកដថាអ្នកអាច៖ - ✅ ពន្យល់ពីភាពខុសគ្នារវាងរចនាសម្ព័ន្ធ HTML និងរូបរាង - ✅ កំណត់ធាតុ HTML ផ្នែកមនោសញ្ចេតនា និងមិនមនោសញ្ចេតនា - ✅ ពណ៌នាថាតើ markup ត្រឹមត្រូវយ៉ាងដូចម្តេចបានអត្ថប្រយោជន៍សម្រាប់ភាពអាចចូលដល់ - ✅ ស្គាល់រចនាសម្ព័ន្ធដើមឯកសារបញ្ចប់ សាកល្បងដឹងចំណេះដឹងរបស់អ្នក៖ សូមព្យាយាមបើកឯកសារ HTML របស់អ្នកក្នុងកម្មវិធីរុករកដែលបានបិទ JavaScript និងលុប CSS ត្រូវ។ នេះបង្ហាញអ្នកឲ្យឃើញរចនាសម្ព័ន្ធមនោសញ្ចេតនាដែលអ្នកបានបង្កើត! --- ## ប្រយុទ្ធជាមួយ GitHub Copilot Agent ប្រើរបៀប Agent ដើម្បីបញ្ចប់បញ្ហាដូចតទៅ៖ ការពិពណ៌នា៖ បង្កើតរចនាសម្ព័ន្ធ HTML ផ្នែកមនោសញ្ចេតនាសម្រាប់ផ្នែកណែនាំថែទាំរុក្ខជាតិដែលអាចបញ្ចូលទៅក្នុងគម្រោងធ្យូងធញ្ញបាន។ ស្នើឲ្យ៖ បង្កើតផ្នែក HTML មនោសញ្ចេតនាដែលមានចំណងជើងចម្បង "Plant Care Guide", មានបីផ្នែករងដែលមានចំណងជើង "Watering", "Light Requirements", និង "Soil Care", ក្នុងមួយផ្នែករងមានប្រយោគពិពណ៌នាអំពីការថែររុក្ខជាតិ។ ប្រើស្លាក HTML មនោសញ្ចេតនាដូចជា <section>, <h2>, <h3>, និង <p> ដើម្បីរៀបចំមាតិកាជារបៀបត្រឹមត្រូវ។ សូមសិក្សាពីរបៀបបើកកម្មវិធី agent នេះ។ ## ប្រយុទ្ធសិក្សាប្រវត្តិ HTML ការសិក្សាអំពីការវិវត្តន៍បណ្ដាញ HTML បានវិវត្តយ៉ាងខ្លាំងចាប់តាំងពី Tim Berners-Lee បង្កើតកម្មវិធីរុករកបណ្ដាញដំបូងនៅ CERN ក្នុងឆ្នាំ ១៩៩០។ ធាតុចាស់ៗមួយចំនួនដូចជា <marquee> ខណៈនេះត្រូវបានលុបចេញពីការប្រើប្រាស់ ហេតុអ្វីបានជាវាមិនសមនឹងលទ្ធផលប្រើប្រាស់ដើម្បីភាពអាចចូលដល់ និងគោលការណ៍រចនារូបរាងឆ្លើយតបមួយទេ។ សាកល្បងតាមការប្រលងនេះ៖ 1. ស្រោចបិទចំណងជើង <h1> របស់អ្នកក្នុងស្លាក <marquee>៖ <marquee><h1>My Terrarium</h1></marquee> 2. បើកទំព័ររបស់អ្នកក្នុងកម្មវិធីរុករក ហើយមើលអត្ថិភាពរុករាល 3. គិតពីហេតុផលនៃការលុបចោលស្លាកនេះ (ដំណឹង៖ ការប្រើប្រាស់អ្នកប្រើ និងភាពអាចចូលដល់) 4. យកស្លាក <marquee> ចេញ ហើយត្រលប់ទៅប្រើ markup មនោសញ្ចេតនា សំណួរពិចារណា៖ - តើចំណងជើងរុករាលអាចប៉ះពាល់ដល់អ្នកប្រើដែលមានបញ្ហាស្រមោលភ្នែកឬការពិបាកចលនាដូចម្ដេច? - តើបច្ចេកទេស CSS សំរាប់ដំណើរការនេះអាចធ្វើឱ្យមានរូបរាងដូចគ្នាបានយ៉ាងដូចម្តេច? - ហេតុអ្វីដែលសំខាន់ក្នុងការប្រើប្រាស់ស្តង់ដារបណ្ដាញបច្ចុប្បន្នជំនួសធាតុដែលបាត់បង់? សូមស្វែងយល់បន្ថែមអំពី ធាតុ HTML ដែលបានបាត់បង់ និងលុបចោល ដើម្បីយល់ពីរបៀបដែលស្តង់ដារបណ្ដាញកែលម្អសម្រាប់បទពិសោធន៍អ្នកប្រើ។ ## ប្រឡងបន្ទាប់មកពីមេរៀន ប្រឡងបន្ទាប់មកពីមេរៀន ## សិក្សាទៅមុខ និង បង្រៀនខ្លួនឯង ពង្រឹងចំណេះដឹង HTML របស់អ្នក HTML ត្រូវបានប្រើជាផ្នែកមូលដ្ឋាននៃបណ្ដាញចាប់តាំងពីជាង ៣០ ឆ្នាំមកហើយ, វាគឺបានវិវត្តពីភាសាឯកសារទ្រង់ទ្រាយសាមញ្ញទៅជាវេទិការកម្រិតខ្ពស់សម្រាប់ការបង្កើតកម្មវិធីប្រតិបត្ដិការដែលអាចធ្វើប្រតិបត្តិការបាន។ ការយល់ដឹងពីការវិវត្តន៍នេះជួយអ្នកទទួលយកមូលដ្ឋានស្តង់ដារបណ្ដាញទំនើប និងធ្វើឲ្យមានការសម្រេចចិត្តអភិវឌ្ឍល្អ។ ផ្លូវការសិក្សាដែលបានណែនាំ៖ 1. ប្រវត្តិ និង បរិវេណ HTML - ស្រាវជ្រាវពេលវេលាចាប់ពី HTML 1.0 ដល់ HTML5 - ស្វែងយល់ហេតុផលដែលធាតុខ្លះត្រូវបានលុបចេញ (ភាពអាចចូលដល់, ភាពងាយស្រួលលើទូរស័ព្ទ, អាចថែរក្សាបាន) - ស្រាវជ្រាវពីលក្ខណៈពិសេស HTML ថ្មី និងការផ្តល់អនុសាសន៍ 2. រំលឹកជាមួយ HTML មនោសញ្ចេតនា - សិក្សារបំលាស់បំរើបញ្ជីពិភពពេញលេញនៃ ធាតុ HTML5 មនោសញ្ចេតនា - អនុវត្តការកំណត់ពេលដែលត្រូវប្រើ <article>, <section>, <aside>, និង <main> - រៀនអំពី ARIA សម្រាប់ការកែលម្អភាពអាចចូលដល់ 3. អភិវឌ្ឍបណ្ដាញទំនើប - ស្វែងយល់អំពី ការបង្កើតវេបសាយឆ្លាតវៃ នៅ Microsoft Learn - យល់ពីរបៀបដែល HTML បញ្ចូលជាមួយ CSS និង JavaScript - រៀនអំពីការល្បឿនបណ្ដាញ និងអនុវត្ត SEO ល្អបំផុត សំណួរពិចារណា៖ - តើធាតុ HTML ដែលបានលុបចោលណាអ្នកបានរកឃើញ ហើយហេតុអ្វីបានលុបចេញ? - តើលក្ខណៈពិសេស HTML ថ្មីណាដែលកំពុងត្រូវបាននាំមុខសម្រាប់ជំនាន់ក្រោយ? - តើ HTML មនោសញ្ចេតនាជួយដល់ភាពអាចចូលដល់ និង SEO ដូចម្តេច? ### ⚡ អ្វីដែលអ្នកអាចធ្វើបានក្នុង ៥ នាទីក្រោយនេះ - [ ] បើក DevTools (F12) ហើយពិនិត្យរចនាសម្ព័ន្ធ HTML នៃគេហទំព័រសំណព្វចិត្ត - [ ] បង្កើតឯកសារ HTML សាមញ្ញមានស្លាកមូលដ្ឋាន: <h1>, <p>, និង <img> - [ ] ត្រួតពិនិត្យភាពត្រឹមត្រូវ HTML របស់អ្នកដោយប្រើការផ្ទៀងផ្ទាត់ HTML W3C នៅអីនធឺរណិត - [ ] សាកល្បងបន្ថែមមតិទៅក្នុង HTML របស់អ្នកដោយប្រើ <!-- comment --> ### 🎯 អ្វីដែលអ្នកអាចទទួលបានក្នុងម៉ោងនេះ - [ ] បញ្ចប់ប្រឡងបន្ទាប់មកពីមគ្រឹះ និងពិនិត្យមើលមូលដ្ឋាន HTML មនោសញ្ចេតនា - [ ] បង្កើតគេហទំព័រសាមញ្ញអំពីខ្លួនឯងជាមួយរចនាសម្ព័ន្ធ HTML ត្រឹមត្រូវ - [ ] សាកល្បងកម្រិតចំណងជើង និងស្លាកធ្វើអក្សរផ្សេងៗ - [ ] បន្ថែមរូបភាព និងតំណភាគសម្រាប់អនុវត្តមេឌៀចម្រុះ - [ ] ស្រាវជ្រាវលក្ខណៈពិសេស HTML5 ដែលអ្នកមិនទាន់បានសាកល្បងទេ ### 📅 ដំណើរការសិក្សា HTML រយៈពេលមួយសប្តាហ៍ - [ ] បំពេញបេសកកម្មគម្រោងធ្យូងធញ្ញជាមួយ markup មនោសញ្ចេតនា - [ ] បង្កើតគេហទំព័រអាចចូលដល់ដោយប្រើស្លាក និងតួនាទី ARIA - [ ] អនុវត្តបែបបទជាមួយប្រភេទបញ្ចូលផ្សេងៗ - [ ] សិក្សា HTML5 API ដូចជា localStorage ឬ geolocation - [ ] រៀនគំរូ HTML ឆ្លើយតប និងរចនាបញ្ជាក់ជាមូលដ្ឋានសម្រាប់ទូរស័ព្ទ - [ ] ពិនិត្យកូដ HTML របស់អ្នកអភិវឌ្ឍរូបមនុស្សផ្សេងទៀតសម្រាប់ការអនុវត្តល្អៗ ### 🌟 មូលដ្ឋានបណ្ដាញរបស់អ្នករយៈពេលមួយខែ - [ ] បង្កើតគេហទំព័របង្ហាញជំនាញ HTML របស់អ្នក - [ ] រៀនការបង្កើតស្លាក HTML ជាមួយគម្រោងដូចជា Handlebars - [ ] ធ្វើការរួមចំណែកក្នុងគម្រោងឯកសារពាណិជ្ជកម្មដោយកែលម្អឯកសារ HTML - [ ] ជំនាញខ្ពស់ HTML ដូចជា ធាតុផ្ទាល់ខ្លួន - [ ] បញ្ចូល HTML ជាមួយ CSS Framework និងបណ្ណាល័យ JavaScript - [ ] ជំនួយអ្នកផ្សេងដែលកំពុងរៀនមូលដ្ឋាន HTML ## 🎯 រយៈពេលជំនាញ HTML របស់អ្នក ### 🛠️ សង្ខេបឧបករណ៍ HTML របស់អ្នក បន្ទាប់ពីបញ្ចប់មេរៀននេះ អ្នកមាន៖ - រចនាសម្ព័ន្ធឯកសារ៖ មូលដ្ឋាន HTML5 ពេញលេញជាមួយ DOCTYPE ត្រឹមត្រូវ - Markup មនោសញ្ចេតនា៖ ស្លាកមានអត្ថន័យដែលកែលម្អភាពអាចចូលដល់ និង SEO - បញ្ចូលរូបភាព៖ ការរៀបចំឯកសារដោយត្រឹមត្រូវ និងការអនុវត្តអត្ថបទ alt - ធុងដាក់រចនាសម្ព័ន្ធ៖ ប្រើ div ជាមុនស្រាលជាមួយឈ្មោះថ្នាក់ពិពណ៌នា - ដឹងពីភាពអាចចូលដល់៖ យល់ដឹងពីការបំលែងទៅអ្នកអានអេក្រង់ - ស្តង់ដារបច្ចុប្បន្ន៖ ការអនុវត្ត HTML5 ថ្មី និងការយល់ដឹងអំពីធាតុលុបចោល - មូលដ្ឋានគម្រោង៖ មូលដ្ឋានរឹងមាំសម្រាប់ CSS និង JavaScript អន្តរាគមន៍ ជំហានបន្ទាប់៖ រចនាសម្ព័ន្ធ HTML របស់អ្នកភ្រំប្រាប់សម្រាប់ CSS! មូលដ្ឋានមនោសញ្ចេតនាដែលអ្នកបានបង្កើត នឹងធ្វើឱ្យមេរៀនបន្ទាប់យល់បានស្រួលជាងមុន។ ## បេសកកម្ម អនុវត្ត HTML របស់អ្នក៖ បង្កើតម៉ូឃាប់ប្លុក --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> ការមិនទទួលខុសត្រូវ: ឯកសារនេះត្រូវបានបញ្ចូនបម្លែងដោយប្រើសេវាកម្មបកប្រែ AI Co-op Translator។ ទោះបីយើងខិតខំធ្វើឲ្យមានភាពត្រឹមត្រូវក៏ដោយ សូមយល់ដឹងថាការបកប្រែដោយស្វ័យប្រវត្តិអាចមានកំហុសឬការមិនត្រឹមត្រូវ។ ឯកសារដើមជាភាសារបស់ខ្លួនគឺត្រូវបានចាត់ទុកជាប្រភពដែលមានអំណាចបំផុត។ សម្រាប់ព័ត៌មានសំខាន់ៗ សូមណែនាំឲ្យប្រើការបកប្រែដោយមនុស្សដែលមានជំនាញ។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ច្រឡំ ឬការបកស្រាយខុសដែលកើតឡើងពីការប្រើប្រាស់ការបកប្រែនេះឡើយ។ <!-- CO-OP TRANSLATOR DISCLAIMER END -->
គម្រោង Terrarium ផ្នែកទី 2៖ ការណែនាំអំពី CSS
ចងចាំថា terrarium HTML របស់អ្នកមើលទៅមានរចនាសម្ព័ន្ធសាមញ្ញមែនទេ? CSS គឺជាកន្លែងដែលយើងបម្លែងរចនាសម្ព័ន្ធធម្មតានោះទៅជារូបរាងដែលគួរឲ្យទាក់ទាញ។ បើ HTML ដូចជាការបង្កើតស៊ុមផ្ទះ មក CSS គឺជារឿងរាល់យ៉ាងដែលធ្វើឲ្យវាហាក់ដូចជាផ្ទះ - ពណ៌លាប ពន្លឺ ទីតាំងគ្រឿងសង្ហារឹម និងរបៀបបន្ទប់ផ្សំគ្នា។ គិតអំពីរបៀបដែលអគារព្រះរាជវាំង Versailles បានចាប់ផ្តើមជាបន្ទប់ស្ទង់វាយសត្វ ពិតប្រាកដប៉ុន្តែលក្ខណៈពិសេសនៃការតុបតែង និងការរៀបចំបានបម្លែងវាជាអគារដ៏អស្ចារ្យមួយនៅលើពិភពលោក។ ថ្ងៃនេះ យើងនឹងបម្លែង terrarium របស់អ្នកពីការប្រើប្រាស់ជាតំណាងឆ្នាំទៅកាន់រចនាបទស្អាត។ អ្នកនឹងរៀនរបៀបដាក់តំណាងត្រឹមត្រូវ បង្កើតរចនាសម្ព័ន្ធឲ្យឆ្លើយតបទៅនឹងទំហំអេក្រង់ផ្សេងៗ និងបង្កើតរូបរាងដែលធ្វើឲ្យវេបសាយគួរត្រូវចាប់អារម្មណ៍។ នៅចុងបញ្ចប់មេរៀននេះ អ្នកនឹងឃើញថារបៀបដាក់រចនាសម្ព័ន្ធ CSS ដោយយុទ្ធសាស្រ្តអាចធ្វើឲ្យគម្រោងរបស់អ្នកមានការកែប្រែយ៉ាងខ្លាំង។ ចូរចាប់ផ្តើមបន្ថែមរចនាបទទៅ terrarium របស់អ្នក។ ## សំណួរទិញមុនមេរៀន សំណួរទិញមុនមេរៀន ## ការចាប់ផ្តើមជាមួយ CSS ជាញឹកញាប់ CSS ត្រូវបានគេចាត់ទុកថាគឺជាការធ្វើឲ្យរឿងស្អាត តែវាពិតជាមានគោលបំណងធំជាងនេះ។ CSS គឺដូចជាអ្នកដឹកនាំរឿងភាពយន្ត - អ្នកគ្រប់គ្រងមិនតែនឹងរូបរាងនៃរាល់អ្វីទាំងអស់ទេ តែបង្រួមរបៀបចលនា ឆ្លើយតបនឹងអន្តរកម្ម និងឆ្លើយតបទៅនឹងស្ថានភាពផ្សេងៗ។ CSS មែនទែនមានសមត្ថភាពខ្ពស់ក្នុងសម័យទំនើប។ អ្នកអាចសរសេរកូដដែលបត់បែនរចនាសម្ព័ន្ធស្វ័យប្រវត្តិសម្រាប់ទូរស័ព្ទ ថេប្លេត និងកុំព្យូទ័រប្រភេទដេកតូប។ អ្នកអាចបង្កើតចលនារលូនដែលណែនាំការយកចិត្តទុកដាក់របស់អ្នកប្រើនៅកន្លែងដែលត្រូវការ។ លទ្ធផលអាចមានភាពអស្ចារ្យពេលគ្រប់យ៉ាងសម្របសម្រួលគ្នា។ នេះគឺជាអ្វីដែលយើងនឹងសម្រេចបាននៅក្នុងមេរៀននេះ៖ - បង្កើត រចនាបទទាំងមូលសម្រាប់ terrarium របស់អ្នកដោយប្រើបច្ចេកវិទ្យា CSS ទំនើប - ស្វែងយល់ មូលដ្ឋានគ្រឹះដូចជា cascade, inheritance និង CSS selectors - អនុវត្ត យុទ្ធសាស្រ្តដាក់ទីតាំងឆ្លើយតប និងរចនាសម្ព័ន្ធ - សាងសង់ ទ្រឹស្តី terrarium ដោយប្រើរាង និងរចនាសម្ព័ន្ធ CSS ### លក្ខខណ្ឌមុន អ្នកគួរតែបានបញ្ចប់រចនាសម្ព័ន្ធ HTML សម្រាប់ terrarium របស់អ្នកពីមេរៀនមុន និងមានវាគ្រាន់សម្រាប់បន្ថែមរចនាបទ។ ### ការកំណត់ឯកសារ CSS របស់អ្នក មុនពេលអ្នកចាប់ផ្តើមបន្ថែមរចនាបទ យើងត្រូវភ្ជាប់ CSS ទៅ HTML របស់យើង។ ការភ្ជាប់នេះប្រាប់កម្មវិធីរុករកមករកឃើញវិធីសាស្រ្តរៀបចំរចនាបទសម្រាប់ terrarium របស់យើង។ ក្នុងថត terrarium របស់អ្នក បង្កើតឯកសារថ្មីមួយឈ្មោះ style.css ហើយភ្ជាប់វាចូលទៅក្នុងផ្នែក <head> នៃឯកសារ HTML៖ អ្វីដែលកូដនេះធ្វើ៖ - បង្កើត ការតភ្ជាប់ចន្លោះឯកសារ HTML និង CSS របស់អ្នក - ប្រាប់កម្មវិធីរុករកទាញយក និងអនុវត្តរចនាបទពី style.css - ប្រើ attributes rel="stylesheet" ដើម្បីបញ្ជាក់ថាវាជាឯកសារ CSS - យោងទៅផ្លូវឯកសារជាមួយ href="./style.css" ## ការយល់ដឹងអំពី CSS Cascade អ្នកធ្លាប់ហួសចិត្តមកទេថាហេតុអ្វីបានហៅ CSS ថា "Cascading" Style Sheets? រចនាបទឆ្លងចុះដូចជារលកទឹក ហើយពេលខ្លះវាប្រឈមមុខនឹងការប្រឆាំងគ្នា។ គិតពីរបៀបដែលរចនាសម្ព័ន្ធបញ្ជារបស់យោធា - ពាក្យបញ្ជាសកលទូទៅប្រហែលជា "ក្រុមយោធារទាំងអស់ពាក់ពណ៌បៃតង" ប៉ុន្តែច្បាប់ពិសេសសម្រាប់ក្រុមរបស់អ្នកប្រហែលជា "ពាក់សម្លៀកបំពាក់ខៀវសម្រាប់ពិធី"។ ការបញ្ជាពិសេសមានអាទិភាពជាង។ CSS បើកលក្ខណៈដូចគ្នា ហើយការយល់ដឹងពីលំដាប់នេះធ្វើឲ្យមានភាពងាយស្រួលក្នុងការដោះស្រាយកំហុស។ ### សាកល្បងលំដាប់អាទិភាព Cascade យើងមើលកំហុសរចនាបទដោយបង្កើតការប្រឆាំងរចនាបទមួយ។ ជំហានដំបូង បន្ថែមរចនាបទ inline នៅ <h1> របស់អ្នក៖ អ្វីដែលកូដនេះធ្វើ៖ - អនុវត្តពណ៌ក្រហមផ្ទាល់ទៅ <h1> ដោយប្រើ inline style - ប្រើ attributes style ដើម្បីបញ្ចូល CSS ត្រឹម HTML - បង្កើតច្បាប់រចនាបទមានអាទិភាពខ្ពស់បំផុតសម្រាប់ធាតុនេះ បន្ទាប់មក បន្ថែមច្បាប់នេះទៅក្នុងឯកសារ style.css របស់អ្នក៖ នៅលើនេះ យើងបាន: - កំណត់ច្បាប់ CSS ដែលគោលដៅទៅធាតុ <h1> ទាំងអស់ - កំណត់ពណ៌អក្សរជាស្វយ័តដោយផ្សេងពីរចនាបទ inline - បង្កើតច្បាប់មានអាទិភាពទាបជាង inline style ✅ តេស្តចំណេះដឹង: តើពណ៌ណាមួយត្រូវបង្ហាញនៅក្នុងកម្មវិធីវេបរបស់អ្នក? ហេតុអ្វីពណ៌នោះជាសំខាន់? តើអ្នកគិតរឿងណាដែលអ្នកចង់លុបបំបាត់រចនាបទទេ? ## CSS Inheritance ក្នុងការអនុវត្ត CSS inheritance ដូចជា genetics -ធាតុទទួលពហុលទ្ធផលពីឪពុកម្ដាយរបស់វា។ ប្រសិនបើអ្នកកំណត់ fontfamily នៅលើធាតុ body អក្សរមាននៅខាងក្នុងទាំងអស់នឹងប្រើ font នោះផ្ទាល់។ វាដូចជារបៀបដែលសម្រួលក្បាលរបស់គ្រួសារ Habsburg បានបញ្ចប់នៅពហុជំនាន់ដោយមិនចាំបាច់កំណត់ជាមួយរាល់មនុស្សម្នាក់ៗ។ ប៉ុន្តែ មិនមែនអ្វីគ្រប់យ៉ាងទទួល inheritance ទេ។ ស្ទីលអក្សរដូចជាfonts និងពណ៌ទទួល inheritance ប៉ុន្តែមុខងាររចនាសម្ព័ន្ធដូចជា margins និង borders មិនទទួល inheritance ទេ។ ដូចជា កូនៗចាត់ទុកលក្ខណៈរាងកាយប៉ុន្តែមិនទទួលជំនាញនៃតុបតែងពីឪពុកម្ដាយ។ ### ការសង្កេត inheritance របស់ font យើងមើល inheritance ដោយកំណត់ fontfamily សម្រាប់ធាតុ <body>៖ បំបែកអ្វីដែលកើតឡើងនៅទីនេះ៖ - កំណត់ fontfamily សម្រាប់ទំព័រទាំងមូលដោយគោលដៅទៅ <body> - ប្រើ font stack មានជម្រើស fallback សម្រាប់ការគាំទ្រល្អបំផុតពីកម្មវិធីរុករក - អនុវត្ត font ដែលមានសម័យទំនើបដែលមើលទៅល្អលើប្រព័ន្ធប្រតិបត្តិការផ្សេងៗ - ធានា ថា ធាតុចិញ្ចឹមទាំងអស់ទទួល font នេះ លើកលែងតែមានការរំលិលដោយពិសេស បើកឧបករណ៍អ្នកអwickdeck HTML (F12) ចូលទៅក្នុងផ្ទាំង Elements ហើយពិនិត្យ <h1> របស់អ្នក។ អ្នកនឹងឃើញថាវាទទួល font family ពី body: ✅ ពេលសាកល្បង: ចូរព្យាយាមកំណត់លក្ខណៈផ្សេងទៀតដែលអាចទទួល inheritance នៅលើ <body> ដូចជា color, line-height, ឬ text-align។ តើមានអ្វីកើតឡើងទៅលើចំណងជើង និងធាតុផ្សេងៗ? ### 🔄 ការត្រួតពិនិត្យស្តង់ដារ ការយល់ដឹងមូលដ្ឋាន CSS : មុនពេលបន្តទៅ selectors សូមធ្វើឲ្យប្រាកដថា អ្នកអាច៖ - ✅ អធិប្បាយភាពខុសគ្នារវាង cascade និង inheritance - ✅ ទាយទោលថារចនាបទណានឹងឈ្នះនៅក្នុងការប្រឆាំងច្បាប់ specificity - ✅ រកឃើញលក្ខណៈណាដែលទទួល inheritance ពីមាតាធាតុ - ✅ ភ្ជាប់ឯកសារ CSS ទៅ HTML បានយ៉ាងត្រឹមត្រូវ តេស្តរហ័ស: ប្រសិនបើអ្នកមានរចនាបទទាំងនេះ តើពណ៌អ្វីដែល <h1> ក្នុង <div class="special"> នឹងមាន? ចម្លើយ៖ ក្រហម (element selector បង្ហាញទៅ h1 បន្ទាន់) ## ការជំនាញ CSS Selectors CSS selectors ជាវិធីសាស្រ្តដើម្បីគោលដៅធាតុជាក់លាក់សម្រាប់រចនាបទ។ វាដូចជាការបញ្ជាទិសត្រឹមត្រូវ - មិនមែននិយាយថា "ផ្ទះ" ទេ តែថា "ផ្ទះពណ៌ខៀវដែលមានទំពារក្រហមនៅផ្លូវ Maple"។ CSS ផ្តល់ជម្រើសផ្សេងៗបំផុតសម្រាប់ការជាក់លាក់ ហើយការជ្រើសរើស selector ត្រឹមត្រូវដូចជាការជ្រើសឧបករណ៍អាចមួយសម្រាប់អង្គភាព។ ពេលខ្លះអ្នកត្រូវរចនាបទទៅលើទ្វារទាំងអស់ក្នុងតំបន់ ហើយពេលមួយគ្រាន់តែទ្វារមួយជាក់លាក់។ ### Element Selectors (ស្លាក) Element selectors គោលដៅទៅធាតុ HTML ដោយឈ្មោះស្លាករបស់វា។ វាជាជម្រើសល្អសម្រាប់កំណត់រចនាបទមូលដ្ឋានដែលប្រើប្រាស់ទូទាំងទំព័រ៖ យល់ដឹងអំពីរចនាបទទាំងនេះ៖ - កំណត់ typography សរុបនៅទំព័រទាំងមូលដោយ selector body - ដកចេញ margins និង padding ដើមរបស់កម្មវិធីរុករកសម្រាប់ការត្រួតផ្នែកត្រឹមត្រូវ - រចនា អក្សរពហុចំណងជើងដោយ color, alignment និងspacing - ប្រើ rem ជាឯកតាដើម្បីមើលថាហួសកំណត់ដល់ទំហំអក្សរជាប្រកបដោយអាចចូលដំណើរការ បើទោះ Element selectors ចំណាស់ល្អសម្រាប់រចនាបទទូទៅ អ្នកត្រូវការជ្រើសរើស selectors ផ្សេងៗសម្រាប់រចនារឿងផ្សេងៗដូចជារុក្ខជាតិនៅក្នុង terrarium របស់អ្នក។ ### ID Selectors សម្រាប់ធាតុឯកទេស ID selectors ប្រើសញ្ញា # ហើយគោលដៅទៅធាតុដែលមាន attributes id ជាក់លាក់។ ពីព្រោះ ID ត្រូវតែមានតែមួយក្នុងទំព័រ វាជាជម្រើសល្អសម្រាប់រចនាបទធាតុឯកខ្លួនដូចជា containers រុក្ខជាតិខាងឆ្វេង និងខាងស្តាំរបស់ terrarium ។ ចូរបង្កើតរចនាបទសម្រាប់ containers ភាគខាងដៃនៃ terrarium ដែលរុក្ខជាតិរស់នៅ៖ អ្វីដែលកូដនេះសម្រេច៖ - ដាក់ទីតាំង containers នៅគ្រាប់ឆ្វេងចុងក្រោយ និងស្តាំអេក្រង់ដោយ absolute positioning - ប្រើ vh ឯកតាបរិមាណកម្ពស់ដើម្បីឆ្លើយតបទៅនឹងទំហំអេក្រង់ - អនុវត្ត box-sizing: border-box ដើម្បីបញ្ចូល padding ទៅក្នុងទទឹងសរុប - ដកចេញ ឯកតា px មិនចាំបាច់ពីតម្លៃសូន្យសម្រាប់កូដស្អាត - កំណត់ពណ៌ផ្ទៃខាងក្រោយស្រាលដែលងាយស្រួលមើលជាងពណ៌ប្រផេះខាងចចារ ✅ កិច្ចការបញ្ញាតិចំពោះគុណភាពកូដ: ចូរបញ្ជាក់ថា CSS នេះបន្សល់នៅលើក្បាលបញ្ជារបស់ DRY (កុំធ្វើម្តងទៀត)។ តើអ្នកអាចធ្វើការកែប្រែវា ដោយប្រើទាំង ID និង class ទេ? វិធីសាស្រ្តបានធ្វើឱ្យប្រសើរ: ### Class Selectors សម្រាប់រចនាបទអាចប្រើឡើងវិញ Class selectors ប្រើសញ្ញា . ហើយល្អសម្រាប់ការអនុវត្តរចនាបទដូចគ្នាចំពោះធាតុជាច្រើន។ ខុសពី IDs, classes អាចប្រើឡើងវិញបាននៅទូទាំង HTML របស់អ្នក ដែលធ្វើឲ្យវាល្អសម្រាប់មូឌែលរចនាបទថេរ។ នៅក្នុង terrarium របស់យើង រុក្ខជាតិមួយៗត្រូវការរចនាបទដូចគ្នា ប៉ុន្តែក៏ត្រូវការ ទីតាំងផ្សេងៗផ្ទាល់ខ្លួន។ យើងនឹងប្រើការរួមបញ្ចូលគ្នារវាង classes សម្រាប់រចនាបទសំរបសំរួល និង IDs សម្រាប់ទីតាំងតែមួយៗ។ នេះគឺជារចនាសម្ព័ន្ធ HTML សម្រាប់រុក្ខជាតិមួយៗ: ធាតុសំខាន់ៗបានពណ៌នា៖ - ប្រើ class="plant-holder" សម្រាប់រចនាគ្រឿងទ្រង់ទ្រាយដូចគ្នាទៅលើរុក្ខជាតិទាំងអស់ - អនុវត្ត class="plant" សម្រាប់រចនារូបភាព និងស្វ័យប្រវត្តិការព្រិត្តិការណ៍ - រួមបញ្ចូល id="plant1" ឯកជនសម្រាប់ការដាក់ទីតាំង និងអន្តរកម្មជាមួយ JavaScript - ផ្តល់ អត្ថបទ alt ដែលពិពណ៌នាសម្រាប់ជំនួយអ្នកប្រើអានអេក្រង់ ឥឡូវបន្ថែមរចនាបទទាំងនេះទៅក្នុងឯកសារ style.css របស់អ្នក៖ បំបែករចនាបទទាំងនេះ៖ - បង្កើត ទីតាំង relative សម្រាប់ container រុក្ខជាតិដើម្បីបង្កើត context ទីតាំង - កំណត់ ទំហំជម្ពស់ 13% សម្រាប់រាល់ container ដើម្បីធានារុក្ខជាតិទាំងអស់ស្ថិតខាងលើតួរអេក្រង់ដោយគ្មានការផ្លាស់ទី - ផ្លាស់ទី container ថ្មីៗឲ្យផ្នែកខាងឆ្វេងបន្តិច សម្រាប់មធ្យមកណ្ដាលល្អជាង - អនុញ្ញាត រុក្ខជាតិធ្វើបរិមាត្រស្វ័យប្រវត្តិដោយប្រើគុណលក្ខណៈ max-width និង max-height - ប្រើ z-index ដើម្បីដាក់រុក្ខជាតិឲ្យនៅផ្នែកលើធាតុផ្សេងៗនៅក្នុង terrarium - បន្ថែម ផលប៉ះពាល់ hover ស្រាលជាមួយ transition CSS សម្រាប់អន្តរកម្មល្អប្រសើរ ✅ គិតយ៉ាងយកចិត្តទុកដាក់: ហេតុអ្វីក្រុមប្រើផ្នែកទាំងពីរ .plant-holder និង .plant? តើអ្វីដែលកើតឡើងប្រសិនបើយើងប្រើមួយគត់? ## ការយល់ដឹងអំពីទីតាំង CSS ទីតាំង CSS ដូចជាអ្នកដឹកនាំឆាកមួយ - អ្នកបញ្ជាថាតេទីតាំងនិងចលនារបស់សមាជិកគ្រប់គ្នាទៅនៅចន្លោះឆាក។ មានអ្នកត ស្គាល់តាមរចនាសម្ព័ន្ធផ្លូវបុរាណ ខណៈអ្នកផ្សេងទៀតត្រូវការទីតាំងជាក់លាក់សម្រាប់ប្រយោជន៍លើសកម្មភាព។ ពេលអ្នកយល់ពីទីតាំង សំណួររចនាសម្ព័ន្ធជាច្រើនក្លាយជាអាចគ្រប់គ្រងបាន។ តើអ្នកចង់មានបណ្តាញ navigation រិះរិះនៅលើខ្លួនម៉ឺនណាស់នៅពេលអ្នករុករកទេ? ទីតាំងគ្រប់គ្រងយ៉ាងហោចណាស់។ តើអ្នកចង់មាន tooltip បង្ហាញនៅទីតាំងជាក់លាក់? នោះក៏ជាទីតាំងផងដែរ។ ### មូលដ្ឋានទាំងប្រាំរបស់ទីតាំង ### ទីតាំងក្នុង Terrarium របស់យើង Terrarium របស់យើងប្រើការបញ្ចូលសមាសធាតុទីតាំងយ៉ាងយុទ្ធសាស្រ្ត ដើម្បីបង្កើតរចនាសម្ព័ន្ធដែលចង់បាន៖ យល់ដឹងពីយុទ្ធសាស្រ្តទីតាំង៖ - Containers absolute ត្រូវបានដកចេញពីរលកស្គាល់ឯកសាររបស់ពិភពលោក ហើយត្រូវបានត្រួតត្រាចូលទន្លេអេក្រង់ - Plant holders relative បង្កើត context ទីតាំងខណៈនៅក្នុងរលកស្គាល់ឯកសារ - រុក្ខជាតិ absolute អាចដាក់ទីតាំងបានយ៉ាងត្រឹមត្រូវក្នុង container relative របស់ពួកវា - ការរួមបញ្ចូលនេះ អនុញ្ញាតឲ្យរុក្ខជាតិត្រូវដាក់ជួរទៅនឹងទិសដៅដេក លើសពីនេះអាចបំពានតាមទីតាំងផ្ទាល់ខ្លួនបាន ✅ ពេលសាកល្បង: សូមផ្លាស់ប្ដូរទីតាំង និងកំណត់មើលលទ្ធផល៖ - តើមានអ្វីកើតឡើងបើអ្នកប្ដូរ .container ពី absolute ទៅ relative? - តើរចនាប័ទ្មមានការផ្លាស់ប្តូរយ៉ាងដូចម្តេច ប្រសិនបើ .plant-holder ប្រើ absolute ជំនួស relative? - តើមានអ្វីកើតឡើងពេលអ្នកប្ដូរ .plant ទៅ relative positioning? ### 🔄 ការត្រួតពិនិត្យផ្នែកសិក្សា ភាពជួសជុលក្នុងការចាត់តាំង CSS៖ រំលឹកដើម្បីផ្ទៀងផ្ទាត់ការយល់ដឹងរបស់អ្នក៖ - ✅ តើអ្នកអាចពណ៌នាហេតុផលដែលរុក្ខជាតិត្រូវការជួសជុលតាំង absolute សម្រាប់ការទាញនិងដាក់ទុកបានទេ? - ✅ តើអ្នកយល់ដឹងយ៉ាងដូចម្តេចពីរបៀប Containers relative បង្កើតបរិបទចាត់តាំង? - ✅ ហេតុអ្វីបានជាកុងតឺន័រខｓចំហៀងប្រើជួសជុលតាំង absolute? - ✅ តើមានអ្វីកើតឡើង ប្រសិនបើអ្នកយកការបញ្ជាក់់ជួសជុលតាំងចេញទាំងស្រុង? ការតភ្ជាប់ជាមួយពិភពជាក់ស្ដែង៖ គិតអំពីរបៀបដែលការចាត់តាំង CSS ស្រដៀងទៅនឹងរចនាប័ទ្មក្នុងពិភពជាក់ស្ដែង៖ - Static៖ សៀវភៅនៅលើធ្នេញ (លំដាប់ធម្មជាតិ) - Relative៖ ផ្លាស់ទីសៀវភៅបន្តិច ប៉ុន្តែមិនបាត់ទីតាំងវា - Absolute៖ ដាក់ស្លាកសៀវភៅនៅលើគេហទំព័រ - Fixed៖ សន្លឹកតំណាកដែលនៅតែឃើញនៅពេលអ្នកបត់ទំព័រ ## ការសង់ Terrarium ជាមួយ CSS ឥឡូវនេះ យើងនឹងសង់ដបន្ទប់កញ្ចក់ដោយប្រើតែ CSS ប៉ុណ្ណោះ - មិនចាំបាច់រូបភាព ឬកម្មវិធីគំនូរ។ ការបង្កើតកញ្ចក់ដែលមើលទៅពិតជាមួយស្រមោល និងផលប៉ះពាល់ជ្រៅដោយប្រើការចាត់តាំងនិងភាពត្រជាក់បង្ហាញពីសមត្ថភាពទស្សនិកជនរបស់ CSS។ បច្ចេកទេសនេះស្រដៀងនឹងរបៀបដែលស្ថាបតិករនៅចលនាបោហៅហ្សបានប្រើរូបរាងជាគោលចំបងដើម្បីបង្កើតអាគារស្អាតស្មុគស្មាញ។ ពេលអ្នកយល់រឿងទាំងនេះ អ្នកនឹងទទួលស្គាល់បច្ចេកវិទ្យា CSS នៅក្រោយរចនាប័ទ្មបណ្ដាញជាច្រើន។ ### ការបង្កើតគ្រឿងបន្លាស់ធុងកញ្ចក់ ឲ្យយើងសង់ធុង Terrarium រៀងរាល់ផ្នែកមួយៗ។ ផ្នែកនីមួយៗប្រើជួសជុលតាំង absolute និងទំហំពាណលើភាគរយសម្រាប់រចនាប័ទ្មឆ្វេងឆ្វាញ៖ ការយល់ដឹងពីការសាងសង់ terrarium៖ - ប្រើ ទំហំផ្អែកលើភាគរយសម្រាប់ការកំណត់ទំហំឆ្វេងឆ្វាញគ្រប់ទំហំអេក្រង់ - តាំងទីតាំង ធាតុដោយជួសជុលតាំង absolut ដើម្បីធ្វើឱ្យដាក់ទៅលើនិងស្របគ្នាយ៉ាងច្បាស់ - អនុវត្ត តម្លៃភាពច្បាស់ផ្សេងៗដើម្បីបង្កើតផលប៉ះពាល់ត្រជាក់កញ្ចក់ - ប្រើ z-index ដើម្បីដាក់រុក្ខជាតិក្នុងធុង - បន្ថែម ប្លុកស្រមោល និងព្រំដែនបត់សម្រាប់មើលទៅពិតជាងមុន ### រចនាប័ទ្មឆ្វេងឆ្វាញជាមួយភាគរយ មើលឃើញបានដូច្នេះទាំងអស់ទំហំប្រើភាគរយ មិនមែនម៉ាស៊ីនជាន់ pixel ទេ៖ ហេតុអ្វីបានជាវាមានសារៈសំខាន់៖ - ធានា ថា terrarium មានការកើនទំហំនឹងអេក្រង់គ្រប់ទំហំប្រកួតគ្នា - ថែរក្សា ទំនាក់ទំនងរវាងផ្នែកនានារបស់ធុង - ផ្តល់ បទពិសោធន៍មានលក្ខណៈទីតាំងរួមពីទូរស័ព្ទដល់កុំព្យូទ័រធំៗ - អនុញ្ញាត រចនាប័ទ្មឲ្យផ្លាស់ប្ដូរដោយគ្មានការបាក់បែកក្នុងរចនាប័ទ្មទស្សនា ### អង្គធាតុ CSS កំពុងដំណើរការ យើងប្រើអង្គធាតុ rem សម្រាប់ border-radius ដែលធៀបមកពីទំហំណូតផ្ទាល់អក្សរដើម។ វាបង្កើតរចនាប័ទ្មមានភាពងាយស្រួល និងគោរពចំពោះចំណូលចិត្តអក្សររបស់អ្នកប្រើ។ សូមស្វែងយល់បន្ថែមពី អង្គធាតុចាំបាច់ CSS នៅក្នុងការពិពណ៌នាផ្លូវការជាថ្មី។ ✅ ការប្រឡងរូបភាព៖ សាកល្បងកែប្រែតម្លៃទាំងនេះ ហើយមើលផលប៉ះពាល់៖ - កែប្រែភាពត្រជាក់របស់ធុងពី 0.5 ទៅ 0.8 – តើវាធ្វើអោយកញ្ចក់មើលទៅយ៉ាងដូចម្តេច? - កែទឹកពណ៌ដីពី #3a241d ទៅ #8B4513 – មានផលប៉ះពាល់ភ្នែកយ៉ាងដូចម្តេច? - ប្ដូរ z-index របស់ដីទៅ 2 – តើការដាក់ជាន់មានអ្វីបម្លែង? ### 🔄 ការត្រួតពិនិត្យផ្នែកសិក្សា ការយល់ដឹងរចនាតុបតែង CSS៖ ប្រាកដថាអ្នកយល់ពី CSS ទស្សនិកភាព៖ - ✅ តើការប្រើទំហំជាភាគរយធ្វើឲ្យរចនាប័ទ្មឆ្វេងឆ្វាញដូចម្តេច? - ✅ ហេតុអ្វីបានជា opacity បង្កើតលក្ខណៈត្រជាក់កញ្ចក់? - ✅ តើតួនាទីរបស់ z-index នៅក្នុងការដាក់ទង់ធាតុមានអ្វីខ្លះ? - ✅ តើតម្លៃ border-radius បង្កើតរូបរាងធុងយ៉ាងដូចម្តេច? គោលការណ៍រចនា៖ សង្កេតឃើញថាយើងកំពុងបង្កើតរូបភាពស្មុគស្មាញពីរូបរាងសាមញ្ញ៖ 1. ប្រអប់មូល → ប្រអប់មូលបត់គម្រប់ → ផ្នែកធុង 2. ពណ៌ទត់ → ភាពច្បាស់ → ផលប៉ះពាល់កញ្ចក់ 3. ធាតុបុគ្គល → ការប្រឡងតំឡើង → ការមើលជា 3D --- ## ត្រូវប្រើ GitHub Copilot Agent Challenge 🚀 ប្រើរបៀប Agent ដើម្បីបញ្ចប់បច្ចេកទេសដូចខាងក្រោម៖ ពណ៌នា: បង្កើតAnimation CSS ដែលធ្វើអោយរុក្ខជាតិ terrarium រុំរៀបឯកោ ប្រើបែបទ្រនាប់ខ្យល់ធម្មជាតិ។ វាជួយឱ្យអ្នកសម្រួលកាន់តែច្បាស់ អំពីCSS animations, transforms និង keyframes ខណៈពេលបង្កើតទស្សនៈមានភាពគួរឱ្យទាក់ទាញ។ សេចក្តីជូនដំណឹង: បន្ថែមAnimation keyframe CSS ដើម្បីធ្វើឲ្យរុក្ខជាតិនៅក្នុងធុងរុំរៀបឆ្វេង-ស្ដាំយឺតៗ។ បង្កើតអនុការ swaying ដែលបង្វិលរុក្ខជាតិស្ទួន ២-៣ ដឺក្រេ ខាងឆ្វេងនិងស្ដាំក្នុងរយៈពេល ៣-៤ វិនាទី ហើយអនុវត្តទៅក្លាស .plant។ ធានាថាអនុការនេះវដ្តពុំមានលប់ និងមានមុខងារសម្រាលសម្រាប់ចលនាធម្មជាតិ។ ស្វែងយល់បន្ថែមអំពី របៀប agent ទីនេះ។ ## 🚀 បញ្ហា៖ ការបន្ថែមការបញ្ចាំងកញ្ចក់ រៀបចំបន្ថែមភាពត្រជាក់របស់ terrarium ជាមួយបញ្ចាំងកញ្ចក់ពិតប្រាកដ។ បច្ចេកទេសនេះនឹងបន្ថែមជ្រៅ និងភាពពិតប្រាកដទៅក្នុងការរចនា។ អ្នកនឹងបង្កើតចំណុចពន្លឺស្លោះៗ ដែលធ្វើឲ្យវាស្រដៀងទៅនឹងការបញ្ចាំងពន្លឺនៅលើផ្ទៃកញ្ចក់។ វាជាជំហានដូចជាគំនូរល្បី Jan van Eyck បានប្រើពន្លឺ និងការបញ្ចាំងដើម្បីធ្វើឲ្យកញ្ចក់គំនូរមើលទៅជា 3D។ នេះជាគោលដៅថា៖ បញ្ហារបស់អ្នក៖ - បង្កើត រូបរាងវង់ពណ៌ស ឬពណ៌ស្រាលសម្រាប់បញ្ចាំងកញ្ចក់ - តាំងទីតាំង នៅខាងឆ្វេងនៃធុង - ប្រើ opacity និង blur សម្រាប់បញ្ចាំងពន្លឺពិតប្រាកដ - ប្រើ border-radius ដើម្បីបង្កើតរាងហ៊ុនសំរាប់ក្រែមចាត - សាកល្បង ជាមួយ gradients ឬ box-shadows សម្រាប់ភាពពិតប្រាកដជាងមុន ## ប្រឡងក្រោយមេរៀន ប្រឡងក្រោយមេរៀន ## ពង្រីកចំណេះដឹង CSS របស់អ្នក CSS អាចមានភាពស្មុគស្មាញនៅដើម ប៉ុន្តែការយល់ដឹងពីគំនិតមូលដ្ឋានទាំងនេះផ្ដល់មូលដ្ឋានរឹងមាំសម្រាប់បច្ចេកវិទ្យាទំនើបជាងនេះ។ ដែនការសិក្សា CSS បន្ទាប់របស់អ្នក៖ - Flexbox - ធ្វើឲ្យការតំទីនិងចែកចាយធាតុមានភាពងាយស្រួល - CSS Grid - ផ្ដល់ឧបករណ៍សម្រាប់បង្កើតរចនាប័ទ្មស្មុគស្មាញ - អថេរ CSS - កាត់បន្ថយការបញ្ជូនពាក្យ និងធ្វើឲ្យងាយជួសជុល - រចនាប័ទ្មឆ្វេងឆ្វាញ - ធានាថាគេហទំព័រផ្ទុះល្អនៅលើអេក្រង់នានា ### ប្រភពសិក្សាដែលអាចចូលរួមបាន ហាត់ប្រាណគំនិតទាំងនេះដោយហ្គេមដែលមានការចូលរួមខ្ពស់៖ - 🐸 Flexbox Froggy - រៀន Flexbox តាមការប្រកួតកម្សាន្ត - 🌱 Grid Garden - រៀន CSS Grid ដោយដាំកាំបិតវីរុស - 🎯 CSS Battle - សាកល្បងជំនាញ CSS ជាមួយបញ្ហាកូដ ### ការសិក្សាបន្ថែម សម្រាប់មូលដ្ឋាន CSS ពេញលេញ បញ្ជប់មេរៀន Microsoft Learn នេះ៖ Style your HTML app with CSS ### ⚡ អ្វីដែលអ្នកអាចធ្វើក្នុង ៥ នាទីបន្ទាប់ - [ ] បើក DevTools និងពិនិត្យរចនាប័ទ្ម CSS នៅលើគេហទំព័រណាមួយជាមួយផ្ទាំង Elements - [ ] បង្កើតឯកសារ CSS សាមញ្ញ និងភ្ជាប់វាទៅកាន់ទំព័រ HTML - [ ] សាកល្បងប្ដូរពណ៌ដោយវិធីជាប្រភេទផ្សេងៗ៖ hex, RGB, និងពណ៌ឈ្មោះ - [ ] ហាត់ធ្វើ box model ដោយបន្ថែមpadding និង margin ទៅ div ### 🎯 អ្វីដែលអ្នកអាចសម្រេចបានក្នុងមួយម៉ោងនេះ - [ ] បញ្ចប់ប្រឡងក្រោយមេរៀន និងពិនិត្យមើលគោលការណ៍ CSS មូលដ្ឋាន - [ ] តុបតែងទំព័រ HTML របស់អ្នកជាមួយអក្សរ ពណ៌ និងចន្លោះ - [ ] បង្កើតរចនាប័ទ្មសាមញ្ញដោយប្រើ flexbox ឬ grid - [ ] សាកល្បង CSS transitions សម្រាប់ផលប៉ះពាល់រលោង - [ ] ហាត់វិនិយោគរចនាប័ទ្មឆ្វេងឆ្វាញជាមួយ media queries ### 📅 ការផ្សងព្រេងCSS រយៈពេលមួយសប្តាហ៍របស់អ្នក - [ ] បញ្ចប់ភារកិច្ចរចនាប័ទ្ម terrarium ជាមួយភាពច្នៃប្រឌិត - [ ] ដោះស្រាយ CSS Grid ដើម្បីបង្កើតរាងកាងមួយសម្រាប់រូបថត - [ ] រៀន CSS animations ដើម្បីនាំមកជីវភាពរចនា - [ ] ស្វែងយល់ preprocessors CSS ដូចជា Sass ឬ Less - [ ] សិក្សាគោលការណ៍រចនា និងអនុវត្តវាទៅ CSS របស់អ្នក - [ ] វិភាគ និងបង្កើតរចនាប័ទ្មគួរឱ្យចាប់អារម្មណ៍ដែលអ្នកត្រូវបានឃើញលើបណ្ដាញ ### 🌟 ភាពជំនាញរចនាប័ទ្មរយៈពេលមួយខែរបស់អ្នក - [ ] សង់ប្រព័ន្ធវែបសាយឆ្វេងឆ្វាញពេញលេញ - [ ] រៀន CSS-in-JS ឬ frameworks ផ្អែកលើ utility ជាដូចជា Tailwind - [ ] ចូលរួមគម្រោងបើកចំហ ដោយធ្វើការ উন্ন센ן CSS - [ ] ជំនាញ CSS កម្រិតខ្ពស់ ដូចជា custom properties និង containment - [ ] បង្កើតបណ្ណាល័យឧបករណ៍ដែលអាចប្រើបានច្រើនជាមួយ CSS ម៉ូឌុលា - [ ] ជំនួយអ្នករៀន CSS ផ្សេងទៀត និងចែករំលែកចំណេះដឹងរចនា ## 🎯 ពេលវេលាកំណត់ភាពជំនាញ CSS របស់អ្នក ### 🛠️ សង្ខេបឧបករណ៍ CSS របស់អ្នក បន្ទាប់ពីបញ្ចប់មេរៀននេះ អ្នកមាន៖ - ការយល់ដឹងប្រលោម៖ របៀបលំអៀងនិងលុបបំបាត់ស្ទាយ - ជំនាញជ្រើសរើស៖ គោលដៅច្បាស់លាស់ជាមួយធាតុ ក្លาส និង ID - ជំនាញជួសជុលតាំង៖ ការដាក់ធាតុផ្ដោតនិងការកំណត់ជាន់ - ការរចនាទស្សនិក៖ បង្កើតផលប៉ះពាល់កញ្ចក់ ស្រមោល និងភាពត្រជាក់ - បច្ចេកទេសឆ្វេងឆ្វាញ៖ រចនារូបភាពដោយភាគរយដែលអាចផ្លាស់ប្តូរបានក្នុងគ្រប់ទំហំអេក្រង់ - ការរៀបចំកូដ៖ រចនាប័ទ្ម CSS ស្អាតងាយស្រួលថែទាំ - ការប្រពៃណីទំនើប៖ ប្រើអង្គធាតុស្របបាត និងរចនាប័ទ្មងាយចូលរួម ជំហានបន្ទាប់៖ terrarium របស់អ្នកឥឡូវមានសរុបរចនាសម្ព័ន្ធ (HTML) និងស្ទាយ (CSS)។ មេរៀនចុងក្រោយនឹងបន្ថែមការបញ្ចូលអន្តរកម្មជាមួយ JavaScript! ## ភារកិច្ច CSS Refactoring --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> ការព្រមាន៖ ឯកសារនេះត្រូវបានបកប្រែដោយប្រើសេវាកម្មបកប្រែ AI Co-op Translator។ ខណៈដែលយើងខិតខំក្នុងការផ្តល់ភាពត្រឹមត្រូវ សូមយល់អំពីថាការបកប្រែដោយស្វ័យប្រវត្តិអាចមានកំហុស ឬភាពមិនត្រឹមត្រូវ។ ឯកសារដើមដែលមាននៅក្នុងភាសាម៉ាស៊ីនគួរត្រូវបានចាត់ទុកជាឯកសារដើមដែលមានអំណាច។ សម្រាប់ព័ត៌មានសំខាន់ៗ សូមបញ្ជាក់អោយមានការបកប្រែដោយមនុស្សជំនាញ។ យើងមិនទទួលខុសត្រូវចំពោះការយល់ខុស ឬការបកស្រាយខុសដែលអាចកើតមានពីការប្រើប្រាស់ការបកប្រែនេះនោះទេ។ <!-- CO-OP TRANSLATOR DISCLAIMER END -->
GitHub Copilot ಏಜೆಂಟು ಸವಾಲು
## GitHub Copilot ಏಜೆಂಟು ಸವಾಲು ಈ ಕೆಳಗಿನ ಸವಾಲು ಪೂರ್ಣಗೊಳಿಸಲು ಏಜೆಂಟ್ ಮೋಡ್ ಬಳಸಿ: ವಿವರಣೆ: ಟೆರೆರಿಯಂ ಪ್ರಾಜೆಕ್ಟಿಗೆ ಸೇರಿಸಬಹುದಾದ ಸಸ್ಯ ಕಾಳಜಿ ಮಾರ್ಗದರ್ಶಿ ವಿಭಾಗಕ್ಕಾಗಿ ಅರ್ಥಪೂರ್ಣ HTML ರಚನೆ ಸೃಷ್ಟಿಸಿ. ಪ್ರಾಂಪ್ಟ್: ಮುಖ್ಯ ಶೀರ್ಷಿಕೆ "Plant Care Guide" ಹೊಂದಿರುವ, ಮೂರು ಉಪವಿಭಾಗಗಳು "Watering", "Light Requirements", ಮತ್ತು "Soil Care" ಎಂಬ ಶೀರ್ಷಿಕೆಗಳೊಂದಿಗೆ, ಪ್ರತಿ ಉಪವಿಭಾಗದಲ್ಲಿ ಸಸ್ಯ ಕಾಳಜಿ ಮಾಹಿತಿಯ ಪ್ಯಾರಾಗ್ರಾಫ್ ಇರುವಂತೆ ನಿರ್ಮಿಸಿ. ಸರಿಯಾದ ಅರ್ಥಪೂರ್ಣ HTML ಟ್ಯಾಗ್ಗಳು <section>, <h2>, <h3>, ಮತ್ತು <p> ಬಳಸಿ ಸೂಕ್ತವಾಗಿ ರಚಿಸಿ. ಇಲ್ಲಿ agent mode ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ. ## HTML ಇತಿಹಾಸ ಸವಾಲು ವೆಬ್ ಇತಿಹಾಸವನ್ನು ತಿಳಿಯಿರಿ 1990 ರಲ್ಲಿ ಟಿಮ್ ಬರ್ನರ್ಸ್-ಲೀ ಅವರು CERN ನಲ್ಲಿ ಮೊದಲ ವೆಬ್ ಬ್ರೌಸರ್ ಸೃಷ್ಟಿಸಿದಾಗಿನಿಂದ HTML ಪ್ರಗತಿಪಡುತ್ತಾ ಬಂದಿದೆ. <marquee> ತರಹದ ಕೆಲವು ಹಳೆಯ ಟ್ಯಾಗ್ಗಳನ್ನು ನವೀನ ಸೌಲಭ್ಯತೆ ಮಾನದಂಡಗಳು ಮತ್ತು ಪ್ರತ್ಯುತ್ತರ ವಿನ್ಯಾಸ ಶೈಲಿಗಳಿಂದ ಕಾರ್ಯನಿರ್ವಹಿಸದ ಕಾರಣ ಅವರು ಅನಾವರಣಗೊಳ್ಳಲಾಗಿದೆ. ಈ ಪ್ರಯೋಗ ಪ್ರಯತ್ನಿಸಿ: 1. ನಿಮ್ಮ <h1> ಶೀರ್ಷಿಕೆಯನ್ನು ಕಿಥುಕೊಳ್ಳುವಂತೆ <marquee> ಟ್ಯಾಗ್ ಬಳಿಕಲಿರಿ: <marquee><h1>My Terrarium</h1></marquee> 2. ನಿಮ್ಮ ಪುಟವನ್ನು ಬ್ರೌಸರ್ನಲ್ಲಿ ತೆರೆಯಿರಿ ಹಾಗೂ ಸ್ಕ್ರೋಲಿಂಗ್ ಪ್ರಭಾವವನ್ನು ಗಮನಿಸಿ 3. ಏಕೆ ಈ ಟ್ಯಾಗ್ ಅನಾವರಣಗೊಂಡಿತು ಎಂಬುದನ್ನು ಪರಿಗಣಿಸಿ (ಸೂಚನೆ: ಬಳಕೆದಾರ ಅನುಭವ ಮತ್ತು ಸೌಲಭ್ಯತೆ ಕುರಿತು ಯೋಚಿಸಿ) 4. <marquee> ಟ್ಯಾಗ್ ತೆಗೆದುಹಾಕಿ ಮತ್ತು ಅರ್ಥಪೂರ್ಣ ಮಾರ್ಕಪ್ಗೆ ಮರಳಿರಿ ಪ್ರತಿಬಿಂಬ ಪ್ರಶ್ನೆಗಳು: - ಸ್ಕ್ರೋಲಿಂಗ್ ಶೀರ್ಷಿಕೆ ದೃಷ್ಟಿಬಾಧಿತ ಅಥವಾ ಚಲನೆ ಸಹಿಷ್ಣು ಬಳಕೆದಾರರಿಗೆ ಹೇಗೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ? - ಯಾವ ನವೀನ CSS ತಂತ್ರಗಳು ಅದೇ ರೀತಿಯ ದೃಶ್ಯ ಪರಿಣಾಮಗಳನ್ನು ಹೆಚ್ಚು ಸೌಲಭ್ಯಪೂರ್ಣವಾಗಿ ಉಂಟುಮಾಡಬಹುದು? - ಅನಾವರಣಗೊಂಡ ಭಾಗಗಳನ್ನು ಬದಲು ಇಂದಿನ ವೆಬ್ ಮಾನದಂಡಗಳನ್ನು ಬಳಸುವುದು ಏಕೆ ಮುಖ್ಯ? ಇನ್ನು ಮುಂದೆ ಹಳೆ ಮತ್ತು ಅನಾವರಣಗೊಂಡ HTML ಘಟಕಗಳು ಕುರಿತಾಗಿ ತಿಳಿದುಕೊಳ್ಳಿ, ವೆಬ್ ಮಾನದಂಡಗಳು ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಹೇಗೆ ಸುಧಾರಿಸುತ್ತವೆ ಎಂಬುದನ್ನು. ## ಪಾಠೋತ್ತರ ಪ್ರಶ್ನೋತ್ತರ ಪಾಠೋತ್ತರ ಪ್ರಶ್ನೋತ್ತರ ## ಪರಿಶೀಲನೆ ಮತ್ತು ಸ್ವಯಂ ಅಧ್ಯಯನ ನಿಮ್ಮ HTML ಜ್ಞಾನವನ್ನು ಗಾಢಗೊಳಿಸಿ HTML ವೆಬ್ಗಳ ಮೂಲಭೂತಗಳಾಗಿ 30 ವರ್ಷಕ್ಕೂ ಮೆರೆಯುತ್ತಿದ್ದೇವೆ, ಸರಳ ದಸ್ತಾವೇಜು ಮಾರ್ಕಪ್ ಭಾಷೆಯಿಂದ ಇಂಟರಾಕ್ಟಿವ್ ಅಪ್ಲಿಕೇಶನ್ಗಳ ನಿರ್ಮಾಣ ನೆಲೆಯವರೆಗೆ ಅಭಿವೃದ್ಧಿ ಕಂಡಿದೆ. ಈ ಪ್ರಗತಿಯನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದು ನವೀನ್ ವೆಬ್ ಮಾನದಂಡಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಉತ್ತಮ ಅಭಿವೃದ್ಧಿ ನಿರ್ಧಾರಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ಸಹಾಯಕ. ಶಿಫಾರಸು ಮಾಡಿದ ಅಧ್ಯಯನ ಮಾರ್ಗಗಳು: 1. HTML ಇತಿಹಾಸ ಮತ್ತು ಪ್ರಗತಿ - HTML 1.0 ರಿಂದ HTML5 ರವರೆಗೆ ಕಾಲರೇಖೆಯನ್ನು ಸಂಶೋಧಿಸಿ - ಕೆಲವು ಟ್ಯಾಗ್ಗಳು ಅನಾವರಣಗೊಂಡ ಕಾರಣಗಳನ್ನು ವಿವರಿಸಿ (ಸೌಲಭ್ಯತೆ, ಮೊಬೈಲ್ ಸ್ನೇಹಿ, ನಿರ್ವಹಣೆ) - ಹೊಸ HTML ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ಪ್ರಸ್ತಾವನೆಗಳನ್ನು ಪರಿಶೀಲಿಸಿ 2. ಅರ್ಥಪೂರ್ಣ HTML ವಿಶ್ಲೇಷಣೆ - HTML5 ಅರ್ಥಪೂರ್ಣ ಘಟಕಗಳ ಸಂಪೂರ್ಣ ಪಟ್ಟಿ ಅಧ್ಯಯನ ಮಾಡಿ - <article>, <section>, <aside>, ಮತ್ತು <main> ಯಾವಾಗ ಬಳಸಬೇಕು ಎಂದು ಅಭ್ಯಾಸ ಮಾಡಿ - ಜಾಸ್ತಿ ಸೌಲಭ್ಯತೆಯಿಗಾಗಿ ARIA ಲಕ್ಷಣಗಳ ಬಗ್ಗೆ ತಿಳಿದುಕೊಳ್ಳಿ 3. ನವೀನ್ ವೆಬ್ ಅಭಿವೃದ್ಧಿ - Microsoft Learn ನಲ್ಲಿ ಪ್ರತ್ಯುತ್ತರ ವೆಬ್ಸೈಟ್ಗಳನ್ನು ನಿರ್ಮಿಸುವ ಮೂಲಕ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ - ಹೇಗೆ HTML CSS ಮತ್ತು JavaScript ಜೊತೆ ಸೇರಿಕೊಳ್ಳುತ್ತದೆ ತಿಳಿದುಕೊಳ್ಳಿ - ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು SEO ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಕಲಿಯಿರಿ ಪರಿಶೀಲನೆ ಪ್ರಶ್ನೆಗಳು: - ನೀವು ಕಂಡುಹಿಡಿದ ಅನಾವರಣಗೊಂಡ HTML ಟ್ಯಾಗ್ಗಳು ಯಾವುವು, ಮತ್ತು ಅವು ಏಕೆ ತೆಗೆದುಹಾಕಲಾಯಿತು? - ಮುಂದಿನ ಆವೃತ್ತಿಗಳಿಗಾಗಿ ಯಾವ ಹೊಸ HTML ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಪ್ರಸ್ತಾಪಿಸಲಾಗುತ್ತಿದೆ? - ಅರ್ಥಪೂರ್ಣ HTML ವೆಬ್ ಸೌಲಭ್ಯತೆ ಮತ್ತು SEO ಗೆ ಹೇಗೆ ಕೊಡುಗೆ ನೀಡುತ್ತದೆ? ### ⚡ ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಮಾಡಬಹುದಾದುದು - [ ] DevTools (F12) ತೆರೆಯಿರಿ ಮತ್ತು ನಿಮ್ಮ ಪ್ರಿಯ ವೆಬ್ಸೈಟ್ನ HTML ರಚನೆಯನ್ನು ಪರಿಶೀಲಿಸಿ - [ ] ಸರಳ HTML ಫೈಲ್ ನಿರ್ಮಿಸಿ with ನಾಮಾಂಕಿತ ಟ್ಯಾಗ್ಗಳು: <h1>, <p>, ಮತ್ತು <img> - [ ] W3C HTML Validator ಆನ್ಲೈನ್ ಬಳಸಿ ನಿಮ್ಮ HTML ಪರಿಶೀಲಿಸಿ - [ ] ನಿಮ್ಮ HTML ಗೆ <!-- comment --> ಮೂಲಕ ಕಾಮೆಂಟ್ ಸೇರಿಸಲು ಪ್ರಯತ್ನಿಸಿ ### 🎯 ಈ ಗಂಟೆಯಲ್ಲಿ ನೀವು ಸಾಧಿಸಬಹುದಾದುದು - [ ] ಪಾಠೋತ್ತರ ಪ್ರಶ್ನೋತ್ತರ ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು ಅರ್ಥಪೂರ್ಣ HTML ಅಂಶಗಳನ್ನು ಪರಿಶೀಲಿಸಿ - [ ] ಸರಿಯಾದ HTML ರಚನೆಯೊಂದಿಗೆ ಸ್ವತಃ ಕುರಿತು ಸರಳ ಜಾಲತಾಣ ನಿರ್ಮಿಸಿ - [ ] ವಿಭಿನ್ನ ಶೀರ್ಷಿಕೆ ಮಟ್ಟಗಳು ಮತ್ತು ಪಠ್ಯ ವಿನ್ಯಾಸ ಟ್ಯಾಗ್ಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ - [ ] ಚಿತ್ರಗಳು ಮತ್ತು ಲಿಂಕ್ಗಳನ್ನು ಸೇರಿಸಿ ಬಹುರೂಪಿಶೈಲಿ שילובים ಅಭ್ಯಾಸ ಮಾಡಿ - [ ] ನೀವು ಇನ್ನೂ ಪ್ರಯತ್ನಿಸದ HTML5 ವೈಶಿಷ್ಟ್ಯಗಳ ಸಂಶೋಧನೆ ಮಾಡಿ ### 📅 ನಿಮ್ಮ ವಾರಭರ್ತಿ HTML ಪ್ರಯಾಣ - [ ] ಅರ್ಥಪೂರ್ಣ ಮಾರ್ಕಪ್తో ಟೆರೆರಿಯಂ ಪ್ರಾಜೆಕ್ಟ್ ಕಾರ್ಯ ನಿಭಾಯಿಸಿ - [ ] ARIA ಲೇಬಲ್ ಮತ್ತು ಪಾತ್ರಗಳ ಬಳಕೆ ಮೂಲಕ ಸೌಲಭ್ಯಪೂರ್ಣ ವೆಬ್ಸೈಟ್ ಹಂಚಿಕೊಳ್ಳಿ - [ ] ವಿವಿಧ ಇನ್ಪುಟ್ ವಿಧಗಳೊಂದಿಗೆ ಫಾರಂ ರಚನಾ ಅಭ್ಯಾಸ ಮಾಡಿ - [ ] localStorage ಅಥವಾ ಜಿಯೋಲೋಕೇಶನ್ ಹೀಗೆ HTML5 API ಗಳನ್ನು ಅರಿತುಕೊಳ್ಳಿ - [ ] ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ HTML ಮಾದರಿಗಳು ಮತ್ತು ಮೊಬೈಲ್-ಮೊದಲ ವಿನ್ಯಾಸ ಅಧ್ಯಯನ ಮಾಡಿ - [ ] ಉತ್ತಮ ಅಭ್ಯಾಸಗಳಿಗಾಗಿ ಇತರ ಡೆವಲಪರ್ಗಳ HTML ಕೋಡ್ ಪರಿಶೀಲಿಸಿ ### 🌟 ನಿಮ್ಮ ತಿಂಗಳು ತುಂಬಾ ವೆಬ್ ಫಲಕ - [ ] ನಿಮ್ಮ HTML ಪರಿಣಿತಿಯನ್ನು ತೋರುವ ಪೋರ್ಟ್ಫೋಲಿಯೊ ಜಾಲತಾಣ ನಿರ್ಮಿಸಿ - [ ] Handlebars Framework ಬಳಸಿ HTML ಟೆಂಪ್ಲೇಟಿಂಗ್ ಕಲಿತುಕೊಳ್ಳಿ - [ ] HTML ಡಾಕ್ಯುಮೆಂಟೇಶನ್ ಸುಧಾರಣೆಗೆ ಓಪನ್ ಸೋರ್ಸ್ ಯೋಜನೆಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಿ - [ ] ಕಸ್ಟಮ್ ಘಟಕಗಳಂತಹ ಉನ್ನತ HTML ಅಂಶಗಳಲ್ಲಿ ಪರಿಣತಿ ಸಾಧಿಸಿ - [ ] HTML, CSS ಫ್ರೇಮ್ವರ್ಕ್ಗಳು, JavaScript ಗ್ರಂಥಾಲಯಗಳೊಡನೆ ಸಮನ್ವಯ ಮಾಡಿ - [ ] HTML ಮೂಲಭೂತಗಳನ್ನು ಕಲಿಯುತ್ತಿರುವವರಿಗೆ ಮಾರ್ಗದರ್ಶನ ನೀಡಿ ## 🎯 ನಿಮ್ಮ HTML ಪರಿಣತಿ ಸಮಯರೇಖೆ ### 🛠️ ನಿಮ್ಮ HTML ಉಪಕರಣಗಳ ಸಾರಾಂಶ ಈ ಪಾಠ ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ, ಈಗ ನಿಮ್ಮ ಬಳಿ: - ದಸ್ತಾವೇಜು ರಚನೆ: ಸರಿಯಾದ DOCTYPE ಹೊಂದಿದ ಪೂರ್ಣ HTML5 ಅಾಧಾರ - ಅರ್ಥಪೂರ್ಣ ಮಾರ್ಕಪ್: ಸೌಲಭ್ಯತೆ ಮತ್ತು SEO ನ್ನು ಸುಧಾರಿಸುವ ಅರ್ಥಪೂರ್ಣ ಟ್ಯಾಗ್ಗಳು - ಚಿತ್ರ ಸಂಯೋಜನೆ: ಸರಿಯಾದ ಫೈಲ್ ಸಂರಚನೆ ಮತ್ತು alt ಪಠ್ಯ ಅಭ್ಯಾಸಗಳು - ನ್ಯಾಸ ಕಂಟೇನರ್ಗಳು: ವಿವರಣಾತ್ಮಕ ವರ್ಗದ ಹೆಸರಿನೊಂದಿಗೆ ಡಿವ್ಗಳ ವ್ಯವಹಾರ - ಸೌಲಭ್ಯತೆ ಅರಿವು: ಸ್ಕ್ರೀನ್ ರೀಡರ್ ನೇವಿಗೇಶನ್ನ ಬಗ್ಗೆ ಅರ್ಥ - ನವೀನ ಮಾನದಂಡಗಳು: ಪ್ರಸ್ತುತ HTML5 ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಅನಾವರಣಗೊಂಡ ಟ್ಯಾಗ್ ಜ್ಞಾನ - ಪ್ರಾಜೆಕ್ಟ್ ಆಧಾರ: CSS ಶೈಲಿಗೆ ಹಾಗೂ JavaScript ಇಂಟರಾಕ್ಟಿವಿಟಿಗೆ ಬಲವಾದ ನೆಲ ಮುಂದಿನ ಹಂತಗಳು: ನಿಮ್ಮ HTML ರಚನೆ ಈಗ CSS ಶೈಲಿಗೆ ಸಿದ್ಧವಾಗಿದೆ! ನೀವು ನಿರ್ಮಿಸಿದ ಅರ್ಥಪೂರ್ಣ ನೆಲ ಮುಂದಿನ ಪಾಠವನ್ನು ತುಂಬಾ ಸುಲಭವಾಗಿಸಿ. ## ಅಸೈನ್ಮೆಂಟ್ ನಿಮ್ಮ HTML ಅಭ್ಯಾಸ: ಒಂದು ಬ್ಲಾಗ್ ಮಾದರಿ ನಿರ್ಮಿಸಿ --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> ಅಸ್ವೀಕರಣಾತ್ಮಕ ನಿರೂಪಣೆ: ಈ ಡೊಕ್ಯೂಮೆಂಟ್ ಅನ್ನು AI ಅನುವಾದ ಸೇವೆ Co-op Translator ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಅಗತ್ಯತೆಯಷ್ಟು ನಿಖರತೆಗೆ ಪ್ರಯತ್ನಿಸಿದರೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ತಪ್ಪು ವಿವರಗಳು ಇರಬಹುದಾಗಿದೆ ಎಂದು ತಿಳಿದುಕೊಳ್ಳಿ. ಮೂಲ ಡೊಕ್ಯೂಮೆಂಟ್ ಅದರ ಹುಟ್ಟಿಗ ಭಾಷೆಯಲ್ಲಿ ಅಧಿಕೃತ ಮೂಲವಾಗಿ ಪರಿಗಣಿಸಬೇಕಾಗಿದೆ. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದನ್ನು ಸಹಾಯವಾಗಿ ಪಡೆಯುವಂತೆ ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ. ಈ ಅನುವಾದ ಬಳಕೆಯಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ತಪ್ಪು ಅರ್ಥಗರ್ಭಿತತೆ ಅಥವಾ ತಪ್ಪಿದ್ರವ್ಯಗಳಿಗಾಗಿ ನಾವು ಹೊಣೆಗಾರರಲ್ಲ. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
ಟೆರೇರಿಯಂ ಪ್ರಾಜೆಕ್ಟ್ ಭಾಗ 2: CSS ಪರಿಚಯ
ನಿಮ್ಮ HTML ಟೆರೇರಿಯಂ ಹೌದು ಎಂದಾದರೂ ತುಂಬಾ ಸರಳವಾಗಿ ಕಂಡಿತಾ? CSS ಆ ಸರಳ ರಚನೆಯನ್ನು ದೃಶ್ಯಾತ್ಮಕವಾಗಿ ಆಕರ್ಷಕವಾಗಿಸುವುದೇ ಆಗಿದೆ. HTML ಮನೆ ಕಟ್ಟುವ ಫ್ರೇಮ್ ಹಾಗೆವಾದರೆ, CSS ಮನೆ ಯನ್ನ ಸ್ವಾಗತ ಹೊಂದುತ್ತಿರುವಂತೆ ತೋರಿಸುವ ಎಲ್ಲಾ ಚيزುಗಳು - ಬಣ್ಣದ ಬಣ್ಣಗಳು, ಫರ್ನಿಚರ್ ವ್ಯವಸ್ಥೆ, ಬೆಳಕು, ಮತ್ತು ಕೊಠಡಿಗಳ ಸಂಚಲನ. ಪ್ಯಾಲೇಸ್ ಆಫ್ ವರ್ಸಾಯಿಸ್ ಒಂದು ಸರಳ ಬೇಟೆಯ ಹಳ್ಳಿ ಆಗಿರೋದು ಹೇಗೆ, ಆದರೆ ಅಲ್ಲಿ ಸುಂದರ ಅಲಂಕರಣ ಮತ್ತು ವಿನ್ಯಾಸದ ಮೂಲಕ ಜಗತ್ತಿನ ಅತ್ಯುತ್ತಮ ಕಟ್ಟಡಗಳಲ್ಲಿ ಒಂದಾಗಿ ಪರಿವರ್ತಿತವಾಯಿತು ಅಂತಕೂಟ್ಲೆ. ಇಂದು ನಾವು ನಿಮ್ಮ ಟೆರೇರಿಯಂ ಅನ್ನು ಕಾರ್ಯक्षमದಿಂದ ಹೊಳೆಯುವಂತೆ ಮಾಡೋಣ. ನೀವು ಎಲಿಮೆಂಟ್ ಗಳನ್ನು ಸಂಯೋಜಿಸುವಂತೆ ಕಲಿತೀರಿ, ವಿಭಿನ್ನ ಪರದೆ ಗಾತ್ರಗಳಿಗೆ ಸೈಟ್ಗಳನ್ನು ಪ್ರತಿಕ್ರಿಯಿಸುವಂತೆ ಮಾಡೋಣ ಮತ್ತು ವೆಬ್ಸೈಟ್ಗಳ ಆಕರ್ಷಣೀಯತೆ ಮೂಡಿಸುವಂತೆ ದೃಶ್ಯವುಂಟುಮಾಡೋಣ. ಈ ಪಾಠದ ಅಂತ್ಯಕ್ಕೆ, ಸೂಕ್ತವಾಗಿ CSS ಶೈಲಿ ಹೇಗೆ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ನುಡಿಮುತ್ತಾಗಿ ಸುಧಾರಿಸಬಲ್ಲದು ನೋಡಿ. ನಿಮ್ಮ ಟೆರೇರಿಯಂಗೆ ಕೆಲವು ಶೈಲಿ ಸೇರಿಸಲಿದ್ದೇವೆ. ## ಪೂರ್ವ-ಪಾಠ ಪ್ರಶ್ನೆಪತ್ರಿಕೆ ಪೂರ್ವ-ಪಾಠ ಪ್ರಶ್ನೆಪತ್ರಿಕೆ ## CSS ಆರಂಭಿಸುವುದು CSS ನ್ನು ಜನರು ತುಂಬಾ "ಅತ್ಯಂತ ಸುಂದರವಾಗಿ ಮಾಡುವುದು" ಎಂದು ಭಾವಿಸುತ್ತಾರೆ ಆದರೆ ಇದರ ವ್ಯಾಪ್ತಿಯು ತುಂಬಾ ವಿಶಾಲವಾಗಿದೆ. CSS ಸಿನಿಮಾ ನಿರ್ದೇಶಕರಂತೆ - ನೀವು ಎಲ್ಲವನ್ನೂ ನೋಡಿಸುವುದಲ್ಲದೆ, ಅದು ಹೇಗೆ ಚಲಿಸುತ್ತದೆ, ಸಂವಹನಕ್ಕೆ ಹೇಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ, ಮತ್ತು ವಿಭಿನ್ನ ಪರಿಸ್ಥಿತಿಗಳಲ್ಲಿ ಹೇಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ ಅವುಗಳನ್ನು ನಿಯಂತ್ರಿಸುತ್ತೀರಿ. ಅಧುನಾತನ CSS ಅತ್ಯಂತ ಸಾಮರ್ಥ್ಯವಂತದ್ದು. ನೀವು ಫೋನ್ಗಳು, ಟ್ಯಾಬ್ಲೆಟ್ಗಳು ಮತ್ತು ಡೆಸ್ಕ್ಟಾಪ್ ಗಳಿಗೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪರಿವರ್ತಿಸುವ ವಿನ್ಯಾಸಗಳನ್ನು ಬರೆಯಬಹುದು. ನೀವು ಸಲುಹೊಯ್ದ ಅನ್ಯಮೇಷನ್ಗಳನ್ನು ರಚಿಸಬಹುದು, ಇದು ಬಳಕೆದಾರರ ಗಮನವನ್ನು ಅಗತ್ಯವಿರುವ ಸ್ಥಳಕ್ಕೆ ಕರೆದೊಯ್ಯುತ್ತದೆ. ಎಲ್ಲವೂ ಒಟ್ಟಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ಫಲಿತಾಂಶಗಳು ಅತ್ಯंत ಸೋಗಾದವು. ಈ ಪಾಠದಲ್ಲಿ ನಾವು ಸಾಧಿಸುವುದು: - ಟೆರೇರಿಯಂಗೆ ಆಧುನಿಕ CSS ತಂತ್ರಗಳನ್ನು ಬಳಸಿ ಸಂಪೂರ್ಣ ವಿಸ್ತೃತ ವಿನ್ಯಾಸವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ - ಕಾರ್ಯಪದ್ಧತಿ, ಪರಂಪರೆ ಮತ್ತು CSS ಆಯ್ಕೆದಾರರಂತಹ ಮೂಲಭೂತ ತತ್ವಗಳನ್ನು ಅನ್ವೇಷಣೆ ಮಾಡುವುದು - ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ಸ್ಥಾನಪರಿಚಯ ಮತ್ತು ವಿನ್ಯಾಸ ತಂತ್ರಗಳನ್ನು ಅನ್ವಯಿಸುವುದು - CSS ಆಕಾರಗಳು ಮತ್ತು ಶೈಲಿ ಬಳಸಿ ಟೆರೇರಿಯಂ ಒಳಚರಂಡಿಯನ್ನು ರಚಿಸುವುದು ### ಪೂರ್ವಾಪೇಕ್ಷೆ ನೀವು ಹಿಂದಿನ ಪಾಠದಿಂದ ನಿಮ್ಮ ಟೆರೇರಿಯಂಗಾಗಿ HTML ರಚನೆಯನ್ನು ಪೂರ್ಣಮಾಡಿರಬೇಕು ಮತ್ತು ಅದನ್ನು ಶೈಲಿಗೊಳಿಸಲು ಸಿದ್ಧವಾಗಿರಬೇಕು. ### ನಿಮ್ಮ CSS ಕಡತವನ್ನು ಸಜ್ಜುಗೊಳಿಸುವುದು ಶೈಲಿ ಸಲ್ಲಿಸುವುದನ್ನು ಆರಂಭಿಸುವ ಮೊದಲು, CSS ಅನ್ನು ನಮ್ಮ HTML ಗೆ ಸಂಪರ್ಕಿಸುವ ಅಗತ್ಯವಿದೆ. ಈ ಸಂಪರ್ಕ ಬ್ರೌಸರ್ಗೆ ಟೆರೇರಿಯಂ ಶೈಲಿ ಸೂಚನೆಗಳನ್ನು ಎಲ್ಲಿಂದ ಪಡೆಯಬೇಕೆಂಬುದನ್ನು ತಿಳಿಸುತ್ತದೆ. ನಿಮ್ಮ ಟೆರೇರಿಯಂ ಫೋಲ್ಡರ್ ನಲ್ಲಿ style.css ಎಂಬ ಹೊಸ ಫೈಲ್ ಸೃಷ್ಟಿಸಿ, ನಂತರ ಅದನ್ನು ನಿಮ್ಮ HTML ಕಡತದ <head> ವಿಭಾಗದಲ್ಲಿ ಲಿಂಕ್ ಮಾಡಿ: ಈ ಕೋಡ್ ಮಾಡುವುದೇನು: - ನಿಮ್ಮ HTML ಮತ್ತು CSS ಕಡತಗಳ ನಡುವಣ ಸಂಪರ್ಕವನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ - ಬ್ರೌಸರ್ಗೆ style.css ನಲ್ಲಿನ ಶೈಲಿಗಳನ್ನು ಲೋಡ್ ಮತ್ತು ಅನ್ವಯಿಸುವುದಾಗಿ ಹೇಳುತ್ತದೆ - rel="stylesheet" ಗುಣಲಕ್ಷಣ ಬಳಸಿ ಇದು CSS ಕಡತ ಎಂದು ಸೂಚಿಸುತ್ತದೆ - href="./style.css" ಮೂಲಕ ಕಡತದ ಮಾರ್ಗವನ್ನು ಸೂಚಿಸುತ್ತದೆ ## CSS Cascading ಅರ್ಥ ನೀವು ಎಂದಾದರೂ ಯೋಚಿಸಿದ್ದೀರಾ, CSS ಗೆ "Cascading" style sheets ಎನ್ನುತ್ತಾರೆ ಎಂತಾರೆ? ಶೈಲಿಗಳು ಜಲಪ್ರವಾಹದಂತಾಗಿಯೇ ಕೆಳಗೆ ಹರಿಯುತ್ತವೆ ಮತ್ತು ಕೆಲವೊಮ್ಮೆ ಪರಸ್ಪರ ಘರ್ಷಣೆಗೊಳಗಾಗುತ್ತವೆ. ಸೆನೆಯ ಆಜ್ಞೆ ವ್ಯವಸ್ಥೆಯನ್ನು ಪರಿಶೀಲಿಸಿ — генерал ಮಾನ್ಯಕೆ "ಎಲ್ಲಾ ಸೇನಾನಿಗಳು ಹಸಿ ಹಸಿರು ಬಣ್ಣದ ವಸ್ತ್ರ ಧರಿಸಲಿ" ಎಂದು ಹೇಳಿದರೆ, ಆದರೆ ನಿಮ್ಮ ಯೂನಿಟ್ಗೆ ದಾಖಲಿಸಿದ ನಿರ್ದಿಷ್ಟ ಆದೇಶ "ಸಮಾರಂಭಕ್ಕಾಗಿ ನೀಲಿ ವಸ್ತ್ರ ಹಾಕಿ" ಎಂದು ಇದ್ದರೆ, ಇನ್ನಷ್ಟು ನಿರ್ದಿಷ್ಟ ಆದೇಶ ಉತ್ತಮ ಪ್ರಾಮುಖ್ಯತೆಯನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತದೆ. CSS ಕೂಡ ಇದೇ ತರ್ಕವನ್ನು ಅನುಸರಿಸುತ್ತದೆ ಮತ್ತು ಈ ಹೈಯರಾರ್ಕಿಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದರಿಂದ ಡಿಬಗ್ ಮಾಡಲು ತುಂಬಾ ಸುಲಭವಾಗುತ್ತದೆ. ### Cascading ಆದ್ಯತೆಯನ್ನು ಪ್ರಯೋಗಿಸೋಣ ನಮ್ಮ cascading ಪರಿಣಾಮವನ್ನು ನೋಡಲು ಶೈಲಿ ಘರ್ಷಣೆಯನ್ನು ಸೃಷ್ಟಿಸೋಣ. ಮೊದಲು ನಿಮ್ಮ <h1> ಟ್ಯಾಗ್ಗೆ inline ಶೈಲಿಯನ್ನು ಸೇರಿಸಿ: ಈ ಕೋಡ್ ಮಾಡುವುದೇನು: - inline ಶೈಲಿಯನ್ನು ಬಳಸಿ <h1> ಎಲಿಮೆಂಟ್ಗೆ ನೇರವಾಗಿ ಕೆಂಪು ಬಣ್ಣವನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ - style ಗುಣಲಕ್ಷಣ ಬಳಸಿ HTML ನಲ್ಲಿ ನೇರವಾಗಿ CSS ನ್ನು ಒಳಗೊಳಿಸುತ್ತದೆ - ಈ ನಿರ್ದಿಷ್ಟ ಎಲಿಮೆಂಟ್ಗೆ ಅತ್ಯಂತ ಪ್ರಾಮುಖ್ಯತೆಯ ಶೈಲಿ ನಿಯಮವನ್ನು ರಚಿಸುತ್ತದೆ ಹೀಗೆಯೇ ಈ ನಿಯಮವನ್ನು ನಿಮ್ಮ style.css ಫೈಲಿಗೆ ಸೇರಿಸಿ: ಮೇಲಿನ ನಿಯಮಗಳಲ್ಲಿ ನಾವು: - ಎಲ್ಲಾ <h1> ಎಲಿಮೆಂಟ್ಗಳನ್ನು ಗುರಿಯಾಗಿಸುವ CSS ನಿಯಮವನ್ನು ಸೂಚಿಸಿದ್ದೇವೆ - ಬಾಹ್ಯ ಶೈಲಿ ಬಳಸಿ ಪಠ್ಯದ ಬಣ್ಣ ನಿಲುವಂಗಿ ನೀಲಿ ಮಾಡಿದೇವೆ - inline ಶೈಲಿಗಳಿಗಿಂತ ಕಡಿಮೆ ಪ್ರಾಮುಖ್ಯತೆಯ ನಿಯಮವನ್ನು ರಚಿಸಿದ್ದೇವೆ ✅ ಅಧ್ಯಯನ ಪರೀಕ್ಷೆ: ನಿಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ನಲ್ಲಿ ಯಾವ ಬಣ್ಣ ತೋರಿಸುತ್ತದೆ? ಆ ಬಣ್ಣಕ್ಕೆ ಏಕೆ ಪ್ರಾಮುಖ್ಯತೆಯಿದೆ? ನೀವು ಯಾವ ಸಂದರ್ಭಗಳಲ್ಲಿ ಶೈಲಿಗಳನ್ನು ಮೀರಿಸುವುದೆಂದು ಯೋಚಿಸುತ್ತೀರಾ? ## CSS ಪರಂಪರೆ ಕಾರ್ಯಾಚರಣೆ CSS ಪರಂಪರೆ ಜಿನೆಟಿಕ್ಸ್ ಹಾಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ — ಎಲಿಮೆಂಟ್ಗಳು ತಮ್ಮ ಪೋಷಕ eleಮೆಂಟ್ಗಳಿಂದ ಕೆಲವು ಗುಣಗಳನ್ನು ಪರಂಪರೆಯಾಗಿ ಪಡೆಯುತ್ತವೆ. ನೀವು ಮಾನವನ <body> ಮೇಲೆ ಫಾಂಟ್ ಫ್ಯಾಮಿಲಿ ಸಿದ್ಧ ಮಾಡಿದರೆ ಎಲ್ಲಾ ಪಠ್ಯವು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅದೇ ಫಾಂಟ್ ಬಳಸುತ್ತದೆ. ಇದು ಹ್ಯಾಬ್ಸ್ಬರ್ಗ್ ಕುಟುಂಬದ ವಿಶಿಷ್ಟ ಜವಳಿನ ಶೈಲಿಯನ್ನು ತಲಾ ಯೋಗ್ಯ ವ್ಯಕ್ತಿಗಳಲ್ಲಿ ಕಾಣಿಸುವಂತೆ. ಆದ್ರೆ ಎಲ್ಲವೂ ಪರಂಪರೆಯಾಗದು. ಪಠ್ಯದ ಶೈಲಿ (ಫಾಂಟ್ಗಳು ಮತ್ತು ಬಣ್ಣಗಳು) ಪರಂಪರೆಯಾಗುತ್ತವೆ, ಆದ್ರೆ ವಿನ್ಯಾಸ ಗುಣಲಕ್ಷಣಗಳು (ಮಾರ್ಜಿನ್ಗಳು ಮತ್ತು ಬಾರ್ಡರ್ಗಳು) ಪರಂಪರೆಯಾಗುವುದಿಲ್ಲ. ಮಕ್ಕಳಿಗೆ ಭೌತಿಕ ಲಕ್ಷಣಗಳ ಮೇಲೆ ಪರಂಪರೆ ಕಲಿತಂತೆ ಆದರೆ ತಮಗೆ ತಾಯ್ತಂದೆಗಳ ಫ್ಯಾಷನ್ ಆಯ್ಕೆಗಳು ಅಲ್ಲ. ### ಫಾಂಟ್ ಪರಂಪರೆಯನ್ನು ಗಮನಿಸಿ ನಾವು <body> ಮೇಲೆ ಫಾಂಟ್ ಫ್ಯಾಮಿಲಿ ನಿಶ್ಚಯಿಸಿ ಪರಂಪರೆಯ ಕಾರ್ಯಾಚರಣೆಯನ್ನು ಪರೀಕ್ಷಿಸೋಣ: ಈಈಗಾಗುವದನ್ನು ಪೋಷಣೆಯಾಗಿ ಓದಿ: - ಸಂಪೂರ್ಣ ಪುಟಕ್ಕೆ ಫಾಂಟ್ ಫ್ಯಾಮಿಲಿ ನಿಸುವುದು <body> ಎಲಿಮೆಂಟ್ ಗುರಿಯಾಗಿಸಿ - ಉತ್ತಮ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಗೆ ಬದಲಾವಣೆ ವಾಗಿ ಫಾಂಟ್ ಸ್ಟ್ಯಾಕ್ ಬಳಸುವುದು - ವಿಭಿನ್ನ ಕಾರ್ಯನಿರ್ವಹಣೆ ವ್ಯವಸ್ಥೆಗಳಿಗೆ ಉತ್ತಮವಾಗಿ ಕಾಣುವ ಆಧುನಿಕ ಸಿಸ್ಟಮ್ ಫಾಂಟ್ಗಳು ಬಳಕೆ ಮಾಡುವುದು - ಸ್ಪಷ್ಟವಾಗಿ ಎಲ್ಲಾ ಮಕ್ಕಳ ಎಲಿಮೆಂಟ್ಗಳು ಪರಂಪರೆಯಿಂದ ಈ ಫಾಂಟ್ ಬಳಸುವಂತೆ ಮಾಡುವುದು, ಉಲ್ಲೇಖಿಸಿದರೆ ಮಾತ್ರ ಮೀರಿಸಲಾಗುತ್ತದೆ ನಿಮ್ಮ ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಟೂಲ್ಗಳು (F12) ತೆರೆಯಿರಿ, Elements ಟ್ಯಾಬ್ಗೆ ಹೋಗಿ, ಮತ್ತು ನಿಮ್ಮ <h1> ಎಲಿಮೆಂಟ್ ಅನ್ನು ಪರಿಶೀಲಿಸಿ. ಅದು ನೆಲೆಯ <body> ಮೂಲಕ ಫಾಂಟ್ ಫ್ಯಾಮಿಲಿ ಪರಂಪರೆಯನ್ನು ಪಡೆಯುತ್ತಿದೆ: ✅ ಪ್ರಯೋಗ ಸಮಯ: <body> ಮೇಲೆ color, line-height, ಅಥವಾ text-align ಮುಂತಾದ ಇತರೆ ಪರಂಪರೆಯಾಗುವ ಗುಣಲಕ್ಷಣಗಳನ್ನು ನಿಶ್ಚಯಿಸಿ ನೋಡಿ. ನಿಮ್ಮ ಶೀರ್ಷಿಕೆ ಮತ್ತು ಇತರ ಎಲಿಮೆಂಟ್ಗಳಿಗೆ ಏನು ಆಗುತ್ತದೆ? ### 🔄 ವಿದ್ಯಾಮೂಲಕ ಪರಿಶೀಲನೆ CSS ನ ಮೂಲಭೂತ ಅರ್ಥ: ಆಯ್ಕೆದಾರರಗೆ ಹೋಗುವ ಮೊದಲು ಖಾತರಿಪಡಿಸಿಕೊಳ್ಳಿ ನೀವು: - ✅ cascading ಮತ್ತು ಪರಂಪರೆ ನಡುವಿನ ವ್ಯತ್ಯಾಸ ಬರೆದಿಟ್ಟು ಹೇಳಬಲ್ಲಿರಿ - ✅ ವಿಶೇಷತೆಯಿಂದ ಯಾವ ಶೈಲಿ ಗೆಲ್ಲುತ್ತದೆಯೋ ಅನುಮಾನೆ ಮಾಡಬಲ್ಲಿರಿ - ✅ ಯಾವ ಗುಣಲક્ષણಗಳು ಪೋಷಕ eleಮೆಂಟ್ ನಿಂದ ಪರಂಪರೆಯಾಗುತ್ತವೆಯೋ ಗುರುತಿಸಬಲ್ಲಿರಿ - ✅ CSS ಫೈಲ್ ಗಳು HTML ಗೆ ಸರಿಯಾಗಿ ಲಿಂಕ್ ಮಾಡಲಾಗಿದೆ ಎಂದು ಖಾತ್ರಿಪಡಿಸಿಕೊಳ್ಳಿ ಸರಳ ಪರೀಕ್ಷೆ: ಈ ಶೈಲಿಗಳು ಇದ್ದರೆ, <div class="special"> ಒಳಗಿನ <h1>ಯ ಬಣ್ಣ ಯಾವುದು ಇರಬಹುದು? ಉತ್ತರ: ಕೆಂಪು (ಎಲಿಮೆಂಟ್ ಆಯ್ಕೆದಾರ ನೇರವಾಗಿ h1 ನ್ನು ಗುರಿಯಾಗಿಸಿದೆ) ## CSS ಆಯ್ಕೆದಾರರ ಪ್ರಭುತ್ವ CSS ಆಯ್ಕೆದಾರರು ನಿಮಗೆ ನಿಮ್ಮ ಶೈಲಿಗಳಿಗೆ ಗುರಿಯಾದ ನಿರ್ದಿಷ್ಟ ಎಲಿಮೆಂಟ್ಗಳನ್ನು ನಿಶ್ಚಯಿಸುವಂತಹುದು. ಅವು ಖಚಿತವಾದ ನಿರ್ದೇಶನಗಳನ್ನು ನೀಡುವಂತೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ - "ಮನೆ" ಎಂದು ಹೇಳುವುದರ ಬದಲು "ಮೇಪಲ್ ಸ್ಟ್ರೀಟ್上的 ಕೆಂಪಿನ ದ್ವಾರಿನೊಂದಿಗೆ ನೀಲಿ ಮನೆ" ಎಂದು ಹೇಳುವುದು. CSS ವಿಭಿನ್ನ ರೀತಿಯ ಆಯ್ಕೆದಾರರನ್ನು ಒದಗಿಸುತ್ತದೆ, ಮತ್ತು ಸೂಕ್ತ ಆಯ್ಕೆದಾರವನ್ನು ಆರಿಸುವುದು ಕಾರ್ಯಕ್ಕಾಗಿ ಸೂಕ್ತ ಉಪಕರಣವನ್ನು ಆರಿಸುವಂತಿದೆ. ಒಮ್ಮೆ ನೀವು ಹುತ್ತಿನಲ್ಲಿ ಎಲ್ಲಾ ಬಾಗಿಲಿನ ಶೈಲಿಗಳನ್ನು ನೀಡಬಹುದು, ಮತ್ತೊಮ್ಮೆ ಒಂದು ವಿಶೇಷ ಬಾಗಿಲಿಗೆ ಮಾತ್ರ. ### ಎಲಿಮೆಂಟ್ ಆಯ್ಕೆದಾರರು (ಟ್ಯಾಗ್ ಗಳು) ಎಲಿಮೆಂಟ್ ಆಯ್ಕೆದಾರರು HTML ಎಲಿಮೆಂಟ್ಗಳನ್ನು ಅವರ ಟ್ಯಾಗ್ ಹೆಸರಿನಿಂದ ಗುರಿಯಾಗಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಬಹುಮಟ್ಟಿನಲ್ಲಿ ಪುಟ ವ್ಯಾಪಕವಾಗಿ ಅನ್ವಯಿಸುವ ಮೂಲ ಶೈಲಿಗಳನ್ನು ನಿಶ್ಚಯಿಸಲು ಇವು ತಕ್ಕಂತೆಗಳ. ಈ ಶೈಲಿಗಳ ಅರ್ಥ: - body ಆಯ್ಕೆದಾರ ಬಳಸಿ ಸಂಪೂರ್ಣ ಪುಟದಲ್ಲಿ ಅಖಂಡವಾದ ಟೈಪೋಗ್ರಫಿಯನ್ನು ನಿಶ್ಚಯಿಸುತ್ತದೆ - ಉತ್ತಮ ನಿಯಂತ್ರಣಕ್ಕೆ ಬ್ರೌಸರ್ ನ ಡಿಫಾಲ್ಟ್ ಮಾರ್ಜಿನ್ ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ತೆಗೆದುಹಾಕುತ್ತದೆ - ಬಣ್ಣ, ಸರಿಹೊಂದುವಿಕೆ ಮತ್ತು ಅಂತರಗಳೊಂದಿಗೆ ಎಲ್ಲಾ ಶೀರ್ಷಿಕೆ ಎಲಿಮೆಂಟ್ಗಳ ಶೈಲಿ ಮಾಡುತ್ತದೆ - ಲಭ್ಯವಿರುವ ಸೌಲಭ್ಯಕ್ಕಾಗಿ rem ಯೂನಿಟ್ ಗಳನ್ನು ಬಳಸುತ್ತದೆ ಎಲಿಮೆಂಟ್ ಆಯ್ಕೆದಾರರು ಸಾಮಾನ್ಯ ಶೈಲಿಗಾಗಿ ಚೆನ್ನಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ, ಆದರೆ ಟೆರೇರಿಯಂನಲ್ಲಿ ಸಸ್ಯಗಳು ಮುಂತಾದ ವ್ಯಕ್ತಿಗತ ಭಾಗಗಳನ್ನು ಶೈಲಿಗೊಳಿಸಲು ನೀವು ಹೆಚ್ಚು ವಿಶೇಷ ಆಯ್ಕೆದಾರರ ಅಗತ್ಯವಿರುತ್ತದೆ. ### ವೈಯಕ್ತಿಕ ಎಲಿಮೆಂಟ್ಗಳಿಗೆ ID ಆಯ್ಕೆದಾರರು ID ಆಯ್ಕೆದಾರರು # ಚಿಹ್ನೆಯನ್ನು ಬಳಸಿ ನಿರ್ದಿಷ್ಟ id ಗುಣಲಕ್ಷಣ ಹೊಂದಿರುವ ಎಲಿಮೆಂಟ್ಗಳನ್ನು ಗುರಿಯಾಗಿಸುತ್ತವೆ. ಪುಟದಲ್ಲಿ ID ಗಳು ಅನನ್ಯವಾಗಿರಬೇಕು, ಆದ್ದರಿಂದ ನಮ್ಮ ಎಡ ಮತ್ತು ಬಲ ಸಸ್ಯ ಕಂಟೈನರ್ ಗಳಿಗೆ ಇದು ಸೂಕ್ತ. ನಮ್ಮ ಟೆರೇರಿಯಂ ಬದಿಯ ಕಂಟೈನರ್ಗಳ ಶೈಲಿಯನ್ನು ಸೃಷ್ಟಿಸೋಣ, ಸಸ್ಯಗಳು ಅಲ್ಲಿ ಸುತ್ತಾಡುತ್ತವೆ: ಈ ಕೋಡ್ ಸಾಧಿಸುವುದು: - absolute ಸ್ಥಾನದೊಂದಿಗೆ ಕಂಟೈನರ್ಗಳನ್ನು ಎಡ ಮತ್ತು ಬಲ ಅಗಲ ಕಡೆಯಲ್ಲಿನ್ದು ಸ್ಥಾಪಿಸುತ್ತದೆ - vh (ವ್ಯೂಪೋರ್ಟ್ ಎತ್ತರ) ಯುನಿಟ್ಗಳನ್ನು ಬಳಸಿ ಪರದೆಯ ಗಾತ್ರಕ್ಕೆ ಹೊಂದಿಕೊಂಡ ಉದ್ದವನ್ನು ನಿಶ್ಚಯಿಸುತ್ತದೆ - ಒಟ್ಟಾರೆ ಅಗಲದಲ್ಲಿ ಪ್ಯಾಡಿಂಗ್ ಸೇರಿಸುವುದಕ್ಕಾಗಿ box-sizing: border-box ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ - ಶುದ್ಧವಾಗಿ ಹೆಚ್ಚುವರಿ px ಯುನಿಟ್ ಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ - ಕಣ್ಣಿಗೆ ಅಲಿಯೋ ಆಗುವಂತೆ ಸುಮ್ಮನಾದ ಹಿನ್ನೆಲೆಯ ಬಣ್ಣವನ್ನು ನಿಶ್ಚಯಿಸುತ್ತದೆ ✅ ಕೋಡ್ ಗುಣಮಟ್ಟದ ಸವಾಲು: ಈ CSS DRY (ನಿಮ್ಮನ್ನು ಪುನರಾವರ್ತಿಸಬೇಡಿ) ಸಿದ್ಧಾಂತವನ್ನು ಉಲ್ಲಂಘಿಸುತ್ತದೆ. ನೀವು ಇದನ್ನು ID ಮತ್ತು ಕ್ಲಾಸ್ ಎರಡನ್ನೂ ಬಳಸಿ ಪುನರ್ ರಚಿಸಬಲ್ಲಿರಾ? ಸುಧಾರಿತ ವಿಧಾನ: ### ಪುನರಾವರ್ತಿಸಬಹುದಾದ ಶೈಲಿಯುಳ್ಳ ಕ್ಲಾಸ್ ಆಯ್ಕೆದಾರರು ಕ್ಲಾಸ್ ಆಯ್ಕೆದಾರರು . ಚಿಹ್ನೆಯನ್ನು ಬಳಸಿ ಅನೇಕ ಎಲಿಮೆಂಟ್ಗಳಿಗೆ ಒಂದೇ ಶೈಲಿಯನ್ನು ಅನ್ವಯಿಸಲು ಸೂಕ್ತ. ID ಗಿಂತ ಭಿನ್ನವಾಗಿ, ಕ್ಲಾಸ್ಗಳು ನಿಮ್ಮ HTML ನಲ್ಲಿ ಯಾವುದೇ ಸಂಖ್ಯೆಯಲ್ಲಿ ಪುನಃಬಳಸಬಹುದು, ಅದರಿಂದ ಶೈಲಿಗೊಳಿಸುವ ಸಾಮಾನ್ಯ ಮಾದರಿಗಳಿಗಾಗಿ ಅದ್ಭುತವಾಗಿದೆ. ನಮ್ಮ ಟೆರೇರಿಯಂನಲ್ಲಿ, ಪ್ರತಿ ಸಸ್ಯಕ್ಕೆ ಸಮಾನ ಶೈಲಿಯು ಬೇಕಾದರೂ ವೈಯಕ್ತಿಕ ಸ್ಥಾನಪರಿಚಯವೂ ಬೇಕಿದೆ. ನಾವು ಹಂಚಿಕೊಳ್ಳುವ ಶೈಲಿಗಾಗಿ ಕ್ಲಾಸ್ ಮತ್ತು ವೈಯಕ್ತಿಕ ಸ್ಥಾನಪರಿಚಯಕ್ಕಾಗಿ ID ನ ಸಂಯೋಜನೆಯನ್ನು ಬಳಸು ತೀರ್ಮಾನ ಮಾಡುತ್ತೇವೆ. ಪ್ರತಿ ಸಸ್ಯದ HTML ರಚನೆ: ಮುಖ್ಯ ಅಂಶಗಳ ವಿವರಣೆ: - ಎಲ್ಲಾ ಸಸ್ಯಗಳಿಗಾಗಿ ಏಕಮಟ್ಟದ ಕಂಟೈನರ್ ಶೈಲಿಗೇರಿಸಲು class="plant-holder" ಬಳಕೆ - ಚಿತ್ರದ ಸಾಮಾನ್ಯ ಶೈಲಿ ಮತ್ತು ವರ್ತನೆಗೆ class="plant" ಅನ್ವಯಿಸುವುದು - ವೈಯಕ್ತಿಕ ಸ್ಥಾನಪರಿಚಯ ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಂವಹನಕ್ಕಾಗಿ id="plant1" ಸೇರಿಸುವುದು - ತಂತ್ರಾಂಶ ಓದುಗರಿಗೆ ಸೂಕ್ತ ವಿವರಣಾತ್ಮಕ alt ಪಠ್ಯ ಒದಗಿಸುವುದು ಈ ಶೈಲಿಗಳನ್ನು ನಿಮ್ಮ style.css ಫೈಲ್ ಗೆ ಸೇರಿಸಿ: ಈ ಶೈಲಿಗಳ ವಿವರ: - plant-holder ನಿಗದಿತ ಪ್ರತ್ಯೇಕ ಸ್ಥಾನದ ಕಂಟೆಕ್ಸ್ಟ್ ರಚಿಸುತ್ತದೆ - ಪ್ರತಿ ಸಸ್ಯದ ಹೋಲ್ಡರ್ ಗಾತ್ರವನ್ನು 13% ಎತ್ತರವನ್ನಿಟ್ಟುಕೊಂಡಿದೆ, ಇದರಿಂದ ಎಲ್ಲಾ ಸಸ್ಯಗಳು ಲಂಬವಾಗಿ ಸರಿಯಾಗಿ ಕಾಣುವಂತೆ - ಸಸ್ಯದ ಕಂಟೈನರ್ನೊಳಗಿನ ಕೇಂದ್ರ ಸಾರ್ವಜನಿಕವನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಸ್ವಲ್ಪ ಎಡಕ್ಕೆ ಸರಿಸಿದಿದೆ - ಹೆಚ್ಚು ಗರಿಷ್ಠ ಅಗಲ ಮತ್ತು ಗರಿಷ್ಠ ಎತ್ತರ ನಿಲುವಂಗಿ responsive ರೂಪಾಂತರ ಅನುಮತಿಸುತ್ತದೆ - ಟೆರೇರಿಯಂನ ಇತರ ಎಲಿಮೆಂಟ್ ಗಳಿಗಿಂತ ಮುಂದಿರಿಸಲು z-index ಬಳುಕೊಳ್ಳುವುದು - ಉತ್ತಮ ಬಳಕೆದಾರ ಸಂವಹನಕ್ಕೆ CSS ರವಾನೆಯೊಂದಿಗೆ ಸಣ್ಣ ಹವರ್ ಪರಿಣಾಮ ಸೇರಿಸಲಾಗಿದೆ ✅ ವಿಚಾರಣೀಯತೆ: .plant-holder ಮತ್ತು .plant ಎರಡು ಆಯ್ಕೆದಾರರ ಅಗತ್ಯವೇನು? ನಾವು ಒಂದೇ ಒಂದು ಬಳಸದಿದ್ದರೆ ಏನಾಗಬಹುದು? ## CSS ಸ್ಥಾನಪರಿಚಯವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು CSS ಸ್ಥಾನಪರಿಚಯ ನಾಟಕ ನಿರ್ದೇಶಕರಂತೆ ಆಗಿದ್ದು - ನೀವು ಎಲ್ಲ ಅಭಿನೇತರನ್ನಿರಿಸಲು ಮತ್ತು ವೇದಿಕೆ ಮೇಲೆ ಹೇಗೆ ಸರಿಯಲು ಸೂಚಿಸುತ್ತೀರಿ. ಕೆಲವು ನಟರು ಸಾಮಾನ್ಯ ವ್ಯವಸ್ಥೆಯನ್ನನುಸರಿಸುತ್ತಾರೆ, ಇತರರು ನಾಟಕೀಯ ಪರಿಣಾಮಕ್ಕಾಗಿ ವಿಶೇಷ ಸ್ಥಾನಪರಿಚಯ ಪಡೆಯುತ್ತವೆ. ಸ್ಥಾನಪರಿಚಯವನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡಾಗ, ಅನೇಕ ವಿನ್ಯಾಸ ಸವಾಲುಗಳು ಪರಿಹಾರವಾಗುತ್ತವೆ. ಬಳಕೆದಾರರು ಸ್ಕ್ರೋಲ್ ಮಾಡಿದಾಗ ಮೇಲಿನ ಭಾಗದಲ್ಲಿ ನವಿಗೇಶನ್ ಬಾರ್ ಉಳಿಯಬೇಕಾದರೆ? ಅದಕ್ಕೆ ಸ್ಥಾನಪರಿಚಯ ಜವಾಬ್ದಾರಿಯಾಗುತ್ತದೆ. ಒಂದು ನಿರ್ದಿಷ್ಟ ಸ್ಥಳದಲ್ಲಿ ಸೂಚಿಗೊಂಬೆ ತೋರಿಸಲು ಬೇಕಾದರೆ? ಹಾಗೂ ಅಷ್ಟೆ. ### ಐದು ಸ್ಥಾನಪರಿಚಯ ಮೌಲ್ಯಗಳು ### ನಮ್ಮ ಟೆರೇರಿಯಂನ ಸ್ಥಳಪರಿಚಯ ನಮ್ಮ ಟೆರೇರಿಯಂ ಒಂದು ಕೌಶಲ್ಯಮಯ ಸಂಯೋಜನೆ ಪ್ರಕರಣದಲ್ಲಿ ವಿವಿಧ ಸ್ಥಾನಪರಿಚಯಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಬಯಸಿದ ವಿನ್ಯಾಸವನ್ನು ರಚಿಸುತ್ತದೆ: ಸ್ಥಾನಪರಿಚಯ ತಂತ್ರಜ್ಞಾನ ತೀರಸ್ಕರಣೆ: - absolute ಕಂಟೈನರ್ಗಳು ಸಾಮಾನ್ಯ ಡಾಕ್ಯುಮೆಂಟ್ ಪ್ರವಾಹದಿಂದ ತೆಗೆದು ಪರದೆ ಅಂಚುಗಳಲ್ಲಿ ಅಂಟಿವೆ - ಸಂಬಂಧಿತ ಸಸ್ಯದ ಹೋಲ್ಡರ್ಗಳು ಸ್ಥಾನಪರಿಚಯದ ಸಂದರ್ಭವನ್ನು ನಿರ್ಮಿಸುತ್ತವೆ ಆದರೆ ತೆರಪಿನ ಪ್ರವಾಹದಲ್ಲಿ ಇರುತ್ತವೆ - ಸಂಬಂಧಿತ ಕಂಟೈನರ್ ಒಳಗೆ ಸಸ್ಯಗಳು ನಿಖರವಾಗಿ absolute ಸ್ಥಾನಪರಿಚಯ ಹೊಂದಿಕೊಳ್ಳಬಹುದು - ಈ ಸಂಯೋಜನೆ ಸಸ್ಯಗಳು ಲಂಬವಾಗಿ ಸವರಿಕೊಳ್ಳುವಂತೆ ಇರಿಸಲು ಹಾಗೂ ವೈಯಕ್ತಿಕವಾಗಿ ಹೇರಿಕೊಳ್ಳುವುದು ಸಾಧ್ಯವಾಗಿಸುತ್ತದೆ ✅ ಪ್ರಯೋಗ ಸಮಯ: ಸ್ಥಾನಪರಿಚಯ ಮೌಲ್ಯಗಳನ್ನು ಬದಲಿಸಿ ಫಲಿತಾಂಶಗಳನ್ನು ಗಮನಿಸಿ: - .container ನ್ನು absolute ನಿಂದ relative ಗೆ ಬದಲಿಸಿದರೆ ಏನಾಗುತ್ತದೆ? - .plant-holder relative ಬದಲಾಗಿ absolute ಆಡುವಾಗ ಲೇಔಟ್ ಹೇಗೆ ಬದಲಾಗುತ್ತದೆ? - .plant ಅನ್ನು relative ಪಾಸಿಷನಿಂಗ್ ಗೆ ಬದಲಿಸಿದಾಗ ಏನಾಗುತ್ತದೆ? ### 🔄 ಶೈಕ್ಷಣಿಕ ಪರಿಶೀಲನೆ CSS ಪಾಸಿಷನಿಂಗ್ ನ ಪರಿಣತಿ: ನಿಮ್ಮ ಅರಿವನ್ನು ಪರಿಶೀಲಿಸಿಕೊಳ್ಳಿ: - ✅ ಎಡವಣೆ-ಬಿಟ್ಟು ಸರಿಸಲು ಏಕೆ ಸಸ್ಯಗಳಿಗೆ absolute ಪಾಸಿಷನಿಂಗ್ ಬೇಕಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ವಿವರಿಸಬಹುದು? - ✅ relative ಕಂಟೈನರ್ಗಳು ಪಾಸಿಷನಿಂಗ್ ಕಾನ್ಟೆಕ್ಸ್ಟ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡಿದ್ದೀರಾ? - ✅ ಪಕ್ಕದ ಕಂಟೈನರ್ಗಳು absolute ಪಾಸಿಷನಿಂಗ್ ಅನ್ನು ಏಕೆ ಬಳಸುತ್ತವೆ? - ✅ ನೀವು ಎಲ್ಲ ಪಾಸಿಷನ್ ಘೋಷಣೆಗಳನ್ನು ತೆಗೆದುಹಾಕಿದರೆ ಏನಾಗಬಹುದು? ನೈಜ ಜಗತ್ತಿನ ಸಂಪರ್ಕ: CSS ಪಾಸಿಷನಿಂಗ್ ನೈಜ ಜಗತ್ತಿನ ಲೇಔಟ್ ಅನ್ನು ಹೇಗೆ ಅನುಸರಿಸುತ್ತದೆ ಎಂದು ಯೋಚಿಸಿ: - Static: ಪುಸ್ತಕಗಳನ್ನು ತಲಾ ನೆಲದ ಮೇಲೆ (ಸ್ವಾಭಾವಿಕ ಕ್ರಮ) - Relative: ಪುಸ್ತಕವನ್ನು ಸ್ವಲ್ಪ moved ಆದರೆ ಅದರ ಸ್ಥಾನ ಉಳಿಸಿ - Absolute: ನಿಶ್ಚಿತ ಪುಟದ ಸಂಖ್ಯೆಯಲ್ಲಿ ಬುಕ್ಮಾರ್ಕ್ ಹಾಕುವುದು - Fixed: ನೀವು ಪುಟಗಳನ್ನು ತಿರುಗಿಸುವಾಗವೂ ಕಾಣುವ ಸ್ಕಿಕ್ಕಿ ಟಿಪ್ಪಣಿ ## CSS ಜೊತೆಗೆ ಟೆರೇರಿಯಂ ನಿರ್ಮಾಣ ಈಗ ನಾವು ಕೇವಲ CSS ನೊಂದಿಗೆ ಗ್ಲಾಸ್ ಜಾರ್ ರಚಿಸುವುದಾದರಷ್ಟೆ — ಚಿತ್ರಗಳು ಅಥವಾ ಗ್ರಾಫಿಕ್ಸ್ ಸಾಫ್ಟ್ವೇರ್ ಅಗತ್ಯವಿಲ್ಲ. ಸ್ಥಿರವಾದ ಗ್ಲಾಸ್, ನೆರಳುಗಳು, ಮತ್ತು ಆಳದ ಪರಿಣಾಮಗಳನ್ನು ಪಾಸಿಷನಿಂಗ್ ಮತ್ತು ಟ್ರಾನ್ಸ್ಪೆರಂಸಿ ಬಳಸಿ ತೋರಿಸುವುದು CSS ನ ದೃಶ್ಯ ಶಕ್ತಿಗಳನ್ನು ಸಾಬೀತು ಮಾಡುತ್ತದೆ. ಈ ತಂತ್ರವೇ ಬಾಹೌಸ್ ಚಳುವಳಿಯ ವಾಸ್ತುಶಿಲ್ಪಿಗಳು ಸರಳ ಜ್ಯಾಮಿತೀಯ ಆಕಾರಗಳನ್ನು ಬಳಸಿ ಸೌಂದರ್ಯಪೂರ್ಣ, ಸಂಕೀರ್ಣ ರಚನೆಗಳನ್ನು ಸೃಷ್ಟಿಸಿದ್ದು ಹೇಗಿದೆ ಅಂದರೆ ಹೋಲಿಕೆಯಾಗಿದೆ. ಈ ಸಿದ್ಧಾಂತಗಳನ್ನು ತಿಳಿದ ಮೇಲೆ ನೀವು ಬಹು ವೆಬ್ ವಿನ್ಯಾಸಗಳ CSS ತಂತ್ರಗಳನ್ನು ಗುರುತಿಸಬಹುದು. ### ಗ್ಲಾಸ್ ಜಾರ್ ಭಾಗಗಳನ್ನು ರಚಿಸಲಾಗುವುದು ನಾವು ಟೆರೇರಿಯಂ ಜಾರ್ ಅನ್ನು ಕಿತ್ತುಕೊಂಡು ಮುಂದೆ ಸಾಗೋಣ. ಪ್ರತಿ ಭಾಗವು absolute ಪಾಸಿಷನಿಂಗ್ ಮತ್ತು ಪ್ರತಿಶತ ಆಧಾರಿತ ಗಾತ್ರವನ್ನು ಬಳಸುತ್ತದೆ, ಇದರಿಂದ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸ ಸಾದ್ಯ. ಟೆರೇರಿಯಂ ನಿರ್ಮಾಣದ ಅರ್ಥ: - ಎಲ್ಲಾ ಪರದೆ ಗಾತ್ರಗಳಲ್ಲೂ ಪ್ರತಿಶತ ಆಧಾರಿತ ಗಾತ್ರವನ್ನು ಬಳಸುವ ಮೂಲಕ ಪ್ರತಿಕ್ರಿಯಾಶೀಲತೆ ಸಾಧಿಸುವುದು - ಘಟಕಗಳನ್ನು ನಿಖರವಾಗಿ ಸರಳವಾಗಿ ಸರಿಸಲು absolute ಪಾಸಿಷನಿಂಗ್ ಅನ್ವಯಿಸುವುದು - ಗಾಜಿನ ಟ್ರಾನ್ಸ್ಪೆರಂಸಿ ಪರಿಣಾಮಕ್ಕಾಗಿ ವಿಭಿನ್ನ ಧಾಟುಕಟ್ಟಿನ ಮೌಲ್ಯಗಳನ್ನು ಅನ್ವಯಿಸುವುದು - z-index ಲೆಯರಿಂಗ್ ಅನುಸರಿಸಿ ಸಸ್ಯಗಳು ಜಾರ್ ಒಳಗೆ ಕಾಣುವಂತೆ ಮಾಡುವುದು - ವಾಸ್ತವಿಕತೆಯನ್ನು ಹೆಚ್ಚಿಸಲು ಸೂಕ್ಷ್ಮ ಬಾಕ್ಸ್ ಶಾಡೋ ಮತ್ತು ಸೂಕ್ಷ್ಮ ಬಾರ್ಡರ್-ರೇಡಿಯಸ್ ಸೇರಿಸಿ ### ಪ್ರತಿಶತಗಳೊಂದಿಗೆ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸ ನೀವೀಗ ಗಮನಿಸುವುದೇನೆಂದರೆ ಎಲ್ಲ ಗಾತ್ರಗಳು ನಿಶ್ಚಿತ ಪಿಕ್ಸ್ಗಳಿಗಲ್ಲದೆ ಪ್ರತಿಶತರ ಮೂಲಕ ವ್ಯಾಖ್ಯಾನಗೊಂಡಿವೆ: ಇದು ನಿಮಗೆ ಏಕೆ ಮುಖ್ಯ: - ಟೆರೇರಿಯಂ ಯಾವುದೇ ಪರದೆ ಗಾತ್ರದ ಮೇಲೆ ಅನುಪಾತದಲ್ಲಿ ವಿಸ್ತಾರವಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ - ಜಾರ್ ಭಾಗಗಳ ನಡುವೆ ದೃಶ್ಯ ಸಂಬಂಧವನ್ನು ಉಳಿಸುತ್ತದೆ - ಮೊಬೈಲ್ ಫೋನಿನಿಂದ ದೊಡ್ಡ ಡೆಸ್ಕ್ಟಾಪ್ ಮോണಿಟರ್ಗಳಿಗೂ ಸಾದೃಶ್ಯ ಅನುಭವ ಕೊಡುತ್ತದೆ - ದೃಶ್ಯ ಲೇಔಟ್ ಮುರಿಯದೇ ವಿನ್ಯಾಸವನ್ನು ಹೊಂದಿಕೊಳ್ಳಲು ಅನುವುಮಾಡುತ್ತದೆ ### CSS ಯೂನಿಟ್ಗಳ ಪ್ರಾಯೋಗಿಕ ಬಳಕೆ ನಾವು ಬಾರ್ಡರ್-ರೇಡಿಯಸ್ ಗೆ rem ಯೂನಿಟ್ಗಳನ್ನು ಬಳಸುತ್ತೇವೆ, ಇದು ರೂಟ್ ಫಾಂಟ್ ಗಾತ್ರಕ್ಕೆ ಅನುನಯಿಸುತ್ತದೆ. ಇದರಿಂದ ಬಳಕೆದಾರರ ಫಾಂಟ್ ಆಪ್ಶನ್ಗಳನ್ನು ಗೌರವಿಸುವ ಸುಲಭ ವಿನ್ಯಾಸಗಳು ಸೃಷ್ಟಿಯಾಗುತ್ತವೆ. ಅಧಿಕ ವಿವರಗಳಿಗೆ ಅಧಿಕೃತ CSS ಸಂಬಂಧಿತ ಯೂನಿಟ್ಗಳ ವಿವರಣೆ ಓದು. ✅ ಚಿತ್ರಾತ್ಮಕ ಪ್ರಯೋಗ: ಈ ಮೌಲ್ಯಗಳನ್ನು ಬದಲಿಸಿ ಪರಿಣಾಮಗಳನ್ನು ಗಮನಿಸಿ: - ಜಾರ್ ಸ್ಪಷ್ಟತೆ 0.5 ರಿಂದ 0.8 ಗೆ ಬದಲಾಯಿಸಿದಾಗ ಗಾಜಿನ ನೋಟ ಹೇಗೆ ಬದಲಾಗುತ್ತದೆ? - ಮಣ್ಣಿನ ಬಣ್ಣವನ್ನು #3a241d ನಿಂದ #8B4513 ಗೆ ಬದಲಾಯಿಸಿದಾಗ ದೃಶ್ಯ ಪರಿಣಾಮ ಏನಾಗುತ್ತದೆ? - ಮಣ್ಣಿನ z-index ಅನ್ನು 2 ಗೆ ಬದಲಾಯಿಸಿದರೆ ಲೇಯರಿಂಗ್ಗೆ ಏನಾಗುತ್ತದೆ? ### 🔄 ಶೈಕ್ಷಣಿಕ ಪರಿಶೀಲನೆ CSS ದೃಶ್ಯ ವಿನ್ಯಾಸ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ: ದೃಶ್ಯ CSS ಅರಿವು ತಪಾಸಣೆ: - ✅ ಪ್ರತಿಶತ ಆಧಾರಿತ ಗಾತ್ರಗಳು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸವನ್ನು ಹೇಗೆ ಸೃಷ್ಟಿಸುತ್ತವೆ? - ✅ ಸ್ಪಷ್ಟತೆ ಗಾಜಿನ ಟ್ರಾನ್ಸ್ಪೆರಂಸಿ ಪರಿಣಾಮವನ್ನು ಹೇಗೆ ತರುತ್ತದೆ? - ✅ ಲೆಯರಿಂಗ್ನಲ್ಲಿ z-index ಪಾತ್ರವೇನು? - ✅ ಬಾರ್ಡರ್-ರೇಡಿಯಸ್ ಮೌಲ್ಯಗಳು ಜಾರ್ ಆಕಾರವನ್ನು ಹೇಗೆ ರಚಿಸುತ್ತವೆ? ವಿನ್ಯಾಸ ತತ್ವ: ಸರಳಾಕೃತಿಗಳು ಬಳಸಿ ಸಂಕೀರ್ಣ ದೃಶ್ಯಗಳನ್ನು ಹೇಗೆ ರಚಿಸುತ್ತೆವೆ ನೋಡಿರಿ: 1. ಆಯತಾಕೃತಿಗಳು → ಮೂಗುಮುಖದ ಆಯತಾಕೃತಿಗಳು → ಜಾರ್ ಭಾಗಗಳು 2. ಸಧಾರಣ ಬಣ್ಣಗಳು → ಪಾರದರ್ಶಕತೆ → ಗ್ಲಾಸ್ ಪರಿಣಾಮ 3. ಒಂದು ಒಂದು ಘಟಕಗಳು → ಪಲೆಯಾದ ಸಂಯೋಜನೆಗಳು → 3D ನೋಟ --- ## GitHub Copilot ಏಜೆಂಟ್ ಚಾಲೆಂಜ್ 🚀 ನೀವು ಕೆಳಗಿನ ಚಾಮೇಲ್ ಪೂರ್ಣಗೊಳಿಸಲು ಏಜೆಂಟ್ ಮೋಡನ್ನು ಬಳಸಿರಿ: ವಿವರಣೆ: ಟೆರೇರಿಯಂ ಸಸ್ಯಗಳನ್ನು ಸ್ವಲ್ಪ ಸ್ವಲ್ಪ ಎಡ-ಬಲದ ತಿರುವು ತೋರಿಸುವ animation ರಚಿಸಿ, ಇದು ಪ್ರಕೃತಿಸಮಾನ ಗಾಳಿ ಪರಿಣಾಮವನ್ನು ಇಟ್ಟುಕೊಳ್ಳುತ್ತದೆ. ಇದರಿಂದ CSS animation, transform ಮತ್ತು keyframe ಗಳ ಅಭ್ಯಾಸವಾಗುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಟೆರೇರಿಯಂದ ದೃಶ್ಯ ಆಕರ್ಷಣೆ ಹೆಚ್ಚುತ್ತದೆ. ಪ್ರಾಂಪ್ಟ್: ಟೆರೇರಿಯಂ ಸಸ್ಯಗಳು 2-3 ಡಿಗ್ರಿ ಎಡ ಬಲಕ್ಕೆ ಸ್ವಲ್ಪ ತಿರುಗುವ sway animation .plant ಕ್ಲಾಸ್ ಗೆ ಸೇರಿಸಿ. ಅವಧಿ 3-4 ಸೆಕೆಂಡುಗಳಿರಲಿ, ಅನಂತ ಲೂಪ್ ಆಗಲಿ ಮತ್ತು ನೈಸರ್ಗಿಕ ಚಲನವಲನಕ್ಕಾಗಿ easing ಫಂಕ್ಷನ್ ಇರಲಿ. ಇಲ್ಲಿ agent mode ಬಗ್ಗೆ ತಿಳಿದುಕೊಳ್ಳಿ: agent mode. ## 🚀 ಚಾಲೆಂಜ್: ಗ್ಲಾಸ್ ಪ್ರತಿಬಿಂಬ ಸೇರ್ಪಡೆ ನಿಮ್ಮ ಟೆರೇರಿಯಂಗೆ ವಾಸ್ತವಿಕ ಗ್ಲಾಸ್ ಪ್ರತಿಬಿಂಬವನ್ನು ಸೇರಿಸಲು ಸಿದ್ಧರಾಗಿ? ಈ ತಂತ್ರವು ಆಳ ಮತ್ತು ಸತ್ಯತೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ. ನೀವು ಗಾಜಿನ ಮೇಲಿನ ಬೆಳಕಿನ ಪ್ರತಿಬಿಂಬವನ್ನು ಸುಕ್ಷ್ಮವಾಗಿ ಆಗಿಸುವ ಬಿಳಿ ಅಥವಾ ಹಳದಿ ಬಣ್ಣದ ಅಂಡಾಕೃತಿಗಳನ್ನು ಸೃಷ್ಟಿಸುವಿರಿ. ಜಾರ್ ಎಡ ಬದಿಯಲ್ಲಿ ಸೂಕ್ತವಾಗಿ ಸ್ಥಾನನಿರ್ವಹಿಸಿ, ಸಮರ್ಪಕ ಸ್ಪಷ್ಟತೆ ಮತ್ತು ಬ್ಲರ್ ಪರಿಣಾಮಗಳನ್ನು ಬಳಸಬೇಕು. border-radius ಬಳಸಿ ಸೊಗಸಾದ ಬಬಲ್ ಚಿತ್ತರಗಳನ್ನು ಮಾಡಿ. ಗ್ರೇಡಿಯೆಂಟ್ ಅಥವಾ ಬಾಕ್ಸ್-ಶಾಡೋ ಪ್ರಾಯೋಗಗಳನ್ನು ಪ್ರಯೋಗಿಸಿ ಪ್ರತಿಬಿಂಬವನ್ನು ಅಲಂಕರಿಸಬಹುದು. ## ಪಾಠದ ನಂತರದ ಸಹವಿದ್ಯಾರ್ಥಿ ಪ್ರಶ್ನೋತ್ತರ ಪಾಠದ ನಂತರದ ಪ್ರಶ್ನೋತ್ತರ ## ನಿಮ್ಮ CSS ಮಾರ್ಗವನ್ನು ವಿಸ್ತರಿಸಿ CSS ಪ್ರಥಮವಾಗಿ ಸಂಕೀರ್ಣವಾಗಿ ತೋರುತ್ತದೆ, ಆದರೆ ಮೂಲ ತತ್ತ್ವಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದರಿಂದ ಆಧುನಿಕ ತಂತ್ರಗಳಿಗೆ ಪೂರಕವಾಗಿ ಬೆಳೆಸಬಹುದು. ನಂತರದ CSS ಅಧ್ಯಯನ ವಿಭಾಗಗಳು: - Flexbox - ಅಂಶಗಳ ಸರಳ ಹೊಂದಿಕೆ ಮತ್ತು ವಿತರಣೆ - CSS Grid - ಸಂಕೀರ್ಣ ಲೇಔಟ್ಗಳ ರಚನೆಗಾಗಿ ಶಕ್ತಿಶಾಲಿ ಸಾಧನಗಳು - CSS Variables - ಪುನರಾವೃತ್ತಿ ಕಡಿಮೆ ಮಾಡಿ ನಿರ್ವಹಣೆ ಸುಲಭಪಡಿಸುವುದು - Responsive design - ವಿವಿಧ ಪರದೆ ಗಾತ್ರಗಳಲ್ಲಿ ಯೋಗ್ಯ ಕಾರ್ಯಾಚರಣೆ ### ಇನ್ಟರ್ಕ್ಟಿವ್ ಕಲಿಕೆಯ ಸಂಪನ್ಮೂಲ ಈ ತತ್ವಗಳನ್ನು ಈ ಮನರಂಜನೆಯ ಆಟಗಳ ಮೂಲಕ ಅಭ್ಯಾಸಮಾಡಿ: - 🐸 Flexbox Froggy - ಸಂತೋಷಕರ ಪ್ರಶ್ನೆಗಳ ಮೂಲಕ Flexbox ನ ಶಿಕ್ಷಣ - 🌱 Grid Garden - ವರ್ಚುವಲ್ ಕ್ಯಾರಟ್ ಬೆಳೆಯಿಸಿ CSS Grid ಕಲಿಕೆ - 🎯 CSS Battle - CSS ನ ಕಲಿಕೆಗೆ ಕೋಡಿಂಗ್ ಸವಾಲುಗಳು ### ಹೆಚ್ಚುವರಿ ಕಲಿಕೆ ಸಂಪೂರ್ಣ CSS ಸಿದ್ಧಾಂತಗಳಿಗಾಗಿ ಈ Microsoft Learn ಮಾಯಾಜಾಲ ಪೂರ್ಣಗೊಳಿಸಿ: Style your HTML app with CSS ### ⚡ ಮುಂದಿನ 5 ನಿಮಿಷಗಳಲ್ಲಿ ನೀವು ಮಾಡಬಹುದಾದುದು - [ ] ಡೆವ್ಟೂಲ್ಸ್ ತೆರೆದು ಯಾವುದೇ ವೆಬ್ಸೈಟ್ನಲ್ಲಿ CSS ಶೈಲಿಗಳನ್ನು ಪರಿಶೀಲಿಸಿ - [ ] ಸರಳ CSS ಫೈಲ್ ರಚಿಸಿ ಅದನ್ನು HTML ಪುಟಕ್ಕೆ ಲಿಂಕ್ ಮಾಡಿ - [ ] ಬಣ್ಣಗಳನ್ನು ಬದಲಾಯಿಸುವುದು ಪ್ರಯತ್ನಿಸಿ: ಹೆಕ್ಸ್, RGB ಮತ್ತು ನೇಮಕದ ಬಣ್ಣಗಳು - [ ] ಬಾಕ್ಸ್ ಮಾದರಿಯಲ್ಲಿ ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಮಾರ್ಜಿನ್ ಅನ್ನು ಲಭ್ಯವಾಗಿಸಿ ಅಭ್ಯಾಸ ಮಾಡಿ ### 🎯 ಈ ಗಂಟೆಯಲ್ಲಿ ಸಾಧಿಸಬಹುದಾದುದು - [ ] ಪಾಠದ ಬಳಿಕದ ಪ್ರಶ್ನೋತ್ತರ ಪೂರ್ಣಗೊಳಿಸಿ ಮತ್ತು CSS ಮೌಲ್ಯಗಳನ್ನು ಪರಿಶೀಲಿಸಿ - [ ] ಫಾಂಟ್, ಬಣ್ಣ ಮತ್ತು ಜಾಗದೊಂದಿಗೆ ನಿಮ್ಮ HTML ಪುಟವನ್ನು ಆವೃತ್ಸಿಕೊಳ್ಳಿ - [ ] ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಅಥವಾ ಗ್ರಿಡ್ ಬಳಸಿ ಸರಳ ಲೇಔಟ್ ಸೃಷ್ಟಿಸಿ - [ ] ಸ್ಮೂತ್ ಪರಿಣಾಮಕ್ಕಾಗಿ CSS ಟ್ರಾಂಸಿಶನ್ಗಳನ್ನು ಪ್ರಯೋಗಿಸಿ - [ ] ಮೀಡಿಯಾ ಕುಈರಿಸ್ ಮೂಲಕ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವಿನ್ಯಾಸ ಅಭ್ಯಾಸ ಮಾಡಿ ### 📅 ನಿಮ್ಮ ವಾರ ಭರಿತ CSS ಸಾಹಸ - [ ] ಕ್ರಿಯೆಟಿವ್ ಫ್ಲೇರ್ ಜೊತೆ ಟೆರೇರಿಯಂ ಶೈಲಿಕರಣ ಕಾರ್ಯಗಳನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ - [ ] ಫೋಟೋ ಗ್ಯಾಲರಿ ಲೇಔಟ್ ನಿರ್ಮಾಣಕ್ಕೆ CSS Grid ನ ಸಂಪೂರ್ಣ ನಿಯಂತ್ರಣ ಹಿಡಿಯೋಣ - [ ] ಜೀವನದ ಸ್ಪಂದನಕ್ಕೆ CSS ಅನಿಮೆಷನ್ಗಳು ಕಲಿತುಕೊಳ್ಳಿ - [ ] Sass ಅಥವಾ Less ಪ್ರೀಪ್ರೊಸೆಸರ್ಗಳನ್ನು ಅನ್ವೇಷಿಸಿ - [ ] ವಿನ್ಯಾಸ ತತ್ವಗಳನ್ನು ಅಧ್ಯಯನ ಮಾಡಿ ಮತ್ತು CSS ಗೆ ಅನ್ವಯಿಸಿ - [ ] ಆನ್ಲೈನ್ನಲ್ಲಿ ಕಂಡು ಹಿಡಿದ ಗೌರವಗಳ ವಿನ್ಯಾಸವನ್ನು ವಿಶ್ಲೇಷಿಸಿ ಪುನರೃತ್ಥಾನ ಮಾಡಿ ### 🌟 ನಿಮ್ಮ ತಿಂಗಳುಗಳ ಕಾಲ ವಿನ್ಯಾಸ ನಿಪುಣತೆ - [ ] ಸಂಪೂರ್ಣ ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವೆಬ್ಸೈಟ್ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆ ನಿರ್ಮಿಸಿ - [ ] CSS-in-JS ಅಥವಾ utility-first ಫ್ರೇಮ್ವರ್ಕ್ ಗಳನ್ನು ಕಲಿತುಬೇಡಿ (ಉದಾ: ಟೈಲ್ವಿಂಡ್) - [ ] CSS ಸುಧಾರಣೆಯೊಂದಿಗೆ open-source ಯೋಜನೆಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಿ - [ ] CSS ಕಸ್ಟಮೈಸ್ ಪ್ರಾಪರ್ಟೀಸ್ ಮತ್ತು containment ನಂತಹ ಉನ್ನತ වಾಕ್ಯಗಳನ್ನು ಕುಶಲ ಅಭ್ಯಾಸ ಮಾಡಿ - [ ] ಪುನರುಪಯೋಗಿಸುವ ಘಟಕ ಗ್ರಂಥಾಲಯಗಳನ್ನು ಮೊಡ್ಯೂಲರ್ CSS ಮೂಲಕ ರಚಿಸಿ - [ ] CSS ಕಲಿತವರಿಗೆ ಮುಂಡುಗುಡ್ಡಿ ಮಾಡಿ ಮತ್ತು ವಿನ್ಯಾಸ ಜ್ಞಾನ ಹಂಚಿ ## 🎯 ನಿಮ್ಮ CSS ನಿಪುಣತೆ ಸಮಯರೇಖೆ ### 🛠️ ನಿಮ್ಮ CSS ಉಪಕರಣ ಪಟ್ಟಿ ಸಾರಾಂಶ ಈ ಪಾಠದ ನಂತರ ನೀವು ಪಡೆದಿರುವುದು: - Cascade ಅರ್ಥಮಾಡಿಕೆ: ಹೇಗೆ ಶೈಲಿಗಳು ಪರಸ್ಪರ ಪೋಷಣೆ ಮತ್ತು ಮೀರಿಸುವುದು - ಸೆಲೆಕ್ಟರ್ ಪರಿಣತಿ: ಅಂಶಗಳು, ಕ್ಲಾಸ್ಗಳು ಮತ್ತು ಐಡಿ ಗಳೊಂದಿಗೆ ಖಚಿತ ಗುರಿ ಸಾಧನೆ - ಪಾಸಿಷನಿಂಗ್ ಕೌಶಲ್ಯ: ಘಟಕಗಳ ತಕ್ಕ ಸ್ಥಳ ನಿರ್ಧಾರ ಮತ್ತು ಲೇಯರಿಂಗ್ - ದೃಶ್ಯ ವಿನ್ಯಾಸ: ಗ್ಲಾಸ್ ಪರಿಣಾಮಗಳು, ನೆರಳು ಮತ್ತು ಪಾರದರ್ಶಕತೆ ರಚನೆ - ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ತಂತ್ರಗಳು: ಪ್ರತಿಶತ ಆಧಾರಿತ ಲೇಔಟ್ಗಳು ಎಲ್ಲ ಪರದೆಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವವು - ಕೋಡ್ ಸಂಯೋಜನೆ: ಸ್ವಚ್ಛ, ನಿರ್ವಹಣಾ ಸುಲಭ CSS ರಚನೆ - ಆಧುನಿಕ ಅಭ್ಯಾಸಗಳು: ಸಂಬಂಧಿತ ಯೂನಿಟ್ ಬಳಕೆ ಮತ್ತು ಪ್ರವೇಶಯೋಗ್ಯ ವಿನ್ಯಾಸ ಮಾದರಿಗಳು ಮುಂದಿನ ಹಾದಿಗಳು: ನಿಮ್ಮ ಟೆರೇರಿಯಂನಲ್ಲಿ ಈಗ ರಚನೆ (HTML) ಮತ್ತು ಶೈಲಿ (CSS) ಎರಡೂ ಇದೆ. ಕೊನೆಯ ಪಾಠದಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಪರಸ್ಪರ ಕ್ರಿಯೆ ಸೇರಿಸಲಾಗುವುದು! ## ನಿಯೋಜನೆ CSS ಪುನರ್ರಚನೆ --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> ಬೋಧನೆ: ಈ ದಾಖಲೆ Co-op Translator ಎಂಬ AI ಅನುವಾಡನಾ ಸೇವೆಯನ್ನು ಬಳಸಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ನಾವು ಶುದ್ಧತೆಯತ್ತ ಪ್ರಯತ್ನಿಸುವಾಗಲೂ, ಸ್ವಯಂಚಾಲಿತ ಅನುವಾದಗಳಲ್ಲಿ ದೋಷಗಳು ಅಥವಾ ಅಸತ್ಯತೆಗಳಿದ್ದುಕೊಳ್ಳುವ ಸಾಧ್ಯತೆ ಇದೆ. ಮೂಲ ಭಾಷೆಯಲ್ಲಿರುವ ಮೂಲ ದಾಖಲೆ ಅಧಿಕೃತ ಮೂಲವೆಂದು ಪರಿಗಣಿಸಬೇಕು. ಪ್ರಮುಖ ಮಾಹಿತಿಗಾಗಿ, ವೃತ್ತಿಪರ ಮಾನವ ಅನುವಾದವನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ. ಈ ಅನುವಾದ ಬಳಕೆಗಳಿಂದ ಉಂಟಾಗುವ ಯಾವುದೇ ಗೊಂದಲಗಳು ಅಥವಾ ತಪ್ಪು ಅರ್ಥಗಳಿಗಾಗಿ ನಾವು ಜವಾಬ್ದಾರರಾಗುತ್ತಿಲ್ಲ. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Project Part 1: Introduction to HTML
HTML 또는 하이퍼텍스트 마크업 언어는 여러분이 방문한 모든 웹사이트의 기반입니다. HTML을 웹 페이지에 구조를 부여하는 골격으로 생각해보세요. 어떤 콘텐츠가 어디에 배치되고, 어떻게 조직되며, 각 부분이 무엇을 의미하는지 정의합니다. CSS는 나중에 HTML에 색상과 레이아웃을 입히고, JavaScript는 상호작용을 통해 생명을 불어넣지만, HTML은 모든 것을 가능하게 하는 필수적인 구조를 제공합니다. 이번 수업에서는 가상 테라리움 인터페이스를 위한 HTML 구조를 만들어 봅니다. 이 실습 프로젝트는 시각적으로 흥미로운 것을 만드는 동시에 기본적인 HTML 개념을 배울 수 있게 해줍니다. 시맨틱 요소를 사용해 콘텐츠를 조직하는 방법, 이미지 작업, 그리고 인터랙티브 웹 애플리케이션의 기초를 만드는 법을 배우게 됩니다. 수업이 끝나면 식물 이미지가 정돈된 열에 표시된 작동하는 HTML 페이지가 완성되어 다음 수업에서 스타일링할 준비가 됩니다. 처음에는 단순해 보여도 걱정하지 마세요. CSS가 시각적 다듬기를 하기 전 HTML이 해야 할 역할이 바로 그것입니다. ## 수업 전 퀴즈 수업 전 퀴즈 ## 프로젝트 설정하기 HTML 코드를 작성하기 전에 테라리움 프로젝트를 위한 적절한 작업 공간을 설정합시다. 처음부터 체계적인 파일 구조를 만드는 것은 웹 개발 여정 내내 큰 도움이 되는 중요한 습관입니다. ### 과제: 프로젝트 구조 만들기 테라리움 프로젝트 전용 폴더를 만들고 첫 번째 HTML 파일을 추가합니다. 두 가지 방법이 있습니다: 옵션 1: Visual Studio Code 사용하기 1. Visual Studio Code를 엽니다. 2. "파일" → "폴더 열기"를 클릭하거나 Ctrl+K, Ctrl+O (Windows/Linux), Cmd+K, Cmd+O (Mac)을 사용합니다. 3. terrarium이라는 새 폴더를 만들고 선택합니다. 4. 탐색기 창에서 "새 파일" 아이콘을 클릭합니다. 5. 파일명을 index.html로 지정합니다. 옵션 2: 터미널 명령어 사용하기 이 명령어들이 하는 일: - terrarium 이라는 새 디렉토리를 생성합니다. - terrarium 디렉토리로 이동합니다. - 빈 index.html 파일을 생성합니다. - Visual Studio Code에서 파일을 열어 편집합니다. ## HTML 문서 구조 이해하기 모든 HTML 문서는 브라우저가 올바르게 이해하고 표시할 수 있도록 특정 구조를 따릅니다. 이 구조는 정중한 편지처럼 – 특정 순서의 필수 요소들을 가지며, 웹 페이지 내용을 제대로 처리하도록 돕습니다. 먼저 모든 HTML 문서가 필요로 하는 기본 뼈대를 추가합시다. ### DOCTYPE 선언과 루트 요소 모든 HTML 파일의 첫 두 줄은 문서를 브라우저에 소개하는 역할을 합니다: 이 코드가 하는 일 설명: - <!DOCTYPE html>을 사용해 문서 타입을 HTML5로 선언합니다. - 모든 페이지 내용을 담을 루트 <html> 요소를 만듭니다. - 적절한 브라우저 렌더링을 위한 최신 웹 표준을 설정합니다. - 다양한 브라우저와 기기에서 일관된 표시를 보장합니다. ### 🔄 교육적 점검 잠시 멈추고 생각하기: 계속하기 전에 다음을 이해했는지 확인하세요. - ✅ 왜 모든 HTML 문서에 DOCTYPE 선언이 필요한지 - ✅ <html> 루트 요소가 무엇을 포함하는지 - ✅ 이 구조가 브라우저가 페이지를 올바르게 렌더링하는 데 어떻게 도움이 되는지 간단한 자기 점검: "표준 준수 렌더링"이 무엇인지 자신의 말로 설명할 수 있나요? ## 필수 문서 메타데이터 추가하기 HTML 문서의 <head> 섹션은 방문자가 페이지에서 직접 보지 않는, 브라우저와 검색 엔진에 필요한 중요한 정보를 담고 있습니다. 웹페이지가 제대로 작동하고 다양한 기기 및 플랫폼에서 정확히 보일 수 있게 돕는 '무대 뒤' 정보라고 생각하세요. 이 메타데이터는 브라우저에 페이지를 어떻게 표시할지, 어떤 문자 인코딩을 사용할지, 다른 화면 크기를 어떻게 처리할지를 알려줍니다. 이는 전문적이고 접근 가능한 웹 페이지를 만드는 데 꼭 필요합니다. ### 과제: 문서 헤드 추가하기 여는 <html> 태그와 닫는 </html> 태그 사이에 아래 <head> 섹션을 넣으세요: 각 요소가 하는 일을 세분화해서 설명: - 브라우저 탭과 검색 결과에 표시되는 페이지 제목을 설정합니다. - 전 세계에서 텍스트가 제대로 보이도록 UTF-8 문자 인코딩을 지정합니다. - 최신 버전의 인터넷 익스플로러와 호환을 보장합니다. - 뷰포트를 기기 너비에 맞춰 반응형 디자인을 설정합니다. - 초기 확대 배율을 설정해서 내용을 자연스러운 크기로 표시합니다. ## 문서 본문 구성하기 <body> 요소는 웹페이지에서 사용자가 보고 상호작용할 수 있는 모든 콘텐츠를 담고 있습니다. <head>는 브라우저에 지시를 내리는 역할을 했지만, <body>는 실제 내용인 텍스트, 이미지, 버튼 등 사용자 인터페이스를 구성하는 요소를 포함합니다. 본문 구조를 추가하고 HTML 태그가 어떻게 함께 작동하는지 이해해봅시다. ### HTML 태그 구조 이해하기 HTML은 대부분 쌍으로 짝지어진 태그를 사용하여 요소를 정의합니다. 예를 들어, <p>로 열고 </p>로 닫으며 그 사이에 콘텐츠가 들어갑니다: <p>Hello, world!</p>. 이 코드는 "Hello, world!"라는 텍스트를 포함하는 문단 요소를 만듭니다. ### 과제: Body 요소 추가하기 HTML 파일을 업데이트하여 <body> 요소를 포함하세요: 완전한 구조가 제공하는 것: - 기본 HTML5 문서 틀을 만듭니다. - 올바른 브라우저 렌더링을 위한 필수 메타데이터를 포함합니다. - 보이는 콘텐츠를 위한 빈 본문을 생성합니다. - 현대 웹 개발 우수 사례를 따릅니다. 이제 테라리움에 보이는 요소를 추가할 준비가 됐습니다. <div> 요소를 컨테이너로 사용해 콘텐츠의 여러 섹션을 조직하고, <img> 요소로 식물 이미지를 표시할 것입니다. ### 이미지와 레이아웃 컨테이너 다루기 HTML에서 이미지는 특별하게 “셀프 클로징(self-closing)” 태그를 사용합니다. 콘텐츠를 감싸는 <p></p> 같은 태그와 달리 <img> 태그는 이미지 파일 경로를 지정하는 src 속성과 접근성을 위한 alt 속성 등 필요한 정보를 태그 내에 모두 포함합니다. HTML에 이미지를 추가하기 전에 프로젝트 파일을 적절히 정리해야 합니다. images 폴더를 만들고 식물 그래픽을 추가합시다. 먼저 이미지 준비하기: 1. 테라리움 프로젝트 폴더 안에 images라는 폴더를 만듭니다. 2. 솔루션 폴더에서 식물 이미지를 모두 다운로드합니다 (총 14개 식물 이미지). 3. 모든 식물 이미지를 새로 만든 images 폴더에 복사합니다. ### 과제: 식물 표시 레이아웃 만들기 이제 <body></body> 태그 사이에 두 개의 열로 구성된 식물 이미지들을 추가하세요: 이 코드에서 단계별로 일어나는 일: - 모든 콘텐츠를 담는 메인 페이지 컨테이너 id="page"를 만듭니다. - 왼쪽과 오른쪽 두 개의 열 컨테이너 left-container와 right-container를 설정합니다. - 왼쪽 열에 7개, 오른쪽 열에 7개의 식물을 배치합니다. - 각 식물 이미지를 개별 위치 지정을 위한 plant-holder div로 감쌉니다. - 다음 수업에서 CSS 스타일링을 위한 일관된 클래스 이름을 적용합니다. - 나중에 JavaScript 상호작용을 위해 각 식물 이미지에 고유 ID를 부여합니다. - 이미지 폴더를 가리키는 올바른 파일 경로를 포함합니다. ### 🔄 교육적 점검 구조 이해하기: HTML 구조를 잠시 검토하세요: - ✅ 레이아웃의 주요 컨테이너를 확인할 수 있나요? - ✅ 각 이미지에 고유 ID가 있는 이유를 이해하나요? - ✅ plant-holder div의 목적을 어떻게 설명하겠나요? 시각 검사: HTML 파일을 브라우저에서 열어보세요. 다음이 보여야 합니다: - 기본 식물 이미지 목록 - 두 열로 정돈된 이미지들 - 단순하고 스타일링되지 않은 레이아웃 기억하세요: 이런 평범한 모습이 CSS 스타일링 전 HTML이 보여야 할 정확한 모습입니다! 이 마크업이 추가되면 식물이 화면에 나타나지만 아직 다듬어진 모습은 아닙니다 – 그 역할은 다음 수업의 CSS가 담당합니다! 지금은 콘텐츠를 적절히 조직하고 접근성 모범 사례를 따른 견고한 HTML 기초가 마련된 상태입니다. ## 접근성을 위한 시맨틱 HTML 사용 시맨틱 HTML은 외형뿐 아니라 의미와 목적에 따라 HTML 요소를 선택하는 것입니다. 시맨틱 마크업을 사용하면 웹 브라우저, 검색 엔진, 그리고 스크린 리더 같은 보조 기술에 콘텐츠의 구조와 의미를 전달하게 됩니다. 이 방법은 장애가 있는 사용자에게 웹사이트 접근성을 높이고, 검색 엔진이 콘텐츠를 더 잘 이해하도록 돕습니다. 현대 웹 개발의 근간이 되는 원칙이며 모두에게 더 나은 경험을 만듭니다. ### 시맨틱 페이지 제목 추가하기 테라리움 페이지에 적절한 제목을 넣어 봅시다. 여는 <body> 태그 바로 다음 줄에 다음 코드를 삽입하세요: 시맨틱 마크업이 중요한 이유: - 스크린 리더가 페이지 구조를 쉽게 탐색하고 이해하게 돕습니다. - 콘텐츠 계층을 명확히 하여 검색 엔진 최적화(SEO)를 향상시킵니다. - 시각 장애인이나 인지 기능 차이가 있는 사용자도 접근성을 높입니다. - 모든 기기와 플랫폼 전반에 걸쳐 더 좋은 사용자 경험을 제공합니다. - 전문적인 개발을 위한 웹 표준과 최선의 실천법을 따릅니다. 시맨틱 vs 비시맨틱 선택 예시: ## 테라리움 컨테이너 만들기 이제 테라리움 자체 – 식물을 담을 유리 용기 – 의 HTML 구조를 추가해 봅시다. 이 섹션은 중요한 개념을 보여줍니다: HTML은 구조를 제공하지만 CSS 스타일링 없이는 이 요소들이 눈에 보이지 않습니다. 테라리움 마크업은 다음 수업에서 CSS 스타일링을 직관적이고 유지보수 쉽게 만들기 위해 설명적인 클래스 이름을 사용합니다. ### 과제: 테라리움 구조 추가하기 마지막 </div> 태그 위(페이지 컨테이너 닫는 태그 바로 전에) 이 마크업을 삽입하세요: 이 테라리움 구조가 하는 일: - 고유 ID를 가진 메인 테라리움 컨테이너를 생성합니다. - 각 시각적 구성 요소(상단, 벽, 흙, 하단)에 대해 별도의 요소를 정의합니다 - 유리 반사 효과(광택 요소)를 위한 중첩 요소를 포함합니다 - 각 요소의 용도를 명확히 나타내는 설명적인 클래스 이름을 사용합니다 - 유리 테라리움 외관을 만들어낼 CSS 스타일링 구조를 준비합니다 ### 🔄 교육 점검 HTML 구조 숙달: 다음을 할 수 있는지 확인하세요: - ✅ HTML 구조와 시각적 외관의 차이 설명하기 - ✅ 시맨틱과 비시맨틱 HTML 요소 구분하기 - ✅ 적절한 마크업이 접근성에 어떻게 도움이 되는지 설명하기 - ✅ 완전한 문서 트리 구조 인식하기 이해도 테스트: 자바스크립트가 비활성화되고 CSS가 제거된 상태로 브라우저에서 HTML 파일을 열어 보세요. 이것이 당신이 만든 순수 시맨틱 구조임을 보여줍니다! --- ## GitHub Copilot 에이전트 챌린지 에이전트 모드를 사용하여 다음 챌린지를 완료하세요: 설명: 테라리움 프로젝트에 추가할 수 있는 식물 관리 가이드 섹션에 대한 시맨틱 HTML 구조를 만드세요. 요구 사항: "Plant Care Guide"라는 주요 제목과 각각 "Watering", "Light Requirements", "Soil Care"라는 부제목을 가진 세 개의 하위 섹션을 포함하는 시맨틱 HTML 섹션을 만드세요. 각 섹션에는 식물 관리 정보가 담긴 단락이 포함되어야 합니다. <section>, <h2>, <h3>, <p> 같은 적절한 시맨틱 HTML 태그를 사용해 내용을 구조화하세요. 여기에서 에이전트 모드에 대해 더 알아보세요. ## HTML 역사 탐구 챌린지 웹 진화를 배우기 HTML은 1990년 팀 버너스리(Tim Berners-Lee)가 CERN에서 최초 웹 브라우저를 만든 이후 크게 발전해 왔습니다. <marquee> 같은 일부 오래된 태그는 접근성 기준이나 반응형 디자인과 잘 맞지 않아 현재는 더 이상 권장되지 않습니다. 실험해 보세요: 1. <h1> 제목을 일시적으로 <marquee> 태그로 감싸 보세요: <marquee><h1>My Terrarium</h1></marquee> 2. 브라우저에서 페이지를 열어 스크롤 효과를 관찰하세요 3. 이 태그가 왜 비권장되었는지 생각해 보세요 (힌트: 사용자 경험과 접근성을 고려하세요) 4. <marquee> 태그를 제거하고 시맨틱 마크업으로 복원하세요 반성 질문: - 스크롤 제목이 시각 장애나 동작 민감성을 가진 사용자에게 어떤 영향을 미칠까요? - 비슷한 시각 효과를 더 접근성 있게 구현할 수 있는 현대 CSS 기법은 무엇일까요? - 왜 현재 웹 표준을 사용하고 비권장 요소를 피하는 것이 중요할까요? 여기에서 폐기되고 비권장된 HTML 요소에 대해 더 알아보고 웹 표준이 어떻게 사용자 경험 향상을 목표로 진화하는지 이해하세요. ## 강의 후 퀴즈 강의 후 퀴즈 ## 복습 및 자기주도 학습 HTML 지식 심화하기 HTML은 30년 넘게 웹의 기반이 되어 왔으며, 단순 문서 마크업 언어에서 상호작용 애플리케이션을 구축하는 정교한 플랫폼으로 발전했습니다. 이 진화를 이해하면 현대 웹 표준을 더욱 잘 이해하고 개발 결정을 더 효과적으로 내릴 수 있습니다. 추천 학습 경로: 1. HTML 역사와 진화 - HTML 1.0부터 HTML5까지의 타임라인 조사하기 - 특정 태그가 폐기된 이유 탐구(접근성, 모바일 친화성, 유지보수성) - 새로운 HTML 기능과 제안 조사하기 2. 시맨틱 HTML 심층 학습 - HTML5 시맨틱 요소 전체 목록 공부하기 - <article>, <section>, <aside>, <main>의 사용 시기 파악하기 - 접근성 향상을 위한 ARIA 속성 학습하기 3. 현대 웹 개발 - Microsoft Learn에서 반응형 웹사이트 구축 배우기 - HTML, CSS, 자바스크립트 통합 방법 이해하기 - 웹 성능 및 SEO 최적화 방법 익히기 반성 질문: - 어떤 폐기 태그를 발견했고, 왜 삭제되었나요? - 앞으로 제안되고 있는 새 HTML 기능은 무엇인가요? - 시맨틱 HTML이 웹 접근성과 SEO에 어떻게 기여하나요? ### ⚡ 다음 5분 내 할 수 있는 일 - [ ] 개발자 도구(F12) 열어 좋아하는 웹사이트의 HTML 구조 검사하기 - [ ] 기본 태그 <h1>, <p>, <img>를 사용한 간단한 HTML 파일 만들기 - [ ] 온라인 W3C HTML Validator로 HTML 검증하기 - [ ] HTML에 <!-- comment --> 사용해 주석 추가해보기 ### 🎯 이번 시간에 할 수 있는 목표 - [ ] 강의 후 퀴즈 완료 및 시맨틱 HTML 개념 복습하기 - [ ] 적절한 HTML 구조를 사용해 나 자신에 관한 간단한 웹페이지 만들기 - [ ] 다양한 제목 레벨과 텍스트 서식 태그 실험하기 - [ ] 이미지와 링크 추가로 멀티미디어 통합 연습하기 - [ ] 아직 시도하지 않은 HTML5 기능 조사하기 ### 📅 한 주간 HTML 여정 - [ ] 시맨틱 마크업을 활용해 테라리움 프로젝트 과제 완료하기 - [ ] ARIA 레이블과 역할을 사용해 접근성 좋은 웹페이지 만들기 - [ ] 다양한 입력 유형을 활용한 폼 생성 연습하기 - [ ] localStorage 또는 Geolocation 같은 HTML5 API 탐색하기 - [ ] 반응형 HTML 패턴과 모바일 퍼스트 디자인 공부하기 - [ ] 다른 개발자의 HTML 코드 검토하며 최선 사례 배우기 ### 🌟 한 달간 웹 기본기 다지기 - [ ] HTML 실력을 보여줄 포트폴리오 웹사이트 제작하기 - [ ] Handlebars 같은 프레임워크로 HTML 템플릿 학습하기 - [ ] HTML 문서화 개선으로 오픈소스 프로젝트에 기여하기 - [ ] 커스텀 요소 등 고급 HTML 개념 마스터하기 - [ ] CSS 프레임워크 및 자바스크립트 라이브러리와 통합하기 - [ ] HTML 기본기를 배우는 이들을 멘토링하기 ## 🎯 당신의 HTML 숙련도 일정 ### 🛠️ 당신의 HTML 도구 요약 이번 수업을 마치면 다음을 갖게 됩니다: - 문서 구조: 적절한 DOCTYPE을 갖춘 완전한 HTML5 기반 - 시맨틱 마크업: 접근성과 SEO를 강화하는 의미 있는 태그 - 이미지 통합: 올바른 파일 구성 및 대체 텍스트 관행 - 레이아웃 컨테이너: 설명적인 클래스 이름을 가진 전략적 div 활용 - 접근성 인식: 스크린 리더 내비게이션 이해 - 현대 표준: 최신 HTML5 관행과 비권장 태그 지식 - 프로젝트 기반: CSS 스타일링과 JavaScript 상호작용 기초 탄탄하게 마련 다음 단계: 당신의 HTML 구조는 CSS 스타일링을 위한 준비가 완료되었습니다! 구축한 시맨틱 기초 덕분에 다음 수업을 훨씬 쉽게 이해할 수 있을 것입니다. ## 과제 HTML 연습하기: 블로그 목업 만들기 --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> 면책 조항: 이 문서는 AI 번역 서비스 Co-op Translator를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확한 부분이 있을 수 있음을 양지해 주시기 바랍니다. 원문 문서는 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우 전문 인력에 의한 번역을 권장합니다. 이 번역의 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium 프로젝트 2부: CSS 소개
기억하시나요, HTML 테라리움이 꽤 기본적으로 보였던 것을? CSS는 그 단순한 구조를 시각적으로 매력적으로 변신시키는 부분입니다. HTML이 집의 골조를 짓는 것과 같다면, CSS는 그 집을 집답게 만드는 모든 것 - 페인트 색상, 가구 배치, 조명, 방들이 서로 어떻게 연결되는지 등을 의미합니다. 베르사유 궁전이 원래 사냥용 오두막으로 시작했지만, 세심한 장식과 레이아웃 덕분에 세계에서 가장 훌륭한 건물 중 하나가 된 것을 생각해 보세요. 오늘은 여러분의 테라리움을 기능적 단계에서 세련된 단계로 바꿔 보겠습니다. 요소를 정확하게 위치시키는 법, 다양한 화면 크기에 반응하는 레이아웃을 만드는 법, 그리고 웹사이트를 매력적으로 만드는 시각적 요소들을 배우게 될 것입니다. 이 수업이 끝날 무렵, 전략적인 CSS 스타일링이 프로젝트를 얼마나 극적으로 향상시킬 수 있는지 보게 될 것입니다. 여러분의 테라리움에 스타일을 더해 보죠. ## 강의 전 퀴즈 강의 전 퀴즈 ## CSS 시작하기 CSS는 흔히 "예쁘게 만드는 것"이라고만 생각되지만, 훨씬 더 넓은 목적을 가집니다. CSS는 마치 영화 감독과 같아서, 모든 것이 어떻게 보이는지뿐 아니라 어떻게 움직이고, 상호작용에 반응하며, 다양한 상황에 적응하는지도 통제합니다. 현대 CSS는 놀라울 정도로 강력합니다. 휴대폰, 태블릿, 데스크톱 컴퓨터에 맞춰 레이아웃을 자동으로 조정하는 코드를 작성할 수 있습니다. 사용자 주의를 필요한 곳으로 자연스럽게 이끄는 부드러운 애니메이션도 만들 수 있습니다. 모든 것이 잘 작동할 때 결과는 아주 인상적입니다. 이번 수업에서 달성할 내용: - 최신 CSS 기술을 사용해 테라리움 전체 시각 디자인 완성 - 캐스케이드, 상속, CSS 선택자 등의 기본 개념 탐구 - 반응형 위치 및 레이아웃 전략 구현 - CSS 셰이프와 스타일링을 사용해 테라리움 컨테이너 구축 ### 사전 조건 이전 수업에서 HTML 구조를 완성했으며 이를 스타일링할 준비가 되어 있어야 합니다. ### CSS 파일 설정하기 스타일링을 시작하기 전에 CSS를 HTML에 연결해야 합니다. 이 연결은 브라우저에 테라리움 스타일링 지침이 어디에 있는지 알려줍니다. 테라리움 폴더에 style.css라는 새 파일을 만들고, HTML 문서의 <head> 섹션에 연결하세요: 이 코드가 하는 일: - HTML과 CSS 파일 간 연결을 만듭니다 - 브라우저가 style.css의 스타일을 불러와 적용하도록 지시합니다 - rel="stylesheet" 속성으로 CSS 파일임을 지정합니다 - href="./style.css" 경로를 참조합니다 ## CSS 캐스케이드 이해하기 CSS가 "캐스케이딩(Cascading)" 스타일 시트라 불리는 이유를 궁금해한 적 있나요? 스타일은 폭포처럼 순차적으로 적용되며 때로는 서로 충돌합니다. 군대 명령 구조를 생각해 보세요 - 장군의 명령은 "모든 군인은 녹색 옷을 입어라"일지라도, 당신 부대에만 "의식에서는 정장 파란색을 입어라"라는 구체적 명령이 내려질 수 있습니다. 더 구체적인 지시가 우선합니다. CSS도 유사한 논리를 따르며 이 계층 구조를 이해하면 디버깅이 훨씬 쉬워집니다. ### 캐스케이드 우선순위 실험하기 캐스케이드 작동 방식을 확인하기 위해 스타일 충돌을 만들어 봅시다. 먼저 <h1> 태그에 인라인 스타일을 추가하세요: 이 코드가 하는 일: - <h1> 요소에 직접 빨간색을 인라인 스타일로 적용합니다 - style 속성을 사용해 CSS를 HTML에 직접 삽입합니다 - 해당 요소에 가장 높은 우선순위 스타일 규칙을 만듭니다 다음으로 이 규칙을 style.css 파일에 추가하세요: 위에 있는 내용은: - 모든 <h1> 요소를 대상으로 하는 CSS 규칙 정의 - 외부 스타일시트를 사용해 텍스트 색상을 파란색으로 설정 - 인라인 스타일보다 낮은 우선순위 규칙 생성 ✅ 지식 점검: 웹 앱에서 어떤 색깔이 표시되나요? 그 색깔이 우선인 이유는 무엇인가요? 스타일을 덮어써야 할 상황을 생각해 본 적 있나요? ## CSS 상속 실습 CSS 상속은 유전학과 비슷합니다 - 요소는 부모 요소로부터 특정 속성을 상속받습니다. 예를 들어 body 요소에 폰트 패밀리를 설정하면 내부 모든 텍스트가 자동으로 같은 폰트를 사용합니다. 이는 하프부르크 가문에서 독특한 턱선이 세대를 거쳐 나타나는 것과 비슷합니다. 하지만 모든 속성이 상속되는 건 아닙니다. 폰트나 색상 같은 텍스트 스타일은 상속되지만, 마진이나 테두리 같은 레이아웃 속성은 상속되지 않습니다. 자식이 신체적 특징은 물려받지만 부모의 패션 감각은 물려받지 않는 것과 같죠. ### 폰트 상속 관찰하기 <body> 요소에 폰트 패밀리를 설정해서 상속을 확인해 봅시다: 여기서 일어나는 일: - <body> 요소를 대상으로 페이지 전체 폰트 패밀리 설정 - 브라우저 호환성을 위한 폴백(font stack) 옵션 사용 - 다양한 운영체제에서 잘 보이는 최신 시스템 폰트 적용 - 자식 요소가 특별히 덮어쓰지 않는 이상 이 폰트를 상속받음 보장 브라우저 개발자 도구(F12)를 열고 요소 탭에서 <h1> 요소를 검사해 보세요. body로부터 폰트 패밀리를 상속받는 것을 확인할 수 있습니다: ✅ 실험 시간: <body>에 color, line-height, 또는 text-align 같은 다른 상속 속성을 설정해 보세요. 제목과 다른 요소들은 어떻게 변하나요? ### 🔄 교육적 점검 CSS 기초 이해 여부 확인: 선택자로 넘어가기 전에 다음을 할 수 있어야 합니다. - ✅ 캐스케이드와 상속의 차이 설명 - ✅ 우선순위 충돌 시 어떤 스타일이 우선하는지 예측 - ✅ 상속되는 속성 식별 - ✅ CSS 파일을 HTML에 제대로 연결하는 법 빠른 테스트: 다음 스타일이 있을 때 <div class="special"> 내부의 <h1>은 어떤 색이 될까요? 답: 빨간색 (요소 선택자가 직접 h1을 지정함) ## CSS 선택자 마스터하기 CSS 선택자는 특정 요소를 스타일링하는 방법입니다. "집"이라고 말하는 대신 "메이플 거리의 빨간 문이 있는 파란 집"처럼 정확한 지시를 하는 것과 같습니다. CSS에는 구체성을 다르게 하는 여러 방법이 있으며, 적절한 선택자를 고르는 것은 목적에 맞는 도구를 선택하는 것과 같습니다. 때로는 동네 모든 문을 스타일링해야 하고, 때로는 특정 한 문만 스타일링해야 할 때도 있죠. ### 요소 선택자 (태그) 요소 선택자는 태그 이름으로 HTML 요소를 타겟팅합니다. 페이지 전반에 걸쳐 기본 스타일을 설정할 때 적합합니다: 이 스타일 설명: - body 선택자로 페이지 전체에 일관된 타이포그래피 지정 - 기본 브라우저 여백과 패딩 제거로 제어력 향상 - 모든 헤더 요소에 색상, 정렬, 간격 스타일 적용 - 확장 가능하고 접근성 좋은 폰트 크기 단위인 rem 사용 요소 선택자는 일반 스타일링에 좋지만, 테라리움 식물 같은 개별 컴포넌트 스타일링에는 더 구체적인 선택자가 필요합니다. ### 고유 요소용 ID 선택자 ID 선택자는 # 심볼을 쓰며 특정 id 속성을 가진 요소를 타겟합니다. ID는 페이지 내 유일해야 하므로, 왼쪽 및 오른쪽 식물 컨테이너처럼 특별한 요소를 스타일링할 때 적합합니다. 식물이 들어갈 테라리움 측면 컨테이너 스타일을 만들어 봅시다: 이 코드는 다음을 수행합니다: - absolute 위치 지정으로 컨테이너를 화면 좌우 끝에 배치 - 화면 크기 대응을 위한 vh(뷰포트 높이) 단위로 높이 설정 - 패딩을 전체 너비에 포함시키도록 box-sizing: border-box 적용 - 0 값에서 불필요한 px 제거로 코드 정리 - 강렬한 회색 대신 부드러운 배경색 설정으로 눈 보호 ✅ 코드 품질 도전과제: 이 CSS가 DRY(중복 금지) 원칙을 위반합니다. ID와 클래스를 함께 사용해 리팩토링 할 수 있을까요? 개선 방안 예시: ### 재사용 스타일용 클래스 선택자 클래스 선택자는 . 기호를 쓰며 여러 요소에 같은 스타일을 적용할 때 적절합니다. ID와 달리 HTML 전반에서 재사용할 수 있어 일관된 스타일 패턴에 이상적입니다. 테라리움 내 식물마다 비슷한 스타일이 필요하지만 위치는 개별적이어야 하므로, 공통 스타일에는 클래스를, 개별 위치에는 ID를 혼합해 사용합니다. 각 식물의 HTML 구조는 다음과 같습니다: 주요 요소 설명: - 모든 식물에 일관된 컨테이너 스타일 적용용 class="plant-holder" - 공통 이미지 스타일 및 동작용 class="plant" - 개별 위치 지정 및 JavaScript 연동을 위한 고유 id="plant1" 등 - 스크린 리더 접근성을 위해 설명이 포함된 alt 텍스트 다음 스타일을 style.css에 추가하세요: 이 스타일 설명: - 식물 홀더의 상대 위치 지정으로 위치 설정 기준 생성 - 모든 식물 홀더를 높이 13%로 설정해 스크롤 없이 모두 맞춤 - 식물 홀더를 살짝 왼쪽으로 이동해 식물을 중앙에 가깝게 배치 - max-width, max-height로 식물이 반응형 크기 조절 가능 - z-index로 테라리움 내 다른 요소보다 식물이 위에 나타나도록 지정 - CSS 전환 효과로 부드러운 호버 효과 추가하여 사용자 경험 향상 ✅ 비판적 사고: 왜 .plant-holder와 .plant 둘 다 필요할까요? 하나만 사용하면 어떤 문제가 생길까요? ## CSS 위치 지정 이해 CSS 위치 지정은 연극의 무대 감독과 같습니다 - 배우들이 어디에 서고 어떻게 움직일지 지휘합니다. 어떤 배우는 표준 위치에 맞게 움직이고, 어떤 배우는 특별한 위치가 필요하죠. 위치 지정 개념을 알면 레이아웃 문제의 많은 부분이 해결됩니다. 스크롤 중에도 고정되는 네비게이션 바가 필요하다거나, 특정 위치에 툴팁을 띄워야 할 때 위치 지정을 활용합니다. ### 다섯 가지 위치 값 ### 테라리움에서의 위치 지정 테라리움은 원하는 레이아웃을 만들기 위해 다양한 위치 지정 방식을 조합합니다: 위치 지정 전략 이해: - absolute 컨테이너들은 문서 흐름에서 제거되고 화면 가장자리에 고정됨 - 상대 위치 지정 식물 홀더는 위치 기준 컨텍스트를 생성하면서 문서 흐름 유지 - absolute 식물들은 상대 컨테이너 내에서 정밀 위치 지정 가능 - 이 조합으로 식물이 수직으로 쌓이면서도 개별 위치 지정 가능 ✅ 실험해 보기: 위치 값을 바꿔 보고 결과를 관찰하세요: - .container를 absolute에서 relative로 바꾸면 어떻게 될까요? - .plant-holder가 relative 대신 absolute를 사용하면 레이아웃이 어떻게 변하나요? - .plant를 relative 위치로 변경하면 어떤 일이 발생하나요? ### 🔄 교육 점검 CSS 포지셔닝 숙달: 이해도를 확인하세요: - ✅ 식물을 드래그 앤 드롭하려면 왜 절대 위치 지정이 필요한지 설명할 수 있나요? - ✅ 상대 위치 컨테이너가 어떻게 위치 지정 컨텍스트를 만드는지 이해하나요? - ✅ 왜 측면 컨테이너가 절대 위치를 사용하는가? - ✅ 위치 지정 선언을 완전히 제거하면 어떤 일이 일어나나요? 실세계 연결: CSS 위치가 실제 레이아웃을 어떻게 반영하는지 생각해 보세요: - Static: 선반 위의 책들 (자연스러운 순서) - Relative: 책을 약간 옮기되 자리 유지하기 - Absolute: 책갈피를 정확한 페이지에 꽂기 - Fixed: 페이지를 넘겨도 보이는 포스트잇 ## CSS로 테라리움 만들기 이제 이미지를 전혀 사용하지 않고 CSS만으로 유리병을 만들어 봅니다. 포지셔닝과 투명도를 이용해 사실적인 유리, 그림자, 깊이 효과를 만드는 것은 CSS의 시각적 능력을 보여줍니다. 이 기법은 바우하우스 건축가들이 단순한 기하학적 형태로 복잡하고 아름다운 구조물을 만들었던 방법과 닮았습니다. 이 원리를 이해하면 많은 웹 디자인에서 CSS 기법이 어떻게 사용되는지 알 수 있습니다. ### 유리병 구성 요소 만들기 테라리움 병을 부분별로 만들어 봅시다. 각 부분은 절대 위치 지정과 백분율 기반 크기를 사용해 반응형 디자인을 구현합니다: 테라리움 제작 이해하기: - 반응형 스케일링을 위해 백분율 기반 치수 사용 - 정확하게 쌓고 정렬하기 위해 요소 절대 위치 지정 - 유리 투명 효과를 위한 다양한 불투명도 적용 - z-index 레이어링으로 식물이 병 안에 들어있는 것처럼 표현 - 더 사실적인 모습을 위한 미묘한 박스 그림자와 부드러운 테두리 반경 추가 ### 백분율을 이용한 반응형 디자인 모든 치수가 고정 픽셀 값이 아닌 백분율을 사용하는 것을 주목하세요: 이것이 중요한 이유: - 어떤 화면 크기든 비례적으로 테라리움 크기 조절 보장 - 병 구성 요소 간 시각적 관계 유지 - 모바일부터 대형 데스크탑 모니터까지 일관된 경험 제공 - 시각적 레이아웃 손상 없이 디자인 적응 가능 ### CSS 단위 활용 테두리 반경에 rem 단위를 사용하고 있어 루트 글꼴 크기에 상대적으로 스케일됩니다. 이는 사용자 글꼴 설정을 존중하는 더 접근성 높은 디자인을 만듭니다. CSS 상대 단위를 공식 명세에서 더 알아보세요. ✅ 시각적 실험: 값을 변경하여 효과를 관찰해 보세요: - 병 불투명도를 0.5에서 0.8로 변경하면 유리 모습이 어떻게 변하나요? - 흙 색상을 #3a241d에서 #8B4513로 바꾸면 시각적 효과는? - 흙의 z-index를 2로 조절하면 레이어링에 무슨 변화가 있나요? ### 🔄 교육 점검 CSS 시각 디자인 이해: CSS 시각 감각을 확인하세요: - ✅ 백분율 치수가 어떻게 반응형 디자인을 생성하는가? - ✅ 불투명도가 유리 투명 효과를 만드는 이유는? - ✅ z-index는 요소 레이어링에 어떤 역할을 하나? - ✅ 테두리 반경 값이 병 모양에 어떻게 기여하는가? 디자인 원칙: 단순한 형태에서 어떻게 복잡한 시각을 만드는지 주목하세요: 1. 직사각형 → 둥근 직사각형 → 병 구성 요소 2. 평면 색상 → 불투명도 → 유리 효과 3. 개별 요소들 → 레이어 구성 → 3D 모습 --- ## GitHub Copilot 에이전트 챌린지 🚀 에이전트 모드를 사용하여 다음 도전을 완성하세요: 설명: 테라리움 내 식물이 자연스러운 바람에 살랑이는 듯이 부드럽게 흔들리도록 CSS 애니메이션을 만드세요. 이는 CSS 애니메이션, 변형, 키프레임을 연습하고 시각적 매력을 높이는 데 도움을 줍니다. 프롬프트: .plant 클래스에 좌우로 약간씩 (2-3도) 흔들리는 애니메이션을 추가하세요. 3-4초 지속되고 무한 반복되며 자연스러운 움직임을 위해 완화 함수(easing)를 적용하세요. 에이전트 모드에 대해 더 알아보세요. ## 🚀 챌린지: 유리 반사 추가하기 사실적인 유리 반사를 테라리움에 추가할 준비가 되었나요? 이 기법은 깊이감과 사실감을 더합니다. 빛이 유리 표면에 반사되는 미묘한 하이라이트를 만듭니다. 이는 르네상스 화가 얀 반 에이크가 빛과 반사를 사용해 유리를 3차원처럼 보이게 한 방법과 비슷합니다. 목표는 다음과 같습니다: 당신의 도전: - 유리 반사를 위한 미묘한 흰색 또는 밝은 색의 타원형 모양 만들기 - 병 왼쪽에 전략적으로 위치시키기 - 사실적인 빛 반사를 위해 적절한 불투명도와 블러 효과 적용 - border-radius로 유기적인 거품 같은 모양 생성 - 향상된 사실감을 위한 그라데이션이나 박스 그림자 실험 ## 강의 후 퀴즈 강의 후 퀴즈 ## CSS 지식 확장하기 처음엔 CSS가 복잡하게 느껴질 수 있지만, 핵심 개념을 이해하면 고급 기술 학습에 탄탄한 기반이 됩니다. 다음에 배울 CSS 영역: - Flexbox - 요소 정렬과 배치 단순화 - CSS Grid - 복잡한 레이아웃 강력하게 구성 - CSS 변수 - 반복 감소 및 유지보수 용이 - 반응형 디자인 - 다양한 화면 크기 지원 ### 인터랙티브 학습 자료 재미있는 실습 게임으로 개념을 연습하세요: - 🐸 Flexbox Froggy - 재미있는 도전으로 Flexbox 마스터하기 - 🌱 Grid Garden - 가상 당근 기르며 CSS Grid 배우기 - 🎯 CSS Battle - 코딩 도전으로 CSS 실력 테스트 ### 추가 학습 포괄적인 CSS 기초를 위해 이 Microsoft Learn 모듈을 완료하세요: CSS로 HTML 앱 스타일링하기 ### ⚡ 다음 5분 동안 할 수 있는 일 - [ ] 개발자 도구를 열고 Elements 패널로 웹사이트 CSS 스타일 확인하기 - [ ] 간단한 CSS 파일 만들어 HTML 페이지에 연결하기 - [ ] 색상 변경 실습: 헥스, RGB, 이름 있는 색상 방식 모두 시도해보기 - [ ] 박스 모델 연습: div에 패딩과 마진 추가하기 ### 🎯 이 한 시간 안에 달성할 수 있는 것 - [ ] 강의 후 퀴즈 완료하고 CSS 기본기 복습하기 - [ ] HTML 페이지에 글꼴, 색상, 간격 스타일링 적용하기 - [ ] Flexbox 또는 Grid를 사용해 간단한 레이아웃 만들기 - [ ] CSS 전환 효과로 부드러운 애니메이션 실험하기 - [ ] 미디어 쿼리로 반응형 디자인 연습하기 ### 📅 이번 주 CSS 여정 - [ ] 창의성을 발휘해 테라리움 스타일링 과제 완료하기 - [ ] 사진 갤러리 레이아웃을 CSS Grid로 제작하며 마스터하기 - [ ] CSS 애니메이션 배워 디자인에 생명 불어넣기 - [ ] Sass 또는 Less 같은 CSS 전처리기 탐험하기 - [ ] 디자인 원칙 연구하고 CSS에 적용하기 - [ ] 온라인에서 흥미로운 디자인 분석 및 재현하기 ### 🌟 한 달간 디자인 마스터하기 - [ ] 완전한 반응형 웹사이트 디자인 시스템 구축하기 - [ ] Tailwind처럼 CSS-in-JS 또는 유틸리티 퍼스트 프레임워크 배우기 - [ ] 오픈 소스 프로젝트에 CSS 개선 기여하기 - [ ] CSS 커스텀 속성 및 컨테인먼트 같은 고급 개념 마스터하기 - [ ] 모듈화된 CSS로 재사용 가능한 컴포넌트 라이브러리 만들기 - [ ] CSS 배우는 사람들 멘토링하고 디자인 지식 공유하기 ## 🎯 당신의 CSS 마스터 타임라인 ### 🛠️ CSS 도구 요약 이 수업을 완료하면 다음을 갖게 됩니다: - 캐스케이드 이해: 스타일이 어떻게 상속되고 덮어쓰이는지 - 선택자 숙달: 요소, 클래스, ID로 정밀 타기팅 - 포지셔닝 스킬: 전략적 요소 배치 및 레이어링 - 시각적 디자인: 유리 효과, 그림자, 투명도 구현 - 반응형 기법: 어떤 화면에도 적응하는 백분율 기반 레이아웃 - 코드 구성: 깔끔하고 유지 보수 쉬운 CSS 구조 - 현대적 관행: 상대 단위와 접근성 높은 디자인 패턴 사용 다음 단계: 테라리움에 구조(HTML)와 스타일(CSS)을 갖췄습니다. 최종 강의에선 자바스크립트로 인터랙티브 기능을 추가합니다! ## 과제 CSS 리팩터링 --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> 면책 조항: 이 문서는 AI 번역 서비스 Co-op Translator를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역은 오류나 부정확한 부분이 있을 수 있으니 참고하시기 바랍니다. 원본 문서는 해당 언어의 공식 자료로 간주되어야 합니다. 중요한 정보의 경우 전문적인 인간 번역을 권장합니다. 본 번역의 사용으로 인한 오해나 잘못된 해석에 대해서는 당사가 책임지지 않습니다. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Projektas 1 dalis: Įvadas į HTML
HTML arba HyperText Markup Language yra kiekvieno jūsų lankyto interneto svetainės pagrindas. Galvokite apie HTML kaip apie skeletą, kuris suteikia struktūrą tinklalapiams – jis apibrėžia, kur dedamas turinys, kaip jis organizuotas ir ką kiekvienas elementas reiškia. Nors CSS vėliau „papuoš“ jūsų HTML spalvomis ir išdėstymu, o JavaScript suteiks jam gyvybės su interaktyvumu, HTML suteikia būtiną struktūrą, dėl kurios visa kita tampa įmanoma. Šios pamokos metu sukursite virtualaus terariumo sąsajos HTML struktūrą. Šis praktinis projektas išmokys pagrindines HTML sąvokas, tuo pačiu kuriant vizualiai patrauklų rezultatą. Išmoksite, kaip organizuoti turinį naudojant semantinius elementus, dirbti su paveikslėliais ir sukurti pagrindą interaktyviai interneto programai. Pamokos pabaigoje turėsite veikiančią HTML puslapį, kuriame bus rodomi augalų paveikslėliai organizuotose stulpeliuose, paruoštus stilizavimui kitoje pamokoje. Nesijaudinkite, jei jis iš pradžių atrodo paprastas – būtent taip ir turi būti HTML prieš pridedant vizualinį apipavidalinimą su CSS. ## Priešpaskaitinis testas Priešpaskaitinis testas ## Projekto parengimas Prieš pradėdami rašyti HTML kodą, susikurkite tinkamą darbo vietą savo terariumo projektui. Iš karto sukuriant tvarkingą failų struktūrą yra svarbi įprotis, kuris jums labai pasitarnaus visos interneto svetainių kūrimo kelionės metu. ### Užduotis: Sukurkite savo projekto struktūrą Sukursite atskirą aplanką savo terariumo projektui ir pridėsite pirmąjį HTML failą. Štai du būdai, kuriuos galite naudoti: Variantas 1: Naudojant Visual Studio Code 1. Atidarykite Visual Studio Code 2. Spauskite „File“ → „Open Folder“ arba naudokite Ctrl+K, Ctrl+O (Windows/Linux) arba Cmd+K, Cmd+O (Mac) 3. Sukurkite naują aplanką terrarium ir jį pasirinkite 4. „Explorer“ lange spauskite „New File“ ikoną 5. Pavadinkite savo failą index.html Variantas 2: Naudojant terminalo komandas Štai ką šios komandos atlieka: - Sukuria naują katalogą terrarium jūsų projektui - Pereina į terrarium katalogą - Sukuria tuščią index.html failą - Atidaro failą Visual Studio Code redagavimui ## HTML dokumento struktūros supratimas Kiekvienas HTML dokumentas turi specifinę struktūrą, kurią naršyklės turi suprasti ir teisingai atvaizduoti. Galvokite apie šią struktūrą kaip apie oficialų laišką – ji turi privalomus elementus tam tikra tvarka, kurie padeda gavėjui (šiuo atveju naršyklei) tinkamai apdoroti turinį. Pradėkime pridėdami esminį pamatą, kurio kiekvienas HTML dokumentas reikalauja. ### DOCTYPE deklaracija ir šakninis elementas Pirmos dvi bet kokio HTML failo eilutės veikia kaip dokumento „įžanga“ naršyklei: Suprasdami ką daro šis kodas: - Deklaruoja dokumento tipą kaip HTML5 naudojant <!DOCTYPE html> - Sukuria šakninį <html> elementą, kuriame bus visa puslapio turinys - Nustato šiuolaikinius interneto standartus teisingam naršyklių atvaizdavimui - Užtikrina vienodą rodymą skirtingose naršyklėse ir įrenginiuose ### 🔄 Pedagoginė peržiūra Sustokite ir apmąstykite: Prieš tęsdami, įsitikinkite, kad suprantate: - ✅ Kodėl kiekvienas HTML dokumentas turi DOCTYPE deklaraciją - ✅ Ką talpina šakninis <html> elementas - ✅ Kaip ši struktūra padeda naršyklėms teisingai atvaizduoti puslapius Greitas savitikrinimas: Ar galite savo žodžiais paaiškinti, ką reiškia „standartų atitinkantis atvaizdavimas“? ## Esminių dokumento metaduomenų pridėjimas <head> sekcija HTML dokumente talpina svarbią informaciją, kurios reikia naršyklėms ir paieškos sistemoms, bet kurios lankytojai tiesiogiai nemato puslapyje. Galvokite apie tai kaip apie „užkulisių“ informaciją, kuri padeda jūsų tinklalapiui tinkamai veikti ir taisyklingai atrodyti įvairiuose įrenginiuose bei platformose. Šie metaduomenys nurodo naršyklėms, kaip rodyti jūsų puslapį, kokį simbolių kodavimą naudoti ir kaip valdyti skirtingų ekrano dydžių palaikymą – visa tai būtina norint kurti profesionalias, prieinamas interneto svetaines. ### Užduotis: Pridėkite dokumento antraštę Įterpkite šią <head> sekciją tarp atidarančių ir uždarančių <html> žymių: Išskaidant ką daro kiekvienas elementas: - Nustato puslapio pavadinimą, kuris rodomas naršyklės skirtukuose ir paieškos rezultatuose - Nurodo UTF-8 simbolių kodavimą, kad tekstas būtų tinkamai rodomas visame pasaulyje - Užtikrina suderinamumą su naujesnėmis Internet Explorer versijomis - Konfigūruoja reaguojantį dizainą nustatydama viewport dydį pagal įrenginio plotį - Valdo pradinį padidinimą, kad turinys būtų rodomas natūraliu dydžiu ## Dokumento turinio kūrimas <body> elementas talpina visą matomą jūsų tinklalapio turinį – viską, ką vartotojai matys ir su kuo bendraus. Kol <head> sekcija pateikia naršyklei instrukcijas, <body> sekcija turi faktinį turinį: tekstą, paveikslėlius, mygtukus ir kitus elementus, kurie sudaro vartotojo sąsają. Pridėkime kūno struktūrą ir supraskime, kaip HTML žymės veikia kartu, kad sukurtų prasmingą turinį. ### HTML žymių struktūros supratimas HTML naudoja porines žymes elementams apibrėžti. Dauguma žymių turi atidarančią <p> ir uždarančią </p> žymes, su turiniu tarp jų: <p>Labas, pasauli!</p>. Tai sukuria paragrafą su tekstu „Labas, pasauli!“. ### Užduotis: Pridėkite kūno elementą Atnaujinkite savo HTML failą, kad jis turėtų <body> elementą: Štai ką suteikia ši pilna struktūra: - Nustato pagrindinę HTML5 dokumento schemą - Įtraukia svarbius metaduomenis teisingam naršyklės atvaizdavimui - Sukuria tuščią kūną, pasiruošusį jūsų matomam turiniui - Laikosi modernių interneto kūrimo geriausių praktikų Dabar esate pasiruošę pridėti savo terariumo matomus elementus. Naudosime <div> elementus kaip konteinerius skirtingoms turinio dalims organizuoti ir <img> elementus augalų paveikslėliams rodyti. ### Darbas su paveikslėliais ir išdėstymo konteineriais Paveikslėliai HTML yra specialūs, nes naudoja „savą uždarymą“ - žymę. Skirtingai nei elementai kaip <p></p>, kurie apima turinį, <img> žymė turi visą informaciją savyje naudodama atributus, tokius kaip src – paveikslėlio failo keliui ir alt – prieinamumui. Prieš pridėdami paveikslėlius į HTML, turėsite tinkamai susiorganizuoti savo projekto failus sukurdami paveikslėlių aplanką ir pridėdami augalų grafikas. Pirmiausia, paruoškite savo paveikslėlius: 1. Sukurkite aplanką images savo terariumo projekto aplanko viduje 2. Atsisiųskite augalų paveikslėlius iš sprendimo aplanko (iš viso 14 augalų paveikslėlių) 3. Nukopijuokite visus augalų paveikslėlius į naują images aplanką ### Užduotis: Sukurkite augalų rodymo išdėstymą Dabar pridėkite augalų paveikslėlius, organizuotus dviejuose stulpeliuose tarp <body></body> žymių: Žingsnis po žingsnio, štai kas vyksta šiame kode: - Sukuria pagrindinį puslapio konteinerį su id="page", kuris laiko visą turinį - Nustato du stulpelių konteinerius: left-container ir right-container - Organizuoja 7 augalus kairiajame stulpelyje ir 7 augalus dešiniajame stulpelyje - Įdeda kiekvieną augalo paveikslėlį į plant-holder div atskiram pozicionavimui - Priskiria nuoseklias klasės pavadinimus CSS stilizavimui kitoje pamokoje - Pateikia unikalius ID kiekvienam paveikslėliui interaktyvumui su JavaScript vėliau - Nurodo teisingus failų kelius į paveikslėlių aplanką ### 🔄 Pedagoginė peržiūra Struktūros supratimas: Skirkite akimirką peržiūrėti savo HTML struktūrą: - ✅ Ar galite identifikuoti pagrindinius jūsų išdėstymo konteinerius? - ✅ Ar suprantate, kodėl kiekvienas paveikslėlis turi unikalų ID? - ✅ Kaip apibūdintumėte plant-holder divų paskirtį? Vizualinė apžvalga: Atidarykite HTML failą naršyklėje. Turėtumėte matyti: - Paprastą augalų paveikslėlių sąrašą - Paveikslėlius suskirstytus dviem stulpeliais - Paprastą, nestilizuotą išdėstymą Prisiminkite: Ši paprasta išvaizda yra būtent tai, kaip turi atrodyti HTML prieš CSS stilizavimą! Su šiuo žymėjimu augalai pasirodys ekrane, nors dar neatrodys tvarkingai – tam reikalingas CSS kitame pamokoje! Dabar turite tvirtą HTML pagrindą, kuris tinkamai organizuoja jūsų turinį ir laikosi geriausių prieinamumo praktikų. ## Semantinio HTML naudojimas prieinamumui Semantinis HTML reiškia HTML elementų pasirinkimą pagal jų prasmę ir paskirtį, ne tik pagal išvaizdą. Naudodami semantinį žymėjimą perduodate struktūrą ir turinio prasmę naršyklėms, paieškos sistemoms ir pagalbinėms technologijoms, pvz., ekrano skaitytuvams. Šis požiūris padaro jūsų svetaines prieinamesnes žmonėms su negalia ir padeda paieškos sistemoms geriau suprasti jūsų turinį. Tai esminė šiuolaikinio interneto plėtros principo dalis, kuri kuria geresnę patirtį visiems. ### Semantinio puslapio pavadinimo pridėjimas Pridėkime tinkamą antraštę jūsų terariumo puslapiui. Įdėkite šią eilutę iškart po atidarančios <body> žymės: Kodėl semantinis žymėjimas svarbus: - Padeda ekrano skaitytuvams naviguoti ir suprasti puslapio struktūrą - Pagerina paieškos sistemų optimizavimą (SEO), aiškindamas turinio hierarchiją - Didina prieinamumą vartotojams su regos sutrikimais ar pažinimo skirtumais - Kuria geresnę vartotojo patirtį visuose įrenginiuose ir platformose - Laikosi interneto standartų ir geriausių praktikos principų profesionaliai kūrėjų bendruomenei Semantinių ir neseemantinių pasirinkimų pavyzdžiai: ## Terariumo konteinerio kūrimas Dabar pridėkime HTML struktūrą pačiam terariumui – stiklinėms talpykloms, kur bus dedami augalai. Ši sekcija demonstruoja svarbią sąvoką: HTML suteikia struktūrą, bet be CSS stilizavimo šie elementai dar nebus matomi. Terariumo žymėjime naudojami aprašomieji klasės pavadinimai, kurie CSS stilizavimą padarys intuityvų ir lengvai prižiūrimą kitoje pamokoje. ### Užduotis: Pridėkite terariumo struktūrą Įterpkite šį žymėjimą virš paskutinės </div> žymės (prieš puslapio konteinerio uždarymą): Suprasdami šią terariumo struktūrą: - Sukuria pagrindinį terariumo konteinerį su unikaliu ID stilizavimui - Apibrėžia atskirus elementus kiekvienam vaizdiniam komponentui (viršus, sienos, žemė, apačia) - Įtraukia įdėtus elementus stiklo atspindžių efektams (blizgūs elementai) - Naudoja aprašomuosius klasės pavadinimus, aiškiai nurodančius kiekvieno elemento paskirtį - Paruošia struktūrą CSS stiliavimui, kuris sukurs stiklinio terariumo išvaizdą ### 🔄 Pedagoginė kontrolė HTML struktūros valdymas: Prieš tęsdami, įsitikinkite, kad galite: - ✅ Paaiškinti skirtumą tarp HTML struktūros ir vaizdinės išvaizdos - ✅ Nustatyti semantinius ir ne-semantinius HTML elementus - ✅ Apibūdinti, kaip tinkamas žymėjimas pagerina prieinamumą - ✅ Atpažinti pilną dokumento medžio struktūrą Testuokite savo supratimą: Atidarykite savo HTML failą naršyklėje su išjungtu JavaScript ir pašalintu CSS. Tai parodys jums sukurtą gryną semantinę struktūrą! --- ## GitHub Copilot agento iššūkis Naudokite Agent režimą, kad įvykdytumėte šį iššūkį: Aprašymas: Sukurkite semantinę HTML struktūrą augalų priežiūros gairių sekcijai, kurią būtų galima pridėti prie terariumo projekto. Užduotis: Sukurkite semantinę HTML sekciją su pagrindiniu antrašte „Plantas priežiūros gidas“, trimis poskyriais su antraštėmis „Laistymas“, „Šviesos reikalavimai“ ir „Dirvožemio priežiūra“, kiekviename pateiktame po pastraipą augalo priežiūros informacijos. Naudokite tinkamus semantinius HTML žymėjimus, tokius kaip <section>, <h2>, <h3> ir <p>, kad turinys būtų teisingai struktūruotas. Sužinokite daugiau apie agentų režimą. ## Ištirkite HTML istorijos iššūkį Sužinokite apie interneto evoliuciją HTML labai pasikeitė nuo tada, kai Timas Berners-Lee 1990 m. CERN sukūrė pirmąjį žiniatinklio naršyklę. Kai kurie senesni žymėjimai, pvz., <marquee>, dabar yra pasenę, nes jie blogai suderinami su šiuolaikiniais prieinamumo standartais ir reaguojančio dizaino principais. Išbandykite šį eksperimentą: 1. Laikinai apvyniokite savo <h1> antraštę <marquee> žyma: <marquee><h1>My Terrarium</h1></marquee> 2. Atidarykite puslapį naršyklėje ir stebėkite slinkties efektą 3. Pagalvokite, kodėl ši žyma buvo pasenusi (užuomina: pagalvokite apie naudotojo patirtį ir prieinamumą) 4. Pašalinkite <marquee> žymą ir grįžkite prie semantinio žymėjimo Refleksijos klausimai: - Kaip slenkantis pavadinimas galėtų paveikti regėjimo negalią turinčius ar judesio jautrumą turinčius naudotojus? - Kokios šiuolaikinės CSS technikos galėtų pasiekti panašius vaizdinius efektus, bet būtų labiau prieinamos? - Kodėl svarbu naudoti dabartinius interneto standartus, o ne pasenusius elementus? Išsamiau sužinokite apie pasenusius ir pasenusius HTML elementus, kad suprastumėte, kaip interneto standartai keičiasi siekiant geresnės naudotojo patirties. ## Po paskaitos testas Po paskaitos testas ## Peržiūra ir savarankiškas mokymasis Pagilinkite savo HTML žinias HTML jau daugiau nei 30 metų yra interneto pagrindas, nuo paprastos dokumentų žymėjimo kalbos išsivystęs į pažangią platformą interaktyvioms programoms kurti. Suprasdami šią evoliuciją, geriau įvertinsite šiuolaikinius interneto standartus ir priimsite geresnius sprendimus programuojant. Rekomenduojami mokymosi keliai: 1. HTML istorija ir evoliucija - Išnagrinėkite laiko juostą nuo HTML 1.0 iki HTML5 - Išsiaiškinkite, kodėl tam tikros žymos buvo pašalintos (prieinamumas, mobilių įrenginių pritaikymas, priežiūra) - Tirti naujas HTML funkcijas ir pasiūlymus 2. Semantinis HTML giliau - Studijuokite pilną HTML5 semantinių elementų sąrašą - Praktikuokite, kada naudoti <article>, <section>, <aside>, ir <main> - Sužinokite apie ARIA atributus geresniam prieinamumui 3. Šiuolaikinis interneto kūrimas - Išnagrinėkite pritaikomų svetainių kūrimą Microsoft Learn platformoje - Supraskite HTML integraciją su CSS ir JavaScript - Susipažinkite su interneto našumu ir SEO gerosiomis praktikomis Refleksijos klausimai: - Kurias pasenusias HTML žymas atradote ir kodėl jos buvo pašalintos? - Kokios naujos HTML funkcijos siūlomos ateities versijoms? - Kaip semantinis HTML prisideda prie svetainių prieinamumo ir SEO? ### ⚡ Ką galite padaryti per ateinančias 5 minutes - [ ] Atidarykite DevTools (F12) ir apžiūrėkite mėgstamos svetainės HTML struktūrą - [ ] Sukurkite paprastą HTML failą su pagrindinėmis žymomis: <h1>, <p>, ir <img> - [ ] Patikrinkite savo HTML W3C HTML Validator internete - [ ] Pabandykite pridėti komentarą į savo HTML su <!-- comment --> ### 🎯 Ką galite pasiekti šią valandą - [ ] Baikite po pamokos testą ir peržiūrėkite semantinio HTML sąvokas - [ ] Sukurkite paprastą tinklapį apie save, naudodami tinkamą HTML struktūrą - [ ] Eksperimentuokite su skirtingų lygmenų antraštėmis ir teksto formatavimo žymomis - [ ] Įtraukite paveikslėlius ir nuorodas, kad išmėgintumėte multimedijos integraciją - [ ] Ištirkite HTML5 funkcijas, kurių dar neišbandėte ### 📅 Jūsų savaitės HTML kelias - [ ] Baikite terariumo projekto užduotį su semantiniu žymėjimu - [ ] Sukurkite prieinamą tinklalapį, naudodami ARIA etiketes ir vaidmenis - [ ] Praktikuokite formų kūrimą su įvairiais įvedimo tipais - [ ] Išnagrinėkite HTML5 API, tokias kaip localStorage arba geolokacija - [ ] Studijuokite reaguojančio HTML raštus ir mobiliems įrenginiams orientuotą dizainą - [ ] Peržiūrėkite kitų kūrėjų HTML kodus, siekdami geriausių praktikų ### 🌟 Jūsų mėnesio interneto pagrindai - [ ] Sukurkite portfelio svetainę, demonstruojančią jūsų HTML valdymą - [ ] Išmokite HTML šablonų kūrimą su sistema, pavyzdžiui, Handlebars - [ ] Prisidėkite prie atviro kodo projektų, tobulindami HTML dokumentaciją - [ ] Išmokite pažangių HTML koncepcijų, pvz., pasirinktinius elementus - [ ] Integruokite HTML su CSS sistemomis ir JavaScript bibliotekomis - [ ] Mokykite kitus ir dalinkitės HTML pagrindais ## 🎯 Jūsų HTML įvaldymo laiko juosta ### 🛠️ Jūsų HTML įrankių santrauka Pabaigę šią pamoką, turite: - Dokumento struktūrą: pilną HTML5 pagrindą su tinkamu DOCTYPE - Semantinį žymėjimą: prasmingas žymas, kurios gerina prieinamumą ir SEO - Paveikslėlių integraciją: tinkamą failų organizavimą ir alt teksto taikymą - Išdėstymo konteinerius: strategiškai naudojamus div su aprašomaisiais klasės pavadinimais - Prieinamumo suvokimą: supratimą apie ekrano skaitytuvų navigaciją - Šiuolaikinius standartus: dabartines HTML5 praktikas ir pasenusių žymų žinias - Projekto pagrindą: tvirtą bazę CSS stiliavimui ir JavaScript interaktyvumui Tolimesni žingsniai: Jūsų HTML struktūra paruošta CSS stiliaus pritaikymui! Sukurta semantinė bazė palengvins supratimą kitoje pamokoje. ## Užduotis Praktikuokite savo HTML: Sukurkite tinklaraščio maketą --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Atsakomybės apribojimas: Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą Co-op Translator. Nors stengiamės užtikrinti tikslumą, prašome atkreipti dėmesį, kad automatizuoti vertimai gali turėti klaidų ar netikslumų. Pirminis dokumentas gimtąja kalba laikomas autoritetingu šaltiniu. Svarbiai informacijai rekomenduojamas profesionalus žmogaus vertimas. Mes neatsakome už bet kokius nesusipratimus ar klaidingas interpretacijas, kilusias dėl šio vertimo naudojimo. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium projektas 2 dalis: Įvadas į CSS
Prisimeni, kaip tavo HTML terrariumas atrodė gana paprastai? CSS yra ta vieta, kur mes tą paprastą struktūrą paverčiame vizualiai patrauklia. Jei HTML yra kaip namo karkaso statyba, tai CSS yra viskas, kas daro namus jaukiais - dažų spalvos, baldų išdėstymas, apšvietimas ir kaip kambariai „surišti“ į vieną visumą. Pagalvok apie Versalio rūmus, kurie prasidėjo kaip paprasta medžioklės trobelė, bet dėmesys dekoracijoms ir išplanavimui pavertė juos vienu iš nuostabiausių pasaulio pastatų. Šiandien mes pavirsime tavo terrariumą iš funkcinio į tobulai atrodantį. Sužinosi, kaip tiksliai pozicionuoti elementus, kaip išdėstymas reaguoja į skirtingo dydžio ekranus ir kaip sukurti vizualų patrauklumą, kuris daro svetaines patrauklias. Pamokos pabaigoje pamatysi, kaip strategiškai taikomas CSS stilius gali drastiškai pagerinti tavo projektą. Pridėkime šiek tiek stiliaus tavo terrariumui. ## Priešpaskaitos testas Priešpaskaitos testas ## Pradžia su CSS Dažnai CSS laikomas tiesiog „kaip padaryti gražu“, bet jo paskirtis yra daug platesnė. CSS yra kaip filmo režisierius - tu kontroliuoji ne tik kaip viskas atrodo, bet kaip tai juda, reaguoja į vartotojo veiksmus ir prisitaiko prie skirtingų situacijų. Šiuolaikinis CSS yra ypač galingas. Gali rašyti kodą, kuris automatiškai prisitaiko prie telefonų, planšečių ir darbalaukių išdėstymų. Gali sukurti sklandžias animacijas, kurios nukreipia vartotojų dėmesį ten, kur reikia. Rezultatai gali būti labai įspūdingi, kai viskas veikia kartu. Štai ką mes pasieksime šioje pamokoje: - Sukursime pilną vizualinį dizainą tavo terrariumui, naudojant modernias CSS technikas - Išnagrinėsime pagrindines koncepcijas, tokias kaip kaskada, paveldėjimas ir CSS selektoriai - Įgyvendinsime reaguojančias pozicionavimo ir išdėstymo strategijas - Sukursime terrariumo konteinerį naudodami CSS formas ir stilių ### Prieš sąlyga Turėtum būti užbaigęs HTML struktūrą savo terrariumui iš ankstesnės pamokos ir turėti ją paruoštą stiliui. ### CSS failo paruošimas Prieš pradedant stilizavimą, turime susieti CSS su mūsų HTML. Šis ryšys parodo naršyklei, kur rasti stilių instrukcijas mūsų terrariumui. Savo terrarium aplanke sukurk naują failą, pavadintą style.css, tada susiek jį savo HTML dokumento <head> skiltyje: Štai ką atlieka šis kodas: - Sukuria ryšį tarp tavo HTML ir CSS failų - Nurodo naršyklei pakrauti ir pritaikyti stilius iš style.css - Naudoja atributą rel="stylesheet", nurodantį, kad tai CSS failas - Nurodo failo kelią atributu href="./style.css" ## CSS kaskados supratimas Ar kada nors klausėte, kodėl CSS vadinamas "Cascading" Style Sheets? Stiliai leidžiasi žemyn kaip krioklys ir kartais jie konfliktuoja tarpusavyje. Pavyzdžiui, kaip veikia kariniai įsakymų lygiai - bendrasis įsakymas gali būti „visos pajėgos dėvi žalią“, bet konkretaus tavo vieneto įsakymas gali skambėti „ceremonijai dėvėkite mėlyną uniformą“. Konkretus nurodymas turi pirmenybę. CSS laikosi panašios logikos, ir supratimas apie šią hierarchiją palengvina klaidų taisymą. ### Eksperimentas su kaskados prioritetu Pažiūrėkime kaskadą veikime sukuriant stilių konfliktą. Pirmiausia pridėk internetinį stilių savo <h1> žymelei: Šis kodas daro: - Pritaiko raudoną spalvą tiesiogiai <h1> elementui naudojant internetinį stilizavimą - Naudoja atributą style, kad įterptų CSS tiesiai į HTML - Sukuria aukščiausios prioritetinės taisyklės stilių šiam konkrečiam elementui Tada pridėk šią taisyklę į savo style.css failą: Aukščiau mes: - Nustatėme CSS taisyklę, taikomą visiems <h1> elementams - Nustatėme teksto spalvą mėlyną naudojant išorinį stiliaus lapą - Sukūrėme žemesnės prioritetinės taisyklės stilių lyginant su internetiniu stiliumi ✅ Žinių tikrinimas: Kokia spalva rodoma tavo internetinėje programoje? Kodėl būtent ši spalva laimi? Ar gali įsivaizduoti situacijas, kai norėtum perrašyti stilius? ## CSS paveldėjimas veikime CSS paveldėjimas veikia kaip genetika - elementai paveldi tam tikras savybes iš savo tėvinių elementų. Jei nustatysi šrifto šeimą ant body elemento, visas tekstas tame elemente automatiškai naudos tą patį šriftą. Tai panašu į Habzburgų šeimą, kurios būdingas smakro bruožas pasireiškė per kartas, nors jis nebuvo nurodytas kiekvienam asmeniui atskirai. Tačiau ne viskas paveldima. Teksto stiliai, tokie kaip šriftai ir spalvos, paveldimi, bet išdėstymo savybės kaip tarpai ir kraštinės ne. Kaip vaikai gali paveldėti fizines savybes, bet ne tėvų mados pasirinkimus. ### Šrifto paveldėjimo stebėjimas Pažiūrėkime paveldėjimą nustatant šrifto šeimą ant <body> elemento: Analizė: - Nustato šrifto šeimą visai svetainei taikant <body> selektorių - Naudoja kelių šriftų seką su atsarginiais variantais geresnei naršyklių suderinamumui - Taiko modernius sistemos šriftus, kurie atrodo gerai skirtingose operacinėse sistemose - Užtikrina, kad visi vaikiniai elementai paveldi šį šriftą, nebent jis būtų konkrečiai perrašytas Atidaryk naršyklės kūrėjų įrankius (F12), eik į "Elements" skiltį ir apžiūrėk savo <h1> elementą. Pamatysi, kad jis paveldi šrifto šeimą iš body: ✅ Eksperimentas: Išbandyk nustatyti kitas paveldimas savybes ant <body>, kaip color, line-height arba text-align. Kas nutinka tavo antraštei ir kitiems elementams? ### 🔄 Pedagoginis patikrinimas CSS pagrindų supratimas: Prieš pereinant prie selektorių, įsitikink, kad gali: - ✅ Paaiškinti skirtumą tarp kaskados ir paveldėjimo - ✅ Numatyti, kuris stilius laimės specifikos konflikte - ✅ Nustatyti, kurios savybės paveldimos iš tėvinių elementų - ✅ Teisingai susieti CSS failus su HTML Greitas testas: Jei turi šiuos stilius, kokia spalva bus <h1>, kuris yra viduje <div class="special">? Atsakymas: Raudona (elementų selektorius tiesiogiai taiko h1) ## CSS selektorių įvaldymas CSS selektoriai leidžia tiksliai taikyti stilių konkretiems elementams. Jie veikia kaip tikslūs nurodymai – vietoje „namas“ pasakai „mėlynas namas su raudonomis durimis Maple gatvėje“. CSS suteikia skirtingus būdus būti konkrečiam, o pasirinkti tinkamą selektorių – tai kaip pasirinkti tinkamą įrankį darbui. Kartais reikia stilizuoti kiekvienas kaimynystės duris, o kartais tik vienas specifines. ### Elementų selektoriai (žymės) Elemento selektoriai taiko stilių HTML elementams pagal jų žymės pavadinimą. Jie puikūs nustatyti bazinius stilius, kurie pritaikomi plačiai puslapyje: Šių stilių supratimas: - Nustato nuoseklią tipografiją visam puslapiui su body selektoriumi - Pašalina naršyklės numatytuosius tarpelius ir padding’ą geresnei kontrolei - Stilizuoja visas antraštes spalva, lygiavimu ir tarpais - Naudoja rem vienetus skalūriam šrifto dydžiui ir geresniam pasiekiamumui Nors elementų selektoriai puikiai tinka bendram stilizavimui, tau reikės specifinių selektorių atskiriems komponentams, tokiems kaip augalai tavo terrariume. ### ID selektoriai unikaliems elementams ID selektoriai naudoja simbolį # ir taiko elementams su unikaliais id atributais. Kadangi ID puslapyje turi būti unikalūs, jie puikiai tinka stilizuoti pavieniams, išskirtiniams elementams, kaip mūsų kairės ir dešinės augalų talpyklos. Sukurkime stilių terrariumo šoninėms talpykloms, kur bus augalai: Šis kodas atlieka: - Pozicionuoja konteinerius ties kairiu ir dešiniu kraštu naudodamas absolute pozicionavimą - Naudoja vh (žiūrovo aukščio) vienetus, kad aukštis reaguotų į ekrano dydį - Taiko box-sizing: border-box, kad padding būtų įskaičiuotas į bendrą plotį - Pašalina nereikalingus px vienetus nuo nulinių reikšmių, kad kodas būtų švaresnis - Nustato subtilią fono spalvą, kuri geriau akis ramina nei ryškiai pilka ✅ Kodo kokybės iššūkis: Pastebėk, kaip šis CSS pažeidžia DRY (Don't Repeat Yourself) principą. Ar gali jį pertvarkyti naudodamas tiek ID, tiek klasę? Patobulintas metodas: ### Klasės selektoriai pakartotinai naudojamiems stiliams Klasės selektoriai naudoja simbolį . ir puikiai tinka, kai nori tuos pačius stilius taikyti daugeliui elementų. Skirtingai nuo ID, klasės gali būti naudojamos keliose HTML vietose, todėl jos idealios vienodų stiliaus šablonų taikymui. Mūsų terrariume kiekvienam augalui reikia panašaus stilizavimo, bet kartu kiekvienas turi savo poziciją. Naudosime klasės ir ID kombinaciją: klasėms bendrai stilizuoti ir ID unikaliam pozicionavimui. Štai HTML struktūra kiekvienam augalui: Svarbiausi elementai: - Naudoja class="plant-holder" nuosekliai konteinerių stilizacijai visiems augalams - Taiko class="plant" bendriems paveikslėlių stiliams ir elgesiui - Turi unikalų id="plant1" individualiam pozicionavimui ir JavaScript sąveikai - Pateikia aprašomąjį alt tekstą ekrano skaitytojams Dabar pridėk šiuos stilius į savo style.css failą: Analizė: - Sukuria santykinį pozicionavimą augalo konteineriui, kad nustatytų pozicionavimo kontekstą - Nustato kiekvieno konteinerio aukštį kaip 13%, užtikrindamas, kad visi augalai tilptų vertikaliai be slinkties - Šiek tiek perstumdo konteinerius į kairę, kad augalai būtų geriau centriniai savo talpyklose - Leidžia augalams skalė su reaguojančiais max-width ir max-height nustatymais - Naudoja z-index, kad augalai būtų virš kitų terrariumo elementų sluoksnių - Prideda subtilią pelės užvedimo efektą su CSS tranzicijomis geresnei sąveikai ✅ Kritinis mąstymas: Kodėl mums reikia tiek .plant-holder, tiek .plant selektorių? Kas nutiktų, jei naudotume tik vieną? ## CSS pozicionavimo supratimas CSS pozicionavimas yra kaip režisierius scenoje – nurodai, kur stovėti kiekvienam aktoriui ir kaip judėti scenoje. Kai kurie aktoriai laikosi standartinio išdėstymo, o kitiems reikia specifinio pozicionavimo draminės įtakos labui. Kai supranti pozicionavimą, daugelis išdėstymo iššūkių tampa įveikiami. Reikia navigacijos juostos, kuri lieka viršuje slenkant puslapiui? Pozicionavimas tai gali padaryti. Nori žymeklio, kuris pasirodo konkrečioje vietoje? Tai irgi pozicionavimas. ### Penkios pozicionavimo reikšmės ### Pozicionavimas mūsų terrariume Mūsų terrariumas naudoja strategiškai pasirinktų pozicionavimo tipų derinį, kad sukurtų norimą išdėstymą: Pozicionavimo strategijos supratimas: - Absolute konteineriai yra pašalinami iš numatyto dokumento srauto ir prisegami prie ekrano kraštų - Relative augalų laikikliai kuria pozicionavimo kontekstą ir lieka dokumento sraute - Absolute augalai gali būti tiksliai pozicionuojami savo santykiniuose konteineriuose - Šis derinys leidžia augalams būti vertikaliai išdėstytiems ir tuo pačiu atskirai pozicionuojamiems ✅ Eksperimentas: Pabandyk pakeisti pozicionavimo reikšmes ir pasižiūrėk rezultatus: - Kas nutinka, jei .container pakeisi iš absolute į relative? - Kaip pasikeičia išdėstymas, jei .plant-holder naudoja absolute vietoj relative? - Kas nutinka, kai .plant pereina į relative pozicionavimą? ### 🔄 Pedagoginis patikrinimas CSS pozicionavimo meistriškumas: Sustokite patikrinti savo supratimą: - ✅ Ar galite paaiškinti, kodėl augalai turi naudoti absoliučią poziciją drag-and-drop funkcijai? - ✅ Ar suprantate, kaip reliatyvūs konteineriai sukuria pozicionavimo kontekstą? - ✅ Kodėl šoninės talpyklos naudoja absoliučią poziciją? - ✅ Kas nutiktų, jei visiškai pašalintumėte pozicijos deklaracijas? Tikro pasaulio ryšys: Pagalvokite, kaip CSS pozicionavimas atspindi tikro pasaulio išdėstymą: - Static: Knygos ant lentynos (natūrali tvarka) - Relative: Šiek tiek perkelti knygą, bet išlaikyti vietą - Absolute: Įdėti žymeklį tiksliai tam puslapiui - Fixed: Lipni pastaba, kuri lieka matoma vartant puslapius ## Terrariumo kūrimas su CSS Dabar sukursime stiklainį naudodami tik CSS – nereikia jokių paveikslėlių ar grafikos programų. Realistiško stiklo, šešėlių ir gylio efektų sukūrimas naudojant pozicionavimą ir skaidrumą demonstruoja CSS vizualines galimybes. Ši technika atspindi, kaip Bauhauzo architektai naudojo paprastas geometrines formas sudėtingiems ir gražiems pastatams kurti. Kai suprasite šias principus, pastebėsite CSS technikas daugelyje interneto dizainų. ### Stiklainio detalių kūrimas Kuriame terrariumo stiklainį po dalį. Kiekviena dalis naudoja absoliučią poziciją ir procentinius dydžius reaguojančiam dizainui: Terrariumo sukūrimo supratimas: - Naudoja procentinius dydžius, kad būtų galima reaguoti į bet kokį ekrano dydį - Išdėsto elementus absoliučiai, kad tiksliai sudėtų ir susietų - Taiko skirtingą skaidrumą, kad sukurtų stiklo efekto įspūdį - Vykdo z-index sluoksniavimą, kad augalai būtų stiklainio viduje - Prideda subtilų šešėlį ir apvalintus kampus tikresniam vaizdui ### Reaguojantis dizainas su procentais Atkreipkite dėmesį, kad visi matmenys yra procentais, o ne fiksuota pikselių verte: Kodėl tai svarbu: - Garantuoja proporcingą terrariumo mastelį bet kokiame ekrane - Išlaiko vizualinius santykius tarp stiklainio dalių - Užtikrina nuoseklią patirtį nuo mobiliųjų telefonų iki didelių monitorių - Leidžia dizainui prisitaikyti be vizualinių išdėstymo klaidų ### CSS vienetai veikime Naudojame rem vienetus border-radius savybei, kurie masteliuojasi priklausomai nuo pagrindinio šrifto dydžio. Tai kuria prieinamesnį dizainą, gerbiantį vartotojo šrifto nustatymus. Daugiau sužinokite apie CSS reliatyviuosius vienetus oficialiame standarte. ✅ Vizualiniai eksperimentai: Pakeiskite šias reikšmes ir stebėkite rezultatus: - Pakeiskite stiklo skaidrumą nuo 0.5 iki 0.8 – kaip tai veikia stiklo išvaizdą? - Pakeiskite žemės spalvą nuo #3a241d į #8B4513 – koks bus vizualinis efektas? - Pakeiskite žemės z-index į 2 – kas nutiks sluoksniavimui? ### 🔄 Pedagoginis patikrinimas CSS vizualinio dizaino suvokimas: Patvirtinkite savo CSS vaizdinio supratimą: - ✅ Kaip procentiniai matmenys sukuria reaguojantį dizainą? - ✅ Kodėl skaidrumas sukuria stiklo transparencijos efektą? - ✅ Kokia z-index reikšmė sluoksniavimo procesuose? - ✅ Kaip border-radius reikšmės suformuoja stiklainio formą? Dizaino principas: Pastebėkite, kaip mes naudojame paprastas formas sudėtingiems vaizdams kurti: 1. Stačiakampiai → Apvalinti stačiakampiai → Stiklainio dalys 2. Lygių spalvų paviršiai → Skaidrumas → Stiklo efektas 3. Atskiri elementai → Sluoksniuotas sudėjimas → 3D vaizdas --- ## GitHub Copilot agento iššūkis 🚀 Naudokite Agent režimą, kad įvykdytumėte šį iššūkį: Aprašymas: Sukurkite CSS animaciją, kuri priverstų terrariumo augalus švelniai svyruoti iš vienos pusės į kitą, imituodama natūralų vėjo efektą. Tai padės praktikuotis su CSS animacijomis, transformacijomis ir keyframe'ais, pagerinant terrariumo vizualinį patrauklumą. Užduotis: Pridėkite CSS keyframe animacijas, kad augalai terrariume švelniai svyruotų iš vienos pusės į kitą. Sukurkite svyravimo animaciją, kuri sukurtų šiek tiek (2-3 laipsnių) pasukimą į kairę ir į dešinę, trukmė 3-4 sekundės, ir pritaikykite .plant klasei. Užtikrinkite, kad animacija kartotųsi begalinį kartų skaičių ir turėtų natūralų judėjimą užtikrinantį ease efektą. Sužinokite daugiau apie agent mode čia. ## 🚀 Iššūkis: stiklo atspindžių pridėjimas Pasiruošę pagerinti savo terrariumą realistiškais stiklo atspindžiais? Ši technika pridės gilumo ir tikroviškumo jūsų dizainui. Kursite subtilius šviesos žiburius, imituojančius, kaip šviesa atsispindi nuo stiklo paviršių. Šis būdas panašus į tai, kaip Renesanso tapytojai, pvz., Jan van Eyck, naudojo šviesą ir atspindžius, kad nudažytas stiklas atrodytų trimatis. Štai ko siekiate: Jūsų iššūkis: - Sukurkite subtilias baltas ar šviesias ovalo formos dėmes stiklo atspindžiams - Išdėstykite jas strategiškai kairėje stiklainio pusėje - Taikykite tinkamą skaidrumą ir blur efektus realistiškam šviesos atspindžiui - Naudokite border-radius, kad sukurtumėte organiškas, burbulo formas - Eksperimentuokite su gradientais ar dėžių šešėliais papildomam tikroviškumui ## Po paskaitos testas Po paskaitos testas ## Išplėskite savo CSS žinias CSS iš pradžių gali atrodyti sudėtingas, bet supratę šiuos pagrindus pasieksite tvirtus pagrindus pažangesnėms technikoms. Jūsų kitos CSS mokymosi sritys: - Flexbox - supaprastina elementų išlyginimą ir paskirstymą - CSS Grid - suteikia galingus įrankius sudėtingiems išdėstymams kurti - CSS kintamieji - mažina kartojimą ir pagerina priežiūrą - Reaguojantis dizainas - užtikrina tinkamą veikimą skirtingų ekranų dydžiuose ### Interaktyvūs mokymosi ištekliai Praktikuokite šias koncepcijas žaisdami: - 🐸 Flexbox Froggy - išmokite Flexbox per smagius iššūkius - 🌱 Grid Garden - sužinokite CSS Grid augindami virtualius morkas - 🎯 CSS Battle - išbandykite savo CSS įgūdžius su kodo iššūkiais ### Papildomas mokymasis Dėl išsamių CSS pagrindų baigkite šią Microsoft Learn pamoką: Stiliaus taikymas HTML programėlei su CSS ### ⚡ Ką galite padaryti per ateinančias 5 minutes - [ ] Atidarykite DevTools ir patikrinkite CSS stilius bet kuriame tinklalapyje naudodami Elements panel - [ ] Sukurkite paprastą CSS failą ir susiekite jį su HTML puslapiu - [ ] Išbandykite keisti spalvas įvairiais metodais: heksu, RGB, vardiniais pavadinimais - [ ] Praktikuokitės su box model pridėdami padding ir margin div elementui ### 🎯 Ką galite pasiekti per šią valandą - [ ] Užbaikite po pamokos testą ir peržiūrėkite CSS pagrindus - [ ] Stiliaus pritaikymas HTML puslapiui su šriftais, spalvomis ir tarpu - [ ] Sukurkite paprastą išdėstymą naudojant flexbox arba grid - [ ] Eksperimentuokite su CSS perėjimais sklandiems efektams - [ ] Praktikuokitės reaguojančio dizaino su media queries ### 📅 Jūsų savaitės CSS nuotykiai - [ ] Užbaikite terrariumo stiliaus užduotį kūrybiškai - [ ] Išmokite CSS Grid kurdami nuotraukų galerijos išdėstymą - [ ] Išmokite CSS animacijas, kad jūsų dizainai būtų gyvi - [ ] Pažinkite CSS preprocessorius kaip Sass ar Less - [ ] Studijuokite dizaino principus ir pritaikykite juos CSS - [ ] Analizuokite ir atkurkite įdomius dizainus, kuriuos randate internete ### 🌟 Jūsų mėnesio dizaino meistriškumas - [ ] Sukurkite pilną reaguojančio tinklalapio dizaino sistemą - [ ] Išmokite CSS-in-JS ar utilitarinius framework us kaip Tailwind - [ ] Prisidėkite prie atviro kodo projektų tobulindami CSS - [ ] Įvaldykite pažangias CSS temas, tokias kaip CSS tinkinamos savybės ir kontainment - [ ] Kurkite pakartotinai naudojamas komponentų biblioteka su moduliniais CSS - [ ] Mokykite kitus CSS besimokančius ir dalinkitės dizaino žiniomis ## 🎯 Jūsų CSS meistriškumo laiko juosta ### 🛠️ Jūsų CSS įrankių santrauka Baigę šią pamoką dabar turite: - Kaskadinio poveikio supratimą: Kaip stiliai paveldimi ir perrašomi - Selektorių meistriškumą: Tikslų taikymą elementams, klasėms ir ID - Pozicionavimo įgūdžius: Strateginį elementų išdėstymą ir sluoksniavimą - Vizualinį dizainą: Stiklo efektų, šešėlių ir skaidrumo kūrimą - Reaguojančias technikas: Procentinius dydžius, prisitaikančius prie bet kokio ekrano - Kodo organizavimą: Švarų, prižiūrimą CSS struktūrą - Modernias praktikas: Reliatyvių vienetų ir prieinamo dizaino modelių naudojimą Kiti žingsniai: Jūsų terrariumas dabar turi tiek struktūrą (HTML), tiek stilių (CSS). Paskutinėje pamokoje pridėsime interaktyvumą su JavaScript! ## Užduotis CSS refaktoringas --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Atsakomybės apribojimas: Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą Co-op Translator. Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Pirminis dokumentas jo gimtąja kalba laikomas autoritetingu šaltiniu. Svarbiai informacijai rekomenduojame naudotis profesionalaus vertėjo paslaugomis. Mes neatsakome už bet kokius nesusipratimus ar neteisingus interpretavimus, kylančius dėl šio vertimo naudojimo. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Project Part 1: HTML പരിചയം
HTML, അല്ലെങ്കിൽ HyperText Markup Language, നിങ്ങൾ എപ്പോഴും സന്ദർശിച്ചിട്ടുള്ള എല്ലാ വെബ്സൈറ്റുകളുടെ അടിസ്ഥാനമാണ്. HTML-നെ വെബ് പേജുകൾക്ക് ഘടന നൽകുന്ന അറസ്റ്റിൽ വെള്ളം പോലെ കരുതുക - ഇത് ചെയ്യുന്നുണ്ട് സമവായം എവിടെയാണ് പോകേണ്ടത്, അത് എങ്ങനെ ക്രമീകരിക്കപ്പെടുന്നു, ഓരോ ഭാഗവും എന്താണ് പ്രതിനിധീകരിക്കുന്നത്. CSS പിന്നീട് നിങ്ങളുടെ HTML നിറങ്ങൾ, ലേയൗട്ടുകൾ എന്നിവ കൊണ്ട് "അലങ്കരിക്കും" ഒപ്പം ജാവാസ്ക്രിപ്റ്റ് ഇത് ജീവിക്കാൻ ഇന്റർമൂഹമായ ഇടപെടൽ നൽകും, HTML അതെല്ലാം കഴിഞ്ഞ് മറ്റ് എല്ലാം ഗുണം നേടുന്ന അടിസ്ഥാന ഘടന നൽകുന്നു. ഈ പാഠത്തിൽ, നിങ്ങൾ ഒരു വെർച്വൽ ടെറാറിയം ഇൻറർഫേസ് HTML ഘടന സൃഷ്ടിക്കും. ഈ പ്രായോഗിക പ്രോജക്ട് അടിസ്ഥാനം HTML ആശയങ്ങൾ പഠിക്കാനാകും, ഒരുപാട് ആകര്ഷകമായ ഒന്നും നിർമ്മിക്കുന്നു. നിങ്ങൾ സെമാന്റിക് ഘടകങ്ങൾ ഉപയോഗിച്ച് ഉള്ളടക്കം എങ്ങനെ ക്രമീകരിക്കാമെന്ന്, ചിത്രങ്ങൾ ഉപയോഗിച്ച് എങ്ങനെ പ്രവർത്തിക്കാമെന്ന് പഠിക്കും, ഒരു ഇന്റർമൂഹമായ വെബ് അപ്ലിക്കേഷൻ സൃഷ്ടിക്കാനുള്ള അടിസ്ഥാനമാണ് സൃഷ്ടിക്കുന്നു. ഈ പാഠം അവസാനിക്കുന്നത്, നിങ്ങൾ സജ്ജീകരിച്ച HTML പേജ് ഉപയോഗിച്ച് സജ്ജമായ സ്തംഭങ്ങളിൽ ക്രമീകരിച്ച സസ്യ ചിത്രങ്ങൾ പ്രദർശിപ്പിക്കും, അടുത്തപാഠത്തിൽ സ്റ്റൈലിംഗിനും തയ്യാറാകും. ആദ്യം ഇത് അടിസ്ഥാനമാക്കി കാണിച്ചാലും പേടിക്കേണ്ടതില്ല – CSS ദൃശ്യ അലങ്കാരങ്ങൾ നൽകുന്നതിനു മുൻപ് HTML ചെയ്യേണ്ടത് അതാണ്. ## പ്രിലക്ചർ ക്വിസ് Pre-lecture quiz ## നിങ്ങളുടെ പ്രോജക്ട് സജ്ജമാക്കൽ HTML കോഡിലേക്ക് പ്രവേശിക്കുന്നതിന് മുമ്പ്, നിങ്ങളുടെ ടെറാറിയം പ്രോജക്ടിനായി ഒരു ശരിയായ വർക്ക്സ്പേസ് സജ്ജമാക്കാം. ആരംഭത്തിൽ മുതൽ ക്രമീകരിച്ച ഫയൽ ഘടന സൃഷ്ടിക്കൽ ഒരു പ്രധാന ശീലമാണ്, ഇത് നിങ്ങളുടെ വെബ് വികസന യാത്രയിൽ നല്ല സേവനം നൽകും. ### ടാസ്ക്: നിങ്ങളുടെ പ്രോജക്ട് ഘടന സൃഷ്ടിക്കുക നിങ്ങൾക്ക് ടെറാറിയം പ്രോജക്ടിനായി സമർപ്പിത ഫോൾഡർ സൃഷ്ടിച്ച് നിങ്ങളുടെ ആദ്യ HTML ഫയൽ ചേർക്കാം. ഇത്രയും ഉപയോഗിക്കാൻ കഴിയുന്ന രണ്ടു ആപ്രോച്ചുകൾ: ഓപ്ഷൻ 1: Visual Studio Code ഉപയോഗിച്ച് 1. Visual Studio Code തുറക്കുക 2. "ഫയൽ" → "ഫോൾഡർ തുറക്കുക" അല്ലെങ്കിൽ Ctrl+K, Ctrl+O (Windows/Linux) അല്ലെങ്കിൽ Cmd+K, Cmd+O (Mac) ഉപയോഗിക്കുക 3. terrarium എന്ന പുതിയ ഫോൾഡർ സൃഷ്ടിച്ച് അത് തിരഞ്ഞെടുക്കുക 4. Explorer പാനലിൽ "ന്യൂ ഫയൽ" ഐക്കൺ ക്ലിക്കുചെയ്യുക 5. നിങ്ങളുടെ ഫയലിന് index.html എന്ന പേര് നൽകുക ഓപ്ഷൻ 2: ടെർമിനൽ കമാൻഡുകൾ ഉപയോഗിച്ച് ഈ കമാൻഡുകൾ എന്ത് ചെയ്യുന്നു: - പുതിയ ഡയറക്ടറി terrarium എന്ന പേരിൽ നിങ്ങളുടെ പ്രോജക്ടിനായി സൃഷ്ടിക്കുന്നു - terrarium ഡയറക്ടറിയിലേക്ക് നീങ്ങുന്നു - ശൂന്യമായ index.html ഫയൽ സൃഷ്ടിക്കുന്നു - ഫയൽ എഡിറ്റിങ്ങിന് Visual Studio Code-ൽ തുറക്കുന്നു ## HTML ഡോക്യുമെന്റ് ഘടന മനസിലാക്കൽ പ്രതിയൊരു HTML ഡോക്യുമെന്റും ബ്രൗസറുകൾ മനസിലാക്കി ശരിയായി പ്രദർശിപ്പിക്കുന്നതിന് പ്രത്യേകം ഘടന പാലിക്കുന്നു. ഈ ഘടിതന്നെയാണ് ഒരു ഔദ്യോഗിക കത്ത് പോലെയാണ് – അത് നിർദ്ദേശിച്ച വ്യവസ്ഥകളിൽ നിർബന്ധമായ ഘടകങ്ങൾ ഉള്ളതാണ്, ഇത് പ്രേക്ഷകനെ (ഇവിടെ ബ്രൗസർ) ഉള്ളടക്കം ശരിയായി പ്രോസസ്സ് ചെയ്യാൻ സഹായിക്കുന്നു. ഓരോ HTML ഡോക്യുമെന്റിനും ആവശ്യമുള്ള അടിസ്ഥാന ഘടന ചേർക്കലോടെ തുടങ്ങാം. ### DOCTYPE പ്രഖ്യാപനവും റൂട്ട് എലിമെന്റും ഏതൊരു HTML ഫയലിന്റെ ആദ്യ രണ്ട് വരികളും ബ്രൗസർക്ക് ഡോക്യുമെന്റിന്റെ "പരിചയപത്രം" ആയാണ് സേവനം ചെയ്യുന്നത്: ഈ കോഡ് എന്ത് ചെയ്യുന്നു മനസിലാക്കുക: - <!DOCTYPE html> ഉപയോഗിച്ച് ഡോക്യുമെന്റ് ടൈപ്പ് HTML5 ആയി പ്രഖ്യാപിക്കുന്നു - എല്ലാ പേജ് ഉള്ളടക്കം ഉൾക്കുന്ന റൂട്ട് <html> എലിമെന്റ്സ് സൃഷ്ടിക്കുന്നു - പ്രായോഗിക ബ്രൗസർ റീണ്ടറിംഗിനായി ആധുനിക വെബ് സ്റ്റാൻഡേർഡുകൾ സ്ഥാപിക്കുന്നു - വ്യത്യസ്ത ബ്രൗസറുകളിലും ഉപകരണങ്ങളിലുമുള്ള സ്ഥിരത ഉറപ്പാക്കുന്നു ### 🔄 പാഠപരമായ ചുവയൽ താൽക്കാലികം നിർത്തി ആലോചിക്കുക: മുന്നോട്ട് പോകുന്നതിനു മുന്പ് ഉറപ്പാക്കുക: - ✅ എന്തുകൊണ്ട് ഓരോ HTML ഡോക്യുമെന്റും DOCTYPE പ്രഖ്യാപനം ആവശ്യമാണ് - ✅ <html> റൂട്ട് എലിമെന്റിൽ എന്തുണ്ട് - ✅ ഈ ഘടന ബ്രൗസറുകൾക്ക് പേജുകൾ ശരിയായി പ്രദർശിപ്പിക്കാൻ എങ്ങനെ സഹായിക്കുന്നു വേഗം സ്വയം പരിശോധന: നിങ്ങൾക്ക് നിങ്ങളുടെ സ്വന്തം വാക്കുകളിൽ "സ്റ്റാൻഡേർഡ് അനുസൃത റീണ്ടറിംഗ്" എന്നത് എന്തിനെയാണ് അർത്ഥമെന്ന് വിശദീകരിക്കാമോ? ## അത്യാവശ്യ ഡോക്യുമെന്റ് മെടാഡേറ്റ ചേർക്കൽ HTML ഡോക്യുമെന്റിലെ <head> വിഭാഗം ബ്രൗസറുകൾക്കും സെർച്ച് എഞ്ചിനുകൾക്കും ആവശ്യമായ പ്രധാന വിവരങ്ങൾ ഉൾക്കൊള്ളുന്നു, പക്ഷേ സന്ദർശകർക്ക് പേജിൽ നേരിട്ട് കാണപ്പെടണമെന്നാണ് കാണാതിരിക്കുന്നത്. ഇത് നിങ്ങളുടെ വെബ് പേജ് ശരിയായി പ്രവർത്തിക്കാനും വിവിധ ഉപകരണങ്ങളിലും പ്ലാറ്റ്ഫോമുകളിലും ശരിയായി കാണാനും സഹായിക്കുന്ന "പിന്നിലെ" വിവരമായി കരുതാം. ഈ മെടാഡേറ്റ ബ്രൗസറുകൾക്ക് പേജ് എങ്ങനെ പ്രദർശിപ്പിക്കണമെന്ന്, ഉപയോഗിക്കേണ്ട ചാരക്റ്റർ എൻകോഡിംഗ്, വിവിധ സ്ക്രീൻ വലിപ്പങ്ങൾ കൈകാര്യം ചെയ്യേണ്ടത് എന്നിവ പറയുന്നു – അതെല്ലാം പ്രൊഫഷണൽ, ആക്സസിബിൾ വെബ് പേജുകൾ സൃഷ്ടിക്കാൻ അവശ്യമാണ്. ### ടാസ്ക്: ഡോക്യുമെന്റ് ഹെഡ് ചേർക്കുക താഴെ കാണിച്ച <head> സെക്ഷൻ നിങ്ങളുടെ തുറക്കുന്ന, അട Closing </html> ടാഗുകൾക്കിടയിൽ ചേർക്കുക: ഏറ്റവും അടിസ്ഥാന ഘടകങ്ങളുടെ വിശദീകരണം: - ബ്രൗസർ ടാബിലും സെർച്ച് ഫലങ്ങളിലും പ്രദർശിപ്പിക്കുന്ന പേജ് ടൈറ്റിൽ സജ്ജീകരിക്കുന്നു - സവിശേഷമായി UTF-8 ചാരക്റ്റർ എൻകോഡിംഗ് ഉപയോഗിച്ച് ലോകമാകെയുള്ള ശരിയായ ടെക്സ്റ്റ് പ്രദർശനത്തിന് - ആധുനിക Internet Explorer പതിപ്പുകളുമായി പൊരുത്തം ഉറപ്പാക്കുന്നു - ഉപകരണത്തിന്റെ വീതി അനുസരിച്ച് viewport സജ്ജീകരിച്ച് പ്രതികരണശേഷിയുള്ള ഡിസൈൻ നടത്തി - ആരംഭാപരമായ സൂം ലെവൽ നിയന്ത്രിച്ചു ഉള്ളടക്കം സ്വാഭാവിക വലുപ്പത്തിൽ പ്രദർശിപ്പിക്കുന്നു ## ഡോക്യുമെന്റ് ബോഡി നിർമ്മാണം <body> എലിമെന്റ് നിങ്ങളുടെ വെബ്പേജിലെ ആകർഷകമായ എല്ലാ ഉള്ളടക്കവും ഉൾക്കൊള്ളുന്നു - ഉപയോക്താക്കൾ കാണുകയും ഇടപെടുകയും ചെയ്യുന്ന എല്ലാം. <head> വിഭാഗം ബ്രൗസർക്ക് നിർദ്ദേശങ്ങൾ നൽകി, <body> വിഭാഗം ആകർഷകമായ ഉള്ളടക്കമാണ്: ടെക്സ്റ്റ്, ചിത്രങ്ങൾ, ബട്ടണുകൾ, മറ്റ് UI ഘടകങ്ങൾ എന്നിവ. നാം ബോഡി ഘടനം ചേർക്കാം, HTML ടാഗുകൾ എങ്ങനെ ചേർന്ന് അറിയപ്പെടുന്ന ഉള്ളടക്കം സൃഷ്ടിക്കുന്നു എന്ന് മനസിലാക്കാം. ### HTML ടാഗ് ഘടന മനസിലാക്കുക HTML ഘടകങ്ങൾ നിർവ്വചിക്കാനായി ജോഡി ടാഗുകൾ ഉപയോഗിക്കുന്നു. അധികം ടാഗുകള്ക്ക് ആരംഭ ടാഗ് <p> പോലെയാണ്, തുടർന്ന് അട Closing ടാഗ് </p> ഉണ്ട്, ഇരു ടാഗുകളുടെ ഇടയിൽ ഉള്ളടക്കം: <p>Hello, world!</p>. ഇതൊരു പാരഗ്രാഫ് എലിമെന്റ് സൃഷ്ടിക്കുന്നു, അകത്ത് "Hello, world!" എന്ന ടെക്സ്റ്റ് ഉണ്ട്. ### ടാസ്ക്: ബോഡി എലിമെന്റ് ചേർക്കുക നിങ്ങളുടെ HTML ഫയൽ പുതുക്കി <body> എലിമെന്റ് ഉൾപ്പെടുത്തുക: ഈ പൂർണ്ണ ഘടന എന്താണ് നൽകുന്നത്: - അടിസ്ഥാന HTML5 ഡോക്യുമെന്റ് ഫ്രെയിംവർക്ക് സ്ഥാപിക്കുന്നു - ശരിയായ ബ്രൗസർ റീണ്ടറിംഗിനായി അവശ്യ മെടാഡേറ്റ ഉൾക്കൊള്ളുന്നു - ദൃശ്യമാകുന്ന ഉള്ളടക്കത്തിന് ശൂന്യമായ ബോഡി സജ്ജമാക്കുന്നു - ആധുനിക വെബ് ഡെവലപ്പ്മെന്റ് മെച്ചപ്പെട്ട പ്രാക്ടീസുകൾ പിന്തുടരുന്നു ഇപ്പോൾ നിങ്ങളുടെ ടെറാറിയത്തിനുള്ള ദൃശ്യമാകുന്ന ഘടകങ്ങൾ ചേർക്കാൻ തയ്യാറാണ്. ഉള്ളടക്കത്തിന്റെ വിവിധ വിഭാഗങ്ങൾ ക്രമീകരിക്കാൻ കൺടെയ്നർസായി <div> എലിമെന്റുകൾ ഉപയോഗിക്കും, സസ്യ ചിത്രങ്ങൾ പ്രദർശിപ്പിക്കാൻ <img> എലിമെന്റുകൾ ഉപയോഗിക്കും. ### ചിത്രങ്ങളുമായി പ്രവർത്തിക്കൽ, ലേയൗട്ട് കൺടെയ്നറുകൾ HTML-ൽ ചിത്രങ്ങൾ പ്രത്യേകമാണ്, കാരണം അവ "സ്വയം അട Closing" ടാഗുകളാണ് ഉപയോഗിക്കുന്നത്. <p></p> പോലുള്ള ഉള്ളടക്കം ചുറ്റിപ്പറ്റാൻ ടാഗുകളിൽ നിന്ന് വ്യത്യസ്തമായി, <img> ടാഗ് മാത്രമാകുന്നതിനു വേണ്ട എല്ലാ വിവരങ്ങളും അതിന്റെ അറ്റ്രിബ്യൂട്ടുകളിലൂടെ (ഉദാ., src ചിത്ര ഫയൽ പാത്തിനും, alt ആക്സസിബിലിറ്റിക്കും) ഉള്ളടക്കത്തോടൊപ്പം തന്നെയാണ്. HTML-ിൽ ചിത്രങ്ങൾ ചേർക്കുന്നതിന് മുമ്പ്, നിങ്ങൾ പ്രോജക്ട് ഫയലുകൾ ശരിയായി ക്രമീകരിക്കണം, അതായത് images ഫോൾഡർ സൃഷ്ടിച്ച് സസ്യ ഗ്രാഫിക്സ് ചേർക്കുക. ആദ്യമേ, നിങ്ങളുടെ ചിത്രങ്ങൾ സജ്ജമാക്കുക: 1. നിങ്ങളുടെ ടെറാറിയം പ്രോജക്ട് ഫോൾഡറിൽ images എന്നൊരു ഫോൾഡർ സൃഷ്ടിക്കുക 2. solution folder ല്നിന്ന് സസ്യ ചിത്രങ്ങൾ ഡൗൺലോഡ് ചെയ്യുക (മൊത്തം 14 സസ്യ ചിത്രങ്ങൾ) 3. എല്ലാ സസ്യ ചിത്രങ്ങളും പുതിയ images ഫോൾഡറിൽ പകർത്തുക ### ടാസ്ക്: സസ്യ പ്രദർശന ലേയൗട്ട് സൃഷ്ടിക്കുക ഇപ്പോൾ <body></body> ടാഗുകള്ക്കിടയിൽ ക്രമീകരിച്ച രണ്ടൊറ്റ സ്തംഭങ്ങളായി സസ്യ ചിത്രങ്ങൾ ചേർക്കുക: നടപടിയായി, ഈ കോഡിൽ എന്ത് സംഭവിക്കുന്നു: - എല്ലാ ഉള്ളടക്കവും ഉൾക്കൊള്ളാൻ id="page" ഉള്ള പ്രധാന പേജ് കൺടെയ്നർ സൃഷ്ടിക്കുന്നു - രണ്ട് സ്തംഭ കൺടെയ്നറുകൾ സൃഷ്ടിക്കുന്നു: left-container കൂടും right-container കൂടും - ഇടത് സ്തംഭത്തിൽ 7 സസ്യങ്ങളും വലത് സ്തംഭത്തിൽ 7 സസ്യങ്ങളും ക്രമീകരിക്കുന്നു - ഓരോ സസ്യ ചിത്രവും plant-holder ഡിവിൽ ചുറ്റിപ്പറ്റയുന്നു, വ്യക്തിഗത സ്ഥാനീകരണത്തിനായി - CSS സ്റ്റൈലിംഗിനായി സ്ഥിരതയുള്ള ക്ലാസ് നാമങ്ങൾ ഉപയോക്തൃപഠനത്തിലേക്ക് - JavaScript ഇടപെടലിനായി ഓരോ സസ്യ ചിത്രത്തിനും പ്രത്യേക ഐഡികൾക്ക് നൽകുന്നു - ചിത്രങ്ങളുടെ ഫയൽ പാത്തുകൾ ശരിയായി images ഫോൾഡറിലേക്ക് കാണിക്കുന്നു ### 🔄 പാഠപരമായ ചുവയൽ ഘടന മനസിലാക്കൽ: നിങ്ങളുടെ HTML ഘടന ഒരു നിമിഷം പരിശോധിക്കുക: - ✅ നിങ്ങളുടെ ലേയൗട്ടിലെ പ്രധാന കൺടെയ്നറുകൾ തിരിച്ചറിഞ്ഞു കഴിഞ്ഞോ? - ✅ ഓരോ ചിത്രത്തിനും പ്രത്യേക ഐഡി നൽകാനുള്ള കാരണം മനസ്സിലാക്കിയോ? - ✅ plant-holder ഡിവുകളുടെ ലക്ഷ്യം എന്താണെന്ന് വിവരിക്കാമോ? ദൃശ്യ പരിശോധന: നിങ്ങളുടെ HTML ഫയൽ ബ്രൗസറിൽ തുറക്കുക. നിങ്ങൾക്കാണേണ്ടത്: - അടിസ്ഥാന സസ്യ ചിത്രങ്ങളുടെ പട്ടിക - രണ്ടു സ്തംഭങ്ങളായി ക്രമീകരിച്ച ചിത്രങ്ങൾ - ലളിതമായ, സ്റ്റൈൽ ചെയ്യാത്ത ലേയൗട്ട് ഓർമ്മിക്കുക: സ്റ്റൈലിൾ CSS ഏപ്രസ്റ്റു വരയ്ക്കുന്നതിന് മുമ്പ് HTML ഇങ്ങനെ ലളിതമായിരിക്കും! ഈ മാർക്കപ്പ് ചേർത്തതിനാൽ സസ്യങ്ങൾ സ്ക്രീനിൽ പ്രത്യക്ഷപ്പെടും, എങ്കിലും അവ ഇനി വരെ അലങ്കരിക്കപ്പെടാത്തതാണ് – അതിന് CSS അടുത്ത പാഠത്തിൽ! ഇപ്പോൾ നിങ്ങൾക്കുണ്ട് ഒരു ശക്തമായ HTML മാത്ര, പ്രസക്തമായ ഓർഗനൈസേഷൻ കൂടാതെ ആക്സസിബിലിറ്റി മികച്ച രീതിയിൽ പിന്തുടരുന്നു. ## ആക്സസിബിലിറ്റിക്ക് സെമാന്റിക് HTML ഉപയോഗിക്കൽ സെമാന്റിക് HTML എന്ന് അർത്ഥം ഉള്ളടക്കത്തിന്റെ അർത്ഥവും ഉദ്ദേശ്യവും അടിസ്ഥാനമാക്കി HTML ഘടകങ്ങൾ തിരഞ്ഞെടുക്കുക, വെറും ദൃശ്യം മാത്രം നോക്കിയുള്ളവയല്ല. നിങ്ങൾ സെമാന്റിക് മാർക്കപ്പ് ഉപയോഗിക്കുമ്പോൾ ബ്രൗസറുകൾ, സെർച്ച് എഞ്ചിനുകൾ, സ്ക്രീൻ റീഡറുകൾ പോലുള്ള സഹായക സാങ്കേതിക വിദ്യകൾ എന്നിവയ്ക്ക് നിങ്ങളുടെ ഉള്ളടക്ക ഘടനയും അർത്ഥവും ഭാഗവാക്കുന്നു. ഈ സമീപനം നിങ്ങളുടെ വെബ്സൈറ്റുകൾ വീക്ഷണസാമർത്ഥ്യമില്ലാത്തവർക്കും സഹായകമാക്കുന്നു, സെർച്ച് എഞ്ചിനുകൾക്ക് നിങ്ങളുടെ ഉള്ളടക്കം കൂടുതൽ ഫലപ്രദമായി മനസിലാക്കാൻ സഹായിക്കുന്നു. ഇത് ആധുനിക വെബ് ഡെവലപ്പ്മെന്റിന്റെ അടിസ്ഥാന സിദ്ധാന്തമാണ്, എല്ലാവർക്കും മെച്ചപ്പെട്ട അനുഭവങ്ങൾ നൽകുന്നു. ### സെമാന്റിക് പേജ് തലക്കെട്ട് ചേർക്കുക നിങ്ങളുടെ ടെറാറിയം പേജിന് ശരിയായ തലക്കെട്ട് ചേർക്കാം. നിങ്ങളുടെ തുറക്കുന്ന <body> ടാഗിന് ശേഷം ഈ വരി ചേർക്കുക: സെമാന്റിക് മാർക്കപ്പ് എന്തിനുവേണ്ടി: - സ്ക്രീൻ റീഡറുകൾക്ക് പേജ് ഘടന നാവിഗേറ്റ് ചെയ്യാനും മനസ്സിലാക്കാനും സഹായിക്കുന്നു - ഉള്ളടക്ക അവയവമെന്ന വ്യൂഹം വ്യക്തമാക്കിയുകൊണ്ട് SEO (സേര്ച്ച് എഞ്ചിന് ഓപ്റ്റിമൈസേഷൻ) മെച്ചപ്പെടുത്തുന്നു - ദൃഷ്ടിബാധിതരും ബുദ്ധിരുദ്ധിമുട്ടുള്ളവരും ഉൾപ്പെടെയുള്ള ഉപഭോക്താക്കൾക്ക് ആക്സസിബിലിറ്റി മെച്ചപ്പെടുത്തുന്നു - എല്ലാ ഉപകരണങ്ങളിലും പ്ലാറ്റ്ഫോമുകളിലും മികച്ച ഉപയോക്തൃ അനുഭവങ്ങൾ സൃഷ്ടിക്കുന്നു - പ്രൊഫഷണൽ വളർച്ചയ്ക്കായി വെബ് സ്റ്റാൻഡേർഡുകളും മികച്ച പ്രാക്റ്റീസുകളും പിന്തുടരുന്നു സെമാന്റിക്-അസെമാന്റിക് എളുപ്പം: ## ടെറാറിയം കൺടെയ്നർ സൃഷ്ടിക്കൽ ഇപ്പോൾ ടെറാറിയത്തിനായുള്ള HTML ഘടന ചേർക്കാം – സസ്യങ്ങൾ വെച്ചിടാനുള്ള ഗ്ലാസ് കൺടെയ്നർ. ഈ സെക്ഷൻ ഒരു പ്രധാന ആശയം ശൂചിപ്പിക്കുന്നു: HTML ഘടന നൽകുന്നു, പക്ഷേ CSS സ്റ്റൈൽ ഇല്ലാതെ ഈ ഘടകങ്ങൾ ഇപ്പോഴും ദൃശ്യമാകില്ല. ടെറാറിയം മാർക്കപ്പ് ക്ലാസ് നാമങ്ങൾ ഉപയോഗിക്കുന്നു, അത് അടുത്ത പാഠത്തിൽ CSS സ്റ്റൈലിങ്ങ് ആശയവിനിമയവും പരിപാലനവും സുലഭമാക്കും. ### ടാസ്ക്: ടെറാറിയം ഘടന ചേർക്കുക പേജ് കൺടെയ്നറിന്റെ അവസാന </div> ടാഗിന് മുകളില് ഈ മാർക്കപ്പ് ചേർക്കുക: ഈ ടെറാറിയം ഘടന എന്ത് ചെയ്യുന്നു: - സ്റ്റൈലിംഗിന് പ്രത്യേക ID ഉള്ള മുഖ്യ ടെറാറിയം കൺടെയ്നർ സൃഷ്ടിക്കുന്നു - നിർവ്വചിക്കുന്നു ഓരോ ദൃശ്യ ഘടകത്തിനുമുള്ള വ്യത്യസ്ത ഘടകങ്ങൾ (മുൻവശം, മതിലുകൾ, മണ്ണ്, താഴ്വാരം) - ചേര്ക്കുന്നു ഗ്ലാസ് പ്രതിഫലന ഇഫക്ടുകൾക്കുള്ള അടൂർഘടകങ്ങൾ (കണികയായ ഘടകങ്ങൾ) - ഉപയോഗിക്കുന്നു ഓരോ ഘടകത്തിന്റെ ഉദ്ദേശ്യം വ്യക്തമായി സൂചിപ്പിക്കുന്ന വിവരണാത്മക ക്ലാസ് നാമങ്ങൾ - തയാറാക്കുന്നു ഗ്ലാസ് ടെറിയേറിയം രൂപം സൃഷ്ടിക്കുന്ന CSS സ്റ്റൈലിംഗിനുള്ള ഘടന ### 🔄 അധ്യാപനപരമായ പരിശോധന HTML ഘടനയുടെ പരിപൂര്ണ്ണത: മുന്നോട്ട് പോകുന്നതിന് മുമ്പ്, നിങ്ങൾക്കിവിടെ കഴിവ് ഉണ്ടെന്ന് ഉറപ്പാക്കുക: - ✅ HTML ഘടനയും ദൃശ്യ രൂപഭേദവും തമ്മിലുള്ള വ്യത്യാസം വിശദീകരിക്കാൻ - ✅ സംവേദനാത്മക HTML ഘടകങ്ങളും അസംവേദനാത്മക ഘടകങ്ങളും തിരിച്ചറിയാൻ - ✅ ശരിയായ മാർക്ക്അപ്പ് ആക്സസ്IBILITYക്ക് എങ്ങനെ സഹായിക്കുന്നുവെന്ന് വിവരിക്കാൻ - ✅ സമ്പൂർണ ഡോക്യുമെന്റ് ട്രീ ഘടന തിരിച്ചറിയാൻ നിങ്ങളുടെ മനസിലാക്കലിനെ പരീക്ഷിക്കുക: നിങ്ങളുടെ HTML ഫയൽ ജാവാസ്ക്രിപ്റ്റ് പ്രവർത്തനരഹിതവും CSS ഇല്ലാത്തതുമായ ബ്രൗസറിൽ തുറന്ന് നോക്കുക. ഇത് നിങ്ങൾ സൃഷ്ടിച്ച ശുദ്ധമായ സംവേദനാത്മക ഘടന കാണിക്കുന്നു! --- ## GitHub Copilot ഏജന്റ് ചലഞ്ച് താഴെ കാണുന്ന ചലഞ്ച് പൂർത്തിയാക്കാൻ ഏജന്റ് മോഡിനെ ഉപയോഗിക്കുക: വിവരണം: ടെറിയേറിയം പ്രോജക്ടിൽ ചേർക്കാവുന്ന ഒരു സസ്യപരിപാലന ഗൈഡ് വിഭാഗത്തിനുള്ള സംവേദനാത്മക HTML ഘടന സൃഷ്ടിക്കുക. പ്രംപ്റ്റ്: "Plant Care Guide" എന്ന മുഖ്യ തലക്കെട്ട് ഉള്ള ഒരു സംവേദനാത്മക HTML വിഭാഗം സൃഷ്ടിക്കുക, അതിനുള്ളിൽ "Watering", "Light Requirements", "Soil Care" എന്ന തലക്കെട്ടുകളുമായി മൂന്ന് ഉപവിഭാഗങ്ങൾ, ഓരോന്നിലും സസ്യപരിപാലന വിവരങ്ങൾ ഉള്ള ഒരു പാരഗ്രാഫ് ഉൾപ്പെടുന്നു. ഉള്ളടക്കം ശരിയായ രീതിയിൽ ഘടിപ്പിക്കാൻ <section>, <h2>, <h3>, <p> പോലുള്ള സംവേദനാത്മക HTML ടാഗുകൾ ഉപയോഗിക്കുക. ഇവിടെ കൂടുതൽ അറിയുക agent mode. ## HTML ചരിത്രം പഠന ചലഞ്ച് വെബ് വികസനത്തെ കുറിച്ച് പഠനം HTML 1990-ൽ ടി എം ബേൺേഴ്സ്-ലി CERN-ൽ ആദ്യ വെബ്ബ് ബ്രൗസർ സൃഷ്ടിച്ചുനിന്ന以来 വലിയ പുരോഗതിയാണ് സാദ്ധ്യം. ചില പഴയ ടാഗുകൾ, ഉദാ: <marquee>, ഇപ്പോൾ ഡിസകണ്ടിന്യൂ ചെയ്തിട്ടുണ്ട്, കാരണം അവ പുതിയ ആക്സസിബിലിറ്റി സ്റ്റാന്റേർഡുകളോടും റെസ്പോൺസീവ് ഡിസൈനൊപ്പം സങ്കരിക്കാനാകുന്നില്ല. ഈ പരീക്ഷണം ചെയ്യുക: 1. താൽക്കാലികമായി നിങ്ങളുടെ <h1> തലക്കെട്ട് <marquee> ടാഗിൽ ചുറ്റിപ്പറ്റിക്കുക: <marquee><h1>My Terrarium</h1></marquee> 2. ബ്രൗസറിൽ പേജ് തുറന്ന് സ്രോൾ ചെയ്യുന്ന ഇഫക്റ്റ് ശ്രദ്ധിക്കുക 3. ഈ ടാഗ് ഡിസകണ്ടിന്യൂ ചെയ്തതിന്റെ കാരണം പരിഗണിക്കുക (സംकेतം: ഉപയോക്തൃ അനുഭവം, ആക്സസിബിലിറ്റി) 4. <marquee> ടാഗ് നീക്കം ചെയ്തു സംവേദനാത്മക മാർക്ക്അപ്പിലേക്ക് മടങ്ങുക ചിന്തിക്കുന്നതിനുള്ള ചോദ്യങ്ങൾ: - സ്രോൾ ചെയ്യുന്ന തലക്കെട്ട് ദൃശ്യമാന വൈകല്യമോ ചലനസെൻസിറ്റിവിറ്റിയോ ഉള്ള ഉപയോക്താക്കളെ എങ്ങനെ ബാധിക്കും? - സമാന ദൃശ്യഫലങ്ങൾ കൂടുതൽ ആക്സസിബിൾ രീതിയിൽ സൃഷ്ടിക്കാൻ പുതിയ CSS സാങ്കേതിക വിദ്യകൾ എന്തെല്ലാമാണ്? - പഴങ്കാല ടാഗുകളുടെ പകരം നൂതന വെബ് സ്റ്റാൻഡേർഡുകൾ ഉപയോഗിക്കുന്നത് എന്തുകൊണ്ട് പ്രധാനമാണ്? വെബ്ബ് സ്റ്റാൻഡേർഡുകൾ എങ്ങനെ വളർന്നുവരുന്നുവെന്ന് മനസിലാക്കാൻ obsolete and deprecated HTML elements കൂടുതൽ പഠിക്കുക. ## പാഠം കഴിഞ്ഞുള്ള ക്വിസ് പോസ്റ്റ്-ലക്ചർ ക്വിസ് ## പുനഃപരിശോധന & സ്വയം പഠനം നിങ്ങളുടെ HTML അറിവ് തളരുക HTML വെബ്ബിന്റെ അടിസ്ഥാനമായിട്ട് 30 വർഷത്തിലേറെയായി നിലനിൽക്കുന്നു, ഒരു ലളിത ഡോക്യുമെന്റ് മാർക്കപ്പ് ഭാഷയിൽ നിന്ന് ഇടപെടലുള്ള ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്ന ഒരു സ്പാര്ശശീലം ആയി മാറിയിട്ടുണ്ട്. ഈ വളർച്ച മനസ്സിലാക്കുന്നതിലൂടെ നൂതന വെബ് സ്റ്റാൻഡേർഡുകൾ വിലമതിക്കുകയും മികച്ച ഡെവലപ്മെന്റ് തീരുമാനങ്ങൾ എടുക്കാനും സഹായിക്കുന്നു. പരിഷ്കൃത പഠന മാർഗങ്ങൾ: 1. HTML ചരിത്രവും വളർച്ചയും - HTML 1.0 മുതൽ HTML5 വരെ ടൈംലൈൻ ഗവേഷിക്കുക - ചില ടാഗുകൾ എന്തുകൊണ്ട് ഡിസകണ്ടിന്യൂ ചെയ്തുവെന്ന് അന്വേഷിക്കുക (ആക്സസിബിലിറ്റി, മൊബൈൽ സൗഹൃദം, പരിപാലനക്ഷമത) - ഉദയം വെറും HTML ഫീച്ചറുകളും നിർദ്ദേശങ്ങളും പരിശോധിക്കുക 2. സംവേദനാത്മക HTML സമഗ്ര പഠനം - HTML5 semantic elements പൂർണ്ണ പട്ടിക പഠിക്കുക - <article>, <section>, <aside>, <main> എപ്പോൾ ഉപയോഗിക്കേണ്ടതാണെന്ന് തിരിച്ചറിയൽ അഭ്യാസം ചെയ്യുക - മെച്ചപ്പെട്ട ആക്സസിബിലിറ്റിക്ക് ARIA ആട്രിബ്യൂട്ടുകളെക്കുറിച്ച് പഠിക്കുക 3. ആധുനിക വെബ് വികസനം - responsive websites നിർമ്മിക്കുന്ന വഴി Microsoft Learn-ൽ പരിശോധിക്കുക - HTML CSS, ജാവാസ്ക്രിപ്റ്റ് എന്നിവയുമായി എങ്ങനെ ഒന്നിച്ച് പ്രവൃത്തി നടത്തുന്നു എന്ന് മനസിലാക്കുക - വെബ് പെർഫോർമേൻസ്, SEO മികച്ച മാർഗങ്ങൾ പഠിക്കുക ചിന്തിക്കാൻ ഉള്ള ചോദ്യങ്ങൾ: - നിങ്ങൾ കണ്ടെത്തിയ ഡിസകണ്ടിന്യൂ ചെയ്ത HTML ടാഗുകൾ ഏവയായിരുന്നു, അവ എന്തുകൊണ്ട് നീക്കംചെയ്തു? - അടുത്ത പതിപ്പുകളിൽ ഉൾപ്പെടുത്താൻ നിശ്ചയിച്ചിരിക്കുന്ന പുതിയ HTML ഫീച്ചറുകൾ എന്തെല്ലാം? - സംവേദനാത്മക HTML വെബ് ആക്സസിബിലിറ്റിക്ക് എങ്ങനെ സഹായിക്കുന്നു? SEO-യുമായി ബന്ധം എന്താണ്? ### ⚡ അടുത്ത 5 നിമിഷങ്ങളിൽ ചെയ്യാൻ കഴിയുന്നത് - [ ] DevTools (F12) തുറന്ന് നിങ്ങളുടെ ഇഷ്ട വെബ്സൈറ്റിന്റെ HTML ഘടന പരിശോധിക്കുക - [ ] ലളിതമായ HTML ഫയൽ സൃഷ്ടിക്കുക <h1>, <p>, <img> അടങ്ങിയ - [ ] W3C HTML Validator ഓൺലൈൻ ഉപയോഗിച്ച് നിങ്ങളുടെ HTML പരിശോദിക്കുക - [ ] HTML-ൽ <!-- comment --> ഉപയോഗിച്ച് ഒരു കമന്റ് ചേർക്കാൻ ശ്രമിക്കുക ### 🎯 ഈ മണിക്കൂറിൽ നേടാം - [ ] പാഠം കഴിഞ്ഞു ക്വിസ് പൂർണ്ണമാക്കി സംവേദനാത്മക HTML ആശയങ്ങൾ തിരിച്ചു പരിശോധിക്കുക - [ ] ശരിയായ HTML ഘടന ഉപയോഗിച്ച് ഒരു ലളിത വെബ് പേജ് നിർമ്മിക്കുക - [ ] വ്യത്യസ്ത തലക്കെട്ട് തലങ്ങളിൽ പരീക്ഷണങ്ങളും ടെക്സ്റ്റ് ഫോർമാറ്റിംഗ് ടാഗുകളും പരീക്ഷിക്കുക - [ ] മൾട്ടിമീഡിയ ഇന്റഗ്രേഷൻ അഭ്യാസത്തിന് ചിത്രങ്ങളും ലിങ്കുകളും ചേർക്കുക - [ ] നിങ്ങൾക്ക് പരീക്ഷിക്കാത്ത HTML5 ഫീച്ചറുകൾ ഗവേഷിക്കുക ### 📅 നിങ്ങളുടെ ആഴ്ച നൂറായ HTML യാത്ര - [ ] ടേറിയേറിയം പ്രോജക്ട് അസൈൻമെൻറ് സംവേദനാത്മക മാർക്കയിലൂടെ പൂർത്തിയാക്കുക - [ ] ARIA ലേബലുകളും റോൾസും ഉപയോഗിച്ച് ആക്സസിബിൾ വെബ് പേജ് സൃഷ്ടിക്കുക - [ ] വിവിധ ഇൻപുട്ട് തരം ഉള്ള ഫോമുകൾ നിർമ്മിച്ചുള്ള അഭ്യാസം - [ ] localStorage, ജിയോലൊക്കേഷൻ പോലുള്ള HTML5 API-കൾ പരീക്ഷിക്കുക - [ ] റെസ്പോൺസീവ് HTML മാതൃകകളും മൊബൈൽ-ഫസ്റ്റ് ഡിസൈനും പഠിക്കുക - [ ] മികച്ച രീതികൾക്ക് വേണ്ടി മറ്റ് ഡെവലപ്പർമാരുടെ HTML കോഡ് അവലോകനം ചെയ്യുക ### 🌟 നിങ്ങളുടെ മാസത്തെ വെബ് അടിസ്ഥാന പരിശീലനം - [ ] HTML വിജ്ഞാനം പ്രദർശിപ്പിക്കുന്ന ഒരു പോർട്ട്ഫോലിയോ വെബ്സൈറ്റ് നിർമ്മിക്കുക - [ ] ഹാൻഡ്ബാർസ് പോലുള്ള ഫ്രെയിംവർക്ക് ഉപയോഗിച്ച് HTML ടെംപ്ലേറ്റിംഗ് പഠിക്കുക - [ ] ഓപ്പൺ സോഴ്സ് പ്രോജക്ടുകൾക്ക് HTML ഡോക്യുമെന്റേഷൻ മെച്ചപ്പെടുത്താൻ സംഭാവന നൽകുക - [ ] കസ്റ്റം എലിമെന്റുകൾ പോലുള്ള പ്രഗത്ഭ HTML ആശയങ്ങൾ കൈകാര്യം ചെയ്യാൻ ശ്രദ്ധിക്കുക - [ ] CSS ഫ്രെയിംവർക്കുകളും ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറികളും സഹിതം HTML ഇന്റഗ്രേറ്റ് ചെയ്യുക - [ ] HTML അടിസ്ഥാനങ്ങൾ പഠിക്കുന്നവരെ മാർഗനിർദേശം നൽകുക ## 🎯 നിങ്ങളുടെ HTML വിദഗ്ധതയുടെ ടൈംലൈൻ ### 🛠️ നിങ്ങളുടെ HTML ടൂൾകിറ്റ് സാരാംശം ഈ പാഠം പൂർത്തിയാക്കിയപ്പോൾ, നിങ്ങൾക്കുണ്ട്: - ഡോക്യുമെന്റ് ഘടന: ശരിയായ DOCTYPE ഉളള സംപൂർണ HTML5 അടിസ്ഥാനഘടന - സംവേദനാത്മക മാർക്കപ്പ്: ആക്സസിബിലിറ്റിക്കും SEO-ക്കും സഹായിക്കുന്ന അർത്ഥമുള്ള ടാഗുകൾ - ഇമേജ് ഇന്റഗ്രേഷൻ: ശരിയായ ഫയൽ സംവിധാനവും alt ടെക്സ്റ്റ് പ്രയോഗവും - ലേ ഔട്ട് കണ്ടെയ്നറുകൾ: വിവരണാത്മക ക്ലാസ് നാമങ്ങളോട് കൂടി ഡിവുകൾ തന്ത്രപരമായി ഉപയോഗിക്കൽ - ആക്സസിബിലിറ്റി ബോധം: സ്ക്രീൻ റീഡർ നാവിഗേഷൻ മനസ്സിലാക്കൽ - ആധുനിക സ്റ്റാൻഡേർഡുകൾ: ഇപ്പോഴത്തെ HTML5 പ്രാക്ടീസുകളും ഡിസകണ്ടിന്യൂ ചെയ്ത ടാഗ് അറിവും - പ്രോജക്ട് בסיסം: CSS സ്റ്റൈലിംഗിനും ജാവാസ്ക്രിപ്റ്റ് ഇന്ററാക്ടിവിറ്റിക്കും പ്രാവശ്യപ്പെടുത്തിയ ബേസ് അടുത്ത ഘട്ടങ്ങൾ: നിങ്ങളുടെ HTML ഘടന CSS സ്റ്റൈലിംഗിനായി തയ്യാറാണ്! നിങ്ങൾ സൃഷ്ടിച്ച സംവേദനാത്മക അടിസ്ഥാന ഘടന അടുത്ത പാഠം എളുപ്പത്തിൽ മനസിലാക്കാൻ സഹായിക്കും. ## അസൈൻമെന്റ് Practice your HTML: Build a blog mockup --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> അസൂചനം: ഈ പ്രമാണം എ.ഐ. തർജ്ജുമാ സേവനം Co-op Translator ഉപയോഗിച്ച് തർജ്ജമ ചെയ്തതാണ്. നാം കൃത്യതക്ക് ശ്രമിക്കുന്നതിനാലും, സ്വയം പ്രവർത്തിക്കുന്ന തർജ്ജുമകളില് തെറ്റുകൾ അല്ലെങ്കില് അപകൃതതകൾ ഉണ്ടാകാം എന്ന കാര്യം ദയവായി ശ്രദ്ധിക്കുക. സുപ്രധാനമായ വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മനുഷ്യ തർജ്ജുമ ചെയ്യൽ ശുപാർശ ചെയ്യപ്പെടുന്നു. ഈ തർജുമയുടെ ഉപയോഗത്തിൽ നിന്നുണ്ടാകുന്ന ഏതു തെറ്റുത്തരുമാനങ്ങൾക്കും അല്ലെങ്കിൽ തെറ്റിദ്ധാരണകൾക്കും ഞങ്ങൾ ഉത്തരവാദികളല്ല. മൂലപ്രമാണം അതിന്റെ പ്രാദേശിക ഭാഷയിലുള്ളത് മാത്രമാണ് അതിന്റെ അധികൃത ഉറവിടം എന്നതായി കരുതണം. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
ടെററിയം പ്രോജക్ట్ ഭാഗം 2: CSS-ഇന്റെ പരിചയം
നിന്റെ HTML ടെററിയം എത്ര സാധാരണമായിരുന്നു എന്ന് ഓർക്കുന്നുണ്ടോ? CSS ആണ് ആ പാരിപ്പൊളിച്ച ഘടനയെ ദൃശ്യപരമായി ആകര്ഷകമാക്കുന്നത്. HTML വീടിന്റെ ഫോം നിർമ്മിക്കുന്നതുപോലെ ആണെങ്കിൽ, CSS വീട്ടുപോലെ ആക്കുന്നത് ആണ് - പേൻറ് കളർ, ഫർണിച്ചർ ക്രമീകരണം, ലൈറ്റിംഗ്, മുറികളിലെ ബന്ധം. Palace of Versailles എങ്ങനെ ഒരു ലളിതമായ ഹണ്ടിംഗ് ലജ്ജായി തുടങ്ങിയതും, അലങ്കാരത്തിലും വിന്യാസത്തിലും ശ്രദ്ധ നൽകിയതുകൊണ്ടുതന്നെ ലോകത്തിലെ ഏറ്റവും മനോഹരമായ കെട്ടിടങ്ങളിലൊന്നായി മാറിയതും ആലോചിക്കു. ഇന്ന്, നിന്റെ ടെററിയങ്ങളെ ഫംഗ്ഷണൽ നിന്ന് പോളിഷ് ചെയ്തതാക്കാം. നിനക്ക് എലമെന്റുകൾ കൃത്യമായി പൊസിഷൻ ചെയ്യാൻ, ലേയൗട്ടുകൾ വ്യത്യസ്ത സ്ക്രീൻ വലിപ്പങ്ങളെ അനുസരിച്ച് പ്രതികരിക്കാൻ, വെബ്സൈറ്റുകളെ ആകര്ഷകമാക്കുന്ന ദൃശ്യ രൂപത സൃഷ്ടിക്കാൻ പഠിക്കും. ഈ പാഠത്തിന്റെ അവസാനം, സമർത്ഥമായ CSS സ്റ്റൈലിംഗ് പ്രോജക്റ്റിന്റെ പ്രകടനം വളരെയധികം മെച്ചപ്പെടുത്തുന്നുവെന്ന് കാണാനാകും. നിന്റെ ടെററിയത്തിന് സ്റ്റൈൽ ചേർക്കാം. ## പൂർവ-പാഠം ക്വിസ് പൂർവ-പാഠം ക്വിസ് ## CSS-ൽ തുടക്കം കുറിക്കുക CSS സാധാരണയായി "സുന്ദരമാക്കൽ" എന്ന പോലെ കരുതപ്പെടുന്നു, എന്നാൽ അതിന് വളരെ വിപുലമായ ലക്ഷ്യമുണ്ട്. CSS ഒരു സിനിമാ ഡയറക്ടറിന്റെപോലെ ആണ് - നിൽക്ക് എല്ലാം എങ്ങനെയാണ് പ്രത്യക്ഷപ്പെടുക മാത്രമല്ല, എങ്ങനെയാണ് സഞ്ചരിക്കുക, ഇൻററാക്ഷനോട് എങ്ങനെയാണ് പ്രതികരിക്കുക, വ്യത്യസ്ത സാഹചര്യങ്ങളിൽ എങ്ങനെയാണ് സംയോജിപ്പിക്കുക എന്നും നിയന്ത്രിക്കാം. ആധുനിക CSS വളരെ ശേഷിയുള്ളതാണ്. ഫോൺ, ടാബ്ലറ്റ്, ഡെസ്ക്ടോപ്പ് കമ്പ്യൂട്ടറുകൾക്കായി ലേയൗട്ട് സ്വയം സജ്ജമാക്കുന്ന കുതിൾ ലേഖനം നിനക്ക് എഴുതാം. ഉപയോക്താക്കളുടെ ശ്രദ്ധക്ക് ആവശ്യമായ ഇടത്തേക്ക് നയിക്കുന്ന സ്മൂത്ത് അനിമേഷനുകൾ സൃഷ്ടിക്കാം. എല്ലാം ചേർന്ന് വളരെ പ്രഭാഷകരമായി കണ്ടു വരാം. ഈ പാഠത്തിൽ നാം നേടുന്നത്: - നിന്റെ ടെററിയത്തിന് ആധുനിക CSS സാങ്കേതികവിദ്യകൾ ഉപയോഗിച്ച് പൂർണ്ണമായ ദൃശ്യ രൂപകൽപ്പന സൃഷ്ടിക്കുന്നു - ആധികാരിക ആശയങ്ങൾ പഠിക്കുന്നു - കാസ്കേഡ്, പാരമ്പര്യം, CSS സെലക്ടറുകൾ - പ്രതികരണശീലമുള്ള പൊസിഷനിംഗ്, ലേയൗട്ട് തന്ത്രങ്ങൾ നടപ്പിലാക്കുന്നു - CSS ആകൃതികളും സ്റ്റൈലുകളും ഉപയോഗിച്ച് ടെററിയം കണ്ടെയ്നർ നിർമ്മിക്കുന്നു ### മുൻനിയമം നിനക്ക് മുമ്പത്തെ പാഠത്തിൽ നിന്നുള്ള ടെററിയത്തിന്റെ HTML ഘടന പൂർത്തിയാക്കിയിരിക്കണം, അതിന് സ്റ്റൈൽ നൽകാൻ തയ്യാറാകണം. ### നിന്റെ CSS ഫയൽ സജ്ജമാക്കൽ സ്റ്റൈലിംഗ് ആരംഭിക്കുന്നതിന് മുമ്പ്, CSS നു HTML-നോടു ബന്ധപ്പെടണം. ഈ ബന്ധം ബ്രൗസറിനു നിന്റെ ടെററിയത്തിന് വേണ്ട സ്റ്റൈലിംഗ് നിർദ്ദേശങ്ങൾ എവിടെയാണ് എന്ന് പറയുന്നു. നിന്റെ ടെററിയം ഫോൾഡറിൽ, style.css എന്ന പുതിയ ഫയൽ സൃഷ്ടിക്കൂ, പിന്നെ HTML ഡോക്യുമെന്റിലെ <head> സെക്ഷനിൽ ലിങ്ക് ചേർക്കൂ: ഈ കോഡ് ചെയ്യുന്നത്: - HTML-നും CSS ഫയലിനും ഇടയിൽ ഒരു ബന്ധം സൃഷ്ടിക്കുന്നു - ബ്രൗസറിനു style.css ല് നിന്നുള്ള സ്റ്റൈലുകൾ ലോഡ് ചെയ്ത് പ്രയോഗിക്കാൻ പറയുന്നു - rel="stylesheet" ഗുണം CSS ഫയൽ ആണ് എന്ന് നിർദ്ദേശിക്കുന്നു - href="./style.css" വഴി ഫയൽ പാത്ത് സൂചിപ്പിക്കുന്നു ## CSS കാസ്കേഡ് മനസ്സിലാക്കൽ എന്തിനാണ് CSS-നെ "കാസ്കേഡിംഗ്" സ്റ്റൈൽ ഷീറ്റുകൾ എന്നു വിളിക്കുന്നത്? സ്റ്റൈലുകൾ വെള്ളച്ചാട്ടം പോലെ താഴിറങ്ങും, കൽക്കിടയിൽ അവർ തമ്മിൽ സംഘർഷിക്കാം. സൈനിക കമാൻഡ് ഘടനകൾ പോലെ ചിന്തിക്കൂ - ജനറൽ ഓർഡർ "എല്ലാ സേന GREEN ഉടുത്ത്" എന്നു പറയും, എന്നാല് നിന്റെ യൂണിറ്റിന് പ്രത്യേക ഓർഡർ "അവാർഡ് സെറിമോനിയ്ക്ക് ഡ്രസ് ബ്ലൂസ് ധരിക്കുക" എന്ന് പറയാം. കൂടുതൽ പ്രത്യേകമായ നിർദ്ദേശം മുൻതൂക്കം നേടി. CSS ഇതുപോലെ പ്രവർത്തിക്കുന്നു, ഈ പരമാവധി മനസ്സിലാക്കുന്നത് ഡീബഗ്ഗിങ്ങ് വളരെ എളുപ്പമാക്കും. ### കാസ്കേഡ് മുൻഗണനയെപ്പറ്റി പരീക്ഷണം നടത്തുക കാസ്കേഡ് പ്രവർത്തനം കാണുവാൻ സ്റ്റൈൽ സംഘർഷം സൃഷ്ടിക്കാം. ആദ്യം <h1> ടാഗിൽ ഇൻലൈൻ സ്റ്റൈൽ ചേർക്കൂ: ഈ കോഡ് ചെയ്യുന്നത്: - <h1> എലമെന്റിന് നേരിട്ട് ചുവപ്പ് നിറം നൽകുന്നു ഇൻലൈൻ സ്റ്റൈൽ ഉപയോഗിച്ച് - style ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് CSS HTML നെ അഭിസംബോധനം ചെയ്യുന്നു - ഈ പ്രത്യേക നീതിനിയമത്തിന് ഏറ്റവും ഉയർന്ന മുൻഗണന സൃഷ്ടിക്കുന്നു അടുത്തത്, നിന്റെ style.css ഫയലിൽ താഴെ കാണുന്ന നിയമം ചേർക്കൂ: മുകളിൽ നാം: - എല്ലാ <h1> എലമെന്റുകൾക്ക് CSS നിയമം നിർവചിച്ചു - ബാഹ്യ സ്റ്റൈൽഷീറ്റിൽ നീല നിറമാക്കി ടെക്സ്റ്റ് നിറം സജ്ജമാക്കി - ഇൻലൈൻ സ്റ്റൈൽസിന തികച്ചും കുറഞ്ഞ മുൻഗണന സൃഷ്ടിച്ചു ✅ ജ്ഞാനപരിശോധന: നിന്റെ വെബ് ആപ്പിൽ ഏതു നിറമാണ് പ്രത്യക്ഷപ്പെടുന്നത്? എന്തുകൊണ്ട് ആ നിറം ജയിക്കുന്നുവെന്ന് വിശകലനം ചെയ്യുക? സ്റ്റൈലുകൾ മറികടക്കേണ്ട സാഹചര്യങ്ങൾ ഉണ്ടാക്കാമോ? ## CSS പാരമ്പര്യം പ്രവർത്തനം CSS പാരമ്പര്യം ജൈവവശേഷിയുപോലെയാണ് — ഏതാനും പ്രോപ്പർട്ടികൾ മാതൃ എലമെന്റുകളിൽ നിന്നു പകർന്നു കിട്ടുന്നു. ഉദാഹരണത്തിന്, ബോഡിയുടെ ഫോണ്ട് ഫാമിലി സജ്ജമാക്കിയാൽ, അകത്ത് ഉള്ള എല്ലാ ടെക്സ്ടുകളും സ്വയം ആ ഫോണ്ട് ഉപയോഗിക്കും. ഇത് ഹാബ്സ്ബർഗ് കുടുംബത്തിന്റെ പ്രത്യേക ജോലിൻ പോലെയാണ്, ഓരോ തലമുറയ്ക്കും വ്യക്തമായിരുന്നു, വ്യക്തിക്ക് പ്രത്യേകമായി പറയാതെ. എന്നാൽ എല്ലാം പാരമ്പര്യമല്ല. ടെക്സ്റ്റ് സ്റ്റൈലുകൾ (ഫോണ്ട്, നിറങ്ങൾ) പാരമ്പര്യം കൈവരിക്കുമ്പോൾ, ലേയൗട്ട് സ്വഭാവങ്ങൾ (മാർജിൻ, ബോർഡർ) പാരമ്പര്യമല്ല. കുട്ടികൾ മാതാപിതാക്കളുടെ ഫാഷൻ ഇഷ്ടങ്ങൾ പകർത്താതെ ശരീരഗുണങ്ങൾ പകർത്തുന്നതുപോലെ. ### ഫോണ്ട് പാരമ്പര്യം കാണുക <body> എലമെന്റിന് ഫോണ്ട് ഫാമിലി സജ്ജമാക്കുക: ഇവിടെ സംഭവിക്കുന്നത്: - <body> ലക്ഷ്യമിട്ട് പേജിന്റെ മൊത്തം ഫോണ്ട് ഫാമിലി സെറ്റ് ചെയ്യുന്നു - മികച്ച ബ്രൗസർ പൊരുത്തത്തിനായി ഫാൾബാക്ക് ഉൾപ്പെടെയുള്ള ഫോണ്ട് സ്റ്റാക്ക് ഉപയോഗിക്കുന്നു - വ്യത്യസ്ത ഒഎസ്-കളിൽ മികച്ച ദൃശ്യപരതയ്ക്കായി ആധുനിക സിസ്റ്റം ഫോണ്ട് ഉപയോഗിക്കുന്നു - നിശ്ചയിച്ച് ഇല്ലാത്തപ്പോൾ എല്ലാ ചൈൽഡ് എലമെന്റുകളും ഫോണ്റ് പാരമ്പര്യം ഏറ്റെടുക്കുന്നു നിന്റെ ബ്രൗസറിന്റെ ഡിസ്ക്കമ്പോസർ ടൂൾസ് (F12) തുറക്കൂ, Elements ടാബ് തിരഞ്ഞെടുക്കൂ, <h1>-നെ പരിശോധിക്കൂ. ഇത് body-യിൽ നിന്നുള്ള ഫോണ്ട് ഫാമിലി പാരമ്പര്യമായി സ്വീകരിച്ചത് കാണാം: ✅ പരീക്ഷണമെടുത്ത് നോക്കൂ: <body>-യ്ക്ക് color, line-height, അല്ലെങ്കിൽ text-align പോലുള്ള മറ്റേതെങ്കിലും പാരമ്പര്യ സ്വഭാവങ്ങൾ സജ്ജമാക്കൂ. നിന്റെ തലക്കെട്ടിനും മറ്റ് എലമെന്റുകൾക്കും എന്ത് സംഭവിക്കുന്നു? ### 🔄 പാഠത്തിന്റെ അവലോകനം CSS അടിസ്ഥാന മനസ്സിലാക്കൽ: സെലക്ടറുകളിലേക്ക് മുന്നോട്ട് പോകുന്നതിന് മുൻപ് ഉറപ്പാക്കുക: - ✅ കാസ്കേഡും പാരമ്പര്യവും തമ്മിലുള്ള വ്യത്യാസം വ്യക്തമാക്കാൻ കഴിയുന്നു - ✅ പ്രത്യേകത സംഘർഷത്തിൽ ഏതു സ്റ്റൈൽ വിജയിക്കും ബോധ്യപ്പെടുത്താൻ കഴിയും - ✅ ഏത് പ്രോപ്പർട്ടികൾ പാരമ്പര്യം കൈവരിക്കുന്നുവെന്ന് തിരിച്ചറിയുന്നു - ✅ CSS ഫയലുകൾ HTML-നൊപ്പം ശരിയായി ബന്ധിപ്പിക്കുന്നു പെട്ടെന്നുള്ള പരിശോധന: ഈ സ്റ്റൈലുകൾ ഉണ്ടെങ്കിൽ, <div class="special"> ഉള്ളിൽ ഉള്ള <h1>-ന്റെ നിറം എന്താകും? ഉത്തരം: ചുവപ്പ് (എലമെന്റ് സെലക്ടർ നേരിട്ട് h1 നെ ലക്ഷ്യമിടുന്നു) ## CSS സെലക്ടറുകൾ നിമിഷപൂർവ്വം കൈകാര്യം ചെയ്യുക CSS സെലക്ടറുകൾ സവിശേഷ എലമെന്റുകൾക്ക് സ്റ്റൈൽ നൽകാനുള്ള നിനക്ക് വഴിയാണ്. "വീട്" എന്നു പറയുന്നതിനുപകരം, "മെപ്ല് സ്ട്രീറ്റിൽ റെഡ് വാതിൽ ഉള്ള നീല വീട്" എന്നതുപോലെ കൃത്യമായ മാർഗ്ഗനിർദ്ദേശമാണ്. CSS വിവിധ തരത്തിലുള്ള സെലക്ടറുകൾ നൽകുന്നു, ശരിയായ സെലക്ടർ തിരഞ്ഞെടുക്കുന്നത് ആവശ്യത്തിനുള്ള മികച്ച ഉപകരണം തിരഞ്ഞെടുക്കുന്നതിനോട് തുല്യമാണ്. ഇടയ്ക്കിടെ എല്ലാ കെട്ടിടത്തിലെ വാതിലുകൾക്കും സ്റ്റൈൽ നല്കണം, ചിലപ്പോഴപ്പോൾ മാത്രം ഒരു പ്രത്യേക വാതിലിനു മാത്രമേ. ### എലമെന്റ് സെലക്ടറുകൾ (ടാഗുകൾ) എലമെന്റ് സെലക്ടറുകൾ ടാഗ് നാമം അടിസ്ഥാനമാക്കി HTML എലമെന്റുകൾ ലക്ഷ്യമിടുന്നു. ഈ സെലക്ടർ പേജ് മുഴുവൻ വ്യാപകമായ അടിസ്ഥാന സ്റ്റൈൽ നല്കാൻ അനുയോജ്യമാണ്: ഈ സ്റ്റൈലുകൾ അത്രയ്ക്കായി: - പേജ് മുഴുവൻ ഏകീകൃത ടൈപ്പോഗ്രഫി കാണിക്കാൻ body സെലക്ടർ ഉപയോഗിക്കുന്നു - മികച്ച നിയന്ത്രണത്തിനായി ബ്രൗസറിന്റെ ഡീഫോൾട്ട് മാർജിനുകളും പാഡിംഗുകളും നീക്കം ചെയ്യുന്നു - എല്ലാ ഹെഡിംഗ് എലമെന്റുകളെയും നിറം, സന്ധി, അലൈന്മെന്റ് നൽകുന്നു - സ്കെയിലബിൾ, ആക്സസിബിൾ ഫോണ്ട് വലുപ്പത്തിന് rem യൂണിറ്റ് ഉപയോഗിക്കുന്നു എങ്കിലും, എലമെന്റ് സെലക്ടറുകൾ സാധാരണ സ്റ്റൈലിംഗിന് നല്ലതായിരിക്കുമ്പോൾ, ഓരോ ടെററിയം ചെടികൾ പോലുള്ള പ്രത്യേക ഘടകങ്ങൾക്ക് കൂടുതൽ പ്രത്യേക സെലക്ടറുകൾ ആവശ്യമായിരിക്കും. ### ഏകാന്ത എലമെന്റുകൾക്കായി ID സെലക്ടറുകൾ ID സെലക്ടറുകൾ # ചിഹ്നം ഉപയോഗിച്ച് പ്രത്യേക id ഉള്ള എലമെന്റുകളെ ലക്ഷ്യമിടുന്നു. പേജിൽ ഓരോ ID ഒറ്റത്തവണ മാത്രം ഉപയോഗിക്കണം, അതിനാൽ പ്രത്യേകം പ്രത്യേക ഘടകങ്ങൾക്ക് (ഉദാ: ടെററിയത്തിന്റെ ഇടത്തും വലത്തും ഉള്ള ചെടി കണ്ടെയ്നറുകൾ) ഇവ നല്ലതാണ്. ടെററിയത്തിലെ സൈഡ് കണ്ടെയ്നറുകൾ എവിടെ ചെടികൾ താമസിക്കും, അവയ്ക്ക് വേണ്ടി സ്റ്റൈലിംഗ് തീർക്കാം: ഇവിടെ സംഭവിക്കുന്നത്: - absolute പൊസിഷനിംഗുമായി കണ്ടെയ്നറുകൾ ഇടത്തും വലത്തും നീക്കുന്നു - സ്ക്രീൻ വലിപ്പത്തിന് അനുസരിച്ച് vh (viewport height) യൂണിറ്റിൽ ഉയരം നൽകുന്നു - പാഡിംഗിൽ ഉൾപ്പെടുത്തിയവയ്ക്ക് box-sizing: border-box ഉപയോഗിക്കുന്നു - സോഴ്യമായ ജൂലിയൻ മൂല്യങ്ങളിൽ നിന്നുള്ള px യൂണിറ്റുകൾ നീക്കി ലക്ഷ്യമിടുന്നു - കഠിനമായ കറുപ്പുപകരം കണ്ണിന് ഇതിന് സൗകര്യമുള്ള സബ്റ്റിൽ പശ്ചാത്തല നിറം നൽകുന്നു ✅ കോഡ് ഗുണമേന്മ പരിശോധന: ഈ CSS DRY (Don't Repeat Yourself) നിയമം ലംഘിക്കുന്നതാണ് കാണുന്നത്. ഒരു ID ഒപ്പം ക്ലാസ് ഉപയോഗിച്ച് ഇത് പുനഃസംഘടിപ്പിക്കാമോ? മികച്ച സമരയോഗം: ### പുനരുപയോഗപ്പെടുത്താവുന്ന ഘടകങ്ങൾക്ക് ക്ലാസ് സെലക്ടറുകൾ ക്ലാസ് സെലക്ടറുകൾ . ചിഹ്നം ഉപയോഗിച്ച് ഒടുക്കം ഒരു മുതിർന്ന ഇലമെന്റിന് പലത്തവണ സ്റ്റൈലുകൾ പ്രയോഗിക്കാം. ID-കളുടെ വ്യത്യാസം, ക്ലാസുകൾ പേജിലുടനീളം വീണ്ടും ഉപയോഗിച്ചേക്കാം, അതുകൊണ്ട് സ്ഥിരമായ സ്റ്റൈലിംഗ് മാതൃകകൾക്കായി ഇവ ഏറ്റവും അനുയോജ്യമാണ്. നമ്മുടെ ടെററിയത്തിൽ ഓരോ ചെടിക്കും സമാനമായ സ്റ്റൈലിംഗ് ആവശ്യമായിരിക്കുന്നു എങ്കിലും വ്യക്തിഗത പൊസിഷനിംഗ് വേണം. നാം പുനരുപയോഗ ക്ലാസ്സുകളും ID-യും സംയോജിപ്പിച്ച് ഉപയോഗിക്കാം. ഓരോ ചെടിക്കും വേണ്ട HTML ഘടന: പ്രധാന ഘടകങ്ങൾ: - എല്ലാ ചെടികൾക്കുമുള്ള പൊസിഷൻ കൺട്രോൾ ചെയ്യാൻ class="plant-holder" ഉപയോഗിക്കുന്നു - ചിത്രത്തിനും പെരുമാറ്റത്തിനും class="plant" നൽകുന്നു - ഓരോ ചെടിക്കും വ്യത്യസ്ത പൊസിഷനിംഗിനും ജാവാസ്ക്രിപ്റ്റ് ഉൾപെടുത്തലിനും വ്യത്യസ്ത ID id="plant1" ഉപയോഗിക്കുന്നു - സ്ക്രീൻ റീഡർ സൗഹൃദം ഉറപ്പാക്കാൻ വിവരണപരമായ alt ടെക്സ്റ്റ് നൽകുന്നു ഇപ്പൊഴിത് നിന്റെ style.css ഫയലിൽ വേറെ സ്റ്റൈലുകൾ ചേർക്കൂ: ഈ സ്റ്റൈലുകൾ വിശദീകരിക്കുക: - plant-holder-ന് relative പൊസിഷനിംഗ് വഴി പൊസിഷനിംഗ് കോൺടെക്സ്റ്റ് ഒരുക്കുന്നു - ഓരോ plant-holder-നും 13% ഉയരം നൽകുന്നു, ചെടികൾ സ്ക്രോൾ ഇല്ലാതെ വീതിയിൽ പൊരുത്തപ്പെടും - plant-holder ലെHolder-നെ കുറെ ഇടത്തേക്ക് മാറ്റി ചെടികളെ കൂടുതൽ കൃത്യമായി മദ്ധ്യസ്ഥമാക്കുന്നു - max-width max-height ഉപയോഗിച്ച് ചെടികൾ പ്രതികരണശീലമായി സ്കെയിൽ ചെയ്യാനാവും - z-index ഉപയോഗിച്ച് ടെററിയത്തിലെ മറ്റു ഘടകങ്ങളെ മുകളിൽ വയ്ക്കുന്നു - CSS ട്രാനുംഷനുകൾ വഴി സാവധാനമായ ഹോവർ ഇഫക്റ്റ് ചേർക്കുന്നു ✅ ആവശ്യക്കാഴ്ച: .plant-holder ഉം .plant ഉം വേറിട്ടതിനുള്ള ആവശ്യകം എന്താണ്? വെറും ഒന്ന് മാത്രം ഉപയോഗിച്ചാൽ എന്താകും? ## CSS പൊസിഷനിംഗ് മനസ്സിലാക്കുക CSS പൊസിഷനിംഗ് ഒരു നാടകത്തിലെ സ്റ്റേജ് ഡയറക്ടറുടെ പോലെ - എല്ലാ അഭിനയക്കാരും എവിടെ നിൽക്കും, എങ്ങനെയാവരും എന്ന് നിർദ്ദേശിക്കുന്നു. ചില അഭിനേതാക്കൾ സാധാരണ നിലയിൽ നിന്നു പ്രവർത്തിക്കും, മറ്റുചിലർ പ്രത്യേക പൊസിഷനിംഗ് ആവശ്യമാണ്. പോസിഷനിംഗ് മനസ്സിലാക്കിയാൽ പല ലേയൗട്ട് പ്രശ്നങ്ങളും പരിഹരിക്കാം. സ്ക്രോൾ ചെയ്യുമ്പോഴും നാവിഗേഷൻ ബാർ മുകളിൽ തന്നെ നിലനിർത്തണം? അതിന് പൊസിഷനിംഗ് ഉപയോഗിക്കുക. നിശ്ചിത ഇടത്ത് ടൂള്ടിപ്പ് കാണിക്കണം? അതും പൊസിഷനിംഗ്. ### അഞ്ച് പൊസിഷൻ മൂല്യങ്ങൾ ### നമുക്ക് കിട്ടിയ ടെററിയത്തിൽ പൊസിഷനിംഗ് നമ്മുടെ ടെററിയം ഉദ്ദേശിച്ച ലേയൗട്ട് സൃഷ്ടിക്കാൻ പൊസിഷനിംഗ് മൂല്യങ്ങളുടെ സമന്വയം ഉപയോഗിക്കുന്നു: പോസിഷനിംഗ് തന്ത്രം: - Absolute കൺടെയ്നറുകൾ സ്വാഭാവിക ഫ്ലോയിൽ നിന്നും നീക്കം ചെയ്ത് സ്ക്രീൻ അരികുകളിൽ പിണ്ഡ് ചെയ്യുന്നു - Relative ചെടി holder-കൾ പൊസിഷനിംഗ് കോൺടെക്സ്റ്റ് സൃഷ്ടിക്കുന്നു, ഡോക്യുമെന്റ് ഫ്ലോയിൽ തുടരുന്നു - Absolute ചെടികൾ അവരുടെ relative holder-ലുള്ള കൃത്യമായ പൊസിഷനം നേടുന്നു - ഈ സംയോജനം ചെടികൾ കൂമ്പാരമായി മുകളിലേക്ക് ശ്രേണീകരിച്ച് വ്യക്തിഗത പൊസിഷനിംഗ് സാധ്യമാക്കുന്നു ✅ പരീക്ഷണം: പൊസിഷൻ മൂല്യങ്ങൾ മാറ്റി ഫലങ്ങൾ കാണൂ: - .container-ന് absolute ന്റെ പകരം relative നു മാറ്റിയാൽ സംഭവിക്കുന്നത് എന്താകും? - .plant-holder relative പകരം absolute ഉപയോഗിച്ചാൽ ലേയൗട്ട് എങ്ങനെയാണ് മാറുക? - .plant-നെ relative പോസിഷൻ ചെയ്യുമ്പോൾ എന്ത് സംഭവിക്കും? ### 🔄 പെടഗോഗിക്കൽ ചെക്ക്- ഇൻ CSS പോസിഷനിംഗ് മാസ്ററീ: നിങ്ങളുടെ മനസിലാക്കലുകൾ പരിശോധിക്കുക: - ✅ പ്ലാന്റുകൾക്ക് ഡ്രാഗ്-അൻഡ്-ഡ്രോപ്പ് സജ്ജമാക്കാൻ ആബ്സല്യൂട്ട് പോസിഷനിംഗ് എങ്ങനെ സഹായിക്കുന്നു എന്ന് വിശദീകരിക്കാമോ? - ✅ റീലേറ്റീവ് കോൺടൈനറുകൾ പോസിഷനിംഗ് കോൺടെക്സ്റ്റ് എങ്ങനെ സൃഷ്ടിക്കുന്നു എന്ന് മനസിലായോ? - ✅ സൈഡ് കോൺടൈനറുകൾ ആബ്സല്യൂട്ട് പോസിഷനിംഗ് ഉപയോഗിക്കുന്നത് എന്തുകൊണ്ട്? - ✅ പ്ലേസ്മന്റും പൊസിഷൻ ഡിക്ലറേഷനുകളും മാറിക്കളയുമ്പോൾ എന്ത് സംഭവിക്കും? യഥാർത്ഥ ലോക ബന്ധം: CSS-ലെ പോസിഷനിംഗ് യാഥാർത്ഥ്യത്തിലെ ലേയൗട്ടുമായി എങ്ങനെ പാരമ്പര്യമുള്ളതാണെന്ന് കാണുക: - സ്റ്റാറ്റിക്: മുറ്റത്തുള്ള പുസ്തകങ്ങൾ (സ്വാഭാവിക ക്രമം) - രീലേറ്റീവ്: ഒരു പുസ്തകം അല്പം നസുക്കിയെങ്കിലും അതിന്റെ സ്ഥാനം സൂക്ഷിക്കുക - ആബ്സല്യൂട്ട്: ഒരു മാർക്കർ കൃത്യമായ പേജിൽ സ്ഥാപിക്കൽ - ഫിക്സ്: വായിക്കുമ്പോൾ ചുരുളുന്ന സ്റ്റിക്കി നോട്ട് ## CSS ഉപയോഗിച്ച് ടെറിയം നിർമ്മാണം ഇപ്പോൾ CSS മാത്രം ഉപയോഗിച്ച് ഗ്ലാസ് ജാർ നിർമ്മിക്കാം - ചിത്രങ്ങൾ അല്ലെങ്കിൽ ഗ്രാഫിക്സ് സോഫ്റ്റ്വേർ ആവശ്യമില്ല. പോസിഷനിംഗ്, ട്രാൻസ്പറൻസി എന്നിവ ഉപയോഗിച്ച് യാഥാർത്ഥ്യസമമായ ഗ്ലാസ്, ഷാഡോസ്, ആഴം സൃഷ്ടിക്കുന്നത് CSS–ന്റെ ദൃശ്യശേഷിയെ കാണിക്കുന്നു. ബൗഹൗസ് പ്രസ്ഥാനത്തിലെ ആർക്കിടെക്റ്റുകൾ എങ്ങനെ ലളിതമായ ജ്യാമിതീയ രൂപങ്ങൾ ഉപയോഗിച്ച് സങ്കീർണ്ണവും മനോഹരവുമായ ഘടനകൾ സൃഷ്ടിച്ചു എന്ന പോലെ, ഈ സിദ്ധാന്തങ്ങൾ മനസിലാക്കിയാൽ നീ רבות വെബ് ഡിസൈനുകളിലെ CSS സാങ്കേതിക വിദ്യ തിരിച്ചറിയാം. ### ഗ്ലാസ്സ് ജാർ ഘടകങ്ങൾ ഉണ്ടാക്കൽ ടെറിയം ജാറിന്റെ ഘടകങ്ങൾ ഓരോന്നായി ഉണ്ടാക്കാം. ഓരോ ഭാഗവും ആബ്സല്യൂട്ട് പോസിഷനിംഗ് ഉപയോഗിക്കുകയും ശതമാനത്തിലുള്ള അളവുകൾ ഉപയോഗിച്ച് റെസ്പോമ്സീവ് ഡിസൈൻ ഉറപ്പുവരുത്തുകയും ചെയ്യുന്നു: ടെറിയം നിർമ്മിതിയുടെ അറിവ്: - സ്ക്രീൻ വലുപ്പങ്ങളിൽ രേഖാത്മകമായ സ്കെയ്ലിംഗിന് ശതമാന അടിസ്ഥാനത്തിലുള്ള അളവുകൾ ഉപയോഗിക്കുന്നു - ഘടകങ്ങളെ കൃത്യമായി ചേർക്കാനും ക്രമീകരിക്കാനും ആബ്സല്യൂട്ട് പോസിഷനിംഗ് ഉപയോഗിക്കുന്നു - ഗ്ലാസ് ട്രാൻസ്പറൻസി ഫലത്തിനായി വ്യത്യസ്ത ഒപ്പസിറ്റി മൂല്യങ്ങൾ നോക്കുന്നു - വനaspാപങ്ങൾ ജാറിന് ഉള്ളിൽ കാണാനും z-index ലെയർ ചെയ്യുന്നു - യഥാർത്ഥത കൂടിയ എഫക്ടിനായി നേർത്ത ബോക്സ് ഷാഡോയും ബോർഡർ-റേഡിയസും കൂട്ടിക്കുന്നു ### ശതമാന അടിസ്ഥാനത്തിലുള്ള റെസ്പോൺസീവ് ഡിസൈൻ എല്ലാ അളവുകളും പിക്സൽ സ്ഥിരമല്ല, ശതമാനമാണ് ഉപയോഗിക്കുന്നത്: കാര്യതമ്യം: - എന്ത് വലുപ്പമുള്ള സ്ക്രീനിലും ടെറിയം ശരിയായി സ്കെയിൽ ചെയ്യാൻ സഹായിക്കുന്നു - ജാർ ഘടകങ്ങൾ തമ്മിലുള്ള ദൃശ്യ ബന്ധം നിലനിർത്തുന്നു - മൊബൈൽ ഫോണിൽ നിന്നും വലിയ ഡെസ്ക്ക്ടോപ്പ് മോണിറ്ററുകൾ വരെ സമാന അനുഭവം നൽകുന്നു - ശൈലി തുടർന്നും തകർക്കാതെ അനുയോജ്യമായി ഒത്തുചേരാൻ സാധിക്കുന്നു ### CSS ഘടകങ്ങളുടെ പ്രവർത്തനം rem യൂണിറ്റുകൾ ബോർഡർ-റേഡിയസിനായി ഉപയോഗിക്കുന്നതാണ്, ഇത് റൂട്ട് ഫോണ്ട് സൈസിനെ അടിസ്ഥാനമാക്കി സ്കെയിൽ ചെയ്യുന്നു. ഇത് ഉപയോക്താക്കളുടെ ഫോണ്ട് ഇഷ്ടാനുസരണം രോഗിപോകുന്നതിന് അനുയോജ്യമാണ്. കൂടുതൽ പഠിക്കാൻ CSS.Relative Units സന്ദർശിക്കുക. ✅ ദൃശ്യപര പരീക്ഷണം: താഴെ പറയുന്ന മൂല്യങ്ങൾ മാറ്റി കാണൂ: - ജാറിന്റെ ഒപ്പസിറ്റി 0.5-ൽനിന്ന് 0.8-ലേക്ക് മാറ്റുക – ഗ്ലാസ് എങ്ങനെ മാറുന്നു? - മണ്ണിന്റെ നിറം #3a241d-നിന്ന് #8B4513-ലേക്ക് മാറ്റുക – ദൃശ്യപരമായി എന്ത് വ്യത്യാസം കാണുന്നു? - മണ്ണിന്റെ z-index 2 ആക്കി മാറ്റുക – ലെയറിംഗ് എങ്ങനെയാണ് മാറുന്നത്? ### 🔄 പെഡഗോഗിക്കൽ ചെക്കിൻ CSS ദൃശ്യ ഡിസൈൻ മനസ്സിലാക്കൽ: നിങ്ങളുടെ അറിവ് സ്ഥിരീകരിക്കുക: - ശതമാന അടിസ്ഥാനത്തിലുള്ള അളവുകൾ റെസ്പോൺസീവ് ഡിസൈൻ എങ്ങനെ സൃഷ്ടിക്കുന്നു? - ഒപ്പസിറ്റി ഗ്ലാസ് ട്രാൻസ്പറൻസി എങ്ങനെ ഉണ്ടാക്കുന്നു? - ലെയറിങ്ങിൽ z-index എന്ത് പങ്കുവഹിക്കുന്നു? - ബോർഡർ-റേഡിയസ് മൂല്യങ്ങൾ ജാർ ആകൃതി എങ്ങനെ സൃഷ്ടിക്കുന്നു? ഡിസൈൻ സിദ്ധാന്തം: ലളിതമായ രൂപങ്ങളിൽ നിന്ന് സങ്കീർണ്ണ ദൃശ്യങ്ങളുണ്ടാകുന്നത് ശ്രദ്ധിക്കുക: 1. റെക്റ്റേംഗിളുകൾ → റൗണ്ടഡ് റെക്റ്റേംഗിളുകൾ → ജാർ ഘടകങ്ങൾ 2. സാധാരണ നിറങ്ങൾ → ഒപ്പസിറ്റി → ഗ്ലാസ് ഇഫക്ട് 3. വ്യക്തിഗത ഘടകങ്ങൾ → ലെയേർ ചെയ്ത ഘടന → 3D ദൃശ്യപ്രഭാവം --- ## GitHub Copilot ഏജന്റ് ചാലഞ്ച് 🚀 ഏജന്റ് മോഡ് ഉപയോഗിച്ച് താഴെയുള്ള ചാലഞ്ച് പൂർത്തിയാക്കുക: വിവരണം: ടെറിയത്തിലെ സസ്യങ്ങൾ സ്വാഭാവിക ഗాలിയുടെ സുവിശേഷം പോലെ ഹൃദയസ്പർശിയായപ്പോൾ മുമ്പ്-പിന്നിലേക്ക് അലഞ്ഞു നടക്കാൻ CSS ആനിമേഷൻ സൃഷ്ടിക്കുക. CSS ആനിമേഷനുകൾ, ട്രാൻസ്ഫോംസ്, കീഫ്രെയിംസ് അഭ്യാസം ചെയ്യാൻ ഇത് സഹായിക്കും കൂടാതെ ടെറിയം ദൃശ്യശോഭ വർധിപ്പിക്കും. പ്രോംപ്റ്റ്: ടെറിയത്തിലെ സസ്യങ്ങൾ ഇളംമറയുന്ന തരത്തിൽ മുന്നേയ്ക്കും പിൻവാങ്ങിയും അലഞ്ഞു നടക്കാൻ CSS കീഫ്രെയിം ആനിമേഷൻ ചേർക്കുക. ഓരോ സസ്യവും (2-3 ഡിഗ്രി) നേരെ ഇടത്തും വലത്തും തിരിയുന്ന 3-4 സെക്കൻഡ് ദൈർഘ്യമുള്ള സ്വേയിങ് ആനിമേഷൻ സൃഷ്ടിച്ച് .plant ക്ലാസ്സിന് നൽകുക. ആനിമേഷൻ നിർവഹിച്ചു ഇൻഫിനിറ്റ് ലൂപ്പ് ചെയ്യുകയും പ്രകൃതിദൃശ്യ ചലനത്തിനായി ഈസിങ്ങ് ഫങ്ഷൻ ഉപയോഗിക്കുകയും ചെയ്യണം. കൂടുതൽ വിവരങ്ങൾക്ക് ഏജന്റ് മോഡ് സന്ദർശിക്കുക. ## 🚀 ചാലഞ്ച്: ഗ്ലാസ് പരിഭ്രംശങ്ങൾ കൂട്ടുക റിയലിസ്റ്റിക് ഗ്ലാസ് പരിഭ്രംശങ്ങൾ जोड़ാൻ തയ്യാറാവൂ? ഇത് ഡിസൈൻക്ക് ഗാഢതയും യാഥാർത്ഥ്യവും നൽകും. കുറച്ച് വെളുത്ത അല്ലെങ്കിൽ ഏകദേശം വെളിച്ചമുള്ള ഒവൽ ആകൃതികൾ സൃഷ്ടിക്കുക, ജാറിന്റെ ഇടത് ഭാഗത്ത് നിർദ്ദേശിത സ്ഥാനങ്ങളിൽ വைக்கുക. യഥാർത്ഥതയുള്ള വെളിച്ചം പ്രതിഫലിപ്പിക്കുന്നതിനായി അനുയോജ്യമായ ഒപ്പസിറ്റി, ബ്ലർ എഫക്ടുകൾ പ്രയോഗിക്കുക. ഓർഗാനിക് ബബിള് ആകൃതികൾക്കായി border-radius ഉപയോഗിക്കുക. മികച്ച യഥാർത്ഥതക്കായി ഗ്രേഡിയന്റ് അല്ലെങ്കിൽ ബോക്സ്-ഷാഡോസ് പരീക്ഷിക്കുക. ## പൂർവ്വ ലക്ചർ ക്വിസ് Post-lecture quiz ## നിങ്ങളുടെ CSS അറിവ് വികസിപ്പിക്കുക ആദ്യമായി CSS ചിലപ്പോൾ സങ്കീർണ്ണമായിരിക്കാം, എന്നാൽ ഈ അടിസ്ഥാന സിദ്ധാന്തങ്ങൾ മനസിലാക്കുന്നത് ഉയർന്ന തലത്തിലുള്ള സാങ്കേതിക വിദ്യകൾക്ക് നല്ല അടിസ്ഥാനം നൽകുന്നു. നിങ്ങളുടെ അടുത്ത CSS പഠന മേഖലകൾ: - ഫ്ലെക്സ്ബോക്സ് - ഘടകങ്ങളുടെ അലൈന്മെന്റും വിതരണവും ലളിതമാക്കുന്നു - CSS ഗ്രിഡ് - സങ്കീർണ്ണ ലേയൗട്ടുകൾ സൃഷ്ടിക്കാൻ ശക്തമായ ഉപകരണങ്ങൾ നൽകുന്നു - CSS വേരിയബിള്സ് - പുനരാവർത്തനത്തിനെ കുറയ്ക്കുകയും നിലനിർത്തലും മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു - റെസ്പോൺസീവ് ഡിസൈൻ - വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളിൽ സൈറ്റുകൾ പ്രവർത്തിക്കുന്നതായി ഉറപ്പാക്കുന്നു ### ഇന്ററാക്ടീവ് ലേണിംഗ് സ്രോതസുകൾ ഈ ആശയങ്ങൾ പ്രായോഗികമായി അഭ്യാസിക്കാം ഈ രസകരമായ ഗെയിമുകൾ വഴി: - 🐸 Flexbox Froggy - രസകരമായ ചാലഞ്ചുകൾ വഴി ഫ്ലെക്സ്ബോക്സ് പഠിക്കുക - 🌱 Grid Garden - CSS ഗ്രിഡ് പരിശീലനം വെച്ച കർഷിണി വളർത്തുക - 🎯 CSS Battle - CSS കഴിവുകൾ കോഡിംഗ് ചാലഞ്ചുകളിൽ പരീക്ഷിക്കുക ### അധിക പഠനം CSS അടിസ്ഥാനപരമായും വിശദമായും പഠിക്കാനുള്ള ഈMicrosoft Learn മോഡ്യൂൾ പൂർത്തിയാക്കുക: Style your HTML app with CSS ### ⚡ നിമിഷം 5-ൽ ചെയ്യാനുള്ളത് - [ ] ഡെവ്ടൂൾസ് തുറന്ന് Elements പാനലിൽ വെബ്സൈറ്റിലെ CSS സ്റ്റൈലുകൾ പരിശോധിക്കുക - [ ] ലളിതമായ CSS ഫയൽ ഉണ്ടാക്കി HTML പേജുമായി ലിങ്ക് ചെയ്യുക - [ ] നിറം മാറ്റാൻ തെളിയിക്കാം: ഹെക്സ്, RGB, പേരിട്ട നിറങ്ങൾ എന്നിവ ഉപയോഗിക്കുക - [ ] പാഡിംഗും മാർജിനും ചേർത്ത് ബോക്സ് മോഡൽ അഭ്യാസിക്കുക ### 🎯 ഈ മണിക്കൂർ ചെയ്യാൻ സാധിക്കുന്ന കാര്യങ്ങൾ - [ ] പോസ്റ്റ്-ലെഷൻ ക്വിസ് പൂർത്തിയാക്കി CSS അടിസ്ഥാനങ്ങൾ അവലോകനം ചെയ്യുക - [ ] HTML പേജ് ഫോണ്റ്, നിറം, ശൂന്യത എന്നിവ കൊണ്ട് സ്റ്റൈൽ ചെയ്യുക - [ ] ഫ്ലെക്സ്ബോക്സോ ഗ്രിഡ് ഉപയോഗിച്ച് ലളിതമായ ലേയൗട്ട് സൃഷ്ടിക്കുക - [ ] CSS ട്രാൻസിഷനുകൾ പരീക്ഷിച്ച് സ്മൂത്ത് എഫക്ടുകള് ആസ്വദിക്കുക - [ ] മീഡിയ ക്വയറികളിലൂടെ റെസ്പോൺസീവ് ഡിസൈനിൽ അഭ്യാസം നടത്തുക ### 📅 നിങ്ങളുടെ ആഴ്ച നീണ്ട CSS സാഹസം - [ ] സൃഷ്ടിപരമായ രീതിയിൽ ടെറിയം സ്റ്റൈലിംഗ് അസൈൻമെന്റ് പൂർത്തിയാക്കുക - [ ] ഫോട്ടോ ഗാലറി ലേയൗട്ട് നിർമാണത്തിന് CSS ഗ്രിഡ് മ-striped - [ ] CSS ആനിമേഷനുകൾ പഠിച്ച് ഡിസൈൻകൾക്ക് ജീവൻ നൽകുക - [ ] SASS, LESS പോലുള്ള CSS പ്രീപ്രോസസ്സറുകൾ അന്വേഷിക്കുക - [ ] ഡിസൈൻ തത്ത്വങ്ങൾ പഠിച്ച് CSS- ൽ പ്രയോഗിക്കുക - [ ] ആസ്വദനീയമായ ഡിസൈനുകൾ അനാലൈസ് ചെയ്ത് പുനഃസംസ്കരണം ചെയ്യുക ### 🌟 നിങ്ങളുടെ മാസം നീണ്ട ഡിസൈൻ മാസ്റ്ററി - [ ] സമ്പൂർണ റെസ്പോൺസീവ് വെബ്സൈറ്റ് ഡിസൈൻ സിസ്റ്റം നിർമ്മിക്കുക - [ ] CSS-IN-JS അല്ലെങ്കിൽ utility-first ഫ്രെയിംവർക്കുകൾ (Tailwind) പഠിക്കുക - [ ] CSS മെച്ചപ്പെടുത്തലുകൾ കൊണ്ട് ഓപ്പൺ സോഴ്സ് പ്രോജക്റ്റുകളിൽ പങ്കുചേരുക - [ ] CSS കസ്റ്റം പ്രോപ്പർട്ടീസും containment പോലുള്ള ആധുനിക ആശയങ്ങളില് മ-striped - [ ] മോഡുലാർ CSS ഉപയോഗിച്ച് പുനരുപയോഗയോഗ്യമായ 컴്പോണെന്റ് ലൈബ്രറികൾ സൃഷ്ടിക്കുക - [ ] പുതുതായി CSS പഠിക്കുന്നവരെ മോർഗനൈസുചെയ്യുകയും ഡിസൈൻ അറിവ് പങ്കിടുകയുമാണ് ## 🎯 നിങ്ങളുടെ CSS മാസ്റ്ററി ടൈംലൈൻ ### 🛠️ നിങ്ങളുടെ CSS ഉപകരണപ്പെട്ടി സംഗ്രഹം ഈ പാഠം പൂർത്തിയാക്കിയതിനു ശേഷം, നിങ്ങക്കുണ്ട്: - കാസ്കേഡ് മനസ്സിലാക്കൽ: സ്റ്റൈലുകൾ എങ്ങനെ ഒരുമിച്ച് വമ്പിച്ചു അതിരുകളെ മറികടക്കുന്നു - സെലക്ടർ മാസ്റ്ററി: ഏലമെന്റുകൾ, ക്ലാസ്സുകൾ, ഐഡിയーズ വഴി കൃത്യമായ ലക്ഷ്യമിടൽ - പോസിഷനിംഗ് നൈപുണ്യം: ഘടകങ്ങളുടെ സമർത്ഥമായ സ്ഥാനമാറ്റവും ലെയറിങ്ങും - ദൃശ്യമാന ഡിസൈൻ: ഗ്ലാസ് ഇഫക്ട്, ഷാഡോസ്, ട്രാൻസ്പറൻസി സൃഷ്ടിക്കൽ - റെസ്പോൺസീവ് സാങ്കേതിക വിദ്യകൾ: ഏതൊരു സ്ക്രീനിലും പൊരുത്തപ്പെടുന്ന ശതമാന അടിസ്ഥാന ലേയൗട്ട് - കോഡ് സംഘടന: ശുചിത്വം പാലിച്ച, നിലതിരുന്നതുമായ CSS ഘടന - ആധുനിക പ്രയോഗങ്ങൾ: റിലേറ്റീവ് യൂണിറ്റുകളും ആക്സസിബിൾ ഡിസൈൻ പാറ്റേണുകളും ഉപയോഗിക്കൽ അടുത്തു ചെയ്യേണ്ടത്: ടെറിയത്തിന് ഇപ്പോൾ ഘടന (HTML) കൂടാതെ സ്റ്റൈൽ (CSS) ഉണ്ട്. അവസാന പാഠത്തിൽ ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ഇന്ററാക്ടിവിറ്റിഫ് കൂട്ടും! ## അസൈൻമെന്റ് CSS Refactoring --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> വിമര്ശനം: ഈ ദസ്താവേജ് AI പരിഭാഷ സേവനം Co-op Translator ഉപയോഗിച്ച് പരിഭാഷ ചെയ്തതാണ്. നാം പരിഭാഷയുടെ കൃത്യതയ്ക്ക് ശ്രമിക്കുമ്പോഴും, സ്വയംമാറ്റത്തിലുള്ള പരിഭാഷകളിൽ പിശകുകളും അകൃത്യതകളും ഉണ്ടാകാമെന്നത് ശ്രദ്ധിക്കുക. ജന്മഭാഷയിലുള്ള originele ദസ്താവേ俺也去 അധികാരמקൂലം കണക്കാക്കണം. പ്രധാനപ്പെട്ട വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ പരിഭാഷ ശിപാർശ ചെയ്യപ്പെടുന്നു. ഈ പരിഭാഷയുടെ ഉപയോഗത്തിലുണ്ടാകുന്ന ഏതെങ്കിലും തെറ്റിദ്ധാരണക്കോ തെറ്റായ വ്യാഖ്യാനത്തൊഴിച്ചുകൂടി ഞങ്ങൾ ഉത്തരവാദിത്വം വരുത്തുകയില്ല. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
टेरॅरियम प्रकल्प भाग 1: HTML ची ओळख
HTML, म्हणजेच हायपरटेक्स्ट मार्कअप भाषा, ही तुम्ही कधीही भेट दिलेल्या प्रत्येक वेबसाइटची पायाभूत रचना आहे. HTML ला वेब पृष्ठांचे सांगाडा म्हणून विचार करा – ते सामग्री कुठे जाते, ती कशी आयोजित केली जाते आणि प्रत्येक भाग काय दर्शवतो हे परिभाषित करते. CSS नंतर तुमच्या HTML ला रंग आणि लेआउटसह "सजवेल", आणि JavaScript त्याला परस्परसंवादी बनवेल, HTML ही मूलभूत रचना प्रदान करते ज्यामुळे बाकी सर्व शक्य होते. या धड्यात, तुम्ही आभासी टेरॅरियम इंटरफेससाठी HTML रचना तयार कराल. हा प्रकल्प तुम्हाला मूलभूत HTML संकल्पना शिकवेल आणि काहीतरी आकर्षक तयार करायला शिकवेल. तुम्ही सामग्रीला अर्थपूर्ण घटकांमध्ये कसे आयोजित करायचे, प्रतिमांसोबत कसे काम करायचे आणि परस्परसंवादी वेब अनुप्रयोगासाठी पाया कसा तयार करायचा हे शिकाल. या धड्याच्या शेवटी, तुम्ही वनस्पतींच्या प्रतिमा व्यवस्थित स्तंभांमध्ये प्रदर्शित करणारे कार्यरत HTML पृष्ठ तयार केले असेल, जे पुढील धड्यात शैलीसाठी तयार असेल. सुरुवातीला ते मूलभूत दिसत असल्यास काळजी करू नका – CSS दृश्यात्मक आकर्षण जोडण्यापूर्वी HTML नेमके तेच करायला हवे. ## प्री-लेक्चर क्विझ प्री-लेक्चर क्विझ ## तुमचा प्रकल्प सेट अप करणे HTML कोडमध्ये जाण्यापूर्वी, तुमच्या टेरॅरियम प्रकल्पासाठी योग्य कार्यक्षेत्र सेट अप करूया. सुरुवातीपासूनच व्यवस्थित फाइल संरचना तयार करणे ही एक महत्त्वाची सवय आहे जी तुमच्या वेब विकास प्रवासात तुम्हाला चांगली सेवा देईल. ### कार्य: तुमची प्रकल्प संरचना तयार करा तुम्ही तुमच्या टेरॅरियम प्रकल्पासाठी एक समर्पित फोल्डर तयार कराल आणि तुमची पहिली HTML फाइल जोडाल. तुम्ही वापरू शकता अशा दोन पद्धती येथे आहेत: पर्याय 1: व्हिज्युअल स्टुडिओ कोड वापरणे 1. व्हिज्युअल स्टुडिओ कोड उघडा 2. "File" → "Open Folder" वर क्लिक करा किंवा Ctrl+K, Ctrl+O (Windows/Linux) किंवा Cmd+K, Cmd+O (Mac) वापरा 3. terrarium नावाचा नवीन फोल्डर तयार करा आणि निवडा 4. Explorer पॅनमध्ये, "New File" आयकॉनवर क्लिक करा 5. तुमच्या फाइलचे नाव index.html ठेवा पर्याय 2: टर्मिनल कमांड्स वापरणे या कमांड्सने काय साध्य होते: - नवीन डिरेक्टरी तयार करते ज्याचे नाव terrarium आहे - टेरॅरियम डिरेक्टरीमध्ये जाते - रिक्त index.html फाइल तयार करते - फाइल संपादित करण्यासाठी व्हिज्युअल स्टुडिओ कोडमध्ये उघडते ## HTML दस्तऐवज रचना समजून घेणे प्रत्येक HTML दस्तऐवज विशिष्ट रचनेचे अनुसरण करतो ज्याला ब्राउझर योग्य प्रकारे समजून घेण्यासाठी आणि प्रदर्शित करण्यासाठी आवश्यक असते. या रचनेला औपचारिक पत्रासारखे विचार करा – त्यात विशिष्ट क्रमाने आवश्यक घटक असतात जे प्राप्तकर्ता (या प्रकरणात, ब्राउझर) सामग्री योग्य प्रकारे प्रक्रिया करण्यास मदत करतात. चला प्रत्येक HTML दस्तऐवजाला आवश्यक असलेला मूलभूत पाया जोडण्यास सुरुवात करूया. ### DOCTYPE घोषणा आणि मूळ घटक HTML फाइलच्या पहिल्या दोन ओळी ब्राउझरला दस्तऐवजाची "ओळख" म्हणून काम करतात: या कोडचे कार्य समजून घेणे: - HTML5 दस्तऐवज प्रकार घोषित करते <!DOCTYPE html> वापरून - मूळ <html> घटक तयार करते जे सर्व पृष्ठ सामग्री समाविष्ट करेल - योग्य ब्राउझर रेंडरिंगसाठी आधुनिक वेब मानके स्थापित करते - विविध ब्राउझर आणि उपकरणांमध्ये सुसंगत प्रदर्शन सुनिश्चित करते ### 🔄 शैक्षणिक तपासणी थांबा आणि विचार करा: पुढे जाण्यापूर्वी, सुनिश्चित करा: - ✅ प्रत्येक HTML दस्तऐवजाला DOCTYPE घोषणेची आवश्यकता का आहे - ✅ <html> मूळ घटक काय समाविष्ट करतो - ✅ ही रचना ब्राउझर पृष्ठे योग्य प्रकारे रेंडर करण्यात कशी मदत करते जलद स्व-परीक्षण: "मानक-अनुरूप रेंडरिंग" म्हणजे काय हे तुम्ही स्वतःच्या शब्दात स्पष्ट करू शकता का? ## आवश्यक दस्तऐवज मेटाडेटा जोडणे HTML दस्तऐवजाचा <head> विभाग महत्त्वाची माहिती समाविष्ट करतो जी ब्राउझर आणि शोध इंजिनला आवश्यक असते, परंतु अभ्यागतांना थेट पृष्ठावर दिसत नाही. याचा विचार "पृष्ठामागील" माहिती म्हणून करा जी तुमचे वेबपृष्ठ योग्य प्रकारे कार्य करण्यास आणि विविध उपकरणे आणि प्लॅटफॉर्मवर योग्यरित्या दिसण्यास मदत करते. हे मेटाडेटा ब्राउझरला तुमचे पृष्ठ कसे प्रदर्शित करायचे, कोणते कॅरेक्टर एन्कोडिंग वापरायचे आणि वेगवेगळ्या स्क्रीन आकारांशी कसे हाताळायचे हे सांगते – व्यावसायिक, प्रवेशयोग्य वेब पृष्ठे तयार करण्यासाठी सर्व आवश्यक. ### कार्य: दस्तऐवज हेड जोडा तुमच्या उघडणाऱ्या आणि बंद <html> टॅगमध्ये हा <head> विभाग घाला: प्रत्येक घटक काय साध्य करतो याचे विश्लेषण: - पृष्ठ शीर्षक सेट करते जे ब्राउझर टॅब आणि शोध परिणामांमध्ये दिसते - UTF-8 कॅरेक्टर एन्कोडिंग निर्दिष्ट करते जागतिक स्तरावर योग्य मजकूर प्रदर्शनासाठी - आधुनिक इंटरनेट एक्सप्लोरर आवृत्त्यांसह सुसंगतता सुनिश्चित करते - डिव्हाइसच्या रुंदीशी जुळण्यासाठी व्ह्यूपोर्ट कॉन्फिगर करते - प्रारंभिक झूम स्तर नियंत्रित करते नैसर्गिक आकारात सामग्री प्रदर्शित करण्यासाठी ## दस्तऐवज बॉडी तयार करणे HTML च्या <body> घटकात तुमच्या वेबपृष्ठाची सर्व दृश्यमान सामग्री असते – वापरकर्ते पाहतील आणि संवाद साधतील अशा सर्व गोष्टी. <head> विभागाने ब्राउझरला सूचना दिल्या, तर <body> विभागात प्रत्यक्ष सामग्री असते: मजकूर, प्रतिमा, बटणे आणि इतर घटक जे तुमचे वापरकर्ता इंटरफेस तयार करतात. चला बॉडी रचना जोडूया आणि HTML टॅग एकत्र कसे कार्य करतात ते समजून घेऊया. ### HTML टॅग रचना समजून घेणे HTML जोडलेल्या टॅगचा वापर करून घटक परिभाषित करते. बहुतेक टॅगमध्ये <p> सारखा उघडणारा टॅग आणि </p> सारखा बंद करणारा टॅग असतो, ज्यामध्ये सामग्री असते: <p>Hello, world!</p>. यामुळे "Hello, world!" मजकूर असलेला परिच्छेद घटक तयार होतो. ### कार्य: बॉडी घटक जोडा तुमच्या HTML फाइलला <body> घटक समाविष्ट करण्यासाठी अद्यतनित करा: ही संपूर्ण रचना काय प्रदान करते: - HTML5 दस्तऐवजाचा मूलभूत फ्रेमवर्क स्थापित करते - योग्य ब्राउझर रेंडरिंगसाठी आवश्यक मेटाडेटा समाविष्ट करते - दृश्यमान सामग्रीसाठी रिक्त बॉडी तयार करते - आधुनिक वेब विकास सर्वोत्तम पद्धतींचे अनुसरण करते आता तुम्ही तुमच्या टेरॅरियमचे दृश्यमान घटक जोडण्यासाठी तयार आहात. आम्ही सामग्रीचे वेगवेगळे विभाग आयोजित करण्यासाठी कंटेनर म्हणून <div> घटक वापरू आणि वनस्पतींच्या प्रतिमा प्रदर्शित करण्यासाठी <img> घटक वापरू. ### प्रतिमा आणि लेआउट कंटेनरसह काम करणे HTML मध्ये प्रतिमा विशेष आहेत कारण त्या "स्वत: बंद करणारे" टॅग वापरतात. <p></p> सारख्या घटकांप्रमाणे सामग्रीभोवती लपेटण्याऐवजी, <img> टॅग स्वतःच आवश्यक असलेल्या सर्व माहितीचा समावेश करतो, जसे की src प्रतिमा फाइल पथासाठी आणि alt प्रवेशयोग्यतेसाठी. तुमच्या HTML मध्ये प्रतिमा जोडण्यापूर्वी, तुमच्या प्रकल्प फाइल्स व्यवस्थित करण्यासाठी प्रतिमांचे फोल्डर तयार करा आणि वनस्पतींच्या ग्राफिक्स जोडा. प्रथम, तुमच्या प्रतिमा सेट करा: 1. तुमच्या टेरॅरियम प्रकल्प फोल्डरमध्ये images नावाचा फोल्डर तयार करा 2. सोल्यूशन फोल्डर मधून वनस्पतींच्या प्रतिमा डाउनलोड करा (एकूण 14 वनस्पतींच्या प्रतिमा) 3. सर्व वनस्पतींच्या प्रतिमा तुमच्या नवीन images फोल्डरमध्ये कॉपी करा ### कार्य: वनस्पती प्रदर्शन लेआउट तयार करा आता तुमच्या <body></body> टॅगमध्ये दोन स्तंभांमध्ये आयोजित केलेल्या वनस्पतींच्या प्रतिमा जोडा: पायरी-पायरीने, या कोडमध्ये काय घडत आहे: - id="page" सह मुख्य पृष्ठ कंटेनर तयार करते सर्व सामग्री ठेवण्यासाठी - दोन स्तंभ कंटेनर स्थापित करते: left-container आणि right-container - डाव्या स्तंभात 7 वनस्पती आणि उजव्या स्तंभात 7 वनस्पती आयोजित करते - प्रत्येक वनस्पती प्रतिमेला plant-holder div मध्ये लपेटते वैयक्तिक स्थितीसाठी - CSS शैलीसाठी सुसंगत वर्ग नावे लागू करते पुढील धड्यात - प्रत्येक वनस्पती प्रतिमेला अद्वितीय ID असाइन करते JavaScript परस्परसंवादासाठी नंतर - प्रतिमा फोल्डरकडे निर्देश करणारे योग्य फाइल पथ समाविष्ट करते ### 🔄 शैक्षणिक तपासणी रचना समजून घेणे: तुमची HTML रचना पुनरावलोकन करण्यासाठी एक क्षण घ्या: - ✅ तुम्ही तुमच्या लेआउटमधील मुख्य कंटेनर ओळखू शकता का? - ✅ प्रत्येक प्रतिमेला अद्वितीय ID का आहे हे तुम्हाला समजते का? - ✅ तुम्ही plant-holder div चा उद्देश कसा वर्णन कराल? दृश्य तपासणी: तुमची HTML फाइल ब्राउझरमध्ये उघडा. तुम्हाला दिसले पाहिजे: - वनस्पतींच्या प्रतिमांची मूलभूत यादी - प्रतिमा दोन स्तंभांमध्ये आयोजित केल्या आहेत - साधा, शैली नसलेला लेआउट लक्षात ठेवा: CSS शैली जोडण्यापूर्वी HTML नेमके असेच दिसायला हवे! या मार्कअपसह, वनस्पती स्क्रीनवर दिसतील, जरी त्या अद्याप आकर्षक दिसणार नाहीत – पुढील धड्यात CSS साठी ते आहे! सध्या, तुमच्याकडे तुमची सामग्री व्यवस्थित करणारी आणि प्रवेशयोग्यता सर्वोत्तम पद्धतींचे अनुसरण करणारी ठोस HTML रचना आहे. ## प्रवेशयोग्यतेसाठी सेमॅंटिक HTML वापरणे सेमॅंटिक HTML म्हणजे HTML घटक त्यांच्या अर्थ आणि उद्देशावर आधारित निवडणे, फक्त त्यांच्या स्वरूपावर नाही. जेव्हा तुम्ही सेमॅंटिक मार्कअप वापरता, तेव्हा तुम्ही तुमच्या सामग्रीची रचना आणि अर्थ ब्राउझर, शोध इंजिन आणि स्क्रीन रीडर सारख्या सहाय्यक तंत्रज्ञानाला सांगता. हा दृष्टिकोन अपंगत्व असलेल्या वापरकर्त्यांसाठी तुमच्या वेबसाइट्स अधिक प्रवेशयोग्य बनवतो आणि शोध इंजिनांना तुमची सामग्री अधिक चांगल्या प्रकारे समजण्यास मदत करतो. आधुनिक वेब विकासाचा हा मूलभूत तत्त्व आहे जो सर्वांसाठी चांगले अनुभव तयार करतो. ### सेमॅंटिक पृष्ठ शीर्षक जोडणे चला तुमच्या टेरॅरियम पृष्ठाला योग्य शीर्षक जोडूया. तुमच्या उघडणाऱ्या <body> टॅगनंतर ही ओळ घाला: सेमॅंटिक मार्कअप का महत्त्वाचे आहे: - स्क्रीन रीडरला पृष्ठ रचना नेव्हिगेट करण्यात आणि समजून घेण्यात मदत करते - SEO सुधारते सामग्री श्रेणी स्पष्ट करून - दृष्टीदोष किंवा संज्ञानात्मक फरक असलेल्या वापरकर्त्यांसाठी प्रवेशयोग्यता वाढवते - सर्व उपकरणे आणि प्लॅटफॉर्मवर चांगले वापरकर्ता अनुभव तयार करते - व्यावसायिक विकासासाठी वेब मानके आणि सर्वोत्तम पद्धतींचे अनुसरण करते सेमॅंटिक विरुद्ध गैर-सेमॅंटिक निवडींची उदाहरणे: - प्रत्येक दृश्य घटकासाठी स्वतंत्र घटक परिभाषित करते (वरचा भाग, भिंती, माती, तळाचा भाग) - काच प्रतिबिंब प्रभावांसाठी अंतर्गत घटक समाविष्ट करते (चमकदार घटक) - वर्णनात्मक वर्ग नावे वापरते जी प्रत्येक घटकाचा उद्देश स्पष्ट करतात - ग्लास टेरॅरियम दिसण्यासाठी CSS शैलीसाठी संरचना तयार करते ### 🔄 शैक्षणिक तपासणी HTML संरचना कौशल्य: पुढे जाण्यापूर्वी, खात्री करा की तुम्ही खालील गोष्टी करू शकता: - ✅ HTML संरचना आणि दृश्य स्वरूप यामधील फरक स्पष्ट करा - ✅ सिमॅंटिक आणि नॉन-सिमॅंटिक HTML घटक ओळखा - ✅ योग्य मार्कअप कसे प्रवेशयोग्यता फायदे देते ते वर्णन करा - ✅ संपूर्ण दस्तऐवज वृक्ष संरचना ओळखा तुमच्या समजाची चाचणी: तुमची HTML फाइल ब्राउझरमध्ये JavaScript अक्षम करून आणि CSS काढून उघडून पहा. यामुळे तुम्ही तयार केलेली शुद्ध सिमॅंटिक संरचना दिसेल! --- ## GitHub Copilot Agent Challenge Agent मोड वापरून खालील आव्हान पूर्ण करा: वर्णन: टेरॅरियम प्रकल्पात समाविष्ट करता येईल अशा वनस्पती काळजी मार्गदर्शक विभागासाठी सिमॅंटिक HTML संरचना तयार करा. प्रॉम्प्ट: "Plant Care Guide" मुख्य शीर्षक असलेला सिमॅंटिक HTML विभाग तयार करा, ज्यामध्ये "Watering", "Light Requirements", आणि "Soil Care" या तीन उपविभागांसह प्रत्येक वनस्पती काळजी माहिती असलेला परिच्छेद असावा. <section>, <h2>, <h3>, आणि <p> सारख्या योग्य सिमॅंटिक HTML टॅग्स वापरून सामग्री योग्य प्रकारे संरचित करा. Agent मोडबद्दल अधिक जाणून घ्या इथे. ## HTML इतिहास आव्हान वेब उत्क्रांतीबद्दल शिकणे HTML मध्ये 1990 मध्ये CERN येथे टिम बर्नर्स-लीने पहिला वेब ब्राउझर तयार केल्यापासून लक्षणीय बदल झाले आहेत. काही जुन्या टॅग्स जसे की <marquee> आता अप्रचलित आहेत कारण ते आधुनिक प्रवेशयोग्यता मानकांशी आणि प्रतिसादक्षम डिझाइन तत्त्वांशी चांगले जुळत नाहीत. हा प्रयोग करून पहा: 1. तुमच्या <h1> शीर्षकाला तात्पुरते <marquee> टॅगमध्ये गुंडाळा: <marquee><h1>My Terrarium</h1></marquee> 2. तुमचे पृष्ठ ब्राउझरमध्ये उघडा आणि स्क्रोलिंग प्रभाव पाहा 3. विचार करा की हा टॅग का अप्रचलित झाला (सूचना: वापरकर्ता अनुभव आणि प्रवेशयोग्यता विचार करा) 4. <marquee> टॅग काढा आणि सिमॅंटिक मार्कअपवर परत जा चिंतन प्रश्न: - स्क्रोलिंग शीर्षकाचा दृष्टीदोष असलेल्या किंवा हालचाल संवेदनशीलता असलेल्या वापरकर्त्यांवर कसा परिणाम होऊ शकतो? - समान दृश्य प्रभाव अधिक प्रवेशयोग्यतेने साध्य करण्यासाठी कोणती आधुनिक CSS तंत्रे वापरता येतील? - अप्रचलित घटकांऐवजी वर्तमान वेब मानकांचा वापर का महत्त्वाचा आहे? अप्रचलित आणि अप्रचलित HTML घटकांबद्दल अधिक जाणून घ्या जेणेकरून वेब मानक कसे विकसित होतात ते वापरकर्ता अनुभव सुधारण्यासाठी समजून घेता येईल. ## पोस्ट-लेक्चर क्विझ पोस्ट-लेक्चर क्विझ ## पुनरावलोकन आणि स्व-अभ्यास HTML ज्ञान सखोल करा HTML वेबचा पाया आहे आणि 30 वर्षांहून अधिक काळापासून विकसित होत आहे, साध्या दस्तऐवज मार्कअप भाषेपासून परस्परसंवादी अनुप्रयोग तयार करण्यासाठी एक प्रगत व्यासपीठ बनले आहे. या उत्क्रांतीचा अभ्यास केल्याने तुम्हाला आधुनिक वेब मानकांचे कौतुक करण्यास मदत होते आणि चांगले विकास निर्णय घेता येतात. शिफारस केलेले शिक्षण मार्ग: 1. HTML इतिहास आणि उत्क्रांती - HTML 1.0 ते HTML5 पर्यंतची टाइमलाइन संशोधन करा - विशिष्ट टॅग्स का अप्रचलित झाले (प्रवेशयोग्यता, मोबाइल-अनुकूलता, देखभालक्षमता) याचा अभ्यास करा - उदयोन्मुख HTML वैशिष्ट्ये आणि प्रस्ताव तपासा 2. सिमॅंटिक HTML सखोल अभ्यास - HTML5 सिमॅंटिक घटकांची संपूर्ण यादी अभ्यासा - <article>, <section>, <aside>, आणि <main> कधी वापरायचे ते ओळखण्याचा सराव करा - प्रवेशयोग्यता वाढवण्यासाठी ARIA गुणधर्मांबद्दल जाणून घ्या 3. आधुनिक वेब विकास - Microsoft Learn वर प्रतिसादक्षम वेबसाइट तयार करणे एक्सप्लोर करा - HTML कसे CSS आणि JavaScript सह एकत्रित होते ते समजून घ्या - वेब कार्यक्षमता आणि SEO सर्वोत्तम पद्धतींबद्दल जाणून घ्या चिंतन प्रश्न: - तुम्हाला कोणते अप्रचलित HTML टॅग्स सापडले आणि ते का काढून टाकले गेले? - भविष्यातील आवृत्त्यांसाठी कोणती नवीन HTML वैशिष्ट्ये प्रस्तावित केली जात आहेत? - सिमॅंटिक HTML वेब प्रवेशयोग्यता आणि SEO मध्ये कसा योगदान देतो? ### ⚡ पुढील 5 मिनिटांत तुम्ही काय करू शकता - [ ] DevTools (F12) उघडा आणि तुमच्या आवडत्या वेबसाइटची HTML संरचना तपासा - [ ] मूलभूत टॅग्ससह एक साधी HTML फाइल तयार करा: <h1>, <p>, आणि <img> - [ ] W3C HTML Validator ऑनलाइन वापरून तुमची HTML वैधता तपासा - [ ] <!-- comment --> वापरून तुमच्या HTML मध्ये एक टिप्पणी जोडा ### 🎯 तुम्ही या तासात काय साध्य करू शकता - [ ] पोस्ट-लेसन क्विझ पूर्ण करा आणि सिमॅंटिक HTML संकल्पना पुनरावलोकन करा - [ ] योग्य HTML संरचनेसह स्वतःबद्दल एक साधे वेबपृष्ठ तयार करा - [ ] वेगवेगळ्या शीर्षक स्तर आणि मजकूर स्वरूपन टॅग्ससह प्रयोग करा - [ ] मल्टीमीडिया एकत्रीकरणाचा सराव करण्यासाठी प्रतिमा आणि दुवे जोडा - [ ] तुम्ही अद्याप प्रयत्न केलेले नाहीत अशा HTML5 वैशिष्ट्यांबद्दल संशोधन करा ### 📅 तुमचा आठवडाभराचा HTML प्रवास - [ ] सिमॅंटिक मार्कअपसह टेरॅरियम प्रकल्प असाइनमेंट पूर्ण करा - [ ] ARIA लेबल्स आणि भूमिका वापरून प्रवेशयोग्य वेबपृष्ठ तयार करा - [ ] विविध इनपुट प्रकारांसह फॉर्म तयार करण्याचा सराव करा - [ ] localStorage किंवा geolocation सारख्या HTML5 APIs एक्सप्लोर करा - [ ] प्रतिसादक्षम HTML नमुने आणि मोबाइल-प्रथम डिझाइनचा अभ्यास करा - [ ] सर्वोत्तम पद्धतींसाठी इतर विकसकांचे HTML कोड पुनरावलोकन करा ### 🌟 तुमचा महिनाभराचा वेब पाया - [ ] तुमच्या HTML कौशल्याचे प्रदर्शन करणारी पोर्टफोलिओ वेबसाइट तयार करा - [ ] Handlebars सारख्या फ्रेमवर्कसह HTML टेम्पलेटिंग शिकणे - [ ] HTML दस्तऐवजीकरण सुधारून ओपन सोर्स प्रकल्पांमध्ये योगदान द्या - [ ] कस्टम घटकांसारख्या प्रगत HTML संकल्पना मास्टर करा - [ ] CSS फ्रेमवर्क आणि JavaScript लायब्ररीसह HTML एकत्रित करा - [ ] HTML मूलभूत गोष्टी शिकणाऱ्यांना मार्गदर्शन करा ## 🎯 तुमची HTML कौशल्य टाइमलाइन ### 🛠️ तुमचा HTML टूलकिट सारांश या धड्याचा अभ्यास केल्यानंतर, तुमच्याकडे आता आहे: - दस्तऐवज संरचना: योग्य DOCTYPE सह संपूर्ण HTML5 पाया - सिमॅंटिक मार्कअप: प्रवेशयोग्यता आणि SEO सुधारण्यासाठी अर्थपूर्ण टॅग्स - प्रतिमा एकत्रीकरण: योग्य फाइल संघटन आणि alt टेक्स्ट पद्धती - लेआउट कंटेनर: वर्णनात्मक वर्ग नावे असलेल्या divs चा धोरणात्मक वापर - प्रवेशयोग्यता जागरूकता: स्क्रीन रीडर नेव्हिगेशनची समज - आधुनिक मानक: वर्तमान HTML5 पद्धती आणि अप्रचलित टॅग्सचे ज्ञान - प्रकल्प पाया: CSS शैली आणि JavaScript परस्परसंवादासाठी ठोस आधार पुढील पायऱ्या: तुमची HTML संरचना CSS शैलीसाठी तयार आहे! तुम्ही तयार केलेला सिमॅंटिक पाया पुढील धडा समजून घेणे सोपे करेल. ## असाइनमेंट तुमची HTML सराव करा: ब्लॉग मॉकअप तयार करा --- अस्वीकरण: हा दस्तऐवज AI भाषांतर सेवा Co-op Translator वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपयास लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून निर्माण झालेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार नाही.
टेरॅरियम प्रकल्प भाग 2: CSS ची ओळख
तुमचा HTML टेरॅरियम किती साधा दिसत होता हे लक्षात आहे का? CSS च्या मदतीने आपण त्या साध्या संरचनेला आकर्षक बनवतो. जर HTML घराचा फ्रेम तयार करण्यासारखा असेल, तर CSS म्हणजे घराला घरासारखे वाटण्यासाठी आवश्यक सर्व गोष्टी - रंग, फर्निचरची मांडणी, प्रकाशयोजना आणि खोल्यांची रचना. व्हर्सायचा राजवाडा सुरुवातीला एक साधा शिकारीचा निवास होता, पण सजावट आणि रचनेवर लक्ष केंद्रित करून तो जगातील सर्वात भव्य इमारतींपैकी एक बनला. आज आपण तुमचा टेरॅरियम कार्यक्षमतेपासून आकर्षकतेकडे बदलू. तुम्ही घटक अचूकपणे कसे ठेवायचे, वेगवेगळ्या स्क्रीन आकारांसाठी लेआउट कसे प्रतिसाद देईल आणि वेबसाइट्स आकर्षक बनवणारी दृश्यात्मकता कशी तयार करायची हे शिकाल. या धड्याच्या शेवटी, तुम्हाला दिसेल की रणनीतिक CSS स्टाइलिंग तुमच्या प्रकल्पाला किती सुधारू शकते. चला तुमच्या टेरॅरियमला थोडा स्टाइल देऊया. ## प्री-लेक्चर क्विझ प्री-लेक्चर क्विझ ## CSS सुरू करण्याची प्रक्रिया CSS फक्त "सौंदर्य वाढवणे" म्हणून ओळखले जाते, परंतु त्याचा उद्देश खूप व्यापक आहे. CSS म्हणजे एखाद्या चित्रपटाचा दिग्दर्शक असण्यासारखे आहे - तुम्ही फक्त कसे दिसते हेच नाही तर ते कसे हलते, संवाद साधते आणि वेगवेगळ्या परिस्थितींशी कसे जुळवून घेते हे नियंत्रित करता. आधुनिक CSS खूप सक्षम आहे. तुम्ही फोन, टॅब्लेट आणि डेस्कटॉप संगणकांसाठी लेआउट आपोआप समायोजित करणारा कोड लिहू शकता. तुम्ही गुळगुळीत अॅनिमेशन तयार करू शकता जे वापरकर्त्यांचे लक्ष आवश्यक ठिकाणी केंद्रित करतात. जेव्हा सर्वकाही एकत्र काम करते तेव्हा परिणाम खूप प्रभावी असतो. या धड्यात आपण काय साध्य करू: - तयार करतो आधुनिक CSS तंत्रांचा वापर करून तुमच्या टेरॅरियमसाठी संपूर्ण दृश्यात्मक डिझाइन - शोधतो कॅस्केड, वारसा आणि CSS सिलेक्टर्स यासारखी मूलभूत संकल्पना - अंमलात आणतो प्रतिसादात्मक पोझिशनिंग आणि लेआउट रणनीती - बांधतो CSS आकार आणि स्टाइलिंग वापरून टेरॅरियम कंटेनर ### पूर्वतयारी तुम्ही मागील धड्यातून तुमच्या टेरॅरियमसाठी HTML संरचना पूर्ण केली पाहिजे आणि ती स्टाइल करण्यासाठी तयार असावी. ### तुमचा CSS फाइल सेट करणे स्टाइलिंग सुरू करण्यापूर्वी, आपल्याला CSS HTML शी जोडणे आवश्यक आहे. ही कनेक्शन ब्राउझरला तुमच्या टेरॅरियमसाठी स्टाइलिंग सूचना कुठे शोधायच्या ते सांगते. तुमच्या टेरॅरियम फोल्डरमध्ये, style.css नावाची नवीन फाइल तयार करा आणि ती तुमच्या HTML डॉक्युमेंटच्या <head> विभागात लिंक करा: या कोडचे कार्य: - तयार करते तुमच्या HTML आणि CSS फाइल्समधील कनेक्शन - ब्राउझरला सांगते style.css मधून स्टाइल्स लोड आणि लागू करायला - वापरते rel="stylesheet" अॅट्रिब्युट CSS फाइल असल्याचे निर्दिष्ट करण्यासाठी - संदर्भ देते फाइल पथ href="./style.css" सह ## CSS कॅस्केड समजून घेणे CSS ला "कॅस्केडिंग" स्टाइल शीट्स का म्हणतात याचा विचार केला आहे का? स्टाइल्स पाण्याच्या धबधब्यासारखे खाली वाहतात आणि कधीकधी एकमेकांशी संघर्ष करतात. लष्करी आदेश संरचना कशी कार्य करते याचा विचार करा - एक सामान्य आदेश म्हणू शकतो "सर्व सैनिक हिरवा पोशाख घाला," परंतु तुमच्या युनिटसाठी विशिष्ट आदेश म्हणू शकतो "समारंभासाठी ड्रेस ब्लूज घाला." अधिक विशिष्ट सूचना प्राधान्य घेते. CSS समान तर्काचे अनुसरण करते आणि ही श्रेणी समजून घेणे डीबगिंग अधिक व्यवस्थापनीय बनवते. ### कॅस्केड प्राधान्याचा प्रयोग स्टाइल संघर्ष तयार करून कॅस्केड अॅक्शनमध्ये पाहूया. प्रथम, तुमच्या <h1> टॅगमध्ये इनलाइन स्टाइल जोडा: या कोडचे कार्य: - लागू करते इनलाइन स्टाइलिंग वापरून <h1> घटकावर थेट लाल रंग - वापरते style अॅट्रिब्युट HTML मध्ये CSS थेट एम्बेड करण्यासाठी - तयार करते या विशिष्ट घटकासाठी सर्वोच्च प्राधान्य स्टाइल नियम यानंतर, तुमच्या style.css फाइलमध्ये हा नियम जोडा: वरीलमध्ये आपण: - परिभाषित केले CSS नियम जो सर्व <h1> घटकांना लक्ष्य करतो - सेट केले बाह्य स्टाइलशीट वापरून मजकूराचा रंग निळा - तयार केले इनलाइन स्टाइल्सच्या तुलनेत कमी प्राधान्य नियम ✅ ज्ञान तपासणी: तुमच्या वेब अॅपमध्ये कोणता रंग दिसतो? तो रंग का जिंकतो? तुम्ही स्टाइल्स ओव्हरराइड करण्याच्या परिस्थितींचा विचार करू शकता का? ## CSS वारसा क्रियेत CSS वारसा अनुवांशिकतेसारखे कार्य करते - घटक त्यांच्या पालक घटकांकडून विशिष्ट गुणधर्म वारसाहक्काने घेतात. जर तुम्ही बॉडी घटकावर फॉन्ट फॅमिली सेट केली, तर आतला सर्व मजकूर आपोआप तोच फॉन्ट वापरतो. हे हॅब्सबर्ग कुटुंबाच्या विशिष्ट जबड्याच्या रेषेसारखे आहे जे प्रत्येक व्यक्तीसाठी निर्दिष्ट न करता पिढ्यानपिढ्या दिसते. तथापि, सर्वकाही वारसाहक्काने मिळत नाही. फॉन्ट्स आणि रंगांसारख्या मजकूर शैली वारसाहक्काने मिळतात, परंतु मार्जिन आणि बॉर्डरसारख्या लेआउट गुणधर्म वारसाहक्काने मिळत नाहीत. जसे मुलांना शारीरिक वैशिष्ट्ये वारसाहक्काने मिळू शकतात पण त्यांच्या पालकांची फॅशन निवड नाही. ### फॉन्ट वारसा निरीक्षण करणे बॉडी घटकावर फॉन्ट फॅमिली सेट करून वारसा अॅक्शनमध्ये पाहूया: येथे काय होते ते समजून घेणे: - सेट करते संपूर्ण पृष्ठासाठी फॉन्ट फॅमिली बॉडी घटकाला लक्ष्य करून - वापरते फॉन्ट स्टॅक फॉलबॅक पर्यायांसह चांगल्या ब्राउझर सुसंगततेसाठी - लागू करते आधुनिक सिस्टम फॉन्ट्स जे वेगवेगळ्या ऑपरेटिंग सिस्टमवर चांगले दिसतात - सुनिश्चित करते सर्व चाइल्ड घटक हा फॉन्ट वारसाहक्काने घेतात जोपर्यंत विशेषतः ओव्हरराइड केलेला नाही तुमच्या ब्राउझरचे डेव्हलपर टूल्स (F12) उघडा, एलिमेंट्स टॅबवर जा आणि तुमच्या <h1> घटकाची तपासणी करा. तुम्हाला दिसेल की ते बॉडीकडून फॉन्ट फॅमिली वारसाहक्काने घेतात: ✅ प्रयोग वेळ: <body> वर color, line-height, किंवा text-align सारखी इतर वारसाहक्काने मिळणारी गुणधर्म सेट करण्याचा प्रयत्न करा. तुमच्या हेडिंग आणि इतर घटकांवर काय परिणाम होतो? ### 🔄 शैक्षणिक तपासणी CSS फाउंडेशन समजून घेणे: सिलेक्टर्सकडे जाण्यापूर्वी, सुनिश्चित करा की तुम्ही: - ✅ कॅस्केड आणि वारसाहक्कातील फरक स्पष्ट करू शकता - ✅ विशिष्टता संघर्षात कोणती स्टाइल जिंकेल हे अंदाज करू शकता - ✅ कोणते गुणधर्म पालक घटकांकडून वारसाहक्काने मिळतात हे ओळखू शकता - ✅ CSS फाइल्स HTML शी योग्य प्रकारे जोडू शकता जलद चाचणी: जर तुमच्याकडे हे स्टाइल्स असतील, तर <div class="special"> मध्ये असलेल्या <h1> चा रंग काय असेल? उत्तर: लाल (घटक सिलेक्टर थेट h1 ला लक्ष्य करतो) ## CSS सिलेक्टर्समध्ये प्रावीण्य मिळवणे CSS सिलेक्टर्स विशिष्ट घटकांना स्टाइल करण्याचा तुमचा मार्ग आहे. ते अचूक दिशानिर्देश देण्यासारखे कार्य करतात - "घर" म्हणण्याऐवजी तुम्ही "मॅपल स्ट्रीटवरील लाल दरवाजा असलेले निळे घर" म्हणू शकता. CSS वेगवेगळ्या प्रकारे विशिष्ट असण्याचे मार्ग प्रदान करते आणि योग्य सिलेक्टर निवडणे म्हणजे कार्यासाठी योग्य साधन निवडणे. कधी कधी तुम्हाला संपूर्ण परिसरातील प्रत्येक दरवाजा स्टाइल करायचा असतो, तर कधी फक्त एक विशिष्ट दरवाजा. ### घटक सिलेक्टर्स (टॅग्स) घटक सिलेक्टर्स HTML घटकांना त्यांच्या टॅग नावाने लक्ष्य करतात. ते तुमच्या पृष्ठावर व्यापकपणे लागू होणारे बेस स्टाइल्स सेट करण्यासाठी योग्य आहेत: या स्टाइल्स समजून घेणे: - सेट करते संपूर्ण पृष्ठावर सुसंगत टायपोग्राफी body सिलेक्टरसह - काढून टाकते ब्राउझरचे डीफॉल्ट मार्जिन आणि पॅडिंग चांगल्या नियंत्रणासाठी - स्टाइल करते सर्व हेडिंग घटक रंग, संरेखन आणि स्पेसिंगसह - वापरते rem युनिट्स स्केलेबल, अॅक्सेसिबल फॉन्ट साइजिंगसाठी घटक सिलेक्टर्स सामान्य स्टाइलिंगसाठी चांगले कार्य करतात, परंतु तुम्हाला टेरॅरियममधील झाडांसारख्या वैयक्तिक घटकांना स्टाइल करण्यासाठी अधिक विशिष्ट सिलेक्टर्सची आवश्यकता असेल. ### अद्वितीय घटकांसाठी ID सिलेक्टर्स ID सिलेक्टर्स # चिन्ह वापरतात आणि विशिष्ट id अॅट्रिब्युट्स असलेल्या घटकांना लक्ष्य करतात. IDs पृष्ठावर अद्वितीय असणे आवश्यक असल्याने, ते टेरॅरियमच्या डाव्या आणि उजव्या बाजूच्या वनस्पती कंटेनरसारख्या वैयक्तिक, विशेष घटकांना स्टाइल करण्यासाठी योग्य आहेत. चला टेरॅरियमच्या बाजूच्या कंटेनरसाठी स्टाइल तयार करूया जिथे वनस्पती राहतील: या कोडने काय साध्य केले आहे: - स्थिती कंटेनरला absolute पोझिशनिंग वापरून डाव्या आणि उजव्या कडांवर ठेवते - वापरते vh (व्ह्यूपोर्ट हाइट) युनिट्स प्रतिसादात्मक उंचीसाठी जी स्क्रीन आकाराशी जुळवून घेते - लागू करते box-sizing: border-box जेणेकरून पॅडिंग एकूण रुंदीमध्ये समाविष्ट होईल - काढून टाकते शून्य मूल्यांमधून अनावश्यक px युनिट्स स्वच्छ कोडसाठी - सेट करते सूक्ष्म पार्श्वभूमी रंग जो गडद ग्रेच्या तुलनेत डोळ्यांसाठी सोपा आहे ✅ कोड गुणवत्ता आव्हान: लक्षात घ्या की हा CSS DRY (डोंट रिपीट युअरसेल्फ) तत्त्वाचे उल्लंघन करतो. तुम्ही ID आणि क्लास दोन्ही वापरून याला कसे सुधारित करू शकता? सुधारित दृष्टिकोन: ### पुनर्वापरयोग्य स्टाइलसाठी क्लास सिलेक्टर्स क्लास सिलेक्टर्स . चिन्ह वापरतात आणि तुम्हाला एकाच स्टाइल्स अनेक घटकांवर लागू करायच्या असतील तेव्हा योग्य असतात. IDs च्या विपरीत, क्लासेस तुमच्या HTML मध्ये पुन्हा वापरता येतात, ज्यामुळे ते सुसंगत स्टाइलिंग पॅटर्नसाठी आदर्श बनतात. आपल्या टेरॅरियममध्ये, प्रत्येक वनस्पतीला समान स्टाइलिंगची आवश्यकता आहे परंतु वैयक्तिक पोझिशनिंगची आवश्यकता आहे. आम्ही सामायिक स्टाइलसाठी क्लासेस आणि अद्वितीय पोझिशनिंगसाठी IDs चा संयोजन वापरू. प्रत्येक वनस्पतीसाठी HTML संरचना येथे आहे: महत्त्वाचे घटक स्पष्ट केले: - वापरते class="plant-holder" सर्व वनस्पतींसाठी सुसंगत कंटेनर स्टाइलिंगसाठी - लागू करते class="plant" सामायिक प्रतिमा स्टाइलिंग आणि वर्तनासाठी - समाविष्ट करते अद्वितीय id="plant1" वैयक्तिक पोझिशनिंग आणि JavaScript संवादासाठी - प्रदान करते स्क्रीन रीडर अॅक्सेसिबिलिटीसाठी वर्णनात्मक alt टेक्स्ट आता तुमच्या style.css फाइलमध्ये हे स्टाइल्स जोडा: या स्टाइल्सचे विश्लेषण: - तयार करते वनस्पती होल्डरसाठी सापेक्ष पोझिशनिंग जे पोझिशनिंग संदर्भ तयार करते - सेट करते प्रत्येक वनस्पती होल्डर 13% उंचीवर, सर्व वनस्पती स्क्रोलिंगशिवाय उभ्या फिट होण्यासाठी - थोडे हलवते होल्डर्स डावीकडे वनस्पतींना त्यांच्या कंटेनरमध्ये चांगले केंद्रित करण्यासाठी - परवानगी देते वनस्पतींना प्रतिसादात्मकपणे स्केल करण्यासाठी max-width आणि max-height गुणधर्मांसह - वापरते z-index टेरॅरियममधील इतर घटकांवर वनस्पतींना स्तरित करण्यासाठी - जोडते CSS ट्रांझिशन्ससह सूक्ष्म हवर इफेक्ट चांगल्या वापरकर्ता संवादासाठी ✅ गंभीर विचार: आपल्याला .plant-holder आणि .plant सिलेक्टर्स दोन्ही का आवश्यक आहेत? जर आपण फक्त एक वापरण्याचा प्रयत्न केला तर काय होईल? ## CSS पोझिशनिंग समजून घेणे CSS पोझिशनिंग म्हणजे नाटकासाठी स्टेज डायरेक्टर असण्यासारखे आहे - तुम्ही प्रत्येक अभिनेता कुठे उभा - .plant-holder जर relative ऐवजी absolute वापरत असेल तर लेआउट कसे बदलते? - .plant ला relative पोझिशनिंगमध्ये बदलल्यावर काय होते? ### 🔄 शैक्षणिक तपासणी CSS पोझिशनिंग कौशल्य: तुमचे समज तपासण्यासाठी थांबा: - ✅ तुम्ही स्पष्ट करू शकता का की ड्रॅग-आणि-ड्रॉपसाठी प्लांट्सना absolute पोझिशनिंग का आवश्यक आहे? - ✅ तुम्हाला समजते का की relative कंटेनर्स पोझिशनिंग संदर्भ कसे तयार करतात? - ✅ साइड कंटेनर्स absolute पोझिशनिंग का वापरतात? - ✅ जर तुम्ही पोझिशन डिक्लेरेशन पूर्णपणे काढून टाकले तर काय होईल? वास्तविक जगाशी संबंध: विचार करा की CSS पोझिशनिंग वास्तविक जगातील लेआउटशी कसे जुळते: - Static: शेल्फवर ठेवलेली पुस्तके (नैसर्गिक क्रम) - Relative: पुस्तक थोडे हलवणे पण त्याच जागेवर ठेवणे - Absolute: एखाद्या पानावर बुकमार्क अचूकपणे ठेवणे - Fixed: पानं उलटताना दिसणारी स्टिकी नोट ## CSS सह टेरॅरियम तयार करणे आता आपण फक्त CSS वापरून काचेचा जार तयार करू - कोणत्याही इमेजेस किंवा ग्राफिक्स सॉफ्टवेअरशिवाय. पोझिशनिंग आणि ट्रान्सपेरन्सी वापरून वास्तववादी काच, सावल्या आणि खोलीचे प्रभाव तयार करणे हे CSS च्या व्हिज्युअल क्षमता दर्शवते. ही तंत्रे बाऊहाऊस चळवळीतील आर्किटेक्ट्सने साध्या जियोमेट्रिक फॉर्म्स वापरून जटिल, सुंदर संरचना तयार करण्याच्या पद्धतीशी जुळतात. एकदा तुम्ही हे तत्त्व समजून घेतल्यावर, तुम्हाला अनेक वेब डिझाइन्समागील CSS तंत्रे ओळखता येतील. ### काचेच्या जारचे घटक तयार करणे आता आपण टेरॅरियम जार टप्प्याटप्प्याने तयार करू. प्रत्येक भाग absolute पोझिशनिंग आणि टक्केवारी-आधारित साइजिंग वापरतो जेणेकरून डिझाइन प्रतिसादक्षम असेल: टेरॅरियम बांधकाम समजून घेणे: - वापरते टक्केवारी-आधारित परिमाणे जेणेकरून सर्व स्क्रीन साइजवर स्केलिंग होईल - पोझिशन करते घटक अचूकपणे स्टॅक आणि अलाईन करण्यासाठी - लागू करते वेगवेगळ्या अपॅसिटी व्हॅल्यूज जेणेकरून काचेचा ट्रान्सपेरन्सी इफेक्ट तयार होईल - अंमलात आणते z-index लेयरिंग जेणेकरून प्लांट्स जारच्या आत दिसतील - जोडते सूक्ष्म बॉक्स-शॅडो आणि परिष्कृत बॉर्डर-रेडियस जेणेकरून अधिक वास्तववादी दिसेल ### टक्केवारीसह प्रतिसादक्षम डिझाइन सर्व परिमाणे निश्चित पिक्सेल व्हॅल्यूजऐवजी टक्केवारी वापरत असल्याचे लक्षात घ्या: याचे महत्त्व: - सुनिश्चित करते की टेरॅरियम कोणत्याही स्क्रीन साइजवर प्रमाणानुसार स्केल होईल - जपते जार घटकांमधील व्हिज्युअल संबंध - प्रदान करते मोबाइल फोनपासून मोठ्या डेस्कटॉप मॉनिटर्सपर्यंत एकसारखा अनुभव - परवानगी देते डिझाइनला व्हिज्युअल लेआउट न मोडता अडॅप्ट होण्यासाठी ### CSS युनिट्सचा वापर आम्ही बॉर्डर-रेडियससाठी rem युनिट्स वापरत आहोत, जे रूट फॉन्ट साइजच्या तुलनेत स्केल होतात. यामुळे अधिक अॅक्सेसिबल डिझाइन्स तयार होतात जे वापरकर्त्याच्या फॉन्ट प्राधान्यांचा आदर करतात. CSS relative units बद्दल अधिक जाणून घ्या. ✅ व्हिज्युअल प्रयोग: या व्हॅल्यूज बदलून परिणाम पाहा: - जारची अपॅसिटी 0.5 वरून 0.8 करा – यामुळे काचेच्या दिसण्यावर काय परिणाम होतो? - मातीचा रंग #3a241d वरून #8B4513 करा – याचा व्हिज्युअल प्रभाव काय आहे? - मातीचा z-index 2 वर बदला – लेयरिंगवर काय परिणाम होतो? ### 🔄 शैक्षणिक तपासणी CSS व्हिज्युअल डिझाइन समजून घेणे: तुमचे समज तपासण्यासाठी: - ✅ टक्केवारी-आधारित परिमाणे प्रतिसादक्षम डिझाइन कसे तयार करतात? - ✅ अपॅसिटी काचेचा ट्रान्सपेरन्सी इफेक्ट कसा तयार करते? - ✅ लेयरिंग घटकांमध्ये z-index ची भूमिका काय आहे? - ✅ बॉर्डर-रेडियस व्हॅल्यूज जारचा आकार कसा तयार करतात? डिझाइन तत्त्व: लक्षात घ्या की आपण साध्या आकारांपासून जटिल व्हिज्युअल्स तयार करत आहोत: 1. आयत → गोलसर आयत → जारचे घटक 2. सपाट रंग → अपॅसिटी → काचेचा प्रभाव 3. स्वतंत्र घटक → लेयर केलेली रचना → 3D दिसणे --- ## GitHub Copilot Agent Challenge 🚀 Agent मोड वापरून खालील आव्हान पूर्ण करा: वर्णन: CSS अॅनिमेशन तयार करा जे टेरॅरियम प्लांट्सला हळूवारपणे डुलवते, नैसर्गिक वाऱ्याचा प्रभाव निर्माण करते. हे तुम्हाला CSS अॅनिमेशन, ट्रान्सफॉर्म्स आणि कीफ्रेम्सचा सराव करण्यास मदत करेल आणि तुमच्या टेरॅरियमची व्हिज्युअल आकर्षकता वाढवेल. प्रॉम्प्ट: टेरॅरियममधील प्लांट्सला हळूवारपणे डावीकडे आणि उजवीकडे डुलवण्यासाठी CSS कीफ्रेम अॅनिमेशन जोडा. प्रत्येक प्लांटला थोडेसे (2-3 डिग्री) डावीकडे आणि उजवीकडे फिरवणारे डुलण्याचे अॅनिमेशन तयार करा, ज्याचा कालावधी 3-4 सेकंद असेल, आणि ते .plant क्लासला लागू करा. अॅनिमेशन अनंत वेळा लूप होईल आणि नैसर्गिक हालचालीसाठी ईझिंग फंक्शन असेल याची खात्री करा. agent mode बद्दल अधिक जाणून घ्या. ## 🚀 Challenge: काचेच्या प्रतिबिंबांची भर घालणे तुमच्या टेरॅरियममध्ये वास्तववादी काचेच्या प्रतिबिंबांसह सुधारणा करण्यासाठी तयार आहात का? ही तंत्रज्ञान तुमच्या डिझाइनमध्ये खोली आणि वास्तववाद जोडेल. तुम्ही काचेच्या पृष्ठभागांवर प्रकाश कसा प्रतिबिंबित होतो हे अनुकरण करणारे सूक्ष्म हायलाइट्स तयार कराल. ही पद्धत रेनासन्स चित्रकार जॅन व्हॅन आयक यांनी काचेच्या पेंटिंगला त्रिमितीय बनवण्यासाठी प्रकाश आणि प्रतिबिंब कसे वापरले यासारखी आहे. तुम्ही यासाठी प्रयत्न कराल: तुमचे आव्हान: - तयार करा काचेच्या प्रतिबिंबांसाठी सूक्ष्म पांढऱ्या किंवा हलक्या रंगाचे अंडाकृती आकार - त्यांना जारच्या डाव्या बाजूला रणनीतिकरीत्या पोझिशन करा - लागू करा योग्य अपॅसिटी आणि ब्लर इफेक्ट्स जेणेकरून वास्तववादी प्रकाश प्रतिबिंब तयार होईल - वापरा border-radius जेणेकरून सजीव, बबलसारखे आकार तयार होतील - प्रयोग करा ग्रेडियंट्स किंवा बॉक्स-शॅडोसह अधिक वास्तववादासाठी ## पोस्ट-लेक्चर क्विझ Post-lecture quiz ## तुमचे CSS ज्ञान वाढवा CSS सुरुवातीला जटिल वाटू शकते, परंतु या मुख्य संकल्पना समजून घेतल्याने अधिक प्रगत तंत्रज्ञानासाठी मजबूत पाया तयार होतो. तुमचे पुढील CSS शिकण्याचे क्षेत्र: - Flexbox - घटकांचे अलाईनमेंट आणि वितरण सोपे करते - CSS Grid - जटिल लेआउट तयार करण्यासाठी शक्तिशाली साधने प्रदान करते - CSS Variables - पुनरावृत्ती कमी करते आणि देखभाल सुधारते - Responsive design - साइट्स वेगवेगळ्या स्क्रीन साइजवर चांगल्या प्रकारे कार्य करतात याची खात्री करते ### इंटरॅक्टिव्ह लर्निंग रिसोर्सेस या संकल्पनांचा सराव खालील आकर्षक, हाताळण्यायोग्य गेम्ससह करा: - 🐸 Flexbox Froggy - मजेदार आव्हानांद्वारे Flexbox मास्टर करा - 🌱 Grid Garden - CSS Grid शिकण्यासाठी आभासी गाजर वाढवा - 🎯 CSS Battle - कोडिंग आव्हानांसह तुमचे CSS कौशल्य तपासा ### अतिरिक्त शिक्षण CSS मूलभूत गोष्टींसाठी Microsoft Learn मॉड्यूल पूर्ण करा: Style your HTML app with CSS ### ⚡ पुढील 5 मिनिटांत तुम्ही काय करू शकता - [ ] DevTools उघडा आणि Elements पॅनेल वापरून कोणत्याही वेबसाइटवरील CSS स्टाइल्स तपासा - [ ] एक साधी CSS फाइल तयार करा आणि ती HTML पेजशी लिंक करा - [ ] वेगवेगळ्या पद्धती वापरून रंग बदलण्याचा प्रयत्न करा: hex, RGB, आणि नामांकित रंग - [ ] बॉक्स मॉडेलचा सराव करा आणि padding आणि margin div ला जोडा ### 🎯 तुम्ही या तासात काय साध्य करू शकता - [ ] पोस्ट-लेसन क्विझ पूर्ण करा आणि CSS मूलभूत गोष्टींचा आढावा घ्या - [ ] तुमच्या HTML पेजला फॉन्ट्स, रंग, आणि स्पेसिंगसह स्टाइल करा - [ ] Flexbox किंवा Grid वापरून एक साधा लेआउट तयार करा - [ ] CSS ट्रान्सिशन्ससह गुळगुळीत प्रभाव तयार करण्याचा प्रयत्न करा - [ ] मीडिया क्वेरीसह प्रतिसादक्षम डिझाइनचा सराव करा ### 📅 तुमचा CSS आठवड्याचा प्रवास - [ ] सर्जनशीलतेसह टेरॅरियम स्टाइलिंग असाइनमेंट पूर्ण करा - [ ] फोटो गॅलरी लेआउट तयार करून CSS Grid मास्टर करा - [ ] CSS अॅनिमेशन शिकून तुमच्या डिझाइन्सला जीवंत करा - [ ] Sass किंवा Less सारख्या CSS प्रीप्रोसेसर्स एक्सप्लोर करा - [ ] डिझाइन तत्त्वांचा अभ्यास करा आणि त्यांना तुमच्या CSS मध्ये लागू करा - [ ] ऑनलाइन सापडलेल्या मनोरंजक डिझाइन्सचे विश्लेषण करा आणि पुन्हा तयार करा ### 🌟 तुमचा महिनाभराचा डिझाइन मास्टरी प्रवास - [ ] एक संपूर्ण प्रतिसादक्षम वेबसाइट डिझाइन सिस्टम तयार करा - [ ] CSS-in-JS किंवा Tailwind सारख्या युटिलिटी-फर्स्ट फ्रेमवर्क्स शिका - [ ] CSS सुधारणा करून ओपन सोर्स प्रोजेक्ट्समध्ये योगदान द्या - [ ] CSS कस्टम प्रॉपर्टीज आणि कंटेनमेंटसारख्या प्रगत CSS संकल्पना मास्टर करा - [ ] मॉड्युलर CSS सह पुनर्वापरयोग्य घटक लायब्ररी तयार करा - [ ] CSS शिकणाऱ्यांना मार्गदर्शन करा आणि डिझाइन ज्ञान सामायिक करा ## 🎯 तुमचा CSS मास्टरी टाइमलाइन ### 🛠️ तुमचा CSS टूलकिट सारांश या लेसननंतर, तुमच्याकडे आता आहे: - Cascade Understanding: स्टाइल्स कसे वारसाहक्काने मिळतात आणि एकमेकांना ओव्हरराइड करतात - Selector Mastery: घटक, क्लासेस, आणि IDs सह अचूक टार्गेटिंग - Positioning Skills: घटकांचे धोरणात्मक प्लेसमेंट आणि लेयरिंग - Visual Design: काचेचे प्रभाव, सावल्या, आणि ट्रान्सपेरन्सी तयार करणे - Responsive Techniques: टक्केवारी-आधारित लेआउट्स जे कोणत्याही स्क्रीनवर अडॅप्ट होतात - Code Organization: स्वच्छ, देखभाल करण्यायोग्य CSS रचना - Modern Practices: रिलेटिव युनिट्स आणि अॅक्सेसिबल डिझाइन पॅटर्न्स वापरणे पुढील पायऱ्या: तुमच्या टेरॅरियममध्ये आता रचना (HTML) आणि शैली (CSS) आहे. अंतिम लेसनमध्ये JavaScript सह इंटरॅक्टिव्हिटी जोडली जाईल! ## असाइनमेंट CSS Refactoring --- अस्वीकरण: हा दस्तऐवज AI भाषांतर सेवा Co-op Translator वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरे त्रुटी किंवा अचूकतेच्या अभावाने युक्त असू शकतात. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.
Projek Terrarium Bahagian 1: Pengenalan kepada HTML
HTML, atau HyperText Markup Language, adalah asas kepada setiap laman web yang pernah anda lawati. Fikirkan HTML sebagai rangka yang memberikan struktur kepada halaman web – ia menentukan di mana kandungan diletakkan, bagaimana ia diatur, dan apa yang setiap bahagian wakili. Walaupun CSS nanti akan "menghias" HTML anda dengan warna dan susunan, dan JavaScript akan menghidupkannya dengan interaktiviti, HTML menyediakan struktur penting yang menjadikan segalanya mungkin. Dalam pelajaran ini, anda akan mencipta struktur HTML untuk antara muka terrarium maya. Projek praktikal ini akan mengajar anda konsep asas HTML sambil membina sesuatu yang menarik secara visual. Anda akan belajar bagaimana mengatur kandungan menggunakan elemen semantik, bekerja dengan imej, dan mencipta asas untuk aplikasi web interaktif. Pada akhir pelajaran ini, anda akan mempunyai halaman HTML yang berfungsi memaparkan imej tumbuhan dalam lajur yang teratur, sedia untuk dihias dalam pelajaran seterusnya. Jangan risau jika ia kelihatan asas pada mulanya – itulah yang sepatutnya dilakukan oleh HTML sebelum CSS menambah sentuhan visual. ## Kuiz Pra-Pelajaran Kuiz pra-pelajaran ## Menyediakan Projek Anda Sebelum kita mula dengan kod HTML, mari kita sediakan ruang kerja yang sesuai untuk projek terrarium anda. Membuat struktur fail yang teratur dari awal adalah tabiat penting yang akan membantu anda sepanjang perjalanan pembangunan web anda. ### Tugasan: Cipta Struktur Projek Anda Anda akan mencipta folder khusus untuk projek terrarium anda dan menambah fail HTML pertama anda. Berikut adalah dua pendekatan yang boleh anda gunakan: Pilihan 1: Menggunakan Visual Studio Code 1. Buka Visual Studio Code 2. Klik "File" → "Open Folder" atau gunakan Ctrl+K, Ctrl+O (Windows/Linux) atau Cmd+K, Cmd+O (Mac) 3. Cipta folder baru bernama terrarium dan pilihnya 4. Dalam panel Explorer, klik ikon "New File" 5. Namakan fail anda index.html Pilihan 2: Menggunakan Perintah Terminal Apa yang dicapai oleh perintah ini: - Mencipta direktori baru bernama terrarium untuk projek anda - Navigasi ke dalam direktori terrarium - Mencipta fail kosong index.html - Membuka fail dalam Visual Studio Code untuk penyuntingan ## Memahami Struktur Dokumen HTML Setiap dokumen HTML mengikuti struktur tertentu yang diperlukan oleh pelayar untuk memahami dan memaparkan dengan betul. Fikirkan struktur ini seperti surat rasmi – ia mempunyai elemen yang diperlukan dalam susunan tertentu yang membantu penerima (dalam kes ini, pelayar) memproses kandungan dengan betul. Mari kita mulakan dengan menambah asas penting yang diperlukan oleh setiap dokumen HTML. ### Deklarasi DOCTYPE dan Elemen Root Dua baris pertama mana-mana fail HTML berfungsi sebagai "pengenalan" dokumen kepada pelayar: Memahami apa yang dilakukan oleh kod ini: - Mengisytiharkan jenis dokumen sebagai HTML5 menggunakan <!DOCTYPE html> - Mencipta elemen root <html> yang akan mengandungi semua kandungan halaman - Menetapkan piawaian web moden untuk paparan pelayar yang betul - Memastikan paparan konsisten di pelbagai pelayar dan peranti ### 🔄 Pemeriksaan Pedagogi Berhenti dan Renungkan: Sebelum meneruskan, pastikan anda memahami: - ✅ Mengapa setiap dokumen HTML memerlukan deklarasi DOCTYPE - ✅ Apa yang terkandung dalam elemen root <html> - ✅ Bagaimana struktur ini membantu pelayar memaparkan halaman dengan betul Ujian Kendiri Cepat: Bolehkah anda menerangkan dengan kata-kata anda sendiri apa maksud "paparan yang mematuhi piawaian"? ## Menambah Metadata Dokumen Penting Bahagian <head> dalam dokumen HTML mengandungi maklumat penting yang diperlukan oleh pelayar dan enjin carian, tetapi yang tidak dilihat secara langsung oleh pelawat di halaman. Fikirkan ia sebagai maklumat "di belakang tabir" yang membantu laman web anda berfungsi dengan betul dan muncul dengan betul di pelbagai peranti dan platform. Metadata ini memberitahu pelayar bagaimana untuk memaparkan halaman anda, kod pengekodan watak yang hendak digunakan, dan bagaimana untuk mengendalikan saiz skrin yang berbeza – semua ini penting untuk mencipta laman web yang profesional dan boleh diakses. ### Tugasan: Tambah Bahagian Kepala Dokumen Masukkan bahagian <head> ini di antara tag pembuka dan penutup <html> anda: Memecahkan apa yang dicapai oleh setiap elemen: - Menetapkan tajuk halaman yang muncul di tab pelayar dan hasil carian - Menentukan pengekodan watak UTF-8 untuk paparan teks yang betul di seluruh dunia - Memastikan keserasian dengan versi moden Internet Explorer - Mengkonfigurasi reka bentuk responsif dengan menetapkan viewport untuk sepadan dengan lebar peranti - Mengawal tahap zum awal untuk memaparkan kandungan pada saiz semula jadi ## Membina Badan Dokumen Elemen <body> mengandungi semua kandungan yang boleh dilihat di laman web anda – segala-galanya yang pengguna akan lihat dan berinteraksi. Walaupun bahagian <head> memberikan arahan kepada pelayar, bahagian <body> mengandungi kandungan sebenar: teks, imej, butang, dan elemen lain yang mencipta antara muka pengguna anda. Mari kita tambah struktur badan dan fahami bagaimana tag HTML bekerjasama untuk mencipta kandungan yang bermakna. ### Memahami Struktur Tag HTML HTML menggunakan tag berpasangan untuk menentukan elemen. Kebanyakan tag mempunyai tag pembuka seperti <p> dan tag penutup seperti </p>, dengan kandungan di antara: <p>Hello, world!</p>. Ini mencipta elemen perenggan yang mengandungi teks "Hello, world!". ### Tugasan: Tambah Elemen Badan Kemas kini fail HTML anda untuk memasukkan elemen <body>: Inilah yang disediakan oleh struktur lengkap ini: - Menetapkan rangka kerja dokumen HTML5 asas - Termasuk metadata penting untuk paparan pelayar yang betul - Mencipta badan kosong yang sedia untuk kandungan yang boleh dilihat - Mengikuti amalan terbaik pembangunan web moden Sekarang anda sudah bersedia untuk menambah elemen yang boleh dilihat pada terrarium anda. Kita akan menggunakan elemen <div> sebagai bekas untuk mengatur bahagian kandungan yang berbeza, dan elemen <img> untuk memaparkan imej tumbuhan. ### Bekerja dengan Imej dan Bekas Susun Atur Imej adalah istimewa dalam HTML kerana ia menggunakan tag "penutup sendiri". Tidak seperti elemen seperti <p></p> yang membungkus kandungan, tag <img> mengandungi semua maklumat yang diperlukan dalam tag itu sendiri menggunakan atribut seperti src untuk laluan fail imej dan alt untuk kebolehaksesan. Sebelum menambah imej ke HTML anda, anda perlu mengatur fail projek anda dengan betul dengan mencipta folder imej dan menambah grafik tumbuhan. Pertama, sediakan imej anda: 1. Cipta folder bernama images di dalam folder projek terrarium anda 2. Muat turun imej tumbuhan dari folder penyelesaian (14 imej tumbuhan keseluruhan) 3. Salin semua imej tumbuhan ke dalam folder images baru anda ### Tugasan: Cipta Susun Atur Paparan Tumbuhan Sekarang tambahkan imej tumbuhan yang diatur dalam dua lajur di antara tag <body></body> anda: Langkah demi langkah, inilah yang berlaku dalam kod ini: - Mencipta bekas halaman utama dengan id="page" untuk memegang semua kandungan - Menetapkan dua bekas lajur: left-container dan right-container - Mengatur 7 tumbuhan dalam lajur kiri dan 7 tumbuhan dalam lajur kanan - Membungkus setiap imej tumbuhan dalam div plant-holder untuk kedudukan individu - Menggunakan nama kelas yang konsisten untuk penggayaan CSS dalam pelajaran seterusnya - Menetapkan ID unik kepada setiap imej tumbuhan untuk interaksi JavaScript kemudian - Termasuk laluan fail yang betul menunjuk ke folder imej ### 🔄 Pemeriksaan Pedagogi Memahami Struktur: Luangkan masa untuk menyemak struktur HTML anda: - ✅ Bolehkah anda mengenal pasti bekas utama dalam susun atur anda? - ✅ Adakah anda memahami mengapa setiap imej mempunyai ID unik? - ✅ Bagaimana anda akan menerangkan tujuan div plant-holder? Pemeriksaan Visual: Buka fail HTML anda dalam pelayar. Anda sepatutnya melihat: - Senarai asas imej tumbuhan - Imej yang diatur dalam dua lajur - Susun atur yang mudah dan tidak bergaya Ingat: Penampilan asas ini adalah apa yang sepatutnya kelihatan sebelum penggayaan CSS! Dengan markup ini ditambah, tumbuhan akan muncul di skrin, walaupun ia belum kelihatan menarik – itulah tujuan CSS dalam pelajaran seterusnya! Buat masa ini, anda mempunyai asas HTML yang kukuh yang mengatur kandungan anda dengan betul dan mengikuti amalan terbaik kebolehaksesan. ## Menggunakan HTML Semantik untuk Kebolehaksesan HTML semantik bermaksud memilih elemen HTML berdasarkan makna dan tujuannya, bukan hanya penampilannya. Apabila anda menggunakan markup semantik, anda menyampaikan struktur dan makna kandungan anda kepada pelayar, enjin carian, dan teknologi bantuan seperti pembaca skrin. Pendekatan ini menjadikan laman web anda lebih mudah diakses oleh pengguna dengan kecacatan dan membantu enjin carian memahami kandungan anda dengan lebih baik. Ia adalah prinsip asas pembangunan web moden yang mencipta pengalaman yang lebih baik untuk semua orang. ### Menambah Tajuk Halaman Semantik Mari kita tambahkan tajuk yang sesuai untuk halaman terrarium anda. Masukkan baris ini tepat selepas tag pembuka <body>: Mengapa markup semantik penting: - Membantu pembaca skrin menavigasi dan memahami struktur halaman - Meningkatkan pengoptimuman enjin carian (SEO) dengan menjelaskan hierarki kandungan - Memperbaiki kebolehaksesan untuk pengguna dengan masalah penglihatan atau perbezaan kognitif - Mencipta pengalaman pengguna yang lebih baik di semua peranti dan platform - Mengikuti piawaian web dan amalan terbaik untuk pembangunan profesional Contoh pilihan semantik vs. tidak semantik: ## Mencipta Bekas Terrarium Sekarang mari kita tambahkan struktur HTML untuk terrarium itu sendiri – bekas kaca di mana tumbuhan akhirnya akan diletakkan. Bahagian ini menunjukkan konsep penting: HTML menyediakan struktur, tetapi tanpa penggayaan CSS, elemen ini belum kelihatan. Markup terrarium menggunakan nama kelas deskriptif yang akan menjadikan penggayaan CSS intuitif dan mudah diselenggara dalam pelajaran seterusnya. ### Tugasan: Tambah Struktur Terrarium Masukkan markup ini di atas tag </div> terakhir (sebelum tag penutup bekas halaman): Memahami struktur terrarium ini: - Mencipta bekas terrarium utama dengan ID unik untuk penggayaan - Menentukan elemen berasingan untuk setiap komponen visual (atas, dinding, tanah, bawah) - Termasuk elemen bersarang untuk kesan pantulan kaca (elemen berkilat) - Menggunakan nama kelas deskriptif yang jelas menunjukkan tujuan setiap elemen - Menyediakan struktur untuk gaya CSS yang akan mencipta rupa terrarium kaca ### 🔄 Pemeriksaan Pedagogi Penguasaan Struktur HTML: Sebelum meneruskan, pastikan anda boleh: - ✅ Jelaskan perbezaan antara struktur HTML dan penampilan visual - ✅ Kenal pasti elemen HTML semantik vs. tidak semantik - ✅ Terangkan bagaimana markup yang betul memberi manfaat kepada kebolehaksesan - ✅ Kenali struktur pokok dokumen lengkap Uji Pemahaman Anda: Cuba buka fail HTML anda dalam pelayar dengan JavaScript dimatikan dan CSS dikeluarkan. Ini menunjukkan struktur semantik tulen yang telah anda cipta! --- ## Cabaran Ejen GitHub Copilot Gunakan mod Ejen untuk menyelesaikan cabaran berikut: Penerangan: Cipta struktur HTML semantik untuk bahagian panduan penjagaan tumbuhan yang boleh ditambah kepada projek terrarium. Arahan: Cipta bahagian HTML semantik yang termasuk tajuk utama "Panduan Penjagaan Tumbuhan", tiga subseksyen dengan tajuk "Penyiraman", "Keperluan Cahaya", dan "Penjagaan Tanah", setiap satu mengandungi perenggan maklumat penjagaan tumbuhan. Gunakan tag HTML semantik yang sesuai seperti <section>, <h2>, <h3>, dan <p> untuk menyusun kandungan dengan betul. Ketahui lebih lanjut tentang mod ejen di sini. ## Cabaran Sejarah HTML Belajar Tentang Evolusi Web HTML telah berkembang dengan ketara sejak Tim Berners-Lee mencipta pelayar web pertama di CERN pada tahun 1990. Beberapa tag lama seperti <marquee> kini telah ditamatkan kerana ia tidak sesuai dengan standard kebolehaksesan moden dan prinsip reka bentuk responsif. Cuba Eksperimen Ini: 1. Balut sementara tajuk <h1> anda dalam tag <marquee>: <marquee><h1>Terrarium Saya</h1></marquee> 2. Buka halaman anda dalam pelayar dan perhatikan kesan tatal 3. Pertimbangkan mengapa tag ini telah ditamatkan (petunjuk: fikirkan tentang pengalaman pengguna dan kebolehaksesan) 4. Keluarkan tag <marquee> dan kembali kepada markup semantik Soalan Refleksi: - Bagaimana tajuk yang menatal boleh memberi kesan kepada pengguna dengan gangguan penglihatan atau sensitiviti pergerakan? - Teknik CSS moden apa yang boleh mencapai kesan visual serupa dengan lebih kebolehaksesan? - Mengapa penting untuk menggunakan standard web semasa dan bukannya elemen yang telah ditamatkan? Terokai lebih lanjut tentang elemen HTML yang usang dan ditamatkan untuk memahami bagaimana standard web berkembang untuk meningkatkan pengalaman pengguna. ## Kuiz Selepas Kuliah Kuiz selepas kuliah ## Ulasan & Kajian Kendiri Mendalami Pengetahuan HTML Anda HTML telah menjadi asas web selama lebih 30 tahun, berkembang daripada bahasa markup dokumen yang ringkas kepada platform canggih untuk membina aplikasi interaktif. Memahami evolusi ini membantu anda menghargai standard web moden dan membuat keputusan pembangunan yang lebih baik. Laluan Pembelajaran yang Disyorkan: 1. Sejarah dan Evolusi HTML - Selidik garis masa dari HTML 1.0 hingga HTML5 - Terokai mengapa tag tertentu telah ditamatkan (kebolehaksesan, mesra mudah alih, penyelenggaraan) - Selidik ciri HTML yang muncul dan cadangan 2. Mendalami HTML Semantik - Kajian senarai lengkap elemen semantik HTML5 - Latih mengenal pasti bila menggunakan <article>, <section>, <aside>, dan <main> - Belajar tentang atribut ARIA untuk kebolehaksesan yang dipertingkatkan 3. Pembangunan Web Moden - Terokai membina laman web responsif di Microsoft Learn - Fahami bagaimana HTML berintegrasi dengan CSS dan JavaScript - Belajar tentang prestasi web dan amalan terbaik SEO Soalan Refleksi: - Tag HTML yang telah ditamatkan mana yang anda temui, dan mengapa ia telah dikeluarkan? - Ciri HTML baru apa yang dicadangkan untuk versi masa depan? - Bagaimana HTML semantik menyumbang kepada kebolehaksesan web dan SEO? ### ⚡ Apa Yang Boleh Anda Lakukan Dalam 5 Minit Seterusnya - [ ] Buka DevTools (F12) dan periksa struktur HTML laman web kegemaran anda - [ ] Cipta fail HTML ringkas dengan tag asas: <h1>, <p>, dan <img> - [ ] Sahkan HTML anda menggunakan Validator HTML W3C dalam talian - [ ] Cuba tambah komen pada HTML anda menggunakan <!-- komen --> ### 🎯 Apa Yang Boleh Anda Capai Dalam Satu Jam - [ ] Lengkapkan kuiz selepas pelajaran dan ulas konsep HTML semantik - [ ] Bina laman web ringkas tentang diri anda menggunakan struktur HTML yang betul - [ ] Bereksperimen dengan tahap tajuk yang berbeza dan tag pemformatan teks - [ ] Tambah imej dan pautan untuk berlatih integrasi multimedia - [ ] Selidik ciri HTML5 yang belum anda cuba ### 📅 Perjalanan HTML Anda Selama Seminggu - [ ] Lengkapkan tugasan projek terrarium dengan markup semantik - [ ] Cipta laman web yang boleh diakses menggunakan label dan peranan ARIA - [ ] Latih penciptaan borang dengan pelbagai jenis input - [ ] Terokai API HTML5 seperti localStorage atau geolocation - [ ] Kajian corak HTML responsif dan reka bentuk berorientasikan mudah alih - [ ] Ulas kod HTML pemaju lain untuk amalan terbaik ### 🌟 Asas Web Anda Selama Sebulan - [ ] Bina laman web portfolio yang mempamerkan penguasaan HTML anda - [ ] Belajar templat HTML dengan rangka kerja seperti Handlebars - [ ] Menyumbang kepada projek sumber terbuka dengan meningkatkan dokumentasi HTML - [ ] Kuasai konsep HTML lanjutan seperti elemen tersuai - [ ] Integrasi HTML dengan rangka kerja CSS dan pustaka JavaScript - [ ] Mentor orang lain yang belajar asas HTML ## 🎯 Garis Masa Penguasaan HTML Anda ### 🛠️ Ringkasan Alat HTML Anda Selepas menyelesaikan pelajaran ini, anda kini mempunyai: - Struktur Dokumen: Asas HTML5 lengkap dengan DOCTYPE yang betul - Markup Semantik: Tag bermakna yang meningkatkan kebolehaksesan dan SEO - Integrasi Imej: Amalan organisasi fail dan teks alt yang betul - Bekas Susun Atur: Penggunaan div strategik dengan nama kelas deskriptif - Kesedaran Kebolehaksesan: Pemahaman navigasi pembaca skrin - Standard Moden: Amalan HTML5 semasa dan pengetahuan tag yang telah ditamatkan - Asas Projek: Asas kukuh untuk gaya CSS dan interaktiviti JavaScript Langkah Seterusnya: Struktur HTML anda sudah bersedia untuk gaya CSS! Asas semantik yang telah anda bina akan memudahkan pelajaran seterusnya untuk difahami. ## Tugasan Latih HTML anda: Bina mockup blog --- Penafian: Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI Co-op Translator. Walaupun kami berusaha untuk ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat penting, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.
Projek Terrarium Bahagian 2: Pengenalan kepada CSS
Ingat bagaimana HTML terrarium anda kelihatan agak asas? CSS adalah tempat kita mengubah struktur biasa itu menjadi sesuatu yang menarik secara visual. Jika HTML seperti membina rangka rumah, maka CSS adalah segala-galanya yang membuatkan ia terasa seperti rumah - warna cat, susunan perabot, pencahayaan, dan bagaimana bilik-bilik disusun. Fikirkan bagaimana Istana Versailles bermula sebagai pondok memburu yang sederhana, tetapi perhatian yang teliti terhadap hiasan dan susun atur mengubahnya menjadi salah satu bangunan paling megah di dunia. Hari ini, kita akan mengubah terrarium anda daripada berfungsi kepada yang lebih kemas. Anda akan belajar bagaimana meletakkan elemen dengan tepat, membuat susun atur yang responsif kepada pelbagai saiz skrin, dan mencipta daya tarikan visual yang menjadikan laman web menarik. Menjelang akhir pelajaran ini, anda akan melihat bagaimana gaya CSS yang strategik boleh meningkatkan projek anda dengan ketara. Mari tambahkan gaya pada terrarium anda. ## Kuiz Pra-Kuliah Kuiz pra-kuliah ## Bermula dengan CSS CSS sering dianggap hanya untuk "mencantikkan sesuatu," tetapi ia mempunyai tujuan yang lebih luas. CSS seperti menjadi pengarah filem - anda mengawal bukan sahaja bagaimana semuanya kelihatan, tetapi bagaimana ia bergerak, bertindak balas terhadap interaksi, dan menyesuaikan diri dengan situasi yang berbeza. CSS moden sangat berkemampuan. Anda boleh menulis kod yang secara automatik menyesuaikan susun atur untuk telefon, tablet, dan komputer meja. Anda boleh mencipta animasi yang lancar untuk memandu perhatian pengguna ke tempat yang diperlukan. Hasilnya boleh menjadi sangat mengagumkan apabila semuanya berfungsi bersama. Apa yang akan kita capai dalam pelajaran ini: - Mencipta reka bentuk visual lengkap untuk terrarium anda menggunakan teknik CSS moden - Meneroka konsep asas seperti cascade, inheritance, dan selector CSS - Melaksanakan strategi kedudukan dan susun atur yang responsif - Membina bekas terrarium menggunakan bentuk dan gaya CSS ### Prasyarat Anda sepatutnya telah menyiapkan struktur HTML untuk terrarium anda dari pelajaran sebelumnya dan bersedia untuk digayakan. ### Menyediakan Fail CSS Anda Sebelum kita mula menggaya, kita perlu menghubungkan CSS ke HTML kita. Sambungan ini memberitahu pelayar di mana untuk mencari arahan gaya untuk terrarium kita. Dalam folder terrarium anda, buat fail baru bernama style.css, kemudian pautkannya dalam bahagian <head> dokumen HTML anda: Apa yang dilakukan oleh kod ini: - Mewujudkan sambungan antara fail HTML dan CSS anda - Memberitahu pelayar untuk memuatkan dan menggunakan gaya dari style.css - Menggunakan atribut rel="stylesheet" untuk menentukan ini adalah fail CSS - Merujuk laluan fail dengan href="./style.css" ## Memahami CSS Cascade Pernah tertanya-tanya mengapa CSS dipanggil "Cascading" Style Sheets? Gaya mengalir seperti air terjun, dan kadang-kadang mereka bertentangan antara satu sama lain. Fikirkan bagaimana struktur perintah tentera berfungsi - perintah umum mungkin mengatakan "semua tentera memakai hijau," tetapi perintah khusus kepada unit anda mungkin mengatakan "pakai pakaian biru untuk upacara." Arahan yang lebih spesifik akan diutamakan. CSS mengikuti logik yang serupa, dan memahami hierarki ini menjadikan penyahpepijatan lebih mudah diurus. ### Mencuba Keutamaan Cascade Mari kita lihat cascade dalam tindakan dengan mencipta konflik gaya. Pertama, tambahkan gaya inline pada tag <h1> anda: Apa yang dilakukan oleh kod ini: - Menerapkan warna merah secara langsung pada elemen <h1> menggunakan gaya inline - Menggunakan atribut style untuk menyematkan CSS secara langsung dalam HTML - Mencipta peraturan gaya keutamaan tertinggi untuk elemen tertentu ini Seterusnya, tambahkan peraturan ini ke fail style.css anda: Dalam kod di atas, kita telah: - Menentukan peraturan CSS yang menyasarkan semua elemen <h1> - Menetapkan warna teks kepada biru menggunakan stylesheet luaran - Mencipta peraturan keutamaan yang lebih rendah berbanding gaya inline ✅ Semak Pengetahuan: Warna apa yang dipaparkan dalam aplikasi web anda? Mengapa warna itu menang? Bolehkah anda memikirkan senario di mana anda mungkin mahu mengatasi gaya? ## Tindakan Pewarisan CSS Pewarisan CSS berfungsi seperti genetik - elemen mewarisi sifat tertentu daripada elemen induknya. Jika anda menetapkan keluarga fon pada elemen body, semua teks di dalamnya secara automatik menggunakan fon yang sama. Ia serupa dengan bagaimana ciri-ciri fizikal keluarga diwarisi dari generasi ke generasi tanpa perlu ditentukan untuk setiap individu. Namun, tidak semua perkara diwarisi. Gaya teks seperti fon dan warna diwarisi, tetapi sifat susun atur seperti margin dan sempadan tidak. Sama seperti anak-anak mungkin mewarisi ciri fizikal tetapi tidak pilihan fesyen ibu bapa mereka. ### Memerhati Pewarisan Fon Mari lihat pewarisan dalam tindakan dengan menetapkan keluarga fon pada elemen <body>: Memecahkan apa yang berlaku di sini: - Menetapkan keluarga fon untuk seluruh halaman dengan menyasarkan elemen <body> - Menggunakan susunan fon dengan pilihan sandaran untuk keserasian pelayar yang lebih baik - Menerapkan fon sistem moden yang kelihatan hebat di pelbagai sistem operasi - Memastikan semua elemen anak mewarisi fon ini kecuali secara khusus diatasi Buka alat pembangun pelayar anda (F12), navigasi ke tab Elemen, dan periksa elemen <h1> anda. Anda akan melihat bahawa ia mewarisi keluarga fon dari body: ✅ Masa Eksperimen: Cuba tetapkan sifat lain yang boleh diwarisi pada <body> seperti color, line-height, atau text-align. Apa yang berlaku pada tajuk dan elemen lain anda? ### 🔄 Semakan Pedagogi Pemahaman Asas CSS: Sebelum bergerak ke selector, pastikan anda boleh: - ✅ Jelaskan perbezaan antara cascade dan pewarisan - ✅ Ramalkan gaya mana yang akan menang dalam konflik kekhususan - ✅ Kenal pasti sifat mana yang diwarisi daripada elemen induk - ✅ Sambungkan fail CSS ke HTML dengan betul Ujian Pantas: Jika anda mempunyai gaya ini, warna apa yang akan dipaparkan pada <h1> di dalam <div class="special">? Jawapan: Merah (selector elemen secara langsung menyasarkan h1) ## Menguasai Selector CSS Selector CSS adalah cara anda menyasarkan elemen tertentu untuk digayakan. Ia berfungsi seperti memberikan arahan yang tepat - bukannya mengatakan "rumah itu," anda mungkin mengatakan "rumah biru dengan pintu merah di Jalan Maple." CSS menyediakan pelbagai cara untuk menjadi spesifik, dan memilih selector yang betul adalah seperti memilih alat yang sesuai untuk tugas tersebut. Kadang-kadang anda perlu menggaya setiap pintu di kawasan kejiranan, dan kadang-kadang hanya satu pintu tertentu. ### Selector Elemen (Tag) Selector elemen menyasarkan elemen HTML berdasarkan nama tag mereka. Ia sesuai untuk menetapkan gaya asas yang digunakan secara meluas di seluruh halaman anda: Memahami gaya ini: - Menetapkan tipografi yang konsisten di seluruh halaman dengan selector body - Menghapuskan margin dan padding lalai pelayar untuk kawalan yang lebih baik - Menggayakan semua elemen tajuk dengan warna, penjajaran, dan jarak - Menggunakan unit rem untuk saiz fon yang boleh diskalakan dan boleh diakses Walaupun selector elemen berfungsi dengan baik untuk gaya umum, anda memerlukan selector yang lebih spesifik untuk menggaya komponen individu seperti tumbuhan dalam terrarium anda. ### Selector ID untuk Elemen Unik Selector ID menggunakan simbol # dan menyasarkan elemen dengan atribut id tertentu. Oleh kerana ID mesti unik pada satu halaman, ia sesuai untuk menggaya elemen individu yang istimewa seperti bekas tumbuhan kiri dan kanan kita. Mari kita cipta gaya untuk bekas sisi terrarium kita di mana tumbuhan akan diletakkan: Apa yang dicapai oleh kod ini: - Meletakkan bekas di tepi kiri dan kanan menggunakan kedudukan absolute - Menggunakan unit vh (ketinggian viewport) untuk ketinggian responsif yang menyesuaikan diri dengan saiz skrin - Menerapkan box-sizing: border-box supaya padding termasuk dalam jumlah lebar - Menghapuskan unit px yang tidak diperlukan dari nilai sifar untuk kod yang lebih bersih - Menetapkan warna latar belakang yang lembut yang lebih mudah pada mata daripada kelabu terang ✅ Cabaran Kualiti Kod: Perhatikan bagaimana CSS ini melanggar prinsip DRY (Don't Repeat Yourself). Bolehkah anda merombaknya menggunakan ID dan kelas? Pendekatan yang Diperbaiki: ### Selector Kelas untuk Gaya Boleh Digunakan Semula Selector kelas menggunakan simbol . dan sesuai apabila anda ingin menerapkan gaya yang sama pada pelbagai elemen. Tidak seperti ID, kelas boleh digunakan semula di seluruh HTML anda, menjadikannya ideal untuk corak gaya yang konsisten. Dalam terrarium kita, setiap tumbuhan memerlukan gaya yang serupa tetapi juga memerlukan kedudukan individu. Kita akan menggunakan gabungan kelas untuk gaya bersama dan ID untuk kedudukan unik. Berikut adalah struktur HTML untuk setiap tumbuhan: Elemen utama dijelaskan: - Menggunakan class="plant-holder" untuk gaya bekas yang konsisten di semua tumbuhan - Menerapkan class="plant" untuk gaya dan tingkah laku imej bersama - Termasuk id="plant1" unik untuk kedudukan individu dan interaksi JavaScript - Menyediakan teks alt deskriptif untuk kebolehaksesan pembaca skrin Sekarang tambahkan gaya ini ke fail style.css anda: Memecahkan gaya ini: - Mencipta kedudukan relatif untuk pemegang tumbuhan untuk mewujudkan konteks kedudukan - Menetapkan setiap pemegang tumbuhan kepada ketinggian 13%, memastikan semua tumbuhan muat secara menegak tanpa menatal - Mengalihkan pemegang sedikit ke kiri untuk lebih memusatkan tumbuhan dalam bekas mereka - Membolehkan tumbuhan berskala responsif dengan sifat max-width dan max-height - Menggunakan z-index untuk melapisi tumbuhan di atas elemen lain dalam terrarium - Menambah kesan hover halus dengan peralihan CSS untuk interaksi pengguna yang lebih baik ✅ Pemikiran Kritikal: Mengapa kita memerlukan kedua-dua selector .plant-holder dan .plant? Apa yang akan berlaku jika kita cuba menggunakan hanya satu? ## Memahami Kedudukan CSS Kedudukan CSS seperti menjadi pengarah pentas untuk sebuah drama - anda mengarahkan di mana setiap pelakon berdiri dan bagaimana mereka bergerak di sekitar pentas. Sesetengah pelakon mengikuti formasi standard, manakala yang lain memerlukan kedudukan tertentu untuk kesan dramatik. Setelah anda memahami kedudukan, banyak cabaran susun atur menjadi lebih mudah diurus. Perlu bar navigasi yang kekal di bahagian atas semasa pengguna menatal? Kedudukan mengendalikan itu. Mahu tooltip yang muncul di lokasi tertentu? Itu juga kedudukan. ### Lima Nilai Kedudukan ### Kedudukan dalam Terrarium Kita Terrarium kita menggunakan gabungan strategik jenis kedudukan untuk mencipta susun atur yang diingini: Memahami strategi kedudukan: - Bekas absolute dikeluarkan dari aliran dokumen biasa dan dipasangkan ke tepi skrin - Pemegang tumbuhan relatif mencipta konteks kedudukan sambil kekal dalam aliran dokumen - Tumbuhan absolute boleh diletakkan dengan tepat dalam bekas relatif mereka - Gabungan ini membolehkan tumbuhan disusun secara menegak sambil boleh diposisikan secara individu ✅ Masa Eksperimen: Cuba ubah nilai kedudukan dan perhatikan hasilnya: - Apa yang berlaku jika anda menukar .container daripada absolute kepada relative? - Bagaimana susun atur berubah jika .plant-holder menggunakan absolute dan bukannya relative? - Apa yang berlaku apabila anda menukar .plant kepada kedudukan relative? ### 🔄 Semakan Pedagogi Penguasaan Kedudukan CSS: Berhenti sejenak untuk mengesahkan pemahaman anda: - ✅ Bolehkah anda menerangkan mengapa tumbuhan memerlukan kedudukan absolute untuk seret dan lepas? - ✅ Adakah anda memahami bagaimana bekas relative mencipta konteks kedudukan? - ✅ Mengapa bekas sisi menggunakan kedudukan absolute? - ✅ Apa yang akan berlaku jika anda menghapuskan deklarasi kedudukan sepenuhnya? Hubungan Dunia Sebenar: Fikirkan bagaimana kedudukan CSS mencerminkan susun atur dunia sebenar: - Static: Buku di rak (susunan semula jadi) - Relative: Menggerakkan buku sedikit tetapi mengekalkan tempatnya - Absolute: Meletakkan penanda buku pada nombor halaman tertentu - Fixed: Nota lekat yang kekal kelihatan semasa anda membalik halaman ## Membina Terrarium dengan CSS Sekarang kita akan membina balang kaca menggunakan CSS sahaja - tanpa imej atau perisian grafik. Mencipta kaca yang kelihatan realistik, bayang-bayang, dan kesan kedalaman menggunakan kedudukan dan ketelusan menunjukkan keupayaan visual CSS. Teknik ini mencerminkan bagaimana arkitek dalam gerakan Bauhaus menggunakan bentuk geometri mudah untuk mencipta struktur yang kompleks dan indah. Setelah anda memahami prinsip ini, anda akan mengenali teknik CSS di sebalik banyak reka bentuk web. ### Membina Komponen Balang Kaca Mari kita bina balang terrarium secara berperingkat. Setiap bahagian menggunakan kedudukan absolute dan saiz berdasarkan peratusan untuk reka bentuk responsif: Memahami pembinaan terrarium: - Menggunakan dimensi berdasarkan peratusan untuk penskalaan responsif di semua saiz skrin - Meletakkan elemen secara absolute untuk menyusun dan menyelaraskannya dengan tepat - Mengaplikasikan nilai ketelusan yang berbeza untuk mencipta kesan ketelusan kaca - Melaksanakan lapisan z-index supaya tumbuhan kelihatan di dalam balang - Menambah bayang-bayang kotak halus dan border-radius yang diperhalusi untuk penampilan yang lebih realistik ### Reka Bentuk Responsif dengan Peratusan Perhatikan bagaimana semua dimensi menggunakan peratusan dan bukannya nilai piksel tetap: Mengapa ini penting: - Memastikan terrarium berskala secara berkadar pada mana-mana saiz skrin - Menjaga hubungan visual antara komponen balang - Memberikan pengalaman yang konsisten dari telefon bimbit ke monitor desktop besar - Membolehkan reka bentuk menyesuaikan tanpa merosakkan susun atur visual ### Unit CSS dalam Tindakan Kami menggunakan unit rem untuk border-radius, yang berskala relatif kepada saiz fon akar. Ini mencipta reka bentuk yang lebih mudah diakses yang menghormati keutamaan fon pengguna. Ketahui lebih lanjut tentang unit relatif CSS dalam spesifikasi rasmi. ✅ Eksperimen Visual: Cuba ubah nilai ini dan perhatikan kesannya: - Tukar ketelusan balang dari 0.5 ke 0.8 – bagaimana ini mempengaruhi penampilan kaca? - Laraskan warna tanah dari #3a241d ke #8B4513 – apakah kesan visualnya? - Ubah z-index tanah kepada 2 – apa yang berlaku pada lapisan? ### 🔄 Semakan Pedagogi Pemahaman Reka Bentuk Visual CSS: Sahkan pemahaman anda tentang visual CSS: - ✅ Bagaimana dimensi berdasarkan peratusan mencipta reka bentuk responsif? - ✅ Mengapa ketelusan mencipta kesan ketelusan kaca? - ✅ Apakah peranan z-index dalam melapisi elemen? - ✅ Bagaimana nilai border-radius mencipta bentuk balang? Prinsip Reka Bentuk: Perhatikan bagaimana kita membina visual kompleks daripada bentuk mudah: 1. Segi empat → Segi empat bulat → Komponen balang 2. Warna rata → Ketelusan → Kesan kaca 3. Elemen individu → Komposisi berlapis → Penampilan 3D --- ## Cabaran Ejen GitHub Copilot 🚀 Gunakan mod Ejen untuk melengkapkan cabaran berikut: Penerangan: Cipta animasi CSS yang membuatkan tumbuhan terrarium bergoyang perlahan-lahan, mensimulasikan kesan angin semula jadi. Ini akan membantu anda berlatih animasi CSS, transformasi, dan keyframe sambil meningkatkan daya tarikan visual terrarium anda. Arahan: Tambahkan animasi keyframe CSS untuk membuat tumbuhan dalam terrarium bergoyang perlahan dari sisi ke sisi. Cipta animasi bergoyang yang memutar setiap tumbuhan sedikit (2-3 darjah) ke kiri dan kanan dengan durasi 3-4 saat, dan aplikasikan pada kelas .plant. Pastikan animasi berulang tanpa henti dan mempunyai fungsi easing untuk pergerakan semula jadi. Ketahui lebih lanjut tentang mod ejen di sini. ## 🚀 Cabaran: Menambah Refleksi Kaca Bersedia untuk meningkatkan terrarium anda dengan refleksi kaca yang realistik? Teknik ini akan menambah kedalaman dan realisme pada reka bentuk. Anda akan mencipta sorotan halus yang mensimulasikan bagaimana cahaya memantul dari permukaan kaca. Pendekatan ini serupa dengan bagaimana pelukis Renaissance seperti Jan van Eyck menggunakan cahaya dan pantulan untuk membuat kaca yang dilukis kelihatan tiga dimensi. Berikut adalah apa yang anda sasarkan: Cabaran anda: - Cipta bentuk bujur putih atau warna terang untuk refleksi kaca - Letakkan mereka secara strategik di sebelah kiri balang - Aplikasikan kesan ketelusan dan kabur yang sesuai untuk pantulan cahaya yang realistik - Gunakan border-radius untuk mencipta bentuk organik seperti gelembung - Eksperimen dengan gradien atau bayang-bayang kotak untuk realisme yang lebih baik ## Kuiz Selepas Kuliah Kuiz selepas kuliah ## Luaskan Pengetahuan CSS Anda CSS mungkin terasa kompleks pada awalnya, tetapi memahami konsep asas ini memberikan asas yang kukuh untuk teknik yang lebih maju. Bidang pembelajaran CSS seterusnya: - Flexbox - memudahkan penjajaran dan pengagihan elemen - CSS Grid - menyediakan alat yang kuat untuk mencipta susun atur kompleks - CSS Variables - mengurangkan pengulangan dan meningkatkan kebolehselenggaraan - Reka bentuk responsif - memastikan laman web berfungsi dengan baik di pelbagai saiz skrin ### Sumber Pembelajaran Interaktif Amalkan konsep ini dengan permainan interaktif yang menyeronokkan: - 🐸 Flexbox Froggy - Kuasai Flexbox melalui cabaran yang menyeronokkan - 🌱 Grid Garden - Belajar CSS Grid dengan menanam lobak maya - 🎯 CSS Battle - Uji kemahiran CSS anda dengan cabaran pengkodan ### Pembelajaran Tambahan Untuk asas CSS yang komprehensif, lengkapkan modul Microsoft Learn ini: Gayakan aplikasi HTML anda dengan CSS ### ⚡ Apa yang Anda Boleh Lakukan dalam 5 Minit Seterusnya - [ ] Buka DevTools dan periksa gaya CSS di mana-mana laman web menggunakan panel Elemen - [ ] Cipta fail CSS ringkas dan pautkan ke halaman HTML - [ ] Cuba tukar warna menggunakan kaedah yang berbeza: hex, RGB, dan warna bernama - [ ] Amalkan model kotak dengan menambah padding dan margin pada div ### 🎯 Apa yang Anda Boleh Capai Dalam Satu Jam - [ ] Lengkapkan kuiz selepas pelajaran dan semak asas CSS - [ ] Gayakan halaman HTML anda dengan fon, warna, dan jarak - [ ] Cipta susun atur ringkas menggunakan flexbox atau grid - [ ] Eksperimen dengan peralihan CSS untuk kesan yang lancar - [ ] Amalkan reka bentuk responsif dengan media queries ### 📅 Pengembaraan CSS Anda Selama Seminggu - [ ] Lengkapkan tugasan gaya terrarium dengan kreativiti - [ ] Kuasai CSS Grid dengan membina susun atur galeri foto - [ ] Belajar animasi CSS untuk menghidupkan reka bentuk anda - [ ] Terokai preprocessor CSS seperti Sass atau Less - [ ] Kajian prinsip reka bentuk dan aplikasikan pada CSS anda - [ ] Analisis dan cipta semula reka bentuk menarik yang anda temui dalam talian ### 🌟 Penguasaan Reka Bentuk Anda Selama Sebulan - [ ] Bina sistem reka bentuk laman web responsif yang lengkap - [ ] Belajar CSS-in-JS atau rangka kerja utiliti seperti Tailwind - [ ] Sumbang kepada projek sumber terbuka dengan penambahbaikan CSS - [ ] Kuasai konsep CSS lanjutan seperti sifat tersuai CSS dan containment - [ ] Cipta perpustakaan komponen boleh guna semula dengan CSS modular - [ ] Bimbing orang lain yang belajar CSS dan kongsi pengetahuan reka bentuk ## 🎯 Garis Masa Penguasaan CSS Anda ### 🛠️ Ringkasan Alat CSS Anda Selepas melengkapkan pelajaran ini, anda kini mempunyai: - Pemahaman Cascade: Bagaimana gaya diwarisi dan menimpa satu sama lain - Penguasaan Pemilih: Penargetan tepat dengan elemen, kelas, dan ID - Kemahiran Kedudukan: Penempatan dan pelapisan elemen yang strategik - Reka Bentuk Visual: Mencipta kesan kaca, bayang-bayang, dan ketelusan - Teknik Responsif: Susun atur berdasarkan peratusan yang menyesuaikan dengan mana-mana skrin - Organisasi Kod: Struktur CSS yang bersih dan boleh diselenggara - Amalan Moden: Menggunakan unit relatif dan corak reka bentuk yang boleh diakses Langkah Seterusnya: Terrarium anda kini mempunyai struktur (HTML) dan gaya (CSS). Pelajaran terakhir akan menambah interaktiviti dengan JavaScript! ## Tugasan Refaktoring CSS --- Penafian: Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI Co-op Translator. Walaupun kami berusaha untuk ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat penting, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.
Terrarium Project Part 1: HTML ကိုမိတ်ဆက်ခြင်း
HTML, သို့မဟုတ် HyperText Markup Language ဟာ သင်သွားရောက်ခဲ့တဲ့ website တစ်ခုချင်းစီရဲ့ အခြေခံအဆောက်အအုံပဲဖြစ်ပါတယ်။ HTML ကို website ရဲ့ အရိုးတစ်ခုလိုပဲ စဉ်းစားနိုင်ပါတယ် – content ကိုဘယ်မှာထားမလဲ၊ ဘယ်လိုစီမံမလဲ၊ အစိတ်အပိုင်းတစ်ခုချင်းစီက ဘာကိုကိုယ်စားပြုလဲဆိုတာကို သတ်မှတ်ပေးပါတယ်။ CSS က HTML ကို အရောင်နဲ့ layout တွေဖြင့် "အဝတ်အစား" ဝတ်ပေးမှာဖြစ်ပြီး၊ JavaScript ကတော့ interactivity ဖြင့် "အသက်" ပေးမှာဖြစ်ပါတယ်။ HTML က အခြေခံအဆောက်အအုံကိုပေးပြီး အခြားအရာတွေကိုဖြစ်နိုင်စေပါတယ်။ ဒီသင်ခန်းစာမှာ သင် virtual terrarium interface အတွက် HTML အဆောက်အအုံကို ဖန်တီးပါမယ်။ ဒီလက်တွေ့လုပ်ငန်းက သင်ကို HTML အခြေခံအယူအဆတွေကို သင်ပေးမှာဖြစ်ပြီး၊ visually engaging ဖြစ်တဲ့အရာတစ်ခုကို ဖန်တီးမှာဖြစ်ပါတယ်။ သင် semantic elements တွေကိုသုံးပြီး content ကိုစီမံပုံ၊ images တွေနဲ့အလုပ်လုပ်ပုံ၊ interactive web application အတွက် အခြေခံအဆောက်အအုံကိုဖန်တီးပုံကို သင်ယူပါမယ်။ ဒီသင်ခန်းစာအဆုံးမှာ သင် plant images တွေကို စီမံထားတဲ့ column တွေထဲမှာ ပြသထားတဲ့ HTML page တစ်ခုကို ရရှိမှာဖြစ်ပြီး၊ CSS သင်ခန်းစာမှာ style ပေးဖို့အဆင်သင့်ဖြစ်ပါမယ်။ အစမှာ basic ဖြစ်နေတယ်လို့မပူပါနဲ့ – CSS က visual polish ပေးမယ့်အခါ HTML က အခြေခံအဆောက်အအုံပေးဖို့အတွက် ဒီလို basic ဖြစ်ရတာပဲ။ ## သင်ခန်းစာမတိုင်မီ Quiz Pre-lecture quiz ## Project ကိုစတင်တည်ဆောက်ခြင်း HTML code ကိုစတင်မလုပ်ခင်မှာ သင့် terrarium project အတွက် workspace ကိုတည်ဆောက်ပါ။ စတင်ချိန်မှာ file structure ကိုစီမံထားခြင်းက သင့် web development ခရီးလမ်းတလျှောက် အရေးကြီးတဲ့အကျင့်တစ်ခုဖြစ်ပါတယ်။ ### Task: Project Structure ကိုဖန်တီးပါ သင့် terrarium project အတွက် folder တစ်ခုဖန်တီးပြီး သင့်ရဲ့ပထမ HTML file ကိုထည့်ပါ။ သင်အသုံးပြုနိုင်တဲ့နည်းလမ်းနှစ်ခုရှိပါတယ်။ Option 1: Visual Studio Code ကိုအသုံးပြုခြင်း 1. Visual Studio Code ကိုဖွင့်ပါ 2. "File" → "Open Folder" ကို click လုပ်ပါ၊ သို့မဟုတ် Ctrl+K, Ctrl+O (Windows/Linux) သို့မဟုတ် Cmd+K, Cmd+O (Mac) ကိုအသုံးပြုပါ 3. terrarium လို့ခေါ်တဲ့ folder တစ်ခုဖန်တီးပြီး select လုပ်ပါ 4. Explorer pane မှာ "New File" icon ကို click လုပ်ပါ 5. သင့် file ကို index.html လို့အမည်ပေးပါ Option 2: Terminal Commands ကိုအသုံးပြုခြင်း ဒီ commands တွေကဘာလုပ်ပေးသလဲဆိုရင်: - ဖန်တီး – terrarium လို့ခေါ်တဲ့ directory အသစ်ကို project အတွက်ဖန်တီးပေးခြင်း - သွားရောက် – terrarium directory ထဲကိုသွားရောက်ခြင်း - ဖန်တီး – index.html file ကိုဖန်တီးခြင်း - ဖွင့် – Visual Studio Code မှာ file ကို edit လုပ်ဖို့ဖွင့်ခြင်း ## HTML Document Structure ကိုနားလည်ခြင်း HTML document တစ်ခုချင်းစီမှာ browser တွေကိုနားလည်ပြီးမှန်ကန်စွာပြသနိုင်ဖို့အတွက် structure တစ်ခုရှိပါတယ်။ ဒီ structure ကို formal letter တစ်စောင်လိုပဲ စဉ်းစားနိုင်ပါတယ် – အထူးသတ်မှတ်ထားတဲ့ elements တွေကို အတိအကျအစီအစဉ်နဲ့ထားရပြီး recipient (browser) က content ကိုမှန်ကန်စွာ process လုပ်နိုင်ဖို့အရေးကြီးပါတယ်။ အခု HTML document တစ်ခုရဲ့ အခြေခံအဆောက်အအုံကိုစတင်ထည့်ပါမယ်။ ### DOCTYPE Declaration နဲ့ Root Element HTML file ရဲ့ပထမဆုံးလိုင်းနှစ်ခုက browser အတွက် document ရဲ့ "မိတ်ဆက်" အဖြစ်လုပ်ဆောင်ပါတယ်။ ဒီ code ကဘာလုပ်ပေးသလဲဆိုရင်: - Document type ကို HTML5 အဖြစ်သတ်မှတ် – <!DOCTYPE html> ကိုအသုံးပြုခြင်း - Root <html> element ကိုဖန်တီး – page content အားလုံးကိုထည့်သွင်းဖို့ - Modern web standards ကိုသတ်မှတ် – browser rendering မှန်ကန်စွာလုပ်ဆောင်ဖို့ - Different browsers နဲ့ devices တွေမှာ display ကိုအတူတူဖြစ်စေ ### 🔄 Pedagogical Check-in Pause and Reflect: ဆက်လက်လုပ်ဆောင်မီ သင်နားလည်ထားပါစေ: - ✅ HTML document တစ်ခုမှာ DOCTYPE declaration ဘာကြောင့်လိုအပ်သလဲ - ✅ <html> root element ကဘာတွေထည့်သွင်းထားလဲ - ✅ ဒီ structure က browser တွေကို page rendering မှန်ကန်စွာလုပ်ဆောင်ဖို့ဘယ်လိုကူညီပေးလဲ Quick Self-Test: "standards-compliant rendering" ဆိုတာကို သင့်စကားနဲ့ရှင်းပြနိုင်ပါသလား? ## Essential Document Metadata ထည့်သွင်းခြင်း HTML document ရဲ့ <head> section က browser တွေ၊ search engines တွေလိုအရေးကြီးတဲ့အချက်အလက်တွေကိုထည့်သွင်းထားပြီး၊ visitors တွေက page ပေါ်မှာတိုက်ရိုက်မမြင်နိုင်ပါဘူး။ ဒါဟာ webpage ကိုမှန်ကန်စွာအလုပ်လုပ်စေဖို့၊ devices နဲ့ platforms အမျိုးမျိုးမှာမှန်ကန်စွာပေါ်စေဖို့ "နောက်ကွယ်က" အချက်အလက်တွေကိုပေးစွမ်းပါတယ်။ ဒီ metadata က browser တွေကို page ကိုဘယ်လိုပြသမလဲ၊ ဘယ် character encoding ကိုအသုံးပြုမလဲ၊ ဘယ် screen size တွေကို handle လုပ်မလဲဆိုတာကိုပြောပြပေးပါတယ် – professional, accessible web pages ဖန်တီးဖို့အရေးကြီးပါတယ်။ ### Task: Document Head ကိုထည့်ပါ သင့် <html> tag တွေရဲ့ opening နဲ့ closing tag တွေကြားမှာ <head> section ကိုထည့်ပါ: Element တစ်ခုချင်းစီကဘာလုပ်ပေးသလဲဆိုရင်: - Page title ကိုသတ်မှတ် – browser tabs နဲ့ search results မှာပေါ်စေဖို့ - UTF-8 character encoding ကိုသတ်မှတ် – text display ကိုကမ္ဘာတစ်ဝှမ်းမှာမှန်ကန်စေဖို့ - Modern Internet Explorer versions နဲ့အတူတူအလုပ်လုပ်စေဖို့ – compatibility သေချာစေခြင်း - Responsive design ကို configure – viewport ကို device width နဲ့ကိုက်ညီစေဖို့ - Initial zoom level ကို control – content ကို natural size နဲ့ပြသဖို့ ## Document Body ကိုတည်ဆောက်ခြင်း HTML document ရဲ့ <body> element က webpage ရဲ့မြင်နိုင်တဲ့ content အားလုံးကိုထည့်သွင်းထားပါတယ် – users တွေမြင်နိုင်ပြီး interact လုပ်နိုင်တဲ့အရာအားလုံးပါဝင်ပါတယ်။ <head> section က browser ကိုညွှန်ကြားချက်တွေကိုပေးထားပြီး၊ <body> section ကတော့ actual content – text, images, buttons, နဲ့ user interface ဖန်တီးတဲ့အခြား elements တွေကိုထည့်သွင်းထားပါတယ်။ Body structure ကိုထည့်ပြီး HTML tags တွေဘယ်လိုပေါင်းစပ်ပြီး အဓိပ္ပါယ်ရှိတဲ့ content ကိုဖန်တီးပေးနိုင်တယ်ဆိုတာကိုနားလည်ပါ။ ### HTML Tag Structure ကိုနားလည်ခြင်း HTML က paired tags တွေကိုအသုံးပြုပြီး elements တွေကိုသတ်မှတ်ပါတယ်။ အများစု tag တွေမှာ <p> လို opening tag နဲ့ </p> လို closing tag ရှိပြီး content ကိုအကြားမှာထည့်ထားပါတယ် – <p>Hello, world!</p> ဆိုတာက "Hello, world!" ဆိုတဲ့ text ပါဝင်တဲ့ paragraph element ကိုဖန်တီးပေးပါတယ်။ ### Task: Body Element ကိုထည့်ပါ သင့် HTML file ကို update လုပ်ပြီး <body> element ကိုထည့်ပါ: ဒီ complete structure ကဘာပေးသလဲဆိုရင်: - HTML5 document framework ကိုတည်ဆောက် – အခြေခံအဆောက်အအုံ - Browser rendering မှန်ကန်စွာလုပ်ဆောင်ဖို့ metadata ထည့်သွင်း – အရေးကြီး - မြင်နိုင်တဲ့ content အတွက် empty body ဖန်တီး – user interface အတွက် - Modern web development best practices ကိုလိုက်နာ – အဆင့်မြှင့် အခုတော့ သင့် terrarium ရဲ့မြင်နိုင်တဲ့ elements တွေကိုထည့်ဖို့အဆင်သင့်ဖြစ်ပါပြီ။ <div> elements တွေကို containers အဖြစ်အသုံးပြုပြီး၊ <img> elements တွေကို plant images တွေပြသဖို့အသုံးပြုပါမယ်။ ### Images နဲ့ Layout Containers ကိုအသုံးပြုခြင်း HTML မှာ images တွေဟာ "self-closing" tags တွေဖြစ်ပါတယ်။ <p></p> လို content ကို wrap လုပ်တဲ့ elements တွေမဟုတ်ဘဲ၊ <img> tag ကတော့ src (image file path) နဲ့ alt (accessibility) attributes တွေကိုအသုံးပြုပြီး tag ထဲမှာလိုအပ်တဲ့အချက်အလက်အားလုံးကိုထည့်ထားပါတယ်။ Images တွေကို HTML မှာထည့်မယ့်အခါ project files တွေကိုမှန်ကန်စွာစီမံထားဖို့အရေးကြီးပါတယ်။ images folder တစ်ခုဖန်တီးပြီး plant graphics တွေထည့်ပါ။ အရင်ဆုံး images တွေကိုစီမံပါ: 1. Terrarium project folder ထဲမှာ images folder တစ်ခုဖန်တီးပါ 2. solution folder မှာရှိတဲ့ plant images တွေကို download လုပ်ပါ (14 plant images) 3. Plant images အားလုံးကို သင့်ရဲ့ images folder ထဲကို copy လုပ်ပါ ### Task: Plant Display Layout ကိုဖန်တီးပါ အခုတော့ plant images တွေကို <body></body> tags တွေကြားမှာ two columns အဖြစ်စီမံပါ: Step by step, ဒီ code ကဘာလုပ်ပေးသလဲဆိုရင်: - Main page container ကိုဖန်တီး – id="page" နဲ့ content အားလုံးကိုထည့်သွင်း - Two column containers ကိုဖန်တီး – left-container နဲ့ right-container - Left column မှာ plants 7 ခု၊ Right column မှာ plants 7 ခုကိုစီမံ – organized - Each plant image ကို plant-holder div ထဲမှာ wrap လုပ် – positioning - Consistent class names ကို CSS styling အတွက်အသုံးပြု – next lesson - Each plant image ကို unique ID assign လုပ် – JavaScript interaction အတွက် - File paths ကို images folder ကိုညွှန် – proper ### 🔄 Pedagogical Check-in Structure Understanding: သင့် HTML structure ကိုပြန်လည်သုံးသပ်ပါ: - ✅ Layout ရဲ့ main containers တွေကိုသင်သိနိုင်ပါသလား? - ✅ Image တစ်ခုချင်းစီမှာ unique ID ဘာကြောင့်လိုအပ်သလဲဆိုတာနားလည်ပါသလား? - ✅ plant-holder div တွေရဲ့ရည်ရွယ်ချက်ကိုဘယ်လိုဖော်ပြနိုင်မလဲ? Visual Inspection: သင့် HTML file ကို browser မှာဖွင့်ပါ။ သင်မြင်ရမယ့်အရာတွေက: - Plant images ရဲ့ basic list - Images တွေကို two columns အဖြစ်စီမံထား - Simple, unstyled layout Remember: CSS styling မလုပ်ခင် HTML ရဲ့ plain appearance ကအတိအကျဒီလိုပဲဖြစ်ရမယ်! ဒီ markup ကိုထည့်ပြီးနောက်မှာ plants တွေ screen ပေါ်မှာပေါ်လာပါမယ်၊ ဒါပေမယ့် polished မဖြစ်သေးပါဘူး – CSS သင်ခန်းစာမှာ style ပေးမှာပါ! အခုတော့ သင့် content ကိုမှန်ကန်စွာစီမံထားပြီး accessibility best practices ကိုလိုက်နာတဲ့ HTML foundation ရရှိပါပြီ။ ## Accessibility အတွက် Semantic HTML ကိုအသုံးပြုခြင်း Semantic HTML ဆိုတာ element တွေကို သူ့ရဲ့အဓိပ္ပါယ်နဲ့ရည်ရွယ်ချက်အပေါ်မူတည်ပြီးရွေးချယ်တာဖြစ်ပါတယ်၊ appearance အပေါ်မူတည်တာမဟုတ်ပါဘူး။ Semantic markup ကိုအသုံးပြုတဲ့အခါ သင့် content ရဲ့ structure နဲ့အဓိပ္ပါယ်ကို browser, search engines, နဲ့ screen readers လို assistive technologies တွေကို communicate လုပ်ပေးပါတယ်။ ဒီနည်းလမ်းက disabilities ရှိတဲ့ users တွေအတွက် website တွ - အပိုင်းများ ကို သီးခြားသတ်မှတ်ထားပြီး အမြင်အာရုံဆိုင်ရာ အစိတ်အပိုင်းများ (ထိပ်ပိုင်း၊ နံရံများ၊ မြေကြီး၊ အောက်ပိုင်း) ကို ဖော်ပြထားသည်။ - အတွင်းပိုင်း အစိတ်အပိုင်းများကို ဖော်ပြထားပြီး မှန်ပြန်အကျိုးသက်ရောက်မှုများ (တောက်ပသော အစိတ်အပိုင်းများ) ကို ထည့်သွင်းထားသည်။ - အသုံးပြုထားသည် အဓိပ္ပါယ်ဖွင့်ဆိုမှု ရှင်းလင်းသော class name များကို အသုံးပြုထားပြီး အစိတ်အပိုင်းတစ်ခုချင်းစီ၏ ရည်ရွယ်ချက်ကို ဖော်ပြထားသည်။ - ပြင်ဆင်ထားသည် CSS အလှဆင်မှုအတွက် ဖွဲ့စည်းမှုကို ပြင်ဆင်ထားပြီး မှန်ပြန်သော terrarium ပုံစံကို ဖန်တီးရန်အတွက် အသင့်ဖြစ်စေသည်။ ### 🔄 သင်ကြားမှုအခြေအနေ စစ်ဆေးခြင်း HTML ဖွဲ့စည်းမှု ကျွမ်းကျင်မှု: ရှေ့ဆက်မတိုင်မီ သင်သည် အောက်ပါအချက်များကို ကျွမ်းကျင်နိုင်ရန် သေချာပါစေ: - ✅ HTML ဖွဲ့စည်းမှုနှင့် အမြင်အာရုံဆိုင်ရာ အလှဆင်မှု၏ ကွာခြားချက်ကို ရှင်းပြနိုင်သည်။ - ✅ semantic နှင့် non-semantic HTML အစိတ်အပိုင်းများကို ခွဲခြားနိုင်သည်။ - ✅ သင့်တော်သော markup သည် accessibility အကျိုးကျေးဇူးများကို ဘယ်လိုပေးစွမ်းနိုင်သည်ကို ဖော်ပြနိုင်သည်။ - ✅ စာရွက်စာတမ်းအပင်အပုံစံကို အပြည့်အစုံ သိရှိနိုင်သည်။ သင်၏နားလည်မှုကို စစ်ဆေးခြင်း: သင်၏ HTML ဖိုင်ကို JavaScript ပိတ်ထားပြီး CSS ဖယ်ရှားထားသော browser တွင် ဖွင့်ကြည့်ပါ။ သင်ဖန်တီးထားသော pure semantic ဖွဲ့စည်းမှုကို ပြသပေးပါမည်။ --- ## GitHub Copilot Agent စိန်ခေါ်မှု Agent mode ကို အသုံးပြု၍ အောက်ပါ စိန်ခေါ်မှုကို ပြည့်စုံစွာ ပြုလုပ်ပါ: ဖော်ပြချက်: terrarium project အတွက် ထည့်သွင်းနိုင်သော အပင်စောင့်ရှောက်မှုလမ်းညွှန် အပိုင်းအတွက် semantic HTML ဖွဲ့စည်းမှုကို ဖန်တီးပါ။ Prompt: "Plant Care Guide" ဟူသော အဓိကခေါင်းစဉ်နှင့် "Watering", "Light Requirements", "Soil Care" ဟူသော ခေါင်းစဉ်သုံးခုပါဝင်သော အပိုင်းများကို ဖန်တီးပါ။ အပင်စောင့်ရှောက်မှုအချက်အလက်များပါဝင်သော paragraph တစ်ခုစီပါဝင်ရမည်။ <section>, <h2>, <h3>, <p> ကဲ့သို့သော semantic HTML tag များကို အသုံးပြု၍ အကြောင်းအရာကို သင့်တော်စွာ ဖွဲ့စည်းပါ။ agent mode အကြောင်းပိုမိုလေ့လာရန် ဒီမှာနှိပ်ပါ။ ## HTML သမိုင်း စိန်ခေါ်မှု ဝဘ်တိုးတက်မှုအကြောင်း လေ့လာခြင်း HTML သည် Tim Berners-Lee က 1990 ခုနှစ်တွင် CERN တွင် ပထမဆုံး web browser ကို ဖန်တီးခဲ့ပြီးနောက် အလွန်တိုးတက်လာခဲ့သည်။ <marquee> ကဲ့သို့သော အဟောင်း tag များသည် ယနေ့ခေတ် accessibility စံနှုန်းများနှင့် responsive design principle များနှင့် မကိုက်ညီသောကြောင့် ဖယ်ရှားခဲ့သည်။ ဤအတတ်ပညာကို စမ်းသပ်ပါ: 1. သင်၏ <h1> ခေါင်းစဉ်ကို <marquee> tag ဖြင့် အချိန်ပိုင်း wrap လုပ်ပါ: <marquee><h1>My Terrarium</h1></marquee> 2. သင်၏စာမျက်နှာကို browser တွင် ဖွင့်ပြီး scrolling effect ကို ကြည့်ရှုပါ။ 3. ဤ tag ကို ဘာကြောင့် ဖယ်ရှားခဲ့သည်ကို စဉ်းစားပါ (hint: user experience နှင့် accessibility ကို စဉ်းစားပါ)။ 4. <marquee> tag ကို ဖယ်ရှားပြီး semantic markup သို့ ပြန်လည်ရောက်ပါ။ အတွေးအမြင်မေးခွန်းများ: - Scrolling ခေါင်းစဉ်သည် visual impairments သို့မဟုတ် motion sensitivity ရှိသော အသုံးပြုသူများကို ဘယ်လို သက်ရောက်နိုင်မည်လဲ? - ယနေ့ခေတ် CSS နည်းလမ်းများက ပိုမိုသင့်တော်သော visual effect များကို ဘယ်လို ဖန်တီးနိုင်မည်လဲ? - အဟောင်း element များကို မသုံးဘဲ ယနေ့ခေတ် web standard များကို အသုံးပြုရခြင်း အရေးကြီးမှုကို ဘယ်လို ရှင်းပြနိုင်မည်လဲ? obsolete and deprecated HTML elements အကြောင်းပိုမိုလေ့လာပြီး web standard များသည် user experience ကို ဘယ်လိုတိုးတက်စေသည်ကို နားလည်ပါ။ ## Post-Lecture Quiz Post-lecture quiz ## Review & Self Study HTML အကြောင်းပိုမိုနက်နက်ရှိုင်းရှိုင်း လေ့လာခြင်း HTML သည် 30 နှစ်ကျော်အတွင်း ဝဘ်၏ အခြေခံအုတ်မြစ်ဖြစ်လာခဲ့ပြီး ရိုးရှင်းသော စာရွက်စာတမ်း ဖွဲ့စည်းမှုဘာသာစကားမှ interactive application များ ဖန်တီးရန်အတွက် အဆင့်မြှင့်တင်လာခဲ့သည်။ ဤတိုးတက်မှုကို နားလည်ခြင်းသည် ယနေ့ခေတ် web standard များကို ကျေးဇူးတင်စေပြီး ပိုမိုကောင်းမွန်သော ဖွံ့ဖြိုးတိုးတက်မှု ဆုံးဖြတ်ချက်များကို လုပ်ဆောင်နိုင်စေသည်။ အကြံပြုထားသော လေ့လာမှုလမ်းကြောင်းများ: 1. HTML သမိုင်းနှင့် တိုးတက်မှု - HTML 1.0 မှ HTML5 အထိ timeline ကို လေ့လာပါ။ - tag အချို့ကို ဘာကြောင့် ဖယ်ရှားခဲ့သည်ကို လေ့လာပါ (accessibility, mobile-friendliness, maintainability)။ - HTML features အသစ်များနှင့် အဆိုပြုချက်များကို စုံစမ်းပါ။ 2. Semantic HTML နက်နက်ရှိုင်းရှိုင်း လေ့လာခြင်း - HTML5 semantic elements စာရင်းအပြည့်အစုံကို လေ့လာပါ။ - <article>, <section>, <aside>, <main> ကို ဘယ်အခါ အသုံးပြုရမည်ကို သတ်မှတ်နိုင်ပါ။ - accessibility ကို တိုးတက်စေရန် ARIA attributes အကြောင်း လေ့လာပါ။ 3. ယနေ့ခေတ် ဝဘ်ဖွံ့ဖြိုးတိုးတက်မှု - responsive websites ဖန်တီးခြင်း ကို Microsoft Learn တွင် လေ့လာပါ။ - HTML သည် CSS နှင့် JavaScript နှင့် ဘယ်လို ပေါင်းစပ်နိုင်သည်ကို နားလည်ပါ။ - web performance နှင့် SEO အကောင်းဆုံးအလေ့အကျင့်များကို လေ့လာပါ။ အတွေးအမြင်မေးခွန်းများ: - သင်ရှာဖွေတွေ့ရှိခဲ့သော HTML tag အဟောင်းများက ဘာကြောင့် ဖယ်ရှားခဲ့ရသလဲ? - HTML version အသစ်များအတွက် အဆိုပြုထားသော features အသစ်များက ဘာတွေလဲ? - semantic HTML သည် web accessibility နှင့် SEO ကို ဘယ်လို အကျိုးသက်ရောက်မှု ရှိစေသလဲ? ### ⚡ နောက် ၅ မိနစ်အတွင်း သင်လုပ်နိုင်သော အရာများ - [ ] DevTools (F12) ကို ဖွင့်ပြီး သင်နှစ်သက်သော ဝဘ်ဆိုဒ်၏ HTML ဖွဲ့စည်းမှုကို စစ်ဆေးပါ။ - [ ] <h1>, <p>, <img> tag များပါဝင်သော ရိုးရှင်းသော HTML ဖိုင်တစ်ခု ဖန်တီးပါ။ - [ ] W3C HTML Validator online ကို အသုံးပြု၍ သင်၏ HTML ကို အတည်ပြုပါ။ - [ ] <!-- comment --> ကို အသုံးပြု၍ HTML မှာ မှတ်ချက်ထည့်ပါ။ ### 🎯 ဤတစ်နာရီအတွင်း သင်အောင်မြင်နိုင်သော အရာများ - [ ] post-lesson quiz ကို ပြီးမြောက်စွာ ဖြေဆိုပြီး semantic HTML အယူအဆများကို ပြန်လည်သုံးသပ်ပါ။ - [ ] သင့်ကိုယ်ရေးအကြောင်းကို ရေးသားထားသော HTML ဖွဲ့စည်းမှုတစ်ခုကို ဖန်တီးပါ။ - [ ] heading အဆင့်များနှင့် text formatting tag များကို စမ်းသပ်ပါ။ - [ ] multimedia integration ကို လေ့ကျင့်ရန် image နှင့် link များ ထည့်သွင်းပါ။ - [ ] HTML5 features များကို စုံစမ်းပါ။ ### 📅 သင့်ရဲ့ တစ်ပတ်တာ HTML ခရီး - [ ] semantic markup ဖြင့် terrarium project assignment ကို ပြီးမြောက်ပါ။ - [ ] ARIA label နှင့် role များကို အသုံးပြု၍ accessible webpage တစ်ခု ဖန်တီးပါ။ - [ ] အမျိုးမျိုးသော input type များပါဝင်သော form ဖန်တီးမှုကို လေ့ကျင့်ပါ။ - [ ] localStorage သို့မဟုတ် geolocation ကဲ့သို့သော HTML5 API များကို စုံစမ်းပါ။ - [ ] responsive HTML pattern များနှင့် mobile-first design ကို လေ့လာပါ။ - [ ] အခြား developer များ၏ HTML code ကို ပြန်လည်သုံးသပ်ပြီး အကောင်းဆုံးအလေ့အကျင့်များကို လေ့လာပါ။ ### 🌟 သင့်ရဲ့ တစ်လတာ ဝဘ်အခြေခံ - [ ] HTML ကျွမ်းကျင်မှုကို ပြသထားသော portfolio website တစ်ခု ဖန်တီးပါ။ - [ ] Handlebars ကဲ့သို့သော framework ဖြင့် HTML templating ကို လေ့လာပါ။ - [ ] HTML documentation ကို တိုးတက်စေရန် open source project များတွင် ပါဝင်ပါ။ - [ ] custom element ကဲ့သို့သော HTML အဆင့်မြင့်အယူအဆများကို ကျွမ်းကျင်ပါ။ - [ ] CSS framework နှင့် JavaScript library များနှင့် HTML ကို ပေါင်းစပ်ပါ။ - [ ] HTML အခြေခံကို လေ့လာနေသူများကို သင်ကြားပါ။ ## 🎯 HTML ကျွမ်းကျင်မှု အချိန်ဇယား ### 🛠️ HTML Toolkit အကျဉ်းချုပ် ဤသင်ခန်းစာကို ပြီးမြောက်ပြီးနောက် သင်သည်: - စာရွက်စာတမ်းဖွဲ့စည်းမှု: DOCTYPE မှန်ကန်သော HTML5 အခြေခံအုတ်မြစ်ကို ရရှိထားသည်။ - Semantic Markup: accessibility နှင့် SEO ကို တိုးတက်စေသော အဓိပ္ပါယ်ရှိသော tag များကို အသုံးပြုထားသည်။ - Image Integration: ဖိုင်အဖွဲ့စည်းမှုနှင့် alt text အလေ့အကျင့်များကို မှန်ကန်စွာ အသုံးပြုထားသည်။ - Layout Containers: အဓိပ္ပါယ်ဖွင့်ဆိုမှု ရှင်းလင်းသော class name များဖြင့် div များကို သုံးထားသည်။ - Accessibility Awareness: screen reader navigation ကို နားလည်ထားသည်။ - ယနေ့ခေတ်စံနှုန်းများ: HTML5 practices နှင့် deprecated tag အကြောင်း သိရှိထားသည်။ - Project Foundation: CSS အလှဆင်မှုနှင့် JavaScript interactivity အတွက် အခြေခံအုတ်မြစ်ကို ရရှိထားသည်။ နောက်တစ်ဆင့်: သင့် HTML ဖွဲ့စည်းမှုသည် CSS အလှဆင်မှုအတွက် အသင့်ဖြစ်နေပါပြီ! သင်ဖန်တီးထားသော semantic foundation သည် နောက်ဆုံးသင်ခန်းစာကို ပိုမိုလွယ်ကူစွာ နားလည်စေပါမည်။ ## Assignment HTML ကို လေ့ကျင့်ပါ: Blog mockup တစ်ခု ဖန်တီးပါ --- အကြောင်းကြားချက်: ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု Co-op Translator ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရ အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှုကို အသုံးပြုရန် အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
Terrarium Project Part 2: CSS ကိုမိတ်ဆက်ခြင်း
HTML သင့်ရဲ့ terrarium အခြေခံပုံစံကို သတိရပါသလား? CSS က plain structure ကို visually appealing ဖြစ်အောင် ပြောင်းလဲပေးမယ်။ HTML ကို အိမ်တစ်လုံးရဲ့ frame တည်ဆောက်တာလိုမျိုးဆိုရင် CSS က အိမ်ကို အိမ်လိုခံစားမှုရစေတဲ့ အရာတွေ - paint color, furniture arrangement, lighting, room flow စတာတွေဖြစ်ပါတယ်။ Versailles Palace က hunting lodge အဖြစ်စတင်ခဲ့ပေမယ့် decoration နဲ့ layout ကို ဂရုစိုက်ပြီး အလှဆင်တာကနေ ကမ္ဘာ့အလှဆုံးအဆောက်အအုံတစ်ခုဖြစ်လာခဲ့တာကို စဉ်းစားကြည့်ပါ။ ဒီနေ့မှာတော့ သင့်ရဲ့ terrarium ကို functional ကနေ polished ဖြစ်အောင် ပြောင်းလဲပါမယ်။ Element တွေကို တိကျစွာ position လုပ်နည်း, screen size အမျိုးမျိုးကို တုံ့ပြန်နိုင်တဲ့ layout တွေဖန်တီးနည်း, website တွေကို စိတ်ဝင်စားဖွယ်ဖြစ်စေတဲ့ visual appeal ဖန်တီးနည်းတွေကို သင်ယူပါမယ်။ ဒီသင်ခန်းစာအဆုံးမှာ CSS styling ကို strategic အနေနဲ့ အသုံးပြုတာက project ကို ဘယ်လိုအဆင်ပြေစေတယ်ဆိုတာကို မြင်နိုင်ပါမယ်။ သင့်ရဲ့ terrarium ကို style ထည့်လိုက်ရအောင်။ ## Pre-Lecture Quiz Pre-lecture quiz ## CSS ကိုစတင်အသုံးပြုခြင်း CSS ကို "အရာတွေကိုလှပစေတဲ့အရာ" လို့ပဲထင်တတ်ကြပေမယ့် အဲ့ထက်ပိုကျယ်ဝန်းတဲ့ရည်ရွယ်ချက်ရှိပါတယ်။ CSS က ရုပ်ရှင်ဒါရိုက်တာတစ်ယောက်လိုပါပဲ - အရာတွေကို ဘယ်လိုပုံစံဖြစ်မလဲ, ဘယ်လိုရွေ့လျားမလဲ, interaction ကိုဘယ်လိုတုံ့ပြန်မလဲ, အခြေအနေအမျိုးမျိုးကိုဘယ်လိုအလျင်အမြန်အပြောင်းအလဲလုပ်မလဲဆိုတာကို ထိန်းချုပ်နိုင်ပါတယ်။ Modern CSS က အလွန်တိုးတက်ပြီး အရည်အသွေးမြင့်မားပါတယ်။ Phone, tablet, desktop computer တွေအတွက် layout ကို အလိုအလျောက်ချိန်ညှိနိုင်တဲ့ code ရေးနိုင်ပါတယ်။ User တွေရဲ့အာရုံကိုလိုအပ်တဲ့နေရာမှာ ဦးတည်စေတဲ့ smooth animation တွေဖန်တီးနိုင်ပါတယ်။ အားလုံးကိုတစ်စုတစ်စည်းတည်းလုပ်နိုင်တဲ့အခါမှာ ရလဒ်တွေက အလွန်အမင်းအံ့ဩစရာကောင်းပါတယ်။ ဒီသင်ခန်းစာမှာ ကျွန်တော်တို့လုပ်ဆောင်မယ့်အရာတွေက: - Creates modern CSS technique တွေကိုအသုံးပြုပြီး သင့်ရဲ့ terrarium အတွက် visual design အပြည့်အစုံဖန်တီးခြင်း - Explores cascade, inheritance, CSS selector တွေလို အခြေခံ concepts တွေကိုလေ့လာခြင်း - Implements responsive positioning နဲ့ layout strategy တွေ - Builds CSS shapes နဲ့ styling တွေကိုအသုံးပြုပြီး terrarium container ကိုတည်ဆောက်ခြင်း ### Prerequisite HTML structure ကို အရင်သင်ခန်းစာမှာပြီးစီးထားပြီး အခု style ထည့်ဖို့အဆင်သင့်ဖြစ်နေဖို့လိုပါတယ်။ ### CSS File ကို Set Up လုပ်ခြင်း Styling ကိုစတင်လုပ်နိုင်ဖို့ HTML နဲ့ CSS ကိုချိတ်ဆက်ဖို့လိုပါတယ်။ ဒီချိတ်ဆက်မှုက browser ကို သင့်ရဲ့ terrarium အတွက် styling instruction တွေကိုဘယ်မှာရှာရမလဲဆိုတာပြောပြပါတယ်။ သင့်ရဲ့ terrarium folder မှာ style.css ဆိုတဲ့ file အသစ်တစ်ခုဖန်တီးပြီး HTML document ရဲ့ <head> section မှာ link လုပ်ပါ: ဒီ code ကဘာလုပ်သလဲဆိုရင်: - Creates HTML နဲ့ CSS file တွေကိုချိတ်ဆက်ပေးခြင်း - Tells browser ကို style.css file ထဲက style တွေကို load နဲ့ apply လုပ်ဖို့ပြောခြင်း - Uses rel="stylesheet" attribute ကို CSS file ဖြစ်ကြောင်းဖော်ပြဖို့အသုံးပြုခြင်း - References file path ကို href="./style.css" နဲ့ပြောခြင်း ## CSS Cascade ကိုနားလည်ခြင်း CSS ကို "Cascading" Style Sheets လို့ခေါ်တာဘာလို့လဲဆိုတာကို စဉ်းစားဖို့လိုပါတယ်။ Style တွေက ရေတံခွန်လို cascade လုပ်ပြီး တစ်ခါတစ်လေ conflict ဖြစ်တတ်ပါတယ်။ Military command structure တွေကိုစဉ်းစားကြည့်ပါ - general order က "အားလုံးစိမ်းရောင်ဝတ်ဆင်ပါ" လို့ပြောနိုင်ပါတယ်၊ ဒါပေမယ့် unit ကိုယ်တိုင်အတွက် specific order က "ceremony အတွက် dress blues ဝတ်ဆင်ပါ" လို့ပြောနိုင်ပါတယ်။ Specific instruction က precedence ရပါတယ်။ CSS ကလည်း ဒီလို logic ကိုလိုက်နာပြီး ဒီ hierarchy ကိုနားလည်ခြင်းက debugging ကိုပိုမိုလွယ်ကူစေပါတယ်။ ### Cascade Priority ကိုစမ်းသပ်ခြင်း Style conflict ကိုဖန်တီးပြီး cascade ကိုလေ့လာကြည့်ရအောင်။ အရင်ဆုံး <h1> tag မှာ inline style ထည့်ပါ: ဒီ code ကဘာလုပ်သလဲဆိုရင်: - Applies <h1> element ကို inline styling နဲ့ directly red color ထည့်ခြင်း - Uses style attribute ကို HTML ထဲမှာ CSS ကို embed လုပ်ခြင်း - Creates specific element အတွက် အမြင့်ဆုံး priority style rule နောက်တစ်ခုမှာ style.css file ထဲမှာ ဒီ rule ကိုထည့်ပါ: အပေါ်က code မှာ: - Defined <h1> element အားလုံးကို target လုပ်တဲ့ CSS rule - Set text color ကို blue အဖြစ် external stylesheet မှာသတ်မှတ်ခြင်း - Created inline style ထက် priority နိမ့်တဲ့ rule ✅ Knowledge Check: သင့် web app မှာ ဘယ်ရောင်ပြသလဲ? အဲ့ရောင်ကဘာလို့အနိုင်ရသလဲ? Style တွေကို override လုပ်ချင်တဲ့အခါ ဘယ်လိုလုပ်မလဲ? ## CSS Inheritance ကိုလေ့လာခြင်း CSS inheritance က genetics လိုပါပဲ - element တွေက သူ့ရဲ့ parent element တွေကနေ property တစ်ချို့ကို ရယူပါတယ်။ body element မှာ font family ကို set လုပ်လိုက်ရင် အတွင်းမှာရှိတဲ့ text အားလုံးက အဲ့ font ကိုအလိုအလျောက်အသုံးပြုပါတယ်။ Habsburg မိသားစုရဲ့ jawline က မိသားစုအတွင်းကနေ မျိုးဆက်ပေါင်းများစွာကို အလိုအလျောက်ရောက်သွားတဲ့ပုံစံနဲ့တူပါတယ်။ ဒါပေမယ့် အရာအားလုံးကို inherit မလုပ်ပါဘူး။ Text style တွေဖြစ်တဲ့ font နဲ့ color တွေက inherit လုပ်ပေမယ့် layout property တွေဖြစ်တဲ့ margin နဲ့ border တွေကတော့ မလုပ်ပါဘူး။ ကလေးတွေက မိဘရဲ့ physical trait တွေကို inherit လုပ်ပေမယ့် fashion choice တွေကိုတော့ မလုပ်သလိုပါပဲ။ ### Font Inheritance ကိုကြည့်ရှုခြင်း <body> element မှာ font family ကို set လုပ်ပြီး inheritance ကိုကြည့်ရအောင်: ဒီမှာဖြစ်ပျက်တာကိုခွဲခြမ်းစိတ်ဖြာကြည့်ပါ: - Sets <body> element ကို target လုပ်ပြီး page အတွက် font family ကို set လုပ်ခြင်း - Uses fallback option တွေပါဝင်တဲ့ font stack ကို browser compatibility အတွက်အသုံးပြုခြင်း - Applies operating system အမျိုးမျိုးမှာလှပတဲ့ modern system font တွေ - Ensures child element အားလုံးက font ကို inherit လုပ်ပြီး override မလုပ်ရင် အလိုအလျောက်အသုံးပြုခြင်း Browser ရဲ့ developer tools (F12) ကိုဖွင့်ပြီး Elements tab ကိုသွားပါ။ သင့်ရဲ့ <h1> element ကို inspect လုပ်ပါ။ <body> element ကနေ font family ကို inherit လုပ်ထားတာကိုတွေ့ပါလိမ့်မယ်: ✅ Experiment Time: <body> element မှာ color, line-height, text-align လို inheritable property တွေကို set လုပ်ကြည့်ပါ။ Heading နဲ့ အခြား element တွေမှာ ဘာတွေဖြစ်သွားလဲ? ### 🔄 Pedagogical Check-in CSS Foundation နားလည်မှု: Selector တွေကိုသွားမယ့်အခါမှာ အောက်ပါအချက်တွေကိုနားလည်ထားဖို့လိုပါတယ်: - ✅ Cascade နဲ့ inheritance ရဲ့ကွာခြားချက်ကိုရှင်းပြနိုင်ခြင်း - ✅ Specificity conflict မှာ ဘယ် style ကအနိုင်ရမလဲဆိုတာကိုခန့်မှန်းနိုင်ခြင်း - ✅ Parent element တွေကနေ ဘယ် property တွေ inherit လုပ်မလဲဆိုတာကိုသိနိုင်ခြင်း - ✅ CSS file တွေကို HTML နဲ့မှန်ကန်စွာချိတ်ဆက်နိုင်ခြင်း Quick Test: ဒီ style တွေရှိရင် <div class="special"> အတွင်းရှိ <h1> ရဲ့ color ဘာဖြစ်မလဲ? Answer: Red (element selector က direct target လုပ်ထားတဲ့ h1) ## CSS Selectors ကိုကျွမ်းကျင်စွာအသုံးပြုခြင်း CSS selector တွေက သင့်ရဲ့ element တွေကို target လုပ်ဖို့နည်းလမ်းဖြစ်ပါတယ်။ အဲ့ဒါက direction ပေးတာလိုပါပဲ - "အိမ်" လို့ပြောတာထက် "Maple Street မှာရှိတဲ့ အနီရောင်တံခါးနဲ့ အပြာရောင်အိမ်" လို့ပြောတာလိုပါပဲ။ CSS က specific ဖြစ်ဖို့နည်းလမ်းအမျိုးမျိုးပေးပါတယ်။ Neighborhood မှာရှိတဲ့တံခါးအားလုံးကို style လုပ်ချင်တဲ့အခါနဲ့ တစ်ခုတည်းသောတံခါးကို style လုပ်ချင်တဲ့အခါမှာ tool ကိုမှန်ကန်စွာရွေးချယ်ဖို့လိုပါတယ်။ ### Element Selectors (Tags) Element selector တွေက HTML element တွေကို သူ့ရဲ့ tag name နဲ့ target လုပ်ပါတယ်။ Page တစ်ခုလုံးမှာ base style တွေကို broad အနေနဲ့ set လုပ်ဖို့အတွက် perfect ဖြစ်ပါတယ်: ဒီ style တွေကိုနားလည်ပါ: - Sets body selector ကိုအသုံးပြုပြီး page တစ်ခုလုံးမှာ consistent typography - Removes browser ရဲ့ default margin နဲ့ padding - Styles heading element အားလုံးကို color, alignment, spacing - Uses rem unit ကို scalable, accessible font sizing အတွက်အသုံးပြုခြင်း Element selector တွေက general styling အတွက်အဆင်ပြေပါတယ်၊ ဒါပေမယ့် terrarium ထဲမှာရှိတဲ့ plant တွေလို individual component တွေကို style လုပ်ဖို့ပို specific selector တွေလိုအပ်ပါတယ်။ ### ID Selectors for Unique Elements ID selector တွေက # symbol ကိုအသုံးပြုပြီး specific id attribute ရှိတဲ့ element တွေကို target လုပ်ပါတယ်။ ID တွေက page တစ်ခုမှာ unique ဖြစ်ရမယ့်အတွက် individual, special element တွေကို style လုပ်ဖို့ perfect ဖြစ်ပါတယ်။ ဥပမာ - terrarium ရဲ့ left နဲ့ right plant container တွေ။ Terrarium ရဲ့ side container တွေကို style လုပ်ဖို့အောက်ပါ code ကိုရေးပါ: ဒီ code ကဘာလုပ်သလဲဆိုရင်: - Positions container တွေကို absolute positioning အသုံးပြုပြီး screen edge တွေမှာထားခြင်း - Uses vh (viewport height) unit ကို responsive height အတွက်အသုံးပြုခြင်း - Applies box-sizing: border-box ကို padding ကို total width ထဲမှာပါဝင်အောင်လုပ်ခြင်း - Removes unnecessary px unit တွေကို cleaner code အတွက်ဖယ်ရှားခြင်း - Sets subtle background color ကို stark gray ထက်လွယ်ကူတဲ့အရောင်အဖြစ်သတ်မှတ်ခြင်း ✅ Code Quality Challenge: ဒီ CSS က DRY (Don't Repeat Yourself) principle ကိုချိုးဖောက်ထားပါတယ်။ ID နဲ့ class ကိုပေါင်းစပ်ပြီး refactor လုပ်နိုင်မလား? Improved approach: ### Class Selectors for Reusable Styles Class selector တွေက . symbol ကိုအသုံးပြုပြီး element အများအပြားကို style လုပ်ဖို့အတွက် perfect ဖြစ်ပါတယ်။ ID တွေထက် class တွေကို HTML တစ်ခုလုံးမှာပြန်လည်အသုံးပြုနိုင်ပါတယ်၊ ဒါကြောင့် consistent styling pattern တွေကိုဖန်တီးဖို့အတွက်အဆင်ပြေပါတယ်။ Terrarium ထဲမှာ plant တစ်ခုချင်းစီကိုတူညီတဲ့ styling လိုအပ်ပေမယ့် individual positioning လိုအပ်ပါတယ်။ Shared style အတွက် class တွေကိုအသုံးပြုပြီး unique positioning အတွက် ID တွေကိုအသုံးပြုပါမယ်။ Plant တစ်ခုချင်းစီအတွက် HTML structure: Key elements explained: - Uses class="plant-holder" ကို plant holder အားလုံးမှာ consistent container styling အတွက်အသုံးပြုခြင်း - Applies class="plant" ကို shared image styling နဲ့ behavior အတွက်အသုံးပြုခြင်း - Includes unique id="plant1" ကို individual positioning နဲ့ JavaScript interaction အတွက်အသုံးပြုခြင်း - Provides descriptive alt text ကို screen reader accessibility အတွက်ထည့်သွင်းခြင်း အောက်ပါ style တွေကို style.css file ထဲမှာထည့်ပါ: ဒီ style တွေကိုခွဲခြမ်းစိတ်ဖြာပါ: - Creates relative positioning ကို plant holder အတွက် positioning context ဖန်တီးဖို့အသုံးပြုခြင်း - Sets plant holder တစ်ခုချင်းစီကို 13% height, vertical scrolling မလိုအောင်အောင်မြင်စေခြင်း - Shifts holder တွေကို left ကိုအနည်းငယ်ရွေ့ပြီး container တွေထဲမှာ plant တွေကိုပိုမို center ဖြစ်အောင်လုပ်ခြင်း - Allows plant တွေကို responsive ဖြစ်အောင် max-width နဲ့ max-height property တွေကိုအသုံးပြုခြင်း - Uses z-index ကို terrarium ထဲမှာ plant တွေကို အခြား element တွေထက်အပေါ်မှာ layer လုပ်ခြင်း - Adds subtle hover effect ကို CSS transition နဲ့ user interaction ကိုပိုမိုကောင်းမွန်စေခြင်း ✅ Critical Thinking: .plant-holder နဲ့ .plant selector နှစ်ခုလုံးလိုအပ်တာဘာလို့လဲ? တစ်ခုတည်းသာအသုံးပြုရင် ဘာဖြစ်မလဲ? - .plant-holder ကို relative အစား absolute သုံးမယ်ဆိုရင် layout ဘယ်လိုပြောင်းလဲမလဲ? - .plant ကို relative positioning သို့ပြောင်းလဲတဲ့အခါ ဘာတွေဖြစ်မလဲ? ### 🔄 သင်ကြားမှုအခြေခံအချက် CSS Positioning ကိုကျွမ်းကျင်မှု: သင့်ရဲ့နားလည်မှုကိုစစ်ဆေးပါ: - ✅ Drag-and-drop အတွက် plants တွေကို absolute positioning သုံးရတဲ့အကြောင်းရင်းကိုရှင်းပြနိုင်ပါသလား? - ✅ Relative containers တွေက positioning context ကိုဘယ်လိုဖန်တီးသလဲဆိုတာနားလည်ပါသလား? - ✅ Side containers တွေမှာ absolute positioning သုံးရတဲ့အကြောင်းရင်းကိုနားလည်ပါသလား? - ✅ Position declarations တွေကိုလုံးဝဖယ်ရှားလိုက်ရင် ဘာတွေဖြစ်မလဲဆိုတာသိပါသလား? အမှန်တကယ်အသုံးချမှု: CSS positioning ကဘယ်လိုအပြင်လောက layout ကိုတူညီစေသလဲ: - Static: စာအုပ်တွေကို စင်ပေါ်မှာထားတဲ့အတိုင်း (သဘာဝအဆင့်) - Relative: စာအုပ်ကိုနည်းနည်းရွှေ့ပြီး သူ့နေရာမှာပဲထားထား - Absolute: စာမျက်နှာနံပါတ်မှာ bookmark တစ်ခုတိကျစွာထား - Fixed: စာမျက်နှာတွေကိုလှိမ့်တဲ့အခါမှာလည်းမြင်နိုင်တဲ့ sticky note ## CSS နဲ့ Terrarium တည်ဆောက်ခြင်း အခုတော့ CSS ကိုသာအသုံးပြုပြီး ဖန်ဘူးတစ်ခုကိုတည်ဆောက်ပါမယ် - ရုပ်ပုံတွေ၊ graphic software တွေမလိုအပ်ပါဘူး။ Positioning နဲ့ transparency ကိုအသုံးပြုပြီး ဖန်၊ အရိပ်၊ နက်ရှိုင်းမှုအကျိုးသက်ရောက်မှုတွေကိုဖန်တီးခြင်းက CSS ရဲ့ visual အရည်အသွေးကိုပြသပါတယ်။ ဒီနည်းလမ်းက Bauhaus လှုပ်ရှားမှုမှာ အဆောက်အအုံပုံစံတွေကို ရိုးရှင်းတဲ့ geometric ပုံစံတွေကိုအသုံးပြုပြီး ဖန်တီးခဲ့သလိုမျိုးပါ။ ဒီအခြေခံတွေကိုနားလည်ပြီးရင် အများသော website design တွေမှာ CSS နည်းလမ်းတွေကိုသိရှိနိုင်ပါလိမ့်မယ်။ ### ဖန်ဘူးအစိတ်အပိုင်းတွေဖန်တီးခြင်း Terrarium jar ကို အစိတ်အပိုင်းအလိုက်တည်ဆောက်ပါမယ်။ Responsive design အတွက် absolute positioning နဲ့ percentage-based sizing ကိုအသုံးပြုထားပါတယ်: Terrarium တည်ဆောက်မှုကိုနားလည်ခြင်း: - Percentage-based dimensions ကိုအသုံးပြုပြီး screen size အားလုံးမှာ responsive scaling ရရှိစေ - Absolute positioning ကိုအသုံးပြုပြီး အစိတ်အပိုင်းတွေကိုတိကျစွာ align လုပ် - Opacity values ကိုအသုံးပြုပြီး ဖန် transparency effect ဖန်တီး - Z-index layering ကိုအသုံးပြုပြီး plants တွေ jar အတွင်းမှာပေါ်လာစေ - Box-shadow နဲ့ border-radius ကိုအသုံးပြုပြီး ပိုပြီးလက်တွေ့ကျတဲ့ပုံစံရရှိစေ ### Percentages နဲ့ Responsive Design Dimensions အားလုံးကို fixed pixel values မဟုတ်ဘဲ percentages သုံးထားတာကိုသတိပြုပါ: အရေးကြီးတဲ့အကြောင်းရင်း: - Terrarium ကို screen size မည်သည့်အမျိုးအစားမှာမဆို proportionally scale လုပ်နိုင်စေ - Jar components တွေကြား visual relationships ကိုထိန်းသိမ်းထားနိုင်စေ - Consistent experience ကို mobile phones ကနေ desktop monitors အထိပေးနိုင်စေ - Design ကို visual layout မပျက်ဘဲအလွယ်တကူအပြောင်းအလဲလုပ်နိုင်စေ ### CSS Units ကိုအသုံးပြုခြင်း Border-radius အတွက် rem units ကိုအသုံးပြုပြီး root font size ကိုအခြေခံပြီး scale လုပ်ပါတယ်။ ဒီနည်းလမ်းက user font preferences ကိုလေးစားတဲ့ accessible designs ဖန်တီးနိုင်စေပါတယ်။ CSS relative units အကြောင်းကို official specification မှာပိုမိုလေ့လာပါ။ ✅ Visual Experimentation: ဒီ values တွေကိုပြောင်းလဲပြီး အကျိုးသက်ရောက်မှုကိုကြည့်ပါ: - Jar opacity ကို 0.5 ကနေ 0.8 သို့ပြောင်းလဲပါ - ဖန်ပုံစံမှာဘယ်လိုအကျိုးသက်ရောက်မှုရှိလဲ? - Dirt color ကို #3a241d ကနေ #8B4513 သို့ပြောင်းလဲပါ - visual impact ဘယ်လိုဖြစ်လဲ? - Dirt ရဲ့ z-index ကို 2 သို့ပြောင်းလဲပါ - layering မှာဘာတွေဖြစ်လဲ? ### 🔄 သင်ကြားမှုအခြေခံအချက် CSS Visual Design ကိုနားလည်မှု: Visual CSS ကိုနားလည်မှုကိုအတည်ပြုပါ: - ✅ Percentage-based dimensions တွေက responsive design ကိုဘယ်လိုဖန်တီးလဲ? - ✅ Opacity က ဖန် transparency effect ကိုဘယ်လိုဖန်တီးလဲ? - ✅ Z-index က layering elements တွေမှာဘယ်လိုအခန်းကဏ္ဍရှိလဲ? - ✅ Border-radius values တွေက jar shape ကိုဘယ်လိုဖန်တီးလဲ? Design Principle: ရိုးရှင်းတဲ့ shapes တွေကနေ အဆင့်မြှင့် visuals တွေကိုဘယ်လိုတည်ဆောက်သလဲသတိပြုပါ: 1. Rectangles → Rounded rectangles → Jar components 2. Flat colors → Opacity → Glass effect 3. Individual elements → Layered composition → 3D appearance --- ## GitHub Copilot Agent Challenge 🚀 Agent mode ကိုအသုံးပြုပြီးအောက်ပါ challenge ကိုပြီးစီးပါ: Description: Terrarium plants တွေကို သဘာဝလေတိုက်မှုအကျိုးသက်ရောက်မှုကို simulation လုပ်တဲ့ CSS animation ဖန်တီးပါ။ CSS animations, transforms, နဲ့ keyframes ကိုလေ့ကျင့်ရင်း terrarium ရဲ့ visual appeal ကိုတိုးမြှင့်ပါမယ်။ Prompt: Plants တွေကို .plant class မှာသုံးပြီး CSS keyframe animations ထည့်ပါ။ Plants တွေကို 2-3 degrees left နဲ့ right ကို rotate လုပ်တဲ့ swaying animation ဖန်တီးပါ။ Animation duration ကို 3-4 seconds သတ်မှတ်ပြီး loop ဖြစ်စေပါ။ Natural movement အတွက် easing function ကိုထည့်ပါ။ Agent mode အကြောင်းပိုမိုလေ့လာပါ။ ## 🚀 Challenge: Glass Reflections ထည့်ခြင်း Terrarium ကိုလက်တွေ့ကျတဲ့ glass reflections နဲ့ပိုမိုတိုးမြှင့်ဖို့အဆင်သင့်ဖြစ်ပါပြီ။ ဒီနည်းလမ်းက design ကို depth နဲ့ realism ပိုမိုထည့်သွင်းပေးပါမယ်။ Light က glass surfaces တွေမှာဘယ်လိုပြန်လည်ထင်ရလဲဆိုတာ simulation လုပ်တဲ့ subtle highlights တွေကိုဖန်တီးပါမယ်။ Renaissance painters တွေက Jan van Eyck လိုမျိုး light နဲ့ reflection ကိုအသုံးပြုပြီး painted glass ကို three-dimensional ဖြစ်အောင်လုပ်ခဲ့သလိုမျိုးပါ။ သင့်ရဲ့ရည်မှန်းချက်ကတော့: သင့်ရဲ့ challenge: - Subtle white or light-colored oval shapes ကို glass reflections အတွက်ဖန်တီးပါ - Jar ရဲ့ဘယ်ဘက်မှာ strategically position လုပ်ပါ - Opacity နဲ့ blur effects ကိုအသုံးပြုပြီး realistic light reflection ရရှိစေ - Border-radius ကိုအသုံးပြုပြီး organic, bubble-like shapes ဖန်တီးပါ - Gradients or box-shadows ကိုအသုံးပြုပြီး realism ကိုပိုမိုတိုးမြှင့်ပါ ## Post-Lecture Quiz Post-lecture quiz ## CSS အသိပညာကိုတိုးချဲ့ပါ CSS ကိုစတင်လေ့လာတဲ့အခါမှာ အတော်လေးရှုပ်ထွေးနိုင်ပါတယ်။ ဒါပေမယ့် ဒီ core concepts တွေကိုနားလည်ခြင်းက advanced techniques တွေကိုလေ့လာဖို့အခြေခံအုတ်မြစ်ပေးပါမယ်။ CSS လေ့လာရန်နောက်ထပ်အပိုင်းများ: - Flexbox - elements တွေ alignment နဲ့ distribution ကိုလွယ်ကူစေ - CSS Grid - ရှုပ်ထွေးတဲ့ layout တွေဖန်တီးဖို့အတွက်အင်အားကြီးတဲ့ tools တွေ - CSS Variables - ထပ်တလဲလဲရေးသားမှုကိုလျှော့ချပြီး maintainability ကိုတိုးမြှင့် - Responsive design - screen size မည်သည့်အမျိုးအစားမှာမဆို site တွေကိုအဆင်ပြေစေ ### Interactive Learning Resources ဒီ concepts တွေကိုလေ့ကျင့်ဖို့အတွက် စိတ်ဝင်စားဖွယ်ရှိတဲ့ game တွေကိုအသုံးပြုပါ: - 🐸 Flexbox Froggy - Flexbox ကို challenge တွေဖြင့်ကျွမ်းကျင်ပါ - 🌱 Grid Garden - CSS Grid ကို virtual carrots တွေစိုက်ရင်းလေ့လာပါ - 🎯 CSS Battle - Coding challenges တွေဖြင့် CSS skills ကိုစမ်းသပ်ပါ ### ထပ်မံလေ့လာရန် CSS အခြေခံကိုလုံးလုံးလျှောက်လျှောက်လေ့လာဖို့ Microsoft Learn module ကိုပြီးစီးပါ: Style your HTML app with CSS ### ⚡ နောက် ၅ မိနစ်အတွင်းလုပ်နိုင်တာ - [ ] DevTools ကိုဖွင့်ပြီး Elements panel ကိုအသုံးပြုပြီး website တစ်ခုရဲ့ CSS styles တွေကို inspect လုပ်ပါ - [ ] CSS file တစ်ခုဖန်တီးပြီး HTML page နဲ့ချိတ်ဆက်ပါ - [ ] Colors တွေကို hex, RGB, နဲ့ named colors နည်းလမ်းအမျိုးမျိုးနဲ့ပြောင်းလဲကြည့်ပါ - [ ] Box model ကိုလေ့ကျင့်ပြီး div တစ်ခုမှာ padding နဲ့ margin ထည့်ပါ ### 🎯 နောက်တစ်နာရီအတွင်းရနိုင်တဲ့အကျိုးအမြတ် - [ ] Post-lesson quiz ကိုပြီးစီးပြီး CSS အခြေခံကိုပြန်လည်သုံးသပ်ပါ - [ ] HTML page ကို fonts, colors, နဲ့ spacing တွေသုံးပြီး style လုပ်ပါ - [ ] Flexbox သို့မဟုတ် grid ကိုအသုံးပြုပြီး layout တစ်ခုဖန်တီးပါ - [ ] CSS transitions ကိုအသုံးပြုပြီး smooth effects တွေကိုစမ်းသပ်ပါ - [ ] Media queries ကိုအသုံးပြုပြီး responsive design ကိုလေ့ကျင့်ပါ ### 📅 CSS ကိုတစ်ပတ်လုံးလေ့ကျင့်ခြင်း - [ ] Terrarium styling assignment ကိုဖန်တီးမှုအရည်အသွေးနဲ့ပြီးစီးပါ - [ ] CSS Grid ကိုကျွမ်းကျင်ပြီး photo gallery layout တစ်ခုတည်ဆောက်ပါ - [ ] CSS animations ကိုလေ့လာပြီး design တွေကိုအသက်သွင်းပါ - [ ] Sass သို့မဟုတ် Less လို CSS preprocessors တွေကိုလေ့လာပါ - [ ] Design principles တွေကိုလေ့လာပြီး CSS မှာအသုံးပြုပါ - [ ] Online မှ interesting designs တွေကိုခွဲခြမ်းစိတ်ဖြာပြီးပြန်လည်ဖန်တီးပါ ### 🌟 တစ်လအတွင်း Design Mastery - [ ] Responsive website design system တစ်ခုကိုတည်ဆောက်ပါ - [ ] CSS-in-JS သို့မဟုတ် Tailwind လို utility-first frameworks တွေကိုလေ့လာပါ - [ ] Open source projects တွေမှာ CSS အဆင်ပြေမှုတွေကိုတိုးမြှင့်ပါ - [ ] CSS custom properties နဲ့ containment လို advanced CSS concepts တွေကိုကျွမ်းကျင်ပါ - [ ] Modular CSS နဲ့ reusable component libraries တွေကိုဖန်တီးပါ - [ ] CSS ကိုလေ့လာနေသူတွေကို mentor လုပ်ပြီး design knowledge ကိုမျှဝေပါ ## 🎯 CSS Mastery Timeline ### 🛠️ CSS Toolkit အကျဉ်းချုပ် ဒီသင်ခန်းစာပြီးစီးပြီးနောက်မှာ သင့်မှာရှိတဲ့အရာတွေ: - Cascade Understanding: Styles တွေဘယ်လိုအဆင့်ဆင့်အကျိုးသက်ရောက်မှုရှိပြီး override လုပ်နိုင်လဲ - Selector Mastery: Elements, classes, နဲ့ IDs တွေကိုတိကျစွာ target လုပ်နိုင်မှု - Positioning Skills: Element placement နဲ့ layering ကိုစီမံနိုင်မှု - Visual Design: Glass effects, shadows, နဲ့ transparency ဖန်တီးနိုင်မှု - Responsive Techniques: Percentage-based layouts တွေကို screen မည်သည့်အမျိုးအစားမှာမဆိုအဆင်ပြေစေ - Code Organization: CSS structure ကိုသန့်ရှင်းပြီး maintainable ဖြစ်စေ - Modern Practices: Relative units နဲ့ accessible design patterns အသုံးပြုမှု နောက်တစ်ဆင့်: Terrarium ရဲ့ structure (HTML) နဲ့ style (CSS) ရှိပြီးပါပြီ။ နောက်ဆုံးသင်ခန်းစာမှာ JavaScript နဲ့ interactivity ထည့်သွင်းပါမယ်! ## Assignment CSS Refactoring --- အကြောင်းကြားချက်: ဤစာရွက်စာတမ်းကို AI ဘာသာပြန်ဝန်ဆောင်မှု Co-op Translator ကို အသုံးပြု၍ ဘာသာပြန်ထားပါသည်။ ကျွန်ုပ်တို့သည် တိကျမှုအတွက် ကြိုးစားနေသော်လည်း အလိုအလျောက် ဘာသာပြန်မှုများတွင် အမှားများ သို့မဟုတ် မမှန်ကန်မှုများ ပါဝင်နိုင်သည်ကို သတိပြုပါ။ မူရင်းဘာသာစကားဖြင့် ရေးသားထားသော စာရွက်စာတမ်းကို အာဏာတရားရှိသော အရင်းအမြစ်အဖြစ် သတ်မှတ်သင့်ပါသည်။ အရေးကြီးသော အချက်အလက်များအတွက် လူက ဘာသာပြန်မှုကို အကြံပြုပါသည်။ ဤဘာသာပြန်မှုကို အသုံးပြုခြင်းမှ ဖြစ်ပေါ်လာသော အလွဲအမှားများ သို့မဟုတ် အနားလွဲမှုများအတွက် ကျွန်ုပ်တို့သည် တာဝန်မယူပါ။
टेरारियम परियोजना भाग १: HTML को परिचय
HTML, वा हाइपरटेक्स्ट मार्कअप भाषा, तपाईंले कहिल्यै भ्रमण गरेको प्रत्येक वेबसाइटको आधार हो। HTML लाई वेब पृष्ठहरूको संरचना दिने कंकालको रूपमा सोच्नुहोस् – यसले सामग्री कहाँ जान्छ, कसरी व्यवस्थित हुन्छ, र प्रत्येक टुक्राले के प्रतिनिधित्व गर्दछ भनेर परिभाषित गर्दछ। CSS ले पछि तपाईंको HTML लाई रंग र लेआउटको साथ "सजाउनेछ", र जाभास्क्रिप्टले अन्तरक्रियात्मकता संग यसलाई जीवनमा ल्याउनेछ, HTML ले सबै कुरा सम्भव बनाउने आवश्यक संरचना प्रदान गर्दछ। यस पाठमा, तपाईंले भर्चुअल टेरारियम इन्टरफेसको लागि HTML संरचना सिर्जना गर्नुहुनेछ। यो व्यावहारिक परियोजनाले तपाईंलाई मौलिक HTML अवधारणाहरू सिकाउँछ जबकि दृश्य रूपमा आकर्षक केहि निर्माण गर्दै। तपाईंले सामग्रीलाई सेम्यान्टिक तत्वहरू प्रयोग गरेर कसरी व्यवस्थित गर्ने, छविहरूसँग काम गर्ने, र अन्तरक्रियात्मक वेब अनुप्रयोगको लागि आधार सिर्जना गर्ने सिक्नुहुनेछ। यस पाठको अन्त्यमा, तपाईंले व्यवस्थित स्तम्भहरूमा बिरुवाको छविहरू प्रदर्शन गर्ने कार्यरत HTML पृष्ठ पाउनुहुनेछ, जुन अर्को पाठमा शैलीको लागि तयार हुनेछ। यदि यो सुरुमा आधारभूत देखिन्छ भने चिन्ता नगर्नुहोस् – CSS ले दृश्य चमक थप्नुअघि HTML ले ठीक यही गर्नुपर्छ। ## प्रि-लेक्चर क्विज प्रि-लेक्चर क्विज ## तपाईंको परियोजना सेट अप गर्दै HTML कोडमा प्रवेश गर्नु अघि, तपाईंको टेरारियम परियोजनाको लागि उचित कार्यक्षेत्र सेट अप गरौं। सुरुबाट व्यवस्थित फाइल संरचना सिर्जना गर्नु वेब विकासको यात्रामा तपाईंलाई राम्रो सेवा दिने महत्त्वपूर्ण बानी हो। ### कार्य: तपाईंको परियोजना संरचना सिर्जना गर्नुहोस् तपाईंले आफ्नो टेरारियम परियोजनाको लागि समर्पित फोल्डर सिर्जना गर्नुहुनेछ र आफ्नो पहिलो HTML फाइल थप्नुहुनेछ। यहाँ दुई दृष्टिकोणहरू छन् जुन तपाईं प्रयोग गर्न सक्नुहुन्छ: विकल्प १: भिजुअल स्टुडियो कोड प्रयोग गर्दै 1. भिजुअल स्टुडियो कोड खोल्नुहोस् 2. "फाइल" → "फोल्डर खोल्नुहोस्" क्लिक गर्नुहोस् वा Ctrl+K, Ctrl+O (विन्डोज/लिनक्स) वा Cmd+K, Cmd+O (म्याक) प्रयोग गर्नुहोस् 3. terrarium नामक नयाँ फोल्डर सिर्जना गर्नुहोस् र यसलाई चयन गर्नुहोस् 4. एक्सप्लोरर प्यानमा, "नयाँ फाइल" आइकन क्लिक गर्नुहोस् 5. तपाईंको फाइललाई index.html नाम दिनुहोस् विकल्प २: टर्मिनल कमाण्डहरू प्रयोग गर्दै यी कमाण्डहरूले के गर्छन्: - नयाँ डाइरेक्टरी सिर्जना गर्छन् terrarium नामक तपाईंको परियोजनाको लागि - डाइरेक्टरीमा जान्छन् terrarium - खाली index.html फाइल सिर्जना गर्छन् - फाइललाई भिजुअल स्टुडियो कोडमा सम्पादनको लागि खोल्छन् ## HTML डकुमेन्ट संरचना बुझ्दै प्रत्येक HTML डकुमेन्टले ब्राउजरहरूले सही रूपमा बुझ्न र प्रदर्शन गर्न आवश्यक विशिष्ट संरचनाको पालना गर्दछ। यस संरचनालाई औपचारिक पत्र जस्तै सोच्नुहोस् – यसमा विशेष क्रममा आवश्यक तत्वहरू छन् जसले प्राप्तकर्तालाई (यस अवस्थामा, ब्राउजर) सामग्री सही रूपमा प्रक्रिया गर्न मद्दत गर्दछ। आउनुहोस्, प्रत्येक HTML डकुमेन्टलाई आवश्यक पर्ने आधारभूत संरचना थप्न सुरु गरौं। ### DOCTYPE घोषणा र रूट तत्व कुनै पनि HTML फाइलको पहिलो दुई लाइनहरूले ब्राउजरलाई डकुमेन्टको "परिचय" को रूपमा सेवा गर्छन्: यस कोडले के गर्छ: - डकुमेन्ट प्रकार HTML5 घोषणा गर्छ <!DOCTYPE html> प्रयोग गरेर - रूट <html> तत्व सिर्जना गर्छ जसले सबै पृष्ठ सामग्री समावेश गर्दछ - आधुनिक वेब मापदण्डहरू स्थापना गर्छ सही ब्राउजर रेंडरिंगको लागि - विभिन्न ब्राउजर र उपकरणहरूमा स्थिर प्रदर्शन सुनिश्चित गर्छ ### 🔄 शिक्षण जाँच रोक्नुहोस् र विचार गर्नुहोस्: अगाडि बढ्नु अघि, सुनिश्चित गर्नुहोस् कि तपाईं बुझ्नुहुन्छ: - ✅ किन प्रत्येक HTML डकुमेन्टलाई DOCTYPE घोषणाको आवश्यकता हुन्छ - ✅ <html> रूट तत्वले के समावेश गर्दछ - ✅ यो संरचनाले ब्राउजरहरूलाई पृष्ठहरू सही रूपमा रेंडर गर्न कसरी मद्दत गर्छ छिटो आत्म-परीक्षण: के तपाईं "मापदण्ड-अनुकूल रेंडरिंग" को मतलब आफ्नै शब्दमा व्याख्या गर्न सक्नुहुन्छ? ## आवश्यक डकुमेन्ट मेटाडाटा थप्दै HTML डकुमेन्टको <head> सेक्सनमा ब्राउजरहरू र सर्च इन्जिनहरूले आवश्यक पर्ने महत्त्वपूर्ण जानकारी समावेश हुन्छ, तर आगन्तुकहरूले पृष्ठमा प्रत्यक्ष रूपमा देख्दैनन्। यसलाई "पर्दा पछाडि" जानकारीको रूपमा सोच्नुहोस् जसले तपाईंको वेबपृष्ठलाई सही रूपमा काम गर्न र विभिन्न उपकरणहरू र प्लेटफर्महरूमा सही रूपमा देखिन मद्दत गर्दछ। यो मेटाडाटाले ब्राउजरहरूलाई तपाईंको पृष्ठ कसरी प्रदर्शन गर्ने, कुन क्यारेक्टर एन्कोडिङ प्रयोग गर्ने, र विभिन्न स्क्रिन साइजहरू कसरी ह्यान्डल गर्ने भन्ने बताउँछ – व्यावसायिक, पहुँचयोग्य वेबपृष्ठहरू सिर्जना गर्न आवश्यक सबै। ### कार्य: डकुमेन्ट हेड थप्नुहोस् तपाईंको <html> ट्यागहरूको बीचमा यो <head> सेक्सन थप्नुहोस्: प्रत्येक तत्वले के गर्छ भन्ने कुरा तोड्दै: - पृष्ठ शीर्षक सेट गर्छ जुन ब्राउजर ट्याबहरू र सर्च परिणामहरूमा देखा पर्छ - UTF-8 क्यारेक्टर एन्कोडिङ निर्दिष्ट गर्छ विश्वव्यापी रूपमा सही पाठ प्रदर्शनको लागि - आधुनिक इन्टरनेट एक्सप्लोरर संस्करणहरूसँग अनुकूलता सुनिश्चित गर्छ - उत्तरदायी डिजाइन कन्फिगर गर्छ उपकरण चौडाइसँग मिल्दो भ्यूपोर्ट सेट गरेर - प्रारम्भिक जूम स्तर नियन्त्रण गर्छ सामग्रीलाई प्राकृतिक आकारमा प्रदर्शन गर्न ## डकुमेन्ट बडी निर्माण गर्दै HTML को <body> तत्वले तपाईंको वेबपृष्ठको सबै दृश्य सामग्री समावेश गर्दछ – प्रयोगकर्ताहरूले देख्ने र अन्तरक्रिया गर्ने सबै कुरा। जबकि <head> सेक्सनले ब्राउजरलाई निर्देशनहरू प्रदान गर्यो, <body> सेक्सनले वास्तविक सामग्री समावेश गर्दछ: पाठ, छविहरू, बटनहरू, र अन्य तत्वहरू जसले तपाईंको प्रयोगकर्ता इन्टरफेस सिर्जना गर्छ। आउनुहोस्, बडी संरचना थपौं र HTML ट्यागहरू कसरी सँगै काम गर्छन् भन्ने कुरा बुझौं। ### HTML ट्याग संरचना बुझ्दै HTML ले तत्वहरू परिभाषित गर्न जोडी ट्यागहरू प्रयोग गर्दछ। अधिकांश ट्यागहरूमा <p> जस्तै खोल्ने ट्याग र </p> जस्तै बन्द गर्ने ट्याग हुन्छ, बीचमा सामग्रीको साथ: <p>Hello, world!</p>। यसले "Hello, world!" पाठ समावेश गर्ने अनुच्छेद तत्व सिर्जना गर्छ। ### कार्य: बडी तत्व थप्नुहोस् तपाईंको HTML फाइललाई <body> तत्व समावेश गर्न अद्यावधिक गर्नुहोस्: यस पूर्ण संरचनाले के प्रदान गर्छ: - आधारभूत HTML5 डकुमेन्ट फ्रेमवर्क स्थापना गर्छ - सही ब्राउजर रेंडरिंगको लागि आवश्यक मेटाडाटा समावेश गर्छ - तपाईंको दृश्य सामग्रीको लागि खाली बडी सिर्जना गर्छ - व्यावसायिक वेब विकासको उत्कृष्ट अभ्यासहरू पालना गर्छ अब तपाईं आफ्नो टेरारियमको दृश्य तत्वहरू थप्न तयार हुनुहुन्छ। हामी <div> तत्वहरूलाई कन्टेनरको रूपमा प्रयोग गर्नेछौं विभिन्न सामग्री खण्डहरू व्यवस्थित गर्न, र <img> तत्वहरू बिरुवाको छविहरू प्रदर्शन गर्न। ### छविहरू र लेआउट कन्टेनरहरूसँग काम गर्दै HTML मा छविहरू विशेष हुन्छन् किनभने तिनीहरूले "सेल्फ-क्लोजिङ" ट्यागहरू प्रयोग गर्छन्। <p></p> जस्ता तत्वहरू सामग्री वरिपरि घुम्छन्, जबकि <img> ट्यागले सबै जानकारी समावेश गर्दछ जुन यसले आफैंमा आवश्यक छ, जस्तै src छवि फाइल पथको लागि र alt पहुँचयोग्यताको लागि। छविहरूलाई तपाईंको HTML मा थप्न अघि, तपाईंले आफ्नो परियोजना फाइलहरू सही रूपमा व्यवस्थित गर्न आवश्यक छविहरूको फोल्डर सिर्जना गर्नुपर्नेछ र बिरुवाको ग्राफिक्सहरू थप्नुपर्नेछ। पहिले, तपाईंको छविहरू सेट गर्नुहोस्: 1. तपाईंको टेरारियम परियोजना फोल्डर भित्र images नामक फोल्डर सिर्जना गर्नुहोस् 2. समाधान फोल्डर बाट बिरुवाको छविहरू डाउनलोड गर्नुहोस् (कुल १४ बिरुवा छविहरू) 3. सबै बिरुवा छविहरू तपाईंको नयाँ images फोल्डरमा प्रतिलिपि गर्नुहोस् ### कार्य: बिरुवा प्रदर्शन लेआउट सिर्जना गर्नुहोस् अब तपाईंको <body></body> ट्यागहरूको बीचमा दुई स्तम्भहरूमा व्यवस्थित बिरुवा छविहरू थप्नुहोस्: चरण-दर-चरण, यस कोडमा के भइरहेको छ: - मुख्य पृष्ठ कन्टेनर सिर्जना गर्छ id="page" सबै सामग्री समावेश गर्न - दुई स्तम्भ कन्टेनर स्थापना गर्छ: left-container र right-container - ७ बिरुवाहरूलाई बायाँ स्तम्भमा र ७ बिरुवाहरूलाई दायाँ स्तम्भमा व्यवस्थित गर्छ - प्रत्येक बिरुवा छविलाई plant-holder div मा घुमाउँछ व्यक्तिगत स्थिति निर्धारणको लागि - CSS शैलीको लागि समान वर्ग नामहरू लागू गर्छ अर्को पाठमा - प्रत्येक बिरुवा छविलाई अनौठो ID प्रदान गर्छ जाभास्क्रिप्ट अन्तरक्रियाको लागि पछि - छविहरूको फोल्डरमा सही फाइल पथ समावेश गर्छ ### 🔄 शिक्षण जाँच संरचना बुझाइ: तपाईंको HTML संरचनालाई समीक्षा गर्न एक क्षण लिनुहोस्: - ✅ के तपाईं लेआउटमा मुख्य कन्टेनरहरू पहिचान गर्न सक्नुहुन्छ? - ✅ के तपाईं बुझ्नुहुन्छ किन प्रत्येक छविलाई अनौठो ID छ? - ✅ तपाईं plant-holder div को उद्देश्यलाई कसरी वर्णन गर्नुहुन्छ? दृश्य निरीक्षण: तपाईंको HTML फाइललाई ब्राउजरमा खोल्नुहोस्। तपाईंले देख्नुपर्छ: - बिरुवाको छविहरूको आधारभूत सूची - छविहरू दुई स्तम्भहरूमा व्यवस्थित - सरल, बिना शैलीको लेआउट स्मरण गर्नुहोस्: यो साधारण उपस्थिति ठीक HTML ले CSS शैलीको अघि देखिनु पर्ने हो! यस मार्कअपलाई थपेर, बिरुवाहरू स्क्रिनमा देखा पर्नेछन्, यद्यपि तिनीहरू अझै चमकदार देखिने छैनन् – त्यसका लागि CSS अर्को पाठमा हो! अहिलेको लागि, तपाईंले आफ्नो सामग्रीलाई सही रूपमा व्यवस्थित गर्ने र पहुँचयोग्यता उत्कृष्ट अभ्यासहरू पालना गर्ने ठोस HTML आधार पाउनुभएको छ। ## पहुँचयोग्यताको लागि सेम्यान्टिक HTML प्रयोग गर्दै सेम्यान्टिक HTML भनेको HTML तत्वहरूलाई तिनीहरूको अर्थ र उद्देश्यको आधारमा चयन गर्नु हो, केवल तिनीहरूको उपस्थिति होइन। जब तपाईं सेम्यान्टिक मार्कअप प्रयोग गर्नुहुन्छ, तपाईं ब्राउजरहरू, सर्च इन्जिनहरू, र स्क्रिन रिडर जस्ता सहायक प्रविधिहरूसँग तपाईंको सामग्रीको संरचना र अर्थ सञ्चार गर्दै हुनुहुन्छ। यो दृष्टिकोणले अपाङ्गता भएका प्रयोगकर्ताहरूको लागि तपाईंको वेबसाइटहरूलाई थप पहुँचयोग्य बनाउँछ र सर्च इन्जिनहरूले तपाईंको सामग्रीलाई राम्रोसँग बुझ्न मद्दत गर्छ। यो आधुनिक वेब विकासको मौलिक सिद्धान्त हो जसले सबैका लागि राम्रो अनुभवहरू सिर्जना गर्छ। ### सेम्यान्टिक पृष्ठ शीर्षक थप्दै आउनुहोस्, तपाईंको टेरारियम पृष्ठमा उचित शीर्षक थपौं। तपाईंको खोल्ने <body> ट्यागको ठीक पछि यो लाइन थप्नुहोस्: किन सेम्यान्टिक मार्कअप महत्त्वपूर्ण छ: - स्क्रिन रिडरहरूलाई पृष्ठ संरचना नेभिगेट गर्न र बुझ्न मद्दत गर्छ - सर्च इन्जिन अप्टिमाइजेसन (SEO) सुधार गर्छ सामग्रीको पदानुक्रम स्पष्ट गरेर - दृष्टि अपाङ्गता वा संज्ञानात्मक भिन्नता भएका प्रयोगकर्ताहरूको पहुँचयोग्यता बढाउँछ - सबै उपकरणहरू र प्लेटफर्महरूमा राम्रो प्रयोगकर्ता अनुभव सिर्जना गर्छ - व्यावसायिक विकासका लागि वेब मापदण्डहरू र उत्कृष्ट अभ्यासहरू पालना गर्छ सेम्यान्टिक बनाम गैर-सेम्यान्टिक विकल्पहरूको उदाहरणहरू: - प्रत्येक दृश्य घटक (माथि, पर्खाल, माटो, तल) को लागि अलग तत्वहरू परिभाषित गर्दछ। - ग्लास प्रतिबिम्ब प्रभावहरूको लागि नेस्टेड तत्वहरू समावेश गर्दछ (चमकदार तत्वहरू)। - प्रत्येक तत्वको उद्देश्य स्पष्ट रूपमा संकेत गर्ने वर्णनात्मक क्लास नामहरू प्रयोग गर्दछ। - ग्लास टेरारियमको स्वरूप सिर्जना गर्ने CSS स्टाइलिङको संरचना तयार गर्दछ। ### 🔄 शिक्षण जाँच HTML संरचना दक्षता: अगाडि बढ्नु अघि सुनिश्चित गर्नुहोस् कि तपाईं: - ✅ HTML संरचना र दृश्य स्वरूपको बीचको भिन्नता व्याख्या गर्न सक्नुहुन्छ। - ✅ सेम्यान्टिक र गैर-सेम्यान्टिक HTML तत्वहरू पहिचान गर्न सक्नुहुन्छ। - ✅ उचित मार्कअपले पहुँचयोग्यता कसरी लाभ पुर्याउँछ व्याख्या गर्न सक्नुहुन्छ। - ✅ पूर्ण दस्तावेज ट्री संरचना पहिचान गर्न सक्नुहुन्छ। तपाईंको बुझाइ परीक्षण गर्नुहोस्: आफ्नो HTML फाइल ब्राउजरमा खोल्नुहोस् जहाँ JavaScript अक्षम गरिएको छ र CSS हटाइएको छ। यसले तपाईंले सिर्जना गरेको शुद्ध सेम्यान्टिक संरचना देखाउँछ! --- ## GitHub Copilot Agent Challenge Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्: विवरण: टेरारियम परियोजनामा थप्न सकिने प्लान्ट केयर गाइड सेक्सनको लागि सेम्यान्टिक HTML संरचना सिर्जना गर्नुहोस्। प्रेरणा: "प्लान्ट केयर गाइड" मुख्य शीर्षक, "पानी दिने", "प्रकाश आवश्यकताहरू", र "माटोको हेरचाह" शीर्षक भएका तीन उप-सेक्सनहरू, प्रत्येकमा प्लान्ट केयर जानकारीको अनुच्छेद समावेश गर्ने सेम्यान्टिक HTML सेक्सन सिर्जना गर्नुहोस्। सामग्रीलाई उपयुक्त रूपमा संरचना गर्न <section>, <h2>, <h3>, र <p> जस्ता उचित सेम्यान्टिक HTML ट्यागहरू प्रयोग गर्नुहोस्। Agent मोडको बारेमा थप जान्नुहोस्। ## HTML इतिहास चुनौती वेबको विकासबारे सिक्दै HTML ले १९९० मा टिम बर्नर्स-लीले CERN मा पहिलो वेब ब्राउजर सिर्जना गरेदेखि धेरै विकास गरेको छ। केही पुराना ट्यागहरू जस्तै <marquee> अब डिप्रिकेटेड छन् किनभने तिनीहरू आधुनिक पहुँचयोग्यता मापदण्ड र उत्तरदायी डिजाइन सिद्धान्तहरूसँग राम्रोसँग काम गर्दैनन्। यो प्रयोग प्रयास गर्नुहोस्: 1. आफ्नो <h1> शीर्षकलाई अस्थायी रूपमा <marquee> ट्यागमा राख्नुहोस्: <marquee><h1>मेरो टेरारियम</h1></marquee>। 2. आफ्नो पृष्ठ ब्राउजरमा खोल्नुहोस् र स्क्रोलिङ प्रभाव अवलोकन गर्नुहोस्। 3. यो ट्याग किन डिप्रिकेटेड भयो भनेर विचार गर्नुहोस् (संकेत: प्रयोगकर्ता अनुभव र पहुँचयोग्यता सोच्नुहोस्)। 4. <marquee> ट्याग हटाउनुहोस् र सेम्यान्टिक मार्कअपमा फर्कनुहोस्। प्रतिबिम्ब प्रश्नहरू: - स्क्रोलिङ शीर्षकले दृश्य अपाङ्गता वा गति संवेदनशीलता भएका प्रयोगकर्ताहरूलाई कसरी असर गर्न सक्छ? - समान दृश्य प्रभावहरू अधिक पहुँचयोग्य रूपमा प्राप्त गर्न के आधुनिक CSS प्रविधिहरू प्रयोग गर्न सकिन्छ? - डिप्रिकेटेड तत्वहरूको सट्टा वर्तमान वेब मापदण्ड प्रयोग गर्नु किन महत्त्वपूर्ण छ? पुराना र डिप्रिकेटेड HTML तत्वहरूको बारेमा थप अन्वेषण गर्नुहोस् ताकि वेब मापदण्डले प्रयोगकर्ता अनुभव सुधार गर्न कसरी विकास गर्छन् भन्ने बुझ्न सकियो। ## पोस्ट-लेक्चर क्विज पोस्ट-लेक्चर क्विज ## समीक्षा र आत्म-अध्ययन HTML ज्ञानलाई गहिरो बनाउनुहोस् HTML वेबको आधार हो, ३० वर्षभन्दा बढी समयदेखि, साधारण दस्तावेज मार्कअप भाषाबाट अन्तरक्रियात्मक अनुप्रयोगहरू निर्माण गर्ने परिष्कृत प्लेटफर्ममा विकसित हुँदै। यस विकासलाई बुझ्दा आधुनिक वेब मापदण्डहरूको प्रशंसा गर्न मद्दत गर्दछ र राम्रो विकास निर्णयहरू लिन सकिन्छ। सिफारिस गरिएको सिकाइ मार्गहरू: 1. HTML इतिहास र विकास - HTML 1.0 देखि HTML5 सम्मको समयरेखा अनुसन्धान गर्नुहोस्। - किन केही ट्यागहरू डिप्रिकेटेड भए (पहुंचयोग्यता, मोबाइल-अनुकूलता, मर्मतयोग्यता) अन्वेषण गर्नुहोस्। - उदीयमान HTML सुविधाहरू र प्रस्तावहरूको अनुसन्धान गर्नुहोस्। 2. सेम्यान्टिक HTML गहिरो अध्ययन - HTML5 सेम्यान्टिक तत्वहरूको पूर्ण सूची अध्ययन गर्नुहोस्। - कहिले <article>, <section>, <aside>, र <main> प्रयोग गर्ने पहिचान अभ्यास गर्नुहोस्। - पहुँचयोग्यता सुधार गर्न ARIA विशेषताहरूको बारेमा जान्नुहोस्। 3. आधुनिक वेब विकास - उत्तरदायी वेबसाइट निर्माण Microsoft Learn मा अन्वेषण गर्नुहोस्। - HTML कसरी CSS र JavaScript सँग एकीकृत हुन्छ बुझ्नुहोस्। - वेब प्रदर्शन र SEO उत्तम अभ्यासहरूको बारेमा जान्नुहोस्। प्रतिबिम्ब प्रश्नहरू: - कुन डिप्रिकेटेड HTML ट्यागहरू तपाईंले पत्ता लगाउनुभयो, र किन तिनीहरू हटाइयो? - भविष्यका संस्करणहरूको लागि प्रस्तावित नयाँ HTML सुविधाहरू के हुन्? - सेम्यान्टिक HTML वेब पहुँचयोग्यता र SEO मा कसरी योगदान पुर्याउँछ? ### ⚡ तपाईंले अर्को ५ मिनेटमा गर्न सक्ने कुरा - [ ] DevTools (F12) खोल्नुहोस् र आफ्नो मनपर्ने वेबसाइटको HTML संरचना निरीक्षण गर्नुहोस्। - [ ] आधारभूत ट्यागहरू <h1>, <p>, र <img> सहित साधारण HTML फाइल सिर्जना गर्नुहोस्। - [ ] W3C HTML Validator अनलाइन प्रयोग गरेर आफ्नो HTML मान्य गर्नुहोस्। - [ ] <!-- टिप्पणी --> प्रयोग गरेर आफ्नो HTML मा टिप्पणी थप्ने प्रयास गर्नुहोस्। ### 🎯 तपाईंले यो घण्टामा हासिल गर्न सक्ने कुरा - [ ] पोस्ट-पाठ क्विज पूरा गर्नुहोस् र सेम्यान्टिक HTML अवधारणाहरू समीक्षा गर्नुहोस्। - [ ] उचित HTML संरचना प्रयोग गरेर आफ्नो बारेमा साधारण वेबपृष्ठ निर्माण गर्नुहोस्। - [ ] विभिन्न शीर्षक स्तरहरू र पाठ स्वरूप ट्यागहरू प्रयोग गरेर प्रयोग गर्नुहोस्। - [ ] मल्टिमिडिया एकीकरण अभ्यास गर्न छविहरू र लिंकहरू थप्नुहोस्। - [ ] तपाईंले अझै प्रयास नगरेका HTML5 सुविधाहरूको अनुसन्धान गर्नुहोस्। ### 📅 तपाईंको हप्ताको HTML यात्रा - [ ] सेम्यान्टिक मार्कअपको साथ टेरारियम परियोजना असाइनमेन्ट पूरा गर्नुहोस्। - [ ] ARIA लेबलहरू र भूमिकाहरू प्रयोग गरेर पहुँचयोग्य वेबपृष्ठ सिर्जना गर्नुहोस्। - [ ] विभिन्न इनपुट प्रकारहरू सहित फारम सिर्जना अभ्यास गर्नुहोस्। - [ ] स्थानीयStorage वा geolocation जस्ता HTML5 APIs अन्वेषण गर्नुहोस्। - [ ] उत्तरदायी HTML ढाँचाहरू र मोबाइल-प्रथम डिजाइन अध्ययन गर्नुहोस्। - [ ] उत्तम अभ्यासहरूको लागि अन्य विकासकर्ताहरूको HTML कोड समीक्षा गर्नुहोस्। ### 🌟 तपाईंको महिनाको वेब आधार - [ ] आफ्नो HTML दक्षता प्रदर्शन गर्ने पोर्टफोलियो वेबसाइट निर्माण गर्नुहोस्। - [ ] Handlebars जस्ता फ्रेमवर्कको साथ HTML टेम्प्लेटिङ सिक्नुहोस्। - [ ] HTML दस्तावेज सुधार गरेर ओपन सोर्स परियोजनाहरूमा योगदान गर्नुहोस्। - [ ] कस्टम तत्वहरू जस्ता उन्नत HTML अवधारणाहरूमा महारत हासिल गर्नुहोस्। - [ ] CSS फ्रेमवर्क र JavaScript पुस्तकालयहरूसँग HTML एकीकृत गर्नुहोस्। - [ ] HTML आधारभूत कुराहरू सिक्दै अरूलाई मार्गदर्शन गर्नुहोस्। ## 🎯 तपाईंको HTML दक्षता समयरेखा ### 🛠️ तपाईंको HTML उपकरण किट सारांश यो पाठ पूरा गरेपछि, तपाईंसँग अब छ: - दस्तावेज संरचना: उचित DOCTYPE सहित पूर्ण HTML5 आधार। - सेम्यान्टिक मार्कअप: पहुँचयोग्यता र SEO सुधार गर्ने अर्थपूर्ण ट्यागहरू। - छवि एकीकरण: उचित फाइल संगठन र alt पाठ अभ्यासहरू। - लेआउट कन्टेनरहरू: वर्णनात्मक क्लास नामहरू सहित divs को रणनीतिक प्रयोग। - पहुंचयोग्यता सचेतता: स्क्रिन रिडर नेभिगेसनको समझ। - आधुनिक मापदण्डहरू: वर्तमान HTML5 अभ्यासहरू र डिप्रिकेटेड ट्याग ज्ञान। - परियोजना आधार: CSS स्टाइलिङ र JavaScript अन्तरक्रियाको लागि ठोस आधार। अर्को चरणहरू: तपाईंको HTML संरचना CSS स्टाइलिङको लागि तयार छ! तपाईंले निर्माण गरेको सेम्यान्टिक आधारले अर्को पाठलाई बुझ्न धेरै सजिलो बनाउनेछ। ## असाइनमेन्ट HTML अभ्यास गर्नुहोस्: ब्लग मोकअप निर्माण गर्नुहोस् --- अस्वीकरण: यो दस्तावेज AI अनुवाद सेवा Co-op Translator प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको मूल दस्तावेजलाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुनेछैनौं।
टेरारियम प्रोजेक्ट भाग २: CSS को परिचय
तपाईंको HTML टेरारियम कति सामान्य देखिन्थ्यो भन्ने सम्झनुहुन्छ? CSS ले त्यो साधारण संरचनालाई दृश्यात्मक रूपमा आकर्षक बनाउने काम गर्छ। यदि HTML घरको फ्रेम बनाउने जस्तो हो भने, CSS भनेको घरलाई घरजस्तो बनाउने सबै कुरा हो - रंग, फर्निचरको व्यवस्था, बत्ती, र कोठाहरूको प्रवाह। सोच्नुहोस् कि भर्सायको दरबार साधारण शिकारको कुटीबाट सुरु भयो, तर सजावट र लेआउटमा ध्यान दिएर यसलाई संसारको सबैभन्दा भव्य भवनहरू मध्ये एकमा परिणत गरियो। आज, हामी तपाईंको टेरारियमलाई कार्यात्मकबाट परिष्कृतमा रूपान्तरण गर्नेछौं। तपाईंले तत्वहरूलाई ठीकसँग स्थिति दिन, विभिन्न स्क्रिन आकारहरूमा लेआउटहरूलाई प्रतिक्रिया दिन, र वेबसाइटहरूलाई आकर्षक बनाउने दृश्यात्मक अपील सिर्जना गर्न सिक्नुहुनेछ। यस पाठको अन्त्यमा, तपाईंले देख्नुहुनेछ कि रणनीतिक CSS शैलीले तपाईंको प्रोजेक्टलाई नाटकीय रूपमा सुधार गर्न सक्छ। अब तपाईंको टेरारियममा केही शैली थपौं। ## प्रि-लेक्चर क्विज प्रि-लेक्चर क्विज ## CSS को साथ सुरु गर्दै CSS लाई प्रायः "चिजहरू सुन्दर बनाउने" मात्र मानिन्छ, तर यसले धेरै व्यापक उद्देश्य पूरा गर्छ। CSS फिल्मको निर्देशक जस्तै हो - तपाईंले सबै कुरा कस्तो देखिन्छ, कसरी चल्छ, अन्तरक्रियामा कसरी प्रतिक्रिया दिन्छ, र विभिन्न परिस्थितिहरूमा कसरी अनुकूलन हुन्छ भन्ने नियन्त्रण गर्नुहुन्छ। आधुनिक CSS उल्लेखनीय रूपमा सक्षम छ। तपाईंले फोन, ट्याब्लेट, र डेस्कटप कम्प्युटरहरूको लागि लेआउटहरू स्वतः समायोजन गर्ने कोड लेख्न सक्नुहुन्छ। तपाईंले प्रयोगकर्ताको ध्यान आवश्यक ठाउँमा मार्गदर्शन गर्ने सहज एनिमेसनहरू सिर्जना गर्न सक्नुहुन्छ। जब सबै कुरा सँगै काम गर्छ, परिणामहरू निकै प्रभावशाली हुन सक्छ। यस पाठमा हामीले के हासिल गर्नेछौं: - सिर्जना गर्नेछौं आधुनिक CSS प्रविधिहरू प्रयोग गरेर तपाईंको टेरारियमको पूर्ण दृश्य डिजाइन - अन्वेषण गर्नेछौं क्यास्केड, इनहेरिटेन्स, र CSS चयनकर्ताहरू जस्ता आधारभूत अवधारणाहरू - कार्यान्वयन गर्नेछौं उत्तरदायी स्थिति र लेआउट रणनीतिहरू - निर्माण गर्नेछौं CSS आकार र शैली प्रयोग गरेर टेरारियम कन्टेनर ### पूर्वापेक्षा तपाईंले अघिल्लो पाठबाट तपाईंको टेरारियमको HTML संरचना पूरा गर्नुपर्छ र यसलाई शैली बनाउन तयार राख्नुपर्छ। ### तपाईंको CSS फाइल सेट अप गर्दै शैली सुरु गर्न अघि, हामीले CSS लाई HTML सँग जडान गर्न आवश्यक छ। यो जडानले ब्राउजरलाई हाम्रो टेरारियमको लागि शैली निर्देशनहरू कहाँ फेला पार्ने बताउँछ। तपाईंको टेरारियम फोल्डरमा, style.css नामक नयाँ फाइल सिर्जना गर्नुहोस्, त्यसपछि यसलाई तपाईंको HTML डकुमेन्टको <head> सेक्सनमा लिंक गर्नुहोस्: यस कोडले के गर्छ: - जडान बनाउँछ तपाईंको HTML र CSS फाइलहरू बीच - ब्राउजरलाई बताउँछ style.css बाट शैलीहरू लोड र लागू गर्न - प्रयोग गर्छ rel="stylesheet" विशेषता CSS फाइल हो भनेर निर्दिष्ट गर्न - सन्दर्भ दिन्छ फाइल पथ href="./style.css" प्रयोग गरेर ## CSS क्यास्केडको समझ CSS लाई "क्यास्केडिङ" शैली शीट्स किन भनिन्छ भनेर कहिल्यै सोच्नुभएको छ? शैलीहरू झरनाजस्तै तल झर्छन्, र कहिलेकाहीं तिनीहरू एकअर्कासँग विरोध गर्छन्। कसरी सैन्य आदेश संरचनाहरू काम गर्छन् भनेर विचार गर्नुहोस् - सामान्य आदेशले "सबै सैनिकहरूले हरियो लगाउनुहोस्" भन्न सक्छ, तर तपाईंको युनिटलाई विशिष्ट आदेशले "समारोहको लागि ड्रेस ब्लुज लगाउनुहोस्" भन्न सक्छ। थप विशिष्ट निर्देशनलाई प्राथमिकता दिइन्छ। CSS ले यस्तै तर्क अनुसरण गर्छ, र यो पदानुक्रमको समझले डिबगिङलाई धेरै व्यवस्थापनयोग्य बनाउँछ। ### क्यास्केड प्राथमिकतासँग प्रयोग क्यास्केडलाई कार्यमा देखौं र शैलीको द्वन्द्व सिर्जना गरौं। पहिलो, तपाईंको <h1> ट्यागमा इनलाइन शैली थप्नुहोस्: यस कोडले के गर्छ: - रंग लागू गर्छ इनलाइन शैली प्रयोग गरेर <h1> तत्वमा - प्रयोग गर्छ style विशेषता CSS लाई HTML मा सीधा एम्बेड गर्न - सिर्जना गर्छ यो विशिष्ट तत्वको लागि उच्च प्राथमिकता शैली नियम अब, तपाईंको style.css फाइलमा यो नियम थप्नुहोस्: माथिको कोडमा: - परिभाषित गर्छ CSS नियम जसले सबै <h1> तत्वहरूलाई लक्षित गर्छ - सेट गर्छ पाठको रंग नीलो बाह्य शैली शीट प्रयोग गरेर - सिर्जना गर्छ इनलाइन शैलीहरूको तुलनामा कम प्राथमिकता नियम ✅ ज्ञान जाँच: तपाईंको वेब एपमा कुन रंग देखिन्छ? किन त्यो रंग जित्छ? तपाईंले शैलीहरूलाई ओभरराइड गर्न चाहनुहुने परिदृश्यहरू सोच्न सक्नुहुन्छ? ## CSS इनहेरिटेन्सको कार्यमा समझ CSS इनहेरिटेन्स आनुवंशिकता जस्तै काम गर्छ - तत्वहरूले तिनीहरूको अभिभावक तत्वहरूबाट निश्चित गुणहरू प्राप्त गर्छन्। यदि तपाईंले शरीर तत्वमा फन्ट परिवार सेट गर्नुभयो भने, भित्रको सबै पाठले स्वचालित रूपमा त्यही फन्ट प्रयोग गर्छ। यो ह्याब्सबर्ग परिवारको विशिष्ट जबडा रेखा पीढीहरूमा देखा परे जस्तै हो। तर सबै कुरा इनहेरिट हुँदैन। फन्ट र रंग जस्ता पाठ शैलीहरू इनहेरिट हुन्छन्, तर मार्जिन र बोर्डर जस्ता लेआउट गुणहरू हुँदैनन्। जस्तै बच्चाहरूले शारीरिक विशेषताहरू प्राप्त गर्न सक्छन् तर तिनीहरूको अभिभावकको फेसन छनोटहरू होइन। ### फन्ट इनहेरिटेन्सको अवलोकन तपाईंको <body> तत्वमा फन्ट परिवार सेट गरेर इनहेरिटेन्सलाई कार्यमा देखौं: यहाँ के हुन्छ भन्ने कुरा तोड्दै: - सेट गर्छ सम्पूर्ण पृष्ठको लागि फन्ट परिवार <body> तत्वलाई लक्षित गरेर - प्रयोग गर्छ फन्ट स्ट्याक फालब्याक विकल्पहरूसँग राम्रो ब्राउजर अनुकूलताको लागि - लागू गर्छ आधुनिक प्रणाली फन्टहरू जुन विभिन्न अपरेटिङ सिस्टमहरूमा राम्रो देखिन्छ - सुनिश्चित गर्छ सबै बच्चा तत्वहरूले यो फन्ट प्राप्त गर्छन् जबसम्म विशेष रूपमा ओभरराइड गरिएको छैन तपाईंको ब्राउजरको डेभलपर टूल्स (F12) खोल्नुहोस्, एलिमेन्ट्स ट्याबमा जानुहोस्, र तपाईंको <h1> तत्व निरीक्षण गर्नुहोस्। तपाईंले देख्नुहुनेछ कि यसले शरीरबाट फन्ट परिवार इनहेरिट गर्छ: ✅ प्रयोग समय: <body> मा color, line-height, वा text-align जस्ता अन्य इनहेरिटेबल गुणहरू सेट गर्न प्रयास गर्नुहोस्। तपाईंको हेडिङ र अन्य तत्वहरूमा के हुन्छ? ### 🔄 शिक्षण जाँच CSS आधारभूत समझ: चयनकर्ताहरूमा जानु अघि सुनिश्चित गर्नुहोस् कि तपाईं: - ✅ क्यास्केड र इनहेरिटेन्सको बीचको भिन्नता व्याख्या गर्न सक्नुहुन्छ - ✅ विशिष्टता द्वन्द्वमा कुन शैली जित्छ भविष्यवाणी गर्न सक्नुहुन्छ - ✅ कुन गुणहरू अभिभावक तत्वहरूबाट इनहेरिट हुन्छन् पहिचान गर्न सक्नुहुन्छ - ✅ CSS फाइलहरू HTML सँग ठीकसँग जडान गर्न सक्नुहुन्छ छिटो परीक्षण: यदि तपाईंसँग यी शैलीहरू छन् भने, <div class="special"> भित्रको <h1> को रंग के हुनेछ? उत्तर: रातो (तत्व चयनकर्ताले सिधै h1 लाई लक्षित गर्छ) ## CSS चयनकर्ताहरूमा महारत हासिल गर्दै CSS चयनकर्ताहरू तपाईंको शैलीको लागि विशिष्ट तत्वहरूलाई लक्षित गर्ने तरिका हो। तिनीहरू सटीक निर्देशन दिने जस्तै काम गर्छन् - "घर" भन्नुको सट्टा, तपाईं "म्यापल स्ट्रिटमा रातो ढोकासहितको नीलो घर" भन्न सक्नुहुन्छ। CSS ले विशिष्ट हुन विभिन्न तरिकाहरू प्रदान गर्दछ, र सही चयनकर्ता छनोट गर्नु भनेको कार्यको लागि उपयुक्त उपकरण छनोट गर्नु जस्तै हो। कहिलेकाहीं तपाईंले छिमेकका सबै ढोकाहरूलाई शैली दिन आवश्यक छ, र कहिलेकाहीं केवल एक विशिष्ट ढोका। ### तत्व चयनकर्ताहरू (ट्यागहरू) तत्व चयनकर्ताहरू HTML तत्वहरूलाई तिनीहरूको ट्याग नामद्वारा लक्षित गर्छन्। तिनीहरू तपाईंको पृष्ठभरि व्यापक रूपमा लागू हुने आधारभूत शैलीहरू सेट गर्न उत्तम छन्: यी शैलीहरूको समझ: - सेट गर्छ सम्पूर्ण पृष्ठमा सुसंगत टाइपोग्राफी body चयनकर्ता प्रयोग गरेर - हटाउँछ ब्राउजरको डिफल्ट मार्जिन र प्याडिङ राम्रो नियन्त्रणको लागि - शैली दिन्छ सबै हेडिङ तत्वहरूलाई रंग, संरेखण, र स्पेसिङको साथ - प्रयोग गर्छ rem युनिटहरू स्केलेबल, पहुँचयोग्य फन्ट साइजको लागि तत्व चयनकर्ताहरू सामान्य शैलीको लागि राम्रोसँग काम गर्छन्, तर तपाईंलाई टेरारियममा बोटबिरुवाहरू जस्ता व्यक्तिगत कम्पोनेन्टहरूलाई शैली दिन अधिक विशिष्ट चयनकर्ताहरू आवश्यक हुनेछ। ### अद्वितीय तत्वहरूको लागि ID चयनकर्ताहरू ID चयनकर्ताहरू # प्रतीक प्रयोग गर्छन् र विशिष्ट id विशेषताहरू भएका तत्वहरूलाई लक्षित गर्छन्। IDs पृष्ठमा अद्वितीय हुनुपर्छ, त्यसैले तिनीहरू हाम्रो बायाँ र दायाँ बोट कन्टेनरहरू जस्ता व्यक्तिगत, विशेष तत्वहरूलाई शैली दिन उत्तम छन्। हाम्रो टेरारियमको साइड कन्टेनरहरूको शैली सिर्जना गरौं जहाँ बोटहरू बस्नेछन्: यस कोडले के हासिल गर्छ: - स्थिति दिन्छ कन्टेनरहरूलाई absolute स्थिति प्रयोग गरेर टाढाको बायाँ र दायाँ किनारहरूमा - प्रयोग गर्छ vh (भ्यूपोर्ट उचाइ) युनिटहरू उत्तरदायी उचाइको लागि जुन स्क्रिन आकारमा अनुकूलन हुन्छ - लागू गर्छ box-sizing: border-box ताकि प्याडिङ कुल चौडाइमा समावेश होस् - हटाउँछ अनावश्यक px युनिटहरू शून्य मानहरूबाट सफा कोडको लागि - सेट गर्छ हल्का पृष्ठभूमि रंग जुन गाढा खैरोको तुलनामा आँखामा सजिलो छ ✅ कोड गुणस्तर चुनौती: ध्यान दिनुहोस् कि यो CSS ले DRY (Don't Repeat Yourself) सिद्धान्तको उल्लङ्घन गर्छ। तपाईंले यसलाई ID र क्लास दुवै प्रयोग गरेर कसरी पुनःफारम्याट गर्न सक्नुहुन्छ? सुधारिएको दृष्टिकोण: ### पुन: प्रयोगयोग्य शैलीहरूको लागि क्लास चयनकर्ताहरू क्लास चयनकर्ताहरू . प्रतीक प्रयोग गर्छन् र तपाईंले धेरै तत्वहरूमा समान शैलीहरू लागू गर्न चाहनुहुन्छ भने उत्तम हुन्छ। IDs को विपरीत, क्लासहरू तपाईंको HTML भरि पुन: प्रयोग गर्न सकिन्छ, जसले तिनीहरूलाई सुसंगत शैलीका ढाँचाहरूको लागि आदर्श बनाउँछ। हाम्रो टेरारियममा, प्रत्येक बोटलाई समान शैलीको आवश्यकता छ तर व्यक्तिगत स्थिति पनि आवश्यक छ। हामीले साझा शैलीहरूको लागि क्लासहरूको संयोजन र अद्वितीय स्थिति र जाभास्क्रिप्ट अन्तरक्रियाको लागि IDs प्रयोग गर्नेछौं। प्रत्येक बोटको लागि HTML संरचना यहाँ छ: मुख्य तत्वहरू व्याख्या गरियो: - प्रयोग गर्छ class="plant-holder" सबै बोटहरूको लागि सुसंगत कन्टेनर शैली - लागू गर्छ class="plant" साझा छवि शैली र व्यवहारको लागि - समावेश गर्छ अद्वितीय id="plant1" व्यक्तिगत स्थिति र जाभास्क्रिप्ट अन्तरक्रियाको लागि - प्रदान गर्छ स्क्रिन रिडर पहुँचयोग्यताको लागि वर्णनात्मक alt पाठ अब यी शैलीहरू तपाईंको style.css फाइलमा थप्नुहोस्: यी शैलीहरूको विश्लेषण: - सिर्जना गर्छ बोट होल्डरको लागि सापेक्ष स्थिति स्थिति सन्दर्भ स्थापना गर्न - सेट गर्छ प्रत्येक बोट होल्डरलाई १३% उचाइ, सुनिश्चित गर्दै सबै बोटहरू स्क्रोल नगरी ठडिन्छन् - थोरै बायाँ सर्छ होल्डरहरूलाई बोटहरूलाई कन्टेनरभित्र राम्रोसँग केन्द्रित गर्न - अनुमति दिन्छ बोटहरूलाई max-width र max-height गुणहरू प्रयोग गरेर उत्तरदायी रूपमा स्केल गर्न - प्रयोग गर्छ z-index बोटहरूलाई टेरारियमका अन्य तत्वहरू माथि तह गर्न - थप्छ CSS ट्रान्जिसनहरूसँग हल्का होभर प्रभाव राम्रो प्रयोगकर्ता अन्तरक्रियाको लागि ✅ महत्वपूर्ण सोचाइ: किन हामीलाई .plant-holder र .plant चयनकर्ताहरू दुवै आवश्यक छ? यदि हामीले केवल एउटा प्रयोग गर्ने प्रयास गर्यौं भने के हुन्छ? ## CSS स्थिति समझ CSS स्थिति नाटकको लागि स्टेज निर्देशक जस्तै हो - तपाईंले प्रत्येक पात्र कहाँ उभिन्छ र कसरी स्टेज वरिपरि सर्छ भन्ने निर्देशन दिनुहुन्छ। केही पात्रहरूले मानक संरचना अनुसरण गर्छन्, जबकि अन्यलाई नाटकीय प्रभावको लागि विशिष्ट स्थिति आवश्यक छ। एकपटक तपाईंले स्थिति बुझ्नुभयो भने, धेरै लेआउट चुनौतीहरू व्यवस्थापनयोग्य हुन्छन्। तपाईंलाई नेभिगेसन बार चाहिन्छ जुन प्रयोगकर्ताहरू स्क्रोल गर्दा शीर्षमा रहन्छ? स्थिति त्यसलाई सम्हाल्छ। तपाईंलाई एक टूलटिप चाहिन्छ जुन विशिष्ट स्थानमा देखा पर्छ? त्यो पनि स्थिति हो। ### पाँच स्थिति मानहरू - यदि .plant-holder ले relative को सट्टा absolute प्रयोग गर्यो भने लेआउट कसरी परिवर्तन हुन्छ? - जब तपाईं .plant लाई relative पोजिसनिङमा परिवर्तन गर्नुहुन्छ, के हुन्छ? ### 🔄 शैक्षिक जाँच CSS पोजिसनिङको मास्टरी: आफ्नो बुझाइलाई पुष्टि गर्न रोक्नुहोस्: - ✅ के तपाईं व्याख्या गर्न सक्नुहुन्छ कि ड्र्याग-एन्ड-ड्रपको लागि बिरुवाहरूलाई किन absolute पोजिसनिङ चाहिन्छ? - ✅ के तपाईं बुझ्नुहुन्छ कि relative कन्टेनरहरूले पोजिसनिङको सन्दर्भ कसरी सिर्जना गर्छन्? - ✅ किन साइड कन्टेनरहरूले absolute पोजिसनिङ प्रयोग गर्छन्? - ✅ यदि तपाईंले पोजिसन घोषणा पूर्ण रूपमा हटाउनुभयो भने के हुन्छ? वास्तविक संसारको जडान: CSS पोजिसनिङले वास्तविक संसारको लेआउटलाई कसरी प्रतिबिम्बित गर्छ भन्ने सोच्नुहोस्: - Static: शेल्फमा किताबहरू (प्राकृतिक क्रम) - Relative: किताबलाई अलिकति सार्ने तर यसको स्थानमा राख्ने - Absolute: पृष्ठ नम्बरमा ठ्याक्कै बुकमार्क राख्ने - Fixed: स्टिकी नोट जसले पृष्ठ पल्टाउँदा पनि देखिन्छ ## CSS प्रयोग गरेर टेरारियम बनाउने अब हामी केवल CSS प्रयोग गरेर ग्लास जार बनाउनेछौं - कुनै छवि वा ग्राफिक्स सफ्टवेयर आवश्यक छैन। पोजिसनिङ र ट्रान्सपरेन्सी प्रयोग गरेर यथार्थपरक ग्लास, छायाँ, र गहिराइ प्रभावहरू सिर्जना गर्नु CSS को दृश्य क्षमताहरू देखाउँछ। यो प्रविधिले Bauhaus आन्दोलनका आर्किटेक्टहरूले सरल ज्यामितीय रूपहरू प्रयोग गरेर जटिल, सुन्दर संरचनाहरू कसरी बनाएका थिए भन्ने कुरा प्रतिबिम्बित गर्छ। यी सिद्धान्तहरू बुझिसकेपछि, तपाईं धेरै वेब डिजाइनहरू पछाडि CSS प्रविधिहरू चिन्न सक्नुहुन्छ। ### ग्लास जारका कम्पोनेन्टहरू बनाउने आउनुहोस् टेरारियम जारलाई टुक्रा-टुक्रामा बनाऔं। प्रत्येक भागले absolute पोजिसनिङ र प्रतिशत-आधारित साइजिङ प्रयोग गर्दछ ताकि डिजाइन उत्तरदायी होस्: टेरारियम निर्माणको बुझाइ: - प्रयोग गर्दछ उत्तरदायी स्केलिङको लागि प्रतिशत-आधारित आयामहरू - पोजिसन गर्दछ तत्वहरूलाई ठ्याक्कै मिलाउन र स्ट्याक गर्न absolute पोजिसनिङ प्रयोग गरेर - लागु गर्दछ विभिन्न अपासिटी मानहरू ताकि ग्लास ट्रान्सपरेन्सी प्रभाव सिर्जना होस् - प्रयोग गर्दछ z-index लेयरिङ ताकि बिरुवाहरू जारभित्र देखिन्छन् - थप्छ सूक्ष्म बक्स-छायाँ र परिष्कृत border-radius ताकि यथार्थपरक देखिन्छ ### प्रतिशतको साथ उत्तरदायी डिजाइन ध्यान दिनुहोस् कि सबै आयामहरूले निश्चित पिक्सेल मानहरूको सट्टा प्रतिशत प्रयोग गर्छन्: किन यो महत्त्वपूर्ण छ: - सुनिश्चित गर्दछ टेरारियम कुनै पनि स्क्रिन साइजमा समानुपातिक रूपमा स्केल हुन्छ - राख्छ जार कम्पोनेन्टहरू बीचको दृश्य सम्बन्ध - प्रदान गर्दछ मोबाइल फोनदेखि ठूला डेस्कटप मोनिटरसम्मको लागि एक सुसंगत अनुभव - अनुकूलन गर्दछ डिजाइनलाई भत्किन नदिई परिवर्तन गर्न ### CSS युनिटहरूको प्रयोग हामी rem युनिटहरू border-radius को लागि प्रयोग गर्दैछौं, जसले रूट फन्ट साइजको सापेक्ष स्केल गर्दछ। यसले अधिक पहुँचयोग्य डिजाइनहरू सिर्जना गर्दछ जसले प्रयोगकर्ताको फन्ट प्राथमिकताहरूलाई सम्मान गर्दछ। CSS relative units को आधिकारिक स्पेसिफिकेशनमा थप जान्नुहोस्। ✅ दृश्य प्रयोग: यी मानहरू परिवर्तन गरेर प्रभावहरू अवलोकन गर्नुहोस्: - जारको अपासिटीलाई 0.5 बाट 0.8 मा परिवर्तन गर्नुहोस् - यसले ग्लासको देखावटलाई कसरी असर गर्छ? - माटोको रंगलाई #3a241d बाट #8B4513 मा समायोजन गर्नुहोस् - यसले के दृश्य प्रभाव पार्छ? - माटोको z-index लाई 2 मा परिवर्तन गर्नुहोस् - लेयरिङमा के हुन्छ? ### 🔄 शैक्षिक जाँच CSS दृश्य डिजाइनको बुझाइ: दृश्य CSS को आफ्नो समझ पुष्टि गर्नुहोस्: - ✅ प्रतिशत-आधारित आयामहरूले उत्तरदायी डिजाइन कसरी सिर्जना गर्छन्? - ✅ अपासिटीले ग्लास ट्रान्सपरेन्सी प्रभाव कसरी सिर्जना गर्छ? - ✅ लेयरिङ तत्वहरूमा z-index को भूमिका के हो? - ✅ border-radius मानहरूले जारको आकार कसरी सिर्जना गर्छन्? डिजाइन सिद्धान्त: ध्यान दिनुहोस् कि हामी सरल आकारहरूबाट जटिल दृश्यहरू बनाउँदैछौं: 1. आयतहरू → गोलो आयतहरू → जार कम्पोनेन्टहरू 2. समतल रंगहरू → अपासिटी → ग्लास प्रभाव 3. व्यक्तिगत तत्वहरू → लेयर गरिएको संरचना → 3D देखावट --- ## GitHub Copilot Agent Challenge 🚀 Agent मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्: विवरण: CSS एनिमेसन सिर्जना गर्नुहोस् जसले टेरारियमका बिरुवाहरूलाई प्राकृतिक हावाको प्रभाव जस्तै बिस्तारै हल्लाउँछ। CSS एनिमेसन, ट्रान्सफर्म्स, र keyframes अभ्यास गर्दै टेरारियमको दृश्य आकर्षण बढाउनुहोस्। प्रेरणा: CSS keyframe एनिमेसन थपेर टेरारियमका बिरुवाहरूलाई बिस्तारै दायाँ-बायाँ हल्लाउने बनाउनुहोस्। प्रत्येक बिरुवालाई अलिकति (2-3 डिग्री) दायाँ-बायाँ घुमाउने एनिमेसन सिर्जना गर्नुहोस् जसको अवधि 3-4 सेकेन्ड होस्, र यसलाई .plant क्लासमा लागू गर्नुहोस्। सुनिश्चित गर्नुहोस् कि एनिमेसन अनन्त रूपमा लूप हुन्छ र प्राकृतिक गतिका लागि easing function प्रयोग गर्दछ। agent mode को बारेमा थप जान्नुहोस्। ## 🚀 चुनौती: ग्लास रिफ्लेक्सन थप्ने के तपाईं आफ्नो टेरारियमलाई यथार्थपरक ग्लास रिफ्लेक्सनको साथ सुधार गर्न तयार हुनुहुन्छ? यो प्रविधिले डिजाइनमा गहिराइ र यथार्थता थप्नेछ। तपाईंले हल्का रंगका अण्डाकार आकारहरू सिर्जना गर्नुहुनेछ जसले ग्लास रिफ्लेक्सनलाई नक्कल गर्छ। यो प्रविधि Renaissance चित्रकारहरू जस्तै Jan van Eyck ले चित्रित ग्लासलाई तीन-आयामीय देखाउन प्रकाश र रिफ्लेक्सन प्रयोग गरेको जस्तै हो। तपाईंले निम्न लक्ष्य राख्नुहुनेछ: तपाईंको चुनौती: - सिर्जना गर्नुहोस् ग्लास रिफ्लेक्सनका लागि हल्का रंगका अण्डाकार आकारहरू - पोजिसन गर्नुहोस् तिनीहरूलाई जारको बायाँतिर रणनीतिक रूपमा - लागु गर्नुहोस् उपयुक्त अपासिटी र ब्लर प्रभावहरू ताकि यथार्थपरक प्रकाश रिफ्लेक्सन होस् - प्रयोग गर्नुहोस् border-radius ताकि जैविक, बबल-जस्ता आकारहरू बनोस् - अनुसन्धान गर्नुहोस् ग्रेडियन्ट वा बक्स-छायाँहरू प्रयोग गरेर यथार्थता सुधार गर्न ## पोस्ट-लेक्चर क्विज पोस्ट-लेक्चर क्विज ## CSS ज्ञान विस्तार गर्नुहोस् CSS सुरुमा जटिल लाग्न सक्छ, तर यी मुख्य अवधारणाहरू बुझ्दा उन्नत प्रविधिहरूको लागि बलियो आधार प्रदान गर्दछ। तपाईंको अर्को CSS सिक्ने क्षेत्रहरू: - Flexbox - तत्वहरूको संरेखण र वितरणलाई सरल बनाउँछ - CSS Grid - जटिल लेआउटहरू सिर्जना गर्न शक्तिशाली उपकरणहरू प्रदान गर्दछ - CSS Variables - पुनरावृत्ति घटाउँछ र मर्मतयोग्यता सुधार गर्दछ - उत्तरदायी डिजाइन - विभिन्न स्क्रिन साइजहरूमा साइटहरू राम्रोसँग काम गर्न सुनिश्चित गर्दछ ### अन्तरक्रियात्मक सिक्ने स्रोतहरू यी रोचक, व्यावहारिक खेलहरूसँग अवधारणाहरू अभ्यास गर्नुहोस्: - 🐸 Flexbox Froggy - Flexbox मास्टर गर्न रमाइलो चुनौतीहरू - 🌱 Grid Garden - CSS Grid सिक्न भर्चुअल गाजर उमार्ने - 🎯 CSS Battle - कोडिङ चुनौतीहरूसँग आफ्नो CSS कौशल परीक्षण गर्नुहोस् ### थप सिकाइ CSS को आधारभूत ज्ञानको लागि, यो Microsoft Learn मोड्युल पूरा गर्नुहोस्: Style your HTML app with CSS ### ⚡ तपाईंले अर्को ५ मिनेटमा गर्न सक्ने कुरा - [ ] DevTools खोल्नुहोस् र कुनै पनि वेबसाइटमा CSS शैलीहरू निरीक्षण गर्नुहोस् - [ ] साधारण CSS फाइल सिर्जना गर्नुहोस् र HTML पेजमा लिंक गर्नुहोस् - [ ] विभिन्न विधिहरू प्रयोग गरेर रंगहरू परिवर्तन गर्नुहोस्: hex, RGB, र नामित रंगहरू - [ ] बक्स मोडेल अभ्यास गर्नुहोस् र div मा padding र margin थप्नुहोस् ### 🎯 तपाईंले यो घण्टामा हासिल गर्न सक्ने कुरा - [ ] पोस्ट-लेसन क्विज पूरा गर्नुहोस् र CSS को आधारभूत कुराहरू समीक्षा गर्नुहोस् - [ ] आफ्नो HTML पेजलाई फन्ट, रंग, र स्पेसिङको साथ स्टाइल गर्नुहोस् - [ ] Flexbox वा Grid प्रयोग गरेर साधारण लेआउट सिर्जना गर्नुहोस् - [ ] CSS ट्रान्सिसनहरू प्रयोग गरेर स्मूथ प्रभावहरू अभ्यास गर्नुहोस् - [ ] मिडिया क्वेरीहरू प्रयोग गरेर उत्तरदायी डिजाइन अभ्यास गर्नुहोस् ### 📅 तपाईंको हप्ताको CSS साहसिक यात्रा - [ ] टेरारियम स्टाइलिङ असाइनमेन्ट पूरा गर्नुहोस् र रचनात्मकता थप्नुहोस् - [ ] फोटो ग्यालरी लेआउट बनाउँदै CSS Grid मास्टर गर्नुहोस् - [ ] CSS एनिमेसन सिक्नुहोस् ताकि तपाईंको डिजाइनहरू जीवन्त बनोस् - [ ] Sass वा Less जस्ता CSS प्रिप्रोसेसरहरू अन्वेषण गर्नुहोस् - [ ] डिजाइन सिद्धान्तहरू अध्ययन गर्नुहोस् र CSS मा लागू गर्नुहोस् - [ ] अनलाइन भेटिएका रोचक डिजाइनहरू विश्लेषण गर्नुहोस् र पुनः सिर्जना गर्नुहोस् ### 🌟 तपाईंको महिनाको डिजाइन मास्टरी - [ ] पूर्ण उत्तरदायी वेबसाइट डिजाइन प्रणाली बनाउनुहोस् - [ ] CSS-in-JS वा Tailwind जस्ता युटिलिटी-फर्स्ट फ्रेमवर्कहरू सिक्नुहोस् - [ ] CSS सुधारका साथ ओपन सोर्स प्रोजेक्टहरूमा योगदान गर्नुहोस् - [ ] CSS का उन्नत अवधारणाहरू जस्तै CSS कस्टम प्रोपर्टीहरू र कन्टेन्मेन्ट मास्टर गर्नुहोस् - [ ] मोड्युलर CSS को साथ पुन: प्रयोग गर्न मिल्ने कम्पोनेन्ट लाइब्रेरीहरू सिर्जना गर्नुहोस् - [ ] CSS सिक्दै अरूलाई मार्गदर्शन गर्नुहोस् र डिजाइन ज्ञान साझा गर्नुहोस् ## 🎯 तपाईंको CSS मास्टरी टाइमलाइन ### 🛠️ तपाईंको CSS टूलकिटको सारांश यो पाठ पूरा गरेपछि, तपाईंसँग अब छ: - क्यास्केड बुझाइ: शैलीहरू कसरी इनहेरिट र ओभरराइड हुन्छन् - सेलेक्टर मास्टरी: तत्वहरू, क्लासहरू, र IDs को साथ सटीक लक्ष्यीकरण - पोजिसनिङ कौशल: रणनीतिक तत्व प्लेसमेन्ट र लेयरिङ - दृश्य डिजाइन: ग्लास प्रभाव, छायाँ, र ट्रान्सपरेन्सी सिर्जना गर्ने - उत्तरदायी प्रविधिहरू: प्रतिशत-आधारित लेआउटहरू जुन कुनै पनि स्क्रिनमा अनुकूल हुन्छन् - कोड संगठन: सफा, मर्मतयोग्य CSS संरचना - आधुनिक अभ्यासहरू: सापेक्ष युनिटहरू र पहुँचयोग्य डिजाइन ढाँचाहरू प्रयोग गर्दै अर्को चरणहरू: तपाईंको टेरारियममा अब संरचना (HTML) र शैली (CSS) छ। अन्तिम पाठले JavaScript को साथ अन्तरक्रियात्मकता थप्नेछ! ## असाइनमेन्ट CSS Refactoring --- अस्वीकरण: यो दस्तावेज़ AI अनुवाद सेवा Co-op Translator प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।
Terrarium Project Deel 1: Introductie tot HTML
HTML, of HyperText Markup Language, is de basis van elke website die je ooit hebt bezocht. Zie HTML als het skelet dat structuur geeft aan webpagina's – het bepaalt waar de inhoud komt, hoe het georganiseerd is en wat elk onderdeel betekent. Terwijl CSS later je HTML "aankleedt" met kleuren en lay-outs, en JavaScript het tot leven brengt met interactiviteit, biedt HTML de essentiële structuur die alles mogelijk maakt. In deze les maak je de HTML-structuur voor een virtuele terrariuminterface. Dit praktische project leert je de fundamentele HTML-concepten terwijl je iets visueel aantrekkelijks bouwt. Je leert hoe je inhoud organiseert met semantische elementen, werkt met afbeeldingen en de basis legt voor een interactieve webapplicatie. Aan het einde van deze les heb je een werkende HTML-pagina die plantafbeeldingen in georganiseerde kolommen weergeeft, klaar om gestyled te worden in de volgende les. Maak je geen zorgen als het er in het begin eenvoudig uitziet – dat is precies wat HTML moet doen voordat CSS de visuele afwerking toevoegt. ## Pre-Les Quiz Pre-les quiz ## Je Project Instellen Voordat we in de HTML-code duiken, laten we een goede werkruimte opzetten voor je terrariumproject. Het creëren van een georganiseerde bestandsstructuur vanaf het begin is een cruciale gewoonte die je goed van pas zal komen tijdens je webontwikkelingsreis. ### Taak: Maak je Projectstructuur Je maakt een speciale map voor je terrariumproject en voegt je eerste HTML-bestand toe. Hier zijn twee benaderingen die je kunt gebruiken: Optie 1: Gebruik Visual Studio Code 1. Open Visual Studio Code 2. Klik op "File" → "Open Folder" of gebruik Ctrl+K, Ctrl+O (Windows/Linux) of Cmd+K, Cmd+O (Mac) 3. Maak een nieuwe map genaamd terrarium en selecteer deze 4. Klik in het Explorer-paneel op het pictogram "New File" 5. Noem je bestand index.html Optie 2: Gebruik Terminalcommando's Wat deze commando's doen: - Maakt een nieuwe map genaamd terrarium voor je project - Navigeert naar de terrarium-map - Maakt een leeg index.html bestand - Opent het bestand in Visual Studio Code om te bewerken ## Begrip van HTML Documentstructuur Elk HTML-document volgt een specifieke structuur die browsers nodig hebben om correct te begrijpen en weer te geven. Zie deze structuur als een formele brief – het heeft vereiste elementen in een bepaalde volgorde die de ontvanger (in dit geval de browser) helpen de inhoud correct te verwerken. Laten we beginnen met het toevoegen van de essentiële basis die elk HTML-document nodig heeft. ### De DOCTYPE Declaratie en Root Element De eerste twee regels van elk HTML-bestand dienen als de "introductie" van het document aan de browser: Wat deze code doet: - Verklaart het documenttype als HTML5 met <!DOCTYPE html> - Creëert het root <html> element dat alle pagina-inhoud bevat - Stelt moderne webstandaarden in voor correcte browserweergave - Zorgt voor consistente weergave op verschillende browsers en apparaten ### 🔄 Pedagogische Check-in Pauzeer en Reflecteer: Voordat je verder gaat, zorg ervoor dat je begrijpt: - ✅ Waarom elk HTML-document een DOCTYPE-declaratie nodig heeft - ✅ Wat het <html> root element bevat - ✅ Hoe deze structuur browsers helpt pagina's correct weer te geven Snelle Zelftest: Kun je in je eigen woorden uitleggen wat "standaard-conforme weergave" betekent? ## Essentiële Documentmetadata Toevoegen De <head> sectie van een HTML-document bevat cruciale informatie die browsers en zoekmachines nodig hebben, maar die bezoekers niet direct op de pagina zien. Zie het als de "achter de schermen" informatie die helpt je webpagina correct te laten werken en weer te geven op verschillende apparaten en platforms. Deze metadata vertelt browsers hoe ze je pagina moeten weergeven, welke tekencodering ze moeten gebruiken en hoe ze met verschillende schermformaten moeten omgaan – allemaal essentieel voor het maken van professionele, toegankelijke webpagina's. ### Taak: Voeg de Documentkop Toe Voeg deze <head> sectie in tussen je opening en sluitende <html> tags: Wat elk element doet: - Stelt de paginatitel in die verschijnt in browsertabs en zoekresultaten - Specificeert UTF-8 tekencodering voor correcte tekstweergave wereldwijd - Zorgt voor compatibiliteit met moderne versies van Internet Explorer - Configureert responsief ontwerp door de viewport aan te passen aan de breedte van het apparaat - Regelt het initiële zoomniveau om inhoud op natuurlijke grootte weer te geven ## De Documentbody Opbouwen Het <body> element bevat alle zichtbare inhoud van je webpagina – alles wat gebruikers zullen zien en mee interactie hebben. Terwijl de <head> sectie instructies gaf aan de browser, bevat de <body> sectie de daadwerkelijke inhoud: tekst, afbeeldingen, knoppen en andere elementen die je gebruikersinterface creëren. Laten we de body-structuur toevoegen en begrijpen hoe HTML-tags samenwerken om betekenisvolle inhoud te creëren. ### Begrip van HTML Tag Structuur HTML gebruikt gekoppelde tags om elementen te definiëren. De meeste tags hebben een openingstag zoals <p> en een sluitingstag zoals </p>, met inhoud ertussen: <p>Hallo, wereld!</p>. Dit creëert een paragraafelement met de tekst "Hallo, wereld!". ### Taak: Voeg het Body Element Toe Werk je HTML-bestand bij om het <body> element op te nemen: Wat deze complete structuur biedt: - Stelt het basis HTML5 documentraamwerk in - Bevat essentiële metadata voor correcte browserweergave - Creëert een lege body klaar voor je zichtbare inhoud - Volgt moderne webontwikkelingspraktijken Nu ben je klaar om de zichtbare elementen van je terrarium toe te voegen. We gebruiken <div> elementen als containers om verschillende secties van inhoud te organiseren, en <img> elementen om de plantafbeeldingen weer te geven. ### Werken met Afbeeldingen en Lay-out Containers Afbeeldingen zijn speciaal in HTML omdat ze "zelfsluitende" tags gebruiken. In tegenstelling tot elementen zoals <p></p> die inhoud omsluiten, bevat de <img> tag alle informatie die het nodig heeft binnen de tag zelf met attributen zoals src voor het afbeeldingsbestandspad en alt voor toegankelijkheid. Voordat je afbeeldingen aan je HTML toevoegt, moet je je projectbestanden goed organiseren door een afbeeldingenmap te maken en de plantgrafieken toe te voegen. Eerst, stel je afbeeldingen in: 1. Maak een map genaamd images in je terrarium projectmap 2. Download de plantafbeeldingen uit de oplossingsmap (14 plantafbeeldingen in totaal) 3. Kopieer alle plantafbeeldingen naar je nieuwe images map ### Taak: Maak de Plantweergave Lay-out Voeg nu de plantafbeeldingen georganiseerd in twee kolommen toe tussen je <body></body> tags: Stap voor stap, wat er gebeurt in deze code: - Creëert een hoofdcontainer met id="page" om alle inhoud te bevatten - Stelt twee kolomcontainers in: left-container en right-container - Organiseert 7 planten in de linker kolom en 7 planten in de rechter kolom - Omhult elke plantafbeelding in een plant-holder div voor individuele positionering - Past consistente classnamen toe voor CSS-styling in de volgende les - Kent unieke ID's toe aan elke plantafbeelding voor JavaScript-interactie later - Bevat correcte bestandspaden die wijzen naar de afbeeldingenmap ### 🔄 Pedagogische Check-in Structuur Begrip: Neem een moment om je HTML-structuur te bekijken: - ✅ Kun je de hoofdcontainers in je lay-out identificeren? - ✅ Begrijp je waarom elke afbeelding een unieke ID heeft? - ✅ Hoe zou je het doel van de plant-holder divs beschrijven? Visuele Inspectie: Open je HTML-bestand in een browser. Je zou moeten zien: - Een eenvoudige lijst van plantafbeeldingen - Afbeeldingen georganiseerd in twee kolommen - Eenvoudige, ongestileerde lay-out Onthoud: Dit eenvoudige uiterlijk is precies hoe HTML eruit zou moeten zien voordat CSS wordt toegepast! Met deze markup toegevoegd, verschijnen de planten op het scherm, hoewel ze er nog niet gepolijst uitzien – dat is wat CSS doet in de volgende les! Voor nu heb je een solide HTML-basis die je inhoud goed organiseert en toegankelijkheidsrichtlijnen volgt. ## Semantische HTML Gebruiken voor Toegankelijkheid Semantische HTML betekent dat je HTML-elementen kiest op basis van hun betekenis en doel, niet alleen hun uiterlijk. Wanneer je semantische markup gebruikt, communiceer je de structuur en betekenis van je inhoud aan browsers, zoekmachines en hulpmiddelen zoals schermlezers. Deze aanpak maakt je websites toegankelijker voor gebruikers met een beperking en helpt zoekmachines je inhoud beter te begrijpen. Het is een fundamenteel principe van moderne webontwikkeling dat betere ervaringen voor iedereen creëert. ### Een Semantische Paginatitel Toevoegen Laten we een goede kop toevoegen aan je terrariumpagina. Voeg deze regel in direct na je openingstag <body>: Waarom semantische markup belangrijk is: - Helpt schermlezers om de pagina-structuur te navigeren en te begrijpen - Verbetert zoekmachineoptimalisatie (SEO) door de inhoudshiërarchie te verduidelijken - Verhoogt toegankelijkheid voor gebruikers met visuele beperkingen of cognitieve verschillen - Creëert betere gebruikerservaringen op alle apparaten en platforms - Volgt webstandaarden en best practices voor professionele ontwikkeling Voorbeelden van semantische vs. niet-semantische keuzes: ## De Terrariumcontainer Maken Laten we nu de HTML-structuur toevoegen voor het terrarium zelf – de glazen container waar planten uiteindelijk worden geplaatst. Dit gedeelte demonstreert een belangrijk concept: HTML biedt structuur, maar zonder CSS-styling zijn deze elementen nog niet zichtbaar. De terrariummarkup gebruikt beschrijvende classnamen die CSS-styling intuïtief en onderhoudbaar maken in de volgende les. ### Taak: Voeg de Terrariumstructuur Toe Voeg deze markup in boven de laatste </div> tag (voor de sluitingstag van de pagina-container): Begrip van deze terrariumstructuur: - Creëert een hoofdterrariumcontainer met een unieke ID voor styling - Definieert afzonderlijke elementen voor elke visuele component (bovenkant, muren, aarde, onderkant) - Bevat geneste elementen voor glaseffecten (glanzende elementen) - Gebruikt beschrijvende classnamen die duidelijk het doel van elk element aangeven - Bereidt de structuur voor op CSS-styling die het uiterlijk van een glazen terrarium zal creëren ### 🔄 Pedagogische Check-in Beheersing van HTML-structuur: Voordat je verder gaat, zorg ervoor dat je: - ✅ Het verschil kunt uitleggen tussen HTML-structuur en visueel uiterlijk - ✅ Semantische versus niet-semantische HTML-elementen kunt identificeren - ✅ Kunt beschrijven hoe correcte markup de toegankelijkheid verbetert - ✅ De volledige documentboomstructuur kunt herkennen Test je begrip: Probeer je HTML-bestand te openen in een browser met JavaScript uitgeschakeld en CSS verwijderd. Dit toont je de pure semantische structuur die je hebt gecreëerd! --- ## GitHub Copilot Agent Challenge Gebruik de Agent-modus om de volgende uitdaging te voltooien: Beschrijving: Maak een semantische HTML-structuur voor een sectie over plantenverzorging die kan worden toegevoegd aan het terrariumproject. Prompt: Maak een semantische HTML-sectie met een hoofdkop "Plantenverzorgingsgids", drie subsecties met koppen "Water geven", "Lichtvereisten" en "Bodemverzorging", elk met een alinea met informatie over plantenverzorging. Gebruik correcte semantische HTML-tags zoals <section>, <h2>, <h3> en <p> om de inhoud op de juiste manier te structureren. Lees meer over agent mode hier. ## HTML Geschiedenis Uitdaging Leren over de evolutie van het web HTML is aanzienlijk geëvolueerd sinds Tim Berners-Lee in 1990 de eerste webbrowser bij CERN creëerde. Sommige oudere tags zoals <marquee> zijn nu verouderd omdat ze niet goed werken met moderne toegankelijkheidsnormen en principes van responsief ontwerp. Probeer dit experiment: 1. Omhul tijdelijk je <h1>-titel met een <marquee>-tag: <marquee><h1>Mijn Terrarium</h1></marquee> 2. Open je pagina in een browser en observeer het scroll-effect 3. Overweeg waarom deze tag is verouderd (hint: denk aan gebruikerservaring en toegankelijkheid) 4. Verwijder de <marquee>-tag en keer terug naar semantische markup Reflectievragen: - Hoe kan een scrollende titel gebruikers met visuele beperkingen of gevoeligheid voor beweging beïnvloeden? - Welke moderne CSS-technieken kunnen vergelijkbare visuele effecten bereiken op een meer toegankelijke manier? - Waarom is het belangrijk om huidige webstandaarden te gebruiken in plaats van verouderde elementen? Ontdek meer over verouderde en afgeschafte HTML-elementen om te begrijpen hoe webstandaarden evolueren om de gebruikerservaring te verbeteren. ## Quiz na de les Quiz na de les ## Review & Zelfstudie Verdiep je HTML-kennis HTML is al meer dan 30 jaar de basis van het web en is geëvolueerd van een eenvoudige documentopmaaktaal naar een geavanceerd platform voor het bouwen van interactieve applicaties. Het begrijpen van deze evolutie helpt je moderne webstandaarden te waarderen en betere ontwikkelingsbeslissingen te nemen. Aanbevolen leerpaden: 1. HTML Geschiedenis en Evolutie - Onderzoek de tijdlijn van HTML 1.0 tot HTML5 - Ontdek waarom bepaalde tags zijn verouderd (toegankelijkheid, mobielvriendelijkheid, onderhoudbaarheid) - Onderzoek opkomende HTML-functies en voorstellen 2. Semantische HTML Verdieping - Bestudeer de volledige lijst van HTML5 semantische elementen - Oefen met het identificeren wanneer je <article>, <section>, <aside> en <main> moet gebruiken - Leer over ARIA-attributen voor verbeterde toegankelijkheid 3. Moderne Webontwikkeling - Ontdek het bouwen van responsieve websites op Microsoft Learn - Begrijp hoe HTML integreert met CSS en JavaScript - Leer over webprestaties en SEO best practices Reflectievragen: - Welke verouderde HTML-tags heb je ontdekt en waarom zijn ze verwijderd? - Welke nieuwe HTML-functies worden voorgesteld voor toekomstige versies? - Hoe draagt semantische HTML bij aan webtoegankelijkheid en SEO? ### ⚡ Wat je in de komende 5 minuten kunt doen - [ ] Open DevTools (F12) en inspecteer de HTML-structuur van je favoriete website - [ ] Maak een eenvoudige HTML-bestand met basistags: <h1>, <p> en <img> - [ ] Valideer je HTML met de W3C HTML Validator online - [ ] Probeer een opmerking toe te voegen aan je HTML met <!-- comment --> ### 🎯 Wat je in dit uur kunt bereiken - [ ] Maak de quiz na de les af en herzie semantische HTML-concepten - [ ] Bouw een eenvoudige webpagina over jezelf met een correcte HTML-structuur - [ ] Experimenteer met verschillende kopniveaus en tekstopmaak-tags - [ ] Voeg afbeeldingen en links toe om multimedia-integratie te oefenen - [ ] Onderzoek HTML5-functies die je nog niet hebt geprobeerd ### 📅 Jouw weeklange HTML-reis - [ ] Voltooi de terrariumprojectopdracht met semantische markup - [ ] Maak een toegankelijke webpagina met ARIA-labels en rollen - [ ] Oefen met het maken van formulieren met verschillende invoertypen - [ ] Verken HTML5 API's zoals localStorage of geolocatie - [ ] Bestudeer responsieve HTML-patronen en mobiel-eerst ontwerp - [ ] Bekijk de HTML-code van andere ontwikkelaars voor best practices ### 🌟 Jouw maandlange webbasis - [ ] Bouw een portfolio website die je HTML-vaardigheden laat zien - [ ] Leer HTML-templating met een framework zoals Handlebars - [ ] Draag bij aan open source-projecten door HTML-documentatie te verbeteren - [ ] Beheers geavanceerde HTML-concepten zoals aangepaste elementen - [ ] Integreer HTML met CSS-frameworks en JavaScript-bibliotheken - [ ] Begeleid anderen die HTML-grondbeginselen leren ## 🎯 Jouw HTML-beheersingstijdlijn ### 🛠️ Samenvatting van jouw HTML-toolkit Na het voltooien van deze les heb je nu: - Documentstructuur: Complete HTML5-basis met correcte DOCTYPE - Semantische markup: Betekenisvolle tags die toegankelijkheid en SEO verbeteren - Afbeeldingsintegratie: Correcte bestandsorganisatie en alt-tekstpraktijken - Layoutcontainers: Strategisch gebruik van divs met beschrijvende classnamen - Bewustzijn van toegankelijkheid: Begrip van schermlezer-navigatie - Moderne standaarden: Huidige HTML5-praktijken en kennis van verouderde tags - Projectbasis: Stevige basis voor CSS-styling en JavaScript-interactiviteit Volgende stappen: Jouw HTML-structuur is klaar voor CSS-styling! De semantische basis die je hebt gelegd, maakt de volgende les veel gemakkelijker te begrijpen. ## Opdracht Oefen je HTML: Bouw een blogmockup --- Disclaimer: Dit document is vertaald met behulp van de AI-vertalingsservice Co-op Translator. Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
Terrarium Project Deel 2: Introductie tot CSS
Weet je nog hoe je HTML-terrarium er vrij basic uitzag? Met CSS transformeren we die eenvoudige structuur tot iets visueel aantrekkelijks. Als HTML het frame van een huis is, dan is CSS alles wat het huis gezellig maakt - de verfkleuren, de inrichting, de verlichting en hoe de kamers samenkomen. Denk aan hoe het Paleis van Versailles begon als een eenvoudige jachthut, maar door aandacht voor decoratie en indeling werd omgetoverd tot een van de meest indrukwekkende gebouwen ter wereld. Vandaag gaan we je terrarium transformeren van functioneel naar verfijnd. Je leert hoe je elementen precies positioneert, layouts laat reageren op verschillende schermformaten en visuele aantrekkingskracht creëert die websites boeiend maakt. Aan het einde van deze les zul je zien hoe strategische CSS-styling je project aanzienlijk kan verbeteren. Laten we wat stijl toevoegen aan je terrarium. ## Pre-Lecture Quiz Pre-lecture quiz ## Aan de slag met CSS CSS wordt vaak gezien als "dingen mooi maken," maar het heeft een veel bredere functie. CSS is als de regisseur van een film - je bepaalt niet alleen hoe alles eruitziet, maar ook hoe het beweegt, reageert op interactie en zich aanpast aan verschillende situaties. Moderne CSS is ongelooflijk krachtig. Je kunt code schrijven die automatisch layouts aanpast voor telefoons, tablets en desktopcomputers. Je kunt vloeiende animaties maken die de aandacht van gebruikers sturen waar nodig. Het resultaat kan indrukwekkend zijn wanneer alles goed samenwerkt. Dit gaan we bereiken in deze les: - Creëert een complete visuele vormgeving voor je terrarium met moderne CSS-technieken - Verkent fundamentele concepten zoals de cascade, overerving en CSS-selectors - Implementeert responsieve positionering en layoutstrategieën - Bouwt de terrariumcontainer met CSS-vormen en styling ### Vereisten Je moet de HTML-structuur voor je terrarium uit de vorige les hebben voltooid en klaar hebben om te stylen. ### Je CSS-bestand instellen Voordat we kunnen beginnen met stylen, moeten we CSS koppelen aan onze HTML. Deze koppeling vertelt de browser waar de stylinginstructies voor ons terrarium te vinden zijn. Maak in je terrariummap een nieuw bestand genaamd style.css en link het in het <head>-gedeelte van je HTML-document: Wat deze code doet: - Creëert een verbinding tussen je HTML- en CSS-bestanden - Vertelt de browser om de stijlen uit style.css te laden en toe te passen - Gebruikt het attribuut rel="stylesheet" om aan te geven dat dit een CSS-bestand is - Verwijst naar het bestandspad met href="./style.css" ## De CSS Cascade begrijpen Heb je je ooit afgevraagd waarom CSS "Cascading" Style Sheets wordt genoemd? Stijlen stromen als een waterval naar beneden en soms conflicteren ze met elkaar. Denk aan hoe militaire bevelstructuren werken - een algemeen bevel kan zeggen "alle troepen dragen groen," maar een specifiek bevel voor jouw eenheid kan zeggen "draag ceremonieel blauw voor de ceremonie." Het meer specifieke bevel heeft voorrang. CSS volgt een vergelijkbare logica, en het begrijpen van deze hiërarchie maakt het debuggen veel eenvoudiger. ### Experimenteren met Cascade Prioriteit Laten we de cascade in actie zien door een stijlconflict te creëren. Voeg eerst een inline stijl toe aan je <h1>-tag: Wat deze code doet: - Past een rode kleur direct toe op het <h1>-element met inline styling - Gebruikt het attribuut style om CSS direct in de HTML in te voegen - Creëert de hoogste prioriteit stijlregel voor dit specifieke element Voeg vervolgens deze regel toe aan je style.css-bestand: In het bovenstaande hebben we: - Gedefinieerd een CSS-regel die alle <h1>-elementen target - Ingesteld dat de tekstkleur blauw is met een externe stylesheet - Gecreëerd een regel met lagere prioriteit vergeleken met inline stijlen ✅ Kennischeck: Welke kleur wordt weergegeven in je webapp? Waarom wint die kleur? Kun je scenario's bedenken waarin je stijlen zou willen overschrijven? ## CSS Overerving in actie CSS-overerving werkt als genetica - elementen erven bepaalde eigenschappen van hun ouderelementen. Als je de lettertypefamilie instelt op het body-element, gebruikt alle tekst binnenin automatisch datzelfde lettertype. Het is vergelijkbaar met hoe de kenmerkende kaaklijn van de Habsburg-familie generaties lang verscheen zonder specifiek voor elk individu te worden ingesteld. Niet alles wordt echter geërfd. Tekststijlen zoals lettertypes en kleuren worden wel geërfd, maar layout-eigenschappen zoals marges en randen niet. Net zoals kinderen fysieke kenmerken kunnen erven, maar niet de modekeuzes van hun ouders. ### Font-overerving observeren Laten we overerving in actie zien door een lettertypefamilie in te stellen op het <body>-element: Wat hier gebeurt: - Stelt de lettertypefamilie in voor de hele pagina door het <body>-element te targeten - Gebruikt een lettertypestack met fallback-opties voor betere browsercompatibiliteit - Past moderne systeemlettertypes toe die er goed uitzien op verschillende besturingssystemen - Zorgt ervoor dat alle kindelementen dit lettertype erven, tenzij specifiek overschreven Open de ontwikkelaarstools van je browser (F12), ga naar het tabblad Elements en inspecteer je <h1>-element. Je zult zien dat het de lettertypefamilie van het body-element erft: ✅ Experimenteren: Probeer andere overerfbare eigenschappen in te stellen op <body> zoals color, line-height of text-align. Wat gebeurt er met je koptekst en andere elementen? ### 🔄 Pedagogische Check-in CSS Basisbegrip: Voordat je verder gaat met selectors, zorg ervoor dat je: - ✅ Het verschil tussen cascade en overerving kunt uitleggen - ✅ Kunt voorspellen welke stijl wint in een specificiteitsconflict - ✅ Kunt identificeren welke eigenschappen van ouderelementen worden geërfd - ✅ CSS-bestanden correct kunt koppelen aan HTML Snelle test: Als je deze stijlen hebt, welke kleur zal een <h1> binnen een <div class="special"> hebben? Antwoord: Rood (element selector target direct h1) ## CSS Selectors beheersen CSS-selectors zijn jouw manier om specifieke elementen te targeten voor styling. Ze werken als het geven van precieze aanwijzingen - in plaats van te zeggen "het huis," kun je zeggen "het blauwe huis met de rode deur aan Maple Street." CSS biedt verschillende manieren om specifiek te zijn, en de juiste selector kiezen is als het kiezen van het juiste gereedschap voor de taak. Soms moet je alle deuren in de buurt stylen, en soms slechts één specifieke deur. ### Element Selectors (Tags) Element selectors targeten HTML-elementen op hun tagnaam. Ze zijn perfect voor het instellen van basisstijlen die breed toepasbaar zijn op je pagina: Begrip van deze stijlen: - Stelt consistente typografie in voor de hele pagina met de body selector - Verwijdert standaard browsermarges en -padding voor betere controle - Stijlt alle koptekstelementen met kleur, uitlijning en ruimte - Gebruikt rem-eenheden voor schaalbare, toegankelijke lettergrootte Hoewel element selectors goed werken voor algemene styling, heb je meer specifieke selectors nodig om individuele componenten zoals de planten in je terrarium te stylen. ### ID Selectors voor unieke elementen ID selectors gebruiken het #-symbool en targeten elementen met specifieke id-attributen. Omdat IDs uniek moeten zijn op een pagina, zijn ze perfect voor het stylen van individuele, speciale elementen zoals onze linker- en rechterplantcontainers. Laten we de styling maken voor de zijcontainers van ons terrarium waar de planten komen te staan: Wat deze code doet: - Positioneert containers aan de uiterste linker- en rechterrand met absolute positionering - Gebruikt vh (viewport height) eenheden voor responsieve hoogte die zich aanpast aan schermgrootte - Past box-sizing: border-box toe zodat padding wordt opgenomen in de totale breedte - Verwijdert onnodige px-eenheden van nulwaarden voor schonere code - Stelt een subtiele achtergrondkleur in die prettiger is voor de ogen dan felgrijs ✅ Codekwaliteituitdaging: Merk op hoe deze CSS het DRY (Don't Repeat Yourself) principe schendt. Kun je het herschrijven met zowel een ID als een class? Verbeterde aanpak: ### Class Selectors voor herbruikbare stijlen Class selectors gebruiken het .-symbool en zijn perfect wanneer je dezelfde stijlen wilt toepassen op meerdere elementen. In tegenstelling tot IDs kunnen classes herhaaldelijk worden gebruikt in je HTML, waardoor ze ideaal zijn voor consistente stylingpatronen. In ons terrarium heeft elke plant vergelijkbare styling nodig, maar ook individuele positionering. We gebruiken een combinatie van classes voor gedeelde stijlen en IDs voor unieke positionering. Hier is de HTML-structuur voor elke plant: Belangrijke elementen uitgelegd: - Gebruikt class="plant-holder" voor consistente containerstyling voor alle planten - Past class="plant" toe voor gedeelde afbeeldingsstyling en gedrag - Bevat unieke id="plant1" voor individuele positionering en JavaScript-interactie - Biedt beschrijvende alt-tekst voor toegankelijkheid met schermlezers Voeg nu deze stijlen toe aan je style.css-bestand: Wat deze stijlen doen: - Creëert relatieve positionering voor de plantcontainer om een positioneringscontext te creëren - Stelt elke plantcontainer in op 13% hoogte, zodat alle planten verticaal passen zonder te scrollen - Verschuift containers iets naar links om planten beter te centreren binnen hun containers - Laat planten responsief schalen met max-width en max-height eigenschappen - Gebruikt z-index om planten boven andere elementen in het terrarium te plaatsen - Voegt een subtiel hover-effect toe met CSS-transities voor betere gebruikersinteractie ✅ Kritisch nadenken: Waarom hebben we zowel .plant-holder als .plant selectors nodig? Wat zou er gebeuren als we proberen slechts één te gebruiken? ## CSS Positionering begrijpen CSS-positionering is als het zijn van de toneelregisseur van een voorstelling - je bepaalt waar elke acteur staat en hoe ze zich over het podium bewegen. Sommige acteurs volgen de standaardopstelling, terwijl anderen specifieke positionering nodig hebben voor dramatisch effect. Zodra je positionering begrijpt, worden veel layoutuitdagingen beheersbaar. Heb je een navigatiebalk nodig die bovenaan blijft terwijl gebruikers scrollen? Positionering regelt dat. Wil je een tooltip die op een specifieke locatie verschijnt? Dat is ook positionering. ### De vijf positioneringswaarden ### Positionering in ons terrarium Ons terrarium gebruikt een strategische combinatie van positioneringstypen om de gewenste layout te creëren: Begrip van de positioneringsstrategie: - Absolute containers worden uit de normale documentflow gehaald en vastgezet aan de schermranden - Relatieve plantcontainers creëren een positioneringscontext terwijl ze in de documentflow blijven - Absolute planten kunnen precies worden gepositioneerd binnen hun relatieve containers - Deze combinatie zorgt ervoor dat planten verticaal stapelen terwijl ze individueel positioneerbaar zijn ✅ Experimenteren: Probeer de positioneringswaarden te veranderen en observeer de resultaten: - Wat gebeurt er als je .container verandert van absolute naar relative? - Hoe verandert de lay-out als .plant-holder absolute gebruikt in plaats van relative? - Wat gebeurt er wanneer je .plant naar relative positionering schakelt? ### 🔄 Pedagogische Check-in CSS Positionering Beheersing: Neem een moment om je begrip te controleren: - ✅ Kun je uitleggen waarom planten absolute positionering nodig hebben voor drag-and-drop? - ✅ Begrijp je hoe relatieve containers een positioneringscontext creëren? - ✅ Waarom gebruiken de zijcontainers absolute positionering? - ✅ Wat zou er gebeuren als je helemaal geen positioneringsverklaringen gebruikt? Verbinden met de echte wereld: Denk na over hoe CSS-positionering de lay-out in de echte wereld weerspiegelt: - Static: Boeken op een plank (natuurlijke volgorde) - Relative: Een boek iets verplaatsen maar op dezelfde plek houden - Absolute: Een bladwijzer op een exacte pagina plaatsen - Fixed: Een plakbriefje dat zichtbaar blijft terwijl je door de pagina's bladert ## Het bouwen van de terrarium met CSS Nu gaan we een glazen pot bouwen met alleen CSS - geen afbeeldingen of grafische software nodig. Het creëren van realistisch ogend glas, schaduwen en diepte-effecten met behulp van positionering en transparantie toont de visuele mogelijkheden van CSS. Deze techniek weerspiegelt hoe architecten in de Bauhaus-beweging eenvoudige geometrische vormen gebruikten om complexe, mooie structuren te maken. Zodra je deze principes begrijpt, herken je de CSS-technieken achter veel webontwerpen. ### De componenten van de glazen pot maken Laten we de terrarium-pot stukje bij beetje bouwen. Elk onderdeel gebruikt absolute positionering en op percentages gebaseerde afmetingen voor een responsief ontwerp: Begrip van de terrariumconstructie: - Gebruikt op percentages gebaseerde afmetingen voor schaalbaarheid op alle schermformaten - Positioneert elementen absoluut om ze precies te stapelen en uit te lijnen - Past verschillende waarden voor transparantie toe om het glaseffect te creëren - Implementeert z-index-lagen zodat planten binnen de pot verschijnen - Voegt subtiele box-shadow en verfijnde border-radius toe voor een realistischer uiterlijk ### Responsief ontwerp met percentages Let op hoe alle afmetingen percentages gebruiken in plaats van vaste pixelwaarden: Waarom dit belangrijk is: - Zorgt ervoor dat het terrarium proportioneel schaalt op elk schermformaat - Behoudt de visuele relaties tussen de potcomponenten - Biedt een consistente ervaring van mobiele telefoons tot grote desktopmonitoren - Maakt het ontwerp flexibel zonder de visuele lay-out te breken ### CSS-eenheden in actie We gebruiken rem-eenheden voor border-radius, die schalen ten opzichte van de root-lettergrootte. Dit zorgt voor meer toegankelijke ontwerpen die rekening houden met de voorkeuren van de gebruiker. Lees meer over CSS relatieve eenheden in de officiële specificatie. ✅ Visuele experimenten: Probeer deze waarden te wijzigen en observeer de effecten: - Verander de pottransparantie van 0.5 naar 0.8 – hoe beïnvloedt dit het glaseffect? - Pas de kleur van de aarde aan van #3a241d naar #8B4513 – wat is het visuele effect hiervan? - Wijzig de z-index van de aarde naar 2 – wat gebeurt er met de lagen? ### 🔄 Pedagogische Check-in CSS Visueel Ontwerp Begrip: Bevestig je begrip van visuele CSS: - ✅ Hoe creëren op percentages gebaseerde afmetingen een responsief ontwerp? - ✅ Waarom creëert transparantie het glaseffect? - ✅ Welke rol speelt z-index bij het stapelen van elementen? - ✅ Hoe creëren border-radius waarden de vorm van de pot? Ontwerpprincipe: Let op hoe we complexe visuals bouwen uit eenvoudige vormen: 1. Rechthoeken → Afgeronde rechthoeken → Potcomponenten 2. Effen kleuren → Transparantie → Glaseffect 3. Individuele elementen → Gelaagde compositie → 3D-uitstraling --- ## GitHub Copilot Agent Challenge 🚀 Gebruik de Agent-modus om de volgende uitdaging te voltooien: Beschrijving: Maak een CSS-animatie die de terrariumplanten zachtjes heen en weer laat wiegen, waardoor een natuurlijk briesje wordt gesimuleerd. Dit helpt je om CSS-animaties, transformaties en keyframes te oefenen terwijl je de visuele aantrekkingskracht van je terrarium verbetert. Prompt: Voeg CSS-keyframe-animaties toe om de planten in het terrarium zachtjes van links naar rechts te laten wiegen. Maak een wiegende animatie die elke plant lichtjes (2-3 graden) naar links en rechts draait met een duur van 3-4 seconden, en pas deze toe op de .plant-klasse. Zorg ervoor dat de animatie oneindig herhaalt en een easing-functie heeft voor natuurlijke beweging. Lees meer over agent mode hier. ## 🚀 Uitdaging: Glans op glas toevoegen Klaar om je terrarium te verbeteren met realistische glans op glas? Deze techniek voegt diepte en realisme toe aan het ontwerp. Je gaat subtiele highlights creëren die simuleren hoe licht reflecteert op glasoppervlakken. Deze aanpak is vergelijkbaar met hoe Renaissance-schilders zoals Jan van Eyck licht en reflectie gebruikten om geschilderd glas driedimensionaal te laten lijken. Dit is wat je wilt bereiken: Jouw uitdaging: - Creëer subtiele witte of lichtgekleurde ovale vormen voor de glans op het glas - Positioneer ze strategisch aan de linkerkant van de pot - Pas geschikte transparantie- en vervagingseffecten toe voor realistische lichtreflectie - Gebruik border-radius om organische, bubbelachtige vormen te maken - Experimenteer met verlopen of box-shadows voor verbeterd realisme ## Quiz na de les Quiz na de les ## Breid je CSS-kennis uit CSS kan in het begin complex lijken, maar het begrijpen van deze kernconcepten biedt een solide basis voor meer geavanceerde technieken. Jouw volgende CSS-leergebieden: - Flexbox - vereenvoudigt uitlijning en verdeling van elementen - CSS Grid - biedt krachtige tools voor het maken van complexe lay-outs - CSS-variabelen - vermindert herhaling en verbetert onderhoudbaarheid - Responsief ontwerp - zorgt ervoor dat websites goed werken op verschillende schermformaten ### Interactieve leermiddelen Oefen deze concepten met deze leuke, interactieve spellen: - 🐸 Flexbox Froggy - Beheers Flexbox door leuke uitdagingen - 🌱 Grid Garden - Leer CSS Grid door virtuele wortels te kweken - 🎯 CSS Battle - Test je CSS-vaardigheden met codeeruitdagingen ### Aanvullend leren Voor uitgebreide CSS-basisprincipes, voltooi deze Microsoft Learn-module: Style your HTML app with CSS ### ⚡ Wat je in de komende 5 minuten kunt doen - [ ] Open DevTools en inspecteer CSS-stijlen op een willekeurige website met het Elementenpaneel - [ ] Maak een eenvoudige CSS-bestand en koppel het aan een HTML-pagina - [ ] Probeer kleuren te wijzigen met verschillende methoden: hex, RGB en benoemde kleuren - [ ] Oefen het boxmodel door padding en margin toe te voegen aan een div ### 🎯 Wat je in dit uur kunt bereiken - [ ] Voltooi de quiz na de les en herhaal de CSS-basisprincipes - [ ] Style je HTML-pagina met lettertypen, kleuren en marges - [ ] Maak een eenvoudige lay-out met flexbox of grid - [ ] Experimenteer met CSS-overgangen voor vloeiende effecten - [ ] Oefen responsief ontwerp met media queries ### 📅 Je weeklange CSS-avontuur - [ ] Voltooi de terrarium-stylingopdracht met creatieve flair - [ ] Beheers CSS Grid door een fotogalerij lay-out te maken - [ ] Leer CSS-animaties om je ontwerpen tot leven te brengen - [ ] Verken CSS-preprocessors zoals Sass of Less - [ ] Bestudeer ontwerpprincipes en pas ze toe op je CSS - [ ] Analyseer en reproduceer interessante ontwerpen die je online vindt ### 🌟 Je maandlange ontwerpmeesterschap - [ ] Bouw een compleet responsief website-ontwerpsysteem - [ ] Leer CSS-in-JS of utility-first frameworks zoals Tailwind - [ ] Draag bij aan open source-projecten met CSS-verbeteringen - [ ] Beheers geavanceerde CSS-concepten zoals CSS-aangepaste eigenschappen en containment - [ ] Maak herbruikbare componentbibliotheken met modulaire CSS - [ ] Mentor anderen die CSS leren en deel je ontwerpkennis ## 🎯 Jouw CSS-beheersingstijdlijn ### 🛠️ Samenvatting van jouw CSS-toolkit Na het voltooien van deze les heb je nu: - Cascade Begrip: Hoe stijlen erven en elkaar overschrijven - Selector Beheersing: Precieze targeting met elementen, klassen en ID's - Positioneringsvaardigheden: Strategische plaatsing en gelaagdheid van elementen - Visueel Ontwerp: Glaseffecten, schaduwen en transparantie creëren - Responsieve Technieken: Op percentages gebaseerde lay-outs die zich aanpassen aan elk scherm - Code Organisatie: Schone, onderhoudbare CSS-structuur - Moderne Praktijken: Gebruik van relatieve eenheden en toegankelijke ontwerpprincipes Volgende stappen: Je terrarium heeft nu zowel structuur (HTML) als stijl (CSS). De laatste les voegt interactiviteit toe met JavaScript! ## Opdracht CSS Refactoring --- Disclaimer: Dit document is vertaald met behulp van de AI-vertalingsservice Co-op Translator. Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
Terrarium-prosjekt del 1: Introduksjon til HTML
HTML, eller HyperText Markup Language, er grunnlaget for alle nettsider du noen gang har besøkt. Tenk på HTML som skjelettet som gir struktur til nettsider – det definerer hvor innhold går, hvordan det organiseres, og hva hver del representerer. Mens CSS senere "kler opp" ditt HTML med farger og oppsett, og JavaScript bringer det til liv med interaktivitet, gir HTML den nødvendige strukturen som gjør alt annet mulig. I denne leksjonen skal du lage HTML-strukturen for et virtuelt terrarium-grensesnitt. Dette praktiske prosjektet vil lære deg grunnleggende HTML-konsepter mens du bygger noe visuelt engasjerende. Du vil lære hvordan du organiserer innhold med semantiske elementer, jobber med bilder, og lager grunnlaget for en interaktiv webapplikasjon. Ved slutten av denne leksjonen vil du ha en fungerende HTML-side som viser plantebilder i organiserte kolonner, klar for styling i neste leksjon. Ikke bekymre deg om det ser enkelt ut i starten – det er akkurat slik HTML skal være før CSS legger til den visuelle poleringen. ## Quiz før forelesning Quiz før forelesning ## Sette opp prosjektet ditt Før vi dykker inn i HTML-koden, la oss sette opp et ordentlig arbeidsområde for terrarium-prosjektet ditt. Å lage en organisert mappestruktur fra begynnelsen er en viktig vane som vil tjene deg godt gjennom hele webutviklingsreisen. ### Oppgave: Lag prosjektstrukturen din Du skal lage en dedikert mappe for terrarium-prosjektet ditt og legge til din første HTML-fil. Her er to ulike metoder du kan bruke: Alternativ 1: Bruke Visual Studio Code 1. Åpne Visual Studio Code 2. Klikk "File" → "Open Folder" eller bruk Ctrl+K, Ctrl+O (Windows/Linux) eller Cmd+K, Cmd+O (Mac) 3. Opprett en ny mappe kalt terrarium og velg den 4. I Explorer-panelet, klikk på ikonet for "New File" 5. Gi filen navnet index.html Alternativ 2: Bruke terminalkommandoer Dette oppnår disse kommandoene: - Oppretter en ny katalog kalt terrarium for prosjektet ditt - Går inn i terrarium-mappen - Oppretter en tom index.html fil - Åpner filen i Visual Studio Code for redigering ## Forstå HTML-dokumentstruktur Hvert HTML-dokument følger en spesifikk struktur som nettlesere må forstå og vise riktig. Tenk på denne strukturen som et formelt brev – den har påkrevde elementer i en bestemt rekkefølge som hjelper mottakeren (nettleseren) med å prosessere innholdet på riktig måte. La oss starte med å legge til det essensielle grunnlaget som hvert HTML-dokument trenger. ### DOCTYPE-deklarasjonen og rootelementet De to første linjene i en hvilken som helst HTML-fil fungerer som dokumentets "introduksjon" til nettleseren: Forstå hva denne koden gjør: - Deklarerer dokumenttypen som HTML5 med <!DOCTYPE html> - Oppretter rootelementet <html> som vil inneholde alt innhold på siden - Etablerer moderne webstandarder for korrekt nettleserrendering - Sikrer jevn visning på tvers av ulike nettlesere og enheter ### 🔄 Pedagogisk sjekk Pause og reflekter: Før du fortsetter, sørg for at du forstår: - ✅ Hvorfor hvert HTML-dokument trenger en DOCTYPE-deklarasjon - ✅ Hva rootelementet <html> inneholder - ✅ Hvordan denne strukturen hjelper nettlesere med å gjengi sidene riktig Rask selvtest: Kan du forklare med dine egne ord hva "standard-kompatibel rendering" betyr? ## Legge til essensiell dokumentmetadata <head>-delen i et HTML-dokument inneholder viktig informasjon som nettlesere og søkemotorer trenger, men som besøkende ikke ser direkte på siden. Tenk på det som "bak kulissene"-informasjonen som hjelper nettsiden din å fungere riktig og vises korrekt på ulike enheter og plattformer. Denne metadataen forteller nettlesere hvordan de skal vise siden, hvilken tegnkoding de skal bruke, og hvordan de skal håndtere ulike skjermstørrelser – alt essensielt for å lage profesjonelle, tilgjengelige nettsider. ### Oppgave: Legg til dokumenthode Sett inn denne <head>-seksjonen mellom dine åpne og lukkede <html>-tagger: Hva hvert element gjør: - Setter sidetittel som vises i nettleserfaner og søkeresultater - Spesifiserer UTF-8 tegnkoding for riktig visning av tekst over hele verden - Sikrer kompatibilitet med moderne versjoner av Internet Explorer - Konfigurerer responsivt design ved å sette viewporten til enhetsbredde - Kontrollerer startzoomen for å vise innhold i naturlig størrelse ## Bygge dokumentets kropp <body>-elementet inneholder alt synlig innhold på nettsiden – alt brukeren ser og kan interagere med. Mens <head>-delen ga instruksjoner til nettleseren, inneholder <body> den faktiske innholdet: tekst, bilder, knapper og andre elementer som lager brukergrensesnittet. La oss legge til kroppens struktur og forstå hvordan HTML-tagger samhandler for å lage meningsfylt innhold. ### Forstå HTML-taggstruktur HTML bruker parvise tagger for å definere elementer. De fleste tagger har en åpningstagg som <p> og en avslutningstagg som </p>, med innhold mellom: <p>Hei, verden!</p>. Dette lager et paragraf-element som inneholder teksten "Hei, verden!". ### Oppgave: Legg til body-elementet Oppdater HTML-filen din til å inkludere <body>-elementet: Dette gir den komplette strukturen: - Etablerer det grunnleggende HTML5 dokumentrammeverket - Inkluderer essensiell metadata for korrekt nettleserrendering - Lager en tom kropp klar for synlig innhold - Følger moderne webutviklings beste praksis Nå er du klar til å legge til synlige elementer i terrariet ditt. Vi bruker <div>-elementer som beholdere for å organisere forskjellige innholdsseksjoner, og <img>-elementer for å vise plantebildene. ### Jobbe med bilder og layout-beholdere Bilder er spesielle i HTML fordi de bruker "selvlukkende" tagger. I motsetning til elementer som <p></p> som omslutter innhold, inneholder <img>-taggen all nødvendig informasjon innenfor seg selv ved hjelp av attributter som src for bildefil-lokasjon og alt for tilgjengelighet. Før du legger til bilder i HTML-en din, må du organisere prosjektfilene dine riktig ved å lage en mappe for bilder og legge til plantegrafikkene. Først, sett opp bildene dine: 1. Lag en mappe kalt images inne i terrarium-prosjektmappen din 2. Last ned plantebildene fra løsningsmappen (14 plantebilder totalt) 3. Kopier alle plantebildene over i den nye images-mappen ### Oppgave: Lag layout for plantevisning Legg nå til plantebildene organisert i to kolonner mellom dine <body></body>-tagger: Steg for steg, dette skjer i koden: - Oppretter en hovedsidebeholder med id="page" for å holde alt innhold - Etablerer to kolonnebeholdere: left-container og right-container - Organiserer 7 planter i venstre kolonne og 7 planter i høyre kolonne - Pakker hvert plantebilde i en plant-holder div for individuell posisjonering - Bruker konsekvente klassenavn for CSS-styling i neste leksjon - Tildeler unike ID-er til hvert plantebilde for JavaScript-interaksjon senere - Inkluderer riktige filbaner som peker til bilder-mappen ### 🔄 Pedagogisk sjekk Forståelse av struktur: Ta et øyeblikk til å gjennomgå HTML-strukturen din: - ✅ Kan du identifisere hovedbeholderne i layouten din? - ✅ Forstår du hvorfor hvert bilde har en unik ID? - ✅ Hvordan vil du beskrive formålet til plant-holder-divene? Visuell inspeksjon: Åpne HTML-filen i en nettleser. Du skal se: - En enkel liste med plantebilder - Bilder organisert i to kolonner - Enkel, ustylet layout Husk: Dette enkle utseendet er akkurat hvordan HTML skal se ut før CSS-styling! Med denne markupen lagt til vil plantene vises på skjermen, selv om det ikke ser polert ut ennå – det er CSS sin jobb i neste leksjon! For nå har du et solid HTML-grunnlag som ordentlig organiserer innholdet ditt og følger beste praksis for tilgjengelighet. ## Bruke semantisk HTML for tilgjengelighet Semantisk HTML betyr å velge HTML-elementer basert på deres mening og hensikt, ikke bare utseende. Når du bruker semantisk markup, kommuniserer du struktur og mening av innholdet ditt til nettlesere, søkemotorer og hjelpemidler som skjermlesere. Denne tilnærmingen gjør nettstedene dine mer tilgjengelige for brukere med funksjonsnedsettelser og hjelper søkemotorer å bedre forstå innholdet ditt. Det er et grunnleggende prinsipp i moderne webutvikling som skaper bedre opplevelser for alle. ### Legge til en semantisk sidetittel La oss legge til en passende overskrift på terrarium-siden din. Sett inn denne linjen rett etter åpningstaggen <body>: Hvorfor semantisk markup er viktig: - Hjelper skjermlesere med å navigere og forstå sidestrukturen - Forbedrer søkemotoroptimalisering (SEO) ved å klargjøre innholdshierarki - Øker tilgjengeligheten for brukere med synshemninger eller kognitive forskjeller - Skaper bedre brukeropplevelser på alle enheter og plattformer - Følger webstandarder og beste praksis for profesjonell utvikling Eksempler på semantiske vs. ikke-semantiske valg: ## Lage terrarium-beholderen Nå skal vi legge til HTML-strukturen for selve terrariet – glassbeholderen hvor plantene til slutt vil plasseres. Denne seksjonen demonstrerer et viktig konsept: HTML gir struktur, men uten CSS-styling vil ikke disse elementene være synlige ennå. Terrarium-markupen bruker beskrivende klassenavn som vil gjøre CSS-stylingen intuitiv og vedlikeholdbar i neste leksjon. ### Oppgave: Legg til terrarium-strukturen Sett inn denne markupen over den siste </div>-taggen (før avslutningstaggen til sidebeholderen): Forstå denne terrarium-strukturen: - Oppretter en hovedterrarium-beholder med en unik ID for styling - Definerer separate elementer for hver visuell komponent (topp, vegger, jord, bunn) - Inkluderer nestede elementer for glassrefleksjonseffekter (glinsende elementer) - Bruker beskrivende klassenavn som klart indikerer hvert elements formål - Forbereder strukturen for CSS-styling som vil skape terrariets glassutseende ### 🔄 Pedagogisk innsjekking Beherskelse av HTML-struktur: Før du går videre, sørg for at du kan: - ✅ Forklare forskjellen mellom HTML-struktur og visuelt utseende - ✅ Identifisere semantiske vs. ikke-semantiske HTML-elementer - ✅ Beskrive hvordan riktig markup gagner tilgjengelighet - ✅ Gjenkjenne dokumenttreets fullstendige struktur Test din forståelse: Prøv å åpne HTML-filen i en nettleser med JavaScript deaktivert og CSS fjernet. Dette viser den rene semantiske strukturen du har laget! --- ## GitHub Copilot Agent-utfordring Bruk Agent-modus for å fullføre følgende utfordring: Beskrivelse: Lag en semantisk HTML-struktur for en seksjon om plantepleie som kan legges til terrarium-prosjektet. Oppgave: Lag en semantisk HTML-seksjon som inkluderer en hovedoverskrift "Plant Care Guide", tre underseksjoner med overskrifter "Watering", "Light Requirements" og "Soil Care", hver med et avsnitt med informasjon om plantepleie. Bruk riktige semantiske HTML-tagger som <section>, <h2>, <h3>, og <p> for å strukturere innholdet passende. Lær mer om agent mode her. ## Utforsk HTML-historie-utfordring Lær om webutviklingen HTML har utviklet seg betydelig siden Tim Berners-Lee laget den første nettleseren på CERN i 1990. Noen eldre tagger som <marquee> er nå foreldet fordi de ikke fungerer godt med moderne tilgjengelighetsstandarder og prinsipper for responsivt design. Prøv dette eksperimentet: 1. Pakk midlertidig inn <h1>-tittelen din i en <marquee>-tagg: <marquee><h1>My Terrarium</h1></marquee> 2. Åpne siden i en nettleser og observer rulleffekten 3. Tenk over hvorfor denne taggen ble avviklet (tips: tenk på brukeropplevelse og tilgjengelighet) 4. Fjern <marquee>-taggen og gå tilbake til semantisk markup Refleksjonsspørsmål: - Hvordan kan en rullende tittel påvirke brukere med synshemming eller bevegelsesfølsomhet? - Hvilke moderne CSS-teknikker kan oppnå lignende visuelle effekter på en mer tilgjengelig måte? - Hvorfor er det viktig å bruke dagens webstandarder i stedet for foreldede elementer? Utforsk mer om utdaterte og foreldede HTML-elementer for å forstå hvordan webstandarder utvikler seg for å forbedre brukeropplevelsen. ## Quiz etter forelesning Quiz etter forelesning ## Gjennomgang og Selvstudium Fordyp deg i HTML-kunnskap HTML har vært grunnlaget for nettet i over 30 år, og har utviklet seg fra et enkelt dokumentmarkeringsspråk til en sofistikert plattform for å bygge interaktive applikasjoner. Å forstå denne utviklingen hjelper deg å sette pris på moderne webstandarder og ta bedre utviklingsvalg. Anbefalte læringsveier: 1. HTML-historie og utvikling - Undersøk tidslinjen fra HTML 1.0 til HTML5 - Utforsk hvorfor enkelte tagger ble avviklet (tilgjengelighet, mobilvennlighet, vedlikeholdbarhet) - Undersøk nye HTML-funksjoner og forslag 2. Dypdykk i semantisk HTML - Studer den fullstendige listen over HTML5 semantiske elementer - Øv på å identifisere når du skal bruke <article>, <section>, <aside>, og <main> - Lær om ARIA-attributter for forbedret tilgjengelighet 3. Moderne webutvikling - Utforsk å bygge responsive nettsteder på Microsoft Learn - Forstå hvordan HTML integreres med CSS og JavaScript - Lær om webytelse og SEO beste praksis Refleksjonsspørsmål: - Hvilke foreldede HTML-tagger oppdaget du, og hvorfor ble de fjernet? - Hvilke nye HTML-funksjoner foreslås for fremtidige versjoner? - Hvordan bidrar semantisk HTML til webtilgjengelighet og SEO? ### ⚡ Hva du kan gjøre de neste 5 minuttene - [ ] Åpne DevTools (F12) og inspiser HTML-strukturen til ditt favorittnettsted - [ ] Lag en enkel HTML-fil med grunnleggende tagger: <h1>, <p>, og <img> - [ ] Valider HTML-en din med W3C HTML Validator online - [ ] Prøv å legge til en kommentar i HTML-en din med <!-- comment --> ### 🎯 Hva du kan oppnå denne timen - [ ] Fullfør quizen etter leksjonen og gå gjennom semantiske HTML-konsepter - [ ] Lag en enkel nettside om deg selv med korrekt HTML-struktur - [ ] Eksperimenter med forskjellige overskriftsnivåer og tekstformateringstags - [ ] Legg til bilder og lenker for å øve på multimedia-integrering - [ ] Undersøk HTML5-funksjoner du ikke har prøvd ennå ### 📅 Din ukelange HTML-reise - [ ] Fullfør terrarium-prosjektoppgaven med semantisk markup - [ ] Lag en tilgjengelig nettside med ARIA-labels og roller - [ ] Øv på å lage skjemaer med ulike input-typer - [ ] Utforsk HTML5 API-er som localStorage eller geolokasjon - [ ] Studer responsive HTML-mønstre og mobil-først design - [ ] Gå gjennom andres HTML-kode for god praksis ### 🌟 Din månedslange webplattform - [ ] Lag en porteføljenettside som viser din HTML-ekspertise - [ ] Lær HTML-templating med et rammeverk som Handlebars - [ ] Bidra til open source-prosjekter ved å forbedre HTML-dokumentasjon - [ ] Mestre avanserte HTML-konsepter som egendefinerte elementer - [ ] Integrer HTML med CSS-rammeverk og JavaScript-biblioteker - [ ] Veilede andre som lærer HTML-grunnleggende ## 🎯 Din HTML-mester-tidslinje ### 🛠️ Ditt HTML-verktøysettoppsummering Etter å ha fullført denne leksjonen har du nå: - Dokumentstruktur: Fullstendig HTML5-grunnlag med korrekt DOCTYPE - Semantisk markup: Meningsfulle tagger som forbedrer tilgjengelighet og SEO - Bildeintegrasjon: Riktig filorganisering og alt-tekst praksis - Layout-containere: Strategisk bruk av div-er med beskrivende klassenavn - Tilgjengelighetsbevissthet: Forståelse for skjermlesernavigasjon - Moderne standarder: Nåværende HTML5-praksis og kunnskap om foreldede tagger - Prosjektgrunnlag: Solid basis for CSS-styling og JavaScript-interaktivitet Neste steg: Din HTML-struktur er klar for CSS-styling! Det semantiske fundamentet du har bygget vil gjøre neste leksjon mye enklere å forstå. ## Oppgave Øv deg på HTML: Lag en blogg-mockup --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Ansvarsfraskrivelse: Dette dokumentet er oversatt ved hjelp av AI-oversettingstjenesten Co-op Translator. Selv om vi streber etter nøyaktighet, vennligst vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på originalspråket skal betraktes som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium-prosjekt Del 2: Introduksjon til CSS
Husker du hvordan HTML-terrariet ditt så ganske enkelt ut? CSS er der vi forvandler den enkle strukturen til noe visuelt tiltalende. Hvis HTML er som å bygge rammen til et hus, så er CSS alt som får det til å føles som hjemme – malingsfarger, møblering, belysning og hvordan rommene flyter sammen. Tenk på hvordan Versailles-palasset startet som en enkel jakthytte, men nøye oppmerksomhet på dekorasjon og layout forvandlet det til en av verdens mest praktfulle bygninger. I dag skal vi forvandle terrariet ditt fra funksjonelt til polert. Du vil lære hvordan du plasserer elementer presist, får oppsett til å tilpasse seg forskjellige skjermstørrelser, og skaper det visuelle uttrykket som gjør nettsider engasjerende. Ved slutten av denne leksjonen vil du se hvordan strategisk CSS-styling dramatisk kan forbedre prosjektet ditt. La oss tilføre litt stil til terrariet ditt. ## Forhåndsquiz Forhåndsquiz ## Komme i gang med CSS CSS blir ofte sett på som bare «å gjøre ting pene», men det har et mye bredere formål. CSS er som å være regissør for en film – du kontrollerer ikke bare hvordan alt ser ut, men også hvordan det beveger seg, reagerer på interaksjon, og tilpasser seg ulike situasjoner. Moderne CSS er bemerkelsesverdig kapabel. Du kan skrive kode som automatisk justerer oppsett for telefoner, nettbrett og stasjonære datamaskiner. Du kan lage glatte animasjoner som leder brukerens oppmerksomhet dit det trengs. Resultatene kan være ganske imponerende når alt fungerer sammen. Dette skal vi oppnå i denne leksjonen: - Skaper et komplett visuelt design for terrariet ditt med moderne CSS-teknikker - Utforsker grunnleggende konsepter som kaskade, arv og CSS-velgere - Implementerer responsiv posisjonering og oppsettsstrategier - Bygger terrariets beholder ved bruk av CSS-former og styling ### Forutsetning Du bør ha fullført HTML-strukturen for terrariet ditt fra forrige leksjon og ha det klart til styling. ### Sette opp CSS-filen din Før vi kan starte med styling, må vi koble CSS til HTML-en vår. Denne forbindelsen forteller nettleseren hvor stylinginstruksjonene for terrariet vårt finnes. I terrarimappen din lager du en ny fil kalt style.css, så lenker du til den i <head>-delen av HTML-dokumentet ditt: Dette gjør koden: - Oppretter en forbindelse mellom HTML- og CSS-filene dine - Forteller nettleseren å laste og bruke stilene fra style.css - Bruker attributtet rel="stylesheet" for å spesifisere at dette er en CSS-fil - Refererer filbanen med href="./style.css" ## Forståelse av CSS-kaskaden Har du noen gang lurt på hvorfor CSS heter "Cascading Style Sheets"? Stiler faller som et fossestryk, og noen ganger kommer de i konflikt med hverandre. Tenk på hvordan militære kommandostrukturer fungerer – en generalordre kan si "alle tropper skal bære grønt," men en spesifikk ordre til din enhet kan si "bruk dressblått til seremonien." Den mer spesifikke instruksen går foran. CSS følger lignende logikk, og å forstå denne hierarkien gjør feilsøking mye enklere. ### Eksperimentere med kaskadeprioritet La oss se kaskaden i aksjon ved å skape en stilkonflikt. Først, legg til en inline-stil på <h1>-taggen din: Dette gjør koden: - Setter fargen rød direkte på <h1>-elementet ved bruk av inline-style - Bruker style-attributtet for å legge CSS direkte inn i HTML-en - Skaper stilen med høyest prioritet for dette spesifikke elementet Neste, legg denne regelen til style.css-filen din: Her har vi: - Definert en CSS-regel som målretter alle <h1>-elementene - Satt tekstfargen til blå via et eksternt stylesheet - Laget en regel med lavere prioritet sammenlignet med inline-stiler ✅ Kunnskapssjekk: Hvilken farge vises i webappen din? Hvorfor vinner den fargen? Kan du tenke deg situasjoner hvor det kan være ønskelig å overstyre stiler? ## CSS-arv i praksis CSS-arv fungerer som genetikk – elementer arver visse egenskaper fra sine overordnede elementer. Hvis du setter fontfamilien på <body>-elementet, bruker all tekst innenfor automatisk den samme fonten. Det er likt hvordan Habsburg-familiens karakteristiske kjeveform dukket opp over flere generasjoner uten at det var spesifisert for hver enkelt. Men ikke alt blir arvet. Tekststiler som fonter og farger arves, men oppsetts-egenskaper som marger og rammer gjør ikke det. Akkurat som barn kan arve fysiske trekk, men ikke foreldrenes motepreferanser. ### Se på font-arv La oss se arv i praksis ved å sette en fontfamilie på <body>-elementet: Hva som skjer her: - Setter fontfamilien for hele siden ved å målrette <body> - Bruker en font-stack med fallback-alternativer for bedre kompatibilitet i nettlesere - Benytter moderne systemfonter som ser bra ut på ulike operativsystemer - Sikrer at alle underordnede elementer arver denne fonten med mindre det overstyres eksplisitt Åpne nettleserens utviklerverktøy (F12), gå til Elementer-fanen, og inspiser <h1>-elementet ditt. Du vil se at det arver fontfamilien fra body: ✅ Eksperimenter: Prøv å sette andre arvelige egenskaper på <body> som color, line-height eller text-align. Hva skjer med overskriften og andre elementer? ### 🔄 Pedagogisk sjekk Forståelse av CSS-grunnlag: Før du går videre til velgere, bør du kunne: - ✅ Forklare forskjellen mellom kaskade og arv - ✅ Forutsi hvilken stil som vil vinne i en spesifisitetskonflikt - ✅ Identifisere hvilke egenskaper som arves fra foreldreelementer - ✅ Koble CSS-filer korrekt til HTML Rask test: Hvis du har disse stilene, hvilken farge får et <h1> inne i en <div class="special">? Svar: Rød (elementvelgeren retter seg direkte mot h1) ## Mestre CSS-velgere CSS-velgere er måten du målretter bestemte elementer for styling. De fungerer som å gi presise anvisninger – i stedet for å si "huset", kan du si "det blå huset med den røde døren i Maple Street." CSS tilbyr ulike måter å være spesifikk på, og det å velge riktig velger er som å velge det riktige verktøyet for en oppgave. Noen ganger må du style hver dør i nabolaget, andre ganger bare én bestemt dør. ### Elementvelgere (Tagger) Elementvelgere målretter HTML-elementer etter taggnavn. De er perfekte for å sette grunnleggende stiler som gjelder over hele siden: Forstå disse stilene: - Setter konsekvent typografi på hele siden med body-velgeren - Fjerner nettleserens standard marger og padding for bedre kontroll - Styler alle overskriftselementene med farge, justering og avstand - Bruker rem-enheter for skalerbar og tilgjengelig fontstørrelse Selv om elementvelgere fungerer godt for generell styling, trenger du mer spesifikke velgere for å style individuelle komponenter som plantene i terrariet ditt. ### ID-velgere for unike elementer ID-velgere bruker #-symbolet og målretter elementer med spesifikke id-attributter. Siden ID-er må være unike på en side, er de perfekte for å style individuelle, spesielle elementer som beholderne for venstre og høyre plante. La oss lage styling for terrariets sidebeholdere hvor plantene skal bo: Dette oppnår koden: - Plasserer beholdere helt til venstre og høyre ved bruk av absolute posisjonering - Bruker vh (viewport height)-enheter for responsiv høyde som tilpasser seg skjermstørrelsen - Setter box-sizing: border-box slik at padding inkluderes i total bredde - Fjerner unødvendige px-enheter fra nullverdier for renere kode - Setter en subtil bakgrunnsfarge som er mer behagelig for øynene enn en skarp grå ✅ Kodekvalitetsutfordring: Legg merke til at denne CSS-en bryter med DRY-prinsippet (Don't Repeat Yourself). Kan du refaktorere den ved å bruke både ID og klasse? Forbedret tilnærming: ### Klassevelgere for gjenbrukbare stiler Klassevelgere bruker .-symbolet og er perfekte når du vil bruke de samme stilene på flere elementer. I motsetning til ID-er kan klasser gjenbrukes over hele HTML-en, noe som gjør dem ideelle for konsistente stilmønstre. I terrariet vårt trenger hver plante lignende styling, men også individuell posisjonering. Vi vil bruke en kombinasjon av klasser for felles stiler og ID-er for unik posisjonering. Her er HTML-strukturen for hver plante: Nøkkelelementer forklart: - Bruker class="plant-holder" for konsistent container-styling på tvers av alle planter - Setter class="plant" for felles bildefunksjon og oppførsel - Inkluderer unik id="plant1" for individuell posisjonering og JavaScript-interaksjon - Gir beskrivende alt-tekst for skjermlesertilgjengelighet Legg nå til disse stilene i style.css-filen din: Hva disse stilene gjør: - Oppretter relativ posisjonering for planteholderen for å etablere kontekst for posisjonering - Setter hver planteholder til 13 % høyde, slik at alle planter får plass vertikalt uten rulling - Flytter holderne litt mot venstre for bedre sentrering av plantene i beholderne - Tillater plantene å skalere responsivt med max-width og max-height - Bruker z-index for å legge plantene over andre elementer i terrariet - Legger til en subtil hover-effekt med CSS-overganger for bedre brukerinteraksjon ✅ Kritisk tenkning: Hvorfor trenger vi både .plant-holder og .plant velgere? Hva ville skjedd hvis vi bare brukte én? ## Forstå CSS-posisjonering CSS-posisjonering er som å være regi for et teaterstykke – du bestemmer hvor hver skuespiller står og hvordan de beveger seg på scenen. Noen følger standard formasjon, mens andre trenger spesiell plassering for dramatisk effekt. Når du forstår posisjonering, blir mange layoututfordringer håndterbare. Trenger du en navigasjonslinje som blir værende øverst mens brukeren blar? Posisjonering løser det. Vil du ha et verktøytips som dukker opp på et bestemt sted? Det er også posisjonering. ### De fem posisjonsverdiene ### Posisjonering i terrariet vårt Terrariet benytter en strategisk kombinasjon av posisjonstyper for det ønskede oppsettet: Forstå posisjoneringsstrategien: - Absolutte beholdere fjernes fra normal dokumentflyt og festes til skjermkanter - Relative planteholdere oppretter en posisjoneringskontekst samtidig som de forblir i dokumentflyten - Absolutte planter kan plasseres presist innenfor sine relative beholdere - Kombinasjonen lar plantene stables vertikalt samtidig som de kan posisjoneres individuelt ✅ Eksperimenter: Prøv å endre posisjonsverdiene og observer resultatene: - Hva skjer om du endrer .container fra absolute til relative? - Hvordan endres layouten hvis .plant-holder bruker absolute i stedet for relative? - Hva skjer når du bytter .plant til relative posisjonering? ### 🔄 Pedagogisk innsjekking CSS Posisjonering Mesterlig: Ta en pause for å verifisere forståelsen din: - ✅ Kan du forklare hvorfor planter trenger absolutt posisjonering for drag-and-drop? - ✅ Forstår du hvordan relative beholdere skaper posisjoneringskontekst? - ✅ Hvorfor bruker sidebeholderne absolutt posisjonering? - ✅ Hva ville skjedd hvis du fjernet alle posisjoneringsdeklarasjoner helt? Reell Verden Kobling: Tenk på hvordan CSS-posisjonering speiler reell verden layout: - Static: Bøker på en hylle (naturlig rekkefølge) - Relative: Flytte en bok litt men beholde plassen - Absolute: Plassere et bokmerke på en eksakt sidenummer - Fixed: En klistrelapp som forblir synlig mens du blar sider ## Bygge Terrariet med CSS Nå skal vi bygge en glasskrukke kun med CSS – ingen bilder eller grafikkprogrammer nødvendig. Å skape realistisk glass, skygger og dybdeeffekter ved å bruke posisjonering og transparens viser CSS sine visuelle muligheter. Denne teknikken speiler hvordan arkitekter innen Bauhaus-bevegelsen brukte enkle geometriske former for å lage komplekse, vakre strukturer. Når du forstår disse prinsippene, vil du kjenne igjen CSS-teknikkene bak mange nettdesign. ### Lage Komponentene til Glasskrukken La oss bygge terrarium-krukken bit for bit. Hver del bruker absolutt posisjonering og prosentbaserte størrelser for responsivt design: Forstå terrarium-konstruksjonen: - Bruker prosentbaserte dimensjoner for responsiv skalering på alle skjermstørrelser - Plasserer elementer absolutt for å stable og justere dem presist - Bruker ulike opasitetsverdier for å skape glasseffekten - Implementerer z-index lagring slik at planter vises inni krukken - Legger til subtile boksskygger og raffinert border-radius for mer realistisk utseende ### Responsivt Design med Prosenter Legg merke til at alle dimensjonene bruker prosenter i stedet for faste piksler: Hvorfor dette er viktig: - Sikrer at terrariet skaleres proporsjonalt på hvilken som helst skjermstørrelse - Opprettholder de visuelle forholdene mellom krukkens komponenter - Gir en konsekvent opplevelse fra mobiltelefoner til store stasjonære skjermer - Lar designen tilpasse seg uten å bryte layouten visuelt ### CSS-enheter i bruk Vi bruker rem-enheter for border-radius, som skalerer relativt til rot-fontstørrelsen. Dette skaper mer tilgjengelige design som respekterer brukerens fontpreferanser. Les mer om CSS relative units i den offisielle spesifikasjonen. ✅ Visuell eksperimentering: Prøv å endre disse verdiene og se effektene: - Endre jar-opasiteten fra 0.5 til 0.8 – hvordan påvirker det glassutseendet? - Juster jordfargen fra #3a241d til #8B4513 – hvilken visuell effekt får det? - Endre z-index for jorden til 2 – hva skjer med lagringen? ### 🔄 Pedagogisk innsjekking Forståelse av visuell CSS-design: Bekreft forståelsen din av visuell CSS: - ✅ Hvordan skaper prosentbaserte dimensjoner responsiv design? - ✅ Hvorfor skaper opasitet glasseffekten? - ✅ Hvilken rolle spiller z-index i lagdelingen? - ✅ Hvordan skaper border-radius verdiene krukkeformen? Designprinsipp: Legg merke til hvordan vi bygger komplekse visuelle elementer fra enkle former: 1. Rektangler → Avrundede rektangler → Krukkekomponenter 2. Flate farger → Opasitet → Glasseffekt 3. Individuelle elementer → Lagvis sammensetning → 3D-utseende --- ## GitHub Copilot Agent Challenge 🚀 Bruk Agent-modus for å fullføre denne utfordringen: Beskrivelse: Lag en CSS-animasjon som får terrariumplantene til å svaie forsiktig fram og tilbake, som en naturlig bris. Dette hjelper deg å praktisere CSS-animasjoner, transformasjoner og keyframes samtidig som terrariet ditt får liv. Oppgave: Legg til CSS keyframe-animasjoner for å få plantene i terrariet til å svaie forsiktig fra side til side. Lag en svingende animasjon som roterer hver plante svakt (2-3 grader) til venstre og høyre med en varighet på 3-4 sekunder, og anvend den på .plant-klassen. Sørg for at animasjonen går i loop og har en easing-funksjon for naturlig bevegelse. Les mer om agent mode her. ## 🚀 Utfordring: Legge til Glassrefleksjoner Klar for å forbedre terrariet med realistiske glassrefleksjoner? Denne teknikken tilfører dybde og realisme til designen. Du skal lage subtile høylys som simulerer hvordan lys reflekteres på glassoverflater. Denne tilnærmingen ligner på hvordan renessanse-malere som Jan van Eyck brukte lys og refleksjon for å få malt glass til å virke tredimensjonalt. Slik skal det bli: Din utfordring: - Lag subtile hvite eller lyse ovale former for glassrefleksjonene - Plasser dem strategisk på venstre side av krukken - Bruk passende opasitet og uskarphetseffekter for realistisk lysrefleksjon - Bruk border-radius for å lage organiske, boblelignende former - Eksperimenter med graderinger eller boksskygger for forbedret realisme ## Quiz etter forelesning Quiz etter forelesning ## Utvid Dine CSS-Kunnskaper CSS kan virke komplekst i starten, men når du forstår disse kjerneprinsippene får du et solid grunnlag for mer avanserte teknikker. Dine neste CSS-læringsområder: - Flexbox - forenkler justering og distribusjon av elementer - CSS Grid - kraftige verktøy for å lage komplekse layouter - CSS Variabler - reduserer gjentakelse og forbedrer vedlikehold - Responsivt design - sikrer at nettsider fungerer godt på ulike skjermstørrelser ### Interaktive læringsressurser Prøv disse konsepter med engasjerende, praktiske spill: - 🐸 Flexbox Froggy - Mestre Flexbox gjennom morsomme utfordringer - 🌱 Grid Garden - Lær CSS Grid ved å dyrke virtuelle gulrøtter - 🎯 CSS Battle - Test dine CSS-ferdigheter med kodingsutfordringer ### Ytterligere læring For en omfattende innføring i CSS-fundamenter, fullfør denne Microsoft Learn-modulen: Style your HTML app with CSS ### ⚡ Hva du kan gjøre på de neste 5 minuttene - [ ] Åpne DevTools og inspiser CSS-stiler på en nettside via Elements-panelet - [ ] Lag en enkel CSS-fil og koble den til en HTML-side - [ ] Prøv å endre farger med forskjellige metoder: hex, RGB og navngitte farger - [ ] Øv på boksen-modellen ved å legge til padding og margin på en div ### 🎯 Hva du kan oppnå denne timen - [ ] Fullfør quiz etter leksjonen og gå gjennom CSS-fundamenter - [ ] Style HTML-siden din med fonter, farger og marger - [ ] Lag en enkel layout med flexbox eller grid - [ ] Eksperimenter med CSS-overganger for myke effekter - [ ] Øv på responsivt design med medieforespørsler ### 📅 Din uke-lange CSS-reise - [ ] Fullfør terrarium-styling-oppgaven med kreativitet - [ ] Mestre CSS Grid ved å bygge en fotogalleri-layout - [ ] Lær CSS-animasjoner for å bringe designene til liv - [ ] Utforsk CSS preprocessors som Sass eller Less - [ ] Studer designprinsipper og bruk dem i CSS - [ ] Analyser og gjenskap interessante design du finner på nettet ### 🌟 Din månedslange designmestring - [ ] Bygg et komplett responsivt nettside-designsystem - [ ] Lær CSS-in-JS eller utility-first rammeverk som Tailwind - [ ] Bidra til open source-prosjekter med CSS-forbedringer - [ ] Mestre avanserte CSS-konsepter som CSS egendefinerte egenskaper og containment - [ ] Lag gjenbrukbare komponentbiblioteker med modulær CSS - [ ] Veilede andre som lærer CSS og del designkunnskap ## 🎯 Din CSS-mestringstidslinje ### 🛠️ Din CSS-verktøykasse Oppsummering Etter å ha fullført denne leksjonen har du nå: - Cascade-forståelse: Hvordan stiler arves og overstyres - Selector-mesterlig: Presis målretting med elementer, klasser og IDer - Posisjoneringsferdigheter: Strategisk plassering og lagdeling av elementer - Visuell design: Lage glasseffekter, skygger og transparens - Responsive teknikker: Prosentbaserte layouter som tilpasser seg alle skjermer - Kodeorganisering: Ren, vedlikeholdbar CSS-struktur - Moderne praksis: Bruk av relative enheter og tilgjengelige designmønstre Neste steg: Terrariet ditt har nå både struktur (HTML) og stil (CSS). Den siste leksjonen legger til interaktivitet med JavaScript! ## Oppgave CSS Refaktorering --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Ansvarsfraskrivelse: Dette dokumentet er oversatt ved bruk av AI-oversettelsestjenesten Co-op Translator. Selv om vi streber etter nøyaktighet, må du være klar over at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det opprinnelige dokumentet på originalspråket skal betraktes som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 1: HTML ਦਾ ਪਰਿਚਯ
HTML, ਜਾਂ HyperText Markup Language, ਹਰ ਵੈਬਸਾਈਟ ਦੀ ਬੁਨਿਆਦ ਹੈ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਕਦੇ ਵੀ ਵੇਖਿਆ ਹੈ। HTML ਨੂੰ ਵੈਬ ਪੇਜਾਂ ਦੇ ਢਾਂਚੇ ਦੇ ਤੌਰ 'ਤੇ ਸੋਚੋ - ਇਹ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਸਮੱਗਰੀ ਕਿੱਥੇ ਜਾਂਦੀ ਹੈ, ਇਹ ਕਿਵੇਂ ਸੰਗਠਿਤ ਹੈ, ਅਤੇ ਹਰ ਹਿੱਸਾ ਕੀ ਦਰਸਾਉਂਦਾ ਹੈ। ਜਦ CSS ਤੁਹਾਡੇ HTML ਨੂੰ ਰੰਗਾਂ ਅਤੇ ਲੇਆਉਟ ਨਾਲ "ਸਜਾਉਣ" ਲਈ ਆਵੇਗਾ, ਅਤੇ JavaScript ਇਸਨੂੰ ਇੰਟਰਐਕਟਿਵਿਟੀ ਨਾਲ ਜ਼ਿੰਦਾ ਕਰੇਗਾ, HTML ਉਹ ਅਹਿਮ ਢਾਂਚਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਬਾਕੀ ਸਭ ਕੁਝ ਸੰਭਵ ਬਣਾਉਂਦਾ ਹੈ। ਇਸ ਪਾਠ ਵਿੱਚ, ਤੁਸੀਂ ਇੱਕ ਵਰਚੁਅਲ ਟੈਰੀਰੀਅਮ ਇੰਟਰਫੇਸ ਲਈ HTML ਢਾਂਚਾ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹੋ। ਇਹ ਹੱਥ-ਅਨੁਭਵ ਪ੍ਰੋਜੈਕਟ ਤੁਹਾਨੂੰ ਮੁੱਢਲੇ HTML ਸੰਕਲਪ ਸਿਖਾਏਗਾ ਜਦੋਂ ਤੁਸੀਂ ਕੁਝ ਦ੍ਰਿਸ਼ਮਾਨ ਤੌਰ 'ਤੇ ਆਕਰਸ਼ਕ ਬਣਾਉਂਦੇ ਹੋ। ਤੁਸੀਂ ਸੈਮਾਂਟਿਕ ਐਲਿਮੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਮੱਗਰੀ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ, ਚਿੱਤਰਾਂ ਨਾਲ ਕੰਮ ਕਰਨ, ਅਤੇ ਇੱਕ ਇੰਟਰਐਕਟਿਵ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਬੁਨਿਆਦ ਬਣਾਉਣ ਦੇ ਬਾਰੇ ਸਿੱਖੋਗੇ। ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਕੰਮ ਕਰਨ ਵਾਲਾ HTML ਪੇਜ ਹੋਵੇਗਾ ਜੋ ਪੌਦਿਆਂ ਦੇ ਚਿੱਤਰਾਂ ਨੂੰ ਸੰਗਠਿਤ ਕਾਲਮਾਂ ਵਿੱਚ ਦਰਸਾਉਂਦਾ ਹੈ, ਅਗਲੇ ਪਾਠ ਵਿੱਚ ਸਟਾਈਲਿੰਗ ਲਈ ਤਿਆਰ। ਚਿੰਤਾ ਨਾ ਕਰੋ ਜੇ ਇਹ ਸ਼ੁਰੂ ਵਿੱਚ ਬੁਨਿਆਦੀ ਲੱਗਦਾ ਹੈ - ਇਹੀ HTML ਦਾ ਕੰਮ ਹੈ CSS ਦੇ ਵਿਜ਼ੁਅਲ ਪੋਲਿਸ਼ ਸ਼ਾਮਲ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ। ## ਪਾਠ-ਪਹਿਲਾਂ ਕਵਿਜ਼ ਪਾਠ-ਪਹਿਲਾਂ ਕਵਿਜ਼ ## ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਸੈਟ ਅੱਪ ਕਰਨਾ HTML ਕੋਡ ਵਿੱਚ ਡੁੱਬਣ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਲਈ ਇੱਕ ਢੰਗ ਵਾਲਾ ਵਰਕਸਪੇਸ ਸੈਟ ਅੱਪ ਕਰੀਏ। ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਇੱਕ ਸੰਗਠਿਤ ਫਾਈਲ ਢਾਂਚਾ ਬਣਾਉਣਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਆਦਤ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ ਵੈਬ ਵਿਕਾਸ ਯਾਤਰਾ ਦੌਰਾਨ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੇਵਾ ਦੇਵੇਗੀ। ### ਕੰਮ: ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਢਾਂਚੇ ਨੂੰ ਬਣਾਓ ਤੁਸੀਂ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਲਈ ਇੱਕ ਸਮਰਪਿਤ ਫੋਲਡਰ ਬਣਾਓਗੇ ਅਤੇ ਆਪਣੀ ਪਹਿਲੀ HTML ਫਾਈਲ ਸ਼ਾਮਲ ਕਰੋਗੇ। ਇੱਥੇ ਦੋ ਪਹੁੰਚਾਂ ਹਨ ਜੋ ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ: ਵਿਕਲਪ 1: Visual Studio Code ਦੀ ਵਰਤੋਂ ਕਰਨਾ 1. Visual Studio Code ਖੋਲ੍ਹੋ 2. "File" → "Open Folder" 'ਤੇ ਕਲਿਕ ਕਰੋ ਜਾਂ Ctrl+K, Ctrl+O (Windows/Linux) ਜਾਂ Cmd+K, Cmd+O (Mac) ਦੀ ਵਰਤੋਂ ਕਰੋ 3. terrarium ਨਾਮਕ ਇੱਕ ਨਵਾਂ ਫੋਲਡਰ ਬਣਾਓ ਅਤੇ ਇਸਨੂੰ ਚੁਣੋ 4. Explorer ਪੈਨ ਵਿੱਚ, "New File" ਆਈਕਨ 'ਤੇ ਕਲਿਕ ਕਰੋ 5. ਆਪਣੀ ਫਾਈਲ ਨੂੰ index.html ਨਾਮ ਦਿਓ ਵਿਕਲਪ 2: ਟਰਮੀਨਲ ਕਮਾਂਡ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਇਹ ਕਮਾਂਡ ਕੀ ਕਰਦੀਆਂ ਹਨ: - ਨਵਾਂ ਡਾਇਰੈਕਟਰੀ terrarium ਬਣਾਉਂਦਾ ਹੈ - ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਜਾਂਦਾ ਹੈ - ਖਾਲੀ index.html ਫਾਈਲ ਬਣਾਉਂਦਾ ਹੈ - Visual Studio Code ਵਿੱਚ ਫਾਈਲ ਖੋਲ੍ਹਦਾ ਹੈ ਸੰਪਾਦਨ ਲਈ ## HTML ਦਸਤਾਵੇਜ਼ ਢਾਂਚੇ ਨੂੰ ਸਮਝਣਾ ਹਰ HTML ਦਸਤਾਵੇਜ਼ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਢਾਂਚੇ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ ਜਿਸਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸਮਝਣ ਅਤੇ ਦਰਸਾਉਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਸ ਢਾਂਚੇ ਨੂੰ ਇੱਕ ਅਧਿਕਾਰਤ ਚਿੱਠੀ ਵਾਂਗ ਸੋਚੋ - ਇਸ ਵਿੱਚ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਕ੍ਰਮ ਵਿੱਚ ਲੋੜੀਂਦੇ ਤੱਤ ਹੁੰਦੇ ਹਨ ਜੋ ਪ੍ਰਾਪਤਕਰਤਾ (ਇਸ ਮਾਮਲੇ ਵਿੱਚ, ਬ੍ਰਾਊਜ਼ਰ) ਨੂੰ ਸਮੱਗਰੀ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਕਿਰਿਆ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ। ਆਓ ਅਹਿਮ ਬੁਨਿਆਦ ਸ਼ਾਮਲ ਕਰਕੇ ਸ਼ੁਰੂ ਕਰੀਏ ਜੋ ਹਰ HTML ਦਸਤਾਵੇਜ਼ ਨੂੰ ਲੋੜੀਂਦੀ ਹੈ। ### DOCTYPE ਡਿਕਲੇਰੇਸ਼ਨ ਅਤੇ ਰੂਟ ਐਲਿਮੈਂਟ ਕਿਸੇ ਵੀ HTML ਫਾਈਲ ਦੀ ਪਹਿਲੀ ਦੋ ਲਾਈਨਾਂ ਦਸਤਾਵੇਜ਼ ਦਾ "ਪ੍ਰਸਤਾਵ" ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਦਿੰਦੇ ਹਨ: ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ: - ਦਸਤਾਵੇਜ਼ ਦੀ ਕਿਸਮ HTML5 ਦੇ ਤੌਰ 'ਤੇ <!DOCTYPE html> ਨਾਲ ਘੋਸ਼ਿਤ ਕਰਦਾ ਹੈ - ਰੂਟ <html> ਐਲਿਮੈਂਟ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਸਾਰੀ ਪੇਜ ਸਮੱਗਰੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰੇਗਾ - ਆਧੁਨਿਕ ਵੈਬ ਮਿਆਰਾਂ ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ ਸਹੀ ਬ੍ਰਾਊਜ਼ਰ ਰੈਂਡਰਿੰਗ ਲਈ - ਵੱਖ-ਵੱਖ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਸਥਿਰ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ### 🔄 ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ ਵਿਰਾਮ ਲਓ ਅਤੇ ਵਿਚਾਰ ਕਰੋ: ਅੱਗੇ ਵਧਣ ਤੋਂ ਪਹਿਲਾਂ, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ: - ✅ ਕਿਉਂ ਹਰ HTML ਦਸਤਾਵੇਜ਼ ਨੂੰ DOCTYPE ਡਿਕਲੇਰੇਸ਼ਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ - ✅ <html> ਰੂਟ ਐਲਿਮੈਂਟ ਵਿੱਚ ਕੀ ਸ਼ਾਮਲ ਹੁੰਦਾ ਹੈ - ✅ ਇਹ ਢਾਂਚਾ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਪੇਜਾਂ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਰੈਂਡਰ ਕਰਨ ਵਿੱਚ ਕਿਵੇਂ ਮਦਦ ਕਰਦਾ ਹੈ ਤੁਰੰਤ ਸਵੈ-ਪਰੀਖਣ: ਕੀ ਤੁਸੀਂ ਆਪਣੇ ਸ਼ਬਦਾਂ ਵਿੱਚ "ਮਿਆਰ-ਅਨੁਕੂਲ ਰੈਂਡਰਿੰਗ" ਦਾ ਮਤਲਬ ਸਮਝਾ ਸਕਦੇ ਹੋ? ## ਅਹਿਮ ਦਸਤਾਵੇਜ਼ ਮੈਟਾਡੇਟਾ ਸ਼ਾਮਲ ਕਰਨਾ HTML ਦਸਤਾਵੇਜ਼ ਦਾ <head> ਭਾਗ ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਜਿਸਦੀ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਖੋਜ ਇੰਜਣਾਂ ਨੂੰ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਪਰ ਜੋ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਪੇਜ 'ਤੇ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦੀ। ਇਸਨੂੰ "ਪਿੱਛੇ-ਦ੍ਰਿਸ਼" ਜਾਣਕਾਰੀ ਵਾਂਗ ਸੋਚੋ ਜੋ ਤੁਹਾਡੇ ਵੈਬਪੇਜ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਨ ਅਤੇ ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ ਅਤੇ ਪਲੇਟਫਾਰਮਾਂ 'ਤੇ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਗਟ ਹੋਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ। ਇਹ ਮੈਟਾਡੇਟਾ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਪੇਜ ਨੂੰ ਕਿਵੇਂ ਦਰਸਾਉਣਾ ਹੈ, ਕਿਹੜੀ ਕਿਰਦਾਰ ਕੋਡਿੰਗ ਵਰਤਣੀ ਹੈ, ਅਤੇ ਵੱਖ-ਵੱਖ ਸਕਰੀਨ ਆਕਾਰਾਂ ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਣਾ ਹੈ - ਪੇਸ਼ੇਵਰ, ਪਹੁੰਚਯੋਗ ਵੈਬ ਪੇਜ ਬਣਾਉਣ ਲਈ ਸਾਰਾ ਕੁਝ ਜ਼ਰੂਰੀ। ### ਕੰਮ: ਦਸਤਾਵੇਜ਼ ਹੈਡ ਸ਼ਾਮਲ ਕਰੋ ਆਪਣੇ <html> ਟੈਗਾਂ ਦੇ ਖੁਲ੍ਹਣ ਅਤੇ ਬੰਦ ਕਰਨ ਦੇ ਵਿਚਕਾਰ ਇਹ <head> ਭਾਗ ਸ਼ਾਮਲ ਕਰੋ: ਹਰ ਤੱਤ ਕੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ: - ਪੇਜ ਦਾ ਸਿਰਲੇਖ ਸੈਟ ਕਰਦਾ ਹੈ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬਾਂ ਅਤੇ ਖੋਜ ਨਤੀਜਿਆਂ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ - UTF-8 ਕਿਰਦਾਰ ਕੋਡਿੰਗ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਵਿਸ਼ਵਵਿਆਪੀ ਟੈਕਸਟ ਪ੍ਰਦਰਸ਼ਨ ਲਈ - Internet Explorer ਦੇ ਆਧੁਨਿਕ ਵਰਜਨਾਂ ਨਾਲ ਅਨੁਕੂਲਤਾ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ - ਵਿਊਪੋਰਟ ਨੂੰ ਡਿਵਾਈਸ ਚੌੜਾਈ ਨਾਲ ਮੇਲ ਕਰਨ ਲਈ ਸੰਰਚਿਤ ਕਰਦਾ ਹੈ - ਸ਼ੁਰੂਆਤੀ ਜ਼ੂਮ ਪੱਧਰ ਨੂੰ ਕੰਟ੍ਰੋਲ ਕਰਦਾ ਹੈ ਸਮੱਗਰੀ ਨੂੰ ਕੁਦਰਤੀ ਆਕਾਰ 'ਤੇ ਦਰਸਾਉਣ ਲਈ ## ਦਸਤਾਵੇਜ਼ ਬਾਡੀ ਬਣਾਉਣਾ HTML ਦੇ ਬਾਕੀ ਹਿੱਸੇ ਅਤੇ ਟੈਰੀਰੀਅਮ ਸੰਬੰਧੀ ਸਮੱਗਰੀ ਲਈ ਅਗਲੇ ਹਿੱਸੇ ਵਿੱਚ ਜਾਰੀ ਰੱਖੋ। - ਵੱਖ ਵੱਖ ਹਿੱਸਿਆਂ ਨੂੰ ਹਰ ਵਿਜੁਅਲ ਕੰਪੋਨੈਂਟ ਲਈ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ (ਉਪਰਲਾ ਹਿੱਸਾ, ਕੰਧਾਂ, ਮਿੱਟੀ, ਹੇਠਲਾ ਹਿੱਸਾ) - ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ਗਲਾਸ ਰਿਫਲੈਕਸ਼ਨ ਪ੍ਰਭਾਵਾਂ ਲਈ ਨੇਸਟਡ ਐਲਿਮੈਂਟਸ (ਚਮਕਦਾਰ ਹਿੱਸੇ) - ਵਰਤਦਾ ਹੈ ਵਰਣਨਾਤਮਕ ਕਲਾਸ ਨਾਮ ਜੋ ਹਰ ਹਿੱਸੇ ਦੇ ਉਦੇਸ਼ ਨੂੰ ਸਪਸ਼ਟ ਕਰਦੇ ਹਨ - ਤਿਆਰ ਕਰਦਾ ਹੈ ਢਾਂਚਾ CSS ਸਟਾਈਲਿੰਗ ਲਈ ਜੋ ਗਲਾਸ ਟੈਰੀਰੀਅਮ ਦੀ ਦਿੱਖ ਬਣਾਏਗਾ ### 🔄 ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ HTML ਢਾਂਚਾ ਮਾਹਰਤਾ: ਅੱਗੇ ਵਧਣ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਕਰ ਸਕਦੇ ਹੋ: - ✅ HTML ਢਾਂਚੇ ਅਤੇ ਵਿਜੁਅਲ ਦਿੱਖ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ ਦੀ ਵਿਆਖਿਆ ਕਰੋ - ✅ ਸੈਮੈਂਟਿਕ ਅਤੇ ਗੈਰ-ਸੈਮੈਂਟਿਕ HTML ਐਲਿਮੈਂਟਸ ਦੀ ਪਛਾਣ ਕਰੋ - ✅ ਵਿਆਖਿਆ ਕਰੋ ਕਿ ਸਹੀ ਮਾਰਕਅੱਪ ਕਿਵੇਂ ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਲਾਭ ਪਹੁੰਚਾਉਂਦਾ ਹੈ - ✅ ਪੂਰੇ ਦਸਤਾਵੇਜ਼ ਟ੍ਰੀ ਢਾਂਚੇ ਦੀ ਪਛਾਣ ਕਰੋ ਆਪਣੀ ਸਮਝ ਦੀ ਜਾਂਚ: ਆਪਣੀ HTML ਫਾਈਲ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ JavaScript ਬਿਨਾਂ ਅਤੇ CSS ਹਟਾ ਕੇ ਖੋਲ੍ਹਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਇਹ ਤੁਹਾਡੇ ਦੁਆਰਾ ਬਣਾਈ ਗਈ ਖਾਲੀ ਸੈਮੈਂਟਿਕ ਢਾਂਚਾ ਦਿਖਾਉਂਦਾ ਹੈ! --- ## GitHub Copilot Agent ਚੈਲੈਂਜ Agent ਮੋਡ ਵਰਤ ਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ: ਵੇਰਵਾ: ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਪੌਦੇ ਦੀ ਦੇਖਭਾਲ ਗਾਈਡ ਸੈਕਸ਼ਨ ਲਈ ਸੈਮੈਂਟਿਕ HTML ਢਾਂਚਾ ਬਣਾਓ। ਪ੍ਰੋੰਪਟ: ਇੱਕ ਸੈਮੈਂਟਿਕ HTML ਸੈਕਸ਼ਨ ਬਣਾਓ ਜਿਸ ਵਿੱਚ ਮੁੱਖ ਸਿਰਲੇਖ "ਪੌਦੇ ਦੀ ਦੇਖਭਾਲ ਗਾਈਡ", ਤਿੰਨ ਉਪ-ਸੈਕਸ਼ਨ "ਪਾਣੀ ਦੇਣ", "ਰੋਸ਼ਨੀ ਦੀਆਂ ਲੋੜਾਂ", ਅਤੇ "ਮਿੱਟੀ ਦੀ ਦੇਖਭਾਲ" ਦੇ ਸਿਰਲੇਖਾਂ ਨਾਲ ਹੋਵੇ, ਹਰ ਇੱਕ ਵਿੱਚ ਪੌਦੇ ਦੀ ਦੇਖਭਾਲ ਜਾਣਕਾਰੀ ਵਾਲਾ ਪੈਰਾ ਸ਼ਾਮਲ ਹੋਵੇ। ਸਮਰਥ HTML ਟੈਗ ਜਿਵੇਂ <section>, <h2>, <h3>, ਅਤੇ <p> ਵਰਤ ਕੇ ਸਮੱਗਰੀ ਨੂੰ ਢੰਗ ਨਾਲ ਢਾਂਚੇਬੱਧ ਕਰੋ। Agent ਮੋਡ ਬਾਰੇ ਹੋਰ ਜਾਣੋ ਇਥੇ। ## HTML ਇਤਿਹਾਸ ਚੈਲੈਂਜ ਵੈੱਬ ਵਿਕਾਸ ਬਾਰੇ ਸਿੱਖਣਾ HTML ਨੇ 1990 ਵਿੱਚ CERN ਵਿੱਚ Tim Berners-Lee ਦੁਆਰਾ ਪਹਿਲਾ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਬਣਾਉਣ ਤੋਂ ਬਾਅਦ ਕਾਫ਼ੀ ਤਰੱਕੀ ਕੀਤੀ ਹੈ। ਕੁਝ ਪੁਰਾਣੇ ਟੈਗ ਜਿਵੇਂ <marquee> ਹੁਣ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤੇ ਗਏ ਹਨ ਕਿਉਂਕਿ ਇਹ ਆਧੁਨਿਕ ਪਹੁੰਚਯੋਗਤਾ ਮਿਆਰਾਂ ਅਤੇ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਸਿਧਾਂਤਾਂ ਨਾਲ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਨਹੀਂ ਕਰਦੇ। ਇਹ ਤਜਰਬਾ ਕਰੋ: 1. ਅਸਥਾਈ ਤੌਰ 'ਤੇ ਆਪਣੇ <h1> ਸਿਰਲੇਖ ਨੂੰ <marquee> ਟੈਗ ਵਿੱਚ ਲਪੇਟੋ: <marquee><h1>My Terrarium</h1></marquee> 2. ਆਪਣਾ ਪੇਜ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ ਅਤੇ ਸਕ੍ਰੋਲਿੰਗ ਪ੍ਰਭਾਵ ਨੂੰ ਦੇਖੋ 3. ਸੋਚੋ ਕਿ ਇਹ ਟੈਗ ਕਿਉਂ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤਾ ਗਿਆ (ਸੁਝਾਅ: ਯੂਜ਼ਰ ਅਨੁਭਵ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਬਾਰੇ ਸੋਚੋ) 4. <marquee> ਟੈਗ ਨੂੰ ਹਟਾਓ ਅਤੇ ਸੈਮੈਂਟਿਕ ਮਾਰਕਅੱਪ 'ਤੇ ਵਾਪਸ ਜਾਓ ਚਿੰਤਨ ਪ੍ਰਸ਼ਨ: - ਸਕ੍ਰੋਲਿੰਗ ਸਿਰਲੇਖ ਵਿਜੁਅਲ ਅਪੰਗਤਾ ਜਾਂ ਮੋਸ਼ਨ ਸੰਵੇਦਨਸ਼ੀਲਤਾ ਵਾਲੇ ਯੂਜ਼ਰਾਂ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਭਾਵਿਤ ਕਰ ਸਕਦਾ ਹੈ? - ਕਿਹੜੀਆਂ ਆਧੁਨਿਕ CSS ਤਕਨੀਕਾਂ ਇਸੇ ਤਰ੍ਹਾਂ ਦੇ ਵਿਜੁਅਲ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਜ਼ਿਆਦਾ ਪਹੁੰਚਯੋਗ ਤਰੀਕੇ ਨਾਲ ਹਾਸਲ ਕਰ ਸਕਦੀਆਂ ਹਨ? - ਪੁਰਾਣੇ ਤੱਤਾਂ ਦੀ ਬਜਾਏ ਮੌਜੂਦਾ ਵੈੱਬ ਮਿਆਰਾਂ ਨੂੰ ਵਰਤਣਾ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ? ਪੁਰਾਣੇ ਅਤੇ ਡਿਪ੍ਰੀਕੇਟ HTML ਐਲਿਮੈਂਟਸ ਬਾਰੇ ਹੋਰ ਪੜ੍ਹੋ ਤਾਂ ਜੋ ਸਮਝ ਸਕੋ ਕਿ ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ ਯੂਜ਼ਰ ਅਨੁਭਵ ਨੂੰ ਸੁਧਾਰਨ ਲਈ ਵੈੱਬ ਮਿਆਰ ਕਿਵੇਂ ਤਰੱਕੀ ਕਰਦੇ ਹਨ। ## ਪਾਠ-ਪ੍ਰਵਚਨ ਕਵਿਜ਼ ਪਾਠ-ਪ੍ਰਵਚਨ ਕਵਿਜ਼ ## ਸਮੀਖਿਆ ਅਤੇ ਸਵੈ ਅਧਿਐਨ HTML ਬਾਰੇ ਆਪਣਾ ਗਿਆਨ ਵਧਾਓ HTML ਪਿਛਲੇ 30 ਸਾਲਾਂ ਤੋਂ ਵੈੱਬ ਦਾ ਅਧਾਰ ਰਿਹਾ ਹੈ, ਜੋ ਇੱਕ ਸਧਾਰਨ ਦਸਤਾਵੇਜ਼ ਮਾਰਕਅੱਪ ਭਾਸ਼ਾ ਤੋਂ ਇੰਟਰਐਕਟਿਵ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਇੱਕ ਸੁਧਾਰਤ ਪਲੇਟਫਾਰਮ ਵਿੱਚ ਤਰੱਕੀ ਕਰ ਰਿਹਾ ਹੈ। ਇਸ ਤਰੱਕੀ ਨੂੰ ਸਮਝਣ ਨਾਲ ਤੁਹਾਨੂੰ ਆਧੁਨਿਕ ਵੈੱਬ ਮਿਆਰਾਂ ਦੀ ਕਦਰ ਕਰਨ ਵਿੱਚ ਮਦਦ ਮਿਲਦੀ ਹੈ ਅਤੇ ਵਧੀਆ ਵਿਕਾਸ ਫੈਸਲੇ ਲੈਣ ਵਿੱਚ ਸਹਾਇਤਾ ਮਿਲਦੀ ਹੈ। ਸਿਫਾਰਸ਼ੀ ਸਿੱਖਣ ਦੇ ਰਾਹ: 1. HTML ਇਤਿਹਾਸ ਅਤੇ ਤਰੱਕੀ - HTML 1.0 ਤੋਂ HTML5 ਤੱਕ ਟਾਈਮਲਾਈਨ ਦੀ ਖੋਜ ਕਰੋ - ਪਤਾ ਕਰੋ ਕਿ ਕੁਝ ਟੈਗ ਕਿਉਂ ਡਿਪ੍ਰੀਕੇਟ ਕੀਤੇ ਗਏ (ਪਹੁੰਚਯੋਗਤਾ, ਮੋਬਾਈਲ-ਫ੍ਰੈਂਡਲੀਨੈਸ, ਰੱਖ-ਰਖਾਅ) - ਉਭਰ ਰਹੀਆਂ HTML ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਪ੍ਰਸਤਾਵਾਂ ਦੀ ਜਾਂਚ ਕਰੋ 2. ਸੈਮੈਂਟਿਕ HTML ਡੀਪ ਡਾਈਵ - HTML5 ਸੈਮੈਂਟਿਕ ਐਲਿਮੈਂਟਸ ਦੀ ਪੂਰੀ ਸੂਚੀ ਦਾ ਅਧਿਐਨ ਕਰੋ - ਪਛਾਣ ਕਰਨ ਦੀ ਅਭਿਆਸ ਕਰੋ ਕਿ <article>, <section>, <aside>, ਅਤੇ <main> ਕਦੋਂ ਵਰਤਣਾ ਹੈ - ਵਧੇਰੇ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ARIA ਗੁਣਾਂ ਬਾਰੇ ਸਿੱਖੋ 3. ਆਧੁਨਿਕ ਵੈੱਬ ਵਿਕਾਸ - ਰਿਸਪਾਂਸਿਵ ਵੈੱਬਸਾਈਟ ਬਣਾਉਣ ਬਾਰੇ Microsoft Learn 'ਤੇ ਖੋਜ ਕਰੋ - ਸਮਝੋ ਕਿ HTML CSS ਅਤੇ JavaScript ਨਾਲ ਕਿਵੇਂ ਇੰਟਿਗ੍ਰੇਟ ਹੁੰਦਾ ਹੈ - ਵੈੱਬ ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ SEO ਬਿਹਤਰ ਤਰੀਕਿਆਂ ਬਾਰੇ ਸਿੱਖੋ ਚਿੰਤਨ ਪ੍ਰਸ਼ਨ: - ਤੁਸੀਂ ਕਿਹੜੇ ਡਿਪ੍ਰੀਕੇਟ HTML ਟੈਗ ਪਤਾ ਲਗਾਏ, ਅਤੇ ਉਹ ਕਿਉਂ ਹਟਾਏ ਗਏ? - HTML ਦੇ ਭਵਿੱਖ ਦੇ ਵਰਜਨਾਂ ਲਈ ਕਿਹੜੀਆਂ ਨਵੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਪ੍ਰਸਤਾਵਿਤ ਕੀਤੀਆਂ ਜਾ ਰਹੀਆਂ ਹਨ? - ਸੈਮੈਂਟਿਕ HTML ਵੈੱਬ ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ SEO ਵਿੱਚ ਕਿਵੇਂ ਯੋਗਦਾਨ ਪਾਉਂਦਾ ਹੈ? ### ⚡ ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਕਰ ਸਕਦੇ ਹੋ - [ ] DevTools (F12) ਖੋਲ੍ਹੋ ਅਤੇ ਆਪਣੇ ਮਨਪਸੰਦ ਵੈੱਬਸਾਈਟ ਦੇ HTML ਢਾਂਚੇ ਦੀ ਜਾਂਚ ਕਰੋ - [ ] ਬੁਨਿਆਦੀ ਟੈਗਾਂ ਨਾਲ ਇੱਕ ਸਧਾਰਨ HTML ਫਾਈਲ ਬਣਾਓ: <h1>, <p>, ਅਤੇ <img> - [ ] W3C HTML Validator ਆਨਲਾਈਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੀ HTML ਦੀ ਵੈਧਤਾ ਦੀ ਜਾਂਚ ਕਰੋ - [ ] <!-- comment --> ਵਰਤ ਕੇ ਆਪਣੀ HTML ਵਿੱਚ ਇੱਕ ਟਿੱਪਣੀ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ### 🎯 ਇਸ ਘੰਟੇ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ - [ ] ਪਾਠ-ਪ੍ਰਵਚਨ ਕਵਿਜ਼ ਪੂਰਾ ਕਰੋ ਅਤੇ ਸੈਮੈਂਟਿਕ HTML ਸੰਕਲਪਾਂ ਦੀ ਸਮੀਖਿਆ ਕਰੋ - [ ] ਸਹੀ HTML ਢਾਂਚੇ ਨਾਲ ਆਪਣੇ ਬਾਰੇ ਇੱਕ ਸਧਾਰਨ ਵੈੱਬਪੇਜ ਬਣਾਓ - [ ] ਵੱਖ-ਵੱਖ ਸਿਰਲੇਖ ਪੱਧਰ ਅਤੇ ਟੈਕਸਟ ਫਾਰਮੈਟਿੰਗ ਟੈਗਾਂ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ - [ ] ਮਲਟੀਮੀਡੀਆ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਦਾ ਅਭਿਆਸ ਕਰਨ ਲਈ ਚਿੱਤਰ ਅਤੇ ਲਿੰਕ ਸ਼ਾਮਲ ਕਰੋ - [ ] HTML5 ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਬਾਰੇ ਖੋਜ ਕਰੋ ਜੋ ਤੁਸੀਂ ਅਜੇ ਤੱਕ ਨਹੀਂ ਅਜ਼ਮਾਈਆਂ ਹਨ ### 📅 ਤੁਹਾਡਾ ਹਫਤਾਵਾਰ HTML ਯਾਤਰਾ - [ ] ਸੈਮੈਂਟਿਕ ਮਾਰਕਅੱਪ ਨਾਲ ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਅਸਾਈਨਮੈਂਟ ਪੂਰਾ ਕਰੋ - [ ] ARIA ਲੇਬਲ ਅਤੇ ਰੋਲ ਵਰਤ ਕੇ ਇੱਕ ਪਹੁੰਚਯੋਗ ਵੈੱਬਪੇਜ ਬਣਾਓ - [ ] ਵੱਖ-ਵੱਖ ਇਨਪੁਟ ਕਿਸਮਾਂ ਨਾਲ ਫਾਰਮ ਬਣਾਉਣ ਦਾ ਅਭਿਆਸ ਕਰੋ - [ ] HTML5 APIs ਜਿਵੇਂ localStorage ਜਾਂ geolocation ਦੀ ਖੋਜ ਕਰੋ - [ ] ਰਿਸਪਾਂਸਿਵ HTML ਪੈਟਰਨ ਅਤੇ ਮੋਬਾਈਲ-ਪਹਿਲੇ ਡਿਜ਼ਾਈਨ ਦੀ ਖੋਜ ਕਰੋ - [ ] ਹੋਰ ਡਿਵੈਲਪਰਾਂ ਦੇ HTML ਕੋਡ ਦੀ ਸਮੀਖਿਆ ਕਰੋ ਅਤੇ ਵਧੀਆ ਤਰੀਕਿਆਂ ਦੀ ਪਛਾਣ ਕਰੋ ### 🌟 ਤੁਹਾਡਾ ਮਹੀਨਾਵਾਰ ਵੈੱਬ ਫਾਊਂਡੇਸ਼ਨ - [ ] ਆਪਣੀ HTML ਮਾਹਰਤਾ ਦਿਖਾਉਣ ਵਾਲੀ ਪੋਰਟਫੋਲਿਓ ਵੈੱਬਸਾਈਟ ਬਣਾਓ - [ ] Handlebars ਵਰਗੇ ਫਰੇਮਵਰਕ ਨਾਲ HTML ਟੈਂਪਲੇਟਿੰਗ ਸਿੱਖੋ - [ ] HTML ਦਸਤਾਵੇਜ਼ੀकरण ਨੂੰ ਸੁਧਾਰ ਕੇ ਖੁੱਲ੍ਹੇ ਸਰੋਤ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਓ - [ ] ਕਸਟਮ ਐਲਿਮੈਂਟਸ ਵਰਗੇ ਉੱਚ HTML ਸੰਕਲਪਾਂ ਵਿੱਚ ਮਾਹਰ ਬਣੋ - [ ] CSS ਫਰੇਮਵਰਕ ਅਤੇ JavaScript ਲਾਇਬ੍ਰੇਰੀਜ਼ ਨਾਲ HTML ਨੂੰ ਇੰਟਿਗ੍ਰੇਟ ਕਰੋ - [ ] HTML ਬੁਨਿਆਦੀਆਂ ਸਿੱਖਣ ਵਾਲਿਆਂ ਨੂੰ ਮਦਦ ਦਿਓ ## 🎯 ਤੁਹਾਡਾ HTML ਮਾਹਰਤਾ ਟਾਈਮਲਾਈਨ ### 🛠️ ਤੁਹਾਡਾ HTML ਟੂਲਕਿਟ ਸਾਰ ਇਹ ਪਾਠ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਹੁਣ ਤੁਹਾਡੇ ਕੋਲ ਹੈ: - ਦਸਤਾਵੇਜ਼ ਢਾਂਚਾ: ਸਹੀ DOCTYPE ਨਾਲ ਪੂਰੀ HTML5 ਬੁਨਿਆਦ - ਸੈਮੈਂਟਿਕ ਮਾਰਕਅੱਪ: ਅਰਥਪੂਰਨ ਟੈਗ ਜੋ ਪਹੁੰਚਯੋਗਤਾ ਅਤੇ SEO ਨੂੰ ਵਧਾਉਂਦੇ ਹਨ - ਚਿੱਤਰ ਇੰਟੀਗ੍ਰੇਸ਼ਨ: ਸਹੀ ਫਾਈਲ ਸੰਗਠਨ ਅਤੇ alt ਟੈਕਸਟ ਅਭਿਆਸ - ਲੇਆਉਟ ਕੰਟੇਨਰ: ਵਰਣਨਾਤਮਕ ਕਲਾਸ ਨਾਮਾਂ ਨਾਲ divs ਦੀ ਰਣਨੀਤਿਕ ਵਰਤੋਂ - ਪਹੁੰਚਯੋਗਤਾ ਜਾਗਰੂਕਤਾ: ਸਕ੍ਰੀਨ ਰੀਡਰ ਨੈਵੀਗੇਸ਼ਨ ਦੀ ਸਮਝ - ਆਧੁਨਿਕ ਮਿਆਰ: ਮੌਜੂਦਾ HTML5 ਅਭਿਆਸ ਅਤੇ ਡਿਪ੍ਰੀਕੇਟ ਟੈਗਾਂ ਦਾ ਗਿਆਨ - ਪ੍ਰੋਜੈਕਟ ਬੁਨਿਆਦ: CSS ਸਟਾਈਲਿੰਗ ਅਤੇ JavaScript ਇੰਟਰਐਕਟਿਵਿਟੀ ਲਈ ਮਜ਼ਬੂਤ ਅਧਾਰ ਅਗਲੇ ਕਦਮ: ਤੁਹਾਡਾ HTML ਢਾਂਚਾ CSS ਸਟਾਈਲਿੰਗ ਲਈ ਤਿਆਰ ਹੈ! ਤੁਹਾਡੇ ਦੁਆਰਾ ਬਣਾਈ ਗਈ ਸੈਮੈਂਟਿਕ ਬੁਨਿਆਦ ਅਗਲੇ ਪਾਠ ਨੂੰ ਸਮਝਣ ਲਈ ਬਹੁਤ ਆਸਾਨ ਬਣਾਏਗੀ। ## ਅਸਾਈਨਮੈਂਟ ਆਪਣੀ HTML ਦਾ ਅਭਿਆਸ ਕਰੋ: ਇੱਕ ਬਲੌਗ ਮੌਕਅੱਪ ਬਣਾਓ --- ਅਸਵੀਕਰਤੀ: ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦਾ ਯਤਨ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਅਸੀਂ ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
ਟੈਰੀਰੀਅਮ ਪ੍ਰੋਜੈਕਟ ਭਾਗ 2: CSS ਦਾ ਪਰਚੇਅ
ਤੁਹਾਨੂੰ ਯਾਦ ਹੈ ਕਿ ਤੁਹਾਡਾ HTML ਟੈਰੀਰੀਅਮ ਕਿੰਨਾ ਸਧਾਰਨ ਲੱਗ ਰਿਹਾ ਸੀ? CSS ਦੇ ਨਾਲ ਅਸੀਂ ਉਸ ਸਧਾਰਨ ਬਣਤਰ ਨੂੰ ਕੁਝ ਵਿਜੁਅਲ ਅਪੀਲ ਦੇਣ ਵਾਲੇ ਵਿੱਚ ਬਦਲ ਸਕਦੇ ਹਾਂ। ਜੇ HTML ਨੂੰ ਇੱਕ ਘਰ ਦੀ ਫਰੇਮ ਬਣਾਉਣ ਵਾਂਗ ਸਮਝਿਆ ਜਾਵੇ, ਤਾਂ CSS ਉਹ ਸਭ ਕੁਝ ਹੈ ਜੋ ਉਸਨੂੰ ਘਰ ਵਾਂਗ ਮਹਿਸੂਸ ਕਰਾਉਂਦਾ ਹੈ - ਰੰਗ, ਫਰਨੀਚਰ ਦੀ ਸਜਾਵਟ, ਰੌਸ਼ਨੀ, ਅਤੇ ਕਮਰੇ ਕਿਵੇਂ ਇੱਕ ਦੂਜੇ ਨਾਲ ਜੁੜਦੇ ਹਨ। ਸੋਚੋ ਕਿ ਵਰਸਾਈਲਸ ਦਾ ਪੈਲੇਸ ਇੱਕ ਸਧਾਰਨ ਸ਼ਿਕਾਰ ਲੌਜ ਵਜੋਂ ਸ਼ੁਰੂ ਹੋਇਆ ਸੀ, ਪਰ ਸਜਾਵਟ ਅਤੇ ਲੇਆਉਟ 'ਤੇ ਧਿਆਨ ਦੇਣ ਨਾਲ ਇਹ ਦੁਨੀਆ ਦੇ ਸਭ ਤੋਂ ਸ਼ਾਨਦਾਰ ਇਮਾਰਤਾਂ ਵਿੱਚੋਂ ਇੱਕ ਬਣ ਗਿਆ। ਅੱਜ, ਅਸੀਂ ਤੁਹਾਡੇ ਟੈਰੀਰੀਅਮ ਨੂੰ ਕਾਰਗਰ ਤੋਂ ਪਾਲਿਸ਼ਡ ਵਿੱਚ ਬਦਲਾਂਗੇ। ਤੁਸੀਂ ਸਿੱਖੋਗੇ ਕਿ ਤੱਤਾਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਕਿਵੇਂ ਪੋਜ਼ੀਸ਼ਨ ਕਰਨਾ ਹੈ, ਲੇਆਉਟਸ ਨੂੰ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਸਾਈਜ਼ਾਂ ਲਈ ਕਿਵੇਂ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਬਣਾਉਣਾ ਹੈ, ਅਤੇ ਉਹ ਵਿਜੁਅਲ ਅਪੀਲ ਬਣਾਉਣਾ ਹੈ ਜੋ ਵੈਬਸਾਈਟਾਂ ਨੂੰ ਦਿਲਚਸਪ ਬਣਾਉਂਦਾ ਹੈ। ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਰਣਨੀਤਿਕ CSS ਸਟਾਈਲਿੰਗ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਕਿੰਨਾ ਬਹੁਤਰੀਨ ਬਣਾ ਸਕਦੀ ਹੈ। ਚਲੋ, ਤੁਹਾਡੇ ਟੈਰੀਰੀਅਮ ਵਿੱਚ ਕੁਝ ਸਟਾਈਲ ਸ਼ਾਮਲ ਕਰੀਏ। ## ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵੀਜ਼ ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵੀਜ਼ ## CSS ਨਾਲ ਸ਼ੁਰੂਆਤ CSS ਨੂੰ ਅਕਸਰ "ਚੀਜ਼ਾਂ ਨੂੰ ਸੁੰਦਰ ਬਣਾਉਣਾ" ਸਮਝਿਆ ਜਾਂਦਾ ਹੈ, ਪਰ ਇਹ ਇਸ ਤੋਂ ਕਾਫ਼ੀ ਵੱਡਾ ਮਕਸਦ ਪੂਰਾ ਕਰਦਾ ਹੈ। CSS ਇੱਕ ਫਿਲਮ ਦੇ ਡਾਇਰੈਕਟਰ ਵਾਂਗ ਹੈ - ਤੁਸੀਂ ਸਿਰਫ ਇਹ ਨਹੀਂ ਨਿਰਧਾਰਤ ਕਰਦੇ ਕਿ ਸਭ ਕੁਝ ਕਿਵੇਂ ਦਿਖਾਈ ਦੇਵੇਗਾ, ਪਰ ਇਹ ਵੀ ਕਿ ਇਹ ਕਿਵੇਂ ਹਿਲੇਗਾ, ਇੰਟਰੈਕਸ਼ਨ 'ਤੇ ਕਿਵੇਂ ਪ੍ਰਤੀਕ੍ਰਿਆ ਕਰੇਗਾ, ਅਤੇ ਵੱਖ-ਵੱਖ ਸਥਿਤੀਆਂ ਵਿੱਚ ਕਿਵੇਂ ਅਨੁਕੂਲ ਹੋਵੇਗਾ। ਆਧੁਨਿਕ CSS ਬਹੁਤ ਹੀ ਸਮਰੱਥ ਹੈ। ਤੁਸੀਂ ਐਸਾ ਕੋਡ ਲਿਖ ਸਕਦੇ ਹੋ ਜੋ ਫੋਨ, ਟੈਬਲੇਟ ਅਤੇ ਡੈਸਕਟਾਪ ਕੰਪਿਊਟਰਾਂ ਲਈ ਲੇਆਉਟਸ ਨੂੰ ਆਪਣੇ ਆਪ ਅਨੁਕੂਲ ਕਰਦਾ ਹੈ। ਤੁਸੀਂ ਸਮਰਥ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਕੋਡ ਲਿਖ ਸਕਦੇ ਹੋ ਜੋ ਜਰੂਰਤ ਪੜਨ 'ਤੇ ਯੂਜ਼ਰ ਦਾ ਧਿਆਨ ਖਿੱਚਦਾ ਹੈ। ਜਦੋਂ ਸਭ ਕੁਝ ਇੱਕਠੇ ਕੰਮ ਕਰਦਾ ਹੈ, ਨਤੀਜੇ ਕਾਫ਼ੀ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੋ ਸਕਦੇ ਹਨ। ਇਸ ਪਾਠ ਵਿੱਚ ਅਸੀਂ ਇਹ ਹਾਸਲ ਕਰਾਂਗੇ: - ਤਿਆਰ ਕਰਨਾ: ਆਧੁਨਿਕ CSS ਤਕਨੀਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੁਹਾਡੇ ਟੈਰੀਰੀਅਮ ਲਈ ਪੂਰੀ ਵਿਜੁਅਲ ਡਿਜ਼ਾਈਨ - ਖੋਜ ਕਰਨਾ: ਮੁੱਢਲੇ ਸੰਕਲਪ ਜਿਵੇਂ ਕਿ ਕੈਸਕੇਡ, ਵਿਰਾਸਤ, ਅਤੇ CSS ਚੁਣਨ ਵਾਲੇ - ਲਾਗੂ ਕਰਨਾ: ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਅਤੇ ਲੇਆਉਟ ਰਣਨੀਤੀਆਂ - ਨਿਰਮਾਣ ਕਰਨਾ: CSS ਸ਼ੇਪਸ ਅਤੇ ਸਟਾਈਲਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਟੈਰੀਰੀਅਮ ਕੰਟੇਨਰ ### ਪੂਰਵ ਸ਼ਰਤ ਤੁਹਾਨੂੰ ਪਿਛਲੇ ਪਾਠ ਤੋਂ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਲਈ HTML ਬਣਤਰ ਪੂਰੀ ਕਰ ਲੈਣੀ ਚਾਹੀਦੀ ਹੈ ਅਤੇ ਇਸਨੂੰ ਸਟਾਈਲ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ### ਆਪਣੀ CSS ਫਾਈਲ ਸੈਟ ਕਰਨਾ ਸਟਾਈਲਿੰਗ ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਸਾਨੂੰ CSS ਨੂੰ ਆਪਣੇ HTML ਨਾਲ ਜੁੜਨਾ ਪਵੇਗਾ। ਇਹ ਕਨੈਕਸ਼ਨ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਦੱਸਦਾ ਹੈ ਕਿ ਸਾਡੇ ਟੈਰੀਰੀਅਮ ਲਈ ਸਟਾਈਲਿੰਗ ਨਿਰਦੇਸ਼ ਕਿੱਥੇ ਮਿਲਣਗੇ। ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਫੋਲਡਰ ਵਿੱਚ, ਇੱਕ ਨਵੀਂ ਫਾਈਲ ਬਣਾਓ ਜਿਸਨੂੰ style.css ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਫਿਰ ਇਸਨੂੰ ਆਪਣੇ HTML ਦਸਤਾਵੇਜ਼ ਦੇ <head> ਸੈਕਸ਼ਨ ਵਿੱਚ ਲਿੰਕ ਕਰੋ: ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ: - ਕਨੈਕਸ਼ਨ ਬਣਾਉਣਾ: ਤੁਹਾਡੇ HTML ਅਤੇ CSS ਫਾਈਲਾਂ ਦੇ ਵਿਚਕਾਰ - ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਦੱਸਣਾ: style.css ਤੋਂ ਸਟਾਈਲ ਲੋਡ ਅਤੇ ਲਾਗੂ ਕਰਨ ਲਈ - ਵਰਤਣਾ: rel="stylesheet" ਐਟ੍ਰਿਬਿਊਟ ਇਹ ਦਰਸਾਉਣ ਲਈ ਕਿ ਇਹ CSS ਫਾਈਲ ਹੈ - ਸੰਬੰਧਿਤ ਕਰਨਾ: ਫਾਈਲ ਪਾਥ href="./style.css" ਨਾਲ ## CSS ਕੈਸਕੇਡ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਕਦੇ ਸੋਚਿਆ ਕਿ CSS ਨੂੰ "Cascading" Style Sheets ਕਿਉਂ ਕਿਹਾ ਜਾਂਦਾ ਹੈ? ਸਟਾਈਲ ਪਾਣੀ ਦੇ ਝਰਨੇ ਵਾਂਗ ਹੇਠਾਂ ਵਗਦੇ ਹਨ, ਅਤੇ ਕਈ ਵਾਰ ਇਹ ਇੱਕ ਦੂਜੇ ਨਾਲ ਟਕਰਾਉਂਦੇ ਹਨ। ਸੋਚੋ ਕਿ ਫੌਜੀ ਕਮਾਂਡ ਬਣਤਰ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ - ਇੱਕ ਜਨਰਲ ਆਰਡਰ ਕਹਿ ਸਕਦਾ ਹੈ "ਸਾਰੇ ਸਿਪਾਹੀ ਹਰਾ ਪਹਿਨੋ," ਪਰ ਤੁਹਾਡੇ ਯੂਨਿਟ ਲਈ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਆਰਡਰ ਕਹਿ ਸਕਦਾ ਹੈ "ਸਮਾਰੋਹ ਲਈ ਡ੍ਰੈਸ ਬਲੂਜ਼ ਪਹਿਨੋ।" ਜ਼ਿਆਦਾ ਵਿਸ਼ੇਸ਼ ਨਿਰਦੇਸ਼ ਪ੍ਰਾਥਮਿਕਤਾ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। CSS ਇਸੇ ਤਰ੍ਹਾਂ ਦੀ ਤਰਕ ਦਾ ਪਾਲਣ ਕਰਦਾ ਹੈ, ਅਤੇ ਇਸ ਹਾਇਰਾਰਕੀ ਨੂੰ ਸਮਝਣਾ ਡੀਬੱਗਿੰਗ ਨੂੰ ਕਾਫ਼ੀ ਆਸਾਨ ਬਣਾਉਂਦਾ ਹੈ। ### ਕੈਸਕੇਡ ਪ੍ਰਾਥਮਿਕਤਾ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰਨਾ ਚਲੋ ਕੈਸਕੇਡ ਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਦੇਖਦੇ ਹਾਂ ਜਦੋਂ ਸਟਾਈਲ ਟਕਰਾਅ ਬਣਦਾ ਹੈ। ਪਹਿਲਾਂ, ਆਪਣੇ <h1> ਟੈਗ ਵਿੱਚ ਇੱਕ ਇਨਲਾਈਨ ਸਟਾਈਲ ਸ਼ਾਮਲ ਕਰੋ: ਇਹ ਕੋਡ ਕੀ ਕਰਦਾ ਹੈ: - ਲਾਗੂ ਕਰਨਾ: <h1> ਤੱਤ ਨੂੰ ਇਨਲਾਈਨ ਸਟਾਈਲਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਿੱਧੇ ਲਾਲ ਰੰਗ - ਵਰਤਣਾ: style ਐਟ੍ਰਿਬਿਊਟ CSS ਨੂੰ ਸਿੱਧੇ HTML ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਲਈ - ਬਣਾਉਣਾ: ਇਸ ਵਿਸ਼ੇਸ਼ ਤੱਤ ਲਈ ਸਭ ਤੋਂ ਉੱਚੀ ਪ੍ਰਾਥਮਿਕਤਾ ਵਾਲਾ ਸਟਾਈਲ ਨਿਯਮ ਅਗਲੇ, ਆਪਣੇ style.css ਫਾਈਲ ਵਿੱਚ ਇਹ ਨਿਯਮ ਸ਼ਾਮਲ ਕਰੋ: ਉਪਰੋਕਤ ਵਿੱਚ, ਅਸੀਂ: - ਨਿਰਧਾਰਤ ਕੀਤਾ: ਇੱਕ CSS ਨਿਯਮ ਜੋ ਸਾਰੇ <h1> ਤੱਤਾਂ ਨੂੰ ਟਾਰਗਟ ਕਰਦਾ ਹੈ - ਸੈਟ ਕੀਤਾ: ਟੈਕਸਟ ਰੰਗ ਨੂੰ ਬਲੂ ਬਾਹਰੀ ਸਟਾਈਲਸ਼ੀਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ - ਬਣਾਇਆ: ਇਨਲਾਈਨ ਸਟਾਈਲਜ਼ ਦੇ ਮੁਕਾਬਲੇ ਘੱਟ ਪ੍ਰਾਥਮਿਕਤਾ ਵਾਲਾ ਨਿਯਮ ✅ ਗਿਆਨ ਦੀ ਜਾਂਚ: ਤੁਹਾਡੇ ਵੈਬ ਐਪ ਵਿੱਚ ਕਿਹੜਾ ਰੰਗ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ? ਉਹ ਰੰਗ ਕਿਉਂ ਜਿੱਤਦਾ ਹੈ? ਕੀ ਤੁਸੀਂ ਐਸੇ ਦ੍ਰਿਸ਼ਾਂ ਬਾਰੇ ਸੋਚ ਸਕਦੇ ਹੋ ਜਿੱਥੇ ਤੁਸੀਂ ਸਟਾਈਲਜ਼ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ? ## CSS ਵਿਰਾਸਤ ਕਾਰਵਾਈ ਵਿੱਚ CSS ਵਿਰਾਸਤ ਜੈਨੇਟਿਕਸ ਵਾਂਗ ਕੰਮ ਕਰਦੀ ਹੈ - ਤੱਤ ਆਪਣੇ ਮਾਤਾ-ਪਿਤਾ ਤੱਤਾਂ ਤੋਂ ਕੁਝ ਗੁਣ ਵਿਰਾਸਤ ਵਿੱਚ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ। ਜੇ ਤੁਸੀਂ ਬਾਡੀ ਤੱਤ 'ਤੇ ਫੋਂਟ ਫੈਮਿਲੀ ਸੈਟ ਕਰਦੇ ਹੋ, ਤਾਂ ਸਾਰੇ ਟੈਕਸਟ ਆਪਣੇ ਆਪ ਉਹੀ ਫੋਂਟ ਵਰਤਦਾ ਹੈ। ਇਹ ਉਸੇ ਤਰ੍ਹਾਂ ਹੈ ਜਿਵੇਂ ਹੈਬਸਬਰਗ ਪਰਿਵਾਰ ਦੀ ਵਿਸ਼ੇਸ਼ ਜੌਲਾਈਨ ਕਈ ਪੀੜ੍ਹੀਆਂ ਵਿੱਚ ਪ੍ਰਗਟ ਹੋਈ ਬਿਨਾਂ ਹਰ ਵਿਅਕਤੀ ਲਈ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਨਿਰਧਾਰਤ ਕੀਤੇ। ਹਾਲਾਂਕਿ, ਹਰ ਚੀਜ਼ ਵਿਰਾਸਤ ਵਿੱਚ ਨਹੀਂ ਮਿਲਦੀ। ਫੋਂਟ ਅਤੇ ਰੰਗ ਵਰਗੇ ਟੈਕਸਟ ਸਟਾਈਲ ਵਿਰਾਸਤ ਵਿੱਚ ਮਿਲਦੇ ਹਨ, ਪਰ ਮਾਰਜਿਨ ਅਤੇ ਬਾਰਡਰ ਵਰਗੇ ਲੇਆਉਟ ਗੁਣ ਨਹੀਂ ਮਿਲਦੇ। ਜਿਵੇਂ ਬੱਚੇ ਸ਼ਾਰੀਰੀਕ ਗੁਣ ਵਿਰਾਸਤ ਵਿੱਚ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਨ ਪਰ ਆਪਣੇ ਮਾਤਾ-ਪਿਤਾ ਦੀ ਫੈਸ਼ਨ ਚੋਣ ਨਹੀਂ। ### ਫੋਂਟ ਵਿਰਾਸਤ ਦਾ ਅਵਲੋਕਨ ਚਲੋ ਵਿਰਾਸਤ ਨੂੰ ਕਾਰਵਾਈ ਵਿੱਚ ਦੇਖਦੇ ਹਾਂ ਜਦੋਂ <body> ਤੱਤ 'ਤੇ ਫੋਂਟ ਫੈਮਿਲੀ ਸੈਟ ਕਰਦੇ ਹੋ: ਇੱਥੇ ਕੀ ਹੁੰਦਾ ਹੈ: - ਸੈਟ ਕਰਨਾ: ਪੂਰੇ ਪੇਜ ਲਈ ਫੋਂਟ ਫੈਮਿਲੀ ਨੂੰ ਟਾਰਗਟ ਕਰਕੇ <body> ਤੱਤ - ਵਰਤਣਾ: ਫੋਂਟ ਸਟੈਕFallback ਵਿਕਲਪਾਂ ਨਾਲ ਬਿਹਤਰ ਬ੍ਰਾਊਜ਼ਰ ਅਨੁਕੂਲਤਾ ਲਈ - ਲਾਗੂ ਕਰਨਾ: ਆਧੁਨਿਕ ਸਿਸਟਮ ਫੋਂਟ ਜੋ ਵੱਖ-ਵੱਖ ਓਪਰੇਟਿੰਗ ਸਿਸਟਮਾਂ 'ਤੇ ਸ਼ਾਨਦਾਰ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ - ਸੁਨਿਸ਼ਚਿਤ ਕਰਨਾ: ਸਾਰੇ ਚਾਈਲਡ ਤੱਤ ਇਹ ਫੋਂਟ ਵਰਤਦੇ ਹਨ ਜਦੋਂ ਤੱਕ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਓਵਰਰਾਈਡ ਨਾ ਕੀਤਾ ਜਾਵੇ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਵੈਲਪਰ ਟੂਲ (F12) ਖੋਲ੍ਹੋ, ਐਲਿਮੈਂਟਸ ਟੈਬ 'ਤੇ ਜਾਓ, ਅਤੇ ਆਪਣੇ <h1> ਤੱਤ ਦੀ ਜਾਂਚ ਕਰੋ। ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਇਹ ਬਾਡੀ ਤੋਂ ਫੋਂਟ ਫੈਮਿਲੀ ਵਿਰਾਸਤ ਵਿੱਚ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ: ✅ ਪ੍ਰਯੋਗ ਸਮਾਂ: <body> 'ਤੇ ਹੋਰ ਵਿਰਾਸਤ ਗੁਣ ਜਿਵੇਂ color, line-height, ਜਾਂ text-align ਸੈਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਤੁਹਾਡੇ ਹੈਡਿੰਗ ਅਤੇ ਹੋਰ ਤੱਤਾਂ 'ਤੇ ਕੀ ਹੁੰਦਾ ਹੈ? ### 🔄 ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ CSS ਫਾਊਂਡੇਸ਼ਨ ਸਮਝ: ਚੁਣਨ ਵਾਲਿਆਂ 'ਤੇ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ: - ✅ ਕੈਸਕੇਡ ਅਤੇ ਵਿਰਾਸਤ ਦੇ ਵਿਚਕਾਰ ਅੰਤਰ ਦੀ ਵਿਆਖਿਆ ਕਰ ਸਕਦੇ ਹੋ - ✅ ਪੇਸ਼ਗੂਈ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਵਿਸ਼ੇਸ਼ਤਾ ਟਕਰਾਅ ਵਿੱਚ ਕਿਹੜਾ ਸਟਾਈਲ ਜਿੱਤੇਗਾ - ✅ ਪਛਾਣ ਸਕਦੇ ਹੋ ਕਿ ਕਿਹੜੇ ਗੁਣ ਮਾਤਾ-ਪਿਤਾ ਤੱਤਾਂ ਤੋਂ ਵਿਰਾਸਤ ਵਿੱਚ ਮਿਲਦੇ ਹਨ - ✅ CSS ਫਾਈਲਾਂ ਨੂੰ HTML ਨਾਲ ਸਹੀ ਤੌਰ 'ਤੇ ਜੁੜ ਸਕਦੇ ਹੋ ਤੁਰੰਤ ਟੈਸਟ: ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਇਹ ਸਟਾਈਲ ਹਨ, <div class="special"> ਦੇ ਅੰਦਰ ਇੱਕ <h1> ਦਾ ਰੰਗ ਕੀ ਹੋਵੇਗਾ? ਜਵਾਬ: ਲਾਲ (ਤੱਤ ਚੁਣਨ ਵਾਲਾ ਸਿੱਧੇ h1 ਨੂੰ ਟਾਰਗਟ ਕਰਦਾ ਹੈ) ## CSS ਚੁਣਨ ਵਾਲਿਆਂ ਵਿੱਚ ਮਾਹਰ ਬਣਨਾ CSS ਚੁਣਨ ਵਾਲੇ ਤੁਹਾਡੇ ਤੱਤਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਲਈ ਟਾਰਗਟ ਕਰਨ ਦਾ ਤਰੀਕਾ ਹਨ। ਇਹ ਸਹੀ ਦਿਸ਼ਾ ਦੇਣ ਵਾਂਗ ਕੰਮ ਕਰਦੇ ਹਨ - "ਘਰ" ਕਹਿਣ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਕਹਿ ਸਕਦੇ ਹੋ "ਮੈਪਲ ਸਟ੍ਰੀਟ 'ਤੇ ਲਾਲ ਦਰਵਾਜ਼ੇ ਵਾਲਾ ਨੀਲਾ ਘਰ।" CSS ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨਾਲ ਵਿਸ਼ੇਸ਼ ਹੋਣ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦਾ ਹੈ, ਅਤੇ ਸਹੀ ਚੁਣਨ ਵਾਲੇ ਦੀ ਚੋਣ ਕਰਨਾ ਕੰਮ ਲਈ ਸਹੀ ਸੰਦ ਦੀ ਚੋਣ ਕਰਨ ਵਾਂਗ ਹੈ। ਕਈ ਵਾਰ ਤੁਹਾਨੂੰ ਪੜੋਸ ਵਿੱਚ ਹਰ ਦਰਵਾਜ਼ੇ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ, ਅਤੇ ਕਈ ਵਾਰ ਸਿਰਫ਼ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਦਰਵਾਜ਼ੇ ਨੂੰ। ### ਤੱਤ ਚੁਣਨ ਵਾਲੇ (ਟੈਗ) ਤੱਤ ਚੁਣਨ ਵਾਲੇ HTML ਤੱਤਾਂ ਨੂੰ ਉਨ੍ਹਾਂ ਦੇ ਟੈਗ ਨਾਮ ਦੁਆਰਾ ਟਾਰਗਟ ਕਰਦੇ ਹਨ। ਇਹ ਪੂਰੇ ਪੇਜ ਵਿੱਚ ਵਿਆਪਕ ਤੌਰ 'ਤੇ ਲਾਗੂ ਹੋਣ ਵਾਲੇ ਬੇਸ ਸਟਾਈਲ ਸੈਟ ਕਰਨ ਲਈ ਬਹੁਤ ਹੀ ਵਧੀਆ ਹਨ: ਇਹ ਸਟਾਈਲ ਸਮਝਣਾ: - ਸੈਟ ਕਰਨਾ: ਪੂਰੇ ਪੇਜ ਵਿੱਚ ਸਥਿਰ ਟਾਈਪੋਗ੍ਰਾਫੀ body ਚੁਣਨ ਵਾਲੇ ਨਾਲ - ਹਟਾਉਣਾ: ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਫਾਲਟ ਮਾਰਜਿਨ ਅਤੇ ਪੈਡਿੰਗ ਬਿਹਤਰ ਕੰਟਰੋਲ ਲਈ - ਸਟਾਈਲ ਕਰਨਾ: ਸਾਰੇ ਹੈਡਿੰਗ ਤੱਤ ਰੰਗ, ਸੰਰੇਖਣ, ਅਤੇ ਸਪੇਸਿੰਗ ਨਾਲ - ਵਰਤਣਾ: rem ਯੂਨਿਟਸ ਸਕੇਲਬਲ, ਪਹੁੰਚਯੋਗ ਫੋਂਟ ਸਾਈਜ਼ਿੰਗ ਲਈ ਜਦੋਂ ਕਿ ਤੱਤ ਚੁਣਨ ਵਾਲੇ ਆਮ ਸਟਾਈਲਿੰਗ ਲਈ ਚੰਗੇ ਕੰਮ ਕਰਦੇ ਹਨ, ਤੁਹਾਨੂੰ ਵਿਅਕਤੀਗਤ ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਸਟਾਈਲ ਕਰਨ ਲਈ ਹੋਰ ਵਿਸ਼ੇਸ਼ ਚੁਣਨ ਵਾਲਿਆਂ ਦੀ ਜ਼ਰੂਰਤ ਹੋਵੇਗੀ ਜਿਵੇਂ ਕਿ ਤੁਹਾਡੇ - ਜਦੋਂ .plant-holder ਨੂੰ relative ਦੀ ਬਜਾਏ absolute ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਲੇਆਉਟ ਵਿੱਚ ਕੀ ਤਬਦੀਲੀ ਆਉਂਦੀ ਹੈ? - ਜਦੋਂ .plant ਨੂੰ relative ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਵਿੱਚ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ? ### 🔄 ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ CSS ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਵਿੱਚ ਮਾਹਰਤਾ: ਆਪਣੇ ਗਿਆਨ ਦੀ ਪੁਸ਼ਟੀ ਕਰਨ ਲਈ ਰੁਕੋ: - ✅ ਕੀ ਤੁਸੀਂ ਸਮਝਾ ਸਕਦੇ ਹੋ ਕਿ ਡ੍ਰੈਗ-ਐਂਡ-ਡ੍ਰੌਪ ਲਈ ਪੌਦਿਆਂ ਨੂੰ absolute ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਦੀ ਲੋੜ ਕਿਉਂ ਹੈ? - ✅ ਕੀ ਤੁਸੀਂ ਸਮਝਦੇ ਹੋ ਕਿ relative ਕੰਟੇਨਰ ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਸੰਦਰਭ ਕਿਵੇਂ ਬਣਾਉਂਦੇ ਹਨ? - ✅ ਸਾਈਡ ਕੰਟੇਨਰ absolute ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਕਿਉਂ ਵਰਤਦੇ ਹਨ? - ✅ ਜੇ ਤੁਸੀਂ ਪੋਜ਼ੀਸ਼ਨ ਡਿਕਲੇਰੇਸ਼ਨ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਹਟਾ ਦਿੰਦੇ ਹੋ ਤਾਂ ਕੀ ਹੋਵੇਗਾ? ਅਸਲ ਜਗਤ ਨਾਲ ਸੰਬੰਧ: ਸੋਚੋ ਕਿ CSS ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਅਸਲ ਜਗਤ ਦੇ ਲੇਆਉਟ ਨੂੰ ਕਿਵੇਂ ਦਰਸਾਉਂਦੀ ਹੈ: - Static: ਸ਼ੈਲਫ 'ਤੇ ਕਿਤਾਬਾਂ (ਕੁਦਰਤੀ ਕ੍ਰਮ) - Relative: ਇੱਕ ਕਿਤਾਬ ਨੂੰ ਥੋੜ੍ਹਾ ਜਿਹਾ ਹਿਲਾਉਣਾ ਪਰ ਉਸ ਦੀ ਜਗ੍ਹਾ ਬਰਕਰਾਰ ਰੱਖਣਾ - Absolute: ਇੱਕ ਕਿਤਾਬ ਦੇ ਪੰਨੇ 'ਤੇ ਸਹੀ ਸਥਾਨ 'ਤੇ ਬੁੱਕਮਾਰਕ ਰੱਖਣਾ - Fixed: ਇੱਕ ਸਟਿੱਕੀ ਨੋਟ ਜੋ ਪੰਨੇ ਪਲਟਣ 'ਤੇ ਵੀ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ ## CSS ਨਾਲ ਟੈਰੀਰੀਅਮ ਬਣਾਉਣਾ ਹੁਣ ਅਸੀਂ ਸਿਰਫ CSS ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਕੱਚ ਦਾ ਜਾਰ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ - ਕੋਈ ਚਿੱਤਰ ਜਾਂ ਗ੍ਰਾਫਿਕਸ ਸਾਫਟਵੇਅਰ ਦੀ ਲੋੜ ਨਹੀਂ। CSS ਦੀ ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਅਤੇ ਟ੍ਰਾਂਸਪੇਰੈਂਸੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹਕੀਕਤੀ ਕੱਚ, ਛਾਂ ਅਤੇ ਡੈਪਥ ਇਫੈਕਟ ਬਣਾਉਣਾ CSS ਦੀ ਵਿਜ਼ੂਅਲ ਸਮਰੱਥਾ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ਇਹ ਤਕਨੀਕ ਉਸ ਤਰੀਕੇ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ ਜਿਸ ਤਰ੍ਹਾਂ Bauhaus ਮੂਵਮੈਂਟ ਦੇ ਆਰਕੀਟੈਕਟ ਸਧਾਰਨ ਜਿਓਮੈਟ੍ਰਿਕ ਰੂਪਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੁੰਦਰ ਅਤੇ ਜਟਿਲ ਬਣਾਵਟਾਂ ਬਣਾਉਂਦੇ ਸਨ। ਜਦੋਂ ਤੁਸੀਂ ਇਹ ਸਿਧਾਂਤ ਸਮਝ ਲੈਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਕਈ ਵੈੱਬ ਡਿਜ਼ਾਈਨਾਂ ਦੇ CSS ਤਕਨੀਕਾਂ ਨੂੰ ਪਛਾਣ ਸਕਦੇ ਹੋ। ### ਕੱਚ ਦੇ ਜਾਰ ਦੇ ਹਿੱਸੇ ਬਣਾਉਣਾ ਆਓ ਟੈਰੀਰੀਅਮ ਜਾਰ ਨੂੰ ਹਿੱਸਾ-ਹਿੱਸਾ ਕਰਕੇ ਬਣਾਈਏ। ਹਰ ਹਿੱਸਾ absolute ਪੋਜ਼ੀਸ਼ਨਿੰਗ ਅਤੇ ਪ੍ਰਤੀਸ਼ਤ-ਅਧਾਰਿਤ ਸਾਈਜ਼ਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਬਣਾਇਆ ਜਾ ਸਕੇ: ਟੈਰੀਰੀਅਮ ਬਣਾਉਣ ਦੀ ਸਮਝ: - ਵਰਤਦਾ ਹੈ ਪ੍ਰਤੀਸ਼ਤ-ਅਧਾਰਿਤ ਮਾਪ ਰਿਸਪਾਂਸਿਵ ਸਕੇਲਿੰਗ ਲਈ ਜੋ ਸਾਰੇ ਸਕ੍ਰੀਨ ਸਾਈਜ਼ਾਂ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ - ਪੋਜ਼ੀਸ਼ਨ ਕਰਦਾ ਹੈ ਤੱਤਾਂ ਨੂੰ absolute ਤਰੀਕੇ ਨਾਲ ਤਾਂ ਜੋ ਉਹ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸੈਟ ਹੋਣ - ਲਾਗੂ ਕਰਦਾ ਹੈ ਵੱਖ-ਵੱਖ ਓਪੈਸਿਟੀ ਮੁੱਲਾਂ ਨੂੰ ਕੱਚ ਦੀ ਪਾਰਦਰਸ਼ੀਤਾ ਦਾ ਪ੍ਰਭਾਵ ਬਣਾਉਣ ਲਈ - ਇੰਪਲੀਮੈਂਟ ਕਰਦਾ ਹੈ z-index ਲੇਅਰਿੰਗ ਤਾਂ ਜੋ ਪੌਦੇ ਜਾਰ ਦੇ ਅੰਦਰ ਦਿਖਾਈ ਦੇਣ - ਜੋੜਦਾ ਹੈ ਹੌਲੀ ਬਾਕਸ-ਸ਼ੈਡੋ ਅਤੇ ਸੁਧਰੇ ਹੋਏ ਬਾਰਡਰ-ਰੇਡੀਅਸ ਨੂੰ ਹਕੀਕਤੀ ਦਿੱਖ ਲਈ ### ਪ੍ਰਤੀਸ਼ਤਾਂ ਨਾਲ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਨੋਟ ਕਰੋ ਕਿ ਸਾਰੇ ਮਾਪ ਫਿਕਸਡ ਪਿਕਸਲ ਮੁੱਲਾਂ ਦੀ ਬਜਾਏ ਪ੍ਰਤੀਸ਼ਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ: ਇਸਦਾ ਮਹੱਤਵ ਕਿਉਂ ਹੈ: - ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਟੈਰੀਰੀਅਮ ਕਿਸੇ ਵੀ ਸਕ੍ਰੀਨ ਸਾਈਜ਼ 'ਤੇ ਅਨੁਪਾਤਿਕ ਤਰੀਕੇ ਨਾਲ ਸਕੇਲ ਕਰਦਾ ਹੈ - ਵਿਸ਼ੁਆਲ ਸੰਬੰਧਾਂ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦਾ ਹੈ ਜਾਰ ਦੇ ਹਿੱਸਿਆਂ ਦੇ ਵਿਚਕਾਰ - ਇੱਕ ਸਥਿਰ ਅਨੁਭਵ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਮੋਬਾਈਲ ਫੋਨ ਤੋਂ ਵੱਡੇ ਡੈਸਕਟਾਪ ਮਾਨੀਟਰ ਤੱਕ - ਡਿਜ਼ਾਈਨ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਂਦਾ ਹੈ ਬਿਨਾਂ ਵਿਜ਼ੂਅਲ ਲੇਆਉਟ ਨੂੰ ਤੋੜੇ ### CSS ਯੂਨਿਟਸ ਦੀ ਵਰਤੋਂ ਅਸੀਂ rem ਯੂਨਿਟਸ ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹਾਂ ਬਾਰਡਰ-ਰੇਡੀਅਸ ਲਈ, ਜੋ ਰੂਟ ਫੋਂਟ ਸਾਈਜ਼ ਦੇ ਅਨੁਸਾਰ ਸਕੇਲ ਕਰਦੇ ਹਨ। ਇਹ ਜ਼ਿਆਦਾ ਪਹੁੰਚਯੋਗ ਡਿਜ਼ਾਈਨ ਬਣਾਉਂਦੇ ਹਨ ਜੋ ਯੂਜ਼ਰ ਫੋਂਟ ਪਸੰਦਾਂ ਦਾ ਆਦਰ ਕਰਦੇ ਹਨ। CSS relative units ਬਾਰੇ ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਅਧਿਕਾਰਤ ਵਿਵਰਣ ਵਿੱਚ ਪੜ੍ਹੋ। ✅ ਵਿਜ਼ੂਅਲ ਪ੍ਰਯੋਗ: ਇਹ ਮੁੱਲਾਂ ਨੂੰ ਬਦਲਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਅਤੇ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਦੇਖੋ: - ਜਾਰ ਦੀ ਓਪੈਸਿਟੀ ਨੂੰ 0.5 ਤੋਂ 0.8 ਵਿੱਚ ਬਦਲੋ - ਇਹ ਕੱਚ ਦੀ ਦਿੱਖ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਭਾਵਿਤ ਕਰਦਾ ਹੈ? - ਮਿੱਟੀ ਦੇ ਰੰਗ ਨੂੰ #3a241d ਤੋਂ #8B4513 ਵਿੱਚ ਬਦਲੋ - ਇਸਦਾ ਵਿਜ਼ੂਅਲ ਪ੍ਰਭਾਵ ਕੀ ਹੈ? - ਮਿੱਟੀ ਦੇ z-index ਨੂੰ 2 ਵਿੱਚ ਬਦਲੋ - ਲੇਅਰਿੰਗ 'ਤੇ ਕੀ ਹੁੰਦਾ ਹੈ? ### 🔄 ਪੈਡਾਗੌਜੀਕਲ ਚੈੱਕ-ਇਨ CSS ਵਿਜ਼ੂਅਲ ਡਿਜ਼ਾਈਨ ਦੀ ਸਮਝ: ਆਪਣੇ ਵਿਜ਼ੂਅਲ CSS ਦੀ ਸਮਝ ਦੀ ਪੁਸ਼ਟੀ ਕਰੋ: - ✅ ਪ੍ਰਤੀਸ਼ਤ-ਅਧਾਰਿਤ ਮਾਪ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਕਿਵੇਂ ਬਣਾਉਂਦੇ ਹਨ? - ✅ ਓਪੈਸਿਟੀ ਕੱਚ ਦੀ ਪਾਰਦਰਸ਼ੀਤਾ ਦਾ ਪ੍ਰਭਾਵ ਕਿਵੇਂ ਬਣਾਉਂਦੀ ਹੈ? - ✅ ਲੇਅਰਿੰਗ ਤੱਤਾਂ ਵਿੱਚ z-index ਦਾ ਕੀ ਭੂਮਿਕਾ ਹੈ? - ✅ ਬਾਰਡਰ-ਰੇਡੀਅਸ ਮੁੱਲ ਜਾਰ ਦਾ ਆਕਾਰ ਕਿਵੇਂ ਬਣਾਉਂਦੇ ਹਨ? ਡਿਜ਼ਾਈਨ ਸਿਧਾਂਤ: ਨੋਟ ਕਰੋ ਕਿ ਅਸੀਂ ਸਧਾਰਨ ਰੂਪਾਂ ਤੋਂ ਜਟਿਲ ਵਿਜ਼ੂਅਲ ਬਣਾਉਣ ਲਈ ਕਿਵੇਂ ਕੰਮ ਕਰ ਰਹੇ ਹਾਂ: 1. ਚੌਕੋਰ → ਗੋਲ ਚੌਕੋਰ → ਜਾਰ ਦੇ ਹਿੱਸੇ 2. ਸਧਾਰਨ ਰੰਗ → ਓਪੈਸਿਟੀ → ਕੱਚ ਦਾ ਪ੍ਰਭਾਵ 3. ਵੱਖ-ਵੱਖ ਤੱਤ → ਲੇਅਰਡ ਰਚਨਾ → 3D ਦਿੱਖ --- ## GitHub Copilot Agent ਚੈਲੈਂਜ 🚀 Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ: ਵੇਰਵਾ: CSS ਐਨੀਮੇਸ਼ਨ ਬਣਾਓ ਜੋ ਟੈਰੀਰੀਅਮ ਪੌਦਿਆਂ ਨੂੰ ਹੌਲੀ-ਹੌਲੀ ਹਵਾ ਦੇ ਪ੍ਰਭਾਵ ਨੂੰ ਦਰਸਾਉਂਦੇ ਹੋਏ ਹਿਲਾਉਂਦਾ ਹੈ। CSS ਐਨੀਮੇਸ਼ਨ, ਟ੍ਰਾਂਸਫਾਰਮਸ ਅਤੇ ਕੀਫਰੇਮਸ ਦੀ ਅਭਿਆਸ ਕਰਨ ਦੇ ਨਾਲ ਟੈਰੀਰੀਅਮ ਦੀ ਵਿਜ਼ੂਅਲ ਦਿੱਖ ਨੂੰ ਵਧਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ। ਪ੍ਰੋੰਪਟ: CSS ਕੀਫਰੇਮ ਐਨੀਮੇਸ਼ਨ ਜੋੜੋ ਤਾਂ ਜੋ ਟੈਰੀਰੀਅਮ ਵਿੱਚ ਪੌਦੇ ਹੌਲੀ-ਹੌਲੀ ਸਾਈਡ ਤੋਂ ਸਾਈਡ ਹਿਲਣ। ਇੱਕ ਐਨੀਮੇਸ਼ਨ ਬਣਾਓ ਜੋ ਹਰ ਪੌਦੇ ਨੂੰ ਥੋੜ੍ਹਾ ਜਿਹਾ (2-3 ਡਿਗਰੀ) ਖੱਬੇ ਅਤੇ ਸੱਜੇ ਵੱਲ ਘੁਮਾਉਂਦਾ ਹੈ 3-4 ਸਕਿੰਟ ਦੇ ਸਮੇਂ ਨਾਲ, ਅਤੇ ਇਸਨੂੰ .plant ਕਲਾਸ 'ਤੇ ਲਾਗੂ ਕਰੋ। ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਐਨੀਮੇਸ਼ਨ ਅਨੰਤ ਚੱਲੇ ਅਤੇ ਕੁਦਰਤੀ ਹਿਲਾਵਟ ਲਈ ਇੱਕ easing function ਹੋਵੇ। agent mode ਬਾਰੇ ਹੋਰ ਜਾਣੋ। ## 🚀 ਚੈਲੈਂਜ: ਕੱਚ ਦੇ ਰਿਫਲੈਕਸ਼ਨ ਜੋੜਨਾ ਕੀ ਤੁਸੀਂ ਆਪਣੇ ਟੈਰੀਰੀਅਮ ਨੂੰ ਹਕੀਕਤੀ ਕੱਚ ਦੇ ਰਿਫਲੈਕਸ਼ਨ ਨਾਲ ਵਧਾਉਣ ਲਈ ਤਿਆਰ ਹੋ? ਇਹ ਤਕਨੀਕ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਡੈਪਥ ਅਤੇ ਹਕੀਕਤ ਜੋੜੇਗੀ। ਤੁਹਾਨੂੰ ਹੌਲੀ ਹੌਲੀ ਹਾਈਲਾਈਟਸ ਬਣਾਉਣੇ ਹਨ ਜੋ ਦਰਸਾਉਂਦੇ ਹਨ ਕਿ ਕਿਵੇਂ ਰੋਸ਼ਨੀ ਕੱਚ ਦੀ ਸਤਹ 'ਤੇ ਰਿਫਲੈਕਟ ਕਰਦੀ ਹੈ। ਇਹ ਤਰੀਕਾ ਉਸ ਤਰੀਕੇ ਦੇ ਸਮਾਨ ਹੈ ਜਿਸ ਤਰ੍ਹਾਂ ਰੈਨੈਸਾਂਸ ਪੇਂਟਰ ਜਾਨ ਵੈਨ ਆਇਕ ਨੇ ਰੋਸ਼ਨੀ ਅਤੇ ਰਿਫਲੈਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪੇਂਟ ਕੀਤੇ ਕੱਚ ਨੂੰ ਤਿੰਨ-ਡਾਈਮੈਂਸ਼ਨਲ ਦਿੱਖ ਦਿੱਤੀ। ਇਹ ਹੈ ਜੋ ਤੁਸੀਂ ਹਾਸਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ: ਤੁਹਾਡਾ ਚੈਲੈਂਜ: - ਬਣਾਓ ਹੌਲੀ ਹੌਲੀ ਚਿੱਟੇ ਜਾਂ ਹਲਕੇ ਰੰਗ ਦੇ ਓਵਲ ਆਕਾਰ ਕੱਚ ਦੇ ਰਿਫਲੈਕਸ਼ਨ ਲਈ - ਇਨ੍ਹੇ ਸਥਿਤ ਕਰੋ ਜਾਰ ਦੇ ਖੱਬੇ ਪਾਸੇ ਸਟ੍ਰੈਟਜਿਕ ਤਰੀਕੇ ਨਾਲ - ਲਾਗੂ ਕਰੋ ਉਚਿਤ ਓਪੈਸਿਟੀ ਅਤੇ ਬਲਰ ਪ੍ਰਭਾਵ ਹਕੀਕਤੀ ਰੋਸ਼ਨੀ ਰਿਫਲੈਕਸ਼ਨ ਲਈ - ਵਰਤੋਂ border-radius ਜਿਵੇਂ ਜੈਵਿਕ, ਬੁਬਲ-ਜਿਵੇਂ ਆਕਾਰ ਬਣਾਉਣ ਲਈ - ਪ੍ਰਯੋਗ ਕਰੋ ਗ੍ਰੇਡੀਐਂਟ ਜਾਂ ਬਾਕਸ-ਸ਼ੈਡੋਜ਼ ਨਾਲ ਵਧੇਰੇ ਹਕੀਕਤ ਲਈ ## ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼ ਪੋਸਟ-ਲੈਕਚਰ ਕਵਿਜ਼ ## CSS ਗਿਆਨ ਨੂੰ ਵਧਾਓ CSS ਸ਼ੁਰੂ ਵਿੱਚ ਥੋੜ੍ਹਾ ਜਿਹਾ ਜਟਿਲ ਲੱਗ ਸਕਦਾ ਹੈ, ਪਰ ਇਹਨਾਂ ਮੁੱਖ ਸਿਧਾਂਤਾਂ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਹੋਰ ਉੱਚੇ ਤਕਨੀਕਾਂ ਲਈ ਮਜ਼ਬੂਤ ਬੁਨਿਆਦ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਤੁਹਾਡੇ CSS ਸਿੱਖਣ ਦੇ ਅਗਲੇ ਖੇਤਰ: - Flexbox - ਤੱਤਾਂ ਦੇ ਸੰਰੋਪਣ ਅਤੇ ਵੰਡ ਨੂੰ ਸਧਾਰਨ ਬਣਾਉਂਦਾ ਹੈ - CSS Grid - ਜਟਿਲ ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ ਸ਼ਕਤੀਸ਼ਾਲੀ ਟੂਲ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ - CSS Variables - ਦੁਹਰਾਈ ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ ਅਤੇ ਰੱਖ-ਰਖਾਅ ਨੂੰ ਸੁਧਾਰਦਾ ਹੈ - Responsive design - ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਵੈੱਬਸਾਈਟ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨ ਸਾਈਜ਼ਾਂ 'ਤੇ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੀ ਹੈ ### ਇੰਟਰਐਕਟਿਵ ਸਿੱਖਣ ਦੇ ਸਰੋਤ ਇਹ ਦਿਲਚਸਪ, ਹੈਂਡਸ-ਆਨ ਗੇਮਾਂ ਨਾਲ ਇਹ ਸਿਧਾਂਤਾਂ ਦਾ ਅਭਿਆਸ ਕਰੋ: - 🐸 Flexbox Froggy - ਮਜ਼ੇਦਾਰ ਚੈਲੈਂਜਾਂ ਰਾਹੀਂ Flexbox ਵਿੱਚ ਮਾਹਰ ਬਣੋ - 🌱 Grid Garden - CSS Grid ਸਿੱਖੋ ਵਰਚੁਅਲ ਗਾਜਰਾਂ ਨੂੰ ਉਗਾ ਕੇ - 🎯 CSS Battle - CSS ਚੈਲੈਂਜਾਂ ਨਾਲ ਆਪਣੇ CSS ਹੁਨਰ ਦੀ ਜਾਂਚ ਕਰੋ ### ਵਧੇਰੇ ਸਿੱਖਣ CSS ਦੇ ਮੁੱਲ ਸਿਧਾਂਤਾਂ ਲਈ, ਇਹ Microsoft Learn ਮੋਡਿਊਲ ਪੂਰਾ ਕਰੋ: Style your HTML app with CSS ### ⚡ ਤੁਹਾਡੇ ਅਗਲੇ 5 ਮਿੰਟਾਂ ਵਿੱਚ ਕੀ ਕਰ ਸਕਦੇ ਹੋ - [ ] DevTools ਖੋਲ੍ਹੋ ਅਤੇ ਕਿਸੇ ਵੀ ਵੈੱਬਸਾਈਟ 'ਤੇ CSS ਸ਼ੈਲੀ ਦੀ ਜਾਂਚ ਕਰੋ - [ ] ਇੱਕ ਸਧਾਰਨ CSS ਫਾਈਲ ਬਣਾਓ ਅਤੇ ਇਸਨੂੰ HTML ਪੇਜ ਨਾਲ ਜੋੜੋ - [ ] ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਨਾਲ ਰੰਗ ਬਦਲਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ: hex, RGB, ਅਤੇ ਨਾਮਿਤ ਰੰਗ - [ ] ਬਾਕਸ ਮਾਡਲ ਦਾ ਅਭਿਆਸ ਕਰੋ ਇੱਕ div ਵਿੱਚ ਪੈਡਿੰਗ ਅਤੇ ਮਾਰਜਿਨ ਜੋੜ ਕੇ ### 🎯 ਤੁਹਾਡੇ ਇਸ ਘੰਟੇ ਵਿੱਚ ਕੀ ਹਾਸਲ ਕਰ ਸਕਦੇ ਹੋ - [ ] ਪੋਸਟ-ਲੈਸਨ ਕਵਿਜ਼ ਪੂਰਾ ਕਰੋ ਅਤੇ CSS ਦੇ ਮੁੱਲ ਸਿਧਾਂਤਾਂ ਦੀ ਸਮੀਖਾ ਕਰੋ - [ ] ਆਪਣੇ HTML ਪੇਜ ਨੂੰ ਫੋਂਟ, ਰੰਗ ਅਤੇ ਸਪੇਸਿੰਗ ਨਾਲ ਸਜਾਓ - [ ] Flexbox ਜਾਂ Grid ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਸਧਾਰਨ ਲੇਆਉਟ ਬਣਾਓ - [ ] CSS ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਨਾਲ ਹੌਲੀ ਪ੍ਰਭਾਵਾਂ ਦਾ ਅਭਿਆਸ ਕਰੋ - [ ] ਮੀਡੀਆ ਕਵੇਰੀਜ਼ ਨਾਲ ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ ਦਾ ਅਭਿਆਸ ਕਰੋ ### 📅 ਤੁਹਾਡਾ ਹਫ਼ਤੇ-ਲੰਬਾ CSS ਅਡਵੈਂਚਰ - [ ] ਕ੍ਰੀਏਟਿਵ ਫਲੇਅਰ ਨਾਲ ਟੈਰੀਰੀਅਮ ਸਟਾਈਲਿੰਗ ਅਸਾਈਨਮੈਂਟ ਪੂਰਾ ਕਰੋ - [ ] CSS Grid ਵਿੱਚ ਮਾਹਰ ਬਣੋ ਇੱਕ ਫੋਟੋ ਗੈਲਰੀ ਲੇਆਉਟ ਬਣਾਉਣ ਦੁਆਰਾ - [ ] CSS ਐਨੀਮੇਸ਼ਨ ਸਿੱਖੋ ਆਪਣੇ ਡਿਜ਼ਾਈਨਾਂ ਨੂੰ ਜ਼ਿੰਦਾ ਕਰਨ ਲਈ - [ ] CSS ਪ੍ਰੀ-ਪ੍ਰੋਸੈਸਰ ਜਿਵੇਂ Sass ਜਾਂ Less ਦੀ ਖੋਜ ਕਰੋ - [ ] ਡਿਜ਼ਾਈਨ ਸਿਧਾਂਤਾਂ ਦਾ ਅਧਿਐਨ ਕਰੋ ਅਤੇ CSS 'ਤੇ ਲਾਗੂ ਕਰੋ - [ ] ਆਨਲਾਈਨ ਮਿਲਣ ਵਾਲੇ ਦਿਲਚਸਪ ਡਿਜ਼ਾਈਨਾਂ ਦਾ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰੋ ਅਤੇ ਦੁਬਾਰਾ ਬਣਾਓ ### 🌟 ਤੁਹਾਡੀ ਮਹੀਨੇ-ਲੰਬੀ ਡਿਜ਼ਾਈਨ ਮਾਹਰਤਾ - [ ] ਇੱਕ ਪੂਰੀ ਰਿਸਪਾਂਸਿਵ ਵੈੱਬਸਾਈਟ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਬਣਾਓ - [ ] CSS-in-JS ਜਾਂ utility-first frameworks ਜਿਵੇਂ Tailwind ਸਿੱਖੋ - [ ] CSS ਸੁਧਾਰਾਂ ਨਾਲ ਖੁੱਲ੍ਹੇ ਸਰੋਤ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਓ - [ ] CSS ਦੇ ਉੱਚੇ ਸਿਧਾਂਤਾਂ ਜਿਵੇਂ CSS custom properties ਅਤੇ containment ਵਿੱਚ ਮਾਹਰ ਬਣੋ - [ ] ਮੋਡਿਊਲ CSS ਨਾਲ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ ਕੰਪੋਨੈਂਟ ਲਾਇਬ੍ਰੇਰੀਆਂ ਬਣਾਓ - [ ] CSS ਸਿੱਖਣ ਵਾਲਿਆਂ ਨੂੰ ਮਦਦ ਦਿਓ ਅਤੇ ਡਿਜ਼ਾਈਨ ਗਿਆਨ ਸਾਂਝਾ ਕਰੋ ## 🎯 ਤੁਹਾਡਾ CSS ਮਾਹਰਤਾ ਟਾਈਮਲਾਈਨ ### 🛠️ ਤੁਹਾਡਾ CSS ਟੂਲਕਿਟ ਸੰਖੇਪ ਇਹ ਪਾਠ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਹੁਣ ਤੁਹਾਡੇ ਕੋਲ ਹੈ: - Cascade Understanding: ਕਿਵੇਂ ਸ਼ੈਲੀਆਂ ਵਾਰਸ ਅਤੇ ਓਵਰਰਾਈਡ ਹੁੰਦ --- ਅਸਵੀਕਰਤੀ: ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।
Terrarium Project Part 1: Introduction to HTML
HTML, or HyperText Markup Language, na di foundation of every website wey you don ever visit. Think of HTML as di skeleton wey dey give structure to web pages – e dey define where content go, how e dey organized, and wetin each piece mean. While CSS go later "dress up" your HTML with colors and layouts, and JavaScript go bring am to life wit interactivity, HTML na di essential structure wey dey make everything else possible. For dis lesson, you go create di HTML structure for virtual terrarium interface. Dis hands-on project go teach you fundamental HTML concepts while you dey build something wey go dey visually engaging. You go learn how to organize content using semantic elements, work wit images, and create di foundation for interactive web application. By di end of dis lesson, you go get working HTML page wey dey show plant images for organized columns, ready for styling for di next lesson. No worry if e look basic at first – na exactly wetin HTML suppose do before CSS add di visual polish. ## Pre-Lecture Quiz Pre-lecture quiz ## Setting Up Your Project Before we dive into HTML code, mek we set up proper workspace for your terrarium project. Creating organized file structure from di beginning na important habit wey go serve you well throughout your web development journey. ### Task: Create Your Project Structure You go create dedicated folder for your terrarium project and add your first HTML file. Here be two approaches wey you fit use: Option 1: Using Visual Studio Code 1. Open Visual Studio Code 2. Click "File" → "Open Folder" or use Ctrl+K, Ctrl+O (Windows/Linux) or Cmd+K, Cmd+O (Mac) 3. Create new folder wey dem name terrarium and select am 4. For Explorer pane, click "New File" icon 5. Name your file index.html Option 2: Using Terminal Commands Here na wetin these commands dey do: - Creates new directory wey dem name terrarium for your project - Navigates inside di terrarium directory - Creates empty index.html file - Opens di file for Visual Studio Code make you fit edit ## Understanding HTML Document Structure Every HTML document follow specific structure wey browsers need to understand and display well. Think of dis structure like formal letter – e get required elements for particular order wey dey help di recipient (na di browser) process di content well. Make we start by adding di essential foundation wey every HTML document need. ### The DOCTYPE Declaration and Root Element Di first two lines of any HTML file na di document's "introduction" to di browser: Understanding wetin dis code dey do: - Declares di document type as HTML5 using <!DOCTYPE html> - Creates di root <html> element wey go contain all page content - Establishes modern web standards for proper browser rendering - Ensures consistent display across different browsers and devices ### 🔄 Pedagogical Check-in Pause and Reflect: Before you continue, make sure say you understand: - ✅ Why every HTML document need DOCTYPE declaration - ✅ Wetin di <html> root element contain - ✅ How dis structure dey help browsers render pages well Quick Self-Test: Fit explain with your own words wetin "standards-compliant rendering" mean? ## Adding Essential Document Metadata Di <head> section of HTML document get important information wey browsers and search engines need, but visitors no dey see am directly on di page. Think am as "behind-the-scenes" info wey help your webpage work well and show correctly across different devices and platforms. Dis metadata dey tell browsers how to display your page, wetin character encoding to use, and how to handle different screen sizes – all na important for creating professional, accessible web pages. ### Task: Add the Document Head Put dis <head> section between your opening and closing <html> tags: Breaking down wetin each element dey do: - Sets di page title wey go show for browser tabs and search results - Specifies UTF-8 character encoding for proper text display around di world - Ensures compatibility with modern versions of Internet Explorer - Configures responsive design by setting di viewport to match device width - Controls initial zoom level make content show normally ## Building the Document Body Di <body> element get all di visible content of your webpage – everything wey users go see and interact with. While di <head> section dey give instructions to di browser, di <body> section get di actual content: text, images, buttons, and other elements wey go create your user interface. Make we add body structure and understand how HTML tags dey work together to create meaningful content. ### Understanding HTML Tag Structure HTML dey use paired tags to define elements. Most tags get opening tag like <p> and closing tag like </p>, with content inside: <p>Hello, world!</p>. Dis one create paragraph element wey contain di text "Hello, world!". ### Task: Add the Body Element Update your HTML file to include di <body> element: Here na wetin dis complete structure dey provide: - Establishes di basic HTML5 document framework - Includes important metadata for proper browser rendering - Creates empty body ready for your visible content - Follows modern web development best practices Now you ready to add di visible elements of your terrarium. We go use <div> elements as containers to organize different sections of content, and <img> elements to show di plant images. ### Working with Images and Layout Containers Images special for HTML because dem dey use "self-closing" tags. Unlike elements like <p></p> wey dey wrap content, di <img> tag contain all info e need inside di tag itself using attributes like src for di image file path and alt for accessibility. Before you add images to your HTML, you gats organize your project files well by creating images folder and adding di plant graphics. First, set up your images: 1. Create folder wey dem call images inside your terrarium project folder 2. Download di plant images from solution folder (14 plant images total) 3. Copy all di plant images enter your new images folder ### Task: Create the Plant Display Layout Now add di plant images organized in two columns between your <body></body> tags: Step by step, na wetin dey happen for dis code: - Creates main page container with id="page" to hold all content - Establishes two column containers: left-container and right-container - Organizes 7 plants for left column and 7 plants for right column - Wraps each plant image inside plant-holder div for individual positioning - Applies consistent class names for CSS styling later - Assigns unique IDs to each plant image for JavaScript interaction later - Includes correct file paths wey point to di images folder ### 🔄 Pedagogical Check-in Structure Understanding: Take small time to review your HTML structure: - ✅ Fit identify main containers for your layout? - ✅ You understand why each image get unique ID? - ✅ How you go describe di purpose of plant-holder divs? Visual Inspection: Open your HTML file for browser. You suppose see: - Basic list of plant images - Images arranged for two columns - Simple, unstyled layout Remember: Dis plain look na wetin HTML suppose be before CSS styling! With dis markup added, di plants go show for screen, though dem no go look polished yet – na di work for CSS for di next lesson! For now, you get solid HTML foundation wey organize your content well and follow accessibility best practices. ## Using Semantic HTML for Accessibility Semantic HTML mean say you dey pick HTML elements based on their meaning and purpose, no be only their appearance. When you use semantic markup, you dey talk di structure and meaning of your content to browsers, search engines, and assistive technologies like screen readers. Dis method dey make your websites more accessible to users with disabilities and dey help search engines better understand your content. E be fundamental principle of modern web development wey dey create better experiences for everybody. ### Adding a Semantic Page Title Make we add proper heading to your terrarium page. Insert dis line right after your opening <body> tag: Why semantic markup dey important: - Helps screen readers navigate and understand page structure - Improves search engine optimization (SEO) by clarifying content hierarchy - Enhances accessibility for users with visual impairments or cognitive differences - Creates better user experiences across all devices and platforms - Follows web standards and best practices for professional development Examples of semantic vs. non-semantic choices: ## Creating the Terrarium Container Now make we add di HTML structure for di terrarium itself – di glass container wey plants go eventually dey inside. Dis section dey show important concept: HTML dey provide structure, but without CSS styling, these elements no go visible yet. Di terrarium markup dey use descriptive class names wey go make CSS styling simple and maintainable for next lesson. ### Task: Add the Terrarium Structure Insert dis markup above di last </div> tag (before di closing tag of di page container): Understanding dis terrarium structure: - Creates main terrarium container with unique ID for styling - Defines separate elements for each visual component (top, walls, dirt, bottom) - Includes nested elements for glass reflection effects (glossy elements) - Uses descriptive class names wey clearly show wetin each element dey do - Prepares the structure for CSS styling wey go create the glass terrarium look ### 🔄 Pedagogical Check-in HTML Structure Mastery: Before you move forward, make sure say you fit: - ✅ Explain the difference between HTML structure and how e dey show for eye - ✅ Identify semantic and non-semantic HTML elements - ✅ Talk how correct markup go help make am easier for people to use your site well - ✅ Recognize the full document tree structure Testing Your Understanding: Try open your HTML file for browser wey JavaScript no dey and CSS comot finish. This one go show you the pure semantic structure wey you create! --- ## GitHub Copilot Agent Challenge Use the Agent mode to complete the following challenge: Description: Create a semantic HTML structure for plant care guide section wey fit add to the terrarium project. Prompt: Create semantic HTML section wey get main heading "Plant Care Guide", three subsections wey get headings "Watering", "Light Requirements", and "Soil Care", each get paragraph wey talk plant care information. Use correct semantic HTML tags like <section>, <h2>, <h3>, and <p> to arrange the content well. Learn more about agent mode here. ## Explore HTML History Challenge Learning About Web Evolution HTML don evolve well well since Tim Berners-Lee make the first web browser for CERN for 1990. Some old tags like <marquee> don become outdated because dem no too work well with modern accessibility standards and responsive design. Try This Experiment: 1. Temporarily put your <h1> title inside <marquee> tag: <marquee><h1>My Terrarium</h1></marquee> 2. Open your page for browser and watch the scrolling effect 3. Think why them ban that tag (hint: think about user experience and accessibility) 4. Remove the <marquee> tag and comot back to semantic markup Reflection Questions: - How e fit affect people wey get visual problem or motion sensitivity if title dey move like that? - Which modern CSS ways fit do similar visual effects wey be better for everybody? - Why e important to use current web standards instead of old elements wey no dey supported? Explore more about obsolete and deprecated HTML elements to sabi how web standards dey evolve to help user experience. ## Post-Lecture Quiz Post-lecture quiz ## Review & Self Study Deepen Your HTML Knowledge HTML don be the base of web for over 30 years, e begin as simple document markup language, now e don become strong platform to build interactive applications. To sabi dis evolution go help you appreciate modern web standards and take better development decisions. Recommended Learning Paths: 1. HTML History and Evolution - Research from HTML 1.0 reach HTML5 - Find out why some tags they ban (because of accessibility, mobile-friendliness, maintainability) - Explore new HTML features and proposals 2. Semantic HTML Deep Dive - Learn the full list of HTML5 semantic elements - Practice when to use <article>, <section>, <aside>, and <main> - Learn about ARIA attributes for better accessibility 3. Modern Web Development - Explore building responsive websites on Microsoft Learn - Understand how HTML dey connect with CSS and JavaScript - Learn about web performance and SEO best practices Reflection Questions: - Which deprecated HTML tags you find, and why dem ban am? - Which new HTML features dem dey plan for future versions? - How semantic HTML dey help web accessibility and SEO? ### ⚡ Wetin You Fit Do for Next 5 Minutes - [ ] Open DevTools (F12) check the HTML structure of your favourite website - [ ] Create simple HTML file with basic tags: <h1>, <p>, and <img> - [ ] Validate your HTML with W3C HTML Validator online - [ ] Try add comment for your HTML with <!-- comment --> ### 🎯 Wetin You Fit Achieve This Hour - [ ] Finish the post-lesson quiz and review semantic HTML concepts - [ ] Build simple webpage about yourself with correct HTML structure - [ ] Try different heading levels and text formatting tags - [ ] Add images and links to practise multimedia work - [ ] Research HTML5 features wey you never try yet ### 📅 Your Week-Long HTML Journey - [ ] Finish the terrarium project with semantic markup - [ ] Create accessible webpage using ARIA labels and roles - [ ] Practice form building with different input types - [ ] Explore HTML5 APIs like localStorage or geolocation - [ ] Study responsive HTML patterns and mobile-first design - [ ] Check other developers' HTML code for best practices ### 🌟 Your Month-Long Web Foundation - [ ] Build portfolio website to show your HTML skill - [ ] Learn HTML templating with framework like Handlebars - [ ] Help open source projects by improving HTML docs - [ ] Master advanced HTML concepts like custom elements - [ ] Mix HTML with CSS frameworks and JavaScript libraries - [ ] Mentor others wey dey learn HTML fundamentals ## 🎯 Your HTML Mastery Timeline ### 🛠️ Your HTML Toolkit Summary After you finish this lesson, you don get: - Document Structure: Complete HTML5 foundation with correct DOCTYPE - Semantic Markup: Meaningful tags wey improve accessibility and SEO - Image Integration: Proper file organization and alt text practice - Layout Containers: Smart use of divs with descriptive class names - Accessibility Awareness: Understanding how screen readers navigate - Modern Standards: Current HTML5 way and knowledge of deprecated tags - Project Foundation: Strong base for CSS styling and JavaScript interactivity Next Steps: Your HTML structure don ready for CSS styling! The semantic base you build go make the next lesson easy to understand. ## Assignment Practice your HTML: Build a blog mockup --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Disclaimer: Dis document don translate wit AI translation service Co-op Translator. Even though we try make e correct, make you sabi say automated translations fit get mistake or no too correct. Di original document wey e bin write for im own language na di correct one. For important information, e good make professional human translation do am. We no go responsible for any wrong understanding or mistake wey fit happen because of this translation. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Project Part 2: Introduction to CSS
Memba how your HTML terrarium bin fine simple? CSS na di place wey we go take change dat plain structure come one wey fine for eye. If HTML be like di building frame for house, then CSS na wetin make e feel like home - di paint color dem, how furniture arrange, di light dem, and how di rooms dey flow together. Think about how Palace of Versailles start as small hunting lodge, but correct attention to decoration and layout turn am to one of di world’s most fine buildings. Today, we go change your terrarium from just working to fine finish. You go learn how to position elements correct correct, make layouts dey respond to different screen sizes, and make di visual fine wey dey make websites dey interesting. By di end of dis lesson, you go see how correct CSS styling fit improve your project well well. Make we add style to your terrarium. ## Pre-Lecture Quiz Pre-lecture quiz ## Getting Started with CSS People often talk say CSS na just to make things fine, but e get plenty purpose pass dat. CSS na like director for movie - you dey control not just how everything look, but how e dey move, how e take respond to interaction, and how e take change for different situations. Modern CSS get power well well. You fit write code wey go automatically adjust layout for phone, tablet, and desktop. You fit create smooth animation wey go guide users eye where e suppose dey. Di result fit dey very impressive when everything work together well. Wet we go do for dis lesson be: - Create complete visual design for your terrarium using modern CSS techniques - Explore fundamental concepts like cascade, inheritance, and CSS selectors - Implement responsive positioning and layout strategies - Build di terrarium container using CSS shapes and styling ### Prerequisite You suppose don finish di HTML structure for your terrarium from di last lesson and dem dey ready for styling. ### Setting Up Your CSS File Before we fit start styling, we gats connect CSS to our HTML. Dis connection go tell di browser where to find di styling instruction for our terrarium. For your terrarium folder, create new file wey dem go call style.css, then link am for your HTML document <head> section: Wet dis code dey do be: - Create connection between your HTML and CSS files - Tell di browser to load and apply di styles from style.css - Use di rel="stylesheet" attribute to talk say dis na CSS file - Reference di file path with href="./style.css" ## Understanding the CSS Cascade You don ever wonder why dem call CSS "Cascading" Style Sheets? Styles dey cascade down like waterfall, and sometimes dem dey clash. Think about how military command structures dey work - one general order fit talk say "all troops make dem wear green," but specific order for your unit fit talk say "wear dress blues for di ceremony." Di specific order go win. CSS dey follow dis kind logic, and if you understand dis hierarchy, e go make debugging easy. ### Experimenting with Cascade Priority Make we see di cascade work by creating style wahala. First, add inline style to your <h1> tag: Wet dis code dey do: - Apply red color direct to <h1> element using inline styling - Use di style attribute to put CSS direct for HTML - Create highest priority style rule for dis specific element Next, put dis rule for your style.css file: For di code top, we: - Define CSS rule wey target all <h1> elements - Set di text color to blue using external stylesheet - Create lower priority rule compared to inline styles ✅ Knowledge Check: Which color your web app go show? Why dat color win? You fit think of situations wey you go like override styles? ## CSS Inheritance in Action CSS inheritance be like genetics - elements dey inherit some properties from their parent elements. If you set font family for body element, all text inside go use dat same font. E resemble how Habsburg family jawline appear for generations without e get to talk about am for each person. But no be everything dey inherit. Text styles like fonts and colors dey inherit, but layout properties like margins and borders no dey. Just like pikin fit inherit physical traits but no inherit their parents fashion choice. ### Observing Font Inheritance Make we see inheritance work by setting font family on <body> element: Wet happen here: - Set font family for whole page by targeting <body> element - Use font stack with fallback options for better browser compatibility - Apply modern system fonts wey fine for different operating systems - Ensure all child elements inherit dis font unless dem override am Open browser developer tools (F12), go Elements tab, inspect your <h1> element. You go see say e inherit font family from body: ✅ Experiment Time: Try set other inheritable properties for <body> like color, line-height, or text-align. Wetin happen to your heading and other elements? ### 🔄 Pedagogical Check-in CSS Foundation Understanding: Before you waka go selectors, make sure you fit: - ✅ Explain di difference between cascade and inheritance - ✅ Predict which style go win for specificity conflict - ✅ Identify which properties dey inherit from parent elements - ✅ Connect CSS files to HTML correct Quick Test: If you get these styles, which color <h1> inside <div class="special"> go be? Answer: Red (element selector direct target h1) ## Mastering CSS Selectors CSS selectors na your way to target specific elements for styling. Dem work like giving exact direction - instead of saying "di house," you fit talk "di blue house wey get red door for Maple Street." CSS get different ways to be specific, and to choose di correct selector na like to choose correct tool for di job. Sometimes you want style every door for neighborhood, sometime na just the one door. ### Element Selectors (Tags) Element selectors dey target HTML elements by their tag name. Dem good for base styles wey go apply for the entire page: Understanding dis styles: - Set consistent typography across whole page with body selector - Remove default browser margins and padding for better control - Style all heading elements with color, alignment, and spacing - Use rem units for font wey fit scale and dey accessible Even though element selectors good for general styling, you go still need specific selectors to style individual parts like di plants for your terrarium. ### ID Selectors for Unique Elements ID selectors use # symbol and dem target elements with specific id attributes. Because IDs suppose to be unique for a page, dem good for styling individual special elements like our left and right plant containers. Make we create styling for our terrarium side containers wey plants go dey: Wet dis code do be: - Position containers for far left and right side using absolute positioning - Use vh (viewport height) units for height wey go adjust according to screen size - Apply box-sizing: border-box to include padding for overall width - Remove unnecessary px units from zero values to make code fine - Set subtle background color wey easy for eye pass plain gray ✅ Code Quality Challenge: You notice say dis CSS dey break DRY (Don't Repeat Yourself) rule. Fit refactor am with both ID and class? Better way to do am: ### Class Selectors for Reusable Styles Class selectors use . symbol and dem good for when you want apply same styles to many elements. Unlike IDs, classes fit dey used plenty times for your HTML, making dem perfect for consistent styling. Inside our terrarium, each plant need similar styling but also need individual position. We go use mix of classes for shared styles and IDs for individual placement. Dis na di HTML structure for each plant: Key elements explain: - Use class="plant-holder" for container styling wey dey same for all plants - Apply class="plant" for shared image styling and behaviour - Include unique id="plant1" for individual positioning and JavaScript interaction - Provide descriptive alt text for screen reader access Now put these styles for your style.css file: Wet dey happen for these styles: - Create relative positioning for plant holder to make positioning context - Set each plant holder to 13% height, to fit all plants vertically without scrolling - Shift holders small left to better center plants inside their container - Allow plants to scale responsively using max-width and max-height - Use z-index to put plants ahead of other things for terrarium - Add small hover effect with CSS transitions for better user interaction ✅ Critical Thinking: Why we need both .plant-holder and .plant selectors? Which tin go happen if you use only one? ## Understanding CSS Positioning CSS positioning na like being stage director for play - you direct where each actor stand and how dem move. Some actors follow normal formation, others need special position for drama. Once you understand positioning, many layout problems go dey easy. You want navigation bar wey no go comot from top when user dey scroll? Positioning na di solution. You want tooltip wey go show for one specific place? Na positioning too. ### The Five Position Values ### Positioning in Our Terrarium Our terrarium use correct combination of positioning types to get di layout we want: Understand di positioning strategy: - Absolute containers comot for normal document flow and dey pinned to screen edges - Relative plant holders create positioning context while dem dey for document flow - Absolute plants fit position well inside their relative containers - Dis combination allow plants stack vertical and still fit uniquely positioned each one ✅ Experiment Time: Try change positioning values and watch wetin happen: - Wetin go happen if you change .container from absolute to relative? - How di layout go change if .plant-holder use absolute instead of relative? - Wetin go happen when you switch .plant to relative positioning? ### 🔄 Pedagogical Check-in CSS Positioning Mastery: Pause to check say you sabi well: - ✅ You fit explain why plants need absolute positioning for drag-and-drop? - ✅ You understand how relative containers dey create positioning context? - ✅ Why side containers dem dey use absolute positioning? - ✅ Wetin go happen if you comot position declarations finish? Real-World Connection: Think about how CSS positioning dey imitate real-world layout: - Static: Books for shelf (natural order) - Relative: Move book small but still keep im position - Absolute: Put bookmark for exact page number - Fixed: Sticky note wey dey remain visible as you dey flip pages ## Building the Terrarium with CSS Now we go build glass jar using only CSS - no images or graphics software needed. To create glass wey dey realistic, shadows, and depth effects using positioning and transparency na how CSS sabi make things visual. This method dey resemble how architects for Bauhaus movement take simple geometric shapes create complex, beautiful buildings. Once you understand these principles, you go fit see the CSS skill for many web designs. ### Creating the Glass Jar Components Make we build the terrarium jar piece by piece. Each part use absolute positioning and percentage-based sizing for responsive design: Understanding the terrarium construction: - Uses percentage-based dimensions for scaling well on all screen sizes - Positions elements absolute to stack and align am well - Applies different opacity levels to make glass transparency effect - Implements z-index layering so plants fit show inside the jar - Adds subtle box-shadow and neat border-radius for more realistic look ### Responsive Design with Percentages See how all dimensions dey use percentage instead of fixed pixel values: Why dis matter: - Ensure say terrarium scales well for any screen size - Maintain visual relationship between jar parts - Provide consistent experience from mobile phones to big desktop monitors - Allow design to adapt without spoiling visual layout ### CSS Units in Action We dey use rem units for border-radius, wey scale relative to root font size. This one dey create easier-to-access designs wey respect user font preferences. Learn more about CSS relative units for official specs. ✅ Visual Experimentation: Try change these values and watch di effects: - Change jar opacity from 0.5 to 0.8 – how e go affect glass look? - Change dirt color from #3a241d to #8B4513 – which kind visual impact e get? - Modify z-index of dirt to 2 – wetin go happen to layering? ### 🔄 Pedagogical Check-in CSS Visual Design Understanding: Confirm say you sabi visual CSS well: - ✅ How percentage-based dimensions dey create responsive design? - ✅ Why opacity dey create glass transparency effect? - ✅ Wetin be role of z-index for layering elements? - ✅ How border-radius values dey create jar shape? Design Principle: Notice how we dey build complex visuals from simple shapes: 1. Rectangles → Rounded rectangles → Jar components 2. Flat colors → Opacity → Glass effect 3. Individual elements → Layered composition → 3D appearance --- ## GitHub Copilot Agent Challenge 🚀 Use Agent mode to complete this challenge: Description: Create CSS animation wey go make terrarium plants gently sway back and forth, like breeze dey blow. This go help you practice CSS animations, transforms, and keyframes to make your terrarium fine. Prompt: Add CSS keyframe animations to make the plants for terrarium sway gently side to side. Create sway animation wey go rotate each plant small (2-3 degrees) left and right with duration of 3-4 seconds, and apply am to .plant class. Make sure say animation dey loop forever and get easing function for natural movement. Learn more about agent mode here. ## 🚀 Challenge: Adding Glass Reflections Ready to make your terrarium better with real glass reflections? This technique go add depth and realism to design. You go create subtle white or light-colored oval shapes for glass reflections. Position dem well for left side of jar, apply correct opacity and blur effects for realistic light reflection, use border-radius to make organic, bubble-like shapes, and experiment with gradients or box-shadows for strong realism. ## Post-Lecture Quiz Post-lecture quiz ## Expand Your CSS Knowledge CSS fit look hard at first, but understanding these main concepts go give you strong foundation for advanced techniques. Your next CSS learning areas: - Flexbox - simplify alignment and distribution of elements - CSS Grid - give powerful tools for complex layouts - CSS Variables - reduce repetition and make maintenance easy - Responsive design - make sure sites work well on different screen sizes ### Interactive Learning Resources Practice these concepts with these fun, hands-on games: - 🐸 Flexbox Froggy - Master Flexbox through fun challenges - 🌱 Grid Garden - Learn CSS Grid by growing virtual carrots - 🎯 CSS Battle - Test your CSS skills with coding challenges ### Additional Learning For full CSS basics, finish this Microsoft Learn module: Style your HTML app with CSS ### ⚡ Wetin You Fit Do For Next 5 Minutes - [ ] Open DevTools and inspect CSS styles on any website using Elements panel - [ ] Create simple CSS file and link am to HTML page - [ ] Try change colors using diff methods: hex, RGB, and named colors - [ ] Practice box model by adding padding and margin to div ### 🎯 Wetin You Fit Achieve Dis Hour - [ ] Complete post-lesson quiz and review CSS basics - [ ] Style your HTML page with fonts, colors, and spacing - [ ] Create simple layout using flexbox or grid - [ ] Experiment with CSS transitions for smooth effects - [ ] Practice responsive design with media queries ### 📅 Your Week-Long CSS Journey - [ ] Complete terrarium styling task with creativity - [ ] Master CSS Grid by building photo gallery layout - [ ] Learn CSS animations to bring your designs alive - [ ] Explore CSS preprocessors like Sass or Less - [ ] Study design principles and apply am for CSS - [ ] Analyze and recreate interesting designs you find online ### 🌟 Your Month-Long Design Mastery - [ ] Build complete responsive website design system - [ ] Learn CSS-in-JS or utility-first frameworks like Tailwind - [ ] Contribute to open source projects with CSS improvements - [ ] Master advanced CSS concepts like custom properties and containment - [ ] Create reusable components libraries with modular CSS - [ ] Mentor others wey dey learn CSS and share design knowledge ## 🎯 Your CSS Mastery Timeline ### 🛠️ Your CSS Toolkit Summary After completing dis lesson, you get: - Cascade Understanding: How styles dey inherit and override each other - Selector Mastery: Precise targeting with elements, classes, and IDs - Positioning Skills: Strategic element placing and layering - Visual Design: Creating glass effects, shadows, and transparency - Responsive Techniques: Percentage-based layouts wey go adapt to any screen - Code Organization: Clean, maintainable CSS structure - Modern Practices: Using relative units and accessible design patterns Next Steps: Your terrarium now get both structure (HTML) and style (CSS). Final lesson go add interactivity with JavaScript! ## Assignment CSS Refactoring --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Disclaimer: Dis document don translate wit AI translation service wey dem dey call Co-op Translator. Even though we try make am correct, abeg make you sabi say automated translation fit get some mistakes or wrong tins. Di original document wey na di native language na di correct source. If na important tin you dey look for, make you use person wey sabi professional translation. We no go carry any yawa wey fit happen if person misunderstand or misinterpret dis translation. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Projekt Terrarium Część 1: Wprowadzenie do HTML
HTML, czyli HyperText Markup Language, to fundament każdej odwiedzanej witryny. Pomyśl o HTML jak o szkielecie nadającym strukturę stronom internetowym – definiuje, gdzie trafia zawartość, jak jest zorganizowana i co reprezentuje każdy element. Podczas gdy CSS później "ubrać" Twój HTML kolorami i układami, a JavaScript tchnie w niego życie dzięki interaktywności, HTML zapewnia niezbędną strukturę, która umożliwia wszystko inne. W tej lekcji stworzysz strukturę HTML dla wirtualnego interfejsu terrarium. Ten praktyczny projekt nauczy Cię podstawowych pojęć HTML, jednocześnie budując coś wizualnie angażującego. Nauczysz się organizować zawartość za pomocą semantycznych elementów, pracować z obrazami i stworzyć fundament pod interaktywną aplikację webową. Pod koniec lekcji będziesz mieć działającą stronę HTML wyświetlającą obrazy roślin w uporządkowanych kolumnach, gotową do stylizacji w następnej lekcji. Nie martw się, jeśli na początku będzie wyglądać to prosto – dokładnie tak powinien wyglądać HTML zanim CSS doda wizualny szlif. ## Quiz przed wykładem Quiz przed wykładem ## Konfigurowanie projektu Zanim zanurzymy się w kod HTML, ustawmy odpowiednie miejsce pracy dla Twojego projektu terrarium. Utworzenie zorganizowanej struktury plików od samego początku to kluczowy nawyk, który będzie Ci służył przez całą przygodę z tworzeniem stron. ### Zadanie: Stwórz strukturę projektu Stworzysz dedykowany folder dla projektu terrarium i dodasz pierwszy plik HTML. Oto dwa podejścia, które możesz wykorzystać: Opcja 1: Korzystanie z Visual Studio Code 1. Otwórz Visual Studio Code 2. Kliknij „Plik” → „Otwórz folder” lub użyj Ctrl+K, Ctrl+O (Windows/Linux) lub Cmd+K, Cmd+O (Mac) 3. Utwórz nowy folder o nazwie terrarium i wybierz go 4. W panelu Eksploratora kliknij ikonę „Nowy plik” 5. Nazwij swój plik index.html Opcja 2: Korzystanie z poleceń terminala Co robią te polecenia: - Tworzą nowy katalog o nazwie terrarium na Twój projekt - Przechodzą do katalogu terrarium - Tworzą pusty plik index.html - Otwierają plik w Visual Studio Code do edycji ## Zrozumienie struktury dokumentu HTML Każdy dokument HTML ma określoną strukturę, którą przeglądarki muszą zrozumieć, aby poprawnie wyświetlać zawartość. Pomyśl o tej strukturze jak o formalnym liście – ma wymagane elementy w ustalonej kolejności, które pomagają odbiorcy (czyli przeglądarce) poprawnie przetworzyć zawartość. Zacznijmy od dodania niezbędnej podstawy, której potrzebuje każdy dokument HTML. ### Deklaracja DOCTYPE i element root Pierwsze dwie linijki każdego pliku HTML to „wprowadzenie” dokumentu dla przeglądarki: Co robi ten kod: - Deklaruje typ dokumentu jako HTML5 za pomocą <!DOCTYPE html> - Tworzy element root <html>, który będzie zawierać całą zawartość strony - Ustanawia nowoczesne standardy webowe dla poprawnego renderowania w przeglądarkach - Zapewnia spójne wyświetlanie we wszystkich przeglądarkach i na różnych urządzeniach ### 🔄 Sprawdzenie pedagogiczne Zatrzymaj się i przemyśl: Przed kontynuacją upewnij się, że rozumiesz: - ✅ Dlaczego każdy dokument HTML potrzebuje deklaracji DOCTYPE - ✅ Co zawiera element root <html> - ✅ Jak ta struktura pomaga przeglądarkom poprawnie renderować strony Szybki test samodzielny: Czy potrafisz własnymi słowami wyjaśnić, co oznacza „renderowanie zgodne ze standardami”? ## Dodawanie niezbędnych metadanych dokumentu Sekcja <head> dokumentu HTML zawiera kluczowe informacje, których przeglądarki i wyszukiwarki potrzebują, ale których odwiedzający bezpośrednio na stronie nie widzą. Pomyśl o niej jak o „kulisy” informacji, które pomagają Twojej stronie działać poprawnie i wyglądać dobrze na różnych urządzeniach i platformach. Te metadane informują przeglądarki, jak wyświetlać stronę, jakie kodowanie znaków stosować i jak obsługiwać różne rozmiary ekranów – to wszystko niezbędne do tworzenia profesjonalnych, dostępnych stron internetowych. ### Zadanie: Dodaj sekcję head Wstaw tę sekcję <head> między otwierającym i zamykającym tagiem <html>: Co robi każdy element: - Ustawia tytuł strony pojawiający się na kartach przeglądarki i w wynikach wyszukiwania - Określa kodowanie znaków UTF-8 dla poprawnego wyświetlania tekstu na całym świecie - Zapewnia kompatybilność z nowoczesnymi wersjami Internet Explorera - Konfiguruje design responsywny przez ustawienie viewport zgodnie z szerokością urządzenia - Kontroluje początkowy poziom powiększenia, aby zawartość wyświetlała się w naturalnym rozmiarze ## Budowa ciała dokumentu Element <body> zawiera całą widoczną zawartość strony – wszystko, co użytkownicy zobaczą i z czym będą wchodzić w interakcję. Podczas gdy sekcja <head> dostarczała instrukcji dla przeglądarki, sekcja <body> zawiera faktyczną zawartość: tekst, obrazy, przyciski i inne elementy tworzące interfejs użytkownika. Dodajmy strukturę ciała i zrozummy, jak tagi HTML współpracują, by tworzyć znaczącą zawartość. ### Zrozumienie struktury tagów HTML HTML używa par tagów do definiowania elementów. Większość tagów ma otwierający <p> i zamykający </p>, a pomiędzy nim zawartość: <p>Witaj, świecie!</p>. Tworzy to element akapitu zawierający tekst „Witaj, świecie!”. ### Zadanie: Dodaj element body Uaktualnij plik HTML, aby zawierał element <body>: Co oferuje ta kompletna struktura: - Tworzy podstawowy szkielet dokumentu HTML5 - Zawiera niezbędne metadane do właściwego renderowania w przeglądarce - Tworzy pusty body gotowy na widoczną zawartość - Zgodna z najlepszymi praktykami nowoczesnego tworzenia stron Teraz możesz dodać widoczne elementy swojego terrarium. Użyjemy elementów <div> jako pojemników do organizacji różnych sekcji zawartości oraz elementów <img> do wyświetlania obrazów roślin. ### Praca z obrazami i kontenerami układu Obrazy w HTML są szczególne, ponieważ używają tagów samodomykających się. W odróżnieniu od elementów takich jak <p></p>, które otaczają zawartość, tag <img> zawiera wszystkie informacje bezpośrednio wewnątrz tagu za pomocą atrybutów takich jak src dla ścieżki pliku i alt dla dostępności. Zanim dodasz obrazy do HTML, musisz właściwie zorganizować pliki projektu, tworząc folder images i dodając w nim grafiki roślin. Najpierw przygotuj obrazy: 1. Utwórz folder images wewnątrz folderu projektu terrarium 2. Pobierz obrazy roślin z folderu rozwiązania (łącznie 14 obrazów) 3. Skopiuj wszystkie obrazy roślin do nowego folderu images ### Zadanie: Stwórz układ wyświetlania roślin Dodaj teraz obrazy roślin zorganizowane w dwóch kolumnach między tagami <body></body>: Co krok po kroku robi ten kod: - Tworzy główny pojemnik strony z id="page" na całą zawartość - Ustanawia dwa pojemniki kolumn: left-container i right-container - Organizuje 7 roślin w lewej i 7 w prawej kolumnie - Opakowuje każdy obraz rośliny w div plant-holder dla indywidualnego pozycjonowania - Stosuje spójne nazwy klas do stylizacji CSS w następnej lekcji - Przypisuje unikalne ID każdemu obrazowi rośliny do późniejszej interakcji w JavaScript - Zawiera właściwe ścieżki do folderu images ### 🔄 Sprawdzenie pedagogiczne Zrozumienie struktury: Poświęć chwilę na przegląd swojej struktury HTML: - ✅ Czy potrafisz wskazać główne pojemniki w układzie? - ✅ Czy rozumiesz, dlaczego każdy obraz ma unikalne ID? - ✅ Jak opisałbyś cel divów plant-holder? Sprawdzenie wizualne: Otwórz plik HTML w przeglądarce. Powinieneś zobaczyć: - Podstawową listę obrazów roślin - Obrazy zorganizowane w dwóch kolumnach - Prosty, niestylizowany układ Pamiętaj: Ta uproszczona forma to dokładnie to, jak HTML powinien wyglądać przed stylizacją CSS! Dzięki temu oznaczeniu rośliny pojawią się na ekranie, choć nie będą jeszcze dopracowane wizualnie – do tego służy CSS w następnej lekcji! Na teraz masz solidną bazę HTML, która dobrze organizuje zawartość i stosuje najlepsze praktyki dostępności. ## Używanie semantycznego HTML dla dostępności Semantyczny HTML oznacza dobór elementów HTML na podstawie ich znaczenia i roli, a nie tylko wyglądu. Kiedy stosujesz semantyczny znacznik, przekazujesz strukturę i znaczenie treści przeglądarkom, wyszukiwarkom i technologiom wspomagającym, takim jak czytniki ekranu. Takie podejście sprawia, że Twoje strony są bardziej dostępne dla osób z niepełnosprawnościami i pomaga wyszukiwarkom lepiej zrozumieć zawartość. To fundamentalna zasada współczesnego tworzenia stron, która tworzy lepsze doświadczenia dla wszystkich. ### Dodanie semantycznego tytułu strony Dodajmy teraz właściwy nagłówek na stronie terrarium. Wstaw tę linię zaraz po otwierającym tagu <body>: Dlaczego semantyczne znaczniki są ważne: - Pomagają czytnikom ekranu nawigować i rozumieć strukturę strony - Poprawiają SEO przez wyjaśnienie hierarchii treści - Zwiększają dostępność dla użytkowników z problemami wzroku lub różnicami poznawczymi - Tworzą lepsze doświadczenia użytkownika na wszystkich urządzeniach i platformach - Stosują standardy webowe i najlepsze praktyki profesjonalnego tworzenia stron Przykłady wyborów semantycznych vs niesemantycznych: ## Tworzenie kontenera terrarium Dodajmy teraz strukturę HTML samego terrarium – szklanego pojemnika, w którym w końcu zostaną umieszczone rośliny. Ta sekcja demonstruje ważną koncepcję: HTML zapewnia strukturę, ale bez stylizacji CSS te elementy jeszcze nie będą widoczne. Oznaczenia terrarium używają opisowych nazw klas, które uczynią stylizację CSS intuicyjną i łatwą do utrzymania w następnej lekcji. ### Zadanie: Dodaj strukturę terrarium Wstaw ten kod powyżej ostatniego tagu </div> (przed zamknięciem pojemnika strony): Co oznacza ta struktura terrarium: - Tworzy główny kontener terrarium z unikalnym ID do stylizacji - Definiuje oddzielne elementy dla każdego wizualnego składnika (góra, ściany, ziemia, dół) - Zawiera zagnieżdżone elementy dla efektów odbicia szkła (błyszczące elementy) - Używa opisowych nazw klas, które jasno wskazują przeznaczenie każdego elementu - Przygotowuje strukturę do stylizacji CSS, która stworzy wygląd szklanego terrarium ### 🔄 Pedagogiczna kontrola Opanowanie struktury HTML: Przed dalszą nauką upewnij się, że potrafisz: - ✅ Wyjaśnić różnicę między strukturą HTML a wyglądem wizualnym - ✅ Wskazać elementy semantyczne i niesemantyczne HTML - ✅ Opisać, jak właściwy markup wpływa na dostępność - ✅ Rozpoznać kompletną strukturę drzewa dokumentu Sprawdzenie zrozumienia: Spróbuj otworzyć swój plik HTML w przeglądarce z wyłączonym JavaScriptem i bez CSS. Pokaże to czystą, semantyczną strukturę, którą stworzyłeś! --- ## Wyzwanie GitHub Copilot Agent Użyj trybu Agenta, aby wykonać następujące zadanie: Opis: Stwórz semantyczną strukturę HTML dla sekcji przewodnika pielęgnacji roślin, która mogłaby zostać dodana do projektu terrarium. Zadanie: Stwórz semantyczną sekcję HTML zawierającą główny nagłówek „Przewodnik pielęgnacji roślin”, trzy podsekcje z nagłówkami „Podlewanie”, „Wymagania świetlne” oraz „Pielęgnacja gleby”, z których każda zawiera akapit z informacjami o pielęgnacji roślin. Użyj odpowiednich semantycznych tagów HTML, takich jak <section>, <h2>, <h3>, i <p>, aby odpowiednio ustawić strukturę treści. Więcej o trybie agenta tutaj. ## Wyzwanie Historia HTML Poznawanie ewolucji sieci HTML znacząco ewoluował od czasu, gdy Tim Berners-Lee stworzył pierwszą przeglądarkę sieci WWW w CERN w 1990 roku. Niektóre starsze tagi, takie jak <marquee>, zostały wycofane, ponieważ nie współgrają dobrze z nowoczesnymi standardami dostępności oraz zasadami projektowania responsywnego. Wypróbuj ten eksperyment: 1. Tymczasowo owiń swój tytuł <h1> tagiem <marquee>: <marquee><h1>Moje Terrarium</h1></marquee> 2. Otwórz stronę w przeglądarce i obserwuj efekt przewijania 3. Zastanów się, dlaczego ten tag został wycofany (podpowiedź: pomyśl o doświadczeniu użytkownika i dostępności) 4. Usuń tag <marquee> i wróć do semantycznego markupu Pytania refleksyjne: - Jak tytuł w ruchu może wpłynąć na użytkowników z zaburzeniami wzroku lub nadwrażliwością na ruch? - Jakie nowoczesne techniki CSS mogą osiągnąć podobne efekty wizualne przy lepszej dostępności? - Dlaczego ważne jest stosowanie aktualnych standardów webowych zamiast przestarzałych elementów? Dowiedz się więcej o przestarzałych i wycofanych elementach HTML, aby zrozumieć, jak standardy internetowe ewoluują, by poprawić doświadczenia użytkowników. ## Quiz po wykładzie Quiz po wykładzie ## Przegląd i samodzielna nauka Poszerz swoją wiedzę o HTML HTML jest podstawą sieci od ponad 30 lat, ewoluując od prostego języka znaczników dokumentów do zaawansowanej platformy do tworzenia interaktywnych aplikacji. Zrozumienie tej ewolucji pomaga docenić współczesne standardy oraz podejmować lepsze decyzje w tworzeniu stron. Polecane ścieżki nauki: 1. Historia i ewolucja HTML - Zbadaj oś czasu od HTML 1.0 do HTML5 - Poznaj powody wycofania niektórych tagów (dostępność, przyjazność dla urządzeń mobilnych, utrzymywalność) - Zgłębiaj nowe funkcje i propozycje HTML 2. Semantyczny HTML – dogłębnie - Przestudiuj kompletną listę semantycznych elementów HTML5 - Ćwicz rozpoznawanie, kiedy używać <article>, <section>, <aside>, i <main> - Poznaj atrybuty ARIA dla lepszej dostępności 3. Nowoczesny rozwój webowy - Poznaj tworzenie responsywnych stron na Microsoft Learn - Zrozum, jak HTML współpracuje z CSS i JavaScript - Dowiedz się o najlepszych praktykach wydajności i SEO Pytania refleksyjne: - Jakie przestarzałe tagi HTML odkryłeś i dlaczego zostały usunięte? - Jakie nowe funkcje HTML są proponowane na przyszłość? - Jak semantyczny HTML wspiera dostępność oraz SEO? ### ⚡ Co możesz zrobić w ciągu najbliższych 5 minut - [ ] Otwórz DevTools (F12) i zbadaj strukturę HTML swojej ulubionej strony - [ ] Stwórz prosty plik HTML z podstawowymi tagami: <h1>, <p>, i <img> - [ ] Zweryfikuj swój HTML za pomocą W3C HTML Validator online - [ ] Spróbuj dodać komentarz do swojego HTML za pomocą <!-- komentarz --> ### 🎯 Co możesz osiągnąć w ciągu najbliższej godziny - [ ] Ukończ quiz po lekcji i przejrzyj koncepcje semantycznego HTML - [ ] Zbuduj prostą stronę o sobie z użyciem właściwej struktury HTML - [ ] Eksperymentuj z różnymi poziomami nagłówków i formatowaniem tekstu - [ ] Dodaj obrazy i linki, aby ćwiczyć integrację multimediów - [ ] Zbadaj jeszcze nieznane funkcje HTML5 ### 📅 Twój tygodniowy plan nauki HTML - [ ] Ukończ projekt terrarium z użyciem semantycznego markup - [ ] Stwórz dostępną stronę używając etykiet i ról ARIA - [ ] Ćwicz tworzenie formularzy z różnymi typami pól - [ ] Poznaj API HTML5, takie jak localStorage lub geolokalizacja - [ ] Studiuj wzorce responsywnego HTML i projektowanie mobile-first - [ ] Przeglądaj kod HTML innych developerów w celu poznania dobrych praktyk ### 🌟 Twój miesięczny fundament w sieci - [ ] Stwórz portfolio prezentujące twoją biegłość w HTML - [ ] Naucz się szablonowania HTML z użyciem frameworka takiego jak Handlebars - [ ] Współtwórz projekty open source, poprawiając dokumentację HTML - [ ] Opanuj zaawansowane koncepcje HTML, takie jak elementy niestandardowe - [ ] Integruj HTML z frameworkami CSS i bibliotekami JavaScript - [ ] Mentoruj innych, którzy uczą się podstaw HTML ## 🎯 Twoja oś czasu opanowania HTML ### 🛠️ Podsumowanie twojego zestawu narzędzi HTML Po ukończeniu tej lekcji masz teraz: - Strukturę dokumentu: Kompletną bazę HTML5 z poprawnym DOCTYPE - Semantyczny markup: Znaczące tagi poprawiające dostępność i SEO - Integrację obrazów: Właściwą organizację plików i praktyki alt text - Kontenery układu: Strategiczne użycie divów z opisowymi nazwami klas - Świadomość dostępności: Zrozumienie nawigacji z czytników ekranu - Nowoczesne standardy: Aktualne praktyki HTML5 i wiedzę o tagach wycofanych - Podstawy projektu: Solidną bazę do stylizacji CSS i interaktywności JavaScript Kolejne kroki: Twoja struktura HTML jest gotowa do stylizacji CSS! Zbudowana semantyczna podstawa znacznie ułatwi zrozumienie następnej lekcji. ## Zadanie Ćwicz swój HTML: Zbuduj makietę bloga --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Zastrzeżenie: Niniejszy dokument został przetłumaczony za pomocą usługi tłumaczeń AI Co-op Translator. Mimo że dokładamy wszelkich starań, aby tłumaczenie było jak najbardziej precyzyjne, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub niedokładności. Oryginalny dokument w języku źródłowym powinien być uważany za źródło wiążące. W przypadku informacji istotnych zalecane jest skorzystanie z profesjonalnego tłumaczenia przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Projekt Terrarium Część 2: Wprowadzenie do CSS
Pamiętasz, jak twoje terrarium HTML wyglądało dość prosto? CSS to miejsce, gdzie przekształcamy tę prostą strukturę w coś wizualnie atrakcyjnego. Jeśli HTML to budowa ram domu, to CSS to wszystko, co sprawia, że czujesz się w nim jak w domu - kolory farb, ustawienie mebli, oświetlenie i jak pomieszczenia ze sobą współgrają. Pomyśl, jak Pałac w Wersalu zaczął jako prosty domek myśliwski, a staranne dbanie o dekoracje i układ przekształciło go w jeden z najwspanialszych budynków świata. Dziś przemienimy twoje terrarium z funkcjonalnego w dopracowane wizualnie. Nauczysz się, jak precyzyjnie pozycjonować elementy, sprawić, by układy reagowały na różne rozmiary ekranów i tworzyć wizualną atrakcyjność, która angażuje użytkowników. Na koniec tej lekcji zobaczysz, jak strategiczne stylizowanie CSS może znacząco ulepszyć twój projekt. Dodajmy trochę stylu twojemu terrarium. ## Quiz przed wykładem Quiz przed wykładem ## Pierwsze kroki z CSS CSS często jest postrzegany jedynie jako „upiększanie rzeczy”, ale służy znacznie szerszym celom. CSS to jak reżyser filmu - kontrolujesz nie tylko jak wszystko wygląda, ale jak się porusza, reaguje na interakcję i dostosowuje do różnych sytuacji. Nowoczesne CSS jest niezwykle zdolne. Możesz pisać kod, który automatycznie dostosowuje układy dla telefonów, tabletów i komputerów stacjonarnych. Możesz tworzyć płynne animacje, które kierują uwagę użytkowników tam, gdzie trzeba. Wyniki mogą być naprawdę imponujące, gdy wszystko działa razem. Oto, co zrealizujemy w tej lekcji: - Stworzymy kompletny wizualny design twojego terrarium za pomocą nowoczesnych technik CSS - Poznamy fundamentalne koncepcje takie jak kaskada, dziedziczenie i selektory CSS - Zastosujemy responsywne pozycjonowanie i strategie układu - Zbudujemy kontener terrarium za pomocą CSS-owych kształtów i stylizacji ### Wymagania wstępne Powinieneś mieć ukończoną strukturę HTML twojego terrarium z poprzedniej lekcji i być gotowy do stylowania. ### Konfiguracja pliku CSS Zanim zaczniemy stylować, musimy połączyć CSS z naszym HTML-em. To połączenie mówi przeglądarce, gdzie znaleźć instrukcje stylowania dla naszego terrarium. W folderze terrarium stwórz nowy plik o nazwie style.css, a następnie dołącz go w sekcji <head> twojego dokumentu HTML: Co robi ten kod: - Tworzy połączenie między plikami HTML i CSS - Informuje przeglądarkę, aby załadowała i zastosowała style z style.css - Używa atrybutu rel="stylesheet", aby określić, że jest to plik CSS - Odwołuje się do ścieżki pliku za pomocą href="./style.css" ## Zrozumienie kaskady CSS Zastanawiałeś się kiedyś, dlaczego CSS nazywa się "Cascading" Style Sheets (Kaskadowe arkusze stylów)? Style opadają niczym wodospad i czasem ze sobą kolidują. Pomyśl jak działa wojskowa hierarchia poleceń – ogólny rozkaz może brzmieć „wszyscy żołnierze noszą zielone”, ale konkretne polecenie dla twojej jednostki to „na ceremonię przywdziej mundur galowy”. Bardziej szczegółowa instrukcja ma pierwszeństwo. CSS działa na podobnej zasadzie, a zrozumienie tej hierarchii znacznie ułatwia debugowanie. ### Eksperymentowanie z priorytetem kaskady Zobaczmy, jak działa kaskada, tworząc konflikt stylów. Najpierw dodaj styl inline do twojego tagu <h1>: Co robi ten kod: - Stosuje czerwony kolor bezpośrednio do elementu <h1> za pomocą stylu inline - Używa atrybutu style, aby osadzić CSS bezpośrednio w HTML - Tworzy regułę o najwyższym priorytecie dla tego konkretnego elementu Następnie dodaj tę regułę do pliku style.css: W powyższym przykładzie: - Zdefiniowaliśmy regułę CSS, która celuje w wszystkie elementy <h1> - Ustawiliśmy kolor tekstu na niebieski za pomocą zewnętrznego arkusza stylów - Utworzyliśmy regułę o niższym priorytecie w porównaniu do stylów inline ✅ Sprawdzenie wiedzy: Jaki kolor wyświetla się w twojej aplikacji webowej? Dlaczego ten kolor wygrywa? Czy potrafisz wymyślić sytuacje, w których chcesz nadpisać style? ## Dziedziczenie CSS w praktyce Dziedziczenie w CSS działa jak genetyka – elementy dziedziczą pewne właściwości po swoich rodzicach. Jeśli ustawisz rodzinę czcionek na elemencie body, to cały tekst w środku automatycznie będzie używał tej samej czcionki. To podobne do charakterystycznej szczęki rodu Habsburgów, która pojawiała się w pokoleniach, nawet jeśli nie była określana dla każdej osoby z osobna. Jednak nie wszystko jest dziedziczone. Style tekstowe, takie jak czcionki i kolory, dziedziczą się, ale właściwości układu, takie jak marginesy i obramowania, nie. Podobnie jak dzieci mogą odziedziczyć cechy fizyczne, ale niekoniecznie wybory modowe rodziców. ### Obserwacja dziedziczenia czcionki Zobaczmy dziedziczenie w akcji, ustawiając rodzinę czcionki na elemencie <body>: Co się tu dzieje: - Ustawiamy rodzinę czcionek dla całej strony, celując w element <body> - Używamy zestawu fontów z opcjami zapasowymi dla lepszej kompatybilności przeglądarek - Stosujemy nowoczesne fonty systemowe, które dobrze wyglądają na różnych systemach operacyjnych - Zapewniamy, że wszystkie elementy potomne dziedziczą tę czcionkę, chyba że jest to jawnie nadpisane Otwórz narzędzia deweloperskie przeglądarki (F12), przejdź do zakładki Elements i zbadaj swój element <h1>. Zobaczysz, że dziedziczy rodzinę czcionki po body: ✅ Czas na eksperyment: Spróbuj ustawić inne właściwości dziedziczone na <body>, jak color, line-height lub text-align. Co się stanie z nagłówkiem i innymi elementami? ### 🔄 Sprawdzenie pedagogiczne Zrozumienie podstaw CSS: Przed przejściem do selektorów upewnij się, że potrafisz: - ✅ Wyjaśnić różnicę między kaskadą a dziedziczeniem - ✅ Przewidzieć, który styl wygra w konflikcie specyficzności - ✅ Zidentyfikować, które właściwości dziedziczą się po elementach nadrzędnych - ✅ Prawidłowo połączyć pliki CSS z HTML Szybki test: Mając poniższe style, jakiego koloru będzie <h1> wewnątrz <div class="special">? Odpowiedź: Czerwony (selektor elementu bezpośrednio celuje w h1) ## Opanowanie selektorów CSS Selektory CSS pozwalają na celowanie w konkretne elementy do stylowania. Działają jak precyzyjne wskazówki - zamiast mówić „dom”, mówisz „niebieski dom z czerwonymi drzwiami na ulicy Maple”. CSS oferuje różne sposoby precyzji, a wybór właściwego selektora to jak wybór odpowiedniego narzędzia do zadania. Czasami trzeba wystylizować wszystkie drzwi w okolicy, a czasem tylko jedno konkretne. ### Selektory elementów (tagów) Selektory elementów celują w elementy HTML na podstawie nazwy tagu. Są idealne do ustawiania bazowych stylów stosowanych szeroko na stronie: Co robią te style: - Ustawiają spójną typografię na całej stronie za pomocą selektora body - Usuwają domyślne marginesy i padding przeglądarki dla lepszej kontroli - Stylizują wszystkie nagłówki kolorem, wyrównaniem i odstępami - Używają jednostek rem dla skalowalnego, dostępnego rozmiaru czcionki Chociaż selektory elementów dobrze sprawdzają się do ogólnego stylu, potrzebujesz bardziej precyzyjnych selektorów do stylizacji poszczególnych elementów, takich jak rośliny w twoim terrarium. ### Selektory ID dla unikalnych elementów Selektory ID używają symbolu # i celują w elementy z konkretnym atrybutem id. Ponieważ ID muszą być unikalne na stronie, są idealne do stylowania pojedynczych, wyjątkowych elementów, takich jak pojemniki z roślinami po lewej i prawej stronie. Stwórzmy stylizację dla naszych bocznych pojemników w terrarium, gdzie będą rosnąć rośliny: Co robi ten kod: - Pozycjonuje kontenery na skrajnych lewych i prawych krawędziach za pomocą position: absolute - Używa jednostek vh (wysokość okna widoku) dla responsywnej wysokości dostosowującej się do wielkości ekranu - Ustawia box-sizing: border-box, by padding był wliczany do całkowitej szerokości - Usuwa zbędne jednostki px przy wartościach zero, dla czyściej kodu - Stosuje subtelny kolor tła, który jest łagodniejszy dla oka niż jaskrawa szarość ✅ Wyzwanie jakości kodu: Zauważ, że ten CSS łamie zasadę DRY (Don't Repeat Yourself). Czy potrafisz zrefaktoryzować ten kod, używając zarówno ID, jak i klasy? Lepsze podejście: ### Selektory klas do stylów wielokrotnego użytku Selektory klas używają symbolu . i są idealne, gdy chcesz stosować te same style do wielu elementów. W przeciwieństwie do ID, klasy można powtarzać w całym HTML, co czyni je świetnym narzędziem do spójnych wzorców stylów. W naszym terrarium każda roślina potrzebuje podobnych stylów, ale także indywidualnego pozycjonowania. Użyjemy kombinacji klas do wspólnych stylów i ID do unikalnego pozycjonowania. Oto struktura HTML każdej rośliny: Wyjaśnienie kluczowych elementów: - Używa class="plant-holder" do spójnego stylowania kontenera dla wszystkich roślin - Stosuje class="plant" dla wspólnego stylu i zachowania obrazków - Zawiera unikalny id="plant1" do indywidualnego pozycjonowania i interakcji JS - Zapewnia opisowy tekst alternatywny dla dostępności czytników ekranowych Dodaj teraz te style do pliku style.css: Co robią te style: - Tworzą pozycjonowanie względne dla kontenera rośliny, które pozwala na kontekst pozycjonowania - Ustawiają wysokość każdego kontenera roślin na 13%, zapewniając, że wszystkie rośliny mieszczą się pionowo bez przewijania - Przesuwają kontenery nieco w lewo, by lepiej wycentrować rośliny w ich pojemnikach - Pozwalają roślinom skalować się responsywnie z max-width i max-height - Używają z-index, aby warstwować rośliny nad innymi elementami terrarium - Dodają subtelny efekt przy najechaniu kursorem z CSS transitions dla lepszej interakcji użytkownika ✅ Myślenie krytyczne: Dlaczego potrzebujemy zarówno selektorów .plant-holder, jak i .plant? Co się stanie, gdy spróbujemy użyć tylko jednego? ## Zrozumienie pozycjonowania CSS Pozycjonowanie CSS jest jak dyrektor sceny w teatrze - kierujesz, gdzie stają aktorzy i jak się poruszają po scenie. Niektórzy aktorzy trzymają się standardowego ustawienia, inni potrzebują specyficznego pozycjonowania dla efektu dramatycznego. Gdy zrozumiesz pozycjonowanie, wiele problemów z układami staje się łatwiejszych. Potrzebujesz paska nawigacji, który pozostaje na górze podczas przewijania? Pozycjonowanie się tym zajmie. Chcesz tooltipa, który pojawia się w konkretnym miejscu? To też pozycjonowanie. ### Pięć wartości pozcji ### Pozycjonowanie w naszym terrarium Nasze terrarium używa strategicznego połączenia typów pozycji, by stworzyć pożądany układ: Strategia pozycjonowania: - Kontenery absolutne są usunięte z normalnego przepływu dokumentu i przypięte do krawędzi ekranu - Kontenery roślin o pozycji względnej tworzą kontekst pozycjonowania, pozostając w przepływie dokumentu - Rośliny z pozycją absolutną mogą być precyzyjnie pozycjonowane wewnątrz względnych kontenerów - To połączenie pozwala na pionowe układanie roślin, z możliwością indywidualnego pozycjonowania ✅ Czas na eksperyment: Spróbuj zmienić wartości pozycji i zobacz wyniki: - Co się stanie, jeśli zmienisz .container z absolute na relative? - Jak zmienia się układ, jeśli .plant-holder używa absolute zamiast relative? - Co się dzieje, gdy zmienisz pozycjonowanie .plant na relative? ### 🔄 Sprawdzenie zrozumienia Opanowanie pozycjonowania CSS: Zatrzymaj się, aby zweryfikować swoją wiedzę: - ✅ Czy potrafisz wyjaśnić, dlaczego rośliny potrzebują pozycjonowania absolute do przeciągania i upuszczania? - ✅ Czy rozumiesz, jak relatywne kontenery tworzą kontekst pozycjonowania? - ✅ Dlaczego boczne kontenery używają pozycjonowania absolute? - ✅ Co by się stało, gdybyś całkowicie usunął deklaracje pozycji? Powiązanie z rzeczywistością: Pomyśl, jak pozycjonowanie CSS odzwierciedla układ rzeczywisty: - Static: Książki na półce (naturalny porządek) - Relative: Przesunięcie książki lekko, ale pozostawienie jej miejsca - Absolute: Umieszczenie zakładki na dokładnej stronie - Fixed: Karteczka samoprzylepna, która pozostaje widoczna podczas przewracania stron ## Budowanie terrarium za pomocą CSS Teraz zbudujemy szklany słoik używając tylko CSS – bez obrazów czy oprogramowania graficznego. Tworzenie realistycznego szkła, cieni i efektów głębi za pomocą pozycjonowania i przezroczystości pokazuje wizualne możliwości CSS. Ta technika nawiązuje do tego, jak architekci ruchu Bauhaus używali prostych form geometrycznych do tworzenia złożonych, pięknych struktur. Gdy zrozumiesz te zasady, rozpoznasz techniki CSS stojące za wieloma projektami stron. ### Tworzenie komponentów słoika terrarium Zbudujmy słoik terrarium kawałek po kawałku. Każda część używa pozycjonowania absolute i rozmiarów procentowych dla responsywnego projektu: Zrozumienie konstrukcji terrarium: - Używa wymiarów opartych na procentach dla skalowania responsywnego na wszystkich rozmiarach ekranów - Pozycjonuje elementy absolutnie, aby precyzyjnie je układać i nakładać - Stosuje różne wartości przezroczystości, tworząc efekt przeźroczystości szkła - Implementuje warstwowanie za pomocą z-index, dzięki czemu rośliny pojawiają się wewnątrz słoika - Dodaje subtelne cienie i dopracowane zaokrąglenia rogów, aby wyglądało bardziej realistycznie ### Projekt responsywny z użyciem procentów Zauważ, że wszystkie wymiary są podane w procentach, a nie w stałych pikselach: Dlaczego to ma znaczenie: - Zapewnia, że terrarium skaluje się proporcjonalnie na dowolnym ekranie - Utrzymuje wizualne relacje między komponentami słoika - Daje spójne doświadczenie od telefonów komórkowych po duże monitory - Pozwala na adaptację projektu bez zepsucia układu wizualnego ### Jednostki CSS w działaniu Używamy jednostek rem dla zaokrągleń border-radius, które skalują się względem rozmiaru fontu root. Tworzy to bardziej dostępne projekty, które respektują preferencje użytkownika co do wielkości czcionki. Dowiedz się więcej o jednostkach relatywnych CSS w oficjalnej specyfikacji. ✅ Eksperyment wizualny: Spróbuj zmodyfikować te wartości i obserwuj efekty: - Zmień przezroczystość słoika z 0.5 na 0.8 – jak to wpływa na wygląd szkła? - Zmień kolor ziemi z #3a241d na #8B4513 – jaki wizualny efekt to wywołuje? - Zmień z-index ziemi na 2 – co się dzieje z warstwami? ### 🔄 Sprawdzenie zrozumienia Zrozumienie wizualnego projektowania CSS: Potwierdź swoją wiedzę o elementach wizualnych CSS: - ✅ Jak wymiary procentowe tworzą design responsywny? - ✅ Dlaczego przezroczystość tworzy efekt przeźroczystości szkła? - ✅ Jaką rolę odgrywa z-index w warstwowaniu elementów? - ✅ Jak wartości border-radius tworzą kształt słoika? Zasada projektowania: Zwróć uwagę, jak budujemy złożone wizualizacje z prostych kształtów: 1. Prostokąty → Zaokrąglone prostokąty → Komponenty słoika 2. Płaskie kolory → Przezroczystość → Efekt szkła 3. Pojedyncze elementy → Warstwowa kompozycja → Wygląd 3D --- ## Wyzwanie GitHub Copilot Agent 🚀 Użyj trybu Agenta, aby wykonać następujące zadanie: Opis: Stwórz animację CSS, która sprawi, że rośliny terrarium będą delikatnie się kołysać, naśladując naturalny powiew wiatru. To ćwiczenie pozwoli Ci poćwiczyć animacje CSS, transformacje i klatki kluczowe, jednocześnie wzbogacając wizualny efekt terrarium. Polecenie: Dodaj animacje keyframe CSS, aby rośliny w terrarium kołysały się delikatnie z jednej strony na drugą. Stwórz animację, która obraca każdą roślinę lekko (2-3 stopnie) w lewo i prawo w czasie 3-4 sekund, i zastosuj ją do klasy .plant. Upewnij się, że animacja jest zapętlona w nieskończoność i posiada funkcję łagodzenia ruchu dla naturalnego efektu. Dowiedz się więcej o trybie agenta tutaj. ## 🚀 Wyzwanie: Dodanie refleksów szklanych Gotowy, by wzbogacić terrarium o realistyczne refleksy szklane? Ta technika doda głębi i realizmu projektowi. Stworzysz subtelne refleksy, które symulują odbicie światła od powierzchni szkła. Podejście to jest podobne do metody, jaką stosowali renesansowi malarze tacy jak Jan van Eyck, używając światła i odbić, aby nadać szkłu trójwymiarowy wygląd. Oto, do czego dążysz: Twoje zadanie: - Stwórz subtelne białe lub jasne owalne kształty dla refleksów szklanych - Ustaw je strategicznie po lewej stronie słoika - Zastosuj odpowiednią przezroczystość i rozmycie dla realistycznego odbicia światła - Użyj border-radius do tworzenia organicznych, bąbelkowatych kształtów - Eksperymentuj z gradientami lub cieniami dla wzmocnienia realizmu ## Quiz po wykładzie Quiz po wykładzie ## Rozszerz swoją wiedzę o CSS CSS na początku może wydawać się skomplikowany, ale zrozumienie podstaw daje solidny fundament do bardziej zaawansowanych technik. Twoje kolejne obszary nauki CSS: - Flexbox - upraszcza wyrównywanie i dystrybucję elementów - CSS Grid - dostarcza potężnych narzędzi do tworzenia złożonych układów - Zmienne CSS - zmniejszają powtarzalność i poprawiają utrzymanie kodu - Projektowanie responsywne - zapewnia poprawne działanie serwisów na różnych rozmiarach ekranów ### Interaktywne zasoby do nauki Ćwicz te koncepcje, korzystając z angażujących, praktycznych gier: - 🐸 Flexbox Froggy - Opanuj Flexbox przez zabawne wyzwania - 🌱 Grid Garden - Naucz się CSS Grid, uprawiając wirtualne marchewki - 🎯 CSS Battle - Sprawdź swoje umiejętności CSS w wyzwaniach kodowania ### Dodatkowa nauka Aby poznać podstawy CSS kompleksowo, ukończ moduł Microsoft Learn: Stylizuj swoją aplikację HTML za pomocą CSS ### ⚡ Co możesz zrobić w ciągu kolejnych 5 minut - [ ] Otwórz DevTools i sprawdź style CSS na dowolnej stronie w panelu Elements - [ ] Utwórz prosty plik CSS i podłącz go do strony HTML - [ ] Spróbuj zmieniać kolory za pomocą różnych metod: hex, RGB i nazwanych kolorów - [ ] Ćwicz model pudełkowy, dodając padding i margin do elementu div ### 🎯 Co możesz osiągnąć w ciągu tej godziny - [ ] Ukończ quiz po lekcji i powtórz podstawy CSS - [ ] Stylizuj stronę HTML za pomocą fontów, kolorów i odstępów - [ ] Stwórz prosty układ używając flexboxa lub grid - [ ] Eksperymentuj z przejściami CSS dla płynnych efektów - [ ] Ćwicz projekt responsywny za pomocą zapytań media ### 📅 Twój tygodniowy plan nauki CSS - [ ] Zrealizuj zadanie stylizacji terrarium z kreatywnym podejściem - [ ] Opanuj CSS Grid, budując layout galerii zdjęć - [ ] Naucz się animacji CSS, aby ożywić swoje projekty - [ ] Poznaj preprocesory CSS, takie jak Sass lub Less - [ ] Studiuj zasady projektowania i stosuj je w CSS - [ ] Analizuj i odtwarzaj ciekawe projekty znalezione online ### 🌟 Miesięczne mistrzostwo projektowania - [ ] Zbuduj kompletny system projektowania responsywnych stron - [ ] Naucz się CSS-in-JS lub frameworków utility-first takich jak Tailwind - [ ] Wspieraj projekty open source, ulepszając CSS - [ ] Opanuj zaawansowane koncepcje CSS, takie jak własności niestandardowe i containment - [ ] Twórz wielokrotnego użytku biblioteki komponentów z modułowym CSS - [ ] Mentoring innych uczących się CSS i dzielenie się wiedzą projektową ## 🎯 Twój harmonogram mistrzostwa CSS ### 🛠️ Podsumowanie Twojego zestawu narzędzi CSS Po ukończeniu tej lekcji masz: - Zrozumienie kaskady: Jak style dziedziczą się i nadpisują nawzajem - Opanowanie selektorów: Precyzyjne targetowanie elementów, klas i identyfikatorów - Umiejętności pozycjonowania: Strategiczne umieszczanie i warstwowanie elementów - Projekt wizualny: Tworzenie efektów szkła, cieni i przezroczystości - Techniki responsywne: Układy oparte na procentach adaptujące się do dowolnego ekranu - Organizacja kodu: Czysta, łatwa w utrzymaniu struktura CSS - Nowoczesne praktyki: Używanie jednostek relatywnych i wzorców dostępności Kolejne kroki: Twoje terrarium ma już strukturę (HTML) i styl (CSS). Ostatnia lekcja doda interaktywność z JavaScript! ## Zadanie Refaktoryzacja CSS --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Zastrzeżenie: Niniejszy dokument został przetłumaczony za pomocą usługi tłumaczenia AI Co-op Translator. Chociaż dążymy do dokładności, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub niedokładności. Oryginalny dokument w języku źródłowym należy traktować jako autorytatywne źródło. W przypadku istotnych informacji zalecane jest skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Projeto Terrário Parte 1: Introdução ao HTML
HTML, ou Linguagem de Marcação de Hipertexto, é a base de todos os sites que você já visitou. Pense no HTML como o esqueleto que dá estrutura às páginas da web – ele define onde o conteúdo vai, como está organizado e o que cada parte representa. Enquanto o CSS mais tarde "vestirá" seu HTML com cores e layouts, e o JavaScript dará vida com interatividade, o HTML fornece a estrutura essencial que torna tudo isso possível. Nesta lição, você criará a estrutura HTML para uma interface de terrário virtual. Este projeto prático ensinará conceitos fundamentais de HTML enquanto você constrói algo visualmente envolvente. Você aprenderá a organizar conteúdo usando elementos semânticos, trabalhar com imagens e criar a base para um aplicativo web interativo. Ao final desta lição, você terá uma página HTML funcional exibindo imagens de plantas em colunas organizadas, pronta para ser estilizada na próxima lição. Não se preocupe se parecer básico no início – é exatamente assim que o HTML deve ser antes que o CSS adicione o toque visual. ## Quiz Pré-Aula Quiz pré-aula ## Configurando Seu Projeto Antes de mergulharmos no código HTML, vamos configurar um espaço de trabalho adequado para seu projeto de terrário. Criar uma estrutura de arquivos organizada desde o início é um hábito crucial que será útil ao longo de sua jornada de desenvolvimento web. ### Tarefa: Crie a Estrutura do Projeto Você criará uma pasta dedicada para seu projeto de terrário e adicionará seu primeiro arquivo HTML. Aqui estão duas abordagens que você pode usar: Opção 1: Usando o Visual Studio Code 1. Abra o Visual Studio Code 2. Clique em "Arquivo" → "Abrir Pasta" ou use Ctrl+K, Ctrl+O (Windows/Linux) ou Cmd+K, Cmd+O (Mac) 3. Crie uma nova pasta chamada terrarium e selecione-a 4. No painel Explorer, clique no ícone "Novo Arquivo" 5. Nomeie seu arquivo como index.html Opção 2: Usando Comandos no Terminal O que esses comandos fazem: - Cria um novo diretório chamado terrarium para seu projeto - Navega até o diretório terrarium - Cria um arquivo vazio index.html - Abre o arquivo no Visual Studio Code para edição ## Entendendo a Estrutura do Documento HTML Todo documento HTML segue uma estrutura específica que os navegadores precisam entender e exibir corretamente. Pense nessa estrutura como uma carta formal – ela tem elementos obrigatórios em uma ordem específica que ajudam o destinatário (neste caso, o navegador) a processar o conteúdo corretamente. Vamos começar adicionando a base essencial que todo documento HTML precisa. ### A Declaração DOCTYPE e o Elemento Raiz As duas primeiras linhas de qualquer arquivo HTML servem como a "introdução" do documento ao navegador: Entendendo o que esse código faz: - Declara o tipo de documento como HTML5 usando <!DOCTYPE html> - Cria o elemento raiz <html> que conterá todo o conteúdo da página - Estabelece padrões modernos da web para renderização adequada no navegador - Garante exibição consistente em diferentes navegadores e dispositivos ### 🔄 Checagem Pedagógica Pausa e Reflexão: Antes de continuar, certifique-se de que você entende: - ✅ Por que todo documento HTML precisa de uma declaração DOCTYPE - ✅ O que o elemento raiz <html> contém - ✅ Como essa estrutura ajuda os navegadores a renderizar páginas corretamente Teste Rápido: Você consegue explicar com suas próprias palavras o que significa "renderização compatível com padrões"? ## Adicionando Metadados Essenciais ao Documento A seção <head> de um documento HTML contém informações cruciais que os navegadores e mecanismos de busca precisam, mas que os visitantes não veem diretamente na página. Pense nisso como as informações "nos bastidores" que ajudam sua página a funcionar corretamente e aparecer corretamente em diferentes dispositivos e plataformas. Esses metadados dizem aos navegadores como exibir sua página, qual codificação de caracteres usar e como lidar com diferentes tamanhos de tela – tudo essencial para criar páginas web profissionais e acessíveis. ### Tarefa: Adicione o Cabeçalho do Documento Insira esta seção <head> entre suas tags de abertura e fechamento <html>: Desmembrando o que cada elemento faz: - Define o título da página que aparece nas abas do navegador e nos resultados de busca - Especifica a codificação de caracteres UTF-8 para exibição correta de texto em todo o mundo - Garante compatibilidade com versões modernas do Internet Explorer - Configura design responsivo ajustando o viewport à largura do dispositivo - Controla o nível inicial de zoom para exibir o conteúdo no tamanho natural ## Construindo o Corpo do Documento O elemento <body> contém todo o conteúdo visível da sua página – tudo o que os usuários verão e com o que interagirão. Enquanto a seção <head> forneceu instruções ao navegador, a seção <body> contém o conteúdo real: texto, imagens, botões e outros elementos que criam sua interface de usuário. Vamos adicionar a estrutura do corpo e entender como as tags HTML trabalham juntas para criar conteúdo significativo. ### Entendendo a Estrutura das Tags HTML O HTML usa tags emparelhadas para definir elementos. A maioria das tags tem uma tag de abertura como <p> e uma tag de fechamento como </p>, com conteúdo entre elas: <p>Olá, mundo!</p>. Isso cria um elemento de parágrafo contendo o texto "Olá, mundo!". ### Tarefa: Adicione o Elemento Body Atualize seu arquivo HTML para incluir o elemento <body>: Aqui está o que essa estrutura completa fornece: - Estabelece a estrutura básica do documento HTML5 - Inclui metadados essenciais para renderização adequada no navegador - Cria um corpo vazio pronto para seu conteúdo visível - Segue as melhores práticas modernas de desenvolvimento web Agora você está pronto para adicionar os elementos visíveis do seu terrário. Usaremos elementos <div> como contêineres para organizar diferentes seções de conteúdo e elementos <img> para exibir as imagens das plantas. ### Trabalhando com Imagens e Contêineres de Layout Imagens são especiais no HTML porque usam tags "auto-fechadas". Diferente de elementos como <p></p> que envolvem conteúdo, a tag <img> contém todas as informações necessárias dentro da própria tag usando atributos como src para o caminho do arquivo de imagem e alt para acessibilidade. Antes de adicionar imagens ao seu HTML, você precisará organizar seus arquivos de projeto corretamente criando uma pasta de imagens e adicionando os gráficos das plantas. Primeiro, configure suas imagens: 1. Crie uma pasta chamada images dentro da pasta do projeto terrarium 2. Baixe as imagens das plantas da pasta de solução (14 imagens de plantas no total) 3. Copie todas as imagens das plantas para sua nova pasta images ### Tarefa: Crie o Layout de Exibição das Plantas Agora adicione as imagens das plantas organizadas em duas colunas entre suas tags <body></body>: Passo a passo, aqui está o que está acontecendo nesse código: - Cria um contêiner principal da página com id="page" para conter todo o conteúdo - Estabelece dois contêineres de coluna: left-container e right-container - Organiza 7 plantas na coluna esquerda e 7 plantas na coluna direita - Envolve cada imagem de planta em um div plant-holder para posicionamento individual - Aplica nomes de classe consistentes para estilização com CSS na próxima lição - Atribui IDs únicos a cada imagem de planta para interação com JavaScript posteriormente - Inclui caminhos de arquivo corretos apontando para a pasta de imagens ### 🔄 Checagem Pedagógica Entendimento da Estrutura: Reserve um momento para revisar sua estrutura HTML: - ✅ Você consegue identificar os contêineres principais no seu layout? - ✅ Você entende por que cada imagem tem um ID único? - ✅ Como você descreveria o propósito dos divs plant-holder? Inspeção Visual: Abra seu arquivo HTML em um navegador. Você deve ver: - Uma lista básica de imagens de plantas - Imagens organizadas em duas colunas - Layout simples e sem estilo Lembre-se: Essa aparência simples é exatamente como o HTML deve ser antes da estilização com CSS! Com essa marcação adicionada, as plantas aparecerão na tela, embora ainda não pareçam polidas – isso é o que o CSS fará na próxima lição! Por enquanto, você tem uma base sólida de HTML que organiza seu conteúdo corretamente e segue as melhores práticas de acessibilidade. ## Usando HTML Semântico para Acessibilidade HTML semântico significa escolher elementos HTML com base em seu significado e propósito, não apenas em sua aparência. Quando você usa marcação semântica, está comunicando a estrutura e o significado do seu conteúdo para navegadores, mecanismos de busca e tecnologias assistivas como leitores de tela. Essa abordagem torna seus sites mais acessíveis para usuários com deficiências e ajuda os mecanismos de busca a entender melhor seu conteúdo. É um princípio fundamental do desenvolvimento web moderno que cria experiências melhores para todos. ### Adicionando um Título Semântico à Página Vamos adicionar um título adequado à sua página de terrário. Insira esta linha logo após sua tag de abertura <body>: Por que a marcação semântica é importante: - Ajuda leitores de tela a navegar e entender a estrutura da página - Melhora a otimização para mecanismos de busca (SEO) ao esclarecer a hierarquia do conteúdo - Aumenta a acessibilidade para usuários com deficiências visuais ou diferenças cognitivas - Cria melhores experiências de usuário em todos os dispositivos e plataformas - Segue padrões da web e melhores práticas para desenvolvimento profissional Exemplos de escolhas semânticas vs. não semânticas: ## Criando o Contêiner do Terrário Agora vamos adicionar a estrutura HTML para o próprio terrário – o recipiente de vidro onde as plantas serão colocadas eventualmente. Esta seção demonstra um conceito importante: o HTML fornece estrutura, mas sem estilização CSS, esses elementos ainda não serão visíveis. A marcação do terrário usa nomes de classe descritivos que tornarão a estilização com CSS intuitiva e fácil de manter na próxima lição. ### Tarefa: Adicione a Estrutura do Terrário Insira esta marcação acima da última tag </div> (antes da tag de fechamento do contêiner da página): Entendendo essa estrutura do terrário: - Cria um contêiner principal do terrário com um ID único para estilização - Define elementos separados para cada componente visual (topo, paredes, terra, fundo) - Inclui elementos aninhados para efeitos de reflexão em vidro (elementos brilhantes) - Utiliza nomes de classes descritivos que indicam claramente o propósito de cada elemento - Prepara a estrutura para estilização em CSS que criará a aparência de um terrário de vidro ### 🔄 Verificação Pedagógica Domínio da Estrutura HTML: Antes de avançar, certifique-se de que você consegue: - ✅ Explicar a diferença entre estrutura HTML e aparência visual - ✅ Identificar elementos HTML semânticos e não semânticos - ✅ Descrever como uma marcação adequada beneficia a acessibilidade - ✅ Reconhecer a estrutura completa da árvore do documento Testando Sua Compreensão: Tente abrir seu arquivo HTML em um navegador com o JavaScript desativado e o CSS removido. Isso mostrará a estrutura semântica pura que você criou! --- ## Desafio do Agente GitHub Copilot Use o modo Agente para completar o seguinte desafio: Descrição: Crie uma estrutura HTML semântica para uma seção de guia de cuidados com plantas que pode ser adicionada ao projeto de terrário. Prompt: Crie uma seção HTML semântica que inclua um título principal "Guia de Cuidados com Plantas", três subseções com os títulos "Rega", "Requisitos de Luz" e "Cuidados com o Solo", cada uma contendo um parágrafo com informações sobre cuidados com plantas. Use tags HTML semânticas apropriadas como <section>, <h2>, <h3> e <p> para estruturar o conteúdo corretamente. Saiba mais sobre o modo agente aqui. ## Desafio de Exploração da História do HTML Aprendendo Sobre a Evolução da Web O HTML evoluiu significativamente desde que Tim Berners-Lee criou o primeiro navegador web no CERN em 1990. Algumas tags mais antigas, como <marquee>, agora estão obsoletas porque não funcionam bem com os padrões modernos de acessibilidade e design responsivo. Experimente Isso: 1. Envolva temporariamente seu título <h1> em uma tag <marquee>: <marquee><h1>Meu Terrário</h1></marquee> 2. Abra sua página em um navegador e observe o efeito de rolagem 3. Considere por que essa tag foi descontinuada (dica: pense na experiência do usuário e na acessibilidade) 4. Remova a tag <marquee> e retorne à marcação semântica Perguntas para Reflexão: - Como um título rolando pode afetar usuários com deficiências visuais ou sensibilidade ao movimento? - Quais técnicas modernas de CSS poderiam alcançar efeitos visuais semelhantes de forma mais acessível? - Por que é importante usar padrões web atuais em vez de elementos obsoletos? Explore mais sobre elementos HTML obsoletos e descontinuados para entender como os padrões da web evoluem para melhorar a experiência do usuário. ## Quiz Pós-Aula Quiz pós-aula ## Revisão e Autoestudo Aprofunde Seu Conhecimento em HTML O HTML tem sido a base da web por mais de 30 anos, evoluindo de uma linguagem simples de marcação de documentos para uma plataforma sofisticada para construir aplicações interativas. Compreender essa evolução ajuda você a valorizar os padrões modernos da web e tomar melhores decisões de desenvolvimento. Caminhos de Aprendizado Recomendados: 1. História e Evolução do HTML - Pesquise a linha do tempo do HTML 1.0 ao HTML5 - Explore por que certas tags foram descontinuadas (acessibilidade, compatibilidade com dispositivos móveis, manutenção) - Investigue recursos emergentes do HTML e propostas futuras 2. Imersão em HTML Semântico - Estude a lista completa de elementos semânticos do HTML5 - Pratique identificar quando usar <article>, <section>, <aside> e <main> - Aprenda sobre atributos ARIA para melhorar a acessibilidade 3. Desenvolvimento Web Moderno - Explore como criar sites responsivos no Microsoft Learn - Entenda como o HTML se integra com CSS e JavaScript - Aprenda sobre desempenho web e melhores práticas de SEO Perguntas para Reflexão: - Quais tags HTML obsoletas você descobriu e por que foram removidas? - Quais novos recursos HTML estão sendo propostos para versões futuras? - Como o HTML semântico contribui para acessibilidade e SEO? ### ⚡ O Que Você Pode Fazer nos Próximos 5 Minutos - [ ] Abra o DevTools (F12) e inspecione a estrutura HTML do seu site favorito - [ ] Crie um arquivo HTML simples com tags básicas: <h1>, <p> e <img> - [ ] Valide seu HTML usando o Validador HTML do W3C online - [ ] Tente adicionar um comentário ao seu HTML usando <!-- comentário --> ### 🎯 O Que Você Pode Realizar Nesta Hora - [ ] Complete o quiz pós-aula e revise os conceitos de HTML semântico - [ ] Construa uma página simples sobre você usando uma estrutura HTML adequada - [ ] Experimente diferentes níveis de cabeçalhos e tags de formatação de texto - [ ] Adicione imagens e links para praticar integração multimídia - [ ] Pesquise recursos do HTML5 que você ainda não experimentou ### 📅 Sua Jornada de HTML Durante a Semana - [ ] Complete a tarefa do projeto de terrário com marcação semântica - [ ] Crie uma página acessível usando rótulos e funções ARIA - [ ] Pratique a criação de formulários com vários tipos de entrada - [ ] Explore APIs do HTML5 como localStorage ou geolocalização - [ ] Estude padrões HTML responsivos e design mobile-first - [ ] Revise o código HTML de outros desenvolvedores para melhores práticas ### 🌟 Seu Mês de Fundamentos da Web - [ ] Construa um site de portfólio mostrando sua maestria em HTML - [ ] Aprenda modelagem HTML com um framework como Handlebars - [ ] Contribua para projetos de código aberto melhorando a documentação HTML - [ ] Domine conceitos avançados de HTML como elementos personalizados - [ ] Integre HTML com frameworks CSS e bibliotecas JavaScript - [ ] Oriente outros que estão aprendendo os fundamentos do HTML ## 🎯 Sua Linha do Tempo de Maestria em HTML ### 🛠️ Resumo do Seu Kit de Ferramentas HTML Após concluir esta lição, você agora tem: - Estrutura do Documento: Fundamento completo do HTML5 com DOCTYPE adequado - Marcação Semântica: Tags significativas que melhoram acessibilidade e SEO - Integração de Imagens: Organização de arquivos e práticas de texto alternativo - Contêineres de Layout: Uso estratégico de divs com nomes de classes descritivos - Consciência de Acessibilidade: Compreensão da navegação por leitores de tela - Padrões Modernos: Práticas atuais do HTML5 e conhecimento de tags obsoletas - Base para Projetos: Base sólida para estilização em CSS e interatividade com JavaScript Próximos Passos: Sua estrutura HTML está pronta para estilização em CSS! A base semântica que você construiu tornará a próxima lição muito mais fácil de entender. ## Tarefa Pratique seu HTML: Construa um mockup de blog --- Aviso Legal: Este documento foi traduzido usando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional feita por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.
Projeto Terrário Parte 2: Introdução ao CSS
Lembra como seu terrário em HTML parecia bem básico? Com o CSS, transformamos essa estrutura simples em algo visualmente atraente. Se o HTML é como construir a estrutura de uma casa, o CSS é tudo que a faz parecer um lar - as cores das paredes, a disposição dos móveis, a iluminação e como os cômodos se conectam. Pense em como o Palácio de Versalhes começou como um simples alojamento de caça, mas a atenção cuidadosa à decoração e ao layout o transformou em um dos edifícios mais magníficos do mundo. Hoje, vamos transformar seu terrário de funcional para refinado. Você aprenderá a posicionar elementos com precisão, criar layouts que se adaptam a diferentes tamanhos de tela e adicionar o apelo visual que torna os sites envolventes. Ao final desta lição, você verá como o uso estratégico do CSS pode melhorar drasticamente seu projeto. Vamos adicionar estilo ao seu terrário. ## Quiz Pré-Aula Quiz pré-aula ## Começando com CSS O CSS é frequentemente visto como algo para "deixar as coisas bonitas", mas ele tem um propósito muito mais amplo. O CSS é como ser o diretor de um filme - você controla não apenas como tudo parece, mas como se move, responde à interação e se adapta a diferentes situações. O CSS moderno é incrivelmente poderoso. Você pode escrever código que ajusta automaticamente layouts para celulares, tablets e computadores. Pode criar animações suaves que guiam a atenção dos usuários para onde é necessário. Os resultados podem ser impressionantes quando tudo funciona em conjunto. Aqui está o que vamos realizar nesta lição: - Criar um design visual completo para seu terrário usando técnicas modernas de CSS - Explorar conceitos fundamentais como cascata, herança e seletores CSS - Implementar estratégias de posicionamento e layout responsivo - Construir o contêiner do terrário usando formas e estilos em CSS ### Pré-requisito Você deve ter concluído a estrutura HTML do seu terrário na lição anterior e tê-la pronta para ser estilizada. ### Configurando Seu Arquivo CSS Antes de começar a estilizar, precisamos conectar o CSS ao HTML. Essa conexão informa ao navegador onde encontrar as instruções de estilo para o terrário. Na pasta do seu terrário, crie um novo arquivo chamado style.css e, em seguida, vincule-o na seção <head> do seu documento HTML: O que este código faz: - Cria uma conexão entre seus arquivos HTML e CSS - Informa ao navegador para carregar e aplicar os estilos do style.css - Usa o atributo rel="stylesheet" para especificar que este é um arquivo CSS - Referencia o caminho do arquivo com href="./style.css" ## Entendendo a Cascata do CSS Já se perguntou por que o CSS é chamado de "Folhas de Estilo em Cascata"? Os estilos descem como uma cachoeira e, às vezes, entram em conflito uns com os outros. Considere como funcionam as estruturas de comando militar - uma ordem geral pode dizer "todas as tropas devem usar verde", mas uma ordem específica para sua unidade pode dizer "usem azul cerimonial para a cerimônia". A instrução mais específica tem precedência. O CSS segue uma lógica semelhante, e entender essa hierarquia torna a depuração muito mais fácil. ### Experimentando a Prioridade da Cascata Vamos ver a cascata em ação criando um conflito de estilo. Primeiro, adicione um estilo inline à sua tag <h1>: O que este código faz: - Aplica uma cor vermelha diretamente ao elemento <h1> usando estilo inline - Usa o atributo style para incorporar CSS diretamente no HTML - Cria a regra de estilo de maior prioridade para este elemento específico Em seguida, adicione esta regra ao seu arquivo style.css: No exemplo acima, nós: - Definimos uma regra CSS que direciona todos os elementos <h1> - Definimos a cor do texto como azul usando uma folha de estilo externa - Criamos uma regra de prioridade mais baixa em comparação com os estilos inline ✅ Verificação de Conhecimento: Qual cor aparece no seu aplicativo web? Por que essa cor prevalece? Consegue pensar em cenários onde você gostaria de sobrescrever estilos? ## Herança do CSS em Ação A herança do CSS funciona como genética - elementos herdam certas propriedades de seus elementos pai. Se você definir a família de fontes no elemento body, todo o texto dentro dele automaticamente usará essa mesma fonte. É semelhante a como o queixo característico da família Habsburgo apareceu ao longo das gerações sem ser especificado para cada indivíduo. No entanto, nem tudo é herdado. Estilos de texto como fontes e cores são herdados, mas propriedades de layout como margens e bordas não são. Assim como os filhos podem herdar traços físicos, mas não as escolhas de moda dos pais. ### Observando a Herança de Fontes Vamos ver a herança em ação definindo uma família de fontes no elemento <body>: Desmembrando o que acontece aqui: - Define a família de fontes para toda a página ao direcionar o elemento <body> - Usa uma pilha de fontes com opções de fallback para melhor compatibilidade entre navegadores - Aplica fontes modernas do sistema que ficam ótimas em diferentes sistemas operacionais - Garante que todos os elementos filhos herdem essa fonte, a menos que sejam especificamente sobrescritos Abra as ferramentas de desenvolvedor do seu navegador (F12), navegue até a aba Elementos e inspecione seu elemento <h1>. Você verá que ele herda a família de fontes do body: ✅ Hora de Experimentar: Tente definir outras propriedades herdáveis no <body> como color, line-height ou text-align. O que acontece com seu título e outros elementos? ### 🔄 Checagem Pedagógica Entendimento dos Fundamentos do CSS: Antes de avançar para seletores, certifique-se de que você pode: - ✅ Explicar a diferença entre cascata e herança - ✅ Prever qual estilo prevalecerá em um conflito de especificidade - ✅ Identificar quais propriedades são herdadas de elementos pai - ✅ Conectar arquivos CSS ao HTML corretamente Teste Rápido: Se você tiver esses estilos, qual cor será exibida em um <h1> dentro de um <div class="special">? Resposta: Vermelho (o seletor de elemento direciona diretamente o h1) ## Dominando Seletores CSS Os seletores CSS são sua maneira de direcionar elementos específicos para estilização. Eles funcionam como dar direções precisas - em vez de dizer "a casa", você pode dizer "a casa azul com a porta vermelha na Rua Maple". O CSS oferece diferentes maneiras de ser específico, e escolher o seletor certo é como escolher a ferramenta apropriada para a tarefa. Às vezes você precisa estilizar todas as portas do bairro, e às vezes apenas uma porta específica. ### Seletores de Elementos (Tags) Os seletores de elementos direcionam elementos HTML pelo nome da tag. Eles são perfeitos para definir estilos base que se aplicam amplamente em sua página: Entendendo esses estilos: - Define tipografia consistente em toda a página com o seletor body - Remove margens e preenchimentos padrão do navegador para melhor controle - Estiliza todos os elementos de título com cor, alinhamento e espaçamento - Usa unidades rem para tamanhos de fonte escaláveis e acessíveis Embora os seletores de elementos funcionem bem para estilização geral, você precisará de seletores mais específicos para estilizar componentes individuais, como as plantas no seu terrário. ### Seletores de ID para Elementos Únicos Os seletores de ID usam o símbolo # e direcionam elementos com atributos id específicos. Como os IDs devem ser únicos em uma página, eles são perfeitos para estilizar elementos individuais e especiais, como nossos contêineres de plantas à esquerda e à direita. Vamos criar o estilo para os contêineres laterais do terrário onde as plantas vão ficar: O que este código realiza: - Posiciona os contêineres nas bordas esquerda e direita usando posicionamento absolute - Usa unidades vh (altura da viewport) para altura responsiva que se adapta ao tamanho da tela - Aplica box-sizing: border-box para que o preenchimento seja incluído na largura total - Remove unidades px desnecessárias de valores zero para um código mais limpo - Define uma cor de fundo sutil que é mais agradável aos olhos do que o cinza forte ✅ Desafio de Qualidade de Código: Note como este CSS viola o princípio DRY (Don't Repeat Yourself). Consegue refatorá-lo usando tanto um ID quanto uma classe? Abordagem Melhorada: ### Seletores de Classe para Estilos Reutilizáveis Os seletores de classe usam o símbolo . e são perfeitos quando você quer aplicar os mesmos estilos a vários elementos. Diferente dos IDs, as classes podem ser reutilizadas em todo o HTML, tornando-as ideais para padrões de estilização consistentes. No nosso terrário, cada planta precisa de um estilo semelhante, mas também de posicionamento individual. Usaremos uma combinação de classes para estilos compartilhados e IDs para posicionamento único. Aqui está a estrutura HTML para cada planta: Elementos-chave explicados: - Usa class="plant-holder" para estilização consistente de contêineres em todas as plantas - Aplica class="plant" para estilização e comportamento compartilhados das imagens - Inclui id="plant1" único para posicionamento individual e interação com JavaScript - Fornece texto alternativo descritivo para acessibilidade de leitores de tela Agora adicione esses estilos ao seu arquivo style.css: Desmembrando esses estilos: - Cria posicionamento relativo para o contêiner da planta para estabelecer um contexto de posicionamento - Define cada contêiner de planta com 13% de altura, garantindo que todas as plantas caibam verticalmente sem rolagem - Desloca os contêineres ligeiramente para a esquerda para centralizar melhor as plantas dentro de seus contêineres - Permite que as plantas escalem de forma responsiva com as propriedades max-width e max-height - Usa z-index para posicionar as plantas acima de outros elementos no terrário - Adiciona um efeito de hover sutil com transições CSS para melhor interação do usuário ✅ Pensamento Crítico: Por que precisamos de ambos os seletores .plant-holder e .plant? O que aconteceria se tentássemos usar apenas um? ## Entendendo o Posicionamento no CSS O posicionamento no CSS é como ser o diretor de palco de uma peça - você direciona onde cada ator deve estar e como eles se movem pelo palco. Alguns atores seguem a formação padrão, enquanto outros precisam de posicionamento específico para efeito dramático. Uma vez que você entende o posicionamento, muitos desafios de layout se tornam gerenciáveis. Precisa de uma barra de navegação que permaneça no topo enquanto os usuários rolam? O posicionamento resolve isso. Quer um tooltip que apareça em um local específico? Isso também é posicionamento. ### Os Cinco Valores de Posicionamento ### Posicionamento no Nosso Terrário Nosso terrário usa uma combinação estratégica de tipos de posicionamento para criar o layout desejado: Entendendo a estratégia de posicionamento: - Contêineres absolutos são removidos do fluxo normal do documento e fixados nas bordas da tela - Contêineres relativos criam um contexto de posicionamento enquanto permanecem no fluxo do documento - Plantas absolutas podem ser posicionadas com precisão dentro de seus contêineres relativos - Essa combinação permite que as plantas se empilhem verticalmente enquanto são posicionáveis individualmente ✅ Hora de Experimentar: Tente alterar os valores de posicionamento e observe os resultados: - O que acontece se você mudar .container de absolute para relative? - Como a disposição muda se .plant-holder usar absolute em vez de relative? - O que acontece ao alterar .plant para posicionamento relative? ### 🔄 Verificação Pedagógica Domínio de Posicionamento em CSS: Pausa para verificar sua compreensão: - ✅ Você consegue explicar por que as plantas precisam de posicionamento absoluto para arrastar e soltar? - ✅ Você entende como contêineres relativos criam contexto de posicionamento? - ✅ Por que os contêineres laterais usam posicionamento absoluto? - ✅ O que aconteceria se você removesse completamente as declarações de posicionamento? Conexão com o Mundo Real: Pense em como o posicionamento em CSS reflete layouts do mundo real: - Static: Livros em uma prateleira (ordem natural) - Relative: Movendo um livro ligeiramente, mas mantendo sua posição - Absolute: Colocando um marcador em uma página específica - Fixed: Um post-it que permanece visível enquanto você vira as páginas ## Construindo o Terrário com CSS Agora vamos construir um jarro de vidro usando apenas CSS - sem imagens ou softwares gráficos. Criar vidro realista, sombras e efeitos de profundidade usando posicionamento e transparência demonstra as capacidades visuais do CSS. Essa técnica reflete como arquitetos do movimento Bauhaus usavam formas geométricas simples para criar estruturas complexas e bonitas. Uma vez que você compreenda esses princípios, reconhecerá as técnicas de CSS por trás de muitos designs web. ### Criando os Componentes do Jarro de Vidro Vamos construir o jarro do terrário peça por peça. Cada parte usa posicionamento absoluto e tamanhos baseados em porcentagem para design responsivo: Entendendo a construção do terrário: - Usa dimensões baseadas em porcentagem para escalonamento responsivo em todos os tamanhos de tela - Posiciona elementos de forma absoluta para empilhá-los e alinhá-los com precisão - Aplica diferentes valores de opacidade para criar o efeito de transparência do vidro - Implementa camadas com z-index para que as plantas apareçam dentro do jarro - Adiciona sombras sutis e bordas arredondadas refinadas para uma aparência mais realista ### Design Responsivo com Porcentagens Observe como todas as dimensões usam porcentagens em vez de valores fixos em pixels: Por que isso importa: - Garante que o terrário seja escalonado proporcionalmente em qualquer tamanho de tela - Mantém as relações visuais entre os componentes do jarro - Proporciona uma experiência consistente desde celulares até grandes monitores de desktop - Permite que o design se adapte sem quebrar o layout visual ### Unidades CSS em Ação Estamos usando unidades rem para bordas arredondadas, que escalam em relação ao tamanho da fonte raiz. Isso cria designs mais acessíveis que respeitam as preferências de fonte do usuário. Saiba mais sobre unidades relativas do CSS na especificação oficial. ✅ Experimentação Visual: Tente modificar esses valores e observe os efeitos: - Altere a opacidade do jarro de 0.5 para 0.8 – como isso afeta a aparência do vidro? - Ajuste a cor da terra de #3a241d para #8B4513 – qual impacto visual isso tem? - Modifique o z-index da terra para 2 – o que acontece com as camadas? ### 🔄 Verificação Pedagógica Compreensão de Design Visual em CSS: Confirme sua compreensão do CSS visual: - ✅ Como dimensões baseadas em porcentagem criam design responsivo? - ✅ Por que a opacidade cria o efeito de transparência do vidro? - ✅ Qual é o papel do z-index na organização das camadas? - ✅ Como os valores de bordas arredondadas criam o formato do jarro? Princípio de Design: Observe como estamos construindo visuais complexos a partir de formas simples: 1. Retângulos → Retângulos arredondados → Componentes do jarro 2. Cores planas → Opacidade → Efeito de vidro 3. Elementos individuais → Composição em camadas → Aparência 3D --- ## Desafio do Agente GitHub Copilot 🚀 Use o modo Agente para completar o seguinte desafio: Descrição: Crie uma animação em CSS que faça as plantas do terrário balançarem suavemente, simulando o efeito de uma brisa natural. Isso ajudará você a praticar animações em CSS, transformações e keyframes enquanto melhora o apelo visual do seu terrário. Prompt: Adicione animações de keyframes em CSS para fazer as plantas no terrário balançarem suavemente de um lado para o outro. Crie uma animação de balanço que gire cada planta ligeiramente (2-3 graus) para a esquerda e para a direita com uma duração de 3-4 segundos, e aplique-a à classe .plant. Certifique-se de que a animação seja contínua e tenha uma função de easing para um movimento natural. Saiba mais sobre modo agente aqui. ## 🚀 Desafio: Adicionando Reflexos no Vidro Pronto para aprimorar seu terrário com reflexos realistas no vidro? Essa técnica adicionará profundidade e realismo ao design. Você criará destaques sutis que simulam como a luz reflete nas superfícies de vidro. Essa abordagem é semelhante à usada por pintores renascentistas como Jan van Eyck, que utilizavam luz e reflexos para fazer o vidro pintado parecer tridimensional. Aqui está o que você deve alcançar: Seu desafio: - Crie formas ovais sutis, brancas ou de cor clara, para os reflexos do vidro - Posicione-as estrategicamente no lado esquerdo do jarro - Aplique efeitos apropriados de opacidade e desfoque para reflexos de luz realistas - Use border-radius para criar formas orgânicas, semelhantes a bolhas - Experimente com gradientes ou sombras para maior realismo ## Quiz Pós-Aula Quiz pós-aula ## Expanda Seu Conhecimento em CSS CSS pode parecer complexo inicialmente, mas entender esses conceitos básicos fornece uma base sólida para técnicas mais avançadas. Próximas áreas de aprendizado em CSS: - Flexbox - simplifica o alinhamento e a distribuição de elementos - CSS Grid - oferece ferramentas poderosas para criar layouts complexos - Variáveis CSS - reduz a repetição e melhora a manutenção - Design responsivo - garante que os sites funcionem bem em diferentes tamanhos de tela ### Recursos Interativos de Aprendizado Pratique esses conceitos com esses jogos envolventes e interativos: - 🐸 Flexbox Froggy - Domine o Flexbox com desafios divertidos - 🌱 Grid Garden - Aprenda CSS Grid cultivando cenouras virtuais - 🎯 CSS Battle - Teste suas habilidades em CSS com desafios de codificação ### Aprendizado Adicional Para fundamentos abrangentes de CSS, complete este módulo do Microsoft Learn: Estilize seu aplicativo HTML com CSS ### ⚡ O Que Você Pode Fazer nos Próximos 5 Minutos - [ ] Abra o DevTools e inspecione estilos CSS em qualquer site usando o painel de Elementos - [ ] Crie um arquivo CSS simples e vincule-o a uma página HTML - [ ] Tente alterar cores usando diferentes métodos: hex, RGB e nomes de cores - [ ] Pratique o modelo de caixa adicionando padding e margin a um div ### 🎯 O Que Você Pode Realizar Nesta Hora - [ ] Complete o quiz pós-aula e revise os fundamentos do CSS - [ ] Estilize sua página HTML com fontes, cores e espaçamento - [ ] Crie um layout simples usando flexbox ou grid - [ ] Experimente transições em CSS para efeitos suaves - [ ] Pratique design responsivo com media queries ### 📅 Sua Aventura de CSS por Uma Semana - [ ] Complete a tarefa de estilização do terrário com criatividade - [ ] Domine o CSS Grid criando um layout de galeria de fotos - [ ] Aprenda animações em CSS para dar vida aos seus designs - [ ] Explore pré-processadores CSS como Sass ou Less - [ ] Estude princípios de design e aplique-os ao seu CSS - [ ] Analise e recrie designs interessantes que você encontrar online ### 🌟 Sua Maestria em Design ao Longo de Um Mês - [ ] Construa um sistema completo de design de site responsivo - [ ] Aprenda CSS-in-JS ou frameworks utilitários como Tailwind - [ ] Contribua para projetos de código aberto com melhorias em CSS - [ ] Domine conceitos avançados de CSS como propriedades personalizadas e contenção - [ ] Crie bibliotecas de componentes reutilizáveis com CSS modular - [ ] Oriente outros aprendizes de CSS e compartilhe conhecimento de design ## 🎯 Sua Linha do Tempo de Maestria em CSS ### 🛠️ Resumo do Seu Kit de Ferramentas CSS Após completar esta aula, você agora tem: - Compreensão da Cascata: Como estilos herdam e se sobrepõem - Domínio de Seletores: Alvo preciso com elementos, classes e IDs - Habilidades de Posicionamento: Colocação estratégica de elementos e organização de camadas - Design Visual: Criando efeitos de vidro, sombras e transparência - Técnicas Responsivas: Layouts baseados em porcentagem que se adaptam a qualquer tela - Organização de Código: Estrutura CSS limpa e fácil de manter - Práticas Modernas: Uso de unidades relativas e padrões de design acessíveis Próximos Passos: Seu terrário agora tem estrutura (HTML) e estilo (CSS). A aula final adicionará interatividade com JavaScript! ## Tarefa Refatoração de CSS --- Aviso Legal: Este documento foi traduzido utilizando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.
Projeto Terrário Parte 1: Introdução ao HTML
HTML, ou HyperText Markup Language, é a base de todos os websites que alguma vez visitou. Pense no HTML como o esqueleto que dá estrutura às páginas web – define onde o conteúdo vai, como está organizado e o que cada parte representa. Enquanto o CSS mais tarde vai "vestir" o seu HTML com cores e layouts, e o JavaScript dará vida com interatividade, o HTML fornece a estrutura essencial que torna tudo o resto possível. Nesta lição, vai criar a estrutura HTML para uma interface virtual de terrário. Este projeto prático ensinar-lhe-á conceitos fundamentais de HTML enquanto constrói algo visualmente apelativo. Vai aprender a organizar conteúdo usando elementos semânticos, trabalhar com imagens e criar a base para uma aplicação web interativa. No final desta lição, terá uma página HTML funcional a mostrar imagens de plantas organizadas em colunas, pronta para estilização na próxima lição. Não se preocupe se parecer básico no início – é exatamente assim que o HTML deve ser antes do CSS adicionar o polimento visual. ## Questionário Pré-Aula Questionário pré-aula ## Configurar o Seu Projeto Antes de mergulharmos no código HTML, vamos configurar um ambiente de trabalho adequado para o seu projeto de terrário. Criar uma estrutura de ficheiros organizada desde o início é um hábito crucial que o ajudará durante toda a sua jornada no desenvolvimento web. ### Tarefa: Crie a Estrutura do Seu Projeto Vai criar uma pasta dedicada para o seu projeto terrário e adicionar o seu primeiro ficheiro HTML. Aqui estão duas abordagens que pode usar: Opção 1: Usar o Visual Studio Code 1. Abra o Visual Studio Code 2. Clique em "File" → "Open Folder" ou use Ctrl+K, Ctrl+O (Windows/Linux) ou Cmd+K, Cmd+O (Mac) 3. Crie uma nova pasta chamada terrarium e selecione-a 4. No painel Explorer, clique no ícone "New File" 5. Dê ao seu ficheiro o nome index.html Opção 2: Usar Comandos de Terminal O que estes comandos fazem: - Cria um novo diretório chamado terrarium para o seu projeto - Navega para dentro do diretório terrarium - Cria um ficheiro vazio index.html - Abre o ficheiro no Visual Studio Code para edição ## Compreender a Estrutura do Documento HTML Cada documento HTML segue uma estrutura específica que os browsers precisam de entender e apresentar corretamente. Pense nesta estrutura como uma carta formal – tem elementos obrigatórios numa ordem específica que ajudam o destinatário (neste caso, o browser) a processar o conteúdo adequadamente. Vamos começar por adicionar a fundação essencial que todo documento HTML necessita. ### A Declaração DOCTYPE e o Elemento Raiz As primeiras duas linhas de qualquer ficheiro HTML servem como a "introdução" do documento ao browser: Entender o que este código faz: - Declara o tipo de documento como HTML5 usando <!DOCTYPE html> - Cria o elemento raiz <html> que vai conter todo o conteúdo da página - Estabelece padrões web modernos para renderização correta pelo browser - Assegura apresentação consistente em diferentes browsers e dispositivos ### 🔄 Verificação Pedagógica Pause e Reflita: Antes de continuar, certifique-se de que entende: - ✅ Porque é que todo documento HTML precisa de uma declaração DOCTYPE - ✅ O que o elemento raiz <html> contém - ✅ Como esta estrutura ajuda os browsers a renderizar as páginas corretamente Auto-Teste Rápido: Consegue explicar com as suas próprias palavras o que significa "renderização conforme os padrões"? ## Adicionar Metadados Essenciais ao Documento A secção <head> de um documento HTML contém informações cruciais que os browsers e motores de busca precisam, mas que os visitantes não veem diretamente na página. Pense nela como a informação "por trás das câmaras" que ajuda a sua página web a funcionar corretamente e a aparecer bem em diferentes dispositivos e plataformas. Estes metadados indicam aos browsers como mostrar a sua página, que codificação de caracteres usar e como lidar com diferentes tamanhos de ecrã – tudo essencial para criar páginas web profissionais e acessíveis. ### Tarefa: Adicione a Cabeça do Documento Insira esta secção <head> entre as suas tags de abertura e fecho <html>: Explicação do que cada elemento faz: - Define o título da página que aparece nas abas do browser e nos resultados de pesquisa - Especifica a codificação de caracteres UTF-8 para apresentação correta de texto globalmente - Garante compatibilidade com versões modernas do Internet Explorer - Configura design responsivo definindo o viewport para corresponder à largura do dispositivo - Controla o nível inicial de zoom para mostrar o conteúdo no tamanho natural ## Construir o Corpo do Documento O elemento <body> contém todo o conteúdo visível da sua página web – tudo o que os utilizadores vão ver e com que vão interagir. Enquanto a secção <head> forneceu instruções ao browser, a secção <body> contém o conteúdo real: texto, imagens, botões e outros elementos que formam a sua interface. Vamos adicionar a estrutura do corpo e entender como as tags HTML funcionam em conjunto para criar conteúdo significativo. ### Compreensão da Estrutura das Tags HTML HTML usa tags emparelhadas para definir elementos. A maioria das tags tem uma tag de abertura como <p> e uma tag de fecho como </p>, com conteúdo pelo meio: <p>Olá, mundo!</p>. Isto cria um elemento de parágrafo que contém o texto "Olá, mundo!". ### Tarefa: Adicione o Elemento Body Atualize o seu ficheiro HTML para incluir o elemento <body>: O que esta estrutura completa provê: - Estabelece a estrutura básica do documento HTML5 - Inclui metadados essenciais para renderização correta pelo browser - Cria um corpo vazio pronto para o seu conteúdo visível - Segue as melhores práticas modernas de desenvolvimento web Agora está pronto para adicionar os elementos visíveis do seu terrário. Usaremos elementos <div> como contentores para organizar diferentes secções de conteúdo e elementos <img> para mostrar as imagens das plantas. ### Trabalhar com Imagens e Contentores de Layout Imagens são especiais em HTML porque usam tags "self-closing". Ao contrário de elementos como <p></p> que envolvem conteúdo, a tag <img> contém toda a informação dentro da própria tag usando atributos como src para o caminho do ficheiro da imagem e alt para acessibilidade. Antes de adicionar imagens ao seu HTML, precisa de organizar os seus ficheiros de projeto corretamente criando uma pasta de imagens e adicionando os gráficos das plantas. Primeiro, prepare as suas imagens: 1. Crie uma pasta chamada images dentro da sua pasta de projeto terrário 2. Descarregue as imagens das plantas da pasta da solução (14 imagens de plantas ao todo) 3. Copie todas as imagens das plantas para a sua nova pasta images ### Tarefa: Criar o Layout de Exibição das Plantas Agora adicione as imagens das plantas organizadas em duas colunas entre as suas tags <body></body>: Passo a passo, isto é o que acontece neste código: - Cria um contentor principal da página com id="page" para conter todo o conteúdo - Estabelece dois contentores de colunas: left-container e right-container - Organiza 7 plantas na coluna da esquerda e 7 plantas na coluna da direita - Envolve cada imagem de planta num div com classe plant-holder para posicionamento individual - Aplica nomes de classes consistentes para estilização CSS na próxima lição - Atribui IDs únicos a cada imagem de planta para interação com JavaScript mais tarde - Inclui caminhos de ficheiros corretos apontando para a pasta de imagens ### 🔄 Verificação Pedagógica Compreensão da Estrutura: Tire um momento para rever a sua estrutura HTML: - ✅ Consegue identificar os contentores principais no seu layout? - ✅ Entende porque cada imagem tem um ID único? - ✅ Como descreveria o propósito dos divs plant-holder? Inspeção Visual: Abra o seu ficheiro HTML num browser. Deve ver: - Uma lista básica de imagens de plantas - Imagens organizadas em duas colunas - Layout simples, sem estilos Lembre-se: Esta aparência simples é exatamente como o HTML deve parecer antes da aplicação do CSS! Com este markup adicionado, as plantas vão aparecer no ecrã, embora ainda não estejam polidas visualmente – para isso serve o CSS na próxima lição! Por agora, tem uma base sólida de HTML que organiza corretamente o seu conteúdo e segue as melhores práticas de acessibilidade. ## Usar HTML Semântico para Acessibilidade HTML semântico significa escolher elementos HTML com base no seu significado e propósito, não apenas na aparência. Quando usa marcação semântica, está a comunicar a estrutura e o significado do seu conteúdo aos browsers, motores de busca e tecnologias assistivas como leitores de ecrã. Esta abordagem torna os seus websites mais acessíveis para utilizadores com deficiências e ajuda os motores de busca a compreender melhor o seu conteúdo. É um princípio fundamental do desenvolvimento web moderno que cria melhores experiências para todos. ### Adicionar um Título Semântico à Página Vamos adicionar um cabeçalho próprio à sua página de terrário. Insira esta linha logo após a sua tag de abertura <body>: Porque é que a marcação semântica importa: - Ajuda os leitores de ecrã a navegar e entender a estrutura da página - Melhora a otimização para motores de busca (SEO) ao clarificar a hierarquia do conteúdo - Aumenta a acessibilidade para utilizadores com deficiências visuais ou cognitivas - Cria melhores experiências para utilizadores em todos os dispositivos e plataformas - Segue os padrões web e melhores práticas para desenvolvimento profissional Exemplos de escolhas semânticas vs. não semânticas: ## Criar o Contentor do Terrário Agora vamos adicionar a estrutura HTML para o próprio terrário – o contentor de vidro onde as plantas eventualmente serão colocadas. Esta secção demonstra um conceito importante: o HTML fornece estrutura, mas sem estilização CSS, estes elementos ainda não serão visíveis. O markup do terrário usa nomes de classes descritivos que tornarão a estilização CSS intuitiva e fácil de manter na próxima lição. ### Tarefa: Adicione a Estrutura do Terrário Insira este markup acima da última tag </div> (antes da tag de fecho do contentor da página): Compreender esta estrutura do terrário: - Cria um contentor principal do terrário com um ID único para estilização - Define elementos separados para cada componente visual (topo, paredes, terra, fundo) - Inclui elementos aninhados para efeitos de reflexão no vidro (elementos brilhantes) - Usa nomes de classes descritivos que indicam claramente a função de cada elemento - Prepara a estrutura para o estilo CSS que criará o aspeto do terrário de vidro ### 🔄 Verificação Pedagógica Domínio da Estrutura HTML: Antes de avançar, certifica-te de que sabes: - ✅ Explicar a diferença entre estrutura HTML e aparência visual - ✅ Identificar elementos HTML semânticos vs. não semânticos - ✅ Descrever como uma marcação adequada beneficia a acessibilidade - ✅ Reconhecer a estrutura completa da árvore do documento Testa o Teu Entendimento: Tenta abrir o teu ficheiro HTML num navegador com o JavaScript desativado e o CSS removido. Isto mostra-te a estrutura semântica pura que criaste! --- ## Desafio do Agente GitHub Copilot Utiliza o modo Agente para completar o seguinte desafio: Descrição: Cria uma estrutura HTML semântica para uma secção de guia de cuidados de plantas que possa ser adicionada ao projeto do terrário. Enunciado: Cria uma secção HTML semântica que inclui um título principal "Guia de Cuidados de Plantas", três subseções com os títulos "Rega", "Requisitos de Luz" e "Cuidados com o Solo", cada uma contendo um parágrafo de informação sobre cuidados com plantas. Usa etiquetas HTML semânticas adequadas como <section>, <h2>, <h3>, e <p> para estruturar corretamente o conteúdo. Sabe mais sobre o modo agente aqui. ## Desafio Explorar a História do HTML Aprender Sobre a Evolução da Web O HTML evoluiu significativamente desde que Tim Berners-Lee criou o primeiro navegador web no CERN em 1990. Algumas etiquetas antigas como <marquee> estão agora obsoletas porque não funcionam bem com os padrões modernos de acessibilidade e princípios de design responsivo. Tenta Este Experimento: 1. Envolve temporariamente o teu título <h1> numa etiqueta <marquee>: <marquee><h1>O Meu Terrário</h1></marquee> 2. Abre a tua página num navegador e observa o efeito de deslocamento 3. Pensa por que esta etiqueta foi descontinuada (dica: considera a experiência do utilizador e acessibilidade) 4. Remove a etiqueta <marquee> e volta à marcação semântica Perguntas de Reflexão: - Como poderá um título em movimento afetar utilizadores com deficiência visual ou sensibilidade ao movimento? - Que técnicas modernas de CSS poderiam alcançar efeitos visuais semelhantes de forma mais acessível? - Porque é importante usar padrões web atuais em vez de elementos obsoletos? Explora mais sobre elementos HTML obsoletos e depreciados para entender como os padrões web evoluem para melhorar a experiência do utilizador. ## Questionário Pós-Aula Questionário pós-aula ## Revisão & Autoestudo Aprofunda o Teu Conhecimento de HTML O HTML tem sido a base da web durante mais de 30 anos, evoluindo de uma simples linguagem de marcação de documentos para uma plataforma sofisticada para construir aplicações interativas. Compreender esta evolução ajuda-te a valorizar os padrões web modernos e a tomar melhores decisões de desenvolvimento. Caminhos de Aprendizagem Recomendados: 1. História e Evolução do HTML - Pesquisa a linha temporal do HTML 1.0 ao HTML5 - Explora porque certas etiquetas foram depreciadas (acessibilidade, compatibilidade móvel, manutenção) - Investiga funcionalidades e propostas emergentes do HTML 2. Imersão em HTML Semântico - Estuda a lista completa de elementos semânticos do HTML5 - Pratica identificar quando usar <article>, <section>, <aside>, e <main> - Aprende sobre atributos ARIA para maior acessibilidade 3. Desenvolvimento Web Moderno - Explora como construir websites responsivos na Microsoft Learn - Entende como o HTML se integra com CSS e JavaScript - Aprende boas práticas de desempenho web e SEO Perguntas de Reflexão: - Quais etiquetas HTML depreciadas descobriste e porquê foram removidas? - Que novas funcionalidades HTML estão a ser propostas para futuras versões? - Como é que o HTML semântico contribui para acessibilidade web e SEO? ### ⚡ O Que Podes Fazer nos Próximos 5 Minutos - [ ] Abre as Ferramentas de Desenvolvedor (F12) e inspeciona a estrutura HTML do teu website favorito - [ ] Cria um ficheiro HTML simples com tags básicas: <h1>, <p>, e <img> - [ ] Valida o teu HTML usando o Validador HTML da W3C online - [ ] Tenta adicionar um comentário ao teu HTML usando <!-- comentário --> ### 🎯 O Que Podes Atingir Nesta Hora - [ ] Completa o questionário pós-licção e revê conceitos de HTML semântico - [ ] Constrói uma página web simples sobre ti usando estrutura HTML correta - [ ] Experimenta diferentes níveis de cabeçalhos e etiquetas de formatação de texto - [ ] Adiciona imagens e links para praticar integração multimédia - [ ] Pesquisa funcionalidades HTML5 que ainda não experimentaste ### 📅 A Tua Jornada HTML de Uma Semana - [ ] Completa o projeto do terrário com marcação semântica - [ ] Cria uma página web acessível usando rótulos ARIA e roles - [ ] Pratica a criação de formulários com vários tipos de input - [ ] Explora APIs do HTML5 como localStorage ou geolocalização - [ ] Estuda padrões de HTML responsivo e design mobile-first - [ ] Revê o código HTML de outros desenvolvedores para melhores práticas ### 🌟 A Tua Fundação Web de Um Mês - [ ] Constrói um website portfólio que demonstre o teu domínio de HTML - [ ] Aprende a templatear HTML com um framework como Handlebars - [ ] Contribui para projetos open source melhorando documentação HTML - [ ] Domina conceitos avançados de HTML como elementos customizados - [ ] Integra HTML com frameworks CSS e bibliotecas JavaScript - [ ] Orienta outros que estejam a aprender os fundamentos do HTML ## 🎯 O Teu Cronograma de Domínio do HTML ### 🛠️ O Resumo da Tua Caixa de Ferramentas HTML Após concluíres esta lição, agora tens: - Estrutura do Documento: Fundação completa HTML5 com DOCTYPE correto - Marcação Semântica: Etiquetas com significado que melhoram acessibilidade e SEO - Integração de Imagens: Organização correta dos ficheiros e boas práticas de texto alternativo - Contêineres de Layout: Uso estratégico de divs com nomes de classes descritivos - Consciência de Acessibilidade: Entendimento da navegação com leitores de ecrã - Padrões Modernos: Práticas atuais de HTML5 e conhecimento sobre tags depreciadas - Fundação para o Projeto: Base sólida para o estilo CSS e interatividade JavaScript Próximos Passos: A tua estrutura HTML está pronta para o estilo CSS! A fundação semântica que construíste tornará a próxima lição muito mais fácil de compreender. ## Trabalho de Casa Pratica o teu HTML: Cria um mockup de blog --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Aviso: Este documento foi traduzido utilizando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos por garantir a precisão, por favor tenha em conta que traduções automáticas podem conter erros ou imprecisões. O documento original no seu idioma nativo deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações erradas decorrentes da utilização desta tradução. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Projeto Terrário Parte 2: Introdução ao CSS
Lembras-te como o teu terrário HTML parecia bastante básico? O CSS é onde transformamos essa estrutura simples numa coisa visualmente apelativa. Se o HTML é como construir a estrutura de uma casa, então o CSS é tudo o que a faz parecer um lar – as cores da pintura, a disposição dos móveis, a iluminação e como as divisões se conectam. Pensa em como o Palácio de Versalhes começou como uma simples casa de caça, mas a atenção cuidadosa à decoração e ao layout transformou-o num dos edifícios mais magníficos do mundo. Hoje, vamos transformar o teu terrário de funcional para polido. Vais aprender como posicionar elementos com precisão, fazer layouts que respondem a diferentes tamanhos de ecrã e criar o apelo visual que torna os websites cativantes. No final desta lição, vais ver como a aplicação estratégica do CSS pode melhorar dramaticamente o teu projeto. Vamos adicionar estilo ao teu terrário. ## Questionário Pré-Aula Questionário pré-aula ## Começar com CSS O CSS é frequentemente pensado como apenas "tornar as coisas bonitas", mas serve um propósito muito mais amplo. O CSS é como ser o realizador de um filme – controlas não apenas como tudo parece, mas como se move, responde à interação e se adapta a diferentes situações. O CSS moderno é notavelmente capaz. Podes escrever código que ajusta automaticamente layouts para telemóveis, tablets e computadores de secretária. Podes criar animações suaves que guiam a atenção dos utilizadores para onde é necessário. Os resultados podem ser bastante impressionantes quando tudo funciona em conjunto. Isto é o que vamos alcançar nesta lição: - Criar um design visual completo para o teu terrário usando técnicas modernas de CSS - Explorar conceitos fundamentais como a cascata, a herança e os seletores CSS - Implementar estratégias responsivas de posicionamento e layout - Construir o recipiente do terrário usando formas e estilos CSS ### Pré-Requisito Deves ter concluído a estrutura HTML para o teu terrário da lição anterior e tê-la pronta para ser estilizada. ### Configurar o Teu Ficheiro CSS Antes de começarmos a aplicar estilos, precisamos de ligar o CSS ao nosso HTML. Esta ligação diz ao navegador onde encontrar as instruções de estilos para o nosso terrário. Na tua pasta do terrário, cria um novo ficheiro chamado style.css e liga-o na secção <head> do teu documento HTML: Isto é o que este código faz: - Cria uma ligação entre os teus ficheiros HTML e CSS - Indica ao navegador para carregar e aplicar os estilos de style.css - Usa o atributo rel="stylesheet" para especificar que é um ficheiro CSS - Referencia o caminho do ficheiro com href="./style.css" ## Compreender a Cascata do CSS Já alguma vez te perguntaste por que razão o CSS se chama Cascading Style Sheets? Os estilos descem em cascata como uma cascata, e às vezes entram em conflito entre si. Considera como funcionam as estruturas de comando militares – uma ordem geral pode dizer "todas as tropas vestem de verde", mas uma ordem específica para a tua unidade pode dizer "vistam uniforme azul para a cerimónia". A instrução mais específica prevalece. O CSS segue uma lógica similar, e entender esta hierarquia torna a depuração muito mais manejável. ### Experimentar a Prioridade da Cascata Vamos ver a cascata em ação criando um conflito de estilos. Primeiro, adiciona um estilo inline à tua etiqueta <h1>: O que este código faz: - Aplica uma cor vermelha diretamente ao elemento <h1> usando estilo inline - Usa o atributo style para embutir CSS diretamente no HTML - Cria a regra de estilo com a maior prioridade para este elemento específico De seguida, adiciona esta regra ao teu ficheiro style.css: No exemplo acima, nós: - Definimos uma regra CSS que afeta todos os elementos <h1> - Definimos a cor do texto para azul usando uma folha de estilos externa - Criamos uma regra com prioridade inferior em comparação a estilos inline ✅ Verificação de Conhecimento: Que cor é exibida na tua aplicação web? Por que razão essa cor prevalece? Consegue pensar em cenários onde poderias querer sobrepor estilos? ## A Herança no CSS em Ação A herança no CSS funciona como a genética – os elementos herdam certas propriedades dos seus elementos pai. Se definires a família de fontes no elemento body, todo o texto dentro usará automaticamente essa mesma fonte. É semelhante a como a mandíbula distintiva da família Habsburgo apareceu em várias gerações sem ser especificada para cada indivíduo. No entanto, nem tudo é herdado. Estilos de texto como fontes e cores são herdados, mas propriedades de layout como margens e bordas não são. Tal como as crianças podem herdar traços físicos mas não os gostos de moda dos pais. ### Observando a Herança da Fonte Vamos ver a herança em ação definindo uma família de fontes no elemento <body>: Análise do que acontece aqui: - Define a família de fontes para toda a página ao selecionar o elemento <body> - Usa uma pilha de fontes com opções alternativas para melhor compatibilidade nos navegadores - Aplica fontes modernas do sistema que ficam bem em diferentes sistemas operativos - Garante que todos os elementos filhos herdam esta fonte, a menos que seja especificamente sobreposto Abre as ferramentas de desenvolvedor do teu navegador (F12), vai ao separador Elements (Elementos) e inspeciona o teu elemento <h1>. Vais ver que herda a família de fontes do body: ✅ Hora do Experimento: Experimenta definir outras propriedades herdáveis no <body> como color, line-height ou text-align. O que acontece ao teu título e a outros elementos? ### 🔄 Verificação Pedagógica Compreensão da Base do CSS: Antes de avançar para os seletores, assegura que consegues: - ✅ Explicar a diferença entre cascata e herança - ✅ Prever qual estilo vai prevalecer num conflito de especificidade - ✅ Identificar quais propriedades são herdadas dos elementos pai - ✅ Ligar ficheiros CSS ao HTML corretamente Teste Rápido: Se tens estes estilos, que cor terá um <h1> dentro de um <div class="special">? Resposta: Vermelho (o seletor de elemento direciona diretamente o h1) ## Dominar os Seletores CSS Os seletores CSS são a tua forma de direcionar elementos específicos para estilos. Funcionam como dar indicações precisas – em vez de dizer "a casa", podes dizer "a casa azul com a porta vermelha na Maple Street". O CSS fornece várias formas de ser específico, e escolher o seletor certo é como escolher a ferramenta apropriada para a tarefa. Por vezes precisas de estilizar cada porta na vizinhança, outras só uma porta específica. ### Seletores de Elemento (Etiquetas) Os seletores de elemento visam elementos HTML pelo nome da etiqueta. São perfeitos para definir estilos base que se aplicam amplamente na tua página: Compreendendo estes estilos: - Define tipografia consistente em toda a página com o seletor body - Remove margens e preenchimentos padrão do navegador para melhor controlo - Estiliza todos os elementos de cabeçalho com cor, alinhamento e espaçamento - Usa unidades rem para dimensionamento escalável e acessível das fontes Embora os seletores de elemento sejam bons para estilos gerais, precisarás de seletores mais específicos para estilizar componentes individuais, como as plantas no teu terrário. ### Seletores de ID para Elementos Únicos Os seletores de ID usam o símbolo # e destinam-se a elementos com atributos id específicos. Como os IDs devem ser únicos numa página, são perfeitos para estilizar elementos individuais e especiais, como os recipientes das plantas à esquerda e à direita. Vamos criar o estilo para os recipientes laterais do nosso terrário onde as plantas vão viver: Aqui está o que este código realiza: - Posiciona os recipientes nas extremidades esquerda e direita usando posicionamento absolute - Usa unidades vh (altura da janela de visualização) para altura responsiva que se adapta ao tamanho do ecrã - Aplica box-sizing: border-box para que o preenchimento fique incluído na largura total - Remove unidades px desnecessárias de valores zero para código mais limpo - Define uma cor de fundo subtil, mais suave para os olhos que o cinzento forte ✅ Desafio de Qualidade de Código: Repara como este CSS viola o princípio DRY (Don't Repeat Yourself - Não te Repitas). Consegues refatorá-lo usando tanto um ID como uma classe? Abordagem Melhorada: ### Seletores de Classe para Estilos Reutilizáveis Os seletores de classe usam o símbolo . e são perfeitos quando queres aplicar os mesmos estilos a vários elementos. Ao contrário dos IDs, as classes podem ser reutilizadas em todo o HTML, tornando-as ideais para padrões de estilo consistentes. No nosso terrário, cada planta precisa de um estilo semelhante mas também de posicionamento individual. Usaremos uma combinação de classes para estilos partilhados e IDs para posicionamento único. Aqui está a estrutura HTML para cada planta: Elementos-chave explicados: - Usa class="plant-holder" para estilo consistente do recipiente em todas as plantas - Aplica class="plant" para estilo e comportamento partilhados das imagens - Inclui um id="plant1" único para posicionamento individual e interação via JavaScript - Fornece texto alternativo descritivo para acessibilidade de leitores de ecrã Agora adiciona estes estilos ao teu ficheiro style.css: Análise destes estilos: - Cria posicionamento relativo para o recipiente da planta para estabelecer contexto de posicionamento - Define cada recipiente da planta com 13% de altura, garantindo que todas as plantas cabem verticalmente sem scroll - Desloca ligeiramente os recipientes para a esquerda para centrar melhor as plantas nos seus recipientes - Permite que as plantas reajam ao tamanho da viewport com as propriedades max-width e max-height - Usa z-index para sobrepor as plantas acima de outros elementos no terrário - Adiciona um efeito subtil ao passar o rato com transições CSS para melhor interação do utilizador ✅ Pensamento Crítico: Por que precisamos de ambos os seletores .plant-holder e .plant? O que aconteceria se tivéssemos usado só um deles? ## Compreender o Posicionamento no CSS O posicionamento no CSS é como ser o diretor de cena numa peça de teatro – decides onde cada ator fica e como se move no palco. Alguns atores seguem a formação padrão, enquanto outros precisam de posicionamento específico para um efeito dramático. Quando entendes posicionamento, muitos desafios de layout tornam-se manejáveis. Precisas de uma barra de navegação que fique fixa no topo enquanto os utilizadores fazem scroll? O posicionamento faz isso. Queres uma tooltip que apareça num local específico? Isso também é posicionamento. ### Os Cinco Valores de Posicionamento ### Posicionamento no Nosso Terrário O nosso terrário usa uma combinação estratégica de tipos de posicionamento para criar o layout desejado: Compreensão da estratégia de posicionamento: - Recipientes absolutos são removidos do fluxo normal do documento e fixados nas extremidades do ecrã - Recipientes das plantas relativos criam um contexto de posicionamento enquanto permanecem no fluxo do documento - Plantas absolutas podem ser posicionadas precisamente dentro dos seus recipientes relativos - Esta combinação permite que as plantas se empilhem verticalmente e sejam posicionáveis individualmente ✅ Hora do Experimento: Tenta mudar os valores de posicionamento e observa os resultados: - O que acontece se mudares .container de absolute para relative? - Como é que o layout muda se .plant-holder usar absolute em vez de relative? - O que acontece quando alteras a posição de .plant para relative? ### 🔄 Verificação Pedagógica Domínio do Posicionamento em CSS: Faz uma pausa para verificar a tua compreensão: - ✅ Consegues explicar porque é que as plantas precisam de posicionamento absoluto para drag-and-drop? - ✅ Compreendes como os contentores relativos criam o contexto de posicionamento? - ✅ Porque usam os contentores laterais posicionamento absoluto? - ✅ O que aconteceria se removesses completamente as declarações de posição? Ligação ao Mundo Real: Pensa em como o posicionamento CSS espelha o layout no mundo real: - Static: Livros numa estante (ordem natural) - Relative: Mover um livro ligeiramente mas mantendo o seu lugar - Absolute: Colocar um marcador de página num número de página exato - Fixed: Uma nota autocolante que permanece visível enquanto folheias as páginas ## Construir o Terrário com CSS Agora vamos construir um frasco de vidro usando apenas CSS - sem imagens ou software gráfico. Criar vidro realista, sombras e efeitos de profundidade usando posicionamento e transparência demonstra as capacidades visuais do CSS. Esta técnica espelha como arquitetos do movimento Bauhaus usavam formas geométricas simples para criar estruturas complexas e bonitas. Assim que entenderes estes princípios, reconhecerás as técnicas CSS por trás de muitos designs web. ### Criar os Componentes do Frasco de Vidro Vamos construir o frasco do terrário peça a peça. Cada parte usa posicionamento absoluto e dimensões em percentagem para design responsivo: Compreender a construção do terrário: - Usa dimensões baseadas em percentagem para escalamento responsivo em todos os tamanhos de ecrã - Posiciona elementos em absoluto para empilhar e alinhar com precisão - Aplica diferentes valores de opacidade para criar o efeito de transparência do vidro - Implementa sobreposição com z-index para que as plantas apareçam dentro do frasco - Adiciona sombras subtis e border-radius refinado para aparência mais realista ### Design Responsivo com Percentagens Repara que todas as dimensões usam percentagens em vez de valores fixos em pixels: Porque é que isto importa: - Garante que o terrário escala proporcionalmente em qualquer tamanho de ecrã - Mantém as relações visuais entre os componentes do frasco - Fornece uma experiência consistente desde telemóveis a monitores de secretária grandes - Permite que o design se adapte sem quebrar o layout visual ### Unidades CSS em Ação Estamos a usar unidades rem para o border-radius, que escalam relativo ao tamanho de fonte raiz. Isto cria designs mais acessíveis que respeitam preferências do utilizador. Aprende mais sobre unidades relativas em CSS na especificação oficial. ✅ Experimentação Visual: Tenta modificar estes valores e observa os efeitos: - Muda a opacidade do frasco de 0.5 para 0.8 – como afeta a aparência do vidro? - Ajusta a cor da terra de #3a241d para #8B4513 – qual o impacto visual? - Modifica o z-index da terra para 2 – o que acontece à sobreposição? ### 🔄 Verificação Pedagógica Compreensão Visual do CSS: Confirma o teu entendimento do visual em CSS: - ✅ Como as dimensões em percentagem criam um design responsivo? - ✅ Porque é que a opacidade cria o efeito de transparência do vidro? - ✅ Que papel desempenha o z-index na sobreposição de elementos? - ✅ Como é que os valores do border-radius criam a forma do frasco? Princípio do Design: Repara como construímos visuais complexos a partir de formas simples: 1. Retângulos → Retângulos arredondados → Componentes do frasco 2. Cores planas → Opacidade → Efeito vidro 3. Elementos individuais → Composição em camadas → Aparência 3D --- ## Desafio do Agente GitHub Copilot 🚀 Usa o modo Agente para completar o seguinte desafio: Descrição: Cria uma animação CSS que faz as plantas do terrário balançarem suavemente de um lado para o outro, simulando um efeito de brisa natural. Isto vai ajudar-te a praticar animações CSS, transformações e keyframes enquanto aumentas o apelo visual do terrário. Pedido: Adiciona animações de keyframes CSS para fazer as plantas do terrário balançarem suavemente de um lado para o outro. Cria uma animação de balanço que rotacione cada planta ligeiramente (2-3 graus) para a esquerda e para a direita com duração de 3-4 segundos, e aplica-a à classe .plant. Garante que a animação é em loop infinito e tem uma função easing para movimento natural. Sabe mais sobre modo agente aqui. ## 🚀 Desafio: Adicionar Reflexos de Vidro Preparado para melhorar o teu terrário com reflexos realistas de vidro? Esta técnica vai adicionar profundidade e realismo ao design. Vais criar destaques subtis que simulam como a luz se reflete em superfícies de vidro. Esta abordagem é semelhante à utilizada por pintores renascentistas como Jan van Eyck, que usavam luz e reflexão para tornar o vidro pintado tridimensional. Eis o que queres alcançar: O teu desafio: - Criar formas ovais subtis brancas ou de cores claras para os reflexos no vidro - Posicioná-las estrategicamente no lado esquerdo do frasco - Aplicar opacidade e efeitos de desfoque adequados para reflexos realistas de luz - Usar border-radius para criar formas orgânicas, semelhantes a bolhas - Experimentar com gradientes ou sombras para mais realismo ## Quiz Pós-Aula Quiz pós-aula ## Expande o Teu Conhecimento de CSS O CSS pode parecer complexo inicialmente, mas compreender estes conceitos básicos fornece uma base sólida para técnicas mais avançadas. As tuas próximas áreas de aprendizagem em CSS: - Flexbox - simplifica o alinhamento e a distribuição de elementos - CSS Grid - fornece ferramentas poderosas para criar layouts complexos - Variáveis CSS - reduz repetição e melhora a manutenção - Design responsivo - garante que sites funcionam bem em vários tamanhos de ecrã ### Recursos Interativos de Aprendizagem Pratica estes conceitos com estes jogos práticos e envolventes: - 🐸 Flexbox Froggy - Domina Flexbox através de desafios divertidos - 🌱 Grid Garden - Aprende CSS Grid cultivando cenouras virtuais - 🎯 CSS Battle - Testa as tuas competências em CSS com desafios de código ### Aprendizagem Adicional Para fundamentos completos de CSS, completa este módulo Microsoft Learn: Estiliza a tua app HTML com CSS ### ⚡ O Que Podes Fazer Nos Próximos 5 Minutos - [ ] Abre o DevTools e inspeciona estilos CSS em qualquer site através do painel Elements - [ ] Cria um ficheiro CSS simples e liga-o a uma página HTML - [ ] Tenta mudar cores usando diferentes métodos: hex, RGB e nomes de cores - [ ] Pratica o modelo de caixa adicionando padding e margin a um div ### 🎯 O Que Podes Conseguir Nesta Hora - [ ] Completa o quiz pós-aula e revê os fundamentos CSS - [ ] Estiliza a tua página HTML com fontes, cores e espaçamento - [ ] Cria um layout simples usando flexbox ou grid - [ ] Experimenta as transições CSS para efeitos suaves - [ ] Pratica design responsivo com media queries ### 📅 A Tua Aventura CSS de Uma Semana - [ ] Completa a tarefa de estilização do terrário com criatividade - [ ] Domina CSS Grid construindo um layout de galeria fotográfica - [ ] Aprende animações CSS para dar vida aos teus designs - [ ] Explora pré-processadores CSS como Sass ou Less - [ ] Estuda princípios de design e aplica-os ao teu CSS - [ ] Analisa e recria designs interessantes que encontrares online ### 🌟 O Teu Domínio do Design em Um Mês - [ ] Constrói um sistema completo de design responsivo para websites - [ ] Aprende CSS-in-JS ou frameworks utility-first como Tailwind - [ ] Contribui para projetos open source com melhorias em CSS - [ ] Domina conceitos avançados de CSS como propriedades personalizadas e containment - [ ] Cria bibliotecas reutilizáveis de componentes com CSS modular - [ ] Mentora outros a aprender CSS e partilha conhecimentos de design ## 🎯 A Tua Linha Temporal para Dominar CSS ### 🛠️ Resumo da Tua Caixa de Ferramentas CSS Após completarmos esta lição, agora tens: - Compreensão da Cascade: Como os estilos herdam e sobrescrevem uns aos outros - Domínio dos Seletores: Alvo preciso com elementos, classes e IDs - Competências de Posicionamento: Colocação estratégica e sobreposição de elementos - Design Visual: Criar efeitos de vidro, sombras e transparência - Técnicas Responsivas: Layouts baseados em percentagem que se adaptam a qualquer ecrã - Organização de Código: Estrutura CSS limpa e sustentável - Práticas Modernas: Uso de unidades relativas e padrões de design acessíveis Próximos Passos: O teu terrário tem agora estrutura (HTML) e estilo (CSS). A lição final acrescentará interatividade com JavaScript! ## Tarefa Refatoração CSS --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Aviso Legal: Este documento foi traduzido utilizando o serviço de tradução automática Co-op Translator. Embora nos esforcemos pela precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte oficial. Para informação crítica, recomenda-se a tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Proiectul Terrarium Partea 1: Introducere în HTML
HTML, sau HyperText Markup Language, este fundația fiecărui site web pe care l-ai vizitat vreodată. Gândește-te la HTML ca scheletul care oferă structură paginilor web – definește unde merge conținutul, cum este organizat și ce reprezintă fiecare element. În timp ce CSS va „îmbrăca” mai târziu HTML-ul tău cu culori și layout-uri, iar JavaScript îl va anima cu interactivitate, HTML oferă structura esențială care face tot restul posibil. În această lecție, vei crea structura HTML pentru o interfață virtuală de terrariu. Acest proiect practic te va învăța conceptele fundamentale de HTML în timp ce construiești ceva vizual atractiv. Vei învăța cum să organizezi conținutul folosind elemente semantice, să lucrezi cu imagini și să creezi baza pentru o aplicație web interactivă. La sfârșitul acestei lecții, vei avea o pagină HTML funcțională care afișează imagini cu plante în coloane organizate, gata pentru stilizare în lecția următoare. Nu-ți face griji dacă arată simplu la început – asta face exact HTML-ul înainte ca CSS să adauge rafinamentul vizual. ## Chestionar Pre-Lecție Chestionar pre-lectură ## Configurarea Proiectului Tău Înainte să intrăm în codul HTML, să configurăm un spațiu de lucru adecvat pentru proiectul tău de terrarium. Crearea unei structuri organizate de fișiere de la început este un obicei crucial care te va ajuta pe tot parcursul călătoriei tale în dezvoltarea web. ### Sarcină: Creează Structura Proiectului Tău Vei crea un folder dedicat pentru proiectul terrarium și vei adăuga primul tău fișier HTML. Iată două abordări pe care le poți folosi: Opțiunea 1: Folosind Visual Studio Code 1. Deschide Visual Studio Code 2. Apasă pe "File" → "Open Folder" sau folosește Ctrl+K, Ctrl+O (Windows/Linux) sau Cmd+K, Cmd+O (Mac) 3. Creează un folder nou numit terrarium și selectează-l 4. În panoul Explorer, apasă pe pictograma "New File" 5. Denumește fișierul index.html Opțiunea 2: Folosind Comenzi în Terminal Iată ce realizează aceste comenzi: - Creează un director nou numit terrarium pentru proiectul tău - Navighează în directorul terrarium - Creează un fișier gol index.html - Deschide fișierul în Visual Studio Code pentru editare ## Înțelegerea Structurii Documentului HTML Fiecare document HTML urmează o structură specifică pe care browserele trebuie să o înțeleagă și să o afișeze corect. Gândește-te la această structură ca la o scrisoare formală – are elemente obligatorii într-o ordine anume care ajută destinatarul (în acest caz, browserul) să proceseze conținutul corect. Să începem prin a adăuga fundația esențială de care are nevoie orice document HTML. ### Declarația DOCTYPE și Elementul Rădăcină Primele două linii din orice fișier HTML servesc ca „introducere” a documentului pentru browser: Ce face acest cod: - Declară tipul documentului ca HTML5 folosind <!DOCTYPE html> - Creează elementul rădăcină <html> care va conține tot conținutul paginii - Stabilește standarde web moderne pentru redare corectă în browser - Asigură afișare consistentă în diferite browsere și dispozitive ### 🔄 Verificare Pedagogică Pauză și Reflectare: Înainte să continui, asigură-te că înțelegi: - ✅ De ce fiecare document HTML are nevoie de declarația DOCTYPE - ✅ Ce conține elementul rădăcină <html> - ✅ Cum ajută această structură browserele să redea paginile corect Autotest Rapid: Poți explica în propriile cuvinte ce înseamnă „redare conformă cu standardele”? ## Adăugarea Metadatelor Esențiale Documentului Secțiunea <head> a unui document HTML conține informații cruciale de care au nevoie browserele și motoarele de căutare, dar pe care vizitatorii nu le văd direct pe pagină. Gândește-te la ea ca la informațiile „din culise” care ajută pagina ta să funcționeze corect și să apară corespunzător pe diverse dispozitive și platforme. Aceste metadate spun browserelor cum să afișeze pagina ta, ce codare a caracterelor să folosească și cum să gestioneze diferitele dimensiuni ale ecranului – toate esențiale pentru a crea pagini web profesionale și accesibile. ### Sarcină: Adaugă Secțiunea Head a Documentului Inserează această secțiune <head> între etichetele tale de deschidere și închidere <html>: Ce realizează fiecare element: - Setează titlul paginii care apare în tab-urile browserului și în rezultatele căutărilor - Specifică codarea caracterelor UTF-8 pentru afișarea corectă a textului la nivel mondial - Asigură compatibilitatea cu versiunile moderne de Internet Explorer - Configurează designul responsiv prin setarea viewport-ului care se potrivește cu lățimea dispozitivului - Controlează nivelul inițial de zoom pentru a afișa conținutul la dimensiunea naturală ## Construirea Corpului Documentului Elementul <body> conține tot conținutul vizibil al paginii tale web – tot ce utilizatorii vor vedea și cu ce vor interacționa. În timp ce secțiunea <head> oferă instrucțiuni browserului, secțiunea <body> conține conținutul propriu-zis: text, imagini, butoane și alte elemente care creează interfața ta. Să adăugăm structura corpului și să înțelegem cum funcționează etichetele HTML împreună pentru a crea conținut semnificativ. ### Înțelegerea Structurii Etichetelor HTML HTML folosește etichete pereche pentru a defini elemente. Majoritatea etichetelor au o etichetă de deschidere, ca <p>, și o etichetă de închidere, ca </p>, cu conținut între ele: <p>Bună, lume!</p>. Aceasta creează un element paragraf care conține textul „Bună, lume!”. ### Sarcină: Adaugă Elementul Body Actualizează fișierul tău HTML pentru a include elementul <body>: Ce oferă această structură completă: - Stabilește cadrul de bază al documentului HTML5 - Include metadate esențiale pentru redare corectă în browser - Creează un corp gol pregătit pentru conținutul vizibil - Urmează cele mai bune practici moderne de dezvoltare web Acum ești gata să adaugi elementele vizibile ale terrariumului tău. Vom folosi elemente <div> ca containere pentru a organiza diferitele secțiuni de conținut și elemente <img> pentru a afișa imaginile plantelor. ### Lucrul cu Imagini și Containere pentru Layout Imaginile sunt speciale în HTML pentru că folosesc etichete „self-closing”. Spre deosebire de elemente ca <p></p> care înconjoară conținut, eticheta <img> conține toate informațiile de care are nevoie în interiorul etichetei folosind atribute precum src pentru calea fișierului imaginii și alt pentru accesibilitate. Înainte să adaugi imagini în HTML, trebuie să organizezi corect fișierele proiectului tău, creând un folder de imagini și adăugând graficele cu plante. Mai întâi, pregătește imaginile: 1. Creează un folder numit images în interiorul folderului proiectului terrarium 2. Descarcă imaginile cu plante din folderul soluției (14 imagini cu plante în total) 3. Copiază toate imaginile cu plante în noul folder images ### Sarcină: Creează Layout-ul pentru Afișarea Plantelor Adaugă acum imaginile plantelor organizate în două coloane între etichetele tale <body></body>: Pas cu pas, iată ce face acest cod: - Creează un container principal al paginii cu id="page" care ține tot conținutul - Stabilește două containere coloane: left-container și right-container - Organizează 7 plante în coloana stângă și 7 plante în coloana dreaptă - Încapsulează fiecare imagine de plantă într-un <div> numit plant-holder pentru poziționare individuală - Aplică clase consistente pentru stilizarea CSS din lecția următoare - Atribuie ID-uri unice fiecărei imagini pentru interacțiuni JavaScript ulterioare - Include căi corecte către folderul de imagini ### 🔄 Verificare Pedagogică Înțelegerea Structurii: Ia un moment să revizuiești structura HTML: - ✅ Poți identifica containerele principale din layout? - ✅ Înțelegi de ce fiecare imagine are un ID unic? - ✅ Cum ai descrie scopul div-urilor plant-holder? Inspecție Vizuală: Deschide fișierul tău HTML într-un browser. Ar trebui să vezi: - O listă simplă de imagini cu plante - Imaginile organizate în două coloane - Un layout simplu, fără stilizare Amintește-ți: Această aparență simplă este exact ce ar trebui să arate HTML-ul înainte de stilizarea CSS! Cu acest markup adăugat, plantele vor apărea pe ecran, deși încă nu vor arăta finisate – acest lucru îl face CSS în lecția următoare! Pentru moment, ai o fundație solidă HTML care organizează corect conținutul și respectă bunele practici pentru accesibilitate. ## Utilizarea HTML-ului Semantic pentru Accesibilitate HTML semantic înseamnă alegerea elementelor HTML bazată pe semnificația și scopul lor, nu doar pe aspectul lor. Când folosești markup semantic, comunici structura și sensul conținutului tău către browsere, motoarele de căutare și tehnologiile asistive precum cititoarele de ecran. Această abordare face site-urile tale mai accesibile pentru utilizatorii cu dizabilități și ajută motoarele de căutare să înțeleagă mai bine conținutul. Este un principiu fundamental al dezvoltării web moderne care creează experiențe mai bune pentru toată lumea. ### Adăugarea unui Titlu Semantic pentru Pagină Să adăugăm un titlu corespunzător paginii tale de terrarium. Inserează această linie imediat după eticheta ta de deschidere <body>: De ce contează markup-ul semantic: - Ajută cititoarele de ecran să navigheze și să înțeleagă structura paginii - Îmbunătățește optimizarea pentru motoarele de căutare (SEO) prin clarificarea ierarhiei conținutului - Crește accesibilitatea pentru utilizatorii cu deficiențe vizuale sau diferențe cognitive - Oferă experiențe mai bune utilizatorilor pe toate dispozitivele și platformele - Respectă standardele web și cele mai bune practici pentru dezvoltare profesională Exemple de alegeri semantice vs. non-semantice: ## Crearea Containerului Terrariumului Acum să adăugăm structura HTML pentru terrariumul propriu-zis – recipientul de sticlă unde plantele vor fi plasate în cele din urmă. Această secțiune demonstrează un concept important: HTML oferă structură, dar fără stilizare CSS, aceste elemente nu vor fi încă vizibile. Markup-ul terrariumului folosește nume de clase descriptive care vor face stilizarea CSS intuitivă și ușor de întreținut în lecția următoare. ### Sarcină: Adaugă Structura Terrariumului Inserează acest markup deasupra ultimei etichete </div> (înainte de închiderea containerului paginii): Ce realizează această structură pentru terrarium: - Creează un container principal pentru terrarium cu un ID unic pentru stilizare - Definește elemente separate pentru fiecare componentă vizuală (sus, pereți, pământ, jos) - Include elemente imbricate pentru efectele de reflexie a sticlei (elemente lucioase) - Folosește nume descriptive pentru clase care indică clar scopul fiecărui element - Pregătește structura pentru stilizarea CSS care va crea aspectul terariului de sticlă ### 🔄 Verificare Pedagogică Stăpânirea Structurii HTML: Înainte de a continua, asigură-te că poți: - ✅ Explica diferența dintre structura HTML și aspectul vizual - ✅ Identifica elementele HTML semantice vs. non-semantice - ✅ Descrie cum markup-ul corect ajută accesibilitatea - ✅ Recunoaște structura completă a arborelui documentului Testarea Înțelegerii Tale: Încearcă să deschizi fișierul tău HTML într-un browser cu JavaScript dezactivat și CSS eliminat. Astfel vezi structura pur semantică pe care ai creat-o! --- ## Provocarea Agent GitHub Copilot Folosește modul Agent pentru a completa următoarea provocare: Descriere: Creează o structură semantică HTML pentru o secțiune ghid de îngrijire a plantelor care să poată fi adăugată proiectului terariu. Cerere: Creează o secțiune semantică HTML care să includă un titlu principal "Ghid de Îngrijire a Plantelor", trei subsecțiuni cu titluri „Udare”, „Cerințe de Lumină” și „Îngrijirea Solului”, fiecare conținând un paragraf cu informații despre îngrijirea plantelor. Folosește etichete HTML semantice corecte, precum <section>, <h2>, <h3> și <p> pentru a structura conținutul corespunzător. Află mai multe despre modul agent. ## Provocarea Istoriei HTML Învață Despre Evoluția Web-ului HTML a evoluat semnificativ de când Tim Berners-Lee a creat primul browser web la CERN în 1990. Unele etichete mai vechi, precum <marquee>, sunt acum învechite deoarece nu funcționează bine cu standardele moderne de accesibilitate și principiile designului responsiv. Încearcă Experimentul: 1. Înfășoară temporar titlul tău <h1> într-o etichetă <marquee>: <marquee><h1>My Terrarium</h1></marquee> 2. Deschide pagina în browser și observă efectul de derulare 3. Gândește-te de ce această etichetă a fost dezaprobata (indiciu: ia în considerare experiența utilizatorului și accesibilitatea) 4. Elimină eticheta <marquee> și revino la markup semantic Întrebări de Reflectare: - Cum ar putea afecta un titlu care derulează utilizatorii cu deficiențe vizuale sau sensibilitate la mișcare? - Ce tehnici CSS moderne ar putea obține efecte vizuale similare, dar mai accesibile? - De ce este important să folosești standardele web actuale în locul elementelor învechite? Explorează mai multe despre elementele HTML învechite și dezaprobate pentru a înțelege cum evoluează standardele web pentru a îmbunătăți experiența utilizatorului. ## Quiz Post-Lecție Quiz post-lectură ## Recapitulare & Auto-studiu Adâncește-ți Cunoștințele HTML HTML a fost fundamentul web-ului de peste 30 de ani, evoluând de la un simplu limbaj de marcare documentară la o platformă sofisticată pentru construirea aplicațiilor interactive. Înțelegerea acestei evoluții te ajută să apreciezi standardele web moderne și să iei decizii mai bune în dezvoltare. Căi Recomandate de Învățare: 1. Istoria și Evoluția HTML - Cercetează cronologia de la HTML 1.0 la HTML5 - Explorează de ce anumite etichete au fost dezaprobate (accesibilitate, compatibilitate mobilă, întreținere) - Investigă caracteristici emergente și propuneri HTML 2. HTML Semantic în Profunzime - Studiază lista completă a elementelor semantice HTML5 - Exersează identificarea momentelor când să folosești <article>, <section>, <aside> și <main> - Învață despre atributele ARIA pentru accesibilitate sporită 3. Dezvoltare Web Modernă - Explorează construirea site-urilor responsive pe Microsoft Learn - Înțelege cum HTML se integrează cu CSS și JavaScript - Află despre performanța web și cele mai bune practici SEO Întrebări de Reflectare: - Ce etichete HTML dezaprobate ai descoperit și de ce au fost eliminate? - Ce noi caracteristici HTML se propun pentru versiunile viitoare? - Cum contribuie HTML semantic la accesibilitatea web și SEO? ### ⚡ Ce Poți Face în Următoarele 5 Minute - [ ] Deschide DevTools (F12) și inspectează structura HTML a site-ului tău preferat - [ ] Creează un fișier HTML simplu cu tag-uri de bază: <h1>, <p>, și <img> - [ ] Validează-ți HTML-ul folosind validatorul online W3C - [ ] Încearcă să adaugi un comentariu în HTML folosind <!-- comment --> ### 🎯 Ce Poți Realiza în Această Oră - [ ] Finalizează quizul post-lectură și revizuiește conceptele HTML semantice - [ ] Construiește o pagină simplă despre tine, folosind structura corectă HTML - [ ] Experimentează cu diferite niveluri de titluri și tag-uri de formatare a textului - [ ] Adaugă imagini și linkuri pentru a exersa integrarea multimedia - [ ] Cercetează caracteristici HTML5 pe care încă nu le-ai încercat ### 📅 Călătoria Ta de O Săptămână în HTML - [ ] Finalizează tema proiectului terariu cu markup semantic - [ ] Creează o pagină accesibilă folosind etichete și roluri ARIA - [ ] Exersează crearea formularelor cu diverse tipuri de input - [ ] Explorează API-urile HTML5 precum localStorage sau geolocație - [ ] Studiază pattern-uri HTML responsive și design mobile-first - [ ] Revizuiește codul HTML al altor dezvoltatori pentru bune practici ### 🌟 Fundamentele Tale Web de O Lună - [ ] Construiește un site de portofoliu care să-ți arate competența în HTML - [ ] Învață template-uri HTML cu un framework precum Handlebars - [ ] Contribuie la proiecte open source prin îmbunătățirea documentației HTML - [ ] Stăpânește concepte avansate HTML precum elemente personalizate - [ ] Integrează HTML cu framework-uri CSS și biblioteci JavaScript - [ ] Devino mentor pentru alții care învață fundamentele HTML ## 🎯 Timeline-ul Tău de Stăpânire a HTML ### 🛠️ Rezumatul Trusei Tale de Scule HTML După finalizarea acestei lecții, ai acum: - Structura Documentului: Fundament complet HTML5 cu DOCTYPE corect - Markup Semantic: Tag-uri semnificative care îmbunătățesc accesibilitatea și SEO - Integrarea Imaginilor: Organizare corectă a fișierelor și bune practici pentru textul alternativ - Containere de Layout: Folosirea strategică a div-urilor cu clase descriptive - Conștientizare a Accesibilității: Înțelegerea navigării cu cititoare de ecran - Standardele Moderne: Practici actuale HTML5 și cunoașterea tag-urilor dezaprobate - Baza Proiectului: Fundament solid pentru stilizarea CSS și interactivitate JavaScript Pașii Următori: Structura ta HTML este pregătită pentru stilizarea CSS! Fundamentul semantic creat va face lecția următoare mult mai ușor de înțeles. ## Temă Exersează-ți HTML-ul: Construiește o simulare de blog --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Declinare de responsabilitate: Acest document a fost tradus folosind serviciul de traducere AI Co-op Translator. Deși ne străduim pentru acuratețe, vă rugăm să aveți în vedere că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa nativă trebuie considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm răspunderea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea ca urmare a utilizării acestei traduceri. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Proiectul Terrarium Partea 2: Introducere în CSS
Îți amintești cum arăta terrariul tău HTML destul de simplu? CSS este locul unde transformăm acea structură simplă într-un ceva atrăgător vizual. Dacă HTML este ca și construcția structurii unei case, atunci CSS este tot ceea ce o face să se simtă ca acasă - culorile vopselei, aranjamentul mobilei, iluminatul și cum se îmbină încăperile între ele. Gândește-te cum Palatul de la Versailles a început ca o cabană simplă de vânătoare, dar atenția atentă asupra decorului și a aranjamentului l-a transformat într-una dintre cele mai magnifice clădiri din lume. Astăzi, vom transforma terrariul tău din funcțional în finisat. Vei învăța cum să poziționezi elementele precis, să faci ca layout-urile să răspundă la diferite dimensiuni ale ecranului și să creezi un farmec vizual care face site-urile captivante. La finalul acestei lecții, vei vedea cum stilizarea strategică CSS poate îmbunătăți dramatic proiectul tău. Hai să adăugăm puțin stil terrariului tău. ## Test Preliminar înainte de Lecție Test pre-lectură ## Începând cu CSS CSS este adesea considerat doar „a face lucrurile frumoase,” dar servește unui scop mult mai larg. CSS este ca și cum ai fi regizorul unui film - controlezi nu doar cum arată totul, ci și cum se mișcă, răspunde la interacțiuni și se adaptează la diferite situații. CSS-ul modern este remarcabil de capabil. Poți scrie cod care ajustează automat layout-urile pentru telefoane, tablete și computere desktop. Poți crea animații fluide care ghidează atenția utilizatorilor acolo unde este nevoie. Rezultatele pot fi foarte impresionante când totul funcționează împreună. Iată ce vom realiza în această lecție: - Creăm un design vizual complet pentru terrariul tău folosind tehnici CSS moderne - Explorăm concepte fundamentale precum cascadele, moștenirea și selectoarele CSS - Implementăm poziționare și strategii de layout responsive - Construim containerul terrariului folosind forme și stilizare CSS ### Prerechizită Ar trebui să fi finalizat structura HTML pentru terrariul tău din lecția anterioară și să o ai gata pentru stilizare. ### Configurarea Fișierului tău CSS Înainte să începem să stilizăm, trebuie să conectăm CSS la HTML-ul nostru. Această conexiune spune browserului unde să găsească instrucțiunile de stilizare pentru terrariul nostru. În folderul terrariului, creează un fișier nou numit style.css, apoi leagă-l în secțiunea <head> a documentului tău HTML: Ce face acest cod: - Creează o conexiune între fișierele tale HTML și CSS - Spune browserului să încarce și să aplice stilurile din style.css - Folosește atributul rel="stylesheet" pentru a specifica că este un fișier CSS - Face referire la calea fișierului cu href="./style.css" ## Înțelegerea Cascadei CSS Te-ai întrebat vreodată de ce CSS se numește „foi de stil cascade”? Stilurile se cascadesc ca o cascadă, și uneori intră în conflict unele cu altele. Gândește-te la cum funcționează structurile militare de comanda - o ordine generală poate spune „toți soldații să poarte verde,” dar o ordine specifică unității tale poate spune „purtați uniforma albastră pentru ceremonie.” Instrucțiunea mai specifică are prioritate. CSS urmează o logică similară, iar înțelegerea acestei ierarhii face debugging-ul mult mai ușor. ### Experimentând Prioritatea Cascadei Hai să vedem cascada în acțiune prin crearea unui conflict de stiluri. Mai întâi, adaugă un stil inline la tag-ul tău <h1>: Ce face acest cod: - Aplică culoarea roșie direct elementului <h1> folosind stilare inline - Folosește atributul style pentru a introduce CSS direct în HTML - Creează regula de stil cu cea mai înaltă prioritate pentru acest element specific Apoi, adaugă această regulă în fișierul style.css: În exemplul de mai sus, am: - Definit o regulă CSS care vizează toate elementele <h1> - Setat culoarea textului pe albastru folosind o foaie de stil externă - Creat o regulă cu prioritate mai mică față de stilurile inline ✅ Verificare Cunoștințe: Ce culoare se afișează în aplicația ta web? De ce câștigă acea culoare? Poți să te gândești la scenarii în care ai dori să suprascrii stiluri? ## Moștenirea CSS în Acțiune Moștenirea CSS funcționează ca genetica - elementele moștenesc anumite proprietăți de la elementele părinte. Dacă setezi familia fontului pe elementul body, tot textul din interior folosește automat acel font. Este similar cu modul în care linia maxilarului distinctivă a familiei Habsburg a apărut peste generații fără a fi specificată pentru fiecare individ. Totuși, nu totul este moștenit. Stilurile textului precum fonturile și culorile se moștenesc, dar proprietățile de layout precum marginile și bordurile nu. Asemenea copiilor care moștenesc trăsături fizice, dar nu alegerile vestimentare ale părinților. ### Observarea Moștenirii Fontului Hai să vedem moștenirea în acțiune setând o familie de fonturi pe elementul <body>: Ce se întâmplă aici: - Setează familia fontului pentru întreaga pagină prin targetarea elementului <body> - Folosește un șir de fonturi cu opțiuni de fallback pentru o compatibilitate mai bună a browserului - Aplică fonturile moderne de sistem care arată bine pe diferite sisteme de operare - Asigură că toate elementele copil moștenesc acest font, cu excepția cazului în care este suprascris special Deschide unelte pentru dezvoltatori în browserul tău (F12), navighează la fila Elements, și inspectează elementul <h1>. Vei vedea că acesta moștenește familia fontului de la body: ✅ Experiment: Încearcă să setezi alte proprietăți moștenitoare pe <body> precum color, line-height sau text-align. Ce se întâmplă cu titlul și celelalte elemente? ### 🔄 Verificare Pedagogică Înțelegerea Bazelor CSS: Înainte să treci la selectori, asigură-te că poți: - ✅ Explica diferența dintre cascade și moștenire - ✅ Prezice care stil va câștiga într-un conflict de specificitate - ✅ Identifica proprietățile ce se moștenesc de la elementele părinte - ✅ Conecta corect fișierele CSS cu HTML Test rapid: Dacă ai aceste stiluri, ce culoare va avea un <h1> într-un <div class="special">? Răspuns: Roșu (selectorul de element țintește direct h1) ## Stăpânirea Selectoarelor CSS Selectoarele CSS sunt modul tău de a viza elemente specifice pentru stilizare. Funcționează ca și cum ai da indicații precise - în loc să spui „casa,” ai putea spune „casa albastră cu ușa roșie de pe strada Maple.” CSS oferă diferite moduri de a fi specific, iar alegerea selectorului potrivit este ca alegerea uneltei potrivite pentru sarcină. Uneori trebuie să stilizezi toate ușile din cartier, alteori doar o ușă specifică. ### Selectori de Elemente (Tag-uri) Selectorii de elemente vizează elementele HTML după numele tag-ului lor. Sunt perfecți pentru a seta stiluri de bază care se aplică pe scară largă pe pagina ta: Înțelegerea acestor stiluri: - Setează o tipografie consistentă pe întreaga pagină cu selectorul body - Înlătură marginile implicite și padding-ul browserului pentru un control mai bun - Stilizează toate elementele de titlu cu culoare, aliniere și spațiere - Folosește unități rem pentru redimensionarea scalabilă și accesibilă a fontului Deși selectorii de elemente sunt buni pentru stilizarea generală, vei avea nevoie de selectori mai specifici pentru a stiliza componente individuale precum plantele din terrariul tău. ### Selectori ID pentru Elemente Unice Selectorii ID folosesc simbolul # și țintesc elemente cu atribute id specifice. Deoarece ID-urile trebuie să fie unice pe o pagină, sunt perfecți pentru stilizarea elementelor individuale, speciale, cum ar fi containerele laterale stânga și dreapta pentru plantele noastre. Hai să creăm stilul pentru containerele laterale ale terrariului unde vor locui plantele: Ce realizează acest cod: - Poziționează containerele la marginea foarte stângă și cea dreaptă folosind poziționarea absolute - Folosește unități vh (înălțimea viewport-ului) pentru înălțime responsive care se adaptează la dimensiunea ecranului - Aplică box-sizing: border-box astfel încât padding-ul este inclus în lățimea totală - Elimină unitățile px inutile de la valorile zero pentru un cod mai curat - Setează o culoare de fundal subtilă mai prietenoasă cu ochii în comparație cu griul aprins ✅ Provocare Calitate Cod: Observă cum acest CSS încalcă principiul DRY (Don't Repeat Yourself). Poți să îl refaci folosind atât un ID cât și o clasă? Abordare îmbunătățită: ### Selectori Clase pentru Stiluri Reutilizabile Selectorii de clase folosesc simbolul . și sunt perfecți când vrei să aplici aceleași stiluri la mai multe elemente. Spre deosebire de ID-uri, clasele pot fi refolosite în tot HTML-ul, făcându-le ideale pentru modele consistente de stilizare. În terrariul nostru, fiecare plantă necesită stiluri similare dar și poziționare individuală. Vom folosi o combinație de clase pentru stiluri comune și ID-uri pentru poziționare unică. Iată structura HTML pentru fiecare plantă: Elementele-cheie explicate: - Folosește class="plant-holder" pentru un stil container consistent pentru toate plantele - Aplică class="plant" pentru stilizarea și comportamentul imaginii comune - Include id="plant1" unic pentru poziționare individuală și interacțiune JavaScript - Oferă text alternativ descriptiv pentru accesibilitatea cititorilor de ecran Acum adaugă aceste stiluri în fișierul tău style.css: Ce fac aceste stiluri: - Creează poziționare relativă pentru containerul plantelor pentru a stabili un context de poziționare - Setează fiecare container al plantei la 13% înălțime, asigurând că toate plantele încape vertical fără scroll - Deplasează containerele ușor spre stânga pentru a centra mai bine plantele în interior - Permite plantelor să se scaleze responsive cu proprietățile max-width și max-height - Folosește z-index pentru a suprapune plantele peste alte elemente din terrariu - Adaugă un efect subtil la hover cu tranziții CSS pentru o interacțiune mai plăcută ✅ Gândire Critică: De ce avem nevoie atât de selectorii .plant-holder, cât și de .plant? Ce s-ar întâmpla dacă am folosi doar unul singur? ## Înțelegerea Poziționării CSS Poziționarea CSS este ca un regizor de scenă pentru o piesă de teatru - indici unde stă fiecare actor și cum se mișcă pe scenă. Unii actori urmează formația standard, în timp ce alții necesită poziționare specifică pentru efect dramatic. Odată ce înțelegi poziționarea, multe provocări de layout devin gestionabile. Ai nevoie de o bară de navigare care să rămână în partea de sus în timp ce utilizatorii derulează? Poziționarea se ocupă de asta. Vrei un tooltip care apare într-un loc anume? Asta este tot poziționarea. ### Cele Cinci Valori de Poziționare ### Poziționarea în Terrariul Nostru Terrariul nostru folosește o combinație strategică de tipuri de poziționare pentru a crea layout-ul dorit: Înțelegerea strategiei de poziționare: - Containere absolute sunt eliminate din fluxul normal al documentului și lipite de marginile ecranului - Containerele relative pentru plante creează un context de poziționare, rămânând totuși în fluxul documentului - Plantele absolute pot fi poziționate precis în interiorul containerelor relative - Această combinație permite plantelor să se suprapună vertical și să fie poziționate individual ✅ Timp pentru experiment: Încearcă să schimbi valorile poziționării și observă rezultatele: - Ce se întâmplă dacă schimbi .container din absolute în relative? - Cum se modifică aspectul dacă .plant-holder folosește absolute în loc de relative? - Ce se întâmplă când schimbi poziționarea .plant la relative? ### 🔄 Verificare Pedagogică Stăpânirea poziționării CSS: Oprește-te să verifici înțelegerea ta: - ✅ Poți explica de ce plantele au nevoie de poziționare absolută pentru drag-and-drop? - ✅ Înțelegi cum containerele relative creează un context de poziționare? - ✅ De ce folosesc containerele laterale poziționare absolută? - ✅ Ce s-ar întâmpla dacă ai elimina complet declarațiile de poziționare? Conexiune cu lumea reală: Gândește-te cum poziționarea CSS reflectă aspectele din lumea reală: - Static: Cărți pe un raft (ordinea naturală) - Relative: Mutând ușor o carte, dar păstrând locul ei - Absolute: Punând un semn de carte la o pagină exactă - Fixed: O notă lipicioasă care rămâne vizibilă când răsfoiești paginile ## Construirea Terrariului cu CSS Acum vom construi un borcan de sticlă folosind doar CSS - fără imagini sau software grafic. Crearea unui efect realist de sticlă, umbre și adâncime folosind poziționarea și transparența demonstrează capacitățile vizuale ale CSS. Această tehnică reflectă modul în care arhitecții din mișcarea Bauhaus foloseau forme geometrice simple pentru a crea structuri complexe și frumoase. Odată ce înțelegi aceste principii, vei recunoaște tehnicile CSS din multe designuri web. ### Crearea componentelor borcanului de sticlă Să construim borcanul terrariului bucățică cu bucățică. Fiecare parte folosește poziționare absolută și dimensiuni procentuale pentru design responsive: Înțelegerea construcției terrariului: - Folosește dimensiuni procentuale pentru scalarea responsive pe toate dimensiunile de ecran - Poziționează elementele absolut pentru a le suprapune și alinia precis - Aplică valori diferite de opacitate pentru a crea efectul de transparență a sticlei - Implementează stratificarea cu z-index astfel încât plantele să apară în interiorul borcanului - Adaugă umbre subtile și raze de colț rafinate pentru un aspect mai realist ### Design Responsive cu procente Observă cum toate dimensiunile folosesc procente în loc de valori fixe în pixeli: De ce este important: - Asigură că terrariul se scalează proporțional pe orice dimensiune de ecran - Menține relațiile vizuale dintre componentele borcanului - Oferă o experiență consecventă de la telefoane mobile până la monitoare desktop mari - Permite designului să se adapteze fără a rupe aspectul vizual ### Unități CSS în acțiune Folosim unități rem pentru border-radius, care se scalează în funcție de dimensiunea fontului rădăcină. Acest lucru creează designuri accesibile care respectă preferințele utilizatorului privind fonturile. Află mai multe despre unitățile relative CSS în specificația oficială. ✅ Experimentare Vizuală: Încearcă să modifici aceste valori și observă efectele: - Schimbă opacitatea borcanului de la 0.5 la 0.8 – cum afectează acest lucru aspectul sticlei? - Ajustează culoarea pământului de la #3a241d la #8B4513 – ce impact vizual are? - Modifică z-index al pământului la 2 – ce se întâmplă cu stratificarea? ### 🔄 Verificare Pedagogică Înțelegerea designului vizual CSS: Confirmă-ți înțelegerea designului CSS vizual: - ✅ Cum creează dimensiunile procentuale un design responsive? - ✅ De ce creează opacitatea efectul de transparență a sticlei? - ✅ Ce rol are z-index în stratificarea elementelor? - ✅ Cum creează valorile border-radius forma borcanului? Principiul Designului: Observă cum construim imagini complexe din forme simple: 1. Dreptunghiuri → Dreptunghiuri rotunjite → Componente borcan 2. Culori plate → Opacitate → Efect de sticlă 3. Elemente individuale → Compoziție stratificată → Aspect 3D --- ## Provocarea Agentului GitHub Copilot 🚀 Folosește modul Agent pentru a realiza următoarea provocare: Descriere: Creează o animație CSS care face ca plantele din terrariu să se legene ușor dintr-o parte în alta, simulând un efect natural de adiere. Aceasta te va ajuta să practici animațiile CSS, transformările și keyframe-urile, în timp ce îmbunătățești aspectul vizual al terrariului. Prompt: Adaugă animații CSS keyframe pentru a face plantele din terrariu să se leagene ușor dintr-o parte în alta. Creează o animație de legănare care rotește fiecare plantă ușor (2-3 grade) la stânga și dreapta, cu o durată de 3-4 secunde, și aplic-o clasei .plant. Asigură-te că animația se repetă infinit și are o funcție easing pentru un mișcare naturală. Află mai multe despre modul agent aici. ## 🚀 Provocare: Adăugarea reflexiilor de sticlă Ești gata să îmbunătățești terrariul cu reflecții realiste de sticlă? Această tehnică va adăuga adâncime și realism designului. Vei crea accente subtile care simulează modul în care lumina se reflectă pe suprafețele de sticlă. Această abordare este similară cu modul în care pictorii Renașterii, precum Jan van Eyck, foloseau lumina și reflectarea pentru a face sticla pictată să pară tridimensională. Iată ce vizezi: Provocarea ta: - Creează forme ovale albe sau deschise la culoare pentru reflexiile sticlei - Poziționează-le strategic pe partea stângă a borcanului - Aplică opacitate și efecte de blur adecvate pentru un reflectare realistă a luminii - Folosește border-radius pentru a crea forme organice, asemănătoare bulelor - Experimentează cu degradeuri sau umbre pentru un realism sporit ## Test post-lectură Test post-lectură ## Extinde-ți cunoștințele CSS CSS poate părea complex la început, dar înțelegerea acestor concepte de bază oferă o fundație solidă pentru tehnici mai avansate. Următoarele domenii CSS de învățat: - Flexbox - simplifică alinierea și distribuția elementelor - CSS Grid - oferă unelte puternice pentru crearea layout-urilor complexe - Variabile CSS - reduc repetiția și îmbunătățesc mentenabilitatea - Design responsive - asigură funcționarea site-urilor pe diverse dimensiuni de ecran ### Resurse interactive de învățare Exersează aceste concepte cu jocuri interactive și captivante: - 🐸 Flexbox Froggy - Stăpânește Flexbox prin provocări distractive - 🌱 Grid Garden - Învață CSS Grid crescând morcovi virtuali - 🎯 CSS Battle - Testează-ți abilitățile CSS cu provocări de codare ### Învățare suplimentară Pentru fundamente CSS complete, finalizează acest modul Microsoft Learn: Style your HTML app with CSS ### ⚡ Ce poți face în următoarele 5 minute - [ ] Deschide DevTools și inspectează stilurile CSS pe orice site folosind panoul Elements - [ ] Creează un fișier CSS simplu și leagă-l de o pagină HTML - [ ] Încearcă să schimbi culorile folosind metode diferite: hex, RGB și nume de culori - [ ] Exersează modelul box prin adăugarea de padding și margină unui div ### 🎯 Ce poți realiza în această oră - [ ] Finalizează testul post-lectură și revizuiește fundamentele CSS - [ ] Stilizează pagina ta HTML cu fonturi, culori și spațieri - [ ] Creează un layout simplu folosind flexbox sau grid - [ ] Experimentează cu tranzițiile CSS pentru efecte fluide - [ ] Exersează designul responsive cu media queries ### 📅 Aventura ta CSS pe o săptămână - [ ] Finalizează tema stilizării terrariului cu creativitate - [ ] Stăpânește CSS Grid construind un layout pentru galerie foto - [ ] Învață animațiile CSS pentru a aduce viață designurilor tale - [ ] Explorează preprocessori CSS precum Sass sau Less - [ ] Studiază principii de design și aplică-le în CSS - [ ] Analizează și recreează designuri interesante găsite online ### 🌟 Maestria ta în design pe o lună - [ ] Construiește un sistem complet de design responsive pentru website - [ ] Învață CSS-in-JS sau framework-uri utility-first precum Tailwind - [ ] Contribuie la proiecte open source cu îmbunătățiri CSS - [ ] Stăpânește concepte avansate CSS ca proprietăți personalizate și containment - [ ] Creează biblioteci reutilizabile de componente cu CSS modular - [ ] Mentorizează alți învățăcei CSS și împărtășește-ți cunoștințele de design ## 🎯 Cronologia ta pentru Maestria CSS ### 🛠️ Rezumatul trusei tale CSS După ce ai terminat această lecție, ai acum: - Înțelegerea cascadei: Cum stilurile se moștenesc și suprascriu reciproc - Stăpânirea selectorilor: Țintire precisă cu elemente, clase și ID-uri - Abilități de poziționare: Plasarea și stratificarea strategică a elementelor - Design vizual: Crearea efectelor de sticlă, umbre și transparență - Tehnici responsive: Layout-uri procentuale care se adaptează la orice ecran - Organizarea codului: Structură CSS curată și ușor de întreținut - Practici moderne: Folosirea unităților relative și modele de design accesibile Pașii următori: Terrariul tău are acum structură (HTML) și stil (CSS). Lecția finală va adăuga interactivitate cu JavaScript! ## Tema Refactorizarea CSS --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Disclaimer: Acest document a fost tradus folosind serviciul de traducere AI Co-op Translator. Deși ne străduim pentru acuratețe, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original, în limba sa nativă, trebuie considerat sursa autorizată. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventuale neînțelegeri sau interpretări greșite rezultate din utilizarea acestei traduceri. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Проект "Террариум", часть 1: Введение в HTML
HTML, или язык гипертекстовой разметки, является основой каждого веб-сайта, который вы когда-либо посещали. Представьте HTML как скелет, который придает структуру веб-страницам – он определяет, где размещается контент, как он организован и что представляет собой каждый элемент. В то время как CSS позже "оденет" ваш HTML в цвета и макеты, а JavaScript оживит его с помощью интерактивности, HTML обеспечивает основную структуру, которая делает все остальное возможным. В этом уроке вы создадите HTML-структуру для интерфейса виртуального террариума. Этот практический проект научит вас основным концепциям HTML, одновременно создавая что-то визуально привлекательное. Вы узнаете, как организовывать контент с помощью семантических элементов, работать с изображениями и создавать основу для интерактивного веб-приложения. К концу урока у вас будет рабочая HTML-страница, отображающая изображения растений в организованных колонках, готовая к стилизации в следующем уроке. Не переживайте, если сначала она будет выглядеть просто – именно так должен выглядеть HTML до того, как CSS добавит визуальный блеск. ## Тест перед лекцией Тест перед лекцией ## Настройка вашего проекта Прежде чем мы начнем писать HTML-код, давайте настроим рабочее пространство для вашего проекта террариума. Создание организованной структуры файлов с самого начала – это важная привычка, которая будет полезна вам на протяжении всего пути веб-разработки. ### Задание: Создайте структуру проекта Вы создадите отдельную папку для проекта террариума и добавите ваш первый HTML-файл. Вот два подхода, которые вы можете использовать: Вариант 1: Использование Visual Studio Code 1. Откройте Visual Studio Code 2. Нажмите "File" → "Open Folder" или используйте Ctrl+K, Ctrl+O (Windows/Linux) или Cmd+K, Cmd+O (Mac) 3. Создайте новую папку с названием terrarium и выберите ее 4. В панели Explorer нажмите на значок "New File" 5. Назовите файл index.html Вариант 2: Использование команд терминала Что делают эти команды: - Создают новую директорию с названием terrarium для вашего проекта - Переходят в директорию террариума - Создают пустой файл index.html - Открывают файл в Visual Studio Code для редактирования ## Понимание структуры HTML-документа Каждый HTML-документ следует определенной структуре, которую браузеры должны понимать и правильно отображать. Представьте эту структуру как официальное письмо – оно имеет обязательные элементы в определенном порядке, которые помогают получателю (в данном случае браузеру) правильно обработать содержимое. Давайте начнем с добавления необходимой основы, которая требуется каждому HTML-документу. ### Декларация DOCTYPE и корневой элемент Первые две строки любого HTML-файла служат "введением" документа для браузера: Что делает этот код: - Объявляет тип документа как HTML5 с помощью <!DOCTYPE html> - Создает корневой элемент <html>, который будет содержать весь контент страницы - Устанавливает современные веб-стандарты для правильного отображения браузером - Обеспечивает единообразное отображение в разных браузерах и на разных устройствах ### 🔄 Педагогическая проверка Пауза и размышления: Прежде чем продолжить, убедитесь, что вы понимаете: - ✅ Почему каждый HTML-документ нуждается в декларации DOCTYPE - ✅ Что содержит корневой элемент <html> - ✅ Как эта структура помогает браузерам правильно отображать страницы Краткий тест для самопроверки: Можете ли вы объяснить своими словами, что означает "отображение в соответствии со стандартами"? ## Добавление важной метаинформации документа Секция <head> HTML-документа содержит важную информацию, которая нужна браузерам и поисковым системам, но которую посетители не видят непосредственно на странице. Это своего рода "закулисная" информация, которая помогает вашей веб-странице работать правильно и отображаться корректно на разных устройствах и платформах. Эти метаданные сообщают браузерам, как отображать вашу страницу, какую кодировку символов использовать и как обрабатывать разные размеры экрана – все это важно для создания профессиональных и доступных веб-страниц. ### Задание: Добавьте секцию <head> документа Вставьте эту секцию <head> между открывающим и закрывающим тегами <html>: Разбор того, что делает каждый элемент: - Устанавливает заголовок страницы, который отображается на вкладках браузера и в результатах поиска - Определяет кодировку символов UTF-8 для правильного отображения текста по всему миру - Обеспечивает совместимость с современными версиями Internet Explorer - Настраивает адаптивный дизайн, устанавливая ширину области просмотра в соответствии с шириной устройства - Контролирует начальный уровень масштабирования для отображения контента в естественном размере ## Создание тела документа Элемент <body> содержит весь видимый контент вашей веб-страницы – все, что пользователи увидят и с чем будут взаимодействовать. В то время как секция <head> предоставила инструкции браузеру, секция <body> содержит фактический контент: текст, изображения, кнопки и другие элементы, которые создают пользовательский интерфейс. Давайте добавим структуру тела и поймем, как HTML-теги работают вместе для создания содержательного контента. ### Понимание структуры HTML-тегов HTML использует парные теги для определения элементов. Большинство тегов имеют открывающий тег, например <p>, и закрывающий тег, например </p>, с содержимым между ними: <p>Привет, мир!</p>. Это создает элемент абзаца, содержащий текст "Привет, мир!". ### Задание: Добавьте элемент <body> Обновите ваш HTML-файл, чтобы включить элемент <body>: Что обеспечивает эта полная структура: - Устанавливает базовую структуру HTML5-документа - Включает важные метаданные для правильного отображения браузером - Создает пустое тело, готовое для вашего видимого контента - Следует современным лучшим практикам веб-разработки Теперь вы готовы добавить видимые элементы вашего террариума. Мы будем использовать элементы <div> как контейнеры для организации различных секций контента и элементы <img> для отображения изображений растений. ### Работа с изображениями и контейнерами макета Изображения в HTML особенные, потому что они используют "самозакрывающиеся" теги. В отличие от элементов, таких как <p></p>, которые обрамляют контент, тег <img> содержит всю необходимую информацию внутри самого тега, используя атрибуты, такие как src для пути к файлу изображения и alt для доступности. Прежде чем добавлять изображения в ваш HTML, вам нужно правильно организовать файлы проекта, создав папку для изображений и добавив графику растений. Сначала настройте ваши изображения: 1. Создайте папку с названием images внутри папки вашего проекта террариума 2. Скачайте изображения растений из папки с решениями (всего 14 изображений растений) 3. Скопируйте все изображения растений в вашу новую папку images ### Задание: Создайте макет отображения растений Теперь добавьте изображения растений, организованные в два столбца, между вашими тегами <body></body>: Пошагово, что происходит в этом коде: - Создается основной контейнер страницы с id="page", чтобы содержать весь контент - Устанавливаются два контейнера для колонок: left-container и right-container - Организуются 7 растений в левую колонку и 7 растений в правую колонку - Обрамляются каждое изображение растения в div plant-holder для индивидуального позиционирования - Применяются согласованные имена классов для стилизации с помощью CSS в следующем уроке - Назначаются уникальные идентификаторы каждому изображению растения для последующего взаимодействия с JavaScript - Указываются правильные пути к файлам в папке изображений ### 🔄 Педагогическая проверка Понимание структуры: Найдите минутку, чтобы пересмотреть вашу HTML-структуру: - ✅ Можете ли вы определить основные контейнеры в вашем макете? - ✅ Понимаете ли вы, почему у каждого изображения есть уникальный идентификатор? - ✅ Как бы вы описали назначение div plant-holder? Визуальная проверка: Откройте ваш HTML-файл в браузере. Вы должны увидеть: - Базовый список изображений растений - Изображения, организованные в два столбца - Простой, не стилизованный макет Помните: Этот простой вид – именно то, как должен выглядеть HTML до стилизации с помощью CSS! С добавленной разметкой растения появятся на экране, хотя пока они не будут выглядеть изящно – для этого предназначен CSS в следующем уроке! На данный момент у вас есть надежная HTML-основа, которая правильно организует ваш контент и следует лучшим практикам доступности. ## Использование семантического HTML для доступности Семантический HTML означает выбор HTML-элементов на основе их значения и назначения, а не только их внешнего вида. Используя семантическую разметку, вы передаете структуру и смысл вашего контента браузерам, поисковым системам и вспомогательным технологиям, таким как экранные читалки. Этот подход делает ваши веб-сайты более доступными для пользователей с ограниченными возможностями и помогает поисковым системам лучше понимать ваш контент. Это фундаментальный принцип современной веб-разработки, который создает лучшие впечатления для всех. ### Добавление семантического заголовка страницы Давайте добавим правильный заголовок на вашу страницу террариума. Вставьте эту строку сразу после открывающего тега <body>: Почему важна семантическая разметка: - Помогает экранным читалкам ориентироваться и понимать структуру страницы - Улучшает поисковую оптимизацию (SEO), уточняя иерархию контента - Повышает доступность для пользователей с нарушениями зрения или когнитивными особенностями - Создает лучшие пользовательские впечатления на всех устройствах и платформах - Следует веб-стандартам и лучшим практикам профессиональной разработки Примеры семантического и несемантического выбора: ## Создание контейнера террариума Теперь давайте добавим HTML-структуру для самого террариума – стеклянного контейнера, где растения будут размещены. Этот раздел демонстрирует важную концепцию: HTML предоставляет структуру, но без стилизации CSS эти элементы пока не будут видны. Разметка террариума использует описательные имена классов, которые сделают стилизацию CSS интуитивной и удобной для поддержки в следующем уроке. ### Задание: Добавьте структуру террариума Вставьте эту разметку выше последнего тега </div> (перед закрывающим тегом контейнера страницы): Понимание структуры террариума: - Создает основной контейнер террариума с уникальным идентификатором для стилизации - Определяет отдельные элементы для каждого визуального компонента (верх, стены, земля, низ) - Включает вложенные элементы для эффектов отражения стекла (глянцевые элементы) - Использует описательные имена классов, которые четко указывают назначение каждого элемента - Подготавливает структуру для CSS-стилизации, которая создаст внешний вид стеклянного террариума ### 🔄 Педагогическая проверка Мастерство структуры HTML: Перед тем как двигаться дальше, убедитесь, что вы можете: - ✅ Объяснить разницу между структурой HTML и визуальным оформлением - ✅ Определить семантические и несемантические элементы HTML - ✅ Описать, как правильная разметка улучшает доступность - ✅ Распознать полную структуру дерева документа Проверка понимания: Попробуйте открыть ваш HTML-файл в браузере с отключенным JavaScript и удаленным CSS. Это покажет чистую семантическую структуру, которую вы создали! --- ## Задание от GitHub Copilot Agent Используйте режим Agent, чтобы выполнить следующее задание: Описание: Создайте семантическую HTML-структуру для раздела руководства по уходу за растениями, который можно добавить к проекту террариума. Подсказка: Создайте семантический HTML-раздел, включающий основной заголовок "Руководство по уходу за растениями", три подраздела с заголовками "Полив", "Требования к освещению" и "Уход за почвой", каждый из которых содержит абзац информации о уходе за растениями. Используйте правильные семантические HTML-теги, такие как <section>, <h2>, <h3> и <p>, чтобы структурировать контент. Узнайте больше о режиме Agent здесь. ## Задание: История HTML Изучение эволюции веба HTML значительно эволюционировал с тех пор, как Тим Бернерс-Ли создал первый веб-браузер в CERN в 1990 году. Некоторые старые теги, такие как <marquee>, теперь устарели, потому что они плохо работают с современными стандартами доступности и принципами адаптивного дизайна. Попробуйте этот эксперимент: 1. Временно оберните ваш заголовок <h1> в тег <marquee>: <marquee><h1>Мой террариум</h1></marquee> 2. Откройте вашу страницу в браузере и наблюдайте эффект прокрутки 3. Подумайте, почему этот тег был устаревшим (подсказка: подумайте о пользовательском опыте и доступности) 4. Удалите тег <marquee> и вернитесь к семантической разметке Вопросы для размышления: - Как прокручивающийся заголовок может повлиять на пользователей с нарушениями зрения или чувствительностью к движению? - Какие современные CSS-техники могут достичь аналогичных визуальных эффектов более доступным способом? - Почему важно использовать текущие веб-стандарты вместо устаревших элементов? Узнайте больше о устаревших и deprecated HTML-элементах, чтобы понять, как веб-стандарты эволюционируют для улучшения пользовательского опыта. ## Викторина после лекции Викторина после лекции ## Обзор и самостоятельное изучение Углубите свои знания HTML HTML является основой веба уже более 30 лет, эволюционируя от простого языка разметки документов до сложной платформы для создания интерактивных приложений. Понимание этой эволюции помогает ценить современные веб-стандарты и принимать более обоснованные решения в разработке. Рекомендуемые пути обучения: 1. История и эволюция HTML - Изучите хронологию от HTML 1.0 до HTML5 - Узнайте, почему определенные теги были устаревшими (доступность, удобство для мобильных устройств, поддерживаемость) - Исследуйте новые функции HTML и предложения 2. Глубокое изучение семантического HTML - Изучите полный список семантических элементов HTML5 - Практикуйтесь в определении, когда использовать <article>, <section>, <aside> и <main> - Узнайте о атрибутах ARIA для улучшенной доступности 3. Современная веб-разработка - Изучите создание адаптивных веб-сайтов на Microsoft Learn - Поймите, как HTML интегрируется с CSS и JavaScript - Узнайте о лучших практиках веб-производительности и SEO Вопросы для размышления: - Какие устаревшие HTML-теги вы обнаружили и почему они были удалены? - Какие новые функции HTML предлагаются для будущих версий? - Как семантический HTML способствует доступности и SEO? ### ⚡ Что можно сделать за следующие 5 минут - [ ] Откройте DevTools (F12) и изучите HTML-структуру вашего любимого веб-сайта - [ ] Создайте простой HTML-файл с базовыми тегами: <h1>, <p> и <img> - [ ] Проверьте ваш HTML с помощью онлайн-валидатора W3C HTML - [ ] Попробуйте добавить комментарий в ваш HTML с помощью <!-- комментарий --> ### 🎯 Что можно достичь за час - [ ] Пройдите викторину после урока и повторите концепции семантического HTML - [ ] Создайте простую веб-страницу о себе, используя правильную HTML-структуру - [ ] Экспериментируйте с различными уровнями заголовков и тегами форматирования текста - [ ] Добавьте изображения и ссылки, чтобы попрактиковаться в интеграции мультимедиа - [ ] Исследуйте функции HTML5, которые вы еще не пробовали ### 📅 Ваш недельный путь изучения HTML - [ ] Завершите задание по проекту террариума с семантической разметкой - [ ] Создайте доступную веб-страницу, используя ARIA-метки и роли - [ ] Практикуйтесь в создании форм с различными типами ввода - [ ] Изучите API HTML5, такие как localStorage или геолокация - [ ] Изучите адаптивные HTML-шаблоны и дизайн, ориентированный на мобильные устройства - [ ] Ознакомьтесь с HTML-кодом других разработчиков для изучения лучших практик ### 🌟 Ваш месячный путь к основам веба - [ ] Создайте сайт-портфолио, демонстрирующий ваше мастерство HTML - [ ] Изучите шаблонизацию HTML с помощью фреймворка, такого как Handlebars - [ ] Внесите вклад в проекты с открытым исходным кодом, улучшая документацию HTML - [ ] Освойте продвинутые концепции HTML, такие как пользовательские элементы - [ ] Интегрируйте HTML с CSS-фреймворками и библиотеками JavaScript - [ ] Наставляйте других, изучающих основы HTML ## 🎯 Ваш график освоения HTML ### 🛠️ Резюме вашего HTML-инструментария После завершения этого урока у вас есть: - Структура документа: Полное основание HTML5 с правильным DOCTYPE - Семантическая разметка: Значимые теги, которые улучшают доступность и SEO - Интеграция изображений: Правильная организация файлов и практика использования alt-текста - Контейнеры для макета: Стратегическое использование div с описательными именами классов - Осведомленность о доступности: Понимание навигации с помощью экранных читалок - Современные стандарты: Текущие практики HTML5 и знания об устаревших тегах - Основа проекта: Надежная база для CSS-стилизации и интерактивности с JavaScript Следующие шаги: Ваша HTML-структура готова для CSS-стилизации! Семантическая основа, которую вы создали, сделает следующий урок гораздо проще для понимания. ## Задание Практикуйте HTML: Создайте макет блога --- Отказ от ответственности: Этот документ был переведен с использованием сервиса автоматического перевода Co-op Translator. Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода.
Проект "Террариум", часть 2: Введение в CSS
Помните, как ваш HTML-террариум выглядел довольно просто? С помощью CSS мы преобразуем эту простую структуру в нечто визуально привлекательное. Если HTML — это как строительство каркаса дома, то CSS — это все, что делает его уютным: цвета стен, расстановка мебели, освещение и то, как комнаты соединяются друг с другом. Подумайте, как дворец Версаль начинался как простой охотничий домик, но благодаря вниманию к декору и планировке превратился в одно из самых великолепных зданий мира. Сегодня мы преобразуем ваш террариум из функционального в изысканный. Вы научитесь точно позиционировать элементы, адаптировать макеты к различным размерам экранов и создавать визуальную привлекательность, которая делает сайты интересными. К концу этого урока вы увидите, как стратегическое использование CSS-стилей может значительно улучшить ваш проект. Давайте добавим стиль вашему террариуму. ## Предварительный тест Предварительный тест ## Начало работы с CSS CSS часто воспринимается как инструмент для "украшения", но его назначение гораздо шире. CSS — это как быть режиссером фильма: вы контролируете не только внешний вид, но и движение, взаимодействие и адаптацию к различным ситуациям. Современный CSS обладает удивительными возможностями. Вы можете писать код, который автоматически адаптирует макеты для телефонов, планшетов и настольных компьютеров. Вы можете создавать плавные анимации, которые привлекают внимание пользователей туда, куда нужно. Результаты могут быть впечатляющими, когда все работает вместе. Вот что мы сделаем в этом уроке: - Создадим полный визуальный дизайн для вашего террариума, используя современные техники CSS - Изучим основные концепции, такие как каскадирование, наследование и селекторы CSS - Реализуем стратегии адаптивного позиционирования и макета - Построим контейнер террариума, используя формы и стили CSS ### Предварительные требования Вы должны завершить создание HTML-структуры для вашего террариума из предыдущего урока и подготовить ее для стилизации. ### Настройка файла CSS Прежде чем начать стилизацию, нам нужно подключить CSS к нашему HTML. Это соединение сообщает браузеру, где найти инструкции по стилизации для нашего террариума. В папке вашего террариума создайте новый файл с именем style.css, затем подключите его в секции <head> вашего HTML-документа: Что делает этот код: - Создает соединение между вашими HTML- и CSS-файлами - Сообщает браузеру загрузить и применить стили из style.css - Использует атрибут rel="stylesheet", чтобы указать, что это CSS-файл - Ссылается на путь к файлу через href="./style.css" ## Понимание каскада CSS Задумывались, почему CSS называется "каскадными" таблицами стилей? Стили каскадируют, как водопад, и иногда конфликтуют друг с другом. Представьте, как работает структура командования в армии: общий приказ может гласить "все войска носят зеленую форму", но конкретный приказ для вашего подразделения может сказать "надеть парадную форму для церемонии". Более конкретная инструкция имеет приоритет. CSS следует аналогичной логике, и понимание этой иерархии делает отладку гораздо проще. ### Эксперимент с приоритетом каскада Давайте посмотрим на каскад в действии, создав конфликт стилей. Сначала добавьте встроенный стиль в ваш тег <h1>: Что делает этот код: - Применяет красный цвет непосредственно к элементу <h1> с помощью встроенного стиля - Использует атрибут style для встраивания CSS прямо в HTML - Создает стиль с самым высоким приоритетом для этого конкретного элемента Затем добавьте это правило в ваш файл style.css: В приведенном выше коде мы: - Определили правило CSS, которое нацелено на все элементы <h1> - Установили цвет текста синим, используя внешний файл стилей - Создали правило с более низким приоритетом по сравнению со встроенными стилями ✅ Проверка знаний: Какой цвет отображается в вашем веб-приложении? Почему этот цвет выигрывает? Можете ли вы придумать сценарии, где вам может понадобиться переопределить стили? ## Наследование CSS в действии Наследование CSS работает как генетика — элементы наследуют определенные свойства от своих родительских элементов. Если вы установите семейство шрифтов для элемента body, весь текст внутри автоматически будет использовать этот же шрифт. Это похоже на то, как характерная форма челюсти семьи Габсбургов проявлялась в поколениях, не будучи специально указана для каждого человека. Однако не все свойства наследуются. Текстовые стили, такие как шрифты и цвета, наследуются, но свойства макета, такие как отступы и границы, не наследуются. Точно так же, как дети могут наследовать физические черты, но не стиль одежды своих родителей. ### Наблюдение за наследованием шрифтов Давайте посмотрим на наследование в действии, установив семейство шрифтов для элемента <body>: Разбор того, что происходит: - Устанавливает семейство шрифтов для всей страницы, нацеливаясь на элемент <body> - Использует стек шрифтов с резервными вариантами для лучшей совместимости с браузерами - Применяет современные системные шрифты, которые отлично смотрятся на разных операционных системах - Обеспечивает, что все дочерние элементы наследуют этот шрифт, если он не переопределен Откройте инструменты разработчика вашего браузера (F12), перейдите на вкладку "Элементы" и проверьте ваш элемент <h1>. Вы увидите, что он наследует семейство шрифтов от body: ✅ Время эксперимента: Попробуйте установить другие наследуемые свойства для <body>, такие как color, line-height или text-align. Что происходит с вашим заголовком и другими элементами? ### 🔄 Педагогическая проверка Понимание основ CSS: Перед переходом к селекторам убедитесь, что вы можете: - ✅ Объяснить разницу между каскадом и наследованием - ✅ Предсказать, какой стиль победит в конфликте специфичности - ✅ Определить, какие свойства наследуются от родительских элементов - ✅ Правильно подключить CSS-файлы к HTML Быстрый тест: Если у вас есть эти стили, какого цвета будет <h1> внутри <div class="special">? Ответ: Красный (селектор элемента напрямую нацелен на h1) ## Освоение селекторов CSS Селекторы CSS — это ваш способ нацеливания на конкретные элементы для стилизации. Они работают как точные указания — вместо того, чтобы сказать "дом", вы можете сказать "синий дом с красной дверью на улице Мэйпл". CSS предоставляет разные способы быть точным, и выбор правильного селектора — это как выбор подходящего инструмента для задачи. Иногда нужно стилизовать каждую дверь в районе, а иногда только одну конкретную дверь. ### Селекторы элементов (теги) Селекторы элементов нацеливаются на HTML-элементы по их имени тега. Они идеально подходят для установки базовых стилей, которые применяются ко всей странице: Понимание этих стилей: - Устанавливает единообразную типографику для всей страницы с помощью селектора body - Удаляет стандартные отступы и поля браузера для лучшего контроля - Стилизует все элементы заголовков с цветом, выравниванием и интервалами - Использует единицы rem для масштабируемого, доступного размера шрифта Хотя селекторы элементов хорошо работают для общего стилизования, вам понадобятся более специфичные селекторы для стилизации отдельных компонентов, таких как растения в вашем террариуме. ### Селекторы ID для уникальных элементов Селекторы ID используют символ # и нацеливаются на элементы с определенными атрибутами id. Поскольку ID должны быть уникальными на странице, они идеально подходят для стилизации отдельных, особенных элементов, таких как контейнеры для растений слева и справа. Давайте создадим стили для боковых контейнеров террариума, где будут находиться растения: Что делает этот код: - Располагает контейнеры по краям экрана с помощью абсолютного позиционирования - Использует единицы vh (высота окна просмотра) для адаптивной высоты, которая подстраивается под размер экрана - Применяет box-sizing: border-box, чтобы отступы включались в общую ширину - Удаляет ненужные единицы px из нулевых значений для более чистого кода - Устанавливает мягкий цвет фона, который приятнее для глаз, чем резкий серый ✅ Задача по качеству кода: Обратите внимание, как этот CSS нарушает принцип DRY (Don't Repeat Yourself). Можете ли вы оптимизировать его, используя как ID, так и класс? Улучшенный подход: ### Селекторы классов для повторяемых стилей Селекторы классов используют символ . и идеально подходят, когда вы хотите применить одни и те же стили к нескольким элементам. В отличие от ID, классы можно использовать повторно в вашем HTML, что делает их идеальными для создания единообразных шаблонов стилизации. В нашем террариуме каждому растению нужна похожая стилизация, но также индивидуальное позиционирование. Мы будем использовать комбинацию классов для общих стилей и ID для уникального позиционирования. Вот структура HTML для каждого растения: Ключевые элементы объяснены: - Использует class="plant-holder" для единообразной стилизации контейнера для всех растений - Применяет class="plant" для общих стилей изображения и поведения - Включает уникальный id="plant1" для индивидуального позиционирования и взаимодействия с JavaScript - Обеспечивает описательный текст для доступности экранных читалок Теперь добавьте эти стили в ваш файл style.css: Разбор этих стилей: - Создает относительное позиционирование для держателя растения, чтобы установить контекст позиционирования - Устанавливает высоту каждого держателя растения на 13%, чтобы все растения помещались вертикально без прокрутки - Смещает держатели немного влево для лучшего центрирования растений в их контейнерах - Позволяет растениям адаптироваться по размеру с помощью свойств max-width и max-height - Использует z-index для размещения растений поверх других элементов террариума - Добавляет мягкий эффект наведения с переходами CSS для улучшения взаимодействия с пользователем ✅ Критическое мышление: Почему нам нужны оба селектора .plant-holder и .plant? Что произойдет, если мы попробуем использовать только один? ## Понимание позиционирования в CSS Позиционирование в CSS — это как быть режиссером спектакля: вы решаете, где каждый актер будет стоять и как он будет двигаться по сцене. Некоторые актеры следуют стандартной расстановке, а другие требуют особого позиционирования для драматического эффекта. Как только вы поймете принципы позиционирования, многие задачи макета станут управляемыми. Нужна панель навигации, которая остается наверху при прокрутке? Позиционирование решает эту задачу. Хотите, чтобы всплывающая подсказка появлялась в определенном месте? Это тоже позиционирование. ### Пять значений позиционирования ### Позиционирование в нашем террариуме Наш террариум использует стратегическую комбинацию типов позиционирования для создания желаемого макета: Понимание стратегии позиционирования: - Абсолютные контейнеры удаляются из стандартного потока документа и закрепляются по краям экрана - Относительные держатели растений создают контекст позиционирования, оставаясь в потоке документа - Абсолютные растения могут быть точно позиционированы внутри своих относительных контейнеров - Эта комбинация позволяет растениям располагаться вертикально, оставаясь индивидуально позиционируемыми ✅ Время эксперимента: Попробуйте изменить значения позиционирования и наблюдайте за результатами: - Что произойдет, если вы измените .container с absolute на relative? - Как изменится макет, если .plant-holder использовать absolute вместо relative? - Что произойдет, если переключить .plant на относительное позиционирование? ### 🔄 Педагогическая проверка Мастерство позиционирования в CSS: Сделайте паузу, чтобы проверить свои знания: - ✅ Можете ли вы объяснить, почему растениям нужно абсолютное позиционирование для функции перетаскивания? - ✅ Понимаете ли вы, как относительные контейнеры создают контекст позиционирования? - ✅ Почему боковые контейнеры используют абсолютное позиционирование? - ✅ Что произойдет, если полностью убрать декларации позиционирования? Связь с реальным миром: Подумайте, как позиционирование в CSS отражает реальный мир: - Static: Книги на полке (естественный порядок) - Relative: Слегка переместить книгу, оставив её на месте - Absolute: Положить закладку на конкретную страницу - Fixed: Липкая заметка, которая остаётся видимой при перелистывании страниц ## Создание террариума с помощью CSS Теперь мы создадим стеклянную банку, используя только CSS — без изображений или графических редакторов. Создание реалистичного стекла, теней и эффектов глубины с помощью позиционирования и прозрачности демонстрирует визуальные возможности CSS. Этот подход напоминает, как архитекторы движения Баухаус использовали простые геометрические формы для создания сложных и красивых структур. Освоив эти принципы, вы сможете распознавать CSS-техники, лежащие в основе многих веб-дизайнов. ### Создание компонентов стеклянной банки Давайте создадим террариумную банку по частям. Каждая часть использует абсолютное позиционирование и размеры, основанные на процентах, для адаптивного дизайна: Понимание конструкции террариума: - Использует размеры, основанные на процентах, для масштабирования на всех размерах экрана - Позиционирует элементы абсолютно для точного наложения и выравнивания - Применяет разные значения прозрачности для создания эффекта стеклянной прозрачности - Реализует слои с помощью z-index, чтобы растения выглядели внутри банки - Добавляет тонкие тени и изящные закругления углов для более реалистичного вида ### Адаптивный дизайн с использованием процентов Обратите внимание, что все размеры задаются в процентах, а не фиксированными пикселями: Почему это важно: - Обеспечивает пропорциональное масштабирование террариума на любом размере экрана - Сохраняет визуальные отношения между компонентами банки - Гарантирует единообразный опыт от мобильных телефонов до больших мониторов - Позволяет дизайну адаптироваться без нарушения макета ### Единицы измерения в CSS Мы используем единицы rem для закругления углов, которые масштабируются относительно размера шрифта корневого элемента. Это создает более доступные дизайны, которые учитывают предпочтения пользователей. Узнайте больше о относительных единицах CSS в официальной спецификации. ✅ Визуальный эксперимент: Попробуйте изменить эти значения и наблюдайте за эффектами: - Измените прозрачность банки с 0.5 на 0.8 — как это повлияет на внешний вид стекла? - Измените цвет земли с #3a241d на #8B4513 — какое визуальное воздействие это окажет? - Измените z-index земли на 2 — что произойдет с наложением слоев? ### 🔄 Педагогическая проверка Понимание визуального дизайна в CSS: Убедитесь, что вы усвоили основы визуального CSS: - ✅ Как размеры, основанные на процентах, создают адаптивный дизайн? - ✅ Почему прозрачность создает эффект стеклянной прозрачности? - ✅ Какую роль играет z-index в наложении элементов? - ✅ Как значения закругления углов создают форму банки? Принцип дизайна: Обратите внимание, как мы создаем сложные визуальные эффекты из простых форм: 1. Прямоугольники → Закругленные прямоугольники → Компоненты банки 2. Плоские цвета → Прозрачность → Эффект стекла 3. Отдельные элементы → Сложная композиция → 3D-вид --- ## Вызов GitHub Copilot Agent 🚀 Используйте режим Agent, чтобы выполнить следующий вызов: Описание: Создайте CSS-анимацию, которая заставляет растения в террариуме плавно раскачиваться из стороны в сторону, имитируя эффект естественного ветра. Это поможет вам попрактиковаться в CSS-анимациях, трансформациях и ключевых кадрах, а также улучшить визуальную привлекательность террариума. Задание: Добавьте CSS-анимацию ключевых кадров, чтобы растения в террариуме плавно раскачивались из стороны в сторону. Создайте анимацию, которая слегка вращает каждое растение (на 2-3 градуса) влево и вправо с длительностью 3-4 секунды, и примените её к классу .plant. Убедитесь, что анимация повторяется бесконечно и имеет функцию сглаживания для естественного движения. Узнайте больше о режиме Agent здесь. ## 🚀 Вызов: Добавление отражений на стекле Готовы улучшить террариум, добавив реалистичные отражения на стекле? Этот прием добавит глубину и реализм дизайну. Вы создадите тонкие блики, которые имитируют отражение света на стеклянных поверхностях. Этот подход похож на то, как художники эпохи Возрождения, такие как Ян ван Эйк, использовали свет и отражение, чтобы сделать изображенное стекло трехмерным. Вот к чему вы стремитесь: Ваше задание: - Создайте тонкие белые или светлые овальные формы для отражений на стекле - Расположите их стратегически на левой стороне банки - Примените подходящую прозрачность и эффекты размытия для реалистичного отражения света - Используйте border-radius, чтобы создать органичные, пузырьковые формы - Экспериментируйте с градиентами или тенями для усиления реализма ## Викторина после лекции Викторина после лекции ## Расширьте свои знания о CSS CSS может показаться сложным на начальном этапе, но понимание этих основных концепций создаёт прочную основу для освоения более сложных техник. Ваши следующие области изучения CSS: - Flexbox - упрощает выравнивание и распределение элементов - CSS Grid - предоставляет мощные инструменты для создания сложных макетов - CSS Variables - уменьшает повторение и улучшает поддерживаемость - Адаптивный дизайн - гарантирует, что сайты хорошо работают на разных размерах экрана ### Интерактивные обучающие ресурсы Практикуйте эти концепции с помощью увлекательных, интерактивных игр: - 🐸 Flexbox Froggy - Освойте Flexbox через веселые задания - 🌱 Grid Garden - Изучите CSS Grid, выращивая виртуальную морковь - 🎯 CSS Battle - Проверьте свои навыки CSS с помощью кодинговых вызовов ### Дополнительное обучение Для полного изучения основ CSS пройдите этот модуль Microsoft Learn: Стилизация вашего HTML-приложения с помощью CSS ### ⚡ Что вы можете сделать за следующие 5 минут - [ ] Откройте DevTools и изучите CSS-стили на любом сайте с помощью панели Elements - [ ] Создайте простой CSS-файл и подключите его к HTML-странице - [ ] Попробуйте изменить цвета разными способами: hex, RGB и именованные цвета - [ ] Практикуйте модель коробки, добавляя отступы и поля к div ### 🎯 Что вы можете достичь за этот час - [ ] Пройдите викторину после урока и повторите основы CSS - [ ] Стилизуйте свою HTML-страницу с помощью шрифтов, цветов и интервалов - [ ] Создайте простой макет с использованием flexbox или grid - [ ] Экспериментируйте с CSS-переходами для плавных эффектов - [ ] Практикуйте адаптивный дизайн с помощью медиа-запросов ### 📅 Ваш недельный CSS-приключение - [ ] Завершите задание по стилизации террариума с творческим подходом - [ ] Освойте CSS Grid, создавая макет фотогалереи - [ ] Изучите CSS-анимации, чтобы оживить ваши дизайны - [ ] Исследуйте препроцессоры CSS, такие как Sass или Less - [ ] Изучите принципы дизайна и примените их к вашему CSS - [ ] Анализируйте и воссоздавайте интересные дизайны, которые вы находите в интернете ### 🌟 Ваш месячный путь к мастерству дизайна - [ ] Создайте полный адаптивный дизайн веб-сайта - [ ] Изучите CSS-in-JS или фреймворки с утилитарным подходом, такие как Tailwind - [ ] Внесите вклад в проекты с открытым исходным кодом, улучшая CSS - [ ] Освойте сложные концепции CSS, такие как пользовательские свойства и containment - [ ] Создайте библиотеки компонентов с модульным CSS - [ ] Наставляйте других, изучающих CSS, и делитесь знаниями о дизайне ## 🎯 Ваш график освоения CSS ### 🛠️ Резюме вашего CSS-инструментария После завершения этого урока у вас есть: - Понимание каскада: Как стили наследуются и переопределяются - Мастерство селекторов: Точное нацеливание с помощью элементов, классов и идентификаторов - Навыки позиционирования: Стратегическое размещение и наложение элементов - Визуальный дизайн: Создание эффектов стекла, теней и прозрачности - Адаптивные техники: Макеты на основе процентов, которые адаптируются к любому экрану - Организация кода: Чистая, поддерживаемая структура CSS - Современные практики: Использование относительных единиц и доступных шаблонов дизайна Следующие шаги: Ваш террариум теперь имеет структуру (HTML) и стиль (CSS). В финальном уроке мы добавим интерактивность с помощью JavaScript! ## Задание Рефакторинг CSS --- Отказ от ответственности: Этот документ был переведен с использованием сервиса автоматического перевода Co-op Translator. Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода.
Terrarium Project Časť 1: Úvod do HTML
HTML, alebo HyperText Markup Language, je základom každej webovej stránky, ktorú ste kedy navštívili. Predstavte si HTML ako kostru, ktorá dáva štruktúru webovým stránkam – určuje, kam obsah patrí, ako je usporiadaný a čo každý prvok predstavuje. Zatiaľ čo CSS neskôr „oblečie“ vašu HTML stránku farbami a rozloženiami, a JavaScript ju oživí interaktivitou, HTML poskytuje základnú štruktúru, ktorá robí všetko ostatné možným. V tejto lekcii vytvoríte HTML štruktúru pre virtuálne rozhranie terária. Tento praktický projekt vás naučí základné koncepty HTML, pričom vytvoríte niečo vizuálne zaujímavé. Naučíte sa, ako organizovať obsah pomocou sémantických prvkov, pracovať s obrázkami a vytvoriť základ pre interaktívnu webovú aplikáciu. Na konci tejto lekcie budete mať funkčnú HTML stránku zobrazujúcu obrázky rastlín v usporiadaných stĺpcoch, pripravenú na štýlovanie v ďalšej lekcii. Nezáleží na tom, aký jednoduchý to na začiatku vyzerá – to je presne to, čo má HTML robiť predtým, než CSS pridá vizuálny lesk. ## Prednáškový kvíz Prednáškový kvíz ## Nastavenie projektu Pred tým, než sa pustíme do HTML kódu, nastavme si vhodné pracovné prostredie pre váš projekt terária. Vytvorenie usporiadaného systému súborov už od začiatku je dôležitý zvyk, ktorý sa vám bude hodiť počas celej vašej cesty vývojára webu. ### Úloha: Vytvorte štruktúru projektu Vytvoríte si vyhradenú zložku pre váš projekt terária a pridáte prvý HTML súbor. Tu sú dve možnosti, ktoré môžete použiť: Možnosť 1: Použitie Visual Studio Code 1. Otvorte Visual Studio Code 2. Kliknite na „Súbor“ → „Otvoriť zložku“ alebo použite Ctrl+K, Ctrl+O (Windows/Linux) alebo Cmd+K, Cmd+O (Mac) 3. Vytvorte novú zložku s názvom terrarium a vyberte ju 4. V paneli Explorer kliknite na ikonu „Nový súbor“ 5. Pomenujte svoj súbor index.html Možnosť 2: Použitie terminálových príkazov Čo tieto príkazy robia: - Vytvorí novú adresár s názvom terrarium pre váš projekt - Presunie sa do adresára terrarium - Vytvorí prázdny súbor index.html - Otvára súbor vo Visual Studio Code na úpravu ## Pochopenie štruktúry HTML dokumentu Každý HTML dokument nasleduje konkrétnu štruktúru, ktorú prehliadače potrebujú pochopiť a správne zobraziť. Predstavte si túto štruktúru ako formálny list – má povinné prvky v určitom poradí, ktoré pomáhajú príjemcovi (v tomto prípade prehliadaču) správne spracovať obsah. Začnime pridaním nevyhnutného základu, ktorý každý HTML dokument potrebuje. ### Deklarácia DOCTYPE a koreňový prvok Prvé dve riadky akéhokoľvek HTML súboru slúžia ako „úvod“ dokumentu pre prehliadač: Čo tento kód robí: - Deklaruje typ dokumentu ako HTML5 použitím <!DOCTYPE html> - Vytvára koreňový element <html>, ktorý bude obsahovať celý obsah stránky - Zavádza moderné webové štandardy pre správne renderovanie v prehliadači - Zabezpečuje konzistentné zobrazenie vo všetkých prehliadačoch a zariadeniach ### 🔄 Pedagogická kontrola Zastavte sa a zamyslite: Pred pokračovaním si uistite, že rozumiete: - ✅ Prečo každý HTML dokument potrebuje deklaráciu DOCTYPE - ✅ Čo obsahuje koreňový element <html> - ✅ Ako táto štruktúra pomáha prehliadačom správne zobrazovať stránky Rýchly seba-test: Dokážete vlastnými slovami vysvetliť, čo znamená „dodržiavanie štandardov pri renderovaní“? ## Pridanie nevyhnutných metaúdajov dokumentu Sekcia <head> HTML dokumentu obsahuje dôležité informácie, ktoré prehliadače a vyhľadávače potrebujú, ale ktoré návštevníci priamo na stránke nevidia. Predstavte si ju ako „zákulisné“ informácie, ktoré pomáhajú vašej webovej stránke fungovať správne a správne vyzerať na rôznych zariadeniach a platformách. Tieto metaúdaje hovoria prehliadačom, ako majú stránku zobraziť, aké kódovanie znakov použiť a ako sa majú správať pri rôznych veľkostiach obrazoviek – všetko nevyhnutné pre vytváranie profesionálnych a prístupných webových stránok. ### Úloha: Pridajte hlavičku dokumentu Vložte túto sekciu <head> medzi otváracie a zatváracie značky <html>: Čo jednotlivé prvky zabezpečujú: - Nastavuje názov stránky, ktorý sa zobrazuje na záložkách prehliadača a vo výsledkoch vyhľadávania - Špecifikuje kódovanie znakov UTF-8 pre správne zobrazenie textu po celom svete - Zabezpečuje kompatibilitu s modernými verziami Internet Explorera - Konfiguruje responzívny dizajn nastavením viewportu tak, aby zodpovedal šírke zariadenia - Ovláda počiatočné zväčšenie na zobrazenie obsahu v prirodzenej veľkosti ## Vytvorenie tela dokumentu Element <body> obsahuje všetok viditeľný obsah vašej webovej stránky – všetko, čo používatelia uvidia a s čím budú interagovať. Kým sekcia <head> poskytovala browseru inštrukcie, sekcia <body> obsahuje skutočný obsah: texty, obrázky, tlačidlá a iné prvky tvoriace používateľské rozhranie. Poďme pridať štruktúru tela a pochopiť, ako spolu HTML tagy vytvárajú zmysluplný obsah. ### Pochopenie štruktúry HTML tagu HTML používa párované tagy na definovanie prvkov. Väčšina tagov má otvárací tag ako <p> a zatvárací tag ako </p>, pričom medzi nimi je obsah: <p>Ahoj, svet!</p>. Tým sa vytvorí odsek obsahujúci text „Ahoj, svet!“. ### Úloha: Pridajte element <body> Aktualizujte svoj HTML súbor tak, aby obsahoval <body> element: Čo táto kompletná štruktúra poskytuje: - Zavádza základný rámec HTML5 dokumentu - Zahŕňa dôležité metaúdaje pre správne renderovanie v prehliadači - Vytvára prázdne telo pripravené na váš viditeľný obsah - Nasleduje najlepšie postupy moderného webového vývoja Teraz ste pripravení pridať viditeľné prvky vášho terária. Použijeme <div> elementy ako kontajnery na organizovanie rôznych sekcií obsahu a <img> prvky na zobrazenie obrázkov rastlín. ### Práca s obrázkami a rozloženiami kontajnerov Obrázky sú v HTML špeciálne, pretože používajú „samozatváracie“ tagy. Na rozdiel od prvkov ako <p></p>, ktoré obklopujú obsah, <img> tag obsahuje všetky potrebné informácie priamo v tagu pomocou atribútov ako src pre cestu k obrázku a alt pre prístupnosť. Pred pridaním obrázkov do vášho HTML budete potrebovať správne usporiadať svoje projektové súbory vytvorením priečinka images a pridaním grafík rastlín. Najprv pripravte obrázky: 1. Vytvorte v priečinku terária zložku s názvom images 2. Stiahnite si obrázky rastlín z riešiteľskej zložky (14 obrázkov rastlín) 3. Skopírujte všetky obrázky rastlín do novej zložky images ### Úloha: Vytvorte rozloženie zobrazenia rastlín Teraz pridajte obrázky rastlín usporiadané do dvoch stĺpcov medzi značky <body></body>: Krok za krokom, čo tento kód robí: - Vytvára hlavný kontajner stránky s id="page" na držanie všetkého obsahu - Zavádza dva stĺpcové kontajnery: left-container a right-container - Usporiadava 7 rastlín v ľavom stĺpci a 7 rastlín v pravom stĺpci - Obklopuje každý obrázok rastliny do plant-holder divu pre individuálne umiestnenie - Používa jednotné názvy tried pre CSS štýlovanie v ďalšej lekcii - Priraďuje jedinečné ID ku každému obrázku rastliny pre neskoršiu interakciu s JavaScriptom - Zahŕňa správne cesty k súborom smerujúcim do priečinka s obrázkami ### 🔄 Pedagogická kontrola Pochopenie štruktúry: Venujte chvíľu kontrole vašej HTML štruktúry: - ✅ Dokážete identifikovať hlavné kontajnery vo vašom rozložení? - ✅ Rozumiete, prečo má každý obrázok jedinečné ID? - ✅ Ako by ste opísali účel divov plant-holder? Vizuálna kontrola: Otvorte váš HTML súbor v prehliadači. Mali by ste vidieť: - Základný zoznam obrázkov rastlín - Obrázky usporiadané do dvoch stĺpcov - Jednoduché, nestajlované rozloženie Pamätajte: Tento jednoduchý vzhľad je presne to, ako má HTML vyzerať pred štýlovaním CSS! S týmto markupom sa rastliny zobrazia na obrazovke, hoci ešte nebudú vyzerať upravene – na to je v ďalšej lekcii CSS! Zatiaľ máte pevný HTML základ, ktorý správne organizuje váš obsah a nasleduje najlepšie prístupy k prístupnosti. ## Použitie sémantického HTML pre prístupnosť Sémantické HTML znamená vyberať HTML prvky na základe ich významu a účelu, nie len vzhľadu. Keď používate sémantické značenie, komunikujete štruktúru a význam vášho obsahu pre prehliadače, vyhľadávače a asistenčné technológie ako čítačky obrazovky. Tento prístup robí vaše weby prístupnejšími pre používateľov so zdravotným postihnutím a pomáha vyhľadávačom lepšie porozumieť vášmu obsahu. Je to základný princíp moderného webového vývoja, ktorý vytvára lepšie zážitky pre každého. ### Pridanie sémantického názvu stránky Pridajme správne nadpisy vašej stránke terária. Vložte tento riadok hneď za otváraciu značku <body>: Prečo je sémantické značenie dôležité: - Pomáha čítačkám obrazovky navigovať a pochopiť štruktúru stránky - Zlepšuje SEO tým, že objasňuje hierarchiu obsahu - Zvyšuje prístupnosť pre používateľov so zrakovým postihnutím alebo kognitívnymi rozdielmi - Vytvára lepšie používateľské zážitky na všetkých zariadeniach a platformách - Dodržiava webové štandardy a najlepšie postupy pre profesionálny vývoj Príklady sémantických vs nesémantických volieb: ## Vytvorenie kontajnera terária Teraz pridajme HTML štruktúru samotného terária – skleneného kontajnera, kam budú rastliny nakoniec umiestnené. Táto sekcia ukazuje dôležitý koncept: HTML poskytuje štruktúru, ale bez CSS štýlových úprav tieto prvky ešte nebudú viditeľné. Teráriový markup používa popisné názvy tried, ktoré umožnia intuitívne a udržateľné CSS štýlovanie v ďalšej lekcii. ### Úloha: Pridajte štruktúru terária Vložte tento markup nad poslednú značku </div> (pred zatváracou značkou kontajnera stránky): Čo táto štruktúra terária zabezpečuje: - Vytvára hlavný kontajner terária s jedinečným ID pre štýlovanie - Definuje samostatné prvky pre každú vizuálnu zložku (vrch, steny, zemina, spodok) - Zahŕňa vnorené prvky pre efekty zrkadlenia skla (lesklé prvky) - Používa popisné názvy tried, ktoré jasne indikujú účel každého prvku - Pripravuje štruktúru pre CSS štýlovanie, ktoré vytvorí vzhľad skleneného terária ### 🔄 Pedagogická kontrola Majstrovstvo HTML štruktúry: Predtým, než pôjdete ďalej, uistite sa, že viete: - ✅ Vysvetliť rozdiel medzi HTML štruktúrou a vizuálnym vzhľadom - ✅ Rozlíšiť sémantické vs. nesémantické HTML prvky - ✅ Opísať, aký prínos má správny markup pre prístupnosť - ✅ Rozpoznať kompletnú stromovú štruktúru dokumentu Testovanie vášho porozumenia: Skúste otvoriť svoj HTML súbor v prehliadači s vypnutým JavaScriptom a bez CSS. Ukáže vám to čistú sémantickú štruktúru, ktorú ste vytvorili! --- ## Výzva GitHub Copilot agenta Použite režim Agenta na splnenie nasledujúcej výzvy: Popis: Vytvorte sémantickú HTML štruktúru sekcie s návodom na starostlivosť o rastliny, ktorú by ste mohli pridať do projektu terária. Úloha: Vytvorte sémantickú HTML sekciu, ktorá obsahuje hlavný nadpis "Návod na starostlivosť o rastliny", tri podsekcie s nadpismi "Zalievanie", "Požiadavky na svetlo" a "Starostlivosť o pôdu", z ktorých každá obsahuje odsek s informáciami o starostlivosti o rastliny. Použite správne sémantické HTML tagy ako <section>, <h2>, <h3>, a <p> na vhodnú štruktúru obsahu. Viac sa dozviete o režime agenta tu. ## Výzva o histórii HTML Učenie sa o vývoji webu HTML sa výrazne vyvíjalo od čias, keď Tim Berners-Lee vytvoril prvý webový prehliadač v CERN v roku 1990. Niektoré staršie tagy ako <marquee> sú dnes zastarané, pretože nevyhovujú moderným štandardom prístupnosti a princípom responzívneho dizajnu. Vyskúšajte tento experiment: 1. Dočasne zabaľte svoj <h1> titulok do tagu <marquee>: <marquee><h1>Moje terárium</h1></marquee> 2. Otvorte stránku v prehliadači a pozorujte efekt posúvania 3. Zamyslite sa, prečo bol tento tag zastaraný (nápoveda: zamyslite sa nad užívateľskou skúsenosťou a prístupnosťou) 4. Odstráňte tag <marquee> a vráťte sa k sémantickému markup-u Reflexné otázky: - Ako by mohol titulok pohybujúci sa posúvaním ovplyvniť užívateľov so zrakovým postihnutím alebo citlivosťou na pohyb? - Aké moderné CSS techniky môžu dosiahnuť podobné vizuálne efekty s lepšou prístupnosťou? - Prečo je dôležité používať aktuálne webové štandardy namiesto zastaraných prvkov? Preskúmajte viac o zastaraných a nepoužívaných HTML prvkoch, aby ste pochopili, ako sa vyvíjajú webové štandardy na zlepšenie užívateľskej skúsenosti. ## Kvíz po prednáške Kvíz po prednáške ## Revízia a samostatné štúdium Prehĺbte si vedomosti o HTML HTML je základom webu už vyše 30 rokov, vyvíjal sa od jednoduchého jazyka pre značkovanie dokumentov po sofistikovanú platformu na vytváranie interaktívnych aplikácií. Pochopenie tohto vývoja vám pomôže lepšie si vážiť moderné webové štandardy a robiť lepšie vývojárske rozhodnutia. Odporúčané učebné cesty: 1. História a vývoj HTML - Preskúmajte časovú os od HTML 1.0 po HTML5 - Preskúmajte, prečo boli niektoré tagy zastarané (prístupnosť, mobilná priateľskosť, udržiavateľnosť) - Skúmajte nové HTML funkcie a návrhy 2. Hlboký ponor do sémantického HTML - Študujte kompletný zoznam sémantických prvkov HTML5 - Precvičujte rozpoznávanie, kedy použiť <article>, <section>, <aside>, a <main> - Naučte sa o ARIA atribútoch pre zlepšenú prístupnosť 3. Moderný webový vývoj - Preskúmajte budovanie responzívnych webov na Microsoft Learn - Pochopte integráciu HTML s CSS a JavaScriptom - Naučte sa o výkone webu a najlepších praktikách SEO Reflexné otázky: - Aké zastarané HTML tagy ste objavili a prečo boli odstránené? - Aké nové HTML funkcie sú navrhované do budúcich verzií? - Ako sémantické HTML prispieva k prístupnosti webu a SEO? ### ⚡ Čo môžete urobiť nasledujúcich 5 minút - [ ] Otvorte DevTools (F12) a preskúmajte HTML štruktúru vášho obľúbeného webu - [ ] Vytvorte jednoduchý HTML súbor so základnými tagmi: <h1>, <p>, a <img> - [ ] Overte svoje HTML pomocou online validátora W3C HTML Validator - [ ] Skúste pridať komentár do HTML pomocou <!-- komentár --> ### 🎯 Čo môžete dosiahnuť v tomto hodine - [ ] Dokončite kvíz po lekcii a prejdite si sémantické HTML pojmy - [ ] Vytvorte jednoduchú webovú stránku o sebe používajúc správnu HTML štruktúru - [ ] Experimentujte s rôznymi úrovňami nadpisov a tagmi na formátovanie textu - [ ] Pridajte obrázky a odkazy pre prax multimediálnej integrácie - [ ] Preskúmajte HTML5 funkcie, ktoré ste ešte neskúsili ### 📅 Vaša týždenná cesta HTML - [ ] Dokončite zadanie projektu terária so sémantickým markup-om - [ ] Vytvorte prístupnú webovú stránku s ARIA štítkami a rolami - [ ] Precvičujte tvorbu formulárov s rôznymi typmi vstupov - [ ] Preskúmajte HTML5 API ako localStorage alebo geolokáciu - [ ] Študujte responzívne HTML vzory a mobile-first dizajn - [ ] Prezrite si HTML kód iných vývojárov pre najlepšie praktiky ### 🌟 Vaša mesačná webová základňa - [ ] Vytvorte portfólio webovú stránku prezentujúcu vaše HTML majstrovstvo - [ ] Naučte sa HTML templating s frameworkom ako Handlebars - [ ] Prispievajte do open source projektov zlepšením HTML dokumentácie - [ ] Osvojte si pokročilé HTML koncepty ako vlastné elementy - [ ] Integrujte HTML s CSS frameworkami a JavaScript knižnicami - [ ] Mentorujte iných, ktorí sa učia základy HTML ## 🎯 Váš časový plán majstrovstva HTML ### 🛠️ Súhrn vášho HTML nástroja Po dokončení tejto lekcie máte: - Štruktúru dokumentu: Komplexný základ HTML5 so správnym DOCTYPE - Sémantický markup: Významné tagy, ktoré zlepšujú prístupnosť a SEO - Integráciu obrázkov: Správna organizácia súborov a použitie alt textov - Rozloženie kontajnerov: Strategické použitie divov s popisnými názvami tried - Povedomie o prístupnosti: Pochopenie navigácie pre čítačky obrazovky - Moderné štandardy: Aktuálne praktiky HTML5 a znalosť zastaraných tagov - Základ pre projekt: Pevný základ pre CSS štýlovanie a JavaScript interaktivitu Ďalšie kroky: Vaša HTML štruktúra je pripravená na CSS štýlovanie! Sémantický základ, ktorý ste vytvorili, výrazne uľahčí pochopenie ďalšej lekcie. ## Zadanie Precvičte si HTML: Vytvorte maketu blogu --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Zrieknutie sa zodpovednosti: Tento dokument bol preložený pomocou AI prekladateľskej služby Co-op Translator. Hoci sa snažíme o presnosť, vezmite prosím na vedomie, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Originálny dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne výklady vyplývajúce z použitia tohto prekladu. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Project Časť 2: Úvod do CSS
Pamätáš si, ako tvoje HTML terárium vyzeralo celkom jednoducho? CSS je miesto, kde túto základnú štruktúru premeníme na niečo vizuálne príťažlivé. Ak je HTML ako stavba rámu domu, tak CSS je všetko, čo robí, že dom pôsobí ako domov – farby na stene, usporiadanie nábytku, osvetlenie a tok miestností. Predstav si, ako sa z poľovníckej chaty stal Palác vo Versailles, ale dôkladná pozornosť dekoráciám a usporiadaniu ho premenila na jednu z najúžasnejších budov na svete. Dnes premeníme tvoje terárium z funkčného na vycibrené. Naučíš sa, ako presne umiestniť prvky, ako reagovať na rôzne veľkosti obrazoviek a vytvoriť vizuálnu príťažlivosť, ktorá robí weby pútavými. Na konci tejto lekcie uvidíš, ako strategické CSS štýlovanie môže dramaticky zlepšiť tvoj projekt. Poďme pridať trochu štýlu do tvojho terária. ## Prednáškový kvíz Prednáškový kvíz ## Začíname s CSS CSS sa často vníma len ako „urobenie vecí peknými“, ale slúži omnoho širšiemu účelu. CSS je ako režisér filmu – ovládaš nielen vzhľad všetkého, ale aj pohyb, reakciu na interakcie a prispôsobenie sa rôznym situáciám. Moderné CSS je neuveriteľne schopné. Môžeš písať kód, ktorý automaticky upraví rozloženie pre telefóny, tablety a stolné počítače. Môžeš vytvárať hladké animácie, ktoré vedú pozornosť používateľov tam, kde je treba. Výsledky môžu byť veľmi pôsobivé, keď všetko spolu funguje. Toto dosiahneme v tejto lekcii: - Vytvoríme kompletný vizuálny dizajn terária pomocou moderných CSS techník - Preskúmame základné koncepty ako kaskáda, dedičnosť a CSS selektory - Implementujeme responzívne umiestňovanie a stratégie rozloženia - Postavíme kontajner terária použitím CSS tvarov a štýlovania ### Predpoklad Mal by si mať dokončenú HTML štruktúru tvojho terária z predchádzajúcej lekcie, pripravenú na štýlovanie. ### Nastavenie súboru CSS Predtým, než začneme so štýlovaním, musíme prepojiť CSS s naším HTML. Toto prepojenie povie prehliadaču, kde nájsť inštrukcie pre štýlovanie nášho terária. V priečinku terária vytvor nový súbor s názvom style.css a potom ho prepoj v sekcii <head> HTML dokumentu: Tento kód robí: - Vytvára prepojenie medzi HTML a CSS súbormi - Povie prehliadaču, aby načítal a aplikoval štýly zo súboru style.css - Používa atribút rel="stylesheet" pre špecifikáciu, že ide o CSS súbor - Odkazuje na cestu súboru cez href="./style.css" ## Pochopenie CSS kaskády Niekedy si sa zamýšľal, prečo sa CSS volá „kaskádové štýly“? Štýly padajú ako vodopád a niekedy sa navzájom prekrývajú. Predstav si vojenskú štruktúru velenia – generálny rozkaz môže znieť „všetci vojaci majú nosiť zelenú“, ale konkrétny rozkaz pre tvoju jednotku povie „na ceremónii noste modrú uniformu“. Platí konkrétnejší príkaz. CSS nasleduje podobnú logiku a jej pochopenie uľahčuje ladenie. ### Experimentovanie s prioritou kaskády Pozrime sa na kaskádu v praxi vytvorením konfliktu štýlov. Najprv pridaj inline štýl do svojho tagu <h1>: Čo tento kód robí: - Aplikuje priamo červenú farbu na element <h1> pomocou inline štýlu - Používa atribút style, ktorý vkladá CSS priamo do HTML - Vytvára najvyššiu prioritu štýlu pre tento konkrétny element Potom pridaj toto pravidlo do súboru style.css: V tomto sme: - Definovali CSS pravidlo, ktoré cieli na všetky elementy <h1> - Nastavili farbu textu na modrú cez externý stylesheet - Vytvorili pravidlo s nižšou prioritou v porovnaní s inline štýlmi ✅ Kontrola znalostí: Ktorá farba sa zobrazí v tvojom webe? Prečo táto farba vyhráva? Vieš si predstaviť situácie, kedy by si chcel štýly prepísať? ## CSS dedičnosť v praxi CSS dedičnosť funguje ako genetika – elementy zdedia určité vlastnosti od svojich rodičovských elementov. Ak nastavíš písmo pre element <body>, všetok text v ňom automaticky používa toto písmo. Podobne ako u Habsburgovcov sa výrazná brada dedila z generácie na generáciu bez potreby špecifikovať ju pre každého jednotlivca. Nie však všetko sa dedí. Štýly textu ako písmo a farby sa dedia, ale vlastnosti rozloženia ako okraje a rámiky nie. Rovnako ako deti môžu dediť telesné črty, ale nie módne voľby rodičov. ### Pozorovanie dedičnosti písiem Pozrime sa na dedičnosť v praxi nastavením písma na element <body>: Čo sa tu deje: - Nastavuje rodinu písma pre celú stránku cez element <body> - Používa font stack s náhradnými možnosťami pre lepšiu kompatibilitu s prehliadačmi - Aplikuje moderné systémové písma, ktoré vyzerajú dobre na rôznych operačných systémoch - Zabezpečuje, že všetky podriadene elementy zdedia toto písmo, ak nie je doslovne prepísané Otvori si nástroje pre vývojárov v prehliadači (F12), prejdí do záložky Elements a pozri si element <h1>. Uvidíš, že zdedil rodinu písma z body: ✅ Čas na experiment: Skús nastaviť na <body> iné dedičné vlastnosti ako color, line-height alebo text-align. Čo sa stane s nadpisom a ďalšími elementmi? ### 🔄 Pedagogická kontrola Pochopenie základov CSS: Pred prechodom na selektory over, či: - ✅ Vieš vysvetliť rozdiel medzi kaskádou a dedičnosťou - ✅ Vieš predpovedať, ktorý štýl vyhrá pri konflikte špecificity - ✅ Dokážeš identifikovať, ktoré vlastnosti sa dedia od rodičovských elementov - ✅ Vieš správne prepojiť CSS súbory s HTML Rýchly test: Ak máš tieto štýly, akou farbou bude <h1> vo vnútri <div class="special">? Odpoveď: Červená (element selektor cieli priamo na h1) ## Ovládanie CSS selektorov CSS selektory sú spôsob, ako cieliť na konkrétne elementy pre štýlovanie. Fungujú ako presné pokyny – namiesto "ten dom" povieš "ten modrý dom s červenými dverami na Maple Street". CSS poskytuje rôzne spôsoby, ako byť špecifický, a vybrať správny selektor je ako vybrať vhodný nástroj pre prácu. Niekedy musíš štýlovať všetky dvere v štvrti, inokedy len tie konkrétne. ### Element selektory (tagy) Element selektory cielia na HTML elementy podľa ich názvu tagu. Sú ideálne na nastavenie základných štýlov, ktoré sa použijú naprieč stránkou: Čo tieto štýly znamenajú: - Nastavujú konzistentnú typografiu cez celú stránku pomocou selektora body - Odstraňujú predvolené okraje a výplne pre lepšiu kontrolu - Štýlujú všetky nadpisy farbou, zarovnaním a medzerami - Používajú jednotky rem pre škálovateľnú, prístupnú veľkosť písma Hoci element selektory skvele poslúžia pre všeobecné štýlovanie, pre štýlovanie individuálnych súčastí ako rastliny v teráriu budeš potrebovať konkrétnejšie selektory. ### ID selektory pre jedinečné elementy ID selektory používajú symbol # a cielia na elementy so špecifickým atribútom id. Keďže ID musí byť unikátne na stránke, sú ideálne na štýlovanie jednotlivých špeciálnych prvkov, ako sú naše bočné kontajnery na rastliny. Vytvorme štýly pre bočné kontajnery terária, kde budú rastliny: Čo tento kód robí: - Umiestňuje kontajnery na úplné ľavé a pravé okraje pomocou absolute pozicionovania - Používa jednotky vh (viewport height) pre responzívnu výšku, ktorá sa prispôsobuje veľkosti obrazovky - Aplikuje box-sizing: border-box, aby sa padding započítaval do celkovej šírky - Odstraňuje nepotrebné jednotky px pri nulových hodnotách pre čistejší kód - Nastavuje jemné pozadie, ktoré je príjemnejšie na oči než ostrá sivá ✅ Výzva na kvalitu kódu: Všimni si, že toto CSS porušuje princíp DRY (Don't Repeat Yourself). Vieš ho refaktorovať pomocou ID aj triedy? Lepší prístup: ### Triedové selektory pre znovupoužiteľné štýly Triedové selektory používajú symbol . a sú vhodné, keď chceš rovnaké štýly aplikovať na viaceré elementy. Na rozdiel od ID sa triedy môžu používať viackrát v HTML, čo ich robí ideálnymi pre konzistentné štýly. V našom teráriu každá rastlina potrebuje podobné štýly, ale aj individuálne umiestnenie. Použijeme kombináciu tried pre spoločné štýly a ID pre jedinečné pozície. Tu je HTML štruktúra pre každú rastlinu: Vysvetlenie kľúčových prvkov: - Používa class="plant-holder" pre konzistentné štýlovanie kontajnerov všetkých rastlín - Aplikuje class="plant" pre spoločné štýly obrázkov a správanie - Zahŕňa jedinečné id="plant1" pre individuálne pozicionovanie a interakciu s JavaScriptom - Poskytuje popisný alt text pre prístupnosť v čítačkách obrazovky Teraz pridaj tieto štýly do súboru style.css: Rozbor týchto štýlov: - Vytvára relatívne pozicionovanie pre držiak rastliny, ktorý slúži ako kontext pre pozicionovanie - Nastavuje výšku držiaka na 13 %, aby sa všetky rastliny zmestili vertikálne bez posúvania - Posúva držáky mierne doľava pre lepšie centrovanie rastlín v kontajneroch - Umožňuje rastlinám škálovať sa responzívne pomocou max-width a max-height - Používa z-index pre vrstvenie rastlín nad ostatnými prvkami terária - Pridáva jemný efekt pri najetí myšou pomocou CSS prechodov ✅ Kritické myslenie: Prečo potrebujeme obidva selektory .plant-holder a .plant? Čo by sa stalo, keby sme použili len jeden? ## Pochopenie CSS pozicionovania CSS pozicionovanie je ako režisér divadelnej hry – riadiš, kde každý herec stojí a ako sa pohybuje po pódiu. Niektorí herci nasledujú štandardné usporiadanie, iní vyžadujú špecifické pozície pre dramatický efekt. Keď pochopíš pozicionovanie, veľa problémov s rozložením sa stane zvládnuteľnými. Potrebuješ navigačný panel, ktorý zostáva navrchu, keď používateľ scrolluje? Pozicionovanie to vyrieši. Chceš tooltip, ktorý sa objaví na konkrétnom mieste? To je tiež pozicionovanie. ### Päť hodnôt pozície ### Pozicionovanie v našom teráriu Naše terárium používa strategickú kombináciu typov pozícií na vytvorenie požadovaného rozloženia: Porozumenie stratégii pozicionovania: - Absolútne kontajnery sú vyňaté z normálneho toku dokumentu a pripnuté na okraje obrazovky - Relatívne držiaky rastlín vytvárajú kontext pozicionovania a zároveň zostávajú v toku dokumentu - Absolútne rastliny môžu byť presne umiestnené vo svojich relatívnych kontajneroch - Táto kombinácia umožňuje rastlinám vrstviť sa vertikálne a zároveň ich individálne pozicovať ✅ Čas na experiment: Skús zmeniť hodnoty pozícií a pozoruj výsledky: - Čo sa stane, ak zmeníš .container z absolute na relative? - Ako sa zmení rozloženie, ak .plant-holder používa absolute namiesto relative? - Čo sa stane, keď zmeníte umiestnenie .plant na relative? ### 🔄 Pedagogická kontrola Mistrovstvo v CSS pozicionovaní: Zastavte sa a overte si svoje porozumenie: - ✅ Viete vysvetliť, prečo rastliny potrebujú absolútne pozicionovanie pre drag-and-drop? - ✅ Rozumiete, ako relatívne kontajnery vytvárajú kontext pozicionovania? - ✅ Prečo používajú bočné kontajnery absolútne pozicionovanie? - ✅ Čo by sa stalo, keby ste úplne odstránili deklarácie pozície? Spojenie so skutočným svetom: Premýšľajte o tom, ako CSS pozicionovanie odráža skutočné rozloženie: - Static: Knihy na poličke (prirodzený poriadok) - Relative: Posun knihy mierne, ale zachovať jej miesto - Absolute: Umiestniť záložku na presné číslo stránky - Fixed: Lepiaci papierik, ktorý zostáva viditeľný pri prepínaní strán ## Stavba terária s CSS Teraz vytvoríme sklenenú nádobu len pomocou CSS - bez obrázkov alebo grafického softvéru. Vytváranie realisticky vyzerajúceho skla, tieňov a hĺbkových efektov pomocou pozicionovania a priehľadnosti demonštruje vizuálne možnosti CSS. Táto technika imituje, ako architekti v hnutí Bauhaus používali jednoduché geometrické tvary na vytvorenie komplexných, krásnych štruktúr. Ak pochopíte tieto princípy, spoznáte CSS techniky použitá v mnohých webových dizajnoch. ### Vytváranie komponentov sklenenej nádoby Postavme terárium kúsok po kúsku. Každá časť používa absolútne pozicionovanie a veľkosti založené na percentách pre responzívny dizajn: Pochopenie konštrukcie terária: - Používa rozmery založené na percentách pre responzívne škálovanie na všetkých typoch obrazoviek - Pozicionuje elementy absolútne na presné zarovnanie a vrstvenie - Aplikuje rôzne hodnoty priehľadnosti pre efekt skla - Implementuje vrstvenie cez z-index tak, aby rastliny boli vo vnútri nádoby - Pridáva jemný tieň a zaoblené rohy pre realistickejší vzhľad ### Responzívny dizajn pomocou percent Všimnite si, že všetky rozmery používajú percentá namiesto pevných pixelov: Prečo je to dôležité: - Zaisťuje, že terárium sa pomerne škáluje na akejkoľvek veľkosti obrazovky - Udržiava vzťahy medzi komponentmi nádoby vizuálne konzistentné - Poskytuje konzistentný zážitok od mobilov po veľké monitory - Umožňuje dizajnu adaptovať sa bez narušenia vzhľadu ### Jednotky CSS v praxi Používame jednotky rem pre zaoblenie rohov, ktoré sú relatívne k veľkosti písma koreňového elementu. To vytvára prístupnejšie dizajny rešpektujúce používateľské nastavenia písma. Viac o relatívnych CSS jednotkách v oficiálnej špecifikácii. ✅ Vizualna experimentácia: Skúste zmeniť tieto hodnoty a pozorujte efekty: - Zmeňte priehľadnosť nádoby z 0.5 na 0.8 – ako to ovplyvní vzhľad skla? - Upraviť farbu pôdy z #3a241d na #8B4513 – aký vizuálny dopad to má? - Zmeniť z-index pôdy na 2 – čo sa stane s vrstvením? ### 🔄 Pedagogická kontrola Porozumenie vizuálnemu CSS dizajnu: Overte si svoje znalosti o vizuálnom CSS: - ✅ Ako percentuálne rozmery vytvárajú responzívny dizajn? - ✅ Prečo priehľadnosť vytvára efekt sklenenej transparentnosti? - ✅ Akú úlohu zohráva z-index pri vrstvení elementov? - ✅ Ako hodnoty border-radius tvoria tvar nádoby? Dizajnový princíp: Všimnite si, ako budujeme zložité vizuály zo základných tvarov: 1. Obdĺžniky → Zaoblené obdĺžniky → Komponenty nádoby 2. Ploché farby → Priehľadnosť → Efekt skla 3. Jednotlivé elementy → Vrstvená kompozícia → 3D vzhľad --- ## Výzva GitHub Copilot Agenta 🚀 Použite režim Agenta na splnenie nasledujúcej výzvy: Popis: Vytvorte CSS animáciu, ktorá jemne kýva rastlinami v teráriu tam a späť, simulujúc prirodzený vánok. Pomôže vám to precvičiť CSS animácie, transformácie a kľúčové snímky a zároveň zvýši vizuálnu príťažlivosť terária. Zadanie: Pridajte CSS keyframe animácie tak, aby rastliny v teráriu jemne kývali z jednej na druhú stranu. Vytvorte kývavú animáciu, ktorá rotuje každú rastlinu mierne (2-3 stupne) doľava a doprava s trvaním 3-4 sekundy, a aplikujte ju na triedu .plant. Animácia by mala bežať nekonečne a mať easing funkciu pre prirodzený pohyb. Viac o režime agenta sa dozviete tu. ## 🚀 Výzva: Pridanie odrazov na skle Ste pripravení vylepšiť svoj terárium realistickými odrazmi skla? Táto technika pridá hĺbku a realizmus dizajnu. Vytvoríte jemné svetlé zvýraznenia, ktoré simulujú, ako sa svetlo odráža od sklenených plôch. Tento prístup je podobný tomu, ako renesanční maliari ako Jan van Eyck používali svetlo a odraz na vytvorenie trojrozmerného dojmu maľovaného skla. Tu je cieľ: Vaša výzva: - Vytvorte jemné biele alebo svetlé oválne tvary pre odrazy skla - Umiestnite ich strategicky na ľavý bok nádoby - Aplikujte vhodnú priehľadnosť a rozostrenie pre realistický odraz svetla - Použite border-radius na vytvorenie organických, bublinových tvarov - Experimentujte s gradientmi alebo tieňmi pre lepší realizmus ## Kvíz po prednáške Kvíz po prednáške ## Rozšírte svoje znalosti CSS CSS môže spočiatku pôsobiť zložito, ale pochopenie týchto základných konceptov poskytuje pevný základ pre pokročilejšie techniky. Vaše ďalšie oblasti učenia: - Flexbox - zjednodušuje zarovnanie a rozloženie elementov - CSS Grid - poskytuje mocné nástroje na tvorbu komplexných rozložení - CSS premenné - znižujú opakovanie a zlepšujú udržiavateľnosť - Responzívny dizajn - zaistí, že stránky fungujú na rôznych veľkostiach obrazoviek ### Interaktívne učebné zdroje Precvičujte tieto koncepty zábavnou formou: - 🐸 Flexbox Froggy - Ovládnite Flexbox pomocou zábavných výziev - 🌱 Grid Garden - Naučte sa CSS Grid pestovaním virtuálnych mrkiev - 🎯 CSS Battle - Otestujte svoje CSS schopnosti v programovacích výzvach ### Ďalšie učenie Pre komplexné základy CSS dokončite tento modul Microsoft Learn: Štýlujte svoju HTML aplikáciu pomocou CSS ### ⚡ Čo môžete spraviť v ďalších 5 minútach - [ ] Otvorte DevTools a preskúmajte CSS štýly na ľubovoľnej webovej stránke v panely Elements - [ ] Vytvorte jednoduchý CSS súbor a pripojte ho k HTML stránke - [ ] Skúste meniť farby rôznymi spôsobmi: hex, RGB a pomenované farby - [ ] Precvičte model boxu pridaním paddingu a marginu k divu ### 🎯 Čo môžete dosiahnuť počas tejto hodiny - [ ] Dokončiť kvíz po lekcii a zopakovať základy CSS - [ ] Naštýlovať svoju HTML stránku pomocou fontov, farieb a medzier - [ ] Vytvoriť jednoduché rozloženie s flexboxom alebo gridom - [ ] Experimentovať s CSS prechodmi pre plynulé efekty - [ ] Precvičiť responzívny dizajn s media queries ### 📅 Vaša týždňová CSS výzva - [ ] Dokončiť úlohu štýlovania terária s kreatívnym prístupom - [ ] Ovládnuť CSS Grid vytvorením layoutu fotogalérie - [ ] Naučiť sa CSS animácie na oživenie vašich dizajnov - [ ] Preskúmať CSS preprocessory ako Sass alebo Less - [ ] Študovať dizajnové princípy a aplikovať ich v CSS - [ ] Analyzovať a znovu vytvoriť zaujímavé dizajny z internetu ### 🌟 Vaša mesačná cesta k dizajnovému majstrovstvu - [ ] Vybudovať kompletný responzívny systém webdizajnu - [ ] Naučiť sa CSS-in-JS alebo utility-first frameworky ako Tailwind - [ ] Prispievať do open source projektov vylepšeniami CSS - [ ] Ovládnuť pokročilé CSS koncepty ako vlastné vlastnosti a containment - [ ] Vytvárať znovupoužiteľné knižnice komponentov s modulárnym CSS - [ ] Mentorovať ďalších študentov CSS a zdieľať dizajnové vedomosti ## 🎯 Vaša časová os majstrovstva CSS ### 🛠️ Zhrnutie vašej CSS súpravy nástrojov Po dokončení tejto lekcie teraz ovládate: - Pochopenie kaskády: Ako štýly dedia a prekrývajú sa navzájom - Majstrovstvo selektorov: Presné cielenie na elementy, triedy a ID - Zručnosti pozicionovania: Strategické umiestňovanie a vrstvenie elementov - Vizuálny dizajn: Vytváranie sklenených efektov, tieňov a priehľadnosti - Responzívne techniky: Rozloženia založené na percentách, ktoré sa prispôsobujú obrazovke - Organizácia kódu: Čistá a udržiavateľná CSS štruktúra - Moderné praktiky: Používanie relatívnych jednotiek a prístupných dizajnových vzorov Ďalšie kroky: Vaše terárium má teraz štruktúru (HTML) aj štýl (CSS). Záverečná lekcia pridá interaktivitu pomocou JavaScriptu! ## Úloha Refaktoring CSS --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Zrieknutie sa zodpovednosti: Tento dokument bol preložený pomocou AI prekladateľskej služby Co-op Translator. Aj keď sa snažíme o presnosť, majte prosím na pamäti, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu nenesieme zodpovednosť. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Project Part 1: Uvod v HTML
HTML oziroma HyperText Markup Language je temelj vsake spletne strani, ki ste jo kdaj obiskali. HTML si predstavljajte kot ogrodje, ki daje strukturo spletnim stranem – določa, kam gre vsebina, kako je organizirana in kaj vsak del predstavlja. Medtem ko bo CSS kasneje "oblekel" vaš HTML z barvami in postavitvami, bo JavaScript prinesel interaktivnost, HTML pa zagotavlja osnovno strukturo, ki omogoča vse ostalo. V tej lekciji boste ustvarili HTML strukturo za vmesnik virtualnega terarija. Ta praktični projekt vas bo naučil osnovnih pojmov HTML, hkrati pa boste zgradili nekaj vizualno zanimivega. Naučili se boste organizirati vsebino z uporabo semantičnih elementov, delati s slikami in ustvariti osnovo za interaktivno spletno aplikacijo. Na koncu te lekcije boste imeli delujočo HTML stran, ki prikazuje slike rastlin v urejenih stolpcih, pripravljeno za oblikovanje v naslednji lekciji. Ne skrbite, če bo videti osnovno – tako mora HTML izgledati, preden mu CSS doda vizualno dovršenost. ## Predpredavalni kviz Predpredavalni kviz ## Nastavitev vašega projekta Preden se poglobimo v HTML kodo, si uredimo primerno delovno okolje za vaš terarijski projekt. Ustvarjanje organizirane strukture datotek že od začetka je ključna navada, ki vam bo koristila skozi celotno pot spletnega razvoja. ### Naloga: Ustvarite strukturo projekta Ustvarili boste namensko mapo za vaš terarijski projekt in dodali prvo HTML datoteko. Tukaj sta dva načina, ki ju lahko uporabite: Možnost 1: Uporaba Visual Studio Code 1. Odprite Visual Studio Code 2. Kliknite "File" → "Open Folder" ali uporabite Ctrl+K, Ctrl+O (Windows/Linux) ali Cmd+K, Cmd+O (Mac) 3. Ustvarite novo mapo z imenom terrarium in jo izberite 4. V Explorer oknu kliknite na ikono "New File" 5. Vaši datoteki dajte ime index.html Možnost 2: Uporaba terminalskih ukazov Tukaj je, kaj ti ukazi naredijo: - Ustvari nov imenik z imenom terrarium za vaš projekt - Pojde v mapo terrarium - Ustvari prazno datoteko index.html - Odpre datoteko za urejanje v Visual Studio Code ## Razumevanje strukture HTML dokumenta Vsak HTML dokument sledi določeni strukturi, ki jo brskalniki potrebujejo, da jo pravilno razumejo in prikažejo. Ta struktura je kot uradno pismo – ima obvezne elemente v določenem vrstnem redu, ki pomagajo prejemniku (v tem primeru brskalniku) pravilno obdelati vsebino. Začnimo z dodajanjem bistvene osnove, ki jo potrebuje vsak HTML dokument. ### Deklaracija DOCTYPE in korenski element Prvi dve vrstici katere koli HTML datoteke služita kot "uvod" dokumenta brskalniku: Razumevanje, kaj ta koda počne: - Deklarira tip dokumenta kot HTML5 z <!DOCTYPE html> - Ustvari korenski element <html>, ki bo vseboval vso vsebino strani - Vzpostavi moderne spletne standarde za pravilno upodabljanje v brskalniku - Zagotovi dosleden prikaz v različnih brskalnikih in na napravah ### 🔄 Pedagoški pregled Pavza in premislek: Pred nadaljevanjem se prepričajte, da razumete: - ✅ Zakaj vsak HTML dokument potrebuje DOCTYPE deklaracijo - ✅ Kaj vsebuje korenski element <html> - ✅ Kako ta struktura pomaga brskalnikom pravilno upodabljati strani Hitri samopreizkus: Ali lahko z lastnimi besedami razložite, kaj pomeni "uporabljanje standardom skladnega upodabljanja"? ## Dodajanje bistvenih metapodatkov dokumenta Odsek <head> v HTML dokumentu vsebuje ključne informacije, ki jih brskalniki in iskalniki potrebujejo, vendar jih obiskovalci neposredno ne vidijo na strani. Predstavljajte si ga kot "zakulisne informacije", ki pomagajo, da vaša spletna stran deluje pravilno in se pravilno prikazuje na različnih napravah in platformah. Ti metapodatki brskalnikom povedo, kako prikazati vašo stran, katero kodiranje znakov uporabiti in kako ravnati z različnimi velikostmi zaslona – vse pomembno za ustvarjanje profesionalnih in dostopnih spletnih strani. ### Naloga: Dodajte glavo dokumenta Vstavite ta odsek <head> med uvodne in zaključne oznake <html>: Podrobnejša razlaga, kaj vsak element naredi: - Nastavi naslov strani, ki se pojavi na zavihkih brskalnika in v iskalnikih - Specifikira kodiranje znakov UTF-8 za pravilen prikaz besedila po vsem svetu - Zagotovlja združljivost z modernimi različicami Internet Explorerja - Nastavi odzivno zasnovo z usklajevanjem viewporta z širino naprave - Nadzoruje začetno stopnjo povečave za naraven prikaz vsebine ## Gradnja telesa dokumenta Element <body> vsebuje vso vidno vsebino vaše spletne strani – vse, kar bodo uporabniki videli in s čimer bodo interagirali. Medtem ko je odsek <head> dal brskalniku navodila, vsebuje <body> dejansko vsebino: besedilo, slike, gumbe in druge elemente, ki oblikujejo vaš uporabniški vmesnik. Dodajmo strukturo telesa in razumimo, kako HTML oznake skupaj delujejo za ustvarjanje smiselne vsebine. ### Razumevanje strukture HTML oznak HTML uporablja pari oznak za definiranje elementov. Večina oznak ima začetno oznako, npr. <p>, in končno oznako, npr. </p>, z vsebino med njima: <p>Hello, world!</p>. Tako ustvarijo odsek s tekstom "Hello, world!". ### Naloga: Dodajte element body Posodobite svojo HTML datoteko, da vključuje element <body>: Kaj ta popolna struktura zagotavlja: - Vzpostavi osnovno ogrodje HTML5 dokumenta - Vključuje bistvene metapodatke za pravilno upodabljanje v brskalniku - Ustvari prazno telo, pripravljeno za vašo vidno vsebino - Sledi najboljšim praksam sodobnega spletnega razvoja Zdaj ste pripravljeni dodati vidne elemente vašega terarija. Uporabili bomo elemente <div> kot posode za organizacijo različnih sekcij vsebine in elemente <img> za prikaz slik rastlin. ### Delo s slikami in posodami za postavitev Slike so v HTML posebne, saj uporabljajo samozapiralne oznake. V nasprotju z elementi, kot so <p></p>, ki obkrožajo vsebino, oznaka <img> vsebuje vse informacije znotraj same oznake preko atributov, kot sta src (pot do slikovne datoteke) in alt (za dostopnost). Preden dodate slike v svoj HTML, morate ustrezno organizirati datoteke projekta z ustvarjanjem mape za slike in dodajanjem grafike rastlin. Najprej uredite svoje slike: 1. V mapi terarij ustvarite mapo z imenom images 2. Prenesite slike rastlin iz mapo z rešitvijo (skupaj 14 slik rastlin) 3. Kopirajte vse slike rastlin v novo mapo images ### Naloga: Ustvarite postavitev prikaza rastlin Sedaj dodajte slike rastlin organizirane v dva stolpca med oznakama <body></body>: Korak za korakom, kaj se dogaja v tej kodi: - Ustvari glavni vsebnik strani z id="page" za vsebino - Vzpostavi dva stolpca: left-container in right-container - Organizira 7 rastlin v levem stolpcu in 7 rastlin v desnem stolpcu - Vsako sliko rastline obdaja div z razredom plant-holder za posamezno pozicioniranje - Uporablja enotna imena razredov za CSS oblikovanje v naslednji lekciji - Dodeli edinstvene ID-je za vsako sliko za kasnejšo interakcijo z JavaScriptom - Vsebuje pravilne poti do slikovne mape ### 🔄 Pedagoški pregled Razumevanje strukture: Vzemite trenutek in pregledajte svojo HTML strukturo: - ✅ Ali lahko identificirate glavne posode v vaši postavitvi? - ✅ Ali razumete, zakaj ima vsaka slika edinstven ID? - ✅ Kako bi opisali namen divov z razredom plant-holder? Vizualni pregled: Odprite HTML datoteko v brskalniku. Morali bi videti: - Osnovni seznam slik rastlin - Slike organizirane v dveh stolpcih - Preprosto, brez oblikovanja Zapomnite si: Ta osnovni videz je točno tisto, kar naj bi HTML izgledal pred CSS oblikovanjem! S tem označevanjem bodo rastline prikazane na zaslonu, čeprav še ne bodo izgledale urejeno – za to bo poskrbel CSS v naslednji lekciji! Za zdaj imate trdno HTML osnovo, ki ustrezno organizira vaše vsebine in sledi najboljšim praksam za dostopnost. ## Uporaba semantičnega HTML za dostopnost Semantični HTML pomeni izbiro elementov glede na njihov pomen in namen, ne samo na videz. Ko uporabljate semantično označevanje, sporočate strukturo in pomen vaše vsebine brskalnikom, iskalnikom in pripomočkom za pomoč, kot so bralniki zaslona. Ta pristop naredi vaše spletne strani bolj dostopne uporabnikom z različnimi ovirami in pomaga iskalnikom bolje razumeti vašo vsebino. To je temeljno načelo sodobnega spletnega razvoja, ki ustvarja boljše izkušnje za vse. ### Dodajanje semantičnega naslova strani Dodajmo ustrezno glavo na vašo stran terarija. Vstavite to vrstico takoj za odpirajočo oznako <body>: Zakaj je semantično označevanje pomembno: - Pomoč bralnikom zaslona pri navigaciji in razumevanju strukture strani - Izboljšanje optimizacije iskalnikov (SEO) z jasnejšo hierarhijo vsebine - Povečanje dostopnosti za uporabnike z okvarami vida ali kognitivnimi razlikami - Ustvarjanje boljših uporabniških izkušenj na vseh napravah in platformah - Sledenje spletnim standardom in najboljšim praksam za profesionalni razvoj Primeri semantičnih in nese-mantičnih izbir: ## Ustvarjanje posode za terarij Zdaj dodajmo HTML strukturo za sam terarij – stekleno posodo, kamor bodo rastline nekoč postavljene. Ta odsek prikazuje pomemben koncept: HTML zagotavlja strukturo, vendar brez CSS oblikovanja ti elementi še niso vidni. Kodiranje terarija uporablja opisna imena razredov, ki bodo naredila CSS oblikovanje intuitivno in vzdržno v naslednji lekciji. ### Naloga: Dodajte strukturo terarija Vstavite to označevanje nad zadnjo oznako </div> (pred zaključkom strani vsebnika): Razumevanje te strukture terarija: - Ustvari glavno posodo terarija z edinstvenim ID-jem za oblikovanje - Določa ločene elemente za vsako vizualno komponento (vrh, stene, zemlja, dno) - Vključuje gnezdene elemente za učinke odseva stekla (sijajni elementi) - Uporablja opisne imenske razrede, ki jasno kažejo namen vsakega elementa - Pripravlja strukturo za CSS stiliranje, ki bo ustvarilo videz steklenega terarija ### 🔄 Pedagoški pregled Obvladovanje HTML strukture: Preden nadaljujete, zagotovite, da lahko: - ✅ Pojasnite razliko med HTML strukturo in vizualnim videzom - ✅ Prepoznate semantične vs. nesemantične HTML elemente - ✅ Opíšete, kako pravilno označevanje koristi dostopnosti - ✅ Prepoznate celotno strukturo dokumentnega drevesa Preizkusite svoje razumevanje: Poskusite odpreti svojo HTML datoteko v brskalniku z onemogočenim JavaScriptom in brez CSS. Tako boste videli čisto semantično strukturo, ki ste jo ustvarili! --- ## Izziv GitHub Copilot Agent Uporabite način Agent za dokončanje naslednjega izziva: Opis: Ustvarite semantično HTML strukturo za razdelek vodnika za nego rastlin, ki bi ga lahko dodali v projekt terarija. Zahteva: Ustvarite semantičen HTML razdelek, ki vključuje glavni naslov "Vodnik za nego rastlin", tri podrazdelke z naslovi "Zalivanje", "Zahteve po svetlobi" in "Nega zemlje", vsak z odstavkom informacij o negi rastlin. Uporabite ustrezne semantične HTML oznake kot so <section>, <h2>, <h3>, in <p>, da ustrezno strukturirate vsebino. Več o agent načinu si oglejte tukaj. ## Izziv Raziskovanje zgodovine HTML Učenje o razvoju spletnih tehnologij HTML se je od njegovega nastanka, ko je Tim Berners-Lee leta 1990 ustvaril prvi spletni brskalnik v CERN-u, močno razvil. Nekatere starejše oznake, kot je <marquee>, so sedaj odsvetovane, ker ne ustrezajo sodobnim standardom dostopnosti in načelom odzivnega oblikovanja. Poskusite ta eksperiment: 1. Začasno ovijte svoj naslov <h1> z oznako <marquee>: <marquee><h1>Moj terarij</h1></marquee> 2. Odprite stran v brskalniku in opazujte efekt premikanja 3. Premislite, zakaj je bila ta oznaka odsvetovana (namig: razmislite o uporabniški izkušnji in dostopnosti) 4. Odstranite oznako <marquee> in se vrnite k semantičnemu označevanju Vprašanja za razmislek: - Kako bi premikajoč se naslov lahko vplival na uporabnike z okvarami vida ali občutljivostjo na gibanje? - Katere sodobne CSS tehnike bi lahko dosegle podobne vizualne učinke na dostopnejši način? - Zakaj je pomembno uporabljati aktualne spletne standarde namesto odsvetovanih elementov? Raziščite več o zastarelih in odsvetovanih HTML elementih, da boste razumeli, kako se spletni standardi razvijajo za izboljšanje uporabniške izkušnje. ## Kvizi po predavanju Post-lecture quiz ## Pregled in samostudij Poglobite svoje znanje HTML HTML je temelj spleta že več kot 30 let, razvil se je iz preprostega jezika za označevanje dokumentov v zapleteno platformo za izdelavo interaktivnih aplikacij. Razumevanje te evolucije vam pomaga ceniti sodobne spletne standarde in sprejemati boljše razvojne odločitve. Priporočene učne poti: 1. Zgodovina in razvoj HTML - Raziščite časovnico od HTML 1.0 do HTML5 - Preglejte, zakaj so bile nekatere oznake odsvetovane (dostopnost, prijaznost na mobilnih napravah, vzdrževanje) - Raziskujte nove funkcije in predloge HTML 2. Poglobljen pregled semantičnega HTML - Preučite celoten seznam semantičnih elementov HTML5 - Vadite prepoznavanje kdaj uporabiti <article>, <section>, <aside>, in <main> - Spoznajte atribute ARIA za izboljšano dostopnost 3. Sodobni spletni razvoj - Raziščite izgradnjo odzivnih spletnih strani na Microsoft Learn - Razumite, kako se HTML povezuje s CSS in JavaScriptom - Naučite se o spletni učinkovitosti in najboljših praksah SEO Vprašanja za razmislek: - Katere odsvetovane HTML oznake ste odkrili in zakaj so bile odstranjene? - Katere nove funkcije HTML so predlagane za prihodnje različice? - Kako semantični HTML prispeva k spletni dostopnosti in SEO? ### ⚡ Kaj lahko naredite v naslednjih 5 minutah - [ ] Odprite DevTools (F12) in preglejte HTML strukturo vaše najljubše spletne strani - [ ] Ustvarite preprosto HTML datoteko z osnovnimi oznakami: <h1>, <p>, in <img> - [ ] Validirajte svoj HTML z uporabo W3C HTML Validator na spletu - [ ] Poskusite dodati komentar v vaš HTML z <!-- komentar --> ### 🎯 Kaj lahko dosežete v tem času - [ ] Dokončajte kviz po lekciji in preglejte koncepte semantičnega HTML - [ ] Ustvarite preprosto spletno stran o sebi z ustrezno HTML strukturo - [ ] Eksperimentirajte z različnimi nivoji naslovov in oblikovalnimi oznakami - [ ] Dodajte slike in povezave za vadbo multimedijske integracije - [ ] Raziskujte funkcije HTML5, ki jih še niste preizkusili ### 📅 Vaša tedenska pot HTML učenja - [ ] Dokončajte nalogo projekta terarij s semantičnim označevanjem - [ ] Ustvarite dostopno spletno stran z oznakami in vlogami ARIA - [ ] Vadite izdelavo obrazcev z različnimi tipi vnosov - [ ] Raziščite HTML5 API-je, kot so localStorage ali geolokacija - [ ] Študirajte odzivne HTML vzorce in oblikovanje, usmerjeno na mobilne naprave - [ ] Preglejte HTML kodo drugih razvijalcev za najboljše prakse ### 🌟 Vaša mesečna baza za splet - [ ] Zgradite portfeljsko spletno stran, ki prikazuje vaše znanje HTML - [ ] Naučite se HTML predlog z ogrodjem, kot je Handlebars - [ ] Prispevajte k odprtokodnim projektom z izboljšanjem HTML dokumentacije - [ ] Obvladajte napredne HTML koncepte, kot so prilagojeni elementi - [ ] Integrirajte HTML s CSS ogrodji in JavaScript knjižnicami - [ ] Mentorirajte druge, ki se učijo osnov HTML ## 🎯 Vaša časovnica za obvladovanje HTML ### 🛠️ Povzetek vašega HTML orodjarna Po zaključku te lekcije imate zdaj: - Strukturo dokumenta: Popolna osnova HTML5 s pravilnim DOCTYPE - Semantično označevanje: Pomenljive oznake, ki izboljšujejo dostopnost in SEO - Integracijo slik: Pravilno organizacijo datotek in uporabo atributa alt - Postavitvene vsebnike: Strategična uporaba div elementov z opisnimi imenskimi razredi - Zavedanje dostopnosti: Razumevanje navigacije za bralnike zaslona - Sodobne standarde: Trenutne prakse HTML5 in znanje o odsvetovanih oznakah - Temelj projekta: Trdna osnova za CSS stiliranje in JavaScript interaktivnost Naslednji koraki: Vaša HTML struktura je pripravljena za CSS stiliranje! Semantična podlaga, ki ste jo zgradili, bo naslednjo lekcijo naredila veliko lažjo za razumevanje. ## Naloga Prakticirajte HTML: Ustvarite maketo bloga --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Omejitev odgovornosti: Ta dokument je bil preveden s pomočjo storitve za avtomatski prevod Co-op Translator. Čeprav si prizadevamo za natančnost, prosimo, upoštevajte, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v izvirnem jeziku velja za avtoritativni vir. Za pomembne informacije priporočamo strokovni prevod, opravljen s strani človeka. Ne odgovarjamo za morebitna nesporazume ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarij Projekt Del 2: Uvod v CSS
Se spomnite, kako je vaš HTML terrarij izgledal precej osnovno? CSS je tisto, kjer to preprosto strukturo spremenimo v nekaj vizualno privlačnega. Če je HTML kot gradnja ogrodja hiše, je CSS vse, kar hišo naredi za dom – barve na stenah, razporeditev pohištva, osvetlitev in kako sobe tekoče povezujejo. Pomislite, kako je Dvorec Versailles začel kot preprosta lovska koča, a je skrbna pozornost do dekoracije in postavitve spremenila v eno najbolj veličastnih stavb na svetu. Danes bomo vaš terrarij preoblikovali iz funkcionalnega v dodelanega. Naučili se boste natančno pozicionirati elemente, narediti postavitve odzivne na različne velikosti zaslonov in ustvariti vizualno privlačnost, ki naredi spletne strani zanimive. Ob koncu te lekcije boste videli, kako strateški CSS stil lahko bistveno izboljša vaš projekt. Dodajmo vašemu terrariju nekaj sloga. ## Predpredavanje Kviz Predpredavanje kviz ## Začetek s CSS CSS pogosto mislimo le kot "lepa nečesa naredi," vendar ima bistveno širšo vlogo. CSS je kot režiser filma – nadzorujete ne le, kako vse izgleda, temveč tudi, kako se premika, odgovarja na interakcijo in prilagaja različnim situacijam. Sodobni CSS je izjemno sposoben. Lahko napišete kodo, ki samodejno prilagaja postavitve za telefone, tablice in namizne računalnike. Lahko ustvarite gladke animacije, ki usmerjajo pozornost uporabnikov tam, kjer je potrebna. Rezultati so lahko zelo impresivni, ko vse deluje skupaj. To bomo dosegli v tej lekciji: - Ustvarili popolno vizualno zasnovo za vaš terrarij z uporabo sodobnih CSS tehnik - Raziskali osnovne pojme, kot so kaskada, dedovanje in CSS selektorji - Izvedli odzivne strategije pozicioniranja in postavitve - Zgradili terrarijev vsebnik z uporabo CSS oblik in stilov ### Predpogoj Morali bi imeti dokončano HTML strukturo za vaš terrarij iz prejšnje lekcije in jo imeti pripravljeno za stiliziranje. ### Nastavitev datoteke CSS Preden lahko začnemo s stiliranjem, moramo povezati CSS z našim HTML-jem. Ta povezava brskalniku pove, kje najde navodila za stiliziranje našega terrarija. V mapi terrarija ustvarite novo datoteko z imenom style.css, nato jo povežite v <head> delu vašega HTML dokumenta: Kaj ta koda naredi: - Ustvari povezavo med vašimi HTML in CSS datotekami - Pove brskalniku, naj naloži in uporabi stile iz style.css - Uporabi atribut rel="stylesheet", da določi, da gre za CSS datoteko - Naved pot do datoteke z href="./style.css" ## Razumevanje CSS kaskade Ste se kdaj spraševali, zakaj se CSS imenuje "kaskadni" stilni listi? Stili tečejo navzdol kot slap in včasih med seboj konfliktirajo. Razmislite, kako deluje vojaška hierarhija – generalov ukaz je lahko "vsi vojaki oblečejo zeleno," vendar pa specifičen ukaz vaši enoti morda določa "oblečite modro uniformo za slovesnost." Natančnejše navodilo ima prednost. Tudi CSS sledi podobni logiki, in razumevanje te hierarhije močno olajša odpravljanje napak. ### Eksperimentiranje s prednostjo kaskade Poglejmo delovanje kaskade tako, da ustvarimo konflikt stilov. Najprej dodajte inline stil v vašo <h1> oznako: Kaj ta koda naredi: - Uporabi rdečo barvo neposredno na element <h1> s pomočjo inline stila - Uporabi atribut style, da v HTML vgradi CSS neposredno - Ustvari najvišjo prioritetno pravilo za ta specifični element Nato dodajte to pravilo v vašo datoteko style.css: V zgornjem primeru smo: - Določili CSS pravilo, ki cilja na vse elemente <h1> - Nastavili barvo besedila na modro z uporabo zunanjega stilske datoteke - Ustvarili pravilo z nižjo prioriteto v primerjavi z inline stili ✅ Preverjanje znanja: Katera barva se prikaže v vaši spletni aplikaciji? Zakaj ta barva zmaga? Se lahko spomnite primerov, ko bi želeli preglasiti stile? ## Dedovanje (inheritance) v CSS CSS dedovanje deluje kot genetika – elementi podedujejo določene lastnosti od svojih starševskih elementov. Če nastavite pisavo na element body, vsi notranji teksti samodejno uporabijo to isto pisavo. Podobno kot značilna oblika čeljusti Habsburške družine, ki se je pojavljala skozi generacije brez posebnih nastavitev za posameznike. Vendar pa ni vse podedovano. Stil besedila, kot so pisave in barve, se dedujejo, vendar lastnosti postavitve, kot so robovi in obrobe, ne. Tako kot otroci podedujejo fizične lastnosti, a ne oblačilnega sloga svojih staršev. ### Opazovanje dedovanja pisave Poglejmo dedovanje v akciji tako, da nastavimo pisavo na <body> element: Kaj se tukaj zgodi: - Nastavi pisavno družino za celotno stran tako, da cilja na <body> element - Uporabi pisavno verigo s rezervnimi pisavami za boljšo združljivost z brskalniki - Uporabi sodobne sistemske pisave, ki izgledajo odlično na vseh operacijskih sistemih - Zagotovi, da vsi otroški elementi podedujejo to pisavo, razen če so posebej preglaseni Odprite orodja za razvijalce v brskalniku (F12), pojdite na zavihek Elements in preverite <h1> element. Videli boste, da podeduje pisavo od body: ✅ Čas za eksperiment: Poskusite nastaviti druge dedljive lastnosti na <body>, kot so color, line-height ali text-align. Kaj se zgodi z vašim naslovom in drugimi elementi? ### 🔄 Pedagoški pregled Razumevanje temeljev CSS: Preden se pomaknete na selektorje, zagotovite, da lahko: - ✅ Razložite razliko med kaskado in dedovanjem - ✅ Predvidite, kateri stil bo zmagal pri konfliktu specifičnosti - ✅ Prepoznate, katere lastnosti se dedujejo od starševskih elementov - ✅ Pravilno povežete CSS datoteke z HTML-jem Hiter test: Če imate te stile, katere barve bo <h1> znotraj <div class="special">? Odgovor: Rdeča (selektor elementa neposredno cilja h1) ## Obvladovanje CSS selektorjev CSS selektorji so način, kako ciljate specifične elemente za stiliziranje. Delujejo kot natančna navodila – namesto da rečete "hiša," boste rekli "modra hiša z rdečimi vrati na Maple Street." CSS ponuja različne načine za specifičnost, izbira pravega selektorja pa je kot izbira primernega orodja za delo. Včasih morate stilizirati vsaka vrata v soseski, včasih le ena posebna vrata. ### Selektorji elementov (oznake) Selektorji elementov ciljajo HTML elemente po imenu oznake. So odlični za nastavitev osnovnih stilov, ki se širijo po celotni strani: Kaj naredijo ti slogi: - Nastavljajo dosledno tipografijo po celotni strani s selektorjem body - Odstranijo privzete robove in odvečne prostorčke brskalnika za boljši nadzor - Stilizirajo vse naslove z barvo, poravnavo in razmikom - Uporabljajo enote rem za prilagodljivo in dostopno velikost pisave Medtem ko elementarni selektorji dobro delujejo za splošno stiliziranje, boste potrebovali bolj specifične selektorje za posamezne komponente, kot so rastline v vašem terrariju. ### ID selektorji za unikatne elemente ID selektorji uporabljajo simbol # in ciljajo elemente z edinstvenim atributom id. Ker morajo biti ID-ji na strani unikatni, so odlični za posebej stilizirane elemente, kot sta naš levi in desni rastlinski vsebnik. Ustvarimo stil za stranske vsebnike našega terrarija, kjer bodo rastline: Kaj ta koda doseže: - Pozicionira vsebnike na skrajne levi in desni rob z uporabo absolute pozicioniranja - Uporablja enote vh (višina viewporta) za odzivno višino, ki se prilagaja velikosti zaslona - Uporablja box-sizing: border-box, da je padding vključen v skupno širino - Odstrani nepotrebne enote px pri vrednosti nič za čistejšo kodo - Nastavi subtilno barvo ozadja, ki je bolj prijazna za oči kot močno siva ✅ Izziv kakovosti kode: Opazite, da ta CSS krši princip DRY (Don't Repeat Yourself - ne ponavljaj se). Ali ga lahko refaktorirate z uporabo tako ID-ja kot razreda? Izboljšan pristop: ### Razredni selektorji za večkratno uporabo Razredni selektorji uporabljajo simbol . in so odlični, ko želite uporabiti iste stile za več elementov. Za razliko od ID-jev, ki morajo biti unikatni, se razredi lahko večkrat uporabljajo po celotnem HTML-ju, kar je idealno za dosledno stiliranje. V našem terrariju vsaka rastlina potrebuje podoben slog, hkrati pa tudi individualno pozicioniranje. Uporabili bomo kombinacijo razredov za skupne stile in ID-jev za unikatno pozicijo. Tukaj je HTML struktura za posamezno rastlino: Ključni elementi pojasnjeni: - Uporablja class="plant-holder" za dosledno stiliziranje vsebnika za vse rastline - Uporablja class="plant" za skupno stiliziranje slike in vedenje - Vključuje unikatni id="plant1" za individualno pozicioniranje in interakcijo z JavaScriptom - Nudi opisni alt tekst za dostopnost bralnikom zaslona Zdaj dodajte te stile v vašo datoteko style.css: Razčlenitev teh stilov: - Ustvari relativno pozicioniranje za držalo rastline, da vzpostavi kontekst pozicioniranja - Nastavi vsako držalo rastline na 13% višine, da vse rastline vertikalno ustrezajo brez drsenja - Premakne držala rahlo levo za boljše centriranje rastlin znotraj njihovih vsebnikov - Dovoli rastlinam, da se odzivno prilagajajo z lastnostmi max-width in max-height - Uporablja z-index, da postavi rastline nad druge elemente v terrariju - Doda subtilen efekt ob premiku miške z CSS prehodi za boljšo uporabniško interakcijo ✅ Kritično razmišljanje: Zakaj potrebujemo oba selektorja .plant-holder in .plant? Kaj bi se zgodilo, če bi uporabili samo enega? ## Razumevanje CSS pozicioniranja CSS pozicioniranje je kot režiser predstave – usmerjate, kje stoji vsak igralec in kako se premika po odru. Nekateri igralci sledijo standardni postavitvi, drugi pa potrebujejo specifično pozicijo za dramatičen učinek. Ko enkrat razumete pozicioniranje, je veliko izzivov pri postavitvi lažje rešljivih. Potrebujete navigacijsko vrstico, ki ostaja na vrhu med pomikanjem? Pozicioniranje bo to uredilo. Želite namig, ki se pojavi na določenem mestu? Tudi to je pozicioniranje. ### Pet vrednosti pozicioniranja ### Pozicioniranje v našem terrariju Naš terrarij uporablja strateško kombinacijo vrst pozicioniranja za ustvarjanje želene postavitve: Razumevanje strategije pozicioniranja: - Absolutni vsebniki so odstranjeni iz običajnega toka dokumenta in pritrjeni na robove zaslona - Relativna držala rastlin ustvarjajo kontekst pozicioniranja, hkrati ostajajo v toku dokumenta - Absolutne rastline so lahko natančno pozicionirane znotraj njihovih relativnih vsebnikov - Ta kombinacija omogoča, da se rastline zložijo navpično in hkrati lahko imajo individualno pozicijo ✅ Čas za eksperiment: Poskusite spremeniti vrednosti pozicioniranja in opazujte rezultate: - Kaj se zgodi, če spremenite .container z absolute na relative? - Kako se spremeni postavitev, če .plant-holder uporablja absolute namesto relative? - Kaj se zgodi, ko preklopiš .plant na relative pozicioniranje? ### 🔄 Pedagoška kontrola Mojstrstvo CSS pozicioniranja: Ustavi se in preveri svoje razumevanje: - ✅ Ali lahko razložiš, zakaj rastline potrebujejo absolutno pozicioniranje za povleci-in-spusti? - ✅ Ali razumeš, kako relativni vsebniki ustvarjajo kontekst pozicioniranja? - ✅ Zakaj stranski vsebniki uporabljajo absolutno pozicioniranje? - ✅ Kaj bi se zgodilo, če bi popolnoma odstranil deklaracije pozicije? Povezava z resničnim svetom: Razmisli, kako CSS pozicioniranje odraža postavitev v resničnem svetu: - Static: Knjige na polici (naravni vrstni red) - Relative: Rahlo premikanje knjige, a ohranjanje njenega mesta - Absolute: Postavitev zaznamka na natanko določeno stran - Fixed: Samolepilni list, ki ostane viden, ko prelistuješ strani ## Gradnja terarija s CSS Zdaj bomo zgradili steklen kozarec samo z uporabo CSS – brez slik ali grafičnih programov. Ustvarjanje realistično videti stekla, senc in učinkov globine z uporabo pozicioniranja in transparentnosti prikazuje vizualne zmogljivosti CSS. Ta tehnika je podobna, kot so arhitekti Bauhausa uporabljali preproste geometrijske oblike za ustvarjanje kompleksnih in lepih struktur. Ko razumeš te principe, boš prepoznal CSS tehnike, ki stojijo za mnogimi spletnimi oblikami. ### Ustvarjanje komponent steklenega kozarca Postopek gradnje terarija del za delom. Vsak del uporablja absolutno pozicioniranje in dimenzije v odstotkih za odzivno oblikovanje: Razumevanje izgradnje terarija: - Uporablja dimenzije v odstotkih za odzivno skaliranje na vseh velikostih zaslona - Pozicionira elemente absolutno, da jih natančno zloži in poravna - Uporablja različne vrednosti prosojnosti za učinek stekla - Izvaja razporeditev plasti z z-index, da so rastline prikazane znotraj kozarca - Dodaja subtilno senco in izbrano radij ukrivljenosti za bolj realističen izgled ### Odzivno oblikovanje z odstotki Opazuj, kako vse dimenzije uporabljajo odstotke namesto fiksnih pik: Zakaj je to pomembno: - Zagotavlja, da se terarij sorazmerno prilagodi na kateri koli velikosti zaslona - Ohranja vizualne odnose med komponentami kozarca - Nudi konsistentno izkušnjo od mobilnih telefonov do velikih namiznih zaslonov - Omogoča prilagoditev brez razbijanja vizualne postavitve ### CSS enote v praksi Uporabljamo rem enote za border-radius, ki skalirajo glede na velikost osnovne pisave. To ustvarja bolj dostopne zasnove, ki spoštujejo uporabniške nastavitve pisav. Več o relativnih CSS enotah najdeš v uradni specifikaciji. ✅ Vizualno eksperimentiranje: Poskusi prilagoditi te vrednosti in opazuj učinke: - Spremeni prosojnost kozarca z 0.5 na 0.8 – kako to vpliva na videz stekla? - Prilagodi barvo zemlje iz #3a241d v #8B4513 – kakšen je vizualni učinek? - Spremeni z-index zemlje na 2 – kaj se zgodi s plastenjem? ### 🔄 Pedagoška kontrola Razumevanje vizualnega oblikovanja CSS: Potrdi svoje znanje vizualnih CSS učinkov: - ✅ Kako dimenzije v odstotkih omogočajo odzivno oblikovanje? - ✅ Zakaj prosojnost ustvarja efekt steklene transparentnosti? - ✅ Kakšno vlogo ima z-index pri plastenju elementov? - ✅ Kako vrednosti border-radius oblikujejo obliko kozarca? Načelo oblikovanja: Opazuj, kako gradimo kompleksne vizuale iz preprostih oblik: 1. Pravokotniki → Zaobljeni pravokotniki → Komponente kozarca 2. Enobarvno → Prosojnost → Učinek stekla 3. Posamezni elementi → Slojevita sestava → 3D izgled --- ## Izziv GitHub Copilot agenta 🚀 Uporabi način Agenta za dokončanje naslednjega izziva: Opis: Ustvari CSS animacijo, ki nežno premika rastline v terariju sem ter tja, simulirajoč naraven veter. To ti bo pomagalo vaditi CSS animacije, transformacije in ključne sličice (keyframes) ter izboljšati vizualni izgled terarija. Navodilo: Dodaj CSS ključne animacije, da rastline v terariju nežno nihajo levo-desno. Ustvari animacijo nihanja, ki rahlo zavrti vsako rastlino (2-3 stopinje) levo in desno s trajanjem 3-4 sekunde in jo uporabi za razred .plant. Zagotovi, da animacija neskončno teče in ima funkcijo olajšanja za naravni gib. Več o agent načinu si oglej tukaj. ## 🚀 Izziv: Dodajanje steklenih odsevov Pripravljen, da izboljšaš svoj terarij z realističnimi steklenimi odsevi? Ta tehnika bo dodala globino in realizem zasnovi. Ustvaril boš subtilne poudarke, ki simulirajo, kako se svetloba odbija od steklenih površin. Ta pristop je podoben, kot so renesančni slikarji, kot je Jan van Eyck, uporabljali svetlobo in odseve, da so naslikano steklo naredili tridimenzionalno. Tukaj je tisto, kar ciljaš: Tvoj izziv: - Ustvari subtilne bele ali svetle ovalne oblike za steklene odseve - Pozicioniraj jih strateško na levi strani kozarca - Uporabi ustrezno prosojnost in zamegljenost za realističen odsev svetlobe - Uporabi border-radius za organsko, mehurčkasto obliko - Eksperimentiraj z degradacijami ali sencami za boljši realizem ## Kvizek po predavanju Post-lecture quiz ## Razširi svoje CSS znanje CSS je sprva lahko zapleten, a razumevanje teh osnovnih konceptov nudi trdno osnovo za naprednejše tehnike. Naslednja področja učenja CSS: - Flexbox – poenostavi poravnavo in razporeditev elementov - CSS Grid – zagotavlja močna orodja za kompleksne postavitve - CSS spremenljivke – zmanjšujejo ponavljanje in izboljšujejo vzdrževanje - Odzivno oblikovanje – zagotavlja dobro delovanje na različnih velikostih zaslonov ### Interaktivni viri za učenje Vadite te koncepte z uporabo teh zabavnih in praktičnih iger: - 🐸 Flexbox Froggy – obvladaj Flexbox z zabavnimi izzivi - 🌱 Grid Garden – nauči se CSS Grid s sajenjem virtualnih korenčkov - 🎯 CSS Battle – preizkusi svoje CSS spretnosti z izzivi kodiranja ### Dodatno učenje Za poglobljeno znanje CSS osnov zaključi modul Microsoft Learn: Stiliziraj svojo HTML aplikacijo s CSS ### ⚡ Kaj lahko narediš v naslednjih 5 minutah - [ ] Odpri DevTools in preglej CSS sloge na katerikoli spletni strani v panelu Elements - [ ] Ustvari preprosto CSS datoteko in jo poveži s HTML stranjo - [ ] Poskusi spreminjati barve z različnimi metodami: hex, RGB, in poimenovane barve - [ ] Vadite model polja z dodajanjem paddinga in margine na div ### 🎯 Kaj lahko dosežeš v tem času - [ ] Zaključi kviz po lekciji in preglej osnovne pojme CSS - [ ] Stiliziraj svojo HTML stran s pisavami, barvami in razmiki - [ ] Ustvari preprosto postavitev s flexbox ali gridom - [ ] Eksperimentiraj s CSS prehodi za gladke učinke - [ ] Vadite odzivno oblikovanje z medijskimi poizvedbami ### 📅 Tvoj tedenski CSS izziv - [ ] Zaključi nalogo stilizacije terarija z ustvarjalnim pristopom - [ ] Obvladaj CSS Grid z gradnjo postavitve fotogalerije - [ ] Nauči se CSS animacij za oživitev svojih oblik - [ ] Raziskuj CSS predprocesorje kot sta Sass ali Less - [ ] Študiraj načela oblikovanja in jih uporabi v CSS - [ ] Analiziraj in znova ustvari zanimive spletne dizajne ### 🌟 Tvoj mesečni mojstrski razvoj oblikovanja - [ ] Zgradi celoten odziven sistem oblikovanja spletnih strani - [ ] Nauči se CSS-in-JS ali ogrodij z uporabniško usmerjenim pristopom, kot je Tailwind - [ ] Prispevaj k odprtokodnim projektom s CSS izboljšavami - [ ] Obvladaj napredne CSS koncepte kot so lastnosti po meri in containment - [ ] Ustvari ponovno uporabne knjižnice komponent z modularnim CSS - [ ] Mentoriraj druge, ki se učijo CSS in deli znanje oblikovanja ## 🎯 Tvoj časovni načrt za mojstrstvo CSS ### 🛠️ Povzetek orodij za CSS Po zaključku te lekcije imaš zdaj: - Razumevanje kaskade: Kako stili dedujejo in preglasijo drug drugega - Obvladavanje selektorjev: Natančno ciljanje z elementi, razredi in ID-ji - Sposobnosti pozicioniranja: Strategično postavljanje elementov in plastenje - Vizualno oblikovanje: Ustvarjanje steklenih učinkov, senc in transparentnosti - Tehnike odzivnosti: Postavitve v odstotkih, ki se prilagajajo kateremu koli zaslonu - Organizacija kode: Čista, vzdržljiva CSS struktura - Moderne prakse: Uporaba relativnih enot in dostopnih oblikovalskih vzorcev Naslednji koraki: Tvoj terarij ima zdaj tako strukturo (HTML) kot stil (CSS). Zadnja lekcija bo dodala interaktivnost z JavaScript! ## Naloga CSS Refactoring --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Omejitev odgovornosti: Ta dokument je bil preveden z uporabo AI prevajalske storitve Co-op Translator. Čeprav si prizadevamo za natančnost, vas opozarjamo, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v izvorni različici je treba upoštevati kot avtoritativni vir. Za pomembne informacije priporočamo strokovni človeški prevod. Nismo odgovorni za morebitna nerazumevanja ali napačne interpretacije, ki izhajajo iz uporabe tega prevoda. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Project Deo 1: Uvod u HTML
HTML, ili HyperText Markup Language, je osnova svake web stranice koju ste ikada posetili. Zamislite HTML kao kostur koji daje strukturu veb stranicama – on definiše gde sadržaj ide, kako je organizovan i šta svaki deo predstavlja. Dok će CSS kasnije "ukrasiti" vaš HTML bojama i rasporedima, a JavaScript oživeti interaktivnošću, HTML pruža osnovnu strukturu koja sve ostalo omogućava. U ovoj lekciji napravićete HTML strukturu za virtuelni interfejs terarijuma. Ovaj projekat iz prve ruke naučiće vas osnovnim HTML pojmovima dok gradite nešto vizuelno zanimljivo. Naučićete kako da organizujete sadržaj koristeći semantičke elemente, radite sa slikama i napravite osnovu za interaktivnu veb aplikaciju. Na kraju lekcije imaćete radnu HTML stranicu koja prikazuje slike biljaka u organizovanim kolonama, spremnu za stilizaciju u sledećoj lekciji. Ne brinite ako na početku izgleda jednostavno – to je upravo ono što HTML treba da bude pre nego što CSS doda vizuelni sjaj. ## Pre-večerna provera znanja Pre-večerni kviz ## Postavljanje vašeg projekta Pre nego što zaronimo u HTML kod, hajde da postavimo odgovarajući radni prostor za vaš projekat terarijuma. Kreiranje organizovane strukture fajlova od samog početka je važna navika koja će vam koristiti tokom celog puta razvoja veba. ### Zadatak: Napravite strukturu vašeg projekta Napravite poseban folder za projekat terarijuma i dodajte svoj prvi HTML fajl. Evo dva pristupa koja možete koristiti: Opcija 1: Korišćenje Visual Studio Code 1. Otvorite Visual Studio Code 2. Kliknite na "File" → "Open Folder" ili koristite Ctrl+K, Ctrl+O (Windows/Linux) ili Cmd+K, Cmd+O (Mac) 3. Kreirajte novi folder pod imenom terrarium i izaberite ga 4. U Explorer panelu kliknite na ikonu "New File" 5. Imenovajte fajl index.html Opcija 2: Korišćenje komandne linije Ovo je šta ove komande rade: - Prave novi direktorijum nazvan terrarium za vaš projekat - Ulaze u direktorijum terrarium - Prave prazan fajl index.html - Otvaraju fajl u Visual Studio Code za uređivanje ## Razumevanje strukture HTML dokumenta Svaki HTML dokument prati određenu strukturu koju pregledači moraju razumeti i pravilno prikazati. Zamislite ovu strukturu kao formalno pismo – ima obavezne elemente u određenom redosledu koji pomažu primaocu (u ovom slučaju pregledaču) da obradi sadržaj ispravno. Počnimo dodavanjem osnovne osnove koja je potrebna svakom HTML dokumentu. ### DOCTYPE deklaracija i korenski element Prve dve linije bilo kog HTML fajla služe kao "uvod" dokumenta za pregledač: Razumevanje šta ovaj kod radi: - Deklariše tip dokumenta kao HTML5 korišćenjem <!DOCTYPE html> - Pravi korenski <html> element koji sadrži sav sadržaj stranice - Uspostavlja moderne veb standarde za pravilno prikazivanje u pregledačima - Osigurava dosledan prikaz na različitim pregledačima i uređajima ### 🔄 Pedagoška provera Pauzirajte i razmislite: Pre nego što nastavite, uverite se da razumete: - ✅ Zašto svaki HTML dokument treba DOCTYPE deklaraciju - ✅ Šta sadrži <html> korenski element - ✅ Kako ova struktura pomaže pregledačima da pravilno prikazuju stranice Brzi auto-test: Možete li svojim rečima objasniti šta znači "prikaz po standardima"? ## Dodavanje ključnih meta podataka dokumenta Sekcija <head> HTML dokumenta sadrži ključne informacije koje pregledači i pretraživači trebaju, ali koje posetioci ne vide direktno na stranici. Zamislite je kao "iza kulisa" informacije koje pomažu vašoj stranici da pravilno funkcioniše i da se pravilno prikazuje na različitim uređajima i platformama. Ovi meta podaci govore pregledačima kako da prikažu stranicu, koji karakter encoding da koriste i kako da se nose sa različitim veličinama ekrana – sve je to esencijalno za pravljenje profesionalnih, pristupačnih veb stranica. ### Zadatak: Dodajte deo zaglavlja dokumenta Ubacićete ovu <head> sekciju između vaših početnih i završnih <html> tagova: Razlaganje šta svaki element postiže: - Postavlja naslov stranice koji se pojavljuje u tabovima pregledača i rezultatima pretrage - Specifikuje UTF-8 kodiranje karaktera radi pravilnog prikaza teksta širom sveta - Obezbeđuje kompatibilnost sa modernim verzijama Internet Explorera - Konfiguriše responzivni dizajn tako što podešava viewport da odgovara širini uređaja - Kontroliše početni nivo zumiranja da prikaže sadržaj u prirodnoj veličini ## Izgradnja tela dokumenta Element <body> sadrži sav vidljivi sadržaj vaše veb stranice – sve što će korisnici videti i sa čim će komunicirati. Dok je sekcija <head> davala uputstva pregledaču, sekcija <body> sadrži pravi sadržaj: tekst, slike, dugmad i druge elemente koji stvaraju vaš korisnički interfejs. Dodajmo strukturu tela i razumimo kako HTML tagovi rade zajedno da kreiraju smisleni sadržaj. ### Razumevanje strukture HTML tagova HTML koristi uparene tagove da definiše elemente. Većina tagova ima početni tag kao <p> i završni tag kao </p>, sa sadržajem između: <p>Zdravo, svete!</p>. To pravi paragraf koji sadrži tekst "Zdravo, svete!". ### Zadatak: Dodajte body element Ažurirajte svoj HTML fajl tako da uključi <body> element: Evo šta ova kompletna struktura omogućava: - Uspostavlja osnovni HTML5 okvir dokumenta - Uključuje ključne meta podatke za pravilno prikazivanje u pregledaču - Pravi prazno telo spremno za vaš vidljivi sadržaj - Prati najbolje prakse modernog razvoja veba Sada ste spremni da dodate vidljive elemente vašeg terarijuma. Koristićemo <div> elemente kao kontejnere za organizovanje različitih sekcija sadržaja i <img> elemente za prikaz slika biljaka. ### Rad sa slikama i kontejnerima za raspored Slike su posebne u HTML-u jer koriste "self-closing" tagove. Za razliku od elemenata kao što su <p></p> koji obuhvataju sadržaj, <img> tag sadrži sve potrebne informacije unutar samog taga pomoću atributa kao što su src za putanju do slike i alt za pristupačnost. Pre nego što dodate slike u svoj HTML, moraćete da pravilno organizujete fajlove projekta tako što ćete napraviti folder za slike i dodati grafike biljaka. Prvo, pripremite svoje slike: 1. Napravite folder pod imenom images unutar foldera terarijuma 2. Preuzmite slike biljaka iz solution foldera (ukupno 14 slika biljaka) 3. Kopirajte sve slike biljaka u novi images folder ### Zadatak: Napravite raspored za prikaz biljaka Sada dodajte slike biljaka organizovane u dve kolone između vaših <body></body> tagova: Korak po korak, evo šta se dešava u ovom kodu: - Pravi glavni kontejner stranice sa id="page" za držanje celog sadržaja - Usvaja dva kontejnera za kolone: left-container i right-container - Organizuje 7 biljaka u levoj koloni i 7 biljaka u desnoj koloni - Obavija svaku sliku biljke u plant-holder div radi pojedinačnog pozicioniranja - Primjenjuje dosledne nazive klasa za CSS stilizaciju u sledećoj lekciji - Dodeljuje jedinstvene ID-e svakom slici biljke za JavaScript interakciju kasnije - Uključuje ispravne putanje do foldera sa slikama ### 🔄 Pedagoška provera Razumevanje strukture: Uzmite trenutak da pregledate svoju HTML strukturu: - ✅ Možete li identifikovati glavne kontejnere u vašem rasporedu? - ✅ Razumete li zašto svaka slika ima jedinstveni ID? - ✅ Kako biste opisali svrhu plant-holder divova? Vizuelna inspekcija: Otvorite svoj HTML fajl u pregledaču. Trebalo bi da vidite: - Osnovnu listu slika biljaka - Slike organizovane u dve kolone - Jednostavan, nestilizovani raspored Zapamtite: Ovaj jednostavan izgled je upravo ono što HTML treba da izgleda pre stilizacije CSS-om! Sa ovim dodatkom oznake, biljke će se pojaviti na ekranu, mada još neće izgledati dotjerano – za to služi CSS u sledećoj lekciji! Za sada imate čvrstu HTML osnovu koja pravilno organizuje vaš sadržaj i prati najbolje prakse za pristupačnost. ## Korišćenje semantičkog HTML-a za pristupačnost Semantički HTML znači biranje HTML elemenata na osnovu njihovog značenja i svrhe, a ne samo izgleda. Kada koristite semantički markup, komunicirate strukturu i značenje svog sadržaja pregledačima, pretraživačima i asistivnim tehnologijama poput čitača ekrana. Ovaj pristup čini vaše sajtove pristupačnijim korisnicima sa invaliditetom i pomaže pretraživačima da bolje razumeju vaš sadržaj. To je osnovni princip modernog veb razvoja koji stvara bolje iskustvo za sve. ### Dodavanje semantičkog naslova stranice Dodajmo pravi naslov na vašu terarijum stranicu. Ubacite ovaj red odmah posle otvarajućeg <body> taga: Zašto je semantički markup važan: - Pomaže čitačima ekrana da lakše navigiraju i razumeju strukturu stranice - Poboljšava SEO tako što razjašnjava hijerarhiju sadržaja - Unapređuje pristupačnost za korisnike sa oštećenjem vida ili kognitivnim razlikama - Pravi bolje korisničko iskustvo na svim uređajima i platformama - Prati veb standarde i najbolje prakse za profesionalni razvoj Primeri semantičkog u odnosu na nese-mantički izbor: ## Kreiranje terarijum kontejnera Sada dodajmo HTML strukturu za sam terarijum – staklenu posudu u kojoj će biljke na kraju biti smeštene. Ova sekcija ilustruje važan koncept: HTML pruža strukturu, ali bez CSS stilizacije ovi elementi još neće biti vidljivi. Terarijum markup koristi opisne nazive klasa koje će učiniti CSS stilizaciju intuitivnom i lako održivom u sledećoj lekciji. ### Zadatak: Dodajte strukturu terarijuma Ubacite ovaj markup iznad poslednjeg </div> taga (pre zatvarajućeg taga kontejnera stranice): Razumevanje ove terarijumske strukture: - Pravi glavni kontejner terarijuma sa jedinstvenim ID-jem za stilizaciju - Дефинише посебне елементе за сваку визуелну компоненту (горе, зидови, прљавштина, дно) - Укључује угнежђене елементе за ефекте рефлексије стакла (сјајни елементи) - Користи описне класе које јасно указују на сврху сваког елемента - Припрема структуру за CSS стилизовање која ће створити изглед стакленог тераријума ### 🔄 Педагошки преглед Мастерисање HTML структуре: Пре него што наставите, увјерите се да можете: - ✅ Објаснити разлику између HTML структуре и визуелног изгледа - ✅ Препознати семантичке и не-семантичке HTML елементе - ✅ Описати како исправна ознака користи приступачности - ✅ Препознати потпуну структуру стабла документа Тестирање вашег разумевања: Покушајте да отворите свој HTML фајл у прегледачу са искљученим JavaScript-ом и без CSS-а. Ово вам показује јасну семантичку структуру коју сте креирали! --- ## Изазов GitHub Copilot агента Користите Agent режим да завршите следећи изазов: Опис: Креирајте семантичку HTML структуру за одељак водича за негу биљака који се може додати пројекту тераријума. Задатак: Направите семантички HTML одељак који укључује главни наслов „Водич за негу биљака“, три пододељка са насловима „Заливање“, „Потребе за светлом“ и „Нега земље“, од којих сваки садржи параграф са информацијама о нези биљака. Користите исправне семантичке HTML тегове као што су <section>, <h2>, <h3>, и <p> за одговарајућу структуру садржаја. Сазнајте више о agent mode овде. ## Изазов Историје HTML-а Учите о еволуцији веба HTML се значајно развио од када је Тим Бернерс-Ли креирао први веб претраживач у ЦЕРН-у 1990. године. Неки старији тагови као што је <marquee> су сада застарели јер се лоше слажу са савременим стандардима приступачности и принципима адаптивног дизајна. Испробајте овај експеримент: 1. Привремено упакујте свој <h1> наслов у <marquee> таг: <marquee><h1>My Terrarium</h1></marquee> 2. Отворите страницу у прегледачу и посматрајте ефекат скроловања 3. Размислите зашто је овај таг застарео (савет: размислите о корисничком искуству и приступачности) 4. Уклonite <marquee> таг и вратite се на семантичку ознаку Питања за размишљање: - Како би скролујући наслов могао утицати на кориснике са оштећењем вида или осетљивошћу на покрет? - Које савремене CSS технике могу достићи сличне визуелне ефекте са већом приступачношћу? - Зашто је важно користити тренутне веб стандарде уместо застарелих елемената? Истражите више о застарелим и забрањеним HTML елементима да бисте разумели како се веб стандарди развијају да би побољшали корисничко искуство. ## Квиз након предавања Квиз након предавања ## Преглед и самостално учење Продубите своје знање о HTML-у HTML је темељ веба више од 30 година, развијен од једноставног језика за означавање докумената до софистициране платформе за изградњу интерактивних апликација. Разумевање ове еволуције помаже вам да цените савремене веб стандарде и донесете боље одлуке у развоју. Препоручени путеви учења: 1. Историја и еволуција HTML-а - Истражите временску линију од HTML 1.0 до HTML5 - Испитајте зашто су одређени тагови застарели (приступачност, прилагодљивост мобилним уређајима, одрживост) - Истражите нове HTML функције и предлоге 2. Детаљно проучавање семантичког HTML-а - Проучите комплетну листу семантичких елемената HTML5 - Увежбајте препознавање када користити <article>, <section>, <aside>, и <main> - Сазнајте о ARIA атрибутима за побољшану приступачност 3. Модерни веб развој - Истражите изградњу адаптивних сајтова на Microsoft Learn - Разумите како се HTML интегрише са CSS-ом и JavaScript-ом - Упознајте се са најбољим праксама за веб перформансе и SEO Питања за размишљање: - Које сте застареле HTML тагове пронашли и зашто су уклоњени? - Које се нове HTML функције предлажу за будуће верзије? - Како семантички HTML доприноси приступачности веба и SEO-у? ### ⚡ Шта можете урадити у наредних 5 минута - [ ] Отворите DevTools (F12) и прегледајте HTML структуру ваше омиљене веб странице - [ ] Направите једноставан HTML фајл са основним теговима: <h1>, <p>, и <img> - [ ] Валидација вашег HTML-а помоћу W3C HTML Validator онлајн - [ ] Покушајте да додате коментар у HTML користећи <!-- comment --> ### 🎯 Шта можете постићи овај сат - [ ] Завршити квиз након лекције и прегледати концепте семантичког HTML-а - [ ] Направити једноставну веб страницу о себи користећи исправну HTML структуру - [ ] Експериментисати са различитим нивоима наслова и теговима за форматирање текста - [ ] Додати слике и линкове ради вежбе мултимедијалне интеграције - [ ] Истражити HTML5 функције које још нисте пробали ### 📅 Ваш седмодневни HTML план - [ ] Завршити пројекат тераријума са семантичком ознаком - [ ] Креирати приступачну веб страницу користећи ARIA ознаке и улоге - [ ] Вежбати прављење форми са различитим типовима уноса - [ ] Истражити HTML5 API-је као што су localStorage или геолокација - [ ] Учитати адаптивне HTML шаблоне и мобилни приступ дизајну - [ ] Прегледати HTML код других програмера за најбоље праксе ### 🌟 Ваш месечни темељ за веб - [ ] Направити портфолио веб сајт који показује ваше HTML умеће - [ ] Научити шаблонирање HTML-а са оквиром као што је Handlebars - [ ] Придонети open source пројектима побољшавајући HTML документацију - [ ] Мастерисати напредне HTML концепте као што су прилагођени елементи - [ ] Интегрисати HTML са CSS фрејмворцима и JavaScript библиотекама - [ ] Менторовати друге који уче основе HTML-а ## 🎯 Ваш временски план за савладавање HTML-а ### 🛠️ Сажетак вашег HTML алата Након завршетка ове лекције, сада имате: - Структуру документа: Потпуну HTML5 основу са исправним DOCTYPE-ом - Семантичку ознаку: Садржајне ознаке које побољшавају приступачност и SEO - Интеграцију слика: Исправну организацију фајлова и праксе за alt текст - Контенере распореда: Стратешко коришћење div елемената са описним класама - Свесност о приступачности: Разумевање навигације помоћу читача екрана - Модерне стандарде: Тренутне HTML5 праксе и знање о застарелим таговима - Основу пројекта: Чврсту базу за CSS стилизовање и JavaScript интерактивност Следећи кораци: Ваша HTML структура је спремна за CSS стилизовање! Семантичка основа коју сте изградили учиниће наредну лекцију много лакшом за разумевање. ## Задатак Вежбајте свој HTML: Направите блог макету --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Одрицање од одговорности: Овaј документ је преведен коришћењем AI услуге за превођење Co-op Translator. Иако настојимо да превод буде што прецизнији, имајте у виду да аутоматизовани преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати овлашћеним извором. За критичне информације препоручује се професионални људски превод. Нисмо одговорни за било каква неспоразуме или погрешне тумачења која произилазе из употребе овог превода. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Projekat Deo 2: Uvod u CSS
Sećate li se kako je vaš HTML terarijum izgledao prilično osnovno? CSS je mesto gde tu običnu strukturu pretvaramo u nešto vizuelno privlačno. Ako je HTML kao gradnja okvira kuće, onda je CSS sve ono što čini da se kuća oseća kao dom - boje farbe, raspored nameštaja, osvetljenje i kako se sobe povezuju. Zamislite kako je Dvorac Versaј počeo kao jednostavan lovački dom, ali pažnja na dekoraciju i raspored pretvorila ga je u jednu od najimpresivnijih zgrada na svetu. Danas ćemo vaš terarijum pretvoriti iz funkcionalnog u doteran. Naučićete kako precizno pozicionirati elemente, kako praviti rasporede koji reaguje na različite veličine ekrana i kako stvoriti vizuelnu privlačnost koja sajtove čini zanimljivim. Na kraju ovog časa, videćete kako strateški CSS stil može drastično poboljšati vaš projekat. Dodajmo malo stila vašem terarijumu. ## Pre-časni kviz Pre-časni kviz ## Početak sa CSS-om CSS se često smatra samo za "ulepšavanje stvari", ali on ima mnogo širu svrhu. CSS je kao režiser filma - vi kontrolišete ne samo kako sve izgleda, već i kako se pomera, kako reaguje na interakciju i kako se prilagođava različitim situacijama. Moderan CSS je izuzetno sposoban. Možete pisati kod koji automatski podešava rasporede za telefone, tablete i desktop računare. Možete kreirati glatke animacije koje usmeravaju pažnju korisnika gde je potrebno. Rezultati mogu biti zaista impresivni kada sve funkcioniše zajedno. Evo šta ćemo postići na ovom času: - Kreira kompletan vizuelni dizajn vašeg terarijuma koristeći moderne CSS tehnike - Istražuje osnovne koncepte poput kaskade, nasleđivanja i CSS selektora - Implementira responzivne strategije pozicioniranja i rasporeda - Gradi terarijum kontejner koristeći CSS oblike i stilizaciju ### Preduslov Treba da imate završenu HTML strukturu za vaš terarijum iz prethodnog časa i da je spremna za stilizaciju. ### Podešavanje vašeg CSS fajla Pre nego što počnemo sa stilizacijom, treba da povežemo CSS sa našim HTML-om. Ovo povezivanje govori pregledaču gde da pronađe uputstva za stilizaciju našeg terarijuma. U vašem terarijum folderu kreirajte novi fajl pod nazivom style.css, zatim ga povežite u <head> sekciji vašeg HTML dokumenta: Šta ovaj kod radi: - Kreira vezu između vaših HTML i CSS fajlova - Govori pregledaču da učita i primeni stilove iz style.css - Koristi atribut rel="stylesheet" da označi da je u pitanju CSS fajl - Referencira putanju do fajla sa href="./style.css" ## Razumevanje CSS kaskade Da li ste se ikada zapitali zašto se CSS zove "Kaskadni" stilovi? Stilovi se slivaju kao vodopad, i ponekad se međusobno sukobljavaju. Razmislite o vojnim komandama - generalna naredba može reći "sve trupe nose zelenu", ali specifična naredba vašoj jedinici može reći "nosite plave uniforme za ceremoniju". Preciznija instrukcija ima prioritet. CSS sledi sličnu logiku, i razumevanje ove hijerarhije čini debugovanje mnogo lakšim. ### Eksperimentisanje sa prioritetom kaskade Hajde da vidimo kaskadu u praksi tako što ćemo napraviti sukob stilova. Prvo, dodajte inline stil vašem <h1> tagu: Šta ovaj kod radi: - Primjenjuje crvenu boju direktno na <h1> element koristeći inline stilizaciju - Koristi atribut style za ugrađeni CSS direktno u HTML - Kreira stil sa najvišim prioritetom za ovaj specifični element Zatim dodajte sledeće pravilo u vaš style.css fajl: U prethodnom primeru smo: - Definisali CSS pravilo koje cilja sve <h1> elemente - Postavili boju teksta na plavu koristeći eksterni stil - Kreira pravilo sa nižim prioritetom u odnosu na inline stilove ✅ Provera znanja: Koja boja se prikazuje u vašoj veb aplikaciji? Zašto ta boja pobeđuje? Možete li smisliti situacije u kojima biste želeli da poništite stilove? ## Nasleđivanje u CSS-u u praksi CSS nasleđivanje funkcioniše kao genetika - elementi nasleđuju određena svojstva od svojih roditeljskih elemenata. Ako postavite font familiju na <body>, sav tekst unutra automatski koristi isti font. To je slično kao prepoznatljiv donji deo lica Habsburške porodice koji se pojavljivao u generacijama bez specifičnih podešavanja za svakog pojedinačno. Međutim, ne nasleđuje se sve. Stilovi teksta kao što su fontovi i boje se nasleđuju, ali svojstva rasporeda kao margine i ivice ne. Baš kao što deca mogu naslediti fizičke karakteristike, ali ne i modne izbore roditelja. ### Posmatranje nasleđivanja fonta Hajde da vidimo nasleđivanje u praksi postavljanjem familije fontova na <body> element: Objašnjenje šta se ovde dešava: - Postavlja familiju fonta za celu stranicu ciljajući <body> element - Koristi složenu listu fontova sa opcijama za fallback radi bolje kompatibilnosti - Primjenjuje moderne sistemske fontove koji lepo izgledaju na različitim operativnim sistemima - Osigurava da svi potčinjeni elementi nasleđuju ovaj font osim ako nije specifično drugačije određeno Otvorite alatke za razvojne programere u pregledaču (F12), idite na karticu Elements i pregledajte <h1> element. Videćete da nasleđuje font familiju od <body>: ✅ Eksperimentisanje: Pokušajte da postavite druga svojstva koja se nasleđuju na <body> kao što su color, line-height ili text-align. Šta se dešava sa vašim naslovom i drugim elementima? ### 🔄 Pedagoška provera Razumevanje osnova CSS-a: Pre nego što nastavite sa selektorima, proverite da li možete: - ✅ Objasniti razliku između kaskade i nasleđivanja - ✅ Predvideti koji stil će pobediti u slučaju konflikta specifikacije - ✅ Identifikovati koja svojstva se nasleđuju od roditeljskih elemenata - ✅ Ispravno povezati CSS fajlove sa HTML-om Brzi test: Ako imate ove stilove, koje boje će biti <h1> unutar <div class="special">? Odgovor: Crvena (selektor elementa direktno cilja h1) ## Savladavanje CSS selektora CSS selektori su vaš način da ciljate specifične elemente za stilizaciju. Oni funkcionišu kao davanje preciznih uputstava - umesto da kažete "kuća", možete reći "plava kuća sa crvenim vratima u ulici Maple". CSS pruža različite načine da budete specifični, a izbor pravog selektora je kao izbor odgovarajućeg alata za zadatak. Ponekad treba da stilizujete sva vrata u komšiluku, a ponekad samo jedna konkretna vrata. ### Selektori elemenata (tagovi) Selektori elemenata ciljaju HTML elemente po imenu taga. Idealni su za postavljanje baznih stilova koji se široko primenjuju na stranici: Razumevanje ovih stilova: - Postavlja doslednu tipografiju za celu stranicu koristeći selektor body - Uklanja podrazumevane margine i padding pregledača za bolju kontrolu - Stilizuje sve zaglavne elemente sa bojom, poravnanjem i razmakom - Koristi rem jedinice za skalabilno i pristupačno podešavanje veličine fonta Iako selektori elemenata dobro funkcionišu za opštu stilizaciju, trebaće vam specifičniji selektori za stilizovanje pojedinačnih komponenti poput biljaka u vašem terarijumu. ### ID selektori za jedinstvene elemente ID selektori koriste simbol # i ciljaju elemente sa specifičnim id atributom. Pošto ID mora biti jedinstven na stranici, idealni su za stilizaciju pojedinačnih, posebnih elemenata kao što su kontejneri biljaka sa leve i desne strane. Napravimo stilizaciju za bočne kontejnere terarijuma gde će živeti biljke: Šta ovaj kod postiže: - Pozicionira kontejnere na krajnju levu i desnu ivicu koristeći absolute pozicioniranje - Koristi vh (visina vidnog polja) jedinice za responzivnu visinu koja se prilagođava veličini ekrana - Primjenjuje box-sizing: border-box da bi se padding uzeo u ukupnu širinu - Uklanja nepotrebne px jedinice iz vrednosti nula radi čišćeg koda - Postavlja blagu boju pozadine koja je prijatnija za oči od oštre sive ✅ Zadatak za kvalitet koda: Primetili ste da ovaj CSS krši DRY (Don’t Repeat Yourself) princip. Možete li ga refaktorisati koristeći i ID i klasu? Poboljšani pristup: ### Klase selektori za ponovnu upotrebu stilova Klase selektori koriste simbol . i idealni su kada želite da primenite iste stilove na više elemenata. Za razliku od ID-jeva, klase se mogu ponovo koristiti u vašem HTML-u, što ih čini pogodnim za dosledne stilističke obrasce. U našem terarijumu, svaka biljka treba sličan stil, ali i jedinstveno pozicioniranje. Koristićemo kombinaciju klasa za zajedničke stilove i ID-jeva za jedinstveno pozicioniranje. Evo HTML strukture za svaku biljku: Ključni elementi objašnjeni: - Koristi class="plant-holder" za doslednu stilizaciju kontejnera svih biljaka - Primjenjuje class="plant" za zajedničku stilizaciju i ponašanje slika - Uključuje jedinstveni id="plant1" za individualno pozicioniranje i JavaScript interakciju - Obezbeđuje opisni alt tekst za pristupačnost čitačima ekrana Sada dodajte ove stilove u vaš style.css fajl: Objašnjenje ovih stilova: - Kreira relativno pozicioniranje za plant-holder da ustanovi kontekst pozicioniranja - Postavlja svaki plant-holder na 13% visine, omogućavajući da sve biljke stanu vertikalno bez skrolovanja - Pomera kontejnere blago ulevo da bolje centriraju biljke unutar kontejnera - Dozvoljava biljkama da se skaliraju responzivno sa max-width i max-height svojstvima - Koristi z-index da sloji biljke iznad drugih elemenata terarijuma - Dodaje suptilan hover efekat sa CSS tranzicijama radi bolje interakcije korisnika ✅ Kritičko razmišljanje: Zašto nam trebaju oba selektora .plant-holder i .plant? Šta bi se desilo ako bismo pokušali da koristimo samo jedan? ## Razumevanje CSS pozicioniranja CSS pozicioniranje je kao da ste režiser scene - vi određujete gde svaki glumac stoji i kako se kreće po sceni. Neki glumci slede normalnu formaciju, dok drugi zahtevaju specifično pozicioniranje za dramatični efekat. Kada shvatite pozicioniranje, mnogi izazovi rasporeda postaju rešivi. Treba vam navigacioni bar koji ostaje na vrhu dok korisnici skroluju? Pozicioniranje to omogućava. Hoćete tooltip koji se pojavljuje na određenoj lokaciji? To je takođe pozicioniranje. ### Pet vrednosti pozicioniranja ### Pozicioniranje u našem terarijumu Naš terarijum koristi stratešku kombinaciju tipova pozicioniranja da bi kreirao željeni raspored: Razumevanje strategije pozicioniranja: - Apsolutni kontejneri su uklonjeni iz normalnog toka dokumenta i zakačeni na ivice ekrana - Relativni držači biljaka kreiraju kontekst pozicioniranja dok ostaju u toku dokumenta - Apsolutne biljke mogu biti precizno pozicionirane unutar svojih relativnih držača - Ova kombinacija omogućava da biljke stoje vertikalno jedan preko drugog, a da budu pojedinačno pozicionisane ✅ Eksperiment: Probajte da promenite vrednosti pozicioniranja i posmatrajte rezultate: - Šta se dešava ako promenite .container iz absolute u relative? - Како се распоред мења ако .plant-holder користи absolute уместо relative? - Шта се дешава када промените позиционирање .plant у relative? ### 🔄 Педагошки преглед Мастер позиционирања у CSS-у: Пауза да се провери ваше разумевање: - ✅ Можете ли објаснити зашто би биљке требало да имају absolute позиционирање за превлачење и испуштање? - ✅ Да ли разумете како релативни контејнери праве контекст позиционирања? - ✅ Зашто бочни контејнери користе absolute позиционирање? - ✅ Шта би се десило ако у потпуности уклоните декларације позиционирања? Веза са стварним светом: Размислите о томе како CSS позиционирање одражава стварни распоред: - Static: Књиге на полици (природни редослед) - Relative: Померање књиге мало али задржавање места - Absolute: Стављање обележивача на тачан број странице - Fixed: Лепљива белешка која остаје видљива док листате странице ## Изградња тераријума са CSS-ом Сада ћемо направити стаклену теглу користећи само CSS — без слика или графичког софтвера. Креирање реалистичних стаклених, сенка и дубинских ефеката коришћењем позиционирања и транспарентности показује визуелне могућности CSS-а. Ова техника одражава како су архитекте из Баухауса користили једноставне геометријске облике да створе сложене, лепе структуре. Када разумете ове принципе, препознаћете CSS технике иза многих веб дизајна. ### Креирање делова стаклене тегле Хајде да градимо теглу тераријума корак по корак. Сваки део користи апсолутно позиционирање и димензије базиране на процентима за респонзиван дизајн: Разумевање конструкције тераријума: - Користи димензије базиране на процентима за респонзивно скалирање на свим величинама екрана - Позиционира елементе апсолутно да би их прецизно поређао и сложео - Примeњује различите вредности провидности да би створио ефекат стакла - Имплементира слојеве са z-index да би биљке биле унутар тегле - Додаје суптилне сенке и углачане ивице ради реалистичнијег изгледа ### Респонзивни дизајн са процентима Приметите како све димензије користе проценат уместо фиксних вредности пиксела: Зашто је ово битно: - Обезбеђује да се тераријум пропорционално скалира на било којој величини екрана - Одржава визуелне односе између делова тегле - Пружа конзистентно искуство од мобилних телефона до великих десктоп монитора - Омогућава дизајну да се прилагоди без ломљења визуелног распореда ### CSS јединице у пракси Користимо rem јединице за border-radius, које се скалирају релативно на основну величину фонта. Ово ствара приступачнији дизајн који поштује корисничка подешавања фонта. Сазнајте више о релативним CSS јединицама у званичној спецификацији. ✅ Визуелни експерименти: Покушајте да мењате ове вредности и посматрајте ефекте: - Промените прозирност тегле са 0.5 на 0.8 – како то утиче на изглед стакла? - Прилагодите боју земље са #3a241d на #8B4513 – какав је визуелни утицај? - Измените z-index земље на 2 – шта се дешава са слојевима? ### 🔄 Педагошки преглед Разумевање CSS визуелног дизајна: Потврдите своје разумевање визуелног CSS-а: - ✅ Како димензије базиране на процентима стварају респонзиван дизајн? - ✅ Зашто провидност прави ефекат стаклене провидности? - ✅ Коју улогу игра z-index у слојевима елемената? - ✅ Како вредности border-radius обликују теглу? Принцип дизајна: Примећујете како градимо сложене визуале од једноставних облика: 1. Правоугаоници → Заобљени правоугаоници → Делови тегле 2. Једнобојно → Провидност → Ефекат стакла 3. Појединачни елементи → Слојна композиција → 3D изглед --- ## GitHub Copilot Agent изазов 🚀 Користите Agent мод да завршите следећи задатак: Опис: Направите CSS анимацију која ће нежно љуљати биљке у тераријуму напред-назад, симулирајући природан ефекат ветра. Ово ће вам помоћи да вежбате CSS анимације, трансформације и кључне кадрове док унапређујете визуелни изглед тераријума. Задатак: Додајте CSS анимације кључних кадрова које мењају положај биљака нежно лево-десно. Креирајте љуљачку анимацију која ротира сваки цвет мало (2-3 степена) лево и десно у трајању од 3-4 секунде и примените је на .plant класу. Обезбедите бесконачно понављање анимације са функцијом ублажавања за природан покрет. Сазнајте више о agent мод. ## 🚀 Изазов: Додавање стаклених рефлексија Спремни да унапредите свој тераријум реалистичним стакленим рефлексијама? Ова техника даје дубину и реализам дизајну. Направићете суптилне наглашене беле или светле овалне облике за стаклене рефлексије. Овај приступ подсећа на начин на који су ренесансни сликари попут Јана ван Ајка користили светлост и одраз да би направили тродимензионални изглед на сликаном стаклу. Ево шта циљате: Ваш задатак: - Креирајте суптилне беле или светле овалне облике за стаклене рефлексије - Позиционирајте их стратешки на левој страни тегле - Примeнујте одговарајућу провидност и ефекте замућења за реалистично одражавање светлости - Употребите border-radius да бисте направили органске, мехурићасте облике - Експериментишите са преливима или сенкама ради боље реалистичности ## Квиз након предавања Post-lecture quiz ## Проширите своје CSS знање CSS може на први поглед деловати сложено, али разумевање ових основних концепата пружа стабилну основу за напредније технике. Следећа поља учења у CSS-у: - Flexbox - поједностављује поравнање и расподелу елемената - CSS Grid - нуди моћне алате за прављење сложених распореда - CSS варијабле - смањује понављања и побољшава одрживост кода - Респонзивни дизајн - осигурава да сајтови добро раде на различитим величинама екрана ### Интерактивни ресурси за учење Вежбајте ове концепте уз занимљиве игре: - 🐸 Flexbox Froggy - Савладајте Flexbox кроз забавне изазове - 🌱 Grid Garden - Научите CSS Grid уз гајење виртуелних шаргарепа - 🎯 CSS Battle - Тестирајте своје CSS вештине кодирајући изазове ### Додатно учење За темељно разумевање CSS основа, завршите овај Microsoft Learn модул: Style your HTML app with CSS ### ⚡ Шта можете урадити у наредних 5 минута - [ ] Отворите DevTools и прегледајте CSS стилове на било којој веб страници користећи панел Elements - [ ] Направите једноставан CSS фајл и повежите га са HTML страницом - [ ] Покушајте да мењате боје користећи различите методе: хекс, RGB и именоване боје - [ ] Вежбајте box model додавањем padding-а и margin-а на div ### 🎯 Шта можете постићи у овом сату - [ ] Завршите квиз након лекције и прегледајте CSS основе - [ ] Стилујте своју HTML страницу са фонтовима, бојама и размаком - [ ] Креирајте једноставан распоред користећи flexbox или grid - [ ] Експериментишите са CSS транзицијама за глатке ефекте - [ ] Вежбајте респонзивни дизајн помоћу media queries ### 📅 Ваша недељна CSS авантура - [ ] Завршите задатак стилизовања тераријума са креативним приступом - [ ] Савладајте CSS Grid креирањем распореда фотогалерије - [ ] Научите CSS анимације да оживите своје дизајне - [ ] Истражите CSS препроцесоре као што су Sass или Less - [ ] Проучите принципе дизајна и примените их у CSS-у - [ ] Анализирајте и реконструишите занимљиве дизајне које пронађете онлајн ### 🌟 Ваше месечно усавршавање дизајна - [ ] Изградите потпуни систем респонзивног веб дизајна - [ ] Научите CSS-in-JS или utility-first фрејмворке као Tailwind - [ ] Приступите open source пројектима унапређујући CSS - [ ] Савладајте напредне CSS концепте као што су CSS custom properties и containment - [ ] Креирајте поновно употребљиве библиотеке компонената са модуларним CSS-ом - [ ] Менторишите друге који уче CSS и делите дизајнерска знања ## 🎯 Ваш временски план за савладавање CSS-а ### 🛠️ Резиме вашег CSS алатника Након завршетка ове лекције, сада имате: - Разумевање каскаде: Како стилови наслеђују и превазилазе једни друге - Мастерство селектора: Прецизно циљање елемената, класа и ID-јева - Вештине позиционирања: Стратешко постављање и слојно организовање елемената - Визуелни дизајн: Креирање стаклених ефеката, сенки и транспарентности - Респонзивне технике: Распореди базирани на процентима који се прилагођавају било ком екрану - Организација кода: Чиста, одржива структура CSS-а - Модерне праксе: Коришћење релативних јединица и приступачних дизајнерских образаца Следећи кораци: Ваш тераријум сада има структуру (HTML) и стил (CSS). Последња лекција ће додати интерактивност уз JavaScript! ## Задатак CSS Refactoring --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Ограничење одговорности: Овај документ је преведен коришћењем AI услуге за превођење Co-op Translator. Иако тежимо прецизности, молимо Вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитетним извором. За кључне информације препоручује се професионални превод од стране стручног лудског преводиоца. Нисмо одговорни за било каква неспоразуме или погрешне тумачења која произилазе из коришћења овог превода. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Project Del 1: Introduktion till HTML
HTML, eller HyperText Markup Language, är grunden för varje webbplats du någonsin besökt. Tänk på HTML som skelettet som ger struktur åt webbsidor – det definierar var innehåll ska placeras, hur det organiseras och vad varje del representerar. Medan CSS senare kommer att "klä upp" din HTML med färger och layouter, och JavaScript kommer att ge liv åt den med interaktivitet, tillhandahåller HTML den grundläggande strukturen som gör allt annat möjligt. I den här lektionen kommer du att skapa HTML-strukturen för ett virtuellt terrariumgränssnitt. Det här praktiska projektet kommer att lära dig grundläggande HTML-koncept samtidigt som du bygger något visuellt engagerande. Du kommer att lära dig hur du organiserar innehåll med hjälp av semantiska element, arbetar med bilder och skapar grunden för en interaktiv webbapplikation. I slutet av denna lektion kommer du att ha en fungerande HTML-sida som visar växtbilder organiserade i kolumner, redo att stylas i nästa lektion. Oroa dig inte om det ser grundläggande ut till en början – det är precis så HTML ska vara innan CSS lägger till det visuella putsningen. ## För-kurs Quiz För-kurs quiz ## Sätta upp ditt projekt Innan vi dyker in i HTML-kod, låt oss skapa en ordnad arbetsyta för ditt terrariumprojekt. Att skapa en organiserad mappstruktur från början är en avgörande vana som kommer att gynna dig genom hela din webbapputvecklingsresa. ### Uppgift: Skapa din projektstruktur Du kommer att skapa en dedikerad mapp för ditt terrariumprojekt och lägga till din första HTML-fil. Här är två sätt du kan använda: Alternativ 1: Använda Visual Studio Code 1. Öppna Visual Studio Code 2. Klicka på "File" → "Open Folder" eller använd Ctrl+K, Ctrl+O (Windows/Linux) eller Cmd+K, Cmd+O (Mac) 3. Skapa en ny mapp som heter terrarium och välj den 4. I Explorerpanelen klicka på ikonen "New File" 5. Namnge din fil index.html Alternativ 2: Använda terminalkommandon Det här uppnår dessa kommandon: - Skapar en ny katalog som heter terrarium för ditt projekt - Navigerar in i terrarium-katalogen - Skapar en tom index.html-fil - Öppnar filen i Visual Studio Code för redigering ## Förstå HTML-dokumentstruktur Varje HTML-dokument följer en specifik struktur som webbläsare behöver förstå för att visa korrekt. Tänk på denna struktur som ett formellt brev – det har obligatoriska element i en viss ordning som hjälper mottagaren (i det här fallet webbläsaren) att bearbeta innehållet ordentligt. Låt oss börja med att lägga till den grundläggande basen som varje HTML-dokument behöver. ### DOCTYPE-deklarationen och rootelementet De första två raderna i en HTML-fil fungerar som dokumentets "introduktion" till webbläsaren: Så här fungerar denna kod: - Deklarerar dokumenttypen som HTML5 med <!DOCTYPE html> - Skapar rootelementet <html> som kommer innehålla allt innehåll på sidan - Etablerar moderna webbstandarder för korrekt rendering i webbläsare - Säkerställer konsekvent visning över olika webbläsare och enheter ### 🔄 Pedagogisk kontroll Pausa och reflektera: Innan du fortsätter, se till att du förstår: - ✅ Varför varje HTML-dokument behöver en DOCTYPE-deklaration - ✅ Vad rootelementet <html> innehåller - ✅ Hur denna struktur hjälper webbläsare att rendera sidor korrekt Snabb självtest: Kan du förklara med egna ord vad "standardkompatibel rendering" betyder? ## Lägga till viktig dokumentmetadata <head>-sektionen i ett HTML-dokument innehåller avgörande information som webbläsare och sökmotorer behöver, men som besökare inte ser direkt på sidan. Tänk på det som "bakom scenen"-information som hjälper din webbsida att fungera korrekt och visas rätt på olika enheter och plattformar. Denna metadata berättar för webbläsare hur sidan ska visas, vilken teckenkodning som ska användas och hur olika skärmstorlekar ska hanteras – allt viktigt för att skapa professionella, tillgängliga webbsidor. ### Uppgift: Lägg till dokumentets head Infoga denna <head>-sektion mellan dina öppnande och stängande <html>-taggar: Så här fungerar varje element: - Sätter sidans titel som visas i webbläsarflikar och sökresultat - Specificerar UTF-8 teckenkodning för korrekt visning av text globalt - Säkerställer kompatibilitet med moderna versioner av Internet Explorer - Konfigurerar responsiv design genom att anpassa viewport till enhetens bredd - Kontrollerar initial zoomnivå för att visa innehållet i naturlig storlek ## Bygga dokumentets body <body>-elementet innehåller allt synligt innehåll på din webbsida – allt som användare kommer att se och interagera med. Medan <head>-sektionen gav instruktioner till webbläsaren, innehåller <body> det faktiska innehållet: text, bilder, knappar och andra element som skapar ditt användargränssnitt. Låt oss lägga till body-strukturen och förstå hur HTML-taggar arbetar tillsammans för att skapa meningsfullt innehåll. ### Förstå HTML-tagstruktur HTML använder parvisa taggar för att definiera element. De flesta taggar har en öppningstagg som <p> och en stängningstagg som </p>, med innehåll emellan: <p>Hej, världen!</p>. Det skapar ett stycke som innehåller texten "Hej, världen!". ### Uppgift: Lägg till body-elementet Uppdatera din HTML-fil för att inkludera <body>-elementet: Denna kompletta struktur ger: - Etablerar den grundläggande HTML5-dokumentstrukturen - Inkluderar viktig metadata för korrekt rendering i webbläsare - Skapar en tom body redo för ditt synliga innehåll - Följer moderna webbpraksiser Nu är du redo att lägga till de synliga elementen i ditt terrarium. Vi kommer att använda <div>-element som behållare för att organisera olika innehållssektioner, och <img>-element för att visa växtbilderna. ### Arbeta med bilder och layoutbehållare Bilder är speciella i HTML eftersom de använder "självstängande" taggar. Till skillnad från element som <p></p> som omsluter innehåll, innehåller <img>-taggen all information den behöver inom taggen själv via attribut som src för bildfilens sökväg och alt för tillgänglighet. Innan vi lägger till bilder i din HTML behöver du organisera dina projektfiler korrekt genom att skapa en bilder-mapp och lägga till växtgrafiken. Börja med att ställa in dina bilder: 1. Skapa en mapp som heter images inne i din terrariummapp 2. Ladda ner växtbilderna från lösningsmappen (14 växtbilder totalt) 3. Kopiera alla växtbilder till din nya images-mapp ### Uppgift: Skapa växtvisningslayout Lägg nu till växtbilder organiserade i två kolumner mellan dina <body></body>-taggar: Steg för steg, här händer detta i koden: - Skapar en huvudbehållare för sidan med id="page" som håller allt innehåll - Etablerar två kolumnbehållare: left-container och right-container - Organiserar 7 växter i vänsterkolumnen och 7 växter i högerkolumnen - Omsluter varje växtbild i en plant-holder-div för individuell placering - Tillämpa konsekventa klassnamn för CSS-styling i nästa lektion - Tilldelar unika ID:n till varje växtbild för JavaScript-interaktion senare - Inkluderar korrekta sökvägar till bilder-mappen ### 🔄 Pedagogisk kontroll Strukturförståelse: Ta en stund att granska din HTML-struktur: - ✅ Kan du identifiera huvudbehållarna i din layout? - ✅ Förstår du varför varje bild har ett unikt ID? - ✅ Hur skulle du beskriva syftet med plant-holder-divarna? Visuell inspektion: Öppna din HTML-fil i en webbläsare. Du bör se: - En grundläggande lista med växtbilder - Bilder organiserade i två kolumner - Enkel, ostylad layout Kom ihåg: Det här enkla utseendet är precis hur HTML ska se ut innan CSS-styling! Med denna markup tillagd kommer växterna att visas på skärmen, även om de inte ser polerade ut än – det är det CSS är till för i nästa lektion! För nu har du en stabil HTML-grund som ordentligt organiserar ditt innehåll och följer tillgänglighetsbästa praxis. ## Använda semantisk HTML för tillgänglighet Semantisk HTML innebär att välja HTML-element baserat på deras betydelse och syfte, inte bara deras utseende. När du använder semantisk markup kommunicerar du innehållets struktur och innebörd till webbläsare, sökmotorer och hjälpmedelstekniker som skärmläsare. Denna metod gör dina webbplatser mer tillgängliga för användare med funktionsnedsättningar och hjälper sökmotorer att bättre förstå ditt innehåll. Det är en grundläggande princip i modern webbutveckling som skapar bättre upplevelser för alla. ### Lägg till en semantisk sidtitel Låt oss lägga till en korrekt rubrik till din terrariumsida. Infoga denna rad direkt efter din öppnande <body>-tagg: Varför semantisk markup är viktig: - Hjälper skärmläsare att navigera och förstå sidans struktur - Förbättrar sökmotoroptimering (SEO) genom att klargöra innehållshierarki - Ökar tillgängligheten för användare med synnedsättning eller kognitiva skillnader - Skapar bättre användarupplevelser på alla enheter och plattformar - Följer webbstandarder och bästa praxis för professionell utveckling Exempel på semantiska vs. icke-sematiska val: ## Skapa terrariumbehållaren Låt oss nu lägga till HTML-strukturen för själva terrariet – glasbehållaren där växter så småningom kommer att placeras. Denna sektion visar ett viktigt koncept: HTML ger struktur, men utan CSS-styling kommer dessa element inte synas än. Terrarium-markupen använder beskrivande klassnamn som gör CSS-stylingen intuitiv och lätt att underhålla i nästa lektion. ### Uppgift: Lägg till terrariumstrukturen Infoga denna markup ovanför den sista </div>-taggen (innan avslutande taggen för sidbehållaren): Så fungerar denna terrariumstruktur: - Skapar en huvudterrariumbehållare med ett unikt ID för styling - Definierar separata element för varje visuell komponent (topp, väggar, jord, botten) - Inkluderar nästlade element för glasreflektionseffekter (glansiga element) - Använder beskrivande klassnamn som tydligt anger varje elements syfte - Förbereder strukturen för CSS-styling som ska skapa utseendet av ett glas-terrarie ### 🔄 Pedagogisk Uppföljning Mästerskap i HTML-struktur: Innan du går vidare, säkerställ att du kan: - ✅ Förklara skillnaden mellan HTML-struktur och visuell presentation - ✅ Identifiera semantiska kontra icke-semantiska HTML-element - ✅ Beskriva hur korrekt markup gynnar tillgänglighet - ✅ Känna igen den kompletta dokumentträdsstrukturen Testa din förståelse: Prova att öppna din HTML-fil i en webbläsare med JavaScript avstängt och utan CSS. Detta visar den rena semantiska struktur du skapat! --- ## GitHub Copilot Agent-utmaning Använd Agent-läget för att slutföra följande utmaning: Beskrivning: Skapa en semantisk HTML-struktur för en sektion om växtvård som kan läggas till i terrarie-projektet. Uppdrag: Skapa en semantisk HTML-sektion med en huvudrubrik "Plant Care Guide", tre delsektioner med rubrikerna "Watering", "Light Requirements" och "Soil Care", var och en innehållande ett stycke med information om växtvård. Använd lämpliga semantiska HTML-taggar som <section>, <h2>, <h3>, och <p> för att strukturera innehållet korrekt. Läs mer om agentläget här. ## Utforska HTML:s historia-utmaning Lär dig om webbens utveckling HTML har utvecklats betydligt sedan Tim Berners-Lee skapade den första webbläsaren vid CERN 1990. Vissa äldre taggar som <marquee> är nu föråldrade eftersom de inte fungerar bra med moderna tillgänglighetsstandarder och responsiva designprinciper. Prova detta experiment: 1. Wrappa temporärt din <h1>-titel i en <marquee>-tagg: <marquee><h1>My Terrarium</h1></marquee> 2. Öppna din sida i en webbläsare och observera den rullande effekten 3. Fundera över varför denna tagg blev föråldrad (tips: tänk på användarupplevelse och tillgänglighet) 4. Ta bort <marquee>-taggen och gå tillbaka till semantisk markup Reflektionsfrågor: - Hur kan en rullande titel påverka användare med synnedsättningar eller känslighet för rörelse? - Vilka moderna CSS-tekniker kan skapa liknande visuella effekter på ett mer tillgängligt sätt? - Varför är det viktigt att använda aktuella webbstandarder istället för föråldrade element? Utforska mer om föråldrade och deprecated HTML-element för att förstå hur webbstandarder utvecklas för att förbättra användarupplevelsen. ## Quiz efter lektionen Quiz efter lektionen ## Repetition & Självstudier Fördjupa din HTML-kunskap HTML har varit webben grundpelare i över 30 år och utvecklats från ett enkelt dokumentmarkup-språk till en sofistikerad plattform för att bygga interaktiva applikationer. Att förstå denna utveckling hjälper dig att uppskatta moderna webbstandarder och fatta bättre utvecklingsbeslut. Rekommenderade lärvägar: 1. HTML:s historia och utveckling - Undersök tidslinjen från HTML 1.0 till HTML5 - Utforska varför vissa taggar föråldrades (tillgänglighet, mobilvänlighet, underhållbarhet) - Undersök nya HTML-funktioner och förslag 2. Djupdykning i semantisk HTML - Studera den fullständiga listan av HTML5 semantiska element - Öva på att identifiera när man ska använda <article>, <section>, <aside>, och <main> - Lär dig om ARIA-attribut för ökad tillgänglighet 3. Modern webb-apputveckling - Utforska hur man bygger responsiva webbplatser på Microsoft Learn - Förstå hur HTML integreras med CSS och JavaScript - Lär dig om webbprestanda och SEO bästa praxis Reflektionsfrågor: - Vilka föråldrade HTML-taggar upptäckte du, och varför togs de bort? - Vilka nya HTML-funktioner föreslås för framtida versioner? - Hur bidrar semantisk HTML till webbens tillgänglighet och SEO? ### ⚡ Vad du kan göra inom 5 minuter - [ ] Öppna DevTools (F12) och inspektera HTML-strukturen på din favoritwebbplats - [ ] Skapa en enkel HTML-fil med grundläggande taggar: <h1>, <p>, och <img> - [ ] Validera din HTML med W3C HTML Validator online - [ ] Lägg till en kommentar i din HTML med <!-- kommentar --> ### 🎯 Vad du kan åstadkomma under denna timme - [ ] Avsluta quiz efter lektionen och repetera semantiska HTML-koncept - [ ] Bygg en enkel webbsida om dig själv med rätt HTML-struktur - [ ] Experimentera med olika rubriknivåer och textformateringstaggar - [ ] Lägg till bilder och länkar för att öva multimediaintegration - [ ] Undersök HTML5-funktioner du inte testat än ### 📅 Din vecka med HTML - [ ] Färdigställ terrarie-projektet med semantisk markup - [ ] Skapa en tillgänglig webbplats med ARIA-labels och roller - [ ] Öva formulärskapande med olika input-typer - [ ] Utforska HTML5-API:er som localStorage eller geolocation - [ ] Studera responsiv HTML-design och mobil-först strategier - [ ] Granska andra utvecklares HTML-kod för bästa praxis ### 🌟 Din månadsresa i webbens grund - [ ] Bygg en portföljsida som visar dina HTML-kunskaper - [ ] Lär dig HTML-templating med ramverk som Handlebars - [ ] Bidra till open source-projekt genom att förbättra HTML-dokumentationen - [ ] Bemästra avancerade HTML-koncept som custom elements - [ ] Integrera HTML med CSS-ramverk och JavaScript-bibliotek - [ ] Mentorera andra som lär sig HTML-grunderna ## 🎯 Din HTML Mästerskapstidslinje ### 🛠️ Din HTML-verktygslåda sammanfattning Efter att ha slutfört denna lektion har du nu: - Dokumentstruktur: Komplett HTML5-grund med korrekt DOCTYPE - Semantisk markup: Meningsfulla taggar som förbättrar tillgänglighet och SEO - Bildintegration: Korrekt filorganisation och alt-textrutiner - Layout-containrar: Strategisk användning av divs med beskrivande klassnamn - Tillgänglighetsmedvetenhet: Förståelse för skärmläsarnavigering - Moderna standarder: Aktuella HTML5-metoder och kunskap om föråldrade taggar - Projektgrund: Stabil bas för CSS-styling och JavaScript-interaktivitet Nästa steg: Din HTML-struktur är redo för CSS-styling! Den semantiska grunden du byggt gör nästa lektion mycket lättare att förstå. ## Uppgift Öva på din HTML: Skapa en bloggmockup --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Ansvarsfriskrivning: Detta dokument har översatts med hjälp av AI-översättningstjänsten Co-op Translator. Även om vi strävar efter noggrannhet, vänligen observera att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess modersmål bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för några missförstånd eller feltolkningar som uppstår till följd av användningen av denna översättning. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrariumprojekt Del 2: Introduktion till CSS
Kommer du ihåg hur ditt HTML-terrarium såg ganska enkelt ut? CSS är där vi förvandlar den där enkla strukturen till något visuellt tilltalande. Om HTML är som att bygga stomme till ett hus, är CSS allt som gör att det känns som ett hem – färgval, möbelplacering, belysning och hur rummen flyter ihop. Tänk på hur Versailles-palatset började som en enkel jaktstuga, men noggrann uppmärksamhet på dekoration och layout förvandlade det till en av världens mest magnifika byggnader. Idag ska vi förvandla ditt terrarium från funktionellt till polerat. Du kommer lära dig hur man positionerar element exakt, gör layouter som anpassar sig till olika skärmstorlekar och skapar det visuella tilltal som gör webbplatser engagerande. I slutet av lektionen kommer du att se hur strategisk CSS-styling dramatiskt kan förbättra ditt projekt. Låt oss lägga till lite stil till ditt terrarium. ## Förföreläsningsquiz Förföreläsningsquiz ## Komma igång med CSS CSS ses ofta bara som "att göra saker fina", men det har en mycket bredare funktion. CSS är som att vara regissör för en film – du kontrollerar inte bara hur allt ser ut, utan hur det rör sig, svarar på interaktion och anpassar sig till olika situationer. Modern CSS är otroligt kapabelt. Du kan skriva kod som automatiskt anpassar layouter för telefoner, surfplattor och datorer. Du kan skapa mjuka animationer som guidar användarens uppmärksamhet dit det behövs. Resultaten kan bli mycket imponerande när allt fungerar tillsammans. Det här ska vi uppnå i den här lektionen: - Skapa en komplett visuell design för ditt terrarium med moderna CSS-tekniker - Utforska grundläggande koncept som kaskad, arv och CSS-väljare - Genomföra responsiv positionering och layoutstrategier - Bygga terrariumbehållaren med CSS-former och styling ### Förkunskapskrav Du bör ha slutfört HTML-strukturen för ditt terrarium från förra lektionen och ha den redo för styling. ### Ställa in din CSS-fil Innan vi kan börja styla måste vi koppla CSS till vår HTML. Denna koppling berättar för webbläsaren var den hittar stylinginstruktionerna för vårt terrarium. I din terrarium-mapp, skapa en ny fil som heter style.css och länka den i ditt HTML-dokuments <head>-sektion: Det här gör koden: - Skapar en koppling mellan dina HTML- och CSS-filer - Berättar för webbläsaren att ladda och använda stilarna från style.css - Använder attributet rel="stylesheet" för att specificera att detta är en CSS-fil - Refererar till sökvägen med href="./style.css" ## Förstå CSS-kaskaden Har du någonsin undrat varför CSS kallas "Cascading" Style Sheets? Stilar kaskadar ner likt ett vattenfall, och ibland krockar de med varandra. Tänk på hur militära kommandostrukturer fungerar – en generell order kan säga "alla trupper ska bära grönt", men en särskild order till din enhet kan säga "bär uniform för ceremonin". Den mer specifika instruktionen har företräde. CSS följer samma logik, och genom att förstå denna hierarki blir felsökning mycket enklare. ### Experimentera med kaskadprioritet Låt oss se kaskaden i praktiken genom att skapa en stilkonflikt. Börja med att lägga till en inline-style på din <h1>-tagg: Det här gör koden: - Applicerar röd färg direkt på <h1>-elementet med inline-styling - Använder style-attributet för att bädda in CSS direkt i HTML - Skapar den högst prioriterade stilregeln för detta specifika element Nästa steg, lägg till denna regel i din style.css-fil: Här har vi: - Definierat en CSS-regel som riktar sig till alla <h1>-element - Satt textfärgen till blå via en extern stylesheet - Skapat en mindre prioriterad regel jämfört med inline-stilar ✅ Kunskapscheck: Vilken färg visas i din webbapp? Varför vinner den färgen? Kan du tänka dig scenarier där du vill åsidosätta stilar? ## CSS-arv i praktiken CSS-arv fungerar som genetik – element ärver vissa egenskaper från sina föräldraelement. Om du sätter fontfamilj på body-elementet använder all text inuti automatiskt samma font. Det liknar hur familjen Habsburgs karaktäristiska käke gick i arv genom generationer utan att specificeras för varje individ. Men inte allt ärvs. Textstilar som typsnitt och färger ärvs, men layoutegenskaper som marginaler och ramar gör det inte. Precis som barn kan ärva fysiska drag men inte sina föräldrars modestyling. ### Observera font-arv Låt oss se arv i praktiken genom att sätta en fontfamilj på <body>-elementet: Detta händer här: - Sätter fontfamilj för hela sidan genom att rikta sig till <body>-elementet - Använder en font-stack med fallback-alternativ för bättre webbläsarkompatibilitet - Applicerar moderna systemfonter som ser bra ut på olika operativsystem - Säkerställer att alla underordnade element ärver detta typsnitt om det inte specifikt åsidosätts Öppna webbläsarens utvecklarverktyg (F12), navigera till Elements-fliken och inspektera ditt <h1>-element. Du kommer se att det ärver fontfamilj från body: ✅ Experimentera: Testa att sätta andra arvbara egenskaper på <body> som color, line-height eller text-align. Vad händer med din rubrik och andra element? ### 🔄 Pedagogisk check-in CSS-grundförståelse: Innan vi går vidare till väljare, se till att du kan: - ✅ Förklara skillnaden mellan kaskad och arv - ✅ Förutsäga vilken stil som vinner i en specificitetskonflikt - ✅ Identifiera vilka egenskaper som ärvs från föräldraelement - ✅ Korrekt koppla CSS-filer till HTML Snabb test: Om du har dessa stilar, vilken färg får ett <h1> inuti en <div class="special">? Svar: Röd (elementväljaren riktar direkt sig till h1) ## Bemästra CSS-väljare CSS-väljare är ditt sätt att rikta in dig på specifika element för styling. De fungerar som att ge exakta instruktioner – istället för att säga "huset", säger du "det blå huset med den röda dörren på Maple Street". CSS erbjuder olika sätt att vara specifik, och att välja rätt väljare är som att välja rätt verktyg för uppgiften. Ibland vill du styla varje dörr i kvarteret, och ibland bara en specifik dörr. ### Elementväljare (taggar) Elementväljare riktar sig till HTML-element baserat på deras taggnamn. De är perfekta för att sätta grundläggande stilar som gäller brett på din sida: Förstå dessa stilar: - Sätter konsekvent typografi över hela sidan med body-väljaren - Tar bort webbläsarens standardmarginaler och padding för bättre kontroll - Stylar alla rubrikelement med färg, centrering och avstånd - Använder rem-enheter för skalbar och tillgänglig typsnittsstorlek Medan elementväljare fungerar bra för generell styling, behöver du mer specifika väljare för att styla enskilda komponenter som växterna i ditt terrarium. ### ID-väljare för unika element ID-väljare använder #-symbol och riktar sig till element med specifika id-attribut. Eftersom ID:n måste vara unika på en sida är de perfekta för att styla individuella, speciella element som våra vänster- och högerbehållare för växterna. Låt oss skapa stylingen för terrariets sidobehållare där växterna kommer bo: Det här uppnår koden: - Positionerar behållare vid de yttersta vänster- och högersidorna med absolute positionering - Använder vh (viewporthöjd) enheter för responsiv höjd som anpassar sig till skärmstorlek - Applicerar box-sizing: border-box så padding ingår i total bredd - Tar bort onödiga px från nollvärden för renare kod - Sätter en subtil bakgrundsfärg som är mer behaglig än stark grå ✅ Kodkvalitetsutmaning: Lägg märke till att denna CSS bryter mot DRY-principen (Don't Repeat Yourself). Kan du refaktorera den med både ett ID och en klass? Förbättrad metod: ### Klassväljare för återanvändbara stilar Klassväljare använder .-symbolen och är perfekta när du vill applicera samma stil på flera element. Till skillnad från ID:n kan klasser återanvändas över hela din HTML, vilket gör dem idealiska för konsekventa stilmönster. I vårt terrarium behöver varje växt liknande styling men även individuell positionering. Vi använder en kombination av klasser för delade stilar och ID:n för unik positionering. Här är HTML-strukturen för varje växt: Viktiga element förklarade: - Använder class="plant-holder" för konsekvent containerstyling för alla växter - Applicerar class="plant" för gemensam bildstil och beteende - Inkluderar unikt id="plant1" för individuell positionering och JavaScript-interaktion - Ger beskrivande alt-text för skärmläsartillgänglighet Lägg nu till dessa stilar i din style.css-fil: Detta gör stilarna: - Skapar relativ positionering för plant-holder för att etablera en positioneringskontext - Sätter varje plant-holder till 13% höjd, så att alla växter får plats vertikalt utan scrollning - Flyttar hållarna något åt vänster för att bättre centrera växterna i sina behållare - Tillåter växterna att skalas responsivt med max-width och max-height - Använder z-index för att placera växterna ovanför andra terrariumelement - Lägger till en subtil hover-effekt med CSS-transitioner för bättre användarinteraktion ✅ Kritiskt tänkande: Varför behöver vi både .plant-holder och .plant-väljare? Vad skulle hända om vi försökte använda bara en? ## Förstå CSS-positionering CSS-positionering är som att vara scenregissör för ett skådespel – du bestämmer var varje skådespelare står och hur de rör sig på scenen. Vissa följer standardformationen, medan andra behöver specifik positionering för dramatisk effekt. När du förstår positionering blir många layoututmaningar hanterbara. Behöver du en navigeringsbar som stannar överst när användare scrollar? Positionering fixar det. Vill du ha en tooltip som dyker upp på en specifik plats? Det är också positionering. ### De fem positionvärdena ### Positionering i vårt terrarium Vårt terrarium använder en strategisk kombination av positioneringstyper för att skapa önskad layout: Så fungerar positioneringsstrategin: - Absoluta containers är borttagna från normalt dokumentflöde och fästa vid skärmens kanter - Relativa plant-hållare skapar en positioneringskontext men stannar i dokumentflöde - Absoluta plant kan positioneras precist inom sina relativa containers - Denna kombination tillåter växter att staplas vertikalt samtidigt som de kan positioneras individuellt ✅ Experimentera: Testa att ändra positioneringsvärdena och observera resultaten: - Vad händer om du ändrar .container från absolute till relative? - Hur ändras layouten om .plant-holder använder absolute istället för relative? - Vad händer när du byter .plant till relative positionering? ### 🔄 Pedagogisk Check-in CSS Positioneringsmästerskap: Ta en paus för att verifiera din förståelse: - ✅ Kan du förklara varför växter behöver absolut positionering för drag-och-släpp? - ✅ Förstår du hur relativa behållare skapar ett positioneringssammanhang? - ✅ Varför använder sidobehållarna absolut positionering? - ✅ Vad skulle hända om du helt tog bort positioneringsdeklarationer? Verklighetskoppling: Tänk på hur CSS-positionering speglar verklig layout: - Statisk: Böcker på en hylla (naturlig ordning) - Relativ: Flytta en bok lite men behålla dess plats - Absolut: Placera ett bokmärke på en exakt sidnummer - Fast: En klibbig lapp som syns när du bläddrar i sidor ## Bygga Terrariet med CSS Nu ska vi bygga en glasburk med enbart CSS – inga bilder eller grafikprogram behövs. Att skapa realistiskt glas, skuggor och djup med positionering och transparens visar CSS:s visuella möjligheter. Denna teknik speglar hur arkitekter inom Bauhaus-rörelsen använde enkla geometriska former för att skapa komplexa, vackra strukturer. När du förstår dessa principer kommer du känna igen CSS-tekniker bakom många webbdesigner. ### Skapa Glasburkens Komponenter Låt oss bygga terrariet burk-del för del. Varje del använder absolut positionering och procentbaserade storlekar för responsiv design: Förstå terrariets konstruktion: - Använder procentbaserade dimensioner för responsiv skalning över alla skärmstorlekar - Positionerar element absolut för att stapla och justera dem exakt - Tillämpa olika opacitetsvärden för att skapa glasets transparenseffekt - Implementerar lager med z-index så att växterna visas inne i burken - Lägger till subtil box-skugga och förfinade hörnradier för mer realistiskt utseende ### Responsiv Design med Procent Lägg märke till att alla dimensioner använder procent istället för fasta pixelvärden: Varför detta är viktigt: - Säkerställer att terrariet skalar proportionellt på alla skärmstorlekar - Bibehåller de visuella relationerna mellan burkens delar - Ger en konsekvent upplevelse från mobiltelefoner till stora skrivbordsskärmar - Tillåter designen att anpassa sig utan att bryta det visuella upplägget ### CSS-enheter i Praktiken Vi använder rem-enheter för border-radius, vilka skalar i förhållande till rotfonstorleken. Detta skapar mer tillgängliga designer som respekterar användarens fontinställningar. Läs mer om CSS relativa enheter i den officiella specifikationen. ✅ Visuell experimentering: Prova att ändra dessa värden och observera effekterna: - Ändra burkens opacitet från 0.5 till 0.8 – hur påverkar det glasets utseende? - Justera jordfärgen från #3a241d till #8B4513 – vilken visuell effekt ger det? - Modifiera jordens z-index till 2 – vad händer med lagringen? ### 🔄 Pedagogisk Check-in Förstå CSS Visuell Design: Bekräfta din förståelse av visuell CSS: - ✅ Hur skapar procentbaserade dimensioner responsiv design? - ✅ Varför skapar opacitet glasets transparenseffekt? - ✅ Vilken roll spelar z-index i lagring av element? - ✅ Hur skapar border-radius värden burkens form? Designprincip: Lägg märke till hur vi bygger komplexa visuella element från enkla former: 1. Rektanglar → Rundade rektanglar → Burkkomponenter 2. Platta färger → Opacitet → Glaseffekt 3. Enskilda element → Layerad komposition → 3D-utseende --- ## GitHub Copilot Agent Challenge 🚀 Använd Agent-läget för att lösa följande utmaning: Beskrivning: Skapa en CSS-animation som får terrarieväxterna att mjukt svaja fram och tillbaka, vilket simulerar en naturlig bris. Detta hjälper dig att träna CSS-animationer, transformeringar och keyframes samtidigt som terrariets visuella uttryck förbättras. Prompt: Lägg till CSS keyframe-animationer för att få växterna i terrariet att svaja försiktigt från sida till sida. Skapa en svängande animation som roterar varje planta lätt (2-3 grader) åt vänster och höger med en varaktighet på 3-4 sekunder, och applicera den på .plant-klassen. Se till att animationen körs oändligt och har en easing-funktion för naturlig rörelse. Läs mer om agentläge här. ## 🚀 Utmaning: Lägg till Glansreflektioner i Glaset Redo att förstärka ditt terrarium med realistiska glasreflektioner? Denna teknik lägger till djup och realism i designen. Du skapar subtila högdagrar som simulerar hur ljus reflekteras från glasytor. Detta liknar hur renässansmålare som Jan van Eyck använde ljus och reflektion för att få målat glas att se tredimensionellt ut. Så här ser målet ut: Din uppgift: - Skapa subtila vita eller ljusa ovala former för glasreflektioner - Placera dem strategiskt på burkens vänstra sida - Applicera lämplig opacitet och suddighet för realistisk ljusreflektion - Använd border-radius för att skapa organiska, bubbel-liknande former - Experimentera med gradienter eller box-skuggor för ökad realism ## Quiz efter Föreläsning Quiz efter föreläsning ## Utöka Din CSS-Kunskap CSS kan kännas komplext i början, men att förstå dessa kärnkoncept ger en solid grund för mer avancerade tekniker. Dina nästa CSS-lärdomsområden: - Flexbox – förenklar justering och fördelning av element - CSS Grid – ger kraftfulla verktyg för att skapa komplexa layouter - CSS-variabler – minskar repetition och förbättrar underhållbarhet - Responsiv design – säkerställer att sajter fungerar bra på olika skärmstorlekar ### Interaktiva Inlärningsresurser Öva dessa koncept med dessa engagerande, praktiska spel: - 🐸 Flexbox Froggy – Bli mästare på Flexbox genom roliga utmaningar - 🌱 Grid Garden – Lär dig CSS Grid genom att odla virtuella morötter - 🎯 CSS Battle – Testa dina CSS-färdigheter med kodningsutmaningar ### Ytterligare Lärande För komplett CSS-grundkunskap, genomför denna Microsoft Learn-modul: Style your HTML app with CSS ### ⚡ Vad Du Kan Göra på Nästa 5 Minuter - [ ] Öppna DevTools och inspektera CSS-stilar på vilken webbplats som helst med Elements-panelen - [ ] Skapa en enkel CSS-fil och länka den till en HTML-sida - [ ] Prova att ändra färger med olika metoder: hex, RGB och namngivna färger - [ ] Öva boxmodellen genom att lägga till padding och marginal till en div ### 🎯 Vad Du Kan Uppnå den Närmaste Timmaren - [ ] Slutför quizet efter lektionen och repetera CSS-grunder - [ ] Styla din HTML-sida med typsnitt, färger och avstånd - [ ] Skapa en enkel layout med flexbox eller grid - [ ] Experimentera med CSS-transitioner för mjuka effekter - [ ] Öva responsiv design med media queries ### 📅 Din Veckolånga CSS-äventyr - [ ] Slutför terrarium-stylinguppgiften med kreativ flair - [ ] Bemästra CSS Grid genom att bygga en fotogalleri-layout - [ ] Lär dig CSS-animationer för att ge liv åt dina designer - [ ] Utforska CSS-preprocessorer som Sass eller Less - [ ] Studera designprinciper och tillämpa dem på din CSS - [ ] Analysera och återskapa intressanta designer du hittar online ### 🌟 Din Månadslånga Design-Mästerskap - [ ] Bygg ett komplett responsivt webbdesignsystem - [ ] Lär dig CSS-in-JS eller utility-first-ramverk som Tailwind - [ ] Bidra till open source-projekt med CSS-förbättringar - [ ] Bemästra avancerade CSS-koncept som CSS anpassade egenskaper och containment - [ ] Skapa återanvändbara komponentbibliotek med modulär CSS - [ ] Mentor andra som lär sig CSS och dela designkunskap ## 🎯 Din CSS Mästerskapstidslinje ### 🛠️ Din CSS Verktygslåda Sammanfattning Efter denna lektion har du nu: - Förståelse för kaskad: Hur stilar ärvs och åsidosätts - Mästerskap i selektorer: Exakt målinriktning med element, klasser och ID:n - Positioneringsfärdigheter: Strategisk placering och lagerindelning av element - Visuell design: Skapa glaseffekter, skuggor och transparens - Responsiva tekniker: Procentbaserad layout som anpassar sig till alla skärmar - Kodorganisation: Ren, underhållbar CSS-struktur - Moderna metoder: Användning av relativa enheter och tillgängliga designmönster Nästa steg: Ditt terrarium har nu både struktur (HTML) och stil (CSS). Slutlektionen lägger till interaktivitet med JavaScript! ## Uppgift CSS Omstrukturering --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Ansvarsfriskrivning: Detta dokument har översatts med hjälp av AI-översättningstjänsten Co-op Translator. Även om vi strävar efter noggrannhet, var vänlig uppmärksam på att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess originalspråk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för några missförstånd eller feltolkningar som uppstår till följd av användningen av denna översättning. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Mradi wa Terrarium Sehemu ya 1: Utangulizi wa HTML
HTML, au HyperText Markup Language, ni msingi wa kila tovuti uliyoitembelea. Fikiria HTML kama mfupa wa mifupa unaotoa muundo kwa kurasa za wavuti – inaeleza wapi maudhui yanapaswa kuwekwa, jinsi yanavyopangwa, na kila kipande kinachowakilisha nini. Ingawa CSS baadaye itafunika HTML yako kwa rangi na mpangilio, na JavaScript itakuleta uhai kupitia mwingiliano, HTML hutoa muundo muhimu unaofanya kila kitu kingine kuwa chawezekana. Katika somo hili, utaunda muundo wa HTML kwa ajili ya kiolesura cha terrarium pepe. Mradi huu wa vitendo utakufundisha dhana za msingi za HTML huku ukijenga kitu kinachovutia kwa macho. Utajifunza jinsi ya kupanga maudhui kwa kutumia vipengele vya maana, kufanya kazi na picha, na kuunda msingi wa programu ya wavuti yenye mwingiliano. Mwisho wa somo hili, utakuwa na ukurasa wa HTML unaofanya kazi unaoonyesha picha za mimea katika safu zilizopangwa vizuri, tayari kwa urembo katika somo lijalo. Usijali kama inaonekana rahisi mwanzoni – hiyo ndio HTML inavyopaswa kufanya kabla ya CSS kuongeza urembo wa kuona. ## Jaribio la Kabla ya Mhadhara Jaribio kabla ya mhadhara ## Kuandaa Mradi Wako Kabla hatujaingia kwenye msimbo wa HTML, hebu tuandae nafasi iliyofaa ya kazi kwa ajili ya mradi wako wa terrarium. Kuunda muundo wa faili uliopangwa vizuri tangu mwanzo ni tabia muhimu itakayokuhudumia vyema katika safari yako ya maendeleo ya wavuti. ### Kazi: Unda Muundo wa Mradi Wako Utaunda folda maalum kwa ajili ya mradi wako wa terrarium na kuongeza faili yako ya kwanza ya HTML. Hapa kuna njia mbili unazoweza kutumia: Chaguo 1: Kutumia Visual Studio Code 1. Fungua Visual Studio Code 2. Bofya "File" → "Open Folder" au tumia Ctrl+K, Ctrl+O (Windows/Linux) au Cmd+K, Cmd+O (Mac) 3. Unda folda mpya iitwayo terrarium na uichague 4. Katika dirisha la Explorer, bofya ikoni ya "New File" 5. Panga faili yako index.html Chaguo 2: Kutumia Amri za Terminal Hivi ndivyo amri hizi zinavyofanikisha: - Unda saraka mpya iitwayo terrarium kwa ajili ya mradi wako - Ingiza saraka ya terrarium - Unda faili tupu index.html - Fungua faili hiyo ndani ya Visual Studio Code kwa ajili ya kuhariri ## Kuelewa Muundo wa Hati ya HTML Kila hati ya HTML hutegemea muundo maalum unaohitajika na vivinjari kuelewa na kuonyesha kwa usahihi. Fikiria muundo huu kama barua rasmi – ina vipengele vinavyohitajika kwa mpangilio maalum vinavyosaidia mpokeaji (hii ni vivinjari) kusindika maudhui ipasavyo. Tuanze kwa kuongeza msingi muhimu ambao kila hati ya HTML inahitaji. ### Tamko la DOCTYPE na Kipengele cha Mizizi Mistari miwili ya kwanza ya faili yoyote ya HTML hutoa "utangulizi" wa hati kwa kivinjari: Kuelewa kinachofanywa na msimbo huu: - Tangaza aina ya hati kama HTML5 kwa kutumia <!DOCTYPE html> - Tengeneza kipengele cha mizizi <html> ambacho kitaweka maudhui yote ya ukurasa - Weka viwango vya wavuti vya kisasa kwa ajili ya uonyesho sahii wa kivinjari - Hakikisha uonyesho thabiti kati ya vivinjari na vifaa tofauti ### 🔄 Kukagua Kipengele cha Mafunzo Pumzika na Fikiria: Kabla ya kuendelea, hakikisha unaelewa: - ✅ Kwa nini kila hati ya HTML inahitaji tamko la DOCTYPE - ✅ Kipengele cha mizizi <html> kina nini ndani yake - ✅ Jinsi muundo huu unavyosaidia vivinjari kuonyesha kurasa kwa usahihi Jaribio la Haraka la Kujikokotoa: Je, unaweza kuelezea kwa maneno yako mwenyewe maana ya "uonyesho unaozingatia viwango"? ## Kuongeza Metadata Muhimu za Hati Sehemu ya <head> ya hati ya HTML ina habari muhimu ambayo vivinjari na injini za utafutaji zinahitaji, lakini wageni hawaiioni moja kwa moja kwenye ukurasa. Fikiria kama habari "nyuma ya pazia" inayosaidia ukurasa wako wa wavuti kufanya kazi vizuri na kuonekana kwa usahihi kwenye vifaa na majukwaa tofauti. Metadata hii inawaambia vivinjari jinsi ya kuonyesha ukurasa wako, ni encoding gani ya herufi itumike, na jinsi ya kushughulikia ukubwa tofauti wa skrini – zote ni muhimu kwa kuunda kurasa za wavuti za kitaalamu na zinazo patikana. ### Kazi: Ongeza Sehemu ya Kichwa cha Hati Tumia sehemu hii ya <head> kati ya lebo yako ya kufungua na kufunga <html>: Kuvaa vipengele hivi vinavyofanikisha: - Weka kichwa cha ukurasa kinachoonekana kwenye tabia za kivinjari na matokeo ya utafutaji - Taja encoding ya herufi UTF-8 kwa uonyesho sahihi wa maandishi dunia nzima - Hakikisha muafaka na matoleo ya kisasa ya Internet Explorer - Panga muundo unaojulikana kwa kuweka viewport ili iendane na upana wa kifaa - Dhibiti kiwango cha mviringo wa kuanzishwa ili kuonyesha maudhui kwa ukubwa wa asili ## Kujenga Mwili wa Hati Kipengele cha <body> kina maudhui yote yanayoonekana ya ukurasa wako wa wavuti – kila kitu watumiaji wataona na kushirikiana nacho. Wakati sehemu ya <head> ilitoa maelekezo kwa kivinjari, sehemu ya <body> ina maudhui halisi: maandishi, picha, vitufe, na vipengele vingine vinavyounda kiolesura chako cha mtumiaji. Tuweke muundo wa mwili na kuelewa jinsi lebo za HTML zinavyofanya kazi pamoja kuunda maudhui yenye maana. ### Kuelewa Muundo wa Lebo za HTML HTML hutumia lebo za jozi kuainisha vipengele. Lebo nyingi zina lebo ya ufunguzi kama <p> na lebo ya kufunga kama </p>, na maudhui kati yao: <p>Hello, world!</p>. Hii huunda kipengele cha aya chenye maandishi "Hello, world!". ### Kazi: Ongeza Kipengele cha Mwili Sasisha faili yako ya HTML kujumuisha kipengele cha <body>: Huu muundo kamili unatoa: - Imeweka mfumo wa msingi wa hati ya HTML5 - Inajumuisha metadata muhimu kwa uonyesho sahihi wa kivinjari - Imetengeneza mwili tupu tayari kwa maudhui yako yanayoonekana - Inafuata mbinu bora za maendeleo ya wavuti za kisasa Sasa uko tayari kuongeza vipengele vinavyoonekana vya terrarium yako. Tutatumia vipengele vya <div> kama vyombo vya kuandaa sehemu tofauti za maudhui, na vipengele vya <img> kuonyesha picha za mimea. ### Kufanya kazi na Picha na Vyombo vya Mpangilio Picha ni maalum katika HTML kwa sababu hutumia lebo za "kujifunga" yenyewe. Tofauti na vipengele kama <p></p> vinavyozunguka maudhui, lebo <img> ina taarifa zote inazohitaji ndani ya lebo yenyewe kwa kutumia sifa kama src kwa njia ya faili ya picha na alt kwa upatikanaji. Kabla ya kuongeza picha kwenye HTML yako, utahitaji kupanga faili zako za mradi vizuri kwa kuunda saraka ya picha na kuongeza picha za mimea. Kwanza, andaa picha zako: 1. Unda saraka iitwayo images ndani ya folda ya mradi wako wa terrarium 2. Pakua picha za mimea kutoka saraka ya suluhisho (picha 14 za mimea jumla) 3. Nakili picha zote za mimea ndani ya saraka yako mpya ya images ### Kazi: Unda Mpangilio wa Onyesho la Mimea Sasa ongeza picha za mimea zilizopangwa katika safu mbili kati ya lebo zako za <body></body>: Hatua kwa hatua, hii ndiyo kinachotokea katika msimbo huu: - Unda chombo kikuu cha ukurasa kwa id="page" kushikilia maudhui yote - Weka vyombo viwili vya safu: left-container na right-container - Panga mimea 7 katika safu ya kushoto na mimea 7 katika safu ya kulia - Zungusha kila picha ya mmea katika div ya plant-holder kwa upangaji wa mtu binafsi - Tumia majina ya darasa yanayolingana kwa urembo wa CSS kwenye somo lijalo - Pangilia vitambulisho vya kipekee kwa kila picha ya mmea kwa ajili ya mwingiliano wa JavaScript baadaye - Jumuisha njia sahihi za faili kuelekeza kwenye saraka ya picha ### 🔄 Kukagua Kipengele cha Mafunzo Kuelewa Muundo: Chukua muda kuangalia muundo wako wa HTML: - ✅ Je, unaweza kutambua vyombo vikuu katika mpangilio wako? - ✅ Je, unaelewa kwa nini kila picha ina kitambulisho cha kipekee? - ✅ Unaelezaje kusudi la div za plant-holder? Ukaguzi wa Kuona: Fungua faili yako ya HTML kwa kivinjari. Unapaswa kuona: - Orodha rahisi ya picha za mimea - Picha zilizopangwa katika safu mbili - Muundo rahisi, usio na urembo Kumbuka: Muonekano huu wa kawaida ndio HTML inavyopaswa kuonekana kabla ya urembo wa CSS! Kwa alama hii iliyoongezwa, mimea itaonekana kwenye skrini, ingawa haitakuwa imerekebishwa vyema bado – hiyo ni kazi ya CSS katika somo lijalo! Kwa sasa, una msingi thabiti wa HTML unaopanga maudhui yako kwa usahihi na kufuata mbinu bora za upatikanaji. ## Kutumia HTML ya Kimaana kwa Upatikanaji HTML ya kimaana ina maana ya kuchagua vipengele vya HTML kwa msingi wa maana na kusudi lao, si kwa muonekano tu. Unapojumuisha lebo za maana, unawasilisha muundo na maana ya maudhui yako kwa vivinjari, injini za utafutaji, na teknolojia za msaada kama wasomaji wa skrini. Njia hii inafanya tovuti zako zipatikane kwa urahisi zaidi kwa watumiaji wenye ulemavu na husaidia injini za utafutaji kuelewa maudhui yako vyema zaidi. Ni kanuni ya msingi ya maendeleo ya wavuti ya kisasa inayounda uzoefu bora kwa kila mtu. ### Ongeza Kichwa cha Ukurasa cha Kimaana Tuweke kichwa kinachofaa kwa ukurasa wako wa terrarium. Tumia mstari huu mara tu baada ya lebo yako ya kufungua <body>: Kwa nini lebo za maana ni muhimu: - Husaidia wasomaji wa skrini kuvinjari na kuelewa muundo wa ukurasa - Boresha uboreshaji wa injini za utafutaji (SEO) kwa kuweka uwazi wa hatua za maudhui - Boresha upatikanaji kwa watumiaji wenye ulemavu wa kuona au tofauti za akili - Unda uzoefu mzuri wa mtumiaji kwenye vifaa na majukwaa yote - Fuata viwango vya wavuti na mbinu bora za maendeleo ya kitaalamu Mifano ya chaguo za maana dhidi ya zisizo za maana: ## Kuunda Kifungasha cha Terrarium Sasa tuongeze muundo wa HTML kwa terrarium yenyewe – chombo cha kioo ambapo mimea hatimaye itawekwa. Sehemu hii inaonyesha dhana muhimu: HTML hutoa muundo, lakini bila urembo wa CSS, vipengele hivi havitaonekana bado. Alama za terrarium zinatumia majina ya darasa ya kueleza ambayo yatafanya urembo wa CSS kuwa wa busara na unaoweza kudumishwa katika somo lijalo. ### Kazi: Ongeza Muundo wa Terrarium Tumia alama hii juu ya lebo ya mwisho ya </div> (kabla ya lebo ya kufunga ya chombo cha ukurasa): Kuelewa muundo huu wa terrarium: - Unda chombo kuu cha terrarium chenye kitambulisho cha kipekee kwa ajili ya urembo - Inabainisha vipengele tofauti kwa kila sehemu ya kuona (juu, kuta, udongo, chini) - Inajumuisha vipengele vilivyo ndani kwa athari za mwangaza wa glasi (vipengele vyenye kung'aa) - Inatumia majina ya darasa yenye maelezo yanayoonyesha wazi madhumuni ya kila kipengele - Inatayarisha muundo kwa ajili ya mtindo wa CSS utakaounda muonekano wa terrarium ya glasi ### 🔄 Ukaguzi wa Mafunzo Uwezo wa Muundo wa HTML: Kabla ya kuendelea, hakikisha unaweza: - ✅ Eleza tofauti kati ya muundo wa HTML na muonekano wa kuona - ✅ Tambua vipengele vya semantic na visivyo semantic vya HTML - ✅ Eleza jinsi markup sahihi inavyosaidia upatikanaji - ✅ Tambua muundo kamili wa mti wa waraka Jaribu Kuelewa Kwako: Jaribu kufungua faili yako ya HTML kwenye kivinjari bila JavaScript na CSS. Hii inaonyesha muundo wa semantic safi uliounda! --- ## Changamoto ya GitHub Copilot Agent Tumia hali ya Agent kukamilisha changamoto ifuatayo: Maelezo: Unda muundo wa semantic wa HTML kwa sehemu ya mwongozo wa utunzaji wa mimea ambao unaweza kuongezwa kwenye mradi wa terrarium. Amri: Unda sehemu ya semantic ya HTML inayojumuisha kichwa kuu "Mwongozo wa Utunzaji wa Mimea", sehemu tatu ndogo zilizo na vichwa "Kumwagilia", "Mahitaji ya Mwangaza", na "Utunzaji wa Udongo", kila moja ikiwa na aya ya maelezo kuhusu utunzaji wa mimea. Tumia lebo sahihi za semantic za HTML kama <section>, <h2>, <h3>, na <p> kupanga yaliyomo ipasavyo. Jifunze zaidi kuhusu hali ya agent hapa. ## Changamoto ya Kuchunguza Historia ya HTML Kujifunza Kuhusu Mabadiliko ya Wavuti HTML imeendelea sana tangu Tim Berners-Lee alipotengeneza kivinjari cha kwanza cha wavuti CERN mwaka 1990. Lebo za zamani kama <marquee> sasa zimefutwa kwa sababu hazifanyi kazi vizuri na viwango vya kisasa vya upatikanaji na kanuni za muundo unaojibu. Jaribu Jaribio Hili: 1. Kwa muda usifunge kichwa chako cha <h1> ndani ya lebo ya <marquee>: <marquee><h1>My Terrarium</h1></marquee> 2. Fungua ukurasa wako kwenye kivinjari na angalia athari ya kusogea 3. Fikiria kwa nini lebo hii ilifutwa (kibukizi: fikiria uzoefu wa mtumiaji na upatikanaji) 4. Ondoa lebo ya <marquee> na rudi kwenye markup ya semantic Maswali ya Tafakari: - Je, kichwa kinachosogea kinaweza kunaathiri vipi watumiaji wenye matatizo ya kuona au hisia za mwendo? - Ni mbinu gani za kisasa za CSS zinaweza kuleta athari kama hizi kwa upatikanaji bora? - Kwa nini ni muhimu kutumia viwango vya wavuti vya sasa badala ya vipengele vilivyofutwa? Tafuta zaidi kuhusu vipengele vya HTML vilivyotumika na vilivyofutwa kuelewa jinsi viwango vya wavuti vinavyoendelea kuboresha uzoefu wa mtumiaji. ## Mtihani wa Baada ya Somo Mtihani wa baada ya somo ## Ukaguzi & Kujifunza Binafsi Zidi Ujuzi Wako wa HTML HTML imekuwa msingi wa wavuti kwa zaidi ya miaka 30, ikibadilika kutoka lugha rahisi ya uandikaji waraka hadi jukwaa lenye ustadi wa kujenga programu za mwingiliano. Kuelewa mabadiliko haya kunakusaidia kuthamini viwango vya wavuti vya kisasa na kufanya maamuzi bora ya maendeleo. Njia Zinazopendekezwa za Kujifunza: 1. Historia na Maendeleo ya HTML - Fanya utafiti wa ratiba kutoka HTML 1.0 hadi HTML5 - Chunguza kwa nini lebo fulani zimefutwa (upatikanaji, urafiki wa simu, uratibu) - Tafuta vipengele vipya vya HTML na mapendekezo 2. Uchunguzi wa Semantic HTML - Soma orodha kamili ya vipengele vya semantic vya HTML5 - Jifunze kutambua lini kutumia <article>, <section>, <aside>, na <main> - Jifunze kuhusu sifa za ARIA kwa upatikanaji ulioimarishwa 3. Maendeleo ya Wavuti ya Kisasa - Tafuta kujenga tovuti zinazo reagiza kwenye Microsoft Learn - Elewa jinsi HTML inavyounganika na CSS na JavaScript - Jifunze kuhusu ufanisi wa wavuti na mbinu bora za SEO Maswali ya Tafakari: - Ndege gani za HTML zilizofutwa ulizogundua, na kwa nini ziliondolewa? - Ni vipengele vipya vya HTML vilivyo pendekezwa kwa matoleo yajayo ni vipi? - HTML ya semantic huchangia vipi upatikanaji wa wavuti na SEO? ### ⚡ Unachoweza Kufanya Katika Dakika 5 Zijazo - [ ] Fungua DevTools (F12) na angalia muundo wa HTML wa tovuti unayopenda - [ ] Tengeneza faili rahisi ya HTML kwa lebo za msingi: <h1>, <p>, na <img> - [ ] Thibitisha HTML yako kwa kutumia W3C HTML Validator mtandaoni - [ ] Jaribu kuongeza maoni kwenye HTML yako kwa kutumia <!-- maoni --> ### 🎯 Unachoweza Kufanikisha Saa Hii - [ ] Kamilisha mtihani wa baada ya somo na pima dhana za semantic HTML - [ ] Unda tovuti rahisi kuhusu wewe mwenyewe kwa muundo sahihi wa HTML - [ ] Jaribu ngazi tofauti za vichwa na lebo za uandikaji wa maandishi - [ ] Ongeza picha na viungo kwa mazoezi ya kuingiza multimedia - [ ] Fanya utafiti wa vipengele vya HTML5 ambavyo hujajaribu bado ### 📅 Safari Yako ya HTML Kwa Wiki Nzima - [ ] Kamilisha kazi ya mradi wa terrarium kwa markup ya semantic - [ ] Unda tovuti inayoweza kupatikana kwa kutumia maelezo na majukumu ya ARIA - [ ] Fanya mazoezi ya uundaji wa fomu kwa aina mbalimbali za pembejeo - [ ] Chunguza APIs za HTML5 kama localStorage au geolocation - [ ] Soma mifumo ya HTML ya kujibu na muundo wa kwanza kwa simu - [ ] Pitia msimbo wa HTML wa watengenezaji wengine kwa mbinu bora ### 🌟 Msingi Wako wa Wavuti Kwa Mwezi Mzima - [ ] Tengeneza tovuti ya wasifu inaonyesha umahiri wako wa HTML - [ ] Jifunze templating ya HTML kwa mfumo kama Handlebars - [ ] Changia miradi ya chanzo wazi kwa kuboresha nyaraka za HTML - [ ] Jifunze dhana za juu za HTML kama vipengele maalum - [ ] Unganisha HTML na mifumo ya CSS na maktaba za JavaScript - [ ] Fundisha wengine wanaojifunza misingi ya HTML ## 🎯 Ratiba Yako ya Umahiri wa HTML ### 🛠️ Muhtasari wa Zana Zako za HTML Baada ya kumaliza somo hili, sasa una: - Muundo wa Waraka: Msingi kamili wa HTML5 na DOCTYPE sahihi - Markup ya Semantic: Lebo zenye maana zinazoongeza upatikanaji na SEO - Uingiliaji wa Picha: Mpangilio sahihi wa faili na mazoea ya maandishi mbadala - Mabenki ya Mpangilio: Matumizi ya kimkakati ya divs na majina ya darasa yenye maelezo - Uelewa wa Upatikanaji: Kuelewa urambazaji wa wasikilizaji wa skrini - Viwango vya Kisasa: Mazoea ya sasa ya HTML5 na ujuzi wa lebo zilizofutwa - Msingi wa Mradi: Msingi imara wa mtindo wa CSS na mwingiliano wa JavaScript Hatua Inayofuata: Muundo wako wa HTML uko tayari kwa mtindo wa CSS! Msingi wa semantic uliouunda utafanya somo lijalo kuwa rahisi kuelewa. ## Kazi ya Nyumbani Zoezi la HTML: Jenga mfano wa blogi --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Kiasi cha Majumla: Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI Co-op Translator. Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kwamba tafsiri za otomatiki zinaweza kuwa na makosa au kasoro. Hati ya asili katika lugha yake ya asili inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, tafsiri ya kitaalamu ya kibinadamu inashauriwa. Hatuwajibiki kwa kutoelewana au tafsiri potovu zinazotokana na matumizi ya tafsiri hii. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Mradi wa Terrarium Sehemu ya 2: Utangulizi wa CSS
Kumbuka jinsi terrarium yako ya HTML ilivyoonekana ya kawaida? CSS ndio tunapobadilisha muundo huo rahisi kuwa kitu kinachovutia kwa macho. Kama HTML ni kama kujenga fremu ya nyumba, basi CSS ni kila kitu kinachofanya iwe nyumbani - rangi za rangi, upangaji wa samani, mwanga, na jinsi vyumba vinavyolimbikizana. Fikiria jinsi Ikulu ya Versailles ilivyoanza kama chumba cha uwindaji rahisi, lakini makini katika mapambo na upangaji kulitawanya kuwa moja ya majengo mazuri zaidi duniani. Leo, tutabadilisha terrarium yako kutoka kuwa ya kawaida hadi kuwa nzuri. Utajifunza jinsi ya kuweka vipengele kwa usahihi, kufanya mipangilio itafakari ukubwa tofauti wa skrini, na kuunda mvuto wa kuona unaofanya tovuti kuwa za kuvutia. Mwisho wa somo hili, utaona jinsi mtindo wa CSS uliofikirika unaweza kuboresha mradi wako kwa kiasi kikubwa. Hebu tunaongeze mtindo kwenye terrarium yako. ## Mtihani Kabla ya Mafunzo Mtihani kabla ya mafunzo ## Kuanzisha na CSS CSS mara nyingi huhesabiwa kama "kufanya mambo yawe mazuri," lakini ina matumizi makubwa zaidi. CSS ni kama kuwa mkurugenzi wa filamu - una controlar si tu jinsi kila kitu kinavyoonekana, bali jinsi kinavyosogea, kinavyojibu mwingiliano, na kinavyobadilika kulingana na hali. CSS ya kisasa ina uwezo mkubwa sana. Unaweza kuandika msimbo unaoendana na mipangilio ya simu, vidonge, na kompyuta za mezani. Unaweza kuunda michoro laini inayowiongoza watumiaji mahali panapohitajika. Matokeo yanaweza kuwa ya kushangaza wakati kila kitu kinapofanya kazi pamoja. Hivi ndivyo tutakavyofanikisha somo hili: - Kuunda muundo kamilifu wa kuona kwa terrarium yako kwa kutumia mbinu za kisasa za CSS - Kuchambua dhana za msingi kama mtiririko, urithi, na wachaguzi wa CSS - Kutekeleza mikakati ya upangaji unaojibu na mipangilio - Kujenga chombo cha terrarium kwa kutumia maumbo na mitindo ya CSS ### Mahitaji ya Awali Unapaswa kuwa umekamilisha muundo wa HTML wa terrarium yako kutoka somo lililopita na kuwa tayari kuupamba. ### Kuweka Faili Yako la CSS Kabla hatujaweza kuanza kupamba, tunahitaji kuunganisha CSS na HTML yetu. Muunganisho huu unaambia kivinjari wapi kupata maagizo ya mitindo kwa terrarium yetu. Katika folda ya terrarium yako, tengeneza faili mpya iitwayo style.css, kisha iunganishe katika sehemu ya <head> ya hati yako ya HTML: Hivi ndivyo msimbo huu unavyofanya kazi: - Kuunda muunganisho kati ya faili za HTML na CSS zako - Kuambia kivinjari kupakia na kutumia mitindo kutoka style.css - Kutumia sifa rel="stylesheet" kubainisha hii ni faili la CSS - Kurejelea njia ya faili kwa href="./style.css" ## Kuelewa Mtiririko wa CSS Je, umewahi kujiuliza kwa nini CSS inaitwa "Cascading" Style Sheets? Mitindo hutiririka chini kama maji ya mto, na wakati mwingine hugongana. Fikiria jinsi jeshi linavyofanya agizo la kijeshi - agizo la mkuu linaweza kusema "wanajeshi wote vaa kijani," lakini agizo mahususi kwa kikosi chako linaweza kusema "vaa sare za bluu kwa sherehe." Maelekezo mahususi yanashinda. CSS hufuata mantiki kama hiyo, na kuelewa ngazi hii hufanya utatuzi wa matatizo kuwa rahisi. ### Kujaribu Kipaumbele cha Mtiririko Tuchunguze mtiririko kwa kuunda mgongano wa mtindo. Kwanza, ongeza mtindo wa moja kwa moja kwenye lebo <h1> yako: Hivi msimbo huu unavyofanya: - Unaweka rangi nyekundu moja kwa moja kwa kipengele <h1> kwa mtindo wa ndani - Kutumia sifa ya style kuweka CSS ndani kabisa ya HTML - Kuunda sheria ya mtindo yenye kipaumbele cha juu kabisa kwa kipengele hiki maalum Kisha, ongeza sheria hii kwenye faili lako la style.css: Katika hapo juu, tumekuwa: - Kufafanua sheria ya CSS inayolenga vipengele vyote vya <h1> - Kuweka rangi ya maandishi kuwa samawati kwa kutumia karatasi ya mitindo ya nje - Kuunda sheria ya kipaumbele cha chini ikilinganishwa na mitindo ya ndani ✅ Tambua Maarifa: Ni rangi gani inaonekana kwenye programu yako ya wavuti? Kwa nini rangi hiyo inashinda? Unaweza kufikiria hali gani ambapo ungependa kubadili mitindo? ## Urithi wa CSS Katika Vitendo Urithi wa CSS hufanya kazi kama vinasaba - vipengele virithi mali fulani kutoka kwa vipengee vyao vya mzazi. Ikiwa utaweka familia ya font kwenye kipengele cha mwili, maandishi yote ndani yake hutumia font hiyo moja kwa moja. Hii ni kama jinsi mwili wa kipekee wa familia ya Habsburg ulivyobaki kwa vizazi bila kuainishwa kwa kila mtu kando kando. Hata hivyo, si kila kitu hurithiwa. Mitindo ya maandishi kama fonti na rangi hurithiwa, lakini mali za mipangilio kama mipaka na mipaka siyo. Kama watoto wanaweza kurithi sifa za mwili lakini si mitindo ya mavazi ya wazazi wao. ### Kuangalia Urithi wa Fonti Tuchunguze urithi kwa kuweka familia ya font kwenye kipengele cha <body>: Kuvunja kile kinachotokea hapa: - Kuweka familia ya fonti kwa ukurasa mzima kwa kulenga kipengele cha <body> - Kutumia orodha ya fonti na chaguo la kurudisha nyuma kwa msaada bora wa vivinjari - Kuongeza fonti za mfumo wa kisasa zinazoonekana vizuri kwenye mifumo tofauti ya uendeshaji - Kuhakikisha vipengele vyote vya watoto virithia fonti hii isipokuwa vikaangaliwe pia Fungua zana za maendeleo za kivinjari chako (F12), nenda kwenye tab ya Elements, na kagua kipengele chako cha <h1>. Utaona kinarithi familia ya fonti kutoka kwa mwili: ✅ Jaribu: Jaribu kuweka mali nyingine zinazorithiwa kwenye <body> kama color, line-height, au text-align. Nini kinakutokea kwa kichwa chako na vipengele vingine? ### 🔄 Ukaguzi wa Mafunzo Uelewa wa Msingi wa CSS: Kabla ya kuingia kwa wachaguzi, hakikisha unajua: - ✅ Eleza tofauti kati ya mtiririko na urithi - ✅ Tabiri ni mtindo gani utashinda kwenye mgongano wa uelekeo mahususi - ✅ Tambua mali gani hurithiwa kutoka kwa vipengele vya mzazi - ✅ Unganisha faili za CSS kwa HTML ipasavyo Jaribio la Haraka: Ikiwa una mitindo hii, rangi gani itakuwa kwenye <h1> ndani ya <div class="special">? Jibu: Nyekundu (mchaguo wa kipengele unamulika h1 moja kwa moja) ## Kujua Kusoma Wachaguzi wa CSS Wachaguzi wa CSS ni njia yako ya kulenga vipengele maalum kwa ajili ya mitindo. Hufanya kazi kama kutoa maelekezo sahihi - badala ya kusema "nyumba," unaweza kusema "nyumba ya buluu yenye mlango mwekundu kwenye Mtaa wa Maple." CSS hutoa njia tofauti za kuwa mahususi, na kuchagua mchaguo sahihi ni kama kuchagua chombo kinachofaa kwa kazi. Wakati mwingine unahitaji kupamba kila mlango katika jirani, na wakati mwingine mlango mmoja tu. ### Wachaguzi wa Vipengele (Tags) Wachaguzi wa vipengele hulenga vipengele vya HTML kwa jina la lebo yao. Ni bora kwa kuweka mitindo ya msingi inayotumika kote ukurasa wako: Kuelewa mitindo hii: - Weka tahajia thabiti kwenye ukurasa mzima kwa kutumia chaguzi ya body - Ondoa mipaka na padding za kivinjari kwa udhibiti bora - Pamba vipengele vyote vya kichwa kwa rangi, muafaka, na nafasi - Tumia vitengo vya rem kwa ukubwa unaoweza kubadilika na unaopatikana kirahisi Wachaguzi wa vipengele hufanya kazi vizuri kwa mitindo ya jumla, lakini utahitaji wachaguzi mahususi zaidi kupamba vipengele kama mimea katika terrarium yako. ### Wachaguzi wa ID kwa Vipengele Maalum Wachaguzi wa ID hutumia alama ya # na hulenga vipengele vyenye sifa maalum za id. Kwa sababu IDs lazima ziwe za kipekee kwenye ukurasa, ni nzuri kwa kupamba vipengele binafsi kama vyombo vya mimea vya kushoto na kulia. Tufanye mitindo ya chombo cha terrarium upande ambako mimea itaishi: Hili msimbo hufanikisha: - Weka vyombo pembezoni kushoto na kulia kwa kutumia upangaji wa absolute - Tumia vitengo vya vh (urefu wa dirisha) kwa urefu unaojibadilisha kulingana na ukubwa wa skrini - Tumia box-sizing: border-box ili padding ijumuishwe katika upana mzima - Ondoa vitengo visivyohitajika vya px kwenye thamani za sifuri kwa msimbo safi - Weka rangi ya nyuma laini inayopendeza zaidi kuliko kijivu kizito ✅ Changamoto ya Ubora wa Msimbo: Angalia jinsi CSS hii inavunja kanuni ya DRY (Usijirudie). Unaweza kuiboresha kwa kutumia ID na darasa kwa pamoja? Mbinu Iliyoimarishwa: ### Wachaguzi wa Madarasa kwa Mitindo Inayoweza Kutumika Tena Wachaguzi wa darasa hutumia alama ya . na ni bora unapotaka kutumia mitindo ile ile kwa vipengele vingi. Tofauti na IDs, madarasa yanaweza kutumika tena katika HTML yako, na kufanya iwe rahisi kuunda mitindo inayolingana. Katika terrarium yetu, kila mmea unahitaji mitindo sawa lakini pia unahitaji upangaji wa kipekee. Tutatumia mchanganyiko wa madarasa kwa mitindo ya pamoja na IDs kwa upangaji wa kipekee. Hii ndiyo muundo wa HTML kwa kila mmea: Vipengele muhimu vinaelezwa: - Tumia class="plant-holder" kwa mitindo thabiti ya chombo kwa mimea yote - Tumia class="plant" kwa mtindo wa picha na tabia zinazoshirikiwa - Mojawapo id="plant1" kwa upangaji wa binafsi na mwingiliano wa JavaScript - Toa maelezo ya alt kwa ufikivu kwa wasomaji wa skrini Sasa ongeza mitindo hii kwenye faili lako la style.css: Kuvunja mitindo hii: - Tengeneza upangaji wa relative kwa chombo cha mmea kuanzisha muktadha wa upangaji - Weka kila chombo cha mmea kuwa na urefu wa 13%, kuhakikisha mimea yote ina nafasi wima bila kusogea - Inamaisha vidhibiti kadhaa ili kuhamia kidogo kushoto kuonyesha mimea vizuri ndani ya vyombo - Ruhusu mimea kubadilika kwa urefu na upana na mali za max-width na max-height - Tumia z-index kuweka mimea juu ya vipengele vingine vya terrarium - Ongeza athari ya hover kwa mabadiliko ya CSS kwa mwingiliano bora ✅ Fikra Muhimu: Kwa nini tunahitaji wachaguzi .plant-holder na .plant wote wawili? Nini kingetokea kama tungetumia mmoja tu? ## Kuelewa Uwepo wa CSS Uwepo wa CSS ni kama kuwa mwongozaji wa jukwaa la tamthilia - unaamrisha kila mhusika apatikane wapi na jinsi anavyosogea jukwaani. Baadhi ya waigizaji hufuata mpangilio wa kawaida, wengine wanahitaji upangaji maalum kwa athari ya riadha. Mara unapojifunza kuweka maeneo, changamoto nyingi za upangaji hutarajika. Unahitaji bar ya urambazaji inayobaki juu wakati watumiaji wanapokata? Uwepo hufanya hivyo. Unataka vidokezo vya msaada vinaonekana mahali fulani? Hilo ni uwepo pia. ### Maadili Matano ya Uwepo ### Uwepo Katika Terrarium Yetu Terrarium yetu inatumia mchanganyiko wa kimkakati wa aina za uwepo kuunda upangaji unaotakiwa: Kuelewa mikakati ya upangaji: - Vyombo vya absolute vinatolewa kutoka mtiririko wa kawaida wa hati na kuwekwa pembezoni mwa skrini - Vito vya mmea vya relative huanzisha muktadha wa upangaji huku vikibaki katika mtiririko wa hati - Mimea ya absolute inaweza kuwekwa kwa usahihi ndani ya vyombo vya relative - Mchanganyiko huu huruhusu mimea kuwirirana wima huku ikiwa imepangwa binafsi ✅ Jaribu: Badilisha thamani za uwepo na uangalie matokeo: - Nini kitakachotokea ikiwa utabadilisha .container kutoka absolute kuwa relative? - Je, mpangilio hubadilika vipi ikiwa .plant-holder inatumia absolute badala ya relative? - Nini hutokea unapotumia .plant kwa upangilio wa relative? ### 🔄 Ukaguzi wa Kifahari Ukomavu wa Kuweka Nafasi za CSS: Simama kidogo kuthibitisha uelewa wako: - ✅ Je, unaweza kueleza kwa nini mimea inahitaji upangilio wa absolute kwa ajili ya buruta-na-acha? - ✅ Je, unaelewa jinsi vyombo vya relative vinavyounda muktadha wa upangilio? - ✅ Kwa nini vyombo vya pembeni hutumia upangilio wa absolute? - ✅ Nini kingetokea kama ungeondoa kabisa tamko za position? Unganisho wa Ulimwengu Halisi: Fikiria jinsi upangilio wa CSS unavyolingana na mpangilio wa ulimwengu halisi: - Static: Vitabu kwenye rafu (mpangilio wa kawaida) - Relative: Kusogeza kidogo kitabu lakini kuhifadhi nafasi yake - Absolute: Kuweka alama ya kitabu kwenye ukurasa maalum - Fixed: Kumbukumbu ya kubandika ambayo inaonekana wakati unaendelea kurasa ## Kujenga Terrarium kwa CSS Sasa tutaandika chupa ya kioo kwa kutumia CSS tu - hakuna picha au programu ya michoro inayohitajika. Kuunda kioo kinachoonekana halisi, vivuli, na athari za kina kwa kutumia upangilio na uwazi kunaonyesha uwezo wa kuona wa CSS. Mbinu hii inaiga jinsi wakamishi wa Bauhaus walivyotumia maumbo rahisi ya kijiometri kuunda miundo changa, mizuri. Ukichukua hatua hizi, utaona mbinu za CSS nyuma ya muundo mwingi wa wavuti. ### Kuunda Vipengele vya Chupa ya Kioo Hebu tujenge chupa ya terrarium sehemu kwa sehemu. Kila sehemu inatumia upangilio wa absolute na ukubwa wa asilimia kwa ajili ya muundo unaojibadilisha: Kuelewa ujenzi wa terrarium: - Inatumia vipimo vya asilimia kwa ajili ya upanuzi wa kiotomatiki katika saizi zote za skrini - Inaweka vitu kwa absolute ili kupachika na kuoanisha ipasavyo - Inatumia thamani tofauti za uwazi kutengeneza athari ya uwazi wa kioo - Inatekeleza uwanja wa z-index ili mimea ionekane ndani ya chupa - Inaongeza kivuli kidogo cha sanduku na mviringo ulio boreshwa kwa muonekano wa kweli zaidi ### Muundo Jibu kwa Asilimia Zingatia jinsi vipimo vyote vinavyo tumia asilimia badala ya pixels imara: Kwa nini hili ni muhimu: - Hakikisha terrarium inakua kwa ulinganifu kwenye saizi yoyote ya skrini - Iendeleze uhusiano wa kuona kati ya vipengele vya chupa - Toa uzoefu wa kudumu kutoka simu za mkononi hadi skrini kubwa za kompyuta - Ruhusu muundo kubadilika bila kuvunja mpangilio wa kuona ### Vitengo vya CSS Katika Matendo Tunatumia vitengo vya rem kwa border-radius, ambavyo vinaendana na ukubwa wa fonti ya mizizi. Hii huunda miundo inayopatikana zaidi ambayo inaheshimu upendeleo wa fonti wa mtumiaji. Jifunze zaidi kuhusu vitengo vya CSS vinavyohusiana katika maelezo rasmi. ✅ Jaribio la Kuona: Jaribu kubadilisha thamani hizi na tazama matokeo: - Badilisha uwazi wa chupa kutoka 0.5 hadi 0.8 – hii huathirije muonekano wa kioo? - Badilisha rangi ya udongo kutoka #3a241d hadi #8B4513 – athari gani ya kuona inaleta? - Badilisha z-index ya udongo kuwa 2 – ni nini kinatokea kwa mipako? ### 🔄 Ukaguzi wa Kifahari Uelewa wa Muundo wa Kuona wa CSS: Thibitisha uelewa wako wa muundo wa CSS: - ✅ Jinsi vipimo vya asilimia vinavyounda muundo unaojibadilisha? - ✅ Kwa nini uwazi huunda athari ya uwazi wa kioo? - ✅ Kazi gani inachezwa na z-index katika mipako ya vitu? - ✅ Thamani za border-radius huunda sura ya chupa vipi? Kanuni ya Muundo: Zingatia jinsi tunavyojenga picha ngumu kutoka maumbo rahisi: 1. Mraba → Melee za mviringo → Vipengele vya chupa 2. Rangi zenye tambarare → Uwazi → Athari ya kioo 3. Vitu vya mtu binafsi → Muundo wenye mipako → Muonekano wa 3D --- ## Changamoto ya GitHub Copilot Agent 🚀 Tumia hali ya Agent kumaliza changamoto ifuatayo: Maelezo: Tengeneza mzunguko wa CSS unaofanya mimea ya terrarium kupepesa polepole kutoka pande zote mbili, kuiga athari ya upepo wa asili. Hii itakusaidia kufundisha mizunguko ya CSS, mabadiliko, na keyframes huku ukiboresha mvuto wa kuona wa terrarium yako. Agizo: Ongeza mizunguko ya CSS kwa kutumia keyframes ili kufanya mimea ndani ya terrarium kupepesa polepole kutoka upande mmoja hadi mwingine. Tengeneza mzunguko wa kupiga mzunguko kidogo (nyingi 2-3 digrii) kushoto na kulia kwa muda wa sekunde 3-4, na uanze kwa darasa la .plant. Hakikisha mzunguko unaendelea bila mwisho na unatumia kazi ya kupunguza kasi kwa mwendo wa asili. Jifunze zaidi kuhusu hali ya agent hapa. ## 🚀 Changamoto: Kuongeza Mwangaza wa Kioo Je, uko tayari kuboresha terrarium yako kwa mwangaza wa kioo halisi? Mbinu hii itaongeza kina na uhalisia kwa muundo. Utaunda mwanga mdogo unaoiga jinsi mwanga unavyoakisi uso wa kioo. Mbinu hii ni sawa na jinsi wachoraji wa Renaissance kama Jan van Eyck walivyotumia mwanga na mng'ao kuifanya kioo chenye mchoro kuonekana cha tatu-kidimensioni. Haya ndio unayolenga: Changamoto yako: - Tengeneza maumbo madogo meupe au yenye rangi nyepesi ya mviringo kwa mwanga wa kioo - Weka kwa mkakati upande wa kushoto wa chupa - Tumia uwazi unaofaa na athari za blur kwa mwanga halisi unaoakisiwa - Tumia border-radius kuunda maumbo ya kiasili, kama matone - Jaribu mitawanyiko au kivuli cha sanduku kwa uhalisia ulioboreshwa ## Mtihani wa Baada ya Mfululizo Mtihani wa baada ya mfululizo ## Panua Uelewa wako wa CSS CSS inaweza kuonekana ngumu mwanzoni, lakini kuelewa dhana hizi za msingi hutoa msingi imara kwa mbinu ngumu zaidi. Maeneo yako yafuatayo ya kujifunza CSS: - Flexbox - huwezesha urahisi wa kuoanisha na kugawa vitu - CSS Grid - huleta zana zenye nguvu za kuunda mipangilio tata - Vigezo vya CSS - hupunguza rudia na kuboresha utunzaji - Muundo unaojibadilisha - huhakikisha tovuti zinafanya kazi vyema kwa saizi tofauti za skrini ### Rasilimali za Kujifunza Shirikishi Fanya mazoezi na dhana hizi kupitia michezo yenye burudani, yenye ushawishi: - 🐸 Flexbox Froggy - Jifunze Flexbox kwa changamoto za kufurahisha - 🌱 Grid Garden - Jifunze CSS Grid kwa kukuza karoti wa mtandaoni - 🎯 CSS Battle - Jaribu ujuzi wako wa CSS kwa changamoto za msimbo ### Kujifunza Zaidi Kwa msingi mpana wa CSS, maliza moduli hii ya Microsoft Learn: Acha HTML yako ionekane kwa CSS ### ⚡ Kile Unachoweza Kufanya Katika Dakika 5 Zijazo - [ ] Fungua DevTools na chunguza mitindo ya CSS kwenye tovuti yoyote ukiitumia paneli ya Vipengele - [ ] Tengeneza faili rahisi la CSS na uilinke kwa ukurasa wa HTML - [ ] Jaribu kubadilisha rangi kwa njia tofauti: hex, RGB, na rangi zilizopewa majina - [ ] Fanya mazoezi ya sanduku kwa kuongeza padding na margin kwa div ### 🎯 Kile Unachoweza Kufanikisha Saa Hii - [ ] Maliza mtihani wa baada ya masomo na hakiki msingi wa CSS - [ ] Pamba ukurasa wako wa HTML kwa fonti, rangi, na nafasi - [ ] Tengeneza mpangilio rahisi kwa kutumia flexbox au grid - [ ] Jaribu mabadiliko ya CSS kwa athari laini - [ ] Fanya mazoezi ya muundo unaojibadilisha kwa kutumia media queries ### 📅 Safari yako ya Wiki ya CSS - [ ] Kamilisha kazi ya mtindo wa terrarium kwa ubunifu - [ ] Jifunze CSS Grid kwa kujenga mpangilio wa picha za makumbusho - [ ] Jifunza mitindo ya CSS kuleta muundo wako uhai - [ ] Gundua preprocessors za CSS kama Sass au Less - [ ] Soma kanuni za muundo na zitumie kwa CSS yako - [ ] Chambua na uirudie tena mitindo yenye mvuto unayopata mtandaoni ### 🌟 Ukomavu wako wa Mwezi Mzima wa Muundo - [ ] Jenga mfumo kamili wa muundo wa tovuti unaojibadilisha - [ ] Jifunze CSS-in-JS au mifumo ya utility-first kama Tailwind - [ ] Changia miradi ya chanzo huria na maboresho ya CSS - [ ] Pitisha ujuzi wa CSS wa hali ya juu kama mali maalum za CSS na containment - [ ] Unda maktaba za vipengele vinavyotumika tena kwa CSS ya moduli - [ ] Fundisha wengine wanaojifunza CSS na kushiriki maarifa ya muundo ## 🎯 Ratiba Yako ya Ukomavu wa CSS ### 🛠️ Muhtasari wa Kifaa chako cha CSS Baada ya kumaliza somo hili, sasa una: - Uelewa wa Cascade: Jinsi mitindo inavyorithi na kubatilisha kila mmoja - Ukomavu wa Chagua: Lengo sahihi kwa vipengele, madarasa, na IDs - Ujuzi wa Upangilio: Kuweka vitu kwa mikakati na mipako - Muundo wa Kuona: Kuunda athari za kioo, vivuli, na ufanisi wa uwazi - Mbinu za Kujibadilisha: Mipangilio ya asilimia inayobadilika kwa skrini yoyote - Utaratibu wa Msimbo: Muundo wa CSS safi na rahisi kutunza - Mienendo ya Kisasa: Matumizi ya vitengo vinavyohusiana na muundo unaopatikana zaidi Hatua Zifuatazo: Terrarium yako sasa ina muundo (HTML) na mtindo (CSS). Somo la mwisho litaongeza mwingiliano kwa JavaScript! ## Kazi CSS Refactoring --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> Utangulizi wa Hati: Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI Co-op Translator. Ingawa tunajitahidi kufanikisha usahihi, tafadhali fahamu kwamba tafsiri za moja kwa moja zinaweza kuwa na makosa au upotoshaji. Hati asili kwa lugha yake ya asili inapaswa kuchukuliwa kama chanzo cha mamlaka. Kwa taarifa muhimu sana, tafsiri ya mtaalamu wa lugha ya kibinadamu inashauriwa. Hatutopewa lawama kwa kutokuelewana au upotoshaji unaotokana na matumizi ya tafsiri hii. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
டெரேரியம் திட்டம் பகுதி 1: HTML அறிமுகம்
HTML, அல்லது ஹைப்பர் டெக்ஸ்ட் மார்க் அப் லாங்குவேஜ், நீங்கள் besucht செய்த ஒவ்வொரு இணையதளத்தின் அடித்தளம் ஆகும். HTML ஐ வலைப்பக்கங்களுக்கு வடிவமைப்பு வழங்கும் அடித்தளமாக நினைத்துக் கொள்ளுங்கள் – அது உள்ளடக்கம் எங்கே இருக்க வேண்டும், எவ்வாறு ஒழுங்குபடுத்தப்படும் மற்றும் ஒவ்வொரு பகுதியும் என்ன பிரதிபலிக்கும் என்பதைக் குறிப்பிடுகிறது. CSS பிறகு உங்கள் HTML ஐ நிறங்கள் மற்றும் அமைப்புகளுடன் "அழகு பூசும்" போது, மற்றும் JavaScript அதில் இடைக்கால செயல்பாடு கொண்டு வரும்போது, HTML என்பது மற்ற அனைத்துக்கும் அடிப்படையான கட்டமைப்பினை வழங்குகிறது. இந்த பாடத்தில், நீங்கள் ஒரு உயிரியமான டெரேரியம் இடைமுகத்துக்கான HTML கட்டமைப்பைக் காணொளியாக உருவாக்குவீர்கள். இந்த கைமுறை திட்டம் உங்களுக்கு அடிப்படை HTML கருத்துகளை கற்றுக் கொடுக்கும் மற்றும் விசுவலாக ஈர்க்கக்கூடிய ஒன்றை உருவாக்கும். குறிப்பிட்ட பொருட்களை அமைப்பு படுத்துவதற்கு செமாண்டிக் கூறுகளை பயன்படுத்துவது, படங்களுடன் பணியாற்றுவது மற்றும் இடைக்கால இணைய பயன்பாட்டிற்கான அடித்தளத்தை உருவாக்குவது ஆகியவற்றை நீங்கள் கற்கப்போகிறீர்கள். இந்த பாடத்தின் இறுதியில், நீங்கள் ஒருங்கிணக்கப்பட்ட வண்டிகளில் செடிக்கான படைகளை காட்சிப்படுத்தும் ஒரு செயல்படும் HTML பக்கத்தை பெறுவீர்கள், அடுத்த பாடத்தில் அலங்கரிப்புக்கு தயார். தொடக்கத்தில் இது அடிப்படை போல தோன்றினாலும் கவலைப்படாதீர்கள் – அதுவே CSS அழகு பூசும் முன் HTML செய்ய வேண்டியது. ## முன்னணி பாடம்சோதனை Pre-lecture quiz ## உங்கள் திட்டத்தை அமைத்தல் HTML குறியீட்டில் இறங்க முன்பு, உங்கள் டெரேரியம் திட்டத்திற்கான சரியான பணிக்கிடையை அமைப்போம். ஆரம்பத்திலிருந்தே ஒரு ஒழுங்குபடுத்தப்பட்ட கோப்புக் கட்டமைப்பை உருவாக்குவது ஒரு முக்கிய பழக்கம் ஆகும், இது உங்கள் வலை மேம்பாட்டு பயணத்தில் நன்கு உதவும். ### பணியான்னு: உங்கள் திட்ட கட்டமைப்பை உருவாக்குக நீங்கள் டெரேரியம் திட்டத்திற்கு அதிகாரபூர்வ அடைவை உருவாக்கி உங்கள் முதல் HTML கோப்பை சேர்க்கப் போகிறீர்கள். இங்கே நீங்கள் பயன்படுத்தக்கூடிய இரண்டு முறைகள் உள்ளன: விருப்பம் 1: Visual Studio Code பயன்படுத்துதல் 1. Visual Studio Code-ஐ திறக்கவும் 2. "File" → "Open Folder" கிளிக் செய்யவும் அல்லது Ctrl+K, Ctrl+O (Windows/Linux) அல்லது Cmd+K, Cmd+O (Mac) பயன்படுத்தவும் 3. terrarium என்ற புதிய அடைவை உருவாக்கி தேர்ந்தெடுக்கவும் 4. Explorer பகுதியில், "New File" சின்னத்தை கிளிக் செய்யவும் 5. கோப்பின் பெயரை index.html என்க விருப்பம் 2: டெர்மினல் கட்டளைகள் பயன்படுத்துதல் இந்த கட்டளைகள் செய்வதெல்லாம்: - நிறுவுகிறது புதிய terrarium அடைவதை உங்கள் திட்டத்துக்காக - நுழைகிறது terrarium அடைவைத் தரும் இடத்தில் - உருவாக்குகிறது காலியான index.html கோப்பை - திறக்கிறது கோப்பை Visual Studio Code-ல் திருத்தும் வகையில் ## HTML ஆவண கட்டமைப்பை புரிதல் ஒவ்வொரு HTML ஆவணமும் ஒரு குறிப்பிட்ட கட்டமைப்பைப் பின்பற்றுகிறது, அது உலாவிகள் சரியான முறையில் தெரியும் மற்றும் காட்சியாகும் வகையில் இருக்க வேண்டும். இந்த கட்டமைப்பை ஒரு அதிகாரப்பூர்வ கடிதம் போல நினைத்துக் கொள்ளுங்கள் – அதில் ஒடுக்கப்பட்ட விருப்பங்கள் இருக்கும், மேலும் அது உள்ளடக்கத்தை சரியாக செயல்படுத்த உதவும். ஒவ்வொரு HTML ஆவணத்திற்கும் அவசியமான அடித்தளத்தை சேர்ப்பதில் தொடங்குவோம். ### DOCTYPE புகுபதிவு மற்றும் ரூட் கூறு ஏதேனும் HTML கோப்பின் முதல் இரண்டு வரிகள், ஆவணத்தின் உலாவியிடத்தில் "அறிமுகம்" ஆக இருக்கின்றன: இந்த குறியீடு செய்பவை: - <!DOCTYPE html> பயன்படுத்தி ஆவணத் வகையை HTML5 ஆக அறிவிக்கிறது - பக்க உள்ளடக்கத்தை கொண்டிருக்கும் மூல <html> கூறை உருவாக்குகிறது - சரியான உலாவி காட்டலை உறுதி செய்ய நவீன வலை தரநிலைகளை நிறுவுகிறது - வித்தியாசமான உலாவிகளிலும் சாதனங்களிலும் ஒரே மாதிரித்தன்மையை உறுதி செய்கிறது ### 🔄 பயிற்சி சரிபார்ப்பு இறக்கும் முன், உங்கள் புரிதலை சரிபார்க்கவும்: - ✅ எந்த HTML ஆவணத்துக்கும் DOCTYPE அறிவிப்பே ஏன் அவசியம்? - ✅ <html> மூல கூறு என்ன கொண்டுள்ளது? - ✅ இந்த கட்டமைப்பு எப்படி உலாவிகள் பக்கங்கள் சரியாக காட்சியிட உதவுகிறது? சிறிய சுயத் தேர்வு: "தரநிலை-பூர்வ காட்சியிடல்" என்பதன் பொருளை உங்களது சொந்த வார்த்தைகளில் விவரிக்க முடியுமா? ## அவசியமான ஆவண மெட்டாடேட்டாவை சேர்த்தல் HTML ஆவணத்தின் <head> பகுதி உலாவிகள் மற்றும் தேடுபொறிகள் தேவையான முக்கிய தகவலைக் கொண்டிருக்கும், ஆனால் பயனர்கள் நேரடியாகப் பக்கத்தில் அதை பார்க்கமுடியாது. இது உங்கள் வலைப்பக்கம் பல சாதனங்களிலும் மற்றும் தளங்களிலும் சரியாக வேலை செய்யவும் காட்சியளிக்கவும் உதவும் "காட்சி ஆகிய பின்புற" தகவலாகும். இந்த மெட்டாடேட்டா உலாவிகளை உங்கள் பக்கத்தை எப்படி காட்சியிட வேண்டும், எந்த எழுத்துரு குறியீடு பயன்படுத்தப்படுகிறது மற்றும் வேறு பக்க அளவுகளுக்கு எப்படி கையாள வேண்டும் என்பதைக் கூறுகிறது – இவை எல்லாம் தொழில்முறை, அணுகல் செய்யக்கூடிய வலைப்பக்கங்களை உருவாக்க அவசியம். ### பணியான்னு: ஆவண தலைப்பைச் சேர்க்கவும் உங்கள் திறக்கும் மற்றும் மூடும் <html> குறிச்சொற்களுக்கு இடையில் இந்த <head> பகுதியை இடுக: ஒவ்வொரு கூறும் செய்பவை: - உலாவி தாவல்கள் மற்றும் தேடல் முடிவுகளில் காணப்படும் பக்க தலைப்பை அமைக்கிறது - உலகெங்கும் சரியான எழுத்து காட்சிக்க UTF-8 குறியாக்கத்தை குறிப்பிடுகிறது - நவீன Internet Explorer பதிப்புகளுடன் பொருத்தாமையை உறுதி செய்கிறது - சாதன அகலத்திற்கு பொருந்தும் விதமாக பார்வை நிலை அமைப்பு செய்கிறது - இயல்பான அளவில் உள்ளடக்கத்தை காண்பிப்பதற்கான ஆரம்ப மடிப்பு நிலையை கட்டுப்படுத்துகிறது ## ஆவண உடலை உருவாக்குதல் <body> கூறு உங்கள் வலைப்பக்கத்தின் அனைத்து காட்சியளிக்கும் உள்ளடக்கத்தையும் கொண்டுள்ளது – பயனர்கள் காணப்படும் மற்றும் தொடர்பு கொள்ளும் அனைத்தும். <head> பகுதி உலாவியிடத்திற்கு வழிமுறைகள் வழங்குகிறது, ஆனால் <body> எனும் பகுதி உண்மையான உள்ளடக்கத்தைக் கொண்டுள்ளது: உரை, படங்கள், பட்டன்கள் மற்றும் மற்ற கூறுகள், அமைப்பின் பயனர் இடைமுகத்தை உருவாக்கும்வகையில். உட் HTML குறிச்சொற்கள் ஒன்றாக பணியாற்றி அர்த்தமுள்ள உள்ளடக்கத்தை உருவாக்குவது எப்படி என்பதைக் கீழே பார்க்கலாம். ### HTML குறிச்சொல் கட்டமைப்பை புரிதல் HTML கூறுகளை வரிசையாக வரும் குறிச்சொற்கள் வரையறுக்கின்றன. பெரும்பாலான குறிச்சொற்களில் <p> திறக்கும் குறிச்சொல் மற்றும் </p> மூடும் குறிச்சொல் கொண்டிருக்கும், அதன் நடுக்குள் உள்ளடக்கம் இருக்கும்: <p>Hello, world!</p>. இது "Hello, world!" உரையைக் கொண்ட பத்தியை உருவாக்கும். ### பணியான்னு: உடல் கூறைச் சேர்க்கவும் உங்கள் HTML கோப்பை <body> கூறையும் சேர்த்து புதுப்பிக்கவும்: この構造は以下を提供します: - அடிப்படை HTML5 ஆவண அமைப்பை உருவாக்குகிறது - சரியான உலாவி காட்சிக்க வேண்டிய அவசியமான மெட்டாடேட்டாவை உடையது - உங்கள் காட்சி உள்ளடக்கத்துக்காக காலியான உடலை உருவாக்குகிறது - நவீன வலை மேம்பாட்டு சிறந்த முறைகளை பின்பற்றுகிறது இப்போது, உங்கள் டெரேரியம் காட்சிக்கு கண்டடைவுகளை பயன்படுத்தி உள்ளடக்க பகுதிகளை ஒழுங்குபடுத்தி, <div> கூறுகளை மற்றும் செடிகள் படங்களை காட்சியிட <img> கூறுகளை பயன்படுத்துவோம். ### படங்களுடன் மற்றும் அமைப்பு கண்டடைவுகளுடன் வேலை செய்வது படங்கள் HTML இல் சிறப்பாக இருப்பதால், "சுய மூடும்" குறிச்சொற்களைப் பயன்படுத்துகின்றன. <p></p> போன்ற கூறுகள் உள்ளடக்கத்தை சுற்றியது போல இல்லை, <img> குறிச்சொல் அனைத்து தேவையான தகவல்களையும் அதே குறிச்சொல்லுள் கொண்டிருக்கும்: src பட கோப்பின் பாதையைச் சொல்லும் மற்றும் alt அணுகல் வசதி குறிக்கிறது. HTML இல் படங்களைச் சேர்க்கும் முன்பு, உங்கள் திட்ட கோப்புகளை ஒழுங்குபடுத்துவதற்காக ஒரு படங்கள் என்ற அடைவையும் உருவாக்கி செடி படங்களைச் சேர்க்க வேண்டும். முதல், உங்கள் படங்களை அமைக்க: 1. உங்கள் டெரேரியம் திட்ட அடைவுக்குள் images என்ற அடைவை உருவாக்கவும் 2. பதிவுறுக்கும் அடைவு இருந்து செடி படங்களை பதிவிறக்கவும் (மொத்தம் 14 செடி படங்கள்) 3. அனைத்து செடி படங்களையும் புதிய images அடைவுக்குள் நகலெடுக்கவும் ### பணியான்னு: செடிகளைக் காட்சிப்படுத்தும் அமைப்பை உருவாக்குக இப்போது உங்கள் <body></body> குறிச்சொற்களுக்கு இடையில் இரண்டு வண்டிகளில் ஒழுங்கு செய்யப்பட்ட செடி படங்களைக் கோருங்கள்: இந்த குறியீட்டில் ஏற்படும் போட்டிகள்: - அனைத்துத் உள்ளடக்கத்தையும் வைக்க id="page" என்ற முக்கிய பக்க கட்டடை உருவாக்குகிறது - இரண்டு வண்டி கண்டடைவுகளைக் நிறுவுகிறது: left-container மற்றும் right-container - இடது வண்டியில் 7 செடிகள் மற்றும் வலது வண்டியில் 7 செடிகள் ஒழுங்காக அமைக்கப்பட்டுள்ளன - ஒவ்வொரு செடி படத்தையும் தனித்துவம் பெற்று இடங்கள் அமைக்க plant-holder என்ற divல் மூடியுள்ளது - அடுத்த பாடத்தில் CSS அலங்கரிப்பிற்கு ஒரேபோன்று வகைபெயர்களைப் பயன்படுத்துகிறது - JavaScript உடன் தொடர்புக்கு ஒவ்வொரு செடி படத்துக்கும் தனித்துவமான IDs கொடுக்கப்பட்டுள்ளது - படங்களுக்கான கோப்புப் பாதைகள் சரியாக images அடைவைக் குறிக்கின்றன ### 🔄 பயிற்சி சரிபார்ப்பு கட்டமைப்பு புரிதல்: உங்கள் HTML கட்டமைப்பை திரும்பப் பாருங்கள்: - ✅ உங்கள் அமைப்பில் முக்கிய கண்டடைவுகளை அடையாளம் காண்கிறீர்களா? - ✅ ஒவ்வொரு படத்துக்கும் தனித்துவமான ID-ஐ வழங்க காரணம் புரிந்துகொண்டீர்களா? - ✅ plant-holder div-களின் நோக்கத்தை எப்படி விளக்குவீர்கள்? கண்ணோட்ட பரிசோதனை: உங்களது HTML கோப்பை உலாவியில் திறக்கவும். நீங்கள் பார் வேண்டும்: - அடிப்படை செடி படங்களின் பட்டியல் - இரண்டு வண்டிகளில் ஒழுங்காக்கப்பட்ட படங்கள் - எளிமையான, அலங்கரிக்காத அமைப்பு ஒவ்வும் நினைவில் வையுங்கள்: CSS அழகு பூசும் முன்பு HTML இன் துல்லியமான தோற்றம் இதுதான்! இந்த குறியீடு சேர்க்கப்பட்டவுடன் செடிகள் திரையில் காட்சியளிக்கும், இதுவரை அழகுபடுத்தப்படவில்லை – அடுத்து CSS வேலை! இப்போது, உங்கள் உள்ளடக்கத்தை சரியாக ஒழுங்குபடுத்தி அணுகல் சிறந்த முறையில் பின்பற்றும் ஒரு வலுவான HTML அடித்தளத்தை பெற்றுள்ளீர்கள். ## அணுகல் வசதிக்காக செமாண்டிக் HTML பயன்படுத்துதல் செமாண்டிக் HTML என்பது அதன் தோற்றத்திற்கு அல்ல, அதன் அர்த்தத்திற்கும் நோக்கத்திற்கும் ஏற்ப HTML கூறுகளை தேர்ந்தெடுப்பதைக் குறிக்கிறது. செமாண்டிக் மார்க்அப் பயன்படுத்தும்போது, நீங்கள் உங்கள் உள்ளடக்கத்தின் கட்டமைப்பு மற்றும் அர்த்தத்தை உலாவிகள், தேடுபொறிகள் மற்றும் ஸ்கிரீன் ரீடர் போன்ற உதவித் தொழில்நுட்பங்களுக்கு அனுப்புகிறீர்கள். இந்த நடைமுறை உங்கள் இணையதளங்களை மாற்ற முடியாத பயனர்களுக்கு மேலும் அணுகக்கூடியதாகவும், தேடுபொறிகள் உங்கள் உள்ளடக்கத்தை சிறப்பாக புரிந்து கொள்ள உதவுகிறது. இது நவீன வலை மேம்பாட்டின் அடிப்படைக் கோட்பாடு ஆகும், அனைவருக்கும் சிறந்த அனுபவங்களை உருவாக்குகிறது. ### செமாண்டிக் பக்கம் தலைப்பைச் சேர்க்கும் உங்கள் டெரேரியம் பக்கத்திற்கு சரியான ஒரு சீரான தலைப்பைச் சேர்ப்போம். உங்கள் திறக்கும் <body> குறிச்சொல் உடனே பின்பு இந்த வரியை சேர்க்கவும்: செமாண்டிக் மார்க்அப் அவசியம் என்ன? - ஸ்கிரீன் ரீடர்களுக்கு பக்க கட்டமைப்பை புரிந்து கொண்டு பயன்முறைகளை எளிதாக்க உதவுகிறது - உள்ளடக்க வரிசையைக் குறிப்பிடுவதால் தேடல் இயந்திர நுட்பத்தைச் சிறப்பாக்குகிறது - பார்வை குறைபாடுகளோடு மற்றும் அறிவாற்றல் வித்தியாசமுடைய பயனர்களுக்கு அணுகலை மேம்படுத்துகிறது - அனைத்து சாதனங்களிலும் மற்றும் தளங்களிலும் சிறந்த பயனர் அனுபவத்தை உருவாக்குகிறது - தொழில்முறை மேம்பாட்டிற்கான வலை தரநிலைகள் மற்றும் சிறந்த நடைமுறைகளை பின்பற்றுகிறது செமாண்டிக் மற்றும் செமாண்டிக் அல்லாத விருப்பங்கள் உதாரணங்கள்: ## டெரேரியம் கண்டடைவைக் கட்டமைக்கும் இப்போது செடிகள் விதைக்கும் கிளாஸ் டெரேரியம் கண்ணாடி கண்டடைவுக்கு HTML கட்டமைப்பைப் போடுவோம். CSS அழகுபடுத்தல் இல்லாமல் கூட, இந்த கூறுகள் இன்னும் காட்சியளிக்காது. டெரேரியம் மார்க்அப்பில் விளக்கமான வகைபெயர்கள் பயன்படுத்தப்படுவதால் அடுத்த பாடத்தில் CSS அமைப்பு நுணுக்கமான மற்றும் பராமரிப்புக்கு ஏற்றதாக இருக்கும். ### பணியான்னு: டெரேரியம் கட்டமைப்பைச் சேர்க்கவும் இது பக்கக் கட்டடத்தின் கடைசி </div> குறிச்சொல் முன் இப்படி சேர்க்கவும்: இந்த டெரேரியம் கட்டமைப்பை புரிந்துகொள்ள: - ஸ்டைலிங்கிற்கு தனிச்சிறப்பு ID உடன் பிரதான டெரேரியம் கண்டடைவைக் கொள்கிறது - ஒவ்வொரு காணொளி கூறுகளுக்கும் தனியான கூறுகளை வரையறுக்கிறது (உயர்தளம், சுவர்கள், மண், அடித்தளம்) - கண்ணாடி பிரதிபலிப்பு விளைவுகளுக்காக nested கூறுகளைச் சேர்க்கிறது (பளபளப்பான கூறுகள்) - ஒவ்வொரு கூறின் நோக்கத்தை வெளிப்படுத்தும் விளக்கமான வகுப்புப் பெயர்களை பயன்படுத்துகிறது - கண்ணாடி டெர்ரேரியம் தோற்றத்தை உருவாக்கும் CSS வடிவமைப்புக்கான கட்டமைப்பை தயாரிக்கிறது ### 🔄 கற்பித்தல் சரிபார்ப்பு HTML கட்டமைப்பு தேர்ச்சி: முன்னேறுவதற்கு முன்னர், உறுதிப்படுத்து நீங்கள்: - ✅ HTML கட்டமைப்பதும், காட்சி தோற்றம் என்ற வேறுபாடுகளை விளக்க முடியும் - ✅ பொருள்தகவல் (semantic) மற்றும் பொருள்தகவலற்ற (non-semantic) HTML கூறுகளை அடையாளம் காண முடியும் - ✅ சரியான மார்க்அப் அணுகல் எவ்வாறு அணுகல் திறனுக்குத் துணைசெய்கிறது என்பதை விவரிக்க முடியும் - ✅ முழுமையான ஆவண மர கட்டமைப்பை செவியீடு செய்ய முடியும் உங்கள் புரிதலை சோதிக்க: உங்கள் HTML கோப்பை JavaScript முடக்கப்பட்டும் CSS அகற்றப்பட்டும் உள்ள பிரவுசரில் திறந்து பாருங்கள். இது நீங்கள் உருவாக்கிய தூய sematic கட்டமைப்பை காட்டும்! --- ## GitHub Copilot முகவர் சவால் பின்வரும் சவாலை முடிக்க முகவர் முறையை பயன்படுத்தவும்: விளக்கம்: டெர்ரேரியம் திட்டத்தில் சேர்க்கக்கூடிய தாவர பராமரிப்பு கையேட்டிற்கான பொருள்தகவலான HTML கட்டமைப்பை உருவாக்கவும். கோரிக்கை: "Plant Care Guide" என்ற பெரிய தலைப்புடன் ஒரு பொருள்தகவலான HTML பிரிவை உருவாக்கவும், மற்றும் "Watering", "Light Requirements", மற்றும் "Soil Care" என்ற தலைப்புகளைக் கொண்ட மூன்று துணை பிரிவுகளுடன், ஒவ்வொன்றிலும் தாவர பராமரிப்பு தகவல் உள்ள абзацыயை சேர்க்கவும். சரியான பொருள்தகவலான HTML குறிச்சொற்களைப் பயன்படுத்தி (<section>, <h2>, <h3>, மற்றும் <p>) உள்ளடக்கத்தை ஒழுங்குபடுத்தவும். agent mode பற்றி இங்கே அறியவும். ## HTML வரலாறு ஆராய்ச்சி சவால் இணைய விருத்தியைப் பற்றி அறியுதல் 1990 ஆம் ஆண்டில் Tim Berners-Lee CERNல் முதல் வலை உலாவியை உருவாக்கியதிலிருந்து HTML பெரிதும் முன்னேறி உள்ளது. சில பழைய குறிச்சொற்கள், உதா. <marquee>, இப்போது காலாவதியானவை ஆகிவிட்டன, ஏனெனில் அவை நவீன அணுகல் திறன் மற்றும் பதிலளிக்கும் வடிவமைப்புப் படிநிலைகளுக்கு பொருந்தவில்லை. இந்தப் பிரயோகத்தை முயற்சிக்கவும்: 1. உங்கள் <h1> தலைப்பை தற்காலிகமாக <marquee> குறிச்சொல்லில் மூடவும்: <marquee><h1>My Terrarium</h1></marquee> 2. உங்கள் பக்கத்தை உலாவியில் திறந்து ஸ்க்ரோல் விளைவைக் கவனிக்கவும் 3. இந்த குறிச்சொல் காலாவதியானதாக்கப்பட்டதற்கான காரணத்தைப் பரிசீலிக்கவும் (குறிப்பு: பயனர் அனுபவம் மற்றும் அணுகல் திறனைக் கூறி நினைவில் வை) 4. <marquee> குறிச்சொல்லை அகற்றி பொருள்தகவலான மார்க்அப்புக்கு திரும்பவும் பகிர்வு கேள்விகள்: - பார்வை குறைவுள்ள அல்லது இயக்கத்தில் செவிச்செலுத்தும் பயனர்களுக்கு ஸ்க்ரோல் தலைப்பு எப்படி பாதிப்பதாக இருக்கும்? - மேலும் அணுகல் திறனுடன் ஒத்துள்ள காட்சியளிப்பு விளைவுகளை உருவாக்கப் பயன்படுத்தக்கூடிய நவீன CSS நுட்பங்கள் எவை? - காலாவதியான கூறுகளுக்கு பதிலாக நவீன வலை தரநிலைகளை பயன்படுத்துவது ஏன் முக்கியம்? காலாவதியான மற்றும் காலாவதியான HTML கூறுகள் பற்றி மேலும் ஆராய்ந்துகொள்ளவும், இணைய தரநிலைகள் பயனர் அனுபவத்தை மேம்படுத்தி எப்படி முன்னேறுகின்றன என்பது பற்றி புரிந்துகொள்ளவும். ## பாடம்-பிறகு வினாடி வினா பாடம்-பிறகு வினாடி வினா ## விமர்சனம் மற்றும் சுயபயிற்சி உங்கள் HTML அறிவை ஆழப்படுத்துங்கள் HTML 30 ஆண்டுகளுக்கு மேலாக இணையத்தின் அடித்தளம், ஒரு எளிய ஆவண மார்க்அப் மொழியிலிருந்து பரபரப்பான செயலிகள் கட்டுமானத்திற்கான உயர் கவனத்தக்க தளமாக முன்னேற்றப்பட்டுள்ளது. இந்த விருத்தியை புரிந்துகொள்வது நவீன இணையத் தரநிலைகளைப் புரிந்துகொண்டு சிறந்த வளர்ச்சி முடிவுகளை எடுப்பதற்கு உதவும். பரிந்துரைக்கப்பட்ட கல்விப்பாதைகள்: 1. HTML வரலாறு மற்றும் முன்னேற்றம் - HTML 1.0 முதல் HTML5 வரை காலபாதையை ஆராயவும் - சில குறிச்சொற்கள் காலாவதியானதாக்கப்பட்டவையாகிய காரணங்களை ஆராயவும் (அணுகல் திறன், மொபைல்-பிரியத்தன்மை, பராமரிப்பு) - உருவாகும் HTML அம்சங்கள் மற்றும் முன்மொழிவுகளை ஆராயவும் 2. பொருள்தகவலான HTML ஆழ்ந்த கற்றல் - HTML5 பொருள்தகவலான கூறுகளின் முழு பட்டியலை படிக்கவும் - <article>, <section>, <aside>, மற்றும் <main> எப்போது பயன்படுத்த வேண்டும் என்பதை பயிற்சி மேற்கொள்ளவும் - மேம்பட்ட அணுகல் திறனுக்கான ARIA பண்புகளை பற்றி கற்றுக்கொள்ளவும் 3. நவீன வலை மேம்பாடு - Microsoft Learn இல் பதிலளிக்கும் வலைத்தளங்கள் கட்டமைப்பு பற்றி ஆராயவும் - HTML கேட்டெடுக்கும் CSS மற்றும் JavaScript உடன் இணைவது எப்படி என்பதைக் கற்றுக்கொள்ளவும் - வலை செயல்திறன் மற்றும் SEO சிறந்த நடைமுறைகளை அறிவதற்காக கற்றுக்கொள்ளவும் பகிர்வு கேள்விகள்: - நீங்கள் கண்டுபிடித்த காலாவதியான HTML குறிச்சொற்கள் எவை, அவை ஏன் அகற்றப்பட்டன? - எதிர்கால பதிப்புகளுக்காக எந்த புதிய HTML அம்சங்கள் பரிந்துரைக்கப்படுகின்றன? - பொருள்தகவலான HTML வலை அணுகல் திறன் மற்றும் SEOக்கு எப்படி பங்களிக்கிறது? ### ⚡ அடுத்த 5 நிமிடங்களில் செய்யலாம் - [ ] DevTools (F12) திறந்து உங்கள் விருப்பமான இணையத்தளத்தின் HTML கட்டமைப்பை ஆய்வு செய்யவும் - [ ] அடிப்படை குறிச்சொற்களுடன் ஒரு எளிய HTML கோப்பை உருவாக்கவும்: <h1>, <p>, மற்றும் <img> - [ ] W3C HTML Validator ஆன்லைனில் உங்கள் HTML ஐ சரிபார்க்கவும் - [ ] உங்கள் HTMLக்கு <!-- comment --> பயன்படுத்தி ஒரு கருத்துரைப் பதிவைச் சேர்க்க முயற்சிக்கவும் ### 🎯 இந்த மணிநேரத்தில் சாதிக்க முடியும் - [ ] பாடம்-பிறகு வினாடி வினாவை முடித்து பொருள்தகவலான HTML கருத்துக்களை மறுபரிசீலனை செய்யவும் - [ ] சரியான HTML கட்டமைப்புடன் தன்னுடைய தொடர்புடைய ஒரு எளிய இணையப் பக்கம் கட்டமைக்கவும் - [ ] வேறுவிதமான தலைப்பு நிலைகளும் உரை வடிவமைப்பு குறிச்சொற்களும் இன்றி முயற்சிக்கவும் - [ ] பிம்பங்கள் மற்றும் இணைப்புகளைச் சேர்த்து, மல்டிமீடியா ஒருங்கிணைப்பை பயிற்சி செய்யவும் - [ ] நீங்கள் இன்னும் முயற்சிக்காத HTML5 அம்சங்களை ஆராயவும் ### 📅 உங்கள் வாராந்திர HTML பயணம் - [ ] பொருள்தகவலான மார்க்அப்புடன் டெர்ரேரியம் திட்ட பணியை முடிக்கவும் - [ ] ARIA லேபிள்கள் மற்றும் பங்களிப்புகளுடன் அணுகல்திறன் வாய்ந்த ஒரு இணையப்பக்கத்தை உருவாக்கவும் - [ ] பல்வேறு உள்ளீடு வகைகளுடன் படிவக் கட்டமைப்பை பயிற்சி செய்யவும் - [ ] localStorage அல்லது geolocation போன்ற HTML5 APIகளை ஆராயவும் - [ ] பதிலளிக்கும் HTML வடிவமைப்புகள் மற்றும் மொபைல்-முதலீடு வடிவமைப்புகளை கற்றுக்கொள்ளவும் - [ ] சிறந்த நடைமுறைகளுக்காக மற்ற வளர்ப்பவர்களின் HTML குறியீட்டை ஆய்வு செய்யவும் ### 🌟 உங்கள் மாதாந்திர வலை அடித்தளம் - [ ] உங்கள் HTML தேர்ச்சியை வெளிப்படுத்தும் ஒரு போர்ட்ஃபோலியோ இணையத் தளம் கட்டவும் - [ ] Handlebars போன்ற ஒரு கட்டமைப்புடன் HTML டெம்ப்ளேட்டிங் கற்றுக்கொள்ளவும் - [ ] HTML ஆவணங்களை மேம்படுத்துவதன் மூலம் திறந்த மூல திட்டங்களுக்கு பங்களிக்கவும் - [ ] கஸ்டம் கூறுகள் போன்ற மேம்பட்ட HTML கருத்துக்களை மனதளவில் அடையவும் - [ ] HTML ஐ CSS கட்டமைப்புகள் மற்றும் JavaScript நூலகங்களுடன் ஒருங்கிணைக்கவும் - [ ] HTML அடிப்படைகளைக் கற்றுக் கொள்வவர்களுக்கு வழிகாட்டியாக இருங்கள் ## 🎯 உங்கள் HTML தேர்ச்சி காலவரிசை ### 🛠️ உங்கள் HTML கருவி தொகுப்பு சுருக்கம் இந்த பாடத்தை முடித்தவுடன், நீங்கள் பெற்றிருக்கிறீர்கள்: - ஆவண கட்டமைப்பு: சரியான DOCTYPE உடன் முழுமையான HTML5 அடித்தளம் - பொருள்தகவலான மார்க்அப்: அணுகல் திறன் மற்றும் SEOக்காக கண்காணிப்புடன் கூடிய அர்த்தமுள்ள குறிச்சொற்கள் - பிம்ப ஒருங்கிணைப்பு: சரியான கோப்பு அமைப்பு மற்றும் alt உரை நடைமுறைகள் - அமைப்பு கண்டெய்னர்கள்: விளக்கமான வகுப்புப் பெயர்களுடன் divகளின் முறைசார்ந்த பயன்பாடு - அணுகல் திறன் விழிப்புணர்வு: திரை வாசிப்பான் நகர்வை புரிந்துகொள் - நவீன தரநிலைகள்: தற்போதைய HTML5 நடைமுறைகள் மற்றும் காலாவதியான குறிச்சொற்கள் அறிவு - திட்ட அடித்தளம்: CSS வடிவமைப்பும் JavaScript செயற்பாடும் இணைக்க கூடிய வலுவான அடித்தளம் அடுத்த படிகள்: உங்கள் HTML கட்டமைப்பு CSS வடிவமைப்புக்கு தயாராக உள்ளது! நீங்கள் கட்டிய பொருள்தகவலான அடித்தளம் அடுத்த பாடத்தை புரிந்துகொள்ள மிகவும் வசதியாக இருக்கும். ## பணிச் செயல் உங்கள் HTML பயிற்சி: ஒரு வலைப்பதிவு மாதிரியை உருவாக்கவும் --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> அறிக்கை: இந்த ஆவணம் AI மொழி மொழிபெயர்ப்பு சேவை Co-op Translator மூலம் மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சித்தாலும், தானாகச் செய்யப்பட்ட மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுகள் இருக்கக்கூடும் என்பதற்கு தயவுசெய்து கவனம் செலுத்தவும். அதன் இயல்பான மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வமான ஆதாரமாகக் கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பை பரிந்துரைக்கிறோம். இந்த மொழிபெயர்ப்பின் பயன்பாட்டின் காரணமாக ஏற்படும் எந்தவொரு புரிதல் தவறுகளுக்கும் நாங்கள் பொறுப்பிலோ இல்லஒன்றும் இல்லை. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium திட்டம் பகுதி 2: CSS அறிமுகம்
உங்கள் HTML டெர்ரேரியம் எவ்வாறு அடிப்படையாகத் தெரியப்பட்டது என்பதை நினைவிருக்கிறதா? CSS என்பது அந்த சுலபமான அமைப்பை கண்ணுக்கு அழகான ஒன்றாக மாற்றும் இடமாகும். HTML என்பது வீட்டின் அமைப்பை கட்டுவதுபோல் என்றால், CSS என்பது அதனை வீட்டைப் போன்று உணர வைக்கும் அனைத்து விஷயங்களும் - வண்ணம் பூச்சு, உட்காரும் பொருள் அமைப்பு, விளக்கு ஒளி மற்றும் அறைகள் எப்படி இணைகின்றன என்பதும் ஆகும். வெர்செய்ல்ஸ் அரண்மனை எவ்வாறு சுலபமான வேட்டை குடிசை உணர்தலாக இருந்தது, ஆனால் அலங்காரம் மற்றும் அமைப்பு கவனமாக மாற்றித் உலகின் மிகச் சிறந்த கட்டிடங்களில் ஒன்றாக மாறியது என்பதை நினைத்துப் பாருங்கள். இன்று, நாங்கள் உங்கள் டெர்ரேரியத்தை செயல்பாட்டிலிருந்து உருப்படியானதாக மாற்றப்போகிறோம். நீங்கள் கூறுகளை துல்லியமாக இடமிடுவது, பல்வேறு திரை அளவுகளுக்கு ஏற்ப கட்டமைப்புகளை பதில் சொல்லுவது மற்றும் வலைத்தளங்களை ஈர்க்கும் காட்சி அழகை உருவாக்குவது கற்றுக்கொள்ளப்போகிறேன். இந்த பாடத்தின் இறுதியில், உங்கள் திட்டத்தை மிகவும் மேம்படுத்தும் CSS ஸ்டைலிங் எப்படி இருப்பதைக் காண்பீர்கள். உங்கள் டெர்ரேரியத்திற்கு சில ஸ்டைலை சேர்ப்போம். ## முன்படிப்பு வினாடி வினா முன்படிப்பு வினாடி வினா ## CSS உடன் திசைமுகமாக தொடங்குதல் CSS பொதுவாக "அழகாக செய்யும்" என்று நினைக்கப்படுகின்றது, ஆனால் அது ஒரு மிக விரிவான நோக்கத்தைச் சேவிக்கிறது. CSS என்பது திரைப்பட இயக்குனரானவரைபோல் - நீங்கள் எல்லாம் எப்படி தோன்றுகிறது என்பதையும், அது எப்படி நகர்கிறது, தொடர்பு கொள்ளுதல் எப்படி பதிலளிக்கிறது மற்றும் வேறுபட்ட சூழல்களுக்கு எவ்வாறு ஏற்படுகிறது என்பதையும் கட்டுப்படுத்துகிறீர்கள். நவீன CSS மிக திறமையானது. நீங்கள் கோடுகளை எழுதலாம், அவை தானாகவே தொலைபேசி, டேப்லெட் மற்றும் டெஸ்க்டாப் கணினிகளுக்கான கட்டமைப்புகளை சரி செய்து கொண்டிருக்கும். நீங்கள் பரந்து பரவிய அனிமேஷன்களை உருவாக்கலாம், அவை பயனாளர்களின் கவனத்தை தேவையான இடத்திற்கு வழிநடத்தும். எல்லாம் ஒன்றாக செயல்படும் போது முடிவுகள் மிகவும் பிரமாதமாக இருக்கும். இந்த பாடத்தில் நாம் எதை அடைவோம்: - உருவாக்கும் நவீன CSS தொழில்நுட்பங்களை பயன்படுத்தி உங்கள் டெர்ரேரியத்திற்கான முழுப்பூர்வ காட்சி வடிவமைப்பை - ஆய்வு செய்வது அடிப்படைக் கருத்துக்களை, போலி, மரபுரிமை மற்றும் CSS தேர்வீடுகளை - நடாத்துவது பதிலளிக்கும் இடம்பிடிப்பு மற்றும் கட்டமைப்பு நெறிமுறைகளை - கட்டமைப்பது CSS வடிவங்கள் மற்றும் ஸ்டைலிங்கை பயன்படுத்தி டெர்ரேரியம் கன்டெய்னரை ### முன்னிருப்பு நீங்கள் முன்பு பாடத்தில் இருந்து உங்கள் டெர்ரேரியதுக்கான HTML அமைப்பை நிறைவு செய்திருக்க வேண்டும் மற்றும் அதை ஸ்டைலிங் செய்ய தயார் நிலையில் வைத்திருக்க வேண்டும். ### உங்கள் CSS கோப்பை அமைத்தல் ஸ்டைலிங் தொடங்குவதற்கு முன், CSS ஐ எங்கள் HTML உடன் இணைக்கவேண்டும். இந்த இணைப்பு உலாவிக்கு எங்கிருந்து டெர்ரேரியத்தின் ஸ்டைலிங் சட்டங்களை பெற வேண்டும் என்பதைக் கூறுகிறது. உங்கள் டெர்ரேரியம் கோப்புறைல், style.css என்ற புதிய கோப்பை உருவாக்குங்கள், பின்னர் உங்கள் HTML ஆவணத்தின் <head> பிரிவில் இதனை இணைக்கவும்: இந்தக் கோடு செய்யும் விஷயங்கள்: - உருவாக்கும் உங்கள் HTML மற்றும் CSS கோப்புகளுக்கு இடையில் இணைப்பை - சொல்கிறது உலாவிக்கு style.css இலிருந்து ஸ்டைல்களை ஏற்றவும் மற்றும் பயன்படுத்தவும் - பயன்படுத்துகிறது rel="stylesheet" பண்பை இது CSS கோப்பு என்று குறிப்பிட - கோப்பழுத்துக்களை href="./style.css" கொண்டு குறிக்கிறது ## CSS போலி புரிதல் ஏன் CSS "Cascading" Style Sheets என்று அழைக்கப்படுகிறது என்று நினைத்திருக்கிறீர்களா? ஸ்டைல்கள் நதிநீர் போல பெய்கிறார்கள், சில சமயங்களில் அவை ஒருவருடன் மற்றவருடன் மோதுகிறார்கள். டிருள் கட்டளைகளின் கட்டமைப்பைப் பாருங்கள் - ஒரு பொதுக் கட்டளை “எல்லா படையினரும் பசுமை நிறம் அணிய வேண்டும்” என்று கூறலாம், ஆனால் உங்கள் பிரிவுக்கு ஒரு குறிப்பிட்ட கட்டளை “விழாவிற்காக நீலம் ஆடை அணிய வேண்டும்” என்று கூறலாம். குறிப்பிட்ட கட்டளை மேலிடப்பட்டுள்ளது. CSS என்பது இதே வகை நியாயத்துடன் செயல்படுகிறது மற்றும் இந்த தரவரிசையைப் புரிந்துகொள்வது பிழைகள் சரி செய்யும்போது மிகவும் உதவும். ### போலி முன்னுரிமையை பரிசோதித்து பார்க்கவும் நாம் போலிக்கு நேரலை செய்வோம் என்று ஒரு ஸ்டைல் மோதலை உருவாக்குவோம். முதலில், உங்கள் <h1> குறிச்சொல்லுக்கு ஒரு inline ஸ்டைலைச் சேர்க்கவும்: இந்தக் கோடு செய்யும் விஷயங்கள்: - நேரடியாக <h1> கூறிற்கு சிவப்பு நிறத்தை inline ஸ்டைலைப் பயன்படுத்தி பயன்படுத்துகிறது - பயன்படுத்துகிறது style பண்பை CSS ஐ நேரடியாக HTML இல் தயாரிக்க - உருவாக்குகிறது அந்த குறிப்பிட்ட கூறிற்கான மிக உயர்ந்த முன்னுரிமை கொண்ட ஸ்டைல் சட்டத்தினை பின்னர், உங்கள் style.css கோப்பில் இந்த விதியைச் சேர்க்கவும்: மேலே, நாங்கள்: - வரையறுத்திருக்கிறோம் அனைத்து <h1> கூறுகளையும் குறிக்கும் CSS விதியை - நீலகுருவத்தை வெளியே உள்ள ஸ்டைல்ஷீட்டால் அமைத்துள்ளோம் - குறைந்த முன்னுரிமை inline ஸ்டைல்கள் ஒப்பிடுகையில் கொண்ட விதியை உருவாக்கியுள்ளோம் ✅ தெரிவு சரிபார்ப்பு: உங்கள் வலைப்பயன்பாட்டில் எந்த நிறம் காட்சி பெறுகிறது? ஏன் அந்த நிறமே வெற்றி பெறுகிறது? நீங்கள் எந்த சந்தர்ப்பங்களில் ஸ்டைல்களை மீற விரும்பலாம் என்று நினைக்கிறீர்களா? ## CSS மரபுரிமை செயலில் CSS மரபுரிமை உயிரியல் மாதிரியே - கூறுகள் தங்கள் பெற்றோர்கள் கூறுகளிடமிருந்து சில பண்புகளை பெறுகின்றன. நீங்கள் உடல் கூறில் எழுத்துரு குடும்பத்தை அமைத்தால், உள்ளுள்ள அனைத்து எழுத்துகளும் தானாகவே அதே எழுத்துரு குடும்பத்தைப் பயன்படுத்தும். இது ஹாப்ஸ்பர்க் குடும்பத்தின் தனித்துவமான உதடு போன்ற பண்புகள் பல தலைமுறைகளுக்கும் சிலவரை எப்படிப் பரவியது என்பதைப்போன்றது. ஆனால், எல்லாம் மரபுரிமை பெறுவதில்லை. எழுத்து வகைகள் மற்றும் நிறங்கள் மரபுரிமை பெறுகின்றன, ஆனால் கட்டமைப்பு பண்புகள் (margins மற்றும் borders போன்றவை) பெறுவதில்லை. குழந்தைகள் உடல் பயிற்சி பண்புகளை பெறக்கூடும், ஆனால் பெற்றோரின் ஆடை முறைகளை பெறமுடியாது என்றதைப்போல். ### எழுத்துரு மரபுரிமையை கவனித்தல் <body> கூறில் எழுத்துரு குடும்பத்தை அமைத்து மரபுரிமையை பார்க்கலாம்: இங்குள்ள விதிவிலக்குக்கள்: - அமைக்கிறது பக்கத்திற்கு முழு எழுத்துரு குடும்பத்தை <body> கூறை இலக்காகக் கொண்டு - பயன்படுத்துகிறது பல்வேறு உலாவிகளுக்கு மேல் சேவையை வழங்கும் fallback தேர்வுகளுடன் எழுத்துரு பிணையை - பயன்படுத்துகிறது பல இயங்குதளங்களில் சிறப்பாக தோன்றும் நவீன அமைப்புகளை - உறுதிசெய்கிறது அனைத்து குழந்தைகள் கூறுகள் இந்த எழுத்துரு குடும்பத்தை உடனடியல்லாதவாறு மாற்றப்படவில்லை என்றால் எடுத்துக்கொள்வதை உங்கள் உலாவியின் டெவலப்பர் கருவிகள் (F12) திறந்து, Elements தாவலைத் திறந்து உங்கள் <h1> கூறைக் கண்காணிக்கவும். அது <body> இல் இருந்து மரபுரிமையோடு கொண்டுள்ள எழுத்துரு குடும்பத்தை காண்பிக்கும்: ✅ சோதனை நேரம்: <body> இல் நீங்கள் மற்ற மரபுரிமை பெறக்கூடிய பண்புகளை அமைத்துப் பார்க்கலாம், உதாரணமாக color, line-height, அல்லது text-align. உங்கள் தலைப்பு மற்றும் பிற கூறுகளுக்கு என்ன நடக்கும்? ### 🔄 கல்வியியல் முகாமைத்துவம் CSS அடிப்படை புரிதல்: தேர்வீடுகளுக்கு செல்லும் முன், உங்களால்: - ✅ போலி மற்றும் மரபுரிமை வேறுபாடு விளக்க முடியும் - ✅ ஒரு தனித்துவமான மோதலில் எந்த ஸ்டைல் வெல்லும் என்று கணிக்க முடியும் - ✅ பெற்றோர் கூறுகளிலிருந்து எந்த பண்புகள் மரபுரிமை பெறும் என்பதை அடையாளம் காண முடியும் - ✅ CSS கோப்புகளை HTML க்கு சரியாக இணைக்க முடியும் சிறு பரிசோதனை: இங்கே நீங்கள் இருந்தால், <div class="special"> உள்ள <h1> வது நிறம் என்ன இருக்கும்? பதில்: சிவப்பு (கூறு தேர்வீடு நேரடியாக h1 ஐ இலக்காகக் கொண்டு) ## CSS தேர்வீடுகள் பற்றிய முழுமையான அறிவு CSS தேர்வீடுகள் என்பது ஸ்டைலிங் செய்ய குறிப்பிட்ட கூறுகளைக் குறிக்க உங்கள் வழி. அவை துல்லியமான வழிமுறைகளைப் போல செயல்படுகின்றன - "வீடு" என்று சொல்லுவதைப்போல் அல்ல, "மேபிள் தெருவில் சிவப்பு கதவு கொண்ட நீலம் வீடு" என்று சொல்வது போல. CSS பல்வேறு தனித்துவமான தேர்வீடுகளை வழங்குகிறது, மற்றும் சரியான தேர்வீட்டைத் தேர்ந்தெடுப்பது ஒரு செயலில் சரியான கருவியைத் தேர்வு செய்வதுபோல். சில நேரங்களில் நீங்கள் ஊரின் எல்லா கதவுகளையும் ஸ்டைல் செய்ய வேண்டும், சில நேரங்களில் ஒரே கதவை மட்டும் செய்ய வேண்டும். ### கூறு தேர்வீடுகள் (Tags) குறிச்சொல் தேர்வீடுகள் HTML கூறுகளை அதன் குறிச்சொல்பெயரால் இலக்காகக் கொண்டிருக்கும். அவை உங்கள் பக்கமெங்கும் பொதுவான அடிப்படை ஸ்டைல்களை அமைக்க சிறந்தவை: இந்த ஸ்டைல்களின் விளக்கம்: - நிர்ணயிக்கிறது body தேர்வீடு மூலம் முழு பக்கத்திற்கான ஒற்றை எழுத்துரு அமைப்பை - நீக்குகிறது இயல்பான உலாவி margin மற்றும் padding கட்டுப்பாட்டிற்காக - ஸ்டைல் செய்கிறது அனைத்து தலைப்பு கூறுகளை நிறம், பொருத்தம் மற்றும் இடைவெளியுடன் - பயன்படுத்துகிறது ஸ்கேலபாடும் மற்றும் அணுகக்கூடிய rem அலகுகளை எழுத்துரு அளவுக்கு குறிச்சொல் தேர்வீடுகள் பொதுவான ஸ்டைலிங்கிற்கு சிறந்தவை, ஆனால் டெர்ரேரியத்தின் செடிகளுக்கு மாதிரியான தனிப்பட்ட கூறுகளை ஸ்டைல் செய்ய நீங்கள் கூடுதல் தனித்துவமான தேர்வீடுகள் தேவைப்படும். ### தனிப்பட்ட கூறுகளுக்கான ID தேர்வீடுகள் ID தேர்வீடுகள் # அடையாளத்துடன் ஒற்றை id பண்பினை கொண்ட கூறுகளை இலக்காக்கொள்ளும். ID கள் ஒவ்வொரு பக்கத்திலும் தனித்துவமானவை ஆகவே அவை தனிப்பட்ட மற்றும் 特殊 கூறுகளுக்கான ஸ்டைலிங்கிற்கு சிறந்தவை. இப்போது உங்கள் டெர்ரேரியத்தின் அமர்ந்த செடிகளுக்கான இடப்பக்கக் கன்டெய்னர்களுக்கான ஸ்டைலை உருவாக்குவோம்: இந்தக் கோடு செய்வது: - இடமிருந்து வலது ஓரங்களுக்கு கொண்டு absolute இடம்பிடிப்பை வழங்குகிறது - பயன்படுத்துகிறது திரை அளவுக்கு ஏற்ப பொருந்தக்கூடிய vh (viewport height) அலகுகளை - நிர்ணயிக்கிறது box-sizing: border-box என padding மொத்த அகலத்தில் சேர்க்கப்படுகிறது - நீக்குகிறது zero மதிப்புகளிலிருந்து தேவையற்ற px அலகுகளை சுத்தமான கோடுக்கு - அமைக்கிறது கண்களுக்கு இலகுவான, தீவிரமான சாம்பல் நிறத்தை பின்வாங்கிய பின்னணி நிறத்தை ✅ குறியீடு தரம் சவால்: இந்த CSS DRY (தபால் மீறியயின் தியானம்) கொள்கையை மீறுகிறது. நீங்கள் எவ்வாறு அதை ID மற்றும் கிளாஸ் இரண்டையும் பயன்படுத்தி திருத்தம்செய்யலாம்? மேம்படுத்திய அணுகுமுறை: ### மீண்டும் பயன்படுத்தக்கூடிய ஸ்டைல்களுக்கு கிளாஸ் தேர்வீடுகள் கிளாஸ் தேர்வீடுகள் . அடையாளத்துடன் பல கூறுக்களுக்கும் ஒரே ஸ்டைலைப் பயன்படுத்த சிறந்தவை. ID கள் போல இல்லாமல், கிளாஸ்கள் உங்கள் HTML முழுவதும் மீண்டும் பயன்படுத்தப்படலாம், இது ஒற்றுமையான ஸ்டைல் மாதிரிகளுக்கு உதவும். நமது டெர்ரேரியத்தில், ஒவ்வொரு செடியும் ஒற்றுமையான ஸ்டைலிங் தேவை, ஆனால் தனித்துவமான இடமிடல் தேவை. கிளாஸ் மற்றும் ID களை இணைத்து இதை நாம் சாதிப்போம். ஒவ்வொரு செடியின் HTML அமைப்பு: முக்கிய கூறுகள்: - பயன்படுத்துகிறது class="plant-holder" அனைத்து செடிகளுக்குமான பொருள் தாங்குபவராக இடத்தை ஒப்படைத்தல் - பயன்படுத்துகிறது class="plant" பகிர்ந்துகொள்ளப்பட்ட பட வண்ணத்தையும் நடத்தைக்கும் - கொடுக்கிறது தனித்துவமான id="plant1" இடமிடம் மற்றும் JavaScript தொடர்புக்கு - கொடுக்கிறது திரை வாசகருக்கு இணையான விவரமான alt உரையை இப்போது உங்கள் style.css கோப்பில் இச்சொற்களைச் சேர்க்கவும்: இந்த ஸ்டைல்களை உடைகிறோம்: - உருவாக்குகிறது plant-holder க்கு தொடர்பான (relative) இடமிடலை இடத்தை நிர்ணயிப்பதற்கான சூழலை உருவாக்க - நிர்ணயிக்கிறது ஒவ்வொரு செடி தாங்குபவரின் உயரம் 13%, செடிகள் திரை அளவை மாற்றியும் செங்குத்தாக பொருந்துவதை உறுதி செய்ய - ஈடுபடுத்துகிறது தாங்குபவர்களை சிறிது இடது பக்கம் நகர்த்து செடிகள் தங்கள் கன்டெய்னர்களில் சிறப்பாக மையமாக்வது - தவிர்க்கிறது செடிகள் எதிரொலிக்கும் அளவை அதிகபட்ச அகலம் மற்றும் உயரம் வசதிகள் கொண்டு - பயன்படுத்துகிறது z-index செடிகளை மற்ற கூறுகளுக்கு மேல் அடுக்குவதற்காக - சேர்க்கிறது CSS மாற்றங்களுக்கு சிறிய ஹோவர் விளைவாக, பயனர் தொடர்புக்களை மேம்படுத்த ✅ ஆழ்ந்து சிந்திக்கும் கேள்வி: ஏன் .plant-holder மற்றும் .plant இரண்டும் தேவை? ஒரே தேர்வீடு பயன்படுத்தினால் என்ன நடக்கும்? ## CSS இடமிடலைப் புரிதல் CSS இடமிடல் என்பது ஒரு நாடக இயக்குனரின் வேதைப்போல் - நீங்கள் ஒவ்வொரு நடிகரின் நிலையை மற்றும் அவர்கள் மேடையில் எப்படி நகர்வதை கட்டுப்படுத்துகிறீர்கள். சில நடிகர்கள் வழமையான அமைப்பைப் பின்பற்றுகின்றனர், சிலர் நாட்டு நாடகத்திற்கென தனித்துவமான இடமிடலைக் வேண்டும். இடமிடல் புரிந்துகொண்டதும், பல கட்டமைப்பு சவால்களை சரி செய்யலாம். பயனர்கள் ஸ்கிரோல் செய்து கொண்டிருக்கும் போது அமைதியாக இருக்க ஒரு வழிசெலுத்தல் பட்டியலை வேண்டுமா? இடமிடல் அதற்கு உதவும். குறிப்பிட்ட இடத்தில் தோன்றும் ஒரு கருப்பொருளைக் காண விரும்புகிறீர்களா? அது இடமிடல்தான். ### ஐந்து இடமிடல் மதிப்புகள் ### நமது டெர்ரேரியத்தில் இடமிடல் நமது டெர்ரேரியம் வெவ்வேறு இடமிடல் வகைகளின் நுட்பமான கலவையைப் பயன்படுத்தி தேவையான கட்டமைப்பை உருவாக்கியது: இடமிடல் தந்திரத்தைப் புரிந்து கொள்வோம்: - Absolute கன்டெய்னர்கள் வழக்கமான ஆவண ஓட்டத்திலிருந்து நீக்கப்பட்டு திரை ஓரங்களில் ஒட்டப்படுகின்றன - Relative செடி தாங்கிகள் இடமிடல் சூழலை உருவாக்கிய போது ஆவண ஓட்டத்தில் உள்ளன - Absolute செடிகள் தங்கள் relative தாங்கிகளில் துல்லியமாக இடம் பெறக்கூடியவை - இந்த இணைப்பு செடிகளை செங்குத்தாக அடுக்கி ஒரே நேரத்தில் தனியாக இடமிட முடியும் ✅ சோதனை நேரம்: இடமிடல் மதிப்புகளை மாற்றி முடிவுகளை காணுங்கள்: - .container ஐ absolute இருந்து relative ஆக மாற்றினால் என்ன நடக்கும்? - .plant-holder relative பதிலாக absolute பயன்படுத்தினால் அமைப்பு எப்படி மாறும்? - .plant-ஐ relative இடத்தை மாற்றுவதால் என்ன நடக்கும்? ### 🔄 கற்பித்தல் சரிபார்ப்பு CSS இடத்தமைப்பு கையாள்தல்: உங்கள் புரிதலை சரிபார்க்க நின்று கொண்டு பாருங்கள்: - ✅ இழு-விடு செயலுக்கு தாவல்கள் ஏன் absolute இடத்தமைப்பை தேவைப்படுகிறது என்பதை விளக்க முடியுமா? - ✅ relative கொண்டெய்னர்கள் எப்படி இடத்தமைப்புச் சூழலை உருவாக்குகின்றன என்பதை புரிந்துகொண்டுள்ளீர்களா? - ✅ பக்கம் உள்ள கொண்டெய்னர்கள் ஏன் absolute இடத்தமைப்பைப் பயன்படுத்துகின்றன? - ✅ இடத்தமைப்பு அறிவிப்புகளை முழுவதுமாக நீக்கினால் என்ன நடக்கும்? உண்மையான உலகம் தொடர்பு: CSS இடத்தமைப்பு உண்மையான உலக அமைப்பை எப்படி பிரதிபலிக்கிறது என்று யோசிக்கவும்: - Static: தாவலை ஒரு தனிச்செட்டில் வைத்திருப்பது (இயல்பான வரிசை) - Relative: ஒரு புத்தகத்தை சிறிது நகர்த்துவது ஆனால் அதன் இடத்தை நிலைநிறுத்துவது - Absolute: ஒரு குறிச்சீட்டைக் குறிப்புணர்வு பக்கம் எண் மீது வைத்தல் - Fixed: பக்கங்களை அடுத்தடுத்து திரும்பும் போது தொடர்ச்சியாகக் காணப்படும் நிலையான குறிப்பு ## CSS மூலம் டெரேரியம் கட்டுதல் இப்போது நாங்கள் CSS மட்டுமே பயன்படுத்தி கண்ணாடி ஜார் ஒன்றை கட்டப் போகிறோம் — படங்கள் அல்லது கிராபிக்ஸ் மென்பொருள் தேவையில்லை. இடத்தமைப்பு மற்றும் வெளிர்வு விளைவுகளை பயன்படுத்தி நிஜமான கண்ணாடி, நிழல்கள் மற்றும் ஆழம் விளைவுகளை உருவாக்குவது CSS-இன் காட்சிப்படுத்தல் திறன்களை வெளிப்படுத்துகிறது. இந்த முறைபாடு, பௌஹாஸ்க் இயக்கத்தில் கட்டிடக்கலைஞர்கள் எளிமையான ஜியோமெட்ரிக் வடிவங்களை பயன்படுத்தி மிகுந்த சிக்கலான அழகான கட்டுமானங்களை உருவாக்கிய விதத்தை போன்றது. நீங்கள் இந்த கோட்பாடுகளை புரிந்துகொண்டால், பல வலைத்தள வடிவமைப்புகளின் பின்னணியில் உள்ள CSS முறைகள் புரிந்துகொள்ளலாம். ### கண்ணாடி ஜார் கூறுகளை உருவாக்குதல் டெரேரியம் ஜாரை பகுதி பாகமாக கட்டுவோம். ஒவ்வொரு பகுதியும் absolute இடத்தமைப்பையும் சதவீத அளவிடுதலையும் பயன்படுத்துகிறது, இது பதிலளிக்கும் வடிவமைப்புக்கு உகந்தது: டெரேரியம் கட்டுமானத்தைப் புரிந்துகொள்ளலாம்: - பயன்படுத்துகிறது எல்லா திரை அளவுகளும் பதிலளிக்க சதவீத அடிப்படையில் அளவிடுக - இடைத்தருகிறது கூறுகளை துல்லியமாக மடங்கவும், சீரமைக்கவும் absolute இடத்திலாக - வைத்து வருகிறது கண்ணாடி வெளிர்வு விளைவுக்கு வெவ்வேறு வெளிர் மட்டம் மதிப்புகளை - நிறைவேற்றுகிறது z-index படிகள் நட்புடைய அமைப்பை உறுதி செய்வதற்கு - கூட்டுகிறது மிதமான பாக்ஸ்-ஷாடோ மற்றும் நுட்பமான எல்லை வளைவு உருவாக்கப்படுவதற்காக ### சதவீதங்களுடன் பதிலளிக்கும் வடிவமைப்பு எல்லா அளவுகளும் நிரந்தர பிக்சல் மதிப்புகளைப் பதிலாக சதவீதங்களைக் பயன்படுத்துவதை கவனியுங்கள்: இதன் முக்கியத்துவம்: - உறுதி செய்கிறது டெரேரியம் எந்த திரை அளவிலும் சீரான விகிதத்தில் பரவுகிறது - காக்கிறது ஜார் கூறுகளுக்கு இடையேயான காட்சிப் தொடர்புகளை - வழங்குகிறது மொபைல் கைபேசிகளிலிருந்து பெரிய டெஸ்க்டாப் மோனிடர்களுக்கு ஒரே மாதிரியான அனுபவத்தை - அனுமதிக்கிறது வடிவமைப்பு காட்சி அமைப்பை சேதப்படாமல் தன்னிச்சையாக மாற்றிக்கொள்ள ### CSS அலகுகள் செயல்பாட்டில் நாம் rem அலகுகளை எல்லை வளைவுக்காக பயன்படுத்துகிறோம், இது ரூட் எழுத்துரு அளவினைப் பொருத்த அளவிடுகிறது. இது பயனர் எழுத்துரு விருப்பங்களை மதிக்கும் அணுகக்கூடிய வடிவமைப்புகளை உருவாக்க உதவுகிறது. அதிகாரப்பூர்வ குறிப்பிட்டலில் CSS தொடர்புள்ள அலகுகள் பற்றி கற்றுக்கொள்ளவும். ✅ காட்சி பரிசோதனை: இந்த மதிப்புகளை மாற்றிக் கொண்டு அதனை கவனிக்கலாம்: - ஜார் வெளிர்தன்மையை 0.5-ல் இருந்து 0.8-க்கு மாற்றுக — கண்ணாடி தோற்றத்தில் என்ன மாற்றம்? - மண் நிறத்தை #3a241d இருந்து #8B4513க்கு மாற்றுக — காட்சி விளைவில் என்ன தாக்கம்? - மண்ணின் z-index-ஐ 2 ஆக மாற்றுக — படியலுக்கு என்ன ஆகும்? ### 🔄 கற்பித்தல் சரிபார்ப்பு CSS காட்சி வடிவமைப்பு புரிதல்: காட்சி CSS பற்றி உங்கள் புரிதலை உறுதிப்படுத்தவும்: - ✅ சதவீத அடிப்படையிலான அளவுகள் பதிலளிக்கும் வடிவமைப்பை எப்படி உருவாக்குகின்றன? - ✅ வெளிருவாள் கண்ணாடி прозрачность விளைவுக்கு எப்படி உதவுகிறது? - ✅ படி அமைப்பில் z-index இன் பங்கு என்ன? - ✅ எல்லை வளைவு மதிப்புகள் ஜார் வடிவத்தை எப்படி உருவாக்குகின்றன? வடிவமைப்பு 원칙ம்: எளிய வடிவங்களிலிருந்து சிக்கலான காட்சிகளை உருவாக்குவதை கவனியுங்கள்: 1. சதுரங்கள் → வளைந்து சதுரங்கள் → ஜார் கூறுகள் 2. சிதறல் நிறங்கள் → வெளிருவாள் → கண்ணாடி விளைவுகள் 3. தனிப்பட்ட கூறுகள் → படிகள் ஒன்று சேர்க்கல் → 3D தோற்றம் --- ## GitHub Copilot முகவர் சவால் 🚀 Agent முறையைப் பயன்படுத்தி கீழ்காணும் சவாலை முடிக்கவும்: விளக்கம்: டெரேரியம் தாவல்களை மெதுவாக இடதுபுறமும் வலப்புறமும் திரும்பச் செய்யும் CSS அனிமேஷனை உருவாக்கவும். இயற்கையான காற்றின் அசைவினை ப்ரதி கணிப்பதற்கு இது உதவும். CSS அனிமேஷன்கள், மாற்றங்கள் மற்றும் முக்கியப்புள்ளிகளைக் கற்றுக் கொள்ள இது சிறந்த வாய்ப்பு. கோரிக்கை: டெரேரியத்தில் உள்ள தாவல்களுக்கு CSS கீஃப்ரேம் அனிமேஷன்களைச் சேர்க்கவும். ஒவ்வொரு தாவலும் கொஞ்சம் (2-3 டிகிரி) இடதுக்கு வலம் மற்றும் வலது வலம் திரும்பும் அசைவுடன் 3-4 நொடிகள் தொடர்ச்சியுடன் நடந்துகொள்ளும் அசைவையும் உருவாக்கவும், .plant வகுப்புக்கு பயன்படுத்தவும். அனிமேஷன் முடிவில்லாமல் தொடர வேண்டும் மற்றும் இயற்கையான இயக்கத்திற்கு ஈசிங் செயல்பாடு இருக்க வேண்டும். agent mode பற்றி மேலதிகமாக தெரிந்து கொள்ளவும். ## 🚀 சவால்: கண்ணாடி பிரதிபலிப்புகளைச் சேர்க்குதல் உங்கள் டெரேரியத்தை நிஜமாகத் தெரிந்துகொள்ளும் கண்ணாடி பிரதிபலிப்புகளுடன் மேம்படுத்தத் தயாரா? இந்த முறை ஆழமும் நிஜத்தன்மையும் சேர்க்கும். கண்ணாடி மேற்பரப்புகளில் வெளிச்சம் எப்படி பிரதிபலிக்கிறது என்பதை போல மென்மையான வெளிச்சங்களை உருவாக்க வேண்டியிருக்கும். இந்த முறையை ரெனசான்ஸ் ஓவியர்கள் ஜான் வான் ஐக் போன்றோர் படவணக்க கண்ணாடி மூலமான வெளிச்சங்களைக் காட்சிப்படுத்த பயன்படுத்தினர். நீங்கள் நோக்கி செல்ல வேண்டியது இதுதான்: உங்கள் சவால்: - மென்மையான வெள்ளை அல்லது இலகுவான நிற oval வடிவங்களை கண்ணாடி பிரதிபலிப்புகளுக்கு உருவாக்கவும் - அதை ஜாரின் இடது பக்கத்தில் நுட்பமாக வைக்கவும் - பொருத்தமான வெளிர் மற்றும் புளர் விளைவுகளை நிஜமாக்கிட பயன்படுத்தவும் - border-radius-ஐ உயிர்வளமான புழுதி போன்ற வடிவாக்கங்களுக்கு பயன்படுத்தவும் - உயிர்வளமானதாக்குவதற்கு கிராடியன்ட் அல்லது பாக்ஸ்-ஷாடோக்களை முயற்சி செய்யவும் ## பாடநெறி பிறகு வினாடி வினாக்கள் பாடநெறி பிறகு வினாடி வினாக்கள் ## உங்கள் CSS அறிவை விரிவாக்குக CSS முதலில் சிக்கலாக தோன்றலாம், ஆனால் இந்த அடிப்படைகள் புரிந்துகொண்டால் மேம்பட்ட கொள்கைகளுக்கு வலுவான அடித்தளமாக இருக்கும். உங்கள் அடுத்த CSS கற்கும் பகுதிகள்: - Flexbox - கூறுக்களை சரிசெய்தல் மற்றும் பகிர்வு எளிதாக்குகிறது - CSS Grid - சிக்கலான அமைப்புகளை உருவாக்க சக்திவாய்ந்த கருவி - CSS Variables - மறு பயன்பாட்டை குறைத்து பராமரிப்பை மேம்படுத்துகிறது - பதிலளிக்கும் வடிவமைப்பு - வேறுபட்ட திரை அளவுகளுக்கு சரிவர வேலை செய்ய உதவுகிறது ### தொடர்புடைய கற்றல் வளங்கள் இந்த கருத்துக்களை உணர்வுப்பூர்வமான, கைமுறை விளையாட்டுகளுடன் விவாதிக்கவும்: - 🐸 Flexbox Froggy - Flexbox-ஐ சுவாரஸ்யமான சவால்களுடன் கற்றுக்கொள்ளவும் - 🌱 Grid Garden - CSS Grid கற்றுக்கொள்ளும் வரைந்து வளர்ப்பு விளையாட்டு - 🎯 CSS Battle - CSS திறன்களை போட்டியில் சோதிக்கவும் ### கூடுதல் கற்கல் விரிவான CSS அடிப்படைகளை கற்றுக்கொள்ளும் Microsoft Learn பகுதி: உங்கள் HTML செயலியில் CSS-ஐ ஸ்டைல் செய்யவும் ### ⚡ அடுத்த 5 நிமிடங்களில் செய்யவேண்டியது - [ ] DevTools-ஐ திறந்து எந்தவொரு தளத்திலும் CSS ஸ்தோலை சந்தித்தல் மற்றும் Elements பகுதியை ஆய்வு செய்தல் - [ ] எளிய CSS கோப்பை உருவாக்கி ஒரு HTML பக்கத்துடன் இணைத்தல் - [ ] வண்ணங்களை மாறுபட்ட முறைகளின் மூலம் மாற்றி பார்க்க: hex, RGB, பெயர் கொண்ட வண்ணங்கள் - [ ] ஒரு div-க்கு பின்புறம் மற்றும் மார்ஜின் சேர்த்து box model பயிற்சி செய்தல் ### 🎯 இந்த மணிநேரத்தில் நீங்கள் அடையக்கூடியவை - [ ] பாடபின்னர் வினாக்களை முடித்து CSS அடிப்படைகளை மதிப்பாய்வு செய்தல் - [ ] உங்கள் HTML பக்கத்திற்கு எழுத்துருக்கள், வண்ணங்கள் மற்றும் இடைவெளி சேர்த்து அலங்காரம் செய்தல் - [ ] Flexbox அல்லது Grid பயன்படுத்தி எளிய அமைப்பை உருவாக்குதல் - [ ] CSS மாற்றங்களை பயன்படுத்தி மிருதுவான விளைவுகளை முயற்சித்தல் - [ ] மீடியா கேள்விகளுடன் பதிலளிக்கும் வடிவமைப்புக்களை பயிற்சி செய்தல் ### 📅 உங்கள் வாரம் முழுவதும் CSS அனுபவம் - [ ] கற்பனை மிகு டெரேரியம் அலங்கார பணியை முடித்தல் - [ ] CSS Grid-ஐ பயன்படுத்தி பட காட்சியூடாக அமைப்பதை கற்றல் - [ ] CSS அனிமேஷன்களை கற்றுக்கொண்டு உங்கள் வடிவமைப்புகளை உயிர்ப்பித்தல் - [ ] Sass அல்லது Less போன்ற CSS முன்னமைப்பாளர்களைப் பயன்படுத்தி ஆராய்ச்சி செய்தல் - [ ] வடிவமைப்பு கொள்கைகளைப் படித்து CSS-க்கு பொருத்துதல் - [ ] ஆன்லைனில் பார்த்த சுவையான வடிவமைப்புகளை பகுப்பாய்வு செய்து பின்பற்றுதல் ### 🌟 மாதம் முழுவதும் உங்கள் வடிவமைப்பு தேர்ச்சி - [ ] முழுமையான பதிலளிக்கும் வலைத்தளம் வடிவமைப்பு அமைப்பை கட்டியெழுதுதல் - [ ] Tailwind போன்ற CSS-in-JS அல்லது பயன்பாட்டு முதன்மை வடிவமைப்புகளை கற்றல் - [ ] திறந்த மூல திட்டங்களுக்கு CSS மேம்பாடுகளுடன் பங்களிப்பு செய்தல் - [ ] CSS சுயமாக்கல்களும் containment போன்ற மேம்பட்ட கொள்கைகளையும் ஆற்றல் பெறுதல் - [ ] modular CSS உடன் மீண்டும் பயன்படுத்தக்கூடிய கூறு நூலகங்களை உருவாக்குதல் - [ ] CSS கற்றுக்கொள்ளும் மற்றவர்களுக்கு வழிகாட்டுதல் மற்றும் வடிவமைப்பு அறிவைப் பகிர்தல் ## 🎯 உங்கள் CSS தேர்ச்சி காலவரிசை ### 🛠️ உங்கள் CSS கருவிகளின் சுருக்கம் இந்த பாடத்தை முடித்ததும், நீங்கள் இவற்றைக் கையாள முடியும்: - காச்கேடு புரிதல்: எப்படி திருமிச்சல்கள் ஒருவருக்கொருவர் பரப்பி மறுக்கும் மற்றும் மீறுகின்றன - தேர்வாளர் தேர்ச்சி: கூறுகள், வகுப்புகள், மற்றும் ஐடியுடன் துல்லியமான குறிவைமைப்பு - இடத்தமைப்பு திறன்கள்: கூறுகளை திட்டமிடல் மற்றும் படிகளுக்கு இடம்காட்டல் - காட்சி வடிவமைப்பு: கண்ணாடி விளைவுகள், நிழல்கள் மற்றும் வெளிர்மை உருவாக்குதல் - பதிலளிக்கும் தொழில்நுட்பங்கள்: எந்த திரைக்கும் தகுந்த சதவீத அடிப்படையிலான அமைப்புகள் - கோடு ஒழுங்கமைப்பு: சுத்தமான, பராமரிக்க கூடிய CSS அமைப்பு - நவீன நடைமுறைகள்: தொடர்புடைய அலகுகள் மற்றும் அணுகக்கூடிய வடிவமைப்பு முறைமைகள் அடுத்த படிகள்: உங்கள் டெரேரியம் இப்போது அமைப்பும் (HTML) மற்றும் ஸ்டைலும் (CSS) இரண்டும் உள்ளது. இறுதி பாடத்தில் Javascript மூலம் இடையூறுகளும் சேர்க்கபட உள்ளது! ## பணிபுரிதல் CSS மறுசீரமைப்பு --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> மீட்டுரை: இந்த ஆவணம் Co-op Translator என்ற AI மொழிபெயர்ப்பு சேவையை பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சிப்பினும், தானாகச் செய்யப்பட்ட மொழிபெயர்ப்புகள் தவறுகள் அல்லது தவறான தகவல்களை கொண்டிருக்கலாம் என்பதை தயவுசெய்து கவனியுங்கள். இயல்பான மொழியில் உள்ள அடிப்படைக் கோப்பு அதிகாரப்பூர்வமான மூலமாக கருதப்பட வேண்டும். முக்கியமான தகவலுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பின் பயன்பாட்டால் ஏற்படும் ஏதேனும் தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு எங்களுக்கு எந்தப் பொறுப்பும் இருந்துகொள்ளாது. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Project Part 1: HTML కు పరిచయం
HTML, లేదా HyperText Markup Language, మీరు ఎప్పుడైనా సందర్శించిన ప్రతి వెబ్సైట్ యొక్క మూలాధారం. HTMLని వెబ్ పేజీలకు నిర్మాణాన్ని ఇచ్చే ఎముకల యాడుగా భావించండి – అది ఎక్కడ విషయం ఉండాలి, ఎలా అవి ఏర్పాటు చేయబడ్డాయి, ప్రతి భాగం ఏమిటి అని నిర్వచిస్తుంది. CSS తరువాత మీ HTMLను రంగులు మరియు లేఅవుట్లు తో "డ్రెస్ అప్" చేస్తుంది, మరియు JavaScript ఇంటరాక్టివిటీతో జీవంతం చేస్తుంది, HTML అన్ని ఇతర విషయాలను సాధ్యాన్ని చేసే ప్రాథమిక నిర్మాణాన్ని అందిస్తుంది. ఈ పాఠంలో, మీరు ఒక వర్చ్యువల్ టెరేరియం ఇంటర్ఫేస్ కోసం HTML నిర్మాణం సృష్టించబోతున్నారు. ఈ హ్యాండ్స్-ఆన్ ప్రాజెక్టు ద్వారా మీరు ప్రాథమిక HTML కాన్సెప్ట్స్ నేర్చుకుంటారు మరియు దృశ్యంగా ఆకట్టుకునే దాన్ని నిర్మించబోతున్నారు. మీరు సెమెంటిక్ ఎలిమెంట్స్ ఉపయోగించి విషయం ఎలా ఏర్పాటు చేయాలో, చిత్రాలతో ఎలా పనిచేయాలో, మరియు ఇంటరాక్టివ్ వెబ్ అనువర్తనం కోసం ప్రాథమికాన్ని ఎలా సృష్టించాలో నేర్చుకుంటారు. ఈ పాఠం ముగింపులో, మీరు ఒక పని చేసే HTML పేజీ చేయబోతారు, ఇది సజీవమైన కాలములలో మొక్కల చిత్రాలను ప్రదర్శిస్తుంది, తదుపరి పాఠంలో స్టైలింగ్ కోసం సిద్ధంగా ఉంటుంది. ఇది మొదట్లో బేసిక్ గా కనపడితే బాగోలేదు – అదే HTML పని చేసేది CSS దృష్టి సౌందర్యాన్ని జోడించడానికి ముందు. ## లెక్చర్ కు ముందు క్విజ్ Pre-lecture quiz ## మీ ప్రాజెక్ట్ సెటప్ చేయడం HTML కోడ్ లోకి దిగేముందు, మీ టెరేరియం ప్రాజెక్ట్ కోసం సరైన వర్క్ స్పేస్ ను ఏర్పాటు చేద్దాం. మొదటి నుండి ఒక సరిగా నిర్వహించబడిన ఫైల్ నిర్మాణాన్ని సృష్టించడం ఒక కీలక అలవాటు, ఇది మీ వెబ్ అభివృద్ధి ప్రయాణంలో మీకు చాలా ఉపయోగపడుతుంది. ### టాస్క్: మీ ప్రాజెక్ట్ నిర్మాణం సృష్టించండి మీ టెరేరియం ప్రాజెక్ట్ కోసం ఒక ప్రత్యేక ఫోల్డర్ మరియు మీ మొదటి HTML ఫైల్ను సృష్టించబోతున్నారు. మీరు ఉపయోగించగల రెండు విధానాలు ఇక్కడ ఉన్నాయి: ఎంపిక 1: Visual Studio Code ఉపయోగించడం 1. Visual Studio Codeను ఓపెన్ చేయండి 2. "File" → "Open Folder" ను క్లిక్ చేయండి లేదా Ctrl+K, Ctrl+O (Windows/Linux) లేదా Cmd+K, Cmd+O (Mac) ఉపయోగించండి 3. terrarium అనే కొత్త ఫోల్డర్ సృష్టించి దానిని ఎంచుకోండి 4. ఎక్స్ప్లోరర్ ప్యానెలులో, "New File" ఐకాన్ పై క్లిక్ చేయండి 5. మీ ఫైల్కు పేరు index.html పెట్టండి ఎంపిక 2: టెర్మినల్ కమాండ్ లు ఉపయోగించడం ఈ కమాండ్ లు ఏమి చేస్తారంటే: - కొత్త డైరెక్టరీ terrarium ను మీ ప్రాజెక్ట్ కోసం సృష్టిస్తుంది - terrarium డైరెక్టరీ లోకి మారుతుంది - ఖాళీ index.html ఫైల్ సృష్టిస్తుంది - ఫైల్ను Visual Studio Code లో సవరించేందుకు ఓపెన్ చేస్తుంది ## HTML డాక్యుమెంట్ నిర్మాణం అర్థం చేసుకోవడం ప్రతి HTML డాక్యుమెంట్ బ్రౌజర్లకు అర్థమయ్యేలా మరియు సరి చూపించేందుకు నిర్ధారించడానికి ఒక నిర్దిష్ట నిర్మాణం అనుసరిస్తుంది. ఈ నిర్మాణాన్ని ఒక అధికారిక లేఖ అనుకుంటే – ఇందులో నిర్దిష్ట క్రమంలో అవసరమైన ఎలిమెంట్లు ఉంటాయి, ఇవి గ్రాహకుడు (ఇక్కడ బ్రౌజర్) సరిగా విషయాన్ని ప్రాసెస్ చేయడంలో సహాయపడతాయి. ప్రతి HTML డాక్యుమెంట్కు అవసరమైన ప్రాథమిక స్థాపనను జోడించడం ప్రారంభిద్దాం. ### DOCTYPE ప్రకటన మరియు మూల ఎలిమెంట్ ఏ HTML ఫైల్ మొదటి రెండు లైన్లు బ్రౌజర్కు డాక్యుమెంట్ యొక్క "పరిచయం": ఈ కోడ్ ఏమి చేస్తుందో అర్థం చేసుకోవడం: - <!DOCTYPE html> ను ఉపయోగించి డాక్యుమెంట్ టైప్ను HTML5 గా ప్రకటిస్తుంది - అన్ని పేజీ విషయాలను కలిగించే మూల <html> ఎలిమెంట్ సృష్టిస్తుంది - సరియైన బ్రౌజర్ రేండరింగ్ కొరకు ఆధునిక వెబ్ ప్రమాణాలను ఏర్పాటు చేస్తుంది - వివిధ బ్రౌజర్ల మరియు డివైస్ లలో సళువు ప్రదర్శనను నిర్ధారిస్తుంది ### 🔄 శిక్షణాత్మక తనిఖీ ఆరంభించకముందు ఆలోచించండి: మీరు ఈ క్రిందలు అర్థం చేసుకున్నారా: - ✅ ప్రతి HTML డాక్యుమెంట్ కి DOCTYPE ప్రకటన ఎందుకు కావాలి - ✅ <html> మూల ఎలిమెంట్ లో ఏమి ఉంటుంది - ✅ ఈ నిర్మాణం బ్రౌజర్లకు పేజీలను తగినట్టుగా ఎలా చూపించడంలో సహాయపడుతుంది త్వరిత స్వీయ-పరీక్ష: "స్టాండర్డ్స్-కంప్లయింట్ రేండరింగ్" అంటే మీ మాటల్లో మీరు ఎలా వివరిస్తారు? ## అవసరమైన డాక్యుమెంట్ మెటాడేటాను చేర్చడం HTML డాక్యుమెంట్ యొక్క <head> విభాగం బ్రౌజర్లు మరియు సెర్చ్ ఇంజిన్లు అవసరమయ్యే ముఖ్య సమాచారం కలిగి ఉంటుంది, కానీ సందర్శకులు పేజీ పై నేరుగా చూడరారు. ఇది ఒక "వెనుకగడ్డ సమాచారం" లాంటిదిగా భావించండి, ఇది మీ వెబ్ పేజీ యొక్క సరిగ్గా పనిచేయడం మరియు వాడే డివైస్ లకు సరైన ప్రదర్శన అందించడానికి సహాయపడుతుంది. ఈ మెటాడేటా బ్రౌజర్లకు మీ పేజీ ఎలా ప్రదర్శించాలో, ఎటువంటి క్యారెక్టర్ ఎంకోడింగ్ ఉపయోగించాలో, వివిధ స్క్రీన్ పరిమాణాలను ఎలా నిర్వహించాలో చెప్పుతుంది – ఇవన్నీ ప్రొఫెషనల్, యాక్సెసిబుల్ వెబ్ పేజీలను సృష్టించడానికి అవసరం. ### టాస్క్: డాక్యుమెంట్ హెడ్ను చేర్చండి మీ ప్రారంభ మరియు ముగింపు <html> ట్యాగుల మధ్య ఈ <head> విభాగాన్ని చొప్పించండి: ప్రతి ఎలిమెంట్ ఏమి accomplish చేస్తుందో విభజన: - బ్రౌజర్ ట్యాబ్స్ మరియు సెర్చ్ ఫలితాలలో కనిపించే పేజీ శీర్షికను సెట్స్ చేస్తుంది - ప్రపంచవ్యాప్తంగా సరైన టెక్ట్స్ ప్రదర్శన కోసం UTF-8 క్యారెక్టర్ ఎంకోడింగ్ను స్పెసిఫై చేస్తుంది - ఆధునిక Internet Explorer వెర్షన్లతో అనుకూలతను నిర్ధారిస్తుంది - డివైస్ వెడల్పుకు తగ్గట్టుగా viewport ను సెట్ చేసి స్పందించే డిజైన్ను కంఫిగర్ చేస్తుంది - విషయాన్ని సహజ పరిమాణంలో చూపించేందుకు ప్రారంభ జూమ్ స్థాయిని నియంత్రిస్తుంది ## డాక్యుమెంట్ బాడీని నిర్మించడం <body> ఎలిమెంట్ మీ వెబ్ పేజీ యొక్క అన్ని కనిపించే కంటెంట్ ను కలిగి ఉంటుంది – యూజర్లు చూసే మరియు ఇంటరాక్ట్ చేసే ప్రతిదీ. <head> విభాగం బ్రౌజర్ కి సూచనలు అందించినా, <body> విభాగంలో అసలు విషయాలు ఉంటాయి: టెక్ట్స్, చిత్రాలు, బటన్లు మరియు ఇతర UI ఎలిమెంట్లు. బాడీ నిర్మాణాన్ని జోడించి, HTML ట్యాగ్లు ఎలా కలిసి అర్థవంతమైన విషయం సృష్టిస్తాయో అర్థం చేసుకుందాం. ### HTML ట్యాగ్ నిర్మాణం అర్థం చేసుకోవడం HTMLలో ఎలిమెంట్లను నిర్వచించడానికి స్టాండర్డ్ జోడు ట్యాగ్స్ ఉపయోగిస్తారు. చాలా ట్యాగ్స్ వద్ద ఓపెనింగ్ <p> మరియు క్లోజింగ్ </p> ట్యాగ్ ఉంటాయి, మధ్యలో విషయముంటుంది: <p>Hello, world!</p>. ఇది "Hello, world!" టెక్ట్స్ తో ఒక ప్యారాగ్రాఫ్ ఎలిమెంట్ సృష్టిస్తుంది. ### టాస్క్: బాడీ ఎలిమెంట్ చేర్చండి మీ HTML ఫైల్ను <body> ఎలిమెంట్ తో అప్డేట్ చేయండి: ఈ సంపూర్ణ నిర్మాణం ఏమి అందిస్తుంది: - ప్రాథమిక HTML5 డాక్యుమెంట్ ఫ్రేమ్వర్క్ను ఏర్పాటు చేస్తుంది - సరైన బ్రౌజర్ రేండరింగ్ కోసం అవసరమైన మెటాడేటాను కలిగిస్తుంది - కనిపించే కంటెంట్ కోసం ఖాళీ బాడీని సృష్టిస్తుంది - ఆధునిక వెబ్ అభివృద్ధి మంచిపనులని అనుసరిస్తుంది ఇప్పుడు మీరు మీ టెరేరియం కనిపించే అంశాలు జోడించేందుకు సిద్ధంగా ఉన్నారు. విభిన్న భాగాలను ఏర్పాటుచేయడానికి కంటైనర్లుగా <div> ఎలిమెంట్లను, మొక్కల చిత్రాలను ప్రదర్శించడానికి <img> ఎలిమెంట్లను ఉపయోగిస్తాము. ### చిత్రాలతో మరియు లేఅవుట్ కంటైనర్లతో పని చేయడం HTMLలో చిత్రాలు ప్రత్యేకం, ఎందుకంటే అవి "సెల్ఫ్-క్లోజింగ్" ట్యాగ్స్ ఉపయోగిస్తాయి. కంటెంట్ చుట్టూ కూర్చుకునే <p></p> లాంటి ఎలిమెంట్లకు భిన్నంగా, <img> ట్యాగ్ లో అవసరమైన సమాచారం ట్యాగ్ లోనేని src వంటి అట్రిబ్యూట్లతో ఉంటుంది మరియు యాక్సెసిబిలిటీ కోసం alt అట్రిబ్యూట్ ఉంటుంది. మీ HTMLకు చిత్రాలను జోడించే ముందు, ప్రాజెక్ట్ ఫైళ్ళను సక్రమంగా ఏర్పాటు చేయాలి. అందుకోసం images ఫోల్డర్ సృష్టించి, మొక్కల చిత్రాలను అందులో ఉంచాలి. మొదట, మీ చిత్రాలను సెట్ చేయండి: 1. మీ టెరేరియం ప్రాజెక్ట్ ఫోల్డర్ లో images ఫోల్డర్ ను సృష్టించండి 2. solution folder నుండి మొక్కల చిత్రాలను డౌన్లోడ్ చేయండి (మొత్తం 14 మొక్కల చిత్రాలు) 3. అన్ని మొక్కల చిత్రాలను కొత్త images ఫోల్డర్ లో కాపీ చేయండి ### టాస్క్: మొక్క ప్రదర్శన లేఅవుట్ సృష్టించండి ఇప్పుడు మీ <body></body> ట్యాగుల మధ్యలో రెండు కాలములుగా ఏర్పాటు చేసిన మొక్కల చిత్రాలను జోడించండి: దశల వారీగా, ఈ కోడ్లో ఏమి జరుగుతుందో: - id="page" తో ప్రధాన పేజీ కంటైనర్ సృష్టించడం, అన్ని కంటెంట్ ను కలిగి ఉంటుంది - రెండు కాలమ్ కంటైనర్లు సృష్టించడం: left-container మరియు right-container - ఎడమ కాలమ్లో 7 మొక్కలు, కుడి కాలమ్లో 7 మొక్కలు ఏర్పాటు చేయడం - ప్రతి మొక్క చిత్రాన్ని వ్యక్తిగత స్థానం కోసం plant-holder div లో చుట్టడం - తదుపరి పాఠంలో CSS స్టైలింగ్ కోసం సమానమైన క్లాస్ పేర్లను అప్లై చేయడం - JavaScript ఇంటరాక్షన్ కోసం ప్రతి మొక్క చిత్రానికి ప్రత్యేక ID కేటాయించడం - చిత్రాల ఫోల్డర్ వైపు సరిగా ఉన్న ఫైల్ పథాలను ఉపయోగించడం ### 🔄 శిక్షణాత్మక తనిఖీ నిర్మాణం అర్థం చేసుకోవడం: మీ HTML నిర్మాణాన్ని ఒక నిమిషం సమీక్షించండి: - ✅ మీ లేఅవుట్ లో ప్రధాన కంటైనర్ లను గుర్తించగలరా? - ✅ ప్రతి చిత్రానికి ప్రత్యేక ID ఉండటం ఎందుకు తెలుసా? - ✅ plant-holder divs ఉద్దేశ్యాన్ని మీరు ఎలా వివరిస్తారు? దృశ్య పరీక్ష: మీ HTML ఫైల్ను బ్రౌజర్లో ఓపెన్ చేయండి. మీరు చూడగలిగేది: - ఒక సాధారణ మొక్కల జాబితా - రెండు కాలములలో ఏర్పాటు చేసిన చిత్రాలు - సింపుల్, స్టైల్ చేయబడని లేఅవుట్ గమనిక: ఈ సాధారణ రూపం నేరుగా CSS స్టైలింగ్ వరకు HTML ఎలా కనిపించాలో చూపిస్తుంది! ఈ మార్కప్ తో, మొక్కలు స్క్రీన్ పై కనపడతారు, అయితే అవి ఇంకా అద్భుతంగా కనిపించవు – తదుపరి పాఠంలో CSS అలాగే చేస్తుంది! ఇప్పటి కోసం మీరు ఒక బలమైన HTML పునాది కలిగి ఉన్నారు, ఇది సక్రమంగా విషయాన్ని ఏర్పాటు చేస్తుంది మరియు యాక్సెసిబిలిటీ యొక్క ఉత్తమ పద్ధతులను పాటిస్తుంది. ## యాక్సెసిబిలిటీ కోసం సెమెంటిక్ HTML ఉపయోగించడం సెమెంటిక్ HTML అంటే HTML ఎలిమెంట్లను వాటి అర్థం మరియు ఉద్దేశ్యానికి అనుగుణంగా ఎంచుకోవడం, కేవలం ఆ కంటెంట్ ఎలా కనిపిస్తుందో కాని కాదు. మీరు సెమెంటిక్ మార్కప్ ఉపయోగించినప్పుడు, మీరు మీ విషయం నిర్మాణం మరియు అర్థం పై బ్రౌజర్లు, సెర్చ్ ఇంజిన్లు మరియు సహాయక సాంకేతికతలు (ఉదా: స్క్రీన్ రీడర్స్) కు కమ్యూనికేట్ చేస్తారు. ఈ విధానం మీ వెబ్సైట్లను వికలాంగత కలిగినవారికి మరింత యాక్సెసిబుల్గా చేస్తుంది మరియు సెర్చ్ ఇంజిన్లు మీ కంటెంట్ ను బాగా అర్థం చేసుకోవడానికి సహాయపడుతుంది. ఇది ఆధునిక వెబ్ అభివృద్ధి యొక్క ప్రాథమిక సిద్దాంతం, ఇది అందరికీ మెరుగైన అనుభవాలను సృష్టిస్తుంది. ### సెమెంటిక్ పేజీ శీర్షిక జోడించడం మీ టెరేరియం పేజీకి సరైన హెడింగ్ జత చేయండి. ఈ లైన్ ను మీ ప్రారంభ <body> ట్యాగ్ తర్వాత వెంటనే చొప్పించండి: సెమెంటిక్ మార్కప్ ఎందుకు ముఖ్యం: - స్క్రీన్ రీడర్లు పేజీ నిర్మాణాన్ని నావిగేట్ చేయడంలో, అర్థం చేసుకోవడంలో సహాయపడుతుంది - కంటెంట్ హైరార్కీ స్పష్టంగా ఉండడం ద్వారా సెర్చ్ ఇంజిన్ ఆప్టిమైజేషన్ (SEO) మెరుగుపడుతుంది - దృష్టి లోపం లేదా మానసిక తేడాలు ఉన్న వినియోగదారుల యాక్సెసిబిలిటీ పెరుగుతుంది - అన్ని డివైసులు మరియు ప్లాట్ఫారమ్లపై మెరుగైన వినియోగదారుల అనుభవాలను సృష్టిస్తుంది - ప్రొఫెషనల్ డెవలప్మెంట్ కోసం వెబ్ ప్రమాణాలు మరియు ఉత్తమ పద్ధతులను అనుసరిస్తుంది సెమెంటిక్ మరియు అసెమెంటిక్ ఎంపికల ఉదాహరణలు: ## టెరేరియం కంటైనర్ సృష్టించడం ఇప్పుడు టెరేరియం యొక్క HTML నిర్మాణాన్ని జోడించండి – మొక్కలు చివరికి ఉంచగల ప్లాస్టిక్ గ్లాస్ కంటైనర్. ఈ విభాగం ఒక ముఖ్యమైన భావనని చూపిస్తుంది: HTML నిర్మాణం అందిస్తుంది, కానీ CSS స్టైలింగ్ లేకుండా, ఈ ఎలిమెంట్లు ఇంకా కనిపించవు. టెరేరియం మార్కప్ లో అందుబాటులో ఉండే క్లాస్ పేర్లు తదుపరి పాఠంలో CSS స్టైలింగ్ చాలా సులభతరం మరియు నిర్వహించదగినవి చేస్తాయి. ### టాస్క్: టెరేరియం నిర్మాణం చేర్చండి ఈ మార్కప్ ను చివరి </div> ట్యాగు ముందు (పేజీ కంటైనర్ మూసే ట్యాగు ముందు) చొప్పించండి: ఈ టెరేరియం నిర్మాణం అర్థం చేసుకోవడం: - స్టైలింగ్ కోసం ప్రత్యేక IDతో ప్రధాన టెరేరియం కంటైనర్ సృష్టిస్తుంది - ప్రతీ విజువల్ భాగానికి వేరే వేరే ఎలిమెంట్లను నిర్వచిస్తుంది (ఉపరి భాగం, గోడలు, మన్ను, దిగువ భాగం) - గ్లాసు ప్రతిబింబ ప్రభావాల కోసం నెస్టెడ్ ఎలిమెంట్లను కలిగి ఉంటుంది (గ్లోసీ ఎలిమెంట్లు) - ప్రతి ఎలిమెంటు యొక్క ప్రయోజనాన్ని స్పష్టంగా సూచించే వివరణాత్మక క్లాస్ పేర్లను ఉపయోగిస్తుంది - గ్లాస్ టెర్రారియం రూపాన్ని సృష్టించేందుకు CSS స్టైలింగ్ కోసం నిర్మాణాన్ని సిద్ధం చేస్తుంది ### 🔄 ఉపాధ్యాయుల చెక్-ఇన్ HTML నిర్మాణ నైపుణ్యం: ముందుకు సాగేముందు, మీరు ఈ క్రింది విషయాలను తెలుసుకోండి: - ✅ HTML నిర్మాణం మరియు దృశ్య రూపంలోని తేడాను వివరించగలగాలి - ✅ సాందర్భిక (semantic) మరియు అసాందర్భిక (non-semantic) HTML ఎలిమెంట్లను గుర్తించగలగాలి - ✅ సరైన మార్కప్ యాక్సెసిబిలిటీకి ఎలా ఉపయోగపడుతుందో వివరించగలగాలి - ✅ పూర్తి డాక్యుమెంట్ ట్రీ నిర్మాణాన్ని గుర్తించగలగాలి మీ అర్థం ట్రై చేయండి: మీ HTML ఫైల్ను జావాస్క్రిప్ట్ డిసేబుల్ చేసి మరియు CSS తీసేసి బ్రౌజర్లో తెరవండి. ఇది మీరు సృష్టించిన ఖచ్చితమైన సాందర్భిక నిర్మాణాన్ని చూపిస్తుంది! --- ## GitHub Copilot ఏజెంట్ ఛాలెంజ్ Agent మోడ్ ఉపయోగించి క్రింది ఛాలెంజ్ను పూర్తి చేయండి: వివరణ: టెర్రారియం ప్రాజెక్టుకు చేర్చగల ఒక మొక్కల సంరక్షణ మార్గదర్శక భాగం కోసం సాందర్భిక HTML నిర్మాణాన్ని సృష్టించండి. ప్రాంప్ట్: "Plant Care Guide" అనే ప్రధాన శీర్షికతో ఒక సెక్షన్ సృష్టించండి, దాని కింద "Watering", "Light Requirements", మరియు "Soil Care" అనే మూడు ఉపసెక్ట్లతో పాటు ప్రతి ఉపశీర్షికకి సంబంధించిన మొక్కల సంరక్షణ సమాచారంతో కూడిన పేరాగ్రాఫ్లు ఉండాలి. సరైన సాందర్భిక HTML ట్యాగ్స్ <section>, <h2>, <h3>, మరియు <p> ఉపయోగించి కంటెంట్ను సక్రమంగా నిర్మించండి. ఇక్కడ agent mode గురించి మరింత తెలుసుకోండి. ## HTML చరిత్రను అన్వేషించే ఛాలెంజ్ వెబ్ అభివృద్ధి గురించిన అభ్యాసం HTML 1990లో టిమ్ బర్నర్స్-్లీ CERNలో మొదటి వెబ్ బ్రౌజర్ సృష్టించినప్పటి నుండి గణనీయంగా అభివ్రుద్ధి చెందింది. కొన్ని పాత ట్యాగ్స్ వంటి <marquee> ప్రస్తుతం నిషేధించబడ్డాయి ఎందుకంటే అవి ఆధునిక యాక్సెసిబిలిటీ ప్రమాణాలు మరియు రెస్పాన్సివ్ డిజైన్ సూత్రాలతో సరిపడవు. ఈ ప్రయోగాన్ని నిర్వహించండి: 1. తాత్కాలికంగా మీ <h1> శీర్షికను <marquee> ట్యాగ్లో చుట్టండి: <marquee><h1>My Terrarium</h1></marquee> 2. మీ పేజీని బ్రౌజర్లో తెరచి స్క్రోల్లింగ్ ప్రభావాన్ని పరిశీలించండి 3. ఈ ట్యాగ్ ఎందుకు నిషేధించబడిందో ఆలోచించండి (సూచన: వినియోగదారుల అనుభవం మరియు యాక్సెసిబిలిటీపై దృష్టి పెడతుంది) 4. <marquee> ట్యాగ్ తీసివేసి సాందర్భిక మార్కప్కు తిరిగి రావాలి పరిశీలించవలసిన ప్రశ్నలు: - స్క్రోలింగ్ శీర్షిక దృష్టి లోపం ఉన్నవారు లేదా గమనిక స్పందనకు ఆందోళన ఉన్న వినియోగదారులపై ఎలా ప్రభావం చూపుతుంది? - ఆమోదయోగ్యమైన దృష్టితో ఏ ఆధునిక CSS సాంకేతికతలు ఇలాంటి దృశ్య ప్రభావాలను సాధించగలవు? - ప్రస్తుత వెబ్ ప్రమాణాలను ఉపయోగించడం ఏ కారణంగా అవసరం, ఎందుకంటే నిషేదించిన ఎలిమెంట్లను ఉపయోగించకూడదా? నిషేధించిన మరియు పాతతరగతి HTML ఎలిమెంట్ల గురించి మరింత తెలుసుకోండి, అవి ఎలా వెబ్ ప్రమాణాలను మెరుగుపరుస్తాయి. ## పోస్ట్-లెక్చర్ క్విజ్ Post-lecture quiz ## సమీక్ష & స్వయంగా అధ్యయనం మీ HTML జ్ఞానాన్ని లోతుగా చేసుకోండి HTML వెబ్ స్థాపనకు 30 ఏళ్ల పైనుగా మూలస్తంభమైనది, ఒక సరళమైన డాక్యుమెంట్ మార్కప్ భాష నుండి సంక్లిష్ట అనువర్తనాల వేదికగా అభివృద్ది చెందినది. ఈ అభివృద్ది తెలుసుకోవడం ఆధునిక వెబ్ ప్రమాణాలు అర్థం చేసుకోవడానికి మరియు మెరుగైన అభివృద్ధి నిర్ణయాలు తీసుకోవడానికి సహాయపడుతుంది. ధారిత అభ్యాస మార్గాలు: 1. HTML చరిత్ర మరియు అభివృద్ది - HTML 1.0 నుండి HTML5 వరకు టైమ్లైన్ పరిశోధించండి - కొన్ని ట్యాగ్లు ఎందుకు నిషేధించబడ్డాయో తెలుసుకోండి (యాక్సెసిబిలిటీ, మొబైల్ అనుకూలత, నిర్వహణ) - రావాల్సిన HTML లక్షణాలు మరియు ప్రతిపాదనలు తెలుసుకోండి 2. సాందర్భిక HTML లోతైన అధ్యయనం - HTML5 సాందర్భిక ఎలిమెంట్ల పూర్తి జాబితాను అధ్యయనం చేయండి - ఎప్పుడు <article>, <section>, <aside>, మరియు <main> ఉపయోగించాలో సాధన చేయండి - మెరుగైన యాక్సెసిబిలిటీ కోసం ARIA గుణల గురించి నేర్చుకోండి 3. ఆధునిక వెబ్ అభివృద్ధి - Microsoft Learn లో రెస్పాన్సివ్ వెబ్సైట్ల నిర్మాణం గురించి తెలుసుకోండి - HTML ఎలా CSS మరియు జావాస్క్రిప్ట్తో కలిసిఉంది అనేదాన్ని అర్థం చేసుకోండి - వెబ్ పనితనం మరియు SEO ఉత్తమ ప్రాక్టీసులు తెలుసుకోండి పరిశీలన ప్రశ్నలు: - మీరు ఏ పాతతరగతి HTML ట్యాగ్లు కనుగొన్నారు, అవి ఎందుకు తొలగించబడ్డాయి? - భవిష్యత్ వెర్షన్లకు కొత్త HTML లక్షణాలు ఏమేమి ప్రతిపాదిస్తున్నారు? - సాందర్భిక HTML వెబ్ యాక్సెసిబిలిటీ మరియు SEOకు ఎలా సహాయపడుతుంది? ### ⚡ తరువాతి 5 నిమిషాల్లో మీరు చేయగలరు - [ ] DevTools (F12) తెరిచి మీ ఇష్టమైన వెబ్సైట్ యొక్క HTML నిర్మాణాన్ని పరిశీలించండి - [ ] <h1>, <p>, మరియు <img> వంటి ప్రాథమిక ట్యాగ్లతో సులభమైన HTML ఫైల్ సృష్టించండి - [ ] W3C HTML వాలిడేటర్ ఆన్లైన్ ద్వారా మీ HTML ని ధృవీకరించండి - [ ] మీ HTMLకి <!-- comment --> ఉపయోగించి వ్యాఖ్యలు జోడించండి ### 🎯 ఈ గంటలో మీరు సాధించగలిగేది - [ ] పోస్ట్-లెసన్ క్విజ్ పూర్తి చేసి సాందర్భిక HTML భావనలను పునరावलोकన చేయండి - [ ] సరైన HTML నిర్మాణంతో మీ గురించి సరళమైన వెబ్పేజీని రూపొందించండి - [ ] వివిధ హెడింగ్ స్థాయిలు మరియు టెక్స్ట్ ఫార్మాటింగ్ ట్యాగ్లతో ప్రయోగం చేయండి - [ ] మల్టీమీడియా ఇంటిగ్రేషన్ కోసం చిత్రాలు మరియు లింకులను జోడించండి - [ ] మీరు ఇప్పటివరకు ప్రయత్నించని HTML5 లక్షణాలపై పరిశోధన చేయండి ### 📅 మీ వారాంతపు HTML ప్రయాణం - [ ] సాందర్భిక మార్కప్తో టెర్రారియం ప్రాజెక్ట్ అసైన్మెంట్ పూర్తి చేయండి - [ ] ARIA లేబుల్స్ మరియు పాత్రలతో యాక్సెసిబుల్ వెబ్పేజీ సృష్టించండి - [ ] వివిధ ఇన్పుట్ టైప్లతో ఫారమ్ సృష్టి అభ్యాసం చేయండి - [ ] localStorage లేదా geolocation వంటి HTML5 APIs అన్వేషించండి - [ ] రెస్పాన్సివ్ HTML నమూనాలు మరియు మొబైల్-ఫస్ట్ డిజైన్ అధ్యయనం చేయండి - [ ] ఇతర డెవలపర్ల HTML కోడ్ పునః సమీక్షించండి ఉత్తమ అభ్యాసాల కోసం ### 🌟 మీ నెలల తరంపాటు వెబ్ ఫౌండేషన్ - [ ] మీ HTML నైపుణ్యాలను ప్రదర్శించే పోర్ట్ఫోలియో వెబ్సైట్ నిర్మించండి - [ ] Handlebars వంటి ఫ్రేమ్వర్క్తో HTML టెంప్లేటింగ్ నేర్చుకోండి - [ ] HTML డాక్యుమెంటేషన్ మెరుగుపరచడంలో ఓపెన్ సోర్స్ ప్రాజెక్టులకు కాంట్రిబ్యూట్ చేయండి - [ ] కస్టమ్ ఎలిమెంట్స్ వంటి అధునాతన HTML భావనలను మాస్టరు చేయండి - [ ] HTMLని CSS ఫ్రేమ్వర్క్స్ మరియు జావాస్క్రిప్ట్ లైబ్రరీలతో సమన్వయంచేయండి - [ ] HTML పునాది నేర్చుకుంటున్న ఇతరులకు మార్గదర్శకత్వం ఇవ్వండి ## 🎯 మీ HTML నైపుణ్యాల కాలపరిమితి ### 🛠️ మీ HTML టూల్కిట్ సారాంశం ఈ పాఠం పూర్తిచేసిన తర్వాత, మీ వద్ద ఉంది: - డాక్యుమెంట్ నిర్మాణం: సరైన DOCTYPEతో పూర్తి HTML5 ఫౌండేషన్ - సాందర్భిక మార్కప్: యాక్సిసిబిలిటీ మరియు SEOను మెరుగుపరచే అర్థవంతమైన ట్యాగ్లు - చిత్ర ఇంటిగ్రేషన్: సరైన ఫైల్ కంట్రోల్ మరియు alt టెక్స్ట్ విధానం - లేఅవుట్ కంటైనర్లు: వివరణాత్మక క్లాస్ పేర్లతో సూచించే div ఉపయోగం - యాక్సెసిబిలిటీ అవగాహన: స్క్రీన్ రీడర్ నావిగేషన్ అర్థం చేసుకోవడం - ఆధునిక ప్రమాణాలు: ప్రస్తుత HTML5 ఆచారాలు మరియు పాతతరగతి ట్యాగ్ల జ్ఞానం - ప్రాజెక్ట్ ఫౌండేషన్: CSS స్టైలింగ్ మరియు జావాస్క్రిప్ట్ ఇంటరాక్టివిటీ కోసం దృఢమైన ఆధారం తరువాతి అడుగులు: మీ HTML నిర్మాణం CSS స్టైలింగ్ కోసం సిద్ధంగా ఉంది! మీరు సృష్టించిన సాందర్భిక ఫౌండేషన్ తర్వాతి పాఠాన్ని చాలా సులభంగా అర్థం చేసుకోవడానికి సహాయపడుతుంది. --- ## అసైన్మెంట్ Practice your HTML: Build a blog mockup --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> అస్పష్టత: ఈ పత్రాన్ని AI అనువాద సేవ Co-op Translator సహాయంతో అనువదించబడింది. మేము నిజసంబంధత కోసం ప్రయత్నిస్తామని గమనించండి, అయితే ఆటోమెటిక్ అనువాదాలలో దోషాలు లేదా అసత్యతలు ఉండవచ్చు. స్థానిక భాషలో ఉన్న అసలు పత్రం అధికారిక మూలంగా పరిగణించాలి. కీలకమైన సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదం సిఫార్సుచేయబడుతుంది. ఈ అనువాదం వాడుక వల్ల కలిగే ఏ ధోకా లేదా తప్పుగా అర్థం చేసుకున్న పరిస్థితులకి మేము బాధ్యులం కాదు. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Project భాగం 2: CSS పరిచయం
మీ HTML టెర్రేరియం ఎంత సాధారణంగా కనిపించిందో గుర్తుందా? CSS ఆ సరళమైన నిర్మాణాన్ని దృశ్యంగా ఆకర్షణీయంగా మార్చే స్థానం. HTML ఒక ఇంటి బేస్ నిర్మాణం లాగా ఉంటే, CSS అన్ని రంగులు, ఫర్నిచర్ క్రమం, లైటింగ్, గదులు ఎలా పరస్పరం కలుసుకుంటాయో అన్నింటిని నియంత్రిస్తుంది. వర్సైల్ ప్యాలెస్ ఎలా ఒక సాధారణ హంటింగ్ లాడ్జ్ నుండి ప్రపంచంలో అత్యద్భుతమైన భవనాల్లో ఒకటిగాను మారిందో ఆలోచించండి. ఈ రోజు, మీ టెర్రేరియాన్ని సాధారణం నుండి మెరుగ్గా మార్చుదాం. మీరు ఎలిమెంట్స్ ని ఖచ్చితంగా ఎలా అమర్చాలో, వివిధ స్క్రీన్ సైజులకు అనుగుణంగా లేఅవుట్లు ఎలా రెస్పాన్స్ వుంటాయో, మరియు వెబ్సైట్లను ఆకర్షణీయంగా చేసే దృశ్య ఆకర్షణను ఎలా సృష్టించాలో నేర్చుకుంటారు. ఈ పాఠ్యం చివరికి, కసరత్తుపరమైన CSS స్టైలింగ్ ఎలా మీ ప్రాజెక్ట్ను గణనీయంగా మెరుగు పరిచే తెలుసుకుంటారు. మీ టెర్రేరియానికి శైలి జోడిద్దాం. ## పాఠ్యం ముందు క్విజ్ పాఠ్యం ముందు క్విజ్ ## CSS ప్రారంభం CSS ను కేవలం "అందంగా చేయడం" మాత్రమే అనుకొని ఉంటారు, కాని ఇది చాలా విస్తృత ప్రయోజనం కలిగి ఉంటుంది. CSS ఒక సినిమా డైరెక్టర్ లాంటిదేగాదు - మీరు కేవలం దృశ్యాన్ని మాత్రమే కాకుండా, చలనం, పరస్పరం చర్యలకు స్పందించడం, వివిధ పరిస్థితులలో ఎలా మారాలి అనేది నియంత్రిస్తారు. ఆధునిక CSS అసాధారణంగా సామర్థ్యవంతంగా ఉంటుంది. మీరు ఫోన్లు, టాబ్లెట్లు, డెస్క్టాప్ కంప్యూటర్ల కోసం ఆటోమేటిక్ లేఅవుట్ అనుకూలతలు కలిగిన కోడ్ వ్రాయవచ్చు. ఉజ్వలమైన యానిమేషన్లు సృష్టించి, వినియోగదారుల దృష్టిని కావలసిన చోటికి మళ్లించవచ్చు. ఈ మార్పులు ఒకే సమయంలో పనిచేస్తే ఫలితాలు అద్భుతంగా ఉంటాయి. ఈ పాఠ్యంలో మనం సాధించబోయేది: - మీ టెర్రేరియానికి ఆధునిక CSS సాంకేతికతలతో పూర్తి దృశ్య డిజైన్ సృష్టిస్తుంది - మూల సూత్రాలు గుర్తించడం - కస్కేడ్, వారసత్వం, మరియు CSS సెలెక్టర్లను అన్వేషిస్తుంది - ప్రతిస్పందించే స్థానమన్ను మరియు లేఅవుట్ వ్యూహాలను అమలు చేస్తుంది - CSS ఆకారాలు మరియు శైలులతో టెర్రేరియం కన్టైనర్ను నిర్మిస్తుంది ### ముందస్తు అవసరం గత పాఠ్యం నుండీ మీ టెర్రేరియం HTML నిర్మాణాన్ని పూర్తి చేసి ఉంటుంది మరియు స్టైల్ చేయడానికి సిద్ధంగా ఉండాలి. ### మీ CSS ఫైల్ సెట్టప్ చేయడం స్టైలింగ్ ప్రారంభించే ముందు, CSS ని HTML తో కनेक్ట్ చేస్తాం. ఈ క్రమం బ్రౌజర్కి మీ టెర్రేరియం కోసం స్టైలింగ్ సూచనలను ఎక్కడ చోటు చేసుకోవాలో చెబుతుంది. మీ టెర్రేరియం ఫోల్డర్ లో style.css అనే కొత్త ఫైల్ సృష్టించి, దానిని మీ HTML డాక్యూమెంట్ <head> సెక్షన్ లో లింక్ చేయండి: ఈ కోడ్ ఏమి చేస్తుంది: - మీ HTML మరియు CSS ఫైళ్ల మధ్య కనెక్షన్ సృష్టిస్తుంది - బ్రౌజర్కు style.css లోని స్టైల్ను లోడ్ చేసి వర్తింప చేయమని చెప్పుతుంది - ఈ ఫైల్ CSS ఫైల్ అయిందని సూచించడానికి rel="stylesheet" అనే ఎట్రిబ్యూట్ వాడుతుంది - ఫైల్ పాత్ సూచించడానికి href="./style.css" వాడుతుంది ## CSS కస్కేడ్ అర్థం చేసుకోవడం ఎప్పుడైనా CSS కి "Cascading" कहते ఎందుకు అనుకుంటున్నారా? స్టైల్స్ జలపాతంలా కిందకి వచ్చేలా ఉంటాయి, కొన్నిసార్లు అవి పరస్పరం పరోక్షమై పోతాయి. సైనిక కమాండ్ వ్యవస్థాలలా ఆలోచించండి - జనరల్ ఆదేశం "అన్ని సైనికులు ఆకుపచ్చ దుస్తులు ధరించాలి" అని ఉండొచ్చు, కాని మీ యూనిట్ కోసం ప్రత్యేక ఆదేశం "పండుగ కోసం బ్లూ డ్రెస్ ధరించాలి" అని ఉండవచ్చు. ప్రత్యేక ఆదేశం గెలుస్తుంది. CSS కూడా తేడాగా ఇదే విధానం అనుసరిస్తుంది, మరియు ఈ అర్చనను అర్థం చేసుకోవడం డీబగ్గింగ్ ను సులభం చేస్తుంది. ### కస్కేడ్ ప్రాధాన్యతతో ప్రయోగం కస్కేడ్ ఎలా పని చేస్తుందో చూసేందుకు, స్టైల్ ఘర్షణను సృష్టిద్దాం. ముందుగా మీ <h1> ట్యాగ్ లో ఇన్లైన్ స్టైల్ జోడించండి: ఈ కోడ్ ఏమి చేస్తుంది: - ఇన్లైన్ స్టైలింగ్ ఉపయోగించి <h1> ఎలిమెంట్ కు నేరుగా ఎరుపు రంగును వర్తింపజేస్తుంది - CSS ను HTMLలో నేరుగా బిగిలుపు చేయడానికి style ఎట్రిబ్యూట్ వాడుతుంది - ఈ ప్రత్యేక ఎలిమెంట్ కొరకు అత్యధిక ప్రాధాన్యత కలిగిన స్టైల్ నియమాన్ని సృష్టిస్తుంది తదుపరి, ఈ నియమాన్ని style.css ఫైల్ లో జోడించండి: పై ఉదాహరణలో మనం: - అన్ని <h1> ఎలిమెంట్లకు టార్గెట్ చేసే CSS నియమాన్ని నిర్వచించాము - బ్లూ రంగును టెక్స్ట్ కు అనుసంధానిక స్టైల్షీట్ ఉపయోగించి సెట్ చేసాము - ఇన్లైన్ స్టైల్ కంటే తక్కువ ప్రాధాన్యత కలిగి ఉన్న నియమాన్ని సృష్టించాము ✅ జ్ఞాన పరీక్ష: మీ వెబ్ యాప్ లో ఏ రంగు ప్రదర్శింపబడుతుంది? ఆ రంగు ఎందుకు గెలుస్తుంది? మీరు ఎప్పుడైనా స్టైల్ లను ఓవర్రైడ్ చేయాల్సిన సందర్భాలను ఊహించగలరా? ## CSS వారసత్వం (Inheritance) అమలు CSS వారసత్వం జన్యువుల్లాగా పనిచేస్తుంది - ఎలిమెంట్లు వారి తల్లిదండ్రుల ఎలిమెంట్ల నుండి కొన్ని లక్షణాలను వారసత్వం స్వరూపం తీసుకుంటాయి. మీరు బాడీ ఎలిమెంట్ పై ఫాంట్ ఫ్యామిలీ సెట్ చేస్తే, అంతర్గత అన్ని టెక్స్ట్లు ఆ ఫాంట్ను ఆటోమేటిక్ గా వాడతాయి. ఇది హాబ్స్బర్గ్ కుటుంబం యొక్క ప్రత్యేక జాగ్లైన్ తరాల తరాలుగా కనిపించే విధానంలాగా ఉంటుంది. కానీ, అన్నీ వారసత్వం కావు. ఫాంట్లు, రంగులు వంటి టెక్స్ట్ స్టైల్స్ వారసత్వం కలిగినవి, కానీ మార్జిన్లు, బార్డర్లు వంటి లేఅవుట్ లక్షణాలు లేకుంటాయి. పిల్లలు తల్లిదండ్రుల శారీరక లక్షణాలు కాకపోయినా వారి ఫ్యాషన్ ఎంపికలు వారసత్వంగా తీసుకోరు లాంటిదే. ### ఫాంట్ వారసత్వాన్ని పరిశీలించడం <body> ఎలిమెంట్ పై ఫాంట్ ఫ్యామిలీ సెట్ చేసి వారసత్వాన్ని చూడండి: ఇక్కడ ఏమి జరుగుతుంది: - పూర్తి పేజీ కోసం <body> ఎలిమెంట్ని టార్గెట్ చేసి ఫాంట్ ఫ్యామిలీ సెట్ చేస్తుంది - బ్రౌజర్ అనుకూలత కోసం ఫాంట్ స్టాక్ లో fallback ఆప్షన్లు ఉంటాయి - విభిన్న ఆపరేటింగ్ సిస్టమ్స్ లో బాగుంటున్న ఆధునిక సిస్టమ్ ఫాంట్లు వాడుతుంది - ప్రత్యేకంగా ఓవర్రైడ్ చేయకపోతే అన్ని చైల్డ్ ఎలిమెంట్లు ఈ ఫాంట్ వాడతాయి మీ బ్రౌజర్ డెవలపర్ టూల్స్ (F12) తెరవండి, Elements ట్యాబ్ కు వెళ్లి <h1> ఎలిమెంట్ ని ఇన్స్పెక్ట్ చేయండి. అది బాడీ నుండి ఫాంట్ ఫ్యామిలీని వారసత్వంగా పొందుతుందని చూడొచ్చు: ✅ ప్రయోగ సమయం: మీ <body> లో మరో వారసత్వ లక్షణాలను సెట్ చేయండి, ఉదాహరణకు color, line-height, లేదా text-align. మీ హెడ్డింగ్ మరియు ఇతర ఎలిమెంట్లకు ఏమి జరుగుతుందో గమనించండి. ### 🔄 పాఠ్య నిర్వహణ తనిఖీ CSS ఫౌండేషన్ అర్థం పొందడం: సెలెక్టర్లకు వెళ్లక ముందు మీరు: - ✅ కస్కేడ్ మరియు వారసత్వం మధ్య తేడాను వివరించగలరు - ✅ స్పెసిఫిసిటీ ఘర్షణలో ఏ స్టైల్ గెలుస్తుందో ఊహించగలరు - ✅ Eltern నుండి ఏ లక్షణాలు వారసత్వం అవుతాయో గుర్తించగలరు - ✅ CSS ఫైల్స్ ను HTML కు సరిగా కనెక్ట్ చేయగలరు త్వరిత పరీక్ష: ఈ స్టైల్లు ఉంటే, <div class="special"> లో ఉన్న <h1> రంగు ఏమిటి? జవాబు: ఎరుపు (ఎలిమెంట్ సెలెక్టర్ నేరుగా h1ని టార్గెట్ చేస్తుంది) ## CSS సెలెక్టర్ల మాస్టరీ CSS సెలెక్టర్లు మీరు స్టైల్ చేయడానికి ప్రత్యేక ఎలిమెంట్లను టార్గెట్ చేసే మార్గం. అవి ఖచ్చిత స్థలాలు సూచించే విధంగా ఉంటాయి - "ఇంటి" అనటం కంటే మీరు "మేపుల్ వీధిలో ఎరుపు తలుపు ఉన్న నీలం ఇల్లు" అంటారు. CSS వివిధ విధాలుగా స్పష్టత ఇస్తుంది, సరైన సెలెక్టర్ ఎంచుకోవడం పనికి సరిపోయే సాధనాన్ని ఎంచుకోవడం లాంటిది. మీరు పక్కనున్న ప్రతి తలుపును స్టైల్ చేయాలంటే లేదా ఒక్క తలుపు మాత్రమే స్టైల్ చేయాలంటే తరచూ ప్రత్యేకట్టиспేసుకోవాలి. ### ఎలిమెంట్ సెలెక్టర్లు (ట్యాగ్లు) ఎలిమెంట్ సెలెక్టర్లు HTML ఎలిమెంట్లను తూటా పేరుతో టార్గెట్ చేస్తాయి. ఇవి మీ పేజీ మొత్తంలో ప్రాథమిక స్టైల్స్ అందుబాటులో ఉంచడానికి ఉపయోగపడతాయి: ఈ స్టైల్లు ఎలా పని చేస్తాయో అర్థం చేసుకోవడం: - body సెలెక్టర్ తో పూర్తి పేజీకి స్థిరమైన టైపోగ్రఫీ సెట్ చేస్తుంది - డిఫాల్ట్ బ్రౌజర్ మార్జిన్లు మరియు ప్యాడింగ్ తొలగిస్తూ నియంత్రణ మెరుగుపడుతుంది - అన్ని హెడ్డింగ్ ఎలిమెంట్లకు రంగు, సమీకరణ, అంతరాలు ఇస్తుంది - rem యూనిట్ లను వాడి స్కేలబుల్, యాక్సెసిబుల్ ఫాంట్ సైజింగ్ చేస్తుంది అయితే, ఎలిమెంట్ సెలెక్టర్లు సాధారణ స్టైలింగ్కు మెరుగైనవి కాని మీ టెర్రేరియంలో ఉన్న మొక్కల వంటి ప్రత్యేక భాగాలను మరింత స్పష్టమైన సెలెక్టర్లతో స్టైల్ చేయాలి. ### ప్రత్యేక ఎలిమెంట్ల కొరకు ID సెలెక్టర్లు ID సెలెక్టర్లు # చిహ్నంతో ఉంటాయి మరియు ప్రత్యేక id ఉన్న ఎలిమెంట్లను టార్గెట్ చేస్తాయి. ఒక పేజీలో IDs ప్రత్యేకమైనవని, కాబట్టి మన టెర్రేరియంలో ఎడమ మరియు కుడి మొక్కల కంటైనర్ల వంటి ప్రత్యేక ఎలిమెంట్లను స్టైల్ చేయడానికి ఇవి అనుకూలం. మొక్కలు ఉన్న సైడ్ కంటైనర్ల స్టైల్ ను రూపొందిద్దాం: ఈ కోడ్ చేయేమి: - కంటైనర్లు స్క్రీన్ వైపులా అతి ఎడమ మరియు కుడివైపు పెట్టడానికి absolute స్థానమన్ను వాడుతుంది - స్క్రీన్ సైజుకు అనుగుణంగా ఉండే ఎత్తు కొరకు vh యూనిట్లను ఉపయోగిస్తుంది - ప్యాడింగ్ మొత్తం వెడల్పులో చేరిస్తుంది కోసం box-sizing: border-box ని ప్రయోగిస్తుంది - సున్నా విలువల వద్ద px యూనిట్లు తొలగించి శుభ్రంగా కోడ్ చేస్తుంది - తీవ్ర గ్రే కంటే కాస్త స్వేదనీయమైన బ్యాక్గ్రౌండ్ రంగు సెట్ చేస్తుంది ✅ కోడ్ నాణ్యత సవాలు: ఈ CSS DRY (Don't Repeat Yourself) సూత్రాన్ని ఉల్లంఘిస్తోంది. మీరు ID మరియు క్లాస్ రెండింటిని ఉపయోగించి దీనిని ఎలా రీఫాక్టర్ చేయగలరు? ఇంకాచేయవలసింది: ### పునర్వినియోగ స్టైల్స్ కోసం క్లాస్ సెలెక్టర్లు క్లాస్ సెలెక్టర్లు . చిహ్నంతో ఉంటాయి మరియు మీకు అదే స్టైల్స్ మల్టిపుల్ ఎలిమెంట్లకు వర్తింపజేయాలనిపిస్తే ఇవి అనుకూలంగా ఉంటాయి. ID లకు భిన్నంగా, క్లాసులు HTML అంతటా పునర్వినియోగం చేయవచ్చు, కాబట్టి పాఠాంతరాల్లో కాంసిస్టెంట్ స్టైలింగ్ కోసం ఇవి చాలా ఉపయోగకరంగా ఉంటాయి. మన టెర్రేరియంలో ప్రతీ మొక్కకు ఒకటే విధమైన స్టైల్ ఉండాలి మరి సూక్ష్మస్థాయిలో స్థానమన్ను కూడా ఉండాలి. అందుకే పంచుకోబడిన స్టైల్ కోసం క్లాసులు, ప్రత్యేక స్థానానికి IDs రెండూ వాడతాము. ప్రతీ మొక్కకు HTML నిర్మాణం: ప్రధాన అంశాలు: - అన్ని మొక్కల కోసం సుసंगత కంటైనర్ స్టైలింగ్ కోసం class="plant-holder" ఇస్తుంది - ఆకారం మరియు ప్రవర్తనల కోసం class="plant" ఉపయోగిస్తుంది - ప్రత్యేక స్థానమున్నది మరియు జావాస్క్రిప్ట్ ఇంటరాక్షన్ కొరకు ప్రత్యేక id="plant1" ఉంచుతుంది - స్క్రీన్ రీడర్ కోసం వివరణాత్మక ఆల్ట్ టెక్స్ట్ అందిస్తుంది ఇప్పుడు అందరి style.css ఫైల్ కు ఈ స్టైల్స్ జోడించండి: ఈ స్టైల్స్ లో ఏమి జరుగుతుంది: - ప్లాంట్ హోల్డర్ కు రిలేటివ్ స్థానమన్ను ఇస్తుంది, ఇది ఒక స్థితి నియంత్రణ పరిమితం సృష్టిస్తుంది - ప్రతి ప్లాంట్ హోల్డర్ కు 13% ఎత్తు ఇస్తుంది, ప్లాంట్లు చూపించు విదంగా స్క్రోల్ అవసరం లేకుండా కుదుతుంది - హోల్డర్స్ సన్నగా ఎడమకు తక్కువ, మొక్కలు కంటైనర్లు మధ్యలో సెంటర్ కావడానికి మారుస్తుంది - మాక్స్ విత్ మరియు హైట్ ప్రాపర్టీస్ తో మొక్కలను రెస్పాన్సివ్ స్కేలు చేయగలుగుతుంది - z-index ఉపయోగించి మొక్కలను ఇతర సంపూర్ణ ఎలిమెంట్ల కంటే మీదికి తెస్తుంది - CSS ట్రాన్సిషన్లతో సన్నని హోవర్ ఎఫెక్ట్ ఇవ్వడం కస్టమర్ ఇంటరాక్షన్ మెరుగుపరుస్తుంది ✅ ముఖ్య ఆలోచన: .plant-holder మరియు .plant రెండింటికి ఎందుకు అవసరం? ఒకదానితో మాత్రమే ప్రయత్నిస్తే ఏమవుతుంది? ## CSS స్థానమన్ను అర్థం చేసుకోవడం CSS స్థానమన్ను ఒక నాటకాన్ని అడ్రస్ చేసే డైరెక్టర్ లాంటిది - మీరు ఆ నటుడు ఎక్కడ ఎప్పుడు ఉన్నాడో, ఎలా కదిలాడో ఆదేశిస్తారు. కొంత నటులు సాధారణ స్వభావంగా ఉంటారు, మరికొందరు ప్రత్యేక స్థానంలో ఉండాలి. స్థానమన్ను అర్థం చేసుకున్న తర్వాత అనేక లేఅవుట్ సవాళ్లు పరిష్కారమవుతాయి. స్క్రోల్ చేసే సమయంలో కూడా కనబడే నావిగేషన్ బార్ కావాలి? స్థానమన్ను హ్యాండిల్ చేస్తుంది. ఒక నిర్దిష్ట స్థలంలో కనిపించే టూల్టిప్ కావాలి? అదే స్థానమన్ను. ### ఐదు స్థానమన్ను విలువలు ### మన టెర్రేరియంలో స్థానమన్ను మన టెర్రేరియం కింది స్థానమన్నులు సహా వ్యూహాన్ని ఉపయోగిస్తుంది: స్థానమన్ను వ్యూహం అర్థం చేసుకోవడం: - Absolute కంటైనర్లు సాధారణ డాక్యూమెంట్ ప్రవాహం నుండి తొలగించి స్క్రీన్ త్రుటిలో అమర్చబడి ఉంటాయి - Relative ప్లాంట్ హోల్డర్లు ఒక స్థాన నియంత్రణ పరిసరాన్ని సృష్టిస్తూ డాక్యూమెంట్ ప్రవాహంలో ఉంటాయి - Absolute మొక్కలు వారి రిలేటివ్ కంటైనర్లలో ఖచ్చితంగా అమర్చబడి ఉంటాయి - ఈ కలయిక ప్లాంట్లను నిలువుగా సవరించాలని మరియు వ్యక్తిగతంగా స్థానమన్ను ఇవ్వటానికి అనుమతిస్తుంది ✅ ప్రయోగ సమయం: స్థానమన్ను విలువలను మార్చి ఫలితాలు గమనించండి: - .container ను absolute నుండి relative కి మార్చితే ఏమవుతుంది? - .plant-holder relative కాకుండా absolute ఉపయోగిస్తే లేఅవుట్ ఎలా మారుతుంది? - .plantను relative పొజిషనింగ్కు మార్చినప్పుడు ఏమౌతుంది? ### 🔄 అధ్యాపనాత్మక తనిఖీ CSS పొజిషనింగ్ ప్రావీణ్యం: మీ అర్థం చేసుకున్నదాని తనిఖీ చేయండి: - ✅ పుట్టలు డ్రాగ్-అండ్-డ్రాప్ కోసం ఎందుకు absolute పొజిషనింగ్ అవసరమౌతుంది అని చెప్పగలరా? - ✅ relative కంటెయినర్ల ద్వారా పొజిషనింగ్ సందర్భం ఎలా సృష్టించబడుతుంది తెలుసా? - ✅ సైడ్ కంటెయినర్లు ఎందుకు absolute పొజిషనింగ్ ఉపయోగిస్తాయి? - ✅ మీరు పొజిషన్ డిక్లరేషన్లు పూర్తిగా తీసివేస్తే ఏమౌతుంది? ప్రకృతి సంబంధం: CSS పొజిషనింగ్ ఎలా వాస్తవ ప్రపంచ లేఅవుట్ను ప్రతిబింబిస్తుంది అనుకోండి: - Static: తలంపుపై పుస్తకాలు (సహజ క్రమం) - Relative: పుస్తకాన్ని తక్కువగా కదిలించడం కానీ దాని స్థానాన్ని ఉంచడం - Absolute: ఖచ్చితమైన పేజీ నంబరుపై బుక్మార్క్ పెట్టడం - Fixed: మీరు పేజీలు తిప్పుతున్నప్పుడు కనిపించే స్టికి నోట్ ## CSSతో టెర్రారియాన్ని నిర్మించడం ఇప్పుడు మీరొక్క గాజు జార్ను సింపుల్ CSS ఉపయోగించి నిర్మిస్తాము - ఇమేజులు లేదా గ్రాఫిక్స్ సాఫ్ట్వేర్ అవసరం లేదు. పొజిషనింగ్ మరియు పారదర్శకం ఉపయోగించి వాస్తవికమైన గాజు, నీడలు మరియు లోతు ప్రభావాలు సృష్టించడం CSS యొక్క దర్శన సామర్థ్యాలను ప్రదర్శిస్తుంది. బౌహౌస్ ఉద్యమంలోని నిపుణులు ఎలా సులభమైన జ్యామితీయ ఆకారాలతో క్లిష్టమైన, అందమైన నిర్మాణాలు సృష్టించారో ఈ టెక్నిక్ అంతాగే ఉంటుంది. మీరు ఈ సూత్రాలను అర్థం చేసుకున్నాక చాలా వెబ్ డిజైన్ల వెనుక CSS టెక్నిక్లు గుర్తుపెట్టుకుంటారు. ### గాజు జార్ భాగాలను సృష్టించడం ఒక్కో భాగం ప్రాతిపదికన టెర్రారియం జార్ నిర్మించుకుందాం. ప్రతి భాగం absolute పొజిషనింగ్ మరియు శాతానుపాత ఆధారిత సైజింగ్ ఉపయోగించి స్పందనాత్మక డిజైన్ కోసం రూపొందించబడింది: టెర్రారియం నిర్మాణాన్ని అర్థం చేసుకోవడం: - అన్ని స్క్రీన్ సైజులకు అనుగుణంగా శాతానుపాతాల పరిమాణాలు ఉపయోగించడం - ఖచ్చితంగా నిలిపి, సరిపోల్చుటకు ఎలిమెంట్లను absolute గా పొజిషన్ చేయడం - గాజు పారదర్శకత ప్రభావం సృష్టించడానికి వున్న వేరే వేరే అపాసిటీ విలువలను వర్తించడం - ప్లాంట్లు జార్ లోపల కనిపించేందుకు z-index లేయరింగ్ అమలు చేయడం - అధిక వాస్తవికత కొరకు సూక్ష్మ బాక్స్-షాడో మరియు మెరుగైన బోర్డర్-రిసియస్ జోడించడం ### శాతానుపాతాలతో స్పందనాత్మక డిజైన్ అన్ని పరిమాణాలు శాతానుపాతాలుగా ఉపయోగించడం గమనించండి, స్థిరమైన పిక్సెల్ విలువలన కన్నా: దీన్ని ఎందుకు ఉపయోగిస్తారు: - టెర్రారియం ఏ స్క్రీన్ సైజుపైన సరిపోతుంది అని నిర్ధారిస్తుంది - జార్ భాగాల మధ్య దృశ్య సంబంధాలను నిలుపుతుంది - మొబైల్ నుండి పెద్ద డెస్క్టాప్ మానిటర్ల వరకు అనుభవాన్ని సమానంగా ఇస్తుంది - దృశ్య లేఅవుట్ బ్రేక్ కాకుండా డిజైన్ సర్దుబాటు అవుతుంది ### CSS యూనిట్లు ప్రత్యక్షంగా మేము rem యూనిట్లను బోర్డర్-రిసియస్ కోసం ఉపయోగిస్తున్నాము, ఇవి మూల ఫాంట్ సైజ్కు సంబంధించి స్కేలు అవుతాయి. ఇది వినియోగదారు ఫాంట్ ప్రిఫరెన్సులకు గౌరవం ఇచ్చే మరింత యాక్సెస్ చేయదగిన డిజైన్లను సృష్టిస్తుంది. అధికారిక స్పెసిఫికేషన్లో CSS సాపేక్ష యూనిట్ల గురించి మరింత తెలుసుకోండి. ✅ దృష్టి ప్రయోగాలు: ఈ విలువలను మార్చి ఫలితాలను పరిశీలించండి: - జార్ యొక్క అపాసిటీని 0.5 నుండి 0.8 వరకు మార్చండి – గాజు ఎదురుదృశ్యానికి ఎలా ప్రభావితం అవుతుంది? - మట్టివర్ణాన్ని #3a241d నుండి #8B4513 కి మార్చండి – దాని దృష్టి ప్రభావం ఏమిటి? - మట్టికి z-indexని 2 కి మార్చండి – లేయరింగ్ కు ఏమౌతుంది? ### 🔄 అధ్యాపనాత్మక తనిఖీ CSS దృష్టి డిజైన్ అర్థం చేసుకోవడం: మీ CSS దృష్టిని నిర్ధారించుకోండి: - ✅ శాతానుపాత ఆధారిత పరిమాణాలు ఎలా స్పందనాత్మక డిజైన్ సృష్టిస్తాయి? - ✅ అపాసిటీ గాజు పారదర్శకత ప్రభావం సృష్టించడంలో ఏమాత్రం పాత్ర వహిస్తుంది? - ✅ ఎలిమెంట్లను లేయర్ చేయడంలో z-index పాత్ర ఏమిటి? - ✅ బోర్డర్-రిసియస్ విలువలతో జార్ ఆకారాన్ని ఎలా సృష్టిస్తారు? డిజైన్ సూత్రం: మేము సులభ ఆకారాల నుండి క్లిష్ట దృష్టులను ఎలా నిర్మిస్తున్నామో గమనించండి: 1. చతురస్రాలు → గుండ్రటివిడులు చతురస్రాలు → జార్ భాగాలు 2. సాలిడ్ రంగులు → అపాసిటీ → గాజు ప్రభావం 3. విభిన్న ఎలిమెంట్లు → లేయర్డ్ కాంపోజిషన్ → 3D దృశ్యము --- ## GitHub Copilot ఏజెంట్ ఛాలెంజ్ 🚀 ఏజెంట్ మోడ్ ఉపయోగించి ఈ క్రింది ఛాలెంజ్ పూర్తి చేయండి: వర్ణన: టెర్రారియంలోని మొక్కలు సహజ గాలి ప్రభావాన్ని అనుభూతి పరచేలా మెల్లగా ముందుకూ వెనుకకు తరలే CSS అనిమేషన్ సృష్టించండి. దీని ద్వారా CSS అనిమేషన్స్, ట్రాన్స్ఫార్మ్స్ మరియు కీఫ్రేమ్స్ లో ప్రాక్టీస్ చేయవచ్చు. ప్రాంప్ట్: టెర్రారియంలోని మొక్కలు రెండు నుండి మూడు డిగ్రీల వరకు ఎడమ మరియు కుడి వైపుకు తేలికగా తిప్పే స్వయంచాలక కీఫ్రేమ్ అనిమేషన్స్ .plant క్లాసుపై అమలు చేయండి. అనిమేషన్ 3-4 సెకన్ల పాటు కొనసాగూ ఉంటూ, సహజ ఉద్యమానికి ఈజింగ్ ఫంక్షన్ కలిగి ఉండాలి. ఇక్కడ ఏజెంట్ మోడ్ గురించి మరింత తెలుసుకోండి. ## 🚀 ఛాలెంజ్: గాజు ప్రతిబింబాలు జోడించడం మీ టెర్రారియాన్ని వాస్తవిక గాజు ప్రతిబింబాలతో అభివృద్ధి చేయడానికి సిద్ధంగా ఉన్నారా? ఈ టెక్నిక్ లోతు మరియు వాస్తవికతను పెంచుతుంది. మీరు గాజు ఉపరితలాలపై వెలుతురు ప్రతిబింబాలను కలిగించే సూక్ష్మ హైలైట్లను సృష్టిస్తారు. ఇది రెనెసెన్స్ పెయింటర్స్ జాన్ వాన్ ఎయ్క్ లాంటి వారు గాజు పెయింటింగ్లను 3D లాగా చూపించడానికి ఉపయోగించిన పరిస్థితిని అనుకరిస్తుంది. మీరు లక్ష్యం చేసుకునేది ఇలాగే ఉంది: మీ ఛాలెంజ్: - గాజు ప్రతిబింబాల కోసం సూక్ష్మ తెల్లటి లేదా ప్రకాశవంత రంగు ఒవల్ ఆకారాలను సృష్టించండి - జార్ ఎడమ వైపున వ్యూహాత్మకంగా అవి ఉండేలా పొజిషన్ చేయండి - వాస్తవిక ప్రతిబింబం కోసం తగిన అపాసిటీ మరియు బ్లర్ ప్రభావాలు వర్తించండి - సేంద్రీయ, బుడగలలా ఆకారాల కోసం border-radius ఉపయోగించండి - అభివృద్ధి కొరకై గ్రాడియంట్లు లేదా బాక్స్-షాడోలను ప్రయోగించండి ## పోస్ట్-లెక్చర్ క్విజ్ Post-lecture quiz ## మీ CSS జ్ఞానాన్ని విస్తరించండి CSS మొదట్లో క్లిష్టంగా అనిపించవచ్చు, కానీ ఈ ముఖ్య సూత్రాలు సమర్థవంతమైన, అధునాతన టెక్నిక్స్కు బలమైన ఆధారం ఇస్తాయి. మీ తదుపరి CSS నేర్చుకునే ప్రాంతాలు: - Flexbox - ఎలిమెంట్ల సులభ ఎలైన్మెంట్ మరియు పంపిణీ - CSS Grid - క్లిష్టమైన లేఅవుట్లను సృష్టించడానికి శక్తివంతమైన పరికరాలు - CSS Variables - పునరావృతిని తగ్గించి నిర్వహణను మెరుగుపరుస్తాయి - స్పందనాత్మక డిజైన్ - విభిన్న స్క్రీన్ సైజ్లపై సైట్లను సమర్థంగా పనిచేయించటం ### ఇంటరాక్టివ్ నేర్చుకునే వనరులు ఈ ఆలోచనలను హాండ్స్-ఆన్ ఆటల ద్వారా ప్రయత్నించండి: - 🐸 Flexbox Froggy - ఫన్ ఛాలెంజ్ల ద్వారా Flexbox నేర్చుకోండి - 🌱 Grid Garden - వర్చువల్ క్యారెట్లను పెంచుతూ CSS Grid నేర్చుకోండి - 🎯 CSS Battle - మీ CSS నైపుణ్యాలను కోడింగ్ ఛాలెంజ్లతో పరీక్షించండి ### అదనపు నేర్చుకోవడం సంపూర్ణ CSS ప్రాథమికాల కోసం ఈ Microsoft Learn మాడ్యూల్ పూర్తి చేయండి: Style your HTML app with CSS ### ⚡ తర్వాతి 5 నిమిషాల్లో మీరు చేయగలిగేది - [ ] DevTools ఓపెన్ చేసి ఎలిమెంట్స్ ప్యానెల్ ఉపయోగించి ఏ వెబ్సైట్ CSS శైలులను పరిశీలించండి - [ ] సింపుల్ CSS ఫైలు తయారుచేసి HTML పేజీకి లింక్ చేయండి - [ ] కలర్స్ మార్చేందుకు వేర్వేరు పద్ధతులు: హెక్స్, RGB, మరియు పేరులైన రంగులు ప్రయత్నించండి - [ ] బాక్స్ మోడల్ పై_PADDING_ మరియు_MARGIN_ వెల్పింపు సాధనలో ప్రాక్టీస్ చేయండి ### 🎯 ఈ గంటలో మీరు సాధించగలిగేది - [ ] పోస్ట్-లెక్షన్ క్విజ్ పూర్తి చేసి CSS ప్రాథమికాలు సమీక్షించండి - [ ] HTML పేజీకి ఫాంట్లు, రంగులు, మరియు మోసమోసాల ద్వారా స్టైల్ చేయండి - [ ] flexbox లేదా grid ఉపయోగించి సులభ లేఅవుట్ సృష్టించండి - [ ] స్మూత్ ఎఫెక్ట్స్ కోసం CSS ట్రాన్జిషన్స్ ప్రయోగించండి - [ ] మీడియా క్వెరీలతో స్పందనాత్మక డిజైన్ సాధన చేయండి ### 📅 మీ వారాంత CSS యాత్ర - [ ] టెర్రారియం స్టైలింగ్ అసైన్మెంట్ సృజనాత్మకతతో పూర్తి చేయండి - [ ] CSS Grid ను మాస్టర్ చేసి ఫోటో గ్యాలరీ లేఅవుట్ సృష్టించండి - [ ] CSS అనిమేషన్స్ నేర్చుకుని డిజైన్లకు ప్రాణం పోసండి - [ ] Sass లేదా Less వంటి CSS ప్రీప్రాసెసర్లు అన్వేషించండి - [ ] డిజైన్ సూత్రాలను అధ్యయనం చేసి CSS లో అమలు చేయండి - [ ] ఆన్లైన్ లో కనుగొన్న ఆసక్తికరమైన డిజైన్లను విశ్లేషించి పునఃసృష్టించండి ### 🌟 మీ నెలంతా డిజైన్ ప్రావీణ్యం - [ ] సంపూర్ణ స్పందనాత్మక వెబ్సైట్ డిజైన్ సిస్టమ్ నిర్మించండి - [ ] Tailwind వంటి CSS-in-JS లేదా utility-first ఫ్రేమ్వర్క్లు నేర్చుకోండి - [ ] CSS మెరుగుదలలతో ఓపెన్ సోర్స్ ప్రాజెక్టులకు సహాయం చేయండి - [ ] CSS కస్టమ్ ప్రాపర్టీస్ మరియు కంటైన్మెంట్ వంటి అధునాతన సూత్రాల నిర్వీర్యత - [ ] మాడ్యులర్ CSS తో పునర్వినియోగపరచుకోగల కంపోనెంట్ లైబ్రరీలు సృష్టించండి - [ ] ఇతరులను CSS నేర్పడానికి గైడ్ చేయండి మరియు డిజైన్ జ్ఞానం పంచుకోండి ## 🎯 మీ CSS ప్రావీణ్యం కాలఆక్రమికం ### 🛠️ మీ CSS టూల్కిట్ సమరి ఈ పాఠాన్ని పూర్తి చేసిన తర్వాత, మీరు ఇప్పుడు కలిగి ఉన్నవి: - కాస్కేడింగ్ అర్థం: శైలులు ఎలా వారసత్వంగా పొందుతాయో మరియు మార్చుకుంటాయో - సెలెక్టర్ ప్రావీణ్యం: ఎలిమెంట్లు, క్లాసులు, IDs తో ఖచ్చితమైన లక్ష్యం - పొజిషనింగ్ నైపుణ్యాలు: వ్యూహాత్మకంగా ఎలిమెంట్లను స్థానం పెట్టుట మరియు లేయరింగ్ - దృష్టి డిజైన్: గాజు ప్రభావాలు, నీడలు, పారదర్శకత సృష్టించడం - స్పందనాత్మక సాంకేతికతలు: శాతానుపాత ఆధారిత లేఅవుట్లు, ఏ స్క్రీన్కు సరిపోతాయి - కోడ్ వ్యవస్థీకరణ: సాఫీగా, నిర్వహణ సులభంగా ఉండే CSS నిర్మాణం - ఆధునిక ఆచరణలు: సాపేక్ష యూనిట్లను ఉపయోగించి యాక్సెసిబుల్ డిజైన్ నమూనాలు తదుపరి అడుగు: మీ టెర్రారియానికి ఇప్పుడు నిర్మాణం (HTML) మరియు శైలి (CSS) రెండూ ఉన్నాయి. తుద పాఠం JavaScript తో ఇంటరాక్టివిటీ జోడిస్తుంది! ## అసైన్మెంట్ CSS Refactoring --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> తప్పిదరువు: ఈ పత్రం AI అనువాద సేవ అయిన Co-op Translator ఉపయోగించి అనువదించబడింది. మేము ఖచ్చితత్వానికి ప్రయత్నిస్తున్నప్పటికీ, ఆటోమేటెడ్ అనువాదాల్లో పొరపాట్లు లేదా లోపాలు ఉండవచ్చు అని దయచేసి గమనించాలి. పూర్వస్థితి భాషలో ఉన్న అసలు పత్రం అధికారిక వనరు గా పరిగణించాలి. ముఖ్యమైన సమాచారం కోసం, ప్రొఫెషనల్ మానవ అనువాదం సూచించబడుతుంది. ఈ అనువాదం ఉపయోగంపై ఏ విధమైన అవగాహన లోపాలు లేదా తప్పు అర్థం చేసుకోవడాలపై మేము బాధ్యత కోల్పోము. <!-- CO-OP TRANSLATOR DISCLAIMER END -->
โครงการ Terrarium ตอนที่ 1: แนะนำ HTML
HTML หรือที่เรียกว่า HyperText Markup Language คือรากฐานของเว็บไซต์ทุกเว็บไซต์ที่คุณเคยเยี่ยมชม ลองคิดว่า HTML เป็นโครงกระดูกที่ให้องค์ประกอบและโครงสร้างแก่หน้าเว็บ – มันกำหนดว่าคอนเทนต์อยู่ที่ไหน จัดระเบียบอย่างไร และแต่ละส่วนแทนความหมายอะไร ในขณะที่ CSS จะเป็นการ "แต่งตัว" ให้ HTML ของคุณด้วยสีสันและการจัดวาง และ JavaScript จะทำให้มันมีชีวิตชีวาด้วยความโต้ตอบ HTML จะให้โครงสร้างที่จำเป็นซึ่งทำให้ทุกอย่างเป็นไปได้ ในบทเรียนนี้ คุณจะสร้างโครงสร้าง HTML สำหรับอินเทอร์เฟซ terrarium เสมือนจริง โปรเจกต์นี้จะสอนคุณเกี่ยวกับแนวคิดพื้นฐานของ HTML ในขณะที่สร้างสิ่งที่น่าดึงดูดทางสายตา คุณจะได้เรียนรู้การจัดระเบียบคอนเทนต์โดยใช้ส่วนประกอบที่มีความหมาย การทำงานกับภาพ และการสร้างพื้นฐานสำหรับแอปพลิเคชันเว็บที่มีการโต้ตอบ เมื่อจบบทเรียนนี้ คุณจะมีหน้า HTML ที่ทำงานได้ โดยแสดงภาพพืชในคอลัมน์ที่จัดเรียงไว้พร้อมสำหรับการตกแต่งสไตล์ในบทเรียนถัดไป ไม่ต้องกังวลถ้าดูพื้นฐานในตอนแรก – นั่นคือสิ่งที่ HTML ควรเป็นก่อนที่ CSS จะเพิ่มความสวยงามทางสายตา ## แบบทดสอบก่อนบรรยาย แบบทดสอบก่อนบรรยาย ## การตั้งค่าโปรเจกต์ของคุณ ก่อนที่เราจะเริ่มเขียนโค้ด HTML ให้ตั้งค่าสภาพแวดล้อมการทำงานที่เหมาะสมสำหรับโปรเจกต์ terrarium ของคุณ การสร้างโครงสร้างไฟล์ที่เป็นระเบียบตั้งแต่เริ่มต้นเป็นนิสัยที่สำคัญที่จะช่วยคุณตลอดเส้นทางการพัฒนาเว็บ ### งาน: สร้างโครงสร้างโปรเจกต์ของคุณ คุณจะสร้างโฟลเดอร์เฉพาะสำหรับโปรเจกต์ terrarium และเพิ่มไฟล์ HTML แรกของคุณ นี่คือสองวิธีที่คุณสามารถใช้: ตัวเลือกที่ 1: ใช้ Visual Studio Code 1. เปิด Visual Studio Code 2. คลิก "File" → "Open Folder" หรือใช้ Ctrl+K, Ctrl+O (Windows/Linux) หรือ Cmd+K, Cmd+O (Mac) 3. สร้างโฟลเดอร์ใหม่ชื่อ terrarium และเลือกโฟลเดอร์นี้ 4. ในแผง Explorer คลิกไอคอน "New File" 5. ตั้งชื่อไฟล์ของคุณว่า index.html ตัวเลือกที่ 2: ใช้คำสั่ง Terminal นี่คือสิ่งที่คำสั่งเหล่านี้ทำ: - สร้าง โฟลเดอร์ใหม่ชื่อ terrarium สำหรับโปรเจกต์ของคุณ - เข้าไปยัง โฟลเดอร์ terrarium - สร้าง ไฟล์ index.html เปล่า ๆ - เปิด ไฟล์ใน Visual Studio Code เพื่อแก้ไข ## ทำความเข้าใจโครงสร้างเอกสาร HTML เอกสาร HTML ทุกไฟล์จะปฏิบัติตามโครงสร้างเฉพาะที่เบราว์เซอร์ต้องเข้าใจและแสดงผลอย่างถูกต้อง ลองคิดว่าโครงสร้างนี้เหมือนจดหมายอย่างเป็นทางการ – มีองค์ประกอบที่จำเป็นเรียงลำดับกันเพื่อช่วยผู้รับ (ในกรณีนี้คือเบราว์เซอร์) ประมวลผลเนื้อหาอย่างเหมาะสม มาเริ่มโดยการเพิ่มโครงสร้างพื้นฐานที่สำคัญที่เอกสาร HTML ทุกไฟล์ต้องมี ### การประกาศ DOCTYPE และองค์ประกอบราก สองบรรทัดแรกของไฟล์ HTML ใดๆ ทำหน้าที่เป็น "บทนำ" ของเอกสารให้กับเบราว์เซอร์: ทำความเข้าใจสิ่งที่โค้ดนี้ทำ: - ประกาศ ชนิดเอกสารเป็น HTML5 โดยใช้ <!DOCTYPE html> - สร้าง องค์ประกอบราก <html> ที่จะบรรจุเนื้อหาทั้งหมดของหน้า - กำหนด มาตรฐานเว็บสมัยใหม่เพื่อให้เบราว์เซอร์แสดงผลอย่างถูกต้อง - รับประกัน การแสดงผลที่สอดคล้องกันในเบราว์เซอร์และอุปกรณ์ต่างๆ ### 🔄 ตรวจสอบเชิงการสอน หยุดและคิด: ก่อนจะไปต่อ ให้แน่ใจว่าคุณเข้าใจ: - ✅ ทำไมเอกสาร HTML ทุกไฟล์จึงต้องมีประกาศ DOCTYPE - ✅ องค์ประกอบราก <html> ประกอบด้วยอะไรบ้าง - ✅ โครงสร้างนี้ช่วยให้เบราว์เซอร์แสดงหน้าต่างๆ ได้อย่างถูกต้องอย่างไร ทดสอบตัวเองอย่างรวดเร็ว: คุณสามารถอธิบายด้วยคำของคุณเองได้ไหมว่า "การเรนเดอร์ที่สอดคล้องกับมาตรฐาน" หมายความว่าอย่างไร? ## การเพิ่มเมตาดาต้าเอกสารที่จำเป็น ส่วน <head> ของเอกสาร HTML ประกอบด้วยข้อมูลสำคัญที่เบราว์เซอร์และเครื่องมือค้นหาต้องการ แต่ผู้เยี่ยมชมจะไม่เห็นโดยตรงบนหน้าเว็บ ลองนึกว่ามันเป็น "เบื้องหลัง" ที่ช่วยให้เว็บไซต์ของคุณทำงานได้ถูกต้องและแสดงผลอย่างเหมาะสมในอุปกรณ์และแพลตฟอร์มต่างๆ เมตาดาต้านี้แจ้งให้เบราว์เซอร์ทราบว่าจะต้องแสดงหน้าอย่างไร ใช้การเข้ารหัสตัวอักษรแบบไหน และวิธีจัดการกับขนาดหน้าจอที่แตกต่างกัน – ซึ่งทั้งหมดนี้จำเป็นสำหรับการสร้างหน้าเว็บที่มืออาชีพและเข้าถึงได้ ### งาน: เพิ่มส่วนหัวของเอกสาร แทรกส่วน <head> นี้ระหว่างแท็กเปิดและปิด <html> ของคุณ: อธิบายว่าส่วนประกอบแต่ละตัวทำงานอย่างไร: - ตั้งค่า ชื่อหน้าที่ปรากฏในแท็บเบราว์เซอร์และผลการค้นหา - กำหนด การเข้ารหัสตัวอักษรเป็น UTF-8 เพื่อแสดงข้อความได้อย่างถูกต้องทั่วโลก - รับประกัน ความเข้ากันได้กับ Internet Explorer เวอร์ชันใหม่ๆ - กำหนดค่า การออกแบบแบบตอบสนองด้วยการตั้งค่า viewport ให้ตรงกับความกว้างของอุปกรณ์ - ควบคุม ระดับการซูมเริ่มต้นเพื่อแสดงเนื้อหาในขนาดธรรมชาติ ## การสร้างส่วนเนื้อหาของเอกสาร องค์ประกอบ <body> ประกอบด้วยเนื้อหาทั้งหมดที่มองเห็นได้ของเว็บเพจคุณ – ทุกอย่างที่ผู้ใช้จะเห็นและโต้ตอบด้วย ในขณะที่ส่วน <head> ให้คำสั่งกับเบราว์เซอร์ ส่วน <body> ประกอบด้วยเนื้อหาจริง: ข้อความ ภาพ ปุ่ม และองค์ประกอบอื่น ๆ ที่สร้างอินเทอร์เฟซผู้ใช้ของคุณ มาเพิ่มโครงสร้างของส่วนนี้และทำความเข้าใจว่าแท็ก HTML ทำงานร่วมกันอย่างไรเพื่อสร้างเนื้อหาที่มีความหมาย ### ทำความเข้าใจโครงสร้างแท็ก HTML HTML ใช้แท็กคู่เพื่อกำหนดองค์ประกอบ แท็กส่วนใหญ่จะมีแท็กเปิดเช่น <p> และแท็กปิดเช่น </p> โดยมีเนื้อหาอยู่ระหว่างกลาง: <p>Hello, world!</p> ซึ่งจะสร้างองค์ประกอบย่อหน้าที่มีข้อความ "Hello, world!" อยู่ภายใน ### งาน: เพิ่มองค์ประกอบ body อัปเดตไฟล์ HTML ของคุณให้รวมองค์ประกอบ <body>: นี่คือสิ่งที่โครงสร้างครบถ้วนนี้มอบให้: - สร้าง โครงร่างเอกสาร HTML5 พื้นฐาน - รวม เมตาดาต้าที่จำเป็นสำหรับการแสดงผลที่ถูกต้องของเบราว์เซอร์ - สร้าง ส่วนเนื้อหาที่ว่างเปล่าพร้อมสำหรับเนื้อหาที่มองเห็นได้ของคุณ - ปฏิบัติตาม แนวทางพัฒนาเว็บสมัยใหม่ที่ดีที่สุด ตอนนี้คุณพร้อมเพิ่มองค์ประกอบที่มองเห็นได้ของ terrarium แล้ว เราจะใช้แท็ก <div> เป็นภาชนะเพื่อจัดระเบียบส่วนต่างๆ ของเนื้อหา และแท็ก <img> เพื่อแสดงภาพพืช ### การทำงานกับภาพและภาชนะจัดวาง ภาพใน HTML มีความพิเศษเพราะใช้แท็กแบบ "ปิดตัวเอง" แตกต่างจากองค์ประกอบอย่าง <p></p> ที่ครอบคลุมเนื้อหา แท็ก <img> จะบรรจุข้อมูลทั้งหมดที่ต้องการไว้ภายในแท็กเองโดยใช้แอตทริบิวต์เช่น src สำหรับเส้นทางไฟล์ภาพ และ alt สำหรับการเข้าถึง ก่อนเพิ่มภาพใน HTML คุณต้องจัดระเบียบไฟล์โปรเจกต์ของคุณให้ถูกต้องโดยการสร้างโฟลเดอร์ images และเพิ่มภาพพืชเข้าไป อันดับแรก ตั้งค่าสำหรับภาพของคุณ: 1. สร้างโฟลเดอร์ชื่อ images ภายในโฟลเดอร์โปรเจกต์ terrarium ของคุณ 2. ดาวน์โหลดภาพพืชจาก โฟลเดอร์ตัวอย่าง (รวม 14 ภาพพืช) 3. คัดลอกภาพพืชทั้งหมดใส่ในโฟลเดอร์ images ที่สร้างใหม่ ### งาน: สร้างเลย์เอาต์แสดงพืช ตอนนี้เพิ่มภาพพืชที่จัดวางเป็นสองคอลัมน์ระหว่างแท็ก <body></body> ของคุณ: ทีละขั้นตอน นี่คือสิ่งที่โค้ดนี้ทำ: - สร้าง ตัวภาชนะหลักของหน้าโดยใช้ id="page" เพื่อเก็บเนื้อหาทั้งหมด - จัดตั้ง ตัวภาชนะสองคอลัมน์คือ left-container และ right-container - จัดระเบียบ พืช 7 ต้นในคอลัมน์ซ้ายและ 7 ต้นในคอลัมน์ขวา - ล้อมรอบ ภาพพืชแต่ละภาพด้วย <div> ที่มีคลาส plant-holder เพื่อจัดตำแหน่งแต่ละต้น - ใช้ ชื่อคลาสที่สอดคล้องกันสำหรับการตกแต่ง CSS ในบทเรียนถัดไป - กำหนด ID เฉพาะสำหรับภาพพืชแต่ละภาพเพื่อให้สามารถโต้ตอบกับ JavaScript ในภายหลัง - ระบุ เส้นทางไฟล์อย่างถูกต้องชี้ไปยังโฟลเดอร์ images ### 🔄 ตรวจสอบเชิงการสอน ทำความเข้าใจโครงสร้าง: ใช้เวลาสักครู่ทบทวนโครงสร้าง HTML ของคุณ: - ✅ คุณสามารถระบุภาชนะหลักในเลย์เอาต์ของคุณได้หรือไม่? - ✅ คุณเข้าใจไหมว่าทำไมแต่ละภาพถึงต้องมี ID เฉพาะ? - ✅ คุณจะอธิบายจุดประสงค์ของ <div> ที่มีคลาส plant-holder ได้อย่างไร? ตรวจสอบด้วยสายตา: เปิดไฟล์ HTML ของคุณในเบราว์เซอร์ คุณควรเห็น: - รายการภาพพืชแบบพื้นฐาน - ภาพที่จัดเป็นสองคอลัมน์ - เลย์เอาต์เรียบง่ายไม่มีการแต่งสไตล์ อย่าลืม: รูปลักษณ์พื้นฐานนี้คือสิ่งที่ HTML ควรเป็นก่อนการตกแต่งด้วย CSS! เมื่อใส่โค้ดนี้แล้ว ภาพพืชจะปรากฏบนหน้าจอ ถึงแม้ว่าพวกมันจะยังไม่สวยงาม – นั่นคือหน้าที่ของ CSS ในบทเรียนถัดไป! ตอนนี้คุณมีพื้นฐาน HTML ที่มั่นคงซึ่งจัดระเบียบเนื้อหาอย่างถูกต้องและปฏิบัติตามแนวทางการเข้าถึงที่ดีที่สุด ## การใช้ HTML เชิงความหมายเพื่อการเข้าถึง Semantic HTML หมายถึงการเลือกใช้แท็ก HTML ตามความหมายและจุดประสงค์ของเนื้อหา ไม่ใช่แค่รูปลักษณ์เท่านั้น เมื่อคุณใช้การมาร์กอัปที่มีความหมาย คุณกำลังสื่อสารโครงสร้างและความหมายของเนื้อหากับเบราว์เซอร์ เครื่องมือค้นหา และเทคโนโลยีช่วยเหลือต่างๆ เช่น เครื่องอ่านหน้าจอ วิธีนี้ทำให้เว็บไซต์ของคุณเข้าถึงผู้มีความบกพร่องได้ดีขึ้น และช่วยให้เครื่องมือค้นหาทำความเข้าใจเนื้อหาของคุณได้ดีขึ้น นี่คือหลักการพื้นฐานของการพัฒนาเว็บสมัยใหม่ซึ่งสร้างประสบการณ์ที่ดีขึ้นสำหรับทุกคน ### การเพิ่มหัวข้อหน้าที่มีความหมาย มาเพิ่มหัวข้อที่เหมาะสมให้กับหน้า terrarium ของคุณ แทรกบรรทัดนี้หลังแท็ก <body> เปิดทันที: ทำไมการมาร์กอัปเชิงความหมายจึงสำคัญ: - ช่วย เครื่องอ่านหน้าจอในการนำทางและเข้าใจโครงสร้างของหน้า - ปรับปรุง การทำ SEO โดยทำให้ลำดับของเนื้อหาชัดเจนขึ้น - เสริม การเข้าถึงสำหรับผู้ใช้ที่มีข้อจำกัดทางสายตาหรือความแตกต่างทางการรับรู้ - สร้าง ประสบการณ์ผู้ใช้ที่ดีกว่าบนอุปกรณ์และแพลตฟอร์มทุกประเภท - ปฏิบัติตาม มาตรฐานเว็บและแนวทางปฏิบัติที่ดีที่สุดสำหรับงานมืออาชีพ ตัวอย่างการเลือกแท็กเชิงความหมายกับไม่เชิงความหมาย: ## การสร้างภาชนะ Terrarium ตอนนี้มาเพิ่มโครงสร้าง HTML สำหรับ terrarium เอง – ภาชนะกระจกที่จะวางต้นไม้ภายในภายหลัง ส่วนนี้แสดงให้เห็นแนวคิดสำคัญว่า HTML ให้โครงสร้าง แต่ว่าโดยไม่มีการตกแต่งด้วย CSS เหล่านี้จะยังไม่มองเห็น การมาร์กอัปของ terrarium ใช้ชื่อคลาสที่อธิบายความหมาย ซึ่งจะทำให้การตกแต่ง CSS ในบทเรียนถัดไปเข้าใจง่ายและดูแลได้สะดวก ### งาน: เพิ่มโครงสร้าง Terrarium แทรกโค้ดนี้ไว้เหนือแท็ก </div> ตัวสุดท้าย (ก่อนปิดแท็กของตัวภาชนะหน้าหลัก): ทำความเข้าใจโครงสร้าง terrarium นี้: - สร้าง ตัวภาชนะ terrarium หลักที่มี ID เฉพาะเพื่อการตกแต่ง - กำหนด องค์ประกอบแยกต่างหากสำหรับแต่ละส่วนประกอบภาพ (ด้านบน, ผนัง, ดิน, ด้านล่าง) - รวม องค์ประกอบซ้อนสำหรับเอฟเฟกต์การสะท้อนบนกระจก (องค์ประกอบเงางาม) - ใช้ ชื่อคลาสที่สื่อความหมายชัดเจนสำหรับแต่ละองค์ประกอบ - เตรียม โครงสร้างสำหรับการจัดแต่ง CSS ที่จะสร้างรูปลักษณ์ของเทอราเรียมแก้ว ### 🔄 ตรวจสอบความเข้าใจเชิงการสอน การเข้าใจโครงสร้าง HTML อย่างเชี่ยวชาญ: ก่อนจะไปต่อ ให้แน่ใจว่าคุณสามารถ: - ✅ อธิบายความแตกต่างระหว่างโครงสร้าง HTML กับรูปลักษณ์สายตา - ✅ ระบุองค์ประกอบ HTML เชิงความหมายกับไม่เชิงความหมาย - ✅ อธิบายว่าการใช้มาร์กอัปที่ถูกต้องช่วยเรื่องการเข้าถึงได้อย่างไร - ✅ รับรู้โครงสร้างต้นไม้เอกสารอย่างครบถ้วน ทดสอบความเข้าใจของคุณ: ลองเปิดไฟล์ HTML ของคุณในเบราว์เซอร์ที่ปิดใช้งาน JavaScript และลบ CSS ออก นี่จะเผยให้เห็นโครงสร้างเชิงความหมายที่แท้จริงที่คุณสร้างขึ้น! --- ## การท้าทาย GitHub Copilot Agent ใช้โหมด Agent เพื่อตอบโจทย์นี้: คำอธิบาย: สร้างโครงสร้าง HTML เชิงความหมายสำหรับส่วนคำแนะนำการดูแลพืชที่สามารถเพิ่มเข้าไปในโปรเจคเทอราเรียมได้ คำชักชวน: สร้างส่วน HTML เชิงความหมายที่มีหัวข้อหลักว่า "Plant Care Guide" พร้อม 3 หัวข้อย่อยคือ "Watering", "Light Requirements", และ "Soil Care" แต่ละหัวข้อมาพร้อมกับย่อหน้าข้อมูลการดูแลพืช ใช้แท็ก HTML เชิงความหมายที่เหมาะสม เช่น <section>, <h2>, <h3>, และ <p> เพื่อจัดโครงสร้างเนื้อหาอย่างถูกต้อง เรียนรู้เพิ่มเติมเกี่ยวกับ โหมด agent ได้ที่นี่ ## ท้าทายการสำรวจประวัติ HTML เรียนรู้เกี่ยวกับวิวัฒนาการของเว็บ HTML ได้พัฒนาอย่างมากตั้งแต่ Tim Berners-Lee สร้างเว็บเบราว์เซอร์แรกที่ CERN ในปี 1990 แท็กเก่าบางตัวเช่น <marquee> ถูกยกเลิกการใช้งานเพราะไม่สอดคล้องกับมาตรฐานการเข้าถึงข้อมูลและหลักการออกแบบตอบสนองสมัยใหม่ ลองทำการทดลองนี้: 1. ห่อหัวข้อ <h1> ของคุณชั่วคราวในแท็ก <marquee> เช่น <marquee><h1>My Terrarium</h1></marquee> 2. เปิดหน้าในเบราว์เซอร์และสังเกตเอฟเฟกต์เลื่อนข้อความ 3. พิจารณาว่าทำไมแท็กนี้จึงถูกยกเลิก (อินทร์: คิดถึงประสบการณ์ผู้ใช้และการเข้าถึง) 4. ลบแท็ก <marquee> ออกและกลับไปใช้มาร์กอัปเชิงความหมาย คำถามสะท้อนความคิด: - การมีหัวข้อเลื่อนข้อความจะส่งผลอย่างไรต่อผู้ใช้ที่มีความบกพร่องทางสายตาหรือไวต่อการเคลื่อนไหว? - เทคนิค CSS สมัยใหม่ใดที่สามารถสร้างเอฟเฟกต์สายตาคล้ายกันได้อย่างเข้าถึงง่ายกว่า? - ทำไมจึงสำคัญที่จะต้องใช้มาตรฐานเว็บปัจจุบันแทนการใช้แท็กที่เลิกใช้งานแล้ว? สำรวจเพิ่มเติมเกี่ยวกับ องค์ประกอบ HTML ที่เลิกใช้งานและล้าสมัย เพื่อเข้าใจการวิวัฒนาการของมาตรฐานเว็บในการปรับปรุงประสบการณ์ผู้ใช้ ## แบบทดสอบหลังบรรยาย แบบทดสอบหลังบรรยาย ## ทบทวน & ศึกษาด้วยตนเอง เสริมความรู้ HTML ของคุณ HTML เป็นพื้นฐานของเว็บมากว่า 30 ปี พัฒนา จากภาษามาร์กอัปเอกสารธรรมดาเป็นแพลตฟอร์มที่ซับซ้อนสำหรับสร้างแอปพลิเคชันที่โต้ตอบได้ การเข้าใจวิวัฒนาการนี้ช่วยให้คุณเห็นคุณค่าของมาตรฐานเว็บสมัยใหม่และช่วยตัดสินใจพัฒนาได้ดียิ่งขึ้น เส้นทางการเรียนรู้แนะนำ: 1. ประวัติและวิวัฒนาการของ HTML - ศึกษาไทม์ไลน์ตั้งแต่ HTML 1.0 ถึง HTML5 - สำรวจสาเหตุที่แท็กบางตัวถูกเลิกใช้ (เรื่องการเข้าถึง, มิตรกับมือถือ, การบำรุงรักษา) - ตรวจสอบฟีเจอร์และข้อเสนอใหม่ของ HTML ที่กำลังเกิดขึ้น 2. เจาะลึก HTML เชิงความหมาย - ศึกษารายการองค์ประกอบ HTML5 เชิงความหมาย - ฝึกการระบุว่าเมื่อไรควรใช้ <article>, <section>, <aside>, และ <main> - เรียนรู้เกี่ยวกับแอตทริบิวต์ ARIA เพื่อเพิ่มการเข้าถึงข้อมูล 3. การพัฒนาเว็บสมัยใหม่ - สำรวจ การสร้างเว็บไซต์ตอบสนอง บน Microsoft Learn - เข้าใจการรวม HTML เข้ากับ CSS และ JavaScript - เรียนรู้เกี่ยวกับประสิทธิภาพเว็บและแนวปฏิบัติ SEO ที่ดีที่สุด คำถามสะท้อนความคิด: - แท็ก HTML อะไรที่คุณเจอว่าถูกเลิกใช้ และทำไมมันถึงถูกลบ? - ฟีเจอร์ใหม่ของ HTML อะไรบ้างที่กำลังถูกเสนอสำหรับเวอร์ชันในอนาคต? - HTML เชิงความหมายช่วยให้การเข้าถึงและ SEO ดีขึ้นอย่างไร? ### ⚡ สิ่งที่คุณทำได้ใน 5 นาทีถัดไป - [ ] เปิด DevTools (F12) และตรวจสอบโครงสร้าง HTML ของเว็บไซต์โปรดของคุณ - [ ] สร้างไฟล์ HTML ง่าย ๆ ที่มีแท็กพื้นฐาน: <h1>, <p>, และ <img> - [ ] ตรวจสอบความถูกต้องของ HTML ของคุณด้วย W3C HTML Validator ออนไลน์ - [ ] ลองเพิ่มคอมเมนต์ใน HTML ด้วย <!-- comment --> ### 🎯 สิ่งที่คุณทำได้ในชั่วโมงนี้ - [ ] ทำแบบทดสอบหลังบทเรียนและทบทวนแนวคิด HTML เชิงความหมาย - [ ] สร้างเว็บเพจง่าย ๆ เกี่ยวกับตัวคุณเองโดยใช้โครงสร้าง HTML ที่ถูกต้อง - [ ] ทดลองกับระดับหัวข้อและแท็กจัดรูปแบบข้อความต่าง ๆ - [ ] เพิ่มรูปภาพและลิงก์เพื่อฝึกการรวมมัลติมีเดีย - [ ] ศึกษาฟีเจอร์ HTML5 ที่คุณยังไม่เคยลอง ### 📅 เส้นทาง HTML ของคุณในสัปดาห์นี้ - [ ] ทำโปรเจคเทอราเรียมให้เสร็จสมบูรณ์โดยใช้มาร์กอัปเชิงความหมาย - [ ] สร้างเว็บที่เข้าถึงได้โดยใช้ ARIA labels และบทบาท - [ ] ฝึกสร้างฟอร์มด้วยชนิดข้อมูลป้อนเข้าที่หลากหลาย - [ ] สำรวจ API ของ HTML5 เช่น localStorage หรือ geolocation - [ ] ศึกษารูปแบบ HTML ตอบสนองและการออกแบบแบบ mobile-first - [ ] ทบทวนโค้ด HTML ของนักพัฒนาคนอื่นเพื่อหาแนวปฏิบัติที่ดีที่สุด ### 🌟 พื้นฐานเว็บของคุณในเดือนนี้ - [ ] สร้างเว็บไซต์ผลงานแสดงความชำนาญ HTML ของคุณ - [ ] เรียนรู้การเทมเพลต HTML ด้วยเฟรมเวิร์กอย่าง Handlebars - [ ] ร่วมพัฒนาโปรเจคโอเพนซอร์สโดยการปรับปรุงเอกสาร HTML - [ ] เชี่ยวชาญแนวคิด HTML ขั้นสูงเช่นองค์ประกอบแบบกำหนดเอง - [ ] รวม HTML เข้ากับ CSS Frameworks และไลบรารี JavaScript - [ ] ให้คำแนะนำผู้อื่นที่เรียนรู้พื้นฐาน HTML ## 🎯 ไทม์ไลน์ความชำนาญ HTML ของคุณ ### 🛠️ สรุปชุดเครื่องมือ HTML ของคุณ หลังจากจบบทเรียนนี้ คุณจะมี: - โครงสร้างเอกสาร: พื้นฐาน HTML5 ครบถ้วนพร้อม DOCTYPE ที่ถูกต้อง - มาร์กอัปเชิงความหมาย: แท็กที่มีความหมายเพิ่มการเข้าถึงและ SEO - การแทรกรูปภาพ: การจัดระเบียบไฟล์และการใช้งาน alt text อย่างเหมาะสม - โครงร่างเลย์เอาต์: ใช้ div อย่างมีกลยุทธ์พร้อมชื่อคลาสที่สื่อความหมาย - ความตระหนักเรื่องการเข้าถึง: ความเข้าใจการนำทางของเครื่องอ่านหน้าจอ - มาตรฐานสมัยใหม่: การปฏิบัติ HTML5 ปัจจุบันและความรู้เกี่ยวกับแท็กล้าสมัย - พื้นฐานโปรเจค: พื้นฐานมั่นคงสำหรับการจัดแต่ง CSS และความโต้ตอบ JavaScript ขั้นตอนต่อไป: โครงสร้าง HTML ของคุณพร้อมสำหรับการจัดแต่ง CSS แล้ว! พื้นฐานเชิงความหมายที่คุณสร้างจะทำให้บทเรียนถัดไปเข้าใจง่ายขึ้นมาก ## การบ้าน ฝึกฝน HTML ของคุณ: สร้างบล็อกจำลอง --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> ข้อจำกัดความรับผิดชอบ: เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษาด้วย AI Co-op Translator แม้ว่าเราจะพยายามให้มีความถูกต้อง โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือตำหนิไม่ถูกต้อง เอกสารต้นฉบับในภาษาดั้งเดิมถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลโดยมืออาชีพที่เป็นมนุษย์ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดขึ้นจากการใช้การแปลนี้ <!-- CO-OP TRANSLATOR DISCLAIMER END -->
โครงการ Terrarium ตอนที่ 2: แนะนำ CSS
จำได้ไหมว่า Terrarium HTML ของคุณดูเรียบง่ายมาก? CSS คือที่ที่เราจะเปลี่ยนโครงสร้างธรรมดานั้นให้กลายเป็นสิ่งที่ดูน่าดึงดูดทางสายตา ถ้า HTML คือการสร้างโครงของบ้าน CSS ก็คือทุกสิ่งที่ทำให้บ้านนั้นดูน่าอยู่ - สีทาบ้าน การจัดวางเฟอร์นิเจอร์ การจัดแสง และวิธีที่แต่ละห้องเชื่อมต่อกัน ลองนึกถึงพระราชวังแวร์ซายที่เริ่มต้นจากบ้านล่าสัตว์ธรรมดา แต่ด้วยความใส่ใจในการตกแต่งและการจัดวาง จึงกลายเป็นหนึ่งในอาคารที่งดงามที่สุดในโลก วันนี้เราจะเปลี่ยน Terrarium ของคุณจากแค่ใช้งานได้ให้กลายเป็นงานที่ดูปราณีต คุณจะได้เรียนรู้วิธีการจัดวางองค์ประกอบอย่างแม่นยำ ทำให้เลย์เอาต์ตอบสนองต่อขนาดหน้าจอที่แตกต่างกัน และสร้างความน่าดึงดูดทางสายตาที่ทำให้เว็บไซต์น่าสนใจ เมื่อจบบทเรียนนี้ คุณจะเห็นว่า การกำหนดสไตล์ CSS อย่างมีวิจารณญาณจะยกระดับโครงการของคุณได้อย่างมาก มาร่วมเพิ่มสไตล์ให้กับ Terrarium ของคุณกัน ## แบบทดสอบก่อนบรรยาย แบบทดสอบก่อนบรรยาย ## การเริ่มต้นกับ CSS โดยทั่วไป CSS มักถูกมองว่าเป็นแค่ "แต่งให้สวย" แต่จริงๆ แล้วมันมีบทบาทที่กว้างกว่ามาก CSS เหมือนผู้กำกับภาพยนตร์ - คุณไม่ได้ควบคุมแค่รูปลักษณ์เท่านั้น แต่ยังรวมถึงการเคลื่อนไหว การตอบสนองต่อการโต้ตอบ และการปรับตัวให้เหมาะกับสถานการณ์ต่างๆ CSS สมัยใหม่มีความสามารถยอดเยี่ยม คุณสามารถเขียนโค้ดที่ปรับเลย์เอาต์ให้สอดคล้องกับโทรศัพท์ แท็บเล็ต และคอมพิวเตอร์เดสก์ท็อปได้อัตโนมัติ คุณสามารถสร้างแอนิเมชันที่นุ่มนวลเพื่อดึงดูดความสนใจของผู้ใช้ไปยังจุดที่ต้องการ ผลลัพธ์เมื่อทุกอย่างทำงานร่วมกันก็น่าประทับใจมาก สิ่งที่เราจะทำได้ในบทเรียนนี้: - สร้าง การออกแบบภาพรวมที่สมบูรณ์สำหรับ Terrarium ของคุณโดยใช้เทคนิค CSS สมัยใหม่ - สำรวจ แนวคิดพื้นฐานอย่างเช่น กฎ Cascade, การสืบทอด และ CSS selectors - นำไปใช้ การจัดวางตำแหน่งและเลย์เอาต์ที่ตอบสนอง - สร้าง คอนเทนเนอร์ Terrarium โดยใช้รูปทรงและสไตล์ CSS ### ความพร้อมเบื้องต้น คุณควรทำโครงสร้าง HTML ของ Terrarium ให้เสร็จจากบทเรียนก่อนหน้าและพร้อมสำหรับการกำหนดสไตล์ ### การตั้งค่าไฟล์ CSS ของคุณ ก่อนที่เราจะเริ่มกำหนดสไตล์ เราต้องเชื่อมโยง CSS กับ HTML ก่อน การเชื่อมโยงนี้บอกบราวเซอร์ว่าต้องไปหาไฟล์สไตล์ที่ไหนสำหรับ Terrarium ของเรา ในโฟลเดอร์ Terrarium ของคุณ ให้สร้างไฟล์ใหม่ชื่อ style.css แล้วเชื่อมโยงในส่วน <head> ของเอกสาร HTML ของคุณดังนี้: สิ่งที่โค้ดนี้ทำ: - สร้าง การเชื่อมต่อระหว่างไฟล์ HTML กับ CSS - บอก บราวเซอร์ให้โหลดและใช้สไตล์จากไฟล์ style.css - ใช้ แอตทริบิวต์ rel="stylesheet" เพื่อระบุว่าไฟล์นี้เป็นไฟล์ CSS - อ้างอิง พาธไฟล์ด้วย href="./style.css" ## การทำความเข้าใจกฎ CSS Cascade เคยสงสัยไหมว่า ทำไม CSS ถึงชื่อว่า "Cascading" Style Sheets? เพราะสไตล์มันไหลลงมาราวกับน้ำตก และบางครั้งก็ขัดแย้งกันเอง ลองนึกถึงการทำงานของโครงสร้างคำสั่งในกองทัพ - คำสั่งทั่วไปอาจจะบอกว่า "ทุกทหารต้องใส่ชุดสีเขียว" แต่คำสั่งเฉพาะสำหรับหน่วยคุณอาจบอกว่า "ใส่ชุดงานพิธีสีน้ำเงิน" คำสั่งที่เฉพาะเจาะจงกว่าจะมีอำนาจมากกว่า CSS ก็ใช้ตรรกะนี้เหมือนกัน และการเข้าใจลำดับชั้นนี้ช่วยให้การดีบักง่ายขึ้นมาก ### ทดลองกับลำดับความสำคัญของ Cascade เรามาลองดู Cascade ในการทำงานด้วยการสร้างความขัดแย้งของสไตล์ก่อน โดยเพิ่มสไตล์แบบ inline ให้กับแท็ก <h1> ของคุณ: สิ่งที่โค้ดนี้ทำ: - ใช้ สีแดงโดยตรงกับองค์ประกอบ <h1> ผ่านสไตล์แบบ inline - ใช้ แอตทริบิวต์ style เพื่อฝัง CSS ลงไปใน HTML โดยตรง - สร้าง กฎสไตล์ที่มีลำดับความสำคัญสูงสุดสำหรับองค์ประกอบนี้ ถัดไป เพิ่มกฎนี้ในไฟล์ style.css ของคุณ: ในโค้ดข้างต้นเราได้: - กำหนด กฎ CSS ที่กำหนดเป้าหมายทุกองค์ประกอบ <h1> - ตั้งค่า สีข้อความเป็นสีน้ำเงินโดยใช้สไตล์ชีตภายนอก - สร้าง กฎที่มีลำดับความสำคัญต่ำกว่าแบบ inline ✅ ตรวจสอบความเข้าใจ: สีไหนจะแสดงในเว็บแอปของคุณ? ทำไมสีนี้ถึงได้แสดง? คุณคิดถึงสถานการณ์ไหนบ้างที่ต้องการเขียนทับสไตล์ก่อนหน้า? ## การสืบทอด (Inheritance) ของ CSS ในการใช้งาน CSS inheritance ทำงานเหมือนพันธุกรรม - องค์ประกอบจะสืบทอดคุณสมบัติบางอย่างจากองค์ประกอบพ่อแม่ ถ้าคุณตั้งค่าฟอนต์บนองค์ประกอบ body ทุกข้อความข้างในจะใช้ฟอนต์นั้นโดยอัตโนมัติ เหมือนกับว่าใบหน้ารูปขากรรไกรโดดเด่นของตระกูล Habsburg ปรากฏผ่านหลายชั่วคนโดยไม่ได้ถูกกำหนดเฉพาะสำหรับแต่ละคน อย่างไรก็ตาม ไม่ใช่ทุกอย่างที่จะถูกสืบทอด สไตล์ข้อความอย่างฟอนต์และสีจะสืบทอด แต่คุณสมบัติเลย์เอาต์ เช่น margin และ border จะไม่สืบทอด เหมือนเด็กๆ อาจสืบทอดลักษณะทางกายภาพ แต่ไม่ได้สืบทอดรสนิยมแฟชั่นของพ่อแม่ ### สังเกตการสืบทอดฟอนต์ มาลองดู inheritance ในการทำงานโดยตั้งค่าฟอนต์แฟมิลี่บนองค์ประกอบ <body>: แยกย่อยสิ่งที่เกิดขึ้นที่นี่: - ตั้งค่า ฟอนต์แฟมิลี่สำหรับทั้งหน้าโดยกำหนดที่ <body> - ใช้ ฟอนต์สแตกที่มีตัวเลือก fallback เพื่อความเข้ากันได้กับบราวเซอร์ต่างๆ - ใช้ ฟอนต์ระบบสมัยใหม่ที่ดูดีในระบบปฏิบัติการต่างกัน - รับรองว่า ทุกองค์ประกอบลูกจะสืบทอดฟอนต์นี้ ยกเว้นถูกเขียนทับเฉพาะเจาะจง เปิดเครื่องมือสำหรับนักพัฒนาในบราวเซอร์ของคุณ (F12) ไปที่แท็บ Elements แล้วตรวจสอบองค์ประกอบ <h1> คุณจะเห็นว่ามันได้รับการสืบทอดฟอนต์จาก body: ✅ เวลาทดลอง: ลองตั้งค่าคุณสมบัติที่สืบทอดได้อื่นๆ บน <body> เช่น color, line-height, หรือ text-align ดูสิว่า heading และองค์ประกอบอื่นๆ จะเปลี่ยนอย่างไร ### 🔄 ตรวจสอบความเข้าใจ ความเข้าใจพื้นฐาน CSS: ก่อนจะไปถึง selectors ให้แน่ใจว่าคุณสามารถ: - ✅ อธิบายความแตกต่างระหว่าง cascade กับ inheritance ได้ - ✅ ทำนายได้ว่า สไตล์ไหนจะชนะในกรณีขัดแย้งของ specificity - ✅ ระบุได้ว่าคุณสมบัติไหนถูกสืบทอดจากองค์ประกอบพ่อแม่ - ✅ เชื่อมต่อไฟล์ CSS กับ HTML ได้อย่างถูกต้อง ทดสอบด่วน: ถ้าคุณมีสไตล์เหล่านี้ สีของ <h1> ที่อยู่ภายใน <div class="special"> จะเป็นสีอะไร? คำตอบ: สีแดง (element selector เล็งตรงที่ h1) ## ชำนาญการใช้ CSS Selectors CSS selectors คือวิธีที่คุณกำหนดเป้าหมายองค์ประกอบเฉพาะเพื่อกำหนดสไตล์ เหมือนกับการบอกทิศทางที่เจาะจง - แทนที่จะบอกว่า "บ้าน" คุณอาจจะบอกว่า "บ้านสีฟ้าที่มีประตูสีแดงบนถนน Maple" CSS มีหลายวิธีที่จะระบุเป้าหมายอย่างเฉพาะเจาะจง และการเลือก selector ที่เหมาะสมก็เหมือนกับการเลือกเครื่องมือที่ถูกต้องสำหรับงาน บางครั้งคุณต้องการสไตล์ประตูทุกบานในย่านนี้ และบางครั้งแค่ประตูเดียวเท่านั้น ### Element Selectors (แท็ก) Element selectors เล็งไปที่องค์ประกอบ HTML ตามชื่อแท็ก เหมาะสำหรับการตั้งค่าสไตล์พื้นฐานที่ใช้ทั่วหน้า: เข้าใจสไตล์เหล่านี้ว่า: - ตั้งค่า Typography ที่สม่ำเสมอทั่วทั้งหน้าโดยใช้ตัวเลือก body - ลบ margin และ padding ของบราวเซอร์ที่ตั้งไว้โดยปริยายเพื่อควบคุมได้ดีขึ้น - กำหนดสไตล์ ให้กับทุกองค์ประกอบหัวเรื่องด้วยสี การจัดตำแหน่ง และระยะห่าง - ใช้ หน่วย rem เพื่อขนาดฟอนต์ที่ปรับขยายได้และเข้าถึงได้ง่าย แม้ว่า element selectors จะเหมาะกับการสไตล์ทั่วไป แต่คุณต้องการ selectors ที่เฉพาะเจาะจงมากขึ้นเพื่อสไตล์ชิ้นส่วนแต่ละชิ้น เช่น ต้นไม้ใน Terrarium ของคุณ ### ID Selectors สำหรับองค์ประกอบเฉพาะ ID selectors ใช้เครื่องหมาย # และเล็งไปที่องค์ประกอบที่มีแอตทริบิวต์ id เฉพาะเจาะจง เนื่องจากไอดีต้องไม่ซ้ำกันในหน้า จึงเหมาะสำหรับการสไตล์องค์ประกอบพิเศษเฉพาะ เช่น ภาชนะตนนไม้ฝั่งซ้ายและขวาของเรา มาสร้างสไตล์สำหรับคอนเทนเนอร์ด้านข้างของ Terrarium ที่จะวางต้นไม้: โค้ดนี้ทำอะไรได้บ้าง: - จัดวาง คอนเทนเนอร์ที่ขอบซ้ายและขวาสุดโดยใช้ตำแหน่ง absolute - ใช้ หน่วย vh (ความสูงของหน้าจอ) เพื่อให้ความสูงตอบสนองตามขนาดหน้าจอ - ใช้ box-sizing: border-box เพื่อให้ padding รวมอยู่ในความกว้างทั้งหมด - ตัด หน่วย px ออกจากค่าเป็นศูนย์เพื่อให้โค้ดดูสะอาดขึ้น - กำหนด สีพื้นหลังที่อ่อนโยน เพื่อความสบายตากว่าการใช้สีเทาจัด ✅ ความท้าทายเรื่องคุณภาพโค้ด: สังเกตว่าภาษา CSS นี้ละเมิดหลักการ DRY (อย่าทำซ้ำตัวเอง) คุณสามารถปรับปรุงโค้ดนี้โดยใช้ทั้ง ID และคลาสได้หรือไม่? วิธีการปรับปรุง: ### Class Selectors สำหรับสไตล์ที่นำกลับมาใช้ได้ Class selectors ใช้สัญลักษณ์ . และเหมาะกับกรณีที่ต้องการใช้สไตล์เดียวกันกับองค์ประกอบหลายชิ้น ต่างจากไอดีที่ไม่ซ้ำกัน คลาสสามารถใช้ซ้ำใน HTML ได้ ทำให้เหมาะกับแพตเทิร์นการสไตล์ที่สม่ำเสมอ ใน Terrarium ของเรา แต่ละต้นไม้ต้องการสไตล์คล้ายกันแต่ต้องการตำแหน่งที่แตกต่าง เราจะใช้คลาสสำหรับสไตล์ที่ใช้ร่วมกัน และไอดีสำหรับตำแหน่งเฉพาะ นี่คือโครงสร้าง HTML ของแต่ละต้นไม้: อธิบายองค์ประกอบหลัก: - ใช้ class="plant-holder" สำหรับสไตล์ภาชนะที่สอดคล้องกันทั่วทุกต้นไม้ - ใช้ class="plant" สำหรับการสไตล์ภาพและพฤติกรรมร่วมกัน - มี id="plant1" เฉพาะเพื่อการตั้งตำแหน่งและการโต้ตอบกับ JavaScript - มี ข้อความ alt ที่อธิบายสำหรับการเข้าถึงผู้ใช้ที่ใช้ screen reader ตอนนี้เพิ่มสไตล์เหล่านี้ในไฟล์ style.css ของคุณ: แยกย่อยสไตล์เหล่านี้: - สร้าง ตำแหน่งแบบ relative ให้กับ plant-holder เพื่อกำหนด context การจัดตำแหน่ง - ตั้ง ความสูง plant-holder แต่ละอันที่ 13% เพื่อให้ต้นไม้ทั้งหมดพอดีแนวตั้งโดยไม่ต้องเลื่อน - เลื่อน holder ไปทางซ้ายเล็กน้อยเพื่อจัดตำแหน่งต้นไม้ให้อยู่กึ่งกลางในภาชนะ - อนุญาต ให้ต้นไม้ยืดขนาดตามหน้าจอด้วย max-width และ max-height - ใช้ z-index เพื่อให้ต้นไม้ซ้อนอยู่เหนือองค์ประกอบอื่นใน Terrarium - เพิ่ม เอฟเฟกต์ hover เล็กๆ ด้วยการเปลี่ยนแปลง CSS ที่นุ่มนวลเพื่อการโต้ตอบที่ดีขึ้น ✅ คิดวิเคราะห์: ทำไมเราถึงต้องใช้ทั้ง .plant-holder และ .plant? จะเกิดอะไรขึ้นถ้าเราใช้แค่ตัวเดียว? ## ทำความเข้าใจการจัดตำแหน่งของ CSS การจัดตำแหน่ง CSS ก็เหมือนผู้กำกับเวทีละคร - คุณกำหนดตำแหน่งให้นักแสดงทุกคนยืนและเคลื่อนที่ไปรอบๆ เวที นักแสดงบางคนทำตามการจัดวางปกติ ในขณะที่บางคนต้องตำแหน่งเฉพาะเพื่อเอฟเฟกต์ที่น่าสนใจ เมื่อคุณเข้าใจการจัดตำแหน่งแล้ว ปัญหาเลย์เอาต์หลายอย่างก็จะจัดการได้ง่าย ต้องการแถบนำทางที่อยู่บนสุดแม้ผู้ใช้เลื่อนหน้าจอ? การจัดตำแหน่งช่วยได้ ต้องการ tooltip ที่แสดงในตำแหน่งเฉพาะ? นั่นก็การจัดตำแหน่ง ### ค่าการจัดตำแหน่งทั้งห้า ### การจัดตำแหน่งใน Terrarium ของเรา Terrarium ของเราใช้การผสมผสานของชนิดการจัดตำแหน่งอย่างเป็นกลยุทธ์เพื่อสร้างเลย์เอาต์ที่ต้องการ: เข้าใจกลยุทธ์การจัดตำแหน่ง: - คอนเทนเนอร์ตำแหน่ง absolute ถูกดึงออกจากฟลูว์ปกติของเอกสารและติดกับขอบหน้าจอ - plant-holder ตำแหน่ง relative สร้าง context การจัดตำแหน่งในขณะที่ยังอยู่ในฟลูว์เอกสาร - ต้นไม้ตำแหน่ง absolute สามารถวางตำแหน่งได้อย่างแม่นยำภายใน plant-holder ที่ relative - การผสมผสานนี้ ช่วยให้ต้นไม้ซ้อนแนวตั้งได้ในขณะที่ยังจัดตำแหน่งได้แต่ละต้นอย่างอิสระ ✅ เวลาทดลอง: ลองเปลี่ยนค่าการจัดตำแหน่งและสังเกตผลลัพธ์: - จะเกิดอะไรขึ้นถ้าคุณเปลี่ยน .container จาก absolute เป็น relative? - เลย์เอาต์จะเปลี่ยนอย่างไรหาก .plant-holder ใช้ absolute แทน relative? - จะเกิดอะไรขึ้นเมื่อคุณเปลี่ยน .plant เป็นตำแหน่ง relative? ### 🔄 การตรวจสอบความเข้าใจ ความชำนาญเกี่ยวกับ CSS Positioning: หยุดเพื่อตรวจสอบความเข้าใจของคุณ: - ✅ คุณอธิบายได้ไหมว่าทำไมต้นไม้จึงต้องใช้ตำแหน่งแบบ absolute สำหรับการลากและวาง? - ✅ คุณเข้าใจไหมว่าภาชนะแบบ relative สร้างบริบทการจัดตำแหน่งอย่างไร? - ✅ ทำไมกล่องด้านข้างจึงใช้ตำแหน่ง absolute? - ✅ จะเกิดอะไรขึ้นถ้าคุณลบคำประกาศตำแหน่งทั้งหมดออกไป? การเชื่อมโยงกับโลกจริง: คิดว่า CSS positioning คล้ายกับเลย์เอาต์ในโลกจริงอย่างไร: - Static: หนังสือบนชั้นวาง (ลำดับธรรมชาติ) - Relative: ขยับหนังสือเล็กน้อยแต่ยังคงตำแหน่งไว้ - Absolute: การวางที่คั่นหนังสือที่หน้าหนังสือที่แน่นอน - Fixed: โน้ตเหนียวที่ยังคงมองเห็นได้ขณะที่คุณพลิกหน้า ## การสร้างเทอราเรียมด้วย CSS ตอนนี้เราจะสร้างโหลแก้วโดยใช้ CSS เท่านั้น – ไม่ต้องใช้รูปภาพหรือซอฟต์แวร์กราฟิก การสร้างแก้วที่ดูสมจริง, เงา และเอฟเฟกต์ลึกซึ้งโดยใช้ตำแหน่งและความโปร่งใสแสดงถึงศักยภาพทางภาพของ CSS เทคนิคนี้สะท้อนให้เห็นถึงวิธีที่สถาปนิกในยุค Bauhaus ใช้รูปทรงเรขาคณิตง่ายๆ เพื่อสร้างโครงสร้างที่ซับซ้อนและงดงาม เมื่อคุณเข้าใจหลักการเหล่านี้แล้ว คุณจะรู้เทคนิค CSS ที่อยู่เบื้องหลังการออกแบบเว็บหลายๆ แบบ ### การสร้างส่วนประกอบโหลแก้ว เรามาสร้างโหลเทอราเรียมทีละชิ้น ทุกชิ้นใช้ตำแหน่ง absolute และการกำหนดขนาดเป็นเปอร์เซ็นต์เพื่อรองรับการแสดงผลที่ตอบสนอง: การทำความเข้าใจการสร้างเทอราเรียม: - ใช้ ขนาดที่ตั้งเป็นเปอร์เซ็นต์เพื่อให้ขยายได้ตามขนาดหน้าจอ - จัดตำแหน่ง องค์ประกอบแบบ absolute เพื่อวางซ้อนและจัดแนวได้อย่างแม่นยำ - ใช้ ค่า opacity ต่าง ๆ เพื่อสร้างเอฟเฟกต์ความโปร่งใสของแก้ว - ตั้งค่า z-index เพื่อการวางซ้อนให้ต้นไม้ปรากฏภายในโหล - เพิ่ม เงากล่องและความโค้งของขอบที่ละเอียดเพื่อให้ดูสมจริงมากขึ้น ### การออกแบบตอบสนองด้วยเปอร์เซ็นต์ สังเกตว่าทุกขนาดใช้เปอร์เซ็นต์แทนค่าพิกเซลที่ตายตัว: เหตุผลที่สำคัญ: - ทำให้ เทอราเรียมปรับขนาดตามสัดส่วนบนหน้าจอทุกขนาด - รักษา ความสัมพันธ์ทางภาพระหว่างส่วนประกอบโหลแก้ว - ให้ ประสบการณ์ที่สอดคล้องกันตั้งแต่โทรศัพท์มือถือจนถึงจอมอนิเตอร์ใหญ่ - อนุญาต ให้การออกแบบปรับเปลี่ยนได้โดยไม่ทำให้เลย์เอาต์เสียหาย ### หน่วย CSS ในการปฏิบัติ เราใช้หน่วย rem สำหรับ border-radius ซึ่งปรับตามขนาดฟอนต์ราก นี่ช่วยสร้างการออกแบบที่เข้าถึงง่ายขึ้นและเคารพการตั้งค่าฟอนต์ของผู้ใช้ เรียนรู้เพิ่มเติมเกี่ยวกับ หน่วยสัมพัทธ์ CSS ในข้อกำหนดอย่างเป็นทางการ ✅ ทดลองปรับแต่งด้วยสายตา: ลองแก้ไขค่าต่างๆ และสังเกตผลลัพธ์: - เปลี่ยนความทึบของโหลจาก 0.5 เป็น 0.8 – สิ่งนี้มีผลต่อการปรากฏของแก้วอย่างไร? - ปรับสีดินจาก #3a241d เป็น #8B4513 – มีผลกระทบทางภาพอย่างไร? - เปลี่ยน z-index ของดินเป็น 2 – จะเกิดอะไรขึ้นกับการวางซ้อน? ### 🔄 การตรวจสอบความเข้าใจ ความเข้าใจการออกแบบด้วย CSS: ยืนยันความเข้าใจด้านการออกแบบด้วย CSS: - ✅ ขนาดแบบเปอร์เซ็นต์ช่วยสร้างการออกแบบตอบสนองได้อย่างไร? - ✅ ทำไม opacity ถึงช่วยสร้างเอฟเฟกต์ความโปร่งใสของแก้ว? - ✅ บทบาทของ z-index ในการวางซ้อนองค์ประกอบคืออะไร? - ✅ ค่าของ border-radius ช่วยสร้างรูปร่างโหลอย่างไร? หลักการออกแบบ: สังเกตว่าเราสร้างภาพซับซ้อนจากรูปทรงง่ายๆ: 1. สี่เหลี่ยมผืนผ้า → สี่เหลี่ยมมุมโค้ง → ส่วนประกอบโหล 2. สีแบนๆ → opacity → เอฟเฟกต์แก้ว 3. องค์ประกอบเดี่ยว → การวางซ้อนเป็นชั้นๆ → ลักษณะ 3 มิติ --- ## ความท้าทาย GitHub Copilot Agent 🚀 ใช้โหมด Agent เพื่อทำความท้าทายต่อไปนี้ให้สำเร็จ: คำอธิบาย: สร้างอนิเมชัน CSS ให้ต้นไม้ในเทอราเรียมหวิวไปมาช้าๆ เสมือนลมพัดเบาๆ ซึ่งจะช่วยฝึกทักษะการสร้างอนิเมชัน CSS, การแปลงรูป และ keyframes พร้อมเพิ่มความสวยงามให้เทอราเรียมของคุณ คำสั่ง: เพิ่ม keyframe animation CSS เพื่อทำให้ต้นไม้ในเทอราเรียมหวิวช้าๆ ซ้ายขวา สร้างอนิเมชันการโยกที่หมุนต้นไม้เล็กน้อย (2-3 องศา) ซ้ายและขวา ใช้ความยาวเวลา 3-4 วินาที และใช้กับคลาส .plant ให้อนิเมชันวนลูปไม่รู้จบและมี easing function เพื่อการเคลื่อนไหวที่เป็นธรรมชาติ เรียนรู้เพิ่มเติมเกี่ยวกับ โหมด agent ที่นี่ ## 🚀 ความท้าทาย: การเพิ่มแสงสะท้อนบนแก้ว พร้อมหรือยังที่จะเพิ่มแสงสะท้อนที่สมจริงบนโหลเทอราเรียม? เทคนิคนี้จะเพิ่มความลึกและความสมจริงให้กับการออกแบบ คุณจะสร้างไฮไลต์สีขาวหรือสีอ่อนในรูปวงรีเล็กๆ ที่สะท้อนแสงเสมือนจริง วางตำแหน่งอย่างเหมาะสมทางด้านซ้ายของโหล ใช้ความโปร่งใสและเบลอให้เหมาะสมเพื่อสร้างแสงสะท้อนที่สมจริง ใช้ border-radius เพื่อสร้างรูปฟองออร์แกนิก และลองใช้กราเดียนต์หรือกล่องเงาเพื่อเพิ่มความสมจริงยิ่งขึ้น ## แบบทดสอบหลังเรียน แบบทดสอบหลังเรียน ## ขยายความรู้ CSS ของคุณ CSS อาจดูซับซ้อนในตอนแรก แต่ความเข้าใจหลักการเหล่านี้จะเป็นพื้นฐานที่มั่นคงสำหรับเทคนิคขั้นสูง หัวข้อ CSS ต่อไปที่คุณควรเรียนรู้: - Flexbox – ช่วยจัดแนวและกระจายองค์ประกอบให้เรียบง่ายขึ้น - CSS Grid – ให้เครื่องมือทรงพลังสำหรับสร้างเลย์เอาต์ซับซ้อน - CSS Variables – ลดการซ้ำซ้อนและเพิ่มความง่ายในการบำรุงรักษา - Responsive design – ทำให้เว็บไซต์ใช้งานได้ดีในขนาดหน้าจอแตกต่างกัน ### แหล่งเรียนรู้เชิงโต้ตอบ ฝึกฝนแนวคิดเหล่านี้ด้วยเกมสนุกๆ: - 🐸 Flexbox Froggy – ฝึก Flexbox ผ่านความท้าทายสนุกๆ - 🌱 Grid Garden – เรียน CSS Grid ด้วยการปลูกแครอทเสมือน - 🎯 CSS Battle – ทดสอบทักษะ CSS ของคุณด้วยความท้าทายการเขียนโค้ด ### เรียนรู้อื่นๆ สำหรับพื้นฐาน CSS อย่างสมบูรณ์ ให้ทำโมดูล Microsoft Learn นี้: Style your HTML app with CSS ### ⚡ สิ่งที่คุณทำได้ใน 5 นาทีถัดไป - [ ] เปิด DevTools และตรวจสอบสไตล์ CSS บนเว็บไซต์ใดก็ได้ผ่านแผง Elements - [ ] สร้างไฟล์ CSS ง่ายๆ และเชื่อมโยงกับหน้า HTML - [ ] ลองเปลี่ยนสีโดยใช้วิธีต่างๆ: hex, RGB, และชื่อสี - [ ] ฝึกฝนกล่องโมเดล (box model) โดยเพิ่ม padding และ margin ให้กับ div ### 🎯 สิ่งที่คุณทำได้ในชั่วโมงนี้ - [ ] ทำแบบทดสอบหลังเรียนและทบทวนพื้นฐาน CSS - [ ] แต่งหน้าเว็บ HTML ของคุณด้วยฟอนต์ สี และระยะห่าง - [ ] สร้างเลย์เอาต์ง่ายๆ ด้วย flexbox หรือ grid - [ ] ทดลองใช้ CSS transitions เพื่อเอฟเฟกต์ที่ลื่นไหล - [ ] ฝึกทำ responsive design ด้วย media queries ### 📅 การผจญภัยใน CSS เป็นเวลา 1 สัปดาห์ - [ ] ทำงานมอบหมายการแต่งเทอราเรียมด้วยความคิดสร้างสรรค์ - [ ] เชี่ยวชาญ CSS Grid โดยสร้างเลย์เอาต์แกลเลอรีรูปภาพ - [ ] เรียนรู้ CSS animations เพื่อเพิ่มชีวิตชีวาให้การออกแบบ - [ ] สำรวจ CSS preprocessors เช่น Sass หรือ Less - [ ] ศึกษาหลักการออกแบบและประยุกต์ใช้กับ CSS ของคุณ - [ ] วิเคราะห์และสร้างสรรค์การออกแบบที่น่าสนใจที่คุณเจอออนไลน์ ### 🌟 ชำนาญการออกแบบ CSS ภายใน 1 เดือน - [ ] สร้างระบบการออกแบบเว็บไซต์ตอบสนองครบวงจร - [ ] เรียนรู้ CSS-in-JS หรือเฟรมเวิร์กแบบ utility-first อย่าง Tailwind - [ ] มีส่วนร่วมในโปรเจกต์โอเพนซอร์สด้วยการปรับปรุง CSS - [ ] เชี่ยวชาญแนวคิด CSS ขั้นสูงเช่น CSS custom properties และ containment - [ ] สร้างไลบรารีคอมโพเนนต์ที่นำกลับมาใช้ใหม่ได้ด้วย CSS แบบโมดูลาร์ - [ ] เป็นพี่เลี้ยงผู้เรียน CSS คนอื่นและแบ่งปันความรู้ด้านการออกแบบ ## 🎯 ไทม์ไลน์ความชำนาญ CSS ของคุณ ### 🛠️ สรุปชุดเครื่องมือ CSS ของคุณ หลังจากเรียนจบบทเรียนนี้ คุณจะมี: - ความเข้าใจเรขาคณิตแบบ Cascade: วิธีการที่สไตล์สืบทอดและแทนที่กัน - ความชำนาญในการเลือก (Selector Mastery): การกำหนดเป้าหมายอย่างแม่นยำด้วยองค์ประกอบ คลาส และ ID - ทักษะการจัดตำแหน่ง: การวางและซ้อนส่วนประกอบอย่างมียุทธศาสตร์ - การออกแบบด้วยการมองเห็น: สร้างเอฟเฟกต์แก้ว เงา และความโปร่งใส - เทคนิคตอบสนอง: เลย์เอาต์ที่ตั้งด้วยเปอร์เซ็นต์ซึ่งปรับให้เข้ากับหน้าจอใดก็ได้ - การจัดการโค้ด: โครงสร้าง CSS ที่สะอาดและดูแลรักษาง่าย - แนวปฏิบัติสมัยใหม่: ใช้หน่วยสัมพัทธ์และแบบแผนการออกแบบที่เข้าถึงได้ ขั้นตอนถัดไป: เทอราเรียมของคุณตอนนี้มีทั้งโครงสร้าง (HTML) และสไตล์ (CSS) บทเรียนสุดท้ายจะเพิ่มความโต้ตอบด้วย JavaScript! ## งานมอบหมาย CSS Refactoring --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> ข้อจำกัดความรับผิดชอบ: เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษาด้วย AI Co-op Translator แม้เราจะพยายามให้ความถูกต้องสูงสุด โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่แม่นยำ เอกสารต้นฉบับในภาษาต้นทางควรถูกถือเป็นแหล่งข้อมูลที่มีอำนาจสำหรับข้อมูลดังกล่าว สำหรับข้อมูลที่สำคัญ แนะนำให้ใช้การแปลโดยมนุษย์มืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่อาจเกิดขึ้นจากการใช้การแปลนี้ <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Proyekto ng Terrarium Bahagi 1: Panimula sa HTML
Ang HTML, o HyperText Markup Language, ang pundasyon ng bawat website na iyong binisita. Isipin ang HTML bilang balangkas na nagbibigay ng istruktura sa mga web page – ito ang nagtatakda kung saan ilalagay ang nilalaman, paano ito iaayos, at ano ang kinakatawan ng bawat bahagi. Habang ang CSS ang magpapaganda sa iyong HTML gamit ang mga kulay at layout, at ang JavaScript ang magdadagdag ng interaktibidad, ang HTML ang nagbibigay ng mahalagang istruktura na nagpapahintulot sa lahat ng iba pang aspeto na maging posible. Sa araling ito, gagawa ka ng istruktura ng HTML para sa isang virtual na interface ng terrarium. Ang proyektong ito ay magtuturo sa iyo ng mga pangunahing konsepto ng HTML habang gumagawa ng isang bagay na kaakit-akit sa paningin. Matututuhan mo kung paano ayusin ang nilalaman gamit ang mga semantic na elemento, magtrabaho gamit ang mga imahe, at gumawa ng pundasyon para sa isang interaktibong web application. Sa pagtatapos ng araling ito, magkakaroon ka ng gumaganang HTML page na nagpapakita ng mga imahe ng halaman sa maayos na mga kolum, handa na para sa pag-istilo sa susunod na aralin. Huwag mag-alala kung mukhang simple ito sa simula – ganito talaga ang HTML bago magdagdag ng visual na polish ang CSS. ## Pre-Lecture Quiz Pre-lecture quiz ## Pagsisimula ng Iyong Proyekto Bago tayo sumabak sa HTML code, mag-set up muna tayo ng maayos na workspace para sa iyong proyekto ng terrarium. Ang paggawa ng organisadong istruktura ng file mula sa simula ay isang mahalagang ugali na magagamit mo sa buong paglalakbay mo sa web development. ### Gawain: Gumawa ng Istruktura ng Proyekto Gagawa ka ng dedikadong folder para sa iyong proyekto ng terrarium at magdadagdag ng iyong unang HTML file. Narito ang dalawang paraan na maaari mong gamitin: Opsyon 1: Gamit ang Visual Studio Code 1. Buksan ang Visual Studio Code 2. I-click ang "File" → "Open Folder" o gamitin ang Ctrl+K, Ctrl+O (Windows/Linux) o Cmd+K, Cmd+O (Mac) 3. Gumawa ng bagong folder na tinatawag na terrarium at piliin ito 4. Sa Explorer pane, i-click ang "New File" icon 5. Pangalanan ang iyong file na index.html Opsyon 2: Gamit ang Terminal Commands Narito ang ginagawa ng mga command na ito: - Gumagawa ng bagong direktoryo na tinatawag na terrarium para sa iyong proyekto - Nag-navigate sa terrarium directory - Gumagawa ng walang laman na index.html file - Binubuksan ang file sa Visual Studio Code para sa pag-edit ## Pag-unawa sa Istruktura ng HTML Document Ang bawat HTML document ay sumusunod sa isang partikular na istruktura na kailangan ng mga browser upang maunawaan at maipakita nang tama. Isipin ang istruktura na ito tulad ng isang pormal na liham – mayroon itong mga kinakailangang elemento sa partikular na pagkakasunod-sunod na tumutulong sa tatanggap (sa kasong ito, ang browser) na iproseso ang nilalaman nang maayos. Simulan natin sa pagdaragdag ng mahalagang pundasyon na kailangan ng bawat HTML document. ### Ang DOCTYPE Declaration at Root Element Ang unang dalawang linya ng anumang HTML file ay nagsisilbing "panimula" ng dokumento sa browser: Pag-unawa sa ginagawa ng code na ito: - Idinedeklara ang uri ng dokumento bilang HTML5 gamit ang <!DOCTYPE html> - Gumagawa ng root <html> element na maglalaman ng lahat ng nilalaman ng page - Itinatakda ang modernong web standards para sa tamang pag-render ng browser - Tinitiyak ang pare-parehong pagpapakita sa iba't ibang browser at device ### 🔄 Pedagogical Check-in Huminto at Magnilay: Bago magpatuloy, tiyakin na nauunawaan mo: - ✅ Bakit kailangan ng bawat HTML document ng DOCTYPE declaration - ✅ Ano ang nilalaman ng <html> root element - ✅ Paano nakakatulong ang istrukturang ito sa tamang pag-render ng mga browser Mabilis na Pagsusuri: Kaya mo bang ipaliwanag sa sarili mong mga salita kung ano ang ibig sabihin ng "standards-compliant rendering"? ## Pagdaragdag ng Mahalagang Metadata ng Dokumento Ang <head> na seksyon ng isang HTML document ay naglalaman ng mahalagang impormasyon na kailangan ng mga browser at search engine, ngunit hindi direktang nakikita ng mga bisita sa page. Isipin ito bilang "behind-the-scenes" na impormasyon na tumutulong sa iyong webpage na gumana nang maayos at lumitaw nang tama sa iba't ibang device at platform. Ang metadata na ito ay nagsasabi sa mga browser kung paano ipapakita ang iyong page, anong character encoding ang gagamitin, at kung paano haharapin ang iba't ibang laki ng screen – lahat ng ito ay mahalaga para sa paggawa ng propesyonal at accessible na mga web page. ### Gawain: Idagdag ang Document Head Ipasok ang <head> na seksyon sa pagitan ng iyong pagbubukas at pagsasara ng <html> tags: Pag-unawa sa ginagawa ng bawat elemento: - Itinatakda ang pamagat ng page na lumalabas sa mga tab ng browser at resulta ng paghahanap - Tinutukoy ang UTF-8 character encoding para sa tamang pagpapakita ng teksto sa buong mundo - Tinitiyak ang compatibility sa mga modernong bersyon ng Internet Explorer - Kinokontrol ang disenyo ng responsive sa pamamagitan ng pagtatakda ng viewport na tumutugma sa lapad ng device - Kinokontrol ang initial zoom level upang ipakita ang nilalaman sa natural na laki ## Pagbuo ng Document Body Ang <body> element ay naglalaman ng lahat ng nakikitang nilalaman ng iyong webpage – lahat ng makikita at makikipag-ugnayan ang mga user. Habang ang <head> na seksyon ay nagbibigay ng mga tagubilin sa browser, ang <body> na seksyon ay naglalaman ng aktwal na nilalaman: teksto, mga imahe, mga button, at iba pang elemento na bumubuo sa iyong user interface. Simulan natin ang pagdaragdag ng istruktura ng body at unawain kung paano nagtutulungan ang mga HTML tag upang lumikha ng makabuluhang nilalaman. ### Pag-unawa sa Istruktura ng HTML Tag Ang HTML ay gumagamit ng mga paired tags upang tukuyin ang mga elemento. Karamihan sa mga tag ay may opening tag tulad ng <p> at closing tag tulad ng </p>, na may nilalaman sa pagitan: <p>Hello, world!</p>. Ito ay lumilikha ng isang paragraph element na naglalaman ng teksto na "Hello, world!". ### Gawain: Idagdag ang Body Element I-update ang iyong HTML file upang isama ang <body> element: Narito ang ibinibigay ng kumpletong istrukturang ito: - Itinatakda ang pangunahing HTML5 document framework - Kasama ang mahalagang metadata para sa tamang pag-render ng browser - Gumagawa ng walang laman na body na handa para sa iyong nakikitang nilalaman - Sumusunod sa modernong web development best practices Ngayon handa ka nang magdagdag ng mga nakikitang elemento ng iyong terrarium. Gagamit tayo ng mga <div> na elemento bilang mga lalagyan upang ayusin ang iba't ibang seksyon ng nilalaman, at mga <img> na elemento upang ipakita ang mga imahe ng halaman. ### Paggamit ng Mga Imahe at Layout Containers Ang mga imahe ay espesyal sa HTML dahil gumagamit sila ng "self-closing" na mga tag. Hindi tulad ng mga elemento tulad ng <p></p> na bumabalot sa nilalaman, ang <img> tag ay naglalaman ng lahat ng impormasyong kailangan nito sa loob ng tag mismo gamit ang mga attributes tulad ng src para sa file path ng imahe at alt para sa accessibility. Bago magdagdag ng mga imahe sa iyong HTML, kailangan mong ayusin nang maayos ang iyong mga file ng proyekto sa pamamagitan ng paggawa ng folder ng mga imahe at pagdaragdag ng mga graphics ng halaman. Una, i-set up ang iyong mga imahe: 1. Gumawa ng folder na tinatawag na images sa loob ng iyong terrarium project folder 2. I-download ang mga imahe ng halaman mula sa solution folder (14 na imahe ng halaman lahat) 3. Kopyahin ang lahat ng mga imahe ng halaman sa iyong bagong images folder ### Gawain: Gumawa ng Layout ng Display ng Halaman Ngayon, idagdag ang mga imahe ng halaman na nakaayos sa dalawang kolum sa pagitan ng iyong <body></body> tags: Hakbang-hakbang, narito ang nangyayari sa code na ito: - Gumagawa ng pangunahing lalagyan ng page na may id="page" upang maglaman ng lahat ng nilalaman - Nagtatakda ng dalawang lalagyan ng kolum: left-container at right-container - Inaayos ang 7 halaman sa kaliwang kolum at 7 halaman sa kanang kolum - Binabalot ang bawat imahe ng halaman sa isang plant-holder div para sa indibidwal na pagpoposisyon - Nag-aaplay ng pare-parehong class names para sa CSS styling sa susunod na aralin - Nag-aassign ng unique IDs sa bawat imahe ng halaman para sa interaksyon ng JavaScript sa hinaharap - Kasama ang tamang file paths na tumuturo sa images folder ### 🔄 Pedagogical Check-in Pag-unawa sa Istruktura: Maglaan ng sandali upang suriin ang iyong istruktura ng HTML: - ✅ Kaya mo bang tukuyin ang mga pangunahing lalagyan sa iyong layout? - ✅ Nauunawaan mo ba kung bakit ang bawat imahe ay may unique ID? - ✅ Paano mo ilalarawan ang layunin ng mga plant-holder divs? Visual na Inspeksyon: Buksan ang iyong HTML file sa browser. Dapat mong makita: - Isang simpleng listahan ng mga imahe ng halaman - Mga imahe na nakaayos sa dalawang kolum - Simpleng layout na walang istilo Tandaan: Ang simpleng hitsura na ito ay eksaktong kung ano ang dapat na hitsura ng HTML bago ang pag-istilo ng CSS! Sa markup na ito, lilitaw na ang mga halaman sa screen, kahit na hindi pa ito mukhang maganda – para diyan ang CSS sa susunod na aralin! Sa ngayon, mayroon kang solidong pundasyon ng HTML na maayos na nag-aayos ng iyong nilalaman at sumusunod sa mga best practices ng accessibility. ## Paggamit ng Semantic HTML para sa Accessibility Ang Semantic HTML ay nangangahulugan ng pagpili ng mga HTML elemento batay sa kanilang kahulugan at layunin, hindi lamang sa kanilang hitsura. Kapag gumamit ka ng semantic markup, ipinapahayag mo ang istruktura at kahulugan ng iyong nilalaman sa mga browser, search engines, at mga assistive technologies tulad ng screen readers. Ang ganitong paraan ay ginagawang mas accessible ang iyong mga website sa mga gumagamit na may kapansanan at tumutulong sa mga search engine na mas maunawaan ang iyong nilalaman. Isa itong mahalagang prinsipyo ng modernong web development na lumilikha ng mas magagandang karanasan para sa lahat. ### Pagdaragdag ng Semantic Page Title Idagdag natin ang tamang heading sa iyong terrarium page. Ipasok ang linyang ito pagkatapos ng iyong pagbubukas na <body> tag: Bakit mahalaga ang semantic markup: - Tumutulong sa mga screen readers na mag-navigate at maunawaan ang istruktura ng page - Pinapabuti ang search engine optimization (SEO) sa pamamagitan ng pagpapaliwanag ng hierarchy ng nilalaman - Pinapalakas ang accessibility para sa mga gumagamit na may kapansanan sa paningin o pagkakaiba sa kognitibo - Lumilikha ng mas magagandang karanasan ng user sa lahat ng device at platform - Sumusunod sa web standards at best practices para sa propesyonal na development Mga Halimbawa ng semantic vs. non-semantic na mga pagpipilian: ## Paglikha ng Terrarium Container Ngayon, idagdag natin ang istruktura ng HTML para sa terrarium mismo – ang glass container kung saan ilalagay ang mga halaman sa huli. Ipinapakita ng seksyong ito ang isang mahalagang konsepto: ang HTML ay nagbibigay ng istruktura, ngunit kung walang CSS styling, ang mga elementong ito ay hindi pa makikita. Ang markup ng terrarium ay gumagamit ng mga deskriptibong class names na magpapadali sa CSS styling sa susunod na aralin. ### Gawain: Idagdag ang Istruktura ng Terrarium Ipasok ang markup na ito sa itaas ng huling </div> tag (bago ang closing tag ng page container): Pag-unawa sa istruktura ng terrarium na ito: - Gumagawa ng pangunahing terrarium container na may unique ID para sa styling - Nagde-define ng magkakahiwalay na elemento para sa bawat visual na bahagi (itaas, dingding, lupa, ilalim) - Naglalaman ng mga nested na elemento para sa mga epekto ng salamin (mga glossy na elemento) - Gumagamit ng mga deskriptibong pangalan ng klase na malinaw na nagpapahiwatig ng layunin ng bawat elemento - Inihahanda ang istruktura para sa CSS styling na lilikha ng hitsura ng glass terrarium ### 🔄 Pedagogical Check-in Pag-master ng Istruktura ng HTML: Bago magpatuloy, tiyaking kaya mong: - ✅ Ipaliwanag ang pagkakaiba ng istruktura ng HTML at visual na hitsura - ✅ Tukuyin ang semantic vs. non-semantic na mga elemento ng HTML - ✅ Ilarawan kung paano nakakatulong ang tamang markup sa accessibility - ✅ Kilalanin ang kumpletong istruktura ng document tree Pagsubok sa Iyong Pag-unawa: Subukang buksan ang iyong HTML file sa browser na naka-disable ang JavaScript at tinanggal ang CSS. Ipinapakita nito ang purong semantic na istruktura na iyong ginawa! --- ## Hamon ng GitHub Copilot Agent Gamitin ang Agent mode upang tapusin ang sumusunod na hamon: Deskripsyon: Gumawa ng semantic na istruktura ng HTML para sa isang seksyon ng gabay sa pangangalaga ng halaman na maaaring idagdag sa proyekto ng terrarium. Prompt: Gumawa ng semantic na seksyon ng HTML na naglalaman ng pangunahing heading na "Plant Care Guide", tatlong subseksyon na may mga heading na "Watering", "Light Requirements", at "Soil Care", bawat isa ay naglalaman ng talata ng impormasyon sa pangangalaga ng halaman. Gumamit ng tamang semantic na mga tag ng HTML tulad ng <section>, <h2>, <h3>, at <p> upang maayos na maistruktura ang nilalaman. Alamin pa ang tungkol sa agent mode dito. ## Hamon sa Pag-explore ng Kasaysayan ng HTML Pag-aaral Tungkol sa Ebolusyon ng Web Ang HTML ay malaki ang ipinagbago mula nang likhain ni Tim Berners-Lee ang unang web browser sa CERN noong 1990. Ang ilang mas lumang mga tag tulad ng <marquee> ay ngayon ay deprecated dahil hindi ito angkop sa modernong accessibility standards at responsive design principles. Subukan ang Eksperimentong Ito: 1. Pansamantalang balutin ang iyong <h1> na pamagat sa isang <marquee> na tag: <marquee><h1>My Terrarium</h1></marquee> 2. Buksan ang iyong pahina sa browser at obserbahan ang scrolling effect 3. Isipin kung bakit ang tag na ito ay na-deprecate (hint: isipin ang karanasan ng user at accessibility) 4. Alisin ang <marquee> na tag at bumalik sa semantic markup Mga Tanong sa Pagmumuni-muni: - Paano maaaring makaapekto ang isang scrolling na pamagat sa mga user na may kapansanan sa paningin o sensitivity sa paggalaw? - Anong modernong mga teknik sa CSS ang maaaring makamit ang katulad na visual na epekto nang mas accessible? - Bakit mahalaga ang paggamit ng kasalukuyang web standards sa halip na mga deprecated na elemento? Mag-explore pa tungkol sa obsolete at deprecated HTML elements upang maunawaan kung paano umuunlad ang web standards para mapabuti ang karanasan ng user. ## Post-Lecture Quiz Post-lecture quiz ## Review & Self Study Palalimin ang Iyong Kaalaman sa HTML Ang HTML ay naging pundasyon ng web sa loob ng mahigit 30 taon, mula sa simpleng document markup language hanggang sa isang sopistikadong platform para sa paggawa ng mga interactive na aplikasyon. Ang pag-unawa sa ebolusyong ito ay tumutulong sa iyo na pahalagahan ang modernong web standards at gumawa ng mas mahusay na desisyon sa pag-develop. Mga Inirerekomendang Landas sa Pag-aaral: 1. Kasaysayan at Ebolusyon ng HTML - Saliksikin ang timeline mula HTML 1.0 hanggang HTML5 - Tuklasin kung bakit ang ilang mga tag ay na-deprecate (accessibility, mobile-friendliness, maintainability) - Suriin ang mga umuusbong na tampok ng HTML at mga panukala 2. Pag-aaral ng Semantic HTML - Pag-aralan ang kumpletong listahan ng HTML5 semantic elements - Magsanay sa pagtukoy kung kailan gagamitin ang <article>, <section>, <aside>, at <main> - Alamin ang tungkol sa ARIA attributes para sa mas pinahusay na accessibility 3. Modernong Web Development - Mag-explore ng pagbuo ng mga responsive na website sa Microsoft Learn - Unawain kung paano pinagsasama ang HTML sa CSS at JavaScript - Alamin ang tungkol sa mga pinakamahusay na kasanayan sa web performance at SEO Mga Tanong sa Pagmumuni-muni: - Anong mga deprecated na HTML tag ang iyong natuklasan, at bakit ito tinanggal? - Anong mga bagong tampok ng HTML ang iminungkahi para sa mga susunod na bersyon? - Paano nakakatulong ang semantic HTML sa web accessibility at SEO? ### ⚡ Ano ang Magagawa Mo sa Susunod na 5 Minuto - [ ] Buksan ang DevTools (F12) at suriin ang istruktura ng HTML ng iyong paboritong website - [ ] Gumawa ng simpleng HTML file na may mga pangunahing tag: <h1>, <p>, at <img> - [ ] I-validate ang iyong HTML gamit ang W3C HTML Validator online - [ ] Subukang magdagdag ng komento sa iyong HTML gamit ang <!-- comment --> ### 🎯 Ano ang Maaaring Makamit sa Loob ng Isang Oras - [ ] Kumpletuhin ang post-lesson quiz at repasuhin ang mga konsepto ng semantic HTML - [ ] Gumawa ng simpleng webpage tungkol sa iyong sarili gamit ang tamang istruktura ng HTML - [ ] Mag-eksperimento sa iba't ibang antas ng heading at mga tag sa pag-format ng teksto - [ ] Magdagdag ng mga imahe at link upang magsanay sa multimedia integration - [ ] Saliksikin ang mga tampok ng HTML5 na hindi mo pa nasusubukan ### 📅 Ang Iyong Lingguhang Paglalakbay sa HTML - [ ] Kumpletuhin ang proyekto ng terrarium gamit ang semantic markup - [ ] Gumawa ng accessible na webpage gamit ang ARIA labels at roles - [ ] Magsanay sa paggawa ng form gamit ang iba't ibang uri ng input - [ ] Mag-explore ng HTML5 APIs tulad ng localStorage o geolocation - [ ] Pag-aralan ang mga responsive HTML patterns at mobile-first design - [ ] Repasuhin ang HTML code ng ibang mga developer para sa pinakamahusay na kasanayan ### 🌟 Ang Iyong Buwanang Pundasyon sa Web - [ ] Gumawa ng portfolio website na nagpapakita ng iyong mastery sa HTML - [ ] Matutunan ang HTML templating gamit ang framework tulad ng Handlebars - [ ] Mag-ambag sa mga open source na proyekto sa pamamagitan ng pagpapabuti ng dokumentasyon ng HTML - [ ] Masterin ang mga advanced na konsepto ng HTML tulad ng custom elements - [ ] Isama ang HTML sa mga CSS frameworks at JavaScript libraries - [ ] Mag-mentor sa iba na nag-aaral ng mga pangunahing kaalaman sa HTML ## 🎯 Ang Iyong Timeline sa Pag-master ng HTML ### 🛠️ Buod ng Iyong HTML Toolkit Pagkatapos ng araling ito, mayroon ka na: - Istruktura ng Dokumento: Kumpletong pundasyon ng HTML5 na may tamang DOCTYPE - Semantic Markup: Makabuluhang mga tag na nagpapahusay sa accessibility at SEO - Pagsasama ng Imahe: Tamang organisasyon ng file at mga kasanayan sa alt text - Mga Layout Container: Madiskarteng paggamit ng divs na may deskriptibong pangalan ng klase - Kamalayan sa Accessibility: Pag-unawa sa navigation ng screen reader - Modernong Pamantayan: Kasalukuyang mga kasanayan sa HTML5 at kaalaman sa deprecated na tag - Pundasyon ng Proyekto: Matibay na base para sa CSS styling at interactivity ng JavaScript Susunod na Hakbang: Ang istruktura ng iyong HTML ay handa na para sa CSS styling! Ang semantic na pundasyon na iyong ginawa ay magpapadali sa pag-unawa sa susunod na aralin. ## Takdang-Aralin Sanayin ang iyong HTML: Gumawa ng mockup ng blog --- Paunawa: Ang dokumentong ito ay isinalin gamit ang AI translation service na Co-op Translator. Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na pinagmulan. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
Terrarium Project Part 2: Panimula sa CSS
Naalala mo ba kung gaano kasimple ang hitsura ng iyong HTML terrarium? Sa CSS, binabago natin ang simpleng istruktura na iyon upang maging mas kaakit-akit sa paningin. Kung ang HTML ay parang paggawa ng balangkas ng isang bahay, ang CSS naman ang lahat ng nagbibigay ng ganda at ginhawa - ang kulay ng pintura, ang ayos ng mga kasangkapan, ang ilaw, at kung paano magkakaugnay ang mga silid. Isipin kung paano nagsimula ang Palasyo ng Versailles bilang isang simpleng hunting lodge, ngunit sa maingat na pag-aayos at disenyo, naging isa ito sa pinakamagnificenteng gusali sa mundo. Ngayon, babaguhin natin ang iyong terrarium mula sa functional patungo sa polished. Matututo kang magposisyon ng mga elemento nang eksakto, gawing responsive ang mga layout sa iba't ibang laki ng screen, at lumikha ng visual na kaakit-akit na nagpapaganda sa mga website. Sa pagtatapos ng araling ito, makikita mo kung paano ang maingat na CSS styling ay maaaring lubos na mapaganda ang iyong proyekto. Simulan na natin ang pagdaragdag ng estilo sa iyong terrarium. ## Pre-Lecture Quiz Pre-lecture quiz ## Pagsisimula sa CSS Madalas iniisip na ang CSS ay para lang sa "pagpapaganda ng mga bagay," ngunit mas malawak ang layunin nito. Ang CSS ay parang direktor ng pelikula - kontrolado mo hindi lang ang hitsura ng lahat, kundi pati ang galaw, tugon sa interaksyon, at pag-aangkop sa iba't ibang sitwasyon. Ang modernong CSS ay napaka-kakayahan. Maaari kang magsulat ng code na awtomatikong ina-adjust ang mga layout para sa mga telepono, tablet, at desktop computer. Maaari kang lumikha ng makinis na animasyon na umaakit sa atensyon ng mga user kung kinakailangan. Ang resulta ay maaaring maging kahanga-hanga kapag ang lahat ay nagtutulungan. Narito ang mga layunin natin sa araling ito: - Lumikha ng kumpletong visual na disenyo para sa iyong terrarium gamit ang modernong mga teknik sa CSS - Tuklasin ang mga pangunahing konsepto tulad ng cascade, inheritance, at CSS selectors - Ipatupad ang mga responsive na estratehiya sa pagposisyon at layout - Bumuo ng terrarium container gamit ang CSS shapes at styling ### Paunang Kaalaman Dapat ay natapos mo na ang HTML na istruktura para sa iyong terrarium mula sa nakaraang aralin at handa na itong i-style. ### Pag-set Up ng Iyong CSS File Bago tayo magsimulang mag-style, kailangan nating ikonekta ang CSS sa ating HTML. Ang koneksyon na ito ang nagsasabi sa browser kung saan hahanapin ang mga tagubilin sa pag-style para sa ating terrarium. Sa iyong terrarium folder, gumawa ng bagong file na tinatawag na style.css, pagkatapos ay i-link ito sa <head> section ng iyong HTML document: Narito ang ginagawa ng code na ito: - Lumilikha ng koneksyon sa pagitan ng iyong HTML at CSS files - Sinasabi sa browser na i-load at i-apply ang mga style mula sa style.css - Gumagamit ng rel="stylesheet" na attribute upang tukuyin na ito ay isang CSS file - Tinutukoy ang file path gamit ang href="./style.css" ## Pag-unawa sa CSS Cascade Naisip mo na ba kung bakit tinawag na "Cascading" Style Sheets ang CSS? Ang mga style ay bumababa tulad ng talon, at minsan nagkakaroon ng salungatan sa isa't isa. Isipin kung paano gumagana ang istruktura ng utos sa militar - maaaring sabihin ng pangkalahatang utos na "lahat ng tropa ay magsuot ng berde," ngunit ang tiyak na utos sa iyong yunit ay maaaring magsabi na "magsuot ng dress blues para sa seremonya." Ang mas tiyak na utos ang masusunod. Ang CSS ay sumusunod sa katulad na lohika, at ang pag-unawa sa hierarchy na ito ay nagpapadali sa pag-debug. ### Pagsubok sa Cascade Priority Tingnan natin ang cascade sa aksyon sa pamamagitan ng paglikha ng style conflict. Una, magdagdag ng inline style sa iyong <h1> tag: Ano ang ginagawa ng code na ito: - Nag-aapply ng red na kulay direkta sa <h1> element gamit ang inline styling - Gumagamit ng style attribute upang mag-embed ng CSS direkta sa HTML - Lumilikha ng pinakamataas na priority na style rule para sa partikular na element na ito Susunod, idagdag ang rule na ito sa iyong style.css file: Sa itaas, ginawa natin: - Nag-defina ng CSS rule na target ang lahat ng <h1> elements - Nag-set ng text color sa blue gamit ang external stylesheet - Lumilikha ng mas mababang priority rule kumpara sa inline styles ✅ Knowledge Check: Anong kulay ang makikita sa iyong web app? Bakit iyon ang nanalo? Makakaisip ka ba ng mga sitwasyon kung saan nais mong i-override ang mga style? ## CSS Inheritance sa Aksyon Ang CSS inheritance ay gumagana tulad ng genetics - ang mga elemento ay nagmamana ng ilang properties mula sa kanilang parent elements. Kung mag-set ka ng font family sa body element, lahat ng text sa loob ay awtomatikong gagamit ng parehong font. Parang kung paano ang natatanging jawline ng pamilya Habsburg ay lumitaw sa iba't ibang henerasyon nang hindi tinukoy para sa bawat indibidwal. Gayunpaman, hindi lahat ay namamana. Ang mga text styles tulad ng fonts at colors ay namamana, ngunit ang mga layout properties tulad ng margins at borders ay hindi. Parang ang mga anak ay maaaring magmana ng pisikal na katangian ngunit hindi ang fashion choices ng kanilang mga magulang. ### Pagmamasid sa Font Inheritance Tingnan natin ang inheritance sa aksyon sa pamamagitan ng pag-set ng font family sa <body> element: Pagpapaliwanag sa nangyayari dito: - Nag-set ng font family para sa buong page sa pamamagitan ng pag-target sa <body> element - Gumagamit ng font stack na may fallback options para sa mas mahusay na browser compatibility - Nag-aapply ng modernong system fonts na maganda ang hitsura sa iba't ibang operating systems - Tinitiyak na lahat ng child elements ay magmamana ng font maliban kung partikular na na-override Buksan ang developer tools ng iyong browser (F12), pumunta sa Elements tab, at i-inspect ang iyong <h1> element. Makikita mo na namamana nito ang font family mula sa body: ✅ Experiment Time: Subukang mag-set ng iba pang inheritable properties sa <body> tulad ng color, line-height, o text-align. Ano ang nangyayari sa iyong heading at iba pang elemento? ### 🔄 Pedagogical Check-in Pag-unawa sa CSS Foundation: Bago lumipat sa selectors, tiyakin na kaya mong: - ✅ Ipaliwanag ang pagkakaiba ng cascade at inheritance - ✅ Hulaan kung aling style ang mananalo sa specificity conflict - ✅ Tukuyin kung aling properties ang namamana mula sa parent elements - ✅ Ikonekta ang CSS files sa HTML nang maayos Quick Test: Kung mayroon kang mga style na ito, anong kulay ang magiging <h1> sa loob ng <div class="special">? Sagot: Pula (element selector na direktang nagta-target sa h1) ## Pag-master ng CSS Selectors Ang CSS selectors ang paraan mo para i-target ang partikular na mga elemento para sa styling. Gumagana ito tulad ng pagbibigay ng eksaktong direksyon - sa halip na sabihing "ang bahay," maaari mong sabihin "ang asul na bahay na may pulang pinto sa Maple Street." Nagbibigay ang CSS ng iba't ibang paraan para maging tiyak, at ang pagpili ng tamang selector ay parang pagpili ng tamang tool para sa gawain. Minsan kailangan mong i-style ang bawat pinto sa kapitbahayan, at minsan isang partikular na pinto lang. ### Element Selectors (Tags) Ang element selectors ay nagta-target ng HTML elements sa pamamagitan ng kanilang tag name. Perpekto ang mga ito para sa pag-set ng base styles na malawak na ina-apply sa iyong page: Pag-unawa sa mga style na ito: - Nag-set ng consistent na typography sa buong page gamit ang body selector - Nag-aalis ng default na browser margins at padding para sa mas mahusay na kontrol - Nag-style ng lahat ng heading elements gamit ang kulay, alignment, at spacing - Gumagamit ng rem units para sa scalable, accessible na font sizing Habang ang element selectors ay mahusay para sa pangkalahatang styling, kakailanganin mo ng mas tiyak na selectors para i-style ang mga indibidwal na bahagi tulad ng mga halaman sa iyong terrarium. ### ID Selectors para sa Natatanging Mga Elemento Ang ID selectors ay gumagamit ng # symbol at nagta-target ng mga elemento na may partikular na id attributes. Dahil ang IDs ay dapat na natatangi sa isang page, perpekto ang mga ito para sa pag-style ng mga indibidwal, espesyal na elemento tulad ng ating left at right plant containers. Gumawa tayo ng styling para sa mga side containers ng terrarium kung saan maninirahan ang mga halaman: Narito ang nagagawa ng code na ito: - Nagpo-posisyon ng mga container sa dulong kaliwa at kanan gamit ang absolute positioning - Gumagamit ng vh (viewport height) units para sa responsive na height na umaangkop sa laki ng screen - Nag-aapply ng box-sizing: border-box upang maisama ang padding sa kabuuang width - Nag-aalis ng hindi kinakailangang px units mula sa zero values para sa mas malinis na code - Nag-set ng subtle na background color na mas magaan sa mata kaysa sa matinding gray ✅ Code Quality Challenge: Pansinin kung paano nilalabag ng CSS na ito ang prinsipyo ng DRY (Don't Repeat Yourself). Maaari mo bang i-refactor ito gamit ang parehong ID at class? Pinahusay na approach: ### Class Selectors para sa Reusable Styles Ang class selectors ay gumagamit ng . symbol at perpekto kapag nais mong i-apply ang parehong styles sa maraming elemento. Hindi tulad ng IDs, ang classes ay maaaring gamitin nang paulit-ulit sa iyong HTML, na ginagawa itong ideal para sa consistent na styling patterns. Sa ating terrarium, bawat halaman ay nangangailangan ng parehong styling ngunit kailangan din ng indibidwal na posisyon. Gagamit tayo ng kombinasyon ng classes para sa shared styles at IDs para sa unique na posisyon. Narito ang HTML structure para sa bawat halaman: Mga pangunahing elemento na ipinaliwanag: - Gumagamit ng class="plant-holder" para sa consistent na container styling sa lahat ng halaman - Nag-aapply ng class="plant" para sa shared image styling at behavior - Naglalaman ng unique na id="plant1" para sa indibidwal na posisyon at JavaScript interaction - Nagbibigay ng descriptive na alt text para sa accessibility ng screen reader Ngayon, idagdag ang mga style na ito sa iyong style.css file: Pagpapaliwanag sa mga style na ito: - Lumilikha ng relative positioning para sa plant holder upang magtatag ng positioning context - Nag-set ng bawat plant holder sa 13% height, tinitiyak na lahat ng halaman ay magkasya nang patayo nang walang scrolling - Nag-shift ng holders bahagyang kaliwa upang mas ma-center ang mga halaman sa kanilang containers - Nagpapahintulot sa mga halaman na mag-scale nang responsive gamit ang max-width at max-height properties - Gumagamit ng z-index upang i-layer ang mga halaman sa ibabaw ng ibang elemento sa terrarium - Nagdadagdag ng subtle na hover effect gamit ang CSS transitions para sa mas mahusay na user interaction ✅ Critical Thinking: Bakit kailangan natin ang parehong .plant-holder at .plant selectors? Ano ang mangyayari kung subukan nating gumamit ng isa lang? ## Pag-unawa sa CSS Positioning Ang CSS positioning ay parang pagiging stage director ng isang play - ikaw ang nagdidirekta kung saan tatayo ang bawat aktor at kung paano sila gagalaw sa entablado. Ang ilang aktor ay sumusunod sa standard formation, habang ang iba ay nangangailangan ng partikular na posisyon para sa dramatic effect. Kapag naintindihan mo ang positioning, maraming layout challenges ang nagiging mas madali. Kailangan mo ba ng navigation bar na nananatili sa itaas habang nag-scroll ang user? Ang positioning ang bahala diyan. Gusto mo ba ng tooltip na lumilitaw sa partikular na lokasyon? Positioning din ang sagot. ### Ang Limang Position Values ### Positioning sa Ating Terrarium Ang terrarium natin ay gumagamit ng strategic na kombinasyon ng positioning types upang makamit ang nais na layout: Pag-unawa sa positioning strategy: - Absolute containers ay tinanggal sa normal na document flow at naka-pin sa mga gilid ng screen - Relative plant holders ay lumilikha ng positioning context habang nananatili sa document flow - Absolute plants ay maaaring i-posisyon nang eksakto sa loob ng kanilang relative containers - Ang kombinasyong ito ay nagpapahintulot sa mga halaman na mag-stack nang patayo habang maaaring i-posisyon nang indibidwal ✅ Experiment Time: Subukang baguhin ang positioning values at obserbahan ang resulta: - Ano ang mangyayari kung baguhin mo ang .container mula absolute patungong relative? - Paano nagbabago ang layout kung ang .plant-holder ay gagamit ng absolute sa halip na relative? - Ano ang mangyayari kapag binago ang .plant sa relative positioning? ### 🔄 Pedagogical Check-in Mastery sa CSS Positioning: Huminto sandali upang suriin ang iyong kaalaman: - ✅ Kaya mo bang ipaliwanag kung bakit kailangan ng absolute positioning ang mga halaman para sa drag-and-drop? - ✅ Nauunawaan mo ba kung paano ang mga relative containers ay lumilikha ng positioning context? - ✅ Bakit gumagamit ng absolute positioning ang mga side containers? - ✅ Ano ang mangyayari kung aalisin mo ang mga deklarasyon ng position? Koneksyon sa Tunay na Mundo: Isipin kung paano ginagaya ng CSS positioning ang layout sa totoong buhay: - Static: Mga libro sa istante (natural na pagkakaayos) - Relative: Paggalaw ng libro nang bahagya ngunit nananatili sa lugar nito - Absolute: Paglalagay ng bookmark sa eksaktong pahina - Fixed: Isang sticky note na nananatiling nakikita habang nagbabasa ng mga pahina ## Pagbuo ng Terrarium gamit ang CSS Ngayon, gagawa tayo ng glass jar gamit lamang ang CSS - walang mga imahe o graphic software. Ang paggawa ng realistic-looking glass, shadows, at depth effects gamit ang positioning at transparency ay nagpapakita ng kakayahan ng CSS sa visual design. Ang teknik na ito ay kahalintulad ng paraan ng mga arkitekto sa Bauhaus movement na gumamit ng simpleng geometric forms upang lumikha ng maganda at komplikadong istruktura. Kapag naintindihan mo ang mga prinsipyong ito, makikilala mo ang mga teknik ng CSS sa likod ng maraming disenyo ng web. ### Paglikha ng Mga Komponent ng Glass Jar Gawin natin ang terrarium jar nang paisa-isa. Ang bawat bahagi ay gumagamit ng absolute positioning at percentage-based sizing para sa responsive design: Pag-unawa sa konstruksyon ng terrarium: - Gumagamit ng percentage-based dimensions para sa responsive scaling sa lahat ng screen sizes - Nagpo-posisyon ng mga elemento nang absolute upang ma-stack at ma-align nang eksakto - Nag-aaplay ng iba't ibang opacity values upang lumikha ng glass transparency effect - Nagpapatupad ng z-index layering upang ang mga halaman ay lumitaw sa loob ng jar - Nagdadagdag ng subtle box-shadow at refined border-radius para sa mas realistic na hitsura ### Responsive Design gamit ang Percentages Pansinin kung paano lahat ng dimensions ay gumagamit ng percentages sa halip na fixed pixel values: Bakit ito mahalaga: - Tinitiyak ang proportional scaling ng terrarium sa anumang screen size - Pinapanatili ang visual relationships sa pagitan ng mga bahagi ng jar - Nagbibigay ng consistent na karanasan mula sa mobile phones hanggang sa malalaking desktop monitors - Pinapayagan ang disenyo na mag-adapt nang hindi nasisira ang visual layout ### CSS Units in Action Gumagamit tayo ng rem units para sa border-radius, na nag-scale batay sa root font size. Ito ay lumilikha ng mas accessible na disenyo na iginagalang ang font preferences ng user. Alamin pa ang tungkol sa CSS relative units sa opisyal na spesipikasyon. ✅ Visual Experimentation: Subukang baguhin ang mga value na ito at obserbahan ang epekto: - Baguhin ang jar opacity mula 0.5 hanggang 0.8 – paano nito naaapektuhan ang hitsura ng glass? - Ayusin ang kulay ng lupa mula #3a241d hanggang #8B4513 – anong visual na epekto ang nangyayari? - Baguhin ang z-index ng lupa sa 2 – ano ang nangyayari sa layering? ### 🔄 Pedagogical Check-in Pag-unawa sa Visual Design ng CSS: Kumpirmahin ang iyong kaalaman sa visual CSS: - ✅ Paano lumilikha ng responsive design ang percentage-based dimensions? - ✅ Bakit lumilikha ng transparency effect ang opacity? - ✅ Anong papel ang ginagampanan ng z-index sa layering ng mga elemento? - ✅ Paano lumilikha ng jar shape ang border-radius values? Prinsipyo ng Disenyo: Pansinin kung paano tayo bumubuo ng komplikadong visuals mula sa simpleng hugis: 1. Mga Rectangles → Mga Rounded Rectangles → Mga Komponent ng Jar 2. Flat Colors → Opacity → Glass Effect 3. Indibidwal na Elemento → Layered Composition → 3D Appearance --- ## Hamon ng GitHub Copilot Agent 🚀 Gamitin ang Agent mode upang tapusin ang sumusunod na hamon: Deskripsyon: Gumawa ng CSS animation na nagpapagalaw sa mga halaman sa terrarium nang banayad, na parang hinahanginan. Ito ay makakatulong sa iyo na magpraktis ng CSS animations, transforms, at keyframes habang pinapaganda ang visual appeal ng terrarium. Prompt: Magdagdag ng CSS keyframe animations upang ang mga halaman sa terrarium ay gumalaw nang banayad mula kaliwa hanggang kanan. Gumawa ng swaying animation na bahagyang nagro-rotate sa bawat halaman (2-3 degrees) pakaliwa at pakanan na may duration na 3-4 seconds, at i-apply ito sa .plant class. Siguraduhing ang animation ay mag-loop infinitely at may easing function para sa natural na galaw. Alamin pa ang tungkol sa agent mode dito. ## 🚀 Hamon: Pagdaragdag ng Glass Reflections Handa ka na bang pagandahin ang iyong terrarium gamit ang realistic glass reflections? Ang teknik na ito ay magdadagdag ng depth at realism sa disenyo. Gagawa ka ng subtle highlights na ginagaya kung paano nagre-reflect ang ilaw sa glass surfaces. Ang approach na ito ay kahalintulad ng paraan ng mga pintor noong Renaissance tulad ni Jan van Eyck na gumamit ng ilaw at reflection upang gawing three-dimensional ang painted glass. Narito ang layunin mo: Ang iyong hamon: - Gumawa ng subtle white o light-colored oval shapes para sa glass reflections - I-posisyon ang mga ito nang maayos sa kaliwang bahagi ng jar - Mag-apply ng tamang opacity at blur effects para sa realistic na light reflection - Gumamit ng border-radius upang lumikha ng organic, bubble-like shapes - Mag-eksperimento gamit ang gradients o box-shadows para sa mas pinong realism ## Post-Lecture Quiz Post-lecture quiz ## Palawakin ang Iyong Kaalaman sa CSS Ang CSS ay maaaring mukhang komplikado sa simula, ngunit ang pag-unawa sa mga pangunahing konsepto ay nagbibigay ng matibay na pundasyon para sa mas advanced na teknik. Ang iyong susunod na mga lugar ng pag-aaral sa CSS: - Flexbox - nagpapadali sa alignment at distribution ng mga elemento - CSS Grid - nagbibigay ng makapangyarihang tools para sa paggawa ng komplikadong layouts - CSS Variables - binabawasan ang pag-uulit at pinapabuti ang maintainability - Responsive design - tinitiyak na gumagana nang maayos ang mga site sa iba't ibang screen sizes ### Mga Interactive na Learning Resources Pagpraktisan ang mga konseptong ito gamit ang mga engaging, hands-on games: - 🐸 Flexbox Froggy - Masterin ang Flexbox sa pamamagitan ng masayang hamon - 🌱 Grid Garden - Matutunan ang CSS Grid sa pamamagitan ng pagtatanim ng virtual na carrots - 🎯 CSS Battle - Subukan ang iyong kakayahan sa CSS gamit ang coding challenges ### Karagdagang Pag-aaral Para sa komprehensibong pundasyon sa CSS, kumpletuhin ang Microsoft Learn module na ito: Style your HTML app with CSS ### ⚡ Ano ang Pwede Mong Gawin sa Susunod na 5 Minuto - [ ] Buksan ang DevTools at inspeksyunin ang CSS styles sa anumang website gamit ang Elements panel - [ ] Gumawa ng simpleng CSS file at i-link ito sa isang HTML page - [ ] Subukang baguhin ang mga kulay gamit ang iba't ibang paraan: hex, RGB, at named colors - [ ] Pagpraktisan ang box model sa pamamagitan ng pagdaragdag ng padding at margin sa isang div ### 🎯 Ano ang Pwede Mong Makamit sa Loob ng Isang Oras - [ ] Kumpletuhin ang post-lesson quiz at repasuhin ang mga pundasyon ng CSS - [ ] I-style ang iyong HTML page gamit ang fonts, colors, at spacing - [ ] Gumawa ng simpleng layout gamit ang flexbox o grid - [ ] Mag-eksperimento sa CSS transitions para sa smooth effects - [ ] Pagpraktisan ang responsive design gamit ang media queries ### 📅 Ang Iyong Lingguhang CSS Adventure - [ ] Kumpletuhin ang terrarium styling assignment na may creative flair - [ ] Masterin ang CSS Grid sa pamamagitan ng paggawa ng photo gallery layout - [ ] Matutunan ang CSS animations upang magbigay-buhay sa iyong mga disenyo - [ ] Tuklasin ang CSS preprocessors tulad ng Sass o Less - [ ] Pag-aralan ang mga prinsipyo ng disenyo at i-apply ang mga ito sa iyong CSS - [ ] Suriin at gayahin ang mga kawili-wiling disenyo na makikita mo online ### 🌟 Ang Iyong Buwanang Paglalakbay sa Pagiging Eksperto sa Disenyo - [ ] Gumawa ng kumpletong responsive website design system - [ ] Matutunan ang CSS-in-JS o utility-first frameworks tulad ng Tailwind - [ ] Mag-ambag sa mga open source projects gamit ang CSS improvements - [ ] Masterin ang advanced na mga konsepto ng CSS tulad ng CSS custom properties at containment - [ ] Gumawa ng reusable component libraries gamit ang modular CSS - [ ] Magturo sa iba na nag-aaral ng CSS at magbahagi ng kaalaman sa disenyo ## 🎯 Ang Iyong CSS Mastery Timeline ### 🛠️ Buod ng Iyong CSS Toolkit Pagkatapos ng lesson na ito, mayroon ka na: - Pag-unawa sa Cascade: Paano nagmamana at nag-o-override ang mga style - Mastery sa Selector: Tumpak na pag-target gamit ang elements, classes, at IDs - Kakayahan sa Positioning: Estratehikong paglalagay at pag-layer ng mga elemento - Visual Design: Paglikha ng glass effects, shadows, at transparency - Responsive Techniques: Percentage-based layouts na nag-a-adapt sa anumang screen - Organisasyon ng Code: Malinis, maayos na istruktura ng CSS - Modern Practices: Paggamit ng relative units at accessible design patterns Susunod na Hakbang: Ang iyong terrarium ay mayroon nang istruktura (HTML) at estilo (CSS). Ang huling lesson ay magdadagdag ng interactivity gamit ang JavaScript! ## Assignment CSS Refactoring --- Paunawa: Ang dokumentong ito ay isinalin gamit ang AI translation service na Co-op Translator. Bagamat sinisikap naming maging tumpak, mangyaring tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na dulot ng paggamit ng pagsasaling ito.
Terrarium Projesi Bölüm 1: HTML'e Giriş
HTML, yani HyperText Markup Language, ziyaret ettiğiniz her web sitesinin temelini oluşturur. HTML'i web sayfalarına yapı kazandıran bir iskelet olarak düşünebilirsiniz – içeriklerin nereye gideceğini, nasıl organize edileceğini ve her bir parçanın neyi temsil ettiğini tanımlar. CSS daha sonra HTML'inizi renkler ve düzenlerle "süsler" ve JavaScript interaktivite ile "canlandırır", ancak HTML her şeyin mümkün olmasını sağlayan temel yapıyı sunar. Bu derste, sanal bir teraryum arayüzü için HTML yapısını oluşturacaksınız. Bu uygulamalı proje, temel HTML kavramlarını öğretirken görsel olarak ilgi çekici bir şey inşa etmenizi sağlayacak. İçeriği semantik öğelerle nasıl organize edeceğinizi, resimlerle nasıl çalışacağınızı ve interaktif bir web uygulaması için temel oluşturmayı öğreneceksiniz. Dersin sonunda, bitki resimlerini düzenli sütunlar halinde gösteren çalışan bir HTML sayfasına sahip olacaksınız ve bir sonraki derste stil eklemeye hazır olacaksınız. İlk başta basit görünüyorsa endişelenmeyin – CSS görsel cilayı eklemeden önce HTML tam olarak böyle görünmelidir. ## Ders Öncesi Test Ders öncesi test ## Projenizi Kurma HTML koduna dalmadan önce, teraryum projeniz için uygun bir çalışma alanı oluşturalım. Başlangıçtan itibaren düzenli bir dosya yapısı oluşturmak, web geliştirme yolculuğunuz boyunca size iyi bir alışkanlık kazandıracaktır. ### Görev: Proje Yapınızı Oluşturun Teraryum projeniz için özel bir klasör oluşturacak ve ilk HTML dosyanızı ekleyeceksiniz. İşte kullanabileceğiniz iki yaklaşım: Seçenek 1: Visual Studio Code Kullanarak 1. Visual Studio Code'u açın 2. "File" → "Open Folder" seçeneğine tıklayın veya Ctrl+K, Ctrl+O (Windows/Linux) ya da Cmd+K, Cmd+O (Mac) kısayolunu kullanın 3. terrarium adında yeni bir klasör oluşturun ve seçin 4. Explorer panelinde "New File" simgesine tıklayın 5. Dosyanıza index.html adını verin Seçenek 2: Terminal Komutlarını Kullanarak Bu komutların yaptığı şeyler: - Projeniz için terrarium adında yeni bir dizin oluşturur - Teraryum dizinine geçiş yapar - Boş bir index.html dosyası oluşturur - Düzenleme için dosyayı Visual Studio Code'da açar ## HTML Belge Yapısını Anlama Her HTML belgesi, tarayıcıların doğru bir şekilde anlaması ve görüntülemesi için belirli bir yapıyı takip eder. Bu yapıyı resmi bir mektup gibi düşünün – belirli bir sırada gerekli öğeler vardır ve bu öğeler alıcının (bu durumda tarayıcı) içeriği düzgün bir şekilde işlemesine yardımcı olur. Her HTML belgesinin ihtiyaç duyduğu temel yapıyı ekleyerek başlayalım. ### DOCTYPE Bildirimi ve Kök Eleman Her HTML dosyasının ilk iki satırı, belgenin tarayıcıya "tanıtımı" olarak hizmet eder: Bu kodun ne yaptığını anlamak: - Belge türünü <!DOCTYPE html> kullanarak HTML5 olarak ilan eder - Tüm sayfa içeriğini barındıracak kök <html> öğesini oluşturur - Modern web standartlarını doğru tarayıcı işleme için belirler - Farklı tarayıcılar ve cihazlar arasında tutarlı bir görüntüleme sağlar ### 🔄 Pedagojik Kontrol Dur ve Düşün: Devam etmeden önce şunları anladığınızdan emin olun: - ✅ Her HTML belgesinin neden bir DOCTYPE bildirimine ihtiyaç duyduğu - ✅ <html> kök öğesinin ne içerdiği - ✅ Bu yapının tarayıcıların sayfaları doğru bir şekilde işlemesine nasıl yardımcı olduğu Hızlı Kendini Test Et: "Standartlara uygun işleme"nin ne anlama geldiğini kendi kelimelerinizle açıklayabilir misiniz? ## Temel Belge Meta Verilerini Eklemek Bir HTML belgesinin <head> bölümü, tarayıcıların ve arama motorlarının ihtiyaç duyduğu ancak ziyaretçilerin doğrudan sayfada görmediği önemli bilgileri içerir. Bunu, web sayfanızın düzgün çalışmasını ve farklı cihazlar ve platformlar arasında doğru şekilde görünmesini sağlayan "sahne arkası" bilgileri olarak düşünün. Bu meta veriler, tarayıcılara sayfanızı nasıl görüntüleyeceğini, hangi karakter kodlamasını kullanacağını ve farklı ekran boyutlarını nasıl işleyeceğini söyler – profesyonel, erişilebilir web sayfaları oluşturmak için gerekli olan her şey. ### Görev: Belge Başlığını Ekleyin Açılış ve kapanış <html> etiketlerinizin arasına bu <head> bölümünü ekleyin: Her öğenin ne yaptığını açıklamak: - Tarayıcı sekmelerinde ve arama sonuçlarında görünen sayfa başlığını ayarlar - Dünya çapında doğru metin görüntüleme için UTF-8 karakter kodlamasını belirtir - Modern Internet Explorer sürümleriyle uyumluluğu sağlar - Görüntüleme içeriğini doğal boyutta göstermek için başlangıç yakınlaştırma seviyesini ayarlar ## Belge Gövdesini Oluşturmak Bir HTML belgesinin <body> öğesi, web sayfanızın tüm görünen içeriğini – kullanıcıların göreceği ve etkileşimde bulunacağı her şeyi – içerir. <head> bölümü tarayıcıya talimatlar verirken, <body> bölümü gerçek içeriği içerir: metin, resimler, düğmeler ve kullanıcı arayüzünüzü oluşturan diğer öğeler. Haydi gövde yapısını ekleyelim ve HTML etiketlerinin anlamlı içerik oluşturmak için nasıl birlikte çalıştığını anlayalım. ### HTML Etiket Yapısını Anlama HTML, öğeleri tanımlamak için eşleştirilmiş etiketler kullanır. Çoğu etiket, <p> gibi bir açılış etiketi ve </p> gibi bir kapanış etiketi içerir ve arasında içerik bulunur: <p>Merhaba, dünya!</p>. Bu, "Merhaba, dünya!" metnini içeren bir paragraf öğesi oluşturur. ### Görev: Gövde Elemanını Ekleyin HTML dosyanızı <body> öğesini içerecek şekilde güncelleyin: Bu tam yapı ne sağlar: - Temel HTML5 belge çerçevesini oluşturur - Doğru tarayıcı işleme için gerekli meta verileri içerir - Görünen içeriğiniz için boş bir gövde oluşturur - Modern web geliştirme en iyi uygulamalarını takip eder Artık teraryumunuzun görünen öğelerini eklemeye hazırsınız. Farklı içerik bölümlerini organize etmek için <div> öğelerini konteyner olarak kullanacağız ve bitki resimlerini göstermek için <img> öğelerini ekleyeceğiz. ### Resimlerle ve Düzen Konteynerleriyle Çalışmak Resimler HTML'de özeldir çünkü "kendini kapatan" etiketler kullanırlar. <p></p> gibi içerik etrafında sarılan öğelerden farklı olarak, <img> etiketi, src gibi dosya yolu ve alt gibi erişilebilirlik bilgilerini içeren tüm bilgileri kendi içinde barındırır. Resimleri HTML'ye eklemeden önce, proje dosyalarınızı düzgün bir şekilde organize etmeniz gerekir. Bunun için bir images klasörü oluşturup bitki grafiklerini ekleyeceksiniz. Önce resimlerinizi ayarlayın: 1. Teraryum proje klasörünüzün içinde images adında bir klasör oluşturun 2. çözüm klasöründen bitki resimlerini indirin (toplamda 14 bitki resmi) 3. Tüm bitki resimlerini yeni images klasörünüze kopyalayın ### Görev: Bitki Görüntüleme Düzeni Oluşturun Şimdi <body></body> etiketlerinizin arasına iki sütunda düzenlenmiş bitki resimlerini ekleyin: Adım adım bu kodda neler oluyor: - Tüm içeriği barındıracak id="page" ile bir ana sayfa konteyneri oluşturur - İki sütun konteyneri oluşturur: left-container ve right-container - Sol sütunda 7 bitki ve sağ sütunda 7 bitki düzenler - Her bitki resmini bireysel konumlandırma için bir plant-holder div içine sarar - Bir sonraki derste CSS stil uygulaması için tutarlı sınıf adları kullanır - Her bitki resmine JavaScript etkileşimi için benzersiz kimlikler atar - Resim klasörüne işaret eden doğru dosya yollarını içerir ### 🔄 Pedagojik Kontrol Yapı Anlayışı: HTML yapınızı gözden geçirmek için bir an durun: - ✅ Düzeninizdeki ana konteynerleri tanımlayabilir misiniz? - ✅ Her resmin neden benzersiz bir kimliğe sahip olduğunu anlıyor musunuz? - ✅ plant-holder divlerinin amacını nasıl tanımlarsınız? Görsel İnceleme: HTML dosyanızı bir tarayıcıda açın. Şunları görmelisiniz: - Basit bir bitki resimleri listesi - İki sütunda düzenlenmiş resimler - Basit, stil verilmemiş bir düzen Unutmayın: Bu sade görünüm, CSS stil eklenmeden önce HTML'in tam olarak nasıl görünmesi gerektiğidir! Bu işaretleme eklendiğinde, bitkiler ekranda görünecek, ancak henüz cilalı görünmeyecek – bunun için bir sonraki derste CSS kullanılacak! Şimdilik, içeriğinizi düzgün bir şekilde organize eden ve erişilebilirlik en iyi uygulamalarını takip eden sağlam bir HTML temeline sahipsiniz. ## Erişilebilirlik için Semantik HTML Kullanımı Semantik HTML, HTML öğelerini yalnızca görünümlerine göre değil, anlamlarına ve amaçlarına göre seçmek anlamına gelir. Semantik işaretleme kullandığınızda, içeriğinizin yapısını ve anlamını tarayıcılara, arama motorlarına ve ekran okuyucular gibi yardımcı teknolojilere iletiyorsunuz. Bu yaklaşım, engelli kullanıcılar için web sitelerinizi daha erişilebilir hale getirir ve arama motorlarının içeriğinizi daha iyi anlamasına yardımcı olur. Modern web geliştirme için temel bir prensiptir ve herkes için daha iyi deneyimler yaratır. ### Semantik Bir Sayfa Başlığı Eklemek Teraryum sayfanıza uygun bir başlık ekleyelim. Açılış <body> etiketinizin hemen ardından şu satırı ekleyin: Semantik işaretlemenin önemi: - Ekran okuyucuların sayfa yapısını gezinmesine ve anlamasına yardımcı olur - Arama motoru optimizasyonunu (SEO) içerik hiyerarşisini netleştirerek geliştirir - Görme engelli veya bilişsel farklılıkları olan kullanıcılar için erişilebilirliği artırır - Tüm cihazlar ve platformlar için daha iyi kullanıcı deneyimleri oluşturur - Profesyonel geliştirme için web standartlarını ve en iyi uygulamaları takip eder Semantik ve semantik olmayan seçim örnekleri: ## Teraryum Konteynerini Oluşturmak Şimdi teraryumun kendisi için HTML yapısını ekleyelim – bitkilerin sonunda yerleştirileceği cam konteyner. Bu bölüm önemli bir kavramı gösteriyor: HTML yapı sağlar, ancak CSS stili olmadan bu öğeler henüz görünür olmayabilir. Teraryum işaretlemesi, bir sonraki derste CSS stilini sezgisel ve sürdürülebilir hale getirecek açıklayıcı sınıf adları kullanır. ### Görev: Teraryum Yapısını Ekleyin Son </div> etiketinin üzerine (sayfa konteynerinin kapanış etiketinden önce) şu işaretlemeyi ekleyin: Bu teraryum yapısını anlamak: - Ana teraryum konteynerini benzersiz bir kimlikle stil vermek için oluşturur - Tanımlar her görsel bileşen için ayrı öğeler (üst, duvarlar, toprak, alt) - İçerir cam yansıma efektleri için iç içe öğeler (parlak öğeler) - Kullanır her öğenin amacını açıkça belirten açıklayıcı sınıf adları - Hazırlar cam teraryum görünümünü oluşturacak CSS stilleri için yapıyı ### 🔄 Pedagojik Kontrol Noktası HTML Yapısı Uzmanlığı: İlerlemeye geçmeden önce şunları yapabildiğinizden emin olun: - ✅ HTML yapısı ile görsel görünüm arasındaki farkı açıklayın - ✅ Anlamsal ve anlamsal olmayan HTML öğelerini ayırt edin - ✅ Doğru işaretlemenin erişilebilirliğe nasıl fayda sağladığını açıklayın - ✅ Tam belge ağacı yapısını tanıyın Anlamanızı Test Edin: HTML dosyanızı bir tarayıcıda JavaScript devre dışı bırakılmış ve CSS kaldırılmış şekilde açmayı deneyin. Bu, oluşturduğunuz saf anlamsal yapıyı gösterir! --- ## GitHub Copilot Agent Challenge Agent modunu kullanarak aşağıdaki meydan okumayı tamamlayın: Açıklama: Teraryum projesine eklenebilecek bir bitki bakım rehberi bölümü için anlamsal bir HTML yapısı oluşturun. İstek: "Bitki Bakım Rehberi" ana başlığını, "Sulama", "Işık Gereksinimleri" ve "Toprak Bakımı" başlıklı üç alt bölümü içeren, her birinde bitki bakım bilgilerini içeren bir paragraf bulunan anlamsal bir HTML bölümü oluşturun. İçeriği uygun şekilde yapılandırmak için <section>, <h2>, <h3> ve <p> gibi doğru anlamsal HTML etiketlerini kullanın. Agent moduyla ilgili daha fazla bilgi edinin buradan. ## HTML Tarihi Meydan Okuması Web Evrimi Hakkında Öğrenme HTML, Tim Berners-Lee'nin 1990 yılında CERN'de ilk web tarayıcısını oluşturmasından bu yana önemli ölçüde gelişti. <marquee> gibi bazı eski etiketler artık modern erişilebilirlik standartları ve duyarlı tasarım ilkeleriyle uyumlu olmadıkları için kullanımdan kaldırıldı. Bu Deneyi Deneyin: 1. <h1> başlığınızı geçici olarak bir <marquee> etiketiyle sarın: <marquee><h1>Benim Teraryumum</h1></marquee> 2. Sayfanızı bir tarayıcıda açın ve kaydırma efektini gözlemleyin 3. Bu etiketin neden kullanımdan kaldırıldığını düşünün (ipucu: kullanıcı deneyimi ve erişilebilirlik hakkında düşünün) 4. <marquee> etiketini kaldırın ve anlamsal işaretlemeye geri dönün Düşünme Soruları: - Kaydırma başlığı görme engelli veya hareket hassasiyeti olan kullanıcıları nasıl etkileyebilir? - Benzer görsel efektleri daha erişilebilir bir şekilde elde etmek için hangi modern CSS teknikleri kullanılabilir? - Kullanımdan kaldırılmış öğeler yerine güncel web standartlarını kullanmak neden önemlidir? Eski ve kullanımdan kaldırılmış HTML öğeleri hakkında daha fazla bilgi edinin ve web standartlarının kullanıcı deneyimini geliştirmek için nasıl evrildiğini anlayın. ## Ders Sonrası Test Ders sonrası test ## Gözden Geçirme ve Kendi Kendine Çalışma HTML Bilginizi Derinleştirin HTML, 30 yılı aşkın süredir webin temelini oluşturuyor ve basit bir belge işaretleme dilinden etkileşimli uygulamalar oluşturmak için gelişmiş bir platforma dönüştü. Bu evrimi anlamak, modern web standartlarını takdir etmenize ve daha iyi geliştirme kararları almanıza yardımcı olur. Önerilen Öğrenme Yolları: 1. HTML Tarihi ve Evrimi - HTML 1.0'dan HTML5'e kadar olan zaman çizelgesini araştırın - Belirli etiketlerin neden kullanımdan kaldırıldığını keşfedin (erişilebilirlik, mobil uyumluluk, sürdürülebilirlik) - Yeni HTML özelliklerini ve önerilerini inceleyin 2. Anlamsal HTML Derinlemesine İnceleme - HTML5 anlamsal öğeler listesini inceleyin - <article>, <section>, <aside> ve <main> ne zaman kullanılacağını belirleme pratiği yapın - Erişilebilirliği artırmak için ARIA özelliklerini öğrenin 3. Modern Web Geliştirme - Duyarlı web siteleri oluşturma konusunda Microsoft Learn'de bilgi edinin - HTML'nin CSS ve JavaScript ile nasıl entegre olduğunu anlayın - Web performansı ve SEO en iyi uygulamaları hakkında bilgi edinin Düşünme Soruları: - Hangi kullanımdan kaldırılmış HTML etiketlerini keşfettiniz ve neden kaldırıldılar? - Gelecekteki sürümler için hangi yeni HTML özellikleri öneriliyor? - Anlamsal HTML, web erişilebilirliğine ve SEO'ya nasıl katkıda bulunur? ### ⚡ Sonraki 5 Dakikada Yapabilecekleriniz - [ ] DevTools'u (F12) açın ve favori web sitenizin HTML yapısını inceleyin - [ ] Temel etiketlerle basit bir HTML dosyası oluşturun: <h1>, <p> ve <img> - [ ] HTML'nizi çevrimiçi W3C HTML Doğrulayıcı ile doğrulayın - [ ] HTML'nize <!-- yorum --> kullanarak bir yorum eklemeyi deneyin ### 🎯 Bu Saatte Başarabilecekleriniz - [ ] Ders sonrası testi tamamlayın ve anlamsal HTML kavramlarını gözden geçirin - [ ] Doğru HTML yapısını kullanarak kendiniz hakkında basit bir web sayfası oluşturun - [ ] Farklı başlık seviyeleri ve metin biçimlendirme etiketleriyle deney yapın - [ ] Multimedya entegrasyonunu pratik yapmak için resimler ve bağlantılar ekleyin - [ ] Henüz denemediğiniz HTML5 özelliklerini araştırın ### 📅 Haftalık HTML Yolculuğunuz - [ ] Anlamsal işaretlemeyle teraryum proje ödevini tamamlayın - [ ] ARIA etiketleri ve rolleri kullanarak erişilebilir bir web sayfası oluşturun - [ ] Çeşitli giriş türleriyle form oluşturma pratiği yapın - [ ] localStorage veya coğrafi konum gibi HTML5 API'lerini keşfedin - [ ] Duyarlı HTML desenlerini ve mobil öncelikli tasarımı inceleyin - [ ] Diğer geliştiricilerin HTML kodlarını en iyi uygulamalar için gözden geçirin ### 🌟 Aylık Web Temeli - [ ] HTML ustalığınızı sergileyen bir portföy web sitesi oluşturun - [ ] Handlebars gibi bir çerçeve ile HTML şablonlamayı öğrenin - [ ] HTML belgelerini iyileştirerek açık kaynak projelerine katkıda bulunun - [ ] Özel öğeler gibi gelişmiş HTML kavramlarını öğrenin - [ ] HTML'yi CSS çerçeveleri ve JavaScript kütüphaneleriyle entegre edin - [ ] HTML temellerini öğrenen diğerlerine rehberlik edin ## 🎯 HTML Ustalık Zaman Çizelgeniz ### 🛠️ HTML Araç Seti Özeti Bu dersi tamamladıktan sonra artık şunlara sahipsiniz: - Belge Yapısı: Doğru DOCTYPE ile eksiksiz HTML5 temeli - Anlamsal İşaretleme: Erişilebilirliği ve SEO'yu artıran anlamlı etiketler - Resim Entegrasyonu: Doğru dosya organizasyonu ve alt metin uygulamaları - Yerleşim Konteynerleri: Açıklayıcı sınıf adlarıyla stratejik div kullanımı - Erişilebilirlik Bilinci: Ekran okuyucu navigasyonunun anlaşılması - Modern Standartlar: Güncel HTML5 uygulamaları ve kullanımdan kaldırılmış etiket bilgisi - Proje Temeli: CSS stilleri ve JavaScript etkileşimleri için sağlam bir temel Sonraki Adımlar: HTML yapınız CSS stilleri için hazır! Oluşturduğunuz anlamsal temel, bir sonraki dersi anlamayı çok daha kolaylaştıracak. ## Ödev HTML pratiği yapın: Blog taslağı oluşturun --- Feragatname: Bu belge, AI çeviri hizmeti Co-op Translator kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlıklar içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalar için sorumluluk kabul etmiyoruz.
Teraryum Projesi Bölüm 2: CSS'e Giriş
HTML teraryumunuzun oldukça basit göründüğünü hatırlıyor musunuz? CSS, bu sade yapıyı görsel olarak çekici bir şeye dönüştürdüğümüz yerdir. HTML bir evin çerçevesini inşa etmek gibiyse, CSS onu ev gibi hissettiren her şeydir - boya renkleri, mobilya düzeni, aydınlatma ve odaların birbirine akışı. Versailles Sarayı'nın basit bir av köşkü olarak başladığını, ancak dekorasyon ve düzenlemeye dikkat edilerek dünyanın en görkemli binalarından birine dönüştüğünü düşünün. Bugün, teraryumunuzu işlevsel olmaktan çıkarıp cilalı bir hale getireceğiz. Öğreneceğiniz şeyler arasında öğeleri tam olarak konumlandırmak, düzenleri farklı ekran boyutlarına uyumlu hale getirmek ve web sitelerini etkileyici kılan görsel çekiciliği yaratmak var. Bu dersin sonunda, stratejik CSS stillerinin projenizi nasıl dramatik bir şekilde geliştirebileceğini göreceksiniz. Haydi teraryumunuza biraz stil ekleyelim. ## Ders Öncesi Test Ders öncesi testi ## CSS'e Başlangıç CSS genellikle sadece "şeyleri güzel yapmak" olarak düşünülür, ancak çok daha geniş bir amaca hizmet eder. CSS, bir filmin yönetmeni olmak gibidir - sadece her şeyin nasıl göründüğünü değil, nasıl hareket ettiğini, etkileşimlere nasıl tepki verdiğini ve farklı durumlara nasıl uyum sağladığını kontrol edersiniz. Modern CSS oldukça yeteneklidir. Telefonlar, tabletler ve masaüstü bilgisayarlar için düzenleri otomatik olarak ayarlayan kodlar yazabilirsiniz. Kullanıcıların dikkatini gerektiği yere yönlendiren akıcı animasyonlar oluşturabilirsiniz. Her şey bir araya geldiğinde sonuçlar oldukça etkileyici olabilir. Bu derste başaracaklarımız: - Modern CSS teknikleri kullanarak teraryumunuz için eksiksiz bir görsel tasarım oluşturmak - Temel kavramları keşfetmek, örneğin kaskad, kalıtım ve CSS seçiciler - Duyarlı konumlandırma ve düzen stratejilerini uygulamak - CSS şekilleri ve stilleri kullanarak teraryum kabını oluşturmak ### Ön Koşul Bir önceki dersten teraryumunuz için HTML yapısını tamamlamış olmalı ve stil vermeye hazır olmalısınız. ### CSS Dosyanızı Ayarlama Stil vermeye başlamadan önce CSS'i HTML'e bağlamamız gerekiyor. Bu bağlantı, tarayıcıya teraryumumuz için stil talimatlarını nerede bulacağını söyler. Teraryum klasörünüzde style.css adında yeni bir dosya oluşturun ve ardından HTML belgenizin <head> bölümüne bağlayın: Bu kodun yaptığı şey: - HTML ve CSS dosyalarınız arasında bir bağlantı oluşturur - Tarayıcıya style.css dosyasından stilleri yükleyip uygulamasını söyler - Bu dosyanın bir CSS dosyası olduğunu belirtmek için rel="stylesheet" özelliğini kullanır - Dosya yolunu href="./style.css" ile referans alır ## CSS Kaskadını Anlamak CSS'in neden "Cascading" (Kaskad) Stil Sayfaları olarak adlandırıldığını hiç merak ettiniz mi? Stiller bir şelale gibi aşağı doğru akar ve bazen birbirleriyle çelişir. Askeri komuta yapılarının nasıl çalıştığını düşünün - bir genel emir "tüm birlikler yeşil giyinsin" diyebilir, ancak biriminize özel bir emir "tören için mavi elbise giyin" diyebilir. Daha spesifik talimat öncelikli olur. CSS benzer bir mantık izler ve bu hiyerarşiyi anlamak hata ayıklamayı çok daha yönetilebilir hale getirir. ### Kaskad Önceliğini Deneyimlemek Bir stil çatışması oluşturarak kaskadı iş başında görelim. Öncelikle <h1> etiketinize bir satır içi stil ekleyin: Bu kodun yaptığı şey: - Satır içi stil kullanarak <h1> öğesine doğrudan kırmızı bir renk uygular - CSS'i doğrudan HTML'e gömmek için style özelliğini kullanır - Bu belirli öğe için en yüksek öncelikli stil kuralını oluşturur Sonra, style.css dosyanıza şu kuralı ekleyin: Yukarıdaki kodda: - Tüm <h1> öğelerini hedefleyen bir CSS kuralı tanımladık - Dış stil dosyasını kullanarak metin rengini mavi olarak ayarladık - Satır içi stillere göre daha düşük öncelikli bir kural oluşturduk ✅ Bilgi Kontrolü: Web uygulamanızda hangi renk görüntüleniyor? Neden o renk kazandı? Stilleri geçersiz kılmak istediğiniz senaryolar düşünebilir misiniz? ## CSS Kalıtımını İş Başında Görmek CSS kalıtımı genetik gibidir - öğeler, ebeveyn öğelerinden belirli özellikleri miras alır. Eğer body öğesinde yazı tipi ailesini ayarlarsanız, içindeki tüm metin otomatik olarak aynı yazı tipini kullanır. Bu, Habsburg ailesinin belirgin çene yapısının nesiller boyunca her birey için özel olarak belirtilmeden ortaya çıkmasına benzer. Ancak her şey miras alınmaz. Yazı tipleri ve renkler gibi metin stilleri miras alınır, ancak kenar boşlukları ve çerçeveler gibi düzen özellikleri miras alınmaz. Tıpkı çocukların fiziksel özellikleri miras alması ama ebeveynlerinin moda seçimlerini miras almaması gibi. ### Yazı Tipi Kalıtımını Gözlemlemek Body öğesinde bir yazı tipi ailesi ayarlayarak kalıtımı iş başında görelim: Burada olanları açıklamak: - Body öğesini hedefleyerek tüm sayfa için yazı tipi ailesini ayarlar - Daha iyi tarayıcı uyumluluğu için yedek seçeneklerle bir yazı tipi yığını kullanır - Farklı işletim sistemlerinde harika görünen modern sistem yazı tiplerini uygular - Tüm alt öğelerin bu yazı tipini miras almasını sağlar, aksi belirtilmedikçe Tarayıcınızın geliştirici araçlarını (F12) açın, Elementler sekmesine gidin ve <h1> öğenizi inceleyin. Body'den yazı tipi ailesini miras aldığını göreceksiniz: ✅ Deney Zamanı: Body öğesinde color, line-height veya text-align gibi diğer miras alınabilir özellikleri ayarlamayı deneyin. Başlığınız ve diğer öğeler üzerinde ne olur? ### 🔄 Pedagojik Kontrol CSS Temellerini Anlama: Seçicilere geçmeden önce şunları yapabildiğinizden emin olun: - ✅ Kaskad ve kalıtım arasındaki farkı açıklayın - ✅ Bir özgüllük çatışmasında hangi stilin kazanacağını tahmin edin - ✅ Hangi özelliklerin ebeveyn öğelerden miras alındığını belirleyin - ✅ CSS dosyalarını HTML'e doğru şekilde bağlayın Hızlı Test: Eğer bu stillere sahipseniz, <div class="special"> içindeki bir <h1> ne renk olur? Cevap: Kırmızı (element seçici doğrudan h1'i hedefliyor) ## CSS Seçicilerini Öğrenmek CSS seçicileri, belirli öğeleri stil vermek için hedeflemenin yoludur. Bu, kesin talimatlar vermek gibi çalışır - "ev" demek yerine "Maple Sokağı'ndaki kırmızı kapılı mavi ev" diyebilirsiniz. CSS, spesifik olmanın farklı yollarını sunar ve doğru seçiciyi seçmek, görev için uygun aracı seçmek gibidir. Bazen mahalledeki her kapıyı stil vermeniz gerekir, bazen de sadece belirli bir kapıyı. ### Element Seçiciler (Etiketler) Element seçiciler, HTML öğelerini etiket adlarına göre hedefler. Sayfanızda geniş çapta uygulanacak temel stiller ayarlamak için mükemmeldir: Bu stilleri anlamak: - Body seçici ile tüm sayfada tutarlı tipografi ayarlar - Daha iyi kontrol için tarayıcı varsayılan kenar boşluklarını ve dolgusunu kaldırır - Tüm başlık öğelerini renk, hizalama ve boşluklarla stil verir - Erişilebilir, ölçeklenebilir yazı tipi boyutları için rem birimlerini kullanır Element seçiciler genel stil vermek için iyi çalışır, ancak teraryumunuzdaki bitkiler gibi bireysel bileşenleri stil vermek için daha spesifik seçicilere ihtiyacınız olacak. ### Benzersiz Öğeler için ID Seçiciler ID seçiciler # sembolünü kullanır ve belirli id özelliklerine sahip öğeleri hedefler. ID'ler bir sayfada benzersiz olmalıdır, bu yüzden teraryumumuzun sol ve sağ bitki kapları gibi bireysel, özel öğeleri stil vermek için mükemmeldir. Teraryumumuzun bitkilerin yer alacağı yan kaplar için stil oluşturmayı deneyelim: Bu kodun yaptığı şey: - Kapları absolute konumlandırma kullanarak ekranın en sol ve sağ kenarlarına yerleştirir - Ekran boyutuna uyum sağlayan vh (viewport height) birimlerini kullanarak duyarlı yükseklik uygular - Toplam genişliğe dahil edilmesi için box-sizing: border-box uygular - Gereksiz px birimlerini sıfır değerlerinden kaldırarak daha temiz kod sağlar - Göz yormayan hafif bir arka plan rengi ayarlar ✅ Kod Kalitesi Meydan Okuması: Bu CSS'in DRY (Kendini Tekrarlama) ilkesini ihlal ettiğini fark ettiniz mi? Bunu hem ID hem de sınıf kullanarak nasıl yeniden düzenleyebilirsiniz? Geliştirilmiş yaklaşım: ### Yeniden Kullanılabilir Stiller için Sınıf Seçiciler Sınıf seçiciler . sembolünü kullanır ve birden fazla öğeye aynı stilleri uygulamak istediğinizde mükemmeldir. ID'lerin aksine, sınıflar HTML boyunca tekrar kullanılabilir, bu da tutarlı stil düzenleri için idealdir. Teraryumumuzda, her bitkinin benzer bir stile ihtiyacı var ancak aynı zamanda bireysel konumlandırmaya da ihtiyacı var. Paylaşılan stiller için sınıflar ve benzersiz konumlandırma için ID'ler kombinasyonunu kullanacağız. Her bitki için HTML yapısı: Anahtar öğeler açıklaması: - Tüm bitki kapları için tutarlı kaplama stilleri sağlamak için class="plant-holder" kullanır - Paylaşılan resim stilleri ve davranışı için class="plant" uygular - Bireysel konumlandırma ve JavaScript etkileşimi için benzersiz id="plant1" içerir - Ekran okuyucu erişilebilirliği için açıklayıcı alt metin sağlar Şimdi bu stilleri style.css dosyanıza ekleyin: Bu stilleri açıklamak: - Bitki kapları için göreceli konumlandırma oluşturarak bir konumlandırma bağlamı oluşturur - Tüm bitki kaplarını %13 yükseklikte ayarlayarak tüm bitkilerin dikey olarak sığmasını sağlar - Kapları biraz sola kaydırarak bitkileri kaplar içinde daha iyi merkezler - Bitkilerin duyarlı bir şekilde ölçeklenmesine izin verir max-width ve max-height özellikleriyle - Bitkileri teraryumdaki diğer öğelerin üzerine katmanlamak için z-index kullanır - Daha iyi kullanıcı etkileşimi için CSS geçişleriyle hafif bir hover efekti ekler ✅ Eleştirel Düşünme: Neden hem .plant-holder hem de .plant seçicilere ihtiyacımız var? Sadece birini kullanmaya çalışırsak ne olurdu? ## CSS Konumlandırmayı Anlamak CSS konumlandırma, bir oyunun sahne yönetmeni olmak gibidir - her aktörün nerede duracağını ve sahnede nasıl hareket edeceğini yönlendirirsiniz. Bazı aktörler standart formasyona uyar, diğerleri ise dramatik etki için özel bir konumlandırmaya ihtiyaç duyar. Konumlandırmayı anladığınızda, birçok düzen zorluğu yönetilebilir hale gelir. Kullanıcılar kaydırırken üstte kalan bir navigasyon çubuğuna mı ihtiyacınız var? Konumlandırma bunu halleder. Belirli bir konumda görünen bir araç ipucu mu istiyorsunuz? Bu da konumlandırma ile mümkün. ### Beş Konum Değeri ### Teraryumumuzda Konumlandırma Teraryumumuz, istenen düzeni oluşturmak için konumlandırma türlerinin stratejik bir kombinasyonunu kullanır: Konumlandırma stratejisini anlamak: - Mutlak kaplar, normal belge akışından çıkarılır ve ekran kenarlarına sabitlenir - Göreceli bitki kapları, belge akışında kalırken bir konumlandırma bağlamı oluşturur - Mutlak bitkiler, göreceli kaplar içinde hassas bir şekilde konumlandırılabilir - Bu kombinasyon, bitkilerin dikey olarak sıralanmasına ve bireysel olarak konumlandırılabilir olmasına olanak tanır ✅ Deney Zamanı: Konumlandırma değerlerini değiştirmeyi deneyin ve sonuçları gözlemleyin: - .container öğesini absolute yerine relative olarak değiştirirseniz ne olur? - .plant-holder öğesi relative yerine absolute kullanırsa, düzen nasıl değişir? - .plant öğesini relative konumlandırmaya geçirdiğinizde ne olur? ### 🔄 Pedagojik Kontrol Noktası CSS Konumlandırma Uzmanlığı: Anlamanızı doğrulamak için duraklayın: - ✅ Bitkilerin sürükle ve bırak işlemi için neden mutlak konumlandırmaya ihtiyaç duyduğunu açıklayabilir misiniz? - ✅ Göreceli konteynerlerin konumlandırma bağlamı oluşturduğunu anlıyor musunuz? - ✅ Yan konteynerlerin neden mutlak konumlandırma kullandığını biliyor musunuz? - ✅ Konumlandırma deklarasyonlarını tamamen kaldırırsanız ne olur? Gerçek Dünya Bağlantısı: CSS konumlandırmanın gerçek dünya düzenini nasıl yansıttığını düşünün: - Statik: Raflardaki kitaplar (doğal düzen) - Göreceli: Bir kitabı hafifçe hareket ettirmek ama yerini korumak - Mutlak: Bir sayfa numarasına tam olarak bir ayraç yerleştirmek - Sabit: Sayfaları çevirirken görünür kalan bir yapışkan not ## CSS ile Teraryum Yapımı Şimdi yalnızca CSS kullanarak bir cam kavanoz yapacağız - resim veya grafik yazılımı kullanmadan. Konumlandırma ve şeffaflık kullanarak gerçekçi görünümlü cam, gölgeler ve derinlik efektleri oluşturmak, CSS'nin görsel yeteneklerini gösterir. Bu teknik, Bauhaus hareketindeki mimarların basit geometrik formları kullanarak karmaşık, güzel yapılar oluşturma yöntemini yansıtır. Bu prensipleri anladığınızda, birçok web tasarımının arkasındaki CSS tekniklerini tanıyacaksınız. ### Cam Kavanoz Bileşenlerini Oluşturma Teraryum kavanozunu parça parça oluşturalım. Her parça, mutlak konumlandırma ve yüzdeye dayalı boyutlandırma kullanır, böylece tasarım duyarlı olur: Teraryum yapımını anlama: - Kullanır tüm ekran boyutlarında duyarlı ölçekleme için yüzdeye dayalı boyutlar - Konumlandırır öğeleri tam olarak yığmak ve hizalamak için mutlak olarak - Uygular cam şeffaflık efekti oluşturmak için farklı opaklık değerleri - Uygular z-index katmanlaması, böylece bitkiler kavanozun içinde görünür - Ekler daha gerçekçi bir görünüm için ince kutu gölgesi ve rafine kenar yuvarlama ### Yüzde ile Duyarlı Tasarım Tüm boyutların sabit piksel değerleri yerine yüzde kullanmasına dikkat edin: Neden önemli: - Sağlar teraryumun herhangi bir ekran boyutunda orantılı olarak ölçeklenmesini - Korur kavanoz bileşenleri arasındaki görsel ilişkileri - Sunar mobil telefonlardan büyük masaüstü monitörlere kadar tutarlı bir deneyim - İzin verir tasarımın görsel düzeni bozmadan uyum sağlamasına ### CSS Birimleri Kullanımı Kenarlık yuvarlama için rem birimlerini kullanıyoruz, bu birimler kök yazı tipi boyutuna göre ölçeklenir. Bu, kullanıcı yazı tipi tercihlerini dikkate alan daha erişilebilir tasarımlar oluşturur. Resmi spesifikasyonda CSS göreceli birimleri hakkında daha fazla bilgi edinin. ✅ Görsel Deneyim: Bu değerleri değiştirmeyi deneyin ve etkilerini gözlemleyin: - Kavanoz opaklığını 0.5'ten 0.8'e değiştirin – bu cam görünümünü nasıl etkiler? - Toprak rengini #3a241d'den #8B4513'e değiştirin – bu görsel olarak ne etkiler yaratır? - Toprağın z-index değerini 2 olarak değiştirin – katmanlama üzerinde ne olur? ### 🔄 Pedagojik Kontrol Noktası CSS Görsel Tasarım Anlayışı: Görsel CSS'yi kavradığınızı doğrulayın: - ✅ Yüzdeye dayalı boyutların duyarlı tasarımı nasıl oluşturduğunu biliyor musunuz? - ✅ Opaklığın cam şeffaflık efektini nasıl oluşturduğunu anlıyor musunuz? - ✅ z-index'in öğeleri katmanlamada oynadığı rolü biliyor musunuz? - ✅ Kenarlık yuvarlama değerlerinin kavanoz şeklini nasıl oluşturduğunu anlıyor musunuz? Tasarım Prensibi: Basit şekillerden karmaşık görseller oluşturduğumuzu fark edin: 1. Dikdörtgenler → Yuvarlatılmış dikdörtgenler → Kavanoz bileşenleri 2. Düz renkler → Opaklık → Cam efekti 3. Bireysel öğeler → Katmanlı kompozisyon → 3D görünüm --- ## GitHub Copilot Agent Challenge 🚀 Agent modunu kullanarak aşağıdaki meydan okumayı tamamlayın: Açıklama: Teraryum bitkilerinin doğal bir rüzgar etkisi simüle ederek nazikçe sallanmasını sağlayan bir CSS animasyonu oluşturun. Bu, CSS animasyonları, dönüşümler ve anahtar kareler üzerinde pratik yapmanıza ve teraryumunuzun görsel çekiciliğini artırmanıza yardımcı olacaktır. İpucu: Teraryumdaki bitkilerin yanlara doğru nazikçe sallanmasını sağlamak için CSS anahtar kare animasyonları ekleyin. Her bir bitkiyi hafifçe (2-3 derece) sola ve sağa döndüren bir sallanma animasyonu oluşturun, 3-4 saniye süresinde ve doğal bir hareket için bir yumuşatma fonksiyonu ekleyin. Animasyonun sonsuz döngüye sahip olduğundan emin olun ve .plant sınıfına uygulayın. agent mode hakkında daha fazla bilgi edinin. ## 🚀 Meydan Okuma: Cam Yansımaları Ekleme Teraryumunuzu gerçekçi cam yansımalarıyla geliştirmeye hazır mısınız? Bu teknik tasarıma derinlik ve gerçekçilik katacaktır. Cam yüzeylerden ışığın nasıl yansıdığını simüle eden ince vurgular oluşturacaksınız. Bu yaklaşım, Jan van Eyck gibi Rönesans ressamlarının boyalı camı üç boyutlu göstermek için ışık ve yansımayı nasıl kullandıklarına benzer. İşte hedefiniz: Meydan okumanız: - Oluşturun cam yansımaları için ince beyaz veya açık renkli oval şekiller - Konumlandırın bunları kavanozun sol tarafında stratejik olarak - Uygulayın gerçekçi ışık yansıması için uygun opaklık ve bulanıklık efektleri - Kullanın border-radius organik, baloncuk benzeri şekiller oluşturmak için - Deneyin geliştirilmiş gerçekçilik için gradyanlar veya kutu gölgeleri ## Ders Sonrası Test Ders sonrası test ## CSS Bilginizi Genişletin CSS başlangıçta karmaşık gelebilir, ancak bu temel kavramları anlamak daha ileri teknikler için sağlam bir temel sağlar. Bir sonraki CSS öğrenme alanlarınız: - Flexbox - öğelerin hizalanmasını ve dağıtımını basitleştirir - CSS Grid - karmaşık düzenler oluşturmak için güçlü araçlar sağlar - CSS Değişkenleri - tekrarı azaltır ve sürdürülebilirliği artırır - Duyarlı tasarım - sitelerin farklı ekran boyutlarında iyi çalışmasını sağlar ### Etkileşimli Öğrenme Kaynakları Bu kavramları aşağıdaki eğlenceli, uygulamalı oyunlarla pratik yapın: - 🐸 Flexbox Froggy - Flexbox'ı eğlenceli zorluklarla öğrenin - 🌱 Grid Garden - Sanal havuçlar yetiştirerek CSS Grid öğrenin - 🎯 CSS Battle - CSS becerilerinizi kodlama zorluklarıyla test edin ### Ek Öğrenme Kapsamlı CSS temelleri için bu Microsoft Learn modülünü tamamlayın: HTML uygulamanızı CSS ile stilize edin ### ⚡ Sonraki 5 Dakikada Yapabilecekleriniz - [ ] DevTools'u açın ve Elemanlar panelini kullanarak herhangi bir web sitesindeki CSS stillerini inceleyin - [ ] Basit bir CSS dosyası oluşturun ve bir HTML sayfasına bağlayın - [ ] Renkleri farklı yöntemlerle değiştirmeyi deneyin: hex, RGB ve adlandırılmış renkler - [ ] Bir div'e dolgu ve kenar boşluğu ekleyerek kutu modelini pratik yapın ### 🎯 Bu Saatte Başarabilecekleriniz - [ ] Ders sonrası testi tamamlayın ve CSS temellerini gözden geçirin - [ ] HTML sayfanızı yazı tipleri, renkler ve boşluklarla stilize edin - [ ] Flexbox veya grid kullanarak basit bir düzen oluşturun - [ ] Yumuşak efektler için CSS geçişlerini deneyin - [ ] Medya sorguları ile duyarlı tasarımı pratik yapın ### 📅 Haftalık CSS Maceranız - [ ] Yaratıcı bir dokunuşla teraryum stilini tamamlama ödevi - [ ] Bir fotoğraf galerisi düzeni oluşturarak CSS Grid'i öğrenin - [ ] Tasarımlarınızı canlandırmak için CSS animasyonlarını öğrenin - [ ] Sass veya Less gibi CSS ön işlemcilerini keşfedin - [ ] Tasarım prensiplerini inceleyin ve CSS'nize uygulayın - [ ] Çevrimiçi bulduğunuz ilginç tasarımları analiz edin ve yeniden oluşturun ### 🌟 Aylık Tasarım Uzmanlığı - [ ] Tam bir duyarlı web sitesi tasarım sistemi oluşturun - [ ] CSS-in-JS veya Tailwind gibi yardımcı ilk çerçeveleri öğrenin - [ ] Açık kaynak projelerine CSS iyileştirmeleriyle katkıda bulunun - [ ] CSS özel özellikleri ve kapsama gibi ileri düzey CSS kavramlarını öğrenin - [ ] Modüler CSS ile yeniden kullanılabilir bileşen kütüphaneleri oluşturun - [ ] CSS öğrenenlere mentorluk yapın ve tasarım bilginizi paylaşın ## 🎯 CSS Uzmanlık Zaman Çizelgeniz ### 🛠️ CSS Araç Seti Özeti Bu dersi tamamladıktan sonra artık şunlara sahipsiniz: - Katman Anlayışı: Stillerin nasıl miras alındığını ve birbirini geçersiz kıldığını anlama - Seçici Uzmanlığı: Öğeleri, sınıfları ve kimlikleri hassas bir şekilde hedefleme - Konumlandırma Becerileri: Stratejik öğe yerleştirme ve katmanlama - Görsel Tasarım: Cam efektleri, gölgeler ve şeffaflık oluşturma - Duyarlı Teknikler: Her ekrana uyum sağlayan yüzdeye dayalı düzenler - Kod Organizasyonu: Temiz, sürdürülebilir CSS yapısı - Modern Uygulamalar: Göreceli birimler ve erişilebilir tasarım kalıpları kullanma Sonraki Adımlar: Teraryumunuz artık hem yapı (HTML) hem de stil (CSS) içeriyor. Son ders, JavaScript ile etkileşim ekleyecek! ## Ödev CSS Refactoring --- Feragatname: Bu belge, AI çeviri hizmeti Co-op Translator kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çeviriler hata veya yanlışlıklar içerebilir. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalardan sorumlu değiliz.
Проєкт "Тераріум" Частина 1: Вступ до HTML
HTML, або HyperText Markup Language, є основою кожного вебсайту, який ви коли-небудь відвідували. Уявіть HTML як скелет, який надає структуру вебсторінкам – він визначає, де розміщується контент, як він організований і що кожен елемент представляє. Хоча CSS пізніше "одягне" ваш HTML кольорами та макетами, а JavaScript оживить його інтерактивністю, HTML забезпечує основну структуру, яка робить усе інше можливим. У цьому уроці ви створите HTML-структуру для інтерфейсу віртуального тераріуму. Цей практичний проєкт навчить вас основам HTML, одночасно створюючи щось візуально привабливе. Ви дізнаєтеся, як організовувати контент за допомогою семантичних елементів, працювати з зображеннями та створювати основу для інтерактивного вебдодатку. До кінця цього уроку у вас буде готова HTML-сторінка, яка відображає зображення рослин в організованих колонках, готова до стилізації в наступному уроці. Не хвилюйтеся, якщо спочатку це виглядає просто – саме так має виглядати HTML перед тим, як CSS додасть візуальний блиск. ## Тест перед лекцією Тест перед лекцією ## Налаштування вашого проєкту Перед тим як зануритися в HTML-код, давайте налаштуємо правильне робоче середовище для вашого проєкту тераріуму. Створення організованої файлової структури з самого початку – це важлива звичка, яка буде корисною протягом вашого шляху веброзробки. ### Завдання: Створіть структуру проєкту Ви створите спеціальну папку для вашого проєкту тераріуму та додасте ваш перший HTML-файл. Ось два підходи, які ви можете використовувати: Варіант 1: Використання Visual Studio Code 1. Відкрийте Visual Studio Code 2. Натисніть "File" → "Open Folder" або використовуйте Ctrl+K, Ctrl+O (Windows/Linux) або Cmd+K, Cmd+O (Mac) 3. Створіть нову папку під назвою terrarium і виберіть її 4. У панелі Explorer натисніть на іконку "New File" 5. Назвіть ваш файл index.html Варіант 2: Використання команд терміналу Ось що роблять ці команди: - Створюють нову директорію під назвою terrarium для вашого проєкту - Переходять у директорію terrarium - Створюють порожній файл index.html - Відкривають файл у Visual Studio Code для редагування ## Розуміння структури HTML-документа Кожен HTML-документ слідує певній структурі, яку браузери повинні розуміти та правильно відображати. Уявіть цю структуру як формальний лист – він має обов'язкові елементи в певному порядку, які допомагають отримувачу (у цьому випадку браузеру) правильно обробляти контент. Давайте почнемо з додавання основи, яка потрібна кожному HTML-документу. ### Декларація DOCTYPE та кореневий елемент Перші два рядки будь-якого HTML-файлу служать "вступом" документа для браузера: Розуміння того, що робить цей код: - Оголошує тип документа як HTML5 за допомогою <!DOCTYPE html> - Створює кореневий елемент <html>, який міститиме весь контент сторінки - Встановлює сучасні вебстандарти для правильного відображення браузером - Забезпечує узгоджене відображення на різних браузерах і пристроях ### 🔄 Педагогічна перевірка Зупиніться та подумайте: Перед тим як продовжити, переконайтеся, що ви розумієте: - ✅ Чому кожен HTML-документ потребує декларації DOCTYPE - ✅ Що містить кореневий елемент <html> - ✅ Як ця структура допомагає браузерам правильно відображати сторінки Швидкий самотест: Чи можете ви пояснити своїми словами, що означає "відображення відповідно до стандартів"? ## Додавання основних метаданих документа Секція <head> HTML-документа містить важливу інформацію, яку потребують браузери та пошукові системи, але яку відвідувачі не бачать безпосередньо на сторінці. Уявіть це як "закулісну" інформацію, яка допомагає вашій вебсторінці працювати правильно та виглядати коректно на різних пристроях і платформах. Ці метадані повідомляють браузерам, як відображати вашу сторінку, яке кодування символів використовувати і як обробляти різні розміри екранів – усе це необхідно для створення професійних, доступних вебсторінок. ### Завдання: Додайте секцію документа Head Вставте цю секцію <head> між вашими відкриваючим і закриваючим тегами <html>: Розбір того, що робить кожен елемент: - Встановлює заголовок сторінки, який з'являється на вкладках браузера та в результатах пошуку - Вказує кодування символів UTF-8 для правильного відображення тексту у всьому світі - Забезпечує сумісність із сучасними версіями Internet Explorer - Налаштовує адаптивний дизайн, встановлюючи viewport відповідно до ширини пристрою - Контролює початковий рівень масштабування для відображення контенту в природному розмірі ## Створення тіла документа Елемент <body> містить увесь видимий контент вашої вебсторінки – усе, що користувачі побачать і з чим взаємодіятимуть. Хоча секція <head> надавала інструкції браузеру, секція <body> містить фактичний контент: текст, зображення, кнопки та інші елементи, які створюють ваш інтерфейс користувача. Давайте додамо структуру тіла та зрозуміємо, як HTML-теги працюють разом для створення змістовного контенту. ### Розуміння структури HTML-тегів HTML використовує парні теги для визначення елементів. Більшість тегів мають відкриваючий тег, наприклад <p>, і закриваючий тег, наприклад </p>, з контентом між ними: <p>Привіт, світ!</p>. Це створює елемент абзацу, що містить текст "Привіт, світ!". ### Завдання: Додайте елемент Body Оновіть ваш HTML-файл, щоб включити елемент <body>: Ось що забезпечує ця повна структура: - Встановлює базову структуру HTML5-документа - Включає основні метадані для правильного відображення браузером - Створює порожнє тіло, готове для вашого видимого контенту - Слідує сучасним найкращим практикам веброзробки Тепер ви готові додати видимі елементи вашого тераріуму. Ми використаємо елементи <div> як контейнери для організації різних секцій контенту, а елементи <img> для відображення зображень рослин. ### Робота із зображеннями та контейнерами макета Зображення є особливими в HTML, оскільки вони використовують "самозакриваючі" теги. На відміну від елементів, таких як <p></p>, які обгортають контент, тег <img> містить усю необхідну інформацію всередині самого тега за допомогою атрибутів, таких як src для шляху до файлу зображення та alt для доступності. Перед додаванням зображень до вашого HTML вам потрібно правильно організувати файли вашого проєкту, створивши папку images і додавши графіку рослин. Спочатку налаштуйте ваші зображення: 1. Створіть папку під назвою images всередині вашої папки проєкту тераріуму 2. Завантажте зображення рослин із папки рішення (всього 14 зображень рослин) 3. Скопіюйте всі зображення рослин у вашу нову папку images ### Завдання: Створіть макет відображення рослин Тепер додайте зображення рослин, організовані в дві колонки, між вашими тегами <body></body>: Крок за кроком, ось що відбувається в цьому коді: - Створює головний контейнер сторінки з id="page" для утримання всього контенту - Встановлює два контейнера колонок: left-container і right-container - Організовує 7 рослин у лівій колонці та 7 рослин у правій колонці - Обгортає кожне зображення рослини в div plant-holder для індивідуального позиціонування - Застосовує узгоджені назви класів для стилізації CSS у наступному уроці - Призначає унікальні ID кожному зображенню рослини для взаємодії з JavaScript пізніше - Включає правильні шляхи до файлів, що вказують на папку images ### 🔄 Педагогічна перевірка Розуміння структури: Зробіть паузу, щоб переглянути вашу HTML-структуру: - ✅ Чи можете ви визначити головні контейнери у вашому макеті? - ✅ Чи розумієте ви, чому кожне зображення має унікальний ID? - ✅ Як би ви описали призначення div plant-holder? Візуальна перевірка: Відкрийте ваш HTML-файл у браузері. Ви повинні побачити: - Базовий список зображень рослин - Зображення, організовані в дві колонки - Простий, нестилізований макет Запам'ятайте: Цей простий вигляд – саме те, як HTML має виглядати перед стилізацією CSS! З доданою розміткою рослини з'являться на екрані, хоча вони ще не виглядають довершено – для цього потрібен CSS у наступному уроці! На даний момент у вас є міцна HTML-основа, яка правильно організовує ваш контент і слідує найкращим практикам доступності. ## Використання семантичного HTML для доступності Семантичний HTML означає вибір HTML-елементів на основі їх значення та призначення, а не лише їх зовнішнього вигляду. Коли ви використовуєте семантичну розмітку, ви передаєте структуру та значення вашого контенту браузерам, пошуковим системам і допоміжним технологіям, таким як екранні читачі. Цей підхід робить ваші вебсайти більш доступними для користувачів з обмеженими можливостями та допомагає пошуковим системам краще розуміти ваш контент. Це фундаментальний принцип сучасної веброзробки, який створює кращий досвід для всіх. ### Додавання семантичного заголовка сторінки Давайте додамо правильний заголовок до вашої сторінки тераріуму. Вставте цей рядок одразу після вашого відкриваючого тега <body>: Чому важлива семантична розмітка: - Допомагає екранним читачам орієнтуватися та розуміти структуру сторінки - Покращує оптимізацію для пошукових систем (SEO), уточнюючи ієрархію контенту - Підвищує доступність для користувачів із порушеннями зору або когнітивними особливостями - Створює кращий користувацький досвід на всіх пристроях і платформах - Слідує вебстандартам і найкращим практикам професійної розробки Приклади семантичного та несемантичного вибору: - Визначає окремі елементи для кожного візуального компонента (верх, стіни, ґрунт, низ) - Включає вкладені елементи для ефектів відбиття скла (глянцеві елементи) - Використовує описові назви класів, які чітко вказують на призначення кожного елемента - Готує структуру для CSS-стилізації, яка створить вигляд скляного тераріуму ### 🔄 Педагогічна перевірка Опанування структури HTML: Перед тим як рухатися далі, переконайтеся, що ви можете: - ✅ Пояснити різницю між структурою HTML і візуальним виглядом - ✅ Визначити семантичні та несемантичні елементи HTML - ✅ Описати, як правильна розмітка покращує доступність - ✅ Розпізнати повну структуру дерева документа Перевірка розуміння: Спробуйте відкрити ваш HTML-файл у браузері з вимкненим JavaScript і CSS. Це покаже вам чисту семантичну структуру, яку ви створили! --- ## Виклик агента GitHub Copilot Використовуйте режим Agent, щоб виконати наступний виклик: Опис: Створіть семантичну HTML-структуру для розділу з рекомендаціями по догляду за рослинами, який можна додати до проекту тераріуму. Запит: Створіть семантичний HTML-розділ, який включає головний заголовок "Рекомендації по догляду за рослинами", три підрозділи з заголовками "Полив", "Вимоги до освітлення" і "Догляд за ґрунтом", кожен з яких містить абзац інформації про догляд за рослинами. Використовуйте правильні семантичні HTML-теги, такі як <section>, <h2>, <h3> і <p>, щоб належним чином структурувати контент. Дізнайтеся більше про режим агента тут. ## Виклик "Історія HTML" Вивчення еволюції вебу HTML значно еволюціонував з моменту створення першого веб-браузера Тімом Бернерс-Лі в CERN у 1990 році. Деякі старі теги, такі як <marquee>, зараз застарілі, оскільки вони не відповідають сучасним стандартам доступності та принципам адаптивного дизайну. Спробуйте цей експеримент: 1. Тимчасово обгорніть ваш заголовок <h1> у тег <marquee>: <marquee><h1>Мій тераріум</h1></marquee> 2. Відкрийте вашу сторінку в браузері та спостерігайте ефект прокрутки 3. Подумайте, чому цей тег був застарілий (підказка: подумайте про досвід користувача та доступність) 4. Видаліть тег <marquee> і поверніться до семантичної розмітки Питання для роздумів: - Як прокручуваний заголовок може вплинути на користувачів із порушеннями зору або чутливістю до руху? - Які сучасні CSS-техніки можуть досягти схожих візуальних ефектів більш доступно? - Чому важливо використовувати сучасні веб-стандарти замість застарілих елементів? Дізнайтеся більше про застарілі та заборонені HTML-елементи, щоб зрозуміти, як веб-стандарти еволюціонують для покращення досвіду користувачів. ## Післялекційний тест Післялекційний тест ## Огляд і самостійне навчання Поглибте свої знання HTML HTML є основою вебу вже понад 30 років, еволюціонуючи від простої мови розмітки документів до складної платформи для створення інтерактивних додатків. Розуміння цієї еволюції допомагає оцінити сучасні веб-стандарти та приймати кращі рішення для розробки. Рекомендовані шляхи навчання: 1. Історія та еволюція HTML - Досліджуйте хронологію від HTML 1.0 до HTML5 - Вивчайте, чому певні теги були застарілі (доступність, зручність для мобільних пристроїв, підтримка) - Досліджуйте нові функції HTML і пропозиції 2. Глибоке занурення в семантичний HTML - Вивчайте повний список семантичних елементів HTML5 - Практикуйте визначення, коли використовувати <article>, <section>, <aside> і <main> - Дізнайтеся про атрибути ARIA для покращеної доступності 3. Сучасна веб-розробка - Досліджуйте створення адаптивних веб-сайтів на Microsoft Learn - Зрозумійте, як HTML інтегрується з CSS і JavaScript - Вивчайте найкращі практики веб-продуктивності та SEO Питання для роздумів: - Які застарілі HTML-теги ви виявили, і чому вони були видалені? - Які нові функції HTML пропонуються для майбутніх версій? - Як семантичний HTML сприяє доступності вебу та SEO? ### ⚡ Що ви можете зробити за наступні 5 хвилин - [ ] Відкрийте DevTools (F12) і перевірте HTML-структуру вашого улюбленого веб-сайту - [ ] Створіть простий HTML-файл з базовими тегами: <h1>, <p> і <img> - [ ] Перевірте ваш HTML за допомогою онлайн-валідатора W3C HTML - [ ] Спробуйте додати коментар до вашого HTML за допомогою <!-- коментар --> ### 🎯 Що ви можете досягти за годину - [ ] Завершіть післялекційний тест і перегляньте концепції семантичного HTML - [ ] Створіть просту веб-сторінку про себе, використовуючи правильну структуру HTML - [ ] Експериментуйте з різними рівнями заголовків і тегами форматування тексту - [ ] Додайте зображення та посилання, щоб попрактикувати інтеграцію мультимедіа - [ ] Досліджуйте функції HTML5, які ви ще не пробували ### 📅 Ваш тижневий шлях до HTML - [ ] Завершіть завдання проекту тераріуму з семантичною розміткою - [ ] Створіть доступну веб-сторінку, використовуючи ARIA-мітки та ролі - [ ] Практикуйте створення форм з різними типами введення - [ ] Досліджуйте API HTML5, такі як localStorage або геолокація - [ ] Вивчайте адаптивні HTML-шаблони та дизайн, орієнтований на мобільні пристрої - [ ] Переглядайте HTML-код інших розробників для найкращих практик ### 🌟 Ваш місячний шлях до основ вебу - [ ] Створіть портфоліо веб-сайт, який демонструє ваше володіння HTML - [ ] Вивчайте шаблони HTML за допомогою фреймворків, таких як Handlebars - [ ] Внесіть вклад у проекти з відкритим кодом, покращуючи документацію HTML - [ ] Опануйте розширені концепції HTML, такі як користувацькі елементи - [ ] Інтегруйте HTML з CSS-фреймворками та бібліотеками JavaScript - [ ] Наставляйте інших, хто вивчає основи HTML ## 🎯 Ваш графік опанування HTML ### 🛠️ Підсумок вашого HTML-інструментарію Після завершення цього уроку ви маєте: - Структура документа: Повна основа HTML5 з правильним DOCTYPE - Семантична розмітка: Значущі теги, які покращують доступність і SEO - Інтеграція зображень: Правильна організація файлів і практики alt-тексту - Контейнери макета: Стратегічне використання div з описовими назвами класів - Усвідомлення доступності: Розуміння навігації екранних читачів - Сучасні стандарти: Актуальні практики HTML5 і знання застарілих тегів - Основа проекту: Міцна база для CSS-стилізації та інтерактивності JavaScript Наступні кроки: Ваша структура HTML готова для CSS-стилізації! Семантична основа, яку ви створили, зробить наступний урок набагато легшим для розуміння. ## Завдання Практикуйте ваш HTML: Створіть макет блогу --- Відмова від відповідальності: Цей документ був перекладений за допомогою сервісу автоматичного перекладу Co-op Translator. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
Проєкт "Тераріум", частина 2: Вступ до CSS
Пам'ятаєте, як ваш HTML-тераріум виглядав досить просто? Завдяки CSS ми перетворимо цю просту структуру на щось візуально привабливе. Якщо HTML — це як будівництво каркасу будинку, то CSS — це все, що робить його затишним: кольори фарби, розташування меблів, освітлення та те, як кімнати гармонійно поєднуються. Подумайте, як палац Версаль починався як простий мисливський будиночок, але завдяки ретельній увазі до декору та планування перетворився на одну з найвеличніших будівель світу. Сьогодні ми перетворимо ваш тераріум з функціонального на витончений. Ви навчитеся точно позиціонувати елементи, створювати макети, які адаптуються до різних розмірів екранів, і створювати візуальну привабливість, яка робить вебсайти захоплюючими. До кінця цього уроку ви побачите, як стратегічне стилювання за допомогою CSS може значно покращити ваш проєкт. Додаймо стилю вашому тераріуму. ## Тест перед лекцією Тест перед лекцією ## Початок роботи з CSS CSS часто сприймається лише як спосіб "зробити речі красивими", але його призначення набагато ширше. CSS — це як режисер фільму: ви контролюєте не тільки те, як все виглядає, але й як рухається, реагує на взаємодію та адаптується до різних ситуацій. Сучасний CSS має вражаючі можливості. Ви можете писати код, який автоматично налаштовує макети для телефонів, планшетів і настільних комп'ютерів. Ви можете створювати плавні анімації, які спрямовують увагу користувачів туди, де це потрібно. Результати можуть бути досить вражаючими, коли все працює разом. Ось що ми досягнемо на цьому уроці: - Створимо повний візуальний дизайн для вашого тераріуму, використовуючи сучасні техніки CSS - Дослідимо основні концепції, такі як каскад, спадковість і селектори CSS - Реалізуємо стратегії адаптивного позиціонування та макетування - Побудуємо контейнер для тераріуму, використовуючи форми та стилі CSS ### Передумови Ви повинні завершити HTML-структуру для вашого тераріуму з попереднього уроку та підготувати її до стилювання. ### Налаштування вашого CSS-файлу Перед тим як почати стилювання, нам потрібно підключити CSS до нашого HTML. Це з'єднання повідомляє браузеру, де знайти інструкції зі стилювання для нашого тераріуму. У папці вашого тераріуму створіть новий файл під назвою style.css, а потім зв'яжіть його у секції <head> вашого HTML-документа: Ось що робить цей код: - Створює з'єднання між вашими HTML- та CSS-файлами - Повідомляє браузеру завантажити та застосувати стилі з style.css - Використовує атрибут rel="stylesheet", щоб вказати, що це CSS-файл - Посилається на шлях до файлу через href="./style.css" ## Розуміння каскаду CSS Чому CSS називається "каскадними" таблицями стилів? Стилі спускаються вниз, як водоспад, і іноді конфліктують один з одним. Уявіть, як працює військова командна структура: загальний наказ може сказати "всі солдати носять зелене", але конкретний наказ для вашого підрозділу може сказати "носіть синю форму для церемонії". Більш конкретна інструкція має пріоритет. CSS дотримується схожої логіки, і розуміння цієї ієрархії значно полегшує налагодження. ### Експеримент з пріоритетом каскаду Давайте побачимо каскад у дії, створивши конфлікт стилів. Спочатку додайте стиль до вашого тегу <h1>: Що робить цей код: - Застосовує червоний колір безпосередньо до елемента <h1> за допомогою вбудованого стилю - Використовує атрибут style, щоб вбудувати CSS безпосередньо в HTML - Створює стиль з найвищим пріоритетом для цього конкретного елемента Далі додайте це правило до вашого файлу style.css: У наведеному вище коді ми: - Визначили правило CSS, яке націлене на всі елементи <h1> - Встановили текстовий колір синім за допомогою зовнішнього стилю - Створили правило з нижчим пріоритетом порівняно з вбудованими стилями ✅ Перевірка знань: Який колір відображається у вашому веб-додатку? Чому саме цей колір "перемагає"? Чи можете ви придумати сценарії, де вам може знадобитися перевизначити стилі? ## Спадковість CSS у дії Спадковість CSS працює як генетика — елементи успадковують певні властивості від своїх батьківських елементів. Якщо ви встановите шрифт для елемента body, весь текст всередині автоматично використовуватиме той самий шрифт. Це схоже на те, як характерна щелепа родини Габсбургів з'являлася у поколіннях без необхідності вказувати її для кожного індивідуума. Однак не все успадковується. Стилі тексту, такі як шрифти та кольори, успадковуються, але властивості макета, такі як відступи та рамки, — ні. Так само, як діти можуть успадковувати фізичні риси, але не модні уподобання своїх батьків. ### Спостереження за спадковістю шрифтів Давайте побачимо спадковість у дії, встановивши шрифт для елемента <body>: Розбираємо, що тут відбувається: - Встановлює шрифт для всієї сторінки, націлюючись на елемент <body> - Використовує стек шрифтів з резервними варіантами для кращої сумісності з браузерами - Застосовує сучасні системні шрифти, які виглядають чудово на різних операційних системах - Гарантує, що всі дочірні елементи успадковують цей шрифт, якщо він не перевизначений Відкрийте інструменти розробника вашого браузера (F12), перейдіть на вкладку Elements і перевірте ваш елемент <h1>. Ви побачите, що він успадковує шрифт від body: ✅ Час експерименту: Спробуйте встановити інші властивості, які можна успадкувати, для <body>, такі як color, line-height або text-align. Що відбувається з вашим заголовком та іншими елементами? ### 🔄 Педагогічна перевірка Розуміння основ CSS: Перед переходом до селекторів переконайтеся, що ви можете: - ✅ Пояснити різницю між каскадом і спадковістю - ✅ Передбачити, який стиль переможе у конфлікті специфічності - ✅ Визначити, які властивості успадковуються від батьківських елементів - ✅ Правильно підключити CSS-файли до HTML Швидкий тест: Якщо у вас є ці стилі, якого кольору буде <h1> всередині <div class="special">? Відповідь: Червоний (селектор елемента безпосередньо націлюється на h1) ## Опанування селекторів CSS Селектори CSS — це ваш спосіб націлюватися на конкретні елементи для стилювання. Вони працюють як точні вказівки — замість того, щоб сказати "будинок", ви можете сказати "синій будинок з червоними дверима на вулиці Maple". CSS пропонує різні способи бути точним, і вибір правильного селектора — це як вибір відповідного інструмента для завдання. Іноді вам потрібно стилювати всі двері в районі, а іноді лише одну конкретну двері. ### Селектори елементів (теги) Селектори елементів націлюються на HTML-елементи за їхнім тегом. Вони ідеально підходять для встановлення базових стилів, які застосовуються широко по всій сторінці: Розуміння цих стилів: - Встановлює послідовну типографіку по всій сторінці за допомогою селектора body - Видаляє стандартні відступи та поля браузера для кращого контролю - Стилює всі заголовки кольором, вирівнюванням і відступами - Використовує одиниці rem для масштабованого, доступного розміру шрифтів Хоча селектори елементів добре працюють для загального стилювання, вам знадобляться більш специфічні селектори для стилювання окремих компонентів, таких як рослини у вашому тераріумі. ### Селектори ID для унікальних елементів Селектори ID використовують символ # і націлюються на елементи з конкретними атрибутами id. Оскільки ID повинні бути унікальними на сторінці, вони ідеально підходять для стилювання окремих, особливих елементів, таких як наші контейнери для рослин зліва та справа. Давайте створимо стилювання для бокових контейнерів нашого тераріуму, де будуть розташовані рослини: Ось що робить цей код: - Розташовує контейнери на крайніх лівому та правому краях за допомогою абсолютного позиціонування - Використовує одиниці vh (висота вікна перегляду) для адаптивної висоти, яка змінюється залежно від розміру екрана - Застосовує box-sizing: border-box, щоб відступи включалися в загальну ширину - Видаляє зайві одиниці px з нульових значень для чистішого коду - Встановлює легкий фон, який виглядає приємніше для очей, ніж яскраво-сірий ✅ Виклик якості коду: Зверніть увагу, як цей CSS порушує принцип DRY (Don't Repeat Yourself). Чи можете ви рефакторувати його, використовуючи як ID, так і клас? Покращений підхід: ### Селектори класів для повторюваних стилів Селектори класів використовують символ . і ідеально підходять, коли ви хочете застосувати однакові стилі до кількох елементів. На відміну від ID, класи можна використовувати повторно в HTML, що робить їх ідеальними для послідовних стилів. У нашому тераріумі кожна рослина потребує схожого стилювання, але також потребує індивідуального позиціонування. Ми використаємо комбінацію класів для спільних стилів і ID для унікального позиціонування. Ось структура HTML для кожної рослини: Ключові елементи пояснені: - Використовує class="plant-holder" для послідовного стилювання контейнерів для всіх рослин - Застосовує class="plant" для спільного стилювання зображень і поведінки - Включає унікальний id="plant1" для індивідуального позиціонування та взаємодії з JavaScript - Надає описовий текст alt для доступності екранних читачів Тепер додайте ці стилі до вашого файлу style.css: Розбираємо ці стилі: - Створює відносне позиціонування для контейнера рослин, щоб встановити контекст позиціонування - Встановлює кожен контейнер рослин на 13% висоти, забезпечуючи, що всі рослини поміщаються вертикально без прокрутки - Зміщує контейнери трохи вліво для кращого центрування рослин у їхніх контейнерах - Дозволяє рослинам масштабуватися адаптивно за допомогою властивостей max-width і max-height - Використовує z-index, щоб розташувати рослини над іншими елементами в тераріумі - Додає легкий ефект наведення за допомогою CSS-переходів для кращої взаємодії з користувачем ✅ Критичне мислення: Чому нам потрібні як .plant-holder, так і .plant селектори? Що станеться, якщо ми спробуємо використовувати лише один? ## Розуміння позиціонування CSS Позиціонування CSS — це як бути режисером на сцені — ви керуєте тим, де стоять актори і як вони рухаються по сцені. Деякі актори дотримуються стандартного розташування, а інші потребують специфічного позиціонування для драматичного ефекту. Коли ви зрозумієте позиціонування, багато проблем з макетом стануть керованими. Потрібна панель навігації, яка залишається вгорі, поки користувачі прокручують сторінку? Позиціонування вирішує це. Хочете, щоб підказка з'являлася в певному місці? Це теж позиціонування. ### П'ять значень позиціонування - Як зміниться макет, якщо .plant-holder використовуватиме absolute замість relative? - Що відбувається, коли ви змінюєте позиціонування .plant на relative? ### 🔄 Педагогічна перевірка Опанування позиціонування в CSS: Зупиніться, щоб перевірити своє розуміння: - ✅ Чи можете ви пояснити, чому рослини потребують абсолютного позиціонування для функції перетягування? - ✅ Чи розумієте, як контейнери з відносним позиціонуванням створюють контекст для позиціонування? - ✅ Чому бічні контейнери використовують абсолютне позиціонування? - ✅ Що станеться, якщо повністю прибрати декларації позиціонування? Зв'язок із реальним світом: Подумайте, як позиціонування в CSS відображає реальні макети: - Static: Книги на полиці (природний порядок) - Relative: Злегка перемістити книгу, залишаючи її на місці - Absolute: Покласти закладку на конкретну сторінку - Fixed: Липка нотатка, яка залишається видимою при перегортанні сторінок ## Створення тераріуму за допомогою CSS Тепер ми створимо скляну банку, використовуючи лише CSS — без зображень чи графічного програмного забезпечення. Створення реалістичного скла, тіней і ефектів глибини за допомогою позиціонування та прозорості демонструє візуальні можливості CSS. Ця техніка нагадує, як архітектори руху Баухаус використовували прості геометричні форми для створення складних, красивих структур. Як тільки ви зрозумієте ці принципи, ви зможете розпізнати CSS-техніки, які стоять за багатьма веб-дизайнами. ### Створення компонентів скляної банки Давайте створимо тераріумну банку по частинах. Кожна частина використовує абсолютне позиціонування та розміри на основі відсотків для адаптивного дизайну: Розуміння конструкції тераріуму: - Використовує розміри на основі відсотків для адаптивного масштабування на всіх розмірах екрана - Позиціонує елементи абсолютно для точного складання та вирівнювання - Застосовує різні значення прозорості для створення ефекту прозорості скла - Реалізує шарування за допомогою z-index, щоб рослини виглядали всередині банки - Додає тонкі тіні та вдосконалений border-radius для більш реалістичного вигляду ### Адаптивний дизайн за допомогою відсотків Зверніть увагу, як усі розміри використовують відсотки, а не фіксовані значення в пікселях: Чому це важливо: - Забезпечує, що тераріум пропорційно масштабується на будь-якому розмірі екрана - Підтримує візуальні зв’язки між компонентами банки - Забезпечує послідовний досвід від мобільних телефонів до великих моніторів - Дозволяє дизайну адаптуватися без порушення візуального макета ### Одиниці CSS у дії Ми використовуємо одиниці rem для border-radius, які масштабуються відносно розміру шрифту кореня. Це створює більш доступні дизайни, які враховують уподобання користувача щодо шрифтів. Дізнайтеся більше про відносні одиниці CSS в офіційній специфікації. ✅ Візуальний експеримент: Спробуйте змінити ці значення та спостерігайте за ефектами: - Змініть прозорість банки з 0.5 на 0.8 – як це впливає на вигляд скла? - Змініть колір ґрунту з #3a241d на #8B4513 – який візуальний вплив це має? - Змініть z-index ґрунту на 2 – що відбувається з шаруванням? ### 🔄 Педагогічна перевірка Розуміння візуального дизайну CSS: Переконайтеся, що ви зрозуміли візуальний CSS: - ✅ Як розміри на основі відсотків створюють адаптивний дизайн? - ✅ Чому прозорість створює ефект прозорості скла? - ✅ Яку роль відіграє z-index у шаруванні елементів? - ✅ Як значення border-radius створюють форму банки? Принцип дизайну: Зверніть увагу, як ми створюємо складні візуальні ефекти з простих форм: 1. Прямокутники → Закруглені прямокутники → Компоненти банки 2. Плоскі кольори → Прозорість → Ефект скла 3. Окремі елементи → Шаруватий склад → 3D вигляд --- ## Виклик GitHub Copilot Agent 🚀 Використовуйте режим Agent, щоб виконати наступний виклик: Опис: Створіть CSS-анімацію, яка змушує рослини в тераріумі ніжно хитатися, імітуючи природний ефект вітру. Це допоможе вам попрактикуватися в CSS-анімаціях, трансформаціях і ключових кадрах, а також покращить візуальну привабливість вашого тераріуму. Підказка: Додайте анімації ключових кадрів CSS, щоб рослини в тераріумі ніжно хиталися з боку в бік. Створіть анімацію хитання, яка трохи обертає кожну рослину (на 2-3 градуси) вліво і вправо з тривалістю 3-4 секунди, і застосуйте її до класу .plant. Переконайтеся, що анімація повторюється нескінченно і має функцію easing для природного руху. Дізнайтеся більше про режим Agent тут. ## 🚀 Виклик: Додавання відображень скла Готові покращити ваш тераріум реалістичними відображеннями скла? Ця техніка додасть глибини та реалістичності дизайну. Ви створите тонкі відблиски, які імітують, як світло відбивається від скляних поверхонь. Цей підхід схожий на те, як художники епохи Відродження, такі як Ян ван Ейк, використовували світло і відображення, щоб зробити намальоване скло тривимірним. Ось до чого ви прагнете: Ваш виклик: - Створіть тонкі овальні форми білого або світлого кольору для відображень скла - Розмістіть їх стратегічно на лівій стороні банки - Застосуйте відповідну прозорість і ефекти розмиття для реалістичного відображення світла - Використовуйте border-radius, щоб створити органічні, схожі на бульбашки форми - Експериментуйте з градієнтами або тінями для покращення реалістичності ## Післялекційний тест Післялекційний тест ## Розширте свої знання CSS CSS може здаватися складним на початку, але розуміння цих основних концепцій забезпечує міцну основу для більш складних технік. Ваші наступні області навчання CSS: - Flexbox - спрощує вирівнювання та розподіл елементів - CSS Grid - надає потужні інструменти для створення складних макетів - CSS Variables - зменшує повторення та покращує підтримку - Адаптивний дизайн - забезпечує гарну роботу сайтів на різних розмірах екрана ### Інтерактивні навчальні ресурси Практикуйте ці концепції за допомогою цих захоплюючих інтерактивних ігор: - 🐸 Flexbox Froggy - Опануйте Flexbox через веселі завдання - 🌱 Grid Garden - Вивчайте CSS Grid, вирощуючи віртуальну моркву - 🎯 CSS Battle - Перевірте свої навички CSS за допомогою кодових викликів ### Додаткове навчання Для всебічного вивчення основ CSS пройдіть цей модуль Microsoft Learn: Style your HTML app with CSS ### ⚡ Що ви можете зробити за наступні 5 хвилин - [ ] Відкрийте DevTools і перевірте стилі CSS на будь-якому веб-сайті за допомогою панелі Elements - [ ] Створіть простий CSS-файл і зв’яжіть його з HTML-сторінкою - [ ] Спробуйте змінити кольори різними методами: hex, RGB і названі кольори - [ ] Практикуйте модель коробки, додаючи відступи та поля до div ### 🎯 Що ви можете досягти за цю годину - [ ] Завершіть післялекційний тест і перегляньте основи CSS - [ ] Стилізуйте свою HTML-сторінку за допомогою шрифтів, кольорів і відступів - [ ] Створіть простий макет за допомогою flexbox або grid - [ ] Експериментуйте з переходами CSS для плавних ефектів - [ ] Практикуйте адаптивний дизайн за допомогою медіа-запитів ### 📅 Ваш тижневий CSS-пригодницький план - [ ] Завершіть завдання зі стилізації тераріуму з творчим підходом - [ ] Опануйте CSS Grid, створивши макет фотогалереї - [ ] Вивчіть CSS-анімації, щоб оживити ваші дизайни - [ ] Досліджуйте CSS-препроцесори, такі як Sass або Less - [ ] Вивчайте принципи дизайну та застосовуйте їх до вашого CSS - [ ] Аналізуйте та відтворюйте цікаві дизайни, які ви знайдете в Інтернеті ### 🌟 Ваш місячний план опанування дизайну - [ ] Створіть повну систему дизайну адаптивного веб-сайту - [ ] Вивчіть CSS-in-JS або фреймворки з утилітарним підходом, такі як Tailwind - [ ] Внесіть вклад у проекти з відкритим кодом, покращуючи CSS - [ ] Опануйте складні концепції CSS, такі як користувацькі властивості CSS і containment - [ ] Створіть бібліотеки компонентів із модульним CSS - [ ] Наставляйте інших, хто вивчає CSS, і діліться знаннями про дизайн ## 🎯 Ваш графік опанування CSS ### 🛠️ Підсумок вашого CSS-інструментарію Після завершення цього уроку ви тепер маєте: - Розуміння каскаду: Як стилі успадковуються та перекривають один одного - Опанування селекторів: Точне націлювання на елементи, класи та ID - Навички позиціонування: Стратегічне розміщення та шарування елементів - Візуальний дизайн: Створення ефектів скла, тіней і прозорості - Адаптивні техніки: Макети на основі відсотків, які адаптуються до будь-якого екрана - Організація коду: Чиста, підтримувана структура CSS - Сучасні практики: Використання відносних одиниць і доступних шаблонів дизайну Наступні кроки: Ваш тераріум тепер має як структуру (HTML), так і стиль (CSS). Останній урок додасть інтерактивність за допомогою JavaScript! ## Завдання Рефакторинг CSS --- Відмова від відповідальності: Цей документ був перекладений за допомогою сервісу автоматичного перекладу Co-op Translator. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.
ٹیریریم پروجیکٹ حصہ 1: HTML کا تعارف
HTML، یا HyperText Markup Language، ہر ویب سائٹ کی بنیاد ہے جو آپ نے کبھی دیکھی ہے۔ HTML کو ویب صفحات کا ڈھانچہ سمجھیں – یہ بتاتا ہے کہ مواد کہاں جائے گا، کیسے منظم ہوگا، اور ہر حصہ کیا ظاہر کرتا ہے۔ جبکہ CSS بعد میں آپ کے HTML کو رنگوں اور لے آؤٹ کے ساتھ "سجائے گا"، اور JavaScript اسے انٹرایکٹیویٹی کے ساتھ زندہ کرے گا، HTML وہ بنیادی ڈھانچہ فراہم کرتا ہے جو باقی سب کچھ ممکن بناتا ہے۔ اس سبق میں، آپ ایک ورچوئل ٹیریریم انٹرفیس کے لیے HTML ڈھانچہ بنائیں گے۔ یہ عملی پروجیکٹ آپ کو بنیادی HTML تصورات سکھائے گا جبکہ کچھ بصری طور پر دلچسپ چیز بناتے ہوئے۔ آپ سیکھیں گے کہ مواد کو سیمینٹک عناصر کے ذریعے کیسے منظم کریں، تصاویر کے ساتھ کام کریں، اور ایک انٹرایکٹو ویب ایپلیکیشن کے لیے بنیاد بنائیں۔ سبق کے اختتام تک، آپ کے پاس ایک کام کرنے والا HTML صفحہ ہوگا جو پودوں کی تصاویر کو منظم کالموں میں دکھائے گا، اگلے سبق میں اسٹائلنگ کے لیے تیار۔ اگر یہ شروع میں بنیادی لگے تو پریشان نہ ہوں – یہی HTML کا کام ہے، CSS کے اضافے سے پہلے۔ ## پری لیکچر کوئز پری لیکچر کوئز ## اپنے پروجیکٹ کو ترتیب دینا HTML کوڈ میں جانے سے پہلے، آئیے آپ کے ٹیریریم پروجیکٹ کے لیے ایک مناسب ورک اسپیس ترتیب دیں۔ شروع سے ایک منظم فائل ڈھانچہ بنانا ایک اہم عادت ہے جو آپ کے ویب ڈیولپمنٹ کے سفر میں آپ کے لیے فائدہ مند ہوگی۔ ### کام: اپنے پروجیکٹ کا ڈھانچہ بنائیں آپ اپنے ٹیریریم پروجیکٹ کے لیے ایک مخصوص فولڈر بنائیں گے اور اپنی پہلی HTML فائل شامل کریں گے۔ یہاں دو طریقے ہیں جنہیں آپ استعمال کر سکتے ہیں: آپشن 1: Visual Studio Code کا استعمال 1. Visual Studio Code کھولیں 2. "File" → "Open Folder" پر کلک کریں یا Ctrl+K, Ctrl+O (Windows/Linux) یا Cmd+K, Cmd+O (Mac) استعمال کریں 3. ایک نیا فولڈر بنائیں جس کا نام terrarium ہو اور اسے منتخب کریں 4. Explorer پین میں، "New File" آئیکن پر کلک کریں 5. اپنی فائل کا نام index.html رکھیں آپشن 2: ٹرمینل کمانڈز کا استعمال یہ کمانڈز کیا کرتی ہیں: - ایک نیا ڈائریکٹری بناتی ہیں جس کا نام terrarium ہے آپ کے پروجیکٹ کے لیے - ٹریریم ڈائریکٹری میں جاتی ہیں - ایک خالی index.html فائل بناتی ہیں - فائل کو Visual Studio Code میں ایڈیٹنگ کے لیے کھولتی ہیں ## HTML دستاویز کا ڈھانچہ سمجھنا ہر HTML دستاویز ایک مخصوص ڈھانچے کی پیروی کرتی ہے جسے براؤزرز کو صحیح طریقے سے سمجھنے اور دکھانے کی ضرورت ہوتی ہے۔ اس ڈھانچے کو ایک رسمی خط کی طرح سمجھیں – اس میں مطلوبہ عناصر ایک خاص ترتیب میں ہوتے ہیں جو وصول کنندہ (اس صورت میں، براؤزر) کو مواد کو صحیح طریقے سے پروسیس کرنے میں مدد دیتے ہیں۔ آئیے وہ ضروری بنیاد شامل کریں جو ہر HTML دستاویز کو چاہیے۔ ### DOCTYPE اعلان اور روٹ عنصر کسی بھی HTML فائل کی پہلی دو لائنیں براؤزر کے لیے دستاویز کا "تعارف" ہوتی ہیں: یہ کوڈ کیا کرتا ہے: - دستاویز کی قسم HTML5 کے طور پر اعلان کرتا ہے <!DOCTYPE html> استعمال کرتے ہوئے - روٹ <html> عنصر بناتا ہے جو تمام صفحہ مواد کو رکھے گا - جدید ویب معیارات قائم کرتا ہے مناسب براؤزر رینڈرنگ کے لیے - مختلف براؤزرز اور ڈیوائسز پر مستقل ڈسپلے کو یقینی بناتا ہے ### 🔄 تعلیمی جائزہ رکیں اور غور کریں: جاری رکھنے سے پہلے، یقینی بنائیں کہ آپ سمجھتے ہیں: - ✅ کیوں ہر HTML دستاویز کو DOCTYPE اعلان کی ضرورت ہوتی ہے - ✅ <html> روٹ عنصر کیا رکھتا ہے - ✅ یہ ڈھانچہ براؤزرز کو صفحات کو صحیح طریقے سے رینڈر کرنے میں کیسے مدد کرتا ہے خود کو جلدی آزمائیں: کیا آپ اپنے الفاظ میں وضاحت کر سکتے ہیں کہ "معیارات کے مطابق رینڈرنگ" کا کیا مطلب ہے؟ ## ضروری دستاویز میٹا ڈیٹا شامل کرنا HTML دستاویز کا <head> سیکشن اہم معلومات رکھتا ہے جو براؤزرز اور سرچ انجنز کو چاہیے، لیکن جو وزیٹرز کو صفحے پر براہ راست نظر نہیں آتی۔ اسے "پردے کے پیچھے" معلومات سمجھیں جو آپ کے ویب صفحے کو صحیح طریقے سے کام کرنے اور مختلف ڈیوائسز اور پلیٹ فارمز پر صحیح طور پر ظاہر ہونے میں مدد دیتی ہے۔ یہ میٹا ڈیٹا براؤزرز کو بتاتا ہے کہ آپ کا صفحہ کیسے دکھایا جائے، کون سا کریکٹر انکوڈنگ استعمال کیا جائے، اور مختلف اسکرین سائزز کو کیسے ہینڈل کیا جائے – پیشہ ورانہ، قابل رسائی ویب صفحات بنانے کے لیے سب ضروری ہیں۔ ### کام: دستاویز کا ہیڈ شامل کریں اپنے <html> ٹیگز کے درمیان یہ <head> سیکشن شامل کریں: ہر عنصر کیا کرتا ہے: - صفحے کا عنوان سیٹ کرتا ہے جو براؤزر ٹیبز اور سرچ نتائج میں ظاہر ہوتا ہے - UTF-8 کریکٹر انکوڈنگ کی وضاحت کرتا ہے تاکہ دنیا بھر میں صحیح ٹیکسٹ ڈسپلے ہو - جدید Internet Explorer ورژنز کے ساتھ مطابقت کو یقینی بناتا ہے - ریسپانسیو ڈیزائن کو ترتیب دیتا ہے ڈیوائس کی چوڑائی سے میچ کرنے کے لیے ویوپورٹ سیٹ کرکے - ابتدائی زوم لیول کنٹرول کرتا ہے تاکہ مواد کو قدرتی سائز پر دکھایا جا سکے ## دستاویز کا باڈی بنانا HTML دستاویز کا <body> عنصر آپ کے ویب صفحے کے تمام نظر آنے والے مواد کو رکھتا ہے – وہ سب کچھ جو صارفین دیکھیں گے اور اس کے ساتھ تعامل کریں گے۔ جبکہ <head> سیکشن نے براؤزر کو ہدایات فراہم کیں، <body> سیکشن اصل مواد رکھتا ہے: ٹیکسٹ، تصاویر، بٹن، اور دیگر عناصر جو آپ کا یوزر انٹرفیس بناتے ہیں۔ آئیے باڈی ڈھانچہ شامل کریں اور سمجھیں کہ HTML ٹیگز ایک ساتھ کیسے کام کرتے ہیں تاکہ معنی خیز مواد بنائیں۔ ### HTML ٹیگ ڈھانچہ سمجھنا HTML جوڑے ٹیگز استعمال کرتا ہے تاکہ عناصر کی وضاحت کی جا سکے۔ زیادہ تر ٹیگز کے پاس ایک اوپننگ ٹیگ ہوتا ہے جیسے <p> اور ایک کلوزنگ ٹیگ جیسے </p>, جس کے درمیان مواد ہوتا ہے: <p>Hello, world!</p>. یہ ایک پیراگراف عنصر بناتا ہے جس میں "Hello, world!" ٹیکسٹ ہوتا ہے۔ ### کام: باڈی عنصر شامل کریں اپنی HTML فائل کو اپ ڈیٹ کریں تاکہ اس میں <body> عنصر شامل ہو: یہ مکمل ڈھانچہ کیا فراہم کرتا ہے: - HTML5 دستاویز کا بنیادی فریم ورک قائم کرتا ہے - صحیح براؤزر رینڈرنگ کے لیے ضروری میٹا ڈیٹا شامل کرتا ہے - ایک خالی باڈی بناتا ہے جو آپ کے نظر آنے والے مواد کے لیے تیار ہے - جدید ویب ڈیولپمنٹ کے بہترین طریقوں کی پیروی کرتا ہے اب آپ اپنے ٹیریریم کے نظر آنے والے عناصر شامل کرنے کے لیے تیار ہیں۔ ہم <div> عناصر کو کنٹینرز کے طور پر استعمال کریں گے تاکہ مواد کے مختلف حصوں کو منظم کریں، اور <img> عناصر کو پودوں کی تصاویر دکھانے کے لیے استعمال کریں۔ ### تصاویر اور لے آؤٹ کنٹینرز کے ساتھ کام کرنا HTML میں تصاویر خاص ہوتی ہیں کیونکہ وہ "سیلف کلوزنگ" ٹیگز استعمال کرتی ہیں۔ عناصر جیسے <p></p> کے برعکس جو مواد کے ارد گرد لپیٹتے ہیں، <img> ٹیگ اپنی تمام معلومات ٹیگ کے اندر ہی رکھتا ہے، جیسے src تصویر فائل کے راستے کے لیے اور alt رسائی کے لیے۔ تصاویر کو اپنے HTML میں شامل کرنے سے پہلے، آپ کو اپنے پروجیکٹ فائلز کو صحیح طریقے سے منظم کرنے کی ضرورت ہوگی، ایک تصاویر فولڈر بنا کر اور پودوں کے گرافکس شامل کر کے۔ پہلے، اپنی تصاویر ترتیب دیں: 1. اپنے ٹیریریم پروجیکٹ فولڈر کے اندر ایک فولڈر بنائیں جس کا نام images ہو 2. پودوں کی تصاویر حل فولڈر سے ڈاؤن لوڈ کریں (کل 14 پودوں کی تصاویر) 3. تمام پودوں کی تصاویر اپنے نئے images فولڈر میں کاپی کریں ### کام: پودوں کی ڈسپلے لے آؤٹ بنائیں اب اپنے <body></body> ٹیگز کے درمیان پودوں کی تصاویر کو دو کالموں میں منظم کریں: مرحلہ وار، اس کوڈ میں کیا ہو رہا ہے: - ایک مرکزی صفحہ کنٹینر بناتا ہے id="page" کے ساتھ تمام مواد رکھنے کے لیے - دو کالم کنٹینرز قائم کرتا ہے: left-container اور right-container - 7 پودوں کو بائیں کالم میں اور 7 پودوں کو دائیں کالم میں منظم کرتا ہے - ہر پودے کی تصویر کو ایک plant-holder div میں لپیٹتا ہے انفرادی پوزیشننگ کے لیے - CSS اسٹائلنگ کے لیے مستقل کلاس ناموں کا اطلاق کرتا ہے اگلے سبق میں - ہر پودے کی تصویر کو منفرد IDs تفویض کرتا ہے بعد میں JavaScript انٹریکشن کے لیے - تصاویر فولڈر کی طرف اشارہ کرنے والے صحیح فائل راستے شامل کرتا ہے ### 🔄 تعلیمی جائزہ ڈھانچہ سمجھنا: اپنے HTML ڈھانچے کا جائزہ لینے کے لیے ایک لمحہ نکالیں: - ✅ کیا آپ اپنے لے آؤٹ میں مرکزی کنٹینرز کی شناخت کر سکتے ہیں؟ - ✅ کیا آپ سمجھتے ہیں کہ ہر تصویر کے پاس منفرد ID کیوں ہے؟ - ✅ آپ plant-holder divs کے مقصد کو کیسے بیان کریں گے؟ بصری معائنہ: اپنے HTML فائل کو براؤزر میں کھولیں۔ آپ کو دیکھنا چاہیے: - پودوں کی تصاویر کی ایک بنیادی فہرست - تصاویر دو کالموں میں منظم - سادہ، بغیر اسٹائل کا لے آؤٹ یاد رکھیں: یہ سادہ ظاہری شکل بالکل وہی ہے جو HTML کو CSS اسٹائلنگ سے پہلے نظر آنا چاہیے! اس مارک اپ کے اضافے کے ساتھ، پودے اسکرین پر ظاہر ہوں گے، حالانکہ وہ ابھی تک پالش نہیں لگیں گے – یہی کام CSS کا ہے اگلے سبق میں! فی الحال، آپ کے پاس ایک مضبوط HTML بنیاد ہے جو آپ کے مواد کو صحیح طریقے سے منظم کرتی ہے اور رسائی کے بہترین طریقوں کی پیروی کرتی ہے۔ ## رسائی کے لیے سیمینٹک HTML کا استعمال سیمینٹک HTML کا مطلب ہے HTML عناصر کو ان کے معنی اور مقصد کی بنیاد پر منتخب کرنا، نہ کہ صرف ان کی ظاہری شکل پر۔ جب آپ سیمینٹک مارک اپ استعمال کرتے ہیں، تو آپ اپنے مواد کی ساخت اور معنی کو براؤزرز، سرچ انجنز، اور اسسٹیو ٹیکنالوجیز جیسے اسکرین ریڈرز کے ساتھ بات چیت کرتے ہیں۔ یہ طریقہ آپ کی ویب سائٹس کو معذوری والے صارفین کے لیے زیادہ قابل رسائی بناتا ہے اور سرچ انجنز کو آپ کے مواد کو بہتر سمجھنے میں مدد دیتا ہے۔ یہ جدید ویب ڈیولپمنٹ کا ایک بنیادی اصول ہے جو سب کے لیے بہتر تجربات پیدا کرتا ہے۔ ### سیمینٹک صفحہ عنوان شامل کرنا آئیے آپ کے ٹیریریم صفحے کے لیے ایک مناسب ہیڈنگ شامل کریں۔ اپنے اوپننگ <body> ٹیگ کے فوراً بعد یہ لائن شامل کریں: کیوں سیمینٹک مارک اپ اہم ہے: - اسکرین ریڈرز کو صفحے کی ساخت کو نیویگیٹ کرنے اور سمجھنے میں مدد دیتا ہے - سرچ انجن آپٹیمائزیشن (SEO) کو بہتر بناتا ہے مواد کی درجہ بندی کو واضح کر کے - بصری معذوری یا علمی فرق والے صارفین کے لیے رسائی کو بڑھاتا ہے - تمام ڈیوائسز اور پلیٹ فارمز پر بہتر یوزر تجربات پیدا کرتا ہے - پیشہ ورانہ ترقی کے لیے ویب معیارات اور بہترین طریقوں کی پیروی کرتا ہے سیمینٹک بمقابلہ غیر سیمینٹک انتخاب کی مثالیں: ## ٹیریریم کنٹینر بنانا اب آئیے ٹیریریم کے لیے HTML ڈھانچہ شامل کریں – شیشے کا کنٹینر جہاں پودے بالآخر رکھے جائیں گے۔ یہ سیکشن ایک اہم تصور کو ظاہر کرتا ہے: HTML ڈھانچہ فراہم کرتا ہے، لیکن CSS اسٹائلنگ کے بغیر، یہ عناصر ابھی تک نظر نہیں آئیں گے۔ ٹریریم مارک اپ وضاحتی کلاس ناموں کا استعمال کرتا ہے جو اگلے سبق میں CSS اسٹائلنگ - الگ الگ عناصر ہر بصری جزو کے لیے (اوپر، دیواریں، مٹی، نیچے) کی وضاحت کرتا ہے - شامل کرتا ہے شیشے کے انعکاس اثرات کے لیے اندرونی عناصر (چمکدار عناصر) - استعمال کرتا ہے وضاحتی کلاس نام جو ہر عنصر کے مقصد کو واضح طور پر ظاہر کرتے ہیں - تیار کرتا ہے ساخت کو CSS اسٹائلنگ کے لیے جو شیشے کے ٹیریریم کی شکل پیدا کرے گا ### 🔄 تعلیمی جائزہ HTML ساخت کی مہارت: آگے بڑھنے سے پہلے، یقینی بنائیں کہ آپ: - ✅ HTML ساخت اور بصری ظاہری شکل کے فرق کو بیان کر سکتے ہیں - ✅ معنوی اور غیر معنوی HTML عناصر کی شناخت کر سکتے ہیں - ✅ وضاحت کر سکتے ہیں کہ مناسب مارک اپ رسائی کو کیسے فائدہ پہنچاتا ہے - ✅ مکمل دستاویز درخت کی ساخت کو پہچان سکتے ہیں اپنی سمجھ کی جانچ کریں: اپنے HTML فائل کو براؤزر میں جاوا اسکرپٹ غیر فعال اور CSS ہٹانے کے ساتھ کھولنے کی کوشش کریں۔ یہ آپ کو وہ خالص معنوی ساخت دکھاتا ہے جو آپ نے تخلیق کی ہے! --- ## GitHub Copilot Agent Challenge Agent موڈ استعمال کریں اور درج ذیل چیلنج مکمل کریں: تفصیل: ٹیریریم پروجیکٹ میں شامل کرنے کے لیے پودوں کی دیکھ بھال کے گائیڈ سیکشن کے لیے ایک معنوی HTML ساخت بنائیں۔ پرومپٹ: ایک معنوی HTML سیکشن بنائیں جس میں ایک مرکزی سرخی "پودوں کی دیکھ بھال کی گائیڈ"، تین ذیلی سیکشنز کے ساتھ سرخیاں "پانی دینا"، "روشنی کی ضروریات"، اور "مٹی کی دیکھ بھال"، ہر ایک میں پودوں کی دیکھ بھال کی معلومات کا ایک پیراگراف شامل ہو۔ مناسب معنوی HTML ٹیگز جیسے <section>, <h2>, <h3>, اور <p> استعمال کریں تاکہ مواد کو مناسب طریقے سے ترتیب دیا جا سکے۔ مزید جانیں agent mode کے بارے میں یہاں۔ ## HTML تاریخ چیلنج ویب ارتقاء کے بارے میں سیکھنا HTML نے 1990 میں CERN میں ٹم برنرز لی کے پہلے ویب براؤزر بنانے کے بعد سے نمایاں ترقی کی ہے۔ کچھ پرانے ٹیگز جیسے <marquee> اب ختم ہو چکے ہیں کیونکہ وہ جدید رسائی کے معیار اور جوابدہ ڈیزائن اصولوں کے ساتھ اچھی طرح کام نہیں کرتے۔ یہ تجربہ آزمائیں: 1. عارضی طور پر اپنی <h1> سرخی کو <marquee> ٹیگ میں لپیٹیں: <marquee><h1>میرا ٹیریریم</h1></marquee> 2. اپنے صفحے کو براؤزر میں کھولیں اور اسکرولنگ اثر کا مشاہدہ کریں 3. غور کریں کہ یہ ٹیگ کیوں ختم ہو گیا (اشارہ: صارف کے تجربے اور رسائی کے بارے میں سوچیں) 4. <marquee> ٹیگ کو ہٹا دیں اور معنوی مارک اپ پر واپس جائیں عکاسی کے سوالات: - اسکرولنگ سرخی بصری معذوری یا حرکت کی حساسیت والے صارفین کو کیسے متاثر کر سکتی ہے؟ - کون سی جدید CSS تکنیکیں اسی طرح کے بصری اثرات کو زیادہ قابل رسائی طریقے سے حاصل کر سکتی ہیں؟ - موجودہ ویب معیارات کو ختم شدہ عناصر کے بجائے استعمال کرنا کیوں ضروری ہے؟ مزید دریافت کریں obsolete and deprecated HTML elements کے بارے میں تاکہ سمجھ سکیں کہ ویب معیارات صارف کے تجربے کو بہتر بنانے کے لیے کیسے ترقی کرتے ہیں۔ ## لیکچر کے بعد کا کوئز لیکچر کے بعد کا کوئز ## جائزہ اور خود مطالعہ اپنے HTML علم کو گہرا کریں HTML ویب کی بنیاد 30 سال سے زیادہ عرصے سے ہے، ایک سادہ دستاویز مارک اپ زبان سے انٹرایکٹو ایپلیکیشنز بنانے کے لیے ایک جدید پلیٹ فارم تک ترقی کر چکا ہے۔ اس ارتقاء کو سمجھنا آپ کو جدید ویب معیارات کی قدر کرنے اور بہتر ترقیاتی فیصلے کرنے میں مدد دیتا ہے۔ تجویز کردہ سیکھنے کے راستے: 1. HTML تاریخ اور ارتقاء - HTML 1.0 سے HTML5 تک کے ٹائم لائن کی تحقیق کریں - معلوم کریں کہ کچھ ٹیگز کیوں ختم ہو گئے (رسائی، موبائل دوستانہ، دیکھ بھال) - ابھرتی ہوئی HTML خصوصیات اور تجاویز کی تحقیق کریں 2. معنوی HTML کی گہرائی میں مطالعہ - HTML5 معنوی عناصر کی مکمل فہرست کا مطالعہ کریں - یہ پہچاننے کی مشق کریں کہ کب <article>, <section>, <aside>, اور <main> استعمال کرنا ہے - بہتر رسائی کے لیے ARIA صفات کے بارے میں سیکھیں 3. جدید ویب ترقی - جوابدہ ویب سائٹس بنانا Microsoft Learn پر دریافت کریں - سمجھیں کہ HTML CSS اور جاوا اسکرپٹ کے ساتھ کیسے مربوط ہوتا ہے - ویب کارکردگی اور SEO بہترین طریقوں کے بارے میں سیکھیں عکاسی کے سوالات: - آپ نے کون سے ختم شدہ HTML ٹیگز دریافت کیے، اور وہ کیوں ہٹائے گئے؟ - HTML کے مستقبل کے ورژنز کے لیے کون سی نئی خصوصیات تجویز کی جا رہی ہیں؟ - معنوی HTML ویب رسائی اور SEO میں کیسے مدد دیتا ہے؟ ### ⚡ اگلے 5 منٹ میں آپ کیا کر سکتے ہیں - [ ] DevTools (F12) کھولیں اور اپنی پسندیدہ ویب سائٹ کے HTML ساخت کا معائنہ کریں - [ ] بنیادی ٹیگز کے ساتھ ایک سادہ HTML فائل بنائیں: <h1>, <p>, اور <img> - [ ] W3C HTML Validator آن لائن کے ذریعے اپنے HTML کی توثیق کریں - [ ] اپنے HTML میں ایک تبصرہ شامل کرنے کی کوشش کریں <!-- تبصرہ --> ### 🎯 اس گھنٹے میں آپ کیا حاصل کر سکتے ہیں - [ ] لیکچر کے بعد کا کوئز مکمل کریں اور معنوی HTML تصورات کا جائزہ لیں - [ ] مناسب HTML ساخت کے ساتھ اپنے بارے میں ایک سادہ ویب صفحہ بنائیں - [ ] مختلف سرخی کی سطحوں اور متن فارمیٹنگ ٹیگز کے ساتھ تجربہ کریں - [ ] ملٹی میڈیا انضمام کی مشق کے لیے تصاویر اور لنکس شامل کریں - [ ] HTML5 خصوصیات پر تحقیق کریں جو آپ نے ابھی تک آزمائی نہیں ہیں ### 📅 آپ کا ہفتہ بھر کا HTML سفر - [ ] معنوی مارک اپ کے ساتھ ٹیریریم پروجیکٹ اسائنمنٹ مکمل کریں - [ ] ARIA لیبلز اور رولز کا استعمال کرتے ہوئے ایک قابل رسائی ویب صفحہ بنائیں - [ ] مختلف ان پٹ اقسام کے ساتھ فارم تخلیق کی مشق کریں - [ ] HTML5 APIs جیسے localStorage یا geolocation کو دریافت کریں - [ ] جوابدہ HTML پیٹرنز اور موبائل فرسٹ ڈیزائن کا مطالعہ کریں - [ ] دوسرے ڈویلپرز کے HTML کوڈ کا جائزہ لیں بہترین طریقوں کے لیے ### 🌟 آپ کا مہینہ بھر کا ویب بنیاد - [ ] اپنی HTML مہارت کو ظاہر کرنے کے لیے ایک پورٹ فولیو ویب سائٹ بنائیں - [ ] Handlebars جیسے فریم ورک کے ساتھ HTML ٹیمپلیٹنگ سیکھیں - [ ] اوپن سورس پروجیکٹس میں حصہ لیں HTML دستاویزات کو بہتر بنا کر - [ ] جدید HTML تصورات جیسے کسٹم عناصر میں مہارت حاصل کریں - [ ] HTML کو CSS فریم ورک اور جاوا اسکرپٹ لائبریریوں کے ساتھ مربوط کریں - [ ] HTML بنیادی اصول سیکھنے والوں کی رہنمائی کریں ## 🎯 آپ کا HTML مہارت کا ٹائم لائن ### 🛠️ آپ کا HTML ٹول کٹ خلاصہ اس سبق کو مکمل کرنے کے بعد، آپ کے پاس: - دستاویز کی ساخت: مکمل HTML5 بنیاد مناسب DOCTYPE کے ساتھ - معنوی مارک اپ: معنی خیز ٹیگز جو رسائی اور SEO کو بہتر بناتے ہیں - تصویری انضمام: مناسب فائل تنظیم اور alt متن کے طریقے - لے آؤٹ کنٹینرز: وضاحتی کلاس ناموں کے ساتھ divs کا اسٹریٹجک استعمال - رسائی کی آگاہی: اسکرین ریڈر نیویگیشن کی سمجھ - جدید معیارات: موجودہ HTML5 طریقے اور ختم شدہ ٹیگ کا علم - پروجیکٹ کی بنیاد: CSS اسٹائلنگ اور جاوا اسکرپٹ انٹرایکٹیویٹی کے لیے مضبوط بنیاد اگلے مراحل: آپ کی HTML ساخت CSS اسٹائلنگ کے لیے تیار ہے! آپ نے جو معنوی بنیاد بنائی ہے وہ اگلے سبق کو سمجھنے میں بہت آسان بنا دے گی۔ ## اسائنمنٹ اپنے HTML کی مشق کریں: بلاگ ماک اپ بنائیں --- ڈسکلیمر: یہ دستاویز AI ترجمہ سروس Co-op Translator کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
ٹیریریم پروجیکٹ حصہ 2: CSS کا تعارف
یاد ہے آپ کا HTML ٹیریریم کتنا سادہ نظر آ رہا تھا؟ CSS وہ جگہ ہے جہاں ہم اس سادہ ڈھانچے کو بصری طور پر دلکش چیز میں تبدیل کرتے ہیں۔ اگر HTML کو گھر کا فریم بنانے جیسا سمجھا جائے، تو CSS وہ سب کچھ ہے جو اسے گھر جیسا محسوس کراتا ہے - رنگ، فرنیچر کی ترتیب، روشنی، اور کمرے کیسے ایک دوسرے سے جڑے ہوئے ہیں۔ سوچیں کہ کیسے ورسائی کا محل ایک سادہ شکار کے لاج سے شروع ہوا، لیکن سجاوٹ اور ترتیب پر توجہ نے اسے دنیا کی سب سے شاندار عمارتوں میں تبدیل کر دیا۔ آج، ہم آپ کے ٹیریریم کو فعال سے خوبصورت میں تبدیل کریں گے۔ آپ سیکھیں گے کہ عناصر کو بالکل صحیح جگہ پر کیسے رکھیں، مختلف اسکرین سائزز کے مطابق لے آؤٹ کو کیسے جوابدہ بنائیں، اور وہ بصری کشش پیدا کریں جو ویب سائٹس کو دلچسپ بناتی ہے۔ اس سبق کے اختتام تک، آپ دیکھیں گے کہ کس طرح اسٹریٹجک CSS اسٹائلنگ آپ کے پروجیکٹ کو ڈرامائی طور پر بہتر بنا سکتی ہے۔ آئیے آپ کے ٹیریریم میں کچھ اسٹائل شامل کریں۔ ## پری لیکچر کوئز پری لیکچر کوئز ## CSS کے ساتھ شروعات CSS کو اکثر "چیزوں کو خوبصورت بنانے" کے طور پر سمجھا جاتا ہے، لیکن یہ اس سے کہیں زیادہ وسیع مقصد رکھتا ہے۔ CSS فلم کے ڈائریکٹر ہونے جیسا ہے - آپ نہ صرف یہ کنٹرول کرتے ہیں کہ سب کچھ کیسا نظر آتا ہے، بلکہ یہ کیسے حرکت کرتا ہے، تعامل پر کیسے جواب دیتا ہے، اور مختلف حالات میں کیسے ڈھلتا ہے۔ جدید CSS حیرت انگیز طور پر قابل ہے۔ آپ ایسا کوڈ لکھ سکتے ہیں جو خود بخود فونز، ٹیبلٹس، اور ڈیسک ٹاپ کمپیوٹرز کے لے آؤٹ کو ایڈجسٹ کرتا ہے۔ آپ ہموار اینیمیشنز بنا سکتے ہیں جو صارفین کی توجہ کو ضرورت کے مطابق گائیڈ کرتی ہیں۔ جب سب کچھ ایک ساتھ کام کرتا ہے تو نتائج کافی متاثر کن ہو سکتے ہیں۔ اس سبق میں ہم یہ حاصل کریں گے: - بنائیں گے جدید CSS تکنیکوں کا استعمال کرتے ہوئے آپ کے ٹیریریم کے لیے مکمل بصری ڈیزائن - دریافت کریں گے بنیادی تصورات جیسے کہ کیسکیڈ، وراثت، اور CSS سلیکٹرز - نافذ کریں گے جوابدہ پوزیشننگ اور لے آؤٹ کی حکمت عملی - بنائیں گے CSS شیپس اور اسٹائلنگ کا استعمال کرتے ہوئے ٹیریریم کنٹینر ### پیشگی شرط آپ کو اپنے ٹیریریم کے لیے HTML ڈھانچہ مکمل کر لینا چاہیے جو پچھلے سبق میں تھا اور اسے اسٹائل کے لیے تیار رکھنا چاہیے۔ ### اپنے CSS فائل کو سیٹ اپ کرنا اسٹائلنگ شروع کرنے سے پہلے، ہمیں CSS کو اپنے HTML سے جوڑنا ہوگا۔ یہ کنکشن براؤزر کو بتاتا ہے کہ ہمارے ٹیریریم کے لیے اسٹائلنگ ہدایات کہاں سے حاصل کرنی ہیں۔ اپنے ٹیریریم فولڈر میں، ایک نئی فائل بنائیں جس کا نام style.css ہو، پھر اسے اپنے HTML دستاویز کے <head> سیکشن میں لنک کریں: یہ کوڈ کیا کرتا ہے: - بناتا ہے آپ کے HTML اور CSS فائلز کے درمیان کنکشن - بتاتا ہے براؤزر کو کہ style.css سے اسٹائلز لوڈ اور اپلائی کریں - استعمال کرتا ہے rel="stylesheet" ایٹریبیوٹ یہ بتانے کے لیے کہ یہ CSS فائل ہے - حوالہ دیتا ہے فائل کے راستے کو href="./style.css" کے ساتھ ## CSS کی کیسکیڈ کو سمجھنا کبھی سوچا کہ CSS کو "Cascading" اسٹائل شیٹس کیوں کہا جاتا ہے؟ اسٹائلز ایک آبشار کی طرح نیچے گرتے ہیں، اور کبھی کبھی وہ ایک دوسرے سے ٹکراتے ہیں۔ سوچیں کہ فوجی کمانڈ ڈھانچے کیسے کام کرتے ہیں - ایک جنرل آرڈر کہہ سکتا ہے "تمام فوجی سبز پہنیں"، لیکن آپ کی یونٹ کے لیے ایک خاص آرڈر کہہ سکتا ہے "تقریب کے لیے نیلے لباس پہنیں"۔ زیادہ مخصوص ہدایت کو ترجیح دی جاتی ہے۔ CSS اسی منطق کی پیروی کرتا ہے، اور اس درجہ بندی کو سمجھنا ڈیبگنگ کو بہت زیادہ قابل انتظام بناتا ہے۔ ### کیسکیڈ ترجیح کے ساتھ تجربہ کرنا آئیے کیسکیڈ کو ایک اسٹائل تنازعہ بنا کر عمل میں دیکھتے ہیں۔ پہلے، اپنے <h1> ٹیگ میں ایک ان لائن اسٹائل شامل کریں: یہ کوڈ کیا کرتا ہے: - لاگو کرتا ہے ایک سرخ رنگ کو براہ راست <h1> عنصر پر ان لائن اسٹائلنگ کا استعمال کرتے ہوئے - استعمال کرتا ہے style ایٹریبیوٹ کو CSS کو براہ راست HTML میں شامل کرنے کے لیے - بناتا ہے اس مخصوص عنصر کے لیے سب سے زیادہ ترجیحی اسٹائل رول پھر، اپنے style.css فائل میں یہ رول شامل کریں: اوپر میں ہم نے: - تعریف کی ایک CSS رول جو تمام <h1> عناصر کو ہدف بناتا ہے - سیٹ کیا ٹیکسٹ کا رنگ نیلا ایک بیرونی اسٹائل شیٹ کا استعمال کرتے ہوئے - بنایا ایک کم ترجیحی رول ان لائن اسٹائلز کے مقابلے میں ✅ علمی جانچ: آپ کے ویب ایپ میں کون سا رنگ ظاہر ہوتا ہے؟ وہ رنگ کیوں جیتتا ہے؟ کیا آپ ایسے منظرنامے سوچ سکتے ہیں جہاں آپ اسٹائلز کو اوور رائیڈ کرنا چاہیں؟ ## CSS وراثت کا عمل CSS وراثت جینیات کی طرح کام کرتی ہے - عناصر اپنے پیرنٹ عناصر سے کچھ پراپرٹیز وراثت میں لیتے ہیں۔ اگر آپ نے باڈی عنصر پر فونٹ فیملی سیٹ کیا ہے، تو اندر کا تمام ٹیکسٹ خود بخود وہی فونٹ استعمال کرتا ہے۔ یہ بالکل ویسے ہی ہے جیسے ہابسبرگ خاندان کی منفرد جبڑے کی ساخت نسلوں میں ظاہر ہوئی بغیر ہر فرد کے لیے مخصوص کیے۔ تاہم، سب کچھ وراثت میں نہیں ملتا۔ ٹیکسٹ اسٹائلز جیسے فونٹس اور رنگ وراثت میں ملتے ہیں، لیکن لے آؤٹ پراپرٹیز جیسے مارجنز اور بارڈرز نہیں ملتے۔ جیسے بچے جسمانی خصوصیات وراثت میں لے سکتے ہیں لیکن اپنے والدین کے فیشن انتخاب نہیں۔ ### فونٹ وراثت کا مشاہدہ آئیے وراثت کو عمل میں دیکھتے ہیں باڈی عنصر پر فونٹ فیملی سیٹ کر کے: یہاں کیا ہوتا ہے: - سیٹ کرتا ہے فونٹ فیملی پورے صفحے کے لیے باڈی عنصر کو ہدف بنا کر - استعمال کرتا ہے ایک فونٹ اسٹیک فال بیک آپشنز کے ساتھ بہتر براؤزر مطابقت کے لیے - لاگو کرتا ہے جدید سسٹم فونٹس جو مختلف آپریٹنگ سسٹمز پر بہترین نظر آتے ہیں - یقینی بناتا ہے کہ تمام چائلڈ عناصر یہ فونٹ وراثت میں لیتے ہیں جب تک کہ خاص طور پر اوور رائیڈ نہ کیا جائے اپنے براؤزر کے ڈیولپر ٹولز (F12) کھولیں، ایلیمنٹس ٹیب پر جائیں، اور اپنے <h1> عنصر کا معائنہ کریں۔ آپ دیکھیں گے کہ یہ باڈی سے فونٹ فیملی وراثت میں لیتا ہے: ✅ تجربہ کا وقت: باڈی پر دیگر وراثت میں ملنے والی پراپرٹیز جیسے color, line-height, یا text-align سیٹ کرنے کی کوشش کریں۔ آپ کے ہیڈنگ اور دیگر عناصر کے ساتھ کیا ہوتا ہے؟ ### 🔄 تعلیمی جائزہ CSS بنیادوں کی سمجھ: سلیکٹرز پر جانے سے پہلے، یقینی بنائیں کہ آپ: - ✅ کیسکیڈ اور وراثت کے فرق کو بیان کر سکتے ہیں - ✅ پیش گوئی کر سکتے ہیں کہ کون سا اسٹائل مخصوصیت تنازعہ میں جیتے گا - ✅ شناخت کر سکتے ہیں کہ کون سی پراپرٹیز پیرنٹ عناصر سے وراثت میں ملتی ہیں - ✅ CSS فائلز کو HTML کے ساتھ صحیح طریقے سے جوڑ سکتے ہیں فوری ٹیسٹ: اگر آپ کے پاس یہ اسٹائلز ہیں، تو <div class="special"> کے اندر ایک <h1> کا رنگ کیا ہوگا؟ جواب: سرخ (عنصر سلیکٹر براہ راست h1 کو ہدف بناتا ہے) ## CSS سلیکٹرز میں مہارت حاصل کرنا CSS سلیکٹرز آپ کے لیے مخصوص عناصر کو اسٹائل کرنے کا طریقہ ہیں۔ یہ بالکل درست ہدایات دینے جیسا کام کرتے ہیں - "گھر" کہنے کے بجائے، آپ کہہ سکتے ہیں "نیلے گھر جس کے دروازے پر سرخ رنگ ہے، میپل اسٹریٹ پر۔" CSS مختلف طریقے فراہم کرتا ہے مخصوص ہونے کے لیے، اور صحیح سلیکٹر کا انتخاب کرنا کام کے لیے مناسب ٹول کا انتخاب کرنے جیسا ہے۔ کبھی آپ کو پورے محلے کے دروازے اسٹائل کرنے کی ضرورت ہوتی ہے، اور کبھی صرف ایک مخصوص دروازہ۔ ### عنصر سلیکٹرز (ٹیگز) عنصر سلیکٹرز HTML عناصر کو ان کے ٹیگ نام سے ہدف بناتے ہیں۔ یہ بنیادی اسٹائلز سیٹ کرنے کے لیے بہترین ہیں جو آپ کے صفحے پر وسیع پیمانے پر لاگو ہوتے ہیں: ان اسٹائلز کو سمجھنا: - سیٹ کرتا ہے پورے صفحے پر مستقل ٹائپوگرافی body سلیکٹر کے ساتھ - ہٹاتا ہے ڈیفالٹ براؤزر مارجنز اور پیڈنگ بہتر کنٹرول کے لیے - اسٹائل کرتا ہے تمام ہیڈنگ عناصر کو رنگ، الائنمنٹ، اور اسپیسنگ کے ساتھ - استعمال کرتا ہے rem یونٹس قابل پیمائش، قابل رسائی فونٹ سائز کے لیے جبکہ عنصر سلیکٹرز عمومی اسٹائلنگ کے لیے اچھے کام کرتے ہیں، آپ کو زیادہ مخصوص سلیکٹرز کی ضرورت ہوگی انفرادی اجزاء کو اسٹائل کرنے کے لیے جیسے کہ آپ کے ٹیریریم میں پودے۔ ### منفرد عناصر کے لیے ID سلیکٹرز ID سلیکٹرز # علامت کا استعمال کرتے ہیں اور عناصر کو مخصوص id ایٹریبیٹس کے ساتھ ہدف بناتے ہیں۔ چونکہ IDs صفحے پر منفرد ہونے چاہیئے، یہ انفرادی، خاص عناصر کو اسٹائل کرنے کے لیے بہترین ہیں جیسے ہمارے بائیں اور دائیں پودے کے کنٹینرز۔ آئیے اپنے ٹیریریم کے سائیڈ کنٹینرز کے لیے اسٹائلنگ بنائیں جہاں پودے رہیں گے: یہ کوڈ کیا حاصل کرتا ہے: - پوزیشن کرتا ہے کنٹینرز کو اسکرین کے کناروں پر absolute پوزیشننگ کا استعمال کرتے ہوئے - استعمال کرتا ہے vh (ویوپورٹ ہائٹ) یونٹس جوابدہ اونچائی کے لیے جو اسکرین سائز کے مطابق ڈھلتی ہے - لاگو کرتا ہے box-sizing: border-box تاکہ پیڈنگ کل چوڑائی میں شامل ہو - ہٹاتا ہے غیر ضروری px یونٹس صفر ویلیوز سے صاف کوڈ کے لیے - سیٹ کرتا ہے ایک ہلکا پس منظر رنگ جو آنکھوں پر سخت گرے کے مقابلے میں آسان ہے ✅ کوڈ کوالٹی چیلنج: نوٹ کریں کہ یہ CSS DRY (Don't Repeat Yourself) اصول کی خلاف ورزی کرتا ہے۔ کیا آپ اسے ID اور کلاس دونوں کا استعمال کرتے ہوئے ریفیکٹر کر سکتے ہیں؟ بہتر طریقہ: ### کلاس سلیکٹرز دوبارہ استعمال کے قابل اسٹائلز کے لیے کلاس سلیکٹرز . علامت کا استعمال کرتے ہیں اور بہترین ہیں جب آپ ایک ہی اسٹائلز کو متعدد عناصر پر لاگو کرنا چاہتے ہیں۔ IDs کے برعکس، کلاسز آپ کے HTML میں دوبارہ استعمال کی جا سکتی ہیں، جو انہیں مستقل اسٹائلنگ پیٹرنز کے لیے مثالی بناتی ہیں۔ ہمارے ٹیریریم میں، ہر پودے کو اسی طرح کی اسٹائلنگ کی ضرورت ہے لیکن انفرادی پوزیشننگ بھی چاہیے۔ ہم مشترکہ اسٹائلز کے لیے کلاسز اور منفرد پوزیشننگ کے لیے IDs کا مجموعہ استعمال کریں گے۔ ہر پودے کے لیے HTML ڈھانچہ یہ ہے: اہم عناصر کی وضاحت: - استعمال کرتا ہے class="plant-holder" مستقل کنٹینر اسٹائلنگ کے لیے تمام پودوں میں - لاگو کرتا ہے class="plant" مشترکہ تصویر اسٹائلنگ اور رویے کے لیے - شامل کرتا ہے منفرد id="plant1" انفرادی پوزیشننگ اور جاوا اسکرپٹ تعامل کے لیے - فراہم کرتا ہے وضاحتی alt ٹیکسٹ اسکرین ریڈر کی رسائی کے لیے اب یہ اسٹائلز اپنی style.css فائل میں شامل کریں: ان اسٹائلز کو سمجھنا: - بناتا ہے کنٹینر کے لیے رشتہ دار پوزیشننگ تاکہ پوزیشننگ کا سیاق و سباق قائم ہو - سیٹ کرتا ہے ہر پودے کے کنٹینر کو 13% اونچائی پر، یہ یقینی بناتے ہوئے کہ تمام پودے عمودی طور پر فٹ ہوں بغیر اسکرولنگ کے - تھوڑا سا بائیں طرف منتقل کرتا ہے کنٹینرز کو تاکہ پودے اپنے کنٹینرز میں بہتر طور پر مرکز ہوں - اجازت دیتا ہے پودوں کو جوابدہ طور پر اسکیل کرنے کی max-width اور max-height پراپرٹیز کے ساتھ - استعمال کرتا ہے z-index پودوں کو ٹیریریم میں دیگر عناصر کے اوپر تہہ کرنے کے لیے - شامل کرتا ہے ایک ہلکا ہور اثر CSS ٹرانزیشنز کے ساتھ بہتر صارف تعامل کے لیے ✅ تنقیدی سوچ: ہمیں .plant-holder اور .plant سلیکٹرز دونوں کی ضرورت کیوں ہے؟ کیا ہوگا اگر ہم صرف ایک استعمال کرنے کی کوشش کریں؟ ## CSS پوزیشننگ کو سمجھنا CSS پوزیشننگ اسٹیج ڈائریکٹر ہونے جیسا ہے - آپ ہدایت دیتے ہیں کہ ہر اداکار کہاں کھڑا ہو اور اسٹیج پر کیسے حرکت کرے۔ کچھ اداکار معیاری ترتیب کی پیروی کرتے ہیں، جبکہ دوسروں کو ڈرامائی اثر کے لیے مخصوص پوزیشننگ کی ضرورت ہوتی ہے۔ ایک بار جب آپ پوزیشننگ کو سمجھ لیتے ہیں، بہت سے لے آؤٹ چیلنجز قابل انتظام ہو جاتے ہیں۔ کیا آپ کو ایک نیویگیشن بار کی ضرورت ہے جو صارفین کے اسکرول کرتے وقت اوپر رہے؟ پوزیشننگ اس کا انتظام کرتی ہے۔ کیا آپ کو ایک ٹول ٹپ چاہیے جو کسی مخصوص مقام پر ظاہر ہو؟ یہ بھی پوزیشننگ ہے۔ ### پانچ پوزیشن ویلیوز - اگر .plant-holder absolute کی بجائے relative استعمال کرے تو لے آؤٹ کیسے تبدیل ہوگا؟ - جب آپ .plant کو relative پوزیشننگ میں تبدیل کرتے ہیں تو کیا ہوتا ہے؟ ### 🔄 تعلیمی جائزہ CSS پوزیشننگ کی مہارت: اپنی سمجھ کو جانچنے کے لیے توقف کریں: - ✅ کیا آپ وضاحت کر سکتے ہیں کہ ڈریگ اینڈ ڈراپ کے لیے پودوں کو absolute پوزیشننگ کی ضرورت کیوں ہے؟ - ✅ کیا آپ سمجھتے ہیں کہ relative کنٹینرز پوزیشننگ کا سیاق و سباق کیسے بناتے ہیں؟ - ✅ سائیڈ کنٹینرز absolute پوزیشننگ کیوں استعمال کرتے ہیں؟ - ✅ اگر آپ پوزیشن کے اعلانات کو مکمل طور پر ہٹا دیں تو کیا ہوگا؟ حقیقی دنیا کا تعلق: سوچیں کہ CSS پوزیشننگ حقیقی دنیا کے لے آؤٹ کی عکاسی کیسے کرتی ہے: - Static: شیلف پر کتابیں (قدرتی ترتیب) - Relative: کتاب کو تھوڑا سا حرکت دینا لیکن اس کی جگہ برقرار رکھنا - Absolute: کسی صفحے نمبر پر بک مارک رکھنا - Fixed: ایک اسٹکی نوٹ جو صفحات پلٹنے پر بھی نظر آتا ہے ## CSS کے ساتھ ٹیریریم بنانا اب ہم صرف CSS کا استعمال کرتے ہوئے ایک شیشے کا جار بنائیں گے - کوئی تصاویر یا گرافکس سافٹ ویئر استعمال نہیں ہوگا۔ پوزیشننگ اور شفافیت کے ذریعے حقیقت پسندانہ شیشے، سائے، اور گہرائی کے اثرات بنانا CSS کی بصری صلاحیتوں کو ظاہر کرتا ہے۔ یہ تکنیک اس طرح کی ہے جیسے Bauhaus تحریک کے معماروں نے سادہ جیومیٹرک شکلوں کا استعمال کرتے ہوئے پیچیدہ، خوبصورت ڈھانچے بنائے۔ ایک بار جب آپ ان اصولوں کو سمجھ لیں گے، تو آپ بہت سے ویب ڈیزائنز کے پیچھے CSS تکنیک کو پہچان سکیں گے۔ ### شیشے کے جار کے اجزاء بنانا آئیے ٹیریریم جار کو ٹکڑوں میں بنائیں۔ ہر حصہ absolute پوزیشننگ اور فیصد پر مبنی سائزنگ کا استعمال کرتا ہے تاکہ ریسپانسیو ڈیزائن بنایا جا سکے: ٹریریریم کی تعمیر کو سمجھنا: - استعمال کرتا ہے فیصد پر مبنی طول و عرض تاکہ تمام اسکرین سائزز پر ریسپانسیو اسکیلنگ ہو سکے - پوزیشن کرتا ہے عناصر کو بالکل اسٹیک اور سیدھ میں لانے کے لیے - لگاتا ہے مختلف شفافیت کی قدریں تاکہ شیشے کی شفافیت کا اثر پیدا ہو - نافذ کرتا ہے z-index لیئرنگ تاکہ پودے جار کے اندر نظر آئیں - شامل کرتا ہے ہلکا سا باکس شیڈو اور بہتر بارڈر ریڈیئس تاکہ زیادہ حقیقت پسندانہ ظاہری شکل ہو ### فیصد کے ساتھ ریسپانسیو ڈیزائن نوٹ کریں کہ تمام طول و عرض فکسڈ پکسل ویلیوز کی بجائے فیصد استعمال کرتے ہیں: یہ کیوں اہم ہے: - یقینی بناتا ہے کہ ٹیریریم کسی بھی اسکرین سائز پر تناسب سے اسکیل کرے - برقرار رکھتا ہے جار کے اجزاء کے درمیان بصری تعلقات - فراہم کرتا ہے موبائل فونز سے لے کر بڑے ڈیسک ٹاپ مانیٹرز تک ایک مستقل تجربہ - ڈیزائن کو بغیر بصری لے آؤٹ کو توڑے ڈھالنے دیتا ہے ### CSS یونٹس کا استعمال ہم rem یونٹس کو بارڈر ریڈیئس کے لیے استعمال کر رہے ہیں، جو روٹ فونٹ سائز کے مطابق اسکیل کرتے ہیں۔ یہ زیادہ قابل رسائی ڈیزائنز بناتا ہے جو صارف کے فونٹ کی ترجیحات کا احترام کرتے ہیں۔ CSS relative units کے بارے میں مزید جانیں۔ ✅ بصری تجربہ: ان اقدار کو تبدیل کرنے کی کوشش کریں اور اثرات کا مشاہدہ کریں: - جار کی شفافیت کو 0.5 سے 0.8 میں تبدیل کریں – شیشے کی ظاہری شکل پر اس کا کیا اثر پڑتا ہے؟ - مٹی کے رنگ کو #3a241d سے #8B4513 میں ایڈجسٹ کریں – اس کا بصری اثر کیا ہوتا ہے؟ - مٹی کے z-index کو 2 میں تبدیل کریں – لیئرنگ پر کیا اثر پڑتا ہے؟ ### 🔄 تعلیمی جائزہ CSS بصری ڈیزائن کی سمجھ: بصری CSS کو سمجھنے کی تصدیق کریں: - ✅ فیصد پر مبنی طول و عرض ریسپانسیو ڈیزائن کیسے بناتے ہیں؟ - ✅ شفافیت شیشے کی شفافیت کا اثر کیسے پیدا کرتی ہے؟ - ✅ z-index عناصر کی لیئرنگ میں کیا کردار ادا کرتا ہے؟ - ✅ بارڈر ریڈیئس کی قدریں جار کی شکل کیسے بناتی ہیں؟ ڈیزائن اصول: نوٹ کریں کہ ہم سادہ شکلوں سے پیچیدہ بصری بنا رہے ہیں: 1. مستطیلیں → گول مستطیلیں → جار کے اجزاء 2. فلیٹ رنگ → شفافیت → شیشے کا اثر 3. انفرادی عناصر → لیئرڈ کمپوزیشن → 3D ظاہری شکل --- ## GitHub Copilot Agent Challenge 🚀 Agent mode کا استعمال کرتے ہوئے درج ذیل چیلنج مکمل کریں: تفصیل: ایک CSS اینیمیشن بنائیں جو ٹیریریم کے پودوں کو آہستہ آہستہ جھولنے کا اثر دے، قدرتی ہوا کی نقل کرتے ہوئے۔ یہ آپ کو CSS اینیمیشنز، ٹرانسفارمز، اور کی فریمز کی مشق کرنے میں مدد دے گا جبکہ آپ کے ٹیریریم کی بصری کشش کو بڑھائے گا۔ پرومپٹ: CSS کی فریم اینیمیشنز شامل کریں تاکہ ٹیریریم کے پودے آہستہ آہستہ ایک طرف سے دوسری طرف جھولیں۔ ایک جھولنے والی اینیمیشن بنائیں جو ہر پودے کو تھوڑا سا (2-3 ڈگری) بائیں اور دائیں گھمائے، جس کی مدت 3-4 سیکنڈ ہو، اور اسے .plant کلاس پر لاگو کریں۔ یقینی بنائیں کہ اینیمیشن لامتناہی لوپ کرے اور قدرتی حرکت کے لیے ایک ایزنگ فنکشن ہو۔ agent mode کے بارے میں مزید جانیں۔ ## 🚀 چیلنج: شیشے کی عکاسی شامل کرنا کیا آپ اپنے ٹیریریم میں حقیقت پسندانہ شیشے کی عکاسی شامل کرنے کے لیے تیار ہیں؟ یہ تکنیک ڈیزائن میں گہرائی اور حقیقت پسندی کا اضافہ کرے گی۔ آپ ہلکے سفید یا ہلکے رنگ کے بیضوی شکلیں بنائیں گے جو شیشے کی عکاسی کی نقل کرتے ہیں۔ یہ طریقہ اس طرح ہے جیسے Renaissance کے مصور جیسے Jan van Eyck نے روشنی اور عکاسی کا استعمال کرتے ہوئے پینٹ شدہ شیشے کو تین جہتی ظاہر کیا۔ آپ کا مقصد یہ ہے: آپ کا چیلنج: - بنائیں ہلکے سفید یا روشنی والے بیضوی شکلیں شیشے کی عکاسی کے لیے - انہیں جار کے بائیں جانب اسٹریٹجک طور پر پوزیشن کریں - مناسب شفافیت اور بلر اثرات لگائیں تاکہ روشنی کی حقیقت پسندانہ عکاسی ہو - استعمال کریں border-radius تاکہ قدرتی، بلبلے جیسی شکلیں بن سکیں - گریڈینٹس یا باکس شیڈوز کے ساتھ تجربہ کریں تاکہ حقیقت پسندی کو بڑھایا جا سکے ## لیکچر کے بعد کا کوئز لیکچر کے بعد کا کوئز ## اپنے CSS علم کو بڑھائیں CSS شروع میں پیچیدہ محسوس ہو سکتا ہے، لیکن ان بنیادی تصورات کو سمجھنا آپ کو مزید جدید تکنیکوں کے لیے ایک مضبوط بنیاد فراہم کرتا ہے۔ آپ کے اگلے CSS سیکھنے کے علاقے: - Flexbox - عناصر کی سیدھ اور تقسیم کو آسان بناتا ہے - CSS Grid - پیچیدہ لے آؤٹ بنانے کے لیے طاقتور ٹولز فراہم کرتا ہے - CSS Variables - تکرار کو کم کرتا ہے اور برقرار رکھنے کی صلاحیت کو بہتر بناتا ہے - Responsive design - یقینی بناتا ہے کہ سائٹس مختلف اسکرین سائزز پر اچھی طرح کام کریں ### انٹرایکٹو سیکھنے کے وسائل ان تصورات کو ان دلچسپ، عملی گیمز کے ساتھ مشق کریں: - 🐸 Flexbox Froggy - تفریحی چیلنجز کے ذریعے Flexbox میں مہارت حاصل کریں - 🌱 Grid Garden - CSS Grid سیکھیں اور ورچوئل گاجریں اگائیں - 🎯 CSS Battle - کوڈنگ چیلنجز کے ساتھ اپنی CSS مہارت کو آزمائیں ### اضافی سیکھنا CSS کے بنیادی اصولوں کے لیے یہ Microsoft Learn ماڈیول مکمل کریں: اپنے HTML ایپ کو CSS کے ساتھ اسٹائل کریں ### ⚡ آپ اگلے 5 منٹ میں کیا کر سکتے ہیں - [ ] DevTools کھولیں اور کسی بھی ویب سائٹ پر CSS اسٹائلز کو Elements پینل کے ذریعے دیکھیں - [ ] ایک سادہ CSS فائل بنائیں اور اسے HTML صفحے سے لنک کریں - [ ] مختلف طریقوں سے رنگ تبدیل کرنے کی کوشش کریں: hex، RGB، اور نامزد رنگ - [ ] باکس ماڈل کی مشق کریں اور padding اور margin کو div میں شامل کریں ### 🎯 آپ اس گھنٹے میں کیا حاصل کر سکتے ہیں - [ ] لیکچر کے بعد کا کوئز مکمل کریں اور CSS کے بنیادی اصولوں کا جائزہ لیں - [ ] اپنے HTML صفحے کو فونٹس، رنگوں، اور اسپیسنگ کے ساتھ اسٹائل کریں - [ ] Flexbox یا Grid کا استعمال کرتے ہوئے ایک سادہ لے آؤٹ بنائیں - [ ] CSS ٹرانزیشنز کے ساتھ ہموار اثرات کی مشق کریں - [ ] میڈیا کوئریز کے ساتھ ریسپانسیو ڈیزائن کی مشق کریں ### 📅 آپ کی ہفتہ بھر کی CSS مہم - [ ] تخلیقی انداز کے ساتھ ٹیریریم اسٹائلنگ اسائنمنٹ مکمل کریں - [ ] CSS Grid میں مہارت حاصل کریں اور فوٹو گیلری لے آؤٹ بنائیں - [ ] CSS اینیمیشنز سیکھیں اور اپنے ڈیزائنز کو زندگی بخشیں - [ ] Sass یا Less جیسے CSS پری پروسیسرز کو دریافت کریں - [ ] ڈیزائن کے اصولوں کا مطالعہ کریں اور انہیں اپنے CSS میں لاگو کریں - [ ] دلچسپ ڈیزائنز کا تجزیہ کریں اور انہیں آن لائن دوبارہ بنائیں ### 🌟 آپ کا ماہانہ ڈیزائن ماسٹری - [ ] ایک مکمل ریسپانسیو ویب سائٹ ڈیزائن سسٹم بنائیں - [ ] CSS-in-JS یا Tailwind جیسے یوٹیلیٹی فرسٹ فریم ورک سیکھیں - [ ] CSS میں بہتری کے ساتھ اوپن سورس پروجیکٹس میں تعاون کریں - [ ] جدید CSS تصورات جیسے CSS کسٹم پراپرٹیز اور کنٹینمنٹ میں مہارت حاصل کریں - [ ] ماڈیولر CSS کے ساتھ دوبارہ قابل استعمال کمپوننٹ لائبریریاں بنائیں - [ ] CSS سیکھنے والے دوسروں کی رہنمائی کریں اور ڈیزائن کا علم شیئر کریں ## 🎯 آپ کا CSS ماسٹری ٹائم لائن ### 🛠️ آپ کا CSS ٹول کٹ خلاصہ اس سبق کو مکمل کرنے کے بعد، آپ کے پاس ہے: - Cascade Understanding: اسٹائلز کیسے وراثت میں ملتے ہیں اور ایک دوسرے کو اووررائیڈ کرتے ہیں - Selector Mastery: عناصر، کلاسز، اور IDs کے ساتھ درست ہدف بنانا - Positioning Skills: عناصر کی اسٹریٹجک جگہ اور لیئرنگ - Visual Design: شیشے کے اثرات، سائے، اور شفافیت بنانا - Responsive Techniques: فیصد پر مبنی لے آؤٹ جو کسی بھی اسکرین پر ڈھلتے ہیں - Code Organization: صاف، برقرار رکھنے کے قابل CSS ڈھانچہ - Modern Practices: رشتہ دار یونٹس اور قابل رسائی ڈیزائن پیٹرنز کا استعمال اگلے اقدامات: آپ کے ٹیریریم میں اب ساخت (HTML) اور اسٹائل (CSS) دونوں ہیں۔ آخری سبق جاوا اسکرپٹ کے ساتھ انٹرایکٹوٹی شامل کرے گا! ## اسائنمنٹ CSS Refactoring --- ڈسکلیمر: یہ دستاویز AI ترجمہ سروس Co-op Translator کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔
Dự án Terrarium Phần 1: Giới thiệu về HTML
HTML, hay HyperText Markup Language, là nền tảng của mọi trang web mà bạn từng truy cập. Hãy nghĩ về HTML như bộ khung xương cung cấp cấu trúc cho các trang web – nó xác định nơi nội dung sẽ xuất hiện, cách tổ chức và ý nghĩa của từng phần. Trong khi CSS sẽ "trang trí" HTML của bạn với màu sắc và bố cục, và JavaScript sẽ làm cho nó sống động với tính tương tác, HTML cung cấp cấu trúc cơ bản làm nền tảng cho mọi thứ khác. Trong bài học này, bạn sẽ tạo cấu trúc HTML cho giao diện terrarium ảo. Dự án thực hành này sẽ giúp bạn học các khái niệm cơ bản về HTML trong khi xây dựng một thứ gì đó hấp dẫn về mặt hình ảnh. Bạn sẽ học cách tổ chức nội dung bằng các phần tử ngữ nghĩa, làm việc với hình ảnh và tạo nền tảng cho một ứng dụng web tương tác. Kết thúc bài học này, bạn sẽ có một trang HTML hoạt động hiển thị hình ảnh cây cối trong các cột được tổ chức, sẵn sàng để được tạo kiểu trong bài học tiếp theo. Đừng lo nếu nó trông đơn giản lúc đầu – đó chính là điều HTML nên làm trước khi CSS thêm vào sự hoàn thiện về mặt hình ảnh. ## Quiz Trước Bài Giảng Quiz trước bài giảng ## Thiết Lập Dự Án Của Bạn Trước khi đi sâu vào mã HTML, hãy thiết lập một không gian làm việc phù hợp cho dự án terrarium của bạn. Tạo một cấu trúc tệp được tổ chức từ đầu là một thói quen quan trọng sẽ giúp bạn trong suốt hành trình phát triển web. ### Nhiệm vụ: Tạo Cấu Trúc Dự Án Của Bạn Bạn sẽ tạo một thư mục dành riêng cho dự án terrarium và thêm tệp HTML đầu tiên của mình. Dưới đây là hai cách bạn có thể sử dụng: Cách 1: Sử dụng Visual Studio Code 1. Mở Visual Studio Code 2. Nhấp vào "File" → "Open Folder" hoặc sử dụng Ctrl+K, Ctrl+O (Windows/Linux) hoặc Cmd+K, Cmd+O (Mac) 3. Tạo một thư mục mới tên là terrarium và chọn nó 4. Trong bảng Explorer, nhấp vào biểu tượng "New File" 5. Đặt tên tệp của bạn là index.html Cách 2: Sử dụng Lệnh Terminal Những gì các lệnh này thực hiện: - Tạo một thư mục mới tên là terrarium cho dự án của bạn - Đi vào thư mục terrarium - Tạo một tệp index.html trống - Mở tệp trong Visual Studio Code để chỉnh sửa ## Hiểu Cấu Trúc Tài Liệu HTML Mỗi tài liệu HTML tuân theo một cấu trúc cụ thể mà trình duyệt cần để hiểu và hiển thị chính xác. Hãy nghĩ về cấu trúc này như một lá thư chính thức – nó có các phần tử bắt buộc theo một thứ tự cụ thể giúp người nhận (trong trường hợp này là trình duyệt) xử lý nội dung đúng cách. Hãy bắt đầu bằng cách thêm nền tảng cần thiết mà mọi tài liệu HTML cần có. ### Khai Báo DOCTYPE và Phần Tử Gốc Hai dòng đầu tiên của bất kỳ tệp HTML nào đóng vai trò như "giới thiệu" của tài liệu với trình duyệt: Hiểu những gì mã này làm: - Khai báo loại tài liệu là HTML5 bằng <!DOCTYPE html> - Tạo phần tử gốc <html> sẽ chứa tất cả nội dung trang - Thiết lập các tiêu chuẩn web hiện đại để trình duyệt hiển thị đúng cách - Đảm bảo hiển thị nhất quán trên các trình duyệt và thiết bị khác nhau ### 🔄 Kiểm Tra Sư Phạm Dừng Lại và Suy Ngẫm: Trước khi tiếp tục, hãy đảm bảo bạn hiểu: - ✅ Tại sao mọi tài liệu HTML cần khai báo DOCTYPE - ✅ Phần tử gốc <html> chứa gì - ✅ Cách cấu trúc này giúp trình duyệt hiển thị trang đúng cách Kiểm Tra Nhanh: Bạn có thể giải thích bằng lời của mình "hiển thị tuân thủ tiêu chuẩn" nghĩa là gì không? ## Thêm Metadata Cần Thiết Cho Tài Liệu Phần <head> của tài liệu HTML chứa thông tin quan trọng mà trình duyệt và công cụ tìm kiếm cần, nhưng khách truy cập không thấy trực tiếp trên trang. Hãy nghĩ về nó như thông tin "hậu trường" giúp trang web của bạn hoạt động đúng cách và hiển thị chính xác trên các thiết bị và nền tảng khác nhau. Metadata này cho trình duyệt biết cách hiển thị trang của bạn, mã hóa ký tự nào cần sử dụng và cách xử lý các kích thước màn hình khác nhau – tất cả đều cần thiết để tạo các trang web chuyên nghiệp, dễ truy cập. ### Nhiệm vụ: Thêm Phần Đầu Tài Liệu Chèn phần <head> này giữa các thẻ <html> mở và đóng của bạn: Phân tích những gì mỗi phần tử thực hiện: - Đặt tiêu đề trang xuất hiện trong tab trình duyệt và kết quả tìm kiếm - Chỉ định mã hóa ký tự UTF-8 để hiển thị văn bản đúng cách trên toàn thế giới - Đảm bảo tương thích với các phiên bản hiện đại của Internet Explorer - Cấu hình thiết kế đáp ứng bằng cách đặt viewport khớp với chiều rộng thiết bị - Kiểm soát mức độ thu phóng ban đầu để hiển thị nội dung ở kích thước tự nhiên ## Xây Dựng Phần Thân Tài Liệu Phần tử <body> chứa tất cả nội dung hiển thị của trang web – mọi thứ người dùng sẽ thấy và tương tác. Trong khi phần <head> cung cấp hướng dẫn cho trình duyệt, phần <body> chứa nội dung thực tế: văn bản, hình ảnh, nút và các phần tử khác tạo giao diện người dùng của bạn. Hãy thêm cấu trúc phần thân và hiểu cách các thẻ HTML hoạt động cùng nhau để tạo nội dung có ý nghĩa. ### Hiểu Cấu Trúc Thẻ HTML HTML sử dụng các thẻ cặp để xác định phần tử. Hầu hết các thẻ có thẻ mở như <p> và thẻ đóng như </p>, với nội dung ở giữa: <p>Hello, world!</p>. Điều này tạo ra một phần tử đoạn văn chứa văn bản "Hello, world!". ### Nhiệm vụ: Thêm Phần Tử Thân Cập nhật tệp HTML của bạn để bao gồm phần tử <body>: Đây là những gì cấu trúc hoàn chỉnh này cung cấp: - Thiết lập khung tài liệu HTML5 cơ bản - Bao gồm metadata cần thiết để trình duyệt hiển thị đúng cách - Tạo một phần thân trống sẵn sàng cho nội dung hiển thị của bạn - Tuân theo các thực hành tốt nhất trong phát triển web hiện đại Bây giờ bạn đã sẵn sàng thêm các phần tử hiển thị của terrarium. Chúng ta sẽ sử dụng các phần tử <div> làm container để tổ chức các phần nội dung khác nhau và các phần tử <img> để hiển thị hình ảnh cây cối. ### Làm Việc Với Hình Ảnh và Container Bố Cục Hình ảnh đặc biệt trong HTML vì chúng sử dụng thẻ "tự đóng". Không giống như các phần tử như <p></p> bao quanh nội dung, thẻ <img> chứa tất cả thông tin cần thiết trong chính thẻ đó bằng các thuộc tính như src cho đường dẫn tệp hình ảnh và alt cho khả năng truy cập. Trước khi thêm hình ảnh vào HTML của bạn, bạn cần tổ chức tệp dự án đúng cách bằng cách tạo một thư mục hình ảnh và thêm đồ họa cây cối. Đầu tiên, thiết lập hình ảnh của bạn: 1. Tạo một thư mục tên là images bên trong thư mục dự án terrarium của bạn 2. Tải xuống hình ảnh cây cối từ thư mục giải pháp (tổng cộng 14 hình ảnh cây) 3. Sao chép tất cả hình ảnh cây vào thư mục images mới của bạn ### Nhiệm vụ: Tạo Bố Cục Hiển Thị Cây Bây giờ hãy thêm hình ảnh cây được tổ chức trong hai cột giữa các thẻ <body></body> của bạn: Từng bước, đây là những gì đang xảy ra trong mã này: - Tạo một container trang chính với id="page" để chứa tất cả nội dung - Thiết lập hai container cột: left-container và right-container - Tổ chức 7 cây trong cột bên trái và 7 cây trong cột bên phải - Bao quanh mỗi hình ảnh cây trong một div plant-holder để định vị riêng lẻ - Áp dụng tên lớp nhất quán để tạo kiểu CSS trong bài học tiếp theo - Gán ID duy nhất cho mỗi hình ảnh cây để tương tác JavaScript sau này - Bao gồm đường dẫn tệp đúng chỉ đến thư mục hình ảnh ### 🔄 Kiểm Tra Sư Phạm Hiểu Cấu Trúc: Dành một chút thời gian để xem lại cấu trúc HTML của bạn: - ✅ Bạn có thể xác định các container chính trong bố cục của mình không? - ✅ Bạn có hiểu tại sao mỗi hình ảnh có một ID duy nhất không? - ✅ Bạn sẽ mô tả mục đích của các div plant-holder như thế nào? Kiểm Tra Hình Ảnh: Mở tệp HTML của bạn trong trình duyệt. Bạn nên thấy: - Danh sách cơ bản các hình ảnh cây - Hình ảnh được tổ chức trong hai cột - Bố cục đơn giản, chưa được tạo kiểu Nhớ Rằng: Giao diện đơn giản này chính là điều HTML nên trông như trước khi tạo kiểu CSS! Với mã này được thêm vào, các cây sẽ xuất hiện trên màn hình, mặc dù chúng chưa được hoàn thiện – đó là nhiệm vụ của CSS trong bài học tiếp theo! Hiện tại, bạn đã có một nền tảng HTML vững chắc tổ chức nội dung của bạn đúng cách và tuân theo các thực hành tốt nhất về khả năng truy cập. ## Sử Dụng HTML Ngữ Nghĩa Để Tăng Khả Năng Truy Cập HTML ngữ nghĩa nghĩa là chọn các phần tử HTML dựa trên ý nghĩa và mục đích của chúng, không chỉ dựa trên giao diện. Khi bạn sử dụng đánh dấu ngữ nghĩa, bạn đang truyền đạt cấu trúc và ý nghĩa của nội dung của bạn cho trình duyệt, công cụ tìm kiếm và các công nghệ hỗ trợ như trình đọc màn hình. Cách tiếp cận này làm cho các trang web của bạn dễ truy cập hơn đối với người dùng khuyết tật và giúp công cụ tìm kiếm hiểu rõ hơn về nội dung của bạn. Đây là một nguyên tắc cơ bản của phát triển web hiện đại tạo ra trải nghiệm tốt hơn cho mọi người. ### Thêm Tiêu Đề Trang Ngữ Nghĩa Hãy thêm một tiêu đề phù hợp cho trang terrarium của bạn. Chèn dòng này ngay sau thẻ <body> mở: Tại sao đánh dấu ngữ nghĩa quan trọng: - Giúp trình đọc màn hình điều hướng và hiểu cấu trúc trang - Cải thiện tối ưu hóa công cụ tìm kiếm (SEO) bằng cách làm rõ thứ bậc nội dung - Tăng cường khả năng truy cập cho người dùng có khiếm khuyết thị giác hoặc khác biệt nhận thức - Tạo trải nghiệm người dùng tốt hơn trên tất cả các thiết bị và nền tảng - Tuân theo các tiêu chuẩn web và thực hành tốt nhất cho phát triển chuyên nghiệp Ví dụ về lựa chọn ngữ nghĩa và không ngữ nghĩa: ## Tạo Container Terrarium Bây giờ hãy thêm cấu trúc HTML cho terrarium – container kính nơi cây sẽ được đặt. Phần này minh họa một khái niệm quan trọng: HTML cung cấp cấu trúc, nhưng nếu không có tạo kiểu CSS, các phần tử này sẽ chưa hiển thị rõ ràng. Đánh dấu terrarium sử dụng tên lớp mô tả sẽ làm cho việc tạo kiểu CSS trực quan và dễ duy trì trong bài học tiếp theo. ### Nhiệm vụ: Thêm Cấu Trúc Terrarium Chèn đoạn mã này phía trên thẻ </div> cuối cùng (trước thẻ đóng của container trang): Hiểu cấu trúc terrarium này: - Tạo một container terrarium chính với ID duy nhất để tạo kiểu - Xác định các phần tử riêng biệt cho từng thành phần hình ảnh (phần trên, tường, đất, đáy) - Bao gồm các phần tử lồng nhau để tạo hiệu ứng phản chiếu kính (các phần tử bóng) - Sử dụng tên lớp mô tả rõ ràng mục đích của từng phần tử - Chuẩn bị cấu trúc cho việc tạo kiểu CSS để tạo ra hình ảnh terrarium bằng kính ### 🔄 Kiểm tra sư phạm Thành thạo cấu trúc HTML: Trước khi tiếp tục, hãy đảm bảo bạn có thể: - ✅ Giải thích sự khác biệt giữa cấu trúc HTML và hình ảnh hiển thị - ✅ Nhận diện các phần tử HTML có ý nghĩa và không có ý nghĩa - ✅ Mô tả cách đánh dấu đúng giúp cải thiện khả năng truy cập - ✅ Nhận biết cấu trúc cây tài liệu hoàn chỉnh Kiểm tra sự hiểu biết của bạn: Hãy thử mở tệp HTML của bạn trong trình duyệt với JavaScript bị vô hiệu hóa và CSS bị loại bỏ. Điều này sẽ hiển thị cấu trúc ngữ nghĩa thuần túy mà bạn đã tạo! --- ## Thử thách GitHub Copilot Agent Sử dụng chế độ Agent để hoàn thành thử thách sau: Mô tả: Tạo một cấu trúc HTML ngữ nghĩa cho phần hướng dẫn chăm sóc cây trồng có thể được thêm vào dự án terrarium. Yêu cầu: Tạo một phần HTML ngữ nghĩa bao gồm tiêu đề chính "Hướng dẫn chăm sóc cây trồng", ba phần phụ với tiêu đề "Tưới nước", "Yêu cầu ánh sáng", và "Chăm sóc đất", mỗi phần chứa một đoạn văn thông tin về chăm sóc cây trồng. Sử dụng các thẻ HTML ngữ nghĩa phù hợp như <section>, <h2>, <h3>, và <p> để cấu trúc nội dung một cách hợp lý. Tìm hiểu thêm về chế độ agent tại đây. ## Thử thách khám phá lịch sử HTML Tìm hiểu về sự phát triển của web HTML đã phát triển đáng kể kể từ khi Tim Berners-Lee tạo ra trình duyệt web đầu tiên tại CERN vào năm 1990. Một số thẻ cũ như <marquee> hiện đã bị loại bỏ vì chúng không phù hợp với các tiêu chuẩn truy cập hiện đại và nguyên tắc thiết kế đáp ứng. Thử nghiệm này: 1. Tạm thời bao bọc tiêu đề <h1> của bạn trong thẻ <marquee>: <marquee><h1>Terrarium của tôi</h1></marquee> 2. Mở trang của bạn trong trình duyệt và quan sát hiệu ứng cuộn 3. Xem xét lý do tại sao thẻ này bị loại bỏ (gợi ý: nghĩ về trải nghiệm người dùng và khả năng truy cập) 4. Loại bỏ thẻ <marquee> và quay lại đánh dấu ngữ nghĩa Câu hỏi phản ánh: - Tiêu đề cuộn có thể ảnh hưởng như thế nào đến người dùng bị suy giảm thị lực hoặc nhạy cảm với chuyển động? - Những kỹ thuật CSS hiện đại nào có thể đạt được hiệu ứng hình ảnh tương tự một cách dễ truy cập hơn? - Tại sao việc sử dụng các tiêu chuẩn web hiện tại thay vì các phần tử đã bị loại bỏ lại quan trọng? Khám phá thêm về các phần tử HTML lỗi thời và bị loại bỏ để hiểu cách các tiêu chuẩn web phát triển nhằm cải thiện trải nghiệm người dùng. ## Bài kiểm tra sau bài giảng Bài kiểm tra sau bài giảng ## Ôn tập & Tự học Nâng cao kiến thức HTML của bạn HTML đã là nền tảng của web trong hơn 30 năm, phát triển từ một ngôn ngữ đánh dấu tài liệu đơn giản thành một nền tảng tinh vi để xây dựng các ứng dụng tương tác. Hiểu được sự phát triển này giúp bạn đánh giá cao các tiêu chuẩn web hiện đại và đưa ra các quyết định phát triển tốt hơn. Lộ trình học tập được đề xuất: 1. Lịch sử và sự phát triển của HTML - Nghiên cứu dòng thời gian từ HTML 1.0 đến HTML5 - Khám phá lý do tại sao một số thẻ bị loại bỏ (khả năng truy cập, thân thiện với thiết bị di động, dễ bảo trì) - Tìm hiểu các tính năng HTML mới nổi và các đề xuất 2. Khám phá sâu về HTML ngữ nghĩa - Nghiên cứu danh sách đầy đủ các phần tử HTML5 ngữ nghĩa - Thực hành nhận diện khi nào sử dụng <article>, <section>, <aside>, và <main> - Tìm hiểu về các thuộc tính ARIA để tăng cường khả năng truy cập 3. Phát triển web hiện đại - Khám phá xây dựng các trang web đáp ứng trên Microsoft Learn - Hiểu cách HTML tích hợp với CSS và JavaScript - Tìm hiểu về hiệu suất web và các phương pháp SEO tốt nhất Câu hỏi phản ánh: - Bạn đã khám phá được những thẻ HTML nào bị loại bỏ và tại sao chúng bị loại bỏ? - Những tính năng HTML mới nào đang được đề xuất cho các phiên bản tương lai? - HTML ngữ nghĩa đóng góp như thế nào vào khả năng truy cập web và SEO? ### ⚡ Những việc bạn có thể làm trong 5 phút tới - [ ] Mở DevTools (F12) và kiểm tra cấu trúc HTML của trang web yêu thích của bạn - [ ] Tạo một tệp HTML đơn giản với các thẻ cơ bản: <h1>, <p>, và <img> - [ ] Xác thực HTML của bạn bằng công cụ W3C HTML Validator trực tuyến - [ ] Thử thêm một bình luận vào HTML của bạn bằng <!-- bình luận --> ### 🎯 Những gì bạn có thể hoàn thành trong giờ tới - [ ] Hoàn thành bài kiểm tra sau bài học và ôn tập các khái niệm HTML ngữ nghĩa - [ ] Xây dựng một trang web đơn giản về bản thân bạn sử dụng cấu trúc HTML đúng - [ ] Thử nghiệm với các cấp độ tiêu đề khác nhau và các thẻ định dạng văn bản - [ ] Thêm hình ảnh và liên kết để thực hành tích hợp đa phương tiện - [ ] Nghiên cứu các tính năng HTML5 mà bạn chưa thử ### 📅 Hành trình HTML trong tuần của bạn - [ ] Hoàn thành bài tập dự án terrarium với đánh dấu ngữ nghĩa - [ ] Tạo một trang web có khả năng truy cập sử dụng nhãn và vai trò ARIA - [ ] Thực hành tạo biểu mẫu với các loại đầu vào khác nhau - [ ] Khám phá các API HTML5 như localStorage hoặc geolocation - [ ] Nghiên cứu các mẫu HTML đáp ứng và thiết kế ưu tiên di động - [ ] Xem lại mã HTML của các nhà phát triển khác để học hỏi các phương pháp tốt nhất ### 🌟 Nền tảng web của bạn trong tháng - [ ] Xây dựng một trang web danh mục đầu tư thể hiện sự thành thạo HTML của bạn - [ ] Học cách tạo mẫu HTML với một framework như Handlebars - [ ] Đóng góp cho các dự án mã nguồn mở bằng cách cải thiện tài liệu HTML - [ ] Thành thạo các khái niệm HTML nâng cao như phần tử tùy chỉnh - [ ] Tích hợp HTML với các framework CSS và thư viện JavaScript - [ ] Hướng dẫn người khác học các nguyên tắc cơ bản của HTML ## 🎯 Lộ trình thành thạo HTML của bạn ### 🛠️ Tóm tắt bộ công cụ HTML của bạn Sau khi hoàn thành bài học này, bạn đã có: - Cấu trúc tài liệu: Nền tảng HTML5 hoàn chỉnh với DOCTYPE đúng - Đánh dấu ngữ nghĩa: Các thẻ có ý nghĩa giúp tăng cường khả năng truy cập và SEO - Tích hợp hình ảnh: Thực hành tổ chức tệp và văn bản thay thế đúng cách - Các container bố cục: Sử dụng chiến lược các div với tên lớp mô tả - Nhận thức về khả năng truy cập: Hiểu cách điều hướng bằng trình đọc màn hình - Tiêu chuẩn hiện đại: Các thực hành HTML5 hiện tại và kiến thức về thẻ bị loại bỏ - Nền tảng dự án: Cơ sở vững chắc cho việc tạo kiểu CSS và tương tác JavaScript Bước tiếp theo: Cấu trúc HTML của bạn đã sẵn sàng cho việc tạo kiểu CSS! Nền tảng ngữ nghĩa bạn đã xây dựng sẽ giúp bài học tiếp theo dễ hiểu hơn. ## Bài tập Thực hành HTML của bạn: Xây dựng mô hình blog --- Tuyên bố miễn trừ trách nhiệm: Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI Co-op Translator. Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ bản địa nên được coi là nguồn thông tin chính thức. Đối với thông tin quan trọng, nên sử dụng dịch vụ dịch thuật chuyên nghiệp bởi con người. Chúng tôi không chịu trách nhiệm cho bất kỳ sự hiểu lầm hoặc diễn giải sai nào phát sinh từ việc sử dụng bản dịch này.
Dự án Terrarium Phần 2: Giới thiệu về CSS
Bạn còn nhớ terrarium HTML của mình trông khá đơn giản chứ? CSS chính là nơi chúng ta biến cấu trúc cơ bản đó thành một thứ hấp dẫn về mặt thị giác. Nếu HTML giống như việc xây dựng khung của một ngôi nhà, thì CSS là tất cả những gì làm cho ngôi nhà trở nên ấm cúng - màu sơn, cách sắp xếp nội thất, ánh sáng, và cách các phòng kết nối với nhau. Hãy nghĩ đến việc Cung điện Versailles bắt đầu chỉ là một nhà săn bắn đơn giản, nhưng sự chú ý cẩn thận đến trang trí và bố cục đã biến nó thành một trong những công trình tráng lệ nhất thế giới. Hôm nay, chúng ta sẽ biến terrarium của bạn từ chức năng sang hoàn thiện. Bạn sẽ học cách định vị các phần tử chính xác, tạo bố cục phản hồi với các kích thước màn hình khác nhau, và tạo sự hấp dẫn thị giác khiến các trang web trở nên thú vị. Kết thúc bài học này, bạn sẽ thấy cách CSS chiến lược có thể cải thiện đáng kể dự án của bạn. Hãy thêm phong cách cho terrarium của bạn. ## Quiz trước bài học Quiz trước bài học ## Bắt đầu với CSS CSS thường được nghĩ đến như việc "làm mọi thứ đẹp hơn," nhưng nó phục vụ một mục đích rộng hơn nhiều. CSS giống như đạo diễn của một bộ phim - bạn kiểm soát không chỉ cách mọi thứ trông như thế nào, mà còn cách chúng di chuyển, phản hồi tương tác, và thích nghi với các tình huống khác nhau. CSS hiện đại rất mạnh mẽ. Bạn có thể viết mã tự động điều chỉnh bố cục cho điện thoại, máy tính bảng, và máy tính để bàn. Bạn có thể tạo các hoạt ảnh mượt mà hướng sự chú ý của người dùng đến nơi cần thiết. Kết quả có thể rất ấn tượng khi mọi thứ hoạt động cùng nhau. Những gì chúng ta sẽ đạt được trong bài học này: - Tạo thiết kế thị giác hoàn chỉnh cho terrarium của bạn bằng các kỹ thuật CSS hiện đại - Khám phá các khái niệm cơ bản như cascade, inheritance, và CSS selectors - Triển khai các chiến lược định vị và bố cục phản hồi - Xây dựng container terrarium bằng các hình dạng và phong cách CSS ### Điều kiện tiên quyết Bạn nên hoàn thành cấu trúc HTML cho terrarium của mình từ bài học trước và sẵn sàng để được tạo kiểu. ### Thiết lập tệp CSS của bạn Trước khi chúng ta bắt đầu tạo kiểu, chúng ta cần kết nối CSS với HTML. Kết nối này cho trình duyệt biết nơi tìm các hướng dẫn tạo kiểu cho terrarium của chúng ta. Trong thư mục terrarium của bạn, tạo một tệp mới có tên style.css, sau đó liên kết nó trong phần <head> của tài liệu HTML: Đoạn mã này làm gì: - Tạo kết nối giữa tệp HTML và CSS của bạn - Thông báo cho trình duyệt tải và áp dụng các kiểu từ style.css - Sử dụng thuộc tính rel="stylesheet" để chỉ định đây là tệp CSS - Tham chiếu đường dẫn tệp với href="./style.css" ## Hiểu về CSS Cascade Bạn đã bao giờ tự hỏi tại sao CSS được gọi là "Cascading" Style Sheets chưa? Các kiểu cascade xuống như một thác nước, và đôi khi chúng xung đột với nhau. Hãy nghĩ đến cách cấu trúc chỉ huy quân sự hoạt động - một lệnh chung có thể nói "tất cả binh lính mặc màu xanh lá cây," nhưng một lệnh cụ thể cho đơn vị của bạn có thể nói "mặc đồng phục xanh dương cho buổi lễ." Lệnh cụ thể hơn sẽ được ưu tiên. CSS tuân theo logic tương tự, và hiểu được thứ tự này giúp việc gỡ lỗi trở nên dễ dàng hơn nhiều. ### Thử nghiệm với ưu tiên Cascade Hãy xem cascade hoạt động bằng cách tạo một xung đột kiểu. Đầu tiên, thêm một kiểu inline vào thẻ <h1> của bạn: Đoạn mã này làm gì: - Áp dụng màu đỏ trực tiếp cho phần tử <h1> bằng cách sử dụng kiểu inline - Sử dụng thuộc tính style để nhúng CSS trực tiếp vào HTML - Tạo quy tắc kiểu ưu tiên cao nhất cho phần tử cụ thể này Tiếp theo, thêm quy tắc này vào tệp style.css của bạn: Trong đoạn trên, chúng ta đã: - Định nghĩa một quy tắc CSS nhắm đến tất cả các phần tử <h1> - Đặt màu văn bản thành màu xanh dương bằng cách sử dụng stylesheet bên ngoài - Tạo quy tắc ưu tiên thấp hơn so với kiểu inline ✅ Kiểm tra kiến thức: Màu nào hiển thị trong ứng dụng web của bạn? Tại sao màu đó lại thắng? Bạn có thể nghĩ đến các tình huống mà bạn muốn ghi đè các kiểu không? ## CSS Inheritance trong thực tế CSS inheritance hoạt động giống như di truyền học - các phần tử thừa hưởng một số thuộc tính từ phần tử cha của chúng. Nếu bạn đặt font family trên phần tử body, tất cả văn bản bên trong sẽ tự động sử dụng cùng font đó. Nó giống như cách đặc điểm hàm đặc trưng của gia đình Habsburg xuất hiện qua các thế hệ mà không cần được chỉ định cho từng cá nhân. Tuy nhiên, không phải mọi thứ đều được thừa hưởng. Các kiểu văn bản như font và màu sắc được thừa hưởng, nhưng các thuộc tính bố cục như margin và border thì không. Giống như trẻ em có thể thừa hưởng đặc điểm ngoại hình nhưng không phải phong cách thời trang của cha mẹ. ### Quan sát Font Inheritance Hãy xem inheritance hoạt động bằng cách đặt font family trên phần tử <body>: Phân tích điều gì xảy ra ở đây: - Đặt font family cho toàn bộ trang bằng cách nhắm đến phần tử <body> - Sử dụng một font stack với các tùy chọn dự phòng để tăng khả năng tương thích trình duyệt - Áp dụng các font hệ thống hiện đại trông đẹp trên các hệ điều hành khác nhau - Đảm bảo tất cả các phần tử con thừa hưởng font này trừ khi bị ghi đè cụ thể Mở công cụ phát triển của trình duyệt (F12), điều hướng đến tab Elements, và kiểm tra phần tử <h1> của bạn. Bạn sẽ thấy rằng nó thừa hưởng font family từ body: ✅ Thời gian thử nghiệm: Hãy thử đặt các thuộc tính có thể thừa hưởng khác trên <body> như color, line-height, hoặc text-align. Điều gì xảy ra với tiêu đề và các phần tử khác? ### 🔄 Kiểm tra sư phạm Hiểu nền tảng CSS: Trước khi chuyển sang selectors, hãy đảm bảo bạn có thể: - ✅ Giải thích sự khác biệt giữa cascade và inheritance - ✅ Dự đoán kiểu nào sẽ thắng trong xung đột specificity - ✅ Xác định thuộc tính nào thừa hưởng từ phần tử cha - ✅ Kết nối tệp CSS với HTML đúng cách Kiểm tra nhanh: Nếu bạn có các kiểu này, màu nào sẽ xuất hiện cho <h1> bên trong <div class="special">? Đáp án: Đỏ (selector phần tử nhắm trực tiếp đến h1) ## Làm chủ CSS Selectors CSS selectors là cách bạn nhắm đến các phần tử cụ thể để tạo kiểu. Chúng hoạt động như việc đưa ra chỉ dẫn chính xác - thay vì nói "ngôi nhà," bạn có thể nói "ngôi nhà màu xanh với cửa đỏ trên phố Maple." CSS cung cấp các cách khác nhau để cụ thể, và việc chọn đúng selector giống như chọn công cụ phù hợp cho nhiệm vụ. Đôi khi bạn cần tạo kiểu cho mọi cánh cửa trong khu phố, và đôi khi chỉ một cánh cửa cụ thể. ### Selectors phần tử (Tags) Selectors phần tử nhắm đến các phần tử HTML theo tên thẻ của chúng. Chúng rất phù hợp để đặt các kiểu cơ bản áp dụng rộng rãi trên trang của bạn: Hiểu các kiểu này: - Đặt kiểu chữ nhất quán trên toàn bộ trang với selector body - Loại bỏ margin và padding mặc định của trình duyệt để kiểm soát tốt hơn - Tạo kiểu cho tất cả các phần tử tiêu đề với màu sắc, căn chỉnh, và khoảng cách - Sử dụng đơn vị rem để kích thước font có thể mở rộng và truy cập được Mặc dù selectors phần tử hoạt động tốt cho việc tạo kiểu chung, bạn sẽ cần các selectors cụ thể hơn để tạo kiểu cho các thành phần riêng lẻ như các cây trong terrarium của bạn. ### Selectors ID cho các phần tử duy nhất Selectors ID sử dụng ký hiệu # và nhắm đến các phần tử với thuộc tính id cụ thể. Vì IDs phải là duy nhất trên một trang, chúng rất phù hợp để tạo kiểu cho các phần tử đặc biệt, riêng lẻ như các container cây bên trái và bên phải của terrarium. Hãy tạo kiểu cho các container bên của terrarium nơi các cây sẽ sống: Đoạn mã này đạt được điều gì: - Định vị các container ở các cạnh trái và phải bằng cách sử dụng định vị absolute - Sử dụng đơn vị vh (viewport height) để chiều cao phản hồi với kích thước màn hình - Áp dụng box-sizing: border-box để padding được tính vào tổng chiều rộng - Loại bỏ các đơn vị px không cần thiết từ các giá trị bằng không để mã sạch hơn - Đặt màu nền nhẹ nhàng hơn màu xám đậm ✅ Thách thức chất lượng mã: Lưu ý cách CSS này vi phạm nguyên tắc DRY (Don't Repeat Yourself). Bạn có thể refactor nó bằng cách sử dụng cả ID và class không? Cách tiếp cận cải tiến: ### Selectors Class cho các kiểu tái sử dụng Selectors Class sử dụng ký hiệu . và rất phù hợp khi bạn muốn áp dụng cùng một kiểu cho nhiều phần tử. Không giống như IDs, classes có thể được tái sử dụng trong toàn bộ HTML của bạn, khiến chúng lý tưởng cho các mẫu kiểu nhất quán. Trong terrarium của chúng ta, mỗi cây cần kiểu tương tự nhưng cũng cần định vị riêng. Chúng ta sẽ sử dụng kết hợp các classes cho kiểu chia sẻ và IDs cho định vị riêng. Đây là cấu trúc HTML cho mỗi cây: Các yếu tố chính được giải thích: - Sử dụng class="plant-holder" cho kiểu container nhất quán trên tất cả các cây - Áp dụng class="plant" cho kiểu và hành vi hình ảnh chia sẻ - Bao gồm id="plant1" duy nhất cho định vị riêng và tương tác JavaScript - Cung cấp văn bản alt mô tả để truy cập cho trình đọc màn hình Bây giờ thêm các kiểu này vào tệp style.css của bạn: Phân tích các kiểu này: - Tạo định vị tương đối cho container cây để thiết lập ngữ cảnh định vị - Đặt mỗi container cây có chiều cao 13%, đảm bảo tất cả các cây vừa vặn theo chiều dọc mà không cần cuộn - Dịch chuyển các container hơi sang trái để cây được căn giữa tốt hơn trong các container của chúng - Cho phép các cây mở rộng phản hồi với các thuộc tính max-width và max-height - Sử dụng z-index để xếp lớp các cây trên các phần tử khác trong terrarium - Thêm hiệu ứng hover nhẹ nhàng với các chuyển đổi CSS để tương tác người dùng tốt hơn ✅ Tư duy phản biện: Tại sao chúng ta cần cả selectors .plant-holder và .plant? Điều gì sẽ xảy ra nếu chúng ta cố gắng chỉ sử dụng một? ## Hiểu về CSS Positioning CSS positioning giống như việc làm đạo diễn sân khấu cho một vở kịch - bạn chỉ đạo nơi mỗi diễn viên đứng và cách họ di chuyển trên sân khấu. Một số diễn viên tuân theo đội hình tiêu chuẩn, trong khi những người khác cần định vị cụ thể để tạo hiệu ứng kịch tính. Khi bạn hiểu về positioning, nhiều thách thức bố cục trở nên dễ quản lý. Cần một thanh điều hướng luôn ở trên cùng khi người dùng cuộn? Positioning xử lý điều đó. Muốn một tooltip xuất hiện ở vị trí cụ thể? Đó cũng là positioning. ### Năm giá trị Position ### Positioning trong Terrarium của chúng ta Terrarium của chúng ta sử dụng kết hợp chiến lược các loại positioning để tạo bố cục mong muốn: Hiểu chiến lược định vị: - Các container absolute được loại bỏ khỏi dòng chảy tài liệu bình thường và ghim vào các cạnh màn hình - Các container cây relative tạo ngữ cảnh định vị trong khi vẫn ở trong dòng chảy tài liệu - Các cây absolute có thể được định vị chính xác trong các container relative của chúng - Sự kết hợp này cho phép các cây xếp chồng theo chiều dọc trong khi có thể định vị riêng lẻ ✅ Thời gian thử nghiệm: Hãy thử thay đổi các giá trị định vị và quan sát kết quả: - Điều gì xảy ra nếu bạn thay đổi .container từ absolute sang relative? - Làm thế nào bố cục thay đổi nếu .plant-holder sử dụng absolute thay vì relative? - Điều gì xảy ra khi bạn chuyển .plant sang định vị relative? ### 🔄 Kiểm tra Sư phạm Thành thạo Định vị CSS: Dừng lại để kiểm tra sự hiểu biết của bạn: - ✅ Bạn có thể giải thích tại sao cây cần định vị tuyệt đối để kéo và thả không? - ✅ Bạn có hiểu cách các container tương đối tạo ngữ cảnh định vị không? - ✅ Tại sao các container bên sử dụng định vị tuyệt đối? - ✅ Điều gì sẽ xảy ra nếu bạn loại bỏ hoàn toàn các khai báo định vị? Kết nối Thực tế: Hãy nghĩ về cách định vị CSS phản ánh bố cục thực tế: - Static: Sách trên kệ (trật tự tự nhiên) - Relative: Di chuyển một cuốn sách một chút nhưng vẫn giữ vị trí của nó - Absolute: Đặt một dấu trang tại một số trang cụ thể - Fixed: Một ghi chú dính luôn hiển thị khi bạn lật trang ## Xây dựng Terrarium với CSS Bây giờ chúng ta sẽ xây dựng một lọ thủy tinh chỉ bằng CSS - không cần hình ảnh hay phần mềm đồ họa. Tạo hiệu ứng thủy tinh, bóng và chiều sâu thực tế bằng cách sử dụng định vị và độ trong suốt thể hiện khả năng hình ảnh của CSS. Kỹ thuật này phản ánh cách các kiến trúc sư trong phong trào Bauhaus sử dụng các hình dạng hình học đơn giản để tạo ra các cấu trúc phức tạp, đẹp mắt. Khi bạn hiểu các nguyên tắc này, bạn sẽ nhận ra các kỹ thuật CSS đằng sau nhiều thiết kế web. ### Tạo các Thành phần Lọ Thủy tinh Hãy xây dựng từng phần của lọ terrarium. Mỗi phần sử dụng định vị tuyệt đối và kích thước dựa trên phần trăm để thiết kế đáp ứng: Hiểu về cấu trúc terrarium: - Sử dụng kích thước dựa trên phần trăm để mở rộng đáp ứng trên mọi kích thước màn hình - Định vị các phần tử tuyệt đối để xếp chồng và căn chỉnh chính xác - Áp dụng các giá trị độ mờ khác nhau để tạo hiệu ứng trong suốt của thủy tinh - Thực hiện lớp z-index để cây xuất hiện bên trong lọ - Thêm bóng hộp tinh tế và bo góc để tạo vẻ ngoài thực tế hơn ### Thiết kế Đáp ứng với Kích thước Phần trăm Hãy chú ý cách tất cả các kích thước sử dụng phần trăm thay vì giá trị pixel cố định: Tại sao điều này quan trọng: - Đảm bảo terrarium mở rộng tỷ lệ trên bất kỳ kích thước màn hình nào - Duy trì mối quan hệ hình ảnh giữa các thành phần lọ - Cung cấp trải nghiệm nhất quán từ điện thoại di động đến màn hình máy tính lớn - Cho phép thiết kế thích ứng mà không phá vỡ bố cục hình ảnh ### Đơn vị CSS trong Thực tế Chúng ta đang sử dụng đơn vị rem cho bo góc, đơn vị này mở rộng theo kích thước font gốc. Điều này tạo ra các thiết kế dễ tiếp cận hơn, tôn trọng sở thích font của người dùng. Tìm hiểu thêm về đơn vị tương đối CSS trong tài liệu chính thức. ✅ Thử nghiệm Hình ảnh: Thử thay đổi các giá trị này và quan sát hiệu ứng: - Thay đổi độ mờ của lọ từ 0.5 thành 0.8 – điều này ảnh hưởng thế nào đến vẻ ngoài của thủy tinh? - Điều chỉnh màu đất từ #3a241d thành #8B4513 – tác động hình ảnh là gì? - Sửa đổi z-index của đất thành 2 – điều gì xảy ra với lớp? ### 🔄 Kiểm tra Sư phạm Hiểu Thiết kế Hình ảnh CSS: Xác nhận sự hiểu biết của bạn về CSS hình ảnh: - ✅ Làm thế nào kích thước dựa trên phần trăm tạo ra thiết kế đáp ứng? - ✅ Tại sao độ mờ tạo hiệu ứng trong suốt của thủy tinh? - ✅ Vai trò của z-index trong việc xếp lớp các phần tử là gì? - ✅ Làm thế nào giá trị bo góc tạo hình dạng lọ? Nguyên tắc Thiết kế: Hãy chú ý cách chúng ta xây dựng hình ảnh phức tạp từ các hình dạng đơn giản: 1. Hình chữ nhật → Hình chữ nhật bo góc → Thành phần lọ 2. Màu phẳng → Độ mờ → Hiệu ứng thủy tinh 3. Phần tử riêng lẻ → Bố cục xếp lớp → Hiệu ứng 3D --- ## Thử thách GitHub Copilot Agent 🚀 Sử dụng chế độ Agent để hoàn thành thử thách sau: Mô tả: Tạo một hoạt ảnh CSS làm cho cây trong terrarium nhẹ nhàng đung đưa qua lại, mô phỏng hiệu ứng gió tự nhiên. Điều này sẽ giúp bạn thực hành hoạt ảnh CSS, biến đổi và keyframes đồng thời tăng tính hấp dẫn hình ảnh của terrarium. Yêu cầu: Thêm hoạt ảnh keyframe CSS để làm cho cây trong terrarium nhẹ nhàng đung đưa từ bên này sang bên kia. Tạo một hoạt ảnh đung đưa xoay mỗi cây nhẹ nhàng (2-3 độ) sang trái và phải với thời gian 3-4 giây, và áp dụng nó cho lớp .plant. Đảm bảo hoạt ảnh lặp lại vô hạn và có hàm easing để chuyển động tự nhiên. Tìm hiểu thêm về chế độ agent tại đây. ## 🚀 Thử thách: Thêm Hiệu ứng Phản chiếu Thủy tinh Sẵn sàng nâng cấp terrarium của bạn với hiệu ứng phản chiếu thủy tinh thực tế? Kỹ thuật này sẽ thêm chiều sâu và tính chân thực vào thiết kế. Bạn sẽ tạo các điểm sáng tinh tế mô phỏng cách ánh sáng phản chiếu trên bề mặt thủy tinh. Cách tiếp cận này tương tự như cách các họa sĩ thời Phục hưng như Jan van Eyck sử dụng ánh sáng và phản chiếu để làm cho thủy tinh được vẽ trông như ba chiều. Đây là mục tiêu của bạn: Thử thách của bạn: - Tạo các hình oval màu trắng hoặc sáng để làm hiệu ứng phản chiếu thủy tinh - Định vị chúng một cách chiến lược ở phía bên trái của lọ - Áp dụng hiệu ứng độ mờ và làm mờ phù hợp để phản chiếu ánh sáng thực tế - Sử dụng border-radius để tạo hình dạng bong bóng tự nhiên - Thử nghiệm với gradient hoặc bóng hộp để tăng tính chân thực ## Bài kiểm tra sau bài giảng Bài kiểm tra sau bài giảng ## Mở rộng Kiến thức CSS của Bạn CSS có thể cảm thấy phức tạp ban đầu, nhưng hiểu các khái niệm cốt lõi này cung cấp nền tảng vững chắc cho các kỹ thuật nâng cao hơn. Các lĩnh vực học CSS tiếp theo của bạn: - Flexbox - đơn giản hóa căn chỉnh và phân phối các phần tử - CSS Grid - cung cấp công cụ mạnh mẽ để tạo bố cục phức tạp - CSS Variables - giảm sự lặp lại và cải thiện khả năng duy trì - Thiết kế đáp ứng - đảm bảo trang web hoạt động tốt trên các kích thước màn hình khác nhau ### Tài nguyên Học Tương tác Thực hành các khái niệm này với các trò chơi thú vị, tương tác: - 🐸 Flexbox Froggy - Thành thạo Flexbox qua các thử thách thú vị - 🌱 Grid Garden - Học CSS Grid bằng cách trồng cà rốt ảo - 🎯 CSS Battle - Kiểm tra kỹ năng CSS của bạn với các thử thách mã hóa ### Học thêm Để nắm vững các nguyên tắc cơ bản của CSS, hoàn thành module Microsoft Learn này: Style your HTML app with CSS ### ⚡ Những gì bạn có thể làm trong 5 phút tới - [ ] Mở DevTools và kiểm tra các kiểu CSS trên bất kỳ trang web nào bằng bảng Elements - [ ] Tạo một tệp CSS đơn giản và liên kết nó với một trang HTML - [ ] Thử thay đổi màu sắc bằng các phương pháp khác nhau: hex, RGB và tên màu - [ ] Thực hành mô hình hộp bằng cách thêm padding và margin vào một div ### 🎯 Những gì bạn có thể hoàn thành trong giờ này - [ ] Hoàn thành bài kiểm tra sau bài học và ôn lại các nguyên tắc CSS - [ ] Tạo kiểu cho trang HTML của bạn với font chữ, màu sắc và khoảng cách - [ ] Tạo một bố cục đơn giản bằng flexbox hoặc grid - [ ] Thử nghiệm với các chuyển đổi CSS để tạo hiệu ứng mượt mà - [ ] Thực hành thiết kế đáp ứng với media queries ### 📅 Cuộc phiêu lưu CSS kéo dài một tuần của bạn - [ ] Hoàn thành bài tập tạo kiểu terrarium với sự sáng tạo - [ ] Thành thạo CSS Grid bằng cách xây dựng bố cục thư viện ảnh - [ ] Học hoạt ảnh CSS để làm cho thiết kế của bạn sống động - [ ] Khám phá các bộ tiền xử lý CSS như Sass hoặc Less - [ ] Nghiên cứu các nguyên tắc thiết kế và áp dụng chúng vào CSS của bạn - [ ] Phân tích và tái tạo các thiết kế thú vị mà bạn tìm thấy trực tuyến ### 🌟 Sự thành thạo thiết kế kéo dài một tháng của bạn - [ ] Xây dựng một hệ thống thiết kế trang web đáp ứng hoàn chỉnh - [ ] Học CSS-in-JS hoặc các framework ưu tiên tiện ích như Tailwind - [ ] Đóng góp cho các dự án mã nguồn mở với các cải tiến CSS - [ ] Thành thạo các khái niệm CSS nâng cao như thuộc tính tùy chỉnh CSS và containment - [ ] Tạo thư viện thành phần tái sử dụng với CSS mô-đun - [ ] Hướng dẫn người khác học CSS và chia sẻ kiến thức thiết kế ## 🎯 Lộ trình Thành thạo CSS của bạn ### 🛠️ Tóm tắt Bộ công cụ CSS của bạn Sau khi hoàn thành bài học này, bạn đã có: - Hiểu về Cascade: Cách các kiểu kế thừa và ghi đè lẫn nhau - Thành thạo Selector: Nhắm mục tiêu chính xác với phần tử, lớp và ID - Kỹ năng Định vị: Đặt và xếp lớp phần tử một cách chiến lược - Thiết kế Hình ảnh: Tạo hiệu ứng thủy tinh, bóng và độ trong suốt - Kỹ thuật Đáp ứng: Bố cục dựa trên phần trăm thích ứng với mọi màn hình - Tổ chức Mã: Cấu trúc CSS sạch, dễ duy trì - Thực hành Hiện đại: Sử dụng đơn vị tương đối và mẫu thiết kế dễ tiếp cận Bước tiếp theo: Terrarium của bạn giờ đã có cấu trúc (HTML) và kiểu dáng (CSS). Bài học cuối cùng sẽ thêm tính tương tác với JavaScript! ## Bài tập CSS Refactoring --- Tuyên bố miễn trừ trách nhiệm: Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI Co-op Translator. Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ bản địa nên được coi là nguồn thông tin chính thức. Đối với thông tin quan trọng, khuyến nghị sử dụng dịch vụ dịch thuật chuyên nghiệp bởi con người. Chúng tôi không chịu trách nhiệm cho bất kỳ sự hiểu lầm hoặc diễn giải sai nào phát sinh từ việc sử dụng bản dịch này.
Terrarium 项目第一部分：HTML 入门
HTML，即超文本标记语言，是你访问过的每个网站的基础。把 HTML 想象成网页的骨架 —— 它定义了内容的位置、组织方式以及每个部分的含义。虽然 CSS 会在之后用颜色和布局“装饰”你的 HTML，JavaScript 会通过交互让它“活起来”，但 HTML 则提供了实现一切的基本结构。 在本课中，你将为一个虚拟的玻璃植物箱界面创建 HTML 结构。这个动手项目将教会你基本的 HTML 概念，同时构建一个视觉上有吸引力的东西。你将学习如何使用语义元素来组织内容、处理图片，并为一个交互式网页应用创建基础。 课程结束时，你将拥有一个可以显示植物图片并组织成列的工作HTML页面，为下一课的样式设计做好准备。如果一开始看起来很基础，不用担心 —— 这正是 HTML 在 CSS 添加视觉装饰之前应有的样子。 ## 课前测验 课前测验 ## 设置你的项目 在开始编写 HTML 代码之前，让我们为你的玻璃植物箱项目搭建一个合适的工作空间。从一开始创建一个有序的文件结构是一个非常重要的习惯，它将在你整个网页开发旅程中为你带来帮助。 ### 任务：创建你的项目结构 你将为玻璃植物箱项目创建专用文件夹，并添加你的第一个 HTML 文件。这里有两个方法可供选择： 选项 1：使用 Visual Studio Code 1. 打开 Visual Studio Code 2. 点击“文件”→“打开文件夹”或使用快捷键 Ctrl+K, Ctrl+O（Windows/Linux）或 Cmd+K, Cmd+O（Mac） 3. 创建一个名为 terrarium 的新文件夹并选中它 4. 在资源管理器面板点击“新建文件”图标 5. 将你的文件命名为 index.html 选项 2：使用终端命令 这些命令实现的操作有： - 创建 一个名为 terrarium 的新目录 - 进入 该 terrarium 目录 - 创建 一个空的 index.html 文件 - 在 Visual Studio Code 中打开 该文件进行编辑 ## 理解 HTML 文档结构 每个 HTML 文档都有特定的结构，浏览器需要通过它来理解并正确显示页面内容。把这种结构想象成一封正式的信 —— 它由按特定顺序排列的必需元素组成，帮助接收者（这里是浏览器）正确处理内容。 让我们先添加每个 HTML 文档都需要的基础内容。 ### DOCTYPE 声明和根元素 任何 HTML 文件的前两行作为对浏览器的“文档介绍”： 理解这段代码做了什么： - 声明 文档类型为 HTML5，使用 <!DOCTYPE html> - 创建 含有所有页面内容的根 <html> 元素 - 确立 现代网页标准，确保浏览器正确渲染 - 保证 各种浏览器和设备上的一致显示效果 ### 🔄 教学检查点 暂停并反思：在继续之前，确保你理解了： - ✅ 为什么每个 HTML 文档都需要 DOCTYPE 声明 - ✅ <html> 根元素包含了什么 - ✅ 这种结构如何帮助浏览器正确渲染页面 快速自测：你能用自己的话解释“标准兼容渲染”是什么意思吗？ ## 添加必要的文档元数据 HTML 文档的 <head> 部分包含了浏览器和搜索引擎需要的关键信息，但访客不会直接看到它。这部分可以看作是“幕后”信息，帮助你的网页正常工作且在不同设备和平台上正确显示。 这段元数据告诉浏览器如何显示页面，使用什么字符编码，以及如何处理不同屏幕尺寸 —— 这些都是构建专业且可访问网页的重要因素。 ### 任务：添加文档头部 将以下 <head> 部分插入到 <html> 标签的开头和结尾之间： 拆解每个元素的作用： - 设置 在浏览器标签和搜索结果中显示的页面标题 - 指定 UTF-8 字符编码，确保文本能正确显示全球字符 - 保证 兼容现代版本的 Internet Explorer - 通过设置视口匹配设备宽度 来实现响应式设计 - 控制 页面初始缩放，保证内容按自然大小显示 ## 构建文档主体 <body> 元素包含网页所有的可见内容 —— 用户将看到并与之交互的一切。虽然 <head> 向浏览器提供指令，<body> 才是真正持有内容：文字、图片、按钮及其他创建用户界面的元素。 让我们添加主体结构，理解 HTML 标签如何协作创建有意义内容。 ### 理解 HTML 标签结构 HTML 使用成对标签定义元素。大多数标签有开标签如 <p> 和闭标签如 </p>，中间包含内容：<p>Hello, world!</p>，表示一个包含文本“Hello, world!”的段落元素。 ### 任务：添加 <body> 元素 更新你的 HTML 文件，加入 <body> 元素： 该完整结构提供了： - 建立 基本的 HTML5 文档框架 - 包含 正确渲染所必须的元数据 - 创建 一个空白主体，为你的可见内容准备位置 - 符合 现代网页开发的最佳实践 现在你可以开始添加玻璃植物箱的可见元素了。我们将用 <div> 元素作为容器来组织不同内容区域，并用 <img> 标签显示植物图片。 ### 使用图片和布局容器 图片在 HTML 中比较特殊，因为它们使用“自闭合”标签。与像 <p></p> 这类包裹内容的元素不同，<img> 标签在标签内部通过属性（如 src 指向图片文件路径，alt 用于无障碍访问）包含了所需全部信息。 添加图片前，你需要通过创建图片文件夹并添加植物图形来合理组织项目文件。 首先，设置你的图片： 1. 在玻璃植物箱项目文件夹中创建一个名为 images 的文件夹 2. 从 solution folder 下载植物图片（共14张） 3. 将所有植物图片复制到你的新 images 文件夹中 ### 任务：创建植物展示布局 现在，在你的 <body></body> 标签之间，添加组织成两列的植物图片： 这段代码的步骤说明如下： - 创建 一个主页面容器，id="page"，用于包含所有内容 - 建立 两个列容器：left-container 和 right-container - 将 7 株植物放入左列，7 株放入右列 - 用 plant-holder div 包裹每株植物图片，方便单独定位 - 应用 一致的类名，方便下一课中 CSS 样式设定 - 为 每个植物图片分配唯一 ID，便于后续 JavaScript 操作 - 包含 指向 images 文件夹的正确文件路径 ### 🔄 教学检查点 结构理解：花点时间回顾你的 HTML 结构： - ✅ 你能识别布局中的主要容器吗？ - ✅ 你理解为什么每张图片都需要唯一 ID？ - ✅ 你会怎么描述 plant-holder div 的作用？ 视觉检查：在浏览器中打开你的 HTML 文件。你应该能看到： - 一个基础的植物图片列表 - 图片分成两列排列 - 简单且未加样式的布局 记住：这种朴素的外观正是 CSS 添加样式前 HTML 应有的样子！ 有了这些标记，植物将出现在屏幕上，虽然还没有美观的样式 —— 那正是下一课 CSS 的作用！现在你有了坚实的 HTML 基础，内容被正确组织且符合无障碍最佳实践。 ## 使用语义 HTML 提升无障碍性 语义 HTML 指的是根据内容的意义和用途选择 HTML 元素，而不是仅仅根据外观使用。当你使用语义标记时，就在向浏览器、搜索引擎和辅助技术（如屏幕阅读器）传达内容的结构和意义。 这种方法让你的网站对残障用户更友好，也帮助搜索引擎更好地理解内容。这是现代网页开发的基本原则，能为所有用户创造更好的体验。 ### 添加语义页面标题 让我们给玻璃植物箱页面添加一个合适的标题。将这行代码插入到你的 <body> 标签之后： 语义标记重要性的原因： - 帮助 屏幕阅读器导航并理解页面结构 - 改善 搜索引擎优化（SEO），明确内容层级 - 增强 视觉障碍或认知障碍用户的无障碍性 - 创造 跨所有设备和平台更佳的用户体验 - 符合 网页标准和专业开发的最佳实践 语义与非语义选择示例： ## 创建玻璃植物箱容器 现在，让我们添加玻璃植物箱自身的 HTML 结构 —— 这是存放植物的玻璃容器。该部分展示了一个重要概念：HTML 提供结构，但没有 CSS 样式，这些元素暂时不可见。 玻璃植物箱标记使用了描述性很强的类名，方便下一课 CSS 直观且易维护的设计。 ### 任务：添加玻璃植物箱结构 将以下标记插入到最后一个 </div> 标签之前（即页面容器关闭标签之前）： 理解这个玻璃植物箱结构： - 创建 一个主要的玻璃植物箱容器，并赋予唯一 ID 以便样式设计 - 定义 每个视觉组件（顶部、墙壁、泥土、底部）的独立元素 - 包含 用于玻璃反射效果的嵌套元素（光泽元素） - 使用 描述性类名，明确指示每个元素的用途 - 准备 CSS 样式结构，以创建玻璃生态瓶的外观 ### 🔄 教学自查 HTML 结构掌握：在继续之前，请确保你能够： - ✅ 解释 HTML 结构和视觉外观的区别 - ✅ 识别语义和非语义的 HTML 元素 - ✅ 描述正确的标记如何有利于无障碍访问 - ✅ 认识完整的文档树结构 测试你的理解：尝试在禁用 JavaScript 和移除 CSS 的浏览器中打开你的 HTML 文件。这样你就能看到你创建的纯粹语义结构！ --- ## GitHub Copilot Agent 挑战 使用 Agent 模式完成以下挑战： 描述： 创建一个语义化的 HTML 结构，用于添加到生态瓶项目中的植物护理指南部分。 提示： 创建一个语义化的 HTML 段落，包含主标题“Plant Care Guide”（植物护理指南），三个子部分，标题分别为“Watering”（浇水）、“Light Requirements”（光照需求）和“Soil Care”（土壤护理），每部分包含一段植物护理信息。使用合适的语义 HTML 标签，如 <section>、<h2>、<h3> 和 <p>，来适当组织内容。 了解更多关于 agent 模式 。 ## 探索 HTML 历史挑战 了解网页演变 自 1990 年 Tim Berners-Lee 在 CERN 创建第一个网页浏览器以来，HTML 已经发生了巨大变革。一些老旧标签如 <marquee> 现在被废弃，因为它们与现代无障碍标准和响应式设计原则不兼容。 尝试这个实验： 1. 临时用 <marquee> 标签包裹你的 <h1> 标题：<marquee><h1>My Terrarium</h1></marquee> 2. 在浏览器中打开页面，观察滚动效果 3. 思考为什么该标签被废弃（提示：考虑用户体验和无障碍） 4. 移除 <marquee> 标签，恢复语义化标记 反思问题： - 滚动标题如何影响视力障碍或动作敏感的用户？ - 哪些现代 CSS 技术可以更无障碍地实现类似视觉效果？ - 为什么使用当前的网页标准比使用废弃元素更重要？ 探索更多关于 过时和废弃的 HTML 元素 ，了解网页标准如何发展以提升用户体验。 ## 课后测验 课后测验 ## 复习与自学 加深你的 HTML 知识 HTML 作为网页的基础已有 30 多年历史，从简单的文档标记语言演变为构建互动应用的复杂平台。理解这一演变有助于你更好地理解现代网页标准，并做出更好的开发决策。 推荐学习路径： 1. HTML 历史与演变 - 研究从 HTML 1.0 到 HTML5 的时间线 - 探讨某些标签被废弃的原因（无障碍、移动友好性、可维护性） - 调查新兴的 HTML 特性和提案 2. 语义 HTML 深入学习 - 学习完整的 HTML5 语义元素列表 - 练习识别 <article>、<section>、<aside> 和 <main> 的使用时机 - 了解增强无障碍的 ARIA 属性 3. 现代网页开发 - 探索 Microsoft Learn 上的 构建响应式网站 - 理解 HTML 如何与 CSS 和 JavaScript 集成 - 学习网页性能和 SEO 最佳实践 反思问题： - 你发现了哪些被废弃的 HTML 标签？它们为何被移除？ - 未来版本有哪些新的 HTML 特性正在提案中？ - 语义 HTML 如何助力网页无障碍和 SEO？ ### ⚡ 未来 5 分钟内可做事项 - [ ] 打开 DevTools（F12）并检查你喜欢网站的 HTML 结构 - [ ] 创建一个包含基本标签 <h1>、<p>、<img> 的简单 HTML 文件 - [ ] 使用 W3C HTML Validator 进行 HTML 验证 - [ ] 尝试用 <!-- comment --> 添加 HTML 注释 ### 🎯 未来一小时可完成事项 - [ ] 完成课后测验并复习语义 HTML 概念 - [ ] 使用恰当的 HTML 结构建立一个简单的个人网页 - [ ] 试验不同的标题级别和文本格式化标签 - [ ] 添加图片和链接练习多媒体集成 - [ ] 研究你未尝试过的 HTML5 特性 ### 📅 未来一周的 HTML 学习计划 - [ ] 使用语义标记完成生态瓶项目作业 - [ ] 创建一个使用 ARIA 标签和角色的无障碍网页 - [ ] 练习创建带有多种输入类型的表单 - [ ] 探索 HTML5 API，比如 localStorage 或地理位置 - [ ] 学习响应式 HTML 模式和移动优先设计 - [ ] 审查其他开发者的 HTML 代码，学习最佳实践 ### 🌟 未来一个月的网页基础计划 - [ ] 构建展示你 HTML 精通程度的个人作品网站 - [ ] 学习使用 Handlebars 等框架进行 HTML 模板编写 - [ ] 通过改进 HTML 文档贡献开源项目 - [ ] 掌握高级 HTML 概念，如自定义元素 - [ ] 将 HTML 与 CSS 框架和 JavaScript 库整合 - [ ] 指导其他 HTML 初学者 ## 🎯 你的 HTML 掌握时间表 ### 🛠️ 你的 HTML 工具包总结 完成本课后，你已具备： - 文档结构：完整的 HTML5 基础，包含正确的 DOCTYPE - 语义标记：富有意义、有助于无障碍和 SEO 的标签 - 图像集成：合理的文件组织和 alt 文本规范 - 布局容器：用描述性类名战略性地使用 div - 无障碍意识：理解屏幕阅读器的导航方式 - 现代标准：掌握当前 HTML5 实践及废弃标签知识 - 项目基础：为 CSS 样式和 JavaScript 交互搭建坚实基础 下一步：你的 HTML 结构已准备好进行 CSS 样式设计！你所构建的语义基础将使下一课更加易懂。 ## 作业 练习你的 HTML：构建博客模拟页面 --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> 免责声明： 本文件使用 AI 翻译服务 Co-op Translator 进行翻译。虽然我们力求准确，但请注意自动翻译可能包含错误或不准确之处。原始文件的母语版本应被视为权威来源。对于关键信息，建议使用专业人工翻译。因使用本翻译而产生的任何误解或误读，我们不承担任何责任。 <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Project 第二部分：CSS 介绍
还记得你的 HTML 生态瓶看起来很基础吗？CSS 就是把那个普通的结构变成视觉上更吸引人的东西。 如果说 HTML 就像搭建房子的框架，那么 CSS 就是让它感觉像家的所有东西——油漆颜色、家具布置、灯光，以及房间之间的流动。想想凡尔赛宫最初只是一个简单的狩猎小屋，但经过精心的装饰和布局，就变成了世界上最宏伟的建筑之一。 今天，我们将把你的生态瓶从功能性变成精致。你将学习如何精准定位元素，使布局响应不同屏幕尺寸，并创造让网站引人注目的视觉效果。 本课结束时，你将看到战略性的 CSS 样式如何极大提升你的项目。让我们为你的生态瓶增添一些风格吧。 ## 课前测验 课前测验 ## CSS 入门 CSS 常被认为只是“美化”，但它的作用远不止如此。CSS 就像电影导演——你不仅控制一切的外观，还控制其运动、响应交互以及适应不同情况。 现代 CSS 非常强大。你可以编写代码，自动调整手机、平板和桌面电脑的布局。你可以创建平滑动画，引导用户注意力。所有功能协同工作时效果非常惊人。 本课目标： - 创建 用现代 CSS 技术完整设计你的生态瓶视觉效果 - 探索 级联、继承和 CSS 选择器等基础概念 - 实现 响应式定位和布局策略 - 构建 生态瓶容器，使用 CSS 形状和样式 ### 先修条件 你应该完成了上一课的生态瓶 HTML 结构，准备好进行样式设计。 ### 设置你的 CSS 文件 开始样式设计前，我们需要将 CSS 连接到 HTML。这让浏览器知道哪里能找到生态瓶的样式指令。 在你的生态瓶文件夹中，创建一个名为 style.css 的新文件，然后在 HTML 文档的 <head> 部分链接它： 此代码作用： - 建立 HTML 和 CSS 文件之间的连接 - 告诉浏览器加载并应用 style.css 中的样式 - 使用 rel="stylesheet" 属性声明这是 CSS 文件 - 以 href="./style.css" 路径引用文件 ## 理解 CSS 级联 你有没有想过为什么 CSS 叫“层叠样式表”？样式像瀑布一样层叠，有时相互冲突。 想象军队指挥结构——将军命令“所有士兵穿绿衣”，但某个单位的具体命令是“典礼穿礼服蓝”，这时具体命令优先。CSS 也遵循类似逻辑，理解此层级关系才能更好地调试。 ### 级联优先级实验 让我们通过样式冲突来观察级联。先给你的 <h1> 标签添加行内样式： 代码做了什么： - 直接 用行内样式将 <h1> 设置为红色 - 使用 style 属性直接在 HTML 中嵌入 CSS - 创建 该元素的最高优先级样式规则 接着，在你的 style.css 文件中添加以下规则： 上述说明： - 定义 了所有 <h1> 元素的 CSS 规则 - 用 外部样式表将文本颜色设置为蓝色 - 优先级 低于行内样式 ✅ 知识检测：网页中显示的是哪个颜色？为什么这个颜色胜出？你能想到什么时候需要覆盖样式吗？ ## CSS 继承原理 CSS 继承很像遗传学——元素继承父元素的某些属性。如果你给 body 元素设置字体，全页文本都会自动使用同样字体。这就像哈布斯堡王朝的家族下巴，在没有具体指定的情况下代代相传。 但不是所有属性都会继承。文本样式如字体和颜色会继承，布局属性如外边距和边框则不会。就像孩子可能继承父母的外貌特征，但不一定继承穿衣风格。 ### 观察字体继承 试试给 <body> 元素设置字体： 解释这里发生的事情： - 设置 全页面字体，针对 <body> 元素 - 使用 字体栈托底，提升浏览器兼容性 - 应用 现代系统字体，跨操作系统表现良好 - 确保 所有子元素继承字体，除非被特别覆盖 打开浏览器开发者工具（F12），切换到 Elements 面板，检查 <h1> 元素，你会看到它继承自 body 的字体： ✅ 试验时间：尝试给 <body> 设置其他可继承属性如 color，line-height 或 text-align。你的标题和其他元素会发生什么变化？ ### 🔄 教学进度检查 CSS 基础理解情况：在学习选择器前，请确保你能： - ✅ 解释级联与继承的区别 - ✅ 预测样式冲突中哪个样式会生效 - ✅ 识别哪些属性会从父元素继承 - ✅ 正确连接 CSS 和 HTML 文件 快速测试：如果样式如下，<div class="special"> 内的 <h1> 显示什么颜色？ 答案：红色（元素选择器直接针对 h1） ## 精通 CSS 选择器 CSS 选择器是你指定样式目标元素的方式。它们就像给出精确指示——不是说“那栋房子”，而是说“枫树街上蓝色门的房子”。 CSS 提供了多种定位方式，选择正确选择器就像选对工具。你有时要给整个街区的每扇门统一造型，有时只对某一扇特殊的门操作。 ### 元素选择器（标签） 元素选择器通过标签名称定位 HTML 元素。很适合设置页面全局基础样式： 这些样式做了什么： - 用 body 选择器设置统一字体排版 - 清除 浏览器默认的外边距和内边距，方便精准控制 - 给所有标题元素 设定颜色、对齐和间距 - 使用 rem 单位，提升字体大小的可伸缩性与无障碍性 虽然元素选择器适合通用样式，但针对生态瓶里的具体植物组件，你需要更具体的选择器。 ### ID 选择器用于唯一元素 ID 选择器用 # 符号，定位具有唯一 id 属性的元素。ID 在页面中唯一，非常适合样式化单个特定元素，比如生态瓶左、右侧的植物容器。 为你的生态瓶侧边容器创建样式： 本代码实现： - 用 absolute 定位将容器固定在屏幕左右边缘 - 用 vh（视口高度）单位实现响应式高度，适应屏幕尺寸 - 设置 box-sizing: border-box，确保内边距包括在宽度内 - 移除 零值的 px 单位，使代码简洁 - 设置 柔和背景色，比生硬灰色更舒适 ✅ 代码质量挑战：此 CSS 违反了 DRY（不重复自己）原则。你能用 ID 和类重构它吗？ 改进方案： ### 类选择器用于可复用样式 类选择器用 . 符号，适合给多个元素应用相同样式。不同于 ID，类可以在 HTML 中多次使用，适合统一样式模式。 在生态瓶中，每株植物样式相似但定位不同。我们会用类做共享样式，用 ID 做单独定位。 各植物的 HTML 结构如下： 关键元素说明： - class="plant-holder" 用于各植物容器，统一样式 - class="plant" 用于植物图片，共享样式和行为 - id="plant1" 唯一 ID，用于定位和 JS 交互 - 提供 alt 文本，提升屏幕阅读器可访问性 现在将这些样式添加到 style.css： 样式详解： - 为植物容器 设定相对定位，创建定位依据 - 设置 每个容器高度为 13%，确保植物整体垂直可见无滚动 - 稍微向左偏移，更好地将植物居中在容器内 - 让植物图片 能响应式缩放，设置最大宽高限制 - 用 z-index 让植物层级高于其他元素 - 添加 细微的悬停动画，提升用户交互体验 ✅ 深入思考：为什么需要同时使用 .plant-holder 和 .plant 选择器？如果只用一个，会怎样？ ## 理解 CSS 定位 CSS 定位像舞台导演——你决定演员站哪里，怎么动。某些演员按标准站位，其它演员为了戏剧效果需要特殊定位。 理解定位后，很多布局问题迎刃而解。想要滚动页面时导航栏固定顶部？定位来帮忙。需要特定位置显示提示框？也是定位。 ### 五种定位值 ### 生态瓶中的定位应用 我们用组合定位策略，创建所需布局： 定位策略说明： - 绝对容器 从正常文档流移除，被钉在屏幕边缘 - 相对植物容器 保持文档流，同时创建定位上下文 - 绝对植物 可在相对容器内精准定位 - 组合使用 允许植物垂直堆叠，且能单独定位 ✅ 实验时间：尝试更改定位值，观察效果： - 将 .container 从 absolute 改为 relative 会怎样？ - 如果 .plant-holder 使用 absolute 而不是 relative，布局会如何变化？ - 当你将 .plant 切换为 relative 定位时会发生什么？ ### 🔄 教学检查点 CSS 定位掌握情况：暂停，确认你的理解： - ✅ 你能解释为什么植物需要绝对定位来实现拖放吗？ - ✅ 你理解相对容器如何创建定位上下文吗？ - ✅ 为什么侧边容器使用绝对定位？ - ✅ 如果完全移除定位声明，会发生什么？ 现实世界联系：思考 CSS 定位如何反映现实布局： - 静态：书架上的书（自然顺序） - 相对：稍微移动一本书，但保持它的位置 - 绝对：在特定页码放置书签 - 固定：翻页时仍然可见的贴纸 ## 使用 CSS 构建玻璃瓶 现在我们将仅用 CSS 构建一个玻璃罐——不需要图像或图形软件。 使用定位和透明度创建逼真的玻璃、阴影和深度效果，展示了 CSS 的视觉能力。这种技术类似包豪斯运动中的建筑师如何用简单的几何形状创造复杂且美丽的结构。一旦你理解了这些原理，就能认识出许多网页设计背后的 CSS 技巧。 ### 创建玻璃罐组件 让我们逐个构建生态瓶的罐体部分。每个部分都使用绝对定位和百分比尺寸以实现响应式设计： 理解生态瓶构建： - 使用 基于百分比的尺寸，实现所有屏幕尺寸的响应式缩放 - 绝对定位 元素，以精确地堆叠和对齐 - 应用 不同的不透明度值，创造玻璃透明效果 - 实现 z-index 分层，使植物显示在瓶子内部 - 添加 细微的盒阴影和圆角边框，增强真实感 ### 百分比响应式设计 注意所有尺寸都是用百分比，而非固定像素值： 为什么重要： - 确保 生态瓶在任何屏幕尺寸下成比例缩放 - 维护 瓶子各部件间的视觉关系 - 提供 从手机到大型桌面显示器的一致体验 - 允许 设计自适应且不破坏视觉布局 ### CSS 单位示范 我们使用 rem 单位来设置圆角，它相对于根字体大小缩放。这样创建的设计更易访问，尊重用户的字体偏好。详见官方规范中的 CSS 相对单位。 ✅ 视觉实验：尝试修改这些数值，观察效果： - 将罐子的透明度从 0.5 改为 0.8——这如何影响玻璃外观？ - 将土壤颜色从 #3a241d 改为 #8B4513——视觉效果怎样改变？ - 修改土壤的 z-index 为 2——分层效果发生了什么？ ### 🔄 教学检查点 CSS 视觉设计理解：确认你对视觉 CSS 的掌握： - ✅ 百分比尺寸如何实现响应式设计？ - ✅ 为什么透明度能创建玻璃透明效果？ - ✅ z-index 在分层中起什么作用？ - ✅ 圆角值如何塑造罐子形状？ 设计原则：注意我们如何用简单形状构建复杂视觉： 1. 矩形 → 圆角矩形 → 罐子组件 2. 纯色 → 透明度 → 玻璃效果 3. 单个元素 → 分层组合 → 三维效果 --- ## GitHub Copilot Agent 挑战 🚀 使用 Agent 模式完成以下挑战： 描述： 创建一个 CSS 动画，使生态瓶中的植物轻柔地摇摆，模拟自然微风效果。帮助你练习 CSS 动画、变换和关键帧，同时增强生态瓶的视觉吸引力。 提示： 添加 CSS 关键帧动画，使生态瓶内的植物缓慢地左右摇摆。创建一个摇摆动画，让每棵植物左右旋转约 2-3 度，持续时间为 3-4 秒，应用于 .plant 类。确保动画无限循环，且采用缓动函数以获得自然流畅的动作。 了解更多关于 agent 模式 。 ## 🚀 挑战：添加玻璃反光效果 准备好用真实的玻璃反光效果增强你的生态瓶吗？这项技术将为设计添加深度和真实感。 你将创建细腻的高光，模拟光在玻璃表面的反射。这与文艺复兴画家扬·凡·艾克（Jan van Eyck）使用光线和反射使绘画玻璃呈现三维感的手法类似。你的目标如下： 你的挑战： - 创建 微妙的白色或浅色椭圆形反光 - 将其定位 在罐子的左侧恰当位置 - 应用 适当的不透明度和模糊效果，实现真实光反射 - 用 border-radius 制造有机、气泡状形状 - 尝试 渐变或盒阴影增强真实感 ## 课后测验 课后测验 ## 拓展你的 CSS 知识 CSS 起初可能显得复杂，但掌握这些核心概念将为深入学习打下坚实基础。 你的下一步 CSS 学习领域： - Flexbox - 简化元素对齐和分布 - CSS 网格布局 - 强大工具，创建复杂布局 - CSS 变量 - 降低重复，提高可维护性 - 响应式设计 - 确保网站在不同屏幕尺寸上表现良好 ### 互动学习资源 通过这些有趣的实战游戏来练习概念： - 🐸 Flexbox Froggy - 通过有趣挑战掌握 Flexbox - 🌱 Grid Garden - 通过种植虚拟胡萝卜学习 CSS 网格 - 🎯 CSS Battle - 用编码挑战测试你的 CSS 技能 ### 额外学习资源 想系统学习 CSS 基础，完成微软学习模块：用 CSS 样式化你的 HTML 应用 ### ⚡ 接下来 5 分钟你可以做什么 - [ ] 打开开发者工具，使用元素面板检查任何网站的 CSS 样式 - [ ] 创建一个简单的 CSS 文件，并链接到 HTML 页面 - [ ] 尝试用不同方式改变颜色：十六进制、RGB 和命名颜色 - [ ] 通过添加内边距和外边距练习盒模型 ### 🎯 接下来一小时你能完成什么 - [ ] 完成课后测验，复习 CSS 基础 - [ ] 给你的 HTML 页面添加字体、颜色和间距样式 - [ ] 使用 flexbox 或 grid 创建简单布局 - [ ] 试验 CSS 过渡实现平滑效果 - [ ] 用媒体查询练习响应式设计 ### 📅 你的 CSS 一周学习计划 - [ ] 富有创意地完成生态瓶样式作业 - [ ] 通过建立照片图库布局掌握 CSS 网格 - [ ] 学习 CSS 动画，让设计更生动 - [ ] 探索 Sass 或 Less 等 CSS 预处理器 - [ ] 学习设计原则并应用到 CSS 中 - [ ] 分析并复刻你在网上发现的有趣设计 ### 🌟 你的 CSS 一个月设计精通计划 - [ ] 构建完整响应式网站设计系统 - [ ] 学习 CSS-in-JS 或类似 Tailwind 的实用优先框架 - [ ] 为开源项目贡献 CSS 优化 - [ ] 掌握高级 CSS 概念，如自定义属性和封装内容 - [ ] 创建可重用组件库，编写模块化 CSS - [ ] 指导他人学习 CSS，分享设计知识 ## 🎯 你的 CSS 掌握时间线 ### 🛠️ 你的 CSS 工具总结 完成本课后，你已经拥有： - 层叠理解：样式如何继承和覆盖 - 选择器掌握：精准定位元素、类和 ID - 定位技能：战略性元素放置和分层 - 视觉设计：创建玻璃效果、阴影和透明度 - 响应式技术：基于百分比的布局适应任何屏幕 - 代码组织：清晰且可维护的 CSS 结构 - 现代实践：使用相对单位和无障碍设计模式 下一步：你的生态瓶现在有了结构（HTML）和样式（CSS）。最后一课将添加交互功能（JavaScript）！ ## 作业 CSS 重构 --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> 免责声明： 本文件通过 AI 翻译服务 Co-op Translator 进行翻译。虽然我们力求准确，但请注意自动翻译可能包含错误或不准确之处。原始语言的原始文档应被视为权威来源。对于重要信息，建议使用专业人工翻译。对于因使用本翻译而产生的任何误解或误释，我们不承担任何责任。 <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Project Part 1: 介紹 HTML
HTML，或稱超文字標記語言，是你曾造訪過的每個網站的基礎。將 HTML 想像成提供網頁結構的骨架——它定義內容的位置、組織方式以及每個部分的意義。雖然稍後 CSS 會為你的 HTML 加上顏色與版面配置，JavaScript 則會讓它具有互動性，但 HTML 提供了讓一切成為可能的必要結構。 在這堂課中，你將為虛擬的玻璃花房介面建立 HTML 結構。這個實作專案會教你基本的 HTML 概念，同時打造出視覺吸引人的內容。你將學到如何使用語義化元素整理內容、操作圖片，並為互動式網頁應用程式奠定基礎。 完成本課程後，你會有一個能在有組織的欄位中顯示植物圖片的 HTML 頁面，並準備好在下一課進行樣式設計。別擔心它一開始看起來很簡單——這正是 HTML 在 CSS 加入視覺裝飾前該有的樣子。 ## 課前小測驗 課前小測驗 ## 設定你的專案 在深入 HTML 程式碼之前，讓我們先為你的玻璃花房專案建立一個適當的工作空間。從一開始就建立有條理的檔案結構，是個非常重要的習慣，對你的整個網頁開發旅程都會有幫助。 ### 任務：建立你的專案結構 你將為玻璃花房專案建立一個專用資料夾，並加入你的第一個 HTML 檔案。以下是兩種可採用的方法： 方案一：使用 Visual Studio Code 1. 開啟 Visual Studio Code 2. 點擊「檔案」→「開啟資料夾」，或使用 Ctrl+K, Ctrl+O（Windows/Linux）或 Cmd+K, Cmd+O（Mac） 3. 建立一個名為 terrarium 的新資料夾並選取它 4. 在檔案總管側邊欄，點擊「新增檔案」圖示 5. 將檔案命名為 index.html 方案二：使用終端機指令 這些指令的作用如下： - 建立 一個名為 terrarium 的新資料夾作為你的專案 - 切換 到 terrarium 目錄 - 建立 一個空的 index.html 檔案 - 在 Visual Studio Code 開啟 該檔案以進行編輯 ## 理解 HTML 文件結構 每個 HTML 文件都遵循特定的結構，瀏覽器需要理解這個結構才能正確顯示網頁。將此結構想像為正式信件——它包含必要的元素且按照特定順序排列，有助於收件者（在這裡是瀏覽器）正確處理內容。 讓我們先加上每個 HTML 文件都需要的基本基礎。 ### DOCTYPE 宣告與根元素 任何 HTML 檔案的前兩行，就像是文件對瀏覽器的「介紹」： 這段程式碼的作用是： - 宣告 文件型態為 HTML5，透過 <!DOCTYPE html> - 建立 根 <html> 元素包裹所有頁面內容 - 確立 現代網頁標準，確保瀏覽器正確呈現 - 保證 不同瀏覽器和裝置顯示一致 ### 🔄 教學檢視點 暫停思考：繼續之前，請確保你理解： - ✅ 為什麼每個 HTML 文件需要 DOCTYPE 宣告 - ✅ <html> 根元素包含什麼 - ✅ 這種結構如何幫助瀏覽器正確呈現頁面 快速自我檢測：你能用自己的話說明「符合標準的呈現」是什麼意思嗎？ ## 新增必要的文件 Metadata HTML 文件的 <head> 部分包含瀏覽器和搜尋引擎需要的重要資訊，但訪客不會直接在頁面上看到。可以把它想成「幕後」資料，幫助你的網頁運作正常，並在不同裝置和平台上正確顯示。 這些 Metadata 告訴瀏覽器如何呈現頁面、要使用哪種字元編碼、以及如何處理不同螢幕尺寸——這些都是打造專業且無障礙網頁的關鍵。 ### 任務：新增文件 Head 在你的 <html> 開始和結束標籤之間，插入這段 <head>： 解釋每個元素的作用： - 設定 頁面標題，會顯示在瀏覽器分頁標籤和搜尋結果中 - 指定 UTF-8 字元編碼，確保文字在全球各地正確顯示 - 確保 支援現代版 Internet Explorer - 設定 響應式設計的 viewport，符合裝置寬度 - 控制 初始縮放比例，使內容以自然大小呈現 ## 建立文件主體 <body> 元素包含所有你網頁中可見的內容——使用者會看到和互動的所有東西。雖然 <head> 是給瀏覽器的指令，<body> 是實際內容：文字、圖片、按鈕和其他組成使用者介面的元素。 讓我們加上 body 結構，並了解 HTML 標籤如何合作，創造有意義的內容。 ### 理解 HTML 標籤結構 HTML 使用成對標籤來定義元素。大部分標籤有開始標籤例如 <p>，和結束標籤例如 </p>，中間夾帶內容：<p>Hello, world!</p>。這會建立一個包含「Hello, world!」文字的段落元素。 ### 任務：新增 Body 元素 更新你的 HTML 檔案，加入 <body> 元素： 完整結構提供： - 建立 基本的 HTML5 文件框架 - 包含 必要的 Metadata 以供瀏覽器正確呈現 - 創造 空白的 body 以容納可見內容 - 採用 現代網頁開發最佳實務 現在，你準備好加入玻璃花房的可見元素了。我們將使用 <div> 元素作為容器，組織不同區塊的內容，並使用 <img> 元素來顯示植物圖片。 ### 操作圖片與版面容器 圖片在 HTML 中是特別的，使用「自我封閉」標籤。與像 <p></p> 這類包裹內容的元素不同，<img> 標籤本身帶有所需的所有資訊，用屬性如 src 指定圖片路徑，alt 屬性做無障礙使用說明。 在加入圖片到 HTML 之前，你需要先透過建立 images 資料夾並放入植物圖像，整理專案檔案。 首先，準備你的圖片： 1. 在你的玻璃花房專案資料夾中建立一個叫 images 的資料夾 2. 從解答資料夾下載植物圖片（共 14 張） 3. 將所有植物圖片複製到你新建立的 images 資料夾 ### 任務：建立植物顯示版面 現在在你的 <body></body> 標籤之間，加入兩欄排列的植物圖片： 一步步來看這段程式碼的作用： - 建立 一個主頁面容器，id="page"，包裹所有內容 - 設置 兩個欄位容器：left-container 和 right-container - 將 7 個植物放在左欄，7 個植物放在右欄 - 將每張植物圖片放入 plant-holder div 以便個別定位 - 套用一致的 class 名稱，方便下一課的 CSS 樣式設計 - 為每張植物圖片指定獨特的 ID，方便日後 JavaScript 互動 - 正確指向 images 資料夾中的檔案路徑 ### 🔄 教學檢視點 結構理解：花點時間檢視你的 HTML 結構： - ✅ 你能辨識版面中的主要容器嗎？ - ✅ 是否理解為什麼每張圖片需要獨特的 ID？ - ✅ 你會如何描述 plant-holder div 的用途？ 視覺檢查：開啟你的 HTML 檔案於瀏覽器中，你應該會看到： - 簡單的植物圖片清單 - 兩欄排列顯示圖片 - 簡約，未經樣式設計的版面 請記得：這種樸素外觀正是 HTML 在加入 CSS 樣式前應該的樣子！ 加入這些標記後，植物會呈現在螢幕上，雖然還未經修飾，這正是下一課 CSS 將要處理的。現在你擁有堅實的 HTML 基礎，正確組織內容並符合無障礙最佳實務。 ## 使用語義化 HTML 提升無障礙 語義化 HTML 是根據元素的意義和用途挑選 HTML 標籤，而不只是依外觀。當你選用語義化標記時，你是在向瀏覽器、搜尋引擎和輔助技術（例如螢幕閱讀器）傳達內容的結構與意涵。 這個作法讓你網站對有障礙的使用者更友善，也幫助搜尋引擎更好理解你的內容。這是現代網頁開發的基本原則，為所有人創造更佳體驗。 ### 新增語義化頁面標題 讓我們為玻璃花房頁面加上一個適當標題。將此行插入在你的開頭 <body> 標籤後： 為何語義化標記很重要： - 幫助 螢幕閱讀器使用者導航和理解頁面結構 - 提升 搜尋引擎排名（SEO），明確內容階層 - 加強 視障或認知障礙使用者的無障礙體驗 - 創造 跨所有裝置與平台更佳的使用者體驗 - 遵循 網頁標準和專業開發最佳實務 語義化與非語義化選擇範例： ## 建立玻璃花房容器 現在讓我們新增玻璃花房本身的 HTML 結構——那個將用來放置植物的玻璃容器。這部分示範一個重要概念：HTML 提供結構，但沒有 CSS 樣式，這些元素暫時不會可見。 玻璃花房標記使用描述性的 class 名稱，方便下一課的 CSS 樣式設計既直覺又易維護。 ### 任務：新增玻璃花房結構 將此標記插入在最後一個 </div> 標籤之前（即頁面容器關閉標籤前）： 了解這個玻璃花房結構的含義： - 建立 一個主要的玻璃花房容器，並附加獨特 ID 以便樣式設計 - 定義每個視覺組件的獨立元素（頂部、牆壁、土壤、底部） - 包含用於玻璃反射效果（光澤元素）的嵌套元素 - 使用清晰指出每個元素用途的描述性類名 - 準備結構以便 CSS 造出玻璃植物箱的外觀 ### 🔄 教學檢視 掌握 HTML 結構：在繼續進行前，請確保你能： - ✅ 解釋 HTML 結構與視覺外觀的差異 - ✅ 識別語意與非語意的 HTML 元素 - ✅ 描述正確標記如何提升無障礙使用 - ✅ 認識完整文件樹狀結構 測試你的理解：嘗試在瀏覽器中禁用 JavaScript 並移除 CSS，開啟你的 HTML 檔案。這能讓你看到純粹的語意結構。 --- ## GitHub Copilot Agent 挑戰 使用 Agent 模式完成以下挑戰： 描述： 創建一個語意化的 HTML 結構，用於可加入植物箱專案的植物護理指南部分。 提示： 建立一個語意化 HTML 區塊，包含主標題「Plant Care Guide」及三個子區塊，標題分別是「Watering」、「Light Requirements」和「Soil Care」，每個子區塊包含一段植物護理資訊。使用適當的語意 HTML 標籤如 <section>、<h2>、<h3> 和 <p>，妥善組織內容。 進一步了解 agent mode。 ## 探索 HTML 歷史挑戰 學習網頁演變 自 1990 年 Tim Berners-Lee 在 CERN 創造首個網頁瀏覽器後，HTML 已大幅演進。部分舊標籤如 <marquee> 目前已被淘汰，因為它們與現代無障礙標準及響應式設計不兼容。 嘗試這個實驗： 1. 臨時用 <marquee> 標籤包裹 <h1> 標題：<marquee><h1>My Terrarium</h1></marquee> 2. 在瀏覽器打開頁面，觀察滾動效果 3. 思考這個標籤被淘汰的原因（提示：考慮用戶體驗與無障礙） 4. 移除 <marquee>，恢復語意標記 反思問題： - 滾動標題可能如何影響視力障礙或對動態影響敏感的用戶？ - 有哪些現代 CSS 技巧能更無障礙地實現類似視覺效果？ - 為什麼使用當代網頁標準比使用淘汰元素更重要？ 深入了解更多關於過時及淘汰的 HTML 元素，理解網頁標準如何演進改善用戶體驗。 ## 課後測驗 課後測驗 ## 複習與自學 深化你的 HTML 知識 HTML 作為網頁基礎超過 30 年，從簡單的文件標記語言發展成為構建互動應用的複雜平台。理解這演變能幫助你欣賞現代網頁標準並做出更好的開發決策。 推薦學習路徑： 1. HTML 歷史與演變 - 研究從 HTML 1.0 到 HTML5 的時間軸 - 探究某些標籤為何被淘汰（無障礙、行動友善、維護性） - 研究新興 HTML 功能與提案 2. 語意化 HTML 深入 - 學習完整的HTML5 語意元素清單 - 練習判斷何時使用 <article>、<section>、<aside> 和 <main> - 瞭解提升無障礙的 ARIA 屬性 3. 現代網頁開發 - 探索 建立響應式網站（Microsoft Learn） - 理解 HTML 如何與 CSS 及 JavaScript 整合 - 學習網頁效能與 SEO 最佳實踐 反思問題： - 你發現了哪些已被淘汰的 HTML 標籤，為什麼它們被移除？ - 未來 HTML 版本有哪些新功能被提議？ - 語意化 HTML 如何促進無障礙與 SEO？ ### ⚡ 接下來 5 分鐘可做的事 - [ ] 開啟 DevTools（F12）並檢查你喜愛網站的 HTML 結構 - [ ] 建立簡單 HTML 檔案，包含基本標籤：<h1>、<p> 和 <img> - [ ] 使用 W3C HTML 校驗器驗證你的 HTML - [ ] 嘗試在 HTML 中加入註解 <!-- comment --> ### 🎯 這小時可完成的目標 - [ ] 完成課後測驗並複習語意 HTML 概念 - [ ] 用正確 HTML 結構建立關於你的簡單網頁 - [ ] 試驗不同標題層級與文字格式標籤 - [ ] 加入圖片與連結練習多媒體整合 - [ ] 研究你尚未嘗試的 HTML5 功能 ### 📅 你的週度 HTML 進階之路 - [ ] 使用語意標記完成植物箱專案練習 - [ ] 建立使用 ARIA 標籤與角色的無障礙網頁 - [ ] 練習建立含多種輸入類型的表單 - [ ] 探索 HTML5 API，如 localStorage 或地理定位 - [ ] 研讀響應式 HTML 範式與行動優先設計 - [ ] 複習其他開發者的 HTML 程式碼與最佳實踐 ### 🌟 你這月的網頁基礎進程 - [ ] 建立展示 HTML 能力的作品集網站 - [ ] 學習使用如 Handlebars 的 HTML 模板技術 - [ ] 透過改善 HTML 文件為開源專案貢獻 - [ ] 精通進階 HTML 概念如自訂元素 - [ ] 整合 HTML 與 CSS 框架及 JavaScript 函式庫 - [ ] 指導其他學習 HTML 基礎的人 ## 🎯 你的 HTML 精通時間線 ### 🛠️ 你的 HTML 工具包總結 完成本課程後，你已具備： - 文件結構：完整的 HTML5 基礎和正確 DOCTYPE - 語意標記：增強無障礙與 SEO 的意義明確標籤 - 圖片整合：妥善組織文件與替代文字使用 - 版面容器：策略性利用帶描述性類名的 div - 無障礙意識：理解螢幕閱讀器導航原理 - 現代標準：掌握目前 HTML5 實務與被淘汰標籤知識 - 專案基礎：為 CSS 樣式與 JavaScript 互動打下堅實基礎 下一步：你的 HTML 結構已準備好進行 CSS 樣式設計！你建立的語意基礎會讓下一課更容易理解。 ## 作業 練習你的 HTML：建立一個部落格範本 --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> 免責聲明： 本文件是使用 AI 翻譯服務 Co-op Translator 進行翻譯。雖然我們盡力確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於重要資料，建議採用專業人工翻譯。我們對因使用本翻譯所引致的任何誤解或誤釋概不負責。 <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Project Part 2: CSS 入門
還記得你的 HTML terrarium 看起來相當簡單嗎？CSS 就是將那個普通結構變得視覺吸引的關鍵。 如果說 HTML 就像搭建房子的框架，那 CSS 就是讓它成為家的所有元素—牆面顏色、傢俱擺設、燈光，以及房間之間的流動。想想凡爾賽宮剛開始只是簡單的狩獵小屋，精心的裝飾和佈局使它成為世界上最壯麗的建築之一。 今天，我們會把你的 terrarium 從功能性變得精緻。你會學到如何精準定位元素，讓佈局對不同螢幕尺寸有反應，並創造出吸引網站使用者的視覺效果。 課程結束時，你會看到策略性的 CSS 樣式如何大幅提升你的專案。讓我們一起給你的 terrarium 加點風格吧。 ## 講前小測驗 講前小測驗 ## CSS 基本入門 很多人認為 CSS 只是「讓東西漂亮」，但它的用途遠不止於此。CSS 就像電影導演—不只控制外觀，還能決定移動方式、互動反應，以及如何適應不同情況。 現代 CSS 非常強大。你能撰寫自動調整手機、平板和桌面電腦布局的程式碼。還可以創造引導使用者注意力的流暢動畫。當一切協同運作時，效果令人驚豔。 本課程目標： - 用現代 CSS 技術 創造完整的 terrarium 視覺設計 - 探索 基本概念，例如層疊、繼承和 CSS 選擇器 - 實作 響應式定位與佈局策略 - 建構 terrarium 容器，運用 CSS 形狀與樣式 ### 先備條件 你應該已完成上堂課的 terrarium HTML 結構，並準備好進行樣式設定。 ### 設定你的 CSS 檔案 開始設定樣式前，需將 CSS 連結到 HTML。這個連結告訴瀏覽器在哪裏尋找 terrarium 的樣式說明。 在 terrarium 資料夾中建立名為 style.css 的新檔案，接著在你的 HTML 文件 <head> 區段加入連結： 此段程式碼功能說明： - 建立 HTML 與 CSS 檔案之間的連結 - 告訴瀏覽器載入並套用 style.css 的樣式 - 使用 rel="stylesheet" 屬性表示這是 CSS 檔案 - 透過 href="./style.css" 指定檔案路徑 ## 認識 CSS 層疊效果 你是否好奇為何稱 CSS 為「層疊」樣式表？樣式像瀑布一樣往下流，有時候彼此會衝突。 想像軍隊指揮系統—將軍命令「所有士兵穿綠色」，但特定單位接到命令「典禮穿藍色制服」。更具體的指令會優先執行。CSS 也類似，了解此層級關係可讓除錯變得簡單。 ### 層疊優先權實驗 我們來看層疊實際運作，先在 <h1> 標籤加入內嵌樣式： 此段程式碼功能說明： - 直接給予 <h1> 紅色文字，使用內嵌樣式 - 利用 style 屬性在 HTML 內嵌 CSS - 創造 最高優先權的樣式規則於該元素 接著在 style.css 加入這條規則： 上面的設定： - 定義 針對所有 <h1> 元素的 CSS 規則 - 將 文字色設為藍色，透過外部樣式表 - 優先權低 於內嵌樣式 ✅ 知識檢測：你的網站顯示哪個顏色？為何該顏色勝出？你能想到哪些情境會需要覆寫樣式嗎？ ## CSS 繼承原理 CSS 繼承就像基因遺傳—元素會繼承父元素的某些屬性。如果你在 body 設定字型，所有內部文字自動使用該字型。這有點像哈布斯堡王朝家族特徵的明顯下巴一代代遺傳。 但不是所有屬性都會繼承。字型和顏色會繼承，邊距和邊框等佈局屬性則不會。就像小孩可能遺傳父母的長相，但不見得穿父母的時尚風格。 ### 觀察字體繼承 透過設定 <body> 的字型，來實作繼承效果： 說明： - 設定 全頁字型，針對 <body> 元素 - 使用 多種字型備援沾功能，增強瀏覽器的兼容性 - 採用 現代系統字型，跨作業系統呈現佳 - 確保 除非特別覆寫，所有子元素繼承此字型 打開瀏覽器開發者工具（F12），切換至 Elements，檢查 <h1>，可看到它繼承 body 的字型： ✅ 實驗時間：試著在 <body> 設定其他可繼承屬性如 color、line-height、text-align。你的標題和其他元素會發生什麼事？ ### 🔄 教學檢核 CSS 基礎理解：在學習選擇器前，確保你能： - ✅ 解釋層疊和繼承的差異 - ✅ 預測字體優先權衝突中哪個會勝出 - ✅ 識別哪些屬性會繼承父元素 - ✅ 正確連結 CSS 檔案到 HTML 快速測試：若有以下樣式，<div class="special"> 中的 <h1> 會是什麼顏色？ 答案：紅色（元素選擇器直接針對 h1） ## 精通 CSS 選擇器 CSS 選擇器是針對特定元素應用樣式的方式。它就像給出精確方向，與其說「那棟房子」，不如說「楓樹街上紅門的藍色房子」。 CSS 有多種精確程度，選擇正確的選擇器就像挑選合適工具。有時你想給整區所有門塗色，有時只要針對一扇門。 ### 元素選擇器（標籤） 元素選擇器根據標籤名稱標的 HTML 元素，適合設定廣泛適用的基礎樣式： 理解這些樣式： - 對整頁 用 body 設定一致的字型排版 - 移除 瀏覽器預設的邊距與內距，方便控制 - 為 所有標題元素設定顏色、對齊與間距 - 使用 rem 單位，確保字型大小可延展且易讀 元素選擇器非常適合設定通用風格，但對於 terrarium 內部像植物這類個別元件，需要更細緻選擇器。 ### ID 選擇器：獨特元素 ID 選擇器使用 #，針對具有特定 id 屬性的元素。因 ID 在頁面中應唯一，非常適合為獨特元素（如左、右兩邊的植物容器）設定樣式。 讓我們設計 terrarium 側邊容器的樣式，放置植物： 此段程式碼成果： - 用 absolute 定位把容器固定在左右兩側 - 使用 vh（視窗高度）單位製作響應式高度 - 設定 box-sizing: border-box，包含 padding 計算寬度 - 移除 px 單位的零值，使程式碼更乾淨 - 搭配 柔和背景色，較不刺眼 ✅ 程式碼質量挑戰：此 CSS 違反 DRY（不要重複自己）原則，你能用 ID 和類別混合重構它嗎？ 改良方法： ### 類別選擇器：可復用樣式 類別選擇器用 . 表示，適合將相同樣式套用到多個元素。與 ID 不同，類別可多處重複使用，非常適合樣式一致性的模式。 在 terrarium 裡，每株植物需要共用樣式，但位置不同。可用類別分享樣式，ID 定位。 這是每株植物的 HTML 結構： 重點說明： - 用 class="plant-holder" 統一容器樣式 - 用 class="plant" 統一植物圖像樣式與行為 - 用 唯一 id="plant1" 作特定定位與 JavaScript 操作 - 使用 描述性 alt 文字供輔助工具使用 接著把這些樣式加進 style.css： 解析這些樣式： - 為 plant holder 設定相對定位，建立定位情境 - 每個 plant holder 高度 13%，確保所有植物垂直可見且不需捲動 - 輕微 左移容器，更好對齊植物 - 植物 利用最大寬高限制，自主縮放保持比例 - 使用 z-index 將植物置於 terrarium 其他元素之上 - 加入 平滑變化的懸停效果，提升互動感 ✅ 批判思考：為什麼同時要有 .plant-holder 和 .plant？若只用一個會怎樣？ ## CSS 定位原理 CSS 定位就像舞台導演，指揮每個角色在哪站位、如何移動。有些角色遵循一般規則，有些角色需要特定定位才能呈現戲劇效果。 一旦明白定位，許多佈局問題都迎刃而解。想要不動的導覽列？定位辦得到。想要具體位置的提示工具？定位同樣沒問題。 ### 五種定位值 ### 我們的 terrarium 定位策略 terrarium 應用多種類型定位，做出目標佈局： 解讀定位策略： - 絕對定位容器 脫離文件流，固定於螢幕邊緣 - 相對定位植物容器 建立定位上下文，仍保留文件流 - 絕對定位植物 可精準定位於其相對容器內 - 此組合 可讓植物垂直堆疊，且可個別定位 ✅ 實驗時間：嘗試替換定位值並觀察結果： - 若將 .container 從 absolute 改為 relative 會怎樣？ - 如果 .plant-holder 使用 absolute 而不是 relative，佈局會有什麼變化？ - 當你將 .plant 改成 relative 定位時會發生什麼？ ### 🔄 教學檢查點 CSS 定位精通：暫停確認你的理解： - ✅ 你能解釋為什麼植物需要絕對定位來實現拖放嗎？ - ✅ 你了解相對容器如何創造定位上下文嗎？ - ✅ 為什麼側邊容器使用絕對定位？ - ✅ 如果完全移除定位聲明會發生什麼？ 現實世界的聯繫：想想 CSS 定位如何映射現實世界的佈局： - Static：書架上的書（自然排列） - Relative：稍微移動書本，但保持位置 - Absolute：把書籤放在確切的頁數 - Fixed：粘著便條紙，在翻頁時保持可見 ## 使用 CSS 建造生態瓶 現在我們將只用 CSS 建造一個玻璃罐—不需要圖片或繪圖軟件。 利用定位和透明度來創造逼真的玻璃、陰影與深度效果，展示CSS的視覺能力。此技術類似包豪斯運動建築師用簡單幾何形體創造複雜美麗建築。了解這些原則後，你將能認出許多網站設計背後的 CSS 技巧。 ### 建造玻璃罐組件 讓我們逐一建造生態瓶罐的各部分。每個部分都使用絕對定位以及百分比大小以達到響應式設計： 了解生態瓶的構造： - 使用百分比尺寸，實現在所有螢幕尺寸上的響應式縮放 - 絕對定位元素以精確堆疊和對齊 - 應用不同透明度值來創造玻璃的透光效果 - 實施z-index分層，讓植物看起來在罐子內部 - 加入微妙的盒陰影和圓角，讓外觀更真實 ### 使用百分比的響應式設計 注意所有尺寸都使用百分比，而非固定像素值： 為什麼這很重要： - 確保生態瓶在任意螢幕尺寸上按比例縮放 - 維持罐子組件之間的視覺關係 - 提供從手機到大螢幕桌面一致的體驗 - 允許設計適應變化，不破壞視覺佈局 ### CSS 單位的運用 我們使用 rem 單位為 border-radius 設定大小，這會相對於根字體大小縮放，創建更可及的設計，尊重使用者字體偏好。詳細可參考官方規範的 CSS relative units。 ✅ 視覺實驗：嘗試修改這些值並觀察效果： - 將罐子透明度從 0.5 改為 0.8 — 玻璃外觀如何變化？ - 調整污土顏色從 #3a241d 改為 #8B4513 — 視覺影響是什麼？ - 將污土的 z-index 改為 2 — 分層順序會怎樣？ ### 🔄 教學檢查點 CSS 視覺設計理解：確認你對視覺 CSS 的掌握： - ✅ 百分比尺寸如何創造響應式設計？ - ✅ 為什麼透明度能營造玻璃透光效果？ - ✅ z-index 在元素分層中扮演什麼角色？ - ✅ border-radius 如何塑造罐子形狀？ 設計原則：注意我們如何用簡單圖形構建複雜視覺： 1. 矩形 → 圓角矩形 → 罐子組件 2. 純色 → 透明度 → 玻璃效果 3. 單一元素 → 分層組合 → 3D 外觀 --- ## GitHub Copilot Agent 挑戰 🚀 使用 Agent 模式完成以下挑戰： 說明： 創建一個 CSS 動畫，讓生態瓶中的植物輕輕搖擺，模擬自然微風吹拂效果。這將幫助你練習 CSS 動畫、變形和關鍵影格，並提升生態瓶的視覺吸引力。 提示： 為 .plant 類添加 CSS 關鍵影格動畫，使植物輕輕左右擺動。創建一個擺動動畫，使每株植物沿水平方向旋轉約 2-3 度，持續時間 3-4 秒，且動畫無限循環，並使用平滑的緩動函數。 在這了解更多Agent 模式。 ## 🚀 挑戰：加入玻璃反光效果 準備好用逼真的玻璃反光效果增強你的生態瓶了嗎？這技術將增加層次感與真實感。 你將創建細膩的高光，模擬光線如何在玻璃面反射。這類似文藝復興畫家 Jan van Eyck 利用光影與反射使繪畫中的玻璃呈現立體感。目標如下： 你的挑戰： - 創建細膩的白色或淺色橢圓形，用於玻璃反光 - 策略性定位在罐子左側 - 應用適當透明度和模糊效果，模擬真實光反射 - 使用border-radius 創造自然泡泡狀形狀 - 嘗試漸層或盒陰影以增強真實感 ## 課後測驗 課後測驗 ## 擴展你的 CSS 知識 CSS 一開始可能會覺得複雜，但掌握這些核心概念將為進階技巧打下紮實基礎。 接下來的 CSS 學習領域： - Flexbox - 簡化元素對齊和分佈 - CSS Grid - 強大工具，建造複雜佈局 - CSS 變數 - 減少重複，提升維護性 - 響應式設計 - 確保網站適用不同螢幕尺寸 ### 互動學習資源 用這些有趣的實作遊戲練習概念： - 🐸 Flexbox Froggy - 通過挑戰精通 Flexbox - 🌱 Grid Garden - 種胡蘿蔔學 CSS Grid - 🎯 CSS Battle - 編碼挑戰測試你的 CSS 技能 ### 額外學習 欲獲得完整 CSS 基礎教學，完成這個 Microsoft Learn 課程：使用 CSS 美化你的 HTML 應用程式 ### ⚡ 接下來 5 分鐘你可以做 - [ ] 開啟 DevTools，使用 Elements 面板檢查任一網站 CSS 樣式 - [ ] 建立簡單 CSS 文件並連結至 HTML 頁面 - [ ] 嘗試用不同方式改色：十六進位、RGB、命名顏色 - [ ] 練習盒模型，為 div 加入 padding 和 margin ### 🎯 這小時你能完成的目標 - [ ] 完成課後測驗並複習 CSS 基礎 - [ ] 用字型、顏色和間距美化你的 HTML 頁面 - [ ] 使用 flexbox 或 grid 建立簡單佈局 - [ ] 嘗試 CSS 過渡效果，實現流暢效果 - [ ] 利用媒體查詢練習響應式設計 ### 📅 你的 CSS 一週冒險 - [ ] 完成生態瓶樣式作業並加添創意 - [ ] 精通 CSS Grid，打造相片集佈局 - [ ] 學習 CSS 動畫讓設計生動起來 - [ ] 探索 Sass 或 Less 等 CSS 預處理器 - [ ] 研究設計原則並應用於 CSS - [ ] 分析並重現你在線看到的有趣設計 ### 🌟 你的 CSS 一個月設計精通 - [ ] 建立完整響應式網站設計系統 - [ ] 學習 CSS-in-JS 或類似 Tailwind 的功能型框架 - [ ] 為開源專案貢獻 CSS 優化 - [ ] 精通進階 CSS 概念，如客製屬性與內容隔離 - [ ] 創建可重用的組件庫與模組化 CSS - [ ] 指導 CSS 初學者並分享設計心得 ## 🎯 你的 CSS 精通時間表 ### 🛠️ 你的 CSS 工具總結 完成本課後，你已掌握： - 層疊理解：樣式如何繼承與覆蓋 - 選擇器精通：準確鎖定元素、類別與 ID - 定位技巧：策略性擺放與分層 - 視覺設計：創造玻璃效果、陰影與透明度 - 響應式技術：百分比佈局，適應任意螢幕 - 代碼組織：整潔且易維護的 CSS 結構 - 現代實踐：運用相對單位與可及設計模式 下一步：你的生態瓶已有結構（HTML）與樣式（CSS）。最後一課將用 JavaScript 加入互動！ ## 作業 CSS 重構 --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> 免責聲明： 本文件由 AI 翻譯服務 Co-op Translator 進行翻譯。雖然我們致力於追求準確性，請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵資訊，建議聘請專業人工翻譯。因使用本翻譯所產生的任何誤解或誤譯，我們概不負責。 <!-- CO-OP TRANSLATOR DISCLAIMER END -->
玻璃花園專案第一部分：HTML入門
HTML，即超文本標記語言，是您曾經瀏覽過的每個網站的基礎。可以將HTML想像成網頁的骨架——它定義了內容的位置、組織方式以及每個部分的意義。雖然CSS稍後會用顏色和佈局來“裝飾”您的HTML，JavaScript則會通過互動性使其“活起來”，但HTML提供了使其他一切成為可能的基本結構。 在本課程中，您將為虛擬玻璃花園界面創建HTML結構。這個動手項目將教您基本的HTML概念，同時構建一些視覺上吸引人的內容。您將學習如何使用語義元素組織內容、處理圖片以及為互動式網頁應用程序創建基礎。 在本課程結束時，您將擁有一個工作中的HTML頁面，顯示有序列的植物圖片，為下一課的樣式設置做好準備。不要擔心它一開始看起來很簡單——這正是HTML在CSS添加視覺效果之前應該做的事情。 ## 課前測驗 課前測驗 ## 設置您的專案 在我們深入HTML代碼之前，讓我們為您的玻璃花園專案設置一個合適的工作空間。從一開始就創建一個有組織的文件結構是一個重要的習慣，這將在您的網頁開發過程中對您大有幫助。 ### 任務：創建您的專案結構 您將為您的玻璃花園專案創建一個專用文件夾，並添加您的第一個HTML文件。以下是您可以使用的兩種方法： 選項1：使用Visual Studio Code 1. 打開Visual Studio Code 2. 點擊“File”→“Open Folder”或使用Ctrl+K, Ctrl+O（Windows/Linux）或Cmd+K, Cmd+O（Mac） 3. 創建一個名為terrarium的新文件夾並選擇它 4. 在Explorer面板中，點擊“New File”圖標 5. 將文件命名為index.html 選項2：使用終端命令 這些命令的作用： - 創建一個名為terrarium的新目錄作為您的專案文件夾 - 進入terrarium目錄 - 創建一個空的index.html文件 - 打開該文件以便在Visual Studio Code中進行編輯 ## 理解HTML文檔結構 每個HTML文檔都遵循特定的結構，瀏覽器需要這種結構來正確理解和顯示內容。可以將這種結構想像成一封正式的信件——它有特定順序的必需元素，幫助接收者（在這裡是瀏覽器）正確處理內容。 讓我們從添加每個HTML文檔所需的基本框架開始。 ### DOCTYPE聲明和根元素 任何HTML文件的前兩行都是文檔對瀏覽器的“介紹”： 理解這段代碼的作用： - 聲明文檔類型為HTML5，使用<!DOCTYPE html> - 創建包含所有頁面內容的根<html>元素 - 建立現代網頁標準以確保瀏覽器正確渲染 - 保證在不同瀏覽器和設備上的一致顯示效果 ### 🔄 教學檢查 暫停並反思：在繼續之前，請確保您理解： - ✅ 為什麼每個HTML文檔都需要DOCTYPE聲明 - ✅ <html>根元素包含什麼 - ✅ 此結構如何幫助瀏覽器正確渲染頁面 快速自測：您能用自己的話解釋“符合標準的渲染”是什麼意思嗎？ ## 添加基本文檔元數據 HTML文檔的<head>部分包含瀏覽器和搜索引擎需要的重要信息，但訪問者不會直接在頁面上看到這些信息。可以將其視為幫助您的網頁正常運行並在不同設備和平台上正確顯示的“幕後信息”。 這些元數據告訴瀏覽器如何顯示您的頁面、使用什麼字符編碼以及如何處理不同的屏幕尺寸——這些都是創建專業、可訪問網頁的必要條件。 ### 任務：添加文檔頭部 在您的開頭和結尾<html>標籤之間插入以下<head>部分： 分解每個元素的作用： - 設置顯示在瀏覽器標籤和搜索結果中的頁面標題 - 指定UTF-8字符編碼以便全球範圍內正確顯示文本 - 確保與現代版本的Internet Explorer兼容 - 配置響應式設計，通過設置視口匹配設備寬度 - 控制初始縮放級別以自然大小顯示內容 ## 建立文檔主體 <body>元素包含網頁的所有可見內容——用戶將看到和交互的所有內容。雖然<head>部分向瀏覽器提供指令，但<body>部分包含實際內容：文本、圖片、按鈕以及創建用戶界面的其他元素。 讓我們添加主體結構並了解HTML標籤如何協同工作以創建有意義的內容。 ### 理解HTML標籤結構 HTML使用成對的標籤來定義元素。大多數標籤都有像<p>這樣的開頭標籤和像</p>這樣的結尾標籤，中間包含內容：<p>Hello, world!</p>。這創建了一個包含文本“Hello, world!”的段落元素。 ### 任務：添加主體元素 更新您的HTML文件以包含<body>元素： 這個完整結構提供了以下內容： - 建立基本的HTML5文檔框架 - 包含正確的元數據以便瀏覽器正確渲染 - 創建一個空的主體以容納可見內容 - 遵循現代網頁開發的最佳實踐 現在您已準備好添加玻璃花園的可見元素。我們將使用<div>元素作為容器來組織不同的內容部分，並使用<img>元素顯示植物圖片。 ### 使用圖片和佈局容器 圖片在HTML中很特別，因為它們使用“自閉合”標籤。與<p></p>等包裹內容的元素不同，<img>標籤本身包含所有必要的信息，通過src屬性指定圖片文件路徑，通過alt屬性提供可訪問性。 在將圖片添加到HTML之前，您需要通過創建一個images文件夾並添加植物圖片來正確組織您的專案文件。 首先，設置您的圖片： 1. 在您的玻璃花園專案文件夾中創建一個名為images的文件夾 2. 從解決方案文件夾下載植物圖片（共14張植物圖片） 3. 將所有植物圖片複製到您的新images文件夾中 ### 任務：創建植物展示佈局 現在在您的<body></body>標籤之間添加有序的植物圖片佈局： 逐步解析此代碼的作用： - 創建一個主頁面容器，id="page"，用於容納所有內容 - 建立兩個列容器：left-container和right-container - 組織左列7個植物，右列7個植物 - 包裹每個植物圖片在plant-holder的div中以便單獨定位 - 應用一致的類名以便下一課進行CSS樣式設置 - 分配唯一的ID給每個植物圖片以便後續JavaScript交互 - 包含指向images文件夾的正確文件路徑 ### 🔄 教學檢查 結構理解：花點時間回顧您的HTML結構： - ✅ 您能識別佈局中的主要容器嗎？ - ✅ 您理解為什麼每張圖片都有唯一的ID嗎？ - ✅ 您如何描述plant-holder div的用途？ 視覺檢查：在瀏覽器中打開您的HTML文件。您應該看到： - 一個基本的植物圖片列表 - 圖片分為兩列 - 簡單的未設置樣式的佈局 記住：這種簡單的外觀正是CSS設置樣式之前HTML應該呈現的樣子！ 添加這些標記後，植物將顯示在屏幕上，儘管它們看起來還不夠精美——這就是下一課中CSS的作用！目前，您已經擁有一個堅實的HTML基礎，可以正確地組織您的內容並遵循可訪問性最佳實踐。 ## 使用語義HTML提升可訪問性 語義HTML意味著根據元素的意義和用途選擇HTML元素，而不僅僅是根據它們的外觀。使用語義標記時，您是在向瀏覽器、搜索引擎和屏幕閱讀器等輔助技術傳達內容的結構和意義。 這種方法使您的網站對殘障用戶更具可訪問性，並幫助搜索引擎更好地理解您的內容。這是現代網頁開發的一個基本原則，旨在為每個人創造更好的體驗。 ### 添加語義頁面標題 讓我們為您的玻璃花園頁面添加一個合適的標題。在您的開頭<body>標籤之後插入以下行： 為什麼語義標記很重要： - 幫助屏幕閱讀器導航和理解頁面結構 - 改善搜索引擎優化（SEO），通過明確內容層次結構 - 提升視障或認知障礙用戶的可訪問性 - 創造更好的用戶體驗，適用於所有設備和平台 - 遵循網頁標準和專業開發的最佳實踐 語義選擇與非語義選擇的示例： ## 創建玻璃花園容器 現在讓我們添加玻璃花園本身的HTML結構——植物最終將被放置的玻璃容器。這部分展示了一個重要概念：HTML提供結構，但如果沒有CSS樣式，這些元素目前還不會顯示出來。 玻璃花園的標記使用描述性的類名，這將使下一課中的CSS樣式設置更加直觀和易於維護。 ### 任務：添加玻璃花園結構 在最後一個</div>標籤上方（頁面容器的閉合標籤之前）插入以下標記： 理解這個玻璃花園結構： - 創建一個主玻璃花園容器，並賦予唯一的ID以便樣式設置 - 定義每個視覺組件的獨立元素（頂部、牆壁、泥土、底部） - 包含嵌套元素以呈現玻璃反射效果（光澤元素） - 使用描述性類名，清楚地表明每個元素的用途 - 準備結構以便使用 CSS 樣式創建玻璃生態瓶的外觀 ### 🔄 教學檢查 HTML 結構掌握：在繼續之前，確保你能夠： - ✅ 解釋 HTML 結構與視覺外觀的區別 - ✅ 辨識語義化與非語義化的 HTML 元素 - ✅ 描述正確的標記如何有助於無障礙設計 - ✅ 認識完整的文檔樹結構 測試你的理解：嘗試在瀏覽器中打開你的 HTML 文件，禁用 JavaScript 並移除 CSS。這樣可以看到你所創建的純語義結構！ --- ## GitHub Copilot Agent 挑戰 使用 Agent 模式完成以下挑戰： 描述：為植物護理指南部分創建語義化的 HTML 結構，該部分可以添加到生態瓶項目中。 提示：創建一個語義化的 HTML 部分，包含主標題「植物護理指南」，三個子部分標題「澆水」、「光照需求」和「土壤護理」，每個部分包含一段植物護理信息。使用適當的語義化 HTML 標籤，例如 <section>、<h2>、<h3> 和 <p>，以適當地結構化內容。 了解更多關於 agent 模式 的信息。 ## 探索 HTML 歷史挑戰 了解網絡演變 自從 Tim Berners-Lee 在 1990 年於 CERN 創建第一個網絡瀏覽器以來，HTML 已經有了顯著的演變。一些較舊的標籤，例如 <marquee>，現在已被棄用，因為它們不符合現代的無障礙標準和響應式設計原則。 試試這個實驗： 1. 暫時將你的 <h1> 標題包裹在 <marquee> 標籤中：<marquee><h1>我的生態瓶</h1></marquee> 2. 在瀏覽器中打開你的頁面並觀察滾動效果 3. 思考為什麼這個標籤被棄用（提示：考慮用戶體驗和無障礙性） 4. 移除 <marquee> 標籤並恢復語義化標記 反思問題： - 滾動標題如何影響視覺障礙或對運動敏感的用戶？ - 有哪些現代 CSS 技術可以更無障礙地實現類似的視覺效果？ - 為什麼使用當前的網絡標準而不是棄用的元素很重要？ 探索更多關於 過時和棄用的 HTML 元素，了解網絡標準如何演變以改善用戶體驗。 ## 課後測驗 課後測驗 ## 回顧與自學 深化你的 HTML 知識 HTML 作為網絡的基礎已經有超過 30 年的歷史，從一種簡單的文檔標記語言演變為構建交互式應用程序的複雜平台。了解這種演變有助於你更好地理解現代網絡標準並做出更好的開發決策。 推薦學習路徑： 1. HTML 的歷史與演變 - 研究從 HTML 1.0 到 HTML5 的時間線 - 探索為什麼某些標籤被棄用（無障礙性、移動友好性、可維護性） - 調查新興的 HTML 功能和提案 2. 語義化 HTML 深入研究 - 學習 HTML5 語義元素 的完整列表 - 練習何時使用 <article>、<section>、<aside> 和 <main> - 了解用於增強無障礙性的 ARIA 屬性 3. 現代網絡開發 - 探索 構建響應式網站 的 Microsoft Learn 模塊 - 理解 HTML 如何與 CSS 和 JavaScript 集成 - 學習網絡性能和 SEO 的最佳實踐 反思問題： - 你發現了哪些被棄用的 HTML 標籤，為什麼它們被移除？ - 未來版本中有哪些新的 HTML 功能正在被提議？ - 語義化 HTML 如何促進網絡無障礙性和 SEO？ ### ⚡ 你可以在接下來的 5 分鐘內完成的事情 - [ ] 打開開發者工具（F12），檢查你最喜歡的網站的 HTML 結構 - [ ] 創建一個包含基本標籤的簡單 HTML 文件：<h1>、<p> 和 <img> - [ ] 使用 W3C HTML Validator 在線驗證你的 HTML - [ ] 嘗試使用 <!-- comment --> 在 HTML 中添加註解 ### 🎯 你可以在接下來的一小時內完成的事情 - [ ] 完成課後測驗並回顧語義化 HTML 概念 - [ ] 使用正確的 HTML 結構構建一個關於自己的簡單網頁 - [ ] 嘗試使用不同的標題級別和文本格式標籤 - [ ] 添加圖片和鏈接以練習多媒體集成 - [ ] 研究你尚未嘗試過的 HTML5 功能 ### 📅 你的 HTML 一周學習計劃 - [ ] 使用語義化標記完成生態瓶項目作業 - [ ] 使用 ARIA 標籤和角色創建一個無障礙網頁 - [ ] 練習使用各種輸入類型創建表單 - [ ] 探索 HTML5 API，例如 localStorage 或地理定位 - [ ] 學習響應式 HTML 模式和移動優先設計 - [ ] 回顧其他開發者的 HTML 代碼以學習最佳實踐 ### 🌟 你的 HTML 一個月基礎之旅 - [ ] 構建一個展示你 HTML 技能的作品集網站 - [ ] 使用像 Handlebars 這樣的框架學習 HTML 模板化 - [ ] 通過改進 HTML 文檔為開源項目做出貢獻 - [ ] 掌握高級 HTML 概念，例如自定義元素 - [ ] 將 HTML 與 CSS 框架和 JavaScript 庫集成 - [ ] 指導其他人學習 HTML 基礎知識 ## 🎯 你的 HTML 精通時間表 ### 🛠️ 你的 HTML 工具包摘要 完成本課程後，你現在擁有： - 文檔結構：完整的 HTML5 基礎，包含正確的 DOCTYPE - 語義化標記：增強無障礙性和 SEO 的有意義標籤 - 圖片集成：正確的文件組織和 alt 文本實踐 - 佈局容器：使用描述性類名的策略性 div - 無障礙意識：了解屏幕閱讀器的導航方式 - 現代標準：當前的 HTML5 實踐和棄用標籤知識 - 項目基礎：為 CSS 樣式和 JavaScript 交互打下堅實基礎 下一步：你的 HTML 結構已準備好進行 CSS 樣式設計！你所構建的語義基礎將使下一課更容易理解。 ## 作業 練習你的 HTML：構建博客模型 --- 免責聲明： 本文件已使用 AI 翻譯服務 Co-op Translator 進行翻譯。儘管我們努力確保翻譯的準確性，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。
微型生態瓶專案第二部分：CSS入門
還記得你的HTML微型生態瓶看起來非常基本嗎？CSS就是用來將這個簡單的結構轉變成視覺上更吸引人的東西。 如果說HTML像是建造房子的框架，那麼CSS就是讓房子有家的感覺的一切——油漆顏色、家具擺放、燈光以及房間之間的流動感。想想凡爾賽宮如何從一個簡單的狩獵小屋開始，通過精心的裝飾和布局，變成世界上最宏偉的建築之一。 今天，我們將把你的微型生態瓶從功能性轉變為精緻的作品。你將學習如何精確地定位元素，讓布局適應不同的屏幕尺寸，並創造出讓網站更具吸引力的視覺效果。 在本課程結束時，你將看到如何通過策略性的CSS樣式設計大幅提升你的專案。讓我們為你的微型生態瓶增添一些風格吧。 ## 課前測驗 課前測驗 ## CSS入門 CSS通常被認為只是“讓東西變得漂亮”，但它的用途遠不止於此。CSS就像電影的導演——你不僅控制所有事物的外觀，還控制它們的移動、交互反應以及如何適應不同情況。 現代CSS功能非常強大。你可以編寫代碼，讓布局自動適應手機、平板電腦和桌面電腦。你可以創造流暢的動畫，引導用戶的注意力到需要的地方。當一切協同工作時，效果可能非常驚人。 在本課程中，我們將完成以下目標： - 創建 使用現代CSS技術的完整視覺設計，為你的微型生態瓶增添風格 - 探索 基本概念，例如層疊、繼承和CSS選擇器 - 實現 響應式定位和布局策略 - 構建 使用CSS形狀和樣式設計微型生態瓶容器 ### 前置條件 你應該已完成上一課中微型生態瓶的HTML結構，並準備好進行樣式設計。 ### 設置你的CSS文件 在開始設計樣式之前，我們需要將CSS連接到HTML。這個連接告訴瀏覽器在哪裡找到微型生態瓶的樣式指令。 在你的微型生態瓶文件夾中，創建一個名為style.css的新文件，然後在HTML文檔的<head>部分中鏈接它： 這段代碼的作用： - 創建 HTML和CSS文件之間的連接 - 告訴 瀏覽器加載並應用style.css中的樣式 - 使用 rel="stylesheet"屬性指定這是一個CSS文件 - 引用 文件路徑href="./style.css" ## 理解CSS層疊 是否曾經想過為什麼CSS被稱為“層疊樣式表”？樣式像瀑布一樣層層疊加，有時會相互衝突。 想像一下軍事指揮結構——一個將軍的命令可能是“所有士兵穿綠色制服”，但對你的部隊的具體命令可能是“穿藍色禮服參加儀式”。更具體的指令優先於一般指令。CSS遵循類似的邏輯，理解這種層次結構可以讓調試變得更加容易。 ### 嘗試層疊優先級 讓我們通過創建樣式衝突來看看層疊的作用。首先，向你的<h1>標籤添加內聯樣式： 這段代碼的作用： - 直接應用 紅色到<h1>元素，使用內聯樣式 - 使用 style屬性直接在HTML中嵌入CSS - 創建 對此特定元素的最高優先級樣式規則 接下來，將以下規則添加到你的style.css文件中： 在上述代碼中，我們： - 定義 一個CSS規則，針對所有<h1>元素 - 設置 文本顏色為藍色，使用外部樣式表 - 創建 與內聯樣式相比優先級較低的規則 ✅ 知識檢查：你的網頁應用中顯示的是哪種顏色？為什麼這種顏色會勝出？你能想到哪些情況下可能需要覆蓋樣式？ ## CSS繼承的應用 CSS的繼承就像基因遺傳——元素會從其父元素繼承某些屬性。如果你在body元素上設置字體，所有內部文本都會自動使用相同的字體。這就像哈布斯堡家族的獨特下巴特徵，跨越幾代人傳承下來，而不需要為每個個體單獨指定。 然而，並非所有屬性都會被繼承。像字體和顏色這樣的文本樣式會被繼承，但像邊距和邊框這樣的布局屬性則不會。就像孩子可能會遺傳父母的外貌特徵，但不一定會繼承他們的穿衣風格。 ### 觀察字體繼承 讓我們通過在<body>元素上設置字體來觀察繼承的作用： 這段代碼的作用： - 設置 整個頁面的字體，通過針對<body>元素 - 使用 字體堆疊和備選選項，以提高瀏覽器兼容性 - 應用 現代系統字體，讓不同操作系統的外觀更佳 - 確保 所有子元素繼承此字體，除非特別覆蓋 打開瀏覽器的開發者工具（F12），導航到“元素”選項卡，檢查你的<h1>元素。你會看到它繼承了body的字體： ✅ 實驗時間：嘗試在<body>上設置其他可繼承屬性，例如color、line-height或text-align。你的標題和其他元素會發生什麼變化？ ### 🔄 教學檢查 CSS基礎理解：在進入選擇器之前，確保你能： - ✅ 解釋層疊和繼承的區別 - ✅ 預測在特異性衝突中哪個樣式會勝出 - ✅ 確定哪些屬性會從父元素繼承 - ✅ 正確連接CSS文件到HTML 快速測試：如果你有以下樣式，<div class="special">中的<h1>會是什麼顏色？ 答案：紅色（元素選擇器直接針對h1） ## 掌握CSS選擇器 CSS選擇器是你用來針對特定元素進行樣式設計的方式。它們就像給出精確的指令——與其說“那棟房子”，不如說“楓樹街上有紅色門的藍色房子”。 CSS提供了不同的方式來精確定位，選擇合適的選擇器就像選擇適合的工具。有時你需要設計整個街區的每扇門，有時只需要設計一扇特定的門。 ### 元素選擇器（標籤） 元素選擇器通過標籤名稱來定位HTML元素。它們非常適合設置全局樣式，適用於整個頁面： 理解這些樣式： - 設置 整個頁面的統一排版，使用body選擇器 - 移除 瀏覽器默認的邊距和填充，以便更好地控制 - 設計 所有標題元素的顏色、對齊和間距 - 使用 rem單位進行可擴展、可訪問的字體大小設置 雖然元素選擇器非常適合一般樣式設計，但你需要更具體的選擇器來設計微型生態瓶中的個別組件，例如植物。 ### 用於唯一元素的ID選擇器 ID選擇器使用#符號，定位具有特定id屬性的元素。由於ID在頁面中必須是唯一的，它們非常適合設計個別的特殊元素，例如我們的左右植物容器。 讓我們為微型生態瓶的側邊容器創建樣式，這些容器是植物的居住地： 這段代碼的作用： - 定位 容器在屏幕的最左和最右邊，使用absolute定位 - 使用 vh（視窗高度）單位，讓高度響應屏幕尺寸 - 應用 box-sizing: border-box，使填充包含在總寬度內 - 移除 零值中的不必要px單位，讓代碼更簡潔 - 設置 柔和的背景色，比刺眼的灰色更舒適 ✅ 代碼質量挑戰：注意這段CSS違反了DRY（不要重複自己）原則。你能否使用ID和類進行重構？ 改進方法： ### 用於可重複樣式的類選擇器 類選擇器使用.符號，非常適合在多個元素上應用相同的樣式。與ID不同，類可以在整個HTML中重複使用，非常適合一致的樣式模式。 在我們的微型生態瓶中，每個植物需要相似的樣式，但也需要單獨的定位。我們將使用類的組合來實現共享樣式，並使用ID進行獨特的定位。 以下是每個植物的HTML結構： 關鍵元素解釋： - 使用 class="plant-holder" 為所有植物容器提供一致的樣式 - 應用 class="plant" 為共享的圖片樣式和行為 - 包含 獨特的id="plant1"，用於單獨定位和JavaScript交互 - 提供 描述性alt文字，方便屏幕閱讀器使用 現在將以下樣式添加到你的style.css文件中： 分解這些樣式： - 創建 植物容器的相對定位，以建立定位上下文 - 設置 每個植物容器的高度為13%，確保所有植物垂直排列且不需要滾動 - 稍微向左移動 容器，以便更好地將植物居中於其容器內 - 允許 植物通過max-width和max-height屬性進行響應式縮放 - 使用 z-index，使植物層疊在微型生態瓶的其他元素之上 - 添加 柔和的懸停效果，通過CSS過渡提升用戶交互體驗 ✅ 批判性思考：為什麼我們需要同時使用.plant-holder和.plant選擇器？如果我們只使用其中一個會發生什麼？ ## 理解CSS定位 CSS定位就像是舞台劇的導演——你指導每個演員站在哪裡以及如何在舞台上移動。有些演員遵循標準的隊形，而有些則需要特定的定位以達到戲劇效果。 一旦你理解了定位，許多布局挑戰就會變得易於處理。需要一個在用戶滾動時始終位於頂部的導航欄？定位可以解決這個問題。想要一個出現在特定位置的提示框？這也是定位的作用。 ### 五種定位值 ### 微型生態瓶中的定位 我們的微型生態瓶使用了定位類型的策略性組合來創建所需的布局： 理解定位策略： - 絕對容器 從正常文檔流中移除，並固定在屏幕邊緣 - 相對植物容器 創建定位上下文，同時保持在文檔流中 - 絕對植物 可以在其相對容器內精確定位 - 這種組合 允許植物垂直堆疊，同時可以單獨定位 ✅ 實驗時間：嘗試更改定位值並觀察結果： - 如果將.container從absolute改為relative，會發生什麼？ - 如果 .plant-holder 使用 absolute 而不是 relative，佈局會如何改變？ - 當你將 .plant 切換到 relative 定位時會發生什麼？ ### 🔄 教學檢查 CSS 定位精通：停下來確認你的理解： - ✅ 你能解釋為什麼植物需要使用 absolute 定位來進行拖放嗎？ - ✅ 你理解相對容器如何創建定位上下文嗎？ - ✅ 為什麼側邊容器使用 absolute 定位？ - ✅ 如果完全移除定位聲明會發生什麼？ 現實世界的連結：思考 CSS 定位如何反映現實世界的佈局： - Static：書架上的書（自然順序） - Relative：稍微移動一本書但保持其位置 - Absolute：在特定頁面放置書籤 - Fixed：翻頁時始終可見的便利貼 ## 使用 CSS 建造玻璃瓶 現在我們將僅使用 CSS 建造一個玻璃瓶——不需要圖片或圖形軟件。 使用定位和透明度創造逼真的玻璃、陰影和深度效果，展示了 CSS 的視覺能力。這種技術類似於包豪斯運動中的建築師如何使用簡單的幾何形狀創造出複雜而美麗的結構。一旦你理解了這些原則，你就能識別許多網頁設計背後的 CSS 技術。 ### 創建玻璃瓶的組件 讓我們逐步建造玻璃瓶。每個部分都使用 absolute 定位和基於百分比的尺寸來實現響應式設計： 理解玻璃瓶的構造： - 使用 基於百分比的尺寸以實現跨所有屏幕尺寸的響應式縮放 - 定位 元素為絕對位置以精確堆疊和對齊 - 應用 不同的透明度值以創造玻璃的透明效果 - 實現 z-index 層次，使植物看起來在瓶子內部 - 添加 微妙的盒子陰影和精緻的圓角以更逼真的外觀 ### 使用百分比進行響應式設計 注意所有尺寸都使用百分比而不是固定的像素值： 為什麼這很重要： - 確保 玻璃瓶在任何屏幕尺寸上都能按比例縮放 - 保持 瓶子組件之間的視覺關係 - 提供 從手機到大型桌面顯示器的一致體驗 - 允許 設計在不破壞視覺佈局的情況下進行調整 ### CSS 單位的應用 我們使用 rem 單位來設置圓角，這些單位相對於根字體大小進行縮放。這樣可以創造出更具可訪問性的設計，尊重用戶的字體偏好。了解更多 CSS 相對單位 的官方規範。 ✅ 視覺實驗：嘗試修改這些值並觀察效果： - 將瓶子的透明度從 0.5 改為 0.8——這如何影響玻璃的外觀？ - 將泥土顏色從 #3a241d 改為 #8B4513——這對視覺效果有什麼影響？ - 將泥土的 z-index 改為 2——這對層次結構有什麼影響？ ### 🔄 教學檢查 CSS 視覺設計理解：確認你對 CSS 視覺設計的掌握： - ✅ 百分比尺寸如何創造響應式設計？ - ✅ 為什麼透明度能創造玻璃的透明效果？ - ✅ z-index 在元素層次中扮演什麼角色？ - ✅ 圓角值如何創造瓶子的形狀？ 設計原則：注意我們如何從簡單形狀構建複雜的視覺效果： 1. 矩形 → 圓角矩形 → 瓶子組件 2. 平面顏色 → 透明度 → 玻璃效果 3. 單個元素 → 層次組合 → 3D 外觀 --- ## GitHub Copilot Agent 挑戰 🚀 使用 Agent 模式完成以下挑戰： 描述： 創建一個 CSS 動畫，使玻璃瓶中的植物輕輕地左右搖擺，模擬自然微風效果。這將幫助你練習 CSS 動畫、變換和關鍵幀，同時增強玻璃瓶的視覺吸引力。 提示： 添加 CSS 關鍵幀動畫，使玻璃瓶中的植物輕輕地左右搖擺。創建一個搖擺動畫，使每棵植物稍微向左和向右旋轉（2-3 度），持續 3-4 秒，並將其應用到 .plant 類。確保動畫無限循環並具有自然運動的緩動功能。 了解更多 Agent 模式 的信息。 ## 🚀 挑戰：添加玻璃反射效果 準備好用逼真的玻璃反射效果來增強你的玻璃瓶嗎？這項技術將為設計增添深度和真實感。 你將創建微妙的高光，模擬光線如何在玻璃表面反射。這種方法類似於文藝復興時期的畫家如 Jan van Eyck 如何使用光線和反射使繪製的玻璃看起來具有三維效果。以下是你的目標： 你的挑戰： - 創建 微妙的白色或淺色橢圓形作為玻璃反射效果 - 將它們 策略性地放置在瓶子的左側 - 應用 適當的透明度和模糊效果以實現逼真的光線反射 - 使用 border-radius 創造有機的氣泡狀形狀 - 嘗試 使用漸變或盒子陰影以增強真實感 ## 課後測驗 課後測驗 ## 擴展你的 CSS 知識 CSS 起初可能感覺很複雜，但理解這些核心概念能為更高級的技術打下堅實基礎。 你的下一個 CSS 學習領域： - Flexbox - 簡化元素的對齊和分佈 - CSS Grid - 提供創建複雜佈局的強大工具 - CSS Variables - 減少重複並提高可維護性 - 響應式設計 - 確保網站在不同屏幕尺寸上表現良好 ### 互動學習資源 通過以下有趣的互動遊戲練習這些概念： - 🐸 Flexbox Froggy - 通過有趣的挑戰掌握 Flexbox - 🌱 Grid Garden - 通過種植虛擬胡蘿蔔學習 CSS Grid - 🎯 CSS Battle - 通過編碼挑戰測試你的 CSS 技能 ### 進一步學習 要全面了解 CSS 基礎，完成此 Microsoft Learn 模組：使用 CSS 為 HTML 應用程式設計樣式 ### ⚡ 你可以在接下來的 5 分鐘內完成的事情 - [ ] 打開 DevTools 並使用元素面板檢查任何網站的 CSS 樣式 - [ ] 創建一個簡單的 CSS 文件並將其鏈接到 HTML 頁面 - [ ] 嘗試使用不同的方法更改顏色：十六進制、RGB 和命名顏色 - [ ] 通過向 div 添加內邊距和外邊距練習盒模型 ### 🎯 你可以在接下來的一小時內完成的事情 - [ ] 完成課後測驗並回顧 CSS 基礎 - [ ] 使用字體、顏色和間距設計你的 HTML 頁面 - [ ] 使用 Flexbox 或 Grid 創建一個簡單的佈局 - [ ] 嘗試使用 CSS 過渡效果創造平滑效果 - [ ] 使用媒體查詢練習響應式設計 ### 📅 你的 CSS 一週冒險 - [ ] 完成玻璃瓶樣式作業並展現創意 - [ ] 通過構建照片庫佈局掌握 CSS Grid - [ ] 學習 CSS 動畫使你的設計栩栩如生 - [ ] 探索 CSS 預處理器如 Sass 或 Less - [ ] 學習設計原則並將其應用到你的 CSS 中 - [ ] 分析並重現你在線上找到的有趣設計 ### 🌟 你的 CSS 一個月設計精通 - [ ] 建立完整的響應式網站設計系統 - [ ] 學習 CSS-in-JS 或像 Tailwind 這樣的實用優先框架 - [ ] 通過改進 CSS 為開源項目做出貢獻 - [ ] 掌握高級 CSS 概念，如 CSS 自定義屬性和容器 - [ ] 使用模塊化 CSS 創建可重用的組件庫 - [ ] 指導其他人學習 CSS 並分享設計知識 ## 🎯 你的 CSS 精通時間表 ### 🛠️ 你的 CSS 工具包摘要 完成本課程後，你現在擁有： - 層疊理解：了解樣式如何繼承和覆蓋 - 選擇器精通：使用元素、類和 ID 精確定位 - 定位技能：戰略性地放置和分層元素 - 視覺設計：創造玻璃效果、陰影和透明度 - 響應式技術：基於百分比的佈局適應任何屏幕 - 代碼組織：乾淨、可維護的 CSS 結構 - 現代實踐：使用相對單位和可訪問的設計模式 下一步： 你的玻璃瓶現在已經有了結構（HTML）和樣式（CSS）。最後一課將使用 JavaScript 添加互動性！ ## 作業 CSS 重構 --- 免責聲明： 本文件已使用 AI 翻譯服務 Co-op Translator 進行翻譯。雖然我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為權威來源。對於關鍵信息，建議使用專業人工翻譯。我們對因使用此翻譯而產生的任何誤解或誤釋不承擔責任。
Terrarium 專案第一部分：HTML 入門
HTML，也就是超文字標記語言，是你曾經造訪過的每個網站的基礎。想像 HTML 是賦予網頁結構的骨架——它定義了內容放置的位置、組織方式，以及每個部分的意義。CSS 稍後會用色彩和版面來「裝扮」你的 HTML，JavaScript 會帶來互動效果，但 HTML 提供了讓一切成為可能的基本結構。 在本課程中，你將為虛擬的玻璃容器介面建立 HTML 結構。這個實作專案會教你基本的 HTML 概念，同時打造出視覺吸引人的作品。你會學習如何使用語意元素組織內容、操作圖片，並為互動式網頁應用奠定基礎。 完成本課程後，你將擁有一個運作中的 HTML 頁面，顯示以有組織欄位排放的植物圖片，準備在下一課進行樣式設定。別擔心剛開始看起來很基礎——這正是 HTML 在 CSS 加入視覺修飾前應該做的事。 ## 課前小測驗 課前小測驗 ## 設置你的專案 在深入 HTML 程式碼之前，先為你的玻璃容器專案建立一個適當的工作空間。從一開始就建立有組織的檔案結構，是一個非常重要的習慣，會在你的網頁開發旅程中幫助你很多。 ### 任務：建立你的專案結構 你將為玻璃容器專案創建一個專用的資料夾，並加入第一個 HTML 檔案。以下是兩種做法： 選項一：使用 Visual Studio Code 1. 開啟 Visual Studio Code 2. 點選「檔案」→「開啟資料夾」或使用 Ctrl+K, Ctrl+O（Windows/Linux）或 Cmd+K, Cmd+O（Mac） 3. 建立新資料夾，命名為 terrarium 並選取它 4. 在檔案總管窗格點擊「新增檔案」圖示 5. 檔名命名為 index.html 選項二：使用終端機指令 這些指令完成了以下動作： - 建立 新目錄 terrarium 作為專案資料夾 - 切換 進入 terrarium 目錄 - 建立 空白的 index.html 檔案 - 使用 Visual Studio Code 開啟該檔案以便編輯 ## 理解 HTML 文件結構 每份 HTML 文件都有瀏覽器需要理解且正確顯示的特定結構。把這結構當作正式信件——有特定順序的必要元素，幫助收件者（這裡是瀏覽器）正確處理內容。 先從加入每份 HTML 文件都需要的基本架構開始。 ### DOCTYPE 宣告和根元素 任何 HTML 檔案的前兩行是文件向瀏覽器的「介紹」： 這段程式碼的功能解析： - 宣告 文件類型為 HTML5，使用 <!DOCTYPE html> - 建立 包含所有頁面內容的根 <html> 元素 - 確立 現代網路標準，確保瀏覽器正確呈現 - 保證 在不同瀏覽器和設備下呈現一致 ### 🔄 學習檢視點 暫停並思考：繼續前，確保你理解以下要點： - ✅ 為何每份 HTML 文件都需 DOCTYPE 宣告 - ✅ <html> 根元素包含什麼 - ✅ 這種結構如何幫助瀏覽器正確渲染頁面 快速自我測驗：你能用自己的話說明「標準相容渲染」是什麼意思嗎？ ## 添加重要的文件元資料 HTML 文件的 <head> 區段包含瀏覽器與搜尋引擎需要但訪客不直接看見的重要資訊。想像它是幕後資訊，幫助你的網頁正常運作，並在不同設備和平台上正確顯示。 這些元資料告訴瀏覽器如何顯示頁面、使用哪種字元編碼，以及如何因應不同螢幕尺寸——這些都是打造專業且可及性良好的網頁必備條件。 ### 任務：加入文件的 head 將這段 <head> 內容插入你的 <html> 開始及結束標籤之間： 拆解各元素作用： - 設定 出現在瀏覽器分頁和搜尋結果的頁面標題 - 指定 使用 UTF-8 字元編碼，確保全球文字正確顯示 - 保證 與現代版本 Internet Explorer 兼容 - 配置 螢幕視窗大小與設備寬度同步，支援響應式設計 - 控制 初始縮放比例，內容自然呈現大小 ## 建立文件主體內容 <body> 元素包含網頁的所有可見內容——使用者將看見並互動的所有東西。與提供瀏覽器指令的 <head> 不同，<body> 則包含實際內容：文字、圖片、按鈕，以及建構使用者介面的其他元素。 讓我們加入主體結構，並了解 HTML 標籤如何協作產生有意義的內容。 ### 理解 HTML 標籤結構 HTML 使用配對標籤來定義元素。大多數標籤有一個開啟標籤，如 <p>，及一個關閉標籤，如 </p>，中間包含內容：<p>Hello, world!</p>。這建立了一個包含「Hello, world!」文字的段落元素。 ### 任務：加入 body 元素 更新你的 HTML 檔案，加入 <body> 元素： 完整結構提供以下功能： - 建立 基本的 HTML5 文件架構 - 包含 重要元資料，保證瀏覽器正確渲染 - 創建 空白主體等待顯示內容 - 遵循 現代網頁開發最佳實務 現在你準備添加玻璃容器的可見元素。我們會使用 <div> 元素作為容器，組織不同的內容區塊，以及 <img> 元素來顯示植物圖片。 ### 操作圖片與版面容器 圖片在 HTML 中很特別，因為它們用「自我封閉」的標籤。與像 <p></p> 這種包覆內容的元素不同，<img> 標籤內使用屬性（例如 src 指定圖片路徑，alt 提供輔助功能）包含所有必要資訊。 在把圖片加入 HTML 前，你需要先建立資料夾並整理專案檔案。 首先設定你的圖片： 1. 在 terrarium 專案資料夾內建立 images 資料夾 2. 從解答資料夾下載植物圖片（共14張） 3. 複製所有植物圖片到新建的 images 資料夾中 ### 任務：建立植物展示版面 現在在 <body></body> 標籤間加入以兩欄組織的植物圖片： 這段程式碼的逐步解釋： - 建立 一個 id="page" 的主要頁面容器，包含所有內容 - 設置 兩個欄位容器：left-container 和 right-container - 將 7 株植物在左欄，7 株植物在右欄排列 - 每張 植物圖片用 plant-holder div 包裹，方便個別定位 - 採用 一致的 class 名稱，方便下一課搭配 CSS 美化 - 每株 植物圖片有獨特 ID，以便稍後用 JavaScript 操控 - 指定 正確的檔案路徑指向 images 目錄 ### 🔄 學習檢視點 結構理解：花點時間回顧你的 HTML 結構： - ✅ 能否找出佈局中的主要容器？ - ✅ 明白為何每張圖片有唯一 ID 嗎？ - ✅ 如何描述 plant-holder div 的用途？ 視覺檢查：在瀏覽器開啟你的 HTML 檔案，你應該會看到： - 一份基礎的植物圖片列表 - 兩欄呈現的圖片排列 - 簡單、未經樣式設定的版面 記住：在 CSS 加入前，HTML 本該就是這樣普通的外觀！ 加入這些標記後，植物會出現在畫面上，雖然尚未美觀完成——這就是下一課的 CSS 會負責的。此刻，你已有穩固的 HTML 基礎，可有效組織內容並遵循可及性最佳實踐。 ## 使用語意 HTML 促進可及性 語意 HTML 意味著依據意義和用途選擇 HTML 元素，而非僅依外觀。使用語意標記，你是在向瀏覽器、搜尋引擎和協助技術（如螢幕閱讀器）傳達內容的結構與意義。 此方法讓你的網站對殘障使用者更友善，並幫助搜尋引擎更好地理解內容。這是現代網頁開發重要原則，能為所有人創造更佳體驗。 ### 加入語意頁面標題 讓我們為玻璃容器頁加入適當的標題。將以下行插入在 <body> 開始標籤後面： 為何語意標記重要： - 協助 螢幕閱讀器導航與理解頁面結構 - 提升 搜尋引擎優化（SEO），明確內容層級 - 增強 視障與認知差異使用者的可及性 - 創造 跨設備與平台的良好使用體驗 - 遵循 網頁標準與專業開發最佳實務 語意與非語意元素比較： ## 建立玻璃容器結構 現在讓我們加入玻璃容器本身的 HTML 結構——這是未來放置植物的玻璃盒子。這部分展示了重要概念：HTML 提供結構，但沒有 CSS 樣式前，這些元素不會有可視效果。 玻璃容器標記使用描述性類別名稱，讓下一課的 CSS 美化更直覺且易維護。 ### 任務：加入玻璃容器結構 將此標記插入最後一個 </div> 標籤之前（頁面容器的關閉標籤前）： 理解這個玻璃容器結構： - 建立 一個主玻璃容器，具有獨特的 ID 以便樣式設定 - 定義 每個視覺元件的獨立元素（頂部、牆壁、泥土、底部） - 包含 用於玻璃反射效果的巢狀元素（有光澤的元素） - 使用 清楚表明每個元素用途的描述性類名 - 準備 用於 CSS 樣式以創建玻璃容器外觀的結構 ### 🔄 教學檢查點 HTML 結構掌握：在繼續之前，請確保你能： - ✅ 解釋 HTML 結構和視覺外觀之間的差異 - ✅ 識別語義 versus 非語義的 HTML 元素 - ✅ 描述適當標記如何有利於無障礙設計 - ✅ 辨識完整的文件樹結構 測試你的理解：嘗試在瀏覽器中關閉 JavaScript 並移除 CSS 後開啟你的 HTML 檔案。這可讓你看到你建立的純粹語義結構！ --- ## GitHub Copilot Agent 挑戰 使用 Agent 模式完成以下挑戰： 描述： 創建一個語義化的 HTML 結構，用於加入玻璃容器專案的植物護理指南區塊。 提示： 建立一個語義化的 HTML 區段，其中包括主要標題「Plant Care Guide」，三個子區段，分別有標題「Watering」、「Light Requirements」和「Soil Care」，每個子區段包含一段關於植物護理的資訊。使用適當語義 HTML 標籤如 <section>, <h2>, <h3>, 和 <p> 來正確組織內容。 在這裡了解更多關於 agent mode 。 ## 探索 HTML 歷史挑戰 了解網路演進 HTML 自 1990 年 Tim Berners-Lee 在 CERN 創造第一個瀏覽器以來已經有重大演變。一些舊標籤如 <marquee> 因不符合現代無障礙標準及響應式設計原則而被淘汰。 嘗試實驗： 1. 臨時使用 <marquee> 標籤包裹你的 <h1> 標題：<marquee><h1>My Terrarium</h1></marquee> 2. 在瀏覽器中打開頁面，觀察滾動效果 3. 思考此標籤被淘汰的原因（提示：用戶體驗與無障礙設計） 4. 移除 <marquee> 標籤，回復使用語義標記 反思問題： - 滾動標題會如何影響視覺障礙或動態敏感的使用者？ - 哪些現代 CSS 技術可更無障礙地實現類似視覺效果？ - 為何使用當代網路標準比使用淘汰標籤更重要？ 進一步探索 過時和淘汰的 HTML 元素，了解網路標準如何演進以提升使用者體驗。 ## 課後測驗 課後測驗 ## 複習與自主學習 深化你的 HTML 知識 HTML 已是網路基礎超過 30 年，從簡單的文件標記語言演進為構建互動應用的複雜平台。了解其演變能幫助你欣賞現代網路標準並做出更佳開發決策。 推薦學習路徑： 1. HTML 歷史與演進 - 研究從 HTML 1.0 到 HTML5 的時間軸 - 探討某些標籤被淘汰的原因（無障礙性、行動友善、可維護性） - 調查新興的 HTML 功能與提案 2. 語義 HTML 深入 - 研讀完整的 HTML5 語義元素列表 - 練習何時使用 <article>、<section>、<aside> 和 <main> - 了解提升無障礙設計的 ARIA 屬性 3. 現代網頁開發 - 探索 Microsoft Learn 上的響應式網站建置 - 理解 HTML 如何與 CSS 與 JavaScript 整合 - 學習網頁效能與 SEO 最佳實踐 反思問題： - 你發現了哪些被淘汰的 HTML 標籤？它們為何被移除？ - 有哪些新 HTML 功能正在為未來版本提出？ - 語義 HTML 如何促進網路無障礙及 SEO？ ### ⚡ 接下來 5 分鐘可做事 - [ ] 開啟 DevTools (F12)，檢視你最喜歡網站的 HTML 結構 - [ ] 建立一個簡單 HTML 檔案，包含基本標籤：<h1>, <p>, 和 <img> - [ ] 使用 W3C HTML Validator 線上驗證 HTML - [ ] 試著在 HTML 中加入註解 <!-- comment --> ### 🎯 這一小時能達成的事 - [ ] 完成課後測驗並複習語義 HTML 概念 - [ ] 使用正確的 HTML 結構建立一個關於你的簡易網頁 - [ ] 試驗不同標題等級及文字格式化標籤 - [ ] 新增圖片和連結，練習多媒體整合 - [ ] 研究尚未嘗試過的 HTML5 功能 ### 📅 為期一週的 HTML 旅程 - [ ] 完成具語義標記的玻璃容器專案任務 - [ ] 建立使用 ARIA 標籤和角色的無障礙網頁 - [ ] 練習建立各種輸入類型的表單 - [ ] 探索 HTML5 API，例如 localStorage 或地理位置 - [ ] 研習響應式 HTML 模式及行動優先設計 - [ ] 檢視其他開發者的 HTML 代碼，學習最佳實踐 ### 🌟 為期一個月的網頁基礎 - [ ] 建立展示 HTML 精通度的作品集網站 - [ ] 學習使用 Handlebars 等框架做 HTML 範本 - [ ] 透過改善 HTML 文件貢獻開源專案 - [ ] 精通進階 HTML 概念如自訂元素 - [ ] 將 HTML 與 CSS 框架及 JavaScript 函式庫整合 - [ ] 指導其他學習 HTML 基礎的人 ## 🎯 你的 HTML 精通時間表 ### 🛠️ 你的 HTML 工具箱摘要 完成本課後，你已具備： - 文件結構：完整的 HTML5 基礎與正確 DOCTYPE - 語義標記：增強無障礙與 SEO 的有意義標籤 - 圖片整合：妥善的檔案組織與替代文字使用 - 佈局容器：策略性使用帶描述性類名的 div - 無障礙意識：瞭解螢幕閱讀器的導航方式 - 現代標準：當前 HTML5 實務及淘汰標籤知識 - 專案基礎：為 CSS 樣式與 JavaScript 互動打好基礎 下一步：你的 HTML 結構已準備好進行 CSS 樣式設計！你所建立的語義基礎會讓下一課更易理解。 ## 作業 練習你的 HTML：製作一個部落格樣板 --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> 免責聲明： 本文件係使用 AI 翻譯服務 Co-op Translator 所翻譯。儘管我們致力於確保準確性，但請注意，自動翻譯可能包含錯誤或不精確之處。原始文件的母語版本應被視為權威來源。對於重要資訊，建議採用專業人工翻譯。我們不對因使用本翻譯而產生的任何誤解或誤譯負責。 <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Terrarium Project 第二部分：CSS 入門
還記得你的 HTML 陸地生態箱看起來相當簡單嗎？CSS 正是我們將這個樸素結構轉變成視覺吸引之物的關鍵所在。 如果 HTML 就像是建造房屋骨架，那麼 CSS 則是讓它有家的感覺的所有元素——油漆顏色、家具擺設、燈光，以及各個房間如何流暢連結。試想凡爾賽宮最初是簡單的狩獵小屋，但經由細心的裝飾和布局規劃，變成了世界上最宏偉的建築之一。 今天，我們將把你的陸地生態箱從功能性提升到精緻完美。你將學會如何精準定位元素、讓版面配置響應不同螢幕尺寸，以及創造令網站動人的視覺魅力。 到這堂課的結束，你會發現策略性的 CSS 樣式設定能大幅提升你的專案。讓我們為陸地生態箱加點風格吧。 ## 課前測驗 課前測驗 ## CSS 入門 CSS 常被認為是「讓東西變漂亮」的工具，但它的用途遠更廣泛。CSS 就像電影導演——你不僅控制畫面呈現，也能操控動態效果，反應使用者互動，並適應各種狀況。 現代 CSS 功能強大。你可以寫程式碼自動調整版面配置，適用於手機、平板與桌面電腦。你也能創造流暢動畫，引導使用者目光焦點。當所有元素協同運作時，效果驚人。 本課目標： - 建立陸地生態箱完整視覺設計，採用現代 CSS 技巧 - 探索關鍵觀念如層疊(cascade)、繼承(inheritance)及 CSS 選擇器 - 實作響應式定位與布局策略 - 打造利用 CSS 形狀和樣式的陸地生態箱容器 ### 前置條件 請完成上堂課設計的 HTML 結構，並準備好進行樣式設定。 ### 設定你的 CSS 檔案 開始設定樣式前，須先將 CSS 連結到 HTML。這告訴瀏覽器樣式的來源位置。 在你的陸地生態箱資料夾中，建立新的檔案 style.css，然後在 HTML 文件的 <head> 區段加入連結： 這段程式碼說明如下： - 建立 HTML 與 CSS 檔案間的連結 - 告訴瀏覽器載入並套用 style.css 內的樣式 - 使用 rel="stylesheet" 屬性指明這是 CSS 檔案 - 透過 href="./style.css" 指定檔案路徑 ## 理解 CSS 層疊機制 你是否好奇為什麼稱為「層疊」樣式表？因為樣式像瀑布一樣連續套用，有時彼此會產生衝突。 就像軍隊命令結構——將軍主令「所有軍隊穿綠制服」，但特定單位命令說「典禮穿藍禮服」，則以較具體指令為準。CSS 也遵循類似原理，理解這種層級結構，讓除錯輕鬆許多。 ### 體驗層疊優先順序 讓我們實際演練層疊，先在 <h1> 標籤加上內嵌樣式： 這段程式碼做了什麼： - 直接套用紅色字體在 <h1> 元素，使用內嵌樣式 - 利用 style 屬性，直接在 HTML 中嵌入 CSS - 建立該元素最高優先度的樣式規則 接著，在 style.css 內增加此規則： 以上範例讓我們： - 定義選取所有 <h1> 元素的 CSS 規則 - 設定使用外部樣式表將文字顏色設為藍色 - 優先度低於內嵌樣式的規則 ✅ 知識確認：在你的網頁中呈現哪個顏色？該顏色為何勝出？你能想到哪些情況會想要覆寫樣式嗎？ ## CSS 繼承實例 CSS 繼承猶如遺傳學——子元素會從父元素繼承某些屬性。若你設定 body 的字型，頁面所有文字會自動使用相同字型。就像哈布斯堡王朝的獨特下巴特徵代代相傳，不需個別設定。 但並非所有屬性都會繼承。像文字字型和顏色會，而邊距、邊框等布局屬性則不會。就如同小孩繼承外形特徵，但不一定繼承父母的穿衣打扮。 ### 觀察字型繼承 試試將字型設定在 <body> 元素上： 說明這段過程： - 設定整個網頁的字型，選取 <body> 元素 - 使用字型堆疊，提供備用方案以提升瀏覽器相容性 - 採用現代系統字體，美觀適配多平台 - 確保除非明確覆寫，子元素都會繼承這個字型 打開瀏覽器開發者工具（F12），切換到元素檢視，查看你的 <h1> 元素。你會看到它繼承了 body 的字型： ✅ 實驗時間：試著在 <body> 設定其他可繼承屬性，如 color、line-height、text-align。你的標題和其他元素會有什麼變化？ ### 🔄 學習確認 CSS 基礎理解檢核：開始選擇器前，請確定你能： - ✅ 述說層疊與繼承的差異 - ✅ 預測特殊規則下哪個樣式會生效 - ✅ 辨識父元素會繼承哪些屬性 - ✅ 正確將 CSS 檔案連結至 HTML 快速測試：有以下樣式， <div class="special"> 內的 <h1> 會是什麼顏色？ 答案：紅色（元素選擇器直接針對 h1） ## 精通 CSS 選擇器 CSS 選擇器是你針對特定元素套用樣式的方式。它們像精確指示——不只是說「那棟房子」，而是說「楓樹街上有紅門的藍色房子」。 CSS 提供多種定義精確度的方式，挑對選擇器就如挑對工具。有時候你要統一規劃一整區大門，有時候想特別裝飾某扇獨門。 ### 元素選擇器（標籤） 元素選擇器以標籤名稱選取 HTML 元素，適合制定全頁基礎樣式： 理解這些樣式： - 採用 body 選擇器設定網頁統一字型樣式 - 移除瀏覽器預設邊距與內距，方便控制排版 - 為所有標題元素添加文字色彩、對齊與間距 - 運用 rem 單位打造可縮放、易讀字體大小 元素選擇器非常適合全面設定，但若要單獨修飾陸地生態箱中的特定植物元件，則需更具體選擇器。 ### ID 選擇器用於獨特元素 ID 選擇器以 # 開頭，選取帶有指定 id 屬性的元素。因為 ID 必須唯一，很適合為個別特殊元素設定樣式，例如我們的左、右兩個植物容器。 建立陸地生態箱側邊植物容器的樣式： 這段程式碼成果說明： - 使用 absolute 定位將容器置於左右兩邊邊緣 - 採用 vh（視窗高度）單位，隨螢幕尺寸響應高度 - 設定 box-sizing: border-box，確保內距包含於寬度內 - 精簡將零值的 px 單位去除，讓程式碼更簡潔乾淨 - 塗上柔和的背景色，比嚴肅的灰色更舒適 ✅ 程式碼質量挑戰：注意這份 CSS 違反 DRY（不要重複你自己）原則。你能用一組 ID 結合類別重構它嗎？ 改良版方式： ### 類別選擇器用於重複利用樣式 類別選擇器以 . 開頭，適合套用同樣樣式給多個元素。相比 ID，類別可多次使用，方便統一風格。 在陸地生態箱中，所有植物需有類似樣式，但每株植物又要獨立定位。用類別管理共有樣式，ID 則負責個別配置。 植物的 HTML 結構如下： 主要組件解析： - 統一容器使用 class="plant-holder" 來套用一致樣式 - 植物圖片使用 class="plant" 管理共通風格與行為 - 獨特定位用 id="plant1" 等作為唯一識別與 JavaScript 互動 - 提供輔助閱讀器的描述文字以提升無障礙性 接著將這些樣式加入你的 style.css： 解析這些樣式： - 設定植物容器為相對定位，建立定位參考框架 - 調整每個容器高度為 13%，確保所有植物垂直排放不需捲動 - 稍微將容器左移，讓植物在容器內更靠中間 - 讓植物圖片可響應縮放，透過 max-width 與 max-height - 利用 z-index 將植物層級提高，置於其他陸地元素之上 - 新增平滑過渡的滑鼠懸停效果，增進互動性 ✅ 關鍵思考：為何需要同時用 .plant-holder 和 .plant？如果只用一個會怎樣？ ## 認識 CSS 定位 CSS 定位如同舞台導演——你決定每個演員站哪裡、如何移動。有些演員遵循標準陣型，有些因戲劇效果需特殊定位。 掌握定位，許多版面挑戰都迎刃而解。想要滾動時導航列固定？定位幫你辦到。想要在特定位置顯示工具提示？也是定位的功勞。 ### 五種定位值 ### 我們陸地生態箱的定位策略 我們透過定位組合，打造理想版面配置： 定位策略說明： - 絕對定位容器脫離正常文檔流，固定於畫面邊緣 - 相對定位植物容器既在文檔流內又建立定位框架 - 絕對定位植物可在相對容器中精確擺放 - 此組合允許植物垂直堆疊且可獨立調整位置 ✅ 實驗時間：改變定位值並觀察效果： - 若將 .container 從 absolute 改成 relative 會怎樣？ - 如果 .plant-holder 使用 absolute 而非 relative，佈局會如何變化？ - 當你將 .plant 改成 relative 定位時會發生什麼？ ### 🔄 教學檢測 CSS 定位掌握：暫停確認你的理解： - ✅ 你能解釋為什麼植物需要絕對定位才能拖放嗎？ - ✅ 你了解相對容器如何創建定位上下文嗎？ - ✅ 為什麼側邊容器使用絕對定位？ - ✅ 如果完全移除定位聲明會發生什麼？ 現實世界連結：想想 CSS 定位如何反映現實佈局： - Static：書架上的書（自然排序） - Relative：稍微移動書但保持位置 - Absolute：將書籤放在特定頁碼 - Fixed：摺頁時仍保持可見的便利貼 ## 使用 CSS 建構玻璃瓶生態缸 現在我們將使用純 CSS 建立玻璃罐—不需要圖片或繪圖軟體。 透過定位和透明度創造逼真的玻璃、陰影和深度效果，展現 CSS 的視覺能力。這種技術類似包浩斯建築師用簡單幾何形狀打造複雜、美麗結構。理解這些原理後，你將能認出許多網頁設計背後的 CSS 技巧。 ### 建立玻璃罐元件 讓我們逐部分構建生態缸玻璃罐。每個部分使用絕對定位和百分比尺寸以達到響應式設計： 理解生態缸構造： - 使用 百分比尺寸以適應各種螢幕大小 - 絕對定位 元素，以精確堆疊和對齊 - 套用 不同透明度來營造玻璃透明效果 - 實現 z-index 分層，使植物出現在罐內 - 添加 細緻陰影和圓角，提升真實感 ### 百分比響應設計 注意所有尺寸均使用百分比而非固定像素： 為什麼重要： - 確保 生態缸在任何螢幕尺寸上都能等比例縮放 - 維持 罐內各元件的視覺關係 - 提供 從手機到大螢幕一貫的使用體驗 - 讓 設計自適應且不破壞畫面佈局 ### CSS 單位實踐 我們使用 rem 單位設定邊框圓角，與根字體大小成比例。這讓設計更容易被使用者字型偏好接受。欲了解更多CSS 相對單位的官方規範。 ✅ 視覺實驗：試著修改這些數值並觀察效果： - 將罐身透明度從 0.5 調高至 0.8 — 玻璃呈現如何改變？ - 將土壤色從 #3a241d 換成 #8B4513 — 視覺效果差異？ - 將土層 z-index 調整為 2 — 分層效果如何？ ### 🔄 教學檢測 CSS 視覺設計理解：確認你的視覺 CSS 掌握： - ✅ 百分比尺寸如何創造響應式設計？ - ✅ 為何透明度產生玻璃透明效果？ - ✅ z-index 在元素分層中扮演什麼角色？ - ✅ 邊框圓角如何塑造罐子形狀？ 設計原則：注意我們如何從簡單形狀打造複雜視覺： 1. 矩形 → 圓角矩形 → 玻璃罐元件 2. 平面色彩 → 透明度 → 玻璃效果 3. 單一元素 → 分層組合 → 3D 外觀 --- ## GitHub Copilot Agent 挑戰 🚀 使用 Agent 模式完成以下挑戰： 描述： 創造一個 CSS 動畫，使生態缸中的植物輕柔搖擺，模擬自然微風效果。這將幫助你練習 CSS 動畫、轉換與關鍵影格，同時提升生態缸的視覺吸引力。 提示： 為 .plant 類別新增 CSS 關鍵影格動畫，使植物輕輕從左到右搖擺。動畫旋轉角度約 2-3 度，持續時間 3-4 秒，並無限循環，使用緩動函數模擬自然動作。 在此了解 agent mode。 ## 🚀 挑戰：新增玻璃反光 準備好利用真實玻璃反光效果強化生態缸嗎？此技術將為設計增添深度與真實感。 你將製作細膩高光，模擬光線如何在玻璃表面反射。此作法類似文藝復興畫家揚·范艾克運用光與反射使玻璃畫作呈現立體感。目標如下： 你的挑戰： - 製作 細膩的白色或淺色橢圓形反光 - 將它們置於 罐子的左側策略性位置 - 套用 適合的透明度與模糊效果以呈現真實光反射 - 利用 border-radius 造出有機泡泡狀形狀 - 嘗試 漸層或盒陰影效果增加真實感 ## 課後小測驗 課後小測驗 ## 擴充你的 CSS 知識 CSS 初學或許感覺複雜，但理解這些核心概念將提供你扎實基礎以進階技巧。 你的下一步 CSS 學習領域： - Flexbox - 簡化元素對齊與分配 - CSS Grid - 強大工具製作複雜佈局 - CSS 變數 - 減少重複提升維護性 - 響應式設計 - 確保網站適用不同螢幕尺寸 ### 互動學習資源 透過這些趣味且實際的遊戲練習概念： - 🐸 Flexbox Froggy - 透過有趣挑戰精通 Flexbox - 🌱 Grid Garden - 透過種胡蘿蔔學習 CSS Grid - 🎯 CSS Battle - 以程式挑戰測試你的 CSS 技能 ### 進階學習 欲了解完整 CSS 基礎，請完成微軟學習模組：用 CSS 風格化你的 HTML 應用 ### ⚡ 接下來 5 分鐘你可以做的事 - [ ] 開啟 DevTools，使用 Elements 面板檢查任一網站的 CSS 樣式 - [ ] 製作簡單 CSS 檔案並連結至 HTML 頁面 - [ ] 嘗試以十六進位、RGB 與命名色彩改變顏色 - [ ] 練習盒模型，為 div 加 padding 與 margin ### 🎯 這一小時你能完成的目標 - [ ] 完成課後小測驗，複習 CSS 基礎 - [ ] 使用字體、顏色與間距為 HTML 頁面加上風格 - [ ] 使用 flexbox 或 grid 製作簡易佈局 - [ ] 嘗試 CSS 過渡打造順暢效果 - [ ] 使用 media query 練習響應式設計 ### 📅 你的一週 CSS 冒險 - [ ] 創意完成生態缸樣式作業 - [ ] 精通 CSS Grid，打造照片畫廊佈局 - [ ] 學習 CSS 動畫，讓設計更生動 - [ ] 探索 Sass 或 Less 預處理器 - [ ] 研究設計原則並融入 CSS - [ ] 分析並重現網路上有趣的設計 ### 🌟 你的一個月設計大師之路 - [ ] 建置完整響應式網站設計系統 - [ ] 學習 CSS-in-JS 或 Tailwind 這類實用框架 - [ ] 為開源專案貢獻 CSS 優化 - [ ] 掌握 CSS 進階概念如自訂屬性及 containment - [ ] 創建可重用的模組化元件庫 - [ ] 指導其他 CSS 學習者並分享設計心得 ## 🎯 你的 CSS 精通時間軸 ### 🛠️ 你的 CSS 工具箱總結 完成本課後，你具備： - 繼承與覆寫理解：樣式如何繼承與覆寫 - 選擇器精通：元素、類別與 ID 精準選取 - 定位技巧：策略性元素放置與分層 - 視覺設計：製作玻璃效果、陰影與透明度 - 響應技術：百分比佈局適應各種螢幕 - 程式碼組織：乾淨且易維護的 CSS 結構 - 現代實務：使用相對單位與無障礙設計模式 下一步：你的生態缸現在有結構（HTML）與樣式（CSS）。最後一課將增添 JavaScript 互動功能！ ## 作業 CSS 重構 --- <!-- CO-OP TRANSLATOR DISCLAIMER START --> 免責聲明： 本文件係使用 AI 翻譯服務 Co-op Translator 進行翻譯。儘管我們努力追求準確性，請注意自動翻譯可能包含錯誤或不準確之處。原文文件以其母語版本為權威依據。對於重要資訊，建議尋求專業人工翻譯。我們不對因使用本翻譯而導致之任何誤解或曲解負責。 <!-- CO-OP TRANSLATOR DISCLAIMER END -->