Файл: Основы программирования на языке HTML (Основы программирования на HTML).pdf
Добавлен: 18.05.2023
Просмотров: 115
Скачиваний: 3
Введение.
В эпоху цифровых технологий человек использует любые доступные ему современные технические средства на работе и в повседневной жизни, где сфера применения их неограниченна.
Для построения связи между человеком и техническим средством требуется создать программный интерфейс, который будет понятен и удобен человеку. В тоже время для технического средства выполнение определенных действий человеком в интерфейсе будет означать выполнение определенной команды.
Для построения интерфейса (внешнего вида) в веб-сайтах, в веб-приложениях, во многих приложениях для мобильных устройств (телефоны, планшеты, нетбуки, ноутбуки, «умные часы» и иные) в основном используется язык гипертекстовой разметки HTML.
Основы программирования на HTML.
Основные понятия языка программирования HTML и веб-разработки.
HTML (Hyper Text Markup Language) – язык гипертекстовой разметки используемый для написания гипертекстовых документов, которые в свою очередь публикуются в во всемирной паутине (перевод с англ.World Wide Web).Реже их используют в качестве электронного формата инструкций, приложений к различного рода программам, играм, драйверам.
Гипертекстовые документы, размещенные во всемирной паутине либо локальной сети, доступ к которым происходит через веб-браузеры, называются веб-страницей.
Веб-браузер (или браузер) – это специальная программа для просмотра гипертекстовых документов или веб-страниц. Почти каждая операционная система у любого сложного технического устройства, такого как компьютер, ноутбук, планшет, смартфон, умные часы и другие, имеет предустановленный стандартный веб-браузер. Для Windows это Internet Explorer и Microsoft Edge, последний используется в Windows 10 и его обновлениях. Для MacOS и iOS это Apple Safari.Пользователи в большинстве случаев вправе устанавливать и пользоваться другими веб-браузерами от других разработчиков, если по каким-либо критериям для них стандартный браузер не подходит. Зачастую причины установки стороннего веб-браузера являются такими как: неудобство пользования; «привыкание» пользователя к работе в определенном браузере, отсутствие какого-либо функционала; несовместимость дополнительных плагинов, программ для расширения функционала веб-браузера и т.д.
Наиболее популярные браузеры для настольных устройств на март 2020 года отображены в статистике использования браузеров в таблице 1.
|
Название браузера |
StatCounter |
|
Google Chrome |
63.69 % |
|
Apple Safari |
18.35 % |
|
Mozilla Firefox |
4.42 % |
|
Opera |
1.63 % |
Таблица 1. Статистика использования веб-браузеров
Многие разработчики для сбора статистики своих встраивают в код своих веб-сайтов сторонние скрипты для сбора данных и анализа. Разработчикам это помогает узнать свою аудиторию, какими веб-браузерами пользуются посетители, какая версия веб-браузера установлена, какая операционной системы, с какой страны заходили, какой основной язык операционной системы, а также персональные данные и многое другое. Непосредственно авторы такого скрипта собирают информацию со всех веб-сайтов, где установлен этот скрипт. Затем они размещают общую публичную или не публичную статистику для анализа другими разработчиками, чтобы понять тенденцию использования одного или иного браузера, различных его версий, а также операционных систем.
Стандарты разработки веб-сайтов постоянно меняются, развиваются, что-то новое внедряется и соответственно требуется адаптировать программное обеспечение в виде веб-браузеров под новые стандарты, а затем уже разработчик должен проверить насколько хорошо его веб-сайт соответствует современным стандартам и совместим ли он со старыми и новыми браузерами.
Приведенная выше таблица демонстрирует популярность того или иного веб-браузера. Нужно учитывать, что в таблице отражена статистика с трёх различных источников не различая с какого устройства использовали веб-браузер, т.е. настольного или мобильного, или с компьютера или смартфона. Информация с различных источников может различаться, т.к. не все веб-разработчики устанавливают одинаковые скрипты на свои веб-сайты, а также в зависимости от аудитории пользователей по странам. OpenStat используют преимущественно русскоязычные разработчики и соответственно аудитория сайта состоит из русскоязычных пользователей, в основном со стран СНГ, Грузии, Украины и стран Прибалтики. Тогда как StatCounte rи NetMarketShare используют по всему миру, но в основном в Северной Америке, Западной и Центральной Европе.
История языка HTML.
Язык разметки HTML был создан британским учёным Тимом Бернерсом-Ли в 1989-1991 годах для удобного создания и редактирования документов, которыми обменивались между собой ученые Европейской организации по ядерным исследованиям (англ. CERN) через систему Enquire, прототип всемирной паутины.
До разработки HTML основным языком разметки являлся язык SGML (Sounds Great, Maybe Later) (перевод с англ. Звучит Здорово, Возможно Потом), от которого произошёл HTML и являлся его приложением вплоть до 4 версии HTML. Основным недостатком SGML являлась его сложность для неспециалистов в области верстки документов.
Первым веб-сайтом считается созданным 6 августа 1991 года Тимом Бернерсом-Ли веб-сайт о стандарте WWW (Web World Wide, всемирной сети интернет), истории его разработки, спецификации и иной технической информации. Создан он на вариации первой версии HTML.
Изображение 1. Скриншот первого веб-сайта.
При этом первой версии языка HTML как таковой нету. Тогда ещё не существовало единого стандарта, потому что он постоянно дорабатывался группой разработчиков.
Изображение 2. Пример кода HTML первой версии.
22 сентября 1995 года была утверждена версия HTML 2.0, фактически это считается первой стандартизированной версией языка HTML. Основное нововведение было в формах, возможности отправки данных от клиента серверу. Например, форма обратной связи или опроса.
Ещё в марте 1995 года уже были работы над третьей версии HTML, где группе разработчиков нужно было окончательно реализовать концепцию языка HTML как языка структурной разметки веб-страницы. Задание стилей оформления внешнего вида было выведено в таблицу стилей CSS (англ. Cascading Style Sheets).
CSS не зависит от HTML, у него другой синтаксис, но они друг друга взаимо дополняют при разработке веб-страницы. Грубо говоря, программист в HTML задает несколько абзацев. В одном из предложений есть ссылка на другую веб-страницу. Для визуального выделения этой ссылке в тексте программист задает определенный стиль в CSS, например меняет шрифт, размер шрифта, цвет текста, подчеркивает текст и т.д. Это возможно и в HTML, но отныне программистам разработчиками стандартов рекомендуется выделять такие решения в отдельную таблицу стилей.
Окончательно стандартизированная версия HTML 3.2 вышла 14 января 1997 года, была реализована поддержка CSS, добавлены теги для создания таблиц, разметки математических формул.
К четвертой версии HTML язык уже оброс достаточно большим количеством тегов, использование которых являлось нежелательным, устаревшими из-за появления CSS. Стандарт HTML 4.0 убрал многие старые теги из рекомендаций к использованию, а также добавил поддержку скриптов, фреймов, а также кроссбраузерную поддержку и поддержку любых языков мира.
24 декабря 1999 года был выпущен стандарт HTML 4.01, который исправил ряд ошибок в формах и тегах. Использовался разработчиками более 10 лет до появления новой версии.
В 2014 году был окончательно утвержден стандарт HTML 5.0. Была реализована поддержка мультимедиа-технологий (аудио, видео воспроизведение, векторная графика, математические формулы, 3D-графика), сохранена обратная совместимость, был проработан синтаксис для удобства чтения человеком и машиной. Все веб-браузеры должны одинакова реагировать на синтаксические ошибки в коде, это важно для правильного отображения веб-страниц в любом из веб-браузеров.
Разработка стандарта продолжается и сейчас для развития веб-технологий.
Новые элементы в HTML5: <article>, <aside>, <audio>, <canvas>, <command>, <datalist>, <details>, <embed>, <figcaption>, <figure>, <footer>, <header>, <hgroup>, <keygen>, <main>, <mark>, <meter>, <nav>, <output>, <progress>, <rp>, <rt>, <ruby>, <section>, <source>, <summary>, <time>, <video>, <wbr>.
Новые атрибуты в HTML5: charset (в <meta>), async (в script)
Программы для редактирования и просмотра
Для создания гипертекстового документа можно использовать целый ряд программ под общим названием гипертекстовые редакторы, начиная от обычного текстового редактора, например, предустановленного в операционных системах Windows–«Блокнот», до интегрированной среды разработки, например, Eclipse, которая содержит в себе широкий инструментарий для разработки различного рода сложности программ и приложений на многих языках программирования, включая HTML.
Гипертекстовые редакторы и другие инструменты для создания и редактирования гипертекстовых документов принято подразделять на два вида, различающихся между собой по сложности создания документа и освоения инструментария, а также скорости разработки гипертекстового документа:
-Программный редактор, где разработчик редактирует напрямую исходный код гипертекстового документа. Для проверки работоспособности исходного кода и отображения веб-страницы в готовом варианте, как по задумке разработчика должна выглядеть веб-страница, он использует встроенный либо внешний веб-браузер. Примеры таких редакторов являются: Eclipse, SublimeText, NotePad ++, блокнот, MozillaComposer, KompoZer
-Графический (или визуальный) редактор, известный по принципу WYSIWYG (принцип «What You See Is What You Get» - «Что видишь, то и получаешь»), позволяющий редактировать гипертекстовый документ без изменения исходного кода, а напрямую в визуальном редакторе. Наиболее схожий принцип визуального редактирования похож на принцип редактирования документов форматов.doc и .docx программы Microsoft Word. Разработчик непосредственно редактирует сайт в виазуальном редакторе, настраивая размер шрифтов, отдельных элементов и т.д. сразу видя изменения на сайте, т.е. как фактические будет выглядеть сайт,а редактор тем временем автоматически изменяет исходный код гипертекстового документа. Примеры таких редакторов являются: MicrosoftFrontPage, AdobeDreamweaver.
Разработчики выбирают удобный для себя редактор в зависимости от многих факторов, такие как: скорость создания, удобство создания, время на освоение функционала программы, ограниченность функционала программы, требования к финальному продукту. Большинство веб-разработчиков предпочитают не использовать визуальные редакторы, т.к. исходный код сайта созданный таким редактором разрастается до больших размеров и остаётся много неиспользованного и неоптимизированного кода.
В последнее время тенденция разработчиков редакторов гипертекстовых документов на объединение двух способов редактирования соответствующих документов. Это реализовано на принципе двух окон, в одном окне отображен исходный код программы, в другом окне показывается встроенный браузер, где отображаются все внесенные изменения в исходный код так, как фактически выглядит документ в веб-браузере, при этом позволяя редактировать изменения прямо во внутреннем браузере программы наподобие визуального редактора.
При этом развивается программное обеспечение веб-браузеров и встроенные в них инструменты для разработчиков. Почти каждый современный веб-браузер поддерживает функцию инспекции DOM и CSS-стилей веб-страницы, позволяя в реальном времени вносить изменения в код веб-страницы и тем самым смотреть как изменения отображаются непосредственно в веб-браузере. А также другие инструменты, отладчикJS-кода, консоль, скорость загрузки веб-страницы и его элементов.
Основные положения языка HTML
Каждый гипертекстовый документ языка HTMLсостоит из дерева элементов и обычного текста, т.е. набора символов. Каждый элемент состоит из тегов, которые в свою очередь имеют атрибуты.
Элемент– это часть гипертекстового документа, которая определяет как будет выглядеть та или иная часть документа. Может содержать в себе как другой элемент, так и обычный текст.
Тег - это специальная команда языка разметки, которая описывает вид веб-страницы. Теги бывают открывающие или закрывающие. В некоторых случаях достаточно одного тега для размещения элемента. Например, <hr> (горизонтальная линия). Все теги отмечаются между угловых скобок <p> (где «p» - это любой элемент). Закрывающий тег всегда имеет такой вид: </p>.
Атрибуты – это свойства тегов. Всего есть четыре основных атрибута:
id – применяется совместно с языком разметки CSS-стилей для указания свойства конкретного элемента с тегом имеющих такой атрибут. Для веб-разработки официально не рекомендуется к применению. Пример: <pid=”uniq#1”></p>
title – название элемента, когда веб-сайт полностью не загружен, отображается название элемента, чтобы пользователь имел представление что в нем расположено. Пример:
class - применяется совместно с языком разметки CSS-стилей для указания свойства конкретного элемента с тегом имеющих такой заданный класс в атрибуте.Могут указываться несколько классов одновременно в одном атрибуте. Пример: <p class=”big”></p>