Категории:

Дом Здоровье Зоология Информатика Искусство Искусство Компьютеры Кулинария Маркетинг Математика Медицина Менеджмент Образование Педагогика Питомцы Программирование Производство Промышленность Психология Разное Религия Социология Спорт Статистика Транспорт Физика Философия Финансы Химия Хобби Экология Экономика Электроника

Отображение встроенных рисунков

Изображения в Интернете бывают разных форматов. Самыми признанными и распространенными среди них являются GIF, JPG.

Формат GIF позволяет создавать анимированные картинки. Этот формат является сжатым, и допустимое количество цветов в нем 256. Сжатие происходит без потерь, т.е. изображение записывается без каких-либо преобразований.

Формат JPG также является сжатым, и применяется для изображений требующих большое количество цветов вплоть до 16 млн. Сжатие происходит после оптимизации и поэтому происходят потери в качестве. Размер файла сильно зависит от требуемого качества изображения, которое может иметь 7 уровней качества (от очень плохого до наилучшего).

Для размещения на Web-странице встроенного рисунка используем тег <IMG>. Этот тег имеет атрибут scr указания адреса отображаемого рисунка, но можно использовать вместо пути его URL в Internet'е.

<html>

</html>

Первая картинка будет загружаться из http://www.mjk.msk.ru/~dron/images/prob.gif.

Вторая уже будет загружаться из каталога высшего уровня, т.е. в данном случае прямо из http://www.mjk.msk.ru/~dron/.

Последняя картинка демонстрирует возможность загрузки картинок с других сайтов, и загрузится с сайта http://www.rambler.ru/. Эти названия изображений даны только для примера и на самом деле не существуют !!!

Кроме атрибута src существуют еще несколько атрибутов:

alt - этот атрибут задает текст, который будет изображаться вместо картинки, если она не загрузилась или не отображается. Этот текст также выскакивает в всплывающей подсказке. Как правило в тексте указывается краткое описание изображения или ссылки, а также иногда содержит в себе название файла с его размером.

Пример:

Большинство атрибутов в html не требуют заключения в кавычки, но атрибут alt лучше ограничивать, т.к. он может содержать пробелы и разделительные знаки, которые браузер не сможет обработать.

lowsrc - источник изображения низкого качества или размера, для быстрой предварительной загрузки.

align - задает выравнивание изображения относительно текущей строки:

align=top Выравнивает верхний край изображения по верхнему краю текущей строки.

align=middle Выравнивает центр изображения по базовой линии текущей строки.

align=bottom - Установка по умолчанию. Выравнивает нижний край изображения по базовой линии текущей строки.

align=left - Выравнивает изображение по левому полю.

align=right - Выравнивает изображение по правому полю.

width и height - Эти атрибуты задают горизонтальный и вертикальный размер картинки, чтобы еще до начала загрузки изображения браузер выделил ему требуемое место.

border - Задает толщину рамки, которой будет обрисовываться изображение. Если изображение не является ссылкой, то оно по умолчанию не окружается рамкой. Если же это изображение-ссылка, то для толщина рамки будет равна 2. Рамка иногда может портить стиль вашей страницы, тогда используйте border=0.

vspace - Используется для указания ширины пространства сверху и снизу от изображения в пикселах. Как правило по умолчанию равно 0. Но может быть и иным.

usemap и ismap - Устанавливают на картинку карты ссылок, на которых я остановлюсь подробнее в следующих шагах.

СОДЕРЖАНИЕ РАБОТЫ

Ознакомиться с теоретическим материалом.
Загрузить программу Блокнот.
Создать HTML-документ, который в окне Web-браузера отобразится так, как показано на примере.
Сохранить набранный текст в файл с расширением *.html
Открыть файл в окне браузера и, если есть недостатки, устранить их.
Выполнить одно из заданий, выданное преподавателем. Открыть файл в окне браузера.

Задание №1

Создайте HTML-документ, который в окне браузера отображается, как показано на рис.8.4.

Рис.8.4

Листинг задания №1

<HTML>

<HEAD>

<! - - Строка заголовка - - >

<TITLE>Мой первый HTML-документ</TITLE>

</HEAD>

<BODY>

<FONT size=5 color=red><p align=center><b>Типы интернет-рекламы</p></b></FONT>

<br>

<FONT color=red size=5><cite>Медийная</cite><tt> (обычная баннерная)</tt></FONT>

<br>

<FONT size=4 color=blue><em>- Баннерные сети

<br>- Посещаемые сайты<br>- Порталы</em></FONT>

<br>

<FONT color=red size=5><cite>Контекстная</cite> <tt>(баннерная, текстовая)</tt></FONT>

- Узкоспециализированные сайты

- Каталоги

- Тематические баннепные сети</big></PRE>

<FONT color=red size=5><cite>Поисковая</cite> <tt>(обычно текстовая)</tt></FONT>

<P><i style="color:blue">-Поисковые системы<br>

- Системы поиска по сайту

</BODY>

</HTML>

Задание №2.

Создайте HTML-документ, который в окне браузера отображается, как показано на рис.8.5.

Рис.8.5.

Листинг задания №2

<html>

<title>Списки</title>

<h1>Архитектурно строительный институт</h1>

<h2><center>Маркированные списки</center></h2>

<ul>

<li type=disc>290300

<li type=square>290500

<li type=circle>290100

<li>072000

<li>291400

<li>340100

<li>311100

</li>

</ul>

</P>

<p><h1>Архитектурно строительный институт</h1>

<h2><center>Нумерованные списки</center></h2>

<li>290300

<li>290500

<li>290100

<li>072000

<li>291400

<li>340100

<li>311100

</li>

</ul>

</p>

<p><h1>Архитектурно строительный институт</h1>

<h2><center>Списки определений</center></h2>

<dl>

<dt>Институт осуществляет подготовку специалистов по следующим специальностям

<dd>290300

<dd>290500

<dd>290100

<dd>072000

<dd>291400

<dd>340100

<dd>311100

</ul>

</p>

</html>

Задание №3

Создайте HTML-документ, который в окне браузера отображается, как показано на рис.8.6.

Рис. 8.6.

Листинг задания №3

<HTML>

<HEAD>

Базы данных</FONT></CAPTION>

<TR><TD bgColor=orange><DIV align=center><FONT

face="Times New Roman"

color=#800000 size=4>Название БД</FONT></DIV></TD>

<TD bgColor=orange><DIV align=center><FONT face="Times New Roman"

color=#800000 size=4 >Количество документов</FONT></DIV></TD>

<TD bgColor=orange><DIV align=center><FONT face="Times New Roman" color=#800000 size=4>Стоимость поставки ($)</FONT></DIV> </TD></TR>

<DIV align=center><FONT face="Times New Roman" color=#ff0000

size=2>Федеральное и региональное <br>законодательство</FONT></DIV>