Лабораторна робота №11

ЛАБОРАТОРНА РОБОТА № 11
ТЕМА: застосування каскадних таблиць стилів (CSS) для форматування HTML-документів.

Робота з блоками.
МЕТА: навчитися використовувати технологію CSS на практиці для форматування

HTML-документів.
Хід роботи:
1. Створіть HTML документ (index.html) та відформатуйте його за допомогою CSS файлу

(style.css) таким чином, щоб HTML документ виглядав як на рис. 1.
Рисунок 1 - HTML документ з використанням CSS форматування
2. Для цього створіть та відкрийте файл index.html, додайте у нього усі необхідні HTML
теги (HTML, HEAD, TITLE, BODY), що повинні міститися у кожному HTML документі, а
після цього розмістіть між тегом <BODY> </BODY> наступний блочний елемент:
<div class="wrapper"> </div>
Даний елемент буде виступати у якості обгортки для форматування нашого тексту.
3. Потім до блоку <div class=”wrapper”> додайте наступні елементи:
<div class="title">Практична робота №2</div>

Цей блок буде відповідати за форматування заголовку. Після нього додайте наступний
блок:
<div class="autor">Практичну роботу виконав/виконала студент групи ІТ-21/ІТ-22

ПІБ студента</div>
Потім додайте блок, що буде містити інформацію з темою практичної роботи:
<div class="topic">Введіть назву даної теми у цей блок</div>
І останнім блочним елементом у нашому HTML документі буде:
<div class="definition"> Стилем або CSS (Cascading Style Sheets, каскадні таблиці стилів)
називається набір параметрів форматування, що застосовується до елементів
документа, щоб змінити їх зовнішній вигляд.</div>
В результаті вміст нашого HTML документу буде виглядати наступним чином:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Практична робота 2</title>
</head>
<body>
<div class="wrapper">
<div class="title">Практична робота №2</div>
<div class="autor">Практичну роботу виконав/виконала студент групи ІТ-21/ІТ-22

ПІБ студента</div>
<div class="topic">Введіть назву даної теми у цей блок</div>
<div class="definition"> Стилем або CSS (Cascading Style Sheets, каскадні таблиці стилів)
називається набір параметрів форматування, що застосовується до елементів
документа, щоб змінити їх зовнішній вигляд.</div>
</div>
</body>
</html>
Увага! Зверніть увагу на рядок <meta charset="utf-8">, що розмістився після

відкриваючого тегу <HEAD>, він необхідний для того, щоб ваш браузер
коректно відображав Кирилицю.
На цьому наша робота з HTML документом майже завершена. Залишилося лише

підключити CSS файл. Для цього нам необхідно між тегами <HEAD></HEAD> розмістити
наступний рядок:
<link type="text/css" href="style.css" rel="stylesheet">
Він буде відповідати за підключення нашого файлу стилів style.css.
3. Тепер настав час створити файл стилів CSS. Для цього у своїй робочій папці створіть
текстовий документ та перейменуйте його на style.css, а потім відкрийте його на
редагування у звичайному текстовому редакторі.
Для того, щоб відформатувати наш HTML документ першим рядком у файлі style.css
додайте:
body {
Background-color: #e1e1e1;
Таким чином ми задали колір для всього HTML документу.
Потім додайте наступний текст:
.wrapper {
width: 940px;
margin: 0 auto;
Цей код буде відповідати за форматування нашого блоку <div class="wrapper"> </div>, а
саме за його центрування відповідатиме CSS властивість (Margin: 0 auto;), а за фізичний
розмір (Width: 940px;). Як ви могли помітити, в якості селектора ми використали назву
Класу (class="wrapper"), такий спосіб дозволить нам швидко обрати необхідний елемент в
DOM.
Для вирівнювання заголовку відповідно блоку <div class="wrapper"> нам необхідно

додати у файл style.css наступний текст:
.title {
Text-align: center;
Text-decoration: underline;
Font-weight: 600;
Font-size: 18px;
Color: #333333;
padding-bottom: 50px;
Таким чином (Text-align: center;) ми вирівняли текст в середині блоку <div class="title"> та
задали йому наступні параметри: підкреслення тексту (Text-decoration: underline;),
товщину (Font-weight: 600;), розмір (Font-size: 18px;), колір (Color: #333333;) та відступ
після тексту (padding-bottom: 50px;).
Тепер нам необхідно відформатувати усі наступні блоки таким чином, щоб вони
розміщувалися один за одним, для цього нам необхідно до файлу style.css додати
наступний код:
.autor, .topic, .definition {
Float: left;
padding: 20px;
margin: 5px;
height: 200px;
А тепер можна задати окремо властивості для кожного з цих елементів.
Для оформлення блоку <div class="autor"> використаємо наступний код:
.autor {
Width: 250px;
Background-color: #4583e6;
Color: #ffffff;
Для оформлення блоку <div class="topic"> використаємо наступний код:
.topic {
Width: 250px;
Background-color: #336e20;
Color: #ffffff;
А для блоку <div class="definition"> використаємо наступний код:
.definition {
Width: 250px;
Background-color: #793aa5;
Color: #ffffff;
Тепер, якщо все було зроблено коректно, оновивши вікно браузеру F5 ви повинні
побачити відформатований HTML документ з використанням CSS, як на рис. 1.
Індивідуальне завдання:
1. Відповідно до свого варіанту створіть HTML документ та за допомогою CSS

відформатуйте блочні елементи у ньому таким чином, щоб він став схожий на зображення
в Таблиці 1.
Примітка: Для того, щоб відформатувати блоки таким чином, щоб один блок
розміщувався над іншим вам необхідно використати CSS властивості
(position: absolute; top: 20px; left: 50px;), або інші значення (top,left)
відповідно до того, де саме повинні розміщуватися ваші блоки. А щоб один
блок розмістити поверх іншого використовуйте властивість (z-index: 1;) і
чим більша цифра (1, 2, 3), тим вище розміщуватиметься блок.
Таблиця 1. – Завдання для самостійного виконання студентом.
Варіант Завдання
Текст всередині блоку
Текст Текст всередині Текст

всередині блоку всередині
блоку блоку
Текст всередині блоку Текст всередині блоку

4
Текст всередині
блоку
блоку
блоку
5
блоку
блоку
блоку
6
Текст Текст Текст всередині блоку
всередині всередині
7
8
Текст всередині Текст всередині
6
блоку
10
11
блоку
Текст
всередині
блоку
12
блоку
блоку
блоку
13
14
Текст
всередині
блоку Текст
всередині
Текст
блоку
всередині
15
Текст Текст всередині блоку

всередині
блоку
16
блоку

17
Текст Текст всередині Текст

блок
всередині у всередині
18
блоку
19
блоку
блоку
20
Текст всередині блоку Текст всередині

блоку

Лабораторна робота №11

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

Лабораторна робота №11

Uploaded by

Copyright:

Available Formats

ЛАБОРАТОРНА РОБОТА № 11

ТЕМА: застосування каскадних таблиць стилів (CSS) для форматування HTML-документів.

МЕТА: навчитися використовувати технологію CSS на практиці для форматування

1. Створіть HTML документ (index.html) та відформатуйте його за допомогою CSS файлу

Рисунок 1 - HTML документ з використанням CSS форматування

<div class="wrapper"> </div>

3. Потім до блоку <div class=”wrapper”> додайте наступні елементи:

<div class="title">Практична робота №2</div>

<div class="autor">Практичну роботу виконав/виконала студент групи ІТ-21/ІТ-22

Потім додайте блок, що буде містити інформацію з темою практичної роботи:

<div class="topic">Введіть назву даної теми у цей блок</div>

І останнім блочним елементом у нашому HTML документі буде:

В результаті вміст нашого HTML документу буде виглядати наступним чином:

<title> Практична робота 2</title>

<div class="title">Практична робота №2</div>

<div class="autor">Практичну роботу виконав/виконала студент групи ІТ-21/ІТ-22

<div class="topic">Введіть назву даної теми у цей блок</div>

Увага! Зверніть увагу на рядок <meta charset="utf-8">, що розмістився після

На цьому наша робота з HTML документом майже завершена. Залишилося лише

<link type="text/css" href="style.css" rel="stylesheet">

Він буде відповідати за підключення нашого файлу стилів style.css.

Таким чином ми задали колір для всього HTML документу.

Потім додайте наступний текст:

Для вирівнювання заголовку відповідно блоку <div class="wrapper"> нам необхідно

.autor, .topic, .definition {

А тепер можна задати окремо властивості для кожного з цих елементів.

Для оформлення блоку <div class="autor"> використаємо наступний код:

Для оформлення блоку <div class="topic"> використаємо наступний код:

А для блоку <div class="definition"> використаємо наступний код:

1. Відповідно до свого варіанту створіть HTML документ та за допомогою CSS

Таблиця 1. – Завдання для самостійного виконання студентом.

Текст всередині блоку

Текст Текст всередині Текст

Текст всередині блоку Текст всередині блоку

Текст всередині блоку Текст всередині блоку

Текст всередині блоку Текст всередині блоку

Текст всередині блоку

Текст всередині блоку Текст всередині блоку

Текст всередині блоку

Текст всередині блоку

Текст всередині блоку Текст всередині блоку

Текст всередині блоку

Текст всередині блоку

Текст Текст всередині блоку

Текст всередині блоку

Текст всередині Текст всередині

Текст всередині блоку

Текст Текст всередині Текст

Текст всередині блоку

Текст всередині блоку

Текст всередині блоку Текст всередині

You might also like