html و css چیست و چه کاربردی دارد؟

HTML چیست؟

HTML مخفف عبارت ( Hypertext Markup Language ) به معنای زبان نشانه گزاری فرامتن است که برای ساختار یک صفحه ی وب مورد استفاده قرار می گیرد.آموزش طراحی سایت با HTML و CSS به ما کمک خواهد کرد تا الفبای طراحی و شکل دهی به صفحات وبسایتمان را فرا بگیریم.

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

کاربرد HTML

• توسعه وب : توسعه دهندگان از کد HTML برای طراحی نحوه نمایش عناصر صفحه وب مانند متن، لینک ها و فایل های رسانه ای توسط مرورگر استفاده می کنند.
• ناوبری اینترنتی : کاربران به راحتی می توانند بین صفحات و وب سایت های مرتبط پیمایش کرده و پیوندها را وارد کنند، زیرا به شدت برای لینک سازی استفاده می شود.
• مستندات وب : HTML سازماندهی و قالب بندی اسناد را مانند Microsoft Word امکان پذیر می کند.

همچنین شایان ذکر است که HTML اکنون یک استاندارد رسمی وب در نظر گرفته می شود. کنسرسیوم وب جهانی (W3C) مشخصات HTML را همراه با به روز رسانی منظم حفظ و توسعه می دهد.

این مقاله به اصول اولیه HTML، از جمله نحوه عملکرد، مزایا و معایب آن، و نحوه ارتباط آن با CSS می پردازد.

HTML چگونه کار می کند؟

وب سایت شامل چندین صفحه  HTML است. به عنوان مثال، یک صفحه اصلی، یک صفحه درباره ما، و یک صفحه تماس با ما، همگی دارای فایل های HTML جداگانه هستند.

اسناد HTML فایل هایی هستند که با پسوند .html یا .htm ختم می شوند. یک مرورگر وب فایل HTML را می خواند و محتوای آن را ارائه می دهد تا کاربران اینترنت بتوانند آن را مشاهده کنند.

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

بخش های اصلی یک عنصر:

• تگ های آغاز : برای بیان اینکه یک عنصر در کجا شروع به اثر می کند استفاده می شود. تگ های شروع در بین یک براکت باز و بسته محدود شده اند. به عنوان مثال، از تگ شروع <p> برای ایجاد یک پاراگراف استفاده کنید.
• محتوا : این خروجی است که سایر کاربران می بینند.
• تگ پایان : مانند تگ آغاز می باشد، اما با یک اسلاید رو به جلو قبل از نام عنصر. برای مثال، </p> برای پایان دادن به یک پاراگراف استفاده می شود.

ترکیب این سه بخش یک عنصر HTML ایجاد می کند:

<p style=”color:purple;font-family:verdana”>This is how you add a paragraph in HTML.</p>

ویژگی دیگر که برای توسعه و برنامه نویسی بسیار مهم است ویژگی کلاس در HTML  است. این ویژگی اطلاعات سبکی را به برنامه اضافه می کند که می تواند روی عناصر مختلفی که در یک کلاس حضور داشته باشند تاثیر داشته باشد.

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

<img src=”/” alt=”Image”>

تگ تصویر دارای دو ویژگی است ، یک ویژگی  src ، به معنای مسیر تصویر، و یک ویژگی  alt، برای توصیف بهتر تصویر. با این حال، محتوا و برچسب پایانی ندارد که ما در دوره رایگان آموزش HTML  و CSS  به طور کامل و کاملا عملی این مسایل را آموزش داده ایم. پس با ما همراه باشید.

تفاوت HTML  و HTML5  چیست؟

اولین نسخه HTML شامل 18 تگ بود. از آن زمان، هر نسخه جدید با برچسب‌ها و ویژگی‌های جدیدی به این زبان اضافه می‌شد. مهم ترین ارتقای زبان تا کنون، معرفی HTML5 در سال 2014 بود.

تفاوت اصلی بین HTML و HTML5 این است که HTML5 انواع جدیدی از کنترل های فرم را پشتیبانی می کند. HTML5 همچنین چندین تگ معنایی را معرفی کرد که به وضوح محتوا را توصیف می کنند، مانند <article>، <header> و <footer>.

مزایا و معایب :

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

مزایای HTML  :

• یادگیری آسان : HTML دارای یک نشانه گذاری تمیز و ثابت و همچنین یک منحنی یادگیری کم عمق است.
• پشتیبانی : این زبان به طور گسترده مورد استفاده قرار می گیرد، منابع اطلاعاتی بسیار زیادی دارد و به صورت خیلی گسترده آموزش و پشتیبانی داده می شود.
• در دسترس بودن : منبع باز و کاملا رایگان است. HTML در اکثر مرورگرهای وب به خوبی اجرا می شود.
• انعطاف پذیر : HTML  به راحتی با زبان های دیگری مانند PHP وjs  قابل ادغام است.

معایب HTML :

• استاتیک بودن : این زبان در درجه اول برای صفحات وب استاتیک استفاده می شود. برای عملکرد پویا، ممکن است نیاز به استفاده از جاوا اسکریپت یا یک زبان پشتیبان مانند PHP داشته باشید.
• جداسازی : کاربران باید صفحات وب مجزایی را برای HTML ایجاد کنند، حتی اگر عناصر یکسان باشند.
• سازگاری با مرورگرها : برخی از مرورگرها ویژگی های جدید را به آرامی اتخاذ می کنند. گاهی اوقات مرورگرهای قدیمی همیشه تگ های جدیدتر را ارائه نمی کنند.

CSS چیست؟

CSS  مخفف عبارت  Cascading Style Sheet می باشد  و برای سبک سازی عناصر نوشته شده در یک زبان نشانه گذاری مانند HTML استفاده می شود.

CSS توسط W3C (کنسرسیوم وب جهانی) در سال 1996 به یک دلیل نسبتا ساده توسعه یافت. HTML  دارای تگ های برای شکل دهی و استیل دهی به صفحه نمی باشد.

برچسب هایی مانند <font> در HTML نسخه 3.2 معرفی شدند و مشکلات زیادی را برای توسعه دهندگان ایجاد کردند. از آنجایی که وب‌سایت‌ها فونت‌ها، پس‌زمینه‌های رنگی و سبک‌های متفاوتی داشتند، بازنویسی کد فرآیندی طولانی و پرهزینه بود. بنابراین، CSS توسط W3C برای حل این مشکل ایجاد شد.

رابطه بین HTML و CSS به شدت با هم گره خورده است. از آنجایی که HTML یک زبان نشانه گذاری است (پایه و اساس یک سایت) و CSS بر سبک (تمام زیبایی شناسی یک وب سایت) تاکید دارد، آنها دست به دست هم می دهند.

CSS  از نظر فنی یک ضرورت نیست، اما احتمالاً نگاه کردن به سایتی که فقط HTML دارد جذاب نخواهد بود به این دلیل که اصلا زیبایی ندارد.

مزایای CSS :

تفاوت بین وب‌سایتی که CSS را پیاده‌سازی می‌کند و وب‌سایتی که این کار را انجام نمی‌دهد بسیار زیاد و مطمئناً قابل توجه است. ممکن است وب سایتی را دیده باشید که به طور کامل بارگیری نمی شود و پس زمینه سفید دارد و بیشتر متن آن آبی و سیاه است. این بدان معنی است که قسمت CSS سایت به درستی بارگیری نشده است یا به طور کلی وجود ندارد.

سایتی که فقط HTML دارد اینگونه به نظر می رسد، و فکر می کنم شما هم قبول دارید که خیلی جذاب نیست.

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

CSS  به شما امکان می دهد همه چیز را در یک فایل متفاوت سبک سازی کنید، بنابراین استایل را در آنجا ایجاد کنید و بعداً فایل CSS را در بالای کد های HTML معرفی می کنید. این امر نشان‌گذاری واقعی HTML را بسیار تمیزتر و نگهداری آسان‌تر می‌کند.

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

CSS  به شما امکان می دهد چندین استایل را در یک صفحه HTML داشته باشید، بنابراین امکان سفارشی سازی تقریباً بی پایان است.

CSS چگونه کار می کند؟

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

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

هر اعلان شامل یک نام ویژگی CSS و یک مقدار است که با یک دونقطه از هم جدا شده اند. یک اعلان CSS همیشه با یک نقطه ویرگول به پایان می رسد و بلوک های اعلان در بین دو پرانتز قرار گرفته اند.

در نمونه کد زیر تمام عناصر موجود در پاراگراف به رنگ آبی و به صورت بولد خواهند بود:

<style>

p {

color: blue;

text-weight: bold;

}

<style>

و در پاراگراف همگی وسط چین و با سایز فونت 16 و به رنگ صورتی خواهند بود:

<style>

p {

text-align: center;

font-size: 16px;

color: pink;

}

</style>

سبک های متفاوت CSS :

• Inline : با عناصر خاصی که دارای تگ <style> هستند کار می کند. هر مؤلفه باید سبک باشد، بنابراین ممکن است بهترین یا سریعترین راه برای مدیریت CSS نباشد. اما می تواند مفید واقع شود.
• Internal : سبک‌های CSS که به این روش انجام می‌شوند، هر بار که یک وب‌سایت به‌روزرسانی می‌شود، بارگذاری می‌شوند، که ممکن است زمان بارگذاری را افزایش دهد. علاوه بر این، نمی‌توانید از همان سبک CSS در چندین صفحه استفاده کنید زیرا در یک صفحه وجود دارد. با این حال، این نیز با مزایایی همراه است. داشتن همه چیز در یک صفحه اشتراک‌گذاری الگو را برای پیش‌نمایش آسان‌تر می‌کند.
• External : روش خارجی ممکن است راحت‌ترین روش باشد. همه چیز به صورت خارجی روی یک فایل .css انجام می شود. این بدان معناست که شما می توانید تمام استایل ها را در یک فایل جداگانه انجام دهید و CSS را در هر صفحه ای که می خواهید اعمال کنید. سبک خارجی نیز ممکن است زمان بارگذاری را بهبود بخشد.

جمع بندی :

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

HTML  یک زبان مبتدی پسند با پشتیبانی فراوان است و عمدتاً برای صفحات وب سایت استاتیک استفاده می شود. HTML  بهترین عملکرد را در کنار CSS  برای استایل دهی دارد.

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

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