Спецкурс
«Интернет-технологии»

Лабораторная работа № 1
Теория

Термины

Приведем некоторые термины, которые вам будут встречаться далее.

  1. WWW — общеизвестная аббревиатура World Wide Web, синоним Интернета.

  2. Web — сокращенное название World Wide Web.

  3. Веб-страница (Web Page) — отдельный документ (текстовый файл, подготовленный специальным образом), хранящийся в Интернете.

  4. Веб-браузер — программное обеспечение, необходимое для вывода на экран веб-страницы.

  5. Сайт (site) — набор веб-страниц, принадлежащих одному владельцу.

  6. Домашняя страница (Home Page) — главная (титульная) страница сайта.

  7. URL — унифицированный указатель ресурсов (Uniform Resource Locator), используется для указания адреса страницы в WWW.

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

Что такое гипертекст?

Основное достоинство WWW состоит в создании гипертекстовых документов, и если вас заинтересовал какой либо пункт в таком документе, то достаточно «ткнуть» в него курсором для получения нужной информации. Также в одном документе возможно делать ссылки на другие, написанные другими авторами или даже расположенные на другом сервере. Одно из главных преимуществ WWW над другими средствами поиска и передачи информации — «многосредность». В WWW можно увидеть на одной странице одновременно текст и изображение, звук и анимацию. Очень кратко об истории гипертекста можно прочитать на сайте Артемия Лебедева.

Что такое HTML?

HTML расшифровывается как Hyper Text Markup Language, т.е. язык разметки гипертекста. Это стандарт, в соответствии с которым веб-документы отображаются браузерами. Как ясно из названия, HTML — это метод разметки простого текста таким образом, чтобы браузер отображал информацию в нужном формате. Файлы, содержащие текст с html-разметкой, должны иметь расширение htm или html.

Команды языка HTML называются тегами (tag), они указывают, какую операцию необходимо выполнить, например, вывести на экран текст, нарисовать линию или использовать графику. Содержащиеся в тексте теги могут изменять шрифты, стили и создавать специальные эффекты. Это позволяет обеспечить интересный графический интерфейс при отображении стандартного текстового файла. Кроме изменения стиля текста, HTML также сообщает браузеру, когда некий текст на странице должен считаться гипертекстовой ссылкой, в каком месте вставить графические и специальные элементы, команды отправки почты и другие специальные возможности.

HTML не является языком программирования в полном смысле слова. У него специфический формат, который является мировым стандартом. Этот стандарт называется Document Type Definition (Определение типа документа), или DTD. Первым DTD-стандартом на HTML, представленным в Интернете, была версия 1.0. Затем была создана версия 2.0 для WWW, более продуманная. Сейчас стандартом является HTML версии 4.0.

Структура команд языка HTML

Команды (теги) языка HTML заключаются в угловые скобки: 

<название_команды>   - начало команды
                       поле действия команды
</название_команды>  - конец команды

Стандарт языка HTML требует обязательного присутствия тега «конец команды», кроме особо оговоренных случаев.

Самой первой командой html-документа является команда <html>, соответственно самой последней командой будет — </html> (произносится «не  html»).

А в целом, структура html-документа имеет следующий вид:

т.е. четко выделяются два раздела: <head> («голова») и <body> («тело»).

ЗАМЕЧАНИЕ. Язык HTML не чувствителен к регистру. Команды языка могут набираться как прописными так и строчными буквами, т.е. команда <body> эквивалентна команде <BODY> или <Body>.
Если браузер не поддерживает команду, он ее просто игнорирует.

Самой первой строкой html-документа является служебная команда, которая позволяет броузеру идентифицировать тип документа (DOCTYPE), как документ в стандарте HTML 4.0, определенном IETF (Internet Engineering Task Force). В этой строке также указывается соответствующий DTD (Document Type Declaration — описание типа документа): документ есть PUBLIC (т.е. не зависит от системных установок) и язык документа — русский (RU).

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 4.0//RU">

В головной части html-документа располагается команда, выводящая название страницы в заголовок окна браузера (синяя полоса в самом верху окна):

<title>Название страницы</title>

Собственно текст, который должен быть в html-документе, помещается между командами <body> и </body>, например:

<html>
<head>
<title>Пример HTML-текста</title>
</head>
<body>
Добро пожаловать в HTML!
</body>
</html>

Для того, чтобы увидеть как будет выглядеть этот пример в браузере, необходимо все скопировать в Блокнот, сохранить файл под именем primer.htm, а затем в Проводнике щелкнуть мышью по названию файла — в результате этого данный html-документ автоматически откроется в окне Internet Explorer:



Атрибуты

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

АТРИБУТ="значение_атрибута"

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

Если команда имеет несколько атрибутов, то они разделяются пробелами: 

<название_команды 
    атрибут1="значение_атрибута1" 
    атрибут2="значение_атрибута2">

В качестве примера атрибутов рассмотрим команду <meta>, которая задает кодировку Windows для букв русского алфавита и располагается строго внутри раздела <head>:

<html>
<head>
<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=Windows-1251">
<title>Пример атрибутов</title>
</head>
<body>
...
</body>
</html>

Если же команду <meta> пропустить, то возможны ситуации, когда на экране браузера вместо русских букв будут «кракозябры». А при использовании этой команды такого не произойдет!

Html-редакторы

Все html-документы записываются как обычный текст, поэтому могут быть созданы и отредактированы в любом текстовом редакторе, например, в Блокноте. Но гораздо удобнее использовать специализированные html-редакторы, например UltraEdit (лицензионный) или Smart Web Builder (бесплатный).

В этих редакторах все команды языка HTML отображаются одним цветом, а атрибуты команд — другим. Тогда как просто текст будет черного цвета. Благодаря этому, если в названии команды (или атрибута) будет допущена ошибка, оно отобразится черным цветом, как обычный текст.

Цвет в html-документе

Команда <body> имеет несколько атрибутов.

Атрибут bgcolor= позволяет задать цвет фона страницы:

<body bgcolor="yellow">
Эта страница имеет желтый фон.
</body>

Задание цвета можно производить двумя способами:

RGB-номер цвета задается либо тремя двухзначными шестнадцатиричными (HEX) числами (перед номером обязательно ставится знак #), либо с помощью встроенной функции rgb(), каждый из трех аргументов которой может меняться от 0 до 255, например: rgb(153,102,255). Каждое число из интервала [00–FF] ([0–255]) определяет интенсивность соответствующего цвета.

Например, номер цвета "#FF0000"=rgb(255,0,0) соответствует красному цвету (Red), так как имеет максимальную интенсивность для красной составляющей, а зеленая и голубая составляющие имеют значения равные нулю. Аналогично, номер "#00FF00"=rgb(0,255,0) соответствует зеленому цвету (Green), а номер "#0000FF"=rgb(0,0,255) — синему (Blue).

Существуют 16 стандартных имен цветов, поддерживаемыми Windows:

 Black = "#000000"  Green = "#008000"
 Silver = "#C0C0C0"  Lime = "#00FF00"
 Gray = "#808080"  Olive = "#808000"
 White = "#FFFFFF"  Yellow = "#FFFF00"
 Maroon = "#800000"  Navy = "#000080"
 Red = "#FF0000"  Blue = "#0000FF"
 Purple = "#800080"  Teal = "#008080"
 Fuchsia = "#FF00FF"  Aqua = "#00FFFF"

Помимо этих 16 имен цветов, существует еще расширенная таблица цветов. Названия цветов из этой таблицы использовать можно, но все же надежнее задавать RGB-номер. Дело в том, что хотя задание Red-Green-Blue теоретически позволяет выводить «миллион» цветов, на самом деле все определяется видеокартой и монитором, которые использует клиент.

При создании изображения для публикации в Интернете главной проблемой является правильная передача цветов на разных типах компьютеров, мониторов и браузеров. Когда браузер не в состоянии правильным образом передать тот или иной цвет, он подбирает другой цвет или смешивает несколько соседних цветов. Иногда цвет может быть заменен на что-то совершенно неподходящее. Поэтому была разработана так называемая «безопасная» палитра цветов. При использовании цветов из этой палитры вы можете быть уверены в том, что каждый цвет будет передан правильным образом и без искажений. Любой из 216 цветов «безопасной» палитры может быть использован для графики, текста и фонов. Палитра состоит из 32 сочетаний 6 оттенков красного, зеленого и синего.

Заголовки

Язык HTML имеет шесть уровней заголовков, имеющих номера с 1 по 6 (заголовок первого уровня является заголовком самого большого размера). По сравнению с нормальным текстом, заголовки выделяются жирным шрифтом автоматически.

Синтаксис заголовков:

<h1 align=center>Самый большой заголовок, расположенный по центру</h1>

<h4 align=right>Средний по размеру заголовок, расположенный как?</h4>

<h6>Самый маленький заголовок</h6>

здесь h — собственно команда задания заголовка (Header), а число от 1 до 6, определяет размер заголовка,
align= — атрибут, задающий расположение заголовка на экране:
align=left — разместить слева (принято по умолчанию, т.е. можно не указывать)
align=center — разместить по центру окна
align=right — разместить справа в окне браузера.

Абзацы

Команда задания абзаца <p> также имеет атрибут align=, который, кроме указанных выше трех значений, может иметь еще значение justify:

<p align=justify>

устанавливающее выравнивание правого края текста на экране (как это сделано в данном тексте).

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


   <h1 align=center>Глава 1</h1>
   <p>Добро пожаловать в HTML!
   Здесь будет рассказано, как надо и как не надо делать веб-страницы.
   <p align=right>Это не так сложно.

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

Глава 1

Добро пожаловать в HTML! Здесь будет рассказано, как надо и как не надо делать веб-страницы.

Это не так сложно.

Однако, чтобы сохранить удобочитаемость в исходных html-файлах, рекомендуется заголовки размещать на отдельных строках, а абзацы отделять пустыми строками (в дополнение к команде <p>).

Прерывание строки

Используя команду <br> можно перейти на новую строку, не начиная нового абзаца (в большинстве браузеров абзацы выделяются дополнительными пустыми строками). Например, строка

Факультет<br>на котором мы учимся

будет выглядеть на экране так:

Факультет
на котором мы учимся

Неразрывный пробел

Поскольку браузер игнорирует перерывание строки в html-файле, где на самом деле закончится одна строка на экране и начнется другая — зависит от размера шрифта на экране у клиента. Кроме того, браузер игнорирует и любое количество пробелов между словами — все пробелы заменяются одним. Поэтому, если требуется поставить подряд несколько пробелов, применяется так называемый символьный примитив «неразрывный пробел», который начинается амперсандом (&) и заканчивается точкой с запятой: &nbsp; (сокращение от Non Break SPace).

Символьные примитивы чувствительны к регистру: НЕЛЬЗЯ использовать &Nbsp; вместо &nbsp;.

Например, строка

Факультет&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;на котором     мы учимся

будет выглядеть на экране так:

Факультет     на котором мы учимся

Так как браузер обрывает строку на пробеле, то возможна ситуация, когда, например, инициалы останутся на одной строке, а фамилия «переедет» на другую. Чтобы этого не происходило, между инициалами и фамилией обязательно следует ставить неразрывный пробел.

В русской типографике существуют жёсткие правила расстановки символа неразрывного пробела.

Символ неразрывного пробела (обозначим его как •) ставится в следующих случаях.

  1. Перед тире:
    Это•— пример
    т.е. тире не имеет права начинать строку, если это не начало предложения с прямой речью.

  2. Между двумя инициалами и инициалами и фамилией:
    И.•И.•Иванов
    т.е. вариант совсем без пробелов: И.И.Иванов — категорически недопустим!

  3. Между знаком номера (№) или параграфа (§) и идущими следом цифрами:
    №•7, §•3
    и здесь вариант без пробела: №7 — типичнейшая грубейшая ошибка!

  4. Между числом и идущей следом единицей измерения:
    XVIII•в., 10•кг, 2000•г.

  5. Между сокращённым обозначением и фамилией:
    г-н•Петров

  6. После географических сокращений:
    г.•Новосибирск, р.•Обь

Сдвиг текста

Для вывода на экран текста с небольшим сдвигом вправо (от левого края экрана), например стихов, применяются команды <blockquote> и </blockquote>:

<blockquote> Факультет<br>на котором мы учимся </blockquote>

будет выглядеть на экране так:

Факультет
на котором мы учимся

Cписки

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

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

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

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

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

Маркированный список задается командами <ul> и </ul> (Unordered List), а пункты списка между командами — с помощью команды <li> (List Item).

Например, список

<h4>Системы счисления</h4>
<ul>
<li>Непозиционные
<li>Позиционные
</ul>

будет выглядеть так:

Системы счисления

  • Непозиционные
  • Позиционные

Команда задания списка <ul> имеет атрибут type=, который устанавливает вид маркера у элементов списка:

<ul type=disc> — черный кружок (значение по умолчанию)
<ul type=circle> — светлый кружок
<ul type=square> — квадратик

Если один список вложен в другой, то вид маркера меняется автоматически:

<h4>Системы счисления</h4>
<ul type=square>
<li>Непозиционные

<ul>
<li>Древнеегипетская
<li>Римская
<li>Старославянская
</ul>
<li>Позиционные
<ul>
<li>Вавилонская
<li>Индийская
</ul>
</ul>

На экране это выглядит так:

Системы счисления

  • Непозиционные
    • Древнеегипетская
    • Римская
    • Старославянская
  • Позиционные
    • Вавилонская
    • Индийская

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

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

Нумерованный список задается с помощью команд <ol> (Ordered List) и </ol>. Как и в маркированном списке, каждый пункт задается командой <li>, например:

<h4>Системы счисления</h4>
<ol>
<li>Непозиционные
<li>Позиционные
</ol>

будет выглядеть так:

Системы счисления

  1. Непозиционные
  2. Позиционные

Как видите, в исходном файле номеров (1, 2) рядом с элементами списка нет.

По умолчанию списки HTML автоматически нумеруются с помощью арабских цифр — 1, 2, 3 и т. д. Вы можете задать другой способ нумерации, например буквы (прописные или строчные) или римские цифры. Чтобы изменить стандартный тип нумерации, добавьте в команду <ol> атрибут type=.

Ниже приведены пять возможных способов нумерации:

<ol type=1>: стандартная цифровая нумерация — 1, 2, 3, ...
<ol type=A>: прописные буквы — A, B, C, D, ...
<ol type=a>: строчные буквы — a, b, c, d, ...
<ol type=I>: римские цифры — I, II, III, IV, V, ...
<ol type=i>: строчные римские цифры — i, ii, iii, iv, v, ...

Если необходимо, чтобы нумерация списка начиналась с определенного номера, надо добавить в команду <ol> еще атрибут start=, например, <ol start=10>.

Вложенный список

<h4>Системы счисления</h4>
<ol type=I>
<li>Непозиционные

<ol type=a>
<li>Древнеегипетская
<li>Римская
<li>Старославянская
</ol>
<li>Позиционные
<ol type=i start=4>
<li>Вавилонская
<li>Индийская
</ol>
</ol>

на экране выглядит так:

Системы счисления

  1. Непозиционные
    1. Древнеегипетская
    2. Римская
    3. Старославянская
  2. Позиционные
    1. Вавилонская
    2. Индийская

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

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

Списки определений выглядят несколько иначе, чем другие типы списков. Для задания собственно списка применяются команды <dl> (Definition List) и </dl>. Для описания каждого пункта списка в этом случае применяется две команды, а не одна. Команда <dt> (Definition Term) задает отдельный элемент, то есть определяемый термин, а команда <dd> (Definition Description) — остальную информацию, которая выводится на следующей строке с отступом. Вторая строка информации называется определением.

Пример списка определений:

<dl>
<dt>ММФ
<dd>Механико-математический факультет.
<dt>ФИТ
<dd>Факультет информационных технологий.
</dl>

на экране выглядит так:

ММФ
Механико-математический факультет.
ФИТ
Факультет информационных технологий.

Стиль (начертание) шрифта

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

НачертаниеКоманда
Полужирный текст (bold) <b>
Курсив (italic) <i>

Помимо команд задания начертания шрифта, существует также команда для моноширинного шрифта американской печатной машинки (teletype): <tt>.

Почему именно для этого шрифта была создана отдельная команда я сказать не могу (8-)

Пример:

<p>Этот <b>текст</b> полужирный. Этот <i>текст</i> курсивный.

Что даст:

Этот текст полужирный. Этот текст курсивный.

Допускается совместное использование команд задания стиля, например,

<p>Этот <i><b>текст</b></i> полужирный курсив.

Что даст:

Этот текст полужирный курсив.

Однако не допускается перекрещивание стилей, например,

<p><b>Этот <i>текст</b> полужирный </i> курсив.

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

Цвет шрифта

Атрибут color=, позволяющий задавать цвет, может быть использован в различных командах. Одной из них является команда <font>, которая изменяет внешний вид текста, стоящего между командами <font> и </font>. Например, для того, чтобы часть текста была красного цвета, следует сделать так:

<font color=red>Внимание!</font> Занятие переносится!

на экране получится:

Внимание! Занятие переносится!

Размер шрифта

Определяется атрибутом size=n. Размер может задаваться абсолютным или относительным значением от базового размера шрифта в документе.

Абсолютный размер. Число n при абсолютном задании размера может принимать значения от 1 до 7:

size=1   size=2   size=3   size=4   size=5   size=6   size=7  

Относительный размер. Число n при относительном задании размера может принимать значения от 1 до 7 со знаками плюс (+) — увеличение или минус (–) — уменьшение размера шрифта на n пунктов по отношению к базовому размеру шрифта в документе (который по умолчанию считается равным 3):

size=–4   size=–3   size=–2   size=–1   size=+1   size=+2   size=+3   size=+4  

Пример

<font color=green size=+1>Зелёный большой текст</font>

на экране получится:

Зелёный большой текст

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

Используя команду <hr> вы можете разделить текст горизонтальной чертой:

Этот текст сверху от линии.
Этот текст снизу от линии.

Ее длина может быть фиксированной или зависеть от размера окна браузера, например:

<hr align=center color=maroon size=5 width="60%">

это будет линия, расположенная по центру, коричневого цвета, шириной 5 пикселей и длиной 60% от ширины экрана:

Символы, отсутствующие на клавиатуре

Для отображения типографских символов (тире, кавычки, многоточие и др.) в языке HTML применяются специальные последовательности — символьные примитивы. Как было сказано в 1-й лабораторной, символьный примитив начинается амперсандом (&) и заканчивается точкой с запятой (;): &#nnn;. Здесь nnn — трехзначный номер символа (отображаемого примитивом) в кодовой таблице, например, &#133; — многоточие.

Разумеется, что запоминать номера примитивов не слишком удобно, поэтому для многих примитивов существуют синонимы в виде &имя;, например, &nbsp; — неразрывный пробел. В частности, поскольку символы < и > являются элементами команд, то для отображения их в html-документе приходится использовать примитивы &lt; (<) и &gt; (>).

Таблица символьных примитивов

 &#160;&nbsp; неразрывный пробел
§&#167;&sect;параграф
©&#169;&copy;знак охраны авторского права (copyright)
®&#174;&reg;символ зарегистрированного товарного знака
™&#153;&trade;символ товарного знака
°&#176;&deg;знак градуса
«&#171;&laquo;левая кавычка (левая ёлочка)
»&#187;&raquo;правая кавычка (правая ёлочка)
…&#133;&hellip;многоточие
’&#146;&rsquo;апостроф
„&#132;&bdquo;открывающая лапка
“&#147;&ldquo;закрывающая лапка
“&#147;&ldquo;открывающая английская лапка
”&#148;&rdquo;закрывающая английская лапка
•&#149;&bull;жирная точка
–&#150;&ndash;минус
—&#151;&mdash;тире
±&#177;&plusmn;плюс-минус
×&#215;&times;умножение
÷&#247;&divide;деление
€&#128;&euro;евро
£&#163;&pound;фунт стерлингов
¥&#165;&yen;йена
←&#8592;&larr;стрелка влево
↑&#8593;&uarr;стрелка вверх
→&#8594;&rarr;стрелка вправо
↓&#8595;&darr;стрелка вниз
↔&#8596;&harr;стрелка туда-сюда

Полный справочник символьным примитивам (на английском языке) можно найти по адресу http://www.htmlhelp.com/ reference/html40/entities/

В чем отличие между тире, минусом и дефисом и как их правильно применять — прочитайте на сайте Артемия Лебедева.

Знаки в тексте

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

Неправильно
(C) 2000 Vassily Poupkine(TM)

Правильно
&copy; 2000 Vassily Poupkine<sup>&trade;</sup>

на экране будет так:


© 2000 Vassily Poupkine™


Кавычки

В русских текстах используются «ёлочки» или „лапки“:

« … »
„ … “

Во всех текстах на английском:

“ … ”
‘ … ’

но ни в коем случае не знаки дюйма (которые могут использоваться только в электронной переписке):

" … "

Символы национальных алфавитов

Язык HTML позволяет включать в текст символы национальных алфавитов стран Западной и Центральной Европы.

À&#192; A с акцентом (grave) &Agrave;
Á&#193; A с акцентом (acute) &Aacute;
Â&#194; A с акцентом (circumflex) &Acirc;
Ã&#195; A с акцентом (tilde) &Atilde;
Ä&#196; A с акцентом (umlaut) &Auml;
Å&#197; Ангстрем &Aring;
Æ&#198; Æ (Æ ligature) &AElig;
Ç&#199; Заглавная C с цедиллой &Ccedil;
È&#200; Заглавное E с акцентом (grave) &Egrave;
É&#201; Заглавное E с акцентом (acute) &Eacute;
Ê&#202; Заглавное E с акцентом (circumflex) &Ecirc;
Ë&#203; Заглавное E с акцентом (umlaut) &Euml;
Ì&#204; Заглавное I с акцентом (grave) &Igrave;
Í&#205; Заглавное I с акцентом (acute) &Iacute;
Î&#206; Заглавное I с акцентом (circumflex) &Icirc;
Ï&#207; Заглавное I с акцентом (umlaut) &Iuml;
Ñ&#209; Заглавное N с акцентом (tilde) &Ntilde;
Ò&#210; Заглавное O с акцентом (grave) &Ograve;
Ó&#211; Заглавное O с акцентом (acute) &Oacute;
Ô&#212; Заглавное O с акцентом (circumflex) &Ocirc;
Õ&#213; Заглавное O с акцентом (tilde) &Otilde;
Ö&#214; Заглавное O с акцентом (umlaut) &Ouml;
Ø&#216; Заглавное O с акцентом (slash) &Oslash;
Ù&#217; Заглавное O с акцентом (grave) &Ugrave;
Ú&#218; Заглавное U с акцентом (acute) &Uacute;
Û&#219; Заглавное U с акцентом (circumflex) &Ucirc;
Ü&#220; Заглавное U с акцентом (umlaut) &Uuml;
Ý&#221; Заглавное Y с акцентом (acute) &Yacute;
ß&#223; Малое острое s (sz ligature) &sz;
à&#224; a с акцентом (grave) &agrave;
á&#225; a с акцентом (acute) &aacute;
â&#226; a с акцентом (circumflex) &acirc;
ã&#227; a с акцентом (tilde) &atilde;
ä&#228; a с акцентом (umlaut) &auml;
å&#229; a с акцентом (ring) &aring;
æ&#230; æ (ae ligature) &aelig;
ç&#231; c с акцентом (цедилла) &ccedil;
è&#232; e с акцентом (grave) &egrave;
é&#233; e с акцентом (acute) &eacute;
ê&#234; e с акцентом (circumflex) &ecirc;
ë&#235; e с акцентом (umlaut) &euml;
ì&#236; i с акцентом (grave) &igrave;
í&#237; i с акцентом (acute) &iacute;
î&#238; i с акцентом (circumflex) &icirc;
ï&#239; i с акцентом (umlaut) &iuml;
ñ&#241; n с акцентом (tilde) &ntilde;
ò&#242; o с акцентом (grave) &ograve;
ó&#243; o с акцентом (acute) &oacute;
ô&#244; o с акцентом (circumflex) &ocirc;
õ&#245; o с акцентом (tilde) &otilde;
ö&#246; o с акцентом (umlaut) &ouml;
ø&#248; o с акцентом (slash) &oslash;
ù&#249; u с акцентом (grave) &ugrave;
ú&#250; u с акцентом (acute) &uacute;
û&#251; u с акцентом (circumflex) &ucirc;
ü&#252; u с акцентом (umlaut) &uuml;
ý&#253; y с акцентом (acute) &yacute;
ÿ&#255; y с акцентом (umlaut) &yuml;


Греческий алфавит

Α
&Alpha;		 α
&alpha;		 Β
&Beta;		 β
&beta;		 Γ
&Gamma;		 γ
&gamma;		 Δ
&Delta;		 δ
&delta;
Ε
&Epsilon;		 ε
&epsilon;		 Ζ
&Zeta;		 ζ
&zeta;		 Η
&Eta;		 η
&eta;		 Θ
&Theta;		 θ
&theta;
Ι
&Iota;		 ι
&iota;		 Κ
&Kappa;		 κ
&kappa;		 Λ
&Lambda;		 λ
&lambda;		 Μ
&Mu;		 μ
&mu;
Ν
&Nu;		 ν
&nu;		 Ξ
&Xi;		 ξ
&xi;		 O
O		 o
o		 Π
&Pi;		 π
&pi;
Ρ
&Rho;		 ρ
&rho;		 Σ
&Sigma;		 σ
&sigma;		 Τ
&Tau;		 τ
&tau;		 Υ
&Upsilon;		 υ
&upsilon;
Φ
&Phi;		 φ
&phi;		 Χ
&Chi;		 χ
&chi;		 Ψ
&Psi;		 ψ
&psi;		 Ω
&Omega;		 ω
&omega;

Общая характеристика шрифтов

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

Основной характеристикой шрифта является гарнитура — набор начертаний всех символов шрифта. Например, так называемый готический шрифт является просто одной из гарнитур латинского шрифта.

Существует два основных типа шрифтов: шрифты с засечками по верхним и нижним концам букв (например, гарнитура Times New Roman) и без засечек (например, Arial).

Кроме этого, шрифты делятся на два класса: пропорциональные и моноширинные.

У пропорциональных шрифтов каждый символ имеет собственную ширину (сравните ширину букв r и w в гарнитуре Arial), тогда как все символы моноширинных шрифтов имеют одинаковую ширину (гарнитура Courier New).

Для того, чтобы проверить, является ли шрифт моноширинным, наберите данным шрифтом подряд 5 букв “о”, а в следующей строке — 5 букв “ш”. Если длина обеих строк одинаковая — шрифт моноширинный.

Сравните:

ооооо
шшшшш
(Courier New)

или

ооооо
шшшшш
(Times New Roman)

Таким образом, шрифт Times New Roman является пропорциональным с засечками, шрифт Arial — пропорциональным без засечек, а шрифт Courier New — моноширинным с засечками.

В рамках гарнитуры шрифты различаются шириной букв, толщиной штрихов, начертанием — прямое (англ. roman) или курсивное (англ. italic), насыщенностью — светлая или полужирная (англ. bold).

Впервые курсив в печати применил типограф Альд Мануций в конце XV века. Курсив появился как подражание начертанию документов папской канцелярии. Поскольку всё это дело происходило в Италии, то распространившийся дальше по Европе шрифт так и назвали — итальянский. Сегодня он известен как italic.

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

Русский

Аэрофотосъёмка ландшафта уже выявила земли богачей и процветающих крестьян.

Подъём с затонувшего эсминца легко бьющейся древнегреческой амфоры сопряжен с техническими трудностями.

Английский

The quick brown fox jumps over the lazy dog.
(Быстрая коричневая лиса прыгает через ленивую собаку).

Sphinx of black quartz judge my vow.
(Сфинкс из черного кварца осуждает мою клятву).

Французский

Portez ce vieux whisky au juge blond qui fume.
(Несите это старое виски на суд блондинки, которая курит).

Немецкий

Zwei Boxkaempfer jagen Eva quer durch Sylt.
(2 боксера охотятся на Еву сквозь Зюлт).

Гарнитура шрифта

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

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

Comic Sans MS:
Аэрофотосъёмка ландшафта уже выявила земли богачей и процветающих крестьян.

Lucida Console:
Аэрофотосъёмка ландшафта уже выявила земли богачей и процветающих крестьян.

Courier New:
Аэрофотосъёмка ландшафта уже выявила земли богачей и процветающих крестьян.

Times New Roman:
Аэрофотосъёмка ландшафта уже выявила земли богачей и процветающих крестьян.

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

А вот как выглядят те же гарнитуры, но в полужирном (<b>) начертании:

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

Comic Sans MS:
Аэрофотосъёмка ландшафта уже выявила земли богачей и процветающих крестьян.

Lucida Console:
Аэрофотосъёмка ландшафта уже выявила земли богачей и процветающих крестьян.

Courier New:
Аэрофотосъёмка ландшафта уже выявила земли богачей и процветающих крестьян.

Times New Roman:
Аэрофотосъёмка ландшафта уже выявила земли богачей и процветающих крестьян.

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

Но! Учтите, если указанного вами названия гарнитуры не окажется на компьютере у того, кто смотрит вашу веб-страницу, то будет использован шрифт по умолчанию — как правило, это гарнитура Times New Roman.

Имена гарнитур шрифтов, доступных для отображения текста у вас в браузере Internet Explorer можно посмотреть следующим образом: в главном меню Internet Explorer зайдите в пункт Сервис→Свойства обозревателя→Шрифты…→Шрифт веб-страницы. Щелкая мышкой поочередно на названиях гарнитур, вы увидите, как они выглядят.

Верхние и нижние индексы

В тексте можно задать верхние и нижние индексы с помощью команд <sup> и <sub>.
Эти команды уменьшают размер текста, располагаемого вверху или внизу от строки.

Например:

<Р>верхние индексы: X<sup>2</sup> + Y<sup>2</sup> = R<sup>2</sup>
<Р>нижние индексы: 2 H<sub>2</sub> + O<sub>2</sub> &rarr; 2 H<sub>2</sub>O

будет выглядеть так:

верхние индексы: X2 + Y2 = R2

нижние индексы: 2 H2 + O2 → 2 H2O

Запрет разрыва строки

Поскольку браузеры в абзаце могут разрывать строки на пробеле или знаке минус, то там, где это недопустимо (например, в телефонных номерах или формулах) необходимо использовать команды <nobr> и </nobr> для запрета разрыва строки:

<nobr>Na<sub>48</sub>[H<sub>x</sub>Mo<sub>368</sub>O<sub>1032</sub>(H<sub>2</sub>O)<sub>240</sub>(SO<sub>4</sub>)<sub>48</sub>]1000Н<sub>2</sub>О</nobr>

Na48[HxMo368O1032(H2O)240(SO4)48]1000Н2О

Комментарии

Для того чтобы в html-документ можно было вставить пояснительный текст, который будет виден только разработчику html-документа, но не будет отображаться на экране, используются комментарии: 

<!--   - начало комментария
                    поле действия комментария
-->    - конец комментария

С помощью комментариев можно также скрыть часть html-документа от вывода на экран — этот прием используется при редактировании html-документа.

Каскадные Таблицы Стилей — CSS

До появления таблиц стилей, форматирование html-документов представляло собой форматирование при помощи атрибутов, определяющих цвет, выравнивание, шрифты, размеры и т.д. Например, для того, чтобы представить любой отрывок текста жирным выделением, красного цвета, большого размера необходимо было прибегнуть к конструкции типа:
<b><font color="red" size="5">текст</font></b>

Естественно, что при создании документов большого объема, такое форматирование требовало огромного количества времени и сил, поскольку такую конструкцию необходимо было вставлять всякий раз, когда было необходимо выделить текст, особенно если, по прошествии какого-то времени возникала необходимость смены дизайна страницы. А если возникала необходимость применить декоративное оформление текста, ничего другого не оставалось, как только вставлять графику, что увеличивало «вес» документа, и без того сильно раздутого обилием форматирующих тэгов, а следовательно увеличивало длительность загрузки документа.

Вскоре была найдена другая технология, позволяющая описывать внешний вид элементов, создаваемых языком разметки — CSS (Cascading Style Sheets, Каскадные таблицы стилей). Что же такое каскадные таблицы стилей? Стиль — это набор параметров, задающих внешнее представление некоего объекта в той или иной среде. Например, если у нас есть абзац текста и мы хотим поместить его на веб-страницу, то нужно подумать о том, как он должен выглядеть: какой гарнитурой и размером шрифта должен быть набран, как выровнен на странице, какого цвета должны быть буквы и т.д. Если же этот абзац нужно воспроизвести через голосовой браузер, то тут шрифт и цвет роли не играют. Важнее — интонация, тембр,громкость голоса. Абзац один и тот же, а вот стиль его представления меняется.

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

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

Зачем содержимое документа
отделяется от описания
его визуального оформления

Прежде всего введем определения, чтобы различать значения слов «содержимое» и «визуальное оформление».

Содержимое html-документа — это текст, рисунки, таблицы и другие элементы, формирующие смысловое наполнение документа.

Часто в качестве аналога используют термин, заимствованный из английского языка, — «контент».

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

Можно сказать, что мысль, которую выражает абзац текста, не изменится от того, что цвет его шрифта изменили с красного на зеленый. Но дизайн при этом меняется. По своей природе содержание и визуальное представление — разные вещи, которые должны существовать независимо друг от друга. Это достигается тем, что разметка html-документа выполняется строго на основе DTD для HTML, а визуальное оформление элементам придается при помощи CSS. Налицо простота и оригинальность решения, когда сокращается размер кода, а смена дизайна сводится к изменению только параметров стиля. Кроме того, в CSS реализована возможность, задавать стиль в отдельном файле, подключаемом ко многим страницам сайта одновременно, и изменять их внешний вид редактированием одного лишь этого файла.

Включение CSS в HTML

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

<H1 align=center style="color:green">Зелёный заголовок</H1>

Атрибут style= может использоваться в любом элементе HTML для задания его стиля оформления. В кавычках указывается правило CSS, описывающее, какое оформление должен иметь элемент. В данном случае задается цвет (color) и указывается конкретное значение (green). В качестве разделителя параметра и его значения в CSS используется двоеточие.

Это так называемые внутренние таблицы стилей. Их недостатком является неуниверсальность: чтобы изменить вид всех заголовков Н1, атрибут style= придется задавать в каждом из них.

Встроенные таблицы стилей

Встроенные таблицы стилей позволяют управлять элементами в отдельном html-документе при помощи пары команд <style> и </style>. Эта пара со всем её содержимым помещается между командами <head> и </head>.

Пример:

<html>
<head>
<style>
H1 {color:green; text-align:center}
</style>
</head>
<body>
<H1>Зелёный заголовок по центру</H1>
</body>
</html>

Теперь рассмотрим ситуацию, когда в команде <style> для цвета заголовка задан зеленый цвет:

<style>
H1 {color:green}
</style>

а внутри самого заголовка указано:

<H1 style="color:blue">Какого цвета будет заголовок?</H1>

В этом случае и будет применен принцип каскадирования, который позволит разрешить конфликт: приоритет имеет внутренняя таблица стилей (style="color:blue"), поэтому заголовок будет синим.

Синтаксис CSS

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

селектор {свойство: значение}

Здесь под селектором подразумевается элемент, для которого задается стиль, далее в фигурных скобках, через ";" записываются пары свойство:значение.

Например, для окрашивания всех заголовков второго уровня в красный цвет достаточно просто указать в описании стиля следующее:

H2 {color: red}

Селекторы могут описывать следующие элементы:

Для пояснительной информации можно использовать комментарии, которые заключаются в скобки /* и */:

P {color: red} /* это абзац красного цвета */

Следующий пример демонстрирует задание встроенного стиля в html-документе: 

<html>
<head>
<title>Style Sheets</title>
<style>
BODY {background: #FFFFFF}
P {color: blue;
   font-size: 12pt;}
H2 {color: green;
    font-family: Courier New;
    font-size: 18pt}
UL {list-style-image: URL(ball.gif)}
</style>
</head>
<body>
<h2>Пример</h2>
<ul> 
<li><p>текст 1
<li><p>текст 2
<li><p>текст 3
</ul>
</body>
</html>




Здесь задан цвет фона документа белый.
Текст всех абзацев — синий, размер шрифта 12pt.

Заголовок второго уровня зеленого цвета, гарнитура — Courier New,
размер шрифта 18pt.

Кроме того, именно средствами CSS задан вид маркера для элементов списка <ul> в виде картинки ball.gif.

На экране это будет выглядеть так:

Основные элементы CSS

Задание цвета

BODY {color: blue} (цвет текста во всем документе)
P {color: #800000} (цвет текста в абзаце)

Задание размера

P {font-size: 2ex} (ex — размер, равный размерам буквы «x»)
P {font-size: 5em} (em — размер, равный ширине буквы «m»)
P {font-size: 32px} (px — размер в пикселах)
P {font-size: 32pt} (pt — размер в пунктах, 1 пункт равен 1/72 дюйма)

Задание курсива

P {font-style: italic}

Задание жирного шрифта

P {font-weight: bold}

Задание гарнитуры шрифтов

P {font-family: Arial} (имя гарнитуры шрифта)

Задание размещения

P {text-align: center} (варианты значений: center / left / right)
P {text-align: justify} (выравнивание по ширине)

Задание отступов

P {margin-top: 10px} — отступ сверху
P {margin-left: 20pt} — отступ слева (от края окна)
P {margin-right: -15pt} — отступ справа (возможно задать и отрицательное значение)
P {text-indent: 5em} — задание отступа в начале абзаца — «красная строка»

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

UL {list-style-type: disc} (варианты значений: disc / circle / square)

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

OL {list-style-type: decimal} (арабские цифры, начиная с 1; установлено по умолчанию)
OL {list-style-type: lower-alpha} (строчные латинские буквы: a, b, c, ..., z, aa, ab, ac и т.д.)
OL {list-style-type: lower-roman} (строчные римские цифры: i, ii, iii, iv и т.д.)
OL {list-style-type: upper-roman} (заглавные римские цифры: I, II, III, IV и т.д.)

Свойства текста

Оформление интервала между словами

P {word-spacing: normal} или
P {word-spacing: 3em} — к обычному пробелу прибавляется ширина одной буквы m или нескольких.

Оформление интервала между символами

P {letter-spacing: 2em} — увеличенный интервал, т.н. «разрядка»
P {letter-spacing: normal}

Оформление межстрочного интервала

Интервал определяется при помощи одной из пяти размерностей:

P {line-heigh: 12pt} — пункты
P {line-heigh: 12in} — дюймы
P {line-heigh: 12cm} — сантиметры
P {line-heigh: 12px} — пиксели
P {line-heigh: 50%} — проценты

Оформление начертания шрифта

H1 {text-decoration: none} — без линии
H2 {text-decoration: underline} — подчеркнутый
H3 {text-decoration: overline} — надчеркнутый
H4 {text-decoration: line-through} — линия «насквозь» (т.е. зачеркивание)

Селектор по классу

Допустим, все абзацы документа должны иметь такой вид:

P {font-family: Arial; text-align: justify}

Но, при этом, первые абзацы каждого раздела дополнительно должны быть выделены синим цветом.

Конечно, можно в команду каждого такого абзаца вставить атрибут style=

<P style="color:blue">Цвет этого и только этого абзаца будет синим.</P>

Однако, если таких «первых» абзацев будет много, а позднее понадобится заменить цвет с синего на другой, то придется вручную выискивать все эти атрибуты style="color:blue" и исправлять в них цвет.

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

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

<style>
P.first {color: blue}
</style>

Тогда соответствующий абзац задается так:

<P class="first">текст</P>

А можно создать унифицированный класс, который можно будет использовать в любых командах HTML. Например, создадим класс красных объектов:
.redtext {color: red}

(знак «точка» перед именем стиля обязательна!)

Тогда соответствующий стиль включается командой

<H1 class="redtext">Красный заголовок</H1>

или командой

<b class="redtext">полужирный красный текст</b>

Задание