Тізімдер мен кестелер

Тізімдер мен кестелер:
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
Таблицы, вложенные друг в друга
Заголовок таблицы
...
...
...
...
rowspan="2" valign="top" width="120">Строки объединены
Вложенные таблицы
Строка I, Ячейка A
Строка I, Ячейка B
Строка II, Ячейка A
Строка II, Ячейка B
Строка III, Ячейка A
Строка III, Ячейка B
Обычная ячейка, строка 3
Вложенная таблица
Всего 2 строки
Строка 4, правая ячейка rowspan="2" valign="top" width="120">Строки объединены

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

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

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

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

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

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

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

Форма

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

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

Элементы формы
ASP
JavaScript
PHP type="checkbox" name="html" value="yes" checked>HTML
ASP
JavaScript
PHP
HTML

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

Элементы формы
ASP
JavaScript
PHP
selected>HTML
...
size="5"
size="8"
закрыт
открыт 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)
<br> p</div></h3></h3><img src="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/472064/slide-33.jpg" onerror="this.setAttribute(&#39;data-error&#39;, 1)" width="720" height="540" alt="Информация о стиле в заголовке: элемент STYLE - Метод вложения (embeding) p" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_480x360/imagesDir/jpg/472064/slide-33.jpg 480w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_720x540/imagesDir/jpg/472064/slide-33.jpg 720w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_960x720/imagesDir/jpg/472064/slide-33.jpg 960w, /_ipx/f_webp&amp;q_80&amp;fit_contain&amp;s_1440x1080/imagesDir/jpg/472064/slide-33.jpg 1440w" class="slides-image"><!----><div class="slides-content">{<br> color:red; <br> background:#cccccc<br> }<br>
Здесь применен стиль методом вложения.
Другой абзац.
селектор
selector
правило
rule

Метод связывания (linking) - Внешние таблицы стилей
p {
color:red;
background:#cccccc
}
...
style.css
index.html ... href="style.css">
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 с
контекстным селектором