HTML1 (1)

Версии HTML
HTML 1992
HTML 2.0 1994
Консорциум WWW (W3C) – 1994 г.
(165 - организаций)
HTML 3.0 1995 - * не был принят
HTML 3.2 1996 (1997)
HTML 4.0 1997 (1998)
HTML 4.01 1999 **
HTML 5.0 (разработка с 2004 года)
** - текущая версия HTML
(развитие продолжается в рамках других стандартов)

Современное состояние
HTML+CSS (HTML 4.01, CSS 2.0 (3.0))
CSS – (Cascading Style Sheets — каскадные таблицы стилей )
XHTML (Extensible Hypertext Markup Language — Расширяемый язык разметки гипертекста) – отвечает стандартам XML
XML+XSL
XML – (eXtensible Markup Language — расширяемый язык разметки)
XSL - (Extensible Stylesheet Language) — расширяемый язык таблиц стилей

Синтаксис HTML
HTML-документ это текстовый файл,
собственно текст,
команды разметки (HTML-теги), задающие элементы документа (определяют структуру и внешний вид документа …).
HTML-тег состоит из имени элемента в угловых скобках <>
<ИМЯ-тега параметр1=значение … параметр2>

Синтаксис HTML (продолжение)
Типы тегов
Контейнеры
открывающий тег, содержимое, закрывающий тег
<ИМЯ-тега параметр1=значение параметр2 …> содержимое
Если значение параметра содержит пробел - необходимо заключать в кавычки
Автономные элементы – (без содержимого и закрывающего тега) – обычно вставка объектов.
Пример
Заголовок

Простейший документ
*
Заголовок (выводится</div></h3></h3><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1040405/slide-5.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Простейший документ * Заголовок (выводится в заголовок окна браузера) Тело документа *…" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1040405/slide-5.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1040405/slide-5.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1040405/slide-5.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1040405/slide-5.jpg 1440w" class="slides-image"><!----><div class="slides-content">в заголовок окна браузера)
Тело документа
*…

Форматирование абзацев
Заголовки
…
…
…..
…
…
Абзацы
…
…
* - закрывающий необязателен
Разрыв строки
* -
…
не переводить строку

Форматирование абзацев
Правило игнорирования перевода строк и пробелов.
Для отображения предварительно отформатированного текста
…. Внутри
…
игнорируются теги абзацев и заголовков.

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

Форматирование символов
Физическое форматирование
…
моноширным шрифтом
* вложение тегов
текст
- правильно
текст
- неправильно (но работает)

Cимволы
Специальные символы
© ©
™ ™
® ®
неразрывный пробел
& &
< <
> >
" “
‘ одиночная левая кавычка
’ одиночная правая кавычка
€ €
½ ½
° ◦

Символы
Специальные символы
Могут задаваться шестнадцатеричным кодом:
© - ©
® - ®
™ - ™
← - ←
↑ - ↑
→ - →
↓ - ↓

Форматирование символов
Физическое форматирование (FONT)
..
….

Форматирование шрифта
...
…
Значение по умолчанию 3 можно задавать от 1 до 7.
…
…
…
…
…

Форматирование шрифта
…
Типы шрифтов:
serif (с засечками, "антиква"),
sans-serif (без засечек, "рубленый"),
cursive (курсив),
fantasy (аллегорический),
monospace (моноширинный)
Пример:

Комментарии

Списки
…
order list (упорядоченный список)
- list item – элемент списка
Пункт первый
Пункт второй
Параметры (TYPE и START)
TYPE 1 A a I i (по умолчанию 1)
START (по умолчанию 1)
В этом году ….
В этом году ….

Списки
...
unordered list - (неупорядоченный список)
TYPE = формат маркера
disc - диск (по умолчанию)
circle - окружность
square – квадрат
* - соблюдайте регистр
Вложенные списки **