Subject : WEB Server 구축을 위한 HTML작성법(2).

Description :

CONTENTS:
   1. 외부 이미지,소리,그리고 애니메이션
   2. 그래픽 정보 지도
   3. 고장 수리(Troubleshooting)
        o Tag의 겹침을 피하라
        o 앵커와 문자 Tag 삽입하기
   4. 실제 예제

CONTENTS:
   1. 외부 이미지, 외부 소리,그리고 외부 애니메이션

Size가 큰 인라인 이미지를 사용할 때 부담해야 하는  속도의 문제를 해결할 방법으로 외부 이미
지(external image) 사용을 아래에 제시하고 있다. 외부 이미지를 참조하기 위해서는 다음을 사
용하라,
    link anchor
외부 애니메이션와 외부  소리의 연결도 같은 방식을  사용하면 된다. 단지 차이점이라면 화일의 
확장자가 다르다는 것 뿐이다. 예를 들면,
    Axil-Logo
이것은 Axil-Logo에 대한 연결을 나타낸다. 공통적인 화일 형과 각각의 확장자는 다음과 같다:
File Type             Extension
Plain text                .txt
HTML document         .html
GIF image                .gif
TIFF image               .tiff .tif
XBM bitmap image       .xbm
JPEG image              .jpg or .jpeg
PostScript file            .ps
AIFF sound               .aiff
AU sound                 .au
QuickTime movie         .mov
MPEG movie              .mpeg or .mpg

위와같이 Browser가 사용하는 File의 종류에 따른 도움 Program의 목록은 MIME이라고 불리는 
표준으로부터 나온 것이다. MIME은 E-Mail을 통해서 여러 가지 형식을 Code화 하는 표준이다.

Tip : 외부이미지 사용하면서 내부이미지 사용하기
      
Note : Sound File의 형식은 거의 모든 System에서 쓰이는 SUN Microsystem에서 만든 8-Bit μ-law
방식이다. 그러므로  .au File들은 μ-law File이라고도  불린다. 음질은 전화 수준이다.  최근에는 MPEG 
Audio형식이 Web에서 사용하고자 추진중이다.(참고 Program으로 "SOX"가 있다.)


2. 그래픽 정보 지도

이것은 NCSA  httpd (version 1.0a5  혹은 그 이상)를  사용한다고 가정하에 시작한다.  다른 
Web Server들도  그래픽 정보  지도를 지원하지만,  방식이 다를  수 있다. 이런  경우에는 그 
Server에 관련된 문서를 보아야한다.

그래픽 정보 지도를 만들기 전에 먼저 세가지를 체크하여야 한다.
    서버 체크
          NCSA httpd 서버가 인스톨되고, 돌아가고 있는지 확인을 한다.
    imagemap.conf 화일 체크
          서버의 config/imagemap.conf 화일에 대해서 쓰기 권한이 있는지 확인한다. 
          config/imagemap.conf 화일의 사용용도는 아래에서 설명을 한다.
    imagemap 실행화일 체크
          또한 imagemap 풀그림이 cgi-bin 디렉토리에 컴파일이 되어 있는지 확인한다.


그래픽 정보 지도 만들기

위에서 설명한 세가지를 체크하고 난  후에는 쉽게 그래픽 정보 지도를 만들 수 있다. 다음은 그
래픽 정보 지도를 만드는 단계적인 설명이다.
   [IMAGE] 이미지 (image) 를 만든다.
        이미지를 만들고, 중요한 것은 마지막에는 GIF 형식으로 저장을 하여야 한다는 것이다.
   [IMAGE] 이미지 지도 화일 (image map file) 을 만든다.
        다음은 Atom의 이미지 지도 화일이다.

        default http://atom.hsr.re.kr/default.html
        rect http://atom.hsr.re.kr/kdk/ATOM.html       36,31   110,95
        rect http://ysuny.hsr.re.kr/index.html            35,115  110,178 
        rect http://atom.hsr.re.kr/kdk/HYUNDAI2.html   35,205  110,270 
        rect http://roche.hsr.re.kr/index.html            290,30   360,95  
        rect http://atom.hsr.re.kr//kdk/HYUNDAI3.html  290,120  360,185 
        rect http://atom.hsr.re.kr/kdk/MYMY.html        290,205  360,270 
        rect http://atom.hsr.re.kr/kdk/WYBEE.html      160,245 230,310 

형식은 매우 간단하다. 첫번째 라인은  어떠한 것에도 대응되지 않는 부분을 클릭하였을 때에 처
리하는 방법을 나타낸다. 다음 줄들은 어떠한 URL 에 대응되는 직사각형 구역을 나타낸다. 이렇
게 이미지에서 왼쪽위,  오른쪽아래 점의 위치를 알아낼  때에는 xv Tool들을 사용하는  것이 좋
다. 이미지 지도 화일을 만들고 난 후, 이름을  어떻게 붙이든지, 어디에 저장을 하던지는 상관이 
없다. 예를 들어서 /http/imagemap/ws2.map 화일로 저장을 한다.

     서버에 이미지 지도 화일을 등록한다.
          처음 시작할 때에 쓰기 권한을 체크하라고 말을 했던 config/imagemap.conf File에
          이미지 지도 화일을 등록한다. 없으면 새로 만들면 된다. 
          다음과 같은 식으로 등록을 한다.
          ws2 : /http/imagemap/ws2.map
          여기에서 ws2는 실제의 이미지 지도 화일명인 /http/imagemap/ws2.map을 간단
          하게 나타내는 이름이다.
          주의 : 실제 화일명은 화일 시스템의 루트로부터의 절대경로를 써 주어야 한다. 
          주의할 버그 하나
     이미지 지도를 포함하는 HTML 형식의 문서를 만든다.
          마지막으로 이미지 지도를 포함하는 HTML 형식의 문서를 만듭니다.
          다른 부분은 같고, 원하는 위치에 이미지 맵을 넣겠다는 뜻으로
          다음의 예처럼 적어주면 됩니다.
          
          

          ☞ atom.hsr.re.kr은 HTTP 서버가 돌아가고 있는 System의 Domain Name이다.
          ☞ cgi-bin 은 CGI (Common Gateway Interface)의 실행 화일들이 있는
             Directory로 Web Server Install시 지정된 것이다.
          ☞ 그리고 imagemap은 CGI 실행 화일을 가리킨다.
          ☞ 가장 마지막의 ws2는 imagemap 실행화일의 인수로 들어가게 되는, 이미지 지도 
             화일명을 간단하게 나타낸 이름 (바로 앞단계에서, config/imagemap.conf 에 
             기록한 이름) 이다.
          ☞ 마지막으로 ws2.gif 는 가장 처음에 저장을 하였던 이미지의 이름이다. 
     Testing
          앞에서 만든 HTML 형식의 화일을 읽어서, 원하는 곳에 클릭을 해서
          제대로 동작을 하는지 Test를 한다.


3. Trouble Shooting

Tag의 겹침을 피하라
아래의 HTML을 인용해보자:
    This is an example of overlapping HTML tags.
``overlapping'' 이라는 단어가  와  tag 사이에 있다.  Browser는 이것을 어떻게 나
타낼까? 보기전에는 알수가  없고, 대개 많은 Browser들은 각각 달리  반응할 것이다. 그러므로 
tag의 중첩은 피해야 한다.
    
Anchor 안에 머리글이나 다른 HTML 요소를 삽입하지 마라:
    안좋은 예 : 
 
                
My heading
              
                
     좋은  예 : 
My heading


비록 대부분의 Browser들이  위의 예제를 처리는 하지만, Standard HTML과  HTML+은 금지
하고 있다.


4. 실제 예제



Hi... I'm Do Kyung Kim





아톰에 오신걸 진짜 환영합니다




    총감독 : 김 도경


편지를 
보내려면....

    웍스테이션 시스템 엔지니어 팀

    현대 전자 산업 주식 회사

    서울시 강남구 역삼동 태왕빌딩 5층 719-6,7 

    TEL: +82-2-528-9285

    FAX: +82-2-528-9115