|
하이퍼링크란 윈도우의 도움말 같은 형태로 문서안에 특정
문자열이나 이미지를 마우스로 클릭했을 때, 관련 된 다른 문서를 연결해 주는 것을 말 합니다. 하이퍼링크에서 적용할 수 있는 형식은 내
홈페이지에서 다른 홈페이지로 연결하거나 다른 문서로 연결하는 방법 또는 자신의 홈페이지 않에서 연결하는 방법 등이 있지요.
<A>...</A>
태그
- 기능 : 링크 지정
- 속성 : HREF="html문서" ;
"그림파일" ; "URL"",
NAME="레이블 이름"
TARGET="프레임 이름"
A는 "Anchor(닻)"의 약자로 <A>태그 사이의 문자들은 다른 일반 문자와 색깔이 다르며, 보통 밑줄이 그어져 있지요.
또 마우스 포인터를 그 문자위에 갖다 놓으면손 모양의 아이콘으로 바뀝니다.
링크는 내 컴퓨터 안의 다른 HTML 파일연결과 내부
문서연결, 웹의 다른 문서, 그리고 E-MAIL 링크시킬 수 있습니다.
1
다른 문서로 연결하기
현재 작성하고 있는 문서에서 임의의 다른 문서로 연결하기 위한 방법으로 다음과 같은 형식으로
HTML태그를 사용하면 됩니다.
<A href="문서파일명"> 다른 문서 연결하기
</A>
링크시킬 문서파일명을 넣어 주면 되는데, 연결할 문서가 현재 문서와 다른 폴더에 있거나 다른 드라이브에 있다면 문서파일명 앞에
경로명을 넣어 주어야 합니다.
경로명에는 상대경로와 절대경로 두 가지가 있는데, 상대경로는 현재파일을 기준으로 한 경로명이고,
절대경로는 현재 드라이브에 자신의 HTML 파일이 있는 곳까지의 경로명을 모두 써주어야 하는 것입니다.
그럼 하이퍼링크 문서를 만들어
볼까요?
|
<HTML> |
결과확인에서 하이퍼링크 문자를
클릭하면 새로운 창으로 나타 나지요?.
이것은... 위 예제를 자세히 보세요. target="_blank"가
보이죠?
target은 문서를 보여주는 방법을 규정합니다. 전 화면에 보여주느냐, 새창으로 보여주느냐 등..
○ _SELF
: 링크된 새로운 문서를 현재의 프레임에 보여준다.
○
_PARENT : 현재 프레임의 상위 프레임을 보여준다.
○ _TOP
: 화면의 모든 프레임을 지우고 화면 전체에 보여준다.
○
_BLANK : 현재 창을 그대로 두고, 새로운 창을 열어
보여준다. 위로
2
문서안에서 연결하기
같은 페이지 내에서 보여주고 싶은 부분에 이름을 주어 그 이름을
링크시키는 것입니다.
한 화면에 너무 많은 내용이 들어가면 스크롤바를 계속 내리면서 보아야 하기 때문에 조금 불편하지요.
이런 경우
스크롤바를 이용할 필요없이 쉽게 이동할 수 있는 데, 필요한 부분에 NAME을 지정해 두고 그 이름을 선택하면 바로 그 문서의 특정위치로
이동하게 되는 것 이지요.
지금 여러분이 공부하시고 있는 이 문서에서도 아래와 같은 태그를
사용했습니다.
|
<HTML> |
문서 연결하기(2)
|
지난 강좌에서는 다른
웹문서로 하이퍼링크 시키는 방법과 문서내부에서 하이퍼링크시키는 방법을 공부했습니다. 여기서는 다른 사이트로 하이퍼링크시키는 방법과 E-mail을
링크하는 방법을 알아 보도록 하지요.
3. 다른 사이트로
연결하기
연결하고 싶은 사이트의 주소(URL)만 넣어 주면 됩니다. 간단하지요? 그럼 실습해
볼까요?
|
<HTML> |
결과확인을 클릭해 보세요. "야후코리아(클릭하세요)"에 밑줄이 그어지면서 하이퍼링크가 만들어
졌죠?
"야후코리아(클릭하세요)"글씨위에 마우스를 이동시키면 손표시가 나타나지요. 거기서 클릭하시면 이제 야후사이트로 이동을
하게 되는 것 이지요.
4.
E-mail 연결하기
E-mail을
링크시켜 브라우저의 메일 기능을 이용하는 것 이지요. 어떤 특정인의 E-mail 계정을 링크시키면 그 사람이 수신인으로 지정된
E-mail 전용프로그램(아웃룩익스프레스)이 화면에 나타납니다.
그 메일작성화면에서 메일을 작성해서 지정된 수신인에게 메일을 보낼 수
있지요.
예를 들어 love@abcd.co.kr이란 가상의 E-mail주소로
링크시킨다면 다음과 같이 메일 주소를 삽입시켜 주면 됩니다.
|
<HTML> |
이미지를 이용한 문서연결하기
|
지난강좌에서 하이퍼링크
태그를 공부했습니다만, 이번에도 계속 이어서 웹 문서에 이미지 삽입하는 방법과 이미지로 하이퍼링크 연결하는 방법에 대해서 배워 보도록
하지요.
1. 이미지
삽입하기
| <IMG>태그 - 기능 : 그림 삽입 - 속성 : SRC="", ALIGN=정렬방식, ALT="설명문", WIDTH="", HEIGHT="", BORDER=n HSPACE=n, VSPACE=n, ISMAP, USEMAP |
| <IMG SRC="그림파일명"> | - 경로가 다르면 상대경로를 넣어준다. |
| <IMG ALT="설명문"> | - 이미지는 글자로다 로딩되는 속도가 느리고 브라우저에 따라 이미지를 보이지 않게 하는 기능이 있기 때문에 그림이 나올 부분에 설명을 붙여 주면 이용자 입장에서 도움이 된다. |
| <IMG BORDER=n> | - 이미지 테두리선 굵기지정. 0은 테두리 안보이게, 1은 테두리 보이게. |
| <IMG WIDTH=n> | - 이미지 가로폭 지정. 단위는 픽셀. |
| <IMG HEIGHT=n> | - 이미지 세로폭 지정. (이미지 제작시 크기를 조정하고 삽입할때는 width와 height를 지정하지 않는게 좋다) |
| <IMG ALIGN="정렬방식"> | - left, center, right를 줌으로써 왼쪽,가운데,오른쪽으로 정렬할 수 있다. |
그러면 나뭇잎 모양의 이미지를 한번
삽입해 볼까요?
이미지 파일명만 넣어 주면 됩니다. 실습해 보도록 하지요.
.
|
<HTML> |
2. 이미지
링크하기
그림파일 링크도
문서연결하는 방법과 같은데 파일명만 그림파일로 바꾸면 됩니다. 그림파일은 JPG나 GIF로 만들어진 파일만 가능합니다. 메모장에 다음내용을
입력해 보세요.
| <HTML> <HEAD> <TITLE> 이미지 링크하기 </TITLE> </HEAD> <BODY > <A HREF="leaf.gif">이미지 링크하기...</A> </BODY> </HTML> |
삽입한 이미지에 하이퍼링크를 설정해 볼까요? 연결할 URL이나 문서파일명을 넣어 주면 됩니다.
| <HTML> <HEAD> <TITLE> 이미지 링크하기 </TITLE> </HEAD> <BODY > <A HREF="html.htm><IMG SRC="leaf.gif"></A> </BODY> </HTML> |
'IT_Programming > HTML&CSS' 카테고리의 다른 글
| Frame 태그 사용하기 (0) | 2006.04.24 |
|---|---|
| 테이블 만들기 (0) | 2006.04.24 |
| BODY 태그의 활용 (0) | 2006.04.24 |
| 기본태그 요약정리 (0) | 2006.04.24 |
| 글꼴 사용하기 (0) | 2006.04.24 |