Содержание
- 2. Основные компоненты сайта
- 3. Основные компоненты сайта
- 4. Работа с браузером
- 5. Браузер Программа, основное предназначение которой - воспроизводить контент с веб-ресурсов
- 6. Основные компоненты браузера Пользовательский интерфейс Движок браузера Движок отображения Сетевая подсистема Исполнительная часть пользовательского интерфейса Интерпретатор
- 7. Механизм браузера Адресная строка для ввода URI (унифицированного идентификатора ресурсов) Элементы навигации (кнопки “вперед”, “назад”) Меню
- 8. Движок браузера управляет взаимодействием интерфейса и модуля отображения Движок отображения отвечает за отображение информации на экране
- 9. Сетевая подсистема отвечает за запросы по сети (например, HTTP-запросы) Исполнительная часть пользовательского интерфейса отвечает за отрисовку
- 10. Интерпретатор JavaScript используется для синтаксического анализа и выполнения кода JavaScript Хранилище данных браузер сохраняет на жесткий
- 11. Инструменты разработчика (devtools) Инструменты разработчика используются для отладки кода, выявления и исправления ошибок в коде Самые
- 12. Инструменты разработчика (devtools) При открытии инструментов разработчика по умолчанию откроется вкладка Console Точный внешний вид инструментов
- 13. Инструменты разработчика (devtools) Вкладка Elements используется для просмотра и редактирования любых HTML элементов на странице, css-стилей
- 14. Инструменты разработчика (devtools) Во вкладке Elements есть кнопки выбор элемента с помощью курсора переключение в режим
- 15. Инструменты разработчика (devtools) Во вкладке Elements есть кнопки выбор элемента с помощью курсора переключение в режим
- 16. Инструменты разработчика (devtools) Вкладка Sourse: можно посмотреть все файлы подключенные на странице используется для откладки JavaScript-кода
- 17. Найдите инструменты разработки в вашем браузере и попробуйте открывать их на различных сайтах (лучше использовать браузер
- 18. Редакторы кода, настройка редактора
- 19. Редакторы кода Для написания кода может подойти любой редактор, наподобие обычного текстового редактора, даже «блокнот» НО!
- 20. Установка Visual Studio Code Скачать Visual Studio Code: https://code.visualstudio.com/ Стандартная установка программы После установки при открытии
- 21. Что такое HTML
- 22. HTML HTML (от англ. HyperText Markup Language) - язык разметки гипертекста. позволяет создавать и структурировать элементы
- 23. HTML Создан физиком из исследовательского института ЦЕРН в Швейцарии Тимом Бернерсом-Ли Первая версия HTML появилась в
- 24. HTML HTML-файл состоит из тегов - команд, которые преобразовываются в визуальные объекты в браузере Пример простейшего
- 25. Что такое DOM
- 26. DOM DOM (Document Object Model) - объектная модель документа HTML-код анализируется и преобразуется браузером впоследствии в
- 27. DOM Визуальное представление DOM можно увидеть в инструментах разработчика во вкладке Elements DOM-дерево
- 28. DOM DOM-дерево каждый узел дерева - объект теги являются узлами - элементами (образуют структуру дерева) у
- 29. DOM В DOM закрываются незакрытые в HTML- документе теги В DOM добавляются обязательные теги, даже если
- 30. Синтаксис и теги HTML
- 31. Синтаксис HTML HTML состоит из элементов Элемент - базовая сущность веб-страницы Все элементы делятся по типу
- 32. Теги HTML Элемент = открывающий тег + контент + закрывающий тег
- 33. Теги HTML Теги не чувствительны к регистру, могут быть записаны как строчными, так и заглавными буквами
- 34. Типы элементов HTML По типу элементы бывают: пустые - у которых нет закрывающего тега и содержимого
- 35. Комментарии в HTML В HTML, как и в языках программирования, есть возможность писать комментарии в коде
- 36. Базовая структура страницы
- 37. Базовая структура HTML документа Тестовая страница Hello, world!
- 38. Создайте в редакторе кода новый файл с расширением .html Скопируйте код с предыдущего слайда и вставьте
- 39. Атрибуты
- 40. Атрибуты Атрибуты тегов расширяют возможности самих тегов и позволяют гибко управлять различными настройками отображения элементов веб-страницы
- 41. Атрибуты Атрибут должен иметь: Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента
- 43. Скачать презентацию