IT_LW_5
.pdf
90
на відстані 120px від лівого краю сторінки. Текст має бути червоного кольору з висотою шрифту 40pt. Синтаксис використання стилів для цього випадку має наступний вигляд:
<DIV SТYLE="визначення_стилю"> або
<Н1 SТYLЕ="визначення_стилю">
Для вирішення поставленої задачі виконайте наступні дії: Запустіть текстовий редактор і створіть у ньому файл, змістом якого є код, наведений у лістингу 5.3.
Лістинг 5.3 Використання стилів у середині тегу
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<HTML><HEAD><TITLE> Використання стилів у середині тегу </TITLE>
3<META NAME="Author" CONTENT="Л.Кравчук">
4<META HTTP-EQUIV="Content-Style–Type" content="text/css">
5<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
6CHARSET=windows-1251">
7</HEAD><BODY>
8<H1>Використання стиля всередині тегу (div), для якого визначений
9даний стиль </H1>
10<div STYLE="font: 40pt Courier; color: red; position: relative; left: 120;">
11<br> Садок вишневий коло хати
12<br> Хрущі над вишнями гудуть...
13<br>
14<br><i>Т.Г.Шевченко</i><br>
15</div>
16</BODY></HTML>
-Збережіть створений файл під ім’ям Page2_L5.html у папці зі своїм прізвищем.
-Відкрийте у вікні браузера створений файл і переконайтеся в тому, що з’являється вікно подібне до того, що показане на рис. 5.3.
Рис. 5.3 – Відображення змісту тегу div червоним кольором з висотою шрифту 40pt і відстанню 120px від лівого краю (файл Page2_L5)
91
3. Створіть Web-сторінку, яка за допомогою методу посилання на окремий файл стилів виводить вірш Т.Г. Шевченко «Думи мої, думи…» на жовтому фоні синім шрифтом Arial 14pt, курсивом і на відстані 400 px від лівого краю сторінки. Приклад виконання завдання показано на рис.5.4.
Рис. 5.4 – Відображення вірша Т.Г. Шевченко «Думи мої, думи…» за допомогою окремого файлу стилів (файл Page3_L5)
Для цього необхідно виконати наступні дії:
-Створити папку із своїм прізвищем для зберігання Web-
сторінки Page3_L5.
-У папці із своїм прізвищем створити папку style для зберігання файлу style3.css. Один із варіантів розташування названих файлів на жорсткому диску показано на рис. 5.5.
Рис. 5.5 – Приклад розташування HTML-файла і CSS-файла на жорсткому диску
- Відкрийте текстовий редактор і введіть зміст файлу style3.css
відповідно до лістинга 5.4.
Лістинг 5.4 Зміст файлу style3.css
1BODY { color: blue;
2background-color: yellow;
3font-family: "Times New Roman", Serif; }
4P { margin-left: 400px;
5font-family: "Arial", Serif;
6font-style: italic;
92
7font-size:14pt; }
8P.title_0 { text-align:left;
9color:coral;
10font-style:normal;
11font-weight:bold;
12font-size: 20pt; }
13P.title_1 { text-align:center;
14color:green;
15font-style:normal;
16font-weight:bold;
17font-size: 18pt;
18margin-top:6px;
19margin-left:0;
20margin-bottom:6px;}
-Збережіть файл style3.css у папці style
-У текстовому редакторі за допомогою тегів розмітки тексту <P>, <BR> введіть текст вірша Т.Г. Шевченко «Думи мої, думи…». Місце розташування файлу із текстом вірша вказує викладач. При створені посилання на файл із стилями скористайтеся тегом <LINK> Шаблон для створення файлу наведено у лістингу 5.5.
Лістинг 5.5 Зміст файлу Page3_L5.html
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<html><head>
3<meta http-equiv="Content-Type" content="text/html; charset=windows-
41251">
5<meta name="Author" content="KRAVCHUK">
6<link rel="STYLESHEET" href=" style/style3.css" type="text/css">
7<title>Page3_L5 Dumy moi, dumy moi</title>
8</head>
9<body>
10<p class="title_0">Тарас ШЕВЧЕНКО</p>
11<p class="title_1">***</p>
12<p>Думи мої, думи мої,
13<BR>Лихо мені з вами!
……
126<BR>Моя Україно,
127<BR>Моїх діток нерозумних,
128<BR>Як свою дитину.
129<P>(1839, С.-Петербург)
130</body></html>
-Збережіть створений файл під ім’ям Page3_L5.html у папці зі своїм прізвищем.
-Відкрийте у вікні браузера створений файл і переконайтеся в тому, що з’являється вікно подібне до того, що показане на рис. 5.4.
4. Створіть Web-сторінку, яка демонструє ефект тривимірності за допомогою властивості z-index (шари) каскадних таблиць стилів
93
Приклад Web-сторінки показано на рис.5.4.
Рис. 5.6 – Демонстрація ефекту тривимірності із використанням властивості z-index (файл Page4_L5)
Для цього необхідно виконати наступні дії:
- За допомогою найпростішого графічного редактора створіть малюнки, які наведені у таблиці 5.1 і збережіть їх у папці images (бажано, щоб ця папка була у папці із вашим прізвищем).
Таблиця 5.1 – Дані, необхідні для демонстрації ефекту тривимірності
Назва |
A.GIF |
Б.GIF |
B.GIF |
Г.GIF |
Д.GIF |
|
файлу |
||||||
|
|
|
|
|
||
Вигляд |
|
|
|
|
|
|
зображення |
|
|
|
|
|
|
|
|
|
|
|
|
|
Ім’я |
А1 |
А2 |
А3 |
А4 |
А5 |
|
Координати |
100/100 |
130/130 |
160/160 |
190/190 |
220/220 |
|
(left/top) |
||||||
|
|
|
|
|
||
z-index |
1 |
2 |
3 |
4 |
5 |
|
(шар) |
||||||
|
|
|
|
|
94
- У текстовому редакторі створіть окремий файл, що описує розташування шарів із малюнками. Опис стилю для першого малюнку із зображенням літери «А» має наступний вигляд:
#A1 {
position: absolute; left: 100px;
top: 100px; z-index: 1;
}
Для опису наступних шарів зробіть зміни відповідно значень імені, координат і z-index. Необхідну інформацію візьміть із таблиці 5.1
- Збережіть створений файл під ім’ям Page4_L5.css у папці style. Створіть основну Web-сторінку, що містить зображення
малюнків. Для цього скористайтеся тегами <LINK>, <DIV>, <IMG> із відповідними атрибутами. Приклад коду для посилання на файл стилів наведено нижче:
<link rel="stylesheet" href="style/Page4_L5.css" type="text/css">
Приклад коду для виведення малюнку із зображенням літери «А» має вигляд:
<div id="A1">
<img src="images/А.GIF" alt="малюнок із літерою А" width="70" height="96"> </div>
-Збережіть створений файл під ім’ям Page4_L5.html у папці зі своїм прізвищем.
-Відкрийте у вікні браузера створений файл і переконайтеся в тому, що малюнки розташовуються у послідовності, наведеній на рис.
5.4.
5.Створіть Web-сторінку, яка б мала вигляд, наведений на рис.
5.7:
Місце розташування файлу із орнаментом (fon_5.gif) вказує викладач.
Для виконання завдання необхідно виконати такі дії:
- Створіть HTML-документ із заголовком першого рівня «Властивість clip» на жовтому фоні.4.1.
- В тілі документа створіть контейнер <DIV> з ім’ям D0, розміри якого становлять 400px на 400px.
95
Рис. 5.7 – Демонстрація властивості z-clip (файл Page5_L5)
-У створеному контейнері створіть таблицю із світло-сірим фоном, яка містить тільки одну комірку 400px на 400px.
-У єдину комірку таблиці вставте чотири контейнери <DIV> з іменами D1, D2, D3, D4, які ділять її на чотири квадрати.
-У кожний контейнери <DIV> вставте посилання на малюнок із орнаментом.
-У властивості стилю чотирьох контейнерів <DIV> додайте властивість clip, яка задає видиму частину зображення. Синтаксис властивості clip має наступний вигляд:
clip:rect(top right down left);
У лістингу 5.6 наведено фрагмент коду для двох верхніх елементів (див. рис. 5.7). Код для нижніх елементів записується студентом за аналогією.
Лістинг 5.6 Властивість clip
1<DIV ID="D0" STYLE="position:absolute; left:50px; top:50px; width:400px;
2height:400px;">
3<TABLE BORDER=0 WIDTH=400 HEIGHT=400 CELLSPACING=0
4CELLPADDING=0 BGCOLOR=lightgrey><TR><TD>
5 |
<DIV ID="D1" STYLE="position:absolute; left:1px; top:0px; |
6 |
width:200px; height:200px;"><IMG SRC="images/fon_5.gif";></DIV> |
7 |
<DIV ID="D2" STYLE="position:absolute; left:200px; top:0px; |
8width:200px; height:200px;clip:rect(0px 100px 100px 0px);"><IMG
9SRC="images/fon_5.gif"></DIV>
10………………………………………………………….
11</TD></TR></TABLE>
12</DIV>
96
Послідовність   (рядок 4 )вставлена спеціально для того, щоб відтворювався фон у браузері.
- Збережіть Web-сторінку під ім’ям Page5_L5.html у папці зі своїм прізвищем.
6. Створіть Web-сторінку, змістом якої є три перших абзаци «Загальних положень» (див. п.1 коротких теоретичних відомостей лабораторної роботи). Необхідно змінити стиль тексту так, як показано на рис. 5.8. Перший абзац містить починається із великої літери червоного кольору, другий абзац містить перший рядок із великих літер синього кольору із підкреслюванням, третій абзац – великі червоні і жирні літери із збільшеним проміжком між ними.
Рис. 5.8 – Зовнішній вигляд Web-сторінки Page6_L5)
Для виконання завдання необхідно використати псевдо-елементи, які є особливою групою, що дозволяють поєднувати кілька стилів для якого-небудь об'єкта. Наприклад, ви можете задати властивості для першої букви параграфа. Для цього ви призначаєте для тегу P псевдоелемент first-letter, у якому встановлюєте різні стилі:
p:first-letter { float:right;font-size:4em;color:red;}
Сторінку почніть створювати у такій послідовності:
97
-Відкрийте у текстовому редакторі шаблон стилів (лістинг 1).
-В тіло документа введіть три абзаци тексту, використавши для розмітки три контейнери <p>.
-Кожному контейнеру <p> призначте власне ім’я класу, наприклад:
<p class="first">Каскадні таблиці стилів (CSS) це ….</p>
<p class="second">Для вивчення технології CSS ….</p> <p class="third">На перших кроках вивчення ….</p>
- У контейнер <style> введіть властивості за зразком:
p.first:first-letter { float:left;font-size:4em;color:red;}
p.second:first-line {color:blue; text-transform: uppercase;text-decoration: underline;}
p.third {color:red; text-transform: uppercase; letter-spacing: 10; font-weight: bolder}
- Збережіть Web-сторінку під ім’ям Page6_L5.html у папці зі своїм прізвищем.
7. Змініть за допомогою каскадних таблиць стилів HTMLдокумент Page1_L2.html, створений у лабораторній роботі №2. Зміни стосуються тексту (шрифт, розмір, колір, поля, обрамлення), гіперпосилань, фону документа, списку, горизонтальних ліній і т.д. Необхідно використати три способи застосування каскадних таблиць. Результатами завдання мають бути сторінки Page7_L5.html, Page8_L5.html, Page9_L5.html.
Завдання для самостійної роботи
1. Створіть web-сторінку, додавши в наступний HTML-код стилі таким чином, щоб сторінка виглядала так, як показано на рис.5.С1:
<html>
<body> <span>ПОПЕРЕДЖЕННЯ!</span>
</body>
</html>
При виконанні завдання забороняється додавати нові HTML-
теги! Вихідні дані для виконання завдання наведені у таблиці 5.С1. Номер варіанта вибирається за останньою цифрою індивідуального навчального плану студента. Не вказані параметри стилю вибираються студентом самостійно.
98
Рис. 5.9 – Приклад виконання завдання №1
2. На основі HTML-коду, наведеному у завданні 1 і за даними свого варіанту створіть web-сторінку, як показано на рис.5.С2. Головна умова залишається незмінною: при виконанні завдання
забороняється додавати нові HTML-теги!
Рис. 5.10 – Приклад виконання завдання №2
3. Створіть web-сторінку, додавши в наступний HTML-код стилі таким чином, щоб сторінка виглядала так, як показано на рис.5.11:
<html>
<body>
<p>Північна Корея, <em>імовірно</em>, співробітничає із Сирією на одному із сірійських ядерних об'єктів, пише The Washington Post з посиланням на дані <em>американських</em> спецслужб, зібрані за останні шість місяців</p>
<p>За даними видання, у розпорядження американкою розвідки були передані фотографії <em>сірійського ядерного об'єкта</em>, зроблені з ізраїльського супутника</p>
<p>Проаналізувавши їх, фахівці зробили висновок, що він <em>може</em> використатися для виробництва компонентів
<em>ядерної</em> зброї</p> </body>
</html>
При виконанні завдання забороняється додавати нові HTML-
теги! Вихідні дані для виконання завдання наведені у таблиці 5.2. Не вказані параметри стилю вибираються студентом самостійно.
80
Таблиця 5.2 – Вихідні дані для виконання самостійних завдань №1-4
Параметри |
|
|
|
|
№ варіанта |
|
|
|
|
||
стилю |
0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
|
Колір фону |
red |
blue |
green |
brown |
red |
blue |
green |
brown |
red |
blue |
|
Колір символів |
білий |
жовтий |
білий |
білий |
жовтий |
сірий |
синій |
сірий |
синій |
білий |
|
Колір тіні (завд.4) |
синій |
сірий |
синій |
оранжев |
зелений |
золото |
слива |
синій |
золото |
хакі |
|
Змішення тіні зліва |
2mm |
18px |
0,5% |
5mm |
7px |
0,20% |
05cm |
5px |
0,30% |
0,6cm |
|
Змішення тіні униз |
5mm |
7px |
0,2% |
7mm |
6px |
0,25% |
0,4cm |
4px |
0,30% |
0,4cm |
|
Шрифт |
Verdana |
Arial |
Tunga |
Tahoma |
Verdana |
Arial |
Shruti |
Arial |
Tunga |
Arial |
|
Накреслен. шрифту |
oblique |
oblique |
normal |
oblique |
oblique |
normal |
italic |
italic |
italic |
italic |
|
Жирність шрифту |
bold |
bolder |
lighter |
normal |
100 |
300 |
500 |
600 |
700 |
900 |
|
Розмір шрифту |
100pt |
100px |
150% |
80pt |
80px |
200% |
100pt |
150px |
200% |
200pt |
|
Розміри рамки, |
|
|
|
|
|
|
|
|
|
|
|
ширина/висота |
250/300 |
400/99 |
320/90 |
400/400 |
250/200 |
250/80 |
300/99 |
99/99 |
750/99 |
650/99 |
|
(завд. 2). |
|
|
|
|
|
|
|
|
|
|
|
Позиція елемента |
20mm |
200px |
50% |
50mm |
400px |
20% |
5cm |
500px |
30% |
6cm |
|
від лівого краю |
|||||||||||
|
|
|
|
|
|
|
|
|
|
||
Позиція елемента |
50mm |
180px |
20% |
70mm |
300px |
25% |
4cm |
400px |
30% |
4cm |
|
від верхнього краю |
|||||||||||
|
|
|
|
|
|
|
|
|
|
||
Розмір простору |
|
|
|
|
|
|
|
|
|
|
|
між елементом і |
10 |
12 |
14 |
16 |
18 |
20 |
15 |
11 |
9 |
7 |
|
рамкою (завд.1, 4) |
|
|
|
|
|
|
|
|
|
|
|