Технологии

CENTER (тег в HTML)

Что такое center в html:

Использовался для выравнивания текста или других HTML-элементов по центру блочного элемента. Тег считается устаревшим и больше не рекомендуется к использованию.

Как прописать center в html:

<center>Текст</center>

CAPTION (тег в HTML)

Что такое caption в html:

Предназначен для создания заголовка к таблице и может размещаться только внутри контейнера <table>, причем сразу после открывающего тега. Такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий ее содержание.

Атрибуты:

1. align - Определяет выравнивание заголовка по горизонтали.
2. valign - Устанавливает расположение заголовка до или после таблицы.

Как прописать caption в html:

<table>
  <caption>Заголовок таблицы</caption>
  <tr>
    <td>Строка 1, колонка 1</td>
    <td>Строка 1, колонка 2</td>
  </tr>
  <tr>
    <td>Строка 2, колонка 1</td>
    <td>Строка 2, колонка 2</td>
  </tr>
</table>

CANVAS (тег в HTML)

Что такое canvas в html:

Используется для создания графики, анимации и интерактивных визуализаций на веб-странице с помощью JavaScript. Он предоставляет разработчикам платформу для рисования различных фигур, линий, текста и изображений.

Атрибуты:

1. width - ширина элемента в пикселях.
2. height - высота элемента в пикселях.

Как прописать canvas в html:

<canvas id="myCanvas" width="300" height="200"></canvas>
Примеры использования
Рисование линии:
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.moveTo(0, 0);
  ctx.lineTo(300, 200);
  ctx.stroke();
</script>

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

<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillRect(50, 50, 100, 100);
</script>

Рисование изображения:

canvas id="myCanvas" width="300" height="200"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var img = new Image();
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
  };
  img.src = "image.png";
</script>

Анимация объекта:

<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var x = 0;
  function animate() {
    x++;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(x, 50, 50, 50);
    requestAnimationFrame(animate);
  }
  animate();
</script>

Создание графика:

<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var data = [10, 20, 30, 40, 50];
  var colors = ["red", "orange", "yellow", "green", "blue"];
  var total = data.reduce(function(sum, value) { return sum + value; }, 0);
  var startAngle = 0;
  for (var i = 0; i < data.length; i++) {
    var sliceAngle = 2 * Math.PI * data[i] / total;
    ctx.fillStyle = colors[i];
    ctx.beginPath();
    ctx.moveTo(canvas.width/2, canvas.height/2);
    ctx.arc(canvas.width/2, canvas.height/2, canvas.height/2, startAngle, startAngle+sliceAngle);
    ctx.closePath();
    ctx.fill();
    startAngle += sliceAngle;
  }
</script>

Для чего использовать тег <canvas>

1. Для игр с анимацией, графикой и интерактивностью.
2. Для визуализации данных: диаграмм, графиков и схем.
3. Для интерактивных карт, которые можно увеличивать или уменьшать, а также с интерактивными элементами — всплывающими окнами и маркерами.
4. Для фильтров изображений. Например, можно менять яркость, контраст и оттенок.
5. Для создания цифрового искусства.
6. Для анимации, которая запускается при взаимодействии с пользователем или зависит от времени.
7. Для образовательных ресурсов: симуляторов, интерактивных викторин и учебников.

BUTTON (тег в HTML)

Что такое button в html:

Для создания кнопок используется тег <button>. Внутри него размещается текст или изображение, которые будут отображаться на кнопке.

Атрибуты:

1. accesskey - Доступ к элементам формы с помощью горячих клавиш.
2. autofocus - Устанавливает, что кнопка получает фокус после загрузки страницы.
3. disabled - Блокирует доступ и изменение элемента.
4. form - Связывает между собой форму и кнопку.
5. formaction - Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку.
6. formenctype - Способ кодирования данных формы.
7. formmethod - Указывает метод пересылки данных формы.
8. formnovalidate - Отменяет проверку формы на корректность.
9. formtarget - Открывает результат отправки формы в новом окне или фрейме.
10. name - Определяет уникальное имя кнопки.
11. type - Тип кнопки — обычная, для отправки данных формы на сервер или для очистки формы.
12. value - Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.

Как прописать button в html:

<button type="button">Я кнопка</button>

Чтобы задать кнопке имя, тип или состояние, нужно добавить атрибуты: name, disabled и type:

<button type="button" name="popup-button">Я кнопка</button>

Создать кнопку можно и с помощью тега <input>, если указать ему тип button:

<input tupe="button" value="Я тоже кнопка">

Способ подойдёт для контентных изображений:

<button type="button">
  <img src="icon.svg" alt="Иконка" width="20" height="20">
</button>

BR (тег в HTML)

Что такое br в html:

Элемент переноса строки, он используется для создания новой строки или начала нового абзаца в блоке текста.

Как прописать br в html:

<p>Здесь есть немного текста.<br>
Здесь есть еще немного текста.</p>