Файл: Основы программирования на языке html.pdf

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

Основой информационного наполнения сети Интернет являются ее пользователи, публикующие в сети различные материалы, размещаемые на информационных ресурсах, роль которых выполняют web-сайты – одна или несколько связанных между собой электронных страниц, на которых опубликована различная информация (текст, файлы, изображения и т.п.).

Если провести аналогию с реальным миром, любой сайт можно представить в виде бумажной книги. Кто-то придумал о чем она будет и написал ее (наполнил сайт информацией), дал ей название (в роли названия у сайта выступает уникальный идентификатор, по которому сайт можно найти среди множества подобных, например, www.yandex.ru) издатель напечатал книгу на бумаге (сайты создаются программистами).

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

Целью работы является получение знаний о языке программирования HTML и изучению основ его использования (программирования на нем). При написании работы я ставлю перед собой следующие задачи:

Раскрытие сведений о языке программирования HTML;
Рассмотрение процесса создания сайта;
Рассмотрение инструментов (CASE-средств) создания сайтов;
Получение навыков практического применения языка программирования HTML, в виде создания простого сайта.

1. Язык программирования HTML

1.1. Назначение HTML

Аббревиатура HTML расшифровывается, как Hyper Text Markup Language, что в переводе на русский язык обозначает – язык гипертекстовой разметки. Термин «гипертекст» обозначает систему текстовых страниц, имеющих перекрестные ссылки. В качестве примера из реального мира можно взять энциклопедию, книгу, не только позволяющую осуществлять поиск по определенным словам, информация о которых содержится на определенных страницах, к которым нужно перейти, но, также, ссылающуюся на материалы, послужившие основанием для ее подготовки, т.е. на другие книги.

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли, примерно во второй половине 80-xx годов прошлого века и был ориентирован на ученых, людей, не обладающих навыками программирования и верстки, но испытывающих потребность в публикации своих работ. Язык с этой задачей справляется на отлично и позволяет в короткие сроки создать электронный документ, красиво оформленный одинаково отображающийся на устройствах вывода информации, обладающих различными характеристиками.

1.2. Стандартизация HTML

За 30-ти летнюю историю HTML претерпел несколько редакций. Актуальной версией языка на сегодняшний день является HTML 5, стандарт которого вышел в 2014 году.

Стандарт языка определяет то, каким образом должны создаваться web-страницы и приложения с его использованием.

Стандартизация языка HTML осуществляется Консорциумом Всемирной паутины (англ. World Wide Web Consortium, W3C) — организацией, разрабатывающей и внедряющей технологические стандарты для Всемирной паутины. Основателем и главой консорциума является сэр Тимоти Джон Бернерс-Ли, автор множества разработок в области информационных технологий.

С рекомендациями W3C по HTML можно ознакомиться , перейдя по ссылке (только на английском языке): https://www.w3.org/2014/10/html5-rec.html.en

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

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

1.3. Инструментарий для создания и просмотра HTML-документов

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

Отличительной особенностью языка HTML является его простота, универсальность и отсутствие необходимости в специальных средах для разработки WEB-страниц и приложений. Это означает, что веб страница может создана с использованием любого, самого простого текстового редактора. Выполнив разметку текста в документе с помощью тегов HTML, достаточно сохранить текстовый файл с разрешением *.htm или *.html, чтобы он мог быть открыт браузером.

HTML-документ оформленный в соответствии с рекомендациями W3C может быть просмотрен в браузерах различных типов различных операционных систем. При этом видимое оформление отдельных элементов WEB-страницы в различных браузерах может отличаться (как правило, незначительно).

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

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

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

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

Рисунок 1Пример подсвестки синатксиса языка и работы функции автоотступов.

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

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

Рисунок 2Работа функции автодополнения.

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

Пример CASE-средства для разработки WEB-страниц и приложений: Coda2 (Panic inc., https://panic.com/coda/).

Рисунок 3Рабочее окно среды разработки WEB-страниц Coda2 (для ОС MacOS)

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

2.1. Разметка документа

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

Теги могут быть парными и одиночными. При этом, любой тег начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобкой), регистр при вводе текста не важен.

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

<открывающий тег> Форматируемый текст </закрывающей тег>

Или, на примере тега <title>:

<title> Заголовок документа </title>.

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

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

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

Например, следующая разметка, сообщит браузеру, что текст нужно отобразить отдельным абзацем и выделить в нем слово «документ» жирным шрифтом (результат обработки браузером приведен следом):

Это мой первый документ на языке HTML

Рисунок 4Интерпретация браузером разметки Это мой первый документ на языке HTML

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

2.3. Структура HTML-документа

Прежде, чем приступить к рассмотрению типовой структуры HTML-документа, в качестве отступления, стоит сказать, что она сформировалась не сама по себе, а определяется объектной моделью страницы – Document Object Model (DOM), которая позволяет браузеру корректно отображать на странице отдельные элементы, их последовательности, корректно работать с зависимостями элементов. Фактически, прежде, чем отобразить страницу, браузер при открытии HTML-документа сначала выполняет построение его структуры. Браузером определяется, какой тег является корневым, родительским, дочерним, вложенным. При построении дерева каждый тег выступает в роли узла, из которых и строится дерево страницы.

Рисунок 5Пример DOM, построенного на основании HTML документа.

Итак, типовая структура HTML-документа состоит из следующих разделов:

<!DOCTYPE>

<html>

</html>

Давайте разберем каждый из них.

Раздел, помечаемый тегом <!DOCTYPE>

При разработке HTML-документа, первое, что нужно сделать, указать, в какой версии языка HTML размечается документ. По состоянию на сегодняшний день язык претерпел около десятка редакций и актуальная версия языка – это HTML 5 (разрабатываются версии 5.1 и 5.2). Правила HTML содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой документ, определяющий, какие теги, атрибуты и их значения действительны для конкретной версии языка HTML. Для каждой версии HTML есть свой DTD.