المحتوى عن 'ترقيم'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • مقالات عامة
  • التجارة الإلكترونية

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
    • Cordova
  • HTML5
  • CSS
    • Sass
    • إطار عمل Bootstrap
  • SQL
  • سي شارب #C
    • منصة Xamarin
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة R
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
  • مقالات عامّة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • مقالات عامّة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • استسراع النمو
  • المبيعات

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 1 نتيجة

  1. عند كتابة نص أو مقال ما، فأنت في الأغلب ستضيف له بعض الصور، أو الفيديو أو رسومات لتوضح المحتوى بشكل أكبر. والأغلب أنك ستضيف لكل منه نصا تقوم فيه بشرح مفهوم الصورة، وقد ترغب بترقيم الصور حتى لا يضيع القارئ، وهذا ما سنقوم به عبر استخدام عنصر <figure> مع المُرقمات (counters). عنصر figureإن عنصر <figure> صُمم ليستخدم جنبا إلى جنب مع <figcaption> لاحتواء الصور وما شابه. هذا هو شرح <figure> في وصف لغة HTML الرسمي: هكذا نقوم بإضافة figure : <figure> <img src="path/to/your/image.jpg" alt="" /> <figcaption>Here is the legend for your image<figcaption> </figure>هناك بعض الملاحظات بشأن العنصر: عنصر <figcaption> اختياري. تستطيع استخدام عنصر <figcaption> واحد فقط داخل عنصر <figure>.تستطيع إدراج أيّ عدد تشاء من العناصر داخل <figure>. إذا كنت ستدرج صورة فتستطيع ترك alt فارغة إذا كنت ستدرج <figcaption> حتى لا تقوم برامج قراءة الشاشة بقراءة نفس المحتوى مرّتين.للمزيد من المعلومات حول <figure> ألق نظرة على هذه المصادر: HTML5Doctor Mozilla Developer Network W3C Specificationأمثلة:إذا أردت أن تظهر شيفرة برمجية ما، فتستطيع استخدامه بهذه الطريقة: <figure> <code>body { background: white; }</code> <figcaption>Some illustrated code with figure<figcaption> </figure>بدل إدراج صورك بهذه الطريقة: <img src="cute-kitty.jpg" alt="This is a cute kitty!" />تستطيع إدراجها بهذه الطريقة: <figure> <img src="cute-kitty.jpg" alt="" /> <figcaption>This is a cute kitty!<figcaption> <figure>دعم المتصفحاتعنصر <figure> يعتبر من أحد عناصر HTML5 الجديدة، ولذا فهو ليس مدعوما من قبل المتصفحات القديمة (IE 8) ولكن لا أحد يهتم صراحة. ولكن إن كنت مُهتمًا بدعم المُتصفّحات القديمة فتستطيع استخدام html5shiv ليظهر الوسم بشكل عادي. المُرقّمات في CSSأحد أكثر خصائص CSS ديناميكة وأقلها شهرة هي CSS Counter فهي تسمح لك بترقيم العناصر ديناميكيا عبر CSS فحسب، بدون الاستعانة بأيّ شيء آخر. استخدام المرقمات يكون عبر خاصيتين وقيمة وهما: counter-reset والتي تستخدم لتهيئة أو إعادة تهيئة مرقم أو أكثر. counter-increment والتي تستخدم لزيادة قيمة مرقم أو أكثر. ()counter وهي قيمة تستخدمها مع before:: أو after:: والتي تقبل اسم المرقم كقيمة من أجل أن تظهر القيمة.الأمر بسيط. كل ما تقوم به هو تهيئة عدّاد ما بالاسم الذي تريده، ثم تحدد لمجموعة عناصر ما أن تقوم بزيادة تلك القيمة كلنا ظهر أحدها. ويمكن إظهار هذه القيمة عبر CSS باستخدام before:: و after::. مثال بسيط للعداد: /* 1. نقوم بتهيئة المرقم (أو العداد) */ body { counter-reset: thisSuperCoolCounter; } /* 2. نحدد أنه في كل مرة يظهر فيها هذا العنصر نرفع قيمة المرقم */ .myAwesomeElement { counter-increment: thisSuperCoolCounter; } /* 3. نقوم بإظهار قيمة العداد قبل العنصر */ .myAwesomeElement:before { content: counter(thisSuperCoolCounter); }مثال بسيطحسنا نعود للموضوع الأساسي الذي يدور حوله الدرس، نريد ترقيم صورنا حتى تظهر قبلها Fig. 2 – … Fig. 1 – … وهكذا. .article { counter-reset: figures; } .figure { counter-increment: figures; } .figure figcaption:before { content: 'Fig. ' counter(figures) ' - '; }إعداد كل شيءالأساسياتبعد أن فهمنا كيف نستخدم عنصر <figure> وكيف تعمل المرقمات في CSS حان الوقت لاستخدامها في ترقيم الصور. نقوم بإعداد وسم <figure> ببعض الأمور البسيطة: .figure { padding: 0.9em; border: 3px solid #f5bca8; background: #fff; margin: 0 auto 1em; }ثم نريد أن نحاذي الصور في وسط عنصر <figure> ونمنعهم من الخروج عن حجم الحاوي لذا نضيف التالي: .figure img { margin: 0 auto; display: block; max-width: 100%; } الآن بالنسبة لوصف الصّورة (caption) وسنجعلها تبرز أكثر بتوسيطها وجعل الخط بارزًا. فقط تذكر أنّ الهدف من الوصف أن يضيف شرحًا بسيطا، وأن إزالته لن تشكل مشكلة في الفهم فلا داعي لأن تضيف فقرة هناك. .figure figcaption { font-weight: 700; font-size: 0.8em; padding: .5em; text-align: center; color: #fff; background: #f5bca8; }الترقيمحان الوقت لإضافة الترقيم للصور، وإضافته سهلة كما رأينا سابقا. .article { counter-reset: figures; } .figure figcaption { counter-increment: figures; } .figure figcaption:before { content: 'Fig. ' counter(figures) ' - '; }الإضافات البسيطةنريد أن نضيف طريقة سهل لجعل الصور تتمركز على يمين المحتوى أو على يساره، وسنقوم بذلك عبر إضافة التالي: .figure-left { float: left; margin: 0 1em .5em 0; width: -webkit-min-content; width: -moz-min-content; width: min-content; } .figure-right { float: right; margin: 0 0 .5em 1em; width: -webkit-min-content; width: -moz-min-content; width: min-content; }إنّ min-content هي قيمة صحيحة لكل من الخواص التالية min-height min-width max-height max-widthheight width. في حالتنا، نريد من figure أن يكون بأصغر قدر ممكن، أو بالأحرى نريد من عرضه أن يكون هو نفس عرض الصورة التي هي بداخله. لأن figure هو عنصر بحجم كامل (block) فسوف يتمد عرضه إلى كامل الحاوي (100%). نستطيع استخدام float: left أو display: inline-block لجعل عرضه يقل إلى أكبر عنصر داخله، ولكن ماذا سيحدث لو كان الوصف أكبر من حجم الصورة، فستحدث مشكلة. نستطيع أن نحدد عرض العنصر يدويًّا، ولكن الأمر غير منطقي وغير ديناميكي، لهذا استخدمنا قيمة min-content، فهي بكل بساطة تخبر عنصر figure أن يقلل من حجمه إلى حجم الصورة مثال: See the Pen pJLXde by Hsoub Academy (@HsoubAcademy) on CodePen. الخاصية مدعومة من قبل فيرفكس باستخدام -moz- و chrome باستخدام -webkit-. المتصفحات التي لا تدعم الخاصية ستتصرف كما هو متوقع منها، لن يتم تعيين أيّ عرض وسيكون عرضه هو عرض أكبر عنصر داخله. ملاحظة: يوجد قيم أخرى وهي max-content و fit-content و available. اطلع على التوثيق للمزيد من المعلومات. وأخيرًا وليس آخرا، نريد أن نغير أو نحذف العرض الأقصى الذي حددناه للصور التي ستميل لليمين أو لليسار، فإذا أردت أن تأخذ الصور حجمها الطبيعي فاستخدم max-width: none وإذا أردت عرضا أقصى فاستخدم التالي: .figure-right img, .figure-left img { max-width: 300px; /* عدل على حسب حاجتك */ }توافق الشاشات الصغيرةلنتأكد من العناصر التي نحاذيها لا تتصرف بغرابة في شاشات الهواتف الصغيرة سنقوم ببعض التعديلات حتى تأخذ العناصر كامل العرض وتتوسط الصفحة أفقيا: @media (max-width: 767px) { .figure-left, .figure-right { float: none; margin: 0 0 1em 0; width: 100%; } .figure img { max-width: 100%; } }الاستخداماستخدام ما قدمناه شيء بسيط، إما أن تستخدم صورا تستغل كامل المساحة عبر استخدام figure. أو تريد أن تحاذي الصور لليمين أو لليسار فتستخدم كل من figure. وfigure-left. أو figure-right. <figure class='figure'> <img src="path/to/your/image.jpg" alt="" /> <figcaption>Here is the legend for your image<figcaption> </figure> <figure class='figure figure-left'> <img src="path/to/your/image.jpg" alt="" /> <figcaption>Here is the legend for your image<figcaption> </figure> <figure class='figure figure-right'> <img src="path/to/your/image.jpg" alt="" /> <figcaption>Here is the legend for your image<figcaption> </figure>خاتمةهذا كان كل شيء، كل ما تبقى هو أن تطبقها في موقعك، جرب إلقاء نظرة على المثال لترى مثالا عمليا. ترجمة وبتصرّف للمقال: Automatic Figure Numbering with CSS Counters لصاحبه: Hugo Giraudel. جميع حقوق المقال محفوظة لموقع codrops.