Теги изображения и видеоклипа
Рисунок вставляется в документ при помощи тега <IMG>.
<IMG
align=absbottom | absmiddle | baseline | bottom | left | middle | right | texttop | top
alt=text
border=n
height=n
width= n
>
align – задаёт выравнивание изображения или окружающего его текста. Позволяет создать эффект обтекания изображения окружающим его текстом;
alt – текст альтернативного описания изображения, который будет отображаться вместо изображения, если в браузере не установлена настройка Отображать рисунки;
border – целое число, задающее толщину рамки изображения;
height и width – целые числа, задающие высоту и ширину изображения. Изображение автоматически или растягивается так, чтобы занять всю отведённую под него область;
dynsrc – URL видеоклипа.
Например:
<IMG align=middle src=”globe.gif” width=100 height=100> Глобус
<IMG dynsrc=”cineapk.avi”>
Задание 3. Добавить в созданный документ рисунок или видеоклип.
Тег гиперссылки и закладки
Ни один документ не обходится без гиперссылок, т. е. адреса страницы, к которой перейдёт браузер после активизации гиперссылки. Для формирования гиперссылки надо создать закладку, куда будет оказывать гиперссылка, а также указатель гиперссылки, откуда и осуществляется переход на гиперссылку. Указателем гиперссылки может быть как слово или группа слов (текстовый указатель), так и изображение (графический указатель).
Синтаксис:
<A
href=url
name=name
target=window_name | _blank | _parent | _self | _top
>
href – URL – адрес;
name – имя метки;
target – определяет место загрузки документа, на который указывает гиперссылка.
Например:
<A href=http://www.microsoft.com> Связь c Microsoft </A>
Задание 4. Создать изображение – гиперссылку.
Каскадные таблицы стилей
Каскадная таблица стилей (CSS, Cascading Style Sheet) позволяет разработчику отделить процесс форматирования страницы от заполнения её конкретным содержанием, т. е. управлять как размещением текста в документе, так и шрифтом, его цветом и размером, используемым в документе.
Встраивание таблицы стилей в документ
Встраиваемая таблица стилей задаётся в блоке стилей, который располагается между парными тегами <STYLE> и обычно размещается в HEAD-блоке документа.
Задание 5. Встроить в документ таблицу стилей: жёлтый фон документа с чёрными буквами, заголовок Н1: полужирный шрифт Arial высотой 20 пт красного цвета, параграф: красная строка в 1,25 см, шрифт Arial высотой 12 пт.
Связывание документа с таблицей стилей
Таблицу стилей можно создать на основе отдельного CSS-файла с последующим применением его к документам. Таблица стилей хранится в текстовом CSS – файле.
Для связывания таблицы стилей с документом надо воспользоваться тегом <LINK>, который должен располагаться между парными тегами <HEAD>.
Задание 6. Выполнить задание 5 для случая, когда таблица стилей не встроенная, а связанная.
Задание 7. Возникают ситуации, когда один стиль применяется только в контексте другого. Создать документ, в котором заголовок Н1 должен иметь тёмно-синий цвет только в том случае, если его шрифт курсивный.
Классы стилей
Дополнительную гибкость применения таблицы стилей даёт возможность определения в ней различных классов стилей для одного и того же элемента, которые затем можно применять к элементам документа.
Задание 8. Создать 2 класса заголовка Н1: border – заголовок обрамляется красной рамочкой и выравнивается по центру; background – заголовок выравнивается по центру и имеет светло-зелёный фон.
Произвольное размещение элементов в документе
Язык HTML позволяет разработчику разместить любой элемент в том месте документа, в котором он пожелает. Для этого надо воспользоваться следующими свойствами атрибута style:
position – задаёт абсолютное или относительное положение элемента в документе. Допустимые значения:
absolute – атрибуты left и top задают в пикселах абсолютное размещение элемента в документе;
relative - атрибуты left и top задают в пикселах относительное размещение элемента в документе;
static – элемент размещается в документе точно так же, как если бы и не было атрибута position.
left, top, width, height – координаты верхнего левого угла элемента и его ширина и высота;
z-index – помещает элемент на переднем или заднем плане всех пересекающихся с ним элементов. Допустимые значения: auto или целое число, где 0 соответствует размещению элемента на заднем плане
Задание 9. Продемонстрировать эффект наложения текста на текст.
Задание 10. Продемонстрировать эффект наложения друг на друга 3 раскрашенных фрагментов.
Задание 11. Создать верхний индекс с помощью задания относительного расположения элементов документа.
Задание 12. Для абсолютно позиционированного фрагмента назначить фон заднего плана, типа обоев, на основе растрового изображения.
Задание 13. Создать фон заднего плана без привлечения графических изображений (использовать текст).
Задание 14. Вокруг элемента можно создавать границы с помощью свойств width (ширина границы), color (цвет) и style (стиль) атрибута border. Свойство style имеет следующие допустимые значения: solid, double, groove, ridge, inset, outset. Продемонстрировать все стили границы.