Мультимедийные технологии
Download
Report
Transcript Мультимедийные технологии
Основы языка создания
Web-страниц
Web-сайт
web — «паутина, сеть»
site — «место», буквально «место, сегмент, часть в
сети»
Web-сайт – совокупность электронных документов
частного лица или организации, объединённая под
одним адресом (доменным именем, IP-адресом).
Сайт иначе называют
интернет-представительством
человека или организации.
Web-страница – раздел сайта
Журнал
«Автомобили»
Web-сайт
Новые модели
Web-страница
Новости
соревнований по
автоспорту
Web-страница
Прайс-лист
автосалона
Web-страница
Отличия Web-страницы
Интерактивность – возможность информационного
обмена между пользователем и Интернет-ресурсом.
Мультимедийность - одновременное использование
различных форм представления информации в едином
объекте-контейнере.
Наличие гиперссылок – специальных записей,
позволяющих переходить к другим элементам в самом
документе, к другим объектам, расположенный на
локальном диске или в Интернете, либо к элементам этих
объектов.
Наличие динамических элементов – исполняемых
модулей (скриптов, элементов управления ActiveX) –
программных компонентов, загружаемых с удаленного
сервера и выполняющихся на локальном компьютере.
Устройство сайта
Web-сайт – совокупность web-страниц.
Web-страница – это файл с текстом, размеченным на
языке разметки текста.
Web-страница, будучи загруженными пользователем
на его компьютер, обрабатывается браузером и
выводится на монитор локального компьютера (либо
другое средство отображения).
Начиная с главной (титульной) страницы и
передвигаясь по гиперссылкам, пользователь
получает необходимую ему информацию.
Достоинства HTML-документов:
Малый информационный объем;
Для создания web-страницы используются
простейшие текстовые редакторы, не
форматирующие текст (Блокнот);
Наличие института стандартов, что дает
возможность работать с web-страницами на
компьютерах с разными операционными
системами и браузерами.
Основные этапы создания сайта
1. Постановка задачи:
Получить полное представление о данной предметной
области.
Четко определить, для чего нужен этот сайт –
поставить цель.
2. Проектирование структуры сайта:
Определить, какие страницы будут входить в сайт,
какова будет их тематика.
Определить, как страницы будут связаны между собой.
3. Разработка сайта.
4. Тестирование сайта.
5. Публикация в интернете.
Проектирование сайта «Компьютер».
Постановка задачи.
Цель: Отобразить информацию о моем компьютере в
наиболее полном виде.
Связь: ссылки с
титульной страницы
Список web-страниц:
1. Титульная страница «Компьютер»
2. «Программы» – описание программного обеспечения
3. «Информационные ресурсы» – описание полезных и
интересных файлов
4. «Оборудование» – описание аппаратных устройств
5. «Словарь» – словарь компьютерных терминов
6. «Анкета» - анкета для посетителей сайта.
Проектирование сайта «Компьютер».
Разработка сайта.
Создать папку, в которой будут хранится все файлы,
составляющие сайт.
Каждая web-страница – отдельный файл с типом
(расширением) .htm или .html. Файл с титульной
страницей обязательно называется index.html или
index.htm
Каждая web-страница состоит из двух логических
частей: заголовок и содержание.
Заголовок содержит имя web-страницы и справочную
информацию (например, кодировка)
Содержание – это все, что есть на странице: текст,
таблицы, бегущие строки, графика, звуки и пр.
Основные тэги HTML
Структура Web-страницы
Назначение
Формат
Начало и конец страницы
<HTML></HTML>
Описание страницы, в том
числе ее имя
<HEAD></HEAD>
Имя страницы
<TITLE></TITLE>
Содержание страницы
<BODY></BODY>
Открывающий
тэг
Контейнер
Закрывающий
тэг
Основные тэги HTML
Форматирование текста
Назначение
Формат
Аргументы
Заголовок (уровни от 1 до
6)
<H?></H?>
? 1 2 3 4 5 6
Абзац
<P> </P>
Выровненный абзац
<P ALIGN=“*”></P>
Перевод строки
<BR>
Горизонтальный
разделитель
<HR>
Выравнивание по центру
<CENTER></CENTER>
Адрес автора
<ADDRESS></ADDRESS>
* center
right left
Основные тэги HTML
Форматирование шрифта
Назначение
Формат
Жирный
<B></B>
Курсив
<I> </I>
Верхний индекс
<SUB> </SUB>
Нижний индекс
<SUP> </SUP>
Размер шрифта
<FONT SIZE =?></FONT>
? 1 2 3 4 5 6 7
Цвет шрифта
<FONT COLOR= “#RRGGBB”>
</FONT>
red blue …
#FFFFFF
Гарнитура шрифта <FONT FACE =“*”></FONT>
Аргументы
* Arial
Times New Roman
Courier New
…
Основные тэги HTML
Вставка изображений
Назначение
Формат
Аргументы
Вставка
изображения
<IMG SRC=”URL”>
URL - место хранения
файла на локальном
компьютере или в
интернете
Выравнивание
изображения
<IMG SRC=”URL”
ALIGN=“*”>
* top bottom middle
left right
Вывод текста
вместо
изображения
<IMG SRC=”URL”
ALT=“*”>
* поясняющий текст
Фоновое
<BODY
изображение
BACKGROUND=“URL”>
(добавление к тэгу
BODY)
Основные тэги HTML
Оформление списков
Назначение
Формат
Аргументы
Ненумерованный
<UL> <LI> элемент
</UL>
Тип маркера
<UL TYPE=”*”>
Нумерованный
<OL> <LI> элемент
</OL>
Тип нумерации
<OL TYPE=“*”>
*
A a I i 1
Первый номер
списка
<OL START=?>
?
1 2 3 …
Список
определений
<DL>
<DT> термин
<DD> определение
</DL>
* disk square
Основные тэги HTML
Определение цветовых параметров тега BODY
(Тег BODY может быть на странице только один!)
Назначение
Формат
Аргументы
Цвет фона
<BODY BGCOLOR=“#RRGGBB”>
red blue …
#FFFFFF
Цвет текста
<BODY TEXT=“#RRGGBB”>
red blue …
#FFFFFF
Цвет ссылки
<BODY LINK=“#RRGGBB”>
red blue …
#FFFFFF
Цвет пройденной
ссылки
<BODY VLINK=“#RRGGBB”>
red blue …
#FFFFFF
Цвет активной
ссылки
<BODY ALINK=“#RRGGBB”>
red blue …
#FFFFFF
Задачи из ЕГЭ-2010, 2011
Для кодирования цвета фона web-страницы используется
атрибут bgcolor="#ХХХХХХ", где в кавычках задаются
шестнадцатеричные значения интенсивности цветовых
компонент в 24-битной RGB-модели.
Какой цвет будет у страницы, заданной тэгом <body
bgcolor="#00FF00">?
К какому цвету будет близок цвет страницы, заданный
тэгом <body bgcolor="#747474">?
1) серый
2) белый
3) фиолетовый
4) черный
Основные тэги HTML
Вставка гиперссылок
Назначение
Формат
Ссылка на другую
страницу
<A HREF=”URL”>указатель ссылки </A>
Аргументы
Ссылка на закладку <A HREF=”URL#*”> указатель ссылки </A> * Имя
закладки
в другом документе
Ссылка на закладку <A HREF=”#*”> указатель ссылки </A>
в том же документе
* Имя
закладки
Определение
закладки
* Имя
закладки
<A NAME=”*”> </A>
Основные тэги HTML
Формы
Назначение
Формат
Аргументы
Форма
<FORM> </FORM>
Текстовое поле
<INPUT TYPE =“text” NAME=“name” ? 1 2 3 ...
SIZE=?>
Группа
переключателей
<INPUT TYPE =“radio”
NAME=“group” VALUE=“*”>
Группа флажков
<INPUT TYPE =“checkbox”
NAME=“group” VALUE=“*”>
Раскрывающийся
список
<SELECT NAME =”list”>
<OPTION>Первый
<OPTION>Второй
</SELECT>
Тестовая область
<TEXTAREA NAME=“resume”
ROWS=? COLS=?> </TEXTAREA>
Кнопка
«Отправить»
<INPUT TYPE=submit
VALUE=“Отправить”>
Кнопка
«Очистить»
<INPUT TYPE=reset
VALUE=“Очистить”>
? 1 2 3 ...