۱. مفاهیم پایهٔ وب
برای ورود به طراحی وب باید تفاوت اینترنت، وب جهان‌گستر، فایل، مرورگر، وبسایت، صفحهٔ وب و صفحهٔ اصلی را بدانیم.
اینترنت
شبکه‌ای جهانی از رایانه‌ها، سرورها، تجهیزات مخابراتی و مسیرهای ارتباطی است که امکان تبادل داده را فراهم می‌کند.
وب جهان‌گستر
مجموعه‌ای از اسناد و منابع به‌هم‌پیوندخورده است که معمولاً از طریق HTTP یا HTTPS و با کمک مرورگر در دسترس قرار می‌گیرند.
فایل
واحد ذخیره‌سازی اطلاعات؛ ممکن است شامل متن، تصویر، صدا، ویدئو، کد یا دادهٔ ساخت‌یافته باشد.
صفحه و وبسایت
صفحهٔ وب یک سند قابل نمایش در مرورگر است. مجموعهٔ صفحات مرتبط، یک وبسایت را تشکیل می‌دهد.
۲. مرورگر و نحوهٔ کار وب
مرورگر نرم‌افزاری است که نشانی یک منبع را دریافت می‌کند، درخواست شبکه می‌فرستد، کدهای HTML و CSS و JavaScript را می‌خواند و نتیجه را روی صفحه نمایش می‌دهد.
چرخهٔ سادهٔ بارگذاری صفحه
- کاربر یک URL را وارد می‌کند یا روی پیوند می‌زند.
- نام دامنه با کمک DNS به نشانی IP تبدیل می‌شود.
- مرورگر درخواست HTTP/HTTPS را به سرور می‌فرستد.
- سرور فایل یا خروجی پردازش‌شده را تحویل می‌دهد.
- مرورگر ساختار HTML، سبک CSS و رفتار JavaScript را پردازش می‌کند.
- صفحه رندر می‌شود و کاربر می‌تواند با آن تعامل کند.
۳. وبسایت، صفحهٔ وب و صفحهٔ اصلی
وبسایت از چند صفحه و منبع مرتبط تشکیل می‌شود. صفحهٔ اصلی معمولاً نقطهٔ ورود و مهم‌ترین صفحهٔ مسیریابی است. هر صفحه می‌تواند متن، تصویر، صدا، ویدئو، انیمیشن و پیوند داشته باشد.
| نوع وبسایت | ویژگی اصلی | نمونهٔ کاربرد |
|---|
| ایستا | محتوا مستقیماً در فایل‌ها ذخیره شده و تغییر آن معمولاً به ویرایش کد نیاز دارد. | صفحهٔ معرفی، رزومه، لندینگ ساده |
| پویا | محتوا بر اساس کاربر، پایگاه داده یا منطق سرور تولید می‌شود. | فروشگاه، شبکهٔ اجتماعی، سامانهٔ سازمانی |
| تعاملی | تمرکز بر تعامل کاربر، فرم‌ها، داشبورد، جست‌وجو و پردازش داده است. | پنل مدیریت، سامانهٔ آموزشی، خدمات آنلاین |
۴. طراحی وب چیست؟
طراحی وب فرایند برنامه‌ریزی و ساخت ظاهر، ساختار، مسیرهای ناوبری، محتوا و تجربهٔ استفاده از یک وبسایت است. طراحی خوب فقط زیبا نیست؛ باید هدف کسب‌وکار، نیاز کاربر، خوانایی، سرعت و دسترس‌پذیری را هم پوشش دهد.
فرایند پیشنهادی
۱. کشف و نیازسنجیهدف، مخاطب، سناریوهای کاربری، محدودیت‌ها و محتوای موردنیاز مشخص می‌شود.
۲. معماری اطلاعاتساختار صفحات، منوها، دسته‌بندی‌ها و مسیرهای حرکت کاربر طراحی می‌شود.
۳. وایرفریم و رابطابتدا اسکلت ساده و سپس ظاهر نهایی، رنگ‌ها، تایپوگرافی و اجزای بصری ساخته می‌شود.
۴. توسعه و آزمونکدنویسی، تست مرورگرها، تست واکنش‌گرایی، امنیت، سرعت و دسترس‌پذیری انجام می‌شود.
۵. تجربهٔ کاربری (UX) و رابط کاربری (UI)
UI به آنچه کاربر می‌بیند و لمس می‌کند مربوط است؛ مانند دکمه، منو، رنگ و فاصله‌ها. UX تجربهٔ کلی کاربر از رسیدن به هدف است؛ مانند سرعت پیدا کردن محصول، سادگی ثبت‌نام و وضوح پیام‌های خطا.
طراحی موفق، توازن میان زیبایی، عملکرد، وضوح و دسترس‌پذیری است.
۶. مقدمه‌ای بر HTML
HTML مخفف HyperText Markup Language است. این زبان ساختار محتوای صفحه را مشخص می‌کند و با تگ‌ها به مرورگر می‌گوید هر بخش چه نقشی دارد.
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<title>عنوان صفحه</title>
</head>
<body>
<h1>اولین عنوان</h1>
<p>اولین پاراگراف</p>
</body>
</html>
HTML ساختار را می‌سازد، CSS ظاهر را کنترل می‌کند و JavaScript رفتار و تعامل را اضافه می‌کند.
۷. عناصر، تگ‌ها و ویژگی‌ها
یک عنصر HTML معمولاً از تگ آغازین، محتوا و تگ پایانی تشکیل می‌شود.
<p class="intro">این یک پاراگراف است.</p>
- تگ: نامی میان علامت‌های زاویه‌دار، مانند
<p>.
- ویژگی: اطلاعات تکمیلی داخل تگ آغازین، مانند
class یا href.
- مقدار ویژگی: مقدار نسبت‌داده‌شده به ویژگی، معمولاً داخل کوتیشن.
تگ‌های تو‌در‌تو
<h1><em>عنوان مهم</em></h1>
تگ نزدیک‌تر باید زودتر بسته شود تا ساختار سند معتبر بماند.
۸. قالب‌بندی متن، عنوان‌ها و توضیحات
برای ساختار معنایی از تگ‌های مناسب استفاده کنید؛ صرفاً ظاهر را با تگ‌های قدیمی تغییر ندهید.
| کاربرد | تگ مدرن پیشنهادی | توضیح |
|---|
| عنوان‌ها | <h1> تا <h6> | سلسله‌مراتب موضوعی صفحه |
| پاراگراف | <p> | متن مستقل و پیوسته |
| تأکید معنایی | <strong> و <em> | اهمیت یا تأکید |
| شکستن خط | <br> | برای موارد محدود مانند نشانی یا شعر |
| توضیح در کد | <!-- comment --> | در مرورگر نمایش داده نمی‌شود |
تگ‌های قدیمی مانند <font>، ویژگی bgcolor و align منسوخ شده‌اند. ظاهر صفحه را با CSS تنظیم کنید.
۹. تصویر، متن جایگزین، پیوند و لنگر
تصویر
<img src="photo.webp"
alt="توضیح دقیق محتوای تصویر"
width="800"
height="500">
متن جایگزین برای دسترس‌پذیری و زمانی که تصویر بارگذاری نمی‌شود ضروری است.
پیوند
<a href="/about/">دربارهٔ ما</a>
لنگر درون‌صفحه‌ای
<h2 id="contact">تماس با ما</h2>
<a href="#contact">رفتن به بخش تماس</a>
۱۰. فهرست‌های مرتب و نامرتب
فهرست مرتب
<ol>
<li>مرحلهٔ اول</li>
<li>مرحلهٔ دوم</li>
</ol>
فهرست نامرتب
<ul>
<li>مورد اول</li>
<li>مورد دوم</li>
</ul>
نوع شماره یا نشانهٔ فهرست بهتر است با CSS و ویژگی list-style-type کنترل شود.
۱۱. فرم‌ها
فرم ناحیه‌ای از صفحه است که کاربر در آن اطلاعات وارد می‌کند. فرم از عنصر form، کنترل‌های ورودی و دکمهٔ ارسال تشکیل می‌شود.
<form method="post" action="/submit">
<label for="name">نام</label>
<input id="name" name="name" type="text" required>
<fieldset>
<legend>اندازه</legend>
<label><input type="radio" name="size" value="large"> بزرگ</label>
<label><input type="radio" name="size" value="small"> کوچک</label>
</fieldset>
<label><input type="checkbox" name="terms"> قوانین را می‌پذیرم</label>
<label for="city">شهر</label>
<select id="city" name="city">
<option value="shiraz">شیراز</option>
<option value="tehran">تهران</option>
</select>
<button type="submit">ارسال</button>
<button type="reset">پاک‌کردن</button>
</form>
| ویژگی | نقش |
|---|
name | نام داده‌ای که برای سرور ارسال می‌شود. |
value | مقدار اولیه یا مقدار ارسال‌شده. |
maxlength | بیشترین تعداد نویسهٔ مجاز. |
required | ورودی را اجباری می‌کند. |
placeholder | راهنمای کوتاه داخل کنترل. |
برای هر کنترل ورودی، برچسب label قابل‌فهم بنویسید و پیام خطا را روشن و دقیق نمایش دهید.
۱۲. جدول‌ها
جدول برای داده‌های سطری و ستونی مناسب است، نه برای چیدمان کلی صفحه.
<table>
<caption>فهرست محصولات</caption>
<thead>
<tr><th>نام</th><th>قیمت</th></tr>
</thead>
<tbody>
<tr><td>محصول اول</td><td>۱۰۰</td></tr>
</tbody>
</table>
فاصلهٔ سلول‌ها، حاشیه، رنگ و هم‌ترازی را با CSS کنترل کنید. در صفحات کوچک، جدول را داخل یک ظرف قابل اسکرول قرار دهید.
۱۳. گرافیک در وب: Canvas و SVG
Canvas
یک سطح پیکسلی برای رسم با JavaScript است. برای بازی‌ها، نمودارهای سنگین یا پردازش فریم‌به‌فریم مناسب است.
<canvas id="board" width="400" height="200"></canvas>
SVG
گرافیک برداری مبتنی بر XML است. در هر اندازه شفاف می‌ماند، قابل استایل‌دهی است و می‌تواند مستقیماً داخل HTML قرار گیرد.
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40"
fill="gold" stroke="green"/>
</svg>
۱۴. XML
XML زبانی برای ساختاردهی، ذخیره و انتقال داده است. بر خلاف HTML، تگ‌های آن برای نمایش از پیش تعریف نشده‌اند و توسعه‌دهنده ساختار موردنیاز را تعریف می‌کند.
<product>
<name>نمونه</name>
<price currency="IRR">100000</price>
</product>
- تگ‌ها به حروف کوچک و بزرگ حساس‌اند.
- همهٔ تگ‌ها باید درست بسته و تو‌در‌تو شوند.
- XML برای تبادل داده، فایل‌های پیکربندی و سرویس‌های سازمانی کاربرد دارد.
۱۵. سامانهٔ مدیریت محتوا (CMS)
CMS نرم‌افزاری برای ایجاد، ویرایش، سازمان‌دهی و انتشار محتوا است؛ به‌گونه‌ای که بسیاری از کاربران بدون ویرایش مستقیم کد بتوانند سایت را مدیریت کنند.
مدیریت کاربرانقالب و پوستهافزونهرسانهچندزبانهSEO
۱۶. CSS
CSS یا Cascading Style Sheets مجموعه‌ای از قواعد برای نمایش HTML است. جداکردن محتوا از ظاهر، نگهداری و بازاستفاده را ساده‌تر می‌کند.
selector {
property: value;
}
نمونه
h1 {
color: #0f6f91;
line-height: 210%;font-size: 2rem;
}
سه روش استفاده
| روش | محل تعریف | کاربرد |
|---|
| Inline | ویژگی style روی همان عنصر | تغییر بسیار محدود و موقت |
| Internal | تگ style در head | صفحهٔ مستقل یا نمونهٔ آموزشی |
| External | فایل CSS جداگانه | پروژه‌های واقعی و چندصفحه‌ای |
در این فایل، CSS داخل خود HTML قرار گرفته است تا صفحه کاملاً خودکفا و قابل انتشار بدون فایل جانبی باشد.
۱۷. PHP و وب‌سرور
PHP یک زبان اسکریپتی سمت سرور است. کد روی سرور اجرا می‌شود و خروجی معمولاً به شکل HTML برای مرورگر ارسال می‌شود.
<?php
$name = "کاربر";
echo "<h1>سلام " . htmlspecialchars($name) . "</h1>";
?>
پیش‌نیازهای معمول
- وب‌سرور مانند Apache یا Nginx
- مفسر PHP
- پایگاه داده در پروژه‌های داده‌محور
- مدیریت امن ورودی، نشست، احراز هویت و دسترسی
۱۸. پایگاه داده و DBMS
پایگاه داده مجموعه‌ای سازمان‌یافته از اطلاعات است. DBMS نرم‌افزاری است که ذخیره، بازیابی، ویرایش، کنترل دسترسی و یکپارچگی داده را مدیریت می‌کند.
| جزء | وظیفه |
|---|
| موتور پایگاه داده | مدیریت ذخیره‌سازی، تراکنش و دسترسی |
| داده | اطلاعات واقعی ذخیره‌شده |
| دیکشنری داده | فراداده؛ تعریف جدول‌ها، ستون‌ها و محدودیت‌ها |
| پردازشگر پرس‌وجو | تفسیر و اجرای دستورهای پرس‌وجو |
در پایگاه دادهٔ رابطه‌ای، SQL زبان استاندارد برای تعریف ساختار، درج، ویرایش، حذف و خواندن داده است.
۱۹. چک‌لیست نهایی طراحی یک صفحهٔ وب
- ساختار معنایی درست با HTML
- عنوان صفحه و توضیحات مناسب
- طراحی واکنش‌گرا برای موبایل و دسکتاپ
- رنگ و کنتراست خوانا
- متن جایگزین برای تصاویر
- برچسب واضح برای فرم‌ها و خطاهای قابل‌فهم
- سرعت مناسب و تصاویر بهینه
- استفاده از HTTPS و اعتبارسنجی ورودی
- آزمون در مرورگرها و اندازه‌های مختلف
- نگهداری، نسخه‌پشتیبان و به‌روزرسانی منظم
این سند یک فایل HTML واحد است: همهٔ CSSها، نمودارها و آیکون‌های SVG درون خود فایل قرار دارند و برای نمایش به هیچ فایل خارجی نیاز ندارد.