عناصر و تگ ها در اچ تی ام ال
در این قسمت اموزش، میخواهیم عناصر تشکیل دهنده زبان نشانه گذاری اچ تی ام ال را بررسی کنیم و بفهمیم چگونه میتوانیم عناصر اچ تی ام ال بسازیم و برخی از آن عناصر را بررسی کنیم.
در قسمت معرفی اچ تی ام ال، چگونگی کارکرد این زبان را به شما آموزش دادیم و گفتیم که مرورگر ها چه کاری را با این اسناد انجام میدهند و یک مثال هم از سند اچ تی ام ال به شما نشان دادیم.
در قسمت ویرایشگر های اچ تی ام ال، در مورد ساخت، ذخیره و ویرایش یک سند اچ تی ام ال با نوت پد و تکست ادیت صحبت کردیم.
ساختار اچ تی ام ال
همانطور که در آموزش های قبل دیدیم، سند اچ تی ام ال از عناصری تشکیل شده که به آنها تگ میگوییم. تگ ها و محتوای آنها عناصر سند اچ تی ام را تشکیل میدهند. عناصر شامل متن، اتربیوت (Attribute)، تگ باز و تگ بسته میشوند.
تگ: محتوا، درون تگ شروع و تگ پایان قرار میگیرد. تگ به مختوای درون خودش معنا میدهد و کارایی آن محتوا را مشخص میکند.
اتربیوت: اتربیوت ها برای عناصر اطلاعات بیشتری را فراهم میکنند و کارایی آنها را برای مرورگر گسترش میدهند. یک اتربیون از یک نام و یک مقدار تشکیل میشود. در آموزش های بعدی در مورد اتربیوت ها بیشتر صحبت میکنیم.
عنصر: خود تگ ها، اتربیوت و هر چیزی که درون تگ ها قرار میگیرد را یک عنصر اچ تی ام ال مینامند.
<Tag Attribute_Name="Attribute_Value" Attribute_Name="Attribute_Value">Content</Tag>
تگ ها
تگ ها در واقع کلمات کلیدی هستند که مرورگر با دیدن آنها در بین مطالبی که در سند اچ تی ام وجود دارد، میتواند عناصر اچ تی ام ال و نشانه گذاری های انجام شده را تشخیص دهد و بفهمد که محتوای درون هر تگ چه کاربردی دارد و برای چه هدفی در صفحه قرار گرفته اند
تگ شامل سه بخش اصلی است، تگ شروع، تگ پایان و محتوای بین تگ شروع و پایان اما بعضی از تگ ها در اچ تی ام ال فقط شامل یک تگ میباشند یعنی تگ شروع یا تگ پایان به عنوان یک عنصر عمل میکند و چون این تگ ها محتوایی ندارند نیازی به هردو تگ شروع و تگ پایان ندارند مثلا تگ <Br> یکی از آنهاست.
این را مد نظر داشته باشید که تگ ها در اپ تی ام ال از پیش تعریف شده اند و نمیتوان تگ های جدید را ساخت، به این دلیل که مرورگر نمیتواند وظیفه آن ها را در سند اچ تی ام ال مشخص کند. مرورگر ها اسناد اچ تی ام ال را از بالا به پایین و در اولویت پایین تر از چپ به راست میخوانند.
- نام تگ درون علامت های <> قرار میگیرند.
- هر تگ در سند اچ تی ام ال یک وظیفه مشخص را به عهده دارد.
- در اکثر موارد، بعد از تگ های شروع یک تگ پایان نیز باید استفاده شود. (مگر موارد خاصی که بعدا بحث میشود.
- برخی تگ ها در اچ تی ام ال یک بخشی هستند یعنی فقط شامل تگ باز یا تگ بسته به همراه اتربیوت های آن میشوند.
تگ شروع
تگ شروع در واقع یا نام از پیش تعریف شده است که درون <Tag> قرار گرفته است و شروع عنصر اچ تی ام ال را مشخص میکند. به مرورگر میگوید که از اینجا به بعد هر چیزی را که دیدی درون به عنوان محتوای این تگ شناسایی کن تا به تگ پایان برسی.
تگ پایان
تگ پایان همان نام تگ شروع است که مانند رو به رو درون </Tag> قرار گرفته است. در واقع مرورگر با رسیدن به این تگ ادامه محتوای سند اچ تی ام را درون این عنصر قرار نمیدهد و در واقع پایان محتوای آن عنصر را به مرورگر اعلام میکند.
چند مثال از تگ های کامل در اچ تی ام ال
هدینگ ها: <H1>,<H2>,…,<H5>,<H6>
پاراگراف: <P>
فرم: <form>
و …
تگ های تو در تو
در اچ تی ام ال میتوان در هر تگ کامل -تگی که شامل یک تگ شروع و یک تگ پایان باشد- به تعداد دلخواه تگ های دیگر قرار داد. در مثال زیر یک سند اچ تی ام ال ساده را میبینید که تگ ها به صورت تو در تو در سند قرار گرفته اند. در واقع عناصری که در یک عنصر دیگر(بین تگ شروع و تگ پایان) قرار میگیرند، فرزند عنصری هستند که درون آن قرار گرفته اند.
اگر چند عنصر درون یک عنصر وجود داشته باشد، همه آن عناصر فرزند عنصری که درون آن قرار گرفته اند. این رفتار برای ایجاد فهم بهتر برای مرورگر در مورد محتوای سند اچ تی ام ال است. مثلا عناصر مربوط به یک فرم درون عنصر فرم قرار خواهند گرفت و ایتم های یک لیست درون لیست.
مثال تگ های اچ تی ام ال
<!DOCTYPE html>
<html>
<head>
<title>نام صفحه</title>
</head>
<body>
<h1>اولین سر فصل</h1>
<p>اولین پاراگراف</p>
<br>
<form>
<input type='text'>
</form>
</body>
</html>
توضیح مثال
تگ هایی که در مثال بالا استفاده شده است اکثرا در آموزشات قبلی توضیح داده شده اند پس به سراغ توضیح تگ های جدید که در این صفحه مشاهده میکنید میرویم.
<From>: این تگ یک عنصر فرم را درون سند اچ تی ام ال ایجاد میکند که به وسیله آن میتوان اطلاعاتی را از کاربر دریافت کرد.
<Input>: یک فیلد برای ورود اطلاعات درون عنصر فرم ایجاد میکند که در مثال بالا نوع آن بر روی تکست تنظیم شده است که یک اتربیوت میباشد و در اینجا مشخص میکند که فقط متن میتواند در این فیلد گرفتن ورودی وارد شود.
<Br>: این تگ باعث میشود که یک خط بین مطالب قبلی و بعدی خودش فاصله بیوفتد.
تگ های یک بخشی
همانطور که در بالا گفته شد برخی از تگ ها در اچ تی ام ال یک بخشی هستند و نیازی به تگ پایان ندارند. این ها به تنهایی یک عنصر محصوب میشنود و معمولا محتوایی در خود جای نمیدهند. هر کدام از آنها کاربرد مخصوص به خود را دارند که بعدا به شرح آنها خواهیم پرداخت
تگ های <Br>,<Hr>,<Input> چند نمونه از تگ های یک بخشی هستند.