УДК ББК
004 .9 32.97 Б74
Богомолова О. Б.
Б74
Web-конструираВDние на НТМL ва .
- М. ; БИНОМ . Лаборатория ISBN 978-5-94774 -486-6
: проктикум I о. Б. БоГОМОЛОзнан ий , 2008. 192 с. : ил.
СnД"'ржит MIIoroYPO'1t11!8b1e практическяе 3D)llIfl Н Я по соо.д8 И П!О web·CII AТOB
(8
ТIIюкв IIН'repRКТИВDЫ Х Il нтерфе АСНЫJ( оболочек, 8.IIВlIОrич и ых локальным ко-
111(11101 са итов) ИВ ба 3е 11ЗЫКII гипертеlIе ДЛЯ выполне· н и и з.8дl'l ll.lIЯ, ПОШЮ'QВое описание выполнения задави в" контрольны о ЯО IIРОСЫ.
ПрМtТИКУМ может использоваться ДJlИ до машней работ ы, 11. также.8 качестве p!lздаТО'IIIОГQ
мnт еР Иll.1l8
но
УрIKTIfpoB8.UftC НТ МL- кода lIOOКож ио тол ько ,цля web-етраницы, ХраНящейся иа жестком диск"
ЛОluuа. ИОГО ком пыотера ЦЛ И на по1tКJlючен ном к нему сетевом диске. Дли редактировани,n стра НИЦЫ, р3змещеиной н а сервере Б И птериете, необходимо сохранять ПРОСМ8.триваемыЙ э редидТQ
ре 8лОК ltUТ НТМL· дuд В файле па локмьпо ~ жестком диске. а после реда кти рования оu у6ПМ1(ОБа .... (_вылжи'I'ь_) ) Э'I'OТ файл на сервере .
-
поаторио
Простейшая: НТМL-страница
9
Все, что запи сано между у rловыми скобками из знаков и
есть
тег .
.. ,
-
зто
Как правило, НТМL -теги бывают шiрными. Перв ый тег указывает начало форматируемого фрагмента
текста и
параметры форматирова
НИЛ , а второй , отличаюЩийся от первого косой чертой чевым словом, указывает конец фрагмента текста
-
_/.
перед клю
области влияния
открывающего тега . Такая пара тегов называется /'Сон.теЙн.еро.м. Напри мер , тег
канчивает его.
начинает код всей web-страницы, а тег МеждУ
этими двумя
за
-
основными тегами располагается
головная (титульная) часть кода web-стравицы и ее .тел о •.
Текст же, не находящийся между угловыми скобками назначен для просмотра в браузере (например, в
1. Создайте папку Урок 1. 2. Откройте текстовый редактор
«
и
» ,
пред
Internet Explorer).
Блокнот и наберите текст HTML-коАа
(без комментария справа), который соответс твует пустой странице: начало HTML-Аокумеsта
ваЧ8JIО головной части
наЗВ8.Ние документа
КОflец головн ой части начало тела
AOKYMellTa
ко нец тела документа
конец НТМL - докумеита
3. Сохраните полученный документ в папк е Урок 1, ПРИ С ВQИВ фаtiлу имя
tessonl.htmt. файла с
4.
Здесь .Ыт. (либо
HTML-KOAOM
Запустите браузер
.htm) -
типовое расширение имени
web-страницы.
Internet Explorer.
Просмотрите в нем пол ученную
пустую страницу. Для этого вы полните двойноti щелчок МЫШЬЮ на иконке файла
Web- конструирование на
10 Урове"ь
1.
HTML
2
Откройте файл
lessonl.html.
С ПОМОЩЬЮ команд Вид
---)
Просмотр
ffiML-КОАа откройте окно редактора Блок нот ДЛЯ внесения изм е не ний в НТМL-код. В контейнере описываются общие правила отобра жения HTML-докумеПТ8
11
Между тегами
и
вспомогательная информация.
располагается заголовок
web-
страницы.
2.
Введите междУ тегами
и
название . урок
1.
И про
верьте отображение имени документа на получеюlOЙ web-етранице. Для этого:
•
в редакторе Блокнот сохраните изменения в НТМL-файле (Файл Сохракить);
•
в браузере обиовите web-страиицу (кнопка Обновить).
ypo1C
l
Образец:
.,
---+
Простейmан НТМL-страница
Уровень
11
3
Чтобы созданный вами СRЙт могли легко найти поисковые системы (по ключево му слову, описанию, имени автора и т. д.), В контейнере
. , . размещается тег , в качестве значе ния пара метра name которого указывается ИМЯ некоторого свойства . а в качестве значения параметра
cont8nt -
значение этого свойства:
(ключ евые слова) - слова, которые, скорее всего, буДУТ ис пользова ны дЛЯ ПОИСХR ввшей web-страницы;
• keyvords
• description (описание) -
опи сание ваш ей web -страницы (ее храткая
аннотация);
• author ( имя
автора web -страницы)
-
ваше имя .
yPoK l <meta n8Jr\8= "k.ywords" cont.nt " С'l'ИXО'1'80р8иие ">
1tонпыD'rреe и об отношении J( nP8дие'l'У Икформа.тмха"
..">
ФlUDUl
Web-новструирование на
12 На м
И
сло ва
известные,
компьют ер
как
система
Очен ь
ин те ресен
н ам .
Диск,
винчестер
и
Познаем Мы И
по строим найдем
Б иты, Нам И
все
Оеэ
Ср а зу Максим
с хе м
кил о Оа йты в
сеть
лишн е й НУЖНЫЙ
МН ОГ О
оа йты,
-
модем ;
но во е.
и скомое .
помогут
з айт и
cye Tbl
файл
найти .
Са м ойлов
Образец:
К О МПЬютер с ИНф Qрматикой З пути Леrче пр одвигаться
-
Выч и сления в ести И н е оwи6аться. ДИСI те кст
- - - - -- --1
Формирует отдельный абзац:
• •
пер ед абзацем добавляе тся небольшой
OTCTyn;
абзац по умол'Чвнию выравнив ается по левому кр а ю;
•
между сл овам и помещается
POBIfO
ПО
0/.tHOMY
пробелу (неЗ8ВИ С ИМО ОТ т ого, сt
nap8Meтp a l iqn з адает выр авнивание абзаца: • canter - це ПТРИ РОВaJl ие всех строк абзаца , 8 ТОМ чи сл е при наличи и принуДи т ел ъ ны х
разрывов строк с ПОМОЩЬЮ тега
• l ett -
• r iqht -
выравнивание по npавом у
• j u s ti fy -
г----- -- -----t-~---' текст эа головха
;
выравни ваНl'I8 ПО ле вому краю;
Kp8.IO;
вы:81l1швавиеe IЮ ширине
----------
текст э а ГОЛО8ха
ЗагОЛОВlШ разделяют инфор мацию на отдельные
тех ст эа ГОлов ха
логи ческие ч асти и тем самым cyt.цecт BeH ЦO
т ехст з а головха
УJl:уч шают ее восприятие. Заголо в ки в
текст заголовха
бывают раЗНЫ М И I10 з н ачени ю (по уровню).
Te XcT
з агоnовка
текс'l' эа голо.вх
~
El
Нам слова иJвеcтIIы, ' И КОМJВ,ютер КВ система
Очею. JOПqtесен нам.
~E]
~o
ДиСК , винч ес, тер и модем:
G О
мноrо схем
И найдем искомое. О
~ LJ
Биты, байты , килобайты
< Ь 3>
Г== П
Нам помоryr в сеп. 'Jaйпt
~:]
-
~
< / hЗ>
~
~
~
Познаем все новое .
l\hl построим
[J
И б .. JlНlUНf:Й
CYOnI СР"У н)'жный файл нaйIи. l 1- ~ Максим Самойлов
L~
Оформление текста. Выравнцвание абзацев. Заголовки и подзаголовки
Уровеnь
3
Откройте файл цев
17
(полужирный,
lesson2.html . :курсив).
Внесите измен ения в начертание абза
Сохраните
файл
под
тем
же
именем
lesson2.htmJ. О бразец :
Компьютер LJ+-~===-:!~:'.'.~ С lOI+ормаПIКОЙ в
nYI1I -
ЛиЧf! продвшаn.CJI В.рпtCJJf!НИJI Вf!C'ПI
И не OUDI6aтr.CJI.
~
Нам слова JПвеспп.lе,
И КОМJП.ютер ~aк С:НСТСМ:8 ОЧCНIo интерССffl нам.
/ 1>~1 L~~~==~ F t::J Дш:к, tlUNЧi!сmeр и IJЮdем.: Г:lj--===~~
текст
face -
Параметр
< /fon t>
задание вида (названия,
гарнитур ы) шрифта, используемого при
отображ ении те кста да 3 1'1:"ро.о" :''-___ те1
преоО ра зовани я
>
редактиров ани е
Примером
рис унк а ,
может
-
Образец:
.:;...""- ., . а- · j P ""'" ", _ ....._-~. ~1~c~ .... ~~Aaqoe< _ _ _ >Обра бо тка
п реоО раэ ова ние
по
Кодирование
r Ум ен ь шите щрифт на одн у
Чт о бы инф ор мация M On1 d обра баты1l .тьс хx )COМIIЪ
е д и н и цу
ер ом. он а
кодир уетсх.
~ I
с;: Кодuрованu~ пред ставление
симв о
в
одн ого алфавита с имв олами другого .
Г
~~,, ~I
Фрагмен т HTML-Koдa:
Кодирование
< fo n t
fa ce= "Tahoma"
si z e::::6
соlоr ~r е d> Кодиро в ание
<smаll>чтоОы
обр а ба тыв атьс я
ко мп ьюте р ом ,
он а
инФормация
кодир уе т е !'! .
l бит < /f оп t> = l разр"д (м ожет принимат ь зн ач ение О и.nи l l II:бай'1' '" 1024 байта ". (2<sup> lO
Оформление текста . Изменение параметров шрифта
25
Контрольные вопросы
1.
Какой параметр тега
п озволяет менять размер шрифт а?
2.
Какой параметр тега
позволяет менять цвет шрифта?
3.
Какой П 8 р8метр тега
type- 1
DpННЦllПЫ, сформулированные в
start=l >
I
1945 ['.
ДЖО1lOJU фо"НеЙПaнtJ.М,
V
1
.
Прuнцun nрограммного уnравлеl-lИЯ (рАботой
компьютера управляет программа, состоящая из набора команд, которые вьпюлняются процессором
автомаПlЧескн ДРУГ за ДРУГОМ в определенной
~
последоват~носrn)
2.
Приl-lЦШ1 одl-lородl-lости памяти (проrpаммы и ДАНные хранятся в одной н той же паМЯiИ; над КОМflНДaJ\Ш
можно ВЬП1ОЛЮПЬ лum:е же действия, Iр аэрешение
защитные с войства
защитные свой ст в а
9.
(уре-I
защитные свой ства
_ _---'-
Процесс ">
34
HTML
Web-КО8струирование на
Образец:
•
c:/I OIIес и u;
• граф И'lесхм: •
тa6JllIЧlIU;
• lIJ)f1>iUOIIIu.
Cuowt к..-nя,циыl cIIGCo6 ,;ШИСИ -=ОРИ1'Х1 - 6.I:« .. а,
Блок~e.IIй
- последовательность
блоков, соединенных
JIННИЯМИ передачи (ветвями) . БлОК'"
по геО>
те кст
заставляет браузер ВЫВОДИТЬ текст на экран так , как ОН запи
сан в HТМL-Koдe
-
СО всеми пробелами и раабивкой на строки,
вывода вазваний блоков) . Сох раните файл под тем же именем.
Образец:
Блок-схема
- последовательность блоков, соединенных
линиями передачи (ветвями) . БJIOКII _ IТ() геQме1ркчесжие фцf}'PloI, каждая нэ КОТОРЫХ обоз начает CтpON> OllpCoЦCnCHHoe дейC'nlН~ ,
OCHO~Hыe бло ки
•
мок 'про це сс ' (об озиачае1" lIwчиcJtlfтe.1lыlеe дсl(:ПIие);
бnoк 'рtшеакс' (оБО!lI lЧ lет rrpoисрк:у вw n оли е ння усnов нlI);
• блок 'Иi1'1"iIJIО И ОСТiUlОВ' (0603 И IЧает иачiUlО и ко н е ц i1IIГOpBТllla);
• БJlоlt 'iПiод;.ЫSОД
11 о бщем BIlДC'
блох 'КОД Нф.nц вя' (обозначает Иi1ЧIII О
(обо~ и .ч .ет вводr'ilI,IJН>Д данных)
МОК 'дoк:yм:CI!Т' (обозначает IlIoIII0oЦ данных на nсч wn.).
qn:na);
-
ДЛЯ
35
Графика
Уровень
4
Откройте файл
lesson5.html.
Добавьте в него текст и отформатируйте
его в соответствии с образцом. Сохраните файл под тем же именем.
Образец: AлrОPUТМLI
Формы (сnо
alink_ " цae!!:'''
...... . .
Параметр
alink
" цвет "
оп ределяет цвет
гиперссылки в момент щелчка на ней мышью
,
- --
Практические задания Уровекь
1
Впишите необходимые те ги и текст, чтобы получить НТМL-код для web- страницы , показан ной на образце. Проверьте правильность выпол нения
задания
па
компьютере.
Алгори'l'МЫ
< /p>
_~ _ _~_~~< / i >< / р>
< и1 < l i>6лок
=square> "модифика ция "
(обозначает
начало
цикла) ;
38
Web- КОН С ТРУИРОВ8вие на
HTML
Образец:
...
~
'*'AIфиnцu' (06"" ••".". _.-:IUо ЦIlU а):
Уровекь
2
Создайте файл
lesson6.html.
Отформатируйте предложенный фраг.
мент текста в соответствии с образцом. Задайте цвета гипеРССЫЛQК при
ПОМОЩИ тега ный
-
:
С ИIШЙ цвет
-
дли непосещеивой ССЫЛК И , крас
ДЛЯ активной ссылки, пур пурный
-
ДЛЯ ранее посещенной (tOT-
работаниой. ) ссылки. Сохраните файл .
Обра зе ц:
ЯЗЬIIСИ программирования • Язык С и С++; • ЯзЫК Pascal; • Basic; • Visиal Basic; • FORTRAN; .ALGOL.
шрифт . ТаЬота. , размер
1
Выровняйте по центру, задайте :красный цвет, разм ер
7,
шрифт
.Tahoma.
ПрограJoO,щрование ПОЯВЮlОСЬ задоrnv до 1Ю'3JШКНОllения перАЫХ персоJt3JIъ.ных
ЭВМ . ЯЗJ,IkОМ прогрaш.rnpо:вamrя ЭВМ первого ПОКОlIеюfЯ был язьп< мaпulННblX КОД ОВ (Я'"JЫК ЮDкоro уровня) . Во втором поколеJПrи ЭВМ появились юыки ВЫСОКОГО УРОIЮI. Коыанды JDblЮI RЫСOIФГО УРОВЮI - ЭТО слова естеCТJIеюlOГО яэьпса.
МноrooБР33l1е JlЗЫКOII npогр;u,o,.cиpoвания отчаC"IИ объяCЮlется много обр азием задач. для: решения :которых сО'щаются программы на этих ЮЫRах.
Фрагме нт HTML-ICода
Яэык
- это самый распространенный .. . ЯЗЫК С++
ТАБЛИЦЫ
Ключевы.е
терМИIlы.:
таблица.
строка,
ячейка,
фоп,
разлиновк а,
обрамле ние.
Тв,.." ДЛЯ оформления табл",ц •
...
Создание таблицы
-
. ..
Задание строки
... -
пара
голубой или желтый СООТ
-
ячеек
-
по
цен т ру.
Вставьте каРТИНRII~ (computeг.gif , dimm.gif, fla sh.jpg, modem.;pg,
monitor.gif, processor.jpg, scanner.jpg)
в с оответс твую щие ячейки. Со
хранит е фай л. Образец: у мройC'l1JО комm.ЮТ~I)!'
ПРОllСС СОР
- устроll:l;ПIО,
обеспечивающе е IIpсо6ра30вавне инфор маЦ ИИ
1{
упр авл С)ll!.С ДРJГlОШ
устро й ств а ми ко мпъютср 1l.
-
,
_.
YcтpoACТI3 aEB O,ll~ инф QР !ll3ЦИИ' по annзр~тны е с р е Д С tЗа ДЛЯ
прео6рюования ИНфор/IIaЦ}lИ 11:'1 форIIIы' по иiПtlой ч~овежу, 8 форму, в осприиимаемую компьютером
----эти иллюстраци и МОЖNО пайти а СОСТ8 88 электронного приложен иSl к кн и ге Н8 са.и're и зда
тельства
(hitp: //www.lbz.rU) B шщке
rи'fНЫ С РИ СУ ИI'Ш.
Урок
1\Comput er.
ЛИбо НСПОЛЪЗОIЩТЪ JIIобые QИа.ло
Табл.ицы
45 Уетр О ЙC'ПJа хранСНflЯ ннформацин
(в нешlllt'J пawm.) предпаэн",,,еиlol ДJlЯ JПOбоГ() BRД.IL ВIoIJ:П1Oч еПJlС ПИТ'а IlИЯ I(ОМД lo ютера
#о
lIe
ПРИВ ОДJlТ 1( очиnкe
внеШllей паllИТ1!
~ ~
....
'*
'
Контрольные вопросы
1. 2. 3. 4.
Какой тег сл ужит для создания таблицы?
5. 6.
Какой параметр задает ширину таблицы, строки , ячейки?
7. 8.
Какой параметр задает расстояние между ячейками таблицы?
Как задать в таблице определенное кодичество строк? как задать
8 таблице
определен ное количество СТOJIбцов?
Какой параметр задает выравнивание содержимого ячеек по горизон тали? Какой параметр задает расстояние междУ содержимым ячейки и ее
обрамлением? Каки е параметры задают цвет фона и фоновую картинку ДЛЯ табли цы,строки , яче йки?
9. Какой пара.метр задает толщину линий разлиновки таблицы? 10. Какой пара.метр задает цвет ЛИНИЙ разлиновки для табл»цы, строк и , ячейки?
11. 12.
Какой параметр задает выс оту строки таблицы? Какую таблицу создает следующий НТМL-код?
< ti t l е> прог ра мма< /titl е>
мо нитор< /td>
cKaHep< /td> КЛдвиатура < t d>принт ер
мышь системнЬ1Й
|
бло к |
ТАБЛИЦЫ (ПРОДОЛЖЕНИЕ)
Кл:ючеВLJ.е термины: объединение ячеек по строкам, объединение ячеек по столбцам, выравнивание содержимого ячеек ПО вертикали.
Теги ДЛЯ оформленн" таблиц
. ..
Заголовок ( tШ8JIl:(З*) таблицы
... ... |
Параметр
Itоли чество
colspa.n -
столбцов, I(оторые неоБХОДИМО объединить в один столбец
. .. < /td>
Параметр
СТРОК. :которые необходимо объединить
. .. < /th>
8
количество
rovllpan -
одн у строку
Параметр
ru18S -
:ВИД разлиновки
между ячейками таблицы. ВО3Atо:ж;ubtе зн ач е ния:
r01fS -
ри су1O'fCЯ JUНШ . И,
рзлдеЛJlющи е СТРОКIt;
col. -
рисуются
линии, разделяющие столбцы;
.11.11 -
рисуются все внутренние ли .иии разлиновки
|
1 2 |
| 3 | 4< !td> |
4.
Какую таблицу создает следующий НТМL. код?
Т аб лица
| 1< /td> |
| 3 | 4 |
2
WеЬ. констру ирован ие на HТМL
52
5.
Какую таблицу создает следующий НТМL- код?
Табnица
< /head >
|
| l | 2
|
< td >З
| 1 |
б. ДанНЫЙ фрагмент страНJlЦЫ выполнен с помощью таблицы. Почему этого
lIe
ВИДНО на рисунке?
7стройс~ ДЛЯ 5!Юда ХНфоркацмх
7.
с ПОМОЩЬЮ каких тегов и пsраметров МОЖНО соз дать таблицу по об разцу?
...
Таблицы (продолжеЮfе)
8.
53
С помощью каких тегов и параметров можно создать таблицу по об разцу?
9.
С помощью как их тегов и параметроs можно создать таблицу по об
разцу?
.....:зк~--. . . . .8ff8I8К
10.
' . . . .~. _ _
С помощью как их тегов и о араметров можно создать таблицу по
образцу?
ОФОРМЛЕНИЕ СТРАНИЦЫ С ТА&ЛИЦАМИ. СПЕЦИАЛЬНЫЕ СИМВОЛЫ
КJIЮчевые термины: поля стр аницы , заголовок страницы, фоновая :картинка,
специал ь ные
символы.
Теги ДЛrl оформления страницы
.. .
-----,
Горизонтальнан линил ( . отлиновка. ). П ар8Мет р
noshada
ОП ределяет способ
Э8хр аСI(И го ри зонт аль ной
линии
Х8К . СПДQШВОЙ . И не требует указания зна чении (без данного
f---
Комль ют ер< / i > | О сн о вные устройств а | Сист е мнЬ!Й
|
<
<
< <
> > >
компьют ера< /td>
Олок
мони тор< /
>< / t r> > >
КлавиатураaJfelllUl lt счатнз31lИ" ииформацМ !Q
'(nporpalllll и JtаIlIlWЖ). иепосре.аствеиио
Пос1"tlJUl"~ !I~" )'cтpoj!c....,., *fn~f) - служит дм 1Ipаиеlll1Л":
!jЧadВyющее Ii 1IиФОРIAЦН \lИНО-
сч~аn. :.:рa1lSllJБЮC$I е кем информацию
8 ПЗУ иt.n3Я)
,
. . "'"
"-", - --..rt
.-
Уровен-ь
соzpаиенИII
НфОРllliЩИИ ПОСl1 е В~ЧСНИJI
р llТaВВЯ IUШИВ IoI. ГnааИUЫАоСтОВRСТВОIII .1
.. оперaтtПlliОЙ
•
- .:;
--.
'7 - .
эиеpr~ав~_СlllflilJ!, T%,;e~ ~,elio)I«IJ:lIOCTh '~
, иифоРшции, ПQЗВЩIЯет оnер.ttИВНО ~кеиiПЪ 811формаЦlD()
~ ...
],itl'l~J'1ТёеЛloио"пр~це4Е~П.1IWr1i
1i еQ.ц:нясмС>Й програ~ноj! и спрзвочио
МI!ТП яв.ueтt1I ее
6ucfPoAeitcТ1lllC В Biii~:ZI(~ обраще нн".: dZДоi!;'ячеib:e nаlПfИ ИдeJIlo н о (прsiмой "'" ~ - . 4# 4>
~р'еСИЫЙ?lОl;'Т1nIUlче~
_.
4
Создайте файл lеS80n9_З.html. Создайте
11
нем треб уемую структуру
web- стран ицы и внесите в нее uужную информацию по образцу. Задайте в те ге
100. вень
следующие параметры: поля слева и справа - рисунок comp.jpg (находится в папке Урок 9j Ypo-
фоН страницы
4).
параметры: расстояние между содержимым - 4. расстояние междУ ячейками таблицы - 7, толщина линий разлиновки 2, выравнивание - по центру. Задайте в теге параметры: выравви вание по гори зонтали и вер тик ал$1 по центру, ширина 100 пикселей. Создайте с помощью тегов и за Задайте в теге
ячейки и ее обрамлеuием
головок табл ицы коричневого цвета (,вооооо). Текс т в первом с толбце оформите сиреневым цветом (,вооово), во втором столбце
-
голубым цветом (#оовово), в третьем
умолчанию). Сохраните файл.
-
черным (по
Web-КО1lСТРУИРОН8Яие на
58
I:ITML
Образец :
Контрольные вопросы
1.
Какой парам етр тега определяет способ отображения ГОРИЗО Н тальной линии как .сплашноЙ.?
2, 3.
С ПОМОЩЬЮ К8}(Оro атрибута можво задать цвет фона ДЛЯ web-стравицы?
4.
КахОЙ парам етр тега
Какой параметр тега позволяет задать ширину пол ей страни
цы слева и справа?
по:щоляет задать ФОUОВУЮ картинку ДЛЯ
web-страницы?
5.
С п омощью какого тега можно создать заголов ок таблицы и рас поло ЖИТЬ его относ итеЛЬRО нее?
6.
Опишите, что будет DОК8зывать браузер ДЛЯ тега:
Опиш ите, что будет ПQказ ыватъ браузер ДЛЯ тега:
Параметр а 1 t
тек ст . всплы -
вающей ПОДСIШЗКИ , ДЛИ активной
област и ка рты-и3Ображеuия
-
_
Гиперссылки . Карты-из06ражснш[
(ImageMap)
61
Практические задания УрО6еnь
1
Запишите веобходимые теги JI текст , чтобы ПОЛУЧ.ltть НТМL ·код ДЛЯ web-страницы, "оказанной на образце . Проверьте правНЛЬНQCТь выпол нения
задания
на
I(омпьютере.
< селt еr> < >< Осн овные
хар акт ер истики
<
< < <
размер
>
ра зрешение
> >
за щит ные
аligп =сел tеr >
>
монитор а экрана
по
(dpi
диа гона ли
-
(дIOймы) ;
кол ичес тво
т оче к
на
дюйм) ;
св ой с т ва .
< /body> Образец:
•
размер )k'Р8НЭ по ДНlroнanн
(дюймы) ; О сновные характернС1ИКН
• разрешение (dpi -lCо.личect1l0 точек на дюйм);
Nониrора
•
"ровеnь
1.
2
Создайте в программе сунок
-
именами
911IЦИIНые свойства.
Microsoft PowerPoint три
рису нка (каждый ри
в отдельном слайде) и сохраните их в отдельных файлах с
bough.jpg, follow.jpg
и
cycle.jpg в папке Урок 10. Отк ройте 400 пикселей с помощью ко
получивwиеся файлы и задайте шнрину манд
2.
Image
~
Resize/ resaple. follow.htm, bough.htm
Создайте файлы
храните получивmиеся файлы.
и
cycte.htm
по образцам. Со
'"
ОtJраз цw
~
follow.htm:
Базовая С1руктура " следование " Базовая cтpyкrypa
"следование" (шrnейчатая) представляет собой алгор~,состо~из mrnейной цепочки действий.
-.,
.,
1 ДейСТ8.2..
I
~
I Дe/ll;т ...
~
n
I ~
~
;;'
bough,htm:
Базовая С1руктура "ветвление" Базовая структура "ветвлеЮIе" представляет
собой ашориrм,
~ ~ 1iA!I" • 1'0
содержащий одио ИJПI
,-
....
несколько условий и,
,
соответствеJПЮ, две ИJПI
--
(действия), которые будут совершаться, есJПI условие
- да),
y~_
. ....... ..
---т&CМI_"',_
,
ДI'дillII:t_
~'"
указывает действие
-
----,Vcno_
------
более ветви: одна ветвь
въmолняется (ветвь
'"
""
--
""
1 f
i i >
....... IIIiМ.
а вторая ветвь указьmает действие
(действия), которые будут совершаться, есJПI условие не
въmолняется (ветвь
- нет).
Возможны случаи, когда проверяется ВЬПIOJшеJШе нескольЮIX
условий (выбор) и указьmаются действия, которые будут совершаться при ВЬD10mrении каждого из условий, а также
действия, которые совершаются, есШl ни одно из перебираемых условий не въmолняется (выбор
-
"иначе").
~ ~
т ~
cycJe.htm:
Базовая С1руктура "цикл" НП
Задать количество повторений
~CIlO8_~ до
можно разными способами. Базовая структура Ци,,-, Для одначает повторение действий столько раз, ско лько умещаетси
.-----
Algorithm великого
математиха IX в .
среднеазиатского уче ного Мухаммеда б ен Мусы аль Хор езм"
(/87 - 850). который
сф ормулир овал правила
вып ол нения ариф мe-tи ч сских деЙc-тsиЙ . Перво началън о П ОД anгорнтмзми п о никanн только пр авила выполн е ния ч етырех арифметич ссlCНX
действий :над мн огозначными чи слами . В дальнейше м
ЭТО понятие стали и с пользовать вообще для о б оз нач е ния п о сл ед ователъных дей ствий, лриводящик х р ешению п о ставле нно й зада'Чи .
HTML-Koa:
Сло в о
" алгори тм "
име н и
средн еазиатского
(7 87
над
п он я тие
стали
пр авила
лати н ско й
вып олнени я
де й с т вий ,
в ооClще
аль
пра в ила под
четыре х
чи слами.
н апис ания
IX
Мусы
Перво начально
в . Хо резми
выпол нен и я ал гори т м ами
арифметиче ск их
дальн ейшем
8
для
пр ив одя щих
зто
ОClоэначения к
р е ш е нию
задачи .
определяет
форму активной области?
Объясните смысл следующих записей на языке
HTML:
<area shape=rect coords="33, 60, 191, 246" href="alqoritm1. htm"> <area sha.pe=poly coords="534, 62, 699, 62, 698, 236, 626, 261, 534, 235" href="algoritm1.htm">
8.
Как будут записаны ссылки между всеми парами файлов, размещен ных на д иске согласно показанному на рисунке дереву каталогов;
КОМI1ЬЮтер. htm.l МЬПlIЬ.
htm.l
~лавиатура.htm.l
монитор.htm.l
системный бло~. h
9.
tml
Как отображаются на экране текстовые и графические гиперссылки? Как отображаются активные зоны карты-изображения? Что нужно сделать, чтобы пользователь мог понять, что в данном месте карты
изображения имеется активная зона?
10. Какие параметры нужно записать в теге , чтобы задать следу ющие хараI(теристики ссылок: для еще не посещенной ссылки красный цвет; для уже посещенной ссылI(и - зеленый; цвет ссылки в момент щелчка мышью - желтый?
ФРЕЙМЫ
Ключевые те рмины; фрей м, полоса прокрутк и.
Теги ДЛЯ оформления фреймов
-
- -
...
Разбивка 01\Н8. браУ36ра на фреймы
(по вертикали и / ил и по ГОРИ3Qнта ли) Высота фреймов ( В пи ксел~х, в п ро ц е нтах
.. _
или относ и тельный размер)
.. .
Ширина фрейм о в (В пикселях,
...
Толщина рамки ф рейм ов
Наличие рамки
Граница не вы водится 80все или
в процентах ил и относител ьн ый ра з мер)
-
П а раметр
и м я фaii:ла, кото р ЫЙ
src -
будет загружен в да нный фрейм изна чально
---:
- - -
Параметр щuпе
-
индив идуальн ое
имя
фрейма
--
За прет изменения размеров фрейм
•
пользователем . Есл и этот парам ет р
отс утствует, Т О М ОЖ НО перемеща т ь М ЫШ Ь Ю
границу фрейма влево - вправо или
--- -
вверх -вни з
Параметр
scroll inq -
запрет п рокру т к и
содерж имого ф ре й ма (значение по) л ибо указание вывод ить линейку прок р ут к и
_ _ _ _ _~·ол~кЮюмслучае (У8s)
П араметр
marginwidth -
ОТСТУIl
В пщ(селях содержимого фрейма о т его
гран иц по горизонтали ( по умолчанию
-
отступ равен Параметр
10
пикс елям)
marginhQight -
отсту п
в пи:кселях содержи мого фрейма от его
гра ниц ПО вертн кал и (по умол ч анию отступ равен
10
Dи кселям)
Фре ii N~ы,-________________________________________________________~ 69"
~ Практические Уровеnь
задания
I
Запишите необходимые те ги д.nя переХОД8 в другие докум е нты при
усло вии , что все док у менты нах одятся в одн ой папке. При этом цвет еще не посещенной ссылки
-
с сылки должен
зеленым,
быть красным,
цвет ссылки в момент
цвет уже посещенной
щелчка мы шью
-
пурпур
ны м.
Дискретностъ .html
С войства
Определеlolность.html
алгоритма
РезультатИ Вностъ . htm
MaccoвocTh . html
____________________________ < /ti t le> С войс тва
дисКреТНосТь
< hrеf= ,,======= ,," >определенность < hre f=" >ре зультаТИБНОСТЬ < href= " " >м ассов ость
Уровеnь
1.
2
Создайте папку Урок
11,
а в н ей
файл
-
lesson11_1.htm с верт икаль· - 2. Соотношени е
НЫМИ фреймами п о образцу . Количество столбцов ши рин ы стол бцов
-
20 %
и
80%
разрешите прокрутку, в ВО втором
соответственно . в пе р вом фрейме
-
размеров фреймов . Сохраните файл .
запретите. Запретите изм енен ие
Web- ковструирование за
70
HTML
Образец :
Результат:
Пр имер разбивки на верт икальные ф ре ймы
< /h t ml>
2.
Создайте папку Урок
11,
а в ней
-
файл
lessonll_2.htm с ГОРИЗОН - 3. Соотношение
тальными фреймами по обра:.щу . Количество строк ширины строк
- 10%. 40%
и
40%
соответственно. во втором фрейме
разрешите прокрутку , а в первом и третьем
-
изменения размеров фрей мо в . Сохраните файл. Образец:
запретите. Запретите
Фреймы
11 Результат:
П ример разОивки на
горизонта л ьные фр"еймы
Уровень
3
Создайте п апку Урок
11,
а в ней
-
файл
lessonll_3.htm.
Создайте
требуемую структуру web- страиицы по образцу. Соотношепие высот го ризонтальных фреймов
-
20% , 50%
и
30%
соотsетствепио. во втором
фрейме разрешите прокрутку . а 8 первом и третьем
-
запретите. Второй
горизонтальный фрейм разделите по ширине в пропорции ретите измен е ния размеров фреймов. Сохраните файл.
Образец:
Ji fll"'~lr''''''.''Ii'
1"""""'"
I
_- X
50 : 50% .
Зап
Web- конструщюваНlIе Н8.
72 Уровень
HTML
4
Создайте папку Урок
11_4.
СоЗД8JI'Ге в ней документы:
1.htm,
2.Ыт,
3.Ыт и 4.Ыт по обра зцам. Образцы 1.Ыт:
DVD ·тсхнолоГИJl И~обр ~.екие технo.nо гни цифров ой 3(1ЛJ1~И ~oyxa НI1
CD rюзвonипо
СПРUЩTh СJl с I.IlJ'Мами,
которые ~ceгдa nPИСУТСnОIl&Jщ при 1I 0СnP ОКlll едекии 311р:6. с rpaмrmIl.С1Ю{QI:. ПОJIWение
Audio с
DVD
помержкой МНОГОICанапъной записи 3 11р::& стапо о чер ер;кым LUV'OM '" Нl1Xож,ценюо
решешщ ОТ1l!ЧaIOще го IIЫСОЮfМ требо!'aниJIМ,. npеДЪJПm:llемъlМ:К r::ач е сТ1lУ' з аписи и 11 ОСПРОl1:1IlедеЮIJI:
ЗIIУ"& .
2.htm: Изобр етение 110
1980 rolf:Y ICOMn(U(T-ДИ С"1I. было nерlIЫМ. з начитenьньП\.l
шагом впе р ад 11 р a:JIIИТИИ цифр 011 ой технолоnt:И. Р а3меры lCомntt7·дисr::а noражt.m:t:
120 мм 11 дlfaJwIe1pe 11 1.2
мм толщино1!, а ею::оС'ТЪ
11 74 мциy'n>!
Бьmа ПРОСтtI реIlWIЮЦИОИНОi\, не ГОIIОрЖ уже о ';:lI.чеrnе, котор о е иenъЗJl бьшо сравниrъ с ';:l,lчес'nlОМ "УДИОJ:lI.ссет ИIIИ трамплаCТЮlОIC. Кроме того, ицформ1ЩWI на ItOMnUT-lU! Ске roр83д,О более устойчив а IClI!l е lШlY.М
II03АейcnЮlМ, и по WНII.чanо. что tnlформaцm: на "ОМПaJ(Т-А!1сltllX м.ОЖ~Т хроанитъс}( I! течение
Дomш: лет, В
1985 rO/fj на рынке попиnисъ уеТ'р ойсп а ДШI ПОШЗ О8 ателей пк.
спое О 6ные
с ЧИ!Ъпнl.Т1I информацию С J;:ОМПaJ(Т-АИC')I;ОВ при помоЩlt ItОМПЬю:reра. НО ТОТ момеК1'. когда
eМXDt"ТЪ жеc:rк:оro RtcJ!;a едвll. ДОТ1lnП!оша ДО
к еБЫl!aлyIO циФру 8 650 М егабайт.
30--40 М 6 1lЙ'I,
eмxocn. ДИСМ CD-ROM C Onиаll
э начиreпьным
тешопогии
шагом вперед
I!
р ll3:виrnи цифр ОВОЙ технологии.
i••
цифр оlOЙЗaIIИСН информации - пер евернет все
Рa::Jмерыжомnект-дисжо. поражenи:
120
предстuпеllИX О хранени.и
ММ!lo дишетре и
О.
информации и ее р аспро странении.
емкость!lo
1,2 мм тonщиноi=i,
74 минyn.l БЬШI! пр о сто
ревошоциониой, не ГОllDpЯ уже о
Аббр Сl!иатура - ОУО "
Disk)
(Digi1.aJ. Ver,ati1e r;wo;;
ре.сwифРОl!ьmе.СТСJl
кече сти е, жоторое He.n:ь,x было
"цифр оl!ой униеерсIшъныйис:r::" или
с рuниrъ с ICо.ч есТ!lОМ о.УДИОlCассет или
кю; ' ЦИфр Оllо йВиде ОДilС1!;" Бanее
грliМПltестинок Кр оме тoro,
Jl}!DfC :цвета, более чen;о е изображение
информщw! ШI. М:Мn~- ДИС1'.:С
ropa::JAo
:и lIыдающееCJI r;е.ч есТ!l О 311УХе.
- A6llelto
боле е устойчша !':I!нешним
не полнь!Й перечень npеимущести
!юздеЙСТ!li1ЛМ, и ~TO озно.чWJО. ЧТО
НОВОЙ технологии.
lIНф ОРМация на коыnu;т·дисItU может
обеспеченnя зошиси Юlформ6ЦКИ с
Ч'&НИIЪС" е те чение дonmx пет. В
более IыоItойй IIIIОТНОСТЪЮ
По добн о
Подоб н о
CD диску, CD ди ску,
1985
DVD-ди с к также имеет разм ер
8 DVD для
120 мм 8 д иаметр е . 1,2 Мl\-I (состоит из
толщин а DVD-диска составляет
подл о жек толщин о й
0.6
ДВJ'X
ММ , соедине нных вместе). Новые DVD- пл ейер ы
поддерживают также стандарт существующих в настоящее время ауди о
компакт-дисков . КОМ:ПaIcr-дисковые плейер ы и СD-RОМ-иакопители используют кра с ный лазер. который излучает С8С1" с длин о й волны
нанометр ов. А и
635
DVD-ROM ДИСКQВОДЫ
нанометров .
780
исп ользуют л азер с длиной в ол ны
650
= 111
Web-конструирование на
74
HTML
Контрольные вопросы
1.
КахОВО основное назвачение фреймов?
2.
С ПОМОЩЬЮ какого тега можно разбить ОКНО браузера н а верти каль ные и/или горизонтальные фреймы?
3.
Какой параметр тега
позволяет устано вить количество
горизонтальных фреймов?
4.
Какой пар аметр те га
п озволяет установить количество
вертикальпых фреймов?
5.
Как можно задавать высоту и ширину фреймов?
6. ЧТО обозначает символ .
7.
*.
в задании высот ы и/ или ШИРИНЫ фрейма?
С помощью какого п араметра тега
МОЖНО
отключить вы
вод границы между фреймами?
8.
С помощью какого п араметра тега можно задавать шири ну рамки между фреймами?
9. 10.
Какой те г служит для указания характеристик каждого фрейма? Какой оараметр ПО3ВOJ1яет запретить изменения размеров фрейма?
Что ПРОИ СХОДИТ, если ЭТОТ пара.метр отсутствует? В каком теге задает ся этот параметр?
11.
Какой п ара.метр позвол яет разреш ить или запретить прокрутку фрей .
ма? Какие значения при этом в нем указываются? В каком теге зада· ется ЭТОТ п араметр?
12.
Объясните смысл записи:
< frame src= " 2. htm " nor esiz e s crolling= yes ma rginheight : 5 ma r g i nwidth=15>
13.
Объясните смысл записи:
scrolli ng=no margin height=10
ПЛАВАЮЩИЕ ФРЕЙМЫ
Ключевые термины: фрейм. полоса прокрутки, бегущая строка. Теги ДЛЯ оформлеННJI фреймов
~iframe> ...
Создан ие плавающего фрейма
<iframe .rc-".,html" >
Пар fl1it'lетр
Па раметр
~· f rame hеight8
direction -
направление
движения сбегущей строки.:
right -
Пврвм етр lоор
-
18ft -
слева
справа налево
кол ичество повторений
движений . бегущеЙ строки . :
v.C'JJO -
теКСТ
пробегает по экрану указанное количество рвз;
in!1n1 t. -
непрерывное повторение
(по умолчанию)
<marquee width-хОJJ.v.~.о 1l.KCeJJeii>
П араметр
<marquee
П араметр
h8iqht~ХОJJ.ч.ст.о
width
шориаа области .бегущеЙ
строки .
height
высота области . бегущеЙ
n.хселеJi>
строки .
<marque e
Параметр
scro ll amount- v.CJJО>
перемещения с беryщей строки.
,.-,---. ~
(от
scrollamount
1 до 3000)
скорость
,7~ 6______ ______________________________________,"сс. сЬ~- ~руирование t l8 HT~L
Практические задания Уров е nь
1
Зап и щите необ ход и м ые теги, чтоб ы получить НТМL- код ДЛЯ созда · ния ф рей мов ПО об разцу . П роверъте правильностъ вы полнения за дания И8
ко м п ь юте р е.
Образец:
К р оссво рд
,
По горшонт алu:
1. 2.
Одик ИЭ
!nblK08
прир,ммирования
~
YC1p o ikIВO В с остав е ко мпьютер а
,
ДШI п р и ема н 3iШОlllИНlJl ИЯ О-Ци оrо
il
чи сла ,
ТЗIC _С В ЫП Q./JИ~ ИИЯ
1
опреДм еН II ЫХ о пер ац ий:аа,ц пи М!{
3.
4
Е,цИ НВQiI измtрс иlUl. J(OJ[ ичсстза информации н С _ClСТИ п аlllЛТК.
p aвKiIJ'I 220 байтов 4.
Внешнее yt:Тpойство Ko wnьtOttpa для ()то6раж С I!ИII rpафическо й и 1'еКC1'OJ30Й ин формации
S.
4
---
-3
-1
5
1
1
--
5
Мин вмam.И a!l aдpccyeloWl облacn, па~и
1L
ПО 6ерm шraлu:
1. По и меНОЕ аИИ &ll О6J:I асn. па д иcn 2. Осн озной 'м с мснт компьютеров тр етъего и Ч С'ЦI срТОГО nоколе и uй
3.
Вн ешнее УСТР ОЙ C'ffi О ДЛЯ BblBootIa информацИИ
4.
wопи:rсJIЪ н а Мl6w;в:.: магн итн ых ДИСICЮC
5.
Миннмam>н ц единиц!!. иэмер е llИЯ объ ема паМЯТfl и I(ол ич е сm э инфорlvl!ЩИИ
C40sa
дм.
cnpaSOK
Фрагмент
H TML·xoaa:
< р a lign=cen te r>
кр ос св о рд< / f оn t> < /р>
B каждой груп пе слов найдите лишнее
<iframe name= "Work " src" " anagraml.gif " width=250 scrolling=no he ight=2 00 hspace=50> <mатчuе е b gcolor-rgb ( 80 , 280 , 80) height= 20 behavio r =" alternate" vspace= 20 a l ign= "middle " >
10.
Как ую смысловую ИНформацию н есет тег и его параметры?
<ma rquee bgcalar=' gec0 99 heigh t=20 behavio r =" sc ro ll " vspace =20 al ign="midd l e" >
т иповая р а 3ЛItНОВ" к~,,--
ет" >
"
Высота фре ЙМОВ ( В пиксел я:х:, в nроцев тэ. х ИЛИ O'I'HOCII тельн ый ра з",~р)
_ _ __ _ _
Цвет рамки фреймов
_
Тег
-
КItЖДOl'О и з
задавие парам етров
создаваемых фрей мов
<Jfra mese t> ::ссссс;:оо
.
П арамет р
з агр уж ен в
t arqet -
указы вает им я
ф рейма, в который должен быть з агружен
указа ПIlЫЙ файл по Дд.f{НОЙ ГИllерссылке :
target =" work " >
•
urqet п рисвоено и мя (Work), то указанная в ссылке web- cтpa лица (doc. htm) будет открыта
осли па раметру
фрейма
в этом Ф рейме;
hre f ="doc . h t!!l" target= "_blank" > СТРоlI rица
•
< fr ame s rс ... " Иня С'I'Р.НИЦЫ меню" паm е"' '' Мелu'' nore siz e scroll i ng=no>
,Во,"а"И"М ое О" Д,"~ 'Т ,В еИ~'сМ ""',","ДсУс>Ф"Ро'еЙ'М ~'"М"И,-____________________ Уровеnь
3
Откройте
1.
_____________ ___________ 83
1.htm -
папку
Урок
заголовок,
13. Создайте web-страницы по образцам: start.htm - стартовая страница, menu.htm -
страница меню.
Образцы
1.htm:
Цвет
фона
и
цве т
текста
-
,
.
start . htm:
.• -. Вирус !
Виру.с!
Вирус! Вирус!
Вир ус!
'"
ВИрус!
-
"ВИрус!
БИРуs;: !
"* - -
"'"ЕПР У.
программы - стор ожа
програ ммы - детекторы
пр ограммы - рев изоры
Образец:
ml2 wа ",щ,
Aill:ili1R~
m)п rr~мыы
J!m!'ЩIJ~
Взаuм одействuе между фреймами
УровеfC,Ь
87
5
Создайте обрат ные сс ылк и и з web - страниц
d.htm , загружающие (start.htm).
doc.htm, r .htm, c.htm
и
во фрейм с имен ем Work снова стартовую страницу
Образец:
прогпаММЬJ П!)о rpОUdЬ l
!И'uтqpа
.,.....
IW O!pam.v.l-
[ll?Oru! MMbIЩ: l elПО Р Ы
ПОQШ8МUЫ роторы
Контрольные вопросы
1.
Как им будет вид фрей мо вой разме тки? Изобразите разбивку окна бра узера на фреймы по п рив еденн ому ниже НТМL - коду:
- - - --
311ачение
f- 1)
Теги, определяющие интеракт ивный элемент фо рм уд лра
-
текс товую область указанного
р азмера
-
-
--t-
( n строк х т СИМВОЛОВ)
- -
И мя текстовой области
Разбивка текста в текстовой области на строки
(off -
v1rtu.l physical - по нажатию
не прои звод ится,
автоматическая,
кдавиш и
Enter)
-
-
-
91
Формы
~ Практиt.tеские Уровень
задания
1
Запишите
необходи мые
теги,
чтобы
получить
HTML-KOA
ДЛЯ
w eb - стра ницы, ПОК8З8Н НОЙ на образце. Проверъте п р авильн остъ выпол нения
задан ия
на
компьютер е .
П ример
лрименения
пла вающих
< bgc olor - IВссО99 - 20 align= " middle " >
фреймов
height=20
behavior= " scroll "
~ Афоризм< /h2> name =Work src= " aphori sm . gi f " align width 7 10 scrol ling=no height=1 40>
Тем а;
--..
_а
" Изм ерен ие
инФо рмаuии"< /Ь>
93
Формы
•
раскрывающuйся список (осталыi.еe списки
1. Сколько мяч
или
Сит информации нужно ,
-
аuалогично):
чтобы опре д е лить :
красный
синий?
<se1ect
паmе =" 1">
v a 1ue="1 "> 3 2 l 4 < / selec t>
3
Создайте три страницы по образцам и сохраните их в файлах с име
нами
31.html, 32.html
подходящие
по
и
33.html.
Картинки можно использовать любые,
содержанию.
06ра.зцы 31.Ьtrnl
: Беryщая строка
••
Web- конструироваНll8 на HTМL
Результат:
Прим ер
менlO
выбор а
П . Л . Чеб ышев В . Я . Бун яко векий С . А . Лебедев < Ьт>
32.html:
Web - конструированле на
96 Уровень
HTML
4
Разбейте окно брау3ера на три фрей ма . П оместите в каждый фрей м ранее созданные web- страни цы.
Образец:
Уровень
5
Создайте web-страницу, используя текстовые поля ввода. поле ввода пароля и текстовую область.
Образец:
Формы
97
Контрольные вопросы
1.
Что
такое форма? Кю\ие дополнительные возможности она предо
ставляет пользователю
2.
-
посетителю сайта?
С помощью какого тега можно создать в форме элемент для ввода тек ста большого объема (в несколько строк)?
3.
Какой параметр тега
<select> позволяет
выбирать одновременно не
сколько пунктов списка?
4.
Какие параметры заданы для следующей текстовой области? Что они означают?
позволяет создать поле для ввода па
роля?
6.
Какие параме тры заданы для следующего текстового поля? Что они означают?
Какие параметры заданы для следующего списка? Что они означают?
<select mu l ti ple sizе ="З" name=" l "> д . Нейман А. Тьюринг Д. Стибинц
8.
Кю\ой тег позволяет задать элемент списка?
ФОРМЫ (ПРОДОЛЖЕНИЕ)
Кmoчевые Т9рМИИЫ: форма. интеракТИВНая , который должеа находиться или .
Начало ск рипта. по
'Указание. на какОМ
инфор матике
я зык е ов написак
<script 1anquaFJe=vbscript> sub tes t
i
Н Н
it
if it
if it
if
Счетчик количества
_ правил ь выx
п::: О
if
в пределах те
Te cT
н
npocтoтa.
fl.e1ements(1) .checked "'оп п=п+1 fl .е 1emeпtа(б) .checked "'ОП n=n+1 fl .• 1ements( 10) .check.d "'ОП п-п+1 fl.e1ements(13).checked "'оп n=n+1 f1 . • 1emeпts (lб) . сhесk.d "'ОП п",,"+1 f1.e1ements(21) .checked "'оп n=n+1 fl .•1ешепts(21) . check8d "'ОП п=п+1 fl .• 1ementa(31) . checked "'оп п:::п+1 f1 .• 1ements(34) . check.d "'ОП п-п+1 f1 .e1ement8( 31) .checked "'оп n=n+l
от в етов
ИМеется 10 вопросов. Для каждого вопроса ра сс м атривается
l /
>......
событие выбо ра
правильиого ответа.
Если .выбрав правильиый ответ. то к зн ачению счетчика
приб8llЛЛ&reЯ еДИннца . Параметр
checked
f1 . t1 .value=n end sub
равен
True
(tистина . ) , если флажок с данным поря дковым номером
был выбран (помечен)
Лрu.мер:
пользовател ем
1. ПOд.lUJЙ. нn5ор СШl.6I.Jдн, ucnAUJyUllo&X' iJJЦ кооupо6lllШJl, нлзыtuUO" :
Имя формы:
I
fl
Обозначения флажков:
О шрифтом
-+ e1ement. (О)
О алфавитом
-t element. (1 ) -t elements (2) ""'+ el_nt. (3)
О с интакСIfСОМ
]
ОШр.'.l'ОМ Dал ФIЦIIПQМ
EJ fIIIП1lКCUС:ttМ О ftМ RIrпu;:ой
О сем анти:кой
П равильный ответ на первый I:IОПрос:
el . . . nts(l) Запись соответствующей стро:ки сценария :
if f1 .• lements (1) . check.d th.n n=n+1
Web-l., ,:>
следующего вида:
Baplllllfmw omfienws
* ",,i,'8
J
ElOEQД.I>. ,8.
''' 1 "
-.
\ .1k_,
:1 _""
,I
./
Г
." \ \
NI- IH ' K
,
В виде блок-схемы изображен 8Ш ОРИ1М:
K'."'1 , N:~
,.' ::1_
K:=~+ 1
2.
B!lQAf\Г /
,цЦ
ВopIItUlmwomfiешos ~,
~ ''''
о циклический О разве1Влениый
() рекурсивный е л.неЙныЙ
~ ~ ~
1~ ~
~
,1 t
У'ЧЕ!6ttый
БеJlсик
IJl1гормтммчвскмА
ПаскOIЛЬ
3. Зн а чение
перемениой а после
выполнения фрагмента программы :
I
B0p8IJ11"''' o,.«m".
•
.эым:
. := 1
..;= 1.;
...
ЮRЬ:: l tо l0
..
a.u. ~ Ь2I
1 D2 10
.:"'01+1
01:= .. ",1;
..
с
{) 0 0 0
~
1
13 12 11 10
, Уче6Нhl
Беiiемк
ПаСКiI1IЬ
I 811rоритммческиIA
4. Значение
выполнения фрагмента программы:
.ЗЫk
to"do I lUIlII!L n!!!l И "
k, .. :tto.1
..
"'Н!.•• kот:Lдо
m,,,I'II ••
~
~,
3
переменной т после
IJ. . . . .,.., t1III«lIUМ
0 21 (!)
20
III{)0 13 12 §
~
&:
== ""''' НII Ч"ЛО
,. I!,\
5. В
I
•,.-
виде блок-схемы изображен аш оритм:
ВapaлII"'''' Om6emOlJ
~
ЦИКЛИ I [ еский
I
\
.
~~~
""
6. Значение Б е ii с и к
Паскa.nь
I аn ro р итмическмй .з
,О .
••
.: .. a+:l;
1
r
ID 10
1 .:. . ... Z
....
К
~ _b !lIl l1&1 10
переменной а после
выполнения фрагмента про граммы:
BapulJIf",.,
0 0 1110 0
20 21 22 24
o,"иlnfМ
~
11
•~
~
i;;
••
...
:t
I~
1, 7. Зна чени е
Уче бный Бе М СИI
3 , 4, 5 2 , 3 , 4 , 5 1 , 3 , 4
|
2 . у со
вас
модем
с коро с тью
обес печи вает
12
К!jит/с.
п о т еле фонной линии
такой
- 23
прием /передачу Скорос ть
КОи т/с.
ИмеЮЩИЙСR
СОО!jщений
перед ач и
сооС щеНИ R
Пропу с кная спосо б нос ть
с истемы равна : ,МрfН_~НomбрRJЮle1" IO( содер:-Юll.ЮtНUI 'КP~ j(ОМ1~ютера.
Теги ЗЛ~"'I"ТLI. l(отopw._1 OЦJ
Инrqжму.
(/Р)
ПрqOf1lМ'.!l~If! otaбop
JV'IIIIIA, б.IIaГОДap!l IUoI 06eпJe
Фраг.м. е н.tn
HTML-Koaa:
Терми ны
*ЧЖУ М U!X'lleCТfl
Пf....,.,. ""'..'..~""".,., 1IpJDOO'
""
• Ra n- - - -:--:-- - -- - ---c--:---c-:------1-::----c:---------1 TeKc 'l' TeKcT ~- -~~~~---:-~-:-:---I TeKcT co1or " ' ~O OffOO');
тексТС,~/"РО> '- __
I--c-;--
_
Волннстый текст
Эффект размытия текста в заданном нап ра влении
- ----'---Фuл.ьтры дл.я uзо6ражеltuй
:-~=-_:_;_:___:_~c:_c_=;_'_- .
< i mg 3 t y1e = "filter :A1pha (Opacity- ' 90' , FinichOpilci ty=' 45', S t y1c = ' 2' ) " src- " имя
_, -;::___ ___ _ Осветление изображения
и:~()r5раже IIИЯ" widt_ h= "ширина изображения "
he i gh t=" высо та
изображения">
Превращевие изображения в монохромное
srс= " имя изображения "
·,,; idth ~ "ширина изображения"
he j gh t =" высота
изОбражеНия">______________ __ __
Получение ,иега т uвного.
изображения
Web-конструнровв.кие на
122
1-
..
HTML
~
Пр имер
| Пример
diгесtiОП =' lЗО ');
< t d>Пример |
< t d>Пример
Пример |
Пример | Пример |
Создается
Судто
Для создания эффекта
те:кстом
т ен и
следует
Shadow
те:кста,
мышью |
применить
фил ь т р
QтС;рас ыв аемой
124
Web-ковст ру ировавие на
--, 1
I I
-1 1
I -1
HTML
Фильтры . примсняем:ые к teKCTII.M'-" Ис'е'~'06",Ре.ОЖ""'"Н"=""см",-__________
Пругой
отбрасываем ой
текстом
вариант
тени
создания
следует
____
, 1~ 2~5
зффек та
применить
фильтр
DropSh a dow | Эф ф ект "си яния " текста дости гается
ПОМОЩЬЮ
филь тра
Glow< /p>
| < p a1 i gn "'center>TeKCT можно сделать помощи фильтра Wave< /td> | Эффект
определенную
сторону
"р азмытия "
можно
волни стым
текста
реализов ать
С
при
в
помощью
Фильтра
Blu r< /b> | ЧТОбы
гор изонтали,
нужно
зеркальн о
испо льзовать
отразить
текст
по
Фильтр
F1ipH |
| < /td> | | < center>
| < center> | < /td> | Заголовок.
Chroma
ВО
вторую
(Color='#OOOOOO')"
hеight=зВО>. Оформите страницу по образцу.
Образец:
по-
(Color='blue') ; font-weight:bold; ячейку
второго
столбца поместите изображение с эффектом прозрачного фона:
style="filter:
с
фиолетовый |
Образец :
Цвет шрифта Тег
FONT
пред оставляет во1можности ynpавлеюrя размером, начерташшм и
IЩeTUM Тi:Ю:ПI.
ДЛЯ нзменеЮIЯ цвета шрифт можно использовать атрибyr
COLOR="Y", где
вместо У надо подстаВНTh наЗВaFше цвета (В кавычках) ИJП{ его шестнадцатеРfIIпюе значею{е . При заданни цвета шесrnaдцатернчным '-шелом можно представIПЪ этот цвет ра'Шоже:нием на три составляющие:
красную Одо
(R), зеленую (G) н
синюю (В), каждая нз которых имеет значеюrе от
FF.
Прпмеры 1 3ПИСП цвета в формате
RGB приведе:ны: во всrmы:вающей
подсказке
,.. _....... _..
... "._.......... _ .....,_ ..,...._,... _ ...,... _." "'..
""" " _."" " " ~." " " '~." '- ,. ,. " . _
~~ _~eT ~ _!
-""" ~ ' I
_Чвет _ ~:
ilJ~a 
