مرحباً، اليوم سنتحدث عن الصور
هناك الكثير من العلامات في HTML، ومعظمهم واضح للغاية.
ولكن علامة الصورة هي واحدة حيث نريد حقا لاستكشاف ذلك،
للتأكد من أنك تستخدم لأفضل غرض ممكن.
حتى في هذه المرحلة، كنت قد سمعت عن الكثير من العلامات المختلفة.
لكن الصور هي واحدة تحتاج فيها حقًا
إلى فهم السمات المختلفة.
هناك العديد من أنواع الملفات المختلفة التي يدعمها HTML.
الأكثر شيوعًا هي: JPEG، GIF و PNG، وسترى تلك قليلاً.
هناك أيضا سفغ و بمب.
هناك خيارات إضافية.
الشيء الأكثر أهمية هو أنه بغض النظر عن نوع الملف الذي تستخدمه،
تحتاج إلى تضمين ملحقات الملفات المختلفة.
هذا هو .jpg، .gif، .png.
الشيء الإضافي الذي يجب فهمه هو أنه عندما ينظر شخص ما إلى صفحتك،
يجب تنزيل كل صورة على صفحتك، لذا
يمكن أن يكون الحجم عاملاً بالفعل.
إذا كنت تتوقع أن معظم الأشخاص الذين يشاهدون صفحتك ينظرون إليها
من هاتف محمول،
فقد ترغب في التفكير
في استخدام أحجام ملفات أصغر، لأن كل صورة تتطلب طلب HTTP ليتم تحميلها على المتصفح.
لذا عندما نفكر في أحجام الصور، فإن معظم الناس يفكرون،
نوعاً ما، بالصورة البصرية كم هي كبيرة على الشاشة.
ولكن في علوم الكمبيوتر، نتحدث أكثر من ذلك بكثير عن أحجام بكسل.
بشكل افتراضي،
سيقوم المتصفح بفتح صورتك بنفس الحجم المحدد الذي تم حفظه.
ومن النادر حقا أن يكون هذا الحجم الأمثل.
ربما كنت قد ذهبت جميعا إلى موقع حيث كنت قد حصلت عليه
وكانت الصورة صغيرة حقا وكنت غير قادرة على جعله أكبر.
أو ربما،
ما أجد أكثر مزعج، هو عندما تأخذ الصورة الشاشة بأكملها
وكنت مضطرة للتمرير حول محاولة لرؤية كل شيء.
لذلك سأريكم حلين سريعين لتغيير حجم الصورة.
الأول هو تغيير الملف الفعلي، والثاني هو استخدام
سمات العرض والارتفاع لعلامة الصورة.
الآن، إذا كنت تريد استخدام ومحرر لتغيير ملفك،
ما تحتاج إلى فهمه هو أن المحررين يغيرون تلك الصور بشكل دائم.
هذا يعمل فقط على ما أسميه الملفات المحلية.
يمكنك فقط تغيير الصور التي لديك باستمرار على جهاز الكمبيوتر الخاص بك.
إذا كنت تحاول استخدام صورة وجدتها في مكان آخر على الويب
وكنت مرتبطًا بها، فلا يمكنك تغيير الحجم بشكل دائم.
لذا إذا كنت تستخدم Mac،
فهناك برنامج مدمج يسمى Preview يمكنك استخدامه لتغيير الحجم.
وإذا كنت تستخدم Windows، فهناك أيضًا برنامج مضمن يسمى Paint.
يمنحك أي من هذه الخيارات خيار تغيير حجم صورك.
ومع ذلك، تماما كما ملاحظة جانبية، لا واحدة من هذه هي
الخيار الأفضل إذا كنت تريد حقا للوصول إلى رسومات صور مختلفة.
ما يميل معظمنا إلى القيام به هو استخدام السمات.
الآن، أحد الأشياء التي أتحدث عنها
والجميع يتحدث عنها هو أهمية الحفاظ على الأناقة والمحتوى منفصلين.
وأنا حقا أحاول تشجيع الناس على عدم وضع أي نوع من
سمات النمط في شفرتهم.
ومع ذلك، تميل علامة الصورة إلى أن تكون استثناء،
لأنها تتضمن كل من سمة العرض والارتفاع.
لذا دعونا نمضي قدما ونمشي من خلال،
وسأريكم صورة للموقع عندما ننتهي.
الخيار الأول هو مجرد استخدام حجم الصورة الافتراضي.
لدي علامة الصورة الخاصة بي، ولدي اثنين من السمات المطلوبة.
المصدر، حيث يمكنك العثور على الصورة، والنص البديل.
سيكون الخيار التالي هو استخدام العرض بالبكسل، لذلك
في هذه الحالة قمت بإضافة السمة المسماة العرض ولقد ضمنته.
هذا ما تسميه عندما تعطيه حجماً تريده أن يكون دائماً
ولقد ضمنتها إلى 500 بكسل.
قد تلاحظ أنني قمت بتعيين العرض فقط ولم أقم بتعيين الارتفاع.
لا بأس بذلك
سيكتشف المتصفح تلقائيًا مقدار ما يجب عليه ضبط الارتفاع بحيث
يبقى متناسبًا مع العرض.
الخيار التالي هو استخدام العرض والارتفاع.
يمكنك القيام بذلك إذا كنت تريد التأكد من أن الصورة الخاصة بك تناسب داخل
مربع الحجم بالضبط.
هذا هو لطيف حقا للمقاسات، لكنه لا
يبدو دائما الطريقة التي تتوقع أن ننظر إليها، وسوف نرى ذلك في ثانية واحدة فقط.
الخيار الأخير، الذي قد يكون خيارك الأفضل، هو استخدام النسب المئوية.
في هذه الحالة، إذا لاحظت، لدي عرض = 50٪.
ما يعنيه هذا هو، التقط كم ستكون الصورة كبيرة، وقم
بتقليلها بنسبة 50%.
الآن، مع المضي قدما في البرمجة و CSS، ستفهم أنه 50٪
مما ينبغي أن يكون، لا يعني بالضرورة حجم الصورة الأصلي.
يعتمد ذلك على ما إذا كنت داخل حاوية.
حتى هنا لقد كان لدي كل من الخيارات، الافتراضي، العرض، العرض
والارتفاع، والنسبة المئوية.
لذلك دعونا نمضي قدما ونلقي نظرة على كيف يبدو ذلك.
لذلك ما يمكنك رؤيته هنا هي تلك الخيارات الأربعة المختلفة التي كانت لدي
لعرض صورتي.
أعلى في الجزء العلوي، لدي حجم الصورة الافتراضي.
هذا فقط صادف أن الصورة كانت كبيرة عندما التقطتها
حجم واحد أسفل،
ويمكنك أن ترى هذا هو المكان الذي كنت قد ضمنت عرض الصورة.
أنا تعيين العرض إلى 500 بكسل.
بيتي لا يزال يبدو لطيفا تماما، وكل شيء يتناسب.
الخيار الثالث هو الصورة المنحرفة.
هذا هو المكان الذي قمت بتضمين كل من الارتفاع والعرض،
ولم أضع الكثير من التفكير في كيفية تصرفهم بشكل متناسب.
لذلك من خلال القيام بذلك يمكنك أن ترى انها نوع من سحق،
وليس أفضل صورة تبحث.
هذا الأخير هو واحد أنا تعيين نسبيا،
ويمكنك أن ترى أنه حوالي نصف حجم نافذة المتصفح.
ما أريدك أن تنظر إليه الآن هو ما يحدث عندما أغير حجم النافذة
لذا عندما أذهب إلى هنا، يمكنكم أن تروا أن الصور الثلاثة الأولى تبقى
بنفس الحجم بالضبط، لكن الصورة السفلية ستنمو أو تتقلص.
وهذا هو نفسه إذا جعله أصغر وإعادة تحميل الصفحة.
لذلك، التفكير في أشياء مختلفة على طول هذا الخط هو كيف تريد أن
تبدو صفحتك عندما ينظر الناس إلى شاشة كبيرة، أو على شاشة الجوال.
إنه شيء تريدين التفكير به
آخر شيء أريد أن أشير إليه لك، الذي سأتحدث عنه في
لحظة، هو هذه الصورة الصغيرة التي للأسف، من
الصعب جدا رؤيتها وليس هناك طريقة جيدة بالنسبة لي لتفجيرها.
ولكن أريد أن أتحدث إليكم عن إضافة صور إلى شريط العنوان.
حتى إذا كنت تريد وضع فافيكون في عنوان صفحة الويب الخاصة بك،
انها مختلفة قليلا ثم استخدام صورة عادية.
بدلاً من ذلك، يجب أن ينتقل هذا الرمز إلى قسم الرأس من شفرتك، وليس إلى الجسم.
ما تفعله هو أنك ستدخل فعليًا
وستتضمن رابطًا يقول إنه نوع رمز من الرابط.
نحن نستخدم صورة PNG.
ثم وضعت الرابط إلى الصورة نفسها.
كملاحظة جانبية، لا يمكنك استخدام JPEG أو GIF للشعارات.
إما أن تكون صورة رمز خاصة أو .png.
وأخيرا، دعونا نعود إلى الحديث عن النص البديل،
السمة التي تريد إضافتها إلى جميع الصور الخاصة بك.
ما هو الغرض من هذا، ولماذا هو شيء نحتاجه؟
حسنا، ما يفعله هو أنه يوفر بديلا نصيا للمحتوى غير النصي.
لذلك في أي وقت لديك صورة، تريد التأكد من
أن الأشخاص الذين لا يستطيعون رؤية الصورة يمكنهم فهم المحتوى الذي خلفها.
لذلك قد يقرأ من قبل قارئات الشاشة.
في بعض الأحيان يتم عرضه بدلاً من الصور، لذلك إذا انقطع ملفك،
فلا يزال بإمكانك رؤية ملاحظة صغيرة تقول ما يفترض أن يراه.
وأخيرا، فإنه يوفر أيضا معنى دلالي لمحركات البحث.
لذلك إذا وضعت نصًا بديلاً جيدًا في صفحتك،
فسيساعد ذلك محركات البحث على إدراك محتوى صفحتك.
فكيف يمكننا إنشاء نص بديل جيد؟
هناك حقا أربعة أشياء تريد البحث عنها مباشرة قبالة الخفافيش.
تريد أن تكون دقيقا للغاية
تريد أن تكون مقتضباً
لا نريد أن نكون زائدين
ونحن لا نريد تضمين عناوين مثل صورة أو رسم.
لذلك أول واحد، تكون دقيقة.
انها جميلة لا تفسر.
فقط ضع الأشياء التي تحدد الصورة التي تنظر إليها تحديدًا.
من خلال أن تكون مقتضبة، وهذا يعني لا تذهب على وعلى.
حقا، من المفترض أن يكون نوع سريع من الفكرة حول ما هي الصورة.
عندما نتحدث عن لا تكون زائدة عن الحاجة، ما نقوله هو،
لا تقم بتضمين نص بديل موجود بالفعل في محتوى الصفحة.
إذا كان لديك الصورة، وفي فقرة أسفلها،
فإنك تصف ذلك بالتفصيل، لا تضع نفس المحتوى في النص البديل.
وأخيرا، واحدة من لا تشمل صورة،
الرسم، الذي حقا يعود فقط إلى مجرد كونها موجزة.
من الجيد في بعض الأحيان ترك النص البديل فارغًا.
حتى إذا كان لديك الصور التي هي مجرد الزخرفية، والشعارات، والأشياء على طول هذا الخط،
يمكنك المضي قدما ووضع مجرد البديل يساوي ثم الاقتباسات المزدوجة.
ولكن من المهم جدًا ألا تخطي سمة alt معًا.
المشكلة في الذهاب إلى هذا الطريق، هو أنك لا تدع الناس يعرفون ما إذا
كنت تفكر في إمكانية الوصول أم لا.
إنهم لا يعرفون ما إذا كان النص البديل مفقودًا
لأنه غير مفيد أو لأنك نسيت وضعه.
حسناً، دعنا نذهب ونراجع بعض الأشياء التي نعرفها عن الصور
واحد، امتدادات الملفات مهمة بشكل لا يصدق.
تحتاج إلى التأكد من أنها تطابق تنسيق الملف.
اسم الملف لصورتك هو شيء تريد
الاحتفاظ به قصيرًا وصفيًا جدًا حتى تتمكن من تجنب استخدام الأخطاء المطبعية.
وأخيرا مسارات الملف، أو حيث أن كل شيء طويل الذي
وضعت في المصدر حيث لديك صور/صور/ملحق.
أنت تريد أن تتأكد من أنك تهجئة تلك بشكل صحيح أيضا.
إذا كنت تستطيع القيام بهذه الأشياء الثلاثة، فسيسهل
عليك استخدام الصور بنجاح.
وفي الوقت الحالي، دعونا نمضي قدما ونمط فقط الارتفاع
والعرض الحق في رمز HTML نفسه.
على الرغم من أنني غالباً ما أتحدث عن فصل المحتوى عن النمط، إلا أنه من
الشائع جدًا المضي قدمًا ودمج هذين الاثنين عندما تقوم بصور.