Лабораторная работа №2. Добавление различных элементов на web-страницу

Цель работы: Научиться создавать основные элементы web-страницы такие как: вставка изображений, создание гиперссылок, различного вида списки и динамические кнопки.

Вставка изображений и других элементов страниц

Тег <hr>

Тег <hr> выводит на странице горизонтальную линейку.

Атрибуты

align = center | left | right

Если линейка короче окна, то этот тег управляет горизонтальным выравниванием линейки. Значение по умолчанию center.

noshade

Линейка выводится в виде сплошного прямоугольника (без тени).

size= число

Задает толщину линейки в пикселях.

width= число или %

Задает длину линейки в пикселях или в процентном отношении к ширине страницы. По умолчанию длина линейки равна ширине полного окна браузера.

Пример 5:

<hr noshade width=100%>

<hr noshade size=3 width=70% align=left>

<hr noshade size=10 width=70% align=right>

<hr size=5 width=50% align=left>

Результат:

Рис. 3 Горизонтальные линии

Тег <img>

Тег <img> размещает на странице изображение.

Атрибуты

src=url

Задает URL графического файла, который должен быть выведен на экран.

Таким образом, минимальный тег для размещения изображения на странице будет иметь вид <img src="тип изображения"> На рис.4 показано встроенное изображение и его исходный текст html. Хотя src является единственным по-настоящему обязательным атрибутом тега <img>, рекомендуется использовать и ряд других.

alt= текст

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

border= число

Задает ширину (в пикселах) границы, которая окружает просматриваемое изображение. Значение border=0 на практике используется для отмены вывода границы.

vspace= число

Используется совместно с атрибутом a1ign=1eft или a1ign=right. Задает в пикселах свободный интервал сверху и снизу от изображения.

height= число

Задает высоту изображения в пикселах. Атрибут не является обязательным, но желательно его использовать для увеличения скорости вывода Web-страницы.

width= число

Задает ширину изображения в пикселах. Атрибут не является обязательным, но его использование желательно, так как позволяет ускорить отображение Web-страницы.

Пример 6:

<img src="name.jpg" width=170 height=217 border=0 alt="САПР">

Результат:

Рис. 4 Вставка изображений

Имея эту информацию, браузеры получают возможность разметить страницу перед загрузкой изображения. Без значений ширины и высоты сначала выводится страница, а затем, после получения графического файла, вся страница выводится во второй раз с размещенным изображением (этот процесс может состоять и из нескольких проходов). Поэтому разумно затратить некоторое время на включение в тег информации о размерах изображения.

align= тип

Задает выравнивание изображения, используя один из приведенных в таблице атрибутов (рассмотрены наиболее распространенные).

Bottom Выравнивает нижнюю часть изображения по основанию текста. Это значение вертикального выравнивания по умолчанию

center В соответствии со спецификацией W3C этот атрибут обеспечивает горизонтальное центрирование изображения на странице. На практике браузеры трактуют его так же, как и align=middle

left Выравнивает изображение по левому полю и позволяет последующему тексту обтекать его

middle Выравнивает середину изображения по базовой линии текста

right Выравнивает изображение по правому полю и позволяет последующему тексту обтекать его

top Выравнивает вершину изображения по самым высоким точкам строки