Презентация на тему Списки в HTML. Таблицы в HTML. (Тема 3, 4)

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

Цвет фона
Расстояние между элементами таблицы, между таблицей и другими элементами
Встроенные таблицы и др.

списков:
Маркированные / неупорядоченные. Пример:
Яблоки
Груши
Сливы
Нумерованные /

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

list)
Элементы списка определяются используя тег - обязательный тег

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

• содержимое

…

• содержимое

используется в HTML5 –рекомендуется использовать стили CSS
Атрибут type может

иметь одно из 3-х следующих значений
disc – значение по умолчанию
square
circle

для приготовления эклеров:

Молоко
Масло
Яйца

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

продукты:

• Сахар


• Молоко


• Ваниль

(ordered list)
Элементы списка определяются используя тег - обязательный

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

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

…

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

атрибутов
Type
Start
Reversed – появился в 5-й версии
Compact – не поддерживается

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

предметы:

Сумка
Паспорт
Шапка

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

Кофе

Вода

Сок

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

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

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

3. Иванов


4. Васечкин


5. Петров

Результат:

в убывающем порядке
Данный атрибут не поддерживается брaузерами IE, Safari
Пример:
Список

допущенных людей:

1. Иванов


2. Васечкин


3. Петров

Результат:

иметь размер по меньше
Не поддерживается почти ни одним из

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

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

1. Иванов


2. Васечкин


3. Петров

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

определения этих пунктов -тегом 

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

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

реки

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

гаечный

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

Результат:

в другие списки
Каждый элемент списка может быть типа

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

 и 

, добавить список второго уровня. При этом необходимо аккуратно закрывать все теги.

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

хитрая девичья причёска
отмель реки
Дополнительную информацию

смотри
здесь

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

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

...или

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


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

На пересечении строки и столбца получаются ячейки
Тег -

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

Иван
18


Петров
Петр
19

HTML5 - рекомендуется использование стилей.

cellpadding="10” cellspacing="4">

Фамилия
Имя
Возраст


Иванов

Иван
18


Петров
Петр
19

cellspacing="4">

Результат:

cellspacing="4">

Результат:

несколько тег-ов или
Тег имеет ряд атрибутов,

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

cellpadding="5" cellspacing="4">

Фамилия
Имя
Возраст

valign="middle">
Иванов
Иван
18


Петров
Петр
19

cellpadding="5" cellspacing="4" width="100px">
Личные данные

Фамилия

Имя студента-подростка
Возраст


Иванов
Иван
18


Петров
Петр
19

border=“1" cellpadding="5" cellspacing="4" width="100px">
Личные данные

bgcolor="#aacc22">
Фамилия
Имя студента-подростка
Возраст


ИвановИван18


Петров
Петр
19


Средний возраст:
18.5

одна ячейка будет типа «таблица»

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


100
300



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

размер шрифта. В большинстве не-мобильных браузеров шрифт по умолчанию имеет

размер 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“ пришли из типографии.