HTML5 — это новая платформа, которая позволяет не только создавать сайты, но и разрабатывать мощные веб-приложения. Эта технология предлагает множество полезных тегов, сохраняя при этом знакомый синтаксис HTML 4.01 и XHTML 1.0. Однако, для front-end разработчиков нет необходимости привыкать к новым правилам HTML5. Так что же такое HTML5 и какие преимущества он предоставляет? Новый способ разметки Если вы когда-то создавали сетки для сайтов, то наверняка помните, как нужно было каждый блок разделить и обернуть в div с классами. Названия основных частей страницы, таких как шапка, сайдбар, главная часть и подвал, использовались повсеместно и часто повторялись в классах. Именно поэтому HTML5 предложил отдельные теги для этих элементов. Вот небольшой список: <header></header> — шапка страницы <article></article> — главная часть страницы <aside></aside> — сайдбар <footer></footer> — подвал страницы Технически, эти теги эквивалентны тегу <div>, где многоточие — шапка, главная часть страницы, сайдбар или подвал страницы. И, конечно, вы понимаете, почему лучше использовать теги HTML5 вместо <div>. Во-первых, это короче;… Читать далее »
ИльяКомментарии к записи Параллакс-эффект на чистом CSS отключены
В этой статье показано, как с помощью CSS-трансформаций, перспективы и небольших хитростей с масштабированием сделать параллакс-эффект на чистом CSS. Параллакс чаще всего делается на JavaScript, и почти всегда он реализован плохо: отлавливается событиепрокрутка, изменения в DOM вносятся напрямую в обработчике и вызываются лишние перерасчёты и перерисовки. Всё это происходит асинхронно с потоковым рендерингом браузера, в результате чего некоторые кадры пропускаются и эффект выглядит прерывистым. Впрочем, это не так уж страшно —requestAnimationFrame и отложенное обновление DOM позволяют управлять внешним видом сайтов с параллакс-эффектом. Но что если вы могли бы совсем не зависеть от JavaScript? Перенос параллакс-эффекта на CSS избавит вас от упомянутых проблем и позволит браузеру положиться на аппаратное ускорение — почти всё будет обрабатываться компоновщиком. В результате вы получите согласованную частоту кадров и гладкую прокрутку страницы. Кроме того, можно сочетать этот эффект с другими CSS-приёмами, такими как медиавыражения и поддержка CSS-свойств. Как насчёт отзывчивого параллакс-эффекта? Теория Прежде чем говорить о принципе работы, давайте выполним базовую разметку: <div class=«parallax«> <div class=«parallax__layer parallax__layer—back«> … </div> <div class=«parallax__layer parallax__layer—base«> … </div> </div> А вот основные стили: .parallax { perspective: 1px; height: 100vh; overflow-x: hidden; overflow-y: auto; } .parallax__layer { position:… Читать далее »
ИльяКомментарии к записи Как установить код sape на сайт, написанный на HTML? отключены
Тут могут быть два различных вариата: Ваш хостинг поддерживает PHP.В этом случае, вам нужно заставить html-страницы обрабатывать PHP-код, который выводит ссылки. Для этого достаточно прописать в файле .htaccess (он должен находиться в корневой директории сайта) следующую строку:AddHandler application/x-httpd-php .php .htm .htmlЕсли файла на вашем хостинге нет, то его можно создать в блокноте и закачать в корень сайта. Если этот способ не сработает, уточните у хостера, что Вам нужно прописывать в файле .htaccess для того, чтобы html-страницы обрабатывали PHP код. Если у вас получилось заставить html страницы обрабатывать PHP код, то дальше вам следует выполнить инструкции по размещению кода описаные здесь. Ваш хостинг не поддерживает PHP. У вас статический сайт без языков программирования.В этом слечае вы можете размещать ссылки по FTP. Ссылки будут размещаться роботом автоматически.Для этого вам нужно будет в настройках своей площадки указать реквизиты ФТП-доступа к сайту. Подробную инструкцию по работе со статическими сайтами читайте на форуме в соответствующей теме. Статья… Читать далее »
Для проверки ссылок на редиректы и индексацию, можно спокойно воспользоваться сервисом от https://www.bertal.ru/. Данный сервис показывает в коде все возможные nofollow, noindex редиректы типа перехода через специальный файл или сервис.
Селектор CSS – это тот элемент, к которому мы собираемся применять CSS свойства. Слово «селектор» говорит само за себя, оно обозначает выбор. p {color: red} div span {background: green} ul li {list-style: none} Селекторы class и id В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример: <div id=»first»>текст в первом диве</div> <div class=»second»>текст во втором диве</div> <div id=»third» class=»first second third»>текст в третьем диве</div> На что стоит обратить внимание: Классы и идентификаторы можно присваивать любым (всем) тегам. Каждый id уникален и не может повторяться в пределах одной… Читать далее »
Вы спамер! Вы будете гореть в аду! Покайтесь! Зачем это вам? Уважаемый пользователь, почтовая рассылка не всегда — есть СПАМ. Русская википедия дает такое определение спаму: Спам (англ. spam) — массовая рассылка коммерческой, политической и иной рекламы или иного вида сообщений (информации) лицам, не выражавшим желания их получать. И не смотря на то, что по статистике около 80% почтового траффика является спамом, я работаю по схеме «честных» почтовых рассылок. Как это происходит: Вариант №1. Привет, вам почта! Картина следующая. Имеется заказчик — владелец интернет-магазина, купонной сети или любого другого сервиса, который пытается что либо продать/регулярно о чем либо информировать пользователя. Что происходит дальше? Подготавливается html письмо-приветствие, которое рассылается по базе email’ов с примерно таким содержанием: Здравствуйте, бла-бла-бла, мы такие-то, такие-то, предлагает то-то и то-то. Если вас заинтересовала данная информация, перейдите, пожалуйста по ссылке и подтвердите ваше желание на регулярное получение нашей почтовой рассылки. При отправке подобного письма-приветсвия рекомендую передавать GET’ом… Читать далее »
Вы наконец-то решились идти в ногу со временем и выделяться из общей массы. Вы решились на использование уникального запоминающегося дизайна для ваших рассылок! Поздравляем, это здорово. Но прежде чем приступить к созданию шаблона, вам необходимо узнать о специфике создания именно email рассылок. «Эта статья поведает о том, как создать html шаблон для email рассылки, который выглядит привлекательно и эффективно. Итак, начнем… Email шаблон – это продолжение вашего сайта Он предназначен для узнаваемости в первую очередь, поэтому он должен наследовать (но не дублировать) стилистику сайта. Если вы хотите получить шаблон, не перекликающийся визуально с вашим сайтом, или шаблон для каких-то специфических целей (например, поздравительный шаблон-открытку к празднику), укажите об этом отдельно в сопроводительном письме. Чем же отличается email шаблон от сайта Но все же email письмо хоть и является html страницей, похожей на ваш сайт, оно будет иметь некоторые отличия, накладываемые техническими требованиями: Недопустимо использование больших фоновых изображений: у одной части… Читать далее »
