Отчет 4
.docxФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М.А. БОНЧ-БРУЕВИЧА»
(СПбГУТ)
Кафедра безопасности информационных систем
ОТЧЁТ
по практической работе №4 на тему:
«Разработка html-документа.»
по дисциплине «Основы интернет-технологий»
Выполнил: студент группы ИСТ-114, Медведева С.Г.
«27» ноября 2022 г.___________/Медведева С.Г
Принял: Исупова Е. А.
« » 2022 г. ___________/Е.А. Исупова
ЦЕЛЬ РАБОТЫ
Изучение основных технологий создания HTML-документа.
ВОПРОСЫ ДЛЯ ИЗУЧЕНИЯ
Назначение языка разметки гипертекста HTML.
HTML (Hypertext Markup Language) – язык разметки гипертекста, предназначенный для создания и верстки web-страниц, размещаемых в Интернете.
Web-страница – это созданный документ в формате html, который может включать в себя видео, фото, текст, графику, гиперссылки. Основное содержимое веб-страницы можно назвать контентом. Благодаря наличию ссылок содержимое веб-страницы называют гипертекстом.
Структура HTML-документа.
Тег (англ. tag — именованная метка) — дескриптор языка разметки гипертекста.
Атрибут – параметр тега, который может иметь конкретные значения, устанавливаемые автором для изменения функции тега.
Теги задают структуру страницы в виде вкладываемых друг в друга элементов, причем открывающий тег (<…>) задает начало одноименного элемента, а закрывающий (</…>) — конец.
Открывающий тег состоит из имени, за которым может следовать список атрибутов. Возможно применение непарных (одиночных) тегов (например, img, br).
В общем виде структура web-страницы состоит из головной части (head), обозначается <head> … </head>, и тела документа (body), обозначается <body> … </body>. В головной части помещается метаинформация, являющаяся описанием документа. В теле документа расположено непосредственно содержимое, которое выводится в окне браузера или на печатающее устройство. Вся web-страница должна быть заключена в теги <html>…</html>.
Все теги НТМL по их назначению и области действия можно разделить на следующие основные группы:
определяющие структуру документа;
оформление блоков гипертекста (параграфы, списки, таблицы, картинки);
гипертекстовые ссылки и закладки;
формы для организации диалога;
вызов программ
Основные элементы логического форматирования гипертекста
Элементы - весь текст, заключённый между начальным и конечным тегами, включая и сами эти теги. Сам же текст между тегами называется содержанием элемента.
В качестве основных элементов оформления HTML – документа необходимо выделить следующие элементы: заголовки, абзацы, списки, таблицы, изображения, ссылки.
Заголовок — важный элемент документа, который помогает систематизировать текст. Число, присутствующее в названии заголовка, характеризует степень его вложенности. По умолчанию заголовок самого верхнего уровня <h1> ... </h1> выделяется самым крупным шрифтом.
Основным тегом форматирования текста является парный тег абзаца <p> ... </p>. Абзацы делят текст на логические части и отделяются друг от друга на расстояние в одну строку.
Существует три основных вида списков: маркированные, нумерованные, определений
Маркированные списки задаются при помощи тегов <ul> ... </ul>. Для задания элементов списка используются теги <li> ... </li> (item list).
Нумерованные списки создаются при помощи тегов <ol> ... </ol>. Для элементов списков, как и в случае маркированных списков, используются теги <li> ... </li>.
Списки определений задаются с помощью тегов <dl> ... </dl>. Определяемый термин, или понятие, помещается в теги <dt> ... </dt>. Определение понятия заключается в теги <dd> ... </dd>.
Для встраивания изображений в HTML-документ применяется тег <img>. Его обязательный атрибут — src, значением которого является адрес встраиваемого изображения. допустимо размещать только внутри блочных элементов типа <p>, <div>, <table>.
Ссылка — это фрагмент страницы, щелкнув на котором в окне браузера пользователь может перейти к другой странице или же к другой части данной страницы. Ссылка является строчным элементом и задается тегом <a> ... </a>.
Табличный способ разметки web-страницы.
Таблицы являются одной из основных структур, используемых для структурирования информации в HTML-документах. Создаются с помощью тегов
<table> ... </table> - создание таблицы
<tr> ... </tr> (table row – строка таблицы)
<td> ... </td> (table data – данные таблицы)
Таблицы состоят из ячеек, образующихся при пересечении строк и столбцов. Ячейки таблиц могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы. Ячейки заголовка столбца таблицы задаются элементом <th> ... </th>.
Для объединения нескольких ячеек в таблице используются атрибуты colspan (объединение столбцов) и rowspan (объединение строк) тега <td>.
ХОД РАБОТЫ
Страница 1.
<!DOCTYPE html> <html lang=“ru"> <head> <meta charset="UTF-8"> <title>Лабораторная работа №1</title> </head> <body> <table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <th colspan=2> Все о Ежиках</th> </tr> <tr> <th width="20%">Навигация</th> <th width="80%">Ежики</th> </tr> <tr> <td width="20%"> <ul> <li>Ссылка на страницу 2</a></li> </ul> </td> <td width="80%"> <h1> Определение </h1> Ежи – это небольшие милые зверьки, которые знакомы нам всем с детства. При этом не обязательно отправляться в поле или в лес, чтобы увидеть их. Довольно часто их можно увидеть во дворе частного дома или в пределах дачного участка. Наиболее отчаянных особей запросто можно встретить в пределах городов. <h2> Ежи: описание </h2> Ежи представляют семейство ежовых и отряд насекомоядных. Они являются наиболее популярными персонажами детских произведений, а также мультфильмов. У зверька достаточно плотное телосложение, которое покрыто колючими иголками, между которыми растут редкие волоски. Как правило, ежи сворачиваются в клубок в случае опасности, что возможно благодаря верхнему слою кожи, которая способна значительно растягиваться. </td> </tr> <tr> <td colspan=2> Медведева С.Г. ИСТ-114</td> </tr> </table> </body> </html>
Вторая страница (page2.html)
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Лаборатоная работа 4</title> </head> <body> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <th align="center" colspan="2"> Ежики </th> </tr> <tr> <td align="center"> <a href="page1.html" > <img src="img_2.png" width="200" height="100"> </a> </td> </tr> <tr> <td > <h3 align="left"> Поведение и образ жизни </h3> <p> Как правило, ежи выходят на охоту с наступлением сумерек, а в дневное время они находятся в своих укрытиях, которые представлены кустарниками, углублениями в земле, небольших пещерах, в том числе и в норах, которые были оставлены по тем или иным причинам бывшими «владельцами». Диаметр гнезда составляет около 25 см, при этом его дно выстилается сухой травой, листьями или мхом.</p> </td> </tr> <tr> <td width > <h3> Строение и внешний вид </h3> <p> Внешние особенности зверько завияст от того, к какому виду они принадлежат. Но общее описание животных выглядит так: </p> <ol> <li> Голова крупная, клинообразная, с заостренным мокрым носом на вытянутой мордочке. </li> <li> Тело растянутое, с хорошо развитой подкожной мускулатурой, за счет которой колючее животное легко свертывается в клубок. </li> </ol> </td> </tr> <tr> <td> <h3> Разновидности </h3> <dl> <dt> Европейские (обыкновенные)</dt> <dd> - живут на всей европейской территории и в части азиатских стран. Они весят около 800г.</dd> <dt> Ушастые ежи </dt> <dd> - живут в Китае, Индии, Африке, Малой и Средней Азии. Средний вес ежа не превышает 430г</dd> </dl> </td> </tr> <tr> <td> <table border="2" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center"> <img src="img.png"> </td> <td align="center"> <img src="img_1.png" width="600" height="300"> </td> </tr> </table> </td> </tr> </table> </body> </html>
Рис. 1 – Page_2.
ВЫВОДЫ
Были изучены основные технологии создания HTML-документа.
Санкт-Петербург
2022