Кратко про 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" src="script.js">
</head>
<body>
    <h1>Заголовок</h1>
    <p>А это параграф</p>
    <button>Кнопка</button>
</body>
</html>

Обработка кода браузером

1. Построение дерева элементов

Браузер загружает HTML-страницу, анализирует ее структуру и строит иерархическое представление элементов – DOM (Document Object Model)

2. Применение стилей

После построения DOM браузер применяет CSS стили, определяя внешний вид элементов, который увидит пользователь

3. Исполнение скриптов

Затем он исполняет JavaScript код, который может изменять содержимое страницы, добавлять анимацию и обрабатывать действия пользователя

До обработки браузером

<body>
    <h1 style="color: blue">Заголовок</h1>
    <p style="border: dashed">А это параграф</p>
    <button style="width: 50px">Кнопка</button>
</body>

После обработки браузером

Заголовок

А это параграф

Элементы интерфейса в 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 по шагам

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

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

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

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

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

3. Напишем JS скрипт: теперь калькулятор может реагировать на действия пользователя и производить вычисления.

0. TEXT

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

1. TEXT + HTML

2. TEXT + HTML + CSS

3. TEXT + HTML + CSS + JS

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

Задача