1 of 18

Верстка �(быстрый старт)

​

Атнагулов Артур

29.01.2021

1

Проектная школа

2 of 18

Клиент

Сервер

2

3 of 18

Клиент — �запрашивает и иногда получает данные

...

3

4 of 18

Сервер — �получает и обрабатывает запросы, возвращает ответ

Мощный компьютер

4

5 of 18

5

6 of 18

Frontend

Backend

  • Разметка страницы (HTML)
  • Данные для фронтенда (JSON)
  • или файлы, но это не так интересно

6

7 of 18

Сервер возвращает HTML-код страницы

CTRL+U

7

8 of 18

Сервер возвращает только данные

F12 / Network

8

9 of 18

Backend (сервер)

Frontend (клиент)

  • Обслуживает запросы
  • Работает с базой данных и другими хранилищами
  • Отображает данные
  • Отправляет запросы на сервер
  • Изменяет внешний вид в зависимости от ответов сервера

9

10 of 18

Чуток определений

HTTP — протокол передачи гипертекста. Один из основных протоколов, на базе которого работает веб.

HTML — язык гипертекстовой разметки, на нем описывается содержание веб-страниц

JSON — JavaScript Object Notation — формат обмена данными между приложениями

10

11 of 18

Backend (сервер)

Frontend (клиент)

11

12 of 18

HTML + CSS + JavaScript

Технологии для разработки сайтов

  • HTML — разметка
  • CSS — оформление
  • JavaScript — интерактивность�не путать с Java, это совершенно разные языки

12

13 of 18

Сайт без CSS

13

14 of 18

HTML

  • База: html, head, body
  • Типографика: h1...h6, p, b, i, br
  • Списки: ul, ol, li
  • Таблицы: table, tr, td
  • Ссылки: a, target=”_blank”
  • Медиа: img, audio, video
  • Информация: title, meta
  • Формы: form, input, select, option, button
  • Подробнее http://htmlbook.ru/html

14

15 of 18

CSS

  • Подключение: �<link rel=”stylesheet” href=”style.css”>
  • Селекторы: #id, .class, .nested .selector, tagname
  • Сброс: * { margin: 0; padding: 0; }
  • Отступы и размеры: margin, padding, height, width
  • Текст: font-family, font-size, font-weight, text-align
  • Цвета: color, background-color, background-image
  • Блочное выравнивание: float
  • Рамка: border, border-radius
  • Подробнее http://htmlbook.ru/css

15

16 of 18

есть вещи получше float

16

https://twitter.com/aarexer/status/1354520535124877320

17 of 18

JavaScript

  • Подключение: <script src=””>
  • Подробнее https://learn.javascript.ru/

17

18 of 18

https://getbootstrap.com/

18