Міністерство освіти і науки України
Національний університет “Львівська політехніка”
Кафедра ЗІ
Звіт
до лабораторної роботи №2
Програмування web-сторінок мовою HTML
Мета: створення web-сторінки з розповіддю про себе, з використанням мови HTML.
Завдання.
Відкрийте редактор NotePad.
Створіть за допомогою текстового редактора html-файл з розповіддю про себе.
Спочатку зробіть файл з розповіддю без форматування, і збережіть його командою Save as… з назвою file1.htm у власній папці. Тег <BODY> у файлі запишіть так: <BODY TEXT = “варіант”>.
Відкрийте файл file1.htm у броузері.
Для цього відкрийте свою робочу папку і двічі клацніть мишею по назві файлу.
Проекспериментуйте з різними значеннями кольорів (green, white, yellow, blue, #ffaa55 тощо) параметрів BGCOLOR I TEXT.
Не забувайте кожного разу після внесення змін використовувати команду Save as… у програмі NotePad, а для перегляду файлу у броузері обновляти сторінку або відкривати файл заново.
Виконайте форматування тексту у файлі file1.htm (теги <B>, <I>, <U>, <SUB>, <SUP>, <BIG>, <SMALL>, <EM>, <P>, <BR>, <HR>,<H1>…<H6>,<CENTER>, <LEFT>, <RIGHT>)і збережіть файл із назвою file2.htm
Усі заголовки створіть у броузері «варіант» кольором.
Перегляньте цей файл за допомогою броузера і проекспериментуйте з тегами форматування тексту.
Проекспериментуйте з розмірами вікна, в якому демонструється документ.
Переконайтеся, що броузер автоматично змінює розташування тексту, щоб його можна було переглядати без горизонтальної смуги прокручування (текстові редактори цього не роблять).
Використайте якнайбільше тегів форматування і надайте своїй сторінці якнайкращого вигляду. Вкажіть скільки тегів форматування використано під час створення сторінки.
Збережіть сторінку під іменем file3.htm
Удоскональте свою web-сторінку, створивши в ній списки(місця навчання, праці, хобі та інше, нумеровані і ненумеровані ) і таблицю успішності навчання в НУ“Львівська політехніка“ на основі залікової книжки(від 1 до 4 курсу навчання).
Проведіть на сторінці лінії різної товщини і кольору.
Проекспериментуйте з параметрами тега TABLE.
Об’єднайте деякі дві клітинки таблиці в одну.
Створіть ще одну таблицю без рамок, використавши тег <PRE>…</PRE>.
Вдоскональте свою сторінку якнайкраще.
Збережіть сторінку під ім’ям file4.htm
З допомогою програми фонограф створіть звуковий файл «прізвище.wav», який програватиметься під час перегляду сторінки. Вставте звук у свою сторінку.LOOP= “варіант”.
Розмістіть своє фото (вгорі справа) на сторінці розміром: «варіант розміру»
Варіанти завдань:
TEXT
BGCOLOR
SIZE
<H> TEXT
</H>
Шрифт одного абзацу
LOOP
Розмір фото
1
Black
White
3
Gray
Times New Roman
1
200*250
2
Navy
Yellow
2
Olive
Comic Sans MS
2
220*270
3
Silver
Gray
4
Aqua
Arial Black
3
240*290
4
Blue
Olive
3
Aqua
Arial Narrow
4
180*230
5
Maroon
Aqua
5
Lime
Book Antiqua
5
190*240
6
Purple
Lime
4
Teal
Century Gothic
6
200*240
7
Red
Teal
5
Green
Courier New
7
210*250
8
Fuchsia
Green
3
Red
Lucida Sans
8
220*260
9
Green
Fuchsia
2
Purple
Mangal
1
230*270
10
Teal
Red
3
Maroon
MS Reference Sans Serif
2
240*280
11
Lime
Purple
4
Blue
Tahoma
3
250*290
12
Aqua
Maroon
3
Silver
Raavi
4
120*180
13
Olive
Blue
+1
Navy
Shruti
5
130*190
14
Gray
Silver
+2
Lime
Palatino Linotype
6
140*200
15
Yellow
Navy
-1
Aqua
Monotype Corsiva
7
150*210
16
White
Black
-2
Lime
Sylfaen
8
160*220
17
Black
Lime
-1
Aqua
Microsoft Sans Serif
1
170*230
18
Navy
Aqua
-2
Teal
Lucida Sans Unicode
2
180*240
19
Silver
Olive
+1
Green
Garamond
3
190*250
20
Blue
Teal
+2
Fuchsia
Impact
4
200*250
21
Maroon
Green
+3
Purple
Tahoma
5
200*250
22
Purple
Fuchsia
+2
Maroon
Century Gothic
6
200*260
23
Red
Black
+1
Blue
Lucida Sans
7
200*240
24
Fuchsia
Purple
+2
Silver
Arial
8
190*250
25
Green
Maroon
-1
Navy
MS Reference Sans Serif
1
190*240
26
Teal
Blue
+2
Silver
Latha
2
200*250
27
Lime
Silver
-1
Navy
Monotype Corsiva
3
210*260
28
Aqua
Navy
+3
Silver
Tahoma
4
220*270
29
Olive
Silver
+2
Lime
Times New Roman
5
230*280
30
Gray
Lime
+1
Silver
Arial Black
6
220*260
Текст коду Хамл-Сторінки file-4.
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>лаба</title>
<style type="text/css">
h1,h2,h3,h4,h5,h6
{
color:lime;
}
</style>
</head>
<body bgcolor="Silver" style="padding:20px" bgs>
<bgsound src="files/Bon Jovi - It's My Life (Mix).mp3" loop="6">
<img src="files/123.JPG" alt="Hi,it's me" width="140" height="200" hspace="30" align="left" border="3"/>
<h2 align="center"><b>My name is Denis</b></h2>
<hr color="#000">
<h3> I am 20 years old </h3>
<h4> I want to be a desiner </h4>
<table border="0" align="center">
<tr>
<td colspan="2" align="right"><em>Мої улюблені предмети</em> <HR width="300"></td>
</tr>
<tr>
<td><UL>
<li> інформатика </li>
<li> англійська мова</li>
<li>історія</LI>
</UL></td>
<td>
<OL TYPE="A">
<LI>Інформатика</LI>
<LI>Англійська мова</LI>
<LI>Історія</LI>
</OL>
</td>
</tr>
</table>
<hr color="#000" size="5"/>
<font color="Gray" face="Palatino Linotype" size="+2"> </font>
</p>
<TABLE cellpadding="5" BORDER="1" BGCOLOR="white" BORDERCOLOR="green" align="center" style="text-align:center;" >
<caption> <I> Мої оцінки за три семестри: </I> </caption>
<tr> <TH><pre>преформат</pre></TH>
<th>І семестр </th>
<th>II семестр </th>
<th>III семестр</th>
</tr>
<TR> <TH> Фізика </ТН>
<TD>4</TD>
<TD>4</TD>
<TD>5</TD> </TR>
<TR> <TH> Мат. Аналіз </th>
<td>5</td>
<TD>5</TD>
<TD>5</TD></TR>
<TR> <TH АLIGN="lеft">Алгоритм. Мови </th>
<TD>5</TD>
<TD>5</TD>
<TD>4</TD>
</TR>
</TABLE>
</CENTER><P>
<font color="gray" face="Palatino Linotype" size="+2">Це моя <strong> <font color="Teal"> N-на <font color="gray"> </strong> спроба створити <em>web-сторінку</em>. Я вже вмію користуватися <em>заголовками</em>, вставляти <em>лінії</em>, форматувати текстові абзаци і клацати на ссилки! А ще я вставляти
<em>фотографії, картинки, звук, відеозображення</em>
шляхом посилання на відповідні
<em>графічні, звукові чи відеофайли</em>
.
<p>Я збережу цей файл на диску і відкрию його у броузері. </p>
Цю web-сторінку я буду удосконалювати
<HR>
<center>|<a href="file1.html">1</a>||<a href="file2.html">2</a>||<a href="file3.html">3</a>||<a href="file4.html">4</a>|</center>
</font>
</body>
</html>
Висновок: на цій лабораторній я практикував створення web-сторінки з розповіддю про себе, з використанням мови HTML.