:: امیر یاوندحسنی ::

روزنوشت‌‌هایی در زمینه‌: فناوری اطلاعات، گرافیک، طراحی وب

روزنوشت‌‌هایی در زمینه‌: فناوری اطلاعات، گرافیک، طراحی وب

ویژه های وبلاگ
خبرنامه وبلاگ

آدرس ایمیلتان را وارد کنید:

شبکه های اجتماعی
تائيديه پرداخت با Payline

آموزش HTML - جلسه چهارم

سه شنبه, ۱۹ شهریور ۱۳۹۲، ۰۵:۱۲ ب.ظ

آموزش 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> تعریف می‌شود.

اگر این مطلب را می‌پسندید آن‌را در گوگل محبوب کنید:

نظرات  (۲)

۲۰ شهریور ۹۲ ، ۰۰:۲۶ محمدرضا مهدیه
شرمنده رفیق که سایت ما فعلا رفت تو کما، میدونی خودت که تا فردا دوباره از خواب پامیشه

حالا خوبه دو وبه هستیم تا اگه اون بسته شد این باشه خخخ

پاسخ:
من خیلی حالم گرفته شد وقتی دیدم وبت رفت توی کما!
گفتم که یه پیشنهاد خوب برات دارم تا دیگه از کما ها خلاص شی. ایشالله!!!
حیفه که دوست گل من سایت تو کما رفته داشته باشه؛ راستی من کدوم وبتو لینک کنم؟
این وب شخصیه یا پسرونه رو؟ شایدم جفتشون ;)
۱۹ شهریور ۹۲ ، ۲۳:۲۴ پســــــرونه
سلام

وب شما هم خیلی قشنگه

در مورد هاست حرف دلمو زدیا

قبل این سایته هم یه سایتی داشتم که دو سه سالی فعالیت داشت ولی چون رایگان بود یه دفه بستندشو کلا پرید حتی اجازه بک آپ هم ندادند. ولی خب چه کنیم که عشق سایتای وردپرسیم :-)

----
راستی نوشتن آموزش برنامه نویس هم کلی سختی داره. ممنون از زحماتتون
اگه لوگوی 40 در 40 دارید برای لینک توی وب جدید. ولی خب توی وب قبلی ینی بلاگ لینک شدید.

خب موفق باشی
یاعلی
پاسخ:
سلام؛ مرسی که اینقدر زود بازدید منو پس دادی!
عاشق اینجور وبمسترهای باحال و با معرفتم؛ کارت خیلی درسته. تصمیم گرفتم یه حال اساسی بهت بدم. موافقی؟

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
تجدید کد امنیتی