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

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

Мета:

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

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

Хід уроку.

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 type=1>	Стандартний спосіб нумерації за допомогою арабських цифр
< ol type=a>	Нумерація за допомогою малих букв алфавіту
< ol  type=A>	Нумерація за допомогою великих букв алфавіту
< ol type=I>	Нумерація за допомогою римських цифр

 Коди маркованих і нумерованих списків виглядають однаково, за виключенням того, що контейнер<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.           текст повинен бути спокійного кольору, чітко виділятись і гармоніювати з фоном;

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