☰ خطة العام · تكنولوجيا المعلومات والاتصالات (بالإنجليزية)

Term 1 review and project

الأسبوع 15 · مراجعة الوحدتين ١ و٢ ومشروع الفصل (من إعداد Darslab) · 3 دروس
2

Review: design, HTML and CSS

ICT Prep 2 Term 1, Units 1–2: Review
GoalReview UX and UI, HTML and CSS and safe prompts with new mixed tasks.
New words
UX or UI · use and ease, or look and styleCSS rule · selector, then property and value in bracesclosing tag · the tag that ends an elementspecific prompt · a command that says what, for whom, what to show and how it looks
Explanation

Unit 2 has two halves. Design: UX is how easy and pleasant the use is (navigation, clarity, consistency); UI is how the product looks (colours, fonts, layout, button size); give reasons such as contrast and calm. Web pages: HTML is the content in boxes (container, header, section, footer); CSS is the looks in rules, selector { property: value; }, kept in one external file that many pages link to; padding is inside the box and margin is outside. AI websites: write clear, specific prompts on paper, check the AI’s facts, use contact forms and no personal data, ask a teacher and parents before publishing. Try the tasks: sort comments, read code, find the mistake, improve a prompt and sort the safe and unsafe choices.

Comment or choiceUX or UI / safe or not
“I cannot find the timetable”UX
“the letters are tiny”UI
a contact form on the pagesafe
a real phone number on a public pagenot safe
Worked examples
Css
1header {
2  background-color: darkgreen;
3  color: white;
4}
5.container {
6  width: 80%;
7  margin: auto;
8}
9h2 {
10  border-bottom: 2px solid darkgreen;
11}
Read the invented rules and page. The header is dark green with white letters. The container is 80% wide and centred. Each h2 has a thin dark green line under it. The page shows the club name as an h1 and one section with an h2 and a paragraph.
Css
1section {
2  padding: 10px
3  color: dark green;
4}
Find the two mistakes in the code: a semicolon is missing after 10px and the colour name dark green has a space. Fix them and then improve a prompt: the vague “a nice site” becomes “a simple site for a school Garden Club (example) with three pages and a contact form, in dark green and white”.
Class activity

Make a second mixed sheet: write one UX comment and one UI comment, one CSS rule with a mistake for a friend to find, and one vague prompt for a friend to improve. Include one safe and one unsafe choice for a club page. Swap and check.

Practice
1
Sort: “the colours clash” and “it takes too many taps”.
2
In the rules, what does the container’s margin: auto do?
3
Is padding inside or outside the box?
4
Which is safe on a club page: a contact form or a home address?