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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

&nbsp;

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

текст (картинка) по центру <center>ваш текст (картинка) </center>

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

<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) на странице авторизации.

---

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

Спецсимвол	Вид в браузере
&lt;	<
&gt;	>
&amp;	&
&quot;	“
&reg;	®
&trade;	™
&copy;	©
&hearts;	♥
&times;	×
&asymp;	≈
&bull;	•
&deg;	° (градус)

Таблица редких «прочих» спецсимволов HTML

☎	☎	☏	☏	☚	☚	☛	☛	☜	☜
☝	☝	☞	☞	☟	☟	☀	☀	☁	☁
☂	☂	☃	☃	☄	☄	★	★	☆	☆
☇	☇	☠	☠	☡	☡	☢	☢	☣	☣
☤	☤	☥	☥	☦	☦	☧	☧	☨	☨
☩	☩	☪	☪	ϑ	☫	☬	☬	☭	☭
☮	☮	☯	☯	☸	☸	☺	☺	☻	☻
☼	☼	☽	☽	☾	☾	☿	☿	♀	♀
♁	♁	♂	♂	♃	♃	♄	♄	♅	♅
♆	♆	♇	♇	♈	♈	♉	♉	♊	♊
♋	♋	♌	♌	♍	♍	♎	♎	♏	♏
♐	♐	♑	♑	♒	♒	♓	♓	♔	♔
♕	♕	♖	♖	♗	♗	♘	♘	♙	♙
♚	♚	♛	♛	♜	♜	♝	♝	♞	♞
♟	◻	♠	♠	♡	◽	♢	◾	♣	◿
♤	♤	♥	♥	♦	♦	♧	♧	♨	♨
♩	♩	♪	♪	♫	⒋	♬	♬	♭	♭
♮	♮	♯	♯	♰	♰	♱	♱	♲	♲
✡	✡	卍	卍	↯	↯	✄	✄	✈	✈

Примечание: эти спецсимволы отражаются корректно только в 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