Шпаргалка по HTML для блоггера

Понедельник, 30 Апреля 2012 г. 11:03 + в цитатник

mycrib.ru/2010/07/html-html...dht52.html

Для просмотра используйте прокрутку.

<hr> - Линия:

<br/> - Перенос по строке вниз;
title="ТЕКСТ" - всплывающая подсказка;
        - пробел;
<u>Ваш текст</u> - Подчеркнутый;
<s>Ваш текст</s> - Перечеркнутый;
<b>Ваш текст</b> - Полужирный;
<big>Ваш текст</big> - Полужирный крупный;
<i>Ваш текст</i> - Курсив;
<tt>шрифт "пишущая машинка"</tt> - шрифт "пишущая машинка"
<blockquote>цитата</blockquote> - цитата

Таблица:<table border=0 widht=52%> -
таблица (начало)
<tr> - строка (начало);
</tr> - конец строки;
Между символами <td> и </td> заключается отдельная ячейка таблицы;
</table> - конец таблицы.
Подробнее о таблицах здесь

Убрать под кат:
<cut text="Читать далее/ смотреть все картинки/и т.п."> Ваш текст, который нужно убрать под кат </cut>

Выравнивание текста:
<div align=right> ваш текст </div> - выравнивание по правому краю;
<div align=justify> ваш текст </div> - выравнивание по всей ширине текста;
<center>ваш текст, картинка</center> - центрирование.

Списки HTML

Нумерованный список
<ol type=1><li>первый элемент</li> <li>второй элемент</li> ..... <li>N - элемент</li> </ol>	первый элемент второй элемент ...... N - элемент
Маркированный список
<ul type=disc> <li>первый элемент</li> <li>второй элемент</li> ..... <li>N - элемент</li> </ul>	первый элемент второй элемент ...... N - элемент

Окошко для вставки кода:
1.
<textarea rows="2" cols="40"> ВАШ КОД </textarea> , где cols - ширина окошка в px, а rows - число строк в окне.
ВАШ КОД
2.

<input type='text' size='15' value='Ваш код'>

Изменяем шрифт, размер и цвет текста:
<span style="font-family:Monotype Corsiva;color:fuchsia;font-size:25px">Ваш текст</span> , где font-family - шрифт, color - цвет, font-size - размер.
     подробнее читать здесь

Оформление ссылок:
<a href="АДРЕС СТРАНИЦЫ"> ВАШ ТЕКСТ</a>
<a href="АДРЕС СТРАНИЦЫ"><img src="АДРЕС КАРТИНКИ"></a> - кликабельная картинка,
<a href="АДРЕС СТРАНИЦЫ" target="_blank">ВАШ ТЕКСТ</a> - ссылка откроется в новом окне.
     подробнее читать здесь

Кнопка с выпадающим списком:
копируем код из окошка

<form action="http://freiman.info/files/link.php" method="GET"><br /><input type="hidden" name="h" value="_self" /><br /><select id="links" name="links"><br /><option value="ССЫЛКА">НАЗВАНИЕ</option><br /><option value="ССЫЛКА">НАЗВАНИЕ</option><br /><option value="ССЫЛКА">НАЗВАНИЕ</option><br /><option value="ССЫЛКА">НАЗВАНИЕ</option><br /><option value="ССЫЛКА">НАЗВАНИЕ</option><br /></select> <input type="submit" value="НАДПИСЬ НА КНОПКЕ" /><br /></form>
Копируем код и вставляем в новую запись в формат HTML, вместо слова ССЫЛКА пишем необходимый URL адрес (ссылку, по которой нужно перейти)
Вместо слова НАЗВАНИЕ пишем описание этой ссылки (например: главная страница)
Вместо фразы НАДПИСЬ НА КНОПКЕ пишем слово, которое будет написано на кнопке, при нажатии на которую, мы перейдём на нужную страницу (например, Перейти)

Пишем на картинке:
копируем код из окошка
<center><table background="АДРЕС КАРТИНКИ"><tr><td width="ширина картинки" height="высота картинки"><span >ВАШ ТЕКСТ</text></td></tr></table></center>
     подробнее читать здесь

Обтекание картинки текстом:
<img src="http:…" align=left hspace=20 vspace=20> , где align=left – картинка слева, текст справа
                                                                                      align=right - картинка справа, текст слева
                                                                                      hspace=20 - расстояние между текстом и картинкой 20 пикселей по горизонтали
                                                                                      vspace=20 - расстояние между текстом и картинкой 20 пикселей по вертикали

Ваш текст 1
Ваш текст 2
<center><font style="font-size:55px;line-height:19px;color: #3300CC;font-family: Impact;">Ваш текст 1<br><font style="font-size:45px;color: #FF0066;font-family: Impact;">Ваш текст 2</font></font></text></center><br><br><br /><span style="font-family:Arial;color:#000000;font-size:12px">Основной текст</span>
         Подробнее читайте здесь

Вставка флэш:
<object type=application/x-shockwave-flash data=ссылка-на-файл width=450 height=300><param name=movie value=ссылка-на-файл></object>

, где "ссылка-на-файл" - адрес файла,
width=450 height=300 - размеры флэш (можно менять)

Делаем рамочки:
<div style="background:url(ссылка на картинку);border-style;ridge-color#XXXXXX;padding;Xpx;"><div style="background:url(ссылка на картинку);border-style:insert/double/или др.;ridge;color#XXXXXX;padding:Xpx;"><div style="background:url(ссылка на картинку);border-style;ridge-color#XXXXXX;padding;Xpx;"> <div style=text-align:center;font:Arial;font-style:italic;color:#XXXXXX;padding;Xpx;">Ваш текст</span></div></div></div>,
где background - фон слоя; border-style - стиль бордюра; ridge - ранг; color -цвет; padding - ширина рамки в пикселях.
Для текста: text-align:center - параметры выравнивания текста (центрирование); font - шрифт; font-style - стиль шрифта (italic - наклонный); color - цвет; padding - отступы.
    подробнее читать здесь

Кнопка

<form action="http://....." target="_blank" method="get"><button type="submit"> Надпись на кнопке </button></form>

<form action="http://....." target="_blank" method="get"><button type="submit"><img src="адрес картинки" align="absMiddle" /> надпись</button></form>

Бегущая строка
< font size="5" color="red">Текст бегущей строки.

,
где bgcolor-цвет фона.

флэш-генератор:

Фон для текста

ВАШ ТЕКСТ

, где:
border="1" - толщина рамки, cellspacing="4" - расстояние между ячейками, cellpadding="25" - отступ содержимого таблицы от рамки. Все эти значения можно менять. Подробнее читайте здесь

Flash-программа "Подбор цвета HTML"

Источник Flash
Кнопочки на эту шпаргалку:

	<a href="http://www.mycrib.ru/2010/07/html-html-title-border0-widht52.html"><img src="//s003.radikal.ru/i201/1006/c4/1f6f5670e1cd.png" ></a>
	<a href="http://www.mycrib.ru/2010/07/html-html-title-border0-widht52.html"><img src="//s11.radikal.ru/i184/1006/02/1cc08c644a70.png" ></a>
	<a href="http://www.mycrib.ru/2010/07/html-html-title-border0-widht52.html"><img src="//s006.radikal.ru/i215/1006/f2/cde0276c6499.png" ></a>
	<a href="http://www.mycrib.ru/2010/07/html-html-title-border0-widht52.html"><img src="//s16.radikal.ru/i190/1006/d3/47e823ab2e50.png" ></a>
	<a href="http://www.mycrib.ru/2010/07/html-html-title-border0-widht52.html"><img src="//s42.radikal.ru/i097/1006/43/efe1d4914396.png" ></a>