Файл: Основы программирования на языке HTML (Основы языка программирования).pdf

В настоящее время Интернет является самой распространенной технологией. По данным полученным за 2018й год можно выяснить, что во всем мире Интернетом пользуются более 4 миллиардов человек.

На основе Интернета работает WWW (world wide web - всемирная паутина). В информация в ней представлена в виде гипертекстовых документов, которые, обычно, содержат отформатированный текст, изображения, аудио и видео.

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

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

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

Для достижения цели курсовой работы были поставлены следующие задачи:

Изучение основных сведений о языке HTML
Ознакомление с элементами языка HTML.

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

Глава 1. Основы языка программирования HTML

Язык HTML

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

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

HTML-теги

HTML-тег пишут в виде угловых скобок, он состоит из имени, за которым, как правило, следует список различных атрибутов (атрибуты – необязательный элемент). Имена и атрибуты являются словами и аббревиатурами из английского алфавита [10].

Теги состоят из двух групп:

Контейнеры (парные теги) состоят из двух компонентов: открывающий (начало) и закрывающий (конец). Название закрывающего и открывающего тега одинаковое. Отличие лишь в том, что перед закрывающим тегом ставят косую черту («/»). В промежутке данных тегов располагаются текст документа и прочие теги. Тот фрагмент документа, который расположен между начальным и конечным тегами форматируется браузером следуя смыслу тега. К примеру, любая информация, текст, который расположен между тегами, будет представлен полужирным начертанием при использовании тега с названием «bold», т.е. жирный. Парные теги также могут быть вложенными друг в друга, но при этом они не могут пересекаться.
Автономные (непарные теги) не имеют конечного компонента. Во время их интерпретации в выводимый документ вставляются те или иные объекты. К примеру, тег <IMG SRC=«picture.png»>, отобразит изображение файла picture.png.

Атрибуты, обычно, разделяют друг от друга пробелами, либо используют символы табуляции, символы перевода строк [2]. Также не имеет значения в какой последовательности записаны атрибуты. Как правило, большинство атрибутов используются в виде пары «название атрибута» = «значение атрибута». Если значением атрибута является более чем одно слово, его необходимо заключить в одинарные или двойные кавычки. Нет необходимости указывать атрибуты в закрывающих компонентах тегов.

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

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

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

Секция тела документа представляет собой основной текст, который предназначен для отображения браузером [11]. Он также содержит в себе теги форматирования, размещения изображений, таблиц и прочих элементов.

Таким образом выглядит HTML-код простейшего документа:

<HTML><TITLE>Заголовок нашей страницы</TITLE></HTML>

Данный код можно набрать в любом текстовом редакторе и сохранен с расширением .htm или, как правило, .html – в таком случае появится возможность открыть документ в браузере. При открытии данного документа браузер выведет страницу, в строке заголовка которой будет написано «Заголовок нашей страницы».

Раздел HEAD

Теги, содержащиеся в секции заголовка, как правило, незаметны для пользователя, между тем, они способны оказывать воздействие на внешний вид документа [7].

Таблица 1.Теги и их назначение

Тег	Назначение
<TITLE>	Данный тег служит для определения имени нашего документа. В большинстве случаев, имя отображается в заголовке окна браузера. Этот элемент является обязательным для любого HTML-документа, а также он может быть указан лишь единожды.
<BASE>	Данный тег служит для указания базового адреса текущего документа (URL), что будет являться отправной точкой с целью расчета относительных адресов внутри документа. Элемент не содержит конечного тега. При его применении должен присутствовать как минимум один аргумент: HREF – служит для определения базового адреса (URL) текущего документа. TARGET – определяет имя фрейма, которое будет использоваться в гиперссылках по умолчанию. Это можно использовать в случаях, когда необходимо открыть все ссылки документа в другом фрейме.
<STYLETYPE=«text/css»>	Данный тег нужен для добавления в документ каскадных таблиц стилей (CSS − Cascade Style Sheet). TYPE – является обязательным атрибутом, значением которого, как правило, является «text/css».
<МЕТА>	Данный тег представляет собой раздел с техническим описанием документа. Этот элемент позволяет внедрять дополнительную информацию в заголовок документа, которая не видна пользователям, но иногда просто необходима для верной индексации страницы роботами поисковых систем. Элемент также не содержит конечного тега. Тег NAME – служит для определения имени мета-записи. Существует множество вариантов заранее определенных имен, одну из которых, можно увидеть в примере ниже. CONTENT – необходим для присваивания значения мета-записи, которая определена в параметре NAME.

Раздел BODY

В разделе BODY содержится основное содержание web-страницы – это текст, изображения, видео и аудио, и прочие элементы [12]. Данный тег может использоваться в документе лишь единожды, и включает в себя следующие атрибуты:

Таблица 2. Атрибуты раздела.

Синтаксис атрибута	Назначение
MARGINHEIGHT=число	Атрибут необходим для определения высоты отступа в пикселах от содержания плавающего фрейма до его верхней и нижней границы. Данный атрибут является устаревшим, вместо него рекомендуется использовать стили.
TOPMARGIN= число	Атрибут служит для определения отступа от верхнего края окна браузера до контента веб-страницы. По умолчанию 10 писелей.
MARGINWIDTH= число	Данный атрибут нужен для выставления отступа между содержимым и правой (левой) границей встроенного фрейма.
LEFTMARGIN= число	Служит для определения величины левого поля (отступа) страницы.
BACKGROUND= URL	Необходим для определения изображения с целью «заливки» фонового рисунка. Значение задается в абсолютные или относительные адреса изображения.
BGCOLOR=цвет	Нужен для определения цвета фона документа. Большинство браузеров поддерживают 16 стандартных имен цветов (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white). Также существует более точный метод - использование кода цвета в виде шестиразрядного шестнадцатеричного числа, которое задает интенсивность красной (первые две цифры), зеленой (следующие две цифры) и синей (последние две цифры) составляющей. Интенсивность каждой составляющей в шестнадцатеричной форме изменяется от 00 до FF. При задании цвета в качестве значения атрибута некоторого тега перед шестнадцатеричным числом ставится символ #. К примеру, запись COLOR=«#0000FF» означает синий цвет Несмотря на то, что существует возможность задать миллионы цветов, необходимо учесть тот факт, что браузеры отображают лишь 256 цветов, причем у каждого браузера своя цветовая палитра. В данной палитре браузер подбирает цвет, ближайший к заданному.
TEXT=цвет	Служит для определения цвета текста в документе.
LINK=цвет	Необходим для определения цвета гиперссылок в документе.
ALINK=цвет	Атрибут определяет цвет подсветки гиперссылок в момент нажатия.
VLINK	Служит для определения цвета посещённых ссылок, т. е., таких ссылок, на которые пользователь уже «нажимал».

Специальные символы HTML

HTML-стандарты предусматривают особый способ кодирования специальных символов, используя escape-последовательности или символьные объекты, позволяющие использовать данные символы в нужных местах документа, не нарушая при этом его структуру [4]. Условно спецсимвол обозначается и начинается символом «&», что содержит в себе непосредственно имя спецсимвола и оканчивается точкой с запятой. Также, вместо имени символа можно использовать соответствующий ASCII-код.

Не стоит забывать о том, что различные браузеры могут по-разному интерпретировать код и имена спецсимволов. Шрифт и кодировка также влияют на вид отображаемых символов [6].

Таблица 3. Существующие спецсимволы HTML.

Название	Символ	ASCII-код	Имя
Табулятор
Перевод строки
Возврат каретки
Пробел
Восклицательный знак	!	!
Кавычка	«	"	"
Знак решетка	#	#
Доллар	$	$
Процент	%	%
Амперсанд	&	&	&
Апостроф	'	'
Скобка левая круглая	(	(
Скобка правая круглая	)	)
Звездочка	*	*
Плюс	+	+
Запятая	,	,
Минус	-	-
Точка	.	.
Косой штрих	/	/
Цифры	0-9	0 -9
Двоеточие	:	:
Точка с запятой	;	;
Меньше	<	<
Равно	=	=
Больше	>	>
Знак вопроса	?	?
Знак обезьянка	@	@
Прописные буквы	A-Z	A -Z
Скобка квадратная левая	[	[
Косой штрих с наклоном вправо	\	\
Скобка квадратная правая	]	]
Степень	^	^
Знак подчеркивания	_	_
Ударение	‘	`
Строчные буквы	a-z	a -z
Фигурная скобка левая	{	{
Вертикальный штрих	\|	\|
Фигурная скобка правая	}	}
Тильда	~	~
Запятая	‚
Флорин	ƒ
Кавычка нижняя правая	&; #132;
Многоточие	…
Крест	†
Двойной крест	‡
Крышка	ˆ
Промилле	‰
Параграф	Š
Символ меньше	<
Большое ОЕ	Œ
Одинарная кавычка слева	‘
Одинарная кавычка справа	’
Кавычка слева	“
Кавычка справа	”
Крупная точка	•
Короткий дефис	-
Длинный дефис	-
Тильда	˜
Торговый знак	™		®
	š
Символ больше	>
Маленькое ое	œ
Большой Y-умлаут	Ÿ
Неразрывный пробел
Перевернутый восклицательный знак	¡	¡	&ixcl;
Цент	¢	¢	¢
Фунт	£	£	£
Валюта	¤	¤	¤
Иена	¥	¥	¥
Прерванный штрих	¦	¦	¦
Параграф/Раздел	§	§	§
Точки умлаута	¨	¨	¨
Копирайт	©	©	©
Порядковое числительное женского рода	ª	ª	ª
Французская кавычка слева	«	«	«
Не/Нет	¬	¬	¬
Разрыв в месте переноса	-
Зарегистрированный торговый знак	®	®	®
Надчеркивание	¯	¯	¯
Градус	°	°	°
Плюс-минус	±	±	±
Вторая степень	²	²	²
Третья степень	³	³	³
Маленькое а с ударением	´	´	&acuate;
Мю	µ	µ	µ
Параграф	¶	¶	¶
Средняя точка	·	·	·
Цедиль	¸	¸	¸
Первая степень	¹	¹	¹
Порядковое числительное мужского рода	º	º	º
Французская кавычка справа	«	»	»
Дробь ¼	¼	¼	¼
Дробь ½	½	½	½
Дробь ¾	¾	¾	¾
Перевернутый вопросительный знак	¿	¿	¿
Большая А с ударением	À	À	À
Большая А с ударением	Á	Á	Á
Большая А с крышкой	Â	Â	Â
Большая А с тильдой	Ã	Ã	Ã
Большая А-умлаут	Ä	Ä	Ä
Большая А с кружком	Å	Å	Å
Большое АЕ	Æ	Æ	Æ
Большая С цедил	Ç	Ç	Ç
Большая Е с ударением	È	È	È
Большая Е с ударением	É	É	É
Большая Е с крышкой	Ê	Ê	Ê
Большая Е-умлаут	Ë	Ë	Ë
Большая I с ударением	Ì	Ì	Ì
Большая I c крышкой	Î	Î	&Icirс;
Большая I-умлаут	Ï	Ï	Ï