HTML. Язык описания Web-страниц

Что такое HTML?
это не язык программирования, а «язык разметки» (HyperText Markup Language);
определяет содержание и структуру страницы, но не внешний вид;
элементы языка имеют структуру дерева (вложенные элементы);
пробелы либо игнорируются, либо заменяются одним пробелом;
узлы дерева представляют собой либо текст (содержание), либо
«структурные элементы», маркируемые «тегами» и имеющие «атрибуты».
Текст на языке HTML и его структура
My first page
Hello, World!
html
title
body
p
My first page
Hello, World!
head

Структура элементов языка
Элемент, маркированный тегом, имеет следующую структуру:
внутреннее содержание href="page2.html">Next page
Если тег не имеет внутреннего содержания, то он может иметь
упрощенную структуру:

Структура страницы
Правильная страница имеет две части – заголовок (информация о странице)
и тело (содержание страницы)
информация о странице
внутреннее содержание
Пример:
My first web page
Welcome to my first web page!
This is a paragraph of text.

XHTML – более современный HTML (2000 год)
HTML + XML (eXtended Markup Language) = XHTML
Браузеры отображают пришедшую к ним по запросу страницу. Страница
может быть написана как на «старом» HTML, так и на более новых XML
и XHTML. XHTML -
Более строгий и хорошо структурированный язык
Лучшая «переносимость» между различными браузерами
XHTML допускает вставки на других «языках разметки» XML, SVG,
MathML, MusicML и т.д.

Структура документа в формате XHTML
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> xmlns="http://www.w3.org/1999/xhtml">
информация о странице
внутреннее содержание
Основное отличие во внутреннем содержании документов HTML и XHTML:
если браузер видит ошибку в HTML-документе, то он обязан постараться
понять, что имел в виду автор документа. Если ошибка обнаружена в
XHTML документе, то браузер просто сообщает об ошибке.
Кроме того, форматирование элементов XHTML-документа должно быть
оформлено с помощью CSS-стилей. Многие теги, такие как font и
атрибуты, такие как bgcolor и align не поддерживаются в XHTML.

Ошибки XHTML, которые допустимы в HTML
Все элементы должны быть закрыты.
Все обязательные атрибуты должны присутствовать.
В теле документа текст не может быть вложен непосредственно.
«Блочные» элементы не могут быть вложены в «строчные».
Атрибуты должны заключаться в кавычки.
Вложенность элементов должна быть правильной.
Спецсимволы всегда должны быть представлены мнемоническими ссылками.
Теги и атрибуты записываются только строчными буквами.
Неправильно :
Правильно :
1.
2.
3.
4.
5.
6.
7.
8.
(или
)
some text
some text
Hello, World!
Hello, World!
...
&
&

Блочные и строчные элементы
Блочные элементы содержат фрагменты текста, которые всегда
отображаются в отдельных блоках. Браузеры всегда визуально отделяют
блочные элементы друг от друга.
Примеры:
,
,
,
Строчные элементы могут располагаться друг за другом в пределах одной
строки
Примеры:
,
,
,
Комментарии вставляются в HTML текст так же, как и обычные элементы:

Некоторые элементы HTML и их атрибуты
Видимое здесь содержимое
отображается в браузере в виде одного абзаца.
Повторяющиеся пробелы и переходы со строки на
строку игнорируются.
Абзац (параграф) – блочный элемент
Видимое здесь содержимое отображается в браузере в виде одного абзаца.
Повторяющиеся пробелы и переходы со строки на строку игнорируются.
Если необходимо сделать переход на следующую строку внутри абзаца,
то это достигается с помощью элемента
Это первая строка параграфа,
а это уже вторая
А вот это уже следующий абзац.
Это первая строка параграфа,
а это уже вторая
А вот это уже следующий абзац.

Некоторые элементы HTML и их атрибуты
Университет Информационных Технологий
Естественнонаучный факультет
Расписание занятий
Заголовки – блочные элементы
Университет Информационных Технологий
Естественнонаучный факультет
Расписание занятий
Всего может быть до шести уровней заголовков (от
до
)
Университет Информационных Технологий
Естественнонаучный факультет
Горизонтальная черта (разделитель) – блочный элемент
Университет Информационных Технологий
Естественнонаучный факультет

Гиперссылка
Пользуйтесь поиском
Гиперссылка – строчный элемент
Пользуйтесь поиском Google - самым распространенным поисковиком в мире!
И удачи вам в поиске!
Google
– самым распространенным поисковиком в мире!
Google
target="_blank" title="Нажмите для поиска">
Google
Будьте аккуратны с вложенностью элементов!
Это в первом абзаце
А это уже во втором!
Здесь две ошибки: блочный элемент внутри строчного и неправильная
вложенность элементов. Тем не менее, HTML-браузер может корректно
отобразить эти элементы!

Картинки
Вставка изображений – строчный элемент
Дополнительные атрибуты
width="250" height="150"/> src="server.jpg" alt="Сервер"
width="50%"/>
Изображение может служить ссылкой так же, как и текст:

Списки
Первая строка списка
Вторая строка списка
Третья строка списка
Список (нумерованный или ненумерованный) – блочный элемент,
Содержащий внутри себя блочные элементы – члены списка
Первая строка списка
Вторая строка списка
Третья строка списка
Атрибуты списка могут задавать вид маркеров (не поддерживается в
«строгом» XHTML), например
Первая строка списка
Первая строка списка

Нумерованные списки
Вымыть посуду
Постирать носки
Купить жене цветы
Нумерованный список
Вымыть посуду
Постирать носки
Купить жене цветы
Атрибуты списка могут задавать тип и способ нумерации
(не поддерживается в «строгом» XHTML)
Сделать домашнее задание
Купить билеты на концерт
Сделать домашнее задание
Купить билеты на концерт

Вложенные списки
Документы:
Паспорт
Билеты
Гостиница - бронь
Предметы личной гигиены:
Зубная щетка
Паста
Мыло
Один список может быть вложен в другой
Документы:
Паспорт
Билеты
Гостиница - бронь
Предметы личной гигиены:
Зубная щетка
Паста
Мыло

Выделение фрагментов текста
Выделение производится с помощью тегов
,
,
,
Изучая HTML следует обратить особое внимание на различие между
нумерованными списками
и ненумерованными списками
.
Изучая
HTML
следует обратить
особое внимание
на
различие между
нумерованными
списками
<ol>
и
ненумерованными
списками
<ul>
.
Фрагменты кода можно выделять с помощью блочного тега
public static void
main(String[] args) {
System.out.println("Hello, World!");
}
Этот фрагмент выводится в точности так же, как он напечатан, включая
все пробелы и переводы строк.

Элементы заголовка HTML
Это моя страница
Отображается в заголовке страницы в браузере. content="Эта страница содержит полезные сведения"/>
Описывает содержимое страницы.
Описывает ключевые слова (часто используется поисковыми машинами).
Указание на автора.
Указание на программу, которая сгенерировала этот текст.

Элементы заголовка HTML
Описывает формат и кодировку страницы.
content="text/html; charset=windows-1251">
Определяет основной язык, на котором написана страница.
Описывает частоту перезагрузки страницы (в секундах)
и, возможно, делает “redirection” на другую страницу.
content="5;http://www.google.com/">
Описывает иконку, ассоциирующуюся со страницей (устаревший вариант:
поместить в корневой каталог сайта файл с именем favicon.ico).

MIME-типы
Internet media type (MIME – Multipurpose Internet Mail/Media Extension)
Подробнее см. http://ru.wikipedia.org/wiki/MIME