Руководство по программированию на HTML
Оглавление
Введение 2
Редакторы HTML 2
1. Первые HTML-документы 2
Обязательные теги 3
2. Форматирование текста и абзаца 5
Форматирование шрифта 6
Текст с отступом: <BLOCKQUOTE> ... </BLOCKQUOTE> 7
3. Списки в тексте 8
Ненумерованные списки: <UL> ... </UL> 8
Нумерованные списки: <OL> ... </OL> 8
Списки определений: <DL> ... </DL> 8
4. Гиперссылки 10
Изображения в HTML-документе 12
5. Атрибуты тегов <BODY> и <META> 13
МЕТА-инструкции 14
6. Таблицы 17
7. Формы 20
8. Фреймы 27
Упражнения на разработку WEB-страниц 33
Введение
Термин HTML (HyperText Markup Language) означает "язык разметки гипертекста". Для освоения языка HTML понадобятся две вещи:
-
Любой браузер, например, программа просмотра HTML-файлов (Internet Explorer).
-
Любой редактор неформатированных текстовых файлов (Notepad).
Редакторы html
В настоящее время широко используются два типа редакторов HTML:
-
Редакторы типа "что видишь, то и получишь" (Microsoft Front Page или Microsoft Word).
-
Редакторы собственно HTML-текстов (HomeSite, CuteHTML, HotDog). В процессе работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную, либо вызывая команды меню для вставки определенных элементов HTML.
1. Первые html-документы
HTML-документ — это текстовый файл с расширением *.html или *.htm.
Вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется тегом (по-английски — tag). Большинство HTML-тегов — парные, то есть на каждый открывающий тег вида <tag> есть закрывающий тег вида </tag> с тем же именем, но с добавлением "/".
Теги можно вводить как большими, так и маленькими буквами. Например, теги <body>, <BODY> и <Body> будут восприняты браузером одинаково.
Многие теги, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущий тег.
Обязательные теги
<html> ... </html>
Тег <html> должен открывать HTML-документ. Аналогично, тег </html> должен завершать HTML-документ.
<head> ... </head>
Эта пара тегов указывает на начало и конец заголовка документа.
<title> ... </title>
Все, что находится между тегами <title> и </title>, толкуется браузером как название документа. Браузер показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.
<body> ... </body>
Эта пара тегов указывает на начало и конец тела HTML-документа.
<H1> ... </H1> — <H6> ... </H6>
Теги вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.
<P> ... </P>
Такая пара тегов описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.
Пример 1
<html>
<head>
<title>
Пример 1
</title>
</head>
<body>
<H1>
Привет!
</H1>
<P>
Это простейший пример HTML-документа.
</P>
</body>
</html>
Для удобства чтения введены дополнительные отступы, однако в HTML это совсем не обязательно. Браузеры игнорируют символы конца строки и пробелы в HTML-файлах. Поэтому пример вполне мог бы выглядеть и вот так:
<html>
<head>
<title>Пример 1</title>
</head>
<body>
<H1>Привет!</H1>
<P>Это простейший пример HTML-документа.</P>
</body>
</html>
Теги <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например:
<H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1>
или
<P ALIGN=RIGHT>Выравнивание по правому краю</P>
Пример 2
<html>
<head>
<title>Пример 2</title>
</head>
<body>
<H1 ALIGN=CENTER>Привет!</H1>
<H2>Это чуть более сложный пример HTML-документа</H2>
<P>Теперь мы знаем, что абзац можно выравнивать не только влево, </P>
<P ALIGN=CENTER>но и по центру</P>
<P ALIGN=RIGHT>или по правому краю.</P>
</body>
</html>