Работа с изображениями, таблицами и списками
№ урока: 2 Курс: HTML5&CSS3
Средства обучения: Персональный компьютер с установленной Visual Studio Community, VS
Code, Sublime, Notepad++
Обзор, цель и назначение урока
Целью данного урока является знакомство слушателей с элементами разметки, позволяющими
создавать на странице изображения, таблицы и списки. А также работать с ними.
Изучив материал данного занятия, учащийся сможет:
Создавать на странице изображения
Манипулировать размерами изображений с помощью атрибутов
Создавать таблицы, задавать им размеры, и внешний вид
Создавать различные виды списков, задавать им разный вид с помощью атрибутов
Содержание урока
1. Рассмотрение тега img и его атрибутов
2. Тег table
3. Работа с таблицами
4. Теги ul, ol, dl
5. Работа со списками
Резюме
На настоящем уроке слушатели ознакомились с добавлением изображений на страницу, задание им
размеров, а именно ширины и высоты. Узнали, как создавать на веб странице таблицы, добавлять им
заголовки задавать размеры. Научились объединять ячейки как по вертикали, так и по горизонтали.
Также узнали о видах, списков, которые существуют в HTML, научились с ними работать, добавлять на
страницу и задавать различные характеристики.
Закрепление материала
Как добавить изображение на страницу?
Как изображению задать размеры?
Зависит ли скорость загрузки изображения на страницу от заданных ему размеров?
Какие форматы изображений для размещения на веб страницах вы знаете?
Как добавить таблицу в веб документ?
Какой атрибут используется для объединения ячеек таблицы по вертикали?
Какие виды списков вы знаете?
Дополнительное задание
Задание
Создайте HTML страницу, на которой, будет размещено одно изображение с локального компьютера,
одно изображение с удаленного источника, таблицы 3*3, и различные виды списков.
Самостоятельная деятельность учащегося
Задание 1
Выучите основные термины и понятия, рассмотренные на уроке.
Page | 1
CyberBionic Systematics ® 2018 t. +380 (44) 361-8937 Title: HTML5&CSS3
19 Eugene Sverstyuk Str., 5 floor E-mail:
[email protected] Lesson: 2
Kyiv, Ukraine Site: www.edu.cbsystematics.com |
itvdn.com
Задание 2
Создайте страницу, на которой разместите карту изображение, представленную в материалах урока.
Задание 3
Создайте страницу, на которой будет размещена таблица из шаблона в материалах.
Задание 4
Создайте список, у которого элементами являются вложенные списки.
Рекомендуемые ресурсы
Официальный сайт W3C
https://www.w3.org/
Справочник по HTML
http://htmlbook.ru/html
Page | 2
CyberBionic Systematics ® 2018 t. +380 (44) 361-8937 Title: HTML5&CSS3
19 Eugene Sverstyuk Str., 5 floor E-mail:
[email protected] Lesson: 2
Kyiv, Ukraine Site: www.edu.cbsystematics.com |
itvdn.com
