AlgART / Тексты

HTML для чайников,
которым он вообще неинтересен

Даниэль Алиевский

ОГЛАВЛЕНИЕ

• Текстовый редактор
• Простейший HTML — тот минимум, который изучать не нужно
• Реальный пример HTML
• Теги HTML
• Мнемоники в HTML

Эта заметка была написана для весьма прагматических целей. Дело в том, что все мои статьи, которые опубликованы на этом сайте, созданы в формате HTML, как обычные текстовые файлы. Эти файлы созданы вручную, в текстовом редакторе. У меня есть причины считать это хорошим подходом.

И вот, однажды мне понадобилось объяснить человеку, далекому от веб-технологий вообще и HTML-формата в частности, как можно отредактировать мою статью, с тем чтобы мне не пришлось впоследствии вручную переносить отредактированный текст в формат HTML. Я не мог просто посоветовать почитать учебники про HTML, так как это человек занятый, HTML-формат далек от его профессиональной деятельности и вообще глубоко неинтересен. Мне нужно было кратко и понятно сформулировать некий минимум, который позволил бы грамотно редактировать HTML-файлы, содержащие мои статьи.

В итоге появилась эта заметка — одна из попыток предоставить простой и краткий «ликбез» по языку HTML. Этот ликбез настолько краток, что его совершенно недостаточно для разработки настоящих веб-страниц для настоящих сайтов. Цель этой заметки — дать вам возможность, во-первых, отредактировать текст (не оформление, только текст!) в простой веб-странице, которую кто-либо вам пришлет, а во-вторых, создать самому небольшую статью, документ или заметку в этом замечательном формате — вместо использования систем вроде Microsoft Word или OpenOffice, без цели публикации этого файла на настоящем сайте (пусть этим занимаются профессионалы).

Итак, я подчеркиваю: эта заметка рассчитана не на веб-разработчиков, а на специалистов других профессий или вообще не специалистов, которым, допустим, исполнилось 10 лет — на случай, если волей или неволей они столкнутся с этим форматом.

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

Текстовый редактор

Начнем с начала. Чтобы создать или отредактировать HTML-файл, вам нужен текстовый редактор. Не путайте с текстовым процессором — программой типа Word или WordPad, которая умеет управлять шрифтами, жирностью, курсивом и множеством других атрибутов текста, а также выводом на печать, вставкой рисунков и т.д. По сравнению с этим, текстовый редактор — очень простая программа. Все буквы одного файла в редакторе всегда выглядят как буквы одного и того же шрифта.

В системе Windows есть встроенный текстовый редактор такого типа, называемый Notepad. Но я рекомендую бесплатный аналог этого редактора под названием Notepad++ (сайт http://notepad-plus-plus.org/), значительно более мощный, быстрый и удобный. Вообще, в сети легко найти великое множество аналогичных конкурирующих редакторов.

На заметку: открыв в таком редакторе существующий HTML-файл, вы можете обнаружить, что некоторые строки очень длинные и «тянутся» на множество экранов (для их просмотра приходится прокручивать страницу по горизонтали). Но в большинстве редакторов длинные строки текста можно автоматически разбить переносами на меньшие строки по ширине окна редактора. В стандартном Notepad для этого служит команда меню Format / Word Wrap, в Notepad++ команда View / Word wrap, в других редакторах команда может располагаться в другом месте (по-русски “Word wrap” означает «Перенос слов»). Включите этот режим, так работать обычно намного удобнее.

Итак, чтобы редактировать документ HTML, вам нужно открыть его в каком-нибудь текстовом редакторе. А чтобы посмотреть, как это будет выглядеть на самом деле (после публикации в веб), нужно открыть его в другой программе, веб-броузере — той самой программе, при помощи которой вы просматриваете Internet. Для этого на большинстве компьютеров нужно просто дважды щелкнуть мышкой по HTML-файлу: броузер по умолчанию вызывается для документов HTML (файлов с расширением ".html" или ".htm").

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

Кстати, в Windows для быстрого переключения между двумя окнами очень удобно использовать комбинацию клавиш Alt+Tab. Кроме того, в подавляющем большинстве текстовых редакторов комбинация клавиш Ctrl+S записывает текст на диск, а в большинстве броузеров клавиша F5, наоборот, перечитывает страницу из источника, в данном случае с диска. Впрочем, если вы не любите работать с клавиатурой, то можете не использовать эту информацию. Кстати, некоторые настоящие программисты не любят работать с клавиатурой.

Простейший HTML — тот минимум, который изучать не нужно

Итак, перед вами простейший HTML-файл — как вы увидите его в текстовом редакторе:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Никому не нужная страница</title>
</head>
<body>

    ...Вот тут идет мой никому не нужный текст!..

</body>
</html>

Выглядит сложно? Согласен. Хорошая новость состоит в том, что все это, за исключением

    ...Вот тут идет мой никому не нужный текст!..

я рекомендую воспринимать как тарабарщину и даже не пытаться изучать. (Конечно, если вы не хотите сменить профессию и заняться разработкой сайтов.) Ваш текст, полезный и нужный, будет находиться после строки <body> и до строки </body>. Все, что начинается от <!DOCTYPE и т.д. и заканчивается <body>, а таже заключительный «хвост» из двух строк </body> и </html>, вы можете либо просто и грубо скопировать отсюда, если вы собираетесь создать свой собственный, новый HTML-файл, либо оставить без изменений, если вам прислали некий готовый HTML-файл и вы собираетесь в нем что-то отредактировать. Честно говоря, в реальных веб-страницах в этих местах порой бывает гораздо больше подобной «тарабарщины».

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

Первое — строка

<title>Никому не нужная страница</title>

Если вы знакомы с английским, вы можете догадаться, что слово title (по-английски «заголовок») тут не случайно. Это действительно заголовок страницы. Но не тот, который обычно виден большими и красивыми буквами на любом веб-сайте, а тот, который появляется в заголовке окна броузера (а также в панели задач Windows). Если вам это ни о чем не говорит, ничего страшного, просто помните, что здесь стоит написать нечто получше, чем «Никому не нужная страница», а именно осмысленное название вашего текста — обычно то же самое, которое и в теге <h1>, о котором пойдет речь ниже. Впрочем, после двух-трех попыток поменять это предложение и посмотреть в броузере, что получается, скорее всего, вы поймете, где именно оно появляется.

Вторая вещь — так называемая кодировка текста. Хотя текстовые редакторы, в отличие от текстовых процессоров, работают (вроде бы) просто с последовательностью символов, «как они есть», без какого бы то ни было дизайна, возни с разного рода шрифтами и т.д., но, к сожалению, до сегодняшнего дня не установился единственный и общеобязательный стандарт, как же именно каждый символ должен быть представлен в памяти компьютера. Поэтому может понадобиться настроить ваш текстовый редактор на ту кодировку, в которой он будет хранить символы. (Тут речь не идет о каких-то секретных кодах в стиле Штирлица; нужно лишь «объяснить» компьютеру, какое число в оперативной или дисковой памяти соответствует каждой букве алфавита и дополнительным символам вроде запятых.) В приведенной выше «тарабарщине» за кодировку отвечает строка

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

точнее, ее маленькая часть, называемая charset. В этом примере я указал кодировку windows-1251, которая является стандартом для текстов, которые созданы в Windows и содержат русские либо английские буквы, цифры и знаки пунктуации. (Именно в такой кодировке набрана данная заметка.) Если вы работаете в Windows, где эта кодировка обычно задействуется по умолчанию, и вам не нужен текст со специальными знаками европейских языков, текст на иврите или японском, текст с греческими цитатами и т.п., то этого вполне достаточно. В остальных случаях вам может потребоваться поменять кодировку, вероятнее всего на очень популярную сегодня UTF-8, которая практически стала стандартом для мультиязычных текстов — но эти подробности выходят за рамки заметки. Обратим лишь внимание, что если вы избрали кодировку, отличную от windows-1251, или если вы работаете не в операционной системе Windows (а, к примеру, в Linux), то, скорее всего, вам придется вручную настроить текущую кодировку в вашем текстовом редакторе, чтобы она соответствовала той, которая указана после “charset=”. Впрочем, будем надеяться, что вам не придется «бороться» со столь нетривиальными ситуациями.

Реальный пример HTML

Итак, перейдем к сути, т.е. к собственно тексту: попробуем ввести вместо «...Вот тут идет мой никому не нужный текст!..» некий осмысленный текст. А чтобы это было честно, я приведу свою собственную статью «Виноват ли Оппенгеймер?». Впрочем, я все же «вычистил» некоторый HTML-код после <body>, который вам заведомо не нужно изучать (он носит чисто системный характер и вставляется автоматически), а также для краткости заменил многоточиями большую часть текста (полный текст вы прочтете по ссылке выше).

Вот этот текст. «Тарабарщина», о которой шла речь в предыдущем разделе и на которую не следует обращать внимание, показана более бледным шрифтом.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta http-equiv="Content-Language" content="ru">
<title>Виноват ли Оппенгеймер?</title>
<link rel="stylesheet" type="text/css" href="../../print.css" media="print">
<link rel="stylesheet" type="text/css" href="../../default.css" media="screen">
</head>

<body>
<h4><a href="http://algart.net/">AlgART</a> / <a href="../">Тексты</a></h4>

<h1>Виноват ли Оппенгеймер?</h1>

<p align="right"><i>Даниэль Алиевский</i></p>

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

<p>Приведем примеры ситуаций такого типа. Проще всего, пожалуй, пример программирования &mdash; здесь это классическая проблема. Допустим, я один из множества программистов, участвующих в разработке и совершенствовании операционной системы Windows (или Unix). В этом случае можно быть уверенным: в какой-нибудь военной технике, например, автоматизированной ракете или компьютере самолета, будет применяться именно эта операционная система. Получается, я непосредственно участвую в наращивании гонки вооружений &mdash; а в конечном счете в жестоком убийстве тысяч или (не дай Бог) миллионов людей, в том числе, очевидно, мирных жителей. Безусловно, война &mdash; страшный грех и преступление перед Богом и человечеством. Получается, я &mdash; соучастник? (Чтобы не вдаваться в споры о справедливых и несправедливых войнах, достаточно заметить: в любом случае <i>не все</i> войны и военные операции справедливы, и в неправедных войнах я тоже соучастник.)</p>

<p>То же самое можно сказать о большинстве программистов. .....</p>

<p>В более общем виде можно поставить вопрос о научно-техническом прогрессе. .....</p>

<p>Вопрос не исчерпывается наукой. .....</p>

<p>Давайте свяжем эту проблему с другой известной проблемой: теодицеей. Всемогущий Бог, разумеется, может остановить любое преступление. Когда маньяк-убийца готов схватить маленькую девочку, Бог может поразить его... например, острой болезнью, которая заставит его забыть о всех прежних планах. Когда террорист готов взорвать автобус, Бог может поразить его инфарктом. Когда пилот бомбардировщика сбрасывает бомбу, которая попадет в детский садик, Бог может сделать так, чтобы механизм &laquo;заел&raquo; и бомба упала в безопасном месте. Почему Бог этого не делает?</p>

<p>На этот вопрос существует классический ответ &mdash; не решающий, конечно, всю проблему теодицеи, но достаточный для нас. .....</p>

<p>Так разве же мы, Его дети, созданные по Его образу и подобию, не должны столь же уважать свободу выбора других людей?  .....</p>

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

<p>Аналогичный пример &mdash; если ты переводчик и участвуешь в переводе текста, который, как тебе кажется, аморален и противоречит Библии: например, содержит клевету или злословие. Ты, конечно, не автор, но ты прочел текст и осознанно помогаешь автору &mdash; значит, если текст несет зло, то и ты лично участвуешь в этом зле.</p>

<p>Наконец, наиболее классический пример &mdash; если ты солдат. Да, ты не автор приказа, который тебе отдали, но если ты видишь, что конкретно этот приказ преступен, скажем, ведет к бессмысленной гибели невинных мирных жителей, то, исполняя такой приказ, ты становишься соучастником преступления.</p>

<p>Подводя итоги, мы приходим к следующему критерию.</p>

<p><i>Совершая поступок, который может привести ко злу, но прямо не запрещен Заповедями Бога, следует задуматься, какая из двух ситуаций имеет место:</i></p>

<ol>
<li><i>зло, которое может произойти из твоих действий, является проявлением свободной воли других людей, которые будут пользоваться результатами твоего поступка &mdash; применяя созданный тобой инструмент, читая сделанные при твоем участии тексты, следуя твоим инструкциям и т.д.</i></li>

<li><i>или результаты твоих действий сами по себе содержат какое-то зло, например, нарушение прямых Заповедей Бога, изложенных в Библии &mdash; и в этом случае неважно, действуешь ли ты по своей инициативе или работаешь на кого-то: в любом случае ты несешь ответственность вместе со всеми другими участниками, делающими это дело.</i></li>
</ol>

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

<p>Понятно, что этот метод не позволяет разрешить множество трудных ситуаций. .....</p>

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

<p>Таким образом, вопрос, поставленный в заголовке, остается без ответа. Но Бог не всегда ставит нас перед настолько тяжелым выбором. Я надеюсь, что предлагаемый критерий поможет кому-то выбрать правильное решение в трудной ситуации &mdash; с Божьей помощью.</p>

<p align="right"><i>Август 2010 г.</i></p>

<p><br><br><br><i>Если кому-либо захочется высказать мнение по поводу написанного, добро пожаловать на мой блог, тема &laquo;Виноват ли Оппенгеймер?&raquo; <noindex><a href="http://danielalievsky.livejournal.com/21397.html">http://danielalievsky.livejournal.com/21397.html</a></noindex>.</i></p>

</body>
</html>

Теги HTML

Что мы видим?

Прежде всего обращают на себя внимание многочисленные записи вроде

<p> ...какой-то текст... </p>
<h1> ...какой-то текст... </h1>

и т.п. Это — так называемые теги HTML. Теги предназначены для того, чтобы описывать структуру текста и какие-то семантические блоки, которые следует сделать отдельными абзацами, отметить размером, жирностью и т.п. Если бы не было тегов, броузер просто показал бы весь текст в виде одного сплошного бесконечного абзаца, набранного совершенно одинаковым шрифтом.

Сразу же делаю оговорку. В отличие от текстовых процессоров Word или OpenOffice, броузеры не обращают внимания на пробелы и переносы строк! Для броузера совершенно все равно, написан ли в HTML-файле один пробел или же несколько пустых строк — любая цепочка «пробельных» символов, куда входит также переход на новую строку, приравнивается к единственному пробелу. Так что два следующих фрагмента для броузера эквивалентны:

Это очень хорошо. Это очень хорошо. Это очень хорошо.

       Это                  очень хорошо.
Это очень хорошо. Это

очень                   хорошо.

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

Опишем те несколько тегов, которые вам могут пригодиться.

<p> и </p> — абзацы

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

<p>Первый абзац абзац абзац абзац абзац абзац абзац абзац
абзац абзац абзац абзац абзац абзац абзац абзац
абзац абзац абзац абзац абзац абзац абзац абзац
абзац абзац абзац абзац абзац абзац абзац абзац.</p>
<p>Второй абзац абзац абзац абзац абзац абзац абзац абзац
абзац абзац абзац абзац абзац абзац абзац абзац
абзац абзац абзац абзац абзац абзац абзац абзац
абзац абзац абзац абзац абзац абзац абзац абзац.</p>
<p>Третий абзац абзац абзац абзац абзац абзац абзац абзац
абзац абзац абзац абзац абзац абзац абзац абзац
абзац абзац абзац абзац абзац абзац абзац абзац
абзац абзац абзац абзац абзац абзац абзац абзац.</p>

Без тегов <p> и </p> визуально получился бы один "склеенный" абзац:

Первый абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац. Второй абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац. Третий абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац.

А так получается все правильно и красиво:

Первый абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац.

Второй абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац.

Третий абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац абзац.

<h1> и </h1>, <h2> и </h2> и т.д. — заголовки

Вторая пара полезных тегов, которые вы видите в начале пример, это <h1> и </h1>. Пишется так:

<h1>Лалалала</h1>

Результат:

Лалалала

Эта пара тегов означает сразу две вещи: во-первых, что текст «Лалалала» образует абзац (т.е. эти теги «по совместительству» выполняют функции тегов <p> и </p>), во-вторых, что он является заголовком уровня 1 (Header-1). В одной странице может быть несколько заголовков (например, в той, которую вы сейчас читаете). Они различаются по уровням — чем больше номер уровня, тем мельче шрифт и менее значим заголовок. Кстати, в текстовых процессорах, включая Microsoft Word, есть аналогичное понятие в визуальном интерфейсе. Заголовок первого уровня <h1> обычно используется для выделения заголовка всей статьи, аналогичные заголовки <h2> или <h3> могут использоваться в начале разделов одной статьи.

Вы, конечно, уже обратили внимание: все теги HTML имеют сходную структуру. Началом служит открывающий тег, что-то вроде <xxxx ...>, где xxxx — кодовое название тега, скажем, p или h1. Вместо многоточия могут быть некоторые параметры тега (см. ниже). Затем обычно идет какой-то текст, и заканчивается все закрывающим тегом, всегда имеющим форму </xxxx>. Смысл такой: открывающий тек включает некоторое свойство текста, например, как бы говорит: «начался абзац» или «началась жирность». Затем текст показывается как обладающий таким свойством. И, наконец, закрывающий тег выключает это свойство: «абзац закончился», «жирность больше не нужна».

Пример параметров тега вы видите уже в самом первом теге <p...> в приведенном выше образце текста:

<p align="right"><i>Даниэль Алиевский</i></p>

Параметры тега — это просто несколько выражений вида имя_параметра="значение_параметра", разделенных пробелами и помещенных после имени тега, перед закрывающей угловой скобкой >. Вам, скорее всего, редко нужны будут параметры. Чуть ли ни единственный параметр, который действительно бывает полезен для обычных текстов — это align, означающий просто-напросто выравнивание абзаца. (В любом текстовом процессоре есть кнопки, выполняющие аналогичную функцию.) В этом абзаце я поставил выравнивание вправо (align="right"), чтобы надпись «Даниэль Алиевский» оказалась выровнена по правому краю страницы. Есть еще два очевидных варианта: align="left" означает выравнение по левому краю (обычно так и получается по умолчанию), а align="center" — по центру (некоторые любят выравнивать таким образом все заголовки h1, h2 и т.д.)

<i> и </i> — курсив

Смысл эти тегов практически тривиален: текст между открывающим тегом <i> и закрывающим тегом </i> должен быть набран курсивом. Т.е. пишем:

<i>лалалала</i>

и получаем:

лалалала

Курсив — это допустимая в приличном обществе, то есть в приличных статьях, форма привлечения внимания читателя. Существует еще одна, более сильная форма акцентирования внимания: жирность. Для этого служит другая пара тегов, <b> и </b>. Если вы напишете

<b>лалалала</b>

то увидите

лалалала

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

Единственное, что остается добавить — теги такого типа (вроде <i> и </i>) должны использоваться только внутри одного абзаца и не должны применяться сразу к нескольким абзацам. Не стоит, скажем, писать так:

<i>
<p>Первый курсивный абзац абзац абзац абзац абзац абзац абзац абзац.</p>
<p>Второй курсивный абзац абзац абзац абзац абзац абзац абзац абзац.</p>
<p>Третий курсивный абзац абзац абзац абзац абзац абзац абзац абзац.</p>
</i>

Впрочем, это и так достаточно очевидно: курсивом обычно выделяется одно-два слова, максимум, предложение (скажем, цитата). В крайнем случае, можно выделить курсивом весь абзац, но теги <i> и </i> при этом ставятся внутри тегов <p> и </p>:

<p><i>Курсивный абзац абзац абзац абзац абзац абзац абзац абзац.</i></p>

В тексте выше есть ситуации такого типа.

<ol> и </ol>, <li> и </li> — списки

Иногда в тексте бывает уместно привести пронумерованный список из нескольких альтернатив. В приведенном выше тексте есть пример подобной ситуации:

<ol>
<li>Первая из нескольких возможностей</li>
<li>Вторая из нескольких возможностей</li>
</ol>

Выглядит это так:

1. Первая из нескольких возможностей
2. Вторая из нескольких возможностей

Если вместо <ol> и </ol> использовать <ul> и </ul>:

<ul>
<li>Первая из нескольких возможностей</li>
<li>Вторая из нескольких возможностей</li>
</ul>

то список получится не пронумерованным:

• Первая из нескольких возможностей
• Вторая из нескольких возможностей

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

<a...> и </a> — ссылки

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

<a href="http://algart.net/">AlgART</a>

Это ссылка на мой сайт http://algart.net/ (главную страницу). Для пользователя приведенный фрагмент HTML выглядит так:

AlgART

Адрес страницы, на которую ведет ссылка — параметр href. При щелчке мышкой по такой ссылке пользователь попадет на страницу, адрес которой указан в параметре href, в данном случае на страницу http://algart.net/.

Возможно, у вас вызовет вопрос вторая ссылка, приведенная в том же месте нашего текста:

<a href="../">Тексты</a>

Что значит адрес страницы «../»? К сожалению, это уже более сложная тема, которую вряд ли стоит освещать в нашей заметке. Просто не обращайте внимания. Адреса, начинающиеся с http://, в любом случае будут работать правильно.

Непарные теги: <br> и <hr>

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

Наверно, самый типичный пример — тег <br>. Он означает "перейти на новую строку". Это похоже на окончание одного абзаца (</p>) и начало следующего (<p>), но, в отличие от этого, в случае <br> не возникает отступа между абзацами:

<p>Начался абзац, идет себе, идет, идет, идет, идет,
идет, идет, идет, идет, идет, идет, идет, идет, идет, идет, идет,
идет, идет, идет, идет, и вдруг ни с того, ни с сего...<br>началась новая строка!
И абзац продолжается дальше, дальше, дальше, дальше, дальше,
дальше, дальше, дальше, дальше, дальше, дальше, и наконец закончился.</p>

Вот результат:

Начался абзац, идет себе, идет, идет, идет, идет, идет, идет, идет, идет, идет, идет, идет, идет, идет, идет, идет, идет, идет, идет, идет, и вдруг ни с того, ни с сего...
началась новая строка! И абзац продолжается дальше, дальше, дальше, дальше, дальше, дальше, дальше, дальше, дальше, дальше, дальше, и наконец закончился.

Приведу еще только один пример непарного тега. Это горизонтальная черта, и создается она тегом <hr>. Результат применения такого тега:

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

В некоторых (скажем так) вариантах HTML — кстати, довольно популярных сегодня — непарные теги приобретают слегка иной вид: <br/>, <hr/>. А именно, перед закрывающей угловой скобкой добавляется косая черта /. Об этом можно узнать подробнее, найдя в Google материалы про XHTML, но это уже более сложный материал. На практике, скорее всего, будут нормально работать оба варианта.

И это всё?

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

Согласитесь, наш словарик получился короче, чем у Эллочки-людоедки. Если же вдруг вам реально понадобится что-то еще или вы увидите незнакомый тег в чужом коде HTML, который вас попросили отредактировать — что ж, на этот случай существуют справочники.

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

Мнемоники в HTML

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

Любая мнемоника HTML имеет следующий вид: &nnnnn;, т.е. знак амперсанда &, несколько букв (или цифр) nnnnn и точка с запятой. Вот краткий словарь мнемоник, которыми мне иногда реально приходится пользоваться и которые полезно выучить — а еще лучше, «навесить» на какие-нибудь комбинации клавиш вашего текстового редактора, чтобы они вводились одним нажатием пары клавиш. Некоторые из них встречаются в приведенном выше образце текста.

&nbsp; (неразрывный пробел)

Что значит «неразрывный»? Не исключено, что вы уже знаете это, если пользовались в Microsoft Word комбинацией клавиш Ctrl+Shift+пробел. Если нет, то вы узнаете об этом сейчас. Неразрывный пробел визуально выглядит точно так же, как обычный пробел, однако два слова, стоящие слева и справа от него, не могут быть разбиты переносом строки. Типичный пример — обозначение года, скажем, «Я родился в 1972 г.» Если написать такую фразу обычным способом, то может случайно оказаться, что число «1972» окажется на самом конце строки, и аббревиатура «г.» будет перенесена на следующую строку. А это неграмотно. Причем обычно застраховаться от такой ситуации очень сложно: ведь у разных пользователей разные размеры окна броузера, могут быть слегка различные шрифты, размер шрифта в большинстве броузеров может динамически меняться пользователем и т.д. Правильное решение — использовать между «1972» и «г.» неразрывный пробел &nbsp;. Это пишется так:
Я родился в 1972 г.
(Иногда, впрочем, годится и обычный пробел, скажем, если весь абзац сводится к единственной короткой дате и перенос строк невероятен — например, как в конце приведенного выше текста.)
 

&mdash; (длинное тире —)

Не все «забивают» себе этим голову, но вообще-то по нормам русского языка тире в предложених должно быть длинным. А точнее, вместо дефиса «-» следует использовать специальный знак «—» (традиционно он называется «длинное тире»). Соответственно, если вы хотите получить грамотную и красивую фразу «Я — молодец!», то в HTML она должна быть записана так:
Я — молодец!
 

&ndash; (короткое тире –)

В русском языке встречается намного реже длинного, но иногда оно совершенно уместно, прежде всего в указании разного рода диапозонов, например, диапазонов лет. Конечный результат будет выглядеть прилично, если «война 1939–1945 гг.» вы напишете в HTML таким образом:
война 1939–1945 гг.
 

&laquo; &raquo; (кавычки-«елочки»)

В тексте, который вы сейчас читаете, постоянно встречаются такие кавычки. Между тем, на стандартной клавиатуре нет ничего подобного. Простейший способ вставить их в HTML — вот эти две мнемоники. Например, текст, который вы только что видели, «кавычки-«елочки»», записывается так:
кавычки-«елочки»
 

&ldquo; &rdquo; (английские двойные кавычки “ ”)

То же самое, но для английского языка.
 

&lt; &gt; (угловые скобки < >)

Это тот самый редкий случай, когда символ, хотя и есть на клавиатуре, не может напрямую использоваться в HTML. Ведь угловые скобки предназначены для выделения тегов! Если вы напишете <p>, то получится начало нового параграфа. А как же в таком случае записать саму эту комбинацию, например, для статьи вроде той, которую вы сейчас читаете? Единственный способ — использовать мнемоники:
<p>
Впрочем, эти знаки нужны довольно редко, главным образом в случае, если вам зачем-то нужно написать неравенство «2<3» или что-нибудь подобное.
 

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

Теперь, пожалуй, действительно всё! Остается положить эту заметку в какое-нибудь легкодоступное место, скажем, распечатать — и формат HTML вам более не страшен.

P.S. Я удержался от искушения и не привел здесь ни одной ссылки на другие ресурсы, которые посвящены формату HTML и содержат действительно очень хорошие, популярные и исчерпывающие сведения по этому формату. Для этого есть Google!

Октябрь 2013 г.

Комментарии по поводу написанного можно оставить на моем блоге, тема «Статья про HTML — для тех, кому он неинтересен»: http://danielalievsky.livejournal.com/31905.html.