HTML & CSS

HTML и CSS — это два языка, которые обязательно требуются для верстки. HTML — язык разметки документа, а CSS — каскадные таблицы стилей. Если проводить аналогию с игрушечным замком, то тэги HTML — это строительные блоки замка, которые в изначальном их виде можно построить только в простенькую башенку. CSS же наделяет наши блоки различными свойствами, которые позволяют построить из них полноценный красивый замок.

HTML целиком и полностью состоит из так называемых тэгов. Тэг в письменном представлении представляет из себя следующую конструкцию:

<tag attribute="value">контент</tag>

Сам тэг заключается в угловые скобки, в них пишется его называние, а так же может присутствовать энное количество атрибутов (свойств). Среди свойств так же очень часто используются классы (class) и идентификаторы (id), по которым далее можно к этому элементу обращаться как из CSS, так и из JS. Далее следует текстовый контент или другие тэги, и заканчивается все закрывающим тэгом. Закрывающий тэг — это тот же самый тэг, только с сиволом / перед его названием и без каких-либо свойств. Он показывает, что тут заканчивается действие данного тэга.

По сути же тэги являются элементами контента. Они могут означать заголовки (h1, h2, h3…), абзацы (p), ссылки (a) и многое другое. Чаще всего используется тэг div, потому как он обозначает самый простой блок без каких-либо дополнительных свойств, а уже потом на него сверху навешивается все что угодно с помощью CSS.

Самая простенькая html-страничка выглядит примерно таким образом:

<!DOCTYPE html>
<html>
	<head>	
		<link href="style.css" rel="stylesheet" type="text/css" media="all" />
		<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
		<h1>Я заголовок!</h1>
		<p>А я — абзац!</p>
	</body>
</html>

Выглядеть это все будет как-то так:

Заметьте, что между открывающим тэгом <head> и закрывающим </head> вставлены так же еще 2 строки. Это специальные тэги, которые подключают различные дополнительные файлы к документу. Первый подключает файл стилей style.css, а другой, script.js, подключает файл javascript, о котором я расскажу ниже.

Как видите, мы можем уже наполнять страницу контентом с помощью одного html, однако выглядит это мягко говоря «не очень». Теперь надо добавить немного css-стилей, чтобы придать элементам более красочный вид.

Стандартная запись CSS выглядит примерно следующим образом:

element {
	property: value;
	other-property: 0;
}

Мы пишем в начале имя, класс (через точку: .class) или id (через решетку: #id) html-элемента. Затем указываем все свойства, которыми хотим наделить данный элемент или контент внутри него. Все свойства заключаются в фигурные скобки. Свойства могут задавать элементу отступы, выравнивать его по горизонтали, вертикали, а так же контент внутри него, менять размер, цвет, стиль шрифта контента и многое другое.

Напишем в подготовленный нами заранее файл style.css следующий код:

h1 {
	color: #ff9900;
	text-align: center;
}
p {
	font-weight: bold;
	font-style: italic;
	text-align: center;
}

И получим вот такой результат:

Изменения на лицо. Мы задали цвет заголовку, выровняли текст по центру и изменили стиль шрифта абзацу. Думаю принцип понятен.

Верстальщиками часто используются так называемые css-фреймворки, самым известным из которых является Bootstrap. Фреймворки позволяют использовать определенный стиль html-разметки, чтобы значительно упростить процесс верстки. Например, можно задать определенные классы элементам, чтобы выровнять элементы по сетке или сделать из элемента красивый выпадающий список, многоуровневое меню и прочие часто используемые приемы.

Объяснять более подробно дизайнерам смысла не вижу, поэтому переходим к следующему пункту.

JavaScript

JavaScript — это код, который задает поведение элементам. Если проводить дальше аналогию с игрушечным замком, то JS сделает его блоки интерактивными. Можно будет сделать открывающиеся ворота и окна, дым из труб, развивающиеся флаги, шагающие туда-сюда постовые, и.т.д. С элементами на сайте примерно то же самое, например: выпадающие меню, красивые анимационные эффекты, всплывающие окна, загрузочные бары, параллакс эффекты, и все в этом духе.

Очень популярными являются различные библиотеки для работы с элементами, например, самая известная jQuery. Библиотеки делают простым и удобным обращение к элементам, а так же различные манипуляции с ними.

На самом деле этот язык позволяет намного большее, но, опять же, дизайнерам это знать уже не нужно.

Итог

Верстальщики используют стэк HTML, CSS и JavaScript, чтобы превратить ваш макет в то что можно наполнять контентом и вывешивать в сеть. Принципы взаимодействия этих языков довольно просты для понимания и, как правило, ни у кого не вызывают проблем. HTML задает сами элементы, CSS их модифицирует и стилизует, а JS делает их интерактивными и живыми.