مثال های ساده HTML
مثال‌های پایه HTML
در این فصل برخی از مثال‌های پایه HTML را نشان خواهیم داد.
نگران نباشید اگر از تگ‌هایی استفاده کنیم که هنوز درباره آنها یاد نگرفته‌اید.
اسناد HTML
تمام اسناد HTML باید با اعلان نوع سند شروع شوند: <!DOCTYPE html>.
سند HTML خود با <html> شروع و با </html> پایان می‌یابد.
قسمت قابل مشاهده سند HTML بین <body> و </body> قرار دارد.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>اولین عنوان من</h1>
<p>اولین پاراگراف من.</p>
</body>
</html>اعلان <!DOCTYPE>
اعلان <!DOCTYPE> نوع سند را نشان می‌دهد و به مرورگرها کمک می‌کند صفحات وب را به درستی نمایش دهند.
این اعلان فقط باید یک بار و در بالای صفحه (قبل از هر تگ HTML) ظاهر شود.
اعلان <!DOCTYPE> به بزرگی و کوچکی حروف حساس نیست.
اعلان <!DOCTYPE> برای HTML5 به صورت زیر است:
<!DOCTYPE html>عنوان‌های HTML
عنوان‌های HTML با تگ‌های <h1> تا <h6> تعریف می‌شوند.
<h1> مهم‌ترین عنوان را تعریف می‌کند. <h6> کم‌اهمیت‌ترین عنوان را تعریف می‌کند:
مثال
<h1>این عنوان سطح 1 است</h1>
<h2>این عنوان سطح 2 است</h2>
<h3>این عنوان سطح 3 است</h3>پاراگراف‌های HTML
پاراگراف‌های HTML با تگ <p> تعریف می‌شوند:
مثال
<p>این یک پاراگراف است.</p>
<p>این پاراگراف دیگری است.</p>لینک‌های HTML
لینک‌های HTML با تگ <a> تعریف می‌شوند:
مثال
<a href="https://www.parsrepo.com">این یک لینک است</a>مقصد لینک در ویژگی href مشخص شده است.
ویژگی‌ها برای ارائه اطلاعات اضافی درباره عناصر HTML استفاده می‌شوند.
در فصل‌های بعدی بیشتر درباره ویژگی‌ها یاد خواهید گرفت.
تصاویر HTML
تصاویر HTML با تگ <img> تعریف می‌شوند.
فایل منبع (src)، متن جایگزین (alt)، عرض و ارتفاع به عنوان ویژگی‌ها ارائه می‌شوند:
مثال
<img src="parsrepo.jpg" alt="ParsRepo.com" width="104" height="142">نحوه مشاهده کد منبع HTML
آیا تا به حال یک صفحه وب دیده‌اید و فکر کرده‌اید "هی! این را چگونه انجام داده‌اند؟"
مشاهده کد منبع HTML:
در یک صفحه HTML کلیدهای CTRL + U را فشار دهید، یا روی صفحه راست کلیک کرده و "View Page Source" را انتخاب کنید. این کار یک تب جدید حاوی کد منبع HTML صفحه را باز می‌کند.
بررسی یک عنصر HTML:
روی یک عنصر (یا یک ناحیه خالی) راست کلیک کرده و "Inspect" را انتخاب کنید تا ببینید عناصر از چه چیزی ساخته شده‌اند (هم HTML و هم CSS را خواهید دید). همچنین می‌توانید HTML یا CSS را به صورت زنده در پنل Elements یا Styles که باز می‌شود ویرایش کنید.
آماده رفتن به درس بعدی هستید؟
این درس را به پایان رساندید و می‌توانید به درس بعدی بروید.