Урок 4. Зображення

lesson4

Здрастуй, шановний читачу.

У даній статті ми поговоримо про зображеннях. Після проходження уроку ви дізнаєтеся як вставити зображення на сайт, змінити його положення щодо тексту, а також змінювати його розмір.


Це четверта стаття, присвячена вивченню html. Перед прочитанням даного уроку рекомендую пройти попередні уроки:
Урок 1. Що таке html?
Урок 2. Частини, заголовки
Урок 3. Списки

Теорія та практика

Завдяки зображенням наша сторінка стає барвистою і привабливою. Зображень на сайті дуже багато. Але не все зображення оптимальні для сайту. Деякі необхідно оптимізувати, щоб вони завантажувалися максимально швидко. Але про це ми поговоримо в наступних статтях. Зображення вставляється за допомогою тега . Але також при вставці зображення необхідно вказувати його параметри (ширину і висоту) і адреса де лежить зображення.

Спочатку подивимося як це виглядає в коді:

1
lt;img src="Fruits.jpg" alt="Фрукти" width="246" height="205"gt;


Як картинка виглядає в браузері:

Зображення в Firefox

Зараз давайте розберемося з атрибутами по порядку:

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 Даний параметр вирівнює нижню межу зображення по навколишнього тексту. Align = bottom в Firefox
left При використанні значення left він вирівнює зображення по лівому краю вікна. Align = left в Firefox
middle Середина зображення знаходиться за базовою лінії поточного рядка. Align = middle в Firefox
right При використанні значення right він вирівнює зображення по правому краю вікна. Align = right в Firefox
top Вирівнюється за найвищим елементу поточного рядка. Align = right в Firefox

Сьогодні ми розглянули як вставляються зображення. Все дуже просто. Пробуйте все прописати руками. Тоді ви краще запам`ятайте їх і будете пам`ятати де і як їх застосувати.

Більше практикуйтеся!

попередній урок наступний урок
Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!