Связываем воедино
Для оформления ссылки существует пара тэгов <А> ...</А>. Все, что заключено между ними, является ссылкой, Записывается это так: <A HREF="group.html">Мои любимые группы</A> или
<A HREF="group.html"><IMG SRC="Images/music/jpg"></A>
Здесь параметр HREF задает имя HTML-файла, содержащего страницу, на которую произойдет переход. В первом случае ссылкой будет фраза "Мои любимые группы", во втором — изображение musik.jpg. Текст ссылки на странице в броузере выделяется цветом, а изображение по умолчанию обводится рамкой. В последнем случае можно убрать рамку, задав значение параметра BORDER равное 0 ( BORDER=0 ).
Первый документ index.html теперь будет выглядеть так.
<HTML>
<HEAD>
<TITLE>Музыка</TITLE>
</HEAD>
<BODY>
Музыка без границ<BR>
<IMG SRC=”Images/foto.jpg”><BR>
<A HREF=”group.html”>Мои любимые группы</A><BR><BR>
Создано Евгением Ковалевым
</BODY>
</HTML>
Заметим, что ссылки делятся на внутренние и внешние. Первые из них указывают на страницы, физически расположенные на том же компьютере, вторые – на ресурсы других серверов. Набрав, например, следующее:
<A HREF=http://www.zhurnal.ru/music/rasta/bg.html>Аквариум</A>, мы дадим заинтересовавшимся пользователям возможность перейти на персональную страницу Бориса Гребенщикова.
Но тут есть еще один нюанс. Попав на страницу group.html, посетитель должен иметь возможность вернуться обратно. Для этого в ней удобно создать ссылку:
<A HREF=”index.html”>Назад</A>
Результат:
<HTML>
<HEAD>
<TITLE>Группы</TITLE>
</HEAD>
<BODY>
<CENTER><FONT SIZE=4 COLOR=”BLUE”>Мои любимые музыкальные группы</FONT><BR></CENTER>
<IMG SRC=Images/music.jpg”><BR>
Вопли Видоплясова<BR>
Алиса<BR>
<B>Кино</B><BR>
<A HREF=”http://www.zhurnal.ru/music/rasta/
bg.html”><I>Аквариум </I></A><BR><BR>
<FONT SIZE=2>Создано Евгением Ковалевым<BR>
<A HREF=”index.html>Назад</A></FONT>
</BODY>
</HTML>
ТАБЛИЦЫ
Как делать таблицы :
<TABLE>
<TR>
<TD>
Текст
</TABLE>
Далее:
<TABLE BORDER=”1”>
<TR>
<TD>
Текст1 (колонка первая)
<TD>
Текст 1 (колонка вторая)
</TABLE>
Далее:
«TABLE WIDTH=”100%” BORDER=”1”
BGCOLOR= “LIME”»
«TR»
«TD WIDTH=30%»Первая строка
(колонка первая)
«TD WIDTH=70%»Первая строка
(колонка вторая)
«TR BGCOLOR=”GREEN”»
«TD» Вторая строка (колонка первая)
«TD BGCOLOR=”Yellow”»Вторая строка (колонка вторая)
«TR»
«TD»Третья строка (колонка первая)
«TD»Четвертая строка (колонка вторая)
«/TABLE»
Хотелось бы обратить ваше внимание на то, что строку <TABLE WIDTH = "100 %" BORDER ="1" BGCOLOR = "LIME"> можно записать и так: <TABLE WIDTH= 100% BORDER= 1 BGCOLOR = LIME >, т.е. кавычки здесь и в некоторых других случаях не являются обязательными. Все же не ленитесь их ставить, это пригодиться вам в дальнейшем. Данная строка означает примерно следующее: таблица (TABLE) занимает весь лист (WIDTH = " 100 %)," а толщина разграничительных линий равна 1 (BORDER =" 1"). Цвет фона ячеек таблицы ярко-зеленый (LIME).
Любой цвет в HTML задается либо названием (red, blue, green, grey, yellow, black…) либо набором шестнадцатеричных значений составляющих в цветовой модели RGB (в формате # RRGGBB). Например, # FFOOOO = Red, #OOOOFF= Blue, #OOOOOO = Black, # FFFFFF = White . Заметим, что не все цвета будут отображаться правильно во всех броузерах.
В тэге < TABLE > с помощью параметра BGCOLOR можно задать цвет фона для всех ячеек, в < TR > - для строки, а < TD > - для отдельной ячейки.
Тэг < TD WIDTH= 30% > или < TD WIDTH = 70% > задает размер ячейки в процентах от ширины таблицы. Встретив это определение в самом начале таблицы, броузер будет придерживаться его и дальше, таким образом, в последующих строках этот параметр для отдельных ячеек можно не указывать.
Если вы хотите разместить заголовок таблицы в одной большой ячейке - используйте параметр COLSPAN для объединения двух соседних ячеек по горизонтали, а ROWSPAN - по вертикали:
Вот пример применения параметра COLSPAN :
«TABLE BORDER=”1”»
«TD» «TD COLSPAN=2»…
«TR» «TD»… «TD»…
«TR» «TD»… «TD»…
«/TABLE»
В первой строке мы получим одну большую ячейку, равную по величине двум в следующей строке.
А вот пример применения параметра ROWSPAN :
«TABLE BORDER=”1”»
«TR» «TD ROWSPAN=3» Ячейка на 3 строки «TD»…
«TR» «TD»…
«TR» «TD»…
«/TABLE»
Не бойтесь экспериментировать. Дело в том, что броузер, используя довольно сложный алгоритм отображения таблиц, может рассчитать размер каждой ячейки и попытается, например, расширить столбец, если в нем не помещается информация.
Необходимо заметить, что значение параметра WIDTH можно задавать не только в процентах, но и в пикселах. Так, выражение WIDTH="400" определяет ширину ячейки в четыреста пикселов.
Для выравнивания текста и других объектов внутри ячейки будет отцентрировано по горизонтали (ALIGN = "CENTER") и смещено к ее верхней границе (VALIGN="TOP"). Параметр горизонтального выравнивания может принимать значения CENTER, LEFT и RIGHT, а вертикального — TOP, BOTTON и CENTER.
Вот и все начальные сведения о таблицах.
Было бы неправильно не упомянуть об основных средствах оформления текста большого объема.
Тэги <P>…</P> обозначают соответственно начало и конец абзаца. Основной параметр, применяемый в первом из них, все тот же - ALIGN. Он может принимать значения CENTER, RIGHT, LEFT и JUSTIFY, последнее из которых позволяет выровнять текст абзаца по ширине.
Заметим, также, что строка < PALIGN= "CENTER"> …</P> равнозначна <CENTER>…</CENTER>.