HTML первые шаги - урок 2 - теги p, div и их различие. Тег br

admin друпал drupal

В прошлом уроке мы создали свой первый html документ, а это значит что вы уже знаете, что пишем html-код в текстовом редакторе, а все изменения смотрим через браузере, обновляя страницу (обычно кнопкой F5).

Итак, в этом уроке мы продолжим работать с текстом и будем использовать теги для оборачивания текста span, p, div. Также мы рассмотрим тег br.

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h1>Мой первый HTML-документ</h1>
    
  </body>
</html>

Это наш код с которым мы будем дальше работать.

Давайте добавим такие вот строки.

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h1>Мой первый HTML-документ</h1>
    <p>Первая строка в теге P</p>
	<p>Вторая строка в теге P</p>
	<div>Первая строка в теге DIV</div>
	<div>Вторая строка в теге DIV</div>
  </body>
</html>

Если вы откроете документ в браузере, то увидите, что теги p отображают предложения на разных строках, но есть и разница. У меня браузер задал по умолчанию для тега P отступ сверху и снизу. А для тега div прилепил строки друг к другу. Дело в том что p это тег параграфа текста, а тег div это тег блока, области. То есть если нам нужен тег для текста, то мы будем использовать тег P, а если нужно выделить определенную область, например чтобы сделать для этой области заливку цветом или сделать границы, то мы используем тег DIV.

Если на сайте есть текст, то он ДОЛЖЕН быть в теге p или h1-h6, если конечно этот текст не является служебным, то есть не служит для оформления страницы. Таким образом текст должен выглядеть так:

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h1>Мой первый HTML-документ</h1>
	<div>
          <p>Первая строка в теге P</p>
	  <p>Вторая строка в теге P</p>
	</div>
  </body>
</html>

Таким образом у нас такая последовательность body>div>p . Запомните, не должно быть тега div внутри тега p, body>p>div неправильно.

Давайте еще посмотрим как переносить текст на другую строку. Бывает что наш параграф текста огромный, то у нас есть выбор или разбить текст на насколько параграфов, или добавить тег переноса строки br. Тег <br /> одиночный тег, по этому косую черту мы ставим перед знаком больше.

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h1>Мой первый HTML-документ</h1>
	<div>
      <p>Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1989—1991 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег <TABLE>, несколько раз использованный для форматирования страницы, которую вы на даный момент читаете, предназначен для создания в документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы. С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическом оформлении.</p>
	</div>
  </body>
</html>

Строка стала слишкой большой если мы разобьем ее в текстовом документе, то на html это никак не скажется:

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h1>Мой первый HTML-документ</h1>
	<div>
          <p>Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1989—1991 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). 
	  HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов. 
	  Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения).
	  В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег <TABLE>, несколько раз использованный для форматирования страницы, которую вы на даный момент читаете, предназначен для создания в документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы. 
	  С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическом оформлении.</p>
	</div>
  </body>
</html>

Это нас не спасет в браузере ничего не измениться и тут к нам на помощь приходит тег <br />. Давайте в конце каждой строчки поставим его.

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h1>Мой первый HTML-документ</h1>
	<div>
      <p>Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1989—1991 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария).<br /> 
	  HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки.<br />
	  HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов.<br /> 
	  Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ.<br />
	  Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста.<br />
	  Мультимедийные возможности были добавлены позже.<br />
	  Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения).<br />
	  В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов).<br />
	  Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег, несколько раз использованный для форматирования страницы, которую вы на даный момент читаете, предназначен для создания в документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы.<br />
	  С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическом оформлении.</p>
	</div>
  </body>
</html>

Теперь браузер понимает, что нужно переносить строку, ему об этом сообщает тег <br />.

Мы также можем разбить текст на несколько абзацев, давайте используем теги p.

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h1>Мой первый HTML-документ</h1>
	<div>
      <p>Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1989—1991 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария).<br /> 
	  HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки.<br />
	  HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов.<br /> 
	  Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ.<br />
	  Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста.<br />
	  Мультимедийные возможности были добавлены позже.<br />
	  </p>
	  <p>
	  Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения).<br />
	  В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов).<br />
	  Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег, несколько раз использованный для форматирования страницы, которую вы на даный момент читаете, предназначен для создания в документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы.<br />
	  С течением времени, основная идея платформонезависимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическом оформлении.</p>
	</div>
  </body>
</html>

Обновите страницу в браузере и вы увидите, что текст будет разбит на два абзаца.

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

Войти, используя Loginza Google Account Yandex Mail.ru Vkontakte Facebook
(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.