[HTML] LINK(링크)로 다양한 표현을..

내발자국[동호회]

[HTML] LINK(링크)로 다양한 표현을..

松巖 1996. 3. 24. 04:00

■월간 PC월드
------------------------------------------------
제 목 : [96년 3월호] <연재/홈페이지만들기>
10가지의 추가 TAG을 이용해 만든 홈페이지
-------------------------------------------------
링크와 다양한 효과를 이용한 홈페이지 만들기

-------------------------------------------
이번 호에는 링크 기능을 이용해 다른 홈페이지 또는 다른 HTML 문서로
도 연결해 보고, 간단한 그래픽 유틸리티를 사용해 좀 더 화려하고 다양한
형태의 문서를 제작해 보도록 하자.

홈페이지를 좀 더 예쁘게 만들기 위해 페인트 샵과 같은 그래픽 프로그램을
사용하는 것은 필수다.
그러나 무조건 예쁜 홈페이지를 만들기 위해서 그림을 남발하는 것은 좋은
홈페이지라 할 수 없다. 자신의 홈페이지를 방문하는 사람들을 마냥 기다리
게 하는 것도 예의는 아니다. 작아도 분명히 표시할 수 있는 조그만 아이콘
을 사용하거나 그림의 용량을 최소한으로 해주는 JPG 파일 포맷을 사용하
는 등 주의를 기울여야 한다. 또한 백그라운드의 색을 조정해 홈페이지와
홈페이지에 배치된 그림이 잘 융화되도록 조정해 주어야 한다.

이 홈페이지는 문서의 구성도 하나의 문서가 아니라 여러 개의 문서를 사용
하고 있으므로 문서의 이름과 파일의 위치를 잘 고려해야 한다.

HTML문서의 내용
---------------
{{

라이의 홈페이지

라이의 홈페이지에 오신 것을 환영합니다

이번호에서 배우게 될 연결 기능들

 
--에디터에서 지정된 문장의 형태를 유지하는 TAG으로 예를 들면  뒷부분의 TAB을
 이상에서도 탭을 사용한 것과 같이 할 수 있는 TAG입니다.

와 쌍으로 사용
됩니다.

그림과 연결하기

라이의 모든 것
--hong.jpg를 누르면 hong1.htm이라는 문서로 이동합니다.

글자와 연결하기

천리안 사이버스페이스로 가는
길
--"천리안 사이버스페이스로 가는길"이라는 문자에 "http://cyberworld.dacom.co.
kr".

한 문서 내에서 다른 위치로 이동하기

한 문서 안에서 이동하기
--전체 문서 중의 "문서"라고 이름을 준곳으로 이동하게 한 경우입니다.

메일 보내기

--mailto: 뒤에 쓰여진 Email주소로 편지를 보냅니다.

궁금하신 사항이 있으면 그림을 클릭하세요. 메일을 보낼 수 있습니다.

위에서 한문서 안으로 이동하기를 누르면 이곳으로 이동합니다.

--앞에서 배운 한문서 사이에서의 다른 곳으로 이동하기에 이용된 "문서"라는 위
치를 .

}}
{{
}}
위의 예제는 지난 호에 작성한 홈페이지를 개선해 2개의 HTML 문서를 사
용, 작성한 것으로 기본 문서 이 외에 지난 호에 작성해 두었던 문서를 별
도의 문서로 지정해 사용한 것이다.
이번 호에는 기본적인 문서의 포맷에서 더 나아가 새롭게 등장한 TAG과
링크에 관련된 내용을 위주로 다루고 있다. 사실 링크 기능은 가장 많이 사
용되는 HTML 문서의 대표적인 특징이라 할 수 있다.

링크시키기
----------
문서를 연결시키려면 라는 TAG을 사용하는데, 문서를 연결하기
위해서는 여러 가지 형태가 있다. 예를 들면 그림에 링크를 시킬 수도 있고,
또는 원하는 문자에 문서를 링크시킬 수도 있다. HREF는 Hypertext
REFerence의 약자로 와 를 배우
게 된다.

*그림과 연결하기
본문 내용 중 사람 사진에 링크 시켜서 그 사람에 대한 내용을 보기 위해
이동하게 한 경우인데 그림 hong.jpg를 누르면 hong1.htm 문서로 이동하라
는 의미이다.
예 :

*글자와 연결하기
글자에 링크 시키는 것은 더욱 간단하다. 위의 예제에 "사이버스페이스로
연결하기"라고 되어 있는 문자가 파란색 밑줄로 표시되어 있는데 글자 위로
이동하면 마우스 커서가 손가락 모양으로 바뀐다. 이러한 형태의 문자는 링
크 돼 있다는 것을 표시한다. 그것을 누르면 데이콤의 사이버스페이스 홈페
이지로 이동하게 된다.

(그림 2) h2.bmp
예 : 사이버스페이스로 연결하
기

*한 문서 내에서 다른 위치로 이동하기
한 문서에서 같은 문서 내의 다른 지점으로 이동하기 위해서는 다음과 같은
준비가 필요하다. 이동하기를 원하는 지점에 연결 그림이나 글자를 지정해
야하고, 이동할 지점에 name이라는 TAG으로 위치를 정의해 주어야 한다.
(그림 1)에서 '한 문서 내에서 다른 위치로 이동하기'라는 문자를 누르면 화
면에는 보이지 않지만 아래쪽에 name이라는 이름으로 정의된 부분으로 이
동하게 된다.

예 : 한 문서 안에서 이동하기
한 문서 안에서 이동하는 방법

*메일 보내기
자신의 홈페이지를 방문한 사람들이 자신에 메시지를 남기게 하고 싶을 때
바로 Email을 보낼 수 있도록 해줄 수 있다. 다음과 같이 지정해 주면 지정
된 그림을 눌러 (그림 3)과 같은 화면이 나타나고 홈페이지의 주인에게 메
일을 보낼 수 있게 된다. mailto:email어드레스를 적어주면 된다.

(그림 3) h3.bmp

이제 홈페이지를 만들어서 올린다고 해도 손색없도록 만들 수 있을 것이다.
이제 본격적으로 다양한 홈페이지를 만들어 보도록 하자.

라이의 홈페이지