IT1402: Создание и управление контентом

1234567891011121314151617181920

Материал предоставлен https://it.rfei.ru

Полезная информация

Выводы раздела

Объявления DOCTYPE сообщают браузеру, какая версия языка HTML используется.

Вы можете добавлять в код комментарии, помещая текст между символами <!-- и -->.

Атрибуты id и class позволяют идентифицировать конкретные элементы разметки.

Элементы <div> и <span> позволяют группировать блочные и встроенные элементы.

Элемент <iframe> превращает страницу в окно, за которым могут быть видны другие страницы.

Тег <meta> позволяет предоставить всю информацию о странице.

Для отображения на странице специальных знаков, таких как <, > или ©, используются специальные символы-мнемоники.

Пример

Код примера начинается с объявления DOCTYPE для указания, что страница была написана на языке HTML4. В <head> вы также можете видеть элементы <meta>, описывающие содержание страницы.

Для некоторых элементов установлены атрибуты id и class, указывающие их назначение. Знак защиты авторских прав вставлен в текст с помощью соответствующего символа-мнемоника. Отдельные части страницы сгруппированы с помощью элементов <div>, кроме того, к закрывающим тегам </div> добавлены комментарии, объясняющие, какую именно часть страницы они завершают.

HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
  <meta content="Телефон и адрес Третьяковской галереи, Москва, Россия" name="description">
  <title>Третьяковская галерея, Москва, Россия</title>
</head>

<body>

  <div id="header">
    <h1>Третьяковская галерея</h1>

    <ul>
      <li><a href="index.html">Главная</a></li>
      <li><a href="index.html">Галерея</a></li>
      <li class="current-page"><a href="index.html">Адрес</a></li>
    </ul>
  </div>

<!-- основная часть -->

  <div id="content">

    <p>г. Москва, Лаврушинский переулок, 10</p>

    <p><span class="contact">Телефон:</span>8(499)230-7788, (499)238-1378, (495)951-1362</p>

  <iframe frameborder="0" height="360" marginheight="0" marginwidth="0" scrolling="yes" src="images/gallery.htm" width="300"></iframe>

  </div>

  <!-- конец основной части -->

  <p>© Третьяковская галерея</p>
</body>
</html>

Результат

Тематические ссылки

Специальные символыПроверка знаний: Дополнительная разметка