HTML редактирование

Информация взята с http://dikarka.ru. Вообще мне эти уроки очень понравились - просто инепринужденно о довольно сложных вещах. Читайте - очень советую, особенно для начинающих.

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

Ссылки

<A href = "fotoalbom/catslide.html">Мои кошки</A>

<A> и </A>	Теги ссылки
href = "fotoalbom/catslide.html" href = http://www.dikarka.ru	Адрес, куда надо перейти по ссылке
Мои кошки	Текст, который будет отображаться ссылкой

Cылка на электронный адрес

<A href = "mailto:your@address.com">Напишите мне письмо!</A>

Если вы хотите, чтобы открытый по ссылке документ не вытеснял собой предыдущий, можете дать указание открыть его в новом окне, добавив в конце ссылки атрибут target=blank, например:

<A href = "http://www.yandex.com" target=blank>Поисковая система Яндекс</A>

Если мы хотим, что бы ссылкой была картинка (home.gif), то

<A href="../index.html" title="возврат на Домашнюю страничку" ><img src="home.gif"></A>

Списки

Пояснение	Код в HTML	В окне браузера
Для создания нумерованного списка существует дескриптор <OL> (Ordered List - Нумерованный Список). Он имеет закрывающийся тег </OL>	<OL> <LI>Козленок <LI>Теленок <LI>Корова <LI>Бык <LI>Конь </OL>	Козленок Теленок Корова Бык Конь
Мы можем изменить арабские цифры на римские, и даже на строчные и прописные буквы с помощью атрибута <TYPE>: TYPE=1 - Числа TYPE=A - Прописные буквы TYPE=a - Cтрочные буквы TYPE=I - Прописные римские буквы TYPE=i- Строчные римские буквы	<OL> <LI TYPE=1>Козленок <LI TYPE=1>Теленок <LI TYPE=A>Корова <LI TYPE=A>Бык <LI TYPE=a>Конь <LI TYPE=a>Свинья <LI TYPE=I>Кот <LI TYPE=I>Пес <LI TYPE=i>Баран <LI TYPE=i>ÐŸÐµÑ‚ÑƒÑ </OL>	Козленок Теленок Корова Бык Конь Свинья Кот Пес Баран ПетуÑ
Для создания Ð·Ð°ÐºÑ€Ð°ÑˆÐµÐ½Ð½Ñ‹Ñ ÐºÑ€ÑƒÐ¶Ð¾Ñ‡ÐºÐ¾Ð² (маркеров), вместо цифр, нужно заменить <OL> на <UL>	<UL> <LI>Козленок <LI>Теленок <LI>Корова <LI>Бык <LI>Конь </UL>	Козленок Теленок Корова Бык Конь
Мы можем изменить форму маркера на круг, квадрат или диск с помощью атрибута TYPE: TYPE=circle TYPE=square TYPE=disc В wiki почемуто не работает, а в браузере нормально	<UL> <LI TYPE=circle >Козленок <LI TYPE=circle >Теленок <LI TYPE=square >Корова <LI TYPE=square >Бык <LI TYPE=disc >Конь <LI TYPE=disc >Свинья </UL>	Козленок Теленок Корова Бык Конь Свинья
Списки могут быть вложенными один в другой по принципу матрешки	<UL> <LI>Первый урок <LI>Второй урок <LI>Третий урок <UL> <LI>Знакомство с графикой <LI>Обрезка изображения <LI>Оптимизация для web </UL> <LI>Четвертый урок <LI>Пятый урок </UL>	Первый урок Второй урок Третий урок Знакомство с графикой Обрезка изображения Оптимизация для web Четвертый урок Пятый урок
Также, если пустить Ð½Ð°ÑˆÐ¸Ñ Ð³ÐµÑ€Ð¾ÐµÐ² "под нож", получится замечательное меню. Этим ножом будет у нас тег <MENU>	<MENU> <LH>Меню друзей: <LI>Козлятина <LI>Телятина <LI>Говядина <LI>Конина <LI>Свинина <LI>Кошатина <LI>Собачатина <LI>Баранина <LI>Курятина </MENU>
Вместо маркеров можно подставить любое изображение. Помните, в 10 уроке я нарисовала симпатичный домик и назвала его home.gif? . Так вот я могу спокойно пустить его вместо маркера!	<UL> <IMG src="home.gif">Козленок<br> <IMG src="home.gif">Теленок<br> <IMG src="home.gif">Корова<br> <IMG src="home.gif">Конь<br> <IMG src="home.gif">Свинья<br> </UL>
Ну, и конечно, можно сделать элементы списка - ссылками, если представить, что все эти друзья имеют свои странички в интернете.	<UL> <LI><A href="Kozel.html">Козленок</A> <LI><A href="Telenok.html">Теленок</A> <LI><A href="Korova.html">Корова</A> <LI><A href="Byk.html">Бык</A> <LI><A href="Kon.html">Конь</A> </UL>
Но иногда бывает Ð½ÐµÐ¾Ð±Ñ Ð¾Ð´Ð¸Ð¼Ð¾ начать нумерацию не с единицы, а с другого значения, вот скажем нам нужен такой список:	<ol start="3"> <li>Третий нумер нашей программы <li>Четвертый нумер <li>Пятый, есссесна! </ol>	Третий нумер нашей программы Четвертый нумер Пятый, есссесна!
Ну, а если мы Ð·Ð°Ñ Ð¾Ñ‚Ð¸Ð¼ в каком-то длинном списке где-то в центре поменять нумерацию, стартера недостаточно, но зато достаточно волшебного слова value И тогда, если мы напишем такой код:	<ol> <li>Первый участник <li>Второй участник <li>Третий участник <li>Четвертый участник <li>Пятый участник <li>Шестой участник <li>Седьмой участник <li value=28>А тут двадцать восьмой участник <li>Двадцать девятый <li>Тридцатый участник <li>Тридцать первый <li>Тридцать второй <li value=47>А тут опять замена на сорок седьмого <li>Сорок восьмой <li>Сорок девятый <li>Пятидесятый! </ol>	Первый участник Второй участник Третий участник Четвертый участник Пятый участник Шестой участник Седьмой участник А тут двадцать восьмой участник Двадцать девятый Тридцатый участник Тридцать первый Тридцать второй А тут опять замена на сорок седьмого Сорок восьмой Сорок девятый Пятидесятый!
Вот такие бывают списки. Есть еще и другие, не столь важные. Например, для того, чтобы сделать списки более компактными можно добавить к тегу UL или OL атрибут compact. Вот так: <UL=compact> или так: <OL=compact>	<OL=compact> <LI>Козленок <LI>Теленок <LI>Корова <LI>Бык <LI>Конь </OL>	<OL=compact> Козленок Теленок Корова Бык Конь

Сводная таблица свойств текста

НАЗВАНИЕ	ПРИМЕÐ	ЧТО ПОЛУЧИЛОСЬ
без изменений	-	ДИКАЯ ПРАВДА
letter-spacing Устанавливает расстояние (дополнительные промежутки) между буквами. Можно указывать расстояние в Ð»ÑŽÐ±Ñ‹Ñ Ð°Ð±ÑÐ¾Ð»ÑŽÑ‚Ð½Ñ‹Ñ ÐµÐ´Ð¸Ð½Ð¸Ñ†Ð°Ñ (in, cm, mm, pt, pc, px). Может задавать и отрицательные значения. Только смотрите, чтобы буквы не слиплись, и вместо одного слова не получилось бы одна буква.	letter-spacing:10pt	ДИКАЯ ПРАВДА
	letter-spacing:"-2pt"	ДИКАЯ ПРАВДА
word-spacing А это просто расстояние между словами. Указывается также в Ð»ÑŽÐ±Ñ‹Ñ Ñ€Ð°Ð·Ð¼ÐµÑ€Ð½Ð¾ÑÑ‚ÑÑ	word-spacing:7pt	ДИКАЯ ПРАВДА
	word-spacing:10mm	ДИКАЯ ПРАВДА
text-decoration Очень Ñ Ð¾Ñ€Ð¾ÑˆÐ°Ñ штука. Например, может использоваться для убирания (none) подчеркивания ссылок или, наоборот, для подчеркивания текста (underline), перечеркивания (line-through) или надчеркивания (overline) текста. А еще для вывода мерцающего текста (blink).	text-decoration:overline	ДИКАЯ ПРАВДА
	text-decoration:line-through	ДИКАЯ ПРАВДА
text-indent С его помощью можно установить "красную строку" (отступ). Указывается как в Ð°Ð±ÑÐ¾Ð»ÑŽÑ‚Ð½Ñ‹Ñ ÐµÐ´Ð¸Ð½Ð¸Ñ†Ð°Ñ , так и в Ð¿Ñ€Ð¾Ñ†ÐµÐ½Ñ‚Ð°Ñ Ð¾Ñ‚ абзаца. Если дать отрицательное значение - получится выступ (висячая строка).	text-indent:"10mm"	ДИКАЯ ПРАВДА
text-align Здесь нам знакомые left, center и right, то есть выравнивание текста по левому, правому краю, либо по центру. Есть еще justify, которое выравнивает текст по ширине.	text-align:right	ДИКАЯ ПРАВДА
vertical-align Устанавливает расположение текста по базовой линии (по умолчанию), либо по Ð²ÐµÑ€Ñ Ð½ÐµÐ¼Ñƒ (super), либо по нижнему (sub) индексу относительно родительского элемента. Незаменим, например, при Ñ„Ð¾Ñ€Ð¼ÑƒÐ»Ð°Ñ .	vertical-align:super (для "ДИКАЯ" - без изменений)	ДИКАЯПРАВДА
line-height Определяет расстояние между строчками. Задается как в Ð°Ð±ÑÐ¾Ð»ÑŽÑ‚Ð½Ñ‹Ñ ÐµÐ´Ð¸Ð½Ð¸Ñ†Ð°Ñ , так и в Ð¾Ñ‚Ð½Ð¾ÑÐ¸Ñ‚ÐµÐ»ÑŒÐ½Ñ‹Ñ . А можно и просто указывать число строк, не обязательно в Ñ†ÐµÐ»Ñ‹Ñ Ñ‡Ð¸ÑÐ»Ð°Ñ .	line-height:2.5	дикая правда на www.dikarka.ru дикая правда на www.dikarka.ru дикая правда на www.dikarka.ru

Вставка изображений

<img src="ris.01.gif" height=300 width=400 alt="это я в новом пиджаке" align=right hspace=20 vspace=20>

img src="ris.01.gif"	Название файла картинки, которую мы Ñ Ð¾Ñ‚Ð¸Ð¼ вставить
height=300	Размер по вертикали в px (очень желательно указывать его, что говорит об уважении читателя)
width=400	Размер по горизонтали в px (очень желательно указывать его, что говорит об уважении читателя)
alt="это я в новом пиджаке"	Текст, который будет в прямоугольнике, вместо рисунка, если его не загружать.
align=right	Выравнивание картинки, мб left, right и center
hspace=20	Расстояние от картинки до текста по горизонтали (px)
vspace=20	Расстояние от картинки до текста по вертикали (px)

Атрибуты таблиц

Сейчас я перечислю все, что можно делать с таблицами! Я перечислю атрибуты, которые можно поместить в тег <TABLE...>. Но нужно иметь в виду, что некоторые атрибуты срабатывают не во всех браузерах. Такие атрибуты я помечу звездочкой.

align выравнивает таблицу по левому (left) или правому (right) краю	<TABLE align=left border=1>	Таблица выровнена по левому краю
	<TABLE align=right border=1>	Таблица выровнена по правому краю
(*) background указывает изображение, которым заполнится фон таблицы	<TABLE background="fon.jpg">	Таблица с фоновым изображением
bgcolor цвет фона таблицы	<TABLE bgcolor=blue> <TABLE bgcolor=#3300CC>	А это просто голубой фон
borderширина рамки в пикселаÑ	<TABLE border=3>	рамка равна 3 пикселам
(*)bordercolorцвет рамки для всей таблицы	<TABLE bordercolor=blue>	Рамка - голубая. Работает не во Ð²ÑÐµÑ Ð±Ñ€Ð°ÑƒÐ·ÐµÑ€Ð°Ñ . Я вот в експлорере ее в упор не вижу!
cellpadding свободное пространство вокруг содержимого каждой ячейки	<TABLE cellpadding=10 border=1>	вокруг текста свободное пространство на 10 пикселов, видите?
cellspacing свободное пространство между ячейками	<TABLE cellspacing=10>	первая ячейка вторая ячейка
(*)height устанавливает высоту таблицы в пикселаÑ	<TABLE height=100 bgcolor=yellow>	Высота таблицы - 100 пикселов. Работает не во Ð²ÑÐµÑ Ð±Ñ€Ð°ÑƒÐ·ÐµÑ€Ð°Ñ
(*)hspace промежуток в Ð¿Ð¸ÐºÑÐµÐ»Ð°Ñ Ð¾Ñ‚ таблицы слева и справа	<TABLE hspace=15 border=5>	Таблица
(*) nowrap Запрещает перенос слов в ячейке	<TABLE nowrap> <TABLE>	эти слова ни за что не перенесутся
vspace оставляет промежуток ÑÐ²ÐµÑ€Ñ Ñƒ и снизу от таблицы в пикселаÑ	<TABLE vspace=10 border=1 bgcolor=aqua>	Ð¡Ð²ÐµÑ€Ñ Ñƒ и снизу свободное пространство на 10 пикселов
width ширина таблицы в Ð¿Ð¸ÐºÑÐµÐ»Ð°Ñ Ð¸Ð»Ð¸ в процентаÑ	<TABLE width=200 bgcolor=red border=1>	Эта таблица шириной в 200 пикселей. Если сомневаетесь, можете проверить.

Построение сложных таблиц

Атрибут	Код	Браузер
colspan Показывает сколько ячеек по вертикали (колонок) нужно объеденить в одну	<TABLE border=5> <TR> <TD>1ячейка</TD> <TD>2ячейка</TD> </TR> <TR> <TD colspan=2>3 ячейка, занимающая два столбца</TD> </TR> </TABLE>	1ячейка 2ячейка 3 ячейка, занимающая два столбца
rowspan Показывает сколько ячеек по горизонтали (рядов) нужно объеденить в один	<TABLE border=5> <TR> <TD rowspan=4>1 ячейка, объединяющая 4 ячейки</td> <TD>2 ячейка</TD></TR> <TD>3 ячейка</TD></TR> <TD>4 ячейка</TD></TR> <TD>5 ячейка</TD></TR> </TABLE>	1 ячейка, объединяющая 4 ячейки 2 ячейка 3 ячейка 4 ячейка 5 ячейка

Допустим мы хотим сделать такую таблицу, где объединенны и столбцы и строки thumb|400px|left|Вот такая таблица На этом рисунке не указаны теги TD, чтобы не загромождать рисунок, но вы уже кое в чем разбираетесь, поэтому и сами догадаетесь, что каждую ячеечку нужно обложить тегом TD

Обратите внимание, что десятая ячейка занимает столько места, сколько занимают четыре ячейки (1+5+6+7), то есть rowspan=4. Восьмая ячейка занимает место по ширине трех ячеек (2+3+4), а по высоте - двух ячеек (5+6), поэтому в теге TD у нее будет стоять colspan=3, а rowspan=2. Девятая же ячейка занимает по ширине столько же места, сколько и восьмая, то есть место трех ячеек (2+3+4), поэтому мы для нее запишем colspan=3.
Вот полный код этой таблицы:

<TABLE border=3>
<TR>
<TD>1 ячейка</TD>
<TD>2 ячейка</TD>
<TD>3 ячейка</TD>
<TD>4 ячейка</TD>
<TD rowspan=4>10 ячейка</TD>
</TR>
<TR>
<TD>5 ячейка</TD>
<TD colspan=3 rowspan=2>8 ячейка</TD>
<TR>
<TD>6 ячейка</TD>
<TR>
<TD>7 ячейка</TD>
<TD colspan=3>9 ячейка</TD>
</TABLE> 

И вот наша очень даже непростая таблица:

1 ячейка	2 ячейка	3 ячейка	4 ячейка	10 ячейка
5 ячейка	8 ячейка
6 ячейка
7 ячейка	9 ячейка