내발자국[동호회]

[HTML] WWW이 기가 막혀! (7)-HTML문서(3)

松巖 1996. 3. 17. 16:44
--------------------------------------------------------------------------
8. 멀티미디어 문서 만들기
이번에는 웹 사이트를 아주 멋지게 만들기 위해서 그림도 보여
주고 일반 텍스트 파일도 보여주고 프린팅 파일인 ps파일도 보여
주고 또 소리도 들려주고 하는 예를 보이기로 한다.

---- TEST5.HTML -----------------------------------


This is Test Home Page of Internet in KAIST </T<BR> ITLE><BR> <H1> Real Time Computing Lab </H1><BR> </HEAD><BR> <BODY> <!-- txt: text 파일, html: HTML문서 파일<BR> gif: GIF그림 파일 tif: TIFF 그림 파일(주로 스캐닝한 것)<BR> xbm: XBM그림 파일 jpg: JPEG 그림 파일<BR> ps: 포스트스크립트 프린팅용 파일<BR> au: SUN audio 파일<BR> mpg: MPEG 동화상 파일 --><BR> <h3> External sources </h3><BR> <!-- 단순히 text 파일을 읽어서 보여준다 --><BR> <A HREF="externals/readme.txt"> test text file </a> <br><BR> <!-- HTML 파일을 읽어서 HTML에서 요구하는 대로 그려서 <BR> 보여준다 --><BR> <A HREF="externals/testdoc.html"> test HTML file </a> <b<BR> r><BR> <!-- GIF 포맷 파일을 읽어서 화면에 그림으로 보여준다 --><BR> <A HREF="externals/test.gif"> test gif file </a> <br><BR> <!-- TIFF 포맷 파일을 읽어서 화면에 그림으로 보여준다 --><BR> <A HREF="externals/visp.tif"> test TIFF file </a> <br><BR> <!-- XBM 포맷 파일을 읽어서 화면에 그림으로 보여준다 --><BR> <A HREF="externals/dallas.xbm"> test XBM file </a> <br><BR> <!-- JPEG 포맷 파일을 읽어서 화면에 그림으로 보여준다 --><BR> <A HREF="externals/ab.jpg"> test JPEG file </a> <br><BR> <!-- Postscript 파일을 읽어서 화면에 그림으로 보여준다 --><BR> <A HREF="externals/tutorial.ps"> test Postscript file </a> <b<BR> r><BR> <!-- SUN audio 파일을 읽어서 화면에 그림으로 보여준다 --><BR> <A HREF="externals/bark.au"> test SUN AUdio file </a> <b<BR> r><BR> <!-- MPEG 동화상 파일을 읽어서 화면에 그림으로 보여준다 - -><BR> <A HREF="externals/test.mpg"> test mpeg file </a> <br><BR> <b> txt, html, gif, tiff, xbm, jpg, ps, aiff, au, mov, mpg </b><BR> <p><BR> </BODY><BR> </HTML><BR> ---- -----------------------------------------------<BR> 그림 파일명 : 14test5.gif 그림 파일명 : 14test5a.gif<BR> <그림 6> 처음 실행한 예 <그림 6-1> jpg 파일을 본 <BR> 예 <BR> 그림 파일명 : 14test5b.gif<BR> <그림 6-2> mpg파일을 본 예<BR><BR> 9. 고 수준 HTML 기법들<BR> 이번에는 앞에서 배운 <ul> .. </ul>을 사용하지만, 단순히 아이<BR> 템을 보여주는 것이 아니라 아이템의 앞에 붙은 동그라미를 다<BR> 른 모양으로 바꾸고 싶을 때는 어떻게 해야 할까 그리고 순서를 <BR> 주는 <OL>의 경우에 순서를 아랍 숫자로 하지 않고 로마자로 <BR> 하고 싶으면 어떻게 해야 하나 하는 것이 이 란의 주제이다. 해<BR> 답은 다음과 같이 한다. 우선 각 아이템 앞에 붙는 원 모양을 네<BR> 모 같은 다른 모양으로 바꾸려면 다음과 같이 한다.<BR><BR> <ul><BR> <li type=disk>ONE<BR> <li type=circle>TWO<BR> <li type=square>THREE<BR> </ul><BR> 다음은 ordered list 즉 순서를 정해서 보여주는 리스트에서 순<BR> 서를 숫자로 나열하지 않고 A,B,C...로 하고 싶을 때 또는 a,b,c...<BR> 로 하고 싶을 때 쓴다.<BR><BR> <ol><BR> <li type=A>ONE-ONE<BR> <li>ONE-TWO<BR> </ol><BR> <ol><BR> <li type=a>ONE-ONE<BR> <li>ONE-TWO<BR> </ol><BR><BR> 이번에는 A,B,C .... 대신 로마자, I,II,III,IV,... 또는 I, ii,<BR> iii, iV,.. 로하고 싶을 때 다음과 같이 쓴다.<BR><BR> <ol><li type=I>ONE-ONE<BR> <li>ONE-TWO<BR> </ol><p><BR> <ol><li type=i>ONE-ONE<BR> <li>ONE-TWO<BR> </ol><p><BR> <ol><li type=1>ONE-ONE<BR> <li>ONE-TWO<BR> </ol><P><BR><BR> 다음은 임의로 시작을 5부터 시작해서 순서를 부여하고 싶을 <BR> 때 쓰는 예이며 독자들은 실제 수행하면 어떻게 결과가 나올지<BR> 추측해 보기 바란다.<BR><BR> <ol start=5><BR><BR> <li type=A>ONE-ONE<BR> <li>ONE-TWO<BR> <ol start=10><BR> <li>TWO-ONE<BR> <li type=i>TWO-TWO<BR> </ol></ol><BR><BR> 이번에는 이미지를 문서 안에 넣는데 <IMG SRC="externals/b<BR> r20t.gif" alt=+>과 같이 간단히 넣는 것이 아니라 <IMG align=to<BR> p SRC="externals/br20t.gif" alt=+>과 같이 align 옵션을 주어서 <BR> 이미지를 적재적소에 배치하는 방법을 설명하기로 한다.<BR> 이미지를 문서 안에 끼어 보여주는데 top,middle,bottom등은 그<BR> 림을 문자의 어느 부분에 맞추어서 보여줄 것인지를 정하게 되는<BR> 데, top으로 정하면 문자의 위쪽에 맞추기 되고 middle은 문자의 <BR> 중간에 그림을 맞추게 되고 bottom은 문자의 아래에 그림을 맞추<BR> 게 된다. 바로 뒤에 설명이 되겠지만 left,right역시 쓸 수 있는데 <BR> 이는 그림을 문자의 왼쪽에 배치할 것인지 오른쪽에 배치할 것인<BR> 지를 정하게 된다. 그리고 alt=(^_^)은 lynx와 같이 텍스트를 기반<BR> 으로 하는 브라우저에게 들어오는 경우에는 그림을 볼 수 없으니<BR> 까 대신에 (^_^)을 표시해 달라고 부탁하는 것이다. 아래 예는 ex<BR> tenals 디렉토리에 있는 f.gif를 여러 위치로 표시하는 예이다.<BR><BR> <IMG SRC="externals/f.gif" alt=(^_^) align=top> My Face!<P><BR> <IMG SRC="externals/f.gif" alt=(^_^) align=middle> My Face!<BR> <P> <IMG SRC="externals/f.gif" alt=(^_^) align=bottom> My Face!<BR> <P><BR> <IMG SRC="externals/f.gif" alt=(^_^) align=left>My Face!<br><BR> <IMG SRC="externals/f.gif" alt=(^_^) align=right>My Face!<b<BR> r><BR><BR> 위의 HTML 문장들로 웹 페이지를 만들면 다음과 같이 생긴<BR> 다. 순서는 위에 나와 있는 순서대로 보면 된다.<BR><BR> 그림 파일명 : 15image1.gif 그림 파일명 : 15image2.gif<BR> ---------- <그림 7> image.html 실행 결과 --------------<BR><BR> 이번에는 테이블을 그리는 방법으로 테이블을 감싸는 경계선도 <BR> 좀 볼륨이 있게 하고 싶고 그리고 안에 들어가는 아이템도 잘 배<BR> 치하고 싶을 때 어떻게 하는지를 설명한다. 우선 일단 테이블에 <BR> 경계선을 만들고 싶을 때는<BR><BR> <table border><BR> <tr><th>Food</th><th>Drink</th><th>Sweet</th><BR> <tr><td>A</td><td>B</td><td>C</td><BR> </table><BR><BR> 다음은 한 칸이 몇 개의 세부 사항으로 나뉘는 경우에 colspan <BR> 또는 rowspan을 써서 사용하는 경우이며 <그림 8>의 그림과 대<BR> 조해 보면 쉽게 알 수 있을 것이다.<BR><BR> <table border><BR> <tr><th colspan=3> Morning Menu</th> <tr><th>Food</th> <BR> <th>Drink</th> <th>Sweet</th><BR> <tr><td>A</td><td>B</td><td>C</td><BR> </table><BR> <table border><BR> <tr><th rowspan=3> Morning Menu</th><BR> <th>Food</th> <td>A</td></tr><BR> <tr><th>Drink</th> <td>B</td></tr><BR> <tr><th>Sweet</th> <td>C</td></tr><BR> </table><BR><BR> 경계선을 두껍게 하여 강한 느낌을 준다던가 테이블의 사이즈를 <BR> 가로 몇 세로 몇으로 지정하고 싶을 때 다음과 같이 쓰면 된다.<BR><BR> <table border=10> <tr><th>Food</th><th>Drink</th><th>Sweet</th><BR> <tr><td>A</td><td>B</td><td>C</td><BR> </table><BR> <table border width=170 height=100><BR> <tr><th>Food</th><th>Drink</th><th>Sweet</th><BR> <tr><td>A</td><td>B</td><td>C</td><BR> </table><BR><BR> 각 테이블 내의 엔트리 사이의 간격과 한 엔트리 셸의 크기를 <BR> 정하고 싶을 때 다음과 같이 하면 되고 <그림 8>에서 결과를 알 <BR> 수 있다.<BR><BR> <table border cellspacing=10><BR> <tr><th>Food</th><th>Drink</th><th>Sweet</th><BR> <tr><td>A</td><td>B</td><td>C</td><BR> </table><BR> <table border cellpadding=10><BR> <tr><th>Food</th><th>Drink</th><th>Sweet</th><BR> <tr><td>A</td><td>B</td><td>C</td><BR> </table><BR><BR> 다음은 테이블 내의 엔트리에서 값들이 배치되는 모양을 정하<BR> 는 예인데 독자들은 이번에는 어떻게 될지 예측해 보면 재미있을 <BR> 것이다.<BR><BR> <table border width=160><BR> <tr><th>Food</th><th>Drink</th><th>Sweet</th><BR> <tr><td align=left>A</td> <td align=center>B</td><BR> <td align=right>C</td><BR> </table><BR> <table border height=100><BR> <tr><BR> <th>Food</th><th>Drink</th><BR> <th>Sweet</th><th>Other</th><BR> <tr><td valign=top>A</td><BR> <td valign=middle>B</td><BR> <td valign=bottom>C</td><BR> <td valign=baseline>D</td><BR> </table><BR><BR> 다음 <그림 8>은 위의 table을 이용하여 HTML을 구성했을<BR> 때 보이는 그림들이다.<BR> 그림 파일명 : 15table1.gif 그림 파일명 : 15table2.gif<BR> 그림 파일명 : 15table3.gif 그림 파일명 : 15table4.gif<BR> --- <그림 8 > table.html 실행 결과 -------------------<BR><BR> 10. HTML에 대해서 더 공부해 보고 싶을 때<BR> HTML에 관련한 문서들은 다음의 장소에서 볼 수 있다. <BR><BR> Fill-out Forms<BR> http://www.ncsa.uiuc.edu<BR> /SDG/Software/Mosaic/Docs/fill-out-forms/overview.html<BR> Style Guides<BR> http://www.willamette.edu<BR> /html-composition/strict-html.html <BR> http://info.cern.ch/hypertext<BR> /WWW/Provider/Style/Introduction.html<BR> Other Introductory Documents<BR> http://www.ucc.ie/info/net/htmldoc.html<BR> http://melmac.harris-atd.com/about_html.html<BR> Additional References<BR> http://kuhttp.cc.ukans.edu/lynx_help/HTML_quick.html<BR> http://info.cern.ch/hypertext/WWW/MarkUp/MarkUp.html<BR> http://info.cern.ch/hypertext/WWW/MarkUp/SGML.html<BR> http://www.hal.com/~connolly/drafts/html-design.html<BR><BR> 그리고 요즘 VRML(virtual reality modelling language)라는 말<BR> 이 심심치 않게 들리는데 가상 현실(virtual reality)을 인터네트에<BR> 서 제공하기 위해서 만든 언어이며 관심 있는 독자는 다음을 참<BR> 조하기 바란다.<BR><BR> http://www.cts.com/~template/WebSpace<BR> http://www.lightside.com/~dani/cgi/VRML-index.html<BR><BR> 그림 파일명 : vrml.gif<BR> <그림 9> VRML에 대한 참고 사이트<BR><BR> 다음은 보너스로 웹 사이트 접속이 어려울 때 네트워크 상황을 <BR> 알아내는 법에 대해서 몇 가지 명령어를 소개한다. 만약에 접속<BR> 이 현재 어렵다는 것을 미리 안다면 유용할 것이다.<BR>----------------------------------------------------------------------------<BR><BR></div> <!-- System - START --> <!-- System - END --> </article> <div data-react-app="Supporters"></div> <aside class="content-aside cont_blog_info"> <h3 class="screen_out">블로그 정보</h3> <div class="box_blog_info"> <strong class="tit_blog"><a href="/m">솔아로미</a></strong> <p class="desc_blog"><a href="/m">어떠한 일이 있어도 꿈과 용기를 잃지 말자! 그래, 네 꿈을 펼쳐라.</a></p> <div data-react-app="Subscribe"></div> <div class="thumb_g"> <a href="/m"> <img src="https://img1.daumcdn.net/thumb/S56x56/?scode=mtistory2&fname=https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png" class="thumb_profile" alt="프로필 사진"> </a> </div> </div> </aside> <div data-react-app="CategoryRelated"></div> <div data-react-app="SearchKeyword"></div> <div data-react-app="Popular"></div> <footer class="doc-footer"> <div class="inner_foot"> <div class="wrap_etc"><strong class="screen_out">문의안내</strong> <ul class="list_etcinfo"> <li><a href="https://tistory.com/m" id="tistory-home-link" class="link_txt">티스토리</a></li> <li><a href="#" id="login-link" class="link_txt">로그인</a></li> <li><a href="https://cs.kakao.com/requests?service=175&locale=ko" class="link_txt">고객센터</a></li> </ul> </div> <p class="desc_g">티스토리는 카카오에서 <span class="ico_heart">사랑</span>을 담아 만듭니다.</p> <small><a href="https://www.kakaocorp.com/" target="_blank" class="link_corp">© Kakao Corp.</a></small> </div> </footer> </div> </section> </main> </div> <div class="bottomBar" data-react-app="BottomBar"></div> <div class="StoryBanner" data-react-app="StoryBanner"></div> <!-- 공지사항 본문 --> <!-- 보호글 본문 --> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"974711-2328","customProps":{"userId":"0","blogId":"974711","entryId":"2328","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"2328","entryTitle":"[HTML] WWW이 기가 막혀! (7)-HTML문서(3)","entryType":"POST","categoryName":"내발자국[동호회]","categoryId":"449181","serviceCategoryName":null,"serviceCategoryId":null,"author":"706554","authorNickname":"松巖","blogNmae":"솔아로미","image":"","plink":"/m/2328","tags":[]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/polyfills-legacy.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index-legacy.js" nomodule="true" defer="true"></script> </body> </html>