- •Краткие сведения из теории
- •Основные тэги языка html Тэги, определяющие структуру документа
- •Тэги, определяющие внешний вид документа
- •Тэги, применяемые для создания списков
- •Тэги, применяемые для вставки различных разделителей
- •Тэги, применяемые для вставки ссылок и графики
- •Тэги, применяемые для описания таблиц
- •Вставка бегущей строки
- •Порядок выполнения задания 1
- •Контрольные вопросы
Тэги, применяемые для вставки различных разделителей
Наименование |
Описание тэга |
Атрибуты |
Описание назначения атрибута |
<br> |
принудительный переход на новую строку |
|
|
<hr> |
вставка горизонтальной разделительной линии |
size=n |
устанавливает толщину линии в пикселях |
width=n |
устанавливает ширину линии в пикселях или процентах |
Тэги, применяемые для вставки ссылок и графики
Гиперссылка – это цветной текст или графический объект, который используется для перехода к другому файлу или объекту внутри существующего документа. Для переходов внутри документов на объекты предварительно устанавливают закладки.
Таблица - работа с ссылками |
|||
Наименование |
Описание тэга |
Атрибуты |
Описание назначения атрибута |
<a> текст или графический объект </a> |
вставка гиперссылки |
href="url" |
Осуществляет переход на файл, находящийся по адресу, записанному в url |
href="#name" |
Осуществляет переход к месту, обозначенному закладкой с именем name, в текущем документе |
||
<a> текст</a> |
вставка закладки |
name="имя_закладки" |
Осуществляет вставку закладки а определенное место web-страницы. Имя закладки должно содержать только буквы и/или цифры. Не рекомендуется в имени использовать пробелы. |
Пример. Необходимо с текущей страницы перейти на страницу lab2.html. Для этого создадим текстовую гиперрссылку, с поясняющим текстом "нажми для перехода"
в браузере |
html-код |
нажми для перехода |
<a href="lab2.html">нажми для перехода</a> |
Пример. Необходимо с текущей страницы перейти на страницу lab2.html. Для этого создадим графическую гиперрссылку. При нажатии на картинку будет осуществляться переход к файлу lab2.html
в браузере |
html-код |
|
<a href="lab2.html"><img src=setup.ico></a> |
Таблица - работа с графикой |
|||
Наименование |
Описание тэга |
Атрибуты |
Описание назначения атрибута |
<img src="url"> |
вставка рисунка, находящегося по адресу, записанному в url |
align=left|right|middle|top|bottom |
расположение рисунка относительно полей страницы |
width=n |
устанавливает ширину рисунка в пикселях |
||
height=n |
устанавливает высоту рисунка в пикселях |
||
border=n |
устанавливает толщину границы рисунка в пикселях |
||
Пример. Вставить рисунок priroda.gif по центру и установить для него размеры: ширина = 300 pix, высота = 250 pix
<img src="priroda.gif" align=middle width=300 height=250> |
Тэги, применяемые для описания таблиц
Таблица - набор ячеек, порождающихся пересечением строк и солбцов.
Основные структурные элементы таблицы |
|
Наименование элемента |
Описание |
строка |
набор ячеек, расположенных слева направо |
столбец |
набор ячеек, расположенных сверху вниз |
ячейка |
находится на пересечении строки и столбца |
граница |
служит для заключения всей таблицы в рамку и для разделения линиями ее строк и столбцов |
Рассмотрим базовые тэги, предназначенные для формирования структуры таблицы.
Наименование |
Описание тэга |
Атрибуты |
Описание назначения атрибута |
<table>содержимое таблицы</table> |
обозначают начало и конец, создаваемой таблицы |
border=n |
задает толщину в пикселях рамки таблицы |
bordercolor=цвет |
задает цвет рамки таблицы |
||
width=n |
задает ширину таблицы на странице в пикселях или процентах (например, 50%) |
||
height=n |
задает высоту таблицы на странице в пикселях или процентах (например, 80%) |
||
<caption>текст заголовка</caption> |
задает заголовок таблицы |
align=left|right|center|top|bottom |
задает выравнивание заголовка таблицы top - вверху, bottom - внизу |
<tr>содержимое строки</tr> |
задает строку таблицы |
align=left|right|center |
задает горизонтальное выравнивание содержимого в ячейках указанной строки |
valign=middle|top|bottom |
задает вертикальное выравнивание содержимого в ячейках указанной строки |
||
height=n |
задает высоту строки в пикселях или процентах от высоты таблицы (например, 80%) |
||
<td>содержимое ячейки</td> |
задает ячейку таблицы |
align=left|right|center |
задает горизонтальное выравнивание содержимого в указанной ячейке |
valign=middle|top|bottom |
задает вертикальное выравнивание содержимого в указанной ячейке |
||
width=n |
задает ширину ячейки в пикселях или процентах от ширины таблицы |
||
rowspan=n |
объединяет n ячеек, расположенных в одном столбце |
||
colspan=n |
объединяет n ячеек, расположенных в одной строке |
Примечание: основное правило при формировании структуры таблицы - таблица состоит из строк, каждая из которых состоит из соответствующих ячеек.
Пример. Создадим таблицу вида:
Запросы |
Классификация |
||
на выборку |
перекрестные |
итоговые |
|
Рассматриваемая таблица состоит из двух строк:
Первую строку составляют ячейки "Запросы" и "Классификация". Здесь ячейка "Запросы" получена объединением двух строк и соответственно для нее потребуется установить соответствующий атрибут. Кроме того, ячейка "Классификация" получена объединением трех столбцов и соответственно для нее также потребуется установить соответствующий атрибут.
Вторую строку составляют ячейки "на выборку", "перекрестные" и "итоговые".
HTML - код для построения такой таблицы выглядит так: <table width="100%" border="1"> <tr align="center"> <td rowspan="2"><span>Запросы</span></td> <td colspan="3"><span>Классификация</span></td> </tr> <tr> <td>на выборку</td> <td>перекрестные</td> <td>итоговые</td> </tr> </table>