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 (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.</p>
|
| <p>HTML является приложением («частным случаем») SGML (стандартного обобщенного языка разметки) и соответствует международному стандарту ISO 8879. XHTML же является приложением 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;">© 2009-2010 Examle</div>
|
| <div>E-mail: <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 – код символа в Юникоде в десятеричной системе счисления. Например, © – знак авторского права ( ) (строка 66).
Тег <NOINDEX> (строка 18 и другие) — имя не входящего в официальную спецификацию тега языка гипертекстовой разметки веб-страниц HTML, предназначенного для включения в него частей веб-страниц, находящуюся между <noindex> и </noindex>, не предлагаемых к индексации поисковыми системами. Тег предложен российской компанией "Яндекс" в качестве альтернативы атрибуту nofollow (значение предназначено для поисковых систем: он указывает им на то, что гиперссылку, задаваемую тегом <A>, не следует никаким образом учитывать при индексировании данной страницы).
Тег <SPAN> (строка 49) предназначен для определения встроенных элементов документа. В отличие от блочных элементов, таких как <TABLE>, <P> или <DIV>, с помощью тега <SPAN> можно выделить часть информации внутри других тегов и установить для нее свой стиль.
В последних версиях HTML практически у каждого тега огромное число необязательных параметров – обычно не меньше 15. Приведем только основные параметры тегов.
Текстовые блоки
Не нашли, что искали? Воспользуйтесь поиском по сайту:
©2015 - 2024 stydopedia.ru Все материалы защищены законодательством РФ.
|