Logo Море(!) аналитической информации!
IT-консалтинг Software Engineering Программирование СУБД Безопасность Internet Сети Операционные системы Hardware
Конференция «Технологии управления данными 2018»
СУБД, платформы, инструменты, реальные проекты.
29 ноября 2018 г.

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

Задачи разработки HTML:

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

Способ представления документа - текстовый файл:

  • такой файл можно создать в любом текстовом редакторе на любой аппаратной платформе в среде любой операционной системы
  • к моменту разработки HTML существовал американский стандарт для разработки сетевых информационных систем - Z39.50, в котором в качестве единицы хранения указывался простой текстовый файл в кодировке LATIN1, что соответствует US ASCII

Версии языка:

  • HTML 1.0 - была направлена на представление языка как такового, где описание его возможностей носило скорее рекомендательный характер
  • HTML 2.0 - фиксировала практику использования конструкций языка
  • HTML++ - новые возможности
  • HTML 3.0 - призвана упорядочить все нововведения и согласовать их с существующей практикой

Таговая модель документа:

"элемент" := <"имя элемента" "список атрибутов"> содержание элемента
</"имя элемента">

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

Элемент HTML или гипертекстовый документ
состоит из двух частей:

  • заголовка документа (HEAD)
  • тела документа (BODY)

   <HTML>

   <HEAD>

   Содержание заголовка

   </HEAD>

   <BODY>

   Содержание тела документа

   </BODY>

   </HTML>

Элементы заголовка

<TITLE> поля документа
<BASE> базовый адрес
<ISINDEX> поисковый документ
<LINK> общая гипертекстовая ссылка
<META>

Примеры элементов заголовка:


<TITLE> Название документа </TITLE>
<BASE HREF="http://polyn.net.kiae.su/>, <A HREF="/altai/index.html"> <A HREF="http://polyn.net.kiae.su/altai/index.html"> <img SRC="/gif/test.gif"> <img SRC="http://polyn.net.kiae.su/gif/test.gif"> <ISINDEX HREF="http://polyn.net.kiae.su/cgi-bin/search" PROMPT="Enter Keywords:"> <LINK REL=Help HREF="http://polyn.net.kiae.su/dss/syshelp.html"> <LINK REL=Banner HREF=banner.html>
<META HTTP-EQUIV="Keywords" CONTENT="Plsma, Nuclear Physics"> Keywords: Plasma, Nuclear Physics

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

Тело документа состоит из:

  • Иерархических контейнеров и заставок
  • Заглавий (от H1 до H6)
  • Блоков (параграфы, списки, формы, таблицы, картинки и т. п.)
  • Горизонтальных отчеркиваний и адресов
  • Текста, разбитого на области действия стилей (подчеркивание, выделение, курсив), математические описания, графику и гипертекстовые ссылки

Элементы стиля

ЭлементЗначениеПримечание
<I>.....</I>Курсив(Italic) 
<B>...</B>Усиление(BOLD) 
<TT>...</TT>Телетайп 
<U>...</U>Подчеркивание  
<S>...</S> Перечеркнутый текст Только Arena при наличии соответствующего фонта
<BIG>...</BIG> Увеличенный текст только Arena
<SMALL>...</SMALL> Уменьшенный фонт только Arena
<SUB>...</SUB> Подстрочные символы только Arena
<SUP>...</SUP>Надстрочные символытолько Arena

Информационные элементы

ЭлементЗначениеПримечание
<EM>...</EM>Типографское
усиление
Часто отображается как Italic
<CITE>...</CITE>ЦитированиеНе реализовано в
Mosaic
<STRONG>...</STRONG>УсилениеОтображается как BOLD
<CODE>...</CODE>Отображает
примеры кода (например, коды программ)
Отображается непропорциональным фонтом
<SAMP>...</SAMP>Последователь-ность литералов Не реализован в Mosaic
<KBD>...</KBD>Пример ввода символов с клавиатуры Используется при разработке руководств
<VAR>...</VAR>Переменная
<DFN>...</DFN>Определениетолько Arena
<Q>...</Q>Текст, заключенный в скобки Вид скобок зависит от атрибута LANG. Реализован только в Arena
<LANG>...</LANG>Определяет язык отображения только Arena
<AU>...</AU>Автортолько Arena
<PERSON>...</PERSON>Имя персоныВведено для простоты выделения при индексировании документов. Реализован только в Arena
<ACRONIM>...</ACRONIM>Акронимтолько Arena
<ABBREV>...</ABBREV>Аббревиатуратолько Arena
<INS>...<INS>Вставленный текст только Arena
<DEL>...</DEL>Удаленный тексттолько Arena

Управление отображением стиля символов текста

Отображение ненумерованного списка


<UL>

<LH>Title of WWW programmes (NCSA).

<LI> NCSA HTTPD;

<LI> NCSA MOSAIC

<UL>

<LH>Title of WWW programmes (CERN).

<LI> CERN HTTPD;

<LI> AGORA - email robot;

<LI> HTTPD CERN;

<LI> WWW Line Browser;

<LI> Arena.

</UL>

<UL>

<LH> Title of WWW programmes (Netscape).

<LI> Netsite - server;

<LI> Netscape Novigator.

</UL>

Вложенные ненумерованные списки


<UL>

<LI>Title of WWW programmes (NCSA).

<UL>

<LI> NCSA HTTPD;

<LI> NCSA MOSAIC

</UL>

<LI>Title of WWW programmes (CERN).

<UL>

<LI> CERN HTTPD;

<LI> AGORA - email robot;

<LI> HTTPD CERN;

<LI> WWW Line Browser;

<LI> Arena.

</UL>

<LI> Title of WWW programmes (Netscape).

<UL>

<LI> Netsite - server;

<LI> Netscape Novigator.

</UL></UL>

Вложенные нумерованные списки


<OL>

<HL>Нумерованный список

<LI>Элементы заголовка документа

<OL>

<LI>TITLE

<LI>BASE

<LI>LINK

</OL>

<LI>Элементы тела документа

<OL>

<LI>BODY

<LI>Heading

<LI>Paragraph

<LI>Line Break

<LI>Horizontal Rule

<LI>...

</OL>

</OL>

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

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


<A HREF="http://polyn.net.kiae.su/index.html">

Индекс базы данных "Полынь"</A>

<A NAME="point">

<A HREF="http://polyn.net.kiae.su/index.html#point">

Ссылка на точку "point" в документе "index.html"</A>

Элемент img


<img SRC="http://polyn.net.kiae.su/gif/sarclast.gif" ALT="Sarcofagus.Winter, 1997">

<A HREF="doc.html"><img SRC="icon.gif" ALIGN=MIDDLE></A>

Таблицы


<TABLE BORDER>

<CAPTION>A test table with merged cells.<CREDIT>(T.Berners Lee/WWWC,1995.)</CREDIT></CAPTION>

<TR><TH ROWSPAN=2><TH COLSPAN=2>Average>

<TH rowspan=2>other<BR>category<TH ROWSPAN=2>Misc</TR>

<TR><TH>height<TH>weght</TR>

<TR><TH ALIGN=left>males<TD>1.9<TD>0.003

<TR><TH ALIGN=left>females<TD>1.7<TD>0.002

</TABLE>

Пример таблицы

Пример таблицы построенной в текстовом редакторе

Формы

ЭлементНазначение
INPUTполя ввода информации имеют множество типов
TEXTAREAполе ввода многострочного текста
SELECTописание меню
OPTIONописание элемента меню

Пример использования полей ввода


<FORM METHOD=POST ACTION=http://polyn.net.kiae.su/cgi-bin/test>

<P> Ниже приведен список примеров полей ввода:<BR>

Простое текстовое поле: <INPUT NAME="test1" VALUE="test1" TYPE="text"><BR>

Поле типа checkbox: <INPUT NAME="test2" TYPE="checkbox" CHECKED><BR>

Поле типа radiobutton: <INPUT NAME="test3" TYPE="radio"><BR>

Поле типа password: <INPUT NAME="test4" TYPE="password"><BR>

Невидимое поле: <INPUT NAME="test5" TYPE="hidden" VALUE="kuku"><BR>

Кнопка Submit: <INPUT NAME="submit" VALUE="Submit" TYPE="submit"><BR>

Кнопка Reset: <INPUT NAME="reset" VALUE="Reset" TYPE="reset"><BR>

Графическая кнопка: <INPUT NAME="graph" VALUE="default" SRC="test.gif" TYPE="image"><BR>

</FORM>

Элемент TEXTAREA


<TEXTAREA NAME="multi" ROWS=5 COLS=20>

This is a test 

TEXTAREA элемент

</TEXTAREA>

Новости мира IT:

Архив новостей

Последние комментарии:

IT-консалтинг Software Engineering Программирование СУБД Безопасность Internet Сети Операционные системы Hardware

Информация для рекламодателей PR-акции, размещение рекламы — adv@citforum.ru,
тел. +7 985 1945361
Пресс-релизы — pr@citforum.ru
Обратная связь
Информация для авторов
Rambler's Top100 TopList liveinternet.ru: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня This Web server launched on February 24, 1997
Copyright © 1997-2000 CIT, © 2001-2015 CIT Forum
Внимание! Любой из материалов, опубликованных на этом сервере, не может быть воспроизведен в какой бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав. Подробнее...