آموزش HTML (قسمت 2) : تگ ها در HTML

- visibility ۱۷ mode_comment

ساختار تگ ها:

تگ ها از سه قسمت تشکیل می شوند:

  1. یک علامت کوچکتر (>)
  2. نام تگ
  3. یک علامت بزرگتر (<)

تگ ها معمولا به صورت جفتی به کار می روند و ساختار جدیدی به نام عنصر (element) را تشکیل می دهند. به مثال زیر دقت کنید:

همانطور که در مثال بالا میبینید یک عنصر از سه قسمت اصلی تشکیل می شود: تگ آغازین، محتوای تگ (که میتواند یک متن ساده، یک عنصر دیگر و یا خالی باشد)  و تگ پایانی.

به ساختار تگ پایانی توجه کنید که تفاوت آن با تگ آغازین فقط در "/" است که قبل از نام تگ در تگ پایانی می آید.

info نکته :

دقت داشته باشید که هر تگی که باز میشود باید درجایی بسته شود. که البته استثنائاتی هم وجود دارد که بعدا آن ها را هم معرفی خواهیم کرد.

بسیار خب. تا اینجا با طریقه نوشتن تگ ها آشنا شدید. از این به بعد به معرفی تگ های HTML پرداخته میشود.

ساختار اصلی یک صفحه وب:

هر صفحه وب (HTML) با تگ <html> شروع و به تگ بسته‌ <html/> ختم میشود. در واقع با این عنصر به مرورگر می گوییم که اولاً با یک صفحه از نوع HTML روبروست، ثانیاً صفحه با تگ باز <html> شروع و با تگ پایانی <html/> پایان می یابد.

در داخل عنصر html دو عنصر اصلی صفحه وجود دارند:

  • عنصر <head> : این عنصر که قسمت head (سر) صفحه را مشخص میکند حاوی اطلاعاتی در مورد صفحه است. به عنوان مثال می تواند شامل عنوان و توضیحاتی در مورد آنچه در قسمت بدنه آمده است باشد. این قسمت از تگ <head> و تگ بسته <head/> و هر چیزی که بین آنهاست تشکیل می شود.

  • عنصر <body>: مشخص کننده بدنه صفحه است و در واقع حاوی اطلاعاتی است که قرار است در پنجره مرورگر نمایش داده شود. این قسمت از تگ <body>  و تگ بسته <body/> و هر چیزی که بین آنهاست تشکیل می شود.
info نکته :

معمولا آنچه که در قسمت head صفحه قرار میگیرد در صفحه نمایش داده نمی شود اما هر آنچه که در قسمت body قرار گیرد در صفحه نمایش داده خواهد شد.

سه عنصر <head> , <html>  و <body> با هم ساختار اصلی یک صفحه وب را تشکیل می دهند. مثال زیر ساختار اصلی یک صفحه را نمایش میدهد:

ذکر این نکته اهمیت دارد که وقتی عناصر شامل عناصر دیگری باشند، توی هم قرار گرفتن آن ها باید به صورت مناسب انجام شود، یعنی هر عنصر به طور کامل باید درون عنصر پدرش قرار گیرد. هر وقت که از یک تگ بسته استفاده میکنید، این تگ بسته، باید وابسته به آخرین تگ بازی باشد که هنوز بسته نشده!.
به عبارتی دیگر، اول تگ A را باز کنید، سپس تگ B را باز کنید، سپس تگ B را ببندید و در آخر تگ A را ببندید. به عنوان مثال اگر بخواهیم فقط کلمه "پاراگراف" به صورت ضخیم دربیاید، بایستی:

اما کد زیر نادرست است، زیرا تگ بسته <b/>  داخل تگ <p> قرار نگرفته است :

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

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

comment دیدگاه کاربران
hajian1

سلام
من این درس رابارهاشروع وبه پایان رسانده ام
اماازدرس اول تاحال این آموزش رابادقت دنبال کرده ام خیلی جالب وجذاب است البته نحوه آموزش این سایت
درضمن شنیده ام htmlورژن جدیدش منتشرشده استxhtml5اگرچنین است لطفاًنظربدهیدکه درست است یانه
درضمن درموردآموزش طراحی وب سایت بانرم افزاراکسپرن راهم اگرممکن است توضیحی محبت فرمایید
باتشکروسپاس فراوان

لقمان آوند

سلام
ممنون ، دیدگاهتون نا مفهوم بود . متوجه نشدم چی گفتید .

سجاد دریس

سلام.
دوست عزیز شما تاپیکی با همین مضمون نیز توی انجمن زده بودین جوابتون رو اونجا دادم 😳

hajian1

سلام
منظورم این بوددرصورت امکان درادامه آموزشhtmlازhtml5برای آموزش چون پیشرفته وبه روزاست به کاربران لطفاًآموزش دهید
باتشکر

لقمان آوند

چشم
سعی میشه در مورد مزیات و امکانات html5 هم در آینده صحبت بشه .

parvizb7

تا حالا چند بار از سایتهای دیگه خواستم اچ تی ام ال یاد بگیرم از همون اول برام گنگ بوده. اما اینبار واقعا برام قابل فهم بود. مرسی ازتون

hajian1

سلام
خیلی ممنون ازلطف ومحبت شماانشاالله همیشه موفق وکامرواباشید
باشکر

hajian1

سلام
لطفاً قسمت سوم آموزش رادرسایت قراردهیدممنونتان می شویم
باتشکرقبلی

alireza0025

سلام
من تازه با 7learn‏ آشنا شدم و واقعا مطالب سایتتون عالی هستش!
اگه من html ‎‎& css ‎‎& php ‎‎& javascript‏ را یاد بگیریم،میتونم طراح وب شوم؟
یادگیری هر کدام از موارد فوق چقدر وقت میبرد؟
درآمد طراحان وب چقدره؟

سجاد دریس

سلام.
ممنون.
بستگی به خود شما داره که چقدر علاقه داشته باشین و چقدر سعی و تلاش کنید ممکنه 2 ماه برای یادگیری هر زبان ممکنه بیشتر،
اما اگه واقعا میخوایید یک طراح وب بشید باید وقت زیادی به یادگیری و تمرین اختصاص بدین، من نزدیک 5-6 ماهه دارم php رو میخونم، اما میدونم کامل یاد نگرفتم، چونکه واسه اینکه بخوام یک طراح وب بشم، این مدت زمان خیلی کمیه واسه یادگیری همچین زبانی.. حالا شما یادگیری بقیه زبان ها رو هم درنظر بگیرید، باید حداقل 2 – 3 سال یا بیشتر وقت بذارین تا بتونید به یک طراح وب حرفه ای تبدیل بشید.
درآمدش هم بر حسب پروژه هاییه که میگیرین، یا که توی شرکتی استخدام بشید، متغییره.

Baran

سلام
ممنون از مطالب خوبتون
یادگیری زبان HTML و css چقد وقت میبره؟

لقمان آوند

اگه مداوم وقت بزارید 1 یا دو ماه میشه یادشون گرفت …

azad1top

oOoOoO H SHET …… 😳 😯
سلام. در مورد تک توضیح میدید!

یاس

دوست خوبم سلام خوبی خیلی خوشحال شدم ک فهمیدم خوزستانی هستی خوشحال تر شدم ک فهمیدم همسن وسال خودمی اگه میشه ب منم سربزن نظرم بزار برام من تازه میخوام شروع کنم برنامه نویسی رو خداروشکرشماروپیدا کردیم واین سایت خوبتون

سجاد دریس

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

فاطمه

ببخشید من تازه میخوام شروع کنم …
ولی یکم گیجم …
هر چی میخونم متوجه نمیشم ….
مشکل دارم …
چیکار کنم ؟؟؟

کیوان علی محمدی

سلام از قسمت اول مطلب رو بخونید،اشکال نداره چندین و چند بار بخونید تا متوجه بشید.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.