Характеристика тегов для вставки и выравнивания изображения

Трудно представить себе сайт, на страницах которого не содержится графика. Изображения преображают сайт, делая его более привлекательным и не похожим на другие ресурсы. Переизбыток графики вызовет утяжеление html-страницы и, соответственно, увеличит время ее загрузки. Кроме того, наличие большого числа изображений будет отвлекать посетителей от главного содержимого сайта.

Для вставки изображений в HTML используется тег < IMG> с обязательным атрибутом SRC. Атрибут указывает браузеру путь к файлу изображения. Т.е. для вставки картинки с названием logo.jpg в определенное место html-страницы (при условии, что и страница, и картинка расположены в одной папке (каталоге)) нужно в этом месте вставить следующий html-код:

< img src="logo.jpg">

Если графика и страница расположены в разных каталогах, нужно указать путь к изображению относительно страницы. Если html-страница лежит в каталоге site, в этом же каталоге расположен подкаталог images, в котором и находится наша картинка logo.jpg, то для ее вставки нужно написать html-код:

< img src="images/logo.jpg">

Помимо обязательного атрибута src у тега IMG есть несколько необязательных атрибутов:

width - ширина изображения в пикселах или процентах;

height - высота изображения в пикселах или процентах.

При использовании этих атрибутов, браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и затем загрузит изображение. При этом браузер поместит картинку в прямоугольник выделенного размера, даже если реальные ширина и высота больше или меньше.

В случае, когда эти атрибуты не используются, браузер загрузить картинку сразу, идущие за ней текст и остальные элементы задержится.

Ширину и высоту изображений возможно указывать как в пикселах (размер картинки будет постоянным вне зависимости от разрешения экрана), так и в процентах (размер картинки будет зависить от разрешения экрана пользователя). Например:

< img src="logo.jpg" width="50" height="20">

или

< img src="logo.jpg" width="10%" height="5%">

Если возможно, что пользователь в настройках браузера отключил показ изображений, то можно вместо картинки вывести альтернативный текст, который покажет, что за графика здесь должна быть. Достигается это путем применения атрибута alt:

< img src="logo.jpg" alt="Логотип сайта"

В этом случае браузер зарезервирует место на странице под картинку, но вместо самой картинки покажет текст, который ты напишешь в значении атрибута alt.

Для прекращения обтекания текстом изображения можно использовать тег < BR>. У тега BR есть атрибут clear, который может принимать три значения:

left - прекращение обтекание текстом изображений, выровненных по левому краю;

right - прекращение обтекание текстом изображений, выровненных по правому краю;

all - прекращение обтекание текстом изображений, выровненных и по левому, и по правому краю.

По умолчанию графика встраивается в страницу почти вплотную к тексту и другим элементам. Если такое отображение не устраивает, то можно задать пустые поля вокруг картинки. Делается это с помощью следующих атрибутов тега IMG:

vspace - создает верхнее и нижнее поля;

hspace - создает боковые поля (слева и справа).

Вокруг изображений можно создать черную рамку с помощью атрибута border. Значение этого атрибута указывается в пикселах и определяет толщину рамки. Например, HTML-код

< img src="logo.jpg" border="5">

Главным признаком HTML-документа является наличие в нем гиперссылок (или просто ссылок) на другие документы, сайты, файлы, картинки и т.д. Именно возможность добавлять в страницы ссылки на объекты вне нее и сделала Интернет столь популярным и удобным для использования.

Между собой ссылки различаются на внешние и внутренние, а также на текстовые и графические. Внешние ссылки ведут за "пределы" html-страницы, внутренние на различные части этой же страницы. Текстовые ссылки представляют из себя текст (по умолчанию он выделен синим цветом и подчеркнут), а графические, в качестве объекта, по которому нужно щелкнуть для перехода, содержат какое-либо изображение. Все эти "разновидности" ссылок создаются в HTML с помощью тега < A>< /A> (сокращение от англ. anchor - якорь). Рассмотрим его поподробнее.

Для создания ссылки на другой документ (внешняя ссылка) служит атрибут тега A href. В качестве значения этот атрибут принимает URL-адрес документа или имя файла, если файл расположен в этом же каталоге, в противном случае нужно указывать полный путь. Текст ссылки (его еще называют анкором) может быть как обычным текстом (текстовая ссылка), так и графическим изображением (графическая ссылка). Графическая ссылка создается вставкой тега IMG между тегами < A> и < /A>. Вообщем, синтаксис создания ссылки выглядит так:

< a href="URL-адрес или имя файла">текст ссылки (анкор)< /a>

Цвет текста ссылок можно изменить с помощью атрибутов тега BODY. Вообще, к тексту ссылок можно применять все те же атрибуты форматирования, что и к основному тексту страницы, т.е. выделять жирным, курсивом, использовать заголовки и т.д.

Чтобы создать графическую ссылку, нужно вместо текста ссылки воспользоваться тегом IMG. Пример этой ссылки выглядит так:

< a href="http://www.mysite.ru/">< img src="logo.jpg">< /a>

По умолчанию браузер окружает картинку в графической ссылке рамкой. Если это нежелательно, то атрибуту border тега IMG нужно присвоить значение 0.

< a href="http://www.mysite.ru/">< img src="logo.jpg" border="0">< /a>

Текстовые и графические ссылки можно комбинировать. Если написать

< a href="http://www.mysite.ru/">< img src="logo.jpg">Главная страница< /a>

,то ссылкой будет как картинка, так и текст "Главная страница"

Опять-таки по умолчанию браузер при переходе по ссылке открывает страницу в этом же окне. Чтобы изменить это используется атрибут тега A target. Он имеет следующие значения:

blank - открывает страницу в новом окне;

parent - загружает ссылку в родительском окне;

self - по умолчанию. Открывает ссылку в этом же окне.

Это не все значения атрибута target, но это самые основные. Пример использования этого атрибута

< a href="http://www.mysite.ru/" target="_blank">Главная страница< /a>

В теге A можно также использовать атрибут title. С его помощью можно создать всплывающую при наведении мыши на ссылку подсказку

< a href="http://www.mysite.ru/" title="Перейти на главную страницу">Главная страница< /a>

Внутренние ссылки создаются по тому же принципу, что и внешние. Только в значении атрибута href указывается якорь ссылки. Якорь создается атрибутом name:

< a name="имя якоря">текст< /a>

Имя якоря задается произвольно. Тут стоит сказать, что не все браузеры понимают русские имена якорей, поэтому рекомендуется использовать латиницу. Текст между тегами < A> и < /A> для создания якоря не обязателен и чаще всего не указывается.

Вместо URL-адреса в значении атрибута href можно написать адрес электронной почты с указанием протокола (mailto:) и тогда при щелчке по такой ссылке откроется окно почтовой программы с вписанным в поле "Кому" этим адресом электронной почты. В HTML-коде это выглядит так:

< a href="[email protected]">Моя почта< /a>

ГЛАВА 2 РАЗРАБОТКА ПРОЕКТА И ФУНКЦИОНАЛЬНОЙ

СТРУКТУРЫ САЙТА ООО «ЦЕНТР АВТОМАТИЗАЦИИ»

2.1 Краткая характеристика деятельности ООО «Центр Автоматизации»,

Дата добавления: 2015-08-31