المهام العملية في لغة HTML للمبتدئين. CSS للمبتدئين: درس عملي

1.1. على خادم Xampp المحلي الخاص بك، قم بإنشاء مجلد اختبار في مجلد htdocs يسمى test، يحتوي على مجلدات css والصور والصفحات فيه، بالإضافة إلى صفحة Index.html الرئيسية الفارغة لموقع الاختبار الخاص بنا. ثم، في مجلد الصفحات، قم بإنشاء صفحة ويب فارغة، page_1.html، وفي مجلد CSS، ملفين CSS فارغين: Styles_1.css وstyles_2.css. لا تقم بحذف مجلد الاختبار في المستقبل، فسوف نقوم بجميع التمارين فيه. في مستندات HTML، لا تنس تحديد ترميز utf-8 وعنوان الصفحة "العنوان". للوصول بسرعة إلى الصفحة الرئيسية، قم بإنشاء إشارة مرجعية في متصفحك. يجب أن يبدو مسار العنوان إلى الصفحة http://localhost/test/index.html. عرض الحل.

حل المشكلة رقم 1.1

1.2. أعد إنشاء الكود الخاص بصفحة الويب الموضحة في الشكل. استخدم ورقة الأنماط الداخلية ومحددات عناصر p وspan وخصائص اللون والعرض في CSS. اضبط عرض الفقرة على 300 بكسل. استخدم الألوان الحمراء والزرقاء. عرض الحل.

حالة المهمة رقم 1.2

حل المشكلة رقم 1.2

1.3. استخدم شرط المهمة الثانية ولكن ضع ورقة الأنماط في ملف خارجي style_1.css . لتوصيل ورقة أنماط خارجية، استخدم عنصر الخدمة "الارتباط". عرض الحل.

يجب أن يكون نص الفقرة باللون الأحمر. لكن لا، لأن... يجب أن يكون محتوى عنصر "الامتداد" باللون الأزرق.

حل المشكلة رقم 1.3

1.4. استخدم شرط المهمة الثالثة، ولكن قم بتوصيل ورقة الأنماط الخارجية باستخدام خاصية @import، مع وضع القاعدة في عنصر خدمة "النمط". عرض الحل.

يجب أن يكون نص الفقرة باللون الأحمر. لكن لا، لأن... يجب أن يكون محتوى عنصر "الامتداد" باللون الأزرق.

حل المشكلة رقم 1.4

1.5. استخدم شرط المشكلة الثانية، ولكن ضع قاعدة الفقرة في الملف الخارجي style_1.css وقاعدة عنصر "span" في الملف الخارجي style_2.css . قم بتوصيل أحد هذه الملفات باستخدام عنصر خدمة "الارتباط"، والثاني باستخدام خاصية @import، مع وضع القاعدة في عنصر خدمة "النمط". في جميع المهام الأربع يجب أن تكون النتيجة هي نفسها! عرض الحل.

يجب أن يكون نص الفقرة باللون الأحمر. لكن لا، لأن... يجب أن يكون محتوى عنصر "الامتداد" باللون الأزرق.

حل المشكلة رقم 1.5

1.6. يوجد أدناه رمز صفحة html، بالإضافة إلى مظهر الصفحة عند عرضها بواسطة المتصفح. يتم توصيل ورقة أنماط خارجية بالصفحة، والتي يجب استعادة الكود الخاص بها. استخدم محددات المعرف والفئة والسمات. عرض الحل.

الأزرق "الامتداد".
"الامتداد" الأخضر.

رمز الصفحة للمهمة رقم 1.6

مطلوب ظهور الصفحة في المهمة رقم 1.6

#p_1( اللون: أحمر; العرض: 300 بكسل; ) .s_1( اللون: أزرق; ) تمتد( اللون: أخضر; )

حل المشكلة رقم 1.6

1.7. يوجد أدناه رمز صفحة html، بالإضافة إلى مظهر الصفحة عند عرضها بواسطة المتصفح. يتم توصيل ورقة أنماط خارجية بالصفحة، والتي يجب استعادة الكود الخاص بها. يُسمح باستخدام المحددات السياقية والفرعية والمجاورة فقط في قواعد CSS. عرض الحل.

برتقالي "م"

السطر الأحمر الأول من الفقرة.
الأزرق "الامتداد".

رمز الصفحة للمهمة رقم 1.7

مطلوب ظهور الصفحة في المهمة رقم 1.7

حل المشكلة رقم 1.7

1.8. يوجد أدناه رمز صفحة html، بالإضافة إلى مظهر الصفحة عند عرضها بواسطة المتصفح. يتم توصيل ورقة أنماط خارجية بالصفحة، والتي يجب استعادة الكود الخاص بها. استخدم محددات الفئة الزائفة والعناصر الزائفة :hover ، :visited ، ::first-letter . بالنسبة للفقرة، استخدم محدد العناصر العادية. عرض الحل.

عندما تحوم فوقي، أتحول إلى اللون البرتقالي.

السطر الأحمر الأول من الفقرة.
لقد تمت زيارتها بالفعل.

رمز الصفحة للمهمة رقم 1.8

مطلوب ظهور الصفحة في المهمة رقم 1.8

P (اللون: أحمر؛ العرض: 300 بكسل؛ ) em:تحويم (اللون: برتقالي؛) p::الحرف الأول (اللون: أزرق؛ ) أ:تمت الزيارة (اللون: أخضر؛)

حل المشكلة رقم 1.8

1.9. أي المحدد له خصوصية أكثر: p em(...) أو p.class(...)، #m_d(...) أو em.m_cl(...)، div p#my_idspan(... ) أو divspan#s_id(...) أو div>div.my_class p.red_colorspan:hover(...) أو div p+div p.green_colorspan(...). عرض الحل.

نحدد الخصائص ونقارن. ص م(...) em.m_cl(...)، لأن (1,0,0)>(0,1,1); div p#my_idspan(...) div.my_class p.red_colorspan:hover(...) > div p+div p.green_colorspan(...)، لأن (0,4,4)>(0,2,5).

حل المشكلة رقم 1.9

§2. خصائص CSS للنص والخط والقوائم والجداول والنماذج

2.1. يوجد أدناه رمز صفحة html، بالإضافة إلى مظهر الصفحة عند عرضها بواسطة المتصفح. يتم توصيل ورقة أنماط خارجية بالصفحة، والتي يجب استعادة الكود الخاص بها. اضبط عرض (عرض) الفقرات على 500 بكسل، والخلفية (لون الخلفية)، على التوالي، واضبطها على الأصفر والأرجواني (البنفسجي)، والمسافة بين الكلمات، على التوالي، 3 بكسل و12 بكسل، والمسافة بين الحروف الفردية - 1 بكسل و2 بكسل، وارتفاع الخط - 1.1em و1.6em، المسافة البادئة للسطر الأول - 1% و3%. في الفقرة الثانية، ينبغي محاذاة النص إلى اليمين. لا تنس شطب (وضع خط تحت) الأسطر المناسبة. قارن نتائج التنسيق لكلتا الفقرتين. عرض الحل.

الجملة الأولى من الفقرة.

الجملة الأولى من الفقرة.الجملة الثانية الأطول من الفقرة. الجملة الثالثة والأخيرة من الفقرة.

رمز الصفحة للمهمة رقم 2.1

مطلوب ظهور الصفحة في المهمة رقم 2.1

P_1 (العرض: 500 بكسل؛ لون الخلفية: أصفر؛ تباعد الكلمات: 3 بكسل؛ تباعد الحروف: 1 بكسل؛ ارتفاع السطر: 1.1em؛ المسافة البادئة للنص: 1%؛) #p_2( زخرفة النص: سطر من خلال ) .p_3( العرض: 500 بكسل; لون الخلفية: بنفسجي; تباعد الكلمات: 12 بكسل; تباعد الحروف: 2 بكسل; ارتفاع السطر: 1.6em; المسافة البادئة للنص: 3%; محاذاة النص: لليمين; ) #p_4( text -الزخرفة: تسطير)

حل المشكلة رقم 2.1

2.2. يوجد أدناه رمز صفحة html، بالإضافة إلى مظهر الصفحة عند عرضها بواسطة المتصفح. يتم توصيل ورقة أنماط خارجية بالصفحة، والتي يجب استعادة الكود الخاص بها. اضبط عرض (عرض) الفقرات على 500 بكسل، والخلفية (لون الخلفية)، على التوالي، واضبطها على الأصفر والأرجواني (بنفسجي). بالنسبة للفقرة الأولى، استخدم الخط Arial، وللثانية - Times New Roman. اضبط حجم الخط في كلتا الفقرتين على 1em. استخدم خصائص Font-variant، وfont-weight، ونمط الخط عند الحاجة. قارن نتيجة تنسيق النص بنتيجة التنسيق في المهمة 2.1. عرض الحل.

الجملة الأولى من الفقرة.الجملة الثانية الأطول من الفقرة. الجملة الثالثة والأخيرة من الفقرة.

الجملة الأولى من الفقرة.الجملة الثانية الأطول من الفقرة. الجملة الثالثة والأخيرة من الفقرة.

رمز الصفحة للمهمة رقم 2.2

مطلوب ظهور الصفحة في المهمة رقم 2.2

P_1 (العرض: 500 بكسل؛ لون الخلفية: أصفر؛ عائلة الخط: arial؛ حجم الخط: 1em؛) #p_2 (متغير الخط: أحرف صغيرة؛ ) .p_3 (العرض: 500 بكسل؛ لون الخلفية: بنفسجي؛ عائلة الخط: "رواية جديدة"؛ حجم الخط: 1em؛ وزن الخط: غامق) #p_4(نمط الخط: مائل؛)

حل المشكلة رقم 2.2

2.3. يوجد أدناه رمز صفحة html، بالإضافة إلى مظهر الصفحة عند عرضها بواسطة المتصفح. يتم توصيل ورقة أنماط خارجية بالصفحة، والتي يجب استعادة الكود الخاص بها. اضبط عرض (عرض) القوائم على 500 بكسل، والخلفية (لون الخلفية)، على التوالي، واضبطها على الأصفر والأرجواني (بنفسجي). استخدم خصائص نوع نمط القائمة وموضع نمط القائمة حيثما يكون ذلك مطلوبًا. قارن نتائج التنسيق لكلتا القائمتين. عرض الحل.

• نحن نستخدم نوع العلامة العشرية.

1. نضع علامات خارج القائمة.
2. نحن نستخدم نوع العلامة المربعة.

رمز الصفحة للمهمة رقم 2.3

مطلوب ظهور الصفحة في المهمة رقم 2.3

List_1 ( العرض: 500 بكسل؛ لون الخلفية: أصفر؛ نوع نمط القائمة: عشري؛ موضع نمط القائمة: خارجي؛ ) .list_2 (العرض: 500 بكسل؛ لون الخلفية: بنفسجي؛ نوع نمط القائمة: مربع؛) قائمة نمط الموقف: داخل؛

حل المشكلة رقم 2.3

2.4. يوجد أدناه رمز صفحة html، بالإضافة إلى مظهر الصفحة عند عرضها بواسطة المتصفح. يتم توصيل ورقة أنماط خارجية بالصفحة، والتي يجب استعادة الكود الخاص بها. استخدم خصائص التسمية التوضيحية، وحدود طي الحدود، وتباعد الخلايا، والخلايا الفارغة. قارن نتيجة تنسيق كلا الجدولين. عرض الحل.

رمز الصفحة للمهمة رقم 2.4

مطلوب ظهور الصفحة في المهمة رقم 2.4

Table_1 (جانب التسمية التوضيحية: أعلى؛ طي الحدود: طي؛ ) .table_2 (جانب التسمية التوضيحية: أسفل؛ طي الحدود: منفصل؛ تباعد الحدود: 5 بكسل؛ الخلايا الفارغة: إخفاء؛ )

حل المشكلة رقم 2.4

§3. تحديد الأحجام والحدود والحشوات وهوامش العناصر

3.1. يوجد أدناه رمز صفحة html، بالإضافة إلى مظهر الصفحة عند عرضها بواسطة المتصفح. يتم توصيل ورقة أنماط خارجية بالصفحة، والتي يجب استعادة الكود الخاص بها. اضبط عرض الفقرة الأولى على 400 بكسل، والثانية على 300 بكسل. اضبط ارتفاع الفقرة الأولى على 10vh، والثانية على 200 بكسل. في الفقرة الثانية، قم بتعيين الحد الأدنى للعرض إلى 400 بكسل والحد الأقصى للارتفاع إلى 100 بكسل. استخدم خصائص العرض والارتفاع والحد الأدنى للعرض والحد الأقصى للارتفاع. لاحظ النتائج النهائية لعرض وحجم الفقرة الثانية بسبب القيود المطبقة. عرض الحل.

عرض الفقرة هو 400 بكسل، والارتفاع هو 10% من ارتفاع منطقة عرض نافذة المتصفح.

سيكون عرض الفقرة 400 بكسل، لأن... العرض أقل من الحد الأدنى للعرض، والارتفاع 100 بكسل، لأن الارتفاع يتجاوز الحد الأقصى للارتفاع.

رمز الصفحة للمهمة رقم 3.1

مطلوب ظهور الصفحة في المهمة رقم 3.1

P_1 (لون الخلفية: أصفر؛ العرض: 400 بكسل؛ الارتفاع: 10vh؛ ) .p_2 (لون الخلفية: بنفسجي؛ الحد الأدنى للعرض: 400 بكسل؛ الحد الأقصى للارتفاع: 100 بكسل؛ العرض: 300 بكسل؛ الارتفاع: 200 بكسل؛)

حل المشكلة رقم 3.1

3.2. في حالة المهمة 3.1، يتم عرض رمز صفحة HTML، وفيما يلي مظهر الصفحة عند عرضها بواسطة المتصفح. يتم توصيل ورقة أنماط خارجية بالصفحة، والتي يجب استعادة الكود الخاص بها. استفد من نتيجة المشكلة 3.1 عن طريق إضافة خصائص إضافية إلى ورقة الأنماط التي تحدد حدود الفقرة المناسبة: border , border-top , border-bottom . اضبط عرض جميع الحدود على 4 بكسل. عرض الحل.

مطلوب ظهور الصفحة في المهمة رقم 3.2

P_1 (لون الخلفية: أصفر؛ العرض: 400 بكسل؛ الارتفاع: 10vh؛ الحد: أحمر خالص 4 بكسل؛ الحد العلوي: أزرق منقط؛ الحد السفلي: أزرق متقطع؛ ) .p_2 (لون الخلفية: بنفسجي؛ الحد الأدنى للعرض: 400 بكسل؛ أقصى ارتفاع: 100 بكسل؛

حل المشكلة رقم 3.2

3.3. في حالة المهمة 3.1، يتم تقديم رمز صفحة HTML، وفيما يلي مظهر الصفحة عند عرضها بواسطة المتصفح. يتم توصيل ورقة أنماط خارجية بالصفحة، والتي يجب استعادة الكود الخاص بها. استفد من نتائج المسألتين 3.1 و3.2 عن طريق إضافة خصائص إضافية إلى ورقة الأنماط التي تحدد تقريب الزوايا المقابلة للفقرة الأولى والحدود الخارجية للفقرة الثانية: border-radius , border-bottom-right-radius الحدود أسفل نصف القطر الأيسر مخطط تفصيلي إزاحة. اضبط تقريب الحدود على 1em واضبط الزوايا السفلية على 2em. اضبط المسافة بين الحدود الداخلية والخارجية على 2 بكسل. اضبط عرض الحد الخارجي على 4 بكسل. عرض الحل.

مطلوب ظهور الصفحة في المهمة رقم 3.3

P_1 (لون الخلفية: أصفر؛ العرض: 400 بكسل؛ الارتفاع: 10vh؛ الحد: أحمر خالص 4 بكسل؛ الحد العلوي: أزرق منقط؛ الحد السفلي: أزرق متقطع؛ نصف قطر الحدود: 1em؛ نصف قطر الحدود السفلي الأيمن: 2em؛ نصف القطر من أسفل إلى اليسار: 2em؛ ) .p_2( لون الخلفية: بنفسجي؛ الحد الأدنى للعرض: 400 بكسل؛ الحد الأقصى للارتفاع: 100 بكسل؛ العرض: 300 بكسل؛ الارتفاع: 200 بكسل؛ الحدود: أخضر خالص 4 بكسل؛ المخطط التفصيلي: أزرق خالص 4 بكسل؛ إزاحة المخطط التفصيلي: 2 بكسل)

حل المشكلة رقم 3.3

3.4. في حالة المهمة 3.1، يتم عرض رمز صفحة HTML، وفيما يلي مظهر الصفحة عند عرضها بواسطة المتصفح. يتم توصيل ورقة أنماط خارجية بالصفحة، والتي يجب استعادة الكود الخاص بها. استفد من نتائج المهام 3.1 و3.2 و3.3 عن طريق إضافة خصائص إضافية إلى ورقة الأنماط التي تحدد المسافات البادئة الداخلية والخارجية للفقرات: الحشو، والحشو لليسار، والهامش، والهامش العلوي. اضبط المساحة المتروكة في كلتا الفقرتين على 0.5em، ثم أعد تعريف المساحة المتروكة الخاصة بهما إلى 0.8em. اضبط الهامش على 30 بكسل، ولكن في الفقرة الثانية، أعد تعريف الهامش العلوي إلى 50 بكسل. قارن نتائج المسائل الأربع جميعها. عرض الحل.

مطلوب ظهور الصفحة في المهمة رقم 3.4

P_1 (لون الخلفية: أصفر؛ العرض: 400 بكسل؛ الارتفاع: 10vh؛ الحد: أحمر خالص 4 بكسل؛ الحد العلوي: أزرق منقط؛ الحد السفلي: أزرق متقطع؛ نصف قطر الحدود: 1em؛ نصف قطر الحدود السفلي الأيمن: 2em؛ نصف القطر من أسفل إلى اليسار: 2em؛ الحشو من اليسار: 0.8px؛ الحدود: أخضر خالص 4px؛ إزاحة المخطط التفصيلي: 2 بكسل؛

حل المشكلة رقم 3.4

§4. تحديد اللون والخلفية باستخدام الرسوم المتحركة

4.1. يوجد أدناه رمز صفحة html، بالإضافة إلى مظهر الصفحة عند عرضها بواسطة المتصفح. يتم توصيل ورقة أنماط خارجية بالصفحة، والتي يجب استعادة الكود الخاص بها. انسخ صورة الحقيبة إلى مجلد الصور الموجود في مجلد الاختبار الذي أنشأناه سابقًا على الخادم المحلي (إذا قمت بحذفه، فانظر إلى حالة المهمة رقم 1.1 في بداية كتاب المشكلات وقم بإنشاء كل شيء مرة أخرى). يجب أن يكون نص الفقرة الأولى باللون الأحمر، ويجب أن تكون الخلفية باللون الأصفر، ويجب أن يكون عرض الفقرة 300 بكسل. يجب أن يكون عرض الفقرة الثانية 300 بكسل، مع ضبط الخلفية على اللون الأرجواني. أضف أيضًا صورة خلفية، والتي لا ينبغي تكرارها، يجب أن تكون الأبعاد 20% من العرض و 40% من الارتفاع للفقرة، ويجب تحديد موضع البداية بالإحداثيات x =15px و y =15px . حدد فقط منطقة محتوى الفقرة للخلفية. عرض الحل.

يجب أن يكون نص هذه الفقرة باللون الأحمر والخلفية باللون الأصفر. يجب أن يكون عرض الفقرة 300 بكسل.

يجب أن يكون عرض الفقرة 300 بكسل، ويجب أن تكون الخلفية باللون الأرجواني. يجب ألا تتكرر الصورة، ويجب أن تكون الأبعاد 20% من العرض و40% من الارتفاع للفقرة. يجب تحديد موضع البداية بالإحداثيات x=15px و y=15px. حدد فقط منطقة محتوى الفقرة للخلفية.

رمز الصفحة للمهمة رقم 4.1

مطلوب ظهور الصفحة في المهمة رقم 4.1

الخلفية_1(اللون: أحمر؛ لون الخلفية: أصفر؛ ) .background_2(لون الخلفية: بنفسجي؛ صورة الخلفية: url("http://localhost/test/images/cabinet.png"); تكرار الخلفية: لا - كرر موضع الخلفية: 15 بكسل 15 بكسل؛ حجم الخلفية: 20% 40%؛

حل المشكلة رقم 4.1

4.2. يوجد أدناه رمز صفحة html، بالإضافة إلى مظهر الصفحة عند عرضها بواسطة المتصفح. يتم توصيل ورقة أنماط خارجية بالصفحة، والتي يجب استعادة الكود الخاص بها. يجب أن يكون نص الفقرة الأولى باللون الأسود، ويجب أن تكون الخلفية بتدرج خطي من الأحمر إلى الأبيض. يجب أن يكون عرض الفقرة 300 بكسل وارتفاعها 150 بكسل. يجب أن يكون عرض الفقرة الثانية 300 بكسل وارتفاعها 150 بكسل. يجب أن تكون الخلفية متدرجة شعاعيًا من الأخضر إلى الأبيض. يجب أن يكون للقطع الناقص المتدرج أنصاف أقطار 250 بكسل و280 بكسل، ويجب أن يقع المركز عند النقطة ذات الإحداثيات x = 100px وy = 180px. عرض الحل.

يجب أن يكون نص هذه الفقرة باللون الأسود، ويجب أن تكون الخلفية بتدرج خطي من الأحمر إلى الأبيض. يجب أن يكون عرض الفقرة 300 بكسل وارتفاعها 150 بكسل.

يجب أن يكون عرض الفقرة 300 بكسل وارتفاعها 150 بكسل. يجب أن تكون الخلفية متدرجة شعاعيًا من الأخضر إلى الأبيض. يجب أن يكون للقطع الناقص المتدرج أنصاف أقطار 250 بكسل و280 بكسل، ويجب أن يقع المركز عند النقطة ذات الإحداثيات x=100px وy=180px.

رمز الصفحة للمهمة رقم 4.2

مطلوب ظهور الصفحة في المهمة رقم 4.2

الخلفية_1 (اللون: أسود؛ صورة الخلفية: تدرج خطي (90deg، #ff0000، #ffffff)؛ ) .background_2( الخلفية: تدرج شعاعي (250 بكسل 280 بكسل عند 100 بكسل 180 بكسل، #00ff00، #ffffff)؛ ) .border_1( الحشو: 15 بكسل؛ العرض: 300 بكسل؛ الحدود: 3 بكسل أزرق)

حل المشكلة رقم 4.2

4.3. يوجد أدناه رمز صفحة html، بالإضافة إلى رمز ورقة الأنماط الخارجية style_1.css. اكتبها في برنامج Notepad++ وقم بالتجربة من خلال تغيير قيم خصائص الرسوم المتحركة.

رمز صفحة HTML للمهمة رقم 4.3

الخلفية_1 (الحشوة: 0 بكسل؛ العرض: 450 بكسل؛ الارتفاع: 100 بكسل؛ الحد: 3 بكسل أحمر خالص؛ اسم الرسوم المتحركة: مثال_1؛ تأخير الرسوم المتحركة: 1 ثانية؛ مدة الرسوم المتحركة: 4 ثوانٍ؛ عدد تكرار الرسوم المتحركة: لا نهائي؛ اتجاه الرسوم المتحركة: عكسي؛ ))

كود ورقة الأنماط الخارجية للمهمة رقم 4.3

4.4. يوجد أدناه رمز صفحة html، بالإضافة إلى رمز ورقة الأنماط الخارجية style_2.css. اكتبها في برنامج Notepad++ وقم بالتجربة من خلال تغيير قيم خصائص النقل.

رمز صفحة HTML للمهمة رقم 4.4

الخلفية_1 (الحشوة: 10 بكسل؛ العرض: 100 بكسل؛ الارتفاع: 100 بكسل؛ الحدود: أزرق 3 بكسل خالص؛ لون الخلفية: #ff0000؛ خاصية الانتقال: العرض، لون الخلفية؛ تأخير الانتقال: 0.2 ثانية؛ مدة الانتقال: 2 ثانية؛ وظيفة توقيت الانتقال: سهولة الدخول) p:hover( المؤشر: المؤشر؛ لون الخلفية: #0000ff؛ العرض: 450 بكسل؛)

كود ورقة الأنماط الخارجية للمهمة رقم 4.4

§5. عرض العناصر في المستند

5.1. يوجد أدناه رمز صفحة html، بالإضافة إلى رمز ورقة الأنماط الخارجية style_2.css. اكتبها في المفكرة ++. لاحظ كيف تتصرف الفقرات أثناء تمرير الصفحة، وكيف يتغير مظهر عنصر "الامتداد" عند المرور فوقه، ونتيجة لذلك، تتغير قيمة خاصية العرض المطبقة عليه.

تغيير العرض

الموقف: ثابت؛

الموقف: مطلق؛

رمز صفحة HTML للمهمة رقم 5.1

Div_0 (الحشوة: 10 بكسل؛ العرض: 200 بكسل؛ الارتفاع: 200 بكسل؛ الحدود: 3 بكسل صلبة برتقالية؛) الامتداد: التحويم (المؤشر: المؤشر؛ العرض: كتلة؛ ) .div_1 (الحشوة: 10 بكسل؛ العرض: 200 بكسل؛ الارتفاع: 600 بكسل؛ الحدود : لون برتقالي ثابت 3 بكسل؛ الخلفية: تدرج خطي (180 درجة، #0000ff، #ffffff)؛ الموضع: ثابت؛ الجزء العلوي: 250 بكسل) .div_2 (الحشوة: 10 بكسل؛ العرض: 200 بكسل؛ الحد: لون أحمر ثابت 3 بكسل؛ الخلفية: تدرج خطي (90deg، #0000ff، #ffffff الموضع: مطلق؛ الأعلى: 1100 بكسل؛

كود ورقة الأنماط الخارجية للمهمة رقم 5.1

5.2. يوجد أدناه رمز صفحة html، بالإضافة إلى مظهر الصفحة عند عرضها بواسطة المتصفح. يتم توصيل ورقة أنماط خارجية بالصفحة، والتي يجب استعادة الكود الخاص بها. الخصائص المطلوبة للعناصر موضحة في الرسومات نفسها. عرض الحل.

رمز الصفحة للمهمة رقم 5.2

مطلوب ظهور الصفحة في المهمة رقم 5.2

Div_1( الحشو: 15 بكسل؛ العرض: 300 بكسل؛ الارتفاع: 400 بكسل؛ الحد: متقطع 5 بكسل #00ff00؛ الموضع: ثابت؛ أعلى: 30 بكسل؛ اليسار: 35 بكسل؛ ) .div_3:hover( المؤشر: المؤشر؛ العتامة: 0.3؛ ) .div_2 ( الحشو: 5 بكسل؛ العرض: 70 بكسل؛ الارتفاع: 50 بكسل؛ الحد: برتقالي خالص 2 بكسل؛ الخلفية: تدرج شعاعي (35 بكسل 35 بكسل عند 10 بكسل 10 بكسل، #00ffff، #ffffff)؛ تعويم: يسار؛ ) .div_3( الحشو: 5 بكسل; العرض: 70 بكسل؛ الارتفاع: 50 بكسل؛ الخلفية منقط باللون الأحمر: تدرج خطي (45deg, #0000ff, #ffffff);

حل المشكلة رقم 5.2

5.3. يوجد أدناه رمز صفحة html، بالإضافة إلى مظهر الصفحة عند عرضها بواسطة المتصفح. يتم توصيل ورقة أنماط خارجية بالصفحة، والتي يجب استعادة الكود الخاص بها. الخصائص المطلوبة للعناصر موضحة في الرسومات نفسها. عرض الحل.

رمز الصفحة للمهمة رقم 5.3

مطلوب ظهور الصفحة في المهمة رقم 5.3

Div_1( الحشو: 10 بكسل; العرض: 500 بكسل; الارتفاع: 200 بكسل; الحد: متقطع 5 بكسل #0000ff; لون الخلفية: أصفر; الموضع: مطلق; الأعلى: 30 بكسل; اليسار: 35 بكسل; ) .div_2( الحشو: 5 بكسل; العرض: 200 بكسل الارتفاع: 100 بكسل؛ الحدود: 2 بكسل أزرق؛

حل المشكلة رقم 5.3

§6. @-قواعد. إدراج المحتوى. طباعة الوثيقة.

6.1. يوجد أدناه رمز صفحة html، بالإضافة إلى مظهر الصفحة عند عرضها بواسطة المتصفح. يتم توصيل ورقة أنماط خارجية بالصفحة، والتي يجب استعادة الكود الخاص بها. لإنشاء عدادات لنص المستند وعنصر h2، استخدم خاصية إعادة تعيين العداد، ولإدراج قيم العداد باستخدام خصائص المحتوى وزيادة العداد. عرض الحل.

مقدمة إلى HTML

ما هو HTML؟

عرض المتصفح لمستند ويب.

مفهوم علامة HTML وبناء الجملة الخاص بها.

تنسيق النص

كتلة والعناصر المضمنة.

تقسيم النص إلى فقرات. تطبيق الرؤوس

رمز الصفحة للمهمة رقم 6.1

مطلوب ظهور الصفحة في المهمة رقم 6.1

Body( counter-reset: parag_1; /* إنشاء عداد لنص المستند */ ) h2( counter-reset: parag_2; /* إنشاء عداد للرأس "h2" */ ) /* عد الكل "h2 " في عنصر "النص" */ /* أدخل محتوى قبل كل "h2": السطر + قيمة العداد الحالي + السطر */ h2:before( counter-increment: parag_1 1; content: "§" counter(parag_1) ". "; ) /* عد في العنصر "h2" كل "h3" */ /* أدخل المحتوى قبل كل "h3": قيمة العداد الحالية parag_1+line+قيمة العداد الحالية parag_2+line */ h3:before( counter-increment: parag_2 1; المحتوى: counter(parag_1) "."

حل المشكلة رقم 6.1

§7. تخطيط عملي لعناصر موقع الويب بلغة HTML وCSS

7.1.1 قم بتنزيل الكود التعليمي لإطار الصفحة التكيفية، واستخدم التعليقات لدراسته، ثم قم بتصميمه بنفسك.

7.1.2 قم بتنزيل الكود التعليمي لإطار الصفحة التكيفية، ودراسته باستخدام التعليقات، ثم تصميمه بنفسك. قارن مع الخيار الأول.

7.1.3 قم بتنزيل الكود التعليمي لإطار الصفحة التكيفية، ودراسته باستخدام التعليقات، ثم تصميمه بنفسك. قارن مع الخيارات السابقة.

7.2.1 يوضح لك البرنامج التعليمي القابل للتنزيل كيفية إنشاء التنقل الجانبي للصفحة للتمرير لأعلى أو لأسفل. لا توجد تعليقات، ولكن ليس هناك الكثير من التعليمات البرمجية، لذا فإن فهمها لن يكون صعبًا للغاية. ادرس المثال ثم اجعله خاصًا بك.

7.2.2 باستخدام الكود من المثال السابق، قم بإنشاء زر "العودة إلى الأعلى" في أسفل الصفحة. إزالة التنقل الجانبي. إذا لم تتمكن من إكمال المهمة، فانظر إلى الحل ثم اكتب الرمز بنفسك.

7.2.3 يوضح البرنامج التعليمي القابل للتنزيل كيفية إنشاء زر "العودة إلى الأعلى" على جانب الموقع والذي يظهر بعد تمرير الصفحة بواسطة رقم محدد، على سبيل المثال، وحدات البكسل. هناك عدد قليل من التعليقات، ولكن ليس هناك الكثير من التعليمات البرمجية، لذلك لن يكون فهمها صعبا. ادرس المثال ثم اجعله خاصًا بك.

7.3.1 قم بإنشاء قائمة أفقية موضحة في الشكل. استخدم قائمة للقيام بذلك، مع وضع الروابط في نقاط نقطية. لجعل العناصر تظهر كخط، قم بتحويلها إلى عناصر سطرية. عندما تقوم بالتمرير فوق عناصر القائمة، يجب أن يتغير لونها إلى اللون الأسود. يمكنك تحميل الحل . تحويل القائمة إلى عمودية. لإزالة أرقام العناصر، استخدم الخاصية المقابلة لعلامات القائمة (راجع مرجع CSS).

مطلوب ظهور قائمة المهام رقم 7.3.1

7.3.2 ادرس رمز القائمة المنسدلة التالي ثم اكتبه بنفسك.

7.3.3 ادرس رمز القائمة المنسدلة الرأسية المتعددة المستويات التالي ثم اكتبه بنفسك.

7.3.4 ادرس الكود التالي للحصول على قائمة منسدلة أفقية سلسة، ثم اكتبه بنفسك.

إنشاء موقع تعليمي رقم 1

7.4.1 أولاً قم بالاطلاع على صفحات الموقع التعليمي وتنزيل الكود الخاص به ودراسة الكود الخاص به بعناية، ثم قم بتصميم الموقع بنفسك (بدون تعليقات، كود فقط).

تصميم الموقع التعليمي رقم 2

7.5.1 للحصول على تدريب إضافي في تخطيط موقع الويب، قم بتنزيل مثال تدريبي آخر لموقع ما واستخدم التعليقات لدراسة الكود الخاص به، وبعد ذلك، باستخدام تخطيط جاهز وقوالب رسومية، قم بتصميم الموقع بنفسك.
حاول إنشاء ورقة أنماط للحصول على دقة عالية بنفسك. إذا كنت تعمل على جهاز كمبيوتر محمول، فمن أجل محاكاة دقة أعلى، قم بتغيير الدقة في استعلامات الوسائط من 1366 بكسل، على سبيل المثال، إلى 1266 بكسل، بحيث تعمل ورقة الأنماط الخاصة بدقة الشاشة الكبيرة. عند إنشاء ورقة أنماط، استخدم عامل تغيير الحجم 1.3. ومن ثم انظر إلى نتيجة العرض في المتصفح واضبطها.
يمكن تغيير أحجام الصور إما في محرر الرسومات أو تمديدها باستخدام خاصية CSS المناسبة (انظر المثال والمرجع).

فقط للمشتركين

فقط للمشتركين

فقط للمشتركين

فقط للمشتركين

فقط للمشتركين

فقط للمشتركين

التطوير المنهجي للأعمال العملية في علوم الكمبيوتر حول موضوعي "لغة ترميز HTML" و"تقنيات الويب الحديثة" (لطلاب المدارس المتوسطة).

عند إجراء الفصول الدراسية باستخدام هذه التطورات المنهجية، لإنشاء ملفات HTML وCSS، يوصى باستخدام محرر نصوص عادي يدعم تمييز بناء الجملة للغات HTML وCSS، ويفضل أيضًا أن يتضمن القدرة على العمل مع ملفات متعددة في وضع متعدد الصفحات .

على سبيل المثال، برنامج Notepad++ (notepad-plus-plus.org) مناسب لنظام التشغيل Windows. في محرر النصوص Notepad++، لتغليف الأسطر الطويلة، تحتاج إلى تحديد عرض -> فاصل الأسطر من القائمة. يعد برنامج Notepad2 (flos-freeware.ch/notepad2.html) أيضًا محررًا جيدًا للنصوص. ومع ذلك، فهو لا يدعم عملية متعددة الصفحات. يتم ضبط فواصل الأسطر باستخدام الأمر View -> Word Wrap.

1. وثيقة HTML. الفقرات، فواصل الأسطر، المحاذاة

1 هيكل مستند HTML

يتكون الكود المصدري لمستند HTML من العلامات والمحتوى.

يمكن أن تحتوي العلامات على سمات مختلفة ذات خصائص محددة. في الإصدارات الأقدم من لغة HTML، تم استخدام السمات لتصميم المحتوى: تحديد حجم الخط ولونه، ومحاذاة النص، وتعيين المسافات البادئة، والمزيد. في الوقت الحاضر، يتم عادةً تنسيق محتوى مستند HTML باستخدام CSS.

يتضمن أي مستند HTML دائمًا حاويات html ورأس ونص متداخلة داخل بعضها البعض على النحو التالي:

المهمة 1. قم بإنشاء ملف وإعطائه البنية الموضحة أعلاه. احفظها.

تحتوي حاوية الرأس عادةً على حاوية عنوان، يتم عرض محتوياتها في عنوان نافذة المستند.

المهمة 2. أضف حاوية عنوان إلى المستند:

احفظ الملف وافتحه في متصفحك. ابحث عن محتوى العنوان الذي أدخلته.

يتم عرض محتويات الجسم في نافذة المتصفح.

يتم استخدام علامة الحاوية لترميز الفقرات. تسمح لك علامة b واحدة بالانتقال إلى سطر جديد دون إنشاء فقرة جديدة، على سبيل المثال. يخلق فاصل أسطر.

المهمة 3. أضف المحتوى التالي إلى حاوية النص:

إن ظهور أجهزة الكمبيوتر الشخصية في أوائل السبعينيات (بالتوازي مع التطور التدريجي لأجهزة الكمبيوتر الكبيرة) يعتبر الآن بمثابة انقلاب ثوري. ويقارن حجم تأثيرها على المجتمع البشري بعواقب اختراع الطباعة.

يوجد بالفعل ملايين ومليارات من أجهزة الكمبيوتر في العالم.
ويستمر عددهم في النمو بشكل مطرد!

يحفظ. قم بتحديث المستند في متصفحك. لاحظ عدد الفقرات التي ترى فيها فاصل الأسطر.

2 محاذاة الفقرة. موضة قديمة

يتم تحديد محاذاة الفقرة من خلال القيم لليسار (يسار)، واليمين (يمين)، والوسط (الوسط)، والضبط (المبرر). يمكن تعيين هذه القيم لخاصية المحاذاة، وهي صالحة للعديد من العلامات.

لذلك، على سبيل المثال، يمكن تعيين محاذاة الفقرة المركزية كما يلي:

المهمة 4. بالنسبة للفقرات التي تم إنشاؤها مسبقًا، قم بتعيين المحاذاة لتكون مبررة (للفقرة الأولى) ومحاذاة لليمين (للثانية).