Назначение элементов header, nav, article, aside, footer

Содержание

Слайд 2

Контрольные вопросы

Назначение элементов header, nav, article, aside, footer
Назначение элемента meta
Что такое

Контрольные вопросы Назначение элементов header, nav, article, aside, footer Назначение элемента meta
кодировка?
Зачем нужны символьные подстановки?
Отличие линейных и блочных тегов
Отличие физического и логического форматирования
Основные форматы изображений для браузеров
Как сделать маркированный / нумерованный список?
Как сделать многоуровневый список?
Основные стили списков и их элементов

Слайд 3

Таблицы

Табличное представление информации используется в тех случаях, когда необходимо вывести на страницу

Таблицы Табличное представление информации используется в тех случаях, когда необходимо вывести на
большое количество данных, характеризуемых однотипным набором данных. Примерами таких данных могут быть список фильмов, или каталог товаров Citrus/Rozetka/OLX.
Таблицы строятся с помощью элементов следующих типов:
table - собственно контейнер, содержащий таблицу. По стандарту, этот элемент может содержать только элементы группировки строк (thead, tfoot и tbody).
tbody - тело таблицы. Внутри этого элемента должны размещаться только строки таблицы.
tr - служит для создания строк таблицы. В строке могут размещаться элементы данных таблицы (td) или элементы заголовка (th)
td - элемент данных таблицы
th - элемент заголовка таблицы

Слайд 4

Пример кода

Пример кода

Слайд 5

Результат

Как вы сами можете убедиться, полученная таблица выглядит не совсем так, как

Результат Как вы сами можете убедиться, полученная таблица выглядит не совсем так,
хотелось бы. У привычных нам таблиц есть по крайней мере рамки! Добиться "нормального" внешнего вида нам помогут атрибуты элемента table:
∙ border - данный атрибут определяет наличие и толщину рамки таблицы. Если border имеет значение больше 0, то таблица, а так же каждая ее непустая ячейка, приобретет рамку. Кроме того, толщина внешней рамки таблицы определяется присвоенным значением.
∙ width - ширина всей таблицы. При этом, ширина каждого столбца таблицы подбирается автоматически на основании длины значений ячеек, составляющих данный столбец. Ширину таблицы можно указывать в пикселях или в процентах. В последнем случае сразу после числа ставится знак "%".
∙ cellspacing - размер внешнего отступа от границ ячеек до соседних ячеек или рамки таблицы.
∙ cellpadding - размер внутреннего отступа от границ ячеек до содержимого.


Слайд 6

Добавляем шапку

Добавляем шапку

Слайд 7

Выравнивание данных

Выравнивать данные таблицы можно для каждой конкретной ячейки, для всей строки

Выравнивание данных Выравнивать данные таблицы можно для каждой конкретной ячейки, для всей
и для группы строк или столбцов (
, , ). Кроме того, данные можно выравнивать по горизонтали и вертикали. Для горизонтального выравнивания используется атрибут align, который может принимать следующие значения:
∙ left - по левой стороне ячейки
∙ center - по правой стороне ячейки
∙ right - по центру ячейки
∙ justify - по ширине ячейки.
Для вертикальоного выравнивания используется атрибут valign. Значения этого атрибута могут быть следующими:
∙ top - по верху ячейки
∙ middle - по центру ячейки
∙ bottom - по низу ячейки.
Для какого бы элемента вы ни указали атрибуты align или valign ( или группе), выравнивание происходит относительно границ каждой ячейки. Указав выравнивание для элемента , мы задаем выравнивание для всех ячеек данной строки. Аналогичным образом и для групп строк или столбцов.


Слайд 8

Размеры ячеек

Для ячеек


Слайд 9

Объединение ячеек

В некоторых задачах приходится строить таблицы, ячейки которых растянуты на несколько

Объединение ячеек В некоторых задачах приходится строить таблицы, ячейки которых растянуты на
столбцов или строк. Чаще всего это относится к ячейкам заголовков, реже к ячейкам данных таблицы. Ниже представлен пример такой таблицы:
Управление объединением ячеек происходит с помощью атрибутов элементов
, ,
, мы расположим соответственно только его содержимое. Задав выравнивание для всей строки
Тенет (16+) и можно указать размеры, используя стилевые свойстваРазмеры ячеек Для ячеек и можно указать размеры, используя стилевые свойства width
width и height:
∙ width: ширина;
∙ height: высота;
В принципе, эти стилевые свойства можно использовать не только для указания размеров ячеек таблиц. С их помощью можно указать размеры любого блочного элемента страницы (например - абзаца или заголовков).

Тенет (16+) и :
colspan="N" - объединяет N столбцов
rowspan="N"- - объединяет N строк

Слайд 10

Пример кода

Пример кода

Слайд 11

Практика

Практика

Слайд 12

Практика

Практика

Слайд 13

Домашнее задание

Домашнее задание

Слайд 14

Нужно больше практики

Нужно больше практики

Слайд 15

Домашнее задание

Домашнее задание

Слайд 16

Домашнее задание №2

Домашнее задание №2
Имя файла: Назначение-элементов-header,-nav,-article,-aside,-footer.pptx
Количество просмотров: 36
Количество скачиваний: 0