HTML مقدماتی ؛ معرفی اصول اولیه و عناصر

در این قسمت از آموزش، قصد داریم به معرفی اصول اولیه، عناصر یا Element های HTML بپردازیم.

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

سند HTML

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

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

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

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

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

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

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

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

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

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

پاراگراف در HTML

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

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

لینک در HTML

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

<a href="https://www.lydaweb.com">This is a link</a>

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

تصاویر HTML

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

<img src="lydaweb.jpg" alt="lydaweb.com" width="104" height="142">

عناصر HTML

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

<tagname>Content goes here...</tagname>

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

<p>My first paragraph.</p>

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

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

عناصر HTML می‌توانند به صورت تو در تو قرار بگیرند یعنی هر عنصر خود حاوی یک یا چند عنصر دیگر باشد. تمام سندهای HTML حاوی عناصر تو در تو هستند. نمونه‌ی زیر حاوی چهار عنصر HTML است:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

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

<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

عنصر <body> محتوای اصلی سند را مشخص می‌کند. این عنصر دارای تگ آغازین <body> و تگ پایانی <body/> است. عنصر محتوا دارای دو عنصر دیگر HTML به نام‌های <h1> و <p> است.

<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>

عنصر <h1> تعیین‌کننده عنوان است. این عنصر دارای تگ آغازین <h1> و دارای تگ پایانی <h1/> بوده و My First Heading عنصر محتوا محسوب می‌شود.

<h1>My First Heading</h1>

عنصر <p> تعریف‌کننده پاراگراف است. این عنصر دارای تگ آغازین <p> و تگ پایانی <p/> است. My First paragraph هم عنصر محتوا محسوب می‌شود.

<p>My first paragraph.</p>

تگ پایانی را فراموش نکنید. برخی از عناصر HTML حتی اگر تگ پایانی را قرار ندهید به درستی نمایش داده می‌شوند:

<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>

مثال بالا در تمام مرورگرها عمل می‌کند زیرا تگ پایانی به صورت اختیاری در نظر گرفته شده است. اما هرگز به این اصل تکیه نکنید چون گاهی ممکن است فراموش کردن تگ پایانی نتایج پیش‌بینی نشده‌ای ایجاد کرده یا با پیغام خطا مواجه شوید.

عناصر خالی HTML

عناصر HTML که هیچ نوع محتوایی ندارند را عناصر خالی می‌نامند. مثلا <br> یک عنصر خالی و بدون تگ پایانی است. عناصر خالی می‌توانند در همان تگ آغازین بسته شوند مانند عنصر <br  /> که نشان‌دهنده شکست در خط است. در HTML5 نیازی به بستن عناصر خالی نیست. اما اگر می‌خواهید سند شما توسط تجزیه‌کننده‌های XML هم خوانا باشد باید عناصر HTML را به درستی ببندید.

در تگ‌ها از حروف کوچک استفاده کنید

تگ‌های HTML به بزرگی یا کوچکی حروف حساس نیستند مثلا تگ <P> همان معنای تگ <p> را دارد. استاندارد HTML5 نیازی به استفاده از حروف کوچک ندارد اما توصیه کنسرسیوم وب جهانی استفاده از حروف کوچک در HTML  است.

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

local_offerevent_note خرداد ۱۷, ۱۳۹۷

account_box hamed


local_offer

دیدگاهتان را بنویسید

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