آموزش های ویدیویی رایگان برنامه نویسی و وب

آموزش تصویری HTML و CSS – قسمت دوم از سری آموزش های برنامه نویسی وب و وردپرس

آموزش تصویری برنامه نویسی وب سایت با استفاده از وردپرس - قسمت دوم آموزش ویدیویی HTML و CSS

10

در قسمت اول آموزش ویدیویی HTML و CSS تگ های اچ تی ام ال را یاد گرفتیم و گفتیم که HTML بدون CSS مثل انسان بدون پوست و گوشت است.در این قسمت از آموزش ویدیویی HTML و CSS به آموزش CSS می پردازیم.به خاطر داشته باشید در صورتی که قسمت اول آموزش تصویری HTML و CSS را ندیده اید ٬ برای آنکه بهتر متوجه مطالب توضیح داده در این قسمت شوید ٬ حتما قسمت اول سری آموزش های تصویری برنامه نویسی وب را مشاهده نمایید.

 

آموزش تصویری HTML و CSS بصورت ویدیویی

CSS مخفف عبارت Cascading Style Sheet است و همانطور که از نامش پیداست به معنی سندی برای استایل دهی به کار می رود.ما با استفاده از سی اس اس به کد های اچ تی ام ال خود استایل نسبت می دهیم و مشخص می کنیم که عناصر و تگ های HTML ما چه خصوصیاتی داشته باشند.خصوصیاتی مثل رنگ ٬ سایز متن ٬ طول و عرض و …

همچنین خیلی کوتاه در مورد Inline CSS صحبت کردیم و فهمیدیم که حتما نیاز نیست برای استایل دهی به عناصر صفحه خود ٬ فایل CSS جداگانه به HTML اضافه نماییم.

البته حواستان باشد که خصوصیاتی که در این قسمت توضیح داده شد ٬ تنها خصوصیات پایه هستند و CSS تنها به همین چند خصوصیت محدود نمی شود.مخصوصا هنگامی که با CSS3 آشنا شوید.

آموزش ویدیویی HTML و CSS قسمت دوم

CSS 3 چیست؟ در قسمت های بعدی آموزش تصویری HTML و CSS

CSS 3 نسخه سوم زبان CSS است و ویژگی های جذاب بسیار زیادی به همراه خود عرضه کرده است.ویژگی هایی مثل انیمیشن ها ٬ توابع کمکی ٬ تنظیمات فونت ها و کلی خصوصیت دیگر.تنها مشکلی که در استفاده از سی اس اس ۳ وجود دارد ٬ پشتیبانی نکردن مرورگر های قدیمی از آن است.اما به این حال بسیاری از توسعه دهندگان از CSS 3 استفاده می کنند ٬ چرا که تنها درصد خیلی ناچیزی از افراد هنوز هم از مرورگر های قدیمی و پشتیبانی نشده استفاده می کنند.

تگ <Div> در آموزش تصویری HTML و CSS

همانطور که در قسمت قبل گفتیم ٬ در این قسمت در مورد عنصر <div> صحبت کردیم و گفتیم تفاوت آن و دلیل محبوبیتش نسبت به دیگر تگ های HTML چیست. تگ <Div> را می توان جزو پر استفاده ترین عناصر اچ تی ام ال به شمار آورد.پس سعی کنید در صورتی که مفهوم آن را در طول آموزش درک نکردید ٬ در مورد آن جستجو کرده و تنها به این ویدیو بسنده نکنید.

نحوه بستن فضای خالی بعد از Float در CSS ( استفاده از خصوصیت Clear:Both )

در صورتی که در مورد استفاده از خصوصیت Float برای شناور کردن عناصر در صفحه به مشکل ایجاد فضای خالی و به هم ریختن عناصر برخورد می کنید ٬ به خاصر داشته باشید بعد از هر چند عنصری که به آنها Float می دهید ٬ باید عنصری داشته باشید که دارای خصوصیت سی اس اس Clear:Both; باشد.چرا که در غیر اینصورت با مشکل به هم ریختن عناصر مواجه می شوید.پس حتما حتما استفاده از Clear را فراموش نکنید.

مطالبی که در این قسمت از آموزش تصویری HTML و CSS از سری آموزش های تصویری برنامه نویسی وب و وردپرس پوشش داده شده است را در لیست پایین مشاهده کنید :

افزودن CSS به HTML ( Link CSS To HTML )

صدا زدن عناصر در CSS ( CSS Selectors )

بلاک های سی اس اس ( CSS Blocks )

خصوصیات آموزش داده CSS را نیز در لیست زیر می توانید مشاهده نمایید :

  • Margin
  • Padding
  • Font-Size
  • Font-Family
  • Text-Align
  • Background-Color
  • Background-Image
  • Background-Repeat
  • Background-Size
  • Background-Position
  • Width
  • Height
  • Float
  • Clear
  • Border
  • Border-Radius

در صورتی که جایی از قسمت دوم آموزش تصویری HTML و CSS بصورت کامل متوجه نشده اید و یا در طول آموزش دچار مشکل شده اید ٬ در قسمت کامنت ها با ما در میان بگذارید.

10 نظرات
  1. مهدی می گوید

    ممنونم از آموزش ها

    1. محمد صالح موسی پور می گوید

      خواهش میکنم مهدی جان.
      ایشالا که قالب بعدی تک تیپ رو خودت بنویسی 😉

  2. Eli_22 می گوید

    سلام. من خیلی وقته مناسب قسمت های بعدی این برنامه هستم

    1. محمد صالح موسی پور می گوید

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

  3. Eli_22 می گوید

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

    1. محمد صالح موسی پور می گوید

      سلام دوباره.
      حتما در مورد جاوا اسکریپت یک سری آموزش مفصل خواهیم داشت 🙂

      1. Eli_22 می گوید

        ممنونم، منتظر قسمت سوم این مجموعه هستم👌🙂

  4. ممد صالح موسی پور می گوید

    سلام
    خیلی منتظر قسمت بعدی هستیم
    خیلی ممنون بخاطر آموزش

  5. عمران می گوید

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

    1. محمد صالح موسی پور می گوید

      سلام وقت بخیر.
      جواب بصورت کوتاه خیر هست ! در واقع با HTML و CSS شما میاین یه ظاهر برای وبسایتتون درست میکنید.حالا مطالب که میخواید بهش اضافه کنید باید یک پنل مدیریت براش نوشته شه که این کار با HTML و CSS امکان پذیر نیست.در نتیجه نیاز دارید که از زبان های برنامه نویسی مثل PHP یا جاوا اسکریپت استفاده کنید.اگر هم که بلد نباشید میتونید یا از سیستم های آماده مدیریت محتوا مثل وردپرس استفاده کنید یا از همین راهی که گفتید مطلب جدید اضافه کنید که واقعا کار دشواریه و خیلی چیزا مثل کامنت و اینجور چیزا رو نخواهید داشت.همین سایت هم با سیستم مدیریت محتوای وردپرس ساخته شده 🙂
      توی زبان برنامه نویسی PHP یا جاوا اسکریپت یا زبان های مشابه ، شما در واقع نیاز به یک پایگاه داده دارید که اطلاعات شما اونجا ذخیره میشه و هربار کاربری سایت شما رو باز میکنه، به پایگاه داده شما متصل میشه ، اطلاعات رو دریافت میکنه ( مطالب ، کامنت ها ، تصاویر ) و بعد تحت HTML و CSS که نوشته شده به نمایش در میاد.
      موفق باشید

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.