مثال های پایه HTML (HTML Basic Examples)
در این بخش با چند مثال پایه از HTML آشنا می شوید. اگر تگ هایی را مشاهده کردید که هنوز یاد نگرفته اید، نگران نباشید. در ادامه به تدریج همه را یاد خواهید گرفت.
اسناد HTML
هر سند HTML باید با اعلان نوع سند <!DOCTYPE html>
آغاز شود. بدنه اصلی بین <html>
و </html>
قرار دارد و محتوای قابل مشاهده در <body>
قرار می گیرد.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
اعلان <!DOCTYPE>
اعلان <!DOCTYPE>
نوع سند را مشخص می کند و باید تنها یک بار در ابتدای صفحه قرار گیرد. در HTML5 این اعلان به شکل زیر نوشته می شود:
<!DOCTYPE html>
سرفصل ها در HTML
سرفصل ها با تگ های <h1>
تا <h6>
تعریف می شوند. <h1>
مهم ترین و <h6>
کم اهمیت ترین سطح عنوان است.
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
پاراگراف ها
پاراگراف ها با تگ <p>
مشخص می شوند:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
لینک ها
لینک ها با تگ <a>
ایجاد می شوند. آدرس مقصد در ویژگی href
قرار می گیرد.
<a href="https://www.w3schools.com">This is a link</a>
نکته: ویژگی ها اطلاعات اضافی درباره عناصر ارائه می دهند.
تصاویر
تصاویر با تگ <img>
نمایش داده می شوند. ویژگی های src
، alt
، width
و height
برای مشخص کردن تصویر استفاده می شوند.
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
مشاهده کد منبع HTML
برای دیدن کد منبع یک صفحه، از کلید ترکیبی CTRL + U استفاده کنید یا روی صفحه کلیک راست کرده و گزینه «View Page Source» را انتخاب کنید.
برای بررسی یک عنصر نیز می توانید روی آن کلیک راست کرده و «Inspect» را انتخاب کنید تا HTML و CSS آن را مشاهده کنید.
پس از یادگیری این مثال های پایه می توانید به بخش عناصر HTML بروید.