Таблиці в HTML-документах. Використання таблиць для розміщення об’єктів на веб-сторінці

М. О. Лютинська, с. Сулгутове, Гайворонський р-н, Кіровоградська обл.


Мета:ознайомити учнів з основними прийомами створення таблиць у веб-документах; сформувативміння структурувати веб-сторінки таблицями;розвивати логічне мислення, пам’ять; виховувати уважність, формувати естетичні смаки.

 

Обладнання:дидактична презентація на тему «Таблиці в HTML-документах», мультимедійний проектор, практикум, тестова оболонка test-W2, пакет програм Microsoft Office, текстовий редактор Блокнот, інтернет-браузер.

 

Хід уроку

 

І. Організаційний етап

  1. Рапорт чергового.
  2. Інструктаж з техніки безпеки в кабінеті інформатики та інформаційно-комунікаційних технологій.

 

ІІ. Актуалізація опорних знань

 

  • Фронтальне опитування

1. Які теги відповідають за оформлення абзаців на веб-сторінці?

2. Які теги дозволяють форматувати текст?

3. Які теги дозволяють зберігати відступи під час відображення сторінки?

4. Які теги дозволяють формувати списки?

5. Що таке атрибути тег?

 

  • Виконання тестових завдань із застосуванням сигнальних карток

У процесі роботи використовую навчальну презентацію — додаток 1 (тест), супроводжуючи проведення тестування.

 

Тест

1. URL-адреса — це…

А) адреса ресурсу в Інтернеті;

Б) назва веб-сайту;

В) адреса комп’ютера, підключеного до мережі Інтернет;

Г) адреса сайту для хостинга;

Д) адреса електронної пошти.

 

2. Керування інформацією, розміщеного в мережі Інтернет, здійснюється за допомогою…

А) особи, відповідальної за роботу всесвітньої комп’ютерної мережі;

Б) телефонного зв’язку;

В) протоколу TCP/IP;

Г) скриньки електронної пошти;

Д) електронних адрес веб-ресурсів.

 

3. Веб-сторінка — це…

А) повідомлення на електронному форумі;

Б) видима на екрані під час роботи з Інтернетом частина інформаційного повідомлення;

В) відображувальний елемент з певної тематики, що має свою адресу в комп’ютерній мережі.

 

5. Веб-сайт — це…

А) будь-яка інформація, розміщена в комп’ютерній мережі для вільного доступу до неї;

Б) оформлена за допомогою спеціальних засобів інформація, що поділена на веб-сторінки та має свою URL-адресу;

В) спілкування за допомогою електронної пошти;

Г) сукупність веб-сторінок, розміщених під однією спільною назвою веб-ресурсу;

Д) текстова та графічна інформація, до якої можуть отримувати спільний доступ користувачі комп’ютерної мережі.

 

6. Вкажіть особливості структури веб-сайту.

А) Веб-сторінки розміщені у веб-сайті так само, як у текстовому документі;

Б) інформація організована за допомогою гіперпосилань таким чином, що перетворюється на ієрархічну систему веб-сторінок;

В) усі веб-сторінки з’єднані з головною за зіркоподібною схемою;

Г) сайт містить одну веб-сторінку;

Д) структура сайту передбачає використання гіперпосилань для зв’язку між сторінками.

 

7.  Домашня сторінка — це…

А) веб-сайт про сім’ю;

Б) веб-сайт, присвячений певній тематиці;

В) сторінка зі змістом веб-сайту;

Г) сторінка сайту, що відкривається першою в разі звертання до веб-ресурсу;

Д) сторінка, що має назву index.html.

 

8. Флуд — це…

А) повідомлення електронної пошти рекламного характеру;

Б) будь-які повідомлення в чаті;

В) беззмістовні повідомлення в журналах та чатах;

Г) один з різновидів блогів;

Д) текст, авторство якого присвоєне незаконно.

9. Головна сторінка сайту — це…

А) сторінка, на якій розташована найбільша кількість гіперпосилань;

Б) сторінка, на якій подані координати та адреса електронної пошти адміністратора сайту;

В) сторінка, яка відкривається першою під час завантаження сайту;

Г) сторінка, що має назву index.html;

Д) сторінка з ілюстраціями.

 

10. Електронний форум — це…

А) процес обміну повідомленнями з використанням електронної пошти;

Б) спосіб організації обміну повідомленнями з певної тематику, у якому спілкування може бути розірване в часі;

В) спосіб організації спілкування в реальному часі;

Г) обмін повідомленнями в межах одного сайту різними користувачами в різний час;

Д) повідомлення на різних сайтах за спільною тематикою.

 

11. Чат — це…

А) спосіб організації спілкування зареєстрованих учасників у режимі реального часу;

Б) створення коментарів до вмісту веб-сторінок;

В) спосіб організації обміну повідомленнями, за якого спілкування розірване в часі;

Г) спілкування двох учасників між собою в межах одного сайту в режимі реального часу;

Д) спілкування багатьох учасників між собою в межах одного сайту в режимі реального часу.

 

— Сьогодні на уроці ви ознайомитесь з основними прийомами створення таблиць у веб-документах, навчитеся в ході виконання практичних вправ структурувати веб-сторінки.

 

ІІІ. Вивчення нового матеріалу

Розповідь учителя

 

  • Структурування таблиць на веб-сторінці

У мові HTML дані можна подавати у вигляді таблиці. Для цього використовується тег <table> … </table>. У ньому «шапка» таблиці й дані задаються у вигляді послідовних рядків. Кожен рядок обмежуєтьсяпарним тегом <tr> … </tr>, назва кожного стовпця таблиці в«шапці»задаєтьсяпарним тегом <th> … </th>,а значення в кожній комірці ділянки даних таблиці —парним тегом <td> … </td>.

 

Для того щоб зробити їх видимими, використовують атрибут ВORDER, який має цілочислове значення, що визначає товщину рамки в пікселях, наприклад <TABLE BORDER=5>.

 

Таблиця може мати заголовок, який задається тегами <CAPTION> та </ CAPTION >. Тег < CAPTION> може містити атрибут ALIGN з одним із значеньtop або bottom, які визначають розташування заголовка відповідно перед таблицею або після неї. Наприклад, <CAPTION ALIGN= bottom > Розклад уроків </ CAPTION >.

 

Перегляд навчальної презентації на тему «Таблиці в HTML-документах»

 

IV. Формування вмінь та навичок

Практична робота

Практична робота виконується за змістом підручника: вправа 2.2 ст. 62–63.

 

Пам’ятка для учня!

  1. Пригадайте правила техніки безпеки під час роботи з ПК.
  2. Через кожні 15 хв виконуйте вправи для очей та для зняття м’язової втоми.

 

Створіть папку для практичної роботи на робочому столі. Збережіть у неї веб-сторінки до завдання 1 та 2. Папку з виконаними завданнями перешліть учителеві. Видаліть усі створені вами документи, очистіть Кошик.

 

Завдання 1. Створіть HTML-документ з таблицею за зразком.

Завдання 2. Структуруйте веб-сторінку за допомогою таблиці.

 

V. Підсумки уроку

— Що означає структурувати веб-сторінку за допомогою таблиці?

— Які теги відповідають за створення таблиці на веб-сторінці

 

VI. Домашнє завдання

С. 61–65, вивчити теоретичний матеріал, вправа 2.3; с. 66: (завдання 1 — для учнів з початковим та середнім рівнем знань, завдання 2 — для учнів з достатнім рівнем знань, завдання 3 — для дітей з високим рівня знань — диференціація за рівнем складності).

 

Література

  1. Основи веб-дизайну / О. Г. Пасічник, О. В. Пасічник, І. В. Стеценко. — К. : Вид. група ИРМ. — 2009. — С. 61–74.
  2. Сервіси, HTML і web-дизайн : Навч. посібн. — 3-тє вид. — Л. : Деол, СПД Глинський, 2005. — С. 89–97.
  3. Інформатика. 11 клас (рівень стандарту) : Посіб. для загальноосвіт. навч. закл. / І. О. Завадький, І. В. Стеценко. — К. : Видавнича група BHV, 2012. — С. 253–258.
  4. Інформатика. Практичні та тематичні роботи і проекти. 10–11 класи. — Шепетівка : ПП Шестопалов Є. А., 2008. — С. 138–158.
  5. Технологія Веб 2.0. Сайти, блоги, фотоскрвіси, карти знань/ Ірина Сокол. — К. : Шк. світ, 2011. — С. 31–40.
Dounload PDF

Відгуки читачів