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

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

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

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

Задачи курсовой работы:

- Раскрыть основные сведения о языке HTML;

- Создать web – страницу на основе полученных знаний.

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

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

1.1. История развития языка разметки гипертекста.

HTML (англ. Hyper Text Markup Language - «язык разметки гипертекста») был разработан для выполнения разметки и оформления документов, размещаемых на веб-страницах. Язык HTML был разработан британским учёным Тимом Бернерсом - Ли приблизительно в 1986—1991годах в cтенах ЦЕРНа в Женеве в Швейцарии. Толчком стало принятие Международной организацией по стандартизации (ISO) ISO-8879-стандарта - Standard Generalized Markup Language(SGML). К нему прилагалось описание, в котором говорилось о том, что SGML предназначен для структурной разметки текста. Примечательно, что описания внешнего вида документа не предполагалось. Исходя из этого, можно сделать вывод о том, что SGML не являлся системой для разметки текста и не располагал какого-либо списка структурных элементов языка, используемых в определенных условиях. Язык подразумевал описание синтаксиса написания главных элементов разметки. Спустя некоторое время они получили хорошо известное сегодня название - «теги». Вполне очевидной была потребность в создании языка, который: описывал какой элемент в каких случаях разумно применить, содержал перечень элементов, с помощью которых можно создать документ, читаемый разными программами. Несмотря на то, что язык SGML, как и его схожие приложения, не получил особого развития, он и не был окончательно забыт. В 1991 году Европейский институт физики частиц объявил о необходимости разработки механизма, позволяющего передавать гипертекстовую информацию через Глобальную сеть. Именно SGML лег в основу будущего языка - Hyper Text Markup Language (HTML ).

Этапы становления:

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

Разработкой HTML версии 2.0 занялся консорциум W3С. Первый результат удалось получить, спустя год насыщенной работы - в 1995 году. Практически параллельно обсуждались возможности версии 3.0. Если вторую версию нельзя назвать существенно отличающейся от первой, то третья стала безусловным прорывом.

HTML 3.0 включал интересные новинки:

- Разметку математических формул;

- Теги для создания страниц;

- Вставку рисунков, обтекаемых текстом;

- Примечаний и т.д.

Существенное расширение тегов произошло с подачи Netscape Communications - корпорации, запустившей первый коммерческий браузер - Netscape Navigator. Нововведения преследовали лишь одну цель - улучшить внешний вид документа, но при этом они совершенно противоречили исконным принципам языка.

HTML версии 3.2 создали в кратчайшие сроки. Он был ориентирован на Microsoft Internet Explorer. До недавнего времени эта версия HTML была единственным стандартом языка при разработке интернет-проектов. Тем не менее, направление развивается очень активно, с помощью HTML удалось придать некую упорядоченность элементам разметки всех браузеров, но возможностей языка становилось недостаточно.

В 2004 году приняли новую версию HTML - 4.01. Он обеспечивает отличные показатели кросс - браузерности и кросс - платформенности.

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

1.2. Что такое язык HTML?

Hyper Text Markup Language (HTML) – стандартный язык, предназначенный для создания гипертекстовых документов в web среде. Документы, написанные языком HTML могут быть просмотрены различными web – браузерами. Web – браузер может интерпретировать HTML для выделения различных элементов и их первичной обработки. HTML позволяет создавать документы для их представления с использованием линий, шрифтов и других элементов для просмотра web – страниц.

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

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

1.3. Структура документа и тегов в расширении .html.

Каждый HTML- документ должен иметь расширение .html. Для создания web-страницы нужно создать файл с расширением .html, для этого нужно зайти в программу Блокнот, нажать Файл, сохранить как, вписать название, например, Файл.html, важно чтобы файл имел расширение .html. По умолчанию в операционных системах Windows выставлен параметр «Скрывать расширения для зарегистрированных типов файлов». Для того чтобы отключить этот параметр нужно зайти в Панель управления (можно найти ее в Поиске), выставить в вкладке Просмотр – Крупные значки, зайти в параметры Проводника, Вид, внизу в Дополнительных параметрах можно найти параметр «Скрывать расширения для зарегистрированных типов файлов», нужно убрать галочку. После этого можно создавать файл типа: файл.html и он будет c нужным нам расширением. Для его редактирования нужно открывать его в Блокноте, для просмотра результата используем браузер (например, Chrome, Yandex, Internet Explorer).

Текст HTML документа вводится просто как, как например в Word. Для начала нужно понять, что такое тег. Тег – это элемент языка разметки текста, который нужен для того чтобы браузер «понимал», то есть чтобы тег нес определённую команду браузеру, что вбивается не простой текст, а элемент форматирования, применяется тег. Все что внутри тега, то есть между открывающим и закрывающим тегом, называется содержанием тега.

Представляет из себя текст, заключенный в угловые скобки (знаки "<" и ">"). Общий синтаксис тега выглядит так:

<тег атрибут1="значение" атрибут2="значение"> - одиночный.

<тег атрибут1="значение" атрибут2="значение">...</тег> - парный.

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

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

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

Документ HTML начинается с открывающего тега и заканчивается соответствующим ему закрывающим тегом. Закрывающий в отличии от открывающего имеет перед названием косую черту (/тег). Часть HTML-документа, находящаяся между открывающим и соответствующим ему закрывающимся тегом, называется контейнером. Весь HTML - документ это один большой контейнер. В документе необходимо указать его начало и конец. Делается это с помощью тега-контейнера <html>. Внутри главного контейнера с тегом <html> находятся два контейнера:

Заголовок документа <head>. В нем записываются параметры для всей страницы. Например, картинка, текст для отображения в вкладке браузера.

Тело документа <body>. Содержит то, что покажет браузер внутри окна.

В нем, как правило, записываются элементы страницы – тексты, таблицы, картинки, ссылки.

1.4. Основные теги HTML документа.

Тег <!DOCTYPE> предназначен для указания типа документа. Это необходимо, чтобы браузер понимал, что перед ним HTML определенной версии. Чтобы браузер не путался и понимал, согласно какому стандарту отображать веб-страницу необходимо в первой строке кода задавать <!DOCTYPE>. Закрывающий тег не требуется.

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

Атрибуты: profile - Указывает адрес профиля метаданных.

Тег «title> определяет заголовок документа. Элемент <title> не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера. Допускается использовать только один тег <title> на документ и размещать его в контейнере <head>. Закрывающий тег обязателен. Атрибуты- нет.

Тег <style> применяется для определения стилей элементов веб-страницы, а точнее свойств CSS (размер шрифта, цвет, фон, отступы, шрифт).

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

Атрибуты: media - Определяет устройство вывода, для работы с которым предназначена таблица стилей; type - сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили.

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

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

Часто тег <body> используется для размещения обработчика событий, например, onload, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.

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

Атрибуты:

- alink - Устанавливает цвет активной ссылки;

- background - Задает фоновый рисунок на веб-странице;

- bgcolor - Цвет фона веб-страницы;

- bgproperties - Определяет, прокручивать фон совместно с текстом или нет;

- bottommargin - Отступ от нижнего края окна браузера до контента;

- leftmargin - Отступ по горизонтали от левого края окна браузера до контента;

- link - Цвет ссылок на веб-странице;

- rightmargin - Отступ от правого края окна браузера до контента;

- scroll - Устанавливает, отображать полосы прокрутки или нет;

- text - Цвет текста в документе;

- topmargin - Отступ от верхнего края окна браузера до контента;