Основы HTML-верстки. Введение в HTML и CSS

Приветствую вас! Сегодня мы начнем говорить непосредственно об HTML-верстке. Познакомлю вас с языками HTML и CSS. Прежде, чем начать, хотелось бы сказать пару слов о системе контроля версий. Я долго думала (почти месяц), как рассказать вам о GIT, при этом не растягивая повествование на несколько постов и не углубляясь в работу консоли. Но, к сожалению, не смогла придумать. Поэтому предлагаю вам просто прочитать конспект @tristamoff Learn GIT (первая и вторая части). От себя добавлю, что знание GIT просто необходимо при работе над любыми, не обязательно крупными, проектами. Вполне возможно, что работа именно с консолью вам не понадобится и вам хватит git-клиентов типа SourceTree или GitHub Desktop, но понимать, как все устроено и зачем оно вообще надо, стоит.

Полезные материалы по GIT:

Настольная книга о работе с Git.

Интерактивный тур.

Часто задаваемые вопросы.

Оформление коммитов.

Знакомство с HTML

Давайте начнем знакомиться с HTML. Язык HTML составляют теги. Теги — элементы, определяющие структуру и содержание HTML-страницы. Они обрамляются символами < и >.

Какие теги бывают?

Теги бывают одиночные и парные. *Парные* состоят из двух тегов: открывающего и закрывающего. В закрывающем теге обязательно пишется слеш. Парные теги необходимы для стилизации фрагментов текста или отдельных слов.

<span>Какой-то текст</span>

Одиночные теги необходимы для вставки отдельных элементов страницы или элементов форматирования. К ним относятся: <br>, <hr>, <input>.

С появлением стандарта HTML5 использовать закрывающий слеш в одиночных тегах стало необязательно.

Что такое атрибуты?

Каждый тег может содержать атрибуты. Для некоторых из них существуют обязательные атрибуты. К примеру, тег <a> , которым обозначается ссылка. Для него обязательным атрибутом является href, который задает адрес ссылки.

Tег с атрибутом записывается так:

<имя-тега атрибут1="значение1" атрибут2="значение2" ...>

Один тег может содержать несколько атрибутов:

<p class="first">...</p>
<a class="second" href="cite.com">...</a>
<input class="form" type="text">

Какие ошибки часто встречаются?

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

Знакомство с CSS

Язык CSS или «Cascading Style Sheets» нужен для оформления HTML-страницы.
Использование атрибута style является самым простым способом применить стилизацию к нужному элементу. Например: <p style="color: blue;">...</p>. В примере выше использованы «инлайновые стили», которые окрашивают цвет шрифта в абзаце в синий цвет.

Как можно подключить стили?

Применять стили к тегам атрибутом style является плохим тоном в верстке, да и к тому же сильно засоряет HTML-код. Существуют другие способы подключения стилей. Это можно сделать с помощью тега <link>, подключив файл, либо использовать специальный тег <style>.

Что такое селекторы?

Когда стили прописаны в атрибуте style, браузеру сразу же понятно, к какому тегу эти стили относятся. Но если CSS подключаются с помощью <link> или <style>, то браузер ищет нужные теги благодаря определенных селекторов:

селектор {
свойство1: значение1;
свойство2: значение2;
...
}

Селектор — это имя элемента, к которому нужно применить конкретное оформление.

Какие ошибки часто встречаются?

Самыми распространенными являются ошибки, связанные с опечатками и невнимательностью.
Еще один вид часто встречающихся ошибок — отсутствие ; после значения свойства. Если забыть поставить;, то браузер не прочитает ни это свойство, ни все последующие.

На сегодня все. А в следующий раз познакомимся с языком CSS.

Задавайте вопросы в комментарии, с радостью отвечу.