Последнее обновление: 14.07.2021
-
Глава 1. Введение в HTML5
-
Что такое HTML
-
Элементы и атрибуты
-
Создание документа
-
Разновидности синтаксиса
-
-
Глава 2. Элементы в HTML5
-
Элемент head и метаданные веб-страницы
-
Элементы группировки
-
Заголовки
-
Форматирование текста
-
Работа с изображениями
-
Списки
-
Элемент details
-
Список определений
-
Таблицы
-
Ссылки
-
Элементы figure и figcaption
-
Фреймы
-
-
Глава 3. Работа с формами
-
Формы
-
Элементы форм
-
Кнопки
-
Текстовые поля
-
Метки и автофокус
-
Элементы для ввода чисел
-
Флажки и переключатели
-
Элементы для ввода цвета, url, email, телефона
-
Элементы для ввода даты и времени
-
Отправка файлов
-
Список select
-
Textarea
-
Валидация форм
-
Элементы fieldset и legend
-
-
Глава 4. Семантическая структура страницы
-
Элемент article
-
Элемент section
-
Элемент nav
-
Элементы header, footer и address
-
Элемент aside
-
Элемент main
-
-
Глава 5. Основы CSS3. Селекторы
-
Введение в стили
-
Селекторы
-
Селекторы потомков
-
Селекторы дочерних элементов
-
Селекторы элементов одного уровня
-
Псевдоклассы
-
Псевдоклассы дочерних элементов
-
Псевдоклассы форм
-
Псевдоэлементы
-
Селекторы атрибутов
-
Наследование стилей
-
Каскадность стилей
-
Псевдоклассы :is() и :where()
-
-
Глава 6. Основы CSS3. Свойства
-
Цвет в CSS
-
Стилизация шрифтов
-
Внешние шрифты
-
Высота шрифта
-
Форматирование текста
-
Стилизация абзацев
-
Стилизация списков
-
Стилизация таблиц
-
Блочная модель
-
Внешние отступы
-
Внутренние отступы
-
Границы
-
Размеры элементов. Box-sizing
-
Фон элемента
-
Создание тени у элемента
-
Контуры элементов
-
Обтекание элементов
-
Прокрутка элементов
-
Линейный градиент
-
Радиальный градиент
-
Стилизация элемента details
-
-
Глава 7. Создание макета страницы и верстка
-
Блочная верстка. Часть 1
-
Блочная верстка. Часть 2
-
Вложенные плавающие блоки
-
Выравнивание столбцов по высоте
-
Свойство display
-
Создание панели навигации
-
Выравнивание плавающих элементов
-
Создание простейшего макета
-
Позиционирование
-
Фиксированное позиционирование
-
-
Глава 8. Трансформации, переходы и анимации
-
Трансформации
-
Переходы
-
Анимация
-
-
Глава 9. Адаптивный дизайн
-
Введение в адаптивный дизайн
-
Метатег Viewport
-
Media Query в CSS
-
-
Глава 10. Мультимедиа
-
Видео
-
Аудио
-
Media API. Управление видео из JavaScript
-
-
Глава 11. Canvas
-
Доступ к canvas и рисование прямоугольников
-
Настройка рисования
-
Фоновые изображения
-
Создание градиента
-
Рисование текста
-
Рисование фигур
-
Рисование изображений
-
Добавление теней
-
Редактирование пикселей
-
Трансформации
-
Рисование мышью
-
-
Глава 12. Flexbox
-
Что такое Flexbox. Flex Container
-
Направление flex-direction
-
flex-wrap
-
flex-flow. Порядок элементов
-
Выравнивание элементов. justify-content
-
Выравнивание элементов. align-items и align-self
-
Выравнивание строк и столбцов. align-content
-
Управление элементами. flex-basis, flex-shrink и flex-grow
-
Многоколоночный дизайн на Flexbox
-
Макет страницы на Flexbox
-
-
Глава 13. Grid Layout
-
Что такое Grid Layout. Grid Container
-
Строки и столбцы
-
Функция repeat и свойство grid
-
Размеры строк и столбцов
-
Отступы между столбцами и строками
-
Позиционирование элементов
-
Наложение элементов
-
Направление и порядок элементов
-
Именованные grid-линии
-
Именованные grid-линии и функция repeat
-
Области грида
-
Макет страницы в Grid Layout
-
-
Глава 14. Переменные CSS
-
Стилизация с помощью переменных
-
Создание тем CSS с помощью переменных
-
Стили CSS как хранилище данных
-
- Глава 1. Введение в HTML5
- Что такое HTML
- Элементы и атрибуты
- Создание документа
- Разновидности синтаксиса
- Глава 2. Элементы в HTML5
- Элемент head и метаданные веб-страницы
- Элементы группировки
- Заголовки
- Форматирование текста
- Работа с изображениями
- Списки
- Элемент details
- Список определений
- Таблицы
- Ссылки
- Элементы figure и figcaption
- Фреймы
- Глава 3. Работа с формами
- Формы
- Элементы форм
- Кнопки
- Текстовые поля
- Метки и автофокус
- Элементы для ввода чисел
- Флажки и переключатели
- Элементы для ввода цвета, url, email, телефона
- Элементы для ввода даты и времени
- Отправка файлов
- Список select
- Textarea
- Валидация форм
- Элементы fieldset и legend
- Глава 4. Семантическая структура страницы
- Элемент article
- Элемент section
- Элемент nav
- Элементы header, footer и address
- Элемент aside
- Элемент main
- Глава 5. Основы CSS3. Селекторы
- Введение в стили
- Селекторы
- Селекторы потомков
- Селекторы дочерних элементов
- Селекторы элементов одного уровня
- Псевдоклассы
- Псевдоклассы дочерних элементов
- Псевдоклассы форм
- Псевдоэлементы
- Селекторы атрибутов
- Наследование стилей
- Каскадность стилей
- Псевдоклассы :is() и :where()
- Глава 6. Основы CSS3. Свойства
- Цвет в CSS
- Стилизация шрифтов
- Внешние шрифты
- Высота шрифта
- Форматирование текста
- Стилизация абзацев
- Стилизация списков
- Стилизация таблиц
- Блочная модель
- Внешние отступы
- Внутренние отступы
- Границы
- Размеры элементов. Box-sizing
- Фон элемента
- Создание тени у элемента
- Контуры элементов
- Обтекание элементов
- Прокрутка элементов
- Линейный градиент
- Радиальный градиент
- Стилизация элемента details
- Глава 7. Создание макета страницы и верстка
- Блочная верстка. Часть 1
- Блочная верстка. Часть 2
- Вложенные плавающие блоки
- Выравнивание столбцов по высоте
- Свойство display
- Создание панели навигации
- Выравнивание плавающих элементов
- Создание простейшего макета
- Позиционирование
- Фиксированное позиционирование
- Глава 8. Трансформации, переходы и анимации
- Трансформации
- Переходы
- Анимация
- Глава 9. Адаптивный дизайн
- Введение в адаптивный дизайн
- Метатег Viewport
- Media Query в CSS
- Глава 10. Мультимедиа
- Видео
- Аудио
- Media API. Управление видео из JavaScript
- Глава 11. Canvas
- Доступ к canvas и рисование прямоугольников
- Настройка рисования
- Фоновые изображения
- Создание градиента
- Рисование текста
- Рисование фигур
- Рисование изображений
- Добавление теней
- Редактирование пикселей
- Трансформации
- Рисование мышью
- Глава 12. Flexbox
- Что такое Flexbox. Flex Container
- Направление flex-direction
- flex-wrap
- flex-flow. Порядок элементов
- Выравнивание элементов. justify-content
- Выравнивание элементов. align-items и align-self
- Выравнивание строк и столбцов. align-content
- Управление элементами. flex-basis, flex-shrink и flex-grow
- Многоколоночный дизайн на Flexbox
- Макет страницы на Flexbox
- Глава 13. Grid Layout
- Что такое Grid Layout. Grid Container
- Строки и столбцы
- Функция repeat и свойство grid
- Размеры строк и столбцов
- Отступы между столбцами и строками
- Позиционирование элементов
- Наложение элементов
- Направление и порядок элементов
- Именованные grid-линии
- Именованные grid-линии и функция repeat
- Области грида
- Макет страницы в Grid Layout
- Глава 14. Переменные в CSS
- Стилизация с помощью переменных
- Создание тем CSS с помощью переменных
- Стили CSS как хранилище данных
Помощь сайту
YooMoney:
410011174743222
Перевод на карту
Номер карты:
4048415020898850
Как следует из предыдущей главы, HTML является языком разметки задача которого — просто «размечать» текстовый документ используя теги, которые, в свою очередь, говорят веб — браузеру, как именно нужно отобразить данный документ.
Создание HTML документов
Для того, чтобы создать HTML документ необходимо:
- Открыть любой текстовый редактор (например блокнот, Notepad++ и т.д.);
- Набрать произвольный текст и разметить его HTML тегами;
- Cохранить файл с расширением .htm или .html.
Базовый документ HTML
Ниже приведен в своей простейшей форме пример HTML-документа:
Пример HTML:
Попробуй сам
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Заголовок страницы</title>
</head>
<body>
<h1>Это заголовок</h1>
<p>Это параграф.</p>
</body>
</html>Теперь вы можете воспользоваться кнопкой Попробуй сам, которая расположена в правом верхнем углу окна кода, для того, чтобы проверить результат этого HTML — кода, или сохраните код в HTML — файл test.html с помощью любого текстового редактора. И, наконец, откройте его с помощью веб — браузера, например Internet Explorer, Google Chrome или Firefox и т.д. Браузер должен показать следующий результат:
HTML теги
Как говорилось ранее, HTML это язык разметки, который использует различные теги для форматирования содержимого документа. Эти теги заключены в угловые скобки <имя тега>. За исключением нескольких тегов, большинство тегов имеют соответствующие им закрывающие теги. Например <html> имеет свой закрывающий тег </html>, а тег <body> в свою очередь, имеет свой закрывающий тег </body> тег и т.д.
| Всегда закрывайте теги, так как отсуствие закрывающего тега может приводить к непредсказуемым ошибкам при отображении документа. |
Рассмотренный пример HTML-документа использует следующие теги:
| Название тега | Описание |
|---|---|
| <!DOCTYPE…> | Это инструкция для веб-браузера о том, на какой версии HTML написана страница. |
| <html> | Этот тег является корневым элементом HTML страницы и заключает в себе весь HTML — документ |
| <head> | Этот тег содержит мета-информацию о документе и может содержать другие теги, такие как <title>, <link> и т.д. |
| <title> | Этот тег определяет заголовок веб-страницы, в браузере вы его видите вверху на текущей вкладке. |
| <meta> | Этот тег предназначен для предоставления структурированных метаданных о веб-странице. В нашем примере определяет кодировку документа. |
| <body> | Элемент содержит видимое содержимое страницы, который включает в себя другие HTML-теги, например <h1>, <div>, <p> и т.д. |
| <h1> | Этот тег представляет собой заголовок. |
| <p> | Этот тег представляет собой абзац. |
Теги могут быть написаны как в верхнем регистре так и в нижнем, но World Wide Web Consortium (W3C) — глобальный консорциум, который занимается поддержкой HTML-стандарта, рекомендует использовать нижний регистр (а в XHTML это требование является обязательным).
Структура HTML-страницы
Ниже приведена визуализация структуры HTML-страницы:
Объявление doctype на самой верхней строчке:
<!DOCTYPE…>
Корневой элемент HTML-страницы:
<html>
Контейнер <head> содержит информацию для браузеров и поисковых систем:
<head>
<title>Заголовок окна веб-страницы</title>
</head>
Видимое содержимое страницы:
<body>
<h1>Это заголовок.</h1>
<p>Это абзац.</p>
</body>
</html>
The <!DOCTYPE> декларация
HTML документ должен содержать объявление <!DOCTYPE> на самой первой строчке. Объявление <!DOCTYPE> это — инструкция для веб-браузера о том, на какой версии HTML написана страница. Это непарный тег, то есть у него нет закрывающего тега. Текущая версия HTML 5 использует следующую декларацию:
<!DOCTYPE html>
Cуществует несколько видов DOCTYPE. Есть строгие виды (strict), которые работают на основе только определенных тегов, есть переходные (transitional), которые допускают возможность включения дополнительных тегов, есть такие, которые работают с фреймами (frameset).
В HTML 4.01 doctype ссылается на Document Type Definition (DTD описывает схему документа для конкретного языка разметки посредством набора объявлений), который основан на SGML. Есть 3 разных типа doctype в версии HTML 4.01.
HTML 4.01 Strict
Этот DTD содержит все элементы HTML и аттрибуты, но ИСКЛЮЧАЕТ устаревшие или стилевые элементы (например, тег font). Также в strict не допускается использование frameset (фреймов).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
Этот DTD содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. Frameset (фреймы) не допускаются.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
Этот DTD тоже содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. В отличие от HTML 4.01 Transitional, но он допускает использование frameset (фреймов).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
В версии HTML5 есть только один doctype и определяется он следующим образом:
<!DOCTYPE html>
Правила DOCTYPE HTML5 являются универсальными, включают в себя правила предыдущей версии, а также возможность работы с HTML 4 тегами и в какой-то степени с XHTML, и объединяют в себе возможности всех своих предшественников, адаптируя их для работы в новых браузерах.
По сравнению с прежними своими собратьями, DOCTYPE HTML5 не основан на SGML (стандартном обобщённом языке разметки), поэтому там нет тех данных, которые указывались до этого, а следовательно — в нем присутствует только короткая команда. И дальше уже идет сам документ.
При отсутствии тега <!DOCTYPE> разные Web-браузеры мо
гут по-разному отображать веб-страницу.
Весь текст HTML-документа расположен между тегами <html> и </html>. HTML-документ состоит из двух разделов — заголовка (между тегами <head> и </head> ) и содержательной части (между тегами <body> и </body> ).
Раздел HEAD.
Раздел HEAD содержит техническую информацию о веб-странице — заголовок, ее описание и ключевые слова для поисковых машин, данные об авторе документа, времени создания страницы, базовом адресе страницы, кодировке документа и т. д. Единственным обязательным тегом в разделе HEAD является тег <title>.
Текст, расположенный между тегами <title> и </title>, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, иначе он не полностью поместится в заголовке веб-браузера:
<title>Заголовок страницы</title>
| Текст, расположенный между тегами <title> и </title> используется в результатах, выдаваемых поисковыми машинами, в качестве текста ссылки на эту страницу. По этой причине заголовок должен максимально полно описывать содержание веб-страницы. |
С помощью одинарного тега <meta> можно задать описание содержимого веб-страницы, а также ключевые слова для поискового портала. Если текст между тегами <title> и </title> используется в качестве текста ссылки на эту страницу, то описание из тега <meta> будет отображено под ссылкой на веб-страницу:
<meta name="description" content="Описание содержимого страницы"> <meta name="keywords" content="Ключевые слова через запятую">
| В разделе HEAD могут быть расположены также теги <base>, <link>, <script>, <style> и другие. Все эти теги мы рассмотрим в дальнейшем по мере изучения материала. |
HTML — это стандартный язык разметки для веб-страниц.
С помощью HTML вы можете создать свой собственный веб-сайт.
HTML прост в освоении — Вам понравится!
Выучить HTML Бесплатно »
Простое обучение с помощью HTML «Попробуйте сами»
С помощью редактора «Попробуйте сами» вы можете отредактировать HTML-код и просмотреть результат:
Пример
<!DOCTYPE html>
<html>
<head>
<title>HTML Учебник</title>
</head>
<body>
<h1>Это заголовок</h1>
<p>Это параграф.</p>
</body>
</html>
Попробуйте сами »
Нажмите на кнопку «Попробуйте сами», чтобы увидеть, как это работает.
HTML Примеры
В этом руководстве по HTML вы найдете более 200 примеров. С помощью нашего онлайн
-редактора «Попробуйте сами» вы можете редактировать и тестировать каждый пример самостоятельно!
Перейдите к примерам HTML!
HTML Упражнения
Это руководство по HTML также содержит почти 100 упражнений по HTML.
Проверьте себя с помощью Упражнений
Упражнение:
Добавьте «всплывающую подсказку» к абзацу ниже с текстом «О SchoolsW3».
<p =»О SchoolsW3″>SchoolsW3 — это сайт веб-разработчика.</p>
HTML Тест-викторина
Проверьте свои навыки работы с HTML с помощью нашей HTML-викторины!
Старт тест по HTML!
HTML Справочник
В SchoolsW3 вы найдете все ссылки на HTML-элементы,
атрибуты, события, названия цветов, сущности, наборы символов, кодировку URL,
языковые коды, HTTP-сообщения, поддержку браузера и многое другое:
HTML (HyperText Markup Language, язык разметки гипертекста) — это язык разметки, который определяет, какие элементы должны располагаться на веб-странице. Текст, ссылки, изображения, списки, таблицы, видео и др. — всё это является элементами, которые можно отобразить на веб-странице с помощью HTML.
Данный самоучитель предназначен в первую очередь для начинающих, только постигающих азы создания сайтов. Множество примеров, иллюстраций, вопросов для проверки и заданий для самостоятельной работы помогут быстрее изучить HTML.
Содержание
Влад Мержевич
Веб-разработчик, автор нескольких книг, посвящённых созданию сайтов, HTML и CSS. Кандидат технических наук.
Что такое HTML?[править]
Термин HTML (HyperText Markup Language) означает «язык разметки гипертекста». Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации, HTML оказались пронумерованными. Известны спецификации 2.0, 3.2, 4.0 и 4.01. Текущую спецификацию HTML всегда можно найти на сервере W3C [1].
Всё, о чём написано в Самоучителе HTML, будет гарантированно работать с программным обеспечением, поддерживающим любую известную на сегодня спецификацию HTML. Естественно, для этого пришлось опустить некоторые детали, которые описаны не во всех спецификациях или описаны в разных спецификациях по-разному. Однако могу Вас уверить, что Ваши документы будут полностью работоспособными и вполне приличными по внешнему виду.
Что Вам понадобится для освоения HTML?[править]
Для освоения HTML по этому Самоучителю Вам понадобятся две вещи:
- Любой браузер, то есть, программа, пригодная для просмотра HTML-файлов.
- Любой редактор текстовых файлов, поддерживающий русский язык в выбранной Вами кодировке. Если на Вашем компьютере установлен Windows, вполне подойдет Notepad.
Мы будем использовать текстовый редактор для подготовки HTML-файлов, а браузер — как инструмент контроля за сделанным.
Свои первые HTML-файлы Вы будете разрабатывать у себя на локальном диске. Другими словами, компьютер, на котором Вы будете заниматься, может и не иметь подключения к Интернет. При этом один и тот же *.html-файл может быть одновременно открыт и в Notepad, и в Netscape Navigator. Сохранив изменения в Notepad, просто нажмите кнопку Reload («перезагрузить») в браузере, чтобы увидеть эти изменения реализованными в HTML-документе.
Необходимое отступление о редакторах HTML[править]
В настоящее время широко используются два типа редакторов HTML:
- Редакторы типа «что видишь, то и получишь» (Namo WebEditor 2006, Microsoft Front Page). Пользователь не видит «внутренностей» документа, с которым он работает, точно так же, как при работе с текстовым процессором типа Microsoft Word или Word Perfect. Кстати говоря, существует довольно много конвертеров, способных преобразовывать документы, созданные в Microsoft Word или Word Perfect, в HTML-документы.
- Редакторы собственно HTML-текстов (HotDog, Ken Nesbitt Web Editor и многие другие). В процессе работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную, либо вызывая команды меню для вставки определенных элементов HTML. Работа с таким редактором очень похожа на работу с интерактивной средой программирования типа Microsoft Visual Basic или Borland Delphi.
Теги HTML-документа[править]
Как устроен HTML-документ[править]
HTML-документ — это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). Вот самый простой HTML-документ:
<html> <head> <title> Пример 1 </title> </head> <body> <H1> Привет! </H1> <P> Это простейший пример HTML-документа. </P> <P> Этот *.html-файл может быть одновременно открыт и в Notepad, и в браузере. Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить') в браузере, чтобы увидеть эти изменения реализованными в HTML-документе. </P> </body> </html>
Попробуйте написать этот документ в программе Блокнот и просмотреть в браузере.
Для удобства чтения я ввел дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так:
<html> <head> <title>Пример 1</title> </head> <body> <H1>Привет!</H1> <P>Это простейший пример HTML-документа.</P> <P>Этот *.html-файл может быть одновременно открыт и в Notepad, и в браузере. Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить') в браузере, чтобы увидеть эти изменения реализованными в HTML-документе.</P> </body> </html>
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками «<» и «>». Такой фрагмент (например, <html>) называется тегом (по-английски — tag, читается «тэг»).
Большинство HTML-тегов — парные, то есть на каждый открывающий тег вида <tag> есть закрывающий тег вида </tag> с тем же именем, но с добавлением «/».
Теги можно вводить как большими, так и маленькими буквами. Например, теги <body>, <BODY> и <Body> будут восприняты браузером одинаково.
Многие теги, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущий тег. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.
Обязательные теги[править]
Тег <html> должен открывать HTML-документ. Аналогично, тег </html> должен завершать HTML-документ.
Эта пара тегов указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание тега <title> ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.
Тег meta определяет кодировку сайта, хранит служебную информацию для поисковых роботов и браузеров.
Всё, что находится между тегами <title> и </title>, толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.
Эта пара тегов указывает на начало и конец тела HTML-документа, которое и определяет содержание документа.
<H1> ... </H1> — <H6> ... </H6>
Теги вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.
Такая пара тегов описывает абзац. Всё, что заключено между
и
воспринимается как один абзац.
Теги
и
могут содержать дополнительный атрибут ALIGN (читается «элайн», от английского «выравнивать»), например:
<H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1>
или
<P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>
Подытожим всё, что мы знаем, с помощью примера 2:
<html> <head> <title>Пример 2</title> </head> <body> <H1 ALIGN=CENTER>Привет!</H1> <H2>Это чуть более сложный пример HTML-документа</H2> <P>Теперь мы знаем, что абзац можно выравнивать не только влево, </P> <P ALIGN=CENTER>но и по центру</P> <P ALIGN=RIGHT>или по правому краю.</P> </body> </html>
С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца. В следующем разделе мы поговорим, как можно улучшить наш простой HTML-документ.
Форматирование абзаца HTML-документа[править]
Непарные теги[править]
В этом разделе Самоучителя HTML мы поговорим о тегах, которые не подчиняются двум основным правилам HTML: все они непарные, а некоторые (так называемые &-последовательности) к тому же должны вводиться только маленькими буквами.
Этот тег используется, если необходимо перейти на новую строку, не прерывая абзаца. Его можно писать разными способами.
Но это не обязательно. Очень удобно при публикации стихов (см. пример 3):
<html> <head> <title>Пример 3</title> </head> <body> <H1>Стих</H1> <H2>Автор неизвестен</H2> <P>Однажды в студеную зимнюю пору<BR> Сижу за решеткой в темнице сырой.</BR> Гляжу - поднимается медленно в гору<BR/> Вскормленный в неволе орел молодой.</P> <P>И шествуя важно, в спокойствии чинном,<BR /> Мой грустный товарищ, махая крылом,<BR> В больших сапогах, в полушубке овчинном,<BR> Кровавую пищу клюет под окном.</P> </body> </html>
Тег
описывает вот такую горизонтальную линию:
Тег может дополнительно включать атрибуты SIZE (определяет толщину линии в пикселах) и/или WIDTH (определяет размах линии в процентах от ширины экрана). В примере 4 приведена небольшая коллекция горизонтальных линий:
<html> <head> <title>Пример 4</title> </head> <body> <H1>Коллекция горизонтальных линий</H1> <HR SIZE=2 WIDTH=100%><BR> <HR SIZE=4 WIDTH=50%><BR> <HR SIZE=8 WIDTH=25%><BR> <HR SIZE=16 WIDTH=12%><BR> </body> </html>
&-последовательности[править]
Поскольку символы «<» и «>» воспринимаются браузерами как начало и конец HTML-меток, возникает вопрос: а как показать эти символы на экране? В HTML это делается с помощью &-последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Браузер показывает на экране символ «<», когда встречает в тексте последовательность < (по первым буквам английских слов less than — меньше, чем). Знак «>» кодируется последовательностью > (по первым буквам английских слов greater than — больше, чем).
Символ «&» (амперсанд) кодируется последовательностью &
Двойные кавычки («) кодируются последовательностью "
Помните: точка с запятой — обязательный элемент &-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (то есть, маленькие). Использование меток типа " или & не допускается.
Вообще говоря, &-последовательности определены для всех символов из второй половины ASCII-таблицы (куда, естественно, входят и русские буквы). Дело в том, что некоторые серверы не поддерживают восьмибитную передачу данных, и поэтому могут передавать символы с ASCII-кодами выше 127 только в виде &-последовательностей.
Комментарии[править]
Браузеры игнорируют любой текст, помещенный между <!-- и -->. Это удобно для размещения комментариев.
Форматирование шрифта[править]
HTML допускает два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно прямо указать, что шрифт на некотором участке текста должен быть жирным или наклонным, то есть изменить физический стиль текста. С другой стороны, можно пометить некоторый фрагмент текста как имеющий некоторый отличный от нормального логический стиль, оставив интерпретацию этого стиля браузеру. Поясним это на примерах.
Физические стили[править]
Под физическим стилем принято понимать прямое указание браузеру на модификацию текущего шрифта. Например, всё, что находится между тегами
и
, будет написано жирным шрифтом. Текст между тегами
и
будет написан наклонным шрифтом.
Несколько особняком стоит пара тегов
и
. Текст, размещенный между этими тегами, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа.
Логические стили[править]
При использовании логических стилей автор HTML документа не может знать заранее, что увидит на экране читатель. Разные браузеры толкуют одни и те же теги логических стилей по-разному. Некоторые браузеры игнорируют некоторые теги вообще и показывают нормальный текст вместо выделенного логическим стилем. Вот самые распространенные логические стили:
От английского emphasis — акцент.
От английского strong emphasis — сильный акцент.
Рекомендуется использовать для фрагментов исходных текстов.
От английского sample — образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами.
От английского keyboard — клавиатура. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры.
От английского variable — переменная. Рекомендуется использовать для написания имен переменных.
<BUTTON> ... </BUTTON> - от английского button - кнопка.Создаёт кнопку. Без тега <FORM> отображение невозможно.</BUTTON> Подытожим наши знания о логических и физических стилях с помощью примера 5. Заодно Вы сможете увидеть, как Ваш браузер показывает те или иные логические стили. <syntaxhighlight lang="html4strict"> <html> <head> <title>Пример 5</title> </head> <body> <H1>Шрифтовое выделение фрагментов текста.</H1> <P>Теперь мы знаем, что фрагменты текста можно выделять <B>жирным</B> или <I>наклонным</I> шрифтом.</P> <P>Кроме того, можно включать в текст фрагменты с фиксированной шириной символа <TT>(имитация пишущей машинки).</TT></P> <P>Кроме того, существует ряд логических стилей:</P> <P><EM>EM - от английского emphasis - акцент,</EM><BR> <STRONG>STRONG - от английского strong emphasis - сильный акцент,</STRONG><BR> <CODE>CODE - для фрагментов исходных текстов,</CODE><BR> <SAMP>SAMP - от английского sample - образец,</SAMP><BR> <KBD>KBD - от английского keyboard - клавиатура,</KBD><BR> <VAR>VAR - от английского variable - переменная.</VAR></P> <BUTTON> - от английского button - кнопка.Без тега <FORM> отображение невозможно.</BUTTON> </body> </html>