Полезные HTML коды

  Всё что может вам пригодиться для создания своей Веб - страницы.

Все коды вставляются когда Ваш редактор сайта находиться в режиме "Источник":

1) Два баннера в одну строку!

В нужном месте (где бы вам хотелось) в шаблоне страницы разместите код:

<table border="0" cellpadding="1" cellspacing="1" style="width:100%;">
 <tbody>
 <tr>
 <td style="text-align: center;">код баннера</td>
 <td style="text-align: center;">код баннера</td>
 </tr>
 </tbody>
</table>

код баннера

код баннера

2) Спойлер для блога:

<div><input value="Показать содержимое" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Скрыть содержимое';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Показать содержимое';}" type="button" /><div style="display: none;">Вставьте сюда контент, который нужно спрятать</div></div>
 

 

 

 

 3) Кнопка с переходом по Ваше ссылке.

<div dir="ltr" style="text-align: left;" trbidi="on">
<form action="Ваша ссылка" method="get" target="_blank">
<div style="text-align: center;"><br />
<br />
<input type="submit" value="Название кнопки" /><br />
&nbsp;</div>
</form>
</div>

Меняете в этом коде название, вставляете свою ссылку и получаете вот такую кнопку:
 

 

4) Вставка видео на страницу.
  Если Вы хотите встроить видео ролик на свою страницу, то самый простой способ, это взять ссылку на видео из Под каждым видео на  есть кнопкапри нажатии на которую Вам откроется окно с иконками соц. сетей в которых можно поделиться этим видео А первая иконка которую мы видим в списке "Встроить"  которая нам и нужна. При нажатии на неё Вам откроется ссылка которую нужно вставить на свой сайт.

<iframe width="560" height="315" src="https://www.youtube.com/embed/_BHcXw2uCak" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

видео

5) Ротатор баннеров для сайта.
Вы сможете создать свой ротатор баннеров ( с любым количеством в нём баннеров) для своей страницы при помощи этого кода.

<script>
var banner = new Array();
banner[0] = '<a href="http://ваш сайт.ru" target=_blank ><img src="http://адрес вашей картинки.png" alt="тема баннера" title="Посмотреть" width=200 ></a>';
banner[1] = '<a href="http://ваш сайт.ru" target=_blank ><img src="http://адрес вашей картинки.png" alt="тема баннера" title="Посмотреть" width=200 ></a>';
banner[2] = '<a href="http://ваш сайт.ru" target=_blank ><img src="http://адрес вашей картинки.png" alt="тема баннера" title="Посмотреть" width=200 ></a>';
var n = ~~(Math.random()*3);
document.write(banner[n]);
</script>

 
После вставки его на свою страницу измените параметры в коде:

• http://ваш сайт.ru — на адрес сайта куда будет переход после клика на картинку баннера (для каждого баннера свой). Например: http://advear.ru
•  
• http://адрес вашей картинки.png — на адрес картинки баннера. Например: https://advear.ru/assets/images/ref_banners/banner200x300.gif

width=200  — это ширина ваших баннеров. Меняете эту величину в соответствии со своими размерами баннеров. Лучше выбирать баннеры одного размера для вставки в ротатор.
 
В примере ротатора ниже, я вставил три баннера с величиной width=728. Теперь при обновлении этой страницы на баннере ниже, будет открываться три разных баннера при каждом новом обновлении страницы.

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

 <marquee direction="right">Бегущая строка cлева направо</marquee> 

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


Ещё один код бегущей строки. Можно вставить как текст так и баннер или картинку. При наведении на строку курсуром, она будет останавливаться.  Для остановки используется атрибут "onmouseout="this.start()" onmouseover="this.stop()" " который мы вставили перед атрибутом скорости.
 

<marquee direction="right"><table border="0" cellpadding="1" cellspacing="1" style="width:100%;">
 <tbody>
 <tr>
 <td style="text-align: center;">код баннера</td>
 <td style="text-align: center;">код баннера</td>
 <td style="text-align: center;">код баннера</td>
 <td style="text-align: center;">код баннера</td>
 </tr>
 </tbody>
</table></marquee>

Для примера я вставил в этот код 4 баннера подряд, используя код "Два баннера в одну строку!"  (который показан выше) и получил вот такую баннерную бегущую полосу.

код баннера

код баннера

код баннера

код баннера

 

--

--

--

--

7) Разобьем сайт на три или боле или менее колонок!

Всавив код ниже в "Источник" своей страницы, она поделиться на три равные колонки.
Вы можете менять количество колонок и их размер в процентном соотношении.
100% - общий размер страницы.
33%   - размер колонки

<div style="float: left; width: 100%">
<div style="float: left; width: 33%">html-код содержимого первой колонки</div>
<div style="float: left; width: 33%">html-код содержимого второй колонки</div>
<div style="float: left; width: 33%">html-код содержимого третьей колонки</div>
</div>
<div style="clear: both"></div>

100%">

33%">html-код содержимого первой колонки

33%">html-код содержимого второй колонки

33%">html-код содержимого третьей колонки

 

 

Этот код будет выглядеть на вашей странице так:

html-код содержимого первой колонки

html-код содержимого второй колонки

html-код содержимого третьей колонки

К примеру разместите в крайних колонках рекламные баннеры, а в середине содержание страницы, только изменив %- ные параметры колонок.