рефераты конспекты курсовые дипломные лекции шпоры
- Раздел Программирование
- /
- Общие принципы проектирования HTML-документа
Реферат Курсовая Конспект
Общие принципы проектирования HTML-документа
Общие принципы проектирования HTML-документа - раздел Программирование, Общие Методические Указания....
Общие методические указания.
Одна из возможностей построения корпоративных информационно-управляющих систем – Intranet-системы, основывается на Internet-технологиях, и, в… Современные технологии Web-дизайна и проектирования Web-сайтов требуют высокой… - язык гипертекстовой разметки HTML;Общие принципы проектирования HTML-документа
Технология подготовки гипертекстового документа
Для подготовки Web-сайта необходимо выполнить следующие работы: - определить совокупность документов, предполагаемых к размещению в сети… - преобразовать тексты, предназначенные для размещения в неупакованном виде, в формат стандартного текстового файла…Проектирование HTML – документа
Синтаксис элемента имеет вид: элемент:= <имя элемента [список атрибутов]> содержание элемента </имя… Элементы разметки, называемые также операторами или тэгами (tag), имеют открывающую часть, ограничиваемую парой…Структура документов в формате HTML
В рекомендациях W3 первой строкой создаваемого документа указывается используемая спецификация языка HTML:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>
Здесь W3C – наименование организации, разработавшей стандарт. DTD HTML 4.01 – Document Type Definition, описание типа документа и версии языка разметки. Последние два символа указывают на используемый в документе язык (EN-English, RU-Russian). Использование оператора пролога <!DOCTYPE> не обязательно.
После информации о типе документа оставшаяся часть HTML-документа должна быть заключена в элемент <HTML>:
Структура HTML – документа
<HTML> <HEAD> <TITLE>Заголовок документа</TITLE>Основы языка разметки HTML
Рассмотрим язык разметки гипертекста — HTML (Hyper Text Markup Language). Формальное описание элементов языка позволяет рассмотреть возможности языка и примеры его использования. Элементы языка группируются по функциональному признаку, что позволят приводить достаточно конструктивные и убедительные примеры их использования.
Основой любой Web-страницы является ее содержание, поэтому представлению текста уделяется большое внимание.
Выравнивание параграфов текста
Форматирование заголовка. При форматировании текста существует возможность выделять заголовки. Это делается с использованием операторов <H#>… Оператор <H#> имеет один атрибут – align Наименование параметра Описание параметра align align = left-выравнивание…Нумерованные списки помещаются в контейнер <OL> . . .</OL>, ненумерованные — в <UL> . . . </UL>. Каждый элемент списка должна быть вложен в контейнер <LI> . . . </LI>.
Собственные атрибуты для всех элементов списка
| Наименование атрибута | Описание атрибута |
| compact | Указание: выводить компактно. Интерпретация — программой просмотра. Не рекомендуемый |
| type | Для <UL> и <LI> задает вид маркера. Не рекомендуемый. Возможные значения:
disk – кружок,
square – квадрат,
circle – окружность.
Для <OL> и <LI> принимает значения "1"| "a"| "A"| "i"| "I".
1 – арабские числа,
a – строчные латинские буквы,
A – прописные латинские буквы,
i – строчные римские цифры,
I – прописные римские цифры.
|
| start | Только для <OL>. Значение принимает целые числа, которые указывают, с какого номера начинать нумерацию. Если нумерация ведется буквами, то указывает порядковый номер буквы в алфавите. Например:<OL type="a" start="3"> . . . </OL> нумерация начнется с буквы c — третьей буквы латинского алфавита. Не рекомендуемый. |
| value | Только для <LI>. Отменяет предыдущий порядок нумерации и устанавливает новый. Например: <LI value=5> задает номер элемента, равный 5. Не рекомендуемый |
Элементы <OL>, <UL>, <LI> имеют, кроме приведенных, общие атрибуты и атрибуты для установки обработчиков событий.
Каждый элемент <OL> или <UL> допускает использование одного или нескольких элементов <LI>, содержимое которого может включать:
- блочные: заголовки <H1>, . . . <H6>, элементы: <P>, <DIV>, <DL>, <PRE>, <BLOCKQUOTE>, <FIELDSET>, <ADDRESS>, <HR>, <TABLE>, списки <UL>, <OL>, скрипты <SCRIPT>, <NOSCRIPT>;
- встроенные элементы:
- текст;
- элементы физического форматирования — <B>, <BIG>, <I>, <S>, <STRIKE>, <SMALL>, <TT>;
- элементы логического форматирования — <EM>, <STRONG>, <DFN>, <CODE>, <SAMP>, <KBD>, <VAR>, <CITE>, <ABBR>, <ACRONIM>;
- специального назначения — <A>, <IMG>, <MAP>, <APPLET>, <OBJECT>, <SCRIPT>, <SPAN>, <IFRAME>, <FONT>, <BASEFONT>, <BR>, <SUB>, <SUP>, <BDO>, <Q>;
- форм — <INPUT>, <SELECT>, <TEXTAREA>, <BUTTON>, <LABEL>.
Списки различных типов допускают вложенность.
Пример 2.2.Организация ненумерованных списков.
<HTML>
<HEAD>
<TITLE>Проектирование WEB- сайта</TITLE>
</HEAD>
<BODY >
<p><H2>Состав компьютера</H2></p>
<UL>
<LI>
<H3>Интерфейсы</H3>
<UL type=circle><LI><DIV><B>PCI</B>(Periphral Component Interconnect)-соединение внешних элементов</DIV>
<LI><B>USB</B>(Universal Serial Bus)-универсальная последовательная шина
<LI><B>AGP</B>(Accelerated Graphics Port)-ускоренный графический порт
<LI><B>SCSI</B>(Small Computer System Interface)-интерфейс малых компьютерных систем
</UL>
<LI>
<H3>Процессоры фирмы Intel</H3>
<UL type=disk><LI ><B>Pentium 4</B>(Интерфейс-Socket 423; Рабочие частоты-1400 МГц; Объм кэш-памяти 512 Кбайт)
<LI><B>Celeron</B>
<LI><B>Xeon</B>
<LI><B>Itanium</B>
</UL>
<LI>
<H3>Процессоры фирмы AMD</H3>
<UL type=square>
<LI><B>K6-III</B>
<LI><B>Athlon</B>
<LI><B>Duron</B>
</UL>
</UL>
</BODY>
</HTML>
Результат просмотра этого примера имеет вид (рис.2.2):
Рис. 2.2. Просмотр примера «Ненумерованные списки»
Пример 2.3.Нумерованные списки (вариант 1).
<HTML><HEAD>
<TITLE>Проектирование WEB-сайта</TITLE>
</HEAD>
<BODY >
<p><H2>Состав компьютера</H2></p>
<OL> <LI>
<H3>Интерфейсы</H3>
<OL> <LI><DIV><B>PCI </B>(Periphral Component Interconnect)-соединение внешних элементов</DIV>
<LI><B>USB</B>(Universal Serial Bus)-универсальная последовательная шина
<LI><B>AGP</B>(Accelerated Graphics Port)-ускоренный графический порт
<LI><B>SCSI</B>(Small Computer System Interface)-интерфейс малых компьютерных систем
</OL>
<LI>
<H3>Процессоры фирмы Intel</H3>
<OL>
<LI><B>Pentium 4</B>(Интерфейс-Socket 423; Рабочие частоты-1400 МГц; Объм кэш-памяти 512 Кбайт)
<LI><B>Celeron</B>
<LI><B>Xeon</B>
<LI><B>Itanium</B>
</OL>
<LI><H3>Процессоры фирмы AMD</H3>
<OL>
<LI><B>K6-III</B>
<LI><B>Athlon</B>
<LI><B>Duron</B>
</OL>
</OL>
</BODY></HTML>
Результат просмотра примера имеет вид (рис. 2.3).
Рис. 2.3. Просмотр примера “Нумерованные списки” (вариант 1)
Пример 2.4. Нумерованные списки (вариант 2)
<!doctype html public "-//w3c//dtd html 4.01//en">
<HTML>
<HEAD>
<TITLE>Проектирование WEB- сайта</TITLE>
</HEAD>
<BODY >
<p><H2>Состав компьютера</H2></p>
<OL> <LI><H3>Интерфейсы</H3>
<OL type=a>
<LI>
<DIV>
<B>PCI</B>(Periphral Component Interconnect)-соединение внешних элементов</DIV>
<LI>
<B>USB</B>(Universal Serial Bus)-универсальная последовательная шина
<LI>
<B>AGP</B>(Accelerated Graphics Port)-ускоренный графический порт
<LI><B>SCSI</B>(Small Computer System Interface)-интерфейс малых компьютерных систем
</OL>
<LI>
<H3>Процессоры фирмы Intel</H3>
<OL type=i>
<LI><B>Pentium 4</B>(Интерфейс-Socket 423; рабочие частоты 1400 МГц; объм кэш-памяти 512 Кбайт)
<LI><B>Celeron</B>
<LI><B>Xeon</B>
<LI><B>Itanium</B>
</OL>
<LI>
<H3>Процессоры фирмы AMD</H3>
<OL type=I>
<LI><B>K6-III</B>
<LI><B>Athlon</B>
<LI><B>Duron</B>
</OL>
</OL>
</BODY>
</HTML>
Результаты просмотра примера (рис.2.4):
Рис 2.4. Просмотр примера “Нумерованные списки” (вариант 2).
Списки-определения. В списках-определения задается слово-термин и описание этого термина. Слово-термин по умолчанию выделяется полужирным шрифтом и выравнивается по правому краю. Описание термина выводится с отступом вправо. Весь список вкладывается в контейнер <DL>… </DL>. Формирование списка определений выполняется с помощью операторов: <DL>, <DT> и <DD>.
Синтаксис:
Весь список заключается в контейнер <DL>списки определения</DL>.
Слово-термин включается в контейнер <DT>термин</DT>.
Описание термина располагается в контейнере <DD>описание</DD>.
Пример 2.5. Списки-определения. <HTML> <HEAD>Форматирование шрифта
В языке разметки HTML определены операторы физического и логического форматирования символов. Операторы физического форматирования явным образом определяют внешний вид… Операторы логического форматирования указывают на семантическое (смысловое) значение оформляемого текста. Шрифтовое…Цвет в HTML – документах
Обозначение цвета. Цвет отдельных элементов HTML-документа задается соответствующими атрибутами (параметрами) этих элементов в системе RGB (red,… Символическое название Цвет Численное значение …Изменение цвета фона документа HTML. По умолчанию программы просмотра отображают фон документов HTML серым цветом. С помощью параметра BGCOLOR оператора <BODY> можно изменять цвет фона документа. Например, <BODY bgcolor="#C0C0C0"> или <BODY bgcolor="#Silver">. И в том, и в другом случае будет задан серебряный фон документа.
Точно также в качестве фона документа может быть выбрано изображение. В этом случае применяется параметр background оператора <BODY>. Например, <BODY background="Bk_paper1.jpg">.
Изменение цвета текста документа HTML. Цвет текста HTML – документа может быть задан параметром COLOR в операторе <BASEFONT>, задающем параметры базового шрифта. Например, <p> <basefont color=red>. Изменение цвета текста в HTML – документе, относительно базового цвета задается параметром COLOR оператор <FONT>. Например, <p> <font size=+2 color=Lime>. Различные способы задания цвета текста рассматривается в примере 2.8.
Графика в HTML-документах
GIF (Graphics Interchange Format) – формат (быстрого) обмена изображениями. Используется для графики с “небольшим” количеством цветов. Этот формат… JPEG (Joint Photographic Experts Group) – используется для отображений… PNG (Portable Network Graphics) – альтернатива GIF и два формата векторной графики – технологии Shockwave и Flash…Сегментированная графика. Элементы <MAP> и <AREA>.
Графическая карта может быть создана в любом графическом редакторе, который позволяет сохранять изображения в формате GIF, JPG (JPEG) или PNG.… - выбирается или рисуется изображение, которое сохраняется в виде файла с… - используя элемент выделения области графического редактора, выделяются чувствительные области изображения и…Ссылки в HTML-документах
Ссылки в HTML-документе позволяют организовать контекстные связи между отдельными частями одного документа (внутренние ссылки), или различными документами, расположенными в сетевом пространстве Internet (внешние ссылки). Для организации ссылок необходимо иметь два адреса:
- адрес точки (метки), на которую указывает ссылка;
- адрес точки, из которой выполняется ссылка.
Для организации ссылок используются элементы: <A> (от anchor-якорь), <LINK> (звено) и <BASE>. В качестве указателя ссылки может использоваться любой элемент гипертекста, включая изображение.
Элемент <A> является элементом уровня текста и представляется контейнером вида:
<A atribute_1="value 1" atribute_2="value 2"> . . . </A>Закрывающий оператор обязателен. Элементы <A> не допускают вложенности.
Собственные атрибуты элемента <A>
| Наименование атрибута | Описание атрибута |
| href | От HyperREFerence — гиперссылка. Href=“URI”, то есть href соответствует адресу вызываемого ресурса. URI всегда заключается в кавычки, так как может содержать служебные символы (двоеточия и слеши). |
| target | target=“имя окна”. Параметр задает имя окна, в которое будет загружаться документ. Можно указывать значения: _blank – документ загружается в новое окно; _parent – документ загружается в родительское окно по отношению к текущему; _self-документ загружается в окно, где располагается ссылка; _top-документ загружается во все окно броузера. |
| hrefland | Указывает язык документа, к которому ведет ссылка. |
| type | Указывает MIME – тип документа. |
| charset | |
| rel | Эти параметры не целесообразно рассматривать на начальном этапе освоения Web-технологии. |
| rev | |
| shape | |
| coords | |
| tabindex | |
| accesskey |
При работе со ссылками необходимо учитывать, что можно задавать цвета ссылки, находящейся в различных состояниях. Для этой цели используются параметры оператора <BODY>:
- link — исходный цвет гиперссылки;
- alink — цвет активных гиперссылок, то есть гиперссылок на которых установлен курсор мыши;
- vlink — цвет посещенных гиперссылок.
Замечание. Параметры link, alink и vlink являются параметрами оператора <BODY>. Их не следует путать с оператором <LINK>, который рассматривается далее.
Элементы <LINK> располагаются в разделе <HEAD> и используются для организации ссылок. Контекст ссылки зависит от параметров элемента.
Синтаксис элемента: одиночный тэг.
Элемент <LINK> имеет большое число параметров, которые носят специфический характер и не могут рассматриваться на начальном этапе освоения Web-технологии. Здесь приводятся только основные параметры оператора <LINK>.
Параметры оператора <LINK>
| Наименование атрибута | Описание атрибута |
| href | Задает адрес (URI) документа (ресурса). |
| type | Указывает MIME – тип другого документа. |
| rel | Определяет соотношение между текущим и загружаемым документами. Принимает значения: appendix – приложение; bookmark – закладка; copyright – информация об авторских правах; chapter – глава; glossary – словарь; help – файл помощи; home – начальная страница; index – указатель; next – следующая страница; previous – предыдущая страница. |
| rev | Указывает, как загружаемый документ соотносится с текущим (отношение обратное rel). Принимает значения author, editor, publisher, owner. |
Элемент <LINK> используется для организации загрузки стилей (<LINK rel="stylesheet" type="text/css" href="default.css">),сохранения связей между страницами документа и, следовательно, для сохранения работоспособности ссылок в документе (<LINK title="First_page" rel="index" href="homepage.html">), а также для взаимодействия с поисковыми машинами.
Элемент <BASE> размещается в разделе<HEAD> до любых ссылок в документе на внешние источники.
Синтаксис элемента <BASE>: одиночный тэг.
Атрибуты элемента <BASE>
| Наименование атрибута | Описание атрибута |
| href | Задает базовый адрес ресурса (URI). |
| target | Определяет имя окна или фрейма, по которому будут загружаться файлы, на которые есть ссылки в документе. Может принимать значения _blank, _top, _parent, _self. |
Элемент <BASE> позволяет задать базовый адрес для всех ссылок, формируемых в HTML-документе. Задание базового адреса дает возможность использовать в документе относительные адреса для любых типов ссылок.
Использование элементов <LINK> и <BASE> требует хорошей подготовки в Web-технологиях.
Использование элемента <A>. Особенности использования элемента <A> для организации ссылок показано в примере 2.11.
Пример 2.11. Организация внутренних ссылок.
<HTML>
<HEAD><TITLE>Ссылки в HTML-документе </TITLE></HEAD>
<BODY background=Bk_paper1.jpg LINK="darkgreen" VLINK="red" ALINK= "lime">
<p><A href="#L1">Выравнивание текста</A>
<p><A href="#L2">Форматирование шрифта</A>
<A Name=str1><H2><center>Изучение языка разметки гипертекста HTML </H2></A>
<p><A HREF=D:\УчебнПособия\Фрейм\first.htm#L3> Первое занятие</A>
<p><H3><center><A name=L1>Выравнивание текста</A></center></H3></p>
<p ALIGN=right>Выравнивание<A HREF="RRR.htm" TARGET="prim1"> по правой </A>границе</p>
<P align=left>Выравнивание по левой границе<p><A Name=L4>
Графическая ссылка <A HREF="D:\УчебнПособия\Фрейм\4321Kurochkin\ Leti_tm2.gif"> <IMG WIDTH=80 HEIGHT=20 SRC="D:\УчебнПособия\ Фрейм\Nigl_HTTP\ Images\Cdrom.gif" BORDER=0> </IMG></A> по тексту</p>
<p ALIGN=right>Выравнивание по правой границе</p>
<p align=left>Выравнивание</p><p><br clear=right> по левой границе</br></p>
<P align=center>Центрирование<A HREF="DDD.htm#str1">Ссылка1</A> первым способом
<P><center>Центрирование вторым способом</center></p>
<p><div align=center>Центрирование третьим способом</div>
<p><H3><center><A name=L2>Форматирование шрифта</A> </center></H3>
<p><big> Изучение языка разметки гипертекста HTML</big>
<p><small> Изучение языка разметки гипертекста HTML </small></p>
<p><basefont size=5><font color=red >ШРИФТ=5 </font></p>
<MAP name="olga">
<AREA SHAPE="RECT" COORDS=30,21,65,72" HREF=first.htm>
<AREA SHAPE="RECT" COORDS=28,109,59,139" HREF=rrr.htm>
<AREA SHAPE="RECT" COORDS=122,15,186,65" HREF=prim1.htm>
</MAP>
<img src="OLGA.gif" usemap="#OLGA"></img>
<p align=left><font size=+2> Образец</font>
<p><font size=+2><br clear = right> шрифта = 7</font></p>
<p><font size=-4 color=silver>Размер шрифта=1</font></p>
<p><font size=-3>Размер шрифта=2</p>
<p><font size=+1>Выделение текста <B>жирным </B>шрифтом</font></p>
<p><font size=+2>Выделение шрифтом<TT>с фиксированной шириной </TT>букв</font></p>
<p><blink>МИГАЮЩИЕ СИМВОЛЫ</blink></basefont></p>
<p>H<sub>2</sub>O-это вода<sup>*</sup></p>
</BODY> </HTML>
Результат просмотра примера 2.11 (рис.2.11).
Рис.2.11. Просмотр примера 2.11.
Локальные ссылки внутри документа. Выражение <BODY background=Bk_paper1.jpg LINK="darkgreen" VLINK="red" ALINK="lime"> определяет фон документа и цвета ссылок.
Строки <p><A href="#L1">Выравнивание текста</A> и <p><A href="#L2"> Форматирование шрифта</A> описывают внутренние ссылки документа Пример 2.11. Адреса переходов href="#L1" и href="#L2" показывают, что при выполнении ссылки будет выполняться переход к меткам L1 и L2 соответственно. Метки L1 и L2 задаются операторами <p><H3><center><A name=L1>Выравнивание текста</A></center></H3></p> и <p><H3> <center><A name=L2> Форматирование шрифта</A></center></H3></p> соответственно. Переход, при выполнении указанных ссылок будет выполняться на параграфы “Выравнивание текста” и “Форматирование шрифта”.
Аналогично рассмотренному реализуется Ссылка1 — <P align=center> Центрирование<A HREF="DDD.htm#str1">Ссылка1</A> первым способом. В отличие от предыдущих ссылок здесь в адресе HREF="DDD.htm#str1" указывается имя документа DDD.htm и метка, на которую выполняется переход при выполнении ссылки — #str1. Расположение метки str1 задается в операторах <A Name=str1><H2><center>Изучение языка разметки гипертекста HTML</H2></A>.
Ссылки на другие документы. Ссылка на метку L3 документа, располагающегося по адресу HREF=D:\УчебнПособия\Фрейм\first.htm#L3, выполняется операторами <p><A HREF=D:\УчебнПособия\Фрейм\first.htm#L3> Первое занятие</A>.
Здесь переход выполняется к файлу, который расположен на том же самом компьютере, что и исходный документ, и путь к которому прописан полностью.
Использование графики в ссылках. Графические изображения могут использоваться в ссылках либо как чувствительная область, заключенная в операторы <A> и </A>, либо как графическое сегментированное изображение (image maps).
Использование графического изображения в качестве чувствительной области иллюстрируется в примере 2.8. Использование графической карты рассматривалось в предыдущем разделе “Графика в HTML-документах.
Рассмотрим фрагмент разметки гипертекста, приведенный в примере 2.8 — <p> Графическая ссылка
<A HREF="D:\УчебнПособия\Фрейм\4321 Kurochkin\Leti_tm2.gif"> <IMG WIDTH=80 HEIGHT=20 SRC="D:\УчебнПособия\Фрейм\Nigl_HTTP\ Images \Cdrom.gif" BORDER=0></A>по тексту</p>.
Изображение, используемое как чувствительная область, располагается в файле по адресу
D:\УчебнПособия\Фрейм\ Nigl_HTTP\Images\Cdrom.gif"
и отображается в виде элемента встроенного в текст. Параметры изображения определяются атрибутами оператора IMG.
При выполнении ссылки (щелчок левой клавишей мыши на графическом изображении) будет осуществляться переход по адресу:
HREF="D:\УчебнПособия\Фрейм\4321 Kurochkin\Leti_tm2.gif".
Замечание. Графическое изображение в ссылках ограничивается операторами <A> и </A> и определяется оператором <IMG>.
[1] КОМПЬЮТЕРНЫЕ СЕТИ И СИСТЕМЫ: Методические указания по изучению раздела “Навигация в Интернете”/Академия ГА. С-Пб., 2002.
[2] Терминология спецификации стандарта языка HTML 4.01.
[3] Не рекомендуемый. Стандарт языка HTML 4.0 и последующие версии не рекомендуют или запрещают использовать некоторые операторы языка. Более того, стандарт рекомендует переходить на новую технологию проектирования Web-сайтов с использованием стилей.
– Конец работы –
Используемые теги: общие, нципы, проектирования, HTML-документа0.076
Если Вам нужно дополнительный материал на эту тему, или Вы не нашли то, что искали, рекомендуем воспользоваться поиском по нашей базе работ: Общие принципы проектирования HTML-документа
Что будем делать с полученным материалом:
Если этот материал оказался полезным для Вас, Вы можете сохранить его на свою страничку в социальных сетях:
| Твитнуть |
Хотите получать на электронную почту самые свежие новости?
Подпишитесь на Нашу рассылку
Реклама
Информация в виде рефератов, конспектов, лекций, курсовых и дипломных работ имеют своего автора, которому принадлежат права. Поэтому, прежде чем использовать какую либо информацию с этого сайта, убедитесь, что этим Вы не нарушаете чье либо право.
© copyright 1999 - 2024 allRefs.net. Все права защищены. Страница сгенерирована за: 0.145 сек.
Новости и инфо для студентов