معرفی اصول اولیه و عناصر HTML بخش دوم
در درس اول از سری آموزش HTML مقدماتی، به معرفی اولیه HTML پرداختیم و گفتیم که این زبان نشانه گذاری زير بنای طراحی سایت بوده و تمام دستوراتی که مرورگرها در نمایش محتوا باید رعایت کند را به صورت تگ به آن اعلام می‌کند. در این قسمت از آموزش، قصد داریم به معرفی اصول اولیه، عناصر یا Element های HTMLL بپردازیم.
سند HTML
تمام سندهای HTML باید با یک عبارت توصیف کننده نوع سند آغاز شوند: <!DOCTYPE html>
پس از این جمله توصیفی اولین عبارتی که سند را آغاز می‌کند <html> و عبارتی که سند تا به پایان می‌رساند <html/> خواهد بود. بخش قابل نمایش یک سند HTML بین دو تگ <body> و <body/> قرار می‌گیرد. در زیر نمونه‌ای از یک سند استاندارد HTML را مشاهده می‌کنید:
عنوان یا تیتر در سند HTML
تیترهای به کار رفته در یک سند HTML به وسیله تگ‌های <h1> تا <h6> مشخص می‌شوند. تگ <h1> مهم‌ترین عنوان را مشخص کرده و تگ <h6> نشان‌دهنده کم اهمیت‌ترین عنوان است. بنابراین تگ H1 نشان دهنده بزرگ‌ترین اندازه از یک نوشته در متن و تگ H6 نشان دهنده کوچک‌ترین عنوان در هر متن خواهد بود. در واقع این تگ‌ها روی اندازه متنی که تحت تاثیر آن‌ها قرار می‌گیرند هم تاثیر گذار هستند.
این متن با تگ h2 است.
این متن با تگ h3 است.
این متن با تگ h4 است.
همان طور که می‌بینید اندازه هر تگ نشان می‌دهد که به عنوان مثال عنوانی که با تگ h4 مشخص شده کم اهمیت‌تر و زیر مجموعه‌ای از عنوان تگ h3 است.
پاراگراف در HTML
در یک سند HTML پاراگراف‌ها با تگ <p> مشخص می‌شوند که در زیر یک نمونه از آن را مشاهده می‌کنید:
<p>یک یک پاراگراف است</p>
<p>این یک پاراگراف دیگر است</p>
لینک در HTML
لینک‌های HTML با تگ <a> تعریف می‌شوند. یک نمونه از آن در زیر آورده شده است:
مقصد لینک در خصوصیت href (آدرس صفحه‌ای که می‌خواهیم با کلیک روی محتوا، مرورگر به آن هدایت شود) قرار داده شده است. از خصوصیات برای ارائه اطلاعات بیشتر در مورد عناصر HTML استفاده می‌شود.
<a href=”mramooz.com”>mramooz</a>
تصاویر HTML
تصاویری که در سند HTML قرار دارند با تگ <img> مشخص می‌شوند. فایل منبع (src)، متن آلترنیتیو (alt)، عرض و ارتفاع تصویر هم به عنوان خصوصیت یا ویژگی تعریف می‌شود. یک نمونه کد HTML تصویر در ادامه آورده شده است:
<img src=”mramooz.jpg /” alt=”mramooz” width=”304″ height=”228″ />
عناصر تو در توی HTML
عناصر HTML می‌توانند به صورت تو در تو قرار بگیرند یعنی هر عنصر خود حاوی یک یا چند عنصر دیگر باشد. تمام سندهای HTML حاوی عناصر تو در تو هستند. نمونه‌ی زیر حاوی چهار عنصر HTML است:
در توضیح این مثال باید گفت که عنصر <hrml> تعیین کننده کل سند است. این سند دارای تگ آغازین <html> و تگ پایانی <html/> است. عنصر محتوا هم یک عنصر HTML دیگر است که با عنصر <body> مشخص می‌شود.
عنصر <body> محتوای اصلی سند را مشخص می‌کند. این عنصر دارای تگ آغازین <body> و تگ پایانی <body/> است. عنصر محتوا دارای دو عنصر دیگر HTML به نام‌های <h1> و <p> است.
عنصر <h1> تعیین‌کننده عنوان است. این عنصر دارای تگ آغازین <h1> و دارای تگ پایانی <h1/> بوده و My First Heading عنصر محتوا محسوب می‌شود.
عنصر <p> تعریف‌کننده پاراگراف است. این عنصر دارای تگ آغازین <p> و تگ پایانی <p/> است. My First paragraph هم عنصر محتوا محسوب می‌شود.
تگ پایانی را فراموش نکنید. برخی از عناصر HTML حتی اگر تگ پایانی را قرار ندهید به درستی نمایش داده می‌شوند:
عناصر خالی HTML
عناصر HTML که هیچ نوع محتوایی ندارند را عناصر خالی می‌نامند. مثلا <br> یک عنصر خالی و بدون تگ پایانی است. عناصر خالی می‌توانند در همان تگ آغازین بسته شوند مانند عنصر <br /> که نشان‌دهنده شکست در خط است. در HTML5 نیازی به بستن عناصر خالی نیست. اما اگر می‌خواهید سند شما توسط تجزیه‌کننده‌های XML هم خوانا باشد باید عناصر HTML را به درستی ببندید.
در تگ‌ها از حروف کوچک استفاده کنید
تگ‌های HTML به بزرگی یا کوچکی حروف حساس نیستند مثلا تگ <P> همان معنای تگ <p> را دارد. استاندارد HTML5 نیازی به استفاده از حروف کوچک ندارد اما توصیه کنسرسیوم وب جهانی استفاده از حروف کوچک در HTML است.
