[목적]
홈페이지에 <a> 태그를 이용하여 하이퍼링크를 거는 방법을 익힌다.
[이론]
다른 페이지로 이동을 위한 하이퍼링크는 <a> 태그를 사용하며 그 형식은 다음과 같다.
<a href=”경로/파일명”>문자열</a>
<a href=”프로토콜://서버이름/경로/파일명”>문자열</a>
위 형식에서 문자열은 브라우저상에 표시되는 내용으로 이 내용을 클릭하면 ‘<a>’ 태그의 ‘href’ 속성에 정의된 페이지로 이동한다. 첫 번째 형식은 현재 페이지와 동일한 서버에 존재하는 페이지로 이동할 경우 주로 사용하며, 두 번째 형식은 다른 서버의 페이지로 이동할 경우 사용하는 형식으로 프로토콜과 서버이름이 추가되었다. 일반적으로 ‘<a>’ 태그에서 자주사용하는 프로토콜은 ‘http’ 또는 ‘https’ 이다.
다음 예제프로그램 ‘exam-09-02.html’을 살펴보자.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>하이퍼링크</title>
</head>
<body>
<a href="./exam-09-03.html">exam-09-03.html</a>
</body>
</html>
exam-09-02.html 접속 결과
exam-09-02.html에서 exam-09-03.html을 클릭했을 때 이동한 화면
위 예제를 브라우저로 접속하면 ‘exam-09-03.html’이 브라우저 화면에 출력되고 하이퍼링크가 걸린다. 이 영역에 마우스를 이동하여 클릭하면 ‘<a>’ 태그의 ‘href’의 값 ‘./exam-09-03.html’에 의해 ‘exam-09-03.html’ 페이지로 이동한다. 여기서 ‘.’은 파일 ‘exam-09-02.html’과 동일한 디렉터리(폴더)를 의미한다.
아래 예제 ‘exam-09-03.html’은 동일한 서버의 다른 경로에 존재하는 페이지로의 하이퍼링크를 건 경우를 나타낸다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>하이퍼링크</title>
</head>
<body>
<a href="../php/test.php">test.php</a>
</body>
</html>
exam-09-03.html 접속 결과
exam-09-03.html에서 test.php를 클릭했을 때 이동한 화면
위 예제의 ‘href’ 값 ‘../php/test.php’에서 ‘..’은 상위 디렉터리를 의미하며 그 기준은 현재 페이지 ‘exam-09-03.html’가 저장된 디렉터리가 된다. 따라서 하이퍼링크는 ‘exam-09-03.html’이 저장된 디렉터리의 상위 디렉터리에 존재하는 ‘php’ 디렉터리 내의 ‘test.php’로 이동하도록 설정됐다.
마지막 다른 서버의 페이지로 이동하도록 하는 하이퍼링크 예제 ‘exam-09-04.html’을 살펴보자.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>하이퍼링크</title>
</head>
<body>
<a href="http://www.ansan.ac.kr">안산대학교</a>
</body>
</html>
exam-09-04.html 접속 결과
exam-09-04.html에서 안산대학교를 클릭했을 때 이동한 안산대학교 홈페이지
다른 서버의 페이지로 이동을 위해서는 ‘href’ 값에 프로토콜 및 서버의 이름을 포함한 주소를 설정하면 가능하다. 위 예제에서 ‘http://www.ansan.ac.kr’로 설정되었기에 안산대학교 홈페이지로 이동하게 된다.