Гипертекст 11 класс конспект урока

Обновлено: 05.07.2024

1 Тема урока Гипертекст

3 План урока: Организационный момент - 1 мин Актуализация опорных знаний – 7 мин Объяснение нового материала – 15 мин Практическая работа – 20 мин Подведение итогов – 2 мин

5 1.Строгая последовательность команд для исполнителя 2. Сведения об окружающем мире и протекающих в нем процессах 3. Он бывает нумерованный, маркированный, и даже многоуровневый 4. Мировая компьютерная сеть 5. В текстовом редакторе указывает место для следующей буквы 6. Портативный компьютер 7. Он разделяет слова в тексте 8. Устройство для ввода текстовой и графической информации 9. Цифровой носитель информации CD или DVD формата 10. Устройство вывода информации на бумагу

7 Для регистрации на данном сайте укажите адрес электронной почты.адрес электронной почты

9 Что такое гипертекст ? Гипертекст - это текст, который ветвится и выполняет действия по запросу Ted Nelson

10 Многие века существуют документы, где внутренние перекрестные ссылки и отсылки к другим документам образуют значительную долю содержания. Таковы, например, сочинения Аристотеля, в которых ссылки на другие источники играют огромную роль.

11 Принцип гипертекстовых ссылок в религиозных писаниях древности

12 ГИПЕРТЕКСТ – это текст, в котором осуществляется переход с одного места на другое с помощью гиперссылок. ГИПЕРССЫЛКА – выделенный фрагмент документа, связанный с другим объектом, которому передается обращение при щелчке мыши. Запиши в опорном конспекте:

13 Структура гиперссылки Гиперссылка Указатель ссылки- выделенный фрагмент текста или изображение в документе Адресная часть ссылки – название закладки в документе, на которую указывает ссылка

14 Закладки в тексте: размещаются на тех страницах документа, куда должны осуществляться переходы по гиперссылкам; имеют своё имя; в имени закладки первой должна быть буква; в имени закладки нет пробелов.

16 Практическая работа Создание гипертекста

Цели урока: введение понятия “гипертекст”, формирование умений создавать гипертекстовые документы.

обучающая – систематизация представлений учащихся об основных понятиях темы “Текстовый редактор”;
развивающие – развитие познавательного интереса учащихся, внимательности, логического мышления, умения выделять смысловые связи в тексте;
воспитательные – воспитание чувства ответственности, аккуратности, трудолюбия.

Тип урока: введение нового материала

Возраст учащихся: 10 класс.

персональные компьютеры с установленными на них программами Ms Word;
карточки с заданиями;
проектор для показа презентации.

Организационный момент – 3 мин.
Постановка цели – 2 мин.
Введение нового материала – 10 мин.
Выступление с рефератом – 5 мин.
Практическая работа – 20 мин.
Подведение итогов урока – 5 мин.

Для отображения в “плоском” тексте смысловых связей между основными разделами или понятиями можно использовать гипертекст, который позволяет структурировать документ путем выделения в нем слов-ссылок (гиперссылок). При активизации гиперссылки происходит переход на фрагмент текста, заданный в ссылке.

Гипертекст – это способ организации текстовой информации, внутри которой установлены смысловые связи между ее различными фрагментами. Такие связи называют гиперсвязями.

Гипертекстовую информацию можно читать не только в обычном порядке, “листая страницы” на экране, но и перемещаясь по смысловым связям в произвольном порядке.

(Показать пример гипертекстового документа.)

Гиперссылка состоит из двух частей: указателя ссылки и адресной части ссылки. Указатель ссылки – это объект, который визуально выделяется в документе. Адресная часть гиперссылки представляет собой название закладки в документе на который указывает ссылка. Закладка – это элемент документа, которому присвоено уникальное имя.

Создать документ, содержащий обычный текст. Для создания закладки выделить фрагмент текста, которому следует назначить закладку
Для создания закладки выделить фрагмент текста, которому следует назначить закладку.
Ввести команду Вставка – Закладка… В поле Имя закладки ввести имя закладки, которое должно начинаться с буквы. Щелкнуть по кнопке Добавить.
Для создания гиперссылки выделить фрагмент текста, который будет указателем гиперссылки.
Ввести команду Вставка – Гиперссылка… На диалоговой панели Вставка гиперссылки в окне выбрать имя закладки. Щелкнуть по кнопке ОК.
Повторить процедуру для создания необходимого количества гиперссылок.
Гипертекстовый документ создан.

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

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

Отцы гипертекста

"Гипертекст (текст, содержащий указатели на другие документы) — способ представления информации с помощью связей между документами. Термин был введен Тедом Нельсоном в 1965 году".

Первым отцом гипертекста считают американского ученого, инженера и организатора Ванневара Буша (1890—1974). Он также создал первые дифференциальные анализаторы, получившие в дальнейшем название аналоговых вычислительных машин, основал Национальный фонд Науки США (NSF), воспитал целую плеяду выдающихся ученых, одним из которых является Клод Шеннон.

В 1945 году, являясь научным советником президента Рузвельта, Буш опубликовал статью As We May Think, где была впервые высказана идея гипертекста (сам же этот термин появился двадцать лет спустя). Буш описал машину Меmех для быстрого просмотра научной литературы на основе ассоциативных связей. Машина предусматривала работу с текстовыми и графическими материалами в реальном времени, а в ее памяти были заложены большая библиотека, фонд фотографий и личных заметок.

Предполагалась такая форма организации текстового материала, при котором смысловые единицы представляются не в виде текста линейной последовательности, а в той последовательности, которая указывается пользователем. Данная идея лежит в основе построения гипертекстовых систем.

"С профессиональной точки зрения используемые нами способы распространения и просмотра результатов научных исследований сильно устарели и уже не отвечают современным требованиям, — писал Ванневар Буш в 1945 году. — Меmех представляет собой устройство, в котором человек может хранить содержимое всех своих книг, записей и корреспонденции и с помощью специальных механизмов чрезвычайно быстро и просто находить нужный материал. Оно является как бы продолжением его собственной памяти, значительно расширяя возможности последней".

Буш ошибся лишь в технических деталях: он представлял Меmех в виде стола со встроенным экраном для просмотра и записи микрофильмов. Что же касается главных идей, таких, как гипертекстовые ссылки и способы автоматического индексирования документов, то здесь ученый был совершенно прав. "Конечно, в устройстве предусмотрены справочные средства, основанные на обычной схеме индексирования материалов, — объяснял он. — Если пользователю нужно конкретное издание, он набирает на клавиатуре соответствующий код, и в одном из полей на экране сразу же появляется изображение титульного листа книги .

В октябре 1995 года во многих университетах США прошли торжественные конференции, посвященные 50-летию выхода в свет работы, где впервые высказывалась идея гипертекста.

Вторым отцом гипертекста является Теодор (Тед) Хольм Нельсон (р. 1937), который дал своему глобальному издательскому проекту название Xanadu. Корни этого названия можно отыскать в рассказах знаменитого венецианского купца, путешественника и знатока Востока Марко Поло, опубликованных на французском языке. Там упоминается о сказочном Владении — Shan-Du хана Хубилая, у которого Марко Поло прожил 12 лет.

Теодор Нельсон почерпнул сведения о сказочном Владении (Стране) Xanadu из поэмы Kubla Khan английского поэта Сэмюэля Колриджа. Нельсон объяснял, что свою работу он назвал таким образом, чтобы подчеркнуть, что это "волшебное место — вселенский компендиум (сжатое суммарное изложение основных положений.) литературы, где ничего и никогда не будет забыто".

В 1965 году вышел первый печатный труд Нельсона (A File Structure for the Complex, the Changing, and the Indeterminate), где были изложены его идеи, касающиеся связанных текстов, и где впервые употребляется термин гипертекст [1, 2].

Работы над проектом Xanadu развернулись в Гарвардском университете. Предполагалось создание глобальной, постоянно развивающейся литературной среды со всевозможными ссылками. Пытаясь улучшить свой проект, Нельсон несколько раз его пересматривал, причем в 1971 году стал работать с новой группой специалистов. Через некоторое время вышла книга Нельсона Computer lib, где он призывал энтузиастов присоединиться к работе. В статье Dream Machines, выпущенной тогда же, Нельсон уверял, что проект будет завершен в 1976 году. Однако этого не случилось В конце 1970-х годов Нельсон вновь меняет состав своей группы.

В 1981 году было закончено проектирование универсального сетевого сервера, который Нельсон описывал в книге Literary Mashines, а спустя еще пару лет появилась Xanadu Operating Company (XOC), организованная для завершения проекта. Затем лицензия, дающая право продолжать создание универсального сетевого сервера, приобреталась фирмами: Autodesk – разработчиками широко известной системы AutoCAD, Metex (получившей позже название Filoli) и Sense Media.

Проект Xanadu так и не был завершен. Тем не менее он оказал весьма существенное влияние на развитие современных систем гипертекста — Всемирная паутина (WWW) фактически является реализацией идей Нельсона. Однако сам он видит вещи подругому: "Многие думают, что Xanadu был попыткой построить WWW. Напротив, WWW явилась тем, что мы пытались предотвратить. "

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

Подписи к слайдам:

Шрифт – это полный набор символов определенного

Абзац с литературной точки зрения – это часть таблицы

Текстовые редакторы — это программы для создания,

редактирования, форматирования, сохранения и

Редактирование — это оформление текста

Форматирование — преобразование, обеспечивающее

добавление, удаление, перемещение или исправление

Символы – это буквы, цифры, пробелы, знаки

пунктуации, специальные символы

WORD- электронные таблицы

ГИПЕРТЕКСТ – это текст, в котором осуществляется переход с одного места на другое с помощью гиперссылок.
ГИПЕРССЫЛКА – выделенный фрагмент документа, связанный с другим объектом, которому передается обращение при щелчке мыши.

Запиши в опорном конспекте:

Указатель ссылки- выделенный фрагмент текста или изображение в документе

Адресная часть ссылки – название закладки в документе, на которую указывает ссылка

Серый круг вокруг точки начнёт исчезать.

Смотри на черную точку в центре несколько секунд.

Сконцентрируйте свой взгляд на красной точке в центре рисунка в течение примерно 30 секунд. Потом закройте глаза и поверните голову в сторону света.

Для учеников 1-11 классов и дошкольников
Бесплатные сертификаты учителям и участникам

Выберите документ из архива для просмотра:

Выбранный для просмотра документ HTML.doc

Цели и задачи урока:

· Сформулировать основные принципы создания WEB -страниц;

· Познакомить учеников с основными командами оформления текста;

· Продемонстрировать использование этих команд на конкретных примерах оформления WEB -страниц;

· Сформировать навыки и умения создания простейших WEB -страниц;

· Развивать логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль;

· Воспитывать аккуратность, внимательность, вежливость и дисциплинированность, бережное отношение к своему здоровью.

Оборудование: мультимедийная установка, программа презентаций Microsoft Office PowerPoint 2003, браузер Internet Explorer 6.0 или более новый, раздаточный материал.

1. Организационный момент (2 мин)

2. Актуализация опорных знаний (5 мин)

3. Изложение нового материала на примерах использования тегов

форматирования (16 мин)

4. Закрепление нового материала путём выполнения практического

задания (10 мин)

5. Итоги урока. Проверка кроссворда. Вопросы учеников (5 мин)

6. Домашнее задание (2 мин.)

1. Организационный момент.

Приветствие учащихся. Проверка присутствующих. Настрой на урок.

2. Актуализация опорных знаний.

· Что такое браузер?

· Какие виды браузеров Вы знаете?

· Как называются документы, которые мы можем просматривать в программе-браузере?

3. Изложение нового материала на примерах использования тегов форматирования.

a. Тег, атрибут, гипертекст;

b. WEB -страница, WEB -сайт; WEB -дизайн;

c. Язык разметки гипертекста HTML ;

· Команды (теги), определяющие структуру WEB -документа.

· Команды (теги) форматирования текста.

У каждого учащегося имеется таблица с основными тегами html (приложение 1).

4. Закрепление нового материала путём выполнения практического задания.

Для подготовки html-файла можно использовать текстовый редактор Блокнот (текст задания, приведённый ниже, представлен ученикам в виде текстового документа задание. txt ).

Название Web-страницы

Меня зовут ____. Мне __ лет.

Это моя первая Web-страница.

Тут я могу писать любой текст.

Я размещу эту страницу в Интернете.

В середине пары тегов … записывают (то есть программируют) то, что должно отображаться в окне браузера.

Практическое задание: сохраните представленный текстовый файл в свою папку под названием index с расширением .html.

Тег запишите так . Откройте файл с помощью браузера. Обратите внимание, что текст на экране расположен по другому, чем в задании: нет абзацев и абзацного отступа, текст выровнен по левому краю. Поэкспериментируйте с разными значениями параметров BGCOLOR и TEXT. Для переключения между режимом просмотра WEB-страницы в браузере и текстом HTML-файла используйте меню Вид ð Просмотр HTML-кода.

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

5. Итоги урока. Проверка кроссворда. Вопросы учеников.

В ходе всего урока учащиеся по мере поступления информации отгадывали кроссворд (приложение 2). Учащиеся сами проверяют кроссворд (слайд с ответами на доске) и выставляют количество набранных баллов.

6. Домашнее задание: выучить конспект, создать собственную страничку с помощью html -языка на свободную тему.

Приложение 1.

Основные теги HTML .

Описание и назначение

c link – цвет гиперссылки

c alink – цвет активной гиперссылки

c vlink – цвет посещённой гиперссылки

c text – цвет основного текста

c bgcolor – цвет фона страницы

c background – адрес графического файла, который будет использован в качестве фона страницы

c align – выравнивание ( left , right , center , justify )

выравнивание содержимого по центру

разрыв строки, переход на новую строку

заголовки (принимает значения в диапазоне 1-6)

c align – выравнивание

размер и цвет текста

c color – цвет текста

c face – имя или список имён шрифтов через запятую

c behavior – тип движения ( alternate , scroll , slide )

c bgcolor – цвет фона

c direction – направление движения ( left , right , up , down )

c height – высота строки при вертикальном движении

c width – ширина строки при горизонтальном движении

c scrollamount – скорость в пикселях на движение

c align – выравнивание таблицы

c background – адрес фонового изображения

c bgcolor – цвет фона

c border – толщина рамки

c width и height

изображение или видеоклип

c src – адрес графического изображения (файла)

c align – выравнивание изображения в окружающем тексте ( absbottom , absmiddle , baseline , bottom , left , middle , right , texttop , top )

c alt – замещающий текст

c border – толщина рамки

c width и height – ширина и высота изображения

c hspace и vspace – горизонтальные и вертикальные поля вокруг изображения

c target – место загрузки документа:

ü _blank – новое окно

ü _parent – родительский фрейм

ü _self – текущее окно или фрейм

ü _top – во всё окно браузера

разбивает окно браузера на фреймы (кадры или подокна)

c border – толщина рамки

c cols и rows – количество частей по вертикали и горизонтали

загружает страницы во фрейм (кадр)

c src – адрес странички, размещаемой в кадре

c scrolling – отображение полос прокрутки ( auto , no , yes )

Приложение 2.

Кроссворд на тему: Язык разметки гипертекста HTML .

По горизонтали:

1. Тег, который загружает страницы во фрейм;

2. Атрибут, выполняющий размещение объектов (текста, изображений, таблиц) на странице;

3. Атрибут, задающий цвет фона странички;

4. Тег, подписывающий заголовок странички;

5. Тег, обозначающий строку таблицы;

6. Тег, который обозначает “тело” документа;

7. Тег, размещающий объекты по центру странички;

8. Один из наиболее популярных браузеров;

9. Атрибут, задающий толщину таблицы или рамки рисунка;

10. Тег, с помощью которого создаются гиперссылки.

По вертикали:

11. Атрибут, который позволяет сделать картинку фоном странички;

12. Тег, позволяющий изменять цвет текста;

13. Тег, с помощью которого создаются бегущие строки;

14. Тег, позволяющий размещать картинки на web -страничке;

15. Глобальная компьютерная сеть;

16. Один из наиболее популярных браузеров;

17. Язык гипертекстовой разметки;

18. Тег, обозначающий столбец таблицы;

19. Тег, необходимый для создания таблицы на web -страничке;

20. Тег, в котором располагается служебная информация.

Выбранный для просмотра документ HTML.ppt

Описание презентации по отдельным слайдам:

HTML
Hyper Text Markup Language – язык гипертекстовой разметки.

Описательный язык разметки HTML имеет свои команды, которые называются тегами.

!Теги не чувствительны к регистру!

ТЕГ
Тег - элемент HTML, представляющий из себя текст, заключенный в угловые скобки <>. Тег является активным элементом, изменяющим представление следующей за ним информации.
Обычно используются два тега - открывающий и закрывающий.
Тег может иметь некоторое количество атрибутов.

АТРИБУТ
Атрибут – это компонент тега, содержащий указания о том, как браузер должен воспринять и обработать тег.

Синтаксис тега с атрибутом:

ГИПЕРТЕКСТ
Гипертекст (hypertext) – текст, содержащий ссылки на другие веб-страницы, серверы или ресурсы с возможностями выполнения переходов.

Открываем документ Задание.txt

Название Web-страницы

Меня зовут ____. Мне __ лет.
Это моя первая Web-страница.
Тут я могу писать любой текст.
Я размещу эту страницу в Интернете.

Создание web-страницы
1
2
3
Выполнить действия 1,2,3,4
4

WEB-страничка готова!
Удалить

Структура и управление
Обновление web-страницы
меню Вид  Просмотр HTML-кода

Цвета и атрибуты
Изменим цвет фона нашей странички. Для этого в тег добавим атрибут bgcolor:

Домашнее задание
выучить конспект;
создать собственную страничку с помощью html-языка на свободную тему.

Выбранный для просмотра документ Самоанализ урока HTML.doc

Специфика данного урока в том, что на нем невозможно выполнить всё, а лишь предложенный минимум, поэтому для учащихся, которые справились быстрее остальных в рамках данной темы был большой выбор того, что еще можно было сделать (кроме форматирования текста).

Задачи, которые я поставил перед собой перед проведением урока:

· Сформулировать основные принципы создания WEB -страниц;

· Познакомить учеников с основными командами оформления текста;

· Продемонстрировать использование этих команд на конкретных примерах оформления WEB -страниц;

· Сформировать навыки и умения создания простейших WEB -страниц;

· Развивать логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль;

Для достижения поставленных целей я выбрал традиционный урок формирования и закрепления умений и навыков.

Рассмотрев подробно этапы пройденного урока, я выделил следующее:

Дидактической задачей первого организационного этапа являлась подготовка учащихся к работе на уроке, постановка задачи. Систематичность организационного воздействия - взаимное приветствие, фиксация отсутствующих, организация внимания и положительная установка на урок позволили организационный момент сделать кратким.

Для более лучшего запоминания самых важных тегов и атрибутов, учащимся был дан кроссворд, который они заполняли на протяжении всего урока. Этот вид работы, ассоциированный у каждого человека со свободным временем (временем отдыха), позволял учащимся не входить в режим напряжения, тем более время на его разгадку ограничивалось лишь уроком. Важный момент здесь заключался и в самостоятельной оценке своей работы.

При изучении данной темы учащимся был просто необходим раздаточный материал (таблица с основными тегами и атрибутами), благодаря которому время, отведённое на урок, потрачено максимально рационально.

Считаю, что в результате проведения урока удалось закрепить у учащихся знания и умения, которые необходимы для создания простейшей web -странички. Кроме этого, удалось сформировать навыки самостоятельного принятия решения, т.к. обучающиеся весьма быстро определились с темами своих будущих проектов.

Читайте также: