Преподаватель который помогает студентам и школьникам в учёбе.

Изучение основ программирования на языке HTML

Содержание:

ВВЕДЕНИЕ

Сегодня все больше повседневных процессов из жизни людей переходят в веб-пространство: обучение в дистанционном режиме в университете, оплата услуг мобильной связи и Интернет, покупка и доставка товаров и многое другое. Данная тенденция определяет актуальность изучения языка разметки 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 состоит из ряда элементов, которые использует разработчик для включения или переноса различных частей контента, чтобы он выглядел или действовал определенным образом. Вмещающие теги могут создавать гиперссылку на слово или изображение в другом месте, выделять курсивом слова, увеличивать или уменьшать шрифт и т. д. Например, такая строка контента: «Мой кот очень ворчливый». Если нужно, чтобы эта строка была отдельной строкой на веб странице, то указывают, что это абзац, заключив его в соответствующие теги: <p>Мой кот очень ворчливый.</p>. На рис. 1 элемент абзаца рассмотрен подробнее [8,9].

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

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

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

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

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

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

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

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

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

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

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

Элементы должны открываться и закрываться правильно, и быть точно внутри или снаружи друг друга. Если они пересекаются, как показано выше, то браузер попытается угадать, что имелось в виду, но результат может быть неожиданным [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 может разбить интерфейс на множество окон, чтобы можно было сравнивать и писать код рядом.

Разработчики предпочитают Atom потому что он [12,13]:

Настраиваемый.

В Atom легко настроить внешний вид интерфейса и добавить другие важные функции. Также можно создавать пакеты и темы с нуля. Или просто установить готовые пакеты и темы от сообщества.

Режим разработки. Возможность экспериментировать, добавляя функции в основную систему.
Интеграция с Git и GitHub.
Кроссплатформенное редактирование. Atom работает во всех операционных системах.

Доступен для: Windows, OS X и Linux (64-разрядная версия).

2. Notepad ++ – это редактор, разработанный для компьютеров под управлением Windows. Пользователи Linux также могут использовать его через Wine. Этот редактор распространяется как бесплатное программное обеспечение, и его хранилище также доступно в GitHub.

Notepad ++ отличается простотой и легкостью. Существует также мобильная версия. Особенностями редактора являются:

интерфейс Notepad ++ прост, легок и быстр (рис. 2.2) [11,12].

Рис. 2.2. Интерфейс HTML редактора Notepad ++

поддержка многоязычной среды кодирования, от ActionScript, CSS до Visual Basic;
100% совместимость с Windows, хотя другие ОС не поддерживаются без дополнительного программного обеспечения.

Разработчики выбирают Notepad ++ потому что:

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

Интерфейс Notepad ++ минималистичен, но разработчики могут настроить его. Редактор доступен для: Windows и Linux (через Wine) [12-14].

3. Sublime Text – еще один отличный HTML-редактор. Это программное обеспечение, разработанное компанией из Сиднея, относится к категории freemium. Freemium означает, что можно использовать Sublime бесплатно, но нужно купить лицензию, чтобы пользоваться всеми функциями.

Sublime Text предлагает отличную поддержку, чтобы гарантировать постоянное обновление программы. Пользователи могут добавлять плагины, созданные сообществом, или создавать свои собственные. Использование бесплатной версии Sublime вполне достаточно. Однако, если нужно больше возможностей, то необходимо приобрести лицензию.

Ключевые особенности редактора [13,14]:

Sublime поддерживает Python API, который позволяет плагину расширять его исходную функциональность;
одновременное редактирование. Можно вносить изменения во многие выбранные области одновременно;
кросс-платформенность. Sublime доступно в Windows, OS X и Linux. Разработчикам нужна только одна лицензия для использования Sublime на любых принадлежащих им компьютерах.

Интерфейс редактора показан на рис. 2.3 [14].

Рис. 2.3. Интерфейс HTML редактора Sublime Text

Разработчики выбирают Sublime Text из-за [12,14]:

Мощного API. Sublime предоставляет тысячи пакетов, которые доступны и созданы сообществом. Эти пакеты с открытым исходным кодом.
Сплит редактирование. Разработчики могут использовать несколько мониторов и редактировать разные типы кода одновременно.
Переход к чему угодно. Эта функция полезна для открытия файлов несколькими нажатиями клавиш, для поиска символов, строк или слов.

Интерфейс Sublime Text очень эстетичен. Редактор доступен для Windows, OS X и Linux (32/64 бит).

4. Adobe Dreamweaver CC

Adobe Dreamweaver CC, разработанный и управляемый технологическим гигантом Adobe Inc, является мощным и универсальным инструментом премиум-класса. Он обслуживает как back-end, так и front-end разработки. Dreamweaver, как программное обеспечение с закрытым исходным кодом, предназначено для работы в экосистеме Adobe. Adobe также предоставляет поддержку, плагины и функции, чтобы вы всегда могли без проблем писать код [14,15].

Dreamweaver – это один из редакторов, который поддерживают как текстовые, так и WYSIWYG методы. Таким образом, разработчик может выбирать способ написания кода. Интерфейс Adobe Dreamweaver CC приведен на рис. 2.4 [15].

Рис. 2.4. Интерфейс HTML редактора Adobe Dreamweaver CC

Основные особенности редактора [13,15]:

Dreamweaver позволяет писать код на любом основном языке программирования.
Поддерживает текстового и WYSIWYG режимов редактора.
Полностью интегрирован с программной экосистемой Adobe
Высокая производительность и поддержка от Adobe Inc.

Разработчики выбирают Adobe Dreamweaver CC потому что:

Код и предварительный просмотр. Таким образом, разработчики могут кодировать при предварительном просмотре конечного продукта [14].
Подтверждение кода и доступности страницы. Эта функция может помочь разработчикам следовать рекомендациям по доступности веб-контента (WCAG).
Доступ к облачным библиотекам. Премиум доступ к активам Adobe – цвета, слова, графики, слои, персонажи и другое.

Dreamweaver имеет отличный внешний вид, отличающийся эстетикой и дизайном. Редактор доступен для Windows и OS X.

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

Также существует большое количество он-лайн редакторов, которые предоставляют такие же возможности как и описанные в данном подразделе редакторы, а также не требуют установки на компьютер.

2.2. Создание абзацев и заголовков текста

Структурированный текст включает заголовки и абзацы, независимо от вида его источника – газета, учебник, журнал и т. д. Структурированное содержание страницы делает чтение более легким и приятным [15,16].

В HTML каждый абзац должен быть заключен в элемент <p>, например: <p> Это абзац. </ p>. Каждый заголовок должен быть заключен в элемент заголовка: <h1> Заголовок истории. </ h1>.

Существует шесть элементов для заголовков – <h1>, <h2>, <h3>, <h4>, <h5> и <h6>. Каждый элемент представляет различный уровень содержания в документе; <h1> представляет основной заголовок, <h2> представляет подзаголовки, <h3> представляет подзаголовки подзаголовков и так далее [16].

Например, в рассказе <h1> будет представлять заголовок истории, <h2> будет представлять заголовок каждой главы, а <h3> будет представлять подразделы каждой главы и так далее. Пример кода для реализации абзацев и заголовков уровней h1–h3 и результат его выполнения приведены на рис. 2.5 [15,16].

Рис. 2.5. Код для создания абзацев и заголовков уровней h1–h3 и

результат его выполнения

2.3. Создание списков

Кроме заголовков и абзацев важным элементом форматирования являются списки. Списки применяются на веб страницах повсеместно, и могут быть трех разных типов [13,16]:

1. Неупорядоченные списки. Используются при разметки списков, для которых порядок элементов не имеет значения. Рассмотрим список покупок в качестве примера. Каждый неупорядоченный список начинается с элемента <ul> – в него заключают все элементы списка. Последний шаг – заключить каждый элемент списка в элемент <li>, отделив, тем самым, их друг от друга. Пример кода для неупорядоченного списка и результат его создания показаны на рис. 2.6 [15,16].

Рис. 2.6. Код для создания неупорядоченного списка и

результат его выполнения

Упорядоченные списки – это списки, в которых порядок элементов имеет значение. Структура разметки такая же, как и для неупорядоченных списков, за исключением того, что нужно заключить все элементы списка в элемент <ol>, а не в <ul>. В качестве примера на рис. 2.7 рассмотрен порядок действий [14-16].

Рис. 2.7. Код для создания упорядоченного списка и

результат его выполнения

Вложенные списки также широко применяются на страницах. Рассмотрим пример вложенного списка для рецепта (рис. 2.8) [13-15].

Рис. 2.8. Код для создания вложенного списка и

результат его выполнения

2.4. Создание гиперссылок

Гиперссылки действительно важны – именно они превращают Интернет в сеть. Ссылки позволяют связывать документ с любым другим документом или необходимым ресурсом. Также можно ссылаться на определенные части документов, и делать приложения доступными по веб-адресу. Практически любой веб-контент может быть преобразован в ссылку, т.к. при нажатии на ссылку веб-браузер переходит на другой веб-адрес (URL) [14,16].

Базовая ссылка создается путем переноса текста или другого содержимого, который нужно превратить в ссылку внутри элемента <a>, и присвоения ему атрибута href (также известного как гипертекстовая ссылка или цель). href содержит веб-адрес, на который указывает ссылка. На рис. 2.9 рассмотрен пример создания простой ссылки [15,16]:

Рис. 2.9. Код для создания простой ссылки и

результат его выполнения

Другим атрибутом, который можно добавить к ссылкам, является заголовок. Он предназначен для того, чтобы сообщать дополнительную полезную информацию о ссылке, например, какую информацию содержит страница или что нужно знать (рис. 2.10) [16,17].

Рис. 2.10. Код для создания простой ссылки с заголовком

и результат его выполнения

Если необходимо превратить изображение в ссылку, то можно просто поместить его между тегами <a> и </a>.

При переходе по ссылкам на страницы сайта важно учитывать относительное местоположение страниц. Как правило, файл главной страницы называют index.html. Если необходимо включить гиперссылку в index.html, указывающую на страницу contacts.html, находящуюся в том же каталоге, что и файл index.html, то указывают только имя файла. Таким образом, ссылка с главной страницы на страницы contacts.html имеет вид [15,17]:

<p>Для детальной информации посетите страницу

<a href="contacts.html"> контакты </a></p>

Если необходимо включить в index.html гиперссылку, указывающую на страницу, расположенную в другой директории или на другом диске, то прописывают полный путь к ней:

<p>Посетите главную страницу моего<a href="projects/index.html"> проекта</a></p> [17].

2.5. Вставка изображений на страницу

Чтобы разместить простое изображение на веб-странице, используют элемент <img>. Это пустой элемент, для которого требуется минимум один атрибут – src. Атрибут src содержит путь к изображению, которое нужно встроить на страницу. Атрибут может быть относительным или абсолютным URL-адресом [15-17].

Например, если изображение называется dinosaur.jpg и оно находится в том же каталоге, что и HTML-страница, можно встроить изображение следующим образом: <img src="dinosaur.jpg">.

Если изображение находилось в подкаталоге images, который находился в том же каталоге, что и HTML-страница (Google рекомендует для целей SEO / индексации), его встраивают следующим образом: <img src="images/dinosaur.jpg">.

Также можно встроить изображение, используя его абсолютный URL, например: <img src="https://www.example.com/images/dinosaur.jpg">

Последнее бессмысленно, поскольку просто заставляет браузер выполнять больше работы, снова и снова искать IP-адрес DNS-сервера и т. д.

Приведенный выше код даст результат, показанный на рис. 2.11 [17].

Следующим атрибутом тега image является alt. Его значение представляет собой текстовое описание изображения для использования в ситуациях, когда изображение не может быть просмотрено/отображено или для его визуализации требуется много времени из-за медленного интернет-соединения [16,17].

<img src="images/dinosaur.jpg"

alt="The head and torso of a dinosaur skeleton;

it has a large head with long sharp teeth">

Самый простой способ проверить альтернативный текст – преднамеренно неправильно ввести имя файла. Например, если имя изображения написать dinosooooor.jpg, то браузер не отобразит изображение, а только альтернативный текст (рис. 2.12) [16,17].

Рис. 2.11. Встроенное изображение на странице

Рис. 2.12. Пример применения атрибута alt тега image

Наличие альтернативного текста может пригодиться по ряду причин [18]:

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

2. Как описано выше, написание файла или пути может быть неправильным, и это поможет определить ошибку.

3. Предоставление текста для поисковых систем. Например, поисковые системы могут сопоставлять альтернативный текст с поисковыми запросами.

4. Пользователь отключил изображения, чтобы уменьшить объем передаваемых данных. Это особенно распространено на мобильных телефонах, а также в странах, где пропускная способность ограничена или высока.

Также можно использовать атрибуты ширины и высоты, чтобы заадать ширину и высоту изображения. Найти ширину и высоту изображения можно несколькими способами. Например, на Mac можно использовать Cmd + I для отображения информации о файле изображения. Применительно к рассматриваемому примеру, код примет вид [17,18]:

<img src="images/dinosaur.jpg"

alt="The head and torso of a dinosaur skeleton;

it has a large head with long sharp teeth"

width="400"

height="341">

Задание атрибутов width и height не приведет к большой разнице в отображении, но ограничит его размер, как показано на рис. 2.13 [18,19].

Рис. 2.13. Отображение на странице рисунка с заданными размерами

В результате загрузка страницы происходит быстрее и плавнее.

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

Изображение может также выглядеть искаженным, если не выдержано правильное соотношение сторон. Необходимо использовать графический редактор, чтобы создать изображение правильного размера, прежде чем разместить его на веб-странице [17-19].

Как и со ссылками, также можно добавить атрибуты заголовка к изображениям, чтобы при необходимости предоставить дополнительную вспомогательную информацию. Тогда код рассматриваемого примера примет вид [17,18]:

<img src="images/dinosaur.jpg"

alt="The head and torso of a dinosaur skeleton;

it has a large head with long sharp teeth"

width="400"

height="341"

title="A T-Rex on display in the Manchester University Museum">

Результат добавления атрибута title показан на рис. 2.14 [19].

Рис. 2.14. Добавление атрибута title в тег img

Тем не менее, добавление этого атрибута не рекомендуется из-за ряда проблем с доступностью. В основном из-за того, что поддержка программы чтения с экрана очень непредсказуема, и большинство браузеров не отображают ее, если не навести курсор мыши [18,19].

ВЫВОДЫ

В результате выполнения курсовой работы решены следующие задачи:

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

Язык HTML является основой для создания сайтов и помогает в изучении основ веб-программирования. Он достаточно прост в изучении и применении, не зависит от платформы.

Среди преимуществ HTML выделены следующие:

– HTML используется для создания любых веб-сайтов;

– поддерживается всеми браузерами;

– может быть интегрирован с другими языками, такими как CSS, JavaScript и т. д.

К недостаткам HTML относятся:

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

– большое количество кода должно быть написано для создания простой веб-страницы;

– низкий уровень безопасности.

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

СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ

Стандарт: Hypertext Markup Language – 2.0 (https://tools.ietf.org/html/rfc1866) Просмотрено: 18.11.2019.
Черновой вариант рекомендаций: Form-based File Upload in HTML (https://tools.ietf.org/html/rfc1867) Просмотрено: 18.11.2019.
Черновой вариант рекомендаций: HTML Tables (https://tools.ietf.org/html/rfc1942) Просмотрено: 19.11.2019.
Черновой вариант рекомендаций: A Proposed Extension to HTML : Client-Side Image Maps (https://tools.ietf.org/html/rfc1980) Просмотрено: 19.11.2019.
Стандарт: Internationalization of the Hypertext Markup Language (https://tools.ietf.org/html/rfc2070) Просмотрено: 19.11.2019.
Рекомендации W3C: Open Web Platform Milestone Achieved with HTML5 Recommendation (https://www.w3.org/2014/10/html5-rec.html.en) Просмотрено: 20.11.2019.
Стандарт: HTML Living Standard (https://www.w3.org/TR/html5/) Просмотрено: 20.11.2019.
Гаевский А.Ю. Создание Web-страниц и Web-сайтов /
Гаевский А.Ю., Романовский В.А, 2008. – 464с.
Дакетт Джон Основы веб-программирования с использованием HTML, XHTML и CSS / Джон Дакетт. – М.: Эксмо, 2013. – 768 c.
Квинт Игорь, Создаем сайты с помощью HTML, XHTML и CSS / Игорь Квинт. - М.: Питер, 2014. – 448 c.
Мержевич Влад, HTML и CSS на примерах / Влад Мержевич.
– М.: "БХВ-Петербург", 2012. – 448 c.
Гаевский А.Ю. 100% самоучитель. Создание Web-страниц и Web-сайтов. HTML и JavaScript / А.Ю. Гаевский, В.А. Романовский. – М.: Триумф, 2014. – 464 c.
Чебыкин Ростислав, Самоучитель HTML и CSS. Современные технологии / Ростислав Чебыкин. – Москва: Огни, 2012. – 624 c.
Дунаев Вадим, HTML, скрипты и стили / Вадим Дунаев. – Москва: Наука, 2015. – 816 c.
Дуванов А. А. Web-конструирование. HTML / А. А. Дуванов.
– БХВ-Петербург, 2005. –254 с.
Клименко Роман, Веб-мастеринг на 100% / Роман Клименко.
– М.: Питер, 2013. – 512 c.
Фримен Эрик, Фримен Элизабет, Изучаем HTML, XHTML и CSS = Head First HTML with CSS & XHTML / Эрик Фримен, Элизабет Фримен. – П.: «Питер», 2010. – 656 с.
Комолова Н., Яковлева Е. HTML. Самоучитель / Н. Комолова,
Е. Яковлева. – М., 2011. – 288 c.
Мак-Дональд Мэтью, Создание Web-сайта. Недостающее руководство / Мэтью Мак-Дональд. – БХВ-Петербург – М., 2013. – 411c.