اصول طراحی وبسایت با HTML و CSS

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

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

HTML – اسکلت وبسایت شما، جایی که همه چیز از اون شروع میشه

۱.۱. HTML چیست؟

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

این زبان، از تگ ها (Tags) استفاده می کنه تا ساختار و محتوای صفحه وب رو تعریف کنه. مثلاً یه تگ هست برای تیتر اصلی، یه تگ دیگه برای عکس و الی آخر. یه جورایی داره به مرورگر وب (مثل کروم یا فایرفاکس) می گه که هر تیکه از متنی که من نوشتم، چه نقشی توی صفحه داره. جالبه بدونید HTML از اواخر دهه ۸۰ میلادی متولد شد و از اون موقع تا حالا، کلی تغییر و تحول داشته تا به HTML5 امروزی رسیده که خیلی قدرتمندتر و باهوش تر شده.

۱.۲. ساختار اولیه یک سند HTML

وقتی یه فایل HTML می سازی، یه سری بخش های ثابت و مهم داره که باید همیشه باشن. این بخش ها، مثل ستون های اصلی یه خونه هستن که هرکدوم یه وظیفه ای دارن و بدون اونا، خونه سرپا نمیمونه.

• “: این خط، اولین چیزیه که تو هر فایل HTML باید بنویسی. به مرورگر می گه که ما با استاندارد HTML5 کار می کنیم و اینجوری مرورگر می فهمه چطوری صفحه رو تفسیر کنه.
• “: این تگ، مثل ظرف اصلی همه چیزه. هرچی که تو صفحه وب داری، باید داخل این تگ قرار بگیره.
• “: این بخش، مثل مغز متفکر صفحه وب می مونه. اطلاعاتی رو تو خودش جا میده که کاربر مستقیم تو صفحه نمی بینه، ولی برای مرورگر و موتورهای جستجو خیلی مهمن. مثلاً عنوان صفحه که تو تب مرورگر می بینی، یا لینک به فایل های CSS که ظاهر سایت رو مشخص می کنن، همه اینجا قرار می گیرن.
• “: و اما بخش اصلی! هرچیزی که کاربر قراره تو صفحه وب ببینه، از متن و عکس گرفته تا دکمه و جدول، همه و همه توی این تگ قرار می گیرن. این همون قسمتیه که زندگی و رنگ و بوی سایتت رو نشون میده.

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

۱.۳. تگ های ضروری HTML و کاربرد آن ها

حالا که اسکلت کلی رو شناختیم، بریم سراغ آجرها و مصالح! HTML کلی تگ داره که هر کدوم کار خاصی انجام میدن. با دونستن اینا، می تونی هر محتوایی رو تو سایتت جای بدی.

تگ های ساختاری (Semantic HTML)

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

• `
  `: این تگ مثل یه جعبه ی همه کاره س که می تونی هرچیزی رو توش بذاری و بعد با CSS بهش استایل بدی. کاربردش خیلی زیاده ولی بهتره از تگ های معنایی تر استفاده کنی اگه هدف خاصی داری.

• `
  
  `:

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

• `
  
  `:

  اگه یه محتوای مستقل داری، مثل یه خبر، مقاله یا پست وبلاگ، این تگ بهترین گزینه س.

• `
  
  `:

  معمولاً برای بالای صفحه یا بالای هر بخش از محتوا استفاده میشه و چیزایی مثل لوگو، عنوان یا منوی ناوبری رو توش میذاریم.

• `
  

  برعکس

  ، این تگ برای پایین صفحه یا پایین هر بخش استفاده میشه، مثلاً اطلاعات کپی رایت یا لینک های کمکی.
• `
  

  برای لینک های ناوبری اصلی سایت (منو) کاربرد داره.

• `
  

  اگه یه محتوایی داری که به محتوای اصلی صفحه مربوط میشه ولی جزوش نیست (مثلاً یه سایدبار یا اطلاعات جانبی)، این تگ رو استفاده می کنی.

تگ های محتوایی متن

اینا تگ هایی هستن که برای نمایش انواع متن به کار میرن و باعث میشن متن های وبسایتت خوانا و مرتب باشن.

• `
  

  ` تا `

  `:

  اینا تگ های عنوان بندی هستن، از

  (مهم ترین عنوان) تا

  (کم اهمیت ترین). تیتر اصلی صفحه باید

  باشه و بقیه تیترها به ترتیب اهمیت از H2 تا H6 استفاده میشن. این برای سئو هم خیلی مهمه.

• `

  `:

  برای نوشتن پاراگراف های متنی.

• ``: یه تگ عمومی برای اعمال استایل روی قسمتی از متن بدون اینکه خط جدید ایجاد کنه.
• ``: متن رو پررنگ می کنه و به مرورگر می گه این بخش از متن اهمیت بیشتری داره.
• ``: متن رو ایتالیک می کنه و نشون میده که این بخش تاکید داره.

لینک ها و تصاویر

وبسایت بدون لینک و عکس که نمیشه، درسته؟

• ``: این تگ برای ساخت لینک استفاده میشه. با ویژگی `href` آدرس مقصدی که می خوای کاربر بره رو مشخص می کنی. ویژگی `target=_blank` هم باعث میشه لینک تو یه تب جدید باز بشه.
• ``: برای نمایش عکس ها به کار میره. ویژگی `src` آدرس عکس رو مشخص می کنه و `alt` (متن جایگزین) یه توضیح کوتاه در مورد عکس میده که هم برای سئو و هم برای دسترسی پذیری خیلی مهمه (اگه عکس لود نشد یا کاربری مشکل بینایی داشت).

لیست ها

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

• `
  ` (Unordered List):

  لیست نامرتب (بدون ترتیب عددی، با نقطه گذاری). هر آیتم لیست با تگ `

• `

مشخص میشه.

• `
  ` (Ordered List):

  لیست مرتب (با ترتیب عددی). هر آیتم لیست با تگ `

• `

مشخص میشه.

جداول

اگه نیاز داری اطلاعات رو تو قالب جدول نمایش بدی، این تگ ها به کارت میان.

تگ

کاربرد

جعبه اصلی برای ساخت جدول سربرگ جدول (ردیف عنوان ستون ها) بدنه اصلی جدول (داده ها) یک ردیف در جدول عنوان ستون (Header cell) سلول داده (Data cell) فرم ها اگه می خوای کاربر اطلاعاتی وارد کنه (مثل فرم تماس یا ثبت نام)، به این تگ ها نیاز داری. ` `: ظرف اصلی برای ساخت فرم. ``: برای انواع فیلد ورودی (متن، ایمیل، پسورد، دکمه رادیویی، چک باکس و...). ``: برای فیلد ورودی متن چند خطی. ``: برای ساخت دکمه ها. ``: برای برچسب گذاری فیلدهای ورودی، که هم برای کاربر بهتره و هم برای دسترسی پذیری. ۱.۴. ویژگی های تگ ها (Attributes) هر تگی که تو HTML استفاده می کنی، می تونه یه سری ویژگی (Attribute) هم داشته باشه. این ویژگی ها اطلاعات بیشتری رو در مورد اون تگ به مرورگر میدن یا عملکردش رو تغییر میدن. مثلاً همون `href` برای تگ `` یا `src` برای تگ `` که گفتم، اینا ویژگی هستن. دوتا از مهم ترین ویژگی ها که همیشه باهاشون سر و کار داری، `id` و `class` هستن: `id` (شناسه): مثل کد ملی می مونه، هر تگ فقط می تونه یه `id` منحصربه فرد داشته باشه و هیچ دو تگی نباید `id` یکسان داشته باشن. بیشتر برای اشاره مستقیم به یه عنصر خاص با JavaScript یا برای لینک های داخلی (Scroll to section) استفاده میشه. `class` (کلاس): مثل یه برچسب یا دسته می مونه. می تونی به هر تعداد تگ که بخوای، یه `class` یکسان بدی. این خیلی برای استایل دهی با CSS به درد می خوره، چون می تونی یه استایل رو به همه عناصری که یه کلاس دارن، اعمال کنی. مثلاً یه کلاس `btn` می سازی و به همه دکمه هات میدی تا یه شکل خاص داشته باشن. HTML قلب هر وبسایته؛ بدون اون، وبسایتت فقط یه مفهومه، نه یه واقعیت قابل لمس. با یادگیری تگ های معنایی، نه تنها ساختار خوبی به سایتت میدی، بلکه راه رو برای سئو و دسترسی پذیری هم هموار می کنی. کدنویسی تمیز با HTML، یعنی ساختن یه پایه محکم برای آینده. CSS – زیباسازی و چیدمان وبسایت شما، جایی که جادو اتفاق میفته ۲.۱. CSS چیست؟ خب، تا اینجا اسکلت وبسایتمون رو ساختیم. حالا نوبت چیه؟ نوبت اینه که بهش رنگ و لعاب بدیم، دیوارکشی کنیم، دکوراسیون بچینیم و خلاصه خوشگلش کنیم! اینجاست که CSS وارد میدون میشه. CSS مخفف Cascading Style Sheets هست و همونطور که از اسمش پیداست، کارش استایل دهی و زیباسازی وبسایته. CSS بهت اجازه میده که رنگ متن ها، اندازه ی فونت ها، فاصله ها، محل قرارگیری عناصر، پس زمینه ها، سایه ها و هر چیزی که مربوط به ظاهر بصری وبسایت میشه رو کنترل کنی. مزیت اصلی CSS اینه که محتوا (HTML) رو از ظاهر (CSS) جدا می کنه. یعنی چی؟ یعنی اینکه اگه بخوای ظاهر کل وبسایتت رو عوض کنی، دیگه لازم نیست بری تک تک فایل های HTML رو دستکاری کنی، فقط کافیه فایل CSS رو تغییر بدی و همه تغییرات رو به یکباره اعمال کنی. این کار هم کدنویسی رو تمیزتر می کنه، هم نگهداری رو آسون تر و هم باعث میشه سرعت بارگذاری سایتت بهتر بشه. ۲.۲. روش های اتصال CSS به HTML سه تا راه اصلی برای اینکه CSS رو به HTML متصل کنیم و استایل هامون اعمال بشن، وجود داره: CSS درون خطی (Inline CSS): این روش کمترین توصیه رو داره. تو این حالت، استایل رو مستقیم تو تگ HTML می نویسی. مثلاً: <p style=color: blue; font-size: 16px;>این یه پاراگراف آبی رنگه.</p>. مشکلش اینه که اگه بخوای یه استایل رو تو چند جای مختلف اعمال کنی، باید تک تک اون تگ ها رو تغییر بدی. CSS درونی (Internal CSS): تو این روش، استایل ها رو داخل تگ ` و در قسمت `` فایل HTML می نویسی. مثلاً: <head><style>p { color: blue; }</style></head>. این روش بهتر از Inline هست، ولی اگه تعداد صفحات وبسایتت زیاد باشه، بازم مدیریت استایل ها سخت میشه. CSS بیرونی (External CSS): این بهترین و حرفه ای ترین روشه. تو این حالت، استایل ها رو تو یه فایل جداگانه با پسوند `.css` می نویسی (مثلاً style.css) و بعد اون فایل رو تو بخش `` فایل HTML لینک می کنی. مثلاً: <head><link rel=stylesheet href=style.css></head>. با این کار، هر تعداد صفحه HTML که داشته باشی، می تونی همشون رو به یه فایل CSS لینک کنی و هر تغییری که تو فایل CSS بدی، روی تمام صفحات اعمال میشه. این یعنی کد تمیزتر، قابلیت نگهداری بیشتر و سرعت بارگذاری بهتر. ۲.۳. سلکتورهای CSS سلکتورها همون چیزایی هستن که باهاشون به CSS می گیم هی CSS! برو این عنصر خاص یا این گروه از عناصر رو پیدا کن و این استایل ها رو بهشون بده. انواع مختلفی از سلکتورها داریم: سلکتور نوع (Type Selector): مستقیم اسم تگ رو می نویسی. مثلاً: p { color: red; } (همه پاراگراف ها قرمز میشن). سلکتور کلاس (Class Selector): با یه نقطه (.) شروع میشه و بعدش اسم کلاس میاد. مثلاً: .my-button { background-color: blue; } (به هر تگی که کلاس my-button داشته باشه اعمال میشه). سلکتور آی دی (ID Selector): با یه هشتگ (#) شروع میشه و بعدش اسم ID میاد. مثلاً: #header { height: 100px; } (فقط به تگی که ID header داره اعمال میشه). یادت باشه ID باید منحصر به فرد باشه. سلکتورهای ترکیبی (Combinators): اینا سلکتورها رو با هم ترکیب می کنن تا عناصر پیچیده تری رو انتخاب کنن. Descendant Selector (فاصله): div p { color: green; } (تمام پاراگراف هایی که داخل تگ div هستن). Child Selector (>): ul > li { list-style-type: none; } (فقط آیتم های لیستی که فرزند مستقیم ul هستن). Adjacent Sibling Selector (+): h1 + p { margin-top: 20px; } (فقط پاراگرافی که بلافاصله بعد از h1 اومده). General Sibling Selector (~): h1 ~ p { color: purple; } (تمام پاراگراف هایی که بعد از h1 و در کنار اون هستن). سلکتورهای ویژگی (Attribute Selectors): بر اساس ویژگی های تگ ها انتخاب می کنن. مثلاً: input[type=text] { border: 1px solid gray; } (فیلدهای ورودی از نوع text). سلکتورهای شبه کلاس (Pseudo-classes): بر اساس وضعیت خاصی از عنصر انتخاب می کنن. مثلاً: a:hover { color: orange; } (وقتی موس روی لینک میره). ۲.۴. ویژگی های اصلی CSS (Properties) و کاربرد آن ها حالا که می دونیم چطور عناصر رو انتخاب کنیم، باید بدونیم چه استایل هایی رو میشه بهشون داد. CSS کلی ویژگی داره که هر کدوم کار خاصی انجام میدن: رنگ ها: `color`: رنگ متن رو تغییر میده. `background-color`: رنگ پس زمینه عنصر رو تغییر میده. فونت ها: `font-family`: نوع فونت (مثلاً Arial، Tahoma، Vazirmatn). `font-size`: اندازه ی فونت. `font-weight`: ضخامت فونت (مثلاً bold). `line-height`: فاصله ی بین خطوط متن. مدل جعبه ای (Box Model): این یکی فوق العاده مهمه! هر عنصر HTML مثل یه جعبه در نظر گرفته میشه. فهمیدن Box Model کلید چیدمان تو CSS هست. `content`: محتوای اصلی جعبه (متن، عکس و...). `padding`: فضای داخلی جعبه، بین محتوا و Border (مرز). `border`: خط مرزی دور جعبه. `margin`: فضای بیرونی جعبه، بین Border و عناصر دیگه. تصور کن یه تابلو رو می خوای روی دیوار نصب کنی. متن روی تابلو همون `content` هست. فاصله ی متن تا قاب تابلو میشه `padding`. خود قاب تابلو میشه `border`. و فاصله ی تابلو با تابلوهای دیگه یا لبه ی دیوار، میشه `margin`. اندازه ها: `width`: عرض عنصر. `height`: ارتفاع عنصر. `min-width`/`max-width`: حداقل/حداکثر عرضی که عنصر می تونه داشته باشه. `min-height`/`max-height`: حداقل/حداکثر ارتفاعی که عنصر می تونه داشته باشه. نمایش و موقعیت دهی: اینا خیلی تو چیدمان و رفتار عناصر تو صفحه تأثیر دارن. `display`: `block`: کل عرض موجود رو اشغال می کنه و عناصر بعدی میرن خط بعد (مثل <p> یا <div>). `inline`: فقط به اندازه محتواش فضا اشغال می کنه و عناصر دیگه کنارش میان (مثل <span> یا <a>). `inline-block`: ترکیبی از هر دو، میشه پهنا و ارتفاع بهش داد ولی کنار عناصر دیگه هم میاد. `none`: عنصر رو کاملاً از صفحه حذف می کنه. `flex`: برای چیدمان Flexbox (در ادامه توضیح میدم). `grid`: برای چیدمان Grid (در ادامه توضیح میدم). `position`: نحوه موقعیت دهی عنصر رو کنترل می کنه. `static`: حالت پیش فرض، عنصر طبق جریان عادی صفحه قرار می گیره. `relative`: مثل static هست، ولی می تونی با top، bottom، left، right اون رو نسبت به موقعیت اصلیش جابجا کنی. `absolute`: عنصر رو از جریان عادی صفحه خارج می کنه و موقعیتش رو نسبت به نزدیک ترین عنصر والد position: relative (یا absolute، fixed، sticky) تعیین می کنه. `fixed`: عنصر رو نسبت به پنجره مرورگر ثابت می کنه، حتی با اسکرول کردن هم تکون نمی خوره (مثل هدرهای چسبنده). `sticky`: ترکیبی از relative و fixed، تا یه جایی relative هست و بعد از اون fixed میشه. `z-index`: وقتی عناصر روی هم میفتن، این ویژگی مشخص می کنه کدوم عنصر بالاتر (جلوی) اون یکی قرار بگیره. ۲.۵. اصول چیدمان با CSS (Layout Principles) یکی از هیجان انگیزترین بخش های CSS، چیدمان صفحاته. در گذشته برای چیدمان از روش های قدیمی و بعضاً دردسرآفرین مثل Float استفاده می کردن، اما الان دو تا ابزار قدرتمند به نام Flexbox و CSS Grid داریم که کار رو خیلی راحت کردن. Flexbox: Flexbox برای چیدمان های یک بعدی عالیه، یعنی اگه می خوای عناصرت رو تو یه ردیف یا یه ستون مرتب کنی. مثلاً برای ساخت یه منو، یا قرار دادن چند آیتم کنار هم با فاصله های منظم. کافیه به عنصر والد display: flex; بدی، بعد می تونی با ویژگی هایی مثل justify-content (برای تراز افقی) و align-items (برای تراز عمودی) و flex-direction (برای ردیف یا ستون کردن) عناصر داخلش رو به راحتی کنترل کنی. واقعاً انقلابی تو چیدمان ایجاد کرده. CSS Grid: CSS Grid برای چیدمان های دوبعدی طراحی شده، یعنی وقتی می خوای عناصرت رو هم تو ردیف و هم تو ستون به صورت همزمان بچینی، مثل ساختار کلی یه صفحه وب با هدر، سایدبار، محتوا و فوتر. با display: grid; شروع میشه و بعدش می تونی ردیف ها و ستون ها رو تعریف کنی و مشخص کنی هر عنصر تو کدوم خونه ی این جدول فرضی قرار بگیره. برای طراحی Layout های پیچیده سایت، Grid بی رقیبه. CSS هنرمند وبسایت توست؛ باهاش میتونی نه تنها رنگ و رو بدی، بلکه چیدمان پیچیده و در عین حال زیبایی خلق کنی. قدرت تفکیک محتوا و استایل، کلید توسعه وب حرفه ایه. اصول بنیادین طراحی وبسایت با HTML و CSS (بهترین روش ها و مفاهیم پیشرفته) حالا که با HTML و CSS آشنا شدیم، وقتشه بریم سراغ نکات پیشرفته تر و بهترین روش هایی که یه وبسایت رو از خوب به عالی تبدیل می کنن. این بخش خیلی مهمه، چون فقط کدنویسی کافی نیست، باید درست کدنویسی کرد. ۳.۱. جداسازی نگرانی ها (Separation of Concerns) یکی از مهم ترین اصول تو توسعه وب، جداسازی نگرانی هاست. این یعنی هر بخش از کد ما باید وظیفه مشخصی داشته باشه و مسئول کار خاصی باشه. تو طراحی وب: HTML: فقط مسئول ساختار و محتوای صفحه است. یعنی مشخص می کنه تیترها کجا، پاراگراف ها کجا، عکس ها کجا. CSS: فقط مسئول ظاهر و استایل صفحه است. یعنی مشخص می کنه رنگ ها، فونت ها، چیدمان و زیبایی بصری چطور باشه. JavaScript: مسئول رفتار و تعامل صفحه است. یعنی وقتی روی دکمه ای کلیک می شه چه اتفاقی بیفته، یا انیمیشن ها چطور اجرا بشن. مزایای این رویکرد چیه؟ کد تمیزتر و خواناتر میشه، نگهداری و عیب یابی کد آسون تر میشه، می تونی راحت تر با بقیه توسعه دهنده ها همکاری کنی، و حتی سئو و کارایی وبسایتت هم بهتر میشه. ۳.۲. طراحی واکنش گرا (Responsive Design) همونطور که میدونی، مردم با دستگاه های مختلفی از وبسایت ها بازدید می کنن؛ از موبایل های کوچیک گرفته تا تبلت ها و لپ تاپ های بزرگ. طراحی واکنش گرا یعنی وبسایت تو بتونه ظاهر خودش رو با اندازه ی صفحه ی هر دستگاهی تطبیق بده و همیشه بهترین تجربه کاربری رو ارائه بده. اگه وبسایتت تو موبایل خوب دیده نشه، نصف مشتری هات رو از دست میدی. Media Queries: اینا تو CSS مثل یه شرط می مونن. به CSS می گی اگه عرض صفحه کاربر فلان اندازه بود، این استایل ها رو اعمال کن. مثلاً: @media screen and (max-width: 768px) { .header { flex-direction: column; } } این کد میگه اگه عرض صفحه کمتر از 768 پیکسل بود (مثلاً تو موبایل)، هدر رو به صورت ستونی بچین. واحد های اندازه گیری نسبی: به جای استفاده از پیکسل (px) که یه واحد ثابته، بهتره از واحدهای نسبی استفاده کنی. اینا خودشون رو با اندازه صفحه یا اندازه فونت اصلی مرورگر تطبیق میدن. مثلاً: `em`: نسبت به اندازه فونت والدش. `rem`: نسبت به اندازه فونت ریشه ی صفحه (HTML). `%`: نسبت به اندازه ی والدش. `vw` (viewport width): نسبت به عرض کلی صفحه نمایش. `vh` (viewport height): نسبت به ارتفاع کلی صفحه نمایش. استفاده از این واحدها باعث میشه وبسایتت به صورت طبیعی تر واکنش گرا باشه. تصاویر و ویدیوهای واکنش گرا: باید مطمئن بشی که عکس ها و ویدیوها هم تو اندازه های مختلف صفحه درست نمایش داده میشن و از کادر بیرون نمی زنن. معمولاً با max-width: 100%; height: auto; برای تصاویر این کار رو انجام میدن. ۳.۳. دسترسی پذیری وب (Web Accessibility - A11y) طراحی وبسایت برای همه! دسترسی پذیری یعنی وبسایتت برای همه ی آدما، با هر توانایی که دارن، قابل استفاده باشه. این شامل افرادی میشه که ممکنه ناتوانی های بینایی، شنوایی، حرکتی یا شناختی داشته باشن. رعایت دسترسی پذیری نه تنها یه کار اخلاقیه، بلکه برای سئو و اعتبار سایتت هم خیلی مفیده. استفاده صحیح از تگ های معنایی HTML: همونطور که قبلاً گفتیم، تگ هایی مثل <header>، <nav>، <main>، <article> و <footer> به نرم افزارهای خوانشگر صفحه (Screen Readers) کمک می کنن تا ساختار سایت رو برای افراد نابینا توضیح بدن. متن جایگزین (alt text) برای تصاویر: همیشه برای تگ <img> از ویژگی `alt` استفاده کن. این متن برای کسانی که نمی تونن عکس رو ببینن، توضیح میده که عکس چیه. کنتراست رنگی مناسب: مطمئن بشو که رنگ متن و پس زمینه به اندازه کافی با هم تضاد دارن تا افراد کم بینا هم بتونن محتوا رو بخونن. ابزارهای آنلاین زیادی برای بررسی کنتراست رنگی وجود داره. ۳.۴. کارایی و بهینه سازی (Performance Optimization) هیچ کس دوست نداره تو وبسایتی بمونه که کُند بارگذاری میشه. سرعت سایت هم برای تجربه کاربری مهمه و هم برای سئو. گوگل سایت های سریع رو دوست داره! بهینه سازی تصاویر: عکس ها معمولاً سنگین ترین بخش یه وبسایت هستن. باید: اندازه ی مناسبی داشته باشن (همون اندازه ای که تو سایت نمایش داده میشن). فشرده سازی بشن (بدون افت کیفیت زیاد). از فرمت های مناسب استفاده کنن (مثلاً WebP بهتر از JPEG هست). فشرده سازی (Minify) فایل های CSS و HTML: ابزارهایی وجود دارن که فضاهای خالی، کامنت ها و کاراکترهای اضافی رو از فایل های CSS و HTML حذف می کنن تا حجمشون کمتر بشه و سریع تر بارگذاری بشن. کد تمیز و مرتب (Clean Code): کدنویسی منظم و بدون کد تکراری، علاوه بر اینکه خوانایی رو بالا میبره، باعث میشه مرورگرها هم راحت تر و سریع تر کد رو پردازش کنن. ۳.۵. قابلیت نگهداری کد (Code Maintainability) اگه قراره روی یه پروژه وب به صورت تیمی کار کنی، یا حتی اگه خودت تنها کار می کنی و قراره بعداً دوباره به کدت برگردی، کد باید تمیز، خوانا و قابل نگهداری باشه. کامنت گذاری مناسب در HTML و CSS: توضیح بده که هر بخش از کدت چه کاری انجام میده. این کار به خودت و بقیه کمک می کنه که بعداً راحت تر کد رو درک کنید. <!-- این بخش برای نمایش اطلاعات تماس است --> <div class=contact-info>...</div> /* این استایل ها برای دکمه های اصلی سایت هستند */ .main-button { background-color: #007bff; } نام گذاری استاندارد برای کلاس ها و آی دی ها: از اسم های واضح و معنی دار استفاده کن. مثلاً به جای .item1 از .product-card استفاده کن. روش های نام گذاری مثل BEM (Block, Element, Modifier) هم هستن که به نظم کد خیلی کمک می کنن. ساختاردهی منطقی فایل ها و پوشه ها: فایل های CSS رو تو یه پوشه، عکس ها رو تو یه پوشه دیگه و فایل های HTML رو هم به صورت منظم تو پوشه ها قرار بده. ۳.۶. سازگاری مرورگرها (Browser Compatibility) یادت نره که هر مرورگری (کروم، فایرفاکس، اج، سافاری) ممکنه کمی تفاوت هایی تو نحوه تفسیر و نمایش CSS و HTML داشته باشه. این یعنی ممکنه وبسایتت تو کروم عالی به نظر برسه، اما تو فایرفاکس بهم ریخته باشه. برای همین: تست وبسایت در مرورگرهای مختلف: همیشه وبسایتت رو تو چند تا از مرورگرهای اصلی تست کن تا از نمایش درستش مطمئن بشی. استفاده از Autoprefixer: بعضی از ویژگی های جدید CSS ممکنه هنوز تو همه مرورگرها کامل پشتیبانی نشن و نیاز به پیشوند (مثل -webkit- برای کروم و سافاری یا -moz- برای فایرفاکس) داشته باشن. ابزاری مثل Autoprefixer این پیشوندها رو به صورت خودکار به کد CSS اضافه می کنه و خیال شما رو راحت می کنه. نتیجه گیری خب، رسیدیم به آخر این سفر هیجان انگیز! امیدوارم با همه ی این توضیحات، یه دید خیلی خوب و جامع نسبت به اصول طراحی وبسایت با HTML و CSS پیدا کرده باشی. یاد گرفتیم که HTML مثل اسکلت بندی وبسایتت می مونه و CSS هم مثل لباس و دکوراسیونه که بهش رنگ و لعاب و زیبایی میده. این دو زبان، پایه و اساس هر چیزی هستن که تو دنیای وب می بینیم و یاد گرفتنشون، دروازه ایه برای ورود به دنیای بزرگ و پرکاربرد توسعه وب. یادت باشه، دانش تئوری به تنهایی کافی نیست. تنها راهی که می تونی واقعاً این مفاهیم رو هضم کنی و توشون استاد بشی، تمرینه. برو خودت شروع کن به ساختن! از یه صفحه ساده با یه تیتر و چند تا پاراگراف شروع کن، بعد عکس اضافه کن، منو بساز، استایل های مختلف رو امتحان کن، تا کم کم پروژه های پیچیده تر رو بسازی. هر اشتباهی که می کنی، یه فرصت جدید برای یادگیریه. این فقط اول راهه. دنیای وب خیلی بزرگه و هر روز داره پیشرفت می کنه. بعد از اینکه تو HTML و CSS قوی شدی، می تونی بری سراغ JavaScript برای افزودن تعامل و پویایی به وبسایتت، بعدش فریم ورک های CSS مثل Bootstrap یا Tailwind CSS که کار رو سریع تر می کنن، و بعدش فریم ورک های JavaScript مثل React یا Vue.js. مسیر یادگیری هیچ وقت تموم نمیشه. پس تعلل نکن! همین امروز، شروع کن به کدنویسی اولین وبسایت خودت. همین الان یه فایل جدید بساز و اولین تگ های HTML و CSS رو توش بنویس. اصول طراحی وبسایت با HTML و CSS رو که یاد گرفتی، هیچ محدودیتی برای خلق چیزای جدید نداری. موفق باشی!