Какой тег создает абзац в документе. Форматирование текста в HTML
Читайте также
Любой текст имеет свою уникальную структуру: книги разделены на части, разделы и главы, газеты и журналы имеет отдельные рубрики и подзаголовки, которые, в свою очередь, включают фрагменты текста, также имеющие собственную структуру: абзацы, отступы и пр.
Текст, размещаемый на веб-страницах, не является исключением, он также должен иметь логическую, понятную каждому пользователю, структуру. Ведь от того, насколько удобно и просто будет восприниматься текст на странице, зависит многое: прежде всего, какое впечатление сложится у посетителя о вашем сайте.
Для создания таких структурных единиц текста, как абзацы, в HTML-документах используется тег
, который разделяет фрагменты текста вертикальным отступом (до и после абзаца добавляется пустая строка).
Примечание: по умолчанию расстояние между абзацами равно 1em (em - это единица измерения равная высоте шрифта), то есть расстояние между абзацами напрямую зависит от размера шрифта.
Для изменения отступов между абзацами, без изменения размера шрифта, можно воспользоваться CSS свойством margin .
Не забывайте про закрывающий тег
Большинство браузеров будут отображать HTML документ корректно, даже если вы забыли про закрывающий тег.
Абзац
Другой абзац
Этот код будет работать в большинстве браузеров, но не полагайтесь на это. Забытый закрывающий тег может привести к непредвиденным результатам или ошибкам.
Красная строка
Что такое красная строка? Согласно определению, это начальная строка абзаца, которую раньше выделяли красным цветом (откуда и пошло название). До того, как было изобретено книгопечатание, книги писали от руки – главу или часть текста, первое слово или букву писали красной краской. Так появилось понятие «писать с красной строки» - это означает начало новой мысли, главы или части.
Однако при создании веб-страниц оформление красной строки используется достаточно редко, несмотря на то, что она позволяет с гораздо большим удобством воспринимать текст в визуальном плане, что для традиционного читателя достаточно важно – не всем удобно читать электронный вариант текста.
Для добавления красной строки к вашим абзацам нужно воспользоваться CSS свойством text-indent , которое позволяет поставить отступ перед первым предложением:
Попробовать »
В примере, приведенном выше, первая строка каждого абзаца на странице будет начинаться с отступа в 25px. Пример, расположенный ниже, демонстрирует, как можно задать красную строку только для определенного абзаца на странице.
Как и в любом настоящем искусстве, в хороших текстах нет мелочей, к которым некоторые относят и красную строку, считая, что употребление ее не так уж и важно. Однако надо понимать, что любая запятая несет в себе как эстетическую, так и смысловую нагрузку, а не только является данью правилам грамматики – это касается и форматирования.
Попробовать »Примечание: не обязательно устанавливать отступ размером в 25px, вы можете выбрать оптимальный размер отступа сами, также с помощью свойства text-indent возможно сделать выступающую над остальным текстом строку, для этого нужно задать отрицательное значение для свойства (например: -30px).
В прошлом уроке про документа мы рассмотрели шесть уровней заголовков, которые может включать в себя html-страница, узнали правила использования тега «h1-h6». В этом уроке мы рассмотрим, тег абзаца , который будет придавать нашему тексту правильное оформление на странице.
В следующем посте я расскажу вам, как сделать ваш сайт еще более красивее ( , чтобы его не пропустить). Мы научимся создавать стильный фон. Этот пос я разобью на две части, в первой части мы поработаем с фотошопом, а во второй поиграемся с каскадными таблицами стилей.
Тег абзаца или тег параграфа «p» позволяет создать на странице web-документа абзац из текста. Если не использовать тег «p», а просто внести текст без оформления, то получится неструктурированный, оформленный некрасиво текст.
При использовании тега абзаца текст приобретает более или менее читабельный вид, что делает страницу более привлекательной. Давайте рассмотрим документ, в котором не используется тег параграфа:
XHTML
Сегодня, я проснулся как всегда рано. Утреннее солнце пробивалось сквозь занавески моего окна. Потянувшись, я пошел на кухню. Заварил себе зеленый чай, положил две ложки сахара и сел в мягкое кресло перед кухонным окном. На дворе стояла осень. Мне нравится это время года, потому что я считаю, что осень - самая романтическая пора года. После того, как допил чай, я взял мобильный и позвонил своей любимой, пожелать ей доброе утро. Как я и думал, она еще спала. Мы мило побеседовали и договорились встретиться сегодня днем, пока светит солнце и на улице тепло. Время пролетело незаметно. И вот мы уже вместе, обедаем в местном кафе: кушаем, болтаем, флиртуем друг с другом. Нам хорошо вместе. Я люблю свою девушку и на меня тоже. Думаем о создании семьи...
|
Вот в итоге, что у нас получилось:
Текст оформлен некрасиво. Все собрано в кучу, без какой-либо структуры. Следующий пример, показывает применение тега абзаца «p». Этот тег парный, блочный, но внутри себя может содержать только строчные теги. Блочные теги внутри тега «p» недопустимы, включая и сам тег «p»:
XHTML
Абзац первый. Для того, чтобы текст на ваших страницах выглядел читабельно используется тег абзаца «p». Этот текст обрамлен в парный тег «p», что позволяет браузеру распознать текст как абзац.
Абзац второй. Это второй абзац, идущий после первого. Этот абзац будет иметь отступ, от первого абзаца. Пример использования абзацев можете просмотреть на рисунке ниже.
Абзац первый. Для того, чтобы текст на ваших страницах выглядел читабельно используется тег абзаца «p». Этот текст обрамлен в парный тег «p», что позволяет Браузеру распознать текст как абзац. Абзац второй. Это второй абзац, идущий после первого. Этот абзац будет иметь отступ, от первого абзаца. Пример использования абзацев можете просмотреть на рисунке ниже.
|
Вот что у нас получилось, кода мы стали использовать абзац:
Появились две составные части страницы – два абзаца, разделенные отступом. И так бед с каждым новым абзацем. Для нашего первого примера, где тег абзаца не используется можно применить следующее форматирование, используя тег «p»:
XHTML
Солнечное утро
Сегодня, я проснулся как всегда рано. Утреннее солнце пробивалось сквозь занавески моего окна. Потянувшись, я пошел на кухню. Заварил себе зеленый чай, положил две ложки сахара и сел в мягкое кресло перед кухонным окном. На дворе стояла осень.
Мне нравится это время года, потому что я считаю, что осень - самая романтическая пора года. После того, как допил чай, я взял мобильный и позвонил своей любимой, пожелать ей доброе утро. Как я и думал, она еще спала.
Мы мило побеседовали и договорились встретиться сегодня днем, пока светит солнце и на улице тепло. Время пролетело незаметно. И вот мы уже вместе, обедаем в местном кафе: кушаем, болтаем, флиртуем друг с другом. Нам хорошо вместе. Я люблю свою девушку и на меня тоже. Думаем о создании семьи...
Солнечное утроСегодня, я проснулся как всегда рано. Утреннее солнце пробивалось сквозь занавески моего окна. Потянувшись, я пошел на кухню. Заварил себе зеленый чай, положил две ложки сахара и сел в мягкое кресло перед кухонным окном. На дворе стояла осень. Мне нравится это время года, потому что я считаю, что осень - самая романтическая пора года. После того, как допил чай, я взял мобильный и позвонил своей любимой, пожелать ей доброе утро. Как я и думал, она еще спала. Мы мило побеседовали и договорились встретиться сегодня днем, пока светит солнце и на улице тепло. Время пролетело незаметно. И вот мы уже вместе, обедаем в местном кафе: кушаем, болтаем, флиртуем друг с другом. Нам хорошо вместе. Я люблю свою девушку и на меня тоже. Думаем о создании семьи...
|
Как вы уже заметили, я добавил заголовок к тексту. Я использовал всего три параграфа, и этот вариант как всегда оказался лучше, чем тот, что был раньше. Теперь у нас появились смысловые разделения текста (отступы между абзацами). Вообще, правильно будет говорить, не «абзац», а «параграф», так как тег «p» в переводе с английского означает «paragraph». Далее я буду говорить параграф, так что не путайтесь.
Вот примерно то, что должно было у вас получиться после использования тега параграфа :
Тег параграфа, как и все другие html-теги, имеет атрибуты. Сейчас мы рассмотрим, наиболее важные атрибуты тега «p».
- id – определяет универсальный идентификатор, используемый при написании свойств в файле каскадных таблиц стилей (обычно style.css). Имя идентификатора используется только один раз в пределах одного документа
- class – то же что и id, но может использоваться несколько раз в пределах одного документа
- title – подсказка, выводимая в окне браузера при наведении курсора мыши на текст параграфа
- style – определяет набор свойств каскадных таблиц стилей
- align – определяет выравнивание текста параграфа относительно окна браузера (лево – left , право – right , по центру – center , по ширине — justify)
- и др. (элементы JavaScript)
Пример использования атрибутов:
XHTML
Если навести курсор мыши на этот текст, то вылезет подсказка!!!
Этот параграф выровнен по левому краю
Этот параграф выровнен по правому краю
Этот параграф выровнен по центру
Этот параграф имеет универсальный идентификатор, который ссылается на свойства прописанные в файле CSS и может использоваться только один раз на странице
Этот параграф имеет класс MAIN-P, может быть назначен несколько раз на странице, в отличие от ID-идентификатора
Этот параграф весь подчеркнутый, т.к. использует каскадные стили, прописанные напрямую этому параграфу с помощью атрибута тега STYLE. В значении атрибута STYLE я прописал, чтобы параграф был весь подчеркнутый: UNDERLINE
s
Этот параграф весь подчеркнутый, т.к. использует каскадные стили, прописанные напрямую этому параграфу с помощью атрибута тега STYLE. В значении атрибута STYLE я прописал, чтобы параграф был весь подчеркнутый: UNDERLINE s |
Здравствуйте! Продолжим рассматривать основы программирования сайтов. Трудно представить хоть один из них, в коде которого не встречался бы тег абзаца. Сегодня рассмотрим, как его правильно прописывать и описание нескольких дополнительных действий с текстом.
Пример
Давайте на примере посмотрим, как сделать абзац в HTML коде.
Одно или несколько предложений.
Обязательным условием является наличие открывающего и закрывающего тега. Кстати, всё можно делать непосредственно в блокноте, просто потом нужно будет сохранить файл в соответствующем формате.
Форматирование
Довольно часто подмечаю, что люди интересуются, как можно сделать красную строку. Для конкретного абзаца делается очень просто.
Включение таких параметров приведет к отступу первой строки на 15 пикселей от левого края. Если такие изменения следует применить для всех тегов P, то в файле CSS, который подключается к страницам сайта, можно прописать код, показанный ниже.
Лично я обычно не делаю красные строки при редактировании кода в блокноте или другом редакторе.
Я просто включаю отступы между текстовыми блоками. Для этого в CSS нужно прописать специальные параметры.
p{margin-bottom:25px;}
Если использовать данную конструкцию, то после каждого абзаца появится отступ в 25 пикселей.
На самом деле параметров для работы с HTML и различными стилями очень много. Я описал лишь некоторые из них, одной статьей все охватить весьма затруднительно.
Хотите узнать больше? Возможно, окажутся полезными мои прошлые публикации на следующие темы:
На этом статью буду завершать и, думаю, теперь сделать абзацы в HTML и красиво их оформить при помощи специальных тегов будет не сложно.
Желаю вам огромных успехов в освоение программирования. Кстати, не задумывались о заработке на информационных некоммерческих сайтах? Просто шикарную информацию предоставил специального для своих читателей в .
Нормальная работа и финансы в сети являются ключевыми темами этого блога. С отдельными перспективами в сети можете ознакомиться прямо сейчас из опубликованных материалов. Я продолжаю подготовку и публикацию нового, а главное реально полезного контента. Подписывайтесь на обновления Workip на свою электронную почту. До связи.
Здравствуйте, уважаемые читатели блога ! В этой статье речь пойдет о тегах форматирования текста . Яркими примерами являются выделение текста жирным или курсивом. Также мы рассмотрим влияние некоторых тегов на внутреннюю оптимизацию сайта и правила их написания. Про то, вы можете прочитать в приведенной статье. Кстати, вы можете встретить подобные элементы оформления текста вы можете во многих текстовых редакторах, например в Ворде.
Теги разделяются на 2 вида: блочные и строчные. При использовании первых, вы сможете изменить содержание части текста (строки, отдельные фрагменты или же слова), а вторые являются . Теги форматирования, которые мы рассмотрим в этой статье, преимущественно строчные.
Правила и порядок написания тегов
Вы уже знаете, что такое открывающий и закрывающий теги. Если нет, то прочтите статью, приведенную в самом начале этого материала. Если коротко, то теги бывают двух видов: одиночные (например, перенос на новую строку) и контейнерные (парными). Так вот, все теги форматирования текста являются парными . Это означает, что любой элемент имеет открывающий и закрывающий теги, а выделяемый фрагмент должен быть помещен между ними. Например, правильное выделение фразы будет выглядеть так: Выделенный фрагмент
Когда браузер обработает этот фрагмент, то вы увидите вот такой текст: Выделенный фрагмент. Кстати, в RSS ленте все теги не отображаются ().
Главное при написании тегов — не забывайте их закрывать. Иначе весь текст на странице будет выделен жирным (в примере с тегом ). Но бывают такие случаи, когда нужно выделить определенный фрагмент и жирным и курсивом одновременно. Но тега, выполняющего это действие, не существует. Выход из этой ситуации один: использовать два тега одновременно. В каком порядке их использовать значения не имеет. Поэтому, написав текст с тегами так:
Выделенный фрагмент
или вот так:
Выделенный фрагмент
Вы все равно получите Выделенный фрагмент курсивом и жирным одновременно. Однако, предпочтительно использовать первый вариант, потому что изначально он был единственным и правильным. Также не стоит забывать о том, что каждый браузер может обрабатывать теги по-разному (), в зависимости от настроек. А теперь перейдем к самим тегам форматирования
Выделение текста жирным и курсивом — теги , , и
Самые популярные теги форматирования текста — выделение его жирным и курсивом . Обычно их используют для придания важности какому-либо фрагменту. Первый случай служит для выделения фрагмента, содержащего полезную информацию или ключевые слова. Курсив применяется в тех же целях, что и жирный текст, но информация менее важна, потому что курсив на фоне основного текста менее заметен, нежели жирный текст.Рассмотрим для начала выделение текста жирным . Для этого действия используется два тега — и . Разницы во внешнем виде нет. Хотя, учитывая то, что любой браузер может интерпретировать каждый элемент по-своему, вы сможете увидеть какие-либо отличия. Вот как выглядит текст в тегах и в уже обработанном браузером виде:
Текст в тегах strong
Текст в тегах b
А вот как выглядят две данные строчки в исходном коде страницы:
Текст в тегах strong Текст в тегах b
Ту же ситуацию мы можем наблюдать в случае с тегами выделения курсивом и . Попытайтесь найти отличия между двумя примерами:
Текст в тегах em
Текст в тегах I
А вот исходный код:
Текст в тегах em Текст в тегах I
Итак, рассмотренные теги выделения жирным и курсивом фактически не отличаются, но зачем же тогда нам, например, тег если есть ? Ведь последний содержит всего один символ (не считая скобок) и, следовательно, легче в написании. А все дело в том, что теги и влияют на . Если вы будете окружать этими тегами ключевые слова, то это благоприятно скажется на продвижении сайта.Главное не переусердствовать — максимум в тексте должно быть 5% жирного текста в теге , и столько же и курсива в теге .
Если же вы хотите просто выделить в тексте какой-либо момент, то используйте тег или . Вообще, я думаю, что поисковики тоже рассматривают текст в этих тегах как более важный, но на внутреннюю оптимизацию они все-таки оказывают меньшее влияние, нежели и .
Теги выделения текста чертой — , и
Теперь рассмотрим несколько тегов, которые используют черту в оформлении текста. Самый известный вам из текстовых редакторов — тег
или подчеркивание
. Влияние на ранжирование этот тег не оказывает (насколько я знаю), а вот выделить какой-либо текст и заострить на нем внимание поможет. Пример использования данного тега я привел чуть выше.
Еще два схожих по назначению тега - и . Оба выполняют функцию зачеркивания текста. Использовать этот тег можно в любых ситуациях: если вы обновляете документ (а точнее его часть), то можно перечеркнуть старое и добавить новое; если вы собираетесь написать нечто, отходящее от темы материала; что-то не соответствующее морально-этическим нормам.
Отличия же этих двух тегов заключаются только в их написании , вследствие чего предпочтительней использовать первый, т.к. во-первых удобнее писать, а во-вторых, на вашей странице будет находиться меньшее количество HTML-кода, а поисковики это любят.
Тег и атрибуты — параметры шрифта текста
Теперь рассмотрим тег, который не используется без атрибутов. С помощью его вы сможете задать параметры для определенного фрагмента текста. Вообще, сейчас предпочтительней использовать (каскадные таблицы стилей), т.к. с помощью них можно сильно сократить весь HTML код страницы. Итак, рассмотрим тот самый тег . Для него существует всего три атрибута:
- face — сам шрифт. Например, Arial, Courier или Verdana. Можно перечислить несколько, т.к. не у всех пользователей имеется обширный набор шрифтов, а написав несколько в атрибуте face, браузер сможет выбрать, какой использовать, а точнее — какой присутствует в системе;
- size — атрибут, указывающий размер текста. Может быть выражен как в условных единицах, так и в пикселях;
- color — цвет текста. Данный атрибут можно использовать как в HTML-кодах цветов, так и в словесных. Первые имеют вид #FFFFFF (где F — любая цифра или буква от A до F), а вторые записываются простыми словами (например, red — красный).
Так выглядит текст в теге с использованием каждого атрибута:
Этот текст имеет размер 6px
Этот текст красного цвета Этот текст имеет шрифт Arial Этот текст красного цвета и размера 5pxА вот что вы увидите, после обработки написанного кода: 
Блочные элементы оформления текста — заголовки -, абзац
, абзац
Напоследок мы рассмотрим блочные элементы, которые используются практически в каждом документе. Это теги заголовков и абзаца. Рассмотрим первое. Заголовки бывают 6-ти видов и каждый имеет свой тег. Каждый вид носит лишь свой порядковый номер и записывается с помощью тегов
, ,..., . Вот как выглядят все заголовки в обработанном виде:
. Вот как выглядят все заголовки в обработанном виде:
Цифра после слова заголовок соответствует цифре в теге
А теперь поговорим про тег выделения абзаца
Функция данного тега заключается в отделении текста между от другого такого же текста пустой строкой. Если посмотреть исходный код какого-либо документа, то вы можете увидеть следующее:
В зеленых прямоугольниках один абзац, в красных — другой. А вот как этот код выглядит после обработки браузером (стрелочка указывает на пустую строку):
В итоге мы получаем довольно заметное отделение одного абзаца от другого, что идет на пользу — чтение становится более удобным.
Вот и подошла к концу статья про теги форматирования документа . Их намного больше, нежели я описал в этом материале. Просто о некоторых нужно рассказать довольно много, вследствие чего им будет посвящены отдельные статьи с полным обзором.!