هذا الدرس من الدورة التدريبية: كورس تعلم HTML من الصفر لبناء صفحات ويب
الدرس: عرض الصورة او النص في إطار وإضافة القياسات واستخدام القوائم للعرض او التنقل في صفحات الويب HTML
المدة: 5 دقائق
وصف مختصر:
وصف الدرس
دورة تدريبية في بناء صفحات الويب HTML & CSS
في هذا الدرس، سنتناول شرح مفصل لكل سطر من الكود ولجميع العلامات المستخدمة في المثال. سنشرح كيف يمكن استخدام هذه العلامات لإنشاء عناصر مرئية وقياسية، وكذلك الأنماط المدمجة.
الكود:
html
<h3>HTML Skill</h3>
<progress value="100" max="100"> 50% </progress>`` For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
``
</blockquote>
<img src="test-361512_640.webp" /> <!-- Self closing tag -->
<figcaption>
This text will appears under your image
</figcaption>
</figure>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>
</nav>
شرح مفصل لكل جزء:
1. <h3>HTML Skill</h3>
هذه العلامة تستخدم لتحديد عنوان فرعي في الصفحة.
<h3> هي واحدة من ستة مستويات من العناوين في HTML (من <h1> إلى <h6>)، حيث <h1> هو العنوان الأهم والأكبر حجماً و<h6> هو العنوان الأقل أهمية والأصغر حجماً.الأسئلة ذات الصلة على Google:
- ما هي علامات العنوان في HTML؟
- كيفية استخدام
<h3>في HTML؟ - أفضل ممارسات استخدام العناوين في HTML
2. <progress value="100" max="100"> 50% </progress>
علامة
<progress> تستخدم لعرض تقدم مهمة أو عملية جارية. الخصائص value وmax تحددان القيمة الحالية والقيمة القصوى للتقدم على التوالي.الأسئلة ذات الصلة على Google:
- كيفية استخدام
<progress>في HTML؟ - ما هي علامة
<progress>؟ - أمثلة على استخدام
<progress>في HTML
3. <meter value="3" min="1" max="100"> 3 out of 5 </meter>
علامة
<meter> تستخدم لتمثيل قيمة عددية داخل نطاق محدد. الخصائص value وmin وmax تحدد القيمة الحالية والحد الأدنى والحد الأقصى على التوالي.الأسئلة ذات الصلة على Google:
- كيفية استخدام
<meter>في HTML؟ - ما هي علامة
<meter>؟ - الفرق بين
<progress>و<meter>في HTML
4. <blockquote cite="http://www.worldwildlife.org/who/index.html">
علامة
<blockquote> تستخدم لاقتباس نص طويل من مصدر خارجي. الخاصية cite تشير إلى المصدر الأصلي للاقتباس.الأسئلة ذات الصلة على Google:
- كيفية استخدام
<blockquote>في HTML؟ - ما هي علامة
<blockquote>؟ - أمثلة على استخدام
<blockquote>في HTML
5. <figure>
علامة
<figure> تستخدم لتجميع محتوى وسائط ذات صلة معاً، مثل الصور والرسوم التوضيحية. العلامة <figcaption> تستخدم لإضافة شرح توضيحي لهذا المحتوى.الأسئلة ذات الصلة على Google:
- كيفية استخدام
<figure>في HTML؟ - ما هي علامة
<figcaption>؟ - أمثلة على استخدام
<figure>و<figcaption>في HTML
html
<figure>
<img src="test-361512_640.webp" /> <!-- Self closing tag -->
<figcaption>
This text will appears under your image
</figcaption>
</figure>
6. <nav>
علامة
<nav> تستخدم لتحديد قسم التنقل في الصفحة. عادةً ما تحتوي على روابط أو قوائم توجه المستخدم إلى أجزاء مختلفة من الموقع.الأسئلة ذات الصلة على Google:
- كيفية استخدام
<nav>في HTML؟ - ما هي علامة
<nav>؟ - أمثلة على استخدام
<nav>في HTML
html
<nav>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>
</nav>
الخلاصة
في هذا الدرس، تعلمنا كيفية استخدام علامات HTML لإنشاء عناصر بصرية وقياسية، بالإضافة إلى كيفية تضمين وسائط وأنماط مدمجة في صفحات الويب. باستخدام هذه العلامات و
يمكن لمتعلمي HTML إنشاء صفحات ويب ومعرفة الكثير عن إنشاء مواقع وصفحات أكثر تفاعلية وجذابة، مما يساعد في تحسين تجربة المستخدم وزيادة خبراتهم و تصنيف موقعهم في محركات البحث (SEO).
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي عرض الصورة او النص في إطار وإضافة القياسات واستخدام القوائم للعرض او التنقل في صفحات الويب HTML
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
الأوامر البرمجية الأكواد والملفات المستخدمة
ملحقات ال PDF
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF
الملف المرجعي للشرح إضافة وتغيير النصوص HTML Typography Views Listing Navigation
- 337 دقيقة من الفيديوهات التفاعلية الحصرية
- 66 مصدر إضافي
- 52 ملحقات PDFs
- 14 فيديو إضافي داخل الدروس
- 28 تطبيق نظري وعملي
- الوصول على جميع الأجهزة
- وصول مدى الحياة
- شهادة أوروبية لإتمام الدراسة
- ا لحصول على شهادة دبلوم موثقة
للوصول إلى الفيديوهات والمصادر والملحقات الدراسية والمواد التعليمية لدراسة برنامج
دورة تدريبية تعلم لغة HTML لبناء مواقع الإنترنت
اضغط هنا ابدأ التعلم
أيضاً عند أداء الاختبارات بنجاح سوف تحصل على الشهادة الأوروبية المعتمدة في إتمام الدراسة والتأهل لطلب الشهادة الدولية في هذا البرنامج
الدروس والاختبارات لتعلم هذه الدورة التدريبية : كورس تعلم HTML من الصفر لبناء صفحات ويب
دورات تدريبية أخرى في برمجة
دورة تدريبية في فهم شبكات الإنترنت وخوادم الويب
دورة تدريبية تحتوي على دروس مجانية مدعمة من البورد الأوروبي لفهم أساسيات شبكة الإنترنت والاتصالات بين المستخدمين وتطبيقات الويب والأجهزة
دورة لغة برمجة PHP لبناء صفحات ويب ديناميكية
دورة لغة برمجة PHP لبناء صفحات ويب ديناميكية يقام البرنامج بالتعاون وباعتماد الجهات التالية شهادة موثقة من الجهات الالمانية شهادة معتمدة الوحدة...
دورة تدريبية في بناء صفحات الويب المتجاوبة باستخدام Bootstrap
دورة تدريبية في بناء صفحات الويب المتجاوبة باستخدام Bootstrap يقام البرنامج بالتعاون وباعتماد الجهات التالية شهادة موثقة من الجهات الالمانية شهادة معتمدة...
مقالات ذات صلة
التعامل مع البيانات وواجهة المستخدم باستخدام JavaScript
هل تساءلت يومًا عن كيفية التحكم في البيانات والتفاعل مع واجهة المستخدم في صفحات الويب؟ 🤔 في عالم البرمجة الحديثة، يعد فهم...
استكشاف الأساليب المتقدمة للمصفوفات في جافاسكريبت
المصفوفات (Arrays) في جافاسكريبت: دليل شامل مقدمة المصفوفات هي واحدة من أهم هياكل البيانات الأساسية في جافاسكريبت، حيث تتيح للمطورين تخزين وإدارة...
فهم شبكات الإنترنت وخوادم الويب: مقدمة شاملة
الإنترنت هو أحد الابتكارات الأكثر تأثيرًا في العالم الحديث، حيث يلعب دورًا أساسيًا في تقريب العالم وجعل المعلومات والمعرفة في متناول الجميع....
