본문 바로가기

HTML5 하이퍼링크 설정

131ZIPDAN 2017. 5. 23.
반응형

HTML5 하이퍼링크 설정

 

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>하이퍼링크 태그</title>
</head>
<body>
<a href="h.html">헤더 태그 페이지로 이동</a><br/>
<a href="http://naver.com">네이버 이동</a><br/>
<a href="http://daum.net">다음 이동</a><br/>

<!-- 상대경로 링크 지정 -->
<a href="./h.html">상대경로 이동</a><br/>

<!-- 절대경로 링크 지정 -->
<a href="/first/ch01html/comment.html">절대경로 이동</a><br/>

<!-- 아이디 링크 지정 -->
<a href="#p2">아이디로 2번째 문단으로 이동</a><br/>
<p>
이날 낮에 서울로를 거닌 시민들의 공통된 반응도 '좁고 덥다'는 것이었다. 공중정원을 표방하는 서울로에는 꽃과 나무 2만4058주가 심어진 콘크리트 화분 645개가 놓여 있다. 다리 폭은 10.3m, 화분의 최대 지름은 4.8m다. 개장 당일 인파가 몰려 한꺼번에 수천명이 화분 사이 협소한 길을 떠밀리듯 지나갔다. 서울로 중간쯤인 목련무대 인근에서는 폭이 15m 정도로 넓어지지만, 화분이 많아 답답한 느낌이었다.
</p>
<p id="p2">
'살아 있는 식물도감을 선보이겠다'던 시의 의욕과는 달리 화분 속 식물 대부분은 뜨거운 햇볕 아래 축 처져 있거나 생기가 없어 보였다. 이모(44·은평구)씨는 "공중정원이라더니 말라 있는 식물만 있고 정원의 느낌이 없어 아쉽다"고 말했다.
</p>
</body>
</html>

a 태그의 href 속성


− 절대 경로 http ://naver.com - 네이버의 메인 페이지 /animal.jpg - 현재 웹 사이트 최상위 위치의 animal.jpg 파일

− 상대 경로 animal.jpg - 웹 페이지가 있는 폴더의 animal.jpg 파일 image/animal.jpg - 웹 페이지가 있는 폴더에

 포함된 image 폴더의 animal.jpg 파일 ../animal.jpg - 웹 페이지가 있는 폴더의 상위 폴더에 있는 animal.jpg 파일

− 아이디 경로 #name - id 속성이 name인 태그의 위치로 이동

− 메일 경로 mailto : 1234@naver.com – 해당 주소로 메일 전송

 

<하이퍼링크 태그 실행>

<헤더 태그 페이지 이동>

<아이디로 2번쨰 문단 이동>

 

 

반응형

'Programming' 카테고리의 다른 글

HTML5 글자 태그  (0) 2017.05.23
HTML5 목록 태그  (0) 2017.05.23
HTML5 페이지 기본 구조  (0) 2017.05.22
ORACLE 게시판 기본 활용 sql query  (0) 2017.05.19
JAVA 흐름제어문 (break문, continue문, return문)  (1) 2017.04.28

관련글

댓글

티스토리툴바