وب چگونه کار می کند؟ آشنایی با HTML و CSS | درس 1

درس 1 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین

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

این دوره برای کسی است که می خواهد از صفر شروع کند؛ صاحب کسب و کار، دانشجو یا علاقه مند به طراحی سایت. پیش نیاز این درس فقط توانایی ساخت و ذخیره یک فایل متنی است. برای مطالعه و انجام تمرین، حدود 30 تا 45 دقیقه زمان در نظر بگیرید. برای اجرای نمونه امروز به خرید هاست، دامنه یا نصب وردپرس نیاز ندارید.

در پایان این درس چه چیزی یاد می گیرید؟

• تفاوت صفحه وب، وب سایت، مرورگر و سرور را توضیح می دهید.
• نقش HTML، CSS و JavaScript را از هم تشخیص می دهید.
• یک فایل HTML فارسی را روی کامپیوتر باز می کنید.
• با تغییر یک دستور CSS، نتیجه را در مرورگر مشاهده می کنید.

صفحه وب چیست و چه تفاوتی با وب سایت دارد؟

همین مقاله یک صفحه وب است. صفحه تماس با ما و صفحه معرفی خدمات، صفحه های دیگری هستند. مجموعه این صفحه های مرتبط، یک وب سایت را تشکیل می دهد. مرورگر برنامه ای مانند Chrome یا Firefox است که محتوا را دریافت می کند و به شکلی قابل استفاده نمایش می دهد. مرورگر را با موتور جستجو اشتباه نگیرید: گوگل به پیدا کردن صفحه ها کمک می کند؛ مرورگر صفحه انتخاب شده را باز می کند.

برای مثال، یک شرکت ممکن است صفحه اصلی، معرفی خدمات، نمونه کار و تماس داشته باشد. قبل از نوشتن کد، باید هدف هر صفحه روشن باشد. اگر هنوز درباره ساختار یک سایت تجاری سوال دارید، راهنمای جامع طراحی سایت تصویر گسترده تری از مراحل اجرای چنین پروژه ای ارائه می دهد. در این دوره، تمرکز ما روی ساخت خود صفحه هاست.

وقتی آدرس یک سایت را وارد می کنیم، چه اتفاقی می افتد؟

در یک توضیح ساده، مرورگر باید مقصد درخواست را پیدا کند، اطلاعات صفحه را بگیرد و آن را نمایش دهد. سرور کامپیوتری است که منابع سایت را ارائه می کند. دامنه، نام خوانای سایت است و DNS به پیدا کردن آدرس شبکه مربوط به آن کمک می کند. ممکن است مرورگر بخشی از اطلاعات را از قبل در حافظه موقت داشته باشد؛ بنابراین همه مراجعه ها دقیقا یک مسیر یکسان ندارند.

1. شما آدرس صفحه را در مرورگر وارد می کنید.
2. مرورگر با کمک اطلاعات DNS، مقصد اتصال را پیدا می کند.
3. برای دریافت صفحه درخواست می فرستد؛ در HTTPS ارتباط با رمزگذاری محافظت می شود.
4. سرور پاسخ می دهد و مرورگر کد HTML را می خواند.
5. مرورگر منابع لازم مانند CSS و تصویر را دریافت می کند و صفحه را نمایش می دهد.

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

HTML چیست؟ ساختار و معنای محتوا

HTML یک زبان نشانه گذاری است. با آن مشخص می کنیم کدام بخش عنوان است، کدام بخش پاراگراف است و کجا لینک یا تصویر قرار می گیرد. به این نشانه ها «تگ» می گوییم. بیشتر عناصر یک تگ آغازین، محتوا و تگ پایانی دارند؛ برای نمونه:

<p>من یادگیری طراحی سایت را شروع کرده ام.</p>

در این نمونه، <p> شروع پاراگراف و </p> پایان آن است. متن میان این دو در صفحه دیده می شود. علامت اسلش در تگ پایانی را فراموش نکنید. همه عناصر این شکل را ندارند؛ برای مثال، عنصر تصویر تگ پایانی ندارد. این تفاوت ها را در درس های HTML به صورت جداگانه تمرین می کنیم.

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

CSS چیست؟ ظاهر و چیدمان صفحه

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

h1 {
  color: #1d4ed8;
}

در این دستور، h1 انتخابگر است؛ یعنی مشخص می کند قانون روی کدام عنصرها اعمال شود. واژه color ویژگی موردنظر و #1d4ed8 مقدار رنگ است. دستور داخل آکولاد قرار می گیرد و با نقطه ویرگول تمام می شود. حفظ کردن کد رنگ لازم نیست؛ امروز فقط ارتباط «ویژگی و مقدار» را یاد بگیرید.

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

پس JavaScript و برنامه نویسی سمت سرور چه نقشی دارند؟

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

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

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

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

1. یک پوشه با نام web-course روی کامپیوتر بسازید.
2. Notepad یا ویرایشگر متن خود را باز کنید و کد زیر را در آن قرار بدهید.
3. فایل را داخل پوشه با نام index.html و رمزگذاری UTF-8 ذخیره کنید. اگر Notepad گزینه Save as type دارد، All files را انتخاب کنید.
4. فایل را با مرورگر باز کنید. باید یک عنوان آبی و یک پاراگراف فارسی روی زمینه روشن ببینید.

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>اولین صفحه من</title>
  <style>
    body {
      font-family: Tahoma, sans-serif;
      margin: 24px;
      line-height: 1.8;
      background-color: #f8fafc;
      color: #1e293b;
    }

    h1 {
      color: #1d4ed8;
    }
  </style>
</head>
<body>
  <h1>سلام، من طراحی وب یاد می گیرم!</h1>
  <p>این اولین تمرین من در دوره ارومیا دیزاین است.</p>
</body>
</html>

کدام بخش های کد را فعلا باید بفهمیم؟

• <!doctype html> به مرورگر کمک می کند سند را در حالت استاندارد پردازش کند.
• lang="fa" زبان صفحه را فارسی معرفی می کند؛ dir="rtl" جهت پایه متن را راست به چپ قرار می دهد.
• charset="utf-8" رمزگذاری متن را مشخص می کند تا حروف فارسی درست تفسیر شوند.
• title عنوان زبانه مرورگر است؛ با عنوانی که در بدنه می بینید تفاوت دارد.
• style در این نمونه محل قوانین CSS است.
• body محتوایی را در بر دارد که در صفحه نمایش می دهیم.
• تنظیم viewport یکی از مقدمات نمایش مناسب در موبایل است؛ به تنهایی هر طرحی را واکنش گرا نمی کند.

در CSS نمونه، فونت Tahoma انتخاب شده است؛ اگر در دستگاه موجود نباشد، مرورگر از یک فونت بدون سریف استفاده می کند. مقدار margin: 24px از لبه های صفحه فاصله می سازد. line-height: 1.8 فاصله خطوط را تنظیم می کند و background-color رنگ زمینه را تعیین می کند. در درس های بعد درباره واحدها و فاصله ها مفصل تمرین خواهیم کرد.

یک تغییر کوچک، یک نتیجه روشن

رنگ عنوان را از #1d4ed8 به #b91c1c تغییر دهید. فایل را ذخیره کنید و صفحه مرورگر را تازه کنید. حالا عنوان باید قرمز تیره باشد. اگر رنگ عوض شد، اولین ارتباط عملی میان کد CSS و خروجی صفحه را تجربه کرده اید. سپس متن عنوان را تغییر دهید و همین مراحل را تکرار کنید تا نقش HTML را هم ببینید.

اشتباه های رایج در اولین اجرا

• به جای صفحه، کد خام نمایش داده می شود: پسوند واقعی فایل را بررسی کنید. نام index.html.txt با index.html فرق دارد. در ویندوز نمایش پسوند فایل ها را فعال کنید.
• تغییرها دیده نمی شوند: ابتدا ذخیره کنید، سپس مرورگر را تازه کنید. مطمئن شوید همان فایلی را ویرایش می کنید که باز کرده اید.
• حروف فارسی خراب هستند: فایل را با UTF-8 ذخیره کنید و خط charset را نگه دارید.
• رنگ اعمال نمی شود: نام ویژگی، علامت دو نقطه، آکولاد و مقدار رنگ را با نمونه مقایسه کنید. علامت های کد باید انگلیسی باشند.
• فایل با برنامه دیگری باز می شود: با گزینه Open with، مرورگر را برای باز کردن آن انتخاب کنید.

تمرین درس 1: کارت معرفی ساده خودتان

با همان فایل، این 3 تغییر را انجام دهید: عنوان زبانه مرورگر را «تمرین معرفی من» بگذارید؛ در عنوان داخل صفحه نام خودتان را بنویسید؛ یک پاراگراف دوم اضافه کنید و هدف یادگیری تان را توضیح دهید. سپس رنگ عنوان را سبز تیره کنید. ابتدا بدون نگاه کردن به پاسخ تلاش کنید.

<h1>سلام، من سارا هستم.</h1>
<p>من یادگیری طراحی وب را شروع کرده ام.</p>
<p>هدف من ساخت یک سایت معرفی خدمات است.</p>

h1 {
  color: #166534;
}

این مهارت کجا به کار شما می آید؟

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

پروژه پایانی دوره، تمرینی برای ساخت صفحه های یک سایت خدماتی خواهد بود. اگر می خواهید همزمان با یادگیری، نیاز حرفه ای کسب و کارتان را بررسی کنید، توضیحات خدمات طراحی سایت در ارومیه در دسترس است. برای ادامه این دوره، خرید هیچ خدمتی الزامی نیست.

پرسش های متداول درس اول

آیا برای شروع HTML و CSS باید برنامه نویسی بلد باشم؟

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

آیا اجرای این تمرین به اینترنت نیاز دارد؟

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

آیا در 60 روز به HTML و CSS مسلط می شوم؟

هدف دوره، رسیدن از مقدمات به ساخت یک سایت واکنش گراست. نتیجه به تمرین شما بستگی دارد. تمام شدن مقاله ها به معنی تسلط به همه قابلیت های این دو زبان نیست؛ اما باید بتوانید پروژه دوره را توضیح دهید، تغییر دهید و ایرادهای ساده آن را پیدا کنید.

آیا باید تگ ها و کد رنگ ها را حفظ کنم؟

خیر. ابتدا کاربرد و ساختار آنها را بفهمید. مراجعه به مستندات بخشی طبیعی از کار طراحی وب است.

قبل از رفتن به درس بعد

اگر می توانید تفاوت HTML و CSS را با مثال توضیح دهید، فایل index.html را باز کنید و رنگ عنوان را تغییر بدهید، هدف این درس را انجام داده اید. فایل تمرین را نگه دارید؛ در درس بعد محیط کار و ویرایشگر کد را آماده می کنیم تا نوشتن، ذخیره کردن و پیدا کردن خطاها ساده تر شود.

درس بعد: درس 2: آماده سازی محیط طراحی وب و نصب ویرایشگر کد