در این مقاله باهم مفاهیم اولیۀ HTML و CSS را در کمترین زمان بررسی می‌کنیم.
مقدمه:
در این دوره به‌جای اینکه به‌صورت جداگانه یک دوره کامل برای HTML و یک دوره کامل دیگر برای CSS ارائه شود، این دو را با هم ترکیب کرده است، زیرا بسیار با هم مرتبط هستند. این دوره طراحی شده است تا شما را به‌سرعت در هر دو زمینه HTML و CSS مسلط کند تا بتوانید به‌زودی وب‌سایت‌های جذاب خود را بسازید.
در این دوره از صفر شروع می‌کنیم و فرض برآن است که شما هیچ یا حداقل تجربۀ کمی در کدنویسی دارید، بنابراین تمام اصول اولیه را از ابتدا پوشش خواهیم داد، از جمله اینکه HTML و CSS دقیقاً چه هستند. همچنین نحوۀ راه‌اندازی یک محیط توسعه روی کامپیوترتان را نشان می‌دهیم. نحوۀ ساخت اولین صفحۀ HTML خودتان را یاد می‌گیرید و همچنین چگونه با CSS آن صفحه را زیبا کنید.
دربارۀ ویژگی‌های جدیدتر و مدرن HTML نیز صحبت می‌کنیم تا کد شما بروز و متناسب با تکنولوژی‌های کنونی باشد. و البته طراحی واکنش‌گرا (ریسپانسیو) برای موبایل را نیز بررسی خواهیم کرد. در پایان دوره، همۀ چیزهایی که آموخته‌ایم را برای ساخت یک پروژه وب از ابتدا کنار هم قرار می‌دهیم.
پیش از اینکه شروع به نوشتن کد کنیم، بیایید چند دقیقه‌ای دربارۀ اینکه HTML و CSS چه هستند صحبت کنیم تا دید کلی نسبت به این دو تکنولوژی داشته باشیم.
توضیحات:
HTML، یا زبان نشانه‌گذاری ابرمتن، یک زبان نشانه‌گذاری است و زبان برنامه‌نویسی نیست. از HTML برای ساختاردهی محتوای یک وب‌صفحه مانند متن‌ها، تصاویر و فرم‌ها استفاده می‌شود. برای این منظور از تگ‌های HTML استفاده می‌کنیم که هر تگ نمایانگر نوع خاصی از محتوا در صفحه است، مانند یک تصویر، فرم یا متن پاراگراف. این تگ‌ها در HTML به‌عنوان عناصر نیز شناخته می‌شوند.
CSS، که مخفف شیوه‌نامه آبشاری است، زبانی است که برای استایل‌دهی به صفحات وب استفاده می‌شود. HTML ساختار محتوا را فراهم می‌کند و CSS باعث زیباتر شدن آن می‌شود. از CSS برای تعیین رنگ‌ها، اندازۀ فونت‌ها، نحوۀ قرارگیری محتوا در صفحه و حتی پس‌زمینۀ صفحه استفاده می‌کنیم.
برنامه‌های لازم:
شروع به کد نویسی کنید!
پس از نصب و باز کردن Visual Studio Code، می‌توانید پروژۀ خود را ایجاد کنید و فایل HTML خود را به نام «index.html» ذخیره کنید. این فایل به‌عنوان صفحۀ اصلی سایت شما عمل می‌کند. اولین تگ در HTML باید تگ DOCTYPE باشد که با تایپ کردن علامت “!” به وجود می‌آید و به مرورگر اطلاع می‌دهد که این یک سند HTML است. تگ HTML ریشۀ سند شماست که تمام کدها را دربرمی‌گیرد و تگ‌های head و body درون آن قرار می‌گیرند. تگ head شامل اطلاعات اضافی مانند عنوان صفحه است، در حالی که محتوای تگ body همان چیزی است که در صفحه نمایش داده می‌شود.
برای پیش‌نمایش صفحۀ HTML خود، می‌توانید روی فایل HTML دوبار کلیک کنید یا در قسمت Extensions از Live Server در Visual Studio Code استفاده کنید. این افزونه به شما کمک می‌کند که تغییرات را به‌صورت زنده مشاهده کنید.
همچنین با ابزار Developer Tools که در مرورگر Chrome وجود دارد، می‌توانید عناصر صفحۀ خود را بررسی کنید. با کلیک راست روی عناصر و انتخاب گزینه Inspect، می‌توانید کد HTML مربوط به آن عنصر را مشاهده کنید و از این ابزارها برای بررسی و توسعۀ بهتر وب‌سایت‌ها بهره ببرید.
این مقدمه‌ای بود بر HTML و CSS در درس‌های بعدی به‌طور عمیق‌تر وارد جزئیات زبان HTML و انواع تگ‌های مختلف آن می‌شویم.
برای مشاهده و دسترسی به مطالب بیشتر بر روی اینجا کلیک کنید
