یادگیری HTML و CSS قدم‌به‌قدم؛ راهی ساده برای ورود به دنیای طراحی وب

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

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

شما در پایان این مقاله با موارد زیر آشنا خواهید شد:

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

چرا یادگیری html و css اهمیت دارد؟

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

HTML: اسکلت‌بندی و ساختار محتوای وب

HTML مخفف HyperText Markup Language و زبان نشانه‌گذاری استاندارد برای ساخت صفحات وب است. وظیفه اصلی آن تعریف و سازمان‌دهی محتوا است. به زبان ساده HTML به مرورگر می‌گوید که کدام بخش از متن یک عنوان است (<h1>)، کدام‌یک پاراگراف (<p>) و کجا باید یک تصویر (<img>) نمایش داده شود. اگر طراحی سایت را به ساختمان‌سازی تشبیه کنیم،  HTML فونداسیون، ستون‌ها و دیوارهای آن است. 

این زبان ساختار اصلی و چهارچوب صفحه شما را مشخص می‌کند اما کاری به زیبایی و ظاهر آن ندارد. شروع یادگیری html و css همیشه با درک همین ساختار ساده آغاز می‌شود.

CSS: طراحی، رنگ و جان‌بخشی به ساختار

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

شما با استفاده از CSS به مرورگر دستور می‌دهید که مثلاً تمام عنوان‌های اصلی، آبی‌رنگ و با فونت مشخصی باشند. در واقع، یادگیری html css به شما این قدرت را می‌دهد که یک سند متنی بی‌روح را به یک تجربهٔ بصری جذاب برای کاربر تبدیل کنید. همان‌طور که در راهنمای CSS وب‌سایت MDN آمده، CSS برای تبدیل ساختار به یک طرح زیبا ضروری است.

تفاوت HTML و CSS در یک نگاه

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

ویژگی	HTML (زبان نشانه‌گذاری)	CSS (زبان استایل‌دهی)
نقش اصلی	ساختاردهی و تعریف محتوا	طراحی و زیباسازی ظاهر
وظیفه	تعیین اینکه «این یک عنوان است»	تعیین اینکه «این عنوان آبی‌رنگ باشد»
تمرکز	روی معنا و اسکلت صفحه	روی چیدمان، رنگ و جلوه‌های بصری
مثال	<p>یک پاراگراف</p>	p { color: blue; }

پیش‌از شروع: پیش‌نیازهای یادگیری html و css

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

ابزارهای لازم: فقط یک ویرایشگر کد و یک مرورگر

مسیر شما با دو ابزار کلیدی آغاز می‌شود: مکانی برای نوشتن کدها و جایی برای دیدن نتیجه آن‌ها

۱- بهترین ویرایشگرهای کد رایگان برای شروع

ویرایشگر کد (Code Editor) یک برنامه ویرایش متن است که برای کدنویسی بهینه شده و با ویژگی‌هایی مانند رنگی‌کردن کدها (Syntax Highlighting) و تکمیل خودکار، فرایند کدنویسی را ساده‌تر می‌کند. اگرچه حتی با Notepad ویندوز هم می‌توان کد نوشت، اما استفاده از یک ویرایشگر مدرن، تجربه شروع یادگیری html css را برای شما را لذت‌بخش‌تر خواهد کرد. سه گزینه محبوب و رایگان برای شروع عبارت‌اند از:

• Visual Studio Code (VS Code): انتخاب اول بسیاری از توسعه‌دهندگان در سراسر جهان است. این ویرایشگر که توسط مایکروسافت توسعه داده‌شده، بسیار قدرتمند، سریع و دارای هزاران افزونه رایگان برای هر کاری است و برای شروع یادگیری html و css توصیه می‌شود.
• Sublime Text: مشهور به سرعت و سبکی فوق‌العاده. Sublime Text یک ویرایشگر روان و بدون حاشیه است که تمرکز شما را روی کدنویسی حفظ می‌کند.
• Atom: یک ویرایشگر متن‌باز که توسط گیت‌هاب ساخته شده و به دلیل قابلیت شخصی‌سازی بالا شناخته می‌شود.

تمام این ابزارها عالی هستند، اما اگر در انتخاب تردید دارید با VS Code شروع کنید. برای مطالعه و مقایسه عمیق‌تر، می‌توانید به راهنمای انتخاب ویرایشگر کد در freeCodeCamp (لینک در مورد ویرایشگرهای جاوا اسکریپت است اما نکات آن برای یادگیری html و css نیز کاملاً صدق می‌کند) مراجعه کنید.

چرا مرورگر شما بهترین ابزار شما است؟

مرورگر وب شما (مانند گوگل کروم یا موزیلا فایرفاکس) را فقط ابزاری برای نمایش وب‌سایت‌ها ندانید، بلکه آن را آزمایشگاه قدرتمندی برای یادگیری اچ تی ام ال و سی اس به‌حساب آورید. تمام مرورگرهای مدرن، بخشی به نام «ابزارهای توسعه‌دهنده» (Developer Tools) دارند که معمولاً با فشردن کلید F12 فعال می‌شود.

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

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

عادت به استفاده از این ابزار، فرایند یادگیری html css را برای شما بسیار سریع‌تر و تعاملی‌تر می‌کند.

 آیا برای شروع یادگیری HTML و CSS به دانش خاصی نیاز دارم؟

خیر، مطلقاً نه. این مهم‌ترین نکته‌ای است که باید بدانید. برای شروع یادگیری html و css شما به هیچ‌گونه دانش برنامه‌نویسی، مدرک دانشگاهی یا مهارت ریاضیات پیچیده نیاز ندارید. HTML یک زبان نشانه‌گذاری و CSS یک زبان استایل‌دهی است؛ آن‌ها زبان برنامه‌نویسی نیستند. وظیفه آن‌ها توصیف ساختار و ظاهر است و اجرای منطق‌های پیچیده‌ای درکار نیست. تنها پیش‌نیاز واقعی شما، کنجکاوی برای یادگیری و اشتیاق برای ساختن است.

مسیر یادگیری قدم‌به‌قدم HTML (از صفر)

حالا که ابزارهای خود را آماده کرده‌اید، وقت آن است که دست‌به‌کد شویم. یادگیری html و css همیشه با آموزش ساختار و تگ‌های پایه‌ای HTML شروع می‌شود. در این بخش قدم‌های اولیه و ضروری را با هم برمی‌داریم.

گام اول: درک ساختار اصلی یک سند HTML

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

<!DOCTYPE html>
 <html>
  <head>
    <title>عنوان صفحه</title>
  </head>
  <body>
    <h1>اولین عنوان من</h1>
    <p>اولین پاراگراف من.</p>
  </body>
 </html>

بیایید این ساختار را کالبدشکافی کنیم:

• <!DOCTYPE html>: این یک تگ نیست، بلکه یک اعلان (Declaration) است. این خط به مرورگر می‌گوید که این سند براساس آخرین استاندارد HTML (یعنی HTML5) نوشته شده‌است.
• <html>: این تگ ریشه است و تمام محتوای صفحه، ازجمله دو بخش اصلی بعدی، درون آن قرار می‌گیرد.
• <head>: این بخش شامل «فراداده‌ها» (Metadata) است؛ اطلاعاتی درباره صفحه که مستقیماً در محتوای اصلی نمایش داده نمی‌شوند. مواردی مانند عنوان صفحه (که در تب مرورگر دیده می‌شود)، لینک به فایل‌های CSS و اطلاعات مربوط به سئو در اینجا قرار می‌گیرند.
• <body>: این بخش مهم‌ترین قسمت صفحه شما است. هر چیزی که کاربر در صفحه وب می‌بیند -از عناوین و پاراگراف‌ها گرفته تا تصاویر و لینک‌ها- باید درون تگ <body> قرار بگیرد.

برای مشاهده مثال‌های بیشتر از این ساختار پایه، می‌توانید به آموزش‌های مقدماتی W3Schools سر بزنید.

گام دوم: کار با تگ‌های محتوایی ضروری

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

۱- عناوین و پاراگراف‌ها (<h1> تا <h6> و <p>)

برای ایجاد ساختار و خوانایی در متن از تگ‌های عنوان و پاراگراف استفاده می‌کنیم.

• تگ‌های <h1> تا <h6>: برای تعریف عناوین به کار می‌روند. <h1> مهم‌ترین و بزرگ‌ترین عنوان (معمولاً عنوان اصلی صفحه) و <h6> کم‌اهمیت‌ترین عنوان است.
• تگ <p>: برای تعریف یک پاراگراف از متن استفاده می‌شود.

<h1>این عنوان اصلی است</h1>
<h2>این یک زیرعنوان است</h2>
<p>این یک پاراگراف از متن است که توضیحات بیشتری ارائه می‌دهد.</p>

۲- ساخت لینک‌ها (<a>)

وب بدون لینک‌ها معنایی ندارد. برای ایجاد یک لینک قابل کلیک (Hyperlink)، از تگ <a> (مخفف Anchor) استفاده می‌کنیم. مهم‌ترین ویژگی این تگ، href است که آدرس مقصد لینک را مشخص می‌کند.

<a href="https://ferdowsi.cloud">به وب‌سایت ابر فردوسی بروید</a>

۳- افزودن تصاویر (<img>)

برای نمایش یک تصویر در صفحه از تگ <img> استفاده می‌کنیم. این تگ دو ویژگی (Attribute) ضروری دارد:

• src: آدرس (URL) فایل تصویر را مشخص می‌کند.
• alt: یک متن جایگزین برای تصویر ارائه می‌دهد. این متن برای دسترسی‌پذیری (برای افرادی که از صفحه‌خوان استفاده می‌کنند) و سئو بسیار مهم است و در صورت بارگذاری نشدن تصویر، نمایش داده می‌شود.

<img src="logo-ferdowsi.png" alt="لوگوی رایانش ابری فردوسی">

این تگ‌ها، آجرهای اصلی ساخت هر صفحه وب هستند و اولین چیزی است که در یادگیری html و css باید به آن مسلط شوید. برای آشنایی با سایر تگ‌های مرتبط با متن، مستندات وب MDN را ببینید.

گام سوم: ساختاردهی صفحه با تگ‌های معنایی (Semantic HTML)

در گذشته توسعه‌دهندگان برای ساختن بخش‌های مختلف یک صفحه (مانند هدر، فوتر یا سایدبار) از تگ <div> استفاده می‌کردند. این کار ازنظر ظاهری مشکلی ایجاد نمی‌کرد، اما کد نهایی هیچ «معنایی» نداشت. <div> به مرورگر یا موتور جستجو نمی‌گوید که «من هدر هستم» یا «من بخش اصلی محتوا هستم».

HTML5 برای حل این مشکل، تگ‌های معنایی (Semantic Tags) را معرفی کرد. این تگ‌ها دقیقاً مانند <div> عمل می‌کنند اما نام آن‌ها، نقش و معنای محتوای درونشان را توصیف می‌کند. در یادگیری html و css، استفاده از آن‌ها به سه دلیل حیاتی است: سئوی بهتر، دسترسی‌پذیری (Accessibility) بهتر برای کاربران نابینا و خوانایی بالاتر کد.

مهم‌ترین تگ‌های معنایی عبارت‌اند از:

• <header>: برای معرفی بخش بالایی صفحه یا یک سکشن به کار می‌رود. معمولاً شامل لوگو، عنوان اصلی و منوی ناوبری است.
• <nav>: به‌طور خاص برای تعریف منوهای اصلی ناوبری سایت استفاده می‌شود.
• <main>: محتوای اصلی و منحصربه‌فرد صفحه باید داخل این تگ قرار بگیرد. هر صفحه فقط باید یک تگ <main> داشته باشد.
• <article>: برای محتوای مستقل و کامل که بتوان آن را به تنهایی منتشر کرد (مانند یک مقاله وبلاگ، یک خبر یا یک محصول).
• <section>: برای گروه‌بندی محتواهای مرتبط با هم به کار می‌رود.
• <footer>: برای بخش پایانی صفحه یا یک سکشن استفاده می‌شود و معمولاً شامل اطلاعاتی مانند کپی‌رایت، لینک‌های مرتبط یا اطلاعات تماس است.

کد زیر، یک ساختار مدرن و معنایی را نشان می‌دهد:

<body>
  <header>
	<h1>وب‌سایت من</h1>
	<nav>
  	<a href="/home">خانه</a>
  	<a href="/about">درباره ما</a>
	</nav>
  </header>
 
  <main>
	<article>
  	<h2>عنوان اولین مقاله</h2>
  	<p>محتوای این مقاله در اینجا قرار می‌گیرد...</p>
	</article>
  </main>
 
  <footer>
	<p>&copy; 1404 - تمام حقوق محفوظ است.</p>
  </footer>
</body>

همان‌طور که می‌بینید، این ساختار بسیار خواناتر از کدی است که تماماً با <div> نوشته‌شده باشد. برای اطلاعات بیشتر در مورد اهمیت معناشناسی در وب، مستندات MDN را بخوانید.

مسیر یادگیری قدم‌به‌قدم CSS (برای زیباسازی)

اکنون که با ساختاردهی محتوا به کمک HTML آشنا شدید، وقت آن است که در ادامه مسیر یادگیری html و css با سی اس اس به این ساختار، رنگ و لعاب بدهیم و آن را زیبا کنیم. CSS به شما قدرت می‌دهد تا تقریباً تمام جنبه‌های بصری وب‌سایت خود را کنترل کنید.

گام اول: روش‌های افزودن CSS به HTML

قبل‌از هر چیز باید به مرورگر بگوییم که کدهای CSS ما کجا قرار دارند. سه روش برای اتصال CSS به سند HTML وجود دارد:

1. روش خارجی (External): بهترین و متداول‌ترین روش

در این روش همهٔ کدهای CSS خود را در یک فایل جداگانه با پسوند css (مثلاً style.css) می‌نویسید. سپس با استفاده از تگ <link> در بخش <head> فایل HTML، آن را به صفحه متصل می‌کنید. مزیت بزرگ این روش، امکان استفاده از یک فایل CSS برای چندین صفحه و مدیریت آسان‌تر کدها است.

HTML
<head>
  <link rel="stylesheet" href="style.css">
</head>

2. روش داخلی (Internal)

در این روش، کدهای CSS مستقیماً داخل تگ <style> در بخش <head> فایل HTML قرار می‌گیرند. این روش برای صفحات تکی یا تست سریع کدها مناسب است، اما چون برای صفحات دیگر قابل‌استفاده نیست، برای وب‌سایت‌های بزرگ توصیه نمی‌شود.

<head>
  <style>
	body {
  	background-color: #f0f0f0;
	}
	h1 {
  	color: navy;
	}
  </style>
</head>

3. روش درون‌خطی (Inline)

در این روش، استایل‌ها با استفاده از ویژگی style مستقیماً به خود تگ HTML اضافه می‌شوند. این روش به‌دلیل ترکیب کردن ساختار و ظاهر، خوانایی کد را پایین می‌آورد و مدیریت آن بسیار دشوار است. توصیه می‌شود تاحدامکان از این روش استفاده نکنید.

<h1 style="color: blue; text-align: center;">این یک عنوان آبی وسط‌چین است</h1>

برای آشنایی بیشتر با این بخش از یادگیری html و css، می‌توانید به راهنمای وب‌سایت W3Schools مراجعه کنید.

گام دوم: آشنایی با سلکتورهای پایه (ID, Class, Tag)

حالا که می‌دانیم CSS را کجا بنویسیم، قدم بعدی در یادگیری html و css این است که یاد بگیریم چگونه به آن بگوییم که کدام عنصر HTML را می‌خواهیم استایل‌دهی کنیم. این کار با سلکتورها (Selectors) انجام می‌شود. سلکتورها الگوهایی هستند که عناصر موجود در صفحه را انتخاب می‌کنند. سه نوع سلکتور پایه و ضروری عبارت‌اند از:

1. سلکتور تگ (Tag Selector)

این سلکتور تمام تگ‌های یک نوع مشخص را انتخاب می‌کند. برای مثال، اگر بخواهید تمام پاراگراف‌های (<p>) صفحه را با رنگ خاکستری نمایش دهید، از این سلکتور استفاده می‌کنید.

CSS
p {
  color: gray;
}

2. سلکتور کلاس (Class Selector)

پرکاربردترین و انعطاف‌پذیرترین سلکتور است. شما می‌توانید با افزودن ویژگی class به تگ‌های HTML، آن‌ها را دسته‌بندی کنید. سپس در CSS و با استفاده از یک نقطه (.) قبل از نام کلاس، تمام عناصر دارای آن کلاس را انتخاب می‌کنید. چندین عنصر می‌توانند یک کلاس مشترک داشته باشند.

<p class="highlight">این پاراگراف هایلایت شده است.</p>
CSS
.highlight {
  background-color: yellow;
}

3. سلکتور شناسه (ID Selector)

این سلکتور یک عنصر منحصربه‌فرد را در صفحه انتخاب می‌کند. هر id باید در کل صفحه یکتا باشد. در CSS برای انتخاب یک عنصر از طریق id، از علامت (#) قبل‌از نام آن استفاده می‌کنیم.

<div id="main-header">این هدر اصلی سایت است</div>
CSS
#main-header {
  border-bottom: 2px solid black;
}

برای مطالعه کامل‌تر انواع سلکتورها، مستندات جامع MDN یک مرجع بی‌نظیر است.

گام سوم: استایل‌دهی به متن، رنگ و پس‌زمینه

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

در CSS، هر قانون از یک سلکتور و یک بلوک اعلان تشکیل شده است. در بلوک اعلان، شما ویژگی (Property) و مقدار (Value) آن را مشخص می‌کنید:

h1 {
  color: blue;
}

در اینجا h1 سلکتور، color ویژگی و blue مقدار آن است. برخی از اصلی‌ترین ویژگی‌ها برای شروع عبارت‌اند از:

• color: رنگ متن را تعیین می‌کند.
• background-color: رنگ پس‌زمینه یک عنصر را مشخص می‌کند.
• font-family: نوع فونت متن را تعریف می‌کند (مانند Arial, Verdana و…).
• font-size: اندازه متن را کنترل می‌کند (معمولاً با واحد پیکسل px).

بیایید این‌ها را در یک مثال عملی ببینیم:

/* این کد تمام متن‌های داخل بدنه صفحه را استایل‌دهی می‌کند */
body {
  font-family: Arial, sans-serif; /* اگر Arial در دسترس نبود، از اولین فونت sans-serif استفاده کن */
  background-color: #f4f4f4; /* یک خاکستری خیلی روشن برای پس‌زمینه */
}
 
/* این کد فقط عنوان اصلی را هدف قرار می‌دهد */
h1 {
  color: #333; /* یک رنگ خاکستری تیره برای متن عنوان */
  font-size: 32px; /* اندازه فونت بزرگ‌تر برای عنوان */
}

با همین چند خط ساده، ظاهر یک صفحه خام به‌کلی تغییر می‌کند. برای یادگیری ویژگی‌های بیشتر در زمینه استایل‌دهی به متن، راهنمای وب‌سایت MDN یک منبع فوق‌العاده است.

گام چهارم: درک مدل جعبه‌ای (Box Model)

این یکی از بنیادی‌ترین مفاهیم در یادگیری html و css است: در CSS، هر عنصر HTML یک جعبه مستطیلی است. درک این مدل برای کنترل چیدمان و فاصله بین عناصر ضروری است. این جعبه از چهار لایه تشکیل شده‌است:

به زبان ساده:

1. Content (محتوا): خود متن یا تصویر شما
2. Padding (فاصله داخلی): فضای خالی بین محتوا و کادر دور آن. مثل حاشیه سفید بین یک عکس و قاب آن
3. Border (کادر): خطی که دور محتوا و Padding کشیده می‌شود. مثل خود قاب عکس
4. Margin (فاصله خارجی): فضای خالی خارج از کادر که عنصر شما را از عناصر همسایه جدا می‌کند. مثل فاصله‌ای که بین دو قاب عکس روی دیوار ایجاد می‌کنید.

کد زیر این مفهوم را نشان می‌دهد:

.my-box {
  padding: 20px; /* 20 پیکسل فاصله داخلی از همه جهات */
  border: 2px solid black; /* یک کادر مشکی با ضخامت ۲ پیکسل */
  margin: 40px; /* 40 پیکسل فاصله خارجی از عناصر دیگر */
}

در یادگیری html و css، تسلط بر این مدل جعبه‌ای به شما قدرت کامل برای مدیریت چیدمان در طراحی‌هایتان را می‌دهد. برای بررسی عمیق‌تر و دیدن مثال‌های تعاملی، صفحه Box Model در MDN را از دست ندهید.

گام پنجم: مقدمه‌ای بر چیدمان با Flexbox

تا اینجای کار یاد گرفتید که به عناصر استایل بدهید و فاصله آن‌ها را مدیریت کنید. اما چگونه می‌توانیم عناصر را به‌راحتی در کنار هم (افقی) یا زیر هم (عمودی) بچینیم و آن‌ها را تراز کنیم؟ در گذشته این کار یکی از چالش‌های بزرگ یادگیری html و css بود، اما امروزه با Flexbox این فرایند بسیار ساده شده‌است.

Flexbox یک مدل چیدمان است که به شما اجازه می‌دهد عناصر داخل یک کانتینر را به‌صورت هوشمند و انعطاف‌پذیر مرتب کنید. برای فعال کردن آن، کافی است به عنصر والد (کانتینر) ویژگی display: flex; را بدهید. بیایید یک مثال ساده را ببینیم. فرض کنید سه جعبه داریم که می‌خواهیم در یک ردیف و با فاصله یکسان از هم قرار بگیرند.

// کد Html //
<div class="container">
  <div class="box">۱</div>
  <div class="box">۲</div>
  <div class="box">۳</div>
</div>

// کد css //
.container {
  display: flex; /* استفاده از فلکس باکس! */
  justify-content: space-around; /* به عناصر بگو با فاصله مساوی از هم پخش شوند */
  background-color: #eee;
  padding: 10px;
}
 
.box {
  width: 80px;
  height: 80px;
  background-color: #007bff;
  color: white;
  text-align: center;
  line-height: 80px; /* ترفندی برای وسط‌چین کردن عمودی متن */
  font-size: 24px;
}

تنها با افزودن دو خط display: flex; و justify-content: space-around;، چیدمان عناصر به‌کلی تغییر کرد. این فقط بخش کوچکی از قدرت Flexbox است. برای یادگیری کامل و عمیق این ابزار قدرتمند، راهنمای جامع Flexbox در سایت CSS-Tricks یکی از بهترین منابع موجود است.

بهترین منابع برای شروع یادگیری html و css

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

منابع معتبر انگلیسی برای شروع یادگیری html css

• MDN Web Docs (Mozilla): این وب‌سایت دانشنامه رسمی وب است. هرگاه به دنبال معتبرترین و دقیق‌ترین اطلاعات درباره یک تگ HTML یا ویژگی CSS بودید، MDN اولین جایی است که باید به آن سر بزنید.
• freeCodeCamp: یک پلتفرم آموزشی کاملاً رایگان و تعاملی که با انجام پروژه‌های عملی، مفاهیم را به شما آموزش می‌دهد. دوره “Responsive Web Design” آن نقطه شروعی ایدئال است.
• W3Schools: یکی از قدیمی‌ترین و محبوب‌ترین وب‌سایت‌ها برای یادگیری سریع و دیدن مثال‌های ساده و کاربردی است. ویرایشگر آنلاین آن به شما اجازه می‌دهد کدها را همان‌جا تست کنید.
• The Odin Project: اگر به‌دنبال یک مسیر آموزشی کامل و ساختاریافته هستید که شما را از صفر به یک توسعه‌دهنده وب کامل تبدیل کند، این منبع فوق‌العاده است.

منابع خوب فارسی برای یادگیری html و css

• Sabzlearn (سبزلرن): این وب‌سایت دوره‌های آموزشی پروژه‌محور و باکیفیتی در حوزه وب ارائه می‌دهد و یکی از انتخاب‌های محبوب برای یادگیری تخصصی فرانت‌اند در ایران است.
• Frontcast (فرانت کست): به‌صورت تخصصی روی آموزش‌های فرانت‌اند تمرکز دارد و مقالات و ویدئوهای رایگان و مفیدی در زمینه یادگیری اچ تی ام ال و سی اس اس منتشر می‌کند.
• 7Learn (سون لرن): از پلتفرم‌های باسابقه در ایران که دوره‌های متنوعی در حوزه برنامه‌نویسی وب دارد و وبلاگ آن نیز منبع خوبی برای شروع است.
• کانال‌های یوتیوب: کانال‌های آموزشی متعددی وجود دارند که مفاهیم را به‌صورت ویدئویی و با زبانی ساده آموزش می‌دهند. یا یک جستجوی ساده به تعدادی از آن‌ها برخواهید خورد.

نکته کلیدی: خودتان را در میان منابع غرق نکنید. یک یا دو منبع را انتخاب کنید و با تمرکز مسیر آموزشی آن‌ها را دنبال کنید.

پروژه عملی یادگیری html و css: ساخت یک صفحه ساده شخصی

تئوری کافی است؛ بیایید ساختن را شروع کنیم! در این بخش، تمام مفاهیمی را که تا اینجا در مسیر آموزش html css یاد گرفته‌ایم را باهم ترکیب می‌کنیم تا یک صفحه ساده شخصی (چیزی شبیه به یک کارت ویزیت آنلاین) بسازیم. این بهترین تمرین برای تثبیت آموخته‌ها است.

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

ابتدا ساختار اصلی صفحه را با HTML ایجاد می‌کنیم. یک فایل به نام index.html بسازید و کدهای زیر را در آن کپی کنید. ما در این کد از تگ‌های معنایی مانند <main> و <section> برای سازماندهی بهتر استفاده کرده‌ایم.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>صفحه شخصی من</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
 
  <main class="card">
	<section class="profile">
  	<img src="https://via.placeholder.com/150" alt="عکس پروفایل" class="profile-pic">
  	<h1>نام شما</h1>
  	<p class="title">توسعه‌دهنده وب | طراح</p>
  	<p class="description">
    	یک توضیح کوتاه درباره خودتان، علاقه‌مندی‌ها یا مهارت‌هایی که در حال یادگیری آن هستید بنویسید.
  	</p>
	</section>
	
	<section class="social-links">
  	<a href="#">لینکدین</a>
  	<a href="#">گیت‌هاب</a>
  	<a href="#">وب‌سایت</a>
	</section>
  </main>
 
</body>
</html>

کد CSS: استایل‌ها و طراحی

حالا وقت جان‌بخشی به ساختار بی‌روح HTML است. یک فایل دیگر در کنار فایل قبلی به نام style.css بسازید و کدهای زیر را در آن قرار دهید. در این کد تمام مفاهیمی که یاد گرفتیم، ازجمله Flexbox برای وسط‌چین کردن کارت و Box Model برای مدیریت فواصل استفاده شده‌است.

/* --- استایل‌های کلی و فونت --- */
body {
  font-family: 'Vazirmatn', Arial, sans-serif; /* استفاده از فونت وزیرمتن یا یک فونت استاندارد */
  background-color: #f0f2f5;
  color: #333;
  margin: 0;
 
  /* استفاده از فلکس‌باکس برای وسط‌چین کردن کارت در صفحه */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* حداقل ارتفاع به اندازه کل صفحه نمایش */
}
 
/* --- استایل کارت اصلی --- */
.card {
  background-color: white;
  border-radius: 15px; /* گرد کردن گوشه‌ها */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* ایجاد یک سایه ملایم */
  max-width: 350px;
  width: 90%;
  padding: 30px;
  text-align: center;
}
 
/* --- استایل عکس پروفایل --- */
.profile-pic {
  width: 120px;
  height: 120px;
  border-radius: 50%; /* تبدیل عکس به دایره */
  border: 4px solid #007bff;
  object-fit: cover; /* جلوگیری از دفورمه شدن عکس */
}
 
.title {
  color: #555;
  font-size: 1rem;
  margin-top: 5px;
}
 
.description {
  font-size: 0.9rem;
  line-height: 1.6;
}
 
/* --- استایل بخش لینک‌های اجتماعی --- */
.social-links {
  margin-top: 20px;
}
 
.social-links a {
  text-decoration: none; /* حذف خط زیر لینک‌ها */
  color: #007bff;
  background-color: #e7f3ff;
  padding: 8px 15px;
  margin: 0 5px;
  border-radius: 20px; /* گرد کردن لینک‌ها */
  font-size: 0.9rem;
  transition: background-color 0.3s; /* ایجاد یک انیمیشن نرم */
}
 
.social-links a:hover {
  background-color: #007bff;
  color: white;
}

نکته: برای استفاده از فونت ‘Vazirmatn’ باید آن را به پروژه خود اضافه کنید. برای سادگی، می‌توانید این خط را حذف کرده تا مرورگر از فونت پیش‌فرض بعدی (Arial) استفاده کند.

نتیجه نهایی پروژه و نحوه اجرای آن

تبریک! شما اولین پروژه کامل خود را با موفقیت کدنویسی کردید. اجرای آن بسیار ساده است:

1. یک پوشه جدید در کامپیوتر خود بسازید (مثلاً به نام my-page).
2. دو فایل index.html و style.css را داخل این پوشه ایجاد کنید.
3. کد HTML را در فایل index.html و کد CSS را در فایل style.css کپی کنید.
4. در نهایت، کافی است روی فایل index.html دابل کلیک کنید. صفحه شما به‌طور خودکار در مرورگر پیش‌فرضتان باز خواهد شد.

آنچه می‌بینید، نتیجه عملی یادگیری html و css است. شما یک ساختار را تعریف کردید و سپس با استایل‌دهی آن را به یک محصول بصری جذاب تبدیل کرده‌اید. حالا می‌توانید با تغییر مقادیر در فایل style.css یا افزودن محتوای جدید به index.html، آن را بیش از پیش شخصی‌سازی کنید.

چگونه وب‌سایت خود را روی اینترنت منتشر کنیم؟

تبریک! صفحه‌ای که ساخته‌اید درحال‌حاضر روی کامپیوتر شما قابل مشاهده‌است. اما قدرت واقعی وب در به اشتراک گذاشتن آن با تمام دنیاست. برای این کار، فایل‌های شما باید روی یک کامپیوتر همیشه روشن و متصل به اینترنت قرار بگیرند. این فرایند «میزبانی وب» یا هاستینگ نام دارد.

یادگیری html و css به هاستینگ ختم می‌شود

فایل‌های index.html و style.css که در مبحث یادگیری html و css باهم ایجاد کردیم، مانند نقشه و مصالح یک ساختمان هستند. برای اینکه این ساختمان ساخته شود و دیگران بتوانند آن را ببینند، شما به یک قطعه زمین با یک آدرس مشخص در دنیای اینترنت نیاز دارید. هاستینگ دقیقاً همان زمین است. شما فضایی را روی یک کامپیوتر قدرتمند به نام «سرور» اجاره می‌کنید تا وب‌سایت شما ۲۴ ساعته در دسترس همه باشد. انواع مختلفی از این فضاها مانند فضاهای اشتراکی ساده یا سرورهای اختصاصی وجود دارد. سرور ابری یکی از جدیدترین رویکردهای روز دنیا به مفهوم هاستینگ است.

چرا سرور ابری گزینه‌ای خوبی برای شروع و رشد است؟

شما امروز یادگیری html و css را به‌پایان می‌رسانید و شاید اولین پروژه شما یک صفحه ساده باشد، اما پروژه بعدی چطور؟ یا زمانی که همین وب‌سایت رشد کند و بازدیدکنندگان بیشتری جذب کند چه؟ انتخاب یک زیرساخت مناسب از همان ابتدا، شما را از دردسرهای آینده نجات می‌دهد و در این مرحله از کار است که سرور ابری امتیازات خود را به رخ سایر رقبا می‌کشد:

• مقیاس‌پذیری: برخلاف هاست‌های سنتی، شما مجبور نیستید از همان ابتدا هزینه یک پلن بزرگ را بپردازید. با سرور ابری می‌توانید با کمترین منابع شروع کنید و هر زمان که وب‌سایت شما رشد کرد، منابع خود را تنها با چند کلیک افزایش دهید. سرور شما همراه با موفقیت شما رشد می‌کند.
• کنترل و انعطاف: شما کنترل کاملی روی محیط سرور خود دارید. این ویژگی برای پروژه‌های حرفه‌ای و هم‌چنین برای ادامه مسیر یادگیری html و css و کسب تجربه در زمینه مدیریت سرور یک فرصت فوق‌العاده است.
• آپ‌تایم بالا: زیرساخت‌های ابری به‌گونه‌ای طراحی شده‌اند که پایداری بسیار بالایی داشته باشند و وب‌سایت شما همیشه در دسترس باقی بماند.

و در یک کلام: سرور ابری همان ابزار انعطاف‌پذیر و قدرتمندی است که پروژه‌های آینده شما لیاقتش را دارند.

یادگیری html و css: سخن پایانی ابر فردوسی

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

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

سؤالات متداول درباره «یادگیری html و css»