前回の内容で、htmlについて少しは理解できましたか？
では、その続きを始めていきましょう。
今回は、簡単なhtmlタグの紹介と、リンクの設定、画像の表示。
ここまで進められたらなと思ってます。
簡単なhtmlタグ
前回、タイトルをつける所まで進めましたが、本文に簡単なタグを入れて見ましょう。
改行には<br>タグを使います。
<html> <head> <title>初めてのhtmlです。</title> </head> <body> こんにちは、初めてのhtmlです。 <br> <br> 改行タグbrを入れてみました。 </body> </html>
どうですか？改行されましたか？
進めていきますね。
段落には<p></p>タグを使います。
<html> <head> <title>初めてのhtmlです。</title> </head> <body> こんにちは、初めてのhtmlです。 <br> <br> 改行タグbrを入れてみました。 <p> パタグラフってpタグで囲われたところは、段落を表します。 </p> </body> </html>
段落が一つできましたよね？
まだまだ、たくさんのhtmlタグはありますが、この先は、辞書などを参考にして、皆さんなりに色々と記述して試して見て下さい。
画像の表示は<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>はイメージ（画像）を表示させるタグです。
改行タグの<br>と同じように、単独で使うタグです。
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>
これで、画像をクリックしてもリンク先に飛べます。
htmlは、仕組みさえ覚えてしまえば難しくない
html、タグを全て覚える必要はないです、構造さえ理解できれば、そんなに難しい言語ではないです。
マツカタは触りの部分だけしか説明してませんが、興味が出た方や、勉強してみようかな？と思った方は、他のサイトや、Blogなどを参考にして下さい。
マツカタの講座はわかりにくかったと思いますが、cssについても触りの部分だけですが、後日、説明できればなと思います。
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
Twitter でマツカタをフォローしよう！
Follow @matsukataweb
コメントを残す