ما با امکانات و طرح جدید برگشتیم ...

معرفی اصول اولیه و عناصر HTML

معرفی اصول اولیه و عناصر HTML

در ادامه سری مقالات آموزش مقدماتی HTML با اصول اولیه و عناصر این زبان نشانه گذاری برای طراحی سایت آشنا می‌شوید.


در  درس اول از سری آموزش HTML مقدماتی، به معرفی اولیه HTML پرداختیم و گفتیم که این زبان نشانه گذاری سنگ بنای طراحی سایت بوده و تمام دستوراتی که مرورگر در نمایش محتوا باید رعایت کند را به صورت تگ‌ به آن اعلام می‌کند. در این قسمت از آموزش، قصد داریم به معرفی اصول اولیه، عناصر یا Element های HTML بپردازیم.

اگر در طول این درس از آموزش HTML مقدماتی به مثال‌هایی برخوردید که تگ‌های HTML به کار رفته در آن را هنوز یاد نگرفته‌اید،  نگران نباشید، در آموزش‌های بعدی حتما آن‌ها را فرا خواهید گرفت.

سند HTML

تمام سندهای HTML باید با یک عبارت توصیف کننده نوع سند آغاز شوند: <!DOCTYPE  html>

پس از این جمله توصیفی اولین عبارتی که سند را آغاز می‌کند <html> و عبارتی که سند تا به پایان می‌رساند <html/> خواهد بود. بخش قابل نمایش یک سند HTML بین دو تگ <body> و <body/> قرار می‌گیرد. در زیر نمونه‌ای از یک سند استاندارد HTML را مشاهده می‌کنید:

عنوان یا تیتر در سند HTML

تیترهای به کار رفته در یک سند HTML به وسیله تگ‌های <h1> تا <h6> مشخص می‌شوند. تگ <h1> مهم‌ترین عنوان را مشخص کرده و تگ <h6> نشان‌دهنده کم اهمیت‌ترین عنوان است. بنابراین تگ H1 نشان دهنده بزرگ‌ترین اندازه از یک نوشته در متن و تگ H6 نشان دهنده کوچک‌ترین عنوان در هر متن خواهد بود. در واقع این تگ‌ها روی اندازه متنی که تحت تاثیر آن‌ها قرار می‌گیرند هم تاثیر گذار هستند. در زیر یک نمونه از عنوان‌های HTML آورده شده است:

این یک متن با تگ h2 است.

این یک متن با تگ h3 است.

این یک متن با تگ h4 است.

همان طور که می‌بینید اندازه هر تگ نشان می‌دهد که به عنوان مثال عنوانی که با تگ h3 مشخص شده کم اهمیت‌تر و زیر مجموعه‌ای از عنوان تگ h2 است.

پاراگراف در HTML

در یک سند HTML پاراگراف‌ها با تگ <p> مشخص می‌شوند که در زیر یک نمونه از آن را مشاهده می‌کنید:

مشاهده
آشنایی با HTML

لینک در HTML

لینک‌های HTML با تگ <a> تعریف می‌شوند. یک نمونه از آن در زیر آورده شده است:

مقصد لینک در خصوصیت href (آدرس صفحه‌ای که می‌خواهیم با کلیک روی محتوا، مرورگر به آن هدایت شود) قرار داده شده است. از خصوصیات برای ارائه اطلاعات بیشتر در مورد عناصر HTML استفاده می‌شود.

تصاویر HTML

تصاویری که در سند HTML قرار دارند با تگ <img> مشخص می‌شوند. فایل منبع (src)، متن آلترنیتیو (alt)، عرض و ارتفاع تصویر هم به عنوان خصوصیت یا ویژگی تعریف می‌شود. یک نمونه کد HTML تصویر در ادامه آورده شده است:

عناصر HTML

معمولا تمام عناصر HTML از یک تگ آغازین و یک تگ پایانی تشکیل شده و محتوایی در میان آن‌ها وارد می‌شود:

Element یا عنصر HTML همه‌ی آن چیزی است که از تگ شروع تا تگ پایان ادامه دارد:

عناصر HTML که هیچ محتوایی ندارند یا عناصر خالی می‌نامند. این عناصر دارای تگ پایانی نیستند مانند عنصر <br> که نشان‌دهنده شکست خط است.

عناصر تو در توی 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  است.

در این سری مقالات آموزش HTML مقدماتی با زبانی ساده و مثال‌های کاربردی با چارچوب این زبان آشنا شده‌اید. اگر دوست دارید طراحی سایت را به صورت پایه‌ای و ا رعایت تمام اصول استاندارد آن فرا بگیرید، آموزش HTML اولین گام شما در این راه خواهد بود. برای حفظ پیوستگی در یادگیری HTML حتما تمام قسمت‌های آموزشی آن را بدون وقفه مطالعه و تمرین کنید.

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

توسط
تومان