アマグラミング

プログラミング初心者が勉強したことを復習とメモがてら書いているだけです。

(05) <a>、属性と値、<img>

リンクを作成してみましょう。

リンクを作成するには<a>要素を用います。

<a>Google</a>

しかしこれだけでGoogleへのリンクが作れるわけはありません。

具体的なリンク先のURLが必要でしょう。

Googleのリンク先URLは

https://www.google.co.jp/

ここですが、

このURLの情報を追加しなければなりません。

 

その上で、これからよく出てくるというか、覚えなくてはいけないことが

あるので説明します。

こういった形を覚えてください

<要素 属性=  値 >テキスト</要素>

で、ですね

例えば、この<a>を使ってリンク先の情報を与えるには

hrefという属性名をつけます。

一応説明しておきますと

a はアンカーのaつまり錨のこと

hrefはHypertext Referenceの略です。

まあ、気になる方は調べると良いでしょう。

 

で、ここでいう値がURLですね。

実際書いて見たほうがはやいでしょう。

<a href="https://www.google.co.jp">Googleへ</a>

 

この形になってますね。

<要素 属性=  値 >テキスト</要素>

”でURLを囲むことに注意してくださいね

こんな感じですかね。

では

表示させてみましょう。

f:id:tiroru17:20170529083144p:plain

こんな感じです。

このGoogleへをクリックしてGoogleへ飛べれば成功です。

あなたはちゃんと飛べましたか?

 

 

さて、次に画像を表示してみましょう。

画像を表示するためには、<img>要素を用います。

 

<img>要素は画像をリンクして表示するので

<a>要素のようにリンク先の値が必要ですね。

あと属性名もhrefじゃないです

srcを用います。srcはsourceの略です。引用元って意味ですね。

imgはイメージの略。

 

しかしimg要素は画像を表示するわけで、囲むべき文がありません。

なので、終了タグは不要です。

ではやってみましょう。

 

<img src = "http://saiteichingin.jp/common/images/logo.jpg">

こんな感じでかきます。

表示してみますと

f:id:tiroru17:20170529084830p:plain

この画像はでかすぎましたね・・・

まあできました。

ネット上で様々な画像を見ると思いますが、それらは基本的に別のURLにアップロード

されているものを他のURLのページ上にこのような形で表示しているわけですね。

なので、この画像をクリックしても別に厚生労働省のページに飛んだりはしません。

画像がアップロードされているだけのURLですので。

 

では少し考えてみます。

この画像をクリックして厚生労働省にジャンプさせるにはどうしたらいいのでしょうか。

うーん、どうやらこうやるようですね

<a href="http://www.mhlw.go.jp/">

<img src="http://saiteichingin.jp/common/images/logo.jpg">

</a>

これを書き込んで表示してみます。

f:id:tiroru17:20170529091727g:plain

ちょっと何が起こっているかわかりにくいgifになってしまいましたが、

厚生労働省に飛べていますね。

うん、できていますね。

ちなみに属性名と値はスペースを開いて、複数書くことが可能です。

まあ、いずれそういったことも出てくるでしょう。

 

 

今回はここまでで、

メモ 記事作成時間80分。