ally2Yblg6's diary

プログラミングなどの学習内容をここに書いていきます。更新を頻繁にしてモチベーションを上げていきたいと思ってます。

画像を表示させる

imgタグを使う

画像を表示させるには、
"img"タグを使います。
サンプルのページを作ってみました。

f:id:ally2Yblg6:20140210000532j:plain

このページのソースは

<DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset-"utf-8">
		<title>画像の貼り付け練習</title>
	</head>
	<body>
		<img src="sample.jpg" width="600" height="600" alt="サンプル" title="練習">
	</body>
</html>

画像の表示に関するコードは

<img src="sample.jpg" width="600" height="600" alt="サンプル" title="練習">

"img"を使用します。

"src"は画像のパスや名前を指定します。
ソースことですね。

"widht"は幅、
"height"は高さです。
幅と高さを指定することで
画像の読み込みを早くすることができるそうです。

"alt"は画像が表示できないブラウザのときに
テキストとして表示されたり、
音声ブラウザで読み上げられたりします。

"title"は画像にカーソルを合わせたときに
表示されるテキスト(文字)のことです。


src="" で指定した値が合ってないと表示されないので注意しましょう。
URLのパラメータが
個人的なファイルのパスなので隠しましたw
練習で表示させるときはHTMLファイルを同じ階層に置いときましょう。


画像ファイルの階層がひとつ上なら

src="../sample.jpeg"

2つ上なら../../です。


以上です。



教材:ドットインストール - 3分動画でマスターする初心者向けプログラミング学習サイト