Язык разметки гипертекста
HTML - hyper text markup language
или, по-русски, язык разметки гипертекста - никакой на самом деле не язык программирования, а набор инструкций для программы-просмотрщика (броузера). Чтобы писать странички непосредственно в html-коде вам потребуется обычный текстовый редактор или, что удобнее, такая программа, как, например, HomeSite или Arachnophilia (ни в коем случае не Microsoft FrontPage или Netscape Composer - эти программы в первую очередь сделаны для опосредованного, "визуального" создания страничек, то есть в них с собственно html-кодом вы можете вовсе не иметь дело; но они могут не все, допускают кучу бесящих издержек и создают огромное количество лишних участков кода).
Ещё раз: хтмл - не язык программирования. Имея "словарик", хтмл-код можно читать, как относительно связный текст. И ещё одно: "делание" страничек требует минимальных систематических знаний по хтмл-у, не надо запоминать всё, что написано в многочисленных руководствах по хтмл-у. Решайте задачи по мере их возникновения.
Поехали
Язык хтмл состоит из т.н. "тэгов". (TAG - бирка, метка). Большая часть тэгов состоит как бы из двух частей, между которыми содержится текст, который увидит посетитель странички, свойства этого текста описываются этим тэгом. В первой части содержится само "имя" тэга и, если это нужно, некоторые параметры. Вторая часть содержит только имя тэга с предваряющей его косой чертой. Например: </pre> Такая конструкция сигнализирует броузеру, что к последующему содержанию странички этот тэг (в нашем случае тэг "<pre>") уже не относится.
Некоторым тэгам закрывающая часть не нужна, например, тэгу <br>, который указывает броузеру, что следующий за ним текст следует начать выводить с новой строки.
Пример:
<html>
<head>
<title>Стишок</title>
</head>
<body>
Однажды, в студеную зимнюю пору
Сижу за решеткой, в темнице сырой.
Гляжу, поднимается медленно в гору
Вскормленный в неволе орел молодой.
И шествуя важно, в спокойствии чинном,
Мой верный товарищ, махая крылом,
В больших сапогах, в полушубке овчинном,
Кровавую пищу клюет под окном!
</body>
</html>
Разбор примера:
<html> - указывает броузеру, что файл, который к нему попал - не просто текстовый, а документ html.
В пределах тэга <head>...</head> указывается, в основном, служебная информация, о ней - при необходимости, позже. Единственное, что следует отметить, это находящийся в этих пределах тэг <title>...</title> - В нём указывается "Заголовок" странички, который выводится в синей полосе вверху окна броузера.
В пределах тэга <body>...</body> находится как раз то, что будет собственно в окне броузера. "Перевод" примера:
<Начало документа хтмл>
<блок служебной информации>
<заголовок странички>Стишок<конец заголовка>
<начало тела документа>
Однажды, в студеную зимнюю пору
Сижу за решеткой, в темнице сырой.
Гляжу, поднимается медленно в гору
Вскормленный в неволе орел молодой.
И шествуя важно, в спокойствии чинном,
Мой верный товарищ, махая крылом,
В больших сапогах, в полушубке овчинном,
Кровавую пищу клюет под окном!
<конец тела документа>
<конец документа хтмл>
Если скопировать содержимое примера в отдельный файл, назвать этот фал "как_нибудь.htm" и открыть этот файл в броузере, вы увидите ваш стишок, записанный в одну строку. Дело в том, что хтмл не воспринимает символ перевода каретки на новую строку. Кроме того, он не воспринимает более одного пробела, поэтому не важно, сколько пробелов между словами было в исходном тексте - на экране броузера останется только один. О том, что нужно делать, когда нужно больше пробелов, будет сказано ниже.
Чтобы разбить текст на строки, нужно в конце каждой строки поставить тэг <br> (о нём мы уже вскользь упоминали). Вот так:
<html>
<head>
<title>Стишок</title>
</head>
<body>
Однажды, в студеную зимнюю пору<br>
Сижу за решеткой, в темнице сырой.<br>
Гляжу, поднимается медленно в гору<br>
Вскормленный в неволе орел молодой.<br>
И шествуя важно, в спокойствии чинном,<br>
Мой верный товарищ, махая крылом,<br>
В больших сапогах, в полушубке овчинном,<br>
Кровавую пищу клюет под окном!
</body>
</html>
Теперь ваш стишок выглядит уже более привычно для глаза.
Попробуем усложнить задачу. Заствим вывести текст белым шрифтом на черном фоне. Задать цвет шрифта можно несколькими способами: первый, который мы рассмотрим вначале, сделает белым весь текст на страничке (если для отдельного блока текста не указано иного - этот случай рассмотрим вторым). Есть ещё один способ - использовать css, но об этом позже.
Оба примера, которые мы собираемся привести, требуют от нас использования т.н. параметров тэгов.
ПАРАМЕТРЫ ТЭГОВ
Это такие инструкции, которые сами по себе тэгами не являются и отдельно не используются, а описывают свойства содержимого (например, текста или картинки) какого-то тэга. Например, чтобы сделать весь текст на страничке белым необходимо к тэгу body добавить параметр text="white". Делается это так:
<html>
<head>
<title>Стишок</title>
</head>
<body text="white">
Однажды, в студеную зимнюю пору<br>
Сижу за решеткой, в темнице сырой.<br>
Гляжу, поднимается медленно в гору<br>
Вскормленный в неволе орел молодой.<br>
И шествуя важно, в спокойствии чинном,<br>
Мой верный товарищ, махая крылом,<br>
В больших сапогах, в полушубке овчинном,<br>
Кровавую пищу клюет под окном!
</body>
</html>
Если открыть такую страничку, то скорее всего вы не увидите ничего - т.к. белые буквы сольются с фоном. Сделаем фон черным:
<html>
<head>
<title>Стишок</title>
</head>
<body text="white" bgcolor="black">
Однажды, в студеную зимнюю пору<br>
Сижу за решеткой, в темнице сырой.<br>
Гляжу, поднимается медленно в гору<br>
Вскормленный в неволе орел молодой.<br>
И шествуя важно, в спокойствии чинном,<br>
Мой верный товарищ, махая крылом,<br>
В больших сапогах, в полушубке овчинном,<br>
Кровавую пищу клюет под окном!
</body>
</html>
Договоримся называть ту часть параметра тэга, которая пишется без кавычек и обозначает, что собственно мы хотим изменить (например bgcolor или text) - собственно параметром, а то, что мы пишем в кавычках имея в виду то, каким образом мы хотим изменить параметр - значением параметра. Легко догадаться, что поменяв в примере black и white на, например red, blue, gray, yellow вы измените цвета фона или текста. Можете поупражняться.
А что, если нужно задать определённые свойства не всему тексту на страничке, а только отдельному куску (второй пример)? Это тоже можно сделать несколькими способами.
Например, изменить свойства шрифта. Для нужно сделать так:
<font>кусок текста, который мы изменяем</font>
Это для начала. Теперь нужно дописать к тэгу <font> необходимые параметры, например:
размер size (значения: 14pt - "четырнадцатый" - вы можете ввести любое число, +1 - увеличить на 1 пункт, -1 - уменьшить на 1 пункт)
цвет color (значения: black, white, red, green, blue и т.д. или шестнадцатеричный код цвета - как его указывать и откуда брать расскажу ниже)
Вывести текст курсивом можно так: <i>текст</i>
i - от слова italic (так легче запомнить)
Жирный шрифт: <strong>текст</strong>
Теперь пример:
<html>
<head>
<title>Стишок</title>
</head>
<body text="white" bgcolor="black">
<font size=+1 color="blue">
Однажды, в студеную зимнюю пору<br></font>
<i>Сижу за решеткой, в темнице сырой.</i><br>
<strong>Гляжу, поднимается медленно в гору</strong><br>
<font color="red"><i><strong>Вскормленный в неволе орел молодой.</strong></i></font><br>
И шествуя важно, в спокойствии чинном,<br>
<strong><font color="red"><i>Мой верный товарищ, махая крылом,</i></strong></font><br>
В больших сапогах, в полушубке овчинном,<br>
Кровавую пищу клюет под окном!
</body>
</html>
Обратите внимание на четвёртую и шестую строчки: в окне браузера они выглядят одинаково, а если вы взглянете на код, то увидите, что тэги, которые их описывают, расположены в разном порядке (но они тоже одинаковы). Вывод: порядок - не важен. Он может быть важен для вас - чтобы не запутаться.
Теперь о шестнадцатеричных кодах цветов. Понятно, что всю гамму оттенков не опишешь словами red, green, blue и т.д. Чтобы задать произвольный цвет (не важно, чему - фону, тексту, бортику таблицы или чему-то ещё) нужно использовать не словесное обозначение, а упомянутый код.
Шестнадцатеричный код цвета легко узнать почти в любой графической программе. Например, в Photoshop достаточно один раз щелкнуть на образце текущего цвета внизу панели инструментов, вызвав диалог выбора цвета. Параметры, обозначенные буквами “R”, “G” и “B” («red», «green» и «blue» соответственно) вы, переведя их в шестнадцатеричную систему (делается на калькуляторе, для особых фанатов – можно и вручную), можете использовать как параметр для тэга, записав их в таком же порядке и предварив символом “#”. Вот так например:
<body bgcolor=”#123456”>
Последние версии Фотошопа делают всё сами и в окошке выбора цвета указывается готовый код выбранного цвета.
ВЫРАВНИВАНИЕ ТЕКСТА
Обычно текст на страничке расположен кусками, каждый кусок - абзац. В хтмл-е абзац (paragraph) выглядит так: <p>текст абзаца</p>
Можно задать свойства всему тексту абзаца, с помощью следующих параметров:
выравнивание>
Также параметры выравнивания можно задать для ячейки таблицы, содержащей выравниваемый текст (см. ниже).
ССЫЛКИ
Чтобы сделать ссылку, пользуемся тэгом <a>:
<a href="http://yandex.ru">Яндекс</a>
Доступные параметры:
target - указывает, где будет открываться страничка, на которуюю ты ссылаешься (значения: "_blank" - в новом окне, при использовании фреймов (расскажу ниже) параметру можно присвоить значение имя соответствующего фрейма)
Пример:
<a href="http://yandex.ru" target="_blank">Яндекс</a>
КАРТИНКИ
Вставляя картинку, делаем так:
<img src="http://benzom.narod.ru/misc/holiday.jpg">
параметру src, как ты понимаешь, нужно присвоить значение - путь к картинке...
Есть ещё параметр alt (alternative text), которому присваивается значение - текст, который будет выводиться при наведении курсора на картинку.
Параметр border может принимать числовые значения начиная с нуля. Обозначает толщину "бортика" вокруг картинки, когда она используется как ссылка.
Пример:
<a href="http://www.yandex.ru/yandsearch?rpt=rad&text=%D1%EE%F4%FC%FF+%C3%EE%EB%EB%E8%E4%FD%E9"><img src="http://benzom.narod.ru/misc/holiday.jpg" border="2" alt="Софья Голлидэй"></a>
ТАБЛИЦЫ
Это один из основных ваших инструментов, как дизайнера, без них вы сможете сделать очень-очень мало. Один простой пример. Допустим, вам необходимо поместить строку текста (или картинку) в центр окна броузера. С помощью таблицы это делается так (в пример можно пока не вникать, а просто посмотреть):
<html>
<head>
<title>Вася</title>
</head>
<body>
<table width="100%" height=100%>
<tr>
<td>valign="middle">Сдесь был Вася!</td>
</tr>
</table>
</body>
</html>
Попробуйте сделать это без таблиц. Не выйдет.
Разберём пример. Суть в том, что мы сделали таблицу размером во всё окно броузера с единственной ячейкой, в центр которой мы, с помощью параметров выравнивания, заданных ячейке, поместили строку текста. Вот перевод примера:
<html - начало документа хтмл>
<head - служебная информация>
<title - заголовок окна>Вася</title - конец заголовка окна>
</head - конец блока служебной информации>
<body - основной блок информации>
<table - нарисовать таблицу width="100%" - шириной во всё окно броузера height=100% высотой во всё окно броузера>
<tr - начать новую строку таблицы>
<td - начало ячейки таблицы>
</tr - конец строки таблицы>
</table - конец таблицы>
</body - конец основного блока информации>
</html - конец документа хтмл>
Совет: здесь или в других примерах вы можете, чтобы понять, как это работает, убрать какой-нибудь параметр тэга и посмотреть, что изменится.
Сделаем теперь таблицу с четырьмя ячейками:
<html>
<head>
<title>Вася</title>
</head>
<body>
<table border=1>
<tr>
<td>Первая</td>
<td>Вторая</td>
</tr>
<tr>
<td>Третья</td>
<td>Четвёртая</td>
</tr>
</table>
</body>
</html>
Перевожу:
<html>
<head>
<title>Вася</title>
</head>
<body>
<table - начало таблицы border=1 - бортик между ячейками сделать толщиной 1>
<tr начало строки таблицы>
<td - начало ячейки таблицы>Первая</td конец ячейки таблицы>
<td - начало ячейки>Вторая</td - конец ячейки>
</tr - конец строки таблицы>
<tr - начало новой строки таблицы>
<td - начало ячейчи>Третья</td - конец ячейки>
<td начало ячейки>Четвёртая</td - конец ячейки>
</tr - конец строки>
</table - конец таблицы>
</body>
</html>
Как видите, всё довольно однообразно.
Параметры, которые можно указывать для тэга table (т.е. те, которые будут относиться ко всей таблице):
bgcolor - цвет фона (какие значения может принимать такой параметр, мы уже обсуждали чуть выше)
border - толщина "бортика" (значения: числовые, в т.ч. нуль)
bordercolor - цвет "бортика" (как указывать цвета мы уже обсуждали)
width - ширина таблицы (можно указывать числом - тогда вы получите таблицу соответствующей ширины в пикселях, или в процентах от ширины окна броузера (как в первой табличке "Здесь был вася")
height - высота таблицы (аналогично ширине)
Есть и другие параметры, например
lightbordercolor
darkbordercolor - эти принимают различные цветовые значения. Попробуй, и ты поймёшь, для чего они нужны (это второстепенные параметры)
Пример:
<html>
<head>
<title>Вася</title>
</head>
<body>
<table border="1" bordercolor="red" bgcolor="gray" width="400" height="50%">
<tr>
<td>Первая</td>
<td>Вторая</td>
</tr>
<tr>
<td>Третья</td>
<td>Четвёртая</td>
</tr>
</table>
</body>
</html>
Ширина таблицы в примере указана в абсолютных числах - 400 пикселей, а высота - в процентах. Поэтому при изменении размеров окна броузера высота таблицы будет изменяться.
Теперь о параметрах, которые используются с тэгом td и изменяют, соответственно, свойства отдельной ячейки таблицы:
bgcolor - цвет фона (всё так же, как для таблицы в целом)
width - ширина ячейки (можно указывать числом - тогда вы получите ячейку соответствующей ширины в пикселях, или в процентах от ширины окна броузера (как в первой табличке "Здесь был вася")
height - высота ячейки (аналогично ширине)
align - выравнивание в ячейке (значения: left - по левому краю, right - по правому, center - по центру)
valign - выравнивание по высоте (Vertical>
Пример:
<html>
<head>
<title>Вася</title>
</head>
<body>
<table border="1" bordercolor="red" bgcolor="gray" width="400" height="50%">
<tr>
<td bgcolor="pink" valign="bottom" align="right" width="300" height="10">Первая</td>
<td>Вторая</td>
</tr>
<tr>
<td>Третья</td>
<td>Четвёртая</td>
</tr>
</table>
</body>
</html>
Обратите внимание: ячейки таблицы связаны между собой - при изменении высоты одной ячейки меняется высота всех, расположенных с нею в одной строке, при изменении ширины меняется ширина ячеек, расположенных в одном столбце.
Снова усложним задачу. Сделаем таблицу из четырёх колонок с заголовком.
<html>
<head>
<title>Вася</title>
</head>
<body>
<table border="1" bordercolor="red" bgcolor="gray" width="400" height="50%">
<tr>
<td colspan="2">ЗАГОЛОВОК</td></tr>
<td width="50%">Первая</td>
<td>Вторая</td>
</tr>
<tr>
<td>Третья</td>
<td>Четвёртая</td>
</tr>
</table>
</body>
</html>
Обратите внимание на параметр colspan в ячейки с заголовком: он-то и позволяет этой ячейке занять два столбца.
Аналогично действуем и создавая ячейку на две строки:
<html>
<head>
<title>Вася</title>
</head>
<body>
<table border="1" bordercolor="red" bgcolor="gray" width="400" height="50%">
<tr>
<td colspan="2">ЗАГОЛОВОК</td></tr>
<td rowspan="2">двухстрочная ячейка</td>
<td>Первая</td>
</tr>
<tr>
<td>вторая</td>
</tr>
</table>
</body>
</html>
Напоследок разговора о таблицах один небольшой пример их использования. Допустим, у вас есть картинка, разделённая на четыре части (разные файлы), каждая из которых служит ссылкой. Ваша задача сделать так, чтобы исходная (выглядящая целой) картинка оказалась в центре окна броузера. Будем действовать поэтапно.
Создаём таблицу размером во всё окно броузера (указывая ширину и высоту как 100%) с четырьмя ячейками и в каждую из ячеек помещаем соответствующий кусок картинки. Выравнивание в ячейках организуем так, чтобы картинка "собралась" в центре. Итак:
<html>
<head>
<title>Вася</title>
</head>
<body>
<table width="100%" height="100%">
<tr>
<td>valign="bottom" height=65%><a href="http://yandex.ru/"><img src="http://benzom.narod.ru/images/prince5_14.gif" border="0"></a></td>
<td>valign="bottom"><a href="http://rambler.ru"><img src="http://benzom.narod.ru/images/prince5_15.gif" border="0"></a></td>
</tr>
<tr>
<td>valign="top"><a href="http://yahoo.com"><img src="http://benzom.narod.ru/images/prince5_17.gif" border="0"></a></td>
<td>valign="top"><a href="http://aport.ru"><img src="http://benzom.narod.ru/images/prince5_18.gif" border="0"></a></td>
</tr>
</table>
</body>
</html>
Обратите внимание, что параметр border для всех кусков картинки взят нулевой - иначе каждая будет окружена противным голубым венчиком.
Высота первой ячейки (а, следовательно, и первой строки) указанная как 65% указана для того, чтобы картинка действительно собралась в центре окна. Если этот параметр убрать, то из-за разного размера картинок результирующее изображение окажется ниже центра. Значение 65% подобрано методом тыка.
Всё бы ничего, но при просмотре примера видим, что куски картинки разделены, не сливаются в единое изображение. Это можно преодолеть, используя два не описанных ранее параметра тэга table, описывающих расстояния между ячейками таблицы - cellspacing и cellpadding (точнее, между ячейками в строке и между строками). Естественно, параметр border тоже надо приравнять нулю.
Пример:
<html>
<head>
<title>Вася</title>
</head>
<body>
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>valign="bottom" height=65%><a href="http://yandex.ru/"><img src="http://benzom.narod.ru/images/prince5_14.gif" border="0"></a></td>
<td>valign="bottom"><a href="http://rambler.ru"><img src="http://benzom.narod.ru/images/prince5_15.gif" border="0"></a></td>
</tr>
<tr>
<td>valign="top"><a href="http://yahoo.com"><img src="http://benzom.narod.ru/images/prince5_17.gif" border="0"></a></td>
<td>valign="top"><a href="http://aport.ru"><img src="http://benzom.narod.ru/images/prince5_18.gif" border="0"></a></td>
</tr>
</table>
</body>
</html>
Теперь всё в порядке! В качестве последнего штриха, сделаю ссылки хотя бы чуть-чуть осмысленными и опишу каждый кусок картинки с помощью параметра alt:
<html>
<head>
<title>Вася</title>
</head>
<body>
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>valign="bottom" height=65%><a href="http://malenkiyprinc.narod.ru/"><img src="http://benzom.narod.ru/images/prince5_14.gif" border="0" alt="Сайт о "Маленьком принце"" border="0"></a></td>
<td>valign="bottom"><a href="http://www.yandex.ru/yandsearch?rpt=rad&text=%EC%E0%EB%E5%ED%FC%EA%E8%E9+%EF%F0%E8%ED%F6"><img src="http://benzom.narod.ru/images/prince5_15.gif" alt="Искать "Маленький принц" в Яндексе" border="0"></a></td>
</tr>
<tr>
<td>valign="top"><a href="http://search.yahoo.com/search?p=Le+Petit+Prince&ei=UTF-8&fr=FP-tab-web-t&fl=0&x=wrt"><img src="http://benzom.narod.ru/images/prince5_17.gif" alt="Искать "Le Petit Prince" в Yahoo" border="0"></a></td>
<td>valign="top"><a href="http://search.rambler.ru/srch?old_q=%C0%ED%F2%F3%E0%ED+%E4%E5+%D1%E5%ED%F2+%DD%EA%E7%FE-%CF%E5%F0%E8&words=%DD%EA%E7%FE-%CF%E5%F0%E8&set=www"><img src="http://benzom.narod.ru/images/prince5_18.gif" border="0" alt="Искать "Экзю-Пери" в Rambler-e" border="0"></a></td>
</tr>
</table>
</body>
</html>
К слову сказать, обратите внимание, каким образом мы добились в примере наличия кавычек в пределах параметра alt. Поскольку кавычки - символ, используемый в html-коде, возникают определённые трудности с его использованием в "смысловой" части сайта. Попробуйте вместо " поставить в примере обычные кавычки - вы увидите, возникнет ошибка.
Чтобы избежать подобных ошибок, для каждого из символов, использующихся в html имеется соответствующий "заменитель", который используется, когда необходимо отобразить такой символ на экране броузера. Так, например, чтобы вывести на экран символ "<" нужно написать <