ゼロから始めるホームページ作成～１～

2020/9/16 2020/9/24 ホームページ作成ネタ

～目次～

ホームページとは？

ホームページとWEBサイトって何が違うの？

簡単に言うと、ブラウザのURLにドメインのみを入力したときに最初に表示されるのが「ホームページ」です。その他のページを含めてすべてのページを総称して「WEBサイト」と言います。

別に、相手に内容が伝われば呼び方はどちらでも良いと思います。

業界では呼び方に拘る煩わしい人もいますが。。。（笑）

他にも、ホームページ以外のページをWEBページといった言い方もあります。

この記事では、一応分けて記載させていただきますので、これらの文言が出てきたら、なんとなく想像してみてください。

ホームページ作成に必要なものは？

・テキスト形式のファイル（〇〇.html）

・WEBサーバ

・ブラウザ（できればGoogle chrome）

この３つがあれば、ホームページは作成できます。

テキスト形式のファイルは、無料のソフトウェア「sakuraエディター」をインストールすると作りやすいです。

WEBサーバは、将来的にかっこいいホームページにしたいなら独自ドメインを取得してレンタルサーバーを契約することをおススメします。

独自ドメインやレンタルサーバーについてはこちらをご覧ください。

が、最近は無料のWEBサーバもたくさんあるので、練習だけであればそれでも十分だと思います。

ブラウザは、デフォルトで入っているIEやedgeでも良いのですが、私が使い慣れているのでGoogle chromeをおススメします。

このブログではchrome利用を前提として記述させていただきます。

テキスト形式のファイルの作成方法

sakuraエディターのインストールができているのであれば、デスクトップで右クリック＞新規作成＞テキストドキュメントをクリックしてください。

もしくはsakuraエディターを開いてもOKです。

ファイル名は「sample01.html」としてください。

「.html」が拡張子といわれるものになります。

普通のテキストファイルであれば「.txt」とか表示されているはずです。

もし、拡張子が表示されていない場合は、フォルダーオプションの「登録されている拡張子は表示しない」のチェックを外してあげてください。

ファイルを保存するときに気を付けてもらいたいのが、文字コードです。

ホームページを作成するときには、世界共通の「UTF-8」という文字コードでファイルを保存してください。

そうしないと、意味不明な文字で画面が表示されてしまうことになりますので。。。

sakuraエディターでは、その辺が選択できるので、文字コードを「UTF-8」に変更して保存してください。

さて、保存が完了したら、いよいよ中身の記述です。

ファイルの中にはHTMLを記述します。

説明は後述するとして、下記のコードをそのままコピーして、ファイルの中身に張り付けてみてください。

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>サンプル01</title>
</head>
<body>
	<h1>初めてのホームページ作成</h1>
	<p>
	ホームページを作成してブラウザで見てみました。<br>
	きちんと表示されています。
	</p>
</body>
</html>

ブラウザで表示を見てみる

貼り付けが完了したら、上書き保存をしてエディターは閉じてOKです。

保存したファイルを右クリック→「プログラムから開く」→「Google Chrome」を選択して起動してみて下さい。
「初めてのホームページ作成
ホームページを作成してブラウザで見てみました。
きちんと表示されています。」
と表示されれば成功です。単純なものですがホームページが制作できました。

中身の文字を書き換えてブラウザの表示がどのように変わるか見てみましょう。

ホームページとは、基本的に文字や画像、動画を並べているだけのものです。

まずは、難しく考えずにテキストファイルに一定の記述をすれば、ブラウザで表示できるんだと認識してください。

HTMLとは？

ホームページというのは、HTMLという専用の言語で書かれます。HTMLは「Hyper Text Markup Language」の略で、WEBサイト用の文書を書くための言語です。
通常の文章を書く時にも、目次を書いたり、各段落に見出しをつけたり、段落を書いたりします。画像や動画を挿入したり、箇条書きを書いたりもします。
そのような構造をWEBサイトで表現するために用いられるのがHTMLです。