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

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

Содержание:

Введение.

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

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

Для построения интерфейса (внешнего вида) в веб-сайтах, в веб-приложениях, во многих приложениях для мобильных устройств (телефоны, планшеты, нетбуки, ноутбуки, «умные часы» и иные) в основном используется язык гипертекстовой разметки 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>

style – используется для указания CSS-стилей напрямую в HTML-документе. Пример:<pstyle=”color:red”</p>

Атрибут idhtml-тега может быть использован для однозначной идентификации любого элемента внутри html-страницы. Существуют две основные причины, по которым Вы можете использовать атрибут id для элемента:

Если элемент содержит атрибут id как уникальный идентификатор, то можно идентифицировать только этот элемент и его содержимое.

Если на веб-странице (или в таблице стилей) есть два элемента с одним и тем же именем, Вы можете использовать атрибут id для различения элементов, имеющих одно и то же имя.

Атрибут title — дает название элемента для элемента. Синтаксис для атрибута title аналогичен атрибуту id.

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

Атрибут class

Атрибут class — используется для связывания элемента со списком стилей и задает класс элементу.

Образец гипертекстового документа выглядит следующим образом:

Изображение 1. Гипертекстовый документ на языке HTML.

Структура гипертекстового документа на языке HTML:

Каждый гипертекстовый документ начинается с элемента <!DOCTYPE>, который указывает тип текущего документа. Это необходимо чтобы веб-браузер правильно распознавал веб-страницу, т.к. существует несколько версий языка HTML, в которых синтаксис языка различается и веб-браузер может отображать веб-страницу не так как было задумано веб-разработчиком. При этом многие веб-браузеры могут игнорировать отсутствие элемента <!DOCTYPE>и автоматически определять тип документа, анализируя весь или часть гипертекстового документа по применяемым тегам и синтаксису документа.

Для гипертекстовых документов созданных, применяя язык HTML 5.0,указывается:

<!DOCTYPE html>

Для гипертекстовых документов созданных, применяя языкHTML 4.01, указывается:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

При этом у DOCTYPEесть параметры:

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

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

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

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

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

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

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

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

Следующая часть гипертекстового документа начинается с элемента <html> с обязательным закрывающим тегом </html>. Этот элемент включает в себя содержимое всего гипертекстового документа, как правильно, он идёт сразу после объявления типа документа (<!DOCTYPE>).

Элемент <html>имеет следующие атрибуты:

title - Добавляет всплывающую подсказку при наведении курсора на любую часть гипертекста.

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

Внутри элемента<html>размещаются элементы <head>и <body>.

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

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

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

Элемент <base> определен внутри контейнера <head> и инструктирует браузер относительно полного базового адреса текущего документа. Тег <base> предназначен для документов, в которых используется относительный адрес и эти документы могут переноситься в другую папку или даже на другой компьютер без потери связи. Браузер ищет тег <base>, определяет полный адрес документа и корректно загружает его. Например, если адрес документа указан как <basehref="http://www.megasite.ru/hzchd/">, то при добавлении рисунков достаточно использовать относительный адрес <imgsrc="images/labuda.gif">. При этом полный путь к изображению будет http://www.megasite.ru/hzchd/images/labuda.gif, что позволяет браузеру всегда находить графический файл, независимо от того, где находится текущая веб-страница.

Тег <basefont> предназначен для задания шрифта, размера и цвета текста по умолчанию. Указанные значения будут использоваться во всем документе за исключением тега <font>, в котором можно переопределить параметры оформления текста. Допускается использование тега в контейнере <head> или <body>, причем несколько раз. Это позволяет изменять вид шрифта для части документа.

Тег <link>устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. В отличие от тега <a>, тег <link> размещается всегда внутри контейнера <head> и не создает ссылку.

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

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

Тег <style> применяется для определения стилей элементов веб-страницы на языке CSS . Тег <style> необходимо использовать внутри контейнера <head>.

Элемент <title>определяет заголовок документа, не является частью документа и не показывается напрямую на веб-странице. Отображается во вкладке браузера. Допускается использовать только один тег <title> на документ и размещать его в контейнере <head>.

Иных элементов и тегов в элементе <head>размещать не следует. После элемента <head>идёт следующий элемент <body>.

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

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

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

1.6. Основные элементы для создания веб-страницы на языке HTML.

На текущий момент в языке гипертекстовой разметке HTMLсуществует более 100 элементов, однако они не все и всегда нужны или применяются в повседневности.

Наиболее часто используемые элементами, а следовательно основными, являются следующие элементы: <!DOCTYPE>, <html>, <head>, <title>, <body>, <html>, <h1>-<h6>, <p>, <img>, <a>, <br>, <hr>, <div>, <b>, <i>, <table> и <form>.

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

Остальные элементы используются непосредственно для редактирования веб-страницы.

Элементы <h1>,<h2>, <h3>, <h4>, <h5>,<h6> (heading, перевод с англ. языка «заголовок») используются для выделения заголовков в документе, непосредственно увеличивает шрифт текста и делает его жирным, а все иные тексты в документы, не вошедшие в состав данного элемента, начинаются с новой строки, т.к. элементы <h1-h6> являются блочными. Требуется использовать открывающие и закрывающие теги. <h1>заголовок первого уровня, остальные идут по убыванию. Помимо визуальной функции, данный элемент также используются поисковыми системами для обработки важной информации и выдачи её в поисковых результатах.

Примеры:

<h1>Город Москва</h1>

<h2>История города Москвы</h2>

<h3>Москва при Иване Грозном</h3>

Элемент <p> (paragraph, перевод с англ. языка «параграф») используется в качестве текстового абзаца, является блочным элементом. Для правильности веб-документа нужен закрывающий тег</p>, иначе закрывающий элементом будем считаться следующий блочный элемент.

Примеры:

<p>Москва – столица Российской Федерации</p>.

<p>Историческая столица Великого княжества Московского, Русского царства, Российской империи (в 1728—1730 годах), Советской России и СССР.</p>

Элемент <img>(image, перевод с англ. языка «изображение») используется для показа изображений. Закрывающий тег не требуется. Для указания адреса изображения используется атрибут «src». Атрибут «alt» используется дляотображения текста вместо изображения, если последнее не прогрузилось. Атрибут «title» используется для показа текста при наведении курсора мыши на элемент. Атрибуты «width»и «height» задают ширину и высоту изображения, соответственно.

Примеры:

1) <img src="https://avatars.mds.yandex.net/get-pdb/69339/aea2d337-4336-41bb-b6f6-b07099be516d/s1200?webp=false" title="Red Square" =alt="Краснаяплощадь">

Изображение 2. Отображение элемента <img> с атрибутом «title»при наведении курсора мыши.

2) <imgsrc="URL" border="1" title="Red Square" alt="Краснаяплощадь">

Изображение 3. Отображение элемента <img> с атрибутом «alt» при отсутствии изображения по указанному адресу.

Элемент <a> (anchor, прямой перевод с англ. языка «якорь») используется для создания ссылок в веб-документе. В атрибуте «href» указывается адрес веб-страницы, изображения или иного документа. Атрибут «name». Закрывающий тег обязателен.

Примеры:

<ahref="//redsquare.jpg">Краснаяплощадь</a>

<p>Прочитайте об этом замечательном месте на сайте<ahref="www.wikipedia.org"title="Нажми, чтобы перейти на другой сайт">Всемирной энциклопедии</a></p>

Изображение 4. Отображение элемента <a> с атрибутом «title» при наведении курсора мыши на элемент.

<br> - устанавливает перевод строки следующих элементов. Не требует закрывающего тега.

Пример:

<p>— Скажи-ка, дядя, ведь не даром<br>

Москва, спаленная пожаром,<br>

Французу отдана?<br>

Ведь были ж схватки боевые,<br>

Да, говорят, еще какие!<br>

Недаром помнит вся Россия<br>

ПроденьБородина!</p>

Изображение 5. Пример использования тега <br> в стихотворении.

Изображение 6. Вышеуказанный пример из изобр. 5 без тегов <br>.

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

Пример:

<h1>Стихи Бунина Ивана Алексеевича</h1>

<p>Беру твою руку и долго смотрю на нее,

Ты в сладкой истоме глаза поднимаешь несмело:

Вот в этой руке – все твое бытие,

Я всю тебя чувствую – душу и тело.</p>

<hr>

<p>Нынче ночью кто-то долго пел.

Далеко скитаясь в темном поле,

Голос грустной удалью звенел,

Пел о прошлом счастье и о воле.</p>

Изображение 7. Пример использования тега <hr>.

Элемент <div> является блочным элементом для выделения фрагментов документов, для редактирования этих фрагментов независимо от других. В основном применяется в связке с CSS-стилями веб-страницы, в таком случае для элемента <div>задаются атрибуты «id» и «class». Закрывающий тег обязателен.

Пример:

<!DOCTYPE html>

<html>

<head>

<title>Примерзаголовков в HTML</title>

<style>

.first {

font-size: 28px;

}

#second {

font-weight: 700;

}

</style>

</head>

<body>

<h1>Стихи Бунина Ивана Алексеевича</h1>

<divclass="first">

<p>Беру твою руку и долго смотрю на нее,

Ты в сладкой истоме глаза поднимаешь несмело:

Вот в этой руке - все твое бытие,

Я всю тебя чувствую - душу и тело.</p>

</div>

<divid="second">

<p>Нынче ночью кто-то долго пел.

Далеко скитаясь в темном поле,

Голос грустной удалью звенел,

Пел о прошлом счастье и о воле.</p>

</div>

</body>

</html>

Изображение 8. Пример использования элементов<div>с указанием атрибутов класса и идентификатора.

<b> - текст внутри элемента имеет жирное начертание. Требуется закрывающий тег. Прямой аналог CSS-стиля «font-weight».

Пример:

Заявление от имени <b>Иванова Ивана Ивановича</b>.

<i> - текст внутри элемента имеет курсивное начертание. Требуется закрывающий тег.

Пример:

Заявление от имени <i>Петрова Петра Петровича</i>.

Изображение 9. Примеры использования элементов <b>и <i>.

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>, которые расшифровываются как строка в таблице (от английского «Table Row») и ячейка в таблице (от английского «Table Data»). Закрывающий тег обязателен.

Также, связанные с элементом <table> являются такие элементы как: <th>,<thead>, <tbody>, <tfoot> и <caption>.

Элемент <th> выполняет ту же функцию, что и <td>, т.е. ячейка в таблице. Но только с одним отличием, текст внутри элемента <th> выделяется жирным шрифтом. Закрывающий тег обязателен.

<thead> используется для создания отдельной верхней строки или строк, выделен в отдельный элемент для удобства редактирования документа веб-программистам. Также, выполняет функцию выделения важной части таблицы для оптимизации веб-сайта и повышении его в результах выдачи поисковых систем (SEO). В таблице может использоваться только один раз. Закрывающий тег обязателен.

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

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

<caption> предназначен для описания таблицы, размещается сразу внутри элемента <table>. Отличие от элемента <p>, что элемент <caption> размещается по ширине самой таблицы. Закрывающий тег обязателен.

Пример:

<table>

<thead>Население стран мира млн. человек в 2019 году</thead>

<tr>

<th>Россия</th>

<th>Великобритания</th>

<th>Украина</th>

<th>Беларусь</th>

</tr>

</table>

Изображение 10. Пример использования элемента <table>.

Элемент <form> устанавливает форму на веб-страницы, с помощью которой пользователь может заполнить необходимые данные, отправить их на сервер, где эти данные будут обработаны. Наиболее частое применение форм это: форма входа (аутенфикации) пользователя на веб-сайте при помощи логина и пароля; форма обратной связи, где пользователь оставляет свои контактные данные и соопутствующий текст; заполнение необходимых данных для заказа продукции из интернет-магазина. Данные на сервер выполняются при заполнении всех необходимых условий при нажатии определенной кнопки либо по нажатию клавиши Enter.

Атрибуты данного элемента:

accept-charset - устанавливает кодировку, в которой сервер может принимать и обрабатывать данные формы.

Пример:

</form>

action – используется для указания обработчика данных, введенных пользователем. В свою очередь обработчиком может выступать любая CGI-программа либо другой HTML-документ, содержащий необходимые скрипты для выполнения.

Пример:

</form>

autocomplete – отвечает за автозаполнение всех полей форм документе на основе ранее введенной информации в полях этой же формы или других, в том числе на других веб-страницах. Принимает значения ON или OFF.

Пример:

</form>

enctype - определяет способ кодирования данных формы при их отправке на сервер.

Значения

application/x-www-form-urlencoded - Вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%90%D0%BD%D1%8F вместо Аня).

multipart/form-data - Данные не кодируются. Это значение применяется при отправке файлов.

text/plain -Пробелы заменяются знаком +, буквы и другие символы не кодируются.

Пример:

</form>

method – используется для указания метода передачи данных GET или POST. О преимуществах и достоинствах в данной работе обойдём этот вопрос, вкратце, для безопасности и для большого объёма данных (от 4 КБ и более) преимущественно используется POST, в остальных случаях GET.

Пример:

</form>

name –

novalidate –

target -

1.7.Основы программирования веб-страницы на языке HTML.

Для создания веб-страницы на языке гипертекстовой разметки будет использоватьсятекстовый редактор под названием «SublimeText», а для просмотра промежуточного и готового результата будем использовать веб-браузер Google Chrome.

Google Chrome – веб-браузер от корпорации Google, на март 2020 года является самым популярным браузером для настольных и мобильных устройств.

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

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

Официальный сайт Google Chrome - https://www.google.ru/chrome

Официальный сайт Sublime Text - https://www.sublimetext.com/3

Изображение 11. Официальный сайт веб-браузера Google Chrome.

После скачивания программ-установщиков запустить их и следовать инструкции по установке программ.

1) Необходимо создать пустой документ в формате .html. Для этого на на любом пустом месте рабочего стола создадим пустую папку с названием «site», в будущем это пригодиться для удобного хранения всех необходимых файлов, связанных с веб-документом.

В новой папке создаём пустой текстовый документ и переименовываем его в «index.html».

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

2) Открыть «index.html» открыть через веб-браузер GoogleChrome, свернуть его и открыть этот веб-документ уже через SublimeText.

3)Нам нужно объявить тип этого документа, чтобы браузеры правильно распознавали язык разметки гипертекстовой разметки. Для этого мы должны прописать:

<!DOCTYPE html>

После объявления типа документа, мы должны обозначить контейнер <html>, а непосредственно в нём объявить элементы <head>и<body>.

В контейнере размещается весь HTML-код.

В элементе <head>размещается заголовок веб-документа и вся техническая и наиболее важная информация о веб-странице, например стили и скрипты. Веб-страница подгружается постепенно от начала веб-документа и до его конца. Поэтому для правильного отображения веб-документа рекомендуется размещать ссылку на стили вначале веб-документа, иначе во время загрузки веб-документа, он может отображаться иначе чем это было запланировано веб-разработчиком.

В элементе <body> размещается непосредственно контент веб-страницы, всё то, что будет отображаться в конечном веб-документе.

На текущий момент код веб-документа должен выглядеть как в изображении 11.

Изображение 12. Код веб-документа на этапе 3.

4) Следующий этапом нам нужно объявить заголовок веб-документа, но пока неизвестно что за веб-документ нам нужно создать. И тут как раз есть некая предыстория.

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

Название сервиса шиномонтаж «Шиномонтажный сервис - В добрый путь!». Мы должны добавить название сервиса в код нашей веб-страницы, чтобы во вкладке веб-браузера Google Chrome было видно название. Для этого в элемент <head>добавим элемент <title>с закрывающимся тегом, а внутри него поместим название.

Код должен быть таким: <title>Шиномонтаж - В добрый путь!</title>

5) Теперь будет создаваться непосредственно визуальная часть веб-страницы.

Для начала объявим заголовок веб-страницы с помощью элемента <h1>, для этого в элементе <body> нужно прописать такой код:

<h1>Официальный сайт шиномонтажного сервиса - "В добрый путь"!</h1>

После пропишем <hr> для отделения заголовка от остальной части веб-страницы горизонтальной линией.

Далее зададим четыре блока <div>, после каждого блока <div> прописываем <hr> для отображения горизонтальной линии.

Внутри каждого блока <div> объявим заголовок второго уровня <h2>.

Начиная с первого блока <div> в каждом <h2> прописываем по порядку:

- О сервисе

- Прайс-лист

- График работы и место положение

- Контакты

Код должен выглядеть сейчас таким образом:

<!DOCTYPE html>

<html>

<head>

<title>Шиномонтажный сервис - В добрый путь!</title>

</head>

<body>

<h1>Официальный сайт шиномонтажного сервиса - "В добрый путь"!</h1>

<hr>

<div>

<h2>О сервисе</h2>

</div>

<hr>

<div>

<h2>Прайс-лист</h2>

</div>

<hr>

<div>

<h2>График работы и место положение</h2>

</div>

<hr>

<div>

<h2>Контакты</h2>

</div>

</body>

</html>

В первый <div> создаём три абзаца <p></p> и прописываем в каждый по порядку следующий текст:

«Наш сервис предлагает услуги снятия, установки, балансировки колес для легковых автомобилей. Мы также занимаемся сезонным хранением колес.»

«Мы молодой, развивающийся шиномонтажный сервис, основанный 2 года назад, за прошедшие сезоны мы успели пройти стадию от "шиномонтажки" в гаражно-строительном кооперативе до аренды отдельно стоящего нежилого здания, планируем развиваться и дальше!»

«Мы всегда уважаем и ценим всех наших клиентов в любое время, в наших планах расширить услуги для грузовых автомобилей, ремонтировать покрышки (резину), продажа и утилизация резины, дисков.»

Следующим шагом нам нужно создать таблицу с ценой на услуги. Она должна будет иметь вид как таблица ниже:

Изображение 13. Таблица на услуги шиномонтажа.

Для этого о втором блоке <div> нам нужно создать таблицу <table> с закрывающим тегом </table>.

Внутри <table> задаем элемент <thead> и в нём прописываем следующий текст:

«Прайс-лист на услуги шиномонтажа легкового автомобиля».

В дальнейшем создаем пять строк в таблице с помощью элементов <tr>. В каждом элементе <tr> создаем семь столбцов <td> и заполняем как в таблице выше.

После редактирования таблицы создаем два абзаца и прописываем в каждый из них по порядку следующий текст:

Хранение комплекта колес (4) для легковых автомобилей за 1 сезон – 1600 рублей.

ВНИМАНИЕ! Теперь мы можем оказать выездные услуги замены и балансировки всех колес вашего легкового автомобиля в пределах ВАО и СВАО, возможно с доставкой Вашего комплекта колес, который есть у нас на хранении. Фиксированная стоимость – 5000 рублей.

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

Код должен выглядеть так:

<p>Хранение комплекта колес (4) для легковых автомобилей за 1 сезон - <b>1600</b> рублей.</p>

<p><b>ВНИМАНИЕ!</b> Теперь мы можем оказать выездные услуги замены и балансировки всех колес вашего легкового автомобиля в пределах ВАО и СВАО, возможно с доставкой Вашего комплекта колес, который есть у нас на хранении. Фиксированная стоимость - <b>5000</b> рублей.</p>

В третьем блоке <div> прописываем такой текст:

Работаем каждый день с 08:00 до 20:00 без выходных и обеда. Государственные праздники - выходной день, просим понять. Предварительная запись и запись на выезд по телефону.

Находимся по адресу: город Москва, Погонный проезд, дом 10, строение 5. Заезд с улицы 1-я Мясниковская.

Каждый абзац заключаем в тег <p>. Адрес нужно выделить в ссылку на Яндекс.Карты для удобства пользователей, для этого заносим адрес в теги <a>, прописываем атрибут href=””, и указываем ссылку: yandexmaps://maps.yandex.ru/maps/213/moscow/?from=api-maps&ll=37.706242%2C55.817571&mode=usermaps&origin=jsapi_2_1_74&um=constructor%3Aa1785aaa7f150f7f1b7962a1f6edf71a8687c693a0ade31fbc3c6e7029073021&z=18

Таким образом код должен выглядеть:

<a href="yandexmaps://maps.yandex.ru/maps/213/moscow/?from=api-maps&ll=37.706242%2C55.817571&mode=usermaps&origin=jsapi_2_1_74&um=constructor%3Aa1785aaa7f150f7f1b7962a1f6edf71a8687c693a0ade31fbc3c6e7029073021&z=18">город Москва, Погонный проезд, дом 10, строение 5. Заезд с улицы 1-я Мясниковская.</a>

Дополнительно, владелец шиномонтажа попросил добавить карту на саму веб-страницу. Для этого мы используем сервис от Яндекса, обрисовываем местоположение шиномонтажа и получаем код для вставки на страницу:

Третий блок <div> должен выглядеть так:

Изображение 14. Третий блок <div>.

В четвертом блоке <div> нужно заполнить контактные данные шиномонтажа. Для этого создадим три абзаца со следующим текстом по порядку:

Телефон: +79204650088

E-mail: ourmail@mail.ru

Мы в социальных сетях:

Телефонный номер выделим ссылкой и пропишем в атрибутах: href="tel: +79204650088" для того, чтобы на мобильных устройствах по нажатию на ссылке веб-браузер произвел перевод пользователя в программу набора телефонного номера.

По аналогии с электронной почтой укажем ссылку с атрибутом: href="emailto: ourmail@mail.ru". Нажатие по ссылке позволит запустить почтовый клиент на настольных и мобильных устройствах.

Текст «Мы в социальных сетях» выделим подчеркнутой линией при помощи тега <u>.

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

Содержание списка должно быть таким:

ВК, Facebook,Instagram, Telegram

Для каждого прописываем элемента прописываем ссылку <a> на любую страницу из этих социальных сетей.

Конечный вид должен быть как в этом изображении:

Изображение 15. Вид блока контакты.

На этом наша веб-страница готова и конечный результат должен выглядеть таким образом:

<!DOCTYPE html>

<html>

<head>

<title>Шиномонтажный сервис - В добрый путь!</title>

</head>

<body>

<h1>Официальный сайт шиномонтажного сервиса - "В добрый путь"!</h1>

<hr>

<div>

<h2>О сервисе</h2>

<p>Наш сервис предлагает услуги снятия, установки, балансировки колес для легковых автомобилей. Мы также занимаемся сезонным хранением колес.</p>

<p>Мы молодой, развивающийся шиномонтажный сервис, основанный 2 года назад, за прошедшие сезоны мы успели пройти стадию от "шиномонтажки" в гаражно-строительном кооперативе до аренды отдельно стоящего нежилого здания, планируем развиваться и дальше!</p>

<p>Мы всегда уважаем и ценим всех наших клиентов в любое время, в наших планах расширить услуги для грузовых автомобилей, ремонтировать покрышки (резину), продажа и утилизация резины, дисков.</p>

</div>

<hr>

<div>

<h2>Прайс-лист</h2>

<table>

<thead>Прайс-лист на услуги шиномонтажа легкового автомобиля</thead>

<tr>

</tr>

<tr>

<td>Снятие и установка 1 колеса</td>

</tr>

<tr>

<td>Технологическая мойка 1 колеса</td>

</tr>

<tr>

<td>Балансировка 1 колеса</td>

</tr>

<tr>

<td>Полный комплекс <br>(снятие и установка, <br> технологическая мойка, <br> балансировка 4 колес)</td>

</tr>

</table>

<p>Хранение комплекта колес (4) для легковых автомобилей за 1 сезон - <b>1600</b> рублей.</p>

</div>

<hr>

<div>

<h2>График работы и место положение</h2>

<p>Работаем каждый день с 08:00 до 20:00 без выходных и обеда. Государственные праздники - выходной день, просим понять. Предварительная запись и запись на выезд по телефону.</p>

<p>Находимся по адресу: <a href="yandexmaps://maps.yandex.ru/maps/213/moscow/?from=api-maps&ll=37.706242%2C55.817571&mode=usermaps&origin=jsapi_2_1_74&um=constructor%3Aa1785aaa7f150f7f1b7962a1f6edf71a8687c693a0ade31fbc3c6e7029073021&z=18"><i>город Москва, Погонный проезд, дом 10, строение 5. Заезд с улицы 1-я Мясниковская.</i></a></p>

</div>

<hr>

<div>

<h2>Контакты</h2>

<p>Телефон: <a href="tel: +79204650088">+79204650088</a></p>

<p>E-mail: <a href="emailto: ourmail@mail.ru">ourmail@mail.ru</a></p>

<p><u>Мы в социальных сетях:</u></p>

<ul>

<li><a href="www.facebook.com">Facebook</a>

<li><a href="www.instagram.com">Instagram</a>

<li><a href="www.telegram.com">Telegram</a>

</ul>

</div>

</body>

</html>

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

Список литературы:

1) Р 50.1.041-2002: Информационные технологии. Руководство по проектированию профилей среды открытой системы (СОС) организации-пользователя

2) История развития HTML. 2016. URL: https://vertex-academy.com/tutorials/ru/html_history

3) Статистика использования браузеров на рынке. URL: http://gs.statcounter.com

4) Интернет-проект статистики и веб-аналитики. URL: https://www.openstat.com

5) Интересные вопросы сервиса вопросов и ответов по IT-тематике. URL: https://toster.ru

6) Учебник для начинающих веб-дизайнеров и разработчиков. URL: http://proglang.su

7) Стихотворение «Бородино», 1837 год. Михаил Юрьевич Лермонтов.

8) Стихотворение «Беру твою руку и долго смотрю на нее...» 1898 год. Бунин Иван Алексеевич.

9)Стихотворение «Нынче ночью кто-то долго пел...», 1899 год. Бунин Иван Алексеевич.

10) GET или POST: что выбрать? 2010. URL: http://xiper.net/learn/also-need-to-know/get-or-post

11) Онлайн-подготовка веб-разработчиков HTML. URL: https://www.codecademy.com

12) Самоучитель HTML. URL: http://htmlbook.ru