- •Языки разметки документов Язык разметки
- •Задание функций обработки выделенных элементов
- •Выделение логических элементов документа
- •Описательная разметка
- •Теговая структура языка разметки
- •Инструментарий
- •Структура документа
- •Тег meta . Атрибут http-equiv
- •Тег meta . Атрибут name
- •Текст и шрифтовое оформление Логическая и физическая разметка
- •Элементы физической разметки
- •Элементы логической разметки
- •Другие элементы
- •Спецсимволы html
- •Список определений
- •Вложенные списки
- •Гиперссылки
- •Гиперссылки. Тег а
- •Гиперссылки. Url
- •Адрес ссылки может быть абсолютным, относительным и неполным.
- •Активные изображения
- •Серверные карты
- •Создание таблицы
- •Пример таблицы
- •Области применения таблиц в html
- •Фреймы в html
- •Элементы фреймовой структуры
- •Особенности фреймовой структуры
- •Фреймовая структура
- •Вложение фреймовая структура
- •История css
- •Включение css в html
- •Включение css в html. Внедрение
- •Включение css в html. Встраивание
- •Включение css в html. Импортирование
- •Включение css в html. Связывание
- •Синтаксис css
- •Синтаксис css. Селекторы
- •Синтаксис css. Псевдоклассы
- •Синтаксис css. Наследование
- •Язык xml Общие сведения о xml
- •Синтаксис xml
- •Конструкции языка xml Элементы данных
Список определений
Список определений представляет собой текст, состоящий из двух взаимосвязанных наборов — списка с терминами и списка определений терминов. Вначале указывается первый термин, ниже него идет его определение, затем следующий термин с определением и т.д.
DL - задает сам список (Definition List)
DT - термин (Definition Term)
DD - его определение (Definition Description)
<DL>
< DT >Термин 1</ DT >
<DD>Определение термина 1 </DD>
<DT>Термин 2</DT>
<DD>Определение термина 2 </DD>
</DL>
Вложенные списки
Вложенные списки предназначены для организации сложной иерархической структуры текста.
Чтобы корректно организовать вложение списков тег <OL> или <UL>, формирующий подпункты, должен располагаться внутри тега <LI>.
<ol> <li>Пункт 1 <ol> <li>Подпункт 1.1</li> <li>Подпункт 1.2</li> </ol> </li> <li>Пункт 2 <ol> <li>Подпункт 2.1</li> <li>Подпункт 2.2</li> </ol> </li> </ol>
Гиперссылки
Ссылки являются основой гипертекста, позволяя переходить от одного документа к другому простым нажатием кнопки мыши.
Ссылки на другие документы в HTML создаются либо с помощью элемента A, либо с помощью навигационных карт.
Элемент A применяется, если ссылкой планируется сделать часть текста или целое изображение.
Навигационные карты применяются, если ссылкой будет часть изображения.
Гиперссылки. Тег а
А (Anchor) Самый необходимый элемент, без которого Интернет просто немыслим. Используется для создания и использования гипертекстовых ссылок.
Атрибуты:
HREF - Задает адрес документа, на который следует перейти. href="URL“
TARGET - Имя окна или фрейма, куда браузер будет загружать документ. Возможные значения: имя_окна | _blank | _self | _parent | _top
TITLE - Добавляет поясняющий текст к ссылке в виде всплывающей подсказки. Такая подсказка отображается, когда курсор мыши задерживается на ссылке
NAME - используется для определения якоря внутри страницы. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки.
Гиперссылки. Url
URL (Uniform Resource Locator) - В World Wide Web используется для задания местоположения файлов на других серверах сети Internet.
В общем виде формат URL выглядит так:
protocol://host.domain[:port]/path/filename# anchor?search
protocol – протокол прикладного уровня: FILE | HTTP | MAILTO | FTP | GOPHER | WAIS | NEWS | TELNET
host.domain - адрес ресурса в сети Internet.
port - число, которое необходимо указывать, если протокол требует номер порта (отдельные сервера могут иметь свой отличительный номер порта). Стандартными портами являются : 21 – FTP | 23 – Telnet | 70 – Gopher | 80 – HTTP
anchor - имя закладки, созданной с помощью тега А с атрибутом NAME
search – строка запроса формируемая HTML формой методом GET
Адрес ссылки может быть абсолютным, относительным и неполным.
Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка http://www.w3.org/TR/html4/frameset.dtd
Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта document.html
Неполные адреса опускают имя файла, предполагая имя по умолчанию http://www.w3.org/
Использование изображений в HTML
Кодирование графической информации
Существуют два основных способа кодирования графической информации:
|
ВЕКТОРНЫЙ |
РАСТРОВЫЙ |
|
|
Векторная графика
При векторном способе рисунок представляется в виде комбинации простых геометрических фигур - точек, отрезков прямой, окружностей, прямоугольников и т. п. При этом для полного описания рисунка необходимо знать вид и базовые координаты каждой фигуры (например, координаты двух концов отрезка, координаты центра и диаметр окружности и т. д.). Этот способ кодирования идеально подходит для рисунков, которые легко разложить на простейшие фигуры, например, для технических чертежей.
Растровая графика
Растровый способ заключается в том, что все изображение по вертикали и горизонтали разбивается на достаточно мелкие прямоугольники - так называемые элементы изображения, или пиксели (Picture Element = pixel или pel). В файле, содержащем растровую графику, хранится информация о цвете каждого пикселя данного изображения. Чем меньше прямоугольники на которые разбивается изображение, тем больше разрешение, то есть, тем более мелкие детали можно закодировать в таком графическом файле.
Включение графики в HTML-документ
HTML-документ — это текстовый файл.
Графическую информацию размещают не в самом HTML-файле,а в отдельных файлах.
В HTML-файл помещают специальные команды включения графики. Эти команды указывают программе просмотра из каких файлов считывать графическую информацию и как располагать изображение на экране.
Существуют два различных способа использования изображений в Web-документе:
Связать изображение с документом, используя элементA. Активизация этой связи приводит к появлению изображения, либо в том же самом окне, либо в другом
Вставитьизображение в документ, используя элементIMG. Изображение становится частью документа и загружается вместе с ним и выводится, как его часть.
Тег <IMG>
Предназначен для отображения на web-странице изображений в графическом формате
Атрибуты:
SRC - Путь к графическому файлу. Обязательный атрибут. src =“URL“
ALT - Альтернативный текст для изображения. alt =“текст”
TITLE - Текст всплывающей подсказки. title =“текст”
ALIGN - Определяет как рисунок будет выравниваться по краю и способ обтекания текстом. align =bottom | top | middle | right | left
BORDER - Толщина рамки вокруг изображения. border = n
WIDTH - Ширина изображения. width = n|%
HEIGHT - Высота изображения. height = n|%
HSPACE - Горизонтальный отступ от изображения до окружающего контента. hspace = n
VSPACE - Вертикальный отступ от изображения до окружающего контента.
vspace = n
ISMAP - Говорит браузеру, что картинка является серверной картой-изображением. ismap
USEMAP - Ссылка на тег <MAP>, содержащий координаты для клиентской карты-изображения. usemap =URL
<p> Пример вставки изображения толщиной 5 рх .
<IMG SRC="/images/square.gif " ALT="Квадрат" TITLE =" Пример использования изображения" ALIGN="right" BORDER ="5" WIDTH="150" HEIGHT="150" HSPACE="5" VSPACE="7" >
в html-документ с заданным размером 150х150 , рамкой вокруг рисунка
Для изображения определено расположение по правому краю. Установлены отступы: горизонтальный – 5 рх и вертикальный – 7 рх. </p>

