ТОП 10:

Основы HTML. Создаем дизайн сайта



Основы HTML. Создаем дизайн сайта

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

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

<FONT color="#FF0000" face="Verdana">Текст</FONT>

<FONT color="#FF0000" face="Verdana"><U>Подчеркнутый текст</U></FONT>

Создаем первый 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>

Таблицы

Листинг 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>

Выводим заголовок таблицы

<CAPTION align="top">Заголовок</CAPTION>

<CAPTION align="bottom">Заголовок</CAPTION>

Описываем строку таблицы

<TR align="left">

<TR align="right">

<TR align="center">

<TR align="justify">

<TR valign="top">

<TR valign="middle">

<TR valign="bottom">

<TR valign="baseline">

Фреймы

Описываем отдельную область

<FRAME src="doc2.html">

<FRAME src="charter1.html" name="charter">

<FRAME src="charter1.html" name="charter" scrolling="auto">

<FRAME src="charter1.html" name="charter" scrolling="yes">

<FRAME src="charter1.html" name="charter" scrolling="no">

<FRAME src="charter1.html" name="charter" marginwidth="5">

<FRAME src="charter1.html" name="charter" marginwidth="5" marginheight="5">

<FRAME src="charter1.html" name="charter" border="red">

<FRAME src="charter1.html" name="charter" frameborder="yes">

<FRAME src="charter1.html" name="charter" frameborder="no">

<FRAME src="doc1.html" scrolling="no" NORESIZE>

1.10.5. Тэг <NOFRAMES>

<NOFRAMES>

Ваш Web-браузер не отображает фреймы

</NOFRAMES>

Карты-изображения

Структура карт-изображений

Листинг 1.20. Структура карт-изображений

<!-- Часть 1 -->

<IMG src="foto.gif" width="120" height="240" border="1" usemap="#karta">

<!-- Часть 1 -->

<!-- Часть 2 -->

<MAP name="karta">

<AREA shape="rect" coords="0,0,120,120" href="charter1.html" target="charter" alt="Глава 1">

<AREA shape="rect" coords="0,120,240,240" href="charter2.html" target="charter" alt="Глава 2">

<AREA shape="default" nohref>

</MAP>

<!-- Часть 2 -->

1.11.3. Тэг <MAP>

Формы

Вставляем форму в документ

<FORM action="file.php">

<FORM action="http://www.mysite.ru/file.php">

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

<FORM action="http://www.mysite.ru/file.php" method="POST" enctype="multipart/form-data">

<FORM action="http://www.mysite.ru/file.php" method="POST" enctype="multipart/form-data" target="_blank">

Скрытое поле 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="radio" name="radio1" value="yes">Текст

<INPUT type="radio" name="radio1" value="yes" CHECKED>Текст

Укажите ваш пол:<BR>

<INPUT type="radio" name="radio1" value="value1" CHECKED>Мужской

<INPUT type="radio" name="radio1" value="value2">Женский

Вставляем текстовую область

<TEXTAREA>

Текст по умолчанию

</TEXTAREA>

 

<TEXTAREA name="pole2">

Текст по умолчанию

</TEXTAREA>

 

<TEXTAREA name="pole2" cols="15">

Текст по умолчанию

</TEXTAREA>

 

<TEXTAREA name="pole2" cols="15" rows="10">

Текст по умолчанию

</TEXTAREA>

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

Создание дизайна

<HTML>

<HEAD>

<TITLE>Заголовок Web-страницы</TITLE>

<META name="description" content="Описание Web-страницы">

<META name="keywords" content="Ключевые слова для поисковых машин">

<META http-equiv="content-type"

content="text/html; charset=windows-1251">

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

</HEAD>

<BODY>

<!-- Основное содержание страницы -->

</BODY></HTML>

 

<TABLE width="760" align="center" border="0" cellspacing="0" cellpadding="0">

 

<!-- Таблица-разделитель Начало -->

<TABLE width="760" align="center" border="0" cellspacing="0" cellpadding="0">

<TR><TD height="5">&nbsp;</TD></TR></TABLE>

<!-- Таблица-разделитель Конец -->

 

<!-- Логотип и баннер Начало -->

<TABLE width="760" align="center" border="0" cellspacing="0" cellpadding="0">

<TR><TD height="70">

<!-- Код баннера -->

</TD></TR></TABLE>

<!-- Логотип и баннер Конец -->

 

<!-- Таблица для основного содержания страницы Начало -->

<TABLE width="760" height="300" align="center" border="0" cellspacing="0" cellpadding="10">

<TR><TD valign="top">

<H1 align="center">Основное содержание страницы</H1>

</TD></TR></TABLE>

<!-- Таблица для основного содержания страницы Конец -->

Создаем панель навигации

<!-- Панель навигации Начало -->

<TABLE align="center" width="760" height="21" border="0" cellpadding="0" cellspacing="0">

<TR bgcolor="#43568E" align="center" valign="middle"><TD>

<A href="index.php">

<FONT color="#FFFFFF"><B>На главную</B></FONT></A>

</TD><TD>

<A href="user/add.php">

<FONT color="#FFFFFF"><B>Добавить сайт</B></FONT></A>

</TD><TD>

<A href="gbook.php">

<FONT color="#FFFFFF"><B>Гостевая книга</B></FONT></A>

</TD><TD>

<A href="contact.php">

<FONT color="#FFFFFF"><B>Обратная связь</B></FONT></A>

</TD><TD>

<A href="">

<FONT color="#FFFFFF"><B>Добавить в Избранное</B></FONT></A>

</TD><TD>

<A href="">

<FONT color="#FFFFFF"><B>Сделать стартовой</B></FONT></A>

</TD></TR>

</TABLE>

<!-- Панель навигации Конец -->

 

<STYLE type="text/css">

.menu-table {

font-size: 12px;

text-align: center;

vertical-align: middle;

background-color: #43568E

}

A.menu:link {

text-decoration: none;

font-weight: bold;

color: #FFFFFF;

font-size: 11px;

font-family: "Verdana", "Tahoma", sans-serif

}

A.menu:visited {

text-decoration: none;

font-weight: bold;

color: #FFFFFF;

font-size: 11px;

font-family: "Verdana", "Tahoma", sans-serif

}

A.menu:hover {

text-decoration: underline;

font-weight: bold;

color: #FFFFFF;

font-size: 11px;

font-family: "Verdana", "Tahoma", sans-serif

}

</STYLE>

<!-- Панель навигации Начало -->

<TABLE align="center" width="760" height="21" border="0" cellpadding="0" cellspacing="0">

<TR class="menu-table"><TD>

<A href="index.php" class="menu">На главную</A>

</TD><TD>

<A href="user/add.php" class="menu">Добавить сайт</A>

</TD><TD>

<A href="gbook.php" class="menu">Гостевая книга</A>

</TD><TD>

<A href="contact.php" class="menu">Обратная связь</A>

</TD><TD>

<A href="" class="menu">Добавить в Избранное</A>

</TD><TD>

<A href="" class="menu">Сделать стартовой</A>

</TD></TR>

</TABLE>

<!-- Панель навигации Конец -->

Основы HTML. Создаем дизайн сайта

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

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

<FONT color="#FF0000" face="Verdana">Текст</FONT>

<FONT color="#FF0000" face="Verdana"><U>Подчеркнутый текст</U></FONT>







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

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