Работа с текстом в HTML
Из предыдущего урока мы поняли, что контент сайта состоит из блоков, а каждый блок содержит в себе заголовки, текст, картинки и ссылки. Сегодня я расскажу как работать с текстом в HTML.
Понятно, что текст содержит заголовки, подзаголовки и абзацы.
Заголовки.
Заголовки имеют 6 уровней.
Самым верхним уровнем является уровень 1 (тег <h2>), а самым нижним — уровень 6 (тег <h6>).
Чем выше уровень, тем больше размер шрифта заголовка.
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Заголовки</title>
</head>
<body>
<h2>Заголовок 1-го уровня</h2>
<h3>Заголовок 2-го уровня</h3>
<h4>Заголовок 3-го уровня</h4>
<h5>Заголовок 4-го уровня</h5>
<h5>Заголовок 5-го уровня</h5>
<h6>Заголовок 6-го уровня</h6>
</body>
</html>
В браузере этот код выглядит вот так:
Абзац.
Абзац заключается в тег <p></p>.
Абзацы можно разделить горизонтальной линией <hr>.
Для переноса части текста на другую строку, используется тег <br>.
Теги <hr> и <br> закрывать не нужно.
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Абзац</title>
</head>
<body>
<p>
Здесь располагается текст первого абзаца.
</p>
<hr>
<p>
А здесь располагается текст следующего абзаца.
</p>
<hr>
<p>
А так можно написать стихи:
<br>
Мороз и солнце
<br>
День чудесный
</p>
</body>
</html>
В браузере это выглядит вот так:
Свободное форматирование.
Свободное форматирование текста заключается в тег <pre></pre>.
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Свободное форматирование</title>
</head>
<body>
<pre>
+OOO++OOO+
OOOOOOOOOO
+OOOOOOOO+
++OOOOOO++
+++OOOO+++
++++OO++++
</pre>
</body>
</html>
В браузере это выглядит так:
Выделение слов внутри текста.
Для того, чтобы выделить слово курсивом, это слово оборачивается парным тегом <em></em>.
<!DOCTYPE html>
<html>
<head>
<meta charset= «utf-8»>
<title>курсив</title>
</head>
<body>
<p>
Это абзац текста, в котором некоторое слово выделено <em>курсивом</em>.
</p>
</body>
</html>
Чтобы выделить слово жирным, оборачиваем его в тег <strong></strong>.
<strong>Жирный текст</strong>
Но, все выделения слов лучше делать с помощью CSS в отдельном файле, как? узнайте здесь.
Нередко при работе с текстом в HTML возникает необходимость использовать верхние и нижние индексы, например в формулах.
<sub>нижний индекс</sub><sup>верхний индекс</sup>
Чтобы добавить слову какой-нибудь стиль, то оборачиваем его в тег <span></span>, а сами стили прописываем в файле CSS.
Что такое CSS читайте здесь.
Как оформить текст с помощью CSS читайте здесь
В следующем уроке мы научимся создавать списки с помощью HTML.
Работа с текстом
Теперь
мы научились создавать самые простые
HTML
страницы. Но было бы совсем грустно не
иметь возможности как-то стилизовать
текст и не иметь возможности вставить
картинки.
Давайте в этой главе поговорим
о редактировании текста, а картинками
займемся в следующей.
В табличке показаны некоторые основные теги, используемые для редактирования текста. Разберем часто используемые теги, остальные посмотрите сами.
Тег | Описание |
<pre></pre> | Обрамляет предварительно отформатированный текст. |
<h2></h2> | Создает самый большой заголовок |
<h3></h3>,<h4></h4>, <h5></h5>,<h5></h5> | Создает заголовоки промежуточных размеров |
<h6></h6> | Создает самый маленький заголовок |
<b></b> | Создает жирый текст (нерекомендованный) |
<i></i> | Создает наклонный текст (нерекомендованный) |
<tt></tt> | Создает
текст — имитирующий стиль печатной
машинки. |
<kbd></kbd> | Создает текст — имитирующий стиль печатной машинки. (рекомендованный) |
<var></var> | Название переменных отображается курсивом |
<cite></cite> | Выделение цитат курсивом |
<address></address> | Отображается курсивом в виде отдельного абзаца |
<em></em> | Наклонный текст (воспринимается поисковыми роботами как выделение) |
<strong></strong> | |
<font size=»?»></font> | Устанавливает
размер текста в пределах от 1 до 7. |
<font color=»?»></font> | Устанавливает цвет текста, используя значение цвета в виде RRGGBB. |
<font face=»?»></font> | Устанавливает шрифт для отображения текста |
<p align=?></p> | Выравнивание абзаца |
</br> | Принудительный перенос строки |
Теги <b></b> и <i></i> к использованию не рекомендованы, вместо них можно использовать <strong></strong> и <em></em> соответственно. Пример использования:
<strong>Текст1</strong> <em>Текст2</em>,
также возможна группировка этих тегов
в любой последовательности, но необходимо
помнить, что теги должны закрываться
не пересекая границу друг друга, да и
вообще перекрытия границ контейнеров
может нарушать отображение информации,
затрудняет отображение страниц браузерами
и следовательно приводит к снижению
релевантности ресурса.
Правильно: <strong>Текст1 <em>Текст2</em> Текст 3</strong>
Не правильно: <strong>Текст1 <em>Текст2 Текст 3</strong></em>
Тег <FONT> — один из основных тегов физического форматирования текста, отображающий свойства шрифтов. Для него могут использоваться следующие параметры:
FACE — параметр, посредством которого браузер отображает текст указанным в HTML-коде шрифтом. При этом значение параметра FACE должно соответствовать установленному на компьютере пользователя шрифту. В случае если такого шрифта нет, текст будет показан стандартным (по умолчанию) шрифтом.
Часто
разработчики HTML-документов добавляют
сразу несколько значений параметра FACE.
<FONT FACE=»Tahoma», «Arial», «Verdana»>Ваш текст</FONT>
Еще один не мало важный парный тег <font size=»?»></font>, устанавливающий размер шрифта, в последнее время разработчики отдают предпочтение именно ему, а теги <H> потихоньку отходят, но по-прежнему поддерживаются всеми браузерами.
<font size=»4″> Размер текста 4</font>
Задание1: Давайте создадим новый документ, назовем его, например, Font.html. Это будет страничка показывающая работу с тегами только что нами изученными. В задании необходимо:
Название странницы: “Размер шрифта”.
Цвет фона желтый
Цвет шрифта красный
Шрифт, используемый для отображения текста 2,3,7,4,5,6 поочередно.
Тест, оформленный шрифтом 7, расположить по центру.
Время выполнения 5-15 минут.
Примечание перенести строку можно и тегом <p></p> в этом случае интервал между строками будет увеличен
Вот что получилось→
Работа с HTML-тегами форматирования текста
Рекламные объявления
В этом уроке вы узнаете, как форматировать текст на веб-страницах с помощью HTML-тегов.
Форматирование текста с помощью HTML
HTML предоставляет несколько тегов, которые можно использовать для того, чтобы текст на веб-страницах отображался иначе, чем обычный текст, например, вы можете использовать тег , чтобы сделать текст жирным, тег , чтобы сделать текст курсивом, тег для выделения текста, тег для отображения фрагмента компьютерного кода, теги и для пометки редакционных вставок и удалений и многое другое. 
В следующем примере показаны наиболее часто используемые теги форматирования в действии. Теперь давайте попробуем это, чтобы понять, как эти теги в основном работают:
Пример
Попробуйте этот код »Это жирный текст.
Это очень важный текст.
Это курсив.
Это выделенный текст.
Это выделенный текст.
Это
компьютерный код.Это более мелкий текст.
Это подстрочный и надстрочный текст.
Это
удаленный текст.Это вставленный текст.
По умолчанию тег обычно отображается в браузере как , тогда как тег отображается как . Однако есть разница в значении этих тегов.
Разница между тегами
и Оба тега и отображают заключенный текст жирным шрифтом по умолчанию, но тег указывает, что его содержимое имеют большое значение, тогда как 9Тег 0009 просто используется для привлечения внимания читателя, не придавая ему особой важности.
Пример
Попробуйте этот код »ВНИМАНИЕ! Будьте осторожны.
Концерт пройдет в Гайд-парке в Лондоне.
Разница между тегами
и Аналогично, оба и < i> Теги отображают заключенный текст курсивом по умолчанию, но теги 9Тег 0009 указывает на то, что его содержимое имеет подчеркнутое выделение по сравнению с окружающим текстом, тогда как тег используется для разметки текста, который выделяется из обычного текста по причинам удобочитаемости, например, технический термин, идиоматическая фраза из другого языка, мысль и т. д.
Пример
Попробуйте этот код »Кошки милые животные.
Royal Cruise отплыл прошлой ночью.
Примечание: Используйте теги и , когда содержание вашей страницы требует, чтобы определенные слова или фразы имели сильное выделение или важность.
Также в HTML5 были переопределены теги , ранее не имевшие смыслового значения.
Форматирование цитат
Вы можете легко форматировать блоки цитат из других источников с помощью HTML 9тег 0010.
Цитаты обычно отображаются с отступом влево и вправо, а также с добавлением небольшого дополнительного пространства сверху и снизу. Давайте рассмотрим пример, чтобы увидеть, как это работает:
Пример
Попробуйте этот код »Учитесь у вчерашнего дня, живите сегодняшним днем, надейтесь на завтрашний день. Важно не переставать задавать вопросы.
— Альберт Эйнштейн
Подсказка: 9Тег 0009 cite используется для описания ссылки на творческую работу. Он должен включать название этой работы или имя автора (людей или организации) или ссылку на URL.
Для коротких встроенных цитат можно использовать тег HTML .
Большинство браузеров отображают встроенные кавычки, заключая текст в кавычки. Вот пример:
Пример
Попробуйте этот код »По данным Всемирной организации здравоохранения (ВОЗ):
Здоровье — это состояние полного физического, психического и социального благополучия.
Отображение сокращений
Аббревиатура — это сокращенная форма слова, фразы или имени.
Вы можете использовать тег для обозначения аббревиатуры. Атрибут title используется внутри этого тега для обеспечения полного раскрытия аббревиатуры, которая отображается браузерами в виде всплывающей подсказки при наведении курсора мыши на элемент. Давайте попробуем пример:
Пример
Попробуйте этот код »W3C — основная международная организация по стандартизации для WWW или W3. Он был основан Тимом Бернерсом-Ли.
Обозначение контактных адресов
Веб-страницы часто содержат уличные или почтовые адреса. HTML предоставляет специальный тег для представления контактной информации (физической и/или цифровой) человека, людей или организации.
Этот тег в идеале следует использовать для отображения контактной информации, связанной с самим документом, например, автора статьи. Большинство браузеров отображают адресный блок курсивом. Вот пример:
Пример
Попробуйте этот код »<адрес> Фонд MozillaПолный список тегов форматирования HTML см. в справочном разделе HTML.
331 Э. Эвелин Авеню
Маунтин-Вью, Калифорния 94041, США
Предыдущая страница Следующая страница
Форматирование текста веб-страницы не похоже на
форматирование текста для печати. После создания основы документа (см. главу 9, «Структурные HTML-теги») самое время начать форматирование веб-страницы. документ должен установить общую структуру содержания путем добавление тегов HTML, которые создают абзацы и уровни заголовков в необработанном виде текст. 10.2.1. Абзацы и разрывы строк Браузер
начинает новый абзац или добавляет разрыв строки, только если встречается
тег в исходном файле HTML, который явно указывает ему сделать это.
В противном случае он игнорирует возврат каретки и лишние пробелы в строке.
HTML-документ. Без тегов все содержимое HTML-документа переносится
автоматически заполнять ширину окна браузера. Так что даже если вы
написали свой контент с пробелами между строками
абзацы, он будет отображаться как один блок текста, если он не
отформатированы с использованием соответствующих тегов HTML. Абзацы — самые элементарные элементы текстового документа. В HTML они обозначаются путем включения фрагмента текста в теги абзаца. ( … ). А абзац является примером блочного уровня элемент . Когда браузеры видят теги блочных элементов, они начинают новую строку и добавляют дополнительный пробел выше и ниже элемента. Другие примеры блочных элементов включают заголовки. (), цитаты (), деления ( |
В печати вы можете позволить себе роскошь знать
этот текст останется там, где вы его разместили. С другой стороны, веб-текст
больше жидкости. Многие аспекты презентации определяются, когда
документ перетекает в окно браузера каждого пользователя.
Вероятно, неплохо было бы войти в
привычка закрывать все теги, которые вы когда-то оставили висящими.
Браузеры отображают
заголовки с уменьшенным размером шрифта, чтобы