写真を貼る

前回まで

前回までの作成がこれです。
ここはコピーできる特別な方法で書いています。
（普通は「<　>」等の記号はHTMLでは特別な文字なので、「<　>」と書いています。）
準備できていない人は・・・できている人はしなくて良いです・・・
作りかけの、index.htmlがあるひとは、それをblackketsでたちあげ、コピー貼り付けをしてもいいです。
新しく作っても良いのです。
そういう場合は、ブラケッツを立ち上げ、
ファイル→新規作成→右下がtext等になっている場合はhtmlに直してから、
コピー貼り付けをして、index.htmlという名前で保存してください。
下のファイルをコピーし、範囲全指定をして、コントロール＋ｃ　でコピー
ブラケットを立ち上げ、コントロール＋Vではりつけができます。

 $<!DOCUTYPE HTML>
<html lang="ia">
<head>
<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="top/smain.css">
	<meta name="keywords" content="HTML基礎,初めてのHTML,等などを書く">
	<meta name="description" content="HTMLの解説">
	<title>初めてのHTML</title>
</head>
<body>
	<header>
		<img src="rogo.gif" width="210" height="40" alt="ヘッダーロゴ">
	</header>
	<div class="hontai">
		<!-- 今回はここへ画像を張ります　-->
	</div>
	<footer>
	</footer>	
</body>        
</html>$

ロゴ画像は、index.htmlのあるフォルダーへ保存してください。
また、画像の大きさ(height、width）は、とりあえず指定しません。（また後から）

ペーに写真を貼る

別フォルダーを用意

こんどは別フォルダーの中にある写真を貼ってみましょう。
まずinndex.htmlのあるフォルダーの中に、"img"というフォルダを作ります。

1,フォルダを開く
２，フォルダの中で右クリック→新規作成二マウスを重ね→「フォルダ」を左クリックすると［当たらしフォルダ］ができます。
3，［当たらしフォルダ］の文字を一回左クリックすると、名前が書き換えられる世になりますので、［img］と小文字でつけてください

フォルダへ写真を入れる

次に、imgフォルダをダブルクリックして開きます。
（うまく開かないときは右クリックで［開く］でも開きます。）
その中へ、用意しておいた画像を入れます。
（画像をマウスで左クリックしたまま,マウスを移動すると写真が動きますので,フォルダの中で離す、または
　画像の上で右クリック→コピーまたは切り取り　その後、フォルダの中で右クリック、貼り付け　で移動します。）
画像の名前を変える

写真の名前を変える

画像の名前を一回左クリックすると名前の変更ができます。
そのままでも結構ですが、ここでは、top.jpg とかtop.png　とかしておきます。
拡張子は変更しないこと。ドットの前の名前だけ変更します。
ここからは　top.jpg として説明していきます。

index.htmlからリンクを張る

index.html をブラケッツで開きます
そして、
　　

<div class="hontai">

    　　　　<!-- 今回はここへ画像を張ります　-->

    　 </div>

を書き換えて

<div class="hontai">

    <img src="img/top.jpg" alt="トップページ画像">
</div>

としましょう。(［.jpg］の部分は自分の画像の拡張子のままに)
すると、写真のままだと、とても大きな画像が張られます。

画像の表示する大きさを変える

そこで、

<img src="img/top.jpg" width="400" height="200"
    alt="トップページ画像">

などと大きさを指定しましょう。
これで画像の大きさは変わりました

width="400"　というのは画像の幅が４００ピクセルということ
hight="200" というのはが園高さが200ピクセルということです。

<img src="img/top.jpg" width="400" alt="トップページ画像">
と、hright="200"を省略すると、自動的に高さも変更されます。

画像の実際の大きさを変える

これは、paint3Dでできます。
実際に使う画像は、これで実際に表示する大きさにした方が良い。
ページを表示するには、データを送るわけですから、小さい画像の方がデータ量が少なくなって、サクサク動くのです。

imgフォルダの中の使う画像の上で右クリック→「paint3Dで編集する」と上の方に表示されるので左クリック
キャンパスタグを押す。
右側に表示される［キャンパスサイズを変更］のピクセル数を変える。
適当な大きさになったら、［ファイル］タグ　から上書き保存してください
このとき、何ピクセルに指定したか記録しておき

<img src="img/top.jpg" width="400" height="200"
    alt="トップページ画像">

の数値をそれにあわせて変えてください。

フォルダのたどり方へ進む