popup-style-nocode

В первых расширениях мы использовали очень простой popup.html. Но даже без программирования можно сделать всплывающее окно более привлекательным и информативным, используя основы HTML и CSS.

Основы HTML для popup.html:

Теги: HTML использует теги для разметки содержимого страницы. Теги обычно парные: <tag>Содержимое</tag>.
- <h1> - <h6>: Заголовки разных уровней (от самого большого <h1> до самого маленького <h6>).
  - Пример: <h1>Приветствие</h1>
- <p>: Параграф (абзац текста).
  - Пример: <p>Это текст параграфа.</p>
- <div>: Блок-контейнер для группировки элементов. Используется для стилизации и разметки.
  - Пример: <div><p>Текст внутри блока.</p></div>
- <span>: Строчный контейнер для стилизации части текста внутри параграфа или блока.
  - Пример: <p>Это <span>важный</span> текст.</p>
- <button>: Кнопка для взаимодействия пользователя.
  - Пример: <button>Нажми меня</button>
- <img>: Изображение.
  - Пример: <img src="images/icon48.png" alt="Иконка">
- <ul>, <li>: Ненумерованный список.
  - Пример:
```
<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
</ul>
```
- <ol>, <li>: Нумерованный список.
  - Пример:
```
<ol>
  <li>Первый шаг</li>
  <li>Второй шаг</li>
</ol>
```
- <br>: Перенос строки.
  - Пример: Строка 1<br>Строка 2
- <hr>: Горизонтальная линия-разделитель.
  - Пример: <div>Раздел 1<hr>Раздел 2</div>

Основы CSS для popup.html (без кода, используя атрибут style):

CSS (Cascading Style Sheets) используется для стилизации HTML элементов. Самый простой способ добавить CSS стили – использовать атрибут style непосредственно в HTML тегах.

Атрибут style: Добавляется к HTML тегу и содержит CSS свойства и значения.
- Пример: <h1 style="color: blue; text-align: center;">Заголовок</h1>
Основные CSS свойства для начинающих:
- color: Цвет текста. Значения: названия цветов (red, blue, green и т.д.), HEX-коды (#FF0000, #00FF00, #0000FF), RGB (rgb(255, 0, 0)).
  - Пример: <p style="color: green;">Зеленый текст</p>
- background-color: Цвет фона элемента. Значения: аналогично color.
  - Пример: <div style="background-color: #f0f0f0;">Серый фон</div>
- font-size: Размер шрифта. Значения: в пикселях (px), em, rem.
  - Пример: <p style="font-size: 16px;">Размер шрифта 16px</p>
- font-family: Семейство шрифтов. Значения: названия шрифтов (Arial, Times New Roman, Verdana).
  - Пример: <p style="font-family: Arial;">Шрифт Arial</p>
- text-align: Выравнивание текста. Значения: left, center, right, justify.
  - Пример: <h1 style="text-align: center;">Выровненный по центру заголовок</h1>
- padding: Внутренний отступ (расстояние между содержимым элемента и его границей). Значения: в пикселях (px), em, rem.
  - Пример: <div style="padding: 10px; border: 1px solid black;">Блок с отступом</div>
- margin: Внешний отступ (расстояние между границей элемента и соседними элементами). Значения: в пикселях (px), em, rem.
  - Пример: <p style="margin-bottom: 20px;">Параграф с отступом снизу</p>
- border: Граница элемента. Задается толщина, стиль (solid, dashed, dotted) и цвет.
  - Пример: <div style="border: 2px solid red;">Блок с красной границей</div>
- width, height: Ширина и высота элемента. Значения: в пикселях (px), процентах (%).
  - Пример: <div style="width: 200px; height: 100px; background-color: yellow;">Блок фиксированного размера</div>

Пример улучшенного popup.html для "Привет, мир!":

<!DOCTYPE html>
<html>
<head>
  <title>Приветствие</title>
</head>
<body style="font-family: Arial; background-color: #f0f0f0;">
  <div style="padding: 20px; text-align: center;">
    <h1 style="color: blue;">Привет, мир!</h1>
    <p style="font-size: 14px; color: #666;">Это улучшенное всплывающее окно.</p>
    <hr style="border-top: 1px dashed #ccc;">
    <button style="padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer;">Кнопка действия</button>
  </div>
</body>
</html>

Практическое задание:

Скопируйте улучшенный popup.html код выше в расширение "Привет, мир!".
Измените стили (цвета, шрифты, размеры) в атрибутах style, чтобы настроить внешний вид всплывающего окна по своему вкусу.
Добавьте новые HTML элементы (например, изображение, список) и стилизуйте их.
Поэкспериментируйте с разными CSS свойствами, чтобы лучше понять, как они работают.
- Ссылка: MDN Web Docs: HTML, MDN Web Docs: CSS (для более глубокого изучения, но для начала достаточно примеров выше).