- •Лабораторная работа №1
- •Краткие сведения из теории
- •Задание.
- •1. Запустите текстовый редактор и создайте html-документ со следующими данными:
- •2. Сохраните полученный документ под названием lab1.Htm.
- •3. Запустите браузер ms Internet Explore для просмотра данного документа. Лабораторная работа №2
- •Краткие сведения из теории
- •Задание.
- •2. Сохраните полученный документ под названием lab2.Htm.
- •3. Запустите браузер ms Internet Explore для просмотра данного документа. Лабораторная работа №3
- •Краткие сведения из теории
- •Задание.
- •2. Сохраните полученный документ под названием lab3.Htm.
- •3. Запустите браузер ms Internet Explore для просмотра данного документа. Лабораторная работа №4
- •Краткие сведения из теории
- •Задание.
- •Флаги-команды для вставки в текст объектов нетекстовой информации
- •Параметры графического изображения
- •Задание.
- •Задание.
- •1. Запустите текстовый редактор и создайте html-документ. В документ включите ссылки для более наглядного перемещения по документу.
- •Небольшая статья об Актюбинском Университете.
- •2. Сохраните полученный документ под названием lab6.Htm.
- •3. Запустите браузер ms Internet Explore для просмотра данного документа. Лабораторная работа №7
- •Краткие сведения из теории
- •Задание.
- •1. Запустите текстовый редактор и создайте html-документ с табличным представлением данных.
- •2. Сохраните полученный документ под названием lab7.Htm.
- •3. Запустите браузер ms Internet Explore для просмотра данного документа. Лабораторная работа №8
- •Краткие сведения из теории
- •Задание.
- •Задание.
- •1. Создайте многоконный интерфейс в html-документе, используя фреймы.
- •2. После сохранения полученных документов на диск запустите браузер ms Internet Explore для просмотра данного документа. Лабораторная работа №10
- •Краткие сведения из теории
- •Задание.
- •Задание.
- •Задание.
- •Основные теги
- •Теги оглавления
- •Атрибуты тела документа
- •Теги для форматирования текста
- •Гиперссылки
- •Форматирование
- •Графические элементы
- •Атрибуты таблицы
- •Атрибуты кадров
- •Формы Для форм, выполняющих какие-то функции должны быть запущены соответствующие cgi скрипты на сервере. Html только создает внешний интерфейс формы.
Задание.
1. Запустите графический редактор и создайте три рисунка сохраните их на диск в формате .jpg или .gif.
2. Запустите текстовый редактор и создайте HTML-документ используя один из рисунков в качестве фона остальные два расположите внутри документа.
Название страницы: Работа с графикой.
Содержимое страницы: Графическое оформление html-документа
3. Сохраните полученный документ под названием lab5.htm.
4. Запустите браузер MS Internet Explore для просмотра данного документа.
Лабораторная работа №6
Тема: Использование ссылок в HTML-документе..
Цель работы: Научиться встраивать ссылки в HTML-страницы для быстрого перехода к нужной информации.
Инструменты: Текстовый редактор NotePad. HTML-браузер MS Internet Explore.
Краткие сведения из теории
Одной из самых мощных возможностей WWW является возможность организации гипертекстовых связей между документами. Прежде чем описывать средства языка HTML для организации таких связей, следует рассказать об идентификации ресурсов в Internet. Объемы информации в Internet огромны, и существует множество способов доступа к ним. Для указания местоположения отдельного ресурса используется запись под названием URL (Uniform Resource Locator). Она описывает способ доступа к ресурсу и его местоположение. URL имеет вид:
метод://[имя-пользователя@][хост][:порт][имя-ресурса], где
метод идентифицирует метод обращения к ресурсу,
имя-пользователя указывает на учетное имя пользователя в системе, обычно предполагается анонимный доступ.
хост указывает сетевое имя (или сетевой адрес) хоста, на котором содержится ресурс.
порт: номер порта для доступа к сервису.
имя-ресурса идентифицирует ресурс на хосте и зависит от метода доступа.
Существуют идентификаторы способов доступа к ресурсам для большинства сервисов Internet. Обозначения таковы:
http - для доступа по протоколу HTTP, используемому в WWW.
ftp - для доступа по протоколу FTP.
telnet - для доступа по протоколу telnet, эмуляция терминала.
gopher - для доступа к Gopher-серверам.
wais - для доступа к WAIS (Wide Area Information System).
news - для доступа к новостям Usenet.
file - для доступа к локальным файлам.
Чтобы оформить какой-либо элемент документа в качестве гипертекстовой ссылки, достаточно лишь заключить его внутрь тега <A> (anchor иои якорь). Полный синтаксис тега таков:
<A параметры>
....
</A>
где параметры могут быть следующими:
HREF - обязательный параметр, определяет или URL или файл, на который мы ссылаемся. Если мы ссылаемся на файл, то поле HREF содержит имя файла в файловой системе Web-сервера.
NAME - если этот параметр указан, то ссылка никуда не ссылается. Неочевидно, но в этом случае тег <A> указывает именованную метку в документе, на которую потом можно будет сослаться используя символ # в параметре HREF.
target - параметр, указывающий имя окна или рамки в которой будет отображен документ. Если окна или рамки с таким именем не существует, будет открыто новое окно.
Задание цветов гиперсылок при помощи тега <BODY>
<BODY LINK - цвет гипертекстовой связи (ссылки)
<BODY VLINK - цвет ссылки, уже посещенной в прошлом
<BODY ALINK - цвет активной сылки.
Пример :
<A HREF="http://www.ru"> http://www.ru </A> - гиперсвязи
<A HREF=mailto:person@firm.ru> person@firm.ru</A> - гиперсвязь с адресом электронной почты
Якоря нацеленные внутри данного документа HTML могут указываться с помощью элемента A (именующего его с помощью атрибута name).
Таким образом, например, автор может создавать оглавление, элементы Которого являются ссылками на элементы заголовков H2, H3 и т.д. в том же документе. Используя элемент A для создания целевых anchors, можно записать:
<H1>Содержание;/H1>
<P><A href="#section1">Введение</A><BR>
<A href="#section2">Предыстория</A><BR>
<A href="#section2.1">Более конкретные заметки</A><BR>
...продолжение содержания...
...тело документа...
<H2><A name="section1">Введение</A></H2>
...раздел 1...
<H2><A name="section2">Предыстория</A></H2>
...раздел 2...
<H3><A name="section2.1">Более конкретные заметки</A></H3>
...раздел 2.1...
Использование рисунка в качестве ссылки
<a href="http://www.palmpc.ru"><img src="Images/up.gif" width="200" height="80" border="0"></a>