- •Лабораторная работа №1 html, dhtml, JavaScript
- •1. Фреймы
- •2. Расположение фреймов
- •2.1 Элемент frameset
- •Строки и столбцы
- •Вложенные наборы фреймов
- •Разделение данных между фреймами
- •2.2 Элемент frame
- •Задание исходного содержимого фрейма
- •Визуальное представление фрейма
- •3. Определение цели фрейма
- •3.1 Установка цели по умолчанию для ссылок
- •Dynamic html
- •JavaScript
- •Пример разработки Web-страницы с использованием dhtml:
- •Menu.Htm:
- •Test.Htm:
- •Script.Htm:
Лабораторная работа №1 html, dhtml, JavaScript
Цель работы: Получить навыки разработки Web-страниц с использованием DHTML.
Задачи:
- получить навыки по компоновке текстовой информации и созданию гипертекстовых документов с использованием простых текстовых редакторов;
- познакомиться с синтаксисом, основными тегами и атрибутами языка HTML;
- научиться формировать гипертекстовые ссылки и списки и создавать на этой основе связанные гипертекстовые страницы;
- научиться создавать скрипты на языке JavaScript в HTML документах;
- научиться использовать DHTML для улучшения дизайна Web-страниц.
Теоретическая часть:
HTML
HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-броузеров. Когда документ создан с использованием HTML, WEB-броузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.
Большинство документов имеют стандартные элементы, такие, как заголовок, параграфы или списки. Используя тэги HTML вы можете обозначать данные элементы, обеспечивая WEB-броузеры минимальной информацией для отображения данных элементов, сохраняя в целом общую структуру и информационную полноту документов. Все что необходимо, чтобы прочитать HTML-документ - это WEB-броузер, который интерпретирует тэги HTML и воспроизводит на экране документ в виде, который ему придает автор.
HTML-тэги могут быть условно разделены на две категории: тэги, определяющие, как будет отображаться WEB-броузером тело документа в целом и тэги, описывающие общие свойства документа, такие как заголовок или автор документа. Основное преимущество HTML заключается в том, что ваш документ может быть просмотрен на WEB-броузерах различных типов и на различных платформах.
Особенности языка HTML:
Делает страницу видимой для различных Web-броузеров.
Задаёт стиль шрифтов, заголовков, фрейм-компонентов, форматирует текст.
Включает в Web-страницу таблицы, картинки, элементы мультимедиа.
Создаёт из текста и из графического или анимированного изображения гиперссылки, указывающие на другие Web-документы.
Имеет возможность создания карт-изображений с активными областями, т.е. создания множественной гиперссылки.
Имеет возможность включения интерактивных компонентов: бланков, анкетных и опросных форм, требующих участия пользователя.
Способен нести в себе элементы других языков: XSL, Java, JavaScript и т.д.
Все документы HTML имеют одну и ту же структуру, определяемую определенным набором тегов. Теговую модель можно представить в следующем виде: <имя элемента, список атрибутов> содержание элемента </имя элемента> Например, применим тег <P> (новый параграф в тексте): <P align=center>Это новый параграф</P> В рассмотренном примере
P — это имя тега;
align=center — атрибут тега, указывающий на то, что текст внутри параграфа необходимо разместить по центру;
Это новый параграф — содержание параграфа;
/P — закрывающий тег, указывающий на конец параграфа;
Гипертекстовая ссылка определяется при помощи парного тега <A>. Обязательным атрибутом является HREF=. В качестве значения атрибута используется адрес URL документа, на который указывает ссылка, ссылка может быть локальной.
Примеры:
<A HREF="http://bsuir.unibel.by">Сайт БГУИР</A>
Для представления графики используют форматы файлов GIF и JPEG. Для вставки рисунка используется текстовый элемент, задаваемый непарным тегом <IMG>. Тег <IMG> должен содержать обязательный атрибут SCR=, задающий адрес URL файла с изображением. Пример: <img SRC="http://bsuir.unibel.by/images/logo.gif">
Любой гипертекстовый документ состоит из двух частей: заголовка документа (HEAD) и тела документа (BODY) <HTML> <HEAD><TITLE> Содержание заголовка </TITLE></HEAD> <BODY> Содержание тела документа </BODY> </HTML>
Создание простейшей Web-страницы.
Запустите текстовый редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).
Введите следующий документ <HTML> <HEAD> <TITLE>Заголовок документа </TITLE> </HEAD> <BODY> Содержание документа </BODY>
</HTML>
Сохраните этот документ под именем first.html Перед сохранением убедитесь, что сброшен флажок "Скрывать расширения для зарегистрированных типов файлов" (Пуск > Настройка > Панель управления > Свойства папки > Вид). В противном случае редактор Блокнот может автоматически добавить в конец имени расширение .ТХТ
Запустите программу Internet Explorer (Пуск > Программы > Internet Explorer).
Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл first.html
Посмотрите, как отображается этот файл — простейший корректный документ HTML. Где отображается содержимое элемента TITLE и где отображается содержимое элемента BODY.
Web – страница может coстоять как из одного окна, так и из нескольких окон – фреймов. Для каждого фрейма coздается отдельная страница. Файл, который открывает все фреймы чаще всего, является главным (с этого файла происходит загрузка остальных страниц) и имеет имя index.htm или index.html. В нем описывается, какие страницы будут представляться в окнах (фреймах) и как много места в % отношении они будут занимать по отношению ко всему окну броузера.
Пример. Три вертикальных фрейма
<html>
<frameset cols="33%,33%,*" frameborder="2">
// ширина первой и второй колонок по 33% общей ширины окна, третий фрейм занимает оставшееся пространство; ширина окантовки - 2 точки
<frame name="one" src="1.htm" frameborder="2" scrolling="yes">
// One – имя фрейма, 1.htm- исходный документ для фрейма, ширина окантовки - 2 точки, всегда предоставляется возможность прокрутки
<frame name="two" src="2.htm" frameborder="2" scrolling="no">
<frame name="three" src="3.htm" frameborder="2" scrolling="yes">
</frameset>
// < frameset ></ frameset > используется вместо <BODY>
</html>