С момента создания всемирной паутины увеличилось число людей, которые стремятся научиться полностью понимать веб-разработку. В современном мире это становится все более и более верным с увеличением числа людей, которые находятся в сети благодаря смартфонам с постоянными мобильными данными и Wi-Fi, что позволяет нам всегда оставаться на связи или иметь возможность подключаться при необходимости.
Проблема в том, что человек может быстро переполниться количеством доступного контента и потеряться в количестве технологий и информации, доступных для этой технологии. Так было и со мной, и если бы я придерживался своих первоначальных планов на раннем этапе, я бы не сбился с пути, на который вскоре вернусь все эти годы спустя. Если вы также хотите научиться программировать или веб-разработке, но слышали такие вещи, как «веб-разработка мертва», я здесь, чтобы сказать вам, что она далеко не мертва. Во всяком случае, он все еще растет более постоянно. И возможности столь же велики, как наше воображение. Эта статья призвана дать вам обзор того, как работает веб-разработка и Интернет в целом. Это позволит вам начать с правильного начала (или моего мнения о правильном начале). Что ж, давайте начнем, сначала давайте выясним, что такое Интернет.
Как понять Интернет
Многие люди часто используют синонимы «веб» и «интернет». Технически это использование не совсем корректно. Очень важно понять различия, чтобы действительно начать понимать веб-разработку. Когда мы говорим «интернет», мы на самом деле имеем в виду огромную сеть подключенных устройств (миллиарды). Эти устройства могут подключаться друг к другу, пока они остаются в Интернете. Когда мы упоминаем «сеть», мы говорим о страницах информации (веб-страницах), которые мы можем просматривать в Интернете с устройства. Эти веб-страницы живут на разных серверах, которые прослушивают запросы от «клиентов». Клиентом, например, может быть веб-браузер, такой как chrome.
Протокол HTTP, объяснение HTTP
Поскольку существуют правила того, как мы говорим друг с другом (например, ожидание, пока кто-то закончит говорить, прежде чем начать говорить), существуют также правила, регулирующие и контролирующие поток информации в Интернете. Все эти правила встроены в HTTP. HTTP – это сокращенная версия протокола передачи гипертекста. Он определяет способ передачи и форматирования данных и сообщений. Кроме того, он определяет путь, по которому должны идти сервер и браузер при ответе на все различные команды.
Цикл запроса/ответа
Понимание цикла запроса/ответа необходимо для понимания веб-разработки. Когда клиент (например, Chrome) отправляет запрос на сайт, такой как weWillCode.com, этот запрос отправляется через Интернет и принимается сервером weWillCode (если он существует, работает правильно и вы подключены к Интернету) . Затем, в зависимости от запроса, сервер отвечает соответствующим образом. На этом сервере будет код, который решает, что делать с этим запросом, и отправляет ответ обратно клиенту. Затем этот ответ принимается клиентом (chrome) и интерпретируется (помимо веб-браузеров существуют и другие типы клиентов, подробнее здесь).
Создание веб-страниц
Как только вы поймете анатомию HTTP-запросов и поймете, что мы можем сделать запрос, а также получить ответ, мы захотим спросить, как можно создать веб-страницу?
Выучить HTML
I.M.O. Лучший способ изучить основы HTML
HTML — это язык Интернета, и понимание того, как добавить структуру к пустой веб-странице, — это первый шаг. HTML (сокращение от языка гипертекстовой разметки — это язык, который позволяет нам определять структуру и содержимое веб-страницы. HTML-код состоит из тегов. Например, если я хочу создать заголовок с плиткой «Hello World » и абзац «Привет всем на земле» я бы напечатал:
‹h1›Привет, планета‹/h1›
‹p›Привет всем на планете Земля‹/p›
Это распечатает:
Привет планета
Привет всем на планете Земля
Изучение HTML поможет вам понять язык, на котором построены многие веб-страницы.
Изучайте CSS
I.M.O. Один из лучших способов изучить основы CSS
После того, как вы поймете, как HTML позволяет нам добавлять структуру на страницу, вы можете приступить к изучению стилей. CSS, сокращение от Cascading Style Sheets, позволяет нам решать, как должны отображаться наши HTML-элементы. Вы можете добавить свой CSS в тот же HTML-файл, используя теги стиля (‹style›‹/style›, но лучше создать отдельный файл и включить его в свой HTML-файл (узнайте, как это сделать здесь). Мы можем для таргетинга на элементы на странице, такие как заголовки и абзацы, о которых мы говорили ранее, и добавления к ним определенного стиля. Также можно сгруппировать элементы в классы или указать уникальный элемент с помощью идентификатора. Вот пример таргетинга на заголовок 2 и изменив цвет его шрифта на синий и размер шрифта на 24 пикселя:
h2 {
цвет синий;
размер шрифта: 24px;
}
Это выделит все элементыh2 на странице и изменит их цвет на синий, а размер шрифта — на 24 пикселя. Изучение блочной модели необходимо, когда вы зайдете так далеко. Как только вы узнаете, как элементы расположены в блочной модели, это облегчит создание адаптивных веб-сайтов. После того, как вы почувствуете себя комфортно в своих навыках HTML и CSS, вы можете приступить к изучению аспекта программирования.
Выучить Javascript
I.M.O. Лучший способ изучить основы Javascript
HTML и CSS позволяют нам делать так много. Javascript — это то место, где наконец-то может начаться интерактивность. Javascript также можно включить в ваш HTML-файл с помощью тегов скрипта (‹script›‹/script›), но обычно он находится в другом файле и связан с вашим HTML-кодом (узнайте, как это сделать, здесь). С помощью javascript мы можем начать манипулировать нашей веб-страницей через DOM (объектная модель документа). DOM — это древовидная структура нашего сайта, и с помощью Javascript мы можем изменить DOM, чтобы добавить «события». Событием может быть нажатие кнопки или перемещение мыши. Примером этого может быть нажатие кнопки с надписью «Нажми меня», чтобы обновить пустой элемент абзаца. Браузер прослушивает событие щелчка, и когда это событие происходит, он запускает код в функции события. Пример этого может выглядеть так
‹button onclick="myFunction()"›Нажмите на меня‹/кнопка›
‹p id="демо"›‹/p›
‹сценарий› function myFunction() { document.getElementById("demo").innerHTML = "Hello World"; }
‹/скрипт›
Первоначально опубликовано на сайте believerationally.com 14 декабря 2017 г.
