Архивы Категорий: Веб-разработка

Главная / Веб-разработка
39 Постов

Примерно в конце 2014 я зарегистрировался на Github. Тогда у меня было не так много опыта в программировании, но был опыт в создании сайтов, чем я и занимался.

Мои первые 20 репозиториев содержали статичные сайты, которые я пытался вывести в топ поисковых систем и монетизировать. Это были довольно качественные мини-сайты с подробным текстом и ссылками на скачивание.

Для них я использовал стандартные шаблоны Github Pages, которые должным образом переделывал и улучшал.

Но это история.

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

Но вы не можете размещать там исполняемый код, можно использовать только HTML-страницы.

Github Pages

Github Pages предоставляют вам возможность размещать свои сайты и сайты своих проектов прямо в Github-репозиториях.

На gh-pages свои сайты размещают многие известные проекты. К примеру, там хостится сайт Bootstrap, сайт Ruby и т.д.

Важно также отметить, что хотя Github Pages хостит только статичные сайты, они поощрают использование таких генераторов как jekyll.

Jekyll, кстати, написан на Ruby.

Как разместить сайт

Если вы уже зарегистрированы на Github, достаточно просто создать репозиторий и зайти в его настройки.

Это супер просто.

Сейчас можно хостить свой сайт в master-бранче, но раньше для этого нужно было обязательно создать бранч gh-pages.

Да и вообще сейчас можно добавлять файлы и папки через веб-интерфейс, раньше это можно было делать только с помощью терминала.

В общем, сегодня достаточно просто нажать «выбрать тему» для старта:

Они предложат вам красивые темы на выбор:

После коммита изменений, вы можете выбрать дополнительные настройки:

К примеру, можно добавить собственный домен.

Ах да, также там вы можете увидеть по какому адресу ваш сайт размещен на данный момент. Этот адрес имеет стандартный вид для подобных сайтов, если вы не используете кастомный домен.

Снова немного истории: раньше домен можно было добавить только созданием файла CNAME в корневой папке.

Управление сайтом

Управлять своим сайтом можно как обычным репозиторием.

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

Когда я только начал изучать AngularJS, у меня была мысль «зачем всё усложнять, почему ты не держать всё в простом виде?» и «зачем учить ещё одну технологию?».

Под «держать все в простом виде» я имею в виду стандартный фронтенд-набор: HTML, CSS, JavaScript.

Дело в том, что когда ваше веб-приложение становится сложнее само по себе, размер вашего кода растет. Если даже не растет его размер, растет его сложность.

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

AngularJS имеет хорошую организацию, то есть вам легко найти за что отвечает та или иная часть вашего кода. Обновление одной части не должно задевать остальные.

Это будет легче и для вас, и для других разработчиков из вашей команды.

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

Да и с тестированием в AngularJS все намного проще, чем с тестированием «чистого» JS-кода.


AngularJS отлично интегрируется с Ruby on Rails и другими бэкенд-фреймворками.

Это проект с открытым исходным кодом, разработанный сотрудниками Google.

Эта технология сейчас вполне неплохо востребована, а владеющие ей программисты могут довольно неплохо зарабатывать.

В этом посте мы поговорим о Bootstrap, который является CSS-фреймворком.

Это один из наиболее популярных CSS-фреймворков, его разработали инженеры из Twitter.

Что такое Bootstrap

Bootstrap это самый популярный HTML/CSS/JavaScript фреймворк для разработки отзывчивых, «mobile first» проектов в вебе.

Давайте разберем эти утверждения.

Прежде всего, самый популярный фреймворк. На Github’е у них больше 110 тысяч звезд и больше 50 тысяч форков. Так что, это самый популярный проект на всем сайте.

Bootstrap состоит по большей части из CSS. Он предопределяет множество CSS-классов для вас.

Часто Bootstrap требует иметь определенную HTML-структуру на вашей странице.

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

Он также имеет крутой JavaScript-фреймворк, основанный на jQuery API, который помогает добавлять плагины реально улучшающие ваш сайт.

Кроме того, Bootstrap называют «mobile first» фреймворком.

В общем-то, это означает, что вы имеете дело в первую очередь с мобильными девайсами.

В реальности, такой подход может иметь два варианта.

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

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

Я бы сказал, что оба эти варианта полностью валидны.

Но в любом случае вы планируете мобильную версию с самого начала, вы не игнорируете ее и не откладываете в конец или середину разработки.

Также этот подход означает, что CSS-фреймворк должен подходить для мобильных.

Кстати, довольно интересно, что Bootstrap не всегда был «mobile-first». До версии 2.0 или около того, Bootstrap имел отдельный CSS-файл и отдельный набор классов для них.

Но сегодня он mobile-first.

Недостатки Bootstrap

Какие недостатки у этого фреймворка по сравнению, к примеру, с написанием собственного?

В первую очередь, он большой и нагруженный. То есть, многие функции вы скорее всего не будете использовать.

Это можно компенсировать скачиванием с их сайта только нужных модулей и функций, которые, по вашему мнению, вы будете использовать.

Так что, хотя Bootstrap и слегка раздут, это не очень плохо.

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

Официальный сайт и документация

Официальный сайт — getbootstrap.com.

На официальном сайте можно найти документацию, примеры, темы и прочее.

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

Я нашел этот довольно популярный график в интернете, источником указывается Morgan Stanley Research. Не знаю насколько точны эти цифры, но общая суть давно ясна: мобильные браузеры догнали и перегнали по популярности десктопные.

Судя по графику, это произошло примерно в 2013-2014 году, и с этого момента уже прошло немного времени.

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

Мобильных девайсов много. Какие из них поддерживать?

Все из них. Иначе вы можете потерять часть своих пользователей.

Что такое отзывчивый сайт?

Это сайт, который адаптируется к среде просмотра.

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

В англоязычной википедии есть хорошая картинка, иллюстрирующая эти понятия.

На ней приведена перефразированная (или, возможно, оригинальная) цитата известного эксперта по боевым искусствам Брюса Ли.

Вы помещаете воду в чашку и она становится чашкой. Вы помещаете воду в бутылку и она становится бутылкой. Вы помещаете ее в чайник, и она становится чайником.

Идея здесь в том, что когда вы помещаете контент в разные девайсы, он адаптируется к ним, как и вода.

Контент остается тем же, меняется только его форма.

Чаще всего (но не всегда) это означает, что сайт будет адаптироваться по ширине девайса.

Альтернативы отзывчивому дизайну

Есть ли альтернативы принципам отзывчивого дизайна? Вообще, они есть.

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

К примеру, может иметься обычная версия сайта по адресу example.com, а мобильная по адресу m.example.com.

Так часто делали крупные сайты раньше, когда отзывчивый дизайн еще не был популярен.

Но такой подход может иметь некоторые недостатки.

В первую очередь, технически у вас будет практически два разных сайта: один для мобильной версии, второй для десктопной.

Кроме того, мобильные девайсы могут сильно различаться в размерах. Поэтому трудно сделать мобильный сайт который подходит для них всех.

Медиа-запросы позволяют группировать стили вместе и задавать их для разных девайсов на основе определенных критериев.

К примеру, вы можете определить устройство по его ширине, высоте или ориентации (горизонтальной, портретной).

Конечно, одним из самых очевидных различий между просмотром сайта на десктопе и телефоне будет их размер экрана.

Не забывайте, что CSS имеет силу создавать очень разные макеты веб-страниц на основе одного и того же HTML. Помните csszengarden.com?

Так что, самый частый способ настройки стилей и макета вашей страницы — это задать разные стили для разных размеров экранов пользователей.

Вот почему очень важно изучить, по крайней мере, основы использования медиа-запросов.

Без них адаптивный дизайн, о котором мы скоро поговорим, не был бы возможным.

Поэтому давайте рассмотрим основной синтаксис медиа-запросов.


@media (max-width: 767px) {
  p {
    color: blue;
  }
}

Медиа-запрос начинается с @media, затем идет медиа-свойство и фигурные скобки.

Внутри фигурных скобок находятся стили. Это как таблица стилей внутри таблицы стилей.

Если медиа-свойство разрешается как true, стили внутри фигурных скобок применяются.

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

Основные медиа-свойства


@media (max-width: 800px) {...}


@media (min-width: 800px) {...}


@media (orientation: portrait) {...}


@media (screen) {...}


@media (print) {...}

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

Но наиболее частым применением является таргетирование по ширине.

Основные логические операторы медиа-запросов

Медиа-запросы могут комбинироваться с помощью логических операторов.

Одним из наиболее популярных логических операторов является and.

В качестве примера, код ниже определяет диапазон ширины.


@media (min-width: 768px) and (max-width: 991px) {...}

Другим способом комбинации медиа-запросов является разделение их запятой. Это, по сути, эквивалент оператора OR.


@media (max-width: 767px) , (min-width: 992px) {...}

На практике, при создании адаптивного дизайна или адаптивного макета самым частым оператором будет and.

Структура таблицы стилей с медиа-запросами

Я хотел бы показать вам как структурировать таблицу стилей с медиа-запросами в ней.

Чаще всего, у вас будет несколько подобных медиа-запросов, но почти наверняка у вас будут какие-то базовые стили для начала.


p { color: blue; } /* базовые стили */

...

@media (min-width: 1200px) {
...
}

@media (min-width: 992px) and (max-width: 1199px) {
...
}

...

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

Затем вы пишете стили для определенных размеров экрана, например изменяя для них некоторые базовые стили или добавляя новые.

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

В примере выше первый медиа-запрос имеет минимальную ширину в 1200 пикселей, а во втором медиа-запросе максимальная ширина указана в 1199 px.

Если бы во втором запросе было включено 1200, то применялись бы оба из них, и скорее всего это было бы не очень хорошо.

Поэтому когда вы структурируете медиа-запросы, у вас должны быть очень четкие, раздельные границы.

Примеры

Давайте взглянем на пример.

Здесь у нас снова простая структура HTML: заголовок два параграфа.

Параграфы имеют свои id. Один из них будет большим, а другой маленьким.

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


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Медиа-запросы</title>
<style>
/********** Базовые стили **********/
h1 {
  margin-bottom: 15px;
}
p {
  border: 1px solid black;
  margin-bottom: 15px;
}
#p1 {
  background-color: #A52A2A;
  width: 300px;
  height: 300px;
}
#p2 {
  background-color: #DEB887;
  width: 50px;
  height: 50px;
}

/********** Только большие девайсы **********/

/********** Только средние девайсы **********/

</style>
</head>
<body>
<h1>Медиа-запросы</h1>

<p id="p1"></p>
<p id="p2"></p>

</body>
</html>

Давайте посмотрим на это в браузере.

При изменении ширины браузера ничего не меняется. Если мы делаем его уже, наши параграфы остаются того же размера.

А теперь давайте посмотрим что мы можем сделать с помощью медиа-запросов.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Медиа-запросы</title>
<style>
/********** Базовые стили **********/
h1 {
  margin-bottom: 15px;
}
p {
  border: 1px solid black;
  margin-bottom: 15px;
}
#p1 {
  background-color: #A52A2A;
  width: 300px;
  height: 300px;
}
#p2 {
  background-color: #DEB887;
  width: 50px;
  height: 50px;
}

/********** Только большие девайсы **********/
@media (min-width: 1200px) {
  #p1 {
    width: 80%;
  }
  #p2 {
    width: 150px;
    height: 150px;
  }
}

/********** Только средние девайсы **********/
@media (min-width: 992px) and (max-width: 1199px) {
  #p1 {
    width: 50%;
  }
  #p2 {
    width: 100px;
    height: 100px;
  }
  body {
    background-color: blue;
  }
}
</style>
</head>
<body>
<h1>Медиа-запросы</h1>

<p id="p1"></p>
<p id="p2"></p>

</body>
</html>

Откроем в браузере.

Так как мой браузер шире 1200 px, применяются стили указанные для больших девайсов. Ширина первого параграфа равняется 80% от ширины окна, а второй параграф занимает размер 150×150 пикселей.

Теперь попробуем сделать окно браузера немного уже.

Теперь в диапазоне 992‒1199 px применяются новые стили: синий фон, первый параграф шириной 50%, второй параграф 100×100 пикселей.

И, наконец, попробуем сделать его уже 992 px.

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

Кстати, чтобы узнать точную ширину браузера, вы можете открыть инструменты разработчика (Ctrl + Shift + I). Очень полезная вещь, кстати.

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

Кроме того, там есть иконка с телефоном.

Если вы кликнете на нее, вы можете просмотреть сайт с разными размерами экрана. Можно выбрать какой-то девайс типа Galaxy S5 или iPhone 6, либо выбирать любой размер самостоятельно.

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

Вкратце

Мы поговорили о базовом синтаксисе медиа-запроса:

  • @media (медиа-свойство)
  • @media (медиа-свойство) логический оператор (медиа-свойство)

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

Обычно вы предоставляете базовые стили. Затем вы меняете или добавляете к ним стили для каждого медиа-запроса.

CSS работает, ассоциируя правила с HTML-элементами. Эти правила определяют то как должно отображаться содержимое указанных элементов.

Хотя дизайн целой страницы может быть довольно сложным процессом, создание отдельного CSS-правила является довольно простым.


p {
  color: blue;
}

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

За селектором следуют открывающая и закрывающая фигурная скобка, внутри которых содержится CSS-декларация. Она состоит из двух частей: свойства и значения.

Имена свойств предварительно определяются спецификацией, и каждое свойство может иметь определенные значения.

Каждое свойство со значением разделяется двоеточием и заканчивается точкой с запятой.

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

Конечно, CSS-правило может содержать несколько деклараций:


p {
  color: blue;
  font-size: 20px;
  width: 250px;
}

В этом примере мы говорим, что наши параграфы должны быть определенного цвета, иметь определенный размер шрифта и определенную ширину.

Набор CSS-правил будет называться таблицей стилей.


p {
  color: blue;
  font-size: 20px;
  width: 250px;
}

h1 {
  color: green;
  font-size: 34px;
  text-align: center;
}

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

Но обычно у вас будет гораздо больше одного.

Далее, давайте посмотрим на CSS внутри HTML-документа.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Анатомия CSS-правила</title>
<style>
p {
  color: blue;
  font-size: 20px;
  width: 250px;
}
h1 {
  color: green;
  font-size: 34px;
  text-align: center;
}
</style>
</head>
<body>
<h1>Анатомия CSS-правила</h1>
<h2>Первый подзаголовок</h2>
<p>CSS работает, ассоциируя правила с HTML-элементами. Эти правила определяют то как должно отображаться содержимое указанных элементов.</p>
<h2>Второй подзаголовок</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet semper erat. Donec mi risus, efficitur malesuada purus at, egestas placerat libero. Vestibulum in mattis lorem.</p>
</body>
</html>

В этом примере у нас есть заголовок, два подзаголовка и два параграфа. И мы назначаем этим элементам немного кастомных стилей.

Мы добавляем наши стили внутри <head>, внутри тега <style>.

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

Давайте взглянем на это в браузере.

Заголовок имеет определенный размер и расположен по центру. Параграфы тоже имеют свой размер и цвет, и занимают отведенные им 250 px.

Если вы обратите внимание на подзаголовки <h2>, вы заметите что они имеют больший размер шрифта и более жирное начертание чем обычный текст. Но этого мы не указывали.

Эти неуказанные стили исходят из самого браузера.

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

Вкратце

В этом посте мы поговорили о синтаксисе CSS-правила:

  • Селектор
  • Декларация
  • Пара свойство/значение

Также мы поговорили о комбинировании CSS-правил в одну таблицу стилей.

В Интернете, контент — это король. Он весь держится на контенте, то есть содержании.

Как мы недавно обсудили, HTML определяет структуру этого контента.

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

Тем не менее, это было бы большой ошибкой.

Хотя контент и король, от его презентации в значительной степени зависит то как пользователи его потребляют и как к нему относятся.

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

В этом разница между домом и простым укрытием от улицы.

И когда дело доходит до сайтов, одной структуры просто недостаточно.

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

Цвет, позиционирование и размер, среди прочих вещей, являются частью этого.

CSS — технология, предоставляющая эту возможность.

CSS является невероятно мощной технологией, она может изменить HTML-структуру до неузнаваемости.

Чтобы увидеть то о чем я говорю, можете посетить сайт CSS Zen Garden, он довольно-таки удивит вас.

CSS Zen Garden

Идея этого сайта проста.

Дизайнеры и веб-разработчики со всего мира могут представить свой проект. Они могут переделать дизайн этого сайта.

Но есть одна уловка. Они не могут менять HTML.

Так что единственное, что они меняют, это CSS.

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

Я покажу несколько скриншотов.

Везде меняется только лишь CSS. Неплохо, да?

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

Вкратце

Суть этого поста в том, что CSS является невероятно мощной технологией. Она не только стилизует контент, но и влияет на опыт взаимодействия пользователя.

Как модно говорить, «юзер-экспириенс» имеет значение.

В основе HTML находятся HTML-теги. Так что, довольно важно понимать из чего HTML-тег состоит и как правильно его составлять.

Обычно HTML-теги имеют открывающий и закрывающий тег, которые окружают какой-то контент.


<p>Контент</p>

В этом примере тег p означает, что контент внутри должен расцениваться как параграф.

Технически говоря, p сам по себе называется элементом, а вместе со скобками он называется тегом.

Но чаще всего, когда кто-то говорит об элементе p или о теге p, они могут иметь в виду одно и то же.

Большинство тегов имеют закрывающий тег соответствующий открывающему, но не все.

К примеру, теги <br> и <hr> имеют только открывающий тег.

Тег <br> служит для переноса строки, а <hr> означает горизонтальную линию.

Каждый HTML-тег имеет определенные атрибуты.


<p id="myId">Контент</p>

В этом примере мы назначаем myID в качестве значения атрибута id.

Каждый атрибут имеет свои правила для значения.

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

То есть, ни один другой элемент на странице не должен иметь значение атрибута id равное myId.

Если будет еще один элемент с таким id, ваш HTML не будет валидным и потенциально это может вести к ошибкам.

Давайте вкратце поговорим об истории HTML.

Обычно история какой-то технологии не является особо захватывающей, и я бы не сказал, что история HTML это исключение.

Но некоторые её части дадут вам не только понимание того как эта технология развивалась, но также позволят вам оценить аспекты HTML, которые по-прежнему релевантны и применимы сегодня.

История HTML

До 1997 не было стандартов сообщества, так что в основном браузеры делали что хотели. Они изобретали новые теги, реализовывали некоторые вещи по-разному. Это был в каком-то роде Дикий Запад для Сети.

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

Около 1997 года появился консорциум W3C, предложив стандарты, на которые действительно начали обращать внимание разработчики браузеров. Это был стандарт HTML4, который быстро обновили до HTML 4.01.

Этот стандарт все еще был довольно слабым и у браузеров все еще оставалось довольно много свободы в реализации того как отображаются страницы.

Затем, около 2000 года, W3C сделали еще одну спецификацию под названием XHTML 1.0, она была основана на XML.

XML очень жесткий, но очень четкий язык разметки.

W3C хотели продолжить работу и издать XHTML 2.0.

Проблема была в том, что производители браузеров, которые на тот момент уже имели историю частичного игнорирования стандартов, решили что W3C движется слишком медленно и вообще в неправильном направлении.

Так что, в 2004 разработчики браузеров объединились и создали другую группу под названием WHATWG.

Эта группа значительно менее демократична по сравнению с W3C. Они имеют один центр и одного редактора, принимающего финальные решения.

Некоторое время эти организации не особо пересекались.

Но видимо W3C в итоге поняли, что WHATWG управляется людьми и компаниями которые действительно имеют значение, потому что они сами разрабатывают браузеры, так что было бы хорошей идеей попробовать работать вместе.

Это то что произошло в 2007-2009 годах.

Так что, WHATWG и W3C начали в какой-то мере сотрудничать.

Тогда они представили то что мы имеем сейчас, HTML5.

Что это означает для вас

Что имеет значение, так это то, что есть две организации, которые в какой-то степени отвечают за HTML.

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

W3C отвечает за стандарты, это то чем они занимаются. А WHATWG даже не дают версии своим HTML-стандартам, они просто называют это HTML который постоянно развивается.

«Нет версии, мы не останавливаемся, мы продолжаем развивать его».

И эти ребята действительно делают браузеры.

А W3C выбирают некоторые из наиболее успешных вещей, которые начинают реализовываться браузерами, и медленно формируют из этого официальный стандарт.

Так как следить за всем этим?

Ну, во-первых можно следить за спецификациями W3C. Это довольно скучное академическое чтение, но вы все же будете находить что-то полезное.

Спецификация HTML5

Я переводил некоторые спецификации на русский.

Кроме того, еще одним интересным сайтом является caniuse.com.

Это сайт, который сам отслеживает стандарты HTML5, SVG, CSS, JavaScript API и так далее, чтобы сказать вам какие браузеры их поддерживают.

К примеру, если вы введете srcset, то получите таблицу с информацией о том какие браузеры поддерживают этот относительно новый атрибут, а какие (как IE) — нет.

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

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

На данный момент первый по популярности браузер это Chrome, за ним идет Firefox.

К примеру, вы очень хотите что-то реализовать, что поддерживается ими, но не поддерживается, скажем, IE. В этом случае вы можете принять решение пожертвовать небольшой долей.

Итак, поговорим о том что такое HTML.

Что такое термин «HTML» и как он относится к вебу? Немного ниже мы поговорим о большой тройке технологий, на которых держится Сеть: HTML, CSS и JavaScript.

Где в этом место для HTML? Другими словами, какую роль играет HTML в веб-разработке?

По мере прочтения вы найдете ответы на эти довольно простые вопросы.

HTML

Прежде всего, HTML расшифровывается как HyperText Markup Language.

Гипертекст (hypertext) это текст, который содержит ссылки на другие тексты. В принципе, это то чем является Веб. Один документ ссылается на другой документ, тот ссылается на следующие и так далее.

Очевидно, сегодня это уже не только текст, но и медиа. Мы можем смотреть видео, слушать музыку и т.д. По сути, это расширение гипертекста.

Следующее слово это разметка (markup). Разметка означает размечать что-то, то есть вы можете оформлять документы. HTML окружает ваш контент определенной разметкой, таким образом браузеры или другие программы могут понимать как его правильно отображать.

К тому же, HTML неплохо читаем человеком.

Последнее слово это язык (language). Язык имеет свой синтаксис, это означает что есть правильный и неправильный путь написания.

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


<h1>
  <div>Hello world!</h1>
</div>

А в этом примере показан правильный порядок.


<h1>
  <div>Hello world!</div>
</h1>

Технологии, на которых держится Веб

Давайте поговорим о технологиях, на которых держится Сеть: HTML, CSS и JavaScript.

HTML предоставляет структуру документа, то есть какие компоненты он имеет. К примеру, он может иметь один заголовок, два параграфа и футер.

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

Как если вы знаете что дом состоит из кухни и комнаты, но не знаете какого они цвета и как оформлены.

Цвет и стиль — это роль CSS. Цвета, макет, стиль и размер шрифта, и все прочие вопросы оформления.

Третий компонент, JavaScript, определяет поведение и функциональность. К примеру, что происходит после загрузки страницы или что просхойдет при клике на заголовок. Работа JS — предоставить эти функции.

Давайте посмотрим пример всего этого.


<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Структура HTML (до)</title>
  </head>
  <body>
    <h1>Структура HTML</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus elementum mauris eu auctor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus elementum mauris eu auctor. Donec commodo vestibulum tincidunt. </p>
    <footer>
      <hr>
      <p>Тех. поддержка: support@we-have-lunch.com</p>
    </footer>
  </body>
</html>

Заголовок, пара параграфов, футер с адресом (не работающей) поддержки…

Давайте добавим в тот же документ немного стилей и поведения.


<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Структура HTML (после)</title>
  </head>
  <body>
    <h1 style="text-align: center; color: green; font-size: 60px;">Структура HTML</h1>
    <p style="font-size: 1.5em; margin: 0 100px 0 100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus elementum mauris eu auctor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus elementum mauris eu auctor. Donec commodo vestibulum tincidunt.</p>
    <footer>
      <hr>
      <p style="text-align: center;" 
         onclick="alert('Отправка сообщений бесполезна...');">
         Тех. поддержка: support@we-have-lunch.com
      </p>
    </footer>
  </body>
</html>

Теперь давайте посмотрим на оба этих документа в браузере.

В первом нет ничего особенного. Заголовок, пара параграфов и т.д.

Но во втором примере очевидно добавление стилей. Заголовок стал зеленым, расположенным по центру, стал крупнее. Первый параграф тоже немного изменил свой вид, как и футер.

И если мы кликнем по адресу e-mail внизу, появится сообщение.

Что, кстати, соответствует опыту большинства людей по поводу текстовой поддержки…

Как вы видите, добавились некоторые стили и поведение, но структура осталась точно той же.

Вкратце

HTML размечает контент и определяет структуру документа.

Как и любой язык, он имеет правильный и неправильный синтаксис.

Три главные веб-технологии (HTML, CSS, JavaScript) очень хорошо работают вместе, потому что каждая из них имеет определенную роль и они в какой-то мере зависят друг от друга.