☰ Year plan · Communication Technology (Arabic)

تصميم صفحة ويب

Week 8 · Theme 1, Lesson 8 Website Design · 3 lessons
1

الوسوم: بداية ومحتوى ونهاية

ICT P6 Term 1, Theme 1: pp. 38–41
الهدفأشرح أن وسم HTML له وسم بداية ومحتوى ووسم نهاية.
كلمات جديدة
وسم · كلمة بين قوسين زاويتين تقول للمتصفح ما هذا الجزء من الصفحةوسم البداية · الوسم الذي يبدأ الجزء، مثل <p>وسم النهاية · الوسم الذي ينهي الجزء، وفيه شرطة مائلة، مثل </p>المحتوى · الكلمات أو الصور بين الوسمين
الشرح

تتكون صفحة الويب من أجزاء، وكل جزء يُحاط بوسم. وللوسم ثلاث قطع. الأولى وسم البداية، مثل <p>، ويقول «تبدأ هنا فقرة». والثانية المحتوى، وهو النص الذي يقرؤه الناس. والثالثة وسم النهاية، مثل </p>، ويشبه وسم البداية لكن فيه شرطة مائلة ويقول «تنتهي الفقرة هنا». فكّر في طرد: البطاقة الأولى تقول «افتح من هنا»، والشيء بداخله، والبطاقة الأخيرة تقول «نهاية الطرد». يقرأ المتصفح الوسوم ليقرر كيف يعرض المحتوى، لكنه لا يعرض الوسوم نفسها. وإذا غاب وسم النهاية فقد يواصل المتصفح ويجعل بقية الصفحة تبدو خاطئة، مثل طرد بلا نهاية. ويمكن للوسوم أن تحتوي وسومًا أخرى: فكلمة بخط عريض قد تكون داخل فقرة.

الجزءمثالالعمل
وسم البداية<p>يبدأ الفقرة
المحتوىKites fly high.النص الذي يقرؤه الناس
وسم النهاية</p>ينهي الفقرة
أمثلة محلولة
Html
1<p>Kites fly high.</p>
Output
Kites fly high.
هذه فقرة. وسم البداية p والمحتوى هو الجملة ووسم النهاية فيه شرطة مائلة. يعرض المتصفح الجملة فقط.
Html
1<p>This is <b>very</b> important.</p>
Output
This is very important.
تريد حبيبة أن تكون كلمة واحدة قوية. تضع الوسم b حول الكلمة. يعرض المتصفح الكلمة بحروف عريضة. والوسوم داخل وسمي الفقرة.
Html
1<h1>Camels
2<p>They live in deserts.</p>
Output
[big text for everything after the heading]
تنسى ملاك إغلاق العنوان. تبدو صفحتها غريبة لأن كل ما بعده كبير. والحل أن تضيف وسم النهاية بعد الكلمة.
نشاط الفصل

محقق الوسوم. اكتب على الورق ثلاثة أسطر قصيرة من HTML تستخدم كلها الوسم p: جملة عن النيل، وجملة عن مدرستك، وجملة عن طعامك المفضل. ضع دائرة زرقاء حول كل وسم بداية ودائرة حمراء حول كل وسم نهاية. تبادل مع زميل وابحثا عن شرطة مائلة ناقصة.

تدرّب
1
ما الأجزاء الثلاثة للوسم؟
2
ماذا تدل الشرطة المائلة في وسم النهاية؟
3
ماذا سيعرض المتصفح لهذه الشفرة؟
Html
1<p>Hello Egypt</p>
4
ماذا قد يحدث إذا نسيت وسم النهاية؟