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

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

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

2017年3月8日

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

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

簡単なhtmlタグ

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

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

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

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

<br>タグには閉じタグがなく、単独で機能するタグです。開始タグと閉じタグを一緒にまとめた<br />って記述でも改行されるのですが、<br>を使うのが、最新の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などを参考にして下さい。

HTMLクイックリファレンス

マツカタの講座はわかりにくかったと思いますが、cssについても触りの部分だけですが、後日、説明できればなと思います。

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

2017年3月8日

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でマツカタをフォローしよう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

matsukata

厄年を終え43歳になりました。 スノーボード歴20年以上、アウトドア、D.I.Y、料理、酒、バイク、、、趣味多数、、 大阪出身。恋愛、結婚を機に上京。東京での生活も10年そこそこの時の本厄の年、 ボーダー嫁のゲス不倫が原因での離婚。最愛の息子と離れての生活を余儀なくされる、、 そんなこんなで、これからの人生の春を信じて奮闘中!!