 |
|
Актуалізація опорних знань.
Гра «Структура веб-документу»
Завдання полягає в тому, щоб на комп’ютері в правильному порядку розташувати картки, на яких записані основні структурні теги.
Вивчення нового матеріалу, виконання практичної роботи.
Питання до учнів, що мають досвід роботи по створенню веб- документів:
1. Яким чином можна передати без змін на веб-сторінці текст, відформатований в Word?
2. Для вирішення даної проблеми в мові HTML існує засіб – контейнерні теги <pre>…</pre>. Цей контейнер дозволяє зберегти розбиття тексту на рядки, пропуски в середині, створені списки тощо.
3. Спробуємо використати ці теги для створення списків за допомогою текстового редактора Блокнот.
Завдання:
Основні типи списків, які використовуються у Web: впорядкований (нумерований) і невпорядкований (маркований).
Впорядкований список створюється за допомогою контейнера <ol></ol>, у середині якого кожен елемент списку визначається за допомогою дескриптора<li> (від слів list item - елемент списку)
Простий впорядкований список задається таким кодом:
<li> перший елемент списку
<li>другий елемент списку
<li>третій елемент списку
</ol>
У цьому випадку елементами списку є просто текстові рядки, але взагалі ними можуть бути будь-які елементи Веб-сторінки: текст, зображення, гіперпосилання тощо.
У впорядкованих списках за допомогою атрибута TYPE - дескриптора <ol> можна вказати тип нумерації.:(Додаток 1)
| < ol type=1> | Стандартний спосіб нумерації за допомогою арабських цифр |
| < ol type=a> | Нумерація за допомогою малих букв алфавіту |
| < ol type=A> | Нумерація за допомогою великих букв алфавіту |
| < ol type=I> | Нумерація за допомогою римських цифр |
Коди маркованих і нумерованих списків виглядають однаково, за виключенням того, що контейнер<ol></ol> для нумерованого списку замінюється на <ul></ul> для маркованого.
Організувати маркований список в поточному веб-документі, переглянути відображення браузера.
Практичне завдання
Створити нумерований список учнів класу
Підведення підсумків.
Перегляд робіт, виставлення балів за роботу на уроці.
Обговорення проблем та їх вирішення, що виникли під час виконання практичних завдань.
Домашнє завдання.
Вивчені теги занести до словника. Продумати матеріал, який вимагає організації таблиць для роботи на наступному уроці.
Учням, які мають досвід у роботі з мовою розмітки гіпертексту, підготувати поради по створенню таблиць на допомогу учням – «новачкам» (найкращу використаємо на уроці ).
Для підготовки використайте таку літературу:
О.Г. Пасічник, О.В.Пасічник, І.В. Стеценко «Основи веб-дизайну»
Додаток 1
| < ol type=1> | Стандартний спосіб нумерації за допомогою арабських цифр |
| < ol type=a> | Нумерація за допомогою малих букв алфавіту |
| < ol type=A> | Нумерація за допомогою великих букв алфавіту |
| < ol type=I> | Нумерація за допомогою римських цифр |
| < ol type=1> | Стандартний спосіб нумерації за допомогою арабських цифр |
| < ol type=a> | Нумерація за допомогою малих букв алфавіту |
| < ol type=A> | Нумерація за допомогою великих букв алфавіту |
| < ol type=I> | Нумерація за допомогою римських цифр |
| < ol type=1> | Стандартний спосіб нумерації за допомогою арабських цифр |
| < ol type=a> | Нумерація за допомогою малих букв алфавіту |
| < ol type=A> | Нумерація за допомогою великих букв алфавіту |
| < ol type=I> | Нумерація за допомогою римських цифр |
Урок №4
Тема:Розмітка веб-сторінок за допомогою таблиць.Теги таблиць, рядків, комірок, їхні атрибути. Практична робота «Структурування веб-сторінок за допомогою таблиць».
Мета:познайомити учнів з тегами створення таблиць у веб-документі;продовжувати формувати вміння та навички створення НТМL-документа;
розвивати пізнавальний інтерес; дизайнерські здібності учнів, вміння планувати свою роботу;
виховувати культуру подання інформації.
Використане обладнання: комп’ютер; дошка; презентація з основними поняттями; таблиця із структурою НТМL-документу;
Хід уроку.