HTMLでホームページの作り方

ホームページを作るには、HTML「HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)」という、ウェブページを記述するための「言語」が必要になります。

言語はW3C(World Wide Web Consortium)という団体によって規格が決められていて、更に、バージョンによって細かく違っており、後継規格であるXHTMLとCSSで構築することによって、表示速度が速く、検索エンジン好みのサイトになるといわれています。
最近はHTML 5に関する話題もあって、付いていくのも大変ですが、まぁどんどん改良(?)されているわけですね。

…というと、とても難しそうですが、基本はとっても簡単です。

とにかく何か、作ってみましょう!


この時点では、インターネットに接続している必要もありません。
パソコンの、メモ帳と、ブラウザを使います。

まず、テキストエディタを開きます。

ホームページ作成に必要なものでご紹介したように、無料で使いやすいソフトもたくさんありますが、インストールなどが必要になる為、今回は手軽なwindows付属の「メモ帳」を使ってテストしてみます。 startmemo
メモ帳を開くには、スタートボタン→すべてのプログラム→アクセサリ→メモ帳 をクリック!

HTMLを書いてみましょう。

HTMLのタグは、必ず半角英数で書かないと、きちんと動きません。

HTML文書を大きく分けると 「ヘッダ」と 「ボディ(本体)」の2つ から成り立っています。
更にものすごく大雑把に言うと、「ヘッダ」は文書の概要的な情報を、「ボディ(本体)」には、実際にページに表示される内容を書きます。初めに、HTMLは「ここから始まって」「ここまでで終わり」というように、始点と終点が対になっている「タグ」を覚えましょう。(対になっていないタグもあるんですが、これは追々ご説明します)

HTMLの開始には  <html>
HTMLの 終わりは  </html> というようなセットになります。

まずはこのファイルが「HTMLですよ」ということを宣言します。
<html>
</html>

次に、HTMLの間に、ヘッダとボディ部分の「枠」を作ってあげましょう。
<html>
<head>
</head>
<body>
</body>

</html>

せっかく書いたものが間違って消えてしまったりすると、とても悲しいので、こまめに保存しましょうね。
マイドキュメントに「web」など、分かりやすい名前のフォルダを作成します。
作った「web」フォルダの中に半角英数で「index.html」という名前を付けて保存してください。

※なぜ「index.html」なのかというと、このファイル名はちょっと特殊で、フォルダを開いた時に、ブラウザが一番初めに読もうとするファイル名なんです。通常、これが「ホームページ(スタートページ)」になります。
「index.html」がないと、フォルダの中身が丸見えになってしまうこともあるので、フォルダには「index.html」を必ず作っておきましょう!

ヘッダーに欠かせない情報「タイトル」を追加します。
<html>
<head>
<title>ホームページのタイトル</title>
</head>
<body>
</body>
</html>

title

ここで上書き保存して、index.htmlをダブルクリックして、ブラウザで見てみると…真っ白ですね(笑)
でも、よくみると…タイトル部分に文字が入ってるのが分かりますか??

次にボディの枠の間に、文字を書いてみます。
<html>
<head>
<title>ホームページのタイトル</title>
</head>
<body>
この文章が見えたら成功です。おめでとう。
</body>
</html>

書いたら、また保存。
面倒ですが、このマメさが、あなたの大切な時間をロスしない為のキーポイント(笑)
ちなみに、大抵キーボードの「Ctrlキー」を押しながら「S」キーを押すと「上書き保存」できます。

保存したら、index.htmlをダブルクリックして、ブラウザで確認してみましょう。
body内に書いた文字が、そっけなく表示されていれば、とりあえず成功です!

次回は、文字を飾ってみましょう♪

速度&安定性が人気のレンタルサーバー
国内最速!『ConoHa WING』
ConoHa WING

初期費用無料最低利用期間無し(日割りOK)、独自SSL無料。

高速・高機能・高安定性はもちろん、分かりやすい管理画面なので初心者でも使いやすい。

「WordPressかんたん移行」機能で他サーバーからの引越しも楽々!特にwordpressの表示が重くて困っている方にオススメのレンタルサーバーです。

高速&初心者でも安心『エックスサーバー』

初心者でも安心の電話サポート付きの高速サーバー。独自SSLも無料。

安定性とセキュリティ対応の早さは特筆!国内高速バックボーンと、独自の高速化機能でwordpressもサクサク動きます。

WordPress簡単インストールや、他サーバーから簡単に引越せる「WordPress簡単移行」、自動バックアップなど全部揃っています。

カゴヤのレンタルサーバー

堅実・安心、サポート力で人気があるサーバーです。高速環境のほか、自社所有のデータセンターで管理・運営されているほか、wordpress専用サーバーなどニーズに併せたプランが豊富なところも魅力。

HTML・CSS
yui

趣味が高じてフリーランスWEBデザイナーになり早10年。2児の母
ホームページ作りの楽しさと、作ったHPから申込・問合せがどんどん入ってくる楽しさを共感できる人を増やしたくてコツなどを発信しています。

フォローする
ホームページの作り方