Информатика
Тема 6: Цифровое творчествоУрок 2: HTML и CSS. Верстка и дизайн
- Видео
- Тренажер
- Теория
Веб-разработчики и дизайнеры часто работают в одних командах. Дизайнеры рисуют макет сайта или приложения в графическом редакторе и затем Frontend-разработчики воплощают его в коде.
Графический редактор — программа для создания, просмотра, обработки и редактирования цифровых изображений на компьютере.
Популярные графические редакторы:
- Векторные: Figma, Adobe Illustrator (платный)
- Растровые: GIMP, Adobe Photoshop (платный, можно работать и с векторной графикой)
Векторная графика состоит из точек и линий и в векторном файле содержатся формулы, поэтому качество картинки не зависит от размера изображаемого объекта. Её можно увеличивать до нужного вам размера. Растровая графика состоит из ячеек с параметрами яркости и цвета. У растрового файла есть заданный размер и при увеличении картинки она начнет пикселить, то есть вы увидите эти самые отдельные ячейки.
Чтобы сайт отобразился в браузере и с ним можно было взаимодействовать, его необходимо реализовать в коде.
Вы можете посмотреть код любого сайта прямо в браузере, нажав правой кнопкой мыши в любом месте экрана и выбрав «Посмотреть код» в меню.
Вы увидите код, который начинается со слов DOCTYPE HTML.
HTML — это язык гипертекстовой разметки документов (HyperText Markup Language). Проще говоря, это набор команд, по которым браузер понимает, что и как отображать на сайте.
Чтобы создать HTML-документ, нужно:
1. Создать текстовый документ в блокноте
2. Написать в начале документа <!DOCTYPE html>
3. Получившийся файл сохранить как <имя_файла>.html
Главный элемент HTML — это теги. От выбора тега зависит, как именно браузер будет отображать данные внутри тега.
Теги находятся внутри угловых скобок, обычно (но не всегда!) каждый тег требует закрывающую пару. Закрывающий тег отличается от открывающего только символом /.
Важная концепция HTML — вложенность. Внутри HTML-тега может быть не только текст, но и другие теги. А некоторые элементы в HTML требуют обязательной вложенности. Например, списки:
Простейшая HTML-страница состоит как минимум из трёх тегов: <html>, <head> и <body>.
<html> — контейнер для всех остальных тегов
<head> — для служебной информации
<body> — для содержимого веб-страницы
Другой базовый элемент HTML — это атрибуты — специальные конструкции, которые могут влиять на вывод информации на странице. Каждый тег в HTML имеет несколько стандартных атрибутов, которые записываются по шаблону атрибут="значение".
Атрибуты бывают:
- глобальные, то есть универсальные для всех HTML-тегов
- уникальные, то есть специфичные для конкретных тегов
Для каждого атрибута есть свой набор значений. Есть атрибуты, которые никак не проявляют себя при выводе информации, но нужны для работы с CSS.
CSS (или Cascading Style Sheets) — это язык каскадных стилей, которые задаем визуальное оформление для языков разметки, в том числе для HTML. Если HTML структурирует контент на странице, то CSS отвечает за внешний вид сайта, позволяет его отформатировать и сделать, каким его задумали дизайнеры.
Каскадные = многоуровневые. Это значит, что одному и тому же элементу на странице, может быть присвоено сразу несколько стилей из разных источников.
Существует 3 способа связать HTML и CSS:
- Inline-запись помощью атрибута style
- В секции <head> с помощью тега <style>
- Отдельный CSS-файл
Как записываются стили? Какой бы способ подключения стилей вы не выбрали, синтаксис правил остаётся неизменным:
Важно не забывать добавлять символ ; после значения свойства. Так браузер сможет отделить правила друг от друга.
Селекторы — правила, по которым браузер определяет к какому элементу нужно добавить стили.
Современные графические редакторы показывают код в CSS для всех графических элементов. Вот пример, как это устроено в Figma:
C HTML и CSS работают:
- верстальщики
- Frontend-разработчики
- дизайнеры
- и все, кому нужно размещать информацию на сайтах
Дополнительные материалы:
Глава 3. Обработка графической информации (Информатика: учебник для 7 класса / Л.Л. Босова, А.Ю. Босова. — М.: БИНОМ. Лаборатория знаний, 2013)
§4.4 Создание web-сайта (Информатика: учебник для 9 класса / Л.Л. Босова, А.Ю. Босова. — М.: БИНОМ. Лаборатория знаний, 2013)
Документация по HTML и CSS на простом и понятном языке:
https://doka.guide/
Справочник по HTML и CSS с примерами отображения:
https://html5css.ru/
Краткая история HTML:
http://htmleditors.ru/Rasnoe/history/history1.html
