Итак, Вы решили создать свою страничку в Интернет. С чего начать? Воплотить задуманное можно с помощью существующих программ, позволяющих заниматься веб-строительством, не зная HTML. Таких программ существует великое множество: Microsoft FrontPage, Adobe GoLive, Macromedia Dreamweaver, HomeSite и т.д. Можно попробовать и самый простой вариант - взять готовую страничку, сохранить ее HTML код, с помощью любого текстового редактора скорректировать ее: по вашему усмотрению изменить её название, установить ссылки на ваш E-mail (почтовый ящик) и т.д.
Для начала создания сайта рекомендую воспользоваться программой Microsoft FrontPage 2000, входящей в комплект поставки Microsoft Office 2000. Разобраться с ней можно за неделю. Приступим.
Итак, сначала создайте на диске папку, в которой будут храниться все файлы вашего будущего сайта. Стартовый файл должен иметь имя index.html или default.html. Запустите Microsoft FrontPage 2000 , создайте в вашей папке стартовый файл с именем index.html и начнем его заполнять.
Начало Наберем простейший код страницы
<HTML>
<HEAD>
<TITLE> Моя персональная страничка </TITLE>
</HEAD>
<BODY>
Всем привет
</BODY>
</HTML>
Сохраните ваш файл и запустите его через браузер, например "Internet Explorer".
Обратите внимание, что HTML страница содержит как обычный текст, так и команды разметки (tags или теги), заключенные в угловые скобки (< и >). Теги языка HTML задают правила, по которым браузер отображает документ на экране.
Большинство тегов языка HTML, такие как <HTML>, <HEAD>, <TITLE> и другие, требуют соответствующую команду с символом </....> для ее закрытия, то есть тега конца команды.
Рассмотрим теги нашего документа
<HTML>
Данный тег используется для открытия HTML-документа. Каждая Web-страница начинается тегом <HTML> и заканчивается закрывающим тегом </HTML>.
<HEAD>
Любой HTML-документ состоит как минимум из двух частей: заголовка и собственно документа. Данный тег определяет заголовок Web-страницы и должен иметь обязательный закрывающий тег </HEAD>. Также обязательным атрибутом этого тега явля-ется тег <TITLE>.
<TITLE>
Каждый HTML-документ имеет название, заключенное между тегами <TITLE> и </TITLE>. По названию документа HTML броузеры могут найти информацию, поэтому место для названия всегда определено - оно находится вверху и отдельно от содержимого HTML-документа. Отображается название в заголовке окна броузера, поэтому на него накладывается ограничение: максимальная длина названия - 40 символов.
<BODY>
Данный тег заключает в себе непосредственно документ. Также необходим закрывающий тег </BODY>.
Атрибуты тега <BODY>
Почти все теги в языке разметки Web-страниц имеют некоторые параметры, которые принято называть атрибутами. Они предназначены для модифицирования параметров документа, а их значения принято заключать в кавычки. Тег <BODY> имеет атрибуты, которые перечислены ниже:
* bgcolor="..." - определяет цвет фона документа. Работа с цветами в HTML-документах будет рассмотрена ниже;
* background="..." - указывает броузеру местоположение файла (*.gif или *.jpg), который необходимо использовать в качестве фонового рисунка. В кавычках указывается абсолютный или относительный путь к файлу. Окно полностью заполняется изображением, начиная с верхнего левого угла;
* text="..." -устанавливает цвет текста;
* alink=" .." - определяет цвет активной ссылки;
* link="..." - определяет цвет не просмотренной ссылки;
* vlink="..." - определяет цвет просмотренной ссылки;
* topmargin="..." - устанавливает границу верхнего поля;
* leftmargin="..." - граница левого поля;
* bgproperties="fixed" - в случае установки данного параметра в значение fixed фоновое изображение не будет прокручиваться вместе с текстом;
* onload="..." - определяет те действия броузера, которые должны произойти после загрузки документа из сети.
Очень часто исходные коды программ сопровождаются комментариями. Они предназначены для сопровождения исходного кода программы пояснениями, которые, в свою очередь, облегчают понимание кода как самим разработчиком при его модифицировании, так и при чтении кода другими людьми. В спецификации HTML для комментариев определен специальный тег, который начинается символами <!-- и заканчивается символами -->. Текст, заключенный в теге комментария, не отображается в броузере.
Цвета документа.
Выбор цвета можно производить двумя способами: заданием имени или определением номера цвета по цветовой схеме RGB (Red, Green, Blue). Язык HTML поддерживает следующие имена Цветов: AQUA, BLACK, BLUE, FUCHSIA, GRAY, GREEN, LIME, MAROON, NAVY, OLIVE, PURPLE, RED, SILVER, TEAL, WHITE, YELLOW. Номер цвета RGB задается тремя двухзначными шестнадцатеричными числами, причем каждое число принадлежит интер-валу от 00 до FF и определяет интенсивность соответствующего цвета. Например, номер цвета #FFOOOO соответствует красному цвету, так как имеет максимальную интенсивность для красного цвета, а зеленый и голубой имеют значения, равные нулю. Соот-ветственно, номер #OOFFOO кодирует зеленый цвет, а номер #OOOOFF - синий. Белый цвет образуется в результате насыще-ния всех основных цветов, т.е. его кодом будет число #FFFFFF. В случае полного отсутствия всех трех цветов можно получить абсолютно черный цвет (код #000000). Очевидно, что, используя такую комбинацию шестнадцатеричных чисел, можно получить очень большое количество цветов. Для удобства, основные шестнадцать цветов, их коды и названия приведены в таблице. Основные цвета и их коды Цвет Код RGB Имя Цвет Код RGB Имя черный #000000 black серебряный #СОСОСО silver темно-бордовый #800000 maroon красный #FFOOOO red зеленый #008000 green известь #OOFFOO lime оливковый #808000 olive желтый #FFFFOO yellow темно-синий #000080 navy синий #OOOOFF blue фиолетовый #800080 purple фуксия #FFOOFF fuchsia чирок #008080 teal аква #OOFFFF aqva серый #808080 gray белый #FFFFFF white
Гиперссылки
Важнейшим понятием в HTML является гиперссылка, которая позволяет связать текст или какой-либо объект с другими гипертекстовыми документами. Текст, который является гиперссылкой, как правило, выделяется цветом и подчеркивается. Для определения ссылки используется тег <А>, структура которого имеет следующий вид:
<А HREF="filename" target="_self">текст ссылки</A> Атрибут HREF задает значение адреса документа, на который указывает ссылка, filename - имя файла или адрес Internet, на который необходимо сослаться, а текст_ссылки - текст гипертекстовой ссылки, который будет непосредственно показан в HTML-документе. Атрибут TARGET задает значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:
* _top - открытие документа в текущем окне
* _blank - открытие документа в новом окне
* _self - открытие документа в текущем фрейме
* _parent - открытие документа в родительском фрейме
Значение по умолчанию: _self Примеры:
* <A href="photo/my_photo.html" target="_blank" >Moй фотоальбом</A>
ссылается на файл my_photo.html, расположенный в каталоге photo, вложенном в текущую папку, и образует ссылку в виде текста "Мой фотоальбом". Документ откроется в новом окне.
* <A href="aboutme.html" target=MainFrame >Немного обо мне</A>
откроет страницу aboutme.html, расположенную в текщей папке, и образует ссылку в виде текста "Немного обо мне". Документ откроется во фрайме "MainFrame".
* <A href="mailto:support@rol.ru">письмо в техподдержку</A>
выполнят макрокоманду загрузки почтовой программы с автозаполнением адреса получателя.
Теперь попробуем применить наши новые знания на практике. Добавим в нашу страничку атрибуты тега <BODY> и ссылку на страничку в интернете. Изменим код странички:
<HTML>
<HEAD>
<TITLE>Моя домашняя страничка</TITLE>
</head>
<body bgcolor="#000000"
background="Stars.gif"
text="#ffffff"
alink="#DDOOOO"
link="#0000FF"
vlink="#FF00FF">
Добро пожаловать на мою домашнюю страничку!
<a href="http://u.to/T4UG" title="http://www.aport.ru" target="_blank">
Поиск в интернете
</a>
</BODY>
</HTML>
В данном примере был использован еще один тэг
, который позволяет задать принудительный перевод строки в пределах абзаца и является тегом прерывания строки.
Для позиционирования различных элементов на Web-странице используют таблицы. С их помощью можно создавать обтекание рисунков, упорядочивать элементы форм, а также позиционировать другие элементы HTML-документа.
Создание таблиц
Описание таблиц в HTML-документах осуществляется с помощью контейнера <TABLE>...</TABLE>. Таблица задается двумя контейнерами тегов:
<TR>...</TR> - описание строки таблицы и
<TD>...</TD> - описание ячейки таблицы.
По умолчанию текст внутри таблицы выравнивается по левому краю, а ширина столбца таблицы определяется наиболее длинным элементом в этом столбце.
Рассмотрим пример простейшей таблицы:
<HTML>
<HEAD>
<TITLE>Таблица</TITLE>
</HEAD>
<BODY>
<TABLE border="2"> <!-- Начало таблицы -->
<TR>
<TD colspan=2 align=center>
<B>Заголовок Таблицы.</В>
</TD>
</TR>
<TR>
<TD align="center">
Первая ячейка первой строки.
</TD>
<TD align="center">
Вторая ячейка первой строки.
</TD>
</TR>
<TR>
<td align="center">
Первая ячейка второй строки.
</TD>
<TD align="center">
Вторая ячейка второй строки.
</TD>
</TR>
</TABLE> <!-- конец таблицы -->
</BODY>
</HTML>
Ширина таблицы задается атрибутом width="..." для тега <TABLE>, а значение ширины таблицы может задаваться в пикселях или в процентах от ширины экрана. Содержимое каждой ячейки может быть выровнено с помощью атрибутов align="..." (горизонтальное положение) и valign="..." (вертикальное положение) для тегов <TR> или <TD>.
Атрибут valign="..." может принимать следующие значения: top - прижать вверх, bottom - прижать вниз и middle - разместить по центру, а атрибут align="..." принимает следующие значения: left - прижать влево, right - прижать вправо и center - разместить по центру.
Атрибуты cellpadding="..." и cellspacing="..." определяют, соответственно, расстояние в пикселях между границей ячейки и ее содержимым, а также и между ячейками.
Допускается добавлять к таблице, к строке или столбцу заголовок. Тег <CAPTION>, который располагается после тега <TABLE>, задает заголовок к таблице, центрируемый по умолчанию относительно таблицы. При помощи атрибутов align="..." или valign="..." заголовок можно разместить вверху (top) или внизу (bottom) и в левом (left) или правом (right) углу таблицы. Задание заголовка для строки или столбца таблицы осуществляется при помощи тега <TH> после тегов <TR> или <TD> соответственно.
Атрибут border="..." тега <TABLE> рисует рамку вокруг таблицы и каждой ячейки, при этом ширина рамки задается в пикселях. Следует иметь в виду, что атрибуты colspan="..." и rowspan="..." тегов <TD> и <TR> позволяют объединять ячейки таблицы в группы, вокруг которых рисуется рамка.
<TABLE border="l" width="100%">
<CAPTION>Пример таблицы</CAPTION>
<TR>
<TD width="66%" colspan="2">
<P align="center">
Две ячейки, объединенные по горизонтали
</TD>
</TR>
<TR>
<TD width="33%" rowspan="2" valign="middle">
Две ячейки, объединенные по вертикали
</TD>
<TD width="33%">
no левому краю
</TD>
</TR>
<TR>
<TD width="33%">
<P align="right">
no правому краю
</TD>
</TR>
</TABLE>
Вставка графических изображений
В документах HTML кроме текста могут присутствовать графические изображения, для вставки которых используется тег <IMG> Допускается использование файлов в формате GIF или JPG/JPEG, поскольку большинство броузеров имеют встроенные модули декодирования для воспроизведения данных форматов, а для систем, работающих под управлением операционных систем семейства Windows, допускается использование файлов формата BMP. Следующий пример демонстрирует вставку в документ JPG файла):
<IMG src=foto.jpg width="542" height="407" alt="девушка твоей мечты">
Здесь атрибут src=" " определяет URL-адрес графического файла В приведенном примере файл будет размещен в области шириной 542 и высотой 407 пикселей соответственно. Если размеры, указанные атрибутами height=" " (высота) и width=" " (ширина), не совпадают с размерами графического файла, то последний масштабируется. Масштабирование может привести к резкому ухудшению качества графического файла, поэтому рекомендуется задавать размеры, соответствующие размерам графического файла, или не указывать их вообще. Но для больших графических файлов рекомендуется всегда задавать их размеры для ускорения работы броузера. Если размеры не заданы, то, встретив рисунок, броузер прекращает вывод текста и ждет загрузки всего рисунка для того, чтобы определить его размеры, а это задерживает загрузку страницы.
Пример вставки рисунка:
<HTML>
<HEAD>
<ТIТLЕ>Вставка pисунка</TITLE>
</HEAD>
<BODY>
<IMG src=foto.jpg width="542" height="407"
alt="девушка твоей мечты">
</BODY>
</HTML>
Атрибут alt="..." указывает броузеру на то, какой именно текст следует подставить на место рисунка, если пользователь отключил загрузку графических файлов или из-за разрыва соединения файл не был загружен.
Картинку можно так же использовать для указания на гиперссылку. Например:
<A HREF="index.html"><IMG SRC="snail.gif" border="0" alt="На главную страничку" height="84" width="92"></A>
По умолчанию броузер рисует рамку вокруг рисунка, которая отмечена как гиперссылка. Для того чтобы убрать рамку используют атрибут border="..." в теге <IMG> с нулевым значением.
Создание абзацев
В языке HTML имеется специальный тег, указывающий броузеру на то, что в данном месте текста (там, где находится этот тег) должен начинаться новый абзац. Этот тег обо*значается следующим образом:
.
<HTML>
<HEAD>
<TITLE>Создание абзацев</TITLE>
</HEAD>
<BODY>
Это первый абзац. Он очень маленький, но все же
кое-какая информация в нем отображена.
А это второй.
</BODY>
</HTML>
Если необходимо вставить в документ несколько пустых строк в доку*мент необходимо использовать тег
, поскольку броузер игнорирует все последующие теги <Р>, расположенные подряд и находящиеся после первого. Для тегов абзаца закрывающие теги </P> не являются обязательными, поскольку тег, указывающий на начало нового абзаца, одновременно указывает на конец предыдущего.
Создание заголовков
Заголовки обозначают начала разделов документа. В языке HTML определено 6 уровней заголовков: от H1 до Н6. Текст, окруженный тегами <Н1>...</Н1>, получается большим - это основной заголовок. Если текст окружен тегами <Н2>...</Н2>, то он выгля*дит несколько меньше (подзаголовок); текст внутри <НЗ>...</НЗ> еще меньше и так далее до <Н6>...</Н6>.
<HEAD>
<TITLE>Создание заголовков</TITLE>
</HEAD>
<BODY>
<H1>Самый большой заголовок</H1>
<H2>Заголовок второго уровня</H2>
<H3>Заголовок третьего уровня</H3>
<H4>Заголовок четвертого уровня</H4>
<H5>Заголовок пятого уровня</H5>
<H6>Самый маленький заголовок</H6>
</BODY>
</HTML>
Выравнивание текста
Для выравнивания текста в документе используется атрибут align, который позволяет выровнять текст по левому или правому краю и по центру.
* align="left" - Выравнивание по левому краю.
* align="right" - Выравнивание по правому краю.
* align="center" - Выравнивание по центру.
Кроме того, для центрирования текста или графики можно использовать тег <CENTER>, который цен*трирует любые объекты. <HEAD>
<TITLE>Выравнивание текста</TITLE>
</HEAD>
<BODY>
<P align="left"> Данный текст выровнен по левому краю
<P align="right"> Данный текст выровнен по правому краю.
<P align="center"> Данный текст выровнен по центру.
<CENTER>
Текст также центрирован, однако в данном
случае был использован тег центрирования
</CENTER>
</BODY>
</HTML>
Стили форматирования
Для выделения текста в HTML - документах могут быть использованы различные стили шрифтов. С помощью контейнера <В>...</В> можно установить жирный шрифт, теги <I>, </I> устанавливает наклонный шрифт, контейнер <U>...</U>задает подчеркнутое написание символов, а теги <TT>...</TT> - шрифт фиксированной ширины.
Допускается также использование в тексте верхних и нижних индексов соответственно с помощью контейнеров <SUP>... </SUP> и <SUB>...</SUB>. Результатом форматирования будет уменьшенный и сдвинутый вверх или вниз текст. Контейнер тегов <STRIKE>...</STRIKE> перечеркивает текст горизонтальной линией. Контейнер тегов <BIG>...</BIG> позволяет вывести текст шрифтом большего размера. Контейнер тегов <SMALL>...</SMALL> позволяет вывести текст шрифтом меньшего размера.
<HEAD>
<TITLE>Форматирование текста в HTML</TITLE>
</HEAD>
<BODY>
<B>Это полужирное начертание текста.</B>
<I>Это курсив.</I>
<TT>Моноширинный шрифт, или, как его еще называют,
телетайп.</TT>
Гориэонтальная линия получается при использовании тега <HR>
<HR>
Допускается также использование в тексте <SUP>вepxнux</SUP>
и <SUB>нижних</SUB> индексов соответственно.
<STRIKE>
Этот текст перечеркнут горизонтальной линией.
</STRIKE>
Этот текст напечатан шрифтом <BIG>большего размера.</BIG>
Этот текст выведен <SMALL>меньшего размера</SMALL>.
<U>А этот текст подчеркнут.</U>
</BODY>
</HTML>
Тег предварительного форматирования
Как можно было убедиться, броузеры сами разбивают текст на строки в соответствии с текущей шириной окна. Несомненно, это очень удобно, однако иногда возникают ситуации, когда такое разбиение нежелательно, в частности, при иллюстрации какого-либо программного кода. В таких случаях можно использовать контейнер <PRE>...</PRE>. Заключенный в эти теги текст будет отображаться в броузере точно так же, как он был записан в исходном коде Web-страницы. <HTML>
<HEAD>
<TITLE>Пример использования тэга предварительного
форматирования</TITLE>
</HEAD>
<BODY>
Ниже будет приведен исходный код на языке
Java, предназначенный для создания
простейшего фреймового окна
<PRE>
// Пример иллюстрирует использование
// пакета AWT для создания простейшего
// фреймового окна
import Java.awt.* ;
public class window
{
public static void main (String[] args)
{
Frame myWindow = new Frame("Окно");
myWindow.setSize(400,200);
myWindow.show();
}
}
</PRE>
</BODY>
</HTML>
Установка размера шрифта
Язык гипертекстовой разметки позволяет задавать размеры шрифта, которым будет отображаться текст документа. По умолчанию размер шрифта равен 3, однако, используя тег <FONT> с атрибутом size="...", его можно переопределить Используются как относительные размеры шрифтов, так и абсолютные.
<HTML>
<HEAD>
<TITLE>Изменение размера шрифта.</TITLE>
</HEAD>
<BODY>
<FONT size=7>Paзмер шрифта равен 7.
</FONT>
<FONT size=6>Paзмер шрифта равен 6.
</FONT>
<FONT size=5>Paзмер шрифта равен 5.
</FONT>
<FONT size=4>Paзмер шрифта равен 4.
</FONT>
<FONT size=3>Paзмер шрифта равен 3.
</FONT>
<FONT size=2>Paзмер шрифта равен 2.
</FONT>
<FONT size=1>Paзмер шрифта равен 1.
</FONT>
</BODY>
</HTML>
Кроме абсолютных значений размеров шрифта в HTML можно использовать и относительные размеры. Если в теге <BASEFONT> установить параметр size равным какому-либо числу, то броузер будет использовать указанный размер как базовый. По умолчанию базовый размер равен трем. Относительно этого базового размера можно указывать размер шрифта текста, который заключен в контейнере тегов <FONT>. Для этого достаточно присвоить атрибуту size одно из следующих значений:
* +1...+7 - увеличение шрифта на указанное количество единиц относительно базового размера;
* -1...-7 - уменьшение шрифта на указанное количество единиц относительно базового размера.
<HTML>
<HEAD>
<TITLE>Изменение относительного размера шрифта</TITLE>
</HEAD>
<BODY>
Обычный текст. Его абсолютный размер равен 3.
<BASEFONT SIZE=5>
Установка базового размера 5.
<FONT size=+7>Увеличение до абсолютного размера, равного 12.
</FONT>
<FONT size=-2>Уменьшение до абсолютного размера, равного 3.
</FONT>
</BODY>
</HTML>
Тег <BASEFONT> предназначен для описания исходных параметров шрифта Web-страницы. Его действие распространяется до следующего тега этого типа. Он имеет следующие атрибуты:
* face="..." - задает имя шрифта или несколько возможных шрифтов, которые броузер использует для отображения текста. Поскольку шрифт берется из набора установленных на компьютере клиента шрифтов, рекомендуется перечислять, через запятую, несколько близких по начертанию гарнитур, так как нет никакой гарантии, что выбранный шрифт будет присутствовать на компьютере пользователя. В противном случае броузер выберет установленный по умолчанию шрифт и, возможно, текст будет отображаться не так, как хотелось.
* size="..." - задает размер шрифта от 1 до 7. Базовый размер шрифта равен 3. Шрифты могут быть заданы относительно базового +1, -1, +2, -2, ...; +7, -7.
* color="..." - задает цвет шрифта. Следует отметить, что все рассмотренные атрибуты присущи и тегу <FONT>.
