Введение
Современные возможности веб-ресурсов впечатляют. Вы можете создавать веб-интерфейсы, которые выполняются на всех устройствах, включать все виды содержимого мультимедиа и выполнять сложные вычисления. Вы можете даже создавать приложения, которые выглядят и чувствуют себя как собственные приложения.
Если вы заинтересованы в начале веб-разработки сегодня, вы можете столкнуться с головокружительным массивом вариантов. В этом модуле рассматриваются основные компоненты веб-сайта и средства, с помощью которых можно начать веб-разработку. Вы будете использовать HTML, CSS и JavaScript вместе для создания веб-сайта, а затем использовать средства разработчика в браузере, чтобы понять, что происходит.
С помощью этих фундаментальных знаний вы будете иметь лучший контекст для принятия решений в будущем при создании веб-сайтов; Например, следует ли выбирать платформы JavaScript или создавать собственные функции JavaScript для создания веб-сайта.
Давайте начнем, глядя на то, где мы хотим пойти.
Сценарий
Представим, что вы веб-разработчик, которому компания поручила сделать веб-сайт привлекательным для широкого круга клиентов. Чтобы ваши клиенты могли настраивать интерфейс на веб-сайте, вы решаете добавить поддержку светлой и темной тем. Вы создаете небольшой веб-сайт с поддержкой тем на основе CSS для проверки концепции и пишете функцию JavaScript, которая позволяет переключать темы.
По завершении веб-сайт выглядит следующим образом, когда выбрана темная тема:
Из чего состоит веб-страница?
Содержимое, стиль и интерактивная логика разделены на файлы HTML, CSS и JavaScript соответственно. Принцип проектирования в современном программировании — разделение проблем. Среди множества причин разделения областей ответственности можно выделить простоту и возможность многократного использования. Например, применение стилей к элементам HTML с помощью CSS позволяет упростить код HTML. Вместо того, чтобы программировать внешний вид каждого элемента, вы применяете стили CSS ко всем элементам на странице независимо от сложности страницы. Кроме того, можно связать несколько страниц HTML с одним файлом CSS, чтобы согласовать внешний вид и поведение для всего веб-сайта.