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

Стремительное развитие информационных технологий неразрывно связано с развитием веб-программирования как базы для реализации доступа к Интернет-ресурсам и построения этих ресурсов как веб-объектов.

Основу веб-разработки документов составляет язык разметки гипертекста HTML, разработанный в 1990-х гг. ХХ века одним из сотрудников Европейского института физики частиц и к настоящему моменту прошедший ряд преобразований до стандарта HTML5, который с октября 2014 года является официально рекомендованным стандартом, предназначенным для создания гипертекстовых документов в среде Web. Таким образом, выбранная тематика курсовой работы актуальна и практически целесообразна.

Объектом исследования в работе являются подходы к разработке сайтов с применением HTML, предметом исследования – непосредственная разработка сайта с четко ориентированной ознакомительной тематикой, совпадающей с темой данной курсовой работы – «Основы программирования на языке HTML».

В ходе выполнения работы следует решить следующие задачи:

- выполнить обзор учебно-методической и научной литературы в соответствии с темой работы;

- провести анализ теоретических аспектов разработки веб-страниц;

- изучить практические подходы к разработке веб-страниц средствами HTML;

- реализовать разработку веб-сайта в соответствии с заявленной тематикой.

1. Язык разметки гипертекста. Основные принципы построения HTML-документов

1.1 История развития и стандарты

Специальный язык, содержащий управляющие конструкции построения и организации web-страниц, носит название HTML (Hyper Text Markup Language, язык разметки гипертекстовой информации).

Начало истории HTML относят к 1969 году, когда работник компании IBM Чарльз Гольдфарб создал прототип языка для разметки технической документации, в последствии названный GML, в 1986 году он получил статус международного стандарта SGML (Standard Generalized Markup Language). Этот обобщенный метаязык был предназначен для построения систем логической, структурной разметки любых разновидностей текста (устанавливает синтаксис записи элементов разметки, правила определения новых элементов и указания структурных отношений между ними).

Принципы, на которых был построен SGML, были изначально положены в основу при создании системы передачи гипертекстовой информации через Интернет. Таким образом, HTML был предложен сотрудником Европейского института физики частиц (CERN) Тимом Бернесом-Ли в 1989-1991 гг. и разделял все особенности идеологии SGML. При этом версии HTML1 официально никогда не существовало и первой официальной версией стала спецификация HTML 2.0, опубликованная в 1994 году IETF (Internet Engineering Task Force) как рекомендованный стандарт.

В марте 1995 года W3C (Консорциум Всемирной паутины) ввел стандарт HTML 3.0, позволивший обеспечить возможности создания и форматирования таблиц, изображений. Следующей в январе 1997 года стала версия 3.2 (при этом принятой версии 3.1 не существовало), позволившая поддерживать использование нестандартных элементов при оформлении web-страниц, например, таких, как gif-изображения.

В декабре 1997 года принят стандарт HTML 4.0, в котором многие элементы были приняты устаревшими и не рекомендованными к использованию (например, рекомендовано для оформления стилей текста использовать CSS – каскадные таблицы стилей, а не теги чистого HTML). В мае 2000 года был утвержден стандарт ISO/IEC 15445:2000 (ISO HTML), основанный на HTML 4.01.

В настоящее время W3C совместно с WHATWG (сообществом специалистов по HTML и API) разрабатывается стандарт HTML 5, официально введенный в 2014 году, но при этом используемый разработчиками ориентировочно с 2012-2013 гг. Версия HTML 5.1 рекомендована к применению с ноября 2016 года, 5.2 – с декабря 2017 года, 5.3 – представлена в декабре 2018 года. При этом стандарт продолжает активно развиваться. Целью разработки данного стандарта являлось улучшение уровня поддержки мультимедиа-технологий с одновременным сохранением совместимости с предыдущими стандартами.

С октября 2014 года HTML5 является официально рекомендованным стандартом, предназначенным для создания гипертекстовых документов в среде Web. При этом HTML-документы могут просматриваться различными типами web-браузеров и создаваться при помощи любого текстового редактора или специализированных HTML-редакторов.

1.2 Синтаксис HTML

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

Тег – элемент HTML, представляющий собой текст, заключенный в угловые скобки (<>). Тег является активным элементом, изменяющим представление следующей за ним информации. Тег может иметь атрибуты. Теги, как и скобки, бывают парными – в этом случае открывающему тегу <A> должен соответствовать закрывающий тег </A>. Кроме того, теги могут быть непарными, без закрывающего тега.

Теги HTML могут быть условно разделены на две категории:

- теги, определяющие, как будет отображаться web-браузером тело документа в целом;

- теги, описывающие общие свойства документа, такие как заголовок или автор документа.

Тег HTML состоит из следующих друг за другом в определенном порядке элементов:

- левой угловой скобки (<);

- необязательной косой черты (/), которая означает, что тег является конечным тегом, закрывающим некоторую структуру;

- идентификатора (имени) тега;

- необязательных атрибутов;

- правой угловой скобки (>).

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

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

Спецификация атрибута включает в себя:

- идентификатор (имя) атрибута;

- знак равенства (=);

- значение атрибута, которое задается строкой символов в кавычках (“80”).

При этом регистр букв в идентификаторах (именах) тегов и атрибутов (но не в значениях атрибутов) не учитывается.

Кроме тегов в языке HTML используется специальный управляющий символ &-амперсанд. Этот символ предназначен для вывода специальных символов и символов из расширенной кодовой таблицы, которые нельзя ввести с клавиатуры (например, символ копирайта и т.д.)

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

Документы HTML могут быть созданы при помощи любого текстового редактора или специализированных редакторов HTML-документов. Наиболее простым способом является создание HTML-документа при помощи Блокнота (например, Notepad++), в котором код HTML записывается в виде обычного текста, а затем сохраняется с расширением *.html. Тогда при открытии этого документа будет открываться окно браузера, отображающее созданный HTML-документ.

Документы HTML имеют следующую структуру:

- объявление версии HTML;

- объявление HTML-документа;

- заголовок;

- тело документа;

- комментарии.

1.3.1 Объявление версии HTML

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

Используется следующий синтаксис для стандартов до HTML 4.01 включительно:

<!DOCTYPE [Элемент верхнего уровня] [Публичность] “[Регистрация] //[Организация]//[Тип] [Имя]//[Язык]“ “[URL]“>

Данный тег является непарным тегом с параметрами:

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

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

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

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

5) тип - тип описываемого документа. Для HTML значение указывается DTD.

6) имя - уникальное имя документа для описания DTD.

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

8) URL - адрес документа с DTD.

Например:

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

В HTML5 используется более удобный вариант: <!DOCTYPE HTML> для всех типов документов.

1.3.2 Объявление HTML-документа. Заголовок

Пара тегов <HTML> и </HTML> сообщает браузеру, что между ними заключен документ в формате HTML, причем первым тегом в документе должен быть тег <HTML> (в самом начале документа), а последним - </HTML> (в самом конце документа). Браузер интерпретирует полученный документ как HTML-документ только при наличии в его начале тега <HTML>.

Теги <HEAD> и </HEAD> представляют собой заголовок, представляющий общее описание документа. Как правило, между ними рекомендуется указывать информацию о документе (название, ключевые слова для поиска, описание и т.д.). Метатеги, входящие в этот тег, определяют служебную информацию, они являются непарными и имеют вид <META атрибут>. Атрибуты тега следующие:

http-equtv=”…” (определяет тип свойства);

value=”…” (определяет свойство);

content=”…” (задает значение свойства);

url=”…” (задает адрес программы для свойства);

name=”…” (дополнительное описание свойства).

Чтобы дать название HTML-документу, текст помещается между тегами <TITLE> и </TITLE>.

Также внутри контейнера <HEAD> допускается использование элементов <BASE> (указание полного базового адреса текущего документа), <BASEFONT> (задание шрифта, размера и цвета текста по умолчанию), <BGSOUND> (определяет музыкальный файл, который будет проигрываться на web-странице при ее открытии), <LINK> (позволяет установить связь с внешним документом, например с файлом стилей), <SCRIPT> (предназначен для описания скриптов, может содержать ссылку на программу), <STYLE> (определение стилей элементов страницы).

1.3.3 Тело HTML-документа

Тело документа следует сразу за заголовком и находится между парой тегов <BODY> и </BODY>. Первый из них должен стоять сразу после тега <HEAD>, а второй – перед тегом </HTML>. Тело HTML-документа – это собственно информация документа, отформатированная средствами HTML. Тег <BODY> имеет атрибуты, которые перечислены ниже:

bgcolor=”…” (определяет цвет фона документа);

background=”…” (указывает браузеру местоположение рисунка, который необходимо использовать в качестве фонового рисунка);

text=”…” (устанавливает цвет текста);

alink=”…” (определяет цвет активной ссылки);

link=”…” (определяет цвет непросмотренной ссылки);

vlink=”…” (определяет цвет просмотренной ссылки);

bottommargin=”…” (устанавливает отступ от нижнего края окна до контента);

topmargin=”…” (устанавливает границу верхнего поля);

leftmargin=”…” (устанавливает границу левого поля);

rightmargin=”…” (устанавливает границу правого поля);

bgproperties=”fixed” (в случае установки данного параметра фоновое изображение не будет прокручиваться вместе с текстом);

SCROLL=”…” (устанавливает, отображать полосы прокрутки или нет);

onload=”…” (определяет те действия браузера, которые должны произойти после загрузки документа из сети).

В стандарте HTML5 введен контейнер <HEADER>…</HEADER>, позволяющий задать верхнюю область (т.н. шапку) страницы или раздела, в которой обычно размещается заголовок. Основное содержимое документа рекомендовано размещать в контейнере <MAIN>…</MAIN>, причем содержимое должно быть уникальным и не включать типовые блоки (заголовок, панели и пр.). Также в стандарте HTML5 введен контейнер <FOOTER>…</FOOTER>, позволяющий задать нижнюю область (т.н. подвал) страницы или раздела, в которой могут размещаться данные автора, контакты и т.п.