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

Основы программирования на языке HTML (История развития HTML)

Содержание:

Введение

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

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

Язык разметки гипертекста HTML – стандартное средство представления информации в среде World Wide Web (WWW) в виде Web-страниц. Поскольку HTML является стандартизированным языком разметки, документы, написанные с его использованием, можно легко просматривать и редактировать на компьютерах с различным программным и аппаратным обеспечением.

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

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

Объект исследования: язык программирования HTML.

Предмет исследования: изучение возможностей программирования на HTML.

Цель: рассмотреть особенности работы в языке программирования HTML.

Задачи исследования:

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

Методы исследования: изучение литературы, анализ, синтез, классификация и обобщение, моделирование.

Практическая значимость: материалы курсовой работы можно использовать студентам и преподавателям при подготовке к учебным занятиям, а также при самостоятельном изучении языка гипертекстовой разметки HTML

Тема 1. Язык HTML как средство создания гипертекстовых документов

История развития HTML

Началось все для HTML (а вместе с ним и для WWW) в конце 1980-х годов, когда у ученых из Европейской лаборатории элементарных частиц (CERN) возникла необходимость обмениваться множеством различных документов при помощи быстро развивающейся сети Интернет. Тогда необходимо было придумать способ публикации документов в сети таким образом, чтобы к любому нужному документу можно было легко получить доступ. К тому же нужно было, чтобы документы отображались на всех компьютерах одинаковым образом.

Решение поставленной задачи было найдено сотрудником CERN Бернерс-Ли. В 1989 году Тим Бернерс-Ли создал новый язык форматирования документов. В его основу был положен другой ранее созданный язык – SGML, который предусматривал установку связей между документами с помощью гиперссылок. Новый язык разметки был назван HTML (HyperText Markup Language). Этот же человек реализовал и первую программу для просмотра HTML-документов – браузер. ^[1]

1996 год знаменовался тем что вышла версия HTML 3.2 в которую были включены фреймы, которые стали весьма популярны у разработчиков Web-страниц. Практически все современные браузеры поддерживают версию HTML 3.2.^[2] В следующей версии HTML 4 (Dynamic HTML) они были включены на полном основании, эта версия вышла в 1997 году. Уже в этом году было очевидно что дальнейшее развитие гипертекста будет осуществляться за счет скриптов-программирования. Оказалось это наиболее эффективным, чем вводить новые элементы.

Стандарт HTML прошел долгий эволюционный путь. Период стремительного развития сменился затишьем, и будущее HTML стало казаться довольно туманным. Фокус веб-стандартизации сместился в сторону XML и XHTML, в то время как HTML оказался оттесненным на задний план. Однако HTML вовсе не собирался умирать, и на нем по-прежнему базировалась значительная часть веб-контента. Для перехода к веб-приложениям нового типа и преодоления имеющихся недостатков HTML нуждался в новых средствах и спецификациях.

В 2004 году по инициативе небольшой группы специалистов, представлявших ряд крупных производителей браузеров и заинтересованных в поднятии веб-платформы на новый технологический уровень, было основано сообщество WHATWG (Web Hypertext Application Working Group). Благодаря усилиям его участников и появилась спецификация HTML5. ^[3]

В 2006 году к работе над HTML вновь подключился Консорциум W3C и начали появляться постоянные ссылки или временные на различные ресурсы, в результате чего в 2008 году свет увидел первый рабочий вариант проекта рекомендаций по HTML5. Поскольку HTML5 решает ряд важных практических проблем, производители браузеров ведут активную работу по внедрению новых возможностей, в свою очередь это служит источником ценной информации, которая используется для улучшения самой спецификации. HTML5 быстро развивается, шагая в ногу с все возрастающими требованиями к веб-платформам.

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

попытку формально документировать все стандарты "де-факто", которые Web-браузеры использовали годами.^[4]

Язык HTML как средство реализации гипертекста и гипермедиа в сети Интернет наряду со стандартом адресации URL (Universal Resourse Locator, «универсальный адрес ресурса») и протоколом HTTP (Hyper Text Transfer Protocol) является одним из «трёх китов» WWW сделавших Интернет доступным даже для неподготовленных пользователей.

Базовые понятия HTML

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

HTML-документ – это обычный текстовый документ, созданный в любом текстовом редакторе, например в Блокноте, и оформленный в соответствии с правилами языка HTML. Для файлов, содержащих HTML-документы, используется расширение HTML или HTM (например, первая_страница.html или первая_страница.htm). Расширение HTM использовалось ранее для корректного отображения имен файлов в формате MS-DOS.^[5]

Элементы языка HTML

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

Конструкция <P>Привет!</P> представляет собой элемент. Обычно элемент можно разделить на три части. Первая часть – <P> – называется открывающим тегом (англ. tag). Далее идет содержание элемента, которое в данном случае состоит из слова «Привет!». И наконец, </P> – является закрывающим тегом. Как видно, название элемента (P) присутствует и в открывающем, и в закрывающем теге.

Регистр символов в названии элемента не имеет значения. Открывающий и закрывающий теги нужны для указания начала и конца элемента. Теги всегда начинаются символом < и заканчиваются символом >. В закрывающем теге перед его именем помещается символ /. Для некоторых типов элементов допускается отсутствие закрывающего тега. Существуют также элементы, не имеющие закрывающего тега, то есть его не просто можно опустить, а он вообще не существует в языке.

Атрибуты языка HTML

Элементы могут содержать параметры, называемые атрибутами. Атрибуты могут иметь определенные значения (по умолчанию или устанавливаемые авторами). Пара атрибут/значение указывается в начальном теге элемента перед символом >, например:

Каждому атрибуту может быть присвоено значение определенного типа. В приведенном примере указание атрибута bgcolor в элементе BODY приведет к тому, что цвет фона страницы станет синим. Значения атрибутов заключаются в кавычки, хотя в определенных случаях кавычки необязательны.^[7]

В начальном теге элемента может быть указано любое количество допустимых пар атрибут/значение, разделенных пробелами, например:

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

Существует любопытная разновидность атрибутов – булевы атрибуты. Для них возможны только два значения: ИСТИНА и ЛОЖЬ. По умолчанию эти атрибуты имеют значение ЛОЖЬ. Чтобы присвоить им истинное значение, достаточно просто указать имя этого атрибута, не присваивая ему никакого значения.^[8]

Вложенные элементы языка HTML

Важным моментом HTML является возможность использования вложенных элементов. Элемент, находящийся внутри другого элемента, называется вложенным. Пример использования вложенных элементов для задания начертания шрифта:

<I>Курсив<B>-Полужирный курсив-</B>Курсив</I>

При обработке приведенного HTML-кода получится страница, показанная на рис. 1.1

$C:\Users\Алхимик\Desktop\рис 1.1.jpg$

(рис. 1.1)

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

Тема 2. Создание Web-страницы с помощью языка HTML

Итак, в предыдущей теме были рассмотрены основные понятия HTML языка. Пришла пора приступить к созданию простой страницы с использованием языка HTML. Исходный код Web-страницы можно просмотреть в приложении (приложение 1). В этом коде использованы следующие примеры: вставка гиперссылок, вставка изображения, вставка текста, вставка таблицы и вставка списка.

Создание и просмотр HTML-документа

Сам по себе HTML-документ практически нечитабелен для обычного пользователя. Для просмотра HTML-документов используются специальные программы – Web-браузеры. При открытии HTML-документа Web-браузер распознает теги и учитывает их при отображении текста. Если по каким-то причинам (например, при ошибке в записи тега) тег не распознается Web-браузером, то он игнорируется.

Существует большое количество программ, позволяющих просматривать HTML-документы. Это такие распространенные приложения, как Internet Explorer, Opera, Firefox, Google Chrome.

Ниже приведен пример простого HTML-документа:

<html>

<title>Простой HTML-документ</title>

<body>

<h1>Заголовок</h1>

Текст страницы

</body>

</html>

Данный фрагмент можно скопировать в текстовый редактор «Блокнот» и сохранить в формате HTML. Для этого в меню «Файл» надо выбирать пункт «Сохранить как». В открывшемся окне в строке «Имя Файла» ввести «1.html», а в списке «Тип файла» указать «Все файлы» и нажать «Сохранить». После чего можно запустить получившийся HTML-документ через любой браузер. Результат этого HTML-документа отображается браузером Internet Explorer так, как показано на рис. 2.1.

$C:\Users\Алхимик\Desktop\рис 1.2.jpg$

(рис. 2.1)

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

В предыдущем пункте был приведен стандартный исходный код, технология создания и сохранения HTML-документа. Теперь рассмотрим более углубленно структуру, характерную для любого HTML-документа. (рис 2.2)

$C:\Users\Алхимик\Desktop\2.1.jpg$

(рис. 2.2)

Тег <!DOCTYPE> позволяет определить Web-браузеру формат файла и правильно отобразить его инструкции. Существует три основных формата для HTML 4.01:

Strict – строгий формат. Не содержит тегов и параметров, помеченных как устаревшие или не одобряемые. Объявление формата отображено в приложении (таб. 1).
Transitional – переходный формат. Содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML. Объявление формата отображено в приложении (таб. 1).
Frameset – аналогичен переходному формату, но содержит также теги для создания фреймов. Объявление формата отображено в приложении (таб. 1).

Если тег <!DOCTYPE> не указан, то web-браузер переходит в режим совместимости. В этом режиме отличается тип блочной модели и разные Web-браузеры могут по-разному отображать Web-страницу.^[9]

Весь текст HTML-документа расположен между тегами <html> и </html>. HTML-документ состоит из двух разделов – заголовка(<head>) и содержательной части (<body>).

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

При написании Web-страницы с помощью HTML языка необходимо указать заголовок, для этого используются теги <title> и </title>. ^[10]

<title> Заголовок страницы </title>

Текст, расположенный между ними отображается в строке заголовка Web-браузера. Нужно отметить, что длина заголовка не должна превышать 60 символов, иначе он не поместится в заголовке Web-браузера. Часто заголовок используется в результатах выдаваемых поисковыми системам, что делает теги <title> и </title> обязательными в разделе HEAD.

В разделе HEAD могут быть расположены также следующие теги:

<base> - предназначен для документов, в которых используется относительный адрес и эти документы могут переноситься в другую папку или даже на другой компьютер без потери связи;
<link> - устанавливает связь с внешним документом вроде файла со стилями или со шрифтами;
<script> - предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке;
<style> - применяется для определения стилей элементов Web-страницы;
<meta> - позволяет задать описание содержимого страницы и ключевые слова для поисковых машин.

Основная часть документа располагается между тегами <body> и </body>. В этом разделе определяется содержимое HTML-документа, которое отображается в окне браузера (текст, ссылки, картинки, таблицы, списки и т.д.)

Тег <body> имеет следующие параметры:^[11]

bgcolor – позволяет задать цвет фона Web-страницы;
background – позволяет задавать фоновый рисунок Web-страницы;
alink – определяет цвет активной ссылки;
link – определяет цвет еще не просмотренной ссылки;
vlink – определяет цвет уже просмотренной ссылки;
text – устанавливает цвет текста.

Нужно отметить, что с развитием языка HTML, атрибуты, ранее используемые с элементом <body>, считаются устаревшими и запрещены к использованию в HTML5, поэтому для определения цвета заднего фона, цвета текста или ссылок, а так же для добавления фонового изображения и т.д. используются каскадные таблицы стилей (Cascading Style Sheets).^[12]

Использование стилей при создании Web-страницы

Тенденция развития языка HTML идет быстрыми шагами, что ставит перед программистами поиск новых возможностей для улучшения и настройки внешнего вида Web-сайтов. Форматирование HTML-документа можно разделить на 2 способа. Первый способ подразумевает все действия над Web-страницей производить непосредственно в самом коде. Этот способ более трудоемкий и сложный для начинающих. Второй способ - это использовать каскадные таблицы стилей.

Каскадные таблицы стилей (Cascading Style Sheets - CSS) – формальный язык описания внешнего вида HTML-документа.

Каскадные таблицы стилей позволяют гибко настроить внешний вид Web-страницы (цвета, шрифты, фоновые изображения, интервалы между строками, отступы, границы, эффекты и даже анимация элементов). Благодаря CSS можно вносить изменения, относящиеся ко всем страницам Web-сайта, редактируя при этом лишь один файл таблицы стилей. Каскадные таблицы стилей могут управлять представлением документов не только в Web-браузерах, но и в документах при выводе их на печать, кроме того, позволяют менять представление документа в зависимости от разрешения и типа используемого экрана, особенно это удобно для различных устройств (компьютеры, планшеты, телефоны и др.).

Задать стиль можно тремя способами:

Встроить определение стиля в тег;
Встроить определение стилей в заголовок HTML-документа;
Вынести в таблицу стилей в отдельный файл.

Первый способ, позволяющий определение стиля встроить в любой тег с помощью параметра «style». Нужно отметить что параметр «style» поддерживают все теги. Для примера можно привести изменение размера шрифта:

<font style = ”font-size: 12pt”> Текст </font>

Прежде чем продолжить, нужно разобраться с основными понятиями, приведенными в примере. Значение параметра «style (font-size: 12pt)» называется определением стиля или стилем. Элемент определения стиля (font-size) называется атрибутом. Каждый атрибут имеет значение (12pt), указываемое после двоеточия.^[13]

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

<font style = ”font-size: 12pt; color: green”> Текст </font>

Второй способ подразумевает сбор определений стиля в одном месте. Для этого стили указываются между тегами <style> и </style>. Сам тег <style>должен быть расположен в разделе HEAD HTML-документа. А в теге, к которому нужно применить стиль, указывается имя стиля с помощь. Параметра «class». Пример использования данного способа показан на рис. 2.3.1. Атрибуты определения стиля, указанные между тегами <style> и </style>, заключаются в фигурные скобки. Если атрибутов несколько, то они перечисляются через точку с запятой.

$C:\Users\Алхимик\Desktop\2.3.1.jpg$

(рис. 2.3.1)

Третий способ, вынесение таблицы стилей в отдельный файл, самый часто используемый способ среди программистов. Он помогает уменьшить вес HTML-документа и соответственно повысить скорость загрузки Web-страницы. Файл с таблицей стилей обычно имеет расширение *.css и может редактироваться любым текстовым редактором. Пример использования показан на рис. 2.3.2.

$C:\Users\Алхимик\Desktop\2.3.2.jpg$

(рис. 2.3.2)

Отдельный файл с таблицей стилей прикрепляется к HTML-документу с помощью одинарного тега <link>. В параметре «href» указывается URL-адрес, а в параметре «rel» указано значение показывающее, что присоединенный документ содержит таблицу стилей.

Размещение и оформление текста

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

$C:\Users\Алхимик\Desktop\2.4.jpg$

(рис. 2.4)

Форматирование шрифта и текста

Для изменения вида текста, отображаемого браузером, применяется форматирование с использованием специальных HTML-тегов. Форматирование текста HTML-документа сходно с форматированием в любом текстовом редакторе (например, Microsoft Word). Оно позволяет выделить цветом, начертанием, изменением шрифта некоторый текст, подчеркнуть его значимость или просто украсить.

Чтобы выделить информацию в теле HTML-документа используются теги:

<b> - отображает текст полужирным шрифтом;
<i> - отображает текст курсивом;
<u> - отображает текст подчеркнутым;
<s> - отображает текст перечеркнутым.

Нужно обратить внимание, что теги <u> и <s> использовались в старом формате Transitional. И использование их в формате Strict недопустимо.

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

Основные атрибуты форматирования шрифта при помощи каскадных таблиц стилей:^[14]

font-family – позволяет задать имя шрифта. Пример использования атрибута показан в приложении (таб. 2);
font-style – позволяет задать стиль шрифта. Пример использования атрибута показан в приложении (таб. 2);
font-size – позволяет задать размер шрифта. Пример использования атрибута показан в приложении (таб. 2);
color – позволяет задать цвет шрифта. Пример использования атрибута показан в приложении (таб. 2);
font-weight – позволяет управлять жирностью шрифта. Пример использования атрибута показан в приложении (таб. 2);

Для текстовых фрагментов, кроме указания характеристик шрифтов, можно задать некоторые дополнительные параметры – расстояние между символами, словами и строками, вертикальное и горизонтальное выравнивание, отступ первой строки.

Основные атрибуты форматирования текста при помощи каскадных таблиц стилей:^[15]

letter-spacing – задает расстояние между символами. Пример использования атрибута показан в приложении (таб. 3);
word-spacing – задает расстояние между словами. Пример использования атрибута показан в приложении (таб. 3);
text-index – задает отступ первой строки. Пример использования атрибута показан в приложении (таб. 3);
text-align – задает горизонтальное выравнивание текста. Пример использования атрибута показан в приложении (таб. 3);
vertical-align – задает вертикальное выравнивание текста относительно элемента-родителя. Пример использования атрибута показан в приложении (таб. 3);

Работа с таблицами в HTML

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

В HTML-документе таблицы используются в следующих случаях:

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

Структура, описывающая таблицу, представлена на рис. 2.5.

$C:\Users\Алхимик\Desktop\2.5.jpg$

(рис. 2.5)

Эта структура описывает таблицу 2х2 с заголовком. Все ячейки пронумерованы от 1 до 4. Таблица вставляется в HTML-документ с помощью парного тега <table>. Отдельная ячейка таблицы описывается тегом <td>, а ряд ячеек – с помощью тега <tr>. Тег <caption> позволяет задать заголовок таблицы. Для более гибкой настройки каждый тег таблицы имеет свой набор атрибутов и параметров.

Тег <table> имеет следующие параметры:

border – управляет отображением линий сетки таблицы, а также задает толщину рамки вокруг таблицы. Если его не указывать, то сетка не будет отображена на Web-странице;
cellspacing – задает расстояние между рамками соседних ячеек. По умолчанию имеет значение 2. Чтобы рамка смежных ячеек была одной линией нужно присвоить значение 0;
cellpadding – указывает размер отступа между рамкой ячейи и данными внутри ячейки;
width – определяет ширину таблицы в процентах или в пикселях от размера окна;
align – задает выравнивание таблицы, а также обтекания таблицы текстом. Имеет следующие значения: left (по левому краю), right (по правому краю), center (по центру).
Bgcolor – указывает цвет фона таблицы.

Парный тег <tr>, описывающий строки таблицы, имеет следующие параметры:

align – указывает горизонтальное выравнивание текста в ячейках таблицы и принимает следующие значения: left (по левому краю), right (по правому краю), center (по центру), justify (по ширине);
valign – определяет вертикальное выравнивание текста в ячейке и принимает следующие значения: top (по верхнему краю), middle (по центру), bottom (по нижнему краю), baseline (по базовой линии).

Парный тег <td>, описывающий ячейки таблицы, имеет следующие параметры:

align и valign – выполняют аналогичные функции тега <tr>;
colspan – указывает количество объединяемых ячеек по горизонтали;
rowspan – указывает количество объединяемых ячеек по вертикали.

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

Списки

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

Список – это набор упорядоченных абзацев текста, помеченных специальными значками (маркированные списки) или цифрами (нумерованные списки).^[16]

В HTML 4.01 поддерживаются три вида списков: маркированные, нумерованные, а также списки определений.

Маркированный список помещается внутри пары тегов <ul> и </ul>. Перед каждым пунктом списка необходимо поместить тег <li>. Закрывающий тег </li> не обязателен. На рисунке 2.6.1 представлена структура маркированного списка.

$C:\Users\Алхимик\Desktop\Маркированный список.jpg$

(рис 2.6.1)

Тег <ul> имеет параметр type, позволяющий задать значок, которым помечается строки списка. Параметр может принимать следующие значения:

disk –значки в форме кружка с заливкой;
circle – значки в форме кружков без заливки;
square – значки в форме квадрата с заливкой.

Параметр type используется только в формате Transitional.

Нумерованный список помещается внутри пары тегов <ol> и </ol>. Пред каждым пунктом списка необходимо поместить тег <li>. Закрывающий тег </li> не обязателен. На рисунке 2.6.2 представлена структура нумерованного списка.

$C:\Users\Алхимик\Desktop\Нумер список.jpg$

(рис. 2.6.2)

Тег <ol> имеет два параметра. Первый, type, позволят задать формат, которым нумеруется строки списка. Параметр может принимать следующие значения:

А – пункты нумеруются прописными латинскими буквами;
а – пункты нумеруются строчными латинскими буквами;
I – пункты нумеруются прописными римскими буквами;
i – пункты нумеруются строчными римскими буквами;
1 – пункты нумеруются арабскими цифрами. Этот параметр используется по умолчанию.

Второй параметр тега <ol> - start. Он задает номер, с которого будет начинаться нумерация строк. Тег <li> имеет параметр value, который позволяет изменить номер данного элемента списка. Параметры type, start, value используется только в формате Transitional.

Списки определений состоят из пар «термин/определение». Описываются с помощью тега <dl>. Для вставки термина применяется тег <dt>, а для вставки определения – тег <dd>. Закрывающие теги </dt> и </dd> не обязательны. Пример использования списка определения показан на рисунке 2.6.3.

$C:\Users\Алхимик\Desktop\2,6,3.jpg$

(рис 2.6.3)

Гиперссылки

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

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

Все эти разновидности гиперссылок создаются в HTML с помощью парного тега <a> и </a>.

Внешние гиперссылки вставляются в HTML-документ с помощью тега <a>. Тег должен быть расположен внутри блочного тега, например <p>, <div> или другие. Основным параметром тега <a> является href. Именно этот параметр задает URL-адрес Web-страницы, которая будет загружена при щелчке мыши на указателе. В качестве указателя может быть текст:

<a href=”https://synergy.ru”>Текст ссылки</a>

URL-адреса делятся на две категории:

абсолютный – URL-адрес содержит обозначение протокола, доменный или IP-адрес компьютера, путь к файлу, а также имя файла;
относительный – URL-адрес определяется с учетом местоположения Web-страницы, на которой находится ссылка.

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

Внутренняя гиперссылка также вставляется при помощи тега <a> с одним отличием – параметр href содержит имя указателя, а не URL-адрес. Перед именем указателя ставится знак #:

<a href=”#chapter1”>Глава 1</a>

Указатель создается с помощью тега <a>, но вместо параметра href используется параметр name, который задает имя указателя:

Язык HTML предлагает некоторые дополнительные возможности для создания гиперссылки. Их применяют не часто, но иногда они бывают полезны. Например, для гиперссылки можно указать «горячую» клавишу. Если пользователь нажмет эту клавишу, удерживая нажатой клавишу <Alt>, Web-браузер выполнит переход по такой гиперссылке. Для указания «горячей» клавиши предусмотрен необязательный атрибут accesskey тега <a>. Значение этого атрибута – латинская буква, соответствующая нужной клавише/

$C:\Users\Алхимик\Desktop\2.7.1.jpg$

(рис. 2.7)

На рисунке 2.7 указана для гиперссылки «горячая» клавиша <S>. И чтобы перейти по ней, пользователю достаточно будет нажать комбинацию клавишь <Alt>+<S>.^[17]

Добавление изображений и мультимедиа на Web-страницу

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

В Интернете применяются следующие графические форматы:^[18]

GIF – использует только 256 цветов и поддерживает прозрачность. Кроме того, GIF-файл может содержать анимацию;
JPEG – метод сжатия фотографии с потерей качества. Прозрачность и анимация не поддерживается;
PNG – формат хранения графики, использующий сжатие без потерь. Поддерживает прозрачность.

Изображения вставляются в Web-страницу с помощью одинарного тега <img>. Сам тег <img> должен быть расположен внутри блочного тега, например: <div>.

Тег имеет следующие основные параметры:

src – URL-адрес файла графического изображения;
alt – строка текста, которая будет показана вместо изображения до его загрузки или при отключенной графике, а также если изображение загрузить не удалось. Также при наведении курсора на изображение появляется подсказка с указанным текстом в параметре alt;
width – ширина изображения в пикселах;
height – высота изображения в пикселах;

Важно отметить, что значения параметров <width> и <height> могут не соответствовать реальным размерам изображения. В этом случае Web-браузер выполнит перемасштабирование. Если указать только один параметр, то значение второго будет рассчитано пропорционально значению первого исходя из реальных размеров изображения.^[19]

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

Аудиофайлы подготавливаются в следующих форматах:

MPEG 3 level 3 (MP3) – для Internet Explorer, Safari и Chrome;
OGG – для Firefox, Opera и Chrome.

Видеофайлы подготавливаются в следующих форматах:

MPEG 4 File (MP4) – для Internet Explorer и Safari;
WebM – для Firefox, Opera и Chrome.

Аудиоролик на страницу вставляется с помощью тега <audio>.

Этот тег поддерживает следующие параметры:

src – URL-адрес мультимедийного файла с роликом;
autoplay – если указан, воспроизведение начнется сразу после загрузки Web-страницы;
controls – если указан, на экране будут показаны элементы управления роликом;
loop – если указан, ролик будет воспроизводиться бесконечно;
muted – если указан, после загрузки Web-страницы звук будет приглушен;
preload – позволяет указать, как будет выполнена предварительная загрузка файла.

Для вставки на Web-страницу видеоролика применяется тег <video>.

Этот тег поддерживает все паромеры тега <audio> и три дополнительных:

width – ширина панели проигрывателя в пикселах;
height – высота панели проигрывателя в пикселах;
poster – URL-адрес графического файла, который отображается вместо первого кадра.^[20]

Заключение

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

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

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

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

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

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

Библиография

Чиртик А.А. HTML. Популярный самоучитель. СПб.: Питер, 2006. 224 с.
Браун М., Ханикатт Д. HTML 3.2 в подлиннике.: БХВ-Петербург, 2002. 1040 с.
Пилгрим М. Погружение в HTML5: перев. с англ. СПб.: БХВ-Петербург, 2011. 304 с.
Робсон Э., Фримен Э. Изучаем HTML, XHTML и CSS. 2-е изд. СПб.: Питер, 2014. 720 с.
Прохоренок Н. А., Дронов В.А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера - СПб.: БХВ-Петербург, 2013. 768 c.
Мальчук Е.В. HTML и CSS. Самоучитель.: издательский дом «Вильямс», 2008. 416 с.
Гаевский А.Ю., Романовский В. А. 100% самоучитель по созданию Web-страниц и Web-сайтов. HTML и JavaScript".: издательство "Триумф", 2008. 460 с.
Макфарланд Д. Новая большая книга CSS.: Питер, 2016. 720 с.
Шафер С. HTML, XHTML и CSS. 5-е издание.: Москва,210. 656 c.
Дронов В.А. Laravel. Быстрая разработка современных динамических Web-сайтов на PHP, MySQL, HTML и CSS. – СПб.: БХВ-Петербург, 2018. 768 с.
Хольцшлаг М. Языки HTML и CSS: для создания Web-сайтов: [учеб. пособие] - М.: ТРИУМФ, 2007. 304 с.
Дронов В.А. HTML 5, CSS и Web 2.0. Разработка современных Web-сайтов – СПб.: БХВ-Петербург, 2011. 416 с.

Приложение

Приложение 1. Исходный код Web-страницы.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Структура HTML-документа</title>

</head>

<body>

Данный текст будет отображен в Web-браузере

<ul>

<li>Первый элемент</li>

<li>Второй элемент</li>

</ul>

<a href="https://synergy.ru"> Текст ссылки </a>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Формат HTML 4.01
Strict	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" "http://www.w3.org/TR/html4/loose.dtd">
Frameset	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset //EN" "http://www.w3.org/TR/html4/ frameset.dtd">

Таблица 1.

Таблица 2.

Форматирование шрифта с помощью CSS
font-family	p { font-family: “Arial” }		имя шрифта
font-style	p { font-style: normal }	нормальный шрифт	стиль шрифта
	p { font-style: italic }	курсивный шрифт
	p { font-style: oblique }	наклонный шрифт
font-size	p { font-size: 12pt }		размер шрифта
color	p { color: red }		цвет шрифта
font-weight	p { font-weight }		жирность шрифта

Таблица 3.

Форматирование текста с помощью CSS
letter-spacing	p { letter-spacing: normal }	по умолчанию	Расстояние между символами в словах
letter-spacing	p { letter-spacing: 5mm }	абсолютная величина	Расстояние между символами в словах
word-spacing	p { word-spacing: normal }	по умолчанию	Расстояние меду словами
word-spacing	p { word-spacing: 5mm }	абсолютная величина	Расстояние меду словами
text-index	p { text-index: 10mm }	абсолютная величина	Отступ первой строки
text-align	p { text-align: center}	по центру	Вертикальное расстояние между строками
	p { text-align: left}	по левому краю
	p { text-align: right}	по правому краю
	p { text-align: justify}	по ширине
vertical-align	p { vertical-align: baseline}	по базовой линии	Горизонтальное выравнивание текста
	p { vertical-align: middle}	по центру
	p { vertical-align: top}	по верху
	p { vertical-align: bottom}	по низу

Чиртик А. А. HTML: Популярный самоучитель. Санкт-Петербург, 2008. С. 8 ↑
Браун М., Ханигатт Д. HTML 3.2 в подлиннике. БХВ-Петербург, 2002. С. 10 ↑
Пилгрим М. Погружение в HTML5: перев. с англ. СПб.: БХВ-Петербург, 2011. С. 18. ↑
Пилгрим М. Погружение в HTML5: перев. с англ. СПб.: БХВ-Петербург, 2011. С. 3. ↑
Чиртик А. А. HTML: Популярный самоучитель. Санкт-Петербург. 2008. С. 10 ↑
Прохоренок Н.А., Дронов В.А. HTML, JavaScript, PHP и MySQL. Джентельменский набор Web-мастера 4-е изд. СПб.; БХВ-Петербург, 2017. С. 5 ↑
Чиртик А. А. HTML: Популярный самоучитель. Санкт-Петербург, 2008. С. 11 ↑
Чиртик А. А. HTML: Популярный самоучитель. Санкт-Петербург, 2008. С. 11 ↑
Прохоренок Н.А., Дронов В.А. HTML, JavaScript, PHP и MySQL. Джентельменский набор Web-мастера 4-е изд. СПб.; БХВ-Петербург,2017. С. 11 ↑
Прохоренок Н.А., Дронов В.А. HTML, JavaScript, PHP и MySQL. Джентельменский набор Web-мастера 4-е изд. СПб.; БХВ-Петербург,2017. С. 12 ↑
Гаевский А.Ю., Романовский В. А. 100% самоучитель по созданию Web-страниц и Web-сайтов. HTML и JavaScript".: издательство "Триумф", 2008.С. 26 ↑
Мальчук Е.В. HTML и CSS. Самоучитель.: Издательский дом «Вильямс», 2008. С. 173 ↑
Прохоренок Н.А., Дронов В.А. HTML, JavaScript, PHP и MySQL. Джентельменский набор Web-мастера 4-е изд. СПб.; БХВ-Петербург,2017,С. 73 ↑
Макфарланд Д. Новая большая книга CSS.: Питер, 2016, С. 142 – 211. ↑
Макфарланд Д. Новая большая книга CSS.: Питер, 2016, С. 211 – 256. ↑
Шафер С. HTML, XHTML и CSS. 5-е издание.: Москва,210, С. 91 ↑
Дронов В.А. Laravel. Быстрая разработка современных динамических Web-сайтов на PHP, MySQL, HTML и CSS. – СПб.: БХВ-Петербург, 2018. С. 59 ↑
Хольцшлаг М. Языки HTML и CSS: для создания Web-сайтов: [учеб. пособие] - М.: ТРИУМФ, 2007. С. 48 ↑
Дронов В.А. Laravel. Быстрая разработка современных динамических Web-сайтов на PHP, MySQL, HTML и CSS. – СПб.: БХВ-Петербург, 2018. С. 24 ↑
Дронов В.А. HTML 5, CSS и Web 2.0. Разработка современных Web-сайтов – СПб.: БХВ-Петербург, 2011. С. 60 - 65 ↑