#003|簡単なページを作成してみよう!

まりなちゃん
実際にホームページを作成したいのですが、どうすればいいですか?

SS先生
HTMLファイルを作成する必要があります。

まりなちゃん
前回、教えてもらったHTMLファイルですね。
確か、タグを使用してウェブページの要素の意味や構造を定義したファイルだったような…

SS先生
そうです。よく覚えていましたね!
現在は、HTMLの記述方法を知らなくても、画像を配置したり、文章を記述するだけでHTMLファイルなどを生成してくれるホームページ作成ソフトがありますが、せっかくなので簡単なHTMLファイルを自分で作成して、HTMLの基本的な要素を確認してみましょう。

まりなちゃん
ありがとうございます!
では、ハロウィンの時に撮った写真を表示するホームページを作ってみたいです。

SS先生
いいですね。
それでは、今回は画像を表示するHTMLファイルを作成してみましょう!
後ほど詳細について解説をするので、ひとまず次の手順に沿ってHTMLファイルを作成してください。

まりなちゃん
はい、わかりました!

 

手順

※本手順は「Windows 7」を利用している場合を想定しています。

デスクトップ上で右クリック > 新規作成 > フォルダー をクリックします。

 

フォルダー名を「新しいフォルダー」から「Halloween」に変更します。

 

「Halloween」フォルダーの中で右クリック > 新規作成 > テキストドキュメント をクリックします。

halloween_new_03

 

ファイル名を「新しいテキスト ドキュメント.txt」から「Halloween.html」に変更します。
画像のような警告が表示された場合は「はい」をクリックします。

halloween_new_04

 

「Halloween」フォルダーの中で右クリック > 新規作成 > フォルダー をクリックします。

 

フォルダー名を「新しいフォルダー」から「image」に変更します。

 

「image」フォルダーに移動し、表示させたい画像ファイル[ref]ここでは「Halloween.png」を格納しています。[/ref]を格納します。

 

「Halloween」フォルダーに移動し、「Halloween.html」を選択した状態で
右クリック>プログラムから開く>任意のテキストエディタ[ref]画像ではサクラエディタを使用していますが、
使い慣れたテキストエディタで問題ありません。[/ref] をクリックします。

halloween_new_08

 

下記のテキストをコピーし、先ほど開いたテキストファイルにペーストした後にファイルを保存します。

—–ここから—–

<!DOCTYPE html>
<html lang=”ja”>

<head>
<title>ハロウィン</title>
</head>

<body>
<h1>まりなのホームページ</h1>
<p>2015/10/31</p>
<p>先日お出かけ先でこのようなパンが販売されていて、あまりに可愛かったので買っちゃいました!</p>
<img src=”image/Halloween.png” alt=”ハロウィンの写真”>
</body>

</html>

—–ここまで—–

「Halloween.html」ファイルをブラウザで開くと次のように表示されます。

halloween_n09

 

まりなちゃん
すごい!画像もちゃんと表示されていますね!
でも、HTMLファイルに書いているタグの意味がさっぱりわかりません…。

SS先生
大丈夫です。
ひとつずつタグの意味を確認していきましょう。

 

解説

それでは、「Halloween.html」ファイルに記載したタグの意味をひとつずつ確認していきます。

!DOCTYPE html

文書の内容がHTML5で作成されたことを宣言するDOCTYPE宣言(文書型宣言)です。
文書の先頭(<html>タグよりも上)に記述する必要があります。
作成した文書がHTML5であることを、ブラウザなどに明示的に伝えることで
HTMLファイルを認識するのを助けます。

 

html lang=”ja”

HTML文書であることを示す際に使用します。
<html>は、HTMLの最上位の要素(ルート要素)で、HTML文書の内容が開始することを表します。
HTMLのすべての要素は、html要素の開始タグ<html>と閉じタグ</html>の間に書く必要があります。

html要素は、lang属性で言語を指定することができます。
日本語を指定する場合は、lang=”ja”を指定します。

 

head

文書のタイトルなどの情報を記述します。
ここで記述する情報はメタデータ(付加情報)と呼ばれ、ブラウザには直接表示されません。
head要素内には、ページのタイトルを記述するtitle要素、文字コードや制作者名などの
メタデータを記述するmeta要素、読み込み対象となるCSSを指定するlink要素などを記載することができます。

 

title

ページのタイトルを表します。
title要素はホームページの内容には影響しないのですが、Googleなどの検索エンジンや
Webサイトの訪問者が参照する重要な情報なので、省略せずに記述することをお勧めします。

 

body

実際にブラウザに表示される内容を記述します。
body要素は文書中にひとつだけ記述でき、その中に他の要素やテキストを入力していきます。
body要素の開始タグ<body>と閉じタグ</body>の間に、見出し、段落、表、フォームなどの
要素を配置することができます。

 

h1

h1、h2、h3、h4、h5、h6の要素は文章の見出しを表します。6段階のランクがあります。
h1要素が最も高位の見出しで、h6は最も低位の見出しです。
h1~h6要素の目的は文字に見出しとしての意味を与えることで、
正しく設定しておくと専用のソフトで見出しを抽出して目次を作成したり、
検索エンジンで的確に検索してもらいやすくなるといったメリットがあります。

 

p

要素がひとつの段落であることを表します。
p要素内にh1~h6要素やp要素を記述するとブラウザでの表示が
崩れてしまうことがあるので、注意が必要です。

 

img src=”画像” alt=”画像の内容を表す文”

画像を表示します。src属性で表示する画像を指定し、
alt属性ではなんらかの理由で画像が表示できないときに代わりに表示させるテキストを指定します。

まりなちゃん
なるほど。タグにはこんな意味があるのですね!

SS先生
他にも、表や箇条書きを表現するタグなど、たくさんの種類がありますので、書籍やネットの情報を参考にいろいろと試してみてください。

まりなちゃん
はい、試してみます!
そういえば、HTMLファイルをダブルクリックしたら、ブラウザでページが表示されましたが、HTMLファイルを作成さえすれば、すぐにインターネットで見れるようになるのですか?

SS先生
残念ながら、今ブラウザで表示されているウェブページは「まりなちゃんが使っているコンピュータ」にあるデータを表示しているので、まだインターネットで見れる状態にはありません。

まりなちゃん
うーん…
じゃあ、どうすればインターネット上でも見られるようになるんだろう…?

SS先生
以前に「サーバという言葉は大事ですよ」とお話したのを覚えてますか?

まりなちゃん
あっ、そうだった!
データをサーバにアップロードする必要があるんですね!

SS先生
そのとおりです!
今回は、HTMLタグの説明が長くなったので、次回、レンタルサーバの申込み方法について確認してみましょう。

まりなちゃん
わかりました!

記事が気に入ったらシェアしてください♪