Создание списков HTML с различными стилями

Введение

В этом практическом занятии (лабораторной работе) участники изучат создание и стилизацию HTML-списков, уделяя особое внимание различным типам списков и их атрибутам. Практическое занятие (лабораторная работа) проводит учащихся по построению различных структур списков, включая нумерованные списки с цифровой и алфавитной нумерацией, неупорядоченные списки с настраиваемыми стилями маркеров и описательные списки с несколькими записями.

Участники начнут с настройки стандартной структуры HTML5-документа и постепенно создадут сложные примеры списков, изучая, как использовать теги, такие как <ol>, <ul>, <li> и <dl>, чтобы создать семантические и визуально привлекательные макеты списков. Путем экспериментирования с атрибутами списков и вложенными структурами списков студенты приобретут практические навыки в дизайне HTML-списков и поймут, как улучшить организацию содержимого веб-страницы.

Настройка структуры HTML - документа

На этом этапе вы узнаете, как создать базовую структуру HTML-документа для демонстрации списков. HTML-документы имеют стандартную структуру, которая служит основой для веб-контента.

Откройте WebIDE и перейдите в каталог ~/project. Создайте новый файл с именем lists.html, щелкнув правой кнопкой мыши в проводнике файлов и выбрав "Новый файл".

Теперь давайте создадим базовую структуру HTML5-документа. Введите следующий код в файл lists.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Lists Example</title>
  </head>
  <body>
    <!-- We'll add our lists here in the next steps -->
  </body>
</html>

Разберем основные компоненты этой HTML-структуры:

<!DOCTYPE html> объявляет, что это HTML5-документ
<html lang="en"> - корневой элемент с указанием языка
<head> содержит метаданные о документе
<meta charset="UTF-8"> обеспечивает правильную кодировку символов
<meta name="viewport"> помогает в создании отзывчивого дизайна
<title> задает заголовок страницы, отображаемый во вкладке браузера
<body> - это место, где будет размещено основное содержимое

Пример вывода в веб-браузере покажет пустую страницу с заголовком "HTML Lists Example" во вкладке браузера.

Примечание: Узнайте больше о Просмотре HTML-файлов в WebIDE.

Создание упорядоченных списков с цифровой и алфавитной нумерацией

На этом этапе вы узнаете, как создавать нумерованные списки в HTML с использованием тегов <ol> (ordered list - нумерованный список) и <li> (list item - элемент списка). Нумерованные списки автоматически нумеруют свои элементы и могут быть настроены с различными стилями нумерации.

Откройте файл lists.html, который вы создали на предыдущем этапе. Внутри тега <body> добавьте следующий код, чтобы создать различные типы нумерованных списков:

<h2>Numeric Ordered List (Default)</h2>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

<h2>Alphabetic Ordered List</h2>
<ol type="a">
  <li>First alphabetic item</li>
  <li>Second alphabetic item</li>
  <li>Third alphabetic item</li>
</ol>

<h2>Uppercase Alphabetic Ordered List</h2>
<ol type="A">
  <li>First uppercase item</li>
  <li>Second uppercase item</li>
  <li>Third uppercase item</li>
</ol>

<h2>Roman Numeral Ordered List</h2>
<ol type="i">
  <li>First roman numeral item</li>
  <li>Second roman numeral item</li>
  <li>Third roman numeral item</li>
</ol>

Разберем различные типы списков:

По умолчанию нумерованный список использует цифровую нумерацию (1, 2, 3)
type="a" создает строчную алфавитную нумерацию (a, b, c)
type="A" создает прописную алфавитную нумерацию (A, B, C)
type="i" создает строчную римскую нумерацию (i, ii, iii)

Пример вывода в веб-браузере покажет четыре различных нумерованных списка с соответствующими стилями нумерации.

alt text

Реализация неупорядоченного списка с различными стилями маркеров

На этом этапе вы узнаете, как создавать неупорядоченные списки в HTML с использованием тегов <ul> (unordered list - неупорядоченный список) и <li> (list item - элемент списка). Неупорядоченные списки используют различные стили маркеров для отображения элементов списка без цифровой или алфавитной нумерации.

Откройте файл lists.html и добавьте следующий код после предыдущих нумерованных списков:

<h2>Default Unordered List (Bullet Points)</h2>
<ul>
  <li>First bullet point</li>
  <li>Second bullet point</li>
  <li>Third bullet point</li>
</ul>

<h2>Disc Marker Style</h2>
<ul type="disc">
  <li>Disc marker item</li>
  <li>Another disc marker item</li>
  <li>Third disc marker item</li>
</ul>

<h2>Circle Marker Style</h2>
<ul type="circle">
  <li>Circle marker item</li>
  <li>Another circle marker item</li>
  <li>Third circle marker item</li>
</ul>

<h2>Square Marker Style</h2>
<ul type="square">
  <li>Square marker item</li>
  <li>Another square marker item</li>
  <li>Third square marker item</li>
</ul>

Познакомимся с различными стилями маркеров неупорядоченных списков:

По умолчанию неупорядоченный список использует твердые маркеры в виде точек
type="disc" создает твердые круглые маркеры (по умолчанию)
type="circle" создает пустые круглые маркеры
type="square" создает твердые квадратные маркеры

Пример вывода в веб-браузере покажет четыре различных неупорядоченных списка с соответствующими стилями маркеров.

alt text

Создание настраиваемого описательного списка с несколькими записями

На этом этапе вы узнаете, как создавать описательные списки в HTML с использованием тегов <dl> (description list - описательный список), <dt> (description term - термин описания) и <dd> (description details - детали описания). Описательные списки идеально подходят для отображения пар "ключ - значение" или терминов с их пояснениями.

Откройте файл lists.html и добавьте следующий код после предыдущих примеров списков:

<h2>Programming Languages Description List</h2>
<dl>
  <dt>HTML</dt>
  <dd>A markup language for creating web pages</dd>

  <dt>CSS</dt>
  <dd>A styling language used to design web page appearance</dd>

  <dt>JavaScript</dt>
  <dd>A programming language that adds interactivity to web pages</dd>
</dl>

<h2>Contact Information Description List</h2>
<dl>
  <dt>Name</dt>
  <dd>John Doe</dd>

  <dt>Email</dt>
  <dd>john.doe@example.com</dd>

  <dt>Phone</dt>
  <dd>+1 (555) 123-4567</dd>
</dl>

Основные моменты о описательных списках:

<dl> определяет весь описательный список
<dt> представляет термин или название
<dd> предоставляет описание или детали
Можно использовать несколько тегов <dd> для одного тега <dt>
Полезно для словарей, метаданных и представления пар "ключ - значение"

Пример вывода в веб-браузере покажет два описательных списка с терминами и соответствующими им описаниями.

alt text

Экспериментируйте с атрибутами списков и вложенными структурами списков

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

Откройте файл lists.html и добавьте следующий код после предыдущих примеров списков:

<h2>Nested Unordered List</h2>
<ul>
  <li>
    Main Category 1
    <ul>
      <li>Subcategory 1.1</li>
      <li>Subcategory 1.2</li>
    </ul>
  </li>
  <li>
    Main Category 2
    <ul>
      <li>Subcategory 2.1</li>
      <li>Subcategory 2.2</li>
    </ul>
  </li>
</ul>

<h2>Nested Ordered List with Start Attribute</h2>
<ol start="5">
  <li>
    First main item
    <ol type="a">
      <li>First nested item</li>
      <li>Second nested item</li>
    </ol>
  </li>
  <li>
    Second main item
    <ol type="a">
      <li>Third nested item</li>
      <li>Fourth nested item</li>
    </ol>
  </li>
</ol>

<h2>Mixed Nested List</h2>
<ul>
  <li>
    Web Development
    <ol>
      <li>HTML</li>
      <li>
        CSS
        <ul>
          <li>Flexbox</li>
          <li>Grid</li>
        </ul>
      </li>
      <li>JavaScript</li>
    </ol>
  </li>
</ul>

Основные концепции, продемонстрированные в примерах:

Вложенные списки можно создать, поместив новый список внутри элемента списка
Списки могут быть смешанными (неупорядоченный список внутри упорядоченного или наоборот)
Атрибут start позволяет изменить начальное число упорядоченного списка
Атрибут type можно использовать для изменения стиля нумерации или маркеров в вложенных списках

Пример вывода в веб-браузере покажет три различных вложенных структуры списков с различными стилями и иерархиями.

alt text

Резюме

В этом практическом занятии (лабораторной работе) участники научились создавать и стилизовать списки HTML с использованием различных методов. Практика начала с создания стандартной структуры документа HTML5, где были показаны важнейшие элементы, такие как теги DOCTYPE, html, head и body, с акцентом на правильное использование метаданных и кодировки символов.

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