HTML & CSS Handout · ⁨ورقة عمل HTML & CSS⁩

EN 中文 Español 中文 Español Français Português 한국어 日本語 Tiếng Việt ไทย Bahasa Indonesia עברית العربية Русский

Download reference · ⁨تحميل المرجع⁩ 2-up · ⁨مستوى 2⁩

1 HTML basics · ⁨أساسيات HTML⁩
reference.pdf.ar 2-up · ⁨مستوى 2⁩
1.1
صفحتك الأولى

English
HTML 超文本标记语言 describes a web page with tags 标签. A tag is a word in angle brackets, like <p>. Most come in pairs — an opening tag <p> and a closing tag </p> wrap some content. A tag plus its content is an element 元素.

The browser draws whatever is between the tags.

A tag you forget to close, or spell wrong, may not show correctly.

العربية
يصف HTML صفحة ويب باستخدام وسم (tag). الوسم هو كلمة بين قوسين زاويين، مثل <p>. معظمها يأتي في أزواج — وسم افتتاحي <p> ووسم إغلاق </p> يحيطان بمحتوى معين. الوسم بالإضافة إلى محتواه يُسمى عنصرًا (element).

<p>Hello, world!</p> <p>This is my first web page.</p>

المتصفح يرسم أي شيء يوجد بين الوسوم.

إذا نسيت إغلاق وسم أو كتبه بشكل خاطئ، قد لا يظهر بشكل صحيح.

عنصر واحد = وسم افتتاحي + محتوى + وسم إغلاق
1.2
العناوين والفقرات

English
Headings 标题 run from <h1> (biggest) down to <h6> (smallest). A paragraph 段落 is <p>. Use exactly one <h1> for the page's main title.

العربية
تتراوح العناوين من <h1> (الأكبر) نزولًا إلى <h6> (الأصغر). الفقرة هي <p>. استخدم exactly one <h1> للعنوان الرئيسي للصفحة.

<h1>My Blog</h1> <h2>About me</h2> <p>I am learning to build web pages.</p>
1.3
تنسيق النص

English
Make text bold 加粗 with <strong> and italic 斜体 with <em>. A line break 换行 is <br> — it has no closing tag.

Common mistakes

Most tags come in pairs — <p>...</p>. Forgetting the closing tag breaks the layout below it.

The tag goes in angle brackets; the text you see goes between the opening and closing tags.

Headings run <h1> (biggest) to <h6> — do not pick a heading just for its size.

العربية
اجعل النص عريضًا باستخدام <strong> ومائلًا باستخدام <em>. السطر الجديد هو <br> — وليس له وسم إغلاق.

<p><strong>Warning:</strong> read this carefully.</p> <p>First line<br>second line</p> <p>You can <em>emphasise</em> any word.</p>

أخطاء شائعة

تأتي معظم الوسوم في أزواج — <p>...</p>. نسيان وسم الإغلاق يُخلّ بهيكلية ما تحته.

يدخل الوسم بين قوسين زاويين؛ النص الذي تراه يكون بين وسم الافتتاح والإغلاق.

العناوين تتراوح من <h1> (الأكبر) إلى <h6> — لا تختر عنوانًا لمجرد حجمه.
2 Lists, links & images · ⁨القوائم والروابط والصور⁩
reference.pdf.ar 2-up · ⁨مستوى 2⁩
2.1
القوائم

English
An unordered list 无序列表 <ul> shows bullets; an ordered list 有序列表 <ol> shows numbers. Each list item 列表项 is an <li>.

العربية
القائمة غير المرتبة <ul> تظهر نقاطًا؛ القائمة المرتبة <ol> تظهر أرقامًا. كل عنصر قائمة هو ⟨<li>⟩.

<ul> <li>Apples</li> <li>Oranges</li> </ul> <ol> <li>Wake up</li> <li>Go to school</li> </ol>

ul للنقاط، ol للأرقام؛ كل عنصر هو li
2.2
الروابط

English
A link 链接 is an anchor <a>. Its href attribute 属性 holds the address it points to.

Add target="_blank" to open the link in a new tab.

العربية
الرابط هو ancora <a>. خاصيته href تحتوي على العنوان الذي يشير إليه.

<a href="https://example.com">Visit Example</a> <br> <a href="page2.html">Go to the next page</a>

أضف target="_blank" لفتح الرابط في تبويب جديد.
2.3
الصور

English
An image 图片 is <img> — it has no closing tag. src is the picture's address; alt is text shown if the image cannot load (and read aloud to blind users).

Common mistakes

An image needs src (the file) and alt (a description); a link needs href.

<img> has no separate closing tag.

A broken src path shows nothing — check the file name and folder.

العربية
الصورة هي <img> — وليس لها وسم إغلاق. src هو عنوان الصورة؛ alt هو نص يظهر إذا لم تتمكن الصورة من التحميل (ويُقرأ بصوت عالٍ للمستخدمين المكفوفين).

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bitmap_VS_SVG.svg/120px-Bitmap_VS_SVG.svg.png" alt="bitmap versus vector" width="120"> <p>If the picture is missing, the alt text shows instead.</p>

أخطاء شائعة

تحتاج الصورة إلى src (الملف) وalt (وصف)؛ يحتاج الرابط إلى href.

لا يوجد لـ <img> وسم إغلاق منفصل.

المسار المعطّل لـ src لا يعرض شيئًا — تحقق من اسم الملف والمجلد.
3 Page structure · ⁨هيكل الصفحة⁩
reference.pdf.ar 2-up · ⁨مستوى 2⁩
3.1
صفحة كاملة

English
A real page has a fixed skeleton 骨架. <!DOCTYPE html> says it is HTML5. Everything sits inside <html>. The <head> holds information about the page; the <body> holds what you see.

The <title> shows in the browser tab.

<meta charset="utf-8"> lets the page show any language.

العربية
الصفحة الحقيقية لها هيكل ثابت. <!DOCTYPE html> يقول إنه HTML5. كل شيء يقع داخل <html>. يحتوي <head> على معلومات الصفحة؛ يحتوي <body> على ما تراه.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Page</title> </head> <body> <h1>Welcome</h1> <p>This is a complete page.</p> </body> </html>

الصفحة شجرة: الـ head يصف الصفحة، الـ body يحتوي على ما تراه

يظهر <title> في تبويب المتصفح.

<meta charset="utf-8"> يسمح للصفحة بإظهار أي لغة.
3.2
التعليقات والتداخل

English
A comment 注释  is a note the browser ignores. Tags nest 嵌套 inside one another; indent 缩进 each level so the structure stays clear. Close tags in the reverse order you opened them.

Common mistakes

Tags must nest, not overlap: <b><i>text</i></b>, never <b><i>text</b></i>.

A page needs <html>, a <head> (for the title and links) and a <body> (for what you see).

A comment is ; the browser ignores it.

العربية
التعليق  هو ملاحظة يتجاهلها المتصفح. تتداخل الوسوم داخل بعضها البعض؛ قم بتبسيط كل مستوى ليظل الهيكل واضحًا. أغلق الوسوم بالترتيب المعاكس الذي فتحتها.

 <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> </nav>

أخطاء شائعة

يجب أن تتداخل الوسمات ولا تتقاطع: استخدم <b><i>text</i></b>، لا تستخدم <b><i>text</b></i>.

تحتاج الصفحة إلى <html>، و<head> (لعنوان الروابط) و<body> (لما تراه).

التعليق هو ؛ يتجاهله المتصفح.
4 Tables & forms · ⁨الجداول والنماذج⁩
reference.pdf.ar 2-up · ⁨مستوى 2⁩
4.1
الجداول

English
A table 表格 <table> is built from rows <tr>. A header cell 单元格 is <th> (bold, centred); a normal data cell is <td>.

العربية
جدول <table> يُبنى من صفوف <tr>. خلية الترويسة هي <th> (عريضة، مركزة)؛ خلية البيانات العادية هي <td>.

<table border="1" cellpadding="6"> <tr><th>Name</th><th>Score</th></tr> <tr><td>Mei</td><td>88</td></tr> <tr><td>Sam</td><td>71</td></tr> </table>

table → tr rows → th/td cells
4.2
النماذج

English
A form 表单 <form> collects input from the user. An <input> is a box; a <label> names it; a <button> submits 提交 it.

Common <input> type values: text, number, email, password, checkbox.

Common mistakes

Table cells go inside rows: a <tr> holds the <td> cells.

Every form input should have a matching <label> so it is clear and accessible.

A button inside a form submits it by default — set type="button" if you do not want that.

العربية
النموذج <form> يجمع المدخلات من المستخدم. الـ <input> هو صندوق؛ الـ <label> يسميه؛ الـ <button> يرسله.

<form> <label>Name: <input type="text"></label> <br><br> <label>Age: <input type="number"></label> <br><br> <button type="submit">Send</button> </form>

قيم <input> الشائعة: type، text، number، email، password، checkbox.

أخطاء شائعة

خلايا الجدول تقع داخل الصفوف: يحتوي ⟨<tr>⟩ على خلايا ⟨<td>⟩.

يجب أن يكون لكل إدخال نموذج ⟨<label>⟩ مطابق ليكون واضحًا وسهل الوصول إليه.

الزر داخل النموذج يرسله بشكل افتراضي — ضع type="button" إذا لم تكن تريد ذلك.
5 Boxes & sections · ⁨الصناديق والأقسام⁩
reference.pdf.ar 2-up · ⁨مستوى 2⁩
5.1
div, span & الأقسام الدلالية

English
A <div> is a generic block 块级 box that groups content on its own lines. A <span> is a generic inline 行内 box inside a line of text. You use them to group things so you can style or position them.

Semantic 语义 tags describe their role, which helps screen readers and search engines. Prefer them over plain <div> where they fit: <header>, <nav>, <main>, <section>, <article>, <footer>.

Common mistakes

<div> is a block (starts a new line); <span> is inline (stays in the text).

Use semantic tags like <header>, <nav> and <footer> where they fit, not <div> for everything.

Do not use a tag just for its default look — style it with CSS instead.

العربية
العنصر <div> هو صندوق كتلة عام يجمع المحتوى في أسطر مستقلة. العنصر <span> هو صندوق مضمن (inline) داخل سطر من النص. تستخدمهما لتجميع العناصر حتى تتمكن من تنسيقها أو وضعها.

<div> <span>Price:</span> <span>$9.99</span> </div> <div> <span>Stock:</span> <span>in stock</span> </div>

تصف الوسمات الدلالية دورها، مما يساعد قارئات الشاشة ومحركات البحث. يفضل استخدامها على <div> العادية حيثما يناسب: <header>، <nav>، <main>، <section>، <article>، <footer>.

<header><h1>My Site</h1></header> <main> <section> <h2>News</h2> <p>Today we launched the site.</p> </section> </main> <footer>© 2026 My Site</footer>

أخطاء شائعة

<div> هو عنصر كتلة (يبدأ سطرًا جديدًا)؛ <span> هو عنصر مضمن (يبقى داخل النص).

استخدم الوسمات الدلالية مثل <header>، <nav> و <footer> حيثما يناسب، وليس <div> لكل شيء.

لا تستخدم وسمًا فقط لمظهره الافتراضي — قم بتنسيقه باستخدام CSS بدلاً من ذلك.

div هو صندوق كتلة؛ span يحيط بنص مدمج

6 CSS basics · ⁨أساسيات CSS⁩

reference.pdf.ar 2-up · ⁨مستوى 2⁩

6.1

إضافة CSS

English

CSS 层叠样式表 styles HTML. The simplest way is a <style> block in the <head> (a bigger site uses a separate .css file with <link>). A CSS rule 规则 has a selector 选择器, then { property: value; } pairs called declarations 声明.

العربية

CSS ينسق HTML. أبسط طريقة هي استخدام كتلة <style> داخل <head> (الموقع الأكبر يستخدم ملف .css منفصل يحتوي على <link>). تتكون قاعدة CSS من محدد، ثم أزواج { property: value; } تسمى التصريحات.

<style>
  p  { color: blue; font-size: 18px; }
  h1 { color: darkred; }
</style>
<h1>Styled heading</h1>
<p>This paragraph is blue.</p>

Link a stylesheet so CSS rules style HTML elements

6.2

المحددات: class & id

English

A class 类 styles many elements: add class="..." in HTML and write .name in CSS. An id 标识符 styles ONE element: id="..." and #name.

The selectors you will meet most, in one place:

Selector	Chooses
`p`	every `<p>` element
`.note`	everything with `class="note"`
`#title`	the one element with `id="title"`
`h1, h2`	several selectors at once
`nav a`	every `<a>` inside a `<nav>`
`.btn:hover`	one state of an element (see topic 10)

Common mistakes

A class selector starts with . and an id selector with #.
Link the stylesheet in the <head>, or put rules inside a <style> block.
A class can be reused on many elements; an id should appear once per page.

العربية

الـ class ينسق عناصر متعددة: أضف class="..." في HTML واكتب .name في CSS. الـ id ينسق عنصرًا واحدًا فقط: id="..." و #name.

<style>
  .note  { color: green; }
  #title { font-size: 24px; }
</style>
<h1 id="title">Welcome</h1>
<p class="note">First note.</p>
<p class="note">Second note.</p>

المحددات التي ستقابلها أكثر من مرة، في مكان واحد:

المحدد	يختار
`p`	كل عنصر `<p>`
`.note`	كل شيء داخل `class="note"`
`#title`	العنصر الوحيد الذي يحتوي على `id="title"`
`h1, h2`	عدة محددات في وقت واحد
`nav a`	كل `<a>` داخل `<nav>`
`.btn:hover`	حالة واحدة من العنصر (انظر الموضوع 10)

أخطاء شائعة

يبدأ محدد class بـ . ويبدأ محدد id بـ #.
اربط ملف التنسيق داخل <head>، أو ضع القواعد داخل كتلة <style>.
يمكن إعادة استخدام class على عناصر متعددة؛ يجب أن يظهر id مرة واحدة فقط في الصفحة.

7 Colours & text · ⁨الألوان والنص⁩
reference.pdf.ar 2-up · ⁨مستوى 2⁩
7.1
الألوان والخلفيات

English
Set the text colour with color and the background 背景 with background-color. A colour can be a name (red), a hex 十六进制 code (#ff0000), or rgb(255, 0, 0).

العربية
حدد لون النص باستخدام color والخلفية باستخدام background-color. يمكن أن يكون اللون اسمًا (red)، أو رمز سداسي (#ff0000)، أو rgb(255, 0, 0).

<style> body { background-color: #f0f4ff; } .card { background-color: white; color: #1e3a8a; padding: 12px; } </style> <div class="card">A card with its own colours.</div>

CSS colours: named, hex, and rgb()
7.2
تنسيق النص

English
Common text properties: font-size, font-weight (e.g. bold), font-family 字体, text-align 对齐 (left / center / right), and line-height for spacing.

Common mistakes

color sets the text colour; background-color sets the background.

A colour can be a name, a #rrggbb hex code, or rgb(...).

End each declaration inside the braces with a semicolon ; — it separates the property: value pairs (the one after the last declaration is optional). The rule itself ends with the closing brace }.

العربية
خصائص النص الشائعة: font-size، font-weight (مثل bold)، font-family، text-align (left / center / right)، و line-height للمسافة.

<style> h1 { font-family: Arial, sans-serif; text-align: center; } p { font-size: 18px; line-height: 1.6; } </style> <h1>Centered title</h1> <p>Readable paragraph text with comfortable line spacing.</p>

أخطاء شائعة

color يحدد لون النص؛ background-color يحدد الخلفية.

يمكن أن يكون اللون اسمًا، رمزًا سداسيًا #rrggbb، أو rgb(...).

أنهِ كل تصريح داخل الأقواس المعقوفة بنقطة فاصلة ; — تفصل بين أزواج property: value (النقطة الفاصلة بعد آخر تصريح اختيارية). تنتهي القاعدة نفسها بالقوس المعقوف الإغلاق }.
8 The box model · ⁨نموذج الصندوق⁩
reference.pdf.ar 2-up · ⁨مستوى 2⁩
8.1
نموذج الصندوق

English
Every element is a box with four layers, from inside out: the content 内容, the padding 内边距 (space inside the border), the border 边框, and the margin 外边距 (space outside the border).

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

<style> .box { background: #dbeafe; border: 3px solid #2563eb; padding: 16px; margin: 20px; } </style> <div class="box">content + padding + border + margin</div>

نموذج الصندوق: المحتوى، ثم الهامش الداخلي، ثم الإطار، ثم الهامش الخارجي
8.2
الهامش والهامش الداخلي

English
padding adds space inside the border, pushing the content inwards. margin adds space outside, pushing other boxes away. Give one value for all sides, or four (top right bottom left).

العربية
padding يضيف مسافة داخل الإطار، ويدفع المحتوى للداخل. margin يضيف مسافة خارج، ويدفع الصناديق الأخرى بعيدًا. أعطِ قيمة واحدة لجميع الجوانب، أو أربعة (أعلى يمين أسفل يسار).

<style> .a { background: #fde68a; padding: 4px; } .b { background: #bbf7d0; padding: 20px; margin-top: 16px; } </style> <div class="a">tight padding</div> <div class="b">roomy padding</div>
8.3
العرض

English
The display property sets how a box flows. block 块级 takes a whole line; inline 行内 sits within a line of text; none removes the box completely; flex lays the children in a row (next topic).

Common mistakes

Padding is inside the border; margin is the space outside it.

box-sizing: border-box makes the set width include padding and border — often what you want.

display: none hides an element completely; visibility: hidden leaves its space.

العربية
تحديد خاصية display كيفية تدفق الصندوق. block يأخذ سطرًا كاملًا؛ inline يستقر داخل سطر من النص؛ none يزيل الصندوق تمامًا؛ flex يضع الأطفال في صف (الموضوع التالي).

<style> .hidden { display: none; } .chip { display: inline; background: #e0e7ff; padding: 2px 8px; border-radius: 6px; } </style> <p>Visible text. <span class="hidden">(secret)</span> <span class="chip">a chip</span></p>

أخطاء شائعة

الحشو يكون داخل الحدود؛ الهامش هو المساحة الخارجية عنها.

box-sizing: border-box يجعل عرض المجموعة يتضمن الهامش الداخلي والإطار — وهو غالبًا ما تريده.

display: none يخفي العنصر تمامًا؛ visibility: hidden يترك مساحته.
9 Layout · ⁨التخطيط⁩
reference.pdf.ar 2-up · ⁨مستوى 2⁩
9.1
العرض والتوسط

English
Set a box's width. To centre 居中 a block, give it a width and margin: 0 auto — auto shares the leftover space equally on the left and right.

العربية
ضبط هوامش width للصندوق. لتوسيط صندوق كتلي، امنحه عرضًا وmargin: 0 auto — auto يشارك المساحة المتبقية بالتساوي على اليمين واليسار.

<style> .page { width: 300px; margin: 0 auto; background: #e0e7ff; padding: 16px; text-align: center; } </style> <div class="page">A centered, fixed-width page.</div>
9.2
Flexbox

English
Flexbox 弹性布局 lays children out in a row (or a column). Set display: flex on the parent — the container 容器. gap adds space between children; flex: 1 makes them share the width.

العربية
يرتب Flexbox الأطفال في صف (أو عمود). حدد display: flex على الأب — الحاوية. gap يضيف مسافة بين الأطفال؛ flex: 1 يجعلهم يشاركون العرض.

<style> .row { display: flex; gap: 10px; } .row div { background: #93c5fd; padding: 12px; flex: 1; text-align: center; } </style> <div class="row"> <div>One</div> <div>Two</div> <div>Three</div> </div>

يضع حاوية المرونة عناصرها على طول المحور الرئيسي؛ يضيف الفاصل المسافة بينها
9.3
مشروع مصغر: بطاقة الملف الشخصي

English
Combine boxes, colours, text and spacing into one small component 组件.

Common mistakes

Centre a block with a set width using margin: 0 auto.

Flexbox needs display: flex on the CONTAINER, not on the items.

A width in % is relative to the parent, so check the parent's width too.

العربية
دمج الصناديق والألوان والنص والمسافات في مكون صغير واحد.

<style> .card { width: 240px; margin: 0 auto; border: 1px solid #cbd5e1; border-radius: 12px; padding: 16px; font-family: sans-serif; } .card h2 { margin: 0; color: #1e3a8a; } .card .role { color: #64748b; margin: 4px 0 8px; } </style> <div class="card"> <h2>Mei Chen</h2> <p class="role">Student · Grade 11</p> <p>Loves maths and building web pages.</p> </div>

أخطاء شائعة

وسّط صندوق كتلي بعرض محدد باستخدام margin: 0 auto.

يحتاج Flexbox إلى display: flex على الحاوية، وليس على العناصر.

العرض في % نسبي للأب، لذا تحقق أيضًا من عرض الأب.
10 Going further · ⁨الانتقال إلى ما هو أبعد⁩
reference.pdf.ar 2-up · ⁨مستوى 2⁩
10.1
Hover & الفئات الكاذبة

English
A pseudo-class 伪类 styles an element in one particular state. :hover applies while the mouse is over the element. Add transition 过渡 so the change happens smoothly instead of jumping.

Other useful pseudo-classes: :focus (an input the user clicked into) and :first-child.

العربية
الفئة الكاذبة تنسق العنصر في حالة معينة. :hover يُطبق بينما يكون الماوس فوق العنصر. أضف transition حتى يحدث التغيير بسلاسة بدلاً من القفز.

<style> .btn { background: #2563eb; color: white; padding: 10px 18px; border: none; border-radius: 8px; font-size: 16px; transition: background 0.3s; } .btn:hover { background: #16a34a; } </style> <button class="btn">Hover me</button>

فئات كاذبة أخرى مفيدة: :focus (مدخل نقر عليه المستخدم) و :first-child.

:hover يصمم العنصر بينما المؤشر فوقه
10.2
التموضع

English
Positioning 定位 moves a box away from its normal place. relative nudges the box (and makes it the anchor 锚点 for its children); absolute places a box exactly, measured from the nearest positioned parent; fixed pins it to the screen even when the page scrolls.

top, right, bottom, left say how far to move — they only work on positioned boxes.

العربية
التموضع يحرك الصندوق بعيدًا عن مكانه الطبيعي. relative يدفع الصندوق قليلاً (ويجعله المرجع لأطفاله)؛ absolute يضع صندوقًا بدقة، مقاسًا من أقرب أب مُوضع؛ fixed يثبته على الشاشة حتى عند التمرير.

<style> .card { position: relative; width: 260px; height: 90px; background: #dbeafe; border-radius: 10px; padding: 12px; } .badge { position: absolute; top: -10px; right: -10px; background: #dc2626; color: white; padding: 4px 10px; border-radius: 999px; font-size: 13px; } </style> <div class="card"> A product card <span class="badge">NEW</span> </div>

top، right، bottom، left تحدد مقدار التحرك — تعمل فقط على الصناديق المُوضعة.
10.3
استعلامات الوسائط والتصميم المتجاوب

English
A responsive 响应式 page adapts to the screen size. A media query 媒体查询 applies its rules only while a condition about the screen holds, such as max-width.

Design mobile-first 移动优先: write the phone styles first, then add @media (min-width: ...) rules for bigger screens.

Percent widths and max-width let boxes shrink with the screen.

Common mistakes

:hover sticks to its selector with no space: .btn:hover, not .btn :hover.

position: absolute is measured from the nearest positioned parent — give that parent position: relative.

A media query wraps whole rules: @media (max-width: 600px) { .a { ... } }.

العربية
تتكيف الصفحة المتجاوبة مع حجم الشاشة. يطبق استعلام الوسائد قواعده فقط طالما كان شرط متعلق بالشاشة قائمًا، مثل max-width.

<style> .banner { background: #2563eb; color: white; padding: 16px; } @media (max-width: 600px) { .banner { background: #16a34a; } /* narrow screens turn green */ } </style> <div class="banner">Resize the window: blue when wide, green when narrow.</div>

صمم للموبايل أولاً: اكتب تنسيقات الهاتف أولاً، ثم أضف قواعد @media (min-width: ...) للشاشات الأكبر.

أعرض النسب المئوية وmax-width تسمح للصناديق بالتقليص مع الشاشة.

أخطاء شائعة

:hover يلتصق باختياره بدون مسافة: .btn:hover، وليس .btn :hover.

position: absolute يُحسب من أقرب أصل مُحدد — امنح ذلك الأصل position: relative.

استعلام الوسائط يحيط بقواعد كاملة: @media (max-width: 600px) { .a { ... } }.