第一步：建立基本的 HTML 檔案
首先，你需要準備一個基本的 HTML 檔案。請將以下程式碼複製並儲存為
程式碼：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>我的圖片庫 1</title>
</head>
<body>
</body>
</html>
第二步：準備圖片檔案
接下來，請將你的圖片檔（例如：photo1.jpg、photo2.jpg）和這個 HTML 檔案（my_first_image_files.html）放在電腦的同一個資料夾裡。
第三步：在網頁中插入圖片
最後，在 <body> 標籤中加入 <img> 標籤，如果你有多張圖片，就加入多個 <img> 標籤。最終程式碼如下所示：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>我的圖片庫 1</title>
</head>
<body>
<div><img src="photo1.jpg" alt="圖片 1"></div>
<div><img src="photo2.jpg" alt="圖片 2"></div>
<div><img src="photo3.jpg" alt="圖片 3"></div>
</body>
</html>
完成！
存檔後，直接開啟 my_first_image_files.html 這個檔案，你就可以在瀏覽器中看到美麗的照片了。
希望這篇文章能幫助你為自己的網頁新增圖片。開啟你的網頁開發之旅。
沒有留言:
張貼留言