無料ホームページ作成講座 >> HTML講座 >> 画像を表示させよう

画像を表示させよう

画像

文字ばかりのページもいいですけど、寂しいですよね!?
画像を入れて少し見栄えを良くしましょう。

HPで画像を表示させるには、まず画像ファイルが必要です。
画像ファイルは 素材の森 等で無料でダウンロードする事ができます。
もちろんデジカメ等で撮った写真や自作の画像でもOKです。
※注意※  使いすぎ、大きすぎは、表示されるのが遅くなります。

画像ファイルの場所ですが、まず初めはココからで作ったフォルダの中に保存します。
また画像は画像のみ保存するフォルダを作っておくと便利です。
画像ファイルと保存場所ができたら、表示させる方法です。

画像の表示方法


<img src="ココに画像ファイルの場所を入れる" alt="補足文">


コレでHPに画像が表示されます。
alt は次項のページを移動しよう( リンクを張る )で説明します。

おまけ!!

タグと要素・属性について

imgfontなどを 要素 といいます

< >で囲まれているものを タグ と呼びます
<要素> が開始タグ  </要素> が終了タグといいます。
この間に値(数字や文など)をいれます。
ちなみに違いは / が付いているか無いかで付いているものが終了タグです。

srcaltなどを属性といいます
属性とは位置や大きさ等の細かい設定をするためのものです

<要素 □□> 値 </要素>

開始タグの □□ に属性を入れていきます。
要素の後ろに、半角スペースを入れて 『 属性名 = " 値 " 』 と記述します。
下記の表を参考にしてください。

属性名 機能
※他にも様々な属性がありますが、よく使うものを掲載しています。
ALIGN left 左揃え
center 中央揃え
right 右揃え
VALIGN top 上揃え
middle 中央揃え
bottom 下揃え
WIDTH px、% 横幅を指定する
HEIGHT px、% 縦幅を指定する
BORDER px 外枠の幅を指定する
BORDERCOLOR 色見本より 外枠の色を指定する
CELLPADDING px 枠と内容との余白を指定する

ちょっと難しい言葉が出てきましたが、言葉が難しいだけ!!
やり方さえ覚えてしまえば色んな事ができますよ。

⇒ 次はページを移動しよう( リンクを張る )でページを分けてみよう。