длинное тире код html

Символы

Перечислены те символы, которые чаще всего встречаются при форматировании текстов на сайтах и которые не вводятся напрямую с клавиатуры.

Если на сайте используется кодировка UTF-8, то символы можно без проблем вставлять в HTML прямо копируя их из колонки «Вид» или набирая их номер с помощью цифровой клавиатуры, удерживая клавишу Alt (может работать не во всех операционных системах).

Надстрочные и подстрочные символы без HTML

Если где-то нельзя использовать HTML-теги, но нужны подстрочные или надстрочные символы (т. е. нижние или верхние индексы), то можно скопировать их отсюда:

Если же HTML-разрешён, то просто используем теги _{(нижний индекс) и (верхний индекс).}

Источник

Чёрточки: только ли тире, минус и дефис?

Однажды вечером я почувствовал, что пришло время расширить 97‐ й параграф «Ководства» Артемия Лебедева.

На клавиатуре одна чёрточка, она обычно правее нуля и повыше букв «З» и «Х». Неосведомлённые люди называют её попеременно то дефисом, то минусом, то тире. Лебедев объясняет нам, что это четыре (учитывая две разновидности тире) различных символа. На самом деле их как минимум девять, и об этом я и расскажу вам сейчас.

Итак, девять чёрточек, и каждая имеет свою область применения.

Начнём с той самой, которая есть на клавиатуре (-). Так что же это: дефис, минус или тире? А вот и не угадали. Это дефисоминус. Не дефис и не минус, а что‐ то среднее между ними; и уж точно не тире.

Когда он употребляется? Только тогда, когда нет технической возможности употребить настоящий дефис, настоящий минус или настоящее тире (что касается последнего случая, то здесь иногда пишут два или три дефисоминуса подряд).

Настоящий дефис (‐) — это символ U+2010 (соответственно, ‐ в HTML). Именно он используется в словах «светло‐ серый», «по‐ моему», «кое‐ кто» и т. п.

На клавиатуре дефиса нет, и поэтому повсеместное его употребление представляется крайне проблематичным. Можно, конечно, заменить в раскладке дефисоминус на дефис, но это может вызвать (и наверняка вызовет!) затруднения, например, при наборе текстов компьютерных программ, в которых всегда употребляется исключительно дефисоминус. Выход на данный момент видится разве что во включении дефиса в программы автоформатирования перед публикацией наподобие того же лебедевского «Типографа».

На этом месте все обычно переходят к тире. Но постойте, мы ещё не рассмотрели три символа!

Какой символ употребляется в записи номеров телефонов (555‒41‒72)? Дефис, скажете вы; а вот и нет! Для этого есть отдельный символ: цифровая чёрточка (figure dash). Выглядит она (‒) практически как минус, но минусом при этом не является.

Это особенно помогает в длинных словах, перенос которых создаёт огромные пустые пространства в правой части экрана. Огромный недостаток символа переноса состоит в том, что его неудобно расставлять вручную (впрочем, с этим могут справиться программы автотипографирования) и в том, что его употребление захламляет и делает нечитаемым исходный код текста (поэтому лучше, если расстановка символов переноса производится CMS на этапе генерации HTML‐ кода из хранящегося в базе данных текста).

Ещё один похожий на дефис символ — чёрточка (⁃), употребляемая в качестве маркеров списков (чёрточный буллит). В Студии Лебедева справедливо замечают, что в русской типографской традиции нет такого понятия, как буллит (имея в виду традиционные кружки с квадратиками), и предлагают в качестве маркера употреблять (длинное) тире; как вы можете заметить, они именно так делают (или делали) на своём сайте и даже разразились статьёй, рассказывающей, как это сделать.

На самом деле для маркеров списков существует специальный символ, имеющий код U+2043 (впрочем, Лебедев утверждает, что к русской типографике это не относится). В HTML сделать для списка такой маркер довольно просто, используя CSS:

(Разумеется, приведённый код не идеален, да и работать будет лишь в правильных браузерах, но идея вам ясна, надеюсь.)

Теперь наконец‐ то можем перейти к тире; здесь всё уже хорошо изъезжено: известна разница между коротким тире (–, en dash, чёрточка шириной с букву «n», – ) и длинным тире (—, em dash, чёрточка шириной с букву «M», — ). Известно, что в русской типографике употребляется исключительно длинное тире (хотя ведутся споры касательно возможности употребления короткого тире в числовых диапазонах), тогда как на Западе обычно предпочитают en dash.

Длинное тире также употребляется в русском языке в диалогах. На Западе же для этой цели часто употребляют отдельный символ горизонтальной черты ( ― ):

― Cela n’est pas de ma faute, rétorqua-t-il.

Источник

Спецсимволы HTML

Спецсимволы HTML – это специальные языковые конструкции, которые ссылаются на символы из набора символов, используемых в текстовых файлов. В таблице приведен список зарезервированных и специальных символов, которые не могут быть добавлены в исходный код HTML-документа с помощью клавиатуры:

Такие символы добавляются с помощью числового кода или имени.

Для добавления любого символа, перечисленного ниже, на вашу веб-страницу, просто вставьте код символа (или его имя) в месте, где требуется отобразить выбранный символ. Подробнее об использовании спецсимволов и пример добавления их на страницу смотрите в разделе «Зачем нужны спецсимволы и как ими пользоваться».

Математические символы, поддерживаемые в HTML

Греческий и коптский алфавиты

Зачем нужны спецсимволы и как ими пользоваться

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

Источник

Использование пробельных символов для форматирования кода HTML, неразрывный пробел и другие спецсимволы (мнемоники)

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Те, кто хотя бы поверхностно успел ознакомиться с уроками по основам языка гипертекстовой разметки, наверное, уже приняли к сведению, что такое HTML, пусть и в общих чертах. А значит, имеют представление о том, какие вообще HTML символы используются в коде документа.

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

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

Пробелы и пробельные символы в HTML

Сначала необходимо сделать важное замечание. На клавиатуре компьютера есть специальные клавиши, которые позволяют реализовать разделение текста (чуть подробнее об этом ниже). Однако, лишь широкая клавиша пробела обеспечивает раздел между словами не только в редакторе, но и в окне браузера. При переносе строк и отступе от края существуют нюансы.

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

Чтобы перенести строки внутри абзаца P, нужно воспользоваться одиночным тегом BR, с помощью которого это можно осуществить. Скажем, нам нужно вставить в текст какие-нибудь строчки из стихотворения, которые мы пишем в текстовом редакторе:

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

Чтобы добиться такого же отображения в окне веб-обозревателя, нужно в каждом месте переноса строки прописать BR:

Теперь мы достигли выполнения поставленной задачи и в браузере стихотворные строчки отобразятся совершенно правильно:

Таким образом, нужные переносы строк выполнены. Здесь еще нужно отметить такую особенность, что множественные пробелы, идущие один за другим, веббраузер отображает как один. В этом вы сможете убедиться, если в том же редакторе админки WordPress попробуете поставить не один, а несколько пробелов между двумя словами и, нажав на кнопку «Сохранить», посмотрите на результат в браузере.

Пробел, табуляция и перенос строки

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

Однако, как я сказал выше, конечный нужный результат не только в текстовом редакторе, но и в браузере, мы получаем лишь при использовании первой клавиши. Все три клавиши (в том числе табуляция и перенос строки полезно использовать при форматировании кода HTML. Допустим, вот как выглядит фрагмент кода в NotePad++ (тут об этом редакторе толковый материал) при отображении всех пробельных символов:

Мы получаем код, который легко читаем и понятен благодаря пробелам. Оранжевыми стрелками отмечены отступы, создаваемые с помощью клавиши Tab, а символами CR и LF переносы строк, осуществляемые посредством кавиши Enter.

Просматриваются контейнеры, вложенные один в другой, хорошо выделяются открывающие и закрывающие теги. В таком виде данный код можно спокойно редактировать. А теперь сравните его с таким же кодом, в котором нет подобного разделения текста:

Таким же образом с помощью пробельных символов можно прописать и правила CSS, которые будут визуально выглядеть понятными и удобоваримыми:

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

Спецсимволы (или мнемоники) в коде HTML

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

При наборе вами текста с клавиатуры происходит кодировка символов языка, который вы используете. В веббраузере набранный текст будет отображен посредством выбранных вами шрифтов в результате обратной операции декодирования.

Дело в том, что подобных кодировок немало, сейчас у нас нет цели их подробно разобрать. Просто в каждой из них может не доставать тех или иных символов, которые, однако, необходимо отобразить. Скажем, приспичило вам прописать одиночные кавычки или знак ударения, а эти значки банально отсутствуют в наборе.

Для того, чтобы ликвидировать эту проблему, и была введена система спецсимволов, которая включает в себя огромное количество самых различных мнемоник. Все они начинаются со значка амперсанда «&» и заканчиваются обычно точкой с запятой «;». Поначалу каждому спецсимволу соответствовал свой цифровой код. Например, для неразрывного пробела, который рассмотрим чуть ниже подробнее, будет справедлива такая запись:

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

В результате браузер отображает соответствующий символ. Список мнемоник очень объемный, наиболее часто применяемые спецсимволы HTML вы можете обнаружить из ниже следующей таблицы:

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

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

Поэтому из той же таблицы спецсимволов HTML берем соответствующие коды и вся запись будет выглядеть так:

Тогда в браузере выведется именно запись мнемоник, которые нужно применить для отображения тега FOOTER. Немного путано, но на этой странице вы сможете попрактиковаться в данном аспекте, введя в поле «HTML» мнемоники для соответствующих символов и задействуя кнопку «Run», а в области «Result» получая результат их отображения в браузере:

Обратите внимание, что я обеспечил перенос текста с помощью уже упомянутого тега BR с тем, чтобы сами символы отображались не в одну строку, а столбиком для удобства.

Идем дальше. Иногда в тексте возникают сочетания, которые нежелательно разделять по разным строкам. Скажем, «1000 руб.» будет логичным или оставить на верхней строке, или при недостатке места всю конструкцию перенести на на строку ниже.

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

Для этих случаев предусмотрен неразрывный пробел HTML, о котором я уже упоминал. Напомню, что в этом случае код пробела такой:

И его нужно вставить между двумя совокупностями знаков, которые требуется связать:

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

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

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

Впрочем, опять же будет полезным все это дело, включая примеры неразрывного и мягкого переноса, воочию отследить на практике:

В окне этого редактора можно изменять размеры поля просмотра «Result», захватив левой кнопкой мышки край этой области и, не отпуская ее, тянуть влево для уменьшения ширины. Тогда возникает реальная ситуация, когда браузер начинает переформатировать содержимое для корректного его отображения.

И осуществляется перенос, который был предусмотрен в описанных мной примерах. Впрочем, вы сами можете подвигать просмотровое окно, расширяя-сужая ее, и визуально убедиться в этом.

Источник