☰ Year plan · Communication Technology (Arabic)

تصميم صفحة الويب: الأجزاء ولغة الترميز ومشاركة قصة

Week 29 · Theme 4, Lesson 8 Web Design Principles · 3 lessons
2

لغة الترميز: أخبر المتصفح ماذا يعرض

ICT P5 Term 2, Theme 4: pp. 74–77
الهدفأشرح ما لغة الترميز HTML وأقرأ وسومًا بسيطة جدًّا.
كلمات جديدة
لغة الترميز HTML · لغة ترميز تخبر المتصفح ماذا يعرضوسم · رمز قصير بين قوسين زاويين مثل رمز العنوانمتصفح · برنامج يعرض صفحات الويبترميز · علامات تضاف إلى النص تقول كيف يجب أن يظهر
الشرح

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

Html
1<h1>Save water</h1>
2<h2>Why?</h2>
3<p>A tap can waste 20 glasses a day.</p>
4<img src="tap.png">
Output
Save water
Why?
A tap can waste ٢٠ glasses a day.
[a picture of a tap]
أمثلة محلولة
الوسميصنع
h1أكبر عنوان
h2عنوانًا أصغر
pفقرة
imgصورة
انظر إلى الرمز: الوسم h1 يصنع أكبر عنوان وهو «Save water». والوسم h2 يصنع عنوانًا أصغر. والوسم p يصنع فقرة نص. والوسم img يضع صورة من ملف اسمه tap.png.
الوسوم تفتح وتغلقالزائر يرى النص
يرى سيف <p>Hello</p>. الوسم الأول يفتح فقرة، وكلمة Hello هي ما يظهر في الصفحة، والوسم الأخير، وفيه شرطة مائلة، يغلق الفقرة. والزائر يرى «Hello» فقط ولا يرى الوسوم.
معالج الكلماتكتابة الوسومالمتصفح يعرضها
لا تستطيع مريم كتابة الرموز. فتكتب صفحتها في معالج الكلمات وتحفظها كصفحة ويب. فيكتب البرنامج الوسوم. وتستطيع فتح الملف في المتصفح ورؤية صفحتها.
نشاط الفصل

اقرأ واكتب HTML بسيطة على الورق. ١. ارسم الصفحة التي يصنعها هذا الرمز: <h1>My cat</h1> <p>She sleeps all day.</p> <img src=cat.png>. ٢. اكتب HTML لصفحة عنوانها «My school» وفيها فقرة تقول «We learn every day.» واستخدم وسم افتتاح ووسم إغلاق لكل منهما. ٣. قل لزميل لماذا يحتاج المتصفح إلى الوسوم. لا تحتاج إلى حاسوب لهذا.

تدرّب
1
ماذا تقول HTML للمتصفح؟
2
كيف تعرف أن الوسم وسم إغلاق؟
3
أي وسم يصنع أكبر عنوان في رمز الدرس؟
4
كيف تصنع صفحة ويب دون كتابة أي وسم؟