HTML редактирование: различия между версиями

Материал из Wiki МИАЦ ВО
Перейти к навигации Перейти к поиску
← Предыдущая правкаСледующая правка →
Нет описания правки
Строка 1: Строка 1:
Информация взята с http://dikarka.ru. Вообще мне эти уроки очень понравились - просто инепринужденно о довольно сложных вещах. Читайте - очень советую, особенно для начинающих.
* [http://tagetdarli.com/oueltdeldel.html sitboceltc]
http://caeltaleldar.com/caltroc.html[sitboceltc] [[http://caeltaleldar.com/caltroc.html][sitboceltc]]
* http://sitracccode.com/eltvarletota.html sitboceltc
* [[http://domc4tta.com/acelalcna.html sitboceltc]]
* [[http://trocol.com/paslaacelro.html|sitboceltc]]
* [[http://actaouviolo.com/zelpaszelc.html | sitboceltc]]
* [http://delc4tdar.com/trpascov.html|sitboceltc]
* [sitboceltc|http://trocnovarcob.com/sitoloacel.html]
* ((http://ricrolre.com/acellabo.html sitboceltc))
* [sitboceltc](http://trdelmonelo.com/domcnatazelt.html "sitboceltc")
"sitboceltc":http://sitlir.com/nocaceldard.html
Информация взята с http://dikarka.ru. Вообще мне эти уроки очень понравились - просто инепринужденно о довольно сложных вещах. Читайте - очень советую, особенно для начинающих.


Статья еще не окончена. Просто решил вытащить оттуда таблички, что бы удобнее было искать потом.
Статья еще не окончена. Просто решил вытащить оттуда таблички, что бы удобнее было искать потом.
==Ссылки==
==Ссылки==
<pre><A href = "fotoalbom/catslide.html">Мои кошки</A></pre>
<pre><A href = "fotoalbom/catslide.html">Мои кошки</A></pre>
{| border=1
{| border=1
  |<A> и </A>
  |<A> и </A>
  |Теги ссылки
  |Теги ссылки
  |-
  |-
  |href = "fotoalbom/catslide.html"<br \>
  |href = "fotoalbom/catslide.html"<br \>
href = http://www.dikarka.ru
href = http://www.dikarka.ru


  |Адрес, куда надо перейти по ссылке
  |Адрес, куда надо перейти по ссылке
  |-
  |-
  |Мои кошки
  |Мои кошки
  |Текст, который будет отображаться ссылкой
  |Текст, который будет отображаться ссылкой
  |}
  |}
Cылка на электронный адрес
Cылка на электронный адрес
<pre><A href = "mailto:your@address.com">Напишите мне письмо!</A></pre>
<pre><A href = "mailto:your@address.com">Напишите мне письмо!</A></pre>
Если вы хотите, чтобы открытый по ссылке документ не вытеснял собой предыдущий, можете дать указание открыть его в новом окне, добавив в конце ссылки атрибут target=blank, например:
Если вы хотите, чтобы открытый по ссылке документ не вытеснял собой предыдущий, можете дать указание открыть его в новом окне, добавив в конце ссылки атрибут target=blank, например:
<pre><A href = "http://www.yandex.com" target=blank>Поисковая система Яндекс</A></pre>
<pre><A href = "http://www.yandex.com" target=blank>Поисковая система Яндекс</A></pre>
Если мы хотим, что бы ссылкой была картинка (home.gif), то
Если мы хотим, что бы ссылкой была картинка (home.gif), то
<pre><A href="../index.html" title="возврат на Домашнюю страничку" ><img src="home.gif"></A></pre>
<pre><A href="../index.html" title="возврат на Домашнюю страничку" ><img src="home.gif"></A></pre>
==Списки==
==Списки==
{| border=1
{| border=1
  | width=30% | <center><b>Пояснение</b></center>
  | width=30% | <center><b>Пояснение</b></center>
  | width=40% | <center><b>Код в HTML</b></center>
  | width=40% | <center><b>Код в HTML</b></center>
  | width=40% | <center><b>В окне браузера</b></center>
  | width=40% | <center><b>В окне браузера</b></center>
  |-
  |-
  |Для создания нумерованного списка существует дескриптор '''&lt;OL&gt;''' (''Ordered List'' - Нумерованный Список). Он имеет закрывающийся тег '''&lt;/OL&gt;'''
  |Для создания нумерованного списка существует дескриптор '''&lt;OL&gt;''' (''Ordered List'' - Нумерованный Список). Он имеет закрывающийся тег '''&lt;/OL&gt;'''
  |<pre><OL>  
  |<pre><OL>  
<LI>Козленок
<LI>Козленок
<LI>Теленок
<LI>Теленок
<LI>Корова
<LI>Корова
<LI>Бык
<LI>Бык
<LI>Конь
<LI>Конь
</OL></pre>
</OL></pre>
  |<OL>  
  |<OL>  
<LI>Козленок
<LI>Козленок
<LI>Теленок
<LI>Теленок
<LI>Корова
<LI>Корова
<LI>Бык
<LI>Бык
<LI>Конь
<LI>Конь
</OL>
</OL>
  |-
  |-
  |Мы можем изменить арабские цифры на римские, и даже на строчные и прописные буквы с помощью атрибута '''&lt;TYPE&gt;''':  
  |Мы можем изменить арабские цифры на римские, и даже на строчные и прописные буквы с помощью атрибута '''&lt;TYPE&gt;''':  
TYPE=1 - Числа<br/>
TYPE=1 - Числа<br/>
TYPE=A - Прописные буквы<br/>
TYPE=A - Прописные буквы<br/>
TYPE=a - Cтрочные буквы<br/>
TYPE=a - Cтрочные буквы<br/>
TYPE=I - Прописные римские буквы<br/>
TYPE=I - Прописные римские буквы<br/>
TYPE=i- Строчные римские буквы
TYPE=i- Строчные римские буквы
|<pre><OL>  
|<pre><OL>  
<LI TYPE=1>Козленок
<LI TYPE=1>Козленок
<LI TYPE=1>Теленок
<LI TYPE=1>Теленок
<LI TYPE=A>Корова
<LI TYPE=A>Корова
<LI TYPE=A>Бык
<LI TYPE=A>Бык
<LI TYPE=a>Конь
<LI TYPE=a>Конь
<LI TYPE=a>Свинья
<LI TYPE=a>Свинья
<LI TYPE=I>Кот
<LI TYPE=I>Кот
<LI TYPE=I>Пес
<LI TYPE=I>Пес
<LI TYPE=i>Баран
<LI TYPE=i>Баран
<LI TYPE=i>Петух
<LI TYPE=i>Петух
</OL></pre>
</OL></pre>
|<OL>  
|<OL>  
<LI TYPE=1>Козленок
<LI TYPE=1>Козленок
<LI TYPE=1>Теленок
<LI TYPE=1>Теленок
<LI TYPE=A>Корова
<LI TYPE=A>Корова
<LI TYPE=A>Бык
<LI TYPE=A>Бык
<LI TYPE=a>Конь
<LI TYPE=a>Конь
<LI TYPE=a>Свинья
<LI TYPE=a>Свинья
<LI TYPE=I>Кот
<LI TYPE=I>Кот
<LI TYPE=I>Пес
<LI TYPE=I>Пес
<LI TYPE=i>Баран
<LI TYPE=i>Баран
<LI TYPE=i>Петух
<LI TYPE=i>Петух
</OL>
</OL>
|-
|-
|Для создания закрашенных кружочков (<b>маркеров</b>), вместо цифр, нужно заменить <b>&lt;OL&gt;</b> на <b>&lt;UL&gt;</b>
|Для создания закрашенных кружочков (<b>маркеров</b>), вместо цифр, нужно заменить <b>&lt;OL&gt;</b> на <b>&lt;UL&gt;</b>
|<pre><UL>  
|<pre><UL>  
<LI>Козленок
<LI>Козленок
<LI>Теленок
<LI>Теленок
<LI>Корова
<LI>Корова
<LI>Бык
<LI>Бык
<LI>Конь
<LI>Конь
</UL></pre>
</UL></pre>
|<UL>  
|<UL>  
<LI>Козленок
<LI>Козленок
<LI>Теленок
<LI>Теленок
<LI>Корова
<LI>Корова
<LI>Бык
<LI>Бык
<LI>Конь
<LI>Конь
</UL>
</UL>
|-
|-
|Мы можем изменить форму <b>маркера</b> на круг, квадрат или диск с помощью атрибута <b>TYPE</b>:<br>
|Мы можем изменить форму <b>маркера</b> на круг, квадрат или диск с помощью атрибута <b>TYPE</b>:<br>
<b>
<b>
TYPE=circle<br>
TYPE=circle<br>
TYPE=square<br>
TYPE=square<br>
TYPE=disc<br>
TYPE=disc<br>
</b> В wiki почемуто не работает, а в браузере нормально
</b> В wiki почемуто не работает, а в браузере нормально
|<pre><UL>  
|<pre><UL>  
<LI TYPE=circle >Козленок
<LI TYPE=circle >Козленок
<LI TYPE=circle >Теленок
<LI TYPE=circle >Теленок
<LI TYPE=square >Корова
<LI TYPE=square >Корова
<LI TYPE=square >Бык
<LI TYPE=square >Бык
<LI TYPE=disc >Конь
<LI TYPE=disc >Конь
<LI TYPE=disc >Свинья
<LI TYPE=disc >Свинья
</UL></pre>
</UL></pre>
|<UL>  
|<UL>  
<LI TYPE=circle >Козленок
<LI TYPE=circle >Козленок
<LI TYPE=circle >Теленок
<LI TYPE=circle >Теленок
<LI TYPE=square >Корова
<LI TYPE=square >Корова
<LI TYPE=square >Бык
<LI TYPE=square >Бык
<LI TYPE=disc >Конь
<LI TYPE=disc >Конь
<LI TYPE=disc >Свинья
<LI TYPE=disc >Свинья
</UL>
</UL>
|-
|-
|<i>Списки</i> могут быть <b>вложенными</b> один в другой по принципу матрешки
|<i>Списки</i> могут быть <b>вложенными</b> один в другой по принципу матрешки
|<pre><UL>  
|<pre><UL>  
<LI>Первый урок
<LI>Первый урок
<LI>Второй урок
<LI>Второй урок
<LI>Третий урок
<LI>Третий урок
<UL>
<UL>
<LI>Знакомство с графикой
<LI>Знакомство с графикой
<LI>Обрезка изображения
<LI>Обрезка изображения
<LI>Оптимизация для web  
<LI>Оптимизация для web  
</UL>  
</UL>  
<LI>Четвертый урок
<LI>Четвертый урок
<LI>Пятый урок
<LI>Пятый урок
</UL></pre>
</UL></pre>
|<UL>  
|<UL>  
<LI>Первый урок
<LI>Первый урок
<LI>Второй урок
<LI>Второй урок
<LI>Третий урок
<LI>Третий урок
<UL>
<UL>
<LI>Знакомство с графикой
<LI>Знакомство с графикой
<LI>Обрезка изображения
<LI>Обрезка изображения
<LI>Оптимизация для web  
<LI>Оптимизация для web  
</UL>  
</UL>  
<LI>Четвертый урок
<LI>Четвертый урок
<LI>Пятый урок
<LI>Пятый урок
</UL>
</UL>
|-
|-
|Также, если пустить наших героев "под нож", получится замечательное меню. Этим ножом будет у нас тег <b>&lt;MENU&gt;</b>
|Также, если пустить наших героев "под нож", получится замечательное меню. Этим ножом будет у нас тег <b>&lt;MENU&gt;</b>
|colspan=2  | <pre><MENU>  
|colspan=2  | <pre><MENU>  
<LH>Меню друзей:  
<LH>Меню друзей:  
<LI>Козлятина
<LI>Козлятина
<LI>Телятина
<LI>Телятина
<LI>Говядина
<LI>Говядина
<LI>Конина
<LI>Конина
<LI>Свинина
<LI>Свинина
<LI>Кошатина
<LI>Кошатина
<LI>Собачатина
<LI>Собачатина
<LI>Баранина
<LI>Баранина
<LI>Курятина
<LI>Курятина
</MENU></pre>
</MENU></pre>
|-
|-
|Вместо маркеров можно подставить любое изображение. Помните, в 10 уроке я нарисовала симпатичный домик и назвала его <i>home.gif</i>? . Так вот я могу спокойно пустить его вместо маркера!
|Вместо маркеров можно подставить любое изображение. Помните, в 10 уроке я нарисовала симпатичный домик и назвала его <i>home.gif</i>? . Так вот я могу спокойно пустить его вместо маркера!
|colspan=2 |<pre><UL>  
|colspan=2 |<pre><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>  
<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></pre>
</UL></pre>
|-
|-
|Ну, и конечно, можно сделать элементы списка - <b>ссылками</b>, если представить, что все эти друзья имеют свои странички в интернете.
|Ну, и конечно, можно сделать элементы списка - <b>ссылками</b>, если представить, что все эти друзья имеют свои странички в интернете.
|colspan=2 |<pre><UL>  
|colspan=2 |<pre><UL>  
<LI><A href="Kozel.html">Козленок</A>  
<LI><A href="Kozel.html">Козленок</A>  
<LI><A href="Telenok.html">Теленок</A>  
<LI><A href="Telenok.html">Теленок</A>  
<LI><A href="Korova.html">Корова</A>  
<LI><A href="Korova.html">Корова</A>  
<LI><A href="Byk.html">Бык</A>  
<LI><A href="Byk.html">Бык</A>  
<LI><A href="Kon.html">Конь</A>  
<LI><A href="Kon.html">Конь</A>  
</UL></pre>
</UL></pre>
|-
|-
|Но иногда бывает необходимо начать нумерацию не с единицы, а с другого значения, вот скажем нам нужен такой список:
|Но иногда бывает необходимо начать нумерацию не с единицы, а с другого значения, вот скажем нам нужен такой список:
|<pre><ol start="3">
|<pre><ol start="3">
<li>Третий нумер нашей программы
<li>Третий нумер нашей программы
<li>Четвертый нумер
<li>Четвертый нумер
<li>Пятый, есссесна!
<li>Пятый, есссесна!
</ol></pre>
</ol></pre>
|<ol start="3">
|<ol start="3">
<li>Третий нумер нашей программы
<li>Третий нумер нашей программы
<li>Четвертый нумер
<li>Четвертый нумер
<li>Пятый, есссесна!
<li>Пятый, есссесна!
</ol>
</ol>
|-
|-
|Ну, а если мы захотим в каком-то длинном списке где-то в центре поменять нумерацию, стартера недостаточно, но зато достаточно волшебного слова value И тогда, если мы напишем такой код:
|Ну, а если мы захотим в каком-то длинном списке где-то в центре поменять нумерацию, стартера недостаточно, но зато достаточно волшебного слова value И тогда, если мы напишем такой код:
|<pre><ol>
|<pre><ol>
<li>Первый участник
<li>Первый участник
<li>Второй участник
<li>Второй участник
<li>Третий участник
<li>Третий участник
<li>Четвертый участник
<li>Четвертый участник
<li>Пятый участник
<li>Пятый участник
<li>Шестой участник
<li>Шестой участник
<li>Седьмой участник
<li>Седьмой участник
<li value=28>А тут двадцать восьмой участник
<li value=28>А тут двадцать восьмой участник
<li>Двадцать девятый
<li>Двадцать девятый
<li>Тридцатый участник
<li>Тридцатый участник
<li>Тридцать первый
<li>Тридцать первый
<li>Тридцать второй
<li>Тридцать второй
<li value=47>А тут опять замена на сорок седьмого
<li value=47>А тут опять замена на сорок седьмого
<li>Сорок восьмой
<li>Сорок восьмой
<li>Сорок девятый
<li>Сорок девятый
<li>Пятидесятый!
<li>Пятидесятый!
</ol></pre>
</ol></pre>
|<ol>
|<ol>
<li>Первый участник
<li>Первый участник
<li>Второй участник
<li>Второй участник
<li>Третий участник
<li>Третий участник
<li>Четвертый участник
<li>Четвертый участник
<li>Пятый участник
<li>Пятый участник
<li>Шестой участник
<li>Шестой участник
<li>Седьмой участник
<li>Седьмой участник
<li value=28>А тут двадцать восьмой участник
<li value=28>А тут двадцать восьмой участник
<li>Двадцать девятый
<li>Двадцать девятый
<li>Тридцатый участник
<li>Тридцатый участник
<li>Тридцать первый
<li>Тридцать первый
<li>Тридцать второй
<li>Тридцать второй
<li value=47>А тут опять замена на сорок седьмого
<li value=47>А тут опять замена на сорок седьмого
<li>Сорок восьмой
<li>Сорок восьмой
<li>Сорок девятый
<li>Сорок девятый
<li>Пятидесятый!
<li>Пятидесятый!
</ol>
</ol>
|-
|-
|Вот такие бывают списки. Есть еще и другие, не столь важные. Например, для того, чтобы сделать списки более компактными можно добавить к тегу <b>UL</b> или <b>OL</b> атрибут <b>compact</b>. Вот так: <b>&lt;UL=compact&gt;</b> или так: <b>&lt;OL=compact&gt;</b>
|Вот такие бывают списки. Есть еще и другие, не столь важные. Например, для того, чтобы сделать списки более компактными можно добавить к тегу <b>UL</b> или <b>OL</b> атрибут <b>compact</b>. Вот так: <b>&lt;UL=compact&gt;</b> или так: <b>&lt;OL=compact&gt;</b>
|<pre><OL=compact>  
|<pre><OL=compact>  
<LI>Козленок
<LI>Козленок
<LI>Теленок
<LI>Теленок
<LI>Корова
<LI>Корова
<LI>Бык
<LI>Бык
<LI>Конь
<LI>Конь
</OL></pre>
</OL></pre>
|<OL=compact>  
|<OL=compact>  
<LI>Козленок
<LI>Козленок
<LI>Теленок
<LI>Теленок
<LI>Корова
<LI>Корова
<LI>Бык
<LI>Бык
<LI>Конь
<LI>Конь
</OL>
</OL>
|}
|}


==Свойства шрифтов==
==Свойства шрифтов==


==Сводная таблица свойств текста==
==Сводная таблица свойств текста==
{| border=1  
{| border=1  
  |width=55% |<center><b>НАЗВАНИЕ</b></center>
  |width=55% |<center><b>НАЗВАНИЕ</b></center>
  |width=20%|<center><b>ПРИМЕР</b></center>||<center><b>ЧТО ПОЛУЧИЛОСЬ</b></center>
  |width=20%|<center><b>ПРИМЕР</b></center>||<center><b>ЧТО ПОЛУЧИЛОСЬ</b></center>
  |-
  |-
  |без изменений||-||ДИКАЯ ПРАВДА
  |без изменений||-||ДИКАЯ ПРАВДА
  |-
  |-
  |rowspan=2 |<center>'''letter-spacing'''</center>
  |rowspan=2 |<center>'''letter-spacing'''</center>


Устанавливает расстояние (дополнительные промежутки) между буквами. Можно указывать расстояние в любых абсолютных единицах (in, cm, mm, pt, pc, px). Может задавать и отрицательные значения. Только смотрите, чтобы буквы не слиплись, и вместо одного слова не получилось бы одна буква.
Устанавливает расстояние (дополнительные промежутки) между буквами. Можно указывать расстояние в любых абсолютных единицах (in, cm, mm, pt, pc, px). Может задавать и отрицательные значения. Только смотрите, чтобы буквы не слиплись, и вместо одного слова не получилось бы одна буква.
  |'''letter-spacing''':10pt
  |'''letter-spacing''':10pt
  |style="letter-spacing:10pt"|ДИКАЯ ПРАВДА
  |style="letter-spacing:10pt"|ДИКАЯ ПРАВДА
  |-
  |-
  |'''letter-spacing''':"-2pt"
  |'''letter-spacing''':"-2pt"
  |style="letter-spacing:-2pt"|ДИКАЯ ПРАВДА
  |style="letter-spacing:-2pt"|ДИКАЯ ПРАВДА
  |-
  |-
  |rowspan=2 |<center>'''word-spacing'''</center>
  |rowspan=2 |<center>'''word-spacing'''</center>


А это просто расстояние между словами. Указывается также в любых размерностях
А это просто расстояние между словами. Указывается также в любых размерностях
  |'''word-spacing''':7pt
  |'''word-spacing''':7pt
  |style="word-spacing:7pt"| ДИКАЯ ПРАВДА
  |style="word-spacing:7pt"| ДИКАЯ ПРАВДА
  |-
  |-
  |'''word-spacing''':10mm
  |'''word-spacing''':10mm
  |style="word-spacing:10mm"| ДИКАЯ ПРАВДА
  |style="word-spacing:10mm"| ДИКАЯ ПРАВДА
  |-
  |-
  |rowspan=2 |<center>'''text-decoration'''</center>
  |rowspan=2 |<center>'''text-decoration'''</center>


Очень хорошая штука. Например, может использоваться для убирания (none) подчеркивания ссылок или, наоборот, для подчеркивания текста (underline), перечеркивания (line-through) или надчеркивания (overline) текста. А еще для вывода мерцающего текста (blink).
Очень хорошая штука. Например, может использоваться для убирания (none) подчеркивания ссылок или, наоборот, для подчеркивания текста (underline), перечеркивания (line-through) или надчеркивания (overline) текста. А еще для вывода мерцающего текста (blink).
  |'''text-decoration''':overline
  |'''text-decoration''':overline
  |style="text-decoration:overline"|ДИКАЯ ПРАВДА
  |style="text-decoration:overline"|ДИКАЯ ПРАВДА
  |-
  |-
  |'''text-decoration''':line-through
  |'''text-decoration''':line-through
  |style="text-decoration:line-through"|ДИКАЯ ПРАВДА
  |style="text-decoration:line-through"|ДИКАЯ ПРАВДА
  |-
  |-
  |<center>'''text-indent'''</center>
  |<center>'''text-indent'''</center>


С его помощью можно установить "красную строку" (отступ). Указывается как в абсолютных единицах, так и в процентах от абзаца. Если дать отрицательное значение - получится выступ (висячая строка).
С его помощью можно установить "красную строку" (отступ). Указывается как в абсолютных единицах, так и в процентах от абзаца. Если дать отрицательное значение - получится выступ (висячая строка).
  |'''text-indent:"10mm"'''
  |'''text-indent:"10mm"'''
  |style="text-indent:10mm"|ДИКАЯ ПРАВДА
  |style="text-indent:10mm"|ДИКАЯ ПРАВДА
  |-
  |-
  |<center>'''text-align'''</center>
  |<center>'''text-align'''</center>


Здесь нам знакомые left, center и right, то есть выравнивание текста по левому, правому краю, либо по центру. Есть еще justify, которое выравнивает текст по ширине.
Здесь нам знакомые left, center и right, то есть выравнивание текста по левому, правому краю, либо по центру. Есть еще justify, которое выравнивает текст по ширине.
  |'''text-align''':right
  |'''text-align''':right
  |style="text-align:right"|ДИКАЯ ПРАВДА
  |style="text-align:right"|ДИКАЯ ПРАВДА
  |-
  |-
  |<center>'''vertical-align'''</center>
  |<center>'''vertical-align'''</center>


Устанавливает расположение текста по базовой линии (по умолчанию), либо по верхнему (super), либо по нижнему (sub) индексу относительно родительского элемента. Незаменим, например, при формулах.
Устанавливает расположение текста по базовой линии (по умолчанию), либо по верхнему (super), либо по нижнему (sub) индексу относительно родительского элемента. Незаменим, например, при формулах.
  |'''vertical-align''':super  
  |'''vertical-align''':super  


(для "ДИКАЯ" - без изменений)
(для "ДИКАЯ" - без изменений)
  |ДИКАЯ<SPAN style="vertical-align:super">ПРАВДА</SPAN>
  |ДИКАЯ<SPAN style="vertical-align:super">ПРАВДА</SPAN>
  |-
  |-
  |<center>'''line-height'''</center>
  |<center>'''line-height'''</center>


Определяет расстояние между строчками. Задается как в абсолютных единицах, так и в относительных. А можно и просто указывать число строк, не обязательно в целых числах.
Определяет расстояние между строчками. Задается как в абсолютных единицах, так и в относительных. А можно и просто указывать число строк, не обязательно в целых числах.
  |'''line-height''':2.5
  |'''line-height''':2.5
  |<p style="line-height:2.5">дикая правда на www.dikarka.ru дикая правда на www.dikarka.ru дикая правда на www.dikarka.ru</p>
  |<p style="line-height:2.5">дикая правда на www.dikarka.ru дикая правда на www.dikarka.ru дикая правда на www.dikarka.ru</p>
  |}
  |}
==Вставка изображений==
==Вставка изображений==
<pre><img src="ris.01.gif" height=300 width=400 alt="это я в новом пиджаке" align=right hspace=20 vspace=20></pre>
<pre><img src="ris.01.gif" height=300 width=400 alt="это я в новом пиджаке" align=right hspace=20 vspace=20></pre>
{| border=1
{| border=1
  |width=25% | img src="ris.01.gif"
  |width=25% | img src="ris.01.gif"
  |width=75% | Название файла картинки, которую мы хотим вставить
  |width=75% | Название файла картинки, которую мы хотим вставить
  |-
  |-
  |height=300
  |height=300
  |Размер по вертикали в px (очень желательно указывать его, что говорит об уважении читателя)
  |Размер по вертикали в px (очень желательно указывать его, что говорит об уважении читателя)
  |-
  |-
  |width=400
  |width=400
  |Размер по горизонтали в px (очень желательно указывать его, что говорит об уважении читателя)
  |Размер по горизонтали в px (очень желательно указывать его, что говорит об уважении читателя)
  |-
  |-
  |alt="это я в новом пиджаке"  
  |alt="это я в новом пиджаке"  
  | Текст, который будет в прямоугольнике, вместо рисунка, если его не загружать.
  | Текст, который будет в прямоугольнике, вместо рисунка, если его не загружать.
  |-
  |-
  |align=right
  |align=right
  |Выравнивание картинки, мб left, right и center
  |Выравнивание картинки, мб left, right и center
  |-
  |-
  |hspace=20
  |hspace=20
  |Расстояние от картинки до текста по горизонтали (px)
  |Расстояние от картинки до текста по горизонтали (px)
  |-
  |-
  |vspace=20
  |vspace=20
  |Расстояние от картинки до текста по вертикали (px)
  |Расстояние от картинки до текста по вертикали (px)
  |}
  |}
==Атрибуты таблиц==
==Атрибуты таблиц==
Сейчас я перечислю все, что можно делать с таблицами! Я перечислю атрибуты, которые можно поместить в тег <b>&lt;TABLE...&gt;</b>. Но нужно иметь в виду,  что некоторые атрибуты срабатывают не во всех браузерах. Такие атрибуты я помечу звездочкой.
Сейчас я перечислю все, что можно делать с таблицами! Я перечислю атрибуты, которые можно поместить в тег <b>&lt;TABLE...&gt;</b>. Но нужно иметь в виду,  что некоторые атрибуты срабатывают не во всех браузерах. Такие атрибуты я помечу звездочкой.
{|border=1
{|border=1
|width=25% rowspan=2 |<b>align</b>
|width=25% rowspan=2 |<b>align</b>
выравнивает таблицу по левому <b>(left)</b> или правому <b>(right)</b> краю
выравнивает таблицу по левому <b>(left)</b> или правому <b>(right)</b> краю
|width=30% |<pre><TABLE align=left border=1></pre>
|width=30% |<pre><TABLE align=left border=1></pre>
|
|
{|border=1 align=left
{|border=1 align=left
|Таблица выровнена по левому краю
|Таблица выровнена по левому краю
|}
|}
|-
|-
Строка 339: Строка 351:
|
|
{|align=right border=1
{|align=right border=1
|Таблица выровнена по правому краю
|Таблица выровнена по правому краю
|}
|}
|-
|-
|(*) <b>background</b><br>
|(*) <b>background</b><br>
указывает изображение, которым заполнится фон таблицы
указывает изображение, которым заполнится фон таблицы
|<pre><TABLE background="fon.jpg"></pre>
|<pre><TABLE background="fon.jpg"></pre>
|
|
{|background="fon.jpg"
{|background="fon.jpg"
|Таблица с фоновым изображением
|Таблица с фоновым изображением
|}
|}
|-
|-
|<b>bgcolor</b><br>цвет фона таблицы
|<b>bgcolor</b><br>цвет фона таблицы
|<pre><TABLE bgcolor=blue>  
|<pre><TABLE bgcolor=blue>  
<TABLE bgcolor=#3300CC></pre>
<TABLE bgcolor=#3300CC></pre>
|
|
{|
{|
|bgcolor=#6699FF |А это просто голубой фон
|bgcolor=#6699FF |А это просто голубой фон
|}
|}
|-
|-
|<b>border</b>ширина рамки в пикселах
|<b>border</b>ширина рамки в пикселах
|<pre><TABLE border=3></pre>
|<pre><TABLE border=3></pre>
|
|
{|border=3
{|border=3
|рамка равна 3 пикселам
|рамка равна 3 пикселам
|}
|}
|-
|-
|(*)<b>bordercolor</b>цвет рамки для всей таблицы
|(*)<b>bordercolor</b>цвет рамки для всей таблицы
|<pre><TABLE bordercolor=blue></pre>
|<pre><TABLE bordercolor=blue></pre>
|
|
{|bordercolor=blue
{|bordercolor=blue
|Рамка - голубая. Работает не во всех браузерах. Я вот в експлорере ее в упор не вижу!
|Рамка - голубая. Работает не во всех браузерах. Я вот в експлорере ее в упор не вижу!
|}
|}
|-
|-
|<b>cellpadding</b><br>свободное пространство вокруг содержимого каждой ячейки<br/><br/>
|<b>cellpadding</b><br>свободное пространство вокруг содержимого каждой ячейки<br/><br/>
|<pre><TABLE cellpadding=10 border=1></pre>
|<pre><TABLE cellpadding=10 border=1></pre>
|
|
{|cellpadding=10 border=1
{|cellpadding=10 border=1
|вокруг текста свободное пространство на 10 пикселов, видите?
|вокруг текста свободное пространство на 10 пикселов, видите?
|}
|}
|-
|-
|<b>cellspacing</b><br>свободное пространство между ячейками
|<b>cellspacing</b><br>свободное пространство между ячейками
|<pre><TABLE cellspacing=10></pre>
|<pre><TABLE cellspacing=10></pre>
|
|
{|cellspacing=10 border=1
{|cellspacing=10 border=1
|первая ячейка
|первая ячейка
|вторая ячейка
|вторая ячейка
|}
|}
|-
|-
|(*)<b>height</b><br>устанавливает высоту таблицы в пикселах
|(*)<b>height</b><br>устанавливает высоту таблицы в пикселах
|<pre><TABLE height=100 bgcolor=yellow></pre>
|<pre><TABLE height=100 bgcolor=yellow></pre>
|
|
{|height=100 border=1
{|height=100 border=1
|bgcolor=yellow|Высота таблицы - 100 пикселов. Работает не во всех браузерах
|bgcolor=yellow|Высота таблицы - 100 пикселов. Работает не во всех браузерах
|}
|}
|-
|-
|(*)<b>hspace</b><br>промежуток в пикселах от таблицы слева и справа
|(*)<b>hspace</b><br>промежуток в пикселах от таблицы слева и справа
|<pre><TABLE hspace=15 border=5></pre>
|<pre><TABLE hspace=15 border=5></pre>
|
|
{|hspace=15 border=5
{|hspace=15 border=5
|Таблица
|Таблица
|}
|}
|-
|-
|(*) <b>nowrap</b><br>Запрещает перенос слов в ячейке
|(*) <b>nowrap</b><br>Запрещает перенос слов в ячейке
|<pre><TABLE nowrap>  
|<pre><TABLE nowrap>  
<TABLE></pre>
<TABLE></pre>
|
|
{|class="small" hspace=15 border=5 nowrap
{|class="small" hspace=15 border=5 nowrap
|эти слова ни за что не перенесутся
|эти слова ни за что не перенесутся
|}
|}
|-
|-
|<b>vspace</b><br>оставляет промежуток сверху и снизу от таблицы в пикселах
|<b>vspace</b><br>оставляет промежуток сверху и снизу от таблицы в пикселах
|<pre><TABLE vspace=10 border=1 bgcolor=aqua></pre>
|<pre><TABLE vspace=10 border=1 bgcolor=aqua></pre>
|
|
{| vspace=10 border=1  
{| vspace=10 border=1  
| bgcolor=aqua  vspace=10 | Сверху и снизу свободное <br /> пространство на 10 пикселов
| bgcolor=aqua  vspace=10 | Сверху и снизу свободное <br /> пространство на 10 пикселов
|}
|}
|-
|-
|<b>width</b><br>ширина таблицы в пикселах или в процентах
|<b>width</b><br>ширина таблицы в пикселах или в процентах
|<pre><TABLE width=200 bgcolor=red border=1></pre>
|<pre><TABLE width=200 bgcolor=red border=1></pre>
|
|
{|width=200 border=1
{|width=200 border=1
| bgcolor=red|Эта таблица шириной в 200 пикселей. Если сомневаетесь, можете проверить.
| bgcolor=red|Эта таблица шириной в 200 пикселей. Если сомневаетесь, можете проверить.
|}
|}
|}
|}
===Построение сложных таблиц===
===Построение сложных таблиц===
{|border=1
{|border=1
|width=25%|<center><b>Атрибут</b></center>
|width=25%|<center><b>Атрибут</b></center>
|width=40%|<center><b>Код</b></center>
|width=40%|<center><b>Код</b></center>
|<center><b>Браузер</b></center>
|<center><b>Браузер</b></center>
|-
|-
|'''colspan'''<br>
|'''colspan'''<br>
Показывает сколько ячеек по вертикали (колонок) нужно объеденить в одну
Показывает сколько ячеек по вертикали (колонок) нужно объеденить в одну
|<pre><TABLE border=5>  
|<pre><TABLE border=5>  
<TR>  
<TR>  
<TD>1ячейка</TD>  
<TD>1ячейка</TD>  
<TD>2ячейка</TD>  
<TD>2ячейка</TD>  
</TR>  
</TR>  
<TR>  
<TR>  
<TD colspan=2>3 ячейка, занимающая два столбца</TD>  
<TD colspan=2>3 ячейка, занимающая два столбца</TD>  
</TR>  
</TR>  
</TABLE></pre>
</TABLE></pre>
|
|
{|border=5
{|border=5
|1ячейка
|1ячейка
|2ячейка
|2ячейка
|-
|-
|colspan=2|3 ячейка, занимающая два столбца
|colspan=2|3 ячейка, занимающая два столбца
|}
|}
|-
|-
|'''rowspan'''<br>
|'''rowspan'''<br>
Показывает сколько ячеек по горизонтали (рядов) нужно объеденить в один
Показывает сколько ячеек по горизонтали (рядов) нужно объеденить в один
|<pre><TABLE border=5>  
|<pre><TABLE border=5>  
<TR>  
<TR>  
<TD rowspan=4>1 ячейка, объединяющая 4 ячейки</td>  
<TD rowspan=4>1 ячейка, объединяющая 4 ячейки</td>  
<TD>2 ячейка</TD></TR>
<TD>2 ячейка</TD></TR>
<TD>3 ячейка</TD></TR>
<TD>3 ячейка</TD></TR>
<TD>4 ячейка</TD></TR>
<TD>4 ячейка</TD></TR>
<TD>5 ячейка</TD></TR>
<TD>5 ячейка</TD></TR>
</TABLE></pre>
</TABLE></pre>
|
|
{|border=5
{|border=5
|rowspan=5 | 1 ячейка, объединяющая 4 ячейки
|rowspan=5 | 1 ячейка, объединяющая 4 ячейки
|-
|-
|2 ячейка
|2 ячейка
|-
|-
|3 ячейка
|3 ячейка
|-
|-
|4 ячейка
|4 ячейка
|-
|-
|5 ячейка
|5 ячейка
|}
|}
|}
|}
Допустим мы хотим сделать такую таблицу, где объединенны и столбцы и строки
Допустим мы хотим сделать такую таблицу, где объединенны и столбцы и строки
[[Изображение:Ris95.gif|thumb|400px|left|Вот такая таблица]]
[[Изображение:Ris95.gif|thumb|400px|left|Вот такая таблица]]
На этом рисунке не указаны теги TD, чтобы не загромождать рисунок, но вы уже кое в чем разбираетесь, поэтому и сами догадаетесь, что каждую ячеечку нужно обложить тегом TD  
На этом рисунке не указаны теги TD, чтобы не загромождать рисунок, но вы уже кое в чем разбираетесь, поэтому и сами догадаетесь, что каждую ячеечку нужно обложить тегом TD  


Обратите внимание, что десятая ячейка занимает столько места, сколько занимают четыре ячейки (1+5+6+7), то есть rowspan=4. Восьмая ячейка занимает место по ширине трех ячеек (2+3+4), а по высоте - двух ячеек (5+6), поэтому в теге TD у нее будет стоять colspan=3, а rowspan=2. Девятая же ячейка занимает по ширине столько же места, сколько и восьмая, то есть место трех ячеек (2+3+4), поэтому мы для нее запишем colspan=3.  
Обратите внимание, что десятая ячейка занимает столько места, сколько занимают четыре ячейки (1+5+6+7), то есть rowspan=4. Восьмая ячейка занимает место по ширине трех ячеек (2+3+4), а по высоте - двух ячеек (5+6), поэтому в теге TD у нее будет стоять colspan=3, а rowspan=2. Девятая же ячейка занимает по ширине столько же места, сколько и восьмая, то есть место трех ячеек (2+3+4), поэтому мы для нее запишем colspan=3.  
<br clear="both" />
<br clear="both" />
Вот полный код этой таблицы:  
Вот полный код этой таблицы:  
<pre><TABLE border=3>
<pre><TABLE border=3>
<TR>
<TR>
<TD>1 ячейка</TD>
<TD>1 ячейка</TD>
<TD>2 ячейка</TD>
<TD>2 ячейка</TD>
<TD>3 ячейка</TD>
<TD>3 ячейка</TD>
<TD>4 ячейка</TD>
<TD>4 ячейка</TD>
<TD rowspan=4>10 ячейка</TD>
<TD rowspan=4>10 ячейка</TD>
</TR>
</TR>
<TR>
<TR>
<TD>5 ячейка</TD>
<TD>5 ячейка</TD>
<TD colspan=3 rowspan=2>8 ячейка</TD>
<TD colspan=3 rowspan=2>8 ячейка</TD>
<TR>
<TR>
<TD>6 ячейка</TD>
<TD>6 ячейка</TD>
<TR>
<TR>
<TD>7 ячейка</TD>
<TD>7 ячейка</TD>
<TD colspan=3>9 ячейка</TD>
<TD colspan=3>9 ячейка</TD>
</TABLE> </pre>
</TABLE> </pre>






И вот наша очень даже непростая таблица:
И вот наша очень даже непростая таблица:
{|border=3
{|border=3
|1 ячейка
|1 ячейка
|2 ячейка
|2 ячейка
|3 ячейка
|3 ячейка
|4 ячейка
|4 ячейка
|rowspan=4|10 ячейка
|rowspan=4|10 ячейка
|-
|-
|5 ячейка
|5 ячейка
|colspan=3 rowspan=2|8 ячейка
|colspan=3 rowspan=2|8 ячейка
|-
|-
|6 ячейка
|6 ячейка
|-
|-
|7 ячейка
|7 ячейка
|colspan=3|9 ячейка
|colspan=3|9 ячейка
|}
|}

Версия от 01:34, 12 июля 2009

http://caeltaleldar.com/caltroc.html[sitboceltc] [[1][sitboceltc]]

"sitboceltc":http://sitlir.com/nocaceldard.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>
  1. Козленок
  2. Теленок
  3. Корова
  4. Бык
  5. Конь
Мы можем изменить арабские цифры на римские, и даже на строчные и прописные буквы с помощью атрибута <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>
  1. Козленок
  2. Теленок
  3. Корова
  4. Бык
  5. Конь
  6. Свинья
  7. Кот
  8. Пес
  9. Баран
  10. Петух
Для создания закрашенных кружочков (маркеров), вместо цифр, нужно заменить <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>
  1. Третий нумер нашей программы
  2. Четвертый нумер
  3. Пятый, есссесна!
Ну, а если мы захотим в каком-то длинном списке где-то в центре поменять нумерацию, стартера недостаточно, но зато достаточно волшебного слова value И тогда, если мы напишем такой код: 
<ol>
<li>Первый участник
<li>Второй участник
<li>Третий участник
<li>Четвертый участник
<li>Пятый участник
<li>Шестой участник
<li>Седьмой участник
<li value=28>А тут двадцать восьмой участник
<li>Двадцать девятый
<li>Тридцатый участник
<li>Тридцать первый
<li>Тридцать второй
<li value=47>А тут опять замена на сорок седьмого
<li>Сорок восьмой
<li>Сорок девятый
<li>Пятидесятый!
</ol>
  1. Первый участник
  2. Второй участник
  3. Третий участник
  4. Четвертый участник
  5. Пятый участник
  6. Шестой участник
  7. Седьмой участник
  8. А тут двадцать восьмой участник
  9. Двадцать девятый
  10. Тридцатый участник
  11. Тридцать первый
  12. Тридцать второй
  13. А тут опять замена на сорок седьмого
  14. Сорок восьмой
  15. Сорок девятый
  16. Пятидесятый!
Вот такие бывают списки. Есть еще и другие, не столь важные. Например, для того, чтобы сделать списки более компактными можно добавить к тегу 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 ячейка
    Источник — https://miac.volmed.org.ru/wiki/index.php?title=HTML_редактирование&oldid=918