HTML

Г ЛАВА 1
Основы HTML.
Создаем дизайн сайта
1.1. Основные понятия

<i>Текст</i>
<meta http-equiv="Content-Type" content="text/html; charset=windows-

1251">
<p><i>Текст</i></p>
<p><i>Текст</p></i>
1.2. Первый HTML-документ

Листинг 1.1. Первый HTML-документ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Заголовок страницы</title>
1251">
</head>
<body>
<p>
<strong>Этот текст выделен полужирным шрифтом</strong>
</p>
6Глава 1
</body>
</html>
<title>Моя первая Web-страница</title>
1.3. Структура документа

Листинг 1.2. Структура HTML-документа
<!DOCTYPE> 

<html>
<head>

</head>
<body>

</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">
Основы HTML. Создаем дизайн сайта 7
1.3.1. Раздел HEAD. Техническая информация

о документе
<meta name="description" content="Описание содержимого страницы">

<meta name="keywords" content="Ключевые слова через запятую">
<meta name="description" lang="ru" content="Описание содержимого

страницы">
<meta name="description" lang="en" content="Description">
<meta name="keywords" lang="ru" content="Ключевые слова через запятую">
<meta name="keywords" lang="en" content="Keywords">
<meta name="robots" content="<Индексация>, <Переход по ссылкам>">
<meta name="robots" content="index, follow">
<meta name="robots" content="index, nofollow">
<meta name="robots" content="noindex, nofollow">

1251">
<meta http-equiv="refresh" content="30">
<meta http-equiv="refresh" content="0; url=http://mail.ru/">

8Глава 1
1.3.2. Раздел BODY. Основная часть документа

<body>
<p>Текст документа</p>
<div>Текст документа</div>
</body>

<html>
<head>
1251">
</head>
<body alink="#FF0000" link="#000000" vlink="#000080" text="#000000">
Текст документа
</body>
</html>
1.4. Форматирование отдельных символов

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

в результатах, выдаваемых поисковым порталом.
1.4.1. Выделение фрагментов текста

<b>Полужирный шрифт</b>
<strong>Полужирный шрифт</strong>
<i>Текст, выделенный курсивом</i>
<em>Текст, выделенный курсивом</em>

<u>Подчеркнутый текст</u>
<strike>Перечеркнутый текст</strike>
<s>Перечеркнутый текст</s>
1.4.2. Создание нижних и верхних индексов

Формула воды H<sub>2</sub>O
Единица измерения площади — м<sup>2</sup>
1.4.3. Вывод текста заданным шрифтом

<font face="Verdana">Текст</font>
<font size="4">Текст</font>
<font size="+1">Текст</font>
<font size="-1">Текст</font>
<font color="#FF0000">Текст</font>
<font color="red">Текст</font>
Текст <big>большего</big> размера
Текст <small>меньшего</small> размера
<tt>Моноширинный шрифт</tt>
Глава 1
10
1.5. Форматирование документа
1.5.1. Тег комментария


1.5.2. Перевод строки

Строка1<br>
Строка2<br>
Строка3<br>
<pre>
Строка1
Строка2
Строка3
</pre>
1.5.3. Горизонтальная линия

<hr size="5">
<hr size="5" width="100">

<hr size="5" width="100%">
<hr size="2" width="200" color="red" align="center">
<hr size="2" width="200" color="red" align="left">
<hr size="2" width="200" color="red" align="right">

<hr size="2" width="200" align="center" noshade>
1.5.4. Заголовки
<h1>Самый крупный заголовок</h1>
<h6>Самый мелкий заголовок</h6>
<h1 align="center">Заголовок первого уровня с выравниванием по

центру</h1>
<h2 align="left">Заголовок второго уровня с выравниванием по

левому краю</h2>
<h6 align="right">Самый мелкий заголовок с выравниванием по

правому краю</h6>
1.5.5. Разделение на абзацы

<p align="center">Абзац с выравниванием по центру</p>
<p align="left">Абзац с выравниванием по левому краю</p>
<p align="right">Абзац с выравниванием по правому краю</p>
<p align="justify">Абзац с выравниванием по ширине</p>

Глава 1
12
1.6. Списки
1.6.1. Маркированные списки
Листинг 1.3. Маркированный список
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
</ul>
<ul type="disc">
</ul>
<ul type="circle">
</ul>
<ul type="square">
</ul>
1.6.2. Нумерованные списки
Листинг 1.4. Нумерованный список
<ol>
</ol>
<ol type="A">
</ol>
<ol type="a">
</ol>
<ol type="I">
</ol>
<ol type="i">
</ol>
<ol type="1">
</ol>
<ol type="1" start="5">

</ol>
Глава 1
14
<ol type="1">
<li value="5">Второй пункт</li>
<li>Третий пункт</li>
</ol>
1.6.3. Списки определений
Листинг 1.5. Списки определений

<html>
<head>
<title>Списки определений</title>
1251">
</head>
<body>
<dl>
<dt>HTML (HyperText Markup Language)</dt>
<dd>
Язык разметки документа, описывающий форму отображения
информации на экране компьютера
</dd>
<dt>CSS (Cascading Style Sheets)</dt>
<dd>Каскадные таблицы стилей</dd>
</dl>
</body>
</html>
1.7. Графика
1.7.1. Изображение на Web-странице

<img src="foto.gif" alt="Текст подсказки">
<img src="http://www.mysite.ru/foto.gif" alt="Текст подсказки">
<img src="foto.gif" alt="Текст подсказки">
<img src="foto.gif" width="480" alt="Текст подсказки">
<img src="foto.gif" width="480" height="60" alt="Подсказка">
<img src="foto.gif" border="0" alt="Текст подсказки">
<p><img src="foto.gif" align="left"

alt="Подсказка">Текст</p>
<p><img src="foto.gif" align="right"

<p><img src="foto.gif" align="top" alt="Подсказка">Текст</p>
<p><img src="foto.gif" align="bottom"

<p><img src="foto.gif" align="middle"

<p>
<img src="foto.gif" align="left" hspace="20"
Глава 1
16
alt="Подсказка">Текст
</p>
<p>
<img src="foto.gif" align="left" vspace="20"
alt="Подсказка">Текст
</p>
1.7.2. Изображение в качестве фона

<body background="foto.gif" bgcolor="gray">Тело документа</body>
1.8. Гиперссылки
1.8.1. Внешние гиперссылки

<a href="http://www.mysite.ru/file.html">Текст ссылки</a>
<a href="http://www.mysite.ru/file.html">
<img src="http://www.mysite.ru/foto.gif" alt="Подсказка"></a>
<a href="index.php?id=5&name=Nik">Текст ссылки</a>
Относительный URL-адрес
<a href="file2.html">Текст ссылки</a>
<a href="folder3/file2.html">Текст ссылки</a>
<a href="../file2.html">Текст ссылки</a>

<a href="../../file2.html">Текст ссылки</a>
<a href="http://www.mysite.ru/file.html" target="_blank">Ссылка</a>
1.8.2. Внутренние гиперссылки

<a href="#chapter1">Глава 1</a>
<a name="chapter1"></a>
<a href="http://www.mysite.ru/file.html#chapter6">Текст</a>
Листинг 1.6. Структура документа с внутренними ссылками

<html>
<head>
<title>Создание внутренних ссылок</title>
1251">
</head>
<body>
<h1>Название документа</h1>
<h2>Оглавление</h2>
<ul>
<li><a href="#chapter1">Глава 1</a></li>
</ul>
<h2><a name="chapter1"></a>Глава 1</h2>
<p>Содержание главы 1</p>
Глава 1
18

</body>
</html>
1.8.3. Гиперссылки
на адрес электронной почты
<a href="mailto:mail@mysite.ru">Текст</a>
1.9. Таблицы
Листинг 1.7. Структура HTML-таблиц
<table border="1" width="200">

<caption>Заголовок таблицы</caption>
<tbody>
<tr>
<td align="center">1</td>
</tr>
<tr>
</tr>
</tbody>
</table>
1.9.1. Вставка таблицы в документ

<table>
<table border="0">
<table border="5">
<table cellspacing="0">
<table cellpadding="2">
<table width="200">
<table width="100%">
<table align="left">
<table align="right">
<table align="center">
<table bgcolor="silver">
<table bgcolor="#C0C0C0">
1.9.2. Заголовок таблицы

<caption align="top">Заголовок таблицы</caption>
<caption align="bottom">Заголовок таблицы</caption>
1.9.3. Строки таблицы

<tr align="left">
<tr align="right">
Глава 1
20
<tr align="center">
<tr align="justify">
<tr valign="top">
<tr valign="middle">
<tr valign="bottom">
<tr valign="baseline">
1.9.4. Ячейки таблицы
Листинг 1.8. Объединение ячеек по горизонтали

<tbody>
<tr>
<td align="center" colspan="2">1 и 2 объединены</td>
</tr>
<tr>
</tr>
</tbody>
</table>
Листинг 1.9. Объединение ячеек по вертикали

<tbody>
<tr>
<td align="center" rowspan="2">1 и 3 объединены</td>
</tr>
<tr>
</tr>
</tbody>
</table>
Листинг 1.10. Выделение ячеек таблицы

<html>
<head>
<title>Выделение ячеек таблицы</title>
1251">
</head>
<body>
<thead>
<tr>
<th>Марка</th>
<th>Цвет</th>
<th>Год выпуска</th>
</tr>
</thead>
<tbody>
<tr>
<td>ВАЗ-2109</td>
Глава 1
22
<td>Красный</td>
<td>2008</td>
</tr>
<tr>
<td>Москвич-412</td>
<td>Белый</td>
<td>1978</td>
</tr>
</tbody>
</table>
</body>
</html>
1.10. Фреймы
1.10.1. Разделение окна Web-браузера

на несколько областей
Листинг 1.11. HTML-документ, содержащий заголовок (doc1.html)

<html>
<head>
<title>Заголовок</title>
1251">
</head>
<body>
<h1>Заголовок</h1>
</body>
</html>
Листинг 1.12. HTML-документ, содержащий панель навигации (doc2.html)

<html>
<head>
<title>Панель навигации</title>
1251">
</head>
<body>
<ul>
<li><a href="chapter1.html" target="chapter">Глава 1</a></li>
</ul>
</body>
</html>
Листинг 1.13. HTML-документ, в котором находится основное содержание

главы 1 (chapter1.html)

<html>
<head>
<title>Глава 1</title>
1251">
</head>
<body>
<h1>Глава 1</h1>
</body>
</html>
Листинг 1.14. HTML-документ, в котором находится основное содержание

главы 2 (chapter2.html)

<html>
<head>
Глава 1
24
<title>Глава 2</title>
1251">
</head>
<body>
<h1>Глава 2</h1>
</body>
</html>
Листинг 1.15. HTML-документ, описывающий фреймовую структуру (test.html)

<html>
<head>
<title>Пример использования фреймов</title>
1251">
</head>
<frameset rows="100, *">
<frame src="doc1.html" scrolling="no">
<frameset cols="20%, 80%">
<frame src="doc2.html">
<frame src="chapter1.html" name="chapter">
</frameset>
<noframes>
<p>Ваш Web-браузер не отображает фреймы</p>
</noframes>
</frameset>
</html>
1.10.2. Структура HTML-документа,

содержащего фреймы
Листинг 1.16. Структура HTML-документа с фреймами

<html>
<head>
1251">
</head>
<frame>
<frame>
<frame>
</frameset>
<noframes>
</noframes>
</frameset>
</html>

1.10.3. Описание фреймовой структуры

1.10.4. Описание отдельных областей

<frame src="doc2.html">

Глава 1
26
<frame src="chapter1.html" name="chapter" scrolling="auto">
<frame src="chapter1.html" name="chapter" scrolling="yes">
<frame src="chapter1.html" name="chapter" scrolling="no">
<frame src="chapter1.html" name="chapter" marginwidth="5">
<frame src="chapter1.html" name="chapter" marginwidth="5"

marginheight="5">
<frame src="chapter1.html" name="chapter" frameborder="1">
<frame src="chapter1.html" name="chapter" frameborder="0">
<frame src="doc1.html" scrolling="no" noresize>
1.10.5. Тег <noframes>

<noframes>
</noframes>
1.10.6. Загрузка документа в определенный фрейм

<a href="file1.html" target="_blank">Текст ссылки</a>
<a href="file1.html" target="_self">Текст ссылки</a>

<a href="file1.html" target="_top">Текст ссылки</a>
<a href="file1.html" target="_parent">Текст ссылки</a>
<a href="file1.html" target="chapter">Текст ссылки</a>
1.10.7. Тег <iframe>.

Добавление фрейма в обычный документ
<iframe src="http://www.mysite.ru/doc2.html">
<iframe src="doc2.html">
<iframe src="chapter1.html" name="chapter">
<iframe src="chapter1.html" name="chapter" scrolling="auto">
<iframe src="chapter1.html" name="chapter" scrolling="yes">
<iframe src="chapter1.html" name="chapter" scrolling="no">
<iframe src="chapter1.html" name="chapter" marginwidth="5"

marginheight="5">
Глава 1
28
<iframe src="chapter1.html" name="chapter" frameborder="1">
<iframe src="chapter1.html" name="chapter" frameborder="0">
<iframe src="chapter1.html" name="chapter" width="200"

height="200">
<iframe src="chapter1.html" name="chapter" align="left">
<iframe src="chapter1.html" name="chapter" align="right">
<iframe src="chapter1.html" name="chapter" align="top">
<iframe src="chapter1.html" name="chapter" align="middle">
<iframe src="chapter1.html" name="chapter" align="bottom">
Листинг 1.17. Применение плавающих фреймов

<html>
<head>
<title>Применение плавающих фреймов</title>
1251">
</head>
<body>
<h1 align="center">Название документа</h1>
<iframe src="chapter1.html" name="chapter" align="right" width="700"

height="400">
</iframe>
<ul>
</ul>
</body>
</html>
1.11. Карты-изображения
1.11.1. Карта-изображение как панель навигации
Листинг 1.18. Применение карт-изображений

<html>
<head>
<title>Применение карт-изображений</title>
1251">
</head>
<body>
<h1 align="center">Название документа</h1>
<iframe src="chapter1.html" name="chapter" align="right" width="700"
height="400">
</iframe>
<img src="foto.gif" alt="Подсказка" width="120" height="240"
border="1"
usemap="#karta">
<map name="karta">
Глава 1
30
<area shape="rect" coords="0,0,120,120" href="chapter1.html"

target="chapter" alt="Глава 1">
<area shape="default" alt="" nohref>
</map>
</body>
</html>
1.11.2. Структура карт-изображений
Листинг 1.19. Структура карт-изображений


<img src="foto.gif" alt="Подсказка" width="120" height="240" border="1"
usemap="#karta">


<map name="karta">
<area shape="default" alt="" nohref>
</map>

1.11.3. Тег <map>
1.11.4. Описание активной области

на карте-изображении
<area shape="rect" alt="Подсказка">
<area shape="circle" alt="Подсказка">

<area shape="poly" alt="Подсказка">
<area shape="default" alt="Подсказка">
<area shape="rect" coords="x1, y1, x2, y2" alt="Подсказка">
<area shape="rect" coords="0, 0, 120, 120" alt="Подсказка">
<area shape="circle" coords="x1, y1, r1" alt="Подсказка">
<area shape="circle" coords="60, 60, 30" alt="Подсказка">
<area shape="poly" coords="x1, y1, x2, y2, x3, y3" alt="">
<area shape="poly" coords="10, 100, 60, 10, 100, 100"

alt="">
<area shape="circle" coords="60, 60, 30" alt="Подсказка"

href="http://www.mysite.ru/chapter1.html">
<area shape="circle" coords="60, 60, 30" alt="Подсказка"
href="chapter1.html">
<area shape="circle" coords="60, 120, 60" alt=" Подсказка"

nohref>
Глава 1
32
<area shape="rect" coords="0, 0, 240, 240" alt="Подсказка"

href="http://www.mysite.ru/chapter1.html">
<area shape="rect" coords="0, 0, 240, 240" href="chapter1.html"

alt="Всплывающая подсказка">
<area shape="rect" coords="0, 0, 240, 240" href="chapter1.html"

target="_blank" alt="Подсказка">
1.12. Формы
1.12.1. Создание формы

для регистрации сайта
Листинг 1.20. Пример использования форм

<html>
<head>
<title>Пример использования форм</title>
1251">
</head>
<body>
<h1>Пример формы регистрации сайта</h1>
<form action="file.php" method="POST" enctype="multipart/form-data">
<div>
Логин:<br>
<input type="text" name="pole1"><br>
Пароль:<br>
<input type="password" name="pole2" value="Пароль"><br>
URL-адрес сайта:<br>
<input type="text" name="pole3" value="http://" size="20"><br>
Название сайта:<br>
<input type="text" name="pole4" size="20"><br>
Описание сайта:<br>
<textarea name="pole5" rows="10" cols="15"></textarea><br>
Тема сайта:<br>
<select name="pole6">
<option value="0" selected>Тема не выбрана</option>
<option value="1">Тема1</option>
</select><br>
Баннер 88*31:<br>
<input type="file" name="pole7" size="20"><br><br>
<input type="reset" value="Очистить">
<input type="submit" value="Отправить">
</div>
</form>
</body>
</html>
1.12.2. Структура документа с формами

<form action="file.php">
<input type="text">
<textarea></textarea>
<select>
<option></option>
</select>
<input type="file">
<input type="reset">
<input type="submit">
</form>
1.12.3. Добавление формы в документ

<form action="file.php">
<form action="http://www.mysite.ru/file.php">
Глава 1
34
<form action="http://www.mysite.ru/file.php" method="GET">
<form action="http://www.mysite.ru/file.php" method="POST">
<form action="http://www.mysite.ru/file.php" method="POST"

enctype="application/x-www-form-urlencoded">

enctype="multipart/form-data">
<form action="file.php" name="form1">

enctype="multipart/form-data" target="_blank">
1.12.4. Описание элементов управления

<input type="text">
<input type="password">
<input type="file">
<input type="checkbox">
<input type="radio">
<input type="reset">
<input type="submit">
<input type="button">
<input type="hidden">
<input type="text" name="pole1">
<input type="text" name="pole1" disabled>
Текстовое поле и поле ввода пароля

<input type="text" name="pole1" value="http://">
<input type="text" name="pole1" value="http://" maxlength="100">
<input type="text" name="pole1" value="http://" maxlength="100"

size="20">
<input type="text" name="pole1" readonly>
Кнопки Сброс, Отправить и командная кнопка

<input type="submit" value="Отправить">
Глава 1
36
Скрытое поле hidden

<input type="hidden" name="pole1" value="1">
Поле для установки флажка

<input type="checkbox" name="check1" value="yes">Текст
<input type="checkbox" name="check1" value="yes" checked>Текст
<input type="checkbox" name="check[]" value="1">Текст 1

Элемент-переключатель
<input type="radio" name="radio1" value="yes">Текст
<input type="radio" name="radio1" value="yes" checked>Текст
Укажите ваш пол:<br>

<input type="radio" name="radio1" value="male" checked>Мужской
<input type="radio" name="radio1" value="female">Женский
Текстовая область
<textarea>
Текст по умолчанию
</textarea>
<textarea name="pole2">
</textarea>
<textarea name="pole2" cols="15">

</textarea>
<textarea name="pole2" cols="15" rows="10">

</textarea>
Список с предопределенными значениями

<select>
<option>Элемент1</option>
</select>
<select name="select1">
<select name="select1" size="3">
<select name="select[]" size="3" multiple>
<option value="val1">Элемент1</option>
</select>
<option value="val1">Элемент1</option>
<option selected>Элемент2</option>
</select>
Глава 1
38
<optgroup label="Отечественные">
<option value="1">ВАЗ</option>
<option value="2">ГАЗ</option>
<option value="3">Москвич</option>
</optgroup>
<optgroup label="Зарубежные">
<option value="4">BMW</option>
<option value="5">Opel</option>
<option value="6">Audi</option>
</optgroup>
</select>
1.12.5. Тег <label>

<label for="pass1">Пароль*:</label>
<input type="password" name="pass1" id="pass1">
<label>Пароль*:
</label>
<label accesskey="N">Пароль*:
</label>
Листинг 1.21. Пример формы регистрации пользователя

<html>
<head>
<title>Пример формы регистрации пользователя</title>

1251">
<style type="text/css">
body { /* Стиль для всего документа */
font-size: 10pt; /* Размер шрифта */
font-family: "Verdana", sans-serif; /* Название шрифта */
}
label { /* Стиль для всех элементов label */
display: inline-block; /* Тип блока */
width: 150px; /* Ширина */
vertical-align: top; /* Вертикальное выравнивание */
}
select { /* Стиль для всех списков */
border: 1px solid black; /* Определение стиля для границы */
}
input.pole { /* Стиль для элемента input имеющего класс pole */
}
textarea { /* Стиль для многострочного текстового поля */
height: 100px; /* Высота */
}
form div { /* Стиль для всех div, расположенных внутри form */
margin-bottom: 20px; /* Отступ блока снизу */
}
</style>
</head>
<body>
<h1>Пример формы регистрации пользователя</h1>
<form action="reg.php" method="POST" enctype="multipart/form-data">
<div><label for="login">Логин*:</label>
<input type="text" name="login" id="login" class="pole"></div>
<div><label for="pass1">Пароль*:</label>
<input type="password" name="pass1" id="pass1" class="pole"></div>
Глава 1
40
<div><label for="pass2">Повторите пароль*:</label>

<input type="password" name="pass2" id="pass2" class="pole"></div>
<div><label for="sex1">Пол*:</label>
Муж. <input type="radio" name="sex" id="sex1" value="1">
Жен. <input type="radio" name="sex" id="sex2" value="2"></div>
<div><label for="education">Образование*:</label>
<select id="education" name="education">
<option value=""></option>
<option value="1">Среднее</option>
<option value="2">Высшее</option>
</select></div>
<div><label for="comment">Комментарий*:</label>
<textarea id="comment" name="comment" cols="15"
rows="10"></textarea>
</div>
<div><label for="userfile">Ваше фото:</label>
<input type="file" name="userfile" id="userfile"></div>
<div><label for="rule">С правилами согласен*:</label>
<input type="checkbox" name="rule" id="rule" value="yes"></div>
<div>
<input type="submit" value="Отправить" style="margin-left: 150px;">
</div>
</form>
</body>
</html>
1.12.6. Группировка элементов формы

<fieldset>
<legend>Пол</legend>
Муж. <input type="radio" name="sex" value="1">
Жен. <input type="radio" name="sex" value="2">
</fieldset>
1.13. Теги <div> и <span>.

Группировка элементов страницы
Листинг 1.22. Теги <div> и <span>

<html>
<head>
<title>Теги <div> и <span></title>
1251">
<style type="text/css">
div { /* Стиль для всех тегов DIV */
color: green; /* Цвет шрифта */
font-family: "Arial"; /* Название шрифта */
padding: 5px; /* Размер внутренних отступов */
}
span { /* Стиль для всех тегов SPAN */
color: red; /* Цвет шрифта */
font-family: "Arial"; /* Название шрифта */
font-weight: bold; /* Жирность шрифта */
}
</style>
</head>
<body>
<div>
Элемент DIV занимает всю ширину родительского элемента
</div>
<p>
С помощью элемента <span>SPAN</span> можно отформатировать
<span>фрагмент</span> внутри абзаца
</p>
Глава 1
42
</body>
</html>
<div align="center">Элемент с выравниванием по центру</div>
<div align="left">Элемент с выравниванием по левому краю</div>
<div align="right">Элемент с выравниванием по правому краю</div>
<div align="justify">Элемент с выравниванием по ширине</div>
1.14. Отличия XHTML 1.0 от HTML 4.01

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<?xml version="1.0" encoding="windows-1251"?>
<script type="text/javascript">

</script>
<script type="text/javascript">
//<![CDATA[
var i = -10; if (i < 0) alert("Переменная i меньше нуля");
//]]>
</script>
Листинг 1.23. Пример использования языка XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Пример использования языка XHTML</title>
1251" />
</head>
<body>
<p>
<img src="foto.gif" alt="Альтернативный текст" />
Символ амперсанд внутри ссылки должен заменяться на HTML-
эквивалент.<br />
<a href="index.php?id=5&name=Nik">Текст ссылки</a>
</p>
<form action="index.php">
<div>
<input type="text" name="txt1" />
<input type="submit" value="Отправить" />
</div>
</form>
</body>
</html>
Глава 1
44
1.16. Специальный тег

в Web-браузере Internet Explorer
Листинг 1.24. Специальный тег в Web-браузере Internet Explorer

<html>
<head>
<title>Специальный тег в Web-браузере Internet Explorer</title>
1251">
</head>
<body>
<p>









Если вы видите эту надпись, то не используете Internet Explorer

</p>
</body>
</html>

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

Г ЛАВА 1

1.1. Основные понятия

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

1.2. Первый HTML-документ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<title>Моя первая Web-страница</title>

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

<!DOCTYPE>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

1.3.1. Раздел HEAD. Техническая информация

<meta name="description" content="Описание содержимого страницы">

<meta name="description" lang="ru" content="Описание содержимого

<meta name="robots" content="<Индексация>, <Переход по ссылкам>">

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

<meta name="robots" content="index, nofollow">

<meta name="robots" content="noindex, nofollow">

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

<meta http-equiv="refresh" content="30">

<meta http-equiv="refresh" content="0; url=http://mail.ru/">

1.3.2. Раздел BODY. Основная часть документа

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

1.4. Форматирование отдельных символов

Текст между тегами &lt;title&gt; и &lt;/title&gt; используется

1.4.1. Выделение фрагментов текста

<i>Текст, выделенный курсивом</i>

<em>Текст, выделенный курсивом</em>

1.4.2. Создание нижних и верхних индексов

Единица измерения площади — м<sup>2</sup>

1.4.3. Вывод текста заданным шрифтом

Текст <big>большего</big> размера

Текст <small>меньшего</small> размера

1.5. Форматирование документа

1.5.1. Тег комментария

1.5.2. Перевод строки

1.5.3. Горизонтальная линия

<hr size="5" width="100">

<hr size="2" width="200" color="red" align="center">

<hr size="2" width="200" color="red" align="left">

<hr size="2" width="200" color="red" align="right">

<hr size="2" width="200" align="center" noshade>

<h6>Самый мелкий заголовок</h6>

<h1 align="center">Заголовок первого уровня с выравниванием по

<h2 align="left">Заголовок второго уровня с выравниванием по

<h6 align="right">Самый мелкий заголовок с выравниванием по

1.5.5. Разделение на абзацы

<p align="left">Абзац с выравниванием по левому краю</p>

<p align="right">Абзац с выравниванием по правому краю</p>

<p align="justify">Абзац с выравниванием по ширине</p>

1.6.1. Маркированные списки

Листинг 1.3. Маркированный список

1.6.2. Нумерованные списки

Листинг 1.4. Нумерованный список

<ol type="1" start="5">

1.6.3. Списки определений

Листинг 1.5. Списки определений

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

1.7.1. Изображение на Web-странице

<img src="http://www.mysite.ru/foto.gif" alt="Текст подсказки">

<img src="foto.gif" alt="Текст подсказки">

<img src="foto.gif" width="480" alt="Текст подсказки">

<img src="foto.gif" width="480" height="60" alt="Подсказка">

<img src="foto.gif" border="0" alt="Текст подсказки">

Текст между тегами <title> и </title> используется

<a href="index.php?id=5&name=Nik">Текст ссылки</a>