Сегодня я хотел бы затронуть такой весьма актуальный для многих веб-мастеров вопрос, как отображение различных специальных символов с помощью HTML. Как известно, специальные символы используются почти повсеместно на просторах Интернета: это знак авторского права и зарегистрированной торговой марки, значки иностранных валют и математические символы, дробные числа и элементы HTML-форматирования, наконец, буквы иностранных алфавитов и многое другое. Следует заметить, что если, например, значок доллара ($) можно легко ввести с помощью соответствующей клавиши на вашей клавиатуре (и не опасаться за корректность отображения данного символа в любых кодировках, моделях и версиях браузеров), то отобразить таким же образом значок английской денежной единицы — фунта стерлингов — вам навряд ли удастся. Условно все спецсимволы можно разбить на три категории: символы, отображающие элементы HTML-форматирования, символы оформления документа и буквы иностранных алфавитов. Теперь о каждой категории подробнее:
Символы, отображающие элементы HTML-форматирования:
В ходе верстки того или иного HTML-документа часто бывает необходимо отобразить в браузере символы, используемые в спецификации языка HTML — угловые скобки (< и >), знак амперсанда (&) и т.д. Чаще всего это бывает необходимо в случае вставки в исходный документ фрагмента HTML-кода, который впоследствии отображался бы в окне браузера именно как кодовый листинг, а не результат его исполнения. Например, вы хотите обменяться с другими сайтами кнопками и для удобства обмена вам нужно предоставить посетителям вашего Интернет-ресурса готовый HTML-код, который останется только выделить (прямо в окне браузера посетителя вашего сайта), скопировать в буфер обмена и вставить в соответствующее место на веб-странице:
<a href=»http://www.vasya-pupkin.ru/»><img src=»http://www.vasya-pupkin.ru/images/vasya.gif» width=»88″ height=»31″ border=»0″ alt=»Сайт Васи Пупкина»></a>
Если поместить этот код в данном виде на страницу, то браузер загрузит указанный в коде графический файл со ссылкой на установленный в теге <A> ресурс. Чтобы в браузере отображался сам код, нужно все левые угловые скобки в коде заменить на <, а правые — на > Вот как будет выглядеть код для отображения в браузере:
<a href=»http://www.vasya-pupkin.ru/»><img src=»http://www.vasya-pupkin.ru/images/vasya.gif» width=»88″ height=»31″ border=»0″ alt=»Сайт Васи Пупкина»></a>
Символы оформления документа:
К так называемым символам оформления веб-документов относятся значки авторского права, зарегистрированной торговой марки, символы иностранных валют, математические обозначения («плюс-минус», «умножить» и др.) и прочие символы. Приведенный пример может быть получен за счет вставки в код документа следующих конструкций:
£ — Фунт стерлингов
® — Зарегистрированная торговая марка
± — Знак «плюс-минус»
Как видно, первые два символа выводятся браузером с помощью специального тега: амперсанд (&) плюс соответствующее наименование, а последний — путем указания специального трехзначного кода (а также «решеточка» и тот же амперсанд). Это не значит, что значок английской национальной валюты и зарегистрированной марки можно получить только посредством теговой конструкции, а знак «плюс-минус» — кодового обозначения. Для каждого специального символа — будь это символ оформления документа, буква иностранного алфавита или символ отображения элементов HTML — существует два способа записи: теговый и кодовый. К примеру, конструкции § и § совершенно одинаково будут выводиться в окне браузера в виде значка параграфа (§).
Зная конструкции символов оформления, можно сильно облегчить жизнь веб-мастера: если вы верстаете в Блокноте, но вам обязательно нужно использовать угловые кавычки, не нужно заходить в текстовый редактор типа MS Word, вводить желаемый тип кавычек (очень часто Word по умолчанию отображает верхние кавычки), копировать их и, снова открыв окно NotePad’а, вставлять в документ. Просто указываете нужную теговую или кодовую конструкцию для нужного типа кавычек и дело в шляпе! А если на вашей странице размещены математические данные, то согласитесь, что уравнение, содержащее в качестве знака умножения букву «Х», с визуальной точки зрения, сильно уступает уравнению, где применяется специальная конструкция знака «умножить».
Говоря об уравнениях, следует сказать, что описываемые конструкции специальных символов не используются в отображении знака степени в математике и числа атомов в химическом соединении (соответственно, в химии). Для этого (а также для иных целей) предназначены теги-контейнеры <SUP></SUP> (верхний индекс) и <SUB></SUB> (нижний индекс).
Буквы иностранных алфавитов:
Когда мы верстаем сайт на русском или английском языке, никаких затруднений с отображением букв в браузере, разумеется, не возникает. Все они есть на раскладке клавиатуры компьютера. Теперь представьте себе ситуацию: вам нужно сверстать сайт, к примеру, на португальском языке, алфавит которого содержит некоторые буквы, чье начертание характерно только лишь для данного языка. Как вы будете выходить из такого положения?
Есть несколько вариантов. Первый заключается в том, чтобы добавить в раскладку клавиатуры новый язык, включить в Word’е поддержку португальского (или любом другом текстовом редакторе, имеющим многоязыковую поддержку) и, выбрав на Панели задач нужный значок, спокойно набирать текст. Спокойно ли? Вы забыли о конечной цели иностранного текста — быть интерпретированным (причем, корректно) браузером. Если вы, набрав текст на португальском в Word’е, скопируете и перенесете фрагмент в Блокнот, то текст отобразится без специальных символов, свойственных данному языку. В тексте примера на португальском языке видно, что некоторые буквы «с» и «а» пишутся с использованием специальных элементов вверху и внизу буквы (они называются «седиль» и «тильда», соответственно), чего никак нельзя достигнуть путем переноса текста из Word’а в программу верстки веб-документов, подобную Блокноту.
Второй вариант — прибегнуть к услугам визуальных веб-редакторов (FrontPage, Word 2000 и др.), которые включают мультиязыковую поддержку. Однако, последующая программная конвертация «чернового» текста в формат HTML может привести, во-первых, к некорректному отображению текста на веб-странице некоторыми моделями и версиями браузеров, а во-вторых, к генерации совершенно ненужного и бесполезного кода, только «раздувающего» конечный размер файла (как, например, в случае с Microsoft Word 2000).
Третий вариант подразумевает использование специальных теговых или кодовых конструкций, предназначенных для корректной визуализации нестандартных букв иностраннного алфавита. Например, чтобы браузер правильно отобразил последнее слово в тексте на португальском языке, показанном в последнем примере, в код документа нужно вписать следующую конструкцию:
eleição
В результате — никаких проблем с кросс-браузерной совместимостью и «утяжеленным» размером HTML-файла да и жители Португалии не встретят на «якобы португальском сайте» непонятных слов и выражений. Купить кроссовки adidas yeezy boost 350 по самой выгодной цене можно на сайте yeezymafia.store!
В завершении разговора о специальных символах, должен сообщить одну принципиальную вещь. Прежде всего она касается случаев с буквами иностранных алфавитов: в мета-определениях таких HTML-документов необходимо указывать кодировку ISO8859, иначе такой «вредный и капризный» браузер, как Netscape Navigator, начнет выдавать полную абракадабру вместо желанных спецсимволов. MS Internet Explorer, в отличие от своего коллеги по браузерному цеху, более неприхотлив и корректно отображает все специальные символы даже в русских кодировках
