در این بخش برخی از مثال‌های کاربردی html را به شما نمایش میدهیم.
<!DOCTYPE html>
توضیح: با استفاده از این تگ میتوان نوع سند را مشخص کرد در اینجا نوع سند html5 مشخص شده است. واژه DOCTYPE با حروف بزرگ و مخفف document type است. این تگ به مرورگر کمک می‌کند داده شما را بدرستی نمایش دهد. این دستور یکبار درون سند و در ابتدای سند و قبل تگ html قرار میگیرد.
<html></html>
توضیح: روت اصلی سند با تگ باز و بسته است و دارای سایر تگ های درونی است.
<body></body>
توضیح: این تگ حاوی content و محتوای صفحه این که در خروجی قابل مشاهده و درون تگ html است.
مثال:
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <body> <h1>dejavan.ir</h1> <p>amir javanmir</p> </body> </html> |
تگ های head در html
زمانی که شما قصد داشته باشید از عناوین درون سند خود استفاده کنید از تگ های ۶گانه h این کنید. این تگ ها از h1 شروع شده و تا h6 ادامه دارد. فرق آنها در اهمیت آنهاست. تگ h1 مهمتر از تگ h6 است و تعداد قرار گرفتن تگ h1 یکبار در سند جاری است. سایز متن آنها در خروجی بصورت پیش فرض از استایل مرورگر گرفته می‌شود.
مثال:
|
1 2 3 |
<h1>amir javanmir</h1> <h2>amir javanmir</h2> <h3>amir javanmir</h3> |
ایجاد پاراگراف
برای ایجاد پاراگراف در سند خود از تگ p استفاده کنید. این تگ دارای تگ باز و بسته است.
مثال:
|
1 2 |
<p>amir javanmir</p> <p>amir javanmir</p> |
تعریف لینک در سند
در صورتی که بخواهیم یک لینک ایجاد کنیم که قابل کلیک کردن باشد از تگ a استفاده می شود.این تگ دارای تگ باز و بسته است.این تگ دارای خصوصیت یا attribute به نام href است که آدرس سایت را درون خود نگه داری می کند.
خصوصیت یا attribute چیست؟
بوسیله این خصوصیت می توانیم ویژگی های تگ را اضافه کنیم.هر تگ ممکن است دارای خصوصیات مخصوص به خود باشد.هر خصوصیت دارای یک نام و خصوصیت است.
نحوه کلی خصوصیت:
|
1 |
name="value" |
تصاویر در html
سند شما می تواند دارای تصویر باشد برای تعریف عکس باید از تگ img استفاده کنید.
این تگ دارای تگ بسته نیست و درون خود بسته می شود.
این تگ دارای خصوصیتی به نام src است که آدرس فایل تصویر را دریافت می کند.
تگ image همچنین دارای خصوصیتی به نام width و height است که طول و عرض تصویر را مشخص می کنیم.اندازه عکس پیکسلی است و نیازی به وارد کردن واحد اندازه گیری px نیست.
مثال:
|
1 |
<img src="dejavan.ir" alt="dejavan.ir" width="104" height="142"> |
تصاویر دارای خصوصیت دیگری به نام alt هستند که یک مقدار متن دریافت می کنند.این متن توضیح دهنده تصویر است و از لحاظ سئو مهم است.
چطور سورس پروژه خود را مشاهده کنیم؟
برای اینکار سند را در مرورگر باز کرده راست کلیک در صفحه کرده و گزینه View Page Source را انتخاب کنید.در تب جدید کدهایی که نوشته شده نمایش داده می شود.راه دیگز مشاهده سورس کلید میانبر ctrl+u است.
گرفتن inspect از طریق مرورگر
در صورتی که بخواهید سند خود را از طریق بخش developer tools مشاهده کنید می توانید از inspect استفاده کنید.
برای همین منظور درون صفحه راست کلیک کرده و گزینه inspect را انتخاب می کنیم.با این کار بخش developer tools نمایش داده می شود.در این حالت هم html و هم css صفحه را به شما نمایش می دهد.در این حالت هم می توانید html و هم css صفحه را از طریق پنل و تب مخصوص source ویرایش کنید.
این ابزار کاربردی است.
