Отчеты / Web. Лабораторная работа 3
.pdfФедеральное агентство связи ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ
ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ «САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М. А. БОНЧ-БРУЕВИЧА» (СПбГУТ)
Факультет инфокоммуникационных сетей и систем Кафедра программной инженерии и вычислительной техники
ЛАБОРАТОРНАЯ РАБОТА №3 по дисциплине «Web-технологии» на тему «Стили»
Выполнил: студент 3-го курса дневного отделения группы ИКПИ-85
Коваленко Леонид Александрович Преподаватель:
профессор, к. т. н. Бузюков Лев Борисович
Санкт-Петербург 2020
Задание №1
Результат выполнения задания №1 (без оформления CSS) представлен на рис. 1 и в табл. 1.
Рисунок 1 — Отображение «name_base.html» Таблица 1 — Файл «name_base.html»
<!DOCTYPE html>
<html>
<head>
<title>Течения мирового океана</title>
</head>
<body>
<center><strong><em>Течения мирового океана</em></strong></center>
<div>
<p>Летом 1881 года в Северном Ледовитом океане, к северо-востоку от Новосибирских островов, разыгралась трагедия: судно американской полярной экспедиции «Жанетта» было раздавлено льдами и затонуло. Три года спустя, в 1884 году, у юго-западных берегов Гренландии было найдено 58 различных предметов, принадлежащих этой экспедиции.</p>
<p>Плоды, растущие на Антильских островах, иногда обнаруживаются у берегов Шотландии и даже у берегов Шпицбергена. Пемзу, выброшенную при извержении вулкана Кракатау в Зондском проливе в 1883 году, моряки находили через год у берегов Мадагаскара и южной оконечности Африки.</p>
</div>
<p>Эти примеры говорят о передвижении воды в океанах от Новосибирских островов к южной оконечности Гренландии, от Антильских островов к Шпицбергену, от Зондского пролива к Мадагаскару. Такие перемещения воды в океанах на большие расстояния называются <strong><em><u>морскими течениями</u></em></strong>.</p>
<table>
<caption><strong><em>Течения Атлантического океана</em></strong></caption>
<tr>
<th>Название</th> <th>Скорость (км/сутки)</th> <th>Температура воды</th> <th>Где протекает</th>
</tr>
<tr>
<td>Северное пассатное</td> <td>20-45</td> <td>Тёплое</td>
<td>К северу от экватора, от Африки к Антильским островам</td>
2
</tr>
<tr>
<td>Гольфстрим</td> <td>25-60</td> <td>Тёплое</td>
<td>От берегов Америки на северо-восток</td>
</tr>
<tr>
<td>Северо-Атлантическое</td> <td>20-45</td> <td>Тёплое</td>
<td>Продолжение Гольфстрима к северо-западу Европы</td>
</tr>
<tr>
<td>Лабрадорское</td> <td>15-60</td> <td>Холодное</td>
<td>Вдоль северо-восточного берега Северной Америки</td>
</tr>
</table>
</body>
</html>
Задание №2
Результат выполнения задания №2 (с оформлением CSS, атрибут style) представлен на рис. 2 и в табл. 2.
Рисунок 2 — Отображение «name_base1.html» Таблица 2 — Файл «name_base1.html»
<!DOCTYPE html>
<html>
<head>
<title>Течения мирового океана</title>
</head>
<body>
<div style="font-size: 18pt;font-weight: bold;font-style: italic;textalign: center;">Течения мирового океана</div>
<div style="background: silver;font-weight: bold;border: 1px solid black;text-align: justify;">
<p style="margin: 0;text-indent: 1.5cm;text-align: justify;">Летом 1881 года в Северном Ледовитом океане, к северо-востоку от Новосибирских островов, разыгралась трагедия: судно американской полярной экспедиции
3
«Жанетта» было раздавлено льдами и затонуло. Три года спустя, в 1884 году, у юго-западных берегов Гренландии было найдено 58 различных предметов, принадлежащих этой экспедиции.</p>
<p style="margin: 0;text-indent: 1.5cm;text-align: justify;">Плоды, растущие на Антильских островах, иногда обнаруживаются у берегов Шотландии и даже у берегов Шпицбергена. Пемзу, выброшенную при извержении вулкана Кракатау в Зондском проливе в 1883 году, моряки находили через год у берегов Мадагаскара и южной оконечности Африки.</p>
</div>
<p class="main_text" style="margin: 0;text-indent: 1.5cm;text-align: justify;font-family: Arial, serif;width: 90%;">Эти примеры говорят о передвижении воды в океанах от Новосибирских островов к южной оконечности Гренландии, от Антильских островов к Шпицбергену, от Зондского пролива к Мадагаскару. Такие перемещения воды в океанах на большие расстояния называются <span style="font-weight: bold;font-style: italic;text-decoration: underline;">морскими течениями</span>.</p>
<table style="border-collapse: collapse; width: 100%; text-align: center;">
<caption><div style="font-size: 18pt;font-weight: bold;font-style: italic;text-align: center;">Течения Атлантического океана</div></caption>
<tr>
<th style="border: 1px solid black; padding: 4px;background: silver;border-bottom: 4px solid black;font-weight: bold;font-style: italic;">Название</th>
<th style="border: 1px solid black; padding: 4px;background: silver;border-bottom: 4px solid black;font-weight: bold;font-style: italic;">Скорость (км/сутки)</th>
<th style="border: 1px solid black; padding: 4px;background: silver;border-bottom: 4px solid black;font-weight: bold;font-style: italic;">Температура воды</th>
<th style="border: 1px solid black; padding: 4px;background: silver;border-bottom: 4px solid black;font-weight: bold;font-style: italic;">Где протекает</th>
</tr>
<tr>
<td style="border: 1px solid black; padding: 4px;">Северное пассатное</td>
<td style="border: 1px solid black; padding: 4px;">20-45</td> <td style="border: 1px solid black; padding: 4px;">Тёплое</td> <td style="border: 1px solid black; padding: 4px;">К северу от
экватора, от Африки к Антильским островам</td>
</tr>
<tr style="background: silver;">
<td style="border: 1px solid black; padding: 4px;">Гольфстрим</td>
<td style="border: 1px solid black; padding: 4px;">25-60</td> <td style="border: 1px solid black; padding: 4px;">Тёплое</td> <td style="border: 1px solid black; padding: 4px;">От берегов
Америки на северо-восток</td>
</tr>
<tr>
<td style="border: 1px solid black; padding: 4px;">СевероАтлантическое</td>
<td style="border: 1px solid black; padding: 4px;">20-45</td> <td style="border: 1px solid black; padding: 4px;">Тёплое</td> <td style="border: 1px solid black; padding: 4px;">Продолжение
Гольфстрима к северо-западу Европы</td>
</tr>
<tr style="background: silver;">
<td style="border: 1px solid black; padding: 4px;">Лабрадорское</
td>
<td style="border: |
1px solid |
black; padding: |
4px;">15-60</td> |
|||
<td |
style="border: |
1px |
solid |
black; |
padding: |
4px;">Холодное</td> |
<td |
style="border: |
1px |
solid |
black; |
padding: |
4px;">Вдоль северо- |
восточного берега Северной Америки</td>
4
</tr>
</table>
</body>
</html>
Задание №3
Результат выполнения задания №3 (с оформлением CSS, тэг style) представлен на рис. 3 и в табл. 3.
Рисунок 3 — Отображение «name_base2.html» Таблица 3 — Файл «name_base2.html»
<!DOCTYPE html> <html>
<head>
<title>Течения мирового океана</title>
<style> table {
border-collapse: collapse; width: 100%;
text-align: center;
}
th, td {
border: 1px solid black; padding: 4px;
}
th {
background: silver; border-bottom: 4px solid black; font-weight: bold;
font-style: italic;
}
tr:nth-child(odd) { background: silver;
}
p {
margin: 0; text-indent: 1.5cm; text-align: justify;
}
.header { font-size: 18pt;
font-weight: bold; font-style: italic;
5
text-align: center;
}
.main_text {
font-family: Arial, serif; width: 90%;
}
.spec_text { background: silver; font-weight: bold;
border: 1px solid black; text-align: justify;
}
.emphasizer { font-weight: bold; font-style: italic;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="header">Течения мирового океана</div> <div class="spec_text">
<p>Летом 1881 года в Северном Ледовитом океане, к северо-востоку от Новосибирских островов, разыгралась трагедия: судно американской полярной экспедиции «Жанетта» было раздавлено льдами и затонуло. Три года спустя, в
1884 году, у юго-западных берегов Гренландии было найдено 58 различных
предметов, принадлежащих этой экспедиции.</p>
<p>Плоды, растущие на Антильских островах, иногда обнаруживаются у берегов Шотландии и даже у берегов Шпицбергена. Пемзу, выброшенную при извержении вулкана Кракатау в Зондском проливе в 1883 году, моряки находили через год у берегов Мадагаскара и южной оконечности Африки.</p>
</div>
<p class="main_text">Эти примеры говорят о передвижении воды в океанах от Новосибирских островов к южной оконечности Гренландии, от Антильских островов к Шпицбергену, от Зондского пролива к Мадагаскару. Такие перемещения воды в океанах на большие расстояния называются <span class="emphasizer">морскими течениями</span>.</p>
<table>
<caption><div class="header">Течения Атлантического океана</div></caption>
<tr>
<th>Название</th> <th>Скорость (км/сутки)</th> <th>Температура воды</th> <th>Где протекает</th>
</tr>
<tr>
<td>Северное пассатное</td> <td>20-45</td> <td>Тёплое</td>
<td>К северу от экватора, от Африки к Антильским островам</td>
</tr>
<tr>
<td>Гольфстрим</td> <td>25-60</td> <td>Тёплое</td>
<td>От берегов Америки на северо-восток</td>
</tr>
<tr>
<td>Северо-Атлантическое</td> <td>20-45</td> <td>Тёплое</td>
<td>Продолжение Гольфстрима к северо-западу Европы</td>
</tr>
<tr>
6
<td>Лабрадорское</td> <td>15-60</td> <td>Холодное</td>
<td>Вдоль северо-восточного берега Северной Америки</td>
</tr>
</table>
</body>
</html>
Задание №4
Результат выполнения задания №4 (с оформлением CSS, тэг style с @import) представлен в табл. 4, 5.
Таблица 4 — Файл «name_base3.html»
<!DOCTYPE html>
<html>
<head>
<title>Течения мирового океана</title> <style type="text/css">
@import "./name_base.css";
</style>
</head>
<body>
<div class="header">Течения мирового океана</div> <div class="spec_text">
<p>Летом 1881 года в Северном Ледовитом океане, к северо-востоку от Новосибирских островов, разыгралась трагедия: судно американской полярной экспедиции «Жанетта» было раздавлено льдами и затонуло. Три года спустя, в 1884 году, у юго-западных берегов Гренландии было найдено 58 различных предметов, принадлежащих этой экспедиции.</p>
<p>Плоды, растущие на Антильских островах, иногда обнаруживаются у берегов Шотландии и даже у берегов Шпицбергена. Пемзу, выброшенную при извержении вулкана Кракатау в Зондском проливе в 1883 году, моряки находили через год у берегов Мадагаскара и южной оконечности Африки.</p>
</div>
<p class="main_text">Эти примеры говорят о передвижении воды в океанах от Новосибирских островов к южной оконечности Гренландии, от Антильских островов к Шпицбергену, от Зондского пролива к Мадагаскару. Такие перемещения воды в океанах на большие расстояния называются <span class="emphasizer">морскими течениями</span>.</p>
<table>
<caption><div class="header">Течения Атлантического океана</div></caption>
<tr>
<th>Название</th> <th>Скорость (км/сутки)</th> <th>Температура воды</th> <th>Где протекает</th>
</tr>
<tr>
<td>Северное пассатное</td> <td>20-45</td> <td>Тёплое</td>
<td>К северу от экватора, от Африки к Антильским островам</td>
</tr>
<tr>
<td>Гольфстрим</td> <td>25-60</td> <td>Тёплое</td>
<td>От берегов Америки на северо-восток</td>
</tr>
7
<tr>
<td>Северо-Атлантическое</td> <td>20-45</td> <td>Тёплое</td>
<td>Продолжение Гольфстрима к северо-западу Европы</td>
</tr>
<tr>
<td>Лабрадорское</td> <td>15-60</td> <td>Холодное</td>
<td>Вдоль северо-восточного берега Северной Америки</td>
</tr>
</table>
</body>
</html>
Таблица 5 — Файл «name_base.css»
table {
border-collapse: collapse; width: 100%;
text-align: center;
}
th, td {
border: 1px solid black; padding: 4px;
}
th {
background: silver; border-bottom: 4px solid black; font-weight: bold;
font-style: italic;
}
tr:nth-child(odd) { background: silver;
}
p {
margin: 0; text-indent: 1.5cm; text-align: justify;
}
.header { font-size: 18pt;
font-weight: bold; font-style: italic; text-align: center;
}
.main_text {
font-family: Arial, serif; width: 90%;
}
.spec_text { background: silver; font-weight: bold;
border: 1px solid black; text-align: justify;
}
.emphasizer { font-weight: bold; font-style: italic;
text-decoration: underline;
}
8
Задание №5
Результат выполнения задания №5 (с оформлением CSS, тэг link) представлен в табл. 6.
Таблица 6 — Файл «name_base3.html»
<!DOCTYPE html>
<html>
<head>
<title>Течения мирового океана</title>
<link rel="stylesheet" type="text/css" href="name_base.css">
</head>
<body>
<div class="header">Течения мирового океана</div> <div class="spec_text">
<p>Летом 1881 года в Северном Ледовитом океане, к северо-востоку от Новосибирских островов, разыгралась трагедия: судно американской полярной экспедиции «Жанетта» было раздавлено льдами и затонуло. Три года спустя, в 1884 году, у юго-западных берегов Гренландии было найдено 58 различных предметов, принадлежащих этой экспедиции.</p>
<p>Плоды, растущие на Антильских островах, иногда обнаруживаются у берегов Шотландии и даже у берегов Шпицбергена. Пемзу, выброшенную при извержении вулкана Кракатау в Зондском проливе в 1883 году, моряки находили через год у берегов Мадагаскара и южной оконечности Африки.</p>
</div>
<p class="main_text">Эти примеры говорят о передвижении воды в океанах от Новосибирских островов к южной оконечности Гренландии, от Антильских островов к Шпицбергену, от Зондского пролива к Мадагаскару. Такие перемещения воды в океанах на большие расстояния называются <span class="emphasizer">морскими течениями</span>.</p>
<table>
<caption><div class="header">Течения Атлантического океана</div></caption>
<tr>
<th>Название</th> <th>Скорость (км/сутки)</th> <th>Температура воды</th> <th>Где протекает</th>
</tr>
<tr>
<td>Северное пассатное</td> <td>20-45</td> <td>Тёплое</td>
<td>К северу от экватора, от Африки к Антильским островам</td>
</tr>
<tr>
<td>Гольфстрим</td> <td>25-60</td> <td>Тёплое</td>
<td>От берегов Америки на северо-восток</td>
</tr>
<tr>
<td>Северо-Атлантическое</td> <td>20-45</td> <td>Тёплое</td>
<td>Продолжение Гольфстрима к северо-западу Европы</td>
</tr>
<tr>
<td>Лабрадорское</td> <td>15-60</td> <td>Холодное</td>
<td>Вдоль северо-восточного берега Северной Америки</td>
</tr>
9
</table>
</body>
</html>
10