Html — Помогите найти ошибку


Содержание
Цукерберг рекомендует:  Полно-экранное изображение и навигация

Необходимо найти ошибку в коде html/css

Всем добрый день.
Столкнулся с такой проблемой: есть сайт, на нем есть ссылки на разные страницы, когда я сжимаю размер окна и появляется ползунок, то появляется непонятный «пробел» (см. скрин «1»), при этом появляется не на всех страницах сайта. Когда я увеличиваю ширину окна, непонятный «пробел» (см. скрин «2») пропадает вместе с ползунком (ползунка нет = непонятного пробела тоже).
К сожалению я не могу понять, где искать проблему и что это может быть, чтобы исправить.

Не стал заливать весь код и html и css сюда, т.к это очень громоздко. Я с радостью залью сюда кусок кода, если пойму какой именно кусок нужно залить из html или css.

10.06.2020, 13:03

Необходимо найти макет сайта на html/css
Прошу помочь. Учитель задал найти в интернете какой-нибудь макет написанным с помощью HTML и CSS.

Необходимо отредактировать шаблон. CSS/HTML
Доброго, времени суток. Такая проблема — редактировал зарубежный шаблон, наткнулся на проблему.

Необходимо исправить ошибку в подключении css-стилей
Всем добрый вечер. Постараюсь как то объяснить проблемку. И так CSS на главной странице, в.

Валидатор выдает ошибку в html коде
Помогите не проходит html код пишет * You forgot to close a tag, or * you used something.

10.06.2020, 13:24 2 10.06.2020, 13:28 [ТС] 3 Вложения
finish my.zip (881.2 Кб, 5 просмотров)
10.06.2020, 13:47 4
10.06.2020, 13:47
10.06.2020, 14:10 5
10.06.2020, 14:46 [ТС] 6

Дело в том, что это одна и та же страница. Просто окно браузера на первом скрине меньше, на втором больше.

10.06.2020, 14:55 7
10.06.2020, 16:15 [ТС] 8

Попробовал поставить все 3 блока в строчку, получилось следующее:
1) Для nav, section, aside — задал display:inline-block.
2) Если ставлю ширину 15/70/15 соотв. (что в сумме 100), то блок aside просто съезжает на след. строчку.
3) Если ставлю ширину например 15/68/15 соотв., то блок aside не съезжает на след. строчку в большом окне, но если окно сужается, то съезжает.
4) Если ставлю ширину например 15/65/15 соотв., то блок aside не съезжает вобще, но после блока aside пустое пространство.
5) Так же появилась проблема с высотой теперь, боковые блоки nav и aside не растягиваются по высоте среднего блока section.
6) font-size 0 для родителя инлайн-блочных элементов (в данном случае — article) просто меняет размер текста на 0 (но проблему не решает никак, по моим наблюдениям)

Как искать и исправлять ошибки в коде

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

Шаг 1: Занесите ошибку в трекер

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

  1. Вы забыли какую-то важную деталь об ошибке, например, в чем она заключалась.
  2. Вы могли делегировать ее кому-то более опытному.

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

Вы должны записать в трекер следующую информацию:

  1. Что делал пользователь.
  2. Что он ожидал увидеть.
  3. Что случилось на самом деле.

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

Шаг 2: Поищите сообщение об ошибке в сети

Если у вас есть сообщение об ошибке, то вам повезло. Или оно будет достаточно информативным, чтобы вы поняли, где и в чем заключается ошибка, или у вас будет готовый запрос для поиска в сети. Не повезло? Тогда переходите к следующему шагу.

Шаг 3: Найдите строку, в которой проявляется ошибка

Если ошибка вызывает падение программы, попробуйте запустить её в IDE под отладчиком и посмотрите, на какой строчке кода она остановится. Совершенно необязательно, что ошибка будет именно в этой строке (см. следующий шаг), но, по крайней мере, это может дать вам информацию о природе бага.

Шаг 4: Найдите точную строку, в которой появилась ошибка

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

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

Шаг 5: Выясните природу ошибки

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

  1. Ошибка на единицу
    Вы начали цикл for с единицы вместо нуля или наоборот. Или, например, подумали, что метод .count() или .length() вернул индекс последнего элемента. Проверьте документацию к языку, чтобы убедиться, что нумерация массивов начинается с нуля или с единицы. Эта ошибка иногда проявляется в виде исключения Index out of range .
  2. Состояние гонки
    Ваш процесс или поток пытается использовать результат выполнения дочернего до того, как тот завершил свою работу. Ищите использование sleep() в коде. Возможно, на мощной машине дочерний поток выполняется за миллисекунду, а на менее производительной системе происходят задержки. Используйте правильные способы синхронизации многопоточного кода: мьютексы, семафоры, события и т. д.
  3. Неправильные настройки или константы
    Проверьте ваши конфигурационные файлы и константы. Я однажды потратил ужасные 16 часов, пытаясь понять, почему корзина на сайте с покупками виснет на стадии отправки заказа. Причина оказалась в неправильном значении в /etc/hosts , которое не позволяло приложению найти ip-адрес почтового сервера, что вызывало бесконечный цикл в попытке отправить счет заказчику.
  4. Неожиданный null
    Бьюсь об заклад, вы не раз получали ошибку с неинициализированной переменной. Убедитесь, что вы проверяете ссылки на null , особенно при обращении к свойствам по цепочке. Также проверьте случаи, когда возвращаемое из базы данных значение NULL представлено особым типом.
  5. Некорректные входные данные
    Вы проверяете вводимые данные? Вы точно не пытаетесь провести арифметические операции с введенными пользователем строками?
  6. Присваивание вместо сравнения
    Убедитесь, что вы не написали = вместо == , особенно в C-подобных языках.
  7. Ошибка округления
    Это случается, когда вы используете целое вместо Decimal , или float для денежных сумм, или слишком короткое целое (например, пытаетесь записать число большее, чем 2147483647, в 32-битное целое). Кроме того, может случиться так, что ошибка округления проявляется не сразу, а накапливается со временем (т. н. Эффект бабочки).
  8. Переполнение буфера и выход за пределы массива
    Проблема номер один в компьютерной безопасности. Вы выделяете память меньшего объема, чем записываемые туда данные. Или пытаетесь обратиться к элементу за пределами массива.
  9. Программисты не умеют считать
    Вы используете некорректную формулу. Проверьте, что вы не используете целочисленное деление вместо взятия остатка, или знаете, как перевести рациональную дробь в десятичную и т. д.
  10. Конкатенация строки и числа
    Вы ожидаете конкатенации двух строк, но одно из значений — число, и компилятор пытается произвести арифметические вычисления. Попробуйте явно приводить каждое значение к строке.
  11. 33 символа в varchar(32)
    Проверяйте данные, передаваемые в INSERT , на совпадение типов. Некоторые БД выбрасывают исключения (как и должны делать), некоторые просто обрезают строку (как MySQL). Недавно я столкнулся с такой ошибкой: программист забыл убрать кавычки из строки перед вставкой в базу данных, и длина строки превысила допустимую как раз на два символа. На поиск бага ушло много времени, потому что заметить две маленькие кавычки было сложно.
  12. Некорректное состояние
    Вы пытаетесь выполнить запрос при закрытом соединении или пытаетесь вставить запись в таблицу прежде, чем обновили таблицы, от которых она зависит.
  13. Особенности вашей системы, которых нет у пользователя
    Например: в тестовой БД между ID заказа и адресом отношение 1:1, и вы программировали, исходя из этого предположения. Но в работе выясняется, что заказы могут отправляться на один и тот же адрес, и, таким образом, у вас отношение 1:многим.

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

Шаг 6: Метод исключения

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

Попробуйте отключать компоненты системы один за другим, пока не найдете минимальную конфигурацию, которая будет работать. Затем подключайте их обратно по одному, пока ошибка не вернется. Таким образом вы вернетесь на шаг 3.

Шаг 7: Логгируйте все подряд и анализируйте журнал

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

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

Шаг 8: Исключите влияние железа или платформы

Замените оперативную память, жесткие диски, поменяйте сервер или рабочую станцию. Установите обновления, удалите обновления. Если ошибка пропадет, то причиной было железо, ОС или среда. Вы можете по желанию попробовать этот шаг раньше, так как неполадки в железе часто маскируют ошибки в ПО.

Если ваша программа работает по сети, проверьте свитч, замените кабель или запустите программу в другой сети.

Ради интереса, переключите кабель питания в другую розетку или к другому ИБП. Безумно? Почему бы не попробовать?

Если у вас возникает одна и та же ошибка вне зависимости от среды, то она в вашем коде.

Шаг 9: Обратите внимание на совпадения

  1. Ошибка появляется всегда в одно и то же время? Проверьте задачи, выполняющиеся по расписанию.
  2. Ошибка всегда проявляется вместе с чем-то еще, насколько абсурдной ни была бы эта связь? Обращайте внимание на каждую деталь. На каждую. Например, проявляется ли ошибка, когда включен кондиционер? Возможно, из-за этого падает напряжение в сети, что вызывает странные эффекты в железе.
  3. Есть ли что-то общее у пользователей программы, даже не связанное с ПО? Например, географическое положение (так был найден легендарный баг с письмом за 500 миль).
  4. Ошибка проявляется, когда другой процесс забирает достаточно большое количество памяти или ресурсов процессора? (Я однажды нашел в этом причину раздражающей проблемы «no trusted connection» с SQL-сервером).

Шаг 10: Обратитесь в техподдержку


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

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

Полезные советы (когда ничего не помогает)

  1. Позовите кого-нибудь еще.
    Попросите коллегу поискать ошибку вместе с вами. Возможно, он заметит что-то, что вы упустили. Это можно сделать на любом этапе.
  2. Внимательно просмотрите код.
    Я часто нахожу ошибку, просто спокойно просматривая код с начала и прокручивая его в голове.
  3. Рассмотрите случаи, когда код работает, и сравните их с неработающими.
    Недавно я обнаружил ошибку, заключавшуюся в том, что когда вводимые данные в XML-формате содержали строку xsi:type=’xs:string’ , все ломалось, но если этой строки не было, все работало корректно. Оказалось, что дополнительный атрибут ломал механизм десериализации.
  4. Идите спать.
    Не бойтесь идти домой до того, как исправите ошибку. Ваши способности обратно пропорциональны вашей усталости. Вы просто потратите время и измотаете себя.
  5. Сделайте творческий перерыв.
    Творческий перерыв — это когда вы отвлекаетесь от задачи и переключаете внимание на другие вещи. Вы, возможно, замечали, что лучшие идеи приходят в голову в душе или по пути домой. Смена контекста иногда помогает. Сходите пообедать, посмотрите фильм, полистайте интернет или займитесь другой проблемой.
  6. Закройте глаза на некоторые симптомы и сообщения и попробуйте сначала.
    Некоторые баги могут влиять друг на друга. Драйвер для dial-up соединения в Windows 95 мог сообщать, что канал занят, при том что вы могли отчетливо слышать звук соединяющегося модема. Если вам приходится держать в голове слишком много симптомов, попробуйте сконцентрироваться только на одном. Исправьте или найдите его причину и переходите к следующему.
  7. Поиграйте в доктора Хауса (только без Викодина).
    Соберите всех коллег, ходите по кабинету с тростью, пишите симптомы на доске и бросайте язвительные комментарии. Раз это работает в сериалах, почему бы не попробовать?

Что вам точно не поможет

  1. Паника
    Не надо сразу палить из пушки по воробьям. Некоторые менеджеры начинают паниковать и сразу откатываться, перезагружать сервера и т. п. в надежде, что что-нибудь из этого исправит проблему. Это никогда не работает. Кроме того, это создает еще больше хаоса и увеличивает время, необходимое для поиска ошибки. Делайте только один шаг за раз. Изучите результат. Обдумайте его, а затем переходите к следующей гипотезе.
  2. «Хелп, плиииз!»
    Когда вы обращаетесь на форум за советом, вы как минимум должны уже выполнить шаг 3. Никто не захочет или не сможет вам помочь, если вы не предоставите подробное описание проблемы, включая информацию об ОС, железе и участок проблемного кода. Создавайте тему только тогда, когда можете все подробно описать, и придумайте информативное название для нее.
  3. Переход на личности
    Если вы думаете, что в ошибке виноват кто-то другой, постарайтесь по крайней мере говорить с ним вежливо. Оскорбления, крики и паника не помогут человеку решить проблему. Даже если у вас в команде не в почете демократия, крики и применение грубой силы не заставят исправления магическим образом появиться.

Ошибка, которую я недавно исправил

Это была загадочная проблема с дублирующимися именами генерируемых файлов. Дальнейшая проверка показала, что у файлов различное содержание. Это было странно, поскольку имена файлов включали дату и время создания в формате yyMMddhhmmss . Шаг 9, совпадения: первый файл был создан в полпятого утра, дубликат генерировался в полпятого вечера того же дня. Совпадение? Нет, поскольку hh в строке формата — это 12-часовой формат времени. Вот оно что! Поменял формат на yyMMddHHmmss , и ошибка исчезла.

10 распространенных ошибок в HTML коде, которые мешают успешной валидации

Дизайнеры тратят часы на оттачивание мастерства для тщательной подгонки мельчайших деталей в дизайне веб сайтов, которые выходят из-под их пера. Однако качество кода очень часто остается весьма низким. Вам нужны доказательства? Посмотрите галереи бесплатных шаблонов CSS. 90% шаблонов не пройдут проверку. Причем, основная часть ошибок является весьма примитивными и их очень легко исправить. В данном уроке рассмотрим типовые ошибки в коде HTML, которые мешают успешному завершению проверки.

Зачем проверять код?

Если сайт выглядит отлично в браузере, то зачем проверять код? Типичный вопрос, который задается перед проверкой кода. Но ведь сайт не ограничивается только тем, что видно пользователю. Страницы HTML предназначены для представления данных, а не графических эффектов. Данные должны быть доступными для чтения для всего огромного сообщества людей, которое использует интернет. И читатели могут использовать совсем другие технологии для получения информации, представленной на вашем сайте — например, они могут использовать программу для воспроизведения данных голосом и просто слушать, что написано на вашей странице.

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

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

Общие ошибки

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

Не указан тип документа

Самая плохая ошибка — не использовать Doctype! Отсутствие тега Doctype означает, что браузер будет «догадываться», какой язык использовался для создания документа. Для исправления ошибки нужно указать тип документа вашей страницы.

Не закрыт элемент

» src=»https://ruseller.com/lessons/les812/img_812_3.png» alt=»Не закрыт элемент

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

Опускается символ / в самозакрывающихся элементах

Большинство элементов HTML имеет отдельные закрывающие теги, например:

Не произведена конвертация специальных символов

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

Неконвертированные символы в URL

В соответствии с предыдущим пунктом, специальные символы, особенно амперсанд, должны быть кодированы в строках URL. Ссылки на сайты, построенные с использованием PHP, часто содержат переменные с использованием символа & , их нужно писать с использованием кода HTML & .

Блочные элементы внутри строчных

Одно из основных правил HTML заключается в том, что блочные элементы НИКОГДА не должны находиться внутри строчных элементов.

Популярный пример ошибки — использование ссылки в заголовке:

bananas

— блочный элемент, поэтому он должен оборачиваться вокруг ссылки (строчный элемент):

bananas

Отсутствует атрибут alt у изображения

Каждое изображение в документе HTML должно иметь атрибут alt с описанием содержания картинки. Даже если картинка служит для дизайнерских целей, она должна иметь атрибут alt , но в данном случае его надо оставить пустым, например, alt=»» . В другом случае нужно представить описание содержание изображения.

Использование атрибутов подобных width и height

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

Имя класса или ID начинается с цифры

Имя класса, ID или имя атрибута не может начинаться с цифры. Они могут включать цифры, но не в начале слова.

А какова ситуация с проверкой CSS кода?

В отличие от HTML, CSS используется для визуального представления страницы. Таким образом, вопрос “Если страница выглядит хорошо, то зачем проверять код?” в данном случае звучит более убедительно. Неправильный код CSS не оказывает такого влияния на веб страницы, как неправильный код HTML. Однако проверку стоит проводить на предмет обнаружения опечаток и ошибок в коде. Если вы используете новые свойства CSS3, они сделают ваш документ не прошедшим проверку, так как еще не включены в спецификацию, но если вы уверенны, что все правильно, то на такие ошибки можно не обращать внимание.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: line25.com/articles/10-common-validation-errors-and-how-to-fix-them
Перевел: Сергей Фастунов
Урок создан: 18 Декабря 2010
Просмотров: 54812
Правила перепечатки

5 последних уроков рубрики «HTML и DHTML»

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

17 бесплатных шаблонов админок

Парочка бесплатных шаблонов панелей администрирования.

30 сайтов для скачки бесплатных шаблонов почтовых писем


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

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

15 новых сайтов для скачивания бесплатных фото

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

HTML-гуру, помогите найти ошибку на странице!

Добрый день! Имеется HTML страница. Никакого php-движка обычный HTML собирается с помощью SSI команд апача… все…
Но вот только в толк взять не могу в чем косяк и ошибка? Ошибка встречается строго в google chrome… и Opera
Под IE8 ее вроде нет.
Поэтому для эксперимента используйте Хром, плиз…
Итак, смотрим страницу
http://manual.qso.ru/works.html

Все вроде как надо… список моделей, а меню слева подсвечивается при наведении мышкой в соответствии с CSS…

Теперь возьмем и кликнем скажем на IC-7600 откроется страница
http://manual.qso.ru/works.html?ic7600
В ней пункты меню слева не будут подсвечиваться и кликаться пока текст на странице не закончится….
То есть пункты меню от ICOM до STEPPIR будут не доступны и лишь ПРОФЕССИОНАЛЬНЫЕ TX будут активны.
В чем прикол? Где ошибка-то…
Большинство моделей имеют эту ошибку за исключением скажем DMU-2000

Тут все нормально. Пункты меню слева в Хроме доступны.
В чем косяк-то? Я пересматривал HTML коды обеих страниц…. Вы тоже можете в Хроме их посмотреть.
разницы не нашел….
Буду благодарен за любой совет…

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

Привет вебмастера! Я предлагаю вам списки инструментов для профессионального создания сайтов. Это валидаторы, линкеры, программы, менеджеры и другие сервисы, которые помогут вам построить профессиональный сайт с чистым и грамотным кодом.

Разделы списка. Проверка сайта на ошибки, проверка доступности — Accessibility, проверка в разных браузерах и HTML версиях, проверка прав — Legislation, проверка ссылок — Linking, тест на время загрузки — Load Time, позиция в поисковиках — SEO, валидность и статистика запросов слов в поисковиках.

Помогите найти ошибку в html коде

Помогите найти ошибку

1 ответ 1

  1. Нет аттрибута align в данном случае. У таблицы, например. Но он есть у рисунка
  2. так же: height, background. Кроме того, числа в них должны содержать размерность, коль скоро они отличны от 0. Например: height=»357px» . А вообще, это все надо в CSS запихать
  3. У фонта нет аттрибута сайз. И вообще фонт лучше заменить , а свойства описать в CSS
  4. элемент так же надо заменять text-decoration: underline

Все это, исходя из предположения, что разметка HTML 4.01

15 ошибок или советов HTML и CSS

Ошибки и советы я написал по-своему опыту. Если найдутся ошибки типа «вредных советов», то буду рад услышать конструктивную критику. Пост предназначен для начинающих изучать HTML и CSS, но, возможно, специалистам тоже будет интересно ознакомиться с данным материалом.

1. W3C Validator

Рекомендуется проверять HTML и CSS сайта через сервис validator.w3.org. Данный сервис просканирует код и отобразит ошибки, например:

  • не закрыт тег;
  • не рекомендованные символы в ссылках;
  • используется не рекомендованный тег;
  • не указан обязательный атрибут;
  • и другое.

2. Вёрстка в формате UTF-8

При вёрстке страницы, надо убедиться, что кодировка файла установлена в UTF-8 (без BOM). Каждый текстовый редактор устанавливает кодировку по-своему.

Файл в формате UTF-8 позволяет использовать нестандартные символы (например, символы различных языков, знак валюты и другие).

Также надо сообщить браузерам, что страница открывается в кодировке UTF-8. Это делается через тег ниже:

3. Одинаковые id у нескольких элементов

Значение атрибута id в HTML-коде не должно повторяться.

4. Спрайты

Несколько маленьких картинок рекомендуется соединять в один файл (такой файл называется спрайт). Это уменьшит количество запросов на сайт и улучшит скорость загрузки страницы.

Сейчас также популярно вместо спрайтов использовать шрифты с иконками. Т.е. вместо букв выводятся иконки шестерёнки, смайлика и других иконок. В качестве примера можно привести иконки glyphicons, которые используются в Twitter Bootstrap.

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

5. Много селекторов

Не рекомендуется использовать больше трёх селекторов, т.к. это влияет на производительность сайта.

Браузеры читают CSS справа налево. Т.е. в коде выше, сначала будут выбраны все ссылки, что есть на странице, а потом будут выбраны те ссылки, которые находятся внутри элемента .item.

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

6. Стили в HTML

HTML предназначен для вывода информации (текст, картинки). Оформления контента (изменить размер, цвет, шрифт) происходит в CSS.

7. Неправильное названия классов

Многие верстальщики, когда надо сделать текст зелёным цветом, прикрепляют к нему класс .green.

Это неправильно, т.к. при смене дизайна, многие цвета могут измениться, например, текст сообщения может выводиться синим цветом вместо зелёного. Тогда придётся искать все теги, у которых есть класс .green и заменять его на .blue.

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

8. Пиксели в дробных значениях

Некоторые браузеры позволяют указывать пиксели в дробных значениях, например «1.5px». Но это неправильно, т.к. пиксель это неделимая единица. Вместо «1.5px» лучше использовать «1.5em».

9. Использование классов вместо id

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

Также не рекомендуется использовать !important, т.к. его вес выше, чем у атрибута id, и его также будет сложно переопределить.

10. Меню

Меню должно быть оформлено как список.

11. Пропущенный alt у картинок

В тегах надо указывать атрибут alt (можно пустой).

12. Теги

. В основном, в этом теге находится название страницы.

13. Транскрипция

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

14. Clearfix

Про clearfix сложно написать в двух словах, но укажу момент, которые многие верстальщики, по моему мнению, делают ошибку.


Класс .clearfix надо указывать в родительском теге, а не ставить рядом.

15. HTML — язык программирования

Читают сейчас

Похожие публикации

  • 23 ноября 2009 в 09:04

Zen coding — пишем HTML/CSS быстрее

Уровни владения HTML, CSS и Javascript: Часть 2. CSS

Уровни владения HTML, CSS и Javascript: Часть 1. HTML

Вакансии

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Комментарии 50

Как понимать фразу «HTML не предназначен для оформления», если спецификацией предусмотрен атрибут style, и он поддерживается всеми браузерами? Каким ещё должен быть HTML, чтобы оказаться «предназначенным для оформления»?

Указание стилей в атрибуте style имеет свои недостатки (дублирование кода, сложность изменения, если стиль одинаковый для разных элементов, высокий приоритет правил — не переопределяешь через стили для всей страницы), но в мелких проектах его может быть совершенно достаточно, а иногда и совершенно необходимо (например, когда элемента становится видимым после каких-то действий пользователя — тогда прописать «display: none» в style при верстке гораздо нагляднее).

В будущем возможны сложности изменения вёрстки при использовании style=»». Особенно когда над сайтом будет работать другой верстальщик. Ему будет проще делать правки в CSS, а не искать нужный код в файлах.

В стандарте не указано, что в HTML нельзя оформлять страницы, но я думаю стоит разделять вывод информации (HTML) и её оформление (CSS).

12. Теги На странице должен быть только один заголовок в теге . В основном, в этом теге находится название страницы.

Кстати html5 допускает на одной странице несколько h1 заголовков, каждый пределах «`html

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

Далее немного конструктивной критики

  • про длину селекторов и что браузеру что-то там тяжело — не в 2020 году, да и почему именно 3? Магическое число?
  • магические числа. Про них не сказано, зато примеры с ними есть. Они как 2005 были злом, так и остались. Разработчик должен понимать откуда каждое число берется
  • у иконочного шрифта есть еще одно огромнейшее преимущество: возможность перекрашивать иконки, чего нет у спрайта
  • инлайновые стили не зло. Через js их вполне можно пихать (так построены половина библиотек на react), как всегда — инструментом нужно пользоваться с умом
  • пиксели в дробных значениях что-то сверх-упоротое, не встречал такого, однако, справедливости ради, с чего вдруг пиксель — это что-то неделимое? Ныне в css виртуальный пиксель достаточно поверхностно связан с физическим и не является чем-то неделимым.
  • id и классы имеют разное предназначение и их нужно использовать так же с умом, по обстоятельствам, правила в виде «id не должно быть в css» беспочвенно.
  • Пункт 10. Это с чего вдруг? Так называемая accessibility ныне достигается иными способами, а семантика — я уже давал ссылку, где есть пример того, как должно выглядеть семантичное меню
  • Сравнение html с Word это как сравнить машинный код и visual studio. Во-первых, Word это приложение, а html — язык разметки, во-вторых, внутри docx лежит такой же xml, не так уж и далеко ушедший от html. Просто странное сравнение.

Почему-то мой комментарий значительно обрезался.
Попробую повторить:
Стили в HTML можно и нужно применять в виде тега style в заголовке для ускорения загрузки страницы, размещая в нем основные используемые классы, переместив ссылки на файлы остальных стилей в конец html-файла. Разница будет заметна прежде всего в CMS, где используется подгрузка всех стилей независимо от их наличия на конкретной странице. Тоже советует и Google Pagespeed.

Насчет пункта «неправильное название классов» — тут тоже неоднозначно, т.к. например при написании шаблона для CMS мы уже опираемся на константные значения цвета и определенное расположение элементов, которые меняться не будут. Использование в классе понятных имен типа цвета или расположения значительно ускоряет процесс написания и читаемости разметки, с последним например согласен Bootstrap, предоставляя нам набор готовых классов для размещения элементов.

В целом статья кажется незавершенной без комментариев автора относительно тех или иных утверждений, например, почему нужно обязательно использовать атрибут alt в тэгах img, или почему меню должно быть написано с использованием ul/li?

обычно так «кто так делает, горите в аду11. «.

/* предпочтительнее примера выше, если есть возможность */
.form-submit-link <>

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

Чем меньше css тем лучше. Как для парсера, так и человека. Все эти игры «id быстрее класса» «два класса хуже чем один» просто из вакуума. Как будто кто-то видел эту разницу на практике.

ИМХО в 5 пункте лучше будет вот так:

Ведь по «плохой» версии видно, что пытаются стилизировать ссылку заголовка, а не все ссылки item`а. Ну или как написано дальше:

>Многие верстальщики, когда надо сделать текст зелёным цветом, прикрепляют к нему класс .green.

На этом чуть менее, чем полностью построен bootstrap :)

Вот эта ерунда https://gist.github.com/bryanwillis/279b0f89ef74c39d0aea7ba5037406e3 раньше по ходу была в самом бутстрапе (аутсорсер предоставил верстку с такими классами :) )

Ту да же классы типа italic, fs-11, lh-20

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

>>Несколько маленьких картинок рекомендуется соединять в один файл (такой файл называется спрайт). Это уменьшит количество запросов на сайт и улучшит скорость загрузки страницы.

Это если используется старый HTTP/1.1, сейчас пришло время HTTP/2, где это уже неактуально.

Одинаковые id у нескольких элементов

Спрайты, как и минификация css/js и SPA всё ещё имеют смысл. И, в общем-то, будут иметь смысл ещё наверное до тех пор, пока все ресурсы не будут загружаться одновременно.

Как и SVG на замену неказистым иконочным шрифтам.

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

Ну а неправильную отрисовку svg в Safari починят только при следующем обновлении iOS.

А если у вас требуют pixel-perfect во всех известных науке браузерах, то могу только посочувствовать.

Если картинки используются в качестве декоративных элементов

Где-то я почти всё это видел… Вспомнил, в CHM-файле «HTML первые шаги» в 2000 году.

W3C Validator
Это пример самого настоящего инвалидского менеджмента, обычно только те, кто не понимает, что такое верстка в-принципе, только на него и опираются. Прогоните через него N любых ресурсов и вы увидите, что всем он параллелен. Раньше были даже картиночки 88*31. Тоже уехали в топку вместе с «Best viewed with». Стандарты давно плетутся за браузерами.
Совесть — лучший валидатор. При использовании любого html редактора у вас не будет картинок без alt и незакрытых тегов.

UTF-8
По мнению W3 BOM является валидным. Какие глюки из-за него происходят, помнят чуть менее, чем все.

Одинаковые id
Это даже не обсуждается лет 15 как :) Лично видел, как горе-верстальщики делали кучу одинаковых ID вместо использования !important и даже вместо классов просто так, потому что короче писать.

Спрайты
Стоит упомянуть, что всякие модные сборщики и CSS фреймворки умеют их клеить сами

Много селекторов
До сих пор не доказано, насколько сильно влияет на производительность вложенность селекторов. Иногда HTML сложно или невозможно поменять

Стили в HTML
WYSIWYG-редакторы в бекенде — основной поставщик такой красоты в код страницы. Крайне редко в редактор вписываются наборы стилей текущей верстки, а поиграться со шрифтами заказчики всегда горазды

Неправильное названия классов и 13. Транскрипция
Это вообще никак не влияет на работу сайта. Забудьте про это. Хоть .dohlye_kotiki
Про презентационные классы типа green, red и тд… Тоже в топку. Когда у макета есть, например, набор цветовых схем ни один человек не будет себя мучать выдумыванием метафоры на зеленый цвет.
Если продложить доколупываться к презентационным классам, то модификаторы в обожаемом BEM — это они и есть, колонки в bootstrap — это тоже они. И даже обожаемый всеми .clearfix

Clearfix
Использование display:table для :after таких элементов периодически подбрасывает смешные глюки. Например, выделенный текст выделяется не с ширину блока, а с ширину всей страницы. Так что overflow:hidden или вложение чего-то «чистящего» в конец обертки вполне юзабельно до сих пор.

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

Привет вебмастера! Я предлагаю вам списки инструментов для профессионального создания сайтов. Это валидаторы, линкеры, программы, менеджеры и другие сервисы, которые помогут вам построить профессиональный сайт с чистым и грамотным кодом.

Разделы списка. Проверка сайта на ошибки, проверка доступности — Accessibility, проверка в разных браузерах и HTML версиях, проверка прав — Legislation, проверка ссылок — Linking, тест на время загрузки — Load Time, позиция в поисковиках — SEO, валидность и статистика запросов слов в поисковиках.

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

Быстрые рекомендации.
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 код!

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

10 распространенных ошибок в HTML коде, которые мешают успешной валидации

Дизайнеры тратят часы на оттачивание мастерства для тщательной подгонки мельчайших деталей в дизайне веб сайтов, которые выходят из-под их пера. Однако качество кода очень часто остается весьма низким. Вам нужны доказательства? Посмотрите галереи бесплатных шаблонов CSS. 90% шаблонов не пройдут проверку. Причем, основная часть ошибок является весьма примитивными и их очень легко исправить. В данном уроке рассмотрим типовые ошибки в коде HTML, которые мешают успешному завершению проверки.

Зачем проверять код?

Если сайт выглядит отлично в браузере, то зачем проверять код? Типичный вопрос, который задается перед проверкой кода. Но ведь сайт не ограничивается только тем, что видно пользователю. Страницы HTML предназначены для представления данных, а не графических эффектов. Данные должны быть доступными для чтения для всего огромного сообщества людей, которое использует интернет. И читатели могут использовать совсем другие технологии для получения информации, представленной на вашем сайте — например, они могут использовать программу для воспроизведения данных голосом и просто слушать, что написано на вашей странице.

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

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

Общие ошибки

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

Не указан тип документа

Самая плохая ошибка — не использовать Doctype! Отсутствие тега Doctype означает, что браузер будет «догадываться», какой язык использовался для создания документа. Для исправления ошибки нужно указать тип документа вашей страницы.

Не закрыт элемент

» src=»https://ruseller.com/lessons/les812/img_812_3.png» alt=»Не закрыт элемент

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

Опускается символ / в самозакрывающихся элементах

Большинство элементов HTML имеет отдельные закрывающие теги, например:

Не произведена конвертация специальных символов

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

Неконвертированные символы в URL

В соответствии с предыдущим пунктом, специальные символы, особенно амперсанд, должны быть кодированы в строках URL. Ссылки на сайты, построенные с использованием PHP, часто содержат переменные с использованием символа & , их нужно писать с использованием кода HTML & .

Блочные элементы внутри строчных

Одно из основных правил HTML заключается в том, что блочные элементы НИКОГДА не должны находиться внутри строчных элементов.

Популярный пример ошибки — использование ссылки в заголовке:

bananas

— блочный элемент, поэтому он должен оборачиваться вокруг ссылки (строчный элемент):

bananas

Отсутствует атрибут alt у изображения

Каждое изображение в документе HTML должно иметь атрибут alt с описанием содержания картинки. Даже если картинка служит для дизайнерских целей, она должна иметь атрибут alt , но в данном случае его надо оставить пустым, например, alt=»» . В другом случае нужно представить описание содержание изображения.

Использование атрибутов подобных width и height

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

Имя класса или ID начинается с цифры

Имя класса, ID или имя атрибута не может начинаться с цифры. Они могут включать цифры, но не в начале слова.

А какова ситуация с проверкой CSS кода?

В отличие от HTML, CSS используется для визуального представления страницы. Таким образом, вопрос “Если страница выглядит хорошо, то зачем проверять код?” в данном случае звучит более убедительно. Неправильный код CSS не оказывает такого влияния на веб страницы, как неправильный код HTML. Однако проверку стоит проводить на предмет обнаружения опечаток и ошибок в коде. Если вы используете новые свойства CSS3, они сделают ваш документ не прошедшим проверку, так как еще не включены в спецификацию, но если вы уверенны, что все правильно, то на такие ошибки можно не обращать внимание.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: line25.com/articles/10-common-validation-errors-and-how-to-fix-them
Перевел: Сергей Фастунов
Урок создан: 18 Декабря 2010
Просмотров: 54813
Правила перепечатки

5 последних уроков рубрики «HTML и DHTML»

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

17 бесплатных шаблонов админок

Парочка бесплатных шаблонов панелей администрирования.

30 сайтов для скачки бесплатных шаблонов почтовых писем

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

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

15 новых сайтов для скачивания бесплатных фото

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

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