Списки в HTML. Таблицы в HTML. (Тема 3, 4)

Содержание

Слайд 2

Определите Список Таблица Ячейка таблицы

Определите
Список
Таблица
Ячейка таблицы

Слайд 3

СОДЕРЖАНИЕ Организация текста используя нумерованные, маркированные списки и списки определений Смешанные

СОДЕРЖАНИЕ

Организация текста используя нумерованные, маркированные списки и списки определений
Смешанные списки
Заголовок таблицы


Определение размеров таблицы, границ и ячеек
Цвет фона
Расстояние между элементами таблицы, между таблицей и другими элементами
Встроенные таблицы и др.
Слайд 4

СПИСКИ В HTML В HTML можно определить 3 вида списков: Маркированные

СПИСКИ В HTML

В HTML можно определить 3 вида списков:
Маркированные / неупорядоченные.

Пример:
Яблоки
Груши
Сливы
Нумерованные / упорядоченные. Пример:
Создать файл
Сохранить файла
Открыть файл в браузере
Списки определений. Пример:
Уклонение от уплаты налогов
непредставление налоговой декларации или иных документов
Онлайн
метод обработки данных с помощью устройства непосредственно подключённого к компьютеру
Слайд 5

НЕУПОРЯДОЧЕННЫЕ СПИСКИ Неупорядоченные списки определяются используя тег (unordered list) Элементы списка

НЕУПОРЯДОЧЕННЫЕ СПИСКИ

Неупорядоченные списки определяются используя тег

    (unordered list)
    Элементы списка определяются

используя тег
  • - обязательный тег для определения элементов списка
    Все браузеры поддерживают эти два тега
    Синтаксис:

    • содержимое

      • …
    • содержимое


    • Слайд 6

    АТРИБУТ «TYPE» ТЕГА Данный атрибут уже не используется в HTML5 –рекомендуется

    АТРИБУТ «TYPE» ТЕГА


      Данный атрибут уже не используется в HTML5

    –рекомендуется использовать стили CSS
    Атрибут type может иметь одно из 3-х следующих значений
    disc – значение по умолчанию
    square
    circle
    Слайд 7

    ПРИМЕР ОПРЕДЕЛЕНИЯ НЕУПОРЯДОЧЕННОГО СПИСКА Неупорядоченные списки Список продуктов необходимых для приготовления

    ПРИМЕР ОПРЕДЕЛЕНИЯ НЕУПОРЯДОЧЕННОГО СПИСКА



    Неупорядоченные списки

    Список продуктов необходимых для приготовления эклеров:


    type="square">
  • Молоко

  • Масло

  • Яйца


    • Для крема необходимы следующие продукты:



    • Сахар

    • Молоко

    • Ваниль




    Слайд 8

    РЕЗУЛЬТАТ

    РЕЗУЛЬТАТ

    Слайд 9

    УПОРЯДОЧЕННЫЕ (НУМЕРОВАННЫЕ) СПИСКИ Упорядоченные списки опредeляются используя тег (ordered list) Элементы

    УПОРЯДОЧЕННЫЕ (НУМЕРОВАННЫЕ) СПИСКИ

    Упорядоченные списки опредeляются используя тег

      (ordered list)
      Элементы списка

    определяются используя тег
  • - обязательный тег для определения списка
    Список можно упорядочить, пронумеротировав элементы (по умолчанию) или упорядочить их с помощью букв
    Все браузеры поддерживают эти два тега
    Синтаксис:

    1. содержимое

      2. …
    2. содержимое


    • Слайд 10

    АТРИБУТЫ ТЕГА Тег оl может иметь несколько атрибутов Type Start Reversed

    АТРИБУТЫ ТЕГА


      Тег оl может иметь несколько атрибутов
      Type
      Start
      Reversed – появился

    в 5-й версии
    Compact – не поддерживается 5-ой версией
    Type - этот атрибут может быть использован в 5-ой версии (не в 4.01, но браузеры его всегда поддерживали)
    Атрибут type имеет 5 значений, используемые для определения типа упорядочивания
    1 (по умолчанию)
    A
    a
    I
    i
    Слайд 11

    АТРИБУТ „TYPE”. ПРИМЕР Список допущенных людей: Иванов Васечкин Петров Необходимые предметы:

    АТРИБУТ „TYPE”. ПРИМЕР

    Список допущенных людей:



    1. Иванов

    2. Васечкин

    3. Петров


    Необходимые предметы:



    1. Сумка

  • Паспорт

  • Шапка


    • Самые востребованные напитки:



    1. Кофе

    2. Вода

    3. Сок


    Слайд 12

    АТРИБУТ „START” Start – указывает, с какого номера, начать упорядочивание списка

    АТРИБУТ „START”

    Start – указывает, с какого номера, начать упорядочивание списка
    Основная форма:

      , где «номер» это числовое значение с которого начинается упорядочивание списка
      Пример:

      Список допущенных людей:



      1. Иванов

      2. Васечкин

      3. Петров


      Результат:
    Слайд 13

    АТРИБУТ „REVERSED” Атрибут „reversed” используется для упорядочивания элементов списка в убывающем

    АТРИБУТ „REVERSED”

    Атрибут „reversed” используется для упорядочивания элементов списка в убывающем порядке
    Данный

    атрибут не поддерживается брaузерами IE, Safari
    Пример:

    Список допущенных людей:



    1. Иванов

    2. Васечкин

    3. Петров


    Результат:
    Слайд 14

    АТРИБУТ „COMPACT” Используется для указания, что элементы списка должны иметь размер

    АТРИБУТ „COMPACT”

    Используется для указания, что элементы списка должны иметь размер по

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

    Список допущенных людей:



    1. Иванов

    2. Васечкин

    3. Петров


    Слайд 15

    СПИСКИ ОПРЕДЕЛЕНИЙ Список определений (в HTML5 – называется списком описаний) определяется

    СПИСКИ ОПРЕДЕЛЕНИЙ

    Список определений (в HTML5 – называется списком описаний) определяется тегом


    Пункты списка определений размечаются тегом 
    , а определения этих пунктов -тегом 

    Все эти три теги являются парными и поддерживаются большинством Веб браузерами
    Слайд 16

    ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ ТЕГОВ DL, DT, DD Слово коса может иметь следующие

    ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ ТЕГОВ DL, DT, DD


    Слово коса может иметь следующие определения:

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

    отмель реки

    Слово ключ тоже имеет несколько значений:

    гаечный

    источник, родник


    Результат:
    Слайд 17

    ВЛОЖЕННЫЕ СПИСКИ Вложенные списки - это списки которые включены в другие

    ВЛОЖЕННЫЕ СПИСКИ

    Вложенные списки - это списки которые включены в другие списки


    Каждый элемент списка может быть типа «список» или может быть любой HTML элемент
    Создать многоуровневый список достаточно просто.
    Сначала нужно создать список первого уровня, а затем внутрь любого элемента этого списка, между тегами 
  •  и 
    • , добавить список второго уровня. При этом необходимо аккуратно закрывать все теги.
    Слайд 18

    ПРИМЕР ВЛОЖЕННОГО СПИСКА Слово коса может иметь следующeе определениe: сельскохозяйственный инструмент

    ПРИМЕР ВЛОЖЕННОГО СПИСКА


    Слово коса может иметь следующeе определениe:

    сельскохозяйственный инструмент

    ...а так

    же



    1. хитрая девичья причёска

    2. отмель реки

    3. Дополнительную информацию смотри
      здесь



    Слово ключ тоже имеет несколько значений:

    обьект используемый при открытии двери

    ...или



    • ключ гаечный

    • источник, родник



    Слайд 19

    РЕЗУЛЬТАТ ПРИМЕРА

    РЕЗУЛЬТАТ ПРИМЕРА

    Слайд 20

    ТАБЛИЦЫ В HTML Таблица состоит из строк и столбцов. На пересечении

    ТАБЛИЦЫ В HTML

    Таблица состоит из строк и столбцов. На пересечении строки

    и столбца получаются ячейки
    Тег - используется для определения HTML таблицы. В элементе «table» можно использовать:
    Тег - используется для определения новой строки таблицы
    Тег

    Без “nowrap”

    Слайд 33

    АТРИБУТЫ ТЕГА „TD”

    АТРИБУТЫ ТЕГА „TD”

    Слайд 34

    ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TD” Личные данные Фамилия Имя студента-подростка Возраст

    ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TD”

    - используется для определения новой ячейки типа заголовок в таблице. По умолчанию текст в такой ячейке пишется жирным шрифтом и выравнивается по центру ячейки
    Тег     		- используется для определения новой стандартной ячейки таблицы. По умолчанию, текст в такой ячейке обычный и выравнивается по левой стороне ячейки
    Эти 4-теги являются парными и поддерживаются большинством Веб браузерами
    Слайд 21

    ПРИМЕР ТАБЛИЦЫ Фамилия Имя Возраст Иванов Иван 18 Петров Петр 19

    ПРИМЕР ТАБЛИЦЫ

















    Фамилия Имя Возраст
    Иванов Иван 18
    Петров Петр 19

    Слайд 22

    АТРИБУТЫ ТЕГА „TABLE” Все атрибуты (кроме „sortable”) не поддерживаются HTML5 - рекомендуется использование стилей.

    АТРИБУТЫ ТЕГА „TABLE”

    Все атрибуты (кроме „sortable”) не поддерживаются HTML5 - рекомендуется

    использование стилей.
    Слайд 23

    ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «TABLE» Фамилия Имя Возраст Иванов Иван 18 Петров Петр 19

    ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «TABLE»

















    Фамилия Имя Возраст
    Иванов Иван 18
    Петров Петр 19

    Слайд 24

    РЕЗУЛЬТАТ ПРИМЕРА

    РЕЗУЛЬТАТ ПРИМЕРА

    Слайд 25

    ИСПОЛЬЗОВАНИЕ АТРИБУТА „RULES” Результат:

    ИСПОЛЬЗОВАНИЕ АТРИБУТА „RULES”


    Результат:
    Слайд 26

    ИСПОЛЬЗОВАНИЕ АТРИБУТА „WIDTH” Результат:

    ИСПОЛЬЗОВАНИЕ АТРИБУТА „WIDTH”


    Результат:
    Слайд 27

    АТРИБУТЫ ТЕГА „TR” Тег tr может содержать один или несколько тег-ов

    АТРИБУТЫ ТЕГА „TR”

    Тег tr может содержать один или несколько тег-ов

    имеет ряд атрибутов, которые не поддерживаются версией 5 - рекомендуется использовать стили
    Существуют атрибуты, которые не поддерживаются большинством браузеров: char, charoff
    Слайд 28

    ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TR” Фамилия Имя Возраст Иванов Иван 18 Петров Петр 19

    ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TR”

    или

    Тег

    bgcolor="#aacc22">














    Фамилия Имя Возраст
    Иванов Иван 18
    Петров Петр 19

    Слайд 29

    РЕЗУЛЬТАТ ПРИМЕРА

    РЕЗУЛЬТАТ ПРИМЕРА

    Слайд 30

    АТРИБУТЫ ТЕГА „TH” Cамые используемые атрибуты тега th:

    АТРИБУТЫ ТЕГА „TH”

    Cамые используемые атрибуты тега th:

    Слайд 31

    ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TH” Личные данные Фамилия Имя студента-подростка Возраст

    ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TH”


















    Личные данные
    Фамилия Имя студента-подростка Возраст
    Иванов Иван 18
    Петров Петр 19

    Слайд 32

    РЕЗУЛЬТАТЫ ПРИМЕРА Личные данные Без “nowrap”

    РЕЗУЛЬТАТЫ ПРИМЕРА

    		 Личные данные
    width="100px">

















    Личные данные
    Фамилия Имя студента-подростка Возраст
    ИвановИван18
    Петров Петр 19
    Средний возраст: 18.5

    Слайд 35

    РЕЗУЛЬТАТ ПРИМЕРА

    РЕЗУЛЬТАТ ПРИМЕРА

    Слайд 36

    ВСТРОЕННЫЕ ТАБЛИЦЫ В следующем примере добавляется строка, в которой одна ячейка

    ВСТРОЕННЫЕ ТАБЛИЦЫ

    В следующем примере добавляется строка, в которой одна ячейка будет

    типа «таблица»









    До 3-х месяцев работы, премия (в леях)
    		Больше 3-х месяцев работы, премия (в леях)
    100 300


    Премии будут на банковской карточке
    Слайд 37

    РЕЗУЛЬТАТ ПРИМЕРА

    РЕЗУЛЬТАТ ПРИМЕРА

    Слайд 38

    ОСНОВНЫЕ ЕДИНИЦЫ ИЗМЕРЕНИЯ В HTML 1px — один пиксель 1em —

    ОСНОВНЫЕ ЕДИНИЦЫ ИЗМЕРЕНИЯ В HTML

    1px — один пиксель
    1em — текущий размер шрифта. В большинстве

    не-мобильных браузеров шрифт по умолчанию имеет размер 16px. Можно брать любые пропорции от текущего шрифта: 2em,0.5em и т.п.
    1% — процент от другого свойства, какого — зависит от того, размер чего ставим. Например, при установке свойства margin-left:1%, процент берётся от ширины родительского блока, т.е. margin-left будет размером в 1% ширины родителя. Лишь при установке font-size процент берётся от текущего размера шрифта. Это отличается от em, который привязан к шрифту всегда.
    Производные единицы измерения: mm, cm, pt и pc:
    Производные от пикселя:
    1mm(мм) = 3.8px
    1cm(см) = 38px
    1pt(пункт) = 4/3 px
    1pc(пика) = 16px
    Такие единицы как сантиметр "cm" и миллиметр "mm" нам всем знакомы, а пункт "pt“ и пика "pc“ пришли из типографии.
    - Предыдущая
    Функциональная анатомия опорно-двигательного аппарата головы, шеи, туловища
    Следующая -
    Тактика профилактики и лечения послеродовых гипотонических кровотечений. Современные возможности и стандарты

    Похожие презентации

    Кроссворд по всей теме информатики
    Lesson 7 guideline. AGILE Scrum Methodology. Основные понятия
    Решение задач на кодирование графической информации
    Операторы ввода и вывода. (Лекция 8)
    Разработка интеллектуальной автоматизированной системы мониторинга окружающей среды (АСМОС)
    Використання інформаційних технологій у фізичній культурі та спорті
    Компьютерные вирусы
    Поисковые информационные системы
    Семейное чтение
    Устройство компьютера 8 класс
    Презентация "Безопасность школьников в интернете" - скачать презентации по Информатике
    Муниципальное общеобразовательное учреждение гимназия №1 Учитель информатики: Скабёлкина М.Ю. Липецк 2011 7 класс
    Понятие алгоритма. Алгоритмы в жизни человека
    Презентация "Методические материалы 1С" - скачать презентации по Информатике
    Системы счисления (Лекция 02)
    Системы автоматизированного проектирования (САПР)
    Основные понятия баз данных
    International Black Sea University. Apple
    Растровое кодирование графической информации
    урок 25_презентации
    Принципы создания, классификация, состав и структура ЭИС
    Электронная таблица Excel. Встроенные функции. (Часть 1)
    八丈島にブロードバンドを推進する会 ブロードバンドは何をもたらすのか
    Общие сведения об ЭВМ
    Введение в дисциплину. Лекция 1. Информационное общество
    Человек и информация Техника безопасности Информация и знания Представление информации Информационные процессы
    Инновационные стратегии
    Файловый сервер Samba
    Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.
    Обратная связь
    Для правообладателей
    Email: Нажмите что бы посмотреть