HTMLの勉強|Webサイト作りの基礎

初心者向けの向けのHTMLの勉強の仕方を綴っていきます。かくいう私もWebサイト作りの初心者です笑

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つの理由が最も多いです。

 

f:id:htmlnobennkyou:20130425184521j:plain

画像が表示できるようになると急にWebサイトっぽくなりますよね!

次回は、リンクを張って、ページを飛ばせるようにしましょう!