Гипертекст это способ организации документа позволяющий

Используется учебник “Информатика” Н.Угриновича для учеников 8 класса.

• освоение основных приемов по созданию гиперссылок в текстовом редакторе;

• формирование умений анализировать, выделять главное, сравнивать, формулировать определения

• воспитание аккуратности, добросовестности, привитие интереса к изучаемому предмету

1. Организационный момент 1 мин.
2. Объяснение нового материала 19 мин.
3. Практическая работа 23 мин.
4. Подведение итогов 2 мин.

Объяснение нового материала. Учащиеся знакомятся с текстом учебника и готовятся отвечать на вопросы.

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

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

Закладка – это элемент документа, которому присвоено уникальное имя. Закладки размещаются на тех страницах документа, куда должны осуществляться переходы по гиперссылкам.

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

Технология гипертекста, распространенная на Web-страницы в Интернете, формирует Всемирную паутину, связывающую миллиарды документов на сотнях миллионах компьютеров в единое информационное пространство”.

• Для чего предназначен гипертекст?
• Где используется технология гипертекста?
• Как визуально определяется гиперссылка в тексте?
• Между какими объектами устанавливается связь при создании гиперссылок?
• Как осуществляется переход с одного места в гипертексте на другое?
• Сформулируйте определение гипертекста и гиперссылки.

В итоге обсуждения учащиеся самостоятельно формулируют (и записывают в тетрадь) определения:

“Гиперссылка – выделенный фрагмент документа, связанный с неким объектом (файлом или определенным местом исходного документа), которому передается обращение при щелчке мыши.

Гипертекст – способ организации документа, при котором осуществляется переход с одного места на другое с помощью ссылок.

• В документах
• В справочных системах
• В глобальной сети Интернет”

3. Практическая работа направлена на знакомство с использованием гиперссылок в справочных системах и глобальной сети Интернет, а также на освоение технологии создания гипертекста в текстовом процессоре OpenOffice OpenWriter . Учащиеся получают текст задания, работают самостоятельно, учитель помогает по мере необходимости слабым ученикам.

1-Запустить приложение OpenOffice OpenWriter . Получить с помощью справочной системы и записать в тетрадь ответ на вопросы: как выделить слово, как выделить абзац?

Подсказка : Вызов справочной системы – пункт в строке меню. В содержании последовательно выбрать разделы “Ввод, перемещение и выделение” a “Выделение” a “Выделение текста и рисунков” a “Выделение текста и рисунков с помощью мыши”

2-Открыть файл Создание гипертекста.doc из папки Текстовые документы . Сохранить файл в папке вашего класса под именем «Фамилия 8». Создать оглавление и гиперссылки на разделы документа:

• Ввод, редактирование и форматирование текстов
• Методы представления документов
• Сохранение данных на компьютере
• Проверка правописания
• Литературное редактирование

1. Вначале создайте закладки. Для создания закладки выделите элемент документа, который будет являться закладкой (заголовок раздела документа), и выполните действия Вставкаa Закладка, напишите имя закладки (первое слово раздела документа) и щелкните по кнопке Добавить.
2. Создайте оглавление. Для создания оглавления установите курсор в строку после заголовка “Средства работы с текстовыми документами” и выполните действия Вставкаa Оглавление и указатели, перейдите на вкладку Оглавление и выберите понравившийся вам вид оформления оглавления. Оглавление формируется автоматически, выбираются заголовки, оформленные с помощью стиля. Обратите внимание на то, что заголовок всего документа (“Средства работы с текстовыми документами”) тоже включен в оглавление. Отмените вставку оглавления. Измените стиль первого заголовка на обычный и снова выполните действия по созданию оглавления. После этого снова измените стиль данного заголовка на Заголовок1.
3. Для создания гиперссылок надо выделить указатель ссылки (один из пунктов оглавления) и выполнить действия Вставкаa Гиперссылка. В окне “Добавить гиперссылку” с помощью кнопки Обзор текстового поля Имя объекта в документе выберите нужную закладку.
4. Проверьте работу гиперссылок.

3. Запустите Internet Explorer, в адресной строке напишите адрес провайдера нашей школы www.novotec.ru, перейдите на ссылку Город, потом на ссылку Администрация города. Обратите внимание на то, что в адресной строке изменился URL-адрес сайта. В разделе Образование познакомьтесь с информацией о нашей школе.

В Приложении 1 приведен файл Создание гипертекста.doc, в Приложении 2 – образец выполненной учениками работы.

При подведении итогов учащиеся формулируют, что нового узнали на уроке:

• Понятие гипертекста
• Понятие гиперссылки
• Примеры использования гиперссылок
• Технологию создания гипертекста в текстовом процессоре Word.

Источник

ТЕМА 7.3. ТЕХНОЛОГИЯ СОЗДАНИЯ ГИПЕРТЕКСТОВЫХ ДОКУМЕНТОВ

• ознакомиться с основами языка разметки гипертекста HTML;
• ознакомиться с принципами создания гипертекстовых страниц с помощью текстового редактора и с помощью редактора гипертекстовых страниц Dreamweaver;
• научиться создавать сайт, состоящий из нескольких страниц.

Оглавление

7.3.1. Принципы гипертекстовой разметки

Гипертекстовые страницы создаются с помощью языка разметки гипертекста HTML (HyperText Markup Language) в текстовом редакторе или в среде специальных редакторов web-страниц.

Гипертекстовый документ содержит:

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

Коды разметки представляют собой символы ASCII. Поэтому страницы можно создавать в текстовых редакторах.

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

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

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

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

Тэг-контейнер имеет следующую структуру:

Имя конечного тэга идентично имени начального, но перед ним ставится знак «/».

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

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

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

Но он может содержать атрибуты, задающие:

• WIDTH — ширину таблицы;
• ALIGN — расположение таблицы относительно других объектов страницы;
• BORDER — ширину границы;
• BGCOLOR — цвет таблицы.

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

Приведенный тэг задает ширину таблицы 780 пикселей, выравнивание — по левому краю, ширину рамки — 1 пиксел, цвет фона таблицы – слоновой кости.

Значения атрибутов принято заключать в одинарные или двойные кавычки, особенно, если они содержат несколько слов, разделенных пробелами. Длина значения атрибута ограничена 1024 символами.

Вставка специальных символов — CER (Character Entity Reference)

Специальные сочетания символов позволяют отображать на web –страницах те символы, которые могут быть неверно обработаны браузером. Например, символы, используемые тэгами (угловые скобки, двойные кавычки). Некоторые из них приведены в Таблице 1. Эти сочетания вводятся в нужном месте гипертекста без угловых скобок.

Таблица 1. Вставка специальных символов.

Символ

Имя

Описание

Больше

пробел

Пробел

Амперсанд

Фунт

Копирайт

Регистрированная торговая марка

Тэги можно разделить по назначению:

• тэги формирования структуры документа;
• тэги оформления страниц (вид текста, списки, изображения, списки, таблицы, картинки);
• тэги гипертекстовых ссылок и закладок;
• тэги интерактивных форм;
• тэги внедренных объектов, например, вызова программ.

7.3.2. Структура документа

Основная часть документа

HTML-документ позволяет вкладывать контейнеры друг в друга. Документ начинается с тэга — контейнера и заканчивается конечным тэгом .

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

Пример структуры документа:

Заголовок первого уровня

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

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

Для создания структуры (рис. 2) должно быть 3 файла. Файл с определением набора фреймов, который описывает количество кадров, их имена, размеры, наличие линеек прокрутки. Чтобы заполнить кадры нужно в тэге frame определить, какие файлы будут в них загружаться.

На рис. 2 в левом фрейме отображен список банков, каждый элемент которого является гиперссылкой. Щелчок по гиперссылке загружает в правый фрейм нужный файл. Атрибут Name задает имена кадров. Левый кадр имеет имя topics, правый — docum. Они задаются для управления загрузкой документов в нужный кадр. Файл, задающий фреймы выглядит следующим образом:

Заголовок документа

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

• TITLE (заглавие документа или его тема);
• META (метаинформация);
• STYLE (описатели стилей);
• SCRIPT (скрипты).

Элемент разметки TITLE

Контейнер TITLE служит для задания темы документа в World Wide Web. Так же именуется окно браузера, в котором документ просматривается. Слова из контейнера TITLE попадают в индекс поисковой системы.

Элемент разметки META

Тэг META позволяет хранить список ключевых слов и описание документа, которые используются для составления индекса поисковой системы.

Атрибут CONTENT отображает содержание описания документа.

При индексировании документы, в которых задана тема в тэгах TITLE, ключевые слова и описание документа в атрибутах тэга META, попадут в индекс некоторых поисковых машин.

Элемент разметки STYLE

Предназначение тэга разметки STYLE — размещение описания стилей. Описание стиля может встречаться и в теле страницы, но если оно находится в заголовке – правила отображения стиля действуют для всей страницы.

Атрибут тэга – TYPE задает тип стиля. Это может быть либо text/css, либо text/javascript:

Элемент разметки SCRIPT

1. Контейнер SCRIPT содержит код JavaScript, VBScript или JScript.
2. Он не обязательно должен находиться в заголовке, а может быть также и в теле документа.
3. Если открыт тэг начала, то должен быть тэг конца контейнера.
4. В общем виде запись контейнера выглядит следующим образом:

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

Основная часть документа

Оформление документа

Цвет элементов

Основная часть документа начинается с тэга .

Он может содержать атрибуты, которые определяют параметры всего документа, например, цвет текста, ссылки, цвет фона.

Цвета задаются названиями цветов, которые можно найти в специальных таблицах или шестнадцатиричными кодами, в которых каждые две цифры задают значения трех составляющих цвета – RGB (красного, зеленого, синего). Например, код цвета фона bgcolor =»# FF 0000″ задает максимальное значение красного (FF) и минимальные зеленого и синего.

Таблица 2. Цвета, используемые в Internet

Данные Таблицы 2 скопированы с сайта известного дизайнера А.Лебедева.

Белый цвет задается смешением максимальных значений красного, зеленого и синего цветов. Код его FFFFFF. Черный – наоборот все нули.

В тэге BODY можно задавать цвет фона страницы, текста, гиперссылок.

Пример определения цвета разных элементов страницы:

TEXT – цвет текста страницы;

BGCOLOR – цвет фона страницы;

LINK – цвет ссылок;

VLINK – цвет посещенных ссылок.

Другие элементы оформления

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

— выравнивание (center или left);

— ширина линии в процентах или пикселях;

— толщина линии в пикселях;

— задание цвета линии, действует в только в Internet Explorer.

7.3.3. Форматирование текста

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

Таблица 3. Тэги, оформляющие текст.

Назначение тэга

Имя

Атрибуты

Пример

Шрифт (задание размеров, цвета, вида)

Параграф (Начало нового абзаца)

Возможные значения – left; right; justify; center

Заголовок. Объявление текста заголовком. Можно задать заголовки шести уровней.

color – цвет align – выравнивание

текст

Полужирный текст

Верхний индекс, например для задания степеней

Type – тип маркера :.

Начало списка маркированного

Начало списка нумерованного

Перевод следующего за тэгом текста на новую строку

Встает заря во мгле холодной. На нивах шум работ умолк.

7.3.4. Вставка изображений

Тэг вставки изображения в простейшем варианте выглядит так:

SRC – обязательный атрибут, указывающий на файл–источник изображения, в данном случае — «photo.jpg». Предполагается, что файл находится в той же папке, что и страница, куда вставляется изображение. Если это другая папка, например, images, то ее имя необходимо указать:

Если же изображение находится в папке images на удаленном компьютере, то тэг выглядит так:

Тэг вставки изображения может иметь такие атрибуты как:

WIDTH – ширина изображения, значение которой задается в пикселях или в процентах от экрана. Важно предусмотреть, чтобы изображение не было слишком большим, если будет открываться на маленьком экране;

HEIGHT – высота изображения, значение которой задается в пикселях или процентах;

ALIGN – выравнивание, расположение относительно текста. Задаются такие значения атрибута как: слева, справа, по центру;

BORDER – ширина рамки. Значение задается в пикселях. Если рисунок является ссылкой и цвет его рамки не соответствует стилю остальных элементов страницы, можно задать рамку равной нулю;

ALT – альтернативный текст, представляющий собой фразу, комментирующую изображение;

HSPACE – расстояние между изображением и текстом по горизонтали в пикселях;

VSPACE – расстояние между изображением и текстом по вертикали в пикселях.

Чтобы вставить изображение таким образом, как на рис.2

Указанное изображение находится в одной папке со страницей. Его имя — paris_photo.jpg. Ширина изображения меняется в зависимости от размеров экрана и составляет 70% от его ширины (рис.2). Изображение имеет альтернативный текст. Рамка изображения отсутствует.

Рис. 2. Фрагмент гипертекстовой страницы с изображением

7.3.5. Таблицы

Широко применимым является тэг

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

Таблица задается тэгом-контейнером:

Таблица состоит из строк и столбцов (ячеек), которые указываются следующими тэгами:

— столбец (ячейка) таблицы.

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

Рис. 3. Представление изображений в таблице

Некоторые атрибуты таблицы, рядов и ее ячеек:

• WIDTH – ширина;
• HEIGHT — высота;
• ALIGN – выравнивание;
• VALIGH – расположение текста в ячейке по вертикали, возможные значения: top, bottom;
• ROWSPAN — объединение рядов, указывается числом (количество);
• COLSPAN – объединение столбцов (ячеек);
• BGCOLOR – цвет ячейки, ряда, таблицы;
• CELLSPACING – расстояние между ячейками;
• CELLPADDING – расстояние между содержимым и границами ячейки.

Атрибут CELLSPACING задает пространство между ячейками в пикселях.

Если нужно избавиться от пространства между ячейками значение атрибута CELLSPACING приравнивается нулю:

Атрибут CELLPADDING задает пространство между содержимым ячейки и ее границами, и также может быть использован для его уменьшения.

7.3.6. Гиперссылки

Сайт представляет собой набор связанных гипертекстовых документов. Самая главная страница сайта, которая загружается первой, имеет, как правило, имя index.html или main.html. Она содержит ссылки на другие страницы. Они могут быть оформлены в виде панели навигации. Имена страниц сайта могут иметь любые имена, но нужно помнить, что система различает строчные и заглавные буквы. Например, photos.html и Photos.html – это разные файлы. Страницы сайта могут находиться в одном каталоге (папке) или — в разных, или — на удаленном компьютере.

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

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

Гиперссылка активизируется благодаря атрибуту HREF ( hypertext reference – гипертекстовая ссылка), задающему адрес документа.

Например, имеется документ с фотографиями, имя которого paris.html. Он находится в одной папке с главным документом index.html.

Для создания гиперссылки нужно выбрать фразу или слово, например «Поездка в Париж», поместить их в тэг-контейнер , называемый якорем. HTML-код этой ссылки выглядит так:

Тэг делает ссылкой не только текст, но и изображения, и адреса электронной почты. Адрес документа задается по тем же принципам, что и для изображений:

• Поездка в Париж — файл находится в одной папке с текущей страницей;
• Впечатления — файл находится в папке pages;
• Фотоальбом — файл находится на удаленном компьютере.

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

Адрес ссылки (URL) может быть указанием на:

Ссылка может быть не только текстом, но и изображением.

IMG — это тэг вставки изображения;

SRC — атрибут указания файла с изображением. Само изображение — гиперссылка.

Гиперссылка может вызывать загрузку не только гипертекстовых документов, но и других файлов (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д:)

Закладки

Иногда важно сделать ссылку не на другую страницу, а на определенный текст текущей страницы. Место, к которому нужно перейти называют закладкой. Ему задают имя:

Гиперссылки на нужные закладки оформляются следующим образом:

7.3.7. Навигационные карты

Навигационная карта — это изображение, на котором определены геометрические области, являющиеся гиперссылками. Это дает возможность переходить с одного изображения к разным страницам, в зависимости от выбранной области.

Навигационная карта задается тэгом-контейнером MAP, описывающим ее. Геометрические области изображения определяются тэгом AREA.

Форма области задается атрибутом SHAPE:

• Прямоугольник — SHAPE=»rect»;
• Круг — SHAPE=»circle»;
• Многоугольник — SHAPE=»poly».

и соответствующими координатами. Их определяет атрибут COORDS. Число координат и порядок их значений зависят от выбранной формы (рис.4).

Рис. 4. Координаты геометрических областей навигационной карты

Левый верхний угол изображения (рис.4) имеет координаты (0;0). При задании координат прямоугольной области задаются координаты верхнего левого и нижнего правого углов области. Порядок записи координат для параметра coords следующий:

Предположим, что на рис. 4 x1=25, y1=36; x2=114, y2=98.

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

К описанию областей нужно добавить гиперссылки:

Это только описание карты. Кроме описания необходимо вставить в документ изображение с картинкой, выполняющей роль карты. Поскольку в документ может быть включено множество изображений, нужно определить имя того самого изображения, для которого сделано описание карты. Для этого используется атрибут NAME, задающий имя карты, например, тэг:

Для того, чтобы связать карту с изображением, необходимо в тэге вставки изображения использовать атрибут usemap=»#имя_карты» для картинки:

Для создания круглой области задаются координаты ее центра (x и y) и длина радиуса (R) в пикселях:

Допустим, координаты круга будут такие: x=46, y=48; а длина радиуса — R=35. Тогда:

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

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

Координаты задаются подряд через запятые:

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

7.3.8. HTML формы

Формы задаются для того, чтобы пользователь мог выполнять какие-либо действия на сайте.

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

Для управления этими элементами динамических web-страниц, необходимо обрабатывать информацию пользователя или с помощью Java скриптов, или Visual Basic скриптов в браузере пользователя, или с помощью компонента программного обеспечения Web-сервера CGI (Common Gateway Interface).

Форма создается тэгом-контейнером .

Атрибут METHOD указывает один из двух возможных методов отправки данных, введенных в форму:

GET — информация из формы добавляется в конец URL, указанного в описании тэга ;

POST — информация из формы пересылается по указанному адресу.

Атрибут ACTION указывает URL, вызываемый для обработки формы. Как правило, это адрес CGI-программы, обрабатывающей форму.

Тэги формы

TEXTAREA – этот тэг позволяет пользователю вводить более одной строки информации в текстовое поле. Пример:

Платонов, Юрий Петрович,
Санкт-Петербург

Где: NAME — имя поля ввода; ROWS — высота поля ввода в символах; COLS — ширина поля ввода в символах.

INPUT — тэг используется для ввода одной строки текста или одного слова. Атрибуты тэга:

• CHECKED — подтверждение , что CHECKBOX (флажок) или RADIOBUTTON (кнопка альтернативного выбора) будут выбраны;
• MAXLENGTH — количество символов, которое пользователи могут ввести в поле ввода;
• NAME — имя поля ввода, идентификатор позволяющий получить данные, помещенные пользователем в это поле;
• SIZE — размер поля в символах;
• SRC — URL, указывающий на изображение;
• TYPE — тип поля ввода. По умолчанию это простое поле ввода для одной строки текста.

Другие типы элементов формы:

• CHECKBOX — флажок, задает одно из значений ON или OFF (логические).
• HIDDEN – поле, не отображаемое браузером, не позволяет делать изменения, передает длину логина или пароля.
• PASSWORD – текстовое поле, не отображаемое браузером на экране.
• RADIO — поле выбора одной из альтернативных возможностей. Альтернатива обеспечивается созданием нескольких полей ввода с атрибутом TYPE=»RADIO» с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME. При выборе одного из полей ввода типа RADIO все остальные поля данного типа с тем же именем (атрибут NAME) автоматически станут невыбранными на экране.
• RESET — кнопка, при нажатии которой все поля формы примут значения, описанные для них по умолчанию.
• SUBMIT — кнопка, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы. Атрибут VALUE может содержать строку, которая будет высвечена на кнопке.
• TEXT — текстовое поле одной строки. Атрибуты MAXLENGTH и SIZE определяют максимальную длину вводимого значения в символах и размера отображаемого поля ввода на экране (по умолчанию принимается 20 символов). VALUE – атрибут, присваивающий полю значение по умолчанию или значение, которое будет выбрано при использовании элементов разного типа.
• LISTBOX — меню выбора.

Формы можно использовать для отправки не только небольших информационных сообщений в виде параметров, а также и для отправки файлов.

Рис. 5. Форма для отправления файла

HTML-код формы выглядит следующим образом:

Отправить данный файл :

7.3.9. Среда приложения для создания гипертестовых страниц Micromedia Dreamweaver

В окне редактора (рис. 6) строка заголовка отображает название страницы и имя файла.

Рис. 6. Окно приложения Micromedia Dreamveawer

Под окном заголовка — строка меню.

Слева — панель объектов, при помощи которой можно создавать различные объекты: таблицы, слои, вставлять картинки и многое другое.

Справа можно открывать дополнительные окна, например (рис.6), «HTML style», «Behaviors «, «CSS styles» и т.д.

Рис. 7. Окно параметров

Перед работой в приложении необходимо сделать начальные установки. Команда Preferences/General открывает окно, в котором можно задать необходимые параметры. Например, чтобы отображался и русский и английский текст нужно выбрать категорию Fonts/Encoding и правильно настроить Default Encoding, выбрав из набора шрифт, содержащий кириллицу. Здесь же можно задать другие параметры шрифта.

Рис. 8. Панель объектов.

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

Для изменения свойств объектов вызывается специальная панель properties (свойства), в полях которой задаются конкретные параметры объекта (рис.9).

Рис. 9. Панель свойств таблицы.

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

При создании сайта рекомендуется продумать его структуру. Затем создать папку, в которой будут располагаться все файлы сайта. В ней можно создать отдельные папки для используемых файлов с изображениями, например, IMAGES.

Команда Site>Define sites откроет окно настройки параметров сайта. Категория Local info позволяет задать имя сайта (рис.10), местный адрес папки с сайтом, а также HTTP Address – адрес сайта в Интернет.

Рис. 10. Окно настройки параметров сайта. Категория Local Info

Категория Remote Info позволяет задать адрес FTP сервера, в графе HOST Directory нужно указать папку на удаленном компьютере (рис.11), в которую Dreamweaver будет перемещать файлы созданного сайта.

Рис. 11. Настройки сайта Remote Info

В поле Login ввести логин пользователя на удаленном компьютере. В поле Password — пароль.

Вопросы для закрепления материала

1. Что представляет собой файл с гипертекстом?
2. Что такое тэг? Автономный тэг? Тэг-контейнер?
3. В каком приложении можно создать гипертекстовую страницу?
4. Какие расширения имеют файлы с гипертекстом?
5. Какова структура гипертекстовой страницы?
6. Что такое Фрейм (кадр)?
7. Для чего используются тэги , ?
8. Как задается цвет элементов гипертекстовой страницы?
9. Каким образом форматируется текст гипертекстовой страницы?
10. Как создать гиперссылку?
11. Какие атрибуты могут менять изображения гипертекстовых страниц?
12. Для чего используются таблицы?
13. Что такое карта?
14. Каковы принципы создания гипертекстовых страниц в приложении Micromedia Dreamweaver ?

Версия для печати

Хрестоматия

Практикумы

В рамках данной работы Вы должны будете освоить технологию:

Источник

Читайте также:  Зрение как способ получение информации

Оцените статью

Вам также может понравиться

Ясень семена способ распространения

Ясень обыкновенный Fraxinus excelsior – так в ботанической

Ярлыки способы создания ярлыков ос windows

Создаем ярлыки на рабочем столе Windows Создаем ярлыки

Японское удобрение фуджима способ применения

Удобрения Фуджима Знаете потрясающее удобрение, палочка

Японский чай способ заварки

Технология заваривания японского чая Известно, что

• Правообладателям
• Политика конфиденциальности
• Контакты

Название практикума	Аннотация