Глава 2
Работа с изображениями
В настоящее время обилие графических форматов не обошло собой и Web. Современные интернет-браузеры поддерживают просмотр множества форматов изображений. В основном это: jpg, gif, png - и другие. Наверное несуществует ни одного сайта, который бы обошло графическое оформление. Графические элементы позволют наполнить сайт дизайном, указать пользователю на важные элементы интерфейса.
Кроме этого существует множество способов встраивания изображений в HTML документ. Самым прогрессивным в настоящее время является оформление графики с помощью CSS. Но пока я остановлюсь на простых способах, начиная с простого добавления изображения, фоновых изображений и изображений-карт.
За изображения в коде HTML отвечает тэг <img>, этот тэг одинарный, его обязательным параметром является src="URL-адрес изображения". Необязательный параметр alt="альтернативный текст" призван помочь понять инфомацию о изображении до его загрузки или если изображение не загрузилось. Также текстовые браузеры на подобие lynx вместо изображения указывают именно этот текст.
С помощью параметра align можно выровнять изображение относительно других элементов веб-страницы.
По умолчанию изображение будет выведено в полном размере, но его можно изменить с помощью параметров width и height. Причём, если указан только один из этих параметров, то изображение будет изменено пропорционально размеру. С помощью параметров hspace и vspace можно задать отступ текста от изображения. Размер рамки задаётся парметром border.
Встраивание изображений, тэг <img>
| Параметр | Значение | Назначение |
|---|---|---|
| src | ../../images/autumn.png | Добавление изображения по его URL |
| alt | Осенние листья: automn.png | Альтернативный текст |
| height | 20%,20px | Размер изображения по высоте с сохранением пропорций |
| hspace | 20%, 20px | Отступ при обтекании изображения по горизонтали |
| vspace | 20%, 20px | Отступ при обтекании изображения по вертикали |
| align | top | Выравнивание по верхнему краю |
| absbottom | Выравнивание по нижнему краю | |
| left | Обтекание изображения текстом, изображение слева | |
| rigth | Обтекание изображения текстом, изображение справа | |
| middle | Выравние середины изображения по текущей строке | |
| absmiddle | Выравнивание середины изображения по середине строки | |
| bottom | Выравнивание изображения по низу строки | |
| texttop | Вырванивание изображения по верхней границе строки | |
| border | 10px, 0px | Задание размера рамки вокруг изображения |
Примеры:
| код в HTML | Отображение браузером |
|---|---|
| <img src="../../images/autumn.png"> |  |
| <img src=".." alt="Изображение не загрузилось"> | |
| < img src="../../images/autumn.png" width="100px"> | |
| < img src="../../images/autumn.png" align="left" width="50px"<p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae vel odit laboriosam quasi sequi aliquam, suscipit incidunt autem unde temporibus tempore aperiam, molestias fugit provident, vero dolore amet facere laborum. </p> |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae vel odit laboriosam quasi sequi aliquam, suscipit incidunt autem unde temporibus tempore aperiam, molestias fugit provident, vero dolore amet facere laborum. |
| < img src="../../images/autumn.png" align="right" width="50px"<p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat vitae suscipit iste laboriosam aliquam dignissimos, soluta odit hic aspernatur possimus sapiente nihil explicabo reiciendis. Commodi facilis, sint enim officiis voluptatum! </p> |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat vitae suscipit iste laboriosam aliquam dignissimos, soluta odit hic aspernatur possimus sapiente nihil explicabo reiciendis. Commodi facilis, sint enim officiis voluptatum! |
| < img src="../../images/autumn.png" align="right" width="50px" hspace="20px"<p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae vel odit laboriosam quasi sequi aliquam, suscipit incidunt autem unde temporibus tempore aperiam, molestias fugit provident, vero dolore amet facere laborum. </p> |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae vel odit laboriosam quasi sequi aliquam, suscipit incidunt autem unde temporibus tempore aperiam, molestias fugit provident, vero dolore amet facere laborum. |
| < img src="../../images/autumn.png" align="right" width="50px" bordwer="20px" <p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum maiores iste, rem voluptatem tempore voluptas temporibus, neque fugiat molestiae vitae explicabo! Facilis accusantium eius error dolor ab, animi deserunt illum. </p> |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum maiores iste, rem voluptatem tempore voluptas temporibus, neque fugiat molestiae vitae explicabo! Facilis accusantium eius error dolor ab, animi deserunt illum. |
| <p<img src="../../images/autumn.png" align="top" width="50px"> <img src="../../images/dog.png" height="50px"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi doloremque nulla adipisci voluptatem modi dolorum excepturi sint ducimus quam sapiente commodi, debitis ex perspiciatis numquam dolore omnis culpa officia, sequi!</p> |
|
| <p<img src="../../images/autumn.png" align="bottom" width="50px"> <img src="../../images/dog.png" height="50px"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque perspiciatis reprehenderit, magni aperiam. Quis nam voluptatem, odio ullam quo a perspiciatis eius, tempore possimus, ratione magni hic temporibus, sunt commodi?</p> |
|
| <p<img src="../../images/autumn.png" align="texttop" width="50px"> <img src="../../images/dog.png" height="50px"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis facilis explicabo numquam, aliquid quae quibusdam possimus? Ad optio labore natus, vitae voluptatum amet cum id quo nam, alias dolor cumque?</p> |
|
| <p<img src="../../images/autumn.png" align="middle" width="50px"> <img src="../../images/dog.png" height="50px"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, dolorem minus. Ratione sapiente iusto, facere nulla a! Nobis labore, magni, ipsa explicabo fugiat minima rem quod blanditiis doloribus modi facere?</p> |
|
| <p<img src="../../images/autumn.png" align="absmiddle" width="50px"> <img src="../../images/dog.png" height="50px"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ex id, nostrum dolore minima consectetur ad numquam! Cupiditate, rerum atque error numquam, officia vitae amet adipisci distinctio accusamus rem deleniti.</p> |
|
| <p<img src="../../images/autumn.png" align="absbottom" width="50px"> <img src="../../images/dog.png" height="50px"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis facilis explicabo numquam, aliquid quae quibusdam possimus? Ad optio labore natus, vitae voluptatum amet cum id quo nam, alias dolor cumque?</p> |
|
В данном примере реализована возможность создать интересную горизонтальную линию за счёт нарушения пропорций исходного изображения |
|
| <img src="../../images/autumn.png" width="100%" height="10px"> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi doloremque nulla adipisci voluptatem
modi dolorum excepturi sint ducimus quam sapiente commodi, debitis ex perspiciatis numquam dolore
omnis culpa officia, sequi!