Web Мастерская»Блог

Сообщество Web Мастеров. Тут собрано всё, чтобы написать свой первый сайт, запустить его в Интернет и поддерживать его в течении всей его работы.

Разметка меню и навигации в HTML

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

Использование семантических тегов


HTML5 предоставляет ряд семантических тегов, которые помогают улучшить структуру и доступность сайта:
  • <nav> — контейнер для основных навигационных ссылок.
  • <header> — секция, содержащая логотип, заголовок и навигацию.
  • <aside> — боковая панель с второстепенной навигацией.

<header>
  <h1>Мой сайт</h1>
  <nav>
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">О нас</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </nav>
</header>

Оформление пунктов меню


Пункты меню рекомендуется размещать в списке <ul> или <ol>, чтобы обеспечить доступность и удобство для пользователей с ограниченными возможностями.

Пример:
<nav>
  <ul>
    <li><a
...

Как отключить автозаполнение и подсказки в input полях с type="text"?

Автозаполнение и всплывающие подсказки в HTML формах — это удобные функции, которые помогают пользователям быстрее вводить данные. Однако в некоторых случаях они могут мешать, например, при вводе конфиденциальной информации или когда интерфейс не рассчитан на отображение предыдущих значений. В этой статье мы рассмотрим, как отключить автозаполнение и подсказки в полях ввода.

Почему нужно отключать автозаполнение?


  • Безопасность: защита конфиденциальных данных (пароли, персональные данные).
  • Соответствие дизайну: сохранение единого стиля интерфейса.
  • Поведение пользователей: предупреждение введения устаревших данных.

Как отключить автозаполнение?



1. Атрибут autocomplete="off"
Самый простой способ отключения автозаполнения — это использование атрибута autocomplete="off" в теге <form> или в отдельном поле <input>:
<input type="text" autocomplete="off">

Однако этот способ не всегда срабатывает в старых браузерах и в Chrome.

2. Атрибут readonly и focus
Другой способ — использовать...

Установка библиотеки Imagick

PHP
Библиотека Imagick является PHP-интерфейсом к ImageMagick, мощному инструменту обработки изображений. Она позволяет разработчикам легко манипулировать изображениями прямо из PHP-кода, выполняя операции вроде изменения размера, поворота, наложения фильтров и многое другое.

Проверка наличия ImageMagick


Прежде всего убедитесь, что на вашем сервере установлен пакет ImageMagick. Если у вас Linux-дистрибутив, выполните следующую команду для проверки:
convert -version

Если вывод команды показывает версию ImageMagick, значит, всё установлено правильно. Если же пакета нет, установите его одной из команд ниже в зависимости от вашей системы:

Ubuntu / Debian:
sudo apt-get update && sudo apt-get install imagemagick

CentOS / RHEL:
sudo yum install epel-release
sudo yum install ImageMagick-devel

macOS (Homebrew):
brew install imagemagick

Установка расширения PECL Imagick


Для установки самого PHP-расширения вам потребуется компилятор и некоторые...

Failed to execute 'appendChild' on 'Node': Unexpected identifier 'site'

Ошибка Uncaught SyntaxError: Failed to execute 'appendChild' on 'Node': Unexpected identifier 'site' возникает, когда JavaScript пытается вставить некий некорректный фрагмент кода в дерево документа, и встречает нечто, что нельзя интерпретировать как действительную инструкцию.

Обычно подобная ошибка проявляется, когда в коде присутствует неприемлемый или поврежденный JavaScript-код, который получается динамически, например, через AJAX-запрос или серверную генерацию.

Шаги для нахождения и устранения проблемы



Открытие вкладки Console в инструментах разработчика (DevTools): Первое, что нужно сделать, — это открыть консоль браузера и изучить детали ошибки. Консоль выдаст всю необходимую информацию, включая имя файла и номер строки, где произошла ошибка.

Определите происхождение JavaScript-кода: Если вы увидели, что ошибка возникает после AJAX-запроса, найдите точку, где этот запрос выполняется, и изучите ответ сервера. Возможно, в ответе содержится повреждённая или небезопасная...

Cross site forgery request (CSFR) detected

Сообщение «Cross-site forgery request (CSRF) detected» означает, что система безопасности обнаружила попытку несанкционированного межсайтового запроса (CSRF), и заблокировала его. Такие попытки обычно происходят, когда злоумышленник пытается обмануть пользователя, заставив его совершить нежелательные действия на доверенном сайте путем подделывания запроса с другого домена.

Что такое CSRF?


CSRF (cross-site request forgery) — это уязвимость веб-приложений, позволяющая злоумышленнику заставить жертву отправить вредоносный запрос к сайту, которому жертва доверяет. Например, если вы вошли на банковский сайт и открыли другую вкладку с поддельным сайтом, мошенник может попытаться заставить вас выполнить транзакцию или удалить аккаунт на доверенном сайте, используя сессионные куки жертвы.

Типичные сценарии атаки CSRF


  1. Удаление аккаунта или сброс пароля: Жертву заставляют подтвердить сброс пароля или удаление аккаунта через скрытые формы или гиперссылки.
  2. Перевод денег: Пользователь открывает
...