Программирование для веб-дизайна 101: как работают HTML, CSS и JavaScript

Следующая статья поможет вам: Программирование для веб-дизайна 101: как работают HTML, CSS и JavaScript

Вы когда-нибудь задумывались, как работает компьютерное программирование, но не делали ничего более сложного в Интернете, чем загрузить фотографию на Facebook?

Тогда вы находитесь в правильном месте.

Для тех, кто никогда раньше не программировал, концепция создания веб-сайта с нуля — макет, дизайн и все остальное — может показаться действительно пугающей. Вы можете представить себе студентов Гарварда из фильма, сидящих за своими компьютерами в гигантских наушниках и набирающих код, и думаете про себя: «Я бы никогда не смог этого сделать».

На самом деле, вы можете.

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

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

Что такое язык программирования?

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

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

Программирование в веб-разработке

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

Каждая страница в Интернете, которую вы посещаете, построена с использованием последовательности отдельных инструкций, следующих друг за другом. Ваш браузер (Chrome, Firefox, Safari и т. д.) играет большую роль в преобразовании кода во что-то, что мы можем видеть на наших экранах и даже взаимодействовать с ним. Можно легко забыть, что код без браузера — это просто текстовый файл — когда вы помещаете этот текстовый файл в файл, происходит волшебство. Когда вы открываете веб-страницу, ваш браузер извлекает HTML и другие задействованные языки программирования и интерпретирует их.

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

В самом начале 1990-х HTML был единственным языком, доступным в Интернете. Веб-разработчикам приходилось кропотливо кодировать статические сайты, страница за страницей. С тех пор многое изменилось: теперь доступно много языков программирования.

В этом посте я расскажу о HTML, CSS и одном из самых распространенных языков программирования: JavaScript.

HTML, CSS и JavaScript: учебник

Обзор:

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

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

HTML

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

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

Языки разметки работают так же, как только что, когда вы маркировали эти типы контента, за исключением того, что для этого они используют код — в частности, они используют теги HTML, также известные как «элементы». Эти теги имеют довольно интуитивно понятные имена: теги заголовков, теги абзацев, теги изображений и так далее.

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

Например, слова, которые вы сейчас читаете, являются частью абзаца. Если бы я кодировал эту веб-страницу с нуля (вместо использования редактора WYSIWG в CMS HubSpot), я бы начал этот абзац с тега абзаца:

. Часть «тег» обозначается открытыми скобками, а буква «p» сообщает компьютеру, что мы открываем абзац вместо содержимого какого-либо другого типа.

После открытия тега предполагается, что весь последующий контент является частью этого тега, пока вы не «закроете» тег. Когда абзац заканчивается, я бы поставил закрывающий тег абзаца:

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

Это абзац.

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

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

CSS

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

Если HTML — это гипсокартон, то CSS — это краска.

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

Чтобы показать вам, что CSS делает с веб-сайтом, посмотрите на следующие два снимка экрана. Первый снимок экрана — это сообщение в блоге моего коллеги, но показанное в Basic HTML, а второй снимок экрана — это то же сообщение в блоге с HTML CSS.

Пример HTML (без CSS)

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

Пример HTML+CSS

Разве это не красивее?

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

Видите ли, HTML, разработанный еще в 1990 году, на самом деле не предназначался для отображения информации о физическом форматировании. Первоначально он предназначался только для определения структурного содержимого документа, такого как заголовки и абзацы. HTML перерос эти новые конструктивные особенности, а CSS был изобретен и выпущен в 1996 году: все форматирование можно было удалить из HTML-документов и сохранить в отдельных файлах CSS (.css).

Итак, что именно означает CSS? Это означает каскадные таблицы стилей, а «таблица стилей» относится к самому документу. У любого веб-браузера есть таблица стилей по умолчанию, поэтому на каждую веб-страницу влияет по крайней мере одна таблица стилей — таблица стилей по умолчанию любого браузера, который использует посетитель веб-страницы — независимо от того, применяет ли веб-дизайнер какие-либо стили. . Например, стиль шрифта по умолчанию в моем браузере — Times New Roman, размер 12, поэтому, если бы я посетил веб-страницу, где дизайнер не применил собственную таблицу стилей, я бы увидел веб-страницу, набранную шрифтом Times New Roman, размер 12. .

Очевидно, что подавляющее большинство веб-страниц, которые я посещаю, не используют шрифт Times New Roman 12 размера — это потому, что веб-дизайнеры этих страниц начали с таблицы стилей по умолчанию, которая имела стиль шрифта по умолчанию, а затем они переопределили настройки моего браузера. значения по умолчанию с пользовательским CSS. Вот где слово «каскад» вступает в игру. Подумайте о водопаде: когда вода стекает вниз, она попадает во все камни на пути вниз, но только камни на дне влияют на то, куда она в конечном итоге потечет. Точно так же последняя определенная таблица стилей сообщает моему браузеру, какие инструкции имеют приоритет.

Чтобы изучить особенности программирования в CSS, я снова укажу вам на бесплатные курсы и ресурсы на Кодакадемия. А пока давайте немного поговорим о JavaScript.

JavaScript

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

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

Создание окон подтверждения

Одним из примеров JavaScript в действии являются всплывающие окна на экране. Вспомните, когда вы в последний раз вводили свою информацию в онлайн-форму и появлялось окно подтверждения, в котором вас просили нажать «ОК» или «Отмена», чтобы продолжить. Это стало возможным благодаря JavaScript — в коде вы найдете оператор «если… иначе…», который говорит компьютеру делать одно, если пользователь нажимает «ОК», и другое, если пользователь нажимает «Отмена».

Активация всплывающих призывов к действию

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

Хранение новой информации

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

функция updateFirstname() {

let Имя = prompt(‘Имя’);

}

Затем, после того как посетитель веб-сайта введет свое имя и любую другую информацию, которая вам потребуется на целевой странице, и отправит форму, это действие обновит идентификатор изначально неопределенного элемента «Имя» в вашем коде. Вот как вы можете отблагодарить посетителя веб-сайта по имени в JavaScript:

para.textContent=”Спасибо, ” + Имя + “! Теперь вы можете загрузить свою электронную книгу.”

В приведенной выше строке JavaScript элементу «Имя» было присвоено имя посетителя веб-сайта, и, следовательно, оно будет отображать его или ее фактическое имя во внешнем интерфейсе веб-страницы. Для пользователя по имени Кевин это предложение будет выглядеть так:

Безопасность, игры и спецэффекты

Другие области применения JavaScript включают создание пароля безопасности, контрольные формы, интерактивные игры, анимацию и специальные эффекты. Он также используется для создания мобильных приложений и создания серверных приложений. Вы можете добавить JavaScript в документ HTML, добавив эти «скрипты» или фрагменты кода JavaScript в заголовок или тело документа.

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

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

Поверь мне, ты почувствуешь себя лучше.