Карта сайта

Урок 14: Продвинутые теги в HTML

/Уроки по HTML/CSS/Урок 14: Продвинутые теги в HTML
Урок 14: Продвинутые теги в HTML
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

На 14-м уроке мы разберем два мощных инструмента: <iframe> для встраивания внешнего контента и <canvas> для создания графики. Эти теги открывают новые возможности для ваших веб-страниц и я покажу, как ими пользоваться на практике.

<iframe>: окно в другой мир

Тег <iframe> (Inline Frame) позволяет встраивать на вашу страницу контент из других источников: карты, видео, веб-страницы и даже целые приложения. Это как «окно» в другой сайт.

Как работает <iframe>?

Основные атрибуты:

  • src: URL встраиваемого контента.
  • width и height: Размеры фрейма.
  • allowfullscreen: Разрешает полноэкранный режим (например, для видео).
  • sandbox: Ограничивает возможности фрейма для безопасности.

Пример 1: Встраиваем карту Google Maps

<iframe 
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2245.373509066977!2d37.61763431593067!3d55.75197498055315!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54a5a738fa419%3A0x7c347d506f52311f!2z0JzQvtGB0LrQvtCy0YHQutC40Lkg0JrRgNC10LzQu9GM!5e0!3m2!1sru!2sru!4v1623335508043!5m2!1sru!2sru" 
  width="600" 
  height="450" 
  style="border:0;" 
  allowfullscreen 
  loading="lazy">
</iframe>

Результат: на странице появится интерактивная карта Москвы.

Пример 2: Видео с YouTube

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>

Параметр allow управляет разрешениями для видео.

Советы по безопасности

Используйте sandbox, чтобы ограничить действия внутри фрейма:

<iframe 
  src="https://example.com" 
  sandbox="allow-scripts allow-same-origin">
</iframe>

Это запретит выполнение форм, всплывающих окон и других потенциально опасных действий.

<canvas>:  рисуем на веб-странице

Тег <canvas> создает область для рисования графики с помощью JavaScript. Это ваш холст для диаграмм, игр, анимаций и даже обработки фото.

Основы работы с <canvas>

  1. Создайте холст:
<canvas id="myCanvas" width="400" height="200">
  Ваш браузер не поддерживает Canvas.
</canvas>
  1. Получите контекст рисования в JavaScript:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // 2D-графика

Пример 3: Рисуем прямоугольник

ctx.fillStyle = 'blue'; // Цвет заливки
ctx.fillRect(50, 50, 100, 80); // x, y, ширина, высота

Пример 4: Анимация шарика

let x = 0;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Очищаем холст
  ctx.beginPath();
  ctx.arc(x, 100, 20, 0, Math.PI * 2); // Рисуем круг
  ctx.fillStyle = 'red';
  ctx.fill();
  x += 2;
  if (x > canvas.width) x = 0;
  requestAnimationFrame(animate);
}
animate();

Результат: красный шарик движется слева направо.

Практические задачи

Задача 1: Встройте видео с Vimeo

Используйте <iframe>, чтобы добавить ролик с Vimeo. Подсказка: нажмите «Share» на странице видео и скопируйте код для вставки.

Задача 2: Нарисуйте дом на Canvas

С помощью методов fillRect, moveTo и lineTo изобразите дом с крышей и окном.

Что дальше?

Вы освоили два ключевых инструмента для создания динамических веб-страниц. Чтобы закрепить знания, экспериментируйте, попробуйте встроить Яндекс Карту или нарисовать часы с анимированными стрелками на <canvas>.

Полный курс «HTML/CSS для начинающих» доступен здесь: https://max-gabov.ru/html-css-dlya-nachinaushih