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

Задание 1

Разместим на веб-странице несколько картинок разного размера в одной строке с выравниванием всех картинок по верхнему краю.

Разместим три картинки. Так как тег img создает строчный элемент, то все три тега img (по одному на каждую картинку) заключим в блочный контейнер <p>.  Картинки возьмем с бесплатного сервиса https://pixabay.com/ и поместим в папку, где находится наша веб-страница.

Для задания размера картинки используем css-свойство width, для выравнивания по верхнему краю строки - свойство vertical-align.

В начале добавим заголовок  "Галерея 1"

<!doctype html>
<html>
<head>
<title>Веб-графика</title>
</head>
<body>
<h1>Галерея 1</h1>
<p>
      <img src="kingfisher-2046453_640.jpg" style="width: 500px; vertical-align: top">
      <img src="peacock-4746848_640.jpg" style="width: 700px; vertical-align: top">
      <img src="swan-2077219_640.jpg" style="width: 300px; vertical-align: top">
</p>
</body>
</html>




Задание 2

Добавим на веб-страницу бегущую строку с графическим фоном. Для этого подберем фоновый рисунок на сайте https://pixabay.com/, скачаем его в папку с htmll-документом. Чтобы фоновый рисунок появился, используем css-свойство background-image. Если фон будет темным, то изменим цвет строки на светлый и наоборот. Увеличить размер блока поможет свойство padding.

<marquee style="padding: 20px;
                background-image: url(milky-way-2750627_640.jpg);
                font-size: 50pt; 
                color: #CA9B33">
    Цифровая экономика - национальный проект России
</marquee>





Last modified: Sunday, 19 January 2020, 2:10 PM