- آموزش زبان HTML – جلسه اول – مقدمه
- آموزش زبان HTML – جلسه دوم – مثال های مقدماتی
- آموزش زبان HTML – جلسه سوم – تگ ها
- آموزش زبان HTML – جلسه چهارم – صفت ها
- آموزش زبان HTML – جلسه پنجم – هدینگ ها
- آموزش زبان HTML – جلسه ششم – پاراگراف ها
- آموزش زبان HTML – جلسه هفتم – استایل ها
- آموزش زبان HTML – جلسه هشتم – قالب بندی متن
- آموزش زبان HTML – جلسه نهم – نقل قول ها
در جلسه قبلی، یکسری توضیحات در رابطه با مثال های مقدماتی دادیم و حال می خواهیم توضیحاتی در رابطه با تگ ها یا همان عناصر HTML بدهیم. دوستان دقت داشته باشید که عناصر و تگ ها در HTML به یک معنا هستند و تفاوتی ندارند.
یک تگ یا عنصر HTML به طور معمول متشکل از یک تگ شروع و یک تگ پایان می باشد که محتوا در بین این دو تگ مانند مثال زیر، قرار می گیرند:
|
1 |
<tagname>Content goes here...</tagname> |
تمام اجزاء یک تگ HTML از تگ شروع می باشد تا تگ پایان:
|
1 |
<p>My first paragraph.</p> |
نکته: توجه داشته باشید، تگ هایی که هیچ محتوایی ندارند را تگ های خالی یا همان Empty Elements می نامیم. تگ های خالی فاقد تگ پایان می باشند، مانند تگ <br> که در تصویر بالا وجود دارد (وظیفه تگ <br> ایجاد شکست خط است که افراد برای قرار دادن محتوای بعدی در خط بعدی، از آن استفاده می کنند).
تگ های تو در تو HTML
تگ های HTML نیز می توانند تو در تو (Nested) باشند (به طوری که یک تگ HTML حاوی چند تگ HTML دیگر باشد).
تمامی فایل های HTML متشکل از تگ های تو در تو HTML هستند. به مثال پایین که حاوی 4 عدد تگ می باشد، توجه کنید:
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> |
تگ <html> کل فایل HTML را توصیف می کند. تگ <html> دارای یک تگ شروع که به صورت <html> و یک تگ پایان که به صورت <html/> است، می باشد. حال ما در داخل تگ <html>، تگ <body> را داریم.
|
1 2 3 4 5 6 7 8 |
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> |
تگ <body> نیز بدنه فایل HTML را توصیف می کند و تگ شروع آن به صورت <body> و تگ پایان آن به صورت <body/> می باشد.
در داخل تگ <body> ما دو تگ دیگر یعنی <h1> و <p> داریم.
|
1 2 3 4 5 6 |
<body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> |
تگ <h1> درواقع هدینگ یا همان عنوان را توصیف می کند و با تگ <h1> شروع و با تگ <h1/> نیز پایان می یابد.
حال ما در تگ <h1> محتوایی بدین صورت داریم: My First Heading
|
1 |
<h1>My First Heading</h1> |
تگ <p> نیز یک پاراگراف را در HTML توصیف می کند و با تگ <p> شروع شده و با تگ <p/> پایان می یابد و محتوای آن “My first paragraph” است.
|
1 |
<p>My first paragraph.</p> |
تگ پایان را فراموش نکنید
برخی از تگ های HTML به درستی نمایش داده می شوند، حتی اگر برای آن ها تگ پایان وارد نشده باشد.
مثال:
|
1 2 3 4 5 6 7 8 |
<html> <body> <p>This is a paragraph <p>This is a paragraph </body> </html> |
اگر کد هایی که در مثال بالا قرار داده ایم را در مرورگر مشاهده کنید، متوجه می شوید که تمامی کد ها به صورت صحیح نمایش داده می شوند. زیرا تگ پایان برای آن دو کد نیز اختیاری در نظر گرفته شده است.
نکته بسیار مهم: هیچ گاه به این مسئله اعتماد نکنید که اگر تگ پایان قرار ندهید، مشکلی پیش نمی آید. این عقیده غیرقابل اعتماد است و شدیداً پیشنهاد می شود که از تگ پایان برای تمامی تگ ها استفاده شود.
تگ های خالی HTML
همانطور که در جلسه قبلی اشاره کردیم، تگ های خالی (Empty) در HTML تگ هایی هستند که هیچ گونه محتوایی ندارند.
تک <br> نمونه ای از تگ خالی می باشد که فاقد تگ پایان است (همانطور که توضیح دادیم، وظیفه تگ <br> ایجاد خط شکسته و رفتن به خط بعدی است).
|
1 |
<p>This is a <br> paragraph with a line break.</p> |
تگ های خالی می توانند با تگ پایان، بسته شوند. به طور مثال ما می توانیم تگ <br> را به صورت </ br> ببندیم.
زبان HTML 5 نیازی به بستن تگ های خالی ندارد، اما اگر شما می خواهید اعتبار سنجی دقیق تری بر روی آنچه که دارید می نویسید داشته باشید و کد هایتان توسط تجزیه کننده های XML خوانا باشد، می توانید تمامی تگ های HTML را ببندید.
HTML یک زبان حساس نیست
تگ های HTML نسبت به بزرگ و کوچک بودن حروف حساس نیستند، به طور مثال تگ <P> می تواند همان تگ <p> باشد.
استاندارد های HTML 5 نیازی به استفاده از حروف کوچک برای تگ ها را ندارد، ولی ما پیشنهاد می کنیم که از حروف کوچک نیز استفاده کنید، به طور مثال برای مواقعی که می خواهید یک فایل بدون مشکل و درست به عنوان یک فایل XHTML بنویسید، پیشنهاد می شود که از حروف کوچک استفاده کنید.
ثبت ديدگاه