Файл: Основы программирования на языке HTML. ТЕХНОЛОГИИ ПРОГРАММИРОВАНИЯ.pdf

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

Помимо этого мы рассмотрим каскадные таблицы стилей (CSS), которые на сегодняшний являются неотъемлемой частью процесса разработки web-страниц.

Что такое HTML

По сути, HTML (HyperText Markup Language (англ.) — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во сети интернет. Большинство web-страниц содержат описывается на языке HTML. Язык HTML интерпретируется web-browserами; полученный в результате интерпретации форматированный текст отображается в виде графических данных, либо упорядоченных древовидных структур.

Язык HTML до 5-й версии определялся как приложение SGML (стандартного обобщённого языка разметки по стандарту ISO 8879).

Во всемирной паутине HTML-страницы, как правило, передаются web-browserам от сервера по протоколам HTTP или HTTPS, в виде простого текста или с использованием шифрования.

В узком понимании HTML является языком гипертекстовой разметки и не более. На почве этого вопроса не одно десятилетие ведутся войны по типу «HTML — это не язык программирования». Если же быть строгим и смотреть на картину глобально, то HTML является математически обоснованным декларативным языком программирования.

Простейшие HTML web-страницы в виде файлов имеют расширение *.html (предпочтительнее) или *.htm

Из чего состоит HTML или что такое теги

Тег (Tag англ.) — это простейшие элементы разметки web-страницы, которую web-browser корректно поймёт и интерпретирует в DOM-дерево, которое в свою очередь будет отображено (при необходимости) на экране монитора. Тег, по сути своей, является функцией, которая принимает в себя аргументы в виде атрибутов и своего тела, а на выходе должно вернуть дерево компонентов и графическое представление этого дерева.

Простой пример тега: <p> внутри этого тега можно поместить текст или другие теги </p>

Количество тегов может вас испугать (около 136 на сегодняшний день), но в большинстве своём используется порядка 40, остальные используются в исключительных случаев или вовсе потеряли свою актуальность и являют собой рудименты прошлого технологий. Практически все теги для стилизации текста и блоков на сегодняшний день желательно не использовать, так как это считается антипаттерном. Вместо этого лучше добавить класс к тегу и на класс навесить CSS стили. Тем самым на сегодняшний день HTML выступает в роли каркаса web страниц и/или отправной точкой в наборе стартовых данных.

Нужно придерживаться правильного синтаксисса для того, чтобы web-browser понял где тег начинается и где заканчивается. Структура тега такова, что у него есть начало и конец. Обычно это два идентичных командных слова написанных латиницей и заключенные в фигурные треугольные скобки, где второе слово дополняется слешем: <body></body>. В некоторых случаях тег является самодостаточным или неспособным содержать дочерние элементы, в таком случае используется одно слово в фигурных скобках, дополненное слешем в конце слова: <hr />

Помимо прочего у многих тегов есть набор собственных атрибутов, которые можно указать в рамках начального слова, разделяя аттрибуты между собой пробелами: <select class=”yourClassNameForSelect” readonly value=”1”></select>

Аттрибуты могут быть типа true/false, в таком случае необязательно указывать его значения через знак присваивания (=); наличие этого атрибута будет расцениваться как true, а отсутствие — false.

Структура базовой документа HTML

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

<!DOCTYPE html>

<head>

<title>My first page!</title>

</head>

<body>

<p>Hello World!</p>

</body>

</html>

После этого откройте страницу в web-browserе и вы увидите вашу web-страницу.

Теперь разберём данные теги по порядку:

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

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

DOCTYPE	Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	Строгий синтаксисс HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	Переходный синтаксисс HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">	В HTML-документе применяются фреймы.
HTML 5
<!DOCTYPE html>	Для всех документов.
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	Строгий синтаксисс XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	Переходный синтаксисс XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">	Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">	Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML.

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

Синтаксисс

<!DOCTYPE [Элемент верхнего уровня] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]">

Параметры

Элемент верхнего уровня — указывает элемент верхнего уровня в документе, для HTML это тег html.

Публичность — объект является публичным (значение PUBLIC) или системным ресурсом (значение SYSTEM), например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC.

Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (International Organization for Standardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и - (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-».

Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в <!DOCTYPE>.

Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD.

Имя — уникальное имя документа для описания DTD.

Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN).

URL — адрес документа с DTD.

<html> — элемент является контеийнером, который заключает в себе все содержимое web-страницы, включая элементы head и body. Открывающий и закрывающий элементы html в документе необязательны, но хороший стиль диктует непременное их использование. Как правило, элемент html идет в документе вторым, после определения типа документа (Document Type Definition, DTD), устанавливаемого через элемент <!DOCTYPE>. Закрывающий элемент html должен всегда стоять в документе последним.

Аттрибуты

title — краткое описание объекта, которое будет видно только на десктопах и при наведении на элемент и задержании курсора на пару секунд. Почти не нужно, так как 90% офисного планктона не знают, что такие подсказочки вообще могут появляться в принципе.

manifest — указывает файл манифеста, необходимый для создания оффлайнового приложения.

xmlns — указывает пространство имен для XHTML-документов.

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

<head> — Элемент head предназначен для хранения других элементов, цель которых — помочь web-browserу в работе с данными. Также внутри контеийнера head находятся метаэлементы, которые используются для хранения информации предназначенной для web-browserов и поисковых систем. Например, механизмы поисковых систем обращаются к метаэлементам для получения описания сайта, ключевых слов и других данных.

Содержимое элемента head не отображается напрямую на web-странице, за исключением элемента title устанавливающего заголовок окна web-страницы.

Внутри контеийнера head допускается размещать следующие элементы: base, basefont, bgsound, link, meta, script, style, title.

Аттрибуты

profile — Указывает адрес профиля метаданных.

Также для этого элемента доступны универсалные аттрибуты.

<body> — Элемент body предназначен для хранения содержания web-страницы (контента), отображаемого в окне web-browserа. Информацию, которую следует выводить в документе, следует располагать именно внутри контеийнера body. К такой информации относится текст, изображения, элементы, скрипты JavaScript и т.д.

Элемент body также применяется для определения цветов ссылок и текста на web-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Тем не менее, большинство атрибутов до сих пор поддерживается разными web-browserами.

Часто элемент body используется для размещения обработчика событий, например, onload, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.

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

Аттрибуты

alink — Устанавливает цвет активной ссылки.

background — Задает фоновый рисунок на web-странице.

bgcolor — Цвет фона web-страницы.

bgproperties — Определяет, прокручивать фон совместно с текстом или нет.

bottommargin — Отступ от нижнего края окна web-browserа до контента.

leftmargin — Отступ по горизонтали от левого края окна web-browserа до контента.

link — Цвет ссылок на web-странице.

rightmargin — Отступ от правого края окна web-browserа до контента.

scroll — Устанавливает, отображать полосы прокрутки или нет.

text — Цвет текста в документе.

topmargin — Отступ от верхнего края окна web-browserа до контента.

vlink — Цвет посещенных ссылок.

У этого элемента ещё имеются универсальные аттрибуты и события.

<p> — Определяет текстовый абзац. Элемент p является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего элемента нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.

Аттрибуты

align — просто определяет как будет выровнен текст.

У этого элемента ещё имеются универсальные аттрибуты и события.

Другие важные теги

Мы рассмотрели несколько элементов с помощью которых можно создать простейшую web-страницу. Но для полноценной разработки web-страниц (и уже тем более web-сайтов и web-приложений) необходимо знать миниамльный набор элементов, указанных далее.

<meta> — определяет метаэлементы, которые используются для хранения информации предназначенной для web-browserов и поисковых систем. Например, механизмы поисковых систем обращаются к метаэлементам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метаэлемент, все они размещаются в контеийнере head. Как правило, аттрибуты любого метаэлемента сводятся к парам «имя=значение», которые определяются ключевыми словами content, name или http-equiv.

Синтаксисс

Аттрибуты

charset — Задает кодировку документа.

content — Устанавливает значение атрибута, заданного с помощью name или http-equiv.

http-equiv — Предназначен для конвертирования метаэлемента в заголовок HTTP.