Лабораторная работа №3. Добавление различных элементов на 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 Выравнивает вершину изображения по самым высоким точкам строки