مرحبا عزيزي القراء بلوق! في هذه المقالة سوف تتعلم كل شيء عنه كيفية إدراج صورة في صفحة HTML. هل لديك عدة صور تريد وضعها على صفحتك أو تريد وضع شعار على موقعك؟ كل هذا سهل. بعد قراءة هذه المقالة، ستتمكن من إدراج الصور في صفحات HTML الخاصة بك دون أي صعوبات. للقيام بذلك، سنتحدث بالتفصيل علامة imgوخصائصه، سنلقي نظرة سريعة على تنسيقات الملفات الرسومية مثل gif وjpeg وpng، كما سنلقي نظرة على ميزات HTML5 الجديدة التي تسهل إدراج الفيديو والصوت في موقعك.

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

يتم استدعاء جميع الصور الرسومية، وبشكل عام، أي بيانات مخزنة في ملفات منفصلة عن صفحة الويب مُنفّذعناصر الصفحة.

قبل إدراج الصور والنظر إلى علامة "img" بالتفصيل، من المفيد أن تتعلم القليل عن تنسيقات الرسوم.

تنسيقات الصور الرسومية.

هناك العديد من تنسيقات الرسوم المختلفة، لكن المتصفحات تدعم القليل منها فقط. دعونا ننظر إلى ثلاثة منهم.

1. تنسيق جبيغ(فريق خبراء التصوير المشترك). تنسيق شائع جدًا يستخدم لتخزين الصور. يدعم ألوان 24 بت ويحافظ على جميع الألوان النصفية في الصور دون تغيير. لكن صيغة jpeg لا تدعم الشفافية وتشوه التفاصيل الصغيرة والنصوص في الصور. يستخدم JPEG في المقام الأول لتخزين الصور الفوتوغرافية. الملفات بهذا التنسيق لها امتدادات jpg، jpe، jpeg.

2. تنسيق GIF(تنسيق تبادل الرسومات). الميزة الرئيسية لهذا التنسيق هي القدرة على تخزين عدة صور مرة واحدة في ملف واحد. يتيح لك هذا إنشاء مقاطع فيديو متحركة كاملة. ثانيا، يدعم الشفافية. العيب الرئيسي هو أنه يدعم 256 لونًا فقط، وهو غير مناسب لتخزين الصور. يستخدم GIF بشكل أساسي لتخزين الشعارات واللافتات والصور ذات المساحات الشفافة والتي تحتوي على نص. الملفات بهذا التنسيق لها الامتداد gif.

3. تنسيق PNG(رسومات الشبكة المحمولة). تم تطوير هذا التنسيق كبديل لتنسيق GIF القديم، وإلى حد ما، JPEG. يدعم الشفافية ولكنه لا يسمح بالرسوم المتحركة. هذا التنسيقلديه امتداد png.

عند إنشاء مواقع الويب، عادةً ما يستخدمون الصور بتنسيق JPEG أو GIF، ولكن في بعض الأحيان يستخدمون PNG. الشيء الرئيسي هو فهم الحالات التي يكون فيها التنسيق أفضل للاستخدام. باختصار:

يتم استخدام JPEG بشكل أفضل لتخزين الصور الفوتوغرافية أو الصور ذات التدرج الرمادي التي لا تحتوي على نص؛

• يستخدم GIF في المقام الأول للرسوم المتحركة؛
• PNG هو التنسيق لكل شيء آخر (الرموز والأزرار وما إلى ذلك).

إدراج الصور في صفحات html

إذًا، كيف يمكنك إدراج صورة على صفحة ويب؟ يمكنك إدراج صورة باستخدام صورة واحدة علامة img. يضع المتصفح الصورة في الموقع على صفحة الويب حيث تواجه علامة img.

كود لإدراج صورة في HTMLالصفحة تبدو مثل هذا:

سيضع كود html هذا على صفحة الويب صورة مخزنة في ملف image.jpg، الموجود في نفس المجلد مثل صفحة الويب. كما لاحظتم، عنوان الصورة موضح في سمة سرك. لقد أخبرتك بالفعل ما هو. لذا، فإن سمة src هي سمة مطلوبة تعمل على الإشارة إلى عنوان الملف بالصورة. بدون السمة src، العلامة img لا معنى لها.

فيما يلي بعض الأمثلة الإضافية لتحديد عنوان ملف يحتوي على صورة:

سيقوم رمز html هذا بإدراج صورة على الصفحة تسمى image.jpg، والتي يتم تخزينها في مجلد الصور الموجود في جذر موقع الويب.

يمكن أن تحتوي سمة src على أكثر من مجرد روابط نسبية للصور. نظرًا لأنه يتم تخزين الصور عبر الإنترنت مع صفحات html، فإن كل ملف صورة له عنوان url خاص به. لذلك، يمكنك إدراج عنوان URL للصورة في سمة src. على سبيل المثال:

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

علامة img هي عنصر مضمّن، لذا من الأفضل وضعها داخل عنصر كتلة، على سبيل المثال داخل علامة "P" - الفقرة:

دعونا نتدرب ونقوم بإدراج صورة من المقالات السابقة حول HTML على صفحتنا. سأقوم بإنشاء مجلد "صور" بجوار ملف html الخاص بصفحتي وأضع ملف صورة "bmw.jpg" هناك، والذي يبدو كالتالي:

بعد ذلك سيكون كود html للصفحة التي تحتوي على الصورة المدرجة كما يلي:

وإلقاء نظرة على نتيجة العرض في المتصفح:

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

السمة البديلة هي خيار احتياطي

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

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

وهذا ما يبدو تقريبًا:

ضبط أبعاد الصورة

لا تزال هناك بعض سمات علامة img التي يجب أن تعرفها. هذه بضع سمات عرضو ارتفاع. يمكنك استخدام هذه لتحديد أبعاد الصورة:

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

هذا كل ما يتعلق بإدراج الصور على الصفحات في الوقت الحالي، ثم سننظر في كيفية إدراج الصوت أو الفيديو على موقع الويب...

إدراج الفيديو والصوت باستخدام HTML 5

تقدم مواصفات html5 الجديدة العديد من العلامات الجديدة التي تجعل من السهل جدًا تضمين ملفات الوسائط. وهذا ينطبق في المقام الأول على الفيديو والصوت.

لإدخال صوتييوفر HTML5 علامة مقترنة صوتي. تتم الإشارة إلى عنوان الملف الذي تم تخزين مقطع الصوت فيه باستخدام السمة src المألوفة لنا بالفعل:

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

افتراضيًا، لا يتم عرض مقطع الصوت على صفحة الويب. ولكن إذا وضعت سمة بدون قيمة في علامة "الصوت". ضوابط، سيعرض المتصفح عناصر التحكم لتشغيل المقطع الصوتي في المكان الذي تم وضع علامة الصوت فيه على صفحة الويب. وهي تتضمن زر تشغيل/إيقاف مؤقت، وشريط تشغيل، وتحكم في مستوى الصوت.

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

عند إنشاء مواقع الويب، فإن تنسيقات الرسوم الأكثر استخدامًا هي PNG وGIF وJPEG، ولأعمال التصميم باستخدام الصور - محرر الرسومات أدوبي فوتوشوب، الذي يتمتع بإمكانيات غنية لضغط الصور وتغيير حجمها دون فقدان الجودة، وهو أمر مهم للغاية لتطوير الويب.

كيفية إدراج صورة في HTML؟

لإدراج صورة في صفحة HTML، استخدم علامة واحدة بسيطة:

,

حيث xxx هو عنوان الصورة إذا كانت الصورة في نفس الدليل مثل الصفحة، فستبدو العلامة كما يلي:

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

وتظهر بدلاً من الصورة عند عدم توفرها أو تحميلها أو في وضع تشغيل المتصفح "بدون صور". تتم إضافته باستخدام سمة العلامة البديلة .

مثال لإضافة نص بديل إلى ملف رسومي:

تعيين أحجام الصور في HTML

لتغيير أحجام العرض ملف رسومي، استخدم علامتي الارتفاع والعرض، حيث الارتفاع هو الارتفاع والعرض هو العرض، ويتم قياسه بالبكسل.

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

يتم وضع الصورة في مستطيل بالأبعاد المحددة، وإذا كانت المعلمات أصغر أو أكبر من المعلمات الأصلية، يتم تمديد الصورة أو ضغطها.

إذا لم يتم استخدام سمات الارتفاع والعرض، فسيقوم المتصفح بتحميل الصورة على الفور، مما يؤدي إلى تأخير عرض النص وعناصر الصفحة الأخرى.

يمكن تحديد هذه المعلمات بالبكسل (حجم الصورة ثابت ولا يعتمد على دقة شاشة المستخدم) وبالنسب المئوية (يعتمد حجم الصورة على دقة الشاشة).

على سبيل المثال:

يجب أن نتذكر أنه في اللحظة التي تتغير فيها الحجم الأصليالصورة، فمن الضروري الحفاظ على نسبها.

للقيام بذلك، يكفي تحديد قيمة واحدة فقط من المعلمات ( العرض أو الارتفاع)، وسيقوم المتصفح بحساب قيمة الثانية تلقائيًا.

موقع الصورة في HTML

كما هو الحال مع العديد من علامات HTML، قم بتطبيق سمة المحاذاة التي تقوم بمحاذاة الصورة:

- الصورة تقع فوق النص؛

- الصورة موجودة أسفل النص؛

- الصورة تقع على يسار النص؛

- الصورة تقع على يمين النص.

رابط الصورة

هذا يفعل كما يلي:

كما ترون، يمكن أن يكون الإدخال الرسومي رابطًا، وعند النقر عليه، يتم إعادة التوجيه إلى أي عنوان مكتوب بشكل كامل أو مختصر.

كيف يمكنني جعل الصورة خلفية في HTML؟

لا يمكن إدراج الصورة في الصفحة ككائن مرئي فحسب، بل يمكن أيضًا وضعها في الخلفية. لتعريف صورة كخلفية، تحتاج إلى تحديد سمة الخلفية=”xxx” في العلامة، حيث xxx هو عنوان الصورة، المحدد بنفس الطريقة كما في الأمثلة أعلاه.

على سبيل المثال، لنقم بتعيين صورة النسيج التالية كصورة خلفية:

احفظ الصورة في مجلد به صفحة معدة واكتب الأسطر التالية:

الخلفية مع النص.

تم تعيين صورة الخلفية على الصفحة.

لإدخال الصور في HTMLالتنسيقان الرئيسيان المستخدمان هما GIF وJPEG. يمكن تخزين تنسيق GIF رسوم متحركة بسيطة(لافتات ديناميكية)، يعد JPEG رائعًا للصور ذات كمية كبيرةالزهور، مثل الصور الفوتوغرافية. التنسيق الثالث لرسومات الويب هو PNG، لكنه لم يتلق تطبيق واسعفي تصميم الويب. أي صورة في صيغ GIFأو يتم إدراج JPEG في صفحة ويب باستخدام علامة < img > ، لا توجد علامة إغلاق.

سمة SRC

عبر السمة srcيتم تحديد عنوان (URL) لملف الصورة، أي. يعثر المتصفح على الصورة المطلوبة في دليل الموقع على طول المسار ( عنوان URL) المحدد في هذه السمة. للراحة، جميع صور الموقع موجودة مجلد منفصل، عادة مع اسم صورة. على سبيل المثال، التقط أي صورة، ويفضل أن تكون ذات تنسيق صغير، واحفظها في صورة المجلد الذي تم إنشاؤه بالاسم primer.jpg. بعد ذلك سوف نشير إليه للتدريب.

حسنا، دعونا نحاول إدراج صورة على الصفحة؟ نكتب الكود (المسار - URL، المكتوب حسب موقع المجلد الذي يحتوي على الصور):

< img src="image/primer.jpg">

نص بديل. سمة البديل

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

لا يمكنك رؤية ذلك إلا عن طريق إيقاف تشغيل عرض الصور في المتصفح.

اضبط الحجم. سمات العرض والارتفاع

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

يتم ضبط أحجام الصور باستخدام العلامات عرض- العرض و ارتفاع— الارتفاع، يتم تعيين القيم بالبكسل وكنسبة مئوية من عرض الشاشة (مع النسب المئوية، كن حذرًا للغاية). دعونا نلقي نظرة على الكود:

خاتمة

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

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

تعد سمة ALT مهمة جدًا ويجب إضافتها إلى كل علامة IMG. يجب أن يصف محتوى الرسالة النصية الصورة بدقة وإيجاز شديدين.

يجب أن تتوافق الصور الموجودة على صفحة الويب مع محتوى النص.

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

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

كيفية عمل جدول بلغة html

دعونا نعطي مثالا، كود أتش تي أم أل:

جدول المثال

العمود 1

العمود 2

انتبه إلى الخلية . نستخدم خاصية colspan الخاصة لتوزيع الخلايا أفقيًا. تشير قيمته الرقمية إلى عدد الأعمدة المراد دمجها. يوجد أيضًا نظير لهذه السمة: العلامة (رأس الجدول)، حيث تحتاج أيضًا إلى إدخال colspan. وستكون النتيجة نفسها. ولكن في كثير من الأحيان يستخدمون td العادي.

الآن دعونا نلقي نظرة فاحصة على جميع سمات العلامة

سمات العلامة والخصائص

لفتح العلامة

1. الخاصية align="parameter" - تحدد محاذاة الجدول. يمكن أن تأخذ القيم التالية:

في المثال أعلاه، قمنا بمحاذاة الجدول إلى المنتصف align="center" .

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

على سبيل المثال

12. الخاصية width='number' - تحدد عرض الجدول: إما بالبكسل أو بالنسب المئوية.

13. فئة الخاصية = "class_name" - يمكنك تحديد اسم الفئة التي ينتمي إليها الجدول.

14. الخاصية style="styles" - يمكن تعيين الأنماط بشكل فردي لكل جدول.

حان الوقت الآن للغوص داخل الجدول وإلقاء نظرة على سمات خلايا الجدول. يجب كتابة هذه السمات في العلامة الافتتاحية