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

Разработка сайта стоматологической клиники (Структура документа)

Содержание:

Введение

Данная курсовая работа посвящена языку HTML. С помощью этого языка создаются файлы с расширением .html, являющиеся Web-страницами. Из таких страниц состоят сайты сети Интернет.

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

Объектом курсовой работы является – создание веб-сайтов. Предмет – программирование сайта на языке HTML.

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

Задачи:

  • Раскрыть основные сведения о языке;
  • Рассмотреть процесс создания сайта;
  • Создать веб-сайт на основе разработанного алгоритма.

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

1. Язык программирования HTML

1.1 Общие сведения

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

Стандарт HTML и другие стандарты для Web разработаны под руководством консорциума W3C (World Wide Web Consortium). Стандарты, спецификации и проекты новых предложений можно увидеть на сайте http://www.3w.org/. В настоящее время действует спецификация HTML 5.0, поддержка которой со стороны основных браузеров постоянно растет.

Информации о тегах HTML Compendium (краткое руководство по HTML) разработано Ron Woodall. Компендиум включает список тегов и их атрибутов в алфавитном порядке, а также обновленную информацию о поддержке каждого из них со стороны браузеров. Компендиум HTML находится на сайте http://www.htmlcompendium.org.

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

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

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

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

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

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

Главное достоинство HTML состоит в том, что конкретный документ может быть просмотрен на браузерах различных типов и на различных платформах.

1.2 Создание web сайта

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

Например, HTML редакторы, такие, как»Netscape Navigator Gold» компании Netscape, позволяют создавать документы графически с использованием технологии WYSIWYG (What You See Is What You Get). С другой стороны, большинство традиционных средств для создания документов имеют конвертеры, позволяющие преобразовывать документы к формату HTML.

1.3 Основные положения

Все тэги HTML начинаются с «<» (левой угловой скобки) и завершаются символом «>» (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:

<TITLE> Заголовок документа </TITLE>

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

Некоторые тэги, такие, как <P> (тэг, задающий абзац), не требуют завершающего тэга, но его применение придает исходному тексту документа улучшенную читаемость и структурируемость.

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

<title> Заголовок документа </title>

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

1.4 Структура документа

Когда браузер просматривает документ, он определяет, как документ должен быть отображен. Самый первый тэг, который попадается в документе, должен быть тэгом <HTML>. Этот тэг сообщает браузеру, что данный документ разработан с использованием HTML. Минимальный HTML-документ будет содержать следующие теги:

<HTML>

...тело документа...

</HTML>

Заголовочная часть документа <HEAD>. Тэг заголовочной части документа должен быть указан сразу после тэга <HTML> и более нигде в теле документа. Этот тэг представляет собой общее определение документа. Необходимо избегать помещать какой-либо текст внутри тэга <HEAD>. Начальный тэг <HEAD> помещается непосредственно перед тэгом <TITLE> и другими тэгами, определяющими документ, а финишный тэг </HEAD> размещается сразу после окончания определения документа. Например:

<HTML>

<HEAD>

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

</HEAD>

Технически, стартовые и финишные тэги типа <HTML>, <HEAD> и <BODY> необязательны. Но настоятельно рекомендуется их использовать, поскольку применение данных тэгов разрешает браузеру правильно разделить заголовочную часть документа и непосредственно смысловую часть.

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

<!--Это комментарий-->

Комментарии могут располагаться в документе в любом месте и в любом количестве.

1.5 Тэги тела документа

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

Тело документа <BODY>. Тело документа должно располагаться между тэгами <BODY> и </BODY>. Это та часть документа, которая визуализируется как текстовая и графическая (смысловая) информация вашего документа.

Уровни заголовков <Hx>. Когда создаётся HTML-документ, текст структурно разделяется на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий – 2, и т.д. Многие браузеры поддерживает распознавание шести уровней заголовков, определяя каждому из них персональный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером. Заголовок самого верхнего уровня имеет признак «1». Синтаксис заголовка уровня 1 следующий:

<H1> Заголовок первого уровня </H1>

Заголовки другого уровня могут быть представлены в общем случае так:

<Hx> Заголовок x-го уровня </Hx>, x - цифра от 1 до 6, определяющая уровень заголовка.

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

Дополнительные параметры тэга <P>:

<P ALIGN=left|center|right>, позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.

Тэг переформатирования <PRE>. Тэг переформатирования, <PRE>, разрешает представлять текст со специфическим форматированием на экране. Предварительно сформатированный текст заканчивается финишным тэгом </PRE>. Внутри предварительно сформатированного текста разрешается использовать:

а) перевод строки

б) символы табуляции (сдвиг на 8 символов вправо)

в) непропорциональный шрифт, устанавливаемый браузером.

Использование тэгов, определяющих формат абзаца, таких как <Hx> или <ADDRESS>, будет пропускаться браузером при нахождении их между тэгами <PRE> и </PRE>.

Далее идет несколько более подробный пример, созданный из предыдущих тегов:

<HTML>

<HEAD>

<TITLE> Список группы</TITLE>

</HEAD>

<BODY>

<H2> Список группы 6-М-11 </H2>

<H3> Составлено: 1 сентября 2013</H3>

Данный список содержит фамилии, имена и отчества. <P>

Список может быть использован только в служебных целях. <P>

</BODY>

</HTML>

На рисунке 1 показана информация, которая будет выведена браузером распознавшем данные теги.

Рисунок 1 – Пример веб-страницы

Заголовок «Список группы» не отображен браузером как часть документа. Он появится в заголовке окна браузера.

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

Дополнительный параметр позволяет расширить возможности тэга <BR>.

<BR CLEAR=left|right|all>

Данный параметр разрешет не просто выполнить перевод каретки, а разместить следующую строку с чистой левой (left), правой (right) или обоих (all) границ окна браузера. Например, если рядом с текстом слева содержится рисунок, то можно применить тэг <BR> для смещения текста ниже рисунка.

2. Описание создания сайта

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

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

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

Вы можете применять ссылки как для перемещения по сайту, так и для перемещения от одного сайта к другому.

URL. HTML использует URL (Uniform Resource Locator) для представления гипертекстовых ссылок и ссылок на сетевые сервисы внутри HTML-документа. Первая часть URL (до двоеточия) описывает метод доступа или сетевой сервис. Другая часть URL (после двоеточия) интерпретируется в зависимости от метода доступа. Обычно, два прямых слэша после двоеточия обозначают имя машины:

method://machine-name/path/foo.html

Следующий пример представляет собой вызов HTML-документа index.html с сервера www.softexpress.com с использованием HTTP протокола:

http://www.softexpress.com/index.html

Uniform Resource Locator имеет следующий формат:

method://servername:port/pathname#anchor

Для создания ссылки на языке HTML необходимо написать следующий код:

<A HREF="#named_anchor"> Текст </A>

2.2 Html формы

Современные браузеры позволяют пользователю, заполнив специальную форму, возвращающую полученное значение, осуществлять какие то действия на некотором веб-сервере. Когда форма распознаётся веб-браузером, создается определенные экранные элементы Windows, такие, как текстовые поля, выпадающие меню, прокручиваемые списки, кнопки и т.п. Когда пользователь заполняет форму и нажимает кнопку "Выполнить" (SUBMIT – определенный пользователем тип кнопки, который задается при описании документа), информация, из заполненой пользователем в формы, посылается HTTP-серверу для обработки и анализе другими программами, работающими на сервере.

При создании формы, каждый элемент входных данных имеет тэг <INPUT>. Когда пользователь заполняет данные в элементе формы, сведения располагаются в разделе VALUE этого элемента.

Рассмотрим синтаксис создания форм. Все формы начинаются тэгом <FORM> и заканчиваются тэгом </FORM>.

<FORM METHOD="get|post" ACTION="URL"> Содержимое формы </FORM>

ACTION: ACTION описывает URL-адрес, который будет вызываться для обработки формы. Данный URL-адрес почти всегда указывает на PHP-скрипт, обрабатывающий данную форму.

Тэги формы:

TEXTAREA:

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

Тэг <INPUT> применяется для ввода одной строки текста или одного слова.

CHECKBOX:Используется для простых логических (BOOLEAN) значений. Значение, ассоциированное с именем данного поля, которое будет передаваться в вызываемую CGI-программу, может принимать значение ON или OFF.

HIDDEN:Поля данного типа не отображаются браузером и не дают пользователю изменять присвоенные данному полю по умолчанию значение. Это поле используется для передачи в CGI-программу статической информации, например, ID пользователя, пароля или другой информации.

IMAGE:

Данный тип поля ввода позволяет вам связывать графический рисунок с именем поля. При нажатии мышью на какую-либо часть рисунка будет немедленно вызвана ассоциированная форме CGI-программа. Значения, присвоенные переменной NAME будут выглядеть так - создается две новых переменных: первая имеет имя, обозначенное в поле NAME с добавлением .x в конце имени. В эту переменную будет помещена X-координата точки в пикселях (считая началом координат левый верхний угол рисунка), на которую указывал курсор мыши в момент нажатия, а переменная с именем, содержащимся в NAME и добавленным .y, будет содержать Y-координату. Все значения атрибута VALUE игнорируются. Само описание картинки осуществляется через атрибут SRC и по синтаксису совпадает с тэгом <IMG>.

PASSWORD:

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

RADIO:

Данный атрибут позволяет вводить одно значение из нескольких альтернатив. Для создания набора альтернатив вам необходимо создать несколько полей ввода с атрибутом TYPE="RADIO" с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME. В CGI-программу будет передано значение типа NAME=VALUE, причем VALUE примет значение атрибута VALUE того поля ввода, которое в данный момент будет выбрано (будет активным). При выборе одного из полей ввода типа RADIO все остальные поля данного типа с тем же именем (атрибут NAME) автоматически станут невыбранными на экране.

RESET:

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

SUBMIT:

Данный тип обозначает кнопку, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы. Атрибут VALUE может содержать строку, которая будет высвечена на кнопке.

TEXT:

Данный тип поля ввода описывает однострочное поле ввода. Используйте атрибуты MAXLENGTH и SIZE для определения максимальной длинны вводимого значения в символах и размера отображаемого поля ввода на экране (по умолчанию принимается 20 символов).

VALUE - присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO (для типа RADIO данный атрибут обязателен).

2.3 Добавление стилей в документ

Каскадные таблицы стилей (Cascading Style Sheets, CSS) – это один из способов форматированного отображения содержимого или контента на Web-странице. CSS предоставляет большие возможности в дизайне сайтов.

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

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

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

Информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысл в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, поместить этот файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега <LINK>, располагающегося внутри тега <BODY> ваших страниц:

<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">

Основные преимущества CSS:

  • Управление оформлением множества web-страниц с помощью одной таблицы стилей;
  • Более тонкий контроль над внешним видом web-страниц;
  • Различное представление для разных устройств (монитор, планшет, смартфон, вывод на печать и т.д.);
  • Хорошо проработанная технология дизайна.

Модель составления правил CSS-стилей показана на рисунке 2.

модель CSS

Рисунок 2 – Составление правил CSS

Из рисунка 2 можно сказать, что CSS содержит правила, состоящие из двух блоков: селектора и свойств.

Селектор определяет, для какой части Web-страницы назначается стилевое оформление. Далее в фигурных скобках идёт одно или несколько свойств и их значения.

Свойство информирует Web-браузеру о том, что изменить, а значение показывает, какое должно быть это изменение.

Стандартная запись правил CSS:

Селектор { свойство: значение }

Для повышения удобочитаемости кода разработчики часто добавляют пробелы и переносы строк:

Селектор {

свойство: значение

}

Приведем пример объявления селектора, который сообщает браузеру об увеличении размера содержимого тега h1 до 120% по сравнению с текущим размером:

h1{

font-size: 120%

}

В таблице 1 приведены некоторые правила CSS. В столбце «Результат» поясняется, что произойдет после применения данных правил к web-странице.

Таблица 1 – Перечень правил CSS

Селектор

Свойство

Значение

Результат

H1

font-size

120%

Размер шрифта больше текущего значения

P

font-size

90%

Размер шрифта меньше текущего значения

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

Селектор {

свойство: значение;

свойство: значение, значение, значение;

свойство: значение;

}

Для применения правил CSS в HTML-документе, необходимо его подключить. Делается это несколькими способами. Один из них описать правила в теге style:

<style type=”text/css”>

<!-- -->

</style>

Элемент style показывает браузеру о том, что он содержит селекторы CSS, необходимые для форматирования.

Другой способ – подключение файла CSS в теге head, указав путь к файлу:

<link rel="stylesheet" href="css/style.css" type="text/css" />

CSS позволяет разными способами указать к каким тегам Web-страницы применяется стилевое оформление.

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

3. Разработка сайта стоматологической клиники «Вымпел»

3.1 Требования к приложению

На сегодняшний день сайт является обязательным атрибутом многих организаций. Стоматологическая клиника одна из таких организация. Для привлечения большего числа клиентов и разрабатывается сайт.

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

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

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

В дизайне сайта не должны присутствовать:

  • мелькающие баннеры;
  • много сливающегося текста.

3.2 Пользовательский интерфейс сайта

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

Рисунок 3 – Главная страница сайта

Как видно из рисунка 3 разработанный сайт стоматологической клиники «Вымпел» имеет в своём дизайне преимущественно светлые цвета. Содержит всю необходимую информацию

  1. Оказываемые услуги;
  2. Новости клиники;
  3. Специалисты клиники;
  4. Контакты.

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

При разработке сайта важно учитывать разрешения экрана пользователей. Из-за слишком маленького разрешение сайт может отобразиться на мониторе не полностью. Какую то часть придется просматривать, используя полосу прокрутки. Слишком большое разрешение приведет к тому, что сайт отобразится слишком мелко. Поэтому при разработке сайта было принято решение адаптировать сайт на среднее разрешение 1280 на 960 пикселей. В этом случае у пользователей будет отображаться нечто среднее на мониторах, что устроит большинство.

3.3 Разработка приложения.

При разработке приложения был использован текстовый редактор Notepad++. Это очень удобный редактор с подсветкой синтаксиса. Написанная главная страница показана на рисунке 4.

Рисунок 4 – Внешний вид текстового редактора Notepad++

Главную страницу сайта принято называть index.html. На веб-сервера данная страница открывается первой.

Главная страница сайта стоматологической клиники разделена на 3 области. Данные области показаны на рисунке 5.

Рисунок 5 – Разделение сайта на области

Как видно из рисунка 5, сайт поделен на 3 области: шапка, тело и подвал. В шапке сайте располагается логотип, название сайта, телефон для связи и меню сайта. В теле сайта располагается краткая информация и стоматологической клиники. В подвале расположена контактная информация, режим работы и поиск по сайту.

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

Меню у сайта горизонтальное с выпадающим списком у пункта «Услуги», так как клиника предоставляет много услуг. Выпадающее горизонтальное меню показано на рисунке 6. Оно реализовано с помощью стилей CSS.

Рисунок 6 – Выпадающее меню

Поиск по сайту реализован с помощью форм HTML. Форма содержит два элемента: текстовое поле для ввода искомого выражения и кнопка для запуска поиска. Форма поиска показана на рисунке 7.

Рисунок 7 – Форма поиска

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

Заключение

В результате выполнения курсовой работы был создан сайт стоматологической клиники «Вымпел». Сайт содержит всю необходимую информацию интересующую потенциальных клиентов.

В процессе выполнения работы был изучен язык HTML, на основе которого построены все сайты сети интернет.

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

  • Раскрыты основные сведения о языке HTML;
  • Рассмотрен процесс создания сайта;
  • Создан веб-сайт стоматологической клиники.

Список литературы

  1. С. В. Глушаков, А.В. Коваль, С.А. Черепнин, Программирование на Visual C++, ФОЛИО, Москва, 2017.
  2. Ю. Тихомиров, Самоучитель MFC, БХВ-Санкт –Петербург, 2017.
  3. Гончаров А. Самоучитель HTML. С.-Пб: Питер, 2000.
  4. Гончаров А. HTML в примерах. С.-Пб.: Питер, 2003.
  5. Информатика: Учебник/под ред. Н.В. Макаровой. - М.: Финансы и статистика, 2000. - 768 с.
  6. Информатика. Базовый курс. Учебник для Вузов/под ред. С.В. Симоновича. СПб.: Питер, 2000.
  7. Информатика. Компьютерная техника. Компьютерные технологии. / Пособие под ред. О.И.Пушкаря. Киев Издательский центр "Академия". 2001.
  8. Комягин А.О. Современный самоучитель работы на персональном компьютере. М.: ТРИУМФ, 2003.
  9. Ковтанюк Ю.С., Соловьян С.В. Самоучитель работы на персональном компьютере. К.: Юниор, 2001.
  10. Симонович С.В., Евсеев Г.А. Практическая информатика. Учебное пособие. М.: АСТпресс, 2001.
  11. Симонович С.В., Евсеев Г.А., Алексеев А.Г. Специальная информатика. Учебное пособие. М.: АСТпресс, 2001.

Приложение

Листинг файла index.html

<!DOCTYPE html>

<html>

<head>

<meta charset=utf8>

<title>Вымпел - Стоматологическая клиника</title>

<link href=style.css rel=stylesheet />

</head>

<body>

<header>

<hgroup id=header>

<a href="index.html"><img id="logo" src="image/logo.jpg" /></a>

<hgroup id="name">

<h1>ВЫМПЕЛ</h1>

<h2>Стоматологическая клиника</h2>

</hgroup>

<hgroup id=tel>

<h1>8-800-300-30-30</h1>

<span><a class=ss href="contact.html">Адрес и график работы</a></span>

</hgroup>

</hgroup>

<nav id="menu1">

<ul>

<li><a href="index.html">Главная</a></li>

<li><a href="news.html">Новости</a></li>

<li><a href=#>Услуги</a>

<ul>

<li><a href="ortop.html">Ортопедия</a></li>

<li><a href="nprot.html">Несъемное протезирование</a></li>

<li><a href="vinir.html">Виниры и вкладки</a></li>

<li><a href="koron.html">Коронки металлические и фарфоровые</a></li>

<li><a href="sprot.html">Съемное протезирование</a></li>

<li><a href="hirurg.html">Хирургия</a></li>

<li><a href="terap.html">Терапия</a></li>

</ul>

</li>

<li><a href="spec.html">Специалисты клиники</a></li>

<li><a href="okompanii.html">О компании</a></li>

<li><a href="contact.html">Контакты</a></li>

</ul>

</nav><!--menu1-->

</header>

<section id="content">

<img id="stomatolog" src="image/stomatolog.jpg" />

<h2>Стоматологическая клиника "Вымпел"</h2>

<p>Клиника "Вымпел" была основана в 1991 году и сегодня представляет собой многопрофильную стоматологическую клинику.</p>

<p>Со дня открытия мы стремились создать клинику, которой можно доверить свое здоровье. И сейчас мы стараемся поддерживать этот образ, внедряя последние достижения современной медицины.

Наша главная цель – обеспечить высокий уровень проводимого лечения и сделать пребывание в нашей клинике комфортным для каждого пациента.</p>

<p>Индивидуальный подход, открытость информации и готовность ответить на любые вопросы пациента – эти принципы лежат в основе нашей работы.</p>

<p>Помните, что многие заболевания легче предотвратить, чем потом их вылечить. Заботьтесь о своем здоровье и здоровье своих близких. Удачи вам, здоровья и благополучия!</p>

</section>

<hr>

<section id="content2">

<h2>Оказываемые услуги:</h2>

<p>Лечение зубов</p>

<p>Лечение десен</p>

<p>Протезирование зубов</p>

<p>Исправление прикуса</p>

<p>Имплантация</p>

<p>Удаление зубов</p>

<p>Отбеливание зубов</p>

<p>Профессиональная гигиена полости рта</p>

<p><span><a class=ss href="#">Все услуги</a></span></p>

</section>

<section id="content3">

<h2>Последние новости</h2>

<h4>Лечение кариеса</h4>

<img src="image/kar.jpg" />

<p>Кариес является одним из наиболее распространенных и неприятных заболеваний. Он связан не только с болезненными ощущениями, но и постепенным разрушением зуба,

которое при отсутствии правильного лечения станет необратимым.</p>

<span><a class=ss href="#">Все новости</a></span>

</section>

<footer>

<hgroup id=zvonok>Позвоните нам 8-800-300-30-30</hgroup>

<hgroup id=dopfot1><h4>Контакты</h4>

Москва, ул. Комсомольская д. 22 к. 1<br>

8-800-300-30-30 (телефон)<br>

</hgroup>

<hgroup id=dopfot2>

<h4>Режим работы</h4>

ПН-ПТ: с 10.00 до 20.00<br>

CБ: с 10.00 до 13.00<br>

ВС: выходной<br>

</hgroup>

<hgroup id=dopfot3>

<form action="" method="post" class="search">

<input type="search" name="" placeholder="Поиск по сайту" class="input" />

<input type="submit" name="" value="Поиск" class="submit" />

</form>

</hgroup>

<hgroup id=dopfot4>

<hr>

2018г. - Стоматологическая клиника "Вымпел"

</hgroup>

</footer>

</body>

</html>