こんにちは、Eristarです。
３回にわたってホームページを簡単に作る方法を紹介していく記事の２回目。
今回は、「夏休みの自由研究に！パソコン1つで学べるホームページづくり（HTML編）」です。
前回の導入編はこちらをどうぞ↓
今回は、HTMLという言語を使って実際にホームページ作りをします。
(前回の復習)
HTMLってなに？
HTML（エイチ・ティー・エム・エル）とは、「HyperText Markup Language」の略。
インターネット上の多くのページが、このHTMLで構成されています。
例えば、下記のように記載します。
<h1>こんにちは</h1>
<p>これはHTMLで書かれた文章です。</p>
<h1>や<p>のような「タグ」と呼ばれる要素を使って、文字の見出しや段落、リスト、画像などをページに表示させていきます。
タグのルールを知ろう
HTMLにはいくつものタグがありますが、代表的なタグを説明していきます。
<html> と </html>
<html>タグは、「ここからホームページがはじまりますよ～」「ここまでですよ～」と教えるタグです。ホームページのスタートとゴールみたいなものです。
<head> と </head>
<head>タグはホームページの名前（タイトル）や、実際の画面には見えないのですが大事な情報を書いていきます。
<title> と </title>
ホームページの名前をつけるタグです。インターネットの上の方にあるタブにこの名前が出ます。<title>タグは<head>タグの中に書きます。
<body> と </body>
<body>タグはホームページの中身を書く所です。画面に出てくる文字や画像は大体この中に入れます。
<h1> ～ <h6>
<h1>~<h6>タグは「見出し（タイトル）」をつけるときに使うタグです。<h1>が一番大きくて目立つ文字になります。
<p> と </p>
<p>タグは「段落（だんらく）」を作るタグです。文章を書くときに毎回使います。
<ul>・<ol>・<li>
<ul>・<ol>・<li>タグはリスト（表）を作るときのタグです。
| タグ | 内容 |
| <ul></ul> | 黒い●がつくリスト |
| <ol></ol> | 数字がつくリスト |
| <li></li> | リストの1つ1つの項目 |
ここからは少し応用になります。
<img>（イメージ）
<img>タグは写真や絵を出したいときに使うタグです。これは閉じタグ</img>がありません。
<a> と </a>
<a>タグはリンクを作るときのタグです。クリックすると、ほかのページに飛べるようになります。
コードを書いてみよう
では実際にコードを書いていきましょう。
前回作成した「自由研究」フォルダーの中の「自由研究.txt」を開いてください。
開けたらそこに下記のコードを入力してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>僕のプロフィール</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これは、HTMLで作った自己紹介ページです。</p>
<h2>名前</h2>
<p>山田 太郎</p>
<h2>僕の好きなこと</h2>
<ul>
<li>ゲーム</li>
<li>サッカー</li>
<li>自転車</li>
</ul>
<h2>将来の夢</h2>
<p>サッカー選手</p>
</body>
</html>
メモ帳の画面だとこのようになっていればOKです。
全部書けたら、ファイルタブをクリックして保存をかけてください。
次に「自由研究.txt」を左クリック、そして右クリックしてプロパティを開いてください。そして「自由研究.txt」から「自由研究.html」に変更します。
そしてOKをクリックします。
すると、下記の画像の様な注意を促すポップアップが出てきますが「はい（Y）」をクリックします。
そしたら自由研究の拡張子が（.txt）から（.html）に変更されました。
では、実際に今作ったＨＴＭＬを開いてみましょう。
「自由研究.html」をダブルクリックします。
すると、ネット上に今作ったHTMLのホームページを開くことが出来ました。
次に少し応用と言いました<img>タグと<a>タグを使ってみましょう。
「自由研究.html」のファイル名を「自由研究.txt」に変更してから始めます。
まず<img>タグを使います。
事前にホームページにのせたい画像を自己紹介フォルダへ保存してください。
<img>タグは自己紹介で自分の名前を紹介したその下の行に下記をいれてみます。
<img src="自分の写真.png" alt="自分の写真" width="300">
自分の写真の所には写真のファイルのタイトルを入れます。
このように入れます。
<p>山田 太郎</p>
<img src="自分の写真.png" alt="自分の写真" width="300">
<h2>僕の好きなこと</h2>
(注意点)
画像の拡張子を間違えないように気をつけてください。
（今回の見本は拡張子.pngです。）
次に<a>タグを使ってみましょう。
<p><a href="https://keisuke-honda.com/ ">本田圭佑</a>選手の様な強いサッカー選手になりたいです。</p>
このように書くと本田圭佑の所をクリックするとの本田圭佑選手のオフィシャルWEBサイトに飛ぶことができます。
<p>サッカー選手</p>
<p><a href="https://keisuke-honda.com/ ">本田圭佑</a>選手の様な強いサッカー選手になりたいです。</p>
</body>
全部書けたら、ファイルタブをクリックして保存をかけてください。
先ほどと同じように、「自由研究.txt」のファイル名を「自由研究.html」に変更して「自由研究.html」をダブルクリックして開きます。
下の画像のように表示されれば成功です。
今回はHTMLを実際に使ってホームぺージを表示させてみました。
では、次回はCSSという言語を使ってホームページを装飾していきます。
↓皆様のクリックが励みになりますm(__)m
