HTMLで画像を表示する
前回は、見出しについて勉強しました。
今回は、HTMLで画像を表示する勉強をしましょう。
さて、前回使ったHTMLを使用して勉強していきます。
まずは、画像を用意しましょう。
パソコンの中に画像のデータがあれば、それを利用しましょう。
サイトを公開しないのであれば、ネットから拾ってきた画像でも大丈夫です。
(ネットで拾った画像は練習用だけにして、無許可で公開することはしないようにしましょう。)
私は、自分の飼っている愛犬であるチビという犬の写真を使用します。
チビの写真の名前は(dog.jpg)という名前のデータです。
写真が用意出来たら、分かりやすいようにデスクトップに保存してください。
さて、次はHTMLです。
まずは、私のHTMLの記述を元に下記のように書いてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの勉強</title>
</head>
<body>
<h1>大見出し</h1>
<p>初めてのHTML</p>
<img src="dog.jpg" width="220" height="167" alt="犬の写真">
</body>
</html>
タグの説明をしていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLの勉強</title>
</head>
<body>
<h1>大見出し</h1>
<p>初めてのHTML</p>
<img src="dog.jpg" width="220" height="167" alt="犬の写真">
→こちらのタグが写真を紐づける写真になります。
img srcの後に続く""の中に入るデータが保存した写真の名前になります。
この名前は、日本語では表示がされないので、必ずアルファベットで名前をつけてください。
widthは写真の幅の指定、heightは高さの指定になります。
altは写真につける概要の説明になります。
音声読み上げソフトなどの場合に読み上げてくれるのので、入れるようにしましょう。
</body>
</html>
ここまで表示できたら、index.htmlという名前をつけて、写真を保存している場所と同じ場所に保存しましょう。
※今回は、画像をデスクトップに保存しているので、HTMLもデスクトップに保存しましょう。
画像データとHTMLが同じ場所に表示されていることが確認出来たら、HTMLをブラウザにドラック&ドロップをしましょう。
すると下記のように表示されます。
※画像が表示されていない場合は、写真のデータの保存名とHTMLの名前が違う。
もしくは、画像データとHTMLの保存場所が違う。
この2つの理由が最も多いです。
画像が表示できるようになると急にWebサイトっぽくなりますよね!
次回は、リンクを張って、ページを飛ばせるようにしましょう!