در حال بارگذاری...

چیدمان HTML

جلسهٔ معنایی مناطق را نامید. چیدمان قدم بعد است: بنر بالا، محتوا و سایدبار در ردیف، فوتر پایین — HTML معنا؛ CSS قرارگیری.

اول ساختار، بعد قرارگیری بصری

اول داستان صفحه را روشن کنید؛ بعد div.row یا flex/grid ستون بسازد — نه جدول غول‌آسا.

پاسخ مستقیم

اسکلت با header، nav اختیاری، main، aside اختیاری، footer. داستان یکتا در main. ستون با CSS. div فقط قلاب استایل. جدول چیدمان برای کل صفحه نه.

📊 HTML structure vs CSS visuals

Layer	Responsibility	Examples
HTML landmarks	Name page regions by meaning	header, nav, main, aside, footer
HTML wrappers	Optional styling hooks with no landmark role	div class="row"
CSS	Visual columns, gaps, widths, order on screen	flex, grid, margin, width
Avoid	Fake layout with data tables	table/tr/td for the whole site chrome

اسکلت landmark صفحه

خبر: header، ردیف، main+article، aside مرتبط، footer. div.row فقط قلاب CSS است.

Landmark layout skeleton

html

HTML Code

<body>
<header>
<h1>News</h1>
<nav>
<a href="index.html">Home</a>
<a href="local.html">Local</a>
</nav>
</header>
<div class="row">
<main>
<article>
<h2>Story</h2>
<p>Primary article content goes here.</p>
</article>
</main>
<aside>
<h2>Related</h2>
<p>Side links and notes.</p>
</aside>
</div>
<footer>
<p>Contact</p>
</footer>
</body>

خواندن اسکلت

header/nav معرفی؛ footer بستن
داستان در main
aside نکتهٔ مرتبط
بدون CSS هنوز عمودی پشته می‌شود — برای تمرین ساختار خوب است

CSS کوچک برای پیشنهاد ستون

همان landmarks؛ فقط .row با flex ستون می‌سازد.

Layout skeleton with flex row

html

HTML Code

<body>
<header><h1>News</h1></header>
<div class="row">
<main>
<article><h2>Story</h2><p>Primary content.</p></article>
</main>
<aside><h2>Related</h2><p>Side note.</p></aside>
</div>
<footer><p>Contact</p></footer>
<style>
.row { display: flex; gap: 16px; }
main { flex: 2; }
aside { flex: 1; }
</style>
</body>

خواندن پیش‌نمایش flex

معنا عوض نشد
main پهن‌تر؛ aside باریک‌تر
حذف style فقط ستون را برمی‌دارد نه ساختار را
برای ستون‌ها td نگذارید

جدول برای داده، نه قاب صفحه

جدول غول برای هدر/سایدبار قدیمی و ضد دسترس‌پذیری است. جدول را برای داده نگه دارید.

تمرین

header/main/aside/footer
article فقط در main
tip در aside
اختیاری div.row و flex
بدون جدول چیدمان
جمله: HTML نام؛ CSS جا

اشتباهات آسان

جدول چیدمان کل سایت
حذف main
تو در توی بی‌داستان
تلقی div.row به‌عنوان landmark
انتظار ستون پیکسلی فقط از HTML

خلاصه

چیدمان = اسمبل landmarks
HTML منطقه؛ CSS ستون
div قلاب استایل
جدول چیدمان نه
بعدی: واکنش‌گرایی اندازه‌ها

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان