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

وب چیست؟

به زبان ساده، وب (Web) مجموعه‌ای بسیار بزرگ از صفحات و سایت‌هایی است که از طریق اینترنت می‌توانیم به آن‌ها دسترسی داشته باشیم.

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

مثلاً ممکن است وارد یک سایت آموزشی شوید و صفحه‌ای مانند این ببینید:

-----------------------------------
          آموزش طراحی وب
-----------------------------------

HTML
CSS
JavaScript

شروع یادگیری
-----------------------------------

این چیزی است که ما در نهایت روی صفحه نمایش می‌بینیم.

اما پشت همین صفحه ساده، کدهایی وجود دارند که به مرورگر می‌گویند چه چیزی را نمایش دهد و چگونه آن را نمایش دهد.

صفحه وب چیست؟

صفحه وب (Web Page) یک صفحه قابل مشاهده در مرورگر است.

برای مثال، صفحه اصلی یک سایت یک صفحه وب است. صفحه «درباره ما» نیز یک صفحه وب است. صفحه یک محصول در یک فروشگاه اینترنتی هم یک صفحه وب محسوب می‌شود.

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

برای مثال یک سایت آموزشی ممکن است صفحات زیر را داشته باشد:

صفحه اصلی
صفحه دوره‌ها
صفحه مقالات
صفحه درباره ما
صفحه تماس با ما

هرکدام از این صفحات می‌توانند محتوای متفاوتی داشته باشند.

وب‌سایت چیست؟

وقتی چند صفحه وب مرتبط در کنار یکدیگر قرار می‌گیرند، معمولاً یک وب‌سایت (Website) را تشکیل می‌دهند.

برای مثال یک وب‌سایت آموزشی ممکن است شامل این صفحات باشد:

صفحه اصلی
     ↓
دوره‌های آموزشی
     ↓
مقالات
     ↓
درباره ما
     ↓
تماس با ما

بنابراین تفاوت ساده این دو را به خاطر بسپارید:

صفحه وب: یک صفحه مشخص از وب

وب‌سایت: مجموعه‌ای از صفحات مرتبط

البته یک وب‌سایت می‌تواند فقط یک صفحه هم داشته باشد، اما در بیشتر پروژه‌ها چندین صفحه در کنار هم قرار می‌گیرند.

مرورگر چیست؟

حالا سؤال مهم دیگری مطرح می‌شود:

ما صفحات وب را با چه چیزی مشاهده می‌کنیم؟

پاسخ، مرورگر (Browser) است.

مرورگر نرم‌افزاری است که برای مشاهده صفحات وب استفاده می‌شود.

احتمالاً یکی از این مرورگرها را دیده یا استفاده کرده‌اید:

• Google Chrome

• Microsoft Edge

• Mozilla Firefox

• Safari

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

پس می‌توانیم خیلی ساده این فرآیند را این‌طور تصور کنیم:

کدهای صفحه وب
      ↓
   مرورگر
      ↓
صفحه قابل مشاهده

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

یک صفحه وب از چه چیزی ساخته می‌شود؟

حالا به قسمت مهم‌تر درس می‌رسیم.

فرض کنید می‌خواهیم یک صفحه بسیار ساده بسازیم که شامل موارد زیر باشد:

سلام!

من در حال یادگیری طراحی وب هستم.

[شروع یادگیری]

مرورگر باید بداند:

• «سلام!» یک عنوان است.

• جمله دوم یک متن است.

• قسمت «شروع یادگیری» یک دکمه یا لینک است.

برای ساخت چنین صفحه‌ای از فناوری‌های مختلف استفاده می‌کنیم.

سه فناوری بسیار مهم که در ابتدای مسیر طراحی وب با آن‌ها روبه‌رو می‌شویم عبارت‌اند از:

1. HTML

2. CSS

3. JavaScript

در ادامه خیلی ساده با هرکدام آشنا می‌شویم.

HTML چیست؟

HTML مخفف عبارت: HyperText Markup Language است.

اما فعلاً لازم نیست معنی کامل این عبارت را حفظ کنید.

برای شروع فقط این مفهوم را به خاطر بسپارید:

HTML ساختار و محتوای صفحه وب را مشخص می‌کند.

یعنی با HTML مشخص می‌کنیم در صفحه چه چیزهایی وجود داشته باشند.

برای مثال:

• عنوان

• متن

• تصویر

• لینک

• جدول

• فرم

• لیست

و موارد دیگر.

فرض کنید می‌خواهیم یک عنوان در صفحه داشته باشیم:

آموزش طراحی وب

HTML به ما کمک می‌کند این متن را به عنوان صفحه معرفی کنیم.

یک نمونه بسیار ساده HTML را در ادامه خواهیم دید:

<h1>آموزش طراحی وب</h1>

فعلاً نگران معنی <h1> نباشید.

در مقاله‌های بعدی دقیقاً یاد می‌گیریم این علامت‌ها چه هستند و چگونه از آن‌ها استفاده کنیم.

CSS چیست؟

حالا فرض کنید صفحه ما با HTML ساخته شده است، اما ظاهر آن خیلی ساده است.

می‌خواهیم:

• رنگ متن را تغییر دهیم.

• اندازه نوشته را بزرگ‌تر کنیم.

• پس‌زمینه داشته باشیم.

• فاصله بین قسمت‌ها ایجاد کنیم.

• دکمه زیباتری طراحی کنیم.

• صفحه را مرتب کنیم.

اینجا CSS وارد می‌شود.

CSS مخفف: Cascading Style Sheets است.

برای شروع این تعریف ساده کافی است:

CSS برای طراحی و زیباسازی ظاهر صفحات وب استفاده می‌شود.

مثلاً HTML می‌گوید:

این یک عنوان است.

و CSS می‌تواند مشخص کند:

عنوان بزرگ باشد.
رنگ داشته باشد.
فاصله داشته باشد.
در جای مناسبی قرار بگیرد.

بنابراین می‌توانیم یک تشبیه ساده داشته باشیم:

HTML = ساختار

CSS = ظاهر

JavaScript چیست؟

فناوری مهم بعدی JavaScript است.

JavaScript معمولاً برای ایجاد رفتار و تعامل در صفحات وب استفاده می‌شود.

مثلاً فرض کنید در یک سایت روی یک دکمه کلیک می‌کنید و اتفاقی رخ می‌دهد:

[ نمایش اطلاعات ]

بعد از کلیک:

اطلاعات با موفقیت نمایش داده شد.

یا مثلاً:

• یک منو باز می‌شود.

• یک پنجره ظاهر می‌شود.

• اطلاعات بدون بارگذاری کامل صفحه تغییر می‌کند.

• فرم بررسی می‌شود.

• یک شمارنده شروع به کار می‌کند.

JavaScript می‌تواند برای ایجاد چنین رفتارهایی استفاده شود.

پس فعلاً این سه مفهوم را این‌طور به خاطر بسپارید:

HTML
ساختار و محتوای صفحه

CSS
ظاهر و طراحی صفحه

JavaScript
رفتار و تعامل صفحه

HTML، CSS و JavaScript در کنار هم

برای درک بهتر، فرض کنید می‌خواهیم یک دکمه در صفحه داشته باشیم.

HTML می‌گوید:

این یک دکمه است.

CSS می‌گوید:

دکمه چه رنگی باشد؟
چه اندازه‌ای داشته باشد؟
کجا قرار بگیرد؟

JavaScript می‌گوید:

وقتی کاربر روی دکمه کلیک کرد چه اتفاقی بیفتد؟

در نتیجه:

             صفحه وب
                │
       ┌────────┼────────┐
       ↓        ↓        ↓
     HTML      CSS   JavaScript
       │        │        │
    ساختار     ظاهر     رفتار

این یکی از مهم‌ترین مفاهیم ابتدایی طراحی وب است.

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

آیا برای شروع طراحی وب باید JavaScript بلد باشیم؟

خیر.

اگر تازه می‌خواهید طراحی وب را شروع کنید، لازم نیست همه چیز را هم‌زمان یاد بگیرید.

مسیر منطقی یادگیری می‌تواند به این شکل باشد:

HTML
 ↓
CSS
 ↓
Responsive Design
 ↓
JavaScript
 ↓
مباحث پیشرفته‌تر

در این دوره ابتدا روی HTML تمرکز می‌کنیم.

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

سپس به سراغ طراحی Responsive و مباحث حرفه‌ای‌تر می‌رویم.

JavaScript نیز در مسیر یادگیری توسعه وب اهمیت بسیار زیادی دارد، اما در این مجموعه ابتدا پایه‌های طراحی صفحات وب را محکم می‌کنیم.

چرا یادگیری مرحله‌ای مهم است؟

یکی از اشتباهات رایج افراد تازه‌کار این است که از همان ابتدا سراغ مطالب بسیار پیچیده می‌روند.

مثلاً هنوز نمی‌دانند HTML چیست، اما شروع می‌کنند به یادگیری:

• Flexbox

• Grid

• Animation

• Frameworkها

• کتابخانه‌ها

• ابزارهای پیچیده

این روش معمولاً باعث سردرگمی می‌شود.

بهتر است ابتدا پایه‌ها را یاد بگیریم.

برای مثال:

HTML
 ↓
ساختار صفحه
 ↓
CSS
 ↓
ظاهر صفحه
 ↓
Responsive
 ↓
تعامل با JavaScript
 ↓
پروژه‌های واقعی

هر مرحله باید روی مرحله قبل ساخته شود.

هدف این دوره نیز همین است.

در این دوره چه چیزهایی یاد می‌گیریم؟

در ادامه این مسیر، ابتدا HTML را یاد می‌گیریم.

با مفاهیمی مانند:

• تگ‌ها

• عناصر

• ویژگی‌ها

• متن‌ها

• لینک‌ها

• تصاویر

• لیست‌ها

• جدول‌ها

• فرم‌ها

• ساختار صفحات

سپس وارد HTML5 می‌شویم و امکانات جدیدتر آن را بررسی می‌کنیم.

بعد از آن به سراغ CSS می‌رویم و یاد می‌گیریم چگونه صفحات خود را طراحی کنیم.

در بخش‌های بعدی نیز با موضوعاتی مانند:

• Box Model

• Position

• Flexbox

• Grid

• Responsive Design

• Media Query

• Mobile First

• طراحی RTL

• فونت‌های فارسی

• انیمیشن

• طراحی رابط کاربری

آشنا خواهیم شد.

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

تمرین

قبل از رفتن به مقاله بعدی، سعی کنید با مفاهیمی که امروز یاد گرفتید یک تصویر ساده در ذهن خود بسازید.

به این سه سؤال پاسخ دهید:

سؤال اول

HTML چه کاری انجام می‌دهد؟

سؤال دوم

CSS چه کاری انجام می‌دهد؟

سؤال سوم

JavaScript چه کاری انجام می‌دهد؟

اگر بتوانید این سه مفهوم را با زبان خودتان توضیح دهید، هدف اصلی این مقاله را یاد گرفته‌اید.

برای مثال:

HTML → ساختار
CSS → ظاهر
JavaScript → رفتار

فعلاً همین سه کلمه را به خاطر بسپارید.

جمع‌بندی

در اولین قدم با مفهوم کلی وب و صفحات وب آشنا شدیم.

یاد گرفتیم که:

• وب مجموعه بزرگی از صفحات و سایت‌های قابل دسترسی از طریق اینترنت است.

• صفحه وب یک صفحه قابل مشاهده در مرورگر است.

• وب‌سایت معمولاً مجموعه‌ای از صفحات مرتبط است.

• مرورگر نرم‌افزاری است که صفحات وب را برای ما نمایش می‌دهد.

• HTML ساختار و محتوای صفحه را مشخص می‌کند.

• CSS ظاهر و طراحی صفحه را کنترل می‌کند.

• JavaScript برای ایجاد رفتار و تعامل در صفحه استفاده می‌شود.

در این مرحله لازم نیست هیچ‌کدام از این مفاهیم را به صورت عمیق بلد باشید.

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

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