HTML (HyperText Markup Language). Основные понятия Элемент – конструкция языка HTML. Он состоит из 3 частей: открывающий тег, содержимое, закрывающий. - презентация

1 HTML (HyperText Markup Language)

2 Основные понятия Элемент – конструкция языка HTML. Он состоит из 3 частей: открывающий тег, содержимое, закрывающий тег. Элементы могут быть вложенными друг в друга. Тег – начальный и конечный маркер элемента. Атрибут – параметр или свойство элемента. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами. кавычки обязательны (рекомендованы) имена тегов и атрибутов нечувствительны к регистру для любого из атрибутов определено значение по умолчанию форматирование текста, введённое с клавиатуры игнорируется браузером (есть исключение – тег ) содержимое

3 Структура HTML страницы заголовок окна основное содержимое Документ HTML Заголовок документа Внешний заголовок Тело документа

4 Базовые теги разметки … - параграф Абзац, выровненный вправо …. - общее выравнивание по центру (устарел) - переход на новую строку, атрибут clear задаёт выравнивание следующей строки …. … - запрет переноса на новую строку …… - форматированный текст …. - заголовок (N=1..6) right left center justify right left all none right left center

5 Форматирование текста … - полужирный (bold) … - курсив (italic) … - подчёркивание (underline).. - увеличить размер шрифта.. - уменьшить размер шрифта.. (.. ) - перечёркивание.. - нижний индекс (subscript).. - верхний индекс (superscript).. - телетайп (моноширинный шрифт)

6 Выделение текста … - выразительный текст … - определение … - выделение … - цитата (абзац с отступом).. - цитата внутри абзаца.. - цитаты и ссылки (курсив).. - адрес (курсив).. - ввод с клавиатуры (моноширинный).. - аббревиатура (сокращение ).. - акроним Теги для фрагментов программ.. - текст программы.. - примеры вывода данных.. - переменные то же что и моноширинный

7 Разделитель size – толщина линии в пикселах width – длина линии в пикселах либо в % от ширины окна (просто число – пикселы, со знаком % - проценты ) noshade – убрать объёмное представление линии color – цвет разделителя, задаётся либо словом, либо RGB схемой color=redкрасный color=lightgrey светло-серый color=#ffff00 жёлтый right left center

8 Шрифт (устарел) …. face - семейство шрифтов (Напр. Times, Arial, sherif) size – размер, от 1 до 7, если без знака, то размер, если со знаком, то увеличение/уменьшение относительно текущего размера color – цвет, задаётся либо словом, либо RGB схемой -size - базовый размер шрифта (N=1..7). По умолчанию=3. -face – семейство шрифтов (Напр. Times, sherif)

9 Списки - ненумерованный список … - нумерованный список … circle disc square 1iIaA1iIaA type: 1 - 1, 2, 3, 4…. i – i, ii, iii, iv…. I – I, II, III, IV… a – a, b, c, d… A – A, B, C, D… start: начальный номер списка

10 Списки с определениями - начало списка … - пункт 1 … - определение 1 пункта 1 … - пункт 2 … - определение 1 пункта 2

11 Escape последовательности > > "" " (пробел)   && & ©© © «« « » » » | ¦ ¦ ±± ± ·· · °° °

12 Таблицы Таблица 1 Колонка 1 Колонка Колонка 1 Колонка Таблица 1

13 Таблицы (атрибуты тегов 1) Атрибуты тега - таблица border=… - ширина боковой грани рамки в пикселах (или 0) align=… - выравнивание таблицы по горизонтали (left, center, right) width=… - ширина таблицы в пикселах или процентах cellspacing=… - ширина фронтальной грани рамки cellpadding=… - отступ вокруг содержимого ячейки bgcolor=… - цвет фона ячеек таблицы background=URL - картинка, как фон ячеек таблицы Атрибуты тега - заголовок таблицы align=… - расположение заголовка таблицы top – над таблицей bottom – под таблицей left – над таблицей и влево right – над таблицей и вправо

14 Таблицы (атрибуты тегов 2) Атрибуты тега - строка таблицы align=… - выравнивание строки по горизонтали (left, center, right) valign=… - выравнивание строки по вертикали (top, bottom, center, baseline) Атрибуты тегов и - ячейка таблицы align=… - выравнивание ячейки по горизонтали (left, center, right) valign=… - выравнивание ячейки по вертикали (top, bottom, center, baseline) width=… - ширина ячейки в пикселах или процентах от всей таблицы height=… - высота ячейки в пикселах bgcolor=… - цвет фона ячеек таблицы background=URL - картинка, как фон ячеек таблицы colspan=N - объединить N столбцов rowspan=N - объединить N строк

15 Гиперссылки Ссылки на документы … _blank – открыть в новом окне _self – открыть в том же окне Ссылки на разделы (внутри документа) … - метка … - переход на метку Ссылки на адрес … Ссылки на файл …

16 Атрибуты тега … background=URL - картинка, как фон страницы bgcolor=… - цвет фона страницы text=… - цвет текста на странице link=… - цвет гиперссылки vlink=… - цвет посещённой гиперссылки alink=… - цвет активной гиперссылки

17 Графика src=URL - URL графического файла align=… - выравнивание картинки по горизонтали (left, center, right, top, bottom, middle) width=… - ширина картинки в пикселах height=… - высота картинки в пикселах alt=… - альтернативный текст vspace=… - отступ по вертикали от границ картинки hspace=… - отступ по горизонтали от границ картинки border=… - ширина рамки вокруг картинки (только если картинка используется, как гиперссылка)