مثال های اساسی HTML

در این فصل برخی از مثالهای اساسی HTML را نشان خواهیم داد.

اگر ما از برچسب هایی استفاده می کنیم که شما هنوز در مورد آنها یاد نگرفته اید.


اسناد HTML

همه اسناد HTML باید با اعلامیه نوع سند شروع شوند <!DOCTYPE html>:.

سندHTML با خودش  شروع می شود <html>و با آن پایان می یابد </html>.

قسمت قابل مشاهده سند HTML بین <body>و است </body>.

مثال

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

اعلامیه <! DOCTYPE>

<!DOCTYPE>اعلام نشان دهنده نوع سند، و به نمایش صفحات وب در مرورگر به درستی کمک می کند .

این فقط یک بار باید در بالای صفحه (قبل از هرگونه برچسب HTML) ظاهر شود.

<!DOCTYPE>اعلان حروف حساس نیست.

<!DOCTYPE>اعلامیه برای HTML5 است:

<!DOCTYPE html>

عناوین HTML

عناوین HTML با برچسب های <h1> to <h6> تعریف می شوند .

<h1>مهمترین عنوان را تعریف می کند. <h6>کمترین عنوان را تعریف می کند: 

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

پاراگراف های HTML

پاراگراف های HTML با <p>برچسب تعریف می شوند:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

پیوندهای HTML

پیوندهای HTML با <a>برچسب تعریف می شوند:

<a href="https://www.yousefi.com">This is a link</a>

مقصد پیوند در hrefویژگی مشخص شده است.

از ویژگی ها برای ارائه اطلاعات اضافی در مورد عناصر HTML استفاده می شود.

درباره ویژگی ها در فصل بعدی بیشتر خواهید آموخت.


تصاویر HTML

تصاویر HTML با <img>برچسب تعریف می شوند.

فایل منبع ( src) ، متن جایگزین ( altwidthو heightبه عنوان ویژگی ارائه می شوند:

<img src="yousefi.jpg" alt="yousefi.com" width="104" height="142">

چگونه می توان منبع HTML را مشاهده کرد؟

آیا تا به حال یک صفحه وب دیده اید و از خود پرسیده اید “سلام! آنها چگونه این کار را انجام داده اند؟”

مشاهده کد منبع HTML:

در یک صفحه HTML کلیک راست کنید و “مشاهده منبع صفحه” (در Chrome) یا “مشاهده منبع” (در لبه) یا موارد دیگر را در مرورگرهای دیگر انتخاب کنید. با این کار پنجره ای حاوی کد منبع HTML صفحه باز می شود.

یک عنصر HTML را بازرسی کنید:

روی یک عنصر (یا یک قسمت خالی) کلیک راست کنید و “Inspect” یا “Inspect Element” را انتخاب کنید تا ببینید از چه عناصری تشکیل شده اند (HTML و CSS را خواهید دید). همچنین می توانید در پنل Elements یا Styles که باز می شود ، HTML یا CSS را هنگام پرواز ویرایش کنید.

منبع