ИТ_Бунина №3
.docxМИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное образовательное учреждение высшего образования
«Юго-Западный государственный университет»
Практическая работа №4
По дисциплине «Информационные технологии»
Выполнил: Бунина А.В.
студент группы ИБ-01б
Проверил к.т.н: Киселев А.В.
Курск, 2021
1. Листинг файла-страницы:
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Бунина А.В.</title>
<meta name="description" content="Домашняя страничка обо мне">
<meta name="keywords" content="Оценки, контакты, страничка, фото">
</head>
<style>
body{
background:#c0c0c0;
}
#wrapper{
width: 900px;
margin: 0 auto;
background:#f2e8c9;
}
img{
float: left;
margin: -40px 0 0 0;}
h1{
margin:0 0 10px 40px;
color:#464451;
}
#sidebar{
background-color: #ffffff;
width: 180px;
height: 515px;
padding: 10px;
float: right;
border-radius: 5px;
box-shadow: rgba(0,0,0,0.5) 0px 1px 3px;
}
#content{
margin-bottom: 5px;
width: 676px;
padding: 10px;
background: #ffffff;
border-radius: 5px;
box-shadow: rgba(0,0,0,0.5) 0px 1px 3px;
}
.right{
float: right;
margin: 7px 0 7px 7px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Практическая работа №4</h1>
</div>
<div id="sidebar">
<h3>Ссылки на сторонние сайты</h3>
<p><a href="https://vk.com/ich_liebe_dich_nicht" target="_blank">ВК</a></p>
<p><a href="https://www.instagram.com/l__zombie__l/ target="_blank">Instagram</a></p>
<p><a href="https://www.pinterest.ru/l_zombie_l/ target="_blank">Pinterest</a></p>
<hr width="50" color="#037FFC" size="5">
<p><a href="buninalena9730@gmail.com/ target="_blank">Ссылку на адрес электронной почты</a></p>
</div>
<div id="content">
<h3>Биография</h3>
<p style="font-size:30px; font-family: gabriola;">Здравствуйте, меня зовут Бунина Алёна Владимировна.</p> <img class="right" src="l_zombie_l.jpg" width="200" height="auto">
<p style="font-size:15px; font-family: Arial;">Обучалась в муниципальном казенном общеобразовательном учреждении <b>"Рождественская основная общеобразовательная школа имени Героя Советского Союза И. М. Чертенкова"</b> с 2007 по 2016. </p>
<p style="font-size:24px; font-family: courier new;">С 2016 по 2020 обучалась в <u>"Курском государственном политехническом колледже"</u>.</p>
<p style="font-size:24px; font-family: matura mt script capitals;">На данный момент мне 20 лет и я обучаюсь на 1 курсе <i>Юго-Западного государственного университета</i>, на специальности "Информационная безопасность".</p>
</div>
<div id="content">
<h3>Таблица, содержащая данные об оценках за прошлый семестр</h3>
<table border="1" width="100%" cellpadding="5">
<tr> <th>Предмет</th> <th>Оценка</th> </tr>
<tr> <td>Языки программирования</td> <td>5</td> </tr>
<tr> <td>Физика</td> <td>5</td> </tr>
<tr> <td>Высшая математика (спецглавы)</td> <td>5</td> </tr>
<tr> <td>Математика</td> <td>4</td> </tr> </table></div>
</body></html>
2. Описание используемых тэгов:
<html>Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
<body>Представляет тело документа (содержимое, не относящееся к метаданным документа).
<img>Встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения.
<div> Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
<td> Создает ячейку таблицы.
<tr> Создает строку таблицы.
<style>Подключает встраиваемые таблицы стилей.
<p> Параграфы в тексте.
<a> Создаёт гипертекстовые ссылки.
<meta>Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке <head> может быть несколько тегов <meta>, так как в зависимости от используемых атрибутов они несут разную информацию.
<u>Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
<i>Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
<b>Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
<h1-h6> Создают заголовки шести уровней для связанных с ними разделов.
3. Распечатка окна браузера с загруженной персональной страницей:
