画像を表示させよう
画像
文字ばかりのページもいいですけど、寂しいですよね!?
画像を入れて少し見栄えを良くしましょう。
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 | 枠と内容との余白を指定する |
ちょっと難しい言葉が出てきましたが、言葉が難しいだけ!!
やり方さえ覚えてしまえば色んな事ができますよ。