Файл: Основы программирования на языке HTML. ТЕХНОЛОГИИ ПРОГРАММИРОВАНИЯ.pdf
Добавлен: 14.03.2024
Просмотров: 40
Скачиваний: 0
Содержание:
Введение
В рамках данной работы мы рассмотрим основной язык программирования для создания 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>
<html lang="en" dir="ltr">
<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.
Синтаксисс
<meta content="...">
Аттрибуты
charset — Задает кодировку документа.
content — Устанавливает значение атрибута, заданного с помощью name или http-equiv.
http-equiv — Предназначен для конвертирования метаэлемента в заголовок HTTP.