Главная      Учебники - Разные     Лекции (разные) - часть 17

 

Поиск            

 

Untitled Document

 

             

Untitled Document

В Методический Центр

Северного Административного Округа

г. Москвы

(Мастер класс)

Уроки по теме:

«Изучение Internet - технологий в 10 – 11 классах. HTML - программирование»

Подготовил: учитель ИиИТ САО СОШ № 662

Федорова Светлана Владимировна

Москва, 2007

Содержание:

1. Введение ……………………………………………………….. 3 стр.

2. 1 занятие ……………………………………………………….. 4 стр.

3. 2 занятие ……………………………………………………….. 5 стр.

4. 3 занятие ……………………………………………………….. 6 стр.

5. 4 занятие ……………………………………………………….. 8 стр.

6. 5 занятие ………………………………………………………. 10 стр.

7. 6 занятие ………………………………………………………. 11 стр.

8. 7 занятие ………………………………………………………. 13 стр.

9. 8 занятие ………………………………………………………. 15 стр.

10. 9 занятие ………………………………………………………. 16 стр.

11. 10 занятие ……………………………………………………... 18 стр.

12. 11 занятие ……………………………………………………... 20 стр.

13. 12 занятие ……………………………………………………... 22 стр.

14. 13 занятие ……………………………………………………... 26 стр.

15. 14 занятие ……………………………………………………... 27 стр.

16. 15 занятие ……………………………………………………... 29 стр.

17. 16 занятие ……………………………………………………... 31 стр.

18. 17 занятие ……………………………………………………... 33 стр.

19. 18 занятие ……………………………………………………... 34 стр.

20. 19 занятие ……………………………………………………... 35 стр.

21. 20 занятие ……………………………………………………... 37 стр.

22. 21 занятие ……………………………………………………... 39 стр.

Введение

Преподавание раздела Internet – технологии является одним из самых сложных, и, в тоже время, одним из самых актуальных и интересных разделов ИиИТ для учащихся 10-11 классов. Это объясняется тем, что молодежь давно пользуется услугами Internet , не имея при этом глубоких знаний в этой области.

Именно в разделе Internet – технологии вводится большое количество терминов, которыми должны легко оперировать учащиеся. На этапе программирования и изучения Web – редактора, появляется возможность задействовать весь творческий потенциал ребят, а работа становится полной и осмысленной.

Самой важной проблемой для преподавателя, дающего этот раздел – наличие четкой и разработанной системы подачи материала и собственный опыт по участию в телеконференциях, форумах, чатах, созданию сайтов (который, к сожалению, не всегда имеется).

Литература и методические рекомендации по этому разделу хорошо отражают информационную часть, но, практически, не затрагивают глубоко разделы программирования и Web – дизайна, т.е. самой интересной части Internet – технологий.

Данный разработан с целью, помочь преподавателям ИиИТ давать этот материал без особых затруднений, даже не имея собственного большого опыта.

Содержание представляет собой уже отработанные уроки. Количество уроков можно сократить, в зависимости от специфики комплектаций компьютерных классов, часов отведенных на ИиИТ.

Данный курс можно преподавать как в разделе Информатики, так и в разделе Информационные технологии (желательно и там, и там, не отвлекаясь на что-то другое).

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

1 занятие

«Глобальная сеть. Интернет. Технические ресурсы Internet

· Глобальная сеть это система объединенных компьютеров, находящихся на большом расстоянии друг от друга.

Историческая справка:

- в 1964 г. в США была создана первая глобальная сеть, которая называлась «Система раннего оповещения о приближении ракет противника» (была засекречена).

- в 1969 г. в США была создана первая невоенного назначения сеть, которая называлась ARPANET. Сеть имела научное назначение и объединяла несколько Университетов в США.

- в 1983 г. на базе ARPANET был разработан протокол TCP/IP (с аббревиатурой познакомимся ниже). По этому протоколу и работает современный Internet.

- 1993 г. стал, поистине, революционным в развитии Internet – технологий с появлением службы WWW(World Wide Web – всемирная информационная сеть).

Так что же такое Internet?

· Интернет – это всемирная система компьютерных сетей, объединенных на базе протокола TCP/IP.

· Протокол это стандарт (набор целого пакета программ, правил и т.д.) на предоставление сетевой информации, на способы ее передачи и обработки.

Технические ресурсы Internet

Основными составляющими Internet являются узлы коммуникации и каналы связи между ними.

Для примера работы можно провести аналогию работы телефонной сети:

- узлами телефонной сети являются АТС - автоматические телефонные станции.

- АТС объединены между собой линиями связи, образующую городскую, региональную и т.д. телефонную сеть.

Аналогично абонент компьютерной сети (это может быть отдельный пользователь или целая организация) подключается к определенному Провайдеру ( provider – поставщик, снабженец). Пользователь заключает с Провайдером договор на предоставление определенных услуг и в дальнейшем оплачивает определенный тариф.

В распоряжении Провайдера находятся 1 – 2 мощных компьютера, которые работают в круглосуточном режиме. Эти компьютеры называются – Host -компьютерами (host - хозяин).

Каждый Host-компьютер имеет свой уникальный адрес в Internet, он называется IP – адресом (Identify Password).

IP – адрес состоит из 4-ех десятичных цифр (0 - 255), разделенных точками.

Пример IP – адреса:

193.126.9.17

Компьютеры пользователя также получают IP – адрес, но они называются временными адресами (действуют только на время подключения пользователя к сети).

__________________________________________________________

2 занятие

Повторение предыдущего материала:

1. Что такое глобальная сеть?

2. Что такое Протокол?

3. Что такое Интернет?

4. Как работает Интернет?

5. Кто такой Провайдер?

6. Что такое Host-компьютерами?

7. Что такое IP – адрес?

« DNS – адресация. Каналы связи.»

Наряду с IP – адресами, в Internet действует система символьных адресов. Она называется доменной системой имен ( DNS Domain Name System ). Каждый Host-компьютер помимо IP – адреса, приобретает имя.

Слово «домен» обозначает участок, зону. Система доменных имен строится по иерархическому принципу:

www.yandex.ru

1-ый с права от точки – домен верхнего уровня (называется суффиксом ), следующий за ним – домен второго уровня и т.д.

Пример: www.discoland.ru/shop

Слева от точки - домен – имя компьютера.

Домен верхнего уровня (суффикс) бывает географическим (содержит 2 буквы) и административным (содержит 3 буквы).

Географический

Административный

Российская зона - .ru

Англия - .uk

Канада - .ca

Германия - .de

Япония - .jp

На примере США:

.gov - правительственная сеть США

.mil - военная сеть США

.edu - образовательная сеть США

.com- коммерческая сеть

Каналы связи

В настоящее время широко используются 4 канала связи:

1- Телефонные линии (в системный блок ПК устанавливается модем);

2- Электрическая кабельная связь;

3- Оптоволоконныя связь;

4- Радиосвязь.

Все каналы различаются по трем главным различиям:

1- Пропускной способности;

2- Помехоустойчивости;

3- Стоимости.

Пропускная способность - это максимальная скорость передачи информации по каналу. Она выражается в Кбит/сек или в Мбит/сек (десятки-сотни Кбит/сек – модемное соединение, десятки-сотни Мбит/сек – оптоволоконныя связь).

__________________________________________________________

3 занятие

Повторение предыдущего материала:

1. Что такое доменная система имен?

2. Какими бываю домены верхнего уровня?

3. Какие бывают каналы связи, их отличие?

4. Что такое пропускная способность?

«Программный ресурс Internet . Работа сети.»

Программный ресурс Internet

Работа сети поддерживается программным обеспечением. Оно функционирует на Host-компьютерах и на персональных ПК.

Часто под словом сервер понимают Host-компьютер, выполняющий определенные сервер – программы.

ПК пользователя имеет в ОС тоже специальные программы, которые называются Клиент – программами :

Outlook Express

Internet Explorer и т.д.

Работа сети

В Internet используется пакетная система передачи информации, т.е. вся, пересылаемая информация делится на небольшие блоки - пакеты протоколом TCP (Transfer Control Protocol – протокол управления передачей), к каждому пакету прикладывается IP- адрес получателя, затем все пакеты рассылаются (они могут отправиться по разным путям, но придут в одно место, т.к. на всех указан один IP- адрес получателя). На Host-компьютере получателя протокол TCP объединит все пакеты в единый документ.

Если какой-то пакет при транспортировке испорчен, то передача всего документа будет запрещена.

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

4 занятие

Повторение предыдущего материала:

1- Каким программным обеспечением поддерживается работа сети?

2- Что такое пакетная система передачи информации?

« Internet – услуги. Коммуникационные службы Internet »

От устройства и функционирования сети самое время перейти к главному вопросу:

Для чего используется Internet?

Компьютерная сеть Internet может выполнять две услуги:

1- быть средством общения между ее пользователями, находящимися на расстоянии друг от друга (эта функция называется коммуникационной ).

2- быть средством доступа к информационным ресурсам (эта функция называется информационной ).

Коммуникационная служба Internet

I. Электронная почта ( E- mail) – самая старая сетевая услуга. Ее назначение – поддержка обмена письмами в сети.

Процесс передачи почтового сообщения прост:

1. Сначала пользователь пишет текст письма в режиме off – line (т.е. без подключения к Internet), указывает адрес получателя и тему письма.

2. Подготовленное письмо помещается в папку «исходящие».

3. Далее в режиме on – line (подключившись к Internet) сервер по паролю определяет ПК – пользователя и отправляет все письма из папки «Исходящие», а также передает все поступившие письма в папку «Входящие» по протоколу POP3 (POP3 – Post Office Protocol – протокол почтового отделения).

Сеанс связи окончен!

Клиент–программа ПК – пользователя только передает и получает почту. Работает по протоколу SMTP – Simple Maile Transfer Protocol (простейший протокол передачи информации).

II. Телеконференции

Это также почтовая переписка, но отличается тем, что письмо отсылается всем участникам телеконференции (одновременно), и все сообщения, поступающие в адрес телеконференции от разных участников, отправляются каждому участнику.

Телеконференция требует регистрации всех участников, с указанием выбранной темы обсуждения, E-mail участника, Ф.И.О. участника.

Как правило, конференции посвящены обсуждению какой-либо темы (научной, политической, проектной).

В сети Телеконференции обслуживаются серверами – Новостей.

Клиент–программа ПК – пользователя только передает и получает почту. Работает по протоколу SMTP – Simple Mail Transfer Protocol (простейший протокол передачи информации).

III. Форумы прямого общения IRC ( Internet Relay Chat – в переводе «болтовня»)

Проходит в режиме on-line в письменном виде.

Также надо зарегистрироваться, как участник, выбрать тему, но можно указать только свой nik – т.е. вымышленное имя

На Host-компьютере работает chat- сервер, а на ПК-пользователя - chat-клиент.

Ваше сообщение публикуется в Internet, и в дальнейшем обсуждается участниками. Всю переписку можно увидеть в Internet.

__________________________________________________________

5 занятие

Повторение предыдущего материала:

1. Как работает почта?

2. Что такое телеконференция?

3. Что такое форум?

«Информационная служба Internet (1993 г.). Сайт, структура каждой страницы.»

Эта служба работает в двух направлениях:

1. Служба передачи файлов , работает по протоколу FTP (File Transfer Protocol – протокол передачи данных).

На Host-компьютере установлены серверы (программы) FTP, а на ПК – пользователя FTP-клиент (программы).

Для того, чтобы стало понятно: с появлением символьных имен Host-компьютеры (иногда их называют сервер – ПК из-за программ серверов, установленных на них) имеют большую область на жестком диске, которая предлагается всем пользователям Host-компьютера. Здесь пользователь может хранить папки с документами, свой личный банк данных и многое др.

Вся эта информация образует иерархическую структуру папок (подобно Проводнику). Часто информация, хранящаяся на сервере, является секретной. Каждый владелец получает от Провайдера свой FTP – доступ (со своим паролем и логином).

Аналогию можно провести с ячейками банка, где секретность содержимого ячейки клиента банка, гарантирует сам банк.

2. Служба WWW . На сервере могут храниться сайты клиентов, которые воспроизводятся по протоколу HTTP (Hyper Text Transfer Protocol – протокол передачи гипертекстовых страниц). Его основной задачей является поиск и передача документов клиенту, а также обработкой гиперссылок.

Host-компьютер обладает WEB – сервером, а на ПК-клиента хранятся программы WEB- клиент (например Internet Explorer).

Что такое сайт ( site)?

Сайт можно сравнить с каталогом или книгой, но в отличии от них, сайт можно просматривать в любой последовательности. Все страницы увязаны ссылками – link, при нажатии на которые открываются запрошенные страницы (или даже другой сайт).

При разработке сайта нельзя допускать, чтобы на какой-то странице отсутствовали ссылки на другие страницы того же документа. Все страница сайта программируются на языке HTML.

При публикации сайт получает свой адрес URL (Uniformed Resource Locator – универсальный указатель ресурса).

Структура гипертекстовой страницы

6 занятие

«Программирование на HTML »

Каждый оператор на языке программирования HTML называется тег, начинается угловой скобкой <, и заканчивается >. Различают парные (т.е. тег имеет закрывающий тег) и не парные теги.

· < html > - 1 – ый тег (парный), определяет, что данный документ содержит html – код.

· < head > - голова программы, содержит:

- < title > - имя сайта, оно будет высвечиваться в верхней строке браузера (парный).

Пример: <title>Мой сайт</title>

- < meta > - содержит информацию о странице, облегчает поиск сайта поисковыми роботами.

· < body > - парный тег. Содержит тело страницы, т.е. именно эту информацию увидит посетитель Вашего сайта.

Напишем нашу первую программу на языке HTML.

Программа пишется в блокноте.

<html>

<head>

<title> my site</title>

</head>

<body>

< h 1>Привет Всем!</ h 1>

</ body >

</ html >

Раздел < body >

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

1. background=" name.jpg" – фоновый узор для всего поля страницы

2. bgcolor=" yellow" - цвет фона

3. link=" blue" –цвет ссылок

4. alink=" red" – цвет активной ссылки

5. vlink=" black" – цвет посещенной ссылки

Теперь можно расширить тег < body > :

<body bgcolor= " yellow " link= " blue " alink= " red " vlink= " black " >

Расширьте тег < body >

Цвет в тегах может быть записан английским названием цвета, а м.б. записан кодом цветовой палитры RGB.

В рабочем документе попробуйте поменять названия цвета фона на код. __________________________________________________________

7 занятие

Повторение предыдущего материала:

4. Что такое тег <html>?

5. Что такое тег <head>?

6. Что такое тег <body>? Его параметры.

7. Что такое код цвета?

«Оформление абзацев. Форматирование текста»

· Создание абзаца

< div > - парный тег, который начинает абзац с новой строки.

Параметры:

1. align=" left" (right, center, justify) - выравнивание абзаца.

< div align = " center " >Мы изучаем программирование на языке HTML </ div >

Вставьте этот тег после тега </h1> в html – код рабочей программы. Сохранитесь и посмотрите результат.

· Задание стиля шрифта

< font > - парный тег.

В рабочем документе вставим в тег – абзаца стиль шрифта:

<div align= " left " ><font face= " sans-serif " size=3 color= " green " > Мы изучаем программирование на языке HTML</font></div>

Посмотрите, как изменился шрифт.

· Физическое форматирование

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

< div align = " left " >Мы изучаем программирование на языке HTML </ div >).

Пример (Обратите внимание, что все теги закрываются в обратном порядке!!! ):

<div align= " left " ><font face= " sans-serif " size=3 color= " green " ><i> Мы изучаем программирование на языке HTML</i></font></div>

Посмотрите как изменился шрифт!

______________________________________________________

8 занятие

Повторение предыдущего материала:

1. Тег абзаца?

2. Как задать стиль шрифта?

3. Какие теги относятся к физическому форматированию?

«Спец. символы. Заголовки.»

· Использование спец. символов

Тег переноса строки < br > (соответствует Enter при работе в Word).

Если вам надо писать большой текст:

«Да, будут ясны дни твои!

Как милый взор твой ныне ясен.

Средь лучших жребиев судьбы,

Да, будет жребий твой прекрасен!»

Здесь надо использовать тег абзаца , тег форматирования , тег спец. символов «» и тег перевода строки по окончанию каждой фразы, чтобы текст выглядел как стихотворение, иначе он растянется в длинное предложение, т.к. Enter в html – коде не воспринимается, как перевод строки.

Пример:

<div align="left">

<font face="sans-serif" size=3 color="green">

<i>Да, будут ясны дни твои!<Br>

Как милый взор твой ныне ясен.<Br>

Средь лучших жребиев судьбы,<Br>

Да, будет жребий твой прекрасен!<Br>

</i></font></div>

Вставьте этот фрагмент в html код вашей рабочей страницы, после закрытия первого абзаца (<div align=" left" ><font face=" sans-serif" size=3 color=" green" ><i>Мы изучаем программирование на языке HTML</i></font></div>). Сохраните изменения и посмотрите на вашу html – страницу.

· Заголовки (парные теги, т.е. требуют закрытия)

<h1> - самый большой заголовок

<h2> - поменьше

<h3> и т.д. до <h6> - самый маленький

Раньше мы уже использовали этот тег, но у него есть параметр:

align="left" (right, center, justify) – выравнивание

Изменим заголовок в рабочем документе:

< h 1 align =" center " >Привет Всем!</ h 1>

Сохраните изменения и посмотрите на вашу html – страницу.

9 занятие

Повторение предыдущего материала:

1. Какие спец. символы вам известны и для чего они используются?

2. Как можно создать заголовок и отцентрировать его?

«Списки. Линии.»

· Различают пронумерованные и непронумерованные списки.

1. Пронумерованные списки

Пронумерованные списки начинаются стартовым тегом (парный)

<ol>

Каждый элемент списка начинается с непарного (не требует закрытия) тега: < li >

Параметры тега <ol>:

type=A (a,I,1)

A – большие латинские буквы (A,B,C ….)

I – большие римские цифры (I, II,III….)

1 – обычные цифры (1,2,3…)

start = n - число с которого начинается нумерация списка.

Пример:

<ol type=1 start=5>

<li> Программирование

< li >Алгоритмизация

< li >Проектирование

</ ol >

Вставьте этот фрагмент в html код вашей рабочей страницы, после закрытия последнего абзаца (после последнего </div>). Сохраните изменение рабочего документа.

2. Непронумерованные списки

Пронумерованные списки начинаются стартовым тегом (парный)

< ul >

Каждый элемент списка начинается с непарного (не требует закрытия) тега: < li >

Параметры тега <ul>:

type=disc (circle, square)

Пример :

<ul type= square >

< li >Программирование

< li >Алгоритмизация

< li >Проектирование

</ ul >

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

· Линии

< hr > - не парный тег.

Параметры:

· align = " left " (right, center) – выравнивание линии по горизонтали.

· color = " red " (м.б. использован код цвета) – цвет линии.

· noshade – без тени

· size = " 5 " - толщина линии в pic.

· width = "… % " – длина линии, обычно указывается в %.

Пример:

<hr align= " center " width= " 100% " size= " 8 " color= " red " >

Вставьте этот тег в HTML рабочего документа, после списков. Сохраните изменения.

10 занятие

«Вставка картинок. Ссылки.»

1. < img > - тег вставки картинки (непарный тег).

Предварительно создать картинки с расширением jpg или gif и положить их в папку с рабочим документом.

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

· align=" left" (right, top, middle) - управление обтеканием текста.

· alt=" alternative text" - альтернативный текст, т.е. пояснительный текст, который появляется при наведении мышки на картинку.

· src=" n1.jpg" - указание имени картинки, которая будут вставлена (если картинка лежит во вложенной папке, где хранятся все картинки, то нужно прописывать полный путь к картинке, пример: src=" papka/n1.jpg" ).

· border=0 - толщина рамки вокруг картинки.

· width=300 - ширина картинки (выставляется в pic.).

· height=200 – высота картинки (выставляется в pic.).

Пример :

<img src="pic/1.jpg" align="left" alt=" логотип " border=1 width=200 height=200>

Вставьте этот фрагмент после линии в рабочий HTML документ. Сохраните изменения. (Можно попробовать различные варианты обтекания текстом, различную толщину рамки, вставить другие картинки).

2. Ссылки.

Главный тег - парный

< a >

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

· href="

· В виде URL: href=" http://www.yandex.ru"

Пример:

1.Ссылкой является текст

На главную </a>

2. Ссылкой является картинка

<a href=" http://www.yandex.ru "><img src="pic/2.jpg" align="left" alt=" логотип " border=1 width=200 height=200>

</ a >

Вставьте этот фрагмент после картинки в рабочий HTML документ. Сохраните изменения. (Можно попробовать сделать ссылку на другой сайт). Ссылками может являться текст и картинки.

11 занятие

«Таблицы»

Таблицы – единственное средство скомпоновать страницу в полном соответствии с замыслом разработчика.

Таблица организована как набор строк и столбцов. Ячейки таблицы могут содержать любые элементы, такие, как заголовки, списки, графику, абзацы.

Таблица описывается следующими тегами:

< table > - начало таблицы (парный тег).

< tr > - строка таблицы (парный тег).

< td > - столбец таблицы (парный тег).

1. Параметры тега < table >:

· width =600 (м.б. в %) – ширина таблицы

· height =600 (м.б. в %) – высота таблицы

· align = " center " ( left , right ) - размещение таблицы на экране

· background = " f 1. jpg " – фоновый узор заливки (всей таблицы или ячейки)

· bgcolor = " white " (#000000) – цвет фона (всей таблицы или ячейки)

· border =3 – толщина рамки таблицы

· bordercolor= " gray " (#000000) – цвет рамки

· cellpadding =5 – втяжка внутрь ячейки (зазор между краем ячейки и внутренним содержимым)

· sellspacing =10 - расстояние между ячейками одной и той же таблицы

1. Параметры тега < tr >:

· align = " center " ( left , right ) - выравнивание содержимого ячеек строки

· valign = " top " ( bottom , middle ) – вертикальное выравнивание ячеек строки

· bgcolor = " gray " (#000000) – цвет фона ячейки

2. Параметры тега < td > :

· width =150 (м.б. в %) –ширина ячейки

· height =180 (м.б. в %) – высота ячейки

· align = " center " ( left , right ) - выравнивание содержимого ячеек

· valign = " bottom " ( middle , top ) – вертикальное выравнивание содержимого ячеек

· background= " f1.jpg " – фоновый узор

· bgcolor= " gray " (#000000) – цвет фона

· border=3 – толщина рамки

· bordercolor= " gray " (#000000) – цвет рамки

· colspan =2 – объединение ячеек по горизонтали

· rowspan =3 - объединение ячеек по вертикали

Попробуем вставить в новый документ (на чистую страницу блокнота):

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

</head>

<body bgcolor="#FFCCCC">

<table width="44%" border="0">

<tr valign="top" align="left">

<td colspan="2"><img src="pic/zastavka2 .jpg" width="700" height="100"></td>

</tr>

<tr>

<td valign="top" align="left" width="58%">

<div align="left">

<font face="sans-serif" size=3 color="green">

< i >Да, будут ясны дни твои!< Br >

Как милый взор твой ныне ясен.< Br >

Средь лучших жребиев судьбы,< Br >

Да, будет жребий твой прекрасен!< Br >

</i></font></div>

</td>

<td align="right" width="42%"><img src="pic/3.jpg" width="200" height="200"></td>

</tr>

</table>

</body>

</html>

Сохраним этот документ с расширением htm (с новым именем).

12 занятие

«Бегущая строка»

Используется для привлечения внимания ваших посетителей к новостям о Вашей организации, о новостях сайта (какие-то страницы обновлены и т.д.).

Главный тег < marquee >

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

· align = " top " ( right , left , middle , bottom ) – выравнивание строки:

right по правому краю

left - по левому краю

top - вверху страницы

middle в по центру страницы

bottom внизу страницы

· behavior = " slide " – поведение текста (движущийся).

· scrolldelay = " value " (value – без задержки, общим потоком, т.е. текст заканчивается и снова идет без интервала задержки) – задержка текста, лучше ставить в pic ≈ 250.

· loop = " value " (-1, infinite ) (value – одноразовый пробег,

-1, infinite – число проигрываний – неограниченно) – число проигрываний или прохождений текста по строке.

· width = " …% " – ширина бегущей строки, можно в pic.

· height =18 (м.б. в %) – высота бегущей строки, лучше указывать в pic.

· direction = " left " ( right ) – направление движения текста.

· bgcolor =”#……” (можно по названию цвета) - цвет фона

Пример:

< marquee behavior =" slide " direction =" left " bgcolor =" green " width ="100%" height ="15" scrolldelay ="240" loop ="-1, infinite ">< font color =" white ">Наш сайт участвует в районной олимпиаде по проектной деятельности.</ font >

</ marquee >

На новой странице «блокнота» набить основные теги (это необходимо делать постоянно для того, чтобы у ребят появилась практика набивки тегов и для запоминания основных тегов программирования), в тело вставить «бегущую строку», сохранить документ с именем stroca.htm. Должно получиться следующее:

<html>

<head>

<title> my site</title>

</head>

<body>

< marquee >< font color =" black ">Наш сайт участвует в районной олимпиаде по проектной деятельности.</ font ></ marquee >

</body>

</ html >

12 занятие

«Формы»

Формы нужны, когда от посетителя Вашего сайта требуется заполнить определенную информацию для Вас, и отправить на Ваш E-mail (часто используется в «гостевой книге»). Иногда формы используются для удобства навигации (движения) по сайту (раскрывающиеся списки).

Главный тег < form > - парный тег.

Параметры:

1. method =" post " - отправка почтой.

2. action =" mailto : info @ yandex . ru " - указывается адрес E-mail владельца сайта

Тег будет выглядеть так:

<form method="post" action="mailto:info@yandex.ru">

Элементы формы, которые будут описаны ниже

< /form >

Элементы формы

· Текстовые поля (свободный текст) – позволяет пользователю вводить более одной строки текста

<textarea> - парный тег

Параметры:

· name ="…." - название текстового поля (англ. буквами).

· rows =5 - высота поля в символах.

· с ols =10 - ширина поля ввода в символах.

· wrap =" off " ( virtual ) – строка символов не разбивается (разбивается автоматически).

Тег будет выглядеть так:

<form method="post" action="mailto:info@yandex.ru">

<textarea name="address" rows=10 с ols=50 wrap=" virtual " >

г. Москва,

ул. Дегунинская, д. 18

СОШ № 660

Тел . 905-82-55

</textarea>

</ form >

На новой странице «блокнота» набить основные теги (это необходимо делать постоянно для того, чтобы у ребят появилась практика набивки тегов и для запоминания основных тегов программирования), в тело вставить «формы», сохранить документ с именем form1.htm

<html>

<head>

<title> my site</title>

</head>

<body>

<form method="post" action="mailto:info@yandex.ru">

<textarea name="address" rows=10 с ols=50 wrap=" virtual ">

г. Москва,

ул. Дегунинская, д. 18

СОШ № 660

Тел . 905-82-55

</textarea>

</ form >

</body>

</html>

1 3 занятие

Продолжение темы «Формы»

2. Текстовые поля (однострочные)

< input > - не парный тег, имеет несколько типов:

· type= " text "

Параметры :

1. size =20 – размер поля отображаемого ввода на экране.

2. maxlenght =15 – максимальная длина вводимого значения в символах.

· type =" reset " - кнопка сброса информации (очистка форм)

Параметры:

value ="сброс" – название на кнопке.

· type =" submit " - кнопка отправки информации

Параметры:

value ="отправить" – название на кнопке.

Тег будет выглядеть так:

<form method="post" action="mailto:info@yandex.ru">

Введите имя :<input name=" имя " type="text" size=40><br>

Введите код : <input name=" код " type="text" size=20 maxlengh=10><br>

<input type="submit" value=" отправить ">

<input type="reset" value=" удалить ">

</form>

На новой странице «блокнота» набить основные теги (это необходимо делать постоянно для того, чтобы у ребят появилась практика набивки тегов и для запоминания основных тегов программирования), в тело вставить «формы», сохранить документ с именем form2.htm

<html>

<head>

<title> my site</title>

</ head >

< body >

<form method="post" action="mailto:info@yandex.ru"><br>

Введите имя :<input name=" имя " type="text" size=40><br>

Введите код : <input name=" код " type="text" size=20 maxlengh=10><br>

<input type="submit" value=" отправить ">

<input type="reset" value=" удалить ">

</form>

</body>

</html>

1 4 занятие

Продолжение темы «Формы»

Продолжение описания типов тега:

<input>

· type = " radio " - одиночный выбор значения из нескольких.

Параметры:

1. name =" predmet " – имя этой формы.

2. checked – выбрано изначально.

Тег будет выглядеть так:

<form method="post" action="mailto:info@yandex.ru">

Укажите свой любимый предмет :<input type="radio" name="predmet> математика <br>

<input type="radio" name="predmet> литература <br>

<input type="radio" name="predmet> физика <br>

<input type="radio" name="predmet> информатика

</ form >

На новой странице «блокнота» набить основные теги (это необходимо делать постоянно для того, чтобы у ребят появилась практика набивки тегов и для запоминания основных тегов программирования), в тело вставить «формы», сохранить документ с именем form3.htm

<html>

<head>

<title> my site</title>

</head>

<body>

<form method="post" action="mailto:info@yandex.ru">

Укажите свой любимый предмет : <br><input type="radio" name="predmet> математика <br>

<input type="radio" name="predmet> литература <br>

<input type="radio" name="predmet> физика <br>

<input type="radio" name="predmet> информатика

</form>

</body>

</ html >

· type = " checkbox " - множественный выбор.

Параметры:

name =" predmet " – имя этой формы.

В HTML-код документа form3.htm вставьте вместо type =" radio ", type =" checkbox " сохраните документ под именем form4.htm

15 занятие

«Разворачивающиеся списки»

< select > - выбор значений из разворачивающегося списка значений, заданных при помощи option .

Параметры:

· name =" predmet " – имя этой формы.

· size =1 – начальная высота списка.

Каждое слово из разворачивающегося списка можно сделать ссылкой на другую страница, прописав теги ссылок около каждого слова из списка.

На новой странице «блокнота» набить основные теги (это необходимо делать постоянно для того, чтобы у ребят появилась практика набивки тегов и для запоминания основных тегов программирования), в тело вставить «формы», сохранить документ с именем form5.htm

<html>

<head>

<title> my site</title>

</head>

<body>