التمرين - تحرير صفحات الويب

مكتمل

إن الغرض من هذا التمرين العملي هو تحرير تعليمات المصدر البرمجية الخاصة بصفحة الويب باستخدام استديو مداخل Power Apps.

في نهاية هذه التمارين، سوف تكون قادراً على:

  • افتح استديو المداخل لتحرير المدخل الخاص بك.
  • اعرض تعليمات المصدر البرمجية الخاصة بقسم صفحة الويب.
  • أضِف تعليمات HTML البرمجية الخاصة بك مباشرةً إلى قسم أو صفحة المدخل.

بالنسبة إلى هذا التمرين، ستحتاج إلى المعلمات التالية في بيئتك:

  1. بوابة Power Apps التي يتم توفيرها. إذا لم يكن لديك مدخل Power Apps متاحة، فاتبع إرشادات إنشاء مدخل لإنشاء مدخل.
  2. الوصول إلى مدخل صانع Power Apps.

السيناريو

لضمان مظهر متسق لموقع الويب وتعريف المحتوى القابل للوصول إليه الذي يمكن تحديد موقعه وفهرسته، من المهم أن تكون قادراً على تحرير محتوى HTML من صفحة. في هذا التمرين، ستضيف تعليمات HTML البرمجية إلى قسم نسخة صفحة الويب باستخدام محرر التعليمات البرمجية الخاص بـ Studio مداخل Power Apps، ومن ثم ستتابع هذه العمليات:

  1. افتح المدخل في استوديو مدخل Power Apps.
  2. افتح صفحة ويب الخدمات.
  3. أضِف تعليمات HTML البرمجية التي تحتوي على عناصر متنوعة مثل العناوين والفقرات وما إلى ذلك.
  4. احفظ الصفحة واستعرض موقع الويب لعرض النتائج.

إطلاق مداخل الاستوديو

لتشغيل مدخل Power Apps، اتبع هذه الخطوات:

  1. انتقل إلى Power Apps صانع البوابة.
  2. تأكد من تحديد البيئة الصحيحة في محدد البيئة في الزاوية العلوية اليمنى.
  3. من قائمة التطبيقات، حدد موقع تطبيق المدخل الإلكتروني (النوع = مدخل).
  4. حدد علامة القطع (...)ثم حدد تحرير، والتي ستطلق استوديو المداخل.

تحديد موقع صفحة الويب

لتحديد موقع صفحة الويب، اتبع هذه الخطوات:

  1. من شريط الأدوات، حدد رمز الصفحات.
  2. حدد موقع صفحة ويب الخدمات ومن ثم حدد تحرير.

تحرير الكود المصدر

لتحرير الكود المصدر، اتبع الخطوات التالية:

  1. حدد قسم نسخ الصفحة علي اللوحة.

  2. حدد أيقونة محرر تعليمات المصدر البرمجية (</>).

  3. استبدل الفقرة الموجودة بتعليمات HTML التالية:

    <h2>This is a large header title</h2>
    <p>This is a regular line of text</p>
    <p style="color: red;">This is red line of text</p>
    <p style="color: blue;">This is a blue line of text</p>
    <p style="font-size: xxx-large;">This is big text!</p>
    
  4. حدد حفظ.

ينبغي عليك رؤية النص المُنسق على اللوحة.

اعرض صفحة الويب

لعرض صفحة الويب، على شريط الأوامر، حدد استعراض موقع الويب. ينبغي عليك الآن رؤية صفحتك بالنص المُنسق.

لقطة الشاشة التي تعرض تحرير تعليمات المصدر البرمجية من عنصر استعراض موقع الويب.