Отчеты / Web. Лабораторная работа 1
.pdfФедеральное агентство связи ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ
ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ «САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М. А. БОНЧ-БРУЕВИЧА» (СПбГУТ)
Факультет инфокоммуникационных сетей и систем Кафедра программной инженерии и вычислительной техники
ЛАБОРАТОРНАЯ РАБОТА №1 по дисциплине «Web-технологии»
на тему «Создание и редактирование простейшего HTML-файла»
Выполнил: студент 3-го курса дневного отделения группы ИКПИ-85
Коваленко Леонид Александрович Преподаватель:
профессор, к. т. н. Бузюков Лев Борисович
Санкт-Петербург
2020
Задание №1 Результат выполнения задания №1 представлен на рис. 1 и в табл. 1.
Рисунок 1 — Отображение «Task1.html» Таблица 1 — Файл «Task1.html»
<!DOCTYPE html>
<html>
<head>
<title>Форматирование символов</title>
</head>
<body>
<font size="3" color="green" face="Times New Roman"> Это зелёные буквы, размер 12 пт, Times New Roman.
</font><br>
<font size="5" color="red" face="Arial"> Это красные буквы, размер 18 пт, Arial.
</font><br>
<font size="2" color="blue" face="Courier"> Это синие буквы, размер 10 пт, Courier.
</font><br>
<font size="4" color="lime" face="Times New Roman"> Это лаймовые буквы, размер 14 пт, Times New Roman.
</font><br>
<h6 style="color: yellow;">Это жёлтые буквы наименьшего размера.</h6> <h1 style="color: orange;">Это оранжевые символы наибольшего
размера.</h6>
</body>
</html>
Задание №2 Результат выполнения задания №2 представлен на рис. 2 и в табл. 2.
Рисунок 2 — Отображение «Task2.html» Таблица 2 — Файл «Task2.html»
<!DOCTYPE html>
<html>
<head>
<title>Форматирование символов</title>
</head>
<body>
<p align="right"><font size="3" face="Times New Roman"> Это первый абзац, выравнивание по правому краю
</font></p>
<p align="center"><font size="5" color="red" face="Arial" align="center">
2
Это второй абзац
красные буквы, размер 5, Arial, выравнивание по центру
</font></p>
<p><font size="4" color="green" face="Courier">
Это третий абзац, зеленые буквы, размер 4, шрифт - COURIER, выравнивание - по умолчанию.
</font></p>
</body>
</html>
Задание №3 Результат выполнения задания №3 представлен на рис. 3 и в табл. 3.
Рисунок 3 — Отображение «Task3.html» Таблица 3 — Файл «Task3.html»
<!DOCTYPE html>
<html>
<head>
<title>Форматирование символов</title>
</head>
<body>
<h1>Программное обеспечение</h1> <h2>СУБД</h2>
<h3>Microsoft Access</h3> <h3>SQL Server 2000</h3> <h2>САПР</h2> <h3>Autodesk</h3> <h4>Autocad 2000</h4> <h3>MathLab</h3> <h1>Операционные системы</h1> <h2>Microsoft</h2> <h3>MS-DOS</h3>
<h3>Windows 95</h3> <h3>Windows NT</h3>
</body>
</html>
3
Задание №4 Результат выполнения задания №4 представлен на рис. 4 и в табл. 4,
также на рис. 5 и в табл. 5.
Рисунок 4 — Физическое форматирование текста Таблица 4 — Файл «Task4.1.html»
<!DOCTYPE html>
<html>
<head>
<title>Физическое форматирование текста</title>
</head>
<body>
<font face="Arial">
<b>ГУТ - один из ведущих вузов России, готовящих специалистов в области связи.</b>
</font><br><br>
<b><u>Университет имеет факультеты:</u></b> <ul style="margin-bottom: 0;"> <li><strike>АЭС</strike>СС, СК и ВТ</li> <li>РС, РВ и ТВ</li>
<li>МТС</li> <li>ТСС</li>
</ul>
<font size="1">
Будущие инженеры изучают математику, физику, информатику, специальные технические дисциплины, иностранный язык, историю, философию и многие другие предметы.<br>
В курсе информатики студенты изучают язык программирования Pascal.<br> <i>Pascal</i> - это алгоритмический язык, разработанный в начале
70<sup>х</sup> годов XX века, автор языка - <i>Никлаус Вирт</i>.<br> <i>Алгоритм</i> - это конечная последовательность шагов, выполнение
которой приведёт к достижению поставленной цели.<br>
Алгоритмический язык используется для записи программы, в основе работы
которой лежит алгоритм.<br>
</font>
<p align="center">Н. Вирт: <i>Программа=алгоритм+структуры данных</i></p> Простейшая программа на языке Pascal выглядит так:
<table border="1px solid black" style="border-collapse:collapse;width:500px;" align="center">
4
<tr><td><pre face="Courier New" style="margin:0;"> program simple;
begin writeln('Привет!');
end.
</pre></td></tr>
</table>
</body>
</html>
Рисунок 5 — Логическое форматирование текста Таблица 5 — Файл «Task4.2.html»
<!DOCTYPE html>
<html>
<head>
<title>Логическое форматирование текста</title>
</head>
<body>
<font face="Arial">
<strong>ГУТ - один из ведущих вузов России, готовящих специалистов в области связи.</strong>
</font><br><br>
<strong style="text-decoration:underline;">Университет имеет факультеты:</strong>
<ul style="margin-bottom: 0;"> <li><del>АЭС</del>СС, СК и ВТ</li> <li>РС, РВ и ТВ</li>
<li>МТС</li> <li>ТСС</li>
</ul>
<font size="1">
Будущие инженеры изучают математику, физику, информатику, специальные технические дисциплины, иностранный язык, историю, философию и многие другие предметы.<br>
В курсе информатики студенты изучают язык программирования Pascal.<br> <dfn>Pascal</dfn> - это алгоритмический язык, разработанный в начале
70<sup>х</sup> годов XX века, автор языка - <em>Никлаус Вирт</em>.<br>
5
<dfn>Алгоритм</dfn> - это конечная последовательность шагов, выполнение которой приведёт к достижению поставленной цели.<br>
Алгоритмический язык используется для записи программы, в основе работы которой лежит алгоритм.<br>
</font>
<p align="center">Н. Вирт: <em>Программа=алгоритм+структуры данных</em></p> Простейшая программа на языке Pascal выглядит так:
<table border="1px solid black" style="border-collapse:collapse;width:500px;" align="center">
<tr><td><code face="Courier New" style="margin:0;"> program simple;<br> begin<br> writeln('Привет!');<br> end.<br>
</code></td></tr>
</table>
</body>
</html>
6