Автор Анна Евкова
Преподаватель который помогает студентам и школьникам в учёбе.

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

Содержание:

Введение

Интернет, который нельзя представить себе без языка 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 - сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили.

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

Тело документа <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 - Отступ от верхнего края окна браузера до контента;

- vlink - Цвет посещенных ссылок.

Элемент <div> блочный элемент предназначенный для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора. В данном случае с помощью <div> я обращаюсь к содержимому <style>, чтобы текст внутри контейнера имел белый цвет.

Атрибуты:

- align - Задает выравнивание содержимого тега <div>;

- title Добавляет всплывающую подсказку к содержимому.

Тег <h1> представляет собой заголовок первого уровня, может быть от 1 – самый крупного и жирного шрифта до 6 – самого мелкого, закрывающий тег в нем обязателен.

Тег <p> определяет текстовый абзац, всегда начинается с новой строки, закрывающий тег не обязателен.

&nbsp; - Это неразрывный пробел. В данном случае используется для заполения пустой ячейки.

<!--текст--> - Это комментарий в коде, который не будет отображаться в браузере. В моем случае используется для того чтобы легче было ориентироваться в коде.

1.5. Таблицы.

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

Таблица создаётся при помощи парного тега <table></table>. Данный тег является контейнером для элементов таблицы и все элементы должны находиться внутри него.

Элемент <table> описывает таблиц. Все элементы таблицы находятся в теге table. Закрывающий тег обязателен.

Атрибуты тегов таблицы:

border – при значении больше нуля, граница таблицы прорисовывается для всех ячеек и всей таблицы. Чем больше значение, тем шире граница таблицы.

Пример:

border=”1”;

align – Определяет выравнивание таблицы по краю окна браузера.

Пример: align=”left”;

valign - Он определяет вертикальное размещение данных в ячейках.

Пример: valign=”top”;

link – задает цвет не посещённых ссылок в контейнере. Цвет задается в данном случае в записывается в виде: link=”ffffff”.Это аддиктивная цветовая модель, описывающая способ кодирования цвета для цветовоспроизведения с помощью трех цветов: красного, зеленого синего;

width – Задает ширину элемента. Можно указать размер в пикселях экрана, например, width=”900”, а можно в процентах от полной ширины экрана, что полезно в связи тем что экраны бывают разного разрешения, пример width=”50%”;

colspan - Показывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчании – 1;

rowspan - Показывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчании – 1;

colspec - Параметр позволяющий задавать фиксированную ширину колонок либо в символах, либо в процентах. Пример COLSPEC="20%";

Тег <tr> служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега <th> или <td>. Закрывающий тег не обязателен.

1.6. Графические элементы.

Одна из полезных возможностей, реализованных в HTML – это возможность вставить ссылку на графические и другие типы данных. За это отвечает тег <img >. Он позволяет улучшить внешний вид и функциональность документов. Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. В форматах JPEG и GIF хорошо передается цветовые и тоновые раскаты, размытые границы, фото. JPEG хорошо масштабируется в браузере, но плохо передает ровные плоскости цвета, в отличии от GIF формата. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>. Alt=” альтернативный текст”, необязательный элемент задающий текст, который будет отображен браузером, не поддерживающим отображение графики или с отключенной функцией подгрузки изображения.

Пример: <img src=”url” alt ="альтернативный текст">

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

Атрибуты:

- align - Определяет как рисунок будет выравниваться по краю и способ обтекания текстом;

- alt - Альтернативный текст для изображения;

- border - Толщина рамки вокруг изображения;

- height - Высота изображения;

- hspace - Горизонтальный отступ от изображения до окружающего контента;

- ismap - Говорит браузеру, что картинка является серверной картой-изображением;

- longdesc - Указывает адрес документа, где содержится аннотация к картинке;

- lowsrc - Адрес изображения низкого качества;

- src - Путь к графическому файлу;

- vspace - Вертикальный отступ от изображения до окружающего контента;

- width - Ширина изображения;

- usemap -Ссылка на тег <map>, содержащий координаты для клиентской карты-изображения.

1.7. Гипертекстовые ссылки.

Гиперссылки – это основа HTML. Именно благодаря им страницы становятся динамичными. Щелкая на гиперссылках, пользователи могут переходить от одной Web-страницы к другой, практически не прилагая для этого никаких усилий.

При создании Web-страницы вам придется решить две непростые задачи: выбрать типы используемых гиперссылок и оптимальным образом построить страницу.

Существуют три основных типа гиперссылок:

- Внутренние ссылки (internal links) – это ссылки на объекты в пределах одного документа. С их помощью пользователь может перемещаться по одной и той же Web-странице. Данный тип ссылок полезно использовать на длинной странице, чтобы иметь возможность быстро перемещаться между ее разделами;

- Внешние (external links) или удаленные (distant links) ссылки – это ссылки на другие Web-серверы;

- Относительные (relative links) или локальные (local links) ссылки – это ссылки на другие Web-страницы или службы Internet, расположенные на одном сервере со страницей, содержащей ссылки. Подобные ссылки называются относительными потому, что их адреса даются относительно адреса Web-страницы, на которой содержится ссылка.

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

Пример простой гиперссылки:

<a href="URL">Название ссылки</a>

HREF - обязательный параметр, определяет или URL или файл, на который мы ссылаемся. Если мы ссылаемся на файл, то поле HREF содержит имя файла в файловой системе Web-сервера.

Почтовая гиперссылка позволяет создать ссылку на адрес электронной почты.

Пример:

<a href="mailto:e-mail">Текст ссылки</a>

2. Практическая работа.

2.1. Подготовка

Для создания веб-страницы были использованы программы:

Notepad++ - текстовый редактор для написания кода, более функциональный и более наглядно отображает информацию, чем Блокнот.

Есть функция авто-завершения набираемого слова, позволяет работать одновременно с несколькими документами, продвинутая функция поиска/замены.

Adobe Photoshop – графический редактор, с гигантским функционалом. Использовался для редактирования изображения и подбора цвета оформления.

2.2. Создание Web-страницы.

Для примера мной создана страница, которая будет полезен в компании где я работаю, страница – «адресная книга».

Ниже представлен код страницы:

<!DOCTYPE html>

<html >

<head>

<title>Внутренний сайт</title>

<style>

.menu {

padding: 0px; /* Поля вокруг текста */

background: #fff; /* Цвет фона */

}

.menu a {

color: #fff; /* Цвет ссылки */

}

</style>

</head>

<meta charset="utf-8">

<body bgcolor="dbe9ff" link="2a74fc" vlink="57149">

<div class="menu">

<table border="0" align="left" cellspacing="5">

<tr>

<td background="images/nav161320780i.gif" width="113" height="40" align="center"><a href="http://site.roga/index.html"><b>Новости</b></a></td>

<td background="images/nav161320780i.gif" width="113" height="40" align="center"><a href="http://site.roga/adresnaya_kniga.html"><b>Адресная Книга</b></td>

<td background="images/nav161320780i.gif" width="113" height="40" align="center"><a href="http://site.roga/otdel_kadrov.html"><b>Отдел Кадров</b></a></td>

<td background="images/nav161320780i.gif" width="113" height="40" align="center"><a href="ftp://172.31.1.3/ftpIncoming/"><b>FTP сервер</b></a></td>

<td background="images/nav161320780i.gif" width="113" height="40" align="center"><a href="http://site.roga/ssilki.html"><b>Ссылки</b></a></td>

</tr>

</table>

</div>

<table border="0" width="100%" align="center" link="ffffff">

<td align="center"><h2>Адресная книга</h2></td>

</table>

<table border="0" width="100%" align="center">

<tr>

<td>Список сотрудников</td>

<td>999-99-99 Телефон компании</td>

</tr>

</table>

<table width="900" cellpadding="5" style="float: left;" border="1" bordercolor="6ca5fc" bgcolor="ffffff"><!--ЛЕВАЯ ТАБЛИЦА-->

<tr>

<td>ФИО</td>

<td>ТЕЛЕФОН</td>

<td>E-MAIL</td>

</tr>

<tr>

<td>А</td>

<td></td>

<td></td>

</tr>

<tr>

<td>Акеева Инна Владимировна</td>

<td align="center">1044</td>

<td><a href="mailto:akalaeva@roga">akeeva@roga.com</td>

</tr>

<tr>

<td>Александров Денис Вячеславович</td>

<td align="center">1049</td>

<td><a href="mailto:aleksandrov@roga">aleksandrov@roga.com</td>

</tr>

<tr>

<td>Б</td>

<td></td>

<td></td>

</tr>

<tr>

<td>Балашова Елена Викторовна</td>

<td align="center">1366</td>

<td><a href="mailto:balashova@roga">balashova@roga.com</td>

</tr>

<tr>

<td>Басова Ольга Владимировна</td>

<td align="center">1322</td>

<td><a href="mailto:basova@roga">basova@roga.com</td>

</tr>

<tr>

<td>В</td>

<td></td>

<td></td>

</tr>

<tr>

<td>Василькина Людмила Вячеславовна</td>

<td align="center">1247</td>

<td><a href="mailto:vasilkina@roga">vasilkina@roga</td>

</tr>

<tr>

<td>Васильченко Елена</td>

<td align="center">1007</td>

<td><a href="mailto:vasilchenko@roga">vasilchenko@roga</td>

</tr>

<tr>

<td>Г</td>

<td></td>

<td></td>

</tr>

<tr>

<td>Ганжа Вероника Сергеевна</td>

<td align="center">1260</td>

<td><a href="mailto:ganzha@roga">ganzha@roga</td>

</tr>

<tr>

<td>Гафаров Азиз Каримович</td>

<td align="center">1001</td>

<td><a href="mailto:gafarov@roga">gafarov@roga</td>

</tr>

<tr>

<td>Д</td>

<td></td>

<td></td>

</tr>

<tr>

<td>Дугин Алексей Алексеевич</td>

<td align="center">1048</td>

<td><a href="mailto:dugin@roga">dugin@roga</td>

</tr>

<tr>

<td>Е</td>

<td></td>

<td></td>

</tr>

<tr>

<td>Елисеев Виктор Генрихович</td>

<td align="center">1045</td>

<td><a href="mailto:eliseev@roga">eliseev@roga</td>

</tr>

<tr>

<td>З</td>

<td></td>

<td></td>

</tr>

<tr>

<td>Захаров Сергей Михайлович</td>

<td align="center">1411</td>

<td><a href="mailto:zakharov@roga">zakharov@roga</td>

</tr>

<tr>

<td>Зинченко Татьяна Викторовна</td>

<td align="center">1335</td>

<td><a href="mailto:zinchenko@roga">zinchenko@roga</td>

</tr>

<tr>

<td>И</td>

<td></td>

<td></td>

</tr>

<tr>

<td>Икрами Камол Алимович</td>

<td align="center">1232</td>

<td><a href="mailto:ikrami@roga">ikrami@roga</td>

</tr>

<tr>

<td>Ильин Андрей Алексеевич</td>

<td align="center">1261</td>

<td><a href="mailto:ilin@roga">ilin@roga</td>

</tr>

<tr>

<td>К</td>

<td></td>

<td></td>

</tr>

<tr>

<td>Казакова Валентина</td>

<td align="center">1361</td>

<td><a href="mailto:kazakova@roga">kazakova@roga</td>

</tr>

<tr>

<td>Какуша Анна Ивановна</td>

<td align="center">1218</td>

<td><a href="mailto:kakusha@roga">kakusha@roga</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</tr>

<tr>

<td>Секретари</td>

<td>&nbsp;</td>

<td><a href="mailto:tk@roga">tk@roga</td>

</tr>

<tr>

<td>Шумихина Наталья Николаевна</td>

<td align="center">1306</td>

<td><a href="mailto:shumihina.nn@roga">shumihina.nn@roga</td>

</tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</tr>

<tr>

<td>факс</td>

<td align="center">1394</td>

<td>&nbsp;</td>

</tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</tr>

<tr>

<td>&nbsp;</td>

<td align="center">&nbsp;</td>

<td>&nbsp;</td>

</tr>

<td>Склад</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</tr>

<tr>

<td>Устинов Андрей Львович</td>

<td align="center">1391</td>

<td><a href="mailto:ustinov@roga">ustinov@roga</td>

</tr>

<td>Потапов Олег Иванович</td>

<td align="center">1399</td>

<td><a href="mailto:potapov@roga">potapov@roga</td>

</tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</tr>

<tr>

<td>&nbsp;</td>

<td align="center">&nbsp;</td>

<td>&nbsp;</td>

</tr>

<td>Истра</td>

<td align="center">2062</td>

<td> +7 (999) 999-99-99</td>

</tr>

</tr>

<tr>

<td>&nbsp;</td>

<td align="center">&nbsp;</td>

<td>&nbsp;</td>

</tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</tr>

</table>

<table width="900" cellpadding="5" style="float: right;" border="1" bordercolor="6ca5fc" bgcolor="ffffff"><!--ПРАВАЯ ТАБЛИЦА-->

<tr>

<td>ФИО</td>

<td>ТЕЛЕФОН</td>

<td>E-MAIL</td>

</tr>

<tr>

<td>Л</td>

<td></td>

<td></td>

</tr>

<tr>

<td>Левина Елена Николаевна</td>

<td align="center">1072</td>

<td><a href="mailto:levina@roga">levina@roga</td>

</tr>

<tr>

<td>Логинова Нина Ильинична</td>

<td align="center">1006</td>

<td><a href="mailto:loginova@roga">loginova@roga</td>

</tr>

<tr>

<td>М</td>

<td></td>

<td></td>

</tr>

</tr>

<tr>

<td>Маслова Галина Павловна</td>

<td align="center">1056</td>

<td><a href="mailto:maslova.gp@roga">maslova.gp@roga</td>

</tr>

<tr>

<td>Маслова Елена Викторовна</td>

<td align="center">1012</td>

<td><a href="mailto:maslova@roga">maslova@roga</td>

</tr>

<tr>

<td>Н</td>

<td></td>

<td></td>

</tr>

</tr>

<tr>

<td>Недорослева Нина Анатольевна</td>

<td align="center">1360</td>

<td><a href="mailto:nedorosleva@roga">nedorosleva@roga</td>

</tr>

<tr>

<td>Немыкина Надежда Игоревна</td>

<td align="center">1220</td>

<td><a href="mailto:nemykina@roga">nemykina@roga</td>

</tr>

</tr>

<tr>

<td>О</td>

<td></td>

<td></td>

</tr>

<tr>

<td>Осколков Владимир Александрович</td>

<td align="center">1050</td>

<td><a href="mailto:oskolkov@roga">oskolkov@roga</td>

</tr>

</tr>

<tr>

<td>Османов Эмиль Тельманович</td>

<td align="center">1320</td>

<td><a href="mailto:osmanov@roga">osmanov@roga</td>

</tr>

<tr>

<td>Р</td>

<td></td>

<td></td>

</tr>

</tr>

<tr>

<td>Ревунова Елена Валерьевна</td>

<td align="center">1025</td>

<td><a href="mailto:revunova@roga">revunova@roga</td>

</tr>

<tr>

<td>Резников Алексей Васильевич</td>

<td align="center">1248</td>

<td><a href="mailto:reznikov@roga">reznikov@roga</td>

</tr>

<tr>

<td>С</td>

<td></td>

<td></td>

</tr>

</tr>

<tr>

<td>Селезнева Татьяна Валерьевна</td>

<td align="center">3007</td>

<td><a href="mailto:selezneva@roga">selezneva@roga</td>

</tr>

<tr>

<td>Семин Сергей Вячеславович</td>

<td align="center">1233</td>

<td><a href="mailto:simonova@roga">simonova@roga</td>

</tr>

<tr>

<td>Т</td>

<td></td>

<td></td>

</tr>

<tr>

<td>Тарасова Ксения Алексеевна</td>

<td align="center">1910</td>

<td><a href="mailto:tarasova@roga">tarasova@roga</td>

</tr>

<tr>

<td>Татаринов Кирилл Александрович</td>

<td align="center">1086</td>

<td><a href="mailto:tatarinov@roga">tatarinov@roga</td>

</tr>

<tr>

<td>У</td>

<td></td>

<td></td>

</tr>

<tr>

<td>Уварова Надежда Михайловна</td>

<td align="center">1273</td>

<td><a href="mailto:uvarova@roga">uvarova@roga</td>

</tr>

</tr>

<tr>

<td>Ш</td>

<td></td>

<td></td>

</tr>

<tr>

<td>Шариков Дмитрий Геннадьевич</td>

<td align="center">3008</td>

<td><a href="mailto:sharikov@roga">sharikov@roga</td>

</tr></tr>

<tr>

<td>Шашков Георгий Николаевич</td>

<td align="center">1245</td>

<td><a href="mailto:shashkov@roga">shashkov@roga</td>

</tr>

<tr>

<td>Ю</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>Юрченкова Татьяна Петровна</td>

<td align="center">1013</td>

<td><a href="mailto:yurchenkova@roga">yurchenkova@roga</td>

</tr>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>Водители</td>

<td align="center">1246</td>

<td><a href="mailto:azamat@roga"></td>

</tr>

<tr>

<td>Захаров Юрий </td>

<td align="center">8-999-999-99-99</td>

<td>&nbsp;</td>

</tr>

</tr>

<tr>

<td>Клочков Сергей</td>

<td align="center">8-999-999-99-99</td>

<td>&nbsp;</td>

</tr>

<tr>

<td align="center">&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td align="center">&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td align="center">&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td> "Горячая Линия"</td>

<td align="center">8 999 999-99-99</td>

<td><a href="mailto:azamat@roga"></td>

</tr>

<tr>

<td>Адрес для заявок в Отдел ИТ</td>

<td>&nbsp;</td>

<td><a href="mailto:it@roga">it@roga</td>

</tr>

<tr>

<td align="center">&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</table>

</body>

</html>

Заключение

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

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

Список используемой литературы

1. Мальчук Е. - HTML и CSS. Самоучитель.

2. Алленова Наталья - Самоучитель по html.

3. Web-сайт - http://htmlbook.ru

4. Web-сайт - http://html.find-info.ru

5. Web-сайт - http://xiper.net

6. Web-сайт - https://ru.wikipedia.org

7. Web-сайт - www.msiter.ru

8. Web-сайт - https://htmlacademy.ru/

9. Web-сайт - http://service-joomla.ru

10. Web-сайт - https://codebra.ru

11. Web-сайт - https://ru.vuejs.org

12. Документы внутреннего пользования компании.