Приклад №2 виконання завдання :
Файл index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Електронний підручник</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header"> <img src="i:\1\image\logo.jpg" align="left" width="120" height="140"><H1>Електронний підручник "Архітектура комп.ютера"</H1>
</div>
<div id="navigation">
<A href="index.html">ГОЛОВНА|</A>
<A href="meta.html">МЕТА КУРСУ|</A>
<A href="Modul1.html">МОДУЛЬ 1|</A>
<A href="Modul2.html">МОДУЛЬ 2|</A>
<A href="Modul3.html">МОДУЛЬ 3|</A>
<A href="Pract.html">ПРАКТИЧНІ РОБОТИ</A>
</div>
<div id="menu"><ul>
<li><A href="index.html">ГОЛОВНА</A></li>
<li><A href="meta.html">МЕТА КУРСУ</A></li>
<li><A href="Modul1.html">МОДУЛЬ 1</A></li>
<li><A href="Modul2.html">МОДУЛЬ 2</A></li>
<li><A href="Modul3.html">МОДУЛЬ 3</A></li>
</ul>
</div>
<div id="content">
<br>
<p><b>Предметом вивчення навчального курсу "Архітектура компьютера" є: </b></p>
<ul type="circle" >
<li> структурна, схемотехнічна і логічна організація персонального комп’ютера;
<li> архітектурні платформи реалізації сучасних обчислювальних систем;
<li> принципи функціонування окремих вузлів персонального комп’ютера і периферійних пристроїв.
</ul>
<br>
<p> <b>Міждисциплінарні зв’язки: </b> дана дисципліна базується на знаннях, що одержали студенти при вивченні дисципліни “Основи інформатики”, «Фізика», а також логічно пов’язана з дисциплінами «Введення в спеціальність», “Системне програмне забезпечення і операційні системи”, «Організація комп’ютерних мереж», «Електроніка і мікроелектроніка».</p>
<p> Програма навчальної дисципліни складається з таких змістових модулів:</p>
<OL>
<li> Модуль 1 Представлення даних
<li> Модуль 2 Системні пристрої ПК
<li> Модуль 3 Інтерфейси вводу/ виводу
</OL>
</div>
<div id="clear">
</div>
<div id="footer">Автор Красковська Наталя Олегівна, Маріупольский механіко-металургійний коледж, 2015
</div>
</div>
</body>
</html>
Файл Modul1.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Електронний підручник</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header"> <img src="i:\1\image\logo.jpg" align="left" width="120" height="140"><H1>Електронний підручник "Архітектура комп.ютера"</H1>
</div>
<div id="navigation">
<A href="index.html">ГОЛОВНА|</A>
<A href="meta.html">МЕТА КУРСУ|</A>
<A href="Modul1.html">МОДУЛЬ 1|</A>
<A href="Modul2.html">МОДУЛЬ 2|</A>
<A href="Modul3.html">МОДУЛЬ 3|</A>
<A href="Pract.html">ПРАКТИЧНІ РОБОТИ</A>
</div>
<div id="menu"><ul>
<li><A href="index.html">ГОЛОВНА</A></li>
<li><A href="meta.html">МЕТА КУРСУ</A></li>
<li><A href="Modul1.html">МОДУЛЬ 1</A></li>
<li><A href="Modul2.html">МОДУЛЬ 2</A></li>
<li><A href="Modul3.html">МОДУЛЬ 3</A></li>
</ul>
</div>
<div id="content">
<br>
<A href="Modul1.html">МОДУЛЬ 1 ПРЕДСТАВЛЕННЯ ДАНИХ</A><BR>
<A href="Modul1.html#stih1_1 ">Історія розвитку ЕОМ. Класи обчислювальних машин </A><BR>
<A href="Modul1.html#stih1_2 ">Вимірення кількості інформації </A><BR>
<A href="Modul1.html#stih1_4 ">Кодування і обробка чисел. Двійникова система обчислення</A><BR>
<A href="Modul1.html#stih1_5 ">Вісімкова та шістнадцяткова системи обчислення</A><BR>
<A href="Modul1.html#stih1_6 ">Загальні відомості про інтегральні мікросхеми</A><BR>
<A href="Modul1.html#stih1_7 ">Логічні основи ЕОМ</A><BR>
<BR>
<p class="text">
<H2><A name="stih1_1">Історія розвитку ЕОМ</A></H2>
<P>
Перший комп'ютер – ENIAK був створений на замовлення міністерства оборони США в 1945 році. Його маса – 30 тонн, мав 18 тисяч радіоламп (сучасні електричні лампи). Через велику кількість випромінюваного тепла, вимагала потужних кондиціонерів. Швидкодія 5 тисяч операцій за секунду. Програму роботи набирали вручну перемикачами і кабелями на спеціальному полі.
Американський математик Джон фон Нейман запропонував записувати програму в електронну пам'ять комп'ютера для її виконання. Це збільшило швидкодію комп'ютера. Він також запропонував використовувати двійкову систему числення для виконання обчислень і запису команд програми.
Перший комп'ютер з програмою в пам'яті одержав назву EDSAC. Він був створений в Кембріджському університеті (Англія) в 1949 році.
В 40-50-х роках створювали комп'ютери на основі радіоламп.</P>
<P>Основоположником обчислювальної техніки в СРСР і в Україні був академік С.О.Лебедєв. Під його керівництвом в Електротехнічному університеті в Києві в 1951 році був створений перший в СРСР комп'ютер під назвою МЭСМ (малая электронно-счётная машина). Пізніше в Московському інституті точної механіки і обчислювальної техніки Лебедєв керував створенням най швидкодіючої (1 мільйон операцій за секунду) у світі на той час великої електронно-обчислювальної машини БЭСМ-6 (1952 рік).
</P>В 1948 році були винайдені транзистори. Це призвело до зменшення розмірів комп'ютера в сотні разів і підвищено їх надійність.
В 1965 році був випущений перший міні-комп'ютер РДР-8 розміром з холодильник, вартістю в 20 тис. дол. (в 40-50-х роках він коштував мільйони).
В 1968 році був створений комп'ютер на базі інтегральних схем, а в 1970 році фірма Intel почала продавати інтегральні схеми пам'яті.
В 1970 році вчені фірми Intel винайшли мікропроцесор – Intel-4004 (4-х бітовий).
В 1973 році – перший персональний комп'ютер Альтаір – 8800 на основі мікропроцесора Intel – 8080.
У серпні 1981 р. новий комп'ютер під назвою IBM PC був офіційно показаний публіці і дуже швидко набув широкої популярності у користувачів.
<BR><H2><A name="stih1_2">Измерение количества информации</A></H2>
В качестве единицы информации принят бит (англ. bit – binary digit - двоичная цифра).
Используются также более крупные производные единицы информации:
Килобайт Кбайт = 1024 байт = 210 байт
Мегабайт Мбайт = 1024 Кбайт = 220 байт
Гигабайт Гбайт = 1024 Мбайт = 230 байт
Терабайт Тбайт = 1024 Гбайт = 240 байт
Петабайт Пбайт = 1024 Тбайт = 250 байт
Экзобайт = 1018 Мбайт
Для описания скорости передачи данных можно использовать термин бод. Бод равен количеству значащих изменений сигнала (потенциала, фазы, частоты), происходящих в секунду. Для двоичных сигналов нередко принимают, что бод равен биту в секунду, например 1200 бод = 1200 бит/с.
</p>
</div>
<div id="clear">
</div>
<div id="footer">Автор Красковська Наталя Олегівна, Маріупольский механіко-металургійний коледж, 2015
</div>
</div>
</body>
</html>
Файл Modul2.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Електронний підручник</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header"> <img src="i:\1\image\logo.jpg" align="left" width="120" height="140"><H1>Електронний підручник "Архітектура комп.ютера"</H1>
</div>
<div id="navigation">
<A href="index.html">ГОЛОВНА|</A>
<A href="meta.html">МЕТА КУРСУ|</A>
<A href="Modul1.html">МОДУЛЬ 1|</A>
<A href="Modul2.html">МОДУЛЬ 2|</A>
<A href="Modul3.html">МОДУЛЬ 3|</A>
<A href="Pract.html">ПРАКТИЧНІ РОБОТИ</A>
</div>
<div id="menu"><ul>
<li><A href="index.html">ГОЛОВНА</A>
<li><A href="meta.html">МЕТА КУРСУ</A>
<li><A href="Modul1.html">МОДУЛЬ 1</A>
<li><A href="Modul2.html">МОДУЛЬ 2</A>
<li><A href="Modul3.html">МОДУЛЬ 3</A>
</ul>
</div>
<div id="content">
<br>
<A href="Modul2.html">МОДУЛЬ 2 СИСТЕМНІ ПРИСТРОЇ ПК</A><BR>
<A href="Modul2.html#stih2_1 ">Компоненти системних блоків</A><BR>
<A href="Modul2.html#stih2_2 ">Структура і функціонування процесора</A><BR>
<A href="Modul2.html#stih2_3 ">Організація памяті</A><BR>
<BR>
<p class="text">
<H2><A name="stih2_1">Компоненти системних блоків</A></H2>
<P>
Комп'ютером ми будемо називати вміст системного блоку, корпусу, в якому зосереджені всі компоненти відповідальні за обчислення, зберігання, обробку та передачу даних.
</P>
Все, що знаходиться зовні - пристрої введення / виведення інформації .
Пристрої виведення інформації : монітор , принтер.
Пристрої введення інформації: клавіатура , миша
Це так звані периферійні пристрої.
<BR><H2><A name="stih2_2">Структура і функціонування процесора</A></H2>
Центральний процесор CPU (центральний процесор ) представлений на системній платі однією-двома інтегральними мікросхемами (ІМС). ЦП управляє взаємодією між усіма блоками і підсистемами комп'ютера.
У ПК може працювати декілька процесорів. Один процесор управляє введенням/ иводом даних і називається «процесором введення-виведення». Обчислення з математичними числами виконуються математичним співпроцесором. Графічний процесор забезпечує швидке виведення зображення на екран дисплея. ЦП управляє всією комп'ютерною системою .
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> <center> Покоління </center> </td>
<td width="100" bgcolor="#336699"> <center> Процесор</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>Рік випуску</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center> Р1 </center> </td>
<td width="100" bgcolor="#FFCC33"> <center> i8080 </center> </td>
<td width="50" bgcolor="#336699"> <center> 1978 </center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center> Р2 </center> </td>
<td width="100" bgcolor="#FFCC33"> <center> i80286 </center> </td>
<td width="50" bgcolor="#336699"> <center> 1981</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center> Р3 </center> </td>
<td width="100" bgcolor="#FFCC33"> <center> i80386 </center> </td>
<td width="50" bgcolor="#336699"> <center> 1986</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center> Р4 </center> </td>
<td width="100" bgcolor="#FFCC33"> <center> i80486 </center> </td>
<td width="50" bgcolor="#336699"> <center> 1989</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center> Р5 </center> </td>
<td width="100" bgcolor="#FFCC33"> <center> Pentium </center> </td>
<td width="50" bgcolor="#336699"> <center> 1993 </center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center> Р6 </center> </td>
<td width="100" bgcolor="#FFCC33"> <center> Pentium Pro, Pentium II, III, Celeron </center> </td>
<td width="50" bgcolor="#336699"> <center> 1996 </center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center> Р7 </center> </td>
<td width="100" bgcolor="#FFCC33"> <center> AMD Athlon, AMD Duron) Pentium 4 ,
Intel Хеоп, 32-битные </center> </td>
<td width="50" bgcolor="#336699"> <center> 2000 </center> </td>
</tr>
</table>
</p>
<BR><H2><A name="stih2_3">Організація памяті</A></H2>
</div>
<div id="clear">
</div>
<div id="footer">Автор Красковська Наталя Олегівна, Маріупольский механіко-металургійний коледж, 2015
</div>
</div>
</body>
</html>
Файл Modul3.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Електронний підручник</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header"> <img src="i:\1\image\logo.jpg" align="left" width="120" height="140"><H1>Електронний підручник "Архітектура комп.ютера"</H1>
</div>
<div id="navigation">
<A href="index.html">ГОЛОВНА|</A>
<A href="meta.html">МЕТА КУРСУ|</A>
<A href="Modul1.html">МОДУЛЬ 1|</A>
<A href="Modul2.html">МОДУЛЬ 2|</A>
<A href="Modul3.html">МОДУЛЬ 3|</A>
<A href="Pract.html">ПРАКТИЧНІ РОБОТИ</A>
</div>
<div id="menu"><ul>
<li><A href="index.html">ГОЛОВНА</A>
<li><A href="meta.html">МЕТА КУРСУ</A>
<li><A href="Modul1.html">МОДУЛЬ 1</A>
<li><A href="Modul2.html">МОДУЛЬ 2</A>
<li><A href="Modul3.html">МОДУЛЬ 3</A>
</ul>
</div>
<div id="content">
<br>
<A href="Modul3.html">МОДУЛЬ 3. ІНТЕРФЕЙСИ ВВОДУ/ВИВОДУ</A><BR>
<A href="Modul3.html#stih3_1 ">Відеосистема</A><BR>
<A href="Modul3.html#stih3_2 ">Стандартні периферійні пристрої</A><BR>
<A href="Modul3.html#stih3_3 ">Додаткові пристрої вводу/виводу</A><BR>
<BR>
<p class="text">
<H2><A name="stih3_1">Відеосистема</A></H2>
<P>
Відеосистема складається з двох компонентів: монітора і відеоадаптера, який може бути представлений як окремої платою, так і елементом, інтегрованим на системну плату або в монітор.
</p>
<P>Монітор походить від телевізійного приймача. Один з перших моніторів з'явився в ЕОМ Вихор в 1951 році і був зібраний на базі трубки Вільямса .
</p>
Принцип роботи будь-якого монітора в головному вельми схожий: відеокарта формує відеосигнал і подає інформацію на дисплей. Власне, єдине завдання монітора - це показати картинку.
<BR><H2><A name="stih3_2">Стандартні периферійні пристрої</A></H2>
<P>Клавіатура - одне з найважливіших пристроїв комп'ютера, використовуване для введення в систему команд і даних.</p> <BR>
<img src="i:\1\image\clava.jpg" align="center" width="620" height="220">
<BR>
<P>Пристрої позиціонування різних типів:комп'ютерна миша;кульовий покажчик (trackball), трекбол;вказівний джойстик;сенсорна панель (вказівний планшет).</p>
<img src="i:\1\image\maus.jpg" align="center" width="320" height="220">
<BR><BR>
<H2><A name="stih2_3">Додаткові пристрої вводу/виводу</A></H2>
</div>
<div id="clear">
</div>
<div id="footer">Автор Красковська Наталя Олегівна, Маріупольский механіко-металургійний коледж, 2015
</div>
</div>
</body>
</html>
Файл Style.css.
body {
background:"#f3f2f3";
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 14px;
}
H1 {
text-align: center;
font-size: 200%;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
H2 {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
a {
color:#fdfdfd;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
#container {
background: #e4cfd0;
margin: 30px auto;
width: 900px;
height: 1000px;
}
#header {
background: #f1dc42;
text-align:center;
color:#9b0909;
height: 140px;
width: 900px;
}
#navigation {
background: #9b0909;
width: 900px;
height: 20px;
}
#menu {
background: #ad3535;
float: left;
width: 200px;
height: 1000px;
}
#content {
background: #d2d0d2;
float: right;
width: 700px;
height: 1000px;
}
#clear {
clear:both;
}
#footer {
background: #f1dc42;
text-align:center;
color:#9b0909;
height: 50px;
width: 900px;
}