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

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

Содержание:

ВВЕДЕНИЕ

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

Итак, HTML — это специальный язык, который применяется при создании сайтов в интернете. Знание и понимание хотя бы основ языка HTML необходимо не только программистам и разработчикам, но также редакторам, Web-дизайнерам, контент-менеджерам, и людям, которые хотят понимать, как и почему работают сайты, которыми они пользуются каждый день. Так как я являюсь Web-дизайнером, я выбрала эту тему для своей курсовой работы, чтобы лучше понимать свои возможности и ограничения, при создании веб-страниц.

Объектом исследования данной курсовой работы является создание веб страниц. Предметом курсовой работы является процесс разработки сайта на языке HTML.

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

Для достижения цели я поставила следующие задачи:

- Изучить историю создания языка HTML.

- Определить основные понятия языка.

- Рассмотреть основные инструменты создания Web-страниц.

- Изучить структуру документа в формате HTML и основные теги.

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

ГЛАВА I. История создания языка HTML.

1.1 Предпосылки развития.

HTML (HyperText Markup Language — «язык гипертекстовой разметки») —стандартизированный язык разметки документов в интернете. Большинство веб-страниц содержат описание разметки на языке HTML.

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

За появление HTML современный мир должен благодарить ученого Европейского совета по ядерным исследованиям (Conseil Européen pour la Recherche Nucléaire, CERN). Его имя - Тимоти Джон Бернерс-Ли. [1]

Итак, появление первых версий HTML относят к 1986 году, а в 1991 году HTML был существенно доработан и стал использоваться именно для передачи гипертекста по просторам всемирной паутины. Всемирно известная аббревиатура HTML, расшифровывающаяся как Hyper Text Markup Language (язык разметки гипертекста) появилась как раз в начале 90-х годов прошлого века. Важно заметить, что в более широком понимании, гипертекстом является система из тестовых страниц, имеющих перекрестные ссылки. Например, энциклопедии или веб-сайты. В компьютерной терминологии гипертекст – это текст, сформированный с помощью языка разметки. [2]

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

Однако, прототип, то есть черновая реализация гипертекстовой системы была описана еще в 1945 Вениваром Бушем в эссе «Как мы можем мыслить», опубликованном в журнале The Atlantic. Эта система получила название - Мемекс ( англ. memex, словослияние memory и index).[3]

Буш изобразил Мемекс как устройство, в котором человек сможет хранить свои книги, записи и контакты и которое «выдаёт нужную информацию с достаточной скоростью и гибкостью». Мемекс позволял бы существенно расширить и дополнить возможности памяти человека. Концепция мемекса оказала большое влияние на разработку ранних гипертекстовых систем (что в итоге привело к созданию всемирной паутины).[3]

Все это говорит нам о том, что идеи Венивара Буша и его прототип системы, оказали большое влияние на создание языка HTML и интернета вообще в будущем. Однако, его вклад редко упоминают, когда речь идет об истории HTML.

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

1.2 Основные вехи развития.

Первая версия языка разметки гипертекста HTML была создана на основе стандарта обобщенного языка разметки SGML (Standard Generalized Markup Language). Изначально язык HTML разделял все особенности идеологии SGML. Но в 1993 году появляется версия языка HTML 1.2, которая имела сорок с небольшим тегов, три из которых не рекомендованы к использованию, так как указывали на физические параметры предоставления документа, что противоречило идеологии SGML. [2]

Единственным в то время браузером, поддерживающим графические возможности, была программа Mosaic. Она была разработана в Национальном центре суперкомпьютерных приложений США (National Center for Supercomputer Applications - NCSA), там же, кстати, была разработана WWW (World Wide Web). По этой причине никаких противоречий между официальными стандартами и их реализацией в браузерах тогда не существовало.

В апреле 1994 года был образован Консорциум W3C (World Wide Web Consortium). Так как официальной спецификации HTML 1.0 не существовало, W3C начал заниматься подготовкой спецификации HTML следующей версии. Но чтобы стандартная версия отличалась от всех предыдущих, ей сразу присвоили номер 2.0. Спецификация HTML 2.0 была утверждена лишь в сентябре 1995 года. Из больших дополнений был добавлен лишь механизм форм для отсылки информации с компьютера пользователя на сервер. [4]

В марте 1995 года была предложена спецификация HTML 3.0. Третья версия предлагала много новых возможностей: поддержка таблиц, обтекание изображения текстом, отображение сложных математических формул, примечания. Поддержка этого стандарта браузерами того времени была не удовлетворена. [4]

Авторы HTML 3 добавили поддержку нового средства - иерархические стилевые спецификации (Cascading Style Sheets, CSS). Это нововведение нужно было для того, чтобы разрешить противоречие между идеологией структурной разметки и потребностями пользователей, которым в первую очередь нужно было гибкость и обширные возможности визуального представления. CSS имеет свой синтаксис и является формально независимым от HTML.

В 1995 году появился браузер Netscape Navigator, разработчикам которого была корпорация Netscape Communications. Эта корпорация с целью привлечь пользователей стала вводить новые теги, которые были предназначены на улучшение внешнего вида документов. Тем самым были разрушены изначальные принципы языка.

В 1996 году в свет вышел браузер Internet Explorer 2.0 (разработчик: корпорация Microsoft), но он не имел большой популярности ввиду того, что не поддерживал многих тегов, введённых Netscape. Их поддержка была введена в Internet Explorer 3.0, после выхода которого рынок браузеров был поделён пополам между Microsoft и Netscape. [5]

Следующей версией HTML стала 3.2 и в ней были опущены многие нововведения из версии 3.0. Стандарт 32 уже был ориентирован на Internet Explorer. Он долгое время оставался единственным для веб-разработчиков. И В 1999 году в свет вышел HTML 4.01, обеспечивающий достаточно большую кросс-браузерность, то есть страницы сайта одинаково отображались в различных браузерах.

Стандарт HTML 5 был завершен только в 2014 году, цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий с одновременным сохранением обратной совместимости, удобочитаемости кода для человека.

Так как многие страницы были сверстаны с использованием смеси особенностей представленных спецификаций, HTML 5 был хорошим решением, которое могло бы сочетать синтаксис HTML и XHTML, и улучшать разметку документов. Для упрощения создания и работы с графическими и мультимедийными объектами в интернете, чтобы не было необходимости в сторонних плагинах, в HTML5 было реализовано множество новых синтаксических особенностей, а также возможность использования SVG и математических формул. [6]

1.3 HTML - не язык программирования.

Многие все же до сих пор ошибочно называют HTML – языком программирования, но это не является правдой. И далее мы рассмотрим почему.

Начнем с определения языка программирования:

Язык программирования — формальная знаковая система, предназначенная для записи компьютерных программ. Он определяет набор правил (лексических, грамматических, семантических), задающих внешний вид программы и действия, которые выполнит компьютер под её управлением. [7]

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

Формальный язык — множество слов (строк, цепочек) над алфавитом. [7]
Знаковая система — это система однообразно интерпретируемых и трактуемых сообщений/сигналов, которыми можно обмениваться в процессе общения. В качестве примера знаковой системы обычно приводят язык.
Компьютерная программа — последовательность инструкций, предназначенных для исполнения устройством управления вычислительной машины. [8]
Лeксика — совокупность слов того или иного языка, части языка или слов, которые знает тот или иной человек или группа людей.
Синтаксис — сторона языка программирования, которая описывает структуру программ как наборов символов. Семантика противопоставляется синтаксису языка. Так как семантика описывает больше смысл, значение, а синтаксис – язык. [8]
Семантика в программировании —изучает формализацию значений конструкций языков программирования посредством построения их формальных математических моделей. В качестве инструментов построения таких моделей могут использоваться различные средства, например, математическая логика, теория множеств, теория моделей. Формализация семантики языка программирования может использоваться как для описания языка, определения свойств языка, так и для целей формальной верификации программ на этом языке программирования. [7]
Язык — знаковая система, соотносящая понятийное содержание и типовое звучание.

Так же все языки программирования делятся на две группы: декларативные и императивные. С математической точки зрения, программа на императивном языке программирования решает поставленную задачу, отвечает на вопрос «Как делать?». То есть это последовательность команд, которые должен выполнить исполнитель. [8]

Программа на декларативном языке программирования является сочетанием формализованной в рамках языка программирования задачей и всех необходимых для её решения теорем, проще говоря, дает ответ на вопрос «что делать?». Конкретную последовательность выполняемых действий выполняет компилятор, или чаще интерпретатор – программа, в реальном времени выполняющая код программы без его преобразования в машинный код. [8]

В теории вычислимости исполнитель (множество вычисляющих элементов) называется тьюринг-полным, если на нём можно реализовать любую вычислимую функцию. Другими словами, для каждой вычислимой функции существует вычисляющий её элемент (например, машина Тьюринга) или программа для исполнителя, а все функции, вычисляемые множеством вычислителей, являются вычислимыми функциями (возможно, при некотором кодировании входных и выходных данных). [9]

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

Таким образом, HTML соответствует определению языка программирования, которое мы разобрали, и является декларативным языком. Однако, с его помощью можно совершить только ограниченные действия, что значит, что он не является Тьюринг-полным. В зависимости от контекста, конечно, HTML можно назвать языком программирования, что, вероятно, обычно и происходит. Но тогда HTML такой же язык программирования, как CSS и SQL, ведь он не выполняет задач языка программирования, на нем нельзя произвести вычислений, его задача в отображении данных в браузере.

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

Глава II. Создание Web-страниц.

2.1 Редакторы кода HTML.

HTML код можно писать в простом блокноте или текстовом файле. Важно только указать правильное расширение файла - .html. Традиционно, такой фаил называют Index.html (англ. Index «указатель» + .html— расширение, индексный файл, файл-индекс). [10]

Сейчас существуют специальные программы для разработки HTML кода или IDE. Интегрированная среда разработки (англ. Integrated Development Environment) — система программных средств, используемая программистами для разработки программного обеспечения.

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

Sublime Text 3;
Atom;
VS Code;
WebStorm

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

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

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

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

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

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

- Система контроля версий (от англ. Version Control System) – программное обеспечение для облегчения работы с изменяющейся информацией. Система контроля версиями позволяет хранить несколько версий одного и того же документа, при необходимости возвращаться к более ранним версиям, определять, когда были сделаны те или иные изменения. Облегчает командную работу над проектом. [12]

Рассмотрим самые популярные современные редакторы кода.

- Atom. Atom был выпущен в 2014 году командой GitHub и на данный момент является одним из самых популярных редакторов и имеет быстро растущее сообщество. Эта популярность может быть обусловлена, по крайней мере частично, тем фактом, что Atom с открытым исходным кодом и полностью управляется сообществом. Atom также имеет огромную дополнительную библиотеку. Регулярно выпускаются обновления, однако пользователи жалуются, что при редактировании наблюдается медленная загрузка, особенно при работе с большими файлами. [11]

- Sublime Text 3. Спустя много лет он стал мощным и очень быстрым пользовательским редактором. Он также хорошо известен как чрезвычайно стабильный и может легко обрабатывать очень большие файлы. Интересно, что Sublime Text 3 не видел крупного релиза уже несколько лет. Несмотря на то, что он регулярно обновляется, обновления в основном содержат исправления ошибок наряду с незначительными улучшениями и новыми функциями. Sublime Text 3 по-прежнему находится в стадии бета-тестирования, не смотря на то, что он был выпущен как бета-версия еще в 2013 году. И в настоящее время новостей о новом крупном выпуске нет. Sublime Text 3 очень быстро запускается. Фактически, это происходит почти мгновенно. Он работает очень быстро, без задержек или сбоев, что обеспечивает плавное и эффективное редактирование кода. Как упоминалось выше, он обрабатывает файлы больших размеров очень хорошо. Существует огромное количество мощных надстроек (называемых пакетами), которые делают Sublime Text очень гибким и универсальным. Так же существует достаточно много руководств и видео уроков по Sublime Text 3.[11]

- Webstorm. Продукт JetBrains, является полноценно интегрированной средой для разработки. При минимальной настройке редакторы обладают большим количеством возможностей, на изучение которых нужно время. Базово имеет интеграцию с системами контроля версий, есть отладчик кода, анализирует содержимое проекта и в случае ошибок указывает на них. Продукт платный и доступен к использованию по подписке. Каждый из продуктов отвечает за определённую сферу. WebStorm, к примеру, больше подходит для фронтенд-разработки, а PHPStorm — для написания серверного кода на языке PHP.[11]

Резюмируя все вышесказанное, можно отметить, что у всех редакторов есть свои особенности, минусы и плюсы. Важно понимать, что при выборе редактора стоит учитывать задачу. Если для работы важна скорость редактора, то тут лучшим выбором будет Sublime Text. Он легкий и мало тратит ресурсов компьютера, то есть достаточно быстрый. Если приоритетно удобство или вы совсем новичок в разработке, то тут хорошо подойдёт Atom. Для опытных разработчиков отличным решением будет WebStorm. Так как он требует минимальных настроек для комфортной разработки и обладает большим функционалом.

Я для своей работы остановлюсь на Sublime Text 3, так как он достаточно прост в освоении, и отвечает параметрам, которые мне понадобятся в работе. Он бесплатный, есть много видео уроков, быстро загружается, не перегружен функционалом.

2.2 Структура HTML – документа.

Итак, HTML-документ — это обычный текстовый документ, который может быть создан как в обычном текстовом редакторе (Блокнот), так и в специализированном, (Notepad++, Sublime Text 3)

Если открыть любую веб-страницу, то она будет содержать в себе основные элементы, которые не меняются от вида и направленности сайта. HTML-документ состоит из дерева HTML-элементов и текста. Элементы, как правило, состоят из двух тегов: открывающего и закрывающего. Закрывающий тег образуется путем добавления слэша / перед именем тега: <имя тега> … </имя тега>. [6]

Каждый НТМL-элемент сообщает браузеру какую-либо информацию о тексте, помещенном между открывающим и закрывающим тегами. Эти элементы аналогичны контейнерам, внутри которых помещено содержимое - контент.

Ниже показан код простого документа, содержащего основные теги.

<!DOCTYPE html>

<html>

<head>

<title>Пример веб-страницы</title>

</head>

<body>

<h1>Заголовок</h1>

<p>Первый абзац.</p>

<p>Второй абзац.</p>

</body>

</html>

А вот так этот код отобразится в браузере (Рис. 1).

Рис. 1. Пример простого документа

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу. Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы [13]

Теги в языке html могут вкладываться друг в друга, например, <p><i>Текст</i></p>. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки»), например, следующая запись будет неверной: <p><i>Текст</p> </i>. HTML-элементы так же могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение". Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы. Общее количество атрибутов достаточно велико, но их значения, как правило, можно сгруппировать по разным типам, например, задающих цвет, размер, адрес и др. Каждый тег HTML принадлежит к определенной группе тегов, например, табличные теги направлены на формирование таблиц и не могут применяться для других целей.[14]

Условно теги делятся на следующие типы:

теги верхнего уровня;
теги заголовка документа;
блочные элементы;
строчные элементы;
списки;
таблицы;

Как мы уже рассмотрели, теги <html><head><body> являются тегами верхнего уровня и формируют структуру документа. К тегам заголовка документа относятся элементы, которые располагаются в контейнере <head>. Это теги <title> и<meta>. Все эти теги напрямую не отображаются в окне браузера, за исключением тега <title>. Блочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.

Элемент <html>. Является корневым элементом документа. Элементы, находящиеся внутри тега <html>, образуют дерево документа, так называемую объектную модель документа, DOM (document object model). Все, что находится за пределами тегов, не воспринимается браузером как код HTML и никак им не обрабатывается. [14]

Если представить простой HTML документ в виде дерева, то схематично, оно будет выглядеть вот так. ( Рис. 2)

Рис. 2. Дерево HTML.

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

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

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

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

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

.paper {

width: 200px;

height: 300px;

background-color: #ef4444;

color: #666666;

}

Чтобы подключить к элементу заданный стиль, необходимо через атрибут class присвоить элементу соответствующее название:

...

</div>

CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style, например:

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

Тег <body> также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Тем не менее, большинство атрибутов до сих пор поддерживается разными браузерами.

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

Рассмотрим так же теги, которые часто используются в верстке.

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

<div>

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

Эта группа тегов определяет текстовые заголовки разного уровня, которые показывают относительную важность секции, расположенной после заголовка.

<hr>

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

<p>

Определяет параграф (абзац) текста.

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

<a>

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь.

<br>

Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа <p>, использование тега <br> не добавляет пустой отступ перед строкой.

<i>

Устанавливает курсивное начертание шрифта.

<img>

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>.

<span>

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

Тег <strong> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

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

<ol>

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

<ul>

Устанавливает маркированный список, каждый элемент которого начинается с небольшого символа — маркера.

<li>

Тег <li> определяет отдельный элемент списка. Внешний тег <ul> или <ol> устанавливает тип списка — маркированный или нумерованный.

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

<table>

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

<td>

Предназначен для создания одной ячейки таблицы. Тег <td> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.

<th>

Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.

<tr>

Тег <tr> служит контейнером для создания строки таблицы.

До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов <div>, которым присваивали классы class или идентификаторы id для наглядности разметки (например, <div id="header">). С их помощью в HTML-документе размещали боковые панели, навигацию и многое другое.

Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было <div id="header">, стало <header>). Новые элементы, такие как <section>, <article>, <header> и <nav>, разработаны для того, чтобы обогащать семантическое, то есть смысловое, содержимое документа. [15]

Появились такие секционные теги как:

Секция для вводной информации сайта или группы навигационных ссылок.

Логическая область( раздел) страницы, обычно с заголовком.

Раздел контента, образующий независимую часть документа или сайта

<aside>

Контент страницы, имеющий косвенное отношение к основному контенту.

<nav>

Раздел, содержащий навигационные ссылки по сайту.

Может быть несколько элементов footer на одной странице, и нужно использовать footer вместо <div id = "footer">. Это секция для нижнего колонтитула документа или раздела. [16]

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

Глава III. Создание промо-страницы для бизнеса.

Для своей работы я решила создать простой одностраничный сайт по продаже компостера «Волнуша». Скоро начинается дачный сезон, а мой знакомый решил заняться продажей компостеров. Данный сайт должен помочь ему с этой целью, поэтому и был выбран такой тип сайта: так как именно одностраничные (посадочные) страницы используются для завлечения пользователя. Так же для этого сайта, помимо верстки, мною был разработан дизайн, продумана структура блоков и контентная информация. В рамках данной работы, мы не будем останавливаться на дизайне или программировании форм обратной связи, а рассмотрим только разметку страницы на языке HTML.

Для начала объявляем версию HTML и указываем локализацию странички.

<!DOCTYPE html>

Далее описываем структуру блока <head>

Используется для задания кодировки страницы.

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

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

<title>Супер-компостер "Волнуша"</title>

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

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

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

На этом описание тэга header заканчивается. Переходим к работе над телом сайта – тэгом <body>. При дальнейшей доработке сайта тэг header может быть модифицирован для подключения сторонних библиотек. Для внесения правок в стили сайта можно использовать отдельно подключенный файл custom.css

Весь контент, который находится в body оборачиваем в div - <div class="page__inner">. Данный див служит для задания формы сайта т.е. ограничивание размеров и характеристик странички, описание работы сайта на различных устройствах. Все эти параметры задаются в css таблице стилей. Далее приведем фрагмент кода таблице стилей, который используется для описания page__inner

.page {

-webkit-box-sizing: border-box;

box-sizing: border-box;

-webkit-tap-highlight-color: transparent;

-webkit-text-size-adjust: 100%;

min-width: 320px;

min-height: 100%;

}

Данный блок устанавливает размер страницы в 100%, но не менее 320 px. Это обеспечивает комфортную работу с сайтом на различных устройствах.

Далее, после формирования страницы перейдем к описанию контентной области. Для этого служит <div class="page__content">, который включает в себя:

Где <header class="page-header" role="banner"> - див, используемый для верхней части сайта т.е. шапки с контактами и формой заявки.

Для header используется следующий стиль, описанный в таблице стилей.

.page-header {

display: block;

width: 100%;

margin-left: auto;

margin-right: auto;

padding-left: 15px;

padding-right: 15px;

}

Далее рассмотрим каждый блок секций сайта.

Секция <section class="banner"> - используется для задания верхнего баннера сайта. (Рис.3) Содержит в себе фоновую картинку, кнопку и h1-офер т.е. текст предложения для целевой аудитории. Далее, приведу фрагмент кода, отвечающий за формирования данной секции.

<h1 class="banner__title">Украсьте Ваш сад<br> с пользой для урожая</h1>

<h2 class="title banner__subtitle">Выбирайте Супер-компостер "Волнуша"</h2><a class="btn" href="#form">Заказать</a>

</div>

</section>

Рис. 3. Верхний баннер

Секция <section class="advantages"> - используется для описания преимуществ продукта. (Рис.4) И содержит в себе заголовок уровня h2:

<h2 class="title title--section">Преимущества компостера “Волнуша”</h2>

И описание преимуществ с их разметкой:

<p class="advantages__text">Изготовлен из материала, который не вступает в химическую реакцию с отходами, поэтому экологически безопасен</p>

</li>

Реализованных через списки <ul class="advantages__list">.

Рис. 4. Преимущества

Секция <section class="description"> - используется для описания продукта и состоит из 2 блоков:

При помощи данных блоков реализуется выравнивание контента по левой и правой стороне секции, где левую часть должна занимать картинка продукта, а правую – текстовой описание и кнопка.(Рис. 5)

Рассмотрим css стили данных блоков.

.description__left {

display: inline-block;

max-width: 50%;

vertical-align: middle;

padding: 5px;

}

.description__right {

display: inline-block;

max-width: 50%;

margin-left: 30px;

padding: 0 5px;

padding-bottom: 30px;

vertical-align: middle;

}

Для вставки в левую область картинки используется тэг img –

В правой части секции используем следующие тэги

<h2 class="title title--text">Супер-компостер "Волнуша" 1000 литров</h2>

Для указания заголовка. В данном случае – названия товара.

<p class="description__info">Если вы находитесь в раздумье приобретать готовую модель компостера или сделать из подсобных материалов, то советуем выбирать первый вариант. Конечно для того чтобы компостер Волнуша купить потребуется определенная сумма денег, но ведь это избавит вас от многих неудобств.</p>

Для указания текстового описания товара.

Для указания цены и реализации кнопки с переходом к форме заявки используем следующий html код:

<div class="description__price"><span class="description__cost">280,00 руб.</span><a class="btn" href="#form">Купить</a></div>

Итого получаем секцию следующего вида

<h2 class="title title--text">Супер-компостер "Волнуша" 1000 литров</h2>

<p class="description__ship">Доставка по всей Беларуси</p>

<div class="description__price"><span class="description__cost">280,00 руб.</span><a class="btn" href="#form">Купить</a></div>

</div>

</section>

Рис. 5. Описание товара.

Следующая секция <section class="features">, используется для для описания преимуществ товара. Данная секция включает в себя общее описание продукта и преимуществ, реализованные при помощи списка.(Рис.6)

Общая информация о продукте реализована при помощи h2 заголовка, картинки, оформленной в тэг img, а так же – текстового описания. Приведем фрагмент html кода далее.

<h2 class="title title--section">Конструктивные особенности изделия</h2>

<p class="features__desc">Модель Волнуша является детищем местного производителя. Он не имеет дна, а значит излишки влаги будут проникать в грунт и тем самым помогут избежать переувлажнения компоста. Такая особенность конструкции позволяет быстро выгружать уже созревший компост. Если же необходимо взять только небольшую часть приготовленной смеси, то можно воспользоваться выгрузными люками, расположенными в нижней части изделия, учтите этот аспект чтобы не нарваться на подделку.</p>

Элемент списка представлен в следующем виде.

<dt class="features__settings-title">Высота: 110 см</dt>

<dd class="features__settings-desc">Дачники, увлекающиеся натуральным земледелием знают, что для быстрого созревания компоста его высота и ширина должны быть не менее 1 метраЕго высота составляет 110 см, а диаметр достигает 120 в самом широком месте – у основания.</dd>

</dl>

</li>

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

Рис. 6. Конструктивные особенности.

Секция <section class="video"> используется для вставки видео ролика с ютуба при помощи iframe. (Рис.7) Далее приведем код всей секции. Помимо вставки кода видеоролика данная секция не содержит никакой специфической информации и в дополнительных пояснениях не нуждается.

<h2 class="title title--section video__title">Посмотрите видео об особенностях изделия</h2>

</div>

</section>

Рис. 7. Блок с видео.

После описанных секций идет завершающий блок сайта - <div class="page__footer-wrapper">.

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

Блок <div class="page__footer-wrapper"> состоит из фонового изображения, описанного в css таблице стилей и формы заявки. Рассмотрим HTML код формы заявки:

<legend class="form__legend">Закажите супер-компостер волнуша прямо сейчас с доставкой по всей Беларуси </legend>

<p class="form__text">Для этого заполните форму ниже</p>

</span>

</label>

</span>

</label>

<button class="btn btn--main form__btn" type="submit" name="submit">Заказать</button>

</fieldset>

</div>

</form>

Данная форма содержит заголовок, оформленный в тэг:

<legend class="form__legend">Закажите супер-компостер волнуша прямо сейчас с доставкой по всей Беларуси </legend>

2 поля для ввода номера мобильного телефона и имени заказчика, которые имеют вид:

Важно отметить в данных полях атрибут requaired="requaired", который указывает на обязательность заполнения полей

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

<button class="btn btn--main form__btn" type="submit" name="submit">Заказать</button>

Сам блок по итогу выглядит так. (Рис.8)

Рис. 8. Экран с формой.

После блока footer’a страница заканчивается и происходит закрытие тэгов body и закрытие тэга html.

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

ЗАКЛЮЧЕНИЕ

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

В ходе выполнения курсовой работы, были выполнены следующие задачи. В частности, была рассмотрена история создания и развития языка HTML от первого гипотетического прототипа, до спецификации HTML5. Определено, что, в зависимости от контекста, называть язык разметки – языком программирования, не совсем корректно, несмотря на то, что многие интернет источники до сих пор продолжают это делать. Так же были рассмотрены основные инструменты создания Web-страниц, в рамках этой курсовой работы, были описаны преимущества и недостатки, популярных на данный момент, современных редакторов кода, потому как я считаю это важным инструментом в разработке сайта, так как это экономит время и помогает лучше визуально понимать структуру кода. Были определены основные понятия языка HTML, такие как: теги, атрибуты тегов, семантика, вложенности. Была разобрана структура страницы и описаны основные теги, в том числе рассмотрены новые теги HTML5. Таким образом, заданная изначально цель была выполнена, а именно, разработана и сверстана промо-страница для представления и продажи компостера «Волнуша», которая так же выполняет свои цели для бизнеса и заказчика.

БИБЛИОГРАФИЧЕСКИЙ СПИСОК

Официальный сайт Тима Бернерса-Ли // Tim Berners-Lee URL: https://www.w3.org/People/Berners-Lee/ (дата обращения: 01.04.2019)
Э. Фримен, Э. Фримен. Изучаем HTML, XHTML и CSS = Head First HTML with CSS & XHTML. — П.: «Питер», 2010. — 656 с.
Черняк Л. Гипертекст — от Memex до Wiki (рус.) // Открытые системы. СУБД : журнал. — 2003. — № 11.
W3C URL: https://www.w3.org/Consortium/ (дата обращения: 20.03.2019).
Интернет технологии URL: https://www.internet-technologies.ru/articles/istoriya-yazyka-html.html (дата обращения: 04.04.19)
HTML5, CSS3 и JavaScript. Исчерпывающее руководство / Дженнифер Роббинс; [пер. с англ. М. А. Райтман]. — 4-е издание. — М.: Эксмо, 2014. — 528
Гладкий А. В. Формальные грамматики и языки. — М.: Наука, 1973. — 368 с.
Криницкий Н. А., Миронов Г. А., Фролов Г. Д. Программирование. — ГИФМЛ, 1963. — 384 с.
Полнота по Тьюрингу // Академик URL: https://dic.academic.ru/dic.nsf/ruwiki/22393[8] (дата обращения: 20.03.2019).
Основы HTML // HTML Book URL: https://html5book.ru/osnovy-html/#part1 (дата обращения: 19.03.2019).
Обзор редакторов кода. // HTML Academy URL: https://htmlacademy.ru/blog/40-editors-for-the-coders (дата обращения: 19.03.2019).
IDE // Education-Ecosystem Blog URL: https://blog.education-ecosystem.com/ide-для-wordpress/ (дата обращения: 21.03.2019)
Doctype // htmlbook.ru URL: http://htmlbook.ru/html/!doctype (дата обращения: 21.03.2019).
Фримен Э., Робсон Э. Ф88 Изучаем программирование на HTML5. — СПб.: Питер, 2013. — 640 с.
Структура HTML5 // Интернет технологии URL: https://www.internet-technologies.ru/articles/struktu..(дата обращения: 23.03.2019)
Html5 // html5book.ru URL: https://html5book.ru/html-tags/ (дата обращения: 23.03.2019)