
	Главная \| Карта сайта


	РАЗДЕЛЫ


	ПАРТНЕРЫ


	АЛФАВИТ

... А Б В Г Д Е Ж З И К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Э Ю Я


	ПОИСК

Дипломная работа: Методика обучения теме "Создание Web-страниц с помощью языка HTML" в курсе информатики для слабослышащих школьников 11-х классов

Рис.8. Отображение браузером комбинированного списка

Запись HTML кода выглядит так:

<HTML>

<HEAD>

<TITLE>Комбинированный список </TITLE>

</HEAD>

<BODY>

<UL>

<B>Спутники некоторых планет</B>

<LI>Земля

<OL>

<LI>Луна

</OL>

<LI>Марс

<OL>

<LI>Фобос

<LI>Деймос

</OL>

<LI>Уран

<OL>

<LI>Ариэль

<LI>Умбриль

<LI>Титания

<LI>Оберон

<LI>Миранда

</OL>

<LI>Нептун

<OL>

<LI>Тритон

<LI>Нереида

</OL>

</UL>

</BODY>

</HTML>

Наряду со списками существует еще одна очень распространенная форма представления данных – таблица. Поговорим о ней.

§2.1.6 Таблицы

Важным инструментом Web-дизайна являются таблицы, которые используются не только для вывода табличных данных, но и для управления взаимным размещением текста и графики, создания колонок газетного типа, цветовых эффектов и т.д. Следует помнить, однако, что браузер отображает содержимое таблицы только по окончания ее загрузки, поэтому если весь 50- или 100-килобайтный документ разместить в одной гигантской таблице, ни один пользователь, скорее всего, не дождется загрузки такого документа.

Описание таблиц должно располагаться в разделе документа <BODY>.

Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга.

Ø <TABLE>…</TABLE> - служит для создания таблицы.

Параметры тега:

- ALIGH = ˝значение˝ - выравнивает всей таблицы относительно текста,

в котором она находится. Имеет значения:

- LEFT- слева.

- CENTER- по центру.

- RIGHT- справа.

- BORDER= ˝число˝ - ширина обрамления таблицы в пикселях.

- CELLSPACING= ˝число˝ - расстояние между ячейками в пикселях.

-CELLPADDING= ˝число˝ - размер свободного пространства между

границами ячейки и ее содержимым в пикселях.

- HSPACE= ˝число˝ - размер свободного пространства слева и справа от

таблицы, в пикселях.

VSPACE= ˝число˝ - размер свободного пространства сверху и снизу от

таблицы, в пикселях.

-WIDTH= ˝число˝ - требуемая ширина таблицы в пикселях или в процентах от ширины окна браузера.

- HEIGHT= ˝число˝- требуемая высота таблицы в пикселях или в процентах от ширины окна браузера.

Ø <TR>…</TR> - строка таблицы.

Ø <TD>…</TD> - ячейка строки таблицы.

Ø <TH>…</TH> - ячейка заголовок таблицы.

Закрыть тег </TABLE> и теги строк и столбцов обязательно.

Параметры тегов <TR> и <TD>:

- ALIGN= ˝значение˝ - выравнивает объекты в ячейках. Имеет

значения:

- LEFT- слева.

- CENTER- по центру.

- RIGHT- справа.

- VALIGH= ˝значение˝ - выравнивает ячейки по вертикали. Имеет

значения:

- TOP- по верхнему краю.

- BOTTOM- по нижнему краю.

- MIDDLE- посередине.

- BAZELINE- по базовой линии.

- WIDTH= ˝число˝ - ширина ячейки.

- HOWRAP- запрещает браузеру распределять текст по всей ячейке.

- ROWSPAN= ˝число˝ - объединяет смежные ячейки по горизонтали.

- COLSPAN= ˝число˝ - объединяет смежные ячейки по вертикали.

Приведем пример простейшей таблицы, состоящей из двух строк и

двух столбцов, отображение которой показано на рисунке 9. А HTML код ниже.

<HTML>

<HEAD>

<TITLE>Пример простейшей таблицы</TITLE>

</HEAD>

<BODY>

<TR>

<TD>Ячейка 1 строки 1 </TD>

<TD> Ячейка 2 строки 1 </TD>

</TR>

<TR>

<TD> Ячейка 1 строки 2 </TD>

<TD> Ячейка 2 строки 2 </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Рис.9. Отображение браузером простейшей таблицы

Если ячейку следует оставить пустой, в нее обычно помещают ˝жесткий˝ символ пробела >&nbsp

Ø <CAPITON>…</CAPITON> - заголовок таблицы. Описание заголовка должно располагаться внутри тегов <TABLE>…</TABLE> до первого

тега <TR>.

Параметры тега:

- ALIGN= ˝значение˝ - выравнивает заголовок. Имеет значения:

- TOP – над таблицей.

- LEFT- слева.

- CENTER- по центру.

- RIGHT- справа.

Еще несколько параметров, позволяющих выбирать цвет рамок таблиц:

- BORDERCOLOR= ˝цвет˝ - определяет цвет всех элементов рамок таблицы.

- BORDERCOLORLIGHT= ˝цвет˝ - окрашивает в заданный цвет левый и верхний края всей таблицы и соответственно правый и нижний края каждой ячейки.

- BORDERCOLORDARK= ˝цвет˝ - задает цвета противоположных сторон.

Приведем пример таблицы с некоторыми заданными параметрами тега <TABLE>. Ее отображение показано на рисунке 10. А запись HTML кода представлена ниже.

<HTML>

<HEAD>

<TITLE>Пример </TITLE>

</HEAD>

<BODY>

<CAPITON ALIGN=BOTTON><H1>Заголовок, располагаемый внизу таблицы </H1></CAPITON>

<TR>

<TD>Ячейка 1 строки 1 </TD>

<TD> Ячейка 2 строки 1 </TD>

</TR>

<TR>

<TD> Ячейка 1 строки 2 </TD>

<TD> Ячейка 2 строки 2 </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Рис.10.Отображение браузером таблицы с параметром тега <TABLE>

Далее приведем пример таблицы с некоторыми заданными параметрами тегов <TD> и <TR>. Ее отображение показано на рисунке 11. А запись HTML кода представлена ниже.

<HTML>

<HEAD>

<TITLE>Пример простейшей таблицы</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=5 WIDTH=100%

CELLSPACING=15 BORDERCOLOR=#000066>

<TH ALIGN=RIGHT>Ячейка 1 представлена как заголовок </TH>

<TD ALIGH =CENTER>Ячейка 2 </TD>

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

</TR>

<TR>

<TD ALIGH =CENTER>Ячейка 4 </TD>

<TD ALIGN=RIGHT>Ячейка 6 </TD>

</TR>

<TD ROWSPAN =2>Ячейка, захватывающая две строки </TD>

<TD COLSPAN=2> Ячейка, захватывающая две столбца </TD>

</TR>

<TR>

<TD>Ячейка 7</TD>

<TD>Ячейка 8</TD>

</TR>

<TD>Ячейка 10</TD>

<TD WIDTH=40%>Ячейка шириной 40% от ширины окна браузера

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Рис.11. Отображение браузером таблицы с параметром тегов <TD> и <TR>

Хочется отметить, что браузер Microsoft Internet Exporer позволяет использовать ряд новых тегов для структурирования таблиц и гибкого управления прорисовкой рамок и линий сетки.

Ø <THEAD> - используется для описания нижнего колонтитула таблицы.

Ø <TBODY> - используется для логического группирования данных.

Ø <TFOOT> - используется для описания нижнего колонтитула таблицы.

Управление прорисовкой линий и рамок вокруг таблицы

осуществляется параметрами тега<TABLE>:

-RULES= ˝значение˝ - прорисовка внутренних линий сетки таблицы.

Имеет значения:

-ALT- рисует все внутренние линии.

-GROUPS- рисует только линии, разделяющие группы.

- ROWS- рисует линии, разделяющие строки.

-COLS-рисует линии, разделяющие столбцы.

-NONE- внутренние линии не рисуются.

-FRAME= ˝значение˝ - прорисовка рамок вокруг таблицы. Имеет

значения:

-BOX или BORDER – рисует рамку со всех четырех сторон.

-ABOVE- рисует рамку только с верхней стороны.

-BELOW- рисует рамку только с нижней стороны.

-HSIDES- рисует нижнюю и верхнюю стороны.

-VSIDES- рисует левую и правую стороны.

-LHS- рисует только с левой стороны.

-RNS- рисует только с правой стороны.

-VOID- таблица без внешних рамок.

Приведем пример таблицы, созданной с использованием описанных возможностей. Ее отображение показано на рисунке 12, а ниже следует HTML код.

Рис.12. Отображение браузером таблицы с гибкой прорисовкой линий

<HTML>

<HEAD>

<TITLE>Дополнительные возможности</TITLE>

</HEAD>

<BODY>

<CAPTION><H1>Пример гибкого управления линиями <BR>сетки таблицы </H1><CAPTION>

<THEAD>

<TR>

<TH><H2>Заголовок столбца 1 </H2></TH>

<TH><H2>Заголовок столбца 2 </H2></TH>

<TH><H2>Заголовок столбца 3 </H2></TH>

</TR>

</THEAD>

<TBODY>

<TR>

<TD>Данные </TD>

</TR>

<TR>

<TD>Данные </TD>

</TR>

<TR>

<TD>Данные </TD>

</TR>

<TR>

<TD>Данные </TD>

</TR>

</TBODY>

<TFOOT>

<TR>

</TR>

</TFOOT>

</TABLE>

<BODY>

</HTML>

Далее рассмотрим возможность использования графики при создании WEB-страниц.

§2.1.7 Графика

Возможность использования графики трудно переоценить в приложении к любому виду публикации, в том числе и для WEB- документов. Без иллюстрации документ однообразен, вял и скучен. Расчетливо подобранная и правильно размещения в документе графика делает его визуально привлекательным.

Существует много способов описания графической информации, соответственно имеется большое количество форматов хранения графических файлов.

Как правило, браузеры поддерживают рисунки в форматах GIF и JPG.

Формат GIF обычно используется для хранения рисунков с четкими деталями, небольшим набором цветов (до 256) и возможностью анимации (˝мультипликация˝ на Web- страницах, графические кнопки, ˝украшения˝).

Кроме того, формат GIF поддерживает эффект прозрачности, то есть, точки определенного цвета можно сделать того же цвета, что и фон страницы. Второй полезный эффект – возможность чересстрочной загрузки изображения GIF – то есть, изображение может постепенно ˝проявляться˝ по мере загрузки страницы, что даст пользователю возможность уже на ранней стадии загрузки получить представление о содержании картинки.

Формат JPG используется для хранения полно-цветной графики и фотоизображений. Этот формат поддерживает 24-битовую графику, то есть, 16,7 миллиона цветов. Благодаря компрессии изображений, столь многоцветные файлы JPG имеют приемлемые размеры, но сжатие производится за счет некоторой потери качества. Поэтому при подготовке иллюстраций для Web- страницы всю предварительную обработку следует производить с несжатыми изображениями, например, в формате BMP, а в GIF или JPG конвертировать только окончательной вариант картинки.

Из доступных приложений эффективно управлять файлами в форматах GIF или JPG позволяет Microsoft Photo Editor, входящий в пакет программ Microsoft Office. Профессионалы используют гораздо более мощные графические пакеты, такие как Adobe PhotoShop и Corel Draw.

HTML позволяет легко добавить на страницу фоновое изображение.

Для этого достаточно указать параметр BACKGROUND= ˝URL рисунка˝ в тег <BODY>. Рисунок может быть в формате GIF или JPG/ Это продемонстрировано на рисунке 13.

Рис.13. Отображение браузером использования фонового изображения

<HTML>

<HEAD>

<TITLE>Пример</TITLE>

</HEAD>

<P>Пример использования фонового изображения </P>

</BODY>

</HTML>

Точно так же можно добавить фоновое изображение в таблицу, строку или ячейку таблицы – для этого достаточно указать параметр BACKGROUND= ˝URL рисунка˝ в теги <TABLE>, <TD>, <TR>.

Ø <IMG> - служит для встраивания изображения.

Параметры тега:

- SRC=˝URL рисунка˝- определяет URL–адрес файла с изображением.

Является обязательным параметром.

- WIDTH= ˝число˝ - ширина изображения в пикселях.

- HEIGHT= ˝число˝ - высота изображения в пикселях.

- BORDER= ˝число˝ - рамка вокруг изображения.

- HSPACE= ˝число˝ - отступ по горизонтали вокруг рисунка.

- VSPACE= ˝число˝ - отступ по вертикали вокруг рисунка.

- ALT= ˝текст˝ - выводится вместо изображения.

- ALIGN= ˝значение˝ - выравнивает изображение. Имеет значения:

-TOP- верхняя граница изображения выравнивается по самому высокому элементу текущей строки.

- TEXTTOP – верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки.

- MIDDLE – выравнивание середины изображения по базовой линии текущей строки.

- ABSMIDDLE – выравнивание середины изображения посередине текущей строки.

- BASELINE или BOTTOM – выравнивание нижней границы изображения по базовой линии.

- ABSBOTTOM – выравнивание нижней границы изображения по нижней границе текущей строки.

- LEFT – изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны.

- RIGHT - изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны.

Общая схема записи рисунка выглядит так:

Приведем пример использования некоторых параметров тега <IMG>. Отображение примера браузером показано на рисунке 14.

<HTML>

<HEAD>

<TITLE>Пример</TITLE>

</HEAD>

<BODY>

<P ALIGN= JUSTIF > <B> Компьютерная сеть </B> - это система взаимосвязанных компьютеров и терминалов, предназначенных для передачи, хранения и обработки информации. </P>

<P>ВАРИАНТЫ ВЫРАВНИВАНИЯ ИЗОБРАЖЕНИЯ</P>

</BODY>

</HTML>

Рис.14. Отображение браузером использования параметров тега <IMG>

Графические изображения могут использоваться как ссылка на

другие ресурсы. Схема такой записи:

<A HREF= ˝адрес˝><IMG SRC=˝URL рисунка˝> текст ссылки </A>.

Важным элементом языка HTML являются фреймы. О них и пойдет речь дальше.

§2.1.8 Фреймы

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

Документ, использующий фреймы, содержит только описание внешнего вида фреймов.

Ø <FRAMESET>…</FRAMESET> - обрамляет каждый блок определений фрейма. Используется вместо тега <BODY>.

Параметры тега:

- ROWS= ˝список величин˝ - описывает строки, таблицы фреймов.

- COLS= ˝ список величин˝ - описывает столбцы, таблицы фреймов.

Строка ˝список величин˝ представляет собой разделенный запятыми

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

Примеры:

1. <FRAMESET ROWS = ˝100, 240, 140˝> - создает сетку из 3 кадров, высота которых равна 100, 240 и 140 пикселей соответственно

2. <FRAMESET COLS =˝25%, 75%˝> - создает 2 кадра с шириной 25 и 75 процентов от ширины окна браузера.

3. <FRAMESET COLS =˝*,2*˝> - создает 2 кадра с шириной 1/3 и 2/3 ширины окна браузера.

4. <FRAMESET ROWS = ˝*,2*˝ COLS =˝*,2*˝> - создает сетку кадров.

- BORDER= ˝число˝ - указывает ширину обрамления всех рамок для

всех кадров, в пикселях;

- FRAMOBORDER= ˝значение˝ - включает или выключает

отображение обрамления кадров. Имеет значения yes или no (1 и 2). В случае yes рамка имеет трехмерную форму, иначе она невидима.

- FRAMESPACING= ˝число˝ - указывает ширину промежутка между

смежными кадрами в пикселях.

Ø <FRAME> - определяет одиночный фрейм. Располагается внутри тега

<FRAMESET>. Число тегов <FRAME> должно быть равно числу

кадров, определенных в теге <FRAMESET>, при этом считается, что

кадры описываются слева направо и сверху вниз.

Параметры тега:

- SRC= ˝ URL˝ - указывает URL исходного документа для данного кадра.

- NAME= ˝строка˝ - указывает имя кадра. Это необходимо сделать,

если предполагается ссылаться из одних кадров на другие.

- SCROLLING= ˝значение˝ - управляет линейками прокрутки кадра.

Значение может быть задано в виде yes(линейки есть всегда), no (никогда) или auto(если необходимо).

- NORESIZE – запрещает изменяться размеры кадра. Опция

NORESIZE, указанная для данного кадра, влияет также и на все кадры, смежные с ним.

- FRAMEBORDER= ˝число˝ - включает или выключает отображение

обрамления кадров. Имеет значения yes или no (1 или 2). В случае yes рамка имеет трехмерную форму, иначе она невидима.

Указание этой опции в теге <FRAME> отменяет указание, сделанное в теге <FRAMESET> для данного кадра и всех, смежных с ним.

- MARGINHEIGHT= ˝число˝ - устанавливает ширину полей кадра.

- MARGINWIDTH= ˝число˝ - устанавливает ширину полей кадра.

Приведем пример самого простого HTML- кода с фреймами:

<HTML>

<HEAD>

<TITLE>Фреймы</TITLE>

</HEAD>

</FRAMESET >

</HTML>

Отображение этого HTML- кода на экране браузера показано на рисунке 15.

Рис. 15. Отображение браузером HTML- документа с фреймами

Ø <NOFRAMES>…</NOFRAMES> - определяет содержимое, которое будет выводиться браузерами, не поддерживающими кадры.

А теперь рассмотрим полный HTML-код, создающий документ с

фреймами средней сложности:

<HTML>

<HEAD>

<TITLE>Фреймы</TITLE>

</HEAD>

</FRAMESET >

</HTML>

Этот пример создает страницу с фреймами, показанную на рисунке 16. Этот HTML- код определяет 3 фрейма.

Рис.16. Отображение браузером HTML- документа с фреймами

Ø <FRAME>…</FRAME> - реализует концепцию плавающих кадров.

Используется только для браузера Microsoft Internet Explorer. Для задания расположения и размеров плавающего фрейма в документе можно использовать дополнительные параметры: WIDTH, HEIGHT, HSPACE, VSPACE, ALIGN. Их назначение и использование совпадает с соответствующими параметрами тега <IMG>.

Для создания ссылки из одного кадра в другой достаточно указать в

теге ссылки опцию вида TARGET= ˝имя кадра˝. Общую схему такой ссылки можно записать так:

<A HREF>= ˝URL нового документа˝ TARGET= ˝имя кадра˝>…</A>

Наряду с фреймами часто используют формы. Рассмотрим

возможность их использование при создании HTML- документов.

§2.1.9 Формы

Формы являются наиболее популярным способом "обратной связи" с пользователем. С помощью HTML можно создавать как простые формы, предполагающие выбор одного из нескольких ответов, так и сложные формы для заказов или для того, чтобы получить от пользователей страницы какие- либо комментарии и пожелания.

Форма представляет собой несколько полей, где пользователь может ввести некоторую информацию, либо выбрать какую- то опцию. После того, как пользователь отправит информацию, она обрабатывается программой (скриптом), размещенной на сервере. Существует также возможность обрабатывать формы "на стороне клиента", встраивая в свои страницы скрипты, написанные на языках JavaScript и Visual Basic Script.

Ø <FORM>…</FORM>- создаем формы.

Параметры тега:

Ø - ACTION= "URL" – указывает URL, который примет и обработает

данные формы. Если этот параметр не указан, данные отправляются по адресу страницы, на которой размещена форма.

- METHOD ="стиль" – указывает метод передачи данных программе- обработчику формы. "Стиль" может принимать одно из двух значений:

Страницы: 1, 2, 3, 4, 5, 6, 7


	НОВОСТИ


	ВХОД


	ТЕГИ

Рефераты бесплатно, реферат бесплатно, курсовые работы, реферат, доклады, рефераты, рефераты скачать, рефераты на тему, сочинения, курсовые, дипломы, научные работы и многое другое.
Copyright © 2012 г. При использовании материалов - ссылка на сайт обязательна.