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

ВВЕДЕНИЕ

HTML это аббревиатура от слов HyperText Markup Language - язык гипертекстовой разметки, который предназначен для написания гипертекстовых документов, публикуемых в World Wide Web (WEB).

HTML был создан Тимом Бернерсом-Ли, сотрудником Европейского института физики элементарных частиц (CERN) в 1991-1992 годах, он был основан на языке SGML -Standart Generalized Markup Language (стандартный обобщенный язык разметки). Основной принцип SGML - внедрение в текст управляющих конструкций, которые разделяли элементы структуры, но не содержали информации о том, как эти структуры должны отображаться. Из-за отсутствия средств, позволяющих отображать информацию в соответствии с SGML разметкой, данный язык не был широко востребован. В сентябре 1993 года группа программистов Национального центра суперкомпьютерных приложений США (NCSA) выпустила первый (и на долгое время единственный) графический браузер Mosaic, благодаря которому язык HTML получил широкое распространение. Официальной спецификации HTML 1.0 не было принято до 1995 года существовало множество неофициальных стандартов HTML. В сентябре 1995 года организацией Internet Engineering Task Force (IETF) был принят стандарт HTML 2.0. Стандарт HTML 2.0 вобрал в себя всю сложившуюся к 1994 году практику создания веб-сайтов.

В начале 1997 года международной организацией Консорциума Всемирной паутины (World Wide Web Consortium, W3C) был принят стандарт 3.2 этого языка (версия 3.0 была совместима со второй версией, но ее реализация была сложна для браузеров того времени; версия 3.1 официально никогда не предлагалась). В 1997 году консорциум W3C опубликовал версию HTML 4.0 в качестве рекомендации, которая включила дополнительные специальные расширения браузеров, но попыталась также рационализировать и очистить HTML. Многие элементы и атрибуты (в основном касающиеся визуального оформления) были помечены как не рекомендуемые. В конце 1999 года была утверждена спецификация 4.01. которая и используется в настоящее время Основное новшество последнего стандарта состоит в появлении каскадных таблиц стилей (CSS - Cascading Style Sheets). Работа над черновой версией спецификации HTML 5 началась в марте 2008 года. Для этого была сформирована специальная группа, объединившая порядка пятисот участников, среди которых специалисты таких компаний, как Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, BEA Systems, Cisco, France Telecom и Hewlett-Packard.

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

С 28 октября 2014 года W3C официально рекомендует использовать HTML5.

Цель работы: изучение основы программирования на языке HTML.

Задачи исследования:

• Проанализировать литературу по теме курсовой работы.
• Рассмотреть основы языка гипертекстовой разметки HTML.
• Изучить структуру HTML документа.
• Охарактеризовать основные компоненты языка HTML (теги).
• Выявить особенности работы с языком гипертекстовой разметки HTML.

1. Основы языка HTML

Всемирная паутина World Wide Web (WWW) соткана из Web-страниц, которые создаются с помощью так называемого языка разметки гипертекста HTML (Hypertext Markup Language). Хотя многие говорят о программировании на этом языке, HTML вовсе не является языком программирования в традиционном понимании. HTML — язык разметки документа. При разработке HTML-документа выполняется разметка текстового документа точно так же, как это делает редактор при помощи красного карандаша. Эти пометки служат для указания формы представления информации, содержащейся в документе: где, будут заголовки, что выделить цветом или может подчеркнуть, а где будут находиться иллюстрации.

HTML язык представляет собой совокупность команд, которые называемых тегами (от английского слова tag). Их добавление в простой тестовый документ позволяет получить единообразно оформленные и связанные между собой ссылками «web-страницы». Документ же при этом получает название гипертекстового, как содержащего внутри себя ссылки на другие документы. [1, c. 19]

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

Отметим одну важную особенность этого языка. HTML является подмножеством мощного языка SGML (Standard Generalized Markup Language), широко используемого в издательской деятельности (на нем, например, готовятся и печатаются журналы Physical Review и Physical Review Letters). Основная задача SGML - определить, как автору следует разметить текст и указать положение рисунков, чтобы издатель, не перенабирая текст, а изменив лишь несколько строк в стилевых файлах, мог изменять формат текста (например, переходить к набору в две колонки) и получать при этом полиграфический совершенный результат. Основной выигрыш от использования этих языков состоит в переносимости текста между разными издательскими системами. Эта же особенность - приоритет читателя над автором - в значительной степени сохраняется и в HTML. Так, читая документ, пользователи могут устанавливать способы выделения текста, гарнитуру и размер шрифтов по своему вкусу; они могут отменить просмотр рисунков. Компьютеры пользователей могут иметь экраны разных размеров с разным разрешением, в результате чего максимальное количество символов, выводимых в строке, будет различным и т. д. Всю эту адаптацию к условиям пользователя и выполняет программа просмотра. При этом, если текст HTML был написан неправильно, вид документа в окне программы просмотра может исказиться до неузнаваемости. Ясное понимание этой особенности языка HTML и следование формальным правилам разметки текста позволит создавать документы, хорошо выглядящие во всех программах просмотра на разных типах компьютеров. [2, c. 5]

Для просмотра HTML-документов используются специальные программы, которые называют браузерами. Они позволяют интерпретировать файлы, размеченные по правилам языка HTML, форматировать их в виде Web-страниц и отображать на экране компьютера пользователя. Существует большое количество программ-браузеров, разработанных различными компаниями, каждый из которых имеет свои уникальные особенности. На сегодняшний день наибольшей популярностью пользуются Google Chrome, Firefox, Internet Explorer и Opera. [1, c. 19]

Создавая web-страницы, стоит помнить об огромном разнообразии представленных средств отображения гипертекста, и добиваться корректного (универсального) отображения во всех браузерах, просматривая страницы в большинстве из них и соответствующим образом корректируя. [1, c. 20]

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

• текст;
• специальные последовательности символов;
• флаги разметки.

Графическая и звуковая информация, включаемая в HTML-документ при помощи специальных команд, хранится в отдельных файлах. Программы просмотра HTML-документов, такие как, например, Microsoft Internet Explorer пли Google Chrome, интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащих HTML-документы, принято расширение .htm или .html.

Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр и специальных символов (например, +, #, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл:

< (Less Than);

> (Greater Than);

& (Ampersand);

" (Double Quote).

Символ табуляции, символ возврата каретки и символ перехода на новую строку считаются эквивалентными пробелу, а несколько следующих друг за другом пробелов и/или табуляций, и/или символов возврата каретки, и/или символов перехода на новую строку эквивалентны одному пробелу, за исключением случая предварительно отформатированного текста. [2, c 6]

Если необходимо включить в текст какой-либо из четырех зарезервированных символов < > & ”, который, как было сказано выше, не может быть помещен в текст непосредственно, следует закодировать его специальной последовательностью символов. Каждая специальная последовательность начинается амперсандом (&) и заканчивается точкой с запятой (;). Зарезервированные символы представляются следующими последовательностями:

< &lt;

> &gt;

& &amp;

" &quot;

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

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

<тег атрибут1="значение” атрибут2="значение">

<тег атрибут1=’'значение" атрибут2="значение">...</тег> <тег параметр1="значение" параметр2="значение’’> <тег параметр1="значение" параметр2="значение’’> ...</тег>

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

Парные теги, называемые по-другому контейнеры, состоят из двух частей — открывающий и закрывающий тег. Открывающий тег обозначается, как и одиночный — <тег>, а в закрывающем — используется слеш — </тег>. Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок вложенности. Таким образом, действовать необходимо, как в детской игре «Матрешка». [1, c. 22]

Непарный флаг вызывает "единичное" действие в том месте, где он встречается. Например, флаг <BR> служит для перехода на новую строку при выводе текста. [2, c. 8]

Для изменения некоторых, установленных по умолчанию, значений стилевых элементов предназначены атрибуты (параметры) к тегам Атрибут и его значение пишется внутри треугольных скобок через пробел от основного служебного слова [3, c. 3]

<BODY BGCOLOR=GREEN LINK=RED VLINK=YELLOW>

Многие флаги могут включать дополнительные параметры, или атрибуты, модифицирующие эффект данного флага, например, <Р> - флаг начала параграфа, <Р ALIGN=CENTER> флаг начала параграфа, выровненного по центру окна. [2, c. 8]

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

Работая с закрывающими тегами, стоит помнить также и следующее: закрывающий тег бывает обязательным или не обязательным. Обязательный закрывающий тег должен присутствовать всегда, иначе это приведет к ошибке при отображении документа. Необязательный закрывающий тег говорит о том, что разработчик может его, как добавить, так и опустить, к ошибке это не приведет. Однако рекомендуем закрывать все подобные теги, включая необязательные, это дисциплинирует, создает более стройный и строгий код, который легко модифицировать. [1, c 23]

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

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

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

Если какой-либо тег или его параметр был написан неверно, то браузер проигнорирует подобный тег и будет отображать текст так, словно тега и не было. [1, c. 24]

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

Типичный HTML-документ имеет головную часть (<HEAD>) и тело (<BODY>). Начало документа отмечается флагом <HTML>, а конец – флагом </HTML>. [2, c. 8]

Сначала мы объявляем, что перед нами web-страница, используя теги <HTML> и </HTML>. Данная пара тегов является самой внешней, между его начальным и конечным тегами должна находиться вся Web-страница.

Раздел HTML определяет специфику документа, содержание которого будет интерпретироваться браузером, дает браузеру информацию о том, что документ разработан с помощью языка разметки HTML. Чаще всего тэг <HTML> используется без параметров. Большинство современных браузеров могут опознать документ и не содержащий тэгов <HTML> </HTML>, все же их употребление крайне желательно. [1, c. 25]

В тоже время, <!DOCTYPE html> - Тип документа. Готово. И никаких громоздких строк, которые даже самым опытным веб-разработчикам приходится вырезать и вставлять. Никаких URL-адресов. Никаких номеров версий. Ничего лишнего. Такое объявление типа скорее напоминает не правило, а заклинание: оно предназначено для тех браузеров, которым для перехода в стандартный режим требуется указание типа документа, а такой код является одновременно и кратким, и надежным. Мы записали его в верхнем регистре — для совместимости как с HTML, так и с XML, и я рекомендую вам поступать так же.