제1일 World Wide Web이란 무엇인가? 제1장 World Wide Web의 세계 World Wide Web이란 무엇인가 ? ... 4 다양한 종류의 프로토콜(Protocol)을 지원한다는 것은 무슨 의미인가? ... 5 하이퍼텍스트(Hypertext) 기반의 정보 검색이란 무엇인가? ... 6 정보의 분산이란? ... 8 그래픽 인터페이스란? ... 8 멀티미디어 지원이란? ... 10 대화형 검색이란 무엇인가? ... 11 동적인 정보의 제공이란? ... 12 다양한 시스템의 지원이란? ... 13 World Wide Web을 누가 소유하고 있는가? ... 13 W3 Consortium ... 13 Web 브라우저(browser) ... 14 Web 브라우저의 동작 원리는? ... 15 Web 서버(server) ... 17 홈 페이지(Home page) ... 17 Web 브라우저의 홈 페이지 ... 18 Web 서버의 홈 페이지 ... 18 개인의 홈 페이지 ... 19 요약 ... 19 Workshop ... 19 질문과 답 ... 20 Quiz ... 21 실습 ... 21 제2장 Netscape Navigator를 사용해보자 Netscape의 개발 배경 ... 24 NCSA Mosaic ... 24 Netscape Navigator ... 25 Netscape 2.0을 사용하기 위해서 필요한 요구 사항 ... 27 윈도우 3.x ... 27 윈도우 95 ... 28 Apple 매킨토시 ... 29 UNIX ... 30 Netscape Navigator 2.0 프로그램을 얻는 방법 ... 31 Web 브라우저를 이용한 Netscape Navigator 2.0의 다운로드 ... 31 FTP를 이용한 Netscape Navigator 2.0의 다운로드 ... 31 디스켓 형태의 구매 ... 32 Netscape 2.0 설치 방법 ... 32 윈도우와 윈도우 95 ... 32 Apple 매킨토시 ... 33 UNIX 버전 ... 33 Netscape 2.0 사용 방법 ... 33 Netscape 2.0의 실행 ... 33 문서 영역(Document Area) ... 34 하이퍼링크(Hyperlink) ... 35 제어판(Control Console) ... 35 상태표시 바(Status Bar) ... 39 Netscape 2.0 환경 설정 방법 ... 39 General Preferences... ... 39 Mail and News Preferences... ... 40 Network Preferences ... 41 Security Preferences ... 42 Show Toolbar ... 42 Show Location ... 43 Show Directory Buttons ... 43 Show Java Console ... 43 Auto Load Images ... 43 Document Encoding ... 45 Save Options ... 45 Netscape 2.0의 고급 기능 ... 45 Forms ... 45 E-mail ... 47 Newsgroups ... 48 FTP ... 49 Plug-ins ... 49 Java ... 51 JavaScript ... 51 요약 ... 52 Workshop ... 52 질문과 답 ... 52 Quiz ... 53 실습 ... 54 제3장 HTML 문서작성기 : 에디터 및 변환기 태그 에디터(Tag Editor) ... 57 Microsoft 윈도우(Window)용 태그 에디터 ... 58 매킨토시용 프로그램 ... 62 UNIX용 프로그램 ... 63 WYSIWYG 에디터 ... 64 Microsoft 윈도우용 프로그램 ... 65 매킨토시용 프로그램 ... 68 UNIX용 프로그램 ... 70 변환기(Converter) ... 70 윈도우용 프로그램 ... 71 매킨토시용 변환기 ... 71 UNIX용 변환기 ... 72 HTML 에디터를 이용하는 문서작성과 HTML 변환기를 이용하는 작성 방법의 장단점 비교 ... 73 요약 ... 75 Workshop 75 제2일 간단한 HTML 문서를 작성해보자 제4장 시작하기 전에 Web 사이트 설치 전에 고려해야 할 사항 ... 80 World Wide Web을 통하여 무엇을 할 수 있는가? ... 80 Web 페이지는 무엇으로 구성될 수 있는가? ... 83 과감히 시작하자 ... 90 Netscape 기능을 둘러싼 논의들 ... 91 HTML 3.0 ... 92 Netscape Navigator 2.0과 NHTML ... 94 Netscape 2.0에 관련된 논란의 결론 ... 96 Web 사이트 설치 계획 ... 97 구체적인 목표를 설정하자 ... 97 Web 사이트에 포함될 내용의 개요(outline) 작성 ... 98 각 Web 페이지에 포함시킬 내용 정의 ... 98 자신의 사이트의 성능 평가 ... 99 스토리보드(storyboard)의 작성 ... 99 실제 Web 페이지 작성 ... 100 요약 ... 100 Workshop ... 101 질문과 답 ... 101 Quiz ... 102 실습 ... 102 제5장 HTML과 World Wide Web의 기초 HTML이란 무엇인가? ... 104 HTML은 페이지 레이아웃이 아니라 그 구조를 정의한다 ... 104 스타일(style) 기능과 HTML ... 106 태그와 텍스트 ... 107 태그 속성(Attribute) ... 108 HTML 문서의 구조 ... 110 기본적인 문서 태그 ... 114 문서 타이틀(title) ... 114 제목(Heading) ... 115 제목용 태그의 속성 ... 116 문단(Paragraph) 포매팅 ... 117 문자 포매팅 ... 121 Comment 태그 ... 125 요약 ... 125 Workshop ... 127 질문과 답 ... 127 Quiz ... 127 실습 ... 128 제6장 Web 페이지들의 연결 방법 〈A〉: 연결(link) 태그 ... 132 Hotspot ... 132 HREF 속성 ... 133 자신의 Web 페이지들을 연결하는 방법 ... 134 절대적인 위치지정 ... 134 상대적인 위치지정 ... 135 절대 URL과 상대 URL 중 어는 것을 사용할 것인가? ... 136 World Wide Web 상에 존재하는 다른 Web 페이지로 연결을 설정하는 방법 ... 139 통신 프로토콜 ... 139 도메인 이름(Domain Name) ... 139 디렉토리 경로명 ... 140 문서 이름 ... 140 링크 사용시 주의해야 될 사항 ... 142 Inline 링크 ... 143 링크 리스트 ... 145 요약 ... 147 Workshop ... 147 질문과 답 ... 147 Quiz ... 148 실습 ... 149 제3일 좀더 세련된 HTML 문서를 작성해보자 제7장 고급 스타일 지정 방법 리스트의 작성 ... 154 Unordered List ... 155 Ordered List ... 157 네스팅(Nesting) 리스트 ... 161 Definition list ... 162 디렉토리와 메뉴 리스트 ... 165 고급 단락 포매팅 방법 ... 165 Preformatted 텍스트 태그 ... 166 주소(Address) 태그 ... 167 인용(Quotation) 태그 ... 168 디비전(Division) 태그 ... 169 수평선(Horizontal rule) 태그 ... 171 확장된 줄 바꿈(Line break extension) 태그 ... 172 고급 텍스트 포매팅 방법 ... 173 베이스(base) 폰트의 정의 ... 177 특수 문자 표시 방법 ... 178 특수 문자 엔터티(special character entity) ... 179 Named 엔터티와 수치(Numeric) 엔터티 ... 180 요약 ... 180 Workshop ... 183 질문과 답 ... 183 Quiz ... 183 실습 ... 184 제8절 테이블 사용 방법 기본적인 테이블 작성법 ... 186 〈TABLE〉…〈/TABLE〉 ... 186 행(row)과 셀(cell)을 정의하는 방법 ... 187 테이블 보더(border) 지정 방법 ... 189 테이블 헤딩(heading) ... 191 고급 테이블 작성법 ... 194 너비(WIDTH)와 높이(HEIGHT) 지정 방법 ... 194 텍스트 정렬(alignment) ... 196 둘 이상의 열이나 행에 포함되는 데이터 셀의 작성 방법 ... 200 데이터 셀에 또 다른 테이블을 포함시킬 수 있다 ... 206 Blank 셀과 empty 셀의 작성 ... 207 테이블 정렬 방법 ... 208 요약 ... 211 Workshop ... 213 질문과 답 ... 213 Quiz ... 213 실습 ... 214 제9장 URL과 하이퍼링크의 사용 방법 문서의 서로 다른 부분을 연결하는 하이퍼링크의 작성 ... 218 Reference Anchor ... 218 Reference 링크 ... 219 URL ... 222 URL이란 무엇인가? ... 222 URL의 구성 ... 222 공백(space)과 다른 특수 문자 ... 226 URL의 종류 ... 226 HTTP ... 227 Files ... 228 Gopher ... 229 Newsgroup ... 231 Anonymous FTP ... 232 Private FTP ... 233 telnet: ... 233 wais: ... 233 mailto: ... 234 요약 ... 234 Workshop ... 235 질문과 답 ... 235 Quiz ... 236 실습 ... 236 제4일 Web 페이지의 모양을 향상시켜 보자 제10장 Web 문서에 이미지를 사용하는 방법 이미지 형식 ... 240 GIF ... 240 JPEG 형식 ... 241 XBM 형식 ... 242 다른 이미지 형식들 ... 242 Inline 이미지 ... 243 Web 페이지에 사용할 이미지를 얻는 방법 ... 243 〈IMG〉 태그 ... 245 이미지 정렬 ... 246 BORDER 속성 ... 252 ALT 속성 ... 253 투명 배경색(transparent background)을 갖는 이미지 ... 256 투명 이미지(Transparent Image)를 만드는 방법 ... 257 이미지 hotlink ... 260 문서에 배경 이미지 추가 ... 261 배경 이미지 만들기 ... 261 배경 이미지의 온라인 소스 ... 262 BACKGROUND 속성 ... 263 이미지 로딩 시간을 개선할 수 있는 방법 ... 263 Interlaced GIF 이미지 사용 ... 264 Progressive JPEG 이미지 사용 ... 265 Image Scaling ... 265 Lo/High Image 로딩 ... 267 요약 ... 267 Workshop ... 269 질문과 답 ... 269 Quiz ... 269 실습 ... 270 제11장 외부 미디어와 Plug-in의 사용 방법 '외부 미디어'란 무엇인가? ... 272 HTML 문서에 외부 미디어를 포함시키는 방법 ... 274 외부 이미지의 사용 방법 ... 274 사운드의 사용 방법 ... 278 사운드 파일을 구하는 방법 ... 280 사운드 형식의 변환 방법 ... 281 Web 페이지에 사운드 파일을 포함시키는 방법 ... 282 비디오의 사용 방법 ... 283 비디오 파일을 얻는 방법과 변환 방법 ... 283 Web 페이지에 비디오 파일을 포함시키는 방법 ... 284 Plug-in이란 무엇인가? ... 291 Plug-in과 helper application의 차이점 ... 292 〈EMBED〉 태그 ... 294 〈NOEMBED〉 태그 ... 295 다른 Plug-in들 ... 297 요약 ... 300 Workshop ... 301 질문과 답 ... 301 Quiz ... 302 실습 ... 302 제12장 윈도우 프레임 Netscape에 대한 논란 ... 306 링크된 윈도우의 사용 방법 ... 308 〈BASE〉 태그 ... 311 프레임의 사용 방법 ... 312 〈FRAMESET〉 태그 ... 313 〈FRAME〉 태그 ... 316 〈NOFRAME〉 태그 ... 318 복잡한 형태의 프레임 작성 방법 ... 319 Magic TARGET Names ... 327 요약 ... 327 Workshop ... 329 질문과 답 ... 329 Quiz ... 329 실습 ... 330 제5일 실제로 World Wide Web에 연결해 본다 제13장 Web 서버에 작성한 Web 페이지를 설치하는 방법 Web 서버의 역할 ... 334 Web 페이지를 설치할 Web 서버를 찾는 방법 ... 335 학교나 회사의 Web 서버를 사용하는 방법 ... 335 상업적인 인터넷 혹은 Web 서비스를 사용하는 방법 ... 335 Anonymous FTP나 Gopher를 사용하는 방법 ... 336 자신의 Web 서버를 구축하는 방법 ... 336 Web 서버 프로그램의 선택 ... 338 UNIX용 Web 서버 ... 338 Microsoft 윈도우용 서버 ... 339 매킨토시용 서버 ... 340 Web 서버에 HTML 파일을 설치하는 방법 ... 340 Web 서버에 실제로 파일을 설치하여 보자 ... 342 Web 서버가 다른 시스템에 있는 경우 ... 342 자신의 URL을 결정하는 방법 ... 344 Web 서버에 설치한 후에는 여러 차례에 걸쳐 테스트를 해본다 ... 346 Web 서버 관리 요령 ... 347 도메인 이름을 www.yoursystem.com 형식으로 alias시켜 둔다 ... 347 Webmaster 메일 alias 시켜 둔다 ... 347 서버 홈 페이지의 작성 ... 348 사이트 관리와 Web 페이지 디자인에 관한 지침서를 마련한다 ... 348 Netscape Now 로고를 자신의 사이트에 사용할 수 있도록 한다 ... 348 요약 ... 348 Workshop ... 350 질문과 답 ... 350 Quiz ... 351 실습 ... 352 제14장 새로운 Web 사이트의 개설을 알리는 방법 www 사이트 리스팅 ... 354 Yahoo ... 355 World Wide Web Virtual Library ... 357 Yellow Pages ... 358 WORLDWIDE Yellow Pages ... 359 GTE SuperPages ... 359 WWW Business Yellow Pages ... 360 What's New Listings ... 361 Private 디렉토리 ... 362 Internet Mall ... 363 Netscape SponSorship Rate Card ... 364 사이트 인덱스 ... 364 Lycos ... 364 WebCrawler ... 365 InfoSeek ... 366 Submission 툴 ... 367 Usenet을 통하여 자신의 사이트를 알린다 ... 369 업무용 명함, 회사명등이 인쇄된 편지지나 팜플렛 등의 인쇄물을 사용하는 방법 ... 370 다른 디렉토리와 관련 Web 페이지들 ... 371 요약 ... 372 Workshop ... 372 질문과 답 ... 372 Quiz ... 373 실습 ... 373 제15장 좋은 Web 페이지를 작성하는 요령 좋은 글을 쓰는 방법 ... 376 짧고 명료하게 문장을 작성한다 ... 377 빨리 전체 내용을 파악할 수 있는 구성을 갖춘다(Scanability) ... 377 각 페이지를 독립시킨다 ... 379 강조 스타일의 사용에 주의한다 ... 380 특정 Web 브라우저에만 해당하는 용어를 사용하지 않는다 ... 381 오자 검사를 비롯하여 작성된 문서의 교정을 확실히 본다 ... 382 Web 페이지 디자인과 레이아웃 ... 383 이미지의 사용을 자제한다 ... 383 이미지 대신 디스플레이될 텍스트를 항상 지정해 둔다 ... 384 배경 이미지/색 그리고 링크의 색 ... 385 제목 스타일은 제목에만 적용한다 ... 385 연관된 부분이 뚜렷이 나타낼 수 있도록 한다 ... 386 일정한 형식의 레이아웃을 사용한다 ... 387 링크의 적절한 사용 방법 ... 388 링크 메뉴에는 내용이 잘 요약된 텍스트를 사용한다 ... 388 문장 중에 포함된 링크 ... 390 'Here' 증후군을 피한다 ... 391 링크의 사용 여부를 신중히 고려한다 ... 393 그 밖에 HTML 문서 작성시 유의하여야 할 것들 ... 396 홈 페이지로 연결되는 링크 ... 396 하나의 주제를 여러 페이지에 걸쳐 설명하지 않는다 ... 396 많지도 적지도 않는 적당한 개수의 문서를 작성한다 ... 396 Web 페이지에 서명을 포함시킨다 ... 399 하이퍼텍스트 문서의 일반 텍스트 버전을 제공한다 ... 400 요약 ... 401 Workshop ... 402 질문과 답 ... 402 Quiz ... 403 실습 ... 403 제6일 대화형 Web 페이지를 만들어 보자 제16장 CGI를 이용하여 Web 서버와 정보를 주고 받는 방법 CGI 스크립트란 무엇인가? ... 408 CGI 스크립트의 동작 원리 ... 409 간단한 예제 ... 410 CGI 스크립트를 사용하기 위한 요구 사항 ... 412 자신의 Web 서버가 CGI 스크립트를 사용할 수 있도록 환경 설정이 되어 있는가? ... 412 프로그램을 작성할 수 있는가? ... 413 어떤 프로그래밍 언어를 사용할 것인가? ... 413 CGI 기능을 지원할 수 있도록 서버를 설정하는 방법 ... 414 CGI 사용을 위한 W3C httpd 서버 환경 설정 ... 414 CGI 사용을 위한 NCSA HTTPd 서버 환경 설정 ... 415 UNIX 시스템을 사용하지 않는 경우 ... 417 CGI Script의 동작 ... 418 출력 헤더 ... 418 출력 데이터 ... 419 대화형 검색 기능의 구현 ... 422 스크립트 ... 424 〈ISINDEX〉 태그 ... 424 검색 스트링과 스크립트의 URL ... 426 특수한 스크립트 출력 생성 방법 ... 431 다른 HTML 문서를 출력으로 보내주는 방법 ... 431 출력을 내지 않는 경우 ... 433 CGI 스크립트의 디버깅 ... 434 요약 ... 434 Workshop ... 435 질문과 답 ... 435 Quiz ... 437 실습 ... 437 제17장 Form과 CGI Form의 구조 ... 440 Form 입력 : GET와 POST ... 441 Form 처리를 위한 CGI 스크립트 ... 441 기본적인 form 요소 ... 448 Submit 버튼 ... 449 Text field ... 450 Radio 버튼 ... 451 Check box ... 453 HTTP File Upload ... 455 디폴트 값의 지정 ... 457 Form의 작성 ... 458 다른 form 요소들 ... 464 Selection ... 464 Text Area ... 467 Hidden Field ... 469 Form과 프레임 ... 470 Form의 이름 ... 470 요약 ... 471 Workshop ... 473 질문과 답 ... 473 Quiz ... 474 실습 ... 474 제18장 이미지 맵과 동적으로 갱신되는 문서 작성 이미지 맵이란 무엇인가? ... 476 Server-Side 이미지 맵 ... 477 Client-Side 이미지 맵 ... 477 이미지 맵과 텍스트 브라우저 ... 478 Server-Side 이미지 맵의 작성 ... 478 이미지 맵용 이미지 ... 478 맴(map) 파일의 작성 ... 479 맵 파일과 이미지 맵 CGI 프로그램의 설치 ... 483 모든 부분을 결합해 보자 ... 483 Client-side 이미지 맵의 작성 ... 486 〈MAP〉, 〈AREA〉 태그 ... 487 USEMAP 속성 ... 488 Server-side & client-side 이미지 맵을 모두 지원하는 Web 페이지의 작성 방법 ... 490 동적으로 갱신되는 문서의 작성 ... 490 Client Pull ... 494 Client Pull을 이용한 사운드 플레이 ... 495 요약 ... 496 Workshop ... 497 질문과 답 ... 497 Quiz ... 498 실습 ... 499 제7일 Java와 JavaScirpt를 이용한 프로그래밍 제19장 JavaScript JavaScript 소개 ... 505 JavaScript란 무엇인가? ... 505 JavaScript를 사용하는 이유는 무엇인가? ... 505 〈SCRIPT〉 태그 ... 509 Javascript 스크립트의 구조 ... 509 SRC 속성 ... 510 기본 명령어와 언어 구조 ... 510 Property와 Method ... 511 Event와 JavaScript ... 513 변수(Variable) ... 515 Operator와 Expression ... 516 기초적인 JavaScript 프로그래밍 ... 517 프로그램이란 무엇인가? ... 517 온라인 JavaScript 문서를 이용하라 ... 521 요약 ... 521 Workshop ... 522 질문과 답 ... 522 Quiz ... 522 실습 ... 523 제20장 JavaScript의 응용 랜덤 링크 생성기(random link generator) ... 526 프레임 정의 ... 544 tourstart.html 문서 ... 545 form의 작성 ... 545 WebTop 계산기의 작성 ... 554 'WebTop' 계산기의 JavaScript 코드 ... 555 요약 ... 561 Workshop ... 561 질문과 답 ... 561 Quiz ... 562 실습 ... 562 제21장 Java Java란 무엇인가? ... 564 World Wid Web 프로그래밍 ... 565 Java 언어 ... 565 분산 처리 프로그래밍 ... 566 Java는 어떤 기능을 제공할 수 있는가? ... 567 Java 프로그래밍 ... 570 Java Developers Kit(JDK) ... 571 Java에 대하여 더 공부를 하고 싶은 경우 ... 582 Web 페이지에 Java applet을 포함시키는 방법 ... 583 〈APPLET〉 태그 ... 583 〈PARAM〉 태그 ... 584 Ticker Applet을 개선시켜 보자 ... 586 이미 작성된 Java Applet을 사용하는 방법 ... 586 요약 ... 589 Workshop ... 589 질문과 답 ... 589 Quiz ... 590 실습 ... 590 부록 부록 A HTML 명령어 요약 ... 593 부록 B 문자 엔터티 ... 619 부록 C HTML 문서 작성시 사용할 수 있는 색과 16진수값 ... 627 부록 D 유용한 사이트들의 리스트 ... 633 부록 E Quiz 해답 ... 645 부록 F 용어 해설 ... 655