Справочник по html. Коды и тэги для html. Примеры использования html-кодов

---

Фотогалерея.

Вставляем в html страницу с фотогалереей
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />

В корневую папку сайта копируем файлы
папка js : lightbox.min.js , jquery-1.11.0.min.js
папка css : lightbox.css
папка img : prev.png, next.png, loading.gif, close.png

А фотографии или картинки делаем ссылкой
<a href="img.jpg" data-lightbox="image" data-title="фото">
Если сделать альбом, то в data-lightbox="image" всем фото одинаковое имя, а если увеличение по одному изображению, то разное.

---

При наведении на абзац меняется цвет

Адвокат: Брак, Развод, Алименты, Завещание, Доверенность, Законодательство и законы, Суды, Ответы адвоката

---

Стиль ссылок

<style type="text/css">
a:link {text-decoration:underline; color:#00008B;}
a:active {text-decoration:underline; color:#00008B;}
a:visited {text-decoration:underline; color:#00008B;}
a:hover {text-decoration:none; color:red}
</style>

---

Вставка рисунка

<p align="center"><a href="image.jpg" title="image" target="_blank"><img style="max-width: 100%; height: auto;" src="s/image.jpg" border="0" alt="image"><br>увеличить</a><br>image</p>

увеличить
восточные танцы

---

Линия в html:

<hr> -

Также линия из рисунка
<img src="O/blue.jpg" width=100% height=3>

---

Основные стили и шрифты текста в html

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

---

Комментарии и Вопросы посетителей:

---

Как
залить абзац цветом

<p style="background-color:#EEE9E9;"><i>Комментарии и Вопросы посетителей:</i>
</p>
<hr>
<p style="background-color:#EEE9E9;">
</p>

---

Таблица:
<table 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="https://prokipr.ru" 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 адрес (ссылку, по которой нужно перейти)
Вместо слова НАЗВАНИЕ пишем описание этой ссылки (например: главная страница)
Вместо фразы НАДПИСЬ НА КНОПКЕ пишем слово, которое будет написано на кнопке, при нажатии на которую, мы перейдём на нужную страницу (например, Перейти)

Уроки HTMLВ помощь блоггеруКак сделать бродилкуКак вставлять готовые коды''Помощь блоггеру'' от Джулии

---

Пишем на картинке:
  копируем код из окошка
<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>
         Подробнее читайте здесь

---

Делаем рамочки:
<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>


Очень красивая кнопка для сайта, но не работает во всех браузерах:

<button style="width: 260px; height: 50px; font-size: 20px; background: linear-gradient(to bottom, #FCDB00 0px, #F80 100%) repeat scroll 0% 0% transparent; box-shadow: 1px 3px 5px 0px rgba(255, 255, 255, 0.7) inset; border-radius: 20px; color: #FFF; text-shadow: -2px -2px 2px #FF6C00; text-transform: uppercase; border: medium none; outline: medium none; cursor: pointer;">Заказать услугу</button>

---

Бегущая строка

< font size="5" color="red">Текст бегущей строки. <marquee behavior="alternate" bgcolor="yellow" scrolldelay="145" width="50%">< font size="5" color="red">Текст бегущей строки. </font></marquee> <br /> </FORM>, где bgcolor-цвет фона.

---

Cоздание скрипта даты и вставка его на HTML-страницу

Вот весь скрипт даты:

<script language="javascript" type="text/javascript"><!--
var d = new Date();
var day=new Array("Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота");
var month=new Array("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря");
document.write(day[d.getDay()]+" " +d.getDate()+ " " + month[d.getMonth()] + " " + d.getFullYear() + " г.");
//--></script>

Получите следующую надпись:  .

Описанный способ удобен, например, для автоматического ежегодного изменения строки Copyright © 2004 - на сайте, если, конечно, такая строчка там присутствует.

---

Для склейки домена с www и без нужно сделать переадресацию – 301 редирект

Если сайт с www. не открывается, а сайт без www. открывается (или сайт без www. не открывается, а сайт с www. открывается),
и не помогает в файле .htaccess (находится в корне сайта) прописывание

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www.prokipr.ru
RewriteRule ^(.*)$ https://prokipr.ru/$1 [R=301,L]

Если вам нужно наоборот сделать редирект с http://site.ru на www.site.ru, то запись будет выглядеть так:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^prokipr.ru
RewriteRule (.*) https://prokipr.ru/$1 [R=301,L]

то это связано с настройками DNS и надо изменить запись A Record (or host name)

---

Как не переносить слова в новую строчку. Как сделать, чтобы тег p или span не переносился?

Резиновый сайт для смартфона. Адаптивная верстка для всех браузеров. Сайт для мобильного

Выпадающее меню по клику средствами CSS без JavaScript

---

Как сделать Таймгенератор

Подробности как сделать Таймгенератор смотри в коде страницы