ABOUT ME

-

  • 6. HTML_multimedia
    Front-end/HTML5 2020. 6. 6. 15:51
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!--src: 이미지 파일 경로, alt: 이미지 파일이 없을경우 표시되는 문장-->
        <!--width: 이미지의 너비 (CSS 에서 지정하는 것이 일반적)-->
        <!--height: 이미지의 높이 (CSS 에서 지정하는 것이 일반적)-->
        <img src="../Items/auto(1).jpg" alt="이미지를 불러오지 못했습니다." width="480"><br>
        <img src="../Items/aa.jpg" alt="이미지를 불러오지 못했습니다."><br>
    
        <!--src: 음악 파일 경로, preload: 재생전에 음악 파일을 불러올지 결정-->
        <!--auto play: 자동재생을 할지 결정, loop: 반복재생을 할지 결정, controls: 음악재생 도구 표시 결정-->
        <h4>Ping Pong</h4>
        <audio src="../Items/Ping_Pong.mp3" controls></audio><br>
        <h4>Unspoiled Perfection</h4>
        <audio src="../Items/Unspoiled_Perfection.mp3" controls></audio><br>
    
        <!--브라우저 마다 지원하는 음악파일 형식이 다르기 때문에 타입 변환 가능-->
        <h4>Changed Type Unspoiled Perfection</h4>
        <audio controls>
            <source src="../Items/Unspoiled_Perfection.mp3" type="audio/Wav">
        </audio>
    
        <!--poster: 동영상 썸네일 이미지 주소, 그 이외에는 음악과 사진의 태그들 다 사용가능-->
        <h4>BangBang - 이수민,고아라</h4>
        <video width="640" height="360" controls>
            <source src="../Items/BangBang.mp4" type="video/mp4">
        </video>
    </body>
    </html>

    'Front-end > HTML5' 카테고리의 다른 글

    7. HTML_form  (0) 2020.06.06
    5. HTML_Table  (0) 2020.06.06
    4. HTML_list  (0) 2020.06.06
    3. HTML_link_tag  (0) 2020.06.06
    2. HTML_Text  (0) 2020.06.06

    댓글

Designed by Tistory.