Тема: Введение в мир веб-разработки Домашнее задание: Работа со стилями CSS МАЛАЯ КОМПЬЮТЕРНАЯ АКАДЕМИЯ Веб-дизайн – Junior (HTML & CSS) Задание №1 Создайте страничку о мультфильме Смешарики, используя язык разметки HTML и стили CSS. К заданию был добавлен целостный код, доступный также по ссылке на CodePen, но Крош, один из персонажей Смешариков, случайно потерял из нашего кода все стили. Осталось только фоновое изображение для тега <body>. Верните в код все стили и сделайте страничку прежней! Для этого проделайте такие шаги: 1. Для заголовка h1 были заданы следующие стили: h1 { padding: 10px 15px 15px; margin: 5px 0 20px 10px; color: #fff; font-size: 60px; } 2. Для абзаца p были установлены такие стили: p { padding: 10px 15px; margin: 3% 45% 0 3%; background-color: #fefefe; color: #111111; font-size: 20px; } 2 Домашнее задание №2 МАЛАЯ КОМПЬЮТЕРНАЯ АКАДЕМИЯ Веб-дизайн – Junior (HTML & CSS) Код к заданию 1: HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>СМЕШАРИКИ</title> </head> <body> <h1>СМЕШАРИКИ</h1> <p>Российский анимационный сериал, созданный Анатолием Прохоровым, Ильёй Поповым и Салаватом Шайхинуровым. Сериал рассказывает о приключениях смешариков — шарообразных антропоморфных существ, попадающих в различные ситуации.</p> <p> В большинстве эпизодов действие происходит в вымышленном месте — Ромашковой долине. Однако в некоторых случаях персонажи могут жить на необитаемом острове, плавать в море, путешествовать по пустыне, взбираться на гору и т. д. Сюжет построен на неожиданных ситуациях, с которыми сталкиваются герои и с которыми может столкнуться ребёнок в повседневной жизни. Среди персонажей нет отрицательных героев, все живут по принципу «мира без насилия». </p> </body> </html> CSS body { background-image: url('https://i.postimg.cc/13rcqC0r/1613652150-74-p-fon-dlyaprezentatsii-smeshariki-82.jpg'); background-size: 1510px; background-attachment: fixed; } 3 Домашнее задание №2 МАЛАЯ КОМПЬЮТЕРНАЯ АКАДЕМИЯ Веб-дизайн – Junior (HTML & CSS) В результате должна открыться такая страничка (рис. 1): Рисунок 1 Задание №2 Расскажите о своем любимом мультфильме или герое, используя изученные механизмы HTML и CSS. Можете воспользоваться кодом из задания 1. Результат работы. Ссылка на проект в вашем аккаунте CodePen
Домашнее задание: Работа со стилями CSS
МАЛАЯ КОМПЬЮТЕРНАЯ АКАДЕМИЯ
Веб-дизайн – Junior (HTML & CSS)
Задание №1
Создайте страничку о мультфильме Смешарики,
используя язык разметки HTML и стили CSS. К заданию был добавлен целостный код, доступный
также по ссылке на CodePen, но Крош, один из
персонажей Смешариков, случайно потерял из
нашего кода все стили.
Осталось только фоновое изображение для тега <body>. Верните в код все стили и сделайте
страничку прежней! Для этого проделайте такие
шаги:
1. Для заголовка h1 были заданы следующие стили:
h1 {
padding: 10px 15px 15px;
margin: 5px 0 20px 10px;
color: #fff;
font-size: 60px;
}
2. Для абзаца p были установлены такие стили:
p {
padding: 10px 15px;
margin: 3% 45% 0 3%;
background-color: #fefefe;
color: #111111;
font-size: 20px;
}
2
Домашнее задание №2
МАЛАЯ КОМПЬЮТЕРНАЯ АКАДЕМИЯ
Веб-дизайн – Junior (HTML & CSS)
Код к заданию 1:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>СМЕШАРИКИ</title>
</head>
<body>
<h1>СМЕШАРИКИ</h1>
<p>Российский анимационный сериал, созданный Анатолием Прохоровым,
Ильёй Поповым и Салаватом Шайхинуровым. Сериал рассказывает о
приключениях смешариков — шарообразных антропоморфных существ,
попадающих в различные ситуации.</p>
<p>
В большинстве эпизодов действие происходит в вымышленном месте —
Ромашковой долине. Однако в некоторых случаях персонажи могут жить на
необитаемом острове, плавать в море, путешествовать по пустыне, взбираться
на гору и т. д. Сюжет построен на неожиданных ситуациях, с которыми
сталкиваются герои и с которыми может столкнуться ребёнок в повседневной
жизни. Среди персонажей нет отрицательных героев, все живут по принципу
«мира без насилия».
</p>
</body>
</html>
CSS
body {
background-image: url('https://i.postimg.cc/13rcqC0r/1613652150-74-p-fon-dlyaprezentatsii-smeshariki-82.jpg');
background-size: 1510px;
background-attachment: fixed;
}
3
Домашнее задание №2
МАЛАЯ КОМПЬЮТЕРНАЯ АКАДЕМИЯ
Веб-дизайн – Junior (HTML & CSS)
В результате должна открыться такая страничка
(рис. 1):
Рисунок 1
Задание №2
Расскажите о своем любимом мультфильме или
герое, используя изученные механизмы HTML и
CSS.
Можете воспользоваться кодом из задания 1.
Результат работы. Ссылка на проект в вашем аккаунте
CodePen