Технологии разметки документов на основе использования HTML

Тип работы: Курсовая работа
Бесплатно: Антиплагиат
Объем: 24 страниц
В избранное:

РЕСПУБЛИКА КАЗАХСТАН
УНИВЕРСИТЕТ ТУРАН

Кафедра информационных технологий

Курсовая работа по дисциплине
Проектирование информационных систем
На тему:

Технологии разметки документов на основе использования HTML

Алматы
2006г
I.Введение ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 4
✓ Цель и место размещения документа Web

II.Сценарий и структура Web-документа ... ... ... ... ... ... ... ... ... ... .5

1 Создание документа в HTML

1 Основные элементы

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

2 Заголовки разделов документов

✓ Абзацы

1. Соединение с другими документами ... ... ... ... ... ... ... ... ... ...8
2. URL ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 8
3. Обращение к определенным разделам других документов ... ... ... .9

✓ Соединения с разделами текущего документа

4. Дополнительные возможности форматирования ... ... ... ... ... ... 10
➢ Списки ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 10
✓ Ненумерованные списки

✓ Нумерованные списки

✓ Списки определений
✓ Вложенные списки

5. Авторский стиль редактирования ... ... ... ... ... ... ... ... ... ... ...12
6. Цитаты ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 13
7. Адреса ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .13
8. Стили ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..14
✓ Логические стили

✓ Физические стили
9. Специальные символы ... ... ... ... ... ... ... ... ... ... ... ... ... ... .15
10. Прерывание строки ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..15
11. Горизонтальная линия ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..16
12. Внутренние рисунки ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... 16
✓ Если Browsers не поддерживает рисунки

✓ Внешние рисунки, звуки и мультипликация

13. Комментарии ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .. .19
14. Служебная информация ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..19
15. Гипертекстовые ссылки ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..20
✓ Метки
16. Установка базового адреса ... ... ... ... ... ... ... ... ... ... ... ... ... ..21
17. Схемы доступа ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... .22
18. Редакторы Web документов ... ... ... ... ... ... ... ... ... ... ... ... ... .22
✓ HoTMetaL PRO 3.0
19. Возможные ошибки ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...25
✓ Наложение различных стилей

✓ Различные стили внутри гиперссылки

✓ Ошибочная ссылка

20. Более длинный пример ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..26
III.В заключении ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ..2 7
Список используемой литературы ... ... ... ... ... ... ... ... ... ... ... ... 28

Цель и место размещения документа Web

Глобальная Сеть не только соединила пользователей всего мира, но и
утвердилась в виде новых технологий на наших персональных компьютерах.
Действительно, пользователь, который приобрел и установил на своей машине
хотя бы Microsoft Office 97, становится обладателем Internet-технологии в
готовом виде, независимо от того, подключен его компьютер к Сети или нет.
Иными словами, средства, предназначенные для работы с Сетью, стали
использоваться и в других целях, с нею не связанных, а среди программного
обеспечения, устанавливаемого на большинство персональных компьютеров,
приложения для Internet заняли свое почетное место.
В результате работа многих пользователей стала иметь большее отношение
к Сети, чем они того сами, может быть желали. Так, одним из способов
самовыражения стало размещение личных страничек в Internet. Многие
коммерческие фирмы стали использовать Сеть для рекламы и сбыта своей
продукции. Людям, занятым поиском работы, стал доступен и такой сервис:
составить резюме в формате Web-страницы и разместить эту информацию в Сети.
Важную роль Internet стал играть для научных, учебных и общественных
организаций. Подтверждение этому легко найти, выйдя на просторы
киберпространства.

Сценарий и структура Web-документа

Для того, чтобы понять структуру и сценарий Web-документа, мы должны
рассмотреть несколько Web-страниц и выявить общие элементы.
Любой Web-документ состоит из тегов( , причем обычно начальные теги
пишутся большими буквами, а конечные - маленькими.
Итак, рассмотрим основные теги, входящие в каждый Web-документ. Прежде
всего это HTMLhtml
Отличительный признак HTML-документа. Одним из принципов языка является
многоуровневое вложение элементов. HTML является самым внешним, так как
между его стартовым и конечным тегами должна находиться вся Web-страница.
Также основным тегом является HEADhead
Область заголовка Web-страницы. Иными словами, ее первая часть. Так же
как и HTML, HEAD служит только для формирования общей структуры документа.
BODYbody
Этот элемент заключает в себе гипертекст, который определяет собственно
Web-страницу. Эта та часть документа, которую разрабатывает автор страницы
и которая отображается броузером. Соответственно, конечный тег этого
элемента надо искать в конце HTML-файла. Внутри BODY можно использовать все
элементы, предназначенные для дизайна Web-страницы. Внутри стартового тега
элемента BODY можно расположить ряд атрибутов, обеспечивающих установки для
всей страницы целиком.
Без этих тегов невозможно создать ни одну Web-cтраницу.

Создание документа в HTML

В HTML документы записываются в ASCII формате и поэтому могут быть созданы
и отредактированы в любом текстовом редакторе (например, Emacs или vi на
UNIX машинах, или любом редакторе на IBM PC).
Любой гипертекст похож на книгу и может быть разбит на отдельные
структурные элементы:
• Собственно документ
• Главы, параграфы, пункты, подпункты
• Абзацы
Для каждого из этих элементов в HTML существуют определенные стили,
описывающие в каком виде пользователь увидит текст на экране. Пусть мы
создали файл minihtml.html:
BODY
TITLEПример HTML-текстаTITLE
H1Глава 1H1
H2Параграф 1.H2
Добро пожаловать в HTML!
Здесь мы расскажем, как надо и как не надо писать гипертексты.P
H2Параграф 2.H2P
BODY
Итак, мы уже поняли, что:
• Заголовок документа начинается с TITLE и заканчивается TITLE.
• Заголовок первого уровня (Главы) выделится символами H1 и H1)
• Заголовки последующих уровней (параграфы, пункты, подпункты и т.п.) -
символами Hx и Hx), где x - числа 2, 3, ...
• Абзац - символами P (В версиях HTML, действующих сейчас, символа
P не существует! НО! Он может появится в последующих версиях!)
NOTE: HTML не различает, какими буквами набраны символы форматирования:
title равносильно TITLE или TiTlE.
Не все стили поддержаны всеми WWW-browsers. Если browser не поддерживает
стиль, то он его игнорирует. Поэтому не страшно если мы уже сейчас начнем
пользоваться при форматировании абзацев символом P.

Основные элементы

Основной текст отделяется от сопроводительного символами:
BODY BODY

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

Каждый HTML-документ должен иметь заголовок, он показывается отдельно и
используется, прежде всего, для идентификации документа (например, при
поиске). Заголовок должен описывать цель документа и содержать не больше 5-
6 слов.
Практически во всех browsers заголовок документа виден в верхней части
экрана (окна).
Для выделения заголовка служат символы:
HEADTITLEЗаголовокTITLEHEA D

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

HTML имеет шесть уровней заголовков, имеющих номера с 1 по 6 (заголовок
первого уровня является заголовком высшего уровня). По сравнению с
нормальным текстом, заголовки выделяются шрифтом - размером и толщиной
букв. Первый заголовок в каждом документе должен быть выделен H1.
Синтаксис заголовков: Hy Текст заголовкаHy где y - число от 1 до 6,
определяющее уровень заголовка.

Абзацы

В отличие от документов в большинстве текстовых процессоров, прерывания
строк и слов в HTML-файлах не существенны. Обрыв слова или строки может
происходить в любом пункте в вашем исходном файле, при просмотре это
прерывание будет проигнорировано. Напомним, что в нашем примере, первый
параграф был представлен как
H2Параграф 1.H2
Добро пожаловать в HTML!
Здесь мы расскажем, как надо и как не надо писать гипертексты.P
В исходном файле два предложения находятся на двух разных строках. Web
browser игнорирует это прерывание строки и начинает новый абзац, только
после знака P. Однако, чтобы сохранить удобочитаемость в исходных HTML-
файлах, рекомендуется заголовки размещать на отдельных строках, а абзацы
отделять пустыми строками (в дополнение к P).
Также заметим, что хотя в действующих версиях HTML нет признака
форматирования P, рекомендуется его употреблять, поскольку он может
быть введен в последующих версиях. К ошибке это не приведет, поскольку все
незнакомые символы browser просто игнорирует. В противном случае, Вам в
последствии, может быть, придется переделывать Ваши HTML-документы. В
версии HTML+ предлагается, по аналогии с описанием заголовков, использовать
как открывающий, так и закрывающий знаки абзаца:
PЭто абзац в HTML+.P
Преимущество этого изменения в том, что мы будем способны форматировать
абзац. Например, располагать его в центре строки, выделив его символами:
P ALIGN=CENTER

Соединение с другими документами

Главное преимущество HTML состоит в его способности связываться с другими
документами. Browser выделяет (обычно цветом иили подчеркиванием) ключевые
слова, являющиеся гипертекстовыми ссылками (гиперссылками). Описывается
ссылка на другой документ следующим образом:
A HREF="имя файла" Текст, который будет служить как обращение к другому
документуA.
Приведем приме р такой гипертекстовой ссылки:
A HREF="minihtml.html"Пример HTML-текстаA
Здесь ключевые слова `Пример HTML-текста' являются гиперссылкой на файл
minihtml.html, который лежит в той же директории, что и текущий документ.
Вы можете ссылаться на документ, лежащий в любой директории, описав к нему
полный путь. Так, например, ссылку на файл NJStats.html, лежащий в
поддиректории AtlanticStates можно описать как:
A HREF="AtlanticStatesNJStats.html" New JerseyA
Это так называемые относительные ссылки. Мы также можем использовать
абсолютное имя файла (полный путь). В общем случае, использование ссылки по
абсолютному имени файла более предпочтительно.

URL

URL это аббревиатура от Uniform Resource Locator. В него входит, кроме
названия файла и директории: сетевой адрес машины и метод доступа к файлу.
С помощью URL можно запускать удаленные программы, и передавать им
значения. На этом принципе построены шлюзы в другие интернетовские сервиса:
finger, archie, ... . Здесь представлены несколько наиболее часто
используемых типов URL. Допустим файл с именем "online15.zip" лежит на ftp
сервере ftp.simtel.ru в директории pubdocservices тогда URL этого файла
будет выглядеть так: file:ftp.simtel.rupubdocservic esonline15.zip URL
директории в которой лежит файл: file:ftp.simtel.rupubdocservic es а
URL корневой директории ftp сервера ftp.simtel.ru выглядит вот так:
file:ftp.simtel.ru
Gopher URL's не так разнообразны, как файловые. Это связано с
ограниченностью этого сервиса. Для того что бы описать, например, gopher
сервер узла gopher.kiae.su необходим URL:
gopher:gopher.kiae.su
Некоторые gopher-сервера могут находиться на нестандартном номере порта (по
умолчанию обычно используется 70 порт) тогда он должен указываться:
gopher:gopher.banzai.edu:1234, где 1234 - номер порта.
Если мы внимательно посмотрим на исходники какого-нибудь гипертекстового
документа, и обратим внимание на то как указаны ссылки на другие URL то
заметим, что встречаются два вида:
1.A Href="http:www.simtel.runewssne ws.http" News A
2.A Href="aaa.html"AAAA
Первый - это полный URL, а второй - частичный. Частичный URL указывает на
документ который находится на том же сервере и в той же директории, что и
документ в котором встречается эта ссылка.

Обращение к определенным разделам других документов

Гиперссылки могут также использоваться для соединения с определенными
разделами документов. Предположим, мы хотим соединить документ А с первой
главой документа В, для чего нам необходимо создать именованную гиперссылку
в документе B.
Здесь вы можете увидеть A NAME = "Глава 1"Главу 1a
Текст первой главы.
Теперь, описывая ссылку в документе A, надо включить не только имя файла
"documentB.html"но также и имя гиперссылки, отделяемое символом (#):
Здесь вы можете увидеть текстA HREF = "documentB.html#Глава1" Главы 1
A документа B.
Теперь "кликнув" в слово"Главы 1" в документе А, вы переходите
непосредственно в Главу 1 в документе B.

Соединения с разделами текущего документа

Техника соединения аналогична описанной выше, только опускается имя файла.
Вот, например, связь с Главой 1 внутри того же самого файла (Документ B)
Это A HREF = "#Глава1"Глава 1A текущего документа.

Дополнительные возможности форматирования

Списки

HTML поддерживает ненумерованные, нумерованные списки и списки определений.

Ненумерованные списки

Ненумерованный список: ULLIсписок пунктов UL, например:
UL
LI яблоки
LI бананы
UL
что дает на экране:
• яблоки
• бананы

Нумерованные списки

Нумерованный список идентичен ненумерованному списку, только вместо UL
используется OL.
OL
LI апельсины
LI персики
LI виноград
OL

что дает на экране:
1. апельсины
2. персики
3. виноград
Browser автоматически нумерует элементы такого списка.

Списки определений

Список определений обычно состоит из чередования термина ( DT ) и
определения ( DD ). Обычно Web browsers определения располагает на новой
строке. Приведем пример списка определений:
DL
DT NCSA
DD NCSA (National Center for Supercomputing Applications).

DT CTC
DD CTC (Cornell Theory Center).
DL
что дает:
NCSA
NCSA (the National Center for Supercomputing Applications)
CTC
CTC (Cornell Theory Center).

Вложенные списки

Списки могут быть произвольно вложены, хотя разумнее было бы практически
ограничиться тремя уровнями вложенных списков.
Приведем пример вложенных списков:
UL
LI Крупные города России:
UL
LI Москва
LI Санкт-Петербург
UL
LI Крупны е города Украины:
UL
LI Киев
UL
UL
что дает на экране:
• Крупные города России:
o Москва
o Санкт-Петербург
• Крупные города Украины:
o Киев

Авторский стиль редактирования

Как мы уже говорили выше, в общем случае, текст документа формируется
browser, игнорируя пробелы и переносы строк. Используя PRE можно описать
в тексте заданный авторский стиль. (То есть пробелы и пустые строки
показаны как пробелы и пустые строки, и строки будут прерываться там же что
и в исходном HTML-файле.) Это полезно, например, для изображения программ:
PRE
#!bincsh
cd $SCR
cfs get mysrc.f:mycfsdirmysrc.f
cfs get myinfile:mycfsdirmyinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdirmyoutfile rm *

PRE
что дает на экране:
#!bincsh
cd $SCR
cfs get mysrc.f:mycfsdirmysrc.f
cfs get myinfile:mycfsdirmyinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdirmyoutfile rm *
При этом на экране текст пишется шрифтом фиксированной ширины.
В пределах PRE могут использоваться гиперссылки. Однако, в пределах
PRE , необходимо избегать использовать другие методы форматирования HTML-
документов. Заметим, что поскольку , , и & имеют специальное значение в
HTML, необходимо использовать вместо них символы ( & lt; , & gt; , и & amp;
, соответственно).

Цитаты

Используя BLOCKQUOTE , можно включить в текст отдельную цитату.
Большинство browsers отделяет такую цитату от окружающего текста. Например:

BLOCKQUOTE
Для того чтобы перейти в другой каталог на том же диске, можно нажать
комбинацию
клавиш [Alt-F10]. После этого на экране изображается дерево каталогов на
диске. Клавишами перемещения курсора следует выделить нужный катлог и
нажать
[Enter]. P
Можно также набрать первые буквы имени того каталога, в который надо
перейти.
Norton Commander постарается сам выделить нужный каталог. P
BLOCKQUOTE
Что дает на экране:
Для того чтобы перейти в другой каталог на том же диске, можно нажать
комбинацию клавиш [Alt-F10]. После этого на экране изображается дерево
каталогов на диске. Клавишами перемещения курсора следует выделить нужный
каталог и нажать [Enter].
Можно также набрать первые буквы имени того каталога, в который надо
перейти. Norton Commander постарается сам выделить нужный каталог.

Адреса

ADDRESS используется, чтобы определить автора документа и способы
контакта c ним (например, e-mail адрес). Обычно это последний пункт в
файле.
Например, последняя строка этого документа выглядит:
ADDRESS Введение в HTML НИИЯФ МГУ lenka@srdlan.npi.msu.suADDRESS
Что дает на экране:
Введение в HTML НИИЯФ МГУ lenka@srdlan.npi.msu.su
Внимание: ADDRESSНЕ используется для почтового адреса.

Стили

Можно описывать специальными стилями отдельные слова или предложения.
Имеются два типа стилей: логический и физический. Логические стили
определяют текст согласно заданному значению, в то время как физические
стили определяют некоторые участки текста.
Зачем существуют два стиля, если они могут дать одинаковый результат на
экране? В качестве ответа на этот вопрос сошлемся на аксиому: "Доверьтесь
вашему browser."
В идеале, в SGML, содержание отделяется от заглавия. Таким образом, SGML
определяет строку как заголовок, но не определяет, что заголовок должен
быть написан, например, жирным шрифтом с размером букв 24 пункта, и должен
быть расположен в верхней части страницы. Преимущество этого подхода (это
подобно в концепции стиля в большинстве текстовых процессоров) - в том, что
если Вы решаете заменить стиль заголовка - все, что Вы должны сделать - это
изменить определение заголовка в Web browser.
Другое преимущество стилей в том, что, например, удобнее определить что-
нибудь, как H1 чем помнить, каким шрифтом надо описывать заголовок. Это
же истинно и для отдельных символов. Например, рассмотрим STRONG .
Большинство browsers рассматривают это как жирный шрифт в тексте. Однако,
возможно, что читатель предпочел бы что этом разделе это выделялось,
например, другим цветом. Таким образом, стили дают пользователю большую
свободу в выборе шрифтов.

Логические стили

DFN
служит для описания определений. (Это определение.)
EM
служит для выделения слов. (Это выделенное слово.)
CITE
служит для выделения заголовков книг, фильмов, цитат и т.п. (Это цитата)
CODE
служит для выделения программных кодов, текстов программ и т.п.
Изображается шрифтом фиксированной ширины. (The stdio.h header file)
KBD
используется для ввода с клавиатуры пользователя. Может быть изображено
жирным шрифтом (но в большинстве browser изображается специальным шрифтом).
(Введите passwd)
SAMP
используется для машинных сообщений. Изображается шрифтом фиксированной
ширины. (Seg mentation fault: Core dumped.)
STRONG
служит для ОСОБОГО выделения слов. Обычно выделяется жирным шрифтом (Это
очень важно )
VAR
используется для символьных переменных. (Это переменная.)

Физические стили

Существуют физические способы выделения - автор задает стиль написания
текста, описывая шрифт в исходном HTML-документе.
Вы можете задать:
B, B
жирный шрифт (это жирный шрифт)
I, I
наклонный шрифт (это наклонный шрифт)
TT, TT
фиксированный шрифт (шрифт заданной ширины) (это fixed шрифт)

Специальные символы

Символы , , & и " имеют в HTML особое значение, как символы
форматирования. Но иногда нам необходимо использовать их в тексте по своему
прямому назначению. Для их введения в текст, мы должны использовать:
& lt;
- левая скобка
& gt;
- правая скобка
& amp;
- &
& quot;
- "
ЗАМЕЧАНИЕ: Специальные символы чувствительны к регистру: НЕЛЬЗЯ
использовать < вместо <.

Прерывание строки

Используя BR ... продолжение

Вы можете абсолютно на бесплатной основе полностью просмотреть эту работу через наше приложение.