HTML Язык описания Web-страниц По материалам курса University of Washington

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

Структура элементов языка Элемент, маркированный тегом, имеет следующую структуру: внутреннее содержание 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 информация о странице внутреннее содержание Основное отличие во внутреннем содержании документов HTML и XHTML: если браузер видит ошибку в HTML-документе, то он обязан постараться понять, что имел в виду автор документа. Если ошибка обнаружена в XHTML документе, то браузер просто сообщает об ошибке. Кроме того, форматирование элементов XHTML-документа должно быть оформлено с помощью CSS-стилей. Многие теги, такие как font и атрибуты, такие как bgcolor и align не поддерживаются в XHTML.

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

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

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

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

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

Картинки Вставка изображений – строчный элемент Дополнительные атрибуты Изображение может служить ссылкой так же, как и текст:

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

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

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

Цитирование Каркнул ворон: Никогда! Цитирование может быть коротким (строчным) и длинным (блочным) Каркнул ворон: Никогда! В своем выступлении перед рабочими Леонид Ильич Брежнев, в частности, сказал: Мы еще теснее сплотимся вокруг родной Коммунистической Партии и стройными рядами будем двигаться вперед к полному торжеству коммунизма! В своем выступлении перед рабочими Леонид Ильич Брежнев, в частности, сказал: Мы еще теснее сплотимся вокруг родной Коммунистической Партии и стройными рядами будем двигаться вперед к полному торжеству коммунизма!

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

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

Элементы заголовка HTML Описывает формат и кодировку страницы. Определяет основной язык, на котором написана страница. Описывает частоту перезагрузки страницы (в секундах) и, возможно, делает redirection на другую страницу. Описывает иконку, ассоциирующуюся со страницей (устаревший вариант: поместить в корневой каталог сайта файл с именем favicon.ico ).

MIME-типы Internet media type (MIME – Multipurpose Internet Mail/Media Extension) application/javascript Текст на JavaScript (обычно.js) application/octet-stream Двоичная программа (обычно.exe) image/jpeg Картинка в формате JPEG image/gif Картинка в формате GIF image/vnd.microsoft.icon Иконка в формате Microsoft audio/mpeg Звуковой файл (обычно.mp3) text/plain Просто текст (например,.txt) text/html Текст на языке HTML text/css Каскадная таблица стилей (.css) video/mp4 Кино в формате MP4 Подробнее см.

Мнемоники Специальные символы отображаются в текстах в виде специальных слов (entities). Вот примеры некоторых мнемоник: < > ©™ © π δ Δπ δ Δ И&1048; ¢ £ ¥¢ £ ¥ " &" & Полный список см.