Файл: Изучение основ программирования на языке HTML.pdf

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

Язык гипертекстовой разметки (Hyper Text Markup Language) – это код, который используется для структурирования веб-страницы и ее содержимого. Например, содержимое может быть структурировано в виде набора абзацев, маркированного списка или использования изображений и таблиц данных. Язык использует теги, чтобы определить, какие манипуляции должны выполняться с текстом.

HTML был создан Тимом Бернерсом-Ли в 1991 году. Первой версией HTML был HTML 1.0, но первой стандартной версией был HTML 2.0, опубликованный в 1999 году. На момент написания работы последней версией HTML является HTML 5, который вышел в 2014 году.

Объектом курсовой работы является процесс разметки веб-страницы и ее содержимого на языке HTML.

Предметом курсовой работы являются основы разметки веб-страницы на языке HTML.

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

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

1. Основные определения и понятия языка HTML

1.1. Понятие и структура элементов веб-страниц

Основополагающими документами, определяющими характеристики HTML языков, являются стандарты W3C. При этом, не существует отдельно выделенных стандартов для различных версий со 2 по 4, которые определяли бы их коренные отличия.

HTML2 определяется серией Интернет-стандартов и рекомендаций – RFC-1866 [1], RFC-1867 [2], RFC-1942 [3], RFC-1980 [4] и RFC-2070 [5], в которых описаны теги различного назначения.

Стандарты HTML-3, HTML-4 оформлены в виде «Рекомендаций» консорциума или их «Релизов». Однако, основная структура документа, используемые теги и их характеристики остались неизменными по отношению к HTML-2.

Стандарт HTML-5, как таковой тоже отсутствует в виде реализаций RFC и реализуется новыми «Рекомендациями», которые для различных версий начали публиковаться с 2014 года [6], а первые разработки W3C появились ещё в 2008 [7]. Но в отличие от предыдущих версий, в них вошло новое описание структуры документа и новые рекомендуемые теги.

HTML состоит из ряда элементов, которые использует разработчик для включения или переноса различных частей контента, чтобы он выглядел или действовал определенным образом. Вмещающие теги могут создавать гиперссылку на слово или изображение в другом месте, выделять курсивом слова, увеличивать или уменьшать шрифт и т. д. Например, такая строка контента: «Мой кот очень ворчливый». Если нужно, чтобы эта строка была отдельной строкой на веб странице, то указывают, что это абзац, заключив его в соответствующие теги: Мой кот очень ворчливый.. На рис. 1 элемент абзаца рассмотрен подробнее [8,9].

Рис. 1.1. Элемент «Абзац»

Элемент абзаца включает [9,10]:

Открывающийся тег: состоит из имени элемента (в данном случае p), заключенного в открывающие и закрывающие угловые скобки. Здесь указывается, где элемент начинается или вступает в силу – в данном случае, когда начинается абзац.
Закрывающийся тег: это то же самое, что и открывающий тег, за исключением того, что он включает косую черту перед именем элемента. Здесь указывается, где заканчивается элемент – в данном случае заканчивается абзац. Отсутствие закрывающегося тега является одной из стандартных ошибок и может привести к отображению пустой страницы в браузере.
Содержимое: это содержимое элемента, в данном случае это просто текст.
Элемент: открывающийся тег, закрывающийся тег и содержимое вместе составляют элемент.

Элементы также могут иметь атрибуты, которые имеют вид, приведенный на рис. 1.2 [9].

Рис. 1.2. Атрибуты элемента «Абзац»

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

Атрибут должен всегда содержать [8,9]:

пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов);
имя атрибута сопровождается знаком равенства.
значение атрибута заключено в открывающиеся и закрывающиеся кавычки.

Простые значения атрибутов, которые не содержат пробелов ASCII (или символов " ‘ = <>), могут оставаться без кавычек, но рекомендуется заключать в кавычки все значения атрибутов, поскольку это делает код более согласованным и понятным.

Также можно поместить элементы в другие элементы – это называется вложением. Если нужно выделить, что кот очень ворчливый, то слово «очень» заключают в элемент . Это означает, что слово будет выделено жирным шрифтом: Мой кот очень ворчливый. [10].

Важно, чтобы элементы были правильно вложены. В приведенном примере сначала открыт элемент , затем элемент , поэтому нужно сначала закрыть элемент , а затем элемент . Например, такая запись будет неверной: Мой кот очень ворчливый..

Элементы должны открываться и закрываться правильно, и быть точно внутри или снаружи друг друга. Если они пересекаются, как показано выше, то браузер попытается угадать, что имелось в виду, но результат может быть неожиданным [8,10].

Некоторые элементы не имеют содержимого и называются пустыми элементами. Рассмотрим элемент <img>: <img src="image.png" alt="My test image">. Он содержит два атрибута, но не имеет закрывающего тега </ img> и внутреннего содержимого. Это потому, что элемент изображения не переносит содержимое, чтобы повлиять на него. Его цель – вставить изображение на HTML-страницу в том месте, где это указано [9,10].

1.2. Структура HTML-документа

Выше описаны основы отдельных элементов HTML, но сами по себе они не существуют. Далее рассмотрим, как отдельные элементы объединяются в единую HTML-страницу. Пример HTML кода простой страницы имеет вид [10]:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

<! DOCTYPE html> – тип документа. Это необходимая преамбула. В начале появление HTML доктипы должны были выступать в качестве ссылок на набор правил, которым HTML-страница должна была следовать, чтобы считаться хорошим HTML. это могло означать автоматическую проверку ошибок и другие полезные вещи. Сегодня это необходимо для того, чтобы убедиться, что документ ведет себя корректно [8,10].

<html> </ html> – элемент <html>. Этот элемент заключает весь контент на всей странице и называется корневым элементом.

<head> </ head> – элемент <head>. Этот элемент действует как контейнер для всего, что включено в HTML-страницу, а не для контента, который видят зрители страницы. Он включает ключевые слова и описание страницы, которые автор хочет отобразить в результатах поиска, CSS для стилизации контента, объявления набора символов и многое другое.

Все элементы HTML, которые можно использовать внутри элемента <head> [11]:

<style>
<title>
<base>
<noscript>
<script>
<meta>
<title>

<title> </ title> – элемент <title>. Устанавливает заголовок страницы, то есть заголовок вверху на вкладке браузера. Он также используется для описания страницы, когда ее добавляют в закладки или в избранное [10,11].

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

Общий вид структуры страницы показан на рис. 1.3 [11].

Рис. 1.3. Структура HTML страницы

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

2. Основы форматирования текста на языке HTML

2.1. HTML редакторы

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

Основы HTML-редакторов одинаковы. Они помогают писать код, выделяя синтаксис, вставляя часто используемые элементы и структуры HTML, а также обеспечивая автозаполнение. Текст с использованием редактора HTML также может быть преобразован в файлы на языках CSS, XML или JavaScript. Но, как известно, не все редакторы одинаковы. Некоторые из них могут быть проще в использовании, в то время как некоторые предоставляют больше функций, чем другие [11,12].

Доступны два типа редакторов: WYSIWYG и текстовые редакторы HTML. Рассмотрим каждый тип подробнее.

WYSIWYG – это акроним от What You See Is What You Get (Вы получаете то, что видите). Этот тип редакторов предоставляет интерфейс редактирования, который показывает, как код выглядит на рабочей веб-странице. Использование WYSIWYG-редакторов не требует знания HTML; поэтому пользователю без опыта программирования гораздо легче начать работу с таким редактором.

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

Этот тип редактора предоставляет больше свободы и персонализированных опций. Используя текстовый редактор, можно лучше оптимизировать веб-страницы для поисковых систем. Например, можно создать веб-страницу согласно Руководству по доступности веб-контента (WCAG), чтобы люди с ограниченными возможностями могли просматривать веб-страницу.

Выбор редактора – важный вопрос, поскольку нашей работы, на которой мы будем тратить много времени, важно выбрать ту, которая лучше всего нам подходит. Каждый редактор имеет одинаковые основные функции. Тем не менее, некоторые предоставляют больше визуального представления, чем другие, дополнительные пакеты для установки и так далее [12,13].

Далее рассмотрены особенности популярных HTML редакторов.

1. Atom – это относительно новый редактор, который вышел в 2014 году и с тех пор приобретает популярность. Atom – это бесплатный редактор кода с открытым исходным кодом, разработанный командой GitHub. Atom использует лицензию бесплатного программного обеспечения и поддерживается сообществом GitHub. Авторы стремятся предложить качественный бесплатный редактор, гибкий в настройке самого программного обеспечения. Последнее означает, что разработчики могут вносить вклад в редактирование, расширение, изменение и обмен исходным кодом программы, а также создавать свои собственные пакеты для улучшения Atom. Интерфейс редактора приведен на рис. 2.1 [12,13].

Рис. 2.1. Интерфейс HTML редактора Atom

Ключевые особенности Atom:

Atom поставляется с 81 встроенным пакетом, количество которых можно увеличить до 7500 дополнительных устанавливаемых пакетов. Также можно разработать свой собственный пакет;
открытый текстовый редактор. Весь редактор Atom – это бесплатная программа с открытым исходным кодом, доступная на GitHub;
Atom поддерживает Teletype. Это важная функция, если необходимо сотрудничать с другими разработчиками в режиме реального времени;
поддержка нескольких панелей. Atom может разбить интерфейс на множество окон, чтобы можно было сравнивать и писать код рядом.