Дмитрий ШВЕЦ
От редакции. Мы очень
часто получаем письма с просьбой
опубликовать материалы, которые
помогут в создании web-страниц.
Действительно, одновременно с
развитием Интернета увеличивается
потребность в знаниях специальных
языков - разметки, программирования -
которые необходимы при создании, так
сказать, Интернет-контента.
Сегодняшняя статья ни в коей мере не
претендует на полномасштабный
учебник web-мастера типа "от А до Я".
Цель статьи - используя несложные
примеры, показать основные принципы
использования HTML при разработке web-страницы.
Ведь главное - начать, как говорил
один известный политик, а дальше,
когда вы сделаете несколько первых и
успешных шагов на поприще web-мастера,
то сможете самостоятельно развивать
свои навыки. Впрочем, это не значит,
что мы не будем вам в этом помогать.
Введение
Изучая бескрайние просторы
Интернета, вы наверняка задумывались
над тем, как бы было неплохо создать
свой уютный сетевой домик. Обычно
первой преградой на пути творчества
является отсутствие темы сайта. Вроде
бы и хочется, да непонятно о чем! Но вот,
после долгих раздумий в голове
вырисовывается план вашего будущего
творения - такой, чтобы и глаз радовал,
да еще и был интересным по содержанию.
Начиная с этого момента и возникает
потребность в изучении азов такой
штуки как HTML (Hyper Text Markup Language) - язык
разметки гипертекста. Внутренности
этого языка состоят из так называемых
тэгов, которые определяют внешний вид
вашей странички. Файлы, содержащие код
HTML, обычно имеют расширения .html и .htm. В
настоящий момент существует
несколько версий языка HTML, который
развивался по мере того, как выходили
очередные версии браузеров. Одним из
новых достижений в этой области
является DynamicHTML, но я намеренно
буду придерживаться старых версий
гипертекста - из-за несовместимости
основных браузеров, каковыми являются
Internet Explorer и Netscape Communicator.
Вследствие этой несовместимости
эффекты, создаваемые с помощью DynamicHTML,
могут работать в одном браузере и не
работать в другом.
Первые шаги
Итак, начнем. Для работы вам
понадобится один из вышеупомянутых
браузеров (лучше оба), любой HTML-редактор
(о них читайте в МК №№30-33 (97-100)) и
неограниченное количество фантазии.
Из всех программ для разработки webсайтов
мне больше всего понравились HomeSite и
HotDog, но на первых порах подойдет и
обыкновенный "Блокнот", в котором
вы можете написать HTML-код,
сохранив файл с расширением либо *.htm,
либо *.html.
Рассмотрим самый простой пример
использования тэгов HTML:
<HTML>
<HEAD>
<TITLE>Моя первая страница</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Если теперь вы загрузите
сохраненный вами файл в браузере, то
увидите чистую страницу с названием (вверху
окна, над панелью инструментов и меню)
"Моя первая страница".
Теперь немного проанализируем
использованные нами тэги.
Открывающий тэг <HTML> и
закрывающий </HTML> определяют
сам HTML-документ, все остальные
тэги должны находится внутри них. Тэги
<HEAD> и </HEAD> - это шапка
документа. Все, что помещается между
ними, загружается в первую очередь и
обычно носит информационный характер.
<BODY> и </BODY> - это тело
документа - здесь помещается все, что
будет отображено непосредственно в
окне браузера. Этим тэгам
соответствуют такие атрибуты, как BACKGROUND,
определяющий путь к графическому
файлу, который будет использоваться в
качестве фона, BGCOLOR, задающий цвет
фона, TEXT - цвет текста, LINK - цвет
ссылок на странице, VLINK - цвет
посещенных ссылок и ALINK - цвет
ссылок, активных в настоящий момент.
Цвета в гипертексте задаются с
помощью английских слов. Например, red
- красный, green - зеленый, lightgreen - светло-зеленый,
black - черный, white - белый, blue - синий,
darkblue - темно-синий. Также можно
задавать текст шестнадцатиричным
кодом. Например, #FF000 - красный, #000000
- черный, #FFFFFF - белый, #90EE90 - светло-зеленый,
#FFDAB9 - персиковый.
Вставка текста
В следующем примере мы рассмотрим, как
на страницу вставить текст, а также
способы его форматирования.
<HTML>
<HEAD>
<TITLE>Моя первая страница</TITLE>
</HEAD>
<BODY BGCOLOR="darkblue">
<FONT SIZE="4" COLOR="lightblue"> <I><B><CENTER>
Добро пожаловать! Это моя первая
страничка! </B></I></CENTER></FONT>
</BODY>
</HTML>
Файл с таким кодом после загрузки в
браузер будет иметь темно-синий цвет и
светло-голубой отцентрированный
текст "Добро пожаловать! Это моя
первая страничка!".
Параметры текста задаются внутри тэга
<FONT>, и весь текст вплоть до
закрывающегося тэга </FONT> будет
иметь одинаковый вид. Размер текста
задается с помощью атрибута SIZE, а
его цвет - с помощью COLOR. Чтобы
сделать текст жирным, используются
открывающий и закрывающий тэги <B>
и </B>, а для курсива - <I> и
</I>; подчеркнутый текст должен
быть заключен в тэги <U> и </U>.
Размер задается также цифрами со
знаком "+" или "-"
перед ними. Это означает, что размер
текста будет на заданное количество
больше или меньше размера, принятого
браузером по умолчанию. Для того чтобы
текст в браузере отображался с новой
строки, недостаточно просто нажать
"enter" - нужно использовать тэг <BR>.
Графика
С текстом немного разобрались, теперь
можно перейти к украшению вашего
сайта - рисункам. Рисунки вставляются
на страницу с помощью тэга <IMG>,
внутри которого определяется путь к
рисунку, размер его отображения и
пояснительная надпись. Итак,
предположим, ваши рисунки расположены
в папке с названием "pics",
расположенной в той же папке, что и
сама HTML-страница. Тогда ваш код
будет выглядеть приблизительно так:
<CENTER>
<IMG SRC="pics/mypic.jpg" WIDTH="190" HEIGHT="230"
ALT="Это мой рисунок">
</CENTER>
В итоге, если вставить этот код в
предыдущий пример, то мы получим такой
же сайт, но уже с рисунком размером 190х230
пикселей, расположенным под текстом
по центру страницы. При наведении
указателя мыши на рисунок появится
надпись: "Это мой рисунок". При
этом вы должны помнить, что при
изменении местоположения файла с HTML-кодом
необходимо изменять и все пути к
объектам, вставленным в этот файл!
Таблицы
Для упорядочения всех объектов,
находящихся на странице, web-дизайнерами
очень часто используется таблица. Вы
можете задавать ширину таблицы,
количество рядов и колонок, а также
фон внутри таблицы и рамку вокруг
ячеек. С помощью атрибутов COLSPAN и ROWSPAN
можно объединять заданное количество
ячеек. COLSPAN объединяет ячейки в
строке, а ROWSPAN, соответственно, - в
колонке. Рассмотрим пример:
<HTML>
<HEAD>
<TITLE>Моя первая страница</TITLE>
</HEAD>
<BODY BGCOLOR="darkblue">
<TABLE WIDTH="700" ALIGN="center" BGCOLOR="white"
BORDER="1">
<TR><TD COLSPAN="3">
<FONT SIZE="4" COLOR="lightblue">
<I><B><CENTER>Добро пожаловать!
Это моя первая страничка!
И эта надпись сделана в первой строке
с тремя объединенными ячейками. </B></I></CENTER></FONT>
</TD></TR>
<TR><TD>
<FONT SIZE="3" COLOR="black">Это
первая колонка, вторая строка.</FONT>
</TD>
<TD>
<CENTER>
<IMG SRC="pics/mypic.jpg" WIDTH="190" HEIGHT="230"
ALT="Это мой рисунок">
</CENTER>
</TD>
<TD ALIGN="right">
<FONT SIZE="3" COLOR="black">Это
третья колонка, вторая строка.</FONT>
</TD></TR>
</TABLE>
</BODY>
</HTML>

Мы получили таблицу с
объемной рамкой, состоящую из двух
строк и трех колонок, при этом первая
строка на колонки не разделена. В коде
таблицы тэги <TR> и </TR>
определяют строку, а <TD> и </TD>
- ячейку. Обрамление таблицы задается
с помощью атрибута BORDER, в котором
указывается толщина рамки. Можно
также задавать ширину каждой ячейки в
отдельности, используя, как и в случае
с шириной самой таблицы, атрибут WIDTH.
Атрибут ALIGN задает выравнивание
текста внутри ячейки, которое бывает
по правому краю (right), по левому (left)
и по центру (center). С помощью
атрибута BACKGROUND SRC можно в качестве
фона таблицы использовать рисунок,
указав путь к его местонахождению.
Гиперссылки
Теперь, придав хоть какой-то внешний
вид первому HTML-файлу, можно
добавить на страничку несколько
гиперссылок на другие файлы вашего
или любого другого сайта Интернета.
Сделать это можно с помощью тэга <A>
и его атрибута HREF. Теперь любой
объект, помещенный между открывающим
и закрывающим тэгами гиперссылки,
будет играть роль дверей, через
которые можно выйти на указанный вами
в ссылке HTML-файл.
<A HREF="back.htm">Назад</A>
<A HREF="gallery.htm" TARGET="_new"><IMG
SRC="pics/mypic.jpg" WIDTH="190" HEIGHT="230"
ALT="Это мой рисунок"></A>
<A HREF="next.htm">Вперед</A>
В случае со ссылками "назад" и
"вперед" браузер просто загрузит
в окно файл с названием back.htm при
щелчке на слове назад и,
соответственно next.htm при щелчке на
слове вперед. Но если нажать на
рисунок, то файл gallery.htm загрузится
уже в отдельном окне. Это выполняется
с помощью атрибута TARGET и его
параметра new. Этот атрибут также
очень удобен при использовании
фреймов.

Фреймы
Фреймы служат внешней оболочкой сразу
для нескольких HTML-файлов. При этом
каждый фрейм ссылается на отдельный
файл, путь к которому указывается в
коде. Использовать фреймы очень
удобно, если вы хотите, чтобы одна или
больше частей вашей страницы
оставались неизменными и в то же время
управляли содержимым другой части.
Так, например, вы можете сделать
страницу из двух частей, в которой
левая (узкая) является списком ссылок,
а в правую (широкую) загружаются все
файлы, активируемые нажатием ссылок в
левой части.
Все это делается так, как показано в
примере - но при этом не забудьте
создать соответствующие файлы с
названиями left.htm и right.htm.
Следует отметить, что сам файл с кодом
фреймов не содержит ничего, кроме их
параметров и ссылок на
соответствующие файлы. Поэтому, если
вы просто загрузите такой файл и не
создадите при этом файлы, на которые
будет ссылаться фрейм, то браузер
сообщит вам, что он не может найти
нужные файлы, и ничего вам не покажет.
<HEAD>
<TITLE> А здесь Ваше название…</TITLE>
</HEAD>
<FRAMESET FRAMEBORDER="0" COLS="20%,80%">
<FRAME NAME="left" SRC="left.htm" SCROLLING="auto"
NORESIZE>
<FRAME NAME="right" SRC="right.htm" SCROLLING="auto"
NORESIZE>
</FRAMESET>
</HTML>
Тэги <FRAMESET> и </FRAMESET> заменяют
в этом файле привычный тэг <BODY> и
являются оболочкой для всех фреймов,
из которых состоит страница. В них
указывается, каким образом фреймы
будут располагаться на страничке (колонками
или рядами), а также ширину
разделительной линии между ними.
Атрибут COLS определяет колонки - в
нем указывается размер каждой колонки
через запятую (можно указывать как в
пикселях, так и в процентах). А атрибут ROWS,
соответственно, определяет ряды. С
помощью атрибута FRAMEBORDER
указывается ширина разделителя. В
тэге <FRAME> указывается имя
фрейма, которое может быть позже
использовано в атрибуте TARGET, путь
к файлу, который будет загружен в
данный фрейм, а также состояние
прокрутки и возможность изменения
размера фрейма при просмотре страницы.
Количество тэгов <FRAME> соответствует
количеству фреймов на странице.
Прокрутка задается атрибутом SCROLLING и
может: быть всегда (yes), не быть
никогда (no) или вызываться при
необходимости (auto). Если стоит
атрибут NORESIZE, то размер фрейма
будет неизменным. Итак, допустим, вы
создали вышеописанный сайт, и теперь
возникает проблема, как сделать так,
чтобы при нажатии на ссылку в левом
фрейме файл загружался в правом. Тут
нам на помощь приходят уже упомянутые
атрибуты TARGET и NAME. В TARGET мы
указываем имя правого фрейма
заданного нами в тэге <FRAME>.
Таким образом, если мы в левом окне
сделаем ссылку Рисунки, при
нажатии на которую в правый фрейм
должен будет загрузиться файл pics.htm,
то код ссылки, расположенный в файле left.htm,
будет выглядеть так:
<A HREF="pics.htm" TARGET="right">Рисунки</A>
Формы
Чтобы ваша страничка была
интерактивна, т. е. чтобы ее
отображаемое в браузере содержимое
зависело от действий посетителя,
могут применяться такие элементы HTML,
как формы. Вы их наверняка
встречали, регистрируясь где-нибудь в
Интернете. Заполняя такую форму, вы
нажимали на кнопку, и ее содержимое
отправлялось на сервер для обработки
специальной программой (скриптом).
Но так как написание или
использование такой программы
заслуживает отдельной статьи (и не
одной), то из форм мы рассмотрим только
кнопку, которая может заменить на
вашей странице банальную ссылку. Код
кнопки выглядит так:
<FORM ACTION="next.htm" >
<INPUT TYPE="Submit" VALUE="Вперед">
</FORM>

Как видите, сам код кнопки
заключен в тэги <FORM> и </FORM>,
в одном из которых указано действие,
вызываемое нажатием кнопки Вперед.
Атрибут VALUE в тэге INPUT задает
надпись на кнопке, а TYPE - какой
именно тип формы используется. В
данном случае это Submit - кнопка,
которая вызывает заданное действие
формы, а именно загрузку в окне
браузера информации из файла с
названием next.htm.
Вот и все пока, вам остается лишь на
основе рассмотренного углублять свои
знания и развивать творческое начало.
Источник: http://www.mycomp.com.ua/
|