- •2. Создание web-страниц и web-сайтов
- •2.1 Общие сведения о создании Web-страниц
- •2.2 Html-тэги и их атрибуты
- •2.3 Создание и оформление Web-страниц
- •2.4 Форматирование текста в html
- •2.5 Вставка иллюстраций
- •2.6 Создание списков
- •2.7 Создание форм
- •2.8 Вставка гипертекстовых ссылок
- •2.9 Создание таблиц
- •2.10 Создание фреймов
- •2.11 Анимация на Web-страницах
- •2.12 Мета теги
- •2.13 Контрольные вопросы к раздела 2.1-2.13
- •2.14 Размещение Web-страниц в Интернете
- •2.15 Регистрация в поисковых системах и каталогах
- •Контрольные вопросы к разделам 2.14-2.15
2.5 Вставка иллюстраций
На каждую Web-страницу можно поместить произвольное число иллюстраций. Можно использовать готовые графические изображения или создать их самим. Рассмотрим, как вставить в Web-документ уже готовый рисунок.
Графические изображения, вставляемые в Web-документы, должны быть созданы в таком графическом формате, который поддерживается браузером. Стандартные форматы Web-графики – GIF, JPG и PNG. Размеры их файлов минимальны по сравнению с другими форматами, что значительно сокращает время загрузки из сети.
Вставим на первую страницу нашего сайта рисунок labor.jpg. Этот файл следует скопировать в папку Lab, которую мы создали для хранения файлов сайта.
Для вставки изображения в Web-документ используется одиночный тэг <img> с атрибутом src, значение которого соответствует имени вставляемого файла или его адресу в Интернете. С помощью необязательного атрибута border можно включить отображение рамки вокруг рисунка. Значение 1 для этого атрибута создаст рамку толщиной в 1 пиксель. Таким образом, тэг, вставляющий рисунок, должен выглядеть следующим образом:
<img src= labor.jpg border=1>
Вставим его после заголовка Добро пожаловать на страницу нашей лаборатории!
<html>
<head>
<title>Лаборатория АСУТП</title>
</head>
<body bgcolor=blue text=yellow >
<h1 align=center>
Добро пожаловать на страницу нашей лаборатории!
</h1>
<img src= labor.jpg border=1>
<center><font size=5><b><i>
Здесь Вы узнаете о наших достижениях и планах на будущее
</i></b></font></center>
</body>
</html>
Для того, чтобы выровнять рисунок по центру, следует, воспользовавшись тэгами <center></center>, записать строку кода HTML, вставляющего рисунок, следующим образом:
<center><img src= labor.jpg border=1</center>
Ограничим размер рисунка по ширине 300 пикселями, а по высоте – 400 пикселями:
<center><img src= labor.jpg border=1 Widht=300 height=400></center>
Получаем следующий код:
<html>
<head>
<title>Лаборатория АСУТП</title>
</head>
<body bgcolor=blue text=yellow >
<h1 align=center>
Добро пожаловать на страницу нашей лаборатории!
</h1>
<center><img src= labor.jpg border=1 Widht=300 height=400></center>
<center><font size=5><b><i>
Здесь Вы узнаете о наших достижениях и планах на будущее
</i></b></font></center>
</body>
</html>
Операционная система Windows не различает регистр букв в названиях имен файлов, но операционные системы семейства Unix различают его, поэтому следует тщательно следить за тем, чтобы имя файла в тэге указывалось с соблюдением регистра.
Ещё один пример:
<p><img src="/../img/logo.gif" alt="Логотип"></p>
В атрибуте src указывается местонахождение изображения, в alt – его название. Атрибут alt не является обязательным, но желательно его заполнять, т.к. это благотворно повлияет на раьоту поисковых систем.
Добавляем горизонтальную линию
Для того, чтобы поместить на странице горизонтальную линию, необходимо воспользоваться тегом <hr>. Для изменения длины и толщины линии используются параметры size и width.
Пример: <hr align="center" color="##0000FF " width="700">
Задаем пустую область по периметру изображения
Для этого используются атрибуты hspace и vspace. Например:
<p><img src="/img/logo.jpg" align="left" hspace="20" vspace="20">Логотип</p>