آموزش CSSآموزش طراحی سایت

جلسه ۰۳ – فرق HTML و CSS

تفاوت بین اچ تی ام ال و سی اس اس در چیست

قبل از وارد شدن به بحث یادگیری تخصصی، لازمه که یک سری چیزها رو در مورد CSS و HTML بیشتر بدونیم و تفاوتشون رو بررسی کنیم.

آیا CSS زبان برنامه‌نویسی است؟

قبل از پاسخ دادن به این پرسش، باید بدونیم منظور از زبان برنامه‌نویسی چیه؟

ساده بگیم: زبان برنامه‌نویسی، زبانی هست که در اون از شرطها، حلقه ها و اینطور قوانینی استفاده میشه. اما در CSS و HTML، این قوانین رو نداریم. در واقع HTML یک زبان نشانه گذاری و CSS، یک زبان شیوه نامه هست.

زبان نشانه گذاری یا markup language، زبانی هست که بر اساس یک سری از قواعد، وظیفه چینش درست متن و در کل، محتوا رو برعهده می‌گیره و تا حد ابتدایی‌ای، می‌تونه اون هارو ویرایش کنه. البته قبلا درباره اچ تی ام ال چیست صحبت کردیم.

زبان شیوه نامه (استایل دهی) یا style sheet language، زبانی هست که نحوه نمایش متن و محتوای تولید شده توسط زبان نشانه گذاری رو برعهده داره.

حالا با علم به این چند خط از اطلاعات، به سوال اصلی این مقاله بپردازیم:

فرق HTML و CSS چیست؟

در جلسه اول با عنوان CSS چیست توضیح دادیم که CSS وب سایتی که توسط HTML طراحی شده رو استایل میده و نحوه نمایشش رو مشخص می‌کنه! آیا CSS زبانی جداگونه از HTML هست؟

پاسح منفیه. بیاید به طوطی‌ای که در جلسه اول با کمک اون، مفهوم HTML و CSS رو درک کردیم رو بار دیگه ملاقات کنیم!

فرق بین html با css چی هست

اشتباهی که اکثر هنرجوهای عزیز در اول کار می‌کنن، اینه که ممکنه فکر کنن پیج های بدون استایل و زشت با HTML طراحی می‌شن، و پیج های زیبا با CSS !!!

درحالی که HTML، یک همراه همیشگی برای CSS محسوب میشه.

  • HTML، اسکلت، گوشت و پوست طوطی ما رو تشکیل میده!
  • CSS، پرها و جذابیت این طوطی رو بر عهده داره!
  • و زبان های دیگه مثل جاوااسکریپت، بال زدن و صحبت کردن ایشون رو برعهده دارن!

بنابراین این دو زبان، یعنی HTML و CSS، در کنار هم، صفحه استاتیک یک وب سایت رو طراحی می‌کنن.

حالا چطوری باهم مرتبط می‌شن؟

فایل CSS، فایل HTML

همونطور که در آموزش HTML، یاد گرفتین، کد های HTML با پسوند html و به فرم زیر ذخیره می‌شن:

file.html

کد های CSS هم به همین فرم و در فایل جداگونه ای با پسوند css ذخیره می‌شن:

file.css

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

جمع بندی

در این مقاله یک مقدار کلی تر به HTML و CSS نگاه کردیم و تفاوت‌های موجود بین این زبان‌ها را بررسی کردیم.

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

مدیر محتوا: علی اسمعیلی
سئوی محتوا: پوریا آریافر

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

‫8 نظر داریم، تو هم نظر بذار، پاسخ کامل میدیم :)

  1. واقعا مبحث طوطی رو خیلی خوب گفتی ولی من به دنبال تفاوت سایت وورد پرسی و html ای هستم و می خواستم توضیحات کاملی در باره این سوال داشته باشم

    1. سلام علی ، خب تفاوت اینا ربطی به فرق HTML و CSS نداره.
      اینا مربوط میشن به وب سایت پویا و استاتیک که وردپرس یک وب سایت پویا هست و HTML یک کد استاتیک.

      1. در باره وبسایت پویا و استاتیک هم هر کدوم یه خط توضیح بدی ممنون می شم

        1. سلام دوباره علی جان
          وب سایت ایستا یا استاتیک : به وب سایت های با محتوایی ثابت میگن و اگه کاربران در زمان های مختلف وارد وب سایت بشن محتوای متفاوتی رو نمیبینن. ممکن هم هست که تغییری داخل صفحات ایجاد کنن که بازم اونا ثابته ولی خب مثلا صفحات اگر هی به مرور زمان تغییر کنند، صفحات به پویا تغییر میکنند. شاید فکر کنی مثلا صفحه مقالات توی وردپرس محتوای ثابتی داشته باشند ولی همیشه این رو در نظر بگیر که حتی همین بخش نظراتی که وجود داره باعث میشه صفحه به مرور زمان هی تغییر کنه.
          وب سایت های پویا : به وب سایت های با صفحات هوشمند میگن که به مرور زمان صفحاتش تغییر میکنه. مثلا صفحه اصلی وب سایت میزفا وقتی ما مقاله ای میزاریم اون مقاله داخل صفحه اصلی به صورت هوشمند نمایش داده میشه و این به این معنیه که وب سایت میزفا یک وب سایت پویا هست. یک مثال دیگه هم داخل همون بخش ایستا زدم که داخل بخش مقالات هم ما این پویا بودنه رو میتونیم حس کنیم.

          امیدوارم به جوابت رسیده باشی ، موفق باشی.

  2. عالییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییی
    عالی
    بود 🙂
    سوال بود برام که اقا این چه فرقی دارند یه سایت دیگه خوندم ولی نفهمیدم
    توضیح شما راحت مطلب را برام باز کرد و
    درک بهتر تو ذهن تا ابد می‌مونه . سایتتون را دنبال خواهم کرد 🙂

    1. سلام ، باعث افتخاره برامون و خوشحالیم که این مقاله بهتون کمک کرده. موفق باشید.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 MB.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

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

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر