初心者向け！HTMLでホームページを作ってみよう

ホームページはHTMLという言語で書かれています。
HTMLを勉強することで、ホームページを作れる様になります。
最近はWordPressでホームページを作るケースが多いですが、WordPressをカスタマイズする際にもHTMLの知識は必要になります。
HTMLの知識はあって損はしないので、ぜひ覚えておきましょう。

HTMLファイルを作成する
HTMLの雛形を作成する
ホームページを表示してみる
ホームページのタイトルを変更する
ホームページの内容を変更する
ホームページに画像を表示してみる
ホームページにリンクを貼ってみる
まとめ

HTMLファイルを作成する

まずは「html」という名前のフォルダを作成します。

次にテキストエディタを開いて、「index.html」というファイル名でhtmlフォルダ保存する。

「.html」はファイルの拡張子です。
もしファイル名に拡張子が表示されていない場合は、PCの設定で拡張子を表示してください。

HTMLの雛形を作成する

HTMLファイルには必ず記述しないといけないコードがあります。
index.htmlに以下のコードを記述して保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>トップページ</title>
</head>
<body>
  <p>ここはトップページです。</p>
</body>
</html>

ホームページを表示してみる

保存した「index.html」をダブルクリックすると、ブラウザが立ち上がり「ここはトップページです。」という文字が表示されます。
内容は文章1行しかないですが、これも立派なホームページです。

ホームページのタイトルを変更する

<title>と</title>の間に入力した文字がホームページのタイトルとなります。
「トップページ」と書かれている部分を好きな名前に変えてみましょう。
ブラウザのタブに自分のサイト名が表示されます。
また、Googleなどの検索結果にも<title>タグの内容が表示されます。

ホームページの内容を変更する

<body>と</body>の間に入力した内容がブラウザに表示されます。
<p>トップページです。</p>というコードで文章を表示しています。
<p>は段落を意味するタグで、文章を表示するときに使用します。
とりあえず、「トップページです。」という部分を好きな文章に書き換えて保存してみましょう。
ブラウザをリドードすると表示される文章が変わります。

ホームページに画像を表示してみる

ホームページに画像を表示してみましょう。

まずは表示したい画像を「img.jpg」というファイル名でhtmlフォルダに保存します。

次にindex.htmlの<body>と</body>の間に<img src="img.jpg" alt="画像の説明">というコードを記述します。
index.htmlの内容は以下の様になります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>トップページ</title>
</head>
<body>
  <img src="img.jpg" alt="画像の説明">
</body>
</html>

ブラウザをリドーロすると画像が表示されます。

<img>は画像を表示する時に使うタグです。
src="img.jpg"の部分で表示する画像の場所を指定しています。
例えば画像のファイル名が「gazo.jpg」だった場合は、src="gazo.jpg"となります。

alt="画像の説明"には画像の説明を記述します。
例えば、ワンちゃんが走っている画像だった場合、alt="ワンちゃんが走っている様子"のように記述します。

ホームページにリンクを貼ってみる

ホームページにリンクを貼ってみましょう。

まずhtmlフォルダにpage.htmlというファイルを作成します。
page.htmlに以下のコードを記述して保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>別ページ</title>
</head>
<body>
  <p>別ページです。</p>
</body>
</html>

次にindex.htmlの<body>と</body>の間に<a href="page.html">別ページへのリンク</a>を追加します。
index.htmlの内容は以下の様になります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>トップページ</title>
</head>
<body>
  <a href="page.html">別ページへのリンク</a>
</body>
</html>

index.htmlをブラウザで表示すると青文字で「別ページへのリンク」と表示されます。
「別ページへのリンク」をクリックするとpage.htmlに移動して「別ページです。」という文字が表示されます。

<a>はリンクを貼る時に使うタグで、href="page.html"でリンク先を指定します。
今回は同じフォルダ内のhtmlファイルにリンクを貼りましたが、別サイトにリンクを貼ることもできます。

例えば以下の様に記述するとYahooのトップページにリンクを貼ることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>トップページ</title>
</head>
<body>
  <a href="https://www.yahoo.co.jp/">Yahooへのリンク</a>
</body>
</html>

複数のhtmlファイルをリンクすることによって1つのWebサイトが出来上がります。