html-css چیست؟

html-css کلید ورود شما به دنیای طراحی وب است اگر میخواهید در حوزه طراحی وب هرفعالیتی داشته باشید html-css  بسیار سادست و یکی از راحت ترین زبان های برنامه نویسی هستند اما اینکه چگونه وچقدر عمیق آن را فرا بگیرید خیلی مهم است باید در ادامه اطلاعاتی درباره html-css در اختیارتان میزاریم.

html-css مخفف چیست؟

html و css به ترتیب مخفف the Hypertext Markup Language و Cascading Style Sheets هستند، 

HTML چیست؟

HTML مخفف HyperText Markup Language به معنی زبان نشانه‌گذاری ابرمتن است. این زبان به عنوان زبان پایه برای ساخت صفحات وب به کار می‌رود و وظیفه‌ی آن تعریف ساختار و محتوای یک صفحه وب است. HTML با استفاده از تگ‌های مختلف، به مرورگر می‌گوید که هر بخش از صفحه چه نوع محتوایی را نمایش دهد.

برای مثال، از تگ h1 برای نمایش عنوان اصلی صفحه، از تگ p برای نمایش پاراگراف‌ها و از تگ img برای نمایش تصاویر استفاده می‌شود

CSS چیست؟

CSS مخفف Cascading Style Sheets به معنی برگه‌سبک‌های آبشاری است. این زبان برای قالب‌بندی و چیدمان عناصر HTML به کار می‌رود و به طراحان وب امکان می‌دهد تا ظاهر صفحات وب خود را به طور کامل کنترل کنند. با استفاده از CSS می‌توان رنگ، فونت، اندازه، حاشیه، موقعیت و سایر ویژگی‌های ظاهری عناصر HTML را تنظیم کرد.

تاریخچه زبان HTML :

برای اینکه بدانیم HTML از کجا آمده باید سفر کوتاهی به سال 1991 داشته باشیم. زمانی که آقای Tim Berners-Lee کار خود را روی 18 Tag یا همان برچسب ساده شروع کرد و اولین نسخه HTML را طراحی کرد. HTML روز به روز پیشرفت کرد و در هر نسخه امکانات بیشتری را در قالب تگ‌‌های کاربردی‌تر در اختیار طراحان قرار داد.

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

HTML5 چیست؟

قصد داریم در این بخش به این موضوع بپردازیم که HTML5 چیست و چه فرقی با HTML دارد. تا سال 2008 بازار HTML4 داغ بود و به طور گسترده استفاده می‌شد. اما مشخص بود که این نسخه از HTML ضعف‌هایی دارد و باید بروزرسانی شود. به همین دلیل کمپانی WHATWG توسعه این زبان را در دست گرفت و استانداردهای آن را ارتقا داد. ضعف اصلی که باید روی آن کار می‌شد مربوط به چندرسانه‌ای (multimedia) و گرافیک بود.

HTML5 در سال 2014 یک آپدیت مهم و اساسی را تجربه کرد. در این آپدیت تگ‌های HTML جدیدی اضافه شدند که تاثیر بسیار مثبتی در بالا بردن کیفیت و بهبود تجربه کاربران داشتند. پس از این آپدیت طراحی سایت‌ها ساختار منظمی پیدا کرد و مفاهیم قدیمی (مانند استفاده از table در بدنه اصلی صفحات) کنار گذاشته شدند.

تاریخچه CSS:

css برای اولین بار در حدود سال 1996 ایجاد شد تا به کمک html به طراحان سایت کمک کند تا صفحات وبسایت را به شکل زیباتری طراحی کنند. درست مانند هر زبان دیگری از جمله زبان html، برای استفاده از زبان css‌ نیز لازم است با دستورات این زبان آشنایی داشته باشید تا بتوانید صفحات وبسایت مورد نظرتان را به شکل و شمایل مورد دلخواه طراحی کنید.

CSS برای چه مواردی استفاده می شود؟

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

باتوجه به کاربردهایی که برای css بیان شد، این زبان طراحان وبسایت را قادر می سازد تا یک صفحه بی روح و نه چندان زیبا را به شکل مناسبی تغییر دهند و با افزودن رنگ به بخش های مختلف صفحه، وبسایت را به شکلی طراحی کنند تا کاربران از حضور در وبسایت لذت بیشتری ببرند. به صورت کلی افزایش زیبایی صفحات وبسایت را می توان یکی از اصلی‌ترین مواردی در نظر گرفت که به کمک css می توان انجام داد.

برای شرکت در دوره مقدماتی تا پیشرفته html-css کلیک کند.

تفاوت بین HTML و CSS:

بسیاری از طراحان وبسایت تازه کار بر این باورند که html و css یکسان هستند، اما با توجه به توضیحاتی که بیان شد، متوجه شدیم هر دو زبان کاملاً متمایز هستند. اما لازم است بدانیم که از این دو زبان به صورت هم زمان در طراحی وبسایت استفاده می شود. در ادامه چند مورد از مهم ترین تفاوت های html و css را بررسی می کنیم:

• html محتوا و ساختار یک صفحه وب را تعریف می کند، در حالی که css نمایش و طراحی عناصر html را زیباتر می کند.
• کدهای css را می توان در میان کدهای html نوشت و یا از یک فایل خارجی فراخوانی کرد، اما این امکان برای فایل های html وجود ندارد.
• کدهای html تا حد زیادی کاملاً واضح و قابل درک است، در حالی که css در شروع کار می تواند کمی پیچیده و گیج کننده باشد.
• در html از تگ‌ها در دو طرف محتوا استفاده می کنیم، در حالی که css از انتخاب‌کننده‌ها (selector) استفاده می‌کند.

‘tag’ چیست؟

یک اِلمنت شامل یک تگ شروع و یک تگ پایانی است. داده‌های وارد شده بین این تگ‌ها بر اساس دستورات اِلمنت نمایش داده می‌شود.

چگونه مرورگر از HTML برای ایجاد آنچه می‌بینم استفاده می‌کند؟

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

اِلمنت های اصلی HTML چه هستند؟

 اِلمنت هایی  از جمله html، head، body، 'p'، span، div و h1-h6 بودند.

معرفی تگ های HTML:

در زبان اچ تی ام ال برای استفاده کردن از هر عنصری باید از تگ مربوط به آن عنصر استفاده کنیم. مثلا برای گذاشتن یک عکس باید از تگ <img> و برای ایجاد کردن یک لینک بایستی از تگ <a> استفاده شود. در واقع این تگ ها دقیقا همان استاندارد هایی هستند که راجب شان صحبت کردیم. مرورگر ها بلافاصله پس از بازکردن یک صفحه وب، شروع به پردازش تگ های HTML آن صفحه میکنند. پس شروع طراحی صفحات وب نیازمند یادگیری تگ های مورد استفاده در زبان HTML میباشد. در ادامه برخی از مهمترین تگ های HTML را مورد بررسی قرا میدهیم.

• تگ HTML : تگ اصلی زبان HTML است که تمام تگ های دیگر درون آن پیاده سازی شده و قرار میگیرند.
• head : تگی کاربردی برای استفاده از meta هایی نظیر زبان سایت، توضیحات صفحه، لینک فایل CSS و غیره
• body : تگ بدنه وبسایت که تمام تگ های ظاهری و قابل مشاهده سایت درون آن قرار میگیرند
• تگ b : یک برچسب کاربردی برای بولد کردن یا همان کلفت کردن متن در HTML
• تگ em : برچسبی برای کج کردن یا italic کردن متن
• img : مورد استفاده برای گذاشتن تصویر در وبسایت
• تگ a : تگی کاربردی برای ایجاد لینک در سایت
• section : یک تگ مهم که برای بخش بندی کردن سایر تگ ها استفاده میشود
• video : برچسبی برای گذاشتن ویدیو در صفحه
• audio : تگی برای قرار دادن موزیک در سایت
• تگ br : برای رفتن به خط بعدی و در واقع enter زدن

موارد کاربردی HTML و CSS چیست؟

با استفاده از HTML و CSS می‌توان انواع مختلفی از صفحات وب را ایجاد کرد، از جمله:

• وب‌سایت‌های خبری و اطلاع‌رسانی: برای نمایش اخبار، مقالات و سایر محتوای متنی
• وب‌سایت‌های فروشگاهی: برای نمایش محصولات، قیمت‌ها و امکان خرید آنلاین
• وب‌سایت‌های آموزشی: برای ارائه محتوای آموزشی به صورت آنلاین
• وب‌سایت‌های شخصی و رزومه: برای معرفی خود و سوابق کاریتان
• وب‌سایت‌های دولتی و سازمانی: برای ارائه خدمات و اطلاعات به مردم

فهمیدیم با استفاده از زبان HTML میتوانیم مکان قرارگیری عناصر خودمان در صفحه وبسایت را مشخص کنیم. در واقع ساختار اصلی هر صفحه وب با استفاده از زبان HTML طراحی و کدنویسی میشود. علاوه بر این دریافتیم که در زبان HTML از تگ ها برای نشانه گذاری کردن متون و طراحی های خودمان استفاده میکنیم. درضمن بیان کردیم که Attribute به معنای خصوصیت و ویژگی بوده و کاربرد آن در تگ های HTML بسیار زیاد است. در نتیجه بد نیست بدانید که برای تبدیل شدن به یک طراح سایت شما بایستی در ابتدا زبان HTML و تگ های این زبان را فرا بگیرید. چراکه این زبان شالوده و Base هر وبسایتی میباشد و بدون آن طراحی سایت ممکن نخواهد بود. پس پیش از هر کاری شروع به یادگیری زبان نشانه گذاری اچ تی ام ال کرده و تگ های این زبان را به خوبی و به صورت عملی آموزش ببینید.