جاري التحميل...
جاري التحميل...
بناء صفحة ويب كاملة باستخدام ما تعلمته
تهانينا! لقد وصلت إلى الدرس الأخير في مرحلة HTML. دعنا نلخص كل ما تعلمته في هذه المرحلة:
💡 لديك الآن مهارات أساسية في::
كتابة HTML نظيف ودلالي، بناء هيكل صفحات الويب، إنشاء نماذج تفاعلية، تحسين إمكانية الوصول، وفهم كيف يعمل المتصفح مع كودك.
إليك ملخص مرجعي سريع لأهم علامات HTML التي تعلمتها:
الآن سنطبق كل ما تعلمناه لبناء صفحة "من نihn" متكاملة لشركة تقنية. سنستخدم HTML الدلالي، إمكانية الوصول، وأفضل الممارسات.
ما هي العلامة التي تُستخدم لإنشاء رابط؟
أنشئ صفحة "من نحن" متكاملة تشمل: 1. header وnav، 2. main مع article وsection، 3. قسم الميزات، 4. قسم الفريق، 5. نموذج اتصال، 6. footer، 7. صور بـ alt نصي، 8. تسلسل عنوان صحيح، 9. HTML دلالي.
الحل:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>الأسئلة الشائعة</title>
</head>
<body>
<a href="#main" class="skip-link">انتقل للمحتوى</a>
<header>
<nav aria-label="التنقل الرئيسي">
<ul>
<li><a href="/">الرئيسية</a></li>
<li><a href="/faq" aria-current="page">الأسئلة الشائعة</a></li>
<li><a href="/contact">تواصل</a></li>
</ul>
</nav>
</header>
<main id="main" tabindex="-1">
<h1>الأسئلة الشائعة</h1>
<figure>
<img src="faq.jpg" alt="شخص يقرأ كتاباً" />
<figcaption>إجابات على أسئلتكم الشائعة</figcaption>
</figure>
<details>
<summary>كيف أسجل في المنصة؟</summary>
<p>1. اضغط على زر التسجيل
2. أدخل بياناتك
3. أكمل</p>
</details>
<details>
<summary>هل الخدمة مجانية؟</summary>
<p>نعم، نوفر خطة مجانية مع ميزات أساسية.</p>
</details>
<section aria-labelledby="ask-title">
<h2 id="ask-title">لم تجد إجابتك؟</h2>
<form>
<label for="q-name">الاسم</label>
<input type="text" id="q-name" required />
<label for="q-email">البريد</label>
<input type="email" id="q-email" required />
<label for="q-msg">سؤالك</label>
<textarea id="q-msg" rows="4" required></textarea>
<button type="submit">إرسال</button>
</form>
</section>
</main>
<footer>
<p>© <time dateTime="2026">2026</time> جميع الحقوق محفوظة</p>
</footer>
</body>
</html>أنشئ صفحة أسئلة شائعة متكاملة لمشروعك الشخصي باستخدام كل ما تعلمته:
<!DOCTYPE>، <html>، <head>، <body>)<details> و<summary> لعناصر الأسئلة الشائعة💡 طبق كل ما تعلمته في مرحلة HTML. فكر في الهيكل أولاً، ثم إمكانية الوصول، ثم الدلالية. اختبر بالتنقل بلوحة المفاتيح!
هيكل الصفحة:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width">
<title>العنوان</title>
</head>
<body>
<!-- المحتوى -->
</body>
</html>العناصر الدلالية:
<header> <nav> <main><section> <article> <aside><footer> <figure> <figcaption><blockquote> <cite> <time>النماذج:
<form>
<label for="x">الاسم</label>
<input type="text" id="x" required>
<textarea></textarea>
<select>
<option>...</option>
</select>
<button type="submit">إرسال</button>
</form>الروابط والصور:
<a href="url"> - رابطtarget="_blank" rel="noopener noreferrer" - تبويب جديد<img src="pic.jpg" alt="desc" loading="lazy" />إمكانية الوصول:
نصائح للمحترفين:
أنت الآن تملك الأساس القوي لبناء أي صفحة ويب. الخطوة التالية هي تعلم CSS لتصفح صفحاتك وجعلها جميلة واحترافية.
استمر في التدرب على المشاريع الصغيرة ولا تتوقف عن التعلم!