728x90
이미지 클릭하면 다른 이미지 뜨기
이미지 클릭하면 특정 싸이트 뜨기
이미지나 글씨 클릭하면 이미지나 싸이트, 영상 뜨기(iframe)
오디오,비디오 파일
시간,진행도 보여주는 컨트롤바, 반복재생, 자동재생
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0_practice</title>
</head>
<body>
<img src="sample/image/wangja01.PNG" usemap="#imageMap">
<map name="imageMap">
<area shape="circle" coords="0, 0, 200, 400" href="https://www.naver.com" target="_blank">
<area shape="circle" coords="200,0,400,400" href="https://www.google.com" target="_blank">
</map>
<hr>
<audio src="sample/audio/song.mp3" controls> song </audio>
<audio src="sample/audio/major.mp3"controls autoplay loop> major </audio>
<video src="sample/video/bear.mp4" controls> 곰1</video>
<video src="sample/video/bear.mp4" controls loop autoplay preload="metadata"> 곰1 - preload</video>
<video src="sample/video/bear.mp4" preload="auto" controls> 곰3</video>
<ul>
<li><a href="../index_HTML.html"></a>글씨 내용 넣는 곳</li>
</ul>
<a href="https://www.w3schools.com" target="_blank">
<img src="sample/image/wangja02.PNG" width="20%" height="20%">
</a>
<a href="sample/image/wangja02.PNG" target="wang">글씨클릭하면 이미지나옴 : iframe 사용</a>
<iframe width="20%" height="15%" name="wang"></iframe>
<a href="sample/image/city1.png" target="imgout">
<img src="sample/image/wangja01.PNG" width="30%" height="25%"><br>
</a>
<a href="https://www.w3schools.com" target="w3s"> w3<br>
<img src="sample/image/wangja03.PNG" width="200px" height="175px">
</a>
</body>
</html>
728x90
반응형
'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글
| [1일1코딩][SQL][ORACLE] 권한삭제, 계정삭제 (0) | 2022.04.10 |
|---|---|
| [1일1코딩][SQL][ORACLE] 계정 생성 및 권한부여 (0) | 2022.04.05 |
| [1일1코딩][HTML] <table> 관련 : border,caption,figure // 보더 지정 & 미지정 차이 (0) | 2022.04.03 |
| [1일1코딩][HTML] 속성 type=" " (0) | 2022.04.02 |
| [1일1코딩][SQL][Oracle] SELECT, FUCTION, GROUP BY, HAVING, JOIN 100제 문제 풀이 (0) | 2022.04.01 |