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

ОСНОВЫ ЯЗЫКА ПРОГРАММИРОВАНИЯ HTML

Содержание:

Введение

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

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

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

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

Предмет – программирование сайта на языке HTML.

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

Задачи:

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

Структура: работа состоит из введения, трех глав, заключения и списка использованной литературы.

1.Основные сведения о языке программирования

1.1.О языке HTML

Hyper Text Markup Language (HTML) - стандартный язык, предназначенный для создания гипертекстовых документов в сети интернет. Данный язык поддерживается всеми современными веб-браузерами. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любом ПО для просмотра веб –страниц.

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

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

HTML-теги могут быть условно разделены на две категории:

1. Основные теги, определяющие, как будет отображаться Веб-браузером тело документа в целом.

2. Вспомогательные теги, описывающие общие свойства документа, такие как заголовок или автор документа.

1.2.Создание Веб-сайта

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

На рынке так же существуют автоматические решения, так называемые конструкторы сайтов, на которых создание сайта сводится к выбору из готовых модулей.

1.3.Основные принципы HTML

HTML-документ невозможен без тегов. Все теги HTML документа состоят из:

“<” Левой угловой скобки
Название тега
“>” правой угловой скобки

В основном, для всех тегов используют закрывающий тег, аналогичный стартовому, но имеющий перед названием тега прямым слешем “/”.

Разберем для примера тег “<h1>”, используемый для обозначения заголовка первого уровня. Регистр букв при написании тега не имеет значения. В коде HTML файла данный тег будет выглядеть так:

<h1> Заголовок первого уровня</h1> или <H1> Заголовок первого уровня</H1>

Для некоторых тегов, например: , <li>,<dt> и др. не требуют закрывающего тега, но поставить его будет хорошим тоном. Это придает коду структурируемость и читаемость.

Все символы разметки (пробелы, символы табуляции, возврат каретки и т.д.) добавленные снаружи тега, не будут интерпретироваться веб-браузером.

1.4.Структура документа

В начале каждого HTML-документа, на первом месте должен находится элемент <!DOCTYPE>, для самой современной (5) версии зыка HTML данный элемент будет выглядеть следующим образом: <!DOCTYPE html>. Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы веб-браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.^[1]

После элемента <!DOCTYPE> ставится тег <HTML>, который является контейнером и заключает в себя все содержимое веб-страницы. Самый простой документ должен выглядеть так:

<!DOCTYPE html>

<HTML>

Тело документа.

</HTML>

Внутри тега <HTML> ставится тег заголовочной части <HEAD>. Данный тег используется для хранения элементов, которые помогут веб-браузеру в работе с данными. В данном теге не допускается размещение текста, только другие теги, например тег заголовка </TITLE>. Пример использования:

<!DOCTYPE html>

<HTML>

<HEAD>

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

</HEAD>

</HTML>

Заголовочный тег <TITLE> используется для отображения информации в заголовке сайта или в файле закладок. Данный тег требует закрытия тегом </TITLE> и располагается всегда внутри тега <HEAD>.

1.5. Теги тела документа

Теги тела используются для обозначения отображаемых в окне веб-браузера HTML-компонентов. В теле документа находятся: текст, изображения, гиперссылки на другие документы и другая форматируемая информация. Тело документа обозначается тегом <BODY> и закрывается тегом </BODY>.

Для структурного разделения текста в теле документа используется тег заголовка <H>. Данный тег стандартно имеет 6 уровней. Заголовки более высокого уровня могут не поддерживаться веб-браузером и, обычно, не используются. Уровни начинаются с первого, самого большого <H1> и заканчиваются <H6>, закрывающий тег соответственно выглядит </Hx>, где x – уровень заголовка.

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

К тегу могут применены универсальные дополнительные параметры. Либо собственный параметр ALIGN, позволяющий выравнить абзац по выбранному краю или центру окна. Пример:

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

Для более явного форматирования текста используется тег <PRE>, закрывающий тег </PRE>. Текст, помещенный внутри данного тега, будет поддерживать следующие способы форматирования:

Перевод строки
Табуляция
Произвольный шрифт, устанавливаемый браузером

При помещении тега заголовка внутри тега <PRE>, он будет игнорироваться веб-браузером.

Для разрыва строки используют тег . Следующий после этого тега текст будет выведен на новой строке. Данный тег не требует закрытия.

С помощью дополнительных параметров, например дает выбрать с какой стороны ( left – левый край веб-страницы, right – правый край, all – с двух краев).

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

При использовании цитаты, стоит воспользоваться тегом <BLOCKQUOTE>. Текст, выделенный данным тегом, будет иметь отступ размером в 8 пробелов с левого края.

Пример использования ранее разобранных HTML-тегов:

<!DOCTYPE html>

<HTML>

<HEAD>

<TITLE> Пример</TITLE>

</HEAD>

<BODY>

<H1> Заголовок первого уровня </H1>

<CENTER><H2> Заголовок второго уровня по центру</H2></CENTER>

Первый абзац по центру.

Второй абзац.

<PRE>Неформатированный

текст</PRE>

<BLOCKQUOTE>Знание фактов только потому и драгоценно, что в фактах скрываются идеи; факты без идей — сор для головы и памяти.

В. Белинский</BLOCKQUOTE>

ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст

</BODY>

</HTML>

Рисунок 1. Пример использования ранее разобранных HTML-тегов

2. Описание создания сайта

2.1 Гипертекстовые ссылки

Гипертекстовые ссылки являются ключевым компонентом, делающим WEB привлекательным для пользователей. Добавляя гипертекстовые ссылки (далее - ссылки), вы делаете набор документов связанным и структурированием, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно.

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

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

HTML использует URL (Uniform Resource Locator) для представления гипертекстовых ссылок и ссылок на сетевые сервисы внутри HTML-документа. Первая часть URL (до двоеточия) описывает метод доступа или сетевой сервис. Другая часть URL (после двоеточия) интерпретируется в зависимости от метода доступа. Обычно, два прямых слеша после двоеточия обозначают имя машины: method://machine-name/path/foo.html

Следующий пример представляет собой вызов HTML-документа index.html с сервера www.softexpress.com с использованием HTTP протокола: http://www.softexpress.com/index.html

Uniform Resource Locator имеет следующий формат: method://servername:port/pathname#anchor

Ниже описан каждый компонент URL:

METHOD. Имя операции, которая будет выполняться при интерпретации данного URL. Наиболее часто используемые методы:

file: чтение файла с локального диска. Имя файла интерпретируется для локальной машины пользователя. Данный метод используется для отображения какого-либо файла, находящегося на машине пользователя. Например: file:/home/alex/index.html - отображает файл index.html из каталога /home/alex на пользовательской машине
http: доступ к WEB-странице в сети с использованием HTTP-протокола. (Это наиболее часто используемый метод доступа к какому-либо HTML-документу в сети). Например: http://www.softexpress.com/ - доступ к Home-странице компании SoftExpress
ftp: запрос файла с анонимного FTP-сервера. Например: ftp://hostname/directory/filename
mailto: активизирует почтовую сессию с указанным пользователем и хостом. Например: mailto:info@softexpress.com - активизирует сессию посылки сообщения пользователю info на машине softexpress.com, если браузер поддерживает запуск электронной почты. Заметьте, что метод mailto: не требует указание слешей после двоеточия (как правило, после двоеточия сразу идет электронный адрес абонента)
telnet: обращение к службе telnet
news: вызов службы новостей, если браузер ее поддерживает. Например: news:relcom.www.support

SERVERNAME. Необязательный параметр, описывающий полное сетевое имя машины. Например: www.softexpress.com - полное сетевое имя сервера фирмы СофтСервис.

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

PORT. Номер порта TCP на котором функционирует WEB-сервер. Если порт не указан, то "по умолчанию" используется порт 80. Данный параметр (port) не используется в подавляющем большинстве URL.

PATHNAME. Частичный или полный путь к документу, который должен вызваться в результате интерпретации URL. Различные WEB-сервера сконфигурированы по-разному для интерпретации пути доступа к документу. Например, при использовании CGI скриптов (исполняемых программ), они обычно собираются в одном или нескольких выделенных каталогах, путь к которым записан в специальных параметрах WEB-сервера. Для данных каталогов WEB-сервером выделяется специальный логический путь, который и используется в URL. Если WEB-сервер видит данный путь, то запрашиваемый файл интерпретируется как исполняемый модуль. В противном случае, запрашиваемый файл интерпретируется просто как файл данных, даже если он является исполняемым модулем. Например: http://www.softexpress.com/cgi-win/handle.exe

В данном примере HTTP-сервер должен вызвать CGI-скрипт с именем handle.exe, который находится на машине с сетевым именем www.softexpress.com. Путь к данному скрипту - /cgi-win/ - в действительности является виртуальным путем (выделенным сервером для исполняемых модулей). При описании пути используется UNIX-подобный синтаксис, где, в отличии от DOS и Windows используются прямые слеши вместо обратных. Если после сетевого имени машины сразу идет имя документа, то он должен находиться в корневом каталоге на удаленной машине или (что чаще) в каталоге, выделенном WEB-сервером в качестве корневого. Если же URL заканчивается сетевым именем машины, то в качестве документа запрашивается документ из корневого каталога удаленной машины с именем, установленным в настройках WEB-сервера (как правило, это index.html).

#ANCHOR. Данный элемент является ссылкой на строку (точку) внутри HTML-документа. Большинство браузеров, встречая после имени документа данный элемент, размещают документ на экране таким образом, что указанная строка документа помещается в верхнюю строку рабочего окна браузера. Точки, на которые ссылается #anchor, указываются в документе при помощи тега NAME, как это будет описано далее.

2.2.Структура ссылок в HTML-документе.

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

<A HREF="URL"> текст-который-будет-подсвечен-как-ссылка </A>

Тег <A HREF="URL»> открывает описание ссылки, а тег </A> - закрывает его. Любой текст, находящийся между данными двумя тегами, подсвечивается специальным образом Web-браузером. Обычно этот текст отображается подчеркнутым и выделен синим (или другим заданным пользователем) цветом. Текст, обозначающий URL, не отображается браузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте).

Вы можете делать ссылки на различные участки или разделы одного и того же документа, используя специальных скрытый маркер для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя прокрутку экрана. Как только вы щелкнете на ссылке, браузер переместит вас на указанный раздел документа, а строка, в которой стоит маркер данного раздела (обычно, первая строка раздела или заголовок раздела) будет размещена на первой строке окна браузера (если данная строка не присутствует уже на экране браузера).

Для создания такой ссылки необходимо выполнить следующие шаги:

1. Создайте маркер раздела. Синтаксис данного маркера следующий:

<A NAME="named_anchor"> Текст-который-отобразится-в-первой-строке </A>

2. Создайте ссылку на данный маркер:

<A HREF="#named_anchor"> Текст </A>

Символы "#ex1" сообщает вашему браузеру, что необходимо найти в данном HTML-документе маркер с именем "ex1". Когда пользователь щелкнет мышью на строке "Раздел 1", браузер перейдет сразу к разделу 1.

2.3 Графика внутри документа

Одна из наиболее привлекательных черт Web - возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тега <IMG...ISMAP>. Использование данного тега позволяет значительно улучшить внешний вид и функциональность документов.

Существует два способа использования графики в HTML-документах. Первый — это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее используемая техника при проектировании документов, называемая иногда "inline image". Синтаксис тега:

Опишем элементы синтаксиса тега:

URL - обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает веб-браузеру, где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством браузеров.
ALT="text"- данный необязательный элемент задает текст, который будет отображен браузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство веб-браузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. Тег ALT рекомендуется, если ваши пользователи используют веб-браузер, не поддерживающий графический режим, например Lynx.
HEIGTH=n1 - данный необязательный параметр используется для указания высоты рисунка в пикселях. Если данный параметр не указан, то используется оригинальная высота рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали, что позволяет более четко определять внешний вид документа. Однако, некоторые веб-браузеры не поддерживают данный параметр. С другой стороны, экранное разрешение у вашего клиента может отличаться от вашего, поэтому будьте внимательны при задании абсолютной величины графического объекта.
WIDTH=n2: - параметр также необязателен, как и предыдущий. Позволяет задать абсолютную ширину рисунка в пикселях.
ALIGN -данный параметр используется, чтобы сообщить веб-браузеру, куда поместить следующий блок текста. Это позволяет более строго задать расположение элементов на экране. Если данный параметр не используется, то большинство веб-браузеров располагает изображение в левой части экрана, а текст справа от него.
ISMAP- этот параметр сообщает браузеру, что данное изображение позволяет пользователю выполнять какие-либо действия, щелкая мышью на определенном месте изображения. Данная возможность является расширением HTML.

Пример использования данного тега:

С версии HTML 2.0 у тега <IMG> появились дополнительные параметры:

Новые параметры:

BORDER - данный параметр позволяет автору определить ширину рамки вокруг рисунка.
VSPACE -позволяет установить размер в пикселях пустого пространства над и под рисунком, чтобы текст не наезжал на рисунок. Особенно это важно для динамически формируемых изображений, когда нельзя заранее увидеть документ.
HSPACE - то же самое, что и VSPACE, но только по горизонтали.

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

Описание фонового рисунка включается в тег BODY и выглядит следующим образом:

<BODY BACKGROUND="picture.gif">.

Многие HTML-авторы любят использовать заранее предопределенные цвета фона документа, обычного текста и ссылок. Чтобы задать эти цвета, необходимо включить в тег <BODY> дополнительные параметры:

<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX" LINK="#XXXXXX"> каждый из параметров определяет цвет того или иного элемента. Опишем эти параметры:

BGCOLOR - цвет фона документа

TEXT - цвет простого текста документа

LINK - цвет ссылки. Цвет задается шестизначным числом в шестнадцатеричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF - белому. Например: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">. Данная строка определяет белый цвет фона документа, черный текст и серебристые ссылки.

Используя тег <HR>, вы можете разделить текст горизонтальной чертой. Формат тега:

Параметры тега:

SIZE - толщина линии в пикселях.
WIDTH - ширина линии в пикселях или процентах от ширины окна веб-браузера.
ALIGN - Расположение на экране (слева | по центру | справа).
NOSHADE - по умолчанию линия представлена в 3D виде с тенью. Данный параметр позволяет представить линию просто однотонной темной полоской.

2.4.Добавление стилей в документ

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

bold (жирный)
italic (наклонный)
mono spaced (type writer - с использованием фиксированных шрифтов)

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

Стиль	Элемент или тег	Результат
Bold	<B> Этот текст жирный </B>	Этот текст жирный
Italic	<I> Этот текст наклонный </I>	Этот текст наклонный
Mono spaced	<TT> Этот текст с непроп. шрифтом </TT>	Этот текст с непроп. шрифтом

Таблица №1: Основные стили текста

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

Курица - это птица

Курица – это птица

Дополнительные стили:

big (большой)
small (маленький)
sub (подстрочник)
sup (надстрочник)

Стиль	Элемент или тег	Результат
Big	Этот текст <BIG> большой </BIG>	Этот текст большой
Small	Этот текст <SMALL> маленький </SMALL>	Этот текст маленький
Sub	Этот текст <SUB> подстрочник </SUB>	Этот текст _{подстрочник}
Sup	Этот текст <SUP> надстрочник </SUP>	Этот текст ^{надстрочник}

Таблица №2: Дополнительные стили текста

Размер шрифта может быть изменен при помощи тега: . Шрифт может иметь размер от 1 до 7. Вы можете прямо указать размер шрифта цифрой, или указать смещение относительно базового значения (по умолчанию - 3) в положительную или отрицательную сторону. Базовое значение можно изменить при помощи тега: <BASEFONT SIZE=n>

Например: и зм ен ен и е

Цвет шрифта может быть изменен при помощи тега:

Цвет указывается в RGB-формате (Red-Green-Blue) посредством указания размерности каждой компоненты цвета в шестнадцатеричном формате. Например, белый цвет обозначается "000000", черный - "FFFFFF", синий - "0000FF" и т.п.

Красный Зеленый Синий.

3. Алгоритм практической работы

3.1.Создание Веб-сайта на практике.

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

При написании веб-сайта мною использовались:

Среда разработки Visual Studio Code 1.37.1
Расширение HTML CSS Support для выделения тегов.
Расширение HTML Snippets для быстроты написания кода.
Расширение Live Server для тестирования веб-сайта.
Веб-браузер Safari
Представленная ранее информация в данной работе.

Код HTML-документа будет доступен в приложении 1.

Изображения (снимки экрана) открытого в веб-браузере веб-сайта будут доступны в приложении 2.

Заключение

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

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

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

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

Список используемой литературы

HTMLBOOK [Электронный ресурс] /. — Электрон. текстовые дан. — 2019. — Режим доступа: http://htmlbook.ru, свободный
Введение в HTML [Электронный ресурс] /. — Электрон. текстовые дан. — MDN contributors, 2019. — Режим доступа: https://developer.mozilla.org/ru/docs/Learn/HTML/Введение_в_HTML, свободный
HTML5BOOK [Электронный ресурс] / Елена Назарова. — Электрон. текстовые дан. — 2019. — Режим доступа: https://html5book.ru/html-html5/, свободный
Справочник HTML [Электронный ресурс] / Влад Мержевич. — Электрон. текстовые дан. — 2018. — Режим доступа: https://webref.ru/html, свободный
HTML Tutorial [Электронный ресурс] /. — Электрон. текстовые дан. — W3Schools, 2019. — Режим доступа: https://www.w3schools.com/html/, свободный
HTML5 для веб-дизайнеров /Кит Джереми. — 3-е изд. — A Book Apart, 2017. — 110с.
HTML5, CSS3 и Web 2.0 /Владимир Дронов. — 1-е изд. — Москва: bhy, 2016. — 602с.
HTML 5. Путеводитель по технологии /Сухов Кирилл Константинович; Мовчан Д. А. — Обн. изд. — Москва: ДМК-Пресс, 2013. — 352с.

Приложение 1

<!DOCTYPE html>

<html>

<head>

<title>Основы программирования на языке HTML</title>

<style>

P {

font-family:'Times New Roman';

font-size: 14pt;

}

</style>

</head>

<body>

<h1 align = center>КУРСОВАЯ РАБОТА</h1>

По дисциплине<p

ТЕХНОЛОГИИ ПРОГРАММИРОВАНИЯ

<hr>

На тему

ОСНОВЫ ПРОГРАММИРОВАНИЯ НА ЯЗЫКЕ HTML

<hr>

<h2 align = center>Содержание</h2>

<a href = '#2.4'>2.4.Добавление стилей в документ</a>

<h2 align = center><a name = '2.4'>2.4.Добавление стилей в документ</a></h2>

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

• bold (жирный)

• italic (наклонный)

• mono spaced (type writer - с использованием фиксированных шрифтов)

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

<tr><td>Стиль</td><td>Элемент или тег</td><td>Результат</td></tr>

<tr><td>Bold</td><td>Этот текст жирный</td><td>Этот текст жирный</td></tr>

<tr><td>Italic</td><td>Этот текст наклонный</td><td>Этот текст наклонный</td></tr>

<tr><td>Mono spaced</td><td><TT>Этот текст с непроп. шрифтом</TT></td><td><TT>Этот текст с непроп. шрифтом</TT></td></tr>

</table>

Таблица №1: Основные стили текста

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

Курица - это птица

Дополнительные стили:

• big (большой)

• small (маленький)

• sub (подстрочник)

• sup (надстрочник)

<table border="1"><tr><td>Стиль</td><td>Элемент или тег</td><td>Результат</td></tr>

<tr><td>Big</td><td><Big>Этот текст большой</Big></td><td><big>Этот текст большой</big></td></tr>

<tr><td>Small</td><td>Этот текст маленький</td><td>Этот текст маленький</td></tr>

<tr><td>Sub</td><td>Этот текст надстрочник</td><td>Этот текст подстрочник</td></tr>

<tr><td>Sup</td><td>Этот текст подстрочник</td><td>Этот текст надстрочник</td></tr>

</table>

Таблица №2: Дополнительные стили текста

Размер шрифта может быть изменен при помощи тега: . Шрифт может иметь размер от 1 до 7. Вы можете прямо указать размер шрифта цифрой, или указать смещение относительно базового значения (по умолчанию - 3) в положительную или отрицательную сторону. Базовое значение можно изменить при помощи тега: <BASEFONT SIZE=n>

Например: и зм ен ен и е

Цвет шрифта может быть изменен при помощи тега:

Красный Зеленый Синий.

</body>

</html>

Приложение 2

Элемент <!DOCTYPE> // HTMLBOOK URL: http://htmlbook.ru/html/%21doctype (дата обращения: 24.10.19). ↑