Презентация, доклад на тему Урок 5. HTML абзац и красная строка

Абзацы Любой текст имеет свою уникальную структуру: книги разделены на части, разделы и главы, газеты и журналы имеет отдельные рубрики и подзаголовки, которые, в свою очередь, включают фрагменты текста, также имеющие собственную структуру: абзацы, отступы и

Слайд 1HTML: Абзац и красная строка
В создании презентации использованы контент сайта puzzleweb.ru

HTML: Абзац и красная строкаВ создании презентации использованы контент сайта puzzleweb.ru

Слайд 2Абзацы
Любой текст имеет свою уникальную структуру: книги разделены на части, разделы

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

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

Абзац


Абзацы Любой текст имеет свою уникальную структуру: книги разделены на части, разделы и главы, газеты и журналы

Слайд 3Примечание: по умолчанию расстояние между абзацами равно 1em (em - это

единица измерения равная высоте шрифта), то есть расстояние между абзацами напрямую зависит от размера шрифта.
Для изменения отступов между абзацами, без изменения размера шрифта, можно воспользоваться CSS свойством margin.
Не забывайте про закрывающий тег
Большинство браузеров будут отображать HTML документ корректно, даже если вы забыли про закрывающий тег.

Абзац

Другой абзац


Этот код будет работать в большинстве браузеров, но не полагайтесь на это. Забытый закрывающий тег может привести к непредвиденным результатам или ошибкам.
Примечание: по умолчанию расстояние между абзацами равно 1em (em - это единица измерения равная высоте шрифта), то

Слайд 4Красная строка
Что такое красная строка? Согласно определению, это начальная строка абзаца,

которую раньше выделяли красным цветом (откуда и пошло название). До того, как было изобретено книгопечатание, книги писали от руки – главу или часть текста, первое слово или букву писали красной краской. Так появилось понятие «писать с красной строки» - это означает начало новой мысли, главы или части.
Однако при создании веб-страниц оформление красной строки используется достаточно редко, несмотря на то, что она позволяет с гораздо большим удобством воспринимать текст в визуальном плане, что для традиционного читателя достаточно важно – не всем удобно читать электронный вариант текста.
Для добавления красной строки к вашим абзацам нужно воспользоваться CSS свойством text-indent, которое позволяет поставить отступ перед первым предложением:
Красная строка Что такое красная строка? Согласно определению, это начальная строка абзаца, которую раньше выделяли красным цветом

Слайд 5


p { text-indent: 25px;

}




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




p { text-indent: 25px; }

Слайд 6В примере, приведенном выше, первая строка каждого абзаца на странице будет

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


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


Примечание: не обязательно устанавливать отступ размером в 25px, вы можете выбрать оптимальный размер отступа сами, также с помощью свойства text-indent возможно сделать выступающую над остальным текстом строку, для этого нужно задать отрицательное значение для свойства ( например: -30px).
В примере, приведенном выше, первая строка каждого абзаца на странице будет начинаться с отступа в 25px. Пример,

Слайд 7HTML: Перенос строки
В ходе создания HTML-документа может возникнуть необходимость переноса строки

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

Слайд 8


Заглянула

осень в сад -
Птицы улетели.
За окном с утра шуршат
Жёлтые метели.


Обратите внимание, что браузер игнорирует ваше форматирование текста




Заглянула осень в сад -Птицы улетели.

Слайд 9В таких случаях самым лучшим выходом из ситуации будет использование тега


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

, а разве это было бы удобнее?!
Примите во внимание, что краткое описание придумано и используется не из-за лени, а для повышения эффективности, за счет более легкого чтения кода. И в самом деле, спустя некоторое время, проведенное за чтением HTML-кода, вы увидите, что такие элементы легче воспринимаются и запоминаются.
В таких случаях самым лучшим выходом из ситуации будет использование тега (вставляет перенос строки). Он является одним

Слайд 10

Это обычный
абзац с разры-
вом строки


Это обычный абзац с разры-вом строки

Что такое shareslide.ru?

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


Для правообладателей

Яндекс.Метрика

Обратная связь

Email: Нажмите что бы посмотреть