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

Исключена еще часть устаревших тегов [Джейсон К. Т. "HTML и XHTML для Internet "3-е издание./ К. Т Джейсон. НТ Пресс, 2014 г.].

Стало больше внимания уделяться поддержке скриптов, например javascript

На данный момент развитие HTML продолжается…

HTML5 Актуальным на 2018 год является пятый стандарт HTML, черновик которого появился в конце 2007 года. Им было введено много новых элементов и атрибутов, сделан особый акцент на семантичность веб-страниц и их доступность для пользователей с ограниченными возможностями. Язык продолжает активно развиваться и улучшаться[Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.].

Глава 2. Описание языка HTML

2.1 Основные термины, которые употребляются в HTML:

Аббревиатура HTML расшифровывается как HyperText Markup Language. То есть HTML – это язык гипертекстовой разметки размещенных в интернете документов. Благодаря его использованию браузеры получают информацию о том, как отображать различные элементы веб-страниц. Некоторые пользователи путают HTML с языками программирования, однако с его помощью нельзя выполнить какие-либо действия – к примеру, открыть всплывающее окно [Муссиано Ч., Кеннеди Б. "HTML и XHTML. Подробное руководство" 6-е издание./ Ч. Муссиано, Б. Кеннеди. - Символ-Плюс, 2008 г.]. Это всего лишь разметка – подобная той, с которой сталкивался каждый пользователь программы Microsoft Word.

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

Рассмотрим основные термины, которые употребляются в HTML:

Элемент (element) - конструкция языка HTML. Это объект, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста — возможность вложения элементов [ Дуванов А. А. "Web-конструирование. HTML и XHTML " БХВ./ А. А. Дуванов -Петербург, 2015 г.].

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

Атрибут (attribute) - параметр или свойство элемента. Другими словами это переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартных или произвольных. Предполагается, что символьные значения атрибутов заключаются в прямые кавычки, но некоторые браузеры позволяют не использовать кавычки. Это объясняется тем, что тип атрибута всегда известен заранее. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами [Рева О. Н. "Использование HTML и XHTML, JavaScript и CSS. Руководство" Web-дизайнера./ О. Н. Рева - Эксмо, 2014 г.].

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

Фрейм (frame) - этот термин имеет два значения. Первое — область документа со своими полосами прокрутки. Второе значение — одно изображение в сложном (анимационном) графическом файле (похожее на  кадр из кинофильма). Также возможно вместо термина «фрейм» в специальной литературе и локализованных программных продуктах можно встретить термин «кадр» или «рамка» [Джон Д. "HTML, XHTML. Основы веб-программирования с использованием " 2-е издание./ Д. Джон. - Эксмо, 2010 г. ].

HTML-файл или HTML-страница - документ, созданный в виде гипертекста на основе языка HTML. Такие файлы имеют расширения htm или html.

Апплет (applet) - программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.

Скрипт или сценарий (script) - программа, включенная в состав Web-страницы для расширения ее возможностей.

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

CGI (Common Gateway Interface) - общее название для программ, которые, работая на сервере, позволяют расширить возможности Web-страниц. Например, без таких программ невозможно создание интерактивных страниц.

Код HTML - гипертекстовый документ в своем первоначальном виде, когда видны все элементы и атрибуты.

Web-страница - документ (файл), подготовленный в формате гипертекста и размещенный в World Wide Web [Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.].

Сайт (site) - набор Web-страниц, расположенных в одном месте и связанных между собой.

Браузер (browser) - программа для просмотра Web-страниц.

Загрузка (downloading) - копирование файлов с сервера на компьютер-клиент.

URL (Uniform Resource Locator) или универсальный указатель ресурса, адрес некоторого объекта в Интернете, т.е. типичный URL для WWW, имеет вид: http://www.название.домен/имя файла.

Все элементы языка можно условно разделить на три группы. К первой относятся элементы, которые создают структуру гипертекстового документа. Использование таких элементов - необходимая формальность, которой нельзя пренебрегать [HTML5. Для профессионалов, 2-е издание, Гоше Хуан Диего - 2014 год].

Ко второй группе можно отнести элементы, создающие эффекты форматирования. Их использование диктуется конкретными требованиями к документу, фантазией и компетенцией разработчика, К третьей группе относятся элементы, которые позволяют управлять программными средствами, установленными и работающими на компьютере-клиенте [Агулар Р. "HTML и XHTML. Основа любого сайта "/ Р. Агулар.- Эксмо, 2010 г.]. Часто такие элементы создаются автоматически, когда разработчик использует для вставки некоторого объекта в документ гипертекстовый редактор или подобную программу.

2.2 Структура веб-страницы

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

Рис.1 Простейшая структура веб-страницы

Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские [Комолова, Н., Яковлева Е."HTML и XHTML. Самоучитель "2-е издание./ Н. Комолова, Е. Яковлева. - Питер, 2011 г.].

Предок — элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является <html>. В то же время элемент <body> является предком для всех содержащихся в нем тегов: <h1>, <p>, <span>, <nav> и т.д. [Муссиано Ч., Кеннеди Б. "HTML и XHTML. Подробное руководство" 6-е издание./ Ч. Муссиано, Б. Кеннеди. - Символ-Плюс, 2008 г. ]

Потомок — элемент, расположенный внутри одного или более типов элементов. Например, <body> является потомком <html>, а элемент <p> является потомком одновременно для <body> и <html> [Джон Д. "HTML, XHTML. Основы веб-программирования с использованием " 2-е издание./ Д. Джон. - Эксмо, 2010 г. ].

Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 <html> является родительским только для <head> и <body>. Тег <p> является родительским только для <span>.

Дочерний элемент — элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы <h1>, <h2>, <p> и <nav> являются дочерними по отношению к <body>.

Сестринский элемент — элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 <head> и <body> — элементы одного уровня, так же как и элементы <h1>, <h2> и <p>являются между собой сестринскими.

2.3 Основные теги языка HTML

HTML-код включает в себя тэги – специальные команды, при помощи которых задается разметка каждой страницы сайта. Тэги могут быть открывающими и закрывающими и отвечать каждый за свою задачу. Например, с помощью тэга <p> можно выделить абзац из текста, а при помощи команд<table>, <tr> и <td> создается таблица [Агулар Р. "HTML и XHTML. Основа любого сайта "/ Р. Агулар.- Эксмо, 2010 г.].

Выполнить создание сайта на html можно в текстовом редакторе Блокнот, написав соответствующие тэги, не забыв про открытие и закрытие тега и изменив расширение .txt на .html. Для тех, кто не знаком с программированием HTML, были разработаны специальные редакторы, позволяющие создавать сайт из готовых блоков и автоматически генерирующие код. Самыми распространенными из них считаются FrontPage, Dreamweaver и HomeSite [HTML5. Для профессионалов, 2-е издание, Гоше Хуан Диего - 2014 год]. Она облегчают работу по созданию сайта, на засоряют код ненужными элементами. Поэтому даже многие неопытные разработчики стараются осваивать язык гипертекстовой разметки и составлять HTML-код самостоятельно.

Все документы HTML имею соответствующее расширение, такое как, Index.html. это сделано для работы браузера и правильного отображения нужной страницы. Все файлы, используемые для создания сайта, желательно хранить в одной директории, что в дальнейшем существенно облегчит вам жизнь. При создании документа HTML требуется строго следовать структуре документа. Открывается документ специальным тегом , который содержит актуальную на данный момент версию HTML. В настоящее время используется пятая версия языка гипертекстовой разметки. Затем следуют открывающие и закрывающие теги, которые образуют основу документа. [Джейсон К. Т. "HTML и XHTML для Internet "3-е издание./ К. Т Джейсон. НТ Пресс, 2014 г.].

Внутри специального тега находится специфическая информация, которая является важной частью страницы и HTML. Именно там закладываются основы построения сайта, производится настройка кодировки и вставляется название сайта. Оно находится внутри обязательного тега . название сайта пользователь может видеть в верхней части браузера, там же может находиться и иконка. Для правильного отображения сайта следует сначала грамотно настроить кодировку[Рева О. Н. "Использование HTML и XHTML, JavaScript и CSS. Руководство" Web-дизайнера./ О. Н. Рева - Эксмо, 2014 г.].

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE> [ Дуванов А. А. "Web-конструирование. HTML и XHTML " БХВ./ А. А. Дуванов -Петербург, 2015 г.].

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы.

Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать предпочтительнее [Муссиано Ч., Кеннеди Б. "HTML и XHTML. Подробное руководство" 6-е издание./ Ч. Муссиано, Б. Кеннеди. - Символ-Плюс, 2008 г. ].

Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа [Агулар Р. "HTML и XHTML. Основа любого сайта "/ Р. Агулар.- Эксмо, 2010 г.].

Например, в строгом HTML и XHTML непременно требуется наличие тега <title>, а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе [Агулар Р. "HTML и XHTML. Основа любого сайта "/ Р. Агулар.- Эксмо, 2010 г.].

Метатеги отображают данные о структуре страницы и обычно находятся между <head> и <\head> .

Элемент <meta>

Необязательным тегом раздела <head> является одинарный тег <meta>. С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент <head> может содержать несколько элементов <meta>, потому что в зависимости от используемых атрибутов они несут различную информацию [Джейсон К. Т. "HTML и XHTML для Internet "3-е издание./ К. Т Джейсон. НТ Пресс, 2014 г.].