المشاركات

عرض المشاركات من ديسمبر, 2021

كيفية إنشاء عداد تنازلي للوقت باستخدام vue3

صورة
يستخدم العد التنازلي في مواقع الويب في العروض التقديمية مثل تخفيضات رأس السنة ويستخدم بكثرة في تخفيضات الاستضافات وخاصة العروض التقديمية الخاصة بالمنتجات كما يمكننا استخدامه في اي مجال في الويب حسب الحاجة اليه مثال حي {{ displaydays }} الايام {{ displayhours }} الساعات {{ displayminutes }} الدقائق {{ displayseconds }} الثواني انتهى الوقت الكود كامل للمثال في الاعلى مع الشرح داخل الكود <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <!-- خاصية التجاوب مع جميع الاجهزة --> <meta na...
إرسال تعليق
قراءة المزيد

كيفية تكبير الصورة How To Create an Image Zoom

صورة
كيفية تكبير الصورة  How To Create an Image Zoom  تعلم كيفية إنشاء تكبير الصورة.  تكبير الصورة  مرر الماوس فوق الصورة لتكبيرها: الكود كامل والشرح في الفيديو اسفل <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <body dir='rtl'> <!--html--> <div class="image-wrap"> <div class="image"> <img src="https://i.ibb.co/3mLyp3f/oranges.jpg"> </div> <div class="image"> <img src="https://i.ibb.co/3mLyp3f/oranges.jpg"> </div> </div> <!--css--> <style> *{margin:0px; padding:px; box-sizing:border-box;} img{width:100%; height:auto;} .image-wrap{ display:grid; grid-template-columns:repeat(2,1fr); gap:15px; } @media (max-width:460px){ .image-wrap{ ...
إرسال تعليق
قراءة المزيد

تخطيط الشبكة - Grid Layout

صورة
تخطيط الشبكة Grid Layout توفر CSS Grid Layout Module نظام تخطيط قائم على الشبكة ، مع صفوف وأعمدة ، مما يسهل تصميم صفحات الويب دون الحاجة إلى استخدام   floats و positioning . مثال عملي للتخطيط بالGrid  لحم طازج بقري ( 65 ) $50 sall 20% عنب طازج ( 65 ) $50 sall 20% عنب طازج ( 65 ) $50 sall 20% ...
إرسال تعليق
قراءة المزيد

الترميز في HTML مجموعات الأحرف charset

صورة
الدرس السابق الدرس التالي الترميز في HTML مجموعات الأحرف charset لعرض صفحة HTML بشكل صحيح ، يجب أن يعرف متصفح الويب مجموعة الأحرف التي يجب استخدامها. من ASCII إلى UTF-8 كان ASCII أول معيار لترميز الأحرف. حدد ASCII 128 حرفًا مختلفًا يمكن استخدامها على الإنترنت: الأرقام (0-9) ، والأحرف الإنجليزية (A-Z) ، وبعض الأحرف الخاصة مثل! $ + - () @ <>. كانت ISO-8859-1 هي مجموعة الأحرف الافتراضية لـ HTML 4. تدعم مجموعة الأحرف هذه 256 رمزًا مختلفًا. يدعم HTML 4 أيضًا UTF-8. كانت ANSI (Windows-1252) هي مجموعة أحرف Windows الأصلية. ANSI مطابق لـ ISO-8859-1 ، فيما عدا أن ANSI يحتوي على 32 حرفًا إضافيًا. تشجع مواصفات HTML5 مطوري الويب على استخدام مجموعة أحرف UTF-8 ، والتي تغطي تقريبًا جميع الأحرف والرموز في العالم!   ملاحظة :  UTF-8     هذا الترميز وضع من قبل كل من روب بايك وكين تومسن لتمثيل معيار نظام الحروف الدولي الموحد للحروف الأبجدية لأغلب لغات العالم من بينها اللغة العربية ، ويتم تشفي...
إرسال تعليق
قراءة المزيد

الرموز التعبيرية Emojis in HTML

صورة
الدرس السابق الدرس التالي  استخدام  الرموز التعبيرية  🗼 😀 🏡 🏺 🐄 🐠 🐦 🐰 🐼 الرموز التعبيرية هي أحرف من مجموعة أحرف UTF-8: 😄 😍 💗 ما هي الرموز التعبيرية What are Emojis? تبدو الرموز التعبيرية مثل الصور أو الرموز ، لكنها ليست كذلك. وهي عبارة عن أحرف ( characters ) من مجموعة أحرف UTF-8 ( Unicode ). يغطي UTF-8 جميع الحروف والرموز في العالم تقريبًا مثل العربية اليونانية ...الخ . سمة مجموعة الأحرف  The HTML charset Attribute لعرض صفحة HTML بشكل صحيح ، يجب أن يعرف متصفح الويب مجموعة الأحرف المستخدمة في الصفحة. بالتحديد  في علامة <meta> : <meta charset = "UTF-8"> إذا لم يتم تحديده ، فإن UTF-8 هو الحرف الافتراضي المعين في HTML. أحرف UTF-8 لا يمكن كتابة العديد من أحرف UTF-8 على لوحة المفاتيح ، ولكن يمكن دائمًا عرضها باستخدام الأرقام (تسمى أرقام الكيانات-entity numbers): A is 65 B is 66 C is 67 ...
7 تعليقات
قراءة المزيد