- •Уральский государственный педагогический университет
- •Введение
- •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
- •Основные атрибуты и их значения
- •Единицы измерения значений свойств
- •Глоссарий
- •Литература
2.2. Основные теги и их атрибуты. Разметка текста. Гиперссылки.
Цвет основного текста, цвет гиперссылок и фон документа описываются в начальном тэге тела документа <body> с помощью атрибутов.
Значение цвета можно задавать в одной из двух форм. Первая форма использует задание цвета в RGB – палитре (Red-Green-Blue). Код цвета указывается шестнадцатеричными числами, задающими интенсивность соответствующей составляющей (по два разряда). Например, ярко-красный имеет код – FF0000, ярко зеленый – 00FF00, черный цвет 000000, белый – FFFFFF. При задании цвета перед шестнадцатеричным числом ставится символ #. Возможно задание цвета с помощью имен. Таблица основных цветов приведена в Приложении 5.
Атрибуты тега <body>
background–фоновый рисунок
bgcolor–цвет фона всего документа
text –цвет текста всего документа
link– цвет непосещенной гиперссылки
vlink– цвет посещенной гиперссылки
alink– цвет активной гиперссылки
style – стиль, обычно указывается вместо атрибутов и имеет свой набор свойств.
onload– загрузка программы
Пример: <bodybackground=”images/mainfon.jpg”bgcolor=”#FFFFFF”text=”#0000FF” link=”#FF0000” vlink=”#000000” alink=”#808080” onload=”menu()” >Тело документа</body>
Если атрибуты не указаны, то действуют правила по умолчанию:
цвет текста – черный, фона – белый, ссылка – синий, посещенная - #800080 – purple.
Основные теги языка HTML, использующиеся для разметки информации в телеHTML- документа приведены в приложении 6, а их атрибуты выделены в Приложении 7.
Для форматирования текста HTML-документа предусмотрены две группы тэгов, называемые логическими и физическими тэгами форматирования.
Тэги логической группы обозначают своими именами структурные группы текстовых фрагментов. Например, тэг <code> указывает на программный код, тэг <strong> - сильное выделение. Фрагменты с логическим форматированием Браузер отображает определенным образом в соответствии с его возможностями.
Тэги физического форматирования указывают Браузеру, как отобразить текстовый фрагмент согласно предпочтению автора. Например, тэг <b> используется для отображения текста полужирным начертанием (что обычно соответствует логическому тэгу <strong>).
Современные Браузеры поддерживают и те, и другие тэги форматирования. Другие параметры шрифта приводятся в таблице.
Текст выводится в окне Браузера непрерывно слово за словом, при этом весь пробельный материал отображается как один пробел. Поэтому для перевода строки и вставки дополнительного пробельного интервала необходимо использовать специальные средства.
 - символьный примитив – один пробел.
Тэг <br>(от английскогоbreak) – вставка новой строки.
Тэг <p>(от английскогоparagraph) – начинает абзац с новой строки, отделяя от предыдущего двойным межстрочным интервалом. Имеет атрибут выравниванияalign =left | right | center | justify – выравнивание, по умолчанию - left . Значенияleft,right,centerможно использовать как самостоятельные теги, напр.<center>текст</center>
Тег <pre> - текст, заключенный между тэгами<pre> </pre >(от английскогоpreformatted), отображается так, как он был отформатирован предварительно, со всеми пробелами переносами строк.
Заголовки разных уровней.
Тэги вида <hn> ….</hn> оформляют заключенный в них текст в виде Заголовка n-уровня. Значения n могут изменяться от 1 (самый крупный) до 6 (самый мелкий). Так же, как и тэг абзаца <p>, тэг Заголовка прерывает текстовый поток и отделяет его пустой строкой.
Тэги <h1>, <h2>, <h6> могут иметь атрибут выравнивания align со значениями left, center (по умолчанию), right и justify.
Списки
HTML позволяет создавать нумерованные и маркированные списки.
Фрагмент текста, представляющий список, заключается в тэги:
<ol> ….</ol> упорядоченный список (orderedlist),
<ul> ….</ul>неупорядоченный список (unorderedlist),
<dl> ….</dl>список определений (definition list).
<menu> ….</menu> список в виде контекстного меню
Каждый элемент списка заключается в тэги <li> ….</li> (от английского list item).
Тэг нумерованного списка может иметь параметр type, определяющий вид нумерации, иstart, задающий начальное значение первого элемента списка (независимо от типа указывается цифрой). Параметрcompact – компактное межстрочное расстояние.
type=A – задает маркеры в виде прописных латинских букв;
type=a – маркеры – строчные латинские буквы;
type=I – маркеры в виде больших римских цифр;
type=i – маркеры в виде маленьких римских цифр;
type=1 – маркеры – арабские цифры (по умолчанию).
В тэгах маркированного списка параметр type указывает тип маркера: закрашенные кружочки – disc, незакрашенные кружочки – circle, закрашенные квадратики – square.
Гиперссылки
Структура гипертекстовой сети задается гипертекстовыми ссылками.
Гипертекстовая ссылка — это адрес другого HTML-документа или информационного ресурса Internet, который тематически, логически или каким-либо другим способом связан с документом, в котором ссылка определена.
Связь между HTML-документами и фрагментами документов организуется с помощью тэгов <a> …</a> (от английского anchor- якорь).
Тэг <a> употребляется в двух формах – для перехода на другой документ в его начало, или для перехода к поименованному фрагменту (якорю) того же или другого документа.
В первом случае обязательным атрибутом является href=url– адрес целевого документа.
Текст и изображения, размещенные между тэгами <a> …</a>, становятся активной зоной, чувствительной к щелчку мыши, который вызывает загрузку целевого документа. Текст гиперссылки выделяется подчеркиванием и цветом, указанным как значение атрибута link тэга body, либо цветом по умолчанию.
Во втором случае – при создании якоря (метки или закладки) фрагмента – обязателен атрибут name=#имя, где имя – идентификатор фрагмента (якоря).
В якоре также можно использовать атрибуты
target –указание окна отображения документа, “_blank” – новое окно, “_top”- новое окно без фреймов, “_self”- в то же окно,“_parent” – в родительское окно фрейма.
title – текст всплывающей подсказки при наведении на ссылку.
Пример. Пусть в документеreport.htm была определена закладка: <a name=”z3”>Глава 3</a>.
Тогда гиперссылка на эту закладку из другого документа, находящегося в этом же каталоге, будет выглядеть следующим образом: <a href="report.htm#z3" target ="_blank"> переход к Главе 3 </a>.
Согласно схеме HTTP нотации URL, полный адрес информационного ресурса, доступного по протоколу HTTP, надлежит записывать следующим образом:
http://user:password@domain.ru:port/path/some.html?query_string
где http — протокол обмена данными; user — идентификатор пользователя; password – пароль; domain.ru — доменное имя сервера; port — номер TCP-порта, на котором ведет обслуживание сервер (обычно 80); path — путь в корневом каталоге сервера к файлу ресурса; some.html — файл ресурса; query_string — поисковое предписание.
Это абсолютный или полный адрес ресурса. На практике редко используют все компоненты полного адреса схемы HTTP. Чаще всего первые компоненты опускают. Например, обращение к документу в том же каталоге в гипертекстовой ссылке будет записано просто как имя данного файла:
<a href=../papers/avtor1.html?query_string>
Имя протокола, имя домена, номер порта и другие компоненты начала URL опущены. В этом случае говорят, что ссылка частично определена или неполная форма URL. Естественно, что браузер при обращении к серверу будет восстанавливать полную форму URL, опираясь на некоторую схему по умолчанию, которая называется базовым URL. Относительным URL называют неполную форму URL, подразумевая, что адрес задается относительно некоторого базового адреса. По умолчанию в качестве базового используется URL каталога, в котором находится текущий документ. Если URL начинается с символа "." или "..", то это означает исчисление от текущего каталога. Если URL начинается с символа "/", то относительный URL берется от корня каталогов сервера. В HTML есть элемент разметки <base>, который позволяет задать или переопределить базовый адрес.