내발자국[동호회]
[HTML] WWW이 기가 막혀! (11)-HTML문서(6)
松巖
1996. 3. 18. 04:36
------------------------------------
제 목 : [9510]www가 기가막혀(12)
------------------------------------
열한 번째 예제
어떤 웹 사이트를 가보면 자신의 웹에 대한 만족도를 상.중/하
로 매겨 달라고 즉 라디오 버튼으로 제공하는 사람들도 있지만
대개는 다음 예에서 보는 바와 같이 글자를 쓸 수 있는 흑판을
제공해서 사람들이 의견을 제시할 수 있도록 제공하고 있다. 이
러한 흑판을 웹에서는 textarea라고 부르며 와 같이 줄과
열의 수를 지정할 수 있다.
----------- EXAMPLE11.HTML -----------------------
Fill-Out Form Example #11
This is another fill-out form example, with multiline text entry
areas.
---------------------------------------------
그림 파일명 : 14ex11.gif 그림 파일명 : 14ex11r.gif
----- <그림 12> example11.html 수행한 예 ---------------
열두 번째 예
뒤에 sensitive map이라는 구조를 보겠지만 CGI를 이용해서 화
면에서 마우스가 클릭한 좌표를 알아낼 수 있다. 일단 좌표를 알
아내면 좌표를 이용하여 버튼의 위치에 해당하면 원하는 action
을 할 수 있게 된다. 아무튼 와 같이 쓰면 externals
/smarr-small.gif파일을 읽어서 화면에 표시하고 마우스로 클릭하
면 그 위치를 서버의 프로그램에게 넘겨주게 된다.
-------- EXAMPLE12.HTML --------------------------
Fill-Out Form Example #12
This is another fill-out form example, with image maps.
Fill-Out Form Example w/ Hidden Elements (#13)</<BR> TITLE><BR> <H1>Fill-Out Form Example w/ Hidden Elements (#13)</H1><BR> This is a very simple fill-out form example. <P><BR> <FORM METHOD="POST" ACTION=<BR> "http://casaturn.kaist.ac.kr/cgi-bin/post-query"><BR> A single text entry field goes here: <INPUT NAME="entry"> <BR> <P><BR> There are two "hidden" form elements which are not displayed <BR> located here:<BR> <INPUT TYPE="hidden" NAME="hidden element#1" VALUE="<BR> blah"><BR> <INPUT TYPE="hidden" NAME="hidden element#2" VALUE="<BR> foobar"><BR> <p><BR> These are created via TYPE="hidden" and can contain arbitrar<BR> y <BR> NAME/VALUE pairs. These can easily be used to maintain a <BR> form<BR> of "state" in multiple connections with a server. <p><BR> To submit the query (including hidden data), press this button: <BR> <INPUT TYPE="submit" VALUE="Submit Query">. <P><BR><BR> 그림 파일명 : 14test13.gif 그림 파일명 : 14test13b.gif <BR> ----- <그림 14> example13.html 수행한 예 ---------------<BR> 2 버튼만 누르면(sensitive map) 되게 만들기<BR> 이번에는 imagemap이라는 CGI 프로그램을 이용하는 예를 살<BR> 펴보기로 한다. imagemap은 사용자가 브라우저에게 보여지는 화<BR> 면을 보고 그것이 만약 메뉴판이라고 했을 때 메뉴를 마우스로 <BR> 클릭하면 원하는 action을 취하도록 도와주는 프로그램이다. 예를 <BR> 들어 내가 만들고 싶은 것은 다음과 같다.<BR><BR> 그림 파일명 : 14test6.gif<BR> <그림 15> project.html을 실행한 예 <BR> 그럼 이렇게 만들기 위해서 해야 할 것을 단계별로 나누어 설<BR> 명하기로 한다. 일단 다음과 같이 HTMl문서를 작성한다. 물론 <BR> 열 때는 netscape http://casaturn.kaist.ac.kr:8000/internet/project/<BR> project.html과 같이 하면 된다.<BR><BR> 단계 1: HTML문서 작성<BR><BR> ----------- PROJECT.HTML -------------------------<BR> <!-- this is comment --><BR> <HTML><BR> <HEAD><BR> <TITLE> This is Project Test Home Page in KAIST </TITL<BR> E> <a name = "sc"> </a><BR> <H1> Project test Home PAGE </H1><BR> </HEAD><BR> <BODY><BR> <a href="http://casaturn/cgi-bin/imagemap/test2"> <BR> <img src="pppd.gif" ismap> </a><BR> <h1> POST QUERY TEST </h1><BR> <FORM method = "post" ACTION=<BR> "http://casaturn.kaist.ac.kr/cgi-bin/post-query"><BR> Note that it has no default value. <P><BR> TEXT entry : <INPUT TYPE="TEST" NAME=<BR> "firstinput" VALUE="original"> <P><BR> checkbox entry : <INPUT TYPE="checkbox" NAME=<BR> "firstcheck" VALUE="check"> <P><BR> To submit the query, press this button:<BR> <INPUT TYPE="submit" VALUE="Submit Query">. <P><BR> </FORM><BR> <h1> Image QUERY test </h1><BR> <FORM method = "post" ACTION=<BR> "http://casaturn.kaist.ac.kr/cgi-bin/post-query"><BR> <INPUT TYPE="image" SRC="test.gif"><BR> <H1> Get Query test </H1><BR> </FORM><BR> <form method = "get" action = <BR> "http://casaturn.kaist.ac.kr:8000/cgi-bin/query"><BR> TEXT entry : <INPUT TYPE="TEST" NAME="text"> <P><BR> PASSWD entry : <INPUT TYPE="PASSWORD" NAME="password"> <P><BR> checkbox entry : <INPUT TYPE="checkbox" NAME="check<BR> "> <P><BR> radio entry : <INPUT TYPE="radio" NAME="radio"> <P><BR> <select name="menu"><BR> <option> first option<BR> <option> second option<BR> </select> <P><BR> To submit <INPUT TYPE="submit" VALUE="Submit Query<BR> ">. <P><BR> </FORM><BR> </BODY><BR> </HTML><BR> ----------------------------------------------------<BR> 위에서 http://casaturn/cgi-bin/imagemap/test2의 의미는 casat<BR> urn에 http 프로토콜로 접속하여, /cgi-bin/imagemap이라는 CGI <BR> 프로그램을 실행하는데 파라미터는 test2로 하라는 의미이다.<BR><BR> 단계 2: pppd.gif라는 그림 만들기<BR> 위와 같이 메뉴판을 디자인하는 경우에 가장 좋은 것은 필자의 <BR> 견해로는 아도브 포토샵을 쓸 것을 권장한다. <BR><BR> 단계 3: 지도를 만든다.<BR> 그림 한 장에서 어떤 부분을 누르면 어떤 것을 부르고 하는 것<BR> 을 만들려면 어떤 부분은 어떻고 하는 것을 지정해 주는 파일이 <BR> 있어야 하는데, 그 파일을 map 파일이라고 하며 보통 testmap.m<BR> ap의 이름을 가지게 된다. 그렇다면 위에서 보면 http://casaturn/<BR> cgi-bin/imagemap/test2에서 test2로 지정하였는데 먼 곳에서 접<BR> 속하면 먼저 시스템 설정 파일 중에서 imagemap.conf를 찾게 되<BR> 며 그 파일에는 다음과 같이 적혀 있다.<BR><BR> ----------------------------------------------------<BR> #test<BR> test : /mm/gunhan/httpd/htdocs/project/testmap.map<BR> test2: /mm/gunhan/httpd/htdocs/internet/project/testmap.map<BR> #test<BR> ----------------------------------------------------<BR> 즉 test2로 들어오게 되면 map파일은 /mm/gunhan/httpd/htdocs/i<BR> nternet/project/testmap.map을 쓰라고 지정하는 것이다. 이제 /m<BR> m/gunhan/httpd/htdocs/internet/project/testmap.map을 보면<BR><BR> ----------------------------------------------------<BR> default /internet/project/none.html # charming woman<BR> rect /internet/project/woman.html 77,105 267,294<BR> # intro section <BR> rect /internet/project/intro.html 308,109 506,175<BR> # service section<BR> rect /internet/project/service.html 313,239 505,290<BR> # register section<BR> rect /internet/project/register.html 311,346 498,397<BR> # just tricky way<BR> circle /internet/project/area.html 152,359 100,100<BR> ----------------------------------------------------<BR> 로 되어 있는데 의미는 쉽게 이해가 갈 테지만 예를 들어 rect /i<BR> nternet/project/woman.html 77,105 267,294의 의미는 그림에서 왼<BR> 쪽 위 가장자리가 77,105이고 오른쪽 밑의 위치가 267,294인 사각<BR> 형 안에서 마우스를 클릭하면 /internet/project/woman.html이라<BR> 는 HTML파일을 불러라 라는 의미이다. <BR> circle /internet/project/area.html 152,359 100,100은 그 지정 영<BR> 역 중심점이 152,359이고, 가로, 세로 반지름이 100,100인 타원형 <BR> 지점 중에서 마우스를 클릭하면 /internet/project/area.html를 부<BR> 르라는 의미이다. 이중에서 아무 위치도 아닌 곳에서 클릭되면, d<BR> efault에 의해 /internet/project/none.html이 불려지게 된다. 이제 <BR> 다시 그림을 새로 그려서 즐겨 보기 바란다. 이제는 그럼 이런 C<BR> GI 프로그램을 어떻게 만드는지에 대해서 궁금할 것이고 서두에 <BR> 설명되었듯이 CGI 프로그램은 사용자에게서 입력을 받아서 자신<BR> 이 만든 정보를 HTML로 보내는 것이 주임무이기 때문에 UNIX<BR> 에서는 표준 입력(stdin)을 받아서 표준 출력(stdout)으로 HTML <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-2331","customProps":{"userId":"0","blogId":"974711","entryId":"2331","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"2331","entryTitle":"[HTML] WWW이 기가 막혀! (11)-HTML문서(6)","entryType":"POST","categoryName":"내발자국[동호회]","categoryId":"449181","serviceCategoryName":null,"serviceCategoryId":null,"author":"706554","authorNickname":"松巖","blogNmae":"솔아로미","image":"","plink":"/m/2331","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>
제 목 : [9510]www가 기가막혀(12)
------------------------------------
열한 번째 예제
어떤 웹 사이트를 가보면 자신의 웹에 대한 만족도를 상.중/하
로 매겨 달라고 즉 라디오 버튼으로 제공하는 사람들도 있지만
대개는 다음 예에서 보는 바와 같이 글자를 쓸 수 있는 흑판을
제공해서 사람들이 의견을 제시할 수 있도록 제공하고 있다. 이
러한 흑판을 웹에서는 textarea라고 부르며 와 같이 줄과
열의 수를 지정할 수 있다.
----------- EXAMPLE11.HTML -----------------------
Fill-Out Form Example #11
This is another fill-out form example, with multiline text entry
areas.
---------------------------------------------
그림 파일명 : 14ex11.gif 그림 파일명 : 14ex11r.gif
----- <그림 12> example11.html 수행한 예 ---------------
열두 번째 예
뒤에 sensitive map이라는 구조를 보겠지만 CGI를 이용해서 화
면에서 마우스가 클릭한 좌표를 알아낼 수 있다. 일단 좌표를 알
아내면 좌표를 이용하여 버튼의 위치에 해당하면 원하는 action
을 할 수 있게 된다. 아무튼 와 같이 쓰면 externals
/smarr-small.gif파일을 읽어서 화면에 표시하고 마우스로 클릭하
면 그 위치를 서버의 프로그램에게 넘겨주게 된다.
-------- EXAMPLE12.HTML --------------------------
Fill-Out Form Example #12
This is another fill-out form example, with image maps.
그림 파일명 : 14ex12.gif 그림 파일명 : 14ex12r.gif
----- <그림 13> example12.html 수행한 예 ---------------
열세 번째 예제
이번에는 입력을 받을 때 어떤 입력 요소는 감추고 입력을 하
고 싶을 때의 예를 보이기로 한다. ME="hidden element#1" VALUE="blah">와 같이 쓰면 사용자에
게는 안 보이지만 실제로 서버측의 프로그램에게 전해지게 된다.
하지만 netscape에 있는 view source라는 메뉴를 고르게 되면 쉽
게 알 수 있다.
-------- EXAMPLE13.HTML --------------------------