タグを使って完成させる

タグには様々な種類があるためすべてを覚えることは難しいですが、タグに対してスタイルを設定するので重要な項目になります。

今まで書いてきたコードにもありましたが、タグには はじまりと終わり（閉じタグ）があります。
中には閉じタグがないものもあるので注意が必要ですが、使っていくうちに覚えると思います。

段落 <p></p>

<p>タグは段落になります。

「はじめてホームページを作りました。」を<p>タグで囲みましょう

<p>はじめてホームページを作りました。</p>

段落を加えただけなので、ブラウザで確認をしても先ほどと変わりはありません。

コンテナー <div></div>

簡単に言うと、枠組みです。

<p>タグをまとめたり、メニューやリストを囲うなど、用途は多岐に渡ります。

本文に<div>タグと文章を追加しましょう。

<div>
<p>はじめてホームページを作りました。</p>
<p>タグを使っています。</p>
</div>

「更新ボタン」をクリックして確認。

divタグも見た目にはわかりません。

なんの意味があるんだよ。。と思うかもしれませんが、枠組みをすることでサイトの配置が自在になります。
このサイトもdivをたくさん使っていて不可欠なものとなっています。

リンク <a></a>

ページ移動をするときに使います。

このサイトでは左側のメニューがリンクになります。

<a>タグは、このように書きます。
<a href="移動したいファイル名">リンク先のタイトルなど</a>

<a href="index.html">トップページへ</a> 

更新ボタンをクリックすると、設定したリンクが表示されます。

画像 <img>

画像を表示したいときに使います。閉じタグはありません。

画像が必要なので、用意できる方は imgフォルダーに準備してください。

そうでない方は、こちらからイメージ2つを右クリックして画像を保存してください。

<img>タグはこのように書きます。

<img src="フォルダー名/画像のファイル名">

<img src="https://appli-base.net/images/html/hp/mixer.png">

<img>タグを記述するファイル（ここではindex.html）から見た画像の場所を指定します。

リンクより上に下記を追加します。

<p>画像を表示します。</p>
<img src="https://appli-base.net/images/html/hp/mixer.png">
<img src="https://appli-base.net/images/html/hp/roller1.png">

更新すると画像が表示されます。

index.htmlと画像が同じ階層のとき

階層と聞くと難しそうに思いますが、フロアと捉えるといいかもしれません。

index.htmlと同じ階層に「mixer.png」がある場合は、フォルダの指定は不要で、

<img src="mixer.png">

このように書きます。

改行 <br>

本文を改行したいときに使います。閉じタグはありません。

先ほど確認したindex.htmlでは、画像の横にリンクが表示されていますので、改行をしてみましょう。

リンクの前に<br>を追記します。

更新するとリンクが改行されているのがわかります。

以上でホームページを作ってみようは終わりです。

ここまで終えていかがでしたか？

たくさんのコードを一度に見ると訳がわからずイヤになってしまうと思うので、最小限のコードで少しづつ積み上げてみました。

ホームページを作ることができたという自信を持ち、ご自身でも新規から作ってみてください。

何回も作ることで手がスムーズに動くようになりますよ^^。

スタイルシートを使うと配置や装飾の範囲が広がりますので、興味がある方は こちらも見てみてください。

CSS入門とサンプル

一度に覚える必要はないので作りながら身に付けていきましょう。

まとめ

HTMLでホームページを作成するときは、
①フォルダーを作成
②htmlファイルを作成
③ブラウザで確認
という手順で進めていきます。

尚、この段階ではパソコンでしか見ることができません。
インターネットに公開するには、サーバーをレンタルし、ファイルをアップロードする必要があります。