- •Основы создания web-страниц
- •Составители а.В. Распопов, д.В.Меркулов, о.Е.Ефимова
- •Введение
- •Основные понятия, инструменты создания и просмотра web-страниц
- •Стандарты языка html
- •Браузеры
- •Редакторы html-документов
- •Основы языка html
- •Синтаксис html-тегов
- •Структура html-документа
- •Адресация ресурсов
- •Задание к лабораторной работе №1 «Основные понятия, инструменты создания и просмотра web-страниц. Основы языка html»
- •Основные теги html
- •3.1 Комментарии
- •3.2 Символьные примитивы (&-последовательности)
- •Форматирование текста
- •4.1 Разбиение текста
- •4.2 Форматирование символов
- •4.2.1 Логическое форматирование
- •4.2.2 Физическое форматирование
- •4.3 Параметры шрифта
- •4.4 Заголовки разных уровней внутри текста
- •Задание к лабораторной работе №2 «Основные теги html. Форматирование текста»
- •Представление цвета и графики в html-документах
- •5.1 Формы представления цвета
- •5.2 Цвет текста и фон документа
- •5.3 Графические форматы
- •5.4 Графические изображения
- •Задание к лабораторной работе №3 «Представление цвета и графики в html-документах»
- •Задание к лабораторной работе №4 «Списки»
- •Гиперссылки
- •Задание к лабораторной работе №5 «Гиперссылки»
- •Изображение-карта
- •Задание к лабораторной работе №6 «Изображение-Карта»
- •Задание к лабораторной работе №7 «Таблицы»
- •10.1 Описание структуры набора фреймов
- •10.2 Общий вид html-документа, задающего набор фреймов
- •10.4 Целевые фреймы
- •11.1 Простейшая форма
- •11.2 Типы элементов форм
- •Задание к лабораторной работе №9 «Формы»
- •Несколько советов
- •Список использованных источников
- •Методические указания к лабораторным работам по курсу «Информационные технологии» для студентов специальности 080801
5.4 Графические изображения
Тег <IMG> вставляет изображение в текстовый поток. Закрывающего компонента этот тег не имеет.
Обязательный атрибут: |
|
SRC = url |
адрес графического файла. |
Основные необязательные атрибуты: |
|
ALT = текст |
альтернативный текст, выводимый в режиме браузера без загрузки изображений; |
BORDER = значение |
толщина обрамляющей рамки в пикселах, 0 – отсутствие рамки (по умолчанию); |
HEIGHT = значение |
высота изображения в пикселах (по умолчанию оригинальная), либо в процентах от высоты окна браузера; |
WIDTH = значение |
ширина изображения в пикселах (по умолчанию оригинальная), либо в процентах от ширины окна браузера; |
HSPACE = значение |
свободное пространство слева и справа от изображения в пикселах; |
VSPACE = значение |
свободное пространство сверху и снизу от изображения в пикселах; |
ALIGN = значение |
выравнивание изображения по горизонтали или вертикали. Значения TEXTTOP, ABSCENTER, CENTER, BOTTOM, ABSBOTTOM обеспечивают различные варианты вертикального выравнивания относительно текстовой строки. При применении этих значений вставленное изображение разрывает текстовый поток. Если заданы значения LEFT либо RIGHT, изображение соответствующим образом будет выровнено по горизонтали; |
USEMAP = #имя |
указывается имя, задаваемое в теге MAP, задающем в данном изображении области, чувствительные к щелчку мыши |
Несмотря на то, что формально обязательным является только атрибут SRC, на практике необходимо указывать и альтернативный текст (атрибут ALT). Ведь многие работают с браузером в режиме без загрузки изображений, особенно когда связь плохая, и документ загружается долго. К тому же, до сих пор существуют браузеры, не поддерживающие графики.
Значения атрибутов BORDER, HEIGHT и WIDTH тоже лучше указывать явным образом, не полагаясь на умолчания. Само наличие атрибутов HEIGHT и WIDTH говорит о возможности масштабирования исходного изображения. Увеличивать исходное изображение обычно бессмысленно, поскольку это ведет к потере качества. Масштабирование изображений в сторону увеличения применяется в особых случаях, когда необходимо вывести цветные полосы либо прозрачные "распорки" строго определенной ширины и высоты. При этом достаточно изготовить изображение размером 1х1 пиксел (нужного цвета или прозрачное) и вставить в документ, задав необходимые размеры.
Сильно уменьшенные варианты изображений используют довольно часто, например, для создания каталога миниатюр, каждая из которых имеет гиперссылку на полномасштабное изображение.
Задание к лабораторной работе №3 «Представление цвета и графики в html-документах»
Тщательно изучить содержимое раздела 5.
Используя атрибуты тега <BODY>, приведенные в подразделе 5.2, поэкспериментировать с заданием цветов, способами, указанными в 5.1.
Задействовать любой из доступных файлов-изображений (например, фоновые рисунки рабочего стола Windows) в Вашей html-странице.
Поэкспериментировать со всеми атрибутами тега <IMG>.
Загрузить несколько web-страниц различной тематики из сети Интернет. Сделать выводы, об используемых в них различных сочетаниях цвета.
СПИСКИ
HTML позволяет создавать нумерованные (упорядоченные), маркированные (неупорядоченные) списки, а также так называемые списки определений (используются сравнительно редко). Фрагмент текста, представляющий собой список, заключается в теги:
<OL> ... </OL> упорядоченный список (от английского ordered list)
<UL> ... </UL> неупорядоченный список (от английского unordered list)
<DL> ... </DL> список определений (от английского definition list)
Каждый элемент упорядоченного или неупорядоченного списка заключается в теги <LI> ... </LI> (от английского list item). Элементы списка определений заключается в теги <DT> ... </DT> (термин) либо <DD> .. </DD> (определение). При выводе текста браузер располагает каждый элемент списка с новой строки, предваряя его номером либо маркером в случае, соответственно, упорядоченного или неупорядоченного списка.
В списке определений текст, заключенный между тегами <DD> ... </DD>, сдвигается на некоторое количество позиций (в разных браузерах по-разному) вправо относительно остального текста. Это свойство можно с успехом использовать и в том случае, когда по существу никакого списка нет, а просто надо сдвинуть ряд строк правее основного текста.
Тег <OL> имеет необязательные атрибуты:
TYPE = формат |
Формат нумерации. Может иметь значения: арабские цифры (по умолчанию); прописные буквы; строчные буквы; большие римские цифры; маленькие римские цифры. |
|
START = значение |
Первый номер в списке (по умолчанию 1). |
|
Тег <UL> имеет необязательный атрибут
TYPE = формат |
Формат маркера. Может иметь значения: Disc – диск (по умолчанию); Circle – окружность; Square – квадрат. |
Пример ненумерованного списка:
<UL>
<LI>Иван;
<LI>Данила;
<LI>белая кобыла
</UL>
Заменив </UL> на </OL>, получим пример нумерованного списка.
Пример списка определений:
<DL>
<DT>HTML
<DD>Термин HTML (HyperText Markup Language) означает 'Язык
маркировки гипертекстов'. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
<DT>html-документ
<DD>Текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html).
</DL>
Если определяемые термины достаточно коротки, можно использовать тег <DL COMPACT>, например:
<DL COMPACT>
<DT>А
<DD>Первая буква алфавита
<DT>Б
<DD>Вторая буква алфавита
<DT>В
<DD>Третья буква алфавита
</DL>
Допустимы вложенные списки, они очень удобны при подготовке разного рода планов и оглавлений:
<H1>HTML поддерживает несколько видов списков </H1>
<DL>
<DT>Ненумерованные списки
<DD>Элементы ненумерованного списка выделяются специальным символом и отступом слева:
<UL>
<LI>Элемент 1
<LI>Элемент 2
<LI>Элемент 3
</UL>
<DT>Нумерованные списки
<DD>Элементы нумерованного списка выделяются отступом слева, а также нумерацией:
<OL>
<LI>Элемент 1
<LI>Элемент 2
<LI>Элемент 3
</OL>
<DT>Списки определений
<DD>Этот вид списков чуть сложнее, чем два предыдущих, но и выглядит более эффектно.
<P>Помните, что списки можно встраивать один в другой, но не следует закладывать слишком много уровней вложенности. </P>
<P>Обратите внимание, что внутри элемента списка может находиться несколько абзацев. Все абзацы при этом будут иметь одинаковое левое поле. </P>
</DL>