Sokkary | Code3arabi

HTML - السمات الجديدة للعناصر (HTML5 New Attributes) قدّمت HTML5 مجموعة من السمات (Attributes) الجديدة التي تعزز تجربة المستخدم وتحسن التفاعل مع العناصر. هذه السمات يمكن استخدامها مع عناصر مثل <input> و <form> و <video> وغيرها. 🔸 السمات الجديدة المهمة السمة الوصف autofocus تُحدد أن العنصر يجب أن يحصل على التركيز تلقائيًا عند تحميل الصفحة. placeholder عرض نص تلميحي داخل حقل الإدخال حتى يتم إدخال قيمة. required تجعل تعبئة الحقل إلزاميًا قبل إرسال النموذج. form تربط عنصر إدخال بنموذج معين باستخدام id . formaction تُحدد عنوان URL مختلف لإرسال البيانات عند الضغط على زر معين. formenctype تُحدد طريقة تشفير البيانات المرسلة (مثل multipart/form-data ). formmethod تُحدد طريقة الإرسال: GET أو POST . formtarget تُحدد النافذة أو الإطار الذي سيعرض...

HTML - SVG الرسوميات عنصر <svg> في HTML يُستخدم لإنشاء رسومات تعتمد على المتجهات (Vector Graphics) مثل الدوائر، المستطيلات، الخطوط، والنصوص. الرسوميات بـ SVG تُحافظ على جودتها عند التكبير أو التصغير. 🔹 الفرق بين SVG و Canvas SVG : يعتمد على العناصر (عنصر لكل شكل مرسوم). Canvas : يعتمد على البكسلات (لا يمكن تعديل الأشكال بعد الرسم إلا بإعادة الرسم). SVG مناسب للرسوميات التفاعلية، والمخططات الثابتة. Canvas مناسب للألعاب والرسوم المتغيرة بشكل مستمر. 🧱 الشكل الأساسي لعنصر SVG <svg width="300" height="200"> ... الأشكال هنا ... </svg> 🧪 مثال: رسم مستطيل <svg width="300" height="100"> <rect width="300" height="100" style="fill:blue;" /> </svg> 🧪 مثال: رسم دائرة <svg width="200" height="200"> <circle cx="100" cy="100" r="80" fill="green" /> </svg> 🧪 مثال: رس...

HTML - عنصر <canvas> للرسم والرسوميات عنصر <canvas> يُستخدم في HTML5 لإنشاء منطقة رسومية يمكن الرسم عليها باستخدام JavaScript. يتم استخدامه في تطبيقات مثل الرسوم التفاعلية، الألعاب، المخططات، والتصميمات الديناميكية. 🧱 الشكل الأساسي لعنصر canvas <canvas id="myCanvas" width="300" height="150"> المتصفح لا يدعم عنصر canvas. </canvas> 🔹 الرسومات لا تظهر إلا بعد التعامل مع العنصر باستخدام JavaScript. 🧪 مثال: رسم مستطيل بسيط <canvas id="myCanvas" width="300" height="150"></canvas> <script> const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); ctx.fillStyle = "#009578"; ctx.fillRect(50, 30, 200, 100); </script> 🖌️ أهم دوال الرسم في canvas fillRect(x, y, width, height) : لرسم مستطيل ملون. strokeRect(x, y, width, height) : لرسم مستطيل بإطار فقط. clearRect(x, y, width, hei...

HTML - إدخال البريد الإلكتروني (Email Input) عنصر <input type="email"> يُستخدم لإنشاء حقل لإدخال عنوان بريد إلكتروني، ويتضمن تحققًا تلقائيًا من التنسيق الصحيح للبريد الإلكتروني عند الإرسال. 📧 لماذا نستخدم <input type="email">؟ للتحقق من تنسيق البريد قبل إرسال النموذج. لتوفير تجربة مستخدم محسنة عند استخدام لوحة المفاتيح على الأجهزة الذكية. للاستفادة من ميزة التحقق التلقائي في HTML5 بدون JavaScript. ✅ الصيغة الأساسية <input type="email" name="user_email"> 🧪 مثال بسيط <form action="/submit" method="post"> <label for="email">أدخل بريدك الإلكتروني:</label> <input type="email" id="email" name="email"> <input type="submit" value="إرسال"> </form> ⚙️ خصائص مفيدة required : يجعل إدخال البريد الإلكتروني إلزاميًا. placeholder : يعرض نصًا إرشاديًا داخل الحقل. multiple : يس...

HTML - إدخال الوقت (Time Input) عنصر <input type="time"> يُستخدم لإنشاء حقل لإدخال الوقت (ساعة ودقائق)، وغالبًا ما يظهر على شكل واجهة اختيار الوقت في المتصفحات التي تدعمه. ⏰ متى تستخدم <input type="time">؟ عند حجز المواعيد أو الجداول الزمنية. لإدخال ساعات العمل أو حضور الفعاليات. لتحديد وقت تنفيذ مهمة أو حدث. ✅ الصيغة الأساسية <input type="time" name="myTime"> 🧪 مثال بسيط <form> <label for="appt">اختر وقتًا للاجتماع:</label> <input type="time" id="appt" name="appt"> </form> ⚙️ خصائص إضافية مهمة min : يحدد أقل وقت مسموح به (مثال: 09:00 ). max : يحدد أعلى وقت مسموح به (مثال: 18:00 ). step : يحدد الفاصل الزمني بين الخيارات (بالثواني). 📌 مثال بحدود زمنية وخطوة <label for="appt">حدد وقتًا بين 09:00 و 18:00، كل 30 دقيقة:</label> <input type="time" id="appt" name=...

HTML - إدخال التاريخ (Date Input) عنصر <input type="date"> يُستخدم لإنشاء حقل إدخال يسمح للمستخدم باختيار تاريخ من خلال واجهة تقويم في معظم المتصفحات الحديثة. 📅 متى تستخدم <input type="date">؟ عند الحاجة لإدخال تاريخ ميلاد. تحديد مواعيد الحجز أو الأحداث. ملء استمارات تحتوي على تواريخ معينة. ✅ الصيغة الأساسية <input type="date" name="birthday"> 🧪 مثال بسيط <form> <label for="bday">اختر تاريخ ميلادك:</label> <input type="date" id="bday" name="bday"> </form> ⚙️ خصائص إضافية مهمة min : يحدد أقل تاريخ يمكن اختياره. max : يحدد أعلى تاريخ يمكن اختياره. value : يعرض قيمة افتراضية للتاريخ. 📌 مثال بتحديد مدى زمني <label for="start">اختر تاريخًا بين 2023-01-01 و 2025-12-31:</label> <input type="date" id="start" name="start" value="2024-01-01...

HTML - عناصر HTML5 الجديدة قدّمت HTML5 مجموعة من العناصر الجديدة التي تُستخدم لتحسين تنظيم وبنية الصفحات الإلكترونية بطريقة أكثر دلالة (semantic). تساعد هذه العناصر محركات البحث، ومساعدات الوصول (Accessibility Tools)، والمطورين على فهم أفضل لمحتوى الصفحة. 🔸 أهم العناصر الجديدة في HTML5 <header> — يُستخدم لتحديد رأس (مقدمة) الصفحة أو القسم. <footer> — يُستخدم لتحديد تذييل الصفحة أو القسم. <nav> — يُستخدم لتحديد روابط التنقل داخل الموقع. <section> — يُستخدم لتقسيم المحتوى إلى أقسام منطقية. <article> — يُستخدم لعرض محتوى مستقل مثل التدوينات أو الأخبار. <aside> — يُستخدم للمحتوى الجانبي أو الإعلانات أو الملاحظات الجانبية. <main> — يُحدد المحتوى الأساسي في الصفحة. <figure> و <figcaption> — تُستخدم لعرض الصور مع تعليق توضيحي. <mark> — لتحديد النص المميز. <time> — لتحديد الوقت أو التاريخ. 🧪 مثال توضيحي على استخدام هذه العناصر <!DOCTYPE html> <html> <h...

HTML - DOM 🔸 DOM أو Document Object Model هو تمثيل شجري (Tree Structure) لصفحة HTML داخل المتصفح، ويُتيح للغات البرمجة مثل JavaScript التفاعل مع العناصر وتعديلها. ✅ ما الذي يمكن عمله باستخدام DOM؟ تغيير النص داخل عنصر تغيير خصائص CSS إضافة عناصر أو حذفها الاستجابة للأحداث (مثل الضغط على زر) 📌 الوصول إلى العناصر في DOM يمكن الوصول إلى العناصر باستخدام دوال مثل: getElementById() getElementsByClassName() querySelector() document.getElementById("demo").innerHTML = "تم تغييره بواسطة DOM"; 🧪 مثال عملي <!DOCTYPE html> <html> <body> <p id="demo">مرحبًا بك!</p> <button onclick="changeText()">اضغط هنا</button> <script> function changeText() { document.getElementById("demo").innerHTML = "تم تعديل النص!"; } </script> </body> </html> 🔍 التفاعل مع خصائص CSS يمكنك تغيير نمط عنصر باستخدام style : docum...

HTML - JavaScript 🔸 JavaScript هي لغة برمجة تُستخدم لإضافة التفاعل (Interactivity) إلى صفحات الويب. باستخدام JavaScript يمكن تنفيذ عمليات مثل: التحقق من صحة النماذج قبل إرسالها الاستجابة للنقرات والأحداث تعديل عناصر الصفحة مباشرة (DOM Manipulation) ✅ تضمين JavaScript داخل صفحة HTML يُكتب كود JavaScript عادةً داخل وسم <script> ويمكن وضعه داخل <head> أو قبل نهاية <body> . <!DOCTYPE html> <html> <head> <script> function sayHello() { alert("Hello, World!"); } </script> </head> <body> <button onclick="sayHello()">Click me</button> </body> </html> 📌 ربط ملف JavaScript خارجي يمكنك تخزين كود JavaScript في ملف خارجي بامتداد .js وربطه باستخدام src : <script src="script.js"></script> محتوى ملف script.js : // ملف script.js function sayWelcome() { alert("Welcome!"); } 💡 ملاحظات هامة ...

HTML - Doctype تعريف نوع الوثيقة تعريف نوع الوثيقة <!DOCTYPE> هو أول سطر في مستند HTML، ويُستخدم لإخبار المتصفح بنوع الإصدار من HTML المستخدم، مما يساعد على عرض الصفحة بشكل صحيح ومتوافق. ✅ الصيغة القياسية الحديثة (HTML5): <!DOCTYPE html> ⬅ هذا هو التعريف الرسمي والمبسط لـ HTML5، ويجب أن يكون في أول سطر بأي صفحة HTML. 📌 لماذا نستخدم <!DOCTYPE>؟ لتحديد نوع لغة HTML المستخدمة (مثل HTML5، HTML 4.01، إلخ). لمساعدة المتصفح على تفسير الكود بطريقة متوافقة مع المعايير القياسية. لمنع المتصفح من الدخول في وضع التوافق (Quirks Mode) الذي قد يؤدي إلى عرض غير متوقع. 🧾 أمثلة على أنواع أخرى من DOCTYPE (قديمة): 🔹 HTML 4.01 Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 🔹 HTML 4.01 Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 🔹 XHTML 1.0 Strict: <!DOCT...

💬 HTML - Comments (التعليقات) التعليقات في HTML تُستخدم لكتابة ملاحظات داخل الكود لا يتم عرضها للمستخدم على المتصفح. وهي مفيدة لتوضيح أجزاء من الكود أو لتعطيل جزء معين مؤقتًا أثناء التطوير. ✅ الصيغة العامة للتعليق: <!-- هذا تعليق --> ⬅ يتم وضع التعليق بين <!-- و --> ولا يظهر في صفحة الويب. 🧪 مثال عملي: <!DOCTYPE html> <html> <body> <h1>مرحبًا بكم في موقعي</h1> <!-- هذا عنوان رئيسي للصفحة --> <p>هذه فقرة نصية.</p> <!-- الكود التالي معطل مؤقتًا <p>هذا نص تجريبي لن يتم عرضه.</p> --> </body> </html> 📌 استخدامات التعليقات: توضيح أجزاء من الكود لتسهيل فهمه عند مراجعته لاحقًا. تعطيل جزء من الكود مؤقتًا أثناء التطوير أو التجريب. كتابة تعليمات للمطورين الآخرين الذين يعملون على نفس الكود. ⚠️ ملاحظات: التعليقات لا تُعرض في المتصفح. يُفضل استخدام التعليقات بشكل معتدل لتجنب تشويش الكود. لا تُستخدم التعليقات لإخفاء المعلومات الحساسة لأن الكود يمكن ...

🗺️ HTML Image Maps (خرائط الصور) خرائط الصور (Image Maps) تسمح لك بربط أجزاء مختلفة من الصورة بروابط مختلفة باستخدام عنصر <map> و <area> . ✅ كيف تعمل خريطة الصورة؟ لربط صورة بخريطة، نستخدم الخاصية usemap في عنصر <img> ، ونربطها بـ <map name="mapname"> حيث يتم تحديد المناطق باستخدام <area> . 🧪 مثال عملي: <img src="world-map.jpg" alt="World Map" usemap="#worldmap" width="600" height="400"> <map name="worldmap"> <area shape="rect" coords="34,44,270,350" alt="USA" href="usa.html"> <area shape="circle" coords="337,300,44" alt="Brazil" href="brazil.html"> <area shape="poly" coords="290,172,333,250,300,330,270,250" alt="Africa" href="africa.html"> </map> ⬅ هذا المثال يربط كل منطقة في الصورة برابط مختلف باست...

🌄 الخلفيات باستخدام الصور في HTML لإضافة صورة كخلفية لصفحة ويب أو لعناصر معينة داخل الصفحة، نستخدم خاصية background-image في CSS. ✅ الصيغة الأساسية: body { background-image: url("background.jpg"); } ⬅ هذا الكود يضيف صورة background.jpg كخلفية لكامل الصفحة. 🧪 مثال عملي: <!DOCTYPE html> <html> <head> <style> body { background-image: url("background.jpg"); background-repeat: no-repeat; background-size: cover; } </style> </head> <body> <h1>مرحبًا بك في موقعي!</h1> <p>هذه الصفحة تحتوي على صورة كخلفية.</p> </body> </html> 📌 خصائص إضافية: background-repeat : يتحكم في تكرار الصورة (مثل no-repeat ). background-size : يتحكم في حجم الصورة (مثل cover لملء الصفحة). background-position : لتحديد موقع الصورة داخل العنصر. background-attachment : لتثبيت الصورة أثناء التمرير (مثل fixed ). 🎨 مثال متقدم: body { back...

📺 تضمين فيديوهات YouTube في HTML يمكنك تضمين مقاطع الفيديو من YouTube مباشرة داخل صفحة HTML باستخدام وسم <iframe> . ✅ الصيغة الأساسية: <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> ⬅ فقط استبدل VIDEO_ID بمعرف الفيديو الموجود في رابط YouTube. 🔍 كيف تحصل على رابط التضمين؟ افتح الفيديو على YouTube. اضغط على زر مشاركة (Share) . اختر تضمين (Embed) . انسخ الكود المعروض والصقه في صفحة HTML. 🧪 مثال عملي: <iframe width="560" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscop...

HTML 🔊 تضمين الصوتيات تُستخدم الوسوم <audio> و <source> في HTML لتشغيل الملفات الصوتية على صفحات الويب. ✅ وسم <audio> يُستخدم هذا الوسم لتضمين ملف صوتي، ويمكن للمستخدم التحكم في تشغيله من خلال واجهة المستخدم الخاصة بالمتصفح. 🔸 الصيغة الأساسية: <audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio> ⬅ يتم توفير أكثر من تنسيق صوتي (مثل MP3 و OGG) لضمان التوافق مع جميع المتصفحات. 🎛 أهم الخصائص (Attributes): controls : لعرض أدوات التحكم (تشغيل، إيقاف، مستوى الصوت...) autoplay : لتشغيل الصوت تلقائيًا عند تحميل الصفحة. loop : لإعادة تشغيل الصوت تلقائيًا بعد انتهائه. muted : لكتم الصوت عند بداية التشغيل. preload : يحدد ما إذا كان يجب تحميل الملف الصوتي مسبقًا (none, metadata, auto). 🧪 مثال باستخدام خصائص إضافية: <audio controls autoplay loop muted p...

HTML 🎥 تضمين الفيديوهات تُستخدم الوسوم <video> و <source> في HTML لتضمين وتشغيل مقاطع الفيديو مباشرة داخل صفحات الويب. ✅ وسم <video> هو العنصر الرئيسي المستخدم لتشغيل الفيديو داخل المتصفح. 🔸 الصيغة الأساسية: <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> ⬅ يتم استخدام أكثر من تنسيق فيديو لضمان التوافق مع جميع المتصفحات. 🎛 أهم الخصائص (Attributes): controls : لإظهار أدوات التشغيل (تشغيل، إيقاف مؤقت، مستوى الصوت، إلخ). autoplay : لتشغيل الفيديو تلقائيًا عند تحميل الصفحة. loop : لإعادة تشغيل الفيديو تلقائيًا بعد انتهائه. muted : لجعل الصوت مكتومًا افتراضيًا. poster : لتحديد صورة تُعرض قبل تشغيل الفيديو. preload : لتحديد ما إذا كان يتم تحميل الفيديو مسبقًا أم لا (none, metadata, auto). 🧪 مثال آخر با...

الخطوط في HTML باستخدام CSS (CSS Fonts) الخطوط (Fonts) تلعب دورًا مهمًا في تحسين جاذبية الصفحة وتجربة المستخدم. في HTML، يتم التحكم بالخطوط باستخدام CSS. 🔠 أهم خصائص CSS الخاصة بالخطوط: font-family : لتحديد نوع الخط font-size : لتحديد حجم الخط font-weight : لتحديد سمك الخط font-style : لتحديد نمط الخط (عادي، مائل...) line-height : لتحديد ارتفاع السطر font : اختصار لتجميع خصائص الخط في سطر واحد 🧪 مثال لاستخدام خصائص الخط: p { font-family: Arial, sans-serif; font-size: 18px; font-weight: bold; font-style: italic; line-height: 1.6; } ⬅ هذا الكود يطبق إعدادات مخصصة على كل فقرة <p> . 🌐 استخدام خطوط Google Fonts: يمكنك استيراد خطوط احترافية من Google Fonts لإعطاء مظهر عصري لصفحتك. 🔹 خطوات استخدام Google Fonts: اذهب إلى fonts.google.com اختر الخط الذي تريده (مثلاً: Cairo) انسخ رابط الخط وضعه داخل <head> استخدم اسم الخط في font-family ✅ مثال كامل: <head> <link href="https://fonts.g...

الأيقونات في HTML (HTML Icons) في HTML، يمكن استخدام مكتبات جاهزة لإضافة أيقونات جميلة وسهلة التخصيص مثل: Font Awesome 🔥 Google Material Icons 🌟 ✅ 1. استخدام Font Awesome: Font Awesome توفر آلاف الأيقونات القابلة للتخصيص عبر CSS. 📦 تضمين Font Awesome: <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> 🔹 استخدام أيقونة: <i class="fas fa-home"></i> الصفحة الرئيسية ⬅ fas تعني Font Awesome Solid، و fa-home هي اسم الأيقونة. ✅ 2. استخدام Google Material Icons: Google تقدم مجموعة أيقونات حديثة باسم Material Icons يمكن استخدامها بسهولة. 📦 تضمين Google Icons: <head> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> 🔹 استخدام أيقونة: <i class="material-icons">home</i> ⬅ النص داخل الوسم <i> ...

الربط بين HTML و CSS CSS (Cascading Style Sheets) تُستخدم لتنسيق مظهر صفحات الويب المكتوبة بلغة HTML. يمكن استخدامها لتحديد الألوان، الخطوط، المساحات، الحدود، وغيرها من عناصر التصميم. ✅ طرق استخدام CSS مع HTML: 🔹 1. CSS داخلي (Internal CSS): يُكتب داخل وسم <style> في وسم <head> داخل ملف HTML. <!DOCTYPE html> <html> <head> <style> body { background-color: lightblue; } h1 { color: white; text-align: center; } </style> </head> <body> <h1>مرحبًا بك في موقعي</h1> </body> </html> 🔹 2. CSS خارجي (External CSS): يُكتب في ملف منفصل بامتداد .css ويتم ربطه داخل وسم <head> . <link rel="stylesheet" href="styles.css"> /* محتوى ملف styles.css */ body { background-color: lightblue; } h1 { color: white; text-align: center; } 🔹 3. CSS داخلي في العنصر (Inline CSS): يُكتب داخل وسم HTML باستخدام خاصية style . <h...

ألوان HTML (HTML Colors) في HTML، يمكنك استخدام الألوان لتنسيق النصوص، الخلفيات، الحدود، وأكثر. تُحدد الألوان بإحدى الطرق التالية: بالاسم (Color Name) مثل red ، blue بالقيمة الست عشرية (Hex) مثل #ff0000 بالـ RGB مثل rgb(255,0,0) بالـ HSL مثل hsl(0, 100%, 50%) وأيضًا RGBA و HSLA لإضافة الشفافية ✅ أمثلة على استخدام الألوان في HTML: 🔹 باستخدام أسماء الألوان: <p style="color:red;">هذا النص باللون الأحمر</p> 🔹 باستخدام Hex Code: <p style="color:#00ff00;">هذا النص باللون الأخضر</p> 🔹 باستخدام RGB: <p style="color:rgb(0,0,255);">هذا النص باللون الأزرق</p> 🔹 تغيير لون الخلفية: <div style="background-color:yellow;">خلفية صفراء</div> 🔹 استخدام RGBA مع الشفافية: <div style="background-color:rgba(255, 0, 0, 0.5);">خلفية حمراء بشفافية 50%</div> 📝 ملاحظات مهمة: أسماء الألوان محدودة ولكن كافية في كثير من الحالات. القيم الست ...