Тема "Основи мови гіпертекстової розмітки документів" загальним об'ємом 8 годин, розглядається в 11-му класі. (Підручник: Н. Угриновича, Інформатика та інформаційні технології. 10 - 11 кл.) Метою даного курсу є формування первинного досвіду створення Web-сторінок і Web-сайтів. У даній розробці представлений третій урок по темі «Створення і використання таблиць на Web-сторінках»
Вивчення курсу завершується виконанням учнями індивідуального або групового (2-3 чол.) Проекту - розробка web-сайту.
Тема уроку: «Створення та використання таблиць на Web-сторінках»
Навчальна: засвоїти нові знання і сформувати вміння щодо створення і використання таблиць на Web - сторінках; навчити учнів красиво і раціонально розміщувати інформацію на сторінці, використовуючи теги HTML.
Розвиваюча: Формування вміння працювати фронтально та індивідуально; розширення кругозору; розвиток навичок застосування комп'ютерних технологій при створенні web-сайтів.
Виховна: виховувати позитивне ставлення до знань, сумлінне ставлення до праці, дисциплінованість.
Устаткування і матеріали, необхідні для проведення уроку:
Комп'ютери, інтерактивна дошка, проектор, роздатковий матеріал, презентація уроку, завдання для перевірочної роботи.
Тип уроку: Урок вивчення нового матеріалу
I.Організаціонний момент.
II.Актуалізація знань. Повторення вивченого матеріалу.
Учитель. Ми продовжуємо втілювати нашу з вами мрію: створення сайту про наш районі, його історії і про людей, в ньому живуть.
Для цього нам потрібно навчитися будувати таблиці в Web - сторінках засобами мови розмітки гіпертекстових документів HTML. Тема сьогоднішнього уроку "Створення і використання таблиць на Web сторінках".
Сьогодні ви будете працювати по підгрупах, перед вами лежать аркуші оцінювання, за допомогою яких ми будемо судити про результати роботи команди на уроці. Лист оцінювання заповнює капітан команди.
Індивідуальні оцінки членів команди будуть залежати від результату діяльності команди на уроці. Таким чином кожен з вас повинен бути зацікавлений в тому, щоб команда набрала максимальну кількість балів.
Для перевірки домашнього завдання:
1) я попрошу відповісти вас на наступні питання:
(На обдумування відповідей на питання дається 30секунд. Якщо команда не знає відповіді, то відповідь можуть дати інші команди. За цей команда отримує додаткові бали. Питання надаються у вигляді таблиці. Таблиця з правильними відповідями на питання виводиться на екран після закінчення опитування. Хлопці переносять результат роботи на лист оцінювання. Критерії оцінки на дошці).
- Для того, щоб створити Web - сторінку потрібно написати програму. А якою мовою ми пишемо програму для створення Web - сторінки? (Мовою HTML)
- Які дві програми необхідно мати для створення Web - сторінки? (Нам необхідно мати 2 програми: Блокнот для створення тексту програм (Пуск - Програми - Стандартні - Блокнот); Браузер Internet Explorer (відображатиме інформацію в своєму робочому вікні))
- Яка технологія створення Web - сторінки?
- Яка структура HTML документа? (Сторінка - шаблон, файл shablon.Html)
2) А тепер виконуємо незвичайний тест. Питання задаю я, а комп'ютер визначить правильність вашої відповіді. (Учні відповідають у інтерактивної дошки)
- За допомогою якого контейнера проводиться поділ тексту на абзаци? (<Р> текст абзацу
)- Які параметри можна додати в тег
для вирівнювання тексту абзацу? (
текст абзацу
,де значенням атрибута ALIGN можуть бути center - вирівнювання по центру,left - вирівнювання по лівому краю, (задається за замовчуванням),
right - вирівнювання по правому краю,
justify - вирівнювання по ширині)
- Який тег використовується для розміщення на Web-сторінці заголовків і підзаголовків? (
- Який тег використовується для завдання параметрів тексту? ( текст )
- Які параметри атрібутовFACE, SIZE, COLORви знаєте? (Наприклад, текст , текст , текст )
- Які теги визначають накреслення шрифту? (... - жирний, ... - курсив, ... - підкреслення. комбінація: Жирний курсив з підкресленням
Учитель .. Згадаймо, що представляють собою таблиці і для чого вони потрібні.
Учні. Основними елементами таблиці є стовпець, рядок, комірка. Стовпчики таблиці можуть містити різну інформацію: числа, текст, малюнок, графіки.
III.Формірованіе нових знань і умінь.
Учитель. Розміщувати інформацію зручніше в таблиці, а не на порожній сторінці. Тому таблиці використовуються в Web-дизайні надзвичайно широко - не тільки для традиційних колонок цифр та іншої інформації, яку зручно представляти в такому вигляді, але і як елемент дизайну.
Відвідуючи Всесвітню павутину і уважно вивчаючи структуру Wed документів, ми можемо виявити невидимий "скелет" - складну сітку з великих і дрібних осередків
Отже, ми можемо побачити дивлячись на WEB-сторінку, що вона представлена таблицею. Деякі елементи таблиці можуть об'єднуватися в одну, а всередину комірок можна помістити текст, графіки, малюнки або іншу таблицю. А сьогодні ми дізнаємося як це зробити за допомогою мови HTML.
На екрані представлені теги для побудови таблиці. (Слайд)
Приклад коду найпростішої таблиці.
Учні пишуть в конспект теги для побудови таблиці і їх атрибути.
Учитель. Таблицю формують кілька різних тегів. Таблиця задається контейнером
Будь-яка таблиця складається з рядків, які задаються контейнером
Товщина розділових ліній в таблиці задається за допомогою атрибутів BORDER = n (при n = 0 межа невидима), а для вирівнювання інформації всередині осередку по горизонталі застосовують атрибут ALIGN.
IV.Практіческая частина.
Обговорення та виконання практичної роботи. Учням роздається роздруківка c ходом практичної роботи. Під час практичної роботи вчитель консультує учнів.
Хід практичної роботи
1. Використовуючи вже створену сторінку-шаблон необхідно створити Web-сторінку з назвою «Тема: Таблиці в html».
¨ Внесіть зміни:
¨ Збережіть під ім'ям tab.html в папці WWW. Для цього виконайте Файл - Зберегти як ... У вікні Збереження документа в списку Тип файлу виберіть Всі файли (*. *). У полі Ім'я файлу введіть tab.html і натисніть кнопку Зберегти.
2.Задаем таблицю шириною 700 пікселів (точок) і маємо в своєму розпорядженні її посередині сторінки. Для цього відкриємо HTML-код нашої сторінки:
¨ Внесіть зміни в файл tab.html:
¨ Збережіть файл (Файл - Зберегти)
Зауваження. Зверніть увагу на панель задач. На ній розташовуються папка WWW. Блокнот з файлом tab.html (HTML-код сторінки) і браузер з нашою сторінкою "Тема:" Таблиці вhtml ".
¨ Натисніть кнопку Оновити або клавішу F5. Проаналізуйте отриманий результат.
3.Подкрасім фон таблиці в зелений колір.
¨ Користуючись панеллю задач перейти в HTML-код сторінки
Внести зміни:
| Другий рядок, другий стовпець |