HTML · الدرس ٤ من ٤
ابنِ صفحة تعرّف فيها بنفسك
اجمع ما جرّبته في الدروس السابقة في صفحة عنك. يمكنك الرجوع إلى الشرح إذا نسيت طريقة كتابة عنصر. اترك الألوان وترتيب الصفحة لمرحلة CSS.
جرّب الآن
أكمل صفحتك الشخصية: أضف اسمك وفقرة عنك وثلاثة اهتمامات وصورة بوصف واضح ورابطاً يعمل.
يبني كل درس جديد على صفحتك الشخصية. عندما تعود إلى درس، تظهر مسودتك المحفوظة.
تبقى الصورة في متصفحك ولا تُرفع إلى الموقع. اخترها، ثم استخدم اسم ملفها عند إضافة الصورة إلى كودك.
صفحتك
تستخدم الفحوصات كودك الحالي. جرّب الصفحة بنفسك أيضاً.
ملاحظات على عملك
افتح صفحتك على جهازك
- احفظ الصفحة من الرابط أدناه، ثم ضعها في مجلد جديد.
- انسخ الصورة التي اخترتها إلى المجلد نفسه. يجب أن يكون اسمها مطابقاً للاسم المكتوب داخل
src. - انقر مرتين على
index.htmlلفتحه في المتصفح. تأكد من ظهور الصورة وعمل الروابط. - للتعديل على جهازك، افتح الملف بالمفكرة أو Visual Studio Code. احفظ التغييرات، ثم حدّث المتصفح.
راجع صفحتك قبل CSS
05 · قبل الانتقال إلى CSS
هل أنت جاهز للمرحلة التالية؟
ضع علامة أمام كل نقطة تستطيع تنفيذها بنفسك. يمكنك الرجوع إلى الشرح إذا نسيت شيئاً، لكن حاول فهم ما تكتبه.
إذا لم تستطع تنفيذ نقطة، ارجع إلى تمرينها وجرّب مرة أخرى. وعندما تستطيع تنفيذها كلها، انتقل إلى CSS لتنسيق صفحتك.
مرجع تقني: MDN · HTML: Creating the content. وضعنا هذه التمارين والأسئلة لمساعدتك على التدرب والتأكد من فهمك.
احفظ صفحتك وافتحها على جهازك. إذا استطعت بناءها وفهم ما كتبته، انتقل إلى CSS لتنسيقها.
التالي: CSS والتصميم المتجاوبأحتاج مساعدة
ابدأ باسمك وفقرة فقط. شغّل الكود، ثم أضف القائمة والرابط والصورة، واحداً بعد الآخر. تجد الدروس السابقة في قائمة دروس HTML.
لإظهار الصورة التي اخترتها، اكتب اسم ملفها داخل src. ارجع إلى شرح العنصر الذي تحتاجه، وحاول بناء الصفحة بنفسك.
من الطبيعي أن تبدو الصفحة بسيطة الآن. تكتب المحتوى باستخدام HTML، وستغيّر شكله لاحقاً باستخدام CSS.
احفظ الصفحة على جهازك
إذا لم يبدأ التنزيل، انسخ الكود الكامل أدناه إلى ملف نصّي باسم index.html واحفظه بترميز UTF-8.