Основы HTML и CSS. Списки и таблицы презентация

Списки и таблицы:
Структурирование информации на WEB-странице при помощи списков. Типы списков
Таблица и ее элементы
Правила задания размеров для таблицы и ее ячеек. Объединение ячеек. Типичные ошибки при работе с таблицами
Использование таблиц. Макетирование web-страницы с помощью таблиц
Использование вложенных таблиц
Приемы использования таблиц на web-странице

Маркированный список
(unordered list)
первый элемент
второй элемент
...
последний элемент

Тип маркеров

Нумерованный список
(ordered list)
первый элемент
второй элемент
...
последний элемент

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

С о д е р ж а н и е
Слайд 8
(1,1)
(1,2)
(2,1)
(2,2)
(3,1)
(3,2)
(Не) Простая таблица

Атрибуты элемента TABLE

Атрибуты элемента TR

Атрибуты элемента TD (TH)

Объединение ячеек
Столбцы объединены
Строки объединены
Обычная
ячейка, строка 2
Обычная ячейка, строка 3
Строка 4, левая ячейка
Строка 4, правая ячейка ячейка, строка 2

Создаем заголовок таблицы
...
Атрибуты заголовка:
align = top|bottom|left|right
valign = top|bottom
Слайд 14
Схема отступов и объединения ячеек
width
colspan
rowspan
Слайд 15
Лабораторная работа
Использование colspan и rowspan
Слайд 16
Таблицы, вложенные друг в друга
Заголовок таблицы
...
...
...
...
Вложенные таблицы
Строки объединены
Строка I, Ячейка A
Строка I, Ячейка B
Строка II, Ячейка A
Строка II, Ячейка B
Строка III, Ячейка A
Строка III, Ячейка B
Обычная ячейка, строка 3
Вложенная таблица
Всего 2 строки
Строка 4, правая ячейка

Схема отступов и объединения ячеек
width
colspan
rowspan

Лабораторная работа
Использование colspan и rowspan

Таблицы, вложенные друг в друга

Группируем таблицу по блокам (HTML 4.0)
Может быть много tbody блоков. Но все разделы должны содержать одинаковое количество столбцов
...
...
...
...
...
... ...

Группируем таблицу по колонкам
...
Атрибуты colgroup:
align = center|left|right
valign = bottom|middle|top
width = число|процент
span = число

Группируем таблицу по колонкам

Домашняя работа
Объединение ячеек и вложенные таблицы

Форма

Атрибуты элемента FORM

Элементы формы value="Пароль">
name или(и) id?
Логин
Логин

Элементы формы
ASP
JavaScript value="yes">PHP
HTML
ASP
JavaScript
PHP
HTML

Элементы формы
ASP
JavaScript
PHP
value="html" selected>HTML
...
size="5"
size="8"
закрыт
открыт value="html" selected>HTML
...

Элементы формы
ASP
JavaScript
PHP
value="html" selected>HTML
...
size="5"
size="8"
закрыт
открыт value="html" selected>HTML
...

Элементы формы
Книги
ASP
JavaScript
PHP
HTML
<элемент tabindex="1">
<элемент accesskey="q">

Атрибут type

Атрибут type html 5

Атрибут type html 5 поддержка

Лабораторная работа

Методы определения
CSS — Cascading Style Sheets (каскадные таблицы стилей) — это средство, позволяющее задавать различные визуальные свойства HTML-элементам.
http://www.w3.org/TR/CSS21/cover.html
Методы определения таблицы стилей в документе HTML:
Связывание(linking)- Внешние таблицы стилей
Вложение(embeding) - Информация о стиле в заголовке: элемент STYLE
Встраивание(inline)- Атрибут style
color:red; background:#cccccc
свойство
property
значение
value
декларация
declaration

Встроенная информация о стиле (inline)
style="color:red; background:#cccccc"
Атрибут style определяет информацию о стиле одного элемента
Обычный текст
К этому абзацу применен стиль. Встроенная информация о стиле.
атрибут тега
декларация
декларация

Информация о стиле в заголовке: элемент STYLE - Метод вложения (embeding) type="text/css">
p {
color:red;
background:#cccccc
}
Здесь применен стиль методом вложения.
Другой абзац.
селектор
selector
правило
rule

Метод связывания (linking) - Внешние таблицы стилей
p {
color:red;
background:#cccccc
}
...
style.css
index.html
second.html

Каскадирование
<br> div{color:green}<br>
...
Применен связанный стиль
Применен вложенный стиль
Применен встроенный стиль
p{color:red}
div{color:red}

Каскадирование
<br> div{color:green}<br>
...
Применен связанный стиль
Применен вложенный стиль
Применен встроенный стиль
p{color:red}
div{color:red}

Единицы измерения размеров
em - ems, высота используемого элементом шрифта
ex - x-height, ширина буквы "х" испольуемого элементом шрифта
px - pixels, пикселы
in - inches, дюймы
cm - centimeters, сантиметры
mm - millimeters, миллиметры
pt - points, пункты(1pt = 1/72in = 0,35mm)
pc - picas, пики(1pc = 12pt)
% - относительные значения(например +20%)

Цвет
название цвета (red, green, white...)
#00cc00 - шестнадцатиричное представление
#0c0 - сокращенное шестнадцатиричное представление
rgb(0,240,125) - в формате RGB
rgb(0%,80%,25%) - в формате RGB, относительное
url("название файла")
Пример: {background: url("file.gif")}

Селекторы типа элемента и класса
div{color:red}
div.green{color:green}
.blue{color:blue}
Обычный div
Div с классом green
Aбзац с классом green
Абзац с классом blue
Div с классом blue
H3 с классом blue
элемент
элемент + класс
класс
Обычный div
Div с классом green
Aбзац с классом green
Абзац с классом blue
Div с классом blue
H3 с классом blue

Другие селекторы
#back{color:red}
div#back{color:black}
div b{color:green}
td td td{color:blue}
Div с id = back
Div с
контекстным
селектором