클릭하세요 HTML+ 웹디자인

클릭하세요 HTML+웹디자인 5장 하이퍼 링크

목 차 1. 하이퍼 링크 기본 2. 이미지, 다른 홈페이지를 링크로 이용하기 3. 이미지 맵 만들기

1. 하이퍼 링크 기본 • HTML 문서의 연결(링크) • (<a href="링크할 곳의 파일명">텍스트</a>) [예제 : ht5-1.html] <html> <head><title>문서간의 연결</title></head> <body> <a href = "link.html">문서 이동</a> </body> </html> ▶ link.html <html> <head><title>문서간의 연결</title></head> <body bgcolor=lightblue> 문서간의 이동을 성공적입니다. </body> </html>

2. 링크의 색상 지정하기 (<body link="색상“ vlink="색상” alink="색상“></body>) [예제 :ht5-2.html] <html> <head><title> 링크 색상 변경</title></head> <body link="orange" alink="red" vlink="blue"> 링크의 색상 지정 <hr> <center> <a href="link2.html">link</a> <a href="alink.html">alink</a> <a href="vlink.html">vlink</a> </center> <hr> </body> </html> ▶ link2.html <HTML> <HEAD><TITLE> link </TITLE></HEAD> <BODY> link link는 연결 기능을 구현해 놓고 사용자가 선택하지 않은 상태의 색상을 지정한다. </BODY> </HTML> ▶ alink.html <HTML> <HEAD><TITLE> alink </TITLE></HEAD> <BODY> alink alink는 마우스로 누르고 있는 상태에서의 링크 색상을 지정한다. </BODY> </HTML> ▶ vlink.html <HTML> <HEAD><TITLE> vlink </TITLE></HEAD> <BODY> vlink vlink는 한 번이라고 방문했던 상태의 색상을 지정한다. </BODY> </HTML>

3. 다른 홈 페이지로 연결(<a href="http://주소">텍스트</a>) [예제 : ht5-3.html] <html> <head><title> 다른 홈페이지 이동</title></head> <body > 검색 엔진<hr> <center> <a href="http://kr.yahoo.com">야&nbsp&nbsp&nbsp&nbsp후 </a> <a href="http://www.naver.com">네&nbsp&nbsp이&nbsp&nbsp버</a> <a href="http://www.altavista.co.kr">알타비스타</a> </center> <hr> </body > </html>

2 이미지, 다른 홈페이지를 링크로 이용하기 • HTML 문서 - 가장 보편적인 하이퍼링크입니다. • (2) 다른 홈페이지 - 다른 홈페이지의 URL을 입력하면 하이퍼링크를 이용하여 이동이 가능합니다. • (3) 텍스트 - 하이퍼링크를 사용하면 같은 페이지 내에 다른 텍스트로 이동하는 것이 가능합니다. 이를 앵커라 하며 문서가 너무 길 경우 책갈피 역할을 합니다. • (4) 이미지, 사운드, 동영상 클립 - href 속성의 값으로 이미지나 사운드, 그리고 동영상 파일의 명칭을 입력하면 브라우저가 연결된 프로그램을 이용하여 이를 재생하게 됩니다. • (5) 파일 - 파일의 명칭을 연결하면 다운로드받게끔 할 수 있습니다. • (6) email - e-mail 주소를 입력하여 자신에게 e-mail을 보낼 수 있는 링크를 만들 수 있습니다. • (7) 기타링크 - 파일전송 프로토콜(ftp)이나 유즈넷(usenet)에 있는 파일이나 문서를 연결할 수 있습니다.

1. 이미지로 링크 (<a href="링크할 곳의 파일명"><img src="이미지 파일명"></a> [예제 :Ht5-4.html] <html> <head><title>이미지를 하이퍼링크로 사용</title></head> <body bgcolor=black text=lightblue> <center> 제 홈페이지에 오신 것을 환영합니다. 아래의 버튼을 누르시면 홈으로 입장합니다. <a href="index.html"> <img src="enter.gif" border=0> </a> </center> </body> </html> ▶ index.html <html> <head><title>이미지를 하이퍼링크로 사용</title></head> <body bgcolor=black text=lightblue> <center> HTML과 JAVA SCRIPT을 공부할 수 있는 사이트입니다. 열심히 하세요. </center> </body> </html>

2. 이 메일을 보내는 하이퍼링크 [예제 : Ht5-5.html] <html> <head> <title> 이 메일 보내기</title> </head> <body > 메일을 보내주세요<hr> <center> <a href="mailto:pretty@daum.net"> 여기를 클릭하면 저에게 메일을 보낼 수 있습니다. </a> </center> </body > </html>

3. 현재 HTML 문서의 지정된 위치로 링크 설정 (<a name="name"></a>, <a href="#name"></a>) <a name="num03"> </a> 꽃 김춘수 내가 그의 이름을 불러 주기 전에는  잊혀지지 않는 하나의 의미(눈짓)가 되고 싶다. </body> </html> [예제 : Ht5-6.html] <html> <head><title>앵커의 사용</title></head> <body> 명 시 모 음 <hr> <center> <a href="#num01">접시꽃 당신 </a> <a href="#num02">딸에게</a> <a href="#num03">꽃 </a> </center> <hr> <a name="num01"> </a> 접시꽃 당신 도종환 옥수수 잎에 빗방울이 나립니다  나는 당신의 손을 잡고 당신 곁에 영원히 있습니다 <a name="num02"> </a> 딸에게 김용화 너는 지상에서 가장 쓸쓸한 사내에게 날아온 천상의 선녀가 하룻밤 잠자리에 떨어뜨리고 간 한 떨기의 꽃

4. 절대 경로와 상대 경로 [예제 : ht5-7.html] <html> <head> <title> 절대 경로, 상대 경로 </title></head> <body > <a href = "C:\HTML\5장\link.html"> 절대 경로<hr> </a> <a href = "link.html"> 상대 경로<hr> </a> </body > </html>

5. 음악, 동영상 파일 링크하기 [예제 : Ht5-8.html] <html> <head> <title>음악, 동영상 파일 링크하기</title> </head> <body bgcolor=black text=lightblue> <center> 즐겨 듣는 음악 <hr> <a href="all_for_love_badams.mid"> All for love badams </a> </center> </body> </html>

6. 압축파일, 실행 파일 링크하기 [예제 :Ht5-9.html] <html> <head> <title>압축파일, 실행 파일 링크하기</title> </head> <body bgcolor=black alink=lightblue> <a href="game.alz">다운 받기</a> <hr> </body> </html>

7. 링크 결과를 다른 창에 열기 [예제 : Ht5-10.html] <html> <head> <title>링크 결과를 다른 창에 열기</title></head> <body bgcolor=black alink=lightblue> <a href = "link.html" target="_blank"> 문서 이동</a> <hr> </body> </html>

8.내 홈페이지 홍보하기 [예제 : Ht5-11.html] <html> <head> <title>홈페이지 홍보하기</title> </head> <body bgcolor=black alink=lightblue> <a href = http://cafe.daum.net/SYJCOM target="_blank"> 제 홈페이지에 방문해 주세요... </a> <hr> <a href = "http://www.yes24.com/Goods/FTGoodsView.aspx?goodsNo=1475326&CategoryNumber=001001003011013"> 서평 예쁘게 써주면 한턱 왕창 냅니다. </a> 책이 참 예뻐요. 내용은 더 훌륭하고요(그렇지요? 쌍용 .NET 83기) <hr> </body> </html>

3. 이미지 맵 만들기 1. 이미지 맵을 만드는 태그 <img src="이미지 파일명" usemap="#이름"> <map name="이름"> <area> </area> </map>

2 사각형으로 이미지 맵 만들기/ 3 원형으로 이미지 맵 만들기

클릭하세요 HTML+ 웹디자인