Лекция: Вставка иллюстраций
На каждую 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 не является обязательным, но желательно его заполнять, т.к. это благотворно повлияет на раьоту поисковых систем.