画像を表示させよう
画像
文字ばかりのページもいいですけど、寂しいですよね!?
画像を入れて少し見栄えを良くしましょう。
HPで画像を表示させるには、まず画像ファイルが必要です。
画像ファイルは 素材の森 等で無料でダウンロードする事ができます。
もちろんデジカメ等で撮った写真や自作の画像でもOKです。
※注意※ 使いすぎ、大きすぎは、表示されるのが遅くなります。
画像ファイルの場所ですが、まず初めはココからで作ったフォルダの中に保存します。
また画像は画像のみ保存するフォルダを作っておくと便利です。
画像ファイルと保存場所ができたら、表示させる方法です。
画像の表示方法
<img src="ココに画像ファイルの場所を入れる" alt="補足文">
コレでHPに画像が表示されます。
alt は次項のページを移動しよう( リンクを張る )で説明します。
おまけ!!
タグと要素・属性について
img、fontなどを 要素 といいます
< >で囲まれているものを タグ と呼びます
<要素> が開始タグ </要素> が終了タグといいます。
この間に値(数字や文など)をいれます。
ちなみに違いは / が付いているか無いかで付いているものが終了タグです。
src、altなどを属性といいます
属性とは位置や大きさ等の細かい設定をするためのものです
<要素 □□> 値 </要素>
開始タグの □□ に属性を入れていきます。
要素の後ろに、半角スペースを入れて 『 属性名 = " 値 " 』 と記述します。
下記の表を参考にしてください。
| 属性名 | 値 | 機能 | ||
| ※他にも様々な属性がありますが、よく使うものを掲載しています。 | ||||
| ALIGN | left | 左揃え | ||
| center | 中央揃え | |||
| right | 右揃え | |||
| VALIGN | top | 上揃え | ||
| middle | 中央揃え | |||
| bottom | 下揃え | |||
| WIDTH | px、% | 横幅を指定する | ||
| HEIGHT | px、% | 縦幅を指定する | ||
| BORDER | px | 外枠の幅を指定する | ||
| BORDERCOLOR | 色見本より | 外枠の色を指定する | ||
| CELLPADDING | px | 枠と内容との余白を指定する | ||
ちょっと難しい言葉が出てきましたが、言葉が難しいだけ!!
やり方さえ覚えてしまえば色んな事ができますよ。