Сделай Сам Свою Работу на 5

Document Type Definition (DTD)





Основные сведения

HTML (HyperText Markup Language – "язык разметки гипертекста") – стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML. Язык разметки HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.

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

Текстовые документы, содержащие код на языке HTML (файлы с расширением .html или .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые " Веб-браузерами " (просто "браузерами") или " Интернет-обозревателями ", предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра и, при необходимости, отправки введенных пользователем данных на сервер.



До 1995 года существовало множество неофициальных стандартов HTML. Чтобы стандартная версия отличалась от них, ей сразу присвоили второй номер.

Версия 3 была предложена Консорциумом всемирной паутины ( W3C ) в марте 1995 года и обеспечивала много новых возможностей, таких как создание таблиц, "обтекание" изображений текстом и отображение сложных математических формул. Даже притом, что этот стандарт был совместим со второй версией, реализация его была сложна для браузеров того времени. Версия 3.1 официально никогда не предлагалась, и следующей версией стандарта HTML стала 3.2, в которой были опущены многие нововведения версии 3.0, но добавлены нестандартные элементы, поддерживаемые браузерами "Netscape" и "Mosaic".

HTML версии 4.0 содержит много элементов, специфичных для отдельных браузеров, но в то же время произошла некоторая "очистка" стандарта. Многие элементы были отмечены как устаревшие и нерекомендованные. В частности, элемент font, используемый для изменения свойств шрифта, был помечен как устаревший (вместо него рекомендуется использовать таблицы стилей CSS).



Начиная с 2004 года сообществом WHATWG (Web Hypertext Application Technology Working Group) ведется разработка HTML версии 5. Черновой вариант спецификации языка появился в Интернете 20 ноября 2007 года.

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

HTML – это теговый язык разметки документов. Чтобы браузер понимал, что имеет дело не с простым текстом, а с особым элементом, который задает его форматирование, применяются теги. Теги являются основой HTML и берутся в угловые скобки. Общий синтаксис написания тегов следующий.

<тег параметр1="значение" параметр2="значение">

<тег параметр1="значение" параметр2="значение">...</тег>

Теги бывают одиночными и парными (контейнеры). Одиночный тег используется самостоятельно, а парный может включать внутри себя другие теги или текст. У тегов допустимы различные параметры, которые разделяются между собой пробелом. Впрочем, есть теги, без всяких дополнительных атрибутов. Параметры условно можно подразделить на обязательные, они непременно должны присутствовать, и необязательные, их добавление зависит от цели применения.

Далее описаны некоторые рекомендации и свойства, которые относятся к тегам:

  • теги не чувствительны к регистру;
  • если для тега не добавлен какой-либо допустимый параметр, браузер будет подставлять значение, заданное по умолчанию;
  • внутри тега между его параметрами допустимо ставить перенос строк;
  • все параметры тегов рекомендуется брать в двойные или одинарные кавычки (хотя в современном браузере отсутствие кавычек не приведет к ошибкам);
  • если какой-либо тег или его параметр был написан неверно, то браузер проигнорирует подобный тег;
  • существует определенная иерархия вложенности тегов (например, метатеги должны находиться внутри контейнера <HEAD>), причем если теги между собой равноценны в иерархии, то их последовательность не имеет значения;
  • существует три состояния закрывающего тега:
  • обязателен – закрывающий тег должен присутствовать всегда, иначе это приведет к ошибке при отображении документа;
  • не требуется – для некоторых тегов вроде <BR> закрывающего тега нет в принципе;
  • не обязателен – говорит о том, что разработчик может его, как добавить, так и опустить, к ошибке это не приведет;
  • порядок параметров в любом теге не имеет значения и на результат отображения элемента не влияет.

Обычные веб-страницы состоят из двух разделов – заголовка (<HEAD>) и тела документа (<BODY>). Раздел заголовка может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице. Тело документа предназначено для размещения тегов и содержательной части.



Пример. Простейший HTML -документ

<!DOCTYPE html>

<html>

<head>

<!-- Этот раздел предназначен для заголовка страницы и технической информации. -->

</head>

<body>

<!-- Этот раздел предназначен для размещения содержимого страницы. -->

</body>

</html>

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

Рассмотрим более подробно структуру и состав HTML -документа на следующем примере:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- Этот раздел предназначен для заголовка страницы и технической информации. -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta http-equiv="Content-Language" content="ru"/>
<meta name="description" content="Это тестовая страница." />
<meta name="keywords" content="HTML, CSS, DTD, теги" />
<meta name="robots" content="index, follow" />
<title>Тестовая страница</title>
<link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" />
<link type="text/css" href="reset.css" rel="Stylesheet" />
<link type="text/css" href="main.css" rel="Stylesheet" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<div class="container">
<NOINDEX>
<div class="header">
<div class="navArea">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<h1>
<a href="index.html" title="На главную">Главная<span /> </a>
</h1>
</td>
<td>
<a href="http://www.yandex.ru" title="Яндекс">Яндекс</a>
</td>
<td>
<a href="#" title="Услуги">Услуги</a>
</td>
<td>
<a href="#" title="Товары">Товары</a>
</td>
<td>
<a href="#" title="Контактная информация">Контактная информация</a>
</td>
</tr>
</table>
</div>
</div>
</NOINDEX>
<div class="textArea">
<div class="leftMenu">
<ul>
<li>
<span>Общее описание</span>
</li>
<li>
<a href="advantages.html" title="Преимущества">Преимущества</a>
</li>
</ul>
</div>
<div class="mainText">
<h2>Описание тестовой страницы</h2>
<p>HTML (от&nbsp;англ. HyperText Markup Language&nbsp;&mdash; &laquo;язык разметки гипертекста&raquo;)&nbsp;&mdash; стандартный язык разметки документов во&nbsp;Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и&nbsp;отображается в&nbsp;виде документа, в&nbsp;удобной для человека форме.</p>
<p>HTML является приложением (&laquo;частным случаем&raquo;) SGML (стандартного обобщенного языка разметки) и&nbsp;соответствует международному стандарту ISO 8879. XHTML&nbsp;же является приложением XML.</p>
<p><img src="images/ex.jpg" alt="Картинка" /></p>
</div>
</div>
<NOINDEX>
<div class="footer">
<div class="downMenu">
<div style="padding-top:7px; padding-bottom: 5px;">&copy;&nbsp;2009-2010 Examle</div>
<div>E-mail:&nbsp;<a href="mailto:mailbox@example.com">mailbox@example.com</a></div>
</div>
</div>
</NOINDEX>
</div>
</body>
</html>

Данный HTML -код отображается в браузере, как показано на рисунке 1:


Рисунок 1 – Пример отображения HTML-страницы

Замечание: В представленном HTML -коде используется CSS, о котором будет рассказано в следующем разделе. Разберем отдельные строки нашего HTML -кода.

Document Type Definition (DTD)

В первой строке объявляется Document Type Definition:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DTD (Document Type Definition, определение типа документа) – язык описания структуры SGML-документа.

Пояснение:

Пример очень простого XML DTD, описывающего список людей:

<!ELEMENT people_list (person*)>

<!ELEMENT person (name, birthdate?)>

<!ELEMENT name (#PCDATA) >

<!ELEMENT birthdate (#PCDATA) >

Начиная с первой строки:

1. Элемент <people_list> содержит любое число элементов <person>. Знак <*> означает, что возможно 0, 1 или более элементов <person> внутри элемента <people_list>.

2. Элемент <person> содержит элементы <name>, <birthdate>. Знак <?> означает, что элемент необязателен. Элемент <name> не содержит <?>, что означает, что элемент <person> обязательно должен содержать элемент <name>.

3. Элемент <name> содержит данные.

4. Элемент <birthdate> содержит данные.

Пример XML-документа, использующего этот DTD:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE people_list SYSTEM "example.dtd">

<people_list>

<person>

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

<birthdate>22.03.1978</birthdate>

</person>

</people_list>

Сейчас идет отказ от использования DTD в XML-технологии по ряду причин:

1. Используется отличный от XML синтаксис.

2. Отсутствует типизация узлов.

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

На смену DTD пришел стандарт консорциума W3C XML Schema.

 

В примере !DOCTYPE предназначен для указания типа текущего документа – DTD.

Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер "не путался" и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы. В таблице 1 приведены основные типы документов с их описанием.

Таблица 1. Основные виды DOCTYPE
DOCTYPE Описание
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Строгий синтаксис HTML – не содержит элементов, помеченных как "устаревшие" или "не одобряемые"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Переходный синтаксис HTML –содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> В HTML-документе применяются фреймы – аналогичен переходному, но содержит также теги для создания наборов фреймов
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Строгий синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Переходный синтаксис XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Документ написан на XHTML и содержит фреймы.
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">  
<!DOCTYPE html> HTML5

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

Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается по-разному при использовании <!DOCTYPE> и без него. Чтобы не произошло подобных ситуаций, необходимо всегда добавлять этот тег в начало документа.

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

В строке 2 находится тег <HTML>, определяющий начало HTML -файла, внутри него хранится заголовок ( <HEAD> ) и тело документа ( <BODY> ). В примере тег <HTML> закрывается на строке 73.

Заголовок документа , как еще называют блок <HEAD>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице. В примере заголовок открывается на строке 3 и закрывается на строке 15.

<head>

<!-- Этот раздел предназначен для заголовка страницы и технической информации. -->

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

<meta http-equiv="Content-Language" content="ru"/>

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

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

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

<title>Тестовая страница</title>

<link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" />

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

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

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

</head>

Как показано в примере, некоторый текст можно скрыть от показа в браузере, сделав его комментарием ( строка 4 ). Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрываемую информацию. Комментарии начинаются тегом <!-- и заканчиваются тегом -->. Все, что находится между этими тегами отображаться на веб-странице не будет.

Метатеги

На строках 4-9 находятся метатеги.

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

<meta http-equiv="Content-Language" content="ru"/>

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

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

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

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

Разрешается использовать более чем один метатег, все они размещаются в контейнере <HEAD>. Как правило, параметры любого метатега сводятся к парам "имя=значение", которые определяются аргументами content, name или http-equiv. Метатеги имеют следующие параметры:

  • сontent – устанавливает значение параметра, заданного с помощью name или http-equiv ;
  • http-equiv –браузеры преобразовывают значение параметра http-equiv, заданное с помощью content, в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера.

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

    • сontent-type – тип кодировки документа;
    • expires – устанавливает дату и время, после которой информация в документе будет считаться устаревшей;
    • pragma – способ кэширования документа;
    • refresh – загрузить другой документ в текущее окно браузера.
  • name – устанавливает идентификатор метатега для пары "имя=значение". Одновременно использовать параметры name и http-equiv не допускается.

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

    • author – имя автора документа;
    • description – описание текущего документа;
    • keywords - список ключевых слов, встречающихся на странице.

Соответственно строка в примере:

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

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

Строка

<meta http-equiv="Content-Language" content="ru"/>

определяет язык кодировки документа.

Строка

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

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

Строка

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

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

Строка

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

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

В HTML5 применяются упрощенные определения некоторых мета-мегов, например:

<meta charset="UTF-8" />

Заголовок страницы

Тег <TITLE> (строка 10) используется для отображения строки текста в левом верхнем углу окна браузера. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик:


Рисунок 2 – Заголовок страницы

Link

Строки 11-13 содержат тег <LINK>.

<link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" />

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

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

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

Параметры:

  • href – путь к файлу, на который делается ссылка (URL), в качестве значения принимается полный или относительный путь к файлу;
  • rel – параметр rel определяет отношения между текущим документом и файлом, на который делается ссылка, чтобы браузер знал, как использовать подключаемый документ. Аргументы:
    • stylesheet – определяет, что подключаемый файл хранит таблицу стилей (CSS);
  • application/rss+xml – файл в формате XML для описания ленты новостей, анонсов статей.
  • type – сообщает браузеру, какой MIME-тип данных используется для внешнего документа. Как правило, применяется для того, чтобы указать, что подключаемый файл содержит CSS.

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

  • media – определяет устройство, для которого следует применять стилевое оформление. Это позволяет сделать разный стиль для отображения документа на экране монитора и при его печати. Допускается писать несколько аргументов через запятую. Аргументы:
    • all – все устройства;
    • screen (значение по умолчанию) – экран монитора;
    • print – печатающее устройство вроде принтера;
    • projection – проектор;
    • braille – устройства, основанные на системе Брайля, которые предназначены для слепых людей;
    • speech – речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.

Соответственно строка

<link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" />

определяет ссылку на значок нашей страницы:


Рисунок 3 – Значок страницы

Строки

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

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

определяют подключаемые файлы, содержащие CSS.

В HTML5 указанные строки определяются следующим образом:

<link href="css/style.css" rel="stylesheet"/>

<link href="css/fonts.css" rel="stylesheet"/>

Script

Строка 14 содержит тег <SCRIPT>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

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

<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.

В нашем примере строка

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

указывает на использование Javascript-скрипта из внешнего файла.

В HTML5 отсутствует параметр language, добавлены параметры charset и параметр async, который определяет, что скрипт выполняется асинхронно. Допускается использование только параметра src.

Тело документа

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

В примере тело документа открывается на строке 16 и закрывается на строке 72.

DIV

На строке 17 (и еще в нескольких местах) находится тег <DIV>.

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

Cодержимое тега <DIV> всегда начинается с новой строки. После него также добавляется перенос строки.

Параметры:

  • align –задает выравнивание содержимого тега <DIV>. Аргументы:
    • center – выравнивание текста по центру;
    • left (значение по умолчанию) – выравнивание текста по левому краю;
    • right – выравнивание текста по правому краю;
    • justify – выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю.
  • title – добавляет поясняющий текст к контейнеру <DIV> в виде всплывающей подсказки, которая отображается, когда курсор мыши задерживается на содержимом. В качестве аргумента принимает любую текстовую строку. Строка должна заключаться в двойные или одинарные кавычки.

Таблица

На строке 21 находится тег <TABLE>.

Для добавления таблицы на веб-страницу используется тег -контейнер <TABLE>. Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений. Однако, с появлением тега <DIV> более удобным и эффективным с точки зрения читаемости и объема кода является верстка макетов страниц именно блоками.

Для добавления строк используется тег <TR>. Чтобы разделить строки на колонки применяются теги <TD> и <TH>. Разница между этими тегами следующая. Тег <TH> предназначен для создания заголовков, содержимое такой ячейки обозначается жирным начертанием и выравнивается по центру. В остальном, действуют эти теги одинаково.

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

Чтобы понимать, что можно ожидать от таблиц, следует знать их явные и неявные особенности, которые перечислены далее:

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

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

Таблица 2. Параметры тега <table>
Свойство Значение Описание
align left right center Выравнивание таблицы.
background Гиперссылка Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы.
bgcolor Код или название цвета Цвет фона таблицы.
border Число Толщина рамки в пикселах.
cellpadding Число Расстояние между ячейкой и ее содержимым.
cellspacing Число Дистанция между ячейками.
cols Число Задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению.
nowrap   Запрещает переносы строк в тексте.
frame void above below lhs rhs hsides vsides box Задание типа рамки таблицы
rules all groups cols none rows Определяет, где рисовать границы между ячейками.
width Число или проценты Минимальная ширина таблицы, можно задавать в пикселах или процентах.

Заголовки

На строке 24 (а также 57) находится тег заголовка <H1> ( <H2> ).

Заголовки выполняют важную функцию на веб-странице:

  • они показывают важность раздела, к которому относятся, т.е. чем больше заголовок, тем более он значимый;
  • с помощью различных заголовков легко регулировать размер текста, т.е. чем выше уровень заголовка, тем больше размер шрифта (самым верхним уровнем является уровень 1 ( <H1> ), а самым нижним – уровень 6 ( <H6> ));
  • поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка.

Синтаксис создания заголовков следующий.

<h1>Заголовок первого уровня</h1>

<h2>Заголовок второго уровня</h2>

<h3>Заголовок третьего уровня</h3>

<h4>Заголовок четвертого уровня</h4>

<h5>Заголовок пятого уровня</h5>

<h6>Заголовок шестого уровня</h6>

Как правило, на веб-странице применяют заголовки с первого по третий уровень, их вполне достаточно. Редко когда приходится использовать заголовки более низкого уровня.

Ссылки

На строке 25 (а также в других местах) находится тег ссылки <A>.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега <A>, который имеет единственный обязательный параметр href. В качестве значения используется адрес документа (URL).

Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Начинаются они с указания протокола передачи данных. Так, для веб-страниц это обычно HTTP, соответственно, абсолютные ссылки начинаются с ключевого слова http://.

Относительные ссылки, как следует из их названия, построены относительно текущего документа или адреса. Примерами относительных ссылок могут служить:

/

/demo/

/images/pic.gif

../help/index.html

manual/info.html

Иногда можно встретить в адресе ссылки путь в виде ./file/doc.html. Точка с косой чертой означает, что отсчет ведется от текущей папки. Подобная запись избыточна и ее можно сократить до file/doc.html.

 

Списки

На строке 47 начинается маркированный список.

<ul>

<li>

<span>Общее описание</span>

</li>

<li>

<a href="advantages.html" title="Преимущества">Преимущества</a>

</li>

</ul>

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

Для установки маркированного списка используются теги <UL> и <LI>.

Для выбора типа маркера используется параметр type="..." тега <UL>. Маркеры могут принимать один из трех видов:

  • круг (по умолчанию) – <ul type="disc"> ;
  • окружность – <ul type="circle"> ;
  • квадрат – <ul type="square">.

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

  • арабские цифры;
  • заглавные латинские буквы;
  • строчные латинские буквы;
  • заглавные римские цифры;
  • строчные римские цифры.

Абзацы

На строках 58-60 отображены абзацы.

Как правило, блоки текста разделяют между собой абзацами ( параграфами ). По умолчанию между параграфами существует небольшой вертикальный отступ, называемый отбивкой. Каждый абзац начинается с тега <p> и должен иметь необязательный закрывающий тег </p>.

Изображения

На строке 60 имеется тег <IMG>.

<p><img src="images/ex.jpg" alt="Картинка" /></p>

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

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

Как правило, в качестве формата графического файла выступает GIF и JPEG. Есть еще формат PNG, который также поддерживается браузерами при добавлении изображений и существует в двух ипостасях – PNG-8 и PNG-24.

Для изменения размеров изображения средствами HTML предусмотрены параметры width и height тега <IMG>.

Для создания альтернативного текста используется параметр alt тега <IMG>. Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением.

Другие элементы

Кроме элементов, в HTML -документах есть и сущности ( entities) – "специальные символы". Сущности начинаются с символа амперсанда и имеют вид &имя; или &#NNNN;, где NNNN – код символа в Юникоде в десятеричной системе счисления. Например, &copy; – знак авторского права ( ) (строка 66).

Тег <NOINDEX> (строка 18 и другие) — имя не входящего в официальную спецификацию тега языка гипертекстовой разметки веб-страниц HTML, предназначенного для включения в него частей веб-страниц, находящуюся между <noindex> и </noindex>, не предлагаемых к индексации поисковыми системами. Тег предложен российской компанией "Яндекс" в качестве альтернативы атрибуту nofollow (значение предназначено для поисковых систем: он указывает им на то, что гиперссылку, задаваемую тегом <A>, не следует никаким образом учитывать при индексировании данной страницы).

Тег <SPAN> (строка 49) предназначен для определения встроенных элементов документа. В отличие от блочных элементов, таких как <TABLE>, <P> или <DIV>, с помощью тега <SPAN> можно выделить часть информации внутри других тегов и установить для нее свой стиль.

В последних версиях HTML практически у каждого тега огромное число необязательных параметров – обычно не меньше 15. Приведем только основные параметры тегов.

Текстовые блоки

 








Не нашли, что искали? Воспользуйтесь поиском по сайту:



©2015 - 2024 stydopedia.ru Все материалы защищены законодательством РФ.