Логотип Валидатор Валидатор Качество создания сайта

Амперсанды

Зачем нужны амперсанды?

Амперсанды нужны для отображения символов, которых, либо НЕТ на клавиатуре, либо их прямой ввод с клавиатуры приведёт к активации браузера, и он отобразит их так, как сам "считает" нужным (т.е., как "вшито" в HTML-интерпретатор).
Поскольку, некоторые символы используются компьютером "программно" в HTML-коде страницы.

**Простой пример.
Если ввести "левую угловую скобку", потом латинскую букву "b", а затем ещё и "правую угловую скобку", то всё, что ниже, станет жирным.
Применив же, прописывание через амперсанды, нужный HTML-код просто отобразится, НЕ выполняясь.

* * *

Как правильно писать: амперсанты(?), или амперсанды(?) - правильно будет через "Д". От английского слова ampersand.
Их называют "мнемоники", и они начинаются с амперсанда  &  а заканчиваются  ; 


АМПЕРСАНДЫ

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

** Некоторые из них есть на клавиатуре, но очень часто бывает нужно просто вывести код на экран монитора, без его выполнения программно.

* * *

Выделено, - как они прописываются, а справа, через дефис, - как отображаются.

Программные

Символ амперсанда: & - &
Левая угловая скобка: &lt; - <
Правая угловая скобка: &gt; - >
Кавычки программные: &quot; - "
Двойные левые скобки: &laquo; - «
Двойные правые: &raquo; - »
Слэш: &frasl; -
Левый слэш: &#092; - \
Фигурная скобка левая: &#123; - {
Фигурная скобка правая: &#125; - }
Квадратная скобка левая: &#091; - [
Квадратная скобка правая: &#093; - ]
Круглая скобка левая: &#040; - (
Круглая скобка правая: &#041; - )
Знак "решётка": &#035; - #
Знак почты "собачка": &#064; - @
Символ доллара: &#036; - $ <--- он и на клавиатуре есть. НО ... ... ... аккуратнее!

Неразрывный пробел: &nbsp; -   <--- ЗДЕСЬ. Его не видно, но используется постоянно!

**P.S.   Разных пробелов целое семейство. Для сравнения, показал их действие между буквами "А".

А А - обычный клавиатурный пробел
А А - неразрывный пробел &nbsp;
А А - средний пробел с помощью &ensp;
А А - широкий пробел с помощью &emsp;

Технические

Символ параграфа: &sect; - §
Дробь четверть: &frac14; - ¼
Дробь половина: &frac12; - ½
Дробь три четверти: &frac34; - ¾
Дробь одна треть: &frac13; - - *пробовал; в IE8 не работает (только в нём).
Пять в квадрате: 5&sup2; -
Шесть в кубе: 6&sup3; -
Символ градусов: 40&deg; - 40°
Символ "минуты": &prime; -
Символ "секунды": &Prime; -
Символ промилле: &#8240; -
Больше/меньше: &plusmn; - ±
Знак деления: &divide; - ÷
Знак умножения: &times; - ×
Знак равно: &#061; - =
Символ диаметра: &Oslash; - Ø
Знак "не определёно": &#127; - 
Функция: &fnof; - ƒ

Указатели

Левая стрелка: &larr; -
Правая стрелка: &rarr; -
Стрелка вверх: &uarr; -
Стрелка вниз: &darr; -
Туда/сюда: &harr; -
Длинное тире: &mdash; -

Копирайты

Символ копирайтов: &copy; - ©
Зарегистрировано: &reg; - ®
Торговая марка: &trade; -

Деньги

Символ денег: &curren; - ¤
Символ доллара: &#036; - $ <--- он есть на клавиатуре. НО ... ... ... аккуратнее!
Символ цента: &cent; - ¢
Символ евро: &euro; -
Фунт стерлингов: &pound; - £
Иена, или юань: &yen; - ¥

Оформительские

Вертикальный разделитель: &brvbar; - ¦
Вертикальная черта: &#124; - |
Кружок: &bull; -
Символ три звезды: &#8258; -
Карточный символ "буби": &diams; -
Карточный символ "червы": &hearts; -
Карточный символ "трефы": &clubs; -
Карточный символ "пики": &spades; -
Латинский крест: &#8224; -
Двойной латинский крест: &#8225; -

Прочие (можно использовать для оформления)

Буква малая "омега": &omega; - ω
Буква большая "омега": &Omega; - Ω
Буква большая "сигма": &Sigma; - Σ
Буква малая "пси": &psi; - ψ
Буква большая "пси": &Psi; - Ψ   <--- большая и малая "пси" отображаются одинаково.
Буква большая "тэта": &Theta; - Θ
Буква большая "кси": &Xi; - Ξ
Обратный знак вопроса: &iquest; - ¿

Литературные

Кавычки левые одинарные: &lsquo; -
Кавычки правые одинарные: &rsquo; -
Кавычки левые двойные: &ldquo; -
Кавычки правые двойные: &rdquo; -
Символ соединительной точки: &middot; - ·
Символ верхней точки: &dot; - ˙
Многоточие: &hellip; -
Символ запятой: &#044; - ,
Символ ударения: &acute; - ´
Амперсанд возможного переноса: &shy; - ­ <--- как-то так, но здесь действия не видно.


Примеры использования

Здесь покажу практическое использование нескольких амперсандов сразу для оформления страниц сайта.

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

Пример нескольких одинаковых амперсандов неразрывного пробела

Тестовая строка с тремя амперсандами неразрывного       пробела &nbsp;, и ещё 4-ьмя пробелами между ними.
Без использования амперсандов браузер "свёл" бы всё до одного пробела.

Пример использования нескольких разных амперсандов

Указал географические координаты.
Прописано: 20&deg;30&prime;15&Prime; отображается - 20°30′15″

Использование литературного амперсанда

Средняя соединительная точка.
Прописал: Ф&middot;Ф&middot;Ф&middot;Ф отображается - Ф·Ф·Ф·Ф

Пример смены цвета амперсандов

Прописал им другой (не чёрный) цвет: ♥ ♥ ♥

Пример смены цвета и размера амперсандов

Здесь, кроме цвета, ещё и увеличил им размер: ♥ ♥ ♥

В этом случае хорошо видно, что, кроме увеличения размера самих, выводимых на экран символов, увеличилось и межстрочное расстояние. Всё, как в обычном тексте!

Проба символов "три звезды": ⁂ ⁂ ⁂ Хотелось их поближе рассмотреть. Интереснее!

* * *

Отобрал, и показал лишь только самые интересные, на мой взгляд, амперсанды. Так их гораздо больше.
Очень много символов из греческого, и других алфавитов. Если интересно, то можно посмотреть в соответствующих справочниках. Это же целый мини-язык!

Кстати!

Отличные, подробнейшие справочники амперсандов, которыми поначалу я часто пользовался, находятся в разделе "Полезное" (откроется в новом окне).

Ну, а мне теперь вполне хватает этого справочника, что Вы сейчас видите перед собой.

На учебные сайты

ВВЕРХ

Все права защищены. Copyright © 2009 - Коротеев Владимир.

Protected by Copyscape Duplicate Content Check
Яндекс.Метрика
Рейтинг@Mail.ru