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

Современный интернет предлагает множество способов создания сайтов и приложений с использованием продвинутых WYSIWYG (Концепция What You See Is What You Get – Что Ты Видишь, То Ты Получаешь) редакторов, способных на создание конструкций практически любого уровня сложности, что освобождает пользователя от необходимости каких-либо знаний по HTML. Профессиональные программисты, в свою очередь, применяют иные инструменты, такие как React, позволяющие сосредоточится на построении логики программ, избавляя от необходимости полной верстки HTML документов.

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

К неоспоримым преимуществам языка HTML можно отнести его невысокую сложность, предусматривающую низкий порог вхождения, кроссплатформенность, отсутствие необходимости в использовании сложного и тяжелого инструментария (SDK). Начать создавать веб-приложения на языке HTML можно в простом блокноте Windows или любом другом текстовом редакторе. При написании данной работы использовался Notepad++ 7.5.1 (64 bit), в основном за подсветку синтаксиса, причем не только HTML, но и JavaScript, JSX, PHP, SQL, что немаловажно при полном цикле разработки веб-приложения, и удобство работы с несколькими открытыми файлами одновременно.

Огромное количество ресурсов (сайтов и страниц) в сети интернет посвящены языку HTML. По запросу «HTML» поисковая система Google выдает более 25 млрд. результатов, а по запросу «основы HTML» около 42 млн. результатов. Хотя количество и впечатляет, настраивая на оптимизм, дальнейшее изучение материала приводит к выводу об остром дефиците формальных, аутентичных и достоверных источников информации, которые можно было бы использовать в данной работе.

После анализа доступных данных об источниках, удалось выделить наиболее авторитетные и достоверные.

В первую очередь это, разумеется, сайт консорциума W3C (World Wide Web Consortium) https://www.w3.org/, который непосредственно разрабатывает и утверждает стандарты HTML. Весь массив данных о языке HTML так или иначе берет начало на страницах этого ресурса. Язык стандарта, стоит отметить, отличается скупостью. Приложенная к сайту wiki https://www.w3.org/wiki/Main_Page более дружелюбна, но как указано на главной странице не имеет формального статуса, более того может содержать неверную, в принципе, информацию, поскольку открыта для редактирования любым желающим.

Второй по значимости ресурс HTML Living standart https://html.spec.whatwg.org/multipage/, основанный и поддерживаемый Web Hypertext Application Technology Working Group (WHATWG), которую в 2004 году основали Apple, the Mozilla Foundation, and Opera Software. Здесь стоило бы упомянуть, что хотя W3C и WHATWG совместно разрабатывали HTML5, дальнейшее видение развития технологии у них не совпадает. Впрочем, для предмета данной работы это несущественно.

– Третий, заслуживающий доверия источник, безусловно MDN Web Docs (Mozilla Developers Network). Хотя в целом дублирует содержание первых двух источников, выгодно отличается наличием русскоязычного немашинного перевода содержимого.

Несколько слов стоит сказать о создателях браузеров. Ведь в конечном итоге страницы и сайты на HTML будут отображать браузеры, написанные разными командами разработчиков. В наиболее своеобразном понимании стандартов, пожалуй, замечена лишь фирма Microsoft. Для одинаковости отображаемого содержимого в Internet Explorer со всеми другими браузерами, разработчикам приходится изобретать порой весьма неординарные решения. Впрочем, иные просто требуют для доступа к своим ресурсам браузер IE в обязательном порядке.

Но все же можно констатировать, что различия в браузерах не столь серьёзны, тем более для рассмотрения основ. А оригинальность IE постепенно сходит на нет, видимо вместе с популярностью самого браузера компании из Редмонда.

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

Сегодня сложно создать работу, которая бы чем-то дополнила библиотеку по документации HTML, учитывая конкуренцию маститых авторов и издательств. Помимо структуры HTML-документа, здесь и далее рассматривается HTML версии 5, обзор основных тегов и их атрибутов, в данной работе будет сделан акцент на написание собственного веб-приложения, для чего, впрочем, придется несколько расширить рамки предмета исследования. Современные веб-приложения сложно представить без интерактивности, поэтому с основами HTML данная работа рассмотрит и покажет как применить на практике основы JavaScript, а также основы библиотеки jQuery – AJAX, JSON (Начиная с версии 3 считается устаревшим, переехал в стандарт JavaScript). Не будет обойдена вниманием и серверная часть веб-приложения.

Глава 1. Обзор основных элементов языка HTML

Элементы разметки на HTML-странице состоят из заключенных в угловые скобки (< >) дескрипторов - тегов (tags) и их атрибутов. Именно теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. Для файлов, содержащие HTML-документы, приняты расширения *.htm или *.html

В большинстве случаев теги используются парами. Пара состоит из открывающего (start tag) и закрывающего (end tag) тегов. Синтаксис открывающего тега:

<имя_тега [атрибуты]>

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

</имя_тега>

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

имя[=”значение”]

Кавычки при задании аргумента не обязательны и могут быть опущены. Для некоторых атрибутов значение может не указываться. У закрывающего тега атрибутов не бывает.^[^[1]]

Основные элементы.

Основные элементы являются основой любого HTML документа. Эти элементы наблюдаются в исходном коде всех веб-страниц после задания типа документа на первой строке на странице. DOCTYPE определяет, какую версию (X)HTML эта страница использует. Элементы страницы находятся между открывающим тегом <HTML> и закрывающим </ HTML>. Элемент <HTML> называется корневым элементом.^[^[2]]

Краткая структура HTML документа имеет следующий вид^[^[3]]

<!DOCTYPE html>

<html>

<head>

<title>HTML Шаблон</title>

</head>

<body>

<p>Контент здесь.</p>

</body>

</html>

Любой документ HTML 5 начинается с тега <!DOCTYPE html>.

В HTML объявление типа документа тегом "<!DOCTYPE html>" - обязательная преамбула, расположенная в верхней части документа. Единственное предназначение тега - не допустить переключение браузера в так называемый режим совместимости (“quirks mode”) во время рендеринга документа; то есть, тег "<!DOCTYPE html>" гарантирует, что браузер с максимальными усилиями будет следовать соответствующей спецификации, а не использовать другой тип рендеринга, несовместимый с некоторыми спецификациями.^[^[4]]

Тег <HTML> - Корневой элемент HTML-документа. Все остальные элементы должны быть его потомками.^[^[5]]

Продолжает документ тег <head>, он же заголовок, он не отображается на странице в веб-браузере. Он содержит такую информацию, как: название (title) страницы, ссылки на CSS (если необходимо применить к HTML CSS-стили), ссылки на иконки и другие метаданные (данные о самом документе — например, имя автора страницы или важные ключевые слова, которые описывают документ.)^[^[6]]

Элемент <body> представляет собой содержимое HTML документа. В HTML документе может быть представлен только один элемент <body>.^[^[7]]

1.1 Метаданные документа

Метаданные – данные которые описывают данные.^[^[8]] Метаданные содержат информацию о странице. Они включают в себя информацию о стилях, скрипты и данные, чтобы помочь программному обеспечению (поисковые системы, браузеры и т.д.) использовать и отображать страницу. Метаданные для стилей и скрипты могут быть определены на странице или ссылке на другой файл.^[^[9]]

Метаэлементы располагаются внутри тега <head>, их содержимое не отображается на странице документа. Первым элементом обычно указывается кодировка страницы <meta charset=”UTF-8”>, В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать. utf-8 — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком.^[^[10]] Имеет смысл устанавливать эту кодировку для всех веб-страниц. Также тег <meta> может содержать информацию для роботов поисковых систем.^[^[11]]

Элемент <link>, еще один элемент заголовка. Определяет отношение между документом и внешними ресурсами. Наиболее часто используется для указания стилей, расположенных во внешних файлах^[^[12]]

В свою очередь тег <style> может содержать стилевую информацию для документа или его части. По умолчанию стилевые инструкции внутри этого элемента считаются написанными на CSS^[^[13]]

Тег <title> определяет заголовок документа, отображаемый в строке заголовка браузера или в закладках. Данный тег может содержать только текст, любые теги, содержащиеся внутри, игнорируются.^[^[14]]

1.2 Секционирование содержания

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

HTML- тег <address> задает контактные данные для ближайшего родительского <article> или <body> ; В последнем случае применяется ко всему документу, визуально выделяется курсивом.^[^[16]]

HTML элемент Article (<article>) представляет самостоятельную часть документа, страницы, приложения или сайта, предназначенную для дальнейшего распространения или повторного использования. Этот элемент может представлять статью на форуме, статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент содержимого.^[^[17]]

HTML-элемент <aside> представляет собой раздел документа с контентом, косвенно связанным с основным содержимым документа (часто представленным как боковая панель).^[^[18]]

HTML-элемент <header> группирует вводный или навигационный контент. Он может содержать как заголовки, так и прочие элементы: например логотип, форму поиска по сайту и так далее.^[^[19]]

HTML элементы <h1>–<h6> представляют собой 6 уровней заголовков секций. <h1> это наибольший заголовок и <h6> - наименьший.^[^[20]]