☞ http://blog.hostit.co.kr/82
[왕초보 홈페이지만들기 강좌 ②] 나모 웹 에디터란 무엇인가?
☞ http://blog.hostit.co.kr/83
[왕초보 홈페이지 만들기 강좌 ③] 기본적인 HTML 문서의 구조
☞ http://blog.hostit.co.kr/105
☞ 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 문서를 작성하고 나면 아래와 같이 나타납니다.
‘여기’를 클릭하면 자신의 컴퓨터에 있는 메일 전송 프로그램이 실행되어
그 주소로 메일을 보낼 수 있게 됩니다.
이렇게 해서 하이퍼 링크의 기본적인 것들에 대해서 알아보았습니다~
이 태그는 다양하게 응용되어서 쓰이며, 웹 페이지들을 연결하는 핵심적인 태그이기 때문에
반드시 잘 익혀두세요~!
그럼 다음 시간에 또 뵙겠습니다 ^^
