Из чего состоит сайт

Содержание

Слайд 2

Основные компоненты сайта

Основные компоненты сайта

Слайд 3

Основные компоненты сайта

Основные компоненты сайта

Слайд 4

Работа с браузером

Работа с браузером

Слайд 5

Браузер Программа, основное предназначение которой - воспроизводить контент с веб-ресурсов

Браузер

Программа, основное предназначение которой - воспроизводить контент с веб-ресурсов

Слайд 6

Основные компоненты браузера Пользовательский интерфейс Движок браузера Движок отображения Сетевая подсистема

Основные компоненты браузера

Пользовательский интерфейс

Движок браузера

Движок отображения

Сетевая подсистема

Исполнительная часть пользовательского интерфейса

Интерпретатор JavaScript


Хранилище данных

Слайд 7

Механизм браузера Адресная строка для ввода URI (унифицированного идентификатора ресурсов) Элементы

Механизм браузера

Адресная строка для ввода URI (унифицированного идентификатора ресурсов)

Элементы навигации (кнопки

“вперед”, “назад”)

Меню закладок

Другие элементы браузера, кроме окна, в котором отображается запрашиваемая страница

Настройки

Слайд 8

Движок браузера управляет взаимодействием интерфейса и модуля отображения Движок отображения отвечает

Движок браузера

управляет взаимодействием интерфейса и модуля отображения

Движок отображения

отвечает за отображение информации

на экране (обрабатывает HTML и CSS и выводит то, что получилось, на экран)
Слайд 9

Сетевая подсистема отвечает за запросы по сети (например, HTTP-запросы) Исполнительная часть

Сетевая подсистема

отвечает за запросы по сети (например, HTTP-запросы)

Исполнительная часть пользовательского интерфейса


отвечает за отрисовку базовых компонентов интерфейса, таких, как окна и элементы управления (например, чекбоксов)

применяет методы пользовательского интерфейса конкретной операционной системы

Слайд 10

Интерпретатор JavaScript используется для синтаксического анализа и выполнения кода JavaScript Хранилище

Интерпретатор JavaScript

используется для синтаксического анализа и выполнения кода JavaScript

Хранилище данных

браузер

сохраняет на жесткий диск данные различных типов, например файлы cookie, кэш
Слайд 11

Инструменты разработчика (devtools) Инструменты разработчика используются для отладки кода, выявления и

Инструменты разработчика (devtools)

Инструменты разработчика используются для отладки кода, выявления и исправления

ошибок в коде

Самые удобные инструменты разработчика - у браузеров Chrome и Firefox

Открыть devtools можно с помощью
меню (справа показан пример в браузере Chrome)
F12 (работает во многих браузерах), на macOS сочетанием Cmd + Opt + J

Далее будем рассматривать инструменты разработчика в браузере Chrome

Слайд 12

Инструменты разработчика (devtools) При открытии инструментов разработчика по умолчанию откроется вкладка

Инструменты разработчика (devtools)

При открытии инструментов разработчика по умолчанию откроется вкладка Console

Точный

внешний вид инструментов разработки зависит от используемой версии браузера

Сообщения об ошибках (красным цветом)
Предупреждения (желтым цветом)
Синий символ > обозначает командную строку (в ней можно запускать JavaScript-команды)

Слайд 13

Инструменты разработчика (devtools) Вкладка Elements используется для просмотра и редактирования любых HTML элементов на странице, css-стилей

Инструменты разработчика (devtools)

Вкладка Elements используется для просмотра и редактирования любых HTML

элементов на странице, css-стилей
Слайд 14

Инструменты разработчика (devtools) Во вкладке Elements есть кнопки выбор элемента с

Инструменты разработчика (devtools)

Во вкладке Elements есть кнопки
выбор элемента с помощью

курсора
переключение в режим выбора устройств

выбор элемента с помощью курсора

Слайд 15

Инструменты разработчика (devtools) Во вкладке Elements есть кнопки выбор элемента с

Инструменты разработчика (devtools)

Во вкладке Elements есть кнопки
выбор элемента с помощью

курсора
переключение в режим выбора устройств

переключение в режим выбора устройств

Слайд 16

Инструменты разработчика (devtools) Вкладка Sourse: можно посмотреть все файлы подключенные на

Инструменты разработчика (devtools)

Вкладка Sourse:
можно посмотреть все файлы подключенные на странице
используется

для откладки JavaScript-кода

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

Слайд 17

Найдите инструменты разработки в вашем браузере и попробуйте открывать их на

Найдите инструменты разработки в вашем браузере и попробуйте открывать их на

различных сайтах (лучше использовать браузер Chrome или Firefox )
Обратите внимание, есть ли во вкладке Console какие-либо сообщения, ошибки и т.д.
Зайдите во вкладку Elements и попробуйте перейти к коду какого-нибудь элемента с помощью инструмента «выбор элемента с помощью курсора»
Посмотрите, как сайт будет выглядеть на различных устройствах с помощью инструмента «переключение в режим выбора устройств»

Домашнее задание

Слайд 18

Редакторы кода, настройка редактора

Редакторы кода, настройка редактора

Слайд 19

Редакторы кода Для написания кода может подойти любой редактор, наподобие обычного

Редакторы кода

Для написания кода может подойти любой редактор, наподобие обычного текстового

редактора, даже «блокнот»

НО!

Нам нужен редактор, в котором будет удобно работать, в котором будет отображаться структура проекта, в котором будут подсказки по синтаксису кода

В дальнейшем мы будем работать с редактором Visual Studio Code

Слайд 20

Установка Visual Studio Code Скачать Visual Studio Code: https://code.visualstudio.com/ Стандартная установка

Установка Visual Studio Code

Скачать Visual Studio Code: https://code.visualstudio.com/

Стандартная установка программы

После

установки при открытии Visual Studio Code появится приветственная страница
Слайд 21

Что такое HTML

Что такое HTML

Слайд 22

HTML HTML (от англ. HyperText Markup Language) - язык разметки гипертекста.

HTML

HTML (от англ. HyperText Markup Language) - язык разметки гипертекста.

позволяет создавать

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

HyperText
Ссылки, которые соединяют веб-страницы друг с другом

Markup
Разметка для отображения текста, изображений, блоков и других элементов в веб-браузере

Слайд 23

HTML Создан физиком из исследовательского института ЦЕРН в Швейцарии Тимом Бернерсом-Ли

HTML

Создан физиком из исследовательского института ЦЕРН в Швейцарии Тимом Бернерсом-Ли
Первая версия

HTML появилась в 1866 -1991 г.
На данный момент существует 5 версий HTML
Самое большое обновление - в 2014 г. вышла версия HTML5
HTML считается официальным веб-стандартом
НЕ является языком программирования
Слайд 24

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

HTML

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

в браузере

Пример простейшего HTML-документа

Отображение данного HTML-документа в браузере

Слайд 25

Что такое DOM

Что такое DOM

Слайд 26

DOM DOM (Document Object Model) - объектная модель документа HTML-код анализируется

DOM

DOM (Document Object Model) - объектная модель документа

HTML-код анализируется и преобразуется

браузером впоследствии в DOM. Модель HTML DOM представляется в виде дерева объектов.
Слайд 27

DOM Визуальное представление DOM можно увидеть в инструментах разработчика во вкладке Elements DOM-дерево

DOM

Визуальное представление DOM можно увидеть в инструментах разработчика во вкладке Elements

DOM-дерево

Слайд 28

DOM DOM-дерево каждый узел дерева - объект теги являются узлами -

DOM

DOM-дерево

каждый узел дерева - объект
теги являются узлами - элементами (образуют структуру

дерева)
у узлов есть потомки
Слайд 29

DOM В DOM закрываются незакрытые в HTML- документе теги В DOM

DOM

В DOM закрываются незакрытые в HTML- документе теги
В DOM добавляются обязательные

теги, даже если они не проставлены в HTML- документе
С элементами DOM можно проводить манипуляции с помощью JavaScript (динамическое добавление элементов, изменение, удаление)
DOM - инструмент, с помощью которого JavaScript видит содержимое HTML-страницы и состояние браузера
Слайд 30

Синтаксис и теги HTML

Синтаксис и теги HTML

Слайд 31

Синтаксис HTML HTML состоит из элементов Элемент - базовая сущность веб-страницы

Синтаксис HTML

HTML состоит из элементов
Элемент - базовая сущность веб-страницы
Все

элементы делятся по типу и назначению
Для обозначения начала и конца элемента применяются теги
Слайд 32

Теги HTML Элемент = открывающий тег + контент + закрывающий тег

Теги HTML

Элемент = открывающий тег + контент + закрывающий

тег
Слайд 33

Теги HTML Теги не чувствительны к регистру, могут быть записаны как

Теги HTML

Теги не чувствительны к регистру, могут быть записаны

как строчными, так и заглавными буквами

Например и - сработают оба варианта

НО!

Принято записывать теги в нижнем регистре, то есть в данном случае лучше вариант

Слайд 34

Типы элементов HTML По типу элементы бывают: пустые - у которых

Типы элементов HTML

По типу элементы бывают:

пустые - у которых

нет закрывающего тега и содержимого (например,
или )
Необрабатываемые текстовые элементы - предназначены для вывода скриптов или стилей, имеющих синтаксис отличный от HTML (например,