Leaderboard

Шли бы вы с такой з\п самизнаетекуда! Тут только верстальщик столько зарабатывает, а вы предлагаете работу перл программистом да еще с доп. обязанностями и платите какие-то от 20 до 80 тыс. руб.? Как не стыдно такой крупной компании предлагать такую мизерную оплату!

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

Сделать можно, хоть две, хоть сколько угодно. Последовательные заголовки одного уровня уже дают неявные секции по своему числу. Иногда бывает нужно выделить кусок без заголовка (скажем, строфу поэмы — не шибко удачный пример, но лучшего на ночь в голову не лезет), вот тогда без явного <section> никак, для единообразия авторы спеки рекомендуют всегда выделять секции явно. Кот знает, может, Гугл (сотрудником которого, по удивительному совпадению, является главный и чуть ли не единственный редактор спеки ЖHTML Иэн Хиксон) и вправду собирается учитывать outline-ы страниц при генерации описаний в выдаче или еще для чего-то... А для "чего-то косвенно относящегося" всё же явно будет лучше <aside>, я полагаю

Про секции это почти буквальная цитата из текущей спеки: А с точки зрения этого outline, т.е. по прямому назначению, секция равносильна "куску от заголовка включительно до следующего заголовка исключительно". Философский вопрос, конечно, а нужна ли она тогда вообще...)

Все изображения, стили, файлы на месте, внешние скрипты загружаются без ошибок?

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

А я считаю, что юзать * { margin: 0; padding: 0; } можно и нужно. И вообще это холиварная тема По теме: 1) Пункты меню зачем же резиновыми делать? 2) <div id="container"> - ID это очень плохо. Программист, который будет "оживлять" верстку, не должен задумываться, что на ID могут быть навешаны стили. Если программисту понадобится сменить ID то верстка развалится. Поэтому надо везде использовать только классы. 3) <div class="logo"> <a href="#"> <img alt="Business Co - Reach stability with us!" src="img/logo_01.png" height="56" width="220"> </a> </div> Зачем понадобилась лишняя обертка? 4) <img src="img/icon_map.gif" height="14" width="14" alt="home"> - зачем везде прописывать размеры картинок в атрибутах? 5) .marker {clear: both; position: absolute; ...} - зачем тут clear: both? 6) можно обойтись без дива с классом marker 7) блок Recent solutions: правильней было бы сделать не <ul>, а <dl>. 8) в блоке Ideal solutions <strong>Praesent vestibulum molestie lacus. Aenean nonummy.</strong> это очевидно заголовок, а не просто <strong>. 9) основной контент (Business Solutions) - ну какой же это список? В общем пока плохо.

Есть технические доводы и "идеологические". - Универсальный селектор применяет стиль ко всем элементам веб-страницы, включая невидимые, что приводит к замедлению браузера, поскольку ему требуется некоторое время для построения дерева элементов и добавления к ним стилей. Чем больше элементов в коде, тем сильнее выражено замедление. В некоторых крайних случаях вообще может появиться «зависание» браузера на несколько секунд. - При неверном использовании универсального селектора результат может оказаться непредсказуемым. Пример ниже является полностью корректным с точки зрения CSS, но приводит страницу к парадоксальному виду. * { display: block; border: 1px solid #c00; } - «Обнуление стилей» прививает у разработчика дурную манеру вёрстки. Вместо того чтобы знать, какие значения свойств установлены по умолчанию, разработчик перекладывает эту работу на браузер, насильно устанавливая все значения в ноль. В результате некоторые значения применяются к свойствам, для которых не могут устанавливаться или к свойствам, у которых данное значение и так нулевое. Это опять же приводит к повышению нагрузки на браузер и замедлению его работы. - Применение одного стиля сразу ко всем элементам иногда приводит к ошибкам отображения элементов в отдельных браузерах. В примере ниже к ссылкам добавляется пунктирное подчеркивание, которое не показывается в IE7 из-за заданного обнуления полей у ссылок. * { padding: 0; } a { text-decoration: none; border-bottom: 1px dashed red; } Замечу также, что reset.css тоже не следует использовать в том виде, что привёл buddah. Сам Мейер неоднократно заявлял, что этот код всего-лишь основа для собственных изменений. Об этом или забывают или не желают знать. В итоге используют код, который заведомо излишен. Вот скажите, кто в последний раз использовал тег h6? А может вы активно применяете тег ruby и не представляете страницу без него? Короче, перед использованием чего-либо подобного, подумайте вначале и подредактируйте его "под себя", а не вставляйте бездумно, как это делает большинство.

Возможно будет полезно: http://livevalidation.com/examples

Знания, умения и навыки по HTML 4 и XHTML Знания термины (браузер, IE, Firefox, Chrome, Opera, Safari, сайт, веб-страница, форма, фрейм, таблица, слой, скриншот, спецификация, протокол, ссылка, битая ссылка, FTP, HTTP, валидация, адрес, url, путь, тег, метатег, HTML, XHTML, CSS, стиль, текстовое поле, кнопка, флажок, переключатель, список, шрифт, начертание, контейнер, блочный элемент, встроенный элемент, список, главная страница, контент, редирект, скрипт, флэш (Flash), плагин, вёрстка); жаргоны (батон, чекбокс, радио, урл, хекс, скрол, доктайп, линк, морда, клик, осел, огнелиса, хром, бордер, див); режим отображения документа браузером (строгий, переходный, совместимости), их различия; синтаксис HTML; основные теги (!doctype, a, area, b, blockquote, body, br, button, caption, code, colgroup, dd, del, div, dl, dt, em, fieldset, form, frame, frameset, h1, h2, h3, head, hr, html, i, iframe, img, input, label, legend, li, link, meta, ol, optgroup, option, p, pre, script, select, span, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, title, tr, ul); знать, к какому типу относятся основные теги, различать блочные и строчные теги; обязательные атрибуты тегов; значения тегов (цвет, числа, адрес, единицы измерения); особенности XHTML и отличия его от HTML; понятия «резиновая» и фиксированная верстка. Навыки Автоматизированное действие, доведенное до высокой степени совершенства. написание валидного HTML-кода, содержащего минимум обязательных тегов при <!DOCTYPE>: строгом, переходном; написание валидного XHTML-кода, содержащего минимум обязательных тегов в строгом и переходном режиме; преобразование любого цвета в шестнадцатеричное значение; добавление рисунка; создание ссылки на рисунок, HTML-файл, ZIP-архив; создание таблицы с несколькими колонками и строками (минимум три), а также таблицы, в которых минимум две ячейки по горизонтали и вертикали объединены; добавление списка определений, маркированного, нумерованного списка, состоящего из пяти пунктов; создание трех текстовых абзацев и по одному заголовку 1, 2 и 3 уровня; выделение в тексте одного слова, двух слов, предложения целиком с помощью жирного, курсивного начертания, а также верхнего и нижнего индекса; создание формы с однострочным и многострочным текстовым полем, с паролем, ниспадающим списком, флажками, переключателями, кнопками; проверка документа на валидность и исправление ошибок. Умения Владение способами (приемами, действиями) применения полученных знаний на практике. создание веб-страницы с двумя колонками «резиновой» и фиксированной верстки; создание веб-страницы с двумя колонками «резиновой» и фиксированной верстки, «шапкой» и «подвалом»; создание веб-страницы с тремя колонками «резиновой» и фиксированной верстки; создание сайта, содержащего минимум три документа со ссылками друг на друга.

Я ошиблась, нужно при нажатии. А вот этот кусок кода что делает? href="javascript:void(0); Возвращает пустое значение, другими словами, не делает абсолютно ничего...честно говоря мне не совсем понятно, зачем использовать обработчик и псевдопротокол, когда его можно в него и поместить...но то такое.. ..Вот приведу цитату из Флэнагана..

Хорошо сделаю и выложу что у меня получиться