Web-конструирование на HTML

УДК ББК 004 .9 32.97 Б74 Богомолова О. Б. Б74 Web-конструираВDние на НТМL ва . - М. ; БИНОМ . Лаборатория ISBN 978...
Author:  Богомолова О.Б.
28 downloads 1561 Views 24MB Size Report

This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!

Report copyright / DMCA form

DOWNLOAD PDF
< / div>
< img src="pic5 . jpg" width=" 2 50рх" height="2 15 ">< / div> < img src="pic6. jpg" width="2 50рх " height="2 1 5">
< img src="pic 7 .jpg" width="250px" height="215">
Работы учащихся школы


На

главную


Образец:

163

Web - КО UCf руированце на

16' Уровень

mML

3

Создайте в папке Урок

ней web-етраницу

2.html

23

папку с именем в виде цИфры

2.

Создайте в

с ПСПОЛЪЗ0ванием абсолютного ПОЗIЩИОНИРОВQ ­

НИЯ. Оформите страницу по образцу .

HTML'1Co{J: пример 2 . Фо тогалер ея< /titl е> <style type = " te xt /cs $ " > b ody Ifont- family : Verdana ; f ont - size : 20pt) . foto l {p osition : absolute ; top : 2% ; 1eft: 41%} . fo t o2 {p asition : absolute ; t o p: 10% ; 1eft : 55%} . fоtоЗ {position : absolute ; top: 34% ; 1eft : 7 0% } . foto 4 {pa sition: a bsolute; t op : 59% ; 1 eft : 5 5 %} . foto5 {position : absolute ; top : 73% ; 1eft : 37 %} .f о t об (pas i t i on : absolute; t o p : 59% ; 1eft : 20%) . foto7 {posit i on : abso1ute : t op : 3 4%; 1eft : 3%} . foto8 {position : ab so1ute : top: 10 %; 1eft: 20% } . text {p osition : ab so1ute ; t op : 53% : 1 eft : 46%} . link {p osition : a bs o1ute ; top: 115% ; 1eft : 46%: font -f ami1y : Ve rdana ; font - size : 14 pt }

< i mg s rc= " pi c1 . j pg "

width= " 25 0 "

hеight =" ЗЗ З " >


< /di v> < img s rc=" pic4 . jpg " width = " ЗЗЗ " height=" 250 " >
< /di v >
< /div>
ВЫПУСRной


cl as s= " 1ink "> <а href= " index . htm">

I'J1ав ную< / а>< /di v >



Слои. Позиционирование слоев

165

Образец:

Уровень

4

Создайте в папке Урок ней web-страницу

3.html

23

папку с именем в виде цифры

3.

Создайте в

с использование м абсолютного позиционирова ­

ния. Оформи~е страницу по образцу. Образец:

'0 '-. . 4J

~ ~

,J.

;:; ---

. ~ ,О!] -

~:~c,~"" _J_ ,,_ L ____''''

И

..

-

--жr~ '~иl

Устройства ввода и вывода информации

i i

L-_ ~~

__

~_

Web-lC овструирование на

166

HTML

Уроеен.ь

5

Создайте

8 папке Урок 23 папку с именем в виде ЦИфры 4. Создайте в

ней web-страпицу

4.html

с исп ользованием абсолютно го позиционирова·

ния. К фотографиям примените ФИЛЬТР. который и х осветляет (с разной степен ью) ;

Apyr

такИМ способом CQ3Д8Йте эффект н аложе ния изображени й

на друга. Оформите стр аницу по образцу.

HTML- Koд:

Пр имер 4 . Фо т огалерея <s t yle type=" te x t/css" > body {font-family : Verdana ; f ont - size : 20 pt\ .foto l {po sit ion : abso lute; top : 10% ; left : 7%; fi lter : al pha( opacity=1 00») .foto2 {position : abso lute ; top: 20%; l e f t : 20% ; fil ter: alph a(op acit y~8 0) I . fоtоЗ (pos iti on : abs o lute; t op : 30%; lef t : 33% ; filte r : alpha (opac i ty= BO) ) . foto4 (pos it ion: abs olute ; top: 40%; left : 46%; filter:alpha(opacity=70) } .foto 5 {positi on : abs olute : top: 50%: left : 59% ; fi l te r : al ph a (opacity=70») . text {pos iti on : absolute; top : 11% : left : 58% ; font-s ize: 14 pt } .link {pos iti on : a bs olute : t op : 90% : lef t : 41%; font - family : Verdana ; f ont - s ize : 14ptJ <Ьоду>

< /d i у> < /div>
< /div>
< /div>
< c enter>

Гал е рея

фотографий



На

глаеную< / а>




width=" 350 " width=" 350 " width- " 350 " width- " 350 " width=" 350 "

СЛОИ . Позици онирование слоев

-_

Образец:

~

...

--_._.

167

_-- .

..- ,_._. "" '. '*,

· ·А·'

0-· с) iiJ ~ '!:> ' р- ~-'- e IS·& ", ." _

_

,_ ........._

т"

'"

<,--.., ... _ - ,,,...,,_

..... , -

" ' " ш..

~',

_ ш ,'_

~

......

.... ~ _

11~ -"'"

1'·. -'. .' ':::'~- "

Галерея фотографий

На

fM8"YIQ

Контрольные вопросы

1.

Каково назначение тегов (контейнеров)

и <арап>?

Чем они раз ­

ЛИЧaIOТCJI?

2. 3.

ЧТО такое . абсолютное поз иционирование . ? Как оно задаеТCJf?

4.

По какому принципу абсол ютно спозициониров анные области накла­

5. 6.

Что такое . относит ельное позиционирование . ? Как оно задается?

7.

Что такое . статическое п оз иционирование . ? Как оно задается?

8.

Ч то принимается за начало координат при статич ес ком позициониро­

Что принимаетея за начало координат при абсолютном позициониро­ вании? дыв а ются друг на друг а ? Что принимаетея за начало координат при относительном позициони­ ровании?

вании? Чем оно отличается ОТ относительного позиционирования?

9.

Какое ОШlС8ние позиционирования содержит ошибку? Какую? а) б) В)

10.

<span style= " posi ti on : 40PX i" > ... <sраn styl e = " posit ion : 40рх ;"> ... <зра n styl e= " position : 40р х; "> ...

relative ; stat ic ;

top :

top:

absolut e ;

100 рх ;

100рх ;

top :

оно влияет на отображе ние объекта?

le ft:

100 рх;

Какие значения может принимать стилевое сво йство

le f t :

left:

z-index?

Как

ПРИМЕРЫ ПРАКТИЧЕСКИХ РАБОТ УЧАЩИХСЯ

ПРАКТИЧЕСКАЯ РАБОТА

N' 1

"БИОГРАФИИ УЧЕНЫХ.

ИСПОJlъзуемые приемы и технологии:

HTML,

слои, каскадные стиле-

вые таблицы.

. Выполнение задания

1.

Создайте папку с именем Урок

24.

Продумайте структуру сайта. аналогичную показанной на образце.

Образец:

Index.htm

..

, ,

"""~~

L1.htm

_~

L5 . htm

L2. __

"НЧ

"••• ,о.

LЗ.htIn

L4.htm

П рактпческая работа М

2.

1

В папке Урок

1.'

. Биоrpафll.И ученыXt

24

создайте web-страницу

Index.html,

н а которой раз ­

местите пять фотограф ий учен ых, использ уя абсолютпое позициони­ рование слоев.

Выда ющиеся

ученые

<1ink re1= " sty1esheet " href=" sty1e. css " type= " te xt / css " > <sty1e type=" text/css " > . сот р {position : abso1ute ; top : 37% . 1eft : 40%} . inpl {position : abso1ute ; top : 19% ; 1eft : 41% } . inp2 {position : abso1ute ; top : 25% ; 1eft : 24%} . iпрЗ {po siti on : abso1ute ; top : 25% ; 1eft : 58%) . inp4 {po sition : abso1 ut e ; top : 31% ; 1eft : 7%1 . inp5 {po siti on : abso1ute : t op : 31% ; 1eft : 75%}
<а href= " 14 . htm" >
Выдаюшие ся ученые


3.

Создайте в файле

S tyle.css т ребуемую таблиц у стилей для оформления body ( фо новая картинка) , h2 (ТИП шр ифта в ячейке таблицы ), . text (заго ­ ловок ), . tl (стиль рамки для первой ячей ки), . t2 ( с тиль рамки для второй ячейки), . link (стиль для шрифта текста, который является гиперссылкой), . dl ( абсолютное положение таблицы на странице), а: vi s i ted и а: hover (цвет гиперссылок). страниц с биографиями учен ых. Введите в н е й описания стилей

body margin : padding :

20рх; Орх;

url (z fo nt-fami1y : Verdana ; font -size : 20pt :

ВаСkgrоuпd - imаgе ;

а :

{ co1 o r : * 800000 ; I a : visi ted { co1or : 11800000 :

I

. Ьтр)

:

WеЬ. КОИСТРУllрованllе на НТМL

170

a: hove r

{co lor :

-Itd866 00;

)

"2 fo nt - s ize : 1 6р х; fon t-weight : normal ; margin - bottom : О РХ; c o l o r : , #80000 0 ; line -heigh t: 140% ; )

.dl

{

pos i t ion : top: 28% ; 1eft : 1 %;

аЬзоl ute ;

· t e xt l pos i tion : a bso lute ; t op: 1% ; l e ft : 20% ; fon t - s ize: 3 2pt; c ol or :red;

t ex t - a l ign : cente r; l e tter- spaci ng : 12 рх; fil t e r : Glоw(S trеп g th - '

б ',

color"" ' 1t8 000000 ' } ;

)

· t ext po s l tion: a bs olute; t o p: 11% ; 1 e ft : 4 0% ; f o nt- s i z e : 32p t ; color :red ; tex t - a l ign : cente r ; l et te r - s pac i ng : 12рх; f ilt e r : Glow (Strength= ' .li nk роsitiоп :

ab s olute;

top :

94% ; 1 e ft : 44 %; f ont - fa mily : Verda na ; f ont-size : 14pt ;

· t1 border - width : l0px ; bo rder-co lor :red;

bo rder - s tyle : o ut set ; )

. t2 bo rder - width :12px ; bo r der- color : ivory ; bo r der-s tyle : g r oove;

I

б ',

color= I '8000000 ' );

П р8.}(тич ескан работа

N! 1

. Биографии ученых.

Образе ц :

-~

171

I .t.xt.

a:hover

4.

Создайте web -страницы с биографинми ученых, используя п одключа­ емую к инм кас кадную ст илеву ю таблицу

В.",

Style.C88.

Вие т

Виет (Вьет) Франсуа (1540 -1603) - франuуэс~ий ыа т еN атик .

РазраОотал почти всю элементарную алгеОру.

Широко иэвесткы

"ф ОРМУJIN Виета ".

опредеЛ R.юшие зависимость

между ~орнями и коэффициен тами алгебраического уравнения ("те орема Виета " ).

Ввел Оук"енные обозначения ДЛR

коэффициенто" Б ураенениях .



Виет



" '~7,2_ ___

Пифагор

_ _ __ __ _ _ _ _ __ _ __ ___ __

-, WеЬ- КОНСТРУИ РОВI\Rие на

HTML

Пv.Фагор



tуре="tехt/сзз " >

< img src- " pa7 . jpg " wi dLh- " 205" height- " 252 " >

< i>Пифагор (род ил ся о кол о 570 г . , умер окол о 500 ДО Н. Э, ) - древ н егрече с кий фИJЮ С Оф и Мd т еМо'l' ИК, основатель

пифагорейской ШКОЛЫ.

г .

Пре обраЭQвал ма тематику

из собрания формул и рецептов в аБС'i'раКТtfYIO дедуктивную науку .

Ему пр иписu:вают изуч еМ l1е с вой ств ц елых чис ел и

I1Р ОПОРЦИЙ ,

док аэа т е ль с'1'ВО

прлмоугольного

Пифагоре не осталос ь. род ной ост ров Само с Эl-l а к

пр оте ста

возр а сте Кретоне

ПР О ' l' ив

(около

40

б!>LЛ

8

тиран и и

лет)

Египте ,

лрав итеЛII

и ПОI'!Jj,ИЛСЯ

простые и

уже

в

зрел ом

в гречеСI<ОМ ГОрЩtе

ОН M I-IОГО путе:.u.еСТi\овал ~

ВаВ ИnОl-lе,

М
где

состав ные,

ПО странам

поз на l<ОМИJtС Я

С

с тала Ч ;J.СТ ЬЮ е го

П ифаг ор вп ер вые ра зделил числа

нече'l'ные,

документов о

ЧТО Пифагор покину~ свой

в Эгейском море у берегов Мало й АЭИI1 в

во сточн ой м а т ема'I' И КО Й. учения"

Письм е нных

ИзвестнО,

на юге Италии .

востока :

те оремы о СОО'l' НDшении ст о р он

треугольника.

на че 'l'ные и

~вел поня"ги е

фиrурного

числа.



пифа roор Ha гла вн ую



n.... ..

o. -,

,

о..

....,.."

-_О,

""""'/'IC"

",", .пет,. ' ; ~ " "'_'00c>0~ r~ .CIiX>"U'

~~""''''-"

-

-

Практическ ая работа N!!

Фурw

1

.Б иографИИ ученых ,

Фурь е Шарль

(1772 - 1837) -

173 французский социалист.

Подверг критике современный строй

"цивилизации " и

-

разработал проект плана будущего обще ства

"l'армонl'JИ ",

строя

в котором должны реаЛl'Jз ов аться все

сп ос о бности и

таланты ка ждого человека .

нов ог о общест ва Ф ур ье сч итал

Перsичной ячей кой

"фалангу ",

с очетающую

промышленное и сельскохозя йств е нн ое произв одство .

Он

высказывал различные передо вые l'Jдеи о будущем обществе ("труд как

потре бн ость

и

наслаждение ",

" уничтожеНl'Jе

противоположности м ежду уыственнbltoI и фИЗl'Jческим трудом" и др . ) ,

н о счита л ,

соб ств енность , утв ердится ,

s

чт о

НОВОМ о бще стве

кла ссы ,

ПО Фурь е,

еди н ства"

(18 29) .

Коперник

Коп ерник

(1808),

и

(Kopern ik,

в

---

Консидеран,

--

др .

Сореrл iсus) создател ь

Совершил пер е ворот

пр иня того

" Теория ч ет ырех

"Теория всемирного

"Н овый хо з яйственный СОЦl'Jе тарный мир"

(822) ,

пол ьский астро ном, мира .

Сочинения Фурье :

судеб "

последо ва телями Фур ье были В .

пе тращ евцы

Н овое Общес тв о

путем мирной про пага нды

социалистических идей . движенl'JЙ и всеоБЩ)lХ

сохр ан я тся ч ас тная

нет рудовой до ход.

те чени е

поло жении Земли .

в

многих

(1473-1543) -

Николай

гелиоцентрич еской

ес тествозна нии, век он

учен ия

о

том числе Земли)

вокруг

оси и

В ОКРУГ Сол н ца .

небесных

обращением планет

запрешеНI-IОМ ка т ол ической церк овью с

1 616

(1543) , по 1828

-~ К ......... .

..

г

~'

.

----~..,,~

. ,,,,.-.,.-

,,,,

(в

Свое учение изложил в

сочинении " ое обрашения х небеСI-IЫХ сфе р "

-

от

ц ентра льном

Объяснил видимы:е движеl-lИ Я

светил вращени ем Земли

сис те мы

отказ авши с ь

"..."""

_ _ ''''''''"Р'О'""""~~rr........ (а '''''_'''''''-''J""",,,",

;:;""....,.Qo>~ ""·.".".,..'8 ""'_.O(j<W--

__

щ..."(' 500 ~).~-о<' ",~~<16 !6""1~;'"

-

Web-констр уирование на

174 Па сlUlJJЬ

(Blaise

Блэз Паскаль один

из

с амых

П аскал ь умер . ма тема ти к ,

он

воше л в

фИЗик ,

еди ница давле ния о бл асти.

Паскаля,

ис т ории чело в е че ства .

лет ,

НО н ес мотря н а С ТОЛ Ь

философ и писатель .

ОН

Его именем назва ны

и весьма п опулярный с е годня

Р а боты Паскал я о хв ат ыв а ют са мые

я вля ет с я

мат ематич е с к ого ан ализа , вероятностей,

39

историю как выда~йся

( па скаль)

ЯЗЫК програимироваНИR. ра зные

людей в

Ko~дa ему б~о

кор откую жизнь

19 . 06 . 1623 - 19 . 08 . 1662) -

Разса l ,

знаме нитых

HTML

ОД НИМ из

с оздателей

проек тной геоме трии,

гидростати ки

( шир око изв есте н

теории

закон

согласно которому изме нение давления

в

по коя щейс я ЖИДКОСТИ переда е тс я в ос т альные ТО Ч КИ без и змене ний),

-

соз да теле м ме хан ич ес ког о сч етно г о устрой с т ва

" п аС J(алева

кол е с а " ,

как его

ФИЛ ОСО фСЮ1е мысли Пас ка ЛJl вариа нт ах ,

п од

и эд а вались

в

" МЫсли") в

разными

вид е

наз ваН ИJlWИ

кни ги ,

КОТОР УЮ

о ка зыва ли ВЛИ Jl ни е

частно сти ,

называли

( п осле его

на

эти

ча щ е

мн огих

совре w е нни ки .

смерти в ра зных м атер иалы в сего

на в е ликих РУ ССКИХ п и с ателей

И . С.Турген ева ,

Ф . М . Достоевского,

н аз ывают

выд а ющихс я людей

И,

-

л . н . толстого .

_.. -

...

ПРАКТИЧЕСКАЯ РАБОТА ... 2 . московский ЗООПАрк.

Используемые приемы и технологии: таблицы, карта-изображение

НТМL.

каскадные СТИJlевые

(ImageMap).

Выполнение задания

1. Создайте

папку с именем Урок

25.

Продумайте структуру ca.itтa , аналогичную показанной на образце .

Обра зец:

map.jpg MII€kP8rkи u

,,,unapk

elephant.html

-- .

.....__ .-..._-_. _ --------------_._-.......... ---.-----...... _--__.---

----------_.._ . ..... _---...-.-. ___-.... _.__

.

. ,. _ _--... _ _ __ с-~ __ ,~~.~ "'-, -.. .

....... "'

---~-_.~

.........,.-..

-,- _._- , ~ -- - --

elepbant.jpg

bear.jpg

_._--' ... _-----._"--. -_ .. _- --'. ·----00-. ._ ....._N.-. ._______ ""----"'"---_._,,-._-.._-_._-_. --_._ ..._. ---_. _ --_. -_. _ ---_ . __ .. -----_._----

camel.html

--...

............

~.-

- ~._- -_._-

--------.---~-

camel.jpg

_.~--- -- ­ .м,",,

_ _ _ _ ,,_

_ . _---.~...,.. , ----

WеЬ'КОНСТРУ"РОВ8пи е на

176

2.

Загрузите рисунок

map.jpg

в г рафичес к ий редактор

HTML

Microsort Paint.

Наведите курсор мы ши на ТО место и зображени я , КОТОIЮ е будет ЯВ ­ лят ься опорной ТОЧКОЙ той ИЛИ иной а ктивной обла сти созд аваемой

карты - изображения

(ImageMap).

В стр о ке СОСТОЯНИЯ окна

Paint

про ­

чт ите коорд инат ы точ ки.

Решите,

какая

область

( п рям оугольник.

окружность

llЛИ

мно го­

УГОЛЬНИК ) будет являться активн ой область ю , и опред ел ите координаты всех

ее

опорных

точ ек.

Прu.меры:

rect

c1rcle )

<area shape= r e ct

<а сеа

соо rd s= " координаты 8 ер хнего

левого

и

прав ого нижнег о УГЛОЯ " >

(MHor!;r~~bHKK)

]

Зl1i'!.ре = роlу

соо rd S= " координаты вершин центра

и РдlJИУС" >

;q п орлдке их построения" >

ПраК'f ичес кая работа М

3.

2

.М оск овс киЙ З00П ~'~Р~К~'_ __ _ _

_ _ __ ____ __

сс

--" 7 7

Создайте С'Тилеву ю табл ицу 8 отдельном файле с IIме н ем

Style.css . Вве.­ body (фонова,я каРТИНR а), Ь2 (тип ш рифта в ячейк е та блицы ), . text (заголовок), . tl (стиль рамки для первой ячейки) , . t2 (с т ил ь рамки дл я второй ячейки), . link (стиль шрифта те к ста , который явл яется г~шерссылк ой) , . dl ( абсолютное положе ­ ние таблицы на странице), а: visi ted и а: hover (цвет гипе рссылок),

дит е опи с ание сти л ей

4.

Создайте

требуемые

camel .html ,

wеЬ· с траницы

(Index.html,

Ьеаг.Ытl) , испольэ уя стиле в ую табл ицу

elephant.html , Style.css.

06ра:з ц ы

elephant.html : Слон CJюн:.1 -

ClМ:.Ie !Ie из ~IX I-IВЗЕМ·f;ф(

ЖИЮТН:>IX. CeМeI'К:ТOO Слс:н:::вЬ1X (E1~tidae) ОN-O::ИТСЯ к ОТрJЩУ xoOOTI-t![I(, КIlo3Xy м.rJeI«XИТ~. СемЕЙ:тВО ЕКГЮ4ООТ в себя три ElliДЭ CJ0-03 , отн:хqциxся К двум ро д ач.

A~ сл:;н,1,

l0xrxbt"!t4.

• Caзcf.н:a,й ~ CJn-I, • ~ ~f(Иi\ ~ ,

loxOO:nta afrluna loxocb"1ta cyclotls

~UDbI, Е/tt:hБ.

• ~ слон, EI~ mах:lП1Lб o:TaJы-ьe EV!Ды, в тем си:::re МiI"O-fТЫ (fv1ammu!h.JS), ВЬЩJ11>1 в neдI-И<.OObЙ nep..юд, ~ СКОfЮ 10 CX)J ле т НВ3дд .

rJ;eдГЮJ1ёJ"ается, ЧТО C~I ~ В четверТИl.Н::>й ~д .

на Cf1Ot.03 OJ(ОТЯТСЯ из-за их fi.н.e,ii, ИCnOJъзуеМ:II)( в yкpiIlJeI-ИЯ)( и ГЮДeJ1'ilX . Аля гредоТepaцet-ИЯ Г'ЮfК:IГО ун.1ЧТОЖEf+1$l CJD-bl бым 3CI-teCG-b1 В t<pa:нyю I<')-И)' . дее-ю извecn-ю, ЧТО в ~ clВ!l+la)( И джун'"1lЯX I-И<ТО не находил tveнeй ~ сго-юв , воэ-и<ла даже J1€fН-1До3, будто Cf'CН::t1 уходят yt.VpaТb на т.з.-н::-reet-н>Je и ~Ie "cJn-«:Ebи 1<Л<JдЕи.ца". В хх веке охоТГИ<)'

Ажа-/У Хёнтеру УДCIЛOCb YCTa--«:В1ТЬ, куда ~чeзCIOт fиt-и,

-

~, что их сьедаот ~ ди«(бра:оы, CТ~ Тc:t<И'-1 0СРаЭОМ YТ0J1>1Tb ~ГЬН:> Й ГОJЮд (во время cen-la дождei1 CИГI::Н:>Ie JИ3I-I.1 EbМ>ВEIOT из гю"Iы ~Je вещества) . сла-ы

xq:aoo flJIfPY4ЕЮТСЯ,

их I>'UЮrьзyют ка<

тpa-!Cf'1:P"ГНOe ~СТЕЮ 6 TPY~XO~~, Д!1Я геренхки ~ , а

TEtQI(e

в цvpкe ,

Web- кон струиров ание на

178

HTML

bear.html: Медведь

медведи (пат, L.Тsidдe) - зто семей:тэо ~iЮ.ЦИX отряда ~1X . Медведи всеядf-l>l, Xф:ШJ ~T v1 ГI1\EJВaOT, EbcтlX) бегаот I м:ryт СТОЯТЬ И rpoxОДИТЬ Кq::IOТ!QIIe pacttOSf-ИЯ нд ЭдДI-ИX МlaX. IlМeюТ IQJIЮТJ<Иo1 Х80СТ,

~ и густую шерсть, д таоке OTn.1'+1::o!e oбcwt-иe И слух . ОхОТЯТСЯ cбt"lf-!O 8e\.lePC'>1 им нд рассвете . fv\3дведи обыц.ю боятся челoeet
где CНt11lИb~ к J'JOДftoI, - ocoбet-н:I ~, гюлs:p-t;>й медведь и МеДееДЬ rp.13J1t1. в ~e есТecтэet+bfX Вра'"06 гю цти не vмeют.

Верблюд Верблоды (лат. Cйmelus)

род МJ18I(L)ГИfдO.J.1И)( из

-

подотряда м:Jюгенссих. Это ypyrн:.1e жиюrн;,le, хсра.оо

~об!'1еН-Ь1e ДЛЯ жи:;и..1 8 пустьне . Существует два ~ верблодсв : • Бд:<тpt1a-l, w1t1 двугq::б:,й вер6JЮД СС Ьасtrl ёЛ..IS)

• Дроо.\аДер (реже - ~ ), ИIИ ~й щЮJIOl\ СС d'omedcr-iUS) сба еида верБIЮДОО 6bU'1-1 OД~ I боnee 5COJ лет назад. Д(МW-l.1e вербlЮДЫ ИСГЮfbЭyЮТСЯ В n;pвyю Очередь 10( EblQЦ-t,1E! И Yfl)ЯЖН::I1E! ЖИЮТН:>IE!; житеги

AP.'D
nOJ'ly4:JOT ОТ l-I1X toЮro<.o, М>f:O И wepcтъ. ди<ие ГDl'{m1..\И1

~J1OДсе OO~ В nycть не гc:бtl и ~Lf1.1 O"fYl:blТb l Н .М, Грж~. OДНCj
двугq;быx в:рб1lOlla:l В n.пeVк:тщ~ I"'ф<.e EI 5kyТwI . ГbдoБI-t,Ie ~ гl) ~ТИ3.1\»1 вept)J1OДОО В

~ p.3-iee уже гр:::е::>дИJИ:b (ЕЮ eper.-eнa СССР ) и ro
ГПbl.J.JE!t+IaЯ ~ xO~O ЕЮЗДуха, которая

может f"PI'IЮдИТb к l3OCfIдJ1eI-ИO fЙl<И)(.

rv1acc.!!

щ:ххп:го !3ЕрбflOllд

EICфaCТ ~ТСЯ С ле'.

-

soo---eco ~, pef1JOДУКТ\tS-t:iй

2-3 лет . 8ерблоды мayr жить до 20

ПРАКТИЧЕСКАЯ РАБОТА N. 3 "УСТРОЙСТВА ВЫВОДА ИНФОРМАЦИИ ,

Используемые приемы и техн ологии:

HTML,

каскадные стил евы е

таблицы.

Выполнение задания

1.

Создайте папку с именем Урок

26.

Продумайте ст р уктуру саЙТ8. авRЛогичпую ПQКазанной на образце. Образец :

index.html

video.btml

print.html

WеЬ.конструирован ие на

180

HTML

Style.css требуемую табл ицу стилей. В ведите в ней body (фоновая картинк а с инего цвета), Ь2 (ТИП шрифта в ячейке таблицы), . text (заголовок темно-синего цвета), . tl (стил ь рамки ДЛЯ первой яч ейки), . t2 ( стил ь рамк и ДЛЯ второй ячейки) , . link (стиль ДЛЯ шрифта текста, КОТОРЫЙ является гипер­ ссылкой), . dl (абсолют н ое положени е таблицы на ст ранице), а: visi ted и а: hover (цв ет гиперссылок ). 3. Создайт е web -страницы audio.html, print.html и video.html. и с поль­ зуя подкл ючаемую к ним каскадную стилевую таблицу Style.css. 4. Разместите на странице video.html следующие иллюстрации: 2.

Создайте в файле описания

стилей

_t-_~I", cdmon2".b"m",p'---_-t

vidL.bmp

Видеокарта

-

l~on 2.~ b~ m~pc-__

Жuдltо/(рш:mаJlАuчеСI(Uй

М оnumор па ЭЛТ

моnumор

----'-

Раз местите на странице

video.html

l

текст:

Монитор Монитор я вляется универсальным устройством вывода информации и

подключается к видеокарте , котор ая устанавливавтся в слот расширения сис­ тем ной платы в системном блоке,

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

видеоВЮS . Видеоадаmер посылает в ди сплей сигналы управления яркостью лучей и сигналы развертки изображения.

Монитор - устройство дл я визуального отображе ния информации в виде текста, таблиц, рисунков, чертежей и др. В настоящий момент наиболее распространены два типа МОIiИТОРОВ -

работающие на злектронно-лучевой трубке (ЭЛТ) и на жидких кристаллах (ЖК). Они различаются способом отображения информации.

Изображени е

на

экране

мо нитора

электронов , и спускаемых электронной разгоняется

высоким

nOBepxHOCТt, э крана,

электричес ким

на

базе

п ушкой.

напряжением

покрытую люминофором

ЭЛ Т

создается

пучком

Этот луч (пучок электронов) и

падает

(ввществом,

на

внутреннюю

светящимся

под

воздействием пучка электронов ). Система управления п уч ком электронов заставляет его п робегать построчно весь экран (создает растр) , а также реryлирует его интенсивность (и , соответственно, яркость свечени я точек на

слое л юминофора) . Пользователь видит изображение на экране монитора , так

как люминофор излучает световы е лучи в видим ой части спектра . Однако монитор

является

электромагнитного

также

и

источником

излучения

и

статич еского

радиации,

электричес кого

которые

могут

поля ,

оказывать

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

Nt 3- с Устроtl:ства

вывода IlНфоРМDЦИИ ._ _

18 1

небпаГОПРИl<пюе воздействие на здоров ье человека. Еще один минус таких монито ров

-

ИХ громоздкость.

Поперечное

сечение

представляет собой выполнен

иэ

ЖК -панел и

на

тонкопленочных

многослойную структуру.

стекла.

Между

этими

транзисторах

Вн ешний слой обеих сторон

слоями

расположены :

зеркало,

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

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

кристалла ориентированы

так, что поворачивают москость

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

тем же путем выходит наружу : данная точка вы лядитT светлой . Если же на электроды через тонко пленочный транзистор подан электрический сигнал , то под действием электрического поля молекулы жидкого кристалла переориентируются так,

что

поворот

плоскости

поляризации

проходящего

через

них

сеета

не

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

кристалла,

погnощаетея

внутренним

поляризатором,

и

да н ная

точка

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

копичеством

света,

проходящего

через

жидкие

кристаллы ,

и,

соответственно, упра влять яркостью точек.

Как и э традиционных электронно-лучевых трубках, каждый пиксель на ЖК-экране формируется из трех участков

-

красного. зеленого и синего. А

различные оттенки цветов по лучаются бла годаря изменению напряжения на

соответствую щих электродах. ЖК-зкран та кого типа носит название

«TFT ЖК »

и

состоит из цепой сетки таких nиксепе й, где работой каждого цвеТО80ГО участка каждого пиксепя упра вляет отдепьный транзи стор .

5.

Разместите н а стра ни це

r_--'m~a~t"rprintc·~jp~g'-----t-

print,html

следующие иллюстрации:

strprint.bmp

Матричный прultmе~ . р_г-_СстРУйItЫЙ npultme~

____-СП~л.атт~'р<-_____

рrinН . Ьmр

Лuзерnыu прuнтер

Web-:КОIJструирован ие на

182

HTML

Разместите н а странице рriпt . html текст :

Привтер Прuнтеры предназн ачены ДЛЯ вывода н а бума гу числовой, текстовой и графической и нфор ма ци и . П О п ринципу действия принтеры делятся на

•. '-- ----

матричные, струйные и лазерны

-

-

- -

Матричные nрuнтеры

ЭТО принтеры ударного действия. П ечатаю­

-

щая головка матри чного при нтера СОСТОИТ из вертикального столбца ма­

л ен ьки х сте ржней

- « игл » (об ычно их 9 и л и 24). которые ПОД действием маг­

нитного поля « выталкиваются » ИЗ ГОЛО ВКИ И СКВОЗЬ красящую ленту ударяют

по бумаге. Пе ремещаясь , печатающая головка оставл яет на бумаге строку си мволо в .

Недостатки

матричных

принтеро в:

медленная

печать , значительный

ШУ М и н изкое качество печати (примерно соответст вует качеству пишущей

машинки) .

-

-

- -

----

Более ш ироко распространены черно-белые и цветные струйные прuнmеры. В них используется чернильная печатающая головка, котор ая под давле нием выбрасывает чернила из ряда мельчайших отверстий (со­

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

бражения длиной в

600 dpi и более . Это означа ет, что полоска изо­ 1 дюйм формируется из 600 и более точек (чернильных

кап ель ).

-

-

- -

--

_

._ - - -

_ .-

-- - -

Лазерные прuнтеры обесп еч ивают практически бесшумную печать с очень высокой скоростью (до

20

страниц в минуту) , благодаря п ринципу по­

страничной печа ти , когда стран и ца печата ется сразу цели ком. Отличное ,

« типографское» качество печати лазерных принтеров обесп ечивается за сч ет высоко й разрешающей с пособности , которая может достигать

1200 dpi

и более .

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

-

такой же,

-

плоттеры . Пр и н ци п действия современ­

как и

у струйных принтеров .

Од на ко среди

п лоперов су ще ству ют и графопостроители, выче рчивающие текст и раз­ личные векторны е графически е примитив ы при помощи пера , пе ремещае­

маго по координатным ося м Х и У.

ПР81(ти ч ес каи работа М

6.

3

.Устро Й ства вы вода и нформации.

183

Разместите на странице а оШо.Ыml следующие иллюстрации :

Разместите на странице

audio.html

текст:

Колонки и наушники

Для воспроизведения з в у ка используются акустические колонки или наушники , которые п одключаются к выходу звуковой платы .

ПРАКТИ'IЕСКАЯ РАБОТА N. 4 .. ЭЛЕКТРОННЫЙ ТЕСТ ПО ИНФОРМАТИКЕ"

ИСПОJlЪ3уемые приемы и технологии :

HTML,

кас кадны е ст илевые

таблицы. сл ои , фреймовая структура.

Выполнение задания

1.

Создайте п а пк у с именем Урок

27.

П родумай те структ уру сайта, анало гичн у ю по казанной на образце. Гол овна я страница

index.html

должна СО<::ТОЯТЬ из двух фреймов, в

перв ом и з которых ра змещает с я ро м

-

.. меню .

при выб о ре вопр осо в в .ме ню .

-

по теме те с ти ро вания,

а

ВЫВОДИ ТСЯ текст вопр осо в.

Образец:

.--- .

I menu.html 2.

(спи со к ВОПРОС ОВ ), а во вто­

И 3 Н 8Чальн о ВЫВО Д И ТС Я ил люстр а ция

Imodel.html I

Создайте страНИЦ У с и менем

1.html, соответств у ющую

пер вому вопро­

су. Он а д олжна СОС ТОЯТЬ ИЗ двух фреймов . в которы е загр у жаются

страницы с именами

1-1.html, 2-1.html.

Практическая работа N~

4

tЭлектронный тест ПО информатике~

185

Образец:

1.html

Преl~меl. процесс и,;ш нвленш', IJмеющее УНШi3.'JЫtoе ШI-fЯ

n

НРС!IСЩU..'lЯlощсе собой единое целое, lIазывают:

l-l.html

-,

IJp~,l"~Y, "r<>Ц' ••

ПР~i\с,,,"mlkJЩ,"

,..,,, RJI.o""П~. ""."'Щ.' У"И""-'''II<>< И"К и

.060;;

.ц НН .... ц~·,o. , НИ"Ы"""'Т:

1)""""'" ........

1),*,,_ 3) ... '.р

2-1.html

....... , СЩIIIО_'I (."ОЩ>С"'It'l'ЮlIIfМ)."~ "Jl.clЯIUЩ""'." фОРМОЙ "J'<'ilCT~n.ae.",,, ",,,j"-'I'_,,,,щ",, .... оii

..,--

_'''' 1''''111,

в "(>I'WIОЖСIIIIО."

~П ... ""':

01·'- -

._,... ~-',"""~.­

"'

!).'

3.

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

186

Web -конструирование на

HTML

Образец:

2.html

8 ....... 1

п ~дстаВJlеНll е cytЦeCТBe HHЫX С ВО ПСТВ " " Р НЗН8КО В объ екта ,\-lОl1е.'1нроваНIfЯ в выбра нной фо рме НItЗt.I Rаетсн:

1) .'Ofр6еJ'ФОЩИIlе." 1) ф"р.на.1UJа'luе"

..... !

В_

СJlfшесноii Ji. IJ.JВk,' еРИС'rН,,"Оi( объекта 8 бо.тIЫIШНС'fRе случаев !\ШЖС ' f СJI,ЖН 't!I .:

.

I

IiClM" 116w:o;ma, ~JНlЖен""е м:pItи.HII 1) тahlllflllt1.~ttfЩf "apa.нmlpll. 116K~'",a .1) a.l.;op"mn, шнiнCЩIныu. на JfJWЛ't " pV/pa..... Ulp08(fНlfJf J)

-

С)·щ«'lflИrl".... F

I

•

1-2.html

2-2.html

c.'"....cHoil "'I"'"" " p..~ r" ....,,ii обь~...... . м_" c.."I)""""''''

6о.,,,ш,,нст,,~ ~""',,,r.

".,...------.."..:1----. '1--.. ........-."""'---Варианты вопрос ов: Вопрос

1

Вариант

1

Предме т, пр оцесс или .явлени е , имеющее у никальное имя и пред с тав ­ ллющее собой единое целое . называют :

1) моделью 2) объектом 3) алгоритмом

Практцческая работа М

Вариант

4

. ЭлектронныЙ тест по информатике.

187

2

Словом (словосочетанием),

не являющимся формой представления

информационной модели, в предложенном списке:

а) словесное описание б) таблица в) систематизацией г) инсталляция д) схема е) формула ж) алгоритм з) компьютерная программа является

вариант:

а)

1) 2) 3) 4)

В) с) ж)

Вопрос

2

Вариаnт

1

Представление существенных свойств и признаков объекта модели­ рования в выбранной форме называется:

1) 2) 3)

моделированием формализацией систематизацией

Вариант

2

Словесной характеристикой объекта в большинстве случаев может служить:

существенное свойство объекта, выраженное вербально

1) 2) 3)

таблица измерения параметров объекта алгоритм, записанный на языке программирования

Вопрос

3

Вариант

1

Замену реального объекта, процесса, явления его подходящей копи­ ей, реализующей существенные свойства объекта, называют:

1) 2) 3)

моделированием формализацией

систематизацией

. ~,

з ....'.."",у P<'aJ'b"O"O o6ъcкr.., "роцсссса, HW,<,"HIoI <,,'О 1I011х,щищсii '''''''ией, Р"IL'III:<J... щей C)'IЦ<'СТИСllllые свойства

у

и

.

н

_

об'Ь~КТЯ, ия:.... ОяlO'r: 1) ___

1) #<'JUUUIIJ_ii 3J""~lЩIttil

188

WеЬ. КОНСТРУЩЮВ8.flИС на

HTML

2

Вариант

Моделью называют объект, имеющий :

1)

внешн ее сходство с объектом

2) все свойства изучаем ого об'Ъек та 3) существенные свойства объекта

...

-

"'L"'~~'''''_'_~

..

~"""""""~ <)-",-.._и~_

Вопрос

4

Вариаnm

1

Модель п о сравнению с модели руемым объектом содержит:

1) 2) 3)

столько же информации меньше ивформации больше информации

-,

МО,1f:JL.оо r paBtн'KH!a

.......,..........

') .,..,. _ _

....".">d~

r: МШI',"

~I ЫМ o~ .....-oм ""'-............. Т:

••

~)--_

J) '''-'''L~Нф<_''

Вариант

2

Моделью поведения МОЖНО считать:

1)

историю болезни

2) 3)

ИНСТРУКЦИЮ по получ е нию денег в банкомате путевку в санаторий

-,--------'----1)

~.-,,,,,,

..... eJ ...

2) ..."""'Ю''''' .... ~ . З) !I;V1W"'i)' •

_"_,,,Q

Вопрос

М>\,·~ ••"Ю IЧМl

• __

5

Варuаnт

1

О какой паре объектов МОЖНО сказать, ЧТО ОНИ находятся в отноше­

нии ,объект- модель .?

ПраКТl'Iчсская работа N~

1) 2) 3)

о

4

. Электро нныЙ тест по информатике .

космический ап парат автомобиль

..:at>.oii па р~

законы Ньютона и все мирного тяготения

техническое описание автомобиля

-

А.С . Пушкин

-

189

-

Н.Н. Гончарова

объеr;ГОIl мож"о tt.:lН>l П" 'ПО ОШI I!а ХОДIIТС II В

ОТlIОШ~IШП " об·ьrКТ-~10Д~.'I1, " ?

/)

~. ,,>Ш',~сюtit ~ nмр'''n_ шк ." w П.ют""" " ~'J"'''""''

2)

a~",,",";1U>

_""'''~"~ '''''' . , .nu"""u, ,""",,,,,6u.u

,...."'".",""

.1) ..[, с'll),m кu н • ни, Г#" .",I' ''''''

Вариант

2

О какой паре объек тов м ожно сказа ть, что они находятся в отноше­

нии « объект-модел ь . ?

1) 2) 3)

страна болт

ее столица

-

чертеж болта

-

курица

-

цыплята

о "''''''О Й ш. рг объс.-'То .. МОЖ"О ",,-."'>l 1Ъ, ЧТ<> О"',. .. ах(щ.тси n '''''''UlШ"''Ш' " об·••~I<т-"'о;\~.л>"'j

Вопрос

6

Вариант

1

моделыQ организации знаний можно считать:

1) 2) 3)

распи с ание уроков оглавление учебника список литературы

-,

"\10де.1ЬЮ орга .. п~~щltи ~ltаltий МОЖIJО С'ШТ:lТЬ:

1) 1'~ "IUJ C_Ne П"". 6

.'.ltU.m""

1) J"че6""'''' J) " " " ."" .шmqJlt11fJ", ..

190

Web-конструнрование на

Вариант

HTML

2

Родословная собачки Пуфик

представляет собой граф следующего

вида:

1)

взвешенный

2) 3)

ориентированный древовидный

Вопрос

7

Вариаиm

1

Вложенность. подчиненность и наследование являются характерис­ тиками графа следующего вида:

1) 2) 3)

ориентированного древовидного взвешенного

-,

Вложенносп>, ПОД'lннеННОС:rh н нас.;l~ДОIШ I ПlС Я8.1ЯЮ:rСЯ

J:врпкrеРIIСПIINМIII'рафu C-lед)'ющеПJ 6НД":

1) "'"''''''''Р~<Ш<Н ••", Z) dp ••• ..,dn• .."

J) .,••ш .~~ •.'"

Вариант

2

Свойства элементов, связи и количественные характеристики можно прочитать на графе:

1) 2) 3)

древовидном ориентированном взвешенном

СJlОЙС1'ВII э.:'С"'СII" 08, СВ1I111 11 1«J.ТIII'lесп.еииые ХllрllК1'СрИС'I'ИШ! МО'АШО проч ...... :rh на ,'ра+с:

1) dp.... ud""" 2) "l"'<"""'P4_Ho." 3) ..,'''''''''''ом

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

Вопрос

4

. ЭлеltтронвыЙ тест по информати ке.

8

Варuан.m

1

На рисунке:

7

4

изображев граф следующего аида:

1) 2) 3)

взвешенный древовид ный ориентированный

Вариант

2

На рисунк е: г--.

изображен граф следующего вида :

1) ориентиро ванный 2) древовидuый 3) взвешенный

191

nРИЛОЖЕНИЕ СОВЕТЫ ЯКОБА НИЛЬСЕНА ПО ОФОРМЛЕНИЮ WЕВ-СТРАНИЦ Известный специалист и автор книг по web-дизайну Якоб Нильсен в своем интервью ДЛЯ новостного портала

90 %

Silicon

заявил, что оформление

сайтов в Интернете не отвечает стандартам легкости в использова­

нии и интуитивности интерфейса.

В этом интервью Нильсен сообщил, что большинство компаний по­ просту запутывают посетителей ненужным усложнением сайта. а многие воспринимают

сеть лишь как

еще ОДНО

место

ДЛЯ размещения

реклам­

ных объявлений. #< Вольшuнсmво компаний не u.меюm НИКа/саго понятия о Ю.,а6uлumu и дружесmвеltНОМ

unmерфейсе, или о

том, ч, mо та/(ое качественный

web-дuзаUн. Более того, A1/-tОZUе не понимают, для чего вообще может бblть

использована

ПОЛЬ.10ватель течение

не

сеть.

Мои

получает

1 О cefCyna,

исследования

необходимую

покаЗblвают,

uнформацuю

что

на

если

сайте

6

то оп ищет ее в другом месте. Та/(ому нехитрому

требованию nе отвечают

9

из

10

uм.еющихся саЙтов.

Крупные /(омпании нанимают целый noл/( шеЬ-дизайяеров, по за боль­ шими финансовыми вложениями теряется сама цель создания предста6иmельства 6 сети. Чем больше стаnовится компания, те.м хуже ее се­ тевое воплощеnие. В даnпом случ.ае у .мел/(их /(омпаний есть неоспоримое

преимущество, та/( /(ак 6 таких фирмах создатели сайта очень часто напрямую контактируют с клиентом и точно .1нают, что ему nужнД,>.

В хонце советов

по

10

интервью Якоб Нильсен дал читателя м созданию

web-сайта,

практических

отвечающего желаниям

и

запросам

клиентов.

1.

Сделайте ваш сайт проще! Упростите навигацию и уберите ненужную

2.

Сделайте все возможное для увеличения скорости загрузки сайта.

информацию. Чем меньше мусора, тем лучше! Страницы небольшого объем а вместе с быстрыми серверами не дадУТ пользователю заскучать.

3.

Краткость

-

сестра

таланта!

Готовьте

информацию

именно

для

web- сайта, а не для собрания сочинений !

4.

Не используйте местные выражения и длинные

~з аумные ~ фразы.

Не забывайте, ч"I'о Интернет многонационален и не все поймут ваш и словесные изыски.

5.

Установите толховый поисковик и помест ите окно поиска в верхнем

6.

Избегайте применения самых п оследних технологий. Используйте

правом углу web-страницы.

только те программные решения, которые доступны уже

2

года или

более. Все горячие новшества так и норовят «подвесить& компьютер

пользователя!

7.

На главной странице С8Йта поместите информацию

-

о чем, собствен­

но, ваш саЙт. Не заставляйте пользователя самого исхать эти дан­ ные

-

он все равно не будет делать этого.

8.

Если ваш с8йт предлагает услуги электронной хоммерции (интернет­

9.

Думайте о пользователях с плохи м зрением! Убедитесь, что н браузере

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

10.

Ваш сайт готов? Тогда не забывайте регулярно его обновлять, чтобы

в сети всегда была самая свежая информация о вас!

ОГЛАВЛЕНИЕ

Введение

.. ................... . .. . .. . •.. .•..•.. ... .•.. • ...... 3 .. .... 5 Простейшая НТМL-страница . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . , . 8 Основпые определения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Оформление текста. Выравнивание абзацев. Заголовки и ПОД38ГОЛQВКИ.

.. . , .. .. .................. .. ... 14 Оформление текста. Изменение параметров шрифта ... .. ............. 20 Списки. Типы списков ............................• .. .. .. •.. ... 26 Графика ..... .. .. . . . . . . . . . . .... .•.. .... . . . . . . . .. .. • ..• •. .... 31 Внутренние гиперссыли •...... ... .. • ..•...•... • ..•...•... • ..... 37 Управление начертанием текста

~_ . . . . . . . .

... . . . . . . . . . . • . . . . . . . . . . . . . . . . • . . . . . 42

Таблицы (продолжение)

......... .. ................ .. ..... •.. ... 46 ......•..... 54 Гпперссылк п. Карты-изображения (ImageMap) ................•..... 60 Фреймы .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . , .•..... 68 Плавающие фреймы ........... .. ..... .. ...... • ...•.. . ... •. .... 75 Вааимодействие между фреймами ....••.. • • . . •. . . . ..•. ... .. . . .... 8 1 Формуляры .......... .. ... . .........•.. • ... . ... •... ...•..... 90 Формуляры (продолжение) .... .... ..... .. . . ......•...•... •. .... 98 Вставка звука , видео, fla.sh-анимациЙ ......... . ............ • ..... 114 Фильтры. применяемые к текстам и изображениям .. .......• .... .... 121 Каскадные таблицы стилей (CSS). Шрифтовое и абзацное форматирование ............... . ........... , ... . ....•... .. 133 Оформление страницы с таблицами. Специальные символы

Каскадные таблицы стил ей Цвет элемеuта и Фона

(CSS).

Форматироваиие списков.

............ .. ......... ... ... ... .. .... 140

Каскадные таблицы стилей

(CSS).

Форматирование рамок

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . • ..... 145 Каскадные таблицы стилей (CSS). Абзацы. Гиперссылки. Размещение стилевой таблицы ......................• .... .... 153 СЛОИ. Позиционирование слоеВ ... . ••.....•...••••... . •••• • •.•• . 160 и отступов

Прuмеры nрактuческuх работ учащuхся Практическая работа М Практическая работа М Практическая работа;М Практическая работа М

1 2 3 4

. Биографии ученых •

........ ... ...•... . . .... . .УстроЙства вывода ИНформацни • . . . . . . . . .. .ЭлектронныЙ тест по информатике •.... .. . . .МосковскиЙ зоопарк • . . . . . . . . . . . . . .

168 175 179 184

ПРU Аоженue

Советы Якоба Нилъс ена по оформлению web-страниц

................ 192

Recommend Documents

TE AM FL Y HTML & Web Design Tips & Techniques Kris Jamsa Konrad King Andy Anderson McGraw-Hill/Osborne New York Chic...
...
HTML and CSS Web Standards Solutions A Web Standardistas’ Approach Christopher Murphy Nicklas Persson HTML and CSS W...
This Page Intentionally Left Blank Creating Web Pages with HTML By David A. Crowder and Rhonda Crowder IN THIS BOOK ...
ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ ГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ «В...
TE AM FL Y HTML & Web Design Tips & Techniques Kris Jamsa Konrad King Andy Anderson McGraw-Hill/Osborne New York Chic...
250 HTML and Web Design Secrets 250 HTML and Web Design Secrets Molly E. Holzschlag Wiley Publishing, Inc. Publish...
2 3 ББК 32.988.02-18 УДК 004.738.5 К63 К63 Н. Комолова, Е. Яковлева HTML: Самоучитель. 2-е изд. — СПб.: Питер, 20...