أضف ارتباطًا إلى صورة بتنسيق HTML

مؤلف: Christy White
تاريخ الخلق: 12 قد 2021
تاريخ التحديث: 1 تموز 2024
Anonim
الدرس الثاني: ادراج صورة الى صفحة الانترنت باستخدام لغة HTML
فيديو: الدرس الثاني: ادراج صورة الى صفحة الانترنت باستخدام لغة HTML

المحتوى

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

لتخطو

الطريقة 1 من 2: اكتب كود HTML

  1. قم بإنشاء ملف HTML. افتح محرر نصوص ثم قم بإنشاء ملف جديد. احفظ الملف كملف index.html.
      • يمكنك استخدام أي محرر نصوص تريده ، حتى محررات النصوص البسيطة من Windows (Notepad) و Mac OS X (TextEdit).
      • إذا كنت تريد استخدام محرر نصوص مخصص للعمل مع HTML ، فانقر هنا لتنزيل Atom ، وهو محرر نصوص لأنظمة Windows و Mac OS X و Linux.
      • إذا كنت تستخدم TextEdit ، فانقر فوق قائمة Format قبل إنشاء ملف HTML ، ثم انقر فوق Make Plain Text. يضمن هذا الإعداد تحميل ملف HTML بشكل صحيح في متصفح الويب.
      • معالجات Word مثل Microsoft Word ليست جيدة حقًا لكتابة HTML ، لأنها تضيف أحرفًا وتنسيقات غير مرئية يمكن أن تفسد ملف HTML وتجعله معروضًا بشكل غير صحيح في متصفح الويب.
  2. انسخ والصق كود HTML القياسي. حدد رمز HTML وانسخه أدناه والصقه في index.html المفتوح.

    a href = "عنوان url الهدف"> img src = "image url" /> / a>

  3. ابحث عن عنوان URL لصورتك. ابحث عن صورة على الويب ، وانقر عليها بزر الماوس الأيمن و (حسب المستعرض الخاص بك) انقر فوق نسخ عنوان URL للصورة أو نسخ عنوان الصورة أو نسخ موقع الصورة.
      • يستخدم Firefox و Internet Explorer نسخ موقع الصورة. يستخدم Chrome نسخ عنوان URL للصورة. يستخدم Safari نسخ عنوان الصورة.
  4. أضف عنوان URL للصورة. في ملف index.html ، انقر واسحب لتحديد عنوان URL للصورة بالماوس ، ثم اضغط على CTRL + V للصق عنوان URL.
  5. أضف عنوان URL الهدف. في index.html ، احذف عنوان url الهدف واكتب https://www.startpage.com.
      • يمكنك استخدام أي عنوان URL كعنوان URL الهدف.
  6. احفظ ملف HTML.
  7. افتح ملف HTML في متصفح الويب. انقر بزر الماوس الأيمن فوق index.html ثم افتح هذا الملف في متصفح الويب الذي تختاره.
      • إذا تم فتح المتصفح ولكنك لا ترى الصورة ، فتأكد من كتابة اسم ملف الصورة بشكل صحيح في ملف index.html.
      • عند فتح المتصفح ، ولكنك ترى كود HTML بدلاً من صورة الخلفية ، يتم حفظ index.html كملف .rtf (ملف نصي منسق). حاول تحرير ملف HTML في محرر نصوص آخر.

الطريقة 2 من 2: فهم كود HTML

  1. افهم علامة الارتساء. يتكون كود HTML من علامات الفتح والإغلاق. العلامة a href = ""> هي علامة البداية ، و / a> هي علامة النهاية. وهذا ما يسمى علامة الارتساء ويستخدم لإضافة روابط إلى صفحة ويب.
    • ال أ يخبر المتصفح بإنشاء رابط. ال href هو اختصار لمرجع HTML ، و = يخبر المتصفح بتغيير كل شيء بينهما ’ ’ إنشاء ارتباط. يمكن وضع أي عنوان URL بين علامتي الاقتباس.
    • ال / أ> يخبر المتصفح بإغلاق علامة الارتساء.
    • عند إضافة نص بين أ href = ""> و / أ> يصبح هذا النص ارتباطًا قابلاً للنقر على صفحة ويب. على سبيل المثال: a href = "https://www.google.com"> Google / a> ينشئ رابطًا إلى Google.
  2. افهم علامة الصورة. علامة img> هي علامة مغلقة. يمكنك إغلاقه باستخدام img src = "" /> أو img src = ""> / img>.
    • ال IMG تخبر العلامة المتصفح بعرض صورة. ال src هو اختصار للمصدر ، دي = يخبر المتصفح بحذف كل شيء بين ملفات ’ ’ واسترداد الصورة من هذا الموقع.
    • ال /> يخبر المتصفح بإغلاق علامة الصورة.
    • على سبيل المثال: يحصل {samp [} على الصورة من عنوان URL هذا ، ثم يعرضها في متصفح الويب.
  3. استخدم هذا الرمز في كل مكان. الآن بعد أن عرفت هذا الرمز ، يمكنك ذلك a href = "عنوان url الهدف"> img src = "image url" /> / a> لإضافة صور قابلة للنقر إلى أي صفحة ويب برمز HTML.