WEB-7lab-boiko
.docxСтудент Бойко Євгеній група 410-і
Лабораторна робота №7
Тема: Графіка на веб-сторінці
Мета роботи: отримати навики по розміщенню графіки на вебсторінках, створенню карт зображень.
Завдання №1
Текст завдання.
Створіть веб-сторінку з таблицею, в якій розмістіть 6 зображень шириною 92 і висотою 114 пікселів кожне.
2. Додайте на веб-сторінку блок (використовуйте div, в якому
розмістіть 4 зображення різного розміру, джерелом яких є один і той же файл.Необхідно передбачити пропорції зображення. Зображення розташувати один від одного на відстань двох нерозривних пропусків.
3. У окремому блоці створіть зображення-карту, яка повинна містити активні області різної форми всіх складових ПК.
Скріншот готової програми.
Текст завдання.
<HEAD><TITLE>Boiko</TITLE>
<META CHARSET="UTF-8">
</HEAD>
<body>
<table border="2" align="center">
<tr>
<th><img src="1.jpg" width="92" height="114"></th>
<th><img src="1.jpg" width="92" height="114"></th>
<th><img src="1.jpg" width="92" height="114"></th>
<th><img src="1.jpg" width="92" height="114"></th>
<th><img src="1.jpg" width="92" height="114"></th>
<th><img src="1.jpg" width="92" height="114"></th>
</tr>
</table>
<div align="center">
<img src="1.jpg" height="100" width="114">
<img src="1.jpg" height="200" width="228">
<img src="1.jpg" height="169" width="47">
<img src="1.jpg" height="83" width="67">
</div>
<hr>
<div>
<center>
<H1><a name="PC">Складові ПК</a></H1>
</center>
<center><img src="2.jpg" usemap="#personal" width="512" height="355"></center>
<map name="personal">
<area shape="POLY" coords="134,2,205,44,137,129,59,68" href="https://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%B8%D0%B2%D0%BE%D0%B4_%D0%BE%D0%BF%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D1%85_%D0%B4%D0%B8%D1%81%D0%BA%D0%BE%D0%B2" title="DVD привід">
<area shape="rect" coords="40,142,104,340" href="https://ru.wikipedia.org/wiki/%D0%92%D0%B8%D0%B4%D0%B5%D0%BE%D0%BA%D0%B0%D1%80%D1%82%D0%B0" title="Відеокарта">
<area shape="POLY" coords="264,0,284,1,355,42,349,79,285,133,191,95,202,65" href="https://uk.wikipedia.org/wiki/%D0%91%D0%BB%D0%BE%D0%BA_%D0%B6%D0%B8%D0%B2%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F" title="Блок живлення">
<area shape="POLY" coords="403,17,482,63,476,93,429,150,351,100" href="https://ru.wikipedia.org/wiki/%D0%9A%D1%83%D0%BB%D0%B5%D1%80_(%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0_%D0%BE%D1%85%D0%BB%D0%B0%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8%D1%8F)" title="кулер для цп">
<area shape="POLY" coords="319,115,406,155,398,178,300,162,305,139" href="#" title="Оперативна память">
<area shape="rect" coords="130,160,200,260" href="https://uk.wikipedia.org/wiki/%D0%96%D0%BE%D1%80%D1%81%D1%82%D0%BA%D0%B8%D0%B9_%D0%B4%D0%B8%D1%81%D0%BA" title="Жорсткий диск">
<area shape="rect" coords="215,209,245,237" href="https://ru.wikipedia.org/wiki/%D0%A6%D0%B5%D0%BD%D1%82%D1%80%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D1%81%D1%81%D0%BE%D1%80" title="ЦП">
<area shape="rect" coords="262,185,508,340" href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B0%D1%82%D0%B5%D1%80%D0%B8%D0%BD%D1%81%D0%BA%D0%B0%D1%8F_%D0%BF%D0%BB%D0%B0%D1%82%D0%B0" title="Материнська плата">
<area shape="rect" coords="210,265,237,330" href="#" title="шнур">
<area shape="POLY" coords="184,90,284,162,236,186,156,131" href="#" title="шнур">
<area shape="rect" coords="126,266,198,342" href="https://ru.wikipedia.org/wiki/%D0%9A%D1%83%D0%BB%D0%B5%D1%80_(%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0_%D0%BE%D1%85%D0%BB%D0%B0%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8%D1%8F)" title="кулер на вдув/видув">
</map>
</div>
</body>
</html>
Висновок: На лабораторній роботі навчився створювати сторінки рiзних типів на мові HTML.