هناك ثلاث طرق لربط ملفات 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 مختلفة بناءً على خصائص الجهاز مثل عرض الشاشة، الطول، الدقة، الاتجاه (عمودي أو أفقي) وغيرها.
كيفية استخدام Media Query
يتم تعريف Media Query باستخدام الكلمة المفتاحية @media، متبوعة بنوع الوسائط (مثل screen أو print) ثم الشروط التي يجب أن تتحقق، يليها كود CSS الذي سيتم تطبيقه.
1. استخدام Media Query داخل ملف CSS خارجي
تنسيق عام للصفحة
body {
background-color: white;
font-size: 18px;
}
عندما يكون عرض الشاشة 768 بكسل أو أقل (مثل التابلت والهواتف)
@media screen and (max-width: 768px) {
body {
background-color: lightgray;
font-size: 16px;
}
}
عندما يكون عرض الشاشة 480 بكسل أو أقل (مثل الهواتف الصغيرة)
@media screen and (max-width: 480px) {
body {
background-color: lightblue;
font-size: 14px;
}
}
2. استخدام Media Query داخل وسم <style> في HTML
<head>
<style>
@media screen and (max-width: 600px) {
body {
background-color: yellow;
}
}
</style>
</head>
3. استخدام Media Query داخل HTML مباشرة (ينصح بتجنبها)
<p style="color: red; font-size: 18px; @media (max-width: 500px) { font-size: 14px; }">نص متجاوب</p>
⚠ هذه الطريقة غير مدعومة في جميع المتصفحات، لذلك لا يُنصح باستخدامها.
يتم تعريف Media Query باستخدام الكلمة المفتاحية @media، متبوعة بنوع الوسائط (مثل screen أو print) ثم الشروط التي يجب أن تتحقق، يليها كود CSS الذي سيتم تطبيقه.
1. استخدام Media Query داخل ملف CSS خارجي
تنسيق عام للصفحة
body {
background-color: white;
font-size: 18px;
}
عندما يكون عرض الشاشة 768 بكسل أو أقل (مثل التابلت والهواتف)
@media screen and (max-width: 768px) {
body {
background-color: lightgray;
font-size: 16px;
}
}
عندما يكون عرض الشاشة 480 بكسل أو أقل (مثل الهواتف الصغيرة)
@media screen and (max-width: 480px) {
body {
background-color: lightblue;
font-size: 14px;
}
}
2. استخدام Media Query داخل وسم <style> في HTML
<head>
<style>
@media screen and (max-width: 600px) {
body {
background-color: yellow;
}
}
</style>
</head>
3. استخدام Media Query داخل HTML مباشرة (ينصح بتجنبها)
<p style="color: red; font-size: 18px; @media (max-width: 500px) { font-size: 14px; }">نص متجاوب</p>
⚠ هذه الطريقة غير مدعومة في جميع المتصفحات، لذلك لا يُنصح باستخدامها.
أهم خصائص Media Query في CSS3
max-width:
يطبق الأنماط عندما يكون عرض الشاشة أقل من أو يساوي قيمة معينة.
min-width:
يطبق الأنماط عندما يكون عرض الشاشة أكبر من أو يساوي قيمة معينة.
max-height:
يطبق الأنماط عندما يكون ارتفاع الشاشة أقل من أو يساوي قيمة معينة.
min-height:
يطبق الأنماط عندما يكون ارتفاع الشاشة أكبر من أو يساوي قيمة معينة.
orientation:
يحدد إذا كان اتجاه الشاشة أفقي (landscape) أو عمودي (portrait).
aspect-ratio:
يطبق الأنماط بناءً على نسبة العرض إلى الارتفاع للشاشة.
resolution:
يطبق الأنماط بناءً على دقة الشاشة (مثل Retina Display).
max-width:
يطبق الأنماط عندما يكون عرض الشاشة أقل من أو يساوي قيمة معينة.
min-width:
يطبق الأنماط عندما يكون عرض الشاشة أكبر من أو يساوي قيمة معينة.
max-height:
يطبق الأنماط عندما يكون ارتفاع الشاشة أقل من أو يساوي قيمة معينة.
min-height:
يطبق الأنماط عندما يكون ارتفاع الشاشة أكبر من أو يساوي قيمة معينة.
orientation:
يحدد إذا كان اتجاه الشاشة أفقي (landscape) أو عمودي (portrait).
aspect-ratio:
يطبق الأنماط بناءً على نسبة العرض إلى الارتفاع للشاشة.
resolution:
يطبق الأنماط بناءً على دقة الشاشة (مثل Retina Display).
في CSS، كل من margin و padding يستخدمان للتحكم في التباعد حول العناصر، ولكن هناك فرق بينهما:
1. الفرق بين margin و padding
margin: المسافة الخارجية التي تفصل العنصر عن العناصر الأخرى حوله.
padding: المسافة الداخلية بين محتوى العنصر وحدوده (border).
2. شرح بالمخطط
يمكن تصور ذلك كمربع يحتوي على أربع طبقات:
المحتوى (Content): النص أو الصورة داخل العنصر.
الحشو (Padding): المسافة بين المحتوى والحدود.
الحدود (Border): الإطار المحيط بالعنصر.
الهامش (Margin): المسافة بين العنصر والعناصر المجاورة.
3. أمثلة عملية
مثال على margin
div {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 20px;
}
يضيف مسافة خارجية 20px من جميع الجهات
> هنا، سيتم إضافة مسافة 20px خارج العنصر، مما يؤدي إلى إبعاده عن العناصر الأخرى.
مثال على padding
div {
width: 200px;
height: 100px;
background-color: lightgreen;
padding: 20px;
}
يضيف مسافة داخلية 20px من جميع الجهات
> هنا، سيبتعد المحتوى داخل العنصر بمقدار 20px عن الحدود الداخلية.
4. الخصائص لكل منهما
margin:
يمكن تعيينه لكل جهة على حدة:
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;
أو استخدام الخاصية المختصرة:
margin: 10px 15px 20px 25px;
(أعلى - يمين - أسفل - يسار)
يمكن أن تكون القيم:
عدد بيكسلات (px) أو نسبة (%) أو auto (يتم حسابه تلقائيًا).
padding:
يمكن تعيينه بنفس الطريقة:
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;
أو استخدام المختصر:
padding: 10px 15px 20px 25px;
لا يمكن أن يكون auto مثل margin.
5. متى نستخدم margin ومتى نستخدم padding؟
استخدم margin عندما تحتاج إلى إبعاد العنصر عن العناصر الأخرى.
استخدم padding عندما تحتاج إلى إبعاد المحتوى داخل العنصر عن حدوده.
1. الفرق بين margin و padding
margin: المسافة الخارجية التي تفصل العنصر عن العناصر الأخرى حوله.
padding: المسافة الداخلية بين محتوى العنصر وحدوده (border).
2. شرح بالمخطط
يمكن تصور ذلك كمربع يحتوي على أربع طبقات:
المحتوى (Content): النص أو الصورة داخل العنصر.
الحشو (Padding): المسافة بين المحتوى والحدود.
الحدود (Border): الإطار المحيط بالعنصر.
الهامش (Margin): المسافة بين العنصر والعناصر المجاورة.
3. أمثلة عملية
مثال على margin
div {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 20px;
}
يضيف مسافة خارجية 20px من جميع الجهات
> هنا، سيتم إضافة مسافة 20px خارج العنصر، مما يؤدي إلى إبعاده عن العناصر الأخرى.
مثال على padding
div {
width: 200px;
height: 100px;
background-color: lightgreen;
padding: 20px;
}
يضيف مسافة داخلية 20px من جميع الجهات
> هنا، سيبتعد المحتوى داخل العنصر بمقدار 20px عن الحدود الداخلية.
4. الخصائص لكل منهما
margin:
يمكن تعيينه لكل جهة على حدة:
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;
أو استخدام الخاصية المختصرة:
margin: 10px 15px 20px 25px;
(أعلى - يمين - أسفل - يسار)
يمكن أن تكون القيم:
عدد بيكسلات (px) أو نسبة (%) أو auto (يتم حسابه تلقائيًا).
padding:
يمكن تعيينه بنفس الطريقة:
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;
أو استخدام المختصر:
padding: 10px 15px 20px 25px;
لا يمكن أن يكون auto مثل margin.
5. متى نستخدم margin ومتى نستخدم padding؟
استخدم margin عندما تحتاج إلى إبعاد العنصر عن العناصر الأخرى.
استخدم padding عندما تحتاج إلى إبعاد المحتوى داخل العنصر عن حدوده.
This media is not supported in your browser
VIEW IN TELEGRAM
Padding vs Margin
Bootstrap-Cheat-Sheet-websitesetup.org_.pdf
616 KB
Bootstrap5 Cheat Sheet
Web Development
animation.gif
DOM (Document Object Model)
1. ما هو الـ DOM؟
DOM هو اختصار لـ Document Object Model، وهو عبارة عن واجهة برمجية تمثل هيكلة مستندات الويب (HTML أو XML) على هيئة شجرة من الكائنات (Objects)، بحيث يمكن التفاعل معها برمجيًا باستخدام JavaScript أو لغات أخرى.
2. كيف يعمل الـ DOM؟
عندما يقوم المتصفح بتحميل صفحة ويب، فإنه يقوم بتحويل ملف HTML إلى شجرة DOM تتكون من عناصر (Nodes) تمثل كل عنصر في الصفحة، مثل:
العناصر (Elements) مثل <div>، <p>، <h1>، <img>...
النصوص (Text Nodes) وهي المحتوى النصي داخل العناصر.
السمات (Attributes Nodes) مثل class="box" أو id="header".
بمجرد أن يصبح DOM جاهزًا، يمكن التعديل عليه وإجراء تغييرات على الصفحة باستخدام JavaScript.
---
3. كيفية التفاعل مع DOM باستخدام JavaScript
بما أن DOM هو كائن (Object)، فيمكن الوصول إلى عناصره وتعديلها باستخدام JavaScript من خلال عدة طرق، مثل:
أ. الوصول إلى العناصر (Selecting Elements)
يمكنك اختيار العناصر في الصفحة باستخدام:
document.getElementById("myElement") → لاختيار عنصر بواسطة ID.
document.getElementsByClassName("myClass") → لاختيار العناصر بواسطة Class.
document.getElementsByTagName("p") → لاختيار جميع العناصر من نوع معين.
document.querySelector(".myClass") → لاختيار أول عنصر مطابق للبحث.
document.querySelectorAll("p") → لاختيار جميع العناصر المطابقة.
ب. تعديل محتوى العناصر
element.innerHTML = "مرحبا" → يغير المحتوى الداخلي لعنصر.
element.textContent = "مرحبا" → يغير النص فقط بدون HTML.
ج. تغيير الأنماط (CSS)
element.style.color = "red" → تغيير لون النص.
element.style.backgroundColor = "blue" → تغيير لون الخلفية.
د. التعامل مع الأحداث (Events)
element.addEventListener("click", function() { alert("تم النقر!"); })
→ تنفيذ حدث عند النقر على العنصر.
هـ. إضافة وحذف عناصر
document.createElement("div") →
إنشاء عنصر جديد.
parentElement.appendChild(newElement) →
إضافة عنصر داخل عنصر آخر.
element.remove() →
حذف العنصر من الصفحة.
---
4. مثال عملي
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>مثال على DOM</title>
</head>
<body>
<h1 id="title">مرحبا بك!</h1>
<button onclick="changeText()">اضغط هنا</button>
<script>
function changeText() {
document.getElementById("title").textContent = "تم التغيير!";
}
</script>
</body>
</html>
شرح الكود:
1. لدينا عنوان <h1> يحتوي على نص.
2. عند الضغط على الزر، يتم استدعاء changeText().
3. تستبدل الدالة changeText() النص الموجود في <h1> بنص جديد.
---
5. لماذا الـ DOM مهم؟
يمكنك التفاعل مع عناصر الصفحة ديناميكيًا دون الحاجة لإعادة تحميل الصفحة.
يستخدم في تطوير تطبيقات الويب التفاعلية مثل تغيير المحتوى، وإضافة الرسوم المتحركة، والتفاعل مع المستخدم.
ضروري في مكتبات وأُطر العمل الحديثة مثل React.js و Vue.js التي تعتمد على مفهوم Virtual DOM لتحسين الأداء.
1. ما هو الـ DOM؟
DOM هو اختصار لـ Document Object Model، وهو عبارة عن واجهة برمجية تمثل هيكلة مستندات الويب (HTML أو XML) على هيئة شجرة من الكائنات (Objects)، بحيث يمكن التفاعل معها برمجيًا باستخدام JavaScript أو لغات أخرى.
2. كيف يعمل الـ DOM؟
عندما يقوم المتصفح بتحميل صفحة ويب، فإنه يقوم بتحويل ملف HTML إلى شجرة DOM تتكون من عناصر (Nodes) تمثل كل عنصر في الصفحة، مثل:
العناصر (Elements) مثل <div>، <p>، <h1>، <img>...
النصوص (Text Nodes) وهي المحتوى النصي داخل العناصر.
السمات (Attributes Nodes) مثل class="box" أو id="header".
بمجرد أن يصبح DOM جاهزًا، يمكن التعديل عليه وإجراء تغييرات على الصفحة باستخدام JavaScript.
---
3. كيفية التفاعل مع DOM باستخدام JavaScript
بما أن DOM هو كائن (Object)، فيمكن الوصول إلى عناصره وتعديلها باستخدام JavaScript من خلال عدة طرق، مثل:
أ. الوصول إلى العناصر (Selecting Elements)
يمكنك اختيار العناصر في الصفحة باستخدام:
document.getElementById("myElement") → لاختيار عنصر بواسطة ID.
document.getElementsByClassName("myClass") → لاختيار العناصر بواسطة Class.
document.getElementsByTagName("p") → لاختيار جميع العناصر من نوع معين.
document.querySelector(".myClass") → لاختيار أول عنصر مطابق للبحث.
document.querySelectorAll("p") → لاختيار جميع العناصر المطابقة.
ب. تعديل محتوى العناصر
element.innerHTML = "مرحبا" → يغير المحتوى الداخلي لعنصر.
element.textContent = "مرحبا" → يغير النص فقط بدون HTML.
ج. تغيير الأنماط (CSS)
element.style.color = "red" → تغيير لون النص.
element.style.backgroundColor = "blue" → تغيير لون الخلفية.
د. التعامل مع الأحداث (Events)
element.addEventListener("click", function() { alert("تم النقر!"); })
→ تنفيذ حدث عند النقر على العنصر.
هـ. إضافة وحذف عناصر
document.createElement("div") →
إنشاء عنصر جديد.
parentElement.appendChild(newElement) →
إضافة عنصر داخل عنصر آخر.
element.remove() →
حذف العنصر من الصفحة.
---
4. مثال عملي
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<title>مثال على DOM</title>
</head>
<body>
<h1 id="title">مرحبا بك!</h1>
<button onclick="changeText()">اضغط هنا</button>
<script>
function changeText() {
document.getElementById("title").textContent = "تم التغيير!";
}
</script>
</body>
</html>
شرح الكود:
1. لدينا عنوان <h1> يحتوي على نص.
2. عند الضغط على الزر، يتم استدعاء changeText().
3. تستبدل الدالة changeText() النص الموجود في <h1> بنص جديد.
---
5. لماذا الـ DOM مهم؟
يمكنك التفاعل مع عناصر الصفحة ديناميكيًا دون الحاجة لإعادة تحميل الصفحة.
يستخدم في تطوير تطبيقات الويب التفاعلية مثل تغيير المحتوى، وإضافة الرسوم المتحركة، والتفاعل مع المستخدم.
ضروري في مكتبات وأُطر العمل الحديثة مثل React.js و Vue.js التي تعتمد على مفهوم Virtual DOM لتحسين الأداء.
This media is not supported in your browser
VIEW IN TELEGRAM
Object fit CSS
This media is not supported in your browser
VIEW IN TELEGRAM
3 Ways to center a div
أهم وسوم الوسائط في HTML5 مع شرح لكل منها:
1. <audio>
يستخدم لتضمين وتشغيل الملفات الصوتية على صفحات الويب.
السمات المهمة:
controls:
لإظهار عناصر التحكم بالصوت مثل التشغيل والإيقاف.
autoplay:
لتشغيل الصوت تلقائيًا عند تحميل الصفحة.
loop:
لتكرار تشغيل الصوت تلقائيًا.
muted:
لكتم الصوت افتراضيًا.
src:
لتحديد مصدر الملف الصوتي (يمكن استخدام <source> بدلًا منه).
مثال:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
متصفحك لا يدعم عنصر الصوت.
</audio>
---
2. <video>
يستخدم لتضمين وتشغيل مقاطع الفيديو في صفحات الويب.
السمات المهمة:
controls:
لإظهار عناصر التحكم بالفيديو.
autoplay:
لتشغيل الفيديو تلقائيًا.
loop:
لتكرار تشغيل الفيديو.
muted:
لجعل الفيديو مكتومًا افتراضيًا.
poster:
لتحديد صورة تُعرض قبل بدء تشغيل الفيديو.
src:
لتحديد مصدر الفيديو (يمكن استخدام <source> بدلًا منه).
مثال:
<video controls width="600" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
متصفحك لا يدعم تشغيل الفيديو.
</video>
---
3. <source>
يُستخدم داخل <audio> أو <video> لإضافة مصادر متعددة للملف نفسه، بحيث يختار المتصفح التنسيق المناسب.
مثال داخل <video>:
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
متصفحك لا يدعم تشغيل الفيديو.
</video>
مثال داخل <audio>:
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
متصفحك لا يدعم تشغيل الصوت.
</audio>
---
4. <track>
يُستخدم لإضافة ترجمات مصاحبة أو وصف صوتي أو ترجمة توضيحية داخل <video>.
السمات المهمة:
kind:
يحدد نوع الترجمة (مثل "subtitles" أو "captions").
src:
يحدد ملف الترجمة (VTT format).
srclang:
يحدد لغة الترجمة (مثل "en" للإنجليزية أو "ar" للعربية).
label:
يحدد اسم الترجمة المعروضة في قائمة الترجمة.
مثال:
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_ar.vtt" kind="subtitles" srclang="ar" label="Arabic">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>
1. <audio>
يستخدم لتضمين وتشغيل الملفات الصوتية على صفحات الويب.
السمات المهمة:
controls:
لإظهار عناصر التحكم بالصوت مثل التشغيل والإيقاف.
autoplay:
لتشغيل الصوت تلقائيًا عند تحميل الصفحة.
loop:
لتكرار تشغيل الصوت تلقائيًا.
muted:
لكتم الصوت افتراضيًا.
src:
لتحديد مصدر الملف الصوتي (يمكن استخدام <source> بدلًا منه).
مثال:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
متصفحك لا يدعم عنصر الصوت.
</audio>
---
2. <video>
يستخدم لتضمين وتشغيل مقاطع الفيديو في صفحات الويب.
السمات المهمة:
controls:
لإظهار عناصر التحكم بالفيديو.
autoplay:
لتشغيل الفيديو تلقائيًا.
loop:
لتكرار تشغيل الفيديو.
muted:
لجعل الفيديو مكتومًا افتراضيًا.
poster:
لتحديد صورة تُعرض قبل بدء تشغيل الفيديو.
src:
لتحديد مصدر الفيديو (يمكن استخدام <source> بدلًا منه).
مثال:
<video controls width="600" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
متصفحك لا يدعم تشغيل الفيديو.
</video>
---
3. <source>
يُستخدم داخل <audio> أو <video> لإضافة مصادر متعددة للملف نفسه، بحيث يختار المتصفح التنسيق المناسب.
مثال داخل <video>:
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
متصفحك لا يدعم تشغيل الفيديو.
</video>
مثال داخل <audio>:
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
متصفحك لا يدعم تشغيل الصوت.
</audio>
---
4. <track>
يُستخدم لإضافة ترجمات مصاحبة أو وصف صوتي أو ترجمة توضيحية داخل <video>.
السمات المهمة:
kind:
يحدد نوع الترجمة (مثل "subtitles" أو "captions").
src:
يحدد ملف الترجمة (VTT format).
srclang:
يحدد لغة الترجمة (مثل "en" للإنجليزية أو "ar" للعربية).
label:
يحدد اسم الترجمة المعروضة في قائمة الترجمة.
مثال:
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_ar.vtt" kind="subtitles" srclang="ar" label="Arabic">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>
This media is not supported in your browser
VIEW IN TELEGRAM
Linear Gradient CSS