3. عناصر الوسائط المتعددة (Multimedia Elements)

تستخدم لإضافة الصور والصوت والفيديو

<img>: لعرض الصور، يتطلب src لتحديد مصدر الصورة.

<audio>: لتشغيل الملفات الصوتية، يدعم صيغ مثل MP3 و OGG.

<video>: لتشغيل مقاطع الفيديو، يدعم صيغ مثل MP4 و WebM.

<source>: يُستخدم داخل <audio> و <video> لتوفير مصادر متعددة.

<track>: يُستخدم مع <video> لإضافة ترجمة أو تعليقات.

<figure>: يُستخدم لاحتواء الصور أو الرسوم مع وصف توضيحي.

<figcaption>: يُستخدم لوصف محتوى <figure>.

<canvas>: يُستخدم لرسم الرسوميات باستخدام JavaScript.

<svg>: يُستخدم لإنشاء رسومات متجهة قابلة للتحجيم.

4. عناصر النماذج (Form Elements)

تُستخدم لجمع بيانات المستخدم

<form>: يُحدد نموذجًا لإدخال البيانات.

<input>: حقل إدخال، له أنواع متعددة مثل text, password, email, number, checkbox, radio, file, submit.

<label>: يُستخدم لربط وصف مع حقل إدخال.

<textarea>: لإنشاء مربع نص متعدد الأسطر.

<select>: قائمة منسدلة تحتوي على خيارات.

<option>: عنصر داخل <select> يُمثل خيارًا واحدًا.

<button>: يُستخدم لإنشاء أزرار قابلة للتفاعل.

<fieldset>: يُستخدم لتجميع مجموعة من عناصر الإدخال.

<legend>: يُستخدم لوصف محتوى <fieldset>.

<datalist>: يُوفر قائمة مقترحة للقيم داخل <input>.

<output>: يُستخدم لعرض نتائج العمليات الحسابية داخل النماذج.

5. عناصر الربط والتفاعل (Interactive Elements)

تُستخدم لإنشاء روابط وأزرار تفاعلية

<a>: يُستخدم لإنشاء الروابط التشعبية.

<details>: يُستخدم لإنشاء قسم قابل للتوسع والانهيار.

<summary>: يُحدد العنوان القابل للنقر داخل <details>.

<dialog>: يُستخدم لإنشاء مربعات حوار قابلة للإغلاق.

<menu>: يُستخدم لإنشاء قائمة من الأوامر.

6. عناصر الجدول (Table Elements)

تُستخدم لإنشاء الجداول وتنظيم البيانات

<table>: يُحدد بداية الجدول.

<tr>: يُحدد صفًا داخل الجدول.

<td>: يُمثل خلية بيانات داخل الصف.

<th>: يُمثل خلية عنوان للجدول.

<thead>: يُحدد رأس الجدول.

<tbody>: يُحدد جسم الجدول.

<tfoot>: يُحدد تذييل الجدول.

<caption>: يُستخدم لإضافة عنوان توضيحي للجدول.

7. عناصر البرمجة والتفاعل (Scripting Elements)

تُستخدم لإضافة الأكواد البرمجية والتفاعل الديناميكي

<script>: يُستخدم لإضافة أكواد JavaScript إلى الصفحة.

<noscript>: يُعرض محتوى بديل في حال تعطيل JavaScript.

<template>: يُستخدم لإنشاء قوالب HTML يمكن تكرارها باستخدام JavaScript.

<slot>: يُستخدم داخل Web Components لتحديد أماكن المحتوى القابل للتخصيص.

CSS3 هي الإصدار الثالث من أوراق الأنماط المتتالية (Cascading Style Sheets - CSS)، وهي لغة تُستخدم لتنسيق صفحات الويب وتحسين مظهرها. جاءت CSS3 بتحديثات وتحسينات كبيرة مقارنة بالإصدارات السابقة (CSS1 وCSS2)، حيث أصبحت أكثر قوة ومرونة في التصميم.

الفرق بين CSS3 والإصدارات السابقة (CSS1 وCSS2):

1. التقسيم إلى وحدات (Modules):

تم تقسيم CSS3 إلى وحدات مستقلة، مما يسمح بتطوير الميزات الجديدة دون الحاجة إلى تحديث اللغة بالكامل.



2. التحكم المتقدم في التخطيط والتنسيق:

Flexbox وGrid: ميزات قوية لإنشاء تصاميم مرنة وسهلة التكيف مع الشاشات المختلفة.

Media Queries: لدعم التصميم المتجاوب (Responsive Design) بناءً على حجم الشاشة أو نوع الجهاز.



3. التأثيرات والأنيميشن:

Transitions: لإنشاء تأثيرات انتقالية سلسة بين حالات العناصر.

Animations: لإنشاء حركات مخصصة دون الحاجة إلى JavaScript.

Transforms: لتدوير وتحريك العناصر (مثل rotate(), scale(), translate()).



4. دعم أكبر للألوان والتدرجات:

دعم الألوان بنظام RGBA وHSLA، مما يسمح بتحديد الشفافية بسهولة.

دعم التدرجات اللونية (linear-gradient, radial-gradient) بدون الحاجة لاستخدام صور.



5. إضافة تأثيرات الظلال:

box-shadow: لإضافة ظل للعناصر.

text-shadow: لإضافة ظل للنصوص.



6. تحسينات على الخطوط والطباعة:

دعم @font-face لاستخدام خطوط مخصصة على الويب.

خصائص جديدة مثل text-overflow وword-wrap.



7. دعم أفضل للنماذج (Forms):

تحسينات على حقول الإدخال، مثل placeholder, required, وvalidity للتحقق من صحة البيانات بدون JavaScript.




لماذا CSS3 مهمة؟

تجعل تصميم المواقع أكثر احترافية وجاذبية.

تقلل من الاعتماد على JavaScript لتحقيق التأثيرات.

تساعد في تحسين تجربة المستخدم على الأجهزة المختلفة.

توفر وقت المطورين بفضل الأدوات المتقدمة.

لغة JavaScript هي لغة برمجة ديناميكية تُستخدم بشكل رئيسي في تطوير الويب لإنشاء صفحات تفاعلية وتحسين تجربة المستخدم. تُعد واحدة من الركائز الثلاثة الأساسية في تطوير الويب بجانب HTML (لبناء الهيكل) وCSS (لتنسيق الشكل).

استخدام JavaScript في تصميم الويب:

1. إضافة التفاعل: تجعل صفحات الويب تفاعلية من خلال التعامل مع الأحداث مثل النقر، والتمرير، والإدخال في النماذج.


2. التعديل على المحتوى ديناميكيًا: يمكن تغيير النصوص، الصور، والألوان دون الحاجة إلى إعادة تحميل الصفحة.


3. إنشاء تأثيرات ورسوم متحركة: مثل القوائم المنسدلة، السلايدرات، والتأثيرات البصرية الأخرى.


4. التحقق من المدخلات: تستخدم لفحص البيانات المدخلة في النماذج قبل إرسالها إلى الخادم.


5. التعامل مع API's: تسمح بجلب بيانات من مصادر خارجية مثل واجهات برمجية لخدمات الطقس أو الأخبار.


6. تصميم واجهات مستخدم متقدمة: من خلال مكتبات وأُطر مثل React.js وVue.js وAngular.

anWriter Free

CSS & HTML & JavaScript Editor