آموزش HTML - جلسه چهارم
سلام دوستان عزیز؛ با جلسه چهارم از آموزش برنامه نویسی تحت وب «فصل اول - HTML» در خدمت شما هستم. در جلسه قبل به بررسی اختصاری چند تگ از تگ‌های کاربردی و اولیه زبان HTML پرداختیم. در این جلسه سعی در بررسی مفهوم عناصر HTML که در جلسه اول به اختصار توضیح داده شد داریم. هدف از محتوای ارائه شده در جلسه چهارم آموزش این است که بیشتر به مفهوم عناصر در اسناد HTML پی ببریم. چرا که این مفاهیم نقش اساسی در کارکرد‌های آینده ما دارند؛ با ما همراه باشید.
عناصر HTML:
یک عنصر HTML شامل تگ‌های ابتدا و انتهایی و نیز هرآنچه بین این دو است می‌شود.
شاید این تعریف کمی گنگ باشد؛ یا خیلی شبیه به تعریف تگ‌ها باشد. حقیقت این است که تگ‌ها جزئی از عناصر HTML هستند و زیر مجموعه‌ای از عناصر HTML به شمار می‌روند.
گرافی از رابطه مابین عناصر و تگ‌ها در زبان HTML
در واقع یک عنصر و یک تگ جدای از هم نیستند؛ بلکه یک عنصر خود شامل تگ‌ها نیز می‌شود و یک مجموعه کلی‌تر را تشکیل می‌دهد. برخی از ویژگی‌های اصلی یک عنصر HTML عبارتند از:
- یک عنصر HTML به وسیله تگ باز شروع و توسط تگ بسته پایان می‌یابد.
- محتوای عنصر HTML هر آن چیزی است که بین این دو تگ قرار گرفته است. این محتوا می‌تواند شامل متن، تصویر، مدیا و یا حتی یک تگ دیگر باشد.
- بعضی از عناصر HTML خالی (فاقد محتوا) هستند.
- عناصر خالی در تگ باز بسته می‌شوند و نیازی به تگ بسته ندارند.
- تقریبا تمامی عناصر HTML می‌توانند صفت(هایی) را بپذیرند.
عناصر تو در تو:
بسیاری از عناصر HTML می‌توانند تو در تو باشند؛ یعنی این امکان وجود دارد که درون یک عنصر، یک عنصر دیگر تعریف شود. سند HTML زیر نمونه خوبی از این حالت تو در تو است. این سند را در نظر بگیرید:
<!DOCTYPE html>
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
این سند HTML شامل سه عنصر می‌شود؛ آیا می‌توانید آن‌ها را مشخص کنید؟ بسیار خب. من در اینجا به تشریح عناصر موجود در این سند HTML می پردازم:
1. عنصر <p>:
<p>This is my first paragraph.</p>
- عنصر <p> یک پاراگراف را در بدنه صفحه ما تعریف کرده است.
- عنصر <p> با تگ <p> آغاز و با تگ <p/> بسته شده است.
- "This is my first paragraph" محتوای این عنصر است.
2. عنصر <body>:
<body>
<p>This is my first paragraph.</p>
</body>
- عنصر <body> (همانطور که ازنامش پیداست) بدنه صفحه ما را تعریف کرده است.
- عنصر <body> با تگ <body> آغاز شده و با تگ <body/> پایان پذیرفته است.
- محتوای عنصر <body> خود یک عنصر دیگر (عنصر <p>) است. «مفهوم عالی تودرتو بودن عناصر»
3. عنصر <html>:
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
- عنصر <html> کل سند ما را تعریف می‌کند.
- تمامی عناصر زیر مجموعه ای از این عنصر هستند و داخل این عنصر قرار می‌گیرند.
- عنصر <html> با تگ <html> آغاز شده و با تگ <html/> پایان پذیرفته است.
- عنصر <body> و به طور کلی هر عنصر دیگری که در داخل این عنصر تعریف شود محتوای این عنصر را تشکیل می‌دهد.
عناصر خالی (فاقد محتوا):
عناصری از زبان HTML که فاقد محتوا باشند را عناصر خالی (Empty Elements) می‌نامند. عنصر <br> یک عنصر خالی است که تگ بسته ندارد و یک خط شکسته را تعریف می‌کند.
<!DOCTYPE html>
<html>
<body>
<p>
Hi;<br> This My first HTML training.<br> See you Later.
</p>
</body>
</html>
نتیجه کد بالا می شود:
Hi;
This My first HTML training.
See you Later.
نکته تخصصی: در زبان XHTML تمامی عناصر باید تگ بسته داشته باشند؛ از این رو در زبان XHTML تگ <br> به صورت </ br> تعریف می‌شود.
حالا خوبه دو وبه هستیم تا اگه اون بسته شد این باشه خخخ