Читайте также:
|
Лабораторная работа №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:
1. Делает страницу видимой для различных Web-броузеров.
2. Задаёт стиль шрифтов, заголовков, фрейм-компонентов, форматирует текст.
3. Включает в Web-страницу таблицы, картинки, элементы мультимедиа.
4. Создаёт из текста и из графического или анимированного изображения гиперссылки, указывающие на другие Web-документы.
5. Имеет возможность создания карт-изображений с активными областями, т.е. создания множественной гиперссылки.
6. Имеет возможность включения интерактивных компонентов: бланков, анкетных и опросных форм, требующих участия пользователя.
7. Способен нести в себе элементы других языков: XSL, Java, JavaScript и т.д.
Все документы HTML имеют одну и ту же структуру, определяемую определенным набором тегов. Теговую модель можно представить в следующем виде:
<имя элемента, список атрибутов> содержание элемента </имя элемента>
Например, применим тег <P> (новый параграф в тексте):
<P align=center>Это новый параграф</P>
В рассмотренном примере
Гипертекстовая ссылка определяется при помощи парного тега <A>. Обязательным атрибутом является HREF=. В качестве значения атрибута используется адрес URL документа, на который указывает ссылка, ссылка может быть локальной.
Примеры:
Для представления графики используют форматы файлов 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-страницы.
1. Запустите текстовый редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).
2. Введите следующий документ
<HTML>
<HEAD> <TITLE>Заголовок документа </TITLE> </HEAD>
<BODY> Содержание документа </BODY>
</HTML>
3. Сохраните этот документ под именем first.html
Перед сохранением убедитесь, что сброшен флажок "Скрывать расширения для зарегистрированных типов файлов" (Пуск > Настройка > Панель управления > Свойства папки > Вид). В противном случае редактор Блокнот может автоматически добавить в конец имени расширение.ТХТ
4. Запустите программу Internet Explorer (Пуск > Программы > Internet Explorer).
5. Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл first.html
6. Посмотрите, как отображается этот файл — простейший корректный документ 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>
Фреймы
Фреймы в HTML позволяют авторам представлять документы в нескольких разделах, которые могут быть независимыми или вложенными окнами. Это обеспечивает дизайнерам способ оставлять некоторую информацию видимой, в то время как другая информация прокручивается или заменяется. Например, в одном окне в одном фрейме может отображаться статический баннер, во втором навигационное меню, а в третьем - сам документ, который можно прокручивать или переходить к другому с помощью навигации во втором фрейме.
Вот простой документ с использованием фреймов:
<HTML><HEAD><TITLE>Простой документ с фреймами</TITLE></HEAD><FRAMESET cols="20%, 80%"> <FRAMESET rows="100, 200"> <FRAME src="contents_of_frame1.html"> <FRAME src="contents_of_frame2.html"> </FRAMESET> <FRAME src="contents_of_frame3.html"></FRAMESET></HTML>это может привести примерно к следующей структуре экрана:
Если агент пользователя не может представлять фреймы или сконфигурирован так, чтобы не делать этого, он должен генерировать содержимое элемента NOFRAMES.
Расположение фреймов
Документ HTML, в котором описывается компоновка фреймов (называемый документом с фреймами), выглядит не так, как документ HTML без фреймов. Стандартный документ имеет один раздел HEAD и один раздел BODY. Документ с фреймами имеет раздел HEAD и раздел FRAMESET, который заменяет раздел BODY.
В разделе FRAMESET задается расположение фреймов в основном окне агента пользователя. Кроме того, в разделе FRAMESET может присутствовать элемент NOFRAMES с альтернативным содержимым для агентов пользователей, не поддерживающих фреймы или сконфигурированных так, чтобы их не показывать.
Элементы, обычно помещаемые в раздел BODY, не должны присутствовать до первого элемента FRAMESET, иначе элемент FRAMESET будет игнорироваться.
Дата добавления: 2015-10-02; просмотров: 85 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Word combinations | | | Строки и столбцы |