Скачать презентацию ЛЕКЦІЯ 2 СПИСКИ HTML ПЛАН ЗАНЯТТЯ Скачать презентацию ЛЕКЦІЯ 2 СПИСКИ HTML ПЛАН ЗАНЯТТЯ

2_списки_ HTML.ppt

  • Количество слайдов: 20

ЛЕКЦІЯ № 2 СПИСКИ HTML ЛЕКЦІЯ № 2 СПИСКИ HTML

ПЛАН ЗАНЯТТЯ n План заняття: ¨ ¨ ¨ ¨ ¨ Три типи списків Невпорядковані ПЛАН ЗАНЯТТЯ n План заняття: ¨ ¨ ¨ ¨ ¨ Три типи списків Невпорядковані списки Розмітка невпорядкованого списку Впорядковані списки Розмітка впорядкованого списку Початок впорядкованих списків з числа, відмінного від 1 Списки визначень Вибір типу списку Різниця між списками HTML і текстом Вкладені списки Покроковий приклад Розмітка основної сторінки Додавання деяких стилів Сторінка рецепту Розмітка сторінки рецепту Оформлення сторінки рецепту Резюме Додаткове читання Контрольні запитання

Списки використовуються: для об’єднання в групу пов’язаних об’єктів інформації, щоб полегшити їх асоціювання один Списки використовуються: для об’єднання в групу пов’язаних об’єктів інформації, щоб полегшити їх асоціювання один з одним і читання; n для навігації; n звичайного контенту; n допомагають створити добре структурований, більш доступний, і простий в обслуговуванні документ; n вони надають додаткові елементи для з’єднання зі стилями CSS для чималої кількості стилів оформлення. n

n n Три типи списків: Невпорядкований список – використовується для об’єднання в групу безлічі n n Три типи списків: Невпорядкований список – використовується для об’єднання в групу безлічі пов’язаних об’єктів без певного порядку. Впорядкований список – використовується для об’єднання в групу безлічі пов’язаних об’єктів у певному порядку. Список визначень – використовується для виведення пар ім’я/значення, таких як терміни та їх визначення, або час і події.

Неупорядкований список Розмітка неупорядкованого списку n 1<ul> n 2 <li> Java </li> n 3<li> Неупорядкований список Розмітка неупорядкованого списку n 1

    n 2
  • Java
    • n 3
  • Java. Script
    • n 4
  • HTML
    • n 5
  • PHP
    • n 6
Відображення в браузері n Java. Script n HTML n PHP

Упорядкований список Розмітка нумерованого списку: n <ol> n <li> Зібрати інгредієнти </li> n <li> Упорядкований список Розмітка нумерованого списку: n

    n
  1. Зібрати інгредієнти
    2. n
  2. Змішати інгредієнти
    3. n
  3. Помістити інгредієнти у форму для випічки
    4. n
  4. Випікати в духовці протягом години
    5. n
  5. Вийняти з духовки
    6. n
  6. Дати постояти десять хвилин
    7. n
  7. Подати
    8. n
Відображення у браузері: 1 Зібрати інгредієнти 2 Випікати в духовці протягом години 3 Вийняти з духовки 4 Подати 5 Помістити інгредієнти у форму для випічки 6 Дати постояти десять хвилин 7 Змішати інгредієнти

Впорядковані списки можуть виводитися за допомогою однієї з кількох цифрових або алфавітних систем – Впорядковані списки можуть виводитися за допомогою однієї з кількох цифрових або алфавітних систем – тобто з літерами або числами. ¨ ¨ ¨ Букви ascii нижнього регістра (a, b, c …) Букви ascii верхнього регістру (A, B, C …) Класичні грецькі літери нижнього регістру: (, β, γ …) Числа Десяткові числа (1, 2, 3 …) Десяткові числа з ведучим нулем (01, 02, 03 …) Римські числа в нижньому регістрі (i, iii …) Римські числа у верхньому регістрі (I, III …) Традиційна грузинська нумерація (an, ban, gan …) Традиційна вірменська нумерація (mek, yerku, yerek …)

Початок впорядкованих списків з числа, відмінного від 1: атрибут start n n n n Початок впорядкованих списків з числа, відмінного від 1: атрибут start n n n n

  1. Зібрати інгредієнти
  2. Змішати інгредієнти
  3. Помістити інгредієнти у форму для випічки

Перш ніж помістити інгредієнти у форму для випічки, нагрійте духовку до 180 градусів за Цельсієм/350 градусів за Фаренгейтом, щоб бути готовим до наступного кроку

  1. Випікати в духовці протягом години
  2. Вийняти з духовки
  3. Дати постояти десять хвилин
  4. Подати
n Це призводить до наступного результату: 1. Зібрати інгредієнти 2. Змішати інгредієнти 3. Помістити інгредієнти у форму для випічки Перш ніж помістити інгредієнти у форму для випічки, нагрійте духовку до 180 градусів за Цельсієм / 350 градусів за Фаренгейтом, щоб бути готовим до наступного кроку 4. Випікати в духовці протягом години 5. Вийняти з духовки 6. Дати постояти десять хвилин 7. Подати

СПИСКИ ВИЗНАЧЕНЬ: з’єднують певні об’єкти та їх визначення у списку. <dl> <dt> Термін </dt> СПИСКИ ВИЗНАЧЕНЬ: з’єднують певні об’єкти та їх визначення у списку.

Термін
Визначення терміна
Java Об'єктно-орієнтована мова програмування, випущена компанією Sun Microsystems у 1995 році як основний компонент платформи Java n Java. Script Мова програмування для створення інтерактивних Web-сторінок Це не те ж саме, що Java Містить елементи на webсторінці, які шикуються в ієрархічну структуру. n

Різниця між списками HTML і текстом n n n Якщо буде потрібно змінити порядок Різниця між списками HTML і текстом n n n Якщо буде потрібно змінити порядок елементів списку в упорядкованому списку, то ви просто переміщаєте їх у коді HTML. Якщо числа будуть написані вручну, то доведеться все переглянути і змінити число кожного елемента, щоб виправити порядок – що досить нудно, принаймні! Використання списку HTML дозволяє правильно оформити стиль списку. Якщо використовується просто великий текст, то виявиться значно важче оформити стиль окремих елементів яким-небудь більш-менш корисним чином. Використання списку HTML створює для контенту відповідну семантичну структуру, а не просто “спископодібний” візуальний ефект. Це має важливі переваги, оскільки дозволяє зчитувачам екрану повідомити користувачів з вадами зору, що вони читають список, а не просто прочитати плутану суміш тексту та чисел.

Вкладені списки n n n <ol> <li>Глава один <ol> <li>Розділ один</li> <li>Розділ два</li> <li>Розділ Вкладені списки n n n

  1. Глава один
    1. Розділ один
    2. Розділ два
    3. Розділ три
  2. Глава два
  3. Глава три
Вигляд у браузері: 1. Глава один А. Розділ один Б. Розділ два С. Розділ три 2. Глава два 3. Глава три

Покроковий приклад n n n <h 2>Recipes</h 2> <ul> ¨ <li>Cakes n <ul> ¨ Покроковий приклад n n n Recipes

Вигляд у браузері: Вигляд у браузері:

Додавання деяких атрибутів та стилів Тип маркера ненумерованого списку вказується атрибутом TYPE. <UL TYPE=DISK>- Додавання деяких атрибутів та стилів Тип маркера ненумерованого списку вказується атрибутом TYPE.

    - заповнений кружечок (за замовчуванням)
      - квадрат
        - коло n

n Спосіб нумерування елементів нумерованого списку вказується атрибутом TYPE: 1 — арабськими цифрами (за n Спосіб нумерування елементів нумерованого списку вказується атрибутом TYPE: 1 — арабськими цифрами (за замовчуванням); a — рядковими літерами латиниці; A — великими літерами латиниці; i — рядковими римськими числами; I — великими римськими числами.

CSS СТИЛі ДЛЯ СПИСКіВ. Властивість list-style-type. Маркований список (тег ul) circle кружок disc диск CSS СТИЛі ДЛЯ СПИСКіВ. Властивість list-style-type. Маркований список (тег ul) circle кружок disc диск square квадрат n Нумерований список (тег ol) decimal арабскі числа upper-roman римскі числа upper-alpha або upper-latin n заголовочні латинскі букви lower-alpha або ower-latin строкові латинскі букви

n n n . name /* ім’я CSS стиля */ { list-style-type: decimal; } n n n . name /* ім’я CSS стиля */ { list-style-type: decimal; } p> Приклад списку, маркованого арабскими числами:

  1. Элемент 1
  2. Элемент 2
  3. Элемент 3

Властивість list-style-image. name /* ім’я CSS стиля */ n { n list-style-image: url(шлях до Властивість list-style-image. name /* ім’я CSS стиля */ n { n list-style-image: url(шлях до файла з зображенням); n } n Оформлення визначення жирним шрифтом: n

Контрольні запитання 1. Які існують три типи списків HTML? 2. Коли повинен використовуватися кожен Контрольні запитання 1. Які існують три типи списків HTML? 2. Коли повинен використовуватися кожен тип списку? Як вибрати один із них? 3. Як вкладати списки один в одного? 4. Чому для стильового оформлення списків потрібно використовувати CSS, а не HTML?