HTML5

يحتوي HTML على الكثير من العلامات التي يستخدمها العديد من الأشخاص يوميًا، مثل <div> و<p> و<a>. لكن هناك أيضًا بعض الجواهر الخفية التي غالبًا ما تمر دون أن تلاحظ. يمكن أن تساعد هذه العلامات في جعل المواقع الإلكترونية أكثر جاذبية، وسهولة في الوصول، وذات معنى دون الكثير من الجهد الإضافي. في هذه المقالة، سنناقش مجموعة من عناصر HTML الفريدة التي يمكن أن تعزز صفحات الويب الخاصة بك. إنها تقدم وظائف محددة لتنسيق النص، وتحسين قابلية القراءة، وإضافة ميزات تفاعلية. جدول…

فهل ترغب في خلق أدوات تفاعلية بإستخدام الـ HTML، CSS، و JavaScript فقط؟ في هذه المقالة، سنخلق مشروعاً ممتعاً وبسيطاً: أداة لاختيار الألوان. هذه الأداة الصغيرة الرائعة ستسمح للمستخدمين بإختيار أي لون يحبون ورؤية قيمتها الـ HEX و RGB فوراً. إذن، احضر محرر الكود المفضل لديك ولنبدأ! الخطوة 1: إعداد المشروع إنشاء مجلد جديد: بدء بإنشاء مجلد جديد على جهاز الكمبيوتر الخاص بك لهذا المشروع. يمكنك تسمية color-picker-tool. إنشاء الملفات: داخل المجلد، قم بإنشاء ثلاث ملفات: index.html styles.css script.js الخطوة…

إن بناء المشاريع مهم جداً لتعلم كيفية البرمجة. عندما تقوم بإنشاء مشروع، توسع معرض أعمالك وتتعلم كيفية تطبيق مهاراتك في حالات جديدة。 لقد قمنا للتو بنشر دورة مدتها ساعتين على قناة freeCodeCamp.org الإسبانية على YouTube ستوجيهك خطوة بخطوة خلال بناء ثلاث مشاريع بإستخدام HTML, CSS, و JavaScript. ستمارس مهاراتك ببناء شريط تنقل متجاوب مع قوائم منسدلة، شريط تمرير، و صفحة وصول بنموذج تخصيصي。 إذا كان لديك أصدقاء يتحدثون الإسبانية، فإنك محظوظ لتشاركهم النسخة الإسبانية من هذه المقالة。 يدرّس هذه الدورة…

HTML5 Canvas و SVG هما تقنيتان مبنيتان على المعايير في HTML5 يمكنك استخدامهما لإنشاء رسومات وتجارب بصرية مذهلة. السؤال الذي أطرحه في هذا المقال هو التالي: هل يهم أيهما تستخدم في مشروعك؟ بتعبير آخر، هل هناك حالات استخدام تفضل HTML5 Canvas على SVG؟ أولاً، دعونا نقضي بضع كلمات لتعريف HTML5 Canvas و SVG. ما هو HTML5 Canvas؟ إليك كيف يعرض مواصفات WHATWG عنصر canvas: يوفر عنصر canvas للبرمجيات سطحاً بيتماسك حسب الدقة للصور النقطية التي يمكن استخدامها لعرض الرسوم البيانية…

في هذا البرنامج التعليمي، سنغوص في عمق عنصر HTML5 الأقل استخدامًا <datalist>. يمكن استخدامه لتنفيذ عنصر تحديد النموذج الخفيف الوزن والقابل للوصول ومتوافق عبر متصفحات دون الحاجة إلى JavaScript. ما الخطأ في <select>؟ عناصر HTML5 <select> مثالية عندما ترغب في أن يختار المستخدم من نطاق صغير من الخيارات. ليست عملية عندما: هناك العديد من الخيارات، مثل الدول أو عناوين الوظائف يرغب المستخدم في إدخال خياره الخاص وهو غير موجود في القائمة الحل الواضح هو عنصر التلاعب بالبحث. يسمح هذا بإدخال…

في هذه المقالة، سنلقي نظرة على بعض الطرق البسيطة لتصميم عنصر HTML <details>، وهو عنصر مفيد للغاية لكشف المحتوى وإخفاءه على صفحة الويب. من المفيد أن يكون لدينا عنصر إفصاح بسيط في HTML لا يتطلب JavaScript، لكن التصميم الافتراضي لعنصر <details> قد يكون مخيبًا للآراء بالنسبة لبعض الأشخاص. لحسن الحظ، من السهل تغيير تصميم هذا العنصر. جدول المحتويات أدناه مثال على استخدام عنصر <details>. لقد أضفنا حدودًا بسيطة إليه، جنبًا إلى جنب مع بعض الهوامش. Table of Contents تقديم عنصر…

في هذه المقالة، نلقي نظرة على حقول النموذج في HTML وخيارات التحقق من الصحة التي يقدمها HTML5. سننظر أيضًا في كيف يمكن تعزيز هذه من خلال استخدام CSS وJavaScript. ما هو التحقق من القيود؟ كل حقل نموذج له غرض. وهذا الغرض غالبًا ما يحكمه القيود – أو قواعد حول ما يجب وما لا يجب إدخاله في كل حقل نموذج. على سبيل المثال، سيتطلب حقل البريد الإلكتروني عنوان بريد إلكتروني صالح؛ قد يتطلب حقل كلمة المرور أنواعًا معينة من الأحرف ولديه…

لفترة من الزمان، كنت أقوم بإنشاء مشاهد ثلاثية الأبعاد باستخدام CSS للمتعة — عادةً على بثي المباشر. طائرة مظلية متعددة الاستجابة ل CSS 3D! 🛩️ تقوم بالغوص واللفات! 😎 تستجيب لحركة الماوس 🐭 👉 https://t.co/A1zNmfEzzi عبر @CodePen pic.twitter.com/87D7LIXLr2 — Jhey 🐻🛠 (Exploring Opportunities ✨) (@jh3yy) March 27, 2021 كل تجربة هي فرصة لتجربة شيء مختلف أو العمل على إيجاد طرق للقيام بأشياء باستخدام CSS. ما أفعله غالبًا هو اتخاذ اقتراحات حول ما يجب أن نحاول صنعه في البث. اقتراح آخر…