+マークの次の画像アイコンをクリックしてください。ウェブサイトで使用する画像が探せます。プロジェクトに含まれる画像を使えます。
コードパネルでindex.htmlのファイルを開きます。</ul>タグの後に、以下のコードを書きます。
<img src="tito.png" alt="Tito the dog" width="100px" />
<img>
タグは今まで使ったタグと使い方が違う事に気をつけてください。- </img>の閉じタグは必要ありません。そのかわりセルフクロージングします: 開始タグの最後に /> が含まれます。これはページにテキストを挿入する時のように開始と終了が必要ないためです。
- このタグには3つの属性(attributes.)と呼ばれる追加できる情報を含みます。src属性は画像がどのファイルを使うかを示します。alt属性は、画像が表示できない時に表示される短い説明分です。
width属性が何をしているのでしょう?(ヒント:pxはpixelsの略で、あなたのPCの画面を作る小さな点を示します。)異なる数字に変えてどのように見えるか試してみてください。pxという文字は削除しないようにしてください。
あなたの画像をウェブサイトに追加するには、画像アイコンをもう一度クリックして、"Add Image"をクリックします。"Upload"をクリック、"Click To Select Files"を選択します。アップロードしたい画像をあなたのコンピューターから選択して"Open"をクリックします。アップロードが終われば、"Done"をクリックします。
画像がアップロードできれば、以前と同じように<img>タグであなたのウェブサイトに画像を追加できます。その画像と一致するファイル名にsrc属性に変更します。
alt属性の値を画像の短い説明分に変更します。
- 重要:ファイル名や代替テキストは、ダブルクォーテーションで囲む必要があります。
Saveをクリックして、作業を保存し、どのように見えるかを確認します。