[HTML] HTML강의 - ch04

[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>