Практичне завдання:
У web-сайт, створений на попередній практичній роботі додати списки різних видів, таблицю, гіперпосилання.
Приклад №1 виконання завдання :
Файл index.html
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<head>
<meta http-equiv="Content-Type" content="text/html" />
<title>Основы HTML и CSS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header"><img src="http://compshistory.ru/wp-content/uploads/2011/09/p18.jpg" align="left" width="80" height="100">
<H1>Електронний курс "Архітектура комп'ютера"</H1>
</div>
<div id="navigation">
<A href="#stih1">Головна|</A>
<A href="#stih2">Мета курсу|</A>
<A href="Modul1.html">Модуль 1|</A>
<A href="Modul2.html">Модуль 2|</A>
<A href="Modul3.html">Модуль 3|</A>
<A href="Modul4.html">Модуль 4|</A>
<A href="Pract.html">Практичні роботи</A>
</div>
<div id="menu">
<A href="#stih1">Головна</A><BR>
<BR>
<A href="#stih2">Мета курсу</A><BR>
<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_3 ">Вимірення кількості інформації </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>
<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>
<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>
<A href="Modul3.html#stih3_4 ">Накопичувачі інформації</A><BR>
<A href="Modul3.html#stih3_5 ">Етапи складання ПК. Кофігурування ПК</A><BR>
<BR>
<A href="Modul4.html">МОДУЛЬ 4 СУЧАСНІ АРХІТЕКТУРИ</A><BR>
<A href="Modul4.html#stih4_1 ">Базові представлення про архітектуру ЕОМ</A><BR>
<A href="Modul4.html#stih4_2 ">Обчислювальні системи багатопроцесорної архітектури</A><BR>
<A href="#stih3">Перелік літератури</A>
<BR>
<A href="#stih4">Словник понять і термінів</A>
<BR>
<A href="#stih5">Практичні роботи</A>
</div>
<div id="content"> Рекомендована література:<BR>
<img src="images\Broido.jpg" align="center" width="120" height="150"><BR><BR>
<img src="http://img11.nnm.me/1/f/f/c/8/76f6b245f29daa7ca88cf8dc02a.jpg" align="center" width="120" height="150"><BR><BR>
<img src="http://img12.nnm.me/8/5/b/5/8/6f8bcd1349bdc6e0e9fb31b0c7e.jpg" align="center" width="120" height="150"><BR><BR>
<img src="http://img12.nnm.me/4/f/d/b/2/14164b32e49badf311e7530723f.jpg" align="center" width="120" height="150"><BR><BR>
<img src="http://img15.nnm.me/2/5/d/5/e/cfe1d5aa5b102b0ca538615413c.jpg" align="center" width="120" height="150"><BR><BR>
</div>
<div id="clear">
</div>
<div id="footer">Автор Красковська Наталя Олегівна, Маріупольский механіко-металургійний коледж, 2013
</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;
}
#container {
background: #FFFFFF;
margin: 30px auto;
width: 900px;
height: 1000px;
}
#header {
background: #838283;
height: 100px;
width: 900px;
}
#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}
#menu {
background:#838283 ;
float: left;
width: 700px;
height: 1000px;
}
#content {
background: #d2d0d2;
float: right;
width: 200px;
height: 1000px;
}
#clear {
clear:both;
}
#footer {
background: #838283;
height: 50px;
width: 900px;
}
Файл Modul_1.html.
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<head>
<meta http-equiv="Content-Type" content="text/html" />
<title>Основы HTML и CSS</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
<div id="container"><img src="http://compshistory.ru/wp-content/uploads/2011/09/p18.jpg" align="left" width="120" height="150">
<div id="header"><H1>Електронний курс "Архітектура комп'ютера"</H1>
</div>
<div id="navigation">
<A href="index.html">Головна</A>
<A href="#stih2">Наступна тема></A>
<A href="#stih3">Зміст</A>
<A href="#stih3"><Попередня тема</A>
</div>
<div id="content">
<BR>
<A href="#stih1">МОДУЛЬ 1 ПРЕДСТАВЛЕННЯ ДАНИХ</A><BR>
<BR>
<ul type="square" >
<li><A href="#stih1_1">Історія розвитку ЕОМ. Класи обчислювальних машин </A><BR>
<li><A href="#stih1_2">Сфери і методи використання обчислювальних машин </A><BR>
<li><A href="#stih1_2">Фізичне представлення обробляємої інформації </A><BR>
<li><A href="#stih1_3">Вимірення кількості інформації </A><BR>
<li><A href="#stih1_4">Кодування і обробка чисел. Двійникова система обчислення</A><BR>
<li><A href="#stih1_5">Вісімкова та шістнадцяткова системи обчислення</A><BR>
<li><A href="#stih1_6">Загальні відомості про інтегральні мікросхеми</A><BR>
<li><A href="#stih1_7">Логічні основи ЕОМ</A><BR>
</ul>
<BR>
<p class="text">
<H2><A name="stih1_1">Історія розвитку ЕОМ.</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 був офіційно показаний публіці і дуже швидко набув широкої популярності у користувачів.
<P>Принцип відкритої архітектури, який дав можливість постійно вдосконалювати окремі частини комп'ютера, забезпечив великий успіх комп'ютеру IBM PC.</P>
<H2>Покоління ЕОМ</H2>
<P>Можна виділити 4 основні покоління ЕОМ. Але поділ комп'ютерної техніки на покоління - дуже умовна , нестрогая класифікація за ступенем розвитку апаратних і програмних засобів , а також способів спілкування з комп'ютером.</P>
<BR>
<P>I покоління ( до 1955 р.)
Елементна база - електронні лампи.
Недоліки: Ці комп'ютери були величезними , незручними і дуже дорогими машинами . Лампи споживали величезну кількість електроенергії і виділяли багато тепла . Притому для кожної машини використовувалася своя мова програмування. Набір команд був невеликим, схема арифметико - логічного пристрою і пристрою управління достатньо проста , програмне забезпечення практично було відсутнє. Показники об'єму оперативної пам'яті і швидкодії були низькими.
Особливості: Для введення-виведення використовувалися перфострічки , перфокарти , магнітні стрічки і друкуючі пристрої , оперативні запам'ятовуючі пристрої були реалізовані на основі ртутних ліній затримки електроннопроменевих трубок.
</P><BR>
<P>II покоління (1958-1964)
Елементна база: напівпровідникові транзистори .
Переваги: ??більш надійні, довговічні , малі, могли виконати значно складніші обчислення , володіли великою оперативною пам'яттю . 1 транзистор здатний був замінити - 40 електронних ламп і працює з більшою швидкістю.
Особливості: В якості носіїв інформації використовувалися магнітні стрічки і магнітні сердечники , з'явилися високопродуктивні пристрої для роботи з магнітними стрічками , магнітні барабани і перші магнітні диски.
В якості програмного забезпечення стали використовувати мови програмування високого рівня , були написані спеціальні транслятори з цих мов на мову машинних команд.
З'явилися моніторні системи, керівники режимом трансляції і виконання програм. З моніторних систем надалі виросли сучасні операційні системи.
</P><BR>
<P>III покоління (1964-1972)
Елементна база: інтегральні мікросхеми ( ІМС) .
Переваги: ІС здатна замінити десятки тисяч транзисторів.
Особливості: Машини третього покоління мають розвинені операційні системи. Вони володіють можливостями мультипрограмування , тобто одночасного виконання декількох програм . Багато завдань управління пам'яттю , пристроями і ресурсами стала брати на себе операційна система або ж безпосередньо сама машина.
Машини третього покоління - це сімейства машин з єдиною архітектурою , тобто програмно сумісних .
</P><BR>
<P>IV покоління ( з 1972 р. по теперішній час)
Елементна база: великі інтегральні схеми (ВІС) , які по потужності приблизно відповідали 1000 ІС .
Особливості: C точки зору структури машини цього покоління є багатопроцесорними і багатомашинні комплекси, що працюють на загальну пам'ять і загальне поле зовнішніх пристроїв. Ємність оперативної пам'яті близько 1 - 64 Мбайт. Створення перших персональних комп'ютерів.
</P> <BR>
<P>Якими мають бути ЕОМ V покоління
Зараз ведуться інтенсивні розробки ЕОМ V покоління. Розробка подальших поколінь комп'ютерів проводиться на основі великих інтегральних схем підвищеного ступеня інтеграції , використання оптоелектронних принципів ( лазери , голографія ) .
Основним завданням розробників ЕОМ V покоління є створення штучного інтелекту машини (можливість робити логічні висновки з представлених фактів) , розвиток " інтелектуалізації " комп'ютерів - усунення бар'єру між людиною і комп'ютером.
</P>
<H2><A name="stih1_2">Сферы и методы использования вычислительных машин</H2>
….
<BR><H2><A name="stih1_3">Физическое представление обрабатываемой информации</H2>
В обиходе информацией называют любые данные или факты, которые кого либо интересуют (сообщение о каких либо событиях, о чьей либо деятельности).
В технике под информацией понимают сообщения, передаваемые в форме знаков или сигналов.
В кибернетике под информацией понимают ту часть знаний, которая используется для ориентирования, активного действия, управления, т.е. в целях сохранения, совершенствования, развития системы.
…
В этом случае звуковой сигнал сначала преобразуется в дискретную аппроксимацию (многоуровневый ступенчатый сигнал), при этом происходит квантование во времени, которое заключается в измерении в дискретные промежутки времени необходимого параметра аналогового сигнала. Кроме того осуществляется квантование по амплитуде. Элемент разбиения этого сигнала именуют квантом.
<H2>Измерение количества информации</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">Автор Красковська Наталя Олегівна, Маріупольский механіко-металургійний коледж, 2013
</div>
</div>
</body>
</html>
Файл Style2.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;
}
#container {
background: #FFFFFF;
margin: 30px auto;
width: 900px;
height: 900px;
}
#header {
background: #838283;
height: 100px;
width: 900px;
}
#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}
#menu {
background:#838283 ;
float: left;
width: 100px;
height: 1000px;
}
}
#content {
background: #d2d0d2;
float: left;
width: 700px;
height: 900px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
padding: 10px;
}
#text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
padding: 10px;
}
#clear {
clear:both;
}
#footer {
background: #838283;
height: 50px;
width: 900px;
}
Результати:
