- HTMLのタグを覚えよう♪ - 2日目-1時間目
引き続き・・・・タグです(ーー;)
■画像を表示させるには
<p><img src="photo.jpg" alt="ジャンの写真" width="300" height="150"></p>
画像には、写真などのほか、ロゴ（一番上にあるもの）や背景など、たくさんありますが、ホームページで取り扱うのは、拡張子がjpg と gif だけにしましょう。bmpや pngは表示されないこともあります。特にbmp は使用不可です。
imgなどのインライン要素と呼ばれるものは必ずブロックレベル要素の中に入れる決まりがあります。そこでp タグやdivタグなどで囲む決まりになっています。
（インライン要素とブロックレベル要素については下のコーヒーブレイクを参照ください）
また、img と src の間は必ず半角スペースを入れてください。alt の前にも入れておきましょう。
また、width="" height=""はそれぞれ幅と高さを表します。なるべく指定するようにしましょう。
指定しなくても表示はしますが、したほうが良いとされています。
こちらも当然半角スペースで区切ります。
<img src="****" ダブルクォーテーションで囲まれたところに、写真や画像のファイル名（正確にはパス）を入れます。ここも必ず小文字で。デジカメなんかで撮った写真はファイル名や拡張子が大文字になってる場合がありますので注意が必要です。必ず小文字に直しましょう。
alt はマウスのカーソルが画像に触れたときに表示される文字で、日本語も使えます。画像の名前などを入れます。入れなくても問題ないですが、これもseo 的に重要だったりします。また、目の不自由な方が使う音声ブラウザへの対応と言う意味でも必要です。入れない場合もalt="" としておきましょう。
また、align="left か right" というのを書き加えると、画像の左右に文字を回り込ませることもできます。
下のような感じ。
これだけだと文字と画像が近すぎるので、vspaceと hspaceを使って横と縦のマージン（間隔）を指定します。
<img src="photo.jpg" alt="ジャン" vspace="15" hspace="15">
すると、上下左右に15px ずつ余白ができます。
これで文字が見やすくなりました。ただ、align を使った場合、文字の回り込みを解除してやらなければ、どこまでも回り込んでしまうので、
終了を知らせるために、<br clear="all"> を回り込みを解除したい場所に記述します。
上の写真のhtmlソースを見るとこうなります。
<p>
<img src="jan11.jpg" alt="ジャン" align="left" vspace="15" hspace="15">
</p>
<h2>■プロフィール</h2>
<p>
ジャンは今年３歳になるオスでノルウェージャンとチンチラの子供です。今だにやんちゃなところがあるけど、とってもかわいいやつです(￣∀￣*)ｲﾋｯ
</p>
<br clear="all">
<h2>■このサイトの概要</h2>
ややこしいかもしれないけど、そんなに難しくはないので、覚えてしまいましょう。画像とかはたくさん使うと思いますからね＾＾；
必ずしも文章を回り込ませる必要はないけど、ページのスクロール数が少なくて済むなどのメリットがあります。ただ、大きい画像を使う場合は、回り込みを指定しても、文字が見にくくなってしまいますので、注意してください。
ちなみに、画像を表示させるには、このhtml での指定に加えて、画像ファイル自体をhtml ファイルと同じフォルダに入れてくださいね。じゃないと、当然表示されません・・・
（※パスの概念を知ってる方は、たとえばimgというフォルダを作ってそこに画像をまとめたほうが整理されていいでしょう）
それと、重要なのが、写真、特にデジカメで撮ったものはサイズが非常に大きいです。そのまま貼り付けてもうまく表示されないばかりか、表示にものすごく時間がかかってしまいます。なので、サイズを縮小する必要があります。画像の扱いについてはこちらのページを参考にしてください。
■文字を強調するには
<em> このように太字の斜体で表示されます </em> ただ、斜体は見にくいだけのような・・・＾＾；
<strong> さらに強い強調です </strong>
使い方としては
<p>なんとジャンに<strong>彼女が！</strong>できたそうです</p>
こうすると・・・
なんとジャンに彼女が！できたそうです ＜注＞これはフィクションです＾＾；
ようは、強調したい文字を上のどちらかのタグで囲んでやればいいだけです。このタグ一見地味ですが、検索エンジンなどのSEO（豆知識参照）的には結構重要なタグです（最初は気にしなくてOKです）。一つのページには使いすぎない方がいいみたいです。むしろ一つがいいみたい。
■リストを作るには
リストを作ります。
ul タグを使います。その中のli タグがリストになります。ulをolにすると、1から順番に番号が振られます。リンクを設定すればメニューになります。
<ul>
<li>お湯を入れます</li>
<li>３分待ちます</li>
<li>できあがり〜！</li>
</ul>
ブラウザで見ると
- お湯を入れます
- ３分待ちます
- できあがり〜！
となります
とりあえず、これだけ覚えれば、十分です。時間がないので、どんどんいきますね。
てか、この時点で2時間オーバーしていたらごめんなさい・・・ﾌﾟﾝﾌﾟﾝ(￣^￣ﾒ)＼(_ _ ;)ﾊﾝｾｲ…
でも、へんなところで切りたくないんです・・・・（汗）
先ほどコピーしたhtmlソースを見てください。
今までの説明でなんとなくわかってきましたよね？？＾＾；
ちなみに、一番上のほうにある、<img src="logo1.jpg"〜というのがあります。これは、ここに logo1.jpg の画像ファイルを表示させなさいという命令になるのですが、まだ、そのファイルがないため表示されません。なので表示させるには、その画像ファイルをindex.html ファイルと同じフォルダに入れる必要があります。以下で説明します。
■画像を保存するには
画像の保存方法です。この下にある「画像はこちら」をクリックして、出てきた画面の画像を右クリックして「名前をつけて画像を保存」を選択します。名前は変えないでそのままでOKです（logo1.jpg となっているはずです）。そして、index.htmlファイルと同じフォルダに保存してください。
あと、ウミガメの写真（photo.jpg）も忘れずに保存してくださいね！
こんなロゴいやだ〜！（笑）って人は、こちらのページににいくつか置いてましたので、ご自由にもってってください＾＾
そして、htmlファイルをダブルクリック、もしくは更新を押してブラウザで表示させると、この画像が一番上に表示されてるはずです。
ちなみに現在のフォルダの中はこんな感じになっているはずです。（ブラウザやOSによっては若干違いますが、気にしないでください。ファイル名があっていればOKです）
（index.html と logo1.jpgとphoto.jpg）
※上の画像は管理人が作ったものなので、自由に持っていって構いませんが、このような画像にも当然著作権というのがあります。なので、他人のサイトから勝手に持ってきて、自分のページに表示させることは著作権を侵害することになりますので、注意してください。また、素材屋さんなどのページでは、利用規約などをよく読んでから使用しましょう。
なにやら難しい言葉ですが、HTMLにとってもっとも重要であり、基本的な概念です。
これはなにかと言うと、タグはほとんどがこのインライン要素とブロックレベル要素に分けられます。ブロックレベル要素は p タグや h1などがそれに当たり、インライン要素とは、a やimg などがインライン要素です。なにが違うかというと、そのタグの終わりに改行されるかどうかという点です。
たとえば、インライン要素を続けて書いた場合、２番目のものは右側にきますが、ブロックレベル要素は２番目のものが下にきます。
ヤフー
ヤフー
のように縦に配置されます。しかもpタグや見出しの場合、上下に１行余白ができます。これがインラインとブロックの違いです。簡単ですよね＾＾ それで、インライン要素は必ずなんらかのブロックレベル要素の中に入れる決まりがあるため、img や aタグなどを入れる際にpタグで囲ったわけです。 ただ、pタグで囲ってしまうと、上下に余白ができてしまい、それが嫌な場合があります。そのときはdivタグで囲います。すると余白はできません。 または、スタイルシートで「 margin:0px 」を指定すれば間隔がなくなります。
ここまでの完成版です こんな感じになりましたか？
だいぶそれらしくなってきましたよね？＾＾これに次回からスタイルシートを使って、背景色や文字の色、サイズなどのスタイルを指定していきます。それでとりあえずは完成です( v￣▽￣) ｲｴｰｲ♪ もうすこしだからがんばりましょうね！！
ぜんぜんわかんね〜 とか、うまくいかない！って人は気軽に「ケンズキューブ」の「質問コーナー！」までご質問ください。ﾍﾟｺﾘ(o_ _)ｏ)) では、２時間目にいきましょう♪
