728x90
반응형
[ex01]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img</title>
</head>
<body>
<img src="img/house.jpg" alt="집" title="파란 지붕"/>
<img src="img/map.png" usemap="#sns">
<map name="sns">
<area shape="rect" coords="0,0,128,116" href="https://twitter.com/"><!-- coords 원점으로부터 left, top으로 위치 조정 -->
<area shape="rect" coords="129,0,250,116" href="https://www.facebook.com/">
</map>
<figure>
<img src="img/wall.jpg"/><img src="img/wall2.jpg"/>
<figcaption>아름다운 담</figcaption>
</figure>
</body>
</html>
[ex02]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>video</title>
</head>
<body>
<video src="video/gate.webm" width="500" height="300" controls></video>
<video autoplay loop width="500" height="300"><!-- autoplay:자동플레이, loop:반복 -->
<source src="video/gate.mp4"/>
<source src="video/gate.ogv"/>
<source src="video/gate.webm"/>
</video>
<iframe width="500" height="300" src="https://www.youtube.com/embed/hrXj2kiRvJY" frameborder="0" allowfullscreen></iframe>
</body>
</html>
[ex03]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>audio</title>
</head>
<body>
<audio src="audio/old_melody.mp3" controls preload="none"><!-- preload: 로딩 유무를 설정. -->
<source src="audio/old_melody.mp3">
<source src="audio/old_melody.ogg">
</audio>
</body>
</html>
728x90
반응형
'WEB > HTML' 카테고리의 다른 글
| HTML 태그 먹히지 않게 하기. (0) | 2018.05.04 |
|---|---|
| [HTML] SVG를 이용하여 색깔 그라데이션 넣기. (0) | 2017.08.28 |
| [HTML] HTML강의 - ch03 (0) | 2017.08.22 |
| [HTML] HTML강의 - ch02 (0) | 2017.08.22 |
| [HTML] HTML강의 - ch01 (0) | 2017.08.22 |