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

تشكّل لغة HTML أساس صفحة الويب. في هذه الوحدة، سنتناول كيفية إنشاء بنية متينة وذات مغزى لصفحة ويب.

الخلاصات الرئيسية

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

ما هو HTML؟

‫HTML هو اختصار لعبارة HyperText Markup Language (لغة ترميز النص الفائق). وهي عبارة عن رمز نستخدمه في ما يلي:

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

متى نستخدم HTML؟

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

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

HTML In Action

في صميم 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 هي اختصار لعبارة Hyper Text Markup Language (لغة ترميز النص الفائق). وهي طريقة لإضفاء معنى هيكلي على النص. تتيح لأجهزة الكمبيوتر والمبرمجين تحديد الغرض من جزء من النص بسهولة.

يمكن اعتبار 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>.
  • بين علامات الفتح والإغلاق، نُدرج نص العنصر أو "محتواه". ستبدو النتيجة النهائية على النحو التالي: <example-tag>Content Goes in here</example-tag>. يمكن أيضًا وضع العلامات داخل علامات أخرى.
  • يُرجى العِلم أنّه عند وضع علامة داخل علامة أخرى، عليك إضافة مسافة بادئة إلى العلامة الجديدة للإشارة إلى أنّها عنصر فرعي من العنصر الرئيسي.

المفردات

  • العناصر: هي عناصر (مثل الصور والفقرات والعناوين) يتم إنشاؤها باستخدام رمز HTML.
  • العلامات: هي أجزاء من الرمز تشير إلى مواضع بداية بعض العناصر ونهايتها.
  • العناصر الثانوية: هي العناصر التي يتم تضمينها داخل عناصر أخرى.
  • العنصر الأصل: العناصر التي تحتوي على عناصر أخرى

أمثلة على 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. تمرين إضافي: أنشئ نموذجًا يمكن للمستخدمين ملؤه لإرسال تعليق إليك بشأن مقالتك. على الرغم من أنّ هذا النموذج لن يعمل بعد (لأنّه غير مرتبط بلغة JavaScript)، يمكن أن يوضّح لنا إنشاء هذا النموذج بلغة HTML الخطوة الأولى في كيفية إنشاء نموذج يعمل.

السياق

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

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

HTML In Action

الخطوات الأولى لاستخدام HTML

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

عرض صفحتك

لمعاينة ملف HTML على جهاز Mac، انتقِل في سطر الأوامر إلى المجلد الذي يحتوي على صفحة HTML واكتب open filename، مع استبدال "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>

Generic <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/Tags/ و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

أيّ من العناصر التالية هو عنصر فرعي؟ (تجاهل عناصر body/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

أيّ من العناصر التالية هو عنصر فرعي؟ (تجاهل عناصر body/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 والعكس صحيح.