Создание разноцветных таблиц

Вы не только можете окружить таблицу красивой рамкой, но ещё и задать для неё цвет, отличный от цветов текста и фона. Существует ряд атрибутов, которыми задаются цвета таблицы, границ и даже каждой отдельной ячейки.

Атрибут Значение

BGCOLOR= задаёт цвет фона таблицы

BORDERCOLOR= задаёт цвет границ таблицы

BORDERCOLORDARK= позволяют сделать эффект трех мерности таблицы

Фреймы

В каком-то смысле фрейм- это именно то, что означает данное слово: рамка вокруг картинки, окошко или страница. Вводя тег <FRAME>, дизайнер HTML-страницы разделяет экран броузера на части. В результате человек, просматривающий страницу, может изучать одну часть страницы независимо от остальной части. Фактически броузер, распознающий фреймы, загружает разные страницы в разные секции, или фреймы, экрана. Например, вы можете построить страницу таким образом, что фирменный знак будет зафиксирован в верхней части экрана, в то время как остальную часть страницы пользователь пролистывает обычным способом.

Создание простой страницы с фреймами.

Построим страницу с двумя фреймами. Зададим слева фрейм оглавления с заголовками статей, а справа поместим страницу с самими статьями. Сделаем так, что когда пользователь щёлкнет мышкой на ссылке в той части экрана, где находится оглавление, сама статья появляется в правом фрейме. Это основной, наиболее распространённый способ использования фреймов.

Задание фреймовой структуры.

Для начала мы должны представить себе общий вид страницы – где и какого размера будут фреймы. Затем можно подумать об их содержании. Ниже приводится код простой фреймовой структуры с использованием тега <FRAMESET>. Обратите внимание: страница с фреймовой структурой не содержит тега <BODY>.

<html>

<head>

<title> пример фреймов<title>

</head>

</frameset>

</html>

В результате мы получили экран, разделённый на два окна. Левое окно занимает 25% экрана и содержит страницу с названием a.html. Окно справа займет 75% и содержит файл b.html. Пока у нас их нет, так что вы увидите страницу с двумя пустыми фреймами. Прежде чем она появится, нам придётся пару раз щёлкнуть мышкой в ответ на сообщения об ошибках, потому что броузер будет пытаться найти несуществующие страницы.

Тег <FRAMESET>. Теги <FRAMESET> обрамляют текст, описывающий компоновку фреймов.

Здесь размещается информация о числе фреймов, их размерах и ориентации (горизонтальной или вертикальной). У тега <FRAMES> только два возможных атрибута: ROWS=, задающий число строк, и COLS=, задающий число столбцов. Между тегами <FRAMES> и не требуется указания тега <BODY>. Единственными тегами, которые могут находиться между тегами 11 <FRAMES> и </FRAMES>, являются теги <FRAME>, <FRAMESET> и <NOFRAME>. Это упрощает задачу. В основном всё связано с тегами <FRAME> и их атрибутами.

Атрибуты ROW= и COLS= похожи. Для каждой строки и столбца, упомянуты в теге <FRAMESET>, должен быть свой набор тегов <FRAME>.

Атрибут ROWS= Атрибут ROWS= тега <FRAMESET> задаёт число и размер строк на странице. Количество тегов <FRAME> должно соответствовать указанному числу строк. Справа от знака “=” можно определить размер каждой строки в пикселях, процентах от высоты экрана или в относительных величинах (обычно это указание занять оставшуюся часть места). Следует пользоваться кавычками и запятыми, и оставлять пробелы между значениями атрибутов.

Следует тег <FRAMESET> создаёт экран, на котором верхняя строка занимает 10% высоты экрана, средняя – 60%, а нижняя – оставшиеся 30%: <FRAMESET ROWS=”10%, 60%, 30%”>

Атрибут COLS=. Столбцы задаются так же, как строки. Для них применимы те же атрибуты.

Тег <FRAME>. Тег <FRAME> определяет внешний вид и поведение фрейма. Этот тег не имеет закрывающего тега, поскольку в нём ничего не содержится. Вся суть тега <FRAME> в его атрибутах. Их шесть: NAME=, MARGINWITH=, MARGINHEIGHT=, SCROLLING=, NORESIZE= и SRC=.

Атрибут NAME=. Если вы хотите, чтобы при щелчке мыши на ссылке соответствующая страница отображалась в определённом фрейме, вы должны указать этот фрейм, чтобы страница знала, куда что загружать. В предыдущих примерах мы назвали большой правый фрейм main, и именно в нём появлялись страницы, выбранные из оглавления в левом фрейме. Фрейм, в котором отображаются страницы, называется целевым (target). Фреймы, которые не являются целевыми, именовать не обязательно. Например, можно записать такую строку: <FRAME SRC=”my. html” NAME=”main”>

Имена целевых фреймов должны начинаться с буквы или цифры. Одни и те же имена разрешается использовать в нескольких фреймовых структурах. По щелчку мыши соответствующие страницы будут отображаться в именованном фрейме.

Атрибут SRC=. Атрибут SRC= применяется в теге FRAME при разработке фреймовой структуры для того, чтобы определить, какая страница появится в том или ином кадре. Если вы зададите атрибут SRC= не для всех фреймов, у вас возникнут проблемы. Даже если страницы, отображаемые во фрейме, выбираются в соседнем фрейме, вы должны, по крайней мере, задать для каждого фрейма начальную страницу. Если вы не укажите начальную страницу и URL, фрейм окажется пустым, а результаты могут быть самыми неожиданными.

Атрибут TARGET=. Чтобы разобраться с атрибутом TARGET=, необходимо вернуться к простому примеру с кадром оглавления. Когда пользователь щёлкает мышкой на одной из ссылок в левом фрейме, соответствующая страница должна появиться в правом фрейме, а оглавление остаётся неизменным. Чтобы этого добиться, нужно определить целевой фрейм TARGET, в котором будет отображаться страница для каждого пункта оглавления. Задание целевых фреймов осуществляется в фреймах в ссылках левого фрейма. Вот зачем всем кадрам во фреймовой структуре были присвоены имена. Правый фрейм называется main, так что нужно в каждой ссылке добавить атрибут TARGET=”main”, в результате чего соответствующая страница появится во фрейме main. Обратите внимание: каждая ссылка содержит атрибут TARGET=”main”, который в ответ на щелчок мышью отображает страницу во фрейме main.

Таблица основных тегов HTML

Основные теги
<html></html>	Указывает программе просмотра страниц, что это HTML документ.
<head></head>	Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.
<body></body>	Определяет видимую часть документа
Теги оглавления
<title></title>	Помещает название документа в оглавление программы просмотра страниц
Атрибуты тела документа
<body bgcolor=?>	Устанавливает цвет фона документа, используя значение цвета в стандарте RGB - пример: FFFF00 - желтый цвет.
<body text=?>	Устанавливает цвет текста документа, используя значение цвета в стандарте RGB - пример: 00ff00 - зеленый цвет.
<body link=?>	Устанавливает цвет гиперссылок, используя значение цвета в стандарте RGB - пример: 00FF00 - зеленый цвет.
<body vlink=?>	Устанавливает цвет гиперссылок, на которых вы уже побывали, используя значение цвета в виде стандарте RGB - пример: 333333 - темно-серый цвет.
<body alink=?>	Устанавливает цвет гиперссылок при нажатии.
Теги форматирования текста
<pre></pre>	Обрамляет предварительно отформатированный текст.
<h1></h1>	Создает САМЫЙ БОЛЬШОЙ заголовок (как отдельный абзац)
<h6></h6>	Создает САМЫЙ МАЛЕНЬКИЙ заголовок
<b></b>	Создает жирный текст
<i></i>	Создает наклонный текст
<tt></tt>	`Создает текст - имитирующий стиль печатной машинки.`
<cite></cite>	Используется для цитат, обычно наклонный текст.
<em></em>	Используется для выделения из текста слова (наклонный или жирный текст)
<font size=?></font>	Устанавливает размер текста в пределах от 1 до 7.
<font color=?></font>	Устанавливает цвет текста, используя значение цвета в виде RGB.
Гиперссылки
<a href="URL"&gtТЕКСТ</a>	Создает гиперссылку на другие документы или часть текущего документа. Здесь URL адрес ссылки, ТЕКСТ - текст ссылки.
<a href="URL"> < img src="imgURL" > </a>	Создает гиперссылку на рисунок, находящийся по адресу imgURL.
<a name="NAME"></a>	Отмечает часть текста как место перехода по гиперссылке в документе.
<a href="#NAME"></a>	Создает гиперссылку на помеченную часть текущего документа.
Форматирование
<p>	Создает новый параграф
<p align=?>	Выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center
<br>	Вставляет перевод строки.
<ol></ol>	Создает нумерованный список
<ul></ul>	Создает ненумерованный список
<li>	Предваряет каждый элемент списка и добавляет кружок или квадратик.
Графические элементы
<img src="name">	Добавляет изображение в HTML документ
<img src="name" align=?>	Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle
<img src="name" border=?>	Устанавливает толщину рамки вокруг изображения
<hr>	Добавляет в HTML документ горизонтальную линию.
<hr size=?>	Устанавливает высоту(толщину) линии
<hr width=?>	Устанавливает ширину линии, можно указать ширину в пикселях или процентах.
<hr noshade>	Создает линию без тени.
<hr color=?>	Задает линии определенный цвет. Значение RRGGBB.
Таблицы
<table></table>	Создает таблицу.
<tr></tr>	Определяет строку в таблице.
<td></td>	Определяет отдельную ячейку в таблице.
<th></th>	Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)
Атрибуты таблицы
<table border=#>	Задает толщину рамки таблицы.
<table width=#>	Устанавливает ширину таблицы в пикселях или процентах от ширины документа.
<tr align=?> или <td align=?>	Устанавливает выравнивание ячеек в таблице, принимает значения:left, center, или right. (здесь right)

Для закрепления теоретических знаний выполнить комплексные практические работы.

Разработка HTML-документа (web-страницы)

Упражнение 1. Вызовите текстовый редактор БЛOКНОТ, который находится в группе " Стандартные ". Наберите следующий ниже текст и сохраните под именем web1.html в папку html_text, которая находится по следующему пути C:\Users\www05-21_12_2000\html exercises.

<HTML>

<HEAD>

<TITLE>Моя персональная страничка (заголовок)</TITLE>

</HEAD>

<BODY>

ПРИВЕТ! Это моя личная домашняя страничка! Меня зовут (Укажите свою фамилию, имя и отчество).

</BODY>

</HTML>

Вызовите теперь Netscape Navigator и Internet Explorer. Используя меню FILE (Файл), команду Open File (Открыть), откройте свой файл web1.html и отметьте, как он будет выглядеть в браузерах.

Упражнение 2. Откройте файл web1.html в БЛOКНОТЕ и измените его так, как показано ниже. После редактирования файл web1.html сохраните под именем web2.htmlв папкуC:\Users\www05-21_12_2000\html exercises\html_text.

<HTML>

<HEAD>

<TITLE>Моя персональная страничка (заголовок)</TITLE>

</HEAD>

<BODY>

<H1 ALIGN = Center> ПРИВЕТ! Это моя личная домашняя страничка! Меня зовут (Укажите свою фамилию, имя и отчество). </H1>

<hr>

<H2> Мой город </H2>

<p>Я живу в Минске

<H3 ALIGN =Left> Моя работа </H3>

<p align = left> Я работаю в ……

<H4 ALIGN = Center> Мои увлечения </H4>

<p align = center> Мои увлечения ‑ ……

<H5 ALIGN = Right> Мои коллеги </H5>

<p align = right> Мои коллеги ….. </p>

<br>

<HR>

<H6 ALIGN = Center> Design "NIHE" </H6>

</BODY>

</HTML>

Упражнение 3. Откройте файл web2.html в БЛОКНОТЕ и отредактируйте как показано ниже. После редактирования файл web2.html сохраните под именем web3.htmlв папкуC:\Users\www05-21_12_2000\html exercises\html_text.

<HTML>

<HEAD>

<TITLE>Моя персональная страничка </TITLE>

</HEAD>

<BODY>

<H1 ALIGN = Center> ПРИВЕТ! Это моя личная домашняя страничка! Меня зовут (Укажите свою фамилию, имя и отчество). </H1>

<hr>

<H2> Мой город </H2>

<p>Я живу в <FONT SIZE = +2>Минске</FONT>

<H3> Моя работа </H3>

<p> Я работаю в ……

<H4> Мои увлечения </H4>

<p> Мои увлечения ‑ <B>музыка</B>, спорт.

<H5 > Мои коллеги </H5>

<p> <U> Мои коллеги</U> во всем мне <I>помогают</I>. </p>

<H6 ALIGN = Center> Design "NIHE" </H6>

</BODY>

</HTML>

Упражнение 4. Создайте HTML-документ следующего вида:

<HTML>

<HEAD>

<TITLE>Советы по изготовлению страничек</TITLE>

<HEAD>

<BODY>

<PRE>

Хорошие советы!!!!!

Тиканье, мерцание, перемещение, прокрутка… Эти новые спецэффекты повсюду на Web.

‑ По возможности избегайте пиктограммы "В процессе производства";

‑ Используйте соответствующий язык;

‑ Не перегружайте страницу большими изображениями;

‑ Проверяйте как можно чаще ссылки на вашей странице.

</PRE>

</BODY>

</HTML>

Сохраните данный документ под именем web4.html в папку C:\Users\www05-21_12_2000\html exercises\html_text. Сравните написанный Вами текст (между флагами <PRE> и </PRE>) с изображением на экране, полученным с помощью программы просмотра.

Упражнение 5. Создайте документ, в котором текст будет организован с помощью списков трех видов (см. табл. 1), и сохраните под именем web5.html в папку C:\Users\www05-21_12_2000\html exercises\html_text.

Таблица 1. Операторы HTML для описания списка.

Нумерованный список – Ordered List	Маркированный список – Unordered List	Вложенный список – Nested List
<ol> <li> </ol>	<ul> <li> </ul>	<ol> <li> <ul> <li> </ul> <li> </ol>

<HTML>

<HEAD>

<TITLE>Страница со списками</TITLE>

</HEAD>

<BODY>

<H2 ALIGN = Left>Страница со списками</H2>

<ol>

<li>По возможности старайтесь избегать пиктограммы "В процессе производства";

<li>Используйте соответствующий язык;

</ol>

<ul>

<li>Не перегружайте страницу большими изображениями;

<li>Проверяйте как можно чаще ссылки на вашей странице.

</ul>

<ol>

<li>Перед тем как положить готовую страничку на сервер следует:

<ul>

<li>Проверить грамматические ошибки;

<li>Просмотреть свою страничку в различных программах просмотра.

</ul>

<li>Для рекламы страницы необходимо:

</ol>

</BODY>

</HTML>

Откройте файл web5.html в программе просмотра и посмотрите на изображение. Внесите следующие изменения в первый блок пронумерованного списка таким образом, как приведено в примерах 1 и 2, и посмотрите, как будет меняться вид документа в программе просмотра.

Пример 1.

<ol>

<li>По возможности старайтесь избегать пиктограммы "В процессе производства";

<li>Используйте соотвествующий язык;

Пример 2.

<ol>

<li>По возможности старайтесь избегать пиктограммы "В процессе производства";

<li>Используйте соотвествующий язык;

<ol>

Упражнение 6. Создайте в текстовом редакторе файл web6.html следующего содержания:

<HTML>

<HEAD>

<TITLE>Термины </TITLE>

</HEAD>

<BODY>

<dl>

<dt>Web Server

<dd><p>Web-сервер. Сервер, хранящий и пересылающий HTML-документы, и другие информационные ресурсы Интернет с использованием протокола HTTP. Его называют также HTTP-сервером.</p>

<dt>HOME PAGE

<dd><p> "Домашняя страница". Головная, начальная страница, локальный архив. Первая страница какого-либо Web-сервера или логически связанной группы HTML-документов.</p>

</dl>

</BODY>

</HTML>

Практическое задание 1. Откройте в текстовом редакторе HTML-документ web3.html, добавьте новую информацию и отформатируйте его с использованием заголовков нескольких уровней, выровненных по центру, левому или правому краю; параграфов с текстом; текст должен быть выделен различными способами (полужирный шрифт, курсив, разный кегль); горизонтальных линий; списков; сохраните этот файл под именем index1.html.

Упражнение 7. Создайте в текстовом редакторе HTML-документ web7.html, используя параметры для тега <BODY

Примечание. Цвет указывается шестнадцатеричным числом имеющим следующую структуру: RED – GREEN – BLUE или RGB (красный – зеленый ‑ синий). На каждый цвет отводится 256 значений обозначающих присутствие того или иного компонента в результирующем цвете. Например, максимум красного – FF, остальные два цвета – 00, результат – "#FF0000"

<HTML>

<HEAD>

<TITLE>Моя персональная страничка </TITLE>

</HEAD>

<p>На данной страничке текст и изображения будут располагаться на белом фоне.

</p>

<p>Шрифт может быть

<FONT COLOR="#0000A0">разного</FONT> цвета.

</p>

</BODY>

</HTML>

Упражнение 8. Создайте файл с именем web8.html следующего содержания:

<HTML>

<HEAD>

<TITLE>Моя персональная страничка </TITLE>

</HEAD>

<p><FONT SIZE=+3<b>На данной страничке текст и изображения будут располагаться на фоне "обоев"</b>

</FONT></p>

</BODY>

</HTML>

Упражнение 9. Откройте гипертекстовый документ web8.html в текстовом редакторе, вставьте в него графическое изображение из файла ag00001_.gif определенного размера и сохраните под именем web9.html.

Примечание 1. Графическое изображение может иметь несколько дополнительных параметров:

Width – ширина;

Height – высота;

Align ‑ выравнивание

Absmiddle или center – центрирование;

Left – по левому краю;

Right – по правому краю.

Примечание 2. Если графическое изображение требуется расположить внутри параграфа, то его можно выровнять:

по левому полю – ALIGN=left;

по правому полю – ALIGN=right;

по верхней границе – ALIGN=top;

по нижней границе – ALIGN=bottom;

по центру – ALIGN=middle или center.

<HTML>

<HEAD>

<TITLE>Страница со списками</TITLE>

</HEAD>

<HTML>

<HEAD>

<TITLE>Моя персональная страничка </TITLE>

</HEAD>

<p><FONT SIZE=+3><b> На данной страничке текст и изображения будут располагаться на фоне "обоев"</b>

</FONT></p>

<p>Изображение в натуральную величину – WIDTH = 254 pix., HEIGHT=190 pix.

</BODY>

</HTML>

Упражнение 10. Откройте в текстовом редакторе файл web9.html и сохраните его под именем web10.html. В новом документе измените размеры рисунка в два раза.

<HTML>

<HEAD>

<TITLE>Моя персональная страничка </TITLE>

</HEAD>

<p><FONT SIZE=+3><b> На данной страничке текст и изображения будут располагаться на фоне "обоев"</b>

</FONT></p>

<p>Изображение увеличено в три раза – WIDTH = 250 pix., HEIGHT=150 pix.

</BODY>

</HTML>

Посмотрите как выглядит изображение на экране.

Примечание. На размер графического файла в байтах не накладывается никаких огрничений, но все же необходимо помнить, что передача большого графического (да и текстового) файла может занять очень много времени, особенно при низкой пропускной способности сети. Предлагая файл размером более 100 кбайт, рекомендуем Вам предупредить об этом получателя, указав длину файла в гиперссылке.

Упражнение 11. Создайте новый гипертекстовый документ следующего ниже содержания, сохраните его в файле под именем web11.html и проверьте его программой просмотра:

<HTML>

<HEAD>

<TITLE>Welcome to our web-site</TITLE>

</HEAD>

<H3 align=center>Приглашаем Вас посетить наш Web-сервер!</H3>

<p>Слово "Интернет" часто встречается в печати, по телевизору, радио. Про Интернет говорят друзья, знакомые и особенно много говорят о страничках и WWW. У некоторых есть даже собственные.

<p>Сегодня об Интернет говорят, как о средстве меняющем не только условия жизни, но и мировоззрение человека.

<p>Зарождается новое поколение, которое сможет общаться в новом информационном пространстве, киберпространстве или в новой виртуальной реальности.

</BODY>

</HTML>

Практическое задание 2. Откройте в текстовом редакторе HTML-документ index1.html, измените цвет "обоев", вставьте несколько графических изображений, выровненных по центру, левому или правому краю; параграфов с текстом, внутри хоты бы одного из них расположите графическое изображение и измените его размер; сохраните этот файл под именем index2.html.

Упражнение 12. Подготовьте в текстовом редакторе документ следующего вида с табличными элементами, используя атрибуты для тега TABLE (таблица)и других тегов, и сохраните его под именем web12.html.

<HTML>

<HEAD>

<TITLE>Таблица</TITLE>

</HEAD>

<BODY>

<H2 ALIGN =Center> Простой вариант таблицы</H2>

<TR><TD>ячейка A:-)</TD>

<TD>ячейка таблицы B:-)</TD>

<TD>ячейка C:-)</TD></TR>

<TR><TD>ячейка D:-)</TD>

<TD>ячейка таблицы E:-)</TD>

<TD>ячейка F:-)</TD></TR>

</TABLE>

</BODY>

</HTML>

Упражнение 13. Откройте в текстовом редакторе файл web12.html и задайте заголовки для строк и столбцов. Сохраните измененный файл под именем web13.html.

<HTML>

<HEAD>

<TITLE>Таблица</TITLE>

</HEAD>

<BODY>

<H2 ALIGN =Center> Простой вариант таблицы заголовками</H2>

<TR><TH>Заголовок 1</TH> <TH> Заголовок 2</TH> <TH> Заголовок 3</TH></TR>

<TR><TD>ячейка A:-)</TD>

<TD>ячейка таблицы B:-)</TD>

<TD>ячейка C:-)</TD></TR>

<TR><TD>ячейка D:-)</TD>

<TD>ячейка таблицы E:-)</TD>

<TD>ячейка F:-)</TD></TR>

</TABLE>

</BODY>

</HTML>

Упражнение 14. В текстовом редакторе создайте HTML-документ нижеследующего содержания и сохраните его в виде файла под именем web14.html.

<HTML>

<HEAD>

<TITLE>Таблица</TITLE>

</HEAD>

<BODY>

<H2 ALIGN =Center>Таблица</H2>

<TR>

<TD ALIGN=Center ROWSPAN=2 COLSPAN=2>Большая ячейка A</TD>

<TD>Маленькая ячейка 1</TD>

<TD>Маленькая ячейка 2</TD>

</TR>

<TR>

<TD>Маленькая ячейка 3</TD>

<TD>Маленькая ячейка 4</TD>

</TR>

<TR>

<TD ALIGN=Center ROWSPAN=2 COLSPAN=2>Большая ячейка C</TD>

<TD ALIGN=Center ROWSPAN=2 COLSPAN=2>Большая ячейка D</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Упражнение 15. Создайте следующий документ, сохраните его под именем web15.html.

<HTML>

<HEAD>

<TITLE>Таблица</TITLE>

</HEAD>

<BODY>

<H2 ALIGN =Center>Таблица</H2>

<TR>

<TD WIDTH=80%>Таблица, ширина которой 50% ширины экрана. Столбец, ширина которого 80% ширины таблицы</TD>

<TD>ячейка 2</TD>

</TR>

<TR>

<TD>ячейка 3</TD>

<TD>ячейка 4</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Практическое задание 3. Создайте HTML-документ, который будет содержать таблицу следующей структуры:

Таблица
Длина ячейки 2 см	Длина ячейки 6 см	Длина ячейки 3 см	Длина ячейки 5 см

Сохраните данный документ под именем index3.html.

Упражнение 16. Используя описание основных тегов для создания кадров и их атрибутов, создайте HTML-документ, состоящий из двух кадров, и сохраните его под именем web16. html.

Для страницы содержащей кадры Вам понадобятся два HTML-документа (как минимум). Например, два документа следующего вида с именами k1.html и k2.html:

файл k1.html

<HTML>

<HEAD>

<TITLE>Кадр. Страница 1</TITLE>

</HEAD>

<BODY>

СТРАНИЦА 1

</BODY>

</HTML>

файл k2.html

<HTML>

<HEAD>

<TITLE>Кадр. Страница 2</TITLE>

</HEAD>

<BODY>

СТРАНИЦА 2

</BODY>

</HTML>