Template

Меню сайта

Главная

Гостевая

Друзья

Баннеры

Учебники

Программы

Шаблоны

Шрифты

Фоны

Смайлы

Ссылки

ICQ-Магазин

Партнеры

HTML

Учебник по HTML.

Зачем нужно знать язык HTML ? Конечно же, для создания web страниц. Создать web страницу можно и без знания языка HTML - есть редакторы такие как, Front Page, Microsoft Word 97, да и некоторые сервера бесплатного хостинга предоставляют возможность сделать сайт по шаблонам. Но... шаблонный сайт выглядит не очень красиво, даже с помощью вышеуказанных редакторов не удасться сделать такой дизайн и корректный HTML код, какой можно сделать вручную. Хотя, для изменения размера фотографии, или вообще какого-либо рисунка с помощью тегов лучше всего использовать Front Page. Да и на первых порах лучше всего сделать сайт с помощью HTML редактора. Никогда не ставьте на главной странице сайта много графики. Если Вы делаете графическое меню, то обязательно делайте подписи к ссылкам, чтобы можно было увидеть куда ведут ссылки, не загружая картинку. Главная страница сайта вместе с рисунками не должна занимать больше 30 КБ. Рисунки, желательно использовать формата gif и jpg. Главная страница сайта должна называться index.html В названиях HTML страниц и графических файлов можно использовать только английские буквы, желательно маленькие, и цифры.

Описание команд языка HTML

Все команды языка HTML - теги помещены в скобки <ТЕГ> - открытие тега. </ТЕГ> - закрытие тега. Закрывать надо все теги, кроме одиночных. Для некоторых тегов используються параметры. Они присваивают тегам какое-либо значение. Параметры ставяться только в открывающих тегах. В закрывающих тегах параметры не используються. Значение параметра пишится в кавычках. <ТЕГ параметр="значение">

Базисные элементы :
<HTML> </HTML> - Начало и конец HTML файла. Параметров не имеет.
<HEAD> </HEAD> - Описание документа. Содержит заголовок документа, и мета-теги. Параметров не имеет.
<TITLE> </TITLE> - Заголовок HTML документа. Должен быть между тегами <HEAD> </HEAD> Параметров не имеет.
<BODY> </BODY> - Тело документа. В теге <BODY> с помощью параметров определяются цвета текста, фона, ссылок.
Параметры для тега <BODY> : Цвета ссылок, текста, фона и др. Определяються кодом вида 00a0ff - где первая пара означает количество красного, вторая - зеленого, третья - синего. Для подбора цветов можете воспользоваться таблицей цветов.
bgcolor="#..." - Определяет цвет фона.
background="file.gif" - Определяет фоновый рисунок.
bgproperties="fixed" - Делает фоновый рисунок неподвижным. Значение fixed не менять.
alink="#..." - Определяет цвет активаной ссылки.
vlink="#..." - Определяет цвет просмотренной ссылки.
link="#..." - Определяет цвет ссылки.

Теги для форматировния текста :
<P> </P> - Параграф.
Параметры для тега <P> :
ALIGN="LEFT" - Выравнивание по левому краю.
ALIGN="CENTER" - Центровка.
ALIGN="RIGHT" - Выравнивание по правому краю.
<A> </A> - Этот тег без параметров обычно не используеться. С помощью него можно придать какое-либо значение для текста, или рисунка. Например сделать текст (рисунок) ссылкой. Или задать определенный стиль.
Параметры для тега <A> :
HREF="..."
Вместо точек впишите полный адрес, или название файла. А если Вы хотите сделать ссылку на e-mail, то напишите mailto: и e-mail адрес, без пробела от mailto:
1. Абсолютная ссылка :
www.drgenius.h1.ru
<A HREF="http://www.drgenius.h1.ru">www.drgenius.h1.ru</A>
2. Относительная ссылка :
Главная страница
<A HREF="index.html">Главная страница</A>
3. E-mail ссылка :
Мой e-mail
<A HREF="sasha_poljakov@mail.ru">Мой e-mail</A>
TITLE="..." - Подсказка к тексту, или ссылке.
Например :
1. Текст с подсказкой.
Подведи сюда мышь
<A TITLE="Подсказка">Подведи сюда мышь</A>
2. Ссылка с подсказкой. Ссылка
<A HREF="http://www.drgenius.h1.ru" TITLE="Заходи">Ссылка</A>
TARGET="..." - Этот параметр нужен, когда надо, чтобы ссылка была в одном фрейме, а загружаемая страница в другом. Вместо точек введите имя фрейма, в котором должна загружаться страница.
<H1> </H1> - Заголовок 1 уровня. Параметры те же что и для тега <P>
<H2> </H2> - Заголовок 2 уровня. Параметры те же что и для тега <P>
<H3> </H3> - Заголовок 3 уровня. Параметры те же что и для тега <P>
<H4> </H4> - Заголовок 4 уровня. Параметры те же что и для тега <P>
<H5> </H5> - Заголовок 5 уровня. Параметры те же что и для тега <P>
<H6> </H6> - Заголовок 6 уровня. Параметры те же что и для тега <P>
<BR> - Перевод строки. Параметров не имеет.
<HR> - Горизонтальная линия. Может служить для разделения текста.
Параметры :
WIDTH="..." - Длина, в процентах.
ALIGN="CENTER" - Центровка. Можно подставить другое значение - например LEFT или RIGHT, и следовательно выровнять по правому, или по левому краю.
COLOR="#..." - Цвет.
<B> </B> - Жирный шрифт. Параметров не имеет.
<U> </U> - Подчеркнутый шрифт. Параметров не имеет.
<I> </I> - Наклонный шрифт. Параметров не имеет.
<FONT> </FONT> - Определяет свойства шрифта.
Параметры :
FACE="..." - Определяет тип шрифта. Может иметь значения : Times New Roman
Comic Sans MS
Courier New Verdana
System
Arial
SIZE="..." - Размер шрифта - от 1 до 7.
COLOR="#..." - Цвет шрифта.
<BLOCKQUOTE> </BLOCKQUOTE> - Используеться для выделения цитат и определений. Позволяет расположить текст немного с отступом. Параметров не имеет.
<NOBR> </NOBR> - Текст, расположенный между этими тегами будет помещен в одну строку. Если строка не будет помещаться на экране, то для ее просмотра придеться использовать горизонтальный скроллинг. Параметров не имеет.
<CENTER> </CENTER> - Может быть использован вместо параметра ALIGN="CENTER" Параметров не имеет.
<IMG> - Вставка рисунка.
Параметры :
BORDER=0 - Окантовка, при использовании рисунка в качестве ссылки.
WIDTH="..." - Ширина.
HEIGHT="..." - Высота.
ALT="..." - Тоже что и TITLE="..." для тега <A>
Пример :
E-MAIL ссылка-рисунок.

Таблицы :
<TABLE> </TABLE> - Начало и конец таблицы.
<TR> </TR> - Новая строка.
<TD> </TD> - Новая ячейка.
Параметры для тега <TABLE>
BGCOLOR="#..." - цвет фона. BACKGROUND="file.gif" - фоновый рисунок. BORDER=... - Толщина рамки. ALIGN="CENTER" - Центровка. Можно взять значеник LEFT - выравнивание по левому краю. RIGHT - по правому. CELLSPACING=0 - Расстояние между ячейками. CELLPADDING=1 - Расстояние от краев таблицы. HSPACE=5 - Отступы справа и слева.

Фреймы :
<FRAMESET> </FRAMESET> - Определяет главные параметры фреймов.
Параметры тега <FRAMESET> :
rows=20%,80% - горизонтальные фреймы.
cols=20%,80% - вертикальные фреймы.
border=0 - границы фрейма.
<FRAME> - Фрейм. Ставится между <FRAMESET> </FRAMESET>
Параметры тега <FRAME>
src="file.htm" - название HTML файла, который будет загружаться в этом фрейме.
name="..." - название фрейма. У каждого фрейма должно быть свое название. Для названия используйте маленькие английские буквы и цифры.
<NOFRAMES> </NOFRAMES> - Для браузеров, неподдерживающих фреймы. Параметров не имеет.
<IFRAME> </IFRAME> - Инлайн фрейм. Можно вставлять в обычный HTML документ. Параметры такие же как и для обычного фрейма.

Специальные символы, обязательно должны быть набраны в нижнем регистре :
< - Знак <
> - Знак >
& - Знак &
" - Знак "
  - Неразделяющий пробел.

Построение HTML файла. Образцы готовых HTML кодов.

Построение простого HTML файла. Создайте стандартный текстовый файл . Откройте его редактором "Блокнот". Сначала напечатайте основные теги :
<HTML>
<HEAD>
<TITLE>Добро пожаловать !!!</TITLE>
</HEAD>
<BODY ....>
</BODY>
</HTML>
Вместо точек впишите параметры тега <BODY> - bgcolor="#c0c0c0" alink="#0000ff" vlink="#00c0ff" можете использовать эти значения, или дать другие, воспользовавшись таблицей цветов.
Между тегами <BODY>...</BODY> вставьте содержание страницы. Гиперссылки, текст, рисунки.
Теперь попробуем сделать таблицу :
<TABLE BORDER=1>
<TR>
<TD>
Ячейка 1
</TD>
<TD>
Ячейка 2
</TD>
</TR>
<TD>
Ячейка 3
</TD>
<TD>
Ячейка 4
</TD>
</TR>
</TABLE>
У Вас должно получиться следующее.

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

Эта таблица имеет 4 ячейки, ячейка 1 и 2 расположены в 1-ой строчке, ячейки 3 и 4 - во второй.
Создаем новый HTML файл. В блокноте набираем теги :
<HTML>
<HEAD>
<TITLE>Добро пожаловать !!!</TITLE>
</HEAD>
<FRAMESET rows=20%,80%>
<FRAME name=meny src="menu.htm" scrolling=auto>
<FRAME name=main src="mainpage.htm" scrolling=auto>
</FRAMESET>
<NOFRAMES>
<P>Sorry, your browser don't suppot this method.</P>
</NOFRAMES>
</HTML>
Фреймы можно сделать и по-другому. Вертикальные фреймы.

<HTML>
<HEAD>
<TITLE>Добро пожаловать !!!</TITLE>
</HEAD>
<FRAMESET cols=20%,80%>
<FRAME name=meny src="menu.htm" scrolling=auto>
<FRAME name=main src="mainpage.htm" scrolling=auto>
</FRAMESET>
<NOFRAMES>
<P>Sorry, your browser don't suppot this method.</P>
</NOFRAMES>
</HTML>
Чтобы ссылки были во фрейме meny, а страницы открывались в фрейме main добавляем в ссылки файла menu.htm параметр target="main"

Новости сайта

На сайте обновился дизайн и появиль новые