元webデザイナーが教える、初めてのhtmlー２時間目ー

前回の内容で、htmlについて少しは理解できましたか？

元webデザイナーが教える、初めてのhtml

2017年3月8日

では、その続きを始めていきましょう。

今回は、簡単なhtmlタグの紹介と、リンクの設定、画像の表示。
ここまで進められたらなと思ってます。

簡単なhtmlタグ

前回、タイトルをつける所まで進めましたが、本文に簡単なタグを入れて見ましょう。

改行には タグを使います。

<html>
<head>
<title>初めてのhtmlです。</title>
</head>
<body>
こんにちは、初めてのhtmlです。
<br>
<br>
改行タグbrを入れてみました。
</body>
</html>

どうですか？改行されましたか？

タグには閉じタグがなく、単独で機能するタグです。開始タグと閉じタグを一緒にまとめた って記述でも改行されるのですが、 を使うのが、最新のhtmlの記述みたいです。

進めていきますね。
段落にはタグを使います。

<html>
<head>
<title>初めてのhtmlです。</title>
</head>
<body>
こんにちは、初めてのhtmlです。
<br>
<br>
改行タグbrを入れてみました。
<p>
パタグラフってpタグで囲われたところは、段落を表します。
</p>
</body>
</html>

段落が一つできましたよね？

まだまだ、たくさんのhtmlタグはありますが、この先は、辞書などを参考にして、皆さんなりに色々と記述して試して見て下さい。

詳解逆引きHTML+CSS辞典

詳解HTML&CSS&JavaScript辞典第7版

画像の表示は<img>タグ

htmlで画像を表示するには、<img>タグを使います。

画像の表示には背景として、表示させる方法もありますが、今回は割愛します。

<img>タグを使う前に、画像を用意しましょう。
何でも良いのですが、これと言う画像がない方は、下記にサンプルバナー画像（banner.jpg）を用意しましたので、マウスの右クリックで画像を保存して下さい。
保存先は、デスクトップに用意したhtmlフォルダーの中に、imagesフォルダーを作成し、保存しましょう。

↓↓サンプルバナー(banner.jpg)↓↓

imagesフォルダーにbanner.jpgが入ってる事を確認して下さい。

画像表示や、リンクの設定のタグで、”ダブルクォーテーションを使うので、キーボードで打てるようにしましょう。

shift　を押しながら、キーボードの“を押すと、“を打つことができます。

では、画像を表示させますね。

<html>
<head>
<title>初めてのhtmlです。</title>
</head>
<body>
こんにちは、初めてのhtmlです。
<br>
<br>
改行タグbrを入れてみました。
<p>
パタグラフってpタグで囲われたところは、段落を表します。
</p>
<img src="images/banner.jpg">
</body>
</html>

画像が表示されてない場合は、記述が間違い？画像の保存場所が違う等だと思います。

画像を表示させた<img>タグの説明しますね。

<img>はイメージ（画像）を表示させるタグです。
改行タグの と同じように、単独で使うタグです。

imgの後に半角スペースを空けたsrc=””のダブルクゥオーテーションで囲んだ中に、イメージ画像へのURL指定します。

今回、イメージの場所が、index.htmlと同じ階層のimagesフォルダー内にあります。
index.htmlから見て、同じ階層のimagesフォルダーの中の、banner.jpgだよと、
src=”images/banner.jpg”と記述してます。

ちなみに、一つ上の階層を表すには、../images/banner.jpgと、../で表します。

今回の構造の例で表すならば、banner.jpgから見たindex.htmlのURLは、
../index.htmlとなります。
imagesフォルダーから、一つ階層が上がった(../)中のindex.htmlとなるんですが、、

この辺りを理解するのが、なかなか、難しいですよね。

マツカタも、説明が下手で、申し訳ないです。

ちなみに、二つ階層の上って場合は、../../って記述です。

この辺りの構造がわかれば、もう、htmlなんて屁の河童なんですが、、

リンクの設定

ちょっと、いきなり難しくなってしまいましたね。

どうですか、htmlをもう少しだけ、勉強してみませんか？

画像の表示を理解できた方には、この先のリンクの設置は簡単だと思います。

では、早速リンクを設定してみましょう！

<html>
<head>
<title>初めてのhtmlです。</title>
</head>
<body>
こんにちは、初めてのhtmlです。
<br>
<br>
改行タグbrを入れてみました。
<p>
パタグラフってpタグで囲われたところは、段落を表します。
</p>
<img src="images/banner.jpg">
<p>
<a href="http://matsukataweb.com">リンクの設定にはaタグを使います。</a>
</p>
</body>
</html>

リンクが設定されて、追加した部分をクリックするとリンク先に飛びましたか？

少し、画像の<img>タグの似てますよね？
リンクさせるタグは<a>です。<img>の時とは違い、リンク設定するテキストや画像などを<a>開始タグ、</a>閉じタグで囲みます。

href=””のダブルクゥオーテーションで囲んだ中に、リンク先のURLを記述します。

リンクにも画像と同じような、相対的なリンク設定も可能です。画像も、今回のリンク設定のように絶対的なソースにての表示も可能です。

画像にもリンク設定できるので、設定して見ましょう。

<html>
<head>
<title>初めてのhtmlです。</title>
</head>
<body>
こんにちは、初めてのhtmlです。
<br>
<br>
改行タグbrを入れてみました。
<p>
パタグラフってpタグで囲われたところは、段落を表します。
</p>
<a href="http://matsukataweb.com"><img src="images/banner.jpg"></a>
<p>
<a href="http://matsukataweb.com">リンクの設定にはaタグを使います。</a>
</p>
</body>
</html>

これで、画像をクリックしてもリンク先に飛べます。