HTML-старт для детей. Инспектор Google и что учить дальше

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

На примере цветов я вам покажу, как можно подсмотреть в вебе любую чужую страницу и любой стиль на ней! Это чрезвычайно полезный инструмент Google, постоянный помощник веб-разработчика — Google Inspector.

Если у вас стоит другой браузер (Internet Explorer или Mozilla Firefox), то рекомендую скачать и установить Google Chrome. Как у веб-разработчика у вас вообще должны стоять все три браузера, чтобы проверять работу на всех. Но для работы лучше Хрома ничего не найти. Хотя исторически именно Мозилла первая создала и запустила расширение для браузера Firebug, который позволяет редактировать страницу в режиме онлайн, Хром все-таки сделал инструменты для разработчиков более удобными и интуитивно-понятными.

После того, как вы установили Google Chrome, сделайте его браузером по умолчанию (во время установки он спросит вас об этом). Теперь откройте свой index.html в этом браузере. Далее нажмите правой кнопкой мыши на текст (любой) и выберите последний пункт — Inspect:

1

Справа или снизу откроется окно Инспектора:

2

 

Чтобы сменить положение панели на экране — нажмите три точки в правом верхнем углу (рядом с крестиком «закрыть панель инспектора») и выберите другую раскладку.

Итак, вглядимся — в верхнем окне у нас весь наш html, а вод ним панель стилей. Стили на сером фоне (справа написано user agent stylesheet) не редактируются, это стили по умолчанию примнятые в браузере. Скроллим окошечко со стилями вниз:

4

Кликните мышкой прямо на слово blue в стилях. Слово станет «активным» — оно попадет в окошечко, в которое мы теперь можем писать что-то другое. Удалите слово (клавишей Delete или Backspace). И сразу выскачит длиннющий список всех доступных цветов!

5

Теперь просто кликайте на клавиши вверх-вниз, чтобы выбрать какой-нибудь другой цвет. Цвет текста в вашем html-документе будет меняться сразу же, в режиме онлайн! Настоящая магия )). Конечно, эти изменения не сохранятся в ваш файл. Как только выберите нужный цвет (у меня violet-фиолетовый), нажмите Enter, чтобы он туда встал, потом выделите его, скопируйте и вставьте вместо blue или знаков #RGB в файле common.css. Сохраните ыайл, обновите страницу в браузере — текст должен стать фиолетовым уже сам по себе.

Таким образом вы можете проинспектировать любую страницу в интрнете, любой объект, который вам понравился.

Чем еще хорошо Инспектор — когда вы очищаете пространство после двоеточия (:), и выскакивает окошко выбора вариантов, там будут только те стили, которые могут быть приписаны данному свойству. Например, кликните на значение стиля после font-family: — выскочит список доступных вариантов, перевод на картинке:

6

 

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

После того, как мы разобрались с основами — что такое HTML, как его писать и как подключать стили, вы можете перейти на сайт Кодебра, можно сразу на первый урок по CSS https://codebra.ru/ru/lessons-css/familiarity/1/1.

Стили и разметку вы будете писать прямо в браузере, но теперь вы знаете, как собрать проект локально.

Как только вы научитесь основным свойствам стилей, и вам захочется продвинуться по пути создания прекрасных сайтов, рекомендую CSS Zen Garden.

Вам достаточно скачать оттуда в одну и ту же папку HTML и CSS файлы, открыть локально и исследовать, как и что там сделано. Например, вертикальные меню, или фиксированные фоны. Вы сможете потом копипастить эти стили в свои проекты и использовать в качестве основы. Чтобы открыть другие примеры — жмите кнопку View All Designs (Смотреть все дизайны).

7

Со стороны Блога Авебдизайн это, конечно, далеко не все! Но теперь будут исключительно уроки формата tips and tricks css, что переводится как «фишки и трюки css». Мы будем рассматривать сложные случаи.

Не забудьте потом изучить также html-таблицы и формы.