HTML مواد دانشجویی

HTML ستون فقرات یک صفحه وب است. در این بخش، نحوه ساخت یک ساختار محکم و معنادار برای یک صفحه وب را بررسی خواهیم کرد.

خوراکی های کلیدی

  • دانش آموزان ساختار فایل HTML را درک می کنند.
  • دانش آموزان می دانند که چگونه از برچسب های رایج برای ساخت یک صفحه وب استفاده کنند.

HTML چیست؟

HTML مخفف HyperText Markup Language است. این کدی است که ما از آن برای:

  • اسنادی را ایجاد کنید که در شبکه جهانی وب ذخیره شده و در یک مرورگر نمایش داده شوند.
  • یک ساختار اساسی برای صفحه وب ما - استخوان های صفحه وب - ارائه می دهد.
  • از بارگذاری مناسب متن و تصاویر برای نمایش مرورگر ما اطمینان حاصل کنید.

چه زمانی از 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 مخفف Hyper Text Markup Language است. این راهی برای دادن معنای ساختاری به متن است. این به رایانه ها و برنامه نویسان اجازه می دهد تا به راحتی تعیین کنند که هدف یک تکه متن چیست.

HTML را به عنوان اسکلت یک صفحه وب در نظر بگیرید - ساختار و محتوا را ارائه می دهد در حالی که جاوا اسکریپت و 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. SRETCH: فرمی بسازید که کسی بتواند آن را پر کند تا درباره مقاله شما نظر ارسال کند. در حالی که هنوز کار نمی کند (ما آن را به جاوا اسکریپت متصل نکرده ایم)، ساخت این فرم در HTML می تواند اولین گام را در نحوه ایجاد یک فرم کار به ما نشان دهد.

زمینه

HTML زبان محتوا در شبکه جهانی وب است.

شما از خط فرمان برای پیمایش و باز کردن فایل های HTML خود استفاده خواهید کرد. فایل‌های HTML شما با سبک‌ها و رفتارهای CSS که با استفاده از برنامه‌نویسی جاوا اسکریپت که از توابع مختلف تشکیل شده است، افزوده می‌شوند. فایل‌های HTML نیز الگوهایی خواهند بود که توسط Google App Engine استفاده می‌شوند و از پایگاه داده پر می‌شوند.

HTML در عمل

شروع کار با HTML

HTML درون فایل هایی با پسوند .html نوشته می شود.

مشاهده صفحه شما

برای پیش نمایش یک فایل HTML در مک: در خط فرمان، به پوشه ای که صفحه HTML خود را دارد بروید و نام فایل باز را تایپ کنید، و نام فایل 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/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

کدام یک از عناصر زیر عنصر فرزند است؟ (برای این تمرین عناصر بدن/html را نادیده بگیرید) 

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>
  1. h1
  2. ص
  3. الف
  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 اشکالی ندارد و بالعکس.