Практична робота № 6
Тема: |
Робота з гіпертекстовою технологією. Створення веб-сторінки з допомогою мови HTML |
Мета: |
Ознайомитись з мовою HTML, набути практичних навиків створення веб-сторінок, використовуючи структури мови HTML |
Для виконання практичної роботи студент повинен:
ЗНАТИ |
ВМІТИ |
Поняття комп’ютерної технології; основні напрямки застосування комп’ютерних технологій в професійній діяльності. Основні команди мови HTML |
Працювати в середовищі ОС WINDOWS; створювати і зберігати текстові файли |
Забезпечення заняття:
Інструкційна карта.
Персональні комп’ютери
Словник мови HTML
Завдання до практичної роботи і методика їх виконання.
Завдання 1.
Запустити редактор Блокнот, набрати у його вікні редагування текст, визначити призначення основних тег, зробити припущення, яким буде результат:
<html>
<head>
<title> Тема : Створення веб-документа</title>
</head>
<body>
<h1>Міністерство освіти та науки</h1>
<h2>Київський торговельно-економічний університет</h2>
<hr color="ff0000" size="4">
<h3>ХМЕЛЬНИЦЬКИЙ ТОРГОВЕЛЬНО-ЕКОНОМІЧНИЙ КОЛЕДЖ</hЗ>
<br><br><br><br>
<h1>ПРАКТИЧНА РОБОТА №6</h1>
<p> з дисципліни: "Інформаційні системи і технології в ФКУ "</р>
<br><br>
Виконав(ла) студент(-ка) групи
<br>
Перевірив:
<br><br>
<p>
В роботі опрацювані питання:<br>
<a href="question1.html"> Основні теги та їхні атрибути для створення таблиць <br>
<a href="question2.html"> Основні теги та їх атрибути для форматування тексту. </a><br>
<a href="question3.html"> Основні теги та їхні атрибути для відображення малюнків.</a><br>
<a href="question4.html"> Основні теги та їх атрибути для організації гіперпосилань.</a><br>
<br><br><br></p>
Хмельницький - 2012
</body>
</html>
Зберегти файл під іменем “index.html”. При збереженні файла, в полі “Тип файла” виберіть “всі файли”
Не закриваючи вікно редактора, відкрити файл за допомогою Internet Explorer. Проаналізувати отриманий результат.
Внести наступні зміни:
після теги <body> поставити <center>;
після "2011" поставити </center>;
змінити колір лінії (тег HR) на 0000FF.
Зберегти зміни.
Повернутися до Internet Explorer (наприклад, утримуючи "Alt", натиснути "Tab") та обновити сторінку (наприклад, "F5").
Зробити висновки з застосування та дії змінених тегів (атрибутів).
Завдання 2.
Застосовуючи найпростіший текстовий редактор, створити HTML-документ question1.html.
Приклад файлу question1.html наводиться нижче, решту файлів створити самостійно за аналогією.
<html>
<head>
<title> Відповідь на перше питання</title>
</head>
<body text="00ccaa" bgcolor="#808080">
<h1><b><i>
Основні теги та їх атрибути для створення таблиць.
</b></i></h1><br>
Основними тегами для організації таблиць в HTML є: <br>
<li><TABLE>;
<li>< TR >;
<li>< TD >;
<li>< TH >.
<br>
Використовуючи перелічені теги, створимо наступну таблицю: <br>
<CENTER>
<TABLE BORDER=3 BGCOLOR= "yellow "
BORDER COLOR= "green">
<TC><I>Динаміка продажу продукції фірми "Промінь"за два роки</І></ТС>
<TR><TH></TH>
<TH>2010 рік</TH>
<TH>2011рік</TH>
<TH>Разом</TН></TR>
<TR> <TH ALIGN="left">Пo Україні, грн.</ТН>
<TD>417 516,95</TD>
<TD>106 253,84</TD>
<TD>523 770,79</TD>
</TR>
<TR> <TH ALIGN="left">Ha експорт, грн.</ТН>
<TD>451 487,34</TD>
<TD>169 023,90</TD>
<TD>620 511,24</TD>
</TR> <TR>
<TH ALIGN="Left">Усього, грн.</TН>
<TD> 33 970,39</TD>
<TD>62 770,06</TD>
<TD>96 740,45</TD>
</TR>
</TABLE>
</CENTER>
<a href="index.html">noвернутись до титульної сторінки <a><br>
<a href="question2.html"> Пepeйти до другого питання</а><br>
<br><br><br></p>
</body>
</html>
Збережіть створений файл, перевірте його представлення в броузері. Запустіть файл index.html, перевірте роботу гіперпосилання.