HTML5 нові можливості

Міністерство освіти і науки України

Харківський національний університет радіоелектроніки

Кафедра штучного інтелекту

Дисципліна «Web-технології та web-дизайн» 

Лабораторна робота №4. HTML5 нові можливості

Харків – 2022

Мета: використовуючи, побудований в ході минулих робіт, html-сайт, відформатований з використанням технології каскадних таблиць стилів CSS, оснащений динамічними елементами за допомогою JavaScipt, необхідно додати нові теги HTML5

Хід роботи

Завдання:                         

Базове (оцінюється на 8-10)

1. Додати тег <video>. Відео має відтворюватися автоматично після завантаження сторінки. Додайте панель управління до відеоролика (відтворення, пауза та гучність).

<section class="content">

              <video width="750px" controls autoplay preload="auto" muted >

                <source src="video/IMG_6399.mp4" 

                        type='video/mp4'>

                Тег video не підтримується вашим браузером.

              </video>

            </section>

[pic 1]

2.  Додати тег <canvas>, треба вказати, з якого ресурсу була взята ідея (інакше, це буде розглядатися як плагіат та оцінка буде знижена).

Ідея взята з цього ресурсу

<canvas id="canvas" width="150" height="150"></canvas>

    <script src='script/canvas.js'></script>

function clock(){

    var now = new Date();

    var ctx = document.getElementById('canvas').getContext('2d');

    ctx.save();

    ctx.clearRect(0,0,150,150);

    ctx.translate(75,75);

    ctx.scale(0.4,0.4);

    ctx.rotate(-Math.PI/2);

    ctx.strokeStyle = "black";

    ctx.fillStyle = "white";

    ctx.lineWidth = 8;

    ctx.lineCap = "round";

    // Hour marks

    ctx.save();

    for (var i=0;i<12;i++){

      ctx.beginPath();

      ctx.rotate(Math.PI/6);

      ctx.moveTo(100,0);

      ctx.lineTo(120,0);