HTML конспект. Основные компоненты сайта Визуальное представление сайта
 Скачать 3.05 Mb.
|
|
Основные компоненты сайта • Визуальное представление сайта • Расположение контента на странице • Описание взаимодействия пользователя с сайтом Дизайн • Написание кода HTML и CSS по дизайн-макету • Кроссбраузерность • Адаптивность под устройства разных размеров Верстка • Визуальные эффекты • Логика взаимодействия пользователя с элементами • Вычисления Программирован ие Основные компоненты сайта • Вычисления • Ответ на запросы клиентской части Серверная часть • Содержимое сайта (текст, картинки, видео и др. файлы) • Наполнение веб- страницы смыслом Контент • Доменное имя - уникальный адрес в сети • Хостинг - место хранения сайта • Система управления содержимым • Управление всеми элементами ресурса через административну ю часть Хостинг и домен CMS Браузер Программа, основное предназначение которой - воспроизводить контент с веб-ресурсов Основные компоненты браузера • Пользовательский интерфейс • Движок браузера • Движок отображения • Сетевая подсистема • Исполнительная часть пользовательского интерфейса • Интерпретатор JavaScript • Хранилище данных • Адресная строка для ввода URI (унифицированного идентификатора ресурсов) • Элементы навигации (кнопки “вперед”, “назад”) • Меню закладок • Другие элементы браузера, кроме окна, в котором отображается запрашиваемая страница • Настройки • управляет взаимодействием интерфейса и модуля отображения • отвечает за отображение информации на экране (обрабатывает HTML и CSS и выводит то, что получилось, на экран) • отвечает за запросы по сети (например, HTTP-запросы) • отвечает за отрисовку базовых компонентов интерфейса, таких, как окна и элементы управления (например, чекбоксов) • применяет методы пользовательского интерфейса конкретной операционной системы • используется для синтаксического анализа и выполнения кода JavaScript • браузер сохраняет на жесткий диск данные различных типов, например файлы cookie, кэш Инструменты разработчика используются для отладки кода, выявления и исправления ошибок в коде Самые удобные инструменты разработчика - у браузеров Chrome и Firefox Открыть devtools можно с помощью • меню (справа показан пример в браузере Chrome) • F12 (работает во многих браузерах), на macOS сочетанием Cmd + Opt + J Далее будем рассматривать инструменты разработчика в браузере Chrome При открытии инструментов разработчика по умолчанию откроется вкладка Console Точный внешний вид инструментов разработки зависит от используемой версии браузера • Сообщения об ошибках (красным цветом) • Предупреждения (желтым цветом) • Синий символ > обозначает командную строку (в ней можно запускать JavaScript-команды) Вкладка Elements используется для просмотра и редактирования любых HTML элементов на странице, css- стилей Во вкладке Elements есть кнопки • выбор элемента с помощью курсора • переключение в режим выбора устройств выбор элемента с помощью курсора Во вкладке Elements есть кнопки • выбор элемента с помощью курсора • переключение в режим выбора устройств переключение в режим выбора устройств Вкладка Sourse: • можно посмотреть все файлы подключенные на странице • используется для откладки JavaScript- кода Вкладка Network: • мониторинг процесс загрузки страницы и всех файлов, которые подгружаются при загрузке. • оптимизация загрузки страниц • Подробная информация о каждом запросе • Найдите инструменты разработки в вашем браузере и попробуйте открывать их на различных сайтах (лучше использовать браузер Chrome или Firefox ) • Обратите внимание, есть ли во вкладке Console какие-либо сообщения, ошибки и т.д. • Зайдите во вкладку Elements и попробуйте перейти к коду какого-нибудь элемента с помощью инструмента «выбор элемента с помощью курсора» • Посмотрите, как сайт будет выглядеть на различных устройствах с помощью инструмента «переключение в режим выбора устройств» Для написания кода может подойти любой редактор, наподобие обычного текстового редактора, даже «блокнот» НО! Нам нужен редактор, в котором будет удобно работать, в котором будет отображаться структура проекта, в котором будут подсказки по синтаксису кода В дальнейшем мы будем работать с редактором Visual Studio Code Скачать Visual Studio Code: https://code.visualstudio.com/ Стандартная установка программы После установки при открытии Visual Studio Code появится приветственная страница HTML (от англ. HyperText Markup Language) - язык разметки гипертекста. • позволяет создавать и структурировать элементы на веб- странице • дает понять браузеру, как нужно отобразить сайт HyperText Ссылки, которые соединяют веб- страницы друг с другом Markup Разметка для отображения текста, изображений, блоков и других элементов в веб-браузере • Создан физиком из исследовательского института ЦЕРН в Швейцарии Тимом Бернерсом-Ли • Первая версия HTML появилась в 1866 -1991 г. • На данный момент существует 5 версий HTML • Самое большое обновление - в 2014 г. вышла версия HTML5 • HTML считается официальным веб-стандартом • НЕ является языком программирования HTML-файл состоит из тегов - команд, которые преобразовываются в визуальные объекты в браузере Пример простейшего HTML-документа Отображение данного HTML-документа в браузере DOM (Document Object Model) - объектная модель документа HTML-код анализируется и преобразуется браузером впоследствии в DOM. Модель HTML DOM представляется в виде дерева объектов. Докумен т Корневой элемент Элемент Элемент Элемент Элемент
|