: يدمج كود JavaScript لإضافة التفاعل إلى صفحة الويب.
  • : يتضمن المحتوى الذي سيكون مرئيًا للمستخدمين على صفحة الويب.

    • عناصر HTML شائعة الاستخدام

    إليك بعض عناصر HTML الأساسية التي ستستخدمها بشكل متكرر:

    إنشاء ملف HTML الأول الخاص بك

    لإنشاء ملف HTML، يمكنك استخدام أي محرر نصوص، مثل Notepad أو VS Code. إليك مثال بسيط:

    1. افتح محرر النصوص الخاص بك واكتب الكود التالي:
      HTML Tutorial  
    Example Number 1
      
    Hello, world!
    1. احفظ الملف بامتداد .html (على سبيل المثال، Index.html)
    2. افتح الملف في متصفح الويب الخاص بك لترى أول صفحة ويب بتنسيق HTML أثناء العمل!
    3. لفحص الكود الخاص بك، اضغط على Ctrl Shift C في Google Chrome لفتح أدوات المطور واستكشاف بنية DOM.
    4. انتقل إلى علامة تبويب الشبكة في أدوات المطور وقم بتحديث علامة تبويب المتصفح.

    تجد أن هناك طلب بالاسم الذي قمت بحفظه كما في هذه الصورة.
    \\\"Develop

    في خانة الرد ستجد الكود الذي قمت بكتابته كما في الصورة التالية
    \\\"Develop

    الآن، ما حدث هو أنه بمجرد فتح الملف الذي قمت بحفظه بتنسيق html، بدأ الكمبيوتر في تشغيل الملف في المتصفح. أراد المتصفح أن يظهر شيئًا ما، لذلك أجرى طلبًا للملف الذي تم تشغيله منه. أعطى الملف للمتصفح الكود الخاص بك والذي تم العثور عليه في قسم الاستجابة. نظرًا لأنه كان ملف html، يبدأ المتصفح في قراءة كود HTML من الأعلى إلى الأسفل. تُعرف هذه العملية بالتحليل. أثناء التحليل، يواجه المتصفح علامات HTML مختلفة (مثل ، ، ، وما إلى ذلك) ويبدأ في إنشاء بنية تسمى DOM بناءً على هذه العلامات. عندما يقوم المتصفح بإنشاء DOM، فإنه يعرض المحتوى على شاشتك في نفس الوقت.

    إنشاء جدول

    لنأخذ خطوة أخرى إلى الأمام من خلال إنشاء جدول بسيط بتنسيق HTML:

    1. افتح نفس ملف HTML وأضف الكود التالي داخل علامة :
    Table Example
      
        Name    Power    Is Kurama Present  
      
        Naruto    Rasengan    Yes  
      
        Sasuke    Sharingan    No
    1. احفظ الملف وقم بتحديث المتصفح الخاص بك لرؤية الجدول المعروض.

    لاحظ أنه يتم عرض العنوان بواسطة علامة الفقرة. وبدلاً من ذلك، يمكنك أيضًا استخدام علامة ، والتي ستؤدي إلى توسيط عنوان الجدول. قم بتجربة علامة التسمية التوضيحية وقم بالتحديث لرؤية التغييرات.

    لاحظ أنه يجب استخدام علامة مباشرة بعد علامة الافتتاح

    .

    لقد نجحت الآن في إنشاء جدول أساسي بتنسيق HTML. لا تتردد في تجربة صفوف وأعمدة إضافية لتشعر براحة أكبر عند استخدام صيغة HTML.

    خاتمة

    تهانينا على إكمال خطواتك الأولى في تطوير الويب باستخدام HTML! المفتاح لإتقان HTML هو الممارسة. قم بتجربة عناصر مختلفة، وأنشئ صفحات الويب الخاصة بك، ولا تخف من ارتكاب الأخطاء - فكل خطأ يمثل فرصة للتعلم.

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

    تمت كتابة هذا المقال بواسطة أنانثا كريشنان ، وهو محترف يتمتع بخبرة في كل من تكنولوجيا المعلومات والهندسة الميكانيكية. مع خلفية في تطوير المكدس الكامل وشغف بالأنظمة الميكانيكية والكهربائية، يركز أنانثا كريشنان الآن على إنشاء محتوى تعليمي لمساعدة المبتدئين في مجالات خبرته.

    ","image":"http://www.luping.net/uploads/20240820/172415124366c475cb37fe7.png","datePublished":"2024-08-20T18:54:03+08:00","dateModified":"2024-08-20T18:54:03+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
    "إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
    أدوات على الانترنت
    برنامج تعليمي
    التنقل في الموقع
    برمجة
    الصفحة الأمامية > برمجة > طور نفسك لبناء واجهات مستخدم الويب: فهم جزئي لـ HTML

    طور نفسك لبناء واجهات مستخدم الويب: فهم جزئي لـ HTML

    تم النشر بتاريخ 2024-08-20
    تصفح:255

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

    Develop yourself to build Web UIs: Part Understanding HTML

    HTML ( لغة ترميز النص التشعبي ) هي العمود الفقري لأي صفحة ويب. إنها اللغة القياسية المستخدمة لبناء صفحة ويب، وتحديد كيفية عرض المحتوى في المتصفح. بينما يتم تحديد مظهر الصفحة بواسطة CSS (أوراق الأنماط المتتالية) ووظائفها بواسطة JS (Javascript)، HTML هو المسؤول عن الهيكل الأساسي أو الهيكل.

    قبل الغوص في هذا الجزء من الدورة، من المهم فهم المصطلحات الشهيرة والمتكررة التي سيتم استخدامها في رحلتك. سيساعدك هذا على فهم المفاهيم أثناء تقدمنا ​​(وسيسهل أيضًا على المؤلف شرح الأشياء؛-)).

    فهم المصطلحات

    1. لغة البرمجة: مجموعة من التعليمات المكتوبة بلغة معينة (طريقة لغة برمجة) يمكن للكمبيوتر تنفيذها. تذكر أن الكمبيوتر لا يفهم سوى الكود الثنائي (إما 1 أو 0)، والآن، من أجل جعل الكمبيوتر يفهم المنطق وأيضًا للعثور على مقايضة، قمنا (البشر) بإنشاء لغة برمجة بحيث تكون سهلة منا أن نقوم بالبرمجة وأيضًا أن يفهمها الكمبيوتر.
    2. المترجم: أداة تترجم التعليمات البرمجية المكتوبة بلغة برمجة إلى لغة الآلة التي يستطيع الكمبيوتر فهمها وتنفيذها.
    3. بناء الجملة : القواعد التي تحدد بنية لغة البرمجة. فكر في الأمر على أنه الطريقة التي يتم بها ترتيب الكلمات في الجملة لجعلها ذات معنى.
    4. التعليقات: ملاحظات داخل الكود تشرح ما تفعله أجزاء معينة من الكود. تساعد التعليقات المطورين الآخرين (أو نفسك في المستقبل) على فهم المنطق الكامن وراء الكود الخاص بك.
    5. DOM (نموذج كائن المستند): DOM هو تمثيل يشبه الشجرة لمستند HTML. تصبح كل علامة في HTML الخاص بك عقدة في هذه الشجرة. على سبيل المثال، إذا كان HTML الخاص بك يحتوي على علامة مع علامة

      (فقرة) بداخلها، فسيقوم المتصفح بإنشاء عقدة نص مع عقدة فقرة كعقدة فرعية لها.

    6. الأطفال: سوف تفهم هذا كلما تقدمت. عناصر متداخلة داخل عنصر آخر. على سبيل المثال، في HTML، سيتم اعتبار علامة الفقرة (

      ) ضمن علامة div (

      ) فرعًا لـ div.
    7. عنصر مستوى الكتلة: سيتم تعريفك بهذه المصطلحات أثناء تقدمك. يصف هذا المصطلح عادةً ميزة العنصر بأنه سيأخذ العرض الكامل المتاح.

      8. إطلاق النار مع HTML

      HTML يرمز إلى لغة توصيف النص التشعبي

      • نص تشعبي: يشير إلى قدرة HTML على ربط المستندات المختلفة معًا.

      • لغة الترميز : تستخدم العلامات لتعليق النص، وتحديد كيفية عرضه في المتصفح.

      إليك البنية الأساسية لمستند HTML:

      
  
    HTML Tutorial
      Hello, world!

      • العلامات : في HTML، يتم استخدام العلامات لتحديد العناصر. يتم وضع العلامات بين قوسين، مثل أو

        .

      • العناصر: تتكون من علامة فتح وعلامة إغلاق، والتي قد تحتوي على محتوى. على سبيل المثال،

        Hello, World!

        هو عنصر فقرة.

      هيكل مستند HTML

      يتبع كل مستند HTML بنية أساسية:

      1. : يعلن عن نوع المستند وإصدار HTML.
      2. : العنصر الجذري الذي يضم جميع عناصر HTML الأخرى.
      3. : يحتوي على معلومات تعريفية حول المستند، مثل العنوان والروابط إلى أوراق الأنماط.
      4. : يضبط عنوان صفحة الويب، التي يتم عرضها في شريط عنوان المتصفح أو علامة التبويب.
      5. : يوفر بيانات تعريف حول مستند HTML، مثل مجموعة الأحرف والمؤلف وإعدادات إطار العرض. إنها علامة إغلاق ذاتي.
      6. : يدمج كود CSS لتصميم عناصر HTML.
      7. : يدمج كود JavaScript لإضافة التفاعل إلى صفحة الويب.
      8. : يتضمن المحتوى الذي سيكون مرئيًا للمستخدمين على صفحة الويب.

      عناصر HTML شائعة الاستخدام

      إليك بعض عناصر HTML الأساسية التي ستستخدمها بشكل متكرر:

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

      • إلى
        : العناوين، حيث يكون

        هو المستوى الأعلى و

        هو المستوى الأدنى.

      • : إدراج فاصل أسطر (علامة إغلاق ذاتي — مما يعني أنه ليست هناك حاجة لإغلاق العلامة).
      • : يستخدم لإنشاء نموذج HTML لإدخال المستخدم.
      • : لإنشاء حقل إدخال، يُستخدم عادة داخل النموذج.
      • : لإنشاء قائمة منسدلة.
      • : يربط تسمية نصية بعنصر نموذج.
    : تحديد جدول.
  • : تحديد صف في الجدول.
  • : تحديد خلية في صف الجدول.
  • : يحدد خلية الرأس في صف الجدول.
  • : تحديد قائمة غير مرتبة (تعداد نقطي).
    • : تحديد قائمة مرتبة (مرقمة).
    2. : يحدد عنصر القائمة.

      إنشاء ملف HTML الأول الخاص بك

      لإنشاء ملف HTML، يمكنك استخدام أي محرر نصوص، مثل Notepad أو VS Code. إليك مثال بسيط:

      1. افتح محرر النصوص الخاص بك واكتب الكود التالي: 
      

  HTML Tutorial
      Example Number 1
      
  
      Hello, world!
      1. احفظ الملف بامتداد .html (على سبيل المثال، Index.html)
      2. افتح الملف في متصفح الويب الخاص بك لترى أول صفحة ويب بتنسيق HTML أثناء العمل!
      3. لفحص الكود الخاص بك، اضغط على Ctrl Shift C في Google Chrome لفتح أدوات المطور واستكشاف بنية DOM.
      4. انتقل إلى علامة تبويب الشبكة في أدوات المطور وقم بتحديث علامة تبويب المتصفح.

      تجد أن هناك طلب بالاسم الذي قمت بحفظه كما في هذه الصورة.
      Develop yourself to build Web UIs: Part Understanding HTML

      في خانة الرد ستجد الكود الذي قمت بكتابته كما في الصورة التالية
      Develop yourself to build Web UIs: Part Understanding HTML

      الآن، ما حدث هو أنه بمجرد فتح الملف الذي قمت بحفظه بتنسيق html، بدأ الكمبيوتر في تشغيل الملف في المتصفح. أراد المتصفح أن يظهر شيئًا ما، لذلك أجرى طلبًا للملف الذي تم تشغيله منه. أعطى الملف للمتصفح الكود الخاص بك والذي تم العثور عليه في قسم الاستجابة. نظرًا لأنه كان ملف html، يبدأ المتصفح في قراءة كود HTML من الأعلى إلى الأسفل. تُعرف هذه العملية بالتحليل. أثناء التحليل، يواجه المتصفح علامات HTML مختلفة (مثل ،

      ، ، وما إلى ذلك) ويبدأ في إنشاء بنية تسمى DOM بناءً على هذه العلامات. عندما يقوم المتصفح بإنشاء DOM، فإنه يعرض المحتوى على شاشتك في نفس الوقت.

      إنشاء جدول

      لنأخذ خطوة أخرى إلى الأمام من خلال إنشاء جدول بسيط بتنسيق HTML:

      1. افتح نفس ملف HTML وأضف الكود التالي داخل علامة : 
      Table Example
      Name Power Is Kurama Present
      Naruto Rasengan Yes
      Sasuke Sharingan No
      1. احفظ الملف وقم بتحديث المتصفح الخاص بك لرؤية الجدول المعروض.

      لاحظ أنه يتم عرض العنوان بواسطة علامة الفقرة. وبدلاً من ذلك، يمكنك أيضًا استخدام علامة

      ، والتي ستؤدي إلى توسيط عنوان الجدول. قم بتجربة علامة التسمية التوضيحية وقم بالتحديث لرؤية التغييرات.

      لاحظ أنه يجب استخدام علامة

      مباشرة بعد علامة الافتتاح .

      لقد نجحت الآن في إنشاء جدول أساسي بتنسيق HTML. لا تتردد في تجربة صفوف وأعمدة إضافية لتشعر براحة أكبر عند استخدام صيغة HTML.

      خاتمة

      تهانينا على إكمال خطواتك الأولى في تطوير الويب باستخدام HTML! المفتاح لإتقان HTML هو الممارسة. قم بتجربة عناصر مختلفة، وأنشئ صفحات الويب الخاصة بك، ولا تخف من ارتكاب الأخطاء - فكل خطأ يمثل فرصة للتعلم.

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

      تمت كتابة هذا المقال بواسطة أنانثا كريشنان ، وهو محترف يتمتع بخبرة في كل من تكنولوجيا المعلومات والهندسة الميكانيكية. مع خلفية في تطوير المكدس الكامل وشغف بالأنظمة الميكانيكية والكهربائية، يركز أنانثا كريشنان الآن على إنشاء محتوى تعليمي لمساعدة المبتدئين في مجالات خبرته.

      3. بيان الافراج تم إعادة إنتاج هذه المقالة على: https://dev.to/marina_labs/develop-yourself-to-build-web-uis-part-1-understanding-html-4of9?1 إذا كان هناك أي انتهاك، يرجى الاتصال بـ Study_golang@163 .com لحذفه
      أحدث البرنامج التعليمي أكثر>
      تصنيفأكثر>
      تعلم اليابانية تعلم اللغة الكورية تعلم اللغة الصينية تعلم لغة أجنبية لعبة مشكلة شائعة ملحقات التكنولوجيا منظمة العفو الدولية برنامج تعليمي برمجة شرط

      دراسة اللغة الصينية

      أداةأكثر>
      فك تشفير الصورة Base64
      بينيين الصينية
      ترميز يونيكود
      JS ضغط تشفير التشويش
      أداة تشفير URL الست عشري
      أداة تحويل ترميز UTF-8
      أدوات تشفير وفك تشفير Ascii عبر الإنترنت
      أداة التشفير MD5
      أداة تشفير وفك تشفير النصوص Hash/Hash عبر الإنترنت
      تشفير SHA عبر الإنترنت

      تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.

      Copyright© 2022 湘ICP备2022001581号-3