Урок: "Розмітка веб-сторінок за допомогою таблиць. Теги таблиць, рядків, клітинок, їх атрибути"

Тема: Розмітка веб-сторінок за допомогою таблиць. Теги таблиць, рядків, клітинок, їх атрибути.

Мета:

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

Використане обладнання: комп’ютер; дошка; презентація з основними поняттями; таблиця із структурою НТМL-документу;

Хід уроку.

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

Інформаційний диктант: «Повторення призначення відомих тег». Учитель демонструє і називає тег або атрибут, учні записують їхнє призначення

 Завдання: записати призначення тег:

1.            Html
2.            Br
3.            Ol, li
4.            H5
5.            Hr
6.            Title
7.            Color
8.            Font
9.            Head
10.       Align=”right”
11.       Body
12.       Bgcolor

Відповіді на поставлені запитання учні записують на листочках. Після цього обмінюються листочками та перевіряють відповіді(читає відповіді сильний учень, а вчитель контролює, чи все правильно).

Завдання: відобразіть результати перевірки інформаційного диктанту у вигляді таблиці створеної засобами мови HTML.

Учні, що не мають досвіду роботи з мовою HTML, обов’язково заявлять про те, що вони не вміють цього робити. Таким чином виникає необхідність вивчення теми: „ Створення таблиць мовою HTML”

2.            Мотивація навчальної діяльності.

Часто виникає необхідність подати на веб-сторінці дані у вигляді таблиці. У HTML-таблицях можуть міститися елементи будь-якого типу. З їх допомогою можна ефективніше розмістити на сторінці текст і графіку, а також створити чітку структуру веб-сторінки.  Тому виникає необхідність вивчення засобів створення таблиць на мові HTML.

3.            Повідомлення теми і постановка завдань уроку.

Отже тема уроку: „Таблиці в HTML”.

На уроці ми повинні розглянути таблиці різних видів та вивчити теги створення таблиць.

4.            Вивчення нової теми, виконання практичних завдань.

Перед створенням таблиці необхідно визначити максимальну кількість рядків та стовпців. Код таблиці міститься у контейнері <TABLE>...</TABLE>. Кожна пара дескрипторів <TR>…</TR> визначає один рядок таблиці. Дані окремих комірок поміщуються у контейнер <TD>…</TD> (закриваючий дескриптор не </TD> є обов’язковим.

Однією з характеристик таблиці є рамка. Для побудови таблиці з рамкою треба задати товщину рамки за допомогою атрибута BORDER дескриптора <TABLE>. Формат атрибута: BORDER=n, де n – товщина рамки у пікселях.

Практичне завдання

1.            Створіть документ під назвою ROZKLAD.html, що містить таблицю з розкладом уроків:

<TABLE border>

<TR><TH> ПОНЕДІЛОК < /TH>

 <TR><TD> Математика< /TD> <TD> 8 </TD></TR>

<TR><TD> Хімія < /TD> <TD> 9 </TD></TR>

<TR><TD> Фізика < /TD> <TD> 12</TD></TR>

 і т.д..

</TABLE>

2.            Проаналізуйте результат.

Зверніть увагу, що перший рядок таблиці (заголовок) відрізняється написанням – це результат роботи тега <TH>.

Крім того, ширина стовпців таблиці дорівнює максимальній довжині тексту у комірках. Таблиця вирівняна по лівому краю вікна браузера, а її вміст відображається гарнітурою Times New Roman. Текст у комірках заголовка вирівнюється по центру, а в інших комірках – по лівій межі. Щоб змінити ці установки за замовчуванням, використовують різні атрибути.

Атрибути елемента TABLE:

Width – задає ширину таблиці. Його значення виражається у пікселях або відсотках. Приклад:<TABLE Width =”40%”>

Align – задає вирівнювання таблиці у документі, може набувати значень left, center, right.

Border – задає вивід рамок таблиці. <TABLE border=5> - задає рамку товщиною в 5 пікселів для зовнішньої рамки, внутрішні рамки дорівнюватимуть, як і раніше, 1 пікселю.

3.            Змініть вигляд таблиці у створеному файлі.

Атрибути елементів рядків і стовпців

Width, height –установлюють розміри комірок рядка: ширину і висоту. Ці атрибути можуть використовуватись у тегах <TR><TD>.

Align – вирівнюють вміст у комірках і вводиться в теги<TR> або<TD>. Як ви вважаєте, яки значень може набувати цей атрибут. Учні назвуть: left, center, right. Крім того існує можливість вирівнювання по ширині за допомогою атрибута “justify”.

Valign – вирівнювання вмісту по вертикалі. Цей атрибут застосовується з такими значеннями: top( вирівнювання по верхньому краю комірки), bottom  (по нижньому краю), middle (центрування по вертикалі). Приклад застосування: <TR Valign =” middle”>.

 Вигляд таблиці був би привабливішим, якби ви застосували колір у таблицях.

Колір у таблицях

Bgcolor- колір фону таблиці. Залежно від того, до якого тегу цей атрибут застосовується  <TR>,<TH>,<TD>,<TABLE>

Bordercolor – колір рамок таблиці. Якщо  цей атрибут вставити у тег  <TABLE>, то він діятиме, коли в таблиці є рамки, тобто за наявності атрибута Border. Якщо  ж потрібно задати колір лише визначених комірок, атрибут Bordercolor  розташовуємо  в тегах <TR>,<TH>,<TD>. Наприклад, тег г<TR Bordercolor=”FF0000” > задає червоні межі всіх комірок рядка.

4.Представити список учнів класу і їх дні народження у вигляді таблиці

5.            Підведення підсумків уроків.

1.            Чим ми займалися сьогодні на уроці?
2.            Які теги ви запам’ятали?

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

3.            Запишіть нові теги до словника та повторіть попередні.

Учням, що мають комп’ютери вдома підібрати і принести в електронному вигляді цікаві малюнки для  сторінок ( про сім’ю, спорт, улюблених тварин тощо)

Для підготовки використайте таку літературу:

О.Г. Пасічник, О.В.Пасічник, І.В. Стеценко «Основи веб-дизайну»

Додаток 1

Інструкція до виконання практичного завдання

1.            Створіть документ під назвою ROZKLAD.html, що містить таблицю з розкладом уроків:

<TABLE border>

<TR><TH> ПОНЕДІЛОК < /TH>

 <TR><TD> Математика< /TD> <TD> 8 </TD></TR>

<TR><TD> Хімія < /TD> <TD> 9 </TD></TR>

<TR><TD> Фізика < /TD> <TD> 12</TD></TR>

 і т.д..

</TABLE>

2.            Проаналізуйте результат.

Зверніть увагу, що перший рядок таблиці (заголовок) відрізняється написанням – це результат роботи тега <TH>.

Крім того, ширина стовпців таблиці дорівнює максимальній довжині тексту у комірках. Таблиця вирівняна по лівому краю вікна браузера, а її вміст відображається гарнітурою Times New Roman. Текст у комірках заголовка вирівнюється по центру, а в інших комірках – по лівій межі. Щоб змінити ці установки за замовчуванням, використовують різні атрибути.

Атрибути елемента TABLE:

Width – задає ширину таблиці. Його значення виражається у пікселях або відсотках. Приклад:<TABLE Width =”40%”>

Align – задає вирівнювання таблиці у документі, може набувати значень left, center, right.

Border – задає вивід рамок таблиці. <TABLE border=5> - задає рамку товщиною в 5 пікселів для зовнішньої рамки, внутрішні рамки дорівнюватимуть, як і раніше, 1 пікселю.

3.            Змініть вигляд таблиці у створеному файлі.

Атрибути елементів рядків і стовпців

Width, height –установлюють розміри комірок рядка: ширину і висоту. Ці атрибути можуть використовуватись у тегах <TR><TD>.

Align – вирівнюють вміст у комірках і вводиться в теги<TR> або<TD>. Як ви вважаєте, яки значень може набувати цей атрибут. Учні назвуть: left, center, right. Крім того існує можливість вирівнювання по ширині за допомогою атрибута “justify”.

Valign – вирівнювання вмісту по вертикалі. Цей атрибут застосовується з такими значеннями: top( вирівнювання по верхньому краю комірки), bottom  (по нижньому краю), middle (центрування по вертикалі). Приклад застосування: <TR Valign =” middle”>.

 Вигляд таблиці був би привабливішим, якби ви застосували колір у таблицях.

Колір у таблицях

Bgcolor- колір фону таблиці. Залежно від того, до якого тегу цей атрибут застосовується  <TR>,<TH>,<TD>,<TABLE>

Bordercolor – колір рамок таблиці. Якщо  цей атрибут вставити у тег  <TABLE>, то він діятиме, коли в таблиці є рамки, тобто за наявності атрибута Border. Якщо  ж потрібно задати колір лише визначених комірок, атрибут Bordercolor  розташовуємо  в тегах <TR>,<TH>,<TD>. Наприклад, тег г<TR Bordercolor=”FF0000” > задає червоні межі всіх комірок рядка.

4.Представити список учнів класу і їх дні народження у вигляді таблиці