مواد الطلاب بتنسيق HTML

إنّ HTML هي العمود الفقري لصفحة الويب. في هذه الوحدة، سنلقي نظرة على كيفية إنشاء بنية قوية وهادفة لصفحة الويب.

الأفكار الرئيسية المستخلصة

  • فهم الطلاب بنية ملف HTML.
  • يعرف الطلاب كيفية استخدام العلامات الشائعة لإنشاء صفحة ويب.

ما المقصود بـ HTML؟

إنّ رمز HTML قصير للغة ترميز النص التشعّبي. وهي رمز نستخدمها:

  • إنشاء المستندات التي يتم تخزينها على شبكة الويب العالمية ويتم عرضها في متصفح.
  • لتوفير بنية أساسية لصفحتنا على الويب، وهي عظام صفحة الويب.
  • ضمان التحميل المناسب للنصوص والصور حتى يتم عرضها في المتصفح.

متى نستخدم HTML؟

تتم كتابة كل صفحة ويب تشاهدها على الويب على مستوى العالم باستخدام رمز HTML. الأزرار والصور والنماذج وأقسام النص - هي جميع العناصر التي يتم إنشاؤها باستخدام HTML.

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

استخدام HTML عمليًا

في صميم HTML، العناصر هي العناصر. يتم إنشاء العناصر باستخدام العلامات.

تتضمّن معظم العناصر علامة افتتاح وعلامة إغلاق:

<!-- opening tag -->
<p>

<!-- closing tag -->
</p>

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

<p>The content that you write here will be seen on the web page</p>

<section>
  <p>This text is inside a paragraph within a section.</p>
</section>

يتم إنشاء بعض محتوى HTML باستخدام علامات الإغلاق الذاتي التي لا تحتاج إلى علامة إغلاق إضافية:

<img />
<link />

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

أجزاء أحد عناصر HTML

مثال HTML

سيتم عرض هذا الرمز في متصفّح وسيشبه الصورة أدناه.

هذا الرمز...

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>HTML Example</title>
</head>
<body>
  <h1>My Day In The Garden</h1>
  <section>
    <h2>Flora</h2>
    <p>I spent the morning drawing some of the daffodils that
    are inbloom.</p>
    <p>I picked a few tulips to put in a vase in the dining
    room.</p>
  </section>
  <section>
    <h2>Fauna</h2>
    <p>Today I spotted that hummingbird again, buzzing around
    the newly blooming tree.</p>
    <img
    src="https://media.gettyimages.com/photos/magentathroated-woodstar-feeding-from-flowers-picture-id853369596"
    alt="hummingbird"/>
  </section>
</body>

... يجعل صفحة الويب هذه

مرجع HTML

التأطير

السياق &الغرض

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

يمكنك اعتبار HTML أنّه الهيكل العظمي لصفحة الويب، فهو يوفّر البنية والمحتوى، بينما يوفّر JavaScript وcss التفاعل والنمط.

أهداف التعلُّم

سيتمكن الطلاب من

  • إنشاء ملف HTML وفتحه في أداة التعديل والمتصفح
  • إعداد ملف HTML بالبنية المناسبة
  • قائمة ببعض العلامات الشائعة واستخدامها لإضافة بنية ومحتوى إلى مواقعهم الإلكترونية

البدء

تأطير القسم والغرض منه

  • تتم كتابة HTML داخل الملفات بامتداد .html.
  • ويمكنك منح ملفات html أي اسم تريده، إلا أن index.html هو الاسم الأكثر شيوعًا للصفحة المقصودة ما لم يكن لمطوّر البرامج سبب لإعداد الخادم بخلاف ذلك.
# creating an html file on the command line
touch index.html
# opening your html file in your browser
open index.html

التحدّيات البسيطة

  1. أنشئ 3 ملفات HTML إضافية بأي أسماء تريدها.
  2. افتح أحد الملفات في محرِّر النصوص والمتصفِّح.

بنية صفحة HTML

تأطير القسم والغرض منه

يجب أن يبدأ مستند HTML بالبنية نفسها دائمًا:

  • العلامة DOCTYPE خاصة ولا يتم إغلاقها. وهي أيضًا العلامة الوحيدة التي يمكن أن تحتوي على قيم غير أبجدية رقمية (أحرف/أرقام) فيها.
  • يتضمّن <head> معلومات حول موقعك الإلكتروني، وليس المحتوى الفعلي الذي سيظهر على الصفحة.
  • يتضمّن <body> كل محتوى صفحتك الذي سيظهر فعليًا على الشاشة.
  • يجب وضع العلامات التي ستستخدمها لإنشاء بنية صفحتك بين علامات <body>.
  • بين علامتي الفتح والإنهاء، نُدرِج النص أو "content" للعنصر. ستظهر النتيجة النهائية على النحو التالي: <example-tag>Content Goes in here</example-tag>. ويمكن أيضًا وضع العلامات داخل علامات أخرى.
  • وتجدر الإشارة إلى أنه عند وضع علامة داخل علامة أخرى، يجب إضافة مسافة بادئة للعلامة الجديدة للإشارة إلى أنها علامة فرعية خاصة بالعلامة الرئيسية.

مفردات

  • Elements (العناصر) - العناصر (مثل الصور والفقرات والعناوين) التي تم إنشاؤها باستخدام رمز HTML.
  • tags - وحدات من الرمز تشير إلى مكان بدء بعض العناصر وانتهائها.
  • child - تم تضمين عناصر داخل INSIDE أخرى.
  • parent - العناصر التي تحتوي على عناصر أخرى.

أمثلة HTML

ملاحظة: إليك مجرد مثال كمرجع، ولا تحتاج إلى فهم كل هذه التفاصيل في الحال، ولكن من المفيد الاطلاع على التنسيق الصحيح لشكل HTML.

<!-- Standard tag setup of an HTML document  -->
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my
    interests.</p>
  </section>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>
<!-- Nested elements  -->
<section>
  <p>I am the text that will show up on your website.</p>
</section>
<!-- The <section> is the parent element -->
<!-- The <p> is the child element -->

التحدّيات البسيطة

  1. افتح أحد الملفات التي أنشأتها وأضِف البنية الأساسية لعلامة HTML.
  2. يمكنك إعداد نص HTML لعرض شجرة عائلتك (أو شجرة العائلة لشخص آخر). استخدِم علامة section للاحتفاظ بمجموعة عائلة. استخدِم علامة p للاحتفاظ بأحد أفراد العائلة. العائلات معقّدة، ولكن مثال على ذلك:
<section>Jetson Family
  <div>George and Jane
    <p>Judy</p>
    <p>Elroy</p>
  </div>
  <p>Rosie the robot</p>
  <p>Astro the dog</p>
</section>

<!-- In this example, Judy and Elroy are the children of Jane and George. -->

العلامات الشائعة

تأطير القسم والغرض منه

بوجه عام، لا ننشئ أنواعًا خاصة من العناصر. بدلاً من ذلك، تتوفّر مجموعة من العناصر المحدّدة مسبقًا مع وظائف مرتبطة بها.

يُرجى الرجوع إلى مرجع HTML للاطّلاع على تفاصيل أمثلة أمثلة حظر الرموز.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <br>
  <img
  src="https://media.gettyimages.com/photos/portrait-of-kitten-against-colored-background-picture-id903869076"
  alt="kitten with blue background">
  <hr>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my interests.</p>
    <h3>My favorite websites</h3>
      <ul>
        <li><a href="www.google.com">Google</a></li>
      </ul>
    <h3>My favorite books</h3>
      <section>
        <h4>Non-Fiction</h4>
        <ol>
          <li>Eloquent Javascript</li>
        </ol>
      </section>
      <section>
        <h4>Fiction</h4>
        <ol>
          <li>Hitchhiker's Guide to the Galaxy</li>
        </ol>
      </section>
  </section>
  <hr>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>

التحدّيات البسيطة

  1. مراجعة كل المحتوى أعلاه لتعكس اهتماماتك.
  2. في أحد ملفات HTML الفارغة الأخرى التي أنشأتها في بداية الدرس، تتظاهر بأنك تحضِّر مقالة إخبارية تحتوي على العناوين الرئيسية والعناوين الفرعية (ألا يمكن التفكير في المحتوى؟) اكتب يومًا واحدًا تقريبًا أثناء سفرك. فكِّر في الرحلات المصغَّرة التي أجريتها والأماكن التي زرتَها والطعام الذي تناولته.
  3. يمكنك استخدام العلامات ذات الصلة وإضافة بعض المحتوى حتى تظهر مقالتك الإخبارية في موقعك على الويب.
  4. تأكّد من أنّ المحتوى الخاص بك يظهر في المتصفّح الذي تستخدمه.
  5. STRETCH: أنشِئ نموذجًا يمكن لأي مستخدم ملئه ليرسل إليك تعليقًا عن مقالتك. على الرغم من أن هذه الميزة لن تعمل بعد (لم ننتهِ من كتابة لغة البرمجة JavaScript)، يمكن أن يعرض لنا هذا النموذج بتنسيق HTML الخطوة الأولى في طريقة إنشاء نموذج عمل.

السياق

HTML هي لغة المحتوى على شبكة الإنترنت العالمية.

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

استخدام HTML عمليًا

بدء استخدام HTML

تتم كتابة HTML داخل الملفات بامتداد .html.

عرض صفحتك

لمعاينة ملف HTML على جهاز Mac: في سطر الأوامر، انتقل إلى المجلد الذي يحتوي على صفحة HTML واكتب اسم الملف المفتوح، مع استبدال "filename" باسم ملف HTML.

البنية العامة

<tag>
  Content
</tag>

العناصر متداخلة

يمكن وضع عناصر HTML داخل عناصر أخرى:

 <parent>
    <child>
      This content is inside of the child tag, which is inside of
      the parent tag. Keep an eye on indentation to see which is
      the parent and which is the child!
    </child>
  </parent>

بنية صفحة HTML

بنية كل صفحة ويب ببنية أساسية متماثلة. يبدو كما يلي:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
  • يحتوي <head> على معلومات حول موقعك الإلكتروني، وليس المحتوى الفعلي الذي سيظهر على الصفحة (اعتبرها "الدماغ" في صفحة الويب).
  • يتضمّن <body> كل محتوى صفحتك الذي سيظهر فعليًا على الشاشة.

العناصر الشائعة

يمكنك استخدام هذه العناصر الشائعة داخل العلامتَين <body> و</body> لإضافة محتوى إلى صفحة.

فقرة

لإنشاء فقرة، استخدِم علامة p للفتح والإغلاق:

<p>
  This is a paragraph about how great polar bears are. Aren't they just the best?
</p>

تعليق

استخدِم التعليقات لتسهيل قراءة الرمز بدون التأثير في رمز HTML النهائي المعروض.

<!-- This is a comment. It lives in the code as a note to yourself or
  to other developers, but is hidden when the HTML is rendered in the
  browser. -->

العناوين

<!-- Different levels of headings. Use these for structuring
your page. <h1> is most important heading while <h6> is the
least important heading. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

عامة <div>

<div> The DIV tag exists to make "dividers" to keep your page
organized. Group other similar or related elements inside these.</div>

القوائم

قوائم عناصر القائمة <li> مُرفقة بعلامة قائمة غير مرتبة أو <ul> أو علامة قائمة مرتبة <ol>.

<!-- An unordered list - this will default to a bulleted list. -->
<ul>
  <li>first list item</li>
  <li>second list item</li>
</ul>
<!-- An ordered list - this will default to a numbered list. -->
<ol>
  <li>first list item</li>
  <li>second list item</li>
</ol>

صورة

تتطلب العلامة <img> تحديد عنوان الصورة باستخدام السمة src، وتُستخدَم السمة alt الاختيارية لتسهيل الاستخدام، بما في ذلك برامج قراءة الشاشة.

<!-- Image hosted elsewhere on the web -->
<img
 src="https://some.hostingsite.com/portrait-of-kitten-in-blue"
 alt="kitten with blue background">

<!-- Image hosted on your own site -->
<img src="img/kitten-blue-background.jpg" alt="Kitten in a donut">

بالنسبة إلى الرابط التشعّبي، تتطلب العلامة <a> تحديد عنوان وجهة الرابط التشعّبي باستخدام السمة href.

<!-- External link  -->
<a href="https://www.google.com"></a>

<!-- Local link -->
<a href="footer.html"></a>

القاعدة الأفقية

<!-- This self-closing tag creates a line across your web page. -->
<hr>

استراحة

<!-- This self-closing tag creates a line break between elements. -->
<br>

النموذج

يتم استخدام <form> لجمع المعلومات من أحد المستخدمين. حتى يعمل <form>، يجب إرسال البيانات التي يجمعها لمعالجتها أو معالجتها. وبالتالي، غالبًا ما تتطلب <form>غالبًا سمات إضافية:

  • action: وجهة بيانات النموذج عند إرسال النموذج
  • method: تشير إلى ما إذا كانت البيانات يجب معالجتها باستخدام GET أم نوع من الطلبات POST.
<!-- a form that will send data to process.php via POST request -->
<form action="/process.php" method="post">

</form>

إدخال

<input> هي العنصر المستخدَم في <form> لجمع المعلومات.

عادةً ما يحتوي العنصر <input> على سمة name التي تستخدمها قواعد البيانات لتحديد الحقل الذي تنتمي إليه البيانات المرسَلة.

<form>
    <!-- a text box with the helper text "Full Name" -->
    <input type="text" name="fullName" placeholder="Full Name">
</form>

العنصر <input> متعدد الاستخدامات: من خلال تحديد السمة type، يمكن عرضه كحقل نصي و منتقي التاريخ على شكل تقويم وزر اختيار وقائمة منسدلة والمزيد. ويمكنك الرجوع إلى بعض المستندات الخارجية للاطّلاع على قائمة أكثر اكتمالاً.

النصائح

  • تعرّف على علامات HTML المتاحة من خلال فحص رمز صفحات الويب لمعرفة العلامات التي استخدمها مطوّرو البرامج الآخرون لإضافة محتوى إلى صفحة ويب.
  • إذا لم تتمكن من العثور على ما تريد إضافته، تحقق من وثائق مطوّري البرامج. هذه بعض القوائم لجميع عناصر HTML الممكنة https://www.w3schools.com/Tag/ وhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element وhttp://html-css-js.com/html/tags/
  • عند كتابة HTML، يكون من الأفضل فتح العلامة وإغلاقها أولاً قبل إضافة المحتوى بين العلامات للعناصر التي تحتاج إلى علامة فتح وإغلاق. وبهذه الطريقة، لن تترك علامات وصفية متدلية.
  • لعرض الطبيعة المدمجة لعناصر HTML في الرمز، يجب إضافة مسافة بادئة للعناصر داخل العناصر الأخرى. وسيساعدك ذلك في التعرّف سريعًا على بنية محتوى HTML.
  • استخدام الكثير من التعليقات وسيساعدك هذا في تحديد المشاكل في الرمز الخاص بك وحلّها، وسيساعد ذلك الآخرين عندما تطلب منهم مراجعته.
  • يمكن أن تساعدك الموارد المتاحة على الويب مثل html5boilerplate.com في البدء سريعًا في كتابة HTML.

ملخّص أفضل الممارسات

  • يتم عرض معلومات حول صفحة الويب في <head> مستند HTML: العنوان والبيانات الوصفية والروابط إلى الأنماط، وما إلى ذلك.
  • يتم نقل المعلومات على صفحة ويب في <body> لمستند HTML.
  • هناك العديد من العناصر التي يمكن لمطوّري البرامج استخدامها لإنشاء محتوى مستند HTML، بما في ذلك: <p> و<h1>-<h6> و<div> و<li> و<img> و<a> و<hr> و<br> و<!-- --> والمزيد.
  • تتطلّب بعض العناصر علامة فتح وعلامة إغلاق: <p></p>.
  • العناصر الأخرى مغلقة ذاتيًا، لذا تتطلب فقط علامة فتح: <img>.
  • ويمكن أن تتضمن العلامات سمات (src وalt وid وما إلى ذلك) تقدّم مزيدًا من المعلومات حول سلوك عنصر معيّن: <img src="filename.png" alt="description">.
  • <!-- -->، تقدم ملاحظات إلى مطوّري البرامج تفيدهم في فهم أقسام صفحة الويب.
  • يمكنك استخدام أدوات مطوّري البرامج المُدمجة في المتصفِّح لفحص رمز HTML لصفحات الويب لفحص طريقة إنشاء الصفحة.

السؤال 1

أي من العناصر التالية يُعد عنصرًا ثانويًا؟ (تجاهل عناصر النص/html لغرض هذا التمرين)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>
  1. h1
  2. p
  3. a
  4. h1 وp

السؤال 2

في مستند HTML، يتم إدخال __ في العنصر <head> ويرسل __ في العنصر <body>.

  1. البنية، البيانات الوصفية
  2. البيانات الوصفية، البنية
  3. عناوين، محتوى أصغر
  4. عنوان الموقع الإلكتروني، المحتوى الرئيسي على الموقع الإلكتروني

السؤال 3

أي من الأسباب التالية لا يشكّل أسبابًا وجيهة لإضافة مسافة بادئة إلى عناصر متداخلة؟

  1. مع المسافة البادئة، يمكنك الاطّلاع بسهولة على العناصر المتضمّنة في العناصر الأخرى.
  2. إضافة مسافة بادئة تسمح للمستخدمين بقراءة بنية صفحة الويب
  3. إضافة مسافة بادئة تسمح لبرامج التتبُّع/محركات البحث بقراءة بنية صفحة الويب
  4. تسهل المسافة البادئة تحديد العناصر التابعة

السؤال 4

أي مما يلي سمة من عناصر HTML؟

<div class="sidebar">Sidebar goes here!</div>
  1. div
  2. class
  3. شريط جانبي
  4. الشريط الجانبي ينتقل إلى هنا

السؤال 5

كم عدد السمات التي يحتوي عليها عنصر HTML التالي؟

<input type="text" placeholder="username" name="username" />
  1. 0
  2. 1
  3. 2
  4. 3

السؤال 6

في مقتطف HTML التالي الذي يوضّح العلاقة بين العناصر، ما العنصر الذي يمثّل العنصر الرئيسي؟

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>
  1. <p>
  2. <b>
  3. <i>

السؤال 7

كم عدد العناصر في مقتطف HTML التالي التي تمثل عنصرًا ثانويًا إلى عنصر رئيسي؟

(لا تعدد عناصر <body> أو <html> الملتفة)

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>
  1. 1
  2. 2
  3. 3
  4. 4

السؤال 8

على الرغم من أن بعض المتصفحات تعرض مقتطف HTML التالي بشكل صحيح، ما الخطأ فيه؟

<img src=puppies.png width=400 />
  1. لا تحتوي على علامة إغلاق.
  2. يجب وضع علامات اقتباس حول قيم السمات.
  3. يتطلب تقديم السمة width أيضًا السمة height
  4. لا تتوفر سمة مطلوبة

السؤال 1

أي من العناصر التالية يُعد عنصرًا ثانويًا؟ (تجاهل عناصر النص/html لغرض هذا التمرين)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>

العنصر a هو عنصر ثانوي لأنه مضمّن في عنصر آخر.

السؤال 2

في مستند HTML، يتم إدخال __ في العنصر <head> ويرسل __ في العنصر <body>.

يتم نقل البيانات الوصفية في العنصر <head> بينما تأتي البنية في العنصر <body>. لن يكون هناك أي عنصر في العنصر <head> مرئيًا على صفحة الويب نفسها.

السؤال 3

أي من الأسباب التالية لا يشكّل أسبابًا وجيهة لإضافة مسافة بادئة إلى عناصر متداخلة؟

لا يُسهِّل المسافة البادئة على برامج التتبُّع/محركات البحث قراءة بنية صفحة الويب - عندما يقرأ برنامج التتبُّع موقعًا إلكترونيًا، يستطيع قراءة رمز HTML حتى لو كان جميعًا في سطر واحد.

السؤال 4

أي مما يلي سمة من عناصر HTML؟

<div class="sidebar">Sidebar goes here!</div>

class هي السمة، ويتم تضمين السمات داخل عنصر HTML وتحتوي عادةً على قيمة (ولكن ليس بالضرورة).

السؤال 5

كم عدد السمات التي يحتوي عليها عنصر HTML التالي؟

<input type="text" placeholder="username" name="username" />

يحتوي العنصر input أعلاه على 3 سمات - type وplaceholder وname.

السؤال 6

في مقتطف HTML التالي الذي يوضّح العلاقة بين العناصر، ما العنصر الذي يمثّل العنصر الرئيسي؟

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>

<p> هو عنصر رئيسي لأنه يحتوي على عناصر أخرى.

السؤال 7

كم عدد العناصر في مقتطف HTML التالي التي تمثل عنصرًا ثانويًا إلى عنصر رئيسي؟

(لا تعدد عناصر <body> أو <html> الملتفة)

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>

هناك 4 عناصر فرعية في المقتطف، وفي الأساس أي عنصر يتضمّن عنصرًا رئيسيًا أعلى منه، لذا فإن أي عنصر باستثناء العنصر <div> - <h1> و<p> و<i> و<a>.

السؤال 8

على الرغم من أن بعض المتصفحات تعرض مقتطف HTML التالي بشكل صحيح، ما الخطأ فيه؟

<img src=puppies.png width=400 />

يجب وضع علامات اقتباس حول قيم السمات. <img /> هي علامة الإغلاق الذاتي وليست لديها سمة مطلوبة. لا بأس بأن يكون لديك width بدون height والعكس صحيح.