Зачем нужно знать язык 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. Абсолютная ссылка:
http://eske70.ru/
<A HREF="http://eske70.ru">eske70.ru</A>
2. Относительная ссылка:
Главная страница
<A HREF="index.php">Главная страница</A>
3. E-mail ссылка:
Моя e-mail рассылка
<A HREF="mailto:eskealexey@mail.ru">Моя e-mail рассылка</A>
TITLE="..." - Подсказка к тексту, или ссылке.
Например :
1. Текст с подсказкой.
Подведи сюда мышь
<A TITLE="Подсказка">Подведи сюда мышь</A>
2. Ссылка с подсказкой. Ссылка
<A HREF="http://eske70.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 ссылка-рисунок.
<A HREF="mailto:eskealexey@mail.ru"><IMG SRC="email.gif" width="65" height="35" ALT="Подпишись !" BORDER=0></A>
Таблицы :
<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"