-->

Полезная информация для начинающего вебмастера

Обучение с примерами кода для начинающих: файл robots, якорь на странице, как увеличить картинку на сайте, выезжающий текст

Полезная информация для начинающего сайтостроителя

На этой странице в помощь начинающему вебмастеру размещаю разные вспомогательные вещи, пригодится для тех, кто изучает сайтостроение или хочет сделать себе сайт самостоятельно и по возможности - бесплатно или совсем недорого.


Как составить правильный роботс, файл robots.txt

Правильный файл robots.txt влияет на продвижение сайта

ккак сделать правильный robots

Формируем правильный robots.txt
В чем правильность? В том, что этот рабочий файл указывает поисковикам, что смотреть, а что - не смотреть, чтоб не отвлекаться и не "распылять внимание"
Так же это возможность указать, где находится карта сайта (sitemap.xml), чтобы поисковик быстро нырнул в карту сайта и разобрался со структурой и страницами.
Так же в карте сайта указывается правильный протокол сайта (http или https) и правильный адрес основного зеркала сайта (с www или без).

Скопируйте данный код, заменив адрес файла Sitemap и изменив адрес host.

User-agent: *
Disallow: /ненужная-папка
Disallow: /ненужный-файл.php
Sitemap: https://вашдомен/sitemap.xml
Host: https://вашдомен

Как сделать ссылку (якорь) на определенное место на странице сайта

Используется в лендингах

как сделать ссылку на определенное место на странице

Ссылка "якорь" на определенное место на странице сайта
Здесь все просто. Там, куда нужно попасть, ставим "якорь". Там, откуда нужно попасть, ставим ссылку на "якорь". Выглядит так #якорь. Оборачиваем в ссылочные теги "a"
Если нужно попасть на определенное место НА ДРУГОЙ СТРАНИЦЕ САЙТА, пишем ссылку на страницу стайта, потом ставим #, потом прописываем "якорь". Выглядит так "страница сайта#якорь". Сам "якорь" присваивается как id. Выглядит, к примеру так id="yakor".

Ниже код для примера


ССЫЛКА НА ЯКОРЬ НА ТОЙ ЖЕ СТРАНИЦЕ
<a href="#yakor">Подробнее здесь</a>
САМ ЯКОРЬ 
<h1 id="yakor">Какой то заголовок</h1>
или
<div id="yakor">Какой то текст</div>
ССЫЛКА НА ЯКОРЬ НА ДРУГОЙ СТРАНИЦЕ 
<a href="страница.php#yakor">Подробнее здесь</a>

Скрипт для увеличения картинки

Как увеличить картинку при нажатии, на примере картинки ниже

Для увеличения картинки при нажатии на нее мышкой нужно скачать папку js в корень сайта, прописать нужные стили в head и написать правильный html код в том месте страницы, где фото.
Папку js можно скачать здесь
Код стилей в head, ниже - в коде
Код html картинки ниже - в коде

Коды стилей для размещения в head и на странице

    
ВСТАВИТЬ МЕЖДУ ТЕГАМИ head    
<!--скрипт для ув картинки---->
<script type="text/javascript" src="js/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="js/highslide.css" />
<script type="text/javascript"> 
hs.graphicsDir = 'js/graphics/';    
hs.wrapperClassName = 'wide-border'; 
</script>    
    
ВСТАВИТЬ НА СТРАНИЦЕ, ГДЕ КАРТИНКА    
    
<div style="width: 30%;">
               <a href="ПУТЬ-К-КАРТИНКЕ" onclick="return hs.expand(this)">
               <img src="ПУТЬ К КАРТИНКЕ" alt="Описание картинки" title="Всплывающее описание"></a>
          </div>

Выезжающий на страницу текст

Выезжающий на страницу блок может содержать что угодно, рассмотрим пример с текстом, заголовком или картинкой

Выезжающий текст

Для сценария выезжающего блока нужно скачать папку anim в корень сайта, прописать нужные стили в head и написать правильный html код в том месте страницы, где нужно разместить выезжающий текст.
Папку anim можно скачать здесь
Разархивируйте и качните на сервер в корень сайта три файла из папки.
Код стилей в head, ниже - в коде
Код html ниже - в коде

Коды стилей для размещения в head и на странице

    
ВСТАВИТЬ МЕЖДУ ТЕГАМИ head    
<!--Подключение---->
<link rel="stylesheet" href="ВАШСАЙТ.RU/ПУТЬКФАЙЛУ/animate.css">
<script src="ВАШСАЙТ.RU/ПУТЬКФАЙЛУ/wow.min.js"></script> 
<script src="ВАШСАЙТ.RU/ПУТЬКФАЙЛУ/wow.js"></script> 
    
ВСТАВИТЬ НА СТРАНИЦЕ, ГДЕ ТЕКСТ ИЛИ КАРТИНКА    
    
<p align="center" class="wow animated bounceInRight">выезжающий текст</p>

<div align="center" class="wow animated bounceInLeft" style="padding-bottom:50px;"><img src="КАРТИНКА.jpg" width="200px;"></div>

Обновите страницу, чтобы увидеть эффект

ВЫЕЗЖАЮЩИЙ ТЕКСТ СПРАВА


ВЫЕЗЖАЮЩИЙ ТЕКСТ СЛЕВА
:-) Спасибо автору этого мануала с сайта https://epicblog.net/19-web-development/animatsiya-dlya-sajta.html

© Copyright 2014-2019 "KupitSait" - Все права защищены - jekky1@yandex.ru
Все тексты с сайта защищены авторским правом и могут быть опубликованы в других источниках только с активной ссылкой
Главная Заказ сайта Блог Ликбез Контакты Карта сайта Пользовательское соглашение Политика конфиденциальности