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

Основы программирования на языке HTML (Секционирование содержания)

Содержание:

Введение

Объект исследования: Язык гипертекстовой разметки документов(HTML).

Предмет исследования: Основы языка программирования HTML

Цель исследования:

- Раскрыть основные сведения о языке;

- Рассмотреть основные теги и их атрибуты;

- Рассмотреть основы CSS и JavaScript;

- Создать простое веб-приложение на HTML;

Бурное развитие широкополосного интернета требует знаний HTML как простого кроссплатформенного способа построения веб-приложений.

Современный интернет предлагает множество способов создания сайтов и приложений с использованием продвинутых 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>

<meta charset="UTF-8">

<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]]

HTML Элемент <hgroup> (HTML Headings Group Element - Элемент Группы Заголовков HTML) представляет заголовок раздела. Он определяет один заголовок, который участвует в cхеме документа как заголовок явно или неявно заданного раздела, к которому он принадлежит.[[21]]

HTML Элемент <main> представляет главный контент тега <body>  документа, части документа или приложения. Область <main> содержит контент, который напрямую относится или раскрывается центральной темой документа или функционалом приложения.[[22]]

HTML-элемент <nav> определяет отдельную секцию документа, назначение которой обозначение ссылок навигации (как внутри текущего документа, так и ведущих на другую страницу). В качестве примера такой секции можно привести меню, якорные ссылки.[[23]]

HTML элемент <section> представляет собой автономную секцию функционала,  содержащуюся внутри HTML-документа, чаще всего с заголовком, в которой нет прочих специфических определяющих элементов, чтобы представить данный функционал.[[24]]

Текстовое содержание

HTML-элемент <blockquote> (от англ. Block Quotation) указывает на то, что заключенный в нем текст является развернутой цитатой. Обычно он (текст) визуально выделяется наклонным. URI на источник цитаты можно указать в атрибуте cite, тогда как текстовое представление источника может быть задано элементом <cite>.[[25]]

Элемент разделения контента HTML (<div>) является базовым контейнером для элементов основного потока (flow content ). Он не влияет на контент или формат пока не стилизован, используя CSS. Являясь "чистым" контейнером, элемент <div> по своему существу не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать.[[26]]

HTML-элемент <dl> (от англ. Description List), служащий контейнером для списка пар терминов и их описаний. Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение).[[27]]

HTML элемент <figcaption> представляет заголовок или легенду для остального контента родительскогоэлемента <figure>.[[28]]

HTML-элемент <figure> представляет самостоятельный контент, часто с подписью (<figcaption>), и обычно используется как единое целое.[[29]]

HTML-элемент <hr> представляет тематический разрыв на уровне параграфов; исторически сложилось, что представляет из себя горизонтальную черту. И хотя может до сих пор отображаться как горизотальная черта, этот элемент сейчас считается семантическим, а не отображаемым. Так что если требуется отобразить его в виде горизонтальной черты, это необходимо сделать в соответствующем CSS файле.[[30]]

HTML элемент <li> используется для создания элементов списка. Он также должен находиться в родительском элементе: нумерованном списке (<ol>), ненумерованном списке (<ul>), или меню (<menu>). В меню и ненумерованых списках, элементы списка обычно отображаются с маркерами в виде круга. В нумерованых списках, они обычно отображаются с маркерами в виде восходящего счетчика слева, например числа или буквы.[[31]]

HTML элемент <ol> представляет собой упорядоченный список элементов, обычно отображаемый в виде нумерованного списка.[[32]]

HTML-элемент <p> определяет собой абзац текста. Абзацы обычно представлены в визуальной среде как блоки текста, которые отделены от смежных блоков пустым пространством (по вертикали) и (или) отступом первой строки. Абзацы являются блочными элементами.[[33]]

HTML элемент <pre> представляет преформатированный текст который отображается точно так, как записан в HTML файле. Как правило для этого используется моноширинный шрифт, пробелы отображаются как есть.[[34]]

HTML <ul> элемент представляет неупорядоченный список, обычно отображаемый как маркированный список.[[35]]

HTML элемент <menu> представляет собой группу команд, которую пользователь может выполнить или активировать.[[36]]

Встроенные текстовые семантики

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

HTML-элемент <a> определяет гиперссылку для перехода на определённое место на странице или на другую страницу в Интернете. Также он может быть использован (в устаревшем варианте) для создания якоря — это место назначения для гиперссылок внутри страницы: так ссылки не ограничены только в перемещении между страницами.[[37]]

HTML-элемент <abbr> «аббревиатура» представляет собой аббревиатуру и, опционально, может показывать её расшифровку. Расшифровка записывается в атрибут title. Иные значения title кроме расшифровки аббревиатуры не допускаются.[[38]]

HTML элемент <b>  является частью текста стилистически отличающейся от нормального текста, не носящий какого-либо специального значения или важности, и как правило выделен жирным шрифтом.[[39]]

Тэг <br> (элемент переноса строки) устанавливает перевод строки в тексте (возврат каретки). Он полезен при написании стихов или адреса, где важно деление на строки. Недопустимо использование <br> для увеличения разрыва между строками в тексте; для этого используется CSS-свойство margin элемента <p>.[[40]]

HTML-элемент <cite> (от англ. Citation) представляет из себя ссылку на источник цитаты. Он должен включать в себя название произведения или URL, который может быть в сокращенном виде в соответствии с правилами, используемых для добавления метаданных цитирования.[[41]]

HTML-элемент <code> отображает содержимое стилизованное под фрагмент компьютерного кода. По умолчанию, содержимое отображается используя моношринный шрифт, установленный в браузере по умолчанию.[[42]]

HTML-элемент <em> помечает текст, на который необходимо сделать акцент. Элемент <em> может быть вложенным.[[43]]

HTML-элемент <i> помечает кусок текста который по некоторым причинам выделяется из основного. Например, технические термины или фразы на иностранном языке. Обычно отображаются курсивом.[[44]]

HTML элемент ввода с клавиатуры (<kbd>) указывает на то, что текст внутри элемента  описывает пользовательский ввод с клавиатуры, голосовой ввод или ввод с использованием любого другого типа устройств ввода текста. По общему соглашению, обозреватель использует моноширный шрифт для отображения содержимого элемента <kbd> по-умолчанию, хотя это и не указывается HTML стандартом явно. [[45]]

HTML элемент <mark> представляет текст, выделенный в справочных целях из-за своей актуальности в определенном контексте. Например, он может быть использован на странице с результатом поиска, в которой выделяется каждый экземпляр искомого слова.[[46]]

HTML-элемент <q>  указывает на короткую строчную цитату. Большинство современных броузеров осуществляют это через постановку ковычек. Этот элемент предназначен для коротких цитат, которые не требуют разрывов строк.[[47]]

HTML-элемент <small> уменьшает шрифт на один размер (например, от большого к среднему, или от среднего к малому) до минимального размера шрифта броузера.  В HTML5, этот элемент предназначен для использования в качестве боковых комментариев и мелкого шрифта, включая авторские права и юридическую информацию.[[48]]

HTML-элемент <span> строковый контейнер, который не представляет ничего. Может использоваться для группировки элементов с целью стилизирования. <span> очень схож с элементом <div>, но <div> это блочный элемент, а <span> внутристрочный.[[49]]

Элемент сильной значимости (<strong>) указывает на то, что его содержание имеет большое значение, серьезность или срочность. Браузеры обычно отображают содержимое жирным шрифтом.[[50]]

Содержание таблиц

Эти элементы используются для создания и обработки табличных данных.

HTML элемент таблицы (<caption>) определяет название (заголовок) таблицы. Если этот элемент используется, он всегда должен быть первым вложенным элементом тэга <table>. Внешний вид и расположение заголовка по отношению к самой таблице может быть изменено с помощью стилей CSS caption-size and text-align.[[51]]

HTML элемент <col> определяет столбец в таблице и используется для определения общей семантики на всех ячейках. Обычно он находится в элементе  <colgroup>.Этот элемент позволяет стилизировать столбцы с использованием CSS, но только несколько атрибутов будут иметь эффект на столбец.[[52]]

HTML элемент <colgroup> определяет группу столбцов внутри таблицы.[[53]]

HTML элемент <table> представляет табличные данные. То есть информацию представленную в двумерной таблице в виде рядов и столбцов ячеек, содержащих данные.[[54]]

HTML элемент <tbody> инкапсулирует набор рядов, показывая что они составляют тело таблицы. Элемент <tbody> наравне с тегами <thead> и <tfoot>, предоставляет полезную семантическую (знаковую) информацию которая может использоваться для отрисовки изображения на экране или печати на принтере, а так же является признаком «хорошей практики».[[55]]

Элемент <td> определяет ячейку таблицы которая содержит данные. Участвует в табличной модели.[[56]]

HTML элемент подвала таблицы (<tfoot>) определяющий набор строк суммирующих столбцы таблицы.[[57]]

HTML элемент <th> определяет ячейку как заголовок группы табличных ячеек. Точная природа этой группы определяется атрибутами scope и headers.[[58]]

HTML элемент <thead> определяет набор рядов составляющих заголовок колонок таблицы.[[59]]

HTML элемент <tr> опредялет ряд ячеек в таблице.[[60]]

Формы

HTML содержит некоторое количество элементов, которые используются вместе для создания форм, которые пользователь может заполнить и отправить на сервер

HTML элемент <button>  представляет нажимаемою кнопку, которая может быть использована в формах или где угодно в документах где нужна простая функциональность обычной кнопки. По умолчанию, HTML кнопки обычно имеют стиль схожий с тем что использует клиентская платформа (ОС), но это можно изменить с использованием CSS.[[61]]

HTML элемент <datalist> содержит набор опций (<option>), доступных для выбора. Выбранное значение будет установлено для элемента <input>, с атрибутом list.[[62]]

HTML элемент <fieldset> используется для группировки нескольких элементов управления внутри web-формы.[[63]]

HTML элемент <form> представляет собой раздел документа, содержащий интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер.[[64]]

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

HTML элемент <label> представляет название для элементов пользовательского интерфейса.[[66]]

HTML-элемент <legend> представляет собой заголовок содержания родительского элемента <fieldset>.[[67]]

HTML элемент <meter>  представляет либо скалярное значение в известных пределах, либо частичное.[[68]]

HTML-элемент <optgroup> позволяет группировать опции, находящиеся внутри элемента <select>[[69]]

HTML элемент <option> используется для определения пункта списка контейнера <select>, элемента <optgroup>, или элемента <datalist>. Элемент <option> может представлять раздел меню всплывающих окон и других перечней или списков HTML документа.[[70]]

HTML элемент <output> это контейнер в который сайт или приложение может помещать результаты вычислений или результат пользовательских действий.[[71]]

HTML элемент <progress> отображает индикатор, показывающий прогресс выполнения задачи или задания. Обычно отображается как стандартный прогресс-бар.[[72]]

HTML тэг <select> представляет собой элемент управления который содержит меню опций:[[73]]

HTML элемент <textarea>  представляет редактируемый многострочный текст, полезно для формы обратной связи, например.[[74]]

Универсальные атрибуты тегов.

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

accesskey позволяет получить доступ к элементу с помощью заданного сочетания клавиш.[[75]]

class определяет имя класса, которое позволяет связать тег со стилевым оформлением.[[76]]

contenteditable сообщает, что элемент доступен для редактирования пользователем.[[77]]

contextmenu устанавливает контекстное меню для элемента.[[78]]

dir задает направление и отображение текста — слева направо или справа налево.[[79]]

hidden скрывает содержимое элемента от просмотра.[[80]]

id указывает имя стилевого идентификатора.[[81]]

lang браузер использует значение параметра для правильного отображения некоторых национальных символов.[[82]]

spellcheck указывает браузеру проверять или нет правописание и грамматику в тексте.[[83]]

style применяется для определения стиля элемента с помощью правил CSS.[[84]]

tabindex устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab.[[85]]

title описывает содержимое элемента в виде всплывающей подсказки.[[86]]

Описание СSS и JavaScript

Хотя рассмотрение CSS и JavaScript не являются предметом данной работы, тем не менее достаточно сложно представить современный веб-сайт без применения этих технологий. Поэтому считаю необходимым в общем осветить и их.

Дизайн Web-узлов — это точное размещение компонентов HTML-страниц относительно друг друга в рабочей области окна браузера.

Недостатки такого определения Web-дизайна очевидны. В нем не учтены ни цвет, ни форма, ни другие свойства компонентов HTML-страниц. Главное в этом определении — показать ограниченность возможностей HTML-разметки. Позиционирование компонентов на странице является одним из самых слабых мест в HTML.

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

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

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

Другой способ управления настройками браузера — программирование на JavaScript. Бурное развитие этого языка позволяет говорить о возможности полного контроля над процессом отображения HTML-страниц. Недостаток JavaScript — отказ от декларативного характера разметки и относительно большой объем кода для переопределения свойств элементов разметки.

Спецификация CSS (Cascading Style Sheets) позволяет остаться в рамках декларативного характера разметки страницы и полностью контролировать форму представления элементов HTML-разметки.

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

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

Наличие подобных возможностей позволяет говорить о CSS как о средстве разделения логической структуры документа и формы его представления. Логическая структура документа определяется элементами HTML-разметки, в то время как форма представления каждого из этих элементов задается CSS-описателем элемента.

CSS позволяет полностью переопределить форму представления элемента разметки по умолчанию. Например, <I>. . . </I> определяет отображение текста курсивом:

<I>Отобразим текст курсивом</I>

Отобразим текст курсивом

А теперь переопределим стиль отображения для элемента разметки I

<I STYLE="text-decoration:underline; font-style:normal;">

Отобразим текст курсивом

</I>

Отобразим текст курсивом

Этот пример показывает, что привычный стиль отображения элементов может быть полностью изменен при помощи CSS. В данной технологии HTML-разметка носит чисто декларативный характер.[[87]]

JavaScript — технология была создана для получения доступа из сценариев ко всем элементам HTML-документа. Иными словами, она предоставляет средства для динамического взаимодействия с пользователем, например для проверки приемлемости адресов электронной почты в формах ввода данных, отображения подсказок наподобие «Вы действительно подразумевали именно это?» и т. д. (хотя с точки зрения безопасности, которая всегда должна реализовываться на веб-сервере, на эту технологию положиться нельзя).

В сочетании с CSS JavaScript закладывает основу мощности динамических веб-страниц, которые изменяются буквально на глазах, в отличие от новой страницы, возвращаемой сервером.

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

К счастью, разработчики в большинстве своем уже взялись за ум и осознали необходимость полной совместимости своих продуктов, чтобы не приходилось создавать код с множеством исключений. Но остаются миллионы экземпляров устаревших браузеров, которыми будут пользоваться на протяжении еще многих лет. Тем не менее и для них существуют решения проблем несовместимости, однако существуют библиотеки и технологии, позволяющие без каких-либо опасений игнорировать существующие различия.[[88]]

Ранее было упомянуто, что изначально JavaScript разрабатывался для того, чтобы получить возможность динамического управления различными элементами, находящимися внутри HTML-документа, и это его предназначение по-прежнему является основным. Но все чаще JavaScript применяется для реализации технологии AJAX. Это понятие используется для обозначения процессов доступа к веб-серверу в фоновом режиме. (Сначала оно означало «асинхронный JavaScript и XML» — Asynchronous JavaScript and XML, но сейчас это определение несколько устарело.)

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

Библиотека jQuery, которую можно использовать, чтобы не изобретать колесо в случае возникновения потребностей в быстродействующем, кросс-браузерном коде для управления веб-страницами. Конечно, доступны и другие подобные среды, но jQuery является самой популярной библиотекой и, исходя из показателей, накопленных за весьма длительный срок ее использования, обладает исключительной надежностью и является основным средством в арсенале многих опытных разработчиков.[[89]]

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

Рис.1 Интерфейс приложения

Здесь не преследовалось цели заменить качественные и мощные инструменты верстки, в том числе онлайновые, а лишь желание попрактиковаться в освоенном материале, а также для того чтобы под рукой всегда был быстрый и простой способ проверить свои идеи на практике посмотреть как визуализируются различные теги языка HTML, как изменяется документ при применении различных стилей. Для написания использовался HTML и JavaScript в виде HTML Application (Приложения HTML .hta)

Листинг программы Simple HTML Editor

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Simple HTML Editor by Koss Sergey</title>

</head>

<body>

<style>

iframe {

height : 640px;

width : 480px;

}

div {

display : block;

}

</style>

<script>

function go()

{

var sc = document.getElementById("scrCode");

var tc = document.getElementById("tframe");

tc.contentWindow.document.open();

tc.contentWindow.document.write(sc.value);

tc.contentWindow.document.close();

}

</script>

<div>

<textarea id=scrCode rows=40 cols=54></textarea>

<button onclick=go()>GO!</button>

<iframe id ="tframe">

</iframe>

</div>

</body>

</html>

Как видно из приведенного листинга, программа всего лишь переносит записанный пользователем код из элемента <textarea> в элемнт <iframe>, где интерпретируется процессором MSHTML уже как HTML-код.

Заключение

Рассмотренные в этой главе элементы и атрибуты HTML являются базовыми элементами необходимыми для построения гипертекстового документа. Запомнить их все и разом невозможно, да и не требуется. И на обучающих сайтах, и в книгах иногда может встретиться утверждение, что по-видимому полностью все аспекты HTML не знает никто (равно как и по мнению Бьерна Страуструпа никто досконально не знает С++). В любом случае, с практикой приходит и опыт, и необходимость искать в справочнике или набирать в поисковой системе очередной тег или атрибут отнимает от продуктивной деятельности все меньше и меньше времени.

Применение CSS и JavaScript совместно с HTML в свою очередь открывает целый новый пласт возможностей динамических веб-страниц.

Глава 2 Использование языка HTML на примере написания простого приложения.

В данной главе мы рассмотрим написанное мной приложение «Домашняя библиотека».

Рис. 2 Интерфейс веб-приложения «Домашняя библиотека»

Полностью программа располагается в интернете по адресу -http://128.0.128.221:8090/

Логин: Serge Пароль: 1234

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

Авторизация

Первое что видит пользователь подключаясь на сайт – страницу авторизации(рис. 3), в которой предлагается ввести логин и пароль. HTML-код этой страницы представлен в приложении на Листинге 2.

Рис.3 Авторизация

Как видно их исходного HTML-кода, для создания этой страницы использовался тег <table> (таблица) с двумя столбцами. Причем в верхнем и нижнем рядах ячейки объединены атрибутом colspan, а в середине ячейки сохранены. Схематически это можно показать следующим образом.

<td colspan=’2’>Авторизация</td>

<td>Логин:</td>

<input name='NAME'></input></td>

<td>Пароль:</td>

<input type='password' name='PASS'></input>

<td colspan=’2’><button type='submit'>LOGIN</button> </td>

Кнопка LOGIN имеет атрибут submit, что означает отправку данных формы на сервер. Открывающий тег формы имеет вид <form method='post' action='index.php'>, где мы используем метод POST для отправки данных на сервер(данные пойдут через массив браузера $_POST[‘имя_переменной’]). Таким образом, значения записанные в поля NAME и PASS будут получены на сервере в виде переменных $_POST['NAME'] и $_POST['PASS'].

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

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

<link rel='stylesheet' href='pwd.css'>

Ссылка на файл, содержащий каскадные таблицы стилей. Его содержание представлено в приложении, в листинге 3.

Первый селектор body меняет цвет фона страницы на светло-голубой. Селектор table определяет границы таблицы как сплошную линию шириной 1 пиксель, а также выравнивает таблицу посередине страницы и задает фоновый цвет таблицы как светло-синий. Селекторы td и button определяют отступы от границы формы, а также для ячеек таблицы определен размер шрифта font-size.

Основной интерфейс

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

Совокупность отступов и разлиновки(границ таблицы) реализованы через CSS (Приложение -- листинг 4).

Интерактивность приложения обеспечивается с помощью JavaScript. Полный текст приведен в Приложении, листинг 7. Изменение пользователем содержимого тегов <input> приводит к вызову обработчика прописанному для события onkeyup. Для каждого тега можно увидеть свой обработчик.

Поиск авторов и книг

Например, для поиска авторов по фамилиям пользователь будет набирать текст в поле

<input id='lastName' onkeyup='quickSearchAuthor()'></input>

При вводе каждой новой буквы будет вызываться обработчик quickSearchAuthor(). Рассмотрим его подробнее

  1. function quickSearchAuthor()  
  2. {  
  3. var fname = document.getElementById("firstName");  
  4. var lname = document.getElementById("lastName");  
  5. var mname = document.getElementById("middleName");  
  6.        
  7. var list = document.getElementById("author_list");  
  8.       
  9. $.post('actions.php',{ACTION:"GET_AUTHORS_BY_NAME", FName:fname.value, 
  10. LName:lname.value, MName:middleName.value}, function(data)  
  11.      {  
  12.          fillList(list, data, ["LastName", "FirstName", "MiddleName"]);  
  13.     });    
  14.  }  

menu.js Фрагмент кода Листинг 5.

Переменные fname, lname и mname будут указателями на соответствующие элементы -- <input> с идентификаторами firstName, lastName, middleName.

Переменная list – указатель на список авторов <select> с идентификатором author_list.

Функция выполняет AJAX-запрос методом POST серверного скрипта actions.php, передавая ему по переменным $_POST[‘ACTION’], $_POST[‘FName’], $_POST[‘LName’], $_POST[’MName’] соответствующие значения.

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

SELECT * FROM authors WHERE LastName LIKE '".$lname."%' AND FirstName LIKE '".$fname."%' AND MiddleName LIKE '".$mname."%' LIMIT 100"

Результат запроса будет сериализирован для передачи клиентскому браузеру:

язык PHP : echo json_encode(array_values($resp));

Браузер, получив ответ в переменную data, передаст управление функции fillList, которая, как следует из названия, заполнит список с идентификатором author_list соответствующими значениями:

  1. function fillList(list, data, dataColumn)  
  2. {  
  3. list.innerHTML="";  
  4. var decoded = JSON.parse(data);  
  5. decoded.forEach(   
  6.     function(elem)   
  7.     {  
  8.         var option = document.createElement("option");  
  9.         if (Array.isArray(dataColumn))  
  10.         {  
  11.             option.text = elem[dataColumn[0]]+" "  
  12.                 +elem[dataColumn[1]]+" "  
  13.                 +elem[dataColumn[2]];  
  14.         }  
  15.     else  
  16.         {  
  17.             option.text = elem[dataColumn];  
  18.         }  
  19.     list.add(option);  
  20.     });  
  21.       
  22.  }  

menu.js Фрагмент кода Листинг 5.

Для этого поле списка сначала отчищается, затем происходит десериализация данных полученных от сервера в понимаемый интерпретатором JavaScript формат, далее для каждого элемента массива данных создается объект option, который уже можно свободно присоединять к элементу управления <select>.

Аналогичным образом выполняется выборка книг по конкретному автору. Для выбора конкретного автора, опять, используется элемент управления <select>:

<select id='author_list' size='20' style='width: 570px'

onchange='authorSelected(this)'></select>

При выборе автора, происходит событие onchange, вызывающее обработчик authorSelected(this), где аргумент this – указатель на вызывающий объект, в данном случае <select id=’author_list>:

  1. function authorSelected(list)  
  2.  {  
  3.      var fio = list.value.split(" ");  
  4.      var book_list = document.getElementById("book_list");  
  5.      $.post('actions.php',{ACTION:"GET_BOOKS_BY_AUTHOR", LName:fio[0], FName:fio[1], 
  6. MName:fio[2]}, function(data)  
  7.      {  
  8.          bookListWithIds=JSON.parse(data);    
  9.          fillList(book_list, data, "Title");  
  10.     });    
  11.  }  

menu.js Фрагмент кода Листинг 5.

Обрабочтик разбивает ФИО автора на массив, используя в качестве разделителя символ пробела, определяет указатель на список книг book_list. Далее следует уже знакомый нам вызов AJAX серверного скрипта actions.php методом POST, с той лишь разницей, что теперь мы пересылаем не одну, а целых 3 переменных.

Код скрипта actions.php представлен в Листинге 6. Результатом его работы будет сериализированные даные, содержащие список книг конкретного автора, расположенные в переменной data.

Десериализируем данные с использованием JSON.parse() и заполняем ими список book_list, причем используя для этого тот же метод fillList что и для заполнения списка авторов. Разница здесь в том, что при заполнении списком авторов третий аргумент метода fillList представляет собой массив(Фамилия, Имя, Отчество), а при заполнении списка книг – массивом этот аргумент не явлется. Метод fillList проверяет это обстоятельство и действует соответственно.

Отметим что результат, возвращенный с сервера, будет сохранен в глобальной переменной bookListWithIds, для двльнейшего использования.

Выбор конкретной книги в списке обрабатывается функцией bookSelected(list), функционал котрой сводится к двум важным вещам –

  1. отчистка элемента <div id=’d_link’>, где будет размещена ссылка на скачивание книги.
  2. var dl = document.getElementById("d_link");  
  3.     if (dl.innerHTML!="") dl.innerHTML="";  
  4. помещение в глобальную переменную selectedID индекса выделенного пользоватлеме элемента <select>:
    1. selectedID = list.selectedIndex;  

На последнем этапе, после выбора автора и книги, пользователь желает её скачать – для этого служит кнопка «Получить ссылку на скачивание»:

<button onclick='downloadBook()'>Получить ссылку на скачивание</button>

Обработчик downloadBook() имеет следующий вид:

  1. function downloadBook()  
  2.  {  
  3.      $.post('actions.php',{ACTION:"DOWNLOAD_BOOK", 
  4. ID:bookListWithIds[selectedID]['BookID']},   
  5.      function(data)  
  6.      {  
  7.          var dl = document.getElementById("d_link");  
  8.          dl.innerHTML="<p><a href='"+data+"' download>СКАЧАТЬ</a>";  
  9.        
  10.     });        
  11.  }  

menu.js Фрагмент кода Листинг 5.

В данном случае на сервер отправляется ID книги, хранящийся в массиве bookListWithIds по индексу выбранному пользователем в списке <select> selectedID. Полученное имя файла записываем в элмент <div id=’d_link’>, оформляя как ссылку для скачивания <a href download>, кликнув по которой пользователь скачает нужную книгу.

На сервере по ID книги из базы данных извлекается информация о папке с именем архива и имени файла с книгой. Запускаем архиватор и извлекаем нужный файл в папку, доступную из интернета, в нашем случае – Apache24\htdocs.

Сериализировать в данном случае одно название файла нет необходимости, поэтому через echo передаем его браузеру как есть.

  1. public static function DownloadBook($id)  
  2. {  
  3.     $req = "SELECT * FROM books WHERE BookID='".$id."'";  
  4.     $resp=DBase::Request($req);  
  5.       
  6.     $folder = $resp[0]['Folder'];  
  7.     $file = $resp[0]['FileName'].".fb2";  
  8.       
  9.     $arch = 'D:\\fb2.Flibusta.Net\\'.$folder;  
  10.     $cmd = "C:\\7Zip\\7z.exe e ".$arch." -oc:\\Apache24\\htdocs\\ ".$file." -r >nul";  
  11.     $null=system($cmd, $ret);         
  12.     echo($file);  
  13. }  

actions.php Фрагмент кода Листинг 6

С этим фрагментом связана одна сложность. По какой-то причине, консольный вывод результата работы 7z.exe, попадает в буфер echo() поэтому необходимо либо принудительно отчищать его, либо, как в данном случае, направлять консольный вывод в nul.

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

ЗАКЛЮЧЕНИЕ

Таким образом, проведенная работа демонстрирует освоение автором основ HTML, а также основ смежных технологий(CSS, JavaScript, PHP, MySQL), необходимых для построения полнофункциональных веб-сайтов и веб-приложений. Продемонстрированы основы концепции разработки веб-приложения на всех этапах – дизайн пользовательского интерфейса, серверные скрипты, клиент-серверное взаимодействие.

Библиография

Печатные издания

Лыткина, Е.А. Основы языка HTML : учебное пособие / Е.А. Лыткина, А.Г. Глотова ; Министерство образования и науки Российской Федерации, Федеральное государственное автономное образовательное учреждение высшего профессионального образования Северный (Арктический) федеральный университет им. М.В. Ломоносова. - Архангельск : САФУ, 2014. 104 стр.

П. Храмцов, С. Брик, А. Русак, А. Сурин. / Применение каскадных таблиц стилей (CSS) : курс - 2-е изд., исправ. - Москва : Национальный Открытый Университет «ИНТУИТ», 2016. - 82 с. : ил. - (Основы информационных технологий). 512 стр.

Никсон Р. / Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. 4-е изд. — СПб.: Питер, 2016 С.41 изд. — СПб.: Питер, 2016 768 стр.

Ресурсы в сети Интернет

Основные элементы // Веб-документация MDN: сайт. 2016. 7 авг.

URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element#Основные_элементы

(дата обращения: 23.10.2018)

HTML5 Reference / Basic Templates// Консорциум W3: сайт. 2010. 9 авг.

URL:// https://dev.w3.org/html5/html-author/#basic-templates (дата обращения: 23.10.2018)

Doctype // Веб-документация MDN: сайт. 2018. 8 фев.

URL:// https://developer.mozilla.org/ru/docs/Словарь/Doctype/ (дата обращения: 23.10.2018)

<html> // Веб-документация MDN: сайт. 2015. 29 апр.

URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element/html (дата обращения: 23.10.2018)

Что такое заголовок? Метаданные в HTML // Веб-документация MDN: сайт. 2018. 27 сен.

URL:// https://developer.mozilla.org/ru/docs/Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML/

(Дата обращения: 23.10.2018)

<body> // Веб-документация MDN: сайт. 2017. 13 мар.

URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element/title (дата обращения: 23.10.2018)

Что такое заголовок? Метаданные в HTML // Веб-документация MDN: сайт. 2018. 27 сен.

URL:// https://developer.mozilla.org/ru/docs/Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML/

(Дата обращения: 23.10.2018)

Метаданные документа // Веб-документация MDN: сайт. 2016. авг.

URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element#Метаданные_документа

(дата обращения: 23.10.2018)

Что такое заголовок? Метаданные в HTML // Веб-документация MDN: сайт. 2018. 27 сен.

URL:// https://developer.mozilla.org/ru/docs/Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML/

(Дата обращения: 23.10.2018)

Яндекс Помощь // Яндекс Вебмастер// Использование мета-тегов и других HTML

URL:// https://yandex.ru/support/webmaster/controlling-robot/html.html

<link>: The External Resourse Link element // Веб-документация MDN: сайт. 2018. 9 окт.

URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element/link (дата обращения: 23.10.2018)

<style> // Веб-документация MDN: сайт. 2018. 22 авг.

URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element/style (дата обращения: 23.10.2018)

<title> // Веб-документация MDN: сайт. 2018. 2 апр.

URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element/title (дата обращения: 23.10.2018)

Секционирование содержания // Веб-документация MDN: сайт. 2018. 9 окт.

URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element/ (дата обращения: 23.10.2018)

<address> // Веб-документация MDN: сайт. 2018. 29 янв.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/address (дата обращения: 24.10.2018)

<article> // Веб-документация MDN: сайт. 2017. 30 янв.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/article (дата обращения: 24.10.2018)

<aside> // Веб-документация MDN: сайт. 2017. 4 сен.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/aside (дата обращения: 24.10.2018)

<header> // Веб-документация MDN: сайт. 2018. 22 июл.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/header (дата обращения: 24.10.2018)

<h1>-<h6> // Веб-документация MDN: сайт. 2018. 9 мар.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/Heading_Elements (дата обращения: 24.10.2018)

<hgroup> // Веб-документация MDN: сайт. 2018. 31 янв.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/hgroup (дата обращения: 24.10.2018)

<main> // Веб-документация MDN: сайт. 2018. 13 окт.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/main (дата обращения: 24.10.2018)

<nav> // Веб-документация MDN: сайт. 2018. 31 мар.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/nav (дата обращения: 24.10.2018)

<section> // Веб-документация MDN: сайт. 2018. 31 мар.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/section (дата обращения: 24.10.2018)

<blockqoute> // Веб-документация MDN: сайт. 2016. 18 июл.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote (дата обращения: 24.10.2018)

<div> // Веб-документация MDN: сайт. 2016. 18 июл.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/div (дата обращения: 24.10.2018)

<dl> // Веб-документация MDN: сайт. 2016. 13 июл.

https://developer.mozilla.org/ru/docs/Web/HTML/Element/dl (дата обращения: 24.10.2018)

<figcaption> // Веб-документация MDN: сайт

https://developer.mozilla.org/ru/docs/Web/HTML/Element/figcaption

<figure> // Веб-документация MDN: сайт

https://developer.mozilla.org/ru/docs/Web/HTML/Element/figure

<hr> // Веб-документация MDN: сайт

https://developer.mozilla.org/ru/docs/Web/HTML/Element/hr

<li> // Веб-документация MDN: сайт

https://developer.mozilla.org/ru/docs/Web/HTML/Element/li

<ol> // Веб-документация MDN: сайт

https://developer.mozilla.org/ru/docs/Web/HTML/Element/ol

<p> // Веб-документация MDN: сайт

https://developer.mozilla.org/ru/docs/Web/HTML/Element/p

<pre> // Веб-документация MDN: сайт

https://developer.mozilla.org/ru/docs/Web/HTML/Element/pre

<ul> // Веб-документация MDN: сайт

https://developer.mozilla.org/ru/docs/Web/HTML/Element/ul

<menu> // Веб-документация MDN: сайт

https://developer.mozilla.org/ru/docs/Web/HTML/Element/menu

<a> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

<abbr> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr

<b> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

<br> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

<cite> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite

<code> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code

<em> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

<i> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

<kbd> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd

<mark> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark

<q> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q

<small> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small

<span> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

<strong> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

<caption> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption

<col> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

<colgroup> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup

<table> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

<tbody> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody

<td> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td

<tfoot> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot

<th> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th

<thead> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead

<tr> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr

<button> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

<datalist> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

<fieldset> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

<form> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

<input> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

<label> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

<legend> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend

<meter> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter

<optgrouop> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup

<option> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

<output> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output

<progress> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress

<select> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

<textarea> // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

accesskey // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey

class // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class

contenteditable // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

contextmenu // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contextmenu

dir // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir

hidden // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

id // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

lang // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang

spellcheck // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck

style // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style

tabindex // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

title // Веб-документация MDN: сайт

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title

Приложения

Листинг 1.

Главное меню приложения

  1. <!DOCTYPE html>  
  2. <HEAD>  
  3.     <meta charset='utf-8'>  
  4.     <title>Library</title>  
  5.     <script src='jquery-3.3.1.min.js'></script>  
  6.     <script src='menu.js'></script>  
  7.     <link rel='stylesheet' href='menu.css'>  
  8. </head>  
  9. <body>  
  10.     <h1>Домашняя веб-библиотека Косса Сергея. </h1>  
  11.     <table>  
  12.     <tr align='center'>  
  13.         <td colspan='2' class='top_caption'><h2>Книга</h2></td>  
  14.         <td colspan='6' class='top_caption'><h2>Автор</h2></td>  
  15.     </tr>  
  16.     <tr>  
  17.         <td class='name_book' class='name_book'>Название:</td>  
  18.         <td class='name_book_e' width='300'>  
  19.             <input size='40' id='book_search' onkeyup='quickSearchBook(this)'>  
  20.             </input>  
  21.         </td>  
  22.         <td class='last_name'>Фамилия:</td>  
  23.         <td class='last_name_e'>  
  24.             <input id='lastName' onkeyup='quickSearchAuthor()'>  
  25.             </input>  
  26.         </td>  
  27.         <td class='first_name'>Имя:</td>  
  28.         <td class='first_name_e'>  
  29.             <input id='firstName' onkeyup='quickSearchAuthor()'>  
  30.             </input>  
  31.         </td>  
  32.         <td class='middle_name'>Отчество:</td>  
  33.         <td class='middle_name_e'>  
  34.             <input id='middleName' onkeyup='quickSearchAuthor()'>  
  35.             </input>  
  36.         </td>                           
  37.     </tr>  
  38.     <tr align='center'>  
  39.         <td colspan='2' style='border:1px black solid'>  
  40.             <select id='book_list' size='20' style='width: 370px' onchange='bookSelected(this)'>  
  41.             </select>  
  42.         </td>  
  43.         <td colspan='6' style='border:1px black solid'>  
  44.             <select id='author_list' size='20' style='width: 570px' onchange='authorSelected(this)'>  
  45.             </select>  
  46.         </td>  
  47.     </tr>  
  48.     <tr align='center'>  
  49.         <td colspan='2' style='border:1px solid black;'>  
  50.             <button onclick='downloadBook()'>  
  51.                 Получить ссылку на скачивание  
  52.             </button>  
  53.             <div id='d_link'>  
  54.             </div>  
  55.         </td>  
  56.         <td colspan='2' style='border:1px solid black;'>  
  57.             <button onclick='showAuthorBooks()'>  
  58.                 Найти автора  
  59.             </button>  
  60.         </td>  
  61.         <td colspan='2' style='border:1px solid black;'>  
  62.             <button onclick='clearAll()'>  
  63.                 Сбросить  
  64.             </button>  
  65.         </td>  
  66.         <td colspan='2' style='border:1px solid black;'>  
  67.             <button onclick='logout()'>  
  68.                 LOGOUT  
  69.             </button>  
  70.         </td>  
  71.     </tr>  
  72.     </table>  
  73. </body>  
  74. </html>  

Листинг 2

Авторизация

  1. <!DOCTYPE html>  
  2. <HEAD>  
  3.     <meta charset='utf-8'>  
  4.     <title>Authorization</title>  
  5.     <link rel='stylesheet' href='pwd.css'>  
  6. </HEAD>  
  7. <BODY>  
  8.     <table>  
  9.         <form method='post' action='index.php'>  
  10.             <tr align='center' >  
  11.                 <td colspan='2' >Авторизация</td>  
  12.             </tr>  
  13.             <tr>  
  14.                 <td>Логин:</td>  
  15.                 <td>  
  16.                     <input name='NAME'></input></td>  
  17.             </tr>  
  18.             <tr>  
  19.                 <td>Пароль:</td>  
  20.                 <td>  
  21.                     <input type='password' name='PASS'>  
  22.                     </input>  
  23.                 </td>  
  24.             </tr>  
  25.             <tr align='center'>  
  26.                 <td colspan='2'>  
  27.                     <input type='submit' value='LOGIN'></button>  
  28.                 </td>  
  29.             </tr>  
  30.         </form>  
  31.     </table>  
  32. </BODY>  
  33. </html>         

Листинг 3

Каскадная таблица стилей pwd.css

  1. body {  
  2.     background-color    : lightcyan;  
  3. }  
  4. table {  
  5.     border              : 1px solid black;  
  6.     margin              : auto;  
  7.     background-color    : lightblue;  
  8.     }  
  9. td {  
  10.     padding             : 20px;  
  11.     font-size           : 18pt;  
  12.     }  
  13. button {  
  14.     padding-left        : 80px;  
  15.     padding-right       : 80px;  
  16.     }  

Листинг 4

Каскадная таблица стилей menu.css

  1. table {  
  2.     background-color    : #b3d9ff;  
  3.     border-collapse     : collapse;  
  4.           
  5. }  
  6. .top_caption {  
  7.     border-left     : 1px solid black;  
  8.     border-top      : 1px solid black;  
  9.     border-right        : 1px solid black;  
  10. }  
  11. .name_book {  
  12.     padding-left        : 10px;  
  13.     padding-bottom      : 10px;  
  14.     padding-top     : 10px;  
  15.     border-left     : 1px solid black;  
  16.     border-bottom       : 1px solid black;  
  17. }  
  18.           
  19. .name_book_e {  
  20.     border-bottom       : 1px solid black;  
  21.     border-right        : 1px solid black;  
  22. }  
  23. .last_name {  
  24.     padding-left        : 10px;  
  25.     border-bottom       : 1px solid black;  
  26. }  
  27. .last_name_e {  
  28.     border-bottom       : 1px solid black;  
  29. }  
  30.               
  31. .first_name {  
  32.     padding-left        : 10px;  
  33.     border-bottom       : 1px solid black;  
  34. }  
  35. .first_name_e {  
  36.     border-bottom       : 1px solid black;  
  37. }  
  38.           
  39. .middle_name {  
  40.     padding-left        : 10px;  
  41.     border-bottom       : 1px solid black;  
  42. }  
  43.           
  44. .middle_name_e {  
  45.     border-bottom       : 1px solid black;  
  46.     border-right        : 1px solid black;  
  47. }  

Листинг 5

menu.js

  1.  var bookListWithIds;  
  2.  var selectedID;  
  3.    
  4.  function quickSearchBook(book_search)  
  5.  {  
  6.       
  7.                
  8.      $.post('actions.php',{ACTION:"GET_BOOKS_BY_NAMES", Book:book_search.value}, function(data)  
  9.          {  
  10.              var list = document.getElementById("book_list");  
  11.              fillList(list, data, "Title");  
  12.          });  
  13.  }  
  14.    
  15.    
  16.  function fillList(list, data, dataColumn)  
  17.  {  
  18.      list.innerHTML="";  
  19.      var decoded = JSON.parse(data);  
  20.      decoded.forEach( function(elem)   
  21.      {  
  22.          var option = document.createElement("option");  
  23.          if (Array.isArray(dataColumn))  
  24.          {  
  25.              option.text = elem[dataColumn[0]]+" "+elem[dataColumn[1]]+" "+elem[dataColumn[2]];  
  26.          }  
  27.          else  
  28.          {  
  29.             option.text = elem[dataColumn];  
  30.          }  
  31.          list.add(option);  
  32.            
  33.            
  34.      });  
  35.       
  36.  }  
  37.    
  38.    
  39.  function bookSelected(list)  
  40.  {  
  41.      var fname = document.getElementById("firstName");  
  42.      var lname = document.getElementById("lastName");  
  43.      var mname = document.getElementById("middleName");  
  44.        
  45.        
  46.      selectedID = list.selectedIndex;  
  47.            
  48.     $.post('actions.php',{ACTION:"GET_AUTHOR_BY_BOOK",Book:list.value}, function(data)  
  49.          {  
  50.                 var decoded = JSON.parse(data);  
  51.                 fname.value = decoded[0]['FirstName'];  
  52.                 lname.value = decoded[0]['LastName'];  
  53.                 mname.value = decoded[0]['MiddleName'];  
  54.                   
  55.         });  
  56.     var dl = document.getElementById("d_link");  
  57.     if (dl.innerHTML!="") dl.innerHTML="";  
  58.   
  59.  }  
  60.    
  61.  function quickSearchAuthor()  
  62.  {  
  63.      var fname = document.getElementById("firstName");  
  64.      var lname = document.getElementById("lastName");  
  65.      var mname = document.getElementById("middleName");  
  66.        
  67.      var list = document.getElementById("author_list");  
  68.       
  69.     $.post('actions.php',{ACTION:"GET_AUTHORS_BY_NAME", FName:fname.value, LName:lname.value, MName:middleName.value}, function(data)  
  70.      {  
  71.          fillList(list, data, ["LastName", "FirstName", "MiddleName"]);  
  72.     });    
  73.  }  
  74.    
  75.  function authorSelected(list)  
  76.  {  
  77.      var fio = list.value.split(" ");  
  78.      var book_list = document.getElementById("book_list");  
  79.      $.post('actions.php',{ACTION:"GET_BOOKS_BY_AUTHOR", LName:fio[0], FName:fio[1], MName:fio[2]}, function(data)  
  80.      {  
  81.          bookListWithIds=JSON.parse(data);     
  82.          fillList(book_list, data, "Title");  
  83.     });    
  84.  }  
  85.    
  86.  function downloadBook()  
  87.  {  
  88.      $.post('actions.php',{ACTION:"DOWNLOAD_BOOK", ID:bookListWithIds[selectedID]['BookID']}, function(data)  
  89.      {  
  90.          var dl = document.getElementById("d_link");  
  91.          var i = data.indexOf("!FILE:!");  
  92.          var f = data.substring(i+7);  
  93.          dl.innerHTML="<p><a href='"+f+"' download>СКАЧАТЬ</a>";  
  94.        
  95.     });        
  96.  }  
  97.    
  98.  function showAuthorBooks()  
  99.  {  
  100.     quickSearchAuthor();   
  101.  }  
  102.    
  103.  function clearAll()  
  104.  {  
  105.     document.getElementById("firstName").value = "";  
  106.     document.getElementById("lastName").value = "";  
  107.     document.getElementById("middleName").value = "";      
  108.  }  
  109.    
  110. function logout()  
  111. {  
  112.     $.post('actions.php',{ACTION:"LOGOUT"}, function(data)  
  113.     {  
  114.         window.location.replace('index.php');  
  115.     });            
  116.  }  

Листинг 6

actions.php

  1. <?php  
  2.   
  3. include 'auth.inc';  
  4.   
  5. class Actions  
  6. {  
  7.     public static function GetBooksByName($searchPattern)  
  8.     {  
  9.         $req="SELECT * FROM books WHERE title LIKE '%".$_POST['Book']."%' 
  10. ORDER BY title LIMIT 100";  
  11.         $resp = DBase::Request($req);  
  12.         echo json_encode(array_values($resp));        
  13.     }  
  14.     public static function GetAuthorByBook($book)  
  15.     {  
  16.         $req="SELECT BookID FROM books WHERE title='".$book."'";  
  17.         $resp = DBase::Request($req);  
  18.         $bid = $resp[0]['BookID'];  
  19.   
  20.           
  21.         $req="SELECT AuthorID FROM author_list WHERE BookID='".$bid."'";  
  22.         $resp = DBase::Request($req);  
  23.   
  24.         $aid = $resp[0]['AuthorID'];  
  25.   
  26.         $req="SELECT * FROM authors WHERE AuthorID='".$aid."'";  
  27.         $resp = DBase::Request($req);  
  28.   
  29.         echo json_encode(array_values($resp));        
  30.     }  
  31.     public static function GetAuthorsByName($lname, $fname, $mname)  
  32.     {  
  33.         $req="SELECT * FROM authors WHERE LastName LIKE '".$lname."%' 
  34. AND FirstName LIKE '".$fname."%' AND MiddleName LIKE '".$mname."%' LIMIT 100";   
  35.         $resp=DBase::Request($req);  
  36.   
  37.         echo json_encode(array_values($resp));        
  38.     }  
  39.     public static function GetBooksByAuthor($lname, $fname, $mname)  
  40.     {  
  41.         $req="SELECT AuthorID FROM authors WHERE LastName LIKE '".$lname."%' AND 
  42. FirstName LIKE '".$fname."%' AND MiddleName LIKE '".$mname."%' LIMIT 100";   
  43.         $resp=DBase::Request($req);  
  44.         $aid = $resp[0]['AuthorID'];  
  45.           
  46.         $req="SELECT BookID FROM author_list WHERE AuthorID='".$aid."'";  
  47.         $resp=DBase::Request($req);  
  48.           
  49.         $bids=$resp;  
  50.           
  51.         $req="SELECT Title FROM books WHERE BookID='".$bids[0]['BookID']."'";  
  52.         $titles=array();  
  53.           
  54.         ini_set('max_execution_time', 300);  
  55.           
  56.         for ($i=0; $i<count($bids); $i++)  
  57.         {  
  58.             $req="SELECT * FROM books WHERE BookID='".$bids[$i]['BookID']."'";  
  59.             $resp=DBase::Request($req);  
  60.             array_push($titles, $resp[0]);  
  61.         }  
  62.         echo json_encode(array_values($titles));          
  63.     }  
  64.     public static function DownloadBook($id)  
  65.     {  
  66.         $req = "SELECT * FROM books WHERE BookID='".$id."'";  
  67.         $resp=DBase::Request($req);  
  68.           
  69.         $folder = $resp[0]['Folder'];  
  70.         $file = $resp[0]['FileName'].".fb2";  
  71.           
  72.         $arch = 'D:\\fb2.Flibusta.Net\\'.$folder;  
  73.         $cmd = "C:\\7Zip\\7z.exe e ".$arch." -oc:\\Apache24\\htdocs\\ ".$file.
  74. " -r > nul";  
  75.         $null=system($cmd, $ret);         
  76.         echo($file);  
  77.     }  
  78. }  
  79.   
  80. $action = $_POST['ACTION'];  
  81.   
  82. switch($action)  
  83. {  
  84.     case "GET_BOOKS_BY_NAMES":  
  85.                 Actions::GetBooksByName($_POST['Book']);  
  86.                 break;  
  87.     case "GET_AUTHOR_BY_BOOK":  
  88.                 Actions::GetAuthorByBook($_POST['Book']);  
  89.                 break;  
  90.     case "GET_AUTHORS_BY_NAME":  
  91.                 if (!isset($_POST['MName'])): $mname="";  
  92.                 else: $mname=$_POST['MName'];  
  93.                 Endif;  
  94.                 Actions::GetAuthorsByName($_POST['LName'], $_POST['FName'], $mname);  
  95.                 break;  
  96.     case "GET_BOOKS_BY_AUTHOR":  
  97.                 if (!isset($_POST['MName'])): $mname="";  
  98.                 else: $mname=$_POST['MName'];  
  99.                 Endif;  
  100.          Actions::GetBooksByAuthor($_POST['LName'], $_POST['FName'], $mname);  
  101.                 break;  
  102.     case "DOWNLOAD_BOOK":  
  103.                 Actions::DownloadBook($_POST['ID']);  
  104.                 break;  
  105.     case "LOGOUT":  
  106.                 DBase::DeleteOutdatedSessions(True);  
  107.                 break;  
  108.     default:      
  109.                 break;  
  110. }  
  111. ?>  
  113. Лыткина, Е.А. Основы языка HTML : учебное пособие / Е.А. Лыткина, А.Г. Глотова ; Министерство образования и науки Российской Федерации, Федеральное государственное автономное образовательное учреждение высшего профессионального образования Северный (Арктический) федеральный университет им. М.В. Ломоносова. - Архангельск : САФУ, 2014. С.6 ↑

  1. Основные элементы // Веб-документация MDN: сайт. 2016. 7 авг.

    URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element#Основные_элементы

    (дата обращения: 23.10.2018) ↑

  2. HTML5 Reference / Basic Templates// Консорциум W3: сайт. 2010. 9 авг.

    URL:// https://dev.w3.org/html5/html-author/#basic-templates (дата обращения: 23.10.2018) ↑

  3. Doctype // Веб-документация MDN: сайт. 2018. 8 фев.

    URL:// https://developer.mozilla.org/ru/docs/Словарь/Doctype/ (дата обращения: 23.10.2018) ↑

  4. <html> // Веб-документация MDN: сайт. 2015. 29 апр.

    URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element/html (дата обращения: 23.10.2018) ↑

  5. Что такое заголовок? Метаданные в HTML // Веб-документация MDN: сайт. 2018. 27 сен.

    URL:// https://developer.mozilla.org/ru/docs/Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML/

    (Дата обращения: 23.10.2018) ↑

  6. <body> // Веб-документация MDN: сайт. 2017. 13 мар.

    URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element/title (дата обращения: 23.10.2018) ↑

  7. Что такое заголовок? Метаданные в HTML // Веб-документация MDN: сайт. 2018. 27 сен.

    URL:// https://developer.mozilla.org/ru/docs/Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML/

    (Дата обращения: 23.10.2018) ↑

  8. Метаданные документа // Веб-документация MDN: сайт. 2016. авг.

    URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element#Метаданные_документа

    (дата обращения: 23.10.2018) ↑

  9. Что такое заголовок? Метаданные в HTML // Веб-документация MDN: сайт. 2018. 27 сен.

    URL:// https://developer.mozilla.org/ru/docs/Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML/

    (Дата обращения: 23.10.2018) ↑

  10. Яндекс Помощь // Яндекс Вебмастер// Использование мета-тегов и других HTML

    URL:// https://yandex.ru/support/webmaster/controlling-robot/html.html ↑

  11. <link>: The External Resourse Link element // Веб-документация MDN: сайт. 2018. 9 окт.

    URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element/link (дата обращения: 23.10.2018) ↑

  12. <style> // Веб-документация MDN: сайт. 2018. 22 авг.

    URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element/style (дата обращения: 23.10.2018) ↑

  13. <title> // Веб-документация MDN: сайт. 2018. 2 апр.

    URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element/title (дата обращения: 23.10.2018) ↑

  14. Секционирование содержания // Веб-документация MDN: сайт. 2018. 9 окт.

    URL:// https://developer.mozilla.org/ru/docs/Web/HTML/Element/ (дата обращения: 23.10.2018) ↑

  15. <address> // Веб-документация MDN: сайт. 2018. 29 янв.

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/address (дата обращения: 24.10.2018) ↑

  16. <article> // Веб-документация MDN: сайт. 2017. 30 янв.

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/article (дата обращения: 24.10.2018) ↑

  17. <aside> // Веб-документация MDN: сайт. 2017. 4 сен.

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/aside (дата обращения: 24.10.2018) ↑

  18. <header> // Веб-документация MDN: сайт. 2018. 22 июл.

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/header (дата обращения: 24.10.2018) ↑

  19. <h1>-<h6> // Веб-документация MDN: сайт. 2018. 9 мар.

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/Heading_Elements (дата обращения: 24.10.2018) ↑

  20. <hgroup> // Веб-документация MDN: сайт. 2018. 31 янв.

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/hgroup (дата обращения: 24.10.2018) ↑

  21. <main> // Веб-документация MDN: сайт. 2018. 13 окт.

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/main (дата обращения: 24.10.2018) ↑

  22. <nav> // Веб-документация MDN: сайт. 2018. 31 мар.

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/nav (дата обращения: 24.10.2018) ↑

  23. <section> // Веб-документация MDN: сайт. 2018. 31 мар.

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/section (дата обращения: 24.10.2018) ↑

  24. <blockqoute> // Веб-документация MDN: сайт. 2016. 18 июл.

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote (дата обращения: 24.10.2018) ↑

  25. <div> // Веб-документация MDN: сайт. 2016. 18 июл.

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/div (дата обращения: 24.10.2018) ↑

  26. <dl> // Веб-документация MDN: сайт. 2016. 13 июл.

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/dl (дата обращения: 24.10.2018) ↑

  27. <figcaption> // Веб-документация MDN: сайт

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/figcaption ↑

  28. <figure> // Веб-документация MDN: сайт

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/figure ↑

  29. <hr> // Веб-документация MDN: сайт

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/hr ↑

  30. <li> // Веб-документация MDN: сайт

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/li ↑

  31. <ol> // Веб-документация MDN: сайт

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/ol ↑

  32. <p> // Веб-документация MDN: сайт

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/p ↑

  33. <pre> // Веб-документация MDN: сайт

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/pre ↑

  34. <ul> // Веб-документация MDN: сайт

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/ul ↑

  35. <menu> // Веб-документация MDN: сайт

    https://developer.mozilla.org/ru/docs/Web/HTML/Element/menu ↑

  36. <a> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a ↑

  37. <abbr> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr ↑

  38. <b> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b ↑

  39. <br> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br ↑

  40. <cite> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite ↑

  41. <code> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code ↑

  42. <em> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em ↑

  43. <i> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i ↑

  44. <kbd> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd ↑

  45. <mark> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark ↑

  46. <q> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q ↑

  47. <small> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small ↑

  48. <span> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span ↑

  49. <strong> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong ↑

  50. <caption> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption ↑

  51. <col> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col ↑

  52. <colgroup> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup ↑

  53. <table> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table ↑

  54. <tbody> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody ↑

  55. <td> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td ↑

  56. <tfoot> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot ↑

  57. <th> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th ↑

  58. <thead> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead ↑

  59. <tr> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr ↑

  60. <button> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button ↑

  61. <datalist> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist ↑

  62. <fieldset> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset ↑

  63. <form> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form ↑

  64. <input> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input ↑

  65. <label> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label ↑

  66. <legend> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend ↑

  67. <meter> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter ↑

  68. <optgrouop> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup ↑

  69. <option> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option ↑

  70. <output> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output ↑

  71. <progress> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress ↑

  72. <select> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select ↑

  73. <textarea> // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea ↑

  74. accesskey // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey ↑

  75. class // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class ↑

  76. contenteditable // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable ↑

  77. contextmenu // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contextmenu ↑

  78. dir // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir ↑

  79. hidden // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden ↑

  80. id // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id ↑

  81. lang // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang ↑

  82. spellcheck // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck ↑

  83. style // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style ↑

  84. tabindex // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex ↑

  85. title // Веб-документация MDN: сайт

    https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title ↑

  86. Применение каскадных таблиц стилей (CSS) : курс / П. Храмцов, С. Брик, А. Русак, А. Сурин. - 2-е изд., исправ. - Москва : Национальный Открытый Университет «ИНТУИТ», 2016. - 82 с. : ил. - (Основы информационных технологий). C 4-6 ↑

  87. Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. 4-е изд. — СПб.: Питер, 2016 С.41 изд. — СПб.: Питер, 2016 С.41 ↑

  88. Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. 4-е изд. — СПб.: Питер, 2016 С.41 изд. — СПб.: Питер, 2016 С.42 ↑

СПИСОК ДЛЯ ТРЕНИРОВКИ ССЫЛОК