Зображення в html - html по кроках
Як вставити зображення?
В основному на сторінках розміщують зображення в одному з трьох графічних форматів: gif. jpg / jpeg або png (докладніше тут.).
Атрибут align тега дозволяє розмістити зображення праворуч або ліворуч щодо тексту та інших елементів сторінки, або розташувати його певним чином щодо базової лінії поточного рядка.
Вирівнюємо зображення по базовій лінії поточного рядка.
Рамка навколо зображення
Атрибут border тега дозволяє зробити висновок зображення в рамку, колір якої збігається з кольором тексту на сторінці, а товщина задається в пікселях. За замовчуванням рамка відсутня.
Зображення укладено в рамку, товщиною 2 пікселя.
Розмір зображення
Розміри графічного зображення бажано завжди вказувати явно за допомогою атрибутів height і width. задають відповідно висоту і ширину зображення.
В іншому випадку браузеру потрібен додатковий час для самостійного обчислення розмірів зображення, що впливає на швидкість завантаження сторінки.
Розмір зображення задається в пікселях і на швидкість його завантаження не впливає.
Відступи від зображення
Відступи від зображення (або поля навколо зображення) до інших елементів сторінки задаються за допомогою атрибутів hspace і vspace - відступи по горизонталі і вертикалі відповідно.
Відступи задаються в пікселях.
В даному випадку відступи від зображення по горизонталі, з одного боку до тексту, а з іншого - до краю батьківського елементу, складають 50 пікселів.
Альтернативний текст і підказка
За допомогою атрибута alt тега до зображення додають альтернативний текст.
Альтернативний текст використовують для короткого опису вмісту картинки, коли саме зображення з якої-небудь причини недоступний (наприклад, якщо у Вашому браузері відключена Автоматичне завантаження зображень).
Таким чином альтернативний текст Ви побачите, якщо браузер не завантажив або ще не завантажив зображення.
Підказка до картинки додається за допомогою атрибута title. Вона з'являється при наведенні на зображення курсора.
Спробуйте відключити автоматичне завантаження зображень у Вашому браузері, і замість пінгвіна в рамці Ви побачите "Альтернативний текст".