2014年9月28日日曜日

画像を表示する

画像はHTMLの<img>タグでファイルを指定して読み込み表示します。

<img>タグは<body>タグの内部に記載し、<img src=”画像ファイルを置いている位置”>のようにsrcで画像の配置場所を指示します。

今回はindex.html内に<img>タグを記載し、このファイルから画像のファイル(image1.jpg)がどこにあるかを書いて読み込みます。上のファイル構造だと、index.htmlはapplicationフォルダの中に格納されています。画像ファイルはapplicationフォルダ内にあるimageフォルダ内にimage1.jpgがあります。index.htmlから見ると、index.htmlとimageフォルダはapplicationフォルダ内にあるため、index.htmlから見ると、imageフォルダ内にimage1.jpgがあることになります。この状況をHTMLで書いてみると、

<img src="image/image1.jpg">

となる。

記述例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<img src="image/image1.jpg">
</body>
</html>

このファイルを開いてみると、image1.jpgが表示されています。

0 件のコメント:

コメントを投稿