С П Е Ц И Ф И К А Ц И И H T M L О Б Щ А Я С Т Р У К Т У РА Я З Ы К А H T M L С Т Р У К Т У РА H T M L - Д О К У М Е Н ТА О С Н О В Ы Я З Ы К А H T M L 4 . 0
HTML (Hyper Text Markup Language) – язык гипертекстовой разметки Гипертекст (hypertext) – это особый текст, в котором есть ссылки на другие документы Web-страницы можно создавать вручную с помощью языка HTML, при этом ввод HTML-кода выполняется в любом текстовом редакторе или с помощью HTML-редакторов В HTML, помимо команд языка, в исходный HTML-код также может записываться коды сценариев
Спецификации HTML
Язык HTML был разработан британским учёным Тимом Бернерсом-Ли в конце 80-х г.
1995 г. – World Wide Web Consortium (W3C) разрабатывает спецификацию HTML 2.0
Январь 1997 г. – выпущена спецификация HTML 3.2
Декабрь 1997 г. – выходит спецификация HTML 4.0
1999 г. – вносятся изменения (HTML 4.01) HTML 5.0 – в разработке
Общая структура языка HTML
При разработке HTML-документа выполняется разметка текстового документа с помощью тэгов (tags) Тэги заключаются в угловые скобки (< >). Все объекты, не заключенные в угловые скобки, воспринимаются браузером как текстовые элементы
контейнер
Например
Существует два типа тэгов
одиночный
Например
Теги могут записываться с параметрами (атрибутами) параметры отделяются друг от друга пробелами порядок следования параметров произволен многие параметры требуют указания их значений, которое указывается через знак равенства
HTML позволяют использовать принцип вложения одного тэга в другой HTML нечувствителен к регистру исключения: URL-адреса и escape-последовательности
Escape-последовательности
запись escape-последовательности подразумевает замену служебных символов специальными командами, которые в процессе интерпретации документа замещаются выводимыми на экран искомыми знаками escape-последовательность начинаются с символа ампресанд (&) и заканчиваются точкой с запятой, а между ними размещается команда, записываемая в нижнем регистре
Символ "меньше"; левая угловая скобка Символ "больше"; правая угловая скобка Парные кавычки Ампресанд Символ авторского права Символ зарегистрированной торговой марки
Команда
< > " & &сору; ®
Комментарии
HTML-документ может содержать комментарии, которые не обрабатываются интерпретаторами браузеров и не отображаются на экране
Цветовые спецификации
Некоторые элементы языка HTML могут иметь в качестве параметров переменные, обозначающие цвета Цвет задаётся с помощью меток или цифрового кода в палитре RGB (Red, Green, Blue) Перед самим кодом ставится символ #, далее следует набор из шести знаков в шестнадцатеричной системе счисления
Цвет Белый Черный Зеленый Светло-зеленый Серый Светло-серый Желтый Темно-бордовый Синий Темно-синий Голубой Изумрудный Красный Пурпурный Розовый Оливковый Значение RGB
Документ HTML Заголовок документ Внешний заголовок Тело документа Основной код
Внешний заголовок Содержимое Web-страницы
Раздел документа HEAD
Раздел HEAD может включать теги TITLE – определяет название документа META – сообщает браузеру дополнительную информацию о документе BASE – задает базовый адрес документа STYLE – определяет внешний вид документа ISINDEX – указывает, что данный документ будет использоваться в поисковых системах SCRIPT – определяет операторы интерпретируемых языков программирования, таких как JavaScript и VBScript и др.
Заголовок странички
Тэг-контейнер служит для того, чтобы дать заголовок документу. Оно обычно показывается в заголовке окна браузера
Раздел документа BODY
Тэг-контейнер
содержит в себе всю отображаемую на странице информацию. Тэг может иметь параметры: BACKGROUND – фонового изображение BGCOLOR – цвет фона документа BGPROPERTIES – если установлено значение FIXED, фоновое изображение не прокручивается BOTTOMMARGIN – устанавливает границу нижнего поля документа в пикселах LEFTMARGIN – устанавливает границу левого поля документа в пикселах RIGHTMARGIN – устанавливает границу правого поля документа в пикселах TOPMARGIN – устанавливает границу верхнего поля документа в пикселах SCROLL – устанавливает наличие или отсутствие полос прокрутки окна браузера TEXT – определяет цвет текста LINK – определяет цвет еще не просмотренной ссылки ALINK – определяет цвет активной гиперссылки VLINK – определяет цвет уже просмотренной ссылки
Форматирование текста
Логическое форматирование
обозначают структурные типы текстовых фрагментов Фрагменты с логическим форматированием браузеры отображают на экране определённым образом, заданным по умолчанию
Физическое форматирование
определяют формат отображения указанного в них фрагмента текста в окне браузера
– цитаты – выделение текстового фрагмента как определение <ЕМ> , – важные фрагменты текста – обозначение текста как вставки – обозначение текста как небольшого фрагмента программного кода – обозначение текста, выдаваемого программой – обозначение в тексте имен переменных программ – обозначение текста, вводимого пользователем с клавиатуры
Обозначение аббревиатуры
Имеет параметр TITLE, в качестве значения которого можно указать полную форму записи аббревиатуры
Обозначение цитат
используется для отметки цитат или названий книг и статей, ссылок на другие источники и т. д.
отмечает короткие цитаты в строке текста цитат используется для отображения длинных
Обозначение определений
– выделение текстового фрагмента как определение
Выделение важных фрагментов
> обычно размечают более важные фрагменты текста, чем те, что размечены <ЕМ>
Обозначение вставок и удалений
1.
2.
используют для отметки изменений, вносимых в документ. используют для отметки в документе удалённого текса Имеют два необязательных параметра: CITE - URL-адрес документа, поясняющего подробности внесенных изменений DATETIME указывает дату внесения изменений в формате: YYYY-MM-DDThh:mm:ssTZD
Обозначение элементов программ
- обозначение текста как небольшого фрагмента программного кода - текст, выдаваемой программой - обозначение в тексте имён переменных программ
Обозначение вводимого с клавиатуры текста
– обозначение текста, вводимого пользователем с клавиатуры
Тэги физического форматирования текста
отображает текст полужирным шрифтом отображает текст курсивом отображает текст моноширинным шрифтом отображает текст подчеркнутым и отображают текст, перечеркнутый горизонтальной линией выводит текст шрифтом большего размера, чем непомеченная часть текста выводит текст шрифтом меньшего размера, чем непомеченная часть текста сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом меньшего размера
Изменение параметров шрифта
указывает параметры шрифта.
Имеет параметры: FACE - типа шрифта, которым программа просмотра пользователя будет выводить текст SIZE - размер шрифта COLOR - цвет шрифта
Форматирование информации на веб-страничке
1.
2.
3.
4.
Разделение на абзацы Перевод строки Заголовки внутри HTML-документа Горизонтальные линии
Разделение на абзацы
- определяет абзац Имеет параметр выравнивания ALIGN, который может принимать значения: LEFT – выравнивание текста по левой границе окна браузера CENTER – выравнивание по центру окна браузера RIGHT – выравнивание по правой границе окна браузера JUSTIFY – выравнивание по ширине (по двум сторонам)
Перевод строки
Включение тэга размещение последующего текста с начала новой строки в текст документа обеспечит Бывают ситуации, когда требуется выполнить операцию противоположного назначения – запретить перевод строки. Для этого существует тэг-контейнер
Заголовки внутри HTML-документа
Для разметки заголовков используются тэги , , , и Имеют параметр выравнивания ALIGN: RIGHT – позиционирование по правой границе документа LEFT – позиционирование по левой границе документа CENTER – позиционирование по центру документа ,
Горизонтальная линия
Тэг позволяет провести горизонтальную линию в окне большинства программ просмотра Иметь параметры: ALIGN – выравнивает по краю или центру, может принимать значения LEFT, CENTER, RIGHT WIDTH – устанавливает длину линии в пикселях или процентах от ширины окна браузера SIZE – устанавливает толщину линии в пикселях COLOR – указывает цвет линии с помощью формата RGB или стандартного имени
Для организации ссылки необходимо сообщить браузеру, что является указателем ссылки, а также указать адрес документа, на который она ссылается. Оба действия выполняются при помощи тэга Тэг <А> имеет единственный параметр HREF
Внутренние ссылки
Для построения внутренней ссылки сначала нужно создать указатель, определяющий место назначения После того как место назначения определено, можно создать ссылки на него
Ссылки на документы различных типов
Ресурсы Internet Web-страница e-mail Newsgroup FTP TelNet Формат ссылки
В языке HTML предусмотрены следующие типы списков: маркированный нумерованный список определений
Маркированный список
Для создания маркированного списка необходимо использовать тэг-контейнер Каждый элемент списка должен начинаться тэгом
имеет параметр TYPE, который может принимать значения: DISC – маркеры отображаются закрашенными кружками CIRCLE – маркеры отображаются не закрашенными кружками SQUARE – маркеры отображаются закрашенными квадратиками
Нумерованный список
Для создания нумерованного списка следует использовать тэг-контейнер Каждый элемент списка должен начинаться тэгом Тэг
может имеет параметры TYPE и START Параметр TYPE задаёт вид нумерации списка: А – задаёт маркеры в виде прописных латинских букв a – задаёт маркеры в виде строчных латинских букв I – задаёт маркеры в виде больших римских цифр i – задаёт маркеры в виде маленьких римских цифр 1 – задаёт маркеры в виде арабских цифр Параметр START позволяет начать нумерацию списка не с первого значения Тэг
для нумерованных списков разрешает использовать параметры TYPE и VALUE. Параметр TYPE может принимать такие же значения, как и для тэга . Параметр VALUE позволяет изменить номер данного элемента списка
Список определений
Списки определений задаются с помощью тэга контейнера
. Внутри контейнера тэгом
помечается определяемый термин, а тэгом
– его определение
Графика
На web-страницах в подавляющем большинстве случаев используется растровая графика форматов: GIF, JPG и PNG Использование графики: Фоновые изображения ( параметра BACKGROUND тэга
) Встраивание изображений в HTML-документы Использование изображения в качестве ссылки
Встраивание изображений в HTML-документы
Для встраивания изображений в HTML-документ используется тэг , имеющий обязательный параметр SRC, определяющий URL-адрес файла с изображением
Параметр ALIGN тега
ТОР – верхняя граница изображения выравнивается по самому высокому элементу текущей строки ТЕХТТОР – верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки MIDDLE – выравнивание середины изображения по базовой линии текущей строки ABSMIDDLE – выравнивание середины изображения посередине текущей строки BASELINE или BOTTOM – выравнивание нижней границы изображения по базовой линии текущей строки ABSBOTTOM – выравнивание нижней границы изображения по нижней границе текущей строки LEFT – изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны RIGHT – изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны
Другие параметры тега
WIDTH - ширина HEIGHT - высота HSPACE - отступы от изображения по горизонтали VSPACE - отступы от изображения по вертикали BORDER - рамка ALT - альтернативный текст
Использование изображения в качестве ссылки
Графические изображения могут использоваться как указатель гипертекстовых связей. Для этого изображение необходимо вставить внутрь тэга контейнера <А>
Таблицы в HTML
Документ может содержать произвольное число таблиц Допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом и завершаться тэгом - заголовок таблицы – строка таблицы – ячейка-заголовок – ячейка-данных
Параметры тэга
BORDER – управляет изображением рамки таблицы CELLSPACING – определяет расстояние между ячейками CELLPADDING – определяет расстояние между содержимым ячейки и её границами WIDTH – определяет ширину таблицы ALIGN – определяет горизонтальное расположение таблицы в области просмотра HEIGHT - определяет высоту таблицы BGCOLOR - задает цвет подложки всей таблицы
BORDER=2
BORDER=2 CELLSPACING=10
BORDER=2 CELLSPACING=10 CELLPADDING=10
BORDER=2 WIDTH=70%
BORDER=2 WIDTH=200 ALIGN=CENTER
Объединение нескольких ячеек
Для сложных таблиц необходимо объединять нескольких ячеек в одну Данная возможность реализуется с помощью параметров COLSPAN и ROWSPAN, задаваемых в кодах
или
. COLSPAN определяет, на сколько столбцов следует расширить текущую ячейку по горизонтали, ROWSPAN по вертикали
Дополнительные параметры
BORDERCOLOR определяет цвет всех элементов рамок таблицы BORDERCOLORLIGHT окрашивает в заданный цвет левый и верхний края всей таблицы и соответственно правый и нижний края каждой ячейки, а BORDERCOLORDARK задаёт цвета противоположных краев BACKGROUND определяет фоновый рисунок для таблицы или ячейки. Этот параметр может задаваться в тэгах
,
и
FRAME - прорисовка рамок вокруг таблицы RULES - прорисовка внутренних линий сетки таблицы
Параметр FRAME может принимать следующие значения BOX или BORDER – рамка рисуется со всех четырех сторон ABOVE – только с верхней стороны BELOW – только с нижней стороны HSIDES – рисуется нижняя и верхняя сторона VSIDES – рисуется левая и правая сторона LHS – только с левой стороны RHS – только с правой стороны VOID – таблица без внешних рамок
Параметр RULES может принимать следующие значения ALL – рисуются все внутренние линии GROUPS – рисуются только линии, разделяющие группы ROWS – рисуются линии, разделяющие строки COLS – рисуются линии, разделяющие столбцы NONE – внутренние линии не рисуются
Фреймы
Фреймы позволяют разбить окно браузера на несколько прямоугольных областей, располагающихся рядом друг с другом В каждую из областей можно загрузить отдельный HTML-документ, просмотр которого осуществляется независимо от других
Правила описания фреймов
Для описания структуры фреймов применяются тэги и Фреймы определяются с помощью тэга