Html — Не корректно работает код

Содержание

Все для веб-программиста

Много полезной информации для веб-программиста. Статьи, программы, рецепты

Свежие записи

Рубрики

Метка: некорректной

Удаление некорректной или нестандартной разметки HTML

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

Воспользуйтесь расширением PHP Tidy. Это расширение при помощи популярной мощной библиотеки HTML Tidy превращает хаотичную мешанину из тегов в синтаксически корректную, соответствующую стандартам разметку HTML или XHTML. Пример показывает, как исправить некорректный файл.

В библиотеке HTML Tidy за прошедшее время были собраны многочисленные правила и функции для исправления разнообразных нарушений HTML. К счастью, чтобы пользоваться Tidy, вам не нужно знать об этих правилах. Просто передайте имя файла функции tidy_repair_file() , и вы получите исправленную версию. Допустим, файл bad.html содержит следующую разметку:

Листинг записывает в файл good.html следующую разметку:

Решение Tidy содержит множество конфигурационных параметров, влияющих на генерируемый результат. Параметры передаются tidy_repair_file() во втором аргументе, который содержит массив параметров и значений. В листинге используется параметр output-xhtml , который приказывает Tidy сгенерировать действительную разметку XHTML. Листинг Генерирование XHTML с использованием Tidy

Код записывает в good.xhtml следующий вывод:

Если источником является строка, а не файл, используйте tidy_repair_string(). Функция получает первый аргумент с разметкой HTML, а не имя файла. Исправленный код XHTML, сгенерированный Tidy, также предоставляет возможность пометки HTML без использования регулярных выражений. После того как разметка HTML будет преобразована в синтаксически корректный документ XHTML, ее можно корректно обработать и преобразовать функциями PHP DOM. В коде показано, как это делается. Разметка веб-страницы средствами Tidy и DOM

I like pickles and herring.

Тут команда preg_replace() для добавления разметки применяется ко всем текстовым узлам дерева DOM, полученного при загрузке исправленной версии входной разметки HTML в объект DOMDocument . А самое замечательное — мы можем быть уверены в том, что замена применяется только к тексту. Любая некорректная разметка HTML, которая могла бы сбить с толку регулярное выражение для поиска HTML в коде, будет исправлена Tidy до создания объекта DOMDocument. Недостаток такого решения заключается в том, что в зависимости от степе-
ни ­некорректности входной разметки HTML результат преобразования Tidy может оказаться не таким, какой вы ожидаете. Вот какой результат выдает код:

Почему не корректно работает html код

Всем добрый вечер! подскажите пожалуйста почему данный код в разных браузерах работает по разному
/***Стили для формы обратной связи****/

.contact-us a<
border:1px solid #ccc; /*цвет границы*/
background:#2674C8; /*цвет фона*/
padding:10px 20px; /*внитренние отступы*/
display:block;
text-align:center; /*выравнивание текста по центру*/
color:#fff; /*цвет текста*/
text-decoration:none; /*убрать подчёркивание у ссылки*/
width:200px; /*ширина кнопки*/
margin:auto; /*выравнивание кнопки по центру*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
>

/**Плавное появление тени у кнопки при наведении**/

.contact-us a:hover<
-moz-box-shadow: 0 0 6px #000;
-webkit-box-shadow: 0 0 6px #000;
box-shadow:0 0 6px #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
>
Одно и то же устройство только браузеры разные
почему так?

Как найти ошибку в своем коде?

Быстрые рекомендации.
1. Убедитесь, что вы видите сообщения об ошибках, если они возникают.
Для этого надо добавить в начало скрипта 2 строчки
ini_set ( ‘display_errors’ , 1 );
error_reporting ( E_ALL );
Хотя в некоторых случаях это всё равно не поможет. Тогда смотрите ошибки в логах веб-сервера.
Ещё можно добавить в файл .htaccess строчку
php_flag display_errors 1
Обязательно убрать всех собак (@) из кода!
Если апач выдаёт ошибку 500 — значит надо смотреть текст ошибки в логе ошибок веб-сервера.

2. Если возникают проблемы с функциями MySQL (например «supplied argument is not a valid MySQL result resource») — это значит, что mysql_query() выполнилась с ошибкой. Чтобы всегда быть в курсе таких ошибок, функцию mysql_query надо вызывать так:

$sql = «SELECT * FROM table» ;
$res = mysql_query ( $sql ) or trigger_error ( mysql_error (). » in » . $sql );

Если используется mysqli, то перед коннектом написать 1 строчку:
mysqli_report ( MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT );

Если используется PDO, то соединяться, как написано здесь: http://phpfaq.ru/pdo#connect

3. При работе с изображениями, чтобы увидеть сообщение об ошибке, обязательно надо догадаться отключить вывод заголовка, говорящего браузеру, что дальше идет картинка.
И, естественно, обращаться к скрипту напрямую, а не через тег !

4. При проблемах в аплоаде в первую очередь смотрите массив $_FILES ( print_r ( $_FILES ); ). Описания ошибок из $_FILES[‘filename’][‘error’] есть в мануале.

5. При проблемах во взаимодействии сервера и клиента (куки, сессии, запросы)- в обязательном порядке смотреть обмен HTTP заголовками

6. Закомментируйте строчку с header(«Location:»), если ищете обшибку в обработчике POST запроса

7. При отладке AJAX запросов смотрите ответ сервера в FireBug-e и его аналогах (кнопка F12 в любом браузере), вкладка Network — Preview.

8. И САМОЕ ВАЖНОЕ: запуская скрипт, смотрите не то, что показывает браузер, а ИСХОДНЫЙ HTML код!.

Получив сообщение об ошибке, вы можете его прочитать и исправить.
Если не справились — пишите на форум. При этом КОПИРУЙТЕ сообщение об ошибке, и КОПИРУЙТЕ небольшой — 3-5 строк — кусок кода, на который указывает ошибка. Повторяю — КОПИРУЙТЕ! никакой отсебятины!

Если вы всё равно не нашли ошибку — читайте дальше:

Введение. Очень важное.
Ты написал программу, а она не работает.
Вариантов ты видишь немного — либо сидеть и пытаться умственным усилием обнаружить ошибку, в сотый раз просматривая код, либо пойти на форум и попросить, чтобы там тебе нашли ошибку.
Самое интересное, что есть третий, в сто раз лучше первых двух.
Этот способ называется «Отладка программы». По-английски — debug.
Заключается он в том, чтобы заставить программу саму показать, где в ней ошибка.
Это мало того, что получится быстрее, чем спрашивать на стороне — так зачастую это единственный способ решить проблему. Единственный.
Я тебе сейчас открою страшный секрет. В мире НЕТ программистов, которые пишут код, как художники на Арбате — сел, наваял, отдал. Нету. И не будет.
Процесс написания программы — циклический: Написал кусок кода — посмотрел, как работает. Если не работает — ищем ошибки. Работает — пишем дальше.
Только так. Других вариантов нет.
Больше того. В большинстве случаев совершенно бесполезно вываливать на форум свой код, и спрашивать — «В чём ошибка?». На форуме не сидят волшебники вперемешку с телепатами. И гадалок с прорицателями — тоже нет. Поэтому отгадывать, в чём, теоретически, может быть ошибка, никто не будет. Ошибку найти может только хозяин программы. На своём сервере. Со своими настройками и опечатками. Поэтому локализовать ошибку — найти место, где она происходит, определить тип ошибки — можно только самостоятельно. А вот исправить её на форуме помогут. Если не получится самому.

Те, кто приходит к веб-программированию от дизайна, или от игр, или от нечего делать, просто не знают этой страшной тайны: Основное время программиста уходит не на написание кода. Основное время программиста уходит на поиск ошибок и отладку. Это не шутка. Это правда. И если вы решили заняться программированием, то вам придётся искать ошибки точно так же, как это делают все остальные.
К сожалению, очень много людей приходит к PHP вообще без опыта программирования и, как следствие — никогда не слышали об отладке.
А это и есть самое главное в программировании — умение искать ошибки.
И мы с тобой сейчас будем учиться их искать.

Программа не работает. Что можно сделать в этом случае?

Сообщения об ошибках PHP.
Самый твой большой помощник в деле отладки — это сам PHP. При возникновении любых проблем он сообщит тебе о них. То есть, в первую очередь ты должен убедиться в том, что если сообщение об ошибке есть — ты его увидишь.

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

Это чудовищные заблуждения. Сообщения об ошибках — это ПОМОЩЬ! Это громадная помощь программисту. Как ей воспользоваться, мы рассмотрим ниже.

Даже самый рабочий код, которому ты на 100% доверяешь, и который на соседней машине работает, как часы, может выдавать сообщение об ошибке. Причин тому может быть бесконечное множество. Это и такой распространенный случай, как отсутствие прав доступа к файлам, и такие экзотические, как запрещение провайдером выполнения самых распространенных и безобидных функций.

Твоя задача — обеспечить интерпретатору возможность сообщить тебе об ошибке при возникновении оной.
Ты должен быть уверен, что если выполнение программы вызывает ошибку, то ты эту ошибку увидишь.
Что интерпретатору не запрещено сообщать тебе об ошибке.
Что ты запросил все варианты вывода сообщения об ошибке.

Цукерберг рекомендует:  Помощь - Помогите!!

Во-первых, надо выяснить, выводятся ошибки на экран или пишутся в лог. Обычно, домашний, или тестовый сервер настраивается так, чтобы ошибки выводились на экран. Рабочий же сервер, с сайтом в публичном доступе ОБЯЗАТЕЛЬНО должен быть настроен так, чтобы ошибки не выводились на экран (поскольку посетителю они все равно ничего не скажут, а программист их не увидит), а писались в лог, где программист их увидит.
Если ты не уверен, и не знаешь, где посмотреть, а ошибку найти надо срочно, то напиши в самом начале скрипта две строчки
ini_set ( ‘display_errors’ , 1 );
error_reporting ( E_ALL ^ E_NOTICE );
Эти две строки заставят выводить сообщения обо всех критических ошибках на экран.
Если никаких ошибок не выведется, надо написать
error_reporting ( E_ALL );
Это очень сильно поможет, показав несуществующие переменные и другие мелкие ошибки, которые обычно игнорируются, но от которых может зависеть работоспособность программы.
ВАЖНО! В случае ошибки синтаксиса, по очевидным причинам, установка с помощью ini_set не сработает.
Поэтому лучше на неё не надеяться, а либо исправить в php.ini (или в .haccess добавить строчку php_flag display_errors 1 ), либо искать ошибку в логе.

Во-вторых, убедись, что в коде отсутствуют символы ‘@’ перед именами функций. Этот запрещает вывод сообщения об ошибке. Хорошенькое дело! Ты ошибку ищешь-ищещь, а сам же своей программе рот заткнул.

Если ты уверен, что ошибка есть, но на экран она всё равно не выводится — найди лог ошибок веб-сервера. Обычно, это файл с названием error_log. Где он находится — надо посмотреть в документации или спросить в службе поддержки провайдера.

При возникновении проблем с функциями mysql (supplied argument is not a valid MySQL result resource) под строкой, где произошла ошибка, обязательно надо вывести на экран mysql_error() и сам запрос — для визуального контроля и копирования на форум.

При работе с изображениями, чтобы увидеть сообщение об ошибке, обязательно надо догадаться отключить вывод заголовка, говорящего браузеру, что дальше идет картинка.
При аплоаде в первую очередь смотрите массив $_FILES.
При проблемах во взаимодействии сервера и клиента — в обязательном порядке смотреть обмен HTTP заголовками
И всегда смотрите не то, что показывает браузер, а ИСХОДНЫЙ HTML код!

Допустим, сообщение об ошибке появляется, и ты его получил. Что делать дальше? Очень просто — прочесть и исправить. Если не хватает знания английского языка, то стоит либо воспользоваться переводчиком, либо взять значащую часть этого сообщения и запросить Google. 90% вероятности, что кто-то с такой ошибкой уже сталкивался, и ты тут же прочтешь ответ.
Если же не нашел, то задай вопрос в форуме, точно скопировав небольшой (3-5 строк) кусок кода, в котором произошла ошибка, точно указав строку, о которой говорится в сообщении об ошибке, а так же — самое главное! — само сообщение об ошибке.
Согласись, что с такой информацией тебе на форуме помогут гораздо скорее и качественней?

Отладка и поиск ошибок в своем алгоритме.
Но бывает так, что программа не вызывает ошибок, но все равно не работает, или работает не так, как надо.
Тут уже виноват или алгоритм или какие-то внешние факторы.
Однако и тут можно найти место, где происходит ошибка.
Но только при одном условии.
что ты четко представляешь, что делает твоя программа, каждая функция, каждая строка в ней. Потому, что если ты представляешь, то можешь предсказать, какие значения должны иметь переменные на каждом этапе выполнения.
А дальше все ОЧЕНЬ просто!
Во-первых, надо разделить программу на логические блоки.
Допустим, скрипт выводит форму, получает ее, и записывает данные в базу. ТРИ шага! И в любом из них может быть ошибка, приводящая к тому, что данные в базу не записываются.
Надо проконтролировать на каждом из участков — все ли переменные имеют то значение, которое ожидается.
Программа ведь работает с переменными.
Как проверить?
Выводить все используемые переменные на экран! И визуально контролировать их содержимое.
Всего-то лишь написать проблемных местах var_dump($var) и выяснится, что переменная-то пустая!
И уже можешь пойти на форум не с вопросом «у меня вот код на 100 строк, где ошибка?», а «я написал функцию, но почему-то, когда обращаюсь в ней к переменным, они все пустые». или «из формы не передаются переменные».
Между этими двумя способами задания вопросов — пропасть.
Первый не может тебе помочь никак. Ты, собственно, и сам не знаешь, что у тебя за проблема. А при втором ты уже знаешь проблему, и, если сам не справился с ее решением, то можешь задать на форуме конкретный вопрос.

Еще очень поможет избежать ошибок в программе выставление error_reporting в E_ALL с самого начала работы скрипта.
Если при отлове критических ошибок сообщения о потенциальных ошибках могут нам помешать увидеть главную, то при разработке нам желательно видеть все — и потенциальные в том числе. Скажем, при E_ALL, при обращении к несуществующей переменной, PHP выдаст предупреждение. То есть, тебе не придется самому выводить переменную, чтобы выяснить, что ты не присвоил ей никакого значения — РНР тебя сам предупредит.

Пример отладки.
Из html формы передаются чекбоксы с именами c_1, c_1, c_3. c_10
В скрипте мы пытаемся в цикле вывести
for ( $i = 1 , $i 11 , $i ++) <
echo $_POST [ ‘с_$i’ ];
>
скрипт ничего не выводит.
Начинаем отлаживать.
Сначала смотрим в исходный код html страницы. соответствует ли она стандартам?
Допустим, соответствует. Значит, проблема не в форме.
Далее, проверяем в скрипте — а есть ли такая переменная, к которой мы обращаемся — массив $_POST?
пишем

echo ‘

‘ ;
var_dump ( $_POST );

Убеждаемся в том, что массив есть и все элементы на месте. Значит, проблема не в передаче.
Значит, мы как-то неправильно обращаемся к массиву.
обращаемся мы к нему так: $_POST[‘с_$i’]
Надо проверить — а во что превращается ‘с_$i’?
делаем echo ‘с_$i’; и видим. совсем не то, что ожидали увидеть.
И вот теперь уже идем либо читать документацию про строки в пхп (что предпочтительнее), либо — на форум, с вопросом «почему у меня переменная не заместилась своим значением». Каковой вопрос будет гораздо лучше звучать, чем «у меня форма не работает».
Понятно?

Следует понимать, что здесь приведён пример, Нереальный. Показан алгоритм действий.
В реальности, при error_reporting(E_ALL); PHP сразу же показал бы, что индекс массива у вас неправильный.

Самое важное — знать, что ты хочешь получить.
Примерно половина вопросов на форумах вызвана тем, что человек делает что-то. НЕ ЗНАЯ, что именно!
Самый гениальный вопрос всех времён и народов: «у меня база съела все переводы строк из текстарии».
Человек просто не дал себе труд посмотреть, как будет выглядеть HTML, который он хочет получить, и решил, что переводы строк съела база.
И так во всём.
Непризнанный гений строит сложный SQL запрос, а когда его спрашивают, как запрос должен выглядеть — он только хлопает глазами. ВСЕГДА СНАЧАЛА составьте запрос руками и выполните в консоли или phpmyadmin! А после того, как получили нужный запрос и отладили — милости просим, составляйте его на пхп.
Работа с удалённым хостом через сокет по протоколу HTTP — то же самое! Сначала научитесь выполнять все команды руками, посмотрите ответы сервера глазами, а потом моделируйте этот диалог в пхп.
Работа с яваскриптом по тому же методу описана в факе «на танке»

Запомните — на пхп вы работаете только со СТРОКАМИ! HTML страница, которую вы создаёте скриптом — это для пхп всего лишь набор строк! Ему без разницы, что в этом наборе — теги img, script или frame. Пхп за вас не сделает переводы строк, не нарисует яваскрипт. Если вы не знаете яваскрипта — то не пытайтесь создавать программу на нём с помощью PHP.
Открывая соединение с удалённым хостом, вы посылаете строку в сокет, вы получаете строку из сокета. Пхп ничего не понимает в этих строках и за вас диалог вести не будет! Это ВЫ должны чётко понимать, что вы хотите послать в сокет, и что получить! Поэтому возьмите программу telnet, соединитесь с нужным хостом и пробуйте сначала САМИ сделать то, что хотите заставить сделать пхп.
Если у вас не работает скрипт с сокетами — бегом в телнет смотреть, что происходит!
SQL запрос — это СТРОКА. Вы должны себе чётко представлять, какой запрос получится в результате вашего хитроумного пхп-кода! Сервер БД не понимает конструкций intval, date, mktime и так далее! Это всё пхп-код. Результатом которого будет являться строка корректного SQL запроса. прежде, чем писать пхп код, вы должны ЧЁТКО СЕБЕ ПРЕДСТАВЛЯТЬ, КАК ДОЛЖЕН ВЫГЛЯДЕТЬ SQL ЗАПРОС В РЕЗУЛЬТАТЕ!
Если у вас не выполняется SQL запрос 0 выводите его на экран и смотрите — что нагородили своим скриптом!

Заключение.
Отладка — главное занятие программиста.
Отладка — единственный и самый мощный способ найти ошибку в программе.
Отладка состоит из двух основных компонентов:
1. Максимально упрощать пример. Если у вас не работает программа, которая рисует форму,получает данные, записывает данные формы в базу и выводит их снова, то разбейте программу на составляющие и выполняйте по очереди.
Если у вас не работает сложная подпрограмма определения работоспособности кук — напишите сначала тест в две строчки чтобы убедиться, что вы хотя бы можете выставлять и читать куку.
2. Вывод отладочной информации.
Проверяйте значение КАЖДОЙ переменной! Каждого значения, возвращаемого функцией!
Не работает локейшен? Выведите его на экран и скопируйте в браузер!
В файл записывается пустая строка? проверяйте составляющие этой строки на каждом этапе ее создания и выводите на экран!
Убедились, что на экран выводится? Тренируйтесь писать в файл, на тестовой строке! Забитой прямо в скрипт! Уменьшайте количество неизвестных!
И всегда смотрите не то, что показывает браузер, а ИСХОДНЫЙ HTML код!

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

Цукерберг рекомендует:  Вакансии Murano Software

Кодировка HTML-страницы

Это задание архивной главы. Перейдите по ссылке, чтобы пройти задание в актуальной главе.

Кодировку HTML-страницы нужно указывать для того, чтобы веб-браузер мог правильно отображать текст на странице. Если браузер неправильно угадает кодировку, то вместо текста будут отображаться иероглифы.

Чтобы сообщить браузеру кодировку HTML-страницы, необходимо внутри тега использовать тег:

Самая распространённая современная кодировка — utf-8 . Используйте её во всех своих проектах.

Для кириллицы в Windows charset часто задавали как windows-1251 . Но сейчас это считается плохой практикой.

  • index.html Сплит-режим
  • style.css Сплит-режим

Кодировка

Когда кодировка документа задана неверно, некоторые символы отображаются как «иероглифы», а некоторые нет.

Урок 113. Validator.w3.org | Проверка HTML кода на валидность

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

Одним из таких сервисов является валидатор validator.w3.org, он же, наверное, и самый лучший. Он полностью на английском, поэтому у некоторых могут возникнуть проблемы при работе, но Вы не пугайтесь: валидатор покажет Вам и номер строки, и саму ошибку.

Валидный код – это код, соответствующий всем стандартам.

Для урока Вам понадобиться следующий материал:

Проверка HTML кода на валидность

Вышеупомянутый онлайн-сервис проводит проверку HTML кода онлайн на всем сайте целиком. Вам нужно просто указать домен своего сайта и нажать кнопку “Check”, так Вы запустите проверку HTML-кода сайта.

Также валидатор предоставляет одну очень интересную возможность – проверка файлов сайта с локального компьютера. На мой взгляд, этот инструмент пригодится тем, кто делает сайты на заказ. Перед сдачей заказа нужно все перепроверить, ведь хочется, чтобы твоей работой были всегда были довольны. Проверить файлы можно перейдя на вкладку “Validate by File Upload”:

Как исправить ошибки в HTML-коде?

Сервис Validator W3c указал мне на две ошибки и сделал 8 предупреждений. Попробую их исправить и за одно покажу Вам как это делается.

Исправляем ошибку “Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)”. Эта ошибка говорит мне о том, что в HTML-коде, а именно в теге

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

Далее я проделываю следующее:

  1. Копирую выделенную желтым цветом кусочек кода в валидаторе W3c;
  2. Открываю исходный код страницы в браузере. Сделать это можно щелкнув правой кнопкой мыши на странице сайта и выбрав пункт “Посмотреть исходный текст” (для браузера Opera): Исходный код откроется в новой вкладке.
  3. Выполняю поиск по странице (CTRL+F) и вставляю в поисковую строку, скопированный в валидаторе, кусочек кода: Вот и показались те самые стили в блоке

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

Проверка CSS кода на валидность

В валидаторе W3c также можно проверить CSS-код на валидность. Сделать это можно по этой ссылке. Принцип работы все тот же: указываете URL-сайта, либо выбираете файл на компьютере и нажимаете на кнопку “Проверить”.

В отличии от того же валидатора HTML, валидатор CSS на русском.

Ошибки и предупреждения CSS

При проверке CSS кода на валидность, сервис выдает большое количество ошибок и предупреждений. У меня набралось 23 ошибки и аж 281 предупреждение. На первый взгляд может показаться, что это очень много и может даже напугать, однако большинство из указанных ошибок и предупреждений показываются только из-за того, что сервис не знает определенных свойств, которые применяются для разных браузеров.

В моем случае, большинство предупреждений из 281 – это CSS-свойства для нормального отображения в различных браузерах:

Сервис позиционирует подобные теги, как “неизвестное расширение поставщика”. Поэтому если при проверке своих CSS-файлов, Вы видите большое количество таких ошибок, то не пугайтесь. Все нормально.

Перечислять наиболее распространенные ошибки и способы их устранения я не буду, так как решения у всех могут быть разными и нужно смотреть сам HTML-код, чтобы понять в чем дело.

Если Вы не можете устранить какую-то ошибку, то делитесь проблемой в комментариях к уроку, быть может найдем решение вместе.

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

HTML Ошибки — причина плохих позиций и даже бана

Мне известен уже не один случай, когда из-за ошибок HTML кода сайты теряли свои позиции в поиске, а в некоторых даже оказывались под АГС (фильтрами яндекса) и даже в бане. Конечно ошибки ошибкам рознь и некоторые из них нисколько не влияют ни на индексацию ни на позиции сайта. В этой статье мы рассмотрим самые опасные ошибки в коде страниц, которых следует стараться избегать, во избежание санкций поисковиков.

Самые опасные HTML ошибки в коде

Одна или несколько HTML ошибок могут затруднить индексацию и правильное ранжирование для определения релевантности содержимого страницы какому-либо запросу, а обилие их на всех страницах сайта сигнализирует поисковым системам о плохом качестве сайта.
Самым опасным является допущение грубых html ошибок, таких как:

Незакрытые HTML теги — грубая ошибка

Самая опасная ошибка. И чем выше этот не закрытый тег находится в коде страницы тем она опаснее.
Знаю случаи когда не закрытый тег LINK или META в секции HEAD понижал позиции по запросам (вернее даже не понижал, а исключал ибо страницу нельзя было найти даже в пределах 100 страниц результатов поиска).
В другом случае из-за неправильно продекларированного doctype не закрытыми оказались все теги в секции HEAD и некоторые на странице, что в конечном результате привело к бану сайта в яндексе.

Незакрытый тег NOINDEX — менее опасная ошибка

Любителям закрывать этим тегом (кстати он не валиден) содержимое страниц нужно очень внимательно к ним относиться. Поскольку оставив хоть один из них не закрытым вы запретите к индексации все содержимое вплоть до следующего закрывающего тега noindex, а если его не будет, то всю страницу от открывающего тега и до конца.

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

Неопасные HTML ошибки

Конечно страница с большим количеством ошибок это не хорошо в любом случае, они могут влиять на ее неправильное отображение в браузерах пользователей, а что касается поисковиков некоторые из них, такие как неизвестные элементы и параметры некоторых скриптов или неправильное расположение элементов, например если блочный элемент (P) будет находиться в строчном SPAN, не будут представлять ни какой опасности.

Как проверить ошибки в HTML коде сайта (валидность)

Для проверки HTML кода на наличие ошибок есть одно единственное и самое надежное средство: Валидатор кода. С его помощью вы можете проверить ошибки в HTML коде страниц сайта, не только введя в форму их URL но и просто вставив текстовый вариант кода исходника страницы.

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

Проблемы с кодировкой на сайте

Одной из самых частых проблем, с которой сталкивается начинающий Web-мастер (да и не только начинающие), это проблемы с кодировкой на сайте. Даже у меня постоянно появляется при создании сайтов «абракадабра«. Но, благо, я прекрасно знаю, как эту проблему решить, поэтому всё привожу в порядок в течение нескольких секунд. И в этой статье я постараюсь научить Вас также быстро решать проблемы, связанные с кодировкой на сайте.

Первое, что стоит отметить, это то, что все проблемы с появлением «абракадабры» связаны с несовпадением кодировки документа и кодировки, выставляемой браузером. Допустим, документ в windows-1251, а браузер почему-то выставляет UTF-8. А уже источником такого несовпадения могут быть следующие причины.

Первая причина

Неправильно прописан мета-тег content-type. Будьте внимательны, в нём всегда должна находиться та кодировка, в котором написан Ваш документ.

Вторая причина

Вроде бы, мета-тег прописан так, как Вы хотите, и браузер выставляет именно то, что Вы хотите, но почему-то всё равно с кодировкой проблемы. Здесь, почти наверняка, виновато то, что сам документ имеет отличную кодировку. Если Вы работаете в Notepad++, то внизу справа есть название кодировки текущего документа (например, ANSI). Если Вы ставите в мета-теге UTF-8, а сам документ написан в ANSI, то сделайте преобразование в UTF-8 (через меню «Кодировки» и пункт «Преобразовать в UTF-8 без BOM«).

Третья причина

Мета-тег написан правильно, кодировка документа верная, но браузер почему-то настойчиво выбирает другую кодировку. Это уже связано с настройками сервера. Способ решения данной проблемы можно прочитать здесь: как задать кодировку в htaccess.

Четвёртая причина

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

Вместо «utf8» может стоять другая кодировка. После этого все данные из базы должны выходить в правильной кодировке.

В данной статье я, надеюсь, разобрал, как минимум, 90% проблем, связанных с появлением «абракадабры» на сайте. Теперь Вы должны расправляться с такой популярной и простой проблемой, как неправильная кодировка, в два счёта.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Цукерберг рекомендует:  Короткие ссылки - Посоветуйте массовый генератор коротких ссылок

    Комментарии ( 32 ):

    Помогите пожалуйста мне. Я делаю чат и все сообщения заносятся в файл log.html. но при выводе они становятся кракозябрами(русские буквы, а с английскими всё нормально). Что мне делать

    Всё исправил но непонятно как. надо было обработчик и файл с сообщениями поставить в кодировку utf-8 а всё остальное оставить в кодировке windows-1251. И как он вообще работает. Интересно

    поменяй все на юникод тогда будет работать или своем браузере поменяй кодировку

    Здравствуйте Михаил! Проблема такая: в файле html кодировка написана так: , в проге нотпад++ стоит галочка UTF-8 без БOМ, при написание заголовка русские буквы видит коряво а англ норма, ставлю просто утф 8 все нормально! а рекомендуется делать без бoм! В чем проблема и как ее решить. Спасибо!

    Спасибо Михаил))я разобрался со своей проблемой))спасибо)Удачи)

    У меня почему то с UTF 8 без BoM не работает, а с обычным Utf 8 прекрасно, чем они отличаются кто нить может объяснить?

    Они ничем не отличаются кроме того, что с BOM в начало файла добавляются невидимые символы, которые могут помешать в работе с php

    А что если заголовок (title) в кодировке без BOM отображается не корректно. Вы как это исправили, Михаил?

    Такого быть не должно. utf-8 без bom это практически та же кодировка.

    Обычная UTF-8 оставляет отметку которая указывает что файл записан в кодировке UTF-8, но как сказал выше Михаил это может помешать работе PHP. То что браузер без этой пометки не может определить кодировку файла ваша ошибка, убедитесь что вы корректно написали

    Михаил не один из выше перечисленных способов не подошёл, Помогите пожалуйста зарегистрировался на hostia и не могу там разобраться с кодировкой, вроде бы всё сделал правильно да и на локальном сервере работает и на других бесплатных хостингах тоже, а вот на hostia ерунда какая-то, и самое главное что кодировка нарушается только для тех страниц которые вывожу через БД.

    В самой базе может стоять другая кодировка.

    Михаил, у меня такая проблема ! Все что выводится из базы, нормально отображается. Но все, остальное идет иероглифами. Кодировка в мата-теге utf-8 в нотпаде тоже менял на utf-8 без бум, все равно не помогает. В чем может быть причина.

    А на сервере какая прописана проверили?

    И кстати у меня почему то документы css не работают.Вообще не могу поменять ни цвет текста ни цвет самого фона

    http://myrusakov.ru/kak-zadat-css-stil.html и используйте Firebug.

    привет,почему проблемы с кодировкой на хостинге,а на локальном сервере все нормально?.на сайте стоит кодировка utf8.есть файл htaccess.

    Напишите хостеру, возможно, он поможет. Быть может, он запретил использовать AddDefaultCharset.

    прописал эту строчку в конфигурационном файле и все норм.mysql_query («SET NAMES ‘utf8′»);

    Михаил, здравствуйте. У меня была проблема с кодировкой вывода текста из php скрипта. Мне удалось решить проблему лишь путем явного указания внутренней кодировки mb_internal_encoding(«UTF-8»); В перечисленных Вами способах, данный не указан. Вопрос: можно ли обойтись без явного указания ? //mb_internal_encoding(«UTF-8»);

    Если использовать строковые функции, то без указания кодировки не обойтись.

    Почему не работает css

    Ссылка на файл

    Код CSS может находиться как в HTML документа, так и в отдельном файле с одноименным расширением. Если CSS находится во внешнем файле и не работает, то первым делом следует проверить ссылку в HTML коде.

    Ссылка (href) должна писаться в одиночном теге link. Содержимое link в HTML5 должно выглядеть следующим образом: href=”style.css” rel=”stylesheet”. Не забывайте, что сам тег link располагается между парными ключевыми тегами head.

    После значения href указывается имя того css-файла, который должен быть прикреплен к документу (это не обязательно style). Если файл со стилями находится в другой папке, то обязательно через слэш (/) необходимо указать путь к нему.

    Синтаксис CSS

    Если со ссылкой все в порядке, а CSS все равно не работает, нужно проверить синтаксис в коде.

    Во-первых, проверьте селектор. Селектор должен совпадать с тем, что у вас написано в html-файле. То есть, если в html выбран >
    Сам блок, где объявляется стиль, пишется после имени селектора в фигурных скобках. Между названием свойства и его значением ставится двоеточие, а после — точка с запятой.

    Браузер

    Если браузер, на котором вы проверяете свой css-код, уже устарел, то он не в состоянии корректно отображать язык CSS3. Поэтому в случае, если код не работает, обновите свой браузер до последней версии.

    Используйте для тестирования разные браузеры: Opera, Google Chrome, Firefox. Не рекомендуется полагаться на Internet Explorer, так как его разработка для Microsoft не является главной задачей, что приводит к его «несостоятельности» по отношению к CSS3.

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

    Наследование

    Сложнее всего разбираться в CSS с наследованием. В то время, как она чаще всего и является основой нерабочего кода.

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

    Сначала логически постарайтесь выявить, где именно происходит ошибка в css-коде. Вы легко это поймете, т.к. в результате ошибки один из элементов при отображении в браузере будет выпадать из представленной вами картины.

    Когда вы найдете контейнер или другой элемент, к которому применен не сработавший стиль, внимательно посмотрите, во что «вложен» этот элемент.

    Возможно, родительский элемент содержит свойство, которое не дает работать другому свойству в дочернем элементе. Подробнее о наследовании можно почитать в любом справочнике по CSS.

    (050)750-00-02

    г. Харьков, ул.Плехановская 2/5

    Типичные ошибки при написании HTML и CSS кода

    Часто начинающие веб-разработчики сталкиваются с тем, что не могут добиться желаемого результата от применения CSS стилей, что влечет за собой долгое отслеживание ошибок в коде или же отказ от тех или иных CSS свойств. Эта статья призвана сэкономить время на отладку кода, приводя в пример распространенные ошибки, совершаемые при использовании связки HTML и CSS. Чтобы досконально изучить науку создания сайтов обратитесь на курсы front end в Харькове.

    Использование редактора кода

    Редактор кода – это программа, понимающая синтаксис языка, на котором пишет программист. Такая программа способна предугадывать вводимые конструкции языка и дополнять их до завершенного вида. Например, вводя открывающий HTML тэг, редактор кода, тут же вставит закрывающий тэг, и программист уже не забудет его закрыть. Разработчику останется лишь ввести содержимое между открывающим и закрывающим тэгом. Популярные редакторы (SublimeText 3, Notepad++) поддерживают множество языков. Программируя на PHP в код-редакторе, у разработчика отпадает надобность ставить закрывающие кавычки, скобки. Программа сама подставит нужный символ. Это поможет избежать долгого и утомительного поиска незакрытой скобки или кавычки среди сотен строк кода. Более того, редакторы подсвечивают разным цветом сам код и комментарии к нему, что помогает визуально найти границу и не закомментировать часть кода.

    Не забывайте про кэширование

    Совсем новички могут и не подозревать, что браузер может заносить в кэш таблицы стилей. В процессе разработки в таблицу стилей вносятся десятки, а то и сотни изменений. И на каком-то этапе, может создаться впечатление, что браузер перестал реагировать на эти изменения и все время отображает одно и то же состояние страницы, несмотря на попытку ее обновить. Вполне возможно, что браузер занес в память более раннее состояние таблицы стилей и все время руководствуется именно ей, игнорируя внесенные разработчиком изменения. Чтобы исключить такое поведение браузера, при написании CSS стилей открывайте веб-страницы в приватных окнах, или используйте перезагрузку страницы с очисткой кэша. В большинстве браузеров перезагрузка страницы с очисткой кэша называется актуализацией и запускается одним из сочетаний горячих кнопок Ctrl + F5 или Ctrl + R.

    Поддержка браузерами разных версий языков

    Языки программирования не всегда были такими, какими их застает разработчик в момент использования. Исполнение кода на языке, созданном буквально вчера, вероятно повлечет массу неточностей и ошибок. Поэтому, с течением времени в языки вносятся поправки. Какие-то функции убираются и признаются устаревшими, а какие-то добавляются. Естественно, чтобы код корректно работал в конкретном браузере, необходимо убедиться в том, что браузер поддерживает ту версию языка, которую использует программист. Например, в HTML версии 5 появились такие типы элементов как header, nav, footer. В HTML версии 4 таких элементов нет. Соответственно, если разработчик использует все преимущества HTML5, но проверяет разметку в старом браузере с поддержкой HTML4 – результат будет плачевным.

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

    Кодировка HTML-страницы

    Это задание архивной главы. Перейдите по ссылке, чтобы пройти задание в актуальной главе.

    Кодировку HTML-страницы нужно указывать для того, чтобы веб-браузер мог правильно отображать текст на странице. Если браузер неправильно угадает кодировку, то вместо текста будут отображаться иероглифы.

    Чтобы сообщить браузеру кодировку HTML-страницы, необходимо внутри тега использовать тег:

    Самая распространённая современная кодировка — utf-8 . Используйте её во всех своих проектах.

    Для кириллицы в Windows charset часто задавали как windows-1251 . Но сейчас это считается плохой практикой.

    Без JavaScript будущему разработчику никуда. Записывайтесь на профессиональный курс по JavaScript первого уровня, проходящий c 17 января по 23 марта 2020. До 26 ноября цена 20 900 21 900

    • index.html Сплит-режим
    • style.css Сплит-режим

    Кодировка

    Когда кодировка документа задана неверно, некоторые символы отображаются как «иероглифы», а некоторые нет.

    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих