Первая страница
Наша команда
Контакты
О нас

    Головна сторінка



Вставлення зображень в html -документ Лабораторна робота №31

Скачати 99.48 Kb.

Вставлення зображень в html -документ Лабораторна робота №31




Скачати 99.48 Kb.
Дата конвертації07.06.2017
Розмір99.48 Kb.
ТипУрок


Дата проведення група

Урок №

Тема:  Вставлення зображень в HTML -документ Лабораторна робота № 31.

Мета:

Навчальна. Познайомити учнів з засобами вставлення зображень в HTML- документ; продемонструвати використання цих списків на конкретних прикладах.

Розвиваюча.  Сприяти розвитку пам'яті, уваги. Сприяти розвитку творчого підходу для освоєння програмного продукту, самостійності при роботі з програмним продуктом.
Лабораторія (середньовічна лат. laboratorium, від лат. laboro - працюю, лат. labor - праця, робота) - багатозначний термін, що залежно від контексту, може означати: Спеціально обладнане та устатковане приладами, пристроями, мережами приміщення або транспортний засіб (наприклад, автомобіль, вагон потягу, літак, гелікоптер, субмарина тощо) для наукових досліджень, навчальних робіт, контрольних аналізів та випробувань (див. лабораторне устаткування). Установу або її відділ, що проводить експериментальну науково-дослідницьку та навчальну роботу. Внутрішні творчі процеси, внутрішню діяльність кого-небудь. Наприклад, творча лабораторія дослідника, митця тощо.
Докуме́нт - базова теоретична конструкція, яка відноситься до всього, що може бути збережене або представлене, щоб служити як доказ для певної мети.
Програ́мний проду́кт (англ. programming product) - це: програмний засіб, програмне забезпечення, які призначені для постачання користувачеві (покупцеві, замовникові). програма, яку може запускати, тестувати, виправляти та змінювати будь-яка людина.


Виховна. Сприяти вихованню акуратності, терпінню, посидючості..

Тип уроку. Урок формування та вдосконалення знань, вмінь, навичок.

Методи та прийоми. Індивідуальна робота /практичне завдання; кооперативна робота/ робота за комп’ютером/ тренувальні вправи і лабораторна робота; колективна робота/ вправа «Кошик запитань».

Основні терміни і поняття. . Теги вставлення зображень. Мова розмітки гіпертексту HTML .
Гіперте́кст (англ. Hypertext) - текст для перегляду на комп'ютері, який містить зв'язки з іншими документами («гіперзв'язки» чи «гіперпосилання»); читач має змогу перейти до пов'язаних документів безпосередньо з вихідного (первинного) тексту, активувавши посилання.
Колекти́в - cукупність людей, об'єднаних спільною діяльністю, спільними інтересами, метою, проектом. Група людей, зв'язаних спільною працею в одній організації, установі, на підприємстві тощо. За видом діяльності розрізняють трудові, навчальні, військові, спортивні, художньої самодіяльності та інші колективи.
Вихова́ння - процес та практика засвоєння дитиною загальноприйнятих у суспільстві норм поведінки.
HTML (англ. HyperText Markup Language - Мова розмітки гіпертекстових документів) - стандартна мова розмітки веб-сторінок в Інтернеті. Більшість веб-сторінок створюються за допомогою мови HTML (або XHTML).

Міжпредметні зв′язки. Загальноосвітні та спеціальні предмети, в яких необхідно оперативно знаходити потрібні WEB – сайти та сторінки, та створювати свої.

Наочність. Інструкційна картки до практичного завдання, файли для усіх видів робіт у локальній мережі, Інструкційна картки до Лабораторної роботи №30, інструкції з Т.Б. ,

Інтернет, будь який браузер, підручник Й.Я. Ривкінд. Інформатика 11 розділ 4, §4.7 стор. 247-254, П.З. текстовий редактор Блокнот


Технічні засоби навчання.
Інформа́тика (рос. информатика, англ. informatics, information science; нім. Informatik f) - теоретична та прикладна (технічна, технологічна) дисципліна, що вивчає структуру і загальні властивості інформації, а також методи і (технічні) засоби її створення, перетворення, зберігання, передачі та використання в різних галузях людської діяльності.
Практика (грец. πράξις «діяльність») - доцільна і цілеспрямована діяльність, яку суб'єкт здійснює для досягнення певної мети. Практика має суспільно-історичний характер і залежить від рівня розвитку суспільства, його структури.
Підру́чник (калька з пол. podręcznik) - книжка, у якій системно викладено інформацію з певної галузі знань і яку використовують в системі освіти на різних рівнях, а також для самостійного навчання. Різновид навчального видання.
Текстовий редактор - комп'ютерна програма-застосунок, призначена для створення й зміни текстових файлів (вставки, видалення та копіювання тексту, заміни змісту, сортування рядків), а також їх перегляду на моніторі, виводу на друк, пошуку фрагментів тексту тощо.
Комп’ютери, мультимедійний проектор, презентація вчителя, локальна мережа, магнітна дошка, П.
Мультиме́діа (лат. Multum + Medium) - комбінування різних форм представлення інформації на одному носієві, наприклад текстової, звукової і графічної, або, останнім часом все частіше - анімації і відео.
Проектор - це світловий прилад, що перерозподіляє світло лампи з концентрацією світлового потоку на поверхню малого розміру або у малому тілесному куті. Проектори є, в основному, оптико-механічними або оптично-цифровими приладами, котрі дозволяють за допомогою джерела світла, проектувати зображення об'єктів на поверхню, розташовану поза приладом - екран.
З будь який браузер, текстовий редактор Блокнот, або інший.

План:

  1. Оргмомент.

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

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

  4. Пробне застосування знань

  5. Вправи за зразком і в подібних умовах з метою вироблення вмінь безпомилкового застосування знань

  6. Вправи з перенесенням знань у нові умови.
    Перене́сення, або Енжамбема́н (фр. enjambement) - віршовий прийом, який полягає у перенесенні фрази або частини слова з попереднього рядка у наступний, зумовлений незбіжністю ритмічної паузи зі смисловою, хоч рядок при цьому втрачає свою інтонаційну викінченість.
    Застосунок, застосовна програма або прикладна програма (англ. application, application software, app) - користувацька комп'ютерна програма, що дає змогу вирішувати конкретні прикладні задачі користувача.


  7. Підбиття підсумків уроку. Рефлексія.

  8. Інформація – інструктаж домашнього завдання.

Хід уроку:

  1. Оргмомент

Доброго дня.

Оголошення теми уроку.

Умови роботи з «кошиком запитань»


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



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



  1. Індивідуальна робота / Практичне завдання

Інструкційна картка до практичного завдання на уроці з теми «Створення веб – сторінок. Форматування абзаців мовою HTML»

  • Відповіді (якщо є текстові завдання) оформити у текстовому документі та зберегти під назвою урок65.doc у власній папці учня.

Повторення правил техніки безпеки.
Форматува́ння (formatting) - процедура створення структур порожньої файлової системи вказаного типу - розподіл доріжок магнітного диска (дискети, твердого диска) чи іншого носія інформації (наприклад, SSD чи флеш-накопичувача) на фізичні чи логічні записи, що виконується перед першим використанням диска.
Правила техніки безпеки (англ. safety rules, preventive regulations, safety regulations, нім. Sicherheitsregeln f pl, Sicherheitsvorschriften f pl) - правові норми, що передбачають заходи із забезпечення безпечних і нешкідливих умов праці.


Вправа 1.

Створимо HTML-документ за допомогою найпростішого текстового редактора.

Найпростіші (лат. Protozoa, від дав.-гр. πρῶτος «перший» і ζῷα, форми множини ζῷον - «жива істота») - парафілетична або поліфілетична група одноклітинних або колоніальних еукаріотів, які мають гетеротрофний тип живлення.

1. Відкрийте текстовий редактор Блокнот (Notepad).

2. Для створення HTML-документа наберіть такий текст:



<HTML> <HEAD> <ТІТLE>ПідприємстваLЕ>

HEAD>

<BODY>

<Н1> Промислові об'єкти Нової Каховки

<Н2>Супермаркети

<Р> Заводи Нової Каховки <Р>Наш ліцей готує робітничі кадри для…

<HR>

Ліцей готує кадри за спеціальностями…<ВR>Його можна назвати кузнею робітничих кадрів BODY>

</HTML>

3. Збережіть файл на жорсткому диску у створеній заздалегідь папці, назвавши його, наприклад, 1.

Робітники́, також працівники́, трудівники́ - наймані особи, зайняті в безпосередньому виробництві, рідше у сфері послуг; виконавці найнижчої ланки технологічного чи управлінського ланцюга. В правовому суспільстві права й інтереси робітників захищено трудовим правом[джерело?].
Тверди́й диск або Тверди́й магні́тний диск, або Накопичувач на магнітних дисках (англ. Hard (magnetic) disk drive, англ. HDD), у комп'ютерному сленгу - «вінчестер» (від англ. winchester), - магнітний диск, основа якого виконана з твердого матеріалу.
html. Закрийте текстовий редактор.

4. Запустіть браузер Internet Explorer та відкрийте файл 1.

Інтерне́т (від англ. Internet), міжмере́жжя - всесвітня система взаємосполучених комп'ютерних мереж, що базуються на комплекті Інтернет-протоколів. Інтернет також називають мережею мереж. Інтернет складається з мільйонів локальних і глобальних приватних, публічних, академічних, ділових і урядових мереж, пов'язаних між собою з використанням різноманітних дротових, оптичних і бездротових технологій.
Microsoft Internet Explorer - графічний веб-оглядач (браузер), який розробляє корпорація Microsoft.
html. Перегляньте отриманий результат.

5. Проаналізуйте, як відтворено веб-сторінку. Якщо потрібно внести зміни, виберіть команду Перегляд HTML-коду в меню Вигляд. Збережіть зміни та оновіть веб-сторінку за допомогою клавіші F5 або кнопки Оновити панелі інструментів.

Пане́ль інструме́нтів (англ. toolbar) - елемент графічного інтерфейсу користувача, призначений для розміщення на ньому кількох інших елементів.


Вправа 2.
Помістимо на веб-сторінку наведений нижче текст, відформатувавши його за допомогою відповідних тегів.

1. Введіть HTML-код веб-сторінки, на якій відображатиметься наведений вище відформатований текст.

Веб-сторінка (англ. Web-page) - інформаційний ресурс, доступний в мережі World Wide Web (Всесвітня павутина), який можна переглянути у веб-браузері. Зазвичай, інформація веб-сторінки записана в форматі HTML, XHTML, або рідше Wml (для wap-сторінок).

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

Фрагмент (лат. fragmentum - уламок, шматок, скалка) - яка-небудь частина цілого.
Слід пам'ятати про правило вкладених тегів, згідно з яким їх потрібно закривати у зворотному до відкривання порядку. Тобто якщо спершу відкрили тег курсиву, а потім — тег підкреслення, то спочатку слід закривати тег підкреслення, а потім — курсиву.

2. Збережіть html-документ у файлі з розширенням .html.




  • Вчитель перевіряє файл з відповідями в особистій папці учня




  1. Пробне застосування знань.

Виконання комплексу вправ для зняття м'язового напруження. (Варіант 2)

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


Зробити кілька глибоких вдихів і видихів. Потягнутися ні стільці, зігнувши руки на потилиці, відхиляючи голову назад і випростуючи плечі. Повторити 5 разів.

Зробити нахили й повороти голови. Повторити 5 разів.

Зробити легкий самомасаж обличчя й кисті руки протягом 3-5 с.

Робота з підручником і Інтернетом, розповідь учнів на оцінку.
Оповіда́ння - невеликий за обсягом прозовий твір, у якому зображується подія з життя одного сформованого персонажа.
(самостійно дома)



Современные браузеры могут работать с различными форматами изображений, но наиболее предпочтительные –


GIF – (Graphics Interchange Format)

формат обмена графикой.

Преимущества:


  1. Кодировка платформенно-независима (Windows, Macintosh, Unics).

  2. При создании файла применяется особая технология сжатия, которая существенно сокращает его размер, что очень ускоряет передачу его по сети.

  3. GIF-изображения легко анимировать, использовать прозрачность и всплывание.

Недостаток: ограниченный набор цветов.

 используется для пиктограмм и небольших картинок.






JPEG - (Joint Photographic Expert Group) – организация по стандартизации

Преимущества:
Преимущества:


  1. Кодировка платформенно-независима (Windows, Macintosh, Unics).

  2. При создании файла применяется особая технология сжатия, которая существенно сокращает его размер, что очень ускоряет передачу его по сети.

  3. Поддерживает десятки тысяч цветов



Тэг - вставка изображений

Атрибуты:

Src - обязательный, значение- адрес изображения



Обычно файлы с картинками помещают в ту же папку, что и сама страница или в отдельную папку:



alt – определяет альтернативный текст, который появляется на месте картинки в окне браузера, если вывод картинки невозможен или заблокирован пользователем. Значение alt – строка текста, длиной до 1024 символа. Кавычки обязательны.

Alt= “Собака на сене “ Этот текст также появиться в виде всплывающей подсказки, когда указатель мыши направлен на картинку.



align – выравнивание. Положение изображения лучше всегда указывать явно.

Значения:

left, right – по левому или по правому краю.

top – верхняя граница изображения устанавливается на уровне верхнего края самого высокого элемента в строке.

middle – середина изображения выравнивается с серединой строки.

bottom – (по умолчанию) нижний край изображения выравнивается с базовой линией текста.





Центрирование изображения
Выровнять изображение по центру можно, только выделив его из текста тэгами абзацев, раздела или новой строки.





  1. Вправи за зразком і в подібних умовах з метою вироблення вмінь безпомилкового застосування знань



  1. Вправи з перенесенням знань у нові умови.

Інструкційна картка лабораторної роботи № 30 з теми «Теги форматування абзаців в HTML»

Хід роботи

  1. Создание ВТОРОЙ WEB-страницы в блокноте.

  1. Пуск/ все программы/ стандартные/ БЛОКНОТ

  2. Написать в нем текст WEB-страницы.

  3. Сохранить этот текст в папке image под именем file_2 .html.

  4. Перейти в эту папку

  5. Документ должен иметь значок или

  6. Открыть этот документ. (Откроется программа-браузер).

  7. Если нужно внести изменения в документ, то выполнить команду ВИДПросмотр HTML-кода (Исходный текст). Текст WEB-страницы откроется в блокноте.

  8. Внести в текст изменения. Сохранить его (Ctrl S), перейти в программу-браузер и нажать кнопку ОБНОВИТЬ.




Рисует полосу



Ссылки на вставку рисунков




11,

11, 12 баллов

  1. Контрольный вопрос

  1. Учитель показывает тег с атрибутамиученик результат его исполнения на веб – странице

  2. Учитель показывает любой объект на веб – странице - ученик, называет или показывает соответствующий тег и атрибуты .
    Атрибу́т (attribute) - невід'ємна, необхідна для забезпечення цілісності об'єкта (предмета) або суб'єкта (людини) властивість, його частина, додаток.




  1. Підбиття підсумків уроку. Рефлексія.

        1. «Кошик запитань».

Захистіть виконану роботу.

Контрольні питання


  1. Які шляхи створення сайтів вам відомі?

  2. Для чого потрібна мова HTML?

  3. Що таке теги?

  4. Які теги вам відомі?

  5. Назвіть теги заголовку веб - сторінки та їх атрибути?

  6. Розкажіть структуру HTML – документа?

  7. Назвіть теги вставлення зображень?

  8. Назвіть теги форматування зображень?

  9. Як створити веб – сторінку?

  10. Як переглянути веб – сторінку?

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

Вивчити конспект, підготуватися до наступного уроку

Додатковий матеріал
Использование видео

Корректно работает только в Internet Explorer

Атрибут dynsrc тэга <img> позволяет вставлять видео .avi в документ.

<img dynsrc=“kino.avi”>

Браузер выделяет прямоугольную область в окне документа и проигрывает в ней видео.

Документа́ція - сукупність офіційно визнаних, взаємопов'язаних та складених у визначеній формі документів, які містять передбачувану інформацію про виріб, процес або діяльність даного підприємства. Відповідно до області застосування Документа́цій поділяється на бухгалтерську, конструкторську, нормативну, технічну, товарну, тощо.
Некоторые браузеры могут не правильно среагировать на dynsrc. Поэтому рекомендуется в тэг <img> дополнительно включать атрибут со ссылкой на картинку.




Управление проигрыванием
Клип начинает проигрываться 1 раз сразу после загрузки документа.

Для изменения параметров проигрывания видео используются следующие атрибуты:



Controls (без значения) – добавляет элементы управления.

Loop= число повторений

=Infinite – бесконечно.

Start=mousover - проигрывание при наведении мышки на область видео.

=fileopen – при открытии документа

Start=“fileopen, mousover – сразу при открытии, а затем при наведении мышки

Все остальные атрибуты тэга <img> можно применять также и к видео.


Звуковой фон

Корректно работает только в Internet Explorer

Тэг - проигрывает аудиофайл при загрузке содержащего его документа. При обновлении документа проигрывание музыки возобновляется.

Атрибуты:



src="имя файла " - файл с расширением .wav, .midi, .mp3

Loop=количество повторений

=infinite – безконечно.


Каталог: stu
stu -> Міністерство освіти І науки україни бердянський державний педагогічний університет збірник тез наукових доповідей студентів бердянського державного педагогічного університету
stu -> Програмові вимоги – 2015 на державний iспит з циклу професійної підготовки та спеціальних курсів
stu -> Лабораторна робота №5 Теоретична частина: Процес завантаження операційної системи
stu -> Призначення операційної системи
stu -> Методичні вказівки до виконання дипломної роботи освітнього рівня "бакалавр" студентами усіх форм навчання для напрямку підготовки 050103 «Програмна інженерія»


Скачати 99.48 Kb.