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

مشروع HTML مصغر — موقع شخصي

سابقاً رسم الملخص عدة HTML وأشار إلى هنا كخطوة تمرين. هذا الدرس ليس خريطة مهارات جديدة. هو موجز بناء: خطط لثلاث صفحات، شارك غلاف تنقل واحداً، املأ محتوى حقيقياً، وأثبت الموقع بجدول قبول قصير.

لماذا مشروع مصغر الآن

الدروس تعرض موضوعاً واحداً كل مرة. موقع شخصي صغير يجبرك على الجمع: معالم في كل صفحة، روابط نسبية تعمل، صورة مفيدة، قائمة أو جدول، ونموذج اتصال بتسميات. تسليم تلك الحزمة — حتى بلا CSS — أفضل من حفظ السمات. اعتبرها قائمة تنهيها في جلسة مركزة.

إجابة مباشرة

1) أنشئ ثلاثة ملفات على الأقل: index.html و about.html و contact.html. 2) أعد استخدام نفس معالم header/nav/footer مع روابط تعمل بينها. 3) مقدمة حقيقية في الرئيسية وقصة قصيرة في حول ونموذج اسم/بريد/رسالة مسمّى في الاتصال. 4) صورة مفيدة بـ alt ذي معنى وقائمة مهارات أو جدول حقائق صغير. 5) تنقّل بلوحة المفاتيح؛ أصلح التسميات المفقودة والروابط المكسورة. 6) علّم كل صف في جدول القبول قبل اعتبار المشروع منتهياً.

📊 Acceptance criteria

Item	Done when
Shared nav	Same landmark links work on every page
Semantics	header, nav, main, and footer on each page
Home & about	Real paragraphs — not placeholder lorem forever
Media	At least one informative image with useful alt
Data	A skills list or a small facts table
Form	Labeled name, email, message + a real submit button
Quality	Keyboard tab order makes sense; no unlabeled controls

خطط قبل الكتابة

ارسم أولاً: اسم الموقع، غرض الصفحات الثلاث، أي صورة، وأي مهارات/حقائق في حول. قرر المجلد — أبقِ الملفات الثلاثة معاً لروابط نسبية بسيطة. ثبّت اسم الشخص/العلامة مرة ليتسق h1 وtitle.

الغلاف المشترك — ابدأ هنا

انسخ header/nav إلى كل صفحة وغيّر فقط محتوى main. يجب أن تطابق قيم href النسبية أسماء الملفات. ضع لاحقاً button type=submit حقيقياً — لا تزيّف الإرسال بـ div فارغ.

Shared nav starter

html

<header>
<h1>Alex Site</h1>
<nav aria-label="Main">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
<!-- page content -->
</main>
<footer>
<p>© Alex</p>
</footer>

قراءة الغلاف

header+nav+main+footer تعطي معالم واضحة
aria-label على nav يساعد إن وُجد تنقل ثانٍ
الروابط النسبية تربط الملفات الثلاثة
كرّر الغلاف؛ بدّل داخل main فقط
ضع عنواناً قصيراً في title لكل صفحة
الملخص ذكر العادات — هنا تُطبَّق معاً

بادئ نموذج صفحة الاتصال

صفحة الاتصال حيث تلتقي مهارات النماذج بالمشروع. اقرن كل عنصر بـ label مرئي. أدرج name لحقول المستقبل. زر إرسال حقيقي في الوسم حتى بلا خادم بعد.

Contact form starter

html

<form action="#" method="post">
<p>
<label for="name">Name</label>
<input id="name" name="name" type="text" required>
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
</p>
<p>
<label for="msg">Message</label>
<textarea id="msg" name="message" rows="5" required></textarea>
</p>
<button type="submit">Send</button>
</form>

ترتيب بناء يعمل

كرّر الغلاف في ثلاثة ملفات؛ أصلح روابط التنقل. 2. اكتب مقدمة الرئيسية وقصة حول (+ قائمة/جدول). 3. ضع صورة في images/ مع src وalt. 4. الصق النموذج؛ تحقق من labels وnames وsubmit. 5. افتح الصفحات؛ ضيّق العرض؛ تنقّل Tab حتى الإرسال. 6. علّم صفوف القبول — CSS خفيف لاحقاً.

أخطاء سهلة في هذا المشروع

نسخ التنقل مرة ثم تعديل صفحة واحدة فقط فتنحرف الروابط
حقول اتصال بـ placeholder بلا label
جدول تخطيط للصفحة كلها بدل المعالم
alt فارغ على صورة ذات معنى
ترك lorem واعتبار المشروع منتهياً
القفز إلى أطر أو CSS ثقيل قبل التحقق
نسيان عادة الملخص: البنية والتسميات أولاً

ملخص

هذه الجلسة بناء موقع شخصي عملي لا خريطة دورة أخرى
ثلاث صفحات تشارك الغلاف مع روابط نسبية تعمل
اجمع الوسائط وقائمة/جدول ونموذج مسمّى
جدول القبول تعريف الإنجاز
افحص بلوحة المفاتيح قبل تلميع CSS
المواضيع الاختيارية التالية إضافية — سلّم هذا الموقع أولاً

تذكير قصير

إن علقت فارجع لجدول القبول — لا لحفظ وسوم جديدة. الهدف تمرين دمج مهارات هذه الدورة في موقع صغير يُفتح في المتصفح.

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

جاهز للبدء

اختبر معرفتك

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

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

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