iT邦幫忙

2022 iThome 鐵人賽

DAY 10
0
自我挑戰組

從零開始自學HTML/CSS網頁設計系列 第 10

插入HTML網站圖片

  • 分享至 

  • xImage
  •  

首先先在www資料夾裡新增一個用來裝圖片的資料夾:
https://ithelp.ithome.com.tw/upload/images/20220923/20152190Lrc1Nh5UnZ.png
接著將圖片放進資料夾裡:
https://ithelp.ithome.com.tw/upload/images/20220923/20152190B7BWWCeqS8.png
當image正確的放在www資料夾裡時,Brackets就會變成如下所示的畫面:
https://ithelp.ithome.com.tw/upload/images/20220923/20152190MsZWtGRFqa.png

接下來就可以來插入圖片到網站裡了,要插入圖片必須輸入img標籤以及src屬性和alt屬性。
1、src屬性
src屬性值是要輸入想要放在網頁上的圖片的路徑。
2、alt屬性
alt屬性是輸入可以代表圖片的替代文字。若圖片只是用來美化網站而沒什麼意義的話,則可以留白。
3、width、heidht屬性
width屬性可輸入圖片的寬度,height屬性可以輸入圖片的高度。
https://ithelp.ithome.com.tw/upload/images/20220923/20152190xWxmuKR243.png

接下來就來進入實作的部分,先打開Brackets並輸入img標籤:
https://ithelp.ithome.com.tw/upload/images/20220923/20152190uDRaysmsKx.png
然後點選及時預覽(Live Preview)開啟瀏覽器:
https://ithelp.ithome.com.tw/upload/images/20220923/20152190qeUBisBcxt.png

這樣一來我們就學會怎麼插入圖片了!下一節會教大家怎麼設定外部連結。


上一篇
HTML的章節標籤
下一篇
設定HTML網站的外部連結和書籤連結
系列文
從零開始自學HTML/CSS網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言