آشنایی با HTML و CSS؛ جلسه اول طراحی سایت

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

توی جلسه قبل گفتیم اولین قدم برای طراح سایت شدن، یاد گرفتن HTML و CSS هست. شاید اسم این دوتا در نگاه اول کمی پیچیده به نظر بیاد، ولی نگران نباشید. برای شروع لازم نیست برنامه‌نویس باشید؛ همه‌چیز رو از پایه و قدم‌به‌قدم با هم جلو می‌بریم.

HTML چیه؟

HTML مخفف HyperText Markup Language هست و معنی فارسی اون می‌شه «زبان نشانه‌گذاری ابرمتن». HTML زبان برنامه‌نویسی نیست؛ باهاش ساختار و معنی محتوای یک صفحه وب رو مشخص می‌کنیم. مثلاً به مرورگر می‌گیم کدوم بخش عنوانه، کدوم بخش پاراگرافه و تصویر، لینک یا فهرست کجا قرار گرفته.

CSS چیه؟

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

یک مثال ساده برای درک HTML و CSS

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

HTML بدون CSS هم کار می‌کنه، ولی معمولاً ظاهر خیلی ساده‌ای داره!

برای کدنویسی HTML و CSS به چه ابزارهایی نیاز دارید؟

برای نوشتن کد، به یک ویرایشگر متن نیاز دارید؛ یعنی برنامه‌ای که کدهاتون رو داخل اون می‌نویسید و ویرایش می‌کنید. پیشنهاد اصلی ما برای شروع، Visual Studio Code هست. این ویرایشگر رایگانه، روی ویندوز، macOS و Linux نصب می‌شه و برای نوشتن HTML و CSS امکانات مفیدی مثل تکمیل خودکار کد و Emmet داره. Emmet ابزاریه که عبارت‌های کوتاه رو به کد کامل تبدیل می‌کنه تا سریع‌تر کد بنویسید.

اگه از ویندوز استفاده می‌کنید و دنبال یک ابزار خیلی ساده هستید، Notepad++ هم انتخاب خوبیه. Sublime Text گزینه سریع و سبک دیگه‌ایه، ولی برای استفاده مداوم باید مجوزش رو تهیه کنید. Adobe Dreamweaver هم عرضه می‌شه، اما به اشتراک Adobe نیاز داره و برای شروع این دوره لازم نیست سراغش برید.

شروع کار با Visual Studio Code

برای شروع، Visual Studio Code رو از سایت رسمی اون دانلود و نصب کنید. بعد یک پوشه تازه برای تمرین‌هاتون بسازید. برنامه رو باز کنید و از منوی File روی گزینه Open Folder بزنید، بعد همون پوشه رو انتخاب کنید. فعلاً نیازی به نصب افزونه خاصی ندارید؛ خود برنامه امکانات پایه لازم برای کار با HTML و CSS رو داره.

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

جمع‌بندی

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

برای شروع هم به ابزار پیچیده‌ای نیاز ندارید. کافیه Visual Studio Code رو نصب کنید، یک پوشه برای تمرین‌هاتون بسازید و قدم‌به‌قدم جلو برید. لازم نیست همه‌چیز رو همین اول حفظ کنید؛ با ساختن چند صفحه ساده، کاربرد کدها خیلی زود براتون روشن می‌شه.

سوالات متداول

تیم تولید محتوا

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