Опубликован: 28.02.2016 | Уровень: для всех | Доступ: платный
Лекция 1:

О HTML, CSS и JavaScript

Лекция 1: 12345 || Лекция 2 >

Начнём знакомство с jQuery с повторения (или изучения) основ правильного употребления связки HTML и CSS с небольшой примесью JavaScript.

Если не хотите упасть в грязь лицом перед коллегами — то не пропускайте данную главу "мимо ушей".

HTML — о нём стоит помнить две вещи – семантический и правильный.

Семантическая вёрстка

Семантическая вёрстка HTML документа подразумевает использование тегов по прямому назначению, т.е. если вам необходим заголовок – то вот тег <h1> и собратья, необходима табличное представление данных – используйте тег <table> и только его.

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

Забегая чуть-чуть вперёд, стоит упомянуть теги из спецификации HTML5:

<article>, <aside>, <header>, <footer>, <menu>, <section> и т.д. — используйте их, не бойтесь.

Не бояться — это правильно, но использовать тоже надо с умом, рекомендую ресурс http://htmlbook.ru/html5 — очень хорошо и подробно расписано о нововведениях спецификации HTML5.

И еще парочка интересных ресурсов в нагрузку:

Старайтесь избегать избыточных элементов на странице, большинство 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>
Лекция 1: 12345 || Лекция 2 >
Наталья Маркова
Наталья Маркова
Ярослав Гаевой
Ярослав Гаевой

10 марта 2016 c 20:13 до 22:39 я сдавал экзамен. Однако, за два месяца статус не изменился: "Задание не проверено"

Когда ожидать проверки?

Руслан Жанбосынов
Руслан Жанбосынов
Россия
Дмитрий Молокоедов
Дмитрий Молокоедов
Россия, Новосибирск, НГПУ, 2009