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