Изучение основ веб-разработки – HTML, CSS и JavaScript для начинающих

Кингсли Убах

Если вы изучаете веб-разработку, вы можете столкнуться с такими терминами, как HTML, CSS и JavaScript. Их часто называют строительными блоками Интернета.

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

Вы также узнаете, что веб-сайты в основном создаются на основе этих трех языков.

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

Что ж, теперь вам больше не нужно задаваться этим вопросом.

В этой статье я объясню основы HTML, CSS и JavaScript, расскажу, как они помогают работать в Интернете и что они делают сами по себе.

Что такое Интернет?

Интернет – это просто сеть компьютеров, которые взаимодействуют друг с другом для отправки и получения данных (информации).

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

Что такое Интернет?

Сеть – это подмножество Интернета.

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

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

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

Именно здесь в игру вступают HTML, CSS, JavaScript и вся концепция веб-разработки.

Что такое HTML?

HTML расшифровывается как Hyper Text Markup Language.

Dictionary.com определяет разметку как:

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

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

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

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

Чтобы проиллюстрировать, как выглядит страница, давайте создадим базовый HTML-документ:

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

• Заголовок 1 уровня h1
• Заголовок 2-го уровня h2
• Заголовок третьего уровня h3
• Абзац p
• Неупорядоченный список с пулевыми точками ul li
• Кнопка ввода input
• И все тело страницы

Вот как эта разметка отображается в веб-браузере:

localhost:3000/index.html

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

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

Думайте об этом атрибуте так же, как о своем имени пользователя в социальных сетях. С помощью этого имени другие могут найти вас в социальных сетях. Кроме того, кто-то может сослаться на вас или упомянуть вас с этим именем (вы можете получить метку в сообщении и т.д.).

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

Что такое CSS?

Если HTML – это язык разметки, используемый для форматирования/структурирования веб-страницы, то CSS – это язык дизайна, который используется для придания веб-странице красивого и презентабельного вида.

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

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

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

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

Правила, которые управляют этим процессом, называются селекторами CSS.

С помощью CSS вы можете задать цвет и фон ваших элементов, а также шрифт, поля, интервалы, отступы и многое другое.

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

Чтобы проиллюстрировать работу CSS, я поделюсь кодом, который устанавливает цвет фона заголовков трех уровней на красный, синий и зеленый соответственно:

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

Мы получаем доступ к каждому из элементов, над которыми хотим поработать, “выбирая” их. h1 выбирает все заголовки первого уровня на странице, h2 – элементы второго уровня, и так далее. Вы можете выбрать любой отдельный элемент HTML и указать, как он должен выглядеть или располагаться.

Хотите узнать больше о CSS? Для начала вы можете ознакомиться со второй частью сертификации freeCodeCamp по Responsive Web Design.

Что такое JavaScript?

Если HTML – это язык разметки, а CSS – язык дизайна, то JavaScript – это язык программирования.

Если вы не знаете, что такое программирование, подумайте о некоторых действиях, которые вы совершаете в повседневной жизни:

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

Вы рассчитываете расстояние до машин.

DOM – это древовидное представление веб-страницы, которая загружается в браузер.

Каждый элемент веб-страницы представлен в DOM.

Благодаря DOM мы можем использовать такие методы, как getElementById() для доступа к элементам нашей веб-страницы.

JavaScript позволяет вам заставить вашу веб-страницу “думать и действовать”, что и есть суть программирования.

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

При нажатии на кнопку “Получить сумму” отображается сумма 2 и 7

Этот код иллюстрирует, как можно выполнять вычисления с помощью JavaScript:

Помните, что я рассказывал вам об атрибутах HTML и их использовании? Этот код отображает именно это.

DisplaySum – это функция, которая получает оба элемента с веб-страницы, преобразует их в числа (с помощью метода Number), суммирует их и передает в качестве внутренних значений другому элементу.

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

Благодаря этому

Мы смогли это сделать:

Наконец, после нажатия на кнопку вы увидите сумму двух чисел на обновленной странице:

2 плюс 7 равно 9

Если вы хотите начать работу с JavaScript, вы можете ознакомиться с сертификацией FreeCodeCamp по JavaScript Algorithms and Data Structures. Также вы можете использовать этот замечательный курс “Введение в JS” в качестве дополнения к своему обучению.

Как использовать HTML, CSS и JavaScript вместе

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

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

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

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

Подведение итогов

Как веб-разработчик, мы используем три основных языка для создания веб-сайтов: HTML, CSS и JavaScript.

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

В наши дни CSS стал не просто языком дизайна. С помощью CSS можно реализовать анимацию и плавные переходы.

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

JavaScript также вышел за рамки использования только в браузере. Теперь мы используем его на сервере благодаря Node.js .

Но основной факт остается фактом: HTM