Создание Web-страниц на основе наработок по ВКР «Автономные устройства катодной защиты подземных трубопроводов»

Оглавление

Введение. 3

Теоретическая часть. 4

Что такое HTML. 4

Разметка. 4

Гипертекст. 4

Ссылка. 5

HTML-теги. 6

Практическая часть. 13

Создание Web-страниц на основе наработок по ВКР «Автономные устройства катодной защиты подземных трубопроводов». 13

Вывод. 17

Список литературы.. 18

Приложение…………………………………………………………………………19

 

 

Введение

Цель работы: изучить структуру HTML-документа и создать простейшие Web-страницы с использованием языка HTML.

Актуальность создания сайта любого вида – донесение информации до широкого круга пользователей интернета.Целесообразность разработки веб приложения – фортуна улыбается тому, у кого в руках информация.
Задача собственного представительства в интернет – донести нужную информацию до максимального числа людей.Реклама – двигатель прогресса, поэтому актуальность создания сайта не подвергается сомнениям.

Чем объясняется актуальность веб ресурса любого вида:

· Оперативностью и масштабностью подачи информации широкому кругу пользователей,

· Обратной онлайн связью с клиентами из всех стран мира,

· Возможностью маркетинговых исследований спроса и предложения,

· Осуществлением связи с представителями в других регионах,

· Упрощением продаж,

· Привлечением клиентов,

· Необходимостью увеличения трафика.[1]

В данной работе мы изучим HTMLи создадим одностраничный сайт на основе полученных знаний.

 

Теоретическая часть

Что такое HTML

Вся графика и текст, которую вы видите на странице, формируется при помощи HTML-кода.

HTML – это связующее звено между веб-страницей и дополнительными технологиями, которые на ней будут использоваться.

По сути, все команды языка HTML, это обычный текст, который может быть написан в любом текстовом редакторе. Изменив у текстового файла расширение на *.html мы получаем полноценную веб-страницу, которую может обрабатывать браузер.

HTML – это аббревиатура, которая расшифровывается как HyperText Markup Language или в переводе на русский язык «Язык Разметки Гипертекста».HTML – в первую очередь, этоязык, с помощью которого можно сообщить браузеру информацию о том, какие элементы есть на веб-странице, и какую смысловую нагрузку они несут.Как у любого языка, в HTML есть слова (команды) и правила написания этих слов (синтаксис языка).

Разметка

Прошу обратить внимание, что основная задача HTML – это сообщить браузеру о смысловой нагрузке, которую несут элементы на веб-странице.

HTML код позволяет «разметить» веб-страницу на отдельные элементы и сообщить браузеру какой элемент чем является.

HTML – это не язык программирования и не отвечает за выполнение логических и программных операций на странице и обработку данных. Невозможно с помощью HTML заставить элемент отображаться тем или иным образом или заставить с помощью HTML выполнять какие-то действия на странице, за каждое действие над элементом отвечают свои технологии.

Гипертекст

И, наконец, последнее слово в определении языка HTML – это гиперссылка. На веб-страницах есть элемент, который делает эти страницы особенными и отличает их от обычного текста с картинками. Этот элемент - ссылки.

Ссылка

Ссылка – это такой элемент на странице, который делает возможным открытие другой части текущей страницы или совершенно другой страницы при клике по нему.

Приставка «гипер-» означает то, что при клике на ссылку может открываться другой ресурс (страница) в сети интернет, который может располагаться на другом сервере.

HTML – это язык, который разрабатывался специально для того, чтобы создавать страницы, которые содержат гиперссылки.

Подводя итог можно сказать, что HTML – это язык, который создавался для того, чтобы помочь браузеру понять из каких частей состоит веб-страница, и какую смысловую нагрузку эти элементы несут.[2]

 

HTML-теги

HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.

Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.

Все HTML-элементы делятся на пять типов:

· Пустыеэлементы -<area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <menuitem>, <meta>, <param>, <source>, <track>, <wbr>;

· элементы с неформатированным текстом - <script>, <style>;

· элементы, выводящие неформатированный текст - <textarea>, <title>;

· элементы из другого пространства имён - MathML и SVG;

· обычные элементы - все остальные элементы.

В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие теги исключены.

Тег	Описание
<!--...-->	Используется для добавления комментариев.
<!DOCTYPE>	Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия.
<a>	Создаёт гипертекстовые ссылки.
<abbr>	Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title.
<address>	Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
<area>	Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега <map>.
<article>	Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
<aside>	Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
<audio>	Загружает звуковой контент на веб-страницу.
<b>	Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
<base>	Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
<bdi>	Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
<bdo>	Отображает текст в направлении, указанном в атрибуте dir, переопределяя текущее направление написания текста.
<blockquote>	Выделяет текст как цитату, применяется для описания больших цитат.
<body>	Представляет тело документа (содержимое, не относящееся к метаданным документа).
<br>	Перенос текста на новую строку.
<button>	Создает интерактивную кнопку. Внутрь тега можно поместить содержимое — текст или изображение.
<canvas>	Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript.
<caption>	Добавляет подпись к таблице. Вставляется сразу после тега <table>.
<cite>	Используется для указания источника цитирования. Отображается курсивом.
<code>	Представляет фрагмент программного кода, отображается шрифтом семейства monospace.
<col>	Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
<colgroup>	Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
<datalist>	Элемент-контейнер для выпадающего списка элемента <input>. Варианты значений помещаются в элементы <option>.
<dd>	Используется для описания термина из тега <dt>.
<del>	Помечает текст как удаленный, перечёркивая его.
<details>	Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег <summary>.
<dfn>	Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
<div>	Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
<dl>	Тег-контейнер, внутри которого находятся термин и его описание.
<dt>	Используется для задания термина.
<em>	Выделяет важные фрагменты текста, отображая их курсивом.
<embed>	Тег-контейнер для встраивания внешнего интерактивного контента или плагина.
<fieldset>	Группирует связанные элементы в форме, рисуя рамку вокруг них.
<figcaption>	Заголовок/подпись для элемента <figure>.
<figure>	Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
<footer>	Определяет завершающую область (нижний колонтитул) документа или раздела.
<form>	Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action.
<h1-h6>	Создают заголовки шести уровней для связанных с ними разделов.
<head>	Элемент-контейнер для метаданных HTML-документа, таких как<title>, <meta>, <script>, <link>, <style>.
<header>	Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
<hr>	Горизонтальная линия для тематического разделения параграфов.
<html>	Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
<i>	Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
<iframe>	Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
<img>	Встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения.
<input>	Создает многофункциональные поля формы, в которые пользователь может вводить данные.
<ins>	Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
<kbd>	Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.
<keygen>	Генерирует пару ключей — закрытый и открытый. При отправке формы, закрытый ключ хранится локально, и открытый ключ отправляется на сервер. Работает внутри тега <form>.
<label>	Добавляет текстовую метку для элемента <input>.
<legend>	Заголовок элементов формы, сгруппированных с помощью элемента <fieldset>.
<li>	Элемент маркированного или нумерованного списка.
<link>	Определяет отношения между документом и внешним ресурсом. Также используется для подключения внешних таблиц стилей.
<main>	Контейнер для основного уникального содержимого документа. На одной странице должно быть не более одного элемента <main>.
<map>	Создаёт активные области на карте-изображении. Является контейнером для элементов <area>.
<mark>	Выделяет фрагменты текста, помечая их желтым фоном.
<meta>	Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке <head> может быть несколько тегов <meta>, так как в зависимости от используемых атрибутов они несут разную информацию.
<meter>	Индикатор измерения в заданном диапазоне.
<nav>	Раздел документа, содержащий навигационные ссылки по сайту.
<noscript>	Определяет секцию, не поддерживающую сценарий (скрипт).
<object>	Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег <param>.
<ol>	Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
<optgroup>	Контейнер с заголовком для группы элементов <option>.
<option>	Определяет вариант/опцию для выбора в раскрывающемся списке <select>, <optgroup> или <datalist>.
<output>	Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
<p>	Параграфы в тексте.
<param>	Определяет параметры для плагинов, встраиваемых с помощью элемента <object>.
<pre>	Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
<progress>	Индикатор выполнения задачи любого рода.
<q>	Определяет краткую цитату.
<ruby>	Контейнер для Восточно-Азиатских символов и их расшифровки.
<rb>	Определяет вложенный в него текст как базовый компонент аннотации.
<rt>	Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе <ruby>, выводится уменьшенным шрифтом.
<rtc>	Отмечает вложенный в него текст как дополнительную аннотацию.
<rp>	Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
<s>	Отображает текст, не являющийся актуальным, перечеркнутым.
<samp>	Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
<script>	Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src.
<section>	Определяет логическую область (раздел) страницы, обычно с заголовком.
<select>	Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в <option>.
<small>	Отображает текст шрифтом меньшего размера.
<source>	Указывает местоположение и тип альтернативных медиа ресурсов для элементов <video> и <audio>.
<span>	Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
<strong>	Расставляет акценты в тексте, выделяя полужирным.
<style>	Подключает встраиваемые таблицы стилей.
<sub>	Задает подстрочное написание символов, например, индекса элемента в химических формулах.
<summary>	Создаёт видимый заголовок для тега <details>. Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
<sup>	Задает надстрочное написание символов.
<table>	Тег для создания таблицы.
<tbody>	Определяет тело таблицы.
<td>	Создает ячейку таблицы.
<textarea>	Создает большие поля для ввода текста.
<tfoot>	Определяет нижний колонтитул таблицы.
<th>	Создает заголовок ячейки таблицы.
<thead>	Определяет заголовок таблицы.
<time>	Определяет дату/время.
<title>	Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
<tr>	Создает строку таблицы.
<track>	Добавляет субтитры для элементов <audio> и <video>.
<u>	Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
<ul>	Создает маркированный список.
<var>	Выделяет переменные из программ, отображая их курсивом.
<video>	Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
<wbr>	Указывает браузеру возможное место разрыва строки.[3]

Практическая часть

Создание Web-страниц на основе наработок по ВКР «Автономные устройства катодной защиты подземных трубопроводов»

Создание web-страницы будет проводиться в текстовом редакторе «Блокнот».

Начало кода web-страницы начинается с тега<html> - корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.

Следующим шагом создаем заголовок тегами <head> и <title>,где<head> - это элемент-контейнер для метаданных HTML-документа, таких как<title>, <meta>, <script>, <link>, <style>, а <title> - заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия. В данной работе код в «Блокноте»:

,

а в браузере видим следующее:

.

Далее создаем заголовок тегом <h1>, делаем его жирным тегом <b> и перемещаем в центр тегом <center>:

код:

,

в браузере:

Далее аналогично проводим операции для следующего заголовка, но делаем его размером поменьше, используя тег <h2>:

код:

,

в брузере:

Сам текст записывается под тегом <body>:

код:

в браузере:

Для переноса текста на следую строку используется тег <br>:

код:

в браузере:

.

Для размещения картинки по центру страницы используем теги <center> и <imgsrc="1pic.png">, где src="1pic.png" – ссылка на картинку в корневой папке файла HTML:

код:

в браузере:

Для создания ссылок на сайты в списке литературы используем тег <a href="http://fb.ru/">http://fb.ru/</a>, где http://fb.ru/ - ссылка на сам сайт:

код:

в браузере:

 

Вывод

Изучили структуру HTML-документа и создали Web-страницу с использованием языка HTML.

В работе изложены основные свойства и принципы языка HTML. Основная задача HTML – это сообщить браузеру о смысловой нагрузке, которую несут элементы на веб-странице, HTML код позволяет «разметить» веб-страницу на отдельные элементы и сообщить браузеру какой элемент чем является, это не язык программирования и не отвечает за выполнение логических и программных операций на странице и обработку данных. Невозможно с помощью HTML заставить элемент отображаться тем или иным образом или заставить с помощью HTML выполнять какие-то действия на странице, за каждое действие над элементом отвечают свои технологии.

В практической части работы мы использовали теоретические знания для создания Web-страницы. (См. приложение)

 

Список литературы

1. Сайт «Все для дизайнера» http://aveweb.ru/ ссылка на статью:http://aveweb.ru/article/read/aktualnost-sozdanija-sajta.html;

2. Сайт Вебгурувеб-программиста ДмитрияЧенгаеваhttps://webgyry.info/ ссылка на статью: https://webgyry.info/wpm/chto-takoe-html-i-zachem-eto-nuzhno/;

3. СайтHTML5BOOK.RU, ссылка на статью:https://html5book.ru/html-tags/