web лабки / WEB-6lab-boiko
.docСтудент Бойко Євгеній група 410-і
Тема: Робота з фреймами
Мета: Придбання навиків створення фреймів; придбання навиків створення простого Web-сайта,mщо складається з декількох HTML-документів, і посилань в певний фрейм.
Хід роботи
Завдання №1
Скріншот готової програми.
Код програми.
1.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Boiko</title>
</head>
<body font bgcolor="blue">
<h1 ><font color="grey"> Сторінка №2. </font> </h1>
<p><img src="2.jpg" alt="Welcome to the club body" width="100%" height="100%"> </p>
</body>
</html><p><img src="2.jpg" alt="dadaya" width="100%" height="100%"> </p>
</body>
</html>
3. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Boiko </title>
</head>
<body font bgcolor="green">
<h1 ><font color="black"> Сторінка №3. </font> </h1>
<p><img src="3.jpeg" alt="Welcome to the club body" width="100%" height="100%"> </p>
</body>
</html>
Завдання №2
Скріншот готової програми.
Код програми.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Boiko</title>
</head>
<frameset cols="33%, 33%, 33%" bordercolor="black" noresize="1">
<frame src= "str1.html" name="str1">
<frame src= "str2.html" name="str2">
<frame src= "str3.html" name="str3">
</frameset>
</html>
Завдання №3
Скріншот готової програми.
Код програми.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Boiko Gor </title>
</head>
<frameset rows="33.3%, 33.3%, 33.3%" noresize="1">
<frame src= "str1.html" name="str1">
<frame src= "str2.html" name="str2">
<frame src= "str3.html" name="str3">
</frameset>
</html>
Завдання №4
Скріншот готової програми.
Код програми.
Glav.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Boikо glav </title>
</head>
<frameset cols="33%, 66%" noresize="1">
<frame src= "Help.html" name="hyper">
<frame src= "glav.html" name="number2">
</frameset>
</html>
Help.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Glav help </title>
<h1> Зміст </h1>
</head>
<A href=str1.html target=number2> Сторінка №1 </A><br>
<A href=str2.html target=number2> Сторінка №2 </A><br>
<A href=str3.html target=number2> Сторінка №3 </A><br>
</html>
Завдання №5
Скріншот готової програми.
Код програми.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Boiko str4 </title>
</head>
<h1>Сторінка №4</h1>
<br><h5>
<b>Фрейм </b><i> <FONT COLOR="aqua">(frame)</FONT> </i>— рамка, область сторінки — дозволяє розділяти екран на
декілька областей, в кожній з яких відображається вміст окремої сторінки или Web-узла.».</h5><br>
</html>
Завдання №_6_
Скріншот готової програми.
Код програми.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Boiko plav </title>
</head>
<body font bgcolor=" yellow">
<h1><center><font color="lime" align="center"> Приклад плаваючого фрейма</h1>
<Iframe src="str4.html" width="30%" height="300" align="center">
</Iframe>
</body>
</html>
</html>
Завдання №7
Скріншот готової програми.
Код програми.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Boiko Ram </title>
</head>
<frameset cols="33%, 33%, *" bordercolor="orange" noresize="1">
<frame src= "str1.html" name="str1">
<frame src= "str2.html" name="str2">
<frameset rows="17%, 17%">
<frame src= "str3.html" name="str3">
<frame src="str4.html" name="str4">
</frameset>
</html>
Завдання №8
vert.html, gor.html, glav.html, plav.html, ram.html, будуть прікріплені до звіту роботи
Завдання №9
Скріншот готової програми.
Код програми.
1.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Boiko </title>
</head>
<frameset cols="33.3%, 33.3%, 33.3%" noresize="1">
<frame img src= "1.jpg" name="img1">
<frame src= "4lab.html" name="table">
<frame src= "Help2.html" name="hyper2">
</frameset>
</html>
2.
<html>
<style>
th {
background-color: black;
}
table, td, th {
border: 1px solid #595959;
}
td, th {
padding: 3px;
width: 30px;
height: 35px;
}
</style>
<body>
<h1> Таблиця №1</h1>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><div align="center">*</div></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h1> Таблиця №2</h1>
<table>
<tbody>
<tr>
<td style="background-color: #3498db;" rowspan="1" colspan="1"></td>
<td style="background-color: red;" rowspan="1" colspan="1"></td>
<td style="background-color: #3498db;" rowspan="1" colspan="1"></td>
</tr>
<tr>
<td style="background-color: green;" rowspan="1" colspan="1"></td>
<td><img src="gekon.jpg" height="34" width="34"></td>
<td style="background-color: #3498db;" rowspan="1" colspan="1"></td>
</tr >
<tr>
<td style="background-color: yellow;" rowspan="1" colspan="1"></td>
<td style="background-color: maroon;" rowspan="1" colspan="1"></td>
<td style="background-color: black;" rowspan="1" colspan="1"></td>
</tr>
</tbody>
</table
<br>
<h1> Таблиця №3</h1>
<table>
<tbody>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td><img src="gekon.jpg" height="50" width="50"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
3.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Boiko help 2 </title>
<h1> Гіперпосилання </h1>
</head>
<a href="str1.html" target="_blank"><font color="orange">Перейти на сторінку №1<br></font></a>
<a href="str2.html" target="_blank"><font color="pink">Перейти на сторінку №2<br></font></a>
<a href="str2.html" target="_blank"><font color="lime">Перейти на сторінку №3<br></font></a>
<a href="str3.html" target="_blank"><font color="red">Перейти на сторінку №4<br></font></a>
<a href="https://mk.sumdu.edu.ua/" target="_blank"><font color="blue">МАШ коледж СумДУ
</font></a><br>
</html>
4.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Геренко </title>
</head>
<body font bgcolor="yellow">
<h1 ><font color="red"> Сторінка №1. </font> </h1>
<p><img src="1.jpg" alt="dadaya" width="100%" height="100%"> </p>
<a name="Hello"></a>
</body>
</html>
5. дивіться код Str1.html, Str2.html, Str3.html, Str4.html
Висновок: На лабораторній роботі я роздобув навики створення фреймів.