Основи HTML - відображення зображень

• Квітня 30, 2024

Після того, як ви розмістите текст свого веб-сайту та відформатуєте на свій смак, саме час приправити сторінку кількома зображеннями. Мало того, що зображення можуть додавати кольори та життя вашим сторінкам, ви також можете використовувати їх для створення текстових ефектів, які важко або неможливо зробити при звичайному тексті та форматуванні. Наприклад, вибір вашого шрифту, як правило, обмежується невеликою кількістю шрифтів, які ви можете бути впевнені, що вони встановлені на комп’ютерах відвідувачів, оскільки якщо у них не встановлений шрифт, він не може бачити його на вашому сайті! Щоразу, коли ви публікуєте текст недоступним шрифтом, комп'ютери відвідувачів надаватимуть його будь-яким доступним шрифтом, найбільш близьким за стилем, що часто може призвести до руйнування дизайну вашого веб-сайту.

З іншого боку, якщо ви використовуєте програму редагування зображень для зйомки тексту у вишуканому шрифті та розміщення його як GIF або JPEG на своєму сайті, будь-який відвідувач побачить його саме так, як ви задумали - оскільки це тепер зображення тексту, а не зображення сам текст. Це може звільнити вас використовувати вигадливі шрифти у своїх заголовках та згрупувати їх незвично.

Основний тег, який використовується для відображення зображень:



Вищевказаний код буде відмінно працювати в HTML. Якщо ви використовуєте XHTML або хочете бути впевнені, що ваш сайт готовий до XHTML, вам слід додати косу рису, щоб закрити тег, оскільки в XHTML ви не можете використовувати теги відкритого типу:



'Src' є скороченим для джерела, і ви будете використовувати його для вказівки шляху до вашого зображення - іншими словами, щоб повідомити вашому браузеру, де зображення можна знайти на вашому сайті. Якщо ви зберігаєте свої зображення в тій самій папці, що і веб-сторінки, вам не потрібно перераховувати папку в тексті "src" - ви можете просто ввести ім'я файлу зображення.

Після того, як ви вказали джерело свого зображення, ви можете покращити цей базовий фреймворк різними додатковими атрибутами, щоб отримати максимальну користь від своїх зображень. Один атрибут, який ви майже завжди повинні використовувати, - це атрибут 'alt'. Це дозволяє вказати, який текст повинен відображати браузер, якщо він не може відображати ваше зображення з якихось причин. Текст "alt" готується так:



Ще один корисний набір атрибутів - це теги "ширина" та "висота". Вони дозволяють відображати зображення іншого розміру, ніж фактичний розмір зображення. Ви можете використовувати їх для виправлення зображення, щоб він ідеально вписувався у ваш загальний дизайн сторінки. Однак, як правило, бажано змінювати фактичний розмір зображення за допомогою програм редагування зображень, а потім розміщувати зображення на лінії з двох причин. По-перше, програмне забезпечення для редагування зображень майже завжди дасть кращий результат, ніж вирівнювання розміру вручну. По-друге, зміна тегів "ширина" та "висота" не змінює фактичний розмір файлу зображення, тому якщо у вас є величезне зображення, яке ви відображаєте як мініатюру, завантаження зображення буде тривати стільки ж, скільки буде жувати так само, як і велика пропускна здатність, як ніби ви відобразили її в повному розмірі.

Вказуючи розмір зображення, ви можете перелічити висоту, ширину або обидва. Розміри визначаються пікселем, як ви бачите нижче:



Ви також можете "вирівняти" свої зображення, щоб вони працювали з ними безперебійно з потоком тексту. Якщо ви виберете вирівнювання ліворуч, текст почне працювати праворуч від зображення. Якщо ви виберете правильне вирівнювання, зображення відобразиться в правій частині сторінки, а ваш текст підійде до лівої частини зображення, а потім перейде до нового рядка.

Вирівнювання зображення встановлюється наступним чином:



Ви також можете встановити вирівнювання на "верхній", "нижній" або "середній", щоб вирівняти зображення вгорі або внизу рядка тексту. Якщо ви не вказали вирівнювання, зображення за замовчуванням буде "знизу".

Як бічну примітку, ви можете включати свої атрибути зображення (src, вирівнювати, alt тощо) у будь-якому порядку в межах тегів зображень. Моє особисте вподобання - спершу перерахувати атрибут 'src', оскільки це найосновніший атрибут та повинен бути включений у кожен тег зображення, але ви можете використовувати будь-яку послідовність, яка вважається найбільш природною для вас.

Відео Інструкція: Базове використання посилань та зображень | Основи веб-розробки (Квітня 2024).