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
This media is not supported in your browser
VIEW IN TELEGRAM
Padding vs Margin CSS
This media is not supported in your browser
VIEW IN TELEGRAM
Hover Transition HTML & CSS
This media is not supported in your browser
VIEW IN TELEGRAM
Searchable Drop Down List HTML
This media is not supported in your browser
VIEW IN TELEGRAM
Loading Lazy HTML
This media is not supported in your browser
VIEW IN TELEGRAM
Text Animation CSS
Web Development
Photo
الفرق بين Semantic HTML و Non-Semantic HTML
1. Semantic HTML (HTML الدلالي)
يشير إلى العناصر التي تحمل معنى واضحًا يعبر عن محتواها ووظيفتها.
يساعد في تحسين إمكانية الوصول (Accessibility) وتحسين محركات البحث (SEO).
يسهل على المطورين والمتصفحات ومحركات البحث فهم بنية الصفحة.
أمثلة:
<header>العنوان الرئيسي</header>
<nav>روابط التنقل</nav>
<article>مقال</article>
<section>قسم من المحتوى</section>
<footer>التذييل</footer>
2. Non-Semantic HTML (HTML غير الدلالي)
لا يعطي أي دلالة عن محتواه، بل يعتمد فقط على الشكل والتنسيق.
يحتاج المطورون إلى إضافة class أو id لشرح وظيفته.
يصعب فهمه بالنسبة لمحركات البحث والأشخاص ذوي الاحتياجات الخاصة.
أمثلة:
<div class="header">العنوان الرئيسي</div>
<span class="nav">روابط التنقل</span>
<div class="article">مقال</div>
<div class="footer">التذييل</div>
1. Semantic HTML (HTML الدلالي)
يشير إلى العناصر التي تحمل معنى واضحًا يعبر عن محتواها ووظيفتها.
يساعد في تحسين إمكانية الوصول (Accessibility) وتحسين محركات البحث (SEO).
يسهل على المطورين والمتصفحات ومحركات البحث فهم بنية الصفحة.
أمثلة:
<header>العنوان الرئيسي</header>
<nav>روابط التنقل</nav>
<article>مقال</article>
<section>قسم من المحتوى</section>
<footer>التذييل</footer>
2. Non-Semantic HTML (HTML غير الدلالي)
لا يعطي أي دلالة عن محتواه، بل يعتمد فقط على الشكل والتنسيق.
يحتاج المطورون إلى إضافة class أو id لشرح وظيفته.
يصعب فهمه بالنسبة لمحركات البحث والأشخاص ذوي الاحتياجات الخاصة.
أمثلة:
<div class="header">العنوان الرئيسي</div>
<span class="nav">روابط التنقل</span>
<div class="article">مقال</div>
<div class="footer">التذييل</div>
This media is not supported in your browser
VIEW IN TELEGRAM
Sort function in JS
Best way to center a div:-
Using flexbox
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Div - Flexbox</title>
<style>
.parent {
display: flex;
justify-content: center;
/* أفقيًا */
align-items: center;
/* عموديًا */
height: 100vh;
background-color: #f0f0f0;
}
.child {
width: 200px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Centered</div>
</div>
</body>
</html>
Using flexbox
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Div - Flexbox</title>
<style>
.parent {
display: flex;
justify-content: center;
/* أفقيًا */
align-items: center;
/* عموديًا */
height: 100vh;
background-color: #f0f0f0;
}
.child {
width: 200px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Centered</div>
</div>
</body>
</html>
com_ansm_anwriter_55_61800112_c288bbfd145745397d887c1c44ff6904.apk
3.6 MB
anWriter Free
CSS & HTML & JavaScript Editor
CSS & HTML & JavaScript Editor
CodePen: Online Code Editor and Front End Web Developer Community
https://codepen.io/
https://codepen.io/
codepen.io
CodePen – Online Code Editor For Building & Deploying Websites
Build, share & learn with CodePen 2.0, the best community for developers with an all new online code editor featuring a file system, compiler, realtime & async collaboration, deployment, and more.
This media is not supported in your browser
VIEW IN TELEGRAM
Building glass login page in one minute
HTML & CSS
HTML & CSS
This media is not supported in your browser
VIEW IN TELEGRAM
Building digital clock using
HTML & CSS & JavaScript in one minute
HTML & CSS & JavaScript in one minute