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

1656021134 izuchite osnovy veb razrabotki – html css i javascript obyasneniya dlya

Содержание статьи

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что такое HTML?

HTML означает Язык разметки гипертекста.

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

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

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

Но в контексте веб-разработки мы можем заменить термин «печатный» на «воспроизведенный» как более точный термин.

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="
  <title>Document</title>
</head>
<body>
  <h1>This is a first level heading in HTML. With CSS, I will turn this into red color</h1>
  <h2>This is a second level heading in HTML. With CSS, I will turn this into blue color</h2>
  <h3>This is a third level heading in HTML. With CSS, I will turn this into green color</h3>
  <p>This is a <em>paragragh</em> As you can see, I placed an empahisis on the word "paragraph". Now, I will change also
    the background color of the word "paragraph" to black, and its text color  to green, all with just CSS.</p>
  <p>The main essence of this tutorial is to:</p>
    <ul>
       <li>Show you how to format a web document with HTML</li>
       <li>Show you how to design a web page with CSS</li>
       <li>Show you how to program a web document with JavaScript</li>
    </ul>

  <p>Next, I am going to add the following two numbers and display the result, all with JavaScript<p/>
    <p>First number:<span id= "firstNum">2</span> <br></p>
    <p>Second number: <span id= "secondNum">7</span> </p>
    <p>Therefore, the sum of the two of those numbers is: <span id= "answer">(placeholder for the answer)</span></p>
    <input type="button" id="sumButton" value="Click to add!">
</body>
</html>

index.html

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

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

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

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

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

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

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

Хотите узнать больше о HTML? Вы можете начать с сертификации FreeCodeCamp Responsive Web Design и этого совершенно нового полного курса HTML от Бо Карнеса.

Что такое CSS?

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

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

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

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

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

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

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

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

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

h1 {
  background-color: #ff0000;
}

h2 {
  background-color: #0000FF;
}

h3 {
  background-color: #00FF00;
}

em {
  background-color: #000000;
  color: #ffffff;
}

localhost:3000/styles.css

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

Круто, верно?

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

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

Что такое JavaScript?

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

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

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

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

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

Вы можете получить доступ к любым элементам через API объектной модели документа (DOM) и изменить их, как вы хотите.

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

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

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

JavaScript позволяет создать свою веб-страницу «думай и действуй»что и состоит в программировании.

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

CSS-1 — При нажатии кнопки «Получить сумму» отобразится сумма 2 и 7.

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

function displaySum() {
  let firstNum = Number(document.getElementById('firstNum').innerHTML)
  let secondNum = Number(document.getElementById('secondNum').innerHTML)

  let total = firstNum + secondNum;
  document.getElementById("answer").innerHTML = ` ${firstNum} + ${secondNum}, equals to ${total}` ;
}

document.getElementById('sumButton').addEventListener("click", displaySum);

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

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

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

Поэтому благодаря этому:

// id attribute has been set in all three

<span id= "firstNum">2</span> <br> 
    ...<span id= "secondNum">7</span> 
    ...... <span id= "answer">(placeholder for the answer)</span>

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

//getElementById will get all HTML elements by a specific "id" attribute
...
let firstNum = Number(document.getElementById('firstNum').innerHTML)
  let secondNum = Number(document.getElementById('secondNum').innerHTML)

  let total = firstNum + secondNum;
  document.getElementById("answer").innerHTML = ` ${firstNum} + ${secondNum}, equals to ${total}` ;

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

Если вы хотите начать работу с JavaScript, можно ознакомиться с сертификацией freeCodeCamp JavaScript Algorithms and Structures. И вы можете использовать этот отличный курс Intro to JS, чтобы дополнить свое обучение.

Как объединить HTML, CSS и JavaScript вместе

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

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

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

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

Подведению

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

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

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

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

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

Но основной факт остается: HTML, CSS и JavaScript являются основными языками Интернета.

Вот и все. Объяснение языков Интернета в основных терминах. Я очень надеюсь, что вы получили что-нибудь полезное из этой статьи.

Завершая статью, мне есть чем поделиться. Я недавно начал а еженедельная серия задач по кодированию направлен на обучение начинающих программировать на JavaScript. Проверьте это на моем блоге.

Спасибо, что читаете и до встречи.

P/S: Если вы изучаете JavaScript, я создал электронную книгу, излагающую 50 тем JavaScript с нарисованными от руки цифровыми заметками. Проверьте это здесь.