Выравнивание текста
Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. В табл. 1 показаны варианты выравнивания блока текста.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Наиболее распространенный вариант — выравнивание по левому краю, когда слева текст сдвигается до края, а правый остается неровным. Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. Следует иметь в виду, что при использовании выравнивания по ширине в тексте между словами могут появиться большие интервалы, что не очень красиво.
Для установки выравнивания текста обычно используется тег абзаца
с атрибутом align , который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега с аналогичным атрибутом align , как показано в табл. 2.
| Код HTML | Описание |
|---|---|
|
Текст |
Добавляет новый абзац текста, по умолчанию выровненный по левому краю. Перед абзацем и после него автоматически добавляются небольшие вертикальные отступы. |
|
Текст |
Выравнивание по центру. |
|
Текст |
Выравнивание по левому краю. |
|
Текст |
Выравнивание по правому краю. |
|
Текст |
Выравнивание по ширине. |
| Отключает автоматический перенос строк, даже если текст шире окна браузера. | |
| Текст | Разрешает браузеру делать перенос строки в указанном месте, даже если используется тег |
|
Текст
|
Выравнивание по центру. |
|
Текст
|
Выравнивание по левому краю. |
|
Текст
|
Выравнивание по правому краю. |
|
Текст
|
Выравнивание по ширине. |
Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что align=»left» можно опустить.
Отличие между абзацем (тег
) и тегом в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет в случае использования тега .
Атрибут align достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде . В примере 1 показано, как в подобном случае устанавливать выравнивание.
Пример 1. Выравнивание текста
Выравнивание текста Как поймать льва?
Метод перебора
Делим пустыню на ряд элементарных участков, размер которых совпадает с габаритными размерами льва, но при этом меньше размера клетки. Далее простым перебором определяем участок, в котором находится лев, что автоматически приводит к его поимке.
Метод дихотомии
Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.
Результат примера показан на рис. 1.
Рис. 1. Выравнивание текста по правому и левому краю
В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю.
Подобно тому, как ваш текстовый редактор предоставляет заголовки — , а также множество способов осмысленного и наглядного форматирования фрагментов текста, HTML предоставляет очень похожий набор семантических и несемантических элементов для осмысления прозы.
В этом разделе рассматриваются основные способы разметки текста, или его основы. Затем мы обсудим атрибуты, а затем рассмотрим дополнительные способы разметки текста, такие как списки, таблицы и формы.
Заголовки, пересмотр¶
Существует шесть элементов заголовков разделов, , , , , и , причем является наиболее важным, а — наименее. В течение многих лет разработчикам говорили, что заголовки используются браузерами для выделения структуры документов. Изначально это было целью, но браузеры так и не реализовали функции структурирования. Однако пользователи программ чтения с экрана используют заголовки в качестве стратегии изучения содержимого страницы, перемещаясь по заголовкам с помощью клавиши h . Поэтому обеспечение уровней заголовков так же, как и структурирование документа, делает ваш контент доступным и по-прежнему очень приветствуется.
По умолчанию браузеры стилизуют самым большим, — чуть меньшим, причем каждый последующий уровень заголовка по умолчанию становится меньше. Интересно, что браузеры по умолчанию также уменьшают размер шрифта в зависимости от количества элементов , , или , в которые он вложен.
Некоторые таблицы стилей пользовательских агентов включают следующие или аналогичные селекторы для стилизации вложенных элементов так, как будто они относятся к менее важному уровню:
1 2 3 4 5 6 7 8
h2, :is(article, aside, nav, section) h1 > h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 > Однако модель объектов доступности (Accessibility Object Model, или AOM) все равно корректно сообщает уровень элемента, в данном случае «заголовок, уровень 1». Обратите внимание, что браузер не делает этого для других уровней заголовков. Тем не менее, не стоит использовать стилизацию браузера на основе уровня заголовка. Даже если браузеры не поддерживают выделение, делайте вид, что поддерживают; оформляйте заголовки контента так, как будто они поддерживают выделение. Это сделает ваш контент понятным для поисковых систем, устройств чтения с экрана и будущих разработчиков (которыми вполне можете оказаться и вы).
За пределами заголовков большинство структурированных текстов состоит из серии абзацев. В HTML абзацы выделяются тегом ; закрывающий тег необязателен, но всегда рекомендуется.
Раздел #about имеет заголовок и несколько абзацев:
Этот раздел не является ориентиром, так как не имеет доступного имени. Чтобы превратить его в region , который является ролью landmark , можно использовать aria-labelledby для указания доступного имени:
1 2 3
section id="about" aria-labelledby="about_heading"> h2 id="about_heading">What you'll learnh2> section> Создавайте ориентиры только тогда, когда это необходимо. Слишком большое количество ориентиров может быстро дезориентировать пользователей программ чтения с экрана.
Цитаты и цитирование¶
При разметке статьи или записи в блоге вы можете захотеть включить цитату или выдержку, с видимым цитированием или без него. Для этих трех компонентов существуют элементы: , и для видимого цитирования, или атрибут cite для предоставления дополнительной информации для поиска.
Раздел #feedback содержит заголовок и три отзыва; эти отзывы представляют собой блочные цитаты, некоторые из которых содержат кавычки, за которыми следует абзац, содержащий цитату. Если опустить третий отзыв для экономии места, то разметка выглядит следующим образом:
Информация об авторе цитаты, или цитата, не является частью цитаты и, следовательно, не входит в , а располагается после цитаты. Хотя это и цитаты в обычном понимании этого термина, они не являются ссылками на конкретный ресурс, поэтому заключены в элемент абзаца
.
Хотя мы представили информацию о цитировании в абзаце после каждой блок-цитаты, приведенные ранее цитаты закодированы таким образом, потому что они не были получены из внешнего источника. Если бы они были получены из внешнего источника, на него можно (нужно?) было бы сослаться.
Если обзор был взят с обзорного сайта, из книги или другой работы, то для названия источника может использоваться элемент . Содержимым может быть название книги, название сайта или телепередачи, или даже имя компьютерной программы. Инкапсуляция может использоваться независимо от того, упоминается ли источник вскользь, цитируется ли он или на него делается ссылка. Содержимым является произведение, а не автор.
Если цитата из Блендана Смута была взята из ее автономного журнала, то блок-цитату можно написать следующим образом:
Элемент цитирования не имеет неявной роли и должен получать свое доступное имя из своего содержимого; не следует включать в него aria-label .
Для того чтобы отдать должное, когда нет возможности сделать содержимое видимым, существует атрибут cite , который принимает в качестве значения URL-адрес исходного документа или сообщения для цитируемой информации. Этот атрибут действителен как для , так и для . Хотя это и URL, он является машиночитаемым, но не видимым для читателя:
Если закрывающий тег
является необязательным (но всегда рекомендуется), то закрывающий тег
всегда обязателен.
Большинство браузеров добавляют отступы как к строчным направлениям , так и к курсивному содержанию ; это можно контролировать с помощью CSS. Элемент не добавляет кавычек, но они могут быть добавлены с помощью CSS-генерируемого содержимого. Элемент по умолчанию добавляет кавычки, используя соответствующие языку кавычки.
В разделе #teachers HAL цитирует слова: «I’m sorry Dave, but I’m afraid I can’t do that.». Код для этого, на английском и французском языках, таков:
Встроенный элемент кавычек добавляет кавычки, соответствующие языку. Стили, используемые по умолчанию в пользовательском агенте, включают генерируемое содержимое открытых и закрытых кавычек:
1 2 3 4 5 6
q::before content: open-quote; > q::after content: close-quote; > Атрибут lang включен для того, чтобы браузер знал, что, хотя основной язык страницы определен как английский в открывающем теге , данный абзац текста написан на другом языке. Это помогает голосовым системам управления, таким как Siri, Alexa и voiceOver, использовать французское произношение. Кроме того, он сообщает браузеру, какой тип кавычек следует отображать.
Подобно , элемент поддерживает атрибут cite .
Сущности HTML¶
Еще несколько часто используемых символов: © для обозначения авторского права (©), ™ для обозначения товарного знака (™) и для обозначения неразрывного пробела. Неразрывные пробелы полезны в тех случаях, когда необходимо включить пробел между двумя символами или словами, не допуская при этом разрыва строки. Существует более 2 000 именных ссылок на символы. Но при необходимости каждый символ, включая emojis, имеет кодированный эквивалент, начинающийся с &# .
Если вы посмотрите на обзор семинара ToastyMcToastface (не включенный в приведенный выше пример кода), то там есть несколько необычных текстовых символов:
1 2 3 4 5 6 7
blockquote> Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇ blockquote> Последнее предложение в этой цитате можно записать и так:
1 2 3 4 5 6 7 8 9
This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙ ͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟ ̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱ ͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳ ̯̮͇ В этом коде есть несколько неэкранированных символов и несколько ссылок на именованные символы. Поскольку кодировка UTF-8, последние несколько символов в блочной цитате не требуют экранирования, как в данном примере. Необходимо экранировать только те символы, которые не поддерживаются кодировкой. При необходимости существует множество инструментов, позволяющих экранировать различные символы, или можно просто включить в .
Даже если вы указали кодировку UTF-8, вам все равно придется экранировать < , если вы хотите вывести этот символ на экран. Обычно не требуется включать именованные ссылки на символы >, » или & ; но если вы хотите написать учебник по сущностям HTML, то вам придется писать < , когда вы будете учить кого-то, как кодировать < . ��
О, и этот смайлик-эмодзи — 😀 , но этот документ объявлен как UTF-8, поэтому он не экранируется.
Разметка текста с помощью HTML
Научимся добавлять на простейшую HTML-страницу текстовое содержание и правильно размечать его: абзацы, заголовки, подзаголовки, списки и многое другое.
Абзацы [1/17]
В курсе «Структура HTML-документа» вы познакомились с тегами, необходимыми для создания простейшей HTML-страницы, и с некоторыми служебными тегами, которые не отображаются в браузере.
В этом курсе мы будем изучать теги для логической разметки текста. Использовать их можно только внутри тега .
Начнём с простейшего тега
, с помощью которого создаются абзацы. По умолчанию абзацы начинаются с новой строки и имеют вертикальные отступы, которыми можно управлять с помощью стилей.
Заголовки и подзаголовки [2/17]
Для создания структуры больших текстов обычно используются заголовки. В текстовых редакторах есть возможность выделить часть текста, найти пункт «Заголовок» нужного уровня в меню, и применить его.
В языке HTML для выделения заголовков предусмотрено целое семейство тегов: от до . Тег обозначает самый важный заголовок (заголовок верхнего уровня), а тег обозначает подзаголовок самого нижнего уровня.
На практике редко встречаются тексты, в которых встречаются подзаголовки ниже третьего уровня. Поэтому самыми часто используемыми тегами заголовков являются: , и .
Стоит отметить, что поисковые системы придают особое значение заголовкам, поэтому необходимо учиться правильно их использовать.
Неупорядоченный список [3/17]
Списки часто используются в различных документах. Иногда, чтобы сделать список, пользователь просто нумерует строчки текста. Такой подход не является хорошим, так как в документе отсутствует логическая сущность «список».
В HTML существует семейство тегов для создания списков: неупорядоченных, упорядоченных и списков определений. В последующих заданиях мы будем тренироваться работать с ними.
-
(Unordered List — неупорядоченный список), который может содержать внутри себя теги
(List Item, элемент списка), обозначающие «элемент списка».
Упорядоченный список [4/17]
-
, который может содержать внутри себя теги
.
Если элементы неупорядоченного списка по умолчанию отмечаются маркерами, то элементы упорядоченного списка — нумеруются.
Для упорядоченного списка можно задать атрибут start , который изменяет начало нумерации. Например, код:
Приведёт к такому результату:
Многоуровневый список [5/17]
Создать многоуровневый список достаточно просто.
Пример правильного кода:
Пример кода с ошибкой:
В примере с ошибкой вложенный список вставлен не внутрь элемента списка, а между элементами, что недопустимо.
Количество уровней в списках не ограничено. В многоуровневом списке можно использовать как упорядоченные, так и неупорядоченные списки.
В этом задании мы потренируемся работать с многоуровневыми списками.
Ещё более многоуровневый [6/17]
Хорошо. Вы создали двухуровневый список. Теперь задание посложнее.
В этом задании вам нужно будет создать четырёхуровневый список, наподобие этого:
- Разметка
- Основы HTML
- HTML-теги
- парные
- одиночные
- Селекторы
- по типу
- по классу
- вложенные
Список определений [7/17]
Список определений создаётся с помощью трёх тегов:
- (Definition List) обозначает сам список определений;
- (Definition Term) обозначает термин;
- (Definition Definition) обозначает определение термина.
Теги и пишутся парами внутри .
- Термин
- Определение
- Второй термин
- И его определение
- Кошка
- Шерстяное изделие развлекательного характера
Важность. Теги strong и b [8/17]
Ещё раз отметим, что этот курс посвящён логической разметке текста, поэтому уделяется особое внимание смыслу элементов, их предназначению, а не визуальному форматированию.
В предыдущих заданиях вы познакомились с элементами, которые предназначены для разметки крупных блоков текста: заголовков, абзацев и списков. В этом и последующих заданиях мы познакомимся с элементами, предназначенными для разметки небольших фраз и отдельных слов.
Первые два тега предназначены, чтобы указать на важность слова или фразы.
Тег определяет важность отмеченного текста.
Тег предназначен для выделения текста без придания ему особой важности.
Визуально оба тега одинаковы, они выделяют текст полужирным.
Лучше всего отличия этих тегов будут заметны людям, которые используют специальные настройки ОС, в частности, слепым и слабовидящим. Когда они включают функцию чтения текста, то «говорилка» будет интонацией выделять слова с тегом . То же самое касается и тегов и . Тег «говорилка» будет выделять интонацией.
Отметим, что новый смысл тегу придали в HTML5. Раньше это был тег, который просто делает текст полужирным. То есть он был предназначен только для визуального форматирования.
Акцентируем внимание. Теги em и i [9/17]
Следующие два тега предназначены для акцентирования внимания на слово или фразу.
Тег определяет текст, на который сделан особый акцент, меняющий смысл предложения.
Например, если мы хотим подчеркнуть, что Кекс не любит питаться укропом (он больше за тунца), а любит только гонять его по полу, то разметим текст так:
Инструктор Кекс любит играть с укропом.
Тег обозначает текст, который отличается от окружающего текста, но не является более важным. Обычно так выделяют названия, термины, иностранные слова.
Например, если мы хотим указать, что инспектор — это какой-то специальный термин, то разметим текст так:
Обычно Кекс пользовался инспектором браузера для поиска ошибок.
Визуально оба тега одинаковы, они выделяют текст курсивом.
Новый смысл тегу придали в HTML5. Раньше это был просто тег для выделения текста курсивом.
Переносы и разделители. Теги br и hr [10/17]
Иногда возникает необходимость вставить в текст перенос строки, не создавая при этом абзац. Например, при разметке стихов или текстов песен.
Для этого в HTML предусмотрен одиночный тег
.Иногда этот тег используется для разбиения текста на «как бы абзацы», что является плохим подходом. Используйте для разметки абзацев тег
.
Одиночный тег
используется для того, чтобы создать горизонтальную линию-разделитель. На внешний вид этой линии можно влиять с помощью атрибутов, но правильней делать это с помощью CSS (это будет изучаться в последующих курсах).
Цитаты [11/17]
В HTML существует несколько тегов для обозначения цитат:
- предназначен для выделения длинных цитат, которые могут состоять из нескольких абзацев. Тег выделяет цитату как отдельный блок текста с отступами.
- предназначен для выделения коротких цитат в предложениях. Текст внутри этого тега автоматически обрамляется кавычками.
- используется для того, чтобы выделить источник цитаты, название произведения или автора цитаты.
HTML: Текст в HTML
Внутри браузера или другой программы, которая может обрабатывать HTML, текст выводится на основе указанных тегов. Без них браузер не поймёт, как правильно вывести текст.
Посмотрим на пример текста и попробуем вывести его используя разметку тегами и без этого.
Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.
При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком — это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.
Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства.
Если вставить текст на страницу без использования тегов, то получим такой результат:
Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода. При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком — это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии. Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства.
Это не тот результат, который ожидался — строки слиплись и превратились в одну нечитаемую строку. Для того, чтобы текст выглядел так, как задумано, его необходимо обернуть в теги
:
Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.
При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком — это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.
Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства.
Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.
При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком — это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.
Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства.
Пример иллюстрирует, что оформленный текст в офисном редакторе при открытии в браузере станет одной сплошной строкой, поэтому информация размечается специальными тегами. В процессе прохождения курса рассмотрим теги для создания таблиц, списков, ссылок и логических секций страницы. В этом же уроке мы подробнее рассмотрели параграфы и важность разметки для правильного вывода информации на странице
Задание
Карьерный портал «Мой круг» изучил рынок IT-образования и выяснил, в каких онлайн-школах эффективно учат программированию. В итоговом рейтинге Хекслет занял второе место.
«Мой круг» опросил 3500 IT-специалистов и составил рейтинг онлайн-школ для программистов. В опросе приняли участие пользователи «Моего круга» и «Хабра», которые учились в онлайн-университетах. В финальной таблице «Хекслет» занял второе место.
Каждый абзац должен находиться внутри отдельного тега
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
- HTML-теги
- Основы HTML