태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

[왕초보 홈페이지 만들기 강좌 ①] HTML이란 무엇인가?
http://blog.hostit.co.kr/82

[왕초보 홈페이지만들기 강좌 ②] 나모 웹 에디터란 무엇인가?
http://blog.hostit.co.kr/83

[왕초보 홈페이지 만들기 강좌 ③] 기본적인 HTML 문서의 구조
http://blog.hostit.co.kr/105

[왕초보 홈페이지 만들기 강좌 ④] HTML 태그의 기초를 익혀보자! 기본 HTML 태그
http://blog.hostit.co.kr/118

[왕초보 홈페이지 만들기 강좌 ⑤] 동방신기 사진 넣기, 이미지 넣기, 글자 정렬, 문장 정렬

http://blog.hostit.co.kr/130





안녕하세요~

인터넷을 하다 보면, 평소에는 화살표 모양이던 마우스 커서가

어떤 그림이나 글 위에 갖다대면 손 모양으로 변하죠?

그 그림이나 글을 클릭하면 다른 페이지로 이동하게 되구요.

 

 

 

 

 

이렇게 웹 문서를 다른 웹 문서나 그림, 파일 등과 연결하는 것을 ‘링크’라고 합니다.

오늘은 홈페이지 만들기 강좌의 꽃이라고 할 수 있는 이 ‘링크’를 다루어볼 예정인데요,

‘HTML’이라는 단어 자체에 ‘Link(연결하다)’가 들어가 있듯이

링크는 웹 페이지에서 빼놓을 수 없는 중요한 요소입니다.

 

 

 

 

그럼 아래와 같은 두 개의 HTML 문서를 같은 폴더에 두고,

이 둘을 연결해 보도록 하겠습니다.

 

 

 

 

여기’라는 글씨에  hostit.html을 연결하기 위해서

<a href=”주소”>여기</a>라는 태그를 이용합니다.

 

 

 

 

 

index.html을 웹 브라우저에서 열어보면 ‘여기’라는 글씨가 파랗게 되어 있고,

이 위에 마우스 커서를 갖다대면 커서 모양이 변하게 됩니다.

 

 

 

 

‘여기’란 글씨를 누르면 hostit.html 문서로 이동하게 되지요.

그러면 이 문서에서 index.html로 이동하게 하려면 어떻게 해야 할까요?

 

 

 

 

페이지 아래에 ‘홈으로’라는 글자를 추가하고,

그 글자에 index.html로 돌아가는 링크를 걸어봅시다.

 

 

 

 

웹 브라우저에서 hostit.html 문서를 열어 보면

‘홈으로’라는 글자가 보라색으로 보입니다.

이 글자에 링크가 걸린 index.html은 이미 방문했던 문서이기 때문에

이를 표시하기 위해 보라색으로 표시되는 것입니다.

 

 

 

 

‘홈으로’를 누르면 index.html로 다시 돌아옵니다.

 

 

 

 

이번에는 같은 폴더에 있는 웹 문서가 아닌, 외부의 홈페이지로 링크를 걸어 볼까요?

‘추천 사이트’에 원하는 페이지를 입력하여 링크를 걸어봅시다.

 

 

 

 

그러면 아래와 같이 링크 표시가 생깁니다.

 

 

 

 

‘호스트잇’이란 글자를 누르면 링크가 걸린 http://www.hostit.co.kr로 이동합니다.

 

 

 

 

그러면 이번엔 메일 주소로 링크를 걸어 볼까요?

mailto 태그를 사용하면, 그 링크를 눌렀을 때 바로 링크 건 주소로

메일을 보낼 수 있게 됩니다.

 

 

 

 

위와 같이 html 문서를 작성하고 나면 아래와 같이 나타납니다.

 

 

 

 

 

‘여기’를 클릭하면 자신의 컴퓨터에 있는 메일 전송 프로그램이 실행되어

그 주소로 메일을 보낼 수 있게 됩니다.

 

 

 

 

이렇게 해서 하이퍼 링크의 기본적인 것들에 대해서 알아보았습니다~

이 태그는 다양하게 응용되어서 쓰이며, 웹 페이지들을 연결하는 핵심적인 태그이기 때문에

반드시 잘 익혀두세요~!

그럼 다음 시간에 또 뵙겠습니다 ^^

 

 

 

 www.hostit.co.kr

Posted by 호스트잇