Урок: "Способи керування структурою та розміщенням інформації на веб-сторінках"

Тема: Способи керування структурою та розміщенням інформації на веб-сторінках.

Мета:

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

Використане обладнання: комп’ютер; дошка;таблиці для гри;

Хід уроку.

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

Гра « Знайомі поняття»:

Гра полягає у виборі понять, які стосуються безпосередньо основних понять HTML.

Учні отримують картки з таблицею, яка складається з 3 колонок

(Додаток 1)

Почувши термін, учні записують до одного із стовпчиків.

Набір термінів і понять зачитує вчитель і вони відображаються на моніторах учнівських комп’ютерів (щоб учні сприймали інформацію не тільки на слух, але й зором) може бути таким: Internet Explorer,               WWW,               Модем,               електронна пошта,               Сервер,               Провайдер,               Тег,                             група новин,               Атрибут,               веб-сервер,               протокол НТТР,               Program,               ТІТLЕ,               BODY,               Microsoft,               Center,               Excel, Align,               Begin,               Дескриптор,               Access,               Гіпертекст,               Case of,               маршрутизатор,               заголовок,                             пуск,                             ip-адреса

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

- Як люди передають емоції?

- Як емоції передати на письмі?

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

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

- Тож тема уроку звучить так: „Форматування тексту. Поділ тексту на логічні частини”.

Завдання уроку:

•             Познайомитися з деякими засобами мови  HTML форматування тексту;
•             Навчитися використовувати відповідні теги для зміни вигляду;
•             Доповнити та відформатувати власну веб-сторінку.

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

- Фрагмент тексту можна виділити напівжирним шрифтом (Bold). Для цього необхідно використати теги <B> текст </B>.

- Окремі слова можна підкреслити за допомогою тега <u> текст </u>.

- Часто використовують курсив за допомогою тега <i> текст </i>.

Не забувайте закривати дані дескриптори, інакше ви виділите весь текст, а не окремі його частини, як ви планували.

В даному прикладі відображена одна з головний ідей мови HTML: тег, який відкрився першим, закривається останнім, тобто ви вкладаєте теги один до одного.

Питання до учнів, що мають досвід  роботи по створенню веб- документів:

1.           Яким чином можна передати без змін  на веб-сторінці текст, відформатований в Word?
2.           Для вирішення даної проблеми в мові HTML  існує засіб – контейнерні теги <pre>…</pre>. Цей контейнер дозволяє зберегти розбиття тексту на рядки, пропуски в середині, створені списки тощо.
3.           Спробуємо використати ці теги для створення списків за допомогою текстового редактора Блокнот.

Завдання:

Основні типи списків, які використовуються у Web: впорядкований (нумерований) і невпорядкований (маркований).

Впорядкований список створюється за допомогою контейнера <ol></ol>, у середині якого кожен елемент списку визначається за допомогою дескриптора<li> (від слів list item - елемент списку)

Простий впорядкований список задається таким кодом:

<li> перший елемент списку

<li>другий елемент списку

<li>третій елемент списку

</ol>

У цьому випадку елементами списку є просто текстові рядки, але взагалі ними можуть бути будь-які елементи Веб-сторінки: текст, зображення, гіперпосилання тощо.

У впорядкованих списках за допомогою атрибута TYPE - дескриптора <ol>  можна вказати тип нумерації.:(Додаток 2)

 Коди маркованих і нумерованих списків виглядають однаково, за виключенням того, що контейнер<ol></ol> для нумерованого списку замінюється на <ul></ul> для маркованого.

Організувати маркований список в поточному веб-документі, переглянути відображення браузера.

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

1.           Відкрийте свою веб-сторінку.
2.           Як зайти в редактор веб-сторінки? Як змусити браузер відобразити зміни?
3.           Теги, що керують шрифтами, також мають свої атрибути. Розгляньмо їх. Ви можете збільшити або зменшити розмір шрифту, який вимірюється в пунктах.
4.           Хто знає, чому дорівнює один пункт?

(Один пункт дорівнює 1/72 дюйма або 0,353мм. Він задається відносно розміру, встановленого в програмі перегляду по умовчанню):

<font size=+n>і </font>, <font size=-n> і</font>, де число пунктів, на яке ви хочете збільшити або зменшити розмір шрифту.  Шрифт тексту, розташованого між тегами <font size=+n>і </font>, <font size=-n> і</font>, буде збільшений або зменшений.

Завдання:

Застосуйте теги <font size=+2> і </font> до тексту у вашій  веб-сторінці до фрази « я навчаюсь у Диканській гімназії ім. М.В.Гоголя», виділивши при цьому текст «Диканській гімназії ім. М.В.Гоголя».

Використайте для окремого фрагменту тексту тег <font size=”+7” color=”red” face=”Arial”> текст </font>. Зверніть увагу на те, як змінився колір тексту. Цю зміну викликав атрибут color. Необхідний колір ви можете задати або написати його назву на англійській мові.

color= «назва кольору»

5.           Вам подобається вигляд вашої сторінки?

- Що ви хочете змінити?

- Для зміни кольору фону необхідно познайомитись із тегами <bgcolor>- даний тег використовується для оформлення фону сторінки і text – для задання кольору шрифту. Записується вони так:

<body bgcolor= «код кольору» text= «код кольору»>.

При доборі фону документа потрібно пам’ятати основні привила дизайну:

6.           колір не повинен дратувати;
7.           колір не повинен втомлювати очі;
8.           текст повинен бути спокійного кольору, чітко виділятись і гармоніювати з фоном;

Застосуйте теги кольору фону і тексту до своєї сторінки

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

- Передивитися створені сторінки. Визначити найбільш вдалі кольорові вирішення.

- Що ви навчилися робити на сьогоднішньому уроці?

- Які теги вам допомогли у роботі?

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

- Вивчити нові і повторити відомі теги.

- Записати вивчені теги до НТМL- словника.

- На наступному уроці ми познайомимось із списками, тому продумати інформацію, яку можна розташувати на своїй сторінці у вигляді списків різних видів.

Учням, яким важко дається засвоєння матеріалу, записати зразок веб -сторінки в зошитах ( для кращого запам’ятовування теги підписати ).

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

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

Додаток 1

Додаток 2

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

1.           Відкрийте свою веб-сторінку.
2.           Як зайти в редактор веб-сторінки? Як змусити браузер відобразити зміни?
3.           Теги, що керують шрифтами, також мають свої атрибути. Розгляньмо їх. Ви можете збільшити або зменшити розмір шрифту, який вимірюється в пунктах.
4.           Хто знає, чому дорівнює один пункт?

(Один пункт дорівнює 1/72 дюйма або 0,353мм. Він задається відносно розміру, встановленого в програмі перегляду по умовчанню):

<font size=+n>і </font>, <font size=-n> і</font>, де число пунктів, на яке ви хочете збільшити або зменшити розмір шрифту.  Шрифт тексту, розташованого між тегами <font size=+n>і </font>, <font size=-n> і</font>, буде збільшений або зменшений.

Завдання:

Застосуйте теги <font size=+2> і </font> до тексту у вашій  веб-сторінці до фрази « я навчаюсь у Диканській гімназії ім. М.В.Гоголя», виділивши при цьому текст «Диканській гімназії ім. М.В.Гоголя».

Використайте для окремого фрагменту тексту тег <font size=”+7” color=”red” face=”Arial”> текст </font>. Зверніть увагу на те, як змінився колір тексту. Цю зміну викликав атрибут color. Необхідний колір ви можете задати або написати його назву на англійській мові.

color= «назва кольору»

5.           Вам подобається вигляд вашої сторінки?

- Що ви хочете змінити?

- Для зміни кольору фону необхідно познайомитись із тегами <bgcolor>- даний тег використовується для оформлення фону сторінки і text – для задання кольору шрифту. Записується вони так:

<body bgcolor= «код кольору» text= «код кольору»>.

При доборі фону документа потрібно пам’ятати основні привила дизайну:

6.           колір не повинен дратувати;
7.           колір не повинен втомлювати очі;
8.           текст повинен бути спокійного кольору, чітко виділятись і гармоніювати з фоном;

Застосуйте теги кольору фону і тексту до своєї сторінки