ФЕДЕРАЛЬНОЕ АГЕНСТВО СВЯЗИ
Федеральное государственное образовательное бюджетное учреждение
высшего профессионального образования
«Санкт-Петербургский государственный университет телекоммуникаций
им. проф. М.А. Бонч-Бруевича»
Кафедра Автоматизации предприятий связи
Дисциплина «Основы интернет технологий»
ОТЧЁТ
по лабораторной работе №5
«Изучение таблиц и ссылок»
Выполнил: студент группы ИСТ-931, Гетманченко Полина Алексеевна
«28» ноября 2020г. _________/П.А.Гетманченко/
Принял: к.т.н. доцент. Любимов А.Г.
«28» ноября 2020 г. _________/А.Г.Любимов/
Санкт-Петербург, 2020
Содержание
Цель работы 3
Основные задания 3
Задание №1: 3
Простая таблица: 3
Таблица с объединёнными ячейками: 4
Вложенные таблицы: 5
Эксперименты с объединением ячеек: 6
Эксперименты с вложенными таблицами: 9
Эксперименты с различными значениями атрибутов: 10
Пояснительная записка к заданию №1: 12
Задание №2: 14
Ссылки внутри документа: 14
Ссылки на другие html-документы: 17
Абсолютные адреса: 18
Относительные адреса: 18
Пояснительная записка к заданию №2: 19
Вывод 20
Электронные источники 20
Цель работы
Изучить создание таблиц средствами html, способов создания ссылок, основы гипертекстовых документов, средствами HTML.
Основные задания
Задание №1:
Создать несколько таблиц, используя описанные выше способы.
Поэкспериментировать с объединением ячеек, созданием вложенных таблиц, а так же с заданием различных значений атрибутов.
Простая таблица:
Результат работы представлен на рис.1-2.
рис. 1 – код в блокноте, связанный с простой таблицей
рис. 2 – страница сайта, связанная с кодом на рис.1
Таблица с объединёнными ячейками:
Результат работы представлен на рис.3-4.
рис. 3 – код в блокноте, связанный с таблицей с объединёнными ячейками
рис. 4 – страница сайта, связанная с кодом на рис.3
Вложенные таблицы:
Результат работы представлен на рис.5-6.
рис. 5 – код в блокноте, связанный с вложенными таблицами
рис. 5.2 – продолжение кода рис.5
рис. 6 – страница сайта, связанная с кодом на рис.5-5.2
Эксперименты с объединением ячеек:
Была создана таблица с 3 строчками и 3 столбцами рис.7-8:
рис. 7 – код в блокноте, связанный с простой таблицей
рис. 8 – страница сайта, связанная с кодом на рис.7
Теперь нужно объединить, например, ячейки с числами 1-4-7 (рис. 9-10):
рис. 9 – код в блокноте, связанный с объединением ячеек 1-4-7
рис. 10 – страница сайта, связанная с кодом на рис.9
Теперь нужно объединить, например, ячейки с числами 7-8-9 (рис. 11-12):
рис. 11 – код в блокноте, связанный с объединением ячеек 7-8-9
рис. 12 – страница сайта, связанная с кодом на рис.11
Эксперименты с вложенными таблицами:
Были созданы примеры вложенных таблиц с разным дизайном (рис.13-16):
рис. 13 – код в блокноте, связанный с вложенной таблицей
рис. 14 – страница сайта, связанная с кодом на рис.13
рис. 15 – код в блокноте, связанный с вложенной таблицей
рис. 16 – страница сайта, связанная с кодом на рис.15
Эксперименты с различными значениями атрибутов:
Была выбрана таблицы 3*3 из прошлого примера (рис.8) (рис.17):
рис.17 – простая таблица 3*3 из прошлого примера
Уберём из кода height="80" width="60%", получаем (рис.18):
рис.18 – простая таблица 3*3 из прошлого примера без атрибутов height="80" width="60%"
Из кода было убрано cellpadding="7" cellspacing="3", а потом поставлено cellpadding="30" cellspacing="60", в итоге (рис.19):
рис.19 – простая таблица 3*3 из прошлого примера, где cellpadding="7" cellspacing="3" были заменены на cellpadding="30" cellspacing="60"
Из кода было убрано border="3", получено (рис.20):
рис.20 – простая таблица 3*3 из прошлого примера без атрибута border="3"
Пояснительная записка к заданию №1:
HTML-документ обрамляется парными тегами <html> … </html>. Для обеспечения корректного отображения документа современный стандарт требует использования одиночного тега <!DOCTYPE>, имеющего одну из следующих структур:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">.
HTML-документы состоят из заголовка и тела документа. Заголовок и тело документа представляются парными тегами <head> … </head> и <body> … </body>, соответственно.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - позволяет перевести страницу на кириллицу, т.е. будут не иероглифы, а именно русские буквы.
<title>…</title> - определяет заголовок документа и не является частью документа, а также не показывается напрямую на веб-странице.
Атрибут align — задает выравнивание элемента относительно других элементов на странице или выравнивание внутри элемента в зависимости от того, к какому элементу (тегу) применен.
Тег <td> предназначен для создания одной ячейки таблицы. Должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.
Тег <tr> служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега <th> или <td>.
Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег <th> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.
Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.
Тег <caption> предназначен для создания заголовка к таблице и может размещаться только внутри контейнера <table>, причем сразу после открывающего тега. Такой заголовок представляет собой текст, по умолчанию отображаемый перед таблицей и описывающий ее содержание.
height устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <img>). Высота не включает толщину границ вокруг элемента, значение отступов и полей.
width устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег <img>). Ширина не включает толщину границ вокруг элемента, значение отступов и полей.
Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.
Атрибут cellpadding определяет расстояние между границей ячейки и ее содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.
Атрибут cellspacing задает расстояние между внешними границами ячеек. Если установлен атрибут border, толщина границы принимается в расчет.