Введение в веб-разработку с HTML, CSS, JavaScript

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

Теперь, как появился HTML?

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

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

И примерно в 1997 году Консорциум World Wide Web, W3C, придумал первый стандарт для браузеров, это был HTML4, и они очень быстро обновили его до HTML4.01.

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

Поэтому, примерно в 2000 году W3C предложил другую спецификацию под названием XHTML 1.0, и эта спецификация была основана на языке разметки XML. И W3C хотели продолжить работу, создав XHTML 2.0.

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

Поэтому, производители браузеров объединились и создали еще одну группу разработки спецификаций, которая называлась WHATWG, группа технологий веб-гипертекстовых приложений.

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

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

Теперь, W3C отвечает за стандарты, а WHATWG отвечает за реализацию стандартов браузерами.

И чтобы узнать, будет ли ваш HTML работать в браузерах, вы можете использовать валидатор, который есть на веб-сайте W3.org.

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

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

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

При этом узнать долю использования браузера в Интернете вы можете с помощью сайта w3schools.com.

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

Как правило, теги HTML имеют открывающий и закрывающий тег. И они окружают какой-то контент.

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

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

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

Например, теги br и hr, br означает разрыв строки, а hr означает горизонтальную разделительную линию, имеют только открывающий тег. У них вообще нет закрывающего тега.

Теперь, каждый элемент HTML может иметь предопределенные атрибуты.

Атрибут – это пара «имя-значение», представляющая собой своего рода метаданные о самом элементе, к которому он применяется.

(Метаданные – информация о другой информации, или данные, относящиеся к дополнительной информации о содержимом или объекте.)

В этом примере мы присваиваем myId как значение атрибута id, который представляет идентификатор элемента HTML.

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

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

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

И еще одно правило – атрибуты могут быть указаны только в открывающем теге, поэтому вы не можете указать атрибут в закрывающем теге.

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

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

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

Создание первой HTML страницы

Для создания кода HTML страницы откроем редактор Sublime.

И введем вышепоказанный код.

И каждая HTML-страница должна начинаться с объявления типа документа. То есть все HTML-документы должны начинаться с объявления <!DOCTYPE>, которое не является тегом HTML. Это «информация» для браузера о том, какой тип документа браузеру ожидать.

Тип документа – это какой спецификации HTML следует код страницы.

Если код страницы следует спецификации HTML 5, объявление типа документа простое – <!doctype html>.

Для HTML 4.01, такое объявление было гораздо сложнее:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Слово doctype или HTML может быть написано строчными или прописными буквами. Единственное, на что вы должны обратить внимание, это то, что между восклицательным знаком и словом doctype не должно быть пробела.

И если вы пропустите объявление типа HTML-страницы, это будет сигналом для браузера, что он должен рассматривать ваши страницы как страницы, не соответствующие стандарту HTML.

Поэтому ваш код HTML может работать не совсем правильно.

Далее идет тег html, и это тег, внутри которого содержится весь html-документ.

После тега html идет тег head. И тег head содержит элементы, относящиеся к описанию содержимого страницы.

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

Тег head также может содержать заголовок страницы, это тег title, и ссылки на любые ресурсы, необходимые для правильного отображения страницы.

Таким образом, тег head содержит метаданные об основном контенте страницы.