Web Development CYS
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>
👨💻2
أهم وسوم الوسائط في 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>
👍2
Web Development CYS
Final Project Web Development CYS 2025-2026.pdf
إلى جميع الطلاب
بداية من الأسبوع القادم سنبدأ بمتابعة المشروع
المطلوب منكم تجهيز ال ٧ الصفحات بلغة HTML فقط كما تم توضيحه بالملف المرفق سابقًا
تنوية:-
الطالب الذي يصل الأسبوع القادم ولم يبداء بالمشروع سيتم الخصم عليه
بداية من الأسبوع القادم سنبدأ بمتابعة المشروع
المطلوب منكم تجهيز ال ٧ الصفحات بلغة HTML فقط كما تم توضيحه بالملف المرفق سابقًا
تنوية:-
الطالب الذي يصل الأسبوع القادم ولم يبداء بالمشروع سيتم الخصم عليه
👍4🫡3
أنواع CSS
هناك ثلاثة أنواع رئيسية لاستخدام CSS في صفحة HTML:
1. Inline CSS (الأنماط الداخلية)
يتم كتابة الأنماط مباشرة داخل الوسوم (tags) في ملف HTML.
تستخدم خاصية style داخل الوسم.
مثال:
<p style="color: red; font-size: 18px;">هذه فقرة بلون أحمر وحجم خط 18px.</p>
الميزات:
سهل وسريع للتعديلات الصغيرة.
يؤثر فقط على العنصر المحدد.
العيوب:
غير عملي مع المشاريع الكبيرة.
يصعب الصيانة والتعديل لاحقًا.
2. Internal CSS (الأنماط الداخلية في رأس الصفحة)
يتم كتابة CSS داخل وسم <style> في رأس الصفحة (بين <head> و </head>).
مثال:
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
الميزات:
مفيد لتنسيق صفحة واحدة فقط.
منظم أكثر من inline.
العيوب:
لا يمكن إعادة استخدامه عبر صفحات متعددة.
3. External CSS (الأنماط الخارجية في ملف منفصل)
يتم كتابة CSS في ملف منفصل بامتداد .css.
يتم ربط الملف بصفحة HTML باستخدام وسم <link> داخل <head>.
مثال لملف HTML:
<head>
<link rel="stylesheet" href="style.css">
</head>
مثال لملف style.css:
p {
color: green;
font-weight: bold;
}
الميزات:
الأفضل للمشاريع الكبيرة.
يسهل إعادة الاستخدام والصيانة.
يتم تحميله مرة واحدة ويوفر الأداء.
العيوب:
يحتاج إلى تحميل ملف خارجي.
CSS Syntax (بنية CSS)
بنية CSS تتكون من:
selector {
property: value;
}
شرح المكونات:
العنصر الشرح
selector هو العنصر الذي تريد تنسيقه (مثل p, div, .class, #id).
property خاصية CSS مثل color, font-size, margin.
value القيمة التي تريد تعيينها للخاصية مثل red, 20px, center.
مثال:
h1 {
color: red;
text-align: center;
font-size: 30px;
}
هذا الكود يجعل كل عناصر h1 باللون الأحمر، ومحاذاة في الوسط، وحجم الخط 30 بكسل.
Inline CSS
كما ذكرنا، هو استخدام CSS مباشرة داخل الوسوم.
مثال عملي:
<button style="background-color: green; color: white; padding: 10px;">اضغط هنا</button>
التفسير:
style="..."
يحتوي على مجموعة خصائص CSS.
background-color: green; تجعل خلفية الزر خضراء.
color: white; تجعل لون النص أبيض.
padding: 10px; تضيف مسافة داخلية داخل الزر.
هناك ثلاثة أنواع رئيسية لاستخدام CSS في صفحة HTML:
1. Inline CSS (الأنماط الداخلية)
يتم كتابة الأنماط مباشرة داخل الوسوم (tags) في ملف HTML.
تستخدم خاصية style داخل الوسم.
مثال:
<p style="color: red; font-size: 18px;">هذه فقرة بلون أحمر وحجم خط 18px.</p>
الميزات:
سهل وسريع للتعديلات الصغيرة.
يؤثر فقط على العنصر المحدد.
العيوب:
غير عملي مع المشاريع الكبيرة.
يصعب الصيانة والتعديل لاحقًا.
2. Internal CSS (الأنماط الداخلية في رأس الصفحة)
يتم كتابة CSS داخل وسم <style> في رأس الصفحة (بين <head> و </head>).
مثال:
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
الميزات:
مفيد لتنسيق صفحة واحدة فقط.
منظم أكثر من inline.
العيوب:
لا يمكن إعادة استخدامه عبر صفحات متعددة.
3. External CSS (الأنماط الخارجية في ملف منفصل)
يتم كتابة CSS في ملف منفصل بامتداد .css.
يتم ربط الملف بصفحة HTML باستخدام وسم <link> داخل <head>.
مثال لملف HTML:
<head>
<link rel="stylesheet" href="style.css">
</head>
مثال لملف style.css:
p {
color: green;
font-weight: bold;
}
الميزات:
الأفضل للمشاريع الكبيرة.
يسهل إعادة الاستخدام والصيانة.
يتم تحميله مرة واحدة ويوفر الأداء.
العيوب:
يحتاج إلى تحميل ملف خارجي.
CSS Syntax (بنية CSS)
بنية CSS تتكون من:
selector {
property: value;
}
شرح المكونات:
العنصر الشرح
selector هو العنصر الذي تريد تنسيقه (مثل p, div, .class, #id).
property خاصية CSS مثل color, font-size, margin.
value القيمة التي تريد تعيينها للخاصية مثل red, 20px, center.
مثال:
h1 {
color: red;
text-align: center;
font-size: 30px;
}
هذا الكود يجعل كل عناصر h1 باللون الأحمر، ومحاذاة في الوسط، وحجم الخط 30 بكسل.
Inline CSS
كما ذكرنا، هو استخدام CSS مباشرة داخل الوسوم.
مثال عملي:
<button style="background-color: green; color: white; padding: 10px;">اضغط هنا</button>
التفسير:
style="..."
يحتوي على مجموعة خصائص CSS.
background-color: green; تجعل خلفية الزر خضراء.
color: white; تجعل لون النص أبيض.
padding: 10px; تضيف مسافة داخلية داخل الزر.
❤4
ما أكثر ما يساعدك على فهم الدروس العملية بشكل أفضل؟
Final Results
23%
اسلوب الشرح المباشر السلس والواضح
45%
الأمثلة العملية والتطبيقات البحته
16%
دعم المدرس ومتابعته المستمرة
16%
المصادر الإضافية والشروحات الخارجية( قنوات التيليجرام )
❤8
تنويه هام:-
نظرًا للتفاوت في في جودة المستوى
سيتم العودة الأسبوع القادم لتكملة تمارين على HTML
اما ال CSS سنعود إليها بعد أن يتم شرحها نظريًا مع د. بكيل
نظرًا للتفاوت في في جودة المستوى
سيتم العودة الأسبوع القادم لتكملة تمارين على HTML
اما ال CSS سنعود إليها بعد أن يتم شرحها نظريًا مع د. بكيل
🫡3❤1👍1
Forwarded from Web Development CYS
Web Development CYS
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>
❤2👍2👏1
Forwarded from Web Development CYS
أنواع CSS
هناك ثلاثة أنواع رئيسية لاستخدام CSS في صفحة HTML:
1. Inline CSS (الأنماط الداخلية)
يتم كتابة الأنماط مباشرة داخل الوسوم (tags) في ملف HTML.
تستخدم خاصية style داخل الوسم.
مثال:
<p style="color: red; font-size: 18px;">هذه فقرة بلون أحمر وحجم خط 18px.</p>
الميزات:
سهل وسريع للتعديلات الصغيرة.
يؤثر فقط على العنصر المحدد.
العيوب:
غير عملي مع المشاريع الكبيرة.
يصعب الصيانة والتعديل لاحقًا.
2. Internal CSS (الأنماط الداخلية في رأس الصفحة)
يتم كتابة CSS داخل وسم <style> في رأس الصفحة (بين <head> و </head>).
مثال:
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
الميزات:
مفيد لتنسيق صفحة واحدة فقط.
منظم أكثر من inline.
العيوب:
لا يمكن إعادة استخدامه عبر صفحات متعددة.
3. External CSS (الأنماط الخارجية في ملف منفصل)
يتم كتابة CSS في ملف منفصل بامتداد .css.
يتم ربط الملف بصفحة HTML باستخدام وسم <link> داخل <head>.
مثال لملف HTML:
<head>
<link rel="stylesheet" href="style.css">
</head>
مثال لملف style.css:
p {
color: green;
font-weight: bold;
}
الميزات:
الأفضل للمشاريع الكبيرة.
يسهل إعادة الاستخدام والصيانة.
يتم تحميله مرة واحدة ويوفر الأداء.
العيوب:
يحتاج إلى تحميل ملف خارجي.
CSS Syntax (بنية CSS)
بنية CSS تتكون من:
selector {
property: value;
}
شرح المكونات:
العنصر الشرح
selector هو العنصر الذي تريد تنسيقه (مثل p, div, .class, #id).
property خاصية CSS مثل color, font-size, margin.
value القيمة التي تريد تعيينها للخاصية مثل red, 20px, center.
مثال:
h1 {
color: red;
text-align: center;
font-size: 30px;
}
هذا الكود يجعل كل عناصر h1 باللون الأحمر، ومحاذاة في الوسط، وحجم الخط 30 بكسل.
Inline CSS
كما ذكرنا، هو استخدام CSS مباشرة داخل الوسوم.
مثال عملي:
<button style="background-color: green; color: white; padding: 10px;">اضغط هنا</button>
التفسير:
style="..."
يحتوي على مجموعة خصائص CSS.
background-color: green; تجعل خلفية الزر خضراء.
color: white; تجعل لون النص أبيض.
padding: 10px; تضيف مسافة داخلية داخل الزر.
هناك ثلاثة أنواع رئيسية لاستخدام CSS في صفحة HTML:
1. Inline CSS (الأنماط الداخلية)
يتم كتابة الأنماط مباشرة داخل الوسوم (tags) في ملف HTML.
تستخدم خاصية style داخل الوسم.
مثال:
<p style="color: red; font-size: 18px;">هذه فقرة بلون أحمر وحجم خط 18px.</p>
الميزات:
سهل وسريع للتعديلات الصغيرة.
يؤثر فقط على العنصر المحدد.
العيوب:
غير عملي مع المشاريع الكبيرة.
يصعب الصيانة والتعديل لاحقًا.
2. Internal CSS (الأنماط الداخلية في رأس الصفحة)
يتم كتابة CSS داخل وسم <style> في رأس الصفحة (بين <head> و </head>).
مثال:
<head>
<style>
p {
color: blue;
font-size: 20px;
}
</style>
</head>
الميزات:
مفيد لتنسيق صفحة واحدة فقط.
منظم أكثر من inline.
العيوب:
لا يمكن إعادة استخدامه عبر صفحات متعددة.
3. External CSS (الأنماط الخارجية في ملف منفصل)
يتم كتابة CSS في ملف منفصل بامتداد .css.
يتم ربط الملف بصفحة HTML باستخدام وسم <link> داخل <head>.
مثال لملف HTML:
<head>
<link rel="stylesheet" href="style.css">
</head>
مثال لملف style.css:
p {
color: green;
font-weight: bold;
}
الميزات:
الأفضل للمشاريع الكبيرة.
يسهل إعادة الاستخدام والصيانة.
يتم تحميله مرة واحدة ويوفر الأداء.
العيوب:
يحتاج إلى تحميل ملف خارجي.
CSS Syntax (بنية CSS)
بنية CSS تتكون من:
selector {
property: value;
}
شرح المكونات:
العنصر الشرح
selector هو العنصر الذي تريد تنسيقه (مثل p, div, .class, #id).
property خاصية CSS مثل color, font-size, margin.
value القيمة التي تريد تعيينها للخاصية مثل red, 20px, center.
مثال:
h1 {
color: red;
text-align: center;
font-size: 30px;
}
هذا الكود يجعل كل عناصر h1 باللون الأحمر، ومحاذاة في الوسط، وحجم الخط 30 بكسل.
Inline CSS
كما ذكرنا، هو استخدام CSS مباشرة داخل الوسوم.
مثال عملي:
<button style="background-color: green; color: white; padding: 10px;">اضغط هنا</button>
التفسير:
style="..."
يحتوي على مجموعة خصائص CSS.
background-color: green; تجعل خلفية الزر خضراء.
color: white; تجعل لون النص أبيض.
padding: 10px; تضيف مسافة داخلية داخل الزر.
❤1👍1