Форматирование текста в HTML, HTML теги для редактирования текста
Основным средством передачи информации в интернете является безусловно текст. В предыдущих статьях я про атрибуты тега BODY, а также показал как на практике изменять цвета фона, текста, ссылок и т.п., соответственно ты уже умеешь вставить текст на html-страницу (если забыл, то он вставляется между тегами <BODY> и </BODY>).
Однако, просто вставить текст на страницу бывает мало, надо его правильно разместить согласно цветовой схеме сайта и смысловой нагрузке (абзацы, отступы и т.д.). Но тут главное не переборщить, делать все правильно и в меру, чтобы наши будущие посетители чувствовали себя комфортно.
Я постараюсь написать самое главное, покажу какие теги используются для форматирования текста и их атрибуты, чтобы достигнуть максимального результата.
С чего начинать форматирование в HTML
Для начала, я хотел бы вам рассказать о том, что такое вообще текст и как представляется. Я не буду вам рассказывать много непонятных терминов и понятий. Скажу, как взаимосвязаны форматирование текста в htmlи его редактирование в текстовых редакторах.
И так, представим ты открыл текстовый редактор и набераешь в нем свой текст, сделал все необходимые форматирования (выделил что-то жирным или курсивом), или что-то другое, потом берешь и копируешь полученный результат в код html. После, ты открываешь html-документ в браузере, но не видишь всего того форматирования, что делал до копирования и сохранения. Куда же оно все исчезло? Ответ простой: текстовый редактор для форматирования текста использует собственные спецсимволы-теги, которые попросту скрыты от глаз.
Однако не пугайся, перенести твой красиво оформленный текст из текстового редактора в html можно. В общем, дальше я постараюсь подробно расписать, как это сделать.
Теги форматирования в HTML
Если отформатировал текст, то его можно быстро вставить в html-страницу при помощи тегов <pre> и </pre>. Твой браузер выведит на страницу текст в том виде, в каком он был в текстовом редакторе, если ты его поместишь в эти теги. Но данный тэг ялвяется малоиспользуемым, так как у него мало возможностей. Например, я, его не разу не использовал, но рассказать о нем я бы не посмел :)
Дальше я постараюсь рассказать и показать самые популярные теги HTML для форматирования текста:
- <B></B> (или <strong></strong>) — тег, для выделения текста жирным
- <I></I> (или <em></em>) — тег, для получения курсивного текста
- <U></U> — тег, для подчеркнивания текста (кстати, перечекрнутые слова часто путают с ссылками)
- <STRIKE></STRIKE> — тег, для
зачеркиваниятекста - <SUB></SUB> — тег, для выделения подстрочного текста, или попросту говоря — нижний индекс. Очень помогает, например, для форматирования химических элементов
- <SUP></SUP> — тег, для выделения надстрочного текста, или попросту говоря — верхний индекс (10 м2)
Теги можно использовать не только один, а сколько угодно, где-то даже дополняя друг друга. Можно просто вкладывать один тег в другой. Приведу пример:
10 м<sup>2</sup> — это <strong><em>площадь</em> мой комнаты.</strong>
результат будет выглядеть следующим образом:
10 м2 — это площадь мой комнаты.
Для выделения обзаца, или располодить текст блоком, используют тег <P>. Данный тег отделяет обзац небольшим отступом снизу от другого обзаца или объекта. На примере это будет выглядеть так:
<p>Создаем свой абзац.</p> <p>Создаем второй абзац.</p>
Данный код на html-странице будет выглядеть следующим образом:
Создаем свой абзац.
Создаем второй абзац.
Кстати, закрывать абзац тегом </p> необязательно, если хотите начать следующий абзац, просто напишите снова <p>.
В данном теге есть важный атрибут align, у которого можно выставлять следующие значения: center, left, right и justify. Атрибут помогает выровнить наш текст в теге <p>. Из названий атрибутов, тебе уже наверное понятно, что выравнивание будет по центру, по левому краю, по правому и по всей ширине соответственно. Дальше я приведу простой пример:
<p align="center">Текст по центру</p>
расположит наш текст по центру, на выходе получится следующее:
Текст по центру
Кстате, по умолчанию, текст расположен по левому краю, поэтому атрибут left можно не использовать для этих целей:
<p>Выравнивание текста по левому краю (по умолчанию)</p>
на html-странице это будет выглядеть вот так:выровнит текст по левому краю
Выравнивание текста по левому краю (по умолчанию)
Парой встает возможно без отступа абзаца сделать простой переход на новую строку, и можно это сделать тегом <BR>. html-код в данном случае будет следующим:
Наша первая строка. <br> Наша вторая строка.
на странице будет следующий вид:
Наша первая строка.
Наша вторая строка.
У <br> отсутствует закрывающийся тег. Кстати, если ты хочешь больше одного отступа, можно написать <br> подряд.
Существует еще тег <HR>, благодаря которому тоже можно разделить текст. При помощи него создается полоса, и в котором тоже есть свои атрибуты:
- width — ширина полосы;
- align — выравнивание;
- size — толщина полосы;
- color — цвет полосы;
- noshade — атрибут без значений для создания черной полосы без тени.
html-код на примере будет следующим (попробуй сами на примере узнать что получится):
<hr align="center" size="3" width="300" color="red">
Ширина и толщина задается как в пикселях, так и в процентах, кому как удобнее и для какой цели нужно.
Далее очень важные теги для форматирования, а также и для продвижения сайтов — теги заголовки. Всего их 6:
<H1></H1> <H2></H2> <H3></H3> <H4></H4> <H5></H5> <H6></H6>
Заголовки выделяются жирным шрифтом, а также отступом снизу. Самый большой и главный заголовок на странице это <H1></H1>, ну а самый маленький <H6></H6>. У данные тегов заголовков есть атрибуты:
- align — выравнивание заголовка;
- title — всплывающая подсказка заголовка (когда наведешь курсор на него).
Приведу просто пример HTML-кода заголовков:
<h4 align="center" title="Заголовок 4 размера">Заголовок 4 размера</h6>
на странице мы увидем следующее:
Заголовок 4 размера
Если вы хотите изменять шрифт текста и его размер, в HTML-коде применяется тег <FONT></FONT>. У данного тега имеются следующие атрибуты:
- color — цвет шрифта;
- face — гарнитура шрифта;
- size — размер шрифта. Может иметь значения от 1 до 6, а также от +1 до +6 и от -1 до -6. По умолчанию размер шрифта установлен 3. Если указать <font size="+1"></font>, то текст, находящийся между данным тегом, будет выводится увеличенным на 1, относительно другого текста. Ну и наоборот - при -1 уменьшенным на 1.
Создать список в HTML можно используя теги <OL></OL> (список с нумерацией) и <UL></UL> (список с маркировкой). Элементы в списке должны выделяться <LI></LI>. Как элемент списка начинается с новой строки. В тегах списках есть свой атрибут type. Для начала разберем значения этого атрибта в теге <OL></OL>:
- 1 — нумерация арабскими цифрами (по умолчанию);
- A — большими латинскими буквами по алфавиту;
- a — маленькими латинскими буквами;
- I — большими римскими цифрами;
- i — маленькими римскими цифрами.
Приведу HTML-код для примера:
<ol type="I"> <li>Элемент 1.</li> <li>Элемент 2.</li> <li>Элемент 3.</li> </ol>
на странице будет вот так:
- Элемент 1.
- Элемент 2.
- Элемент 3.
Тег <UL> имеет атрибут type вот с такими значениями:
- disc — закрашенный кружок (по умолчанию);
- circle — незакрашенный кружок;
- square — закрашенный квадратик.
HTML-код тега <UL> на примере:
<ul type="circle"> <li>Элемент 1.</li> <li>Элемент 2.</li> <li>Элемент 3.</li> </ul>
На странице мы увидим следующие:
- Элемент 1.
- Элемент 2.
- Элемент 3.
Показав основные теги для форматирования текста на html-странице нельзя забыть и о спецсимволах. Спецсимволы — это символы, которых, как показывает практика, нет на клавиатуре, но которые браузер преобразует в код, принимая за управляющий. Полный список я привел на отдельной странице Спецсимволы HTML. Кстате, для форматирования текста очень важно знать правила грамматики русского языка, ведь грамотно написанный текст уже наполовину отформатирован.
Давай, для закрепления данного материала я приведу тебе пример html-кода, и ты сам разберись, что он означает:
<font color="green" size="-2"><U> B</U></font>
Пожалуй, я закончил данный материал о HTML тегах для форматирования текста. Я постарался упомянуть самое основное что тебе следует знать. Постарайся запомнить данные уроки, они тебе еще не раз пригодятся. Далее я расскажу тебе, как вставить картинку в html-страницу и какие атрибуты можно при этом использовать.
| ← Атрибуты тега BODY | Теги HTML для вставки изображений → |
Супер-предложение!
Купить виртуальный хостинг для сайта и домен с бесплатным тестовым периодов 1 месяц!
хороший, спасибо за помощь