- •Уральский государственный педагогический университет
- •Введение
- •1.1. Информационные ресурсы Интернет. Основные понятия.
- •1.2. Решение поисковых задач. Электронная почта.
- •Электронная почта
- •1.3. Информационная технология www.
- •Существует множество редакторов html-файлов, которые автоматически генерируют код html, но с точки зрения минимального объема и быстродействия они уступают страницам, созданным в блокноте.
- •Ip address (ip-адрес) – номер хоста, выраженный 32-разрядным числом, записанным четырьмя байтами, разделенными точкой (например, 234.049.123.101).
- •1.4. Работа с графикой.
- •2. Язык разметки html.
- •2.1. Синтаксис языка html, структура документа.
- •Все теги нтмl по их назначению и области действия можно разделить на следующие основные группы:
- •2.2. Основные теги и их атрибуты. Разметка текста. Гиперссылки.
- •2.3. Графика, звук и видео. Активные изображения.
- •2.4. Таблицы. Оформление таблиц. Формы на странице. Создание форм.
- •2.5. Каскадные листы стилей. Файлы css.
- •3. Размещение страниц в Интернете.
- •3.1. Цели, основные этапы проектирования сайта.
- •3.2. Требования, предъявляемые к представлению информации и Web-дизайну
- •3.2 Анализ основных требований к дизайну web-ресурсов.
- •Основные типы серверов и предоставляемые ими услуги
- •Список поисковых серверов и каталогов
- •Основные возможности программы Internet Explorer 5.0
- •Escape-последовательности cer (Character Entity Reference)
- •Основные цвета
- •Базисные элементы html
- •Основные атрибуты и их значения
- •Единицы измерения значений свойств
- •Глоссарий
- •Литература
Escape-последовательности cer (Character Entity Reference)
|
Числовой код |
Именная замена |
Символ |
Описание |
|
" |
" |
" |
Кавычка |
|
& |
& |
& |
Амперсант |
|
< |
< |
< |
Меньше |
|
> |
> |
> |
Больше |
|
|
|
|
Неразрывный пробел |
|
¡ |
¡ |
¡ |
Перевернутый восклицательный знак |
|
¢ |
¢ |
¢ |
Цент |
|
£ |
£ |
£ |
Фунт |
|
¤ |
¤ |
¤ |
Валюта |
|
¥ |
¥ |
¥ |
Йена |
|
¨ |
¨ |
¨ |
Умляут |
|
© |
© |
© |
Копирайт |
|
« |
« |
« |
Левая угловая кавычка |
|
® |
® |
® |
Зарегистрированная торговая марка |
|
± |
± |
± |
Плюс или минус |
|
» |
» |
» |
Правая угловая кавычка |
Приложение 5
Основные цвета
|
Color's name |
Название |
Red |
Green |
Blue |
|
black |
черный |
00 |
00 |
00 |
|
navy |
темно-синий |
00 |
00 |
80 |
|
blue |
синий |
00 |
00 |
FF |
|
green |
зеленый |
00 |
80 |
00 |
|
teal |
сине-зеленый |
00 |
80 |
80 |
|
lime |
ярко-зеленый |
00 |
FF |
00 |
|
aqua |
голубой |
00 |
FF |
FF |
|
maroon |
вишневый |
80 |
00 |
00 |
|
purple |
фиолетовый |
80 |
00 |
80 |
|
olive |
оливковый |
80 |
80 |
00 |
|
gray |
темно-серый |
80 |
80 |
80 |
|
silver |
светло-серый |
C0 |
C0 |
C0 |
|
red |
красный |
FF |
00 |
00 |
|
fuchsia |
лиловый |
FF |
00 |
FF |
|
yellow |
желтый |
FF |
FF |
00 |
|
white |
белый |
FF |
FF |
FF |
Приложение 6
Базисные элементы html
|
|
Тип документа |
<html></html> |
(начало и конец файла) |
|---|---|---|---|
|
|
Имя документа |
<title></title> |
(должно быть в заголовке) |
|
|
Заголовок |
<head></head> |
(описание документа) |
|
|
Тело |
<body></body> |
(содержимое страницы) |
|
Форматирование текста. | |||
|
|
Заглавие |
<h?> </h?> |
(стандарт определяет 6 уровней) |
|---|---|---|---|
|
|
с выравниванием |
<h? align=left|center|right> </h?> |
|
|
|
Параграф |
<p></p> |
|
|
|
с выравниванием |
<p align=left|center|right|justify></p> |
|
|
|
Перевод строки |
<br> |
(одиночный перевод строки) |
|
|
Убрать выравнивание |
<br clear=left|right|all> |
|
|
|
Горизонтальная линия |
<hr> |
|
|
|
С выравниванием |
<hr align=left|right|center> |
|
|
|
Толщина |
<hr size=?> |
(в точках) |
|
|
Ширина |
<hr width=?> |
(в точках) |
|
|
Ширина в процентах |
<hr width="%"> |
(в процентах) |
|
|
Сплошная линия |
<hr noshade> |
(без трехмерных эффектов) |
|
|
Нет разбивки |
<nobr></nobr> |
(запрещает перевод строки) |
|
|
Перенос |
<wbr> |
(разбить строку) |
|
|
Слой |
<div></div> |
|
|
|
с выравниванием |
<div align=left|right|center> </div> |
|
|
|
Цитата |
<blockquote></blockquote> |
(обычно выделяется отступом) |
|
|
Выделение |
<em></em> |
(обычно курсив) |
|
|
Доп. выделение |
<strong></strong> |
(обычно жирный шрифт) |
|
|
Отсылка, цитата |
<cite></cite> |
(обычно курсив) |
|
|
Код |
<code></code> |
(для листингов кода) |
|
|
Ввод с клавиатуры |
<kbd></kbd> |
|
|
|
Переменная |
<var></var> |
|
|
|
Адрес автора |
<address></address> |
|
|
|
Большой шрифт |
<big></big> |
|
|
|
Маленький шрифт |
<small></small> |
|
|
Внешний вид. | |||
|
|
Жирный |
<b></b> |
|
|---|---|---|---|
|
|
Курсив |
<i></i> |
|
|
|
Подчеркнутый |
<u></u> |
(часто не поддерживается) |
|
|
Верхний индекс |
<sup></sup> |
|
|
|
Нижний индекс |
<sub></sub> |
|
|
|
Форматированный |
<pre></pre> |
(сохранить формат текста как есть) |
|
|
С шириной текста |
<pre width=?></pre> |
(в символах) |
|
|
Центрировать |
<center></center> |
(как текст, так и графика) |
|
|
Размер шрифта |
<font size=?></font> |
(от 1 до 7) |
|
|
Изменить размер шрифта |
<font size="+|-?"></font> |
|
|
|
Базовый размер шрифта |
<basefont size=?> |
(от 1 до 7; по умолчанию 3) |
|
|
Цвет шрифта |
<font color="#$$$$$$"></font> |
|
|
|
Выбор шрифта |
<font face="***"></font> |
|
|
|
Многоколоночный текст |
<multicol cols=?></multicol> |
|
|
|
Пробел между колонками |
<multicol gutter=?></multicol> |
(по умолчанию 10 точек) |
|
|
Ширина колонки |
<multicol width=?></multicol> |
|
|
|
Пустой блок |
<spacer> |
|
|
|
Тип пустого блока |
<spacer type=horizontal|vertical| block> |
|
|
|
Величина, размеры пустого блока |
<spacer size=? width=? height=?> |
|
|
|
Выравнивание |
<spacer align=left|right|center> |
|
|
|
Бегущая строка |
<marquee loop=? direction=left|right behavior=scrol|slide|alternate> </marquee> |
|
|
Ссылки и графика. | |||
|
|
Ссылка |
<a href="url">…</a> |
|
|---|---|---|---|
|
|
Ссылка на E-mail |
<a href= "mailto://url?subject=тема">…</a> |
|
|
|
Ссылка на архив, видеофайл и др. |
<a href="url">…</a> |
|
|
|
Ссылка на закладку |
<a href="url#***">…</a> |
(в другом документе) |
|
|
<a href="#***">…</a> |
(в том же документе) | |
|
|
На другое окно |
<a href="url" target="***|_blank |_self|_parent|_top">…</a> |
|
|
|
Определить закладку |
<a name="***">…</a> |
|
|
|
Графика |
<img src="url"> |
|
|
|
Видео |
<img dynsrc="url" start=fileopen|mouseover> |
В Internet Explorer, без панели управления |
|
|
Выравнивание |
<img src="url" align=top| bottom|middle|left|right> |
|
|
|
Выравнивание |
<img src="url" align=texttop|absmiddle| baseline|absbottom> |
|
|
|
Альтернативный текст |
<img src="url" alt="***"> |
(выводится при наведении на картинку) |
|
|
Карта |
<img src="url" ismap> |
(нужна также программа) |
|
|
Локальная карта |
<img src="url" usemap="url"> |
|
|
|
Определение карты |
<map name="***"></map> |
|
|
|
Области карты |
<area shape="rect" coords=",,," href="url"|nohref> |
|
|
|
Размеры |
<img src="url" width=? height=?> |
(в точках) |
|
|
Окантовка |
<img src="url" border=?> |
(в точках) |
|
|
Отступ |
<img src="url" hspace=? vspace=?> |
(в точках) |
|
|
Установка кодировки |
<meta http-equiv="content-type" content="text/html; charset= windows-1251"> |
(должно быть в заголовке) |
|
|
Включить об'ект |
<embed src="url"> </embed> |
(вставить об'ект в страницу) |
|
|
Размер об'екта |
<embed src="url" width=? height=?> |
|
|
|
Внедрение аудио |
<embed src="music.wav" width=? height=? autostart=true hidden=false> </embed> |
Задает файл, размеры панели управления, автовоспроизведение, вывод панели на экран |
|
|
Внедрение видео |
<embed src="kino.avi" width=? height=? autostart= false hidden=false> </embed> |
Включение кнопкой на панели управления |
|
|
Звуковой фон |
<bgsound src="song.mid" loop=3 volume=0 balance=0 > |
В Internet Explorer Без loop - однократно loop=infinite – непр. 0 – max, -10000 - min |
|
Списки. | |||
|
|
Неупорядоченный |
<ul><li>…</ul> |
(<li> перед каждым элементом) |
|---|---|---|---|
|
|
Компактный |
<ul compact></ul> |
|
|
|
Тип метки |
<ul type=disc|circle|square> |
(для всего списка) |
|
|
<li type=disc|circle|square> |
(этот и последующие) | |
|
|
Нумерованый |
<ol><li>…</ol> |
(<li> перед каждым элементом) |
|
|
Компактный |
<ol compact></ol> |
|
|
|
Тип нумерации |
<ol type=A|a|I|i|1> |
(для всего списка) |
|
|
<li type=A|a|I|i|1> |
(этот и следующие) | |
|
|
Первый номер |
<ol start=?> |
(для всего списка) |
|
|
<li value=?> |
(этот и следующие) | |
|
|
Список определений |
<dl><dt><dd></dl> |
(<dt>=термин, <dd>= определение) |
|
|
Компактный |
<dl compact></dl> |
|
|
|
Меню |
<menu><li>…</menu> |
(<li> перед каждым элементом) |
|
|
Компактное |
<menu compact></menu> |
|
|
|
Каталог |
<dir><li>…</dir> |
(<li> перед каждым элементом) |
|
|
Компактный |
<dir compact></dir> |
|
|
Фон и цвета. | |||
|
|
Фоновая картинка |
<body background="url"> |
|
|---|---|---|---|
|
|
Цвет фона |
<body bgcolor="#$$$$$$"> |
(порядок: красный/ зеленый/ синий) |
|
|
Цвет текста |
<body text="#$$$$$$"> |
text="#00FF00” |
|
|
Цвет ссылки |
<body link="#$$$$$$"> |
или link=“green” |
|
|
Пройденная ссылка |
<body vlink="#$$$$$$"> |
|
|
|
Активная ссылка |
<body alink="#$$$$$$"> |
|
|
Таблицы. | |||
|
|
Определить таблицу |
<table></table> |
|
|---|---|---|---|
|
|
Окантовка таблицы |
<table border=?></table> |
|
|
|
Расстояние между ячейками |
<table cellspacing=?> |
|
|
|
Дополнение ячеек |
<table cellpadding=?> |
|
|
|
Желаемая ширина |
<table width=?> |
(в точках) |
|
|
Ширина в процентах |
<table width="%"> |
(% от ширины окна) |
|
|
Строка таблицы |
<tr></tr> |
|
|
|
Выравнивание |
<tr align=left|right| center| middle|bottom> |
|
|
|
Ячейка таблицы |
<td></td> |
(должна быть внутри строки) |
|
|
Выравнивание |
<td align=left|right|center| middle|bottom> |
|
|
|
Без перевода строки |
<td nowrap> |
|
|
|
Растягивание по колонке |
<td colspan=?> |
|
|
|
Растягивание по строке |
<td rowspan=?> |
|
|
|
Желаемая ширина |
<td width=?> |
(в точках) |
|
|
Ширина в процентах |
<td width="%"> |
(% от ширины окна) |
|
|
Цвет ячейки |
<td bgcolor="#$$$$$$"> |
|
|
|
Заголовок таблицы |
<th></th> |
(как данные, но жирный шрифт и по центру) |
|
|
Выравнивание |
<th align=left|right|center| middle|bottom> |
|
|
|
Без перевода строки |
<th nowrap> |
|
|
|
Растягивание по колонке |
<th colspan=?> |
|
|
|
Растягивание по строке |
<th rowspan=?> |
|
|
|
Желаемая ширина |
<th width=?> |
(в точках) |
|
|
Ширина в процентах |
<th width="%"> |
(% от ширины окна) |
|
|
Цвет ячейки |
<th bgcolor="#$$$$$$"> |
|
|
|
Заглавие таблицы |
<caption></caption> |
|
|
|
Выравнивание |
<caption align=top|bottom> |
(сверху/снизу таблицы) |
|
Фреймы. | |||
|
|
Документ с фреймами |
<frameset></frameset> |
(вместо <BODY>) | |
|---|---|---|---|---|
|
|
Высота строк |
<frameset rows=,,,></frameset> |
(точки или %) | |
|
|
Высота строк |
<frameset rows=*></frameset> |
(* = относительный размер) | |
|
|
Ширина колонок |
<frameset cols=,,,></frameset> |
(точки или %) | |
|
|
Ширина колонок |
<frameset cols=*></frameset> |
(* = относительный размер) | |
|
|
Ширина окантовки |
<frameset border=?> |
| |
|
|
Окантовка |
<frameset frameborder="yes|no"> |
| |
|
|
Цвет окантовки |
<frameset bordercolor="#$$$$$$"> |
| |
|
|
Определить фрейм |
<frame> |
(содержание отдельного фрейма) | |
|
|
Документ |
<frame src="url"> |
| |
|
|
Имя фрейма |
<frame name="***"|_blank|_self| _parent|_top> |
| |
|
|
Ширина границы |
<frame marginwidth=?> |
(правая и левая границы) | |
|
|
Высота границы |
<frame marginheight=?> |
(верхняя и нижняя границы) | |
|
|
Скроллинг? |
<frame scrolling="yes|no|auto"> |
| |
|
|
Постоянный размер |
<frame noresize> |
| |
|
|
Окантовка |
<FRAME FRAMEBORDER="YES|NO"> |
| |
|
|
Цвет окантовки |
<FRAME BORDERCOLOR="#$$$$$$"> |
| |
|
|
Содержание без фреймов |
<NOFRAMES></NOFRAMES> |
(для браузеров без поддержки фреймов) | |
|
Формы. |
| |||
|
|
Определить форму |
<form action="url" method=get|post></form> |
| ||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
Посылка файла |
<form enctype= "multipart/formdata"></form> |
| ||||||||||||||||||||||||||||
|
|
Поле ввода |
<input type="text|password|checkbox| radio|image|hidden|submit| reset"> |
| ||||||||||||||||||||||||||||
|
|
Имя поля и значение |
<input name="***" value="***"> |
| ||||||||||||||||||||||||||||
|
|
Отмечен |
<input checked> |
(checkboxes и radio boxes) | ||||||||||||||||||||||||||||
|
|
Размер поля |
<input size=?> |
(в символах) | ||||||||||||||||||||||||||||
|
|
Максимальная длина |
<input maxlength=?> |
(в символах) | ||||||||||||||||||||||||||||
|
|
Список вариантов |
<select></select> |
| ||||||||||||||||||||||||||||
|
|
Имя списка |
<select name="***"></select> |
| ||||||||||||||||||||||||||||
|
|
Число вариантов |
<select size=?></select> |
| ||||||||||||||||||||||||||||
|
|
Множественний выбор |
<select multiple> |
(можно выбрать больше одного) | ||||||||||||||||||||||||||||
|
|
Опция |
<option> |
(элемент, который может быть выбран) | ||||||||||||||||||||||||||||
|
|
Опция по умолчанию |
<option selected> |
| ||||||||||||||||||||||||||||
|
|
Ввод текста, размер |
<textarea rows=? cols=?> </textarea> |
| ||||||||||||||||||||||||||||
|
|
Имя текста |
<textarea name="***"></textarea> |
| ||||||||||||||||||||||||||||
|
|
Разбивка на строки |
<textarea wrap= off|virtual|physical></textarea> |
| ||||||||||||||||||||||||||||
|
Разное.
Поиск
<isindex>
(начальная
точка поиска)
Приглашение
<isindex
prompt="***">
(Приглашение
в поля ввода)
Запустить
поиск
<a
href="url?***"></a>
(используйте
действительно знак вопроса)
URL этого файла
<base
href="url">
(должно быть в
заголовке)
Имя базового
окна
<base
target="***">
(должно быть в
заголовке)
Отношение <link
rev="***" rel="***" href="url">
(должно быть в
заголовке)
Метаинформация
<meta
name=?
content=?>
(должно быть в
заголовке)
Стили
<style></style>
Программа
<script></script>
|
| ||||||||||||||||||||||||||||||
Приложение 7