- •1.6.3. Вложенные списки
- •1.7. Графика
- •1.7.1. Вставляем изображение в Web-страницу
- •1.8.3. Гиперссылки на адрес электронной почты
- •1.9. Таблицы
- •1.9.1. Вставляем таблицу в документ
- •1.9.2. Выводим заголовок таблицы
- •1.9.3. Описываем строку таблицы
- •1.9.4. Описываем каждую ячейку таблицы
- •1.9.5. Форматируем Web-страницу при помощи таблиц
- •1.10. Фреймы
- •1.10.1. Делим окно Web-браузера на несколько областей
- •1.10.2. Структура html-документа содержащего фреймы
- •1.10.3. Описываем фреймовую структуру
- •1.10.4. Описываем отдельную область
- •1.10.6. Загружаем документ в определенный фрейм
- •1.11. Карты-изображения
- •1.11.1. Создаем панель навигации при помощи карт-изображений
- •1.11.2. Структура карт-изображений
- •1.11.4. Описываем активную область на карте-изображении
- •1.12. Формы
- •1.12.1. Создаем форму для регистрации сайта
- •1.12.2. Структура документа с формами
- •1.12.3. Вставляем форму в документ
- •1.13.2. Создаем панель навигации
- •1.13.3. Создаем формы для ввода данных
Основы HTML. Создаем дизайн сайта
1.1. Основные понятия
<U>Подчеркнутый текст</U>
<FONT color="#FF0000" face="Verdana">Текст</FONT>
<FONT color="#FF0000" face="Verdana"><U>Подчеркнутый текст</U></FONT>
1.2. Создаем первый HTML-документ
Листинг 1.1. Первый HTML-документ
<HTML>
<HEAD>
<TITLE>Заголовок страницы</TITLE>
</HEAD>
<BODY>
<FONT color="#FF0000" face="Verdana"><U>Подчеркнутый текст</U></FONT>
</BODY>
</HTML>
<TITLE>Заголовок страницы</TITLE>
<TITLE>Моя первая Web-страница</TITLE>
1.3. Структура документа
Листинг 1.2. Структура HTML-документа
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
1.3.1. Раздел HEAD. Техническая информация о документе
<TITLE>Заголовок страницы</TITLE>
<META name="description" content="Описание содержимого страницы">
<META name="keywords" 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-1251">
<META http-equiv="refresh" content="30">
<META http-equiv="refresh" content="0" url="Новый URL-адрес">
1.3.2. Раздел BODY. Основная часть документа
<BODY bgcolor="#FFFFFF">"Тело" документа</BODY>
<BODY alink="#FF0000" link="#000000" vlink="#000080" text="#000000">
"Тело" документа
</BODY>
1.4. Форматирование отдельных символов
Текст между тэгами <TITLE> и </TITLE> используется в результатах выдаваемых поисковым порталом.
Текст между тэгами <TITLE> и </TITLE> используется в результатах выдаваемых поисковым порталом.
1.4.1. Выделение фрагментов текста
<B>Полужирный шрифт</B>
<STRONG>Полужирный шрифт</STRONG>
1.4.2. Вывод текста курсивом
<I>Текст, выделенный курсивом</I>
<EM>Текст, выделенный курсивом</EM>
1.4.3. Подчеркивание текста
<U>Подчеркнутый текст</U>
1.4.4. Перечеркивание текста
<STRIKE>Перечеркнутый текст</STRIKE>
<S>Перечеркнутый текст</S>
1.4.5. Создание нижних индексов
Формула воды H<SUB>2</SUB>O
1.4.6. Создание степеней
Единица измерения площади — m<SUP>2</SUP>
1.4.7. Вывод текста заданным шрифтом
<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.5. Форматирование документа
1.5.1. Тэг комментария
<!-- Текст -->
1.5.2. Перевод строки
Строка1<BR>
Строка2<BR>
Строка3<BR>
<PRE>
Строка1
Строка2
Строка3
</PRE>
1.5.3. Запрет перевода строки
<NOBR>Длинная строка</NOBR>
1.5.4. Горизонтальная линия
<HR size="5">
<HR size="5" width="100">
<HR size="5" width="100%">
<HR size="2" width="200" color="#FF0000">
<HR size="2" width="200" color="red">
<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.5. Заголовки
<H1>Самый крупный заголовок</H1>
<H6>Самый мелкий заголовок</H6>
<H1 align="center">Заголовок первого уровня с выравниванием по центру</H1>
<H2 align="left">Заголовок второго уровня с выравниванием по левому краю</H2>
<H6 align="right">Самый мелкий заголовок с выравниванием по правому краю</H6>
1.5.6. Разделение на абзацы
<P align="center">Абзац с выравниванием по центру</P>
<P align="left">Абзац с выравниванием по левому краю</P>
<P align="right">Абзац с выравниванием по правому краю</P>
<P align="justify">Абзац с выравниванием по ширине</P>
1.6. Списки
1.6.1. Маркированные списки
Листинг 1.3. Маркированный список
<UL>
<LI>Первая строка
<LI>Вторая строка
</UL>
<UL type="disk">
<LI>Первая строка
<LI>Вторая строка
</UL>
<UL type="circle">
<LI>Первая строка
<LI>Вторая строка
</UL>
<UL type="square">
<LI>Первая строка
<LI>Вторая строка
</UL>
1.6.2. Нумерованные списки
Листинг 1.4. Нумерованный список
<OL>
<LI>Первая строка
<LI>Вторая строка
</OL>
<OL type="A">
<LI>Первая строка
<LI>Вторая строка
</OL>
<OL type="a">
<LI>Первая строка
<LI>Вторая строка
</OL>
<OL type="I">
<LI>Первая строка
<LI>Вторая строка
</OL>
<OL type="i">
<LI>Первая строка
<LI>Вторая строка
</OL>
<OL type="1">
<LI>Первая строка
<LI>Вторая строка
</OL>
<OL type="1" start="5">
<LI>Первая строка
<LI>Вторая строка
</OL>
<OL type="1">
<LI>Первая строка
<LI value="5">Вторая строка
<LI>Третья строка
</OL>
1.6.3. Вложенные списки
Листинг 1.5. Вложенные списки
<OL type="1">
<LI>Первая строка
<OL type="a">
<LI>Вторая строка
<LI>Третья строка
</OL>
<LI>Четвертая строка
</OL>
1.7. Графика
1.7.1. Вставляем изображение в Web-страницу
<IMG src="foto.gif">
<IMG src="http://www.mysite.ru/foto.gif">
<IMG src="foto.gif" width="480">
<IMG src="foto.gif" width="480" height="60">
<IMG src="foto.gif" width="480" height="60" border="0">
<IMG src="foto.gif" width="480" height="60" border="0" alt="Текст подсказки">
<P><IMG src="foto.gif" align="left">Текст</P>
<P><IMG src="foto.gif" align="right">Текст</P>
<P><IMG src="foto.gif" align="top">Текст</P>
<P><IMG src="foto.gif" align="bottom">Текст</P>
<P><IMG src="foto.gif" align="middle">Текст</P>
<P><IMG src="foto.gif" align="left" hspace="20">Текст</P>
<P><IMG src="foto.gif" align="left" vspace="20">Текст</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"></A>
Абсолютный URL-адрес
http://www.mysite.ru/folder/file.html
http://www.mysite.ru/file.html
http://www.mysite.ru/
http://www.mysite.ru/folder/
Относительный 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="#charter1">Глава 1</A>
<A name="charter1"></A>
<A href="http://www.mysite.ru/file.html#charter6">Текст</A>
Листинг 1.6. Структура документа с внутренними ссылками
<HTML>
<HEAD>
<TITLE>Создание внутренних ссылок</TITLE>
</HEAD>
<BODY>
<H1 align="center">Название документа</H1>
<H2>Оглавление</H2>
<UL type="disk">
<LI><A href="#charter1">Глава 1</A>
<LI><A href="#charter2">Глава 2</A>
<LI><A href="#charter3">Глава 3</A>
<LI><A href="#charter4">Глава 4</A>
</UL>
<BR>
<H2><A name="charter1">Глава 1</A></H2>
<P>Содержание Главы 1</P>
<H2><A name="charter2">Глава 2</A></H2>
<P>Содержание Главы 2</P>
<H2><A name="charter3">Глава 3</A></H2>
<P>Содержание Главы 3</P>
<H2><A name="charter4">Глава 4</A></H2>
<P>Содержание Главы 4</P>
</BODY>
</HTML>
1.8.3. Гиперссылки на адрес электронной почты
<A href="mailto:mail@mysite.ru">Текст</A>
1.9. Таблицы
Листинг 1.7. Структура HTML-таблиц
<TABLE border="1" align="center" width="200">
<CAPTION>Заголовок таблицы<CAPTION>
<TR>
<TD align="center">1</TD>
<TD align="center">2</TD>
</TR>
<TR>
<TD align="center">3</TD>
<TD align="center">4</TD>
</TD>
</TR>
</TABLE>
1.9.1. Вставляем таблицу в документ
<TABLE><!-- Здесь сетка не отображается -->
<TABLE border="0"><!-- Здесь сетка не отображается -->
<TABLE border="5"><!-- В этом случае сетка отображается, а толщина рамки вокруг таблицы равна 5 пикселам -->
<TABLE cellspacing="0">
<TABLE cellpadding="2">
<TABLE width="200">
<TABLE width="100%">
<TABLE height="200">
<TABLE height="100%">
<TABLE align="left">
<TABLE align="right">
<TABLE align="center">
<TABLE bgcolor="silver">
<TABLE bgcolor="#C0C0C0">
<TABLE background="foto.gif">
<TABLE background="http://www.mysite.ru/foto.gif">
<TABLE border="2" bordercolor="red">
<TABLE border="2" bordercolor="#FF0000">