<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Группирование элементов HTML-страницы</title>
</head>
<body>
<h1>Velit Phasellus</h1>

<div style="font-family:Tahoma, sans-serif; color:#0000FF">
 
 <h2>Lorem ipsum</h2>
 
 <div style="font-size:90%; color:#000000">
  <p>Lorem ipsum dolor sit amet consectetuer Nullam odio enim neque dui. Velit Phasellus amet ut magnis quis ac pretium pretium in pretium. Eget Vestibulum Ut ligula tellus ipsum tempus metus consectetuer magna vitae. Mauris ridiculus eros.</p>
  <p>Elit Phasellus pede elit tincidunt nibh sociis iaculis commodo ut pede. Egestas netus nibh In pulvinar Fusce tempus Morbi condimentum volutpat malesuada. Auctor nascetur amet interdum eros Nam In massa Nulla Aenean odio. </p>
 </div>
 
 <h2>Condimentum interdum</h2>
 
 <div style="font-size:80%; text-align:center; color:#000000">
  <p>Condimentum <span style="color:#FF0000">interdum tincidunt <span style="text-decoration:underline; color:#000000">Sed interdum massa</span> leo quis nec feugiat orci</span>. Augue risus neque justo felis leo pede sit nulla Nunc Donec. Ligula et Sed metus faucibus sapien cursus sed.</p>
  <p>Sed aliquet Nulla ornare at Donec vel Lorem Lorem Pellentesque hac. Laoreet hendrerit mauris sit lorem Aenean tristique Curabitur Sed ipsum sed. Lacus suscipit vitae aliquet risus Quisque turpis Vestibulum wisi Donec consequat. Consectetuer Curabitur et pede dolor.</p>
 </div>
 
</div>
 
</body>
</html>

Да, в этом задании вам надо было хорошо подумать. Если додумались — молодцы! Кстати, случаи, когда разные теги переопределяют одни и те же свойства, как у нас здесь вышло с цветом — обычная практика в HTML.

Теоретическая часть.

  1. Что такое блочные и встроенные типы элементов и что значит «один тег содержит другой»?
  2. К какому типу относятся данные теги и какие типы они могут содержать: <P>, <DIV>, <STRONG>, <BLOCKQUOTE>, <BODY>, <BR>?
  3. Что значит выравнивание содержимого HTML-элементов и к каким типам тегов его можно применять?
  4. Что такое атрибут style, почему мы часто используем именно его вместо других атрибутов и сколько раз его можно указывать в одном теге?

Ответы:

  1. Блочные элементы — теги, которые создают впереди и после себя перевод строки в начало.

    Встроенные (inline, уровня строки) элементы — теги, располагающиеся всегда на одной строке, и только если доступной ширины строки не хватает — происходит ее перевод на следующую.

    Говорят, что «один тег содержит другой», если один из них находится внутри другого на первом уровне вложенности и никак иначе! Например:

    <тег1>
 <тег2><тег3>...</тег3></тег2>
</тег1>

    Здесь <ТЕГ1> содержит только <ТЕГ2>, а <ТЕГ2> содержит только <ТЕГ3>.

  2. <P> — блочный, может содержать встроенные теги; <DIV> — блочный, может содержать оба типа; <STRONG> — встроенный, может содержать встроенные теги; <BLOCKQUOTE> — блочный, может содержать блочные теги; <BODY> — не относится ни к одному из этих типов, создает тело документа и является уникальным на странице, может содержать блочные теги; <BR> — встроенный тег, который не может содержать никакие теги, так как является пустым.

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

  4. Style — это самый обычный атрибут HTML-тегов, а нужен он для использования стилей (CSS). Мы применяем его вместо устаревших атрибутов тегов или (в сочетании с тегами <DIV> и <SPAN>) вообще вместо полностью устаревших тегов, таких как <STRIKE> или <U>. И это правильно!

    Атрибут style, как и вообще любой атрибут, внутри одного тега можно указывать только один раз. Если же к элементу нужно применить несколько стилей, то их можно записывать, разделяя точкой с запятой (;). Кстати, обратите внимание, что точку с запятой надо ставить не между каждым отдельным словом внутри style, а именно между отдельными стилями. Например:

    <div style="font-family:Tahoma, sans-serif; color:#0000FF; background:#FFCCCC">

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

Вернуться в урок → Перейти к следующему уроку