Верстка. Введение

1.

ВЕРСТКА

2.

FRONT END
BACK END
Бэкэнд — это как склад за витриной. Там хранятся все
игрушки, которые ты видишь на витрине. На складе
происходит много работы: кто-то приносит новые
игрушки, кто-то их упаковывает и готовит для
витрины. Ты этого не видишь, но без этого витрина
была бы пустой.
Фронтэнд — это как витрина магазина,
где всё красиво и понятно. Ты видишь
игрушки, можешь их потрогать, поиграть с
ними и выбрать, что тебе нравится. Это та
часть, которую ты видишь и с которой
взаимодействуешь.

3.

ДОМЕН
ХОСТИНГ
Домен — это как адрес твоего домика.
Например, "КукольныйДомик.ру". Если кто-то
захочет найти твой домик, он просто введёт
этот адрес, и его туда приведёт. Домен — это
имя сайта, которое ты пишешь в интернете,
чтобы попасть на нужную страницу.
Хостинг — это как земля, на которой стоит твой
домик. Это место, где хранятся все твои игрушки
(файлы сайта: картинки, тексты, видео). Хостинг
— это услуга, которая позволяет твоему сайту
"жить" в интернете, чтобы его могли увидеть
другие.
Так что:
• Домен — это адрес.
• Хостинг — это место, где хранится сайт.

4.

HTML — это язык разметки. Он создаёт
структуру сайта: где будет заголовок, текст,
картинка или кнопка. Это как "скелет" сайта.
CSS — это язык стилей. Он отвечает за
внешний вид сайта: цвета, шрифты, отступы,
анимации и многое другое. Это как "одежда" для
сайта.
Если коротко:
• HTML — что на сайте.
• CSS — как это выглядит.
HTML
CSS

5.

Гипертекст — это текст, который содержит ссылки на
другие тексты или ресурсы. Проще говоря, это текст,
который позволяет переходить от одного документа к
другому с помощью клика по ссылке.
Например, если ты читаешь статью и видишь слово,
выделенное синим цветом (ссылка), то, нажав на него, ты
попадёшь на другую страницу с дополнительной
информацией. Это и есть гипертекст.
ГИППЕРТЕКСТ

6.

ИНТЕРПРИТАЦИЯ
• Это как переводчик, который переводит
текст с одного языка на другой построчно и
сразу выполняет то, что прочитал.
• Программа читает код шаг за шагом,
выполняет его и сразу показывает
результат.
• Пример: Python, JavaScript.
Плюсы:
• Можно быстро запускать код без
предварительной подготовки.
• Удобно для тестирования и отладки.
Минусы:
• Медленнее, потому что каждый раз код
переводится заново.

7.

КОМПИЛЯЦИЯ
• Это как перевод всей книги на другой язык заранее,
чтобы потом её можно было просто читать.
• Программа (компилятор) превращает весь код в
машинный язык (бинарный файл), который компьютер
может выполнить сразу.
• Пример: C, C++.
Плюсы:
• Быстрее выполняется, потому что код уже переведён в
машинный язык.
• Оптимизирован для работы.
Минусы:
• Нужно компилировать код перед запуском, что занимает
время.

8.

CODEPEN

9.

АТРИБУТЫ
И
ТЭГИ
Теги — это как "команды" для браузера. Они говорят,
как отображать содержимое на странице. Теги всегда
заключаются в угловые скобки, например: <тег>.
Примеры:
• <p> — это тег для абзаца текста.
• <h1> — это тег для заголовка.
• <img> — это тег для картинки.
<h1>Title<\h1>

10.

Атрибуты — это дополнительные "настройки" для тегов.
Они всегда пишутся внутри открывающего тега и
помогают уточнить, как именно должен работать тег.
<a href="https://example.com">Нажми на меня</a>

11.

Тэг <h1>-<h6> - тэги заголовков.
Текст будет отображаться большим и
жирным. 1-6 различается только
размером

12.

<p> - абзац
<b> - жирный шрифт
<i> - курсив

13.

САМОСТОЯТЕЛЬНО
Если нам нужно добавить прямую линию после параграфа, можно
воспользоваться <hr>
Чтобы перенести текст на новую строку, не добавляя
абзац, нужно дописать <br>. Данный тег следует использовать для переноса строк, но не для выделения абзацев.