HTMLエディタを使用して画像を追加する

メモ帳やワードパッドといったエディタを使用してHTMLページに画像を追加することができますが、Adobe DreamweaverやNotepad++を使用することをお勧めします。

デザインモード

Adobe Dreamweaverではブラウザで実際に表示される画面を見ながらHTMLファイルの編集ができます。
それでは、Adobe DreamweaverでHTMLページを見てみましょう。

デザインモードを使用してHTMLページに画像を追加するには、次の操作を行ってください。

1. デザインモードであることを確認します。 画面の左上のコード、分割、デザインと並んでいる中の[デザイン]ボタンをクリックします。
dreamweaver-design-mode-11

2. 画像を挿入したい場所にカーソルを置きます。

3. トップメニューから挿入→イメージを選択します。
dw-insert-image-2

4.表示されたウィンドウで、画像を選択し、[OK]をクリックします。
dw-insert-image-3

ページに画像が追加されたことをDreamweaver上で確認できます。

エラー回避のため、確認してください。

  1. 画像は、HTMLページファイルと同じドライブ上に保存されてなければなりません。
  2. HTMLファイルと同じディレクトリにある’images’という名前のフォルダに画像を置くことをお勧めします
  3. ホスティングサーバーに画像やHTMLファイルをアップロードする場合 – 同じファイル構造を必ず維持してください。

コード・モード

コード・モードで画像を追加している場合は、IMGタグを使用する必要があります。以下のコードを使用してください。

<img src="root_to_the_image_file" alt="image_description" />

imgタグを使用して、HTMLページに画像を追加することができます。 srcとaltの2つの必要なタグ属性があります。

SRC属性は、画像ファイルがある場所を指定します。 お持ちのサーバーまたは他のサーバーにある画像を指定することができます。

ALTは画像の代替説明です。万が一画像が表示されなかった場合テキストが表示されます。確認するにはページ検証が必要です。

画像のパスは、相対と絶対があります。


Comments are closed.