02. Hyper Link

2017. 2. 20. 14:54HTML/예제

1. HyperLink 예제

 

<!DOCTYPE html>

<html lang="kr">

<head>

<meta charset="UTF-8">

<title>앙큼한유채 - Hyper Link</title>

</head>

<body>

<font size="8" color="blue"><b>하이퍼링크 예제입니다.</b></font><br>

<a href="http://yuchae.tistory.com/"> 현재창에 하이퍼링크 띄우기</a><br>

<a href="http://yuchae.tistory.com/" target="_blank"> 새 창에 하이퍼링크 띄우기</a><br>

<a href="http://yuchae.tistory.com/" target="_blank" title="앙큼한유채"> 마우스를 올려두고 있으면 설명출력</a><br>

</body>

</html>



2. 실행화면

   -1) 현재 실행되고 있는 창에 하이퍼링크 출력화면


   -2) 현재창이 아닌 새로운 창에 하이퍼링크 출력


   -3) 마우스를 올려두고 있으면 설명창이 출력


4. 해설


1. <body>

   -> 바디의 시작 위치를 알려줌


2. <font size="8" color="blue"><b>하이퍼링크 예제입니다.</b></font><br>

   -> 폰트의 사이즈가 8이고 글자의 색이 파랑색인 본 예제의 설명을 출력하고 한줄 띄움


3. <a href="http://yuchae.tistory.com/"> 현재창에 하이퍼링크 띄우기</a><br>

   -> 문자를 클릭하면 연결된 하이퍼링크를 현재창에 출력


4. <a href="http://yuchae.tistory.com/" target="_blank"> 새 창에 하이퍼링크 띄우기</a><br>

   -> 문자를 클릭하면 연결된 하이퍼링크를 새 창에 출력


5. <a href="http://yuchae.tistory.com/" target="_blank" title="앙큼한유채"> 마우스를 올려두고 있으면 설명출력</a><br>

   -> 마우스를 문자위에 올려두고 있으면 설명이 출력


6. </body>

   -> 바디의 종료 위치를 알려줌

 



'HTML > 예제' 카테고리의 다른 글

7. 픽셀 아트  (0) 2017.08.22
<button>태그 링크  (0) 2017.03.22
03. Table  (0) 2017.02.20
01. Hello, World!  (0) 2017.02.20