Пример:
<a href="http://yandex.ru" target="_blank">Яндекс</a>
КАРТИНКИ
Вставляя картинку, делаем так:
<imgsrc="http://benzom.narod.ru/misc/holiday.jpg">
параметру src, как ты понимаешь, нужно присвоить значение - путь к картинке...
Есть ещё параметр alt (alternativetext), которому присваивается значение - текст, который будет выводиться при наведении курсора на картинку.
Параметр 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>
ТАБЛИЦЫ
Это один из основных ваших инструментов, как дизайнера,без них вы сможете сделать очень-очень мало. Один простой пример. Допустим, вам необходимо поместить строку текста (или картинку) в центр окна броузера. С помощью таблицы это делается так (в пример можно пока не вникать, а просто посмотреть):
<head>
<title>Вася</title>
</head>
<body>
<table width="100%" height=100%>
<tr>
<td align="center" valign="middle">СдесьбылВася!</td>
</tr>
</table>
</body>
</html>
Попробуйте сделать это без таблиц. Не выйдет.
Разберём пример. Суть в том, что мы сделали таблицу размером во всё окно броузера с единственной ячейкой, в центр которой мы, с помощью параметров выравнивания, заданных ячейке, поместили строку текста. Вот перевод примера:
<html - начало документа хтмл>
<head - служебная информация>
<title - заголовок окна>Вася</title - конец заголовка окна>
</head - конец блока служебной информации>
<body - основной блок информации>
<table - нарисовать таблицу width="100%" - шириной во всё окно броузера height=100% высотой во всё окно броузера>
<tr - начать новую строку таблицы>
<td - начало ячейки таблицы align="center" - содержимое ячейки выровнять по центру valign="middle" - содержимое ячейки по высоте выровнять по середине>Сдесь был Вася!</td - конец ячейки таблицы>
</tr - конец строки таблицы>
</table - конец таблицы>
</body - конец основного блока информации>
</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 ALIGN) (значения: top - по верхнему краю, bottom - по "дну", middle - посередине)
Пример:
<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>
Обратите внимание: ячейки таблицы связаны между собой - при изменении высоты одной ячейки меняется высота всех, расположенных с нею в одной строке, при изменении ширины меняется ширина ячеек, расположенных в одном столбце.
Снова усложним задачу. Сделаем таблицу из четырёх колонок с заголовком.
<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 в ячейки с заголовком: он-то и позволяет этой ячейке занять два столбца.
Аналогично действуем и создавая ячейку на две строки:
<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 align="right" valign="bottom" height=65%><a href="http://yandex.ru/"><img src="http://benzom.narod.ru/images/prince5_14.gif" border="0"></a></td>
<td align="left" valign="bottom"><a href="http://rambler.ru"><img src="http://benzom.narod.ru/images/prince5_15.gif" border="0"></a></td>
</tr>
<tr>
<td align="right" valign="top"><a href="http://yahoo.com"><img src="http://benzom.narod.ru/images/prince5_17.gif" border="0"></a></td>
<td align="left" 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 align="right" valign="bottom" height=65%><a href="http://yandex.ru/"><img src="http://benzom.narod.ru/images/prince5_14.gif" border="0"></a></td>
<td align="left" valign="bottom"><a href="http://rambler.ru"><img src="http://benzom.narod.ru/images/prince5_15.gif" border="0"></a></td>
</tr>
<tr>
<td align="right" valign="top"><a href="http://yahoo.com"><img src="http://benzom.narod.ru/images/prince5_17.gif" border="0"></a></td>
<td align="left" 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:
<head>
<title>Вася</title>
</head>
<body>
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="right" 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>