29.自分のサイトに画像を表示する2

ヤミー「今回は自分のサイトに画像を表示します」

サイトウ君「はーい」

ヤミー「画像を表示したいときは img タグというのを使います」

サイトウ君「ほう？」

ヤミー「というわけで、まずEmEditorを起動してください」

ヤミー「EmEditorの起動の仕方は過去記事（25.EmEditorの起動の仕方）を参考にしてね」

サイトウ君「起動しました」

ヤミー「次に、index.htmlファイルを開いてください。開き方は過去記事の23.トップページの内容を書き変えるを参考にしてね」

サイトウ君「EmEditorでindex.htmlファイルを開きました」

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>トップページ</title>
</head>
<body>
<main>
ここはトップページです
</main>
</body>
</html>

ヤミー「imgタグは」

ヤミー「<img src="ファイルの場所" alt="目が見えない人のために何の画像か？の説明">」

ヤミー「みたいな書き方をします」

ヤミー「前回ダウンロードした画像のファイル名が onepiece01_luffy.png （ワンピースゼロイチアンダースコアルフィードットピーエヌジー）なので」

ヤミー「次のように index.html ファイルの内容を書き変えてください」

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>トップページ</title>
</head>
<body>
<main>
ここはトップページです<img src="onepiece01_luffy.png" alt="ルフィ">
</main>
</body>
</html>

ヤミー「ちなみにアンダースコア（アンダーバー）は、Shiftキーを押しながら以下のキーを押せば入力できます」

ヤミー「書き終えたら保存してください」

サイトウ君「保存しました」

ヤミー「よし。次回、画像が表示されるか確認」