HTML 入門トップページ

---

目次

1. ホームページ作成はじめの一歩
2. HTMLの基礎
3. 基礎的なタグをマスターしよう
   1. 段落を作る
   2. 改行する
   3. 見出しの設定
   4. 文字スタイルの変更（太字 | 斜体 | 文字サイズ | 文字の色 | フォント | 複数のスタイル）
   5. 箇条書き
   6. 表を配置する
   7. 画像を配置する
   8. リンクを設定する
   9. 特殊文字を表示する
4. HTML 文書を検証してみよう
5. スタイルシート
6. フォームを使ってみよう
7. 参考サイト

---

基礎的なタグをマスターしよう

画像を配置する

画像を表示するには，まず index.html と同じフォルダに画像をコピーします．コピーができたら，img タグに src 属性を使って画像ファイル名を指定します．このとき，src でファイル名を指定するだけでも表示できるのですが，画像ファイルが見つからないときのために，alt 属性でどのような画像であるかを指定しなければなりません．さらに，画像の幅 (width) と高さ (height) を指定した方が画像ファイルのダウンロードが完了する前にレイアウトが確定するため表示が高速になります．幅と高さを指定しなければ，画像ファイルのダウンロードが終了するまで大きさがわからないのでレイアウトが確定しません．大きすぎる画像を小さく表示することもできるようになります（ただし，事前に適切なサイズに変換した画像を準備しておくべきです）．なお，幅 (width) と高さ (height) を指定する際には単位を付けないことに注意してください．

次の例の2行目の記述で画像を表示することができますが，これは alt 属性が指定されていないので適切な方法ではありません．5行目のように alt 属性は忘れずに指定するようにしてください．また，8行目の「t.jpeg」というファイルが見つからない場合に alt 属性に指定した文字列が表示されていることにも注意してください．

index.html（抜粋）コピー
<p>
  <img src="tissot.jpeg">  <!-- 表示されるがこれではダメ -->
</p>
<p>
  <img src="tissot.jpeg" width="284" height="160" alt="tissotの時計">  <!-- 正しい書き方 -->
</p>
<p>
  <img src="t.jpeg" width="284" height="160" alt="tissotの時計">  <!-- このファイルは見つからない -->
</p>

---