Методические материалы по информатике:
Основы HTML

Meta-теги
Требования к разработке сайта (самостоятельная работа): 8 класс, 9 класс
Введение в HTML
Структура HTML-документа
- Комментарии
Базовые теги форматирования
Списки
Гиперссылки Web-страниц
Бегущая строка
Требования к изображениям для Web-страниц
Карты изображений
Табличное оформление Web-страниц
Кодовая таблица цветов
Фреймы
Набор специальных символов на Web-страницах
Формы Web-страниц
Примерная тематика вопросов итоговой к/р

Введение в HTML

HTML – аббревиатура от HyperText Markup Language (язык гипертекстовой разметки). Является одним из простейших, но наиболее распространенных примеров языка теговой разметки.

Тегом (англ. tag) называют специальные маркеры, указывающие программе, что заключенная между открывающим и закрывающим тегами информацию нужно обрабатывать (интерпретировать) и/или выводить на экран особым образом.

Среди тегов можно выделить

парные, обязательными к использованию ( и для полужирного начертания);
парные, с необязательным использованием закрывающего тега (<li>, );
парные, с необязательным использованием открывающего тега ();
непарные ( , <hr>);
распространяющиеся на строго определенную последовательность или тип символов (! △), зарезервированные слова ( ) (В данных примерах по сути открывающим тегом служит символ амперсанда, а закрывающим – точка с запятой. Чаще всего этот вариант форматирования называют &-последовательностями);

В литературе можно найти различную запись этого слова: «тег», «тэг» или даже «таг».

В обобщенном виде можно говорить, что для теговых языков характерно использование ограниченного набора символов (256 или даже 128) для обозначения любого знака. Кроме того, тексту может быть присвоено практически любое форматирование, зависящее только от возможностей программы, используемой для вывода на экран.

Примерами теговых форматов файлов могут служить RTF (Reach Text Format), TEX (от греч. «искусство», «мастерство») и, конечно, SGML (Standard Generalized Markup Language), подмножеством (а точнее основой) которого является и сам HTML.

Структура HTML-документа

HTML-документ начинается и заканчивается тегом HTML, указывающим браузеру на свое содержание.
Далее, весь документ делится на две части: заголовок и тело, выделяемые парными тегами <HEAD></HEAD> и <BODY></BODY> соответственно.

Заголовок документа может не содержать ничего, но обычно туда включается, как минимум, тег <TITLE></TITLE>, задающее документу название, выводимое в окне браузера.
Кроме того там может размещаться множество мета-тегов (<META>), атрибуты которых дают браузеру информацию о документе. Это – кодовая страница, описание, ключевые слова, дата изменения, переадресация на другую страницу и многое другое.
В заголовок могут также вставляться скрипты и стилевые таблицы.

Пример простейшей структуры HTML-документа:

<HTML>
        <HEAD>
                <TITLE>Это заголовок окна</TITLE>
        </HEAD>
        <BODY>
                Здесь будет размещено все, что нужно отобразить на экране.
        </BODY>
</HTML>

Тег <BODY> может содержать довольно много атрибутов.

ALINK – Цвет активной ссылки.
LINK – Цвет еще не просмотренной ссылки.
VLINK – Цвет уже просмотренной ссылки.
BACKGROUND – URL фоновой картинки.
BGCOLOR – Цвет фона документа.
BGPROPERTIES – Определяет прокручиваемость фона.
LEFTMARGIN – Левая граница в пикселах.
TEXT – Цвет текста.
TOPMARGIN – Верхняя граница в пикселах.

Не до конца подготовленный раздел.
Ещё не пришло время опубликования.
Что-то не получается, а для изучения и экспериментирования нет времени.
фрагмент порождает сбой в работе, либо надо просто найти проблемный участок кода.
Защита новых тегов от старых браузеров, неспособных их правильно интерпретировать.

Синтаксис непарного тега довольно прост:

Все, что мы вставим на место многоточия, браузер не будет пытаться вывести на экран.

Важно, что комментарий не может быть вложен в другой комментарий, так как закрывающая часть (-->) закрывает комментирование как понятие и всё, что идет после него, появится на экране.

Базовые теги форматирования и их атрибуты

Наиболее важная информация на Web-страницах представлена в виде текста. В связи с этим теги форматирования текста играют особую роль.

Разбивка на абзацы

Эта процедура производится парным тегом . Нужно отметить, что несмотря на спецификацию, возможно использование только одного из тегов. В этом случае открывающий тег задаст начало абзаца, который сам закончится, когда встретятся такие объекты, как заголовок, список или таблица. Закрывающий же тег показывает, что последующие символы должны восприниматься как новый абзац.
Стандартно, по умолчанию абзацы отделяются друг от друга пустой строкой и выравниваются влево.

Выравнивание абзаца можно изменить, воспользовавшись атрибутом ALIGN.

Тег	Результат
<P ALIGN="LEFT"> (значение по умолчанию)	Образец выравнивания текста Образец выравнивания текста
<P ALIGN="RIGHT">	Образец выравнивания текста Образец выравнивания текста
<P ALIGN="CENTER">	Образец выравнивания текста Образец выравнивания текста
<P ALIGN="JUSTIFY">	Образец выравнивания текста Образец выравнивания текста

Выравнивание по формату значительно привычнее для русскоязычных текстов, но из-за отсутствия возможности автоматической расстановки переносов, такой документ может выглядеть довольно неряшливо.

Частичное решение ситуации может быть получено вставкой символов скрытых переносов: «». Они будут появляться только когда потребуется перенести слово в этом месте. Вместе с тем, их массовая растановка слишком трудоемка.

Перевод строки

В любом месте текст может быть прерван и принудительно начат с новой строки с помощью тега , поставленного в нужном месте.

Заголовки

Задаются парными тегами <H#> и </H#>, где # – номер заголовка от 1 до 6.

При использовании заголовков в тех случаях, когда их внешний вид не задан принудительно, следует быть аккуратным. Браузер пользователя отобразит их в соответствии со своими настройками.

Горизонтальная линия

Выводится тегом <HR> и позволяет очень наглядно отделить части текста.
Может содержать атрибуты:

ALIGN – Выравнивание (значения LEFT, RIGHT, CENTER).
COLOR – Цвет линии.
NOSHADE – Отменяет рельефность линии.
SIZE – Толщина линии в пикселах.
WIDTH – Длина линии в пикселах или процентах. В последнем случае надо указывать знак %.

Тег <pre>

Данный парный тег ведет свое название от английского preformated (предварительно отформатированный) и позволяет отобразить на экране текст так, как он был сделан с учетом пробелов и табуляции. Внутри можно использовать теги форматирования символов, но это нарушает внешний вид.

В связи с важностью точного положения символов, для него часто используется моноширинный шрифт. Тегом <pre> очень часто оформляют стихи или исходный код для языков программирования.

<pre>
        Табулятор перед текстом
  Два пробела в начале     и еще пять — в середине
    Четыре пробела в начале
</pre>

Логическое форматирование

РАЗЪЯСНЕНИЯ БУДУТ ПОЗДНЕЕ на уроке.

Форматирование символов

Начертание и размер

Все теги, связанные с начертанием, представлены обязательной к использованию парой, в которую заключается изменяемый текст.
По правилам, если текст имеет несколько начертаний, то теги разного назначения не должны перекрещиваться:
НЕПРАВИЛЬНО: Полужирный курсив;
ПРАВИЛЬНО: Полужирный курсив
То есть, если открывающий тег стоит первым, то закрывающий должен быть последним. В нашем же неправильном примере, закрывающий тег полужирного начертания оказался между тегами курсива.

Представителями начертаний являются теги:

Полужирное
Курсивное
Подчеркивание
<TT>Фиксированный шрифт</TT>
<STRIKE>~~Перечеркивание~~</STRIKE>
<BIG>Увеличение размера</BIG>
Уменьшение размера

Положение относительно строки

Чрезвычайно важные теги для оформления математических, химических, физических текстов, а также в большинстве случаев оформления научных документов. Представлены двумя вариантами:

Верхний индекс или надындекс: (x²)
Нижний индекс или подындекс: (H₂O).

Включение тегов повторно внутрь тега создает индекс индекса: x^10¹⁰⁰, x^10₂.

Списки

Списки могут быть трех основных типов: маркированные, нумерованные и списки определений.
Маркированные и нумерованные списки создаются по одинаковой схеме.
Создается контейнер списка парой тегов <ul></ul> (Unordered List) и <ol></ol> (Ordered List), соответственно. Далее, каждый пункт списка, находящийся внутри этого контейнера отделяется парой тегов <li></li>.

Маркированные списки

Пример

<ul>
        <li>Пункт 1.</li>
        <li>Пункт 2.
        <li>Пункт 3.</li>
</ul>

дает нам приведенный ниже результат (обратите внимание, что тег второй строки не закрыт, но отображается нормально).

Пункт 1.
Пункт 2.
Пункт 3.

Атрибуты маркированного списка

Нумерованные списки

Списки определений

Особый вид списка, оформляемый «флажком», то есть когда весь текст кроме первой строки сдвинут вправо.
Контейнер списка описывается тегом <dl></dl>, строки терминов – <dt></dt> и строки определений – <dd></dd>

Гиперссылки Web-страниц

Гиперссылка – объект на Web-странице, обеспечивающий переход к другим документам или местам текущего документа при щелчке на нем левой клавишей мыши.
Документом может быть файл любого формата, расположенный как в WWW, так и в Интранете или на локальном компьютере.
В тех случаях, когда при создании гиперссылки использован параметр onClick, нажатие может приводить к запуску программы одном из языков программирования, используемых для протокола HTTP, например, JavaScript, VBScript или PHP.

Варианты гиперссылок и структура тегов

Для отображения гиперссылки используется парный тег <A></A>. Закрывающий тег является обязательным. В зависимости от назначения, открывающий тег будет содержать один из обязательных атрибутов.

Ссылка на другой документ

Наиболее распространенным вариантом использования является ссылка на другой документ. Она имеет следующий синтаксис:

<A HREF="URL">Подчеркнутый текст ссылки</A>

Любой текст, находящийся между тегами, отображается Web-браузером специальным образом. По умолчанию, он выделяется синим цветом с подчеркиванием. Текст, обозначающий URL, не отображается браузером, а используется только как адрес для выполнения перехода при активизации ссылки (обычно при щелчке мыши). Его можно увидеть в строке состояния, если навести курсор мыши на ссылку.

Адрес ссылки (URL)

Под URL (Uniform Resource Locator), подразумевается адрес, который однозначно указывает, на что производится переход. Так как он представляет собой текстовую строку, URL обязательно приводится в кавычках. Все, что располагается между открывающим и закрывающим тегом будет выводимой на экран гиперссылкой. По спецификации HTML 4.0, в литературе может использоваться термин URI (Uniform Resource Identifier). Не следует забывать, что значительная часть Интернет-серверов рассматривает имена файлов и папок с учетом регистра. Так что, для того чтобы избежать распространенной ошибки с неработающей ссылкой, нужно тщательно следить за регистром набираемых символов.
Адрес может быть двух видов: абсолютным и относительным.

Абсолютный адрес должен состоять из нескольких обязательных частей, которые можно обозначить схематично:

method://ServerName[:port]/PathName#anchor

Разберем отдельные части адреса.

method: – метод или протокол, который будет использован для доступа к данному URL. Наиболее распространены:
- http: – доступ к WEB-странице с использованием HTTP-протокола. (Этот вариант и будет рассматриваться нами, как наиболее важный. Он будет содержаться только в абсолютном адресе.).
- ftp: – обращение к файлу, расположенному на FTP-сервере (File Transfer Protocol) в Интернете.
- mailto: – отправка сообщения электронной почты по адресу, указанному после двоеточия. Непосредственно отправки не может быть по соображениям безопасности. Фактически происходит запуск почтового клиента и создание письма с указанным адресом. (Подробнее см. ниже)
- telnet: – обращение к службе telnet.
- news: – вызов службы новостей, если браузер ее поддерживает.
- file:/// – открытие файла на локальном диске. Обратите внимание, что вместо двух используется три слеша!
ServerName – необязательный параметр, описывающий полное сетевое имя машины. При его отсутствии адрес рассматривается как локальный. Вместо имени допускается указывать IP-адрес.
:port – необязательный параметр номера TCP-порта WEB-сервера. Квадратные скобки не ставятся! (По умолчанию используется порт 80.)
pathname – частичный или полный путь к документу в файловой системе.
#anchor – обращение к конкретному месту (метке) документа. (Подробнее см. ниже)

Относительный адрес следует предпочесть для всех случаев, когда ссылка указывается на тот же ресурс, то есть файлы размещаются в той же папке или ее родительских либо дочерних папках.

Преимущество такого подхода очевидно. Где бы мы не разместили свои страницы (на локальном компьютере или в сети), все гиперссылки будут работать правильно без каких-либо исправлений.

Существует два способа задания относительной ссылки.
В первом случае, в области заголовка (HEAD) документа приводится тег BASE, относительно которого и будут просчитываться все ссылки. Например,

Теперь все ссылки, не имеющие в адресе "http://", будут искаться на сервере www.microsoft.com.

Во втором случае, размещение по умолчанию оценивается относительно текущего документа.
Для того, чтобы сделать ссылку на файл в текущей папке (Файл⇒FileName), потребуется создать ссылку вида

<A HREF="FileName">Текст ссылки</A>,

где FileName – имя файла с расширением, но без каких бы то ни было данных о пути доступа к нему.

Для ссылок между папками, построим схему размещения файлов, когда в корневом каталоге находится файл FileName и две папки Sub1 и Sub2, содержащие соответственно файлы FileName1 и FileName2:

[Структура папок]

Если файл находится в подпапке Sub1, то из текущего места (Root) должна быть ссылка

<A HREF="Sub1/FileName1">Переход FileName⇒FileName1</A>.

То есть, мы даем команду опуститься в папку Sub1 и обратиться в ней к файлу FileName1.
Для ссылки из этого файла (FileName1) на предыдущий, нам потребуется наоборот, подняться на один уровень выше (../) и адрес приобретет следующий вид:

<A HREF="../FileName">Переход FileName1⇒FileName</A>.

Наконец, ссылка между папками Sub1 и Sub2: из Sub1 нужно подняться в Root (../), а затем спуститься в Sub2:

<A HREF="../Sub2/FileName2">Переход FileName1⇒FileName2</A>.

Ссылки на места внутри документа

Кроме ссылок на другие документы, нередко бывает полезно создавать ссылки на разные части текущего документа. В качестве классического примера можно привести содержание, которое можно быстро просмотреть, в отличие от длинного документа.

Чтобы такая ссылка заработала, нужно в точке назначения создать метку (её еще называют маркером, указателем или якорем [от английского anchor]). Для этого используют все тот же тег гиперссылки, но с атрибутом NAME:

<A NAME="part2"></A>.

В приведенном примере указателю присвоено имя «part2». Чтобы попасть в это место, достаточно создать гиперссылку следующего вида:

<A HREF="#part2">Переход на метку «part2»</A>.

Обратите внимание, что перед именем стоит решетка (диез), что дает команду браузеру искать в документе метку с таким названием.
После перехода, строка, в которой стоит маркер данного раздела (обычно, первая строка раздела или заголовок раздела) будет размещена на первой строке окна браузера (если данная строка ещё не присутствует на экране).
При необходимости сослаться на метку другого документа, в конец его URL добавляется имя метки после решетки. Например,

<A HREF="index.html#part2">Переход на метку «part2» в файле index.html</A>.

Отправка электронной почты (mailto:)

<A HREF="mailto:НазваниеЯщика@сервер.ru">Текст, который увидит пользователь</A>.

...

Атрибут TITLE гиперссылки

Использованием данного атрибута не следует пренебрегать, так как он позволяет добавлять разнообразные пояснения, облегчающие чтение текста пользователем. Он особенно удобен для пояснения пунктов меню, название которых во многих случаях должно быть довольно лаконичным, что не всегда позволяет точно выразить мысль.

Так как данный текст может быть весьма объемным, его иногда используют для создания псевдоссылок. В них вместо URL используется диез с меткой, которой нет в данном документе, что не приводит к сбою или перемещению по документу, но позволяет почитать комментарий к слову. Таким образом можно сделать терминологический глоссарий, не создавая специальной страницы и не утомляя читателя лишними переходами.

<A HREF="#0" TITLE="Текст всплывающей подсказки">Текст на странице</A>.

С точки зрения нетикета, лучше, если такие ссылки будут выглядеть несколько иначе, чем обычные: Пример псевдоссылки
Еще один пример – пункт верхнего меню «Контакты» данного сайта.

Атрибут TARGET гиперссылки

Иногда возникает необходимость открыть документ, на который ведет ссылка не в текущем окне, а в новом. Как правило это связано с переходом на другой сайт, когда посетитель может больше не вернуться на вашу страницу, что нежелательно. Для этого нужно добавить в тег гиперссылки атрибут TARGET, которому присвоить зарезервированное значение "_blank".

<A HREF="URL документа" TARGET="_blank">Текст гиперссылки</A>.

Если ему присвоить другое значение, то будет создано окно, имеющее такое имя. А если оно уже существует, то документ откроется в этом окне, однако его активации не произойдет и пользователь может подумать, что ссылка не работает. Это – весьма распространенная в Интернете ошибка. Простейший случай ее возникновения – пропуск знака подчеркивания в начале слова или замене буквы "K" на "C" в его конце.

Аналогичный эффект будет получен в Internet Explorer, если щелкнуть на ссылке, удерживая клавишу Shift: Shift+click.

Некоторые типовые ошибки для гиперссылок

Неверно набран адрес (нет ресурса, на который ссылаются).
Не вставлен протокол (например, "http://").
Ссылка сделана без учета регистра имени реального файла: на вашем компьютере всё работает, а в Интернете – нет.
Надпись "_blank" набрана с опечатками.
Ссылка на другой сайт открывается в этом же окне (уводя с сайта), либо бессмысленно создается новое окно для текущего сайта.
Документ (Word, Excel, PDF...) или увеличенная картинка открывается в этом же окне. После его закрытия закрывается браузер вместе с сайтом – мы потеряли посетителя.
Оформление гиперссылки существенно отличается от стандартного и вводит посетителя в заблуждение (спорно, но встречается не так редко).

Требования к изображениям для Web-страниц

Стандартными форматы файлов для Интернета являются JPEG (JPG), GIF и PNG. Именно они выбраны в связи с высокой степенью сжатия изображений.
Вместе с тем, каждый из форматов имеет свои особенности, достоинства и недостатки, что и обусловливает сферу их применения.

Формат GIF

Поддерживает не более 256 цветов, поэтому на фотографии с плавными переходами и едва уловимыми оттенками цвета после преобразования в формат GIF все будет гораздо хуже – она приобретет неестественный вид.
Поддерживает чересстрочную развертку для того, чтобы еще до полной загрузки изображения уже можно было приблизительно понять суть рисунка и решить, продолжать ли его скачивание.
Поддерживает прозрачность фона изображения. Это удобно в том случае, когда изображение будет помещено на Web-странице поверх фонового рисунка (обоев страницы).
Имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных картинок.
Ограничен к использованию лицензионными правилами.

Формат GIF незаменим для изображений с большими однородными областями, текстовых картинок, логотипов, иллюстраций с четкими краями, а также для анимированные рисунков.

Формат PNG

Portable Network Graphic (PNG) – формат растровых графических файлов, аналогичный формату GIF, но более современный (1995 г.) и не имеет лицензионных ограничений. Также, кроме прозрачности поддерживает полупрозрачные пикселы за счет α-канала с 256 градациями серого.

Формат JPEG

Самый «молодой» формат.

Позволяет сохранять полноцветные изображения с количеством цветов до 16,7 миллионов.
Использует сжатие с потерями информации, за счет чего размер файла значительно уменьшается без видимой потери качества изображения.
Поддерживает прогрессивную развертку, когда изображение появляется вначале с плохим качеством, и в процессе загрузки постепенно улучшается, чтобы до полной загрузки изображения уже можно было приблизительно понять суть рисунка и решить, продолжать ли скачивание.

Лучше всего JPEG подходит для хранения фотографий и других изображений, содержащих большое количество цветов, плавные цветовые переходы и мелкие разноцветные детали.

Ниже приведены примеры иллюстраций разного типа в разных форматах с размерами результирующих файлов.
Для флага (120×80 пикселей) использованы чистые красный и синий цвета, файлы JPEG сохранены со средней степенью сжатия (6 из 12). Натюрморт имеет размеры 200×200 пикселей. Оба изображения восьмиразрядные, в цветовой схеме RGB.

JPEG	GIF	PNG

12192 б	260 б	294 б

47330 б	20218 б	85761 б

В натюрморте, сохраненном в формате GIF, хорошо виден эффект пастеризации (в левом нижнем углу).

Тег для вывода изображений

Для отображения изображений на веб-странице используется непарный тег <IMG>. Он имеет единственный обязательный параметр src, который содержит адрес файла с картинкой.

align Определяет как рисунок будет выравниваться по краю и способ обтекания текстом
(bottom | left | middle | right | top).
alt Альтернативный текст для изображения.
border Толщина рамки вокруг изображения.
height Высота изображения.
hspace Горизонтальный отступ от изображения до окружающего контента.
ismap Сообщает браузеру, что картинка является серверной картой-изображением.
lowsrc Путь к графическому файлу низкого разрешения для предварительного отображения.
src Путь к графическому файлу.
vspace Вертикальный отступ от изображения до окружающего контента.
width Ширина изображения.
usemap Ссылка на тег <MAP>, содержащий координаты для клиентской карты-изображения.

Если вывод изображения осуществляется между тегами гиперссылки (<a>), то изображение становится гиперссылкой.

Доработка изображений

В большинстве случаев изображение, непригодно для непосредственного использования на Web-страницах. Сначала графика должна быть оптимизирована. Это делается с целью уменьшения сетевого трафика за счет выбора оптимального формата файла, размеров, разрешения и количества цветов иллюстрации.

Изображение, предназначенное для вывода на экран монитора, обычно имеет разрешение 72 ppi (dpi). Это число не случайно. Оно было расчитано из разрешения монитора VGA (800×600 точек), которое при расчете относительного разрешения дает примерно 72 ppi. И, хотя разрешение абсолютного большинства современных мониторов не превышает 120 ppi, в качестве максимальной величины разрешения разумно будет выбрать 150 ppi.

Карты изображений

При использовании данной технологии, изображение является не просто гиперссылкой. Результирующий адрес перехода зависит от того, на какой области картинки был сделан щелчок. Такой подход не только очень привлекателен, но и незаменим во многих случаях: карта местности, хорошо знакомые изображения.

Чтобы включить поддержку карты для изображения, необходимо добавить дополнительный параметр USEMAP в тег IMG:

Описание карты может содержаться в самом файле иллюстрации, но такой вариант значительно сложнее для рядового пользователя, в связи с чем рассмотрим сохранение карты в виде отдельного текстового фрагмента нашего HTML-файла.

Общий синтаксис карты заключается в создании парным тегом <MAP></MAP> контейнера, включающего описание каждой отдельной области:

<MAP NAME="map_name">
        <AREA [SHAPE="shape"] COORDS="x,y,..." [HREF="адр.источника"]|[NOHREF] [TITLE="Подск"]>
        <AREA [SHAPE="shape"] COORDS="x1,y1,..." [HREF="адр.источника1"]|[NOHREF] [TITLE="Подск1"]>
        ...
</MAP>

Рассмотрим возможные атрибуты описания карты.

NAME

Имя карты, позволяющее обращаться именно к данному перечню областей.

SHAPE

Необязательный параметр, описывающий форму задаваемой области изображения. Может принимать значения:

default – по умолчанию (как правило – прямоугольник);
rect – прямоугольник;
circle – круг;
poly – многоугольник произвольной формы.

COORDS

Координаты, описывающие область гиперссылки. Они вставляются попарно, в зависимости от формы: одна пара + R для круга (центр + радиус), две – для прямоугольника, n – для многоугольника.

Координаты задаются относительно левого (X) верхнего (Y) угла изображения. В случае наложения нескольких областей, срабатывает та, которая была описана первой.

TITLE

Играет ту же роль, что и в обычной гиперссылке, позволяя задать пользователю подсказку: что будут загружено и/или каков размер загружаемой информации.

TARGET

Играет ту же роль, что и в обычной гиперссылке, позволяя загрузить документ в определенное или новое (="_blank") окно.

ONCLICK=скрипт()

Позволит вместо обычного перехода по гиперссылке запустить скрипт. Например, он может создавать новое окно с особыми свойствами (размеры, элементы управления и т.д.), в которое загружать документ (для указания параметров) или изображение. В этом случае адрес следует задать на несуществующую внутреннюю метку, например HREF="#0".

NOHREF

Необязательный параметр, описывающий зону, нечувствительную к нажатиям.

ПРИМЕР КАРТЫ

<MAP NAME="map_test">
        <AREA SHAPE="circle" COORDS="33,30,15" HREF="it_DM_abbr.html"
                TITLE="Область-круг - аббревиатуры" TARGET="_blank">
        <AREA SHAPE="rect" COORDS="100,10,120,50" HREF="it_DM_abbr.html"
                TITLE="Область-прямоугольник - аббревиатуры" TARGET="_blank">
        <AREA SHAPE="poly" COORDS="155,34,173,15,191,34,173,52" HREF="it_DM_abbr.html"
                TITLE="Область-ромб - аббревиатуры" TARGET="_blank">
</MAP>
<IMG SRC="img/map.gif" USEMAP="#map_test">

В данном случае подсказка будет выводиться при попадании на прямоугольник вокруг фигуры, но гиперссылка сработает только при наведении курсора точно на фигуру. Документ про аббревиатуры откроется в новом окне.

Табличное оформление Web-страниц

Для вывода на странице таблицы нужно создать ее контейнер с помощью пары тегов <TABLE></TABLE>, между которыми вставляется описание таблицы.

ВНИМАНИЕ! Все теги в таблице – парные, то есть обязательно наличие как открывающего, так и закрывающего тега!

Чтобы показать таблицу с рамкой (по умолчанию она не выводится), нужно в открывающем теге указать толщину линии в пикселах, задав значение атрибута BORDER:

Описание таблицы делается с помощью тега строки (<TR></TR>) и вставленных в него тегов ячеек (<TD></TD>).
Так, приведенный ниже исходный текст выведет таблицу из двух строк по две ячейки (то есть из двух колонок).

<TABLE BORDER=1>
        <TR>
                <TD>A</TD>
                <TD>B</TD>
        </TR>
        <TR><TD>C</TD><TD>D</TD></TR>
</TABLE>

A	B
C	D

Текст специально отформатирован только для первой строки таблицы. Такой вариант наиболее удобен для тех случаев, когда ячейки содержат сравнительно большой текст. Зато во втором случае намного удобнее последовательно прочитывать каждый элемент при существенно меньшем количестве строк на экрана (компактность).

Выравнивание таблицы на странице и выравнивание содержимого отдельных ячеек

Выравнивание информации в ячейках по умолчанию происходит влево (горизонтально) и по центру (вертикально). Этго не всегда удобно и противоречит русскоязычным правилам (второе).

Ширина таблицы и отдельных колонок

Определяется атрибутом WIDTH тега TABLE или TD. Может быть выражена в пикселях (без размерности, либо с "px" [100px]) или в процентах (после числового значения ставится знак "%").
Для ячеек нет необходимости указывать значения во всей таблице. Достаточно сделать это в первой строке, а остальные сами сформируются вслед за ней.
ПРИМЕР:

<TABLE BORDER=1 WIDTH=200>
        <TR>
                <TD WIDTH=100>A</TD>
                <TD WIDTH=100>B</TD>
        </TR>
        <TR><TD>C</TD><TD>D</TD></TR>
</TABLE>

A	B
C	D

Цвет фона и рамки

Для того, чтобы выделить отдельные таблицы, строки или ячейки, в тегах, которые открывают соответствующий объект можно использовать дополнительные атрибуты bordercolor (цвет рамки) и bgcolor (цвет фона).

В приведенном ниже примере сделаны следующие изменения:
Таблица: <table border=3 bordercolor=green bgcolor=cyan>
За счет этого рамка таблицы стала зеленой и более толстой, чем обычно, а фон всех ячеек – голубой.
Ячейка B: <td bordercolor=red>
В отдельной ячейке внутренняя рамка стала красной.
Ячейка D: <td bgcolor=orange>
В отдельной ячейке фон поменялся на оранжевый.
Строка 3: <tr bgcolor=white>
Все ячейки третьей строки приобрели белый фон.

A	B
C	D
E	F

Объединение ячеек

Нередко возникает ситуация, когда нужно объединить ячейки. Типичными примерами может служить общий заголовок для двух колонок или боковик для двух строк.

Чтобы произвести объединение используются атрибуты тега ячейки (<td>): colspan для объединения ячеек по горизонтали и rowspan для объединения по вертикали.

В качестве образца возьмем таблицу из девяти ячеек с их нумерацией по правилам электронных таблиц:

A1	B1	C1
A2	B2	C2
A3	B3	C3

объединим ячейки B1 и C1. Для этого, вместо строки

запишем

A1	B1+C1
A2	B2	C2
A3	B3	C3

Теперь во второй строке запишем инструкцию объединения двух ячеек по вертикали:

А из третьей удалим описание первой ячейки (она теперь сливается со второй строкой)

Результат:

A1	B1+C1
A2+A3	B2	C2
A2+A3	B3	C3

Важное замечание! Работа по изменению таблиц вручную достаточно сложна. Особенно, когда надо удалить, добавить или переместить колонки; объединить или разъединить ячейки. Поэтому для таких действий стоит использовать специализированный редактор. Например, тот же Microsoft FrontPage.
Но знание тегов и правил описания таблиц является обязательным. Существует множество реальных ситуаций, когда никакая программа не поможет и придется разбираться вручную.

Уже достаточно много лет для форматирования размещения материала (макетирования) используется его размещение внутри небольшой таблицы.

Заголовок страницы
Меню	Основная часть, собственно страницы сайта
Нижняя часть с копирайтом и т.д.

Естественно, что толщину рамки при этом указывать не надо: её не должно быть. Но в процессе отладки её можно и оставить для упрощения понимания.

Давайте обсудим её описание:

        <table border=1 WIDTH=600>
        <tr><td colspan=2>Заголовок страницы</td></tr>
        <tr><td WIDTH=80>Меню</td><td>Основная часть, собственно страницы сайта</td></tr>
        <tr><td colspan=2>Нижняя часть с копирайтом и т.д.</td></tr>
        </table>

WIDTH=600 – одна из важнейших причин использования таблицы. За счет этого текст вашего сайта не расползется по всему огромному современному монитору, а будет выглядеть именно так, как вы его задумали. Конечно, приведенное число нескольно маловато, но оно потребовалось для данной ситуации. Совет: ориентируйтесь на ширину экрана 1024 либо 1280 точек и не забудьте оставить место для рамки и полосы прокрутки. Реально, из ширины стоит вычесть 60–65 пикселов? То есть оставить ширину не более 964 или 1220.

Сама таблица в приведенном варианте состоит из двух колонок, которые объединены для первой строки (colspan=2).

Во второй строке задана узкая ячейка для меню (WIDTH=80). Основная же часть займет всё оставшееся от ширины пространство.

Нижняя часть опять объединяется (colspan=2).

Фреймы

Фреймы (в литературе можно встретить термин кадры) позволяют разбить страницу на фрагменты, в которых может содержаться независимая информация. Фактически, можно получить страницы в страницах.

Фреймовая разбивка задается тегами контейнера <FRAMESET> </FRAMESET>. Для него характерно задание одного или пары обязательных атрибутов, описывающих число рядов и/или строк:

<FRAMESET ROWS="Описание" COLS="Описание"> </FRAMESET>.

"Описание" задает список значений в процентах, пикселах или относительных единицах, разделенных запятыми.
Файл с контейнером отличается от обычного тем, что не будет содержать тега <BODY>, но обязан содержать тег <HEAD></HEAD>, после которого и описывается контейнер.

Контейнеры <FRAMESET> могут быть вложены друг в друга. Более того, это просто необходимо в случае сложной структуры, когда в разных строках страницы содержится различное количество фреймов.

Для каждого фрейма в наборе страницы должен быть создан свой HTML-документ. Тег заголовка в этих документах не имеет смысла, так как считываться он будет из файла в котором задан контейнер фреймов.

Пример сложной страницы на основе фреймов

Если описание фрейма содержит атрибут присвоения ему имени, например,

<FRAME SRC="URL" name="MainPage">,

то появляется возможность загрузки новой страницы при помощи гиперссылки (из меню...) именно в этот фрейм:

<a href="URL1" TARGET="MainPage">Загрузить URL1 во фрейм MainPage</a>

Несмотря на свое кажущееся удобство, в современном Web-дизайне фреймы используются довольно редко. Основная причина этого – «загромождение» экрана набором фреймов и просмотр основного содержания страниц через сравнительно небольшое окошко. Хотя для определенных случаев именно такой вариант и должен рассматриваться как предпочтительный.

Набор специальных символов на Web-страницах

В большом числе случаев подготовки страниц требуется ввод специальных символов, которые отсутствуют на клавиатуре. Особенно это относится к сайтам научной тематики, хотя грамотное оформление без них практически невозможно для любого текста. Вот некоторые примеры наиболее важных символов:

открывающая («) и закрывающая (») кавычки: «»;
градус (°): °;
тире (—): —;
минус (–): –;
скрытый перенос ();
неразрывный пробел ( ), не позволяющий разорваться на разные строки числу от его размерности и т.п.;
неразрывный дефис (‑);
буквы с ударениями: á (á), é (é), ó (ó), ú (ú), ý (ý);
знак амперсанда (&): &
знак умножения (·): ·;
плюс-минус (±): ±;

Более подробную (исчерпывающую) информацию можно получить, перейдя по ссылке (страницы на английском языке!):
Дополнительные символы

Примерная тематика вопросов итоговой к/р

Контрольная работа будет заключаться в основном в записывании нужных тегов и/или атрибутов. В некоторых случаях потребуется выбрать правильные ответы из перечня (тест).

Структура HTML-документа.
Теги присвоения начертаний и индексов для символов.
Разбивка текста на строки и абзацы, атрибуты выравнивания, заголовки.
Формирование списков.
Гиперссылки на документы и на места внутри документа.
Элементы URL.
Относительный и абсолютный адрес.
Загрузка документа в новом окне.
Форматы графических файлов и их характеристики для размещения в сети Интернет.
Бегущая строка.
Карты изображений.
Табличные теги, объединение ячеек по горизонтали и вертикали.
Цвет: объекты для присвоения, синтаксис.
Формы Web-страниц. Ограничения их применения.
Каскадные таблицы стилей (CSS): основы применения.

Методические материалы по информатике: Основы HTML