Создание Web-страниц с помощью языка HTML. Web-страницы и создание web-страниц в FrontPage Создание web страницы с помощью html

< LI >Системные программы
< LI >Прикладные программы
< LI >Системы программирования

Маркированные списки. Маркированный список располагается внутри контейнера , а каждый элемент списка определяется тэгом < LI >. С помощью атрибута TYPE тэга

можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "circle" (окружность):

< LI >текстовые редакторы;
< LI >графические редакторы;
< LI >электронные таблицы;
< LI >системы управления базами- данных.


На Web-страницу "Программы" поместим нумерованный список, содержащий перечень основных типов программного обеспечения компьютера.

Во второй элемент основного нумерованного списка вставим вложенный маркированный список (рис. 6.30).

Список определений. Список определений располагается внутри контейнера

/

. Внутри него текст оформляется в виде терминов, которые выделяются одинарными тэгами

и определений, которые следуют за одинарными тэгами

.

Web-страницу "Словарь" мы представим в виде словаря компьютерных терминов (рис. 6.31):


Процессор


Центральное устройство компьютера, производящее обработку информации в двоичном коде.
Оперативная память


Устройство, в котором хранятся программы и данные.


Контрольные вопросы

1. Какие тэги используются для создания нумерованных списков? Маркированных списков?

Задания для самостоятельного выполнения

6.14. Практическое задание. Создать Web-страницу "Программы" с нумерованным списком и вложенным маркированным списком.

6.15. Практическое задание. Создать Web-страницу "Словарь" со списком терминов.

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

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

• • Введение
  • 1. Основные сведения
  • 1.1 О языке html
  • 1.2 Создание web сайта
  • 1.3 Основные положения
  • 1.4 Структура документа
  • 1.5 Тэги тела документа
  • 1.6 Список базовых тэгов html
  • 2. Дополнительные сведения
  • 2.1 Тэги списков
  • 2.2 Гипертекстовые ссылки
  • 2.3 Графика внутри документа
  • 2.4 Добавление стилей в документ
  • 2.5 Специальные тэги html
  • 2.6 Html формы
  • 2.7 Html фреймы
  • 2.8 Html таблицы
  • 2.9 Оптимизация графики для web
  • 2.10 Основы css
  • 3. Описание создания сайта
  • 3.1 Подготовка
  • 3.2 Создание главной страницы
  • 3.3 Создание второй страницы
  • 3.4 Создание страницы с описанием города
  • 3.5 Страница с фотографиями
  • 3.6 Страница с программами
  • 3.7 Страница с благодарностями
  • Заключение
  • Список использованной литературы

Введение

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

К дипломной работе прикреплён сайт, как пример того, что можно создать при помощи языка HTML.

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

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

1. Основные сведения

1.1 О языке HTML

Hyper Text Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-броузеров. Когда документ создан с использованием HTML, WEB-броузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

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

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

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

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

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

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

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

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

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

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

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

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

Некоторые тэги, такие, как

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

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

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

И 

. Более подробно о тэгах

Будет написано ниже.

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

Когда WEB-броузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом . Данный тэг сообщает WEB-броузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:
Тело документа...
Заголовочная часть документа . Тэг заголовочной части документа должен быть использован сразу после тэга  и более нигде в теле документа. Данный тэг представляет собой общее описание документа. Избегайте размещать какой-либо текст внутри тэга . Стартовый тэг  помещается непосредственно перед тэгом 
Внимание! Технически, стартовые и завершающие тэги типа ,  и  необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тэгов позволяет WEB-броузеру уверенно разделить заголовочную часть документа и непосредственно смысловую часть.
Заголовок документа , размещается внутри -тэгов, как показано выше на примере. Заголовок документа не появляется при отображении самого документа в окне.
Комментарии. Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются броузером. Синтаксис комментария:

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


Тэги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.
Тело документа . Тело документа должно находиться между тэгами  и . Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.
Уровни заголовков . Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий - 2, и т.д. Большинство броузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться броузером. Заголовок самого верхнего уровня имеет признак "1". Синтаксис заголовка уровня 1 следующий:
Заголовок первого уровня
Заголовки другого уровня могут быть представлены в общем случае так:
Заголовок x-го уровня
где x - цифра от 1 до 6, определяющая уровень заголовка.
Тэг абзаца
В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако броузер разделяет абзацы только при наличии тэга 
Если вы не разделите абзацы тэгом 
Ваш документ будет выглядеть как один большой абзац.
Дополнительные параметры тэга
Позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.
Центрирование элементов документа. Вы можете центрировать все элементы документа в окне броузера. Для этого можно использовать тэг 
.

Все элементы между тэгами 
 и  будут находиться в центре окна.

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

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

  


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





Список может быть использован только в служебных целях.
Внимание! Заголовок "Список сотрудников" не отображен броузером как часть документа. Он появится в заголовке окна броузера.
Разрыв строки 
. Тэг 
 извещает броузер о разрыве строки. Наилучший пример использования данного тэга - форматированный адрес или любая другая последовательность строк, где броузер должен отображать их одну под другой. Например:
Алексей Ярцев
 Дмитровское шоссе,
 д.9Б, офис 326

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


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

Неразрывная строка . Если вы не хотите, чтобы броузер автоматически переносил строку, то вы можете обозначить ее тэгами  и . В этом случае броузер не будет переносить строку даже если она выходит за нраницы экрана; вместо этого броузер позволит горизонтально прокручивать окно. Например:   которая не допускает какого-либо разбиения, где бы то ни было 
Если же вы хотите все же позволить разбиение данной строки на две, но в строго запланированном месте, то вставьте тэг  в это место. Например:  Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения, где бы то ни было 
Данная строка является самой длинной строкой документа,
которая не допускает какого-либо разбиения, где бы то ни было.
Цитата 
. Данный тэг предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный тэгом 
, отступает от левого края документа на 8 пробелов. Например: На открытии данной конференции глава представительства произнес: 
 
 Сегодня один из величайших дней для нашей компании.
 Мы открыли новую технологию, позволяющую нашим клиентам повысить производительность их настольных систем в несколько раз. 

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

1.6
Список
базовых
тэгов
HTML


Таблица №1: Основные тэги

Стартовый


Завершающий


Описание








Обозначение HTML-документа








Заголовочная часть документа








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








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








Заголовок абзаца первого уровня








Заголовок абзаца второго уровня








Заголовок абзаца третьего уровня








Заголовок абзаца четвертого уровня








Заголовок абзаца пятого уровня








Заголовок абзаца шестого уровня
















Форматированный текст








Перевод строки без конца абзаца











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


2.1
Тэги
списков



Существует три основных вида списков в HTML-документе:
а) пронумерованный
б) непронумерованный
в) список описаний
Вы можете создавать вложенные списки, используя различные тэги списков или повторяя одни внутри других. Для этого просто необходимо разместить одну пару тэгов (стартовый и завершающий) внутри другой. Будут ли элементы вложенного списка иметь те же маркеры, обозначающие элемент списка - зависит от броузера. Более подробно смотри в разделе "Вложенные списки".
Пронумерованные списки. В пронумерованном списке броузер автоматически вставляет номера элементов по порядку. Это означает, что если вы удалите один или несколько элементов пронумерованного списка, то остальные номера автоматически будут пересчитаны.
 
 и завершается тэгом 
 
. Например:

 
 Программирование 
 Алгоритмизация 
 Проектирование 

1. Программирование
2. Алгоритмизация
3. Проектирование
Тэг 
 может иметь параметры:


Вид счетчика:
A - большие латинские буквы (A,B,C...)
a - маленькие латинские буквы (a,b,c...)
I - большие римские цифры (I,II,III...)
i - маленькие римские цифры (i,ii,iii...)
1 - обычные цифры (1,2,3...)
Число, с которого начинается отсчет
Например:
 
 Программирование 
 Алгоритмизация 
 Проектирование 

XV. Программирование
XVI. Алгоритмизация
XVII. Проектирование.
Непронумерованные списки. Для непронумерованных списков броузер обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь броузера.
Пронумерованный список начинается стартовым тэгом 
 и завершается тэгом 
. Каждый элемент списка начинается с тэга 
. Например:

 
 Программирование 
 Алгоритмизация 
 Проектирование 

· Программирование
· Алгоритмизация
· Проектирование
Тэг 
 может иметь параметр:


Тип тэга 
 определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square). Например:

 
 Программирование 
 Алгоритмизация 
 Проектирование 

§ Программирование
§ Алгоритмизация
§ Проектирование
Вложенные списки. Дадим пример вложенных списков:
     
 Список сотрудников нашей фирмы 
 
 Составлено: 30 июля 1996 года 
 Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании. 
Список может быть использован только в служебных целях. 
 
 
 Дирекция 
 
 Иванов И.И. 
 Петров К.В. 
 
 Отдел маркетинга 
 
 Варшавская Е.Л. 
 Самсонов Д.М. 
 
  

Вот, что вы увидите на экране броузера:
Список сотрудников нашей фирмы


Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании.
Список может быть использован только в служебных целях.
1. Дирекция
o Иванов И.И.
o Петров К.В.
2. Отдел маркетинга
o Варшавская Е.Л.
o Самсонов Д.М.
Элемент списка 
.

Тэг 
 может иметь параметры:

 или 

в зависимости от того, в списке какого вида находится данный элемент.
Вид маркера (см. 
) или счетчика (см.OL)

Значение для элемента пронумерованного списка (его номер). Все дальнейшие номера элементов списка будут отсчитываться от этого номера.
Например:
 
 Программирование 
 Алгоритмизация 
 Проектирование 

XV. Программирование
XVI. Алгоритмизация
XVII. Проектирование
Список определений.
Список определений начинается с тэга 
 и завершается тэгом 
. Данный список служит для создание списков типа "термин"-"описание". Каждый термин начинается тэгом 
 , а описание - тэгом 
. Например:

 
  Отдел маркетинга  
  
  Финансовый отдел  
  
  Отдел кадров  
  

Отдел
маркетинга

Данный отдел занимается продвижением продуктов и услуг
Финансовый
отдел

Данный отдел занимается всеми финансовыми операциями
Отдел
кадров

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

Гипертекстовые ссылки являются ключевым компонентом, делающим WEB привлекательным для пользователей. Добавляя гипертекстовые ссылки (далее - ссылки), вы делаете набор документов связанным и структурированным, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно.
Ссылки имеют стандартный формат, что позволяет броузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки. Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например, запрашивать файл по FTP-протоколу для отображения его броузером. URL может указывать на специальное место по абсолютному пути доступа, или указывать на документ в текущем пути доступа, что часто используется при организации больших структурированных WEB-сайтов.
Внимание! Вы можете использовать ссылки как для перемещения по документу, так и для перемещения от одного документа к другому. Однако HTML не поддерживает возврат на предыдущую ссылку, если перемещение происходило внутри документа. Если вы используете ссылки внутри документа, а затем нажимаете на клавишу Back, то вы не перейдете на предыдущую ссылку, а вернетесь на ту часть документа, которую вы просматривали до этого.
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
Опишем каждый из компонентов URL:
METHOD. Имя операции, которая будет выполняться при интерпретации данного URL. Наиболее часто используемые методы:
чтение файла с локального диска. Имя файла интерпретируется для локальной машины пользователя. Данный метод используется для отображения какого-либо файла, находящегося на машине пользователя. Например: file:/home/alex/index.html - отображает файл index.html из каталога /home/alex на пользовательской машине
доступ к WEB-странице в сети с использованием HTTP-протокола. (Это наиболее часто используемый метод доступа к какому-либо HTML-документу в сети). Например: http://www.softexpress.com/ - доступ к Home-странице компании SoftExpress
запрос файла с анонимного FTP-сервера. Например: ftp://hostname/directory/filename
активизирует почтовую сессию с указанным пользователем и хостом. Например: mailto:[email protected] - активизирует сессию посылки сообщения пользователю info на машине softexpress.com, если броузер поддерживает запуск электронной почты. Заметьте, что метод mailto: не требует указание слешей после двоеточия (как правило, после двоеточия сразу идет электронный адрес абонента)
обращение к службе telnet
вызов службы новостей, если броузер ее поддерживает. Например: news:relcom.www.support
SERVERNAME. Необязательный параметр, описывающий полное сетевое имя машины. Например: www.softexpress.com - полное сетевое имя сервера фирмы СофтСервис.
Если имя сервера не указано, то ссылка считается локальной, и полный путь, указанный далее в URL вычисляется на той машине, с которой взят HTML-документ, содержащий данную ссылку. Вместо символьного имени машины может быть использован IP-адрес, однако это не рекомендуется из-за возможного пересечения с фиксированными локальными адресами внутренней сети.
PORT. Номер порта TCP на котором функционирует WEB-сервер. Если порт не указан, то "по умолчанию" используется порт 80. Данный параметр (port) не используется в подавляющем большинстве URL.
PATHNAME. Частичный или полный путь к документу, который должен вызваться в результате интерпретации URL. Различные WEB-сервера сконфигурированы по разному для интерпретации пути доступа к документу. Например, при использовании CGI скриптов (исполняемых программ), они обычно собираются в одном или нескольких выделенных каталогах, путь к которым записан в специальных параметрах WEB-сервера. Для данных каталогов WEB-сервером выделяется специальный логический путь, который и используется в URL. Если WEB-сервер видит данный путь, то запрашиваемый файл интерпретируется как исполняемый модуль. В противном случае, запрашиваемый файл интерпретируется просто как файл данных, даже если он является исполняемым модулем. Например: http://www.softexpress.com/cgi-win/handle.exe
В данном примере HTTP-сервер должен вызвать CGI-скрипт с именем handle.exe, который находится на машине с сетевым именем www.softexpress.com. Путь к данному скрипту - /cgi-win/ - в действительности является виртуальным путем (выделенным сервером для исполняемых модулей). Заметьте, что при описании пути используется UNIX-подобный синтаксис, где, в отличии от DOS и Windows используются прямые слеши вместо обратных. Если после сетевого имени машины сразу идет имя документа, то он должен находиться в корневом каталоге на удаленной машине или (что чаще) в каталоге, выделенном WEB-сервером в качестве корневого. Если же URL заканчивается сетевым именем машины, то в качестве документа запрашивается документ из корневого каталога удаленной машины с именем, установленным в настройках WEB-сервера (как правило, это index.html).
#ANCHOR. Данный элемент является ссылкой на строку (точку) внутри HTML-документа. Большинство броузеров, встречая после имени документа данный элемент, размещают документ на экране таким образом, что указанная строка документа помещается в верхнюю строку рабочего окна броузера. Точки, на которые ссылается #anchor, указываются в документе при помощи тэга NAME, как это будет описано далее.
Структура ссылок в HTML-документе. Пока что мы рассмотрели только внешний вид URL. Для того, чтобы броузер отобразил ссылку на URL, необходимо отметить URL специальными тэгами в HTML-документе. Синтаксис HTML, позволяющий это сделать - следующий:
 текст-который-будет-подсвечен-как-ссылка 
Тэг открывает описание ссылки, а тэг  - закрывает его. Любой текст, находящийся между данными двумя тэгами подсвечивается специальным образом Web-броузером. Обычно этот текст отображается подчеркнутым и выделен синим (или другим заданным пользователем) цветом. Текст, обозначающий URL, не отображается броузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте). Вот пример сегмента HTML-документа:
Для получения примера смотри  Текст-который-отобразится-в-первой-строке-броузера 

 Текст 
Например:
Список разделов
 
 
Раздел 1
 
Раздел 2
 
 
Раздел 1
 
 
Текст раздела 1
 
 
Раздел 2
 
 
Текст раздела 2 

Список разделов
o Раздел 1
o Раздел 2
Текст раздела 1
Текст раздела 2
Символы "#ex1" сообщает вашему броузеру, что необходимо найти в данном HTML-документе маркер с именем "ex1".
Когда пользователь щелкнет мышью на строке "Раздел 1", броузер перейдет сразу к разделу 1.
Внимание! Как ранее было показано в синтаксисе URL, маркер раздела может быть поставлен как в том же документе, который просматривается в текущий момент, так и в другом документе. Во втором случае броузер осуществит подгрузку другого документа и перейдет к указанному для него разделу.
2.3
Графика
внутри
документа

Одна из наиболее привлекательных черт Web - возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тэга . Использование данного тэга позволяет значительно улучшить внешний вид и функциональность документов.
Существует два способа использования графики в HTML-документах. Первый - это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее используемая техника при проектировании документов, называемая иногда "inline image". Синтаксис тэга:

Опишем элементы синтаксиса тэга:
Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает броузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом броузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством броузеров.
Данный необязательный элемент задает текст, который будет отображен броузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство броузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. Тэг ALT рекомендуется, если ваши пользователи используют броузер, не поддерживающий графический режим, например Lynx.
Данный необязательный параметр используется для указания высоты рисунка в пикселях. Если данный параметр не указан, то используется оригинальная высота рисунка. Это параметр позволяет сжимать или растягивать изображения по вертикали, что позволяет более четко определять внешний вид документа. Однако, некоторые броузеры не поддерживают данный параметр. С другой стороны, экранное разрешение у вашего клиента может отличаться от вашего, поэтому будьте внимательны при задании абсолютной величины графического объекта.
Параметр также необязателен, как и предыдущий. Позволяет задать абсолютную ширину рисунка в пикселях.
Данный параметр используется, чтобы сообщить броузеру, куда поместить следующий блок текста. Это позволяет более строго задать расположение элементов на экране. Если данный параметр не используется, то большинство броузеров располагает изображение в левой части экрана, а текст справа от него.
Этот параметр сообщает броузеру, что данное изображение позволяет пользователю выполнять какие-либо действия, щелкая мышью на определенном месте изображения. Данная возможность является расширением HTML и будет обсуждена нами позже.
Приведем пример использования данного тэга:

С версии HTML 2.0 у тэга  появились дополнительные параметры:

Новые параметры:

Позволяет установить размер в пикселях пустого пространства над и под рисунком, чтобы текст не наезжал на рисунок. Особенно это важно для динамически формируемых изображений, когда нельзя заранее увидеть документ.
То же самое, что и VSPACE, но только по горизонтали.
Фоновые рисунки. Большинство броузеров позволяет включать в документ фоновый рисунок, который будет матрицироваться и отображаться на фоне всего документа. Некоторые пользователи любят фоновую графику, некоторые нет. Ненавязчивый полупрозрачный рисунок (обои) обычно хорошо выглядит в качестве фона для большинства документов.
Описание фонового рисунка включается в тэг BODY и выглядит следующим образом:
.


где каждый из параметров определяет цвет того или иного элемента. Опишем эти параметры:
Цвет фона документа
Цвет простого текста документа


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

Формат тэга:
number|percent
 ALIGN=left|right|center NOSHADE>

Параметры тэга:
Толщина линии в пикселях.
Ширина линии в пикселях или процентах от ширины окна броузера.
Расположение на экране (слева | по центру | справа).
По умолчанию линия представлена в 3D виде с тенью. NOSHADE позволяет представить линию просто однотонной темной полоской.
2.4
Добавление
стилей
в
документ

HTML позволяет использовать различные стили шрифтов для выделения текстовой информации в ваших документах. Вот короткий список стилей, поддерживаемых большинством броузеров:
bold (жирный)
italic (наклонный)
mono spaced (type writer - с использованием фиксированных шрифтов)
Вы можете комбинировать различные виды стилей, например жирный и наклонный.
Таблица №2: Основные стили текста
Комбинирование стилей позволяет вам отображать в одной строке несколько элементов различными стилями, например:
Жизнь - это песня!
Жизнь
 - это

песня!


Внимание!Добавление большого количества стилей и их комбинаций приводит к затруднению чтения текста!
Дополнительные стили:
· big (большой)
· small (маленький)
· sub (подстрочник)
· sup (надстрочник)
· Таблица №3: Дополнительные стили текста
Размер шрифта . Вы можете изменять размер шрифта при помощи тэга:


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

Например:
и зм ен ен и е

изменение
Цвет шрифта . Вы можете изменить цвет шрифта при помощи тэга:


 Красный   Зеленый   Синий 

Красный Зеленый Синий
2.5
Специальные
тэги
HTML


Следующие тэги позволят вам сделать ваш HTML-документ более функциональным.
Тэг адреса 
. Тэг 
 используется для выделения автора документа и его дреса (например, e-mail). Синтаксис:


Escape-последовательности. Некоторые символы являются управляющими символами в HTML и не могут напрямую использоваться в документе:
1) левая угловая скобка "<"
2) правая угловая скобка ">"
3) амперсанд "&"
4) двойные кавычки """
Чтобы использовать данные символы в документе, необходимо заменить их escape-последовательностями:
Таблица №4: Escape-последовательности
Существует большое количество escape-последовательностей для обозначения специальных символов, например " " для обозначения знака © и ® для значка ®, появившихся в HTML 2.0. Одной из особенностей является замена символов во 2-ой части символьной таблицы (после 127-ого символа) на escape-последовательности для передачи текстовых файлов с национальными языками по 7-битным каналам.
Внимание!Escape-последовательности чувствительны к регистру: НЕЛЬЗЯ использовать < вместо <.
2.6
HTML
Формы


Некоторые WWW броузеры позволяют пользователю, заполнив специальную форму, возвращающую полученное значение, выполнять некоторые действия на вашем WWW-сервере. Когда форма интерпретируется WEB-броузером, создается специальные экранные элементы GUI, такие, как поля ввода, checkboxes, radiobuttons, выпадающие меню, прокручиваемые списки, кнопки и т.д. Когда пользователь заполняет форму и нажимает кнопку "Подтверждение" (SUBMIT - специальный тип кнопки, который задается при описании документа), информация, введена пользователем в форму, посылается HTTP-серверу для обработки и передаче другим программам, работающим под сервером, в соответствии с CGI (Common Gateway Interface) интерфейсом.
Когда вы описываете форму, каждый элемент ввода данных имеет тэг . Когда пользователь помещает данные в элемент формы, инфоромация размещается в разделе VALUE данного элемента.
Синтаксис. Все формы начинаются тэгом 
 и завершаются тэгом 
.

 Элементы_формы_и_другие_элементы_HTML. 

METHOD. Метод посылки сообщения с данными из формы. В зависимости от используемого метода вы можете посылать результаты ввода данных в форму двумя путями:
GET: Информация из формы добавляется в конец URL, который был указан в описании заголовка формы. Ваша CGI-программа (CGI-скрипт) получает данные из формы в виде параметра переменной среды QUERY_STRING. Использование метода GET не рекомендуется.
POST: Данный метод передает всю информацию о форме немедленно после обращения к указанному URL. Ваша CGI-программа получает данные из формы в стандартный поток ввода. Сервер не будет пересылать вам сообщение об окончании пересылки данных в стандартный поток ввода; вместо этого используется переменная среды CONTENT_LENGTH для определения, какое количество данных вам необходимо считать из стандартного потока ввода. Данный метод рекомендуется к использованию.
ACTION: ACTION описывает URL, который будет вызываться для обработки формы. Данный URL почти всегда указывает на CGI-программу, обрабатывающую данную форму.
Тэги формы:
Тэг  используется для того, чтобы позволить пользователю вводить более одной строки информации (свободный текст). Вот пример использовани тэга <TEXTAREA>:</p>
<p><TEXTAREA NAME="address" ROWS=10 COLS=50></p>
<p>Дмитровкое шоссе,</p>
<p>д.9Б, офис 448</p>
<p>
Атрибуты, используемые внутри тэга  описывают внешний вид и имя вводимого значения. Тэг  необходим даже тогда, когда поле ввода изначально пустое. Описание атрибутов:
NAME - имя поля ввода
ROWS - высота поля ввода в символах
COLS - ширина поля ввода в символах
Если вы хотите, чтобы в поле ввода по умолчанию выдавался какой-либо текст, то необходимо вставить его внутри тэгов  и .
Тэг  используется для ввода одной строки текста или одного слова. Атрибуты тэга:
CHECKED - означает, что CHECKBOX или RADIOBUTTON будет выбран.
MAXLENGTH - определяет количество символов, которое пользователи могут ввести в поле ввода. При превышении количества допустимых символов броузер реагирует на попытку ввода нового символа звуковым сигналом и не дает его ввести. Не путать с атрибутом SIZE. Если MAXLENGTH больше чем SIZE, то в поле осуществляется скроллинг. По умолчанию значение MAXLENGTH равно бесконечности.
NAME - имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому, впоследствии, вы сможете получить данные, помещенные пользователем в это поле.
SIZE - определяет визуальный размер поля ввода на экране в символах.
SRC - URL,. указывающий на картинку (используется совместно с атрибутом IMAGE).
TYPE - определяет тип поля ввода. По умолчанию это простое поле ввода для одной строки текста. Остальные типы должны быть явно указаны:
CHECKBOX:Используется для простых логических (BOOLEAN) значений. Значение, ассоциированное с именем данного поля, которое будет передаваться в вызываемую CGI-программу, может принимать значение ON или OFF.
HIDDEN:Поля данного типа не отображаются броузером и не дают пользователю изменять присвоенные данному полю по умолчанию значение. Это поле используется для передачи в CGI-программу статической информации, например, ID пользователя, пароля или другой информации.
Данный тип поля ввода позволяет вам связывать графический рисунок с именем поля. При нажатии мышью на какую-либо часть рисунка будет немедленно вызвана ассоциированная форме CGI-программа. Значения, присвоенные переменной NAME будут выглядеть так - создается две новых переменных: первая имеет имя, обозначенное в поле NAME с добавлением.x в конце имени. В эту переменную будет помещена X-координата точки в пикселях (считая началом координат левый верхний угол рисунка), на которую указывал курсор мыши в момент нажатия, а переменная с именем, содержащимся в NAME и добавленным.y, будет содержать Y-координату. Все значения атрибута VALUE игнорируются. Само описание картинки осуществляется через атрибут SRC и по синтаксису совпадает с тэгом .
То же самое, что и атрибут TEXT, но вводимое пользователем значение не отображается броузером на экране.
Данный атрибут позволяет вводить одно значение из нескольких альтернатив. Для создания набора альтернатив вам необходимо создать несколько полей ввода с атрибутом TYPE="RADIO" с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME. В CGI-программу будет передано значение типа NAME=VALUE, причем VALUE примет значение атрибута VALUE того поля ввода, которое в данный момент будет выбрано (будет активным). При выборе одного из полей ввода типа RADIO все остальные поля данного типа с тем же именем (атрибут NAME) автоматически станут невыбранными на экране.
Данный тип обозначает кнопку, при нажатии которой все поля формы примут значения, описанные для них по умолчанию.
Данный тип обозначает кнопку, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы. Атрибут VALUE может содержать строку, которая будет высвечена на кнопке.
Данный тип поля ввода описывает однострочное поле ввода. Используйте атрибуты MAXLENGTH и SIZE для определения максимальной длинны вводимого значения в символах и размера отображаемого поля ввода на экране (по умолчанию принимается 20 символов).
VALUE - присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO (для типа RADIO данный атрибут обязателен).
Меню выбора в формах. Под меню выбора в формах понимают такой элемент интерфейса, как LISTBOX. Существует три типа тэгов меню выбора для форм:
Select - пользователь выбирает одно значение из фиксированного списка значений, представленных тэгами OPTION. Данный вид представляется как выпадающий LISTBOX.
Select single - то же самое, что и Select, но на экране пользователь видит одновременно три элемента выбора. Если их больше, то предоставляется автоматический вертикальный скроллинг.
Select multiple - позволяет выбрать несколько элементов из LISTBOX.
SELECT: Тэг SELECT позволяет пользователю выбрать значение из фиксированного списка значений. Обычно это представлено выпадающим меню.
Тэг SELECT имеет один или более параметр между стартовым тэгом  и завершающим . По умолчанию, первый элемент отображается в строке выбора. Вот пример тэга :


 AT 386
 AT 486
 AT 586
SELECT SINGLE: Тэг SELECT SINGLE - это то же самое, что и Select, но на экране пользователь видит одновременно несколько элементов выбора (три по умолчанию). Если их больше, то предоставляется автоматический вертикальный скроллинг. Количество одновременно отображаемых элементов определяется атрибутом SIZE. Пример:

 AT 386

 AT 486

 AT 586

 Pentium PRO
SELECT MULTIPLE: Тэг SELECT MULTIPLE похож на тэг SELECT SINGLE, но пользователь может одновременно выбрать более чем один элемент списка. Атрибут SIZE определяет количество одновременно видимых на экране элементов, атрибут MULTIPLE - максимальное количество одновременно выбранных элементов. Пример:

 AT 386
 AT 486
 AT 586
 Pentium PRO
Если выбрано одновременно несколько значений, то серверу передаются соответствующее выбранному количество параметров NAME=VALUE с одинаковыми значениями NAME, но разными VALUE.
Отправление файлов при помощи форм. Формы можно использовать для отправки не только небольших информационных сообщений ввиде параметров, а также и для отправки файлов.
Внимание! Поскольку данная возможность требует поддержки получения файлов WEB-сервером, то, соответственно, необходимо, чтобы сервер поддерживал получение файлов!
Например:
 Отправить данный файл:  
  
.

2.7
HTML
Фреймы


Используя фреймы, позволяющие разбивать Web-страницы на множественные прокручиваемые подокна, вы можете значительно улучшить внешний вид и функциональность информационных систем и Web-приложений. Каждое подокно, или фрейм, может иметь следующие свойства:
· Каждый фрейм имеет свой URL, что позволяет загружать его независимо от других фреймов
· Каждый фрейм имеет собственное имя (параметр NAME), позволяющее переходить к нему из другого фрейма
· Размер фрейма может быть изменен пользователем прямо на экране при помощи мыши (если это не запрещено указанием специального параметра)
· Данные свойства фреймов позволяют создавать продвинутые интерфейсные решения, такие как:
· Размещение статической информации, которую автор считает необходимым постоянно показывать пользователю, в одном статическом фрейме. Это может быть графический логотип фирмы, copyright, набор управляющих кнопок
· Помещение в статическом фрейме оглавления всех или части WEB-документов, содержащихся на WEB-сервере, что позволяет пользователю быстро находить интересующую его информацию
· Создавать окна результатов запросов, когда в одном фрэйме находится собственно запрос, а в другом результаты запроса
· Создавать формы типа "мастер-деталь" для WEB-приложений, обслуживающих базы данных.
Синтаксис фреймов. Формат документа, использующего фреймы, внешне очень напоминает формат обычного документа, только вместо тэга BODY используется контейнер FRAMESET, содержащий описание внутренних HTML-документов, содержащий собственно информацию, размещаемую во фреймах.
 ... ... 
Однако фрэйм-документ является специфичным видом HTML-документа, поскольку не содержит элемента BODY и какой-либо информационной нагрузки соответственно. Он описывает только фреймы, которые будут содержать информацию (кроме случая двойного документа, который мы рассмотрим позже).
Представим общий синтаксис фреймов:

  ...

Общий контейнер FRAMESET описывает все фреймы, на которые делится экран. Вы можете разделить экран на несколько вертикальных или несколько горизонтальных фреймов. Тэг FRAME описывает каждый фрейм в отдельности. Рассмотрим более детально каждый компонент.
2.7.1. Создание web-страницы в редакторе FrontPage 2003
 
Web-страницы или гипертекстовые документы (html-документы) - это текстовые файлы, размеченные тегами (tags) с помощью языка HTML (HyperText Markup Language). HTML не является языком программирования, он является языком разметки или средством форматирования гипертекста. Для разметки документа используются теги. Теги заключаются в угловые скобки. В основном теги являются парными, т.е. существуют открывающий и закрывающий теги.
 
Язык разметки HTML позволяет форматировать текст веб страницы, размещать на ней графические объекты, рисунки, вставлять звукозапись и различные мультимедийные элементы, а так же скрипты (JavaScript, VBScript), создавать гипертекстовые ссылки.
 
Веб-страница начинается и заканчивается парными тегами  и . Между этими тегами размещаются парные теги ,  (голова веб-страницы), между которыми размещаются парные теги  для заголовка web-страницы, а также вводятся различные метатеги для ключевых слов, описания содержания страницы и т.д.
 
Затем следуют теги ,  (тело веб-страницы), между этими тегами размещается содержание или контент страницы.
 
Например, если в редакторе Блокнот или Notepad++ ввести текст, размеченный тегами:

 

 

 

 

 

 Этот сайт посвящен дистанционному обучению информатике, телекоммуникациям и электронному бизнесу 

 

 

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

 Рис. 1.
 
Веб-страницы (гипертекстовые документы) - это файлы, которые имеют уникальный адрес и отображаются браузерами.
 
WWW-страницы могут быть:
 
статическими;
 
динамическими;
 
интерактивные.
Статические страницы - это статические файлы (набор текста, таблиц, рисунков и т.д.), которые создается с помощью языка разметки HTML и имеет расширение.html или.htm.
 
Динамические веб-страницы - это веб-страницы, сгенерированные или сформированные (созданные) в процессе исполнения запроса пользователя. Эти страницы пишутся на языке PHP, ASP и т.д. и имеют соответственно расширения.php, .aspx. Динамические страницы создаются так называемым движком (Content Managment System – Система Управления Контентом) или специальной программой на сервере, которая по запросам пользователей формирует веб-страницу из данных хранящихся на сервере в базе данных.
 
Интерактивные веб-страницы - это веб-страницы, которые включают в себя формы (созданные на языках PHP, JavaScript и VBScript и т.д.), с помощью этих форм происходит обмен данными между пользователем и сервером.
 
Web-страницы создаются с помощью различных html-редакторов: Microsoft FrontPage,
Macromedia Dreamweaver, TinyMCE WYSIWYG Editor, FCKeditor, и т.д.
 
Для того чтобы научиться создавать веб-страницы и сайты, целесообразно использовать редактор на русском языке . В редакторе FrontPage существуют мастера, которые позволяют легко создавать web-сайт, и шаблоны веб-страниц, содержащие разметку (структуру) и дизайн необходимые для быстрого создания web-страниц.
 
Алгоритм создания веб-страниц в редакторе FrontPage 2003 детально изложен на страничке 
 
Санкт-Петербургский Государственный
Политехнический Университет
Факультет Экономики и Менеджмента
Кафедра: Экономика и менеджмент в
электроэнергетике и природопользовании
Курсовая работа
Информационные технологии в
энергетике
«Создание

web

-страниц
при помощи языка

HTML


».


Руководитель: Васильева Вероника
Игоревна
Выполнила студентка группы 2073/2: Марьина
Виктория.
г. Санкт-Петербург
Введение
……………………………………………………………………3
1.
Основные понятия языка HTML………………………………………..4
1.1 История появления языка
HTML………………………………….4
1.2.Структура
файла в формате HTML……………………………....6
1.3. Списки базовых
тэгов HTML……………………………………..9
1.4. Создание таблиц
в HTML………………………………………..10
1.5 Создание гипертекстовых
ссылок………………………………..12
2.
Описание создание сайта «Стрельба из
лука»…..……………………..14
Заключение………………………………………………………………….22
Список
литературы………………………………………………………....23
Введение.

Тема моей курсовой работы
«Создание web-страниц
при помощи языка HTML
» очень актуальна в настоящее время,
так как мы живем в век компьютерных
технологий и Интернет занимает огромное
место в жизни работающих и учащихся
людей. Интернет, который не мыслим без
языка HTML
 при помощи которого и создаются
web-страницы,
проникает во все самые важные части
человеческой жизни и является безграничным
источником информации.
Мой курсовой проект разработан
на примере сайта, который я создавала
и который является самим же предметом
работы. Поэтому в дальнейшем все
использованные материалы будут взяты
из него.
Целью моей работы было научиться
создавать сайт и использовать для этого
необходимые алгоритмы, которые будут
описаны в моей работе.
Для написания своего курсового
проекта я буду использовать лекции, в
которых подробно и ясно изложены основные
понятия, которые понадобятся в дальнейшем
изучении. Помимо этого я буду включать
информацию, взятую из Интернета.
1.1
История появления языка
HTML
.
англ. Hyper
Text
Markup
Language
- «язык разметкигипертекста»)
 - стандартныйязык
разметки документов
воВсемирной
паутине.
Большинствоweb-страниц создаются
при помощи языка HTML (илиXHTML).
Язык HTML интерпретируетсябраузером и
отображается в виде документа, в удобной
для человека форме.
HTML является приложением («частным
случаем»)SGML (стандартного
обобщённого языка разметки) и соответствует
международному стандартуISOXHTML же
является приложениемXML.
британскимТимом
Бернерсом-Ли приблизительно
в19911992
годах в
стенахЕвропейского
совета по ядерным исследованиямЖеневеШвейцария).
HTML создавался как язык для обмена научной
и технической документацией, пригодный
для использования людьми, не являющимися
специалистами в области вёрстки.
HTML успешно справлялся с проблемой
сложности SGML путём определения небольшого
набора структурных
исемантическихдескрипторов.
Дескрипторы также часто называют
«тегами».
С помощью HTML можно легко создать
относительно простой, но красиво
оформленный документ. Помимо упрощения
структуры документа, в HTML внесена
поддержка гипертекста.Мультимедийные возможности
были добавлены позже. Изначально язык
HTML был задуман и создан как средство
структурирования и форматирования
документов без их привязки к средствам
воспроизведения (отображения). В идеале,
текст с разметкой HTML должен был без
стилистических и структурных искажений
воспроизводиться на оборудовании с
различной технической оснащённостью
(цветной экран современного компьютера,
монохромный экран органайзера,
ограниченный по размерам экран мобильного
телефона или устройства и программы
голосового воспроизведения текстов).
Однако современное применение HTML очень
далеко от его изначальной задачи.
С течением времени, основная
идея платформонезависимости языка HTML
была отдана в своеобразную жертву
современным потребностям в мультимедийном
и графическом оформлении.
Текстовые
документы, содержащие код на языке HTML
(такие документы традиционно
имеютрасширение
.html
или.htm
),
обрабатываются специальнымиприложениями
,
которые отображают документ в его
форматированном виде. Такие приложения,
называемые «браузерами» или
«интернет-обозревателями», обычно
предоставляют пользователю
удобныйинтерфейс
для
запросаweb
-страниц
,
их просмотра (и вывода на иные внешние
устройства) и, при необходимости, отправки
введённых пользователем данных на
сервер. Наиболее популярными на
сегодняшний день браузерами
являютсяInternet
Explorer
Mozilla
Firefox
Safari
Google
Chrome
Opera
.


1.2
Структура файла в формате HTML

Для создания web-страницы
 в первую очередь нам потребуется создать
файл с расширением "htm" или "html"
и открыть его для редактирования в
текстовом редакторе (работая в Windows,
можно использовать стандартную программу
"Блокнот").
Текст для HTML-документа набирается
в том виде, в котором его должен показать
браузер, а при выделения фрагментов,
которые предназначены для разметки
документа (тегов), используются угловые
скобки (знаки "").
Любой документ HTML начинается с
открывающего тега и заканчивается
соответствующим ему закрывающим тегом.
Закрывающий тег отличается от открывающего
наличием косой черты перед названием
тега. В языке HTML нет различий между
большими и малыми буквами при записи
тегов, однако принято записывать
открывающий тег большими буквами, а
закрывающий - малыми. Часть документа,
которая находится в пределах от
открывающего до соответствующего ему
закрывающего тега, называется контейнером
(to contain - содержать что-либо). Теги, у
которых есть закрывающий и открывающий
варианты записи называются парными, а
те, которые используются только в одном
виде (например, тег
), называются непарными. Весь файл
web-страницы - это по сути дела один большой
контейнер HTML.
Внутри контейнера HTML последовательно
записываются два контейнера:
1.Заголовок документа
().
Внутри этого контейнера записываются
параметры, общие для всей страницы. Для
примера можно поместить сюда контейнер, позволяющий поместить текст для
отображения в заголовке окна браузера.
2.Тело документа
(). Этот контейнер
содержит всё то, что должен показать
браузер внутри своего окна при открытии
документа. Если документ содержит только
текст, то этот текст нужно записывать
именно здесь, если есть другие элементы
(графика, таблицы, ссылки и т. д.). Элемент
BODY
должен встречаться в документе не более
одного раза.
Если сравнить исходные тексты
различных Web-страниц, можно легко увидеть
сходство их структур. Это объясняется
тем, что документы создаются по
определенным правилам. В основу синтаксиса
языка HTML лег стандарт ISO 8879:1986 «Information
processing. Text and Office systems. Standard Generalized Markup
Language (SGML)». Правда, существует большое
различие между стандартом официальным
и стандартом фактическим.
Ниже приведен шаблон типичного
Web-документа. На его примере мы рассмотрим
общие принципы построения HTML-страниц.
Для того чтобы понять структуру
Web-страницы, нам необходимо подробно
рассмотреть все элементы, входящие в
приведенный ниже пример.
исходная
тело документа
Если приведенный выше пример
пояснить схематически, получится
следующее:
Из схемы видно, что документ
состоит из двух основных блоков –
"заголовка" и "тела документа".
Заголовок определяется с помощью
элемента HEAD,
а тело – элементом BODY.
Заголовок содержит "техническую"
информацию о документе, хотя чаще всего
используется только для обозначения
его названия (см. элемент
TITLE).
Тело документа – самая важная
составляющая. Именно в нем находится
все то, что отображается на странице:
текст, картинки, таблицы.
Заголовок создается с помощью
элемента HEAD,
между тегами которого размещаются
элементы, содержащие техническую
информацию о документе. Заголовок обычно
располагается до тела документа.
Элементы, относящиеся к заголовку
документа:
HEAD -
определяет начало и конец заголовка
документа. Является контейнером для
элементов, содержащих техническую
информацию о документе.
TITLE -
определяет имя всего документа, которое
отображается в заголовке окна браузера.
Имя, как правило, отображается в заголовке
окна браузера. Данный элемент обязателен
для любого HTML-документа и может быть
указан не более одного раза.
BASE
- Указывает базовый адрес текущего
документа (URL), который станет отправной
точкой для расчета относительных адресов
внутри документа. Элемент не имеет
конечного тега. Обязательно присутствие
хотя бы одного из атрибутов.



1.3. Списки
базовых тэгов HTML
Список
базовых тэгов HTML необходимых для
формирования текста web-страницы.
 

 
Стартовый

 

 
Завершающий

 

 
Описание



 


 

 
Обозначение
 HTML-документа



 


 

 
Заголовочная
 часть документа



 


 

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



 


 

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



 


 

 
Заголовок
 абзаца первого уровня



 


 

 
Заголовок
 абзаца второго уровня



 


 

 
Заголовок
 абзаца третьего уровня



 


 

 
Заголовок
 абзаца четвертого уровня



 


 

 
Заголовок
 абзаца пятого уровня



 


 

 
Заголовок
 абзаца шестого уровня



 


 




 


 

 
Форматированный
 текст



 


 

 
Перевод
 строки без конца абзаца



 


 


Можно
так же комбинировать различные виды
стилей, например жирный и наклонный.
Дополнительные
стили:
1.4.
Создание таблиц в
HTML.

Таблицы в HTML организуются как
набор столбцов и строк. Ячейки таблицы
могут содержать любые HTML-элементы,
такие, как заголовки, списки, абзацы,
фигуры, графику, а также элементы форм.
Основные
тэги таблицы
...
Это основноые тэги, описывающие
таблицу. Все элементы таблицы должны
находиться внутри этих двух тэгов. По
умолчанию таблица не имеет обрамления
и разделителей. Обрамление добавляется
атрибутом BORDER.
Строка таблицы:
...
Количество строк таблицы
определяется количеством встречающихся
пар тэгов
..
. Строки могут
иметь атрибуты ALIGN и VALIGN, которые описывают
визуальное положение содержимого строк
в таблице.
Ячейка таблицы:
...

Описывает стандартную ячейку
таблицы. Ячейка таблицы может быть
описана только внутри строки таблицы.
Каждая ячейка должна быть пронумерована
номером колонки, для которой она
описывается. Если в строке отстутствует
одна или несколько ячеек для некоторых
колонок, то броузер отображает пустую
ячейку. Расположение данных в ячейке
по умолчанию определяется атрибутами
ALIGN=left и VALIGN=middle. Данное расположение
может быть исправлено как на уровне
описания строки, так и на уровне описания
ячейки.
Заголовок таблицы:
...

Ячейка заголовка таблицы имеет
ширину всей таблицы; текст в данной
ячейке имеет атрибут BOLD и ALIGN=center.
Подпись:
 ...
Данный тэг описывает название
таблицы. Тэг должен присутствовать
внутри
...
, но снаружи
описания какой-либо строки или ячейки.
По умолчанию имеет атрибут
ALIGN=top, но может быть явно установлен в
ALIGN=bottom. ALIGN определяет, где - сверху или
снизу таблицы - будет поставлена подпись.
Подпись всегда центрирована в рамках
ширины таблицы.
Основные
атрибуты таблицы
BORDER - Данный атрибут
используется в тэге TABLE. Если данный
атрибут присутствует, граница таблицы
прорисовывается для всех ячеек и для
таблицы вцелом. BORDER может принимать
числовое значение, определяющее ширину
границы, например BORDER=3.
ALIGN - Если атрибут
ALIGN присутствует внутри тэгов
и, то он определяет положение
подписи для таблицы (сверху или снизу).
По умолчанию ALIGN=top. 
Если атрибут ALIGN
встречается внутри
,  или
, он управляет положением данных
в ячейках по горизонтали. Может принимать
значения left (слева), right (справа) или
center (по центру).
VALIGN - Данный атрибут
встречается внутри тэгов

, 
и
. Он определяет вертикальное
размещение данных в ячейках. Может
принимать значения top (вверху), bottom
(внизу), middle (по середине) и baseline (все
ячейки строки прижаты кверху).
NOWRAP - Данный атрибут
говорит о том, что данные в ячейке не
могут логически разбиваться на несколько
строк и должны быть представлены одной
строкой.
COLSPAN - Указывает, какое
количество ячеек будет объединено по
горизонтали для указанной ячейки. По
умолчании - 1.
ROWSPAN - Указывает, какое
количество ячеек будет объединено по
вертикали для указанной ячейки. По
умолчании - 1.
COLSPEC - Данный параметр
позволяет задавать фиксированную ширину
колонок либо в символах, либо в процентах,
например COLSPEC="20%".

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


2.
Описание создание сайта «Стрельба из
лука»

На рисунке 1 показан блокнот в
котором выполнялось изготовление моего
сайта «Стрельба из лука»,а именно
исходной страницы или главной страницы
сайта.
Были заданы цвет фона (серый),
цвет шрифта (черный, красный и т.д.), рис.
1; размер шрифта, также были сделаны
гиперссылки на другие страницы в верхней
части в виде таблицы:



В
личном и
командном зачете, женские и
мужские команды, с 1972 года....

 (рис.
3)


На рис.4 показан блокнот в котором
выполнялось изготовление 2 страницы, а
именно «Исток происхождения» , также
были заданы цвет фона, цвет шрифта,
размер шрифт (рис4)
 , были сделаны неизменные
гиперссылки в виде таблицы на другие
страницы:


 (рис
5)
а
также на нужные участки текста:
 (рис. 6)



Блокнот в котором выполнялось
изготовление 3 страницы, а именно
«Крупнейшие соревнования»
Использовались
все те же настройки цветов и размеров
шрифта что и на предыдущих страницах,
также осталась неизменной верхняя
таблица с гиперссылками на другие
страницы.
На
рис.7 показан блокнот в котором выполнялось
изготовление 4 страницы, а именно
«Инвентарь»
Все
настройки остались такими же как и на
предыдущих страницах, добавились
гиперссылки с названиями тем абзацев,
при нажатии на которые попадаешь
непосредственно на нужный участок
страницы (рис 7)

На
рис.8 показан блокнот в котором выполнялось
изготовление 5 страницы, а именно
«Правила»; настройки неизменны, добавились
гиперссылки того же типа что и на
предыдущей странице

 ж
На
рис.9 показан блокнот в котором выполнялось
изготовление 6 страницы, а именно
«Победители Олимпийских игр» , где
сохранились все прежни настройки, но
добавились таблицы с данными.

Заключение.

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

1.http://html.find-info.ru/html/

2.http://scriptic.narod.ru/html/

3.
http://html.manual.ru/book/html/