ТОП 10:

Создаем первый 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.2. Структура HTML-документа

<HTML>

 

<HEAD>

</HEAD>

 

<BODY>

</BODY>

 

</HTML>

Раздел 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-адрес">

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

<BODY bgcolor="#FFFFFF">"Тело" документа</BODY>

<BODY alink="#FF0000" link="#000000" vlink="#000080" text="#000000">

"Тело" документа

</BODY>

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

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

Текст между тэгами &lt;TITLE&gt; и &lt;/TITLE&gt; используется в результатах выдаваемых поисковым порталом.

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

<B>Полужирный шрифт</B>

<STRONG>Полужирный шрифт</STRONG>

Вывод текста курсивом

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

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

Подчеркивание текста

<U>Подчеркнутый текст</U>

Перечеркивание текста

<STRIKE>Перечеркнутый текст</STRIKE>

<S>Перечеркнутый текст</S>

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

Формула воды H<SUB>2</SUB>O

Создание степеней

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

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

<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<BR>

Строка2<BR>

Строка3<BR>

 

<PRE>

Строка1

Строка2

Строка3

</PRE>

Запрет перевода строки

<NOBR>Длинная строка</NOBR>

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

<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>

Заголовки

<H1>Самый крупный заголовок</H1>

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

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

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

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

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

<P align="center">Абзац с выравниванием по центру</P>

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

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

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

Списки

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

Листинг 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.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.5. Вложенные списки

<OL type="1">

<LI>Первая строка

<OL type="a">

<LI>Вторая строка

<LI>Третья строка

</OL>

<LI>Четвертая строка

</OL>

Графика

Вставляем изображение в 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>

Используем изображение в качестве фона

<BODY background="foto.gif" bgcolor="gray">"Тело" документа</BODY>

Гиперссылки

Внешние гиперссылки

<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>

Внутренние гиперссылки

<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>







Последнее изменение этой страницы: 2016-08-01; Нарушение авторского права страницы

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 35.172.100.232 (0.03 с.)