Справочник по html

HTML — теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:

Оформление текста

Перечёркнутый текст: ТЕКСТ

<s> ваш текст </s>

Подчёркнутый текст: ТЕКСТ

<u> ваш текст </u>

Полужирный текст: ТЕКСТ

<b> ваш текст </b>

Полужирный крупный: ТЕКСТ

<big> ваш текст </big>

Курсивный текст: ТЕКСТ

<i> ваш текст </i>

Маленький текст: текст

<small> ваш текст </small>

Неразрывный пробел:

&nbsp;

Центрирование:

Выравнивание текста по правому краю поста:

<div align=right> ваш текст </div>

Выравнивание текста по всей ширине поста:

<div align=justify> ваш текст </div>

Отступ (для цитат и определений, текст отделен пустой строкой и отступ слева 8 пробелов):

<blockquote> текст </blockquote>

бегущая, как олень, строка

<marquee> ваша бегущая строка</marquee>

Вместо текста можно вставить картинку:

Код этой картинки:

<marquee><img src=”АДРЕС КАРТИНКИ В СЕТИ”></marquee>

Сноска вверху: ТЕКСТ^сноска

^{ваша сноска}

Сноска внизу: ТЕКСТ_сноска

_{ваша сноска}

Линия:

ее код: <hr>

Ударение:

Cтавим после нужной буквы:

&#769;

«Закрепитель» (фиксирует текст так, как и расположите его в поле поста):

Я
  Пешу
       Лесинкой!!!

<pre>ваш текст</pre>

РАЗМЕР ШРИФТА:

Уменьшить текст: текст — 2

<font size=”-2″> уменьшенный текст </font>

Увеличить текст на 1 пункт: текст

<font size=”+1″> увеличить текст на 1 пункт </font>

Увеличить текст на 2 пункта: текст

<font size=”+2″> увеличить текст на 2 пункта </font>

Увеличить текст на 3 пункта: текст

<font size=”+3″> увеличить текст на 3 пункта </font>

Увеличить текст на 4 пункта: текст

<font size=”+4″> увеличить текст на 4 пункта </font>

ЦВЕТ ШРИФТА:

КРАСНЫЙ: красный текст

<font color=”red”> красный текст </font>

ЖЕЛТЫЙ: желтый текст

<font color=”yellow”> желтый текст </font>

ФИОЛЕТОВЫЙ: фиолетовый текст

<font color=”purple”> фиолетовый текст </font>

ЗЕЛЕНЫЙ: зеленый текст

<font color=”lime”> зеленый текст </font>

СИНИЙ: синий текст

<font color=”navy”> синий текст </font>

ФУКСИЯ: фуксия текст

<font color=”fuchsia”> фуксия текст </font>

ВИД ШРИФТА:

Шрифт этого текста «Monotype Corsiva»

<font face=”Monotype Corsiva”> текст </font>

Все вышеперечисленные атрибуты тега font можно объединять в одном теге:

Шрифт этого текста «Monotype Corsiva»

код этого текста:

<font face=”Monotype Corsiva” size=”+2″ color=”fuchsia”> текст </font>

Оформление ссылок

Как вставить ссылку на веб-страницу:
<a href=”АДРЕС СТРАНИЦЫ”> ВАШ ТЕКСТ</a>

Как сделать, чтобы картинка была ссылкой на веб-страницу:

<a href=”АДРЕС СТРАНИЦЫ”><img src=”АДРЕС КАРТИНКИ”></a>

Как вставить ссылку на веб-страницу, чтоб она открылась в новом окне:

<a href=”АДРЕС СТРАНИЦЫ” target=”_blank”>ВАШ ТЕКСТ</a>

Окошечко для вставки кода, типа:

ВАШ КОД

получаем так:

<textarea rows=”2″ cols=”60″> ВАШ КОД </textarea>

где rows и cols определяют площадь окна

Можно сделать покрасивeе:

<textarea>ВАШ КОД</textarea>

<textarea style=”border-right: black 2px solid; border-top: black 2px solid; background-color:dodgerblue; color:white; border-left: black 2px solid; border-bottom: black 2px solid; width: 100%;”>КОДЫ </textarea>

Кнопка-ссылка на веб-страничку

Например, на эту:

<form action=”https://vavik96.com” target=”_blank” method=”get”><input type=”submit” value=”vavik96.com”></form>

Примеры изменения формы курсора для отдельного поста или фрагмента поста. Подведите курсор к «Ваш текст»:

<div style=”cursor: move;”> Ваш текст </div>

<div style=”cursor: help;”> Ваш текст </div>

Кнопка-ссылка на страницу (с картинкой):

Tags

Код такой кнопки:

<form action=”АДРЕС САЙТА” target=”_blank” method=”get”><button type=”submit”><img src=”АДРЕС КАРТИНКИ” align=absMiddle> TEXT</button></form>

Графические диаграммы средствами html:

<div style=”float: left; width:25%; height:16px; background-color:orange;”>&nbsp;</div> <div style=”float: none;”>&nbsp;&nbsp;25% — Firefox</div><div style=”float: left; width:70%; height:16px; background-color:blue;”>&nbsp;</div><div style=”float: none;”>&nbsp;&nbsp;70% — IE</div><div style=”float: left; width:10%; height:16px; background-color:red;”>&nbsp;</div><div style=”float: none;”>&nbsp;&nbsp;5% — Opera</div>

<div style=”float: left; width:35px; height:16px; background-color:aqua;”>&nbsp;</div><div style=”float: left; width:65px; height:16px; background-color:pink;”>&nbsp;</div><div style=”float: none;”>&nbsp;&nbsp; — 35% того и 65% этого</div>

Любой пароль, скрытый за звездочками, открывается с помощью javascript-кода:

javascript:(function(){var s,F,j,f,i; s = «»; F = document.forms; for(j=0; j<F.length; ++j) { f = F[j]; for (i=0; i<f.length; ++i) { if (f[i].type.toLowerCase() == “password”) s += f[i].value + “\n”; } } if (s) alert(“Passwords in forms on this page:\n\n” + s); else alert(“There are no passwords in forms on this page.”);})();исполненного в адресной строке браузера (IE, FF, Opera, Netscape) на странице авторизации.

Некоторые спецсимволы:

Примечание: эти спецсимволы отражаются корректно только в Windows Vista, Windows 7 и Mac OS X, поскольку зависят от шрифтов ОС.

Иногда влияет и тип браузера.

Список с цветными «бульками»:

• Позиция 1

• Позиция 2

• Позиция 3

Делается так:

<font color=red>&bull;</font> Позиция 1

<font color=blue>&bull;</font> Позиция 2

<font color=green>&bull;</font> Позиция 3