§5. Использование графики в Web-страницах.
Сегодня все Web- страницы содержат графические изображения. Графические изображения в Web имеют формат GIF или JPEG. Для создания URL изображения используется одиночный дескриптор <IMG>, имеющий следующий синтаксис:
<IMG SCR=URL_изображения>.
Для определения фонового рисунка используется дескриптор <BODY BACKGROUND =URL_изображения>.
<HTML>
<TITLE>Графические изображения</TITLE>
<BODY>
<BODY BACKGROUND= "badscan2.jpg" >
</BODY>
</HTML>
Ширину и высоту изображения можно определить с помощью атрибутов HEIGTH и WIDTH.
Например, <IMG SRC=”ris1.gif” HEIGTH=400 WIDTH=450 ALIGN =LEFT> устанавливает высоту 400 пикселей , ширину в 450 пикселей и выравнивание рисунка влево
В Web-страницах можно использовать изображение-ссылки. Изображение-ссылки - это изображения на Web-странице, щелкнув на котором, можно открыть новую страницу или службу internet. Типичный HTML-код изображения-ссылки выглядит примерно так:
< A HREF=”URL”><IMG SRC=”имя_файла_изображения”></A>
Использование графики в Web- страницах является очень важным элементом для формирования и форматирования Web- страниц. Учащимся можно предложить следующие примерные задания.
Создайте раздел объявлений в графическом редакторе. Сохраните изображение в виде графического файла формата .GIF и вставьте рисунок в Web –страницу.
Наберите газетный текст с рисунками в графическом редакторе. Сохраните изображение в соответсвующем формате и добавьте в Web-страницу.
Создайте 3-4 кадра графических объектов. Создайте анимацию этих кадров.
Создайте Web - cтраницу “Треугольники и признаки их равенства”
Создайте Web - cтраницу “Мой дом”
Создайте электронную мини-газету.
Создайте каталог фото ваших родственников.
Создайте Web-страницу о ваших одноклассниках с использованием их фотографий.
Изучение редакторов, электронных таблиц можно привязать к этой теме. Это позволяет углубить знания учащихся о форматах информации, об их значимости при создании InterNet документов.
§6. Таблицы
В HTML - таблицах может содержаться информация любого типа. Таблицы позволяют более эффектно расположить на странице текст, графику и также создать четкую структуру страницы.
Чтобы описать таблицу, нужно указать количество строк и столбцов. Дескрипторы <TR> и </TR> определяет одну строку таблицы. Дескриптор <TD>(данные таблицы) определяет данные ячейки, <TH>заголовок колонки.
Приведем пример создания таблицы:
<HTML>
<HEAD>
<TITLE>Таблицы</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=2 WIDTH="90%"
<TR><TH>Фамилия<TH>Имя<TH>Дата рождения</TR>
<TR><TD>Иванов<TD>Сергей<TD>15.04.1989</TR>
<TR><TD>Петров<TD>Николай<TD>25.03.1991</TR>
</BODY>
</HTML>
|
В результате просмотра страницы мы увидим следующее. Строка <TABLE BORDER=2 WIDTH="90%" определяет стиль бордюра таблицы и ширину в 90% от ширины Web –страницы. При изменении ширины окна броузера будет меняться и ширина таблицы. Обратите внимание на шрифт заголовков. С помощью атрибута COLS , помещенного в дескриптор <TABLE>, можно определить количество столбцов таблицы: < TABLE COLS=”10” Увеличить размер ячеек можно выполнить с помощью атрибутов COLSPAN и ROWSPAN. |
<HTML>
<HEAD>
<TITLE>Таблицы</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=2 WIDTH="90%"
<TR><TH COLSPAN =2>ЖИВОТНЫЕ</TR>
<TR><TH>Лошади</TH>
<TH> Собаки</TH>
<TR><TD ALIGN=CENTER> двадцать</TD>
<TD ALIGN=CENTER>пять</TD></TR>
</BODY>
</HTML>
|
Обратите внимание на синтаксис выравнивания текста в каждой ячейке таблицы.
Аналогично можно объединить строки колонки с помощью директивы ROWSPAN. |
<HTML>
<HEAD>
<TITLE>Таблицы</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=2
<TABLE COLS="3"
<TR>
<TH ROWSPEAN =5>
Студенты математического факультета
Нижневартовского пединститута</TH></TR>
<TR><TH> 1 курс </TH><TR>
<TR> <TD>1.Иванов Николай Петрович</TD><TD> группа 11</TD></TR>
<TR><TD>2.Петров Николай Иванович</TD><TD> группа 11</TD></TR>
<TR><TD>3.Александров Алексей Николаевич </TD><TD> группа 12</TD></TR>
</BODY>
</HTML>
|
С помощью контейнера <CAPTION> к таблицам можно добавить подписи. Например, если в предыдущий файл добавить строку <CAPTION ALIGN=BUTTOM> Моя таблица</CAPTION>, то сверху таблицы добавиться строка с заголовком таблицы. Помимо BOTTOM в контейнере CAPTION можно использовать TOP, LEFT, RIGHT. Для учащихся можно предложить готовый НTML документ для просмотра, предварительно указав вопросы:
|
<BODY>
<TABLE>
<CAPTION ALIGN=TOP> ПЕРВАЯ ТАБЛИЦА</CAPTION>
<TABLE BORDER=2
<TABLE COLS="3"
<TR>
<TH ROWSPEAN =5>
Студенты математического факультета
Нижневартовского пединститута</TH></TR>
<TR><TH> 1 курс </TH><TR>
<TR> <TD>1.Иванов Николай Петрович</TD><TD> группа 11</TD></TR>
<TR><TD>3.Александров Алексей Николаевич </TD><TD> группа 12</TD></TR>
</TABLE>
<TABLE>
<TABLE BORDER=1
<CAPTION ALIGN=LEFT> ВТОРАЯ ТАБЛИЦА</CAPTION>
<TR><TH> 2 курс </TH><TR>
<TR> <TD>1.Николаев Николай Петрович</TD><TD> группа 21</TD></TR>
<TR><TD>2.Алексеев Александр Николаевич </TD><TD> группа 22</TD></TR>
</TABLE>
</BODY>
</HTML>
Для закрепления пройденного материала учащимся предлагаются создание следующих Web-страниц.
Электронный книжный магазин.
Электронный словарь (без программирования поиска).
Классный журнал.
Сведения о моих друзьях.