Как выводить текст в html
Текст в html
Вид текста на экране зависит только от тегов, он не зависит от пробелов и разбивки на строки.
Все элементы оформления HTML-документов разделяются на два типа: строчные и блочные.
Строчные элементы могут являться частью строки, а блочные элементы всегда занимают обособленное место на web-странице и всегда начинаются с новой строки. Естественно, блочные элементы могут включать в себя другие блочные элементы и строчные элементы. По вполне понятным причинам строчные элементы не могут включать в себя блочные элементы.
Объединение элементов web-страницы в блоки позволяет применять к ним единое оформление, осуществлять верстку. Достаточно будет изменить расположение блока, изменив один объединяющий тег. Естественно, это удобнее, чем менять расположение каждого элемента web-страницы по отдельности.
Для обрамления элементов блочного типа используется пара
Браузеры обрамляют div-блоки разрывами строки.
Пример
Основные теги форматирования текста
Пример
Создайте текстовый файл, как в примере. Сохраните его с расширением html.
Двойной щелчок по его наименованию в папке запустит браузер, установленный по умолчанию, и в него уже будет загружен ваш html-документ.
Выделение в тексте
| . | Полужирный шрифт. |
| . | Курсив. |
| Подчеркнутый текст. | |
| . | Перечеркнутый текст. |
| . | Надстрочный текст. |
| . | Подстрочный текст. |
Пример
до заголовка
Например, если мы рассматриваем какую-либо обширную тему, мы заключаем ее название в
. Заголовок на уровень ниже в
и так далее до
Например, возьмем заголовок «рецепты с гречкой». Далее все зависит от того, как вы хотите структурировать страницу. Я бы взял и разделил следующим образом:
Может это не самая лучшая структура, но смысл ясен.
Так же подзаголовки могут разделяться на какие-то логические действия. Например:
В общем и целом понимание должно появиться. Идем дальше.
Визуально, заголовки отличаются размером — чем выше уровень тем больше размер, так же заголовки выделяются жирным.
Если мы наберем следующий код:
То результат будет следующим.
Рассмотрим каждый элемент подробнее.
Тег h1
— заголовок верхнего уровня. Он должен встречаться в документе один раз в самом начале. Это как заголовок книги, ведь название книги не может встречаться несколько раз.
Рекомендуется делать уникальный заголовок
для каждой страницы сайта.
Стандартный стиль для заголовка
display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
Тег h2
— подзаголовок
. В отличии от
может встречаться на веб-странице несколько раз.
Стандартный стиль для заголовка
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
Тег h3
Стандартный стиль для заголовка
display: block;
font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
Тег h4
Стандартный стиль для заголовка
display: block;
margin-block-start: 1.33em;
margin-block-end: 1.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
Тег h5
Стандартный стиль для заголовка
display: block;
font-size: 0.83em;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
Тег h6
Стандартный стиль для заголовка
display: block;
font-size: 0.67em;
margin-block-start: 2.33em;
margin-block-end: 2.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
Теги форматирования текста
Форматирование текста — это разметка (процесс разметки) текста. В HTML используется много тегов форматирования, которые со временем заменяет CSS. Рассмотрим эти элементы.
Тег b
Элемент выделяет текст полужирным, не несет смысловой нагрузки.
Пример.
Тег strong
Элемент выделяет текст полужирным, придает выделеному тексту смысловую нагрузку.
Пример.
Тег i
Элемент выделяет текст курсивом без смысловой значимости.
Пример.
Тег em
Элемент выделяет текст курсивом со смысловой значимостью, визуально не отличается от .
Пример.
Тег small
Элемент уменьшает размер текста на единицу.
Тег sup
Элемент используется для создания надстрочного текста.
Тег sub
Элемент используется для создания подстрочного текста.
Пример.
Тег ins
Тег del
Элемент предназначен для пометки текста на удаление, перечеркивает текст.
Пример.
Результат.
Актуальная версия HTML 4.1
Тег mark
Элемент выделяет текст желтым цветом.
Пример.
Устаревшие теги
Теги, которые использовались в ранних версиях HTML и на данный момент считаются устаревшими, вместо них использую CSS.
Тег u
Элемент использовался для подчеркивания текста.
Стандартный стиль тега:
text-decoration: underline;
В настоящее время рекомендуется использовать его стиль, то есть:
Результат будет одинаков.
Это подчеркнутый текст.
На смену пришел элемент
Читать текст не разбитый на абзацы крайне не удобно. Для удобства нужно разбивать текст. Для этих целей в HTML есть теги абзаца, переноса тега и горизонтальной линии.
Тег p
используется для создания параграфа, то есть он разделяет текст на отдельные абзацы между которыми стоит пустая строка.
Пример.
Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века.
В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
Тег br
Элемент
используется для разрыва строки. После него текст переноситься на новую строку. Это одиночный тег, он не имеет закрывающего тега.
Тег hr
Элемент используется для создания горизонтальной линии. Не требует закрывающего тега.
Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века.
В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.
Форматирование текста в HTML
В настоящее время, текст в HTML является основным способом подачи информации. Подавляющее большинство сайтов в Интернете состоят именно из текстового контента. Это означает, что создать свой сайт можно при умении, как минимум, читать, а как максимум — писать (в каждой шутке есть доля правды).
Н о такой текст не всегда удовлетворяет задумке создателя сайта и возникает необходимость какую-то часть текста как-то выделить или применить форматирование текста для подчеркивания его смыслового наполнения. Самое главное тут — соблюдать меру и следить за тем, чтобы всё было уместно и по делу. Даже стихами заговорил.
Н у что же, рассмотрим наиболее часто используемые теги для форматирования текста в HTML и их атрибуты.
§ 1. Теория
З десь нужно коротко упомянуть о том, что такое текст в «электронном» виде. Я не буду подробно вдаваться в то, как он представляется в различных кодировках и системах. Скажу лишь о том, как связаны форматирование текста в HTML и его редактирование в текстовых редакторах.
Д опустим, ты набрал текст в редакторе, произвел его форматирование (выделил какие-то слова жирным или курсивом), либо сделал с ним что-то ещё. Затем скопировал и вставил текст в свой html-код. Открываешь html-страницу в браузере, а всё твоё форматирование куда-то исчезло. Происходит это потому, что текстовый редактор для форматирования текста применяет свои спецсимволы (по сути те же теги, только используются в текстовых редакторах), которые ты по умолчанию не видишь.
В окне редактора ты видишь только текст. А на самом деле там есть ещё управляющие спецсимволы, с помощью которых редактор «понимает», как ему отображать тот или иной кусок текста. Т. е., повторюсь, это то же самое, что и теги в HTML, только «заточенные» под использование в текстовых редакторах.
Н о, не смотря на это, существует способ перенести текст из редактора и вставить его в html-код в исходном виде. И раз уж об этом зашла речь, то форматирование текста и начнем изучать с этого тега. Итак, приступим.
§ 2. Сами теги для форматирования
С амыми популярными тегами для форматирования текста являются:
- — используется для выделения текста полужирным.
В се эти теги для форматирования текста можно использовать как по одному, так и несколько вместе. Достигается это путем вложения тегов друг в друга. Например, следующий html-код:
при просмотре в браузере будет выглядеть так:
§ 3. Абзацы
Т о выглядеть это будет так:
И спользовать закрывающий тег не обязательно, т. к. браузер считает, что начало следующего абзаца означает конец предыдущего, но для избежания путаницы желательно.
§ 4. Выравнивание текста
Д ля того, чтобы выровнять текст используется атрибут align с возможными значениями center, left, right и justify. Он, соответственно, выравнивает текст по центру, по левому краю, по правому краю и одновременно по двум краям сразу. Например, html-код:
выровняет текст по центру:
выровняет текст по правому краю
Е сли атрибут align не используется, то текст будет выровнен по левому краю. Это происходит по умолчанию. Пример, код:
выровнит текст по левому краю
§ 5. Перенос строки и горизонтальная черта
в браузере будет выглядеть так:
У нет закрывающего тега. Ты уже наверное догадался, что для вставки нескольких пустых строк, нужно записать тег несколько раз подряд.
в браузере примет вид
Ш ирину и толщину можно указывать как в пикселах (тогда величина будет постоянной), так и в процентах (тогда величина будет меняться в зависимости от разрешения экрана).
§ 6. Заголовки
Д ля задания названий разделов и подразделов в HTML используются теги заголовков. Существуют шесть уровней заголовков и обозначаются они так:
- — заголовок первого уровня
— заголовок второго уровня
— заголовок третьего уровня
— заголовок четвёртого уровня
— заголовок пятого уровня
— заголовок шестого уровня
Н апример, код HTML:
в браузере будет выглядеть так:
Заголовок 4 уровня
§ 7. Работа со шрифтами
§ 8. Создание списков в HTML
В нумерованном списке маркеры (значения атрибута type) такие:
браузер покажет так:
В маркированном списке значения атрибута type такие:
в браузере выглядит так:
К ак и остальные теги HTML, списки можно вкладывать друг в друга. Получаются многоуровневые вложенные списки. Например, код:
браузер покажет так:
§ 9. Заключение
Р ассказ о том, что нужно для форматирования текста в HTML, был бы не полным без упоминания о спецсимволах. Спецсимволы — это символы, которых либо нет на клавиатуре, либо те, которые браузер принимает за управляющий символ и преобразует в код. Полный список этих символов ты найдешь здесь Спецсимволы HTML. Кроме того, самые главные знания для форматирования текста — это правила грамматики русского языка. Грамотно написанный текст уже наполовину отформатирован.
Н у и напоследок, для закрепления всего вышеизложенного, в качестве самостоятельной работы, изучи вот этот HTML-код:
и попробуй сам понять, что означают эти теги и их атрибуты, а также, где на этой странице мог бы использоваться этот код HTML.
Н а этом рассказ о тегах HTML для форматирования текста объявляется законченным. Раздел получился довольно большим. Не пытайся выучить все новые теги и атрибуты наизусть, всё равно не получится. Они сами постепенно запомнятся во время работы над созданием сайта.
В следующем разделе поговорим о том, как вставить картинку в html-страницу.
Поделиться ссылкой на эту страницу в:
Выводим текст на HTML5 Canvas
HTML5 Canvas – очень обширная тема со многими “вкусностями”, о многих из которых уже писали и ещё будут писать. Поэтому, я хочу немного рассказать в этой статье, только об одной маленькой, и как на первый взгляд может показаться банальной темой – работа с текстом. Я хочу показать, что с ним почти также можно работать, как с обычным текстом в вебе, т.е. позиционировать, накладывать стили и градиенты, а также писать многострочные предложения легко и без проблем.
Простой текст
Чтобы вывести обычный текст, можно воспользоваться двумя функциями контекста fillText() и strokeText().
Эти функции принимают три обязательных параметра: сам текст и координаты X и Y, т.е. место его расположения, и последний – необязательный: максимальная ширина текста, если вы зададите максимальную ширину текста меньше, чем фактическая ширина, то текст сожмется до указанной вами ширины. Не советую задавать максимальную ширину, так как при сжатии и у него становится плохой вид. Вместо такого сжатия рекомендую переносить текст на новую строку, стандартной функции для этого нет, но я приведу пример, как это легко реализовывается.
Если просто вывести текст при помощи таких функций, то такой текст будет мелкий и невзрачный. Это мы можем исправить задав ему шрифт в переменную контекста font. Шрифт задается, также как и в CSS ([font style][font weight][font size][font face]). Пример:
Расположение текста
Есть два стандартных способа позиционирования текста, относительно своего расположения: вертикальное и горизонтальное.
Вертикальное позиционирование задается при помощи textBaseline, в неё устанавливается один из возможных вариантом: top, hanging, middle, alphabetic, ideographic и bottom.
А горизонтально при помощи textAlign, может быть один из следующих параметров: center, start, end, left, right.
Эти способы далеко не идеальны и при помощи них иногда проблематично спозиционировать текст, так как хочется именно вам. Ниже я опишу способ, как можно использовать своё позиционирование, даже многострочного текста.
Стилизация
Самое простое, как мы можем стилизовать текст, это задать ему цвет. Цвет задается при помощи fillStyle – для задания цвета заливки и strokeStyle – для задания цвета обводки.
Так же как и в CSS3 можно накладывать тени и на текст в канвасе. Это делается при помощи: shadowColor – задание цвета тени, shadowOffsetX и shadowOffsetY – задание отступа и shadowBlur – задание размытия тени.
Поддерживаются также и градиенты для текста. Сам градиент создается при помощи функции createLinearGradient(). А при помощи функции addColorStop() задаются цвета и позиции их в нём. Текст заливается градиентом также как и сплошным цветом, при помощи fillStyle и strokeStyle.
Кроме обычной заливки и заливки градиентом можно также залить какой-либо текстурой. Для этого необходимо до начала вывода текста загрузить изображение-текстуру. А затем при помощи createPattern() создать текстуру на его основе. Можно задать, чтобы изображение повторялось либо нет.
Ширина текста и многострочный текст
Допустим, вам необходимо написать текст на канвасе неограниченной длинны, будь то одно слово, или несколько предложений. Если вы будете его писать как есть, т.е. весь текст вставите в fillText(), то на экране будет видна только та часть, которая по своей ширине не превышает ширину канваса. Т.е. если ширина канваса 400 пикселей, то вы не уведете текст, который выходит за его ширину. Для того, чтобы сделать многострочный текст необходимо исхитрится. Но алгоритм прост. Сначала высчитываем ширину текста, сверяем её с максимальной шириной области, куда мы хотим вывести этот текст. Если ширина текста не превышает ту ширину, то выводим текст, а если превышает, то разбиваем текст самым удобным для вас способом, я предпочитаю разбивать по пробелам.
Для того чтобы высчитать ширину текста можно воспользоваться функцией measureText(), которая отдает в объектной форме ширину текста (к сожалению данная функция не отдает высоту текста, надеюсь эта возможность будет добавлена, но а пока придется высчитывать иными способами, как именно далее в статье).
Пример:
Вроде как всё хорошо, не нужно задавать координаты текста, самому вручную вычислять влезет ли текст по ширине или нет. Почти всё автоматизировано и выглядит неплохо, но остается всё-таки маленький нюанс, высота текста у нас захардкоджена, по этому при смени шрифта или размера придется каждый раз подправлять вручную высоту текста (в примере переменная lineHeight).
Определяем высоту текста
При работе с текстом на канвасе ни функция measureText(), ни одна другая не дают нам определить высоту текста. Всё же можно справиться и с этой бедой, вариант решения этой проблемы, который я хочу предложить вам, не очень красив, но всё же оно работает.
Когда мы задаем стиль текста (размер и стиль шрифта) в font, то мы его задаем в таком же стиле, так как бы мы его задавали в CSS. Шрифты и их размеры, конечно если доступен такой шрифт в канвасе, то также он будет доступен и в обычных стилях.
И так, идея вот в чем, у нас есть размер и тип шрифта в переменной font, мы создаем в DOM новый элемент, туда помещаем текст, и устанавливаем стили из той переменной. Далее при помощи offsetHeight получаем высоту элемента, которая и будет высотой нашего текста. После этого можем благополучно удалить этот элемент из DOM.
Пример реализации этой идеи:
Буду рад, если кто-то предложит более красивый или правильный вариант получения высоты текста.
Спасибо.
Основы редактирования текста в HTML
Одна из основных задач HTML — придавать тексту структуру и смысл, семантику, так, чтобы браузер смог отобразить текст корректно. Эта статья покажет, как можно использовать HTML, чтобы упорядочить текст на странице путём добавления заголовков и абзацев, выделения слов, создания списков и многое другое.
Основы: Заголовки и абзацы / параграфы
Большинство структурированных текстов состоят из параграфов и заголовков, независимо от того, читаете ли вы рассказ, или газету, или учебник, журнал и т.д.
Упорядоченный контент делает чтение более лёгким и приятным.
В HTML каждый абзац заключён в элемент
Каждый заголовок заключён в элемент заголовка
Имеется шесть элементов заголовка:
(en-US) и(en-US). Каждый элемент представляет разный уровень контента в документе;
представляет главный заголовок,
представляет подзаголовки,
представляет под-подзаголовки и так далее.
Создание иерархической структуры
Например, в рассказе
будет представлять заглавие рассказа,
обозначит название каждой главы,
будет обозначать подзаголовки в каждой главе и так далее.
Всё это действительно зависит от вас — что именно будут представлять собой элементы, пока существует иерархия. Вам просто нужно иметь в виду несколько хороших правил при создании таких структур.
для создания подзаголовков при одновременном использовании
Зачем нам необходима структура?
Чтобы ответить на этот вопрос, давайте посмотрим на text-start.html — отправную точку нашего примера для этой статьи (хороший рецепт хумуса). Вы должны сохранить копию этого файла на своём локальном компьютере, так как вам понадобится это для упражнений позже. Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return для перехода на следующую строку).
Однако, когда вы откроете документ в своём браузере, вы увидите, что текст выглядит как один большой кусок!
Это связано с тем, что нет элементов для создания структуры контента, поэтому браузер не знает, где здесь заголовок и где абзац. Более того:
Поэтому нужно дать структурную разметку нашему контенту.
Активное изучение: создание структуры для нашего контента
Давайте рассмотрим это на живом примере. В приведённом ниже примере добавьте элементы в исходный текст в поле « Редактируемый код », чтобы он отображался как заголовок и два абзаца в поле « Результат ».
Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки Сбросить. Если вы застряли, нажмите кнопку Показать решение, чтобы увидеть ответ.
Почему мы нуждаемся в семантике?
Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметов; когда мы что-то видим, мы знаем, какова его функция. Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зелёный свет означает «идти». Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)
В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид. В этом контексте элемент
(en-US) также является семантическим элементом, который даёт тексту, который он обёртывает, роль (или значение) «заголовка верхнего уровня на вашей странице».
По умолчанию браузер придаст ему большой размер шрифта, чтобы он выглядел как заголовок (хотя вы можете стилизовать его как угодно, используя CSS). Что ещё более важно, его семантическое значение будет использоваться несколькими способами, например, поисковыми системами и программами чтения с экрана (как упоминалось выше).
С другой стороны, вы можете сделать любой элемент похожим на заголовок верхнего уровня. Рассмотрим следующее:
Списки
Теперь обратим наше внимание на списки. Списки есть везде вокруг нас — от вашего списка покупок до списка направлений, которым вы подсознательно следуете, чтобы каждый день добраться домой, и списка инструкций, которые вы выполняете в этом руководстве! Списки используются всюду в Интернете, и мы рассмотрим три разных типа списков.
Неупорядоченные
Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмём, к примеру, список покупок:
Последний шаг состоит в том, чтобы обернуть каждый элемент списка в элемент (элемент списка):
Активное изучение: разметка неупорядоченного списка
Попробуйте отредактировать образец ниже, чтобы создать свой собственный неупорядоченный список HTML.
Упорядоченные
Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмём в качестве примера маршрут следования:
Структура разметки такая же, как для неупорядоченных списков, за исключением того, что вы должны обернуть элементы списка в элемент (ordered list), а не
- :
Активное изучение: разметка упорядоченного списка
Попробуйте отредактировать образец ниже, чтобы создать свой собственный упорядоченный список HTML.
Активное изучение: разметка собственной страницы рецептов
Итак, в этот момент в статье у вас есть вся необходимая информация, чтобы разметить наш пример страницы рецепта. Вы можете либо сохранить локальную копию исходного файла text-start.html и выполнить в нём работу, либо сделать это в приведённом ниже примере. Делать это локально, вероятно, будет лучше, так как тогда вы сможете сохранить работу, которую вы делаете, тогда как если вы её добавите в редактируемый пример, она будет потеряна при следующем открытии страницы. У обоих способов есть плюсы и минусы.
Если вы застряли, вы всегда можете нажать кнопку Показать решение или проверить наш пример text-complete.html в нашем реестре github.
Вложенные списки
Вполне нормально вложить один список в другой. Возможно, вы захотите, чтобы один список располагался внутри другого. Давайте возьмём второй список из нашего примера рецепта:
Попробуйте вернуться к предыдущему примеру активного обучения и обновить второй список.
Акцент и важность
Акцент
Когда мы хотим добавить акцент в разговорный язык, мы подчёркиваем определённые слова, тонко изменяя смысл того, что мы говорим. Точно так же на письменном языке мы склонны подчёркивать слова, выделяя их курсивом. Например, следующие два предложения имеют разные значения.
Я рад, что ты не опоздал.
Я рад, что ты не опоздал.
В первом предложении звучит искреннее облегчение, что человек не опоздал. Во втором, напротив, звучит сарказм или пассивная агрессия: так выражена досада от того, что человек немного опоздал.
Важное значение
Чтобы подчеркнуть важные слова, мы склонны подчёркивать их в устной речи и выделять жирным на письменном языке. Например:
Эта жидкость очень токсична.
Я рассчитываю на вас. Не опаздывай!
При желании вы можете вложить важные и акцентированные слова друг в друга:
Активное изучение: Давайте будем важны!
В этом разделе активного обучения мы предоставили редактируемый пример. Внутри него мы хотели бы, чтобы вы попытались добавить акцент и большую важность для слов, которые, по вашему мнению, им нужны, просто для того, чтобы попрактиковаться.
Курсив, жирный шрифт, подчеркивание.
HTML5 переопределил , и с новыми, несколько запутанными, семантическими ролями.
Вот хорошее правило: предпочтительней использовать , или для передачи значения, традиционно передаваемого жирным шрифтом, курсивом или подчёркиванием, при условии, что нет более подходящего элемента. Тем не менее, всегда важно сохранить менталитет доступности. Концепция курсива не очень помогает людям, использующим устройства для чтения с экрана, или людям, использующим систему письма, отличную от латинского алфавита.
Предупреждение о подчёркивании: люди сильно ассоциируют подчёркивание с гиперссылками. Поэтому в Интернете лучше всего подчеркнуть только ссылки. Используйте элемент , когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчёркивания по умолчанию для чего-то более подходящего в Интернете. Пример ниже иллюстрирует, как это можно сделать.