Инспектор
Вы можете этот курс.
Опубликован: 28.02.2016 | Уровень: для всех | Доступ: платный
Лекция 1:
О HTML, CSS и JavaScript
Начнём знакомство с jQuery с повторения (или изучения) основ правильного употребления связки HTML и CSS с небольшой примесью JavaScript.
Если не хотите упасть в грязь лицом перед коллегами — то не пропускайте данную главу "мимо ушей".
HTML — о нём стоит помнить две вещи – семантический и правильный.
Семантическая вёрстка
Семантическая вёрстка HTML документа подразумевает использование тегов по прямому назначению, т.е. если вам необходим заголовок – то вот тег <h1> и собратья, необходима табличное представление данных – используйте тег <table> и только его.
Иногда, избавляясь от табличной верстки, доходит до абсурда, и тег <table> становится изгоем, и его перестают использовать даже для табличного представления данных, не стоит повторять эту ошибку.
Забегая чуть-чуть вперёд, стоит упомянуть теги из спецификации HTML5:
<article>, <aside>, <header>, <footer>, <menu>, <section> и т.д. — используйте их, не бойтесь.
Не бояться — это правильно, но использовать тоже надо с умом, рекомендую ресурс http://htmlbook.ru/html5 — очень хорошо и подробно расписано о нововведениях спецификации HTML5.
И еще парочка интересных ресурсов в нагрузку:
- http://htmlbook.ru/html5 — неплохо, и на русском
- http://www.html5rocks.com/en/ — тут целое сообщество
Старайтесь избегать избыточных элементов на странице, большинство HTML страниц грешат лишними блочными элементами:
<div id="header"> <div id="logo"> <h1><a href="/">Мой блог</a></h1> </div> <div id="description"> <h2>Тут я делюсь своими мыслями</h2> </div> </div>
Данную конструкцию можно легко упростить, и при этом код станет более читаемым, изменения в CSS будут минимальными (или даже не потребуются):
<header> <h1> <a href="/">Мой блог</a> </h1> <h2>Тут я делюсь своими мыслями</h2> </header>
В английском языке есть термин "divits" – сим термином награждают HTML- разметку с чрезмерным использованием div’ов без потребности, я же обзываю такие творения "дивными". Обычно таким грешат новички, которые для применения стилей CSS оборачивают элементы в div’ы, что и приводит к их размножению без нужды.
Ещё одним обязательным пунктом для создания "правильного" HTML является использование названий классов и идентификаторов, которые однозначно говорят нам о содержимом элемента, а не о каких либо нюансах оформления, приведу пример:
| Плохо | |
|---|---|
| red, green и т.д. | в какой-то момент захотите перекрасить, и элемент с классом "red" будет синего цвета |
| wide, small и т.д. | сегодня широкий, а завтра? |
| h90w490 | наверное, это элемент с высотой 90px и шириной 490px, или я ошибаюсь? |
| b_1, ax_9 | эти название тоже ни о чем не говорят |
| color1, color2 и т.д. | иногда встречается для "скинованных" сайтов, но создают такие классы из лени |
| element1...20 | такое тоже встречается, и ничем хорошим не пахнет |
Ну и примеры правильного именования:
| Хорошо | |
|---|---|
| logo, content | логотип, основной контент |
| menu, submenu | меню и подменю |
| even, odd | чётный и нечётный элементы списка |
| paginator | постраничная навигация |
| copyright | копирайт |
Есть ещё один момент – это форматирование HTML и CSS кода, я не буду заострять на нём внимание, но весь код в книге будет отформатирован отступами, и, возможно, это даст свои плоды в ваших творениях.
Валидный HTML
Зеленый маркер W3C validator'а – это правильно, и к этому надо стремится, так что не забывайте закрывать теги, да прописывать обязательные параметры, приведу пример HTML кода, в котором допущено 6 ошибок (согласно спецификации HTML5), найдите их:
<h2>Lorem ipsum <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc urna metus, ultricies eu, congue vel, laoreet id, justo. Aliquam fermentum adipiscing pede. Suspendisse dapibus ornare quam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <p> <a href="/index.php?mod=default&act=image"><img src="/img001.jpg"></a>
