Веб технології

Лабораторна робота 2
Тема: «Знайомство з CSS»

Мета: Познайомитись з мовою каскадних таблиць стилів.
Хід роботи:
Рис.1. Завдання перше

Лістинг сайту:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h2{
text-align:center;
color:midnightblue;
}
b{
color:steelblue;
}
p{
text-indent: 20px;
text-align:justify;
}
</style>
</head>
<body>
<h2>
Огляди фільмів
</h2>
<p>
<b>
"Щедрик" -
</b>
<i>
Історична драма "Щедрик" розповідає про долі трьох
різних за національністю родин: українців, поляків та євреїв,
яких об'єднало спільне горе — війна: на зміну репресивній
машині СРСР приходить каральна система Третього Рейху.
</i>
</p>
<p>
<b>
"Захар Беркут" -
</b>
<i>
український радянський кольоровий широкоформатний
стереофонічний художній фільм 1971 року, знятий за мотивами
однойменної повісті Івана Франка про подвиг невеличкої
карпатської громади, що 1241 року вступила в нерівний двобій з
татаро-монгольськими завойовниками.
</i>
</p>
<hr>
<h2>
Огляди книг
</h2>
<p>
<b>
Едіт Еґер "Дар" -
</b>
<i>
це практичний посібник як подбати про своє
ментальне здоров’я – як жити повноцінно і не застрягати у
в’язниці власного розуму.
</i>
</p>
<p>
<b>
Роберт Чалдині "Психологія впливу" -
</b>
<i>
книга, яка вже давно стала підручником для
менеджерів, підприємців і взагалі всіх, хто бажає опанувати
мистецтво впливу, навчить вас розуміти поведінку інших,
уникати маніпуляторів людською свідомістю та спілкуватися,
завжди досягаючи поставлених задач.
</i>
</p>
</body>
</html>
Результат виконання:
Рис.2. Результат виконання першого завдання

Рис.3. Друге завдання
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.first{
margin: 40px;
margin-right:10px;
border: 6px double yellow;
}
.second{
border: 6px double limegreen;
padding:20px;
padding-top: 50px;
padding-bottom: 50px;
}
.third{
margin: 40px;
border: 6px double dodgerblue;
margin-left:15%;
margin-right:15%;
padding-top: 20px;
padding-bottom: 20px;
}
h2{
padding-top:20px;
border: 8px solid orangered;
text-align:center;
}
</style>
</head>
<body>
<h2>
Переваги читання книг
</h2>
<div class="first">
Вчені з’ясували, що людина, регулярно читає книги, тренує пам’ять.
Для цього не потрібно відводити на читання цілий день. Досить 1 години.
За цей час мозок отримає, переробить і засвоїть нову інформацію. І це
ще не все. Для того, щоб розуміти сюжет, вам доводиться запам’ятовувати
імена, зовнішність, характер і вчинки героїв. Ви вистоюєте зв’язку між
ними, міркуєте, уявляєте навколишнє оточення, робите прогнози,
висновки. Завдяки цьому поліпшується не тільки пам’ять, а й здатність
концентрувати увагу.
</div>
<div class="second">
Поліпшується здатність висловлювати думки на папері. У чомусь ви
навіть переймаєте стиль улюбленого автора. «Я дивно читаю, і читання
дивно діє на мене. Що-небудь, давно перечитав, почитаю знову і начебто
напружуючи новими силами, вникаю в усі, чітко розумію і сам витягаю
вміння створювати »- Федір Михайлович Достоєвський.
</div>
<div class="third">
Шляхом досліджень вчені з’ясували, що читання приємною
літератури перед сном допомагає швидко заснути і міцно спати всю ніч. А
все завдяки тому, що ви розслабляєтеся, забуваєте про стрес. До того ж
з часом розвивається корисна звичка: для організму читання стає
сигналом до швидкого відходу до сну.
</div>
</body>
</html>
Рис.4. Результат виконання другого завдання
Рис.5. Третє завдання
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.first{
background-image: url("1585642492_2.jpg");
width: 80%;
height: 250px;
border:2px double darkred;
background-repeat: repeat-x;
background-size: contain;
background-position: right;
}
.second{
width: 80%;
height: 250px;
background-size:cover;
background-position:center;
border:2px double blueviolet;
background-repeat: no-repeat;
}
.third{
width: 80%;
height: 250px;
border:2px double darkred;
background-size:15%;
background-repeat: repeat-y;
background-position: center;
}
.fourth{
width: 80%;
height: 250px;
border:2px double orangered;
background-position: inherit;
}
.fifth{
width: 80%;
height: 250px;
border:2px double coral;
background-position: 50% 50%;
}
.sixth{
width: 80%;
height: 250px;
border:2px double mediumvioletred;
background-position:bottom right;
}
</style>
</head>
<body>
<div class="first">
</div>
<div class="second">
</div>
<div class="third">
</div>
<div class="fourth">
</div>
<div class="fifth">
</div>
<div class="sixth">
</div>
</body>
</html>
Рис.6.Результат виконання третього завдання
Рис.7.Продовження
Рис.8. Четверте завдання
<!DOCTYPE html>
<html lang="en">
<head>
<title>Огляди фільмів та книг</title>
<style>
h2{
text-align:center;
color:midnightblue;
margin-top:0px;
}
b{
color:steelblue;
}
p{
text-indent: 20px;
text-align:justify;
}
.header{
height: 200px;
background-image:url("film1.jpg");
background-size: cover;
background-position: center;
}
.fon{
background-image:url("image.jpg");
padding-bottom: 15%;
}
.text{
background-image:url("blue.jpg");
margin-left: 15%;
margin-right:15%;
opacity: 0.7;
padding-left: 15%;
padding-right: 15%;
padding-bottom: 5%;
padding-top: 5%;
}
</style>
</head>
<body>
<div class="header">
</div>
<div class="fon">
<div class="text">
<h2>
Огляди фільмів
</h2>
<p>
<b>
"Щедрик" -
</b>
<i>
Історична драма "Щедрик" розповідає про долі трьох різних
за національністю родин: українців, поляків та євреїв, яких
об'єднало спільне горе — війна: на зміну репресивній машині СРСР
приходить каральна система Третього Рейху.
</i>
</p>
<p>
<b>
"Захар Беркут" -
</b>
<i>
український радянський кольоровий широкоформатний
стереофонічний художній фільм 1971 року, знятий за мотивами
однойменної повісті Івана Франка про подвиг невеличкої карпатської
громади, що 1241 року вступила в нерівний двобій з
татаро-монгольськими завойовниками.
</i>
</p>
<hr>
<h2>
Огляди книг
</h2>
<p>
<b>
Едіт Еґер "Дар" -
</b>
<i>
це практичний посібник як подбати про своє ментальне
здоров’я – як жити повноцінно і не застрягати у в’язниці власного
розуму.
</i>
</p>
<p>
<b>
Роберт Чалдині "Психологія впливу" -
</b>
<i>
книга, яка вже давно стала підручником для менеджерів,
підприємців і взагалі всіх, хто бажає опанувати мистецтво впливу,
навчить вас розуміти поведінку інших, уникати маніпуляторів
людською свідомістю та спілкуватися, завжди досягаючи поставлених
задач.
</i>
</p>
</div>
</div>
</body>
</html>
Рис.9.Результат виконання четвертого завдання

Веб технології

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Веб технології

Uploaded by

Copyright:

Available Formats

Лабораторна робота 2

Тема: «Знайомство з CSS»

Рис.1. Завдання перше

Рис.2. Результат виконання першого завдання

You might also like