Графика в HTML
«Графика в HTML» – Урок шестой учебника HTML. В этом уроке мы с вами поговорим о работе с веб графикой, как частью HTML страниц. Мы поработаем с
HTML
научимся создавать изображения в рамках и настраивать их отображение.
На мой взгляд работа с графикой и изображением имеет очень важное значение так как, она позволяет нам сделать внешний вид страницы таким, каким мы его запланировали и хотим видеть. Создание фона и объединение его с текстом,добавление картинок ,всё это и многое другое мы с вами рассмотрим в этом разделе
Использование графики на HTML страницах.
Использование всевозможной графики , анимации и звуков стало очень популярным при оформлении
веб страниц. И многие
веб–мастера с большой охотой пользуются этим для создания своему сайту более броского и уникального вида который был бы интересен пользователям.
Создавая свой сайт или веб страницу яркими ,динамическими не стоит забывать что (когда очень хорошо тоже не хорошо) поэтому не переборщите с оформлением. Соблюдайте грань и учитывайте гармонию, сочетание графики и цвета, не делайте сайт слишком ярким, кислотным это не привычно глазу и чаще всего отпугивает посетителей. Цвет должен быть приятным,мягким и лишь чуть чуть выделяться, подчёркивая наиболее важные детали которые вы пытаетесь довести. Не загружайте его большим количеством графических изображений так как это приводит к большому весу веб документа а следовательно и к долгой загрузке. А зная по себе ,такие сайты часто избегают из за не желания ждать.
Простота - есть гениальность. Достаточно придерживаться этого правила и всё будет отлично
Но не в коем случае не нужно путать простату с примитивностью. Это две совершенно разные вещи. Поэтому постарайтесь уловить ту саму грань между простотой и уникальностью делающий ваш сайт интересным ,ярким ,динамичным но весьма сбалансированным и простым для посетителей
Добавление изображений к html странице.
Для того что бы добавить к web–странице файла с изображением нужно использовать тег <img>, с обязательным атрибутом src, позволяющий указать на файл с изображением.
<p align="center" class="text"><img src="/cat.gif" alt="графика в HTML" title="Это кот" width="100" height="99"></p>
Форматирование изображений.
Если вам понадобится отформатировать текст, находящийся рядом с изображением используйте атрибут тега <img> – allign. Сотрите пример его работы в таблице.
Служить дополнительными атрибутами форматирования изображения могут hspace и vspace, перед которыми стоит задача определять интервал между графическим изображением и его расположением возле текстом по горизонтали и вертикали. Величина отступа задается в пикселях.
Атрибута border так же участвует в форматирование текста главной задачей которого является указание ширины рамки вокруг изображения. По умолчанию рамка вокруг изображения равна 0, а вокруг изображения, являющегося ссылкой – 2.
Атрибуты height и width позволяют задать размер изображения по ширине и высоте. Вы можете задавать размер в процентах и в пикселях. Браузер по умолчанию всегда задаёт реальный размер изображения поэтому я рекомендую задавать их вручную. В случае не возможности загрузить браузером изображения он устанавливает случайный размер. У вас может получиться пустой квадрат что в свою очередь может привести к изменению каркас сайта и его не правильно отображению. Если же вы установили атрибуты размера вручную каркас сайта не будет нарушен даже если браузер не сможет загрузить изображение
Атрибут ALT – указывает название изображения, которое учитывается поисковыми машинами при индексации сайта и отображается в пустом квадрате вместо изображения, в случае невозможности загрузки последнего. Использование этого атрибута я считаю обязательным, но об этом мы поговорим в разделе Как раскрутить сайт самостоятельно и с нуля
<span style="font-size: 12pt">Самостоятельная раскрутка сайта"</span>
Использование фона в HTML.
Фон является одним из наиболее важных факторов графического отображения. Для создания фона, состоящего из одного сплошного цвета используется атрибут bgcolor со значением цвета. Что бы использовать изображения в качестве фона требуется атрибут background после которого указывается адрес фонового рисунка. Особенностью тега background является то что он при открытии изображения помещает его в полном размере в левый верхний угол экрана и начинает его тиражировать на весь экран, что позволяет добиваться довольно интересных эффектов. Например:
<body bgcolor="red">
<p align="center">
я текст на красном фоне
</p>
</body>
Я текст на фоне маленького кота |
<body background=
"/Kartinki/stat/HTML/cat_mini.gif">
<p align="center">
я текст на фоне маленького кота
</p></body>
я текст на фоне кота побольше |
<body background=
"/img/cat.gif">
<p align="center">
я текст на фоне кота побольше
</p></body>
Из примеров хорошо видно, как браузер тиражирует изображение.
Горизонтальная линия.
Горизонтальную линию можно построить с помощью тега <hr>. Для изменения параметров линии, а именно, толщины и длинны, используются атрибуты SIZE и WIDTH. Для выравнивания линии, относительно центра страницы используется атрибут ALIGN. Атрибут NOSHADE используется для определения, будет ли у линии тень.
<hr align="center" color="#666666" width="400">
Правильный выбор дизайна сайта – это важный аспект в его продвижении . Но это отдельная тема
При создании графики внутри HTML страниц немаловажно проводить оптимизацию изображений для уменьшения их веса, это влияет на скорость загрузки. Для небольших изображений рекомендую использовать формат .gif, для крупных - .jpeg со средними настройками качества. .png изображения являются одними из наиболее увесистых элиментов, по возможности рекомендую вовсе отказаться от их использования
В следующее уроке мы будем учиться работать с таблицами в html. Правильная работа с таблицами позволяет отлично позиционировать элементы и даже создавать каркасы сайтов.
• Желаете перейти к изучению 7 урока? Таблицы в HTML .
бла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла блабла бла бла бла бла бла
