글씨에 하이퍼링크
a 태그
<html>
<head>
<title> 태그 마스터하기 </title>
</head>
<body link="blue" vlink="red" alink="darkgreen">
<a href="http://www.netmarble.net"> 넷마블에서 게임을 즐깁니다!</a>
</body>
</html>클릭해보실 수 있습니다 ->
이미지에 하이퍼링크
img 태그를 a 태그로 감싸줍니다.
작업 폴더 하위에
home.html
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2 aligh="center">이미지에 하이퍼링크 걸기</h2>
<p align="center">
<a href="https://namu.wiki/w/%EA%B3%A0%EC%96%91%EC%9D%B4"
<img src="https://www.shutterstock.com/ko/image-photo/funny-british-shorthair-cat-portrait-looking-2097266809">
</a>
</p>
</body>
</html>
고양이 이미지를 클릭하면 고양이의 나무위키 페이지가 뜨는 태그를 만들어보았습니다.
이런 식으로 웹 존재하는 사진 링크를 걸어주어도 되지만,
본인이 이미 가지고있는 이미지를 걸어주고 싶다면
home.html과 같은 폴더 안에 이미지 파일을 넣어주고 파일명.확장자 를 img의 src 속성에 넣어주면 됩니다.
아래 이미지를 클릭해보세요!
728x90
'WORKS > Html CSS' 카테고리의 다른 글
| [HTML] input 태그: text, password / textarea 태그 / submit , reset button (0) | 2022.02.24 |
|---|---|
| [HTML] checkbox 체크박스, radio 라디오, dropdown list 드롭다운리스트 (0) | 2022.02.24 |
| [HTML] 문서에 줄긋기 hr 태그 / p 태그 문단 나누기 / pre 태그 내가 쓴 그대로 (0) | 2022.02.24 |
| [HTML] html 태그 01: 들여쓰기: 공백문자 / blockquote 자동 들여쓰기 (0) | 2022.02.13 |
댓글