Большинство структурированных текстов состоят из параграфов и заголовков. Упорядоченный контент делает чтение более легким и

Зачастую текст необходимо как-то оформить: выделить важные моменты, установить подходящий шрифт иди задать для определенного

1.53M

Category:

internet

Тема 4

1. HTML-документ, структура и разметка

2. HTML – это язык гипертекстовой разметки

Разметка — это правила поведения или указания к действию, представленные в виде специальных
знаков.
HTML (HyperText Markup Language) или язык гипертекстовой разметки был изобретен в 1989 году
Тимом Бернерсом-Ли. В основу языка легла идея специальными ключевыми словами обозначать, как
браузеру следует отображать текст, в какое место вставить графику или мультимедиа.
Для того чтобы эти ключевые слова можно было отличить от основного текста, их записывают в
угловых скобках
<>
и
.
Например:
<картинка из файла my.gif>Это<полужирный текст>моя<конец полужирного текста>страничка!
А программа, которая понимает ключевые слова, отображает этот текст вот так:

3.

Причем вместо текстового блока
<картинка из файла my.gif>
программа подгружает и отображает
картинку из указанного файла.
HTML – стал единый язык, где
прописаны все правила. Ключевые
слова в этом языке называются
тегами. С помощью тегов и
производится разметка страницы.

4. СЛЕШ

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

5.

Есть также непарные теги, например, для указания места, в котором должна появиться
картинка. HTML-код приведенного выше примера:
В таком виде эту запись поймет любой браузер. Таким образом, получая простую тпекстовую
информацию, браузер по определенным правилам отображает нам красочные мультимедийные
веб-странички!

6.

Что такое HTML-документ? По сути это
обычный текстовый документ, который несет
в себе информацию о том, как должна быть
размечена веб-страничка. Для того чтобы
браузер понял, что это не просто текст, а
инструкция для него, такому файлу
присваивают расширение .html.
Каждый HTML-документ состоит из двух
разделов: заголовка – содержимое элемента
<head> и содержательной части –
содержимое <body>.

7.

Таким образом, HTML-документ
похож на человечка, у него есть
голова и тело! В голове находится
служебная информация, которая
необходима браузеру для правильного
отображения содержимого страницы,
и внешний заголовок, в нем обычно
пишут краткое название страницы, и
он отображается в заголовке окна
браузера. А в теле размещается
основной код, который определяет
внешний вид страницы,
отображаемой в браузере.
На языке HTML структурная разметка документа
выглядит так:
<!DOCTYPE html>
<html>
<head>
Служебная информация
<meta charset=“utf-8”>
<title>Внешний заголовок</title>
</head>
<body>
Основной код – информация,
отображаемая в браузере
</body>
</html>

8.

<!DOCTYPE html> − это объявление типа документа. Раньше типы документов использовались в
качестве ссылок на набор правил, которым HTML-страница должна была следовать, чтобы она
считалась «правильной».
<!DOCTYPE html> − это самый короткий вид типа документа, который считается действующим.
Теги <html></html> определяют начало и конец HTML-документа. Все, что находится за
пределами этого элемента, не воспринимается браузером как HTML-код и никак им не
обрабатывается.
Теги <head></head> ограничивают головную часть документа, которая содержит техническую
информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку
и т.д. Введенная в этом элементе информация не отображается в окне браузера, однако содержит
данные, которые указывают браузеру, как следует обрабатывать страницу.

9.

Необязательным элементом раздела <head> является элемент <meta>. С его помощью можно
задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTMLдокумента и прочие свойства метаданных.
В нашем примере этот элемент устанавливает в качестве символьной кодировки для документа
utf-8, который включает большинство символов из всех известных человечеству языков. Теперь
страница сможет отобразить любой текстовый контент.
В теги <title></title> заключается внешний заголовок или название страницы, этот элемент
является обязательным элементом раздела <head>. Текст, размещенный внутри элемента <title>,
отображается в строке заголовка браузера.
А вот все, что мы видим в браузере, размещается в блоке, ограниченном тегами <body></body>.
Он содержит весь контент, который браузер показывает посетителям страницы.
Таким образом, чтобы веб-страница могла «жить» в сети Интернет, у нее должна быть голова
(<head>), в которой хранятся специальные «знания», тело (<body>), которое определяет внешний
вид, ну и бейдж с именем (<title>), который сообщает всем, как эту страничку «зовут».

10. Мета-теги

Помимо заголовка страницы, в разделе <head></head> часто прописывают различную служебную
информацию в виде мета-тегов.
Мета-теги – это служебные теги, которые прописываются в разделе <head></head> и могут
содержать в себе информацию о страничке, ее авторе, ключевые слова к странице или управляющие
команды для браузеров и поисковых роботов.
Элемент <head> может содержать несколько элементов <meta>, потому что в зависимости от
используемых атрибутов они несут различную информацию.

11.

Основной тег для разметки текста – это абзац или параграф, он является парным и записывается так:
<p></p>
Каждый новый абзац текста должен быть заключен в эту пару тегов. Следует заметить, что параграфы
можно записывать и без закрывающего тега </p>, но лучше этого не делать, так как это не
соответствует стандартам.
Для выделения заголовков предназначены теги от <h1></h1> до <h6></h6>.
Пара <h1></h1> определяет заголовок самого большого размера, а <h6></h6> − самого маленького.
В браузере HTML-код поступает в виде одной длинной текстовой строки, в ней не сохраняется
никакого форматирования, поэтому если нужно сделать перенос строки в тексте, потребуется тег,
сообщающий браузеру об этом. Такое тег в HTML называется тегом принудительного переноса
строки и записывается <br>, этот тег непарный.
Если наоборот, по какой-то причине нельзя разбивать на несколько строк некоторый фрагмент текста
то его нужно поместить в теги <nobr></nobr>.
Еще одна особенность отправки строки браузеру состоит в том, что количество пробелом между
словами всегда сокращается до одного, поэтому для того чтобы поставить несколько «лишних»
пробелов в тексте, необходимо прописать последовательность символов
Существует также непарный тег <hr>, который используется для разделения содержимого вебстраницы при помощи горизонтальной линии.

12. 13. Большинство структурированных текстов состоят из параграфов и заголовков. Упорядоченный контент делает чтение более легким и

приятным. И теги разметки
текста позволяют создавать иерархическую структуру
При этом следует соблюдать несколько правил при создании таких структур:
Предпочтительнее использовать <h1> только один раз на странице – это заголовок самого верхнего
уровня, и все остальные заголовки располагаются ниже его в иерархии.
Нужно использовать заголовки в правильном порядке в иерархии. Не использовать <h3> для
создания подзаголовков при одновременном использовании <h2> для представления подподзаголовков – это не имеет смысла и приведет к странным результатам.
Из шести доступных уровней заголовка нужно стремиться использовать не более трех на странице,
если только нет острой необходимости в большем количестве уровней.

14. Зачастую текст необходимо как-то оформить: выделить важные моменты, установить подходящий шрифт иди задать для определенного

фрагмента специальное
форматирование, для этого применяются специальные теги.
Отдельные фрагменты текста можно выделить , придав им полужирное или курсивное
начертание. Для этого предназначены теги <b></b> (полужирный текст) и <i></i> (курсив), а
также подчеркивание <u></u>.
<b>Физическая</b> <i>разметка</i><br>
<b>Логическая</b> <i>разметка</i><br>

15.

Существует еще пара специальных тегов для оформления текста.
Это <sup></sup> (верхний индекс) и <sub></sub> (нижний индекс)
<pre>x<sup>2</sup>=16
x<sub>1</sub>=4, x<sub>2</sub>=-4</pre>

16.

Существуют теги, оформляющие текст моноширинным шрифтом, который имитирует стиль
печатной машинки (все символы в таком шрифте имеют одинаковую ширину). Это теги
логической разметки <kbd></kbd>, и они применяются для выделения текста, который нужно
вводить с клавиатуры, или названия клавиш, а браузеры отображают содержимое этих тегов
моноширинным шрифтом.
Моноширинным шрифтом также будет отображено содержимое тегов <pre></pre>.

17.

Для семантической разметки фрагментов компьютерного кода в
<code></code>. Они также отображают текст моноширинным шрифтом.
тексте
служат
теги
Тегами <var></var> выделяют в тексте имена переменных, текст отображается курсивом.
Для выделения результата, полученного в ходе выполнения программы, применяются теги
<samp></samp>. Текст отображается моноширинным шрифтом.
HTML также имеет теги для оформления цитат и аббревиатур. Например, парный тег
<blockquote> оформляет блочные цитаты внутри документа (абзац или несколько абзацев),
выделяя их отступами и переносами строк.
Для этого тега доступен атрибут <cite>, в котором можно указать URL-адрес, указывающий на
источник цитаты.

18.

Для выделения коротких цитат внутри текста используется парный тег <q>, текст внутри этого
тега заключается в кавычки. Для этого тега также доступен атрибут cite.
Довольно часто встречающийся в текстах элемент – это аббревиатура. Для выделения
аббревиатуры используется парный тег <abbr>. Браузером содержимое этого тега обычно
подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью
атрибута title, она появляется при наведении курсора мыши на текст, размеченный как
аббревиатура.

19. Коротко о главном

20. Служебные теги

Тег
<html>
Вид тега
парный
<head>
парный
<title>
парный
<body>
парный
Действие/назначение
Указывает на принадлежность
документы к языку HTML
Предназначен для хранения служебной
информации
Задает название страницы, которое
отображается в заголовке окна браузера
Содержит в себе наполнение страницы,
то есть то, что отображается в браузере

21. Теги разметки текста

Тег
Вид тега
Действие/назначение
<p>
парный
Создает новый абзац
<h1>..<h6>
парный
Создает заголовок (от первого до шестого уровня – отличаются размером)
<b>
парный
Задает полужирное начертание отрывка текста, не придавая акцент или
важность выделенному
<strong>
парный
Расставляет акценты в тексте, выделяя полужирным
<i>
парный
Выделяет отрывок текста курсивом, не придавая ему дополнительный
акцент
<em>
парный
Выделяет важные фрагменты текста, отображая их курсивом
<u>
парный
Выделяет отрывок текста подчеркиванием, без дополнительного акцента
<sup>
парный
Задает надстрочное написание символов
<sub>
парный
Задает подстрочное написание символов
<pre>
парный
Выводит текст без форматирования, с сохранением пробелов и переносов
текста. Может быть использован для отображения компьютерного кода

22. Дополнительные возможности разметки

Тег
Вид тега
Действие/назначение
<br>
непарный
Принудительный переход на новую строку
<nobr>
парный
Запрет перехода на новую строку
<hr>
непарный
Создает горизонтальную черту-разделитель
<abbr>
парный
Определяет текст как аббревиатуру. Поясняющий текст задается с
помощью атрибута title
<blockquote>
парный
Оформляет блочные цитаты внутри документа (абзац или несколько
абзацев), выделяя их отступами и переносами строк
<q>
парный
Используется для выделения коротких цитат внутри текста, текст
внутри этого тега заключается в кавычках
<cite>
парный
Используется для указания источника цитирования. Содержимое
отображается курсивом

English Русский Rules