Гіпермаркет Знань>>Інформатика 11 клас>>Інформатика>> Інформатика: Основи веб-дизайну

План-конспект уроку з курсу «Інформатика 11 клас» з теми «Гиперссылки – фундамент гипертекста»

                                                                              Урок № 6.

                                                  Гиперссылки – фундамент гипертекста.

Цели:

• Образовательные:
- Сформировать первоначальные представления опоявлении языка htmlи его назначении.
- Познакомиться с фундаментом гипертекста – гиперссылками.

• Развивающие:
- умения анализировать, сравнивать, систематизировать и обобщать;
- интерес к учению, стремление к расширению кругозора;

• Воспитательные:
- бережное отношение к имуществу, ВТ и учебным пособиям;
- дисциплинированность, любознательность.

                                                                 Ход урока:

> Организационный момент.
> Проверка д/з: тест на компьютере «Работа с изображениями и логическими тэгами»
> Объяснение нового материала.

1. Графические форматы

2. Изначально HTML поддерживал работу с двумя графическими форматами: GIF и JPEG, в последнее время все большее распространения находит формат PNG. Каждый из форматов имеет свои достоинства и недостатки, которые определяют область его применения.

3. GIF – Graphics Interchange Format

4. Формат GIF был разработан коммерческой Online-службой CompuServe для передачи графики по сети между различными платформами. GIF поддерживает до 256 цветов, что является существенным ограничением формата. GIF практически непригоден для передачи фотографических изображений.

5. В то же время формат GIF обладает рядом свойств, определивших его широкое применение при разработке Web-страниц:

6. • Прозрачность. Изображения в формате GIF могут иметь прозрачные области, что позволяет отойти от стандартных прямоугольных форм и создавать элементы страницы произвольной формы.

7. Чередование строк. Графический файл может быть записан таким образом, что при отображении сначала будет загружаться каждая четвертая строка, растянутая на три соседних. Естественно, качество отображения будет достаточно низкое. Затем, по мере загрузки последующих строк, изображение примет окончательный вид. Такая схема позволяет пользователю еще до окончательной загрузки графического файла понять, что именно представлено на изображении.

8. Анимация. Форматом GIF предусмотрена возможность создания анимированных изображений. Фактически это несколько изображений, записанных в один файл и чередующихся с заданным интервалом времени.

9. Область применения GIF-файлов ограничивается и применяемым алгоритмом сжатия изображений, чья эффективность зависит от разнообразия цветов в изображении, наличия одноцветных областей. Наибольшую экономию объема файла дают изображения с небольшим количеством цветов и большими одноцветными областями. Поэтому формат GIF широко используется для отображения графических меню и кнопок, а также для создания технических иллюстраций (графики, схемы, диаграммы и т.п.). В то же время использование формата GIF для отображения полноцветных фотографий практически не находит применения по причине малого количества передаваемых цветов и низкой эффективности алгоритма сжатия для таких изображений.

10. JPEG – Joint Photographic Experts Group

11. Формат JPEG был разработан для передачи фотографий между различными платформами. Благодаря поддержке 24-битовой цветовой палитры (миллионы цветов) формат JPEG получил широкое распространение для отображения иллюстраций высокого качества. При этом применяемый в JPEG алгоритм сжатия позволяет варьировать размер загружаемого файла в зависимости от требуемого качества отображения иллюстрации.

12. Кроме того, формат JPEG поддерживает опцию прогрессивный JPEG, которая во многом похожа со свойством чередования строк формата GIF, но реализована на совершенно других принципах. В файл JPEG записывается несколько иллюстраций полного размера, но различного уровня качества. Сначала отображается рисунок низкого качества (и, соответственно, малого объема), затем догружаются все более качественные изображения. При этом общий объем загружаемого файла возрастает несущественно по сравнению с оригинальным JPEG.

13. PNG – Portable Network Graphics

14. В последнее время все большее распространение получает формат PNG, который был разработан для сетевых иллюстраций с целью заменить форматы JPEG и GIF и объединивший в себе все их преимущества.

15. Формат PNG поддерживает 24-, 32- и 48-битовую цветовую палитру, 8- и 16- битовую палитру серого, 8-битовую пользовательскую палитру. Реализованный в PNG алгоритм сжатия позволяет сжимать изображения лучше чем GIF (от 5 до 25%). Для него реализован механизм чересстрочного вывода первого изображения с использованием двумерной чересстрочности, что позволяет обеспечить минимальные затраты времени на вывод первого изображения.

Кроме того, в PNG реализован эффективный механизм контроля целостности файла, позволяющего обнаружить ошибки при передаче по сети. Хотя PNG и поддерживает прозрачность, такие изображения некорректно отображаются в некоторых версиях MSInternetExplorer, поэтому если вы хотите, чтобы во всех браузерах рисунок с прозрачным фоном отображался корректно, лучше использовать формат GIF.
Повторяем основные элементы синтаксиса  html.

Разбираем пример создания гиперссылки и поясняем, что это такое.  На основании этого объясняем синтаксис написания гиперссылок.
Связываем гиперссылками несколько страниц.
Объясняем, что такое относительная гиперссылка, а что  такое абсолютная.
Именованный якорь для переходов внутри страницы или в конкретную часть какой либо страницы.
Ссылка mailto.

> Закрепление изученного материала:
Выполнить упражнение к уроку 6.

Задание на дом:
Изучить материал в тетради наизусть.

Упражнение к уроку 6:

На сохраненной вами странице page1.htmlпоставить гиперссылки на страницы spiski.html, text.html, img.htmlуказав в качестве якоря соответственно темы работа со списками в html, работа с текстом в htmlи работа с картинками в html.

Надіслав вчитель інформатики Тарасов Дмитро.