Теги для текста на сайте позволяют назначить стиль, цвет, размер и другие параметры, предназначенные для форматирования текста на страницах сайта.
Теги для текста нужно знать. Так как эти знания об основных текстовых тегах будут очень полезны при необходимости внесения изменений в коде страницы сайта.
Наполним содержимым страницу сайта. Для этого открываем страницу сайта, ранее созданную в текстовом редакторе Notepad++, (щелкаем правой кнопкой мыши по иконке страницы и выбираем Открыть с помощью, в выпадающем списке выбираем Notepad++).
В редакторе Notepad++ устанавливаем курсор после открывающего тега <body>, перемещаемся на строку вниз при помощи клавиши Enter и вставляем кусок любого текста с заголовком, разделяя текст на абзацы пустой строкой.
Сохраняем изменения и откроем страницу в браузере. Наши усилия по разделению заголовка и текста на абзацы не увенчались успехом, поскольку на странице при открытии в браузере, текст слился в единую массу без всяких абзацев.
Для выделения заголовков в HTML существуют открывающие и закрывающие теги <h1> <h2> <h3> <h4> <h5> <h6>. Для выделения абзацев теги <p> </p>.
Перед заголовком поставьте тег <h1>, а в конце заголовка закрывающий тег </h1>, и в каждый абзац текста, перед текстом внесите открывающий тег <p>, в конце абзаца закрывающий тег </p>.
При создании сайта. форматирование и оформление текста производят в отдельном файле css, а не в html-коде, но иногда бывает нужно сделать это непосредственно и в коде страницы, поэтому нужно знать правила и атрибуты применяемые к оформлению текста в html.
Обычно в тесте есть заголовок и есть подзаголовки. Для оформления заголовков и подзаголовков в HTML применяются парный открывающий и закрывающий тег <h> </h> эти теги могут принимать значение от 1 до 6, у заголовка заключенного в теги <h1> размер шрифта буде крупнее чем у заголовка заключенного в теги <h2> и соответственно заголовок заключенный в теги <h6> будет иметь самый маленький размер шрифта применяемого к заголовкам
Для создания абзацев существует парный тег <p> </p>. Для выравнивания текста на странице, к тегам <p> и <h> можно применять атрибут ALIGN, который может иметь значение
<p align=»center»>Текст будет располагаться в центре страницы
</p> <p align=»right»> Текст выравняется по правому краю страницы
</p> <p align=»left»> Текст выравняется по левому краю страницы
</p> <p align=»justify»> Выравнивает текст по обеим сторонам страницы </p>
Эти же значения с атрибутом ALIGN можно применять и к тегам <h>
<h3 align=»center»>Выравняет заголовок по центру </h3>
Текст может быть простым, жирным, курсивом, подчеркнутым,зачеркнутым, может быть разного цвета, разных шрифтов и размеров, выделятся фоном и так далее.
Тегами , с элементом STYLE, задается цвет под конкретным текстом,например:
<span style=»background-color: #FF0033″> Текст будет выглядеть так </span>
Текст будет выглядеть так
<span style=»background-color: #FF0033″> Текст будет выглядеть так </span>
Текст будет выглядеть так
<span style=»background-color: #00ff40″> Текст будет выглядеть так </span>
Текст будет выглядеть так
Чтобы изменить цвет в теге body указать следующее:
<body text=»#336699″ bgcolor=»#FFFF66″>
Это обозначает, что вся страница будет желтой с текстом синего цвета. Чтобы выделить цветом часть предложения или слово, нужно в тексте около нужной фразы указать тег font с атрибутом color и закрыть его в конце:
<body text=»#336699″ bgcolor=»#FFFF66″> ...Пример<font color=»#FF0000″>произвольного</font>текста… </body>
После этого выбранный текст станет красного цвета, а остальной текст останется синим.
Существует несколько способов изменения шрифта:
Изменение типа шрифта. Возможно с помощью тега font и его атрибута face:
<font face=»arial,impact»>текст со шрифтом</font>
Типы шрифтов указываются через запятую для того, что если первый не поддерживается компьютером пользователя, то применяется второй шрифт.
Изменение стиля шрифта. По стилю текст может быть жирным, курсивом и моноширинным (символы одинаковой ширины):
— Для жирного шрифта: <b>текст</b> или <strong>текст</strong>
— Для курсива: <i>текст</i>
— Для моноширинного шрифта: <tt>текст</tt>
Можно совмещать стили шрифта:
<b><i>жирный курсив</i></b>
Здесь важно соблюдать вложенность тегов.
Изменение вида шрифта. Шрифты могут быть подчеркнутыми и перечеркнутыми, стоять в верхнем и нижнем индексе, а также отображаться заглавными или строчными буквами. Всё это можно реализовать с помощью тегов:
— Подчеркнутый шрифт: <u>текст</u>
— Перечеркнутый шрифт: <s>текст</s>
— Верхний индекс: <sup>текст</sup>
— Нижний индекс: <sub>текст</sub>
— Все заглавные буквы: <big>текст</big>
— Все строчные буквы: <small>текст</small>
Размер шрифта. Размер шрифта можно изменять с помощью тега font и ещё одного (последнего) атрибута для этого тега — size:
<font size=»+4″ (+3,+2,+1,0,-1,-2)>Пример текста</font>
В скобках указаны возможные изменения размеров шрифта.
Посмотрите видео об основных тегах для текста на странице сайта:
