Кратко про HTML, CSS и JS

Любая страница в интернете — это код.

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

HTML разметка (HyperText Markup Language) описывает структуру и содержимое страницы.
CSS стили (Cascading Style Sheets) задают визуальный стиль страницы: цвета, шрифты, отступы, размеры и подобное.
JS скрипты (JavaScript) добавляют динамики.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" href="script.js">
</head>
<body>
    <h1>Заголовок</h1>
    <p>А это параграф</p>
    <button>Кнопка</button>
</body>
</html>

Элементы интерфейса в HTML коде

Элементы интерфейса в HTML коде описываются при помощи тэгов.

Тэг — специальная разметка для создания структуры страницы. Теги заключаются в угловые скобки и часто идут парами: открывающий тег <tag> и закрывающий тег </tag>. Полный список тэгов можно посмотреть тут.

Внутри открывающего тега могут быть определены атрибуты — свойства элемента: id (уникальный идентификатор элемента), type, name, style и другие.

Элемент	HTML код
Да Нет	`<input type="radio" name="answer" value="Yes"> Да <input type="radio" name="answer" value="No"> Нет`
Орешки Карамель	`<input type="checkbox" name="toppings" value="Nuts"> Орешки <input type="checkbox" name="toppings" value="Caramel"> Карамель`
	`<input type="text" name="field-name" placeholder="Введите текст">`
	`<textarea name="textarea-name" placeholder="Введите текст"></textarea>`
	`<button>Нажми меня!</button>`

Из простого текста в HTML + CSS + JS по шагам

Напишем веб-калькулятор.

1. Первым шагом подготовим содержимое нашей страницы — текст, который будет отображаться на кнопках.

2. Превратим простой текст в HTML страницу. Логически сгруппируем содержимое и опишем элементы, используя тэги:

<button>C</button>, <button>+</button>, <button>7</button>...
<input type="text" placeholder="0" readonly>

3. Добавим CSS: зададим шрифт, размеры элементов, цветовую схему.

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

1. TEXT

C / X - 7 8 9 + 4 5 6 = 1 2 3 0

2. TEXT + HTML

3. TEXT + HTML + CSS

4. TEXT + HTML + CSS + JS

HTML структуру и CSS стили каждого из четырех прототипов калькулятора можно посмотреть через DevTools Elements, а дополнительно загружаемые файлы с JavaScript кодом — в DevTools Sources.

Задача