- •Лабораторная работа №1 создание домашней web - страницы Цели работы:
- •Материально – техническое оснащение
- •Порядок выполнения работы
- •Методические указания
- •Гиперссылки и гипертекст
- •Технология клиент-сервер для World Wide Web
- •Классификация web-сайтов:
- •Структурные теги
- •Элементы форматирования на уровне блоков
- •Цветовая гамма html-документа
- •Контрольные вопросы:
- •Задания
- •Лабораторная работа №2 использование ссылок и объектов мультимедиа на web- страницах Цели работы:
- •Порядок выполнения работы
- •Методические указания
- •Объекты
- •Форматы графических изображений
- •Изображения в html-документе
- •Звук в html-документе
- •Видео в html-документе
- •Создание бегущей строки
- •Задания
- •Контрольные вопросы:
- •Лабораторная работа №3 стилевое оформление web - страницы Цели работы:
- •Методические указания
- •Контрольные вопросы:
Контрольные вопросы:
-
Понятия: гипертекст, гиперссылка, Web-страница, web-сайт, web-сервер, браузер.
-
Перечислите виды web-сайтов.
-
Перечислите этапы разработки web-сайтов.
-
Назначение языка HTML.
-
Структура html-документа.
-
Теги H1,H2,...H6 и их атрибуты.
-
Тег <p> и его атрибуты.
-
Тег <div> и его атрибуты.
-
Тег <br> и его атрибуты.
-
Тег <hr> и его атрибуты.
-
Тег <body> и его атрибуты.
-
Способы задания цвета с помощью атрибута color.
Задания
-
Создайте папку Лабораторная работа №….
-
С помощью приложения Блокнот создайте домашнюю страницу, содержащую информацию о Вас (не менее 6 абзацев), каждый абзац отделите линией и озаглавьте (например: «основные даты», «учеба», «увлечения», «друзья» и т.д.). Задайте цвет фона или фоновый рисунок.
Лабораторная работа №2 использование ссылок и объектов мультимедиа на web- страницах Цели работы:
-
Изучение тегов для создания ссылок на WEB-страницах;
-
Приобретение навыков создания ссылок на различные источники.
Порядок выполнения работы
-
Получить инструктаж по ТБ
-
При работе с ПЭВМ следует соблюдать правила эксплуатации электроустановок до 1000 В.
-
Шнуры, вилки, розетки, корпуса блоков ПЭВМ должны быть без повреждений. Учащийся должен пройти вводный инструктаж на рабочем месте, обо всех обнаруженных неполадках сообщать преподавателю.
-
Изучить методические указания.
-
Оформить отчет по работе (ответы на контрольные вопросы).
-
Получить допуск к работе.
-
Получить пояснения преподавателя по заданиям практической части.
-
Выполнить практическую часть.
Методические указания
Гиперссылки
Ссылки на другие документы в HTML создаются либо с помощью тега A, либо с помощью навигационных карт.
Тег A применяется, если ссылкой планируется сделать часть текста или целое изображение. Навигационные карты имеет смысл применять, если ссылкой будет часть изображения.
Тег A используется для создания и использования гипертекстовых ссылок.
Атрибуты:
HREF – определяет находящийся между начальным и конечным тегами текст или изображение как гипертекстовую ссылку (URL) на документ (и/или область документа), указанный в значении данного атрибута. Возможные значения:
http://... – создает ссылку на www-документ;
ftp://... – создает ссылку на ftp-сайт или расположенный на нем файл;
mailto:... – запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&";
news:.. – создает ссылку на конференцию сервера новостей;
telnet://... – создает ссылку на telnet-сессию с удаленной машиной;
wais://... – создает ссылку на WAIS – сервер;
gopher://... – создает ссылку на Gopher – сервер;
Если тип соединения и адрес машины не указаны, в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительные ссылки.
Например, ссылка <A HREF="docs/title.html">Документация</A> будет ссылаться на файл title.html в подкаталоге docs (относительно текущего).
NAME – помечает находящуюся между начальным и конечным тегами область документа как возможный объект для ссылки. В качестве значения нужно латиницей написать любое слово-указатель, уникальное для данного документа.
Например: <A NAME="part">Раздел1</A>. Теперь вы можете ссылаться на помеченную область простым указанием ее имени после имени документа.
Например, ссылка <A HREF="document.html#part">Раздел1</A> отправит вас в раздел "part" файла document.html, а ссылка <A HREF="#bottom">В конец документа</A> – в раздел "bottom" текущего документа.
Пример 1:
<!-- Использование атрибута NAME: -->
<A NAME="history">История бодибилдинга</A>
...
<A NAME="now">Спорт глазами современника</A>
...
Вернуться к разделу<A HREF="#history">истории</A>
TARGET – определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с атрибутом HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезервированных имен:
_self – указывает, что определенный в атрибуте HREF документ должен отображаться в текущем фрейме;
_parent – указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. Иначе говоря, _parent ссылается на окно, содержащее FRAMESET, включающий текущий фрейм;
_top – указывает, что документ должен отображаться в окне-родителе всей текущей фреймовой структуры;
_blank – указывает, что документ должен отображаться в новом окне.
Пример 2:
<!-- Использование атрибута HREF: -->
<A HREF="ftp://ftp.cdrom.com" TARGET="_blank">FTP-site</A>
<A HREF="http://opengl.rdc.ru">Русский проект по OpenGL</A>
...
Пример 3:
Создание ссылки на новое окно
<html>
<body>
<a href=www.bsu.edu.ru>Обычная ссылка на сайт www.bsu.edu.ru</a><br>
<a href=www.bsu.edu.ru target=_blank>Ссылка открывает новое окно на сайт www.bsu.edu.ru</a>
</body>
</html>
Пример 4:
<!-- Создание ссылки для письма с указанием нескольких атрибутов -->
<A HREF="mailto:green@igf.ru?subject=Приглашение&cc=bg@microsoft.com&body=Приезжай на вечеринку.">
Отправить приглашение </A>.
<!-- или просто письмо : -->
<A HREF="mailto:green@igf.ru?subject=Привет">авторам</A>.__
Пример 5:
Использование картинки как ссылки
<a href="Буква А.html"><img src="буква А.JPG" width=80 height=80> </a>