Міністерство освіти і науки України
Національний університет “Львівська політехніка”
Кафедра ЗІ
Звіт
до лабораторної роботи №2
Програмування web-сторінок мовою HTML
Виконав:
Студент гр. Іб-4
Львів - 2008
Мета: створення 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= “варіант”.
Розмістіть своє фото (вгорі справа) на сторінці розміром: «варіант розміру»
Варіанти завдань:
Текст коду Хамл-Сторінки 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.