МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное автономное образовательное учреждение высшего образования
«Национальный исследовательский томский политехнический университет»
ИЯТШ ОЯТЦ
Отчет
по лабораторной работе № 6
Разработка web-страницы на языке html
Выполнил студент группы ОА23
Шевченко А.В.
Проверил преподаватель
Емельянов А.М.
Томск – 2022
Оглавление
Цель работы 3
Задание 4
Теоретическая часть 6
Ход работы 10
Вывод 12
Цель работы
изучить основы создания HTML-документов с использованием HTML-тэгов;
познакомиться с назначением метаданных. Научиться использовать фреймы. Освоить работу с FTP-сервером;
научиться применять мультимедиа, графику, таблицы и списки в HTML-документах;
научиться разрабатывать Web-ресурс, содержащий карты изображения и формы.
Задание
1 Создание HTML-документа:
ознакомиться с описанием лабораторной работы №6 (электронная копия – в файле Лаб_№6.pdf, размещенному по адресу S:\_Студентам\ИЯТШ\ОЯТЦ\Информатика 1.1-бакалавры.
создать новый HTML документ с использованием какого-либо текстового редактора (например, notepad.exe). В тексте должны содержаться тэги необходимые для любого HTML документа (<HTML>,<BODY>). Добавить текст по произвольной теме. Сохранить данный документ в свою рабочую директорию под названием “index.html”;
задать заголовок, отображаемый в строке заголовка окна браузера. Использовать при этом тэг <TITLE>;
установить необходимые цвета фона и текста документа. Для установки цветов документа используются параметры “BGCOLOR”, “TEXT”, внутри открывающего тэга <BODY>;
написать произвольный абзац текста самым крупным шрифтом. В данном случае следует использовать тэги-контейнеры отвечающие за размер шрифта, например <H2>. Осуществить выравнивание различных абзацев (отцентрировать, прижать вправо, влево, выровнять по ширине);
произвести логическое форматирование текста как небольшого фрагмента программного кода с выделением;
произвести физическое форматирование текста, как небольшого фрагмента с подчеркиванием и с эффектом мигания;
далее написать определения трех любых понятий по данной теме (взять из методических указаний) различными цветами и гарнитурами (Arial, Times, моноширинный шрифт). Сам термин должен быть выведен полужирным курсивом с подчеркиванием. Добиться данного эффекта можно использованием тэга <FONT> с параметрами;
добавить в Web-документ пять видов ссылок; все сохранить.
2) Графики, таблицы и списки в html-документах
открыть созданный ранее Web-документ;
создать несколько ссылок на внутренние или внешние ресурсы с использованием графических файлов;
добавить на Web-страницу таблицу, содержащую элементы меню в виде списков, а в качестве элементов списков должны использоваться гиперссылки;
изменить внешний вид таблицы и списков. Изменить рамку таблицы, её цвет толщину видимость и т.д., провести исследование всех основных атрибутов таблицы.
Теоретическая часть
HTML (HyperText Markup Language, язык разметки гипертекста) — это система верстки, которая определяет, как и какие элементы должны располагаться на веб-странице. Информация на сайте, способ ее представления и оформления зависят исключительно от разработчика и тех целей, которые он перед собой ставит.
Тег (html-тег, тег разметки) — управляющая символьная последовательность, которая задает способ отображения гипертекстовой информации.
HTML-тег состоит из имени, за которым может следовать необязательный список атрибутов. Весь тег (вместе с атрибутами) заключается в угловые скобки <>: <имя_тега [атрибуты]>
Регистр символов для тегов не имеет значения.
Список некоторых тегов:
<!--…--> Используется для добавления комментариев.
<body bgcolor=”…”> позволяет изменить цвет фона в документе
<hr> определяет тематический разрыв в HTML-странице (например, смещение темы). Элемент <hr> используется для разделения содержимого (или определения изменения) в HTML-странице.
<big> определяет больший текст.
<address> определяет контактные данные автора/владельца документа или статьи. Если элемент <address> находится внутри элемента <body>, он представляет контактные данные для документа. Если элемент <address> находится внутри объекта <article> , он представляет контактные данные для этой статьи.
Для построения внутренней ссылки используется тег <a> с аргументом NAME, а перед значением аргумента поставить значок #:
<A HREF= “#MIDDLE”>Jump to the middle</A>
Пример ссылки на электронную почту:
<a href="mailto:vlad@webref.ru">vlad@webref.ru</a>
Метаданные - это данные (информация) о данных. Тег <meta> предоставляет метаданные о документе HTML. Метаданные не будут отображаться на странице, но будут обрабатываться машиной. Мета-элементы обычно используются для указания описания страницы, ключевых слов, автора документа, последнего изменения и других метаданных. Метаданные могут использоваться браузерами (как отображать контент или перезагружать страницу), поисковыми системами (ключевые слова) или другими веб-сервисами.
Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация.
Поскольку фреймы представляют собой набор независимых окон, для того, чтобы ссылка открывалась в нужном месте, следует указывать имена фреймов.
Атрибут target (от англ. "target" — «цель, мишень») указывает место (фрейм или окно браузера) в которое должен быть загружен, указанный ресурс. Возможные значения:
blank Загружает страницу в новую вкладку браузера.
self Загружает страницу в текущую вкладку.
parent Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self.
_top Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self.
Параметры для рамки фрейма задаются с помощью атрибутов к тегу <frame>: bordercolor цвет фрейма, frameborder отображение рамки фрейма, scrolling наличие полосы прокрутки и т.д.
Число повторений мультимедиа файлов можно задать с помощью атрибута loop
Автоматическое проигрывание возможно с помощью атрибута autoplay со значением «autoplay»
Для указания текста, который будет отображен в браузере, не поддерживающем отображение графики, используется атрибут alt
NOWRAP — говорит о том, что данные в ячейке не могут логически разбиваться на несколько строк и должны быть представлены одной строкой
BORDER — используется в тэге TABLE. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы в целом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.
<ul> - тег маркированного списка
<ol> - тег нумерованного списка
<li> - тег элемента списка
<AREA...> Описывает участок изображения и ставит ему в
соответствие URL.
Карта изображений (Image Map) позволяет привязывать ссылки к разным областям одного изображения. Щелкая мышью по отдельным фрагментам изображения, пользователь может переходить по той или иной ссылке на разные веб-страницы. Карты в HTML создаются с помощью тега <map>, а области-ссылки в них с помощью тега <area>. Атрибут name тега <map> связан с атрибутом usemap и создает связь между изображением и картой.
Элемент <form> (от англ. "form" ‒ «форма») создаёт HTML-форму для ввода пользователем данных, которые впоследствии можно принять и обработать на стороне сервера.
Тем не менее область применения форм не ограничена отправкой данных на сервер, с помощью скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.
Атрибут method может принимать значения get и post
Элемент <input> (от англ. "input" ‒ «ввод») является основным элементом формы (HTML тег <form>) и определяет пользовательское поле для ввода информации.
Элемент <textarea> (от англ. "text area" ‒ «текстовое поле») определяет многострочное текстовое поле. Основное отличие от тега <input> заключается в том, что допускаются переносы строк (они сохраняются при отправке данных на сервер). По умолчанию количество символов, которое можно ввести в поле не ограничено, а введенный текст отображается моноширинным начертанием.
Логический атрибут multiple (HTML тега <select>) указывает, что может быть выбрано несколько вариантов сразу (через Ctrl в Windows и через Command в Mac).
Атрибут hidden, как правило, используется, чтобы пользователь не видел элемент до тех пор, пока другое условие не будет выполнено (например, требование проставить галочку). Используя впоследствии JavaScript вы можете удалить скрытый атрибут у элемента, и сделать элемент видимым для пользователя.