📚 تنسيق الصورة
المفاهيم الأساسية
تنسيق الصورة: استخدام وسم `![]()
` لتنسيق صور الصفحة الإلكترونية.
حدود الصورة: إضافة إطار حول الصورة باستخدام خاصية `border` داخل وسم `![]()
`.
خريطة المفاهيم
```markmap
الوحدة الخامسة: البرمجة المتقدمة باستخدام HTML
أهداف التعلم
تنسيق باستخدام HTML
- وسوم تنسيق النص
- النص: لتغميق النص (bold).
- النص: لإمالة النص (Italics).
- النص: لتسطير النص (Underlined).
- النص: لتصغير النص.
- النص: لتكبير النص.
- النص: لتمييز النص (Highlighted).
- النص: لوضع خط في منتصف النص.
- النص: لعرض النص بخط منخفض (Subscript).
- النص: لعرض النص بخط مرتفع (Superscript).
- : لتغيير حجم الخط أو نوعه أو لونه.
- خاصية `face`: لتحديد نوع الخط (مثال: Tahoma).
- خاصية `size`: لتحديد حجم الخط (القيم من 1 إلى 9، حيث 1 أصغر و9 أكبر).
- خاصية `color`: لتحديد لون الخط (مثال: blue).
- أمثلة تطبيقية
- مثال 1: استخدام وسمي غامق (bold) ومائل (Italics).
- مثال 2: استخدام وسمي مرتفع (Superscript) ومنخفض (Subscript).
- مثال 3: استخدام وسوم تنسيق الخط.
- مثال 4: استخدام الوسمي small و big
- مثال 5: استخدام الوسمي mark و del
- مثال تطبيقي: صفحة "Football Fan Page"
-
: لإدخال فاصل سطر.
-
: لتحديد فقرة.
- : لإمالة النص داخل الفقرة.
- حدود الصورة
- خاصية `border`: لإضافة إطار حول الصورة.
- مثال: `
`
مراجعة: وسوم HTML الأساسية
- : يحدد نوع المستند.
- : الحاوية الرئيسية (يدعم النص العربي).
- : يحتوي على معلومات تعريفية عن الصفحة.
-
: يحدد نص شريط العنوان.</p>
<p> - <meta charset="UTF-8">: يعرّف الترميز لعرض الأحرف العربية.</p>
<ul><li><body>: يحتوي على المحتوى الرئيسي المعروض.</li>
<p></ul> - <h1> إلى <h6>: تحدد العناوين.</p>
<p> - <p>: تحدد فقرة.</p>
<p> - <br>: يُدخل فاصل سطر.</p>
<h4>القوائم في HTML</h4>
<p>#### القائمة غير المرتبة (Unordered List)</p>
<ul><li>الوسم: `<ul>`</li>
<li>عنصر القائمة: `<li>`</li>
<li>مثال: قائمة ألعاب جماعية</li>
<p></ul><h4>أوراق الأنماط المتتالية (CSS)</h4></p>
<ul><li>إنشاء ملفات CSS</li>
<li>استخدام قواعد CSS في التصميم</li>
<li>ربط ملف CSS بالصفحة</li>
<p></ul><h4>إنشاء المواقع</h4></p>
<ul><li>مراحل إنشاء موقع إلكتروني</li>
<li>الموقع المستجيب (ماهيته ومزاياه)</li>
<li>إنشاء موقع مستجيب</li>
<li>الموقع التفاعلي (ماهيته)</li>
<li>إنشاء موقع تفاعلي باستخدام جافا سكربت</li>
<p></ul><h4>تحسين محركات البحث (SEO)</h4></p>
<ul><li>تقنيات SEO لرفع تصنيف الموقع</li>
<p></ul><h4>الرسائل الإخبارية الرقمية</h4></p>
<ul><li>ماهيتها والهدف منها</li>
<li>إنشاؤها</li>
<p></ul><h3>الأدوات</h3></p>
<ul><li>محرر فيجوال ستوديو كود (Visual Studio Code Editor)</li>
<p></ul>```</p><p><h4>نقاط مهمة</h4></p>
<ul><li>لإضافة إطار (حدود) للصورة، نستخدم خاصية `border` داخل وسم `<img>` ونعطيها قيمة رقمية مناسبة.</li>
<li>مثال توضيحي في الصفحة يظهر صورتين متطابقتين، إحداهما بدون حدود والأخرى بإطار سميك (`border="6"`).</li></ul></div>
</section>
<section><h2>📋 المحتوى المنظم</h2><h3>📖 محتوى تعليمي مفصّل</h3>
<h4>تنسيق الصورة</h4>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">تنسيق الصورة</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">يمكنك أيضًا استخدام وسم لتنسيق صور الصفحة الإلكترونية الخاصة بك.</div>
<h4>حدود الصورة</h4>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">حدود الصورة</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">لإضافة قيمة حول صورتك استخدم وسم خاصية border مع إعطائها قيمة مناسبة في وسم img</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;"><body></div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;"><h2>المعرض</h2></div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;"><img src="/Images/Soccer_field.jpg" width="600" height="400"> <br></div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;"><img src="/Images/Soccer_field.jpg" width="600" height="400" border="6"></div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;"></body></div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">Football Fan Page</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">C:/Users/Desktop/examples/image.html</div>
<p><em>نوع: محتوى تعليمي</em></p>
<div style="white-space:pre-wrap;">المعرض</div>
<h3>🔍 عناصر مرئية</h3>
<h4>المعرض</h4>
<p>Two photographs of a soccer team posing on a field. The top photo shows one row of players, and the bottom photo shows a second row of players. The stadium seating is visible in the background.</p>
<h4>المعرض</h4>
<p>A second photograph, identical to the first, showing a soccer team posing on a field. This image is likely intended to demonstrate the effect of the 'border' attribute.</p></section>
<section>
<h2>📄 النص الكامل للصفحة</h2>
<div style="white-space:pre-wrap;direction:rtl;unicode-bidi:plaintext;">--- SECTION: تنسيق الصورة ---
تنسيق الصورة
يمكنك أيضًا استخدام وسم لتنسيق صور الصفحة الإلكترونية الخاصة بك.
--- SECTION: حدود الصورة ---
حدود الصورة
لإضافة قيمة حول صورتك استخدم وسم خاصية border مع إعطائها قيمة مناسبة في وسم img
<body>
<h2>المعرض</h2>
<img src="/Images/Soccer_field.jpg" width="600" height="400"> <br>
<img src="/Images/Soccer_field.jpg" width="600" height="400" border="6">
</body>
Football Fan Page
C:/Users/Desktop/examples/image.html
المعرض
--- VISUAL CONTEXT ---
**FIGURE**: المعرض
Description: Two photographs of a soccer team posing on a field. The top photo shows one row of players, and the bottom photo shows a second row of players. The stadium seating is visible in the background.
Context: Illustrates the use of image tags in HTML, potentially with borders.
**FIGURE**: المعرض
Description: A second photograph, identical to the first, showing a soccer team posing on a field. This image is likely intended to demonstrate the effect of the 'border' attribute.
Context: Illustrates the use of image tags in HTML, potentially with borders.
</div>
</section>
<section>
<h2>🎴 بطاقات تعليمية للمراجعة</h2>
<p>عدد البطاقات: 3 بطاقة لهذه الصفحة</p>
<article><h3>ما هو الغرض من خاصية `border` في وسم `<img>` في لغة HTML؟</h3><ul><li>أ) تغيير حجم الصورة تلقائيًا.</li><li>ب) إضافة رابط تشعبي إلى الصورة.</li><li>ج) إضافة إطار أو حدود حول الصورة.</li><li>د) تغيير لون خلفية الصورة.</li></ul><p><strong>الإجابة الصحيحة:</strong> c</p><p><strong>الإجابة:</strong> إضافة إطار أو حدود حول الصورة.</p><p><strong>الشرح:</strong> خاصية `border` هي إحدى خصائص وسم `<img>` المستخدم لإدراج الصور في HTML. عند تعيين قيمة رقمية لها (مثل `border="6"`)، يتم رسم إطار حول الصورة بعرض محدد بوحدات البكسل، مما يمنحها مظهرًا مميزًا ويساعد في فصلها عن خلفية الصفحة.</p><p><strong>تلميح:</strong> تتعلق هذه الخاصية بالمظهر البصري للصورة داخل الصفحة.</p><p><em>التصنيف: تعريف | المستوى: سهل</em></p></article>
<article><h3>أي من الأكواد التالية يضيف إطارًا بعرض 10 بكسل حول صورة في HTML؟</h3><ul><li>أ) <img src="photo.jpg" width="10"></li><li>ب) <img src="photo.jpg" border="10"></li><li>ج) <img border="photo.jpg" src="10"></li><li>د) <img src="photo.jpg" style="border:10px"></li></ul><p><strong>الإجابة الصحيحة:</strong> b</p><p><strong>الإجابة:</strong> <img src="photo.jpg" border="10"></p><p><strong>الشرح:</strong> لإضافة إطار حول صورة في HTML، نستخدم السمة `border` داخل وسم `<img>` ونعطيها قيمة رقمية تمثل عرض الإطار بالبكسل. الكود الصحيح هو `<img src="photo.jpg" border="10">`.</p><p><strong>تلميح:</strong> ابحث عن الكود الذي يستخدم السمة `border` مع القيمة الرقمية الصحيحة.</p><p><em>التصنيف: صيغة/خطوات | المستوى: متوسط</em></p></article>
<article><h3>ما الفرق الأساسي بين استخدام خاصية `border` وخصائص `width` و `height` داخل وسم `<img>`؟</h3><ul><li>أ) `border` تغير اللون، بينما `width` و `height` تغير الحجم.</li><li>ب) `border` تتحكم في أبعاد الصورة، بينما `width` و `height` تتحكم في الإطار.</li><li>ج) خاصية `border` تتحكم في مظهر الإطار حول الصورة، بينما `width` و `height` تتحكمان في أبعاد الصورة نفسها.</li><li>د) جميعها تؤدي نفس الغرض وهو التحكم في الحجم الكلي للصورة.</li></ul><p><strong>الإجابة الصحيحة:</strong> c</p><p><strong>الإجابة:</strong> خاصية `border` تتحكم في مظهر الإطار حول الصورة، بينما `width` و `height` تتحكمان في أبعاد الصورة نفسها.</p><p><strong>الشرح:</strong> كل من هذه الخصائص تتحكم في جانب مختلف من عرض الصورة:
1. `border`: تضيف إطارًا مرئيًا حول الحواف الخارجية للصورة.
2. `width` و `height`: تحدد العرض والارتفاع الفعليين للمساحة التي تشغلها بيانات الصورة (البكسل) على الصفحة.
هذا يعني أن `border` تضيف عنصرًا زخرفيًا خارجيًا، بينما `width`/`height` تغير حجم المحتوى الداخلي.</p><p><strong>تلميح:</strong> فكر في الجزء من الصورة الذي يؤثر عليه كل سمة.</p><p><em>التصنيف: فرق بين مفهومين | المستوى: متوسط</em></p></article>
</section>
</main>
<nav aria-label="صفحات الكتاب">
<a href="https://www.idros.ai/reader/digitaltechnology11-1?page=208">الصفحة السابقة</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=210">الصفحة التالية</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=206">صفحة 206</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=207">صفحة 207</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=208">صفحة 208</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=210">صفحة 210</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=211">صفحة 211</a> | <a href="https://www.idros.ai/reader/digitaltechnology11-1?page=212">صفحة 212</a>
<a href="https://www.idros.ai/reader/library">العودة إلى المكتبة</a>
</nav>
<footer>
<p>إدرس AI - مدرس ذكاء اصطناعي مجاني للمناهج السعودية | وزارة التعليم</p>
</footer>
</body>
</html><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9f76a40b091acf5a',t:'MTc3ODA1NjQxMw=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>