Обзор популярных расширений Joomla

Статьи о создании и развитии сайта

Обучающие материалы по верстке HTML\CSS


search

Основные теги для текста

font1С помощью HTML-верстки можно назначить стиль, цвет, размер и другие параметры, которые предназначены для форматирования текста. Чтобы научиться определять положение и вид контента, нужно знать основные теги для текста. Кроме создания HTML-страниц вручную, знания об основных текстовых тегах будут полезны при изменениях в коде, если задачу невозможно реализовать с помощью визуального редактора html.

Изменение цвета

Чтобы изменить цвет, нужно указать атрибут и в кавычках после значка # написать соответствующее значение цвета. Например, #000000. Прежде всего можно изменять цвета текста и фона страницы. Для этого нужно в теге body указать следующее:

<body text="#336699" bgcolor="#FFFF66">

Это обозначает, что вся страница будет желтой с текстом синего цвета. Чтобы выделить цветом часть предложения или слово, нужно в тексте около нужной фразы указать тег font с атрибутом color и закрыть его в конце:

<body text="#336699" bgcolor="#FFFF66">
...Пример<font color="#FF0000">произвольного</font>текста...
</body>

После этого выбранный текст станет красного цвета, а остальной текст останется синим.

Изменение шрифта

Существует несколько способов изменения шрифта:

  1. Изменение типа шрифта. Возможно с помощью тега font и его атрибута face:
  2. <font face="arial,impact">текст со шрифтом</font>

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

  3. Изменение стиля шрифта. По стилю текст может быть жирным, курсивом и моноширинным (символы одинаковой ширины):  
    • Для жирного шрифта: <b>текст</b> или <strong>текст</strong>
    • Для курсива: <i>текст</i>
    • Для моноширинного шрифта: <tt>текст</tt>
  4. Можно совмещать стили шрифта:

    <b><i>жирный курсив</i></b>

    Здесь важно соблюдать вложенность тегов.

  5. Изменение вида шрифта. Шрифты могут быть подчеркнутыми и перечеркнутыми, стоять в верхнем и нижнем индексе, а также отображаться заглавными или строчными буквами. Всё это можно реализовать с помощью тегов:
    • Подчеркнутый шрифт: <u>текст</u>
    • Перечеркнутый шрифт: <s>текст</s>
    • Верхний индекс: <sup>текст</sup>
    • Нижний индекс: <sub>текст</sub>
    • Все заглавные буквы: <big>текст</big>
    • Все строчные буквы<small>текст</small>
  6. Размер шрифта. Размер шрифта можно изменять с помощью тега font и ещё одного (последнего) атрибута для этого тега - size:

    <font size="+4" (+3,+2,+1,0,-1,-2)>Пример текста</font>

В скобках указаны возможные изменения размеров шрифта.

Заголовки и параграфы

Заголовки в тексте бывают шести уровней, самый большой размер 1-го уровня (H1). Чтобы обозначить заголовок 2-го уровня используется тег H2 и т.д. до H6:

<H2>Новый заголовок</H2>

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

  • Центрирование текста: <p align="center">текст</p>
  • По левому краю: <p align="left">текст</p>
  • По правому краю: <p align="right">текст</p>
  • По обоим краям: <p align="justify">текст</p>

Чтобы выровнять текст по какому-нибудь краю без перехода на новую строчку, применяют тег div. Например:

<div align="right">текст</div>

Элемент div может включать в себя параграфы <div><p></p></div>. Запрещено включать параграфы в параграфы <p><p></p></p> , а также div в параграфы <p><div></div></p>

О том, как заключать текст в таблицу вы узнаете в следующей статье. Кстати, кроме тегов, к тексту удобно применять специальные стили CSS для текста.

{social}

Комментарии  

#2 аре 12.11.2013 14:04
Здесь лучше http://advego.ru/458RC94hyb
+1 #1 Владимир Хомяков 11.02.2013 21:22
Как раз то что я искал. Попробовал, всё работает на моём сайте. Спасибо огромное за понятное и полное изложение.

You have no rights to post comments

Joomla SEF URLs by Artio

Комментарии

  • Модуль VTEM Panorama

    Дмитрий
    Доброго времни суток! Несовсем догоняю как привязать к joomshoping те для каждого товара должен ...
     
  • Плагин Edocs

    sveta
    после перехода с http на https плагин перестал работать. Меняла все пути, которые возможно, но не ...
     
  • Компонент JoomShopping. Полезности

    Димы
    Ух, шикарно, спасибо. Изменил карточку товара. Цену и кнопку "В корзину" разместил слева от ...
     
  • Эффективные способы продвижения сайта

    Александр
    Спасибо за полезную и интересную информацию. Продвижение сайтов резко приобрело популярность благодаря ...
     
  • Работа с категориями в K2

    Николай
    Подскажите пожалуйста, пользуюсь Serpstat. Комплексный аудит сайта по метатегам (путь:Аудит сайта ...