جاري التحميل...

تخطيط HTML

بعد الدلالة يأتي التخطيط: تسمية المناطق ثم ترتيبها بصرياً بـ CSS.

الهيكل أولاً ثم الوضع البصري

ارسم القصة ثم أضف صف أعمدة — لا جدول عملاق.

إجابة مباشرة

هيكل landmarks. محتوى فريد في main. أعمدة بـ CSS. لا جدول تخطيط للصفحة.

📊 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

هيكل صفحة بالـ landmarks

رأس وصف وmain وaside وتذييل. 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>

قراءة الهيكل

القصة في main
aside ملاحظة
بدون CSS تتكدس عمودياً

CSS بسيط لأعمدة

نفس المناطق مع flex على .row.

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 أعرض
لا تستبدل بـ td

الجداول للبيانات لا لإطار الصفحة

تجنب جداول التخطيط القديمة.

تمرين

header/main/aside/footer
article في main
بدون جدول تخطيط

أخطاء شائعة

جدول تخطيط
بدون main
اعتبار row معلماً

ملخص

HTML يسمّي؛ CSS يضع
تجنب جداول التخطيط
التالي: التجاوب

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة