آموزش کار با عناصر یا Elements در HTML

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

آموزش کار با عناصر یا Elements در HTML

Free-Learn

کار با عناصر یا Elements در HTML

عناصر یا الِمنت ها در HTML از مجموعه ای از تگ ها به وجود می آیند و معمولا هر عنصر دارای یک تگ شروع و یک تگ پایان می باشد، برای مثال لطفا به دستور زیر توجه نمایید :

همانطور که مشاهده مینمایید عنصر پاراگراف در HTML دارای یک تگ شروع به نام <p> و یک تگ پایانی به نام <p/> می باشد، در واقع هر تگی که شروع کننده باشد در پایان باید همون تگ بسته شود و پایان دهنده اون عنصر باشد.

پس بطور کلی میشه گفت دو نوع تگ در HTML داریم :

  • تگ دارای تگ پایانی یا همتا
  • تگ تنها یا خالی یا بدون تگ پایانی

در قسمت های بعدی از آموزش HTML ان شاالله چیزهای بیشتری را یاد خواهید گرفت، یکی از تگ های تنها که میتواند استفاده زیادی داشته باشد، تگ <br> می باشد که برای شکستن خط و رفتن به سطر بعدی از آن استفاده می شود.

Free-Learn

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

اگر به یک صفحه ی HTML دقت کنید میبینید که تمامی عناصر در HTML هر کدام فرزند یا پدر عنصر دیگری در همان صفحه است، این عمل رو بهش میگیم Nested Elements که وجود آنها نیز در یک صفحه ی وب ضروری می باشد.

یعنی بطور کلی ما در HTML میتونیم یک عنصر رو درون یک عنصر دیگه قرار بدیم و به همین ترتیب تا غیره. اصلا اگه HTML این قابلیت رو نداشته باشه که هیچ ارزشی نداره و ماهم هیچوقت نمی تونیم یک وبسایت با استفاده از HTML‌ طراحی نماییم.

برای مثال لطفا به دستورات زیر توجه نمایید :

همانطور که مشاهده مینمایید عنصر بدنه یا <body> در داخل عنصر <html> قرار گرفته و همچنین عنصر <h1> در داخل عنصر <body> قرار گرفته است، و همینطور تا غیره.. پس بطور کلی یک صفحه ی HTML از حالت Nested Elements تشکیل شده است.

Free-Learn

تگ پایانی را فراموش نکنید

همونطور که تا به الان مشاهده نمودید ما ۲ نوع تگ داریم، ۱ » تگ دارای تگ پایانی و ۲ » تگ تنها که تگ پایانی ندارد، در HTML‌ نباید فراموش کنید که تگ پایانی یک عنصر را ببندید.

بصورت عادی اگر یک تگ که دارای تگ پایانی است مثله <p> را بنویسیم ولی تگ پایانی اش را ننویسیم مرورگر بازم به ما خروجی درست را نشون میده چون بستن این تگ ها اختیاری است.

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

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

پس در نتیجه همیشه در اولین اولویت تگی را که باز میکنید اگه تگ بسته داره حتما اون رو ببندید تا در ادامه به مشکل برنخورید، مثلا اگه شما تگ H2 رو بنویسید ولی تگ پایانی اش رو ننویسید، هر چیزی که بعد از این تگ بیاید در قالب تگ H2 نمایش داده میشود.

همیشه در اولین فرصت و اولویت تگی را که باز شده است ببنیدید تا بعدا و در ادامه کار به مشکل برنخورید.

مثال شماره ۱ : نبستن تگ پایانی P

امتحان کنید

مثال شماره ۲ : نبستن تگ پایانی H2

امتحان کنید

Free-Learn

آنچه در این جلسه یاد گرفتید

  • بطور کلی ۲ نمونه تگ داریم، اول تگی که دارای تگ پایانی می باشد،دوم تگ تنها که تگ پایانی ندارد.
  • همیشه سعی کنید وقتی یک تگ را باز میکنید بلافاصله اگر تگ پایانی دارد آنرا ببندید.
  • تگ های تنها تگ هایی هستند که فقط تگ شروع دارند و هیچ تگی برای بستن ندارند.

دانلود فایل آموزشی این جلسه

دریافت PDF یا پرینت این مطلب