Tags: отступ

Отступ в HTML

Източник.

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

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

      Итак, html отступ текста, способ первый - самый, естественный и простой. Чтобы сделать отступ перед текстом,  добавим перед текстом html код пробела -   Добавить html код пробела  можно в любом html редакторе.

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


<html>
<head>
<title>HTML отступ текста</title>
</head>
<body>
<p>&nbsp;&nbsp;&nbsp;&nbsp; HTML отступ текста слева, используем код пробела</p>
</body>
</html>


        В данном примере, перед выбранным нами текстом код пробела - &nbsp; добавлен четыре раза, в результате, получим нужный нам отступ.

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

      Этот способ хорош тем, что он будет гарантированно отработан любым браузером.


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

      Одним из вариантов решения этой проблемы, является следующий способ задания отступа.

      HTML отступ текста, способ второй - этот способ основан на свойствах тега blockquote.  Данный тег задает отступ примерно 40 пикселей  слева и справа, для размещенного в нем текста. Кроме того, отступ задается сверху и снизу. Пример html кода использования  данного способа приведен ниже:


<p><blockquote> HTML отступ текста слева, используем тег blockquote </blockquote></p>

      Как видите, данный способ задания отступа для текста, очень прост в использовании, но и этот способ тоже имеет существенный недостаток. Отступ, который задает тег blockquote, является фиксированным и всегда равен одной и той же величине – 40px.

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

      HTML отступ текста, способ третий.

        Здесь мы воспользуемся свойством параметра  text-indent каскадных таблиц стилей CSS.

      Если открыть справочник CSS, на странице с описанием свойств text-indent, то мы увидим, что с помощью text-indent,  мы можем задавать величину отступа первой строки или первого абзаца, какого-либо блока текста.

      Мы рассматриваем, пример с коротки текстовым блоком, поэтому  свойства text-indent вполне подходят для нашего случая.

      Ниже приведен html код, который формирует отступ текста с использованием text-indent. Из примера видно, что задавая для text-indent  разные значения аргументов, мы можем изменять величину отступа текста:


<p style="text-indent:100px"> HTML отступ текста, работает стиль CSS - text-indent </p>

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

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

      В качестве рабочего примера, сразу рассмотрим html код, который демонстрирует работу данного способа:

<p><img src=image.png width=150 height=1> HTML отступ текста слева,  используем изображение </p>

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

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

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

      Автор: Виктор Милованов

Правила вёрстки текста, публикуемого в Интернете.


Източник.
          
        13.03.2004  
        Новиков М.Г.  
   Слава Кпсс — это вовсе не человек,  
        А Карл, Маркс, Фридрих и Энгельс — это 2 разных человека, а не 4.  
        (Из анекдота про чукчу)
 
   Содержание:      
   Вступление  
        Правила верстки текстов, предназначенных для публикации в Интернете  
                Дефис, тире, короткое тире и минус — это 4 разных знака  
                Правила расстановки пробелов  
                Правила переноса целых слов на новую строку  
                Правила расстановки точек и запятых  
                Правила использования кавычек  
                Ещё несколько правил  
        Полезные ссылки  
  
Вступление
      Качественный сайт — это, прежде всего, удобный интерфейс и стильный дизайн. Но многие забывают о третьей составляющей качества — правильной вёрстке текстового содержимого.  
        В настоящее время большинство статей выкладываются на сайты непрофессионалами, отчего общее качество сайта сильно падает, несмотря на все усилия создававших его дизайнеров и программистов.  
        Эта статья предназначена для тех, кто действительно хочет повысить качество своих интернет-текстов. В этой статье я попытаюсь дать представление об основных правилах их верстки, придерживаться которых может каждый, удерживая тем самым и текстовую составляющую качественного сайта на достаточно высоком профессиональном уровне.  
        К сожалению, программы, с помощью которых создаются и просматриваются сайты, лишены таких важных для правильной верстки элементов, как узкие пробелы. В результате этого возникают неоднозначности в ответе на вопрос, заменять ли их на обычные или исключать совсем. Кроме того, тире в разных шрифтах имеют разную ширину и, как правило, большую, чем используется в русской типографике. Из-за этого некоторые конструкции смотрятся излишне «размазанными», что вызывает желание использовать в них т.н. «короткое» тире, в традиционной русской типографике не применяющееся.  
        По причине вышеизложенного, возможность строго следовать требованиям ГОСТа в Интернете отсутствует. Поэтому здесь сложилось несколько разных традиций верстки, каждая из которых по-своему стремится приблизиться к истине. О наиболее логичной из них я расскажу в этой статье.  

   Правила верстки текстов, предназначенных для публикации в Интернете.      
   Существует 2 основных вида интернет-верстки.  
        Первый вид интернет-верстки — это безоговорочная замена шпаций (пробелов) любой ширины обычным пробелом, а тире — длинным компьютерным тире (—), невзирая на отклонения их размеров от стандарта. Этот вариант предпочитают люди, пытающиеся слепо следовать букве закона традиционной вёрстки. В результате этого текст начинает выглядеть ужасно.  
        Второй вид интернет-верстки — это избирательное применение пробелов и короткого тире (исходя из тех же самых соображений, которыми изначально руководствовались разработчики традиционной вёрстки, а именно удобочитаемости), с учётом используемого компьютерного шрифта и ограничений программ создания и просмотра сайтов.  
        В этой статье будет излагается второй вариант, адаптированный к шрифтам «Arial», «Times New Roman» и к большинству других распространенных компьютерных шрифтов.  

   Дефис, тире, короткое тире и минус — это 4 разных знака!      
   Дефис (-) [код 002D], единственный из знаков описываемой группы, имеющийся на клавиатуре] от разделяемых слов или частей слов пробелами не отбивается. Применяется: для соединения составных конструкций (далеко-далеко, фабрика-кухня, два-три раза, встретили хлебом-солью, Наро-Фоминск, во-первых, из-за, 20-го числа, БЭСМ-6 и т.д.); в сокращениях (г-жа); в сжатых перечислениях (аудио- и видеопродукция); в качестве разделителя цифр телефонных номеров; в качестве принудительного знака переноса.  
        Тире (—) [код 2014] отбивается пробелами с обеих сторон. Если тире стоит в начале абзаца (прямая речь), оно отбивается только неразрывным пробелом справа. Применяется: для разделения предложения на две синтаксические группы (Москва — крупный город); для выделения в составе предложения слов, вставляемых для уточнения или пояснения его содержания (Другое устройство — концентратор — я разместил на стене); в обозначении прямой речи; при описании диапазонов значений, если цифры использовались вместе со словами (1941 г. — 1945 г.); в значении «от — до» (Москва — Одесса).  
        Короткое тире (–) [код 2013] пробелами не отбивается. В традиционной типографике не используется. В интернет-верстке применяется для описания диапазонов значений, использующихся без слов (1941–1945, 2F79–C4DA, а–я), ибо при применении обычного тире такие диапазоны становятся трудно воспринимаемыми.  
        Минус (−) [код 2212] применяется для обозначения математических действий (вычитание, декремент), а также для обозначения отрицательных чисел. По правилам, минус, как и другие подобные математические знаки, пробелами не отбивается, однако в случае написания исходного кода программы в целях повышения удобочитаемости это делать просто необходимо. (В этом случае следует отбивать и все остальные математические знаки.)  

   Правила расстановки пробелов      
   Пробелы бывают двух видов — обычные и неразрывные.  
        Обычные пробелы [код 0020] доступны с клавиатуры и ставятся:  
        Между словами (кроме тех случаев, когда они заменяются неразрывными пробелами).  
        После любых знаков препинания.  
        Перед и после тире, если оно стоит в середине предложения. В этом случае тире визуально должно располагаться примерно посередине разделяемых слов, и если его не отбить от предшествующей точки, запятой или многоточия, как советуют нам официальные правила, то оно заметно съезжает влево. При отбивке слева оно немного съезжает вправо, но на гораздо меньшую визуальную величину.  
        Неразрывный пробел [код 00A0] ставится там, где нельзя изменять расстояние между словами при выравнивании текста по ширине и переносить слово на новую строку:  
        После тире, если оно стоит в начале абзаца (чтобы заглавные буквы первых слов располагались на одной прямой).  
        Между инициалами и фамилией (В.В. Иванов).  
        Между сокращением и относящимся к нему словом (г. Москва).  
        После знаков «№», «§» (№ 12, § 124).  
        Между числом и размерностью (25 кВт).  
        Между тройными группами разрядов числа, начиная с пятизначных чисел (25 000).  
        В списках между номером (маркером) списка и первым словом.  
        В таких случаях, как отбивка тире, стоящего в середине предложения, или связка слов в единую конструкцию только лишь для запрета разноса слов по разным строкам, неразрывные пробелы лучше не использовать. Дело в том, что компьютерный текст может быть легко преобразован в другой формат, и тогда при выключке текста по ширине может вылезти неоднородность размера пробелов, что крайне некрасиво. В этом случае лучше использовать способ, описанный в конце раздела о правилах переноса целых слов на новую строку.  
        Пробелы не ставятся:  
        Перед знаками препинания (точка, запятая, двоеточие, точка с запятой, многоточие, вопросительный знак, восклицательный знак).  
        Перед знаками %, °, показателем степени (2), подстрочным индексом (2).  
        Между целой и дробной частью числа 15⁄7, 0,17.  
        После открывающей и перед закрывающей скобками.  
        После открывающей и перед закрывающей кавычками.  
        В сокращениях типа «и т.д., и т.п.» (где используется два и более однобуквенных сокращения), в том числе и между инициалами.  
        В последнем пункте использование пробела даже фиксированной ширины неоправданно далеко разносит отдельно стоящие буквы.  

   Правила переноса целых слов на новую строку      
   Однобуквенные слова, с которых начинается предложение, не должны стоять в конце строки.  
        Тире, стоящее в середине предложения, не должно стоять в начале строки.  
        Не должны разрываться конструкции, описанные в разделе о неразрывном пробеле.  
        Для связки разных элементов предложения в неразрывную конструкцию есть два способа. Можно использовать неразрывный пробел, если расстояние между элементами предложения не должно изменяться при выключке текста по ширине (см. раздел о неразрывных пробелах). В остальных случаях лучше использовать теги , хотя они и не документированы стандартом HTML. Можно применить и стандартизированный приём — создать стиль:  
        .nobr {white-space: nowrap;}  
        и применять его к нужному фрагменту текста:  
        это неразрывная конструкция  

   Правила расстановки точек и запятых      
   Точка не ставится:  
        После заголовков и подзаголовков, отделенных от основного текста.  
        После подписей к рисункам и таблицам.  
        В конце колонтитулов.  
        После сокращений, обозначающих систему мер: кг, м, см, мкм, кг, г, кВт и т.п.  
        В сокращенных обозначениях, использующих знак «/» (тел/факс, б/у).  
        Запятые и точки ставятся после скобок. (Исключение составляет случай, когда в скобки заключено всё предложение.) Если точка стоит до скобки, то после скобки точка уже не ставится.  

   Правила использования кавычек  
   В русской типографике используется 2 вида кавычек. Основные — это «елочки» [коды 00AB и 00BB], а для кавычек внутри кавычек используют „лапки“ [коды 201E и 201C]. Других видов кавычек в русском языке не существует. Единственное исключение — исходные тексты программ и другие подобные структуры, которые публикуются в том виде, в котором они существуют в оригинале. Как правило, такие тексты заключаются в теги  что позволяет отобразить их один к одному в том виде, в котором они находятся в тексте HTML.  
        При выделении всего содержимого кавычек (например, другим цветом), выделяются и сами кавычки (в отличие от скобок, которые в этом случае не выделяются). При написании названия фирмы, кавычки чаще всего расставляются следующим образом: ОАО «ЦНИТИ «Техномаш». Однако более предпочтительно использовать следующую форму: ОАО «ЦНИТИ „Техномаш“»  
        Кавычками выделяются:  
        Цитаты.  
        Слова, употребляемые не в своем обычном значении; слова, употребляемые иронически; слова, впервые предлагаемые или, наоборот, устарелые и необычные и т.п.  
        Кавычками выделяются названия литературных произведений, газет, журналов, предприятий, пароходов и т.п., являющиеся условными наименованиями, например: «Капитал» Маркса; «Война и мир»; газета «Правда»; колхоз «Путь к коммунизму»; шахта «Мария»; линкор «Парижская коммуна».  
        Кавычками не выделяются названия, в состав которых входят слова «имени…», «памяти…», например:  
        Государственный академический театр драмы имени А. С. Пушкина.  
        Больница памяти 26 комиссаров.  

   Еще несколько правил      

   Русский формат даты — «15.10.1970». Дни недели пишутся со строчной буквы.  
        Русский формат времени — «15:32:45»  
        Дробная часть числа в русском тексте отделяется запятой, а не точкой («3,14», а не «3.14»).  
        Абзацы выделяются двумя способами. В литературных произведениях это абзацный отступ, одинаковый у всех абзацев. В сложных технических текстах лучше использовать не абзацный отступ, а увеличенное расстояние между абзацами. Так текст легче воспринимается.
        От блога:
Абзац нужен для отделения одной мысли от другой. Отсутствие отступа говорит, что изложение мысли продолжается. А если Вы изпользуете "увеличенное разстояние", а не отступ, как указывают авторы, то получается, одна мысль накладывается на другую. Возприятие есть, а понимания уже нет.
И этот метод, т.н. НЛП - Нейро-лингвистического программирования изпользуется, например в Библии. Там отступы отсутствуют.
        И те кто пишет "сложные технические тексты" и изпользуют не абзацный отступ, а увеличенное разстояние между абзацами, мягко говоря, хитрят, скрывая за этим никчемность своего труда.

   Полезные ссылки:      
   Русский язык. Портал Грамота.ру.  
        Словари, правила, бесплатная справочная служба русского языка:  
        http://www.gramota.ru/  
        Русские правила постановки тире изложены здесь:  
        http://rus.1september.ru/article.php?ID=200202402