Webサイトに画像を表示するには<img>タグを使います。
メモ帳でもできるんですが、コードを書くのに便利なテキストエディタを使ったほうが早いです。
私はVisual Studio Codeを使用しています。よくVSCodeと略されます。
日本語対応もしているので、どのエディタを使ったらいいかわからない人は、ひとまずVSCodeを選んでおけばいいのではないかと思います。
まず今回は、tutorialという名前のフォルダを作ってその中で作業します。
index.htmlと画像ファイルを配置します。
画像ファイルはimagesという名前のフォルダを作って、その中に入れておきます。
index.htmlを編集します。
VSCodeでは、!を入力するとHTMLの基本フォーマットが表示されるのでそれを編集します。
このindex.htmlをブラウザで表示すると下記のようになります。
文字の下に画像を加えていきます。<img>タグを使います。
<h1>タグの下に、<img>タグを追加しました。
srcは、画像のある場所を指定します。
この場合、imagesフォルダの中にある、inugoya_dog.pngというファイルを指しています。
altは、何らかの理由で画像が表示されない場合に、代わりに表示されるテキストを入力します。
視力が弱い方などが、読み上げ機能を使う際などにも利用されます。
また、SEOにおいても重要です。
では、ブラウザで表示してみましょう。
バッチリ表示されていますね。
最後にソースコードを貼っておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>画像を表示するよ</title>
</head>
<body>
<h1>画像が表示されます。</h1>
<img src="images/inugoya_dog.png" alt="犬小屋の中で寝ている犬" />
</body>
</html>
以上です。
コメント