Оформление текста — Технологии Яндекса
Турбо‑страницы поддерживают несколько типов ссылок:
ссылка на другую страницу сайта;
ссылка на якорь в пределах одной страницы или на якорь другой страницы.
Для формирования ссылок в Турбо‑страницах используется элемент a:
<a ="https://example.com" ="true">Text</a>data-turbo
Атрибут, который определяет какая версия страницы откроется при переходе по ссылке. Возможные значения:
true — по ссылке откроется Турбо-версия страницы, если она сформирована. Используется по умолчанию.
false — по ссылке откроется обычная страница или ее мобильная версия.
Если атрибут data-turbo не указан, по ссылке откроется Турбо‑страница, если она сформирована.
* Обязательный параметр
Примеры ссылок:
<a href="http://example.com/page2/">Ссылка на другую Турбо‑страницу</a><br> <a href="http://example.com/page2/" data-turbo="false">Ссылка на обычную страницу</a><br> <a href="http://example.com/page2/#topic2">Ссылка на якорь другой страницы</a><br> <a href="http://example.com/page1/#title">Ссылка на заголовок h2 на этой странице</a><br> <a href="#component">Ссылка на контент в виде аккордеона на этой странице</a><br> <h2>Заголовок</h2> <div data-block="accordion"> <div data-block="item" data-title="Москва">Текст</div> <div data-block="item" data-title="Санкт-Петербург" data-expanded="true">Текст</div> </div>
В качестве якоря используйте контент в виде аккордеона или заголовок h2–h6. Для элемента, который является якорем, добавьте уникальный идентификатор (атрибут id).
Конспект «Оформление текста» — Оформление текста — HTML Academy
Свойство font-size
Управляет размером шрифта. Значение свойства задаёт желаемую высоту символа шрифта. Причём единицы измерения могут быть абсолютными или относительными.
Самая часто используемая единица измерения размера шрифта — пиксели px:
p {
font-size: 20px;
}Но, чтобы при изменении основного размера шрифта родителя его дочерние элементы пропорционально меняли свои размеры шрифта, есть специальная единица измерения — em.
Величина 1em — это такой же размер шрифта, что и у родителя. Соответственно, если нужно, чтобы шрифт дочернего элемента был всегда в 2 раза больше родительского, то надо задать значение 2em:
h2 {
font-size: 2em;
}Свойство line-height
Свойство управляет высотой строки или межстрочным интервалом.
По умолчанию это свойство имеет значение normal. Оно указывает браузеру, что межстрочный интервал нужно подобрать автоматически, исходя из размера шрифта. Спецификация рекомендует устанавливать его в пределах
p {
font-size: 10px;
line-height: normal; /* значение будет примерно 12px */
}Значение normal позволяет всем нестилизованным текстам выглядеть удобочитаемо. Однако, если есть необходимость отойти от стилизации по умолчанию, line-height можно задать фиксированное абсолютное значение в px.
p {
font-size: 16px;
line-height: 26px;
}Если нужно задать line-height относительное значение, но не такое, как normal, то значение задаётся в процентах или в виде множителя. В таком случае браузер вычисляет значение динамически в зависимости от font-size:
p {
font-size: 10px;
line-height: 150%; /* вычисленное значение: 10px * 150% = 15px */
line-height: 2; /* вычисленное значение: 10px * 2 = 20px */
} Относительные значения более гибкие, чем абсолютные. Но для простых сайтов фиксированных font-size и line-height будет вполне достаточно.
Свойство font-family
В значении этого свойства указывается список названий шрифтов, перечисленных через запятую. В начале списка располагают самый желаемый шрифт, затем менее желаемый, а в самом конце списка — общий тип шрифта. Браузер проходит по списку слева направо и использует первый найденный в системе или на сайте шрифт. Если название шрифта состоит из нескольких слов, то его нужно заключать в кавычки.
body {
font-family: "PT Sans", "Arial", sans-serif;
}Свойство font-weight
Свойство задаёт насыщенность или толщину шрифта. Шрифт может быть жирнее или тоньше обычного начертания. В качестве значения можно использовать ключевое слово или число. Самые часто встречающиеся значения:
400илиnormal— обычный шрифт, значение по умолчанию;700илиbold— жирный шрифт.
Например:
h2 {
font-weight: 400; /* то же самое что и normal */
}
p {
font-weight: bold; /* то же самое что и 700 */
}Свойство text-align
Описывает, как выравнивается текст и другие инлайновые элементы (изображения, инлайн-блоки, инлайн-таблицы и другие) внутри блока по горизонтали.
Свойство может принимать следующие значения:
left— выравнивание по левому краю блока, это значение по умолчанию;right— по правому краю блока;center— по центру блока;justify— по ширине блока, при этом слова в строке будут размещаться так, чтобы занять равномерно всё пространство строки (пробелы между словами в таком случае становятся неравномерными, так как браузер «растягивает» слова в строке).
Важно помнить, что свойство text-align применяется именно к самому блоку-контейнеру, внутри которого находится текстовый контент:
HTML:
<p>
Я текст внутри абзаца
</p>
CSS:
p {
text-align: center;
}Свойство vertical-align
Свойством можно выравнивать инлайновые элементы относительно содержащей его строки. Самый простой пример — выровнять картинку <img> по вертикали в текстовой строке.
У свойства vertical-align много значений, но самые часто используемые:
top— выравнивание по верхнему краю строки;middle— по середине строки;bottom— по нижнему краю строки;baseline— по базовой линии строки (значение по умолчанию).
В отличие от text-align свойство vertical-align задаётся самому элементу, а не содержащему его контейнеру:
HTML: <p> <img src="picture.png" alt="Я картинка"> Я текст внутри абзаца </p> CSS: img { vertical-align: middle; }
Свойство color
Цветом текста можно управлять свойством color.
Цвет может быть задан в виде ключевого слова (полный список ключевых слов приводится в спецификации). Например:
color: black; /* чёрный цвет */
color: red; /* красный цвет */
color: white; /* белый цвет */Ещё один вариант указания цвета — в виде шестнадцатеричного значения. В этом случае цвет формируется из красной, зелёной и синей составляющих, заданных в виде шестнадцатеричного числа от 00 до ff. Помимо шести, цветовой код может содержать три знака, в этом случае второй символ в цветовых составляющих дублируется первым:
color: #000000; /* чёрный цвет */
color: #f00; /* красный цвет, то же что #ff0000 */
color: #fff; /* белый цвет, то же что #ffffff */
Если не хочется иметь дело с шестнадцатеричными значениями, можно воспользоваться специальной функцией rgb, в которой указывается цвет в более привычном десятичном виде в диапазоне от 0 до 255 также в виде трёх цветовых составляющих, перечисленных через запятую:
color: rgb(0, 0, 0) /* чёрный, то же что #000000 */
color: rgb(255, 0, 0) /* красный, то же что #ff0000 */
color: rgb(255, 255, 255) /* белый, то же что #ffffff */У функции rgb есть расширенная версия — rgba. В этом случае помимо указания цвета последним значением указывается степень непрозрачности цвета — alpha. Значение может быть от 0 (полностью прозрачный) до 1 (полностью непрозрачный):
color: rgba(0, 0, 0, 0.5) /* чёрный, непрозрачный на 50% */
color: rgba(255, 0, 0, 0.3) /* красный, непрозрачный на 30% */
color: rgba(255, 255, 255, 0.9) /* белый, непрозрачный на 90% */Контраст цвета текста и фона
Фоновое изображение и фоновый цвет блока всегда должен достаточно сильно контрастировать с цветом текста в этом блоке. Чем больше контраст, тем удобнее этот текст читать в разных условиях освещённости и на разных устройствах. Поэтому если вы задаёте блоку фоновое изображение, нужно обязательно дополнительно задавать подходящий фоновый цвет. В этом случае, пока изображение загружается, или в случае, если оно совсем не загрузится, текст всё равно можно будет прочитать:
p {
/* идеальный контраст: цвет текста белый, цвет фона — чёрный */
background-color: #000000;
color: #ffffff;
}
span {
/* плохой контраст: цвет текста и фона — серые */
background-color: #cccccc;
color: #dddddd;
}
Свойство white-space, управление пробелами
Браузер игнорирует множественные пробелы и переносы строк в HTML-коде. С помощью свойства white-space можно управлять пробелами и переносами строк. Свойство принимает значения:
nowrap— схлопывает лишние пробелы и отображает весь текст одной строкой без переносов;pre— сохраняет пробелы и переносы как в исходном коде аналогично тегу<pre>;pre-wrap— работает как значениеpre, но добавляет автоматические переносы, если текст не помещается в контейнер;normal— режим по умолчанию: лишние пробелы и переносы строк схлопываются, текст переносится, пробелы в конце строк удаляются.
Свойство text-decoration
Задаёт дополнительное оформление текста. Значения свойства:
underline— подчёркивание;line-through— зачёркивание;overline— надчёркивание;none— убирает вышеперечисленные эффекты.
К тексту можно одновременно применить несколько эффектов, если перечислить значения через пробел:
p {
text-decoration: underline; /* подчёркнутый текст */
}
span {
/* подчёркнутый и зачёркнутый текст */
text-decoration: underline line-through;
}Свойство text-decoration — составное. Оно раскладывается на отдельные свойства:
text-decoration-line— вид линии: зачёркивание, подчёркивание или надчёркивание;text-decoration-style— стиль линии, может принимать значения:solid— сплошная линия;double— двойная линия;dotted— точечная линия;dashed— пунктирная линия;wavy— волнистая линия.
text-decoration-color— цвет линии.
Свойство font-style
Свойством можно задать начертание текста. Его основные значения:
normal— обычное начертание;italic— курсивное начертание.oblique— наклонное начертание.
Если задано значение italic, браузер будет пытаться найти в заданном шрифте отдельное курсивное начертание символов. В некоторых шрифтах отдельный курсив предусмотрен.
Если отдельного курсивного начертания в шрифте не предусмотрено, то браузер сделает текст наклонным, то есть сымитирует курсив. Что равноценно заданию тексту значения font-style: oblique.
Свойство text-transform
С его помощью можно управлять регистром символов: делать буквы строчными (маленькими) или заглавными (большими). Значения свойства:
lowercase— все строчные;uppercase— все заглавные;capitalize— каждое слово начинается с большой буквы;none— отменяет изменение регистра.
Отступы
Важный фактор того, что текст в блоке будет удобочитаемым, это наличие свободного пространства в блоке для этого текста. Вокруг текста должно быть достаточно «воздуха», он не должен «прилипать» к краям, ему не должно быть «тесно».
За отступы в CSS отвечают два свойства: padding задаёт внутренние отступы в блоке, а margin задаёт внешние отступы.
Продолжить
Как следует оформлять тексты html-тегами
Профессиональные копирайтеры сдают тексты не только Word-файлом с ключами, выделенными жирным, но и дополнительно уже оформленными с помощью html-тегов, то есть уже готовыми к размещению на сайте. Научиться этому совсем несложно, зато это сразу поднимает уровень исполнителя. Сейчас вкратце изложу, как это делается.
Знать для этого потребуется всего лишь 4 тега — <p>, <ul>, </ul> и <li>, а также 3 спецсимвола — — и « ».
Сразу скажу, что есть гораздо более легкий способ — просто копируете текст из Word-файла в этот сервис: http://www.html-cleaner.com/ (альтернатива — http://textmarket.net/analiz-teksta), и он автоматически конвертируется в html. Если не работает — попробуйте убрать курсив или жирный шрифт. В идеале ещё можно все ndash поменять на mdash — заполнить строки как на скриншоте и нажать «Clean HTML». Чтобы сделать перенос строк, нужно нажать «Line Wrapping».
В тег p оформляется каждый абзац. То есть перед абзацем пишется <p>, а после абзаца — </p>, то есть тег закрывается.
В тег ul оформляется маркированный список. Каждый пункт списка оформляется тегом li. То есть, чтобы у нас получился вот такой список:
Надо будет написать вот так:
<ul>
<li>соблюдение технологии производства и гарантированное качество продукции;</li>
<li>индивидуальный подход к ценообразованию для каждого клиента;</li>
<li>выезд опытного мастера на замеры;</li>
<li>изготовление окон по точным индивидуальным размерам;</li>
<li>оптимальные сроки изготовления;</li>
<li>профессиональная установка.</li>
</ul>
В тег ol примерно таким же образом оформляются нумерованные списки.
Теперь что касается спецсимволов. Вместо тире правильно писать в html-коде — — этот символ и означает тире. Написать вместо него простую чёрточку — всё равно, что вместо «тся» писать «ться». Вместо левой кавычки нужно писать «, а вместо правой кавычки — ». Я считаю, каждый копирайтер должен всегда держать эту информацию при себе.
Оформление текста: учебник HTML:
Web-страницы
Свойства текста задаются в виде параметров различных тэгов. Параметры записываются в открывающем тэге внутри скобок. Ниже объясняется использование основных тэгов для оформления текста.
Тэг <BODY>
Тэг <BODY> позволяет задать общие свойства для всей страницы. В параметрах открывающего тэга <BODY> можно задать цвет текста (параметр TEXT) и цвет фона (параметр BGCOLOR). Например, тэг
<BODY TEXT=»#000000″ BGCOLOR=»yellow»>
…
</BODY>
определяет черный цвет текста на желтом фоне для всей страницы.
Тэг <BODY> позволяет изменять также и цвет ссылок, которые в языке HTML называются anchors - якоря. Для этого используют параметры
- LINK — цвет обычных ссылок
- ALINK — цвет активной ссылки, на которой щелкнули мышью
- VLINK — цвет посещенных ссылок
Например, тэг
<BODY LINK=»yellow» ALINK=»red» VLINK=»blue»>
…
</BODY>
устанавливает желтый цвет для обычных ссылок, красный — для активных и синий — для посещенных.
Тэг <FONT>
Для того, чтобы изменить цвет, размер и стиль шрифта для части текста, используют тэг <FONT>. Он имеет три основных параметра:
- COLOR — цвет текста
- FACE — начертание (название) шрифта
- SIZE — размер шрифта (принимает целые значения от 1 до 7)
Например, тэг
<FONT COLOR=»yellow» FACE=»Courier» SIZE=»2″>
…
</FONT>
устанавливает для текста внутри области действия тэга шрифт Courier желтого цвета размера 2. А вот как выглядят все возможные размеры шрифта Arial:
size=1
size=2
size=3
size=4
size=5
size=6
size=7
Стили оформления
Существует несколько стандартных стилей оформления текста: жирный, курсив, зачеркнутый, подчеркнутый, верхний индекс и нижний индекс. Вот тэги, которые отвечают за это:
- <B>…</B> (от английского bold), а так же <STRONG> — это жирный текст
- <I>…</I> (от английского italic), а так же <EM> — это курсив
- <S>…</S> (от английского strike out) —
это зачеркнутый текст - <U>…</U> (от английского underline) — это подчеркнутый текст
- <SUP>…</SUP> (от английского superscript) — это верхний индекс
- <SUB>…</SUB> (от английского subscript) — это нижний индекс
- <PRE>…</PRE> (от английского preformatted) — это специальный стиль для оформления текстов программ (моноширинный шрифт, остаются все пробелы и переходы на новую строку).
Стиль относится к тексту, заключенному между открывающим и закрывающим тэгами.
Заголовки
Заголовки в тексте рекомендуется оформлять стандартными стилями. Текст будет выглядеть более красиво, если в оформлении его использовать заголовки. Для выделения заголовков используются парные тэги от <h2> до <H6> (от английского header), то есть, уровень заголовка изменяется от от 1 до 6. Страница с кодом
<BODY>
<h2> Заголовок документа</h2>
<h3> Заголовок раздела</h3>
<h4> Заголовок подраздела</h4>
<h5> Заголовок параграфа</h5>
<H5> Комментарий</H5>
<H6> Авторские пометки</H6>
</BODY>
будет показана так:
В заголовках тоже можно указывать тип выравнивания, так же, как для абзацев.
Специальные символы
Существуют некоторые специальные символы, для добавления которых надо использовать их числовой код или условное обозначение, перед которым ставится знак &. В таблице ниже даны самые распространенные специальные символы.
| Символ | HTML-код | Название |
|---|---|---|
| ¡ или | неразрывный пробел | |
| ¢ | ¢ | значок цента |
| £ | £ | значок фунта стерлингов |
| ¤ | ¤ | |
| ¥ | ¥ | значок японской йены |
| § | § | параграф |
| © | © или © | символ авторского права |
| « | « или « | левая русская кавычка |
| ® | ® или ® | зарегистрированная торговая марка |
| ° | ° | градус |
| ± | ± | плюс-минус |
| ² | ² | квадрат |
| ³ | ³ | куб |
| » | » или » | правая русская кавычка |
| ¼ | ¼ | четверть |
| ½ | ½ | половина |
| ¾ | ¾ | три четверти |
| × | × | знак умножения |
| ÷ | ÷ | знак деления |
Следующий раздел рассказывает об оформлении абзацев.