Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ Написать работу

Язык гипертекстовой разметки HTML (hypertext Markup Language) – декларативный язык, используемый для публикации и обмена документами в internet.

↑

Стр 1 из 2Следующая ⇒

План

1. Язык гипертекстовой разметки HTML

2. Каскадные таблицы стилей CSS

3. Язык XML

Язык гипертекстовой разметки HTML (Hypertext Markup Language) – декларативный язык, используемый для публикации и обмена документами в Internet.

Язык гипертекстовой разметки HTML

Разработку языка HTML в 1989 году начал Тим Бернерс Ли, сотрудник Европейского центра ядерных исследований (CERN).

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

Благодаря своей простоте, язык HTML вскоре завоевал мировую популярность и стал основным средством для публикации документов в Internet.

С начала 1990-х гг. различные производители программного обеспечения использовали многочисленные диалекты HTML.

Для стандартизации HTML была создана организация World Wide Web Consortium (W3C), которая разработала несколько спецификаций.

В настоящий момент действует спецификация HTML 4.01, утвержденная в 1999 году, и ведется разработка спецификации HTML 5.

Организация Web-ориентированной системы

Web-ориентированная информационная система предполагает наличие двух типов приложений:

Клиентское приложение (Web-браузер)
осуществляет интерпретацию конструкций языка, связанных с представлением информации

Серверное приложение (Web-сервер)
предоставляет доступ к документам, обрабатывает запросы пользователя, обеспечивает предварительную обработку и/или генерацию документов.

Основные понятия языка HTML

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

элемент
фрагмент HTML-документа, на который распространяется действие тэга

атрибут
параметр, уточняющий тэг

Каждый тэг записывается в угловых скобках "<", ">".

Различают открывающие тэги (обозначают начало элемента) и закрывающие тэги (обозначают конец элемента).

Текст закрывающего тэга начинается со знака слэш "/"

Пример.

<P>
открывающий тэг (начало абзаца)

</P>
закрывающий тэг (конец абзаца)

Элемент состоит из
– открывающего тэга, содержащего имя элемента;
– содержимого элемента;
– закрывающего тэга, содержащего имя элемента

Браузеры по-разному отображают содержимое элементов, в зависимости от их имен

Пример.

<H1>Заголовок текста</H1>

<P>Первый абзац текста</P>

В документах могут использоваться пустые элементы, в которых отсутствует содержимое, а также элементы, которые состоят только из открывающего тэга – одиночные тэги

Пример.

<DIV></DIV>
пустой элемент

<HR>
одиночный тэг

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

Пример.

<P>Абзац с <U>подчеркнутым текстом</U></P>
правильно

<P>Абзац с <U>подчеркнутым текстом</P></U>
неправильно

Атрибуты представляют собой пару вида

имя="значение"

и записываются в открывающих тэгах через пробел после имени тэга

Пример.

<IMG src="MyPhoto.jpeg" height="100" width="75">
атрибуты задают имя картинки, её высоту и ширину

Структура HTML-документа

<!–- пролог HTML-документа -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

<!–- заголовок HTML-документа -->

</HEAD>

<BODY>

<!–- основное содержимое HTML-документа -->

</BODY>

</HTML>

В прологе HTML-документа указывается версия языка HTML, использованная при оформлении документа

HTML-документ состоит из двух частей – заголовка и основного содержимого, – размещенных внутри элемента HTML.

В заголовке HTML-документа (элемент HEAD) указывается служебная информация, используемая при обработке документа, например:

<TITLE>Пример HTML-документа</TITLE>
название документа

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">
кодировочная таблица

<META name="Author" content="Иванов И.И.">
информация для поисковых систем

Основное содержимое HTML-документа размещается внутри элемента BODY.

Все содержимое должно быть разбито на блоки.

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

В любом месте HTML-документа могут встречаться комментарии, которые ограничиваются последовательностями символов “”.

<P>Это обыкновенный текст</P>

Содержимое комментариев игнорируется браузером и на экране не отображается.

Элементы, описывающие логическую структуру HTML-документа

Абзацы:

P – обыкновенный абзац

H1 – абзац-заголовок 1-го уровня

...

H6 – абзац-заголовок 6-го уровня

Пример.

<H1>Язык HTML</H1>

<H2>§1. Структура HTML-документа</H2>

<P>Внешне HTML-документ является обыкновенным текстовым документом.</P>

Язык HTML позволяет описывать три вида списков:

– ненумерованные (маркированные) списки
(элементы UL, LI);

– нумерованные (упорядоченные) списки
(элементы OL, LI);

– списки определений (элементы DL, DT, DD).

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

<UL>

<LI>ненумерованные списки (элементы UL, LI);</LI>

<LI>нумерованные списки (элементы OL, LI);</LI>

<LI>списки определений (элементы DL, DT, DD).</LI>

</UL>

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

<OL>

<LI>ненумерованные списки (элементы UL, LI);</LI>

<LI>нумерованные списки (элементы OL, LI);</LI>

<LI>списки определений (элементы DL, DT, DD).</LI>

</OL>

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

<DL>

<DT>тэг</DT>

<DD>метка, используемая для описания логического или физического форматирования HTML-документа.</DD>

<DT>элемент</DT>

<DD>фрагмент HTML-документа, на который распространяется действие тэга</DD>

<DT>атрибут</DT>

<DD>параметр, уточняющий тэг</DD>

</DL>

Для описания структуры таблиц используются элементы:

TABLE
описывает всю таблицу;

TR
описывает одну строку таблицы;

TD
описывает одну ячейку таблицы;

TH
описывает одну ячейку с заголовком таблицы;

Пример. Простая таблица

<TABLE>

<TR>

<TH>Столбец 1</TH>

<TH>Столбец 2</TH>

</TR>

<TR>

<TD>Первая строка, столбец 1</TD>

<TD>Первая строка, столбец 2</TD>

</TR>

<TR>

<TD>Вторая строка, столбец 1</TD>

<TD>Вторая строка, столбец 2</TD>

</TR>

</TABLE>

Гипертекстовая ссылка
часть электронного документа, ссылающаяся на другой элемент в текущем документе, на другой документ или на его фрагмент

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

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

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

Для создания гиперссылки используется элемент A с атрибутом href:

<A href="URL документа">содержимое ссылки</A>

Конкретное место гипертекстового документа, к которому должен осуществляться переход, должно помечаться с помощью "закладки":

<A name="имя закладки"></A>

В гипертекстовых ссылках требуется указывать адрес документа (фрагмента документа) с помощью URL (Uniform Resource Locator, универсальный указатель ресурсов).

Основные компоненты URL:

http://program.vsu/news/index.php#01.09.2009

протокол

имя сервера

каталог

имя документа

имя закладки

Некоторые компоненты в URL ссылки могут отсутствовать. В этом случае их значение определяется на основании URL текущего документа, например:

href="#begin"
ссылка на закладку "begin" в текущем документе

href="file.html"
ссылка на документ в текущем каталоге

href="../file.html"
ссылка на документ в родительском каталоге

href="http://program.vsu"
ссылка на "корневой" документ сервера

Примеры.

1. Ссылка на другой документ в текущем каталоге

<P>Просмотрите <A href="example2.html">
другой пример</A></P>

2. Ссылка на другой сервер

<P>Зайдите на <A href="http://program.vsu">
сайт кафедры ПМиМ</A></P>

3. Графическая ссылка

4. Cсылка на закладку

<P><A href="#begin">в начало</A></P>

DIV – элемент уровня блока

<DIV class="ramochka">

<P> Несколько </P>

<P> абзацев </P>

<P> в рамочке </P>

</DIV>

Свойства шрифта

color
цвет текста

font-family
гарнитура шрифта (например,
serif, sans - serif, Arial или “ Times New Roman ”)

font-size
размер шрифта

font-style
начертание шрифта (normal или italic)

font-weight
жирность шрифта (normal или bold)

text-decoration
подчеркивание текста (none, underline,
line-through или overline)

Свойства абзаца

text-align
выравнивание строк в абзаце (left, right, center или justify)

text-indent
величина отступа первой строки абзаца

margin-left
отступ слева от абзаца

margin-right
отступ справа от абзаца

margin-top
интервал перед абзацем

margin-bottom
интервал после абзаца

line-height
межстрочный интервал

При указании числовых значений свойств (размер шрифта, отступы, межстрочный интервал) обязательно следует указывать, в каких единицах они заданы:

% – проценты
px – пиксели
pt – пункты
mm – миллиметры
cm – сантиметры
и т.д.

Единица измерения записывается после числа без пробела: 100px, 14pt, 50%

Границы блока

border-color
цвет границы

border-width
толщина границы

border-style
тип границы:
solid – сплошная,
double – двойная,
dotted – пунктирная,
dashed – штриховая,
groove – вдавленная,
ridge – выпуклая,
inset – весь блок выглядит вдавленным,
outset – весь блок выглядит выпуклым.

Фон

background-color
цвет фона

background-image
фоновое изображение

background-repeat
режим повторения фонового изображения
(repeat, repeat-x, repeat-y или no-repeat)

background-position
начальная позиция фонового изображения, указывается смещение по вертикали и по горизонтали, например:
top left – верхний левый угол
50% 50% – по центру блока

Пример.

BODY {

background-color: #AAFFAA;

background-image: url(spring.jpg);

background-repeat: repeat-y;

margin-left: 60px;

}

<BODY>

<H2>Стихи</H2>

</BODY>

Язык XML

XML (eXtensible Markup Language)
декларативный язык разметки, предназначенный для описания структурированных данных.

XML является подмножеством языка SGML (Standard Generalized Markup Language).

XML был разработан World Wide Web Consortium (W3C) в 1996 году для представления и передачи данных в Интернет.

При разработке языка XML преследовались цели:

– XML-документы должны быть удобны для чтения и достаточно понятны.

– Подготовка XML-документа должна осуществляться быстро на основе простой, формальной и точной процедуры.

– Программы-обработчики XML-документов должны быть просты в написании.

Преимущества языка XML

1. Позволяет легко структурировать данные

Обычный текстовый документ

Иванов Иван Иванович 1234

Петров Петр Петрович 9876

Сидоров Сидор Сидорович 5555

XML-документ

<group>

<lastname>Иванов</lastname>

<middlename>Иванович</middlename>

</student>

...

2. Позволяет создавать документы любой структуры и гарантирует её однозначность.

3. Независим от программно-аппаратной платформы и позволяет обмениваться информацией несовместимым между собой системам.

4. XML-документы могут создаваться "вручную" и программно.

5. Поддержка XML реализована во всех современных технологиях разработки: C++, C#, Java, JavaScript,
PHP, Object Pascal и т.д.

Недостатки языка XML

• избыточность текстового представления информации

• более сложная обработка, по сравнению с двоичными файлами

• отсутствие встроенной поддержки типов данных

• трудность представления не иерархических типов данных

Состав XML-документа

• Пролог

• Инструкции по обработке

• Комментарии

• Элементы

• Атрибуты

Пролог (декларация) XML-документа включает в себя информацию относящуюся ко всему документу: кодировку, описание структуры документа и т.п.

В прологе XML-документа обязательно должна быть указана используемая версия языка XML и его тип:

<?xml version="1.0" encoding="windows-1251"?>

<!DOCTYPE example SYSTEM "example.dtd">

Инструкции по обработке XML-документа содержат указание по обработке документа и ограничиваются знаками <? и ?>.

Комментарии должны ограничиваться знаками .

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

Элементы должны быть правильно вложены друг в друга.

<group>

<student>

<lastname>Иванов</lastname>

<firstname>Иван</firstname>

<middlename>Иванович</middlename>

<studentcard>1234</studentcard>

</student>

</group>

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

<group count="18">

</group>

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

<ellipse cx="144.166" cy="180.166" rx="44" ry="53.833"/>

XML-документ должен содержать единственный корневой элемент, имя которого указывается в прологе (внутри DOCTYPE):

<?xml version="1.0"?>

<!DOCTYPE svg... >

<svg...>

...

</svg>

Внутри элементов могут быть использованы почти все текстовые символы, за исключением специальных:

< <

> >

& &

' '

" "

XML-документ, соответствующий формальным правилам, называется well-formed (правильно оформленный).

Для контроля структуры XML-документа используются специальные описания.

Наиболее распространены описания в формате DTD (Document Type Definitions).

Пример. Фрагмент DTD-описания языка HTML.

<!ELEMENT TABLE - -

(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>

<!ELEMENT CAPTION - - (%inline;)* -- table caption -->

<!ELEMENT THEAD - O (TR)+ -- table header -->

<!ELEMENT TFOOT - O (TR)+ -- table footer -->

<!ELEMENT TBODY O O (TR)+ -- table body -->

<!ELEMENT COLGROUP - O (COL)* -- table column group -->

<!ELEMENT COL - O EMPTY -- table column -->

<!ELEMENT TR - O (TH|TD)+ -- table row -->

<!ELEMENT (TH|TD) - O (%flow;)* -- table header cell, table data cell-->

DTD-описание может располагаться в трех местах:

• Внутри XML-документа:
<!DOCTYPE root [... ]>

• В локальном файле:
<!DOCTYPE root SYSTEM "File.dtd">

• В общедоступном Интернет-файле:
<!DOCTYPE root
PUBLIC "идентификатор" "адрес">

Общий вид описания элемента:

<!ELEMENT ИмяЭлемента (содержимое)>

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

пусто 1

? 0.. 1
* 0.. ¥
+ 1.. ¥

Пример.

<!ELEMENT group (student*)>

<!ELEMENT student (lastname,firstname,middlename,studentcard)>

Вместо содержимого элемента могут быть указаны

#CDATA
содержимое элемента воспринимается только как текст и дополнительно никак не анализируется

#PCDATA
текстовое содержимое элемента может содержать данные, нуждающиеся в дополнительном анализе

EMPTY
элемент пустой (содержимое отсутствует)

ANY
элемент может содержать что угодно

Пример.

<!ELEMENT lastname (#PCDATA)>

<!ELEMENT firsname (#PCDATA)>

<!ELEMENT middlename (#PCDATA)>

<!ELEMENT studentcard (#PCDATA)>

Общий вид описания атрибутов элемента:

<!ATTLIST ИмяЭлемента
ИмяАтрибута тип опция
... >

Пример.

<!ELEMENT IMG EMPTY -- Embedded image -->

<!ATTLIST IMG

%attrs; -- %coreattrs, %i18n, %events --

src %URI; #REQUIRED -- URI of image to embed --

alt %Text; #REQUIRED -- short description --

longdesc %URI; #IMPLIED -- link to long description

(complements alt) --

Пример 1.

Описание атрибута

<!ATTLIST group

Count CDATA #IMPLIED

Использование атрибута

<group> или <group count="18">

 

</group> </group>

Пример 2.

Описание атрибута

<!ATTLIST student

sex (male|female) #REQUIRED

Использование атрибута

<student sex="male"> или <student sex="female">

 

</student> </student>

Внутри DTD-описания также могут быть заданы значения для сущностей (подстановок), которые могут использоваться внутри DTD-описания:

<!ENTITY % Имя "значение">

или внутри XML-документа:

<!ENTITY Имя "значение">

Пример 1.

Описание сущности

<!ENTITY % user "lastname,firstname,middlename">

Использование сущности

<!ELEMENT student (%user;,studentcard)>

<!ELEMENT teacher (%user;,discipline)>

Пример 2.

Описание сущности

<!ENTITY University
"Витебский государственный университет">

Использование сущности

<organization>&University;</organization>

Анализ XML-файлов

Для ввода информации из XML-файлов используются специальные XML-анализаторы.

Существует несколько видов XML-анализаторов, которые отличаются принципами своей работы:
– событийно-управляемые (SAX-анализаторы);
– древовидные (DOM-анализаторы);
– потоковые (StAX-анализаторы).

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

Для создания XML-документов можно использовать класс XMLStreamWriter.

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

If (student.getSex())

xmlStreamWriter.writeAttribute("sex","male");

else xmlStreamWriter.writeAttribute("sex","female");

xmlStreamWriter.writeStartElement("lastName");

xmlStreamWriter.writeCharacters(student.getLastName());

xmlStreamWriter.writeEndElement();

//...

xmlStreamWriter.writeEndElement(); // для "student"

}

xmlStreamWriter.writeEndElement(); // для "group"

План

1. Язык гипертекстовой разметки HTML

2. Каскадные таблицы стилей CSS

3. Язык XML

12 Следующая ⇒

Познавательные статьи:

Организация работы процедурного кабинета

Статус республик в составе РФ

Понятие финансов, их функции и особенности

Сущность демографической политии

Последнее изменение этой страницы: 2016-08-01; просмотров: 326; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 216.73.217.128 (0.009 с.)