Файл: Основы программирования на языке HTML (Изучение предметной области).pdf

ВВЕДЕНИЕ

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

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

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

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

• Изучить и проанализировать научную литературу и интернет источники по теме курсовой работы
• Рассмотреть основы языка гипертекстовой разметки HTML
• Выявить особенности работы с языком гипертекстовой разметки HTML
• Провести анализ современных сайтов
• Создать простую веб-страницу с помощью HTML

ГЛАВА 1. Язык гипертекстовой разметки HTML

1.1. Изучение предметной области

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

Web-сайт – это информация, представленная в определенном виде, которая располагается на Web-сервере и имеет свое имя (адрес). Для просмотра Web-сайтов на компьютере пользователя используются специальные программы, которые называются браузерами. В зависимости от того, какое имя (адрес) сайта мы зададим в строке "Адрес", браузер будет загружать в свое окно соответствующую информацию [1].

Web-сайт состоит из связанных между собой Web-страниц. 

Каждая страница Web-сайта также имеет свой Internet адрес, который состоит из адреса сайта и имени файла, соответствующего данной странице. Таким образом, Web-сайт – это информационный ресурс, состоящий из связанных между собой гипертекстовых документов (Web-страниц), размещенный на Web-сервере и имеющий индивидуальный адрес. Посмотреть Web-сайт может любой человек, имеющий компьютер, подключенный к Internet [1].

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

Информационные сайты. К ним относятся сайты учебных заведений, сообществ по интересам, фирм и др [1].

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

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

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

1.2. Язык HTML

Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы, разбросанные как по всему Web-пространству, так и находящиеся на этом же сервере или являющиеся составной частью этого же Web-проекта [2]. 

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

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими Web-браузерами, как сейчас, так и в будущем [5].

HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими широко распространенными браузерами, и, возможно, станет основанием почти всего программного обеспечения, которое имеет отношение к Web.

Любой HTML документ должен содержать следующие теги <html></html>, <head></head>,  <body></body>, <title></title>. Порядок расположения тегов в HTML документе представлен ниже:

<html>

<head>

<title>Название вашей страницы</title>

</head>

<body>

 Тело вашего документа

</body>

</html>

Внутри тега <head></head> располагается название вашего HTML документа (чаще всего именно его вы видите в качестве ссылки в результатах поиска поисковыми машинами), помимо этого тега внутри конструкции <head></head> могут располагаться так называемые Мета Теги. Их назначение и описание смотри в справочнике по Мета Тегам.

HTML-тэги могут быть условно разделены на две категории [6]:

1. Тэги, определяющие, как будет отображаться WEB-браузером тело документа в целом.
2. Тэги, описывающие общие свойства документа, такие как заголовок или автор документа.

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

1.3. Основы языка гипертекстовой разметки HTML

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

Элемент — конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста возможность вложения элементов [1] .

Тег — начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой. Например: элемент, содержащий некоторый текст, ограничен начальным тегом (маркером) <p> и конечным тегом (маркером) </p>. Т.е. текст помещен между тегами как в контейнер. Здесь же можно увидеть, как осуществляется возможность вложения элементов. Тег <font> вложен внутрь тега <p>, поэтому конечный тег </font> стоит перед </p>. В данном примере тег <p> указывает на то, что текст является отдельным абзацем, а тег <font> задает, например, формат шрифта [10].

<p> <font color="green"> Этот текст будет расположен в отдельном абзаце и выполнен зеленым цветом шрифта.</font> </p>

В результате такого форматирования на экране компьютера мы увидим текст зеленого цвета в отдельном абзаце.

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

<p align="center"> Этот текст будет выровнен по центру экрана </p>. В данном примере атрибут align (выравнивание) расположен внутри тега <p>, следовательно он задает выравнивание этого абзаца. Значение атрибута равно "center", т.е. выравнивание абзаца будет по центру экрана [2].

Ниже на рисунке 1 приведена структура типичного Web-документа.

Рисунок 1 – Структура веб-сайта

Рассмотрим каждый элемент более подробно на примере сайта WebReference.ru.

Элемент <header> (от англ. header — верхний колонтитул, шапка) задаёт «шапку» сайта или раздела веб-страницы. Внутри «шапки» сайта обычно располагается логотип, название сайта, поисковая форма, навигационные ссылки и др. (Рисунок 2).

<header> нельзя вкладывать внутрь другого <header>, а также внутрь элементов <address> и <footer>.

Внутри <header> не должно быть элемента <main>.

Рисунок 2 – Тег header

Элемент <nav> (от англ. navigation — навигация) задаёт навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько <nav> в документе (Рисунок 3). Запрещается вкладывать <nav> внутрь <address>.

Рисунок 3 – Тег nav

Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. Раздел обычно содержит заголовок. Допускается вкладывать один элемент <section> (от англ. section — раздел) внутрь другого (Рисунок 4).

Рисунок 4 – Тег section

Элемент <aside> (от англ. aside — в стороне, отступление) представляет собой раздел страницы, который имеет косвенное отношение к содержимому страницы и может быть рассмотрен отдельно от этого содержимого. <aside> применяется для боковых панелей, рекламных блоков, ссылок на архив, меток и другой информации, которая отделена от основного содержимого страницы (Рисунок 5).

Рисунок 5 – Тег aside

Элемент <footer> (от англ. footer — нижний колонтитул, подвал) задаёт «подвал» сайта или раздела веб-страницы, в нём может располагаться имя автора, дата документа, контактная и правовая информация.

<footer> нельзя вкладывать внутрь другого <footer>, а также внутрь элементов <address> и <header> (Рисунок 6).

Внутри <footer> не должно быть элемента <main>.

Рисунок 6 – Тег footer

Элемент <main> (от англ. main — основной, главный) предназначен для основного содержимого документа. На странице может быть только один <main> и он не должен располагаться внутри элементов <article>, <aside>, <footer>, <header>, <nav> или <section>.

Элемент <main> включает в себя содержимое, которое является уникальным для данного документа, и не должен включать повторяющиеся разделы сайта, такие как навигация, название сайта, логотип, поисковая форма, баннеры и др. (Рисунок 7).

Рисунок 7 – Тег main

Фреймы

Фреймы — это долгожданная многооконность, которая позволяет решить сразу множество проблем связанных с разработкой документов. В первую очередь возможность одновременной работы с текстом и меню, текстовым меню и графикой. Параллельно решаются проблема BANNER, для которой в HTML+ предлагался новый тег. Фрейм позволяет использовать часто встречающиеся фрагменты текста, например, постоянную заставку в качестве отдельного фрейма. Если раньше нужно было постоянно вставлять в текст либо готовые части страницы, которые появляются в начале и конце каждого документа или использовать server site includes, то теперь это можно делать при помощи фреймов. Вообще, на мой взгляд, фреймы очень органичное решение, т.к. документ с фреймами является просто суперпозицией простых HTML-документов [12].

Дополнительные окна

Дополнительные окна — это тесно связанный с фреймами механизм. Но если страница с фреймами делит рабочую область Navigator на несколько частей, не выходя за пределы окна программы, то в случае дополнительного окна разработчик страницы Web имеет возможность открыть новое окно Navigator и тем самым предать как бы новое измерение просмотру. Такое направление интерфейса лежит в русле разработки много оконных интерфейсов гипертекстовых систем, о которых в академических кругах говорят уже лет десять, но к единой модели такого интерфейса так до сих пор еще и не пришли. Очевидно одно, что это позволяет оставлять видимые закладки при проходе по гипертекстовой сети по инициативе разработчика страниц, что является в некоторых случаях достаточно полезным решением, которое расширяет привычную двухуровневую схему просмотра, когда в отдельное окно помещали либо графику, либо файл специального формата [13].