Основы html и css списки и таблицы

Маркированный список (unordered list)

• Сравните

• Компьютер состоит:
  • Системный блок
  • Монитор
  • Клавиатура
  • Мышь

Тип маркеров

•  

Начальный тег	Вид маркера на экране
	диск
	oкружность
	диск
	квадрат

• Язык разметки гипертекста HTML

• Маркированный список

• Изменить тип маркера можно с помощью
• атрибута TYPE начального тега списка
  • TYPE
  • =
  • square ()
  • disk (●)
  • round или circle (o)
  • По умолчанию

  Нумерованный список (ordered list)

  •  
  • Сравните
  • 2. первый элемент
    4. второй элемент
    5. ...
    7. последний элемент
  • Компьютер состоит:
    2. Системный блок
    4. Монитор
    6. Клавиатура
    8. Мышь
  • Язык разметки гипертекста HTML
  • Нумерованный список
  • Изменить тип нумерации можно с помощью
  • атрибута TYPE начального тега списка
  • TYPE
  • =
  • a (a,b,c,d…)
  • A (A,B,C,D…)
  • 1 (1,2,3,4…)
  • I (I,II,III,IV…) i ii iii iv
  • По умолчанию

  Типы нумерации

  Начальный тег	Вид номера на экране
  	Нумерация выполняется арабскими цифрами (1, 2, 3,...)
  	Нумерация выполняется арабскими цифрами (1, 2, 3,...)
  	Нумерация выполняется прописными буквами (A, B, C,...)
  	Нумерация выполняется строчными буквами (a, b, c,...)
  	Нумерация выполняется большими римскими цифрами (I, II, III,...)
  	Нумерация выполняется малыми римскими цифрами (i, ii, iii,...)
  	Что получится?

  • Язык разметки гипертекста HTML
  • Комбинированный список
  • Это вложение разных видов списков:
  • нумерованного списка в маркированный
  • маркированного списка в нумерованный
  • маркированного списка в маркированный
  • нумерованного списка в нумерованный
  • …………………
  • 1. ………
  • 2. ……..
  • …………………
  • 1. ………….
  • 2. ………….
  • …………………
  • 1. ……
  • 2. ……
  • …………………
  • 1. ……
  • 2. ……
  • I. …………………
  • ………
  • ……..
  • II. …………………
  • ………….
  • ………….
  • Язык разметки гипертекста HTML
  • Комбинированный список
  • …………………
  • a. ………
  • b. ……..
  • …………………
  • a. ………….
  • b. ………….
  • Тест
  • html
  • таблица состоит
  • язык разметки гипертекста
  • тег
  • столбцов и строк
  • списка

  Списки определений (definition list)

  • Теги

  •  – определяют HTML списки определений.
  •  – определяют определяемые термины.
  •  – определяют опрeделения.

  • Отдел маркетинга

    Данный отдел занимается продвижением товаров и услуг

  • Финансовый отдел
    Данный отдел занимается всеми финансовыми операциями

  HTML списки определений

  • Теги

  •  – определяют HTML списки определений.
  •  – определяют определяемые термины.
  •  – определяют опрeделения.
  • Результат

  • GIF
  • Формат графических файлов, широко применяемый при создании сайтов.
  • GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области,
  • при этом сохраняя детали изображения.
  • JPEG
    …

  Вложенные (смешанные) списки

  • Смешанный список

  • НОВОСТЬ ДНЯ
  • Сегодня идет дождь
  • Дождь будет идти весь день
  • НОВОСТЬ НОЧИ
  • Ночью будет идти дождь
  • Завтра начнется новый день
  • список
  • Гиперссылка – строка с подчеркиванием для перехода
  • Абсолютные указывают внешний интернет-ресурс
  • Узнай больше
  • Относительная ссылка
  • Интерактивная анкета
  • Внутренние ссылки
  • Сначала создаются точки перехода(якоря)
  • Контакты
  • Ссылка на электронный адрес
  • Text
  • Учебное задание:
  • Созданный смешанный список (с помощью определений)
  • Многоуровневый список
  • Относительную и внутреннюю ссылки