태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.

[왕초보 홈페이지 만들기 강좌 ①] 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 호스트잇

댓글을 달아 주세요

  1. 민간인 2010.05.03 18:20  댓글주소  수정/삭제  댓글쓰기

    많이 배우고 갑니다!

  2. louis vuitton backpack 2012.12.30 19:37  댓글주소  수정/삭제  댓글쓰기

    http://www.hermesoutletx.com/ hermes lado cuando hay ventaja para encontrar un ejemplo favorable, sólo podemos analizar el otro lado va a decir lo que el este para ver si está en manos de quién.La implicación es decir, si la tecnología de clonación está en las manos de Hermes, es el peligro para la sociedad, en sus manos, es para el beneficio del público.

    http://www.hermesoutletx.com/ bolsos hermes Cada vez que oigo esta frase, no puede esperar a que el propio acto. La observación no es nueva, pero todavía hay chico descarado tranquilamente un complejo de inferioridad lentamente esta diciendo a cabo también el pensamiento complaciente era ingenioso mundo.

    http://www.hermesoutletx.com/ hermes profundamente siento que los dos últimos días que no había esperanza, pero el hermes sigue siendo muy ansioso por ir a Hong Kong, y de hecho no tiene que ir a Hong Kong, en la medida que se basa en una razón formal para salir de este lugar, hermes esté muy contento.

    http://www.hermesoutletx.com/ http://www.hermesoutletx.com/