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
Web Development
Photo
يجب أن يكون الموقع مستجيبًا (Responsive) للأسباب التالية:
1. تحسين تجربة المستخدم (UX): يضمن الموقع المستجيب تجربة سلسة للمستخدمين عبر مختلف الأجهزة (كمبيوتر، هاتف، تابلت) دون الحاجة إلى تكبير أو تمرير غير ضروري.
2. تحسين ترتيب الموقع في محركات البحث (SEO): تفضّل جوجل المواقع المستجيبة، مما يحسن ترتيبها في نتائج البحث.
3. الوصول إلى جمهور أوسع: يزداد عدد المستخدمين الذين يتصفحون الإنترنت عبر الهواتف الذكية، لذا فإن الموقع المستجيب يساعد في استهدافهم بفعالية.
4. توفير الوقت والجهد في التطوير والصيانة: بدلاً من إنشاء مواقع منفصلة لأجهزة مختلفة، يمكن لموقع واحد مستجيب التكيف مع جميع الشاشات بسهولة.
5. زيادة معدل التحويل (Conversion Rate): سهولة التصفح على الأجهزة المختلفة تقلل من معدل الارتداد (Bounce Rate) وتزيد من فرص التفاعل والمبيعات.
6. التوافق مع معايير الويب الحديثة: يلتزم التصميم المستجيب بتقنيات CSS وHTML الحديثة، مما يجعله أكثر كفاءة واستدامة.
1. تحسين تجربة المستخدم (UX): يضمن الموقع المستجيب تجربة سلسة للمستخدمين عبر مختلف الأجهزة (كمبيوتر، هاتف، تابلت) دون الحاجة إلى تكبير أو تمرير غير ضروري.
2. تحسين ترتيب الموقع في محركات البحث (SEO): تفضّل جوجل المواقع المستجيبة، مما يحسن ترتيبها في نتائج البحث.
3. الوصول إلى جمهور أوسع: يزداد عدد المستخدمين الذين يتصفحون الإنترنت عبر الهواتف الذكية، لذا فإن الموقع المستجيب يساعد في استهدافهم بفعالية.
4. توفير الوقت والجهد في التطوير والصيانة: بدلاً من إنشاء مواقع منفصلة لأجهزة مختلفة، يمكن لموقع واحد مستجيب التكيف مع جميع الشاشات بسهولة.
5. زيادة معدل التحويل (Conversion Rate): سهولة التصفح على الأجهزة المختلفة تقلل من معدل الارتداد (Bounce Rate) وتزيد من فرص التفاعل والمبيعات.
6. التوافق مع معايير الويب الحديثة: يلتزم التصميم المستجيب بتقنيات CSS وHTML الحديثة، مما يجعله أكثر كفاءة واستدامة.