11529

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

Лекция

Информатика, кибернетика и программирование

Лекция 2. Структура HTMLдокумента Изучаемые вопросы Элементы языка HTML Структура HTMLдокумента Теги тела документа HTMLформы Из истории языка Год Событие около 1991 Тим БернерсЛ...

Русский

2013-04-08

236.5 KB

44 чел.

 Лекция 2. Структура HTML-документа 

Изучаемые вопросы

  1.  Элементы языка HTML
  2.  Структура HTML-документа
  3.  Теги тела документа
  4.  HTML-формы

Из истории языка

Год

Событие

около 1991

Тим Бернерс-Ли изобрел World Wide Web, он создал первые Веб-сервер и Веб-браузер и первую версию HTML

1995

Разработана версия 2.0 языка HTML

1997

Консорциум W3C опубликовал версию HTML 4.0 в качестве рекомендации, которая включила дополнительные специальные расширения браузеров.

1999

Опубликована версия HTML 4.01

2000

Консорциум W3C опубликовал спецификацию XHTML 1.0, которая была реструктуризацией HTML, чтобы сделать его действительным документом XML

В настоящее время

Опубликована версия HTML 5

1. Элементы языка HTML  

HTML  (Hyper Text Markup Language) является описательным языком разметки документов. Указателями раз метки являються теги – заключенные в треугольные скобки символы. HTML – документ можно представить  как совокупность элементов, каждый из которых начинается и заканчивается разметочными тегами, то есть документ НТМL представляет собой не что иное, как обычный текстовый АSСII-файл с добавленными в него управляющими НТМL-кодами (тегами).

Каждый элемент может иметь свое имя, атрибуты-параметры и содержимое, которое часто называют  контентом (от английского content — содержимое).

Большинство  элементов представляется в виде последовательности:

 открывающий тег, в котором располагается имя элемента и его атрибуты;

 содержимое (контент);

 закрывающий тег.

Открывающий тег представляет собой угловые скобки < >, в которых располагается название тега, другими словами, сама команда-инструкция для браузера, например:

<р> — тег, открывающий элемент-абзац.

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

</p> - тег, закрывающий  элемент-абзац.

 

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

Некоторые  элементы не имеют закрывающего тега. Такими элементами  являются, например, элементы <meta>, <frame>, <hr> и др. Они состоят только из открывающего тега, поэтому не могут ограничивать никакую часть документа, и, следовательно, не имеют содержимого, а сами по себе образуют отдельные элементы. Далее они будут называться одиночными тегами.

Расположение элементов. Элементы могут следовать друг за другом, а могут быть вложенными (если они представляют собой контейнер). Но элементы не могут пересекаться.

Например, правильного расположения вложенных элементов

<div><p>Hello, world!</p></div>

В данном случае элемент <р> вложен в элемент <div>.

Пример следующих друг за другм элементов

<div>Hello, world!</div><p>Это новый абзац</р>

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

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

Атрибуты

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

Порядок записи атрибутов в теге значения не имеет. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Если значение атрибута содержит несколько слов (символов), разделенных пробелами, то его обязательно нужно заключить в одинарные или двойные кавычки. Длина значения атрибута ограничена 1024 символами. Регистр символов в именах тегов и атрибутов не учитывается, чего нельзя сказать о значениях атрибутов.

Например, запись  элемента <р> с атрибутом align выглядит так:

<р   align=center>

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

<р атрибут1=значение1  атрибут2=значение2 ….>

Для каждого элемента существует определенный набор возможных атрибутов.

Теги сходного назначения могут иметь одинаковые атрибуты. В некоторых  случаях атрибуты являются уникальными. Когда атрибуты не указаны явно, используются их значения, заданные по умолчанию. В HTML допускаются атрибуты без значений. По сути — это логические атрибуты, имеющие значение 0 или 1, «yes» или «no». Указание атрибута подразумевает, что он уже имеет одно из значений. Отсутствие атрибута указывает на противоположное значение.

Типы данных

В HTML используются следующие типы данных:

  •  текстовые строки;
  •  символы;
  •  URI;
  •  цвет;
  •  линейные размеры (длина и ширина);
  •  дата и время;
  •  MIME-типы (указывают характер содержимого).

Текстовые строки. Представляют собой последовательность читаемых символов — букв, цифр, знаков препинания. Особенность строк заключается в том, что при интерпретации браузером из них изымаются символы перевода строки, и несколько идущих подряд пробелов заменяются одним. Аналогично не воспринимаются начальный и конечный пробелы в значениях атрибутов. Например, значения “  left  “ - и “left” будут интерпретированы одинаково.

 Символы. Иногда кодировка, используемая при наборе текста   или программы, не содержит нужный символ документа. Некоторых символов просто нет на клавиатуре. Иногда возникает необходимость включить в текст HTML документа символы, которые могут быть восприняты браузером как теги. В таких случаях можно использовать соответствующий численный (в десятичной или шестнадцатеричной системе счисления) эквивалент или специальные буквенные сочетания — строковые константы, или литералы. Признаком строковой константы является знак & в начале. Например, знак «меньше» (<) может быть обозначен литералом &lt; (от английского «меньше  чем» — less than) или кодом &#060; ,  а символ «больше» (>)  -  литералом &gt; (от английского «больше чем» - greater then) или кодом &#062;.Если указать в тексте HTML строку &lt;BODY&gt;, то она будет выглядеть на экране как текст <BODY> и не будет воспринята как тег.  

CER (Character Entity Reference – ссылка на сущность символа) всегда  начинается с амперсанда «&». В отличие от наименований тегов   HTML, наименования CER чувствительны к регистру символов. В таблице 2.1. приведены наиболее часто используемые CER и соответствующие им числовые коды.

  Таблица 2.1.    

Числовой код

Именная замена

Символ

Описание

&#034;

&quot;

«

Кавычка

&#038;

&amp;

&

Амперсанд

&#060;

&lt;

<

Меньше

&#062;

&gt;

>

Больше

&#160;

&nbsp;

Неразрывный пробел

&#161;

&iexcl;

¡

Перевернутый восклицательный знак

&#162;

&cent;

¢

Цент

&#163;

&pound;

£

Фунт

&#164;

&curren;

¤

Валюта

&#165;

&yen;

¥

Йена

&#168;

&uml;

¨

Умляут

&#169;

&copy;

©

Копирайт

&#171;

&laquo;

«

Левая угловая кавычка

&#174;

&reg;

®

Зарегистрированная торговая марка

&#177;

&plusmn;

±

Плюс или минус

&#187;

&raquo;

»

Правая угловая кавычка

Подробный список литералов и соответствующих цифровых  кодов приведен в приложении 2.

URI (Universal Resource Identifier). При разработке Web-страниц часто используются адреса различных связанных документов — URI. Это могут быть гиперссылки новых страниц или ресурсы, которые необходимо загрузить на текущую страницу.

Различают URI абсолютные и относительные.

Абсолютные URI могут иметь следующий вид :

http://www.tutor.com/html/index.html 

1.  Первая часть адреса — http: // — указывает тип сервиса, которым вы хотите воспользоваться. В частности http: // указывает на протокол HTTP, который используется для обмена  сообщениями в виде гипертекста. Могуть использоваться и другие протоколы, например, ftp:// - протокол для обмела файлами и др. Не обходимо отметить, что в Интернете применяются соглашения операционной системы Unix, в которой для разделения каталогов используется косая черта «/» (слеш), в отличие от DOS, где при указании пути употребляется «обратный» слеш «\».

2. Вторая часть адреса, www.tutor.com/, является доменным именем сервера, на котором находится запрашиваемый ресурс.

3.    Третья  часть,   html/,   указывает   путь   (каталог html/) к файлу на сервере, в котором находится запрашиваемый ресурс.

4.  Последняя часть (index.html) определяет  имя самого файла, index, и его расширение, html. Если имя файла отсутствует, то сервер открывает файл, заданный по умолчанию. Обычно таким файлом является файл с именем  index.html, или index.htm, или default.html или default.htm.

Если запрашиваемый ресурс находится на том же сервере, что и текущий ресурс, то для обращения к нему может бать использован относительный адрес (относительно текущего ресурса). Для формирования относительного адреса действуют те же правила, что и в MS-DOS. Например, если адрес используемого ресурса http://www.tutor.com/html/index.html, а требуемый ресурс расположен по адресу  http://www.tutor.com/html/CER/index.html, то путь к этому ресурсу может быть представлен в виде CER/index.html. Если текущий ресурс  находится в каталоге CER, то для перехода в родительський каталог можно записать ../index.html/  

Цвет.  Существуют несколько основных способов представления цветов в HTML.

1. В виде #RRGGBB. Представление в виде трёх пар шестнадцатеричных цифр, где каждая пара отвечает за свой цвет:

две первые цифры (RR) — красный

две в середине (GG) — зелёный

две последние цифры (BB)— синий

2. Представление ключевыми словами, например red, green, blue, black. Во избежание случаев, когда указанное ключевое слово «не понимается» браузером следует использовать лишь небольшой набор основных цветов, используемых во всех браузерах.

3. В виде rgb(*,*,*), где «*» —  десятичные числа от 0 до 255, обозначающих количество соответствующего цвета (красный, зелёный, синий) в получаемом.

Единицы измерения длины

Единицы измерения длины  делятся на абсолютные и относительные.

Абсолютные единицы измерения длины

in — дюймы (1 дюйм равен 2,54 сантиметра),

cm — сантиметры,

mm — миллиметры,

pt — points. Point — это «точка», равная 1/72 дюйма или 0,36 мм, которая еще уверенно различается человеческим глазом.

рс — picas. 1pica (пика) равна 12 pt.

Относительные единицы измерения .

em — единица измерения, которая базируется на ширине стандартной для типографии буквы «т». Значение 1,5еm будет в полтора раза больше базового размера данного шрифта.

ех —  единица измерения, которая основана на высоте шрифта.

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

MIME-типы данных. Протокол MIME (Multipurpose Internet Mail Extension) первоначально был разработан для описания файлов, вкладываемых в электронную почту. Он определял, какой тип данных передается сервером. Сейчас протокол активно используется и в других интернет-сервисах. Сначала указывается тип файла, а затем (через косую черту) — конкретный его формат: «тип файла/ формат», например image/gif или text/html, или application/jp. Когда строка с MIME-типом данных является значением атрибута (часто атрибута type), то подобная запись может выглядеть так: type="text/html". Подробный список MIME-типов приведен в приложении 5.

Комментарии

Текст, заключенній в теги <!--       --> воспринимается  как комментарий к коду и не отображается в окне браузера

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

Элемент <!doctype>. Информация о версии языка.

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

Этот элемент  имеет только открывающий тег <!doctype>, который начинается восклицательным знаком. В версии HTML5 єтот єлемент записівается следующим образом

<!doctype html>

    

    

Элемент <html>

Вторым элементом страницы является элементнт <html>. Этот элемент служит признаком того, что перед нами Web-страница, или HTML-документ.

Правило записи (синтаксис): элемент является контейнером. Открывающий тег — <html>, закрывающий — </html>. Оба тега могут отсутствовать. Однако их использование является правилом хорошего тона. Все остальные элементы, кроме <!doctype>> помещаются внутрь контейнера <html >... </html> и служат его контентом.

В контейнере <html> … </html> содержится сам HTML-документ, состоящий из двух частей – заголовка, хранящегося в контейнере <head>…</head> и тела документа, хранящегося в контейнере <body>…</body>. Заголовок содержит служебную информацию и не отображается браузером. В теле документа (<body>) располагается основное содержание документа.

Таким образом, HTML - документ должен иметь следующую структуру

<html>

<head>

служебная неотображаемая информация...

</head>                                                            

<body>

...воспроизводимое содержание документа...

</body>

</html>   

Элемент <head>

Элемент <head> определяет заголовок документа. Он предназначен для представления необходимой браузеру служебной информации. Информация, заключенная в тэги, находящиеся внутри раздела HEAD (кроме названия документа, описываемого с помощью тэга <TITLE>), не отображается на экране.

В заголовке допускается использование следующих тегов

<title>, <meta>,  <base>, <link>,  <script>, <style>

Элемент <title>

Элемент <title> определяет название документа. Текст заключенные между тегами <title> и </title> является названием документа, єнот текст отображается  в верхней части окна браузера.  Если элемент <title> отсутствует, то в верхней части окна браузера отображается URI документа.

Элемент <meta>

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

Атрибуты тега <meta>

charset - Задает кодировку документа. (<meta charset="utf-8">

content -Устанавливает значение атрибута, заданного с помощью name или http-equiv.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

http-equiv - Предназначен для конвертирования метатега в заголовок HTTP.

Значеними атрибута http-equiv могут быть:

Content-Type - тип кодировки документа.

Например, <meta http-equiv="Content-Type" content="text/html; charset=utf-8">)

Expires - устанавливает дату и время, после которой информация в документе будет считаться устаревшей.

<meta http-equiv="expires" content="Sun, 01 Jan 2013 07:01:00 GMT">

Pragma - способ кэширования документа.

Refresh -Загрузить другой документ в текущее окно браузера.

<meta http-equiv="refresh" content="5; URL=http://www.htmlbook.ru"> 

Браузер, получив эту запись, будет ожидать 5 секунд, а затем загрузит новую страницу, указанную в параметре URL, в данном случае это переход на сайт htmlbook.ru.

Этот метатег позволяет создавать перенаправление (редирект) на другой сайт. Если URL не указан, произойдет автоматическое обновление текущей страницы через количество секунд, заданных в атрибуте content.

Name - Имя метатега, также косвенно устанавливает его предназначение.

Ниже приведены некоторые допустимые аргументы параметра name.

author – имя автора документа;

description – описание текущего документа;

keywords - список ключевых слов, встречающихся на странице.

Строка

<meta name="description" content="Это тестовая страница." />

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

Строка

<meta name="keywords" content="HTML, CSS, DTD, теги" />

определяет список ключевых слов, встречающихся на странице.

Строка

<meta name="robots" content="index, follow" />

определяет режим индексирования страницы поисковыми роботами.

Два метатега предназначены специально для поисковых серверов: description (описание) и keywords (ключевые слова). Поисковые системы проверяют содержимое веб-страницы на соответствие заявленным ключевым словам.

description

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

Пример

 <meta name="description" content="Сайт об HTML и создании сайтов"> 

 

keywords

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

Пример

 <meta name="Keywords" content="HTML, META, метатег, тег, поисковая система"> 

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

Рекомендации по использованию метатегов:

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

Элемент <LINK> устанавливает связь с внешним документом ( файл со стилями или со шрифтами). Тег <LINK> размещается всегда внутри контейнера <HEAD> и не создает "видимую" ссылку.

<link type="text/css" href="reset.css" rel="Stylesheet" />

<link type="text/css" href="main.css" rel="Stylesheet" />

Атрибуты тега <LINK>

href – путь к файлу, на который делается ссылка (URL), в качестве значения принимается полный или относительный путь к файлу;

rel – атрибут rel определяет отношения между текущим документом и файлом, на который делается ссылка, чтобы браузер знал, как использовать подключаемый документ.

Значения атрибута:

stylesheet – определяет, что подключаемый файл хранит таблицу стилей (CSS);

application/rss+xml – файл в формате XML для описания ленты новостей, анонсов статей.

type – сообщает браузеру, какой MIME-тип данных используется для внешнего документа. Как правило, применяется для того, чтобы указать, что подключаемый файл содержит CSS.

Аргументы – имена MIME-типа в любом регистре. Для подключаемых таблиц связанных стилей применяется тип text/css.

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

all – все устройства;

screen (значение по умолчанию) – экран монитора;

print – печатающее устройство вроде принтера;

projection – проектор;

braille – устройства, основанные на системе Брайля, которые предназначены для слепых людей;

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

Элемент Style

Тег STYLE предназначен для размещения описателей стилей. В настоящее время этот тег  используется только с одним атрибутом TYPE, который задает тип описателя стиля. Это может быть либо text/css , либо text/javascript. Если элемент разметки открыт открывающим тегом, то он должен завершаться закрывающим тегом. В общем виде запись элемента STYLE выглядит так:

<STYLE TYPE=тип_описания_стилей>

описание стиля/стилей

</STYLE>

Элемент Script

Тег <SCRIPT> предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке.

<SCRIPT> может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работе программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.

Атрибуты тега:

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

language – устанавливает язык программирования, на котором написан скрипт.

Параметр language не чувствителен к регистру и может принимать одно из четырех значений:

JavaScript (значение по умолчанию) – язык программирования JavaScript. К этому параметру часто еще присоединяют номер версии, например – JavaScript1.3.

JScript – разновидность языка JavaScript разработанная компанией Microsoft. Смена названия продиктована тем, что имя JavaScript уже было зарегистрировано, при этом различия между языками состоят не только в названии, но и в подходах.

VBS, VBScript - язык программирования VBScript основанный на Visual Basic. Является продуктом Microsoft и поддерживается преимущественно браузером Internet Explorer.

src – адрес скрипта из внешнего файла для импорта в текущий документ. Как только внешние инструкции полностью загружаются, браузер обрабатывает их, словно они были внедрены в текущий документ.

type – указывает тип MIME для определенного языка. Поскольку некоторые старые браузеры не понимают параметр type, можно задавать два атрибута одновременно – language и type. Если браузер распознает значение параметра type, то значение language отменяется. Атрибут type не чувствителен к регистру и может иметь  следующие значения:

text/javascript (значение по умолчанию) – для языка программирования JavaScript.

text/vbscript – для языка VBScript.

3. Теги тела документа

Теги тела документа предназначены для управления отображением информации в браузере  пользователя.  

Описание тела документа начинается с тега BODY. В отличие от тега HEAD, тег BODY может иметь имеет атрибуты.

Атрибут BACKGROUND определяет фон, на котором отображается текст документа. Если источником для фона HTML- документа является графический файл image.gif, то в открывающем теге тела BODY появляется соответствующий атрибут:

<ВОDY ВАСКGROUND="image.gif">

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

Атрибут

Описание

BACKGROUND 

определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG.

BGCOLOR

определяет цвет фона документа.

TEXT

определяет цвет текста в документе.

LINK

определяет цвет гиперссылок в документе.

ALINK 

определяет цвет подсветки гиперссылок в момент нажатия.

VLINK 

определяет цвет гиперссылок на документы, которые вы уже просмотрели.

Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Например:

<HTML>

<BODY  BACKGROUND="image.jpg"  BGCOLOR="black"

TEXT="#FFFFFF" LINK="#FF0000" VLINK="#656565 >

Текст документа.

</BODY>

</HTML>

Теги управления разметкой

Теги

Описание тегов

Атрибуты

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

от <Н1> до <Н6>

Заголовки. Обозначают начало раздела документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тегами <Н1></Н1>, получается большим - это основной заголовок. Если текст окружен тегами <Н2></Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ></НЗ> еще меньше и так далее до <Н6></Н6>.

<P>

Тег <P> применяется для разделения текста на параграфы. В нем используются те же атрибуты, что и в заголовках.

АLIGN

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

Возможные значения атрибута:

  •  justify
  •  left
  •  right
  •  center

<ВR>

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

СLЕАR

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

<NOBR> 

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

Списки в HTML

Еще одним способом структурирования текстов являются списки. В НТМL имеются следующие виды списков:

  •  ненумерованный список (тег <UL>);
  •  нумерованный список;
  •  список определений.

Ненумерованный список записывается в виде последовательности:

<UL>

 <LI>первый элемент списка

 <LI>второй элемент списка

 <LI>третий элемент списка

</UL>

Можно задавать любой тип маркера в произвольном месте списка. Ниже перечислены теги с атрибутами стандартных маркеров:

  •  <UL TYPE=DISC> Стандартные маркеры списков первого уровня (по умолчанию).
  •  <UL TYPE=СIRCLE> Маркеры в виде окружностей.
  •  <UL TYPE=SQUARE> Квадратные маркеры.

Тег <OL> вместе с атрибутом TYPE позволяет создавать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры:

<ОL ТYРЕ=l> Тег создает список с нумерацией в формате 1., 2., 3...

<ОL ТYРЕ=А> Тег создает список с нумерацией в формате А., В., С...

<OL ТYРЕ=а> Тег создает список с нумерацией в формате а., b., с...

<ОL ТYРЕ=I> Тег создает список с нумерацией в формате I., II., III...

Теги списка <DL>, <DT>, <DD> используют для создания списка терминов и их определений по следующей схеме :

<DL>

 <DT>Термин</DT>

 <DD>Определение</DD>

</DL>

Комментарии

Комментарии HTML начинаются с символа "<!--" и оканчиваются символом "-->". Содержимое комментариев браузер не выводит на экран.

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

Для записи гипертекстовой ссылки используется тег <А>, который называют "якорем". Якорь имеет несколько атрибутов, главным из которых является HREF. Простую ссылку можно записать в виде

<А НREF="http://www.example.com">

 Пример гипертекстовой ссылки

</А>

Значение атрибута HREF и есть адрес документа. Форма записи этого адреса задается в виде URL.

Графика в HTML.

Для вставки изображения в HTML документ используется тег <IMG> с обязательным атрибутом SRC, значением которого является URL графического файла.

Пример:

<IMG SRC="myimage.gif" ALT="Картинка">.

Тегом HTML, который заставляет браузер выводить изображение, является <IMG> с обязательным атрибутом SRC (SouRCe, источник). Имя файла представляет собой имя выводимого графического файла. Замыкающего тега не требуется.

Пример вставки изображения:

<IMG SRC="image.gif" ALT="ИЗОБРАЖЕНИЯ">

Изображения на веб-странице могут использоваться в качестве гипертекстовых ссылок, как и обычный текст. Читатель щелкает на изображении и отправляется на другую страницу или переходит к другому изображению. Для обозначения изображения как гипертекстовой метки используется тот же тег <A>, что и для текста, но между <A> и </A> вставляется тег изображения <IMG> :

Тег <IMG> имеет один обязательный атрибут SRC и yнесколько необязательных: ALT, ALIGN, USEMAP, HSPACE, VSPACE, BORDER, WIDTH, HEIGHT.

Атрибут

Описание

SRC

Указывает файл изображения и путь к нему

ALT

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

АLIGN

Определяет положение изображения относительно окружающего его текста

USEMAP

Если щелкнуть кнопкой мыши на активной области изображения, для которого определен атрибут USEMAP, произойдет переход по ссылке на документ, заданный для этой области

BORDER

Определяет толщину рамки вокруг изображения. Если значение равно нулю, рамка отсутствует

HSPACE

Задает горизонтальное расстояние между вертикальной границей страницы и изображением, а также между изображением и огибающим его текстом.

VSPACE

Задает вертикальное расстояние между строками текста и изображением

WIDTH , HEIGHT 

Задают значения размеров изображения по горизонтали и по вертикали соответственно

Средства описания таблиц в HTML

Для описания таблиц используется тег <ТАВLЕ>. Строки таблицы задается с помощью тегов <ТR></ТR>. Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD></ТD>. Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН></ТН>. Эти теги подобны <ТD></ТD>, однако текст, заключенный между тегами <ТН></ТН>, автоматически выделяется жирным шрифтом и по умолчанию располагается посередине ячейки. Тег <CAPTION> позволяет создавать заголовки таблицы.

Атрибут

Описание

NOWRAP

При использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.

СОLSPAN

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

ROWSPAN

Подобен атрибуту СОLSPAN, только он задает число строк, на которые расширяется ячейка.

WIDТН

Можно поместить его в тег <ТАВLЕ>, чтобы задать ширину всей таблицы, или можно использовать в тегах <ТD> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах.

СЕLLРАDDING

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

АLIGN, VALIGN

Теги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали. VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали.

BORDER

В теге <ТАВLЕ> определяет, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу.

СЕLLSPACING

Определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам.

BGCOLOR

Позволяет установить цвет фона. В зависимости от того, с каким тегом он применяется, цвет фона может быть установлен для всей таблицы (TABLE), для строки (TR) или для отдельной ячейки (TD). Значением данного атрибута является RGB-код или стандартное название цвета.

BACKGROUND

Задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением.

Тело документа <BODY> предназначено для отображения данных на веб-странице, в частности, в теле размещается текст, изображения, ссылки, таблицы, списки и т.д.

     

4.  HTML-формы


 Формы  используются в WWW для передачи информации от клиента к серверу.

Задание формы — тег FORM

Тег FORM определяет  форму и  границы использования других тегов, размещаемых в форме. Вутри пары <FORM> и </FORM> размещается последовательность тегов <INPUT>, которые формируют элементы для ввода информации пользователем. В форме используются атрибуты  method и action. Формат контейнера <FORM> имеет вид

<FORM  action=”URL”  METHOD=”GET/POST”>

где  URL – адрес ресурса , куда будет отослано содержимое формы. Если этот адрес отсутствует, то будет использован  URL- адрес текущего документа.  

METHOD=”GET/POST” – метод, используемый для отправки содержимого заполненной формы на сервер.

GET – содержимое формы  пересылается в стартовой строке  запроса.

POST – содержимое формы пересылается в теле запроса. 

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

Информация, введення пользователем в элементы формы передается на сервер в виде

Имя_элемента=значение.

 

Элементы управления формы — тег <INPUT>

Данный тег используют для определения элемента для ввода информации пользователя. Вид элемента  определяется значением атрибута TYPE.

Атрибут TYPE=text

Значение атрибута TYPE=text определяет в качестве элемента ввода однострочное текстовое поле. Размер поля может быть установлен атрибутом SIZE, например, SIZE=40 для 40-символьного поля. Пользователи могут вводить и больше символов, чем этот предел, но с текстовым скроллингом (пролистыванием) поля, чтобы курсор ввода оставался видимым. Верхний предел количества символов, вводимых в поле задается  атрибутом MAXLENGTH. Атрибут NAME используется для наименования поля, а атрибут VALUE определяет инициализирует текстовую строку в поле, когда документ впервые загружен.

Атрибут TYPE=password

Значение атрибута TYPE=password определяет в качестве элемента ввода однострочное текстовое поле, аналогичное полю типа text, в котором вводимые символы отображаются “звездочками”. Такой тип элемента ввода обычно используют для ввода пароля.

Атрибут TYPE=hidden

Значение атрибута TYPE=hidden определяет в качестве элемента ввода  скрытое текстовое поле, которое в форме не отображается и недоступно для ввода информации пользователем. Обычно такое поле используется для передачи на сервер какой-либо служебной информации.

Атрибут TYPE=checkbox

Значение атрибута TYPE=checkbox определяет в качестве элемента ввода флажок (checkbox). При отправке данных формы на сервер в качестве значения элемента ввода используется значение атрибута VALUE, но только в том случае если флажок ”установлен” (галочка внутри квадратика). Если флажок не установлен, то значение атрибута VALUE этого элемента ввода на сервер не передается.  

Атрибут TYPE=radio

Значение атрибута TYPE=radio определяет в качестве элемента ввода радиокнопку (radiobutton). Обычно используется несколько радиокнопок с одинаковым именем (значеним атрибута NAME) и различными значениями атрибута VALUE.  В этом случае при щелчке мышкой по одной из кнопок она переводится во включенное состояние (черная точка в середине конопки), а остальные кнопки переводятся в выключенное состояние. На сервер передается значение атрибута VALUE только выбранной кнопки.

   

Атрибут TYPE=image

Значение атрибута TYPE=image определяет в качестве элемента ввода кнопку-картинку, загружаемую из файла, указаного в качестве значения атрибута SRC. При щелчке мышкой по этой кнопке-картинке данные формы передаются  серверу, при этом серверу сообщаются координаты x и y той точки на изображении, где был произведен щелчок клавишей мыши. Координаты отсчитываются от  верхнего левого угла изображения. При этом информация о поле типа image записывается в виде двух пар значений name=value. Значение name получается посредством добавления к названию соответствующего поля суффиксов ".x" (абсциссы), и ".y" (ординаты).

Атрибут TYPE=reset

Значение атрибута TYPE=reset определяет в качестве элемента ввода кнопку, надпись на которой опеределяется значеним атрибута VALUE. При щелчке мышкой по этой кнопке все элементы формы переводяться в состояние по умолчанию”.

    

Атрибут TYPE=submit

Значение атрибута TYPE=submit определяет в качестве элемента ввода кнопку, надпись на которой опеределяется значеним атрибута VALUE. При щелчке мышкой по этой кнопке значения атрибутов VALUE всех элементов формы передаються на сервер.

   

Создание многострочных областей ввода текста — тег <TEXTAREA>

В зависимости от типа формы может потребоваться организовать ввод большого количества текста. В таких случаях используется тег <TEXTAREA> для создания текстового поля из нескольких строк. Данный тег использует три атрибута: COLS, NAME и ROWS.

Атрибут COLS

Указывает (число символов) число колонок, содержащихся в текстовой области.

Атрибут ROWS

Задает количество видимых строк текстовой области.

Использование списков в форме — тег <SELECT>

В формы можно включать списки с прокруткой и раскрывающийся список. Для этого используется тег <SELECT> .  Для определения списка пунктов используют тег <OPTION>. Тег <SELECT> поддерживает три необязательных атрибута: MULTIPLE, NAME и SIZE.

Атрибут MULTIPLE

Позволяет выбрать более чем одно наименование.

Атрибут SIZE

Определяет число видимых пользователю пунктов списка. Если в форме установлено значение атрибута SIZE=1, то браузер выводит на экран список в виде выпадающего меню. В случае SIZE > 1 браузер представляет на экране обычный список.

В форме может использоваться тег <OPTION> только внутри тега <SELECT>. Эти теги поддерживают два дополнительных атрибута: SELECTED и VALUE.

Атрибут SELECTED

Используется для первоначального выбора значения элемента по умолчанию.

Атрибут VALUE

Указывает на значение, возвращаемое формой после выбора пользователем данного пункта. По умолчанию значение поля равно значению тега <OPTION>.

   

Новые типы input в HTML5 формах

  •  input type=email определяет поле, которые должно содержать email адрес. Значение введенное в поле автоматически проверяется перед отправкой на сервер.
  •  input type=url определяет поле, которые должно содержать url адрес. Значение введенное в поле автоматически проверяется перед отправкой на сервер.
  •  input type=tel определяет поле для ввода телефонного номера. С помощью атрибута pattern Вы может установить формат принимаемого телефонного номера. Формат задается с помощью регулярных выражений.
  •  input type=number определяет поле, которое должно содержать числа. Вы можете ограничивать диапазон принимаемых чисел с помощью атрибутов min (минимальное допустимое число) и max (максимальное допустимое число). С помощью атрибута step Вы можете задать шаг допустимых чисел (к примеру если шаг равен 2, то в поле могут вводиться числа 0,2,4,6 и т.д.)
  •  input type=range определяет поле, которые может содержать значения в определенном интервале. Отображается как ползунок, который можно перетаскивать мышкой. Вы можете ограничивать диапазон принимаемых чисел с помощью атрибутов min (минимальное допустимое число) и max (максимальное допустимое число). С помощью атрибута step Вы можете задать шаг допустимых чисел (к примеру если шаг равен 2, то в поле могут вводиться числа 0,2,4,6 и т.д.)
  •  input type=search определяет поле поиска (может использоваться например для создания поиска по сайту).

Новые элементы в HTML5 формах

  •  datalist позволяет привязать список к полям формы. Значения списка будут выводится как поисковые подсказки во время ввода информации в поле связанное с ним.
  •  keygen позволяет генерировать открытые и закрытые ключи, которые используются для безопасной связи с сервером.
  •  output может использоваться для вывода различной информации. С помощью атрибута for можно указать связанные поля.

Новые атрибуты в HTML5 формах

  •  autofocus делает поле активным после загрузки страницы (может использоваться со всеми типами input).
  •  form указывает форму, которой принадлежит данное поле (может использоваться со всеми типами input).
  •  multiple указывает, что данное поле может принимать несколько значений одновременно (может использоваться с input типов email и file).
  •  novalidate указывает, что данное поле не должно проверяться перед отправкой (может использоваться с form и input).
  •  placeholder отображает текст-подсказку в поле (может использоваться с input следующих типов: text, search, url, tel, email и password.).
  •  required указывает, что данное поле должно быть обязательно заполнено перед отправкой.

Выбор даты

В HTML5 были добавлены новые элементы ввода позволяющие удобно выбирать дату и время.

  •  date позволяет выбрать дату в формате год-месяц-день_месяца.
  •  time позволяет выбрать время.
  •  datetime позволяет выбрать дату в формате год-месяц-день_месяцаTвремяZ (отчет ведется по глобальному времени).
  •  datetime-local позволяет выбрать дату в формате год-месяц-день_месяцаTвремя (отчет ведется по местному времени).
  •  month позволяет выбрать дату в формате год-месяц.
  •  week позволяет выбрать дату в формате год-Wнеделя.

PAGE  16


 

А также другие работы, которые могут Вас заинтересовать

40262. Правовое основа аудиторской деятельности в РФ 38.5 KB
  В Российской Федерации для регулирования аудиторской деятельности согласно закону об аудиторской деятельности создается уполномоченный федеральный орган государственного регулирования аудиторской деятельности. Функции федерального органа государственного регулирования аудиторской деятельности осуществляет уполномоченный федеральный орган исполнительной власти определяемый Правительством Российской Федерации. Во исполнение Федерального закона Об аудиторской деятельности Правительство Российской Федерации приняло постановление О вопросах...
40263. Приветствия и ответы на них 21.5 KB
  Очень часто после следует вопрос о состоянии здоровья дел: How re you = Как поживаешь Как здоровье How re you doing = Как дела How re you getting on = Как поживаешь How is it getting on = Как дела How is it going = Как дела How is everything = Как здоровье дела Ответ на подобный вопрос обычно звучит так: I'm well thnk you. I'm fine thnk you. Fine thnks при близком знакомстве = Сразу после ответа поинтересоваться состоянием здоровья дел собеседника: nd wht bout you = А у тебя nd you более разговорный...
40264. Привлечение третьих лиц 38.5 KB
  В качестве эксперта аудиторские фирмы могут использовать работу специализированной организации являющейся юридическим лицом а также могут привлекаться физические лица. При проведении аудита аудиторские фирмы могут использовать работу оценщика инженера геолога страховщика или другого эксперта. Решение об использовании работы эксперта при проведении аудита принимает аудиторская фирма исходя из характера и сложности работы обстоятельств подлежащих исследованию уровню их существенности а также их целесообразности надежности и...
40265. Принципы и требования к организации системы внутреннего контроля 40 KB
  Принцип подконтрольности каждого субъекта внутреннего контроля работающего в организации. Принцип компетентности добросовестности и честности субъектов внутреннего контроля. Принцип компетентности состоит в проявлении контролером высокого уровня знаний при контроле финансовохозяйственной деятельности а также предполагает обязательное пополнение багажа знаний через курсы повышения квалификации семинары тренинги необходимо постоянно быть в курсе всех последних изменений в законодательстве изучать опыт и новые методы контроля стремиться...
40266. Принципы формирования учетной политики 29.5 KB
  Допущение непрерывности деятельности означает что организация будет продолжать свою деятельность в обозримом будущем у нее отсутствуют намерения и необходимость ликвидации или существенного сокращения деятельности и следовательно обязательства будут погашаться в установленном порядке. Допущение временной определенности факторов хозяйственной деятельности означает что эти факты относятся к тому отчетному периоду в котором они имели место независимо от фактического времени поступления или выплаты денежных средств связанных с этими...
40267. Продовольственная безопасность страны 37.5 KB
  Вторым важнейшим показателей состояния продовольственной безопасности страны является динамика среднедушевого производства зерна. При этом практика многих стран мира свидетельствует что солидная государственная поддержка АПК способствует росту отечественного производства и обеспечению страны собственным продовольствием. Достижение продовольственной безопасности в России обусловлено достаточностью размеров земельных ресурсов сельского хозяйства и биоклиматического потенциала для производства в необходимых размерах основных продуктов питания....
40268. Планирование аудита 42.5 KB
  Цель задачи и содержание планирования Аудиторская проверка – достаточно сложный процесс. Исходя из изложенного выше целью планирования является обеспечение проведения проверки наилучшим оптимальным образом с точки зрения выбранного критерия. Для эмпирического приближения к оптимальному варианту проведения проверки в ходе планирования решают следующие задачи: сбор информации о потенциальном клиенте в частности о его бизнесе организации бухгалтерского учета и внутреннего контроля на его предприятии; оценка уровня существенности...
40269. Планирование и организация системы внутреннего контроля 34.5 KB
  Для обеспечения рациональности и адекватности окружающим условиям самого курса действий и общей стратегии для обеспечения соответствия управленческих решений самой возможности их успешной реализации с точки зрения потенциалов организации также необходим контроль. Если в стадию планирования не включить элемент контроля ошибочность планирования в лучшем случае проявится на стадии организации и регулирования. На стадиях организации и регулирования реализации управленческих решений необходим контроль правильности хода реализации принятых...
40270. Подготовительный этап аудиторской проверки 60.5 KB
  Подготовительный этап включает в себя несколько моментов: предварительное планирование; сбор общих сведений о клиенте; получение информации о правовых обязательствах клиента; оценка уровня существенности; ознакомление с системой внутреннего контроля; анализ рисков; разработка общего плана и программы аудита. Доказательная информация и правовые обязательства клиентов получение адекватной информации необходимо также для ознакомления с бизнесом клиента. Источниками информации могут служить публикации на общеэкономические...