Сибирский федеральный университет
Опубликован: 01.09.2010 | Доступ: свободный | Студентов: 4000 / 417 | Оценка: 4.08 / 3.78 | Длительность: 11:06:00
Лекция 2:

Текстовые элементы HTML

Секция, список

Секция (div - division)

Не несёт никакой логической нагрузки и используется, как правило, в качестве строительного элемента при вёрстке страницы. Здесь важно провести следующее разделение между всеми элементами тела HTML-документа: строчные ( inline ) элементы могут занимать часть строки, а блочные ( block ) всегда занимают целое число строк. Большинство HTML-элементов - строчные; к блочным относятся заголовок, абзац, секция, список и таблица (а также некоторые другие элементы, которые будут рассмотрены особо).

Таким образом, с точки зрения представления на экране секция ничем не отличается от абзаца. Главное различие состоит в том, что в абзац нельзя поместить другой абзац (и вообще блочный элемент), а в секцию разрешается помещать любые другие элементы, включая секции. Поэтому в качестве универсального контейнера обычно используется именно секция. При проектировании макета веб-страницы обычно мыслят блоками: блок колонтитула, блок меню, блок основного содержимого и т.д. Как правило, каждый блок реализуется при помощи секции либо списка. Подробно использование блоков рассмотрено в лекциях "Позиционирование средствами CSS" и "Табличная и бестабличная вёрстка"

Список (ol - ordered list, ul - unordered list)

Используется для нумерации или маркировки последовательности элементов. В следующем примере показаны основные приёмы разметки списков.

ol {
      list-style-type: upper-roman;
    }
  ...
  <p>
    Первый список:</p>
  <ol>
    <li>Пункт</li>
    <li>Ещё один пункт</li>
    <li>Последний пункт</li>
    <li>Вложенный список:
      <ul>
        <li>Пункт</li>
        <li>Ещё один пункт</li>
        <li>Последний пункт</li>
      </ul>
    </li>
  </ol>
Листинг 2.8. Списки и их оформление стилями
Вложенный список

Рис. 2.8. Вложенный список
ul li {
      list-style-type: disc;
      list-style-image:url(write.gif);
      padding-left:10px;
    }
  ...
  <ul>
    <li>Пункт</li>
    <li>Ещё один пункт</li>
    <li>Последний пункт</li>
  </ul>
Листинг 2.9. Изображение в качестве маркера
Изображение в качестве маркера

Рис. 2.9. Изображение в качестве маркера

Как видно из примера, пункты в списке должны обрамляться элементами li ( list item - элемент списка), которые, в свою очередь, погружаются в элемент ol или ul.

Специфические свойства элементов ol и ul:

  • list-style-type Указывает вид маркера или номера.
    Упражнение.

    В примере "Выбор маркера" попробуйте использовать следующие значения этого свойства:
    • circle
    • disc
    • decimal
    • square
    • lower-alpha
    • lower-roman
    • upper-alpha
    • upper-roman
    • none
  • list-style-image Позволяет вместо маркера из стандартного набора использовать любое изображение. При этом необходимо учитывать, что размер изображения должен быть подходящим (в CSS нет средств для его изменения), а на тот случай, если загрузка изображений в браузере отключена, рекомендуется указывать и какое-либо значение свойства list-style-type.
  • list-style-position Предоставляет выбор способа размещения маркера снаружи ( outside ) или внутри текста ( inside ).

    Специфический атрибут элемента ol - start, указывающий начальный номер списка, например: <ol start="10">.

    Большинство общих свойств CSS также применимо к спискам - как к элементу ol или ul (списку в целом), так и к элементу li (отдельным элементам списка).
    Упражнение. Задайте списку: а) рамки (сначала для списка в целом, затем для его пунктов); б) фоновый цвет; в) отступ слева. Пользуясь псевдоселектором first-letter, измените цвет и размер начальных букв пунктов списка.
  • list-style Соединяет объявления свойств list-style-type, list-style-image и list-style-position в одном сокращённом объявлении:

    list-style: [list-style-type] [list-style-image] [list-style-position]

    Например: list-style: square inside;

Таблица (table)

Назначение этого элемента очевидно, и он является самым сложным по структуре и возможностям форматирования. Подробно он рассмотрен в "Таблицы" .

Юрий Шах
Юрий Шах

Профессиональный веб-дизайн: Введение в современные веб-технологии
Самостоятельная работа 4

"3. Создание внешней таблицы.

Теперь создайте таблицу с двумя строками. Во второй строке создайте две ячейки - в первую переместите таблицу цифр, а во вторую - таблицу знаков."

Как в ячейку <td> поместить таблицу? Таблица же сама состоит из ячеек. Исходя из задания следует, что <td> может быть родителем для <td>, но это противоречит правилам HTML?
Если не прав - поправьте.
Также прошу разъяснить, как именно выполнить занное условие - поместить в табличную ячейку таблицу цифр, а в другую ячейку - таблицу знаков? 

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?