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

جزء من قسم الأساسيات في رحلة 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>

جميع دروس الأساسيات

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التحديات النهائية

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

تدرّب بنفسك: Playground لـ Web