誰でもわかるPHP入門

HTMLで画像を出してみよう!!

読了までの目安時間:約 4分

 

さて、前回のHTMLで文字の装飾などをしていみましたが、ザックリなイメージが沸いたでしょうか??

「う~ん、難しいな~」と思われた方もいらっしゃるでしょう。

全然OKです。ザックリでいいので読み進めてください。自然に覚えていけますよ^^

さあ、次はHTMLで画像を表示してみましょう!!

画像の表示方法

busi_035

こんな感じで画像を表示できます。

「前回より難しいのではない??」

そんな事ありません^^ただ、記号を打ってみるだけですのでラク~に考えてくださいねw

HTMLで画像が表示できるようになるのですよ!!なんかプログラマーっぽくてかっこ良くないですか??

それでは行ってみましょうかwワクワクしながら見てくださいね。

楽しみましょう!!

まずは、表示したい画像をアップロードします。

ワードプレスならここでアップロードですね。

2013y01m20d_145917505

ここから新規追加を押して表示したい画像をアップします。

僕はこんな画像を選んで見ました!!

photo2

そして、この写真のURLを後でコピペしておきます。

2013y01m20d_150341727

まだ、しなくてもかまいません。

では、TeraPadを開きましょう。

<img src="画像ファイルのURL" alt="画像のタイトル" />

こちらのHTMLを使って表示させます。

なので、TeraPadに打ち込んでください^^

2013y01m20d_150850608

こうですね。

あとは上の黄色い蛍光部分には先ほどアップロードした画像のURLをコピーしてはりつけてください。

赤い蛍光の部分には好きなタイトルを入れてもらってかまいませんよ。

<img src="http://php.one-of-a-kind-deerpanels.com/wp-content/uploads/2013/01/photo2.png" alt="本人のアバター" />

こうですね。

これをTeraPad上でしてくださいね。

そして、ワードプレスなどに貼り付けてみると

2013y01m20d_151549933

こんな感じになりますw

これが正解です。もし、上手く表示されなかったりした場合は何かが間違っていますね。

落ち着いてゆーっくり探してください。

半角を全角にしてませんか??

それでは、まだ行って見ましょうか^^

前回で「こんにちわ」の文字を入れましたので入ってる状態で説明いたしますね。

改行してみよう!!

「こんにちわ」の右に画像が入っているのは何かすっきりしませんね><

なので「こんにちわ」の下に画像を表示してみましょう。

こちらを改行と言います。

<font color="#ff0000">こんにちわ</font><br/><img src="http://php.one-of-a-kind-deerpanels.com/wp-content/uploads/2013/01/photo2.png" alt="本人のアバター" />

間に<br/>を入れます。

これだけで改行が簡単にできますよ!!

2013y01m20d_152652744

こうなれば正解です。

簡単でしょ??

別に覚えなく結構ですよww

それでは次回に続きます~

<スポンサードリンク>

 

タグ :  

簡単HTML   コメント:1

この記事に関連する記事一覧