Эффективный самоучитель по креативному Web дизайну

,

,

i^ kHTML, XHTML, CSS, JavaScript, PHP, ASP, ActiveX. , ,

HTML XHTML CSS

JavaScript ASP ActiveX

Web-

-

-

, ,

Web-.HTML, XHTML, CSS, JavaScript, PHP, ASP, ActiveX.

, ,

-

HTML& Web Design

Tips & Techniques

Kris JamsaKonrad King

Andy Anderson

McGraw-Hill/OsbomeNew York Chicago San Francisco Lisbon London

Madrid Mexico City Milan New Delhi San Juan Seoul Singapore Sydney Toronto

Web-

HTML, XHTML, CSS,JavaScript, P H P, AS P, ActiveX., ,

-

DiaSoft -

2005

32.973.2 681.3.06(075) 7 8

78 Web-. HTML, XHTML, CSS,JavaScript, PHP, ASP, ActiveX. , , . ./, , - .: , 2005.- 672 .

ISBN 5-93772-128-4

Wfeb-, , - Web-. HTML, XHTML, CSS, JavaScript, PHP, ASP, ActiveX., ,

, . -

,

, Web- . , , -

,

.

300 , , Web. - , HTML, JavaScript CSS-, - Web-, --, Java- ActiveX-, ASP, Web . Web-, - .

, , ,

Wfeb, , Web-.

32.973.2

Original edition copyright 2003 by McGraw-Hill Companies as set forth in copyright notice ofProprietor's edition. All rights reserved.

Russian language edition copyright 2004 by DiaSoft Publishing House. All rights reserved.

McGraw-Hill/Osborne. , .

, , . -

,

. , -

.

, , . -

.

ISBN 5-93772-128-4 (.) . , 2005ISBN 0-07-219394-8 (.) McGraw-Hill/Osborne, 2003

. , 2005 77.99.6.953..438.2.99 04.02.1999

12 1. HTML 19 Web- Web- 21 HTML- 23HTML- 24 HTML- 25 Web- 25 26 HTML ; 28 ; 29 30 Web- ,

Web- 30 34 Web- 35 Web- Web- 38 Web- 42 Web- 44 Web- ; 45 Web- 47 48 size 52 HTML- 53 Web- , 55 57 59 61 HTML- ,63 Web- 64 66 68 , 70 71

Web- 72 Web- 73 Web- ' 76

2. HTML- 79 HTML-, 83 , 89 91 93 95 98 100 101 102 104 Web- 105

GIF- 107 109 110 112 114 115 Web- 116 117

Web- 118 , Web- 120 Web- 121 123 Web- 124 Web- 126

3. HTML- 128 HTML- 130 , 132 135 136 138 -. 140 142 143 ( ) 146 148 . . . 1 5 0 Web- 152 Reset 153 155 Submit 156 Submit Reset 157 l- 159 HTML-, 161 163 Web- onClick 165 Wfeb- 166 167 168 " 169

4. 172 175 176 \Afeb- 180 font-family. 188 font-size 189 ; 192 - 194 196 198 201 , 203

205 207 209 210 " " 212 . 215 217 '. 219 . 222 224 227 Web- 229 231

5. XHTML 234 236 XHTML? 245 H T M L B X H T M L C HTMLTidy 249 Web- 253 Web- XHTML 255 XHTML- 259 XHTML- 261 XHTML- 263 XHTML- 265 XHTML- 268 XHTML- 271 XHTML- 274 XHTML- Web- , 278

6. 281 Web- 282

Web- 283 284 Web- Web- 286 Internet 287 cWeb- 288 Web- 289 Web- 292 294 alt , . 296 title 299 JPEG- 301 GIF. 304 307 PNG-8 PNG-24 308 Web- 310 Web- 311 : 314 -"" lowsrc 315 Web- 318 319 321 GIF- 324 326

"" 328 Web- 331 , ,

333

7. , .- 336 Web- 338 '. 338 HTML (DHTML) 339 GIF- 341 Macromedia Flash 343 Shockwave 345 346 Internet 347 Web- 350 . ' 351 1 354 GIF- 356 GIF- 358 GIF- 360 GIF-

363 Web- Flash- 365 Rash- ; 368 FlaX 371 372 374 Web- 375 SMIL 377

8. JavaScript 381 JavaScript HTML- Web- 383 , JavaScript 384 JavaScript 385 387 JavaScript 388 388 389 JavaScript 390 , 392 JavaScript HTML- Web- 393 , 393 JavaScript 394 395 397 , 398 399 , ". 400 JavaScript 401 JavaScript Web- ; 403 JavaScript 405 JavaScript- 407 JavaScript , 409 .411

414 Web- ( ) 416 417 JavaScript 420 JavaScript 423 Web- JavaScript , 425 cookie- .427 cookie- JavaScript 429 cookie- cookie- 430 cookie- cookie- 432 () 434 on Load 435 JavaScript 436 " " ; 438 440 JavaScript 442

9. Java- ActiveX 444 Java- 446 Java- 448 ActiveX 449 Java- Web-. ; 451 Web- ActiveX 458 Java ActiveX 463 464 467 468 , 469 , 471 474 477 Java- 479 Web- Internet- ActiveX Microsoft Chat 484 ActiveX internet Explorer 487

10. 4 490 PHP 493 494 496 '. 498 500 502 503 HTML- PHP-. 510 514 518, Web- cookie- 520 Web- 522 . 525 PHP- Web- 526 MySQL 528 Web- B6a3yflaHHbixSQLB HTML- 531 533 MySQL KWeb-. 535

U R L - : 5 3 8 Web- 539 IP- Web-, - 541 PHP- 543 Web- 544 546

11. (ASP) 549 , ASP- 552 ASP 553 ASP- Web- 555 ASP 557 ASP- 558 Web- 570 HTTP- cookie- 572 Form 575 QueryString 578 ServerVariables 581 MySQL 583 KWeb- 586 590 SQL HTML- 593 Microsoft Banner AcLRotator 597 Microsoft Banner Ad Rotator 600 " 404: " 604

12. 609 610 ? 610 ? 614 ? 617 CGI-? 617 ? 619 ? 620 , 623 Web- IIS- 624 626 628 629

633 634 636 NTFS 639 643 646 646 Web- 648 650 . 651 Web- ' 653 654

658

(Konrad King) , .

- , -

, PC. -, , ,

,

SQL, Web-, - Microsoft Office, FrontPage PowerPoint. , -

Web-, , -

Visual C+ + , Visual Basic, DataFlex - , SQL. - 1984 , , , .

(Andy Anderson) - , Photoshop, Illustrator , - Web-. Web--, -

, .

. -

, , -

Fortune 500. (Kris Jamsa) 90 -

,

. -

, -

(-), , --

-. 1992 Jamsa Press, - . , Jamsa Press - 70 28 , . -

Jamsa Media Group, - .

.

, , , .

,

.

12

, , Internet - 100 ( Internet http://www.nua.com/surveys). -

Web-, , Web-. , 500 - ( 7% ), Web- , -

, Web. , Web- ,

Web-. , ,

, , ,

. -

, Web-. , -

Web-. , , ,

Web-. , , Web-

, .

Web- - Web-. , Web- - Web-. , , Web- - Web-, HTML-, , - , JavaScript, , .

Web, Web-, , , - . , ,

, , -

, .

, , , -

. , -

Web-, , .

13

, Web-- ,

, . -

, , -

. -

, ,

Web-. : HTML, ,

Web-, , , Web.

HTML- , - Web-, .

(Cascading Style Sheets), Web- .

XHTML HTML, XHTML, - Web-, "-" HTML- XHTML.

,

Web- .

Web- (Active Server Pages).

"" , -

HTTP CGI , , .

-

,

.

-

Web-. .

,

, -

Web-, - , . -

, Web-. , -

. -

14

.

Web ( ) , .

Web- - -

. , ,

,

Web. , -: , -

.

. -

Web-, . ; - , , -

Web-, - Web- .

1. HTML. , , - Web- -, . -

, HTML-, , Web-- Web.

2. HTML-. Web- HTML- -

. Web- , .

, , .

, Web- , - , -

.

3. HTML-. Web- - .

, , ,

. , -

, , , ,

Web. HTML--. , Web- - ( (script)), , , .

4 -

, HTML, - JavaScript , - .

15

4. . Web- - HTML- , . HTML-, , .., Web- - Web- . -, ,

.

(Cascading Style Sheets) Web-. Web- , , - , Web-. ,

, -

, . , Web--, ,

-

.

5. XHTML . , Web- , , Web- , - W3C (World Wide Web Consortium). ,"" XHTML , "" -

. " ", Web-

Web-. , Web- ( XHTML), Web-- , , "" ,

HTML-. , - ( , , - ..) , - .

, HTML Tidy, HTML- Web-, , , - HTML- XHTML-. , ,

, ,

, -

.

6. . Web- . -, , , -

,

, .

, ,

, ,

16

. ,

, -

. ,

, "Web--". , , -

Web. 7. , . -

,

Web- , . ,

Flash-. , , , -

. , ,

( , Web-) Web-.

8. JavaScript. JavaScript , - Web- Web-. Web- JavaScript HTML-, - . JavaScript , , , . ( , -

.) JavaScript - . -

, JavaScript , , "".

, HTML-, - JavaScript. , - JavaScript-. , JavaScript, Web-.

9. Java- ActiveX-. - Java , - ; , Java- - Windows, Linux Macintosh. Java- - -

, . Web "" Java-, - . , Java-- HTML-. ActiveX- , Windows-. - Java-, , ActiveX- , . , -

17

ActiveX-, . 9 , .

10. 4. , () Web-. , , Web-, , , ,

, , cookie-, . 1 000 000 Web .

, PHP-. .

, -

, ,

, PHP-. - ,

Web-. 11. . ,

(Active Server Pages ASP) Web- - " ". (- Web-) -, VBScript, JScript ( JavaScript Microsoft),PerlScript, Python, Rexx . , - , , -

. , -

Web-, , cookie-, , ,

, ..

12. . - 12 - ! , , - .

( ), , , . , ( , ) ( -). , , - ( "" ), , - . , ,

.

, -

, ,

.

,

, .

, -

, -

.

, , -

,

, .

HTML-, - , JavaScript-, PHP- . -

Web-. Web- http://www.diasoft.kiev.ua.

1. v : . . . . -,;..

HTML

web-' Web- Web-I Web-

I (Document Type Definition) Web-

1 Web-

I

I size I HTML-I Web- I I

I I I HTML-I

Web-I I I I '

I Web-

I Web-' Web-

20 1. HTML

h (Hypertext Markup Language), ,

, HTML, , World WideWeb ( ). Web-, HTML - , , , , - -

Web-, , , . , HTML , Web- Web-, Web- . Web- , a HTML (, ), Web-.

HTML , . - Web-, HTML, -, , - Web- Internet. , Web- Web-. Web- (Web browsers) , HTML- Web- , . -

, -

-,

HTML-. Web-,Microsoft Internet Explorer Netscape Navigator, , Web- HTML--.

Web- Web-, Internet Web-. , Web- Web- , Web- - HTML- Web- - .

Web- Web- - (HyperText Transport Protocol HTTP). ,HTTP- Web- , ; HTTP- . Web- - HTTP- ( Web- Web-), . 1.1.

1. , Web- (, h t t p : / /www.NVBizNet.com) , - Web- Internet HTTP- .

2. HTTP- , Web- Web- Web-.

3. Web- Web-, , (, , , ..), - Web-.

1. HTML 21

Web-

DEFAULT.HTM

Web-

. 1.1. Web- Web-

4. Web- Web- HTTP- ( ).

5. HTTP- , - Web- ( HTTP-).

6. Web- Web- , HTML- , Web- Web--, .

Web- Web-

Internet , Microsoft Netscape Web- - . , Web- - , HTML- Web-, , Web-, -, HTML . , , - , .

,

HTML Web- - , ,

HTML. Web-, ,

Internet Explorer

22 1. HTML

Netscape Navigator. HTML-, , ,

Web-. - - HTML, "" - .

HTML , ,

, , -

.

Web- HTML-, . , Web--, Netscape Navigator Internet Explorer, - , Web- . ( (content) , (, - ), Web- - HTML).

, Web- , -. , Web- - . HTML -, ,

, ,

Internet. HTML, W3C (World Wide Web Consortium), (- (tags) (attributes)) HTML, "" Web- , HTML- , ( Notepad() Windows). Web- W3C (www.w3.org) Internet-, HTTP, HTML, XHTML(Extensible Hypertext Markup Language -), XML (Extensible Markup Language ), CSS(Cascading Style Sheets ) ..

, , Web- -, , HTML- - Web--. Internet, - Internet- ( Internet). Web- Web-, URL- (Uniform Resource Locator , Web-) . , . h t t p : / /www.osborne.com. ENTER.

Web-, , Web- HTTP- Web--, . Web-, .. Web-- ,

(, ), -

1. HTML 23

. , ,

View | Source ( | HTML), HTML-, . ( Netscape Navigator, View | Page Source ( | )). Internet Explorer HTML- Web- , NetscapeNavigator HTML- . - HTML- - . ,

HTM L-.

HTML- , Web- , -

HTML- ( ) -. , -

Web-, , Web-. , - , HTML- , -: {container) , - ,

Web- . HTML- ( HTML-)

"" (). - , (/) . ,

, . Web- ; ( ), , Web- - , -

.

, ,

( ) , , . , Web- :

.

, -

, , ,

, , .., , - , . ( , .)

24 1. HTML

HTML- HTML-, Web-

, {section tags). HTML- HTML- :

. HTML--. , - HTML-, - Web-.

. HTML () Web-. - Web- , - . , -

, ,

. HTML- , - , Web--. Web- - ( ), .

. - Web--. Web- , Web-, .

HTML-- :

Web-

1. HTML 25

, - Web-, .

HTML- (. " HTML-

" ), HTML - , (empty tags). - ,

, ,

.

" -

" " -". , HTML- - (), Web- - ,

( - ):

Web- HTML- .

HTML-, - - HTML-. HTML- .htm .html. , ( Windows) HTML-:

IIpHMep HTML-flOKyMeHTa

, ! !

Web- ( - .htm .html) . - Web- Osborne Web-, (-, c:\HTMLExampies), Web-. - TestPage.htm .

26 1. HTML

" " Web-, Web- File://, -, Web-. , Web-- TestPage.htm C:\HTMLExampies, - File://c:/HTMLExamples/TestPage.htm.Web-, , Web-, - . 1.2. , , . - Web-!

HTML- - Microsoft Internet Explorer @

Cjgpene

;] http//html-webdesign/ChapterO1/TestPage.htm

, ! !

J. 1.2. Web-, Internet Explorer

.

. ,

. ( ) - , , .

Web-, - . Web- - , -

,

.

() , . 1.3.

npnMep ,

.

,

1. HTML 2 7

,

. Qgpenc ^

hHp//html-webd6sign/Chepter01/Figure0l-Q3htm

.

,

' j

. 1.3. ,

HTML -, ,

. , -

,

. -

:

. , -, .

. , ,.

. , -, .

HTML- , , ( . 1.4).

OcHOBHbie

] http//btj ( bde si gn/CbapterD yF\gurs 014

"13

. 1.4. HTML-

28 1. HTML

HTML HTML- ,

Web- , - . ,

Web-, , . color () face (), ,

(red ) (Helvetica), - , :

- , - Helvetica.

,

, : , -

(=), ("") (") .

' , Web- (=) . Web- ( HTML- - ), . HTML- , , .

Web- ( ), , , -

. Web- , color face - , , HTML- Web- - . . 1.5 HTML- .

HTML-

1

. 1.5. ,

1. HTML 29

HTML- Web- , - Web- - , , , .

Web- , - .

() Web- . , , Web-, - HTML, , , ,, . - , ( ) CSS-, - 4.

Web-, Web-, , :

. color . ( "red" [],"green" [], "yellow" [], "blue" [] ..) - (, #FFOOOO, #, #FFFFOO, #OOOOFF ..), , -, Web- .

. s i z e ( ) -7 7. , .

. face - (Times New Roman, Helvetica, Arial

, ). , face, ,Web- face .

Web- , , - . , -

, . Web-- Helvetica, - ( ) - , :

npMMep

30 1. HTML

, Helvetica

-

Web- , , ,

( "division" ("")). , - -

Web-. align () HTML-, - , :

.

.

- HTML-. Web- - , -

.

Web- ,

Web- "" Web-

HTML- . "" "" , Web- - ( ), - HTML-, , , . HTML-, ,

HTML- Web-.Web- , -

HTML- ( ), Web- , -. , Web-, - .

1. HTML 31

HTML , ^ . HTML- -- : , -

Web- ( Dreamweaver FrontPage). , , , .

(, , -) , -. -

,

.

Windows Microsoft - Notepad (); Macintosh - SimpleText.

-

, -

. , , -

" " .

Web- ,

, HTML. - HTML-, . - HTML--.

Web- , - HTML, "", - . . 1.6 HTML-, - Microsoft Notepad - .

TDOCTVPE html PUBLIC "-//U3C//DTD XHTML 1. Transitional//EN"'http://WMW.w3.or9/TR/xhtl1n/DiD/xhtinll-trensitionel.dtd">

html xmlns=>-http://uuw.w3.org/1999/xhtiiil">

ripHHep Ueb-cTpaHH4bK/title>

,

.

.

_J

. 1.6. HTML-

32 1. HTML

HTML- File | Save ( | ) Web- . .htm .html ( .txt).

Microsoft Word Corel WordPerfect. - ,

-

. , -

HTML-, , HTML-, - , "" .

HTML, . , -

. ,

, , - , .

, HTML- - , "" .

, : -,

HTML- Web-, , -, HTML, - HTML-.

" ..."

, " ".

- :

. -

, Web- , , - ,

"". HTML- - ,

HTML- " ".

Web- Web- Web-

, ,

PageMaker QuarkXPress, -. Web-, Web- GoLive Adobe, Dreamweaver Macromedia FrontPage Microsoft.

1. HTML 33

Web-, GoLive, - , -

. Web-, HTML- . Web- , Web- , Web-. . 1.7 Web- Macromedia Dreamweaver.

Web- , HTML- . , -

HTML, , , , . , ,

Web- , , .

, . , -

Web- . - HTML-, Web- -. HTML, , , .

Web-, - .

HTML, Web-, ,Dreamweaver GoLive. HTML, Web- : Web- HTML-,

.

Document [Unlitled l ' | DnFile Yiew insert Modify Ie* t Commands tfmdow Uefp.

!"

j[1

* " | :

jj jj I;

;:

5 > @ @ Rii. 1.7. Web-

34 1. HTML

Web- Web- ( HTML-, , , -) , , Web-. Web- , ( ), , HTML- .

, Web- -, href , , . ,

(relative), (absolute) . ,, ciock.jpg, - Foider__B, Foider_B, , Folder_A (CM. . 1.8).

. 1.8. clock.jpg

, ,

, Web- -, . , ciock. jpg - Foider_B ( . 1.8), Web-, - ciock.jpg, Foider_A, ciock.jpg Web- Foider__B/ciock. jpg. , Foider__B, , ,

1. HTML 35

ciock.jpg. src ( source ) :

Web- - , HTML-. , HTML--, , - idx_f oider. src, Foider_A idx__foider.

, , , -

-

Web--. (/), .

, , ciock.jpg D Foider__B, Foider__A. - , , , ,

. -

ciock.jpg :

Web- Web- Web- . , , , -

Web- -

, . -

Web- , Web- . -, , Web- - , ,

, Web-.

Web- , Web-, -

, Web-, Internet Web-. .html-( Web-) File:// Web-. , Web- TestPage.htm , Web-, File://C:/MyWebs/TestPage.htm.

Web- Internet, Web-. , 10, 11 1Web- ,

1. HTML

(, Web- - Web-). - Windows (Windows 95, 98, Me, NT ), Web- (Personal Web Server PWS) . , -

PWS Internet, World Wide Web Web-, . - , Web- Web-, - , -

, , , Active Server Pages ( ).

- Windows 98, ; PWS \Add-Ons\PWS\ Windows 98 CD. - PWS Windows NT 4 Option Pack, - Web- Microsoft, :

1. Internet, - Internet-.

2. Web- URL- http://www.microsoft.com/msdownload/ntoptionpack/askwiz.asp; ENTER.

3. Windows NT 4 Option Pack Option 1. , , Web- Download Step 2, , -

NT 4 Option Pack.4. Download Step 2

. , -

PWS NT NT-, Windows 95. NT NT Workstation, NT-- PWS Internet Information Server (IIS). Next (). Web- Download Step 3.

5. Download Step 3 download.exe, - Web-. Windows, , File Download ( ).

6. File Download Save ThisProgram to Disk ( ) .Windows Save As ( ...).

7. Save As Save In( ...) , -- downfoad.exe, , C:\My Download Files; Save ().

1. HTML 37

8. Windows , - download.exe. . download.exe Windows NT 4 Option Pack.

9. Yes, . , , Download Options ( ).

10. Download Options DownloadOnly ( ) Next. - Language and CPU/Operating System Options ( -/ ).

11. Language and CPU/Operating System /- ; Next. Installation Options ( ).

12. Installation Options Full Installation (- ) Next. Save In Folder ( ).

13. Save In Folder , NT 4 Option Pack (,C:\PWSSetupFiles). Next. Download Location ( ) , NT 4 Option Pack.

14. Download Location (-) ( -). Next. - . Yes, NT 4 Option Pack.

14, NT 4 OptionPack , 13.

, PWS, - . , NT 4Option Pack - Windows 98, - PWS:

1. setup.exe -Windows 98 (x:\Add-Ons\Pws\setup.exe, -) , 13 .

2. Next (). setup.exe - PWS. Accept () . ,

38 1. HTML

, Installation Options ( ) Select Components ( ). ( - , , -

PWS ( - ) Web- .)

3. Installation Options Select Components Next .

3 - PWS . - Windows PWS. , Windows, Window: PWS. -, Web-, Web-- / Internet.

Web- Web- Web- (PWS),

, Web- - Web-. - PWS (Personal Web Manager), - .

PWS Windows ( Windows). , Windows 98, Start | Programs | Microsoft Personal WebServer ( | | Microsoft Personal Web Server) Personal WebManager.

PWS (Main) -, Web- , - . 1.9.

PWS Web- - . , -

Web- Web- PWS. ( Web- , .) - PWS PWS Web-.

1. HTML 39

Eropetties Mew

Mam

Publish

Web Site

, Tour

~~&

Advanced

Help

MainPubfishingV/eb publishing is on. Your home page is available at

'cp | Click Stop lo moke the ilems on your site unavailable

Your home directory UillKU itiiaHflttflJ

( change published directories, dick11Attwar.?ed1'inthelistflnlhe left)

MonitoringVieai Statistics;Requests per Day

17.09.03

Visitors1 1Requests. 12Bytes served: 6594

n 1

- . 1.9. Personal Web Manager

Web- , Web-. , , (, -, PWS) konrad, C:\WebShare\wwwroot. Web-, , TestPage.htm, C:\webshare\wwwroot , ( , ) Web- , http://konrad/TestPage.htm ENTER.

, () Web-, , HTDOCS, Web--, TestPage2.htm. TestPage2.htm c:\WebShare\wwwroot\htdocs\TestPage2.htm. , , -

URL-: ht tp : //konrad/htdocs/TestPage2.htm. ,

, Web- - Internet. Internet , , IP-. , Internet- - IP- ( ), - PWS IP- , ( Web-) Internet.

Internet- IP-, IP-, ipconfig.exe.ipconfig.exe MS-DOS. MS-DOS, Start | Run ( | ...). Windows, , - Run ( ). Run Open (:)

40 1. HTML

command.com. ENTER . MS-DOS ipconfig.exe ENTER. ipconfig IP- (Subnet Mask), . 1.10.

^J | i ha] Ql AJ

. 1.10. ipconfig, IP-

(Windows- ipconfig.exe , Start | Run (...) Open (:) Run winipcfg.exe.) IP- , IP- Web-, Web-- Internet. , IP- 24.234.31.218, , Web- - Internet, :

http://24.234.31.218/TestPage.htmhttp://24.234.31.218/HTDocs/TestPage2.htm

IP- , . , , Internet- - , IP-, IP- - , Internet. - , IP- ( ), Internet. IP- Web-, , Web- IP-, - PWS , Internet.

Internet- - IP-. Internet- - IP-, Internet ISDN, DSL -. IP-, TCP/IP Properties ( TCP/IP) . - :

1. HTML 41

1. Start | Settings ( | ), Control Panel ( -). Windows, , .

2. Network (). Windows Network ().

3. Configuration () Network . ( - Windows NT, TCP/IP - Protocols () Network.) Properties (). Windows - Properties (: TCP/IP).

4. Address (IP-) Specify An IPAddress ( IP- ). IP- , Internet-.

4, Properties, Network. Windows .

Internet PWS ()IP-.

IP-, Internet-, ,, VeriSign (http://www.NetSoi.com). , -, MyWebServer.com, Internet- IP- (Domain NameServer DNS) . , -, Internet Web- - PWS IP- ( ), Web- - , :

http://www.MyWebserver.com/TestPage.htmhttp://www.MyWebserver.com/HTDocs/TestPage2.htm Internet

IP- Web-, Internet- Web- . 510 () Web-, - Internet. (, VeriSign), Web-. Internet- , Web-, -, Web- , - , PWS ( ) .

42 1. HTML

, PWS Windows - Web- , . - Web-, Stop Web- PWS. ( PWS , Web- - -

.) Web-, Start, Stop, Web-.( Web- , Properties Stop Service () Pause Service (); Web-, Properties Start Service (-) Continue Service ()).

Web-

Web, Web-, , ( ). - Web- "" , . 1.11.

Web-

. E* Ed. S*(j*m]Chp"

>

I

PDF . 1

Favorites Xooi

m adobe cmv'ma

j

J

docurr

b'.in'

For~cr ) - HTML- Web-:

flo6po -

...

" Photoshop" -

Web- ...

Web- Web-, . , , -

Web-, . Web-, , . ;

,

Web- . : Web- ,

, Web- Internet Explorer Netscape Navigator. " "

Web- . - ( Internet)

-

. -, " " -

.

,

, Web-. , Web-, -

Web-. , - . Web- , - , .

, -

" " " ".

, W3C Web-, , . "" ("illegal") , - . -

Web- - , , Web--, Web- .

44 1. HTML

Web-

HTML - HTML-, Web-, - Web. HTML-Web-, Source ( HTML) View () . ( Netscape Navigator, View | Page Source( | )). Web-, , HTML- Web- (). ^

(Document lype Definition DID) HTML, Web-. - Web-, HTML- - , Web-. HTML-, h t tp ://vaiidator.w3c.org. HTML- Web- , DTD. , HTML4.01, Web- HTML4.01 .

HTML, Web--, Web- Web-- . , W3C Web-, HTML 4 , HTML- DTD. DTD , . DTD:

1. HTML 45

loose. dtd , , "" HTML 4, - , -

. , DTD strict.dtd , HTML 4. HTML4.01 HTML-, - Web-. , HTML 4.01 Web-; - HTML. -, , HTML . - , frameset.dtd, HTML-, .

Netscape Navigator, Internet Explorer DTD HTML- Web-, - HTML () Web-. , HTML 4.0

1, DTD. W3C: ,

, . -

DTD Web- . ( , - , .)

Web- HTML- , -

HTML-, - Web-. . ,

-

, , HTML- Web-, , - Web-, , .

,

HTML- Web- Web-. , , HTML- , , ,

. HTML- - () , , Web- , - .

, ( HTML--, ) - , .

HTML- ; Web- ,

46 1. HTML

-

. ,

, Web-:

flOKyMeHT, KOMMeHTapnn

One-of-a-Kind Productions, Inc. 316 333 4444 -- >

Web- , ,

, Web- HTML- Web-. , , ( ) HTML- * .

,

'

HTML- -. , -

, Web- -, :

.

function Displaylt()

alert(" JavaScript- !")return;

. . . Web-, . . .

, JavaScript- , Web-, , JavaScript- -. , , , ,

HTML- , - /* */.

1. HTML . 47

Web- Web- Web- -

, ,

HTML- Web-. , ,

, " " .

, . , -

,

: , .

,

. -

, .

, ( -) , (serif) , .(sans serif). , Helvetica Times New Roman -, a Comic Sans Arial - , :

, , Times New Roman, -

-

.

, / Comic Sans, - .

, -

:

. . . Web-,

face Web-, Web- . , Helvetica , :

3TOT Helvetica

HTML- Web-, .

48 1. HTML

, face Web- ( Helvetica). Web- , -

(). - , , Web- - .

,

Web-. , Internet Explorer 5, Tools () Internet Options ( -). Fonts (). Internet Explorer, , Fonts (), - , Web- ( HTML-) . , , Web- , , Web-- .

, face , . , , -

Helvetica. - Helvetica, Georgia. , - ,

:

Helvetica. Helvetica, Georgia.

face Web- () Helvetica, Helvetica , Georgia. , -

, Web- . ,

,

, . ,

, -

, Web- .

Web- , , , .

, HTML- (), :

1. HTML 49

npnMep TeKCTa

HTML- . -, HTML-, Web- - Enter .

Web- , - HTML- Web- ENTER - . Web- , -

HTML- Web-. . 1.12 , Web- HTML .

/ 2 > ip

_

- j g ] httpy/html-webdesign/ChepterCn/FigureGI-i 2.htm , ,

. , .

. 1.12. Web-

; : -

HTML - () . , Web- - , ,

, , ., -

, - . , HTML- Web- ,

(), Web- - .

, -. HTML- Web-, Web- - , -

. , Web- -

, . -

50 1. HTML

, ; - ,

.

HTML- , , Web- (.. 1.13):

IlpMMep TeKCTa

HTML- .

HTML- .

, .

( ) , - . ,

, -

. IWeb- ( )

. , Web-- Web-.

, Web- , - Web-.

- J J jtl J ->

HTML- .

HTML- .

,

.

. 1.13. Web-

1. HTML 51

, ,

, , -

. () -, . ,

,

.

, , -

:

IIpHMep cTpoKn

Snbsp;

, . ,

,

.ABpaaM

, "-

" "", Web- - . ,

, , -

, . 1.14. (

), , -

. & ] http//Mml-webdesign/Chapter01/Figure01-Rhtm {

, .

,

,

.

J. 1.14.

1. HTML

size Web- Web- -

.

, , -

, 1214 , - .

Web- , -

( ... ...). "". - .

"h", .

; >1 , -

.

HTML- Web-, - -

.

, -

, :

1 2 3 4 5 6

HTML- - size , 1 7. size, , , -

.

size, (). HTML- size, :

2

3

4 5 6 7

1. HTML . 5 3

, size - ; , , Web- .

,

Web-. 1024x768 - , ""

, 800x600 . , -

. Macintosh, , , ,

Intel-. HTML 4 W3C

(). Web-, - HTML, . CSS-, 4 .

HTML- Web-

, , . -

, color , Web-, .

, , .

> - , . color , .

, - .

, color HTML- Web- - :

.

color . , - .

Web- , -

Web- , - :

54 1. HTML

.

-BcTaBbTe color . , - .

color . , , ,

(red), (green), (blue) .. - . ,

, , #FFOOOO. ,

, .

, ,

Web- . , #. - -

: , ,

. , (#) - "00" , "00" "00" . , , -

, .

#FFFFFF. , -

, . -

,

. Macintosh, Windows-- , -

. ,

Web- ; -, . -

, -

.

, 256 -, ( ), - . , -

( -). Windows Macintosh (40 ),

1. HTML 55

216 (256 40 = 216), Web- Windows, Macintosh.

Web- , - Macintosh, Windows- . , -

, (). , , -

, -

, http://www.htmlhelp.com/cgi-bin/c o l o r . c g i .

-

, . -

, -

Web-, . ,

. 4 , - CSS-.

Web- Web-, -, -

. -

,

. , -

Web- , , . , , -

, , -

, . , ,

,

Epson 1520. - , .

, , -

Web-, - . , Web- -- ,

Arial, , Helvetica. , , , , -

.

,

- , , , -

. , ,

,

.

56 1. HTML

, , ,

Skia. Web- , - Skia , , -

. , ( ) , ( - Photoshop). Web- "-" , Web- - , , .

, , -

, ,

. 1.15.

I -

J

. 1.15. , , Web-

| Web- ( , ). src, Web- . ,

. , src ,

. , -

photo,jpg, images Web-.

HTML- , -

(), Web-, . HTML-, -, house.jpg:

flOMa

1. HTML 57

HTML-, :

alt. alt , - , , -

.

( -, ) .

height width. width () height ()

. height width ,

Web-, . height width, - , ,

.

border. border () ( ) ,

Web- . ,

. ,

. ,

border (0).

, Web- 6 7.

R - Web-. Web- , Web-, . , Web-- . , ,

, , , .

Web- , - , -

Web-. Web-- HTML- , . ,

.

, , ,

, . HTML- , ,

58 1. HTML

( ), . ,Web- HTML- . ,

.

-

. , - , :

1. HTML 59

Web- , Web-. , ,

, . - () Web-- , -

, Web-, . 1.17:| | 4 0 4 ;tosoft Internet Explore:

|]

. 0 ^

hfip//html-webdesign/Chepter01/FigureO1-17htm

-

. 1.17. Web-

Web-

IIpMMep ' s

60 1. HTML

. , Web- (, ) , ,

(, ) , - .

, -

() , . { .) href - , , -

. , " , -

." HTML- "" ; :

1. HTML

.

href Web- (corvette.zip) cars Web- www.home.com.

, "-

" Web- , Web- - . ,

, ,

, , -

.

, Web - ,

() Web-. Web--, , , -

, .

, Web- Web- , - , , -

() HTML- Web--. HTML-, Web- . "" , ,

. ( HTML -, -

, , .) , Web- -, Microsoft Word.

1

, , , Web-- . ,

, -

(), ( ""):

- , , ,

, . Web- "",

-

. -

62 1. HTML

(), "", Web-- .

, -

( ), , . , -

HTML-, - "" "" .

(), Web- - :

. , . . -

, , Courier, - .

HTML- . . -

. , -

.

. - .

. , .

. , .

. , - .

. , .

. . .

. .

-

. -

() (), - "":

- Web-.

, ( - W3C) CSS-.

1. HTML 63

HTML- Web- : -

HTML- .Web- (A-Z, a-z) (0-9), - HTML-. , ,

Web- Web-. , HTML - , Web- - ,

, .

, Web- (), , , , , - . Web-- , -

, . ,

, ASCII-- . Web- , , ( ASCII-) HTML-Web-.

, 169. Web- , ASCII- 169, - (&) "" (#), - (;). , Web- - Web- , 9; HTML-Web-. : .

, &;. -

HTML-. ( ASCII-, ) , . . 1.18 - Web- HTML-:

npKMep npaB

9; , .

64 1. HTML

h t t p : / / w w w . h t m l h e l p . c o m / r e f e r e n c e / c h a r s e t / .

-3 ''& JJ -J am-:: &flpec]gjht1p//htmbvebde5ign/CtiBpter01/Figij

1. HTML 65

Treat each individual ... However, it is just as ... You can accomplish this ...

1001 Photoshop Tips: Andy Anderson 2001-Web Design Samp; HTML: Konrad King, Andy Anderson

. jey hnpy/html-webdesign/Chepter0t/Figure0H9 htn

Using ImageReady to Slice an ImageWhen you slice an image ...

Slicing an image has ...

Treat each individual...

However, it is just as ...

You can accomplish this ...

1001 Photoshop Tips: Andy Anderson 2001Web Design & HTML: Konrad King, Andy Anderson

; j

_J. 1.19. Web-,

, - , . -

- , -

:

1001 Photoshop Tips: Andy Anderson 2001 Web Design & HTML: %onrad_ King, Andy Anderson

-

:

align. align Web- , .

noshade. noshade Web- - .

66 1. HTML

size. size ( ) - .

width. width . , -

. , -

50% (width=M50%"), , .

-

, width align

( Web-). , .

.

:

\

|

HTML - - Web-. Web- ( Web-) , . ( - Web- "" - ,

, .) , Web- , Web- -

.

-

/, CSS HTML-. , Web- "" (-

1. HTML 67

), Web-. -: -

Web-. , - , .

blockquote , . -

, -

.

, HTML- Web- , (. . 1.20):

npnMep

TeKCT . ,

"", .

; , , .TeKCT . ,

"", .

. .. "

-

jg] http.//htmUvebdestgr

68 1. HTML

-

Web-. ,

.

.

(ordered) Web- - , (unordered) , .

, , -

, .

HTML- , . 1.21.

!

1. HTML 69

,

() . Web- -

(1, 2, 3, 4, ...), 1. - , -

type, : .

( ). . . . .

70 1. HTML

Web- - (). , - ,

type, : . (

). .MapKnpyeT -

.

. ( ).

, -

. -

; , (nested list). - ,

, . 1.22.

51^/1 . ^1

i&flpecjiES] http://hlml^vebdesign/ChepterO1/FigureO1-22.htm | ;

J

1. - .2. "".3. :

. . ,

. ,

. "".

4. !

. 1.22. Web- '

3 , " ".

, .

HTML- :

cnnCKa

1. HTML

- . "" . : '

. . "".

!

,

(). , - () -

(). ( - () ( , ).)

, -

, -

. -

() (). - , -

() , . , -

,

( ).

, -

, . ,

, HTML . , -

{definition list) , - . Web- , . 1.23.

, -

-

() . - :

. -, . ( -

72 1. HTML

. 1.23. ,

HTML HTML-

HTML- - !, Web- . HTML- Macintosh-, Windows- -.

title title ( ) Web- Web-. Web- Web-.

J

-

,

.).

Web- , -

(). , HTML- , - :

IIpKMep

OcHOBbi HTML

BasoBbie HTML-flecKpHnTopbK/bXdt>HTML- ,

Web- . HTML- Macintosh-, Windows- -.

3Ha4eHne title flecKpnnTOp title ( )

Web- Web-. Web- Web-.

Web-

. , , -

,

1. HTML 73

() HTML-Web-. , , . , Web- HTML- -

. , Web- - , ,

HTML- - (. . 1.24).

(), HTML-. -

() Web- - ,

Web-. ( , -

, , -

.)

, . , . 1.25 - Web- .

,

-

. , -

ActiveX Java-. - () - , (-) HTML- CSS-.

Web-HTML- ,

Web-. Web- URL-, Web- . Web- - Web- , - . -

Web-. , .

74 1. HTML

1 & j ^ ] hripj/

.3:-H-webd

liu J 45ign/Chopt6

J-JSrOl/Figu

j ' . ' "'e01-;4Hm

-

HTML-, Web- . Web- , .

npMHep , 6payspoH

\^ .

HTML-.

- ^

. 1.25. HTML- Web-

1. HTML 75

, -

Web-. Web- - .

, .

( ), - . ,

, , -

, .

, -

-

- .

,

Web-., , Web- , . 1.26.

Qy,a

} http://htmhwebdesign/ChapterO1/Ftgure01-26 him"3

, ,

. 1.26. ,

'

, 100- Web- .

, Web- , " " .

Web- , . 1.26:

flo6po TOBapoB

76 1. HTML

,

HTML- , . Web- Web- Web- ,

* ().

Web- - n_nav.html n__main.html ( - ) . Web- n_nav.html , 100 , n__main.html , 400 . HTML-, Web-, , , Web- . -

Web- .

Web- Web-

. Web-, , , -

Web- , . , Web- - Web- .

Web- , -. -, Web-, - . ( , .) -, , Web- , Web-, - .

, , , -

n_menu.html. , Web-- , opendoc.html. ,

HTML-, (n_menu.html opendoc.html) :

IIpHMep

1. HTML 77

, HTML-, , - () - (), - Web- . , "" "" . -

( - ) Web- URL- Web--, .

Web- , 80, 400 . , Web- , ( - , ), . (, , : .",,"; , 18=",,,", ..)

src Web- Web-, , -

. Web- - njnenu.html ( menu) opendoc.htm ( content), . 1.27.

] hnp//html-webdesign/Chapter0l/FigureG1-27 htm

nocajfey

. 1.27. , HTML-

78 , 1. HTML

, target Web-, Web-, href . , - Web- aboutus.html content, - " ":

0

, "

", Web- (opendoc.html ), - (content), aboutus.html ( href ). target, , , , Wfeb-, -. , HTML-

2HTML-

. . ,

, HTML ( HTML 4.01) , caption, -, .

, ,

/ () , , . , -

, -

:

< t a b l e border="l"> ,

HTML-flecKpnnTopOnncaHne

,

( ) / (), , ,

(). , HTML- - / () , Web- :

< t a b l e border="l">3aronOBKM, CTpoi3aronoBOK

a4pdica 1,

CTpOKa, 1,

CTpOKa 2,CTpoKa 2,

K/th>

/tr>K/td>

2K/td>

2/1>

g 88864=866 ?6

3981 1 88 16 66

2. HTML-

. 2.7 , - , , -

, -

:' f l T ' ' i i :' " V * If 'fiii'i lifiiiiit: i 11 ffil f 'ti'rtV TWIT 11 "i ' i 7' M

1 1 2 1, 1, 1 -:2 2, ' 2,

I ^ 1, 1 1,: 2 ' 2, 1 2, 2

. 2.7. () ()

, ,

. HTML- - "" -

Web-, . -, "" . -,

.

, -

border. , , "" ( , , 0 ) - , "",

:

, Web- . -

-

. , Web- "" .

, -

2. HTML- 89

.

,

.

,

/ () (). , width () height () . - ceiispan owspan, , -

, , . 2.8.

dt View Fsvorte* loots

' Stop' Refresh Seaich

. 1, !

;|X 1

; [ 3, 1

$&

* .64

1, 3 ! 1, 4| 1, 2

2. 2

3 , 2

2, 3 ; 2, 4

h- 3, 3 | 3. 4| ' "'""""' \

4 1 4, 2L 4. 3 | 4, 4^1

. 2.8. , ,

,

/ , . 2.9. HTML-- (coispan (- ) rowspan ( )), / / .

, , , ,

. 2.9, rowspan - . , , :

="2">CTpoKa 1 2, K/td>

,

rowspan "3" ..

90 2. HTML-

Slop Rafre^t

C n i r f e x l

1 & 2, 1

3, 1

^ 4, 1

&

:

" 1, 2

7, 2

3, 1

4, 2 3

j 3 | CiMfc4

| 1 &. 2. 3 & 4

^ 3, 3 3, 4

1|. 4, 4

. 2.9. ,

, , rowspan "2", - () , "" . ,

2 - (), 1 :

cTpoKa 1 2 , /1

CTpoKa 1, 2

2, 3CTpoKa 3, K/td>

CTpoKa 2, 3

, , -

, , , . 2.9, - coispan. , , :

CTpoKa 4, 2 3

, coispan "3" .. : coispan "2", - () - , ( -) . , 2 , -

(), - :

2. HTML-

CTpoKa

crpoKaCTpoKa

1,1,1,

;cTpoKa

c cc

2,3,3,3,

K/td>232, 1 22K/td>23

, , , ,

, , , -

. 2.9, coispan, rowspan. , ., :

92 2. HTML-

, HTML (frame), (rules). bordercoior ( ) / border , . -, border="0" frame="void" ( ) ruies="none" ( ) , , .

(CSS) 4 , Web- - .

CSS-, ( ) .

, 1 - , border :

, -

, border . , 10 , border "11; . 2.11.

10

\ 1 ! 2 i 3

. : 1, 1 | 1, 2 [ 1, 3 1 2, 1 ' 2, 2 2, 3 |

. 2.11.

border. -, , border, - -

. ,

, Web- ,

border , . -, Web- , , -

( ) . - Web- -, -. Web- ,

. -

2. HTML- . 93

-, -

- . -

, -

.

, (border) - . -

, ( ) . , bordercoior. -, Web- - 10 -

, bordercoior - :

, bordercoior Web-. bordercoior #8", , Netscape Navigator - - -. Internet Explorer :

bordercoioriight ( ) bordercoiordark ( - ). bordercoior, InternetExplorer , -. ( 4, CSS, - CSS-, ( ) .)

, Internet Explorer - , bordercoior - ( Web- - -/-), bordercoioriight bordercoiordark. , Internet Explorer bordercoior , bordercoioriight bordercoiordark, -, -:

bordercolorlight bordercolordark Internet Explorer - ,

-.

94 2.

^ bordercolor, bordercolorlight bordercolordark, - Internet Explorer, Netscape Navigator. Internet Explorer bordercolor bordercolorlight bordercolordark. Netscape Navigator, , bordercolorlight bordercolordark - bordercolor.

Internet Explorer 5 Netscape Navigator 6.1 , -

style. , style , , (top) (left) --, (bottom) (right) - :

style ,

border-color style .

, border-color :

, style - , style , . ,

, ,

style :

, , -

, , border-color :

, border-color -

. ,

Internet Explorer, Netscape Navigator - ,

. , border-color ,

, -

.

2. HTML- 95

, bordercoior , - -

, bordercoior. , , Web- - - -

-

bordercoior . , Web- , :

Internet Explorer, , - , -

, -:

Web- b o r d e r c o i o r < t a b l e > , - b o r d e r c o i o r , b o r d e r c o l o r l i g h t b o r d e r c o l o r d a r k < t d > . ,

Web- (), .

""

, ( border) HTML-. ( Web-, , , .., HTML-, HTML-.) , , , ,

,

. .

2.12, , . . -

, , Web- -

.

, Web-, - .

() (cells). Web--; , . , ( / HTML- () ), , .

96 2. HTML-

Fjvales look tjdp

Backj

Stop Rshesh Ho Soacch Fevaie Meter

; $ My Compute

. 2.12. ,

1 ^ , bgcolor , Web- "" . ,

bgcolor, "#OOOOFF", Web- :

, background, Web- , ,

"" . , background Web- "" picture.gif, images Web-:

, , ,

. , ( ), , Web-- ,

bgcolor . , #8", bgcolor , Web- - :

2. HTML- 97

, background,Web- , , "" . , background Web- "" picture.gif, images Web-:

HTML , , .

, , "" , -

, . , -

( , ), . , background, bgcolor, Web- , , . -

, "" .

, Web--, , -

Web-. , background, bgcolor, Web-- , ,

Web-. , "" Web-. , , - - , ,

Web-, "" . Web- Web-- .

background - , HTML background , . , bgcolor HTML 4.01 - XHTML 1.0. HTML ( XHTML) CSS background-image. , , Web- -, style, :

, , -

background-image style :

9 8 2. HTML-

CSS background-color / . , , background-color :

2. HTML- 99

RGB- , , http://www.htmlhelp.com/cgi-bin/color.cgi -

. RGB-, - ,

(Custom colors) . , Microsoft Office, - Font Color ( ) - Microsoft PowerPoint Microsoft Word. Colors ( ...) . Office, , Colors (), . 2.13.

:

U: 3 " ' ~ ] : ['""-^^: J250 -^-j &; . ]253 - ^ j

Colors () Microsoft Wo. 2.13.

.

:'~

-- 20 -*'2- 174.00.

...

///^

. 2.18.

HTML- , 1, 1 (- ) 1, 2 ( ) 2, - 1. ( 3, 1 2 , .)

2. HTML-

src="image_l. jpg"X/td>

2. HTML- 111

. 2.19. Web-

-,

.

, href , -. - . -, - home_i.jpg Web-, (page_i.htm):

, Web- -, .

href ( src ) - Web-, . 2.19:

-

Web- , - , -

. , "

2.19 Web- , - . 2.20.

112 2. HTML-

Homes & Apartments-j Homes i:>;

Maxwell Realty CompanyLocation: PhiUdtlphla, PATypes Condo

d Contectbout thi property.

rpo * w i AM efc

. 2.20.

-

, ,

. , , -

home__i.jpg, home__is.jpg. , -

.

Web- . ,

(, HTML -, ) . ,

, . 2.21.

K/l i> 2 3

2. HTML-1

() , - (. . 2.21).

1 2 3

. 2.21.

,

- .

, , -

. ,

, , .

-

, , , . 2.22.

. 2.22.

, , , ,

-

.

:

3neMeHT K/tdX/tr> ,

3neMeHT 2

3neMeHT 3

, -

, , , -

. , ,

,

.

114 2. HTML-

Web- , -

. -

, .

.

{sidebar) . ,

Web-. Web-. .

, . 2.23:

rnaBHaa06pa3ubi0 HacKoHTaKT

href="purchase.htm">KynnTb

,

.

. -

: - Web- ( ) .

fe

.Beck' Stop Reftesh Home Search FevotSes . Hiaoij1

~3

. 2.23. ,

2. HTML-

,

, -

. , - -

(), , () :

, , , -

():

src Web- - , .

, Web- image.jpg.

-

, (). , - ( ) :

HTML- , Web- - image.jpg. - , Web- , href . , Web- info.htm, .

2. HTML-

Web-

Web- , Web- - Web- , - .

. , Web- ( Web-) , - Web- - ,

.

, , Web-, - , -

Web-. Web-, -

.

(nesting). - , ,

Web-. ,

? :

,

, 30. , Web- Web-, - 30 , . 2.24.

2. HTML- 1173D \*,\?1!2 WVHIML>feb_DCTign\?be t*4mase.\1-2 hi

118 2. HTML-

,

home.jpg, Web- Web- home.htm :

-

( ) Web- - , -

.

, .

2.25:

2. HTML-

Web- - ,

. -

. , ,

, , ,

.

, , Web- -, - -

. , ,

, , -

big_sky.jpg. -

JPEG, -

.

JPEG , .

, ,

JPEG-. , -

,

. ,

, JPEG-, , , JPEG- (. . 2.26). -

JPEG- , -- JPEG-. , Web- , -

, -

. : () - (), ( ) , .

Web-, -, -

.

- ,

, Adobe ImageReady 3.0. , - , -

,

.

120 2. HTML-

= 36.2

1 = 4.2

3 = 8.1

2 = 4.2

4 = 8.2

= 24.7

. 2.26. 32

, Web-

Web-- , , Web-, - . , -

. -

,

.

, .

, ,

.

image.jpg , - , :

height width , - ,

. Web- ,

. -

2. HTML-

, Web- , ,

.

, -

, ,

, -

.

, -

h e i g h t w i d t h , - . / - , Web- ( ) , h e i g h t w i d t h . - .

Web-

Web- , - Web-. Web- . , -

( ) ,

,

, .

Web- Web- ,

. Web- , Web- , (frameset), - Web-. Web-, , . 2.27, .

, , .

, .

.

Web-, . -, -

Web-, -, Web- Web- , Web--.

122 2. HTML-

Stop fietfech Home Seaich Favorites Huttty ; Mai

, ., _ _ I ^j^: . . , - ! ' : ' : . '

. i.'. . , . . I

. 2.27. Web-,

-

, ,

Web-. , , Web- -, . 2.28.

3T0

3Ta 1

MaccHB

B Web-CTpaHnuK

2. HTML- 123

8 dft : Favorites Tools

JStop Refresh

:;/,

Jn! My Compute!

. 2.28. Web-

( , ), , - - Web-.

, Web-- ,

,

, .

, -

, , Web-. , -

,

, Web- , - .

, , -

, , -

. Web- . ""

, , - -

, , . 2.29.

124 2. HTML-

' " ' ' - " - . ' - .

Fife dl View Favorite X Help

JStop Seach . Favorites:

!

.

,

Web- ,

,

- .

m

. 2.29. , Web-

Web-, . 2.22:

2, HTML- 1 2 5

, , Web-, - , , -

, . -

, , , . 2.30. 1 , 2 -

, 3 , / ; 4 / . Web-, , , border - Web-.

. 2.30 :

. ,

Riven Productions433 Spaeder StreetHollywood, CA 23435

border (border=M0"), -, . -

border , .

Riven Productions

433 Syacdei Street

Hollywood, CA 234*5

2.30.

126 2. HTML-

Web- , Microsoft Word,

. , HTML Web-.

-

, .

, , Web-, , - Web-, " (.. 2.31).

, . 2.31, - , .

,

. , ,

.

, . 2.31 (- , ):

CH>fla

CKwa

flOKyMeHrra

2. HTML- 127

,

. ,

. , ,

, GIF- width - .

15-

i fe Edit FavoiW :

Hob "

": ^ ^ )

{ Back " Stopoeiween columns onext.

Unfortunately, HTML does not giveyou the same control over theplacement of tert on a Web page thatMicrosoft Word exerts over themargui and gutter space in a wordprocessing document However, byplacing text content in a table, youcan simulate the outside margin andgutter control available in a wordprocessor.

Say, for example, you want to create aWeb page that when displayed by aWeb browser resembles a two-column word processor documentwith appropriate gutter spacingbetween the columns of text, as

. shown in Figure 26 1

ew\ ,

ii 4 Refresh Home ; Search Favaiitesbetween the twc; columns of text.Finally, the second and fourthcolumns hold the document text Thefollowing code will generate the tabledisplayed in Figure 26_1. (Notice thatthe table actually contains five cells.)

Unfortunately, HTML does not giveyou the same control over theplacement of text on a Web page thatMicrosoft Word exerts over themargin and gutter space in a wordprocessing document However, byplacing text content in a table, youcan simulate the outside margin andgutter control available in a wordprocessor

/^\~~A"

;;u*H|J

History i

^ MyCoiT^uter

-

20-

. 2.31.

I HTML-I ,

'

I '

I I

( )I I

I Web-

I Reset

I Submit Submit Reset

I I

CGI-I

HTML-'

Web- onClick

I Web- I

3. HTML- 129

Web- Internet, Web-

. , (, - ) Web. Web- , , - , Web- , , ,

Web-. , - , -

, Hotmail, E*Trade, eBay,Yahoo .. , , . 3.1 - http://www.hotmaii.com.

,

.

, , ,

, .

(.., ), , , , -

Web-, , , , - , .

. -

, -

. -, Web- () Web- - , .. ,

, "" -

Hotmail1RegistrationComplete this form to register for a Hotmail account, which is also Microsoft .NET Passport.The Hotmail e-mail address and password you create are your .NET Passportcredentials. You'll need them to access your Hotmail account and to sign in whereyou see, the NET Passport sign-in button:

What if I

Ptoflle Information

First Name

Last Name

Language

Country/Region '

State

ZIP Code

Time Zone

Gender

Birth Dte

Occupation

"

1| English jj| United Statesj [Choose One] jJ

1| Universal Time - GMT _*J

130 3. HTML-

. -, Web- , -

-

. ( ,Web-,.)

,

. -

, ,

, .

, Submit, - Web-. (- ) Reset, . ( - ) -, Web- (- ). , HTML-, HTML-, Web-. , HTML- ( ), .

HTML- HTML- ,

" ". Web-, ,

Web- , . -, "" Web- Web- . HTML- HTML- . ,

, , , - , -

. . 3.2, - "/" , , Web-.

HTML- ( - , , ) Web- . Web- ,

. , Web-,

Web-. , - ( , ).

3. HTML- 131

Web- ^1) Web- HTML-2) Web- HTML- 3) Web- 4) Web- 5) HTML-

. 3.2. "/" Web- Web-

Web-, , - ( ) , .

,

. , -

.

, , ,

, , , -

, Yahoo, . ,

HTML- , .

, (Submit) - , HTML-, . -

"".

Web-, , . . 3.3 Web- Web- - .

-, , Web- , Web-, . Web- , - , .

Web- - -

. , Web- , -

.

132 3. HTML-

1) Web- Web- 2) Web- , 3) Submit Web-4) Web- ( ) CGI-5) CGI-, ,

6) CGI- Web-7) Web- Web- ,

. 3.3. HTML- ,

,

, , -

, ,

, ,

Web-. HTML- () Web-, HTML- . , Web-, HTML-, "". () , Web- . ,

() , Web- . - , HTML- , ,

Web- . ( , Web-

3. HTML-

; , , , ;)

, , -

, -

(), , - :

RESET SUMBIT

, , , -

:

action. (UniformResource Locator, URL), Web-, Web- Submit., (.. ) action , - maiito: .,

action URL, .

enctype. Web- , - CGI- Web-. , encode "application/x-www-form-urlencoded".

id. , . ( - id ), . , JavaScript- Web- document, forms [0], document,forms [ 1], document.forms [2] .. ,

, :

document.formID ( formID). method. ,

URL-, action. method : POST GET. - GET-, Web- Web- URL-, action . POST-, Web- HTML-. HTML GET , , .. -

1 3 4 3. HTML-

. , , -

, GET-. , , ,

, POST-.

GET- , - . GET- URL- , Web-- Web-.

name. , -

, Web-. ( id name), - . , Web-- , , -

document, formname ( document. formID). onReset. (.. , Web-),

Web- Reset. True False. - True, Web- - .

False, Web- . onSubmit. (.. , Web-),

Web- Submit. , , onSubmit, - Web- . False, Web- - .

True, Web- Web- CGI- , action .

target. , Web- - .

t i t l e . (, ), Web- ,

.

,

HTML-, , ,, , Reset Submit. - -

. , - HTML- (). , , Web--

3. HTML-

(.. ) URL-, action .

, , -

type, - "text".

, (First Name) (Last Name), . 3.4.

:

: [ RESET SUMBIT ]

J] http://htmWi

136 3. HTML-

maxlength. , .

readonly. , -, , .

disabled. , . ,

Web- , .

tabindex. -, . -

tabindex -, ,

(.. ) (TAB). TAB , - tabindex .

accesskey. , ALT ( COMMAND CONTROL Macintosh-) (.. ) .

Web- - "ExampieForm" ( " F i r s t N a m e " "LastName"). Fir s tName 15 -, LastName 20 .

. , Web- , size - . , 20 , 15 , 15 . ( - , ,

maxlength < i n p u t > . )

,

, () ().

, -

, . 3.5, - ():

3. HTML- 1 3 7

. 3.5.

- ' $ $; J ~ > - > - ;,,: .;...v. ..

]**] http //htm l-webdesign/Chep!erO3/Figure 03-0 5.htm

: | v : |

:

[ RESET SUMBIT ]

_

1

zi'_J

i

: :

:

[ RESET SUMBIT ]

, ( "-:") . - :

rows. ,

.

cols. , .

id. . id - , -

Web-. name. .

name ,

Web-. name Web- Submit.

Web- - "ExampieForm" 11tMessage". , 5 60 .

. , Web- - , -

rows cols. , Web- 300 (5 60 ).

138 3. HTML-

rows , cols . , - rows cols (,,

). rows x cols , - .

, type, , () .

-

, value, - , ..

. , Web- - ,

(). , , - " :", -

HTML- :

: :

, ,

. , , HTML- Web- , -

:

: : E-mail:

^ & ,

, JavaScript-, "" . JavaScript- - (). HTML- Web-, -

. ( - , -

, , , .) , , -

, HTML- Web- :

< ! - -

function ValidateForm(Form){

if (Form.Email.value == ""){

alert(", - \" E-mail\".");Form.Email.focus ( ) ;return(false);

}e lse return(true);

Microsoft Internet Explore

, - "AflpecE-mai!1

OK

( | >), - JavaScript-, Web-, JavaScript-. , -

JavaScript- Web-, . -

ValidateForm, ,

.

Email , Email Web-- , . 3.6 .

Email , JavaScript- ( a l e r t ( ) ) Email False HTML-, "" .

Web- vaiidateForm () Submit, onsubmit, :

140 3. HTML-

return, vaiidateForm(). Web- Web-, vaiidateForm() False, .

( -), onSubmit Web- - Submit JavaScript- . vaiidateForm() True, Web- - URL-, method . , .. JavaScript- False,Web- , focus ().

, Web- - "", -

, type "checkbox".

, Web- - , . 3.7, :

:

: :

:

: Windows 98

Windows XPWindows NT

:

PDA

[ RESET SUMBIT ]

, / HTML- . :

type. "checkbox", Web-, .

3. HTML- 141

id. . id -, Web-.name. . name

, -

Web-. , Web- name "" / - Web-, . , (.., value) .value. , Web- "" /. - Submit Web- / (.. ) .checked. True (.. checked="true"),Web- "" (.. ). - checked False (.. - ), HTML- - < input > checked="false".

I- a -a -li j -> - -

|//" nji03/FigureO3-OG htm

: :

:

: : Windows 98 Windows Windows NT: PDA

[ RESET STJMBIT ]

. 3.7.

< input > type, - "checkbox", ExampleForm . Web- (.. Web- , - "", , -

, "",

, "").

142 3. HTML-

,

, , type "radio".

&, , . 3.8, , -

HTML- :

: :

3.HTML- 143

, / HTML- . - :

type. "radio", Web-, .

id. . id , Web-.

name. . -

Web- Submit Web- - /. - -

( ), Web- /-.

value. , Web- "" /, .Web- Submit name value (.. /) -.

checked. checked -, Web- ( - Reset) . , -

shareEmaii No.

type, "radio", Web- ExampieForm , ShareEmaii. -, ,

. (Web- , name .) - Web- , - ( ), - ,

. ( , .)

Web- name. ,

144 3. HTML-

-

JavaScript-. , Web- -

. , , -

, -

.

, , -

, . 3.9.I. - . . . . . . . I . . 1.1 . . -TTi . . - - - . \. . . - . 1 . - . . 1 ~ ^ ^ ]

J J g Jj J

-> -

:1: I E-mail: |

:

: : Windows 98 Windows Windows NT: PDA .

? ff

,

?

3. HTML-

if (!countSelections(Form.Contact Ok)){alert("Please select either \"Yes\" or \"No\" from the \"Contact\"

options. ") ;return (false);

}if (!countSelections(Form.User_Count)){alert("Please select one of the \"Oser Count\" options.") ;return (false) ;

}//** **

return(true);}

// -->

,

length, - checked - . countseiections () Contact_OK, user__count, , -

. -

checked True. - countseiections () True, , checked True. , - ( , , ), countSelections() False. ValidateFrom() (- countseiections o ) , , - onSubmit , countSelections ().

, Web-

Submit, onSubmit, - :

He "return", vaiidateForm (). Web- Web-, vaiidateForm () False, .

( ), - onSubmit Web- Submit JavaScript- .

146 3. HTML-

vaiidateForm() True, Web- URL-, method . , Web- .

( ) ,

, -

.

, ( ), - . , HTML- Web- () (), :

:

: E-mail:*: :

:

Windows 98Windows XPWindows NT

:

PDA

?

:

Bbi6op noKynxeBbi6op Bbi6op

3. HTML- 147

I

:|

E-mail: |

:

: : Windows 98 Windows Windows NT: : PDA

?

:

jj

]

. 3.10. ( ) size. ( ),

. (size="i")

. size , Web- - ( - , ), .

id. -. id Web- .

name. .

name

, Web-. , Web- Web- name "" / - .

multiple. multiple, Web- . -

Web- ( ).

(), , , (). - :

148 3.

value. , Web- "" /, - ( ). Submit Web-- name ( ) value (), .. / ( -) . value,Web- "" / - ( - 1 ()).selected. selected ,

Web- Reset - .

Web- ( -) () . multiple, . Web- .

-

, multiple. , - , , "

" "

Ctrl". ( , Ctrl Web- - .)

) , () . , -

, / - . , ,

, ,

.

.

( ) ( ). Web-, - , -

multiple. , , -

.3. HTML- ' 149

multiple. -,

. -

, .

, -

, "

-" "- -", -

, . -

, ( ). JavaScript-, -, , , , -

( , 0):

function ValidateForm(Fortn){

II** **if (Form.Company_Type.options[0].selected){ .alert(" \" \" . , .") ;Form.Company_Type.focus();return (false);}if (Form.Company_Type.selectedlndex < 1){alert(", \" \".");Form.Company_Type.focus() ;return (false);}

return(true);

seiectedindex () . , , , (.. 0) , , ( 1 ).

, Web- Submit, onSubmit.'

150 3. HTML-

He " re turn" , vai idateForm(). Web- Web-, vaiidateForm() False, . -

( ), onSubmit - Web- Submit JavaScript- . - vaiidateForm() 'True, Web- - URL-, method . Web- - , focus () JavaScript-.

,

,

, multiple . ( multiple , Web- .)

,

, .

, , , . 3.11, - ,

.

( . 3.11 Submit Reset) - "- --" ("--Family Member Names " ) . (.. ), JavaScript--, :

addToLis to, Web- " ".

JavaScript- HTML- Web-. ( value , .)

3. HTML- 151

152 3. HTML-

- -

addToListo :

. options[] =new Option(, , SelectedByDefault,

SelectedWhenAdded) ; SelectedByDefault SelectedWhenAdded -

new Option 0. , ,

Web- . , Web- -, SelectedWhenAdded 1.

Web- , JavaScript--

new ( ) - . -

,

Web- - . , , Web-, .

,

, -

, .

-, , .

, ,

,

. -

,

- .

, -

.

, -

,

-

. JavaScript- , -

Web-. ( ,

Web- .)

3. HTML- 1 5 3

, , , Web- Web- , -

. JavaScript- () HTML-:

// JavaScript-function prepFormResuits(Form){// , ( ) .// false, ,var itemList = "";for (var i = 0; i < Form.OldestFamilyMember.length; i++){

itemList = itemList +Form.OldestFamilyMember.options[i].value;

}Form.RelativeNameList.value = itemList;return;

}// JavaScript-// >

prepFromResuito , -

, -

, :

, prepFromResuito , onSubmit, , prepFromResuito - Submit. ( , Web- prepFromResuito, -

RelativeNameList).

Reset Reset,

( , ,> ) .

, Reset ( . 3.12 ) type, "reset" - () , :

154 3. HTML-

3>

tittp//Wml-webdesign/ChepterO3/FigureO3-11 htm

: I : : I

E-mail: I

:

: : Windows 98 " Windows XP Window's NT: PDA

? *

:

| _*j

. 3.12.

Reset, Reset value. , Reset " " ("ClearForm"), :

Reset Web- , ( -) . , Reset -

.

Web-, , , -

. , ,

Reset - Web- onReset. ( - , onReset onReset Reset.)

3. HTML- 155

Reset Web- -

. , Web- "", Reset , , . ,

,

, -

, -

.

, onSubmit Web- - Submit - Web-, onReset -

. , onReset - Reset JavaScript-- PreResetProc():

, JavaScript- - ,

.

onSubmit, onReset JavaScript-. , False, Web- - , -

Reset. , True, -

.

, ", JavaScript- . 3.13 - .

156 3. HTML-

II*** , //( ) * * *

Form.Firs tName.focus() ;return (true);

else

Form.FirstName.focus();return (false);

Microsoft Internet Explorer

^^J 8 , *

1

! -?

. 3.13.

"Cancel" (""), confirm() - PreResetProcO False, Web- .

, confirm PreResetProcO True, Web- .

Submit , , -

- -

.

Submit Web- (.. / , ) Web--. Web-, , ( -), action , .

Submit HTML- () -, :

Submit : value. , Web- Submit

. Submit - "" ( . 3.11). value , Web- Submit -

3. HTML- 157

, . (- Internet Explorer Netscape Navigator Submit "Submit Query" (" ")).

' name. name Submit. , Web- , Web-, / Submit, name value.

onSubmit, Web- Web- , onSubmit. , onSubmit , . -

, True Web-- . ,

( ), - () False. Web- Web-, - -

. ( " - ", "

" " -

" onSubmit Web- - Web-.)

Submit Reset

Submit, (.. ) URL-, action . , , Reset, - -

. Web- HTML- , . 3.14 Submit Reset.

. 3.14.

1

158 3. /

Web- . , - Submit , , - :

, ,

submit.gif Submit , name "ExampieForm", Submit :

href - "" (#) Web- - Web- (-) . , Web- URL- - , Submit ( src ). Web- JavaScript-, onclick .

, Reset - , - :

,

Reset Web- reset ( submit (), Submit ). -, name "ExampieForm11, - Reset reset.gif, Reset :

"" Reset -, , Web- JavaScript-, onReset < f o r m >. , Submit Web- - , onSubmit. , - Web-, Submit .

3. HTML-

CGI- , () -

/, Web- (.. URL-), action , Submit. / name value. , , - Web- Web- , .

, action Web- [email protected]. ( ,

[email protected] .)

:

: E-Mail: : . :

Windows 98Windows XPWindows NT

:

IIopTaTHBHue PDA

?

,

. 3.15, Submit, Web- ,

mailto: action.

3. HTML-

sjjjj ( Mail 1 .) 8

> -'-'" - " ;"aj'^ijm -^ j # ] http//htmUvebdesign/ChapterO3/FigureO3-12 htm

: I : | E-Mail: |

:,

: Windows 98 Windows Windows NT: PDA

? *

i. 3.15. ,

,

, (=). "text/plain" enctype ( ) Web-, . -

application/x-www-form-uriencoded, Web- , -

(&). , , -, Web- /. - ( , ), , - Web- / - .

, maiito: action .

-

.

, maiito: , . -

maiito: ( ) Internet CGI-. 10, , 11, ASP, Web-. - -

( SMTP), .

3. HTML-

HTML- , , -

* , -

() (). , -

, . , -

, - . , -

, .

, ,

, . 3.16, - ( - ).

:

. 3.16. ,

":" ("Message:") - ,

:

3. HTML-

:

:

Windows 98 Windows Windows NT Windows ME : Windows 2000 Novell Unix

. 3.17. , / ,

, -

. -

, , , -

. 3.14. , -

. ( , , ,

-

, ":"

.) , .13.17, , - , , . 3.18.

:

OnepaimoHHbie :

Windows 98

Windows XP

Windows NT

Windows ME

Windows 2000

Snbsp;

Novell

Unix

>/6>

3. HTML- 163

:

J :

Windows 98 Windows Windows NT Windows ME ("Windows 2000:

Novell Unix

. 3.18.

,

, .

border - 1, . , - "" ,

border .

"" -

Web-.

, , -

, , -

, "-

" .

, -

().

, , . 3.19, -

():MMH:

:

Aflpec E-mail:

:

'

164 3. HTML-

< / l a b e l > ) HTML 4, InternetExplorer 4.0 ( ) Netscape Navigator 6.0 ( ). Web-, , , . -

, , , -

.

3. HTML- 1 6 5

Web- onClick ,

onSubmit Web- - -

, action . , - Submit submit () Web- - , onSubmit.

-

Submit, onclick , , - , submit (). , , -

, submit ). , False, ,

() . - ' :

function validateAndSubmit(Form){

//**** ***//**** , ****//**** "FormReselus_Valid" TRUE, ****//**** , FALSE ****

if (Form_Result_Valid){From.Submit();

}else{

//**** ****return;

( if Forin_Resuits_vaiid , ,

, ,

.) onclick , -, Submit, , - , submit():

16 6 3. HTML-

( ExampleForm , - , SubmitButtonGraphic.GIF , Submit.)

( -) onclick, ,

. Submit ( , type "submit") , :

3. HTML- 167

, type "hidden" ( ). Web- - , / , , (. . 3.21).

, -

value < input >, :

168 3. HTML-

.

(*). , , -

. ,

Web- Web-. , - ,

.

HTML- :

type , , ( , ,, type "text"). type "password" Web- . ( - name, id size , , ":", "PW" "20", .)

Web- (*), . , , , -

( ) , - .

10, 11 12 , ( ) - . , 12 - Web-, ( - ), . -, ,

.

Submit Reset. ,, , "", -

, . , Web--, , Submit URL-, action (, Submit , onSubmit). , Reset Web- ,

3. HTML-

, , -

Reset , onReset.

Reset Submit ,' type (..type="reset" Reset type="submit" Submit). - Reset Submit, - , . -

, Web- .

Reset Submit, -, ""

HTML- - () :

, "button" type Web- . ,

value . ( , , value, - .) Web- - , onclick .

, -

, ,

Web- . , -

.

" "

. -

, : " ?" - ,

spouse. , - , -

, "" "

", .

disabled, - .

d i s a b l e d . - ,

, , d i s a b l e d - .

170 3. HTML-

, , , . 3.22, .

JavaScript-

, .. ( ).function disableSpouseName(Form, status)

if (status) Form.SpouseName.value = " ()";Form.SpouseName.disabled = status;return;

QpesKa ^* " J j -yj>"

jg] htip://htm!^vebdesign/ChapterO3/Ftgure03-l him

: I

?

3. HTML- 1 7 1

, . ,

Submit :

, Submit - J

Education

Эффективный самоучитель по креативному Web дизайну