- •Система адресации
- •Ip-адрес
- •Ip-адрес: 01111011110010000011001001100100
- •Адрес url
- •Сервисы Интернета
- •Общие сведения о языке html
- •Теги html
- •Структура документа html
- •Функциональные разделы документа
- •Создание списков
- •Создание таблиц
- •Задание 1. Ввод текста
- •Задание 2. Создание списков
- •Задание 3. Формирование таблиц
- •Гипертекстовые ссылки и якоря
- •Рисунки наWeb-страницах
- •Управление стилем шрифта
- •Форматирование фраз
- •Задание 1.Изменение оформления документа
- •Задание 2. Изменение оформления фрагментов документа
- •Задание 3. Создание гиперссылок
- •Задание 4. Использование графики
- •5. Создание фреймов
- •6. Использование фреймов
Создание списков
Язык HTML позволяет создавать списки нескольких типов. Широко используются упорядоченные (нумерованные), неупорядоченные (маркированные) и списки определений.
Для задания упорядоченного списка используются теги <OL> и </OL>, а для создания неупорядоченного списка - <UL> и </UL>. Список заключают между открывающим и закрывающим тегом, причём, элементы списка помещают между тегами <LI> и </LI>. Закрывающий тег </LI> можно опустить.
Теги <OL>, <UL> и <LI> могут содержать атрибут TYPE=, который определяет способ пометки элементов списка. Упорядоченные списки можно нумеровать арабскими цифрами, римскими цифрами и латинскими буквами (в нужном регистре), а элементы неупорядоченного списка можно пометить маркерами в виде чёрного кружка (по умолчанию), белого кружка или квадратика.
Списки могут быть вложенными. Элементы списков могут содержать гиперссылки и теги, используемые для форматирования и оформления фрагментов.
Списки определений начинают с тега <DL> и заканчивают тегом </DL>. Маркеры или нумерацию в этих списках не используют. Список состоит из определяемых терминов и соответствующих определений. Определяемые термины помечают тегом <DT>, а определения - тегом <DD>. Закрывающие теги можно опустить. Определения обычно изображаются на экране с отступом от левого края.
Пример 7
<html>
<head>
<title>Вложенные списки</title>
</head>
<body>
<h1>Устройства компьютера</h1>
<ul>
<li>Внешние</li>
<ol>
<li>Принтер</li>
<li>Сканер</li>
<li>Монитор</li>
</ol>
<li>Внутренние</li>
</ul>
</body>
</html>
Пример8
<html>
<head>
<title>Списки с форматированием</title>
</head>
<body>
<h1>Компьютерные стандарты</h1>
<dl>
<dt><strong>MIDI (Musical Instrument Digital Interface)</strong>
<dd>Стандарт подключению к компьютеру музыкальных инструментов.
<dt><strong>MPC (Multimedia PC)</strong>
<dd>Стандарт описывающий требования к мультимедийному персональному компьютеру.
<dt><strong>OLE (Object Linking and Embedding)</strong>
<dd>Технология связывания и внедрения объектов, стандарт компании Microsoft.
<dt><strong>Plug and Play</strong>
<dd>Стандарт, по которому элемент оборудования содержит сведения о модели и компании изготовителя и допускает настройку программными средствами.
</dl>
</body>
</html>
Создание таблиц
Таблица – это один из наиболее удобных способов представления данных. В создании Web-страниц таблицы играют особую роль, так как позволяют размещать объекты в заданных местах. Язык HTML имеет богатые возможности по созданию таблиц.
Таблица начинается с тега <TABLE> и завершается тегом </TABLE>. Текст внутри таблицы заключается в специальные теги, определяющие элементы таблицы (заголовки, строки, ячейки).
Пара тегов <CAPTION> и </CAPTION> определяет заголовок таблицы. Заголовок выводится над таблицей (по умолчанию) или под таблицей.
Теги <TR> и </TR> используют для задания строк таблицы. Закрывающий тег можно опустить.
Строки таблиц состоят из ячеек. Ячейки помечаются либо тегами <TH>, содержащими заголовки столбцов и строк, либо тегами <TD>, содержащими обычные данные. Эти теги являются парными, но закрывающие можно опустить.
Внутри ячеек могут содержаться любые данные и любые теги HTML, допускаемые в теле документа.
Рамку вокруг таблицы или вокруг нескольких ячеек можно задать с помощью атрибута BORDER=. Значением этого атрибута является толщина рамки в пикселях.
При отображении таблицы на экране происходит автоматический подбор размеров ячеек в соответствии с объёмом размещаемой информации и заданными атрибутами.
Пример 10
<html>
<head>
<title>Таблицы</title>
</head>
<body>
<table width="90%" border="10" cellspacing="10" cellpadding="2">
<caption>Основные теги таблицы</caption>
<tr><td><b>Открываюший тег</b><td><b>Закрывающий тег</b>
<td><b>Описание</b>
<tr><td>TABLE<td rowspan="2">Обязателен<td>Начало и конец таблицы
<tr><td>CAPTION<td>Начало и конец заголовка таблицы
<tr><td>TR<td rowspan="2">Не обязателен<td>Начало строки таблицы
<tr><td>TD<td>Начало ячейки таблицы
</table>
</body>
</html>
Последовательность действий