Тег абзаца. Урок четвертый

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

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

Тег абзаца или тег параграфа «p» позволяет создать на странице web-документа абзац из текста. Если не использовать тег «p», а просто внести текст без оформления, то получится неструктурированный, оформленный некрасиво текст.

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

Вот в итоге, что у нас получилось:

Теги оформления параграфа

Текст оформлен некрасиво. Все собрано в кучу, без какой-либо структуры. Следующий пример, показывает применение тега абзаца «p». Этот тег парный, блочный, но внутри себя может содержать только строчные теги. Блочные теги внутри тега «p» недопустимы, включая и сам тег «p»:

Вот что у нас получилось, кода мы стали использовать абзац:

Тег абзаца p. Уроки HTML для начинающих

Появились две составные части страницы – два абзаца, разделенные отступом. И так бед с каждым новым абзацем. Для нашего первого примера, где тег абзаца не используется можно применить следующее форматирование, используя тег «p»:

Как вы уже заметили, я добавил заголовок к тексту. Я использовал всего три параграфа, и этот вариант как всегда оказался лучше, чем тот, что был раньше. Теперь у нас появились смысловые разделения текста (отступы между абзацами). Вообще, правильно будет говорить, не «абзац», а «параграф», так как тег «p» в переводе с английского означает «paragraph». Далее я буду говорить параграф, так что не путайтесь.

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

Использование тега параграфа

Тег параграфа, как и все другие html-теги, имеет атрибуты. Сейчас мы рассмотрим, наиболее важные атрибуты тега «p».

  • id – определяет универсальный идентификатор, используемый при написании свойств в файле каскадных таблиц стилей (обычно style.css). Имя идентификатора используется только один раз в пределах одного документа
  • class – то же что и id, но может использоваться несколько раз в пределах одного документа
  • title – подсказка, выводимая в окне браузера при наведении курсора мыши на текст параграфа
  • style – определяет набор свойств каскадных таблиц стилей
  • align – определяет выравнивание текста параграфа относительно окна браузера (лево – left, право – right, по центру – center, по ширине — justify)
  • и др. (элементы JavaScript)

Пример использования атрибутов:

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

Вот что получилось у меня:

Атрибуты тега p

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

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

При желании можете выложить сайт в сеть, об этом я писал в одной из своих статей «Как разместить сайт в интернете». Или можете дальше совершенствовать свое творение. Дальше будет интереснее!

P.S. Ну что, понравилась статья? Дальше будет только интереснее! Поэтому смело подписывайтесь на мои обновления блога и будьте в курсе происходящего! Вас ждут интересные и полезные статьи, конкурсы, опросы и много чего интересного! Также можете порекомендовать мои уроки своим друзьям в социальных сетях, кликнув по иконкам социальных сетей, чуть ниже этого сообщения.

Понравилась статья? Поделитесь с друзьями!

0


This Post Has Been Viewed 26 Times

Автор статьи: , дата публикации

Читайте также на моем блоге:

  • Зачем нужен хостинг для сайта
  • Какой хостинг выбрать: платный или бесплатный?
  • Как выбрать хороший хостинг для сайта
  • Выбираем дешевый и качественный хостинг!
  • Конструктор сайтов Юкоз — обзор возможностей
  • Ucoz — создать сайт стало проще!
  • Перед тем как создать блог или сайт
  • Секреты размещения сайта в интернете! Разбираемся, что к чему!
  • Научиться создавать сайты очень просто! Бесплатно! Самому! Сейчас!
  • Программы необходимые каждому блогеру
Читатели оставили 3 комментария к этой статье:
  • Ольга, 19.01.2012 в 06:05

    Здравствуйте Олег. Очень мне полезены ваши уроки. Но вопрос. А где третий урок?

    Или я, что не то открываю?

  • Олег Астанин
    Олег Астанин, 19.01.2012 в 16:21

    Вы меня извините, просто когда публиковал, назвал два разных урока «урок второй, урок второй»...

    А третий урок это вот этот.

  • Irina24.06.2016 в 02:14

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

Добавить комментарий к этой статье:

(обязательно)

(не будет опубликовано, обязательно)

Вебсайт (если есть)

  • Получайте оповещения о выходе новых статей на Ваш E-mail. Для этого, введите Ваш E-mail и нажмите Enter.

  • Рубрики

  • Присоединяйся ко мне!

    Группа
    Вконтакте

    Канал на
    You Tube

    Я на
    Twitter