illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

31604 ۲۰ شهریور ۹۱

ساختار تگ ها:


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

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

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

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

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

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

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

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


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

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

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


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

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

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

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

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

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

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

دیدگاه ها 17 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

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

    • ‏‏
      لقمان آوند(۲۲ شهریور ۱۳۹۱)

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

    • ‏‏
      سجاد دریس(۲۲ شهریور ۱۳۹۱)

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

  • ‏‏

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

    • ‏‏
      لقمان آوند(۲۲ شهریور ۱۳۹۱)

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

  • ‏‏

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

  • ‏‏

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

  • ‏‏

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

  • ‏‏

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

    • ‏‏
      سجاد دریس(۳۰ اسفند ۱۳۹۱)

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

  • ‏‏

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

    • ‏‏
      لقمان آوند(۷ فروردین ۱۳۹۲)

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

  • ‏‏

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

  • ‏‏

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

    • ‏‏
      سجاد دریس(۲۷ تیر ۱۳۹۲)

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

  • ‏‏
    فاطمه(۹ مرداد ۱۳۹۲)

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

    • ‏‏
      کیوان علی محمدی(۱۰ مرداد ۱۳۹۲)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram