iT邦幫忙

2022 iThome 鐵人賽

DAY 15
0
自我挑戰組

30天的獨立學習紀錄系列 第 15

DAY15 - HTML-將圖片和影片在網站中顯示

  • 分享至 

  • xImage
  •  

前言

大家好啊~今天是我參賽的第十五天,昨天分享了我在這暑假對HTML的初步認識,標題和文字格式,今天再來記錄HTML的基本語法其中包括在網站中放入圖片,分成兩種方式,另外還有在網站置入自己的影片和YouTube影片。


網站置入圖片

下圖是由資料夾中先放入存放好之圖檔,並將圖檔名稱輸入<img src="">中,若想調整圖片大小可用width和height來做修改,當然之後也可做更多的設定,但這部分會使用到CSS的語法,暫且不提。

<body>
    <!-- 將資料夾中圖檔顯示於網站,調整大小可用width和height --> 
    <img src="DHT11.PNG"  width="200">  
</body>

https://ithelp.ithome.com.tw/upload/images/20220930/20152389CEl0xjXCF6.png


下圖是使用圖片網址的方式將圖片置入網站中,兩種方式都是可行的,width和height同樣也是來做修改圖片大小。

<body>
     <!-- 將圖片網址寫入並顯示於網站,調整大小可用width和height -->
     <img src="https://cf.shopee.tw/file/b3e5f4b81050fc15ca37f4f51aeac08a"  width="200">  
</body>

https://ithelp.ithome.com.tw/upload/images/20220930/20152389JBLIxfivDH.png


完整程式碼和執行後網站如下,其中<br>是用於換行,<hr>是創建水平線。

<!DOCTYPE   html>
<html>
    <head>
        <meta charset="UTF-8"><meta>
        <title>我的第一個網站</title>
    </head>
    <body>
        <!-- 定義標題 <h1>to<h6> -->  
        <h1>1.大家好</h1>   
        <p>這裡是小夜</p>   <!-- 定義段落 <p> -->

        <hr>    <!--創建水平線-->

        <!-- 以下是將資料夾中圖檔顯示於網站,調整大小可用width和height -->     
        <img src="DHT11.PNG"  width="200">  
 
        <br>    <!--換行-->
        <hr>    <!--創建水平線-->

        <!-- 將圖片網址寫入並顯示於網站,調整大小可用width和height -->
        <img src="https://cf.shopee.tw/file/b3e5f4b81050fc15ca37f4f51aeac08a"  width="200">  
    </body>
</html>

https://ithelp.ithome.com.tw/upload/images/20220930/201523893T2nuVs2XU.png


網站置入影片

將影片放入網站的方式我知道的有兩種,一種是將資料夾中的影片置入,輸入完檔名後要在程式中加上controls才可於網站中播放影片,另一種方式是複製YouTube影片的嵌入程式碼,然後直接輸入到程式裡就可在網站中顯示,當然影片大小也可用width和height來做修改。

<body>
    <video src="genshin.mp4" controls width="400"> </video>  
    <br>    <!--換行-->       
    <iframe width="768" height="432" src="https://www.youtube.com/embed/JsHqEpWQl-8" title="YouTube音樂庫 免費背景音樂下載 歌名: Lucid Dreamer 作者: Spazz Cardigan | Cinematic | Happy 開心音樂 | NCS Music" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>

https://ithelp.ithome.com.tw/upload/images/20220930/20152389v1R7PpN8AH.png

https://ithelp.ithome.com.tw/upload/images/20220930/201523891aY9K8c0kk.png


上一篇
DAY14 - HTML標題及文字格式
下一篇
DAY16 - KiCad安裝及繪製電路的快捷鍵
系列文
30天的獨立學習紀錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言