Создание личной странички. Пример создания html страницы в блокноте
Еще десять лет назад не все знали об Интернете, а своими сайтами владели только серьезные компании.
Сегодня собственной нишей во всемирной паутине никого не поразить. Современные технологии позволяют личный сайт создать бесплатно всем желающим.
Собственный ресурс: зачем он
Пользователи обзаводятся страницами в различных целях. Для некоторых это шанс продемонстрировать свой профессионализм. Например, врачи могут давать бесплатные консультации онлайн и привлекать реальных клиентов.
Финансовое вознаграждение – приятное дополнение к личному проекту. Возможные варианты для заработка:
- Продать рекламное место;
- Выбрав себе партнера, получать комиссионные за помощь в продаже определенного товара;
- Разместить рекламные блоки поисковых систем. Деньги поступают за клики по ссылкам;
- Поставить за вознаграждение ссылки на другой сайт;
- Помещать заказные статьи.
Есть пользователи, которые создают личный сайт «для души». Они не ждут финансовой выгоды и не ищут новых клиентов. Для таких людей страничка – дневник, средство общения с единомышленниками.
Как быстро получить свою нишу в Интернете
Онлайн-конструктор – способ личный сайт создать бесплатно в кратчайшие сроки. Для этого нужно пройти регистрацию, выбрать понравившийся шаблон. Выложив информацию (тексты, фото), пользователь получает свой ресурс.
Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу.
Описание html тегов из примера
1.
- эти теги должны присутствовать на каждой веб-странице обязательно. Они сообщают браузерам и поисковым машинам, что это html-страница.
Любая html страница имеет следующую структуру:
...
Заголовочные теги
...
...
Тело страницы
...
2.
- между этими тегами заключается весь видимый контент страницы.
4.
- между этими тегами прописывается заголовок страницы, которое отображается в самом вверху браузера. Кстати, когда Вы что-то ищите в поисковиках, то первое, что отображается, это как раз название страницы. Тег
часто сокращенно называют "тайтлом". Советую ознакомиться со статьей: как составить тег
</p>
<p>Теперь перейдем к тегам, которые находятся в теле <a href="/tips/pustoi-shablon-stranicy-html-shablony-html5-triangle---besplatnyi-otzyvchivyi.html">html страницы</a> (внутри <body>
и </body>
).</p>
<p>5. <center></center>
- эти теги выравнивают все, что находится внутри них по центру. В данном случае центром будет - центр экрана. В будущем рекомендуется отказаться от использования этих тегов.</p>
<p>6. <h1></h1>
- это один из класса тегов заголовочных тегов <h1>..<h6>
, обычно в него заключают название страницы. Например, у этой странице заголовочный тег "Пример <a href="/program/kak-sozdat-formu-registracii-html-s-muskul-sozdanie-formy.html">создания html</a> страницы".</p>
Примечание
<p>эти теги имеют большой вес в ранжировании сайта , поэтому ими необходимо пользоваться аккуратно и с умом.</p>
<p>При составлении html-кода нужно придерживаться <a href="/multimedia/mnogopotochnye-programmy-s-primery-vosem-prostyh-pravil.html">простого правила</a>: сначала должен идти заголовочный тег <h1>
, а дальше могут идти уже <h2>
, <h3>
и т.д. Главное, чтобы не было сначала <h2>
, потом <h1>
, потом <h3>
и т.п. Должна быть строгая иерархия. Заголовков <h2>
, <h3>
и т.п. может быть много.</p>
<p>7. <br/>
- это одиночный тег, который не требует закрывающего тега. Он осуществляет переход на следующую строку. В моем примере написаны два одиночных тега подряд, чтобы дважды перейти на следующую строку.</p>
<p>8. <span><img src='https://i2.wp.com/URL_ИЗОБРАЖЕНИЯ' loading=lazy>
</span> - это одиночный тег, который выводит изображение.</p>
<ul><li>src
- обязательный параметр, в котором указывается адрес изображения (вместо URL_ИЗОБРАЖЕНИЯ необходимо прописать адрес, где хранится Ваше изображение).
<br><u>Примечание
</u>:
<ul><li>Если изображение находится в одной папке с Вашей html-страницей, то достаточно написать название изображения, иначе нужно прописывать либо абсолютный или относительный URL ;</li>
<li>Не забудьте указать расширение изображения. Например, .jpg
, .gif
, .jpeg
.</li>
</ul></li>
<li>alt
или title
- в эти параметры можно записать описание к Вашему изображению. Когда Вы наведете мышкой на изображение, то появится это описание. Эти параметры важны для продвижения сайта , особенно в поиске по картинкам. Если изображение не удалось загрузить, то будет выведен этот текст, что также является плюсом.</li>
</ul><p>9. <font></font>
- эти теги созданы для изменения шрифта, фона, размера и т.д. Короче говоря, все, что связано с форматированием текста можно настроить в одном теге. Это тег имеют довольно много атрибутов, о которых я расскажу в отдельном уроке.</p>
<p>Примечание:
- аналогичный тег.</p>
<p>Есть также свойство CSS font , в котором можно задавать все эти параметры.</p>
<p>10.
- выделить жирным. Все, что заключено между <b>
и </b>
будет выделено жирным. Например, если Вы напишите его в самом начале контента, а закроете в самом конце, то весь текст на странице будет выделен жирным. Это довольно часто встречающийся тег, аналогом которого является <strong></strong>
.</p>
<p>Поисковые системы обращают внимание на этот тег в плане усиления влияение ключевых слов. Но нужно быть аккуратным, поскольку выделять каждый раз жирным ключевые слова будет воспринято за спам.</p>
<p>В тексте первого урока я уже писала, что для пользователя в сети интернет предлагается очень много различной информации для потребления , а также существуют различные <i>интернет-сервисы
</i>, с помощью которых можно и самому поучаствовать в различных творческих процессах и даже <i>создать личную страницу в интернете.
</i>
<br><span>Внимание! Служба Яндекс в августе 2014г. закрыла описанный в этом уроке сервис "Я.ру", см. информацию о переносе созданных вами данных здесь:
<br>http://blog.yandex.ru/post/81530/
<br>Текст о создании личной страницы на Яндекс из этого урока удалён.
</p><p>Рассмотрим более подробно некоторые возможности, предлагаемые нам, например, службой Яндекс.
</p><p>Для этого наберите в адресной строке вашего компьютера (предварительно откройте новую вкладку) уже известный вам адрес сайта Яндекс: yandex.ru
Откроется главная страница Яндекс.
</p><p>В самом верху страницы располагаются свежие мировые новости. Заголовки новостей подчёркнуты, значит, они являются <b>активными ссылками
</b>. То есть, кликая на любом заголовке, вы попадёте на страницу с более подробным описанием анонсируемого события или происшествия.
Как правило, на открытой странице присутствует много активных ссылок на другие сюжеты, а также фотографии маленького размера. Кликая мышкой на фотографиях, вы сможете просматривать их в укрупнённом виде. Экспериментируйте, щёлкайте на фотографиях и активных ссылках.
Для того чтобы узнать, можно ли увеличить фотку ещё раз, наведите на неё курсор, если он принимает изображение руки, значит можно.</p>
<p>После серии кликов и открывания разных страниц вверху появятся узкие прямоугольные <b>вкладки
</b> с названием страниц. Закрыть вкладки можно крестиком в их правом углу.
</p><p>Активные ссылки могут быть сделаны по-разному: при нажатии на ссылку новая страница открывается в <b>новой вкладке
</b> (тогда вверху появляется узкий прямоугольник этой вкладки) или новая страница открывается вместо
той, которую вы просматривали.
Если страница открылась не в новой вкладке, то <span>вернуться на предыдущую страницу
</span> можно с помощью стрелки влево в зелёном кружке в левом верхнем углу экрана.</p>
<p><img src='https://i2.wp.com/pensionerka.spb.ru/kompyuternye_uroki/kompyuternye_uroki_07/images/001_400x114_web.jpg' width="100%" loading=lazy></p>
<p>Ознакомившись с новостями, вернитесь на главную страницу Яндекс. Кстати, вернуться на главную страницу Яндекс, можно щёлкнув мышкой на логотип сайта
"Яндекс". Это правило применяется практически во всех сайтах, которые вы будете в дальнейшем посещать.</p>
<p>Например, на сайте "<span>Петербургская пенсионерка
</span>" вернуться на главную страницу всегда можно, щёлкнув мышкой на логотип
, который в данном случае расположен вдоль верхнего края и состоит из трёх строк, включающих <span>название сайта, ленту фотографий и категорию интернет-журнала
</span>.
</p><p>Над жёлтой полосой для поиска написаны темы, разделы сайта Яндекс. Нажмите на слово "Ещё", в выпадающем меню показан более подробный список разделов. Каждое название раздела также является активной ссылкой, на которую можно нажать и посмотреть открывшиеся страницы.</p>
<p>Персональная страница - ваша личная страница, страница компании/организации/исследования, на которой собраны все ваши анкеты. Удобна для централизованного сбора информации.</p>
<p>Создать персональную страницу можно через подвал сайта http://anketolog.ru/ , раздел Персональные страницы: http://anketolog.ru/personalpage.html , нажав кнопку .</p>
<p>Или через ваш Личный кабинет - блок Персональные страницы - <b>Создать персональную страницу
</b>.</p>
<p>На Бесплатном тарифе доступны 3 персональные страницы, на тарифе Базовый - 5, на тарифе Профи - бесконечное число персональных страниц.</p>
<h3>Настройка содержания страницы</h3>
<p>Внимание! Обязательные для заполнения поля выделены звёздочкой .</p>
<p>В поле <i>Название
</i> введите наименование вашей компании/организации/исследования, если это ваша страница, то персональные данные или ту информацию, которую считаете необходимой.</p>
<p>Нажмите ссылку <i>Прикрепить анкеты
</i>, из списка в появившемся окне выберите ваши анкеты, которые хотите прикрепить к персональной странице. Количество прикрепленных анкет не ограничено. Вы можете удалять или перемещать анкеты при помощь нажатия на соответствующие значки "Крестик" (для удаления) и "Стрелочка" (для перемещения).</p>
<p>В поле <i>Описание
</i>введите необходимую информацию, которую хотите донести до респондентов.</p>
<p><img src='https://i1.wp.com/help.anketolog.ru/img/help/attachments/2359331/2687078.png' width="100%" loading=lazy></p>
<h3><span>Настройка внешнего вида
</span></h3>
<p>Вы можете изменить стандартный вид <a href="/installation-and-configuration/shablon-personalnaya-stranica-html-css-snow---besplatnyi-shablon-lendinga-na.html">персональной страницы</a>, добавив логотип, фоновое изображение для шапки страницы, цвет фона.
</p>
<ul><li>Логотип
<br></li>
</ul><p>Обратите внимание на следующие условия при добавлении логотипа. Вы можете использовать картинки формата.jpg, .jpeg, .png. Размер картинок будет выставлен автоматически. Рекомендуемый размер - 205*165 пикселей.
</p>
<p>Чтобы прикрепить/удалить логотип, нажмите кнопку <b>Прикрепить/Удалить
</b> под ним.
</p>
<ul><li><span>Фоновое изображение в шапке
</span></li>
</ul><p>Обратите внимание на следующие условия при добавлении <a href="/education/slaider-so-smennym-fonom-primer-html---slaider-fonovogo.html">фонового изображения</a>. Вы можете использовать картинки формата <span>.jpg, .jpeg, .png. Рекомендуемый размер - 1140*360 пикселей.
</p>
<ul><li><span>Цвет фона
</span></li>
</ul><p>Цвет фона можно выбрать из палитры представленных цветов (нажмите на квадрат в строке Цвет фона). Также можно ввести в представленное поле html-код цвета.
</p>
<ul><li><span>Логотип Анкетолога
</span></li>
</ul><p>Чтобы убрать наш логотип, установите галочку в соответствующем пункте.
</p>
<p><br><img src='https://i0.wp.com/help.anketolog.ru/img/help/attachments/2359331/2687079.png' width="100%" loading=lazy><br></p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
</div>
</div>
</div>
</div>
<aside class="col-lg-4 col-md-12 col-md-offset-4 col-lg-offset-0" id="right">
<div>
</div>
<br/>
<div>
</div>
<br/>
<div>
</div>
<br/>
<div>
</div>
<br/>
</aside>
</div>
</div>
</div>
<div class="popup" id="share">
<div class="perfect-scroll" style="text-align: center">
<div style="margin-bottom: 20px">
<strong> Скачивание сейчас начнётся...</strong>
<br> Не забудьте поделиться материалом <br>в социальных сетях с Вашими <br> коллегами
</div>
<div>
<div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus" data-counter=""></div>
</div>
</div>
<div class="close-pop pull-right">
<svg width="10px" height="10px" viewBox="0 0 10 10">
<path fillrule="evenodd"
d="M 6.41 5C 6.41 5 9.24 7.83 9.24 7.83 9.63 8.22 9.63 8.85 9.24 9.24 8.85 9.63 8.22 9.63 7.83 9.24 7.83 9.24 5 6.41 5 6.41 5 6.41 2.17 9.24 2.17 9.24 1.78 9.63 1.15 9.63 0.76 9.24 0.37 8.85 0.37 8.22 0.76 7.83 0.76 7.83 3.59 5 3.59 5 3.59 5 0.76 2.17 0.76 2.17 0.37 1.78 0.37 1.15 0.76 0.76 1.15 0.37 1.78 0.37 2.17 0.76 2.17 0.76 5 3.58 5 3.58 5 3.58 7.83 0.76 7.83 0.76 8.22 0.37 8.85 0.37 9.24 0.76 9.63 1.15 9.63 1.78 9.24 2.17 9.24 2.17 6.41 5 6.41 5Z"></path>
</svg>
</div>
</div>
<section id="views">
<div class="container">
</div>
</section>
<script type="text/javascript">
$(document).ready(
function () {
$('.kursiv').readmore({
speed: 75,
maxHeight: 84,
heightMargin: 16,
moreLink: '<a href="#"><span>Показать полностью</span>',
lessLink: '<a href="#"><span>Скрыть</span></a>',
} );
} );
</script>
<style>
div.kursiv {
margin-bottom: 0;
}
#razrabotka {
margin-top: 30px;
}
.readmore-js-toggle {
font-style: italic;
color: #999;
display: inline;
margin-right: 10px;
font-size: 14px;
cursor: pointer;
border-bottom: 1px dotted #e6e6e6;
}
</style></section>
<footer>
<div class="container">
<div class="row">
<div class="col-xs-16 col-sm-4 col-md-3">
<p>© 2024, mkr-novo2.ru, Интернет. Образование. Программы. Прошивки. Установка и настройка. Навигаторы</p>
<div class="social">
<a target="_blank" href="https://vk.com/share.php?url=https://mkr-novo2.ru/education/sozdanie-lichnoi-stranichki-primer-sozdaniya-html-stranicy-v-bloknote.html">
<svg width="32px" height="19px" viewBox="0 0 32 19">
<path fillRule="evenodd"
d="M 15.36 18.01C 15.36 18.01 17.24 18.01 17.24 18.01 17.24 18.01 17.81 17.94 18.1 17.64 18.36 17.37 18.35 16.85 18.35 16.85 18.35 16.85 18.32 14.41 19.49 14.05 20.64 13.7 22.12 16.4 23.69 17.45 24.87 18.23 25.77 18.06 25.77 18.06 25.77 18.06 29.97 18.01 29.97 18.01 29.97 18.01 32.16 17.87 31.12 16.21 31.03 16.07 30.51 14.97 28 12.72 25.37 10.35 25.72 10.74 28.89 6.65 30.82 4.16 31.59 2.65 31.35 2 31.12 1.38 29.7 1.54 29.7 1.54 29.7 1.54 24.98 1.57 24.98 1.57 24.98 1.57 24.63 1.52 24.37 1.67 24.12 1.82 23.95 2.16 23.95 2.16 23.95 2.16 23.21 4.09 22.21 5.72 20.11 9.18 19.27 9.36 18.92 9.15 18.12 8.65 18.32 7.14 18.32 6.07 18.32 2.72 18.85 1.32 17.3 0.96 16.79 0.84 16.41 0.76 15.1 0.75 13.41 0.73 11.99 0.76 11.18 1.14 10.64 1.39 10.23 1.96 10.48 1.99 10.79 2.03 11.5 2.18 11.88 2.67 12.36 3.31 12.34 4.74 12.34 4.74 12.34 4.74 12.62 8.68 11.69 9.17 11.06 9.5 10.18 8.82 8.31 5.68 7.35 4.08 6.62 2.3 6.62 2.3 6.62 2.3 6.48 1.97 6.23 1.8 5.93 1.58 5.51 1.51 5.51 1.51 5.51 1.51 1.02 1.54 1.02 1.54 1.02 1.54 0.35 1.56 0.1 1.84-0.12 2.09 0.08 2.62 0.08 2.62 0.08 2.62 3.6 10.57 7.57 14.57 11.22 18.25 15.36 18.01 15.36 18.01 15.36 18.01 15.36 18.01 15.36 18.01Z"/>
</svg>
</a>
<a target="_blank" href="https://connect.ok.ru/offer?url=https://mkr-novo2.ru/education/sozdanie-lichnoi-stranichki-primer-sozdaniya-html-stranicy-v-bloknote.html">
<svg viewBox="0 0 25 25" width="25px" height="25px">
<path class="st0" d="M12.5,12.7c3.2,0,5.8-2.6,5.8-5.8c0-3.2-2.6-5.8-5.8-5.8C9.3,1,6.7,3.6,6.7,6.8C6.7,10,9.3,12.7,12.5,12.7z
M12.5,3.9c1.6,0,2.9,1.3,2.9,2.9c0,1.6-1.3,2.9-2.9,2.9c-1.6,0-2.9-1.3-2.9-2.9C9.6,5.2,10.9,3.9,12.5,3.9z M19.2,13.4
c-0.3-0.7-1.2-1.2-2.5-0.3c-1.6,1.3-4.3,1.3-4.3,1.3s-2.6,0-4.3-1.3c-1.2-1-2.1-0.4-2.5,0.3c-0.6,1.2,0.1,1.7,1.5,2.7
c1.3,0.8,3,1.1,4.1,1.2l-0.9,0.9c-1.3,1.3-2.6,2.6-3.4,3.4c-0.5,0.5-0.5,1.4,0,1.9l0.2,0.2c0.5,0.5,1.4,0.5,1.9,0l3.4-3.4
c1.3,1.3,2.6,2.6,3.4,3.4c0.5,0.5,1.4,0.5,1.9,0l0.2-0.2c0.5-0.5,0.5-1.4,0-1.9l-3.4-3.4l-0.9-0.9c1.1-0.1,2.8-0.4,4.1-1.2
C19.2,15.1,19.8,14.5,19.2,13.4z"/>
</svg>
</a>
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://mkr-novo2.ru/education/sozdanie-lichnoi-stranichki-primer-sozdaniya-html-stranicy-v-bloknote.html">
<svg width="26px" height="25px" viewBox="0 0 26 25">
<path fillRule="evenodd"
d="M 24.33-0C 24.33-0 1.96-0 1.96-0 1.19-0 0.57 0.62 0.57 1.38 0.57 1.38 0.57 23.62 0.57 23.62 0.57 24.38 1.19 25 1.96 25 1.96 25 14 25 14 25 14 25 14 15.32 14 15.32 14 15.32 10.72 15.32 10.72 15.32 10.72 15.32 10.72 11.54 10.72 11.54 10.72 11.54 14 11.54 14 11.54 14 11.54 14 8.76 14 8.76 14 5.53 15.98 3.77 18.88 3.77 20.27 3.77 21.46 3.88 21.81 3.92 21.81 3.92 21.81 7.3 21.81 7.3 21.81 7.3 19.8 7.3 19.8 7.3 18.22 7.3 17.92 8.04 17.92 9.13 17.92 9.13 17.92 11.54 17.92 11.54 17.92 11.54 21.68 11.54 21.68 11.54 21.68 11.54 21.19 15.32 21.19 15.32 21.19 15.32 17.92 15.32 17.92 15.32 17.92 15.32 17.92 25 17.92 25 17.92 25 24.33 25 24.33 25 25.09 25 25.71 24.38 25.71 23.62 25.71 23.62 25.71 1.38 25.71 1.38 25.71 0.62 25.09-0 24.33-0Z"/>
</svg>
</a>
<a target="_blank" href="https://youtube.com/">
<svg width="26px" height="19px" viewBox="0 0 26 19">
<path fillRule="evenodd"
d="M 25.75 14.46C 25.75 14.46 25.5 16.18 24.75 16.93 23.79 17.92 22.72 17.93 22.23 17.99 18.71 18.24 13.43 18.25 13.43 18.25 13.43 18.25 6.89 18.19 4.88 18 4.32 17.89 3.06 17.92 2.11 16.93 1.35 16.18 1.11 14.46 1.11 14.46 1.11 14.46 0.86 12.45 0.86 10.44 0.86 10.44 0.86 8.55 0.86 8.55 0.86 6.54 1.11 4.52 1.11 4.52 1.11 4.52 1.35 2.81 2.11 2.05 3.06 1.06 4.14 1.06 4.63 1 8.15 0.75 13.42 0.75 13.42 0.75 13.42 0.75 13.43 0.75 13.43 0.75 13.43 0.75 18.71 0.75 22.23 1 22.72 1.06 23.79 1.06 24.75 2.05 25.5 2.81 25.75 4.52 25.75 4.52 25.75 4.52 26 6.54 26 8.55 26 8.55 26 10.44 26 10.44 26 12.45 25.75 14.46 25.75 14.46ZM 10.83 5.73C 10.83 5.73 10.83 12.72 10.83 12.72 10.83 12.72 17.62 9.24 17.62 9.24 17.62 9.24 10.83 5.73 10.83 5.73Z"/>
</svg>
</a>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-16 links">
<h4>mkr-novo2.ru</h4>
<a href="/category/internet/">Интернет</a>
<a href="/category/multimedia/">Мультимедиа</a>
<a href="/category/navigation/">Навигаторы</a>
<a href="/category/education/">Образование</a>
<a href="/category/at/">ПО</a>
<a href="/category/problems/">Проблемы</a>
</div>
<div class="col-lg-2 col-sm-3 col-xs-16 links">
<h4>О проекте</h4>
<a href="/feedback.html">Обратная связь</a>
<a href="">О сайте</a>
</div>
<div class="col-lg-5 col-sm-1 col-xs-16 links"></div>
<div class="col-lg-4 col-sm-5 col-xs-16 links">
</div>
</div>
<div class="row v-center">
<div class="col-md-8 col-xs-16">
<a data-fancybox data-type="iframe" data-src="/feedback.html">Контакты</a>
</div>
<div class="col-md-8 col-xs-16">
<div class="share pull-right">
<script type="text/javascript" src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js" charset="utf-8"></script>
<script type="text/javascript" src="//yastatic.net/share2/share.js" charset="utf-8"></script>
<div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus" data-counter=""></div>
</div>
</div>
</div>
</div>
</footer>
<a href="#bot" id="to-top">
<svg width="50px" height="50px" viewBox="0 0 50 50">
<circle cx="25.00" cy="25.00" r="25.00" fill="rgb(0,0,0)" opacity="0.37"/>
<path fillRule="evenodd"
d="M 33.94 24.46C 33.94 24.46 25.89 16.3 25.89 16.3 25.32 15.73 24.41 15.73 23.84 16.3 23.84 16.3 15.79 24.46 15.79 24.46 14.88 25.38 15.52 26.97 16.81 26.97 16.81 26.97 20.43 26.97 20.43 26.97 21.23 26.97 21.88 27.62 21.88 28.43 21.88 28.43 21.88 32.51 21.88 32.51 21.88 33.71 22.83 34.68 24.01 34.68 24.01 34.68 25.72 34.68 25.72 34.68 26.9 34.68 27.86 33.71 27.86 32.51 27.86 32.51 27.86 28.43 27.86 28.43 27.86 27.62 28.5 26.97 29.31 26.97 29.31 26.97 32.92 26.97 32.92 26.97 34.21 26.97 34.85 25.38 33.94 24.46Z"
fill="rgb(241,241,241)"/>
</svg>
</a>
<div class="overlay"></div>
<div class="popup" id="password">
<div class="perfect-scroll">
<h2>Восстановление пароля
<div class="close-pop pull-right">
<svg width="10px" height="10px" viewBox="0 0 10 10">
<path fillRule="evenodd"
d="M 6.41 5C 6.41 5 9.24 7.83 9.24 7.83 9.63 8.22 9.63 8.85 9.24 9.24 8.85 9.63 8.22 9.63 7.83 9.24 7.83 9.24 5 6.41 5 6.41 5 6.41 2.17 9.24 2.17 9.24 1.78 9.63 1.15 9.63 0.76 9.24 0.37 8.85 0.37 8.22 0.76 7.83 0.76 7.83 3.59 5 3.59 5 3.59 5 0.76 2.17 0.76 2.17 0.37 1.78 0.37 1.15 0.76 0.76 1.15 0.37 1.78 0.37 2.17 0.76 2.17 0.76 5 3.58 5 3.58 5 3.58 7.83 0.76 7.83 0.76 8.22 0.37 8.85 0.37 9.24 0.76 9.63 1.15 9.63 1.78 9.24 2.17 9.24 2.17 6.41 5 6.41 5Z"/>
</svg>
</div>
</h2>
<div class="recover-success">
<form action="/recovery/request" data-method="post" method="post" class="recover_form">
<p>Введите вашу электронную почту, чтобы восстановить пароль!</p>
<div class="input-wrp">
<input name="email" type="text" placeholder="Введите ваш e-mail">
</div>
<input type="submit" data-disable-with="Отправить..." class="btn green" value="Отправить">
</form>
</div>
<div class="auth-form_error" style="padding-top: 10px"></div>
</div>
</div>
<script>
$('.user.one').click(function (e, ob) {
$('.user').removeClass('active-user');
$('.user.one').addClass('active-user');
$('#user_type').val('1');
e.stopPropagation();
} );
$('.user.two').click(function (e, ob) {
$('.user').removeClass('active-user');
$('.user.two').addClass('active-user');
$('#user_type').val('2');
e.stopPropagation();
} );
$('.user.three').click(function (e, ob) {
$('.user').removeClass('active-user');
$('.user.three').addClass('active-user');
$('#user_type').val('3');
e.stopPropagation();
} );
function clearErrors() {
$('.auth-form_error').each(function () {
$(this).html('');
} );
}
$('body').on('click', '.open-login-form', function (e) {
$('#register, .overlay').removeClass('visible-pop');
$('#login, .overlay').addClass('visible-pop');
e.preventDefault();
} );
$('body').on('click', '.open-pass-form', function (e) {
$('#register, .overlay').removeClass('visible-pop');
$('#password, .overlay').addClass('visible-pop');
e.preventDefault();
} );
$('.login_form')
.on('ajax:beforeSend', function (event, xhr, settings) {
clearErrors();
} )
.on('ajax:complete', function (event, xhr, status) {
} )
.on('ajax:success', function (event, data, status, xhr) {
if (data.status == 0) {
$('.auth-form_error').html(data.text + '<br>');
} else {
$('.open-register').html(data.text);
var delay = 1000;
window.location.href = url = window.location.href + "?login=ok";
location.replace(url);
setTimeout('window.location.reload(true);', delay);
}
} ).on('ajax:error', function (event, xhr, status, error) {
} );
$('.recover_form')
.on('ajax:beforeSend', function (event, xhr, settings) {
clearErrors();
} )
.on('ajax:complete', function (event, xhr, status) {
} )
.on('ajax:success', function (event, data, status, xhr) {
console.log(data);
if (data.status == 0) {
$('.auth-form_error').html(data.text + '<br>');
} else {
$('.recover-success').html('<div class="success" >' + data.text + '</div>');
}
} ).on('ajax:error', function (event, xhr, status, error) {
} );
$('.registration_form')
.on('ajax:beforeSend', function (event, xhr, settings) {
var emailError = $('#emailError');
var passwordError = $('#passwordError');
var passwordVerify = $('#passwordVerifyError');
var userTypeError = $('#userTypeError');
var emailExist = $('#emailExist');
emailError.html('');
passwordError.html('');
passwordVerify.html('');
userTypeError.html('');
emailExist.hide();
} )
.on('ajax:complete', function (event, xhr, status) {
} ).on('ajax:success', function (event, data, status, xhr) {
// insert the failure message inside the "#account_settings" element
//console.log(data);
if (data.status == 0) {
//$('.reg-info').html('<div class="error">' + data.text + '</div>');
if (data.text.email) {
var emailError = $('#emailError');
var emailExist = $('#emailExist');
console.log(data.text.email);
if (data.text.email == 'Найдена совпадающая со значением запись') {
console.log('alert');
emailExist.show();
} else {
emailError.html('<i class="icon-error"></i><div class="error_note_wrapper">' +
'<div class="error_note">' +
'<span class="error_note_text">' + data.text.email + '</span></div></div>');
}
}
if (data.text.password) {
var passwordError = $('#passwordError');
console.log(data.text.password);
passwordError.html('<i class="icon-error"></i><div class="error_note_wrapper">' +
'<div class="error_note">' +
'<span class="error_note_text">' + data.text.password + '</span></div></div>');
}
if (data.text.passwordVerify) {
var passwordVerify = $('#passwordVerifyError');
console.log(data.text.passwordVerify);
passwordVerify.html('<i class="icon-error"></i><div class="error_note_wrapper">' +
'<div class="error_note">' +
'<span class="error_note_text">' + data.text.passwordVerify + '</span></div></div>');
}
if (data.text.captcha) {
var captcha = $('#captchaError');
console.log(data.text.captcha);
captcha.html('<i class="icon-error"></i><div class="error_note_wrapper">' +
'<div class="error_note">' +
'<span class="error_note_text">' + data.text.captcha + '</span></div></div>');
}
if (data.text.userType) {
var user_type = $('#userTypeError');
console.log(data.text.userType);
user_type.html('<i class="icon-error"></i><div class="error_note_wrapper">' +
'<div class="error_note">' +
'<span class="error_note_text">' + data.text.userType + '</span></div></div>');
}
} else {
$('.reg-success').html(data.text);
var delay = 2000;
window.location.href = url = window.location.href + "?reg=ok";
location.replace(url);
setTimeout('window.location.reload(true);', delay);
}
} ).on('ajax:error', function (event, xhr, status, error) {
} );
</script>
<div class="popup" id="premium-pop">
</div>
<link rel="stylesheet" href="/videouroki/res/lightslider/lightslider.min.css">
<link rel="stylesheet" href="/videouroki/res/perfectScrollbar/perfect-scrollbar.css">
<link rel="stylesheet" href="/videouroki/assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/assets/vendor/fancybox/jquery.fancybox.min.css">
<script src="/videouroki/res/perfectScrollbar/perfect-scrollbar.jquery.min.js"></script>
<script src="/js/rails.js"></script>
<script src="/videouroki/res/lightslider/lightslider.min.js"></script>
<script src="/videouroki/res/jquery.validate.min.js"></script>
<script src="/videouroki/res/autosize-master/autosize.min.js"></script>
<script src="/videouroki/js/tabs.js"></script>
<script src="/videouroki/js/select.js"></script>
<script src="/videouroki/js/global.js?2109"></script>
<script src="/videouroki/js/views.js"></script>
<script src="/videouroki/plugin/notify/notify.min.js"></script>
<script src="/videouroki/plugin/notify/notify-metro.js"></script>
<script src="/videouroki/js/lazyload.min.js"></script>
<script src="/assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(document).ready(
function () {
// new LazyLoad();
} )
</script>
<!--[if gte IE 9]><script type="text/javascript" src="/videouroki/assets/ckeditor-mini/ckeditor.js"></script><![endif]-->
<script type="text/javascript" src="/videouroki/js/readmore.js"></script></body>
</html> 
Вход