صورة الملف الشخصي

جزء من قسم Fundamentals في رحلة HTML على Coddy — الدرس 32 من 60.

التحدي

سهل

حسنًا، حان الوقت لإضافة صورة الملف الشخصي! يمكنك استخدام أي صورة تريدها. لا تتردد في استخدام الرابط من المثال أدناه.

بعد الـ div الأول (قسم الرأس)، قم بإنشاء <div> آخر. بداخله، أضف وسم <img>.
قم بتعيين src للربط بصورتك، واستخدم صفتي width و height للتحكم في حجمها.

على سبيل المثال:

src - https://storage.googleapis.com/coddy-15505.appspot.com/public/avatars/avatar25.png
width - 200
height - 200"

جرّب بنفسك

<!DOCTYPE html>
<html>
    <body>
        <!-- Header Section -->
        <div>
            <h1>John Doe</h1>
            <p>Web Developer | Creative Thinker</p>
        </div>
    </body>
</html>

جميع دروس Fundamentals

1أساسيات HTML

ما هي HTML؟الهيكل الأساسي لـ HTML الوسوم والعناصر تداخل وإغلاق الوسوم التعليقات في HTML

4بطاقة وصفة

نظرة عامة على المشروع عنوان الوصفة ووصفها

المكونات

الخطوات

7صفحة الملف الشخصي

نظرة عامة على المشروع قسم الترويسة (Header)

صورة الملف الشخصي درس مشروع

قسم نبذة عني

روابط التواصل الاجتماعي

10الجداول

أساسيات الجداول إضافة التسميات التوضيحية دمج الصفوف والأعمدة مراجعة - الجداول

2النصوص والتنسيق

العناوين الفقرات فواصل الأسطر النص العريض والمائل النص العريض والمائل مجدداً مراجعة - التنسيق

5إضافة المحتوى

سمات HTML الروابط روابط لصفحات جديدة الصور سمات الصور

8النماذج والمدخلات - الجزء الأول

أساسيات النماذج مدخلات النصوص سمات المدخلات حقل كلمة المرور تسميات المدخلات ملخص - نموذج أساسي

11صفحة التسجيل في الفعالية

نظرة عامة على المشروع قسم الـ Header

قسم تفاصيل الفعالية

نموذج التسجيل

قسم الـ Footer

3التعامل مع القوائم

قائمة غير مرتبة قائمة مرتبة قوائم متداخلة ملخص - القوائم

6تخطيط الصفحة

التقسيمات عناصر Span المضمنة الوسوم الدلالية الأقسام والمقالات ملخص - التخطيط

9النماذج والمدخلات - الجزء الثاني

أزرار الاختيار (Radio Buttons)صناديق الاختيار (Checkboxes)القوائم المنسدلة (Dropdowns)الأزرار الأزرار في النماذج مراجعة - النماذج #1 مراجعة - النماذج #2

12التحديات النهائية

بطاقة ملف شخصي بسيطة بطاقة دعوة لحدث صفحة مقال بسيطة قائمة الكتب المفضلة