- •Лабораторная работа №4 Разработка информационно-рекламного сайта
- •Краткая теория:
- •Шаг 1. Создание рабочего пространства.
- •Основные теги:
- •Изображения в html-документе
- •Добавляем изображение:
- •Работа со шрифтом.
- •Маркированные списки
- •Связь между документами
- •Обратная связь:
- •Создание таблиц в нтмl.
- •Бегущая строка
Маркированные списки
<ul>…</ul> - неупорядоченный список, внутри которого описываются пункты списка
<li>- отдельно взятый пункт
Сам маркер можно менять:
Для этого достаточно добавить атрибут type=
и присвоить ему одно из следующих значений:
square-квадрат
circle- окружность
disc–круг
можно присваивать значения также каждомо отдельно взятому пункту как на рисунке справа:
СПИСОК:
<ul>
<li type=square>пункт 1
<li type=circle>пункт 2
<li type=disc>пункт 3
</ul>
<ol>…</ol> - упорядоченный список
Возможные значения атрибута type=
A - (A, B, C…)
a – (a, b, c, …)
1 – (1, 2, 3, …)
I – (I, II, III, …)
Теперь когда, у нашего сайта уже набралось несколько страниц, необходимо их связать между собой с помощью гиперссылок:
Связь между документами
Гиперссылки - Это элементы, обеспечивающие взаимосвязь между гипертекстовыми документами или их отдельными частями
<A>…</A> - элемент гиперссылки;
Href= данный параметр определяет адрес перехода по гиперссылке;
Возможные значения:
адрес документа
адрес сайта в сети Интернет
электронная почта
адрес перехода к определенному фрагменту документа
Формат записи:
<A href= “адрес ссылки(на страницу или сайт”> текст гиперссылки</A>.
Также при описании тега <BODY> с помощью атрибутов можно задать цвета гиперссылок
link="" – неактивная ссылка
alink="" – активная ссылка
vlink="" – посещенная ссылка
hlink="" – ссылка при наведении мыши
Задаёт цвет ссылок - просто ссылки, активной ссылки, посещённой ссылки, цвет ссылки на которую наведена мышь... соответственно.
<body link="#008000" alink=”#00ff00” vlink=”#001200” hlink=”#00aa00”>
<A href=”http://www.tolgas.ru”> переход на сайт ПвГУС </A>
<A href=”stranica1.htm”> переход на страницу 1 </A>
</body>
Обратная связь:
Для создания гиперссылки, позволяющей отправлять почту, используется следующий формат записи:
<Ahref=mailto: электронный адрес> отправить письмо наuser@mail.ru</A>
Метки:
Для создания гиперссылки к определенному фрагменту внутри документа, необходимо определить некоторую опорную точку. Для этого используется тег вида:
<A name=“метка1”>Раздел 1</A>
Рис.1. Фрагмент внутри документа, к которому нужно получить быстрый доступ с начала страницы
Затем необходимо определить ссылку для перехода на данный фрагмент:
<A href=#раздел1>перейти к разделу 1</A>
Рис. 2. 3начало страницы (выбор пункта на который ссылается метка)
Создание таблиц в нтмl.
В HTMLтакже можно создавать таблицы. С их помощью обычно производят верстку документа
<table>…</table>- начало и окончание таблицы.
<tr>…</tr> - описание отдельно взятой строки.
<td>…</td>- описание отдельно взятой ячейки.
<th>…</th> - описание отдельно взятой ячейки, но определенной как ячейку-заголовок.
Атрибуты элементов таблицы:
<table>
<tr>, <tr>
<tr>
Бегущая строка
Для добавления бегущей строки на странице используют тег <marquee>…</marquee>
Атрибуты:
Height= высота области прокрутки, в пикселях
Width= ширина в пикселях
Loop=количество перемещений
Scrollamount= число пикселей при перемещении за 1 такт
Scrolldelay=определяет такт в миллисекундах
Bgcolor=цвет фона области прокрутки
Direction=- направление перемещения:
Возможные значения:
Left– справа на лево (по умолчанию)
Right– справа налево
Up- вверх
Down- вниз
Behavior= - вид перемещения:
Возможные значения
Slide– текст въезжает и останавливается
Scroll– стандартная беговая строка
Alternate– «туда-сюда»