Вставка зображень на веб-сторінці
Тема: «Вставка зображень на веб-сторінці».
Мета: закріпити навички форматування шрифту мовою HTML, а також навчитися вставляти, редагувати та форматувати малюнки для оформлення веб-сторінок, використовуючи мову HTML; розвивати навички самостійної роботи з матеріалом, пам’ять, увагу; виховувати почуття патріотизму, любові до рідної землі.
Тип заняття: комбінований
Методи: фронтальне бліц-опитування; самовизначення рівня володіння матеріалом та власного настрою; картки-лото, прослуховування відео уроку з теми за курсом «Інтершкола. Основи веб-дизайну»; вправи для зняття втоми очей, виконання вправи за комп’ютером «21 листопада – День Гідності та свободи», міні-презентація отриманої веб-сторінки.
Обладнання: плакати-зразки тегів (команд), відео курс «Інтершкола. Основи веб-дизайну», роздатковий матеріал (лото), різнокольорові картки-квіти визначення настрою та само оцінювання рівня володіння матеріалом.
Хід уроку
- Організаційний момент.
- Рефлексія. Самовизначення психологічного настрою та рівня володіння матеріалом «Вправа «Визнач свій настрій» за допомогою різнокольорових квіток з оцінками різного рівня.
Учні створюють свій букет настрою на дошці.
-
Актуалізація опорних знань.
- Фронтальна робота з вихованцями факультативу.
Вступне слово вчителя: На попередніх заняттях ми з вами розглядали загальну структуру будь-якого веб-сайту, створеного за допомогою мови HTML. Перед тим, як ми почнемо розглядати нову тему, ми пригадаємо з вами загальну структуру будь-якої веб-сторінки, а також пригадаємо команди-теги, які слід використовувати для форматування тексту на веб-сторінці.
Бліц-опитування з використанням плакату на дошці:
- Які теги слід використовувати для початку будь-якої веб-сторінки і його закінчення?
- Які теги відповідають за назву нашої веб-сторінки?
- Які теги містять саму веб-сторінку?
Отже, ми з вами говорили, що загальна структура веб-сторінки, якщо її намалювати схематично у вигляді малюнку схожа на чоловічка (<head>…</head>- теги голови, заголовок сторінки, <body>…</body>- теги тіла сторінки).
- Робота в парах.
А тепер пригадаємо призначення тегів, які використовуються для форматування тексту на веб-сторінці (учням роздаються картки-лото, потрібно встановити відповідність між назвою тегів та їх призначенням, на виконання відводиться 1 хвилина).
Правильні відповіді до лото (перевіряються за допомогою плакату на дошці, учні міняються місцями і перевіряють роботу іншої групи, взаємоперевірка):
<Body bgcolor=”green”> … </body> - тег, що встановлює зелений колір фону сторінки
<Font color=”red” face=”Times New Roman” size=12> … </font>
- тег, що встановлює стиль шрифта: червоний колір, тип шрифта Times New Roman, розмір - 12
<BR> - тег переносу курсору на наступний рядок
<p align=”right”>… </p> - вирівнювання тексту праворуч
<B>…</B> - тег, що встановлює жирний текст
<I>…</I> - тег, що встановлює нахилений текст, курсив
<U>…</U> - тег, що встановлює підкреслений текст
<H1>…</H1> - тег для встановлення заголовку 1-го рівня
- Робота біля дошки (контроль з боку вчителя за правильним виконанням і вчасне виправлення помилок, якщо вони є).
Завдання: потрібно вийти до дошки і написати коди тегів згідно з написаним текстом, що вже заготовлений на дошці.
Правильна відповідь:
<H1><B><i>
Цей текст жирний, нахилений, заголовок 1-го рівня
</i></B></H1><BR>
<font size=”3”><i><p align=”center”>
Цей текст нахилений, вирівняний по центру, розмір=3
</p></i></font><BR>
<font size=”14” face=”Book Antigua”><p align=”right”>
Цей текст звичайний, вирівняний по правому краю, розмір=14, шрифт “Book Antigua”
</p></font><BR>
- Мотивація до розгляду нової теми.
Ми навчилися з вами форматувати, оформлювати текст на веб-сторінці, але чи виглядає веб-сторінка красиво, якщо на ній зовсім відсутні малюнки, фото, а є тільки текст? Звичайно ж ні.
- Повідомлення теми, мети заняття.
- Вивчення нового матеріалу.
Вступне слово вчителя: Пропоную взяти вам навушники, запустити відео урок № 4 за шляхом С:\Файли для роботи\11 клас\Веб-дизайн\start.exe з теми: «Використання малюнків для оформлення веб-сторінки».
Після перегляду відео уроку, ви виконаєте практичне завдання на створення міні веб-сторінки на тему «21 листопада – день гідності та свободи». Як ви можливо чули, в минувшу п’ятницю в Україні відзначали першу річницю «Революції гідності», «Євромайдану». Рівно рік тому 21 листопада розпочалася «Революція гідності», «Єврореволюція», хто як називає… За цей час відбулося дуже багато подій, багато з них не дуже втішні та не однозначні. Я би хотіла, що би ми сьогодні спробували створили веб-сторінку, присвячену цим подіям за зразком, а також в кінці висловити свою думку щодо того, які реформи слід запровадити в державі, що змінити, щоби такого більше не повторювалося (коротенько, буквально 1 речення).
Малюнки розташовані в папці images (для того, щоб зайти до неї, скористайтеся кнопкою «Огляд диску», перегляньте малюнки. Ви можете використовувати не тільки ті малюнки, що на зразку, а обирати на власний смак, там потрібно буде вставити 3 малюнки з різним форматуванням.)
Але це згодом, а зараз відео урок.
Учні переглядають відео урок за комп’ютером (кожен учень індивідуально в навушниках)
- Первинне закріплення на практиці.
Завдання (зразок виконання):
- Міні-презентація своїх веб-сторінок (учні зачитують побажання нашій країні, висловлюють свої надії та сподівання)
- Фізкультхвилинка (учні виконують вправи для зняття втоми очей за схемою).
- Комп’ютерне тестування (учні самостійно визначають рівень засвоєння матеріалу з використанням програми «Інтершкола. Основи веб-дизайну»).
- Закріплення вивченого матеріалу.
- Які теги слід використовувати для вставки малюнка до веб-сторінки?
(<img src=”назва файлу або повний шлях до нього”>)
- Які теги використовуються для вирівнювання малюнку по лівій частині, по центру, праворуч?
(<img src=” назва файлу або повний шлях до нього” align=”left”>)
- Які параметри встановлюють відступи малюнку від тексту?
(<img src=” назва файлу або повний шлях до нього” hspace="20" vspace=20>)
- Які параметри встановлюють межу малюнка?
(наприклад, <img src="img\10.jpg" align=”right” border="10")
-
Підведення підсумків
- Рефлексія (учні знову оцінюють свій настрій і поруч зі своєю квіткою, що вони обрали на початку заняття, вішають нову квітку, яка означає їх настрій на кінець уроку та рівень володіння матеріалом відповідно до комп’ютерного тестування.)
- Д.з.: зробити конспект, вивчити матеріал уроку
- Підсумок заняття.
Заключне слово вчителя: Я маю надію, що сьогоднішнє заняття було корисним для вас не тільки в плані навчання, але ви дещо винесли з цього уроку ще й для себе, для розуміння власного внеску у розвиток нашого суспільства.
Безумовно, ці роки незалежності стали випробовуванням для всіх нас - випробовуванням на зрілість, на терпіння, на толерантність, нарешті – на здоровий глузд. І не може бути сумніву в тому, що працелюбний народ України в змозі поліпшити життя у своїй власній державі. Тій державі, що вистраждана поколіннями українців, за яку віддано скільки життів і крові, крові наших предків. Впевнена у безхмарному завтрашньому дні України. Цей день обов’язково настане і тим швидше, чим більш свідомо ми працюватимемо сьогодні на благо Батьківщини і проникнемося почуттям патріотизму до свого міста та своєї України. Повірте, без цього дуже важко досягти поставленої мети. Вірю – ми її досягнемо!
Дякую за заняття і до наступних зустрічей!
про публікацію авторської розробки
Додати розробку