كيفية تضمين صورة على موقع على شبكة الإنترنت

جدول المحتويات:

كيفية تضمين صورة على موقع على شبكة الإنترنت
كيفية تضمين صورة على موقع على شبكة الإنترنت

فيديو: كيفية تضمين صورة على موقع على شبكة الإنترنت

فيديو: كيفية تضمين صورة على موقع على شبكة الإنترنت
فيديو: #7 تعلم HTML و CSS خطوة بخطوة - التحكم بالصور في موقع الانترنت 2024, يمكن
Anonim

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

إدراج صورة في الصفحة
إدراج صورة في الصفحة

تعليمات

الخطوة 1

إذا كنت تستخدم أي نوع من أنظمة إدارة المحتوى ، فمن المحتمل جدًا أنه يتضمن محرر صفحة. أولاً ، تحتاج إلى فتح الصفحة المطلوبة في هذا المحرر. مزيد - الخيارات ممكنة. في أفضل الأحوال ، سيكون لمحرر الصفحة "الوضع المرئي" ، بمعنى آخر - "وضع WYSIWYG" (ما تراه هو ما تحصل عليه - "ما تراه هو ما تحصل عليه"). في هذا الوضع ، لن تحتاج إلى التعامل مع كود html الأصلي على الإطلاق! ستظهر الصفحة في المحرر بالشكل نفسه الموجود على الموقع ، ويكفي وضع الماوس في المكان المطلوب والضغط على الزر "إدراج صورة" في لوحة المحرر.

الخطوة 2

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

إدراج مربع حوار الصورة
إدراج مربع حوار الصورة

الخطوه 3

نظرًا لعدم وجود معيار واحد لأنظمة التحكم ، قد يختلف إجراء إدراج صورة في الوضع المرئي لنظامك قليلاً ، لكن المبدأ سيكون هو نفسه. للسبب نفسه ، قد لا يظهر وضع WYSIWYG في نظام إدارة موقعك. ثم لا يزال يتعين عليك تحرير التعليمات البرمجية المصدر للصفحة في HTML (HyperText Markup Language - "لغة ترميز النص التشعبي"). ستحتاج إلى إدخال علامة في المكان الصحيح في الكود الذي يخبر المتصفح بعرض الصورة هنا. في أبسط أشكاله ، يجب أن يبدو على النحو التالي: هذا هو "العنوان النسبي" للصورة - في هذا العنوان ، يجب على المتصفح الاتصال بالخادم للحصول على ملف الصورة منه. إذا كان العنوان نسبيًا ، فسيفترض المستعرض أن الملف موجود في نفس مجلد الخادم مثل الصفحة نفسها (أو في مجلد فرعي). ولكن ، حتى لا تكون مخطئًا ، من الأفضل تحديد "العنوان المطلق" - على سبيل المثال ، مثل هذا: بطبيعة الحال ، لكي يجد الخادم الصورة ويرسلها إلى المتصفح ، يجب تحميلها إلى الموقع المحدد موقعك. أسهل طريقة للقيام بذلك هي من خلال مدير الملفات ، الموجود في كل نظام إدارة محتوى ، وكذلك في لوحة التحكم الخاصة بشركة الاستضافة الخاصة بك. يمكنك أيضًا القيام بذلك باستخدام بروتوكول FTP (بروتوكول نقل الملفات - "بروتوكول نقل الملفات") ، باستخدام برنامج خاص - عميل FTP. هناك العديد منها ، سواء المدفوعة أو المجانية - على سبيل المثال ، برنامج Cute FTP و FlashFXP و WS FTP وما إلى ذلك ، ولكن ، بالطبع ، سيستغرق تثبيت البرنامج وإتقانه وتكوينه وقتًا ، لذا فإن مدير الملفات لتنزيل كل ما تحتاجه المتصفح هو الخيار الأسهل.

الخطوة 4

بالإضافة إلى العنوان الموجود في علامة html للصورة ، يمكنك تحديد معلومات إضافية - "سمات" العلامة. على سبيل المثال ، تحتوي السمة alt="Image" على نص تلميح الأداة الذي ينبثق عند تحريك مؤشر الماوس فوق الصورة: يمكن استبدالها بالسمة - title: - حجم المستطيل الذي يجب أن يكون فيه المتصفح عرض الصورة مضبوطة على سمات العرض والارتفاع: - تحدد سمة الحدود عرض الحد حول الصورة (بالبكسل): إذا تم إنشاء رابط للصورة ، فسيرسم المتصفح حدًا أزرق حولها.للتخلص منه ، اضبط قيمة الحد على صفر: - تحتوي السمتان الأخريان على معلومات حول مقدار المسافة البادئة للصورة من العناصر المجاورة (من سطور النص ، والصور الأخرى ، وما إلى ذلك) - يحدد hspace حجم المسافة البادئة أفقيًا (يسارًا ويمينًا) ، مسافة - عموديًا (أسفل وأعلى):

موصى به: