Урок 4. Зображення
Здрастуй, шановний читачу.
У даній статті ми поговоримо про зображеннях. Після проходження уроку ви дізнаєтеся як вставити зображення на сайт, змінити його положення щодо тексту, а також змінювати його розмір.
Це четверта стаття, присвячена вивченню html. Перед прочитанням даного уроку рекомендую пройти попередні уроки:
Урок 1. Що таке html?
Урок 2. Частини, заголовки
Урок 3. Списки
Теорія та практика
Завдяки зображенням наша сторінка стає барвистою і привабливою. Зображень на сайті дуже багато. Але не все зображення оптимальні для сайту. Деякі необхідно оптимізувати, щоб вони завантажувалися максимально швидко. Але про це ми поговоримо в наступних статтях. Зображення вставляється за допомогою тега . Але також при вставці зображення необхідно вказувати його параметри (ширину і висоту) і адреса де лежить зображення.
Спочатку подивимося як це виглядає в коді:
1 | lt;img src="Fruits.jpg" alt="Фрукти" width="246" height="205"gt; |
Як картинка виглядає в браузері:
Зараз давайте розберемося з атрибутами по порядку:
src = "fruits.jpg" - вказує де знаходиться зображення. Обов`язково необхідно вказувати з розширенням зображення! У нас розширення це ".jpg". В даному випадку воно знаходиться в одній папці з html сторінкою. Якби це зображення було в папці images, то в даному атрибуті необхідно було написати src = "images / fruit.jpg".
width = "246" - вказує ширину зображення в пікселях.
height = "205" - вказує висоту зображень в пікселях.
alt = "Фрукти" - це альтернативний текст для зображення. Він дуже важливий при індексуванні вашого сайту роботом. !!! Обов`язково прописуйте його для кожного зображення, не лінуйтеся!
Ми розглянули як вставляються зображення. А зараз подивимося як зображення може змінювати положення щодо тексту. Додамо трохи текста.
123456789101112131415 | lt;htmlgt;lt;headgt;lt;titlegt; Моя перша html сторінкаlt;/titlegt;lt;/headgt;lt;bodygt;lt;pgt; Фруктиlt;/pgt;lt;ul type="Disc"gt;lt;ligt; Бананlt;/ligt;lt;ligt; Яблукоlt;/ligt;lt;ligt; Персикlt;/ligt;lt;/ulgt;lt;img src="Fruits.jpg" alt="Фрукти" width="246" height="205"gt;lt;pgt; Morbi quis rutrum nulla. Quisque lacinia turpis nisl, non mollis nisl vestibulum at. Duis neque leo, congue at ultricies non, pharetra sed mauris. Proin elementum fringilla quam, non viverra justo luctus id. In ipsum lacus, commodo in porta ac, ultrices ac leo. lt;/pgt;lt;/bodygt;lt;/htmlgt; |
У тега є такий атрибут align. Він може приймати значення: bottom, left, middle, right, top.
Нижче представлені зображення сторінка з різними значеннями параметра align.
bottom | Даний параметр вирівнює нижню межу зображення по навколишнього тексту. | |
left | При використанні значення left він вирівнює зображення по лівому краю вікна. | |
middle | Середина зображення знаходиться за базовою лінії поточного рядка. | |
right | При використанні значення right він вирівнює зображення по правому краю вікна. | |
top | Вирівнюється за найвищим елементу поточного рядка. |
Сьогодні ми розглянули як вставляються зображення. Все дуже просто. Пробуйте все прописати руками. Тоді ви краще запам`ятайте їх і будете пам`ятати де і як їх застосувати.