Теги для формирования таблицы Таблица вставляется в HTML-документ парными тегами <table> и </table> . У тега < table> есть атрибуты: BORDER - ширина обрамления ; WIDTH - ширина таблицы ; BGCOLOR - цвет фона под таблицей; Между тегами могут располагаться следующие элементы таблицы: 1. <CAPTION>Название таблицы</CAPTION>. У тега CAPTION всего один атрибут, определяющий положение названия таблицы - ALIGN . Он может принимать два значения: ALIGN = top - над таблицей ; ALIGN = bottom - под таблицей ; 2. <TR>Строка таблицы</TR> . У этого тега три атрибута: ALIGN - выравнивание внутри ячеек строки, может иметь значение LEFT (по левому краю), RIGHT (по правому краю) или CENTER (по центру) ; VALIGN - вертикальное выравнивание внутри строки таблицы, может принимать значения TOP (по верхнему краю), BOTTOM (по нижнему краю), MIDDLE (по центру) ; 3. <TD>Столбец таблицы</TD> . Тег столбца таблицы может иметь следующие атрибуты: ALIGN - выравнивание в ячейках столбца, допустимые значения: LEFT, RIGHT, CENTER ; VALIGN - вертикальное выравнивание в ячейках столбца, допустимые значения: TOP, BOTTOM, MIDDLE ; COLSPAN, ROWSPAN - растяжение клетки на несколько столбцов или строк. COLSPAN - объединить ячейки столбцов. Например, COLSPAN = 2 - объединить ячейки двух столбцов. ROWSPAN = 2 - растягивает клетку таблицы на две строки ; BGCOLOR - цвет фона под столбцом. Давайте попробуем вставить таблицу в ваш HTML-документ. Внимание Так как разрешение монитора у пользователей может быть разным, ширину таблицы лучше устанавливать в процентах от ширины окна. <H2 ALIGN = center>Самая простая таблица<H2> <TABLE width="75% border="2" cellspacing="0" cellpadding="10" algin="center"> <tr> <td>1-я ячейка таблицы </td> <td>3-я ячейка таблицы </td> </tr> <tr> <td>2-я ячейка таблицы </td> <td>4-я ячейка таблицы </td> </tr></table> А вот и результат: Самая простая таблица 1-я ячейка таблицы | 3-я ячейка таблицы | 2-я ячейка таблицы | 4-я ячейка таблицы | Урок №8. Фреймы Итак, еще одно важное дополнение к изготовлению веб-сайтов – фреймы. Это мощный механизм представления информации на веб-страницах. С помощью фреймов экран разделяется на несколько областей, в каждой из которых отображается содержимое отдельной страницы. Для создания фреймов используют тег <frameset> и парный ему тег </frameset>, а для их описания теги – <frame>. Разберем пример: <html> <head> <title>Страница с фреймами<title> </head> <frameset cols=”20%, 80%” rows=”*” border=”5” frameborder=”yes”> <frame src=”menu.html”> <frame src=”home.html”> </frameset> <body> </body> </html> Как Вы уже заметили, второстепенные документы вставляются в главный с помощью тегов <frameset> и <frame>. В теге <frameset> с помощью атрибута cols указывается, что экран разделяется на две колонки (cols=”20%, 80%” – первая колонка 20%, вторая 80% от ширины экрана.). Размер фрейма может быть указан не только числовым значением, но и символом *, например cols=”150, *”. Это означает, что первый фрейм занимает 150 пикселей, а второй рядом, все остальное пространство экрана. Употребление символа * связано с тем, что созданные Вами страницы будут просматривать пользователи, у которых мониторы имеют разное разрешение. Тег src указывает на документ, загружаемый во фрейм при запуске. Атрибут border задает ширину обрамления (0-10). Атрибут frameborder указывает, будет ли обрамление у фреймов (yes-no). Рассмотрим более сложный пример в котором все документы при нажатии на ссылки одного фрейма, открываются в другом: Создадим HTML-документ содержащий фреймы и назовем его MyFrames.html: <html> <head> <title>Фреймы</title> </head> <frameset cols=”220,*” rows=”*” border=”5” frameborder=”yes”> <frame src=”menu.html” name=”menu”> <frame src=”home.html” name=”main”> </frameset> <body> </body> </html> Атрибут name задает имя фрейму, которое будет использоваться далее. Создадим еще один документ (menu.html), который загружается при старте во фрейм MENU: <html> <head> <title>Меню</title> <base target=”main”> </head> <body bgcolor=”green” link=”red” vlink=”yellow” alink=”blue”> <a href=”doc1.html”>Открыть документ 1 </a> </body> </html> Тег <base target=” ”> указывает браузеру, в каком фрейме нужно открывать ВСЕ документы при нажатии на ссылки левого фрейма (в данном случае это правый фрейм - main). Теперь создадим содержимое основного (правого – home.html) фрейма: <html> <head> <title>Главный фрейм</title> </head> <body> <center><h2>Моя страничка </h2></center> </body> </html> Обязательно поместите эти HTML-документы в один каталог и запустите MyFrames.html. Если Вы будете увеличивать количество разделов Вашего сайта и вставлять графические изображения, то у Вас может появиться полоса прокрутки. Управлять появлением полос прокрутки на экране можно с помощью атрибута scrolling тега <frame>. Возможные значения атрибута scrolling: Scrolling=”yes” – у фрейма всегда будут полосы прокрутки независимо от того, нужны они или нет; Scrolling=”no” – у фрейма не будет полос прокрутки, независимо от того, нужны они или нет; Scrolling=”auto” – у фрейма будут полосы прокрутки только в случае необходимости. Атрибут noresize запрещает изменение размеров фрейма(у него нет атрибутов) . Просмотр Урок №9. Бегущая строка Очень интересное графическое решение, которое может украсить Вашу страничку – бегущая строка. Тегом, создающим бегущую строку, является тег <marquee> текст </marquee>. На место слова текст подставляется любое слово или фраза, которую надо заставить бежать по экрану. Самый простой вариант расположения текста в бегущей строке – когда вставленная фраза появляется из-за правого края окна и, пройдя через всю страницу, скрывается за левым.  Направление движения бегущей строки можно менять. Для этого применяется специальный атрибут direction=”left”. <marquee direction=”right”> текст </marquee> - текст движется слева направо.  Чтобы задавать характер движения надписи, применяется атрибут behavior=” ” . Атрибут может принимать следующие значения: Scroll – стандартное движение от правого края к левому. (см. выше); Slide – надпись один раз пробегает от правого края к левому и там остается;  Alternate – движение от правого края страницы к левому и обратно. Бесконечный цикл.  Пример: <marquee behavior=”alternate” width=”70%” height=”10” bgcolor=”green”> <font color=”red”>Текст бегущей строки</font></marquee>  Вы наверное уже догадались, что тег width=” ” – задает ширину бегущей строки (в процентах или пикселях), height=” ” – высоту (только в пикселях), bgcolor=” ” – цвет фона бегущей строки. А вот вложенный парный тег <font color=”red”> текст </font>, задает цвет текста бегущей строки с помощью атрибута color=”n”, где n – цвет. Однако этот тег можно применять и к обычному тексту. Можно увеличить или уменьшить скорость бегущей строки, вставив атрибут scrolldelay=”n”, где n – скорость в миллисекундах. |