KH/HTML
# 5 하이퍼링크
오늘의 진
2022. 9. 7. 12:14
Hyper Link (하이퍼링크)
: 글자나 그림에 하이퍼링크를 만들어 다른 웹 사이트로 연결하거나 이미 만들어진 HTML 문서를 연결한다.
[ 형식 ]
1. 글자에 하이퍼링크 만들기
<A href = "URL" target ="링크 방법"> 글내용 </A>
2. 그림에 하이퍼링크 만들기
<A href = "URL" target ="링크 방법"> <IMG src="URL"></A>
- URL
: 하이퍼링크로 연결할 HTML문서, 그림, 다른 파일의 경로를 지정 . 필수요소
- target
: 다른 브라우저 창이나 프레임셋에 위치한 프레임을 지정하여 지정한 URL이 나타나게 한다.(기본값 : _self)
[target 종류 ]
| _blank | 새로운 웹 브라우저 창에 하이퍼링크로 연결한 문서가 나타나게 한다. |
| _parent | 프레임 문서의 구조에서 하이퍼링크로 연결한 문서를 현재 프레임이 포함된 상위 프레임창에 나타나게 한다. |
| _top | 프레임 문서 구조라 하더라도 웹 브라우저 전체 창 형태로 하이퍼링크로 연결한 문서를 나타나게 한다. |
| _self | 현재의 웹 브라우져 창에 하이퍼링크로 연결할 문서를 나타나게한다. |
- 프레임 이름
: 프레임 구조의 문서에서 지정한 프레임 창에 하이퍼링크로 연결한 문서를 보여준다.
- blank & _blank
_blank : 클릭을 할때마다 새로운 창이 열린다 (티슈를 뽑아 내듯이 새로운 창이 계속 생성된다.)
blank : 처음 누르면 새창이 뜬다. 그리고 나서 다시 누르면 처음 띄웠던 창을 이용한다
예를들어 새창으로 다음을 띄우고 그창에서 무언가를 검색해서 다른 창으로 넘어가도
만약 다시 blank를 누르면 처음 띄워서 사용중이던 창이 다시 다음 창으로 변경된다.
타겟이 없을때는 기본값인 _self이다. 눌럿을때 새창이 열리는 것이 아니라 현재 창에서 이동된다.
사용예시
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title> 글자와 그림에 하이퍼링크 만들기 </title>
</head>
<body>
1. 글자에 다른 웹 사이트로 이동하는 하이퍼링크 만들기<br>
<A href ="http://daum.net" target ="_blank" > 다음 사이트</A><br>
2. 그림에 다른 웹 사이트로 이동하는 하이퍼링크 만들기 <br>
<A href ="http://daum.net">
<img src ="../images/banana.png" border="0"></A><br>
3. 글자에 html_11.html로 이동하는 하이퍼링크 만들기<br>
<A href ="../html_11/ht_26.html">어제만든 HTML</A><br>
4. 그림에 html_12.html로 이동하는 하이퍼링크 만들기<br>
<A href ="../html_11/ht_20.html">
<img src="../images/cat.png"/></A>
</body>
</html>
링크에 색상 넣기
| link | alink | vlink |
| 한번도 누르지 않은 링크 | 누르는 동안 | 한번이라도 눌린적 있는 링크 |
(예)
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title> 하이퍼링크 색상 수정 </title>
</head>
<body link="#ff0000" alink="#00ff00" vlink ="#0000ff">
글자의 하이퍼 링크 속성 link,alink,vlink 모두 검정색 밑줄 <br>
<A href ="http://www.daum.net" target ="_blank">다음 다음</A><br>
그림에 하이퍼 링크 테두리는 검정색 <br>
<A href ="http://www.nate.com" target ="_blank">
<img src ="../images/amazon.png" border="10">
</A><br>
</body>
</html>
한번도 안누르면 : 빨강
누르는 동안 : 연두
한번이라도 눌리면 : 파랑
글자인경우 글자색이 변화하고
그림인 경우 그림 테두리 색이 변화
책갈피 만들기
[ 형식 ]
<A href= "URL_A" > 이름적기</A> // 이름적기를 클릭하면 해당 URL로 이동
<A name="URL_A"> 이름적기 </A> // name ="URL_A" 라고 하여서 이곳을 A로 지정함
책갈피 만들기1
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title> 책갈피 이용하기 1 </title>
</head>
<body leftmargin="100" topmargin="10"
background ="../images/back_blue.gif">
<!--top 으로 책갈피 위치 지정 -->
<A NAME ="top"><img src = "../images/logo_kan.gif" width ="210" height ="80"></A>
<!--상단 글자 메뉴 부분 - 책갈피로 하이퍼링크 지정 -->
<p align ="right">
<A href ="#a">검은 곡선이 있는...</A>
<A href ="#b">검은 정방형의 안에서</A>
<A href ="#c">빨간 달걀 모양</A>
</p>
<!--첫번째 그림 설명-->
<A NAME ="a">>> 검은 곡선이 있는 ...</A>
<p><img src ="../images/kan01.jpg" width="300" height ="287" border ="5"></p>
<p>
<Font size ="3" face ="바탕">
칸단스키의 예술에 있어서 무대상의 추상이 확고하게 성립된 것을 보여준 역작이다.<br>
불규칙적인 작고 큰 선이 교차하면서 불가사의한 형을 안고 있으며, <br>
색채들은 형체를 안고 울려 퍼져 나오고 있다.<br>
화면 구성의 중심은 명제가 말해 주듯이 검은곡선이다.<br>
칸딘스키는 곡선에 관하여 점,선,면에서 임의의 곡선에 주어진 자유자재인<br>
악센트 한계는 똑똑하지 않으면서도 확식히 존재하는것. 선에 대해서도 일체가<br>
대비 여하에 달려 있다는 것은 점의 경우와 다름이 없다. 절대적인 것도 상대 적인것에 의해서,<br>
이것에 대해서는 이론상으로 이러쿵 저러쿵 논하는 것보다 차라리 실제상으로 <br>
훨씬 정확하게 말해주고 있다고 설명하고 있다.<br>
</font>
</p>
<!--두번째 그림 설명-->
<A name ="b">>> 검은 정방형의 안에서 </A>
<p><img src="../images/kan02.jpg" width="300" height ="287", border ="5"><p>
<Font size ="3" face ="바탕">
칸단스키의 예술에 있어서 무대상의 추상이 확고하게 성립된 것을 보여준 역작이다.<br>
불규칙적인 작고 큰 선이 교차하면서 불가사의한 형을 안고 있으며, <br>
색채들은 형체를 안고 울려 퍼져 나오고 있다.<br>
화면 구성의 중심은 명제가 말해 주듯이 검은곡선이다.<br>
칸딘스키는 곡선에 관하여 점,선,면에서 임의의 곡선에 주어진 자유자재인<br>
악센트 한계는 똑똑하지 않으면서도 확식히 존재하는것. 선에 대해서도 일체가<br>
대비 여하에 달려 있다는 것은 점의 경우와 다름이 없다. 절대적인 것도 상대 적인것에 의해서,<br>
이것에 대해서는 이론상으로 이러쿵 저러쿵 논하는 것보다 차라리 실제상으로 <br>
훨씬 정확하게 말해주고 있다고 설명하고 있다.<br>
칸단스키의 예술에 있어서 무대상의 추상이 확고하게 성립된 것을 보여준 역작이다.<br>
불규칙적인 작고 큰 선이 교차하면서 불가사의한 형을 안고 있으며, <br>
색채들은 형체를 안고 울려 퍼져 나오고 있다.<br>
화면 구성의 중심은 명제가 말해 주듯이 검은곡선이다.<br>
칸딘스키는 곡선에 관하여 점,선,면에서 임의의 곡선에 주어진 자유자재인<br>
악센트 한계는 똑똑하지 않으면서도 확식히 존재하는것. 선에 대해서도 일체가<br>
대비 여하에 달려 있다는 것은 점의 경우와 다름이 없다. 절대적인 것도 상대 적인것에 의해서,<br>
이것에 대해서는 이론상으로 이러쿵 저러쿵 논하는 것보다 차라리 실제상으로 <br>
훨씬 정확하게 말해주고 있다고 설명하고 있다.<br>
</font>
</p>
<!--세번째 그림 설명-->
<A name ="c">>> 빨간 달걀 모양 </A>
<p><img src="../images/kan03.jpg" width="300" height ="287", border ="5"><p>
<Font size="3" face="바탕">
칸단스키의 예술에 있어서 무대상의 추상이 확고하게 성립된 것을 보여준 역작이다.<br>
불규칙적인 작고 큰 선이 교차하면서 불가사의한 형을 안고 있으며, <br>
색채들은 형체를 안고 울려 퍼져 나오고 있다.<br>
화면 구성의 중심은 명제가 말해 주듯이 검은곡선이다.<br>
칸딘스키는 곡선에 관하여 점,선,면에서 임의의 곡선에 주어진 자유자재인<br>
악센트 한계는 똑똑하지 않으면서도 확식히 존재하는것. 선에 대해서도 일체가<br>
대비 여하에 달려 있다는 것은 점의 경우와 다름이 없다. 절대적인 것도 상대 적인것에 의해서,<br>
이것에 대해서는 이론상으로 이러쿵 저러쿵 논하는 것보다 차라리 실제상으로 <br>
훨씬 정확하게 말해주고 있다고 설명하고 있다.<br>
칸단스키의 예술에 있어서 무대상의 추상이 확고하게 성립된 것을 보여준 역작이다.<br>
불규칙적인 작고 큰 선이 교차하면서 불가사의한 형을 안고 있으며, <br>
색채들은 형체를 안고 울려 퍼져 나오고 있다.<br>
화면 구성의 중심은 명제가 말해 주듯이 검은곡선이다.<br>
칸딘스키는 곡선에 관하여 점,선,면에서 임의의 곡선에 주어진 자유자재인<br>
악센트 한계는 똑똑하지 않으면서도 확식히 존재하는것. 선에 대해서도 일체가<br>
대비 여하에 달려 있다는 것은 점의 경우와 다름이 없다. 절대적인 것도 상대 적인것에 의해서,<br>
이것에 대해서는 이론상으로 이러쿵 저러쿵 논하는 것보다 차라리 실제상으로 <br>
훨씬 정확하게 말해주고 있다고 설명하고 있다.<br>
칸단스키의 예술에 있어서 무대상의 추상이 확고하게 성립된 것을 보여준 역작이다.<br>
불규칙적인 작고 큰 선이 교차하면서 불가사의한 형을 안고 있으며, <br>
색채들은 형체를 안고 울려 퍼져 나오고 있다.<br>
화면 구성의 중심은 명제가 말해 주듯이 검은곡선이다.<br>
칸딘스키는 곡선에 관하여 점,선,면에서 임의의 곡선에 주어진 자유자재인<br>
악센트 한계는 똑똑하지 않으면서도 확식히 존재하는것. 선에 대해서도 일체가<br>
대비 여하에 달려 있다는 것은 점의 경우와 다름이 없다. 절대적인 것도 상대 적인것에 의해서,<br>
이것에 대해서는 이론상으로 이러쿵 저러쿵 논하는 것보다 차라리 실제상으로 <br>
훨씬 정확하게 말해주고 있다고 설명하고 있다.<br>
</font>
<br<br><br /><br /></p>
<!--하단 메뉴 부분 - 맨 위로 자동 이동 책갈피로 하이퍼 링크 지정-->
<p align ="raght">
<A href ="#top">위로</A>
</body>
</html>
책갈피만들기2
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title> 책갈피2 </title>
</head>
<body leftmargin ="100" topmargin ="10"
background ="../images/back_blue.gif">
<img src ="../images/logo_kan.gif" width ="210",height ="80">
<br><br><br><br><br>
<!--ht_2_8.html의 a,b,c 책갈피 위치로 자동 이동 되는 하이퍼 링크 만들기-->
<UL>
<li><A href ="ht_2_8.html#a">검은색 곡선이 있는... </A>
<li><A href ="ht_2_8.html#b">검은 정방형의 안에서 </A>
<li><A href ="ht_2_8.html#c">빨간 달걀 모양 </A>
</UL>
</body>
</html>