Справочник по 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