5. عناصر الربط والتفاعل (Interactive Elements)
تُستخدم لإنشاء روابط وأزرار تفاعلية
<a>: يُستخدم لإنشاء الروابط التشعبية.
<details>: يُستخدم لإنشاء قسم قابل للتوسع والانهيار.
<summary>: يُحدد العنوان القابل للنقر داخل <details>.
<dialog>: يُستخدم لإنشاء مربعات حوار قابلة للإغلاق.
<menu>: يُستخدم لإنشاء قائمة من الأوامر.
تُستخدم لإنشاء روابط وأزرار تفاعلية
<a>: يُستخدم لإنشاء الروابط التشعبية.
<details>: يُستخدم لإنشاء قسم قابل للتوسع والانهيار.
<summary>: يُحدد العنوان القابل للنقر داخل <details>.
<dialog>: يُستخدم لإنشاء مربعات حوار قابلة للإغلاق.
<menu>: يُستخدم لإنشاء قائمة من الأوامر.
6. عناصر الجدول (Table Elements)
تُستخدم لإنشاء الجداول وتنظيم البيانات
<table>: يُحدد بداية الجدول.
<tr>: يُحدد صفًا داخل الجدول.
<td>: يُمثل خلية بيانات داخل الصف.
<th>: يُمثل خلية عنوان للجدول.
<thead>: يُحدد رأس الجدول.
<tbody>: يُحدد جسم الجدول.
<tfoot>: يُحدد تذييل الجدول.
<caption>: يُستخدم لإضافة عنوان توضيحي للجدول.
تُستخدم لإنشاء الجداول وتنظيم البيانات
<table>: يُحدد بداية الجدول.
<tr>: يُحدد صفًا داخل الجدول.
<td>: يُمثل خلية بيانات داخل الصف.
<th>: يُمثل خلية عنوان للجدول.
<thead>: يُحدد رأس الجدول.
<tbody>: يُحدد جسم الجدول.
<tfoot>: يُحدد تذييل الجدول.
<caption>: يُستخدم لإضافة عنوان توضيحي للجدول.
7. عناصر البرمجة والتفاعل (Scripting Elements)
تُستخدم لإضافة الأكواد البرمجية والتفاعل الديناميكي
<script>: يُستخدم لإضافة أكواد JavaScript إلى الصفحة.
<noscript>: يُعرض محتوى بديل في حال تعطيل JavaScript.
<template>: يُستخدم لإنشاء قوالب HTML يمكن تكرارها باستخدام JavaScript.
<slot>: يُستخدم داخل Web Components لتحديد أماكن المحتوى القابل للتخصيص.
تُستخدم لإضافة الأكواد البرمجية والتفاعل الديناميكي
<script>: يُستخدم لإضافة أكواد JavaScript إلى الصفحة.
<noscript>: يُعرض محتوى بديل في حال تعطيل JavaScript.
<template>: يُستخدم لإنشاء قوالب HTML يمكن تكرارها باستخدام JavaScript.
<slot>: يُستخدم داخل Web Components لتحديد أماكن المحتوى القابل للتخصيص.
Web Development
Photo
CSS3 هي الإصدار الثالث من أوراق الأنماط المتتالية (Cascading Style Sheets - CSS)، وهي لغة تُستخدم لتنسيق صفحات الويب وتحسين مظهرها. جاءت CSS3 بتحديثات وتحسينات كبيرة مقارنة بالإصدارات السابقة (CSS1 وCSS2)، حيث أصبحت أكثر قوة ومرونة في التصميم.
Web Development
Photo
الفرق بين 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 لتحقيق التأثيرات.
تساعد في تحسين تجربة المستخدم على الأجهزة المختلفة.
توفر وقت المطورين بفضل الأدوات المتقدمة.
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 لتحقيق التأثيرات.
تساعد في تحسين تجربة المستخدم على الأجهزة المختلفة.
توفر وقت المطورين بفضل الأدوات المتقدمة.
Web Development
Photo
لغة JavaScript هي لغة برمجة ديناميكية تُستخدم بشكل رئيسي في تطوير الويب لإنشاء صفحات تفاعلية وتحسين تجربة المستخدم. تُعد واحدة من الركائز الثلاثة الأساسية في تطوير الويب بجانب HTML (لبناء الهيكل) وCSS (لتنسيق الشكل).
Web Development
Photo
استخدام JavaScript في تصميم الويب:
1. إضافة التفاعل: تجعل صفحات الويب تفاعلية من خلال التعامل مع الأحداث مثل النقر، والتمرير، والإدخال في النماذج.
2. التعديل على المحتوى ديناميكيًا: يمكن تغيير النصوص، الصور، والألوان دون الحاجة إلى إعادة تحميل الصفحة.
3. إنشاء تأثيرات ورسوم متحركة: مثل القوائم المنسدلة، السلايدرات، والتأثيرات البصرية الأخرى.
4. التحقق من المدخلات: تستخدم لفحص البيانات المدخلة في النماذج قبل إرسالها إلى الخادم.
5. التعامل مع API's: تسمح بجلب بيانات من مصادر خارجية مثل واجهات برمجية لخدمات الطقس أو الأخبار.
6. تصميم واجهات مستخدم متقدمة: من خلال مكتبات وأُطر مثل React.js وVue.js وAngular.
1. إضافة التفاعل: تجعل صفحات الويب تفاعلية من خلال التعامل مع الأحداث مثل النقر، والتمرير، والإدخال في النماذج.
2. التعديل على المحتوى ديناميكيًا: يمكن تغيير النصوص، الصور، والألوان دون الحاجة إلى إعادة تحميل الصفحة.
3. إنشاء تأثيرات ورسوم متحركة: مثل القوائم المنسدلة، السلايدرات، والتأثيرات البصرية الأخرى.
4. التحقق من المدخلات: تستخدم لفحص البيانات المدخلة في النماذج قبل إرسالها إلى الخادم.
5. التعامل مع API's: تسمح بجلب بيانات من مصادر خارجية مثل واجهات برمجية لخدمات الطقس أو الأخبار.
6. تصميم واجهات مستخدم متقدمة: من خلال مكتبات وأُطر مثل React.js وVue.js وAngular.
This media is not supported in your browser
VIEW IN TELEGRAM
3 Ways to center a div in css
هناك ثلاث طرق لربط ملفات CSS و JavaScript مع HTML:
1. الربط الخارجي (External)
يتم إنشاء ملف CSS أو JavaScript منفصل ثم يتم ربطه داخل ملف HTML باستخدام وسم <link> لملفات CSS ووسم <script> لملفات JavaScript.
مثال على ربط CSS خارجيًا:
<head>
<link rel="stylesheet" href="styles.css">
</head>
مثال على ربط JavaScript خارجيًا:
<body>
<script src="script.js"></script>
</body>
2. الربط الداخلي (Internal)
يتم كتابة CSS داخل وسم <style> في ملف HTML، أو كتابة JavaScript داخل وسم <script> في نفس الملف.
مثال على CSS داخلي:
<head>
<style>
body {
background-color: lightgray;
}
</style>
</head>
مثال على JavaScript داخلي:
<head>
<script>
function showMessage() {
alert("Hello, World!");
}
</script>
</head>
3. الربط المباشر (Inline)
يتم إضافة CSS مباشرة داخل وسم العنصر باستخدام خاصية style=""، أو يتم إضافة JavaScript مباشرة في خاصية onclick="" أو onload="" وغيرها.
مثال على CSS مضمّن (Inline CSS):
<p style="color: red; font-size: 20px;">مرحبا بالعالم</p>
مثال على JavaScript مضمّن (Inline JavaScript):
<button onclick="alert('تم الضغط على الزر!')">اضغط هنا</button>
ما هي الطريقة الأفضل؟
الربط الخارجي هو الأفضل من حيث التنظيم، وإعادة الاستخدام، وسهولة الصيانة.
الربط الداخلي مفيد في بعض الحالات مثل تخصيص أنماط أو سكريبتات لصفحة معينة دون الحاجة إلى ملف خارجي.
الربط المباشر يُفضل تجنبه إلا في الحالات الضرورية لأنه يسبب فوضى في الكود وصعوبة في الصيانة.
1. الربط الخارجي (External)
يتم إنشاء ملف CSS أو JavaScript منفصل ثم يتم ربطه داخل ملف HTML باستخدام وسم <link> لملفات CSS ووسم <script> لملفات JavaScript.
مثال على ربط CSS خارجيًا:
<head>
<link rel="stylesheet" href="styles.css">
</head>
مثال على ربط JavaScript خارجيًا:
<body>
<script src="script.js"></script>
</body>
2. الربط الداخلي (Internal)
يتم كتابة CSS داخل وسم <style> في ملف HTML، أو كتابة JavaScript داخل وسم <script> في نفس الملف.
مثال على CSS داخلي:
<head>
<style>
body {
background-color: lightgray;
}
</style>
</head>
مثال على JavaScript داخلي:
<head>
<script>
function showMessage() {
alert("Hello, World!");
}
</script>
</head>
3. الربط المباشر (Inline)
يتم إضافة CSS مباشرة داخل وسم العنصر باستخدام خاصية style=""، أو يتم إضافة JavaScript مباشرة في خاصية onclick="" أو onload="" وغيرها.
مثال على CSS مضمّن (Inline CSS):
<p style="color: red; font-size: 20px;">مرحبا بالعالم</p>
مثال على JavaScript مضمّن (Inline JavaScript):
<button onclick="alert('تم الضغط على الزر!')">اضغط هنا</button>
ما هي الطريقة الأفضل؟
الربط الخارجي هو الأفضل من حيث التنظيم، وإعادة الاستخدام، وسهولة الصيانة.
الربط الداخلي مفيد في بعض الحالات مثل تخصيص أنماط أو سكريبتات لصفحة معينة دون الحاجة إلى ملف خارجي.
الربط المباشر يُفضل تجنبه إلا في الحالات الضرورية لأنه يسبب فوضى في الكود وصعوبة في الصيانة.
Media Query
هي تقنية في CSS3 تُستخدم لجعل تصميم الويب متجاوبًا مع أحجام الشاشات المختلفة، مثل شاشات الكمبيوتر، الأجهزة اللوحية، والهواتف المحمولة.
تتيح لك Media Query تطبيق أنماط CSS مختلفة بناءً على خصائص الجهاز مثل عرض الشاشة، الطول، الدقة، الاتجاه (عمودي أو أفقي) وغيرها.
هي تقنية في CSS3 تُستخدم لجعل تصميم الويب متجاوبًا مع أحجام الشاشات المختلفة، مثل شاشات الكمبيوتر، الأجهزة اللوحية، والهواتف المحمولة.
تتيح لك Media Query تطبيق أنماط CSS مختلفة بناءً على خصائص الجهاز مثل عرض الشاشة، الطول، الدقة، الاتجاه (عمودي أو أفقي) وغيرها.