Текст хтмл: Текст | htmlbook.ru

Leave a Comment / Разное / By /

Содержание

Форматирование текста HTML уроки для начинающих академия

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Дальше ❯

Форматирование текста

Этот текст выделен полужирным шрифтом

Этот текст курсивом

Это под строкой и над строкой

Элементы форматирования HTML

В предыдущей главе вы узнали о атрибуте стиляHTML.

HTML также определяет специальные элементы для определения текста с особым смыслом.

HTML использует такие элементы, как <b> и <i> для форматирования выходных данных, как полужир ный или курсив ный текст.

Элементы форматирования были разработаны для отображения специальных типов текста:

  • <b> — Жирный текст
  • <strong> — Важный текст
  • <i> — Курсив текста
  • <em> — Подчеркнутый текст
  • <mark> — Помеченный текст
  • <small> — Мелкий текст
  • <del> — Удаленный текст
  • <ins> — Вставленный текст
  • <sub> — Текст подстрочного текста
  • <sup> — Текст сценария

HTML < b > и < strong > элементы

HTML <b> элемент определяет полужир ный текст, без какой-либо дополнительной важности.

Пример

<b>Этот текст выделен полужирным шрифтом</b>

<strong> элемент HTML определяет жирный текст с добавленной семантической важный.

Пример

<strong>This text is strong</strong>

Элементы HTML <i> и <EM>

<i> элемент HTML определяет текст, курсив , без какой-либо дополнительной важности.

Пример

<i>This text is italic</i>

HTML <em> элемент определяет подчеркнут ый текст, с добавленной семантической важностью.

Пример

<em>This text is emphasized</em>

Примечание: Браузеры отображают <strong> как <b> и <em> как <i> . Однако, есть разница в значении этих тегов: <b>и <i> определяет полужирный и курсивный текст, но <strong>и <em> означает, что текст является важным.

HTML <small> элемент

<small> элемент HTML определяет меньше текст:

Пример

<h3>HTML <small>Small</small> Formatting</h3>

HTML <Mark> элемент

<mark> элемент HTML определяет помеченный или выделенный текст:

Пример

<h3>HTML <mark>Marked</mark> Formatting</h3>

Элемент HTML <del>

<del> элемент HTML определяет Удаленный (удаленный) текст.

Пример

<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> элемент

<ins> элемент HTML определяет вставленный (добавленный) текст.

Пример

<p>My favorite <ins>color</ins> is red.</p>

HTML <sub> элемент

<sub> элемент HTML определяет под строчный текст.

Пример

<p>This is <sub>subscripted</sub> text.</p>

HTML <sup> элемент

<sup> элемент HTML определяет над строчный текст.

Пример

<p>This is <sup>superscripted</sup> text.</p>

Элементы форматирования текста HTML

ТегОписание
<b>Определяет полужирный текст
<em>Определяет подчеркнутый текст 
<i>Определяет текст курсива
<small>Определяет меньший текст
<strong>Определяет важный текст
<sub>Определяет текст с подстрочным текстом
<sup>Определяет текст с надписью
<ins>Определяет вставленный текст
<del>Определяет удаленный текст
<mark>Определяет выделенный/выделенный текст

❮ Назад Дальше ❯

Популярное

html картинка

как вставить картинку в html
цвет текста фона
размер текста html
цвет размер шрифта html
формы html
список html
таблица html
как сделать ссылку в html
html элементы

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

Редакция и форматирование текста. Учебник html

Глава 2

Вы наверняка не раз печатали документы в текстовых редакторах, так вот.. что можно сделать с текстом в том же Word, то же можно сделать и с текстом на нашей страничке.

В этой главе я расскажу о том, как изменить шрифт и его размер, как сделать текст жирным, курсивом, подчёркнутым и о том как его выравнивать по краям или центру документа.

Я думаю, Вы знаете, что такое параграф.. это такой кусочек текста, одно или несколько предложений, который в книгах обычно печатается с новой строки, тем самым, выделяя этот текст из основной массы, Книгу разбитую на параграфы легко читать, потому что, как правило, одному параграфу соответствует одна мысль или логическая часть текста.

Так вот, для того чтобы на странице сайта разбить текст на параграфы, необходимо воспользоваться тегом <p> — собственно параграф.

Параграф имеет атрибут align «выравнивание» который в свою очередь может быть равен тому ли иному значению.

Рассмотрим на примерах:

С помощью параграфа можно расположить наш текст по центру:

<p align=»center»>Привет мир!!!</p>

По левому краю:

<p align=»left»>Привет мир!!!</p>

По правому краю:

<p align=»right»>Привет мир!!!</p>

Или же обоим краям документа:

<p align=»justify»>Привет мир!!! — здесь нужен текст подлиней чтобы эффект был хорошо виден при открытии документа</p>

Давайте слегка изменим нашу первую страничку:

<html>
<head>
<title>Мой первый сайт </title>
</head>
<body>
<p align=»center»>Привет мир!!!</p>
<br>
<p align=»justify»>
Меня зовут Карлсон! Я в меру упитанный мужчина — это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю вареньё!!! С нетерпеньем буду ждать Вашего приглашения на чай.

Прилечу!!
</p>
</body>
</html>

смотреть пример  

Так уже лучше, не правда ли?

Запомним некоторые вещи:

1) Тег <p> не может содержать в себе других параграфов, то есть писать вот так:

<p>
<p>
</p>
</p>

Нельзя! — это нелогично, как может один параграф содержать в себе другой?

2) Так же, нельзя писать пустые теги без текста или других тегов.

<p> здесь, что-то обязательно должно быть!!!</p>

3) По умолчанию Ваш текст выравнивается браузером по левому краю, так что если Вам так и надо атрибут

align=»left» для параграфа можно не указывать.

4) Тег <p> подразумевает в себе перенос строки, если это Вам не нужно, используйте вместо тега <p> тег <div> данный тег является альтернативой тегу <p> пишется так:

<div align=»center»>Привет мир!!!</div>
<div align=»left»>Привет мир!!!</div>
<div align=»right»>Привет мир!!!</div>
<div align=»justify»>Привет мир!!!</div>

Все то же самое, только данный тег не будет переносить текст на следующую строку и в него можно вставлять тег <p> по принципу:

<div>
<p align=»left»>Пишем слева</p>
<p align=»right»>Пишем справа</p>
</div>

А вообще тег

<div> многофункциональный.
Помните, что после использования того или иного заголовка происходит перенос строки — на то он и заголовок.

Заголовки дело хорошее и достаточно удобное, но ими можно выделять только маленькие кусочки текста, а что если нам надо выделить весь текст?

Знакомимся тег <font> в переводе на русский — «шрифт».

Тег <font> помимо прочих атрибутов, о которых ещё пойдет речь, имеет атрибут size — размер.

Пишется и выглядит это так:

<font size=»+4″>Привет мир!!!</font>
<font size=»+2″>Привет мир!!!</font>
<font size=»+0″>Привет мир!!!

</font>
<font size=»-1″>Привет мир!!! </font>
<font size=»-2″>Привет мир!!!</font>

Добавим эти теги на нашу страницу.

<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
<center><h3>Привет мир!!!</h3></center>
<br>
<p align=»justify»>
<font size=»+1″>Меня зовут Карлсон! Я в меру упитанный мужчина — это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size=»+2″>

вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!</font>
</p>
</body>
</html>

смотреть пример  

Попробуйте поэкспериментировать с размерами шрифта и заголовком, подставьте свои значения, измените расположение тегов..

Для придания страничке красивого вида не обойтись без палитры с красками. .

В html языке используется своя палитра красок. Вот основные цвета, выглядят они так:

#000000
black

#ffffff
white

#ff0000
red

#ffa500
orange

#ffff00
yellow

#008000
green

#00ffff
cyan

#0000ff
blue

#800080
purple


Полная палитра базовых красок приведена здесь.

Один и тот же цвет можно задать двумя способами:
используя шестнадцатеричное значение цвета RGB — например #008000 — зелёный цвет, либо используя константы цвета — green (для тех кто учил французский, green -зелёный. )

Краски есть, давайте рисовать!

Мы уже знакомы с тегом <font> у него есть еще один атрибут — color.

Так вот, если к примеру написать так:

<font color=»#ff0000″>Привет мир!!!</font> — То цвет шрифта станет красным. Попробуйте..

А можно так:

<font color=»red»>Привет мир!!!</font> — Будет тоже самое..

Но советую писать всё же шестнадцатеричным числом, во-первых, по понятным причинам не для всех оттенков цветов есть своё название, а во-вторых, поговаривают, что не все браузеры знают названия тех или иных красок…

Есть еще один способ изменить цвет текста. Тег <body></body> «тело» — имеет атрибут text — «текст» если присудить этому атрибуту любой цвет из доступной палитры то весь текст в нашей странице окрасится, кроме тех мест, где мы «принудительно» указали другой цвет.

В строчке где стоит открывающий тег <body> пишем так:

<body text=»#ff8c40 «>

Теперь весь текст у нас стал оранжевым кроме заголовка «Привет мир!!!» который мы отдельно перекрасили в красный.

А вот атрибут тега <body> bgcolor и его значение задает цвет фона страницы

<body bgcolor=»#40caff»> — залили всё голубым..

Раскрасьте свою страницу на свой лад.. пробуйте, экспериментируйте!

Сейчас Вам нужно понять принцип построения html кода иначе рано или поздно станете в тупик.. конечно, я и дальше буду выкладывать готовые примеры, но нет ничего лучше чем самостоятельная практика.

На данный момент у меня получилось вот так: .. а у Вас?

<html>
<head>
<title>Мой первый сайт </title>
</head>
<body text=»#484800″ bgcolor=»#e8e8e8″>
<center>
<h3>
<font color=»#008000″>Привет мир!!!</font>
</h3>
</center>
<p align=»justify»>
<font size=»+1″>Меня зовут Карлсон! Я в меру упитанный мужчина — это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size=»+2″ color=»#ff0000″>вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!
</font>
</p>
</body>
</html>

смотреть пример  

Обратите внимание на то, как пишется код, если в теге присутствует два и более атрибута. В нашей строчке <body text=»#ff207b» bgcolor=»#1a77f0″> у тега <body> два атрибута text и bgcolor мы просто пишем их подряд через пробел, не разделяя никакими другими знаками..

Здесь все достаточно просто..

Итак, новые теги:

<b> </b>— Полужирный текст
<i> </i>— Наклонный текст
<u> </u>— Подчеркнутый текст
<strike> </strike>— Перечеркнутый
<s> </s>— Перечеркнутый (второй вариант, от первого ничем не отличается)
<tt> </tt>— моноширинный шрифт
<small> </small>— Малый
<big> </big>— Большой
<sup> </sup>— Верхний индекс
<sub> </sub>— Нижний индекс

Ну думаю понятно. . текст заключённый между этими открывающими и закрывающими тегами приобретёт нужный нам стиль.

Вот пример на всякий случай…

<html>
<head>
<title>Стили текста</title>
</head>
<body>
<big><b><u>Научная статья.</u></b></big>
<br>
<br>
Если разбавить дистиллированную воду Н<sub>2</sub>О сорока процентами этилового спирта С<sub>2</sub>Н<sub>5</sub>ОН то получится жидкость в 40<sup>о</sup> более известную широкой публике под названием <i>— водка.</i>
<br>
Впервые данную пропорцию <s>придлажил</s> предложил <tt>Дмитрий Иванович МЕНДЕЛЕЕВ. </tt>
<br>
<br>
<br>
<small>Распитие спиртных напитков вредит вашему здоровью.</small>
</body>
</html>

смотреть пример  

Для того чтобы изменить шрифт документа необходимо дать указание браузеру, что мол от сель до сель показывать текст таким шрифтом. Для этого используем всё тот же тег <font> и его атрибут face — лицо то бишь..

Пишется так:

<font face=»arial»>Эта строчка будет написана с помощью шрифта Arial</font>

Пример:

<html>
<head>
<title>Использование различных шрифтов</title>
</head>
<body>
<font face=»arial»>Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем. </font>
<br>
<font face=»times new roman»>Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.</font>
<br>
<font face=»comic sans ms»>Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.</font>
<br>
</body>
</html>

смотреть пример  

Здесь необходимо отметить, что браузер использует библиотеку шрифтов, установленную на компьютере пользователя, и если вдруг указанного Вами шрифта в этой библиотеке не окажется, то он заменит его на тот который присутствует. Следовательно, чтобы не ударить face(ом) в грязь, не стоит указывать какие-то «экзотические» нестандартные шрифты, так как супер модный шрифт на компьютере Вашего друга сильно рискует превратиться в обыкновенный.

Если Вы обратили внимание, а если не обратили то знайте, что в браузерах текст набранный с помощью текстовых редакторов проходит «обработку» перед выводом его на экран компьютера. Так в набранном Вами тексте удаляются все переносы строк и лишние пробелы, пробелов между словами или просто символами может быть не более одного.

Проводится данная «обработка», для того чтобы на мониторах с разным расширением экрана текст переносился на следующую строку в тех местах где это действительно необходимо, а не там где были раннее расставлены пробелы и переносы строк.

Однако такая политика браузеров, в ряде случаев, не всегда оправданна.. Как например, написать стихи? Нет можно конечно после каждой строчки писать тег <br>, но есть вариант куда проще..

Знакомимся тег <pre>, текст заключённый в данный тег выводится браузерами на экран в том виде в котором он был набран, т.е. со всеми пробелами и переносами строк

Пример:

<html>
<head>
<title>Пробелы и перенос строки</title>
</head>
<body>
<pre>

        СЛОН. 
Дали туфельки слону.
Взял он туфельку одну
И сказал: - Нужны пошире,
И не две, а все четыре!
         С. Я. Маршак.

</pre>
</body>
</html>

смотреть пример  

Такие вот дела..

  • Писать странички в блокноте конечно можно, но я Вам настоятельно рекомендую воспользоваться полноценным HTML редактором, благо их на рынке программного обеспечения великое множество. Я не буду давать их подробное описание, скажу лишь что они, как правило, несут в себе одинаковые стандартные наборы инструментов и отличаются друг от друга пожалуй только интерфейсом.. сравнивать их не берусь, так как они носят исключительно характер привычки пользования веб мастером тем или иным редактором html кода.

    Расскажу про основные плюсы использования подобного редактора.

    • Как правило, html редакторы имеют два окна, в одном Вы пишите код, а во втором сразу видите результат написанного! То есть теперь Вам не придётся постоянно сохранять текущий результат, чтобы открыть его браузером и оценить написанное.
    • Как правило, они содержат в себе стандартные наборы шаблонов кода, в который Вы просто подставляете свою информацию, избавляя себя от прописывания тегов.
    • Ну и «общие» удобства — сохранить, открыть, редактировать сразу несколько страниц сайта перелистывая их… много короче разных полезных штук.. одна подсветка синтаксиса чего стоит!

    P.S. Однако, дальше буду писать эту книгу подразумевая, что Вы тренируетесь в стандартном блокноте… иначе мы друг друга не поймём.

  • Немного об этике и здоровье глаз..

    Если создаваемый Вами сайт его дизайн и назначение не требуют обратного, то советую избегать следующих вещей: Использовать яркие контрастные цвета фона и шрифта. Поверьте, когда у человека начинают слезиться глаза от чтения такой страницы, он резко теряет к ней интерес. Это же касается и размеров текста. Не стоит использовать огромные заголовки, впрочем, как и содержание малюсенькими буквами — это напрягает, ищите золотую середину. .


Оформление текста. Турбо‑страницы для контентных сайтов

  1. Заголовки
  2. Inline-теги
  3. Ссылки в тексте
  4. Цитаты в тексте
  5. Список определений

Поддерживается 6 уровней HTML-заголовков:

<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>

Кастомизация заголовков

Чтобы стилизовать заголовки с помощью CSS, используйте следующие селлекторы по классу:

h2.title_size_l
h3.title_size_m
h4. title_size_s
h5.title_size_xs
h5.title_size_xxs
h6.title_size_xxxs

Для оформления текста можно использовать все основные HTML-теги.

<p>Параграф.</p>
<p><b>Жирный текст.</b></p>
<p><strong>Важный текст.</strong></p>
<p><i>Текст, выделенный курсивом</i></p>
<p><em>Выделение текста.</em></p>
<p>2<sup>10</sup> = 1024<p>
<p>H<sub>2</sub>SO<sub>4</sub><p>
<p>Основной текст, <ins>новый текст</ins></p>
<p>Основной текст, <del>удаленный текст</del></p>
<p><small>Текст меньше на 1em</small></p>
<p><big>Текст больше на 1em</big></p>
<code>code</code>

Список всех поддерживаемых тегов

  • h2–h6

  • p

  • a

  • br

  • hr

  • ul

  • ol

  • li

  • b

  • strong

  • i

  • em

  • sup

  • sub

  • ins

  • del

  • small

  • big

  • pre

  • abbr

  • u

  • table

  • div

  • code

  • aside

  • main

  • footer

  • section

Внимание. Теги span, aside, main, footer,section будут перенесены на Турбо-страницу, если включен параметр turbo:extendedHtml.

Турбо‑страницы поддерживают несколько типов ссылок:

  • ссылка на другую страницу сайта;

  • ссылка на якорь в пределах одной страницы или на якорь другой страницы.

Для формирования ссылок в Турбо‑страницах используется элемент a:

<a href="https://example.com" data-turbo="true">Text</a>

href * Обязательный параметр»}}»>

URL или якорь.

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).

Для оформления цитаты оберните необходимую часть разметки в элемент blockquote.

<blockquote>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse efficitur, eros eu venenatis viverra, ante purus condimentum velit, rutum porttitor.</p>
</blockquote>

Для оформления списка определений используйте элементы dl, dt, dd.

Внимание. Турбо‑страницы не поддерживают вложенные элементы в блоке dd.

<dl>
  <dt>Термин 1</dt>
  <dd>Определение термина 1</dd>
  <dt>Термин 2</dt>
  <dd>Определение термина 2</dd>
  <dt>Термин 3</dt>
  <dd>Определение термина 3</dd>
</dl>

Написать в службу поддержки

Была ли статья полезна?

Ввод текста HTML

Эта страница посвящена вводу текста в формате HTML. Речь идет о том, как позволить посетителям вашего сайта вводить текст на вашей веб-странице.

Чтобы создать поле ввода текста HTML, используйте тег HTML . Вы добавляете type="text" , чтобы сделать его текстовым полем. Это связано с тем, что тег можно использовать и для других типов ввода, таких как кнопка отправки.

Пример поля ввода текста:

Пример:

Имя:
Фамилия:

Приведенный выше код состоит из тега , содержащего два поля : два поля ввода текста и одна кнопка отправки. Он также содержит разрыв (
) после первого поля ввода текста (Имя), чтобы второе поле ввода (Фамилия) начиналось с новой строки.

Несколько строк текста

Тег — не единственный способ создания поля ввода текста HTML. На самом деле, если вы хотите, чтобы ваши пользователи вводили несколько строк текста, вам следует использовать тег

Страница «Действие»

Приведенный выше код предполагает наличие «страницы действий» для обработки содержимого формы. В этом примере «/html/tags/html_form_tag_action.cfm» — это скрипт на стороне сервера, который обрабатывает форму.

Для создания страниц действий

обычно требуются некоторые знания сценариев, однако в Интернете доступно множество бесплатных сценариев.

Вот форма для отправки сценария по электронной почте, которую вы можете использовать бесплатно. На этой странице вы найдете весь код, необходимый для создания формы обратной связи.

Дополнительная информация

Эта информация предназначена для того, чтобы помочь вам понять приведенный выше код, который состоит в основном из тегов HTML (или элементов HTML).

Теги формы содержат вложенные в них другие теги. Эти другие теги определяют фактические элементы формы, которые отображаются в форме, такие как поля текстовой области и кнопка отправки.

Вы можете использовать следующий шаблон в качестве основы для ввода текста HTML. Просто заполните пробелы или удалите ненужные атрибуты.

1. Тег

Описание всех атрибутов см. в спецификациях HTML-тега.

<форма действие="" метод = "" enctype="" принять кодировку = "" принять = "" имя="" класс = "" идентификатор = "" дир = "" язык = "" цель = "" при отправке = "" при сбросе = "" по клику = "" ondbclick="" onmousedown="" onmouseup="" при наведении мыши = "" onmousemove="" onmouseout="" onkeypress="" onkeydown="" onkeyup="" > (сюда идут отдельные теги элементов формы — см. ниже)

2. Тег

3. Тег

Этот тег определяет поля ввода в форме. Поля ввода могут состоять из текста, флажков, переключателей, кнопок отправки и т. д.

Описание всех атрибутов см. в спецификациях HTML-тега .

<ввод тип = "" имя="" значение = "" размер = "" максимальная длина = "" проверено = "" источник = "" класс = "" идентификатор = "" дир = "" язык = "" название = "" стиль = "" выровнять = "" альт = "" только для чтения = "" отключен = "" табиндекс="" ключ доступа = "" измап="" карта использования = "" в фокусе = "" размытие = "" при выборе = "" при обмене = "" по клику = "" ondbclick="" onmousedown="" onmouseup="" при наведении мыши = "" onmousemove="" onmouseout="" onkeypress="" onkeydown="" onkeyup="" />

Текст HTML · WebPlatform Docs

Резюме

В этой статье рассказывается о некоторых наиболее распространенных элементах, используемых при разметке текстового содержимого в HTML.

Введение

В этой статье мы познакомим вас с основами использования HTML для разметки содержимого в теле документа.

Сначала мы рассмотрим общие структурные элементы, такие как заголовки и абзацы, а также способы включения длинных кавычек и кода. После этого мы рассмотрим встроенный контент, такой как короткие цитаты и выделения, и закончим беглым изучением старомодной презентационной разметки.

Пространство — последний рубеж

Прежде чем говорить о тексте, мы должны обсудить пространство между текстом. Документы HTML содержат непечатаемые символы, известные как пробелы , которые разделяют текст. Обычный символ пробела (пробел на клавиатуре) является наиболее распространенным, но есть и другие, такие как символ табуляции и символ возврата каретки (или символ новой строки).

В HTML несколько последовательных вхождений этих символов почти всегда обрабатываются как один пробел. Рассмотрим этот исходный код:

 
В
                начало

Веб-браузер интерпретирует это как эквивалент:

  
В начале

Единственный случай, когда это не так, — это когда используется элемент 

 , который мы обсудим позже в этой статье. 
 
 Сжатие пробелов может стать источником путаницы для начинающих авторов HTML, которые могут попытаться дополнить текст дополнительными пробелами, чтобы добиться желаемого отступа, получить больше интервалов после точки между предложениями или увеличить расстояние по вертикали между абзацами. . Помните, HTML — это язык содержимого, а не язык стилей; визуальную компоновку не следует пытаться использовать в исходном HTML-коде, вместо этого ее следует создавать с помощью CSS. 
 
 Блочные элементы 
 
  Блочные элементы  — это элементы, которые создают разрыв строки до и после элемента. В этом разделе мы рассмотрим синтаксис и использование некоторых общих элементов блока. 
 
 Заголовки разделов страницы 
 
 Каждая часть веб-контента должна начинаться с соответствующего заголовка. 
 
 HTML определяет шесть уровней заголовков:  
 
 ,  
 
 ,  
 
 ,  
 
 ,  
 
 и  
 
 (от наибольшей важности к наименьшей). Вообще говоря,  
 
 будет основным заголовком страницы. Затем вы должны использовать  
 
, чтобы разбить страницу на разделы,  
 
, чтобы определить подразделы и так далее. 
 
 Важно использовать уровни заголовков для иерархического описания документа, а также не пропускать или неправильно вкладывать разные уровни, поскольку это делает документ более понятным для программ чтения с экрана и автоматизированных процессов, таких как индексирующие боты. Дополнительную информацию см. в этой статье. 
 
 Хороший пример структуры заголовка с использованием этой статьи в качестве шаблона может выглядеть следующим образом: 
 
 
Разметка текстового содержимого в HTML
 
 
Введение
 
 
Космос — последний рубеж
 
 
Блокировать элементы
 
 
Заголовки разделов страницы
 
 
Общие абзацы
 
 
Цитирование других источников
 
 
Отформатированный текст
 
 
Встроенные элементы
 
[...и так далее...]
 
 Общие параграфы 
 Параграф   является основным структурным элементом большинства документов. В HTML абзац представлен элементом 
 . Например:
 
Это очень короткий абзац. В нем всего два предложения.

 
 Абзац может содержать любое количество текста, от одного символа до тысячи слов, но обычно используется в стандартном литературном смысле, чтобы содержать от одного до нескольких предложений. Тем не менее, нет необходимости злоупотреблять 
  ; если содержимое на самом деле является списком, заголовком, ссылкой или другим конкретным типом содержимого, доступно множество подходящих элементов.
 Цитирование других источников 
 Статьи, сообщения в блогах и справочные документы часто цитируют фрагменты текста из другого документа, называемого блок-цитатом   . В HTML такая цитата размечается с помощью элемента 
 .
 Хотя технически элемент 
  может непосредственно содержать текст, который не заключен в другие элементы, это плохая практика и, вероятно, приведет к тому, что ваш код не пройдет проверку. Вместо этого вы должны вкладывать другие элементы внутрь  <цитата>  . При цитировании из другого источника следует использовать элементы того же типа: при цитировании абзаца текста использовать тег абзаца; при цитировании списка элементов используйте теги списка; и так далее.
 При желании можно указать источник цитаты с помощью атрибута  cite , например:
 
HTML 4.01 — единственная версия HTML, которую следует использовать
при создании новой веб-страницы, согласно
спецификация:




Этот документ отменяет предыдущие версии HTML 4.0,
хотя W3C продолжит делать эти спецификации и
их DTD доступны на веб-сайте W3C.



 
 В зависимости от стилей по умолчанию и пользовательских стилей вышеприведенное содержимое может отображаться в браузере следующим образом:
 HTML 4.01 — единственная версия HTML, которую следует использовать при создании новой веб-страницы в соответствии со спецификацией:
 Этот документ отменяет предыдущие версии HTML 4. 0, хотя W3C продолжит размещать эти спецификации и их DTD на веб-сайте W3C.
 Обратите внимание, что атрибут  cite  сам по себе ничего не делает, хотя полезно хранить запись об источнике цитаты на той же странице, что и сама цитата.
 Предварительно отформатированный текст 
 Любой случай, когда форматирование и пробелы должны быть сохранены, например, примеры кода, должны быть размечены с использованием  предварительно отформатированного элемента  
  . В этом примере вы видите фрагмент кода, написанный на языке программирования Perl: 
 
 

# прочитать указанный файл целиком
суб чавкать {
  мой $filename = сдвиг;
  мой $file = новый FileHandle $filename;
  если ( определенный $ файл ) {
    местный $/;
    вернуть <$ файл>;
  }
  вернуть недеф;
};

 
 В браузере этот фрагмент отображается точно так, как написано, включая пробелы:
 
# прочитать указанный файл целиком
суб чавкать {
  мой $filename = сдвиг;
  мой $file = новый FileHandle $filename;
  если ( определенный $ файл ) {
    местный $/;
    вернуть <$ файл>;
  }
  вернуть недеф;
};

 
 В большинстве веб-браузеров текст, помеченный как предварительно отформатированный, будет отображаться для пользователя в том виде, в котором он появляется в источнике, обычно с использованием шрифта фиксированной ширины (моноширинный), что создает ощущение, что текст напечатан на пишущей машинке или принтере. Это артефакт старых компьютеров, на которых были только шрифты фиксированной ширины, но сегодня он весьма удобен для примеров кода и другого контента, который лучше всего отображается без модификации браузера.
 Примечание. Использование элемента    описано в статье о малоизвестных семантических элементах.
 Строчные элементы 
  Строчные элементы  — это те элементы, которые не создают разрыва строки до или после элемента. В этом разделе мы рассмотрим синтаксис и использование некоторых общих встроенных элементов.
 Короткие цитаты 
 Короткие цитаты, используемые в обычном предложении или абзаце, содержатся в элементе 9 цитаты  0005   . Как и 
 , этот элемент может содержать атрибут  cite , указывающий на источник цитаты.
 Короткая цитата обычно должна заключаться в кавычки. Согласно спецификации HTML, они должны быть вставлены агентом пользователя, чтобы они могли быть правильно вложены и чтобы можно было использовать символы кавычек, соответствующие языку документа.
 Вот пример    в действии с  lang  attribute:
 
Для меня это плохо кончилось. Ну что ж,
c'est la vie, как говорят французы.

 
 В браузере этот абзац будет отображаться следующим образом (обратите внимание на европейские кавычки):
 Для меня это плохо кончилось. Да ладно, «c’est la vie», как говорят французы.
 Выделение 
 HTML содержит четыре элемента для обозначения выделения, позволяющего отличить конкретный текст от окружающего его содержимого. Для браузеров это обычно означает выделение текста жирным шрифтом или курсивом. Для программ чтения с экрана это может привести к другому голосу или другому слуховому эффекту.
 Для выделения, которое незначительно меняет смысл предложения, вы используете элемент  выделения     , например:
 
Пожалуйста, не забудьте отключить чайник ночью.

 
 Большинство браузеров отображают    курсивом:
  Пожалуйста,  не забывайте отключать чайник на ночь.
 Элемент    раньше означал  курсив  в HTML4, но это считалось плохой практикой, так как это был скорее презентационный элемент, чем семантический. То есть он просто описывал, как выглядел элемент, а не его значение. (Подробнее об элементах такого типа см. ниже.) HTML5, однако, переопределяет значение    , говоря, что он «представляет фрагмент текста в другом голосе или настроении или иным образом смещается от обычной прозы, например, таксономическое обозначение, технический термин, идиоматическая фраза из другого языка, мысль, название корабля или какая-либо другая проза, типичное типографское изложение которой выделено курсивом».
 Звучит довольно запутанно, поэтому вот несколько примеров того, где    было бы уместно:
 
Когда мы вошли в порт, мы док.


Она действительно добавляет немного je ne sais quoi.

 
 В браузере это отображается именно так, как вы ожидаете:
 Когда мы вошли в порт, мы заметили  Black Pearl , пришвартованную в доке.
 Она действительно добавляет немного  je ne sais quoi  .
 Элемент  strong     указывает на особую важность своего содержимого, заявляя, что оно более важно, чем окружающее его содержимое. Например:
 
В этом вольере обитает двадцать разных видов.
Внимание! Не кормите их: они съедят вашу обувь.

 
 Большинство браузеров отображают    жирным шрифтом:
 В этом ограждении обитает двадцать различных видов.  Внимание! Не кормите их: они съедят вашу обувь. 
 Как и    ,  полужирный  элемент    раньше не одобрялся, потому что он описывал внешний вид содержимого, а не его значение. Поэтому HTML5 переопределил и этот элемент; теперь он «идентифицирует контент, который стилистически смещен от остального текста, но не более важен с точки зрения его значения». Рассмотрите наиболее значимые слова в обзоре продукта или аннотации к документу, как в этом примере:
 
В этой статье Крис Миллс покажет вам, как комбинировать HTML5, CSS3, цветные карты,
и строка, чтобы создать привлекательный мобиль для спальни вашего ребенка. 

 
 Также как и    , это выглядит так, как ожидалось:
 В этой статье Крис Миллс покажет вам, как комбинировать  HTML5  ,  CSS3  ,  цветную карточку  и  строку  для создания привлекательного мобиль для спальни вашего ребенка.
 Комбинирование элементов акцента 
 Вы можете комбинировать и вкладывать друг в друга эти различные типы акцентов. Например, если нужно было сделать ударение во всем предложении, но в предложении есть более важный момент, вы можете использовать элементы    и    вместе, чтобы выделить более сильное выделение, чем обычно:
 
Обратите внимание: чайник должен каждый вечер отключать от сети, иначе он взорвется --
убить нас всех!

 
 Браузер отобразит этот абзац следующим образом:
  Обратите внимание: Чайник  необходимо  отключать от сети каждый вечер, иначе он взорвется —  убьет всех нас!  
 Мелкий шрифт 
 Элемент  small     — это еще один элемент, который изначально был презентационным и поэтому считался плохой практикой в ​​HTML4, но был переопределен в HTML5. Раньше это был элемент для отображения обычного текста более мелким шрифтом, но теперь в HTML5 он правильно используется для разметки мелким шрифтом, например юридических ограничений, заявлений об отказе от ответственности, уведомлений об авторских правах, заявлений об авторстве или информации о лицензировании. Например:
 
Этот контент выпущен под
Лицензия Creative Commons Attribution Share-alike.

 
 В браузере это будет отображаться как:
  Этот контент выпущен под лицензией Creative Commons Attribution Share-alike. 
 Указание времени 
 Новое в HTML5, элемент  time    дает вам возможность однозначно размечать время и даты, которые вы включаете в свой текст, позволяя вам отображать их так, как вы хотите, включая согласованная дата в формате ISO, которую могут прочитать машины. Вот пример:
 
Я родился .

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

 
 Вы также можете добавить время к дате в конце строки в формате ISO после заглавной буквы T в 24-часовом формате:
 
.

 
 Или вы можете просто указать время, если хотите:
 
.

 
 Обратите внимание, однако, что в настоящее время нельзя указать неконкретную дату, например «август 2011 г.» или «2011 г.».
 Вы также можете добавить количество секунд (после другого двоеточия), миллисекунд (после точки) и смещение часового пояса (после тире) после значения времени. Например:
 
.

 
 Наконец, вы также можете добавить  атрибут даты публикации   pubdate  к элементу  , чтобы указать, что значение datetime представляет дату публикации контента:
 
Опубликовано . 

 
 Презентационные элементы — никогда не используйте эти 
 В дополнение к    ,    и    , спецификация HTML4 включает несколько других элементов, которые являются строго презентационными, поскольку они указывают только содержание. внутри них должно выглядеть, а не то, что это означает. Использование этих элементов не рекомендуется, и большинство из них было удалено из спецификации HTML5.
 Мы кратко опишем их здесь, но обратите внимание, что это в основном для исторического интереса — эти элементы никогда не должны использоваться на современной веб-странице. Чтобы добиться этих текстовых эффектов, вы должны использовать CSS.
 Элемент  font  указывает, что текст должен отображаться с использованием шрифта, отличного от шрифта по умолчанию. Вместо этого используйте CSS.
 Элемент  strike  указывает, что текст должен быть перечеркнут чертой. Вместо этого используйте CSS.
 Элемент  u  указывает на то, что текст должен быть подчеркнут (подчеркнут). Это следует делать не только с помощью CSS, но и вообще редко, потому что большинство читателей интерпретируют подчеркивание как гиперссылку. Конечно, поскольку это не гиперссылка, щелчок по ней ничего не даст, разве что расстроит ваших читателей.
 Элемент  tt  указывает, что текст должен быть представлен «телетайпным» или моноширинным шрифтом. Альтернативой использованию CSS для достижения этого эффекта может быть использование семантических элементов  
  для блочного контента или    для встроенного контента.
 Элемент  big  указывает, что текст должен отображаться более крупным шрифтом.
 Заключение 
 В этой статье мы рассмотрели основы разметки текста HTML, включая заголовки, абзацы, цитаты, код и различные элементы выделения. Когда вы освоитесь с этими концепциями, перейдите к другим руководствам из этой серии, в которых рассматриваются HTML-списки, изображения, ссылки, таблицы и многое другое.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *