المشاركات

عرض الرسائل ذات التصنيف تعلم HTML

دورة HTML - الدرس السادس القوائم و تخطيط الصفحة ( lists and layouts)

صورة
في هذا الدرس سنتعرف مع بعضنا البعض على القوائم وكيف نخطط للصفحة باستخدام لغة HTML القوائم القوائم تنقسم الى نوعين القوائم المرقمة نبدأ القائمة عن طريق الوسم <ol> ثم نغلقه عن طريق الوسم </ol> بين وسم البداية والنهاية نضع عناصر القائمة الخاصة بنا كالتالي <ol> <li>قهوة</li> <li>حليب</li> </ol> قهوة حليب القوائم غير المرقمة بكل بساطة نبدأ القائمة عن طريق الوسم <ul> ثم نغلقه عن طريق الوسم </ul> بين وسم البداية والنهاية نضع عناصر القائمة الخاصة بنا كالتالي <ul> <li>قهوة</li> <li>حليب</li> </ul> القائمة ستظهر بهذا الشكل قهوة حليب تقسيم الصفحة <div> الوسم <div>  هو عبارة عن وسم كتلة و يستخدم لتجميع العناصر و لتقسيم الصفحة لتقسيم صفحتنا على 5 عناصر اساسية باستخدام هذا الوسم، تابعوا معنا المثال التالي <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3....

دورة HTML - الدرس الخامس ( الصور و الجداول )

صورة
<!DOCTYPE html> <html> <body><p> صورة<img src=" https://www.w3schools.com/html/smiley.gif " alt="Smiley face" width="32" height="32"></p><p> صورة متحركة : <img src=" https://www.w3schools.com/html/hackanm.gif " alt="Computer man" width="48" height="48"></p><p> كود وضع صورة متحركة هو نفسه كود وضع صورة ثابتة</p></body> </html> هنا كيفية ظهور الكود :صورة: صورة متحركة :  كود وضع صورة متحركة هو نفسه كود وضع صورة ثابتة صور HTML - وسم <img> :  في لغة ال HTML نعرف الصور عن طريق الوسم <img> هذا الوسم ليس لديه محتوى و ليس لديه وسم اغلاق كما في الوسوم الاخرى من أجل اظهار الصورة داخل الوسم نستعمل src و هي اختصار ل source و يكون داخلها رابط الصورة الصيغة الخاصة بالصور في لغة html :    <img src=" رابط الصورة " alt=" نص "> في رابط الصورة ممكن ...

دورة HTML - الدرس الرابع ( HTML - CSS ستايل )

صورة
 CSS (Cascading Style Sheets) لغة CSS  وهي اللغة التي تستخدم من أجل واجهة صفحات HTML ادخل اكواد CSS في صفحات HTML :  CSS دخلت مجال التنفيذ مع HTML 4 الاصدار الرابع لتوفير وسيلة أفضل من أجل الستايل الخاص بصفحات HTML نستطيع اضافة اكواد CSS الى صفحة HTML بطرق عدة : اولا  داخل عناصر HTML (داخل الوسم ) كود داخلي ( internal) - باستخدام الوسم <style> في عنصر <head> ملف خارجي (external) - عن طريق ملف CSS خارجي الطريقة الأفضل و المستخدمة في معظم المواقع هي ربط صفحات الHTML لملف CSS خارجي و مع ذلك ، في هذا الدرس سنشرح طريقة ادخال اكواد الCSS داخل الوسوم من أجل فهم أكثر لغة CSS و تسهيل الأمثلة ، و هي أيضا سهلة من أجل اضافة الاكواد و تجريبها بنفسك على كل وسم . و سنتعلم كل شيء عن CSS في دورة خاصة باذن الله . طريقة ادخل الاكواد في الوسوم :  كود الCSS داخل الوسم يطبق فقط على عنصر واحد و هو العنصر الذي وضعنا الكود داخله لادخال الكود بهذه الطريقة كل ماعلينا فعله هو وضع اكواد CSS ...

دورة HTML - الدرس الثالث ( HTML head رأس الموقع )

صورة
عنصر ال <head > : العنصر <head> في صفحة HTML هو وعاء لجميع عناصر رأس الموقع ، هذه العناصر التي يمكن أن تحوي سكريبتات ، تعريفات للمتصفح لمعرفة لغة البرمجة و لغة الموقع أيضا ، و كثير من الأمور .

دورة HTML - الدرس الثاني (العناصر -HTML Elements - )

صورة
مرحبا بكم في الدرس الثالث من دورة تعلم لغة البرمجة HTML ان شاء الله تكونوا قد استفدتم من الدروس الماضية ونأكد على التطبيق انطلاقا من هذا الدرس حتى تترسخ المعلومات التي تأخذونها ...

دورة HTML - الدرس الأول ( المحررات + مبادىء أساسية )

صورة
مرحبا بكم في دورة موقع تعلم للغة البرمجة الشهير HTML في هذا الدرس سنتناول مع بعضنا الطريقة التي نكتب بها أكواد HTML و القواعد الأساسية لهذه اللغة بالاضافة إلى كتابة أول صفحة ويب لنا ...

مدخل إلى لغة HTML

صورة
لغة HTML هي لغة برمجة المواقع الأولى و كل مواقع الانترنيت في العالم تقريبا مبنية أساسا على هذه اللغة لغات برمجة الويب جاءت كي تسهل و تسرع تصفح المواقع فتخيلو مثلا انو المواقع مبنية بالصور الحقيقية فاننا لما نريد تصفحها نقوم بتحميل تلك الصور و الكتابات حتى نراها و ذلك سيستغرق وقت طويل جدا حتى تستطيع رؤية موقع واحد اما لغات البرمجة فهي مجرد اكواد لما تترجم في المتصفحات ( firefox او chrome ) تظهر لنا لهذا الشكل . كمثال لنرى مثلا كود صفحة الفيسبوك  ( اضغط ctrl + u ) تظهر صفحة اكود هذا الموقع في هيكلته الحقيقية ولقد صُـنِـعَـت هذه اللغة من قبل مخترع الويب (Tim Berners-Lee)، ثم طُـوِّرت من قبل منظمة (IETF)، والآن أصبحت منظمة الويب العالمية (W3C) هي الراعية لهذه اللغة والمسؤولة عنها. مثال <!DOCTYPE html> <html> <body> <h1>عنوان عريض</h1> <p>فقرة</p> </body>                                         ...