Download presentation
Presentation is loading. Please wait.
1
06장. <A> 태그로 하이퍼링크 설정하기
링크의 핵심 상대경로 타겟(Target)을 효과적으로 설정하는 법 위치까지 찾아주는 책갈피 사용하기 그림에 링크 또는 이미지맵 설정하기 모든 종류의 파일 링크하기
2
href target name title <A> 태그로 하이퍼링크 설정하기 – 하이퍼링크 설정
3
<A> 태그로 하이퍼링크 설정하기 – 하이퍼링크 설정
[사용 예] <a href=" <a href="photo.jpg"><img src=”photo.gif”></a> <a </a> <a href="totoro.mp3">영화 토토로 OST</a> <a href="totoro.avi">영화 토토로 예고편</a> <a href="alzip.exe">압축의 최강자 알집</a> <a href="samp.htm">예제</a> <a href="samp/samp.htm">예제</a> <a href="../../samp.htm">예제</a> <a href="#top">위로</a> <a href="samp.htm#chap1">예제1</a>
4
<A> 태그로 하이퍼링크 설정하기 – 하이퍼링크 설정
[하이퍼링크 가능한 파일의 종류] 웹 브라우저 안에서 보이는 파일들 htm, html, gif, jpg, txt 플러그인 프로그램이 자동 연결되는 파일들 wav, mid, mp3, asf, avi, swf, wmv 플러그인 프로그램이 자동 연결되지 않아 해당 프로그램을 설치해야만 실행 가능한 파일들 ra, rm, ram, mov 실행되지 않고 저장되는 파일들 exe, zip, hwp, doc, xls, ppt, psd
5
<A> 태그로 하이퍼링크 설정하기 – 하이퍼링크 설정
[<body> 태그의 문자색 관련 속성] 속성 설명 기본 값 text 일반 문자색 black link 한 번도 방문하지 않은 링크 문자색 blue vlink 한 번이라도 방문한 링크 문자색 purple alink 누르는 순간에 변하는 링크 문자색 red
6
<A> 태그로 하이퍼링크 설정하기 – 절대경로와 상대경로
<a href=” 미디어 도서검색</a> 상대경로 작업 폴더 <a href=”samp.htm”>예제</a> 상위 폴더 <a href=”../../samp.htm”>예제</a> 하위 폴더 <a href=”sample/chap1/samp.htm”>예제</a>
7
<A> 태그로 하이퍼링크 설정하기 – 대상 창 설정법
[target의 속성] 예약어 4가지 _blank _self _top _parent 사용자 정의 창 이름 new, newWin, menu 기본 대상 창 변경 <base target="_blank">
8
책갈피 설정 하이퍼링크 설정 <A> 태그로 하이퍼링크 설정하기 – 책갈피 [책갈피 설정에 필요한 설정 2가지]
찾아갈 곳에 name을 설정한다. <a name="top"></a> 하이퍼링크 설정 문서내의 특정 위치 또는 다른 문서의 특정 위치로 이동할 수 있게 하이퍼링크 설정한다. <a href="#top">위로</a> <a href="samp1.htm#chap1">예제1-1</a>
![책갈피 설정 하이퍼링크 설정 <A> 태그로 하이퍼링크 설정하기 – 책갈피 [책갈피 설정에 필요한 설정 2가지]](http://slidesplayer.org/slide/14010245/86/images/8/%EC%B1%85%EA%B0%88%ED%94%BC+%EC%84%A4%EC%A0%95+%ED%95%98%EC%9D%B4%ED%8D%BC%EB%A7%81%ED%81%AC+%EC%84%A4%EC%A0%95+%3CA%3E+%ED%83%9C%EA%B7%B8%EB%A1%9C+%ED%95%98%EC%9D%B4%ED%8D%BC%EB%A7%81%ED%81%AC+%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0+%E2%80%93+%EC%B1%85%EA%B0%88%ED%94%BC+%5B%EC%B1%85%EA%B0%88%ED%94%BC+%EC%84%A4%EC%A0%95%EC%97%90+%ED%95%84%EC%9A%94%ED%95%9C+%EC%84%A4%EC%A0%95+2%EA%B0%80%EC%A7%80%5D.jpg "찾아갈 곳에 name을 설정한다. <a name= top ></a> 하이퍼링크 설정. 문서내의 특정 위치 또는 다른 문서의 특정 위치로 이동할 수 있게 하이퍼링크 설정한다. <a href= #top >위로</a> <a href= samp1.htm#chap1 >예제1-1</a>")
9
이미지맵에서 제공하는 맵 종류로는 rect, circle, poly 세가지가 있다.
<A> 태그로 하이퍼링크 설정하기 – 이미지맵 이미지맵 기본 문법 <img src="그림 파일의 전체 경로" usemap="#맵 이름"> <map name="맵 이름"> <area shape="맵의 종류" coords="좌 표값" href="링크될 주소" alt=”설명툴 팁”> </map> 이미지맵에서 제공하는 맵 종류로는 rect, circle, poly 세가지가 있다.
10
<A> 태그로 하이퍼링크 설정하기 – 이미지맵
[이미지맵 사용 예] <img src="map.gif" width="540" height="336" border="0" usemap="#ImageMap1"> <map name="ImageMap1"> <area shape="poly" coords="384, 27, 367, 115, 408, 216, 466, 148, 490, 94, 454, 47, 413, 24" href=" target="_blank" alt="제주도 동부 여행 정보"> <area shape="circle" coords="103, 158, 77" href=" target="_blank" alt="제주도 서부 여행 정보"> <area shape="rect" coords="180, 189, 311, 268" href=" target="_blank" alt="서귀포시 여행 정보"> </map>
Similar presentations
![- 1 - 사용설명서 – 전자세금계산서 (EBANK36524) [ 회계 ]. - 2 - 1. ERPM3 에서 입력한 매출세금계산서 ( 계산서 포함 ) 를 전자적으로 발행합니다. ( 전자세금계산서발행 메뉴 ) ** 국세청전송 - 2009 년 11 월 1 일부터 시범운영.](/40/11034502/big_thumb.jpg "- 1 - 사용설명서 – 전자세금계산서 (EBANK36524) [ 회계 ]. - 2 - 1. ERPM3 에서 입력한 매출세금계산서 ( 계산서 포함 ) 를 전자적으로 발행합니다. ( 전자세금계산서발행 메뉴 ) ** 국세청전송 - 2009 년 11 월 1 일부터 시범운영.>")
![Contents > 1 3 사용자 4 5 web #1 web #11 WAS09 WAS10 NAS (콘텐츠 저장, 1TB) 검색엔진 (와이즈넛) [ EBS수능 DMZ Zone ] [ EBS수능 IN Zone ] CDN (Streaming) CDN (Download)](/40/11034589/big_thumb.jpg "Contents > 1 3 사용자 4 5 web #1 web #11 WAS09 WAS10 NAS (콘텐츠 저장, 1TB) 검색엔진 (와이즈넛) [ EBS수능 DMZ Zone ] [ EBS수능 IN Zone ] CDN (Streaming) CDN (Download)>")
