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

Данная курсовая работа посвящена языку 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>.

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

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

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

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