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

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

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


search

Дополнительные элементы в HTML

elemДополнительные элементы в HTML служат для украшения, выделения, упорядочивания текста. Их применение повышает возможности верстки текста и улучшает внешний вид. Только стоит помнить о том, что частое применение сильно яркого и мигающего текста скорее отвлекает, чем привлекает внимание пользователей и сайт в целом будет вызывать раздражение.

Упорядоченные и неупорядоченные списки

Для обозначения упорядоченного (нумерованного) списка в тексте применяются теги <ol> - для указания вида списка и <li> - собственно список, которые по окончании должны закрываться. Например, чтобы создать простейший упорядоченный список нужно:

<ol>
<li>Первый пункт</li>
<li>Второй пункт</li>
</ol>

В результате получим нумерованный список из двух пунктов. Если в теге <li> добавить атрибут type, то можно назначить параметры:

  1. "1" - арабские цифры (по-умолчанию)
  2. "I" - римские цифры
  3. "a" - латинские буквы нижнего регистра
  4. "А" - латинские буквы верхнего регистра

Для обозначения неупорядоченного списка также используют тег <li>, но открывается этот список тегом <ul>. Также, как и в упорядоченных списках к тегу <li> можно применять атрибут type, у которого есть свои значения:

<ul>
<li type="disc">заштрихованный кружок</li>
<li type="square">заштрихованный квадрат</li>
<li type="circle">пустой кружок</li>
</ul>

Атрибут type можно указываться для тегов <ul> и <ol>, в результате выбранный стиль списка будет применен ко всем пунктам.

Список определений

Для создания списка определений можно использовать специальные для этого теги <dl>, <dt>, <dd>. C помощью тега <dl> открывается список с определениями. В теге <dt> указывается заголовок термина, а в <dd> вписывается определение этого термина. Таким образом структура списка в HTML будет иметь вид:

<dl>
<dt>термин</dt>
<dd>определение<dd>
</dl>

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

Создание горизонтальных линий

Горизонтальные линии в тексте задаются с помощью тега <hr> к которому можно назначать следующие атрибуты:

  • align - выравнивание (по-центру, слева, справа)
  • width - ширина линии (% или px)
  • size - толщина линии
  • noshade - отмена объема линии

Т.е. для получения линии слева, по ширине 30% с заданной толщиной, пишем:

<hr align="left" width="40%" size="2">

Также горизонтальную линию можно получить с помощью свойства border в стилях и с помощью вставки картинки в 1px и растягивания её, указывая размеры (width x height)

Бегущая строка

Чтобы создать бегущую строку нужно применять закрывающийся тег <marquee>, в котором указывается бегущий текст:

<marquee>бегущий текст</marquee>

К этому тегу можно применять атрибуты для задания размеров поля (width и height) цвета заливки (bgcolor) выравнивания (align). Кроме того есть специальные атрибуты:

  • loop - количество проходов (loop="5")
  • scrollamount - скорость текста (от 1 до 10)
  • direction - направление (left, right, up, down)
  • behavior - способ показа (slide - проход с остановкой и alternate - от края до края)

Специальные символы

Спецсимволы используются в HTML для того, чтобы показать знаки, которые невозможно написать в коде из-за того, что могут возникнуть конфликты (<, " и т.д.)

  • &amp;lt; - знак <
  • &amp;gt; - знак >
  • &amp;quot; - кавычки "
  • &amp;nbsp; - пробел (если требуется несколько пробелов подряд)
  • &amp;amp; - символ &

Если Вы хотите улучшить свои знания в области версти сайтов, то рекомендую почитать Учебник по PHP/MySQL, который расширии ваши знания программирования.

Теги для обозначения цитат

Существуют несколько тегов для обозначения цитат в тексте, которые отличаются по назначению и внешнему виду:

<blockquote> - закрывающийся тег для выделения длинных цитат. Текст в этом теге будет иметь отступы слева и справа, а также горизонтальные линии вверху и внизу

<cite> - закрывающийся тег для выделения текста как цитаты, в результате текст будет отмечен курсивом

<q> - текст заключенный в этот закрывающийся тег будет показан в кавычках

Изменение вида текста

<code> - тег для обозначения веб-кода, который отображается моноширинным текстом

<blink> - тег для установки мигающего текста

<var> - тег для выделения компьютерных переменных

<wbr> - тег, который обозначает принудительный перенос в слове

<span> - этот закрывающийся тег часто применяется, если требуется установить определенные стили для части предложения

You have no rights to post comments

Joomla SEF URLs by Artio

Комментарии

  • Модуль VTEM Panorama

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

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

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

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

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