- •«Мурманский государственный технический университет»
- •Методические указания к лабораторным работам Основы создания Web-документа Мурманск
- •Введение
- •Лабораторная работа №1 Основы html
- •Раздел 1. Структура документа
- •Раздел 2. Обязательные метки
- •Раздел 3. Непарные метки
- •Раздел 4. Форматирование шрифта
- •Раздел 5. Списки
- •5.4. Вложенные списки
- •Лабораторная работа №2 Создание гиперссылок, работа с изображениями
- •Раздел 1. Гиперссылки
- •1.1. Локальные ссылки
- •1.2. Ссылки на ресурсы
- •Раздел 2. Цветовая гамма html-документа
- •Раздел 3. Бегущая строка Задание. Бегущая строка
- •Раздел 4. Изображения в html-документе
- •4.1. Обтекание графики текстом в документе html
- •4.2. Выравнивание текста html-страницы
- •4.3. Пустая область вокруг изображения html-страницы
- •4.4. Списки с графическими маркерами html-страницы
- •4.5. Задание размеров изображения html-документа
- •Лабораторная работа №3 Работа с таблицами.
- •Раздел 1. Создание таблиц
- •1.1. Фон таблицы
- •1.2. Задание высоты и ширины ячеек
- •1.3. Задание выравнивния в ячейке. Объединение ячеек
- •Раздел 2. Вложенные таблицы
- •Раздел 3. Границы таблицы.
- •Лабораторная работа №4 Работа с формами
- •Раздел 1. Форма.
- •Тип элемента radio
- •Тип элемента checkbox
- •Тип элемента text
- •Тип элемента password
- •Тип элемента reset
- •Тип элемента submit
- •Тип элемента image
- •Элемент select
- •Элемент textarea
- •Лабораторная работа №5
- •Раздел 1. Работа с фреймами
- •Задания для самостоятельного выполнения:
- •Раздел 3. Зарезервированные имена фреймов
- •Лабораторная работа №6 Работа с картой изображений
- •Раздел 1. Карта-изображение
- •1.1. Основные теги для создания карты
- •Лабораторная работа №7 Заголовок html-документа
- •Раздел 1. Заголовок html-документа
- •Лабораторная работа№8 Cascading Style Sheets/Каскадные таблицы стилей. Цвет и фон
- •Раздел 1. Способы применения правила css к Html-документу
- •Метод 1: Инлайн/In-line (атрибут style)
- •Метод 2: Внутренний (тэг style)
- •Метод 3: Внешний (ссылка на таблицу стилей)
- •Раздел 2. Цвет и фон
- •2.1. Свойство color
- •Свойство background-color
- •Свойство background-image
- •Свойство background-repeat
- •Свойство background-attachment
- •Свойство background-position
- •Лабораторная работа №9 Шрифты. Ссылки
- •Раздел 1. Свойства шрифтов
- •Свойство font-family
- •Свойство font-style
- •Свойство font-variant
- •Свойство font-weight
- •Свойство font-size
- •Сокращенная запись font
- •Раздел 2. Текст
- •Свойство text-indent
- •Раздел 3. Ссылки
- •Лабораторная работа№10 Идентификация и группирование элементов (class и id) Группирование элементов (span и div)
- •Раздел 1. Группирование элементов с помощью class
- •Раздел 2. Идентификация элемента с помощью id
- •Лабораторная работа№11 Боксовая модель
- •Раздел 1. Боксовая модель
- •Заполнение элемента
- •Установка ширины блока[width]
- •Установка высоты блока[height]
- •Размещение элементов на странице
- •Всплывающие элементы (поплавки)
- •Свойство float
- •Свойство clear
- •Позиционирование элементов
- •Принципы css-позиционирования
- •Абсолютное позиционирование
- •Раздел 3. Работа со слоями
- •Рекомендуемая литература
1.1. Локальные ссылки
Чтобы задать переход к определенному месту внутри документа необходимо выполнить следующие действия.
1. Создать в документе, к которому будет задан переход, некоторую опорную точку, или метку. Например, создадим метку с именем ААА.
<A NAME="AAA">Переход закончен</A>
Слова "Переход закончен" при этом никак не будут выделены в тексте документа. Затем в файле в любом другом месте можно определить переход на эту метку:
<A HREF="#AAA">Переход к метке AAA</A>
На практике это очень удобно при создании больших документов. В начале документа можно поместить оглавление, состоящее из ссылок на метки, расположенные в заголовках разделов документа. Во избежание недоразумений рекомендуется задавать имена меток латинскими буквами. Следите за написанием имен меток: большинство браузеров отличают большие буквы от маленьких. Если имя метки определено как AAA, ссылка на метку aaa или AaA не выведет Вас на метку AAA, хотя документ, скорее всего, будет загружен корректно.
1.2. Ссылки на ресурсы
Кроме ссылок на HTML-документы возможны ссылки и на другие виды ресурсов:
1. загрузка файла
<A HREF="ftp://server/directory/file.ext">Выгрузить файл</A>
Такая ссылка, если ей воспользоваться, запустит протокол передачи файлов и начнет выгрузку файла file.ext, находящегося в каталоге directory на сервере server, на локальный диск пользователя.
2. ссылка на адрес электронной почты
<A HREF="mailto:user@mail.box">Послать письмо</A>
Если пользователь совершит переход по такой ссылке, у него на экране откроется окно ввода исходящего сообщения его почтовой программы. В строке To: ("Куда") окна почтовой программы будет указано user@mail.box. Разберем все, что мы знаем о связывании, с помощью примера 2_2.
Задание 2.2
Наберите в редакторе «блокнот» текст следующего HTML-документа:
<html>
<head>
<title>Пример 2_2</title>
</head>
<body>
<hr>
<A HREF="#gl1">Глава1</A><br>
<hr>
<A HREF="#gl2">Глава2</A><br>
<hr>
<A HREF="#gl3">Глава3</A><br>
<hr>
ВВедение
<p>
<pre>Хочется добавить что сайты созданные чисто на языке HTML ,
будут статичны. иными словами: всегда одни и те же, в них нет
непосредственной реакции на действия посетителя.
С языком программирования JavaScrip эти ограничения можно
обойти- и это совсем не сложно!
{добавить 20 пустых строк}
</pre></p>
<A name=gl1>Глава1</A><br>
<p>
<pre>В HTML документы записываются в ASCII
Формате и поэтому могут быть созданы и
отредактированы в любом текстовом редакторе
( например, Emacs, на UNIX машинах,
или любом редакторе на IBM PC).
Если у вас нет специального HTML редактора
то можно воспользоваться
блокнотом
{добавить 20 пустых строк}
</pre></p>
<A name=gl2>Глава2</A><br>
<p>
<pre>Важно:все названия страниц должны быть
написаны по английски иначе вам не дадут
поместить их в интернет,первая главная
страница должна обязательно называться
index.html!!!
{добавить 20 пустых строк}
</pre></p>
<A name=gl3>Глава3</A><br>
<p>
<pre>В отличие от документов в большинстве
текстовых процессоров, прерывания строк и
слов в HTML-файлах не существенны. Обрыв
слова или строки может происходить в любом
пункте в вашем исходном файле, при просмотре
это прерывание будет проигнорировано.
{добавить 20 пустых строк}
</pre></p>
<A HREF="mailto:user@mail.box">Послать письмо</A>
</body>
</html>
Сохраните документ с именем пример2_2.htm, откройте в браузере.
Аналогично можно добавить переход к метке другого документа:
<A HREF="[имя файла]#[имя метки]">[комментарий]</A>
Внесите в файл пример2_1.htm коррективы, обеспечивающие переход на Главу3 в файле пример2_2.htm, сохраните изменения, просмотрите файл в браузере.
Для создания ссылки на графический файл достаточно прописать следующую строчку:
<A HREF="[имя файла с рисунком]">[комментарий]</A><br>
Внесите в файл пример2_1.htm коррективы, обеспечивающие переход на какой-либо графический файл, сохраните изменения, просмотрите файл в браузере.