Любой HTML или XHTML - документ состоит из четырех разделов:
<!DOCTYPE>
контейнера <html>
заголовка <head>
тела документа <body>
Любой HTML-документ начинается со строки, содержащей декларацию типа документа (DTD, document type declaration).
HTML 4.0 поддерживает три типа таких деклараций:
Документ строго соответствует стандарту HTML 4.0, т. е. не содержит ни морально устаревших элементов, ни фреймов:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Документ является переходным к стандарту HTML 4.0, т. е. может содержать морально устаревшие элементы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Документ содержит фреймы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Любой XHTML-документ также начинается со строки, содержащей декларацию типа документа:
XHTML 1.0 Strict
Используется в том случае, если в документе идет четкое разделение оформления и содержания.
При этом код веб-страницы содержит только теги разметки, а сам вид элементов задается через стили:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Transitional
Обычно применяется, когда правило разделения оформления и содержания выполняется не в полной мере.
В этом случае допускается в коде документа использовать теги физического проектирования
и лишь частично стили.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Frameset
Применяется, когда окно браузера делится на два или более фрейма:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Простейший HTML-документ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Заголовка страницы -->
</head>
<body>
<!-- Содержимое страницы -->
</body>
</html>
Сценарии JavaScript можно вставлять между тегами:
<head></head>
или
<body></body>
Простейший пример сценария:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Заголовок документа </title>
</head>
<body>
Пример сценария
<br />
<script type="text/javascript">
document.write("Hello World!");
</script>
<br />
Простой вывод текста
</body>
</html>
Можно текст сценария помесить во внешний файл, например jsfile1.js
Этот файл содержит следующее:
document.write("Hello World!");
а затем вызвать его из html - документа:
<script type="text/javascript" src="jsfile1.js">
</script>
Предыдущий пример изменится так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Заголовок документа </title>
</head>
<body>
Пример сценария
<br />
<script type="text/javascript" src="jsfile1.js">
</script>
<br />
Простой вывод текста
</body>
</html>
На самом деле все сценарии лучше выносить во внешние файлы.
Например усли поместить в html - документ сценарий javascript,
который содержит символы сравнения (меньше чем) x < y то будут проблемы
и страница не пройдет проверку т.к. символ < выглядит как начало нового тега.
Чтобы этого избежать нужно использовать раздел CDATA и закомментарить его:
<script type="text/javascript">
/*<![CDATA[*/
var x=5;
var y=10;
if (x < y) {
window.alert("x меньше, чем y");
}
/*]]>*/
</script>
т.е. раздел CDATA нужен, чтобы страница прошла проверку
а комментарии нужны, чтобы сценарий запускался.
Теперь наш пример будет выглядеть так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Заголовок документа </title>
</head>
<body>
Пример сценария
<br />
<script type="text/javascript">
/*<![CDATA[*/
var x=5;
var y=10;
if (x < y) {
window.alert("x меньше, чем y");
}
/*]]>*/
</script>
<br />
Использование сценария внутри html - документа
</body>
</html>
Для html 4.01 тип документа описывался так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/strict.dtd">
В html 5 все намного проще:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Заголовок документа </title>
<script>
alert("Hello World!")
</script>
</head>
<body>
<!-- Содержимое страницы -->
</body>
</html>
Пример html - документа, который содержит внешний скрипт, внутренний скрипт и таблицу стилей:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Заголовок документа </title>
<link href="../_css/title.css" rel="stylesheet">
<script src="../_js/jquery-1.6.3.min.js">
</script>
<script>
$(document).ready(function() {
$('body').hide().fadeIn(3000);
});
</script>
</head>
<body>
<!-- Содержимое страницы -->
</body>
</html>
<!DOCTYPE>
контейнера <html>
заголовка <head>
тела документа <body>
Любой HTML-документ начинается со строки, содержащей декларацию типа документа (DTD, document type declaration).
HTML 4.0 поддерживает три типа таких деклараций:
Документ строго соответствует стандарту HTML 4.0, т. е. не содержит ни морально устаревших элементов, ни фреймов:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Документ является переходным к стандарту HTML 4.0, т. е. может содержать морально устаревшие элементы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Документ содержит фреймы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Любой XHTML-документ также начинается со строки, содержащей декларацию типа документа:
XHTML 1.0 Strict
Используется в том случае, если в документе идет четкое разделение оформления и содержания.
При этом код веб-страницы содержит только теги разметки, а сам вид элементов задается через стили:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Transitional
Обычно применяется, когда правило разделения оформления и содержания выполняется не в полной мере.
В этом случае допускается в коде документа использовать теги физического проектирования
и лишь частично стили.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Frameset
Применяется, когда окно браузера делится на два или более фрейма:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Простейший HTML-документ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Заголовка страницы -->
</head>
<body>
<!-- Содержимое страницы -->
</body>
</html>
Сценарии JavaScript можно вставлять между тегами:
<head></head>
или
<body></body>
Простейший пример сценария:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Заголовок документа </title>
</head>
<body>
Пример сценария
<br />
<script type="text/javascript">
document.write("Hello World!");
</script>
<br />
Простой вывод текста
</body>
</html>
Можно текст сценария помесить во внешний файл, например jsfile1.js
Этот файл содержит следующее:
document.write("Hello World!");
а затем вызвать его из html - документа:
<script type="text/javascript" src="jsfile1.js">
</script>
Предыдущий пример изменится так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Заголовок документа </title>
</head>
<body>
Пример сценария
<br />
<script type="text/javascript" src="jsfile1.js">
</script>
<br />
Простой вывод текста
</body>
</html>
На самом деле все сценарии лучше выносить во внешние файлы.
Например усли поместить в html - документ сценарий javascript,
который содержит символы сравнения (меньше чем) x < y то будут проблемы
и страница не пройдет проверку т.к. символ < выглядит как начало нового тега.
Чтобы этого избежать нужно использовать раздел CDATA и закомментарить его:
<script type="text/javascript">
/*<![CDATA[*/
var x=5;
var y=10;
if (x < y) {
window.alert("x меньше, чем y");
}
/*]]>*/
</script>
т.е. раздел CDATA нужен, чтобы страница прошла проверку
а комментарии нужны, чтобы сценарий запускался.
Теперь наш пример будет выглядеть так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Заголовок документа </title>
</head>
<body>
Пример сценария
<br />
<script type="text/javascript">
/*<![CDATA[*/
var x=5;
var y=10;
if (x < y) {
window.alert("x меньше, чем y");
}
/*]]>*/
</script>
<br />
Использование сценария внутри html - документа
</body>
</html>
Для html 4.01 тип документа описывался так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/strict.dtd">
В html 5 все намного проще:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Заголовок документа </title>
<script>
alert("Hello World!")
</script>
</head>
<body>
<!-- Содержимое страницы -->
</body>
</html>
Пример html - документа, который содержит внешний скрипт, внутренний скрипт и таблицу стилей:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Заголовок документа </title>
<link href="../_css/title.css" rel="stylesheet">
<script src="../_js/jquery-1.6.3.min.js">
</script>
<script>
$(document).ready(function() {
$('body').hide().fadeIn(3000);
});
</script>
</head>
<body>
<!-- Содержимое страницы -->
</body>
</html>
