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

<ТН> текст, содержащийся в ячейке </ТН> - Заголовки столбцов таблицы

<САРТIОN> - Использование заголовков таблицы

width = "..." – ширина таблицы

align = "..." (горизонтальное положение)

align = "left" - прижать влево

align = "right" - прижать вправо

align = "center" - разместить по центру

valign = "..." (вертикальное положение)

valign = "top" - прижать вверх

valign = "bottom" - прижать вниз

valign = "middle" - разместить по центру

cellpadding="..." и cellspacing="..." определяют, соответственно, расстояние в пикселях между границей ячейки и ее содержимым, а также и между ячейками.

border="..." – рисует рамку вокруг таблицы и каждой ячейки

colspan="..." и rowspan="..." - позволяют объединять ячейки таблицы в группы, вокруг которых рисуется рамка.

Ход работы:

1. Создайте таблицу следующего вида:

2. Создайте таблицу следующего вида:

Листинг html-программы:

<HTML>

<HEAD>

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

</HEAD>

<H1 ALIGN = 'CENTER'> <B> Таблицы в html-документе </B> </H1>

</font>

<TR>

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

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

</TR>

<TR>

<TD>Ячейка столбца 1, ряд 1</TD>

<TD>Ячейка столбца 2, ряд 1</TD>

</TR>

<TR>

<TD>Ячейка столбца 1, ряд 2</TD>

<TD>Ячейка столбца 2, ряд 2</TD>

</TR>

</table>

<tr> <th colspan='5'> Список сотрудников </th> </tr>

<tr> <th> Фамилия </th> <th> Имя </th> <th> Отчество </th> <th> Дата рождения </th> <th> Отдел </th> </tr>

<tr> <td> Гончаров </td> <td> Александр </td> <td> Петрович </td> <td> 13.10.75 </td> <td rowspan='4'> Технический </td> </tr>

<tr> <td> Савчук </td> <td> Юрий </td> <td> Олегович </td> <td> 02.05.79 </td> </tr>

<tr> <td> Тарасов </td> <td> Алексей </td> <td> Сергеевич </td> <td> 27.02.72</td> <td> </td> <td> </td></tr>

<tr> <td> Данилов </td> <td> Петр </td> <td> Андреевич </td> <td> 17.10.77 </td> </tr>

</TABLE>

</BODY>

</HTML>

Приложение 6

Практическая работа №6

Тема: «Вставка графики в html-документе»

Цель работы: познакомить учеников с тегом вставки графики; научить создавать Web-страницы с использованием графики.

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

Теоретический материал:

Тэг <IMG> - вставка изображений

Атрибуты:

Src - обязательный, значение- адрес изображения

Обычно файлы с картинками помещают в ту же папку, что и сама страница или в отдельную папку:

alt – определяет альтернативный текст, который появляется на месте картинки в окне браузера, если вывод картинки невозможен или заблокирован пользователем. Значение alt – строка текста, длиной до 1024 символа. Кавычки обязательны.

Alt= “Школа “ Этот текст также появиться в виде всплывающей подсказки, когда указатель мыши направлен на картинку.

align – выравнивание. Положение изображения лучше всегда указывать явно.

Значения:

left, right – по левому или по правому краю.

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

middle – середина изображения выравнивается с серединой строки.

bottom – (по умолчанию) нижний край изображения выравнивается с базовой линией текста.

border - устанавливает или убирает (для гиперссылок) рамку вокруг изображения

border= толщина рамки в пикселях

border=0 – убрать рамку

height, width – высота и ширина изображения в пикселях. Размеры могут быть больше или меньше реальных размеров изображения. Браузер автоматически масштабирует его. Значения можно указывать в % по отношению к окну.

width = “100%” height= 20 – полоса на все окно шириной 20 пикселей.

Если указать только width = “30%”, то высоту браузер подберет сам пропорционально рисунку. Если картинка не загрузилась, то на экране остается пустая область с заданными атрибутами height, width.

hspace, vspace – задают расстояние в пикселях между картинкой и текстом по вертикали и горизонтали.

Ход работы:

1. Создать 3 WEB-странички о следующим шаблонам:

Приложение 7

Практическая работа №7

Тема: «Фреймы».

Цель работы: сформулировать основные принципы использования фреймов в HTML-документе; познакомить учеников с тегами создания фреймов в HTML; продемонстрировать их на конкретных примерах и научить создавать Web-страницы с использованием фреймов.

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

Теоретический материал:

Тэг <frameset>

Позволяет определять набор фреймов и управлять их размерами и обрамлением. Он допускает вложения.

Атрибуты:

Rows – число и размер строк;

Cols – число и размер колонок;

Значения – список величин, определяющий в пикселях или в % значения для строк и (или) колонок.

Пример:

<framesetrows=“100,25%,*” cols=“30%,*”>

* обозначает оставшееся пространство.

Заполнение фреймов содержимым происходит по строкам.

Атрибуты:

Border – толщина рамки в пикселях;

Bordercolor – цветрамки.

Тег <frame>

Может появляться только в теге <frameset> и определяет содержимое одиночного фрейма.

Атрибуты:

src=“URL” - обязательный атрибут, указывает имя файла, который должен изображаться в нем.

Этот файл может сам быть фреймом.

name=«метка» - связывает с фреймом метку, которая может использоваться для ссылок на фрейм в атрибуте target тега <a>, таким образом можно изменить содержимое фрейма, используя гиперссылку в другом фрейме.

noresize- запрещает изменение размеров фрейма.

scrolling = yes или no – разрешает или запрещает появление полос прокрутки.

Вложение тегов <frameset>

В тег <frameset> … </frameset> можно поместить еще один или несколько тегов <frameset>.

Это позволяет организовать области с разным количеством строк и столбцов.

</frameset>

Атрибут name в целевом теге <frame>

Атрибут target в теге <a>

Пример:

</frameset>

______________________________________________

Файл menu.html:

<html>

…

<body>

…

<a href=“1.html” target=“view-frame”>Ссылка 1</a>

<a href=“2.html” target=“view-frame”>Ссылка 2</a>

<a href=“3.html” target=“view-frame”>Ссылка 3</a>

<a href=“4.html” target=“view-frame”>Ссылка 4</a>

…

</body>

</html>

Ходработы:

1. Создать фрейм следующего вида:

Листинг html-программы:

<HTML>

<HEAD>

<TITLE>Содержание</TITLE>

</HEAD>

<LI><A HREF="mikky.html" TARGET="frame2">МиккиМаус</A></LI>

<LI><A HREF="disney.html" TARGET="frame2">УолтДисней</A></LI>

<UL>

<LI><A HREF="disney.html#детство" TARGET="frame2">Детствоиюность</A></LI>

<LI><A HREF="disney.html#Голливуд" TARGET="frame2">ПокорениеГолливуда</A></LI>

<LI><A HREF="disney.html#смерть" TARGET="frame2">Смерть</A></LI>

</UL>

<LI><A HREF="Photo.html" TARGET="frame2">Моидрузья</A></LI>

</OL>

</BODY>

</HTML>

Пусть в левом окне откроется документ menu.htm, а в правом - Mikky.html:

<HTML>

<HEAD>

<TITLE>СтраничкаМикки </TITLE>

</HEAD>

</FRAMESET>

</HTML>

Приложение 8

Практическая работа №8

Тема: «Формы».

Цель работы: изучить основные тэги для создания форм в html-документе.

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

Теоретический материал:

<FORM>…</FORM> {создание формы}

<INPUT> - для ввода одной строки текста или одного слова

<INPUT> TYPE=”text” – создает текстовое поле

Атрибут NAME служит для идентификации полученной информации

Атрибута SIZE задает длину поля ввода в символах

<INPUT> TYPE=”radio” – создает переключатели (радиокнопки)

Атрибут VALUE - присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO

Атрибут CHECKED - задает выбор кнопки по умолчанию

<INPUT> TYPE=”checkbox” – создает флажки

<SELECT>…</SELECT> - реализует раскрывающийся список

<OPTION> - определяется каждый элемент раскрывающегося списка

TYPE = password - определяет окно для ввода пароля.

TYPE = reset - определяет кнопку, при нажатии на которую форма возвращается в исходное состояние.

Ход работы:

Используя теги форм создайте анкету(опросный лист) на произвольную тему.

1. В анкете должны быть отображены:

- текстовые поля для ввода имени и фамилии;

- поле пароля;

- поле выбора из списка значений;

- поле для ввода большого количества информации;

- флажки;

- переключатели;

- кнопки сброса и подачи запроса;

Анкета

Фамилия: Имя: Отчество:

Введите пароль:

Введите дату рождения:января февраля марта апреля мая июня июля августа сентября октября ноября декабря

Укажите самый удобный способ для связи с вами:Домашний телефонРабочий телефонЭлектронная почта

Укажите ваше образование:нигде не учился среднее средне-специальное младший специалист бакалавр высшее

Немного о себе:

3. Сохранить этот документ под любым именем с расширением .html в папке HTML.